refactor(webapp): remove styleguide (#9432)

docker-compose.override.yml

@@ -10,8 +10,6 @@ services:
       - NUXT_BUILD=/tmp/nuxt # avoid file permission issues when `rm -rf .nuxt/`
     volumes:
       - ./webapp:/app
-      - ./styleguide:/styleguide
-      - /styleguide/node_modules
       - ./packages/ui:/packages/ui
       - /packages/ui/node_modules
 

webapp/Dockerfile

@@ -1,14 +1,4 @@
 # syntax=docker/dockerfile:1
-FROM node:25.8.1-alpine AS styleguide
-RUN apk --no-cache add git python3 make g++
-RUN mkdir -p /app
-WORKDIR /app
-COPY styleguide/package.json styleguide/yarn.lock ./
-RUN --mount=type=cache,target=/yarn-cache,sharing=locked \
-    yarn install --production=false --frozen-lockfile --non-interactive --cache-folder /yarn-cache
-COPY styleguide/. .
-RUN yarn run build:lib
-
 FROM node:25.8.1-alpine AS ui-library
 RUN apk --no-cache add git python3 make g++
 RUN mkdir -p /app
@@ -34,7 +24,6 @@ EXPOSE ${PORT}
 RUN apk --no-cache add git python3 make g++ bash jq
 RUN mkdir -p /app
 WORKDIR /app
-COPY --from=styleguide ./app/ /styleguide/
 COPY --from=ui-library ./app/ /packages/ui/
 CMD ["/bin/bash", "-c", "yarn run start"]
 

webapp/Dockerfile.maintenance

@@ -9,15 +9,6 @@ LABEL org.label-schema.vendor="ocelot.social Community"
 LABEL org.label-schema.schema-version="1.0"
 LABEL maintainer="devops@ocelot.social"
 
-FROM node:25.8.1-alpine AS styleguide
-RUN apk --no-cache add git python3 make g++
-RUN mkdir -p /app
-WORKDIR /app
-COPY styleguide .
-RUN --mount=type=cache,target=/yarn-cache,sharing=locked \
-    yarn install --production=false --frozen-lockfile --non-interactive --cache-folder /yarn-cache
-RUN yarn run build:lib
-
 FROM node:25.8.1-alpine AS ui-library
 RUN apk --no-cache add git python3 make g++
 RUN mkdir -p /app
@@ -29,7 +20,6 @@ RUN npm run build
 FROM node:25.8.1-alpine AS build
 ENV NODE_ENV="production"
 RUN apk --no-cache add git python3 make g++ bash jq
-COPY --from=styleguide ./app/ /styleguide/
 COPY --from=ui-library ./app/ /packages/ui/
 RUN mkdir -p /app
 WORKDIR /app

webapp/assets/_new/styles/_ds-compat.scss

@@ -1,7 +1,7 @@
 // ==========================================================
 // DS-COMPAT: Temporäre Utility-Klassen für ds-* Migration
 // TODO(tailwind): Durch Tailwind-Utilities ersetzen
-// Grep: ds-mb-, ds-mt-, ds-my-, ds-space-centered, ds-flex
+// Global resets + fonts are in resets.scss (loaded first)
 // ==========================================================
 
 // ds-space Ersatz — Margin-Bottom
@@ -104,7 +104,7 @@
 .ds-table-wrap { width: 100%; overflow: auto; }
 .ds-table { width: 100%; border-collapse: collapse; }
 .ds-table-col {
-  vertical-align: middle;
+  vertical-align: top;
   padding: $space-small $space-xx-small;
   &:last-child { padding-right: 0; }
 }
@@ -125,3 +125,349 @@
   &.ds-table-col-right, &.ds-table-head-col-right { text-align: right; }
   &.ds-table-col-center, &.ds-table-head-col-center { text-align: center; }
 }
