From b0700e19715aed8e5439372e44c7aaa96f461bc8 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 4 Jul 2023 14:54:44 -0400 Subject: [PATCH 01/11] 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 02/11] 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 03/11] 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 04/11] 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 05/11] 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 From 15d5175ccef54dcb8c4eec51fe502f40f2ed13b8 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Mon, 19 Feb 2024 10:02:24 -0600 Subject: [PATCH 06/11] Remove changelog update until after complete review --- CHANGELOG.md | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3a381450..6c5f1cd93 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,17 +6,6 @@ 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:** Updates to the UI - - **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545 - - **Components:** - - - **Breaking:** - Yes - - **Impacts a11y:** - - - **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 - - [#531] - **Description:** Remove unused `keen-ui` dependency - **Products impact:** none From 7d773a79abc4daceca8cf2e6c0d7c9f6a876f176 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Mon, 19 Feb 2024 10:36:42 -0600 Subject: [PATCH 07/11] Remove testing change from buttons documentation page --- docs/pages/buttons.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/buttons.vue b/docs/pages/buttons.vue index a119b30d2..b033f57dd 100644 --- a/docs/pages/buttons.vue +++ b/docs/pages/buttons.vue @@ -144,13 +144,13 @@ From 94503892fb347d1603706da88dfa26129be3004e Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Wed, 21 Feb 2024 12:11:54 -0600 Subject: [PATCH 08/11] Update colors doc page, add yellow and blue to color palette --- docs/pages/colors.vue | 35 ++++++++++++----- docs/pages/kcircularloader.vue | 2 +- docs/pages/klinearloader.vue | 4 +- lib/loaders/KLinearLoader.vue | 2 +- lib/styles/colorsDefault.js | 12 +++--- lib/styles/colorsMaterial.js | 62 +++++++++++++++++++----------- lib/styles/generateGlobalStyles.js | 4 +- 7 files changed, 77 insertions(+), 44 deletions(-) diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index 32da77208..312829331 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -117,11 +117,37 @@ Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements + + Default secondary brand color + + + Default dark variant of the secondary brand color +

    UI Colors

    Default background color + + Default app bar component color + + + Default dark color of the app bar component + + + Hyperlink text color with the application + + + Used for divider lines and rules + + + Color for loaders, spinners, and other progress indicators + + + Indicates the successful completion of an action in the application + + +

    Text

    Normal text color. (Typically used on top of the $themeTokens.surface color) @@ -134,21 +160,12 @@ Text color for creating sufficient contrast when used on dark backgrounds (such as $themeTokens.primary) - - Color for loaders, spinners, and other progress indicators - Used to indicate keyboard focus - - Used for divider lines and rules - Indicates an application or validation error - - Indicates the successful completion of an action in the application -

    Learner activity

    diff --git a/docs/pages/kcircularloader.vue b/docs/pages/kcircularloader.vue index 607c97319..bf6549b5a 100644 --- a/docs/pages/kcircularloader.vue +++ b/docs/pages/kcircularloader.vue @@ -17,7 +17,7 @@
    • Dimensions do not exceed 48x48px
      • -
    • Progress indicator uses brand.secondary.v_100
      • +
    • Progress indicator uses palette.grey.v_800
    • Track width is 4px
     diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue index f4eedcdf4..ecd0af5da 100644 --- a/docs/pages/klinearloader.vue +++ b/docs/pages/klinearloader.vue @@ -36,8 +36,8 @@
      -
    • Progress track uses palette.grey.v_200
      • -
    • Progress indicator uses brand.secondary.v_100
      • +
    • Progress track uses palette.grey.v_100
      • +
    • Progress indicator uses palette.grey.v_800
    • Progress track height is 4px
    • Include a 2px corner radius
    • Remove the corner radius when appended to other components, such as appbars or data tables
      • diff --git a/lib/loaders/KLinearLoader.vue b/lib/loaders/KLinearLoader.vue index 4027e4780..9f2ca6e7a 100644 --- a/lib/loaders/KLinearLoader.vue +++ b/lib/loaders/KLinearLoader.vue @@ -11,7 +11,7 @@
      Date: Mon, 26 Feb 2024 10:34:39 -0600 Subject: [PATCH 09/11] Update textbox fill and label color --- docs/pages/textfields/index.vue | 4 ++-- lib/keen/UiTextbox.vue | 2 +- lib/keen/styles/variables.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue index 7e8c126fc..6a758cf0d 100644 --- a/docs/pages/textfields/index.vue +++ b/docs/pages/textfields/index.vue @@ -184,7 +184,7 @@
    • Corner radius: 2px
    • Fill color: - , 0.25 opacity +
    • Bottom stroke color: @@ -196,7 +196,7 @@
    • Label text color: - +
    • Focused text color: diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue index 30360d103..a5f2fc958 100644 --- a/lib/keen/UiTextbox.vue +++ b/lib/keen/UiTextbox.vue @@ -499,7 +499,7 @@ width: 100%; padding: 4px 0 0 0; margin: 0; - background: #e9e9e9; + background: #F5F5F5; border-radius: 4px 4px 0 0; } diff --git a/lib/keen/styles/variables.scss b/lib/keen/styles/variables.scss index 88834cf72..59c9fa2f4 100644 --- a/lib/keen/styles/variables.scss +++ b/lib/keen/styles/variables.scss @@ -14,7 +14,7 @@ $brand-accent-color: $md-purple-a400 !default; $primary-text-color: rgba(black, 0.87) !default; // Secondary text color -$secondary-text-color: rgba(black, 0.54) !default; +$secondary-text-color: #666666!default; // Hint text color $hint-text-color: rgba(black, 0.38) !default; From ad4984dbfaef3dc981e981f01dabe5956020e524 Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Mon, 26 Feb 2024 10:43:28 -0600 Subject: [PATCH 10/11] Add updates to changelog --- CHANGELOG.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c5f1cd93..594e38801 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,27 @@ Changelog is rather internal in nature. See release notes for the public overvie +- [#551] + - **Description:** Updates `brand` colors, `palette` colors, and `token`s. + - Breaking changes: + - Removed `palette` colors: `purple`, `deeppurple`, `indigo`, `brown`, `cyan`, `teal`, `lightgreen`, `lime`, `amber`, `deeporange`, `bluegrey` + - Removed `palette.grey` scales: `v_300`, `v_500`, `v_700`, `v_900` + - Removed `brand` and `palette` scales (except `palette.grey`): `v_50`,`v_100`, `v_300`, `v_500`, `v_700`, `v_900` + - Removed content-related tokens: `exercise`, `video`, `audio`, `document`, `html5`, `slideshow` + - Removed other tokens: `appBarFullscreen`, `appBarFullscreenDark`, `linkDark` + - Other changes: + - Some existing `palette` colors look differently + - Adds new tokens and palette + - Global styles: `` background color changed from `grey.v_100` to lighter `grey.v_50` + - **Products impact:** new API, updated API, deleted API + - **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545 + - **Components:** - + - **Breaking:** - yes + - **Impacts a11y:** - no + - **Guidance:** - Address all breaking changes by searching for removed palette colors, scales, and tokens. Study the updated "Colors" KDS documentation page and replace them by relevant colors/scales/tokens. Also search for any hardcoded hex,rgb(a),hsl(a), or named colors (such as 'white') and theme them instead. Visually check places that use existing palette and adjust scale (you may need to increase it as many colors are lighter). You may also see if there are any minor useful updates to in regards to new tokens (e.g. replacing a `palette` color with a new `token` that describes function of the color better). If you use `generateGlobalStyles` that generates background color for `` and use grey.`v_100` in some components to match the background color, you may need to update it to `grey.v_50`. + +[#551]: https://github.com/learningequality/kolibri-design-system/pull/551 + - [#531] - **Description:** Remove unused `keen-ui` dependency - **Products impact:** none From 7cc8a28181c15074558e456a9f4d491c08654b0c Mon Sep 17 00:00:00 2001 From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:55:26 -0600 Subject: [PATCH 11/11] Modify UI input colors to align with theme updates --- docs/pages/kselect.vue | 1 + lib/KSelect/KeenUiSelect.vue | 37 ++++++++++++---------------------- lib/keen/UiTextbox.vue | 27 ++++++++++++++++--------- lib/keen/styles/md-colors.scss | 2 +- lib/keen/styles/variables.scss | 9 +++++---- 5 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue index 65b68bfd9..63d0c53ba 100644 --- a/docs/pages/kselect.vue +++ b/docs/pages/kselect.vue @@ -9,6 +9,7 @@ :options="options" label="Who are you?" placeholder="Nobody" + style="width:300px;" />

      Value: {{ exampleData }}

      diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue index fb1211c9b..c74534f63 100644 --- a/lib/KSelect/KeenUiSelect.vue +++ b/lib/KSelect/KeenUiSelect.vue @@ -902,31 +902,29 @@ display: flex; align-items: flex-start; margin-bottom: $ui-input-margin-bottom; + background: $md-grey-100; + border-bottom-color: $ui-input-border-color; + border-bottom-style: solid; + border-bottom-width: $ui-input-border-width; + border-radius: 2px 2px 0 0; outline: none; &:hover:not(.is-disabled) { + border-bottom-color: $ui-input-border-color--hover; + border-bottom-width: $ui-input-border-width--active; .ui-select-label-text { color: $ui-input-label-color--hover; } - .ui-select-display { - border-bottom-color: $ui-input-border-color--hover; - } - .ui-select-dropdown-button { color: $ui-input-button-color--hover; } } &.is-active:not(.is-disabled) { - .ui-select-display { - border-bottom-width: $ui-input-border-width--active; - } - } - - &.is-active { - .ui-select-display { - border-bottom-width: $ui-input-border-width--active; + border-bottom-color: $ui-input-border-color--active; + .ui-icon { + color: $ui-input-icon-color--active; } } @@ -961,7 +959,6 @@ &:not(.is-multiple) { .ui-select-display { height: $ui-input-height; - line-height: 1; } } @@ -969,20 +966,17 @@ .ui-select-display { padding-top: rem-calc(4px); padding-bottom: rem-calc(4px); - line-height: 1.4; } } &.is-invalid:not(.is-disabled) { + border-bottom-color: $ui-input-border-color--invalid; .ui-select-label-text, + .ui-select-dropdown-button, .ui-select-icon-wrapper .ui-icon { color: $ui-input-label-color--invalid; } - .ui-select-display { - border-bottom-color: $ui-input-border-color--invalid; - } - .ui-select-feedback { color: $ui-input-feedback-color--invalid; } @@ -1050,13 +1044,11 @@ padding: 0; font-size: $ui-input-text-font-size; font-weight: normal; + line-height: 1.4; color: $ui-input-text-color; cursor: pointer; user-select: none; border: 0; - border-bottom-color: $ui-input-border-color; - border-bottom-style: solid; - border-bottom-width: $ui-input-border-width; transition: border 0.1s ease; } @@ -1110,9 +1102,6 @@ cursor: auto; background: none; border: 0; - border-bottom-color: $ui-input-border-color; - border-bottom-style: solid; - border-bottom-width: $ui-input-border-width; border-radius: 0; outline: none; transition: border 0.1s ease; diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue index a5f2fc958..a22c06629 100644 --- a/lib/keen/UiTextbox.vue +++ b/lib/keen/UiTextbox.vue @@ -84,7 +84,6 @@ v-if="label || $slots.default" class="ui-textbox-label-text" :class="labelClasses" - :style="isActive ? { color: $themeTokens.primaryDark } : {}" > {{ label }}
      • @@ -403,17 +402,20 @@ color: $ui-input-label-color--hover; } - .ui-textbox-input, + .ui-textbox-label, .ui-textbox-textarea { border-bottom-color: $ui-input-border-color--hover; + border-bottom-width: $ui-input-border-width--active; } } &.is-active:not(.is-disabled) { - .ui-textbox-input, + .ui-textbox-label-text { + color: $ui-input-border-color--active; + } + .ui-textbox-label, .ui-textbox-textarea { border-bottom-color: $ui-input-border-color--active; - border-bottom-width: $ui-input-border-width--active; } } @@ -465,7 +467,7 @@ color: $ui-input-label-color--invalid; } - .ui-textbox-input, + .ui-textbox-label, .ui-textbox-textarea { border-bottom-color: $ui-input-border-color--invalid; } @@ -477,6 +479,7 @@ &.is-disabled { .ui-textbox-input, + .ui-textbox-label, .ui-textbox-textarea { color: $ui-input-text-color--disabled; border-bottom-style: $ui-input-border-style--disabled; @@ -499,8 +502,11 @@ width: 100%; padding: 4px 0 0 0; margin: 0; - background: #F5F5F5; + background: $md-grey-100; border-radius: 4px 4px 0 0; + border-bottom-color: $ui-input-border-color; + border-bottom-style: solid; + border-bottom-width: $ui-input-border-width; } .ui-textbox-icon-wrapper { @@ -539,14 +545,17 @@ cursor: auto; background: none; border: none; - border-bottom-color: $ui-input-border-color; - border-bottom-style: solid; - border-bottom-width: $ui-input-border-width; border-radius: 0; outline: none; transition: border 0.1s ease; } + .ui-textbox-textarea { + border-bottom-color: $ui-input-border-color; + border-bottom-style: solid; + border-bottom-width: $ui-input-border-width; + } + .ui-textbox-input { height: $ui-input-height; } diff --git a/lib/keen/styles/md-colors.scss b/lib/keen/styles/md-colors.scss index 2c7301cdf..6c17dc03b 100644 --- a/lib/keen/styles/md-colors.scss +++ b/lib/keen/styles/md-colors.scss @@ -78,7 +78,7 @@ $md-indigo-a200: #536dfe; $md-indigo-a400: #3d5afe; $md-indigo-a700: #304ffe; -$md-blue: #2196f3; +$md-blue: #2547F3; $md-blue-50: #e3f2fd; $md-blue-100: #bbdefb; $md-blue-200: #90caf9; diff --git a/lib/keen/styles/variables.scss b/lib/keen/styles/variables.scss index 59c9fa2f4..1bb32e97f 100644 --- a/lib/keen/styles/variables.scss +++ b/lib/keen/styles/variables.scss @@ -49,16 +49,17 @@ $ui-input-text-color--disabled: $disabled-text-color !default; $ui-input-text-color--invalid: $md-red !default; // Input border -$ui-input-border-color: $divider-color !default; -$ui-input-border-color--hover: rgba(black, 0.3) !default; +$ui-input-border-color: $secondary-text-color !default; +$ui-input-border-color--hover: rgba(black, 0.75) !default; $ui-input-border-color--active: $brand-primary-color !default; $ui-input-border-color--invalid: $md-red !default; $ui-input-border-width: 1px !default; -$ui-input-border-width--active: 2px !default; +$ui-input-border-width--active: 1.5px !default; $ui-input-border-style--disabled: dotted !default; // Input icons $ui-input-icon-color: $secondary-text-color !default; +$ui-input-icon-color--active: $brand-primary-color !default; $ui-input-icon-opacity--disabled: 0.6 !default; $ui-input-icon-margin-right: rem(12px) !default; $ui-input-icon-margin-top: rem(4px) !default; @@ -68,7 +69,7 @@ $ui-input-icon-margin-top--with-label: rem(24px) !default; $ui-input-button-color: $secondary-text-color !default; $ui-input-button-color--hover: $primary-text-color !default; $ui-input-button-opacity--disabled: 0.6 !default; -$ui-input-button-size: rem(18px) !default; +$ui-input-button-size: rem(24px) !default; $ui-input-button-margin-top: rem(7px) !default; $ui-input-button-margin-top--with-label: rem(27px) !default;