From 4ffd21d0f0f161621e333700f84f9008a1c68bc7 Mon Sep 17 00:00:00 2001 From: Shivam Daksh Date: Sat, 17 Aug 2024 12:08:25 +0530 Subject: [PATCH 1/9] functionality added and available to use in playground --- lib/KThemePlugin.js | 5 +++++ lib/styles/darkenColors.js | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 lib/styles/darkenColors.js diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js index 8f7e377a4..3531b4692 100644 --- a/lib/KThemePlugin.js +++ b/lib/KThemePlugin.js @@ -1,5 +1,6 @@ import { isNuxtServerSideRendering } from '../lib/utils'; import computedClass from './styles/computedClass'; +import { darken1, darken2, darken3 } from './styles/darkenColors.js'; import KBreadcrumbs from './KBreadcrumbs'; import KButton from './buttons-and-links/KButton'; @@ -115,6 +116,10 @@ export default function KThemePlugin(Vue) { Vue.prototype.$themePalette = themePalette(); Vue.prototype.$computedClass = computedClass; + Vue.prototype.$darken1 = darken1; + Vue.prototype.$darken2 = darken2; + Vue.prototype.$darken3 = darken3; + // globally-accessible components Vue.component('KButton', KButton); Vue.component('KButtonGroup', KButtonGroup); diff --git a/lib/styles/darkenColors.js b/lib/styles/darkenColors.js new file mode 100644 index 000000000..7c461a6f4 --- /dev/null +++ b/lib/styles/darkenColors.js @@ -0,0 +1,19 @@ +import Color from 'color'; + +export function darken1(color) { + return Color(color) + .darken(0.15) + .hex(); +} + +export function darken2(color) { + return Color(color) + .darken(0.3) + .hex(); +} + +export function darken3(color) { + return Color(color) + .darken(0.45) + .hex(); +} From 00fcee68cf9e4c87b804f3672463499dc9fbae26 Mon Sep 17 00:00:00 2001 From: Shivam Daksh Date: Mon, 19 Aug 2024 20:53:40 +0530 Subject: [PATCH 2/9] color@3.2.1 is added to package.json and yarn.lock --- package.json | 1 + yarn.lock | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e11d8b63d..d3c965911 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@vue/composition-api": "1.7.2", "aphrodite": "https://github.com/learningequality/aphrodite/", "autosize": "3.0.21", + "color": "3.2.1", "css-element-queries": "1.2.0", "date-fns": "1.30.1", "frame-throttle": "3.0.0", diff --git a/yarn.lock b/yarn.lock index 0b24d7f8f..297219939 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4021,7 +4021,7 @@ color-string@^1.6.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^3.0.0: +color@3.2.1, color@^3.0.0: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== From 92401f13ceb2457f118080ebca9502b43de84cce Mon Sep 17 00:00:00 2001 From: Shivam Daksh Date: Wed, 21 Aug 2024 04:18:10 +0530 Subject: [PATCH 3/9] fixing CHANGELOG.md --- CHANGELOG.md | 98 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 90 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94fb8fb6b..213ced7b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,50 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Upcoming version 5.x.x (`develop` branch) +- [#738] + - **Description:** Bump KDS version to 5.0.0-rc2. + - **Products impact:** -. + - **Addresses:** -. + - **Components:** -. + - **Breaking:** -. + - **Impacts a11y:** -. + - **Guidance:** -. + +[#738]: https://github.com/learningequality/kolibri-design-system/pull/738 + +- [705] + - **Description:** Update`KCard` updates: Adds 'preserveAboveTitle`, `preserveBelowTitle`, `preserveFooter` prop for flexible slot management. + - **Products impact:** Card updates + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/702 + - **Components:** `KCard` + - **Breaking:** N0 + - **Impacts a11y:** No + - **Guidance:** + +[705]: https://github.com/learningequality/kolibri-design-system/pull/705 + +- [719] + - **Description:** Removes KResponsiveWindowMixin. + - **Products impact:** removed API. + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/679. + - **Components:** KResponsiveWindowMixin. + - **Breaking:** yes. + - **Impacts a11y:** no. + - **Guidance:** Replace any use of KResponsiveWindowMixin with the new composable useKResponsiveWindow. + +[719]: https://github.com/learningequality/kolibri-design-system/pull/719 + +- [#718] + - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property. + - **Products impact:** none + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/713 + - **Components:** - + - **Breaking:** no + - **Impacts a11y:** - + - **Guidance:** - + +[#718]: https://github.com/learningequality/kolibri-design-system/pull/718 + - [#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 @@ -14,7 +58,8 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Guidance:** Find all polite and live regions (or roles) in an application. Remove them and instead use `useKLiveRegion.sendPoliteMessage` and `useKLiveRegion.sendAssertiveMessage` to update the live regions that KDS inserted to document body during installation. [#687]: https://github.com/learningequality/kolibri-design-system/pull/687 - [#688] + +- [#688] - **Description:** Update`KCard` styling - **Products impact:** Card updates - **Addresses:** @@ -22,10 +67,10 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** N0 - **Impacts a11y:** No - **Guidance:** - [#688] https://github.com/learningequality/kolibri-design-system/pull/688 +[#688]: https://github.com/learningequality/kolibri-design-system/pull/688 -[#707] +- [#707] - **Description:** Card Validations - **Products impact:** - **Addresses:** [#695](https://github.com/learningequality/kolibri-design-system/issues/695) @@ -33,9 +78,22 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** No - **Impacts a11y:** No - **Guidance:** - [#707] https://github.com/learningequality/kolibri-design-system/pull/707 -[#709] +[#707]: https://github.com/learningequality/kolibri-design-system/pull/707 + +- [#706] + - **Description:** Add new alignment options to `KCard` + - **Products impact:** new alignment + - **Addresses:** [#701](https://github.com/learningequality/kolibri-design-system/issues/701) + - **Components:** `KCard` + - **Breaking:** N0 + - **Impacts a11y:** No + - **Guidance:** + +[#706]: https://github.com/learningequality/kolibri-design-system/pull/706 + + +- [#709] - **Description:** Update spaces to the latest design`KCard` - **Products impact:** Card updates - **Addresses:** [#704](https://github.com/learningequality/kolibri-design-system/issues/704) @@ -43,9 +101,10 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** N0 - **Impacts a11y:** No - **Guidance:** - [#709] https://github.com/learningequality/kolibri-design-system/pull/709 -[#625] +[#709]: https://github.com/learningequality/kolibri-design-system/pull/709 + +- [#625] - **Description:** Initial implementation of `KCard` component - **Products impact:** New Component - **Addresses:** [#530](https://github.com/learningequality/kolibri-design-system/issues/530) @@ -53,6 +112,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** No - **Impacts a11y:** Yes - **Guidance:** + [#625]: https://github.com/learningequality/kolibri-design-system/pull/625 - [#678] @@ -135,6 +195,28 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) +- [#737] + - **Description:** Bump KDS version to 4.4.1. + - **Products impact:** -. + - **Addresses:** -. + - **Components:** -. + - **Breaking:** -. + - **Impacts a11y:** -. + - **Guidance:** -. + +[#737]: https://github.com/learningequality/kolibri-design-system/pull/737 + +- [#717] + - **Description:** Fix ResizeOserver errors when KListWithOverflow resize very quickly. + - **Products impact:** bugfix. + - **Addresses:** Sentry error. + - **Components:** KListWithOverflow. + - **Breaking:** no. + - **Impacts a11y:** no. + - **Guidance:** -. + +[#717]: https://github.com/learningequality/kolibri-design-system/pull/717 + - [#680] - **Description:** Adds boolean `appendToRoot` prop to teleport the modal to the body element if true. - **Products impact:** new API. @@ -1782,4 +1864,4 @@ This was the first release of the Design System, with documentation written in a ## Version 0.1.0 -The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation'). +The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation'). \ No newline at end of file From 45e3459b23a7a39dbaf50ec60b9a30f8d4819702 Mon Sep 17 00:00:00 2001 From: Shivam Daksh Date: Wed, 21 Aug 2024 04:24:30 +0530 Subject: [PATCH 4/9] reverting changes in CHANGELOG.md --- CHANGELOG.md | 98 +++++----------------------------------------------- 1 file changed, 8 insertions(+), 90 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 213ced7b3..94fb8fb6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,50 +4,6 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Upcoming version 5.x.x (`develop` branch) -- [#738] - - **Description:** Bump KDS version to 5.0.0-rc2. - - **Products impact:** -. - - **Addresses:** -. - - **Components:** -. - - **Breaking:** -. - - **Impacts a11y:** -. - - **Guidance:** -. - -[#738]: https://github.com/learningequality/kolibri-design-system/pull/738 - -- [705] - - **Description:** Update`KCard` updates: Adds 'preserveAboveTitle`, `preserveBelowTitle`, `preserveFooter` prop for flexible slot management. - - **Products impact:** Card updates - - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/702 - - **Components:** `KCard` - - **Breaking:** N0 - - **Impacts a11y:** No - - **Guidance:** - -[705]: https://github.com/learningequality/kolibri-design-system/pull/705 - -- [719] - - **Description:** Removes KResponsiveWindowMixin. - - **Products impact:** removed API. - - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/679. - - **Components:** KResponsiveWindowMixin. - - **Breaking:** yes. - - **Impacts a11y:** no. - - **Guidance:** Replace any use of KResponsiveWindowMixin with the new composable useKResponsiveWindow. - -[719]: https://github.com/learningequality/kolibri-design-system/pull/719 - -- [#718] - - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property. - - **Products impact:** none - - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/713 - - **Components:** - - - **Breaking:** no - - **Impacts a11y:** - - - **Guidance:** - - -[#718]: https://github.com/learningequality/kolibri-design-system/pull/718 - - [#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 @@ -58,8 +14,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Guidance:** Find all polite and live regions (or roles) in an application. Remove them and instead use `useKLiveRegion.sendPoliteMessage` and `useKLiveRegion.sendAssertiveMessage` to update the live regions that KDS inserted to document body during installation. [#687]: https://github.com/learningequality/kolibri-design-system/pull/687 - -- [#688] + [#688] - **Description:** Update`KCard` styling - **Products impact:** Card updates - **Addresses:** @@ -67,10 +22,10 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** N0 - **Impacts a11y:** No - **Guidance:** + [#688] https://github.com/learningequality/kolibri-design-system/pull/688 -[#688]: https://github.com/learningequality/kolibri-design-system/pull/688 -- [#707] +[#707] - **Description:** Card Validations - **Products impact:** - **Addresses:** [#695](https://github.com/learningequality/kolibri-design-system/issues/695) @@ -78,22 +33,9 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** No - **Impacts a11y:** No - **Guidance:** + [#707] https://github.com/learningequality/kolibri-design-system/pull/707 -[#707]: https://github.com/learningequality/kolibri-design-system/pull/707 - -- [#706] - - **Description:** Add new alignment options to `KCard` - - **Products impact:** new alignment - - **Addresses:** [#701](https://github.com/learningequality/kolibri-design-system/issues/701) - - **Components:** `KCard` - - **Breaking:** N0 - - **Impacts a11y:** No - - **Guidance:** - -[#706]: https://github.com/learningequality/kolibri-design-system/pull/706 - - -- [#709] +[#709] - **Description:** Update spaces to the latest design`KCard` - **Products impact:** Card updates - **Addresses:** [#704](https://github.com/learningequality/kolibri-design-system/issues/704) @@ -101,10 +43,9 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** N0 - **Impacts a11y:** No - **Guidance:** + [#709] https://github.com/learningequality/kolibri-design-system/pull/709 -[#709]: https://github.com/learningequality/kolibri-design-system/pull/709 - -- [#625] +[#625] - **Description:** Initial implementation of `KCard` component - **Products impact:** New Component - **Addresses:** [#530](https://github.com/learningequality/kolibri-design-system/issues/530) @@ -112,7 +53,6 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Breaking:** No - **Impacts a11y:** Yes - **Guidance:** - [#625]: https://github.com/learningequality/kolibri-design-system/pull/625 - [#678] @@ -195,28 +135,6 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Version 4.x.x (`release-v4` branch) -- [#737] - - **Description:** Bump KDS version to 4.4.1. - - **Products impact:** -. - - **Addresses:** -. - - **Components:** -. - - **Breaking:** -. - - **Impacts a11y:** -. - - **Guidance:** -. - -[#737]: https://github.com/learningequality/kolibri-design-system/pull/737 - -- [#717] - - **Description:** Fix ResizeOserver errors when KListWithOverflow resize very quickly. - - **Products impact:** bugfix. - - **Addresses:** Sentry error. - - **Components:** KListWithOverflow. - - **Breaking:** no. - - **Impacts a11y:** no. - - **Guidance:** -. - -[#717]: https://github.com/learningequality/kolibri-design-system/pull/717 - - [#680] - **Description:** Adds boolean `appendToRoot` prop to teleport the modal to the body element if true. - **Products impact:** new API. @@ -1864,4 +1782,4 @@ This was the first release of the Design System, with documentation written in a ## Version 0.1.0 -The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation'). \ No newline at end of file +The design system was originally based on a set of internal Kolibri components and their use as documented in the Kolibri Style Guide, which was first introduced into the Kolibri code base [in version 0.6](https://github.com/learningequality/kolibri/tree/release-v0.6.x/kolibri/plugins/style_guide). This remained until [version 0.13](https://github.com/learningequality/kolibri/tree/release-v0.13.x/kolibri/plugins/style_guide) after which the content was migrated to the [current site](https://design-system.learningequality.org/ 'Kolibri Design System Documentation'). From 3adf09510dd996d427eb5fdf33eba0b4d809e40b Mon Sep 17 00:00:00 2001 From: Shivam Daksh Date: Wed, 21 Aug 2024 14:24:15 +0530 Subject: [PATCH 5/9] adding changelogs --- CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94fb8fb6b..90d015fc8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,15 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Guidance:** [#688] https://github.com/learningequality/kolibri-design-system/pull/688 +[#728] + - **Description:** [add the description of your PR here] + - **Products impact:** None + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/726 + - **Components:** + - **Breaking:** N0 + - **Impacts a11y:** No + - **Guidance:** + [#728]https://github.com/learningequality/kolibri-design-system/pull/728 [#707] - **Description:** Card Validations From 5eabf999caf62b8acf2c8c99ab079e5499a16c1d Mon Sep 17 00:00:00 2001 From: Shivam Daksh Date: Wed, 21 Aug 2024 15:30:01 +0530 Subject: [PATCH 6/9] adding more description to CHANGELOG.md --- CHANGELOG.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 90d015fc8..2d3a9acc7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Upcoming version 5.x.x (`develop` branch) +- [#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 + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/726 + - **Components:** Styling utilities (`$darken1(hexColorValue)`,`$darken2(hexColorValue)` and `$darken3(hexColorValue)` functions) + - **Breaking:** no + - **Impacts a11y:** no + - **Guidance:** Ensure to install the exact `color` version specified in `package.json` to maintain compatibility with Node.js v10. + +[#728]: https://github.com/learningequality/kolibri-design-system/pull/728 + - [#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 @@ -14,6 +25,7 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Guidance:** Find all polite and live regions (or roles) in an application. Remove them and instead use `useKLiveRegion.sendPoliteMessage` and `useKLiveRegion.sendAssertiveMessage` to update the live regions that KDS inserted to document body during installation. [#687]: https://github.com/learningequality/kolibri-design-system/pull/687 + [#688] - **Description:** Update`KCard` styling - **Products impact:** Card updates @@ -24,16 +36,6 @@ Changelog is rather internal in nature. See release notes for the public overvie - **Guidance:** [#688] https://github.com/learningequality/kolibri-design-system/pull/688 -[#728] - - **Description:** [add the description of your PR here] - - **Products impact:** None - - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/726 - - **Components:** - - **Breaking:** N0 - - **Impacts a11y:** No - - **Guidance:** - [#728]https://github.com/learningequality/kolibri-design-system/pull/728 - [#707] - **Description:** Card Validations - **Products impact:** From 38bf1f7debf7ee4cffc838e90c984ea8640a4f91 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Wed, 21 Aug 2024 15:03:34 +0200 Subject: [PATCH 7/9] Tweak darken values to be closer to designs --- lib/styles/darkenColors.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/styles/darkenColors.js b/lib/styles/darkenColors.js index 7c461a6f4..12a5cd6da 100644 --- a/lib/styles/darkenColors.js +++ b/lib/styles/darkenColors.js @@ -2,18 +2,18 @@ import Color from 'color'; export function darken1(color) { return Color(color) - .darken(0.15) + .darken(0.19) .hex(); } export function darken2(color) { return Color(color) - .darken(0.3) + .darken(0.4) .hex(); } export function darken3(color) { return Color(color) - .darken(0.45) + .darken(0.58) .hex(); } From d468c9658d91b497c3d8e8afa6bda0a16b04a3ef Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Wed, 21 Aug 2024 15:30:20 +0200 Subject: [PATCH 8/9] Add guidance on darken utilities to docs --- docs/pages/colors.vue | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index 312829331..5844c89c2 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -92,7 +92,32 @@
  • palette refers to $themePalette
    • +

    Darken utilities

    +

    You can apply darken utilities $darken1, $darken2, and $darken3 to palette colors and tokens to achieve their darker shades. They are available on every Vue component.

    + + +
    +
    +
    +
    +     + +
    + base +
    +
    + $darken1 +
    +
    + $darken2 +
    +
    + $darken3 +
    +     + +

    These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.

    @@ -323,4 +348,17 @@ width: 350px; } + .darken-block { + display: inline-flex; + align-items: center; + justify-content: center; + width: 140px; + height: 140px; + + code { + padding: 4px; + background-color: rgba(255, 255, 255, 0.8); + } + } + From 46c573f37764156aabb099f3242064b3cd8e1309 Mon Sep 17 00:00:00 2001 From: Michaela Robosova Date: Wed, 21 Aug 2024 15:48:28 +0200 Subject: [PATCH 9/9] Docs fix --- docs/pages/colors.vue | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue index 5844c89c2..a6445476d 100644 --- a/docs/pages/colors.vue +++ b/docs/pages/colors.vue @@ -97,10 +97,18 @@

    You can apply darken utilities $darken1, $darken2, and $darken3 to palette colors and tokens to achieve their darker shades. They are available on every Vue component.

    -
    -
    -
    -
    +
    + base +
    +
    + $darken1 +
    +
    + $darken2 +
    +
    + $darken3 +