+
+// ==========================================================
+// Layout: Container, Section, Placeholder
+// ==========================================================
+.ds-container {
+  margin: 0 auto;
+  padding: 0 $space-small;
+  @media #{$media-query-medium} { padding: 0 $space-base; }
+  @media #{$media-query-large}  { padding: 0 $space-x-large; }
+}
+.ds-container-small   { max-width: #{$sm}px; }
+.ds-container-medium  { max-width: #{$md}px; }
+.ds-container-x-large { max-width: #{$xl}px; }
+
+.ds-section {
+  padding: $space-large 0;
+}
+
+.ds-placeholder {
+  color: $text-color-disabled;
+  font-style: italic;
+  text-align: center;
+  padding: $space-base;
+}
+
+// ==========================================================
+// Typography: Heading
+// ==========================================================
+.ds-heading {
+  margin: 2em 0 .6em;
+  padding: 0;
+  font-family: $font-family-heading;
+  font-weight: $font-weight-bold;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+}
+.ds-heading:first-child { margin-top: 0; }
+.ds-heading:last-child { margin-bottom: 0; }
+.ds-heading-h1 { font-size: $font-size-xx-large; }
+.ds-heading-h2 { font-size: $font-size-xx-large; }
+.ds-heading-h3 { font-size: $font-size-x-large; }
+.ds-heading-h4 { font-size: $font-size-large; }
+@media #{$media-query-large} {
+  .ds-heading-h1 { font-size: $font-size-xxx-large; }
+}
+.ds-heading-soft { color: $text-color-softer; }
+.ds-heading-no-margin { margin: 0; }
+.ds-heading-align-center { text-align: center; }
+
+// Tab Nav — styles are in TabNavigation.vue (scoped), no global .ds-tab-nav needed
+
+// ==========================================================
+// List
+// ==========================================================
+.ds-list {
+  margin: 0 0 1em;
+  padding: 0;
+  list-style: none;
+  line-height: $line-height-base;
+}
+.ds-list:last-child { margin-bottom: 0; }
+
+// ==========================================================
+// Logo
+// ==========================================================
+.ds-logo {
+  display: inline-block;
+}
+.ds-logo-svg {
+  display: block;
+  height: auto;
+}
+.ds-logo-mobile   { display: block; }
+.ds-logo-tablet   { display: none; }
+.ds-logo-desktop  { display: none; }
+.ds-logo-inverse  { display: none; }
+
+@media screen and (min-width: 600px) {
+  .ds-logo-mobile  { display: none; }
+  .ds-logo-tablet  { display: block; }
+}
+@media screen and (min-width: 960px) {
+  .ds-logo-tablet  { display: none; }
+  .ds-logo-desktop { display: block; }
+}
+
+// Footer — styles are in PageFooter.vue (scoped), no global .ds-footer needed
+
+// ==========================================================
+// Form / Input (used by OcelotInput)
+// ==========================================================
+.ds-form-item {
+  position: relative;
+  margin-bottom: $space-small;
+}
+.ds-form-item:last-child { margin-bottom: 0; }
+
+.ds-input-label {
+  padding-bottom: $space-xx-small;
+  color: $text-color-soft;
+  font-size: $font-size-base;
+  display: block;
+}
+
+.ds-input-error {
+  color: $color-danger;
+  font-size: $font-size-x-small;
+  position: absolute;
+  top: 100%;
+}
+.ds-input-error-enter-active {
+  transition: opacity $duration-base $ease-out, transform $duration-base $ease-out;
+}
+.ds-input-error-enter, .ds-input-error-leave-to {
+  opacity: 0;
+  transform: translateY(-2px);
+}
+
+.ds-input-wrap { position: relative; }
+
+.ds-input {
+  appearance: none;
+  box-sizing: border-box;
+  font-size: $input-font-size-base;
+  line-height: $line-height-base;
+  font-family: $font-family-text;
+  width: 100%;
+  padding: $input-padding-vertical $space-x-small;
+  height: $input-height;
+  color: $text-color-base;
+  background: $background-color-soft;
+  border: $input-border-size solid $border-color-softer;
+  border-radius: $border-radius-base;
+  outline: none;
+  transition: all $duration-short $ease-out;
+}
+.ds-input::placeholder { color: $text-color-disabled; }
+.ds-input-has-focus .ds-input, .ds-input:focus {
+  border-color: $border-color-active;
+  background: $background-color-base;
+}
+.ds-input-is-disabled .ds-input, .ds-input:disabled {
+  color: $text-color-disabled;
+  opacity: $opacity-disabled;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: $background-color-disabled;
+}
+.ds-input-is-readonly .ds-input { pointer-events: none; }
+.ds-input-has-error .ds-input { border-color: $border-color-danger; }
+
+.ds-input-size-small {
+  font-size: $font-size-small;
+  .ds-input { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; }
+}
+.ds-input-size-large {
+  font-size: $font-size-large;
+  .ds-input { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; }
+}
+
+textarea.ds-input { height: auto; min-height: $input-height; resize: none; }
+textarea.ds-input-size-small { min-height: $input-height-small; }
+textarea.ds-input-size-large { min-height: $input-height-large; }
+
+.ds-input-icon, .ds-input-icon-right {
+  position: absolute;
+  top: 0; bottom: 0; left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $input-height;
+  color: $text-color-softer;
+  transition: color $duration-short $ease-out;
+  pointer-events: none;
+}
+.ds-input-has-focus .ds-input-icon,
+.ds-input-has-focus .ds-input-icon-right { color: $text-color-base; }
+.ds-input-size-small .ds-input-icon,
+.ds-input-size-small .ds-input-icon-right { width: $input-height-small; }
+.ds-input-size-large .ds-input-icon,
+.ds-input-size-large .ds-input-icon-right { width: $input-height-large; }
+.ds-input-icon-right { right: 0; left: auto; }
+
+.ds-input-has-icon { padding-left: $input-height; }
+.ds-input-size-small .ds-input-has-icon { padding-left: $input-height-small; }
+.ds-input-size-large .ds-input-has-icon { padding-left: $input-height-large; }
+.ds-input-has-icon-right { padding-right: $input-height; }
+.ds-input-size-small .ds-input-has-icon-right { padding-right: $input-height-small; }
+.ds-input-size-large .ds-input-has-icon-right { padding-right: $input-height-large; }
+
+// ==========================================================
+// Select (used by OcelotSelect)
+// ==========================================================
+.ds-select-wrap { position: relative; }
+
+.ds-select {
+  appearance: none;
+  box-sizing: border-box;
+  font-size: $input-font-size-base;
+  line-height: $line-height-base;
+  font-family: $font-family-text;
+  width: 100%;
+  padding: $input-padding-vertical $space-x-small;
+  height: $input-height;
+  color: $text-color-base;
+  background: $background-color-soft;
+  border: $input-border-size solid $border-color-softer;
+  border-radius: $border-radius-base;
+  outline: none;
+  transition: all $duration-short $ease-out;
+  user-select: none;
+}
+.ds-select::placeholder { color: $text-color-disabled; }
+.ds-input-has-focus .ds-select, .ds-select:focus {
+  border-color: $border-color-active;
+  background: $background-color-base;
+}
+.ds-input-is-disabled .ds-select, .ds-select:disabled {
+  color: $text-color-disabled;
+  opacity: $opacity-disabled;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: $background-color-disabled;
+}
+.ds-input-is-readonly .ds-select { pointer-events: none; }
+.ds-input-has-error .ds-select { border-color: $border-color-danger; }
+.ds-select-is-open .ds-select {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+}
+.ds-input-size-small .ds-select { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; }
+.ds-input-size-large .ds-select { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; }
+
+.ds-select-multiple {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.ds-select-search, .ds-select-value {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  border: $input-border-size solid transparent;
+  padding: $input-padding-vertical $space-x-small;
+  line-height: $line-height-base;
+}
+.ds-input-size-small .ds-select-search,
+.ds-input-size-small .ds-select-value { padding: $input-padding-vertical-small $space-x-small; }
+.ds-input-size-large .ds-select-search,
+.ds-input-size-large .ds-select-value { padding: $input-padding-vertical-large $space-x-small; }
+
+.ds-select-has-icon .ds-select-search,
+.ds-select-has-icon .ds-select-value { padding-left: $input-height; }
+.ds-select-has-icon-right .ds-select-search,
+.ds-select-has-icon-right .ds-select-value { padding-right: $input-height; }
+
+.ds-select-search {
+  appearance: none;
+  font-size: inherit;
+  font-family: $font-family-text;
+  width: 100%;
+  background: transparent;
+  color: $text-color-base;
+  outline: none;
+  user-select: text;
+  opacity: 0;
+}
+.ds-select-search::placeholder { color: $text-color-disabled; }
+.ds-select-is-open .ds-select-search { opacity: 1; }
+.ds-select-multiple .ds-select-search {
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  padding: 0;
+  opacity: 1;
+}
+
+.ds-select-placeholder, .ds-select-value { pointer-events: none; }
+.ds-select-is-open .ds-select-placeholder,
+.ds-select-is-open .ds-select-value { opacity: 0; }
+.ds-select-placeholder { color: $text-color-disabled; }
+
+.ds-selected-options { display: flex; max-width: 100%; overflow: hidden; }
+.ds-selected-option { display: inline-flex; align-items: center; margin-right: $space-xx-small; }
+
+.ds-select-dropdown {
+  position: absolute;
+  z-index: $z-index-dropdown;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background-color: $background-color-base;
+  border: $input-border-size solid $border-color-active;
+  border-top: 0;
+  border-bottom-left-radius: $border-radius-base;
+  border-bottom-right-radius: $border-radius-base;
+  visibility: hidden;
+  opacity: 0;
+  transition: all $duration-short $ease-out, border-bottom 0ms;
+  max-height: 240px;
+  overflow: auto;
+}
+.ds-select-is-open .ds-select-dropdown { visibility: visible; opacity: 1; }
+
+.ds-select-dropdown-message {
+  padding: $input-padding-vertical $space-x-small;
+  color: $text-color-disabled;
+}
+
+.ds-select-options {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-select-option {
+  padding: $input-padding-vertical $space-x-small;
+  cursor: pointer;
+  transition: all $duration-short $ease-out;
+}
+.ds-select-option.ds-select-option-hover {
+  background-color: $background-color-softer;
+  color: $text-color-base;
+}
+.ds-select-option-is-selected {
+  background-color: $background-color-soft;
+  color: $text-color-primary;
+}
+
+.ds-select-icon, .ds-select-icon-right {
+  position: absolute;
+  top: 0; bottom: 0; left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $input-height;
+  color: $text-color-softer;
+  transition: color $duration-short $ease-out;
+  pointer-events: none;
+}
+.ds-input-has-focus .ds-select-icon,
+.ds-input-has-focus .ds-select-icon-right { color: $text-color-base; }
+.ds-select-icon-right { right: 0; left: auto; }

webapp/assets/_new/styles/resets.scss

@@ -1,7 +1,126 @@
-* {
+// Fonts (previously loaded via styleguide system.css)
+@font-face {
+  font-family: LatoWeb;
+  src: url('/fonts/Lato-Regular.1f440a46.woff2') format('woff2'),
+       url('/fonts/Lato-Regular.ffb25090.woff') format('woff');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  text-rendering: optimizelegibility;
+}
+@font-face {
+  font-family: LatoWeb;
+  src: url('/fonts/Lato-Italic.a6774e2c.woff2') format('woff2'),
+       url('/fonts/Lato-Italic.ff8877c4.woff') format('woff');
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  text-rendering: optimizelegibility;
+}
+@font-face {
+  font-family: LatoWeb;
+  src: url('/fonts/Lato-Bold.1e239003.woff2') format('woff2'),
+       url('/fonts/Lato-Bold.35be9fc3.woff') format('woff');
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  text-rendering: optimizelegibility;
+}
+@font-face {
+  font-family: LatoWeb;
+  src: url('/fonts/Lato-BoldItalic.4ef02877.woff2') format('woff2'),
+       url('/fonts/Lato-BoldItalic.5171ee7d.woff') format('woff');
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  text-rendering: optimizelegibility;
+}
+@font-face {
+  font-family: 'Gentium Basic';
+  src: local('Gentium Basic'), local('GentiumBasic'),
+       url('/fonts/GentiumBasic.aa23a915.woff2') format('woff2'),
+       url('/fonts/GentiumBasic.7775b109.woff') format('woff');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
+}
+@font-face {
+  font-family: 'Gentium Basic';
+  src: local('Gentium Basic Italic'), local('GentiumBasic-Italic'),
+       url('/fonts/GentiumBasic-Italic.84c97b07.woff2') format('woff2'),
+       url('/fonts/GentiumBasic-Italic.b5afcc4e.woff') format('woff');
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
+}
+
+// Global resets
+*,
+::after,
+::before {
   box-sizing: border-box;
 }
 
+html {
+  font-family: sans-serif;
+  font-size: 15px;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.3;
+  font-family: $font-family-text;
+  font-variant-ligatures: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $text-color-base;
+  background-color: $background-color-disabled;
+}
+
+a {
+  text-decoration: none !important;
+  color: $color-primary;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+img {
+  border-style: none;
+  vertical-align: middle;
+}
+
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button, input {
+  overflow: visible;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[role="button"], a, area, button, input:not([type="range"]), label, select, summary, textarea {
+  touch-action: manipulation;
+}
+
 button {
   padding: 0;
   background: transparent;

webapp/components/ContentMenu/ContentMenu.Group.spec.js

@@ -1,12 +1,10 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
-import Styleguide from '@@/'
 import ContentMenu from './ContentMenu.vue'
 
 const localVue = createLocalVue()
 
-localVue.use(Styleguide)
 localVue.use(VTooltip)
 localVue.use(Vuex)
 

webapp/components/ContentMenu/ContentMenu.spec.js

@@ -1,12 +1,10 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
-import Styleguide from '@@/'
 import ContentMenu from './ContentMenu.vue'
 
 const localVue = createLocalVue()
 
-localVue.use(Styleguide)
 localVue.use(VTooltip)
 localVue.use(Vuex)
 

webapp/components/LoginForm/LoginForm.spec.js

@@ -1,14 +1,12 @@
 import Vue from 'vue'
 import LoginForm from './LoginForm.vue'
 import ShowPassword from '../ShowPassword/ShowPassword.vue'
-import Styleguide from '@@/'
 import Vuex from 'vuex'
 import { mount, createLocalVue } from '@vue/test-utils'
 import { ocelotIcons } from '@ocelot-social/ui/ocelot'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
-localVue.use(Styleguide)
 
 const stubs = {
   'nuxt-link': true,

webapp/jest.config.js

@@ -56,8 +56,6 @@ module.exports = {
     '@mapbox/mapbox-gl-geocoder': 'identity-obj-proxy',
     'vue2-datepicker/locale/undefined': 'vue2-datepicker/locale/en',
     '^@/(.*)$': '<rootDir>/src/$1',
-    // jest is unable to build the styleguide on its own, as it uses webpack.
-    '^@@/': '<rootDir>/../styleguide/dist/system.umd.min.js',
     '^~/(.*)$': '<rootDir>/$1',
   },
   moduleFileExtensions: ['js', 'mjs', 'json', 'vue'],

webapp/jsconfig.json

@@ -14,9 +14,6 @@
       "@": [
         "*"
       ],
-      "@@/*": [
-        "../styleguide/dist/system.umd.min.js"
-      ],
     }
   }
 }

webapp/maintenance/source/nuxt.config.maintenance.js

@@ -38,7 +38,6 @@ export default {
   styleResources,
 
   plugins: [
-    { src: `~/plugins/styleguide.js`, ssr: true },
     { src: '~/plugins/i18n.js', ssr: true },
     { src: '~/plugins/v-tooltip.js', ssr: false },
   ],

webapp/nuxt.config.js

@@ -16,12 +16,8 @@ const ogLocaleAlternates = locales
   .filter((l) => l.enabled && l.code !== CONFIG.LANGUAGE_DEFAULT)
   .map((l) => l.iso.replace('-', '_'))
 
-const styleguidePath = '../styleguide'
-const styleguideStyles = [
-  // `${styleguidePath}/src/system/styles/main.scss`,
-  // `${styleguidePath}/src/system/styles/shared.scss`,
-  `${styleguidePath}/dist/shared.scss`,
-]
+// Design tokens (SCSS variables) — originally from styleguide, now local
+const designTokenStyles = ['~assets/_new/styles/_styleguide-tokens.scss']
 
 export default {
   buildDir: CONFIG.NUXT_BUILD,
@@ -114,11 +110,12 @@ export default {
     '~assets/_new/styles/resets.scss',
     '~assets/styles/main.scss',
     '~assets/styles/imports/_branding.scss',
-    // @ocelot-social/ui CSS variables (loaded before styleguide)
+    // @ocelot-social/ui CSS variables
     '~assets/_new/styles/ocelot-ui-variables.scss',
     // Utility classes replacing ds-* Vue components
     '~assets/_new/styles/_ds-compat.scss',
-    // Note: @ocelot-social/ui/style.css is loaded via plugin after styleguide
+    // UI library component styles (Tailwind utilities + OsMenu CSS)
+    '@ocelot-social/ui/style.css',
   ],
 
   /*
@@ -127,7 +124,7 @@ export default {
   styleResources: {
     scss: [
       '~assets/_new/styles/uses.scss',
-      ...styleguideStyles,
+      ...designTokenStyles,
       '~assets/_new/styles/tokens.scss',
       '~assets/styles/imports/_branding.scss',
       '~assets/_new/styles/export.scss',
@@ -139,10 +136,6 @@ export default {
    ** Plugins to load before mounting the App
    */
   plugins: [
-    {
-      src: `~/plugins/styleguide.js`,
-      ssr: true,
-    },
     { src: '~/plugins/i18n.js', ssr: true },
     { src: '~/plugins/axios.js', ssr: false },
     { src: '~/plugins/keep-alive.js', ssr: false },
@@ -322,7 +315,6 @@ export default {
         config.devtool = ctx.isDev ? 'eval-source-map' : 'hidden-source-map'
       }
 
-      config.resolve.alias['@@'] = path.resolve(__dirname, `${styleguidePath}/dist`)
       // Vue 2.7 has built-in Composition API - redirect old imports
       config.resolve.alias['@vue/composition-api'] = 'vue'
       // Ensure vue-demi uses webapp's Vue 2.7 (not UI library's Vue 3)
@@ -335,11 +327,6 @@ export default {
       config.resolve.alias['@ocelot-social/ui$'] = path.join(uiLibraryPath, 'index.mjs')
       config.resolve.alias['@ocelot-social/ui/ocelot$'] = path.join(uiLibraryPath, 'ocelot.mjs')
       config.resolve.alias['@ocelot-social/ui/style.css$'] = path.join(uiLibraryPath, 'style.css')
-      config.module.rules.push({
-        resourceQuery: /blockType=docs/,
-        loader: require.resolve(`${styleguidePath}/src/loader/docs-trim-loader.js`),
-      })
-
       const svgRule = config.module.rules.find((rule) => rule.test.test('.svg'))
       svgRule.test = /\.(png|jpe?g|gif|webp)$/
       config.module.rules.push({

webapp/pages/settings/blocked-users.spec.js

@@ -1,12 +1,10 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import BlockedUsers from './blocked-users.vue'
-import Styleguide from '@@/'
 import Filters from '~/plugins/vue-filters'
 import { unblockUser } from '~/graphql/settings/BlockedUsers'
 
 const localVue = createLocalVue()
 
-localVue.use(Styleguide)
 localVue.use(Filters)
 
 const stubs = {

webapp/pages/settings/muted-users.spec.js

@@ -1,12 +1,10 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import MutedUsers from './muted-users.vue'
-import Styleguide from '@@/'
 import Filters from '~/plugins/vue-filters'
 import { unmuteUser } from '~/graphql/settings/MutedUsers'
 
 const localVue = createLocalVue()
 
-localVue.use(Styleguide)
 localVue.use(Filters)
 
 const stubs = {

webapp/plugins/styleguide.js

@@ -1,7 +0,0 @@
-import Vue from 'vue'
-import Styleguide from '@@/system.umd.min.js'
-import '@@/system.css'
-// Load UI library CSS after styleguide to ensure correct specificity
-import '@ocelot-social/ui/style.css'
-
-Vue.use(Styleguide)

webapp/storybook/helpers.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
-import Styleguide from '@@/'
 import { faker } from '@faker-js/faker'
 import Filters from '~/plugins/vue-filters'
 import Directives from '~/plugins/vue-directives'
@@ -13,7 +12,6 @@ import '~/plugins/v-tooltip'
 const helpers = {
   init(options = {}) {
     Vue.use(Vuex)
-    Vue.use(Styleguide)
     Vue.use(Filters)
     Vue.use(IziToast)
     Vue.use(Directives)

webapp/storybook/layout.vue

@@ -5,8 +5,7 @@
 </template>
 
 <style lang="scss">
-@import '../styleguide/src/system/styles/main.scss';
-@import '../styleguide/src/system/styles/shared.scss';
+@import '~/assets/_new/styles/_styleguide-tokens.scss';
 @import '~/assets/styles/main.scss';
 
 .container {

webapp/storybook/webpack.config.js

@@ -19,11 +19,7 @@ module.exports = async ({ config, mode }) => {
         loader: 'style-resources-loader',
         options: {
           patterns: [
-            path.resolve(
-              __dirname,
-              '../styleguide/src/system/styles/main.scss',
-              '../styleguide/src/system/styles/shared.scss',
-            ),
+            path.resolve(__dirname, '../assets/_new/styles/_styleguide-tokens.scss'),
             path.resolve(__dirname, '../assets/_new/styles/tokens.scss'),
           ],
           injector: 'prepend',

webapp/test/__mocks__/@ocelot-social/ui.js

@@ -75,8 +75,12 @@ Module._load = function (request, parent, isMain) {
   return originalLoad.apply(this, arguments)
 }
 
-// Load the UI library dist
-const uiDistPath = path.resolve(__dirname, '../../../node_modules/@ocelot-social/ui/dist/index.cjs')
+// Load the UI library dist directly from packages/ui (not from node_modules copy)
+// In Docker: /packages/ui/dist, locally: ../../../../packages/ui/dist
+const fs = require('fs')
+const dockerPath = '/packages/ui/dist/index.cjs'
+const localPath = path.resolve(__dirname, '../../../../packages/ui/dist/index.cjs')
+const uiDistPath = fs.existsSync(dockerPath) ? dockerPath : localPath
 const ui = require(uiDistPath)
 
 // Export everything from the UI library

webapp/test/testSetup.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
-import Styleguide from '@@/'
 import Filters from '~/plugins/vue-filters'
 import InfiniteLoading from '~/plugins/vue-infinite-loading'
 import Directives from '~/plugins/vue-directives'
@@ -27,7 +26,6 @@ global.localVue = createLocalVue()
 
 global.localVue.use(Vuex)
 global.localVue.use(VTooltip)
-global.localVue.use(Styleguide)
 global.localVue.use(Filters)
 global.localVue.use(Directives)
 global.localVue.use(InfiniteLoading)