Merge pull request #782 from AlexVelezLl/update-theme-tokens

Update KDS Theme Tokens

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,
         };
       },
     },

docs/pages/colors.vue

@@ -17,8 +17,8 @@
       <DocsColorBlock name="tokens.text" />
       <DocsColorBlock name="tokens.error" />
       <DocsColorBlock name="tokens.primary" />
-      <DocsColorBlock name="brand.primary.v_1100" />
-      <DocsColorBlock name="brand.secondary.v_800" />
+      <DocsColorBlock name="brand.primary.v_600" />
+      <DocsColorBlock name="brand.secondary.v_400" />
       <DocsColorBlock name="palette.grey.v_400" />
 
       <p>
@@ -203,16 +203,14 @@
 
     <DocsPageSection title="Scales" anchor="#scales">
       <p>
-        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 <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</code>:
+        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 <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:
       </p>
+      <DocsColorBlock name="palette.green.v_100" />
       <DocsColorBlock name="palette.green.v_200" />
+      <DocsColorBlock name="palette.green.v_300" />
       <DocsColorBlock name="palette.green.v_400" />
+      <DocsColorBlock name="palette.green.v_500" />
       <DocsColorBlock name="palette.green.v_600" />
-      <p style="margin-left: 60px">
-        …
-      </p>
-      <DocsColorBlock name="palette.green.v_1000" />
-      <DocsColorBlock name="palette.green.v_1100" />
       <p>
         Due to the inconsistent way that humans perceive color and light, computing these scales is <DocsExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <DocsExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
       </p>

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.
       </p>
       <p>
-        For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_400</code> 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 <code>palette.orange.v_200</code> and informative language of the consequences under the current condition.
       </p>
       <img src="./warning.png">
       <h3>

docs/pages/klinearloader.vue

@@ -36,7 +36,7 @@
     <DocsPageSection title="Specifications" anchor="#specifications">
 
       <ul>
-        <li>Progress track uses palette.grey.v_100</li>
+        <li>Progress track uses palette.grey.v_200</li>
         <li>Progress indicator uses palette.grey.v_800</li>
         <li>Progress track height is 4px</li>
         <li>Include a 2px corner radius</li>

docs/pages/kswitch.vue

@@ -33,19 +33,19 @@
       <ul>
         <li>
           Thumb ON color:
-          <DocsInternalLink code text="brand.primary.v_1000" href="/colors#brand-primary-v_1000" />
+          <DocsInternalLink code text="brand.primary.v_500" href="/colors#brand-primary-v_500" />
         </li>
         <li>
           Track ON color:
-          <DocsInternalLink code text="brand.primary.v_400" href="/colors#brand-primary-v_400" />
+          <DocsInternalLink code text="brand.primary.v_200" href="/colors#brand-primary-v_200" />
         </li>
         <li>
           Thumb OFF color:
-          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
+          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
         </li>
         <li>
           Track OFF color:
-          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
+          <DocsInternalLink code text="palette.grey.v_300" href="/colors#palette-grey-v_300" />
         </li>
       </ul>
     </DocsPageSection>

docs/pages/menus/index.vue

@@ -91,11 +91,11 @@
         </li>
         <li>
           Option text color:
-          <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_100" />
+          <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_200" />
         </li>
         <li>
           Option text hover color:
-          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
+          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
         </li>
         <li>
           Iconography color:

docs/pages/textfields/index.vue

@@ -184,19 +184,19 @@
         <li>Corner radius: 2px</li>
         <li>
           Fill color:
-          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
+          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
         </li>
         <li>
           Bottom stroke color:
-          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
+          <DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
         </li>
         <li>
           Bottom stroke focused color:
           <DocsInternalLink code text="tokens.primary" href="/colors#tokens.primary" />
         </li>
         <li>
           Label text color:
-          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
+          <DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
         </li>
         <li>
           Focused text color:

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),

lib/KDateRange/KDateDay.vue

@@ -69,17 +69,17 @@
       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,
               },
             }
           : {};
       },
       selectedStyle() {
         return this.isSelected
           ? {
-              backgroundColor: this.$themeBrand.primary.v_1000,
+              backgroundColor: this.$themeBrand.primary.v_500,
               color: this.$themePalette.white + '!important',
             }
           : {};

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 {

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,
     },
   };

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,

