Update brand default colors and finalize token colors across KDS comp…

…onents
marcellamaki · Feb 15, 2024 · 7066760 · 7066760
1 parent eb34119
commit 7066760
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 34 deletions.
diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue
@@ -136,7 +136,7 @@
       },
       notBlank() {
         return {
-          fill: this.disabled ? this.$themeTokens.textDisabled : this.$themeTokens.secondary,
+          fill: this.disabled ? this.$themeTokens.textDisabled : this.$themeTokens.primary,
         };
       },
       activeOutline() {

diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
@@ -31,7 +31,7 @@
             :style="[
               (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first') ||
                 (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second') ?
-                  { backgroundColor: $themeBrand.secondary.v_50 } : {}
+                  { backgroundColor: $themeBrand.primary.v_200 } : {}
             ]"
             :class="[{
               'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
@@ -64,7 +64,7 @@
             :style="[
               (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first') ||
                 (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second') ?
-                  { backgroundColor: $themeBrand.secondary.v_50 } : {}
+                  { backgroundColor: $themeBrand.primary.v_200 } : {}
             ]"
             :class="[{
               'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),

diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue
@@ -69,7 +69,7 @@
       inRangeStyle() {
         return this.isInRange
           ? {
-              backgroundColor: this.$themeBrand.secondary.v_50,
+              backgroundColor: this.$themeBrand.primary.v_200,
               ':hover': {
                 backgroundColor: this.$themePalette.grey.v_200,
               },
@@ -79,7 +79,7 @@
       selectedStyle() {
         return this.isSelected
           ? {
-              backgroundColor: this.$themeBrand.secondary.v_600,
+              backgroundColor: this.$themeBrand.primary.v_1000,
               color: this.$themePalette.white + '!important',
             }
           : {};

diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
@@ -288,10 +288,10 @@
   .k-switch--color-primary {
     &.is-checked:not(.is-disabled) {
       .k-switch-track {
-        background-color: #a5d6a7;
+        background-color: #b4c3fb;
       }
       .k-switch-thumb {
-        background-color: #4caf50;
+        background-color: #4368f5;
       }
     }
   }

diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
@@ -119,7 +119,7 @@
     computed: {
       iconColor() {
         if (this.appearance === 'basic-link') {
-          return this.hovering ? this.$themeBrand.secondaryDark : this.$themeBrand.secondary;
+          return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
         }
 
         if (this.secondary) {

diff --git a/lib/buttons-and-links/KRouterLink.vue b/lib/buttons-and-links/KRouterLink.vue
@@ -21,7 +21,7 @@
         v-if="icon"
         :icon="icon"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
+        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
         data-test="icon-before"
       />
     </slot>

diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
@@ -63,16 +63,16 @@ export default {
     linkStyle() {
       return {
         color: this.$themeTokens.link,
-        ':hover': { color: this.$themeTokens.linkDark },
+        ':hover': { color: this.$themeTokens.primaryDark },
         ':focus': this.$coreOutline,
         ...(this.disabled ? disabledStyle : {}),
       };
     },
     primaryRaisedStyle() {
       return {
         color: $primaryRaisedColor,
-        backgroundColor: this.$themeTokens.secondary,
-        ':hover': { backgroundColor: this.$themeTokens.secondaryDark },
+        backgroundColor: this.$themeTokens.primary,
+        ':hover': { backgroundColor: this.$themeTokens.primaryDark },
         ':focus': { ...this.$coreOutline, outlineOffset: '6px' },
         ':disabled': Object.assign(
           {
@@ -90,9 +90,9 @@ export default {
     },
     primaryFlatStyle() {
       return {
-        color: this.$themeTokens.secondary,
+        color: this.$themeTokens.primary,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_300,
+          backgroundColor: this.$themePalette.grey.v_200,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,
@@ -104,9 +104,9 @@ export default {
     secondaryRaisedStyle() {
       return {
         color: this.$themeTokens.text,
-        backgroundColor: this.$themePalette.grey.v_200,
+        backgroundColor: this.$themePalette.grey.v_100,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_300,
+          backgroundColor: this.$themePalette.grey.v_200,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: '6px' },
         ':disabled': disabledStyle,
@@ -119,7 +119,7 @@ export default {
       return {
         color: this.$themeTokens.text,
         ':hover': {
-          backgroundColor: this.$themePalette.grey.v_300,
+          backgroundColor: this.$themePalette.grey.v_200,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,

diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue
@@ -36,7 +36,7 @@
           :readonly="readonly"
           :required="required"
           :step="stepValue"
-          :style="isActive ? { borderBottomColor: $themeTokens.secondaryDark } : {}"
+          :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
           :tabindex="tabindex"
           :type="type"
           :value="value"
@@ -67,7 +67,7 @@
           :required="required"
 
           :rows="rows"
-          :style="isActive ? { borderBottomColor: $themeTokens.secondary } : {}"
+          :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
 
           :tabindex="tabindex"
 
@@ -84,7 +84,7 @@
           v-if="label || $slots.default"
           class="ui-textbox-label-text"
           :class="labelClasses"
-          :style="isActive ? { color: $themeTokens.secondary } : {}"
+          :style="isActive ? { color: $themeTokens.primaryDark } : {}"
         >
           <slot>{{ label }}</slot>
         </div>

diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js
@@ -4,9 +4,9 @@ export const defaultTokenMapping = {
   primaryDark: 'brand.primary.v_1100',
   secondary: 'brand.secondary.v_1000',
   secondaryDark: 'brand.secondary.v_1100',
-  appBar: 'brand.primary.v_800',
+  appBar: 'brand.secondary.v_800',
   appBarDark: 'palette.black',
-  link: 'brand.secondary.v_1100',
+  link: 'brand.primary.v_1000',
   loading: 'palette.grey.v_800',
   focusOutline: 'palette.lightblue.v_800',
 
@@ -45,22 +45,22 @@ export const defaultTokenMapping = {
 
 // set core brand colors
 export const defaultBrandColors = {
-  // yellows
-  primary: {
-    v_200: '#FFF5CC',
-    v_400: '#FFEA99',
-    v_600: '#FFE066',
-    v_800: '#FFD553',
-    v_1000: '#FFCB00',
-    v_1100: '#E5B700',
-  },
   // blues
-  secondary: {
+  primary: {
     v_200: '#D9E1FD',
     v_400: '#B43FB',
     v_600: '#8EA4F9',
     v_800: '#6986F7',
     v_1000: '#4368F5',
     v_1100: '#2547F3',
   },
+  // yellows
+  secondary: {
+    v_200: '#FFF5CC',
+    v_400: '#FFEA99',
+    v_600: '#FFE066',
+    v_800: '#FFD533',
+    v_1000: '#FFCB00',
+    v_1100: '#E5B700',
+  },
 };
diff --git a/lib/tabs/KTabsList.vue b/lib/tabs/KTabsList.vue
@@ -128,7 +128,7 @@
           : this.$themeTokens.surface;
         const hoverBackgroundColor = this.hoverBackgroundColor
           ? this.hoverBackgroundColor
-          : this.$themePalette.grey.v_300;
+          : this.$themeBrand.primary.v_200;
         return {
           color,
           backgroundColor,

diff --git a/lib/tabs/tabsMixin.js b/lib/tabs/tabsMixin.js
@@ -73,7 +73,7 @@ export default {
     },
     /**
      * Tabs hover background color.
-     * Defaults to `$themePalette.grey.v_300`.
+     * Defaults to `$themeBrand.primary.v_200`.
      */
     hoverBackgroundColor: {
       type: String,