diff --git a/.circleci/config.yml b/.circleci/config.yml index a9df1db87e..4757270c66 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -218,7 +218,7 @@ jobs: keys: - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-hcm- - v2-golden-images-main-hcm- - - v2-golden-images-main-classic-lightest-medium-ltr- + - v2-golden-images-main-classic-light-medium-ltr- - run: name: Count baseline images command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt @@ -322,7 +322,7 @@ workflows: matrix: parameters: theme: [classic, express] - color: [lightest, light, dark, darkest] + color: [light, dark, darkest] scale: [medium, large] dir: [ltr, rtl] filters: diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts index 767b2df8dc..67ba3ce726 100644 --- a/projects/documentation/src/components/layout.ts +++ b/projects/documentation/src/components/layout.ts @@ -94,9 +94,6 @@ const lazyStyleFragment = (name: Color | Scale, flavor: ThemeVariant): void => { case 'light-spectrum': import('@spectrum-web-components/theme/theme-light.js'); break; - case 'lightest-spectrum': - import('@spectrum-web-components/theme/theme-lightest.js'); - break; case 'medium-spectrum': import('@spectrum-web-components/theme/scale-medium.js'); break; @@ -112,9 +109,6 @@ const lazyStyleFragment = (name: Color | Scale, flavor: ThemeVariant): void => { case 'light-express': import('@spectrum-web-components/theme/express/theme-light.js'); break; - case 'lightest-express': - import('@spectrum-web-components/theme/express/theme-lightest.js'); - break; case 'medium-express': import('@spectrum-web-components/theme/express/scale-medium.js'); break; @@ -392,7 +386,6 @@ export class LayoutElement extends LitElement { value=${this.color} @change=${this.updateColor} > - Lightest Light Dark Darkest diff --git a/projects/documentation/src/getting-started.ts b/projects/documentation/src/getting-started.ts index e2e68f85ec..603f85c132 100644 --- a/projects/documentation/src/getting-started.ts +++ b/projects/documentation/src/getting-started.ts @@ -10,5 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/theme/theme-lightest.js'; import '@spectrum-web-components/theme/scale-medium.js'; diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index a3f5a8044b..f8a34fcd51 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -341,7 +341,6 @@ export class StoryDecorator extends SpectrumElement { .value=${this.color} @change=${this.updateTheme} > - Lightest Light Dark Darkest diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js index 6fe2ff2c3d..79a0593218 100755 --- a/scripts/spectrum-vars.js +++ b/scripts/spectrum-vars.js @@ -140,7 +140,7 @@ const spectrumPaths = [ ]; // sources to use from spectrum-css -const themes = ['lightest', 'light', 'dark', 'darkest']; +const themes = ['light', 'dark', 'darkest']; const scales = ['medium', 'large']; const cores = ['global']; const processes = []; @@ -152,7 +152,6 @@ spectrumPaths.forEach((spectrumPath, i) => { const isExpress = i === 1; if (isExpress) packageDir.push('express'); themes.forEach((theme) => { - if (isExpress && ['lightest', 'darkest'].includes(theme)) return; const srcPath = path.join(spectrumPath, `spectrum-${theme}.css`); const dstPath = path.resolve( path.join( diff --git a/tasks/build-preview-urls-comment.js b/tasks/build-preview-urls-comment.js index f50810a83c..c75090c361 100644 --- a/tasks/build-preview-urls-comment.js +++ b/tasks/build-preview-urls-comment.js @@ -56,7 +56,7 @@ export const buildPreviewURLComment = (ref) => { const previewLinks = []; const themes = ['Classic', 'Express']; const scales = ['Medium', 'Large']; - const colors = ['Lightest', 'Light', 'Dark', 'Darkest']; + const colors = ['Light', 'Dark', 'Darkest']; const directions = ['LTR', 'RTL']; previewLinks.push( `- [High Contrast Mode | Medium | LTR](https://${getHash( diff --git a/test/benchmark/helpers.ts b/test/benchmark/helpers.ts index b0ae6e069c..9833ccde78 100644 --- a/test/benchmark/helpers.ts +++ b/test/benchmark/helpers.ts @@ -14,7 +14,6 @@ import { html, LitElement, render, TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/scale-large.js'; -import '@spectrum-web-components/theme/theme-lightest.js'; declare global { interface Window { @@ -124,7 +123,7 @@ export const measureFixtureCreation = async ( const templates = new Array(opts.numRenders).fill(template); const renderContainer = document.createElement('sp-theme'); renderContainer.scale = 'large'; - renderContainer.color = 'lightest'; + renderContainer.color = 'light'; document.body.appendChild(renderContainer); const start = window.tachometerStart === 'page' ? 0 : performance.now(); diff --git a/test/visual/review.js b/test/visual/review.js index 01bedd1103..eee9bedd60 100644 --- a/test/visual/review.js +++ b/test/visual/review.js @@ -29,7 +29,7 @@ const getHash = (context) => { const vrts = []; const themes = ['Classic', 'Express']; const scales = ['Medium', 'Large']; -const colors = ['Lightest', 'Light', 'Dark', 'Darkest']; +const colors = ['Light', 'Dark', 'Darkest']; const directions = ['LTR', 'RTL']; vrts.push([ `High Contrast Mode | Medium | LTR`, diff --git a/test/visual/test.ts b/test/visual/test.ts index 83d1521ea9..5539132792 100644 --- a/test/visual/test.ts +++ b/test/visual/test.ts @@ -205,7 +205,7 @@ export const regressVisuals = async (name: string, stories: TestsType) => { if (color && scale && dir) { test(stories, name, color, scale, dir); } else { - const colors: Color[] = ['lightest', 'light', 'dark', 'darkest']; + const colors: Color[] = ['light', 'dark', 'darkest']; const scales: Scale[] = ['medium', 'large']; const directions: ('ltr' | 'rtl')[] = ['ltr', 'rtl']; colors.forEach((color: Color) => { diff --git a/tools/styles/README.md b/tools/styles/README.md index 238d76bb24..cc0e057a96 100644 --- a/tools/styles/README.md +++ b/tools/styles/README.md @@ -33,12 +33,6 @@ This file brings together the global variables and font settings with the "Dark" This file brings together the global variables and font settings with the "Light" color set and "Medium" scale system specification. -``` -@import '@spectrum-web-components/styles/all-medium-lightest.css'; -``` - -This file brings together the global variables and font settings with the "Lightest" color set and "Medium" scale system specification. - ``` @import '@spectrum-web-components/styles/all-large-darkest.css'; ``` @@ -57,12 +51,6 @@ This file brings together the global variables and font settings with the "Dark" This file brings together the global variables and font settings with the "Light" color set and "Large" scale system specification. -``` -@import '@spectrum-web-components/styles/all-large-lightest.css'; -``` - -This file brings together the global variables and font settings with the "Lightest" color set and "Large" scale system specification. - ## Color sets ### Darkest @@ -89,14 +77,6 @@ This file provides only the variables needed to power a color palette featuring This file provides only the variables needed to power a color palette featuring colors found in the "Light" theme. -### Lightest - -``` -@import '@spectrum-web-components/styles/theme-lightest.css'; -``` - -This file provides only the variables needed to power a color palette featuring colors found in the "Lightest" theme. - ## Scale ### Medium diff --git a/tools/styles/all-large-lightest.css b/tools/styles/all-large-lightest.css index e566aa2334..d9e41bee89 100755 --- a/tools/styles/all-large-lightest.css +++ b/tools/styles/all-large-lightest.css @@ -12,5 +12,4 @@ governing permissions and limitations under the License. @import 'core-global.css'; @import 'typography.css'; -@import 'theme-lightest.css'; @import 'scale-large.css'; diff --git a/tools/styles/all-medium-lightest.css b/tools/styles/all-medium-lightest.css index 4f99af38d5..d4bb4b6ee9 100755 --- a/tools/styles/all-medium-lightest.css +++ b/tools/styles/all-medium-lightest.css @@ -12,5 +12,4 @@ governing permissions and limitations under the License. @import 'core-global.css'; @import 'typography.css'; -@import 'theme-lightest.css'; @import 'scale-medium.css'; diff --git a/tools/styles/exports.json b/tools/styles/exports.json index 90f5144515..dcffd2b37e 100644 --- a/tools/styles/exports.json +++ b/tools/styles/exports.json @@ -3,11 +3,9 @@ "./all-large-dark.css": "./all-large-dark.css", "./all-large-darkest.css": "./all-large-darkest.css", "./all-large-light.css": "./all-large-light.css", - "./all-large-lightest.css": "./all-large-lightest.css", "./all-medium-dark.css": "./all-medium-dark.css", "./all-medium-darkest.css": "./all-medium-darkest.css", "./all-medium-light.css": "./all-medium-light.css", - "./all-medium-lightest.css": "./all-medium-lightest.css", "./core-global.css": "./core-global.css", "./express/core-global.css": "./express/core-global.css", "./scale-large.css": "./scale-large.css", @@ -20,8 +18,6 @@ "./express/theme-darkest.css": "./express/theme-darkest.css", "./theme-light.css": "./theme-light.css", "./express/theme-light.css": "./express/theme-light.css", - "./theme-lightest.css": "./theme-lightest.css", - "./express/theme-lightest.css": "./express/theme-lightest.css", "./typography.css": "./typography.css", "./body.js": "./body.js", "./code.js": "./code.js", diff --git a/tools/styles/package.json b/tools/styles/package.json index f720256d00..02cd7b04e7 100644 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -25,11 +25,9 @@ "./all-large-dark.css": "./all-large-dark.css", "./all-large-darkest.css": "./all-large-darkest.css", "./all-large-light.css": "./all-large-light.css", - "./all-large-lightest.css": "./all-large-lightest.css", "./all-medium-dark.css": "./all-medium-dark.css", "./all-medium-darkest.css": "./all-medium-darkest.css", "./all-medium-light.css": "./all-medium-light.css", - "./all-medium-lightest.css": "./all-medium-lightest.css", "./core-global.css": "./core-global.css", "./express/core-global.css": "./express/core-global.css", "./scale-large.css": "./scale-large.css", @@ -42,8 +40,6 @@ "./express/theme-darkest.css": "./express/theme-darkest.css", "./theme-light.css": "./theme-light.css", "./express/theme-light.css": "./express/theme-light.css", - "./theme-lightest.css": "./theme-lightest.css", - "./express/theme-lightest.css": "./express/theme-lightest.css", "./typography.css": "./typography.css", "./body.js": { "development": "./body.dev.js", @@ -117,5 +113,5 @@ "sideEffects": [ "./**/*.css" ], - "style": "all-medium-lightest.css" + "style": "all-medium-light.css" } diff --git a/tools/theme/README.md b/tools/theme/README.md index 695012a156..930b48342e 100644 --- a/tools/theme/README.md +++ b/tools/theme/README.md @@ -1,6 +1,6 @@ ## Description -`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different scales (`medium` and `large`) to support desktop & mobile UI. +`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`light`, `dark`, and `darkest`) and two different scales (`medium` and `large`) to support desktop & mobile UI. ### Usage @@ -18,7 +18,7 @@ import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/src/themes.js'; ``` -The above import statements do two things: the first will get you started using the `` wrapper element, and the second includes all four (4) color options (`lightest`, `light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package. +The above import statements do two things: the first will get you started using the `` wrapper element, and the second includes all four (4) color options (`light`, `dark`, and `darkest`) and both (2) scale options (`medium` and `large`) for the Spectrum Classic theme. Having all of these options available together is the easiest way to get a handle on the theming possibilities offered by the package and empowers you to prototype and test various deliveries of your application. However, reserving the download and parse time for all of the variants may not be required for all applications. See the "Advanced usage" section below for instructions on tuning the performance of an application that leverages this package. Below are more ways to import the different scale and color options individually, in case you didn't want to import all of them as we did above. You'll use these statements in combination with the side effectful registration import statement `import '@spectrum-web-components/theme/sp-theme.js'`. @@ -40,13 +40,11 @@ Or you can import the themes and scales individually: import '@spectrum-web-components/theme/theme-darkest.js'; import '@spectrum-web-components/theme/theme-dark.js'; import '@spectrum-web-components/theme/theme-light.js'; -import '@spectrum-web-components/theme/theme-lightest.js'; import '@spectrum-web-components/theme/scale-medium.js'; import '@spectrum-web-components/theme/scale-large.js'; import '@spectrum-web-components/theme/express/theme-darkest.js'; import '@spectrum-web-components/theme/express/theme-dark.js'; import '@spectrum-web-components/theme/express/theme-light.js'; -import '@spectrum-web-components/theme/express/theme-lightest.js'; import '@spectrum-web-components/theme/express/scale-medium.js'; import '@spectrum-web-components/theme/express/scale-large.js'; ``` diff --git a/tools/theme/exports.json b/tools/theme/exports.json index d70beaf107..9cc39b55a4 100644 --- a/tools/theme/exports.json +++ b/tools/theme/exports.json @@ -6,7 +6,6 @@ "./sp-theme.js": "./sp-theme.js", "./scale-medium.js": "./scale-medium.js", "./scale-large.js": "./scale-large.js", - "./theme-lightest.js": "./theme-lightest.js", "./theme-light.js": "./theme-light.js", "./theme-dark.js": "./theme-dark.js", "./theme-darkest.js": "./theme-darkest.js" diff --git a/tools/theme/express/theme-lightest.ts b/tools/theme/express/theme-lightest.ts deleted file mode 100644 index 8e196c85fa..0000000000 --- a/tools/theme/express/theme-lightest.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import lightStyles from '../src/express/theme-light.css.js'; -import { Theme } from '../src/Theme.js'; -import '../src/express/core.js'; - -Theme.registerThemeFragment('lightest-express', 'color', lightStyles); diff --git a/tools/theme/package.json b/tools/theme/package.json index b9728ba2ab..3e4d184e53 100644 --- a/tools/theme/package.json +++ b/tools/theme/package.json @@ -38,7 +38,6 @@ "./src/theme-dark.css.js": "./src/theme-dark.css.js", "./src/theme-darkest.css.js": "./src/theme-darkest.css.js", "./src/theme-light.css.js": "./src/theme-light.css.js", - "./src/theme-lightest.css.js": "./src/theme-lightest.css.js", "./src/theme.css.js": "./src/theme.css.js", "./src/themes.js": { "development": "./src/themes.dev.js", @@ -65,10 +64,6 @@ "development": "./express/theme-light.dev.js", "default": "./express/theme-light.js" }, - "./express/theme-lightest.js": { - "development": "./express/theme-lightest.dev.js", - "default": "./express/theme-lightest.js" - }, "./src/express/core.js": { "development": "./src/express/core.dev.js", "default": "./src/express/core.js" @@ -98,10 +93,6 @@ "development": "./scale-large.dev.js", "default": "./scale-large.js" }, - "./theme-lightest.js": { - "development": "./theme-lightest.dev.js", - "default": "./theme-lightest.js" - }, "./theme-light.js": { "development": "./theme-light.dev.js", "default": "./theme-light.js" diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts index f3d773b0d3..f500d8091b 100644 --- a/tools/theme/src/Theme.ts +++ b/tools/theme/src/Theme.ts @@ -47,11 +47,9 @@ type FragmentMap = Map; export type ThemeFragmentMap = Map; export type Color = | 'light' - | 'lightest' | 'dark' | 'darkest' | 'light-express' - | 'lightest-express' | 'dark-express' | 'darkest-express'; export type Scale = 'medium' | 'large' | 'medium-express' | 'large-express'; @@ -60,11 +58,9 @@ const ThemeVariantValues = ['spectrum', 'express']; const ScaleValues = ['medium', 'large', 'medium-express', 'large-express']; const ColorValues = [ 'light', - 'lightest', 'dark', 'darkest', 'light-express', - 'lightest-express', 'dark-express', 'darkest-express', ]; @@ -198,7 +194,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider { * The Spectrum color stops to apply to content scoped by this `sp-theme` element. * * A value is requried. - * @type {"lightest" | "light" | "dark" | "darkest" | ""} + * @type {"light" | "dark" | "darkest" | ""} * @attr */ get color(): Color | '' { diff --git a/tools/theme/src/express/themes.ts b/tools/theme/src/express/themes.ts index c705256e09..faba4833d1 100644 --- a/tools/theme/src/express/themes.ts +++ b/tools/theme/src/express/themes.ts @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ import '../../express/theme-light.js'; -import '../../express/theme-lightest.js'; import '../../express/theme-dark.js'; import '../../express/theme-darkest.js'; import '../../express/scale-medium.js'; diff --git a/tools/theme/src/theme-lightest.css b/tools/theme/src/theme-lightest.css deleted file mode 100644 index bd18d697b5..0000000000 --- a/tools/theme/src/theme-lightest.css +++ /dev/null @@ -1,15 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -@import url('@spectrum-web-components/styles/theme-lightest.css'); -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/custom-light-vars.css'); diff --git a/tools/theme/src/themes.ts b/tools/theme/src/themes.ts index f1b32b7442..85910abbbb 100644 --- a/tools/theme/src/themes.ts +++ b/tools/theme/src/themes.ts @@ -11,7 +11,6 @@ governing permissions and limitations under the License. */ import '../theme-light.js'; -import '../theme-lightest.js'; import '../theme-dark.js'; import '../theme-darkest.js'; import '../scale-medium.js'; diff --git a/tools/theme/test/theme-lazy.test.ts b/tools/theme/test/theme-lazy.test.ts index c7f76b9a1c..1a1f63968f 100644 --- a/tools/theme/test/theme-lazy.test.ts +++ b/tools/theme/test/theme-lazy.test.ts @@ -14,7 +14,6 @@ import '@spectrum-web-components/theme/sp-theme.js'; import { Theme, ThemeFragmentMap } from '@spectrum-web-components/theme'; import coreStyles from '@spectrum-web-components/theme/src/theme.css.js'; import lightStyles from '@spectrum-web-components/theme/src/theme-light.css.js'; -import lightestStyles from '@spectrum-web-components/theme/src/theme-lightest.css.js'; import darkStyles from '@spectrum-web-components/theme/src/theme-dark.css.js'; import darkestStyles from '@spectrum-web-components/theme/src/theme-darkest.css.js'; import largeStyles from '@spectrum-web-components/theme/src/scale-large.css.js'; @@ -36,7 +35,6 @@ describe('Themes - lazy', () => { }); after(() => { Theme.registerThemeFragment('light', 'color', lightStyles); - Theme.registerThemeFragment('lightest', 'color', lightestStyles); Theme.registerThemeFragment('dark', 'color', darkStyles); Theme.registerThemeFragment('darkest', 'color', darkestStyles); Theme.registerThemeFragment('large', 'scale', largeStyles); @@ -88,7 +86,7 @@ describe('Themes - lazy', () => { it('loads w/ no themes', async () => { const el = await fixture( html` - + ` ); @@ -105,13 +103,12 @@ describe('Themes - lazy', () => { it('loads w/ not enough themes', async () => { const el = await fixture( html` - + ` ); await elementUpdated(el); - Theme.registerThemeFragment('light', 'color', lightStyles); Theme.registerThemeFragment('medium', 'scale', mediumStyles); await elementUpdated(el); @@ -127,13 +124,12 @@ describe('Themes - lazy', () => { it('loads w/ lazy themes', async () => { const el = await fixture( html` - + ` ); await elementUpdated(el); - Theme.registerThemeFragment('light', 'color', lightStyles); Theme.registerThemeFragment('medium', 'scale', mediumStyles); await elementUpdated(el); @@ -146,7 +142,7 @@ describe('Themes - lazy', () => { ).to.equal(1); } - Theme.registerThemeFragment('lightest', 'color', lightestStyles); + Theme.registerThemeFragment('light', 'color', lightStyles); Theme.registerThemeFragment('large', 'scale', largeStyles); await elementUpdated(el); diff --git a/tools/theme/test/themes.test.ts b/tools/theme/test/themes.test.ts index 5752e21a91..5348566cfc 100644 --- a/tools/theme/test/themes.test.ts +++ b/tools/theme/test/themes.test.ts @@ -80,21 +80,6 @@ describe('Themes', () => { }); }); -describe('Lightest', () => { - it('loads', async () => { - const el = await fixture( - html` - - ` - ); - - await elementUpdated(el); - - expect(el).to.exist; - expect(el).shadowDom.to.exist; - }); -}); - describe('Medium', () => { it('loads', async () => { const el = await fixture( diff --git a/tools/theme/theme-lightest.ts b/tools/theme/theme-lightest.ts deleted file mode 100644 index ca917ec05b..0000000000 --- a/tools/theme/theme-lightest.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import lightestStyles from './src/theme-lightest.css.js'; -import { Theme } from './src/Theme.js'; -import './core.js'; - -Theme.registerThemeFragment('lightest', 'color', lightestStyles); diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js index 1d07282639..77308c3721 100644 --- a/web-test-runner.utils.js +++ b/web-test-runner.utils.js @@ -135,7 +135,7 @@ const vrtHTML = export let vrtGroups = []; const themeVariants = ['classic', 'express']; -const colors = ['lightest', 'light', 'dark', 'darkest']; +const colors = ['light', 'dark', 'darkest']; const scales = ['medium', 'large']; const directions = ['ltr', 'rtl']; themeVariants.forEach((themeVariant) => {