fix: introduce contrast colors in owncloud/theme.json

The token fallback values are only calculated during build time. They are not relevant / evaluated when we set new colors to the css vars later on. Reason for that is simply that css vars can't reference other css vars but need their own value instead.
owncloud · Mar 14, 2023 · f5c575f · f5c575f
1 parent 428a87e
commit f5c575f
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -273,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;
     }
   }
 }

diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -133,13 +133,17 @@ export default defineComponent({
     /**
      * Style variation to give additional meaning.
      * Defaults to `passive`.
-     * Can be `passive, primary, danger, success, warning or brand`.
+     * 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', 'brand'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand', 'inherit'].includes(
+          value
+        )
       }
     },
     /**

diff --git 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-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-passive-contrast);
+      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
@@ -8,6 +8,7 @@
       v-oc-tooltip="toolTip"
       type="router-link"
       :appearance="active ? 'raw-inverse' : 'raw'"
+      :variation="active ? 'primary' : 'passive'"
       :class="['oc-sidebar-nav-item-link', { active: active }]"
       :to="target"
       :data-nav-id="index"

diff --git 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",
@@ -109,26 +115,32 @@
           "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)",