feat: introduce contrast colors in swatches

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"

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;
     }
   }
 
@@ -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"
       ]
     },
   },

packages/design-system/src/components/OcCheckbox/OcCheckbox.vue

@@ -184,7 +184,7 @@ export default defineComponent({
   &-checked,
   :checked,
   &:indeterminate {
-    background-color: var(--oc-color-swatch-inverse-default);
+    background-color: var(--oc-color-swatch-passive-contrast);
   }
 
   &-checked,

packages/design-system/src/components/OcIcon/OcIcon.vue

@@ -133,14 +133,13 @@ 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 or 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)
       }
     },
     /**
@@ -205,7 +204,6 @@ export default defineComponent({
 
   svg {
     display: block;
-    fill: var(--oc-color-swatch-passive-default);
   }
 
   &,
@@ -282,8 +280,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 +316,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 +377,7 @@ export default defineComponent({
           name: "warning",
         }, {
           id: "2324-8956-9042",
-          name: "inverse",
+          name: "brand",
         }]
       },
       sizes() {

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;

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;