From eb3411901716c0cdef679ae1c94fd2b8d6bc719d Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 13 Feb 2024 09:23:50 -0500 Subject: [PATCH] Additional theme updates/fixes, and beginning of component color udpates --- lib/KCheckbox.vue | 2 +- lib/buttons-and-links/KButton.vue | 14 +++++------ lib/buttons-and-links/KRouterLink.vue | 4 ++-- lib/buttons-and-links/buttonMixin.js | 8 +++---- lib/keen/UiTextbox.vue | 6 ++--- lib/styles/colorsDefault.js | 34 +++++++++++++++------------ lib/styles/colorsMaterial.js | 2 +- 7 files changed, 37 insertions(+), 33 deletions(-) diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue index d9f91f2ce..6be9ca655 100644 --- 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 index 808d3b2f8..6d99fa760 100644 --- 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 index 544a097f6..841691fd1 100644 --- 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" /> @@ -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" /> diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js index 2e26cb3a7..d69622d35 100644 --- 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 index 30360d103..8458c28b2 100644 --- 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 } : {}" > {{ label }} diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js index 1efcb9b02..7aaf445de 100644 --- 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,20 +40,13 @@ 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', @@ -59,4 +54,13 @@ export const defaultBrandColors = { 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 index b7c927615..8d7429af7 100644 --- 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',