Merge release v4 into develop

learningequality · Oct 14, 2024 · d215525 · d215525
2 parents 777ad2f + adea2e1
commit d215525
Show file tree

Hide file tree

Showing 19 changed files with 175 additions and 135 deletions.
diff --git a/CHANGELOG.md b/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.

diff --git 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
@@ -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>
@@ -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>

diff --git 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.
       </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>

diff --git a/docs/pages/klinearloader.vue b/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>

diff --git a/docs/pages/kswitch.vue b/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>

diff --git a/docs/pages/menus/index.vue b/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:

diff --git a/docs/pages/textfields/index.vue b/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:

diff --git 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
@@ -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',
             }
           : {};

diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue
@@ -142,7 +142,11 @@
        * (3) a progressive loading experience as the colored background
        * is displayed while an image is loading.
        *
+<<<<<<< HEAD
        * Its default value is `$themePalette.grey.v_50`.
+=======
+       * Its default value is `$themePalette.grey.v_100`.
+>>>>>>> release-v4
        */
       backgroundColor: {
         type: String,
@@ -175,7 +179,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 {

diff --git 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
@@ -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
@@ -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'"