From a14db304108b1f207ab857c0f70f6fd964d1e167 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Sun, 11 Aug 2024 17:06:37 +0200 Subject: [PATCH 1/4] Update documentation for shadows to the latest guidance from the design team. --- docs/pages/styling/index.vue | 69 +++++++++++++++++++++++++----------- 1 file changed, 49 insertions(+), 20 deletions(-) diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue index 919d5ad54..8160ca2bb 100644 --- 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.

- Constants are made available as and snippets are made available as . For example, we provide a constant called $radius (defined as 4px) and a placeholder selector called %dropshadow-2dp which creates a 4dp drop shadow. These can be used to style an element by importing the definitions file: + Constants are made available as and snippets are made available as . For example, we provide a constant called $radius (defined as 4px) and a placeholder selector called %dropshadow-2dp which creates a 2dp drop shadow. These can be used to style an element by importing the definitions file:

Use these by importing the design system's definitions.scss 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 @@

can help easily reproduce styles like:

-
+
Hello!
@@ -85,27 +85,46 @@ In the real world, the shadow an object casts is often a physical manifestation of its elevation.

- The design system provides a set of pre-defined 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 which allow consistent application of realistic-looking shadows: 1dp, 2dp, and 6dp:

-

For example:

+ -
- 4dp +
+ 1dp
-
- 12dp +
+ 2dp +
+
+ 6dp
+ +

Follow the guidance below to decide what depth to use for a drop shadow:

+
+
1dp
containers, panels, controls
+
2dp
cards, app bars, buttons, menu, tooltips, snackbars
+
6dp
modals, card hover
+
+

- can be achieved by with the dropshadow helpers. + This can be achieved by with the dropshadow helpers:

@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; } @@ -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,11 +201,13 @@ @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; @@ -194,18 +215,26 @@ 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; From b56e9384b467f512fa28c17c21b6d40897f79c06 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Sun, 11 Aug 2024 17:07:58 +0200 Subject: [PATCH 2/4] Update core-time to the latest guidance from the design team. --- lib/styles/definitions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss index a3f38d648..ba1350e88 100644 --- 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. From 45d20355711fc4686efb3b84da99ed40e3bc4151 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Sun, 11 Aug 2024 17:28:15 +0200 Subject: [PATCH 3/4] Fix lint --- docs/pages/styling/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue index 8160ca2bb..72482a512 100644 --- a/docs/pages/styling/index.vue +++ b/docs/pages/styling/index.vue @@ -103,7 +103,7 @@

Follow the guidance below to decide what depth to use for a drop shadow:

1dp
containers, panels, controls
-
2dp
cards, app bars, buttons, menu, tooltips, snackbars
+
2dp
cards, app bars, buttons, menu, tooltips, snackbars
6dp
modals, card hover
From 1e39c59375a3af52f460877802da1ff8dbe023f9 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Sun, 11 Aug 2024 17:28:40 +0200 Subject: [PATCH 4/4] Update changelog --- CHANGELOG.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94fb8fb6b..03c9ecf0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,29 @@ 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 + - [#687] - **Description:** Adds logic that inserts ARIA live assertive and polite regions to an application's document body during KDS initialization and documents this on the new "Installation" page. Relatedly adds `useKLiveRegion` composable with public methods for updating the live regions with assertive and polite messages. - **Products impact:** new API