From 4ff7c60896aa5eb5496ae9092c73e016d910f897 Mon Sep 17 00:00:00 2001 From: Alex Velez Date: Tue, 17 Sep 2024 12:24:41 -0500 Subject: [PATCH 1/2] Update theme tokens --- docs/common/DocsShow.vue | 2 +- docs/pages/colors.vue | 14 ++-- docs/pages/errors/index.vue | 2 +- docs/pages/klinearloader.vue | 2 +- docs/pages/kswitch.vue | 8 +- docs/pages/menus/index.vue | 4 +- docs/pages/textfields/index.vue | 6 +- lib/KDateRange/KDateCalendar.vue | 4 +- lib/KDateRange/KDateDay.vue | 6 +- lib/KImg/index.vue | 4 +- lib/KLogo/index.vue | 12 +-- lib/buttons-and-links/buttonMixin.js | 8 +- lib/loaders/KLinearLoader.vue | 2 +- lib/styles/colorsDefault.js | 78 +++++++++--------- lib/styles/colorsMaterial.js | 113 ++++++++++++++------------- lib/styles/generateGlobalStyles.js | 4 +- lib/tabs/KTabsList.vue | 2 +- lib/tabs/tabsMixin.js | 2 +- 18 files changed, 139 insertions(+), 134 deletions(-) diff --git a/docs/common/DocsShow.vue b/docs/common/DocsShow.vue index cd1a8acec..43460b2f1 100644 --- a/docs/common/DocsShow.vue +++ b/docs/common/DocsShow.vue @@ -35,7 +35,7 @@ return { display: this.block ? 'block' : 'inline-block', padding: this.padding ? '8px 24px' : null, - backgroundColor: this.dark ? this.$themePalette.grey.v_500 : undefined, + backgroundColor: this.dark ? this.$themePalette.grey.v_700 : undefined, }; }, }, diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index 312829331..567bb7578 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -17,8 +17,8 @@ - - + +

@@ -203,16 +203,16 @@

- 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: + 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_100, v_200, v_300, … v_500, v_600:

+ - - +

…

- - + +

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.

diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue index 840443c4c..c8abf6269 100644 --- a/docs/pages/errors/index.vue +++ b/docs/pages/errors/index.vue @@ -140,7 +140,7 @@ For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences.

- For conditions which partially block or interrupt the user experience, use a warning icon with palette.orange.v_400 and informative language of the consequences under the current condition. + For conditions which partially block or interrupt the user experience, use a warning icon with palette.orange.v_200 and informative language of the consequences under the current condition.

diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue index ecd0af5da..8ceab7685 100644 --- a/docs/pages/klinearloader.vue +++ b/docs/pages/klinearloader.vue @@ -36,7 +36,7 @@
    -
  • Progress track uses palette.grey.v_100
    • +
  • Progress track uses palette.grey.v_200
  • Progress indicator uses palette.grey.v_800
  • Progress track height is 4px
  • Include a 2px corner radius
    • diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue index 7787bf918..20f0d12c6 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 ae865e0b1..f9958420a 100644 --- a/docs/pages/menus/index.vue +++ b/docs/pages/menus/index.vue @@ -91,11 +91,11 @@
  • Option text color: - +
  • Option text hover color: - +
  • Iconography color: diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue index 6a758cf0d..7f92ad9fd 100644 --- a/docs/pages/textfields/index.vue +++ b/docs/pages/textfields/index.vue @@ -184,11 +184,11 @@
  • Corner radius: 2px
  • Fill color: - +
  • Bottom stroke color: - +
  • Bottom stroke focused color: @@ -196,7 +196,7 @@
  • Label text color: - +
  • Focused text color: diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue index f9c1869d2..70c2cb2cc 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.primary.v_200 } : {} + { backgroundColor: $themeBrand.primary.v_100 } : {} ]" :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.primary.v_200 } : {} + { backgroundColor: $themeBrand.primary.v_100 } : {} ]" :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 a968e287d..bceab329c 100644 --- a/lib/KDateRange/KDateDay.vue +++ b/lib/KDateRange/KDateDay.vue @@ -69,9 +69,9 @@ inRangeStyle() { return this.isInRange ? { - backgroundColor: this.$themeBrand.primary.v_200, + backgroundColor: this.$themeBrand.primary.v_100, ':hover': { - backgroundColor: this.$themePalette.grey.v_200, + backgroundColor: this.$themePalette.grey.v_300, }, } : {}; @@ -79,7 +79,7 @@ selectedStyle() { return this.isSelected ? { - backgroundColor: this.$themeBrand.primary.v_1000, + backgroundColor: this.$themeBrand.primary.v_500, color: this.$themePalette.white + '!important', } : {}; diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue index 1334a7bea..45e4d3548 100644 --- a/lib/KImg/index.vue +++ b/lib/KImg/index.vue @@ -185,7 +185,7 @@ * (3) a progressive loading experience as the colored background * is displayed while an image is loading. * - * Its default value is `$themePalette.grey.v_200`. + * Its default value is `$themePalette.grey.v_100`. */ backgroundColor: { type: String, @@ -218,7 +218,7 @@ baseStyles() { const backgroundColor = this.backgroundColor ? this.backgroundColor - : this.$themePalette.grey.v_200; + : this.$themePalette.grey.v_100; const borderRadius = this.borderRadius ? this.borderRadius : 0; return { diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue index 88236428e..f9f9289c8 100644 --- a/lib/KLogo/index.vue +++ b/lib/KLogo/index.vue @@ -136,8 +136,8 @@ const colorScheme = { default: { - blobColor: defaultBrandColors.secondary.v_1000, - strokeColor: defaultBrandColors.primary.v_1000, + blobColor: defaultBrandColors.secondary.v_500, + strokeColor: defaultBrandColors.primary.v_500, }, monoBlack: { blobColor: materialColors.black, @@ -146,17 +146,17 @@ blobColor: materialColors.white, }, monoPrimary: { - blobColor: defaultBrandColors.primary.v_1000, + blobColor: defaultBrandColors.primary.v_500, }, monoSecondary: { - blobColor: defaultBrandColors.secondary.v_1000, + blobColor: defaultBrandColors.secondary.v_500, }, whiteGrey: { - blobColor: materialColors.grey.v_200, + blobColor: materialColors.grey.v_300, strokeColor: materialColors.white, }, blackGrey: { - blobColor: materialColors.grey.v_200, + blobColor: materialColors.grey.v_300, strokeColor: materialColors.black, }, }; diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js index 360cdd28d..bbd7d4e91 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_100, + 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_50, + backgroundColor: this.$themePalette.grey.v_100, ':hover': { - backgroundColor: this.$themePalette.grey.v_100, + 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_200, + backgroundColor: this.$themePalette.grey.v_300, }, ':focus': { ...this.$coreOutline, outlineOffset: 0 }, ':disabled': disabledStyle, diff --git a/lib/loaders/KLinearLoader.vue b/lib/loaders/KLinearLoader.vue index 9f2ca6e7a..acd09faae 100644 --- a/lib/loaders/KLinearLoader.vue +++ b/lib/loaders/KLinearLoader.vue @@ -11,7 +11,7 @@
    Date: Thu, 26 Sep 2024 07:14:59 -0500 Subject: [PATCH 2/2] Address comments --- docs/pages/colors.vue | 6 ++---- docs/pages/menus/index.vue | 2 +- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index 567bb7578..cd9948452 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -203,14 +203,12 @@

    - 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_100, v_200, v_300, … v_500, v_600: + 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_100, v_200, v_300, v_400, v_500, v_600:

    -

    - … -

    +

    diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue index f9958420a..3d38ac218 100644 --- a/docs/pages/menus/index.vue +++ b/docs/pages/menus/index.vue @@ -95,7 +95,7 @@

  • Option text hover color: - +
  • Iconography color: