refactor: colors to tailwind

packages/design-system/docs/components/OcFilterChip/default.vue

@@ -13,7 +13,7 @@
         size="medium"
         justify-content="space-between"
         class="flex items-center oc-width-1-1 py-1 px-2"
-        :class="{ 'oc-secondary-container': option.id === selectedOption?.id }"
+        :class="{ 'bg-role-secondary-container': option.id === selectedOption?.id }"
         @click="selectOption(option)"
       >
         <span>{{ option.label }}</span>

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

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="oc-avatar-count flex justify-center items-center"
+    class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary"
     :style="{ width: size + 'px', height: size + 'px', fontSize: fontSize }"
     v-text="`+${count}`"
   />
@@ -30,9 +30,7 @@ const fontSize = computed(() => {
 
 <style lang="scss">
 .oc-avatar-count {
-  background-color: var(--oc-role-secondary);
   border-radius: 50%;
-  color: var(--oc-role-on-secondary);
   border: 1px solid var(--oc-role-outline-variant);
 }
 </style>

packages/design-system/src/components/OcAvatarCount/__snapshots__/OcAvatarCount.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatarCount > dynamically calculates font size 1`] = `"<span class="oc-avatar-count flex justify-center items-center" style="width: 100px; height: 100px; font-size: 40px;">+2</span>"`;
+exports[`OcAvatarCount > dynamically calculates font size 1`] = `"<span class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary" style="width: 100px; height: 100px; font-size: 40px;">+2</span>"`;

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

@@ -7,13 +7,13 @@
     <div
       v-if="isOpen"
       ref="bottomDrawerRef"
-      class="oc-bottom-drawer-background"
+      class="oc-bottom-drawer-background bg-black/40"
       role="button"
       @click="onBackgroundClicked"
     >
       <focus-trap>
-        <div :id="drawerId" class="oc-bottom-drawer">
-          <div class="oc-card">
+        <div :id="drawerId" class="oc-bottom-drawer bg-role-surface-container-high">
+          <div class="oc-card bg-transparent">
             <div class="oc-card-header px-4 pt-4">
               <div class="flex justify-between items-center">
                 <oc-button
@@ -249,13 +249,12 @@ defineExpose({ show, hide, getElement })
 @layer utilities {
   .oc-bottom-drawer ul {
     /* overwrite default list styling */
-    @apply p-2;
+    @apply p-2 bg-role-surface;
   }
 }
 </style>
 <style lang="scss">
 .oc-bottom-drawer-background {
-  background-color: #0006;
   height: 100%;
   width: 100% !important;
   left: 0;
@@ -272,7 +271,6 @@ defineExpose({ show, hide, getElement })
   max-height: 66vh;
   width: 100%;
   overflow-y: auto;
-  background-color: var(--oc-role-surface-container-high);
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   transition: all 0.2s;
@@ -283,15 +281,12 @@ defineExpose({ show, hide, getElement })
   }
 
   .oc-card {
-    background-color: unset !important;
-
     &-header {
       border-bottom: 0 !important;
     }
 
     &-body {
       ul {
-        background-color: var(--oc-role-surface) !important;
         border-radius: 10px;
       }
     }

packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap

@@ -3,9 +3,9 @@
 exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
 "<div drawerid="button-drawer" toggle="#button-drawer-toggle" title="Bottom Drawer" closeonclick="false"><button id="button-drawer-toggle">Toggle Drawer</button>
   <div>
-    <div class="oc-bottom-drawer-background" role="button">
-      <div id="button-drawer" class="oc-bottom-drawer active">
-        <div class="oc-card">
+    <div class="oc-bottom-drawer-background bg-black/40" role="button">
+      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high active">
+        <div class="oc-card bg-transparent">
           <div class="oc-card-header px-4 pt-4">
             <div class="flex justify-between items-center">
               <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">

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

@@ -31,7 +31,7 @@
           v-if="item.to"
           :aria-current="getAriaCurrent(index)"
           :to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
-          class="first:text-base text-xl"
+          class="first:text-base text-xl text-role-on-surface"
         >
           <span
             class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]"
@@ -41,7 +41,8 @@
         <oc-button
           v-else-if="item.onClick"
           :aria-current="getAriaCurrent(index)"
-          appearance="raw"
+          appearance="raw-inverse"
+          color-role="surface"
           class="flex first:text-base text-xl"
           no-hover
           @click="item.onClick"
@@ -307,7 +308,18 @@ const dropItemStyling = (
   leaving ? classList.remove(className) : classList.add(className)
 }
 </script>
+<style>
+@reference '@opencloud-eu/design-system/tailwind';
 
+@layer components {
+  .oc-breadcrumb-item-dragover {
+    @apply bg-role-secondary-container;
+  }
+  .oc-breadcrumb-list > :nth-child(n + 2)::before {
+    @apply text-role-on-surface;
+  }
+}
+</style>
 <style lang="scss">
 .oc-breadcrumb {
   overflow: visible;
@@ -317,7 +329,6 @@ const dropItemStyling = (
       border 0s 0.08s,
       border-color 0s,
       border-width 0.06s;
-    background-color: var(--oc-role-secondary-container);
     box-shadow: 0 0 0 5px var(--oc-role-secondary-container);
     border-radius: 5px;
   }
@@ -354,22 +365,8 @@ const dropItemStyling = (
     }
 
     > :nth-child(n + 2)::before {
-      color: var(--oc-role-on-surface);
       display: inline-block;
     }
-
-    > :last-child > span {
-      color: var(--oc-role-on-surface);
-    }
-  }
-
-  /* stylelint-disable */
-  &-list-item {
-    a:first-of-type,
-    button:first-of-type,
-    span:first-of-type {
-      color: var(--oc-role-on-surface);
-    }
   }
 }
 </style>

packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap

@@ -4,22 +4,22 @@ exports[`OcBreadcrumb > displays all items 1`] = `
 "<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default" aria-label="Breadcrumbs">
   <ol class="oc-breadcrumb-list flex m-0 p-0">
     <li data-key="0" class="oc-breadcrumb-list-item flex items-center">
-      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">First folder</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center oc-invisible-sr">
-      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">...</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">...</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="2" class="oc-breadcrumb-list-item flex items-center">
-      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Subfolder</span></oc-button-stub>
+      <oc-button-stub appearance="raw-inverse" colorrole="surface" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Subfolder</span></oc-button-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="3" class="oc-breadcrumb-list-item flex items-center">
-      <router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Deep</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl text-role-on-surface"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Deep</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
@@ -40,22 +40,22 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
 "<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead" aria-label="Breadcrumbs">
   <ol class="oc-breadcrumb-list flex m-0 p-0">
     <li data-key="0" class="oc-breadcrumb-list-item flex items-center">
-      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">First folder</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center oc-invisible-sr">
-      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">...</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">...</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="2" class="oc-breadcrumb-list-item flex items-center">
-      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Subfolder</span></oc-button-stub>
+      <oc-button-stub appearance="raw-inverse" colorrole="surface" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Subfolder</span></oc-button-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="3" class="oc-breadcrumb-list-item flex items-center">
-      <router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Deep</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl text-role-on-surface"><span class="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">Deep</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>

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

@@ -400,4 +400,11 @@ const onClick = (event: MouseEvent) => {
     }
   }
 }
+.quick-action-button,
+.raw-hover-surface {
+  &:hover {
+    // overwrite default hover with an inverted one for buttons on backgrounds that have the default hover color
+    background-color: var(--oc-role-surface) !important;
+  }
+}
 </style>

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

@@ -75,7 +75,12 @@ const classes = computed(() => [
   'oc-rounded',
   'oc-checkbox-' + getSizeClass(size),
   { 'oc-checkbox-checked': isChecked.value },
-  'm-0.5'
+  { 'bg-white': isChecked.value },
+  'm-0.5',
+  'checked:bg-white',
+  'disabled:bg-role-surface-container-low',
+  'indeterminate:bg-white',
+  'bg-transparent'
 ])
 
 const labelClasses = computed(() => ({
@@ -120,7 +125,6 @@ const keydownEnter = (event: KeyboardEvent) => {
   border: 2px solid var(--oc-role-outline);
   display: inline-block;
   overflow: hidden;
-  background-color: transparent;
   outline: none;
 
   &-s {
@@ -143,12 +147,6 @@ const keydownEnter = (event: KeyboardEvent) => {
     outline: var(--oc-role-secondary) auto 1px;
   }
 
-  &-checked,
-  :checked,
-  &:indeterminate {
-    background-color: white;
-  }
-
   &-checked,
   :checked {
     @include svg-fill($internal-form-checkbox-image, '#000', '#000');
@@ -159,7 +157,6 @@ const keydownEnter = (event: KeyboardEvent) => {
   }
 
   &:disabled {
-    background-color: $form-radio-disabled-background;
     cursor: default;
     opacity: 0.4;
   }

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

@@ -3,7 +3,7 @@
     <slot name="label">
       <label class="oc-label" :for="id">
         {{ label }}
-        <span v-if="requiredMark" class="oc-text-error" aria-hidden="true">*</span>
+        <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
     </slot>
     <div class="oc-color-input-wrapper oc-position-relative">
@@ -14,7 +14,7 @@
         :aria-invalid="ariaInvalid"
         class="oc-color-input oc-input oc-rounded py-0.5"
         :class="{
-          'oc-color-input-danger': !!errorMessage,
+          'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage,
           'pr-6': showClearButton
         }"
         :value="modelValue"
@@ -36,8 +36,8 @@
       v-if="showMessageLine"
       class="oc-color-input-message flex items-center text-sm mt-1"
       :class="{
-        'oc-color-input-description': !!descriptionMessage,
-        'oc-color-input-danger': !!errorMessage
+        'oc-color-input-description text-role-on-surface-variant': !!descriptionMessage,
+        'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
       }"
     >
       <oc-icon
@@ -52,8 +52,9 @@
       <span
         :id="messageId"
         :class="{
-          'oc-color-input-description flex items-center': !!descriptionMessage,
-          'oc-color-input-danger': !!errorMessage
+          'oc-color-input-description text-role-on-surface-variant flex items-center':
+            !!descriptionMessage,
+          'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
         }"
         v-text="messageText"
       />
@@ -214,13 +215,8 @@ const onInput = (value: string) => {
     outline: 2px solid var(--oc-role-outline) !important;
   }
 
-  &-description {
-    color: var(--oc-role-on-surface-variant);
-  }
-
   &-danger,
   &-danger:focus {
-    border-color: var(--oc-role-error) !important;
     color: var(--oc-role-error) !important;
   }