From 7ed949fd74bfb10ff3db5cf61da84520e5705246 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 4 Dec 2024 20:42:32 +0100
Subject: [PATCH 1/6] Add hacky approach to upload&apply material-ui json

---
 .../components/General/AppearanceSection.vue  | 123 ++++++++++++++++++
 .../src/composables/piniaStores/theme.ts      |  15 +++
 2 files changed, 138 insertions(+)

diff --git a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
index 0d602813223..d7549862415 100644
--- a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
+++ b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
@@ -38,11 +38,30 @@
           @change="uploadImage"
         />
       </div>
+      <div>
+        <h3 v-text="$gettext('Theme')" />
+        <oc-button
+          variation="primary"
+          appearance="filled"
+          style="background-color: gold; color: black"
+          @click="triggerFileInput"
+        >
+          Try MaterialUI (Upload JSON File)
+        </oc-button>
+        <input
+          ref="fileInput"
+          type="file"
+          accept="application/json"
+          style="display: none"
+          @change="handleFileUpload"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import { z } from 'zod'
 import { defineComponent, computed, unref, VNodeRef, ref } from 'vue'
 import { ContextActionMenu, useThemeStore } from '@ownclouders/web-pkg'
 import {
@@ -85,7 +104,111 @@ export default defineComponent({
 
     const supportedLogoMimeTypesAcceptValue = supportedLogoMimeTypes.join(',')
 
+    const colorSchemeSchema = z.object({
+      primary: z.string(),
+      surfaceTint: z.string(),
+      onPrimary: z.string(),
+      primaryContainer: z.string(),
+      onPrimaryContainer: z.string(),
+      secondary: z.string(),
+      onSecondary: z.string(),
+      secondaryContainer: z.string(),
+      onSecondaryContainer: z.string(),
+      tertiary: z.string(),
+      onTertiary: z.string(),
+      tertiaryContainer: z.string(),
+      onTertiaryContainer: z.string(),
+      error: z.string(),
+      onError: z.string(),
+      errorContainer: z.string(),
+      onErrorContainer: z.string(),
+      background: z.string(),
+      onBackground: z.string(),
+      surface: z.string(),
+      onSurface: z.string(),
+      surfaceVariant: z.string(),
+      onSurfaceVariant: z.string(),
+      outline: z.string(),
+      outlineVariant: z.string(),
+      shadow: z.string(),
+      scrim: z.string(),
+      inverseSurface: z.string(),
+      inverseOnSurface: z.string(),
+      inversePrimary: z.string(),
+      primaryFixed: z.string(),
+      onPrimaryFixed: z.string(),
+      primaryFixedDim: z.string(),
+      onPrimaryFixedVariant: z.string(),
+      secondaryFixed: z.string(),
+      onSecondaryFixed: z.string(),
+      secondaryFixedDim: z.string(),
+      onSecondaryFixedVariant: z.string(),
+      tertiaryFixed: z.string(),
+      onTertiaryFixed: z.string(),
+      tertiaryFixedDim: z.string(),
+      onTertiaryFixedVariant: z.string(),
+      surfaceDim: z.string(),
+      surfaceBright: z.string(),
+      surfaceContainerLowest: z.string(),
+      surfaceContainerLow: z.string(),
+      surfaceContainer: z.string(),
+      surfaceContainerHigh: z.string(),
+      surfaceContainerHighest: z.string()
+    })
+
+    const schemeCollectionSchema = z.record(colorSchemeSchema)
+
+    const rootSchema = z.object({
+      schemes: schemeCollectionSchema
+    })
+
+    const fileInput = ref<HTMLInputElement | null>(null)
+
+    const triggerFileInput = () => {
+      fileInput.value?.click()
+    }
+
+    const handleFileUpload = (event: Event) => {
+      const input = event.target as HTMLInputElement
+      const file = input.files?.[0]
+      if (!file) return
+
+      const reader = new FileReader()
+      reader.onload = async () => {
+        try {
+          const parsedData = JSON.parse(reader.result as string)
+          const tryThemes = rootSchema.parse(parsedData)
+
+          const oldCurrentTheme = unref(currentTheme)
+
+          const newThemes = []
+
+          Object.keys(tryThemes['schemes']).forEach((themeName) => {
+            const tryTheme = tryThemes['schemes'][themeName]
+            newThemes.push({
+              ...oldCurrentTheme,
+              designTokens: {
+                ...oldCurrentTheme.designTokens,
+                colorPalette: tryTheme
+              },
+              isDark: themeName.includes('dark'),
+              name: themeName
+            })
+          })
+
+          themeStore.resetAllThemes()
+          themeStore.initializeMdThemes(newThemes)
+        } catch (error) {
+          console.error('Error reading or parsing file:', error)
+        }
+      }
+      reader.readAsText(file)
+    }
+
     return {
+      fileInput,
+      triggerFileInput,
+      handleFileUpload,
       actionOptions,
       currentTheme,
       menuItems,
diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index 586d0849668..bf20ea682e8 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -96,6 +96,19 @@ export const useThemeStore = defineStore('theme', () => {
 
   const availableThemes = ref<WebThemeType[]>([])
 
+  const resetAllThemes = () => {
+    availableThemes.value = []
+    currentTheme.value = undefined
+  }
+
+  const initializeMdThemes = (themeConfig: unknown) => {
+    availableThemes.value = Object.keys(themeConfig).map((key) => {
+      return themeConfig[key]
+    })
+
+    setThemeFromStorageOrSystem()
+  }
+
   const initializeThemes = (themeConfig: WebThemeConfigType) => {
     availableThemes.value = themeConfig.themes.map((theme) => merge(themeConfig.defaults, theme))
     setThemeFromStorageOrSystem()
@@ -155,6 +168,8 @@ export const useThemeStore = defineStore('theme', () => {
     availableThemes,
     currentTheme,
     initializeThemes,
+    initializeMdThemes,
+    resetAllThemes,
     setAndApplyTheme,
     setAutoSystemTheme,
     isCurrentThemeAutoSystem,

From 360b3507a9ed61b64818d5180846f6e7a5c8bec8 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 4 Dec 2024 21:24:23 +0100
Subject: [PATCH 2/6] Add missing dependency&lockfile

---
 packages/web-app-admin-settings/package.json | 3 ++-
 pnpm-lock.yaml                               | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-admin-settings/package.json b/packages/web-app-admin-settings/package.json
index d26e8300157..4c86b8bcbe5 100644
--- a/packages/web-app-admin-settings/package.json
+++ b/packages/web-app-admin-settings/package.json
@@ -22,6 +22,7 @@
     "pinia": "2.2.8",
     "uuid": "11.0.3",
     "vue-concurrency": "5.0.1",
-    "vue-router": "4.2.5"
+    "vue-router": "4.2.5",
+    "zod": "3.23.8"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f73da4b48be..587b7910a50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -589,6 +589,9 @@ importers:
       vue-router:
         specifier: 4.2.5
         version: 4.2.5(vue@3.5.13(typescript@5.6.3))
+      zod:
+        specifier: 3.23.8
+        version: 3.23.8
     devDependencies:
       '@ownclouders/web-test-helpers':
         specifier: workspace:*
@@ -10210,7 +10213,7 @@ snapshots:
       '@cucumber/ci-environment': 9.1.0
       '@cucumber/cucumber-expressions': 16.1.1
       '@cucumber/gherkin': 26.0.3
-      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)
+      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@27.0.2))(@cucumber/messages@21.0.1)
       '@cucumber/gherkin-utils': 8.0.2
       '@cucumber/html-formatter': 20.2.1(@cucumber/messages@21.0.1)
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)
@@ -10248,7 +10251,7 @@ snapshots:
       yaml: 2.6.0
       yup: 0.32.11
 
-  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)':
+  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@27.0.2))(@cucumber/messages@21.0.1)':
     dependencies:
       '@cucumber/gherkin': 26.0.3
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)

From 5e029219d5cd56a4d23be248cb3d44cbfb8bd58a Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 4 Dec 2024 22:28:23 +0100
Subject: [PATCH 3/6] First batch of CSS var updates

---
 .../OcAvatarCount/OcAvatarCount.vue           |  2 +-
 .../components/OcAvatarItem/OcAvatarItem.vue  |  2 +-
 .../src/components/OcAvatars/OcAvatars.vue    |  2 +-
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 20 +++++--------
 .../src/components/OcButton/OcButton.vue      | 30 +++++++++----------
 .../src/components/OcCheckbox/OcCheckbox.vue  |  2 +-
 .../src/components/OcDrop/OcDrop.vue          |  6 ++--
 .../src/components/OcDropzone/OcDropzone.vue  |  4 +--
 .../src/components/OcErrorLog/OcErrorLog.vue  |  2 +-
 .../components/OcFilterChip/OcFilterChip.vue  | 18 +++++------
 .../src/components/OcGrid/OcGrid.vue          |  2 +-
 .../src/components/OcIcon/OcIcon.vue          |  8 ++---
 .../src/components/OcInfoDrop/OcInfoDrop.vue  |  2 +-
 .../src/components/OcLoader/OcLoader.vue      |  2 +-
 .../src/components/OcModal/OcModal.vue        | 14 ++++-----
 .../OcNotificationMessage.vue                 |  2 +-
 .../components/OcPagination/OcPagination.vue  |  8 ++---
 .../src/components/OcProgress/OcProgress.vue  |  6 ++--
 .../OcProgressPie/OcProgressPie.vue           |  6 ++--
 .../src/components/OcRadio/OcRadio.vue        |  4 +--
 .../components/OcRecipient/OcRecipient.vue    |  6 ++--
 .../components/OcSearchBar/OcSearchBar.vue    |  2 +-
 .../src/components/OcSelect/OcSelect.vue      | 16 +++++-----
 .../src/components/OcSpinner/OcSpinner.vue    |  2 +-
 .../src/components/OcSwitch/OcSwitch.vue      |  2 +-
 .../src/components/OcTable/OcTable.vue        |  8 ++---
 .../src/components/OcTag/OcTag.vue            |  8 ++---
 .../components/OcTextInput/OcTextInput.vue    | 10 +++----
 .../src/components/OcTextarea/OcTextarea.vue  | 14 ++++-----
 .../_OcTableCellHead/_OcTableCellHead.vue     |  2 +-
 .../_OcTextInputPassword.vue                  | 10 +++----
 .../src/styles/theme/background.scss          | 18 +++++------
 .../src/styles/theme/helper.scss              |  4 +--
 .../src/styles/theme/oc-card.scss             |  4 +--
 .../src/styles/theme/oc-form.scss             | 26 ++++++++--------
 .../src/styles/theme/oc-text.scss             |  8 ++---
 .../src/components/AppTemplate.vue            |  2 +-
 .../components/General/AppearanceSection.vue  |  2 +-
 .../src/components/AppImageGallery.vue        |  6 ++--
 .../src/components/AppTile.vue                |  4 +--
 .../src/views/AppDetails.vue                  |  2 +-
 packages/web-app-epub-reader/src/App.vue      |  2 +-
 packages/web-app-external/src/Redirect.vue    |  2 +-
 .../components/AppBar/SharesNavigation.vue    |  2 +-
 .../src/components/FilesList/QuickActions.vue |  2 +-
 .../components/Shares/SharedWithMeSection.vue |  2 +-
 .../src/components/Spaces/SpaceHeader.vue     |  2 +-
 .../src/views/trash/Overview.vue              |  2 +-
 packages/web-app-ocm/src/views/App.vue        |  2 +-
 .../src/components/MediaControls.vue          |  2 +-
 .../web-app-search/src/portals/SearchBar.vue  |  4 +--
 packages/web-app-text-editor/src/App.vue      |  2 +-
 .../web-app-webfinger/src/views/Resolve.vue   |  2 +-
 .../cern/components/CollapsibleOcTable.vue    | 12 ++++----
 .../web-pkg/src/components/AppBar/AppBar.vue  |  2 +-
 packages/web-pkg/src/components/AppTopBar.vue |  2 +-
 .../src/components/CreateShortcutModal.vue    |  6 ++--
 .../src/components/FilesList/ResourceIcon.vue |  2 +-
 .../components/FilesList/ResourceListItem.vue |  2 +-
 .../src/components/FilesList/ResourceName.vue |  4 +--
 .../components/FilesList/ResourceTable.vue    |  2 +-
 .../src/components/FilesList/ResourceTile.vue |  6 ++--
 .../components/Filters/ItemFilterInline.vue   |  2 +-
 .../components/SideBar/CompareSaveDialog.vue  |  2 +-
 .../src/components/SideBar/SideBar.vue        | 10 +++----
 .../components/SideBar/Spaces/SpaceInfo.vue   |  2 +-
 .../web-pkg/src/components/ViewOptions.vue    |  4 +--
 packages/web-pkg/src/helpers/resource/icon.ts |  8 ++---
 packages/web-runtime/src/App.vue              |  2 +-
 .../src/components/SidebarNav/SidebarNav.vue  |  2 +-
 .../components/SidebarNav/SidebarNavItem.vue  |  6 ++--
 .../web-runtime/src/components/SkipTo.vue     |  2 +-
 .../src/components/Topbar/Notifications.vue   |  4 +--
 .../src/components/Topbar/UserMenu.vue        |  6 ++--
 .../web-runtime/src/components/UploadInfo.vue | 10 +++----
 .../web-runtime/src/layouts/Application.vue   |  2 +-
 .../src/pages/resolvePrivateLink.vue          |  2 +-
 .../src/pages/resolvePublicLink.vue           |  2 +-
 78 files changed, 211 insertions(+), 217 deletions(-)

diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
index 5014eb92ba3..1747b522993 100644
--- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
+++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -47,7 +47,7 @@ export default defineComponent({
   align-items: center;
   background-color: var(--oc-color-swatch-passive-default);
   border-radius: 50%;
-  color: var(--oc-color-text-inverse);
+  color: var(--oc-color-inverseOnSurface);
   display: flex;
   justify-content: center;
 }
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index fa9282c9de0..a619b7e84ca 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -52,7 +52,7 @@ export default defineComponent({
     iconColor: {
       type: String,
       required: false,
-      default: 'var(--oc-color-text-inverse)'
+      default: 'var(--oc-color-inverseOnSurface)'
     },
     /**
      * Fill-type that should be used for the icon
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index a7a899ddc9e..3dd54b9d1cd 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -181,7 +181,7 @@ export default defineComponent({
     .oc-avatar-count,
     .oc-avatar + .oc-avatar-item,
     .oc-avatar-item + .oc-avatar-item {
-      border: 1px solid var(--oc-color-text-inverse);
+      border: 1px solid var(--oc-color-inverseOnSurface);
       margin-left: -25px;
     }
   }
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index d469701d817..51241144e74 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -61,7 +61,7 @@
         />
         <oc-icon
           v-if="index !== displayItems.length - 1"
-          color="var(--oc-color-text-default)"
+          color="var(--oc-color-onSurface)"
           name="arrow-right-s"
           class="oc-mx-xs"
           fill-type="line"
@@ -73,7 +73,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
           >
-            <oc-icon name="more-2" color="var(--oc-color-text-default)" />
+            <oc-icon name="more-2" color="var(--oc-color-onSurface)" />
           </oc-button>
           <oc-drop
             drop-id="oc-breadcrumb-contextmenu"
@@ -342,13 +342,9 @@ export default defineComponent({
 .oc-breadcrumb {
   overflow: visible;
   &-item-dragover {
-    transition:
-      background 0.06s,
-      border 0s 0.08s,
-      border-color 0s,
-      border-width 0.06s;
-    background-color: var(--oc-color-background-highlight);
-    box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
+    transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
+    background-color: var(--oc-color-surfaceBright);
+    box-shadow: 0 0 0 5px var(--oc-color-surfaceBright);
     border-radius: 5px;
   }
   &-item-text {
@@ -396,12 +392,12 @@ export default defineComponent({
     }
 
     > :nth-child(n + 2)::before {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
       display: inline-block;
     }
 
     > :last-child > span {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 
@@ -411,7 +407,7 @@ export default defineComponent({
     button:first-of-type,
     span:first-of-type {
       font-size: var(--oc-font-size-medium);
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
       display: inline-block;
       vertical-align: sub;
       line-height: normal;
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 7acbc4f5a63..6a4e1bf1c3c 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -413,16 +413,16 @@ export default defineComponent({
 
   &-brand {
     @include oc-button-variation(
-      var(--oc-color-swatch-brand-default),
-      var(--oc-color-swatch-brand-hover),
-      var(--oc-color-swatch-brand-muted),
-      var(--oc-color-swatch-brand-contrast)
+      var(--oc-color-primary),
+      var(--oc-color-primaryContainer),
+      var(--oc-color-primaryFixedDim),
+      var(--oc-color-background)
     );
   }
 
   &-primary {
     @include oc-button-variation(
-      var(--oc-color-swatch-primary-default),
+      var(--oc-color-primary),
       var(--oc-color-swatch-primary-hover),
       var(--oc-color-swatch-primary-muted),
       var(--oc-color-swatch-primary-contrast)
@@ -449,25 +449,25 @@ export default defineComponent({
 
   &-warning {
     @include oc-button-variation(
-      var(--oc-color-swatch-warning-default),
-      var(--oc-color-swatch-warning-hover),
-      var(--oc-color-swatch-warning-muted),
-      var(--oc-color-swatch-warning-contrast)
+      var(--oc-color-error),
+      var(--oc-color-errorContainer),
+      var(--oc-color-onErrorContainer),
+      var(--oc-color-onError)
     );
   }
 
   &-danger {
     @include oc-button-variation(
-      var(--oc-color-swatch-danger-default),
+      var(--oc-color-error),
       var(--oc-color-swatch-danger-hover),
       var(--oc-color-swatch-danger-muted),
-      var(--oc-color-swatch-danger-contrast)
+      var(--oc-color-onError)
     );
 
     &-filled:hover {
-      color: var(--oc-color-swatch-danger-default) !important;
+      color: var(--oc-color-error) !important;
       span > svg {
-        fill: var(--oc-color-swatch-danger-default) !important;
+        fill: var(--oc-color-error) !important;
       }
     }
   }
@@ -502,12 +502,12 @@ export default defineComponent({
 
         &:first-of-type {
           // TODO: Implement color variations if button group should be used again
-          border-left: 1px solid var(--oc-color-swatch-primary-default);
+          border-left: 1px solid var(--oc-color-primary);
         }
 
         &:last-of-type {
           // TODO: Implement color variations if button group should be used again
-          border-right: 1px solid var(--oc-color-swatch-primary-default);
+          border-right: 1px solid var(--oc-color-primary);
         }
       }
     }
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 8540a7bc4f4..4910e9a348b 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -178,7 +178,7 @@ export default defineComponent({
   }
 
   &:focus-visible {
-    outline: var(--oc-color-swatch-primary-default) auto 1px;
+    outline: var(--oc-color-primary) auto 1px;
   }
 
   &-checked,
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index a45fbbada92..4bd4ded1bd1 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -183,8 +183,8 @@ export default defineComponent({
     const to = this.target
       ? document.querySelector(this.target)
       : this.toggle
-        ? document.querySelector(this.toggle)
-        : this.$el.previousElementSibling
+      ? document.querySelector(this.toggle)
+      : this.$el.previousElementSibling
     const content = this.$refs.drop
 
     if (!to || !content) {
@@ -285,7 +285,7 @@ export default defineComponent({
       }
 
       &:hover span {
-        color: var(--oc-color-swatch-brand-hover) !important;
+        color: var(--oc-color-primaryContainer) !important;
       }
 
       span {
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index 6af66f169a4..46d98c0a953 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -18,9 +18,9 @@ export default defineComponent({
 <style lang="scss">
 .oc-dropzone {
   align-items: center;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border: 1px dashed var(--oc-color-swatch-primary-muted);
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   display: flex;
   font-size: 1.5rem;
   justify-content: center;
diff --git a/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue b/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
index 4d64d2281ee..3f639c84b0d 100644
--- a/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
+++ b/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
@@ -76,7 +76,7 @@ export default defineComponent({
     resize: none;
 
     label {
-      color: var(--oc-color-text-muted);
+      color: var(--oc-color-onSurfaceVariant);
     }
   }
 
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index c8801a9150e..71ce288e4dd 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -14,7 +14,7 @@
         :class="filterActive ? 'oc-filter-check-icon-active' : 'oc-filter-check-icon-inactive'"
         name="check"
         size="small"
-        color="var(--oc-color-text-inverse)"
+        color="var(--oc-color-inverseOnSurface)"
       />
       <span
         class="oc-text-truncate oc-filter-chip-label"
@@ -44,7 +44,7 @@
       :aria-label="$gettext('Clear filter')"
       @click="$emit('clearFilter')"
     >
-      <oc-icon name="close" size="small" color="var(--oc-color-text-inverse)" />
+      <oc-icon name="close" size="small" color="var(--oc-color-inverseOnSurface)" />
     </oc-button>
   </div>
 </template>
@@ -134,9 +134,9 @@ export default defineComponent({
 .oc-filter-chip {
   &-button.oc-pill {
     align-items: center;
-    background-color: var(--oc-color-background-default) !important;
-    color: var(--oc-color-text-muted) !important;
-    border: 1px solid var(--oc-color-text-muted);
+    background-color: var(--oc-color-background) !important;
+    color: var(--oc-color-onSurfaceVariant) !important;
+    border: 1px solid var(--oc-color-onSurfaceVariant);
     box-sizing: border-box;
     display: inline-flex;
     gap: var(--oc-space-xsmall);
@@ -149,8 +149,8 @@ export default defineComponent({
   }
   &-button-selected.oc-pill,
   &-button-selected.oc-pill:hover {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-    color: var(--oc-color-text-inverse) !important;
+    background-color: var(--oc-color-primary) !important;
+    color: var(--oc-color-inverseOnSurface) !important;
     border-top-left-radius: 99px !important;
     border-bottom-left-radius: 99px !important;
     border-top-right-radius: 0px !important;
@@ -159,8 +159,8 @@ export default defineComponent({
   }
   &-clear,
   &-clear:hover {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-    color: var(--oc-color-text-inverse) !important;
+    background-color: var(--oc-color-primary) !important;
+    color: var(--oc-color-inverseOnSurface) !important;
     border-top-left-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-top-right-radius: 99px !important;
diff --git a/packages/design-system/src/components/OcGrid/OcGrid.vue b/packages/design-system/src/components/OcGrid/OcGrid.vue
index 157c9ad9f2f..ccbc5144b4d 100644
--- a/packages/design-system/src/components/OcGrid/OcGrid.vue
+++ b/packages/design-system/src/components/OcGrid/OcGrid.vue
@@ -546,7 +546,7 @@ $grid-divider-border: #e5e5e5 !default;
   <oc-grid>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-passive-default)" class="oc-height-small"></div>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-success-default)" class="oc-height-small"></div>
-    <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-warning-default)" class="oc-height-small"></div>
+    <div style="width: 80px; height: 80px; background-color: var(--oc-color-error)" class="oc-height-small"></div>
   </oc-grid>
 
   <h3 class="oc-heading-divider">
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 267f9a4a86f..3236821603b 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -267,7 +267,7 @@ export default defineComponent({
   }
 
   &-primary > svg {
-    fill: var(--oc-color-swatch-primary-default);
+    fill: var(--oc-color-primary);
   }
 
   &-passive > svg {
@@ -275,7 +275,7 @@ export default defineComponent({
   }
 
   &-warning > svg {
-    fill: var(--oc-color-swatch-warning-default);
+    fill: var(--oc-color-error);
   }
 
   &-success > svg {
@@ -283,11 +283,11 @@ export default defineComponent({
   }
 
   &-danger > svg {
-    fill: var(--oc-color-swatch-danger-default);
+    fill: var(--oc-color-error);
   }
 
   &-brand > svg {
-    fill: var(--oc-color-swatch-brand-default);
+    fill: var(--oc-color-primary);
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index 76950de3be6..05e750cc570 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -162,7 +162,7 @@ export default defineComponent({
   }
   .info-drop-content {
     font-size: var(--oc-font-size-medium);
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
   .info-more-link {
     font-size: var(--oc-font-size-medium) !important;
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index ca6f42709bf..e5a34c65605 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -53,7 +53,7 @@ export default defineComponent({
   }
 
   &::after {
-    background: var(--oc-color-text-muted);
+    background: var(--oc-color-onSurfaceVariant);
     content: '';
     height: 100%;
     width: 0;
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 62267800872..88f3b79fdb0 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -432,7 +432,7 @@ export default defineComponent({
 }
 
 .oc-modal {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border: 1px solid var(--oc-color-input-border);
   border-radius: 15px;
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
@@ -460,7 +460,7 @@ export default defineComponent({
   }
 
   &-primary {
-    @include oc-modal-variation(var(--oc-color-swatch-primary-default));
+    @include oc-modal-variation(var(--oc-color-primary));
   }
 
   &-success {
@@ -468,11 +468,11 @@ export default defineComponent({
   }
 
   &-warning {
-    @include oc-modal-variation(var(--oc-color-swatch-warning-default));
+    @include oc-modal-variation(var(--oc-color-error));
   }
 
   &-danger {
-    @include oc-modal-variation(var(--oc-color-swatch-danger-default));
+    @include oc-modal-variation(var(--oc-color-error));
   }
 
   &-title {
@@ -497,7 +497,7 @@ export default defineComponent({
   }
 
   &-body {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     line-height: 1.625;
     padding: var(--oc-space-medium) var(--oc-space-medium) 0;
 
@@ -526,7 +526,7 @@ export default defineComponent({
 
     &-actions {
       text-align: right;
-      background: var(--oc-color-background-default);
+      background: var(--oc-color-background);
       border-bottom-right-radius: 15px;
       border-bottom-left-radius: 15px;
       padding: var(--oc-space-medium);
@@ -545,7 +545,7 @@ export default defineComponent({
 
   .oc-text-input-password-wrapper {
     button {
-      background-color: var(--oc-color-background-highlight) !important;
+      background-color: var(--oc-color-surfaceBright) !important;
     }
   }
 }
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index 62732db9fa0..7c3cb6d2785 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -152,7 +152,7 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-notification-message {
-  background-color: var(--oc-color-background-default) !important;
+  background-color: var(--oc-color-background) !important;
   margin-top: var(--oc-space-small);
   position: relative;
   word-break: break-word;
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index 6dafc80b2dc..f978e804452 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -212,20 +212,20 @@ export default defineComponent({
     &-item {
       &-page {
         border-radius: 4px;
-        color: var(--oc-color-text-default);
+        color: var(--oc-color-onSurface);
         padding: var(--oc-space-xsmall) var(--oc-space-small);
         transition: background-color $transition-duration-short ease-in-out;
 
         &:not(span):hover {
           background-color: var(--oc-color-swatch-passive-default);
-          color: var(--oc-color-text-inverse);
+          color: var(--oc-color-inverseOnSurface);
           text-decoration: none;
         }
       }
 
       &-current {
         background-color: var(--oc-color-swatch-passive-default);
-        color: var(--oc-color-text-inverse);
+        color: var(--oc-color-inverseOnSurface);
         font-weight: bold;
       }
 
@@ -234,7 +234,7 @@ export default defineComponent({
         display: flex;
 
         > .oc-icon > svg {
-          fill: var(--oc-color-text-default);
+          fill: var(--oc-color-onSurface);
         }
       }
 
diff --git a/packages/design-system/src/components/OcProgress/OcProgress.vue b/packages/design-system/src/components/OcProgress/OcProgress.vue
index a0849501dd2..82869ec8154 100644
--- a/packages/design-system/src/components/OcProgress/OcProgress.vue
+++ b/packages/design-system/src/components/OcProgress/OcProgress.vue
@@ -153,7 +153,7 @@ $progress-height-small: 5px !default;
 
   &-primary &-current,
   &-primary &-indeterminate div {
-    background-color: var(--oc-color-swatch-primary-default);
+    background-color: var(--oc-color-primary);
   }
   &-success &-current,
   &-success &-indeterminate div {
@@ -161,11 +161,11 @@ $progress-height-small: 5px !default;
   }
   &-warning &-current,
   &-warning &-indeterminate div {
-    background-color: var(--oc-color-swatch-warning-default);
+    background-color: var(--oc-color-error);
   }
   &-danger &-current,
   &-danger &-indeterminate div {
-    background-color: var(--oc-color-swatch-danger-default);
+    background-color: var(--oc-color-error);
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
index 2d4e2ad4ab1..c3f68867635 100644
--- a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
+++ b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -92,8 +92,8 @@ $default-size: 64px;
 
     &::before,
     &::after {
-      border: calc($default-size / 10) solid var(--oc-color-swatch-brand-default);
-      border-color: var(--oc-color-swatch-brand-default);
+      border: calc($default-size / 10) solid var(--oc-color-primary);
+      border-color: var(--oc-color-primary);
       border-radius: 50%;
       clip: rect(0, calc($default-size / 2), $default-size, 0);
       content: '';
@@ -107,7 +107,7 @@ $default-size: 64px;
   }
 
   &-label {
-    color: var(--oc-color-text-muted) !important;
+    color: var(--oc-color-onSurfaceVariant) !important;
     left: 50%;
     position: absolute;
     top: 50%;
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
index cf8f840f1fc..6e3e35baeb4 100644
--- a/packages/design-system/src/components/OcRadio/OcRadio.vue
+++ b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -128,7 +128,7 @@ export default defineComponent({
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  border: 1px solid var(--oc-color-swatch-brand-default);
+  border: 1px solid var(--oc-color-primary);
   border-radius: 50%;
   box-sizing: border-box;
   background-color: var(--oc-color-input-bg);
@@ -149,7 +149,7 @@ export default defineComponent({
   }
 
   &:checked {
-    background-color: var(--oc-color-background-highlight) !important;
+    background-color: var(--oc-color-surfaceBright) !important;
   }
 
   &.oc-radio-s {
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index 570021cc843..e4222ba7f73 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -103,7 +103,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-recipient {
   align-items: center;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border: 1px solid var(--oc-color-input-border);
   border-radius: 6px;
   display: flex;
@@ -113,11 +113,11 @@ export default defineComponent({
   width: auto;
 
   &-icon > svg {
-    fill: var(--oc-color-text-default);
+    fill: var(--oc-color-onSurface);
   }
 
   &-name {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     margin: 0;
     padding: 0;
   }
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 0e00abac091..26ff5f75ba8 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -317,7 +317,7 @@ export default defineComponent({
   &-icon {
     align-items: center;
     bottom: 0;
-    color: var(--oc-color-text-muted);
+    color: var(--oc-color-onSurfaceVariant);
     display: inline-flex;
     justify-content: center;
     left: 0;
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 5ee2ceebed8..e639a31dc99 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -542,7 +542,7 @@ export default defineComponent({
     &__dropdown-toggle,
     &__dropdown-menu {
       -webkit-appearance: none;
-      background-color: var(--oc-color-background-highlight);
+      background-color: var(--oc-color-surfaceBright);
       border-radius: 0;
       border-radius: 5px;
       border: 1px solid var(--oc-color-input-border);
@@ -570,7 +570,7 @@ export default defineComponent({
 
     &__dropdown-menu {
       padding: 0;
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       margin-top: -1px;
     }
 
@@ -595,7 +595,7 @@ export default defineComponent({
       &--highlight,
       &--selected {
         background-color: var(--oc-color-background-hover);
-        color: var(--oc-color-swatch-brand-hover);
+        color: var(--oc-color-primaryContainer);
       }
     }
 
@@ -625,8 +625,8 @@ export default defineComponent({
 
       > *:not(input) {
         padding-left: 3px;
-        background-color: var(--oc-color-background-default);
-        fill: var(--oc-color-text-default);
+        background-color: var(--oc-color-background);
+        fill: var(--oc-color-onSurface);
       }
     }
   }
@@ -635,7 +635,7 @@ export default defineComponent({
     .vs {
       &__selected-options > *:not(input) {
         color: var(--oc-color-input-text-default);
-        background-color: var(--oc-color-background-default);
+        background-color: var(--oc-color-background);
       }
     }
   }
@@ -670,14 +670,14 @@ export default defineComponent({
     &.vs--multiple {
       .vs__selected-options > *:not(input) {
         color: var(--oc-color-input-text-default);
-        background-color: var(--oc-color-background-highlight);
+        background-color: var(--oc-color-surfaceBright);
       }
     }
 
     &:focus-within {
       .vs__dropdown-menu,
       .vs__dropdown-toggle {
-        background-color: var(--oc-color-background-default);
+        background-color: var(--oc-color-background);
       }
     }
   }
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index 7945f27eec3..12ce5d4dade 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
@@ -63,7 +63,7 @@ export default defineComponent({
 .oc-spinner {
   @include oc-spinner-size(1);
 
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   display: inline-block;
 
   &::after {
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index 22a709e4594..599293522fb 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -108,7 +108,7 @@ export default defineComponent({
     }
 
     &[aria-checked='true'] {
-      background-color: var(--oc-color-swatch-primary-default);
+      background-color: var(--oc-color-primary);
 
       &::before {
         transform: translateX(calc(100% + 2px));
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index dcfaad245b8..0e39109991a 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -511,7 +511,7 @@ export default defineComponent({
 .oc-table {
   border-collapse: collapse;
   border-spacing: 0;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   width: 100%;
 
   &-hover tr {
@@ -532,7 +532,7 @@ export default defineComponent({
   }
 
   &-highlighted {
-    background-color: var(--oc-color-background-highlight) !important;
+    background-color: var(--oc-color-surfaceBright) !important;
   }
 
   &-accentuated {
@@ -550,7 +550,7 @@ export default defineComponent({
     position: relative;
 
     .oc-table-header-cell {
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       position: sticky;
       z-index: 1;
     }
@@ -573,7 +573,7 @@ export default defineComponent({
     border-top: 1px solid var(--oc-color-border);
 
     &-cell {
-      color: var(--oc-color-text-muted);
+      color: var(--oc-color-onSurfaceVariant);
       font-size: 0.875rem;
       line-height: 1.4;
       padding: var(--oc-space-xsmall);
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index 1c809fbb177..d88eb85c8e1 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -90,11 +90,11 @@ export default defineComponent({
 <style lang="scss">
 .oc-tag {
   align-items: center;
-  background-color: var(--oc-color-background-default);
-  border: 1px solid var(--oc-color-text-muted);
+  background-color: var(--oc-color-background);
+  border: 1px solid var(--oc-color-onSurfaceVariant);
   border-radius: 7px;
   box-sizing: border-box;
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
   display: inline-flex;
   gap: var(--oc-space-xsmall);
   text-decoration: none;
@@ -123,7 +123,7 @@ export default defineComponent({
   }
 
   .oc-icon > svg {
-    fill: var(--oc-color-text-muted);
+    fill: var(--oc-color-onSurfaceVariant);
   }
 
   &-link,
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 82772913d2f..24b5b8e71ff 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -381,7 +381,7 @@ export default defineComponent({
 
 .oc-text-input {
   &-description {
-    color: var(--oc-color-text-muted);
+    color: var(--oc-color-onSurfaceVariant);
   }
 
   &-success,
@@ -392,14 +392,14 @@ export default defineComponent({
 
   &-warning,
   &-warning:focus {
-    border-color: var(--oc-color-swatch-warning-default) !important;
-    color: var(--oc-color-swatch-warning-default) !important;
+    border-color: var(--oc-color-error) !important;
+    color: var(--oc-color-error) !important;
   }
 
   &-danger,
   &-danger:focus {
-    border-color: var(--oc-color-swatch-danger-default) !important;
-    color: var(--oc-color-swatch-danger-default) !important;
+    border-color: var(--oc-color-error) !important;
+    color: var(--oc-color-error) !important;
   }
 
   &-message {
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index b797cc8849c..2c3c5151b63 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -198,7 +198,7 @@ export default defineComponent({
   background: var(--oc-color-background-muted);
   border: 0 none;
   margin: 0;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   max-width: 100%;
   width: 100%;
   overflow: auto;
@@ -210,23 +210,23 @@ export default defineComponent({
   &:focus {
     border-color: var(--oc-color-input-text-default);
     background-color: var(--oc-color-background-muted);
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 
   &-warning,
   &-warning:focus {
-    border-color: var(--oc-color-swatch-warning-default);
-    color: var(--oc-color-swatch-warning-default);
+    border-color: var(--oc-color-error);
+    color: var(--oc-color-error);
   }
 
   &-danger,
   &-danger:focus {
-    border-color: var(--oc-color-swatch-danger-default);
-    color: var(--oc-color-swatch-danger-default);
+    border-color: var(--oc-color-error);
+    color: var(--oc-color-error);
   }
 
   &-description {
-    color: var(--oc-color-text-muted);
+    color: var(--oc-color-onSurfaceVariant);
   }
 
   &-message {
diff --git a/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue b/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
index bb1e2dd08d4..0fb3b55bccf 100644
--- a/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
+++ b/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
@@ -47,7 +47,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .oc-th {
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
   font-weight: inherit;
 
   &[aria-sort] {
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 97d238572ac..580b85df46f 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -201,7 +201,7 @@ export default defineComponent({
     padding: 0;
     border-radius: 5px;
     border: 1px solid var(--oc-color-input-border);
-    background-color: var(--oc-color-background-highlight);
+    background-color: var(--oc-color-surfaceBright);
 
     input {
       flex-grow: 2;
@@ -214,14 +214,14 @@ export default defineComponent({
 
     &-warning,
     &-warning:focus {
-      border-color: var(--oc-color-swatch-warning-default) !important;
-      color: var(--oc-color-swatch-warning-default) !important;
+      border-color: var(--oc-color-error) !important;
+      color: var(--oc-color-error) !important;
     }
 
     &-danger,
     &-danger:focus {
-      border-color: var(--oc-color-swatch-danger-default) !important;
-      color: var(--oc-color-swatch-danger-default) !important;
+      border-color: var(--oc-color-error) !important;
+      color: var(--oc-color-error) !important;
     }
 
     &:focus-within {
diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
index 3015138bdcc..83a6c77ff82 100644
--- a/packages/design-system/src/styles/theme/background.scss
+++ b/packages/design-system/src/styles/theme/background.scss
@@ -2,8 +2,8 @@
   background:
     linear-gradient(
       90deg,
-      var(--oc-color-swatch-primary-muted) 0%,
-      var(--oc-color-swatch-primary-gradient) 100%
+      var(--oc-color-primary) 0%,
+      var(--oc-color-onPrimaryFixed) 100%
     );
 
   &:focus:not([disabled]),
@@ -11,22 +11,22 @@
   {
     background: linear-gradient(
       90deg,
-      var(--oc-color-swatch-primary-muted-hover) 0%,
-      var(--oc-color-swatch-primary-gradient-hover) 100%
+      var(--oc-color-onPrimaryContainer) 0%,
+      var(--oc-color-onPrimaryFixedVariant) 100%
     );
   }
 }
 
 .oc-background-selected {
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
 }
 
 .oc-background-brand {
-  background-color: var(--oc-color-swatch-brand-default) !important;
+  background-color: var(--oc-color-primary) !important;
 }
 
 .oc-background-default {
-  background-color: var(--oc-color-background-default) !important;
+  background-color: var(--oc-color-background) !important;
 }
 
 /* stylelint-disable */
@@ -37,7 +37,7 @@
 /* stylelint-enable */
 
 .oc-background-secondary {
-  background-color: var(--oc-color-background-secondary) !important;
+  background-color: var(--oc-color-background) !important;
 }
 
 .oc-background-muted {
@@ -45,7 +45,7 @@
 }
 
 .oc-background-highlight {
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
 }
 
 .oc-background-contain {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index dec68546488..edd0ba672d3 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -66,8 +66,8 @@
 }
 
 .oc-light {
-  color: var(--oc-color-text-inverse) !important;
-  fill: var(--oc-color-text-inverse) !important;
+  color: var(--oc-color-inverseOnSurface) !important;
+  fill: var(--oc-color-inverseOnSurface) !important;
 }
 
 .oc-disabled {
diff --git a/packages/design-system/src/styles/theme/oc-card.scss b/packages/design-system/src/styles/theme/oc-card.scss
index 437be7a675a..d400ed9d1f5 100644
--- a/packages/design-system/src/styles/theme/oc-card.scss
+++ b/packages/design-system/src/styles/theme/oc-card.scss
@@ -6,9 +6,9 @@
 .oc-card {
   @extend .oc-rounded;
 
-  background-color: var(--oc-color-background-highlight);
+  background-color: var(--oc-color-surfaceBright);
   box-sizing: border-box;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   position: relative;
   transition: box-shadow 0.1s ease-in-out;
 }
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index 40d32fb70e6..7bb6337d5ad 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -42,15 +42,15 @@ $form-padding-horizontal: var(--oc-space-small) !default;
 $form-padding-vertical: var(--oc-space-xsmall) !default;
 
 $form-background: var(--oc-color-background-muted) !default;
-$form-color: var(--oc-color-text-default) !default;
+$form-color: var(--oc-color-onSurface) !default;
 
-$form-focus-background: var(--oc-color-background-highlight) !default;
-$form-focus-color: var(--oc-color-text-default) !default;
+$form-focus-background: var(--oc-color-surfaceBright) !default;
+$form-focus-color: var(--oc-color-onSurface) !default;
 
 $form-disabled-background: var(--oc-color-background-muted) !default;
-$form-disabled-color: var(--oc-color-text-muted) !default;
+$form-disabled-color: var(--oc-color-onSurfaceVariant) !default;
 
-$form-placeholder-color: var(--oc-color-text-muted) !default;
+$form-placeholder-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-small-height: var(--oc-font-size-small) !default;
 $form-small-padding-horizontal: var(--oc-space-small) !default;
@@ -62,7 +62,7 @@ $form-large-padding-horizontal: var(--oc-space-medium) !default;
 $form-large-line-height: $form-large-height !default;
 $form-large-font-size: var(--oc-font-size-large) !default;
 
-$form-danger-color: var(--oc-color-swatch-danger-default) !default;
+$form-danger-color: var(--oc-color-error) !default;
 $form-success-color: var(--oc-color-swatch-success-default) !default;
 
 $form-width-xsmall: 50px !default;
@@ -71,12 +71,12 @@ $form-width-medium: 200px !default;
 $form-width-large: 500px !default;
 
 $form-select-padding-right: 20px !default;
-$form-select-icon-color: var(--oc-color-text-default) !default;
+$form-select-icon-color: var(--oc-color-onSurface) !default;
 $form-select-option-color: #444 !default;
-$form-select-disabled-icon-color: var(--oc-color-text-muted) !default;
+$form-select-disabled-icon-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-datalist-padding-right: 20px !default;
-$form-datalist-icon-color: var(--oc-color-text-default) !default;
+$form-datalist-icon-color: var(--oc-color-onSurface) !default;
 
 $form-radio-background: var(--oc-color-background-muted) !default;
 
@@ -86,7 +86,7 @@ $form-radio-checked-icon-color: var(--oc-color-input-text-default) !default;
 $form-radio-checked-focus-background: $oc-color-swatch-primary-default !default;
 
 $form-radio-disabled-background: $oc-color-background-muted !default;
-$form-radio-disabled-icon-color: var(--oc-color-text-muted) !default;
+$form-radio-disabled-icon-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-legend-font-size: var(--oc-font-size-large) !default;
 $form-legend-line-height: 1.4 !default;
@@ -99,8 +99,8 @@ $form-horizontal-controls-margin-left: 215px !default;
 $form-horizontal-controls-text-padding-top: 7px !default;
 
 $form-icon-width: var(--oc-size-icon-default) !default;
-$form-icon-color: var(--oc-color-text-muted) !default;
-$form-icon-hover-color: var(--oc-color-text-default) !default;
+$form-icon-color: var(--oc-color-onSurfaceVariant) !default;
+$form-icon-hover-color: var(--oc-color-onSurface) !default;
 
 $internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
@@ -302,7 +302,7 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
   .oc-input:focus,
   .oc-select:focus,
   .oc-textarea:focus {
-    background-color: var(--oc-color-background-default);
+    background-color: var(--oc-color-background);
   }
 }
 
diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
index ba9f881e846..a2a7df71130 100644
--- a/packages/design-system/src/styles/theme/oc-text.scss
+++ b/packages/design-system/src/styles/theme/oc-text.scss
@@ -6,7 +6,7 @@ h4,
 h5,
 h6,
 p {
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
 }
 
 html * {
@@ -19,7 +19,7 @@ html, button {
 }
 
 a {
-  color: var(--oc-color-swatch-primary-default);
+  color: var(--oc-color-primary);
   text-decoration: none;
 
   &:hover {
@@ -182,7 +182,7 @@ td.oc-text-break {
  * Give text a muted color and small size.
  */
 .oc-text-meta {
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
   font-size: var(--oc-font-size-small);
 }
 
@@ -190,7 +190,7 @@ td.oc-text-break {
  * Give text a muted color.
  */
 .oc-text-muted {
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
 }
 
 /*
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index c2469d8c731..246ebd17790 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 }
 
 #admin-settings-app-bar {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
diff --git a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
index d7549862415..20920007bbb 100644
--- a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
+++ b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
@@ -236,7 +236,7 @@ export default defineComponent({
     width: 100%;
     max-height: 100%;
     object-fit: cover;
-    background: var(--oc-color-swatch-brand-default);
+    background: var(--oc-color-primary);
   }
 }
 </style>
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index cea696fcbfa..0bd572727c6 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -117,7 +117,7 @@ export default defineComponent({
     &-primary {
       span {
         color: var(--oc-color-swatch-primary-contrast);
-        background-color: var(--oc-color-swatch-primary-default);
+        background-color: var(--oc-color-primary);
       }
     }
     &-success {
@@ -128,8 +128,8 @@ export default defineComponent({
     }
     &-danger {
       span {
-        color: var(--oc-color-swatch-danger-contrast);
-        background-color: var(--oc-color-swatch-danger-default);
+        color: var(--oc-color-onError);
+        background-color: var(--oc-color-error);
       }
     }
 
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 7a218007006..14be5eef5b4 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 <style lang="scss">
 .app-tile {
   overflow: hidden;
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
   box-shadow: none;
   height: 100%;
   display: flex;
@@ -77,7 +77,7 @@ export default defineComponent({
   .app-tile-title {
     .mark-highlight {
       font-weight: unset !important;
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 }
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 4bb24f2f535..9bfcd025bca 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 
 <style lang="scss">
 .app-details {
-  background-color: var(--oc-color-background-highlight);
+  background-color: var(--oc-color-surfaceBright);
   box-shadow: none;
   max-width: 600px;
   margin: 0 auto;
diff --git a/packages/web-app-epub-reader/src/App.vue b/packages/web-app-epub-reader/src/App.vue
index b6af209555e..a41c094f43b 100644
--- a/packages/web-app-epub-reader/src/App.vue
+++ b/packages/web-app-epub-reader/src/App.vue
@@ -291,7 +291,7 @@ export default defineComponent({
 
     &-item.active {
       .oc-button {
-        color: var(--oc-color-swatch-primary-default);
+        color: var(--oc-color-primary);
       }
     }
   }
diff --git a/packages/web-app-external/src/Redirect.vue b/packages/web-app-external/src/Redirect.vue
index caa9400da67..e75ce8ad392 100644
--- a/packages/web-app-external/src/Redirect.vue
+++ b/packages/web-app-external/src/Redirect.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 <style lang="scss">
 .external-redirect {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
 
     &-body {
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index d99a4aa7f5e..e0fada4f810 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -135,7 +135,7 @@ export default defineComponent({
   }
 
   .shares-nav-desktop.router-link-active {
-    border-bottom: 2px solid var(--oc-color-swatch-primary-default) !important;
+    border-bottom: 2px solid var(--oc-color-primary) !important;
     border-radius: 0;
   }
 }
diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index 32999323a06..944a85f6236 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -56,7 +56,7 @@ export default defineComponent({
 <style lang="scss">
 .quick-action-button {
   &:hover {
-    background-color: var(--oc-color-background-secondary) !important;
+    background-color: var(--oc-color-background) !important;
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index dc7b5873a86..fb958066a62 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -262,6 +262,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-files-actions-hide-share-trigger:hover {
-  background-color: var(--oc-color-background-secondary) !important;
+  background-color: var(--oc-color-background) !important;
 }
 </style>
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 769de299c91..d3a16222392 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -306,7 +306,7 @@ export default defineComponent({
     max-height: 158px;
 
     &-default {
-      background-color: var(--oc-color-background-highlight);
+      background-color: var(--oc-color-surfaceBright);
       height: 100%;
       border-radius: 10px;
     }
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index c14a79a941d..47e06a146eb 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -280,7 +280,7 @@ export default defineComponent({
 
 .trash-bin {
   &-route {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 }
 </style>
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index d18101e4373..cc3fdfdd696 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -143,7 +143,7 @@ export default defineComponent({
 #sciencemesh-accept-invites,
 #sciencemesh-connections {
   margin: var(--oc-space-small);
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-radius: 15px;
   padding: var(--oc-space-small);
   @media (max-width: $oc-breakpoint-large-default) {
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 5de7dfbae44..178d026a890 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -230,7 +230,7 @@ export default defineComponent({
 }
 
 .preview-controls-action-count {
-  color: var(--oc-color-swatch-brand-contrast);
+  color: var(--oc-color-background);
 }
 
 .preview-controls-image-original-size {
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index e72f3cd7169..0d55e879377 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -551,7 +551,7 @@ export default defineComponent({
 
     @media (max-width: 639px) {
       visibility: hidden;
-      background-color: var(--oc-color-swatch-brand-default);
+      background-color: var(--oc-color-primary);
       position: absolute;
       height: 48px;
       left: 0;
@@ -615,7 +615,7 @@ export default defineComponent({
 
           &:hover,
           &.active {
-            background-color: var(--oc-color-background-highlight);
+            background-color: var(--oc-color-surfaceBright);
           }
 
           &.disabled {
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
index 8a69501e4ee..f183ebedf2e 100644
--- a/packages/web-app-text-editor/src/App.vue
+++ b/packages/web-app-text-editor/src/App.vue
@@ -60,6 +60,6 @@ export default defineComponent({
 
 .toastui-editor-defaultUI-toolbar,
 .toastui-editor-md-tab-container {
-  background-color: var(--oc-color-background-default) !important;
+  background-color: var(--oc-color-background) !important;
 }
 </style>
diff --git a/packages/web-app-webfinger/src/views/Resolve.vue b/packages/web-app-webfinger/src/views/Resolve.vue
index 18c1ef6cf28..0a6e5bc9753 100644
--- a/packages/web-app-webfinger/src/views/Resolve.vue
+++ b/packages/web-app-webfinger/src/views/Resolve.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 <style lang="scss">
 .webfinger-resolve {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
 
     &-body {
diff --git a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
index ac1d2cd7180..d10f5e8317a 100644
--- a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
+++ b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
@@ -687,26 +687,26 @@ export default defineComponent({
 .oc-table {
   border-collapse: collapse;
   border-spacing: 0;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   width: 100%;
   &-hover tr {
     transition: background-color $transition-duration-short ease-in-out;
   }
   &-hover tr:hover td:not(:last-child) span:not(.avatarInitials):not(button span) {
-    color: var(--oc-color-swatch-brand-hover) !important;
+    color: var(--oc-color-primaryContainer) !important;
   }
   tr {
     outline: none;
     height: var(--oc-size-height-table-row);
   }
   tr + tr {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outline);
   }
   &-hover tr:not(&-footer-row):hover {
     background-color: var(--oc-color-background-hover);
   }
   &-highlighted {
-    background-color: var(--oc-color-background-highlight) !important;
+    background-color: var(--oc-color-surfaceBright) !important;
   }
   &-accentuated {
     background-color: var(--oc-color-background-accentuate);
@@ -719,7 +719,7 @@ export default defineComponent({
   &-sticky {
     position: relative;
     .oc-table-header-cell {
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       position: sticky;
       z-index: 1;
     }
@@ -736,7 +736,7 @@ export default defineComponent({
     }
   }
   &-footer {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outline);
     &-cell {
       color: var(--oc-color-text-muted);
       font-size: 0.875rem;
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index e345deed870..a2c192ba395 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -347,7 +347,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #files-app-bar {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index f3bf783ff5e..9b89f52db7a 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -207,7 +207,7 @@ export default defineComponent({
 
   .oc-resource-indicators {
     .text {
-      color: var(--oc-color-swatch-brand-contrast);
+      color: var(--oc-color-background);
     }
   }
 }
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 861f0fc2e18..647ddc4a5b0 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -279,8 +279,8 @@ export default defineComponent({
         unref(activeDropItemIndex) !== null
           ? unref(activeDropItemIndex)
           : previous
-            ? elements.length
-            : -1
+          ? elements.length
+          : -1
       const increment = previous ? -1 : 1
 
       do {
@@ -486,7 +486,7 @@ export default defineComponent({
 
   li:hover,
   li.active {
-    background-color: var(--oc-color-background-highlight);
+    background-color: var(--oc-color-surfaceBright);
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
index fbcb8879517..0fd2e902ad2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
@@ -30,7 +30,7 @@ const defaultSpaceIcon: IconType = {
 }
 const defaultFallbackIcon: IconType = {
   name: 'resource-type-file',
-  color: 'var(--oc-color-text-default)'
+  color: 'var(--oc-color-onSurface)'
 }
 
 const defaultFileIconMapping = createDefaultFileIconMapping()
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 1132ce8314d..963f0f7fae2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -264,7 +264,7 @@ export default defineComponent({
 
       .text {
         &:hover {
-          color: var(--oc-color-text-default);
+          color: var(--oc-color-onSurface);
           text-decoration: underline;
         }
       }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceName.vue b/packages/web-pkg/src/components/FilesList/ResourceName.vue
index f4903ad51f8..eb94b0af83b 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceName.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceName.vue
@@ -159,13 +159,13 @@ export default defineComponent({
 
     &:hover {
       text-decoration: underline;
-      text-decoration-color: var(--oc-color-text-default);
+      text-decoration-color: var(--oc-color-onSurface);
     }
   }
 
   &-basename,
   &-extension {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     white-space: pre;
   }
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 078ad38560a..49481216964 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1237,7 +1237,7 @@ export default defineComponent({
 
     &:hover > .resource-table-edit-name {
       svg {
-        fill: var(--oc-color-text-default);
+        fill: var(--oc-color-onSurface);
       }
     }
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 98c15c9cbf0..338cc520830 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -229,7 +229,7 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-tile-card {
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
   box-shadow: none;
   height: 100%;
   display: flex;
@@ -267,7 +267,7 @@ export default defineComponent({
     width: 100%;
 
     .oc-tag {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
 
       &.resource-disabled-indicator {
         z-index: 1;
@@ -341,7 +341,7 @@ export default defineComponent({
   }
 
   .resource-name-wrapper {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     max-width: 70%;
     overflow: hidden;
   }
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index 89e79755ddd..a06367fd848 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -104,7 +104,7 @@ export default defineComponent({
   }
 
   &-option-selected {
-    background-color: var(--oc-color-swatch-primary-default) !important;
+    background-color: var(--oc-color-primary) !important;
     color: var(--oc-color-text-inverse) !important;
   }
 }
diff --git a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
index cf211fd85b3..322251dd0d3 100644
--- a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
+++ b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .compare-save-dialog {
-  background: var(--oc-color-background-highlight);
+  background: var(--oc-color-surfaceBright);
   flex-flow: row wrap;
 }
 .state-indicator {
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index ee1264d78eb..04fea6e9a97 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -306,13 +306,11 @@ export default defineComponent({
   max-height: 100%;
   display: grid;
   grid-template-rows: auto auto 1fr;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   top: 0;
   position: absolute;
   transform: translateX(100%);
-  transition:
-    transform 0.4s ease,
-    visibility 0.4s 0s;
+  transition: transform 0.4s ease, visibility 0.4s 0s;
   // visibility is here to prevent focusing panel child elements,
   // the transition delay keeps care that it will only apply if the element is visible or not.
   // hidden: if element is off screen
@@ -363,7 +361,7 @@ export default defineComponent({
 
       &__title {
         text-align: center;
-        color: var(--oc-color-text-default);
+        color: var(--oc-color-onSurface);
         font-size: var(--oc-font-size-large);
         grid-column-start: 2;
       }
@@ -393,7 +391,7 @@ export default defineComponent({
       border-bottom: 1px solid var(--oc-color-border);
       width: 100%;
       border-radius: 0;
-      color: var(--oc-color-text-default) !important;
+      color: var(--oc-color-onSurface) !important;
       display: grid;
       grid-template-columns: auto 1fr auto;
       text-align: left;
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
index d189a5b04ee..57c1f4a6505 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
@@ -36,7 +36,7 @@ export default defineComponent({
   grid-template-columns: auto 1fr auto;
   align-items: center;
   grid-gap: 5px;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
 
   &.sidebar-panel__space_info {
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 51b97dbc243..0d275696655 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -291,7 +291,7 @@ export default defineComponent({
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    background: var(--oc-color-swatch-primary-default);
+    background: var(--oc-color-primary);
     border-radius: 50%;
     cursor: pointer;
     height: 1rem;
@@ -299,7 +299,7 @@ export default defineComponent({
   }
 
   &::-moz-range-thumb {
-    background: var(--oc-color-swatch-primary-default);
+    background: var(--oc-color-primary);
     border-radius: 50%;
     cursor: pointer;
     height: 1rem;
diff --git a/packages/web-pkg/src/helpers/resource/icon.ts b/packages/web-pkg/src/helpers/resource/icon.ts
index fb1cf936fc9..2999b205956 100644
--- a/packages/web-pkg/src/helpers/resource/icon.ts
+++ b/packages/web-pkg/src/helpers/resource/icon.ts
@@ -77,7 +77,7 @@ const fileIcon = {
     ]
   },
   code: {
-    icon: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-code', color: 'var(--oc-color-onSurface)' },
     extensions: [
       'bash',
       'c++',
@@ -109,7 +109,7 @@ const fileIcon = {
     ]
   },
   default: {
-    icon: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-file', color: 'var(--oc-color-onSurface)' },
     extensions: ['accdb', 'rss', 'swf']
   },
   drawio: {
@@ -191,11 +191,11 @@ const fileIcon = {
     extensions: ['csv', 'ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
   },
   text: {
-    icon: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-text', color: 'var(--oc-color-onSurface)' },
     extensions: ['cb7', 'cba', 'cbr', 'cbt', 'cbtc', 'cbz', 'cvbdl', 'eml', 'mdb', 'tex', 'txt']
   },
   url: {
-    icon: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-url', color: 'var(--oc-color-onSurface)' },
     extensions: ['url']
   },
   video: {
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d6be50d9934..76141c52fe0 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -141,7 +141,7 @@ body {
 }
 
 #web {
-  background-color: var(--oc-color-swatch-brand-default);
+  background-color: var(--oc-color-primary);
   height: 100vh;
   max-height: 100vh;
   overflow-y: hidden;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index abe1f499a8b..cccd6b4f7fa 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -173,7 +173,7 @@ export default defineComponent({
 }
 
 #web-nav-sidebar {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-radius: 15px 0 0 15px;
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
   display: flex;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index a72a83f1d34..39a2d947aad 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -106,8 +106,8 @@ export default defineComponent({
   user-select: none;
 
   .oc-tag {
-    color: var(--oc-color-text-default);
-    background-color: var(--oc-color-background-highlight);
+    color: var(--oc-color-onSurface);
+    background-color: var(--oc-color-surfaceBright);
   }
   .text {
     opacity: 1;
@@ -119,7 +119,7 @@ export default defineComponent({
   }
 
   &:hover:not(.active) {
-    color: var(--oc-color-swatch-brand-hover) !important;
+    color: var(--oc-color-primaryContainer) !important;
   }
 
   &:hover,
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index d6c83af8bbb..b0e2f913ab9 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -37,7 +37,7 @@ export default defineComponent({
   z-index: 6;
   -webkit-appearance: none;
   border: none;
-  background-color: var(--oc-color-swatch-brand-default);
+  background-color: var(--oc-color-primary);
   color: var(--oc-color-swatch-primary-contrast);
   font: inherit;
   padding: 0.25em 0.5em;
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 6532096796f..9c48b9e2238 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -277,7 +277,7 @@ export default {
 .oc-notifications {
   &-item {
     > a {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 
@@ -287,7 +287,7 @@ export default {
     }
 
     &-background {
-      background-color: var(--oc-color-background-secondary);
+      background-color: var(--oc-color-background);
       opacity: 0.6;
     }
 
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 62b1df49ee3..4c286f4c6f8 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -22,8 +22,8 @@
         :width="32"
         icon="user"
         icon-fill-type="line"
-        icon-color="var(--oc-color-swatch-brand-default)"
-        background="var(--oc-color-swatch-brand-contrast)"
+        icon-color="var(--oc-color-primary)"
+        background="var(--oc-color-background)"
       />
     </oc-button>
     <oc-drop
@@ -228,7 +228,7 @@ export default defineComponent({
 
   a {
     font-size: var(--oc-font-size-medium) !important;
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 }
 </style>
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 4d6e2c89d55..b141f0e9d38 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -706,7 +706,7 @@ export default defineComponent({
 
 <style lang="scss">
 #upload-info {
-  background-color: var(--oc-color-background-secondary);
+  background-color: var(--oc-color-background);
   width: 400px;
 
   @media (max-width: 640px) {
@@ -720,15 +720,15 @@ export default defineComponent({
   }
 
   .upload-info-title {
-    background-color: var(--oc-color-swatch-brand-default);
+    background-color: var(--oc-color-primary);
   }
 
   .upload-info-title p {
-    color: var(--oc-color-swatch-brand-contrast);
+    color: var(--oc-color-background);
   }
 
   .oc-resource-indicators .parent-folder .text {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 
   .upload-info-items {
@@ -741,7 +741,7 @@ export default defineComponent({
   }
 
   .upload-info-danger {
-    color: var(--oc-color-swatch-danger-default);
+    color: var(--oc-color-error);
   }
 
   .upload-info-success {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 66baa08fa00..bd86944ef06 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -281,7 +281,7 @@ export default defineComponent({
 
     .app-container {
       height: 100%;
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       border-radius: 15px;
       overflow: hidden;
       width: 100%;
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index 73e88e9d7e0..5d0ffc95930 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -208,7 +208,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-link-resolve {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
   }
 
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 068167a2172..b42a6685072 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -320,7 +320,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-link-resolve {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
   }
 

From 2306d1c56cee98efcdf8b1e0743b27e4f2a1dea5 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 5 Dec 2024 07:57:33 +0100
Subject: [PATCH 4/6] Next batch of CSS var updates

---
 .../OcApplicationIcon/OcApplicationIcon.vue    |  2 +-
 .../components/OcAvatarCount/OcAvatarCount.vue |  2 +-
 .../components/OcAvatarItem/OcAvatarItem.vue   |  2 +-
 .../src/components/OcButton/OcButton.vue       | 18 +++++++++---------
 .../src/components/OcDrop/OcDrop.vue           |  4 ++--
 .../src/components/OcDropzone/OcDropzone.vue   |  2 +-
 .../src/components/OcGrid/OcGrid.vue           |  8 ++++----
 .../src/components/OcIcon/OcIcon.vue           |  2 +-
 .../components/OcPagination/OcPagination.vue   |  4 ++--
 .../src/components/OcSelect/OcSelect.vue       | 10 +++++-----
 .../src/components/OcTable/OcTable.vue         | 10 +++++-----
 .../src/components/OcTag/OcTag.vue             |  4 ++--
 .../src/components/OcTextarea/OcTextarea.vue   |  4 ++--
 .../_OcTextInputPassword.vue                   |  2 +-
 .../src/styles/theme/background.scss           |  2 +-
 .../design-system/src/styles/theme/helper.scss |  4 ++--
 .../src/styles/theme/oc-form.scss              |  6 +++---
 .../src/styles/theme/oc-text.scss              |  2 +-
 .../components/Spaces/SideBar/ActionsPanel.vue |  2 +-
 .../src/components/AppImageGallery.vue         |  2 +-
 packages/web-app-epub-reader/src/App.vue       |  2 +-
 .../components/SideBar/Actions/FileActions.vue |  4 ++--
 .../SideBar/Actions/SpaceActions.vue           |  4 ++--
 .../components/SideBar/Details/FileDetails.vue |  4 ++--
 .../SideBar/Details/FileDetailsMultiple.vue    |  4 ++--
 .../components/SideBar/Details/TagsSelect.vue  |  2 +-
 .../Shares/Collaborators/EditDropdown.vue      |  2 +-
 .../InviteCollaboratorForm.vue                 |  2 +-
 .../Shares/Collaborators/RoleDropdown.vue      |  2 +-
 .../SideBar/Versions/FileVersions.vue          |  2 +-
 packages/web-app-ocm/src/views/App.vue         |  2 +-
 .../web-app-ocm/src/views/ConnectionsPanel.vue |  6 +++---
 .../web-app-search/src/portals/SearchBar.vue   |  2 +-
 .../src/cern/components/CollapsibleOcTable.vue | 10 +++++-----
 .../web-pkg/src/components/BatchActions.vue    |  4 ++--
 .../web-pkg/src/components/CreateLinkModal.vue |  4 ++--
 .../FilesList/ResourceGhostElement.vue         |  6 +++---
 .../src/components/FilesList/ResourceIcon.vue  |  2 +-
 .../src/components/FilesList/ResourceTile.vue  |  6 +++---
 .../src/components/Filters/DateFilter.vue      |  8 +++-----
 packages/web-pkg/src/components/ItemFilter.vue |  2 +-
 .../src/components/LinkRoleDropdown.vue        |  4 ++--
 .../web-pkg/src/components/SearchBarFilter.vue |  2 +-
 .../src/components/SideBar/Files/FileInfo.vue  |  2 +-
 .../web-pkg/src/components/SideBar/SideBar.vue |  2 +-
 .../Spaces/Details/SpaceDetailsMultiple.vue    |  4 ++--
 .../web-pkg/src/components/ViewOptions.vue     |  2 +-
 .../src/components/SidebarNav/SidebarNav.vue   |  6 +++---
 packages/web-runtime/src/components/SkipTo.vue |  2 +-
 .../src/components/Topbar/ApplicationsMenu.vue |  6 +++---
 .../src/components/Topbar/UserMenu.vue         |  6 +++---
 51 files changed, 103 insertions(+), 105 deletions(-)

diff --git a/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue b/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
index 92fa452349b..d4b9d30c580 100644
--- a/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
+++ b/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
@@ -98,7 +98,7 @@ export default defineComponent({
     width: 18px !important;
 
     svg {
-      fill: var(--oc-color-swatch-primary-contrast) !important;
+      fill: var(--oc-color-onPrimary) !important;
       height: 18px !important;
       max-height: 18px !important;
       max-width: 18px !important;
diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
index 1747b522993..69732e9828c 100644
--- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
+++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -45,7 +45,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-avatar-count {
   align-items: center;
-  background-color: var(--oc-color-swatch-passive-default);
+  background-color: var(--oc-color-secondary);
   border-radius: 50%;
   color: var(--oc-color-inverseOnSurface);
   display: flex;
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index a619b7e84ca..d0de7788243 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -77,7 +77,7 @@ export default defineComponent({
     background: {
       type: String,
       required: false,
-      default: 'var(--oc-color-swatch-passive-default)'
+      default: 'var(--oc-color-secondary)'
     },
     /**
      * Accessibility label used as alt. Use only in case the avatar is used alone.
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 6a4e1bf1c3c..13c9a008219 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -391,7 +391,7 @@ export default defineComponent({
 
   &-passive {
     @include oc-button-variation(
-      var(--oc-color-swatch-passive-default),
+      var(--oc-color-secondary),
       var(--oc-color-swatch-passive-hover),
       var(--oc-color-swatch-passive-muted),
       var(--oc-color-swatch-passive-contrast)
@@ -400,12 +400,12 @@ export default defineComponent({
     &-outline {
       &:focus:not([disabled]),
       &:hover:not([disabled]) {
-        color: var(--oc-color-swatch-passive-default);
+        color: var(--oc-color-secondary);
         background-color: var(--oc-color-swatch-passive-hover-outline);
         border-color: var(--oc-color-swatch-passive-hover-outline);
 
         .oc-icon > svg {
-          fill: var(--oc-color-swatch-passive-default);
+          fill: var(--oc-color-secondary);
         }
       }
     }
@@ -423,17 +423,17 @@ export default defineComponent({
   &-primary {
     @include oc-button-variation(
       var(--oc-color-primary),
-      var(--oc-color-swatch-primary-hover),
-      var(--oc-color-swatch-primary-muted),
-      var(--oc-color-swatch-primary-contrast)
+      var(--oc-color-onPrimaryContainer),
+      var(--oc-color-primaryContainer),
+      var(--oc-color-onPrimary)
     );
 
     &-filled {
-      color: var(--oc-color-swatch-primary-contrast) !important;
+      color: var(--oc-color-onPrimary) !important;
       @include oc-background-primary-gradient;
 
       span > svg {
-        fill: var(--oc-color-swatch-primary-contrast) !important;
+        fill: var(--oc-color-onPrimary) !important;
       }
     }
   }
@@ -480,7 +480,7 @@ export default defineComponent({
   &-group {
     display: inline-flex;
     flex-flow: row wrap;
-    outline: 1px solid var(--oc-color-swatch-passive-default);
+    outline: 1px solid var(--oc-color-secondary);
     outline-offset: -1px;
     border-radius: 5px;
 
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index 4bd4ded1bd1..65420508982 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -274,11 +274,11 @@ export default defineComponent({
     button:not([role='switch']) {
       box-sizing: border-box;
       padding: var(--oc-space-small);
-      color: var(--oc-color-swatch-passive-default);
+      color: var(--oc-color-secondary);
 
       &:focus:not([disabled]),
       &:hover:not([disabled]) {
-        background-color: var(--oc-color-background-hover);
+        background-color: var(--oc-color-surfaceContainerHigh);
 
         text-decoration: none !important;
         border-radius: 5px;
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index 46d98c0a953..55e1db94789 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -19,7 +19,7 @@ export default defineComponent({
 .oc-dropzone {
   align-items: center;
   background-color: var(--oc-color-background);
-  border: 1px dashed var(--oc-color-swatch-primary-muted);
+  border: 1px dashed var(--oc-color-primaryContainer);
   color: var(--oc-color-onSurface);
   display: flex;
   font-size: 1.5rem;
diff --git a/packages/design-system/src/components/OcGrid/OcGrid.vue b/packages/design-system/src/components/OcGrid/OcGrid.vue
index ccbc5144b4d..83b7f14fc59 100644
--- a/packages/design-system/src/components/OcGrid/OcGrid.vue
+++ b/packages/design-system/src/components/OcGrid/OcGrid.vue
@@ -544,7 +544,7 @@ $grid-divider-border: #e5e5e5 !default;
     Simple boxes
   </h3>
   <oc-grid>
-    <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-passive-default)" class="oc-height-small"></div>
+    <div style="width: 80px; height: 80px; background-color: var(--oc-color-secondary)" class="oc-height-small"></div>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-success-default)" class="oc-height-small"></div>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-error)" class="oc-height-small"></div>
   </oc-grid>
@@ -554,12 +554,12 @@ $grid-divider-border: #e5e5e5 !default;
   </h3>
   <oc-grid gutter="large">
     <div class="oc-width-1-1 oc-width-large@l">
-      <div style="background-color: var(--oc-color-swatch-passive-default)" class="oc-p-m">
+      <div style="background-color: var(--oc-color-secondary)" class="oc-p-m">
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       </div>
     </div>
     <div class="oc-width-expand">
-      <div style="background-color: var(--oc-color-swatch-passive-default)" class="oc-p-m">
+      <div style="background-color: var(--oc-color-secondary)" class="oc-p-m">
         <p>I'm matching my neightbors height in @l viewports</p>
       </div>
     </div>
@@ -569,7 +569,7 @@ $grid-divider-border: #e5e5e5 !default;
     An application bar
   </h3>
 
-<div style="background-color: var(--oc-color-background-muted)" class="oc-p-s">
+<div style="background-color: var(--oc-color-surfaceDim)" class="oc-p-s">
   <oc-grid flex gutter="small">
     <div class="oc-width-expand">
       <oc-breadcrumb :items="[{text:'First',to:{path:'first'}},{text:'Second'},{text:'Third'}]" />
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 3236821603b..3a103e3bac2 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -271,7 +271,7 @@ export default defineComponent({
   }
 
   &-passive > svg {
-    fill: var(--oc-color-swatch-passive-default);
+    fill: var(--oc-color-secondary);
   }
 
   &-warning > svg {
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index f978e804452..e2372537853 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -217,14 +217,14 @@ export default defineComponent({
         transition: background-color $transition-duration-short ease-in-out;
 
         &:not(span):hover {
-          background-color: var(--oc-color-swatch-passive-default);
+          background-color: var(--oc-color-secondary);
           color: var(--oc-color-inverseOnSurface);
           text-decoration: none;
         }
       }
 
       &-current {
-        background-color: var(--oc-color-swatch-passive-default);
+        background-color: var(--oc-color-secondary);
         color: var(--oc-color-inverseOnSurface);
         font-weight: bold;
       }
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index e639a31dc99..f70f3e7cbaa 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -511,7 +511,7 @@ export default defineComponent({
   .vs__open-indicator,
   .vs__search,
   .vs__selected {
-    background-color: var(--oc-color-background-muted) !important;
+    background-color: var(--oc-color-surfaceDim) !important;
     color: var(--oc-color-input-text-muted) !important;
     pointer-events: none;
   }
@@ -560,7 +560,7 @@ export default defineComponent({
     }
 
     &__selected-readonly {
-      background-color: var(--oc-color-background-muted) !important;
+      background-color: var(--oc-color-surfaceDim) !important;
     }
 
     &__search,
@@ -594,7 +594,7 @@ export default defineComponent({
 
       &--highlight,
       &--selected {
-        background-color: var(--oc-color-background-hover);
+        background-color: var(--oc-color-surfaceContainerHigh);
         color: var(--oc-color-primaryContainer);
       }
     }
@@ -643,12 +643,12 @@ export default defineComponent({
   &:focus-within {
     .vs__dropdown-menu,
     .vs__dropdown-toggle {
-      border-color: var(--oc-color-swatch-passive-default);
+      border-color: var(--oc-color-secondary);
     }
   }
 
   .keyboard-outline {
-    outline: 2px var(--oc-color-swatch-passive-default) solid !important;
+    outline: 2px var(--oc-color-secondary) solid !important;
     outline-offset: -2px;
   }
 }
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 0e39109991a..e43136d864d 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -528,7 +528,7 @@ export default defineComponent({
   }
 
   &-hover tr:not(&-footer-row):hover {
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
   }
 
   &-highlighted {
@@ -536,11 +536,11 @@ export default defineComponent({
   }
 
   &-accentuated {
-    background-color: var(--oc-color-background-accentuate);
+    background-color: var(--oc-color-surfaceContainerHighaccentuate);
   }
 
   &-disabled {
-    background-color: var(--oc-color-background-muted);
+    background-color: var(--oc-color-surfaceDim);
     opacity: 0.7;
     filter: grayscale(0.6);
     pointer-events: none;
@@ -563,7 +563,7 @@ export default defineComponent({
   &-thead-content {
     vertical-align: middle;
     display: inline-table;
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
     &:hover {
       text-decoration: underline;
     }
@@ -585,7 +585,7 @@ export default defineComponent({
   justify-content: start;
   .oc-icon {
     &:hover {
-      background-color: var(--oc-color-background-hover);
+      background-color: var(--oc-color-surfaceContainerHigh);
     }
   }
 }
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index d88eb85c8e1..9e10f71934f 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -136,12 +136,12 @@ export default defineComponent({
 
     &:hover,
     &:focus {
-      color: var(--oc-color-swatch-primary-hover);
+      color: var(--oc-color-onPrimaryContainer);
       cursor: pointer;
       text-decoration: none;
 
       .oc-icon > svg {
-        fill: var(--oc-color-swatch-primary-hover);
+        fill: var(--oc-color-onPrimaryContainer);
       }
     }
   }
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index 2c3c5151b63..7823c62df18 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -195,7 +195,7 @@ export default defineComponent({
   padding-bottom: var(--oc-space-xsmall);
   padding-top: var(--oc-space-xsmall);
   box-sizing: border-box;
-  background: var(--oc-color-background-muted);
+  background: var(--oc-color-surfaceDim);
   border: 0 none;
   margin: 0;
   color: var(--oc-color-onSurface);
@@ -209,7 +209,7 @@ export default defineComponent({
 
   &:focus {
     border-color: var(--oc-color-input-text-default);
-    background-color: var(--oc-color-background-muted);
+    background-color: var(--oc-color-surfaceDim);
     color: var(--oc-color-onSurface);
   }
 
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 580b85df46f..7cd758053ed 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -225,7 +225,7 @@ export default defineComponent({
     }
 
     &:focus-within {
-      border-color: var(--oc-color-swatch-passive-default);
+      border-color: var(--oc-color-secondary);
     }
   }
 
diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
index 83a6c77ff82..5ca0f41f4fb 100644
--- a/packages/design-system/src/styles/theme/background.scss
+++ b/packages/design-system/src/styles/theme/background.scss
@@ -41,7 +41,7 @@
 }
 
 .oc-background-muted {
-  background-color: var(--oc-color-background-muted) !important;
+  background-color: var(--oc-color-surfaceDim) !important;
 }
 
 .oc-background-highlight {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index edd0ba672d3..1bf98c743fb 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -117,12 +117,12 @@ hr {
 *:focus-visible:not(input[type=text]):not(input[type=textarea]):not(input[type=search]):not(input[type=password]):not(input[type=email]):not(input[type=date]) {
   outline: 2px var(--oc-color-swatch-passive-contrast) solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 4px var(--oc-color-swatch-passive-default);
+  box-shadow: 0 0 0 4px var(--oc-color-secondary);
 }
 
 // inner outline for visible focus on resource names
 // outer outlines don't work because of the hidden overflow (due to text truncation)
 .oc-resource-details a:focus-visible,
 .oc-resource-details button:focus-visible {
-  box-shadow: inset 0px 0px 0px 2px var(--oc-color-swatch-passive-default) !important;
+  box-shadow: inset 0px 0px 0px 2px var(--oc-color-secondary) !important;
 }
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index 7bb6337d5ad..5f92dd61c85 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -41,13 +41,13 @@ $form-line-height: $form-height !default;
 $form-padding-horizontal: var(--oc-space-small) !default;
 $form-padding-vertical: var(--oc-space-xsmall) !default;
 
-$form-background: var(--oc-color-background-muted) !default;
+$form-background: var(--oc-color-surfaceDim) !default;
 $form-color: var(--oc-color-onSurface) !default;
 
 $form-focus-background: var(--oc-color-surfaceBright) !default;
 $form-focus-color: var(--oc-color-onSurface) !default;
 
-$form-disabled-background: var(--oc-color-background-muted) !default;
+$form-disabled-background: var(--oc-color-surfaceDim) !default;
 $form-disabled-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-placeholder-color: var(--oc-color-onSurfaceVariant) !default;
@@ -78,7 +78,7 @@ $form-select-disabled-icon-color: var(--oc-color-onSurfaceVariant) !default;
 $form-datalist-padding-right: 20px !default;
 $form-datalist-icon-color: var(--oc-color-onSurface) !default;
 
-$form-radio-background: var(--oc-color-background-muted) !default;
+$form-radio-background: var(--oc-color-surfaceDim) !default;
 
 $form-radio-checked-background: $oc-color-swatch-primary-default !default;
 $form-radio-checked-icon-color: var(--oc-color-input-text-default) !default;
diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
index a2a7df71130..6585bad67a4 100644
--- a/packages/design-system/src/styles/theme/oc-text.scss
+++ b/packages/design-system/src/styles/theme/oc-text.scss
@@ -23,7 +23,7 @@ a {
   text-decoration: none;
 
   &:hover {
-    color: var(--oc-color-swatch-primary-hover);
+    color: var(--oc-color-onPrimaryContainer);
   }
 }
 
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
index ecda641a115..b92e60291a6 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 #oc-spaces-actions-sidebar {
   > li a,
   > li a:hover {
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
     display: inline-flex;
     gap: 10px;
     vertical-align: top;
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index 0bd572727c6..292213d203f 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -116,7 +116,7 @@ export default defineComponent({
 
     &-primary {
       span {
-        color: var(--oc-color-swatch-primary-contrast);
+        color: var(--oc-color-onPrimary);
         background-color: var(--oc-color-primary);
       }
     }
diff --git a/packages/web-app-epub-reader/src/App.vue b/packages/web-app-epub-reader/src/App.vue
index a41c094f43b..a670449127d 100644
--- a/packages/web-app-epub-reader/src/App.vue
+++ b/packages/web-app-epub-reader/src/App.vue
@@ -280,7 +280,7 @@ export default defineComponent({
 <style lang="scss">
 .epub-reader {
   &-chapters-list {
-    background: var(--oc-color-background-muted);
+    background: var(--oc-color-surfaceDim);
     border-right: 1px solid var(--oc-color-border);
     width: 240px;
     overflow-y: auto;
diff --git a/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue b/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
index 418fbe7961f..3487670e326 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
@@ -48,7 +48,7 @@ export default defineComponent({
 #oc-files-actions-sidebar {
   > li a,
   > li a:hover {
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
     display: inline-flex;
     gap: 10px;
     vertical-align: top;
@@ -57,7 +57,7 @@ export default defineComponent({
 
   > li:hover {
     text-decoration: none !important;
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
index 97ec2630c9e..97d9219438d 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -112,7 +112,7 @@ export default defineComponent({
 #oc-spaces-actions-sidebar {
   > li a,
   > li a:hover {
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
     display: inline-flex;
     gap: 10px;
     vertical-align: top;
@@ -120,7 +120,7 @@ export default defineComponent({
 
   > li:hover {
     text-decoration: none !important;
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index f5197c43095..060b9222d8a 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -412,8 +412,8 @@ export default defineComponent({
 
 .details-preview,
 .details-icon-wrapper {
-  background-color: var(--oc-color-background-muted);
-  border: 10px solid var(--oc-color-background-muted);
+  background-color: var(--oc-color-surfaceDim);
+  border: 10px solid var(--oc-color-surfaceDim);
   height: 230px;
 
   background-size: contain;
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 16f07e0ed96..172f25be27b 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -97,8 +97,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .files-preview {
   position: relative;
-  background-color: var(--oc-color-background-muted);
-  border: 10px solid var(--oc-color-background-muted);
+  background-color: var(--oc-color-surfaceDim);
+  border: 10px solid var(--oc-color-surfaceDim);
   height: 230px;
   text-align: center;
   color: var(--oc-color-swatch-passive-muted);
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
index 50635707751..910cddeff20 100644
--- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -310,7 +310,7 @@ export default defineComponent({
     height: 1.5rem;
 
     &-link {
-      color: var(--oc-color-swatch-passive-default);
+      color: var(--oc-color-secondary);
       pointer-events: visible;
     }
   }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 9e9e57dc7bc..e4a1c8f4fb8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -293,7 +293,7 @@ export default defineComponent({
   .action-menu-item {
     width: 100%;
     justify-content: flex-start;
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
     gap: var(--oc-space-small);
   }
 }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 899b6327338..67abd297029 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -636,7 +636,7 @@ export default defineComponent({
     }
 
     &-item:hover {
-      background-color: var(--oc-color-background-hover) !important;
+      background-color: var(--oc-color-surfaceContainerHigh) !important;
     }
 
     .oc-drop {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index 7d632c7243a..7f716153cf4 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -321,7 +321,7 @@ export default defineComponent({
 
       &:hover,
       &:focus {
-        background-color: var(--oc-color-background-hover);
+        background-color: var(--oc-color-surfaceContainerHigh);
         text-decoration: none;
       }
     }
diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index 1b4c680008d..d61717307c3 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -174,7 +174,7 @@ export default defineComponent({
       button.version-action-item {
         &:hover {
           color: var(--oc-color-primary-contrast);
-          background-color: var(--oc-color-background-hover);
+          background-color: var(--oc-color-surfaceContainerHigh);
         }
 
         .oc-icon {
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index cc3fdfdd696..d2786462e45 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -120,7 +120,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .sciencemesh {
-  background-color: var(--oc-color-background-hover);
+  background-color: var(--oc-color-surfaceContainerHigh);
   overflow: auto;
 }
 .sciencemesh-wrapper {
diff --git a/packages/web-app-ocm/src/views/ConnectionsPanel.vue b/packages/web-app-ocm/src/views/ConnectionsPanel.vue
index 779075cbf35..fdb803c881f 100644
--- a/packages/web-app-ocm/src/views/ConnectionsPanel.vue
+++ b/packages/web-app-ocm/src/views/ConnectionsPanel.vue
@@ -178,8 +178,8 @@ export default defineComponent({
 .sciencemesh-app {
   #shares-links {
     button:hover {
-      background-color: var(--oc-color-background-hover);
-      border-color: var(--oc-color-background-hover);
+      background-color: var(--oc-color-surfaceContainerHigh);
+      border-color: var(--oc-color-surfaceContainerHigh);
     }
 
     @media (max-width: $oc-breakpoint-medium-default) {
@@ -191,7 +191,7 @@ export default defineComponent({
   }
 
   .delete-connection-btn:hover {
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
   }
 }
 </style>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 0d55e879377..91e91542676 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -619,7 +619,7 @@ export default defineComponent({
           }
 
           &.disabled {
-            background-color: var(--oc-color-background-muted);
+            background-color: var(--oc-color-surfaceDim);
             pointer-events: none;
             opacity: 0.7;
             filter: grayscale(0.6);
diff --git a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
index d10f5e8317a..6d397234a8b 100644
--- a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
+++ b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
@@ -703,16 +703,16 @@ export default defineComponent({
     border-top: 1px solid var(--oc-color-outline);
   }
   &-hover tr:not(&-footer-row):hover {
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
   }
   &-highlighted {
     background-color: var(--oc-color-surfaceBright) !important;
   }
   &-accentuated {
-    background-color: var(--oc-color-background-accentuate);
+    background-color: var(--oc-color-surfaceContainerHighaccentuate);
   }
   &-disabled {
-    background-color: var(--oc-color-background-muted);
+    background-color: var(--oc-color-surfaceDim);
     opacity: 0.8;
     pointer-events: none;
   }
@@ -730,7 +730,7 @@ export default defineComponent({
   &-thead-content {
     vertical-align: middle;
     display: inline-table;
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
     &:hover {
       text-decoration: underline;
     }
@@ -752,7 +752,7 @@ export default defineComponent({
     display: table-cell !important;
     vertical-align: middle !important;
     &:hover {
-      background-color: var(--oc-color-background-hover);
+      background-color: var(--oc-color-surfaceContainerHigh);
     }
   }
 }
diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index a23cd144495..0edd67b5dc8 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -55,8 +55,8 @@ export default defineComponent({
   }
   .action-menu-item:hover:not([disabled]),
   .action-menu-item:focus:not([disabled]) {
-    background-color: var(--oc-color-background-hover);
-    border-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
+    border-color: var(--oc-color-surfaceContainerHigh);
   }
 
   li {
diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index 861eead3e3c..58b708a7b6d 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -380,13 +380,13 @@ export default defineComponent({
 
     &:hover,
     &:focus {
-      background-color: var(--oc-color-background-hover);
+      background-color: var(--oc-color-surfaceContainerHigh);
       text-decoration: none;
     }
   }
 
   .selected span {
-    color: var(--oc-color-swatch-primary-contrast);
+    color: var(--oc-color-onPrimary);
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index 421b096f988..173b04401d9 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -46,11 +46,11 @@ export default defineComponent({
 <style lang="scss">
 .ghost-element-layer1 {
   position: relative;
-  background-color: var(--oc-color-background-hover);
+  background-color: var(--oc-color-surfaceContainerHigh);
 
   .ghost-element-layer2 {
     position: absolute;
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
     filter: brightness(0.82);
     top: 3px;
     left: 3px;
@@ -60,7 +60,7 @@ export default defineComponent({
   }
   .ghost-element-layer3 {
     position: absolute;
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
     filter: brightness(0.72);
     top: 6px;
     left: 6px;
diff --git a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
index 0fd2e902ad2..2897e91442a 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
@@ -26,7 +26,7 @@ const defaultFolderIcon: IconType = {
 
 const defaultSpaceIcon: IconType = {
   name: 'layout-grid',
-  color: 'var(--oc-color-swatch-passive-default)'
+  color: 'var(--oc-color-secondary)'
 }
 const defaultFallbackIcon: IconType = {
   name: 'resource-type-file',
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 338cc520830..e2260fc7fd2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -238,7 +238,7 @@ export default defineComponent({
 
   &-disabled {
     pointer-events: none;
-    background-color: var(--oc-color-background-muted) !important;
+    background-color: var(--oc-color-surfaceDim) !important;
     opacity: 0.7;
     filter: grayscale(0.6);
 
@@ -291,7 +291,7 @@ export default defineComponent({
   }
 
   &-selected {
-    outline: 2px solid var(--oc-color-swatch-primary-hover);
+    outline: 2px solid var(--oc-color-onPrimaryContainer);
 
     .oc-tile-card-preview {
       width: calc(100% - var(--oc-space-medium));
@@ -315,7 +315,7 @@ export default defineComponent({
     left: 0;
 
     input {
-      background-color: var(--oc-color-background-muted);
+      background-color: var(--oc-color-surfaceDim);
     }
 
     input.oc-checkbox-checked {
diff --git a/packages/web-pkg/src/components/Filters/DateFilter.vue b/packages/web-pkg/src/components/Filters/DateFilter.vue
index 24b6288c689..b367cbc2ccc 100644
--- a/packages/web-pkg/src/components/Filters/DateFilter.vue
+++ b/packages/web-pkg/src/components/Filters/DateFilter.vue
@@ -342,7 +342,7 @@ export default defineComponent({
 
       &:hover,
       &-active {
-        background-color: var(--oc-color-background-hover) !important;
+        background-color: var(--oc-color-surfaceContainerHigh) !important;
       }
     }
 
@@ -359,15 +359,13 @@ export default defineComponent({
 
   &-range-panel {
     transform: translateX(100%);
-    transition:
-      transform 0.4s ease,
-      visibility 0.4s 0s;
+    transition: transform 0.4s ease, visibility 0.4s 0s;
     visibility: hidden;
     position: absolute;
     width: calc(100% - var(--oc-space-medium));
     background: #fff;
     top: 0;
-    color: var(--oc-color-swatch-passive-default);
+    color: var(--oc-color-secondary);
 
     &-active {
       visibility: unset;
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index 924f26ef30e..00fb0577efe 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -264,7 +264,7 @@ export default defineComponent({
 
       &:hover,
       &-active {
-        background-color: var(--oc-color-background-hover) !important;
+        background-color: var(--oc-color-surfaceContainerHigh) !important;
       }
     }
   }
diff --git a/packages/web-pkg/src/components/LinkRoleDropdown.vue b/packages/web-pkg/src/components/LinkRoleDropdown.vue
index 82ac5030704..81902c28154 100644
--- a/packages/web-pkg/src/components/LinkRoleDropdown.vue
+++ b/packages/web-pkg/src/components/LinkRoleDropdown.vue
@@ -142,13 +142,13 @@ export default defineComponent({
 
     &:hover,
     &:focus {
-      background-color: var(--oc-color-background-hover);
+      background-color: var(--oc-color-surfaceContainerHigh);
       text-decoration: none;
     }
   }
 
   .selected span {
-    color: var(--oc-color-swatch-primary-contrast);
+    color: var(--oc-color-onPrimary);
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/SearchBarFilter.vue b/packages/web-pkg/src/components/SearchBarFilter.vue
index b4aa6a5706c..1a67660dbbe 100644
--- a/packages/web-pkg/src/components/SearchBarFilter.vue
+++ b/packages/web-pkg/src/components/SearchBarFilter.vue
@@ -143,7 +143,7 @@ export default defineComponent({
 }
 .search-bar-filter-item {
   &:hover {
-    background-color: var(--oc-color-background-hover) !important;
+    background-color: var(--oc-color-surfaceContainerHigh) !important;
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 465f4dd6133..aea900003ab 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -82,7 +82,7 @@ export default defineComponent({
         fill: #ffba0a !important;
 
         path:not([fill='none']) {
-          stroke: var(--oc-color-swatch-passive-default);
+          stroke: var(--oc-color-secondary);
         }
       }
     }
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 04fea6e9a97..56fd4dcf2c5 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -412,7 +412,7 @@ export default defineComponent({
       }
 
       &:hover {
-        background-color: var(--oc-color-background-muted) !important;
+        background-color: var(--oc-color-surfaceDim) !important;
       }
     }
   }
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
index 091e39bae2c..4b8f271789d 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
@@ -92,8 +92,8 @@ export default defineComponent({
 <style lang="scss">
 .spaces-preview {
   position: relative;
-  background-color: var(--oc-color-background-muted);
-  border: 10px solid var(--oc-color-background-muted);
+  background-color: var(--oc-color-surfaceDim);
+  border: 10px solid var(--oc-color-surfaceDim);
   height: 230px;
   text-align: center;
   color: var(--oc-color-swatch-passive-muted);
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 0d275696655..265e97f44e5 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -252,7 +252,7 @@ export default defineComponent({
   vertical-align: middle;
   border: 3px solid transparent;
   &:hover {
-    background-color: var(--oc-color-background-hover);
+    background-color: var(--oc-color-surfaceContainerHigh);
     border-radius: 3px;
   }
 }
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index cccd6b4f7fa..e100abf08c9 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -212,8 +212,8 @@ export default defineComponent({
     &:hover,
     &:focus {
       text-decoration: none !important;
-      background-color: var(--oc-color-background-hover);
-      color: var(--oc-color-swatch-passive-default);
+      background-color: var(--oc-color-surfaceContainerHigh);
+      color: var(--oc-color-secondary);
     }
   }
 
@@ -221,7 +221,7 @@ export default defineComponent({
   .oc-sidebar-nav li button.active {
     &:focus,
     &:hover {
-      color: var(--oc-color-swatch-primary-contrast);
+      color: var(--oc-color-onPrimary);
     }
   }
 }
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index b0e2f913ab9..9d22a4cdc88 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -38,7 +38,7 @@ export default defineComponent({
   -webkit-appearance: none;
   border: none;
   background-color: var(--oc-color-primary);
-  color: var(--oc-color-swatch-primary-contrast);
+  color: var(--oc-color-onPrimary);
   font: inherit;
   padding: 0.25em 0.5em;
 }
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 548b7c43680..76ba614b673 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -157,14 +157,14 @@ export default defineComponent({
     &.oc-button-primary-raw-inverse {
       &:focus,
       &:hover {
-        color: var(--oc-color-swatch-primary-contrast) !important;
+        color: var(--oc-color-onPrimary) !important;
       }
     }
 
     &.oc-button-passive-raw {
       &:focus,
       &:hover {
-        color: var(--oc-color-swatch-passive-default) !important;
+        color: var(--oc-color-secondary) !important;
       }
     }
 
@@ -173,7 +173,7 @@ export default defineComponent({
     }
 
     &:hover {
-      background-color: var(--oc-color-background-hover);
+      background-color: var(--oc-color-surfaceContainerHigh);
       text-decoration: none;
     }
 
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 4c286f4c6f8..11eb0ef64a7 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -208,8 +208,8 @@ export default defineComponent({
 
     &:focus,
     &:hover {
-      background-color: var(--oc-color-background-hover);
-      color: var(--oc-color-swatch-passive-default);
+      background-color: var(--oc-color-surfaceContainerHigh);
+      color: var(--oc-color-secondary);
       text-decoration: none;
     }
   }
@@ -221,7 +221,7 @@ export default defineComponent({
 }
 
 .imprint-footer {
-  background-color: var(--oc-color-background-hover);
+  background-color: var(--oc-color-surfaceContainerHigh);
   margin-left: calc(var(--oc-space-small) * -1);
   width: calc(100% + var(--oc-space-small) * 2);
   margin-bottom: calc(var(--oc-space-small) * -1) !important;

From ad84d20f4085df90a358b21d053d885cb7a6d5ef Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 9 Dec 2024 17:02:27 +0100
Subject: [PATCH 5/6] WIP: Modify existing themes to improve
 out-of-box-experience

---
 docker-compose.yml                            |   2 +
 .../web-runtime/themes/owncloud/theme.json    | 212 ++++++++----------
 2 files changed, 100 insertions(+), 114 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 391f8a1962e..73bcc4013fb 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -69,6 +69,8 @@ x-ocis-server: &ocis-service
     OCM_OCM_SHARE_PROVIDER_INSECURE: 'true'
     OCM_OCM_STORAGE_PROVIDER_INSECURE: 'true'
 
+    WEB_UI_THEME_PATH: './packages/web-runtime/themes/theme.json'
+
   extra_hosts:
     - host.docker.internal:${DOCKER_HOST:-host-gateway}
     - ocis.owncloud.test:${DOCKER_HOST:-host-gateway}
diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json
index 50515bcc820..750c1eb88d0 100644
--- a/packages/web-runtime/themes/owncloud/theme.json
+++ b/packages/web-runtime/themes/owncloud/theme.json
@@ -101,62 +101,55 @@
           "name": "Light Theme",
           "designTokens": {
             "colorPalette": {
-              "background-accentuate": "rgba(255, 255, 5, 0.1)",
-              "background-default": "#ffffff",
-              "background-highlight": "#edf3fa",
-              "background-muted": "#f8f8f8",
-              "background-secondary": "#ffffff",
-              "background-hover": "rgb(236, 236, 236)",
-              "color-components-apptopbar-background": "transparent",
-              "color-components-apptopbar-border": "#ceddee",
-              "border": "#ecebee",
-              "input-bg": "#ffffff",
-              "input-border": "#ceddee",
-              "input-text-default": "#041e42",
-              "input-text-muted": "#4c5f79",
-              "swatch-brand-default": "#041e42",
-              "swatch-brand-hover": "#223959",
-              "swatch-brand-contrast": "#ffffff",
-              "swatch-danger-contrast": "#ffffff",
-              "swatch-danger-default": "rgb(197, 48, 48)",
-              "swatch-danger-hover": "#b12b2b",
-              "swatch-danger-muted": "rgb(204, 117, 117)",
-              "swatch-inverse-default": "#ffffff",
-              "swatch-inverse-hover": "#ffffff",
-              "swatch-inverse-muted": "#bfbfbf",
-              "swatch-passive-default": "#4c5f79",
-              "swatch-passive-hover": "#43536b",
-              "swatch-passive-hover-outline": "#f7fafd",
-              "swatch-passive-muted": "#283e5d",
-              "swatch-passive-contrast": "#ffffff",
-              "swatch-primary-default": "#4a76ac",
-              "swatch-primary-hover": "#80a7d7",
-              "swatch-primary-muted": "#2c588e",
-              "swatch-primary-muted-hover": "rgb(36, 75, 119)",
-              "swatch-primary-gradient": "#4e85c8",
-              "swatch-primary-gradient-hover": "rgb(59, 118, 194)",
-              "swatch-primary-contrast": "#ffffff",
-              "swatch-success-default": "rgb(3, 84, 63)",
-              "swatch-success-hover": "#023b2c",
-              "swatch-success-muted": "rgb(83, 150, 10)",
-              "swatch-success-contrast": "#ffffff",
-              "swatch-warning-default": "rgb(183, 76, 27)",
-              "swatch-warning-hover": "#a04318",
-              "swatch-warning-muted": "rgba(183, 76, 27, .5)",
-              "swatch-warning-contrast": "#ffffff",
-              "text-default": "#041e42",
-              "text-inverse": "#ffffff",
-              "text-muted": "#4c5f79",
-              "icon-folder": "#4d7eaf",
-              "icon-archive": "#fbbe54",
-              "icon-image": "#ee6b3b",
-              "icon-spreadsheet": "#15c286",
-              "icon-document": "#3b44a6",
-              "icon-video": "#045459",
-              "icon-audio": "#700460",
-              "icon-presentation": "#ee6b3b",
-              "icon-pdf": "#ec0d47",
-              "icon-medical": "#0984db"
+              "primary": "#425E91",
+              "surfaceTint": "#425E91",
+              "onPrimary": "#FFFFFF",
+              "primaryContainer": "#D7E2FF",
+              "onPrimaryContainer": "#001B3F",
+              "secondary": "#565E71",
+              "onSecondary": "#FFFFFF",
+              "secondaryContainer": "#DAE2F9",
+              "onSecondaryContainer": "#131C2C",
+              "tertiary": "#705574",
+              "onTertiary": "#FFFFFF",
+              "tertiaryContainer": "#FAD8FD",
+              "onTertiaryContainer": "#29132E",
+              "error": "#BA1A1A",
+              "onError": "#FFFFFF",
+              "errorContainer": "#FFDAD6",
+              "onErrorContainer": "#410002",
+              "background": "#F9F9FF",
+              "onBackground": "#1A1C20",
+              "surface": "#F9F9FF",
+              "onSurface": "#1A1C20",
+              "surfaceVariant": "#E0E2EC",
+              "onSurfaceVariant": "#44474E",
+              "outline": "#74777F",
+              "outlineVariant": "#C4C6D0",
+              "shadow": "#000000",
+              "scrim": "#000000",
+              "inverseSurface": "#2E3036",
+              "inverseOnSurface": "#F0F0F7",
+              "inversePrimary": "#ABC7FF",
+              "primaryFixed": "#D7E2FF",
+              "onPrimaryFixed": "#001B3F",
+              "primaryFixedDim": "#ABC7FF",
+              "onPrimaryFixedVariant": "#294677",
+              "secondaryFixed": "#DAE2F9",
+              "onSecondaryFixed": "#131C2C",
+              "secondaryFixedDim": "#BEC6DC",
+              "onSecondaryFixedVariant": "#3E4759",
+              "tertiaryFixed": "#FAD8FD",
+              "onTertiaryFixed": "#29132E",
+              "tertiaryFixedDim": "#DDBCE0",
+              "onTertiaryFixedVariant": "#573E5B",
+              "surfaceDim": "#D9D9E0",
+              "surfaceBright": "#F9F9FF",
+              "surfaceContainerLowest": "#FFFFFF",
+              "surfaceContainerLow": "#F3F3FA",
+              "surfaceContainer": "#EDEDF4",
+              "surfaceContainerHigh": "#E8E7EE",
+              "surfaceContainerHighest": "#E2E2E9"
             }
           }
         },
@@ -165,64 +158,55 @@
           "name": "Dark Theme",
           "designTokens": {
             "colorPalette": {
-              "background-accentuate": "#696969",
-              "background-default": "#292929",
-              "background-highlight": "#383838",
-              "background-muted": "#383838",
-              "background-secondary": "#404040",
-              "background-hover": "#383838",
-              "color-components-apptopbar-background": "transparent",
-              "color-components-apptopbar-border": "#ceddee",
-              "border": "#383838",
-              "input-bg": "#4f4f4f",
-              "input-border": "#696969",
-              "input-text-default": "#dadcdf",
-              "input-text-muted": "#bdbfc3",
-              "swatch-brand-default": "#212121",
-              "swatch-brand-hover": "#ffffff",
-              "swatch-brand-contrast": "#dadcdf",
-              "swatch-inverse-default": "",
-              "swatch-inverse-hover": "",
-              "swatch-inverse-muted": "#696969",
-              "swatch-passive-default": "#c2c2c2",
-              "swatch-passive-hover": "",
-              "swatch-passive-hover-outline": "#3B3B3B",
-              "swatch-passive-muted": "#bdbfc3",
-              "swatch-passive-contrast": "#000000",
-              "swatch-primary-default": "#73b0f2",
-              "swatch-primary-hover": "#7bafef",
-              "swatch-primary-muted": "",
-              "swatch-primary-muted-hover": "#2282f7",
-              "swatch-primary-gradient": "#4e85c8",
-              "swatch-primary-gradient-hover": "#76a1d5",
-              "swatch-primary-contrast": "#dadcdf",
-              "swatch-success-background": "rgba(0, 188, 140, 0)",
-              "swatch-success-default": "rgb(0, 200, 152)",
-              "swatch-success-hover": "#00f0b4",
-              "swatch-success-muted": "rgba(0, 188, 140, .5)",
-              "swatch-success-contrast": "#000000",
-              "swatch-warning-background": "rgba(0,0,0,0)",
-              "swatch-warning-default": "rgb(232, 191, 73)",
-              "swatch-warning-hover": "#eed077",
-              "swatch-warning-muted": "rgba(232, 178, 19, .5)",
-              "swatch-danger-default": "rgb(255, 137, 126)",
-              "swatch-danger-hover": "#ff7566",
-              "swatch-danger-muted": "rgba(255, 72, 53, .5)",
-              "swatch-danger-contrast": "#000000",
-              "swatch-warning-contrast": "#000000",
-              "text-default": "#dadcdf",
-              "text-inverse": "#000000",
-              "text-muted": "#c2c2c2",
-              "icon-folder": "rgb(44, 101, 255)",
-              "icon-archive": "rgb(255, 207, 1)",
-              "icon-image": "rgb(255, 111, 0)",
-              "icon-spreadsheet": "rgb(0, 182, 87)",
-              "icon-document": "rgb(44, 101, 255)",
-              "icon-video": "rgb(0, 187, 219)",
-              "icon-audio": "rgb(208, 67, 236)",
-              "icon-presentation": "rgb(255, 64, 6)",
-              "icon-pdf": "rgb(225, 5, 14)",
-              "icon-medical": "rgb(9,132,219)"
+              "primary": "#ABC7FF",
+              "surfaceTint": "#ABC7FF",
+              "onPrimary": "#0D2F5F",
+              "primaryContainer": "#294677",
+              "onPrimaryContainer": "#D7E2FF",
+              "secondary": "#BEC6DC",
+              "onSecondary": "#283041",
+              "secondaryContainer": "#3E4759",
+              "onSecondaryContainer": "#DAE2F9",
+              "tertiary": "#DDBCE0",
+              "onTertiary": "#3F2844",
+              "tertiaryContainer": "#573E5B",
+              "onTertiaryContainer": "#FAD8FD",
+              "error": "#FFB4AB",
+              "onError": "#690005",
+              "errorContainer": "#93000A",
+              "onErrorContainer": "#FFDAD6",
+              "background": "#111318",
+              "onBackground": "#E2E2E9",
+              "surface": "#111318",
+              "onSurface": "#E2E2E9",
+              "surfaceVariant": "#44474E",
+              "onSurfaceVariant": "#C4C6D0",
+              "outline": "#8E9099",
+              "outlineVariant": "#44474E",
+              "shadow": "#000000",
+              "scrim": "#000000",
+              "inverseSurface": "#E2E2E9",
+              "inverseOnSurface": "#2E3036",
+              "inversePrimary": "#425E91",
+              "primaryFixed": "#D7E2FF",
+              "onPrimaryFixed": "#001B3F",
+              "primaryFixedDim": "#ABC7FF",
+              "onPrimaryFixedVariant": "#294677",
+              "secondaryFixed": "#DAE2F9",
+              "onSecondaryFixed": "#131C2C",
+              "secondaryFixedDim": "#BEC6DC",
+              "onSecondaryFixedVariant": "#3E4759",
+              "tertiaryFixed": "#FAD8FD",
+              "onTertiaryFixed": "#29132E",
+              "tertiaryFixedDim": "#DDBCE0",
+              "onTertiaryFixedVariant": "#573E5B",
+              "surfaceDim": "#111318",
+              "surfaceBright": "#37393E",
+              "surfaceContainerLowest": "#0C0E13",
+              "surfaceContainerLow": "#1A1C20",
+              "surfaceContainer": "#1E2025",
+              "surfaceContainerHigh": "#282A2F",
+              "surfaceContainerHighest": "#33353A"
             }
           }
         }

From 377915100a0dd03538e03ec7b2a5baf23d9eb0fa Mon Sep 17 00:00:00 2001
From: Tobias Baader <tobias.baader@gmail.com>
Date: Mon, 9 Dec 2024 20:09:57 +0100
Subject: [PATCH 6/6] adjusted some color roles

adjusted some color roles:
- backgrounds
- borders
some more...
---
 .../design-system/src/components/OcTable/OcTable.vue   |  5 ++---
 .../src/components/_OcTableHeader/_OcTableHeader.vue   |  2 +-
 .../design-system/src/styles/theme/background.scss     |  2 +-
 .../src/components/SideBar/Details/FileDetails.vue     |  2 --
 .../SideBar/Shares/Collaborators/EditDropdown.vue      |  2 +-
 .../components/SideBar/Shares/Links/EditDropdown.vue   |  2 +-
 .../web-pkg/src/cern/components/CollapsibleOcTable.vue |  1 -
 packages/web-pkg/src/components/AppBar/AppBar.vue      |  1 -
 .../components/ContextActions/ContextActionMenu.vue    |  2 +-
 .../web-pkg/src/components/SideBar/Files/FileInfo.vue  |  1 -
 packages/web-pkg/src/components/SideBar/SideBar.vue    | 10 +++++-----
 .../src/components/SideBar/Spaces/SpaceInfo.vue        |  2 +-
 packages/web-runtime/src/App.vue                       |  2 +-
 .../src/components/Account/AccountTable.vue            |  2 +-
 .../src/components/SidebarNav/SidebarNav.vue           |  2 +-
 .../src/components/Topbar/ApplicationsMenu.vue         |  3 +--
 .../web-runtime/src/components/Topbar/FeedbackLink.vue |  4 ++--
 .../src/components/Topbar/NotificationBell.vue         |  3 +--
 .../src/components/Topbar/SideBarToggle.vue            |  3 +--
 packages/web-runtime/src/layouts/Application.vue       |  2 +-
 packages/web-runtime/src/pages/account.vue             |  2 +-
 21 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index e43136d864d..21f8a7cc54a 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -524,7 +524,7 @@ export default defineComponent({
   }
 
   tr + tr {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outlineVariant);
   }
 
   &-hover tr:not(&-footer-row):hover {
@@ -550,7 +550,6 @@ export default defineComponent({
     position: relative;
 
     .oc-table-header-cell {
-      background-color: var(--oc-color-background);
       position: sticky;
       z-index: 1;
     }
@@ -570,7 +569,7 @@ export default defineComponent({
   }
 
   &-footer {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outlineVariant);
 
     &-cell {
       color: var(--oc-color-onSurfaceVariant);
diff --git a/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue b/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue
index 6143cc83121..b447b888dc2 100644
--- a/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue
+++ b/packages/design-system/src/components/_OcTableHeader/_OcTableHeader.vue
@@ -15,6 +15,6 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-thead {
-  border-bottom: 1px solid var(--oc-color-border);
+  border-bottom: 1px solid var(--oc-color-outlineVariant);
 }
 </style>
diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
index 5ca0f41f4fb..798f5e3d05e 100644
--- a/packages/design-system/src/styles/theme/background.scss
+++ b/packages/design-system/src/styles/theme/background.scss
@@ -45,7 +45,7 @@
 }
 
 .oc-background-highlight {
-  background-color: var(--oc-color-surfaceBright) !important;
+  border:1px solid var(--oc-color-outlineVariant)
 }
 
 .oc-background-contain {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 060b9222d8a..db3bd235abb 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -412,8 +412,6 @@ export default defineComponent({
 
 .details-preview,
 .details-icon-wrapper {
-  background-color: var(--oc-color-surfaceDim);
-  border: 10px solid var(--oc-color-surfaceDim);
   height: 230px;
 
   background-size: contain;
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index e4a1c8f4fb8..1281c20dc17 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -287,7 +287,7 @@ export default defineComponent({
 .collaborator-edit-dropdown-options-list {
   &-remove {
     margin-top: var(--oc-space-small) !important;
-    border-top: 1px solid var(--oc-color-border) !important;
+    border-top: 1px solid var(--oc-color-outlineVariant) !important;
   }
 
   .action-menu-item {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
index d4378ea62e1..993371f03a5 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
@@ -285,7 +285,7 @@ export default defineComponent({
 
   &-delete {
     margin-top: var(--oc-space-small) !important;
-    border-top: 1px solid var(--oc-color-border) !important;
+    border-top: 1px solid var(--oc-color-outlineVariant) !important;
   }
 }
 </style>
diff --git a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
index 6d397234a8b..963a11bfa8c 100644
--- a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
+++ b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
@@ -719,7 +719,6 @@ export default defineComponent({
   &-sticky {
     position: relative;
     .oc-table-header-cell {
-      background-color: var(--oc-color-background);
       position: sticky;
       z-index: 1;
     }
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index a2c192ba395..35a8d710f2f 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -347,7 +347,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #files-app-bar {
-  background-color: var(--oc-color-background);
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
diff --git a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
index 790885ecb7f..bbc048203a0 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
@@ -93,7 +93,7 @@ export default defineComponent({
   }
 
   &-border {
-    border-bottom: 1px solid var(--oc-color-border);
+    border-bottom: 1px solid var(--oc-color-outlineVariant);
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index aea900003ab..9b045a22076 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -57,7 +57,6 @@ export default defineComponent({
 <style lang="scss">
 .file_info {
   &.sidebar-panel__file_info {
-    border-bottom: 1px solid var(--oc-color-border);
   }
 
   button {
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 56fd4dcf2c5..30b266b5928 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -274,7 +274,7 @@ export default defineComponent({
 
 <style lang="scss">
 #app-sidebar {
-  border-left: 1px solid var(--oc-color-border);
+  border-left: 1px solid var(--oc-color-outlineVariant);
   position: relative;
   overflow: hidden;
   min-width: 440px;
@@ -342,7 +342,7 @@ export default defineComponent({
   }
 
   .multi-root-panel-separator {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outlineVariant);
   }
 
   &__header {
@@ -388,7 +388,7 @@ export default defineComponent({
     margin: var(--oc-space-small) - var(--oc-space-small) - var(--oc-space-small);
 
     > button {
-      border-bottom: 1px solid var(--oc-color-border);
+      border-bottom: 1px solid var(--oc-color-outlineVariant);
       width: 100%;
       border-radius: 0;
       color: var(--oc-color-onSurface) !important;
@@ -399,7 +399,7 @@ export default defineComponent({
       padding: 0 var(--oc-space-small);
 
       &:first-of-type {
-        border-top: 1px solid var(--oc-color-border);
+        border-top: 1px solid var(--oc-color-outlineVariant);
       }
 
       &:last-of-type {
@@ -408,7 +408,7 @@ export default defineComponent({
 
       &:hover,
       &:focus {
-        border-color: var(--oc-color-border) !important;
+        border-color: var(--oc-color-outlineVariant) !important;
       }
 
       &:hover {
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
index 57c1f4a6505..9b05b41b9ed 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
@@ -40,7 +40,7 @@ export default defineComponent({
   padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
 
   &.sidebar-panel__space_info {
-    border-bottom: 1px solid var(--oc-color-border);
+    border-bottom: 1px solid var(--oc-color-outlineVariant);
   }
 
   &__body {
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 76141c52fe0..4b1a65bd092 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -141,7 +141,7 @@ body {
 }
 
 #web {
-  background-color: var(--oc-color-primary);
+  background-color: var(--oc-color-surfaceContainer);
   height: 100vh;
   max-height: 100vh;
   overflow-y: hidden;
diff --git a/packages/web-runtime/src/components/Account/AccountTable.vue b/packages/web-runtime/src/components/Account/AccountTable.vue
index 27c1dfeb16a..695251b20dc 100644
--- a/packages/web-runtime/src/components/Account/AccountTable.vue
+++ b/packages/web-runtime/src/components/Account/AccountTable.vue
@@ -69,7 +69,7 @@ export default defineComponent({
 
   tr {
     border-top: 0;
-    border-bottom: 1px solid var(--oc-color-border);
+    border-bottom: 1px solid var(--oc-color-outlineVariant);
     height: var(--oc-size-height-table-row);
   }
 
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index e100abf08c9..2ea8530b609 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -175,7 +175,7 @@ export default defineComponent({
 #web-nav-sidebar {
   background-color: var(--oc-color-background);
   border-radius: 15px 0 0 15px;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
+  border-right: 1px solid var(--oc-color-outlineVariant);
   display: flex;
   flex-direction: column;
   overflow: hidden;
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 76ba614b673..f759b49c385 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -7,8 +7,7 @@
     <oc-button
       id="_appSwitcherButton"
       v-oc-tooltip="applicationSwitcherLabel"
-      appearance="raw-inverse"
-      variation="brand"
+      appearance="raw"
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
diff --git a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
index e083bd4481d..17b0dbe48eb 100644
--- a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
@@ -5,8 +5,8 @@
       type="a"
       :href="hrefOrFallback"
       target="_blank"
-      appearance="raw-inverse"
-      variation="brand"
+      appearance="raw"
+      variation=""
       :aria-label="ariaLabelOrFallback"
       aria-describedby="oc-feedback-link-description"
     >
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index bb5b2b89092..7891c6f38e0 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -2,8 +2,7 @@
   <oc-button
     id="oc-notifications-bell"
     v-oc-tooltip="notificationsLabel"
-    appearance="raw-inverse"
-    variation="brand"
+    appearance="raw"
     :aria-label="notificationsLabel"
   >
     <oc-icon
diff --git a/packages/web-runtime/src/components/Topbar/SideBarToggle.vue b/packages/web-runtime/src/components/Topbar/SideBarToggle.vue
index ec8e8ccbb85..f5dc76f94c5 100644
--- a/packages/web-runtime/src/components/Topbar/SideBarToggle.vue
+++ b/packages/web-runtime/src/components/Topbar/SideBarToggle.vue
@@ -3,8 +3,7 @@
     id="files-toggle-sidebar"
     v-oc-tooltip="buttonLabel"
     :aria-label="buttonLabel"
-    appearance="raw-inverse"
-    variation="brand"
+    appearance="raw"
     class="oc-my-s"
     @click.stop="toggleSideBar"
   >
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index bd86944ef06..9205586bb6e 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -281,7 +281,7 @@ export default defineComponent({
 
     .app-container {
       height: 100%;
-      background-color: var(--oc-color-background);
+      background-color: var(--oc-color-surface);
       border-radius: 15px;
       overflow: hidden;
       width: 100%;
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 2ccb54c45b6..e4196308ab8 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -593,7 +593,7 @@ export default defineComponent({
   overflow-y: auto;
 
   #account-page-title {
-    border-bottom: 1px solid var(--oc-color-border);
+    border-bottom: 1px solid var(--oc-color-outlineVariant);
   }
 
   .account-page {