Merge pull request #723 from MisRob/dropshadow

Update $core-time value and dropshadows documentation to the latest guidance from the design team
learningequality · Aug 21, 2024 · 233927f · 233927f
2 parents 563e831 + c5d2ab2
commit 233927f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,28 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#723]
+  - **Description:** Updates $core-time value from 0.25s to 0.15s
+  - **Products impact:** User experience - faster transitions
+  - **Addresses:** Updates KDS to the latest guidance from the design team
+  - **Components:** `KButton`, `KExternalLink`, `KRouterLink`, `KModal`, `KCard`, `KIcon`, `KTabsList`, `KTabs`, and places in consumers that imports `$core-time`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#723]: https://github.com/learningequality/kolibri-design-system/pull/723
+
+
+- [#723]
+  - **Description:** Updates drop shadows documentation to the latest guidance from the design team
+  - **Products impact:** -
+  - **Addresses:** Updates KDS to the latest guidance from the design team
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#723]: https://github.com/learningequality/kolibri-design-system/pull/723
 - [#728]
   - **Description:** Adds `$darken_` utility functions for darkening palette colors and ensures compatibility with Node.js v10 by pinning the `color` package version to `3.2.1`.
   - **Products impact:** Kolibri Design System

diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
@@ -22,7 +22,7 @@
         The design system provides a set of reusable style constants, snippets, and dynamic values.
       </p>
       <p>
-        Constants are made available as <DocsExternalLink text="SCSS variables" href="https://sass-lang.com/documentation/variables" /> and snippets are made available as <DocsExternalLink text="SCSS placeholder selectors" href="https://sass-lang.com/documentation/style-rules/placeholder-selectors" />. For example, we provide a constant called <code>$radius</code> (defined as <code>4px</code>) and a placeholder selector called <code>%dropshadow-2dp</code> which creates a 4dp drop shadow. These can be used to style an element by importing the definitions file:
+        Constants are made available as <DocsExternalLink text="SCSS variables" href="https://sass-lang.com/documentation/variables" /> and snippets are made available as <DocsExternalLink text="SCSS placeholder selectors" href="https://sass-lang.com/documentation/style-rules/placeholder-selectors" />. For example, we provide a constant called <code>$radius</code> (defined as <code>4px</code>) and a placeholder selector called <code>%dropshadow-2dp</code> which creates a 2dp drop shadow. These can be used to style an element by importing the definitions file:
       </p>
       <p>
         Use these by importing the design system's <code>definitions.scss</code> file. For example, this HTML and SCSS in a Vue template:
@@ -38,7 +38,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .box {
-          @extend %dropshadow-4dp;
+          @extend %dropshadow-2dp;
 
           border-radius: $radius;
           text-align: center;
@@ -47,7 +47,7 @@
       <!-- eslint-enable -->
       <p>can help easily reproduce styles like:</p>
       <DocsShow>
-        <div class="box">
+        <div class="box box-2dp">
           Hello!
         </div>
       </DocsShow>
@@ -85,27 +85,46 @@
         In the real world, the shadow an object casts is often a physical manifestation of its elevation.
       </p>
       <p>
-        The design system provides a set of pre-defined <DocsExternalLink text="SCSS placeholder selectors" href="https://sass-lang.com/documentation/style-rules/placeholder-selectors" /> which allow consistent application of realistic-looking shadows which map to a range of elevations from 1dp to 24dp.
+        The design system provides a set of pre-defined <DocsExternalLink text="SCSS placeholder selectors" href="https://sass-lang.com/documentation/style-rules/placeholder-selectors" /> which allow consistent application of realistic-looking shadows: 1dp, 2dp, and 6dp:
       </p>
-      <p>For example:</p>
+
       <DocsShow>
-        <div class="box">
-          4dp
+        <div class="box box-1dp">
+          1dp
         </div>
-        <div class="box more-shadow">
-          12dp
+        <div class="box box-2dp">
+          2dp
+        </div>
+        <div class="box box-6dp">
+          6dp
         </div>
       </DocsShow>
+
+      <p>Follow the guidance below to decide what depth to use for a drop shadow:</p>
+      <dl>
+        <dt>1dp</dt><dd>containers, panels, controls</dd>
+        <dt>2dp</dt><dd>cards, app bars, buttons, menu, tooltips, snackbars</dd>
+        <dt>6dp</dt><dd>modals, card hover</dd>
+      </dl>
+
       <p>
-        can be achieved by with the dropshadow helpers.
+        This can be achieved by with the dropshadow helpers:
       </p>
       <!-- eslint-disable -->
       <!-- prevent prettier from changing indentation -->
       <DocsShowCode language="css">
         @import '~kolibri-design-system/lib/styles/definitions'
 
-        .more-shadow {
-          @extend %dropshadow-12dp;
+        .box-1dp {
+          @extend %dropshadow-1dp;
+        }
+
+        .box-2dp {
+          @extend %dropshadow-2dp;
+        }
+
+        .box-6dp {
+          @extend %dropshadow-6dp;
         }
       </DocsShowCode>
       <!-- eslint-enable -->
@@ -155,7 +174,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .ease:hover {
-          @extend %dropshadow-8dp;
+          @extend %dropshadow-6dp;
           @extend %md-standard-func;
 
           cursor: pointer;
@@ -182,30 +201,40 @@
 
   @import '~~/lib/styles/definitions';
 
-  .box {
-    @extend %dropshadow-4dp;
+  dt {
+    font-weight: bold;
+  }
 
+  .box {
     display: inline-block;
-    min-width: 150px;
+    min-width: 80px;
     padding: 8px;
     margin: 32px;
     font-size: smaller;
     text-align: center;
     border-radius: $radius;
   }
 
-  .more-shadow {
-    @extend %dropshadow-12dp;
+  .box-1dp {
+    @extend %dropshadow-1dp;
+  }
+
+  .box-2dp {
+    @extend %dropshadow-2dp;
+  }
+
+  .box-6dp {
+    @extend %dropshadow-6dp;
   }
 
   .immediate:hover {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     cursor: pointer;
   }
 
   .ease:hover {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
     @extend %md-standard-func;
 
     cursor: pointer;

diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss
@@ -1,5 +1,5 @@
 $radius: 4px;
-$core-time: 0.25s;
+$core-time: 0.15s;
 
 // Use this mixin in select containers where the content is likely going to be
 // very large and mobile users may benefit from a smooth touch scroll experience.