diff --git a/changelog/unreleased/change-theme-colors b/changelog/unreleased/change-theme-colors
new file mode 100644
index 00000000000..2701f023ca8
--- /dev/null
+++ b/changelog/unreleased/change-theme-colors
@@ -0,0 +1,7 @@
+Change: theme colors
+
+We've introduced `contrast` color variables for all the color swatches in the design system. As a result the `contrast` color variable needs to be added to all existing web themes.
+
+BREAKING CHANGE for non-default themes in existing deployments: You need to add the `contrast` color variable to all swatches in your theme. A good default is the `color-text-inverse` value. You can find an example here: https://owncloud.dev/clients/web/theming/#example-theme
+
+https://github.com/owncloud/web/pull/8563
diff --git a/docker-compose.yml b/docker-compose.yml
index 5dabc622b7b..e8315db41f5 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -22,6 +22,7 @@ services:
       # WEB
       WEB_UI_CONFIG: ${WEB_UI_CONFIG:-/web/config.json}
       WEB_ASSET_PATH: ${WEB_ASSET_PATH:-/web/dist}
+      WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/owncloud/theme.json}
 
       #FRONTEND
       FRONTEND_SEARCH_MIN_LENGTH: "2"
diff --git a/docs/theming/_index.md b/docs/theming/_index.md
index 281ad127e75..e15b5a68d8b 100644
--- a/docs/theming/_index.md
+++ b/docs/theming/_index.md
@@ -156,25 +156,32 @@ Again, you can use the [ownCloud design tokens](https://owncloud.design/#/Design
     "input-text-muted": "",
     "swatch-brand-default": "",
     "swatch-brand-hover": "",
+    "swatch-brand-muted": "",
+    "swatch-brand-contrast": "",
     "swatch-danger-default": "",
     "swatch-danger-hover": "",
     "swatch-danger-muted": "",
+    "swatch-danger-contrast": "",
     "swatch-inverse-default": "",
     "swatch-inverse-hover": "",
     "swatch-inverse-muted": "",
     "swatch-passive-default": "",
     "swatch-passive-hover": "",
     "swatch-passive-muted": "",
+    "swatch-passive-contrast": "",
     "swatch-primary-default": "",
     "swatch-primary-hover": "",
     "swatch-primary-muted": "",
     "swatch-primary-gradient": "",
+    "swatch-primary-contrast": "",
     "swatch-success-default": "",
     "swatch-success-hover": "",
     "swatch-success-muted": "",
+    "swatch-success-contrast": "",
     "swatch-warning-default": "",
     "swatch-warning-hover": "",
     "swatch-warning-muted": "",
+    "swatch-warning-contrast": "",
     "text-default": "",
     "text-inverse": "",
     "text-muted": ""
@@ -288,25 +295,32 @@ An empty template for your custom theme is provided below, and you can use the i
           "input-text-muted": "",
           "swatch-brand-default": "",
           "swatch-brand-hover": "",
+          "swatch-brand-muted": "",
+          "swatch-brand-contrast": "",
           "swatch-danger-default": "",
           "swatch-danger-hover": "",
           "swatch-danger-muted": "",
+          "swatch-danger-contrast": "",
           "swatch-inverse-default": "",
           "swatch-inverse-hover": "",
           "swatch-inverse-muted": "",
           "swatch-passive-default": "",
           "swatch-passive-hover": "",
           "swatch-passive-muted": "",
+          "swatch-passive-contrast": "",
           "swatch-primary-default": "",
           "swatch-primary-hover": "",
           "swatch-primary-muted": "",
           "swatch-primary-gradient": "",
+          "swatch-primary-contrast": "",
           "swatch-success-default": "",
           "swatch-success-hover": "",
           "swatch-success-muted": "",
+          "swatch-success-contrast": "",
           "swatch-warning-default": "",
           "swatch-warning-hover": "",
           "swatch-warning-muted": "",
+          "swatch-warning-contrast": "",
           "text-default": "",
           "text-inverse": "",
           "text-muted": ""
diff --git a/packages/design-system/changelog/unreleased/change-remove-inverse-variation b/packages/design-system/changelog/unreleased/change-remove-inverse-variation
new file mode 100644
index 00000000000..c13c7c27cc0
--- /dev/null
+++ b/packages/design-system/changelog/unreleased/change-remove-inverse-variation
@@ -0,0 +1,6 @@
+Change: "inverse" variation removed from buttons and icons
+
+The "inverse" variation has been removed from the `OcButton` and `OcIcon` components respectively. They are unused in the ownCloud affiliated code bases, hence the clean up.
+For `OcButton` there is a new `raw-inverse` variation which utilizes the new `contrast` color swatch token of the chosen variation.
+
+https://github.com/owncloud/web/pull/8563
diff --git a/packages/design-system/changelog/unreleased/enhancement-contrast-token b/packages/design-system/changelog/unreleased/enhancement-contrast-token
new file mode 100644
index 00000000000..5e685c3f8da
--- /dev/null
+++ b/packages/design-system/changelog/unreleased/enhancement-contrast-token
@@ -0,0 +1,5 @@
+Enhancement: Contrast token in swatches
+
+We've added a `contrast` token to each of our color swatches. Its purpose is to provide a high contrast color in comparison to the `default` token of the color swatch.
+
+https://github.com/owncloud/web/pull/8563
diff --git a/packages/design-system/docs/components/tokens/IconList.vue b/packages/design-system/docs/components/tokens/IconList.vue
index dbcc08cc4fe..f72e401dd07 100644
--- a/packages/design-system/docs/components/tokens/IconList.vue
+++ b/packages/design-system/docs/components/tokens/IconList.vue
@@ -46,19 +46,6 @@
       <template #danger="{ item }">
         <oc-icon :name="item.filename" :fill-type="item.fillType" size="large" variation="danger" />
       </template>
-      <template #inverse="{ item }">
-        <span
-          style="background-color: var(--oc-color-swatch-brand-default); display: inline-block"
-          class="oc-icon-l"
-        >
-          <oc-icon
-            :name="item.filename"
-            :fill-type="item.fillType"
-            size="large"
-            variation="inverse"
-          />
-        </span>
-      </template>
       <template #filename="{ item }">
         <highlighted-text :value="item.filename" :highlighted="query" />
       </template>
@@ -126,11 +113,6 @@ export default defineComponent({
           title: 'Danger',
           type: 'slot'
         },
-        {
-          name: 'inverse',
-          title: 'Inverse',
-          type: 'slot'
-        },
         {
           name: 'fillType',
           title: 'Fill type'
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 50f5e76e7f6..a1458bfab93 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -95,25 +95,29 @@ export default defineComponent({
     /**
      * Style variation to give additional meaning.
      * Defaults to `primary`.
-     * Can be `passive, primary, danger, success, warning`.
+     * Can be `passive, primary, danger, success, warning, brand`.
      */
     variation: {
       type: String,
       default: 'passive',
       validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning', 'inverse'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand'].includes(value)
       }
     },
     /**
      * Style variation to give additional meaning.
      * Defaults to `outline`.
-     * Can be `outline, filled, raw`.
+     * Can be `outline, filled, raw, raw-inverse` with following characteristics:
+     * - outline: transparent button with text- and border-color according to variation default-color
+     * - filled: button filled in variation default-color, text in variation contrast-color
+     * - raw: text-only button with text in variation default-color
+     * - raw-inverse: text-only button with text in variation contrast-color
      */
     appearance: {
       type: String,
       default: 'outline',
       validator: (value: string) => {
-        return ['filled', 'outline', 'raw'].includes(value)
+        return ['filled', 'outline', 'raw', 'raw-inverse'].includes(value)
       }
     },
     /**
@@ -193,9 +197,7 @@ export default defineComponent({
   line-height: $oc-size-icon-default * $factor;
 }
 
-@mixin oc-button-variation($color, $hover-color, $muted-color) {
-  background-color: $color;
-
+@mixin oc-button-variation($color, $hover-color, $muted-color, $contrast-color) {
   &:disabled {
     background-color: $muted-color;
   }
@@ -205,32 +207,51 @@ export default defineComponent({
     background-color: $hover-color;
   }
 
-  &-raw {
+  &-raw,
+  &-raw-inverse {
     background-color: transparent;
     border-style: none;
-    color: $color;
     font-size: var(--oc-font-size-medium);
     font-weight: normal;
     min-height: 0;
     padding: 0;
 
-    .oc-icon > svg {
-      fill: $color;
+    &:focus:not([disabled]),
+    &:hover:not([disabled]) {
+      background-color: transparent;
+    }
+
+    &:focus:not([disabled]):not(button),
+    &:hover:not([disabled]):not(button) {
+      text-decoration: underline;
     }
 
     &:disabled {
       background-color: transparent;
       color: $muted-color;
     }
+  }
+  &-raw {
+    color: $color;
 
-    &:focus:not([disabled]),
-    &:hover:not([disabled]) {
-      background-color: transparent;
+    .oc-icon > svg {
+      fill: $color;
     }
+  }
+  &-raw-inverse {
+    color: $contrast-color;
 
-    &:focus:not([disabled]):not(button),
-    &:hover:not([disabled]):not(button) {
-      text-decoration: underline;
+    .oc-icon > svg {
+      fill: $contrast-color;
+    }
+  }
+
+  &-filled {
+    background-color: $color;
+    color: $contrast-color;
+
+    .oc-icon > svg {
+      fill: $contrast-color;
     }
   }
 
@@ -252,12 +273,12 @@ export default defineComponent({
 
   &-outline:hover:not([disabled]),
   &-outline:focus:not([disabled]) {
-    color: var(--oc-color-text-inverse);
+    color: $contrast-color;
     background-color: $color;
     border-color: $color;
 
     .oc-icon > svg {
-      fill: var(--oc-color-text-inverse);
+      fill: $contrast-color;
     }
   }
 }
@@ -268,7 +289,6 @@ export default defineComponent({
   align-items: center;
   border: 0;
   box-sizing: border-box;
-  color: var(--oc-color-text-inverse);
   display: inline-flex;
   font-weight: 400;
   padding: 0.5rem 0.8rem;
@@ -348,15 +368,21 @@ export default defineComponent({
     min-height: 2rem;
   }
 
-  .oc-icon > svg {
-    fill: var(--oc-color-text-inverse);
-  }
-
   &-passive {
     @include oc-button-variation(
       var(--oc-color-swatch-passive-default),
       var(--oc-color-swatch-passive-hover),
-      var(--oc-color-swatch-passive-muted)
+      var(--oc-color-swatch-passive-muted),
+      var(--oc-color-swatch-passive-contrast)
+    );
+  }
+
+  &-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)
     );
   }
 
@@ -364,14 +390,15 @@ export default defineComponent({
     @include oc-button-variation(
       var(--oc-color-swatch-primary-default),
       var(--oc-color-swatch-primary-hover),
-      var(--oc-color-swatch-primary-muted)
+      var(--oc-color-swatch-primary-muted),
+      var(--oc-color-swatch-primary-contrast)
     );
     &-filled {
       @include oc-background-primary-gradient;
-      color: var(--oc-color-swatch-inverse-default) !important;
+      color: var(--oc-color-swatch-primary-contrast) !important;
 
       span > svg {
-        fill: var(--oc-color-swatch-inverse-default) !important;
+        fill: var(--oc-color-swatch-primary-contrast) !important;
       }
     }
   }
@@ -380,7 +407,8 @@ export default defineComponent({
     @include oc-button-variation(
       var(--oc-color-swatch-success-default),
       var(--oc-color-swatch-success-hover),
-      var(--oc-color-swatch-success-muted)
+      var(--oc-color-swatch-success-muted),
+      var(--oc-color-swatch-success-contrast)
     );
   }
 
@@ -388,7 +416,8 @@ export default defineComponent({
     @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-muted),
+      var(--oc-color-swatch-warning-contrast)
     );
   }
 
@@ -396,39 +425,9 @@ export default defineComponent({
     @include oc-button-variation(
       var(--oc-color-swatch-danger-default),
       var(--oc-color-swatch-danger-hover),
-      var(--oc-color-swatch-danger-muted)
-    );
-  }
-
-  &-inverse {
-    @include oc-button-variation(
-      var(--oc-color-swatch-inverse-default),
-      var(--oc-color-swatch-inverse-hover),
-      var(--oc-color-swatch-inverse-muted)
+      var(--oc-color-swatch-danger-muted),
+      var(--oc-color-swatch-danger-contrast)
     );
-
-    &:not([disabled]) {
-      color: var(--oc-color-swatch-brand-default);
-      .oc-icon-passive > svg {
-        fill: var(--oc-color-swatch-brand-default);
-      }
-    }
-
-    &-outline:not([disabled]),
-    &-raw:not([disabled]) {
-      color: var(--oc-color-swatch-inverse-default);
-      .oc-icon-passive > svg {
-        fill: var(--oc-color-swatch-inverse-default);
-      }
-    }
-
-    &-outline:hover:not([disabled]),
-    &-outline:focus:not([disabled]) {
-      color: var(--oc-color-swatch-brand-default);
-      .oc-icon-passive > svg {
-        fill: var(--oc-color-swatch-brand-default);
-      }
-    }
   }
 
   &:disabled {
@@ -611,10 +610,6 @@ export default {
         {
           title: "danger",
           description: "Use for triggering possible destructive and non-reversible actions, like permanently deleting a file"
-        },
-        {
-          title: "inverse",
-          description: "Use on a dark background"
         }
       ]
     },
@@ -622,7 +617,8 @@ export default {
       return [
         "outline",
         "filled",
-        "raw"
+        "raw",
+        "raw-inverse"
       ]
     },
   },
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 77248c8af35..4affe6029e3 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -179,20 +179,16 @@ export default defineComponent({
   &-checked,
   :checked,
   &:indeterminate {
-    background-color: var(--oc-color-swatch-inverse-default);
+    background-color: white;
   }
 
   &-checked,
   :checked {
-    @include svg-fill($internal-form-checkbox-image, '#000', $form-radio-checked-icon-color);
+    @include svg-fill($internal-form-checkbox-image, '#000', '#000');
   }
 
   &:indeterminate {
-    @include svg-fill(
-      $internal-form-checkbox-indeterminate-image,
-      '#000',
-      $form-radio-checked-icon-color
-    );
+    @include svg-fill($internal-form-checkbox-indeterminate-image, '#000', '#000');
   }
 
   &:disabled {
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 7da50cc563e..46a4e948663 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -133,14 +133,17 @@ export default defineComponent({
     /**
      * Style variation to give additional meaning.
      * Defaults to `passive`.
-     * Can be `passive, primary, danger, success, warning or inverse`.
-     * Inverse is meant to be used for icons on a colorful background.
+     * Can be `passive, primary, danger, success, warning, brand or inherit`.
+     * `inherit` will not set any color but instead rely on a container element already
+     * setting the icon fill.
      */
     variation: {
       type: String,
       default: 'passive',
       validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning', 'inverse'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand', 'inherit'].includes(
+          value
+        )
       }
     },
     /**
@@ -205,7 +208,6 @@ export default defineComponent({
 
   svg {
     display: block;
-    fill: var(--oc-color-swatch-passive-default);
   }
 
   &,
@@ -282,8 +284,8 @@ export default defineComponent({
     fill: var(--oc-color-swatch-danger-default);
   }
 
-  &-inverse > svg {
-    fill: var(--oc-color-text-inverse) !important;
+  &-brand > svg {
+    fill: var(--oc-color-swatch-brand-default);
   }
 }
 </style>
@@ -318,7 +320,7 @@ export default defineComponent({
       <oc-tbody>
         <oc-tr v-for="variation in variations" :key="'variation-' + variation.id">
           <oc-td>{{ variation.name }}</oc-td>
-          <oc-td v-bind:class="{'oc-background-brand': variation.name == 'inverse'}">
+          <oc-td>
             <oc-icon :variation="variation.name" name="close"/>
             <oc-icon :variation="variation.name" name="delete-bin-5"/>
             <oc-icon :variation="variation.name" name="information"/>
@@ -379,7 +381,7 @@ export default defineComponent({
           name: "warning",
         }, {
           id: "2324-8956-9042",
-          name: "inverse",
+          name: "brand",
         }]
       },
       sizes() {
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index 07317b9f93d..3d7ea9745f7 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -11,7 +11,7 @@
       <div v-if="title" class="oc-flex oc-flex-between info-header oc-border-b oc-pb-s">
         <span class="oc-m-rm info-title" v-text="$gettext(title)" />
         <oc-button appearance="raw">
-          <oc-icon name="close" fill-type="line" size="medium" />
+          <oc-icon name="close" fill-type="line" size="medium" variation="inherit" />
         </oc-button>
       </div>
       <p class="info-text" v-text="$gettext(text)" />
@@ -26,15 +26,14 @@
       <p v-if="endText" class="info-text-end" v-text="$gettext(endText)" />
       <oc-button
         v-if="readMoreLink"
-        v-translate
         type="a"
         appearance="raw"
         size="small"
         class="info-more-link"
         :href="readMoreLink"
         target="_blank"
-        >Read more</oc-button
-      >
+        v-text="$gettext('Read more')"
+      />
     </div>
   </oc-drop>
 </template>
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 9c0816f1d47..38d1bff2522 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -464,7 +464,7 @@ export default defineComponent({
     }
 
     > h2 {
-      color: var(--oc-color-swatch-inverse-default);
+      color: var(--oc-color-swatch-brand-contrast);
       font-size: 1rem;
       font-weight: bold;
       margin: 0;
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index b1040e5b24f..61eaa2475d6 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -50,8 +50,8 @@
     <oc-button
       v-if="showCancelButton"
       :variation="cancelButtonVariation"
+      :appearance="cancelButtonAppearance"
       class="oc-ml-m"
-      appearance="raw"
       @click="onCancel"
     >
       <span v-text="$gettext('Cancel')" />
@@ -203,7 +203,18 @@ export default defineComponent({
       required: false,
       default: 'primary',
       validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning', 'inverse'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand'].includes(value)
+      }
+    },
+    /**
+     * Appearance of the cancel button
+     */
+    cancelButtonAppearance: {
+      type: String,
+      required: false,
+      default: 'raw',
+      validator: (value: string) => {
+        return ['outline', 'filled', 'raw', 'raw-inverse'].includes(value)
       }
     },
     /**
@@ -294,7 +305,7 @@ export default defineComponent({
   &-button {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    // Prevend double borders
+    // Prevent double borders
     // from input and button
     transform: translateX(-1px);
     z-index: 0;
diff --git a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
index 36350738654..755bf36c2af 100644
--- a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
+++ b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
@@ -9,13 +9,13 @@
         class="oc-status-indicators-indicator oc-background-primary-gradient oc-p-xs oc-ml-xs"
         :aria-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
-        appearance="raw"
-        variation="inverse"
+        appearance="raw-inverse"
+        variation="primary"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
         @click="indicator.handler(resource, indicator.target, $router)"
       >
-        <oc-icon :name="indicator.icon" size="small" fill-type="line" />
+        <oc-icon :name="indicator.icon" size="small" fill-type="line" variation="inherit" />
       </oc-button>
       <oc-icon
         v-else
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index 3233c69884c..aae72246ba3 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -77,7 +77,7 @@ $form-datalist-icon-color: var(--oc-color-text-default) !default;
 $form-radio-background: var(--oc-color-background-muted) !default;
 
 $form-radio-checked-background: $oc-color-swatch-primary-default !default;
-$form-radio-checked-icon-color: var(--oc-color-input-border) !default;
+$form-radio-checked-icon-color: var(--oc-color-input-text-default) !default;
 
 $form-radio-checked-focus-background: $oc-color-swatch-primary-default !default;
 
diff --git a/packages/design-system/src/tokens/ods/color.yaml b/packages/design-system/src/tokens/ods/color.yaml
index 4296e9ae467..17733b456a8 100644
--- a/packages/design-system/src/tokens/ods/color.yaml
+++ b/packages/design-system/src/tokens/ods/color.yaml
@@ -21,6 +21,10 @@ color:
         value: rgb(4, 30, 66)
       hover:
         value: rgb(34, 57, 89)
+      muted:
+        value: rgb(0, 20, 40)
+      contrast:
+        value: "{color.text.inverse.value}"
     primary:
       default:
         value: rgb(74, 118, 172)
@@ -33,6 +37,8 @@ color:
         value: rgb(8, 105, 222)
       gradient:
         value: rgb(78, 133, 200)
+      contrast:
+        value: "{color.text.inverse.value}"
     success:
       default:
         value: rgb(79, 130, 47)
@@ -43,6 +49,8 @@ color:
         value: rgb(147, 224, 84)
       muted:
         value: rgb(83, 150, 10)
+      contrast:
+        value: "{color.text.inverse.value}"
     warning:
       default:
         value: rgb(198, 80, 27)
@@ -53,6 +61,8 @@ color:
         value: rgb(253, 169, 75)
       muted:
         value: rgb(179, 81, 0)
+      contrast:
+        value: "{color.text.inverse.value}"
     danger:
       default:
         value: rgb(224, 0, 0)
@@ -60,6 +70,8 @@ color:
         value: rgb(233, 100, 100)
       muted:
         value: rgb(181, 0, 0)
+      contrast:
+        value: "{color.text.inverse.value}"
     passive:
       default:
         value: rgb(76, 95, 121)
@@ -67,6 +79,8 @@ color:
         value: rgb(151, 162, 177)
       muted:
         value: rgb(40, 62, 93)
+      contrast:
+        value: "{color.text.inverse.value}"
     inverse:
       default:
         value: rgb(255, 255, 255)
@@ -74,6 +88,8 @@ color:
         value: rgb(255, 255, 255)
       muted:
         value: rgb(191, 191, 191)
+      contrast:
+        value: "{color.text.default.value}"
   background:
     default:
       value: rgb(255, 255, 255)
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index 8af8035da0d..933d9cc55fd 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -24,10 +24,10 @@
             <oc-button
               type="router-link"
               class="oc-my-xs shares-nav-mobile"
-              appearance="raw"
               :to="navItem.to"
               :class="{ 'oc-background-primary-gradient': navItem.active }"
-              :variation="navItem.active ? 'inverse' : 'passive'"
+              :appearance="navItem.active ? 'raw-inverse' : 'raw'"
+              :variation="navItem.active ? 'primary' : 'passive'"
             >
               <span class="icon-box" :class="{ 'icon-box-active': navItem.active }">
                 <oc-icon :name="navItem.icon" />
diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 5bee6b5ae52..7f3817bff2e 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -13,7 +13,12 @@
         :aria-label="$gettext(viewMode.label)"
         @click="setViewMode(viewMode)"
       >
-        <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />
+        <oc-icon
+          :name="viewMode.icon.name"
+          :fill-type="viewMode.icon.fillType"
+          size="small"
+          variation="inherit"
+        />
       </oc-button>
     </div>
     <oc-button
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 1346559c64f..fcb88482582 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -136,7 +136,7 @@
       />
     </template>
     <template #owner="{ item }">
-      <oc-button appearance="raw" variation="inverse" @click="openSharingSidebar(item)">
+      <oc-button appearance="raw-inverse" variation="passive" @click="openSharingSidebar(item)">
         <oc-avatars
           class="resource-table-people"
           :items="item.owner"
@@ -146,7 +146,7 @@
       </oc-button>
     </template>
     <template #sharedWith="{ item }">
-      <oc-button appearance="raw" variation="inverse" @click="openSharingSidebar(item)">
+      <oc-button appearance="raw-inverse" variation="passive" @click="openSharingSidebar(item)">
         <oc-avatars
           class="resource-table-people"
           :items="item.sharedWith"
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index eb36f0a3857..8353a96d8d5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -434,7 +434,7 @@ export default defineComponent({
       }
 
       &.selected {
-        color: var(--oc-color-swatch-inverse-default) !important;
+        color: var(--oc-color-swatch-passive-contrast) !important;
       }
     }
   }
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 2a318402de7..ca559011fbc 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
@@ -30,25 +30,25 @@
           <oc-button
             :id="`files-recipient-role-drop-btn-${role.name}`"
             ref="roleSelect"
-            appearance="raw"
             justify-content="space-between"
             class="files-recipient-role-drop-btn oc-p-s"
             :class="{
               'oc-background-primary-gradient': isSelectedRole(role),
               selected: isSelectedRole(role)
             }"
-            :variation="isSelectedRole(role) ? 'inverse' : 'passive'"
+            :appearance="isSelectedRole(role) ? 'raw-inverse' : 'raw'"
+            :variation="isSelectedRole(role) ? 'primary' : 'passive'"
             @click="selectRole(role)"
           >
             <span class="oc-flex oc-flex-middle">
-              <oc-icon :name="role.icon" class="oc-pl-s oc-pr-m" />
+              <oc-icon :name="role.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
               <role-item
                 :role="role"
                 :allow-share-permission="allowSharePermission && resharingDefault"
               />
             </span>
             <span class="oc-flex">
-              <oc-icon v-if="isSelectedRole(role)" name="check" />
+              <oc-icon v-if="isSelectedRole(role)" name="check" variation="inherit" />
             </span>
           </oc-button>
         </li>
@@ -272,7 +272,7 @@ export default defineComponent({
       this.publishChange()
     },
 
-    isSelectedRole(role) {
+    isSelectedRole(role: ShareRole) {
       return this.selectedRole.name === role.name
     },
 
@@ -367,15 +367,6 @@ export default defineComponent({
     width: 400px;
 
     &-list {
-      &:hover .files-recipient-role-drop-btn.selected:not(:hover),
-      &:focus .files-recipient-role-drop-btn.selected:not(:focus) {
-        color: var(--oc-color-swatch-passive-default);
-
-        ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-swatch-passive-default);
-        }
-      }
-
       li {
         margin: var(--oc-space-xsmall) 0;
       }
@@ -388,17 +379,8 @@ export default defineComponent({
       &:hover,
       &:focus {
         background-color: var(--oc-color-background-hover);
-        color: var(--oc-color-swatch-passive-default);
         text-decoration: none;
       }
-
-      &.selected {
-        color: var(--oc-color-swatch-inverse-default) !important;
-
-        ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-swatch-inverse-default) !important;
-        }
-      }
     }
   }
 
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index eb1b4cfdbf9..83ffceb5447 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -20,18 +20,15 @@
         mode="click"
       >
         <oc-list class="roleDropdownList">
-          <li
-            v-for="roleOption in availableRoleOptions"
-            :key="`role-dropdown-${roleOption.label.toLowerCase()}`"
-          >
+          <li v-for="roleOption in availableRoleOptions" :key="`role-dropdown-${roleOption.key}`">
             <oc-button
-              :id="`files-role-${roleOption.label.toLowerCase()}`"
+              :id="`files-role-${roleOption.name}`"
               :class="{
-                selected: link.permissions === roleOption.bitmask(false),
-                'oc-background-primary-gradient': link.permissions === roleOption.bitmask(false)
+                selected: isSelectedRole(roleOption),
+                'oc-background-primary-gradient': isSelectedRole(roleOption)
               }"
-              appearance="raw"
-              :variation="link.permissions === roleOption.bitmask(false) ? 'inverse' : 'passive'"
+              :appearance="isSelectedRole(roleOption) ? 'raw-inverse' : 'raw'"
+              :variation="isSelectedRole(roleOption) ? 'primary' : 'passive'"
               justify-content="space-between"
               class="oc-p-s"
               @click="
@@ -45,7 +42,7 @@
               "
             >
               <span class="oc-flex oc-flex-middle">
-                <oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" />
+                <oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
                 <span>
                   <span
                     class="oc-text-bold oc-display-block oc-width-1-1"
@@ -55,7 +52,7 @@
                 </span>
               </span>
               <span class="oc-flex">
-                <oc-icon v-if="link.permissions === roleOption.bitmask(false)" name="check" />
+                <oc-icon v-if="isSelectedRole(roleOption)" name="check" variation="inherit" />
               </span>
             </oc-button>
           </li>
@@ -402,6 +399,10 @@ export default defineComponent({
   methods: {
     ...mapActions(['createModal', 'hideModal', 'setModalInputErrorMessage']),
 
+    isSelectedRole(role: ShareRole) {
+      return this.link.permissions === role.bitmask(false)
+    },
+
     updateLink({
       link = this.link,
       dropRef = this.$refs.editPublicLinkDropdown,
@@ -503,17 +504,8 @@ export default defineComponent({
     &:hover,
     &:focus {
       background-color: var(--oc-color-background-hover);
-      color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
-
-    &.selected {
-      color: var(--oc-color-swatch-inverse-default) !important;
-
-      ::v-deep .oc-icon > svg {
-        fill: var(--oc-color-swatch-inverse-default) !important;
-      }
-    }
   }
 }
 
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index cd7ded8c89d..f0f1494c5eb 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -30,7 +30,7 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
     <oc-drop-stub closeonclick="true" dropid="oc-drop-1" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#shares_navigation_mobile">
       <oc-list-stub raw="false">
         <li>
-          <oc-button-stub appearance="raw" class="oc-my-xs shares-nav-mobile oc-background-primary-gradient" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="/files/shares/with-me/" type="router-link" variation="inverse">
+          <oc-button-stub appearance="raw-inverse" class="oc-my-xs shares-nav-mobile oc-background-primary-gradient" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="/files/shares/with-me/" type="router-link" variation="primary">
             <span class="icon-box icon-box-active">
               <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="share-forward" size="medium" type="span" variation="passive"></oc-icon-stub>
             </span>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
index 0eaa8c5b62a..b62a560c3b9 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/RoleDropdown.spec.ts.snap
@@ -9,20 +9,20 @@ exports[`RoleDropdown renders a button with existing role if given for resource
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-7" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
+        <oc-button-stub appearance="raw-inverse" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="primary">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -33,7 +33,7 @@ exports[`RoleDropdown renders a button with existing role if given for resource
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -79,20 +79,20 @@ exports[`RoleDropdown renders a button with existing role if given for resource
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-5" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
+        <oc-button-stub appearance="raw-inverse" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="primary">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -103,7 +103,7 @@ exports[`RoleDropdown renders a button with existing role if given for resource
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -149,20 +149,20 @@ exports[`RoleDropdown renders a button with invite text if no existing role give
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-3" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
+        <oc-button-stub appearance="raw-inverse" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="primary">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -173,7 +173,7 @@ exports[`RoleDropdown renders a button with invite text if no existing role give
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -213,20 +213,20 @@ exports[`RoleDropdown renders a button with invite text if no existing role give
   <oc-drop-stub class="files-recipient-role-drop" closeonclick="true" dropid="oc-drop-1" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#files-collaborators-role-button-new">
     <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list" raw="false">
       <li>
-        <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
+        <oc-button-stub appearance="raw-inverse" class="files-recipient-role-drop-btn oc-p-s oc-background-primary-gradient selected" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="primary">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
-            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
           </span>
         </oc-button-stub>
       </li>
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
@@ -237,7 +237,7 @@ exports[`RoleDropdown renders a button with invite text if no existing role give
       <li>
         <oc-button-stub appearance="raw" class="files-recipient-role-drop-btn oc-p-s" disabled="false" gapsize="medium" id="files-recipient-role-drop-btn-custom" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
           <span class="oc-flex oc-flex-middle">
-            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="settings-3" size="medium" type="span" variation="inherit"></oc-icon-stub>
             <role-item-stub allowsharepermission="true" role="[object Object]"></role-item-stub>
           </span>
           <span class="oc-flex">
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
index 9d154abbec3..0101614a3d9 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
@@ -12,7 +12,7 @@ exports[`DetailsAndEdit component if user can edit renders dropdown and edit but
         <li>
           <oc-button-stub appearance="raw" class="oc-p-s" disabled="false" gapsize="medium" id="files-role-internal" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
             <span class="oc-flex oc-flex-middle">
-              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="user" size="medium" type="span" variation="passive"></oc-icon-stub>
+              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="user" size="medium" type="span" variation="inherit"></oc-icon-stub>
               <span>
                 <span class="oc-text-bold oc-display-block oc-width-1-1">Internal</span>
                 <span class="oc-text-small">People need to be invited and login is required</span>
@@ -24,23 +24,23 @@ exports[`DetailsAndEdit component if user can edit renders dropdown and edit but
           </oc-button-stub>
         </li>
         <li>
-          <oc-button-stub appearance="raw" class="selected oc-background-primary-gradient oc-p-s" disabled="false" gapsize="medium" id="files-role-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="inverse">
+          <oc-button-stub appearance="raw-inverse" class="selected oc-background-primary-gradient oc-p-s" disabled="false" gapsize="medium" id="files-role-viewer" justifycontent="space-between" size="medium" submit="button" type="button" variation="primary">
             <span class="oc-flex oc-flex-middle">
-              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="passive"></oc-icon-stub>
+              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
               <span>
                 <span class="oc-text-bold oc-display-block oc-width-1-1">Viewer</span>
                 <span class="oc-text-small">Recipients can view and download contents.</span>
               </span>
             </span>
             <span class="oc-flex">
-              <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="passive"></oc-icon-stub>
+              <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
             </span>
           </oc-button-stub>
         </li>
         <li>
           <oc-button-stub appearance="raw" class="oc-p-s" disabled="false" gapsize="medium" id="files-role-editor" justifycontent="space-between" size="medium" submit="button" type="button" variation="passive">
             <span class="oc-flex oc-flex-middle">
-              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="passive"></oc-icon-stub>
+              <oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
               <span>
                 <span class="oc-text-bold oc-display-block oc-width-1-1">Editor</span>
                 <span class="oc-text-small">Recipients can view, download and edit contents.</span>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
index 869185c0b59..2a92c39ec9a 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceMembers.spec.ts.snap
@@ -46,7 +46,7 @@ exports[`SpaceMembers filter toggles the filter on click 1`] = `
                 <span class="oc-m-rm info-title">Add members to this Space</span>
                 <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" type="button">
                   <!-- @slot Content of the button -->
-                  <oc-icon-stub accessiblelabel="" color="" filltype="line" name="close" size="medium" type="span" variation="passive"></oc-icon-stub>
+                  <oc-icon-stub accessiblelabel="" color="" filltype="line" name="close" size="medium" type="span" variation="inherit"></oc-icon-stub>
                 </button>
               </div>
               <p class="info-text">Enter a name to add people or groups as members to this Space.</p>
@@ -57,9 +57,7 @@ exports[`SpaceMembers filter toggles the filter on click 1`] = `
                 <dd>Members with the Manager role can edit all properties and content of a Space, such as adding or removing members, sharing subfolders with non-members, or creating links to share.</dd>
               </dl>
               <!--v-if-->
-              <a class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw info-more-link" data-current-language="en" data-msgid="<!-- @slot Content of the button --> Read more" href="https://doc.owncloud.com/webui/next/owncloud_web/web_for_users.html#sharing" target="_blank">
-                <!-- @slot Content of the button --> Read more
-              </a>
+              <a class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw info-more-link" href="https://doc.owncloud.com/webui/next/owncloud_web/web_for_users.html#sharing" target="_blank">Read more</a>
             </div>
           </div>
         </div>
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index fd31922ab04..3471fef4e42 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -77,8 +77,7 @@
         <oc-button
           v-oc-tooltip="previousDescription"
           class="preview-controls-previous"
-          appearance="raw"
-          variation="inverse"
+          appearance="raw-inverse"
           :aria-label="previousDescription"
           @click="prev"
         >
@@ -91,8 +90,7 @@
         <oc-button
           v-oc-tooltip="nextDescription"
           class="preview-controls-next"
-          appearance="raw"
-          variation="inverse"
+          appearance="raw-inverse"
           :aria-label="nextDescription"
           @click="next"
         >
@@ -104,8 +102,7 @@
               isFullScreenModeActivated ? exitFullScreenDescription : enterFullScreenDescription
             "
             class="preview-controls-fullscreen"
-            appearance="raw"
-            variation="inverse"
+            appearance="raw-inverse"
             :aria-label="
               isFullScreenModeActivated ? exitFullScreenDescription : enterFullScreenDescription
             "
@@ -122,8 +119,7 @@
             <oc-button
               v-oc-tooltip="imageShrinkDescription"
               class="preview-controls-image-shrink"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageShrinkDescription"
               @click="imageShrink"
             >
@@ -132,8 +128,7 @@
             <oc-button
               v-oc-tooltip="imageOriginalSizeDescription"
               class="preview-controls-image-original-size oc-ml-s oc-mr-s"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageOriginalSizeDescription"
               @click="currentImageZoom = 1"
             >
@@ -142,8 +137,7 @@
             <oc-button
               v-oc-tooltip="imageZoomDescription"
               class="preview-controls-image-zoom"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageZoomDescription"
               @click="imageZoom"
             >
@@ -154,8 +148,7 @@
             <oc-button
               v-oc-tooltip="imageRotateLeftDescription"
               class="preview-controls-rotate-left"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageRotateLeftDescription"
               @click="imageRotateLeft"
             >
@@ -164,8 +157,7 @@
             <oc-button
               v-oc-tooltip="imageRotateRightDescription"
               class="preview-rotate-right"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageRotateRightDescription"
               @click="imageRotateRight"
             >
@@ -652,7 +644,7 @@ export default defineComponent({
 }
 
 .preview-controls-action-count {
-  color: var(--oc-color-swatch-inverse-default);
+  color: var(--oc-color-swatch-passive-contrast);
 }
 
 .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 2e1580ee0b0..84882998b5c 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -14,7 +14,8 @@
       :placeholder="searchLabel"
       :button-hidden="true"
       :show-cancel-button="showCancelButton"
-      cancel-button-variation="inverse"
+      cancel-button-variation="brand"
+      cancel-button-appearance="raw-inverse"
       :cancel-handler="cancelSearch"
       @input="updateTerm"
       @clear="onClear"
@@ -28,8 +29,8 @@
       v-oc-tooltip="$gettext('Display search bar')"
       :aria-label="$gettext('Click to display and focus the search bar')"
       class="mobile-search-btn oc-mr-s"
-      appearance="raw"
-      variation="inverse"
+      appearance="raw-inverse"
+      variation="brand"
       @click="showSearchBar"
     >
       <oc-icon name="search" fill-type="line"></oc-icon>
diff --git a/packages/web-client/src/helpers/share/role.ts b/packages/web-client/src/helpers/share/role.ts
index 480ad7215b6..6cd3580a6dd 100644
--- a/packages/web-client/src/helpers/share/role.ts
+++ b/packages/web-client/src/helpers/share/role.ts
@@ -194,7 +194,7 @@ export const peopleRoleDenyFolder = new PeopleShareRole(
   [SharePermissions.denied]
 )
 export const linkRoleInternalFile = new LinkShareRole(
-  'none',
+  'internal',
   false,
   $gettext('Internal'),
   $gettext('internal'),
@@ -202,7 +202,7 @@ export const linkRoleInternalFile = new LinkShareRole(
   [SharePermissions.internal]
 )
 export const linkRoleInternalFolder = new LinkShareRole(
-  'none',
+  'internal',
   true,
   $gettext('Internal'),
   $gettext('internal'),
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index 7d7bd55b9b3..329ae7d8d43 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -231,12 +231,6 @@ export default defineComponent({
       background-color: var(--oc-color-background-hover) !important;
     }
   }
-  &-input input {
-    border: 1px solid var(--oc-color-swatch-inverse-muted);
-  }
-  &-checkbox input {
-    border: 2px solid var(--oc-color-swatch-inverse-muted);
-  }
 }
 </style>
 
diff --git a/packages/web-pkg/src/components/LoadingIndicator.vue b/packages/web-pkg/src/components/LoadingIndicator.vue
index fa5e6cca792..aeec4d68d4a 100644
--- a/packages/web-pkg/src/components/LoadingIndicator.vue
+++ b/packages/web-pkg/src/components/LoadingIndicator.vue
@@ -61,7 +61,7 @@ export default defineComponent({
     height: 2px;
 
     &-primary div {
-      background-color: var(--oc-color-swatch-inverse-default);
+      background-color: var(--oc-color-swatch-primary-contrast);
     }
 
     &-indeterminate-first {
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index abcb7ac7c0c..58b423e459e 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -161,7 +161,7 @@ export default defineComponent({
   .oc-sidebar-nav li a.active {
     &:focus,
     &:hover {
-      color: var(--oc-color-swatch-inverse-default);
+      color: var(--oc-color-swatch-primary-contrast);
     }
   }
 }
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index d376c4224b8..61d90ada28b 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -7,15 +7,15 @@
     <oc-button
       v-oc-tooltip="toolTip"
       type="router-link"
-      appearance="raw"
-      :variation="active ? 'inverse' : 'passive'"
+      :appearance="active ? 'raw-inverse' : 'raw'"
+      :variation="active ? 'primary' : 'passive'"
       :class="['oc-sidebar-nav-item-link', { active: active }]"
       :to="target"
       :data-nav-id="index"
       :data-nav-name="navName"
     >
       <span class="oc-flex">
-        <oc-icon :name="icon" :fill-type="fillType" />
+        <oc-icon :name="icon" :fill-type="fillType" variation="inherit" />
         <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
       </span>
       <oc-tag v-if="tag" class="oc-py-rm" size="small">{{ tag }}</oc-tag>
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index c1dc89142b4..c0182f72800 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -8,8 +8,8 @@
       id="_appSwitcherButton"
       ref="menubutton"
       v-oc-tooltip="applicationSwitcherLabel"
-      appearance="raw"
-      variation="inverse"
+      appearance="raw-inverse"
+      variation="brand"
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
@@ -31,15 +31,15 @@
             :target="n.target"
             :href="n.url"
             :to="n.path"
-            appearance="raw"
+            :appearance="n.active ? 'raw-inverse' : 'raw'"
+            :variation="n.active ? 'primary' : 'passive'"
             :class="{ 'oc-background-primary-gradient router-link-active': n.active }"
-            :variation="n.active ? 'inverse' : 'passive'"
           >
             <span class="icon-box">
-              <oc-icon :name="n.icon" />
+              <oc-icon :name="n.icon" variation="inherit" />
             </span>
             <span v-text="$gettext(n.title)" />
-            <oc-icon v-if="n.active" name="check" class="active-check" />
+            <oc-icon v-if="n.active" name="check" class="active-check" variation="inherit" />
           </oc-button>
         </li>
       </oc-list>
@@ -96,10 +96,22 @@ export default defineComponent({
     justify-content: flex-start;
     width: 100%;
 
+    &.oc-button-primary-raw-inverse {
+      &:focus,
+      &:hover {
+        color: var(--oc-color-swatch-primary-contrast) !important;
+      }
+    }
+    &.oc-button-passive-raw {
+      &:focus,
+      &:hover {
+        color: var(--oc-color-swatch-passive-default) !important;
+      }
+    }
+
     &:focus,
     &:hover {
       background-color: var(--oc-color-background-hover);
-      color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
 
@@ -116,13 +128,5 @@ export default defineComponent({
       right: 1rem;
     }
   }
-
-  a.router-link-active,
-  button.router-link-active {
-    &:focus,
-    &:hover {
-      color: var(--oc-color-swatch-inverse-default);
-    }
-  }
 }
 </style>
diff --git a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
index eac161056d1..e083bd4481d 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"
-      variation="inverse"
+      appearance="raw-inverse"
+      variation="brand"
       :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 fb8594dc391..bb5b2b89092 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -2,8 +2,8 @@
   <oc-button
     id="oc-notifications-bell"
     v-oc-tooltip="notificationsLabel"
-    appearance="raw"
-    variation="inverse"
+    appearance="raw-inverse"
+    variation="brand"
     :aria-label="notificationsLabel"
   >
     <oc-icon
diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
index f965cd5d50e..0815659e7ef 100644
--- a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
@@ -3,12 +3,12 @@
     v-oc-tooltip="buttonLabel"
     class="themeswitcher-btn"
     :aria-label="buttonLabel"
-    appearance="raw"
-    variation="inverse"
+    appearance="raw-inverse"
+    variation="brand"
     @click="toggleTheme"
   >
     <span class="oc-visible@s" :aria-label="switchLabel" />
-    <oc-icon :name="switchIcon" fill-type="line" />
+    <oc-icon :name="switchIcon" fill-type="line" variation="inherit" />
   </oc-button>
 </template>
 <script lang="ts">
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 45a69ca25a1..5ecb39ed30f 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -8,8 +8,8 @@
         v-if="!filesInProgressCount"
         id="close-upload-info-btn"
         v-oc-tooltip="$gettext('Close')"
-        appearance="raw"
-        variation="inverse"
+        appearance="raw-inverse"
+        variation="brand"
         @click="closeInfo"
       >
         <oc-icon name="close" />
@@ -622,7 +622,7 @@ export default defineComponent({
   }
 
   .upload-info-title p {
-    color: var(--oc-color-swatch-inverse-default);
+    color: var(--oc-color-swatch-brand-contrast);
   }
 
   .oc-resource-indicators .parent-folder .text {
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap
index 9b0fecdab78..a4fb88f0dac 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ApplicationsMenu component should render navigation with button and menu items in dropdown 1`] = `
 <nav aria-label="Main navigation" class="oc-flex oc-flex-middle" id="applications-menu">
-  <oc-button-stub appearance="raw" arialabel="Application Switcher" class="oc-topbar-menu-burger" disabled="false" gapsize="medium" id="_appSwitcherButton" justifycontent="center" size="medium" submit="button" type="button" variation="inverse">
+  <oc-button-stub appearance="raw-inverse" arialabel="Application Switcher" class="oc-topbar-menu-burger" disabled="false" gapsize="medium" id="_appSwitcherButton" justifycontent="center" size="medium" submit="button" type="button" variation="brand">
     <oc-icon-stub accessiblelabel="" class="oc-flex" color="" filltype="fill" name="grid" size="large" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
   <oc-drop-stub closeonclick="true" dropid="app-switcher-dropdown" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#_appSwitcherButton">
@@ -10,7 +10,7 @@ exports[`ApplicationsMenu component should render navigation with button and men
       <li>
         <oc-button-stub appearance="raw" class="" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="/files" type="router-link" variation="passive">
           <span class="icon-box">
-            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="folder" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="folder" size="medium" type="span" variation="inherit"></oc-icon-stub>
           </span>
           <span>Files</span>
           <!--v-if-->
@@ -19,7 +19,7 @@ exports[`ApplicationsMenu component should render navigation with button and men
       <li>
         <oc-button-stub appearance="raw" class="" disabled="false" gapsize="medium" href="http://some.org" justifycontent="center" size="medium" submit="button" target="_blank" type="a" variation="passive">
           <span class="icon-box">
-            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="some-icon" size="medium" type="span" variation="passive"></oc-icon-stub>
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="some-icon" size="medium" type="span" variation="inherit"></oc-icon-stub>
           </span>
           <span>External</span>
           <!--v-if-->
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index 22f03052fdc..c3c7097b34b 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NotificationBell should match snapshot 1`] = `
-<button aria-label="Notifications" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" id="oc-notifications-bell" type="button">
+<button aria-label="Notifications" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse" id="oc-notifications-bell" type="button">
   <!-- @slot Content of the button -->
   <oc-icon-stub class="oc-cursor-pointer oc-flex oc-flex-middle" fill-type="line" name="notification-3"></oc-icon-stub>
   <!--v-if-->
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
index 8b2d63a078e..543cd195378 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
@@ -1,49 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThemeSwitcher component restores dark theme if dark theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
-  <oc-icon-stub fill-type="line" name="moon-clear"></oc-icon-stub>
+  <oc-icon-stub fill-type="line" name="moon-clear" variation="inherit"></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component restores light theme if light theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
-  <oc-icon-stub fill-type="line" name="sun"></oc-icon-stub>
+  <oc-icon-stub fill-type="line" name="sun" variation="inherit"></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in dark mode if user prefers dark color scheme 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
-  <oc-icon-stub fill-type="line" name="moon-clear"></oc-icon-stub>
+  <oc-icon-stub fill-type="line" name="moon-clear" variation="inherit"></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in light mode per default 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
-  <oc-icon-stub fill-type="line" name="sun"></oc-icon-stub>
+  <oc-icon-stub fill-type="line" name="sun" variation="inherit"></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
-  <oc-icon-stub fill-type="line" name="moon-clear"></oc-icon-stub>
+  <oc-icon-stub fill-type="line" name="moon-clear" variation="inherit"></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 2`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
-  <oc-icon-stub fill-type="line" name="sun"></oc-icon-stub>
+  <oc-icon-stub fill-type="line" name="sun" variation="inherit"></oc-icon-stub>
 </button>
 `;
diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json
index 8afe2d80966..6141d8deba2 100644
--- a/packages/web-runtime/themes/owncloud/theme.json
+++ b/packages/web-runtime/themes/owncloud/theme.json
@@ -35,25 +35,31 @@
           "input-text-muted": "#4c5f79",
           "swatch-brand-default": "#041e42",
           "swatch-brand-hover": "#223959",
+          "swatch-brand-contrast": "#ffffff",
           "swatch-danger-default": "#e00000",
           "swatch-danger-hover": "#e96464",
           "swatch-danger-muted": "#b50000",
+          "swatch-danger-contrast": "#ffffff",
           "swatch-inverse-default": "#ffffff",
           "swatch-inverse-hover": "#ffffff",
           "swatch-inverse-muted": "#bfbfbf",
           "swatch-passive-default": "#4c5f79",
           "swatch-passive-hover": "#97a2b1",
           "swatch-passive-muted": "#283e5d",
+          "swatch-passive-contrast": "#ffffff",
           "swatch-primary-default": "#4a76ac",
           "swatch-primary-hover": "#80a7d7",
           "swatch-primary-muted": "#2c588e",
           "swatch-primary-gradient": "#4e85c8",
+          "swatch-primary-contrast": "#ffffff",
           "swatch-success-default": "#4f822f",
           "swatch-success-hover": "#93e054",
           "swatch-success-muted": "#53960a",
+          "swatch-success-contrast": "#ffffff",
           "swatch-warning-default": "#c6501b",
           "swatch-warning-hover": "#fda94b",
           "swatch-warning-muted": "#b35100",
+          "swatch-warning-contrast": "#ffffff",
           "text-default": "#041e42",
           "text-inverse": "#ffffff",
           "text-muted": "#4c5f79",
@@ -104,31 +110,37 @@
           "background-hover": "#383838",
           "border": "#383838",
           "input-bg": "#4f4f4f",
-          "input-border": "#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-danger-default": "#d11d1c",
           "swatch-danger-hover": "",
           "swatch-danger-muted": "",
+          "swatch-danger-contrast": "#dadcdf",
           "swatch-inverse-default": "",
           "swatch-inverse-hover": "",
           "swatch-inverse-muted": "#696969",
           "swatch-passive-default": "#c2c2c2",
           "swatch-passive-hover": "",
           "swatch-passive-muted": "#bdbfc3",
+          "swatch-passive-contrast": "#000000",
           "swatch-primary-default": "#73b0f2",
           "swatch-primary-hover": "#7bafef",
           "swatch-primary-muted": "",
           "swatch-primary-gradient": "#4e85c8",
+          "swatch-primary-contrast": "#dadcdf",
           "swatch-success-default": "#04b253",
           "swatch-success-hover": "",
           "swatch-success-muted": "",
+          "swatch-success-contrast": "#000000",
           "swatch-warning-default": "",
           "swatch-warning-hover": "",
           "swatch-warning-muted": "",
-          "text-default": "#DADCDF",
+          "swatch-warning-contrast": "#000000",
+          "text-default": "#dadcdf",
           "text-inverse": "#000000",
           "text-muted": "#c2c2c2",
           "icon-folder": "rgb(44, 101, 255)",