Additional theme updates/fixes, and beginning of component color udpates

marcellamaki · Feb 13, 2024 · eb34119 · eb34119
1 parent b0700e1
commit eb34119
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 33 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.primary,
+          fill: this.disabled ? this.$themeTokens.textDisabled : this.$themeTokens.secondary,
         };
       },
       activeOutline() {

diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
@@ -119,15 +119,15 @@
     computed: {
       iconColor() {
         if (this.appearance === 'basic-link') {
-          return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
+          return this.hovering ? this.$themeBrand.secondaryDark : this.$themeBrand.secondary;
         }
 
-        if (this.primary) {
+        if (this.secondary) {
           return this.appearance === 'raised-button'
-            ? this.$themeTokens.textInverted
-            : this.$themeTokens.primary;
+            ? this.$themeBrand.textInverted
+            : this.$themeBrand.secondary;
         } else {
-          return this.$themeTokens.text;
+          return this.$themeBrand.text;
         }
       },
       htmlTag() {
@@ -139,9 +139,9 @@
         return 'button';
       },
       arrowStyles() {
-        if (this.primary) {
+        if (this.secondary) {
           return {
-            fill: this.$themeTokens.textInverted,
+            fill: this.$themeBrand.textInverted,
           };
         }
         return {};

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.primaryDark : $themeTokens.primary"
+        :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
         data-test="icon-before"
       />
     </slot>
@@ -39,7 +39,7 @@
         v-if="iconAfter"
         :icon="iconAfter"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
         data-test="icon-after"
       />
     </slot>

diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
@@ -71,8 +71,8 @@ export default {
     primaryRaisedStyle() {
       return {
         color: $primaryRaisedColor,
-        backgroundColor: this.$themeTokens.primary,
-        ':hover': { backgroundColor: this.$themeTokens.primaryDark },
+        backgroundColor: this.$themeTokens.secondary,
+        ':hover': { backgroundColor: this.$themeTokens.secondaryDark },
         ':focus': { ...this.$coreOutline, outlineOffset: '6px' },
         ':disabled': Object.assign(
           {
@@ -90,14 +90,14 @@ export default {
     },
     primaryFlatStyle() {
       return {
-        color: this.$themeTokens.primary,
+        color: this.$themeTokens.secondary,
         ':hover': {
           backgroundColor: this.$themePalette.grey.v_300,
         },
         ':focus': { ...this.$coreOutline, outlineOffset: 0 },
         ':disabled': disabledStyle,
         svg: {
-          fill: this.$themeTokens.primary,
+          fill: this.$themeTokens.secondary,
         },
       };
     },

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.primaryDark } : {}"
+          :style="isActive ? { borderBottomColor: $themeTokens.secondaryDark } : {}"
           :tabindex="tabindex"
           :type="type"
           :value="value"
@@ -67,7 +67,7 @@
           :required="required"
 
           :rows="rows"
-          :style="isActive ? { borderBottomColor: $themeTokens.primaryDark } : {}"
+          :style="isActive ? { borderBottomColor: $themeTokens.secondary } : {}"
 
           :tabindex="tabindex"
 
@@ -84,7 +84,7 @@
           v-if="label || $slots.default"
           class="ui-textbox-label-text"
           :class="labelClasses"
-          :style="isActive ? { color: $themeTokens.primaryDark } : {}"
+          :style="isActive ? { color: $themeTokens.secondary } : {}"
         >
           <slot>{{ label }}</slot>
         </div>

diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js
@@ -2,19 +2,21 @@ export const defaultTokenMapping = {
   // Branded UI colors
   primary: 'brand.primary.v_1000',
   primaryDark: 'brand.primary.v_1100',
-  appBar: 'brand.secondary.v_800',
+  secondary: 'brand.secondary.v_1000',
+  secondaryDark: 'brand.secondary.v_1100',
+  appBar: 'brand.primary.v_800',
   appBarDark: 'palette.black',
-  link: 'brand.primary.v_1100',
-  loading: 'palette.gray.v_800',
+  link: 'brand.secondary.v_1100',
+  loading: 'palette.grey.v_800',
   focusOutline: 'palette.lightblue.v_800',
 
   // Generic UI colors
   text: 'palette.black',
-  textDisabled: 'palette.gray.v_200',
-  annotation: 'palette.gray.v_600',
+  textDisabled: 'palette.grey.v_200',
+  annotation: 'palette.grey.v_600',
   textInverted: 'palette.white',
   surface: 'palette.white',
-  fineLine: 'palette.gray.v_100',
+  fineLine: 'palette.grey.v_100',
 
   // general semantic colors
   error: 'palette.red.v_1100',
@@ -38,25 +40,27 @@ export const defaultTokenMapping = {
   explore: 'palette.orange.v_1000',
   create: 'palette.green.v_1000',
   reflect: 'brand.secondary.v_1000',
-  topic: 'palette.gray.v_800',
+  topic: 'palette.grey.v_800',
 };
 
 // set core brand colors
 export const defaultBrandColors = {
+  // yellows
   primary: {
-    v_200: '#D9E1FD',
-    v_400: '#B43FB',
-    v_600: '#8EA4F9',
-    v_800: '#6986F7',
-    v_1000: '#4368F5',
-    v_1100: '#2547F3',
-  },
-  secondary: {
     v_200: '#FFF5CC',
     v_400: '#FFEA99',
     v_600: '#FFE066',
     v_800: '#FFD553',
     v_1000: '#FFCB00',
     v_1100: '#E5B700',
   },
+  // blues
+  secondary: {
+    v_200: '#D9E1FD',
+    v_400: '#B43FB',
+    v_600: '#8EA4F9',
+    v_800: '#6986F7',
+    v_1000: '#4368F5',
+    v_1100: '#2547F3',
+  },
 };
diff --git a/lib/styles/colorsMaterial.js b/lib/styles/colorsMaterial.js
@@ -49,7 +49,7 @@ export default {
     v_1000: '#0097F2',
     v_1100: '#0079C2',
   },
-  gray: {
+  grey: {
     v_50: '#F5F5F5',
     v_100: '#E6E6E6',
     v_200: '#CCCCCC',