From 6e131ca3df3e61d3da980a9bec13832da791bce9 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Tue, 4 Jul 2023 14:54:44 -0400 Subject: [PATCH] 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(); }