From 362420be7cd28a7f9930f2c812a5cc63f03c8861 Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Mon, 16 Dec 2024 17:52:43 +0700 Subject: [PATCH 1/4] feat(vars): add dark colors generator --- .changeset/gold-jobs-dress.md | 5 + bin/build-themes.js | 2 +- docs/colors.stories.mdx | 14 + package.json | 5 +- packages/vars/src/colors-bluetint-dark.css | 565 +++++++++++++++++ packages/vars/src/colors-decorative-dark.css | 600 ++++++++++++++++++ packages/vars/src/colors-indigo-dark.css | 564 ++++++++++++++++ packages/vars/src/colors-monochrome-dark.css | 78 +++ packages/vars/src/colors-qualitative-dark.css | 68 ++ packages/vars/src/colors-sequential-dark.css | 98 +++ packages/vars/src/docs/description.mdx | 6 - tools/dark-colors-generator.js | 94 +++ 12 files changed, 2090 insertions(+), 9 deletions(-) create mode 100644 .changeset/gold-jobs-dress.md create mode 100644 packages/vars/src/colors-bluetint-dark.css create mode 100644 packages/vars/src/colors-decorative-dark.css create mode 100644 packages/vars/src/colors-indigo-dark.css create mode 100644 packages/vars/src/colors-monochrome-dark.css create mode 100644 packages/vars/src/colors-qualitative-dark.css create mode 100644 packages/vars/src/colors-sequential-dark.css create mode 100644 tools/dark-colors-generator.js diff --git a/.changeset/gold-jobs-dress.md b/.changeset/gold-jobs-dress.md new file mode 100644 index 0000000000..68738574a6 --- /dev/null +++ b/.changeset/gold-jobs-dress.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-vars': minor +--- + +Добавлены `-dark.css` файлы для цветовых палитр diff --git a/bin/build-themes.js b/bin/build-themes.js index 789745339a..b24af0748e 100755 --- a/bin/build-themes.js +++ b/bin/build-themes.js @@ -43,7 +43,7 @@ const processRootTheme = (cssFile) => { /** * В каждый файл с темой необходимо импортировать переменные - * Это необходимо, так как некоторые проекты используют auri-scripts, который под капотом использует postcss-custom-properties + * Это необходимо, так как некоторые проекты используют arui-scripts, который под капотом использует postcss-custom-properties * 'postcss-custom-properties' - заменяет переменные значениями, что без дублирования импортов переменных будет приводить к потере значений */ const getImports = () => { diff --git a/docs/colors.stories.mdx b/docs/colors.stories.mdx index 5d40f5f01e..0e703e2f1c 100644 --- a/docs/colors.stories.mdx +++ b/docs/colors.stories.mdx @@ -18,6 +18,14 @@ import { Meta } from '@storybook/addon-docs'; - [core-components/vars/colors-pfm.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-pfm.css). - [core-components/vars/colors-students.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-students.css). +Dark цвета хранятся в: +- [core-components/vars/colors-bluetint-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-bluetint-dark.css). +- [core-components/vars/colors-decorative-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-decorative-dark.css). +- [core-components/vars/colors-indigo-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-indigo-dark.css). +- [core-components/vars/colors-monochrome-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-monochrome-dark.css). +- [core-components/vars/colors-qualitative-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-qualitative-dark.css). +- [core-components/vars/colors-sequential-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-sequential-dark.css). + Палитры доступные в ts: - colors-bluetint - colors-decorative @@ -42,6 +50,12 @@ import { Meta } from '@storybook/addon-docs'; } ``` +Цвет можно импортировать напрямую из JS-файла + +```typescript +import {colorLightDecorativeOrange} from '@alfalab/core-components/vars/colors-decorative.module'; +``` + > Если в Figma не видно название цвета или для него не оказалось переменной, спросите у дизайнера почему :) ### Модификации цветов diff --git a/package.json b/package.json index b893175d93..6c00eed6ca 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "build-storybook": "storybook build -o build --quiet", "build-storybook-from-dist": "cross-env BUILD_MODERN_ONLY=true yarn build && cross-env BUILD_STORYBOOK_FROM_DIST=true yarn build-storybook", "serve-storybook": "http-server build -p 9009", - "update-colors": "node ./tools/update-colors.js && stylelint ./packages/{themes,vars}/**/*.css --fix && prettier --write \"./packages/{themes,vars}/**/*.css\"", + "update-colors": "node ./tools/update-colors.js && stylelint ./packages/{themes,vars}/**/*.css --fix && prettier --write \"./packages/{themes,vars}/**/*.css\" && yarn generate-dark-colors", "update-typography": "node ./tools/update-typography.js", "update-usages": "node ./tools/update-usages.js", "lint": "yarn lint:css && yarn lint:js && yarn lint:deps", @@ -40,7 +40,8 @@ "generate-changelog": "cross-env GENERATE_CHANGELOG_ONLY=true node ./bin/release.js", "analyze-package-sizes": "node bin/analyze-package-sizes.mjs", "write-vars-and-themes-version": "node ./bin/write-vars-and-themes-version.js", - "update-bb-mirror": "git config lfs.allowincompletepush true && git push -f 'https://{userName}@git.moscow.alfaintra.net/scm/ef/core-components.git' master:master" + "update-bb-mirror": "git config lfs.allowincompletepush true && git push -f 'https://{userName}@git.moscow.alfaintra.net/scm/ef/core-components.git' master:master", + "generate-dark-colors": " node ./tools/dark-colors-generator.js" }, "browserslist": { "production": [ diff --git a/packages/vars/src/colors-bluetint-dark.css b/packages/vars/src/colors-bluetint-dark.css new file mode 100644 index 0000000000..35704d0d65 --- /dev/null +++ b/packages/vars/src/colors-bluetint-dark.css @@ -0,0 +1,565 @@ +:root { + --color-light-accent-primary: var(--color-dark-accent-primary); + --color-light-accent-primary-hover: var(--color-dark-accent-primary-hover); + --color-light-accent-primary-inverted: var(--color-dark-accent-primary-inverted); + --color-light-accent-primary-inverted-hover: var(--color-dark-accent-primary-inverted-hover); + --color-light-accent-primary-inverted-press: var(--color-dark-accent-primary-inverted-press); + --color-light-accent-primary-press: var(--color-dark-accent-primary-press); + --color-light-accent-secondary: var(--color-dark-accent-secondary); + --color-light-accent-secondary-hover: var(--color-dark-accent-secondary-hover); + --color-light-accent-secondary-inverted: var(--color-dark-accent-secondary-inverted); + --color-light-accent-secondary-inverted-hover: var( + --color-dark-accent-secondary-inverted-hover + ); + --color-light-accent-secondary-inverted-press: var( + --color-dark-accent-secondary-inverted-press + ); + --color-light-accent-secondary-press: var(--color-dark-accent-secondary-press); + --color-light-base-bg-alt-primary: var(--color-dark-base-bg-alt-primary); + --color-light-base-bg-alt-primary-inverted: var(--color-dark-base-bg-alt-primary-inverted); + --color-light-base-bg-alt-secondary: var(--color-dark-base-bg-alt-secondary); + --color-light-base-bg-alt-secondary-inverted: var(--color-dark-base-bg-alt-secondary-inverted); + --color-light-base-bg-alt-tertiary: var(--color-dark-base-bg-alt-tertiary); + --color-light-base-bg-alt-tertiary-inverted: var(--color-dark-base-bg-alt-tertiary-inverted); + --color-light-base-bg-primary: var(--color-dark-base-bg-primary); + --color-light-base-bg-primary-inverted: var(--color-dark-base-bg-primary-inverted); + --color-light-base-bg-secondary: var(--color-dark-base-bg-secondary); + --color-light-base-bg-secondary-inverted: var(--color-dark-base-bg-secondary-inverted); + --color-light-base-bg-tertiary: var(--color-dark-base-bg-tertiary); + --color-light-base-bg-tertiary-inverted: var(--color-dark-base-bg-tertiary-inverted); + --color-light-modal-bg-alt-primary: var(--color-dark-modal-bg-alt-primary); + --color-light-modal-bg-alt-primary-inverted: var(--color-dark-modal-bg-alt-primary-inverted); + --color-light-modal-bg-alt-secondary: var(--color-dark-modal-bg-alt-secondary); + --color-light-modal-bg-alt-secondary-inverted: var( + --color-dark-modal-bg-alt-secondary-inverted + ); + --color-light-modal-bg-alt-tertiary: var(--color-dark-modal-bg-alt-tertiary); + --color-light-modal-bg-alt-tertiary-inverted: var(--color-dark-modal-bg-alt-tertiary-inverted); + --color-light-modal-bg-primary: var(--color-dark-modal-bg-primary); + --color-light-modal-bg-primary-inverted: var(--color-dark-modal-bg-primary-inverted); + --color-light-modal-bg-secondary: var(--color-dark-modal-bg-secondary); + --color-light-modal-bg-secondary-inverted: var(--color-dark-modal-bg-secondary-inverted); + --color-light-modal-bg-tertiary: var(--color-dark-modal-bg-tertiary); + --color-light-modal-bg-tertiary-inverted: var(--color-dark-modal-bg-tertiary-inverted); + --color-light-neutral-0: var(--color-dark-neutral-0); + --color-light-neutral-0-hover: var(--color-dark-neutral-0-hover); + --color-light-neutral-0-inverted: var(--color-dark-neutral-0-inverted); + --color-light-neutral-0-inverted-hover: var(--color-dark-neutral-0-inverted-hover); + --color-light-neutral-0-inverted-press: var(--color-dark-neutral-0-inverted-press); + --color-light-neutral-0-press: var(--color-dark-neutral-0-press); + --color-light-neutral-100: var(--color-dark-neutral-100); + --color-light-neutral-100-hover: var(--color-dark-neutral-100-hover); + --color-light-neutral-100-inverted: var(--color-dark-neutral-100-inverted); + --color-light-neutral-100-inverted-hover: var(--color-dark-neutral-100-inverted-hover); + --color-light-neutral-100-inverted-press: var(--color-dark-neutral-100-inverted-press); + --color-light-neutral-100-press: var(--color-dark-neutral-100-press); + --color-light-neutral-1300: var(--color-dark-neutral-1300); + --color-light-neutral-1300-hover: var(--color-dark-neutral-1300-hover); + --color-light-neutral-1300-inverted: var(--color-dark-neutral-1300-inverted); + --color-light-neutral-1300-inverted-hover: var(--color-dark-neutral-1300-inverted-hover); + --color-light-neutral-1300-inverted-press: var(--color-dark-neutral-1300-inverted-press); + --color-light-neutral-1300-press: var(--color-dark-neutral-1300-press); + --color-light-neutral-1500: var(--color-dark-neutral-1500); + --color-light-neutral-1500-hover: var(--color-dark-neutral-1500-hover); + --color-light-neutral-1500-inverted: var(--color-dark-neutral-1500-inverted); + --color-light-neutral-1500-inverted-hover: var(--color-dark-neutral-1500-inverted-hover); + --color-light-neutral-1500-inverted-press: var(--color-dark-neutral-1500-inverted-press); + --color-light-neutral-1500-press: var(--color-dark-neutral-1500-press); + --color-light-neutral-200: var(--color-dark-neutral-200); + --color-light-neutral-200-hover: var(--color-dark-neutral-200-hover); + --color-light-neutral-200-inverted: var(--color-dark-neutral-200-inverted); + --color-light-neutral-200-inverted-hover: var(--color-dark-neutral-200-inverted-hover); + --color-light-neutral-200-inverted-press: var(--color-dark-neutral-200-inverted-press); + --color-light-neutral-200-press: var(--color-dark-neutral-200-press); + --color-light-neutral-300: var(--color-dark-neutral-300); + --color-light-neutral-300-hover: var(--color-dark-neutral-300-hover); + --color-light-neutral-300-inverted: var(--color-dark-neutral-300-inverted); + --color-light-neutral-300-inverted-hover: var(--color-dark-neutral-300-inverted-hover); + --color-light-neutral-300-inverted-press: var(--color-dark-neutral-300-inverted-press); + --color-light-neutral-300-press: var(--color-dark-neutral-300-press); + --color-light-neutral-400: var(--color-dark-neutral-400); + --color-light-neutral-400-hover: var(--color-dark-neutral-400-hover); + --color-light-neutral-400-inverted: var(--color-dark-neutral-400-inverted); + --color-light-neutral-400-inverted-hover: var(--color-dark-neutral-400-inverted-hover); + --color-light-neutral-400-inverted-press: var(--color-dark-neutral-400-inverted-press); + --color-light-neutral-400-press: var(--color-dark-neutral-400-press); + --color-light-neutral-500: var(--color-dark-neutral-500); + --color-light-neutral-500-hover: var(--color-dark-neutral-500-hover); + --color-light-neutral-500-inverted: var(--color-dark-neutral-500-inverted); + --color-light-neutral-500-inverted-hover: var(--color-dark-neutral-500-inverted-hover); + --color-light-neutral-500-inverted-press: var(--color-dark-neutral-500-inverted-press); + --color-light-neutral-500-press: var(--color-dark-neutral-500-press); + --color-light-neutral-700: var(--color-dark-neutral-700); + --color-light-neutral-700-hover: var(--color-dark-neutral-700-hover); + --color-light-neutral-700-inverted: var(--color-dark-neutral-700-inverted); + --color-light-neutral-700-inverted-hover: var(--color-dark-neutral-700-inverted-hover); + --color-light-neutral-700-inverted-press: var(--color-dark-neutral-700-inverted-press); + --color-light-neutral-700-press: var(--color-dark-neutral-700-press); + --color-light-neutral-translucent-0: var(--color-dark-neutral-translucent-0); + --color-light-neutral-translucent-0-hover: var(--color-dark-neutral-translucent-0-hover); + --color-light-neutral-translucent-0-inverted: var(--color-dark-neutral-translucent-0-inverted); + --color-light-neutral-translucent-0-inverted-hover: var( + --color-dark-neutral-translucent-0-inverted-hover + ); + --color-light-neutral-translucent-0-inverted-press: var( + --color-dark-neutral-translucent-0-inverted-press + ); + --color-light-neutral-translucent-0-press: var(--color-dark-neutral-translucent-0-press); + --color-light-neutral-translucent-100: var(--color-dark-neutral-translucent-100); + --color-light-neutral-translucent-100-hover: var(--color-dark-neutral-translucent-100-hover); + --color-light-neutral-translucent-100-inverted: var( + --color-dark-neutral-translucent-100-inverted + ); + --color-light-neutral-translucent-100-inverted-hover: var( + --color-dark-neutral-translucent-100-inverted-hover + ); + --color-light-neutral-translucent-100-inverted-press: var( + --color-dark-neutral-translucent-100-inverted-press + ); + --color-light-neutral-translucent-100-press: var(--color-dark-neutral-translucent-100-press); + --color-light-neutral-translucent-1300: var(--color-dark-neutral-translucent-1300); + --color-light-neutral-translucent-1300-hover: var(--color-dark-neutral-translucent-1300-hover); + --color-light-neutral-translucent-1300-inverted: var( + --color-dark-neutral-translucent-1300-inverted + ); + --color-light-neutral-translucent-1300-inverted-hover: var( + --color-dark-neutral-translucent-1300-inverted-hover + ); + --color-light-neutral-translucent-1300-inverted-press: var( + --color-dark-neutral-translucent-1300-inverted-press + ); + --color-light-neutral-translucent-1300-press: var(--color-dark-neutral-translucent-1300-press); + --color-light-neutral-translucent-1500-hover: var(--color-dark-neutral-translucent-1500-hover); + --color-light-neutral-translucent-1500-inverted-hover: var( + --color-dark-neutral-translucent-1500-inverted-hover + ); + --color-light-neutral-translucent-1500-inverted-press: var( + --color-dark-neutral-translucent-1500-inverted-press + ); + --color-light-neutral-translucent-1500-press: var(--color-dark-neutral-translucent-1500-press); + --color-light-neutral-translucent-200: var(--color-dark-neutral-translucent-200); + --color-light-neutral-translucent-200-hover: var(--color-dark-neutral-translucent-200-hover); + --color-light-neutral-translucent-200-inverted: var( + --color-dark-neutral-translucent-200-inverted + ); + --color-light-neutral-translucent-200-inverted-hover: var( + --color-dark-neutral-translucent-200-inverted-hover + ); + --color-light-neutral-translucent-200-inverted-press: var( + --color-dark-neutral-translucent-200-inverted-press + ); + --color-light-neutral-translucent-200-press: var(--color-dark-neutral-translucent-200-press); + --color-light-neutral-translucent-300: var(--color-dark-neutral-translucent-300); + --color-light-neutral-translucent-300-hover: var(--color-dark-neutral-translucent-300-hover); + --color-light-neutral-translucent-300-inverted: var( + --color-dark-neutral-translucent-300-inverted + ); + --color-light-neutral-translucent-300-inverted-hover: var( + --color-dark-neutral-translucent-300-inverted-hover + ); + --color-light-neutral-translucent-300-inverted-press: var( + --color-dark-neutral-translucent-300-inverted-press + ); + --color-light-neutral-translucent-300-press: var(--color-dark-neutral-translucent-300-press); + --color-light-neutral-translucent-400: var(--color-dark-neutral-translucent-400); + --color-light-neutral-translucent-400-hover: var(--color-dark-neutral-translucent-400-hover); + --color-light-neutral-translucent-400-inverted: var( + --color-dark-neutral-translucent-400-inverted + ); + --color-light-neutral-translucent-400-inverted-hover: var( + --color-dark-neutral-translucent-400-inverted-hover + ); + --color-light-neutral-translucent-400-inverted-press: var( + --color-dark-neutral-translucent-400-inverted-press + ); + --color-light-neutral-translucent-400-press: var(--color-dark-neutral-translucent-400-press); + --color-light-neutral-translucent-500: var(--color-dark-neutral-translucent-500); + --color-light-neutral-translucent-500-hover: var(--color-dark-neutral-translucent-500-hover); + --color-light-neutral-translucent-500-inverted: var( + --color-dark-neutral-translucent-500-inverted + ); + --color-light-neutral-translucent-500-inverted-hover: var( + --color-dark-neutral-translucent-500-inverted-hover + ); + --color-light-neutral-translucent-500-inverted-press: var( + --color-dark-neutral-translucent-500-inverted-press + ); + --color-light-neutral-translucent-500-press: var(--color-dark-neutral-translucent-500-press); + --color-light-neutral-translucent-700: var(--color-dark-neutral-translucent-700); + --color-light-neutral-translucent-700-hover: var(--color-dark-neutral-translucent-700-hover); + --color-light-neutral-translucent-700-inverted: var( + --color-dark-neutral-translucent-700-inverted + ); + --color-light-neutral-translucent-700-inverted-hover: var( + --color-dark-neutral-translucent-700-inverted-hover + ); + --color-light-neutral-translucent-700-inverted-press: var( + --color-dark-neutral-translucent-700-inverted-press + ); + --color-light-neutral-translucent-700-press: var(--color-dark-neutral-translucent-700-press); + --color-light-overlay-default: var(--color-dark-overlay-default); + --color-light-status-attention: var(--color-dark-status-attention); + --color-light-status-attention-hover: var(--color-dark-status-attention-hover); + --color-light-status-attention-inverted: var(--color-dark-status-attention-inverted); + --color-light-status-attention-inverted-hover: var( + --color-dark-status-attention-inverted-hover + ); + --color-light-status-attention-inverted-press: var( + --color-dark-status-attention-inverted-press + ); + --color-light-status-attention-press: var(--color-dark-status-attention-press); + --color-light-status-info: var(--color-dark-status-info); + --color-light-status-info-hover: var(--color-dark-status-info-hover); + --color-light-status-info-inverted: var(--color-dark-status-info-inverted); + --color-light-status-info-inverted-hover: var(--color-dark-status-info-inverted-hover); + --color-light-status-info-inverted-press: var(--color-dark-status-info-inverted-press); + --color-light-status-info-press: var(--color-dark-status-info-press); + --color-light-status-muted-alt-attention: var(--color-dark-status-muted-alt-attention); + --color-light-status-muted-alt-attention-hover: var( + --color-dark-status-muted-alt-attention-hover + ); + --color-light-status-muted-alt-attention-inverted: var( + --color-dark-status-muted-alt-attention-inverted + ); + --color-light-status-muted-alt-attention-inverted-hover: var( + --color-dark-status-muted-alt-attention-inverted-hover + ); + --color-light-status-muted-alt-attention-inverted-press: var( + --color-dark-status-muted-alt-attention-inverted-press + ); + --color-light-status-muted-alt-attention-press: var( + --color-dark-status-muted-alt-attention-press + ); + --color-light-status-muted-alt-info: var(--color-dark-status-muted-alt-info); + --color-light-status-muted-alt-info-hover: var(--color-dark-status-muted-alt-info-hover); + --color-light-status-muted-alt-info-inverted: var(--color-dark-status-muted-alt-info-inverted); + --color-light-status-muted-alt-info-inverted-hover: var( + --color-dark-status-muted-alt-info-inverted-hover + ); + --color-light-status-muted-alt-info-inverted-press: var( + --color-dark-status-muted-alt-info-inverted-press + ); + --color-light-status-muted-alt-info-press: var(--color-dark-status-muted-alt-info-press); + --color-light-status-muted-alt-negative: var(--color-dark-status-muted-alt-negative); + --color-light-status-muted-alt-negative-hover: var( + --color-dark-status-muted-alt-negative-hover + ); + --color-light-status-muted-alt-negative-inverted: var( + --color-dark-status-muted-alt-negative-inverted + ); + --color-light-status-muted-alt-negative-inverted-hover: var( + --color-dark-status-muted-alt-negative-inverted-hover + ); + --color-light-status-muted-alt-negative-inverted-press: var( + --color-dark-status-muted-alt-negative-inverted-press + ); + --color-light-status-muted-alt-negative-press: var( + --color-dark-status-muted-alt-negative-press + ); + --color-light-status-muted-alt-positive: var(--color-dark-status-muted-alt-positive); + --color-light-status-muted-alt-positive-hover: var( + --color-dark-status-muted-alt-positive-hover + ); + --color-light-status-muted-alt-positive-inverted: var( + --color-dark-status-muted-alt-positive-inverted + ); + --color-light-status-muted-alt-positive-inverted-hover: var( + --color-dark-status-muted-alt-positive-inverted-hover + ); + --color-light-status-muted-alt-positive-inverted-press: var( + --color-dark-status-muted-alt-positive-inverted-press + ); + --color-light-status-muted-alt-positive-press: var( + --color-dark-status-muted-alt-positive-press + ); + --color-light-status-muted-attention: var(--color-dark-status-muted-attention); + --color-light-status-muted-attention-hover: var(--color-dark-status-muted-attention-hover); + --color-light-status-muted-attention-inverted: var( + --color-dark-status-muted-attention-inverted + ); + --color-light-status-muted-attention-inverted-hover: var( + --color-dark-status-muted-attention-inverted-hover + ); + --color-light-status-muted-attention-inverted-press: var( + --color-dark-status-muted-attention-inverted-press + ); + --color-light-status-muted-attention-press: var(--color-dark-status-muted-attention-press); + --color-light-status-muted-info: var(--color-dark-status-muted-info); + --color-light-status-muted-info-hover: var(--color-dark-status-muted-info-hover); + --color-light-status-muted-info-inverted: var(--color-dark-status-muted-info-inverted); + --color-light-status-muted-info-inverted-hover: var( + --color-dark-status-muted-info-inverted-hover + ); + --color-light-status-muted-info-inverted-press: var( + --color-dark-status-muted-info-inverted-press + ); + --color-light-status-muted-info-press: var(--color-dark-status-muted-info-press); + --color-light-status-muted-negative: var(--color-dark-status-muted-negative); + --color-light-status-muted-negative-hover: var(--color-dark-status-muted-negative-hover); + --color-light-status-muted-negative-inverted: var(--color-dark-status-muted-negative-inverted); + --color-light-status-muted-negative-inverted-hover: var( + --color-dark-status-muted-negative-inverted-hover + ); + --color-light-status-muted-negative-inverted-press: var( + --color-dark-status-muted-negative-inverted-press + ); + --color-light-status-muted-negative-press: var(--color-dark-status-muted-negative-press); + --color-light-status-muted-positive: var(--color-dark-status-muted-positive); + --color-light-status-muted-positive-hover: var(--color-dark-status-muted-positive-hover); + --color-light-status-muted-positive-inverted: var(--color-dark-status-muted-positive-inverted); + --color-light-status-muted-positive-inverted-hover: var( + --color-dark-status-muted-positive-inverted-hover + ); + --color-light-status-muted-positive-inverted-press: var( + --color-dark-status-muted-positive-inverted-press + ); + --color-light-status-muted-positive-press: var(--color-dark-status-muted-positive-press); + --color-light-status-negative: var(--color-dark-status-negative); + --color-light-status-negative-hover: var(--color-dark-status-negative-hover); + --color-light-status-negative-inverted: var(--color-dark-status-negative-inverted); + --color-light-status-negative-inverted-hover: var(--color-dark-status-negative-inverted-hover); + --color-light-status-negative-inverted-press: var(--color-dark-status-negative-inverted-press); + --color-light-status-negative-press: var(--color-dark-status-negative-press); + --color-light-status-positive: var(--color-dark-status-positive); + --color-light-status-positive-hover: var(--color-dark-status-positive-hover); + --color-light-status-positive-inverted: var(--color-dark-status-positive-inverted); + --color-light-status-positive-inverted-hover: var(--color-dark-status-positive-inverted-hover); + --color-light-status-positive-inverted-press: var(--color-dark-status-positive-inverted-press); + --color-light-status-positive-press: var(--color-dark-status-positive-press); + --color-light-text-attention: var(--color-dark-text-attention); + --color-light-text-attention-hover: var(--color-dark-text-attention-hover); + --color-light-text-attention-inverted: var(--color-dark-text-attention-inverted); + --color-light-text-attention-inverted-hover: var(--color-dark-text-attention-inverted-hover); + --color-light-text-attention-inverted-press: var(--color-dark-text-attention-inverted-press); + --color-light-text-attention-press: var(--color-dark-text-attention-press); + --color-light-text-info: var(--color-dark-text-info); + --color-light-text-info-hover: var(--color-dark-text-info-hover); + --color-light-text-info-inverted: var(--color-dark-text-info-inverted); + --color-light-text-info-inverted-hover: var(--color-dark-text-info-inverted-hover); + --color-light-text-info-inverted-press: var(--color-dark-text-info-inverted-press); + --color-light-text-info-press: var(--color-dark-text-info-press); + --color-light-text-negative: var(--color-dark-text-negative); + --color-light-text-negative-hover: var(--color-dark-text-negative-hover); + --color-light-text-negative-inverted: var(--color-dark-text-negative-inverted); + --color-light-text-negative-inverted-hover: var(--color-dark-text-negative-inverted-hover); + --color-light-text-negative-inverted-press: var(--color-dark-text-negative-inverted-press); + --color-light-text-negative-press: var(--color-dark-text-negative-press); + --color-light-text-positive: var(--color-dark-text-positive); + --color-light-text-positive-hover: var(--color-dark-text-positive-hover); + --color-light-text-positive-inverted: var(--color-dark-text-positive-inverted); + --color-light-text-positive-inverted-hover: var(--color-dark-text-positive-inverted-hover); + --color-light-text-positive-inverted-press: var(--color-dark-text-positive-inverted-press); + --color-light-text-positive-press: var(--color-dark-text-positive-press); + --color-light-text-primary: var(--color-dark-text-primary); + --color-light-text-primary-hover: var(--color-dark-text-primary-hover); + --color-light-text-primary-inverted: var(--color-dark-text-primary-inverted); + --color-light-text-primary-inverted-hover: var(--color-dark-text-primary-inverted-hover); + --color-light-text-primary-inverted-press: var(--color-dark-text-primary-inverted-press); + --color-light-text-primary-press: var(--color-dark-text-primary-press); + --color-light-text-quaternary: var(--color-dark-text-quaternary); + --color-light-text-quaternary-inverted: var(--color-dark-text-quaternary-inverted); + --color-light-text-secondary: var(--color-dark-text-secondary); + --color-light-text-secondary-hover: var(--color-dark-text-secondary-hover); + --color-light-text-secondary-inverted: var(--color-dark-text-secondary-inverted); + --color-light-text-secondary-inverted-hover: var(--color-dark-text-secondary-inverted-hover); + --color-light-text-secondary-inverted-press: var(--color-dark-text-secondary-inverted-press); + --color-light-text-secondary-press: var(--color-dark-text-secondary-press); + --color-light-text-tertiary: var(--color-dark-text-tertiary); + --color-light-text-tertiary-hover: var(--color-dark-text-tertiary-hover); + --color-light-text-tertiary-inverted: var(--color-dark-text-tertiary-inverted); + --color-light-text-tertiary-inverted-hover: var(--color-dark-text-tertiary-inverted-hover); + --color-light-text-tertiary-inverted-press: var(--color-dark-text-tertiary-inverted-press); + --color-light-text-tertiary-press: var(--color-dark-text-tertiary-press); + --color-light-transparent-default: var(--color-dark-transparent-default); + --color-light-transparent-default-hover: var(--color-dark-transparent-default-hover); + --color-light-transparent-default-inverted-hover: var( + --color-dark-transparent-default-inverted-hover + ); + --color-light-transparent-default-inverted-press: var( + --color-dark-transparent-default-inverted-press + ); + --color-light-transparent-default-press: var(--color-dark-transparent-default-press); + --color-light-bg-accent: var(--color-dark-bg-accent); + --color-light-bg-attention-muted: var(--color-dark-bg-attention-muted); + --color-light-bg-component: var(--color-dark-bg-component); + --color-light-bg-component-inverted: var(--color-dark-bg-component-inverted); + --color-light-bg-info: var(--color-dark-bg-info); + --color-light-bg-info-muted: var(--color-dark-bg-info-muted); + --color-light-bg-link-muted: var(--color-dark-bg-link-muted); + --color-light-bg-negative-muted: var(--color-dark-bg-negative-muted); + --color-light-bg-neutral: var(--color-dark-bg-neutral); + --color-light-bg-nulled: var(--color-dark-bg-nulled); + --color-light-bg-opaque: var(--color-dark-bg-opaque); + --color-light-bg-overlay: var(--color-dark-bg-overlay); + --color-light-bg-positive-muted: var(--color-dark-bg-positive-muted); + --color-light-bg-primary: var(--color-dark-bg-primary); + --color-light-bg-primary-grouped: var(--color-dark-bg-primary-grouped); + --color-light-bg-primary-inverted: var(--color-dark-bg-primary-inverted); + --color-light-bg-quaternary: var(--color-dark-bg-quaternary); + --color-light-bg-quaternary-inverted: var(--color-dark-bg-quaternary-inverted); + --color-light-bg-secondary: var(--color-dark-bg-secondary); + --color-light-bg-secondary-grouped: var(--color-dark-bg-secondary-grouped); + --color-light-bg-secondary-inverted: var(--color-dark-bg-secondary-inverted); + --color-light-bg-tertiary: var(--color-dark-bg-tertiary); + --color-light-bg-tertiary-grouped: var(--color-dark-bg-tertiary-grouped); + --color-light-bg-tertiary-inverted: var(--color-dark-bg-tertiary-inverted); + --color-light-border-accent: var(--color-dark-border-accent); + --color-light-border-key: var(--color-dark-border-key); + --color-light-border-key-inverted: var(--color-dark-border-key-inverted); + --color-light-border-link: var(--color-dark-border-link); + --color-light-border-primary: var(--color-dark-border-primary); + --color-light-border-primary-inverted: var(--color-dark-border-primary-inverted); + --color-light-border-secondary: var(--color-dark-border-secondary); + --color-light-border-secondary-inverted: var(--color-dark-border-secondary-inverted); + --color-light-border-tertiary: var(--color-dark-border-tertiary); + --color-light-border-tertiary-inverted: var(--color-dark-border-tertiary-inverted); + --color-light-border-underline: var(--color-dark-border-underline); + --color-light-border-underline-inverted: var(--color-dark-border-underline-inverted); + --color-light-graphic-accent: var(--color-dark-graphic-accent); + --color-light-graphic-attention: var(--color-dark-graphic-attention); + --color-light-graphic-link: var(--color-dark-graphic-link); + --color-light-graphic-negative: var(--color-dark-graphic-negative); + --color-light-graphic-neutral: var(--color-dark-graphic-neutral); + --color-light-graphic-positive: var(--color-dark-graphic-positive); + --color-light-graphic-primary: var(--color-dark-graphic-primary); + --color-light-graphic-primary-inverted: var(--color-dark-graphic-primary-inverted); + --color-light-graphic-quaternary: var(--color-dark-graphic-quaternary); + --color-light-graphic-quaternary-inverted: var(--color-dark-graphic-quaternary-inverted); + --color-light-graphic-secondary: var(--color-dark-graphic-secondary); + --color-light-graphic-secondary-inverted: var(--color-dark-graphic-secondary-inverted); + --color-light-graphic-tertiary: var(--color-dark-graphic-tertiary); + --color-light-graphic-tertiary-inverted: var(--color-dark-graphic-tertiary-inverted); + --color-light-specialbg-component: var(--color-dark-specialbg-component); + --color-light-specialbg-component-inverted: var(--color-dark-specialbg-component-inverted); + --color-light-specialbg-nulled: var(--color-dark-specialbg-nulled); + --color-light-specialbg-overlay: var(--color-dark-specialbg-overlay); + --color-light-specialbg-overlay-fallback: var(--color-dark-specialbg-overlay-fallback); + --color-light-specialbg-primary-grouped: var(--color-dark-specialbg-primary-grouped); + --color-light-specialbg-secondary-grouped: var(--color-dark-specialbg-secondary-grouped); + --color-light-specialbg-secondary-transparent: var( + --color-dark-specialbg-secondary-transparent + ); + --color-light-specialbg-secondary-transparent-inverted: var( + --color-dark-specialbg-secondary-transparent-inverted + ); + --color-light-specialbg-tertiary-grouped: var(--color-dark-specialbg-tertiary-grouped); + --color-light-specialbg-tertiary-transparent: var(--color-dark-specialbg-tertiary-transparent); + --color-light-specialbg-tertiary-transparent-inverted: var( + --color-dark-specialbg-tertiary-transparent-inverted + ); + --color-light-text-accent: var(--color-dark-text-accent); + --color-light-text-disabled: var(--color-dark-text-disabled); + --color-light-text-disabled-inverted: var(--color-dark-text-disabled-inverted); + --color-light-text-disabled-transparent: var(--color-dark-text-disabled-transparent); + --color-light-text-link: var(--color-dark-text-link); + --color-light-text-secondary-inverted-transparent: var( + --color-dark-text-secondary-inverted-transparent + ); + --color-light-text-secondary-transparent: var(--color-dark-text-secondary-transparent); + --color-light-text-tertiary-inverted-transparent: var( + --color-dark-text-tertiary-inverted-transparent + ); + --color-light-text-tertiary-transparent: var(--color-dark-text-tertiary-transparent); + --color-light-neutral-700-alpha-15: var(--color-dark-neutral-700-alpha-15); + --color-light-status-info-alpha-15: var(--color-dark-status-info-alpha-15); + --color-light-text-primary-alpha-30: var(--color-dark-text-primary-alpha-30); + --color-light-text-primary-tint-40: var(--color-dark-text-primary-tint-40); + --color-light-text-primary-shade-40: var(--color-dark-text-primary-shade-40); + --color-light-text-primary-inverted-alpha-30: var(--color-dark-text-primary-inverted-alpha-30); + --color-light-text-primary-inverted-alpha-40: var(--color-dark-text-primary-inverted-alpha-40); + --color-light-text-primary-inverted-tint-30: var(--color-dark-text-primary-inverted-tint-30); + --color-light-text-primary-inverted-shade-30: var(--color-dark-text-primary-inverted-shade-30); + --color-light-text-secondary-tint-20: var(--color-dark-text-secondary-tint-20); + --color-light-text-secondary-shade-20: var(--color-dark-text-secondary-shade-20); + --color-light-bg-accent-alpha-30: var(--color-dark-bg-accent-alpha-30); + --color-light-bg-accent-tint-15: var(--color-dark-bg-accent-tint-15); + --color-light-bg-accent-shade-15: var(--color-dark-bg-accent-shade-15); + --color-light-bg-primary-alpha-4: var(--color-dark-bg-primary-alpha-4); + --color-light-bg-primary-alpha-8: var(--color-dark-bg-primary-alpha-8); + --color-light-bg-primary-alpha-12: var(--color-dark-bg-primary-alpha-12); + --color-light-bg-primary-alpha-15: var(--color-dark-bg-primary-alpha-15); + --color-light-bg-primary-alpha-16: var(--color-dark-bg-primary-alpha-16); + --color-light-bg-primary-alpha-20: var(--color-dark-bg-primary-alpha-20); + --color-light-bg-primary-alpha-30: var(--color-dark-bg-primary-alpha-30); + --color-light-bg-primary-alpha-32: var(--color-dark-bg-primary-alpha-32); + --color-light-bg-primary-alpha-37: var(--color-dark-bg-primary-alpha-37); + --color-light-bg-primary-alpha-40: var(--color-dark-bg-primary-alpha-40); + --color-light-bg-primary-inverted-alpha-3: var(--color-dark-bg-primary-inverted-alpha-3); + --color-light-bg-primary-inverted-alpha-4: var(--color-dark-bg-primary-inverted-alpha-4); + --color-light-bg-primary-inverted-alpha-5: var(--color-dark-bg-primary-inverted-alpha-5); + --color-light-bg-primary-inverted-alpha-7: var(--color-dark-bg-primary-inverted-alpha-7); + --color-light-bg-primary-inverted-alpha-8: var(--color-dark-bg-primary-inverted-alpha-8); + --color-light-bg-primary-inverted-alpha-10: var(--color-dark-bg-primary-inverted-alpha-10); + --color-light-bg-primary-inverted-alpha-12: var(--color-dark-bg-primary-inverted-alpha-12); + --color-light-bg-primary-inverted-alpha-15: var(--color-dark-bg-primary-inverted-alpha-15); + --color-light-bg-primary-inverted-alpha-16: var(--color-dark-bg-primary-inverted-alpha-16); + --color-light-bg-primary-inverted-alpha-20: var(--color-dark-bg-primary-inverted-alpha-20); + --color-light-bg-primary-inverted-alpha-24: var(--color-dark-bg-primary-inverted-alpha-24); + --color-light-bg-primary-inverted-alpha-30: var(--color-dark-bg-primary-inverted-alpha-30); + --color-light-bg-primary-inverted-alpha-32: var(--color-dark-bg-primary-inverted-alpha-32); + --color-light-bg-primary-inverted-alpha-40: var(--color-dark-bg-primary-inverted-alpha-40); + --color-light-bg-primary-inverted-alpha-50: var(--color-dark-bg-primary-inverted-alpha-50); + --color-light-bg-quaternary-alpha-30: var(--color-dark-bg-quaternary-alpha-30); + --color-light-bg-quaternary-inverted-alpha-30: var( + --color-dark-bg-quaternary-inverted-alpha-30 + ); + --color-light-bg-secondary-alpha-30: var(--color-dark-bg-secondary-alpha-30); + --color-light-bg-secondary-tint-15: var(--color-dark-bg-secondary-tint-15); + --color-light-bg-secondary-shade-15: var(--color-dark-bg-secondary-shade-15); + --color-light-bg-secondary-inverted-alpha-30: var(--color-dark-bg-secondary-inverted-alpha-30); + --color-light-bg-secondary-inverted-tint-15: var(--color-dark-bg-secondary-inverted-tint-15); + --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-shade-15); + --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7); + --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15); + --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7); + --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15); + --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30); + --color-light-border-underline-inverted-alpha-30: var( + --color-dark-border-underline-inverted-alpha-30 + ); + --color-light-graphic-accent-alpha-30: var(--color-dark-graphic-accent-alpha-30); + --color-light-graphic-accent-tint-15: var(--color-dark-graphic-accent-tint-15); + --color-light-graphic-accent-shade-15: var(--color-dark-graphic-accent-shade-15); + --color-light-graphic-link-alpha-15: var(--color-dark-graphic-link-alpha-15); + --color-light-graphic-negative-alpha-10: var(--color-dark-graphic-negative-alpha-10); + --color-light-graphic-negative-alpha-30: var(--color-dark-graphic-negative-alpha-30); + --color-light-graphic-negative-alpha-40: var(--color-dark-graphic-negative-alpha-40); + --color-light-graphic-negative-tint-30: var(--color-dark-graphic-negative-tint-30); + --color-light-graphic-negative-shade-30: var(--color-dark-graphic-negative-shade-30); + --color-light-graphic-positive-alpha-10: var(--color-dark-graphic-positive-alpha-10); + --color-light-graphic-primary-alpha-30: var(--color-dark-graphic-primary-alpha-30); + --color-light-graphic-primary-alpha-40: var(--color-dark-graphic-primary-alpha-40); + --color-light-graphic-primary-alpha-50: var(--color-dark-graphic-primary-alpha-50); + --color-light-graphic-primary-alpha-60: var(--color-dark-graphic-primary-alpha-60); + --color-light-graphic-primary-tint-30: var(--color-dark-graphic-primary-tint-30); + --color-light-graphic-primary-shade-30: var(--color-dark-graphic-primary-shade-30); + --color-light-graphic-primary-inverted-alpha-30: var( + --color-dark-graphic-primary-inverted-alpha-30 + ); + --color-light-graphic-primary-inverted-alpha-40: var( + --color-dark-graphic-primary-inverted-alpha-40 + ); + --color-light-graphic-primary-inverted-alpha-50: var( + --color-dark-graphic-primary-inverted-alpha-50 + ); + --color-light-graphic-primary-inverted-alpha-60: var( + --color-dark-graphic-primary-inverted-alpha-60 + ); + --color-light-graphic-secondary-alpha-30: var(--color-dark-graphic-secondary-alpha-30); + --color-light-graphic-secondary-inverted-alpha-30: var( + --color-dark-graphic-secondary-inverted-alpha-30 + ); + --color-light-graphic-tertiary-alpha-30: var(--color-dark-graphic-tertiary-alpha-30); + --color-light-graphic-tertiary-tint-15: var(--color-dark-graphic-tertiary-tint-15); + --color-light-graphic-tertiary-shade-15: var(--color-dark-graphic-tertiary-shade-15); + --color-light-graphic-tertiary-inverted-alpha-30: var( + --color-dark-graphic-tertiary-inverted-alpha-30 + ); + --color-light-specialbg-component-alpha-2: var(--color-dark-specialbg-component-alpha-2); + --color-light-specialbg-component-alpha-14: var(--color-dark-specialbg-component-alpha-14); + --color-light-specialbg-component-alpha-23: var(--color-dark-specialbg-component-alpha-23); + --color-light-specialbg-component-alpha-30: var(--color-dark-specialbg-component-alpha-30); + --color-light-specialbg-component-inverted-alpha-30: var( + --color-dark-specialbg-component-inverted-alpha-30 + ); +} diff --git a/packages/vars/src/colors-decorative-dark.css b/packages/vars/src/colors-decorative-dark.css new file mode 100644 index 0000000000..beda80a687 --- /dev/null +++ b/packages/vars/src/colors-decorative-dark.css @@ -0,0 +1,600 @@ +:root { + --color-light-decorative-blue: var(--color-dark-decorative-blue); + --color-light-decorative-blue-hover: var(--color-dark-decorative-blue-hover); + --color-light-decorative-blue-inverted: var(--color-dark-decorative-blue-inverted); + --color-light-decorative-blue-inverted-hover: var(--color-dark-decorative-blue-inverted-hover); + --color-light-decorative-blue-inverted-press: var(--color-dark-decorative-blue-inverted-press); + --color-light-decorative-blue-press: var(--color-dark-decorative-blue-press); + --color-light-decorative-cyan: var(--color-dark-decorative-cyan); + --color-light-decorative-cyan-hover: var(--color-dark-decorative-cyan-hover); + --color-light-decorative-cyan-inverted: var(--color-dark-decorative-cyan-inverted); + --color-light-decorative-cyan-inverted-hover: var(--color-dark-decorative-cyan-inverted-hover); + --color-light-decorative-cyan-inverted-press: var(--color-dark-decorative-cyan-inverted-press); + --color-light-decorative-cyan-press: var(--color-dark-decorative-cyan-press); + --color-light-decorative-fuchsia: var(--color-dark-decorative-fuchsia); + --color-light-decorative-fuchsia-hover: var(--color-dark-decorative-fuchsia-hover); + --color-light-decorative-fuchsia-inverted: var(--color-dark-decorative-fuchsia-inverted); + --color-light-decorative-fuchsia-inverted-hover: var( + --color-dark-decorative-fuchsia-inverted-hover + ); + --color-light-decorative-fuchsia-inverted-press: var( + --color-dark-decorative-fuchsia-inverted-press + ); + --color-light-decorative-fuchsia-press: var(--color-dark-decorative-fuchsia-press); + --color-light-decorative-green: var(--color-dark-decorative-green); + --color-light-decorative-green-hover: var(--color-dark-decorative-green-hover); + --color-light-decorative-green-inverted: var(--color-dark-decorative-green-inverted); + --color-light-decorative-green-inverted-hover: var( + --color-dark-decorative-green-inverted-hover + ); + --color-light-decorative-green-inverted-press: var( + --color-dark-decorative-green-inverted-press + ); + --color-light-decorative-green-press: var(--color-dark-decorative-green-press); + --color-light-decorative-indigo: var(--color-dark-decorative-indigo); + --color-light-decorative-indigo-hover: var(--color-dark-decorative-indigo-hover); + --color-light-decorative-indigo-inverted: var(--color-dark-decorative-indigo-inverted); + --color-light-decorative-indigo-inverted-hover: var( + --color-dark-decorative-indigo-inverted-hover + ); + --color-light-decorative-indigo-inverted-press: var( + --color-dark-decorative-indigo-inverted-press + ); + --color-light-decorative-indigo-press: var(--color-dark-decorative-indigo-press); + --color-light-decorative-jungle: var(--color-dark-decorative-jungle); + --color-light-decorative-jungle-hover: var(--color-dark-decorative-jungle-hover); + --color-light-decorative-jungle-inverted: var(--color-dark-decorative-jungle-inverted); + --color-light-decorative-jungle-inverted-hover: var( + --color-dark-decorative-jungle-inverted-hover + ); + --color-light-decorative-jungle-inverted-press: var( + --color-dark-decorative-jungle-inverted-press + ); + --color-light-decorative-jungle-press: var(--color-dark-decorative-jungle-press); + --color-light-decorative-magenta: var(--color-dark-decorative-magenta); + --color-light-decorative-magenta-hover: var(--color-dark-decorative-magenta-hover); + --color-light-decorative-magenta-inverted: var(--color-dark-decorative-magenta-inverted); + --color-light-decorative-magenta-inverted-hover: var( + --color-dark-decorative-magenta-inverted-hover + ); + --color-light-decorative-magenta-inverted-press: var( + --color-dark-decorative-magenta-inverted-press + ); + --color-light-decorative-magenta-press: var(--color-dark-decorative-magenta-press); + --color-light-decorative-muted-alt-blue: var(--color-dark-decorative-muted-alt-blue); + --color-light-decorative-muted-alt-blue-hover: var( + --color-dark-decorative-muted-alt-blue-hover + ); + --color-light-decorative-muted-alt-blue-inverted: var( + --color-dark-decorative-muted-alt-blue-inverted + ); + --color-light-decorative-muted-alt-blue-inverted-hover: var( + --color-dark-decorative-muted-alt-blue-inverted-hover + ); + --color-light-decorative-muted-alt-blue-inverted-press: var( + --color-dark-decorative-muted-alt-blue-inverted-press + ); + --color-light-decorative-muted-alt-blue-press: var( + --color-dark-decorative-muted-alt-blue-press + ); + --color-light-decorative-muted-alt-cyan: var(--color-dark-decorative-muted-alt-cyan); + --color-light-decorative-muted-alt-cyan-hover: var( + --color-dark-decorative-muted-alt-cyan-hover + ); + --color-light-decorative-muted-alt-cyan-inverted: var( + --color-dark-decorative-muted-alt-cyan-inverted + ); + --color-light-decorative-muted-alt-cyan-inverted-hover: var( + --color-dark-decorative-muted-alt-cyan-inverted-hover + ); + --color-light-decorative-muted-alt-cyan-inverted-press: var( + --color-dark-decorative-muted-alt-cyan-inverted-press + ); + --color-light-decorative-muted-alt-cyan-press: var( + --color-dark-decorative-muted-alt-cyan-press + ); + --color-light-decorative-muted-alt-fuchsia: var(--color-dark-decorative-muted-alt-fuchsia); + --color-light-decorative-muted-alt-fuchsia-hover: var( + --color-dark-decorative-muted-alt-fuchsia-hover + ); + --color-light-decorative-muted-alt-fuchsia-inverted: var( + --color-dark-decorative-muted-alt-fuchsia-inverted + ); + --color-light-decorative-muted-alt-fuchsia-inverted-hover: var( + --color-dark-decorative-muted-alt-fuchsia-inverted-hover + ); + --color-light-decorative-muted-alt-fuchsia-inverted-press: var( + --color-dark-decorative-muted-alt-fuchsia-inverted-press + ); + --color-light-decorative-muted-alt-fuchsia-press: var( + --color-dark-decorative-muted-alt-fuchsia-press + ); + --color-light-decorative-muted-alt-green: var(--color-dark-decorative-muted-alt-green); + --color-light-decorative-muted-alt-green-hover: var( + --color-dark-decorative-muted-alt-green-hover + ); + --color-light-decorative-muted-alt-green-inverted: var( + --color-dark-decorative-muted-alt-green-inverted + ); + --color-light-decorative-muted-alt-green-inverted-hover: var( + --color-dark-decorative-muted-alt-green-inverted-hover + ); + --color-light-decorative-muted-alt-green-inverted-press: var( + --color-dark-decorative-muted-alt-green-inverted-press + ); + --color-light-decorative-muted-alt-green-press: var( + --color-dark-decorative-muted-alt-green-press + ); + --color-light-decorative-muted-alt-indigo: var(--color-dark-decorative-muted-alt-indigo); + --color-light-decorative-muted-alt-indigo-hover: var( + --color-dark-decorative-muted-alt-indigo-hover + ); + --color-light-decorative-muted-alt-indigo-inverted: var( + --color-dark-decorative-muted-alt-indigo-inverted + ); + --color-light-decorative-muted-alt-indigo-inverted-hover: var( + --color-dark-decorative-muted-alt-indigo-inverted-hover + ); + --color-light-decorative-muted-alt-indigo-inverted-press: var( + --color-dark-decorative-muted-alt-indigo-inverted-press + ); + --color-light-decorative-muted-alt-indigo-press: var( + --color-dark-decorative-muted-alt-indigo-press + ); + --color-light-decorative-muted-alt-jungle: var(--color-dark-decorative-muted-alt-jungle); + --color-light-decorative-muted-alt-jungle-hover: var( + --color-dark-decorative-muted-alt-jungle-hover + ); + --color-light-decorative-muted-alt-jungle-inverted: var( + --color-dark-decorative-muted-alt-jungle-inverted + ); + --color-light-decorative-muted-alt-jungle-inverted-hover: var( + --color-dark-decorative-muted-alt-jungle-inverted-hover + ); + --color-light-decorative-muted-alt-jungle-inverted-press: var( + --color-dark-decorative-muted-alt-jungle-inverted-press + ); + --color-light-decorative-muted-alt-jungle-press: var( + --color-dark-decorative-muted-alt-jungle-press + ); + --color-light-decorative-muted-alt-magenta: var(--color-dark-decorative-muted-alt-magenta); + --color-light-decorative-muted-alt-magenta-hover: var( + --color-dark-decorative-muted-alt-magenta-hover + ); + --color-light-decorative-muted-alt-magenta-inverted: var( + --color-dark-decorative-muted-alt-magenta-inverted + ); + --color-light-decorative-muted-alt-magenta-inverted-hover: var( + --color-dark-decorative-muted-alt-magenta-inverted-hover + ); + --color-light-decorative-muted-alt-magenta-inverted-press: var( + --color-dark-decorative-muted-alt-magenta-inverted-press + ); + --color-light-decorative-muted-alt-magenta-press: var( + --color-dark-decorative-muted-alt-magenta-press + ); + --color-light-decorative-muted-alt-orange: var(--color-dark-decorative-muted-alt-orange); + --color-light-decorative-muted-alt-orange-hover: var( + --color-dark-decorative-muted-alt-orange-hover + ); + --color-light-decorative-muted-alt-orange-inverted: var( + --color-dark-decorative-muted-alt-orange-inverted + ); + --color-light-decorative-muted-alt-orange-inverted-hover: var( + --color-dark-decorative-muted-alt-orange-inverted-hover + ); + --color-light-decorative-muted-alt-orange-inverted-press: var( + --color-dark-decorative-muted-alt-orange-inverted-press + ); + --color-light-decorative-muted-alt-orange-press: var( + --color-dark-decorative-muted-alt-orange-press + ); + --color-light-decorative-muted-alt-pistachio: var(--color-dark-decorative-muted-alt-pistachio); + --color-light-decorative-muted-alt-pistachio-hover: var( + --color-dark-decorative-muted-alt-pistachio-hover + ); + --color-light-decorative-muted-alt-pistachio-inverted: var( + --color-dark-decorative-muted-alt-pistachio-inverted + ); + --color-light-decorative-muted-alt-pistachio-inverted-hover: var( + --color-dark-decorative-muted-alt-pistachio-inverted-hover + ); + --color-light-decorative-muted-alt-pistachio-inverted-press: var( + --color-dark-decorative-muted-alt-pistachio-inverted-press + ); + --color-light-decorative-muted-alt-pistachio-press: var( + --color-dark-decorative-muted-alt-pistachio-press + ); + --color-light-decorative-muted-alt-purple: var(--color-dark-decorative-muted-alt-purple); + --color-light-decorative-muted-alt-purple-hover: var( + --color-dark-decorative-muted-alt-purple-hover + ); + --color-light-decorative-muted-alt-purple-inverted: var( + --color-dark-decorative-muted-alt-purple-inverted + ); + --color-light-decorative-muted-alt-purple-inverted-hover: var( + --color-dark-decorative-muted-alt-purple-inverted-hover + ); + --color-light-decorative-muted-alt-purple-inverted-press: var( + --color-dark-decorative-muted-alt-purple-inverted-press + ); + --color-light-decorative-muted-alt-purple-press: var( + --color-dark-decorative-muted-alt-purple-press + ); + --color-light-decorative-muted-alt-red: var(--color-dark-decorative-muted-alt-red); + --color-light-decorative-muted-alt-red-inverted: var( + --color-dark-decorative-muted-alt-red-inverted + ); + --color-light-decorative-muted-alt-teal: var(--color-dark-decorative-muted-alt-teal); + --color-light-decorative-muted-alt-teal-hover: var( + --color-dark-decorative-muted-alt-teal-hover + ); + --color-light-decorative-muted-alt-teal-inverted: var( + --color-dark-decorative-muted-alt-teal-inverted + ); + --color-light-decorative-muted-alt-teal-inverted-hover: var( + --color-dark-decorative-muted-alt-teal-inverted-hover + ); + --color-light-decorative-muted-alt-teal-inverted-press: var( + --color-dark-decorative-muted-alt-teal-inverted-press + ); + --color-light-decorative-muted-alt-teal-press: var( + --color-dark-decorative-muted-alt-teal-press + ); + --color-light-decorative-muted-alt-yellow: var(--color-dark-decorative-muted-alt-yellow); + --color-light-decorative-muted-alt-yellow-inverted: var( + --color-dark-decorative-muted-alt-yellow-inverted + ); + --color-light-decorative-muted-blue: var(--color-dark-decorative-muted-blue); + --color-light-decorative-muted-blue-hover: var(--color-dark-decorative-muted-blue-hover); + --color-light-decorative-muted-blue-inverted: var(--color-dark-decorative-muted-blue-inverted); + --color-light-decorative-muted-blue-inverted-hover: var( + --color-dark-decorative-muted-blue-inverted-hover + ); + --color-light-decorative-muted-blue-inverted-press: var( + --color-dark-decorative-muted-blue-inverted-press + ); + --color-light-decorative-muted-blue-press: var(--color-dark-decorative-muted-blue-press); + --color-light-decorative-muted-cyan: var(--color-dark-decorative-muted-cyan); + --color-light-decorative-muted-cyan-hover: var(--color-dark-decorative-muted-cyan-hover); + --color-light-decorative-muted-cyan-inverted: var(--color-dark-decorative-muted-cyan-inverted); + --color-light-decorative-muted-cyan-inverted-hover: var( + --color-dark-decorative-muted-cyan-inverted-hover + ); + --color-light-decorative-muted-cyan-inverted-press: var( + --color-dark-decorative-muted-cyan-inverted-press + ); + --color-light-decorative-muted-cyan-press: var(--color-dark-decorative-muted-cyan-press); + --color-light-decorative-muted-fuchsia: var(--color-dark-decorative-muted-fuchsia); + --color-light-decorative-muted-fuchsia-hover: var(--color-dark-decorative-muted-fuchsia-hover); + --color-light-decorative-muted-fuchsia-inverted: var( + --color-dark-decorative-muted-fuchsia-inverted + ); + --color-light-decorative-muted-fuchsia-inverted-hover: var( + --color-dark-decorative-muted-fuchsia-inverted-hover + ); + --color-light-decorative-muted-fuchsia-inverted-press: var( + --color-dark-decorative-muted-fuchsia-inverted-press + ); + --color-light-decorative-muted-fuchsia-press: var(--color-dark-decorative-muted-fuchsia-press); + --color-light-decorative-muted-green: var(--color-dark-decorative-muted-green); + --color-light-decorative-muted-green-hover: var(--color-dark-decorative-muted-green-hover); + --color-light-decorative-muted-green-inverted: var( + --color-dark-decorative-muted-green-inverted + ); + --color-light-decorative-muted-green-inverted-hover: var( + --color-dark-decorative-muted-green-inverted-hover + ); + --color-light-decorative-muted-green-inverted-press: var( + --color-dark-decorative-muted-green-inverted-press + ); + --color-light-decorative-muted-green-press: var(--color-dark-decorative-muted-green-press); + --color-light-decorative-muted-indigo: var(--color-dark-decorative-muted-indigo); + --color-light-decorative-muted-indigo-hover: var(--color-dark-decorative-muted-indigo-hover); + --color-light-decorative-muted-indigo-inverted: var( + --color-dark-decorative-muted-indigo-inverted + ); + --color-light-decorative-muted-indigo-inverted-hover: var( + --color-dark-decorative-muted-indigo-inverted-hover + ); + --color-light-decorative-muted-indigo-inverted-press: var( + --color-dark-decorative-muted-indigo-inverted-press + ); + --color-light-decorative-muted-indigo-press: var(--color-dark-decorative-muted-indigo-press); + --color-light-decorative-muted-jungle: var(--color-dark-decorative-muted-jungle); + --color-light-decorative-muted-jungle-hover: var(--color-dark-decorative-muted-jungle-hover); + --color-light-decorative-muted-jungle-inverted: var( + --color-dark-decorative-muted-jungle-inverted + ); + --color-light-decorative-muted-jungle-inverted-hover: var( + --color-dark-decorative-muted-jungle-inverted-hover + ); + --color-light-decorative-muted-jungle-inverted-press: var( + --color-dark-decorative-muted-jungle-inverted-press + ); + --color-light-decorative-muted-jungle-press: var(--color-dark-decorative-muted-jungle-press); + --color-light-decorative-muted-magenta: var(--color-dark-decorative-muted-magenta); + --color-light-decorative-muted-magenta-hover: var(--color-dark-decorative-muted-magenta-hover); + --color-light-decorative-muted-magenta-inverted: var( + --color-dark-decorative-muted-magenta-inverted + ); + --color-light-decorative-muted-magenta-inverted-hover: var( + --color-dark-decorative-muted-magenta-inverted-hover + ); + --color-light-decorative-muted-magenta-inverted-press: var( + --color-dark-decorative-muted-magenta-inverted-press + ); + --color-light-decorative-muted-magenta-press: var(--color-dark-decorative-muted-magenta-press); + --color-light-decorative-muted-orange: var(--color-dark-decorative-muted-orange); + --color-light-decorative-muted-orange-hover: var(--color-dark-decorative-muted-orange-hover); + --color-light-decorative-muted-orange-inverted: var( + --color-dark-decorative-muted-orange-inverted + ); + --color-light-decorative-muted-orange-inverted-hover: var( + --color-dark-decorative-muted-orange-inverted-hover + ); + --color-light-decorative-muted-orange-inverted-press: var( + --color-dark-decorative-muted-orange-inverted-press + ); + --color-light-decorative-muted-orange-press: var(--color-dark-decorative-muted-orange-press); + --color-light-decorative-muted-pistachio: var(--color-dark-decorative-muted-pistachio); + --color-light-decorative-muted-pistachio-hover: var( + --color-dark-decorative-muted-pistachio-hover + ); + --color-light-decorative-muted-pistachio-inverted: var( + --color-dark-decorative-muted-pistachio-inverted + ); + --color-light-decorative-muted-pistachio-inverted-hover: var( + --color-dark-decorative-muted-pistachio-inverted-hover + ); + --color-light-decorative-muted-pistachio-inverted-press: var( + --color-dark-decorative-muted-pistachio-inverted-press + ); + --color-light-decorative-muted-pistachio-press: var( + --color-dark-decorative-muted-pistachio-press + ); + --color-light-decorative-muted-purple: var(--color-dark-decorative-muted-purple); + --color-light-decorative-muted-purple-hover: var(--color-dark-decorative-muted-purple-hover); + --color-light-decorative-muted-purple-inverted: var( + --color-dark-decorative-muted-purple-inverted + ); + --color-light-decorative-muted-purple-inverted-hover: var( + --color-dark-decorative-muted-purple-inverted-hover + ); + --color-light-decorative-muted-purple-inverted-press: var( + --color-dark-decorative-muted-purple-inverted-press + ); + --color-light-decorative-muted-purple-press: var(--color-dark-decorative-muted-purple-press); + --color-light-decorative-muted-red: var(--color-dark-decorative-muted-red); + --color-light-decorative-muted-red-inverted: var(--color-dark-decorative-muted-red-inverted); + --color-light-decorative-muted-teal: var(--color-dark-decorative-muted-teal); + --color-light-decorative-muted-teal-hover: var(--color-dark-decorative-muted-teal-hover); + --color-light-decorative-muted-teal-inverted: var(--color-dark-decorative-muted-teal-inverted); + --color-light-decorative-muted-teal-inverted-hover: var( + --color-dark-decorative-muted-teal-inverted-hover + ); + --color-light-decorative-muted-teal-inverted-press: var( + --color-dark-decorative-muted-teal-inverted-press + ); + --color-light-decorative-muted-teal-press: var(--color-dark-decorative-muted-teal-press); + --color-light-decorative-muted-yellow: var(--color-dark-decorative-muted-yellow); + --color-light-decorative-muted-yellow-inverted: var( + --color-dark-decorative-muted-yellow-inverted + ); + --color-light-decorative-orange: var(--color-dark-decorative-orange); + --color-light-decorative-orange-hover: var(--color-dark-decorative-orange-hover); + --color-light-decorative-orange-inverted: var(--color-dark-decorative-orange-inverted); + --color-light-decorative-orange-inverted-hover: var( + --color-dark-decorative-orange-inverted-hover + ); + --color-light-decorative-orange-inverted-press: var( + --color-dark-decorative-orange-inverted-press + ); + --color-light-decorative-orange-press: var(--color-dark-decorative-orange-press); + --color-light-decorative-pistachio: var(--color-dark-decorative-pistachio); + --color-light-decorative-pistachio-hover: var(--color-dark-decorative-pistachio-hover); + --color-light-decorative-pistachio-inverted: var(--color-dark-decorative-pistachio-inverted); + --color-light-decorative-pistachio-inverted-hover: var( + --color-dark-decorative-pistachio-inverted-hover + ); + --color-light-decorative-pistachio-inverted-press: var( + --color-dark-decorative-pistachio-inverted-press + ); + --color-light-decorative-pistachio-press: var(--color-dark-decorative-pistachio-press); + --color-light-decorative-purple: var(--color-dark-decorative-purple); + --color-light-decorative-purple-hover: var(--color-dark-decorative-purple-hover); + --color-light-decorative-purple-inverted: var(--color-dark-decorative-purple-inverted); + --color-light-decorative-purple-inverted-hover: var( + --color-dark-decorative-purple-inverted-hover + ); + --color-light-decorative-purple-inverted-press: var( + --color-dark-decorative-purple-inverted-press + ); + --color-light-decorative-purple-press: var(--color-dark-decorative-purple-press); + --color-light-decorative-red: var(--color-dark-decorative-red); + --color-light-decorative-red-inverted: var(--color-dark-decorative-red-inverted); + --color-light-decorative-soft-blue: var(--color-dark-decorative-soft-blue); + --color-light-decorative-soft-blue-hover: var(--color-dark-decorative-soft-blue-hover); + --color-light-decorative-soft-blue-inverted: var(--color-dark-decorative-soft-blue-inverted); + --color-light-decorative-soft-blue-inverted-hover: var( + --color-dark-decorative-soft-blue-inverted-hover + ); + --color-light-decorative-soft-blue-inverted-press: var( + --color-dark-decorative-soft-blue-inverted-press + ); + --color-light-decorative-soft-blue-press: var(--color-dark-decorative-soft-blue-press); + --color-light-decorative-soft-cyan: var(--color-dark-decorative-soft-cyan); + --color-light-decorative-soft-cyan-hover: var(--color-dark-decorative-soft-cyan-hover); + --color-light-decorative-soft-cyan-inverted: var(--color-dark-decorative-soft-cyan-inverted); + --color-light-decorative-soft-cyan-inverted-hover: var( + --color-dark-decorative-soft-cyan-inverted-hover + ); + --color-light-decorative-soft-cyan-inverted-press: var( + --color-dark-decorative-soft-cyan-inverted-press + ); + --color-light-decorative-soft-cyan-press: var(--color-dark-decorative-soft-cyan-press); + --color-light-decorative-soft-fuchsia: var(--color-dark-decorative-soft-fuchsia); + --color-light-decorative-soft-fuchsia-hover: var(--color-dark-decorative-soft-fuchsia-hover); + --color-light-decorative-soft-fuchsia-inverted: var( + --color-dark-decorative-soft-fuchsia-inverted + ); + --color-light-decorative-soft-fuchsia-inverted-hover: var( + --color-dark-decorative-soft-fuchsia-inverted-hover + ); + --color-light-decorative-soft-fuchsia-inverted-press: var( + --color-dark-decorative-soft-fuchsia-inverted-press + ); + --color-light-decorative-soft-fuchsia-press: var(--color-dark-decorative-soft-fuchsia-press); + --color-light-decorative-soft-green: var(--color-dark-decorative-soft-green); + --color-light-decorative-soft-green-hover: var(--color-dark-decorative-soft-green-hover); + --color-light-decorative-soft-green-inverted: var(--color-dark-decorative-soft-green-inverted); + --color-light-decorative-soft-green-inverted-hover: var( + --color-dark-decorative-soft-green-inverted-hover + ); + --color-light-decorative-soft-green-inverted-press: var( + --color-dark-decorative-soft-green-inverted-press + ); + --color-light-decorative-soft-green-press: var(--color-dark-decorative-soft-green-press); + --color-light-decorative-soft-indigo: var(--color-dark-decorative-soft-indigo); + --color-light-decorative-soft-indigo-hover: var(--color-dark-decorative-soft-indigo-hover); + --color-light-decorative-soft-indigo-inverted: var( + --color-dark-decorative-soft-indigo-inverted + ); + --color-light-decorative-soft-indigo-inverted-hover: var( + --color-dark-decorative-soft-indigo-inverted-hover + ); + --color-light-decorative-soft-indigo-inverted-press: var( + --color-dark-decorative-soft-indigo-inverted-press + ); + --color-light-decorative-soft-indigo-press: var(--color-dark-decorative-soft-indigo-press); + --color-light-decorative-soft-jungle: var(--color-dark-decorative-soft-jungle); + --color-light-decorative-soft-jungle-hover: var(--color-dark-decorative-soft-jungle-hover); + --color-light-decorative-soft-jungle-inverted: var( + --color-dark-decorative-soft-jungle-inverted + ); + --color-light-decorative-soft-jungle-inverted-hover: var( + --color-dark-decorative-soft-jungle-inverted-hover + ); + --color-light-decorative-soft-jungle-inverted-press: var( + --color-dark-decorative-soft-jungle-inverted-press + ); + --color-light-decorative-soft-jungle-press: var(--color-dark-decorative-soft-jungle-press); + --color-light-decorative-soft-magenta: var(--color-dark-decorative-soft-magenta); + --color-light-decorative-soft-magenta-hover: var(--color-dark-decorative-soft-magenta-hover); + --color-light-decorative-soft-magenta-inverted: var( + --color-dark-decorative-soft-magenta-inverted + ); + --color-light-decorative-soft-magenta-inverted-hover: var( + --color-dark-decorative-soft-magenta-inverted-hover + ); + --color-light-decorative-soft-magenta-inverted-press: var( + --color-dark-decorative-soft-magenta-inverted-press + ); + --color-light-decorative-soft-magenta-press: var(--color-dark-decorative-soft-magenta-press); + --color-light-decorative-soft-orange: var(--color-dark-decorative-soft-orange); + --color-light-decorative-soft-orange-hover: var(--color-dark-decorative-soft-orange-hover); + --color-light-decorative-soft-orange-inverted: var( + --color-dark-decorative-soft-orange-inverted + ); + --color-light-decorative-soft-orange-inverted-hover: var( + --color-dark-decorative-soft-orange-inverted-hover + ); + --color-light-decorative-soft-orange-inverted-press: var( + --color-dark-decorative-soft-orange-inverted-press + ); + --color-light-decorative-soft-orange-press: var(--color-dark-decorative-soft-orange-press); + --color-light-decorative-soft-pistachio: var(--color-dark-decorative-soft-pistachio); + --color-light-decorative-soft-pistachio-hover: var( + --color-dark-decorative-soft-pistachio-hover + ); + --color-light-decorative-soft-pistachio-inverted: var( + --color-dark-decorative-soft-pistachio-inverted + ); + --color-light-decorative-soft-pistachio-inverted-hover: var( + --color-dark-decorative-soft-pistachio-inverted-hover + ); + --color-light-decorative-soft-pistachio-inverted-press: var( + --color-dark-decorative-soft-pistachio-inverted-press + ); + --color-light-decorative-soft-pistachio-press: var( + --color-dark-decorative-soft-pistachio-press + ); + --color-light-decorative-soft-purple: var(--color-dark-decorative-soft-purple); + --color-light-decorative-soft-purple-hover: var(--color-dark-decorative-soft-purple-hover); + --color-light-decorative-soft-purple-inverted: var( + --color-dark-decorative-soft-purple-inverted + ); + --color-light-decorative-soft-purple-inverted-hover: var( + --color-dark-decorative-soft-purple-inverted-hover + ); + --color-light-decorative-soft-purple-inverted-press: var( + --color-dark-decorative-soft-purple-inverted-press + ); + --color-light-decorative-soft-purple-press: var(--color-dark-decorative-soft-purple-press); + --color-light-decorative-soft-red: var(--color-dark-decorative-soft-red); + --color-light-decorative-soft-red-inverted: var(--color-dark-decorative-soft-red-inverted); + --color-light-decorative-soft-teal: var(--color-dark-decorative-soft-teal); + --color-light-decorative-soft-teal-hover: var(--color-dark-decorative-soft-teal-hover); + --color-light-decorative-soft-teal-inverted: var(--color-dark-decorative-soft-teal-inverted); + --color-light-decorative-soft-teal-inverted-hover: var( + --color-dark-decorative-soft-teal-inverted-hover + ); + --color-light-decorative-soft-teal-inverted-press: var( + --color-dark-decorative-soft-teal-inverted-press + ); + --color-light-decorative-soft-teal-press: var(--color-dark-decorative-soft-teal-press); + --color-light-decorative-soft-yellow: var(--color-dark-decorative-soft-yellow); + --color-light-decorative-soft-yellow-inverted: var( + --color-dark-decorative-soft-yellow-inverted + ); + --color-light-decorative-teal: var(--color-dark-decorative-teal); + --color-light-decorative-teal-hover: var(--color-dark-decorative-teal-hover); + --color-light-decorative-teal-inverted: var(--color-dark-decorative-teal-inverted); + --color-light-decorative-teal-inverted-hover: var(--color-dark-decorative-teal-inverted-hover); + --color-light-decorative-teal-inverted-press: var(--color-dark-decorative-teal-inverted-press); + --color-light-decorative-teal-press: var(--color-dark-decorative-teal-press); + --color-light-decorative-text-blue: var(--color-dark-decorative-text-blue); + --color-light-decorative-text-blue-inverted: var(--color-dark-decorative-text-blue-inverted); + --color-light-decorative-text-cyan: var(--color-dark-decorative-text-cyan); + --color-light-decorative-text-cyan-inverted: var(--color-dark-decorative-text-cyan-inverted); + --color-light-decorative-text-fuchsia: var(--color-dark-decorative-text-fuchsia); + --color-light-decorative-text-fuchsia-inverted: var( + --color-dark-decorative-text-fuchsia-inverted + ); + --color-light-decorative-text-green: var(--color-dark-decorative-text-green); + --color-light-decorative-text-green-inverted: var(--color-dark-decorative-text-green-inverted); + --color-light-decorative-text-indigo: var(--color-dark-decorative-text-indigo); + --color-light-decorative-text-indigo-inverted: var( + --color-dark-decorative-text-indigo-inverted + ); + --color-light-decorative-text-jungle: var(--color-dark-decorative-text-jungle); + --color-light-decorative-text-jungle-inverted: var( + --color-dark-decorative-text-jungle-inverted + ); + --color-light-decorative-text-magenta: var(--color-dark-decorative-text-magenta); + --color-light-decorative-text-magenta-inverted: var( + --color-dark-decorative-text-magenta-inverted + ); + --color-light-decorative-text-orange: var(--color-dark-decorative-text-orange); + --color-light-decorative-text-orange-inverted: var( + --color-dark-decorative-text-orange-inverted + ); + --color-light-decorative-text-pistachio: var(--color-dark-decorative-text-pistachio); + --color-light-decorative-text-pistachio-inverted: var( + --color-dark-decorative-text-pistachio-inverted + ); + --color-light-decorative-text-purple: var(--color-dark-decorative-text-purple); + --color-light-decorative-text-purple-inverted: var( + --color-dark-decorative-text-purple-inverted + ); + --color-light-decorative-text-red: var(--color-dark-decorative-text-red); + --color-light-decorative-text-red-inverted: var(--color-dark-decorative-text-red-inverted); + --color-light-decorative-text-teal: var(--color-dark-decorative-text-teal); + --color-light-decorative-text-teal-inverted: var(--color-dark-decorative-text-teal-inverted); + --color-light-decorative-text-yellow: var(--color-dark-decorative-text-yellow); + --color-light-decorative-text-yellow-inverted: var( + --color-dark-decorative-text-yellow-inverted + ); + --color-light-decorative-yellow: var(--color-dark-decorative-yellow); + --color-light-decorative-yellow-inverted: var(--color-dark-decorative-yellow-inverted); +} diff --git a/packages/vars/src/colors-indigo-dark.css b/packages/vars/src/colors-indigo-dark.css new file mode 100644 index 0000000000..4d04b3f6d2 --- /dev/null +++ b/packages/vars/src/colors-indigo-dark.css @@ -0,0 +1,564 @@ +:root { + --color-light-accent-primary: var(--color-dark-accent-primary); + --color-light-accent-primary-hover: var(--color-dark-accent-primary-hover); + --color-light-accent-primary-inverted: var(--color-dark-accent-primary-inverted); + --color-light-accent-primary-inverted-hover: var(--color-dark-accent-primary-inverted-hover); + --color-light-accent-primary-inverted-press: var(--color-dark-accent-primary-inverted-press); + --color-light-accent-primary-press: var(--color-dark-accent-primary-press); + --color-light-accent-secondary: var(--color-dark-accent-secondary); + --color-light-accent-secondary-hover: var(--color-dark-accent-secondary-hover); + --color-light-accent-secondary-inverted: var(--color-dark-accent-secondary-inverted); + --color-light-accent-secondary-inverted-hover: var( + --color-dark-accent-secondary-inverted-hover + ); + --color-light-accent-secondary-inverted-press: var( + --color-dark-accent-secondary-inverted-press + ); + --color-light-accent-secondary-press: var(--color-dark-accent-secondary-press); + --color-light-base-bg-alt-primary: var(--color-dark-base-bg-alt-primary); + --color-light-base-bg-alt-primary-inverted: var(--color-dark-base-bg-alt-primary-inverted); + --color-light-base-bg-alt-secondary: var(--color-dark-base-bg-alt-secondary); + --color-light-base-bg-alt-secondary-inverted: var(--color-dark-base-bg-alt-secondary-inverted); + --color-light-base-bg-alt-tertiary: var(--color-dark-base-bg-alt-tertiary); + --color-light-base-bg-alt-tertiary-inverted: var(--color-dark-base-bg-alt-tertiary-inverted); + --color-light-base-bg-primary: var(--color-dark-base-bg-primary); + --color-light-base-bg-primary-inverted: var(--color-dark-base-bg-primary-inverted); + --color-light-base-bg-secondary: var(--color-dark-base-bg-secondary); + --color-light-base-bg-secondary-inverted: var(--color-dark-base-bg-secondary-inverted); + --color-light-base-bg-tertiary: var(--color-dark-base-bg-tertiary); + --color-light-base-bg-tertiary-inverted: var(--color-dark-base-bg-tertiary-inverted); + --color-light-modal-bg-alt-primary: var(--color-dark-modal-bg-alt-primary); + --color-light-modal-bg-alt-primary-inverted: var(--color-dark-modal-bg-alt-primary-inverted); + --color-light-modal-bg-alt-secondary: var(--color-dark-modal-bg-alt-secondary); + --color-light-modal-bg-alt-secondary-inverted: var( + --color-dark-modal-bg-alt-secondary-inverted + ); + --color-light-modal-bg-alt-tertiary: var(--color-dark-modal-bg-alt-tertiary); + --color-light-modal-bg-alt-tertiary-inverted: var(--color-dark-modal-bg-alt-tertiary-inverted); + --color-light-modal-bg-primary: var(--color-dark-modal-bg-primary); + --color-light-modal-bg-primary-inverted: var(--color-dark-modal-bg-primary-inverted); + --color-light-modal-bg-secondary: var(--color-dark-modal-bg-secondary); + --color-light-modal-bg-secondary-inverted: var(--color-dark-modal-bg-secondary-inverted); + --color-light-modal-bg-tertiary: var(--color-dark-modal-bg-tertiary); + --color-light-modal-bg-tertiary-inverted: var(--color-dark-modal-bg-tertiary-inverted); + --color-light-neutral-0: var(--color-dark-neutral-0); + --color-light-neutral-0-hover: var(--color-dark-neutral-0-hover); + --color-light-neutral-0-inverted: var(--color-dark-neutral-0-inverted); + --color-light-neutral-0-inverted-hover: var(--color-dark-neutral-0-inverted-hover); + --color-light-neutral-0-inverted-press: var(--color-dark-neutral-0-inverted-press); + --color-light-neutral-0-press: var(--color-dark-neutral-0-press); + --color-light-neutral-100: var(--color-dark-neutral-100); + --color-light-neutral-100-hover: var(--color-dark-neutral-100-hover); + --color-light-neutral-100-inverted: var(--color-dark-neutral-100-inverted); + --color-light-neutral-100-inverted-hover: var(--color-dark-neutral-100-inverted-hover); + --color-light-neutral-100-inverted-press: var(--color-dark-neutral-100-inverted-press); + --color-light-neutral-100-press: var(--color-dark-neutral-100-press); + --color-light-neutral-1300: var(--color-dark-neutral-1300); + --color-light-neutral-1300-hover: var(--color-dark-neutral-1300-hover); + --color-light-neutral-1300-inverted: var(--color-dark-neutral-1300-inverted); + --color-light-neutral-1300-inverted-hover: var(--color-dark-neutral-1300-inverted-hover); + --color-light-neutral-1300-inverted-press: var(--color-dark-neutral-1300-inverted-press); + --color-light-neutral-1300-press: var(--color-dark-neutral-1300-press); + --color-light-neutral-1500: var(--color-dark-neutral-1500); + --color-light-neutral-1500-hover: var(--color-dark-neutral-1500-hover); + --color-light-neutral-1500-inverted: var(--color-dark-neutral-1500-inverted); + --color-light-neutral-1500-inverted-hover: var(--color-dark-neutral-1500-inverted-hover); + --color-light-neutral-1500-inverted-press: var(--color-dark-neutral-1500-inverted-press); + --color-light-neutral-1500-press: var(--color-dark-neutral-1500-press); + --color-light-neutral-200: var(--color-dark-neutral-200); + --color-light-neutral-200-hover: var(--color-dark-neutral-200-hover); + --color-light-neutral-200-inverted: var(--color-dark-neutral-200-inverted); + --color-light-neutral-200-inverted-hover: var(--color-dark-neutral-200-inverted-hover); + --color-light-neutral-200-inverted-press: var(--color-dark-neutral-200-inverted-press); + --color-light-neutral-200-press: var(--color-dark-neutral-200-press); + --color-light-neutral-300: var(--color-dark-neutral-300); + --color-light-neutral-300-hover: var(--color-dark-neutral-300-hover); + --color-light-neutral-300-inverted: var(--color-dark-neutral-300-inverted); + --color-light-neutral-300-inverted-hover: var(--color-dark-neutral-300-inverted-hover); + --color-light-neutral-300-inverted-press: var(--color-dark-neutral-300-inverted-press); + --color-light-neutral-300-press: var(--color-dark-neutral-300-press); + --color-light-neutral-400: var(--color-dark-neutral-400); + --color-light-neutral-400-hover: var(--color-dark-neutral-400-hover); + --color-light-neutral-400-inverted: var(--color-dark-neutral-400-inverted); + --color-light-neutral-400-inverted-hover: var(--color-dark-neutral-400-inverted-hover); + --color-light-neutral-400-inverted-press: var(--color-dark-neutral-400-inverted-press); + --color-light-neutral-400-press: var(--color-dark-neutral-400-press); + --color-light-neutral-500: var(--color-dark-neutral-500); + --color-light-neutral-500-hover: var(--color-dark-neutral-500-hover); + --color-light-neutral-500-inverted: var(--color-dark-neutral-500-inverted); + --color-light-neutral-500-inverted-hover: var(--color-dark-neutral-500-inverted-hover); + --color-light-neutral-500-inverted-press: var(--color-dark-neutral-500-inverted-press); + --color-light-neutral-500-press: var(--color-dark-neutral-500-press); + --color-light-neutral-700: var(--color-dark-neutral-700); + --color-light-neutral-700-hover: var(--color-dark-neutral-700-hover); + --color-light-neutral-700-inverted: var(--color-dark-neutral-700-inverted); + --color-light-neutral-700-inverted-hover: var(--color-dark-neutral-700-inverted-hover); + --color-light-neutral-700-inverted-press: var(--color-dark-neutral-700-inverted-press); + --color-light-neutral-700-press: var(--color-dark-neutral-700-press); + --color-light-neutral-translucent-0: var(--color-dark-neutral-translucent-0); + --color-light-neutral-translucent-0-hover: var(--color-dark-neutral-translucent-0-hover); + --color-light-neutral-translucent-0-inverted: var(--color-dark-neutral-translucent-0-inverted); + --color-light-neutral-translucent-0-inverted-hover: var( + --color-dark-neutral-translucent-0-inverted-hover + ); + --color-light-neutral-translucent-0-inverted-press: var( + --color-dark-neutral-translucent-0-inverted-press + ); + --color-light-neutral-translucent-0-press: var(--color-dark-neutral-translucent-0-press); + --color-light-neutral-translucent-100: var(--color-dark-neutral-translucent-100); + --color-light-neutral-translucent-100-hover: var(--color-dark-neutral-translucent-100-hover); + --color-light-neutral-translucent-100-inverted: var( + --color-dark-neutral-translucent-100-inverted + ); + --color-light-neutral-translucent-100-inverted-hover: var( + --color-dark-neutral-translucent-100-inverted-hover + ); + --color-light-neutral-translucent-100-inverted-press: var( + --color-dark-neutral-translucent-100-inverted-press + ); + --color-light-neutral-translucent-100-press: var(--color-dark-neutral-translucent-100-press); + --color-light-neutral-translucent-1300: var(--color-dark-neutral-translucent-1300); + --color-light-neutral-translucent-1300-hover: var(--color-dark-neutral-translucent-1300-hover); + --color-light-neutral-translucent-1300-inverted: var( + --color-dark-neutral-translucent-1300-inverted + ); + --color-light-neutral-translucent-1300-inverted-hover: var( + --color-dark-neutral-translucent-1300-inverted-hover + ); + --color-light-neutral-translucent-1300-inverted-press: var( + --color-dark-neutral-translucent-1300-inverted-press + ); + --color-light-neutral-translucent-1300-press: var(--color-dark-neutral-translucent-1300-press); + --color-light-neutral-translucent-1500-hover: var(--color-dark-neutral-translucent-1500-hover); + --color-light-neutral-translucent-1500-inverted-hover: var( + --color-dark-neutral-translucent-1500-inverted-hover + ); + --color-light-neutral-translucent-1500-inverted-press: var( + --color-dark-neutral-translucent-1500-inverted-press + ); + --color-light-neutral-translucent-1500-press: var(--color-dark-neutral-translucent-1500-press); + --color-light-neutral-translucent-200: var(--color-dark-neutral-translucent-200); + --color-light-neutral-translucent-200-hover: var(--color-dark-neutral-translucent-200-hover); + --color-light-neutral-translucent-200-inverted: var( + --color-dark-neutral-translucent-200-inverted + ); + --color-light-neutral-translucent-200-inverted-hover: var( + --color-dark-neutral-translucent-200-inverted-hover + ); + --color-light-neutral-translucent-200-inverted-press: var( + --color-dark-neutral-translucent-200-inverted-press + ); + --color-light-neutral-translucent-200-press: var(--color-dark-neutral-translucent-200-press); + --color-light-neutral-translucent-300: var(--color-dark-neutral-translucent-300); + --color-light-neutral-translucent-300-hover: var(--color-dark-neutral-translucent-300-hover); + --color-light-neutral-translucent-300-inverted: var( + --color-dark-neutral-translucent-300-inverted + ); + --color-light-neutral-translucent-300-inverted-hover: var( + --color-dark-neutral-translucent-300-inverted-hover + ); + --color-light-neutral-translucent-300-inverted-press: var( + --color-dark-neutral-translucent-300-inverted-press + ); + --color-light-neutral-translucent-300-press: var(--color-dark-neutral-translucent-300-press); + --color-light-neutral-translucent-400: var(--color-dark-neutral-translucent-400); + --color-light-neutral-translucent-400-hover: var(--color-dark-neutral-translucent-400-hover); + --color-light-neutral-translucent-400-inverted: var( + --color-dark-neutral-translucent-400-inverted + ); + --color-light-neutral-translucent-400-inverted-hover: var( + --color-dark-neutral-translucent-400-inverted-hover + ); + --color-light-neutral-translucent-400-inverted-press: var( + --color-dark-neutral-translucent-400-inverted-press + ); + --color-light-neutral-translucent-400-press: var(--color-dark-neutral-translucent-400-press); + --color-light-neutral-translucent-500: var(--color-dark-neutral-translucent-500); + --color-light-neutral-translucent-500-hover: var(--color-dark-neutral-translucent-500-hover); + --color-light-neutral-translucent-500-inverted: var( + --color-dark-neutral-translucent-500-inverted + ); + --color-light-neutral-translucent-500-inverted-hover: var( + --color-dark-neutral-translucent-500-inverted-hover + ); + --color-light-neutral-translucent-500-inverted-press: var( + --color-dark-neutral-translucent-500-inverted-press + ); + --color-light-neutral-translucent-500-press: var(--color-dark-neutral-translucent-500-press); + --color-light-neutral-translucent-700: var(--color-dark-neutral-translucent-700); + --color-light-neutral-translucent-700-hover: var(--color-dark-neutral-translucent-700-hover); + --color-light-neutral-translucent-700-inverted: var( + --color-dark-neutral-translucent-700-inverted + ); + --color-light-neutral-translucent-700-inverted-hover: var( + --color-dark-neutral-translucent-700-inverted-hover + ); + --color-light-neutral-translucent-700-inverted-press: var( + --color-dark-neutral-translucent-700-inverted-press + ); + --color-light-neutral-translucent-700-press: var(--color-dark-neutral-translucent-700-press); + --color-light-overlay-default: var(--color-dark-overlay-default); + --color-light-status-attention: var(--color-dark-status-attention); + --color-light-status-attention-hover: var(--color-dark-status-attention-hover); + --color-light-status-attention-inverted: var(--color-dark-status-attention-inverted); + --color-light-status-attention-inverted-hover: var( + --color-dark-status-attention-inverted-hover + ); + --color-light-status-attention-inverted-press: var( + --color-dark-status-attention-inverted-press + ); + --color-light-status-attention-press: var(--color-dark-status-attention-press); + --color-light-status-info: var(--color-dark-status-info); + --color-light-status-info-hover: var(--color-dark-status-info-hover); + --color-light-status-info-inverted: var(--color-dark-status-info-inverted); + --color-light-status-info-inverted-hover: var(--color-dark-status-info-inverted-hover); + --color-light-status-info-inverted-press: var(--color-dark-status-info-inverted-press); + --color-light-status-info-press: var(--color-dark-status-info-press); + --color-light-status-muted-alt-attention: var(--color-dark-status-muted-alt-attention); + --color-light-status-muted-alt-attention-hover: var( + --color-dark-status-muted-alt-attention-hover + ); + --color-light-status-muted-alt-attention-inverted: var( + --color-dark-status-muted-alt-attention-inverted + ); + --color-light-status-muted-alt-attention-inverted-hover: var( + --color-dark-status-muted-alt-attention-inverted-hover + ); + --color-light-status-muted-alt-attention-inverted-press: var( + --color-dark-status-muted-alt-attention-inverted-press + ); + --color-light-status-muted-alt-attention-press: var( + --color-dark-status-muted-alt-attention-press + ); + --color-light-status-muted-alt-info: var(--color-dark-status-muted-alt-info); + --color-light-status-muted-alt-info-hover: var(--color-dark-status-muted-alt-info-hover); + --color-light-status-muted-alt-info-inverted: var(--color-dark-status-muted-alt-info-inverted); + --color-light-status-muted-alt-info-inverted-hover: var( + --color-dark-status-muted-alt-info-inverted-hover + ); + --color-light-status-muted-alt-info-inverted-press: var( + --color-dark-status-muted-alt-info-inverted-press + ); + --color-light-status-muted-alt-info-press: var(--color-dark-status-muted-alt-info-press); + --color-light-status-muted-alt-negative: var(--color-dark-status-muted-alt-negative); + --color-light-status-muted-alt-negative-hover: var( + --color-dark-status-muted-alt-negative-hover + ); + --color-light-status-muted-alt-negative-inverted: var( + --color-dark-status-muted-alt-negative-inverted + ); + --color-light-status-muted-alt-negative-inverted-hover: var( + --color-dark-status-muted-alt-negative-inverted-hover + ); + --color-light-status-muted-alt-negative-inverted-press: var( + --color-dark-status-muted-alt-negative-inverted-press + ); + --color-light-status-muted-alt-negative-press: var( + --color-dark-status-muted-alt-negative-press + ); + --color-light-status-muted-alt-positive: var(--color-dark-status-muted-alt-positive); + --color-light-status-muted-alt-positive-hover: var( + --color-dark-status-muted-alt-positive-hover + ); + --color-light-status-muted-alt-positive-inverted: var( + --color-dark-status-muted-alt-positive-inverted + ); + --color-light-status-muted-alt-positive-inverted-hover: var( + --color-dark-status-muted-alt-positive-inverted-hover + ); + --color-light-status-muted-alt-positive-inverted-press: var( + --color-dark-status-muted-alt-positive-inverted-press + ); + --color-light-status-muted-alt-positive-press: var( + --color-dark-status-muted-alt-positive-press + ); + --color-light-status-muted-attention: var(--color-dark-status-muted-attention); + --color-light-status-muted-attention-hover: var(--color-dark-status-muted-attention-hover); + --color-light-status-muted-attention-inverted: var( + --color-dark-status-muted-attention-inverted + ); + --color-light-status-muted-attention-inverted-hover: var( + --color-dark-status-muted-attention-inverted-hover + ); + --color-light-status-muted-attention-inverted-press: var( + --color-dark-status-muted-attention-inverted-press + ); + --color-light-status-muted-attention-press: var(--color-dark-status-muted-attention-press); + --color-light-status-muted-info: var(--color-dark-status-muted-info); + --color-light-status-muted-info-hover: var(--color-dark-status-muted-info-hover); + --color-light-status-muted-info-inverted: var(--color-dark-status-muted-info-inverted); + --color-light-status-muted-info-inverted-hover: var( + --color-dark-status-muted-info-inverted-hover + ); + --color-light-status-muted-info-inverted-press: var( + --color-dark-status-muted-info-inverted-press + ); + --color-light-status-muted-info-press: var(--color-dark-status-muted-info-press); + --color-light-status-muted-negative: var(--color-dark-status-muted-negative); + --color-light-status-muted-negative-hover: var(--color-dark-status-muted-negative-hover); + --color-light-status-muted-negative-inverted: var(--color-dark-status-muted-negative-inverted); + --color-light-status-muted-negative-inverted-hover: var( + --color-dark-status-muted-negative-inverted-hover + ); + --color-light-status-muted-negative-inverted-press: var( + --color-dark-status-muted-negative-inverted-press + ); + --color-light-status-muted-negative-press: var(--color-dark-status-muted-negative-press); + --color-light-status-muted-positive: var(--color-dark-status-muted-positive); + --color-light-status-muted-positive-hover: var(--color-dark-status-muted-positive-hover); + --color-light-status-muted-positive-inverted: var(--color-dark-status-muted-positive-inverted); + --color-light-status-muted-positive-inverted-hover: var( + --color-dark-status-muted-positive-inverted-hover + ); + --color-light-status-muted-positive-inverted-press: var( + --color-dark-status-muted-positive-inverted-press + ); + --color-light-status-muted-positive-press: var(--color-dark-status-muted-positive-press); + --color-light-status-negative: var(--color-dark-status-negative); + --color-light-status-negative-hover: var(--color-dark-status-negative-hover); + --color-light-status-negative-inverted: var(--color-dark-status-negative-inverted); + --color-light-status-negative-inverted-hover: var(--color-dark-status-negative-inverted-hover); + --color-light-status-negative-inverted-press: var(--color-dark-status-negative-inverted-press); + --color-light-status-negative-press: var(--color-dark-status-negative-press); + --color-light-status-positive: var(--color-dark-status-positive); + --color-light-status-positive-hover: var(--color-dark-status-positive-hover); + --color-light-status-positive-inverted: var(--color-dark-status-positive-inverted); + --color-light-status-positive-inverted-hover: var(--color-dark-status-positive-inverted-hover); + --color-light-status-positive-inverted-press: var(--color-dark-status-positive-inverted-press); + --color-light-status-positive-press: var(--color-dark-status-positive-press); + --color-light-text-attention: var(--color-dark-text-attention); + --color-light-text-attention-hover: var(--color-dark-text-attention-hover); + --color-light-text-attention-inverted: var(--color-dark-text-attention-inverted); + --color-light-text-attention-inverted-hover: var(--color-dark-text-attention-inverted-hover); + --color-light-text-attention-inverted-press: var(--color-dark-text-attention-inverted-press); + --color-light-text-attention-press: var(--color-dark-text-attention-press); + --color-light-text-info: var(--color-dark-text-info); + --color-light-text-info-hover: var(--color-dark-text-info-hover); + --color-light-text-info-inverted: var(--color-dark-text-info-inverted); + --color-light-text-info-inverted-hover: var(--color-dark-text-info-inverted-hover); + --color-light-text-info-inverted-press: var(--color-dark-text-info-inverted-press); + --color-light-text-info-press: var(--color-dark-text-info-press); + --color-light-text-negative: var(--color-dark-text-negative); + --color-light-text-negative-hover: var(--color-dark-text-negative-hover); + --color-light-text-negative-inverted: var(--color-dark-text-negative-inverted); + --color-light-text-negative-inverted-hover: var(--color-dark-text-negative-inverted-hover); + --color-light-text-negative-inverted-press: var(--color-dark-text-negative-inverted-press); + --color-light-text-negative-press: var(--color-dark-text-negative-press); + --color-light-text-positive: var(--color-dark-text-positive); + --color-light-text-positive-hover: var(--color-dark-text-positive-hover); + --color-light-text-positive-inverted: var(--color-dark-text-positive-inverted); + --color-light-text-positive-inverted-hover: var(--color-dark-text-positive-inverted-hover); + --color-light-text-positive-inverted-press: var(--color-dark-text-positive-inverted-press); + --color-light-text-positive-press: var(--color-dark-text-positive-press); + --color-light-text-primary: var(--color-dark-text-primary); + --color-light-text-primary-hover: var(--color-dark-text-primary-hover); + --color-light-text-primary-inverted: var(--color-dark-text-primary-inverted); + --color-light-text-primary-inverted-hover: var(--color-dark-text-primary-inverted-hover); + --color-light-text-primary-inverted-press: var(--color-dark-text-primary-inverted-press); + --color-light-text-primary-press: var(--color-dark-text-primary-press); + --color-light-text-quaternary: var(--color-dark-text-quaternary); + --color-light-text-quaternary-inverted: var(--color-dark-text-quaternary-inverted); + --color-light-text-secondary: var(--color-dark-text-secondary); + --color-light-text-secondary-hover: var(--color-dark-text-secondary-hover); + --color-light-text-secondary-inverted: var(--color-dark-text-secondary-inverted); + --color-light-text-secondary-inverted-hover: var(--color-dark-text-secondary-inverted-hover); + --color-light-text-secondary-inverted-press: var(--color-dark-text-secondary-inverted-press); + --color-light-text-secondary-press: var(--color-dark-text-secondary-press); + --color-light-text-tertiary: var(--color-dark-text-tertiary); + --color-light-text-tertiary-hover: var(--color-dark-text-tertiary-hover); + --color-light-text-tertiary-inverted: var(--color-dark-text-tertiary-inverted); + --color-light-text-tertiary-inverted-hover: var(--color-dark-text-tertiary-inverted-hover); + --color-light-text-tertiary-inverted-press: var(--color-dark-text-tertiary-inverted-press); + --color-light-text-tertiary-press: var(--color-dark-text-tertiary-press); + --color-light-transparent-default: var(--color-dark-transparent-default); + --color-light-transparent-default-hover: var(--color-dark-transparent-default-hover); + --color-light-transparent-default-inverted-hover: var( + --color-dark-transparent-default-inverted-hover + ); + --color-light-transparent-default-inverted-press: var( + --color-dark-transparent-default-inverted-press + ); + --color-light-transparent-default-press: var(--color-dark-transparent-default-press); + --color-light-bg-accent: var(--color-dark-bg-accent); + --color-light-bg-attention-muted: var(--color-dark-bg-attention-muted); + --color-light-bg-component: var(--color-dark-bg-component); + --color-light-bg-component-inverted: var(--color-dark-bg-component-inverted); + --color-light-bg-info: var(--color-dark-bg-info); + --color-light-bg-link-muted: var(--color-dark-bg-link-muted); + --color-light-bg-negative-muted: var(--color-dark-bg-negative-muted); + --color-light-bg-neutral: var(--color-dark-bg-neutral); + --color-light-bg-nulled: var(--color-dark-bg-nulled); + --color-light-bg-opaque: var(--color-dark-bg-opaque); + --color-light-bg-overlay: var(--color-dark-bg-overlay); + --color-light-bg-positive-muted: var(--color-dark-bg-positive-muted); + --color-light-bg-primary: var(--color-dark-bg-primary); + --color-light-bg-primary-grouped: var(--color-dark-bg-primary-grouped); + --color-light-bg-primary-inverted: var(--color-dark-bg-primary-inverted); + --color-light-bg-quaternary: var(--color-dark-bg-quaternary); + --color-light-bg-quaternary-inverted: var(--color-dark-bg-quaternary-inverted); + --color-light-bg-secondary: var(--color-dark-bg-secondary); + --color-light-bg-secondary-grouped: var(--color-dark-bg-secondary-grouped); + --color-light-bg-secondary-inverted: var(--color-dark-bg-secondary-inverted); + --color-light-bg-tertiary: var(--color-dark-bg-tertiary); + --color-light-bg-tertiary-grouped: var(--color-dark-bg-tertiary-grouped); + --color-light-bg-tertiary-inverted: var(--color-dark-bg-tertiary-inverted); + --color-light-border-accent: var(--color-dark-border-accent); + --color-light-border-key: var(--color-dark-border-key); + --color-light-border-key-inverted: var(--color-dark-border-key-inverted); + --color-light-border-link: var(--color-dark-border-link); + --color-light-border-primary: var(--color-dark-border-primary); + --color-light-border-primary-inverted: var(--color-dark-border-primary-inverted); + --color-light-border-secondary: var(--color-dark-border-secondary); + --color-light-border-secondary-inverted: var(--color-dark-border-secondary-inverted); + --color-light-border-tertiary: var(--color-dark-border-tertiary); + --color-light-border-tertiary-inverted: var(--color-dark-border-tertiary-inverted); + --color-light-border-underline: var(--color-dark-border-underline); + --color-light-border-underline-inverted: var(--color-dark-border-underline-inverted); + --color-light-graphic-accent: var(--color-dark-graphic-accent); + --color-light-graphic-attention: var(--color-dark-graphic-attention); + --color-light-graphic-link: var(--color-dark-graphic-link); + --color-light-graphic-negative: var(--color-dark-graphic-negative); + --color-light-graphic-neutral: var(--color-dark-graphic-neutral); + --color-light-graphic-positive: var(--color-dark-graphic-positive); + --color-light-graphic-primary: var(--color-dark-graphic-primary); + --color-light-graphic-primary-inverted: var(--color-dark-graphic-primary-inverted); + --color-light-graphic-quaternary: var(--color-dark-graphic-quaternary); + --color-light-graphic-quaternary-inverted: var(--color-dark-graphic-quaternary-inverted); + --color-light-graphic-secondary: var(--color-dark-graphic-secondary); + --color-light-graphic-secondary-inverted: var(--color-dark-graphic-secondary-inverted); + --color-light-graphic-tertiary: var(--color-dark-graphic-tertiary); + --color-light-graphic-tertiary-inverted: var(--color-dark-graphic-tertiary-inverted); + --color-light-specialbg-component: var(--color-dark-specialbg-component); + --color-light-specialbg-component-inverted: var(--color-dark-specialbg-component-inverted); + --color-light-specialbg-nulled: var(--color-dark-specialbg-nulled); + --color-light-specialbg-overlay: var(--color-dark-specialbg-overlay); + --color-light-specialbg-overlay-fallback: var(--color-dark-specialbg-overlay-fallback); + --color-light-specialbg-primary-grouped: var(--color-dark-specialbg-primary-grouped); + --color-light-specialbg-secondary-grouped: var(--color-dark-specialbg-secondary-grouped); + --color-light-specialbg-secondary-transparent: var( + --color-dark-specialbg-secondary-transparent + ); + --color-light-specialbg-secondary-transparent-inverted: var( + --color-dark-specialbg-secondary-transparent-inverted + ); + --color-light-specialbg-tertiary-grouped: var(--color-dark-specialbg-tertiary-grouped); + --color-light-specialbg-tertiary-transparent: var(--color-dark-specialbg-tertiary-transparent); + --color-light-specialbg-tertiary-transparent-inverted: var( + --color-dark-specialbg-tertiary-transparent-inverted + ); + --color-light-text-accent: var(--color-dark-text-accent); + --color-light-text-disabled: var(--color-dark-text-disabled); + --color-light-text-disabled-inverted: var(--color-dark-text-disabled-inverted); + --color-light-text-disabled-transparent: var(--color-dark-text-disabled-transparent); + --color-light-text-link: var(--color-dark-text-link); + --color-light-text-secondary-inverted-transparent: var( + --color-dark-text-secondary-inverted-transparent + ); + --color-light-text-secondary-transparent: var(--color-dark-text-secondary-transparent); + --color-light-text-tertiary-inverted-transparent: var( + --color-dark-text-tertiary-inverted-transparent + ); + --color-light-text-tertiary-transparent: var(--color-dark-text-tertiary-transparent); + --color-light-neutral-700-alpha-15: var(--color-dark-neutral-700-alpha-15); + --color-light-status-info-alpha-15: var(--color-dark-status-info-alpha-15); + --color-light-text-primary-alpha-30: var(--color-dark-text-primary-alpha-30); + --color-light-text-primary-tint-40: var(--color-dark-text-primary-tint-40); + --color-light-text-primary-shade-40: var(--color-dark-text-primary-shade-40); + --color-light-text-primary-inverted-alpha-30: var(--color-dark-text-primary-inverted-alpha-30); + --color-light-text-primary-inverted-alpha-40: var(--color-dark-text-primary-inverted-alpha-40); + --color-light-text-primary-inverted-tint-30: var(--color-dark-text-primary-inverted-tint-30); + --color-light-text-primary-inverted-shade-30: var(--color-dark-text-primary-inverted-shade-30); + --color-light-text-secondary-tint-20: var(--color-dark-text-secondary-tint-20); + --color-light-text-secondary-shade-20: var(--color-dark-text-secondary-shade-20); + --color-light-bg-accent-alpha-30: var(--color-dark-bg-accent-alpha-30); + --color-light-bg-accent-tint-15: var(--color-dark-bg-accent-tint-15); + --color-light-bg-accent-shade-15: var(--color-dark-bg-accent-shade-15); + --color-light-bg-primary-alpha-4: var(--color-dark-bg-primary-alpha-4); + --color-light-bg-primary-alpha-8: var(--color-dark-bg-primary-alpha-8); + --color-light-bg-primary-alpha-12: var(--color-dark-bg-primary-alpha-12); + --color-light-bg-primary-alpha-15: var(--color-dark-bg-primary-alpha-15); + --color-light-bg-primary-alpha-16: var(--color-dark-bg-primary-alpha-16); + --color-light-bg-primary-alpha-20: var(--color-dark-bg-primary-alpha-20); + --color-light-bg-primary-alpha-30: var(--color-dark-bg-primary-alpha-30); + --color-light-bg-primary-alpha-32: var(--color-dark-bg-primary-alpha-32); + --color-light-bg-primary-alpha-37: var(--color-dark-bg-primary-alpha-37); + --color-light-bg-primary-alpha-40: var(--color-dark-bg-primary-alpha-40); + --color-light-bg-primary-inverted-alpha-3: var(--color-dark-bg-primary-inverted-alpha-3); + --color-light-bg-primary-inverted-alpha-4: var(--color-dark-bg-primary-inverted-alpha-4); + --color-light-bg-primary-inverted-alpha-5: var(--color-dark-bg-primary-inverted-alpha-5); + --color-light-bg-primary-inverted-alpha-7: var(--color-dark-bg-primary-inverted-alpha-7); + --color-light-bg-primary-inverted-alpha-8: var(--color-dark-bg-primary-inverted-alpha-8); + --color-light-bg-primary-inverted-alpha-10: var(--color-dark-bg-primary-inverted-alpha-10); + --color-light-bg-primary-inverted-alpha-12: var(--color-dark-bg-primary-inverted-alpha-12); + --color-light-bg-primary-inverted-alpha-15: var(--color-dark-bg-primary-inverted-alpha-15); + --color-light-bg-primary-inverted-alpha-16: var(--color-dark-bg-primary-inverted-alpha-16); + --color-light-bg-primary-inverted-alpha-20: var(--color-dark-bg-primary-inverted-alpha-20); + --color-light-bg-primary-inverted-alpha-24: var(--color-dark-bg-primary-inverted-alpha-24); + --color-light-bg-primary-inverted-alpha-30: var(--color-dark-bg-primary-inverted-alpha-30); + --color-light-bg-primary-inverted-alpha-32: var(--color-dark-bg-primary-inverted-alpha-32); + --color-light-bg-primary-inverted-alpha-40: var(--color-dark-bg-primary-inverted-alpha-40); + --color-light-bg-primary-inverted-alpha-50: var(--color-dark-bg-primary-inverted-alpha-50); + --color-light-bg-quaternary-alpha-30: var(--color-dark-bg-quaternary-alpha-30); + --color-light-bg-quaternary-inverted-alpha-30: var( + --color-dark-bg-quaternary-inverted-alpha-30 + ); + --color-light-bg-secondary-alpha-30: var(--color-dark-bg-secondary-alpha-30); + --color-light-bg-secondary-tint-15: var(--color-dark-bg-secondary-tint-15); + --color-light-bg-secondary-shade-15: var(--color-dark-bg-secondary-shade-15); + --color-light-bg-secondary-inverted-alpha-30: var(--color-dark-bg-secondary-inverted-alpha-30); + --color-light-bg-secondary-inverted-tint-15: var(--color-dark-bg-secondary-inverted-tint-15); + --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-shade-15); + --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7); + --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15); + --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7); + --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15); + --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30); + --color-light-border-underline-inverted-alpha-30: var( + --color-dark-border-underline-inverted-alpha-30 + ); + --color-light-graphic-accent-alpha-30: var(--color-dark-graphic-accent-alpha-30); + --color-light-graphic-accent-tint-15: var(--color-dark-graphic-accent-tint-15); + --color-light-graphic-accent-shade-15: var(--color-dark-graphic-accent-shade-15); + --color-light-graphic-link-alpha-15: var(--color-dark-graphic-link-alpha-15); + --color-light-graphic-negative-alpha-10: var(--color-dark-graphic-negative-alpha-10); + --color-light-graphic-negative-alpha-30: var(--color-dark-graphic-negative-alpha-30); + --color-light-graphic-negative-alpha-40: var(--color-dark-graphic-negative-alpha-40); + --color-light-graphic-negative-tint-30: var(--color-dark-graphic-negative-tint-30); + --color-light-graphic-negative-shade-30: var(--color-dark-graphic-negative-shade-30); + --color-light-graphic-positive-alpha-10: var(--color-dark-graphic-positive-alpha-10); + --color-light-graphic-primary-alpha-30: var(--color-dark-graphic-primary-alpha-30); + --color-light-graphic-primary-alpha-40: var(--color-dark-graphic-primary-alpha-40); + --color-light-graphic-primary-alpha-50: var(--color-dark-graphic-primary-alpha-50); + --color-light-graphic-primary-alpha-60: var(--color-dark-graphic-primary-alpha-60); + --color-light-graphic-primary-tint-30: var(--color-dark-graphic-primary-tint-30); + --color-light-graphic-primary-shade-30: var(--color-dark-graphic-primary-shade-30); + --color-light-graphic-primary-inverted-alpha-30: var( + --color-dark-graphic-primary-inverted-alpha-30 + ); + --color-light-graphic-primary-inverted-alpha-40: var( + --color-dark-graphic-primary-inverted-alpha-40 + ); + --color-light-graphic-primary-inverted-alpha-50: var( + --color-dark-graphic-primary-inverted-alpha-50 + ); + --color-light-graphic-primary-inverted-alpha-60: var( + --color-dark-graphic-primary-inverted-alpha-60 + ); + --color-light-graphic-secondary-alpha-30: var(--color-dark-graphic-secondary-alpha-30); + --color-light-graphic-secondary-inverted-alpha-30: var( + --color-dark-graphic-secondary-inverted-alpha-30 + ); + --color-light-graphic-tertiary-alpha-30: var(--color-dark-graphic-tertiary-alpha-30); + --color-light-graphic-tertiary-tint-15: var(--color-dark-graphic-tertiary-tint-15); + --color-light-graphic-tertiary-shade-15: var(--color-dark-graphic-tertiary-shade-15); + --color-light-graphic-tertiary-inverted-alpha-30: var( + --color-dark-graphic-tertiary-inverted-alpha-30 + ); + --color-light-specialbg-component-alpha-2: var(--color-dark-specialbg-component-alpha-2); + --color-light-specialbg-component-alpha-14: var(--color-dark-specialbg-component-alpha-14); + --color-light-specialbg-component-alpha-23: var(--color-dark-specialbg-component-alpha-23); + --color-light-specialbg-component-alpha-30: var(--color-dark-specialbg-component-alpha-30); + --color-light-specialbg-component-inverted-alpha-30: var( + --color-dark-specialbg-component-inverted-alpha-30 + ); +} diff --git a/packages/vars/src/colors-monochrome-dark.css b/packages/vars/src/colors-monochrome-dark.css new file mode 100644 index 0000000000..3af90677e4 --- /dev/null +++ b/packages/vars/src/colors-monochrome-dark.css @@ -0,0 +1,78 @@ +:root { + --color-light-monochrome-black-2: var(--color-dark-monochrome-black-2); + --color-light-monochrome-black-2-inverted: var(--color-dark-monochrome-black-2-inverted); + --color-light-monochrome-black-4: var(--color-dark-monochrome-black-4); + --color-light-monochrome-black-4-inverted: var(--color-dark-monochrome-black-4-inverted); + --color-light-monochrome-black-6: var(--color-dark-monochrome-black-6); + --color-light-monochrome-black-6-inverted: var(--color-dark-monochrome-black-6-inverted); + --color-light-monochrome-black-8: var(--color-dark-monochrome-black-8); + --color-light-monochrome-black-8-inverted: var(--color-dark-monochrome-black-8-inverted); + --color-light-monochrome-black-10: var(--color-dark-monochrome-black-10); + --color-light-monochrome-black-10-inverted: var(--color-dark-monochrome-black-10-inverted); + --color-light-monochrome-black-12: var(--color-dark-monochrome-black-12); + --color-light-monochrome-black-12-inverted: var(--color-dark-monochrome-black-12-inverted); + --color-light-monochrome-black-16: var(--color-dark-monochrome-black-16); + --color-light-monochrome-black-16-inverted: var(--color-dark-monochrome-black-16-inverted); + --color-light-monochrome-black-20: var(--color-dark-monochrome-black-20); + --color-light-monochrome-black-20-inverted: var(--color-dark-monochrome-black-20-inverted); + --color-light-monochrome-black-24: var(--color-dark-monochrome-black-24); + --color-light-monochrome-black-24-inverted: var(--color-dark-monochrome-black-24-inverted); + --color-light-monochrome-black-32: var(--color-dark-monochrome-black-32); + --color-light-monochrome-black-32-inverted: var(--color-dark-monochrome-black-32-inverted); + --color-light-monochrome-black-40: var(--color-dark-monochrome-black-40); + --color-light-monochrome-black-40-inverted: var(--color-dark-monochrome-black-40-inverted); + --color-light-monochrome-black-44: var(--color-dark-monochrome-black-44); + --color-light-monochrome-black-44-inverted: var(--color-dark-monochrome-black-44-inverted); + --color-light-monochrome-black-48: var(--color-dark-monochrome-black-48); + --color-light-monochrome-black-48-inverted: var(--color-dark-monochrome-black-48-inverted); + --color-light-monochrome-black-56: var(--color-dark-monochrome-black-56); + --color-light-monochrome-black-56-inverted: var(--color-dark-monochrome-black-56-inverted); + --color-light-monochrome-black-64: var(--color-dark-monochrome-black-64); + --color-light-monochrome-black-64-inverted: var(--color-dark-monochrome-black-64-inverted); + --color-light-monochrome-black-72: var(--color-dark-monochrome-black-72); + --color-light-monochrome-black-72-inverted: var(--color-dark-monochrome-black-72-inverted); + --color-light-monochrome-black-80: var(--color-dark-monochrome-black-80); + --color-light-monochrome-black-80-inverted: var(--color-dark-monochrome-black-80-inverted); + --color-light-monochrome-black-88: var(--color-dark-monochrome-black-88); + --color-light-monochrome-black-88-inverted: var(--color-dark-monochrome-black-88-inverted); + --color-light-monochrome-black-100: var(--color-dark-monochrome-black-100); + --color-light-monochrome-black-100-inverted: var(--color-dark-monochrome-black-100-inverted); + --color-light-monochrome-white-2: var(--color-dark-monochrome-white-2); + --color-light-monochrome-white-2-inverted: var(--color-dark-monochrome-white-2-inverted); + --color-light-monochrome-white-4: var(--color-dark-monochrome-white-4); + --color-light-monochrome-white-4-inverted: var(--color-dark-monochrome-white-4-inverted); + --color-light-monochrome-white-6: var(--color-dark-monochrome-white-6); + --color-light-monochrome-white-6-inverted: var(--color-dark-monochrome-white-6-inverted); + --color-light-monochrome-white-8: var(--color-dark-monochrome-white-8); + --color-light-monochrome-white-8-inverted: var(--color-dark-monochrome-white-8-inverted); + --color-light-monochrome-white-10: var(--color-dark-monochrome-white-10); + --color-light-monochrome-white-10-inverted: var(--color-dark-monochrome-white-10-inverted); + --color-light-monochrome-white-12: var(--color-dark-monochrome-white-12); + --color-light-monochrome-white-12-inverted: var(--color-dark-monochrome-white-12-inverted); + --color-light-monochrome-white-16: var(--color-dark-monochrome-white-16); + --color-light-monochrome-white-16-inverted: var(--color-dark-monochrome-white-16-inverted); + --color-light-monochrome-white-20: var(--color-dark-monochrome-white-20); + --color-light-monochrome-white-20-inverted: var(--color-dark-monochrome-white-20-inverted); + --color-light-monochrome-white-24: var(--color-dark-monochrome-white-24); + --color-light-monochrome-white-24-inverted: var(--color-dark-monochrome-white-24-inverted); + --color-light-monochrome-white-32: var(--color-dark-monochrome-white-32); + --color-light-monochrome-white-32-inverted: var(--color-dark-monochrome-white-32-inverted); + --color-light-monochrome-white-40: var(--color-dark-monochrome-white-40); + --color-light-monochrome-white-40-inverted: var(--color-dark-monochrome-white-40-inverted); + --color-light-monochrome-white-44: var(--color-dark-monochrome-white-44); + --color-light-monochrome-white-44-inverted: var(--color-dark-monochrome-white-44-inverted); + --color-light-monochrome-white-48: var(--color-dark-monochrome-white-48); + --color-light-monochrome-white-48-inverted: var(--color-dark-monochrome-white-48-inverted); + --color-light-monochrome-white-56: var(--color-dark-monochrome-white-56); + --color-light-monochrome-white-56-inverted: var(--color-dark-monochrome-white-56-inverted); + --color-light-monochrome-white-64: var(--color-dark-monochrome-white-64); + --color-light-monochrome-white-64-inverted: var(--color-dark-monochrome-white-64-inverted); + --color-light-monochrome-white-72: var(--color-dark-monochrome-white-72); + --color-light-monochrome-white-72-inverted: var(--color-dark-monochrome-white-72-inverted); + --color-light-monochrome-white-80: var(--color-dark-monochrome-white-80); + --color-light-monochrome-white-80-inverted: var(--color-dark-monochrome-white-80-inverted); + --color-light-monochrome-white-88: var(--color-dark-monochrome-white-88); + --color-light-monochrome-white-88-inverted: var(--color-dark-monochrome-white-88-inverted); + --color-light-monochrome-white-100: var(--color-dark-monochrome-white-100); + --color-light-monochrome-white-100-inverted: var(--color-dark-monochrome-white-100-inverted); +} diff --git a/packages/vars/src/colors-qualitative-dark.css b/packages/vars/src/colors-qualitative-dark.css new file mode 100644 index 0000000000..9017d2e4b3 --- /dev/null +++ b/packages/vars/src/colors-qualitative-dark.css @@ -0,0 +1,68 @@ +:root { + --color-light-qualitative-duocolor-set-a-1: var(--color-dark-qualitative-duocolor-set-a-1); + --color-light-qualitative-duocolor-set-a-2: var(--color-dark-qualitative-duocolor-set-a-2); + --color-light-qualitative-duocolor-set-b-1: var(--color-dark-qualitative-duocolor-set-b-1); + --color-light-qualitative-duocolor-set-b-2: var(--color-dark-qualitative-duocolor-set-b-2); + --color-light-qualitative-duocolor-set-c-1: var(--color-dark-qualitative-duocolor-set-c-1); + --color-light-qualitative-duocolor-set-c-2: var(--color-dark-qualitative-duocolor-set-c-2); + --color-light-qualitative-duocolor-set-d-1: var(--color-dark-qualitative-duocolor-set-d-1); + --color-light-qualitative-duocolor-set-d-2: var(--color-dark-qualitative-duocolor-set-d-2); + --color-light-qualitative-duocolor-set-e-1: var(--color-dark-qualitative-duocolor-set-e-1); + --color-light-qualitative-duocolor-set-e-2: var(--color-dark-qualitative-duocolor-set-e-2); + --color-light-qualitative-duocolor-set-f-1: var(--color-dark-qualitative-duocolor-set-f-1); + --color-light-qualitative-duocolor-set-f-2: var(--color-dark-qualitative-duocolor-set-f-2); + --color-light-qualitative-duocolor-set-g-1: var(--color-dark-qualitative-duocolor-set-g-1); + --color-light-qualitative-duocolor-set-g-2: var(--color-dark-qualitative-duocolor-set-g-2); + --color-light-qualitative-flexible-1: var(--color-dark-qualitative-flexible-1); + --color-light-qualitative-flexible-10: var(--color-dark-qualitative-flexible-10); + --color-light-qualitative-flexible-11: var(--color-dark-qualitative-flexible-11); + --color-light-qualitative-flexible-12: var(--color-dark-qualitative-flexible-12); + --color-light-qualitative-flexible-13: var(--color-dark-qualitative-flexible-13); + --color-light-qualitative-flexible-14: var(--color-dark-qualitative-flexible-14); + --color-light-qualitative-flexible-2: var(--color-dark-qualitative-flexible-2); + --color-light-qualitative-flexible-3: var(--color-dark-qualitative-flexible-3); + --color-light-qualitative-flexible-4: var(--color-dark-qualitative-flexible-4); + --color-light-qualitative-flexible-5: var(--color-dark-qualitative-flexible-5); + --color-light-qualitative-flexible-6: var(--color-dark-qualitative-flexible-6); + --color-light-qualitative-flexible-7: var(--color-dark-qualitative-flexible-7); + --color-light-qualitative-flexible-8: var(--color-dark-qualitative-flexible-8); + --color-light-qualitative-flexible-9: var(--color-dark-qualitative-flexible-9); + --color-light-qualitative-monocolor-blue: var(--color-dark-qualitative-monocolor-blue); + --color-light-qualitative-monocolor-green: var(--color-dark-qualitative-monocolor-green); + --color-light-qualitative-monocolor-indigo: var(--color-dark-qualitative-monocolor-indigo); + --color-light-qualitative-monocolor-magenta: var(--color-dark-qualitative-monocolor-magenta); + --color-light-qualitative-monocolor-orange: var(--color-dark-qualitative-monocolor-orange); + --color-light-qualitative-monocolor-pistachio: var( + --color-dark-qualitative-monocolor-pistachio + ); + --color-light-qualitative-monocolor-red: var(--color-dark-qualitative-monocolor-red); + --color-light-qualitative-monocolor-teal: var(--color-dark-qualitative-monocolor-teal); + --color-light-qualitative-monocolor-yellow: var(--color-dark-qualitative-monocolor-yellow); + --color-light-qualitative-tetracolor-set-a-1: var(--color-dark-qualitative-tetracolor-set-a-1); + --color-light-qualitative-tetracolor-set-a-2: var(--color-dark-qualitative-tetracolor-set-a-2); + --color-light-qualitative-tetracolor-set-a-3: var(--color-dark-qualitative-tetracolor-set-a-3); + --color-light-qualitative-tetracolor-set-a-4: var(--color-dark-qualitative-tetracolor-set-a-4); + --color-light-qualitative-tetracolor-set-b-1: var(--color-dark-qualitative-tetracolor-set-b-1); + --color-light-qualitative-tetracolor-set-b-2: var(--color-dark-qualitative-tetracolor-set-b-2); + --color-light-qualitative-tetracolor-set-b-3: var(--color-dark-qualitative-tetracolor-set-b-3); + --color-light-qualitative-tetracolor-set-b-4: var(--color-dark-qualitative-tetracolor-set-b-4); + --color-light-qualitative-tetracolor-set-c-1: var(--color-dark-qualitative-tetracolor-set-c-1); + --color-light-qualitative-tetracolor-set-c-2: var(--color-dark-qualitative-tetracolor-set-c-2); + --color-light-qualitative-tetracolor-set-c-3: var(--color-dark-qualitative-tetracolor-set-c-3); + --color-light-qualitative-tetracolor-set-c-4: var(--color-dark-qualitative-tetracolor-set-c-4); + --color-light-qualitative-tricolor-set-a-1: var(--color-dark-qualitative-tricolor-set-a-1); + --color-light-qualitative-tricolor-set-a-2: var(--color-dark-qualitative-tricolor-set-a-2); + --color-light-qualitative-tricolor-set-a-3: var(--color-dark-qualitative-tricolor-set-a-3); + --color-light-qualitative-tricolor-set-b-1: var(--color-dark-qualitative-tricolor-set-b-1); + --color-light-qualitative-tricolor-set-b-2: var(--color-dark-qualitative-tricolor-set-b-2); + --color-light-qualitative-tricolor-set-b-3: var(--color-dark-qualitative-tricolor-set-b-3); + --color-light-qualitative-tricolor-set-c-1: var(--color-dark-qualitative-tricolor-set-c-1); + --color-light-qualitative-tricolor-set-c-2: var(--color-dark-qualitative-tricolor-set-c-2); + --color-light-qualitative-tricolor-set-c-3: var(--color-dark-qualitative-tricolor-set-c-3); + --color-light-qualitative-tricolor-set-d-1: var(--color-dark-qualitative-tricolor-set-d-1); + --color-light-qualitative-tricolor-set-d-2: var(--color-dark-qualitative-tricolor-set-d-2); + --color-light-qualitative-tricolor-set-d-3: var(--color-dark-qualitative-tricolor-set-d-3); + --color-light-qualitative-tricolor-set-e-1: var(--color-dark-qualitative-tricolor-set-e-1); + --color-light-qualitative-tricolor-set-e-2: var(--color-dark-qualitative-tricolor-set-e-2); + --color-light-qualitative-tricolor-set-e-3: var(--color-dark-qualitative-tricolor-set-e-3); +} diff --git a/packages/vars/src/colors-sequential-dark.css b/packages/vars/src/colors-sequential-dark.css new file mode 100644 index 0000000000..f563607c7b --- /dev/null +++ b/packages/vars/src/colors-sequential-dark.css @@ -0,0 +1,98 @@ +:root { + --color-light-sequential-blue-1: var(--color-dark-sequential-blue-1); + --color-light-sequential-blue-2: var(--color-dark-sequential-blue-2); + --color-light-sequential-blue-3: var(--color-dark-sequential-blue-3); + --color-light-sequential-blue-4: var(--color-dark-sequential-blue-4); + --color-light-sequential-blue-5: var(--color-dark-sequential-blue-5); + --color-light-sequential-blue-6: var(--color-dark-sequential-blue-6); + --color-light-sequential-blue-7: var(--color-dark-sequential-blue-7); + --color-light-sequential-blue-8: var(--color-dark-sequential-blue-8); + --color-light-sequential-cyan-1: var(--color-dark-sequential-cyan-1); + --color-light-sequential-cyan-2: var(--color-dark-sequential-cyan-2); + --color-light-sequential-cyan-3: var(--color-dark-sequential-cyan-3); + --color-light-sequential-cyan-4: var(--color-dark-sequential-cyan-4); + --color-light-sequential-cyan-5: var(--color-dark-sequential-cyan-5); + --color-light-sequential-cyan-6: var(--color-dark-sequential-cyan-6); + --color-light-sequential-cyan-7: var(--color-dark-sequential-cyan-7); + --color-light-sequential-cyan-8: var(--color-dark-sequential-cyan-8); + --color-light-sequential-fuchsia-1: var(--color-dark-sequential-fuchsia-1); + --color-light-sequential-fuchsia-2: var(--color-dark-sequential-fuchsia-2); + --color-light-sequential-fuchsia-3: var(--color-dark-sequential-fuchsia-3); + --color-light-sequential-fuchsia-4: var(--color-dark-sequential-fuchsia-4); + --color-light-sequential-fuchsia-5: var(--color-dark-sequential-fuchsia-5); + --color-light-sequential-fuchsia-6: var(--color-dark-sequential-fuchsia-6); + --color-light-sequential-fuchsia-7: var(--color-dark-sequential-fuchsia-7); + --color-light-sequential-fuchsia-8: var(--color-dark-sequential-fuchsia-8); + --color-light-sequential-green-1: var(--color-dark-sequential-green-1); + --color-light-sequential-green-2: var(--color-dark-sequential-green-2); + --color-light-sequential-green-3: var(--color-dark-sequential-green-3); + --color-light-sequential-green-4: var(--color-dark-sequential-green-4); + --color-light-sequential-green-5: var(--color-dark-sequential-green-5); + --color-light-sequential-green-6: var(--color-dark-sequential-green-6); + --color-light-sequential-green-7: var(--color-dark-sequential-green-7); + --color-light-sequential-green-8: var(--color-dark-sequential-green-8); + --color-light-sequential-indigo-1: var(--color-dark-sequential-indigo-1); + --color-light-sequential-indigo-2: var(--color-dark-sequential-indigo-2); + --color-light-sequential-indigo-3: var(--color-dark-sequential-indigo-3); + --color-light-sequential-indigo-4: var(--color-dark-sequential-indigo-4); + --color-light-sequential-indigo-5: var(--color-dark-sequential-indigo-5); + --color-light-sequential-indigo-6: var(--color-dark-sequential-indigo-6); + --color-light-sequential-indigo-7: var(--color-dark-sequential-indigo-7); + --color-light-sequential-indigo-8: var(--color-dark-sequential-indigo-8); + --color-light-sequential-jungle-1: var(--color-dark-sequential-jungle-1); + --color-light-sequential-jungle-2: var(--color-dark-sequential-jungle-2); + --color-light-sequential-jungle-3: var(--color-dark-sequential-jungle-3); + --color-light-sequential-jungle-4: var(--color-dark-sequential-jungle-4); + --color-light-sequential-jungle-5: var(--color-dark-sequential-jungle-5); + --color-light-sequential-jungle-6: var(--color-dark-sequential-jungle-6); + --color-light-sequential-jungle-7: var(--color-dark-sequential-jungle-7); + --color-light-sequential-jungle-8: var(--color-dark-sequential-jungle-8); + --color-light-sequential-magenta-1: var(--color-dark-sequential-magenta-1); + --color-light-sequential-magenta-2: var(--color-dark-sequential-magenta-2); + --color-light-sequential-magenta-3: var(--color-dark-sequential-magenta-3); + --color-light-sequential-magenta-4: var(--color-dark-sequential-magenta-4); + --color-light-sequential-magenta-5: var(--color-dark-sequential-magenta-5); + --color-light-sequential-magenta-6: var(--color-dark-sequential-magenta-6); + --color-light-sequential-magenta-7: var(--color-dark-sequential-magenta-7); + --color-light-sequential-magenta-8: var(--color-dark-sequential-magenta-8); + --color-light-sequential-orange-1: var(--color-dark-sequential-orange-1); + --color-light-sequential-orange-2: var(--color-dark-sequential-orange-2); + --color-light-sequential-orange-3: var(--color-dark-sequential-orange-3); + --color-light-sequential-orange-4: var(--color-dark-sequential-orange-4); + --color-light-sequential-orange-5: var(--color-dark-sequential-orange-5); + --color-light-sequential-orange-6: var(--color-dark-sequential-orange-6); + --color-light-sequential-orange-7: var(--color-dark-sequential-orange-7); + --color-light-sequential-orange-8: var(--color-dark-sequential-orange-8); + --color-light-sequential-pistachio-1: var(--color-dark-sequential-pistachio-1); + --color-light-sequential-pistachio-2: var(--color-dark-sequential-pistachio-2); + --color-light-sequential-pistachio-3: var(--color-dark-sequential-pistachio-3); + --color-light-sequential-pistachio-4: var(--color-dark-sequential-pistachio-4); + --color-light-sequential-pistachio-5: var(--color-dark-sequential-pistachio-5); + --color-light-sequential-pistachio-6: var(--color-dark-sequential-pistachio-6); + --color-light-sequential-pistachio-7: var(--color-dark-sequential-pistachio-7); + --color-light-sequential-pistachio-8: var(--color-dark-sequential-pistachio-8); + --color-light-sequential-purple-1: var(--color-dark-sequential-purple-1); + --color-light-sequential-purple-2: var(--color-dark-sequential-purple-2); + --color-light-sequential-purple-3: var(--color-dark-sequential-purple-3); + --color-light-sequential-purple-4: var(--color-dark-sequential-purple-4); + --color-light-sequential-purple-5: var(--color-dark-sequential-purple-5); + --color-light-sequential-purple-6: var(--color-dark-sequential-purple-6); + --color-light-sequential-purple-7: var(--color-dark-sequential-purple-7); + --color-light-sequential-purple-8: var(--color-dark-sequential-purple-8); + --color-light-sequential-red-1: var(--color-dark-sequential-red-1); + --color-light-sequential-red-2: var(--color-dark-sequential-red-2); + --color-light-sequential-red-3: var(--color-dark-sequential-red-3); + --color-light-sequential-red-4: var(--color-dark-sequential-red-4); + --color-light-sequential-red-5: var(--color-dark-sequential-red-5); + --color-light-sequential-red-6: var(--color-dark-sequential-red-6); + --color-light-sequential-red-7: var(--color-dark-sequential-red-7); + --color-light-sequential-red-8: var(--color-dark-sequential-red-8); + --color-light-sequential-teal-1: var(--color-dark-sequential-teal-1); + --color-light-sequential-teal-2: var(--color-dark-sequential-teal-2); + --color-light-sequential-teal-3: var(--color-dark-sequential-teal-3); + --color-light-sequential-teal-4: var(--color-dark-sequential-teal-4); + --color-light-sequential-teal-5: var(--color-dark-sequential-teal-5); + --color-light-sequential-teal-6: var(--color-dark-sequential-teal-6); + --color-light-sequential-teal-7: var(--color-dark-sequential-teal-7); + --color-light-sequential-teal-8: var(--color-dark-sequential-teal-8); +} diff --git a/packages/vars/src/docs/description.mdx b/packages/vars/src/docs/description.mdx index 82d1c499dd..65a3e72ccc 100644 --- a/packages/vars/src/docs/description.mdx +++ b/packages/vars/src/docs/description.mdx @@ -23,12 +23,6 @@ import * as vars from '@alfalab/core-components/vars'; vars.gap2xl === '32px'; //true ``` -В корневом файле `/vars/index.js` находятся не все доступные палитры. В этом случае вы можете импортировать цвет напрямую из JS-файла - -```typescript -import {colorLightDecorativeOrange} from '@alfalab/core-components/vars/colors-decorative.module'; -``` - Для использования в проекте, добавьте один из [подготовленных бандлов](https://github.com/core-ds/core-components/tree/master/packages/vars/src/bundle) продуктов в один из корневых файлов CSS: ```css diff --git a/tools/dark-colors-generator.js b/tools/dark-colors-generator.js new file mode 100644 index 0000000000..a206bc1c4c --- /dev/null +++ b/tools/dark-colors-generator.js @@ -0,0 +1,94 @@ +const path = require('path'); +const fs = require('fs'); + +/** + * Скрипт предназначен для генерации css файлов с переопределением переменных для темной темы + * Обрабатывает файлы начинающиеся с "colors-" + * Скрипт автоматически запустится при обновлении ui-primitives + */ + +const processCssFile = (filePath, outputFilePath) => { + fs.readFile(filePath, 'utf8', (err, data) => { + if (err) { + console.error('Ошибка при чтении файла:', err); + return; + } + + // Регулярное выражение для поиска переменных, содержащих "light" + const lightVariablesRegex = /--color-light-[\w-]+:/g; + + // Фильтрация строк, соответствующих переменным с "light" + const filteredData = data.match(lightVariablesRegex); + + if (filteredData) { + // Обработка отфильтрованных данных: заменяем "light" на "dark" и формируем новую переменную с var() + const newCssContent = + ':root {\n' + + filteredData + .map((variable) => { + // Извлекаем название переменной (без значения) + const varName = variable.split(':')[0].trim(); + + // Заменяем "light" на "dark" и формируем строку вида var(--color-dark-...) + const newVarName = varName.replace('light', 'dark'); + + if (data.includes(newVarName)) { + return `\t${varName}: var(${newVarName});`; + } + return null; + }) + // Фильтруем значения у которых нет парного "dark" токена + .filter((variable) => variable !== null) + .join('\n') + + '\n}'; + + if (!newCssContent.match(lightVariablesRegex)) { + console.log( + `Файл ${outputFilePath} не будет записан, так как не содержит парных переменных`, + ); + return; + } + + // Запись отфильтрованных данных в новый файл + fs.writeFile(outputFilePath, newCssContent, (err) => { + if (err) { + console.error('Ошибка при записи в файл:', err); + } else { + console.log('Переменные записаны в файл:', outputFilePath); + } + }); + } else { + console.log(`Не найдено переменных "light" в файле: ${filePath}`); + } + }); +}; + +const varsDir = './packages/vars/src'; +fs.readdir(varsDir, (err, files) => { + if (err) { + console.error('Ошибка при чтении папки:', err); + return; + } + + // Фильтруем только CSS файлы, начинающиеся с "color" + const colorCssFiles = files.filter( + (file) => file.startsWith('colors') && file.endsWith('.css'), + ); + + if (colorCssFiles.length === 0) { + console.log('Нет файлов, начинающихся с "color" в папке.'); + return; + } + + // Обрабатываем исходные файлы + colorCssFiles.forEach((file, _, array) => { + const filePath = path.join(varsDir, file); + + if (file.includes('-dark.css')) { + return; + } + + const outputFilePath = path.join(varsDir, file.replace('.css', '-dark.css')); + processCssFile(filePath, outputFilePath); + }); +}); From d23832311c4b2f9b2f72d31b5f44ebcc95314afb Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Fri, 20 Dec 2024 13:05:10 +0700 Subject: [PATCH 2/4] feat(vars): update changeset --- .changeset/gold-jobs-dress.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.changeset/gold-jobs-dress.md b/.changeset/gold-jobs-dress.md index 68738574a6..1c45d7bc0d 100644 --- a/.changeset/gold-jobs-dress.md +++ b/.changeset/gold-jobs-dress.md @@ -3,3 +3,9 @@ --- Добавлены `-dark.css` файлы для цветовых палитр +- colors-bluetint-dark.css +- colors-decorative-dark.css +- colors-indigo-dark.css +- colors-monochrome-dark.css +- colors-qualitative-dark.css +- colors-sequential-dark.css From cf8cc9539e2ccf2322fcbaa90da4bf30963fd61f Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Fri, 20 Dec 2024 13:09:47 +0700 Subject: [PATCH 3/4] feat(vars): get rid unused var --- packages/themes/src/breakpoints/breakpoint-768.css | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 packages/themes/src/breakpoints/breakpoint-768.css diff --git a/packages/themes/src/breakpoints/breakpoint-768.css b/packages/themes/src/breakpoints/breakpoint-768.css deleted file mode 100644 index 98c1e1437d..0000000000 --- a/packages/themes/src/breakpoints/breakpoint-768.css +++ /dev/null @@ -1,3 +0,0 @@ -:root { - --global-breakpoint-desktop: 768; -} From a8c71fa27c48cfaaa09ba5d4e306ba4d52227c2a Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Thu, 26 Dec 2024 15:50:26 +0700 Subject: [PATCH 4/4] feat(vars): fix after code review --- .changeset/gold-jobs-dress.md | 2 - docs/colors.stories.mdx | 2 - packages/vars/src/colors-bluetint-dark.css | 565 --------------------- packages/vars/src/colors-indigo-dark.css | 564 -------------------- tools/dark-colors-generator.js | 145 +++--- 5 files changed, 70 insertions(+), 1208 deletions(-) delete mode 100644 packages/vars/src/colors-bluetint-dark.css delete mode 100644 packages/vars/src/colors-indigo-dark.css diff --git a/.changeset/gold-jobs-dress.md b/.changeset/gold-jobs-dress.md index 1c45d7bc0d..a0aab4931a 100644 --- a/.changeset/gold-jobs-dress.md +++ b/.changeset/gold-jobs-dress.md @@ -3,9 +3,7 @@ --- Добавлены `-dark.css` файлы для цветовых палитр -- colors-bluetint-dark.css - colors-decorative-dark.css -- colors-indigo-dark.css - colors-monochrome-dark.css - colors-qualitative-dark.css - colors-sequential-dark.css diff --git a/docs/colors.stories.mdx b/docs/colors.stories.mdx index 0e703e2f1c..a071c96cb2 100644 --- a/docs/colors.stories.mdx +++ b/docs/colors.stories.mdx @@ -19,9 +19,7 @@ import { Meta } from '@storybook/addon-docs'; - [core-components/vars/colors-students.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-students.css). Dark цвета хранятся в: -- [core-components/vars/colors-bluetint-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-bluetint-dark.css). - [core-components/vars/colors-decorative-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-decorative-dark.css). -- [core-components/vars/colors-indigo-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-indigo-dark.css). - [core-components/vars/colors-monochrome-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-monochrome-dark.css). - [core-components/vars/colors-qualitative-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-qualitative-dark.css). - [core-components/vars/colors-sequential-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-sequential-dark.css). diff --git a/packages/vars/src/colors-bluetint-dark.css b/packages/vars/src/colors-bluetint-dark.css deleted file mode 100644 index 35704d0d65..0000000000 --- a/packages/vars/src/colors-bluetint-dark.css +++ /dev/null @@ -1,565 +0,0 @@ -:root { - --color-light-accent-primary: var(--color-dark-accent-primary); - --color-light-accent-primary-hover: var(--color-dark-accent-primary-hover); - --color-light-accent-primary-inverted: var(--color-dark-accent-primary-inverted); - --color-light-accent-primary-inverted-hover: var(--color-dark-accent-primary-inverted-hover); - --color-light-accent-primary-inverted-press: var(--color-dark-accent-primary-inverted-press); - --color-light-accent-primary-press: var(--color-dark-accent-primary-press); - --color-light-accent-secondary: var(--color-dark-accent-secondary); - --color-light-accent-secondary-hover: var(--color-dark-accent-secondary-hover); - --color-light-accent-secondary-inverted: var(--color-dark-accent-secondary-inverted); - --color-light-accent-secondary-inverted-hover: var( - --color-dark-accent-secondary-inverted-hover - ); - --color-light-accent-secondary-inverted-press: var( - --color-dark-accent-secondary-inverted-press - ); - --color-light-accent-secondary-press: var(--color-dark-accent-secondary-press); - --color-light-base-bg-alt-primary: var(--color-dark-base-bg-alt-primary); - --color-light-base-bg-alt-primary-inverted: var(--color-dark-base-bg-alt-primary-inverted); - --color-light-base-bg-alt-secondary: var(--color-dark-base-bg-alt-secondary); - --color-light-base-bg-alt-secondary-inverted: var(--color-dark-base-bg-alt-secondary-inverted); - --color-light-base-bg-alt-tertiary: var(--color-dark-base-bg-alt-tertiary); - --color-light-base-bg-alt-tertiary-inverted: var(--color-dark-base-bg-alt-tertiary-inverted); - --color-light-base-bg-primary: var(--color-dark-base-bg-primary); - --color-light-base-bg-primary-inverted: var(--color-dark-base-bg-primary-inverted); - --color-light-base-bg-secondary: var(--color-dark-base-bg-secondary); - --color-light-base-bg-secondary-inverted: var(--color-dark-base-bg-secondary-inverted); - --color-light-base-bg-tertiary: var(--color-dark-base-bg-tertiary); - --color-light-base-bg-tertiary-inverted: var(--color-dark-base-bg-tertiary-inverted); - --color-light-modal-bg-alt-primary: var(--color-dark-modal-bg-alt-primary); - --color-light-modal-bg-alt-primary-inverted: var(--color-dark-modal-bg-alt-primary-inverted); - --color-light-modal-bg-alt-secondary: var(--color-dark-modal-bg-alt-secondary); - --color-light-modal-bg-alt-secondary-inverted: var( - --color-dark-modal-bg-alt-secondary-inverted - ); - --color-light-modal-bg-alt-tertiary: var(--color-dark-modal-bg-alt-tertiary); - --color-light-modal-bg-alt-tertiary-inverted: var(--color-dark-modal-bg-alt-tertiary-inverted); - --color-light-modal-bg-primary: var(--color-dark-modal-bg-primary); - --color-light-modal-bg-primary-inverted: var(--color-dark-modal-bg-primary-inverted); - --color-light-modal-bg-secondary: var(--color-dark-modal-bg-secondary); - --color-light-modal-bg-secondary-inverted: var(--color-dark-modal-bg-secondary-inverted); - --color-light-modal-bg-tertiary: var(--color-dark-modal-bg-tertiary); - --color-light-modal-bg-tertiary-inverted: var(--color-dark-modal-bg-tertiary-inverted); - --color-light-neutral-0: var(--color-dark-neutral-0); - --color-light-neutral-0-hover: var(--color-dark-neutral-0-hover); - --color-light-neutral-0-inverted: var(--color-dark-neutral-0-inverted); - --color-light-neutral-0-inverted-hover: var(--color-dark-neutral-0-inverted-hover); - --color-light-neutral-0-inverted-press: var(--color-dark-neutral-0-inverted-press); - --color-light-neutral-0-press: var(--color-dark-neutral-0-press); - --color-light-neutral-100: var(--color-dark-neutral-100); - --color-light-neutral-100-hover: var(--color-dark-neutral-100-hover); - --color-light-neutral-100-inverted: var(--color-dark-neutral-100-inverted); - --color-light-neutral-100-inverted-hover: var(--color-dark-neutral-100-inverted-hover); - --color-light-neutral-100-inverted-press: var(--color-dark-neutral-100-inverted-press); - --color-light-neutral-100-press: var(--color-dark-neutral-100-press); - --color-light-neutral-1300: var(--color-dark-neutral-1300); - --color-light-neutral-1300-hover: var(--color-dark-neutral-1300-hover); - --color-light-neutral-1300-inverted: var(--color-dark-neutral-1300-inverted); - --color-light-neutral-1300-inverted-hover: var(--color-dark-neutral-1300-inverted-hover); - --color-light-neutral-1300-inverted-press: var(--color-dark-neutral-1300-inverted-press); - --color-light-neutral-1300-press: var(--color-dark-neutral-1300-press); - --color-light-neutral-1500: var(--color-dark-neutral-1500); - --color-light-neutral-1500-hover: var(--color-dark-neutral-1500-hover); - --color-light-neutral-1500-inverted: var(--color-dark-neutral-1500-inverted); - --color-light-neutral-1500-inverted-hover: var(--color-dark-neutral-1500-inverted-hover); - --color-light-neutral-1500-inverted-press: var(--color-dark-neutral-1500-inverted-press); - --color-light-neutral-1500-press: var(--color-dark-neutral-1500-press); - --color-light-neutral-200: var(--color-dark-neutral-200); - --color-light-neutral-200-hover: var(--color-dark-neutral-200-hover); - --color-light-neutral-200-inverted: var(--color-dark-neutral-200-inverted); - --color-light-neutral-200-inverted-hover: var(--color-dark-neutral-200-inverted-hover); - --color-light-neutral-200-inverted-press: var(--color-dark-neutral-200-inverted-press); - --color-light-neutral-200-press: var(--color-dark-neutral-200-press); - --color-light-neutral-300: var(--color-dark-neutral-300); - --color-light-neutral-300-hover: var(--color-dark-neutral-300-hover); - --color-light-neutral-300-inverted: var(--color-dark-neutral-300-inverted); - --color-light-neutral-300-inverted-hover: var(--color-dark-neutral-300-inverted-hover); - --color-light-neutral-300-inverted-press: var(--color-dark-neutral-300-inverted-press); - --color-light-neutral-300-press: var(--color-dark-neutral-300-press); - --color-light-neutral-400: var(--color-dark-neutral-400); - --color-light-neutral-400-hover: var(--color-dark-neutral-400-hover); - --color-light-neutral-400-inverted: var(--color-dark-neutral-400-inverted); - --color-light-neutral-400-inverted-hover: var(--color-dark-neutral-400-inverted-hover); - --color-light-neutral-400-inverted-press: var(--color-dark-neutral-400-inverted-press); - --color-light-neutral-400-press: var(--color-dark-neutral-400-press); - --color-light-neutral-500: var(--color-dark-neutral-500); - --color-light-neutral-500-hover: var(--color-dark-neutral-500-hover); - --color-light-neutral-500-inverted: var(--color-dark-neutral-500-inverted); - --color-light-neutral-500-inverted-hover: var(--color-dark-neutral-500-inverted-hover); - --color-light-neutral-500-inverted-press: var(--color-dark-neutral-500-inverted-press); - --color-light-neutral-500-press: var(--color-dark-neutral-500-press); - --color-light-neutral-700: var(--color-dark-neutral-700); - --color-light-neutral-700-hover: var(--color-dark-neutral-700-hover); - --color-light-neutral-700-inverted: var(--color-dark-neutral-700-inverted); - --color-light-neutral-700-inverted-hover: var(--color-dark-neutral-700-inverted-hover); - --color-light-neutral-700-inverted-press: var(--color-dark-neutral-700-inverted-press); - --color-light-neutral-700-press: var(--color-dark-neutral-700-press); - --color-light-neutral-translucent-0: var(--color-dark-neutral-translucent-0); - --color-light-neutral-translucent-0-hover: var(--color-dark-neutral-translucent-0-hover); - --color-light-neutral-translucent-0-inverted: var(--color-dark-neutral-translucent-0-inverted); - --color-light-neutral-translucent-0-inverted-hover: var( - --color-dark-neutral-translucent-0-inverted-hover - ); - --color-light-neutral-translucent-0-inverted-press: var( - --color-dark-neutral-translucent-0-inverted-press - ); - --color-light-neutral-translucent-0-press: var(--color-dark-neutral-translucent-0-press); - --color-light-neutral-translucent-100: var(--color-dark-neutral-translucent-100); - --color-light-neutral-translucent-100-hover: var(--color-dark-neutral-translucent-100-hover); - --color-light-neutral-translucent-100-inverted: var( - --color-dark-neutral-translucent-100-inverted - ); - --color-light-neutral-translucent-100-inverted-hover: var( - --color-dark-neutral-translucent-100-inverted-hover - ); - --color-light-neutral-translucent-100-inverted-press: var( - --color-dark-neutral-translucent-100-inverted-press - ); - --color-light-neutral-translucent-100-press: var(--color-dark-neutral-translucent-100-press); - --color-light-neutral-translucent-1300: var(--color-dark-neutral-translucent-1300); - --color-light-neutral-translucent-1300-hover: var(--color-dark-neutral-translucent-1300-hover); - --color-light-neutral-translucent-1300-inverted: var( - --color-dark-neutral-translucent-1300-inverted - ); - --color-light-neutral-translucent-1300-inverted-hover: var( - --color-dark-neutral-translucent-1300-inverted-hover - ); - --color-light-neutral-translucent-1300-inverted-press: var( - --color-dark-neutral-translucent-1300-inverted-press - ); - --color-light-neutral-translucent-1300-press: var(--color-dark-neutral-translucent-1300-press); - --color-light-neutral-translucent-1500-hover: var(--color-dark-neutral-translucent-1500-hover); - --color-light-neutral-translucent-1500-inverted-hover: var( - --color-dark-neutral-translucent-1500-inverted-hover - ); - --color-light-neutral-translucent-1500-inverted-press: var( - --color-dark-neutral-translucent-1500-inverted-press - ); - --color-light-neutral-translucent-1500-press: var(--color-dark-neutral-translucent-1500-press); - --color-light-neutral-translucent-200: var(--color-dark-neutral-translucent-200); - --color-light-neutral-translucent-200-hover: var(--color-dark-neutral-translucent-200-hover); - --color-light-neutral-translucent-200-inverted: var( - --color-dark-neutral-translucent-200-inverted - ); - --color-light-neutral-translucent-200-inverted-hover: var( - --color-dark-neutral-translucent-200-inverted-hover - ); - --color-light-neutral-translucent-200-inverted-press: var( - --color-dark-neutral-translucent-200-inverted-press - ); - --color-light-neutral-translucent-200-press: var(--color-dark-neutral-translucent-200-press); - --color-light-neutral-translucent-300: var(--color-dark-neutral-translucent-300); - --color-light-neutral-translucent-300-hover: var(--color-dark-neutral-translucent-300-hover); - --color-light-neutral-translucent-300-inverted: var( - --color-dark-neutral-translucent-300-inverted - ); - --color-light-neutral-translucent-300-inverted-hover: var( - --color-dark-neutral-translucent-300-inverted-hover - ); - --color-light-neutral-translucent-300-inverted-press: var( - --color-dark-neutral-translucent-300-inverted-press - ); - --color-light-neutral-translucent-300-press: var(--color-dark-neutral-translucent-300-press); - --color-light-neutral-translucent-400: var(--color-dark-neutral-translucent-400); - --color-light-neutral-translucent-400-hover: var(--color-dark-neutral-translucent-400-hover); - --color-light-neutral-translucent-400-inverted: var( - --color-dark-neutral-translucent-400-inverted - ); - --color-light-neutral-translucent-400-inverted-hover: var( - --color-dark-neutral-translucent-400-inverted-hover - ); - --color-light-neutral-translucent-400-inverted-press: var( - --color-dark-neutral-translucent-400-inverted-press - ); - --color-light-neutral-translucent-400-press: var(--color-dark-neutral-translucent-400-press); - --color-light-neutral-translucent-500: var(--color-dark-neutral-translucent-500); - --color-light-neutral-translucent-500-hover: var(--color-dark-neutral-translucent-500-hover); - --color-light-neutral-translucent-500-inverted: var( - --color-dark-neutral-translucent-500-inverted - ); - --color-light-neutral-translucent-500-inverted-hover: var( - --color-dark-neutral-translucent-500-inverted-hover - ); - --color-light-neutral-translucent-500-inverted-press: var( - --color-dark-neutral-translucent-500-inverted-press - ); - --color-light-neutral-translucent-500-press: var(--color-dark-neutral-translucent-500-press); - --color-light-neutral-translucent-700: var(--color-dark-neutral-translucent-700); - --color-light-neutral-translucent-700-hover: var(--color-dark-neutral-translucent-700-hover); - --color-light-neutral-translucent-700-inverted: var( - --color-dark-neutral-translucent-700-inverted - ); - --color-light-neutral-translucent-700-inverted-hover: var( - --color-dark-neutral-translucent-700-inverted-hover - ); - --color-light-neutral-translucent-700-inverted-press: var( - --color-dark-neutral-translucent-700-inverted-press - ); - --color-light-neutral-translucent-700-press: var(--color-dark-neutral-translucent-700-press); - --color-light-overlay-default: var(--color-dark-overlay-default); - --color-light-status-attention: var(--color-dark-status-attention); - --color-light-status-attention-hover: var(--color-dark-status-attention-hover); - --color-light-status-attention-inverted: var(--color-dark-status-attention-inverted); - --color-light-status-attention-inverted-hover: var( - --color-dark-status-attention-inverted-hover - ); - --color-light-status-attention-inverted-press: var( - --color-dark-status-attention-inverted-press - ); - --color-light-status-attention-press: var(--color-dark-status-attention-press); - --color-light-status-info: var(--color-dark-status-info); - --color-light-status-info-hover: var(--color-dark-status-info-hover); - --color-light-status-info-inverted: var(--color-dark-status-info-inverted); - --color-light-status-info-inverted-hover: var(--color-dark-status-info-inverted-hover); - --color-light-status-info-inverted-press: var(--color-dark-status-info-inverted-press); - --color-light-status-info-press: var(--color-dark-status-info-press); - --color-light-status-muted-alt-attention: var(--color-dark-status-muted-alt-attention); - --color-light-status-muted-alt-attention-hover: var( - --color-dark-status-muted-alt-attention-hover - ); - --color-light-status-muted-alt-attention-inverted: var( - --color-dark-status-muted-alt-attention-inverted - ); - --color-light-status-muted-alt-attention-inverted-hover: var( - --color-dark-status-muted-alt-attention-inverted-hover - ); - --color-light-status-muted-alt-attention-inverted-press: var( - --color-dark-status-muted-alt-attention-inverted-press - ); - --color-light-status-muted-alt-attention-press: var( - --color-dark-status-muted-alt-attention-press - ); - --color-light-status-muted-alt-info: var(--color-dark-status-muted-alt-info); - --color-light-status-muted-alt-info-hover: var(--color-dark-status-muted-alt-info-hover); - --color-light-status-muted-alt-info-inverted: var(--color-dark-status-muted-alt-info-inverted); - --color-light-status-muted-alt-info-inverted-hover: var( - --color-dark-status-muted-alt-info-inverted-hover - ); - --color-light-status-muted-alt-info-inverted-press: var( - --color-dark-status-muted-alt-info-inverted-press - ); - --color-light-status-muted-alt-info-press: var(--color-dark-status-muted-alt-info-press); - --color-light-status-muted-alt-negative: var(--color-dark-status-muted-alt-negative); - --color-light-status-muted-alt-negative-hover: var( - --color-dark-status-muted-alt-negative-hover - ); - --color-light-status-muted-alt-negative-inverted: var( - --color-dark-status-muted-alt-negative-inverted - ); - --color-light-status-muted-alt-negative-inverted-hover: var( - --color-dark-status-muted-alt-negative-inverted-hover - ); - --color-light-status-muted-alt-negative-inverted-press: var( - --color-dark-status-muted-alt-negative-inverted-press - ); - --color-light-status-muted-alt-negative-press: var( - --color-dark-status-muted-alt-negative-press - ); - --color-light-status-muted-alt-positive: var(--color-dark-status-muted-alt-positive); - --color-light-status-muted-alt-positive-hover: var( - --color-dark-status-muted-alt-positive-hover - ); - --color-light-status-muted-alt-positive-inverted: var( - --color-dark-status-muted-alt-positive-inverted - ); - --color-light-status-muted-alt-positive-inverted-hover: var( - --color-dark-status-muted-alt-positive-inverted-hover - ); - --color-light-status-muted-alt-positive-inverted-press: var( - --color-dark-status-muted-alt-positive-inverted-press - ); - --color-light-status-muted-alt-positive-press: var( - --color-dark-status-muted-alt-positive-press - ); - --color-light-status-muted-attention: var(--color-dark-status-muted-attention); - --color-light-status-muted-attention-hover: var(--color-dark-status-muted-attention-hover); - --color-light-status-muted-attention-inverted: var( - --color-dark-status-muted-attention-inverted - ); - --color-light-status-muted-attention-inverted-hover: var( - --color-dark-status-muted-attention-inverted-hover - ); - --color-light-status-muted-attention-inverted-press: var( - --color-dark-status-muted-attention-inverted-press - ); - --color-light-status-muted-attention-press: var(--color-dark-status-muted-attention-press); - --color-light-status-muted-info: var(--color-dark-status-muted-info); - --color-light-status-muted-info-hover: var(--color-dark-status-muted-info-hover); - --color-light-status-muted-info-inverted: var(--color-dark-status-muted-info-inverted); - --color-light-status-muted-info-inverted-hover: var( - --color-dark-status-muted-info-inverted-hover - ); - --color-light-status-muted-info-inverted-press: var( - --color-dark-status-muted-info-inverted-press - ); - --color-light-status-muted-info-press: var(--color-dark-status-muted-info-press); - --color-light-status-muted-negative: var(--color-dark-status-muted-negative); - --color-light-status-muted-negative-hover: var(--color-dark-status-muted-negative-hover); - --color-light-status-muted-negative-inverted: var(--color-dark-status-muted-negative-inverted); - --color-light-status-muted-negative-inverted-hover: var( - --color-dark-status-muted-negative-inverted-hover - ); - --color-light-status-muted-negative-inverted-press: var( - --color-dark-status-muted-negative-inverted-press - ); - --color-light-status-muted-negative-press: var(--color-dark-status-muted-negative-press); - --color-light-status-muted-positive: var(--color-dark-status-muted-positive); - --color-light-status-muted-positive-hover: var(--color-dark-status-muted-positive-hover); - --color-light-status-muted-positive-inverted: var(--color-dark-status-muted-positive-inverted); - --color-light-status-muted-positive-inverted-hover: var( - --color-dark-status-muted-positive-inverted-hover - ); - --color-light-status-muted-positive-inverted-press: var( - --color-dark-status-muted-positive-inverted-press - ); - --color-light-status-muted-positive-press: var(--color-dark-status-muted-positive-press); - --color-light-status-negative: var(--color-dark-status-negative); - --color-light-status-negative-hover: var(--color-dark-status-negative-hover); - --color-light-status-negative-inverted: var(--color-dark-status-negative-inverted); - --color-light-status-negative-inverted-hover: var(--color-dark-status-negative-inverted-hover); - --color-light-status-negative-inverted-press: var(--color-dark-status-negative-inverted-press); - --color-light-status-negative-press: var(--color-dark-status-negative-press); - --color-light-status-positive: var(--color-dark-status-positive); - --color-light-status-positive-hover: var(--color-dark-status-positive-hover); - --color-light-status-positive-inverted: var(--color-dark-status-positive-inverted); - --color-light-status-positive-inverted-hover: var(--color-dark-status-positive-inverted-hover); - --color-light-status-positive-inverted-press: var(--color-dark-status-positive-inverted-press); - --color-light-status-positive-press: var(--color-dark-status-positive-press); - --color-light-text-attention: var(--color-dark-text-attention); - --color-light-text-attention-hover: var(--color-dark-text-attention-hover); - --color-light-text-attention-inverted: var(--color-dark-text-attention-inverted); - --color-light-text-attention-inverted-hover: var(--color-dark-text-attention-inverted-hover); - --color-light-text-attention-inverted-press: var(--color-dark-text-attention-inverted-press); - --color-light-text-attention-press: var(--color-dark-text-attention-press); - --color-light-text-info: var(--color-dark-text-info); - --color-light-text-info-hover: var(--color-dark-text-info-hover); - --color-light-text-info-inverted: var(--color-dark-text-info-inverted); - --color-light-text-info-inverted-hover: var(--color-dark-text-info-inverted-hover); - --color-light-text-info-inverted-press: var(--color-dark-text-info-inverted-press); - --color-light-text-info-press: var(--color-dark-text-info-press); - --color-light-text-negative: var(--color-dark-text-negative); - --color-light-text-negative-hover: var(--color-dark-text-negative-hover); - --color-light-text-negative-inverted: var(--color-dark-text-negative-inverted); - --color-light-text-negative-inverted-hover: var(--color-dark-text-negative-inverted-hover); - --color-light-text-negative-inverted-press: var(--color-dark-text-negative-inverted-press); - --color-light-text-negative-press: var(--color-dark-text-negative-press); - --color-light-text-positive: var(--color-dark-text-positive); - --color-light-text-positive-hover: var(--color-dark-text-positive-hover); - --color-light-text-positive-inverted: var(--color-dark-text-positive-inverted); - --color-light-text-positive-inverted-hover: var(--color-dark-text-positive-inverted-hover); - --color-light-text-positive-inverted-press: var(--color-dark-text-positive-inverted-press); - --color-light-text-positive-press: var(--color-dark-text-positive-press); - --color-light-text-primary: var(--color-dark-text-primary); - --color-light-text-primary-hover: var(--color-dark-text-primary-hover); - --color-light-text-primary-inverted: var(--color-dark-text-primary-inverted); - --color-light-text-primary-inverted-hover: var(--color-dark-text-primary-inverted-hover); - --color-light-text-primary-inverted-press: var(--color-dark-text-primary-inverted-press); - --color-light-text-primary-press: var(--color-dark-text-primary-press); - --color-light-text-quaternary: var(--color-dark-text-quaternary); - --color-light-text-quaternary-inverted: var(--color-dark-text-quaternary-inverted); - --color-light-text-secondary: var(--color-dark-text-secondary); - --color-light-text-secondary-hover: var(--color-dark-text-secondary-hover); - --color-light-text-secondary-inverted: var(--color-dark-text-secondary-inverted); - --color-light-text-secondary-inverted-hover: var(--color-dark-text-secondary-inverted-hover); - --color-light-text-secondary-inverted-press: var(--color-dark-text-secondary-inverted-press); - --color-light-text-secondary-press: var(--color-dark-text-secondary-press); - --color-light-text-tertiary: var(--color-dark-text-tertiary); - --color-light-text-tertiary-hover: var(--color-dark-text-tertiary-hover); - --color-light-text-tertiary-inverted: var(--color-dark-text-tertiary-inverted); - --color-light-text-tertiary-inverted-hover: var(--color-dark-text-tertiary-inverted-hover); - --color-light-text-tertiary-inverted-press: var(--color-dark-text-tertiary-inverted-press); - --color-light-text-tertiary-press: var(--color-dark-text-tertiary-press); - --color-light-transparent-default: var(--color-dark-transparent-default); - --color-light-transparent-default-hover: var(--color-dark-transparent-default-hover); - --color-light-transparent-default-inverted-hover: var( - --color-dark-transparent-default-inverted-hover - ); - --color-light-transparent-default-inverted-press: var( - --color-dark-transparent-default-inverted-press - ); - --color-light-transparent-default-press: var(--color-dark-transparent-default-press); - --color-light-bg-accent: var(--color-dark-bg-accent); - --color-light-bg-attention-muted: var(--color-dark-bg-attention-muted); - --color-light-bg-component: var(--color-dark-bg-component); - --color-light-bg-component-inverted: var(--color-dark-bg-component-inverted); - --color-light-bg-info: var(--color-dark-bg-info); - --color-light-bg-info-muted: var(--color-dark-bg-info-muted); - --color-light-bg-link-muted: var(--color-dark-bg-link-muted); - --color-light-bg-negative-muted: var(--color-dark-bg-negative-muted); - --color-light-bg-neutral: var(--color-dark-bg-neutral); - --color-light-bg-nulled: var(--color-dark-bg-nulled); - --color-light-bg-opaque: var(--color-dark-bg-opaque); - --color-light-bg-overlay: var(--color-dark-bg-overlay); - --color-light-bg-positive-muted: var(--color-dark-bg-positive-muted); - --color-light-bg-primary: var(--color-dark-bg-primary); - --color-light-bg-primary-grouped: var(--color-dark-bg-primary-grouped); - --color-light-bg-primary-inverted: var(--color-dark-bg-primary-inverted); - --color-light-bg-quaternary: var(--color-dark-bg-quaternary); - --color-light-bg-quaternary-inverted: var(--color-dark-bg-quaternary-inverted); - --color-light-bg-secondary: var(--color-dark-bg-secondary); - --color-light-bg-secondary-grouped: var(--color-dark-bg-secondary-grouped); - --color-light-bg-secondary-inverted: var(--color-dark-bg-secondary-inverted); - --color-light-bg-tertiary: var(--color-dark-bg-tertiary); - --color-light-bg-tertiary-grouped: var(--color-dark-bg-tertiary-grouped); - --color-light-bg-tertiary-inverted: var(--color-dark-bg-tertiary-inverted); - --color-light-border-accent: var(--color-dark-border-accent); - --color-light-border-key: var(--color-dark-border-key); - --color-light-border-key-inverted: var(--color-dark-border-key-inverted); - --color-light-border-link: var(--color-dark-border-link); - --color-light-border-primary: var(--color-dark-border-primary); - --color-light-border-primary-inverted: var(--color-dark-border-primary-inverted); - --color-light-border-secondary: var(--color-dark-border-secondary); - --color-light-border-secondary-inverted: var(--color-dark-border-secondary-inverted); - --color-light-border-tertiary: var(--color-dark-border-tertiary); - --color-light-border-tertiary-inverted: var(--color-dark-border-tertiary-inverted); - --color-light-border-underline: var(--color-dark-border-underline); - --color-light-border-underline-inverted: var(--color-dark-border-underline-inverted); - --color-light-graphic-accent: var(--color-dark-graphic-accent); - --color-light-graphic-attention: var(--color-dark-graphic-attention); - --color-light-graphic-link: var(--color-dark-graphic-link); - --color-light-graphic-negative: var(--color-dark-graphic-negative); - --color-light-graphic-neutral: var(--color-dark-graphic-neutral); - --color-light-graphic-positive: var(--color-dark-graphic-positive); - --color-light-graphic-primary: var(--color-dark-graphic-primary); - --color-light-graphic-primary-inverted: var(--color-dark-graphic-primary-inverted); - --color-light-graphic-quaternary: var(--color-dark-graphic-quaternary); - --color-light-graphic-quaternary-inverted: var(--color-dark-graphic-quaternary-inverted); - --color-light-graphic-secondary: var(--color-dark-graphic-secondary); - --color-light-graphic-secondary-inverted: var(--color-dark-graphic-secondary-inverted); - --color-light-graphic-tertiary: var(--color-dark-graphic-tertiary); - --color-light-graphic-tertiary-inverted: var(--color-dark-graphic-tertiary-inverted); - --color-light-specialbg-component: var(--color-dark-specialbg-component); - --color-light-specialbg-component-inverted: var(--color-dark-specialbg-component-inverted); - --color-light-specialbg-nulled: var(--color-dark-specialbg-nulled); - --color-light-specialbg-overlay: var(--color-dark-specialbg-overlay); - --color-light-specialbg-overlay-fallback: var(--color-dark-specialbg-overlay-fallback); - --color-light-specialbg-primary-grouped: var(--color-dark-specialbg-primary-grouped); - --color-light-specialbg-secondary-grouped: var(--color-dark-specialbg-secondary-grouped); - --color-light-specialbg-secondary-transparent: var( - --color-dark-specialbg-secondary-transparent - ); - --color-light-specialbg-secondary-transparent-inverted: var( - --color-dark-specialbg-secondary-transparent-inverted - ); - --color-light-specialbg-tertiary-grouped: var(--color-dark-specialbg-tertiary-grouped); - --color-light-specialbg-tertiary-transparent: var(--color-dark-specialbg-tertiary-transparent); - --color-light-specialbg-tertiary-transparent-inverted: var( - --color-dark-specialbg-tertiary-transparent-inverted - ); - --color-light-text-accent: var(--color-dark-text-accent); - --color-light-text-disabled: var(--color-dark-text-disabled); - --color-light-text-disabled-inverted: var(--color-dark-text-disabled-inverted); - --color-light-text-disabled-transparent: var(--color-dark-text-disabled-transparent); - --color-light-text-link: var(--color-dark-text-link); - --color-light-text-secondary-inverted-transparent: var( - --color-dark-text-secondary-inverted-transparent - ); - --color-light-text-secondary-transparent: var(--color-dark-text-secondary-transparent); - --color-light-text-tertiary-inverted-transparent: var( - --color-dark-text-tertiary-inverted-transparent - ); - --color-light-text-tertiary-transparent: var(--color-dark-text-tertiary-transparent); - --color-light-neutral-700-alpha-15: var(--color-dark-neutral-700-alpha-15); - --color-light-status-info-alpha-15: var(--color-dark-status-info-alpha-15); - --color-light-text-primary-alpha-30: var(--color-dark-text-primary-alpha-30); - --color-light-text-primary-tint-40: var(--color-dark-text-primary-tint-40); - --color-light-text-primary-shade-40: var(--color-dark-text-primary-shade-40); - --color-light-text-primary-inverted-alpha-30: var(--color-dark-text-primary-inverted-alpha-30); - --color-light-text-primary-inverted-alpha-40: var(--color-dark-text-primary-inverted-alpha-40); - --color-light-text-primary-inverted-tint-30: var(--color-dark-text-primary-inverted-tint-30); - --color-light-text-primary-inverted-shade-30: var(--color-dark-text-primary-inverted-shade-30); - --color-light-text-secondary-tint-20: var(--color-dark-text-secondary-tint-20); - --color-light-text-secondary-shade-20: var(--color-dark-text-secondary-shade-20); - --color-light-bg-accent-alpha-30: var(--color-dark-bg-accent-alpha-30); - --color-light-bg-accent-tint-15: var(--color-dark-bg-accent-tint-15); - --color-light-bg-accent-shade-15: var(--color-dark-bg-accent-shade-15); - --color-light-bg-primary-alpha-4: var(--color-dark-bg-primary-alpha-4); - --color-light-bg-primary-alpha-8: var(--color-dark-bg-primary-alpha-8); - --color-light-bg-primary-alpha-12: var(--color-dark-bg-primary-alpha-12); - --color-light-bg-primary-alpha-15: var(--color-dark-bg-primary-alpha-15); - --color-light-bg-primary-alpha-16: var(--color-dark-bg-primary-alpha-16); - --color-light-bg-primary-alpha-20: var(--color-dark-bg-primary-alpha-20); - --color-light-bg-primary-alpha-30: var(--color-dark-bg-primary-alpha-30); - --color-light-bg-primary-alpha-32: var(--color-dark-bg-primary-alpha-32); - --color-light-bg-primary-alpha-37: var(--color-dark-bg-primary-alpha-37); - --color-light-bg-primary-alpha-40: var(--color-dark-bg-primary-alpha-40); - --color-light-bg-primary-inverted-alpha-3: var(--color-dark-bg-primary-inverted-alpha-3); - --color-light-bg-primary-inverted-alpha-4: var(--color-dark-bg-primary-inverted-alpha-4); - --color-light-bg-primary-inverted-alpha-5: var(--color-dark-bg-primary-inverted-alpha-5); - --color-light-bg-primary-inverted-alpha-7: var(--color-dark-bg-primary-inverted-alpha-7); - --color-light-bg-primary-inverted-alpha-8: var(--color-dark-bg-primary-inverted-alpha-8); - --color-light-bg-primary-inverted-alpha-10: var(--color-dark-bg-primary-inverted-alpha-10); - --color-light-bg-primary-inverted-alpha-12: var(--color-dark-bg-primary-inverted-alpha-12); - --color-light-bg-primary-inverted-alpha-15: var(--color-dark-bg-primary-inverted-alpha-15); - --color-light-bg-primary-inverted-alpha-16: var(--color-dark-bg-primary-inverted-alpha-16); - --color-light-bg-primary-inverted-alpha-20: var(--color-dark-bg-primary-inverted-alpha-20); - --color-light-bg-primary-inverted-alpha-24: var(--color-dark-bg-primary-inverted-alpha-24); - --color-light-bg-primary-inverted-alpha-30: var(--color-dark-bg-primary-inverted-alpha-30); - --color-light-bg-primary-inverted-alpha-32: var(--color-dark-bg-primary-inverted-alpha-32); - --color-light-bg-primary-inverted-alpha-40: var(--color-dark-bg-primary-inverted-alpha-40); - --color-light-bg-primary-inverted-alpha-50: var(--color-dark-bg-primary-inverted-alpha-50); - --color-light-bg-quaternary-alpha-30: var(--color-dark-bg-quaternary-alpha-30); - --color-light-bg-quaternary-inverted-alpha-30: var( - --color-dark-bg-quaternary-inverted-alpha-30 - ); - --color-light-bg-secondary-alpha-30: var(--color-dark-bg-secondary-alpha-30); - --color-light-bg-secondary-tint-15: var(--color-dark-bg-secondary-tint-15); - --color-light-bg-secondary-shade-15: var(--color-dark-bg-secondary-shade-15); - --color-light-bg-secondary-inverted-alpha-30: var(--color-dark-bg-secondary-inverted-alpha-30); - --color-light-bg-secondary-inverted-tint-15: var(--color-dark-bg-secondary-inverted-tint-15); - --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-shade-15); - --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7); - --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15); - --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7); - --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15); - --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30); - --color-light-border-underline-inverted-alpha-30: var( - --color-dark-border-underline-inverted-alpha-30 - ); - --color-light-graphic-accent-alpha-30: var(--color-dark-graphic-accent-alpha-30); - --color-light-graphic-accent-tint-15: var(--color-dark-graphic-accent-tint-15); - --color-light-graphic-accent-shade-15: var(--color-dark-graphic-accent-shade-15); - --color-light-graphic-link-alpha-15: var(--color-dark-graphic-link-alpha-15); - --color-light-graphic-negative-alpha-10: var(--color-dark-graphic-negative-alpha-10); - --color-light-graphic-negative-alpha-30: var(--color-dark-graphic-negative-alpha-30); - --color-light-graphic-negative-alpha-40: var(--color-dark-graphic-negative-alpha-40); - --color-light-graphic-negative-tint-30: var(--color-dark-graphic-negative-tint-30); - --color-light-graphic-negative-shade-30: var(--color-dark-graphic-negative-shade-30); - --color-light-graphic-positive-alpha-10: var(--color-dark-graphic-positive-alpha-10); - --color-light-graphic-primary-alpha-30: var(--color-dark-graphic-primary-alpha-30); - --color-light-graphic-primary-alpha-40: var(--color-dark-graphic-primary-alpha-40); - --color-light-graphic-primary-alpha-50: var(--color-dark-graphic-primary-alpha-50); - --color-light-graphic-primary-alpha-60: var(--color-dark-graphic-primary-alpha-60); - --color-light-graphic-primary-tint-30: var(--color-dark-graphic-primary-tint-30); - --color-light-graphic-primary-shade-30: var(--color-dark-graphic-primary-shade-30); - --color-light-graphic-primary-inverted-alpha-30: var( - --color-dark-graphic-primary-inverted-alpha-30 - ); - --color-light-graphic-primary-inverted-alpha-40: var( - --color-dark-graphic-primary-inverted-alpha-40 - ); - --color-light-graphic-primary-inverted-alpha-50: var( - --color-dark-graphic-primary-inverted-alpha-50 - ); - --color-light-graphic-primary-inverted-alpha-60: var( - --color-dark-graphic-primary-inverted-alpha-60 - ); - --color-light-graphic-secondary-alpha-30: var(--color-dark-graphic-secondary-alpha-30); - --color-light-graphic-secondary-inverted-alpha-30: var( - --color-dark-graphic-secondary-inverted-alpha-30 - ); - --color-light-graphic-tertiary-alpha-30: var(--color-dark-graphic-tertiary-alpha-30); - --color-light-graphic-tertiary-tint-15: var(--color-dark-graphic-tertiary-tint-15); - --color-light-graphic-tertiary-shade-15: var(--color-dark-graphic-tertiary-shade-15); - --color-light-graphic-tertiary-inverted-alpha-30: var( - --color-dark-graphic-tertiary-inverted-alpha-30 - ); - --color-light-specialbg-component-alpha-2: var(--color-dark-specialbg-component-alpha-2); - --color-light-specialbg-component-alpha-14: var(--color-dark-specialbg-component-alpha-14); - --color-light-specialbg-component-alpha-23: var(--color-dark-specialbg-component-alpha-23); - --color-light-specialbg-component-alpha-30: var(--color-dark-specialbg-component-alpha-30); - --color-light-specialbg-component-inverted-alpha-30: var( - --color-dark-specialbg-component-inverted-alpha-30 - ); -} diff --git a/packages/vars/src/colors-indigo-dark.css b/packages/vars/src/colors-indigo-dark.css deleted file mode 100644 index 4d04b3f6d2..0000000000 --- a/packages/vars/src/colors-indigo-dark.css +++ /dev/null @@ -1,564 +0,0 @@ -:root { - --color-light-accent-primary: var(--color-dark-accent-primary); - --color-light-accent-primary-hover: var(--color-dark-accent-primary-hover); - --color-light-accent-primary-inverted: var(--color-dark-accent-primary-inverted); - --color-light-accent-primary-inverted-hover: var(--color-dark-accent-primary-inverted-hover); - --color-light-accent-primary-inverted-press: var(--color-dark-accent-primary-inverted-press); - --color-light-accent-primary-press: var(--color-dark-accent-primary-press); - --color-light-accent-secondary: var(--color-dark-accent-secondary); - --color-light-accent-secondary-hover: var(--color-dark-accent-secondary-hover); - --color-light-accent-secondary-inverted: var(--color-dark-accent-secondary-inverted); - --color-light-accent-secondary-inverted-hover: var( - --color-dark-accent-secondary-inverted-hover - ); - --color-light-accent-secondary-inverted-press: var( - --color-dark-accent-secondary-inverted-press - ); - --color-light-accent-secondary-press: var(--color-dark-accent-secondary-press); - --color-light-base-bg-alt-primary: var(--color-dark-base-bg-alt-primary); - --color-light-base-bg-alt-primary-inverted: var(--color-dark-base-bg-alt-primary-inverted); - --color-light-base-bg-alt-secondary: var(--color-dark-base-bg-alt-secondary); - --color-light-base-bg-alt-secondary-inverted: var(--color-dark-base-bg-alt-secondary-inverted); - --color-light-base-bg-alt-tertiary: var(--color-dark-base-bg-alt-tertiary); - --color-light-base-bg-alt-tertiary-inverted: var(--color-dark-base-bg-alt-tertiary-inverted); - --color-light-base-bg-primary: var(--color-dark-base-bg-primary); - --color-light-base-bg-primary-inverted: var(--color-dark-base-bg-primary-inverted); - --color-light-base-bg-secondary: var(--color-dark-base-bg-secondary); - --color-light-base-bg-secondary-inverted: var(--color-dark-base-bg-secondary-inverted); - --color-light-base-bg-tertiary: var(--color-dark-base-bg-tertiary); - --color-light-base-bg-tertiary-inverted: var(--color-dark-base-bg-tertiary-inverted); - --color-light-modal-bg-alt-primary: var(--color-dark-modal-bg-alt-primary); - --color-light-modal-bg-alt-primary-inverted: var(--color-dark-modal-bg-alt-primary-inverted); - --color-light-modal-bg-alt-secondary: var(--color-dark-modal-bg-alt-secondary); - --color-light-modal-bg-alt-secondary-inverted: var( - --color-dark-modal-bg-alt-secondary-inverted - ); - --color-light-modal-bg-alt-tertiary: var(--color-dark-modal-bg-alt-tertiary); - --color-light-modal-bg-alt-tertiary-inverted: var(--color-dark-modal-bg-alt-tertiary-inverted); - --color-light-modal-bg-primary: var(--color-dark-modal-bg-primary); - --color-light-modal-bg-primary-inverted: var(--color-dark-modal-bg-primary-inverted); - --color-light-modal-bg-secondary: var(--color-dark-modal-bg-secondary); - --color-light-modal-bg-secondary-inverted: var(--color-dark-modal-bg-secondary-inverted); - --color-light-modal-bg-tertiary: var(--color-dark-modal-bg-tertiary); - --color-light-modal-bg-tertiary-inverted: var(--color-dark-modal-bg-tertiary-inverted); - --color-light-neutral-0: var(--color-dark-neutral-0); - --color-light-neutral-0-hover: var(--color-dark-neutral-0-hover); - --color-light-neutral-0-inverted: var(--color-dark-neutral-0-inverted); - --color-light-neutral-0-inverted-hover: var(--color-dark-neutral-0-inverted-hover); - --color-light-neutral-0-inverted-press: var(--color-dark-neutral-0-inverted-press); - --color-light-neutral-0-press: var(--color-dark-neutral-0-press); - --color-light-neutral-100: var(--color-dark-neutral-100); - --color-light-neutral-100-hover: var(--color-dark-neutral-100-hover); - --color-light-neutral-100-inverted: var(--color-dark-neutral-100-inverted); - --color-light-neutral-100-inverted-hover: var(--color-dark-neutral-100-inverted-hover); - --color-light-neutral-100-inverted-press: var(--color-dark-neutral-100-inverted-press); - --color-light-neutral-100-press: var(--color-dark-neutral-100-press); - --color-light-neutral-1300: var(--color-dark-neutral-1300); - --color-light-neutral-1300-hover: var(--color-dark-neutral-1300-hover); - --color-light-neutral-1300-inverted: var(--color-dark-neutral-1300-inverted); - --color-light-neutral-1300-inverted-hover: var(--color-dark-neutral-1300-inverted-hover); - --color-light-neutral-1300-inverted-press: var(--color-dark-neutral-1300-inverted-press); - --color-light-neutral-1300-press: var(--color-dark-neutral-1300-press); - --color-light-neutral-1500: var(--color-dark-neutral-1500); - --color-light-neutral-1500-hover: var(--color-dark-neutral-1500-hover); - --color-light-neutral-1500-inverted: var(--color-dark-neutral-1500-inverted); - --color-light-neutral-1500-inverted-hover: var(--color-dark-neutral-1500-inverted-hover); - --color-light-neutral-1500-inverted-press: var(--color-dark-neutral-1500-inverted-press); - --color-light-neutral-1500-press: var(--color-dark-neutral-1500-press); - --color-light-neutral-200: var(--color-dark-neutral-200); - --color-light-neutral-200-hover: var(--color-dark-neutral-200-hover); - --color-light-neutral-200-inverted: var(--color-dark-neutral-200-inverted); - --color-light-neutral-200-inverted-hover: var(--color-dark-neutral-200-inverted-hover); - --color-light-neutral-200-inverted-press: var(--color-dark-neutral-200-inverted-press); - --color-light-neutral-200-press: var(--color-dark-neutral-200-press); - --color-light-neutral-300: var(--color-dark-neutral-300); - --color-light-neutral-300-hover: var(--color-dark-neutral-300-hover); - --color-light-neutral-300-inverted: var(--color-dark-neutral-300-inverted); - --color-light-neutral-300-inverted-hover: var(--color-dark-neutral-300-inverted-hover); - --color-light-neutral-300-inverted-press: var(--color-dark-neutral-300-inverted-press); - --color-light-neutral-300-press: var(--color-dark-neutral-300-press); - --color-light-neutral-400: var(--color-dark-neutral-400); - --color-light-neutral-400-hover: var(--color-dark-neutral-400-hover); - --color-light-neutral-400-inverted: var(--color-dark-neutral-400-inverted); - --color-light-neutral-400-inverted-hover: var(--color-dark-neutral-400-inverted-hover); - --color-light-neutral-400-inverted-press: var(--color-dark-neutral-400-inverted-press); - --color-light-neutral-400-press: var(--color-dark-neutral-400-press); - --color-light-neutral-500: var(--color-dark-neutral-500); - --color-light-neutral-500-hover: var(--color-dark-neutral-500-hover); - --color-light-neutral-500-inverted: var(--color-dark-neutral-500-inverted); - --color-light-neutral-500-inverted-hover: var(--color-dark-neutral-500-inverted-hover); - --color-light-neutral-500-inverted-press: var(--color-dark-neutral-500-inverted-press); - --color-light-neutral-500-press: var(--color-dark-neutral-500-press); - --color-light-neutral-700: var(--color-dark-neutral-700); - --color-light-neutral-700-hover: var(--color-dark-neutral-700-hover); - --color-light-neutral-700-inverted: var(--color-dark-neutral-700-inverted); - --color-light-neutral-700-inverted-hover: var(--color-dark-neutral-700-inverted-hover); - --color-light-neutral-700-inverted-press: var(--color-dark-neutral-700-inverted-press); - --color-light-neutral-700-press: var(--color-dark-neutral-700-press); - --color-light-neutral-translucent-0: var(--color-dark-neutral-translucent-0); - --color-light-neutral-translucent-0-hover: var(--color-dark-neutral-translucent-0-hover); - --color-light-neutral-translucent-0-inverted: var(--color-dark-neutral-translucent-0-inverted); - --color-light-neutral-translucent-0-inverted-hover: var( - --color-dark-neutral-translucent-0-inverted-hover - ); - --color-light-neutral-translucent-0-inverted-press: var( - --color-dark-neutral-translucent-0-inverted-press - ); - --color-light-neutral-translucent-0-press: var(--color-dark-neutral-translucent-0-press); - --color-light-neutral-translucent-100: var(--color-dark-neutral-translucent-100); - --color-light-neutral-translucent-100-hover: var(--color-dark-neutral-translucent-100-hover); - --color-light-neutral-translucent-100-inverted: var( - --color-dark-neutral-translucent-100-inverted - ); - --color-light-neutral-translucent-100-inverted-hover: var( - --color-dark-neutral-translucent-100-inverted-hover - ); - --color-light-neutral-translucent-100-inverted-press: var( - --color-dark-neutral-translucent-100-inverted-press - ); - --color-light-neutral-translucent-100-press: var(--color-dark-neutral-translucent-100-press); - --color-light-neutral-translucent-1300: var(--color-dark-neutral-translucent-1300); - --color-light-neutral-translucent-1300-hover: var(--color-dark-neutral-translucent-1300-hover); - --color-light-neutral-translucent-1300-inverted: var( - --color-dark-neutral-translucent-1300-inverted - ); - --color-light-neutral-translucent-1300-inverted-hover: var( - --color-dark-neutral-translucent-1300-inverted-hover - ); - --color-light-neutral-translucent-1300-inverted-press: var( - --color-dark-neutral-translucent-1300-inverted-press - ); - --color-light-neutral-translucent-1300-press: var(--color-dark-neutral-translucent-1300-press); - --color-light-neutral-translucent-1500-hover: var(--color-dark-neutral-translucent-1500-hover); - --color-light-neutral-translucent-1500-inverted-hover: var( - --color-dark-neutral-translucent-1500-inverted-hover - ); - --color-light-neutral-translucent-1500-inverted-press: var( - --color-dark-neutral-translucent-1500-inverted-press - ); - --color-light-neutral-translucent-1500-press: var(--color-dark-neutral-translucent-1500-press); - --color-light-neutral-translucent-200: var(--color-dark-neutral-translucent-200); - --color-light-neutral-translucent-200-hover: var(--color-dark-neutral-translucent-200-hover); - --color-light-neutral-translucent-200-inverted: var( - --color-dark-neutral-translucent-200-inverted - ); - --color-light-neutral-translucent-200-inverted-hover: var( - --color-dark-neutral-translucent-200-inverted-hover - ); - --color-light-neutral-translucent-200-inverted-press: var( - --color-dark-neutral-translucent-200-inverted-press - ); - --color-light-neutral-translucent-200-press: var(--color-dark-neutral-translucent-200-press); - --color-light-neutral-translucent-300: var(--color-dark-neutral-translucent-300); - --color-light-neutral-translucent-300-hover: var(--color-dark-neutral-translucent-300-hover); - --color-light-neutral-translucent-300-inverted: var( - --color-dark-neutral-translucent-300-inverted - ); - --color-light-neutral-translucent-300-inverted-hover: var( - --color-dark-neutral-translucent-300-inverted-hover - ); - --color-light-neutral-translucent-300-inverted-press: var( - --color-dark-neutral-translucent-300-inverted-press - ); - --color-light-neutral-translucent-300-press: var(--color-dark-neutral-translucent-300-press); - --color-light-neutral-translucent-400: var(--color-dark-neutral-translucent-400); - --color-light-neutral-translucent-400-hover: var(--color-dark-neutral-translucent-400-hover); - --color-light-neutral-translucent-400-inverted: var( - --color-dark-neutral-translucent-400-inverted - ); - --color-light-neutral-translucent-400-inverted-hover: var( - --color-dark-neutral-translucent-400-inverted-hover - ); - --color-light-neutral-translucent-400-inverted-press: var( - --color-dark-neutral-translucent-400-inverted-press - ); - --color-light-neutral-translucent-400-press: var(--color-dark-neutral-translucent-400-press); - --color-light-neutral-translucent-500: var(--color-dark-neutral-translucent-500); - --color-light-neutral-translucent-500-hover: var(--color-dark-neutral-translucent-500-hover); - --color-light-neutral-translucent-500-inverted: var( - --color-dark-neutral-translucent-500-inverted - ); - --color-light-neutral-translucent-500-inverted-hover: var( - --color-dark-neutral-translucent-500-inverted-hover - ); - --color-light-neutral-translucent-500-inverted-press: var( - --color-dark-neutral-translucent-500-inverted-press - ); - --color-light-neutral-translucent-500-press: var(--color-dark-neutral-translucent-500-press); - --color-light-neutral-translucent-700: var(--color-dark-neutral-translucent-700); - --color-light-neutral-translucent-700-hover: var(--color-dark-neutral-translucent-700-hover); - --color-light-neutral-translucent-700-inverted: var( - --color-dark-neutral-translucent-700-inverted - ); - --color-light-neutral-translucent-700-inverted-hover: var( - --color-dark-neutral-translucent-700-inverted-hover - ); - --color-light-neutral-translucent-700-inverted-press: var( - --color-dark-neutral-translucent-700-inverted-press - ); - --color-light-neutral-translucent-700-press: var(--color-dark-neutral-translucent-700-press); - --color-light-overlay-default: var(--color-dark-overlay-default); - --color-light-status-attention: var(--color-dark-status-attention); - --color-light-status-attention-hover: var(--color-dark-status-attention-hover); - --color-light-status-attention-inverted: var(--color-dark-status-attention-inverted); - --color-light-status-attention-inverted-hover: var( - --color-dark-status-attention-inverted-hover - ); - --color-light-status-attention-inverted-press: var( - --color-dark-status-attention-inverted-press - ); - --color-light-status-attention-press: var(--color-dark-status-attention-press); - --color-light-status-info: var(--color-dark-status-info); - --color-light-status-info-hover: var(--color-dark-status-info-hover); - --color-light-status-info-inverted: var(--color-dark-status-info-inverted); - --color-light-status-info-inverted-hover: var(--color-dark-status-info-inverted-hover); - --color-light-status-info-inverted-press: var(--color-dark-status-info-inverted-press); - --color-light-status-info-press: var(--color-dark-status-info-press); - --color-light-status-muted-alt-attention: var(--color-dark-status-muted-alt-attention); - --color-light-status-muted-alt-attention-hover: var( - --color-dark-status-muted-alt-attention-hover - ); - --color-light-status-muted-alt-attention-inverted: var( - --color-dark-status-muted-alt-attention-inverted - ); - --color-light-status-muted-alt-attention-inverted-hover: var( - --color-dark-status-muted-alt-attention-inverted-hover - ); - --color-light-status-muted-alt-attention-inverted-press: var( - --color-dark-status-muted-alt-attention-inverted-press - ); - --color-light-status-muted-alt-attention-press: var( - --color-dark-status-muted-alt-attention-press - ); - --color-light-status-muted-alt-info: var(--color-dark-status-muted-alt-info); - --color-light-status-muted-alt-info-hover: var(--color-dark-status-muted-alt-info-hover); - --color-light-status-muted-alt-info-inverted: var(--color-dark-status-muted-alt-info-inverted); - --color-light-status-muted-alt-info-inverted-hover: var( - --color-dark-status-muted-alt-info-inverted-hover - ); - --color-light-status-muted-alt-info-inverted-press: var( - --color-dark-status-muted-alt-info-inverted-press - ); - --color-light-status-muted-alt-info-press: var(--color-dark-status-muted-alt-info-press); - --color-light-status-muted-alt-negative: var(--color-dark-status-muted-alt-negative); - --color-light-status-muted-alt-negative-hover: var( - --color-dark-status-muted-alt-negative-hover - ); - --color-light-status-muted-alt-negative-inverted: var( - --color-dark-status-muted-alt-negative-inverted - ); - --color-light-status-muted-alt-negative-inverted-hover: var( - --color-dark-status-muted-alt-negative-inverted-hover - ); - --color-light-status-muted-alt-negative-inverted-press: var( - --color-dark-status-muted-alt-negative-inverted-press - ); - --color-light-status-muted-alt-negative-press: var( - --color-dark-status-muted-alt-negative-press - ); - --color-light-status-muted-alt-positive: var(--color-dark-status-muted-alt-positive); - --color-light-status-muted-alt-positive-hover: var( - --color-dark-status-muted-alt-positive-hover - ); - --color-light-status-muted-alt-positive-inverted: var( - --color-dark-status-muted-alt-positive-inverted - ); - --color-light-status-muted-alt-positive-inverted-hover: var( - --color-dark-status-muted-alt-positive-inverted-hover - ); - --color-light-status-muted-alt-positive-inverted-press: var( - --color-dark-status-muted-alt-positive-inverted-press - ); - --color-light-status-muted-alt-positive-press: var( - --color-dark-status-muted-alt-positive-press - ); - --color-light-status-muted-attention: var(--color-dark-status-muted-attention); - --color-light-status-muted-attention-hover: var(--color-dark-status-muted-attention-hover); - --color-light-status-muted-attention-inverted: var( - --color-dark-status-muted-attention-inverted - ); - --color-light-status-muted-attention-inverted-hover: var( - --color-dark-status-muted-attention-inverted-hover - ); - --color-light-status-muted-attention-inverted-press: var( - --color-dark-status-muted-attention-inverted-press - ); - --color-light-status-muted-attention-press: var(--color-dark-status-muted-attention-press); - --color-light-status-muted-info: var(--color-dark-status-muted-info); - --color-light-status-muted-info-hover: var(--color-dark-status-muted-info-hover); - --color-light-status-muted-info-inverted: var(--color-dark-status-muted-info-inverted); - --color-light-status-muted-info-inverted-hover: var( - --color-dark-status-muted-info-inverted-hover - ); - --color-light-status-muted-info-inverted-press: var( - --color-dark-status-muted-info-inverted-press - ); - --color-light-status-muted-info-press: var(--color-dark-status-muted-info-press); - --color-light-status-muted-negative: var(--color-dark-status-muted-negative); - --color-light-status-muted-negative-hover: var(--color-dark-status-muted-negative-hover); - --color-light-status-muted-negative-inverted: var(--color-dark-status-muted-negative-inverted); - --color-light-status-muted-negative-inverted-hover: var( - --color-dark-status-muted-negative-inverted-hover - ); - --color-light-status-muted-negative-inverted-press: var( - --color-dark-status-muted-negative-inverted-press - ); - --color-light-status-muted-negative-press: var(--color-dark-status-muted-negative-press); - --color-light-status-muted-positive: var(--color-dark-status-muted-positive); - --color-light-status-muted-positive-hover: var(--color-dark-status-muted-positive-hover); - --color-light-status-muted-positive-inverted: var(--color-dark-status-muted-positive-inverted); - --color-light-status-muted-positive-inverted-hover: var( - --color-dark-status-muted-positive-inverted-hover - ); - --color-light-status-muted-positive-inverted-press: var( - --color-dark-status-muted-positive-inverted-press - ); - --color-light-status-muted-positive-press: var(--color-dark-status-muted-positive-press); - --color-light-status-negative: var(--color-dark-status-negative); - --color-light-status-negative-hover: var(--color-dark-status-negative-hover); - --color-light-status-negative-inverted: var(--color-dark-status-negative-inverted); - --color-light-status-negative-inverted-hover: var(--color-dark-status-negative-inverted-hover); - --color-light-status-negative-inverted-press: var(--color-dark-status-negative-inverted-press); - --color-light-status-negative-press: var(--color-dark-status-negative-press); - --color-light-status-positive: var(--color-dark-status-positive); - --color-light-status-positive-hover: var(--color-dark-status-positive-hover); - --color-light-status-positive-inverted: var(--color-dark-status-positive-inverted); - --color-light-status-positive-inverted-hover: var(--color-dark-status-positive-inverted-hover); - --color-light-status-positive-inverted-press: var(--color-dark-status-positive-inverted-press); - --color-light-status-positive-press: var(--color-dark-status-positive-press); - --color-light-text-attention: var(--color-dark-text-attention); - --color-light-text-attention-hover: var(--color-dark-text-attention-hover); - --color-light-text-attention-inverted: var(--color-dark-text-attention-inverted); - --color-light-text-attention-inverted-hover: var(--color-dark-text-attention-inverted-hover); - --color-light-text-attention-inverted-press: var(--color-dark-text-attention-inverted-press); - --color-light-text-attention-press: var(--color-dark-text-attention-press); - --color-light-text-info: var(--color-dark-text-info); - --color-light-text-info-hover: var(--color-dark-text-info-hover); - --color-light-text-info-inverted: var(--color-dark-text-info-inverted); - --color-light-text-info-inverted-hover: var(--color-dark-text-info-inverted-hover); - --color-light-text-info-inverted-press: var(--color-dark-text-info-inverted-press); - --color-light-text-info-press: var(--color-dark-text-info-press); - --color-light-text-negative: var(--color-dark-text-negative); - --color-light-text-negative-hover: var(--color-dark-text-negative-hover); - --color-light-text-negative-inverted: var(--color-dark-text-negative-inverted); - --color-light-text-negative-inverted-hover: var(--color-dark-text-negative-inverted-hover); - --color-light-text-negative-inverted-press: var(--color-dark-text-negative-inverted-press); - --color-light-text-negative-press: var(--color-dark-text-negative-press); - --color-light-text-positive: var(--color-dark-text-positive); - --color-light-text-positive-hover: var(--color-dark-text-positive-hover); - --color-light-text-positive-inverted: var(--color-dark-text-positive-inverted); - --color-light-text-positive-inverted-hover: var(--color-dark-text-positive-inverted-hover); - --color-light-text-positive-inverted-press: var(--color-dark-text-positive-inverted-press); - --color-light-text-positive-press: var(--color-dark-text-positive-press); - --color-light-text-primary: var(--color-dark-text-primary); - --color-light-text-primary-hover: var(--color-dark-text-primary-hover); - --color-light-text-primary-inverted: var(--color-dark-text-primary-inverted); - --color-light-text-primary-inverted-hover: var(--color-dark-text-primary-inverted-hover); - --color-light-text-primary-inverted-press: var(--color-dark-text-primary-inverted-press); - --color-light-text-primary-press: var(--color-dark-text-primary-press); - --color-light-text-quaternary: var(--color-dark-text-quaternary); - --color-light-text-quaternary-inverted: var(--color-dark-text-quaternary-inverted); - --color-light-text-secondary: var(--color-dark-text-secondary); - --color-light-text-secondary-hover: var(--color-dark-text-secondary-hover); - --color-light-text-secondary-inverted: var(--color-dark-text-secondary-inverted); - --color-light-text-secondary-inverted-hover: var(--color-dark-text-secondary-inverted-hover); - --color-light-text-secondary-inverted-press: var(--color-dark-text-secondary-inverted-press); - --color-light-text-secondary-press: var(--color-dark-text-secondary-press); - --color-light-text-tertiary: var(--color-dark-text-tertiary); - --color-light-text-tertiary-hover: var(--color-dark-text-tertiary-hover); - --color-light-text-tertiary-inverted: var(--color-dark-text-tertiary-inverted); - --color-light-text-tertiary-inverted-hover: var(--color-dark-text-tertiary-inverted-hover); - --color-light-text-tertiary-inverted-press: var(--color-dark-text-tertiary-inverted-press); - --color-light-text-tertiary-press: var(--color-dark-text-tertiary-press); - --color-light-transparent-default: var(--color-dark-transparent-default); - --color-light-transparent-default-hover: var(--color-dark-transparent-default-hover); - --color-light-transparent-default-inverted-hover: var( - --color-dark-transparent-default-inverted-hover - ); - --color-light-transparent-default-inverted-press: var( - --color-dark-transparent-default-inverted-press - ); - --color-light-transparent-default-press: var(--color-dark-transparent-default-press); - --color-light-bg-accent: var(--color-dark-bg-accent); - --color-light-bg-attention-muted: var(--color-dark-bg-attention-muted); - --color-light-bg-component: var(--color-dark-bg-component); - --color-light-bg-component-inverted: var(--color-dark-bg-component-inverted); - --color-light-bg-info: var(--color-dark-bg-info); - --color-light-bg-link-muted: var(--color-dark-bg-link-muted); - --color-light-bg-negative-muted: var(--color-dark-bg-negative-muted); - --color-light-bg-neutral: var(--color-dark-bg-neutral); - --color-light-bg-nulled: var(--color-dark-bg-nulled); - --color-light-bg-opaque: var(--color-dark-bg-opaque); - --color-light-bg-overlay: var(--color-dark-bg-overlay); - --color-light-bg-positive-muted: var(--color-dark-bg-positive-muted); - --color-light-bg-primary: var(--color-dark-bg-primary); - --color-light-bg-primary-grouped: var(--color-dark-bg-primary-grouped); - --color-light-bg-primary-inverted: var(--color-dark-bg-primary-inverted); - --color-light-bg-quaternary: var(--color-dark-bg-quaternary); - --color-light-bg-quaternary-inverted: var(--color-dark-bg-quaternary-inverted); - --color-light-bg-secondary: var(--color-dark-bg-secondary); - --color-light-bg-secondary-grouped: var(--color-dark-bg-secondary-grouped); - --color-light-bg-secondary-inverted: var(--color-dark-bg-secondary-inverted); - --color-light-bg-tertiary: var(--color-dark-bg-tertiary); - --color-light-bg-tertiary-grouped: var(--color-dark-bg-tertiary-grouped); - --color-light-bg-tertiary-inverted: var(--color-dark-bg-tertiary-inverted); - --color-light-border-accent: var(--color-dark-border-accent); - --color-light-border-key: var(--color-dark-border-key); - --color-light-border-key-inverted: var(--color-dark-border-key-inverted); - --color-light-border-link: var(--color-dark-border-link); - --color-light-border-primary: var(--color-dark-border-primary); - --color-light-border-primary-inverted: var(--color-dark-border-primary-inverted); - --color-light-border-secondary: var(--color-dark-border-secondary); - --color-light-border-secondary-inverted: var(--color-dark-border-secondary-inverted); - --color-light-border-tertiary: var(--color-dark-border-tertiary); - --color-light-border-tertiary-inverted: var(--color-dark-border-tertiary-inverted); - --color-light-border-underline: var(--color-dark-border-underline); - --color-light-border-underline-inverted: var(--color-dark-border-underline-inverted); - --color-light-graphic-accent: var(--color-dark-graphic-accent); - --color-light-graphic-attention: var(--color-dark-graphic-attention); - --color-light-graphic-link: var(--color-dark-graphic-link); - --color-light-graphic-negative: var(--color-dark-graphic-negative); - --color-light-graphic-neutral: var(--color-dark-graphic-neutral); - --color-light-graphic-positive: var(--color-dark-graphic-positive); - --color-light-graphic-primary: var(--color-dark-graphic-primary); - --color-light-graphic-primary-inverted: var(--color-dark-graphic-primary-inverted); - --color-light-graphic-quaternary: var(--color-dark-graphic-quaternary); - --color-light-graphic-quaternary-inverted: var(--color-dark-graphic-quaternary-inverted); - --color-light-graphic-secondary: var(--color-dark-graphic-secondary); - --color-light-graphic-secondary-inverted: var(--color-dark-graphic-secondary-inverted); - --color-light-graphic-tertiary: var(--color-dark-graphic-tertiary); - --color-light-graphic-tertiary-inverted: var(--color-dark-graphic-tertiary-inverted); - --color-light-specialbg-component: var(--color-dark-specialbg-component); - --color-light-specialbg-component-inverted: var(--color-dark-specialbg-component-inverted); - --color-light-specialbg-nulled: var(--color-dark-specialbg-nulled); - --color-light-specialbg-overlay: var(--color-dark-specialbg-overlay); - --color-light-specialbg-overlay-fallback: var(--color-dark-specialbg-overlay-fallback); - --color-light-specialbg-primary-grouped: var(--color-dark-specialbg-primary-grouped); - --color-light-specialbg-secondary-grouped: var(--color-dark-specialbg-secondary-grouped); - --color-light-specialbg-secondary-transparent: var( - --color-dark-specialbg-secondary-transparent - ); - --color-light-specialbg-secondary-transparent-inverted: var( - --color-dark-specialbg-secondary-transparent-inverted - ); - --color-light-specialbg-tertiary-grouped: var(--color-dark-specialbg-tertiary-grouped); - --color-light-specialbg-tertiary-transparent: var(--color-dark-specialbg-tertiary-transparent); - --color-light-specialbg-tertiary-transparent-inverted: var( - --color-dark-specialbg-tertiary-transparent-inverted - ); - --color-light-text-accent: var(--color-dark-text-accent); - --color-light-text-disabled: var(--color-dark-text-disabled); - --color-light-text-disabled-inverted: var(--color-dark-text-disabled-inverted); - --color-light-text-disabled-transparent: var(--color-dark-text-disabled-transparent); - --color-light-text-link: var(--color-dark-text-link); - --color-light-text-secondary-inverted-transparent: var( - --color-dark-text-secondary-inverted-transparent - ); - --color-light-text-secondary-transparent: var(--color-dark-text-secondary-transparent); - --color-light-text-tertiary-inverted-transparent: var( - --color-dark-text-tertiary-inverted-transparent - ); - --color-light-text-tertiary-transparent: var(--color-dark-text-tertiary-transparent); - --color-light-neutral-700-alpha-15: var(--color-dark-neutral-700-alpha-15); - --color-light-status-info-alpha-15: var(--color-dark-status-info-alpha-15); - --color-light-text-primary-alpha-30: var(--color-dark-text-primary-alpha-30); - --color-light-text-primary-tint-40: var(--color-dark-text-primary-tint-40); - --color-light-text-primary-shade-40: var(--color-dark-text-primary-shade-40); - --color-light-text-primary-inverted-alpha-30: var(--color-dark-text-primary-inverted-alpha-30); - --color-light-text-primary-inverted-alpha-40: var(--color-dark-text-primary-inverted-alpha-40); - --color-light-text-primary-inverted-tint-30: var(--color-dark-text-primary-inverted-tint-30); - --color-light-text-primary-inverted-shade-30: var(--color-dark-text-primary-inverted-shade-30); - --color-light-text-secondary-tint-20: var(--color-dark-text-secondary-tint-20); - --color-light-text-secondary-shade-20: var(--color-dark-text-secondary-shade-20); - --color-light-bg-accent-alpha-30: var(--color-dark-bg-accent-alpha-30); - --color-light-bg-accent-tint-15: var(--color-dark-bg-accent-tint-15); - --color-light-bg-accent-shade-15: var(--color-dark-bg-accent-shade-15); - --color-light-bg-primary-alpha-4: var(--color-dark-bg-primary-alpha-4); - --color-light-bg-primary-alpha-8: var(--color-dark-bg-primary-alpha-8); - --color-light-bg-primary-alpha-12: var(--color-dark-bg-primary-alpha-12); - --color-light-bg-primary-alpha-15: var(--color-dark-bg-primary-alpha-15); - --color-light-bg-primary-alpha-16: var(--color-dark-bg-primary-alpha-16); - --color-light-bg-primary-alpha-20: var(--color-dark-bg-primary-alpha-20); - --color-light-bg-primary-alpha-30: var(--color-dark-bg-primary-alpha-30); - --color-light-bg-primary-alpha-32: var(--color-dark-bg-primary-alpha-32); - --color-light-bg-primary-alpha-37: var(--color-dark-bg-primary-alpha-37); - --color-light-bg-primary-alpha-40: var(--color-dark-bg-primary-alpha-40); - --color-light-bg-primary-inverted-alpha-3: var(--color-dark-bg-primary-inverted-alpha-3); - --color-light-bg-primary-inverted-alpha-4: var(--color-dark-bg-primary-inverted-alpha-4); - --color-light-bg-primary-inverted-alpha-5: var(--color-dark-bg-primary-inverted-alpha-5); - --color-light-bg-primary-inverted-alpha-7: var(--color-dark-bg-primary-inverted-alpha-7); - --color-light-bg-primary-inverted-alpha-8: var(--color-dark-bg-primary-inverted-alpha-8); - --color-light-bg-primary-inverted-alpha-10: var(--color-dark-bg-primary-inverted-alpha-10); - --color-light-bg-primary-inverted-alpha-12: var(--color-dark-bg-primary-inverted-alpha-12); - --color-light-bg-primary-inverted-alpha-15: var(--color-dark-bg-primary-inverted-alpha-15); - --color-light-bg-primary-inverted-alpha-16: var(--color-dark-bg-primary-inverted-alpha-16); - --color-light-bg-primary-inverted-alpha-20: var(--color-dark-bg-primary-inverted-alpha-20); - --color-light-bg-primary-inverted-alpha-24: var(--color-dark-bg-primary-inverted-alpha-24); - --color-light-bg-primary-inverted-alpha-30: var(--color-dark-bg-primary-inverted-alpha-30); - --color-light-bg-primary-inverted-alpha-32: var(--color-dark-bg-primary-inverted-alpha-32); - --color-light-bg-primary-inverted-alpha-40: var(--color-dark-bg-primary-inverted-alpha-40); - --color-light-bg-primary-inverted-alpha-50: var(--color-dark-bg-primary-inverted-alpha-50); - --color-light-bg-quaternary-alpha-30: var(--color-dark-bg-quaternary-alpha-30); - --color-light-bg-quaternary-inverted-alpha-30: var( - --color-dark-bg-quaternary-inverted-alpha-30 - ); - --color-light-bg-secondary-alpha-30: var(--color-dark-bg-secondary-alpha-30); - --color-light-bg-secondary-tint-15: var(--color-dark-bg-secondary-tint-15); - --color-light-bg-secondary-shade-15: var(--color-dark-bg-secondary-shade-15); - --color-light-bg-secondary-inverted-alpha-30: var(--color-dark-bg-secondary-inverted-alpha-30); - --color-light-bg-secondary-inverted-tint-15: var(--color-dark-bg-secondary-inverted-tint-15); - --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-shade-15); - --color-light-border-key-alpha-7: var(--color-dark-border-key-alpha-7); - --color-light-border-key-alpha-15: var(--color-dark-border-key-alpha-15); - --color-light-border-key-inverted-alpha-7: var(--color-dark-border-key-inverted-alpha-7); - --color-light-border-key-inverted-alpha-15: var(--color-dark-border-key-inverted-alpha-15); - --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30); - --color-light-border-underline-inverted-alpha-30: var( - --color-dark-border-underline-inverted-alpha-30 - ); - --color-light-graphic-accent-alpha-30: var(--color-dark-graphic-accent-alpha-30); - --color-light-graphic-accent-tint-15: var(--color-dark-graphic-accent-tint-15); - --color-light-graphic-accent-shade-15: var(--color-dark-graphic-accent-shade-15); - --color-light-graphic-link-alpha-15: var(--color-dark-graphic-link-alpha-15); - --color-light-graphic-negative-alpha-10: var(--color-dark-graphic-negative-alpha-10); - --color-light-graphic-negative-alpha-30: var(--color-dark-graphic-negative-alpha-30); - --color-light-graphic-negative-alpha-40: var(--color-dark-graphic-negative-alpha-40); - --color-light-graphic-negative-tint-30: var(--color-dark-graphic-negative-tint-30); - --color-light-graphic-negative-shade-30: var(--color-dark-graphic-negative-shade-30); - --color-light-graphic-positive-alpha-10: var(--color-dark-graphic-positive-alpha-10); - --color-light-graphic-primary-alpha-30: var(--color-dark-graphic-primary-alpha-30); - --color-light-graphic-primary-alpha-40: var(--color-dark-graphic-primary-alpha-40); - --color-light-graphic-primary-alpha-50: var(--color-dark-graphic-primary-alpha-50); - --color-light-graphic-primary-alpha-60: var(--color-dark-graphic-primary-alpha-60); - --color-light-graphic-primary-tint-30: var(--color-dark-graphic-primary-tint-30); - --color-light-graphic-primary-shade-30: var(--color-dark-graphic-primary-shade-30); - --color-light-graphic-primary-inverted-alpha-30: var( - --color-dark-graphic-primary-inverted-alpha-30 - ); - --color-light-graphic-primary-inverted-alpha-40: var( - --color-dark-graphic-primary-inverted-alpha-40 - ); - --color-light-graphic-primary-inverted-alpha-50: var( - --color-dark-graphic-primary-inverted-alpha-50 - ); - --color-light-graphic-primary-inverted-alpha-60: var( - --color-dark-graphic-primary-inverted-alpha-60 - ); - --color-light-graphic-secondary-alpha-30: var(--color-dark-graphic-secondary-alpha-30); - --color-light-graphic-secondary-inverted-alpha-30: var( - --color-dark-graphic-secondary-inverted-alpha-30 - ); - --color-light-graphic-tertiary-alpha-30: var(--color-dark-graphic-tertiary-alpha-30); - --color-light-graphic-tertiary-tint-15: var(--color-dark-graphic-tertiary-tint-15); - --color-light-graphic-tertiary-shade-15: var(--color-dark-graphic-tertiary-shade-15); - --color-light-graphic-tertiary-inverted-alpha-30: var( - --color-dark-graphic-tertiary-inverted-alpha-30 - ); - --color-light-specialbg-component-alpha-2: var(--color-dark-specialbg-component-alpha-2); - --color-light-specialbg-component-alpha-14: var(--color-dark-specialbg-component-alpha-14); - --color-light-specialbg-component-alpha-23: var(--color-dark-specialbg-component-alpha-23); - --color-light-specialbg-component-alpha-30: var(--color-dark-specialbg-component-alpha-30); - --color-light-specialbg-component-inverted-alpha-30: var( - --color-dark-specialbg-component-inverted-alpha-30 - ); -} diff --git a/tools/dark-colors-generator.js b/tools/dark-colors-generator.js index a206bc1c4c..e75af63c98 100644 --- a/tools/dark-colors-generator.js +++ b/tools/dark-colors-generator.js @@ -3,92 +3,87 @@ const fs = require('fs'); /** * Скрипт предназначен для генерации css файлов с переопределением переменных для темной темы - * Обрабатывает файлы начинающиеся с "colors-" + * Обрабатывает файлы которые начинаются с "colors-" * Скрипт автоматически запустится при обновлении ui-primitives + * Исключены файлы [colors-bluetint.css, colors-indigo.css] => эти палитры обработаны в themes/src/dark.css + * + * PR https://github.com/core-ds/core-components/pull/1514 */ -const processCssFile = (filePath, outputFilePath) => { - fs.readFile(filePath, 'utf8', (err, data) => { - if (err) { - console.error('Ошибка при чтении файла:', err); - return; - } - - // Регулярное выражение для поиска переменных, содержащих "light" - const lightVariablesRegex = /--color-light-[\w-]+:/g; - - // Фильтрация строк, соответствующих переменным с "light" - const filteredData = data.match(lightVariablesRegex); - - if (filteredData) { - // Обработка отфильтрованных данных: заменяем "light" на "dark" и формируем новую переменную с var() - const newCssContent = - ':root {\n' + - filteredData - .map((variable) => { - // Извлекаем название переменной (без значения) - const varName = variable.split(':')[0].trim(); - - // Заменяем "light" на "dark" и формируем строку вида var(--color-dark-...) - const newVarName = varName.replace('light', 'dark'); - - if (data.includes(newVarName)) { - return `\t${varName}: var(${newVarName});`; - } - return null; - }) - // Фильтруем значения у которых нет парного "dark" токена - .filter((variable) => variable !== null) - .join('\n') + - '\n}'; - - if (!newCssContent.match(lightVariablesRegex)) { - console.log( - `Файл ${outputFilePath} не будет записан, так как не содержит парных переменных`, - ); - return; - } - - // Запись отфильтрованных данных в новый файл - fs.writeFile(outputFilePath, newCssContent, (err) => { - if (err) { - console.error('Ошибка при записи в файл:', err); - } else { - console.log('Переменные записаны в файл:', outputFilePath); - } - }); - } else { - console.log(`Не найдено переменных "light" в файле: ${filePath}`); - } - }); -}; - const varsDir = './packages/vars/src'; -fs.readdir(varsDir, (err, files) => { - if (err) { - console.error('Ошибка при чтении папки:', err); +const excludedFiles = ['colors-bluetint.css', 'colors-indigo.css']; + +const files = fs.readdirSync(varsDir); + +// Фильтруем CSS файлы, начинающиеся с "colors" +const colorCssFiles = files.filter((file) => file.startsWith('colors') && file.endsWith('.css')); + +if (colorCssFiles.length === 0) { + console.log('[!] Нет файлов, начинающихся с "colors" в папке.'); + return; +} + +// Обрабатываем отфильтрованные исходные файлы +colorCssFiles.forEach((file) => { + const filePath = path.join(varsDir, file); + + // Отбрасываем уже сгенерированные файлы + if (file.includes('-dark.css')) { + return; + } + + // Отбрасываем фалы исключения + if (excludedFiles.includes(file)) { + console.log(`Пропуск файла: ${filePath}`); return; } - // Фильтруем только CSS файлы, начинающиеся с "color" - const colorCssFiles = files.filter( - (file) => file.startsWith('colors') && file.endsWith('.css'), - ); + const outputFilePath = path.join(varsDir, file.replace('.css', '-dark.css')); - if (colorCssFiles.length === 0) { - console.log('Нет файлов, начинающихся с "color" в папке.'); + const fileContent = fs.readFileSync(filePath, 'utf8'); + + // Регулярное выражение для поиска переменных, содержащих "light" + const lightVariablesRegex = /--color-light-[\w-]+:/g; + + // Фильтрация строк, соответствующих переменным с "light" + const filteredData = fileContent.match(lightVariablesRegex); + + if (!filteredData) { + console.log(`[!] Не найдено переменных "light" в файле: ${filePath}`); return; } - // Обрабатываем исходные файлы - colorCssFiles.forEach((file, _, array) => { - const filePath = path.join(varsDir, file); + // Обработка отфильтрованных данных: заменяем "light" на "dark" и формируем новую переменную с var() + const newCssContent = + ':root {\n' + + filteredData + .map((variable) => { + // Извлекаем название переменной (без значения) + const varName = variable.split(':')[0].trim(); - if (file.includes('-dark.css')) { - return; - } + // Заменяем "light" на "dark" и формируем строку вида var(--color-dark-...) + const newVarName = varName.replace('light', 'dark'); + + if (fileContent.includes(newVarName)) { + return `\t${varName}: var(${newVarName});`; + } + return null; + }) + // Фильтруем значения у которых нет парного "dark" токена + .filter((variable) => variable !== null) + .join('\n') + + '\n}'; - const outputFilePath = path.join(varsDir, file.replace('.css', '-dark.css')); - processCssFile(filePath, outputFilePath); - }); + if (!newCssContent.match(lightVariablesRegex)) { + console.log(`[!] Отсутствуют парные переменные, пропуск файла: ${outputFilePath}`); + return; + } + + try { + // Запись отфильтрованных данных в новый файл + fs.writeFileSync(outputFilePath, newCssContent); + console.log('[+] Переменные записаны в файл:', outputFilePath); + } catch (err) { + console.error('Ошибка при записи в файл:', err); + } });