[full-ci] feat: introduce contrast colors in swatches (#8563)

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

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"

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": ""

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

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

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'

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,30 +368,37 @@ 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)
     );
   }
 
   &-primary {
     @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,55 +407,27 @@ 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)
     );
   }
 
   &-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-muted),
+      var(--oc-color-swatch-warning-contrast)
     );
   }
 
   &-danger {
     @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,18 +610,15 @@ 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"
         }
       ]
     },
     appearances() {
       return [
         "outline",
         "filled",
-        "raw"
+        "raw",
+        "raw-inverse"
       ]
     },
   },