From b0700e19715aed8e5439372e44c7aaa96f461bc8 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 4 Jul 2023 14:54:44 -0400 Subject: [PATCH 1/5] init theming updates --- lib/KBreadcrumbs.vue | 1 + lib/styles/colorsDefault.js | 92 +++++----- lib/styles/colorsMaterial.js | 332 +++++------------------------------ lib/styles/theme.js | 1 + 4 files changed, 92 insertions(+), 334 deletions(-) diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue index 72c746152..7c61c22ff 100644 --- a/lib/KBreadcrumbs.vue +++ b/lib/KBreadcrumbs.vue @@ -300,6 +300,7 @@ .breadcrumbs-crumb-text { display: inline-block; width: 100%; + font-size: 100px; max-width: $crumb-max-width; overflow: hidden; text-overflow: ellipsis; diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js index 0dabcc0a8..1efcb9b02 100644 --- a/lib/styles/colorsDefault.js +++ b/lib/styles/colorsDefault.js @@ -1,70 +1,62 @@ export const defaultTokenMapping = { // Branded UI colors - primary: 'brand.primary.v_400', - primaryDark: 'brand.primary.v_700', - appBar: 'brand.primary.v_400', - appBarDark: 'brand.primary.v_700', - appBarFullscreen: 'palette.grey.v_900', - appBarFullscreenDark: 'black', - link: 'brand.primary.v_400', - linkDark: 'brand.primary.v_700', - loading: 'brand.secondary.v_200', - focusOutline: 'brand.secondary.v_200', + primary: 'brand.primary.v_1000', + primaryDark: 'brand.primary.v_1100', + appBar: 'brand.secondary.v_800', + appBarDark: 'palette.black', + link: 'brand.primary.v_1100', + loading: 'palette.gray.v_800', + focusOutline: 'palette.lightblue.v_800', // Generic UI colors - text: 'palette.grey.v_900', - textDisabled: 'palette.grey.v_300', - annotation: 'palette.grey.v_700', + text: 'palette.black', + textDisabled: 'palette.gray.v_200', + annotation: 'palette.gray.v_600', textInverted: 'palette.white', surface: 'palette.white', - fineLine: '#dedede', + fineLine: 'palette.gray.v_100', // general semantic colors - error: 'palette.red.v_800', - success: 'palette.green.v_700', + error: 'palette.red.v_1100', + incorrect: 'palette.red.v_1100', + success: 'palette.green.v_1100', + correct: 'palette.green.v_1100', // Kolibri-specific semantic colors - progress: 'palette.lightblue.v_500', - mastered: 'palette.amber.v_500', - correct: 'palette.green.v_600', - incorrect: 'palette.red.v_800', - coachContent: 'palette.lightblue.v_800', - superAdmin: 'palette.amber.v_600', + progress: 'palette.lightblue.v_1000', + mastered: 'brand.secondary.v_1000', + warning: 'brand.secondary.v_1000', + incomplete: 'brand.secondary.v_1000', + coachContent: 'palette.lightblue.v_1100', + superAdmin: 'brand.secondary.v_1000', // content colors - exercise: 'palette.cyan.v_600', - video: 'palette.indigo.v_700', - audio: 'palette.pink.v_400', - document: 'palette.deeporange.v_600', - html5: 'palette.yellow.v_800', - topic: 'palette.grey.v_800', - slideshow: 'palette.green.v_400', + practice: 'brand.primary.v_800', + watch: 'palette.lightblue.v_800', + listen: 'palette.pink.v_1000', + read: 'palette.red.v_1000', + explore: 'palette.orange.v_1000', + create: 'palette.green.v_1000', + reflect: 'brand.secondary.v_1000', + topic: 'palette.gray.v_800', }; -// set some arbitrary colors +// set core brand colors export const defaultBrandColors = { primary: { - v_50: '#f0e7ed', - v_100: '#dbc3d4', - v_200: '#c59db9', - v_300: '#ac799d', - v_400: '#996189', - v_500: '#874e77', - v_600: '#7c4870', - v_700: '#6e4167', - v_800: '#5f3b5c', - v_900: '#4b2e4d', + v_200: '#D9E1FD', + v_400: '#B43FB', + v_600: '#8EA4F9', + v_800: '#6986F7', + v_1000: '#4368F5', + v_1100: '#2547F3', }, secondary: { - v_50: '#e3f0ed', - v_100: '#badbd2', - v_200: '#8dc5b6', - v_300: '#62af9a', - v_400: '#479e86', - v_500: '#368d74', - v_600: '#328168', - v_700: '#2c715a', - v_800: '#26614d', - v_900: '#1b4634', + v_200: '#FFF5CC', + v_400: '#FFEA99', + v_600: '#FFE066', + v_800: '#FFD553', + v_1000: '#FFCB00', + v_1100: '#E5B700', }, }; diff --git a/lib/styles/colorsMaterial.js b/lib/styles/colorsMaterial.js index fea746e01..b7c927615 100644 --- a/lib/styles/colorsMaterial.js +++ b/lib/styles/colorsMaterial.js @@ -2,295 +2,59 @@ export default { black: '#000000', white: '#ffffff', red: { - v_50: '#ffebee', - v_100: '#ffcdd2', - v_200: '#ef9a9a', - v_300: '#e57373', - v_400: '#ef5350', - v_500: '#f44336', - v_600: '#e53935', - v_700: '#d32f2f', - v_800: '#c62828', - v_900: '#b71c1c', - v_a100: '#ff8a80', - v_a200: '#ff5252', - v_a400: '#ff1744', - v_a700: '#d50000', - }, - pink: { - v_50: '#fce4ec', - v_100: '#f8bbd0', - v_200: '#f48fb1', - v_300: '#f06292', - v_400: '#ec407a', - v_500: '#e91e63', - v_600: '#d81b60', - v_700: '#c2185b', - v_800: '#ad1457', - v_900: '#880e4f', - v_a100: '#ff80ab', - v_a200: '#ff4081', - v_a400: '#f50057', - v_a700: '#c51162', - }, - purple: { - v_50: '#f3e5f5', - v_100: '#e1bee7', - v_200: '#ce93d8', - v_300: '#ba68c8', - v_400: '#ab47bc', - v_500: '#9c27b0', - v_600: '#8e24aa', - v_700: '#7b1fa2', - v_800: '#6a1b9a', - v_900: '#4a148c', - v_a100: '#ea80fc', - v_a200: '#e040fb', - v_a400: '#d500f9', - v_a700: '#aa00ff', - }, - deeppurple: { - v_50: '#ede7f6', - v_100: '#d1c4e9', - v_200: '#b39ddb', - v_300: '#9575cd', - v_400: '#7e57c2', - v_500: '#673ab7', - v_600: '#5e35b1', - v_700: '#512da8', - v_800: '#4527a0', - v_900: '#311b92', - v_a100: '#b388ff', - v_a200: '#7c4dff', - v_a400: '#651fff', - v_a700: '#6200ea', - }, - indigo: { - v_50: '#e8eaf6', - v_100: '#c5cae9', - v_200: '#9fa8da', - v_300: '#7986cb', - v_400: '#5c6bc0', - v_500: '#3f51b5', - v_600: '#3949ab', - v_700: '#303f9f', - v_800: '#283593', - v_900: '#1a237e', - v_a100: '#8c9eff', - v_a200: '#536dfe', - v_a400: '#3d5afe', - v_a700: '#304ffe', - }, - blue: { - v_50: '#e3f2fd', - v_100: '#bbdefb', - v_200: '#90caf9', - v_300: '#64b5f6', - v_400: '#42a5f5', - v_500: '#2196f3', - v_600: '#1e88e5', - v_700: '#1976d2', - v_800: '#1565c0', - v_900: '#0d47a1', - v_a100: '#82b1ff', - v_a200: '#448aff', - v_a400: '#2979ff', - v_a700: '#2962ff', - }, - lightblue: { - v_50: '#e1f5fe', - v_100: '#b3e5fc', - v_200: '#81d4fa', - v_300: '#4fc3f7', - v_400: '#29b6f6', - v_500: '#03a9f4', - v_600: '#039be5', - v_700: '#0288d1', - v_800: '#0277bd', - v_900: '#01579b', - v_a100: '#80d8ff', - v_a200: '#40c4ff', - v_a400: '#00b0ff', - v_a700: '#0091ea', - }, - cyan: { - v_50: '#e0f7fa', - v_100: '#b2ebf2', - v_200: '#80deea', - v_300: '#4dd0e1', - v_400: '#26c6da', - v_500: '#00bcd4', - v_600: '#00acc1', - v_700: '#0097a7', - v_800: '#00838f', - v_900: '#006064', - v_a100: '#84ffff', - v_a200: '#18ffff', - v_a400: '#00e5ff', - v_a700: '#00b8d4', - }, - teal: { - v_50: '#e0f2f1', - v_100: '#b2dfdb', - v_200: '#80cbc4', - v_300: '#4db6ac', - v_400: '#26a69a', - v_500: '#009688', - v_600: '#00897b', - v_700: '#00796b', - v_800: '#00695c', - v_900: '#004d40', - v_a100: '#a7ffeb', - v_a200: '#64ffda', - v_a400: '#1de9b6', - v_a700: '#00bfa5', + v_200: '#FFD9D3', + v_400: '#FFB4A7', + v_600: '#FF8E7C', + v_800: '#FF6950', + v_1000: '#FF4324', + v_1100: '#D21E00', }, green: { - v_50: '#e8f5e9', - v_100: '#c8e6c9', - v_200: '#a5d6a7', - v_300: '#81c784', - v_400: '#66bb6a', - v_500: '#4caf50', - v_600: '#43a047', - v_700: '#388e3c', - v_800: '#2e7d32', - v_900: '#1b5e20', - v_a100: '#b9f6ca', - v_a200: '#69f0ae', - v_a400: '#00e676', - v_a700: '#00c853', - }, - lightgreen: { - v_50: '#f1f8e9', - v_100: '#dcedc8', - v_200: '#c5e1a5', - v_300: '#aed581', - v_400: '#9ccc65', - v_500: '#8bc34a', - v_600: '#7cb342', - v_700: '#689f38', - v_800: '#558b2f', - v_900: '#33691e', - v_a100: '#ccff90', - v_a200: '#b2ff59', - v_a400: '#76ff03', - v_a700: '#64dd17', - }, - lime: { - v_50: '#f9fbe7', - v_100: '#f0f4c3', - v_200: '#e6ee9c', - v_300: '#dce775', - v_400: '#d4e157', - v_500: '#cddc39', - v_600: '#c0ca33', - v_700: '#afb42b', - v_800: '#9e9d24', - v_900: '#827717', - v_a100: '#f4ff81', - v_a200: '#eeff41', - v_a400: '#c6ff00', - v_a700: '#aeea00', - }, - yellow: { - v_50: '#fffde7', - v_100: '#fff9c4', - v_200: '#fff59d', - v_300: '#fff176', - v_400: '#ffee58', - v_500: '#ffeb3b', - v_600: '#fdd835', - v_700: '#fbc02d', - v_800: '#f9a825', - v_900: '#f57f17', - v_a100: '#ffff8d', - v_a200: '#ffff00', - v_a400: '#ffea00', - v_a700: '#ffd600', - }, - amber: { - v_50: '#fff8e1', - v_100: '#ffecb3', - v_200: '#ffe082', - v_300: '#ffd54f', - v_400: '#ffca28', - v_500: '#ffc107', - v_600: '#ffb300', - v_700: '#ffa000', - v_800: '#ff8f00', - v_900: '#ff6f00', - v_a100: '#ffe57f', - v_a200: '#ffd740', - v_a400: '#ffc400', - v_a700: '#ffab00', + v_200: '#CCF4D8', + v_400: '#99E9B1', + v_600: '#66DD8A', + v_800: '#33D263', + v_1000: '#00C73C', + v_1100: '#00992E', }, orange: { - v_50: '#fff3e0', - v_100: '#ffe0b2', - v_200: '#ffcc80', - v_300: '#ffb74d', - v_400: '#ffa726', - v_500: '#ff9800', - v_600: '#fb8c00', - v_700: '#f57c00', - v_800: '#ef6c00', - v_900: '#e65100', - v_a100: '#ffd180', - v_a200: '#ffab40', - v_a400: '#ff9100', - v_a700: '#ff6d00', + v_200: '#FFE4CC', + v_400: '#FFC899', + v_600: '#FFAD66', + v_800: '#FF9133', + v_1000: '#FF7600', + v_1100: '#E56A00', }, - deeporange: { - v_50: '#fbe9e7', - v_100: '#ffccbc', - v_200: '#ffab91', - v_300: '#ff8a65', - v_400: '#ff7043', - v_500: '#ff5722', - v_600: '#f4511e', - v_700: '#e64a19', - v_800: '#d84315', - v_900: '#bf360c', - v_a100: '#ff9e80', - v_a200: '#ff6e40', - v_a400: '#ff3d00', - v_a700: '#dd2c00', - }, - brown: { - v_50: '#efebe9', - v_100: '#d7ccc8', - v_200: '#bcaaa4', - v_300: '#a1887f', - v_400: '#8d6e63', - v_500: '#795548', - v_600: '#6d4c41', - v_700: '#5d4037', - v_800: '#4e342e', - v_900: '#3e2723', - }, - grey: { - v_50: '#fafafa', - v_100: '#f5f5f5', - v_200: '#eeeeee', - v_300: '#e0e0e0', - v_400: '#bdbdbd', - v_500: '#9e9e9e', - v_600: '#757575', - v_700: '#616161', - v_800: '#424242', - v_900: '#212121', + pink: { + v_200: '#FFE5E8', + v_400: '#FFCCD1', + v_600: '#FFB2BB', + v_800: '#FF99A4', + v_1000: '#FF7F8D', + v_1100: '#F76474', + }, + darkgreen: { + v_200: '#CCDDD6', + v_400: '#99BBAD', + v_600: '#669A85', + v_800: '#33785C', + v_1000: '#005633', + v_1100: '#00331E', }, - bluegrey: { - v_50: '#eceff1', - v_100: '#cfd8dc', - v_200: '#b0bec5', - v_300: '#90a4ae', - v_400: '#78909c', - v_500: '#607d8b', - v_600: '#546e7a', - v_700: '#455a64', - v_800: '#37474f', - v_900: '#263238', + lightblue: { + v_200: '#CCEAFC', + v_400: '#99D5FA', + v_600: '#66C1F7', + v_800: '#33ACF5', + v_1000: '#0097F2', + v_1100: '#0079C2', + }, + gray: { + v_50: '#F5F5F5', + v_100: '#E6E6E6', + v_200: '#CCCCCC', + v_400: '#999999', + v_600: '#666666', + v_800: '#333333', }, }; diff --git a/lib/styles/theme.js b/lib/styles/theme.js index 7c49b5271..22d730887 100644 --- a/lib/styles/theme.js +++ b/lib/styles/theme.js @@ -69,6 +69,7 @@ export function themeOutlineStyle() { } export function setBrandColors(brandColors) { + console.log("hello world", brandColors) globalThemeState.colors.brand = brandColors; generateTokenToColorMapping(); } From eb3411901716c0cdef679ae1c94fd2b8d6bc719d Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 13 Feb 2024 09:23:50 -0500 Subject: [PATCH 2/5] 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', From 706676058d092f44bd05a94f8b08d457a3494a2c Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:21:41 -0600 Subject: [PATCH 3/5] Update brand default colors and finalize token colors across KDS components --- lib/KCheckbox.vue | 2 +- lib/KDateRange/KDateCalendar.vue | 4 ++-- lib/KDateRange/KDateDay.vue | 4 ++-- lib/KSwitch.vue | 4 ++-- lib/buttons-and-links/KButton.vue | 2 +- lib/buttons-and-links/KRouterLink.vue | 2 +- lib/buttons-and-links/buttonMixin.js | 16 ++++++++-------- lib/keen/UiTextbox.vue | 6 +++--- lib/styles/colorsDefault.js | 24 ++++++++++++------------ lib/tabs/KTabsList.vue | 2 +- lib/tabs/tabsMixin.js | 2 +- 11 files changed, 34 insertions(+), 34 deletions(-) diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue index 6be9ca655..d9f91f2ce 100644 --- 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 index e67d57fe3..f9c1869d2 100644 --- 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 index a32b23ea0..a968e287d 100644 --- 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 index 8129b0013..0dd919bc6 100644 --- 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 index 6d99fa760..d254944cf 100644 --- 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 index 841691fd1..8befc3dc3 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.secondaryDark : $themeTokens.secondary" + :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary" data-test="icon-before" /> diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js index d69622d35..cad30b3d1 100644 --- a/lib/buttons-and-links/buttonMixin.js +++ b/lib/buttons-and-links/buttonMixin.js @@ -63,7 +63,7 @@ export default { linkStyle() { return { color: this.$themeTokens.link, - ':hover': { color: this.$themeTokens.linkDark }, + ':hover': { color: this.$themeTokens.primaryDark }, ':focus': this.$coreOutline, ...(this.disabled ? disabledStyle : {}), }; @@ -71,8 +71,8 @@ export default { 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 index 8458c28b2..30360d103 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.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 } : {}" > {{ label }} diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js index 7aaf445de..0f744e6d3 100644 --- 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,17 +45,8 @@ 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', @@ -63,4 +54,13 @@ export const defaultBrandColors = { 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 index 1c9048b47..39e998cb8 100644 --- 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 index 2d85012bb..a027649d4 100644 --- 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, From 591308fe29f47d9e5d76738c39eb8d17aa3456b9 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Fri, 16 Feb 2024 14:23:32 -0600 Subject: [PATCH 4/5] Theme fixes, component documentation and changelog updates --- CHANGELOG.md | 11 ++++++++++ docs/pages/buttons.vue | 4 ++-- docs/pages/colors.vue | 31 ++++++++++++++-------------- docs/pages/kswitch.vue | 8 +++---- docs/pages/menus/index.vue | 2 +- docs/pages/textfields/index.vue | 4 ++-- docs/tableOfContents.js | 5 ----- lib/KBreadcrumbs.vue | 1 - lib/KSwitch.vue | 4 ++-- lib/buttons-and-links/buttonMixin.js | 6 +++--- lib/styles/colorsDefault.js | 2 +- lib/styles/theme.js | 1 - 12 files changed, 41 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c5f1cd93..8c703130d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie +- [#440] + - **Description:** Updates brand theme color tokens and token mapping within components + - **Products impact:** Brand token updates + - **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545 + - **Components:** - + - **Breaking:** - + - **Impacts a11y:** - + - **Guidance:** - + +[#440]: https://github.com/learningequality/kolibri-design-system/pull/440 + - [#531] - **Description:** Remove unused `keen-ui` dependency - **Products impact:** none diff --git a/docs/pages/buttons.vue b/docs/pages/buttons.vue index b033f57dd..a119b30d2 100644 --- a/docs/pages/buttons.vue +++ b/docs/pages/buttons.vue @@ -144,13 +144,13 @@ diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index db6ecc511..32da77208 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -17,8 +17,8 @@ - - + +

@@ -173,27 +173,29 @@

Content-related labels

- - - - - + + + + + + +

- A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow and segment colors into ten brightness levels, named v_50, v_100, v_20, … v_800, v_900: + A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow and segment colors into brightness levels, named v_200, v_400, v_600, … v_1000, v_1100:

- - - + + +

…

- - + +

Due to the inconsistent way that humans perceive color and light, computing these scales is . It should not be done by simply sliding a "brightness" setting. We used to generate the scales for our primary and secondary brand colors. The same should be done for new themes.

@@ -203,9 +205,6 @@

Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.

-

- The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale: -

diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue index e00313b63..7787bf918 100644 --- a/docs/pages/kswitch.vue +++ b/docs/pages/kswitch.vue @@ -33,19 +33,19 @@
  • Thumb ON color: - +
  • Track ON color: - +
  • Thumb OFF color: - +
  • Track OFF color: - +
diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue index c6d5f1597..ae865e0b1 100644 --- a/docs/pages/menus/index.vue +++ b/docs/pages/menus/index.vue @@ -99,7 +99,7 @@
  • Iconography color: - +

    • Dropdown menu

    diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue index 07f40cf7e..7e8c126fc 100644 --- a/docs/pages/textfields/index.vue +++ b/docs/pages/textfields/index.vue @@ -188,7 +188,7 @@
  • Bottom stroke color: - +
  • Bottom stroke focused color: @@ -196,7 +196,7 @@
  • Label text color: - +
  • Focused text color: diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js index 55d4d5670..ebfb82bb9 100644 --- a/docs/tableOfContents.js +++ b/docs/tableOfContents.js @@ -316,11 +316,6 @@ export default [ isCode: true, keywords: ['button'], }), - new Page({ - path: '/kcontentrenderer', - title: 'KContentRenderer', - isCode: true, - }), new Page({ path: '/kgrid', title: 'KGrid', diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue index 7c61c22ff..72c746152 100644 --- a/lib/KBreadcrumbs.vue +++ b/lib/KBreadcrumbs.vue @@ -300,7 +300,6 @@ .breadcrumbs-crumb-text { display: inline-block; width: 100%; - font-size: 100px; max-width: $crumb-max-width; overflow: hidden; text-overflow: ellipsis; diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue index 0dd919bc6..b26052fba 100644 --- a/lib/KSwitch.vue +++ b/lib/KSwitch.vue @@ -188,7 +188,7 @@ $k-switch-height: 32px !default; $k-switch-thumb-size: 20px !default; - $k-switch-thumb-color: #fafafa !default; + $k-switch-thumb-color: #f5f5f5 !default; $k-switch-track-width: 34px !default; $k-switch-track-height: 14px !default; @@ -248,7 +248,7 @@ top: (($k-switch-thumb-size - $k-switch-track-height) / 2); width: $k-switch-track-width; height: $k-switch-track-height; - background-color: rgba(0, 0, 0, 0.26); + background-color: #cccccc; border-radius: 8px; transition: background-color 0.1s linear; } diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js index cad30b3d1..f31665353 100644 --- a/lib/buttons-and-links/buttonMixin.js +++ b/lib/buttons-and-links/buttonMixin.js @@ -92,7 +92,7 @@ export default { return { color: this.$themeTokens.primary, ':hover': { - backgroundColor: this.$themePalette.grey.v_200, + backgroundColor: this.$themePalette.grey.v_100, }, ':focus': { ...this.$coreOutline, outlineOffset: 0 }, ':disabled': disabledStyle, @@ -104,9 +104,9 @@ export default { secondaryRaisedStyle() { return { color: this.$themeTokens.text, - backgroundColor: this.$themePalette.grey.v_100, + backgroundColor: this.$themePalette.grey.v_50, ':hover': { - backgroundColor: this.$themePalette.grey.v_200, + backgroundColor: this.$themePalette.grey.v_100, }, ':focus': { ...this.$coreOutline, outlineOffset: '6px' }, ':disabled': disabledStyle, diff --git a/lib/styles/colorsDefault.js b/lib/styles/colorsDefault.js index 0f744e6d3..2563b3c91 100644 --- a/lib/styles/colorsDefault.js +++ b/lib/styles/colorsDefault.js @@ -48,7 +48,7 @@ export const defaultBrandColors = { // blues primary: { v_200: '#D9E1FD', - v_400: '#B43FB', + v_400: '#B4C3FB', v_600: '#8EA4F9', v_800: '#6986F7', v_1000: '#4368F5', diff --git a/lib/styles/theme.js b/lib/styles/theme.js index 22d730887..7c49b5271 100644 --- a/lib/styles/theme.js +++ b/lib/styles/theme.js @@ -69,7 +69,6 @@ export function themeOutlineStyle() { } export function setBrandColors(brandColors) { - console.log("hello world", brandColors) globalThemeState.colors.brand = brandColors; generateTokenToColorMapping(); } From bb4e662b0664d7f454e02990e0da471a14b3c695 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Mon, 19 Feb 2024 09:20:09 -0600 Subject: [PATCH 5/5] Update changelog file --- CHANGELOG.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c703130d..a3a381450 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,12 +8,12 @@ Changelog is rather internal in nature. See release notes for the public overvie - [#440] - **Description:** Updates brand theme color tokens and token mapping within components - - **Products impact:** Brand token updates + - **Products impact:** Updates to the UI - **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545 - **Components:** - - - **Breaking:** - + - **Breaking:** - Yes - **Impacts a11y:** - - - **Guidance:** - + - **Guidance:** - There have been updates made to the brand, palette, and token colors. The theme color scales have been reduced to 6 levels, with some colors being removed. Additionally, new content-related token labels have been introduced and existing ones have been renamed. [#440]: https://github.com/learningequality/kolibri-design-system/pull/440