feat(vars): add dark colors generator

.changeset/gold-jobs-dress.md

@@ -0,0 +1,9 @@
+---
+'@alfalab/core-components-vars': minor
+---
+
+Добавлены `-dark.css` файлы для цветовых палитр
+- colors-decorative-dark.css
+- colors-monochrome-dark.css
+- colors-qualitative-dark.css
+- colors-sequential-dark.css

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 = () => {

docs/colors.stories.mdx

@@ -18,6 +18,12 @@ 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-decorative-dark.css](https://github.com/core-ds/core-components/blob/master/packages/vars/src/colors-decorative-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 +48,12 @@ import { Meta } from '@storybook/addon-docs';
 }
 ```
 
+Цвет можно импортировать напрямую из JS-файла
+
+```typescript
+import {colorLightDecorativeOrange} from '@alfalab/core-components/vars/colors-decorative.module';
+```
+
 > Если в Figma не видно название цвета или для него не оказалось переменной, спросите у дизайнера почему :)
 
 ### Модификации цветов

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": [

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);
+}

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);
+}