lib/loaders/KLinearLoader.vue

@@ -11,7 +11,7 @@
     <div
       class="ui-progress-linear"
       :class="classes"
-      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      :style="{ backgroundColor: $themePalette.grey.v_200 }"
     >
       <div
         v-if="type === 'determinate'"

lib/styles/colorsDefault.js

@@ -1,66 +1,66 @@
 export const defaultTokenMapping = {
   // Branded UI colors
-  primary: 'brand.primary.v_1000',
-  primaryDark: 'brand.primary.v_1100',
-  secondary: 'brand.secondary.v_1000',
-  secondaryDark: 'brand.secondary.v_1100',
-  appBar: 'brand.secondary.v_800',
+  primary: 'brand.primary.v_500',
+  primaryDark: 'brand.primary.v_600',
+  secondary: 'brand.secondary.v_500',
+  secondaryDark: 'brand.secondary.v_600',
+  appBar: 'brand.secondary.v_400',
   appBarDark: 'palette.black',
-  link: 'brand.primary.v_1000',
+  link: 'brand.primary.v_500',
   loading: 'palette.grey.v_800',
-  focusOutline: 'palette.lightblue.v_800',
+  focusOutline: 'palette.lightblue.v_400',
 
   // Generic UI colors
   text: 'palette.black',
-  textDisabled: 'palette.grey.v_200',
-  annotation: 'palette.grey.v_600',
+  textDisabled: 'palette.grey.v_300',
+  annotation: 'palette.grey.v_700',
   textInverted: 'palette.white',
   surface: 'palette.white',
-  fineLine: 'palette.grey.v_100',
+  fineLine: 'palette.grey.v_200',
 
   // general semantic colors
-  error: 'palette.red.v_1100',
-  incorrect: 'palette.red.v_1100',
-  success: 'palette.green.v_1100',
-  correct: 'palette.green.v_1100',
+  error: 'palette.red.v_600',
+  incorrect: 'palette.red.v_600',
+  success: 'palette.green.v_600',
+  correct: 'palette.green.v_600',
 
   // Kolibri-specific semantic colors
-  progress: 'palette.lightblue.v_1000',
-  mastered: 'palette.yellow.v_1000',
-  warning: 'palette.yellow.v_1000',
-  incomplete: 'palette.yellow.v_1000',
-  coachContent: 'palette.lightblue.v_1100',
-  superAdmin: 'palette.yellow.v_1000',
+  progress: 'palette.lightblue.v_500',
+  mastered: 'palette.yellow.v_500',
+  warning: 'palette.yellow.v_500',
+  incomplete: 'palette.yellow.v_500',
+  coachContent: 'palette.lightblue.v_600',
+  superAdmin: 'palette.yellow.v_500',
 
   // content colors
-  practice: 'palette.blue.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: 'palette.yellow.v_1000',
+  practice: 'palette.blue.v_400',
+  watch: 'palette.lightblue.v_400',
+  listen: 'palette.pink.v_500',
+  read: 'palette.red.v_500',
+  explore: 'palette.orange.v_500',
+  create: 'palette.green.v_500',
+  reflect: 'palette.yellow.v_500',
   topic: 'palette.grey.v_800',
 };
 
 // set core brand colors
 export const defaultBrandColors = {
   // blues
   primary: {
-    v_200: '#D9E1FD',
-    v_400: '#B4C3FB',
-    v_600: '#8EA4F9',
-    v_800: '#6986F7',
-    v_1000: '#4368F5',
-    v_1100: '#2547F3',
+    v_100: '#D9E1FD',
+    v_200: '#B4C3FB',
+    v_300: '#8EA4F9',
+    v_400: '#6986F7',
+    v_500: '#4368F5',
+    v_600: '#2547F3',
   },
   // yellows
   secondary: {
-    v_200: '#FFF5CC',
-    v_400: '#FFEA99',
-    v_600: '#FFE066',
-    v_800: '#FFD533',
-    v_1000: '#FFCB00',
-    v_1100: '#E5B700',
+    v_100: '#FFF5CC',
+    v_200: '#FFEA99',
+    v_300: '#FFE066',
+    v_400: '#FFD533',
+    v_500: '#FFCB00',
+    v_600: '#E5B700',
   },
 };