Merge pull request #551 from LianaHarris360/finalize-theme-tokens

Finalize theme token updates
learningequality · Mar 4, 2024 · fa487bd · fa487bd
2 parents 652d90f + 7cc8a28
commit fa487bd
Show file tree

Hide file tree

Showing 25 changed files with 240 additions and 432 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -59,6 +59,27 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#558]: https://github.com/learningequality/kolibri-design-system/pull/558
 
+- [#551]
+  - **Description:** Updates `brand` colors, `palette` colors, and `token`s.
+    - Breaking changes:
+      - Removed `palette` colors: `purple`, `deeppurple`, `indigo`, `brown`, `cyan`, `teal`, `lightgreen`, `lime`, `amber`, `deeporange`, `bluegrey`
+      - Removed `palette.grey` scales: `v_300`, `v_500`, `v_700`, `v_900`
+      - Removed `brand` and `palette` scales (except `palette.grey`): `v_50`,`v_100`, `v_300`, `v_500`, `v_700`, `v_900`
+      - Removed content-related tokens: `exercise`, `video`, `audio`, `document`, `html5`, `slideshow`
+      - Removed other tokens: `appBarFullscreen`, `appBarFullscreenDark`, `linkDark`
+   - Other changes:
+      - Some existing `palette` colors look differently
+      - Adds new tokens and palette
+      - Global styles: `<body>` background color changed from `grey.v_100` to lighter `grey.v_50`
+  - **Products impact:** new API, updated API, deleted API
+  - **Addresses:** - https://github.com/learningequality/kolibri-design-system/issues/545
+  - **Components:** -
+  - **Breaking:** - yes
+  - **Impacts a11y:** - no
+  - **Guidance:** - Address all breaking changes by searching for removed palette colors, scales, and tokens. Study the updated "Colors" KDS documentation page and replace them by relevant colors/scales/tokens. Also search for any hardcoded hex,rgb(a),hsl(a), or named colors (such as 'white') and theme them instead. Visually check places that use existing palette and adjust scale (you may need to increase it as many colors are lighter). You may also see if there are any minor useful updates to in regards to new tokens (e.g. replacing a `palette` color with a new `token` that describes function of the color better). If you use `generateGlobalStyles` that generates background color for `<body>` and use grey.`v_100` in some components to match the background color, you may need to update it to `grey.v_50`.
+
+[#551]: https://github.com/learningequality/kolibri-design-system/pull/551
+
 - [#531]
   - **Description:** Remove unused `keen-ui` dependency
   - **Products impact:** none

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_900" />
-      <DocsColorBlock name="brand.secondary.v_200" />
+      <DocsColorBlock name="brand.primary.v_1100" />
+      <DocsColorBlock name="brand.secondary.v_800" />
       <DocsColorBlock name="palette.grey.v_400" />
 
       <p>
@@ -117,11 +117,37 @@
       <DocsColorBlock name="tokens.primaryDark" definition>
         Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements
       </DocsColorBlock>
+      <DocsColorBlock name="tokens.secondary" definition>
+        Default secondary brand color
+      </DocsColorBlock>
+      <DocsColorBlock name="tokens.secondaryDark" definition>
+        Default dark variant of the secondary brand color
+      </DocsColorBlock>
 
       <h3>UI Colors</h3>
       <DocsColorBlock name="tokens.surface" definition>
         Default background color
       </DocsColorBlock>
+      <DocsColorBlock name="tokens.appBar" definition>
+        Default app bar component color
+      </DocsColorBlock>
+      <DocsColorBlock name="tokens.appBarDark" definition>
+        Default dark color of the app bar component
+      </DocsColorBlock>
+      <DocsColorBlock name="tokens.link" definition>
+        Hyperlink text color with the application
+      </DocsColorBlock>
+      <DocsColorBlock name="tokens.fineLine" definition>
+        Used for divider lines and rules
+      </DocsColorBlock>
+      <DocsColorBlock name="tokens.loading" definition>
+        Color for loaders, spinners, and other progress indicators
+      </DocsColorBlock>
+      <DocsColorBlock name="tokens.success" definition>
+        Indicates the successful completion of an action in the application
+      </DocsColorBlock>
+
+      <h3>Text</h3>
       <DocsColorBlock name="tokens.text" definition>
         Normal text color. (Typically used on top of the <code>$themeTokens.surface</code> color)
       </DocsColorBlock>
@@ -134,21 +160,12 @@
       <DocsColorBlock name="tokens.textInverted" definition>
         Text color for creating sufficient contrast when used on dark backgrounds (such as <code>$themeTokens.primary</code>)
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.loading" definition>
-        Color for loaders, spinners, and other progress indicators
-      </DocsColorBlock>
       <DocsColorBlock name="tokens.focusOutline" definition>
         Used to indicate keyboard focus
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.fineLine" definition>
-        Used for divider lines and rules
-      </DocsColorBlock>
       <DocsColorBlock name="tokens.error" definition>
         Indicates an application or validation error
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.success" definition>
-        Indicates the successful completion of an action in the application
-      </DocsColorBlock>
 
       <h3>Learner activity</h3>
       <DocsColorBlock name="tokens.progress" definition>
@@ -173,27 +190,29 @@
       </DocsColorBlock>
 
       <h3>Content-related labels</h3>
-      <DocsColorBlock name="tokens.exercise" definition />
-      <DocsColorBlock name="tokens.video" definition />
-      <DocsColorBlock name="tokens.audio" definition />
-      <DocsColorBlock name="tokens.document" definition />
-      <DocsColorBlock name="tokens.html5" definition />
+      <DocsColorBlock name="tokens.practice" definition />
+      <DocsColorBlock name="tokens.watch" definition />
+      <DocsColorBlock name="tokens.listen" definition />
+      <DocsColorBlock name="tokens.read" definition />
+      <DocsColorBlock name="tokens.explore" definition />
+      <DocsColorBlock name="tokens.create" definition />
+      <DocsColorBlock name="tokens.reflect" definition />
       <DocsColorBlock name="tokens.topic" definition />
 
     </DocsPageSection>
 
     <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 ten brightness levels, named <code>v_50</code>, <code>v_100</code>, <code>v_20</code>, … <code>v_800</code>, <code>v_900</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_200</code>, <code>v_400</code>, <code>v_600</code>, … <code>v_1000</code>, <code>v_1100</code>:
       </p>
-      <DocsColorBlock name="palette.blue.v_50" />
-      <DocsColorBlock name="palette.blue.v_100" />
-      <DocsColorBlock name="palette.blue.v_200" />
+      <DocsColorBlock name="palette.green.v_200" />
+      <DocsColorBlock name="palette.green.v_400" />
+      <DocsColorBlock name="palette.green.v_600" />
       <p style="margin-left: 60px">
         …
       </p>
-      <DocsColorBlock name="palette.blue.v_800" />
-      <DocsColorBlock name="palette.blue.v_900" />
+      <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>
@@ -203,9 +222,6 @@
       <p>
         Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
       </p>
-      <p>
-        The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:
-      </p>
 
       <div>
         <div class="palette-block">

diff --git a/docs/pages/kcircularloader.vue b/docs/pages/kcircularloader.vue
@@ -17,7 +17,7 @@
     <DocsPageSection title="Specifications" anchor="#specifications">
       <ul>
         <li>Dimensions do not exceed 48x48px</li>
-        <li>Progress indicator uses brand.secondary.v_100</li>
+        <li>Progress indicator uses palette.grey.v_800</li>
         <li>Track width is 4px</li>
       </ul>
     </DocsPageSection>

diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue
@@ -36,8 +36,8 @@
     <DocsPageSection title="Specifications" anchor="#specifications">
 
       <ul>
-        <li>Progress track uses palette.grey.v_200</li>
-        <li>Progress indicator uses brand.secondary.v_100</li>
+        <li>Progress track uses palette.grey.v_100</li>
+        <li>Progress indicator uses palette.grey.v_800</li>
         <li>Progress track height is 4px</li>
         <li>Include a 2px corner radius</li>
         <li>Remove the corner radius when appended to other components, such as appbars or data tables</li>

diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue
@@ -9,6 +9,7 @@
           :options="options"
           label="Who are you?"
           placeholder="Nobody"
+          style="width:300px;"
         />
         <p>Value: {{ exampleData }}</p>
       </DocsShow>

diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue
@@ -33,19 +33,19 @@
       <ul>
         <li>
           Thumb ON color:
-          <DocsInternalLink code text="palette.green.v_500" href="/colors#palette-green-v_500" />
+          <DocsInternalLink code text="brand.primary.v_1000" href="/colors#brand-primary-v_1000" />
         </li>
         <li>
           Track ON color:
-          <DocsInternalLink code text="palette.green.v_200" href="/colors#palette-green-v_200" />
+          <DocsInternalLink code text="brand.primary.v_400" href="/colors#brand-primary-v_400" />
         </li>
         <li>
           Thumb OFF color:
-          <DocsInternalLink code text="palette.grey.v_400" href="/colors#palette-grey-v_400" />
+          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
         </li>
         <li>
           Track OFF color:
-          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
+          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
         </li>
       </ul>
     </DocsPageSection>

diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue
@@ -99,7 +99,7 @@
         </li>
         <li>
           Iconography color:
-          <DocsInternalLink code text="palette.grey.v_900" href="/colors#palette-grey-v_900" />
+          <DocsInternalLink code text="palette.grey.v_800" href="/colors#palette-grey-v_800" />
         </li>
       </ul>
       <h3>Dropdown menu</h3>

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_400" href="/colors#palette-grey-v_400" />, 0.25 opacity
+          <DocsInternalLink code text="palette.grey.v_50" href="/colors#palette-grey-v_50" />
         </li>
         <li>
           Bottom stroke color:
-          <DocsInternalLink code text="palette.grey.v_500" href="/colors#palette-grey-v_500" />
+          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
         </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_300" href="/colors#palette-grey-v_300" />
+          <DocsInternalLink code text="palette.grey.v_600" href="/colors#palette-grey-v_600" />
         </li>
         <li>
           Focused text color:

diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
@@ -321,11 +321,6 @@ export default [
         isCode: true,
         keywords: ['button'],
       }),
-      new Page({
-        path: '/kcontentrenderer',
-        title: 'KContentRenderer',
-        isCode: true,
-      }),
       new Page({
         path: '/kgrid',
         title: 'KGrid',

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.secondary.v_50 } : {}
+                  { backgroundColor: $themeBrand.primary.v_200 } : {}
             ]"
             :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.secondary.v_50 } : {}
+                  { backgroundColor: $themeBrand.primary.v_200 } : {}
             ]"
             :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,7 +69,7 @@
       inRangeStyle() {
         return this.isInRange
           ? {
-              backgroundColor: this.$themeBrand.secondary.v_50,
+              backgroundColor: this.$themeBrand.primary.v_200,
               ':hover': {
                 backgroundColor: this.$themePalette.grey.v_200,
               },
@@ -79,7 +79,7 @@
       selectedStyle() {
         return this.isSelected
           ? {
-              backgroundColor: this.$themeBrand.secondary.v_600,
+              backgroundColor: this.$themeBrand.primary.v_1000,
               color: this.$themePalette.white + '!important',
             }
           : {};

diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue
@@ -902,31 +902,29 @@
     display: flex;
     align-items: flex-start;
     margin-bottom: $ui-input-margin-bottom;
+    background: $md-grey-100;
+    border-bottom-color: $ui-input-border-color;
+    border-bottom-style: solid;
+    border-bottom-width: $ui-input-border-width;
+    border-radius: 2px 2px 0 0;
     outline: none;
 
     &:hover:not(.is-disabled) {
+      border-bottom-color: $ui-input-border-color--hover;
+      border-bottom-width: $ui-input-border-width--active;
       .ui-select-label-text {
         color: $ui-input-label-color--hover;
       }
 
-      .ui-select-display {
-        border-bottom-color: $ui-input-border-color--hover;
-      }
-
       .ui-select-dropdown-button {
         color: $ui-input-button-color--hover;
       }
     }
 
     &.is-active:not(.is-disabled) {
-      .ui-select-display {
-        border-bottom-width: $ui-input-border-width--active;
-      }
-    }
-
-    &.is-active {
-      .ui-select-display {
-        border-bottom-width: $ui-input-border-width--active;
+      border-bottom-color: $ui-input-border-color--active;
+      .ui-icon {
+        color: $ui-input-icon-color--active;
       }
     }
 
@@ -961,28 +959,24 @@
     &:not(.is-multiple) {
       .ui-select-display {
         height: $ui-input-height;
-        line-height: 1;
       }
     }
 
     &.is-multiple {
       .ui-select-display {
         padding-top: rem-calc(4px);
         padding-bottom: rem-calc(4px);
-        line-height: 1.4;
       }
     }
 
     &.is-invalid:not(.is-disabled) {
+      border-bottom-color: $ui-input-border-color--invalid;
       .ui-select-label-text,
+      .ui-select-dropdown-button,
       .ui-select-icon-wrapper .ui-icon {
         color: $ui-input-label-color--invalid;
       }
 
-      .ui-select-display {
-        border-bottom-color: $ui-input-border-color--invalid;
-      }
-
       .ui-select-feedback {
         color: $ui-input-feedback-color--invalid;
       }
@@ -1050,13 +1044,11 @@
     padding: 0;
     font-size: $ui-input-text-font-size;
     font-weight: normal;
+    line-height: 1.4;
     color: $ui-input-text-color;
     cursor: pointer;
     user-select: none;
     border: 0;
-    border-bottom-color: $ui-input-border-color;
-    border-bottom-style: solid;
-    border-bottom-width: $ui-input-border-width;
     transition: border 0.1s ease;
   }
 
@@ -1110,9 +1102,6 @@
     cursor: auto;
     background: none;
     border: 0;
-    border-bottom-color: $ui-input-border-color;
-    border-bottom-style: solid;
-    border-bottom-width: $ui-input-border-width;
     border-radius: 0;
     outline: none;
     transition: border 0.1s ease;