Merge v4.6.0 into develop and update theme tokens

CHANGELOG.md

@@ -710,8 +710,41 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
+- [#791]
+  - **Description:** Bump KDS version to 4.6.0.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#791]: https://github.com/learningequality/kolibri-design-system/pull/791
+
+- [#782]
+  - **Description:** Update Theme Tokens to the latest specs to comply material design specifications.
+  - **Products impact:** Updated API.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/775.
+  - **Components:** -.
+  - **Breaking:** yes.
+  - **Impacts a11y:** no.
+  - **Guidance:** Please update all `v_*` theme tokens using the mapping posted in https://github.com/learningequality/kolibri-design-system/issues/775.
+
+[#782]: https://github.com/learningequality/kolibri-design-system/pull/782
+
+- [#786]
+  - **Description:** Bump KDS version to 4.5.1.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#786]: https://github.com/learningequality/kolibri-design-system/pull/786
+
 - [#784]
-  - **Description:** Adds `labelDir` prop to control rtl direction of label.
+  - **Description:** Add `labelDir` prop to control rtl direction of label.
   - **Products impact:** new API.
   - **Addresses:** https://github.com/learningequality/studio/issues/4728.
   - **Components:** KCheckbox, KRadioButton.

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-components/DocsKCard.vue

@@ -45,14 +45,14 @@
       <div class="footer-wrapper">
         <div class="pills" :style="{ 'color': $themeTokens.annotation }">
           <span
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
             Read
           </span>
           <span
             v-if="!showMenuInFooter"
-            :style="{ 'background-color': $themePalette.grey.v_50 }"
+            :style="{ 'background-color': $themePalette.grey.v_100 }"
           >
             Short Activity
           </span>

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>
@@ -97,30 +97,30 @@
       <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
 
       <DocsShowCode language="html">
-        <div :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div :style="{ backgroundColor: $themePalette.red.v_600 }">
           base
         </div>
-        <div :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           $darken1
         </div>
-        <div :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           $darken2
         </div>
-        <div :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           $darken3
         </div>
       </DocsShowCode>
       <DocsShow>
-        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_1100 }">
+        <div class="darken-block" :style="{ backgroundColor: $themePalette.red.v_600 }">
           <code>base</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
           <code>$darken1</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
           <code>$darken2</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_1100) }">
+        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
           <code>$darken3</code>
         </div>
       </DocsShow>
@@ -236,16 +236,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/kcard.vue

@@ -256,12 +256,12 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Biology
                 </span>
@@ -281,7 +281,7 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
@@ -433,12 +433,12 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
                 >
                   Biology
                 </span>

docs/pages/kcardgrid.vue

@@ -263,7 +263,7 @@
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   {{ pill }}
                 </span>
@@ -325,7 +325,7 @@
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   {{ pill }}
                 </span>
@@ -451,24 +451,24 @@
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
                   Read
                 </span>
                 <span
-                  :style="{ 'background-color': $themePalette.grey.v_50 }"
+                  :style="{ 'background-color': $themePalette.grey.v_100 }"
                 >
                   Short Activity
                 </span>
                 <template v-if="windowBreakpoint > 3">
                   <span
-                    :style="{ 'background-color': $themePalette.grey.v_50 }"
+                    :style="{ 'background-color': $themePalette.grey.v_100 }"
                   >
                     Biology
                   </span>
                   <span
-                    :style="{ 'background-color': $themePalette.grey.v_50 }"
+                    :style="{ 'background-color': $themePalette.grey.v_100 }"
                   >
                     Ecology
                   </span>

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

@@ -142,7 +142,7 @@
        * (3) a progressive loading experience as the colored background
        * is displayed while an image is loading.
        *
-       * Its default value is `$themePalette.grey.v_50`.
+       * Its default value is `$themePalette.grey.v_100`.
        */
       backgroundColor: {
         type: String,
@@ -175,7 +175,7 @@
       baseStyles() {
         const backgroundColor = this.backgroundColor
           ? this.backgroundColor
-          : this.$themePalette.grey.v_50;
+          : 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,
     },
   };