fix(core-components-themes): process color-mod, fix vars

bin/build-themes.js

@@ -2,6 +2,8 @@ const shell = require('shelljs');
 const glob = require('glob');
 const path = require('path');
 const fs = require('fs');
+const postcss = require('postcss');
+const postcssColorMod = require('postcss-color-mod-function');
 
 // Записывает правила в :root
 const toRoot = rules => `:root {${rules}}\n`;
@@ -17,40 +19,60 @@ const extractContentFromMixins = css => {
     if (match) return match[1];
 };
 
-// Удаляем файл с дефолтной темой, его публиковать не нужно
-shell.rm('dist/default.css');
+// Прогоняет контент через postcss, применяя postcss-color-mod-function
+const filesWithVars = glob.sync(path.resolve(__dirname, '../packages/vars/src/*.css'));
 
-// Переходим в папку с мисинами и парсим темы
-shell.cd('dist/mixins');
+const processPostCss = async (content, cssFile) =>
+    postcss([
+        postcssColorMod({
+            unresolved: 'throw',
+            importFrom: filesWithVars,
+        }),
+    ])
+        .process(content, { from: cssFile, to: cssFile })
+        .then(result => result.css);
 
-const themes = glob.sync('./*.css', {}).map(cssPath => {
-    return path.basename(cssPath).replace('.css', '');
-});
+(async () => {
+    // Удаляем файл с дефолтной темой, его публиковать не нужно
+    shell.rm('dist/default.css');
 
-themes.forEach(theme => {
-    let allVars = '';
+    // Переходим в папку с мисинами и парсим темы
+    shell.cd('dist/mixins');
 
-    // Извлекаем переменные из файлов с миксинами и генерируем css-файлы, записывая переменные в :root
-    glob.sync(`./?*/${theme}.css`, {}).forEach(cssFile => {
-        const component = path.basename(path.dirname(cssFile));
-        const content = fs.readFileSync(cssFile, 'utf-8');
-        const vars = extractContentFromMixins(content);
+    const themes = glob
+        .sync('./*.css', {})
+        .map(cssPath => path.basename(cssPath).replace('.css', ''));
 
-        if (vars) {
-            shell.mkdir('-p', `../css/${component}`);
-            fs.writeFileSync(`../css/${component}/${theme}.css`, toRoot(vars));
+    for (const theme of themes) {
+        let allVars = '';
 
-            // Собираем переменные компонентов в один файл
-            allVars += `\n    /**\n     * === ${component} ===\n     */\n${vars}`;
+        // Извлекаем переменные из файлов с миксинами и генерируем css-файлы, записывая переменные в :root
+        const cssFiles = glob.sync(`./?*/${theme}.css`, { absolute: true });
+
+        for (let cssFile of cssFiles) {
+            const component = path.basename(path.dirname(cssFile));
+            // В сборке тем не должно быть color-mod - прогоняем через color-mod-function
+            const content = await processPostCss(fs.readFileSync(cssFile, 'utf-8'), cssFile);
+            fs.writeFileSync(cssFile, content);
+
+            const vars = extractContentFromMixins(content);
+
+            if (vars) {
+                shell.mkdir('-p', `../css/${component}`);
+                fs.writeFileSync(`../css/${component}/${theme}.css`, toRoot(vars));
+
+                // Собираем переменные компонентов в один файл
+                allVars += `\n    /**\n     * === ${component} ===\n     */\n${vars}`;
+            }
         }
-    });
 
-    if (allVars.length) {
-        fs.writeFileSync(`../css/${theme}.css`, toRoot(allVars));
+        if (allVars.length) {
+            fs.writeFileSync(`../css/${theme}.css`, toRoot(allVars));
+        }
     }
-});
 
-// Переносим сгенерированные css-файлы в /dist
-shell.cd('../');
-shell.cp('-R', './css/.', './');
-shell.rm('-rf', './css');
+    // Переносим сгенерированные css-файлы в /dist
+    shell.cd('../');
+    shell.cp('-R', './css/.', './');
+    shell.rm('-rf', './css');
+})();

packages/themes/src/mixins/button/click.css

@@ -7,21 +7,13 @@
 
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-accent);
-    --button-primary-hover-bg-color: #d72c20;
-    --button-primary-active-bg-color: #a72219;
-    --button-primary-disabled-bg-color: rgba(239, 49, 36, 0.3);
-
-    /* --button-primary-hover-bg-color: color-mod(var(--color-light-bg-accent) shade(10%));
+    --button-primary-hover-bg-color: color-mod(var(--color-light-bg-accent) shade(10%));
     --button-primary-active-bg-color: color-mod(var(--color-light-bg-accent) shade(30%));
-    --button-primary-disabled-bg-color: color-mod(var(--color-light-bg-accent) alpha(30%)); */
+    --button-primary-disabled-bg-color: color-mod(var(--color-light-bg-accent) alpha(30%));
 
     /* secondary */
     --button-secondary-base-bg-color: var(--color-light-bg-neutral);
-    --button-secondary-hover-bg-color: #c5c8cb;
-    --button-secondary-active-bg-color: #999b9d;
-    --button-secondary-disabled-bg-color: rgba(219, 222, 225, 0.3);
-
-    /* --button-secondary-hover-bg-color: color-mod(var(--color-light-bg-neutral) shade(10%));
+    --button-secondary-hover-bg-color: color-mod(var(--color-light-bg-neutral) shade(10%));
     --button-secondary-active-bg-color: color-mod(var(--color-light-bg-neutral) shade(30%));
-    --button-secondary-disabled-bg-color: color-mod(var(--color-light-bg-neutral) alpha(30%)); */
+    --button-secondary-disabled-bg-color: color-mod(var(--color-light-bg-neutral) alpha(30%));
 }

packages/themes/src/mixins/button/corp.css

@@ -7,16 +7,11 @@
 
     /* secondary */
     --button-secondary-base-bg-color: transparent;
-    --button-secondary-base-border-color: rgba(11, 31, 53, 0.6);
-    --button-secondary-hover-bg-color: #dddee0;
-    --button-secondary-active-bg-color: #cacbcd;
-    --button-secondary-disabled-bg-color: transparent;
-    --button-secondary-disabled-border-color: rgba(11, 31, 53, 0.1);
-
-    /* --button-secondary-base-border-color: color-mod(var(--color-light-border-key) alpha(60%));
+    --button-secondary-base-border-color: color-mod(var(--color-light-border-key) alpha(60%));
     --button-secondary-hover-bg-color: color-mod(var(--color-light-specialbg-component) shade(7%));
     --button-secondary-active-bg-color: color-mod(
         var(--color-light-specialbg-component) shade(15%)
     );
-    --button-secondary-disabled-border-color: color-mod(var(--color-light-border-key) alpha(10%)); */
+    --button-secondary-disabled-bg-color: transparent;
+    --button-secondary-disabled-border-color: color-mod(var(--color-light-border-key) alpha(10%));
 }

packages/themes/src/mixins/button/mobile.css

@@ -3,25 +3,19 @@
 @define-mixin button-mobile {
     /* core vars */
     --color-light-bg-secondary: #f3f4f5;
+
+    /* theme */
     --button-border-radius: 12px;
 
     /* primary TODO secret color from the future */
     --button-primary-base-bg-color: #2b2b2b;
-    --button-primary-hover-bg-color: #272727;
-    --button-primary-active-bg-color: #1e1e1e;
-    --button-primary-disabled-bg-color: rgba(43, 43, 43, 0.3);
-
-    /* --button-primary-hover-bg-color: color-mod(#2b2b2b shade(10%));
+    --button-primary-hover-bg-color: color-mod(#2b2b2b shade(10%));
     --button-primary-active-bg-color: color-mod(#2b2b2b shade(30%));
-    --button-primary-disabled-bg-color: color-mod(#2b2b2b alpha(30%)); */
+    --button-primary-disabled-bg-color: color-mod(#2b2b2b alpha(30%));
 
     /* secondary */
     --button-secondary-base-bg-color: var(--color-light-bg-secondary);
-    --button-secondary-hover-bg-color: #dbdcdd;
-    --button-secondary-active-bg-color: #aaabac;
-    --button-secondary-disabled-bg-color: rgba(243, 244, 245, 0.3);
-
-    /* --button-secondary-hover-bg-color: color-mod(var(--color-light-bg-secondary) shade(10%));
+    --button-secondary-hover-bg-color: color-mod(var(--color-light-bg-secondary) shade(10%));
     --button-secondary-active-bg-color: color-mod(var(--color-light-bg-secondary) shade(30%));
-    --button-secondary-disabled-bg-color: color-mod(var(--color-light-bg-secondary) alpha(30%)); */
+    --button-secondary-disabled-bg-color: color-mod(var(--color-light-bg-secondary) alpha(30%));
 }

packages/themes/src/mixins/form-control/click.css

@@ -1,13 +1,13 @@
 @define-mixin form-control-click {
     /* core vars */
-    --color-dark-indigo-07-flat: #eeeff1;
+    --color-light-specialbg-component: #eeeff1;
     --gap-s: 12px;
     --gap-m: 16px;
 
-    /* base */
+    /* theme */
     --form-control-border-radius: 4px;
     --form-control-border-bottom: 0;
-    --form-control-bg-color: var(--color-dark-indigo-07-flat);
+    --form-control-bg-color: var(--color-light-specialbg-component);
 
     /* paddings */
     --form-control-paddings: 0 var(--gap-s);
@@ -18,12 +18,12 @@
 
     /* disabled */
     --form-control-disabled-border-bottom: 0;
-    --form-control-disabled-bg-color: var(--color-dark-indigo-07-flat);
+    --form-control-disabled-bg-color: var(--color-light-specialbg-component);
 
     /* focus */
     --form-control-focus-shadow: none;
     --form-control-focus-border-bottom: 0;
-    --form-control-hover-bg-color: var(--color-dark-indigo-07-flat);
+    --form-control-hover-bg-color: var(--color-light-specialbg-component);
 
     /* error */
     --form-control-error-shadow: inset 0 0 0 1px var(--form-control-error-color);

packages/themes/src/mixins/link/click.css

@@ -1,24 +1,20 @@
 @import '../../../../vars/src/colors-indigo.css';
 
 @define-mixin link-click {
-    /* primary */
-    --link-primary-hover-color: #546272;
-    --link-primary-active-color: #858f9a;
+    /* core vars */
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #6d7986;
+    --color-light-text-link: #007aff;
 
-    /* TODO --link-primary-hover-color: color-mod(var(--color-light-text-primary) tint(30%));
-    --link-primary-active-color: color-mod(var(--color-light-text-primary) tint(50%)); */
+    /* primary */
+    --link-primary-hover-color: color-mod(var(--color-light-text-primary) tint(30%));
+    --link-primary-active-color: color-mod(var(--color-light-text-primary) tint(50%));
 
     /* secondary */
-    --link-secondary-hover-color: #99a1aa;
-    --link-secondary-active-color: #b6bcc3;
-
-    /* TODO --link-secondary-hover-color: color-mod(var(--color-light-text-secondary) tint(30%));
-    --link-secondary-active-color: color-mod(var(--color-light-text-secondary) tint(50%)); */
+    --link-secondary-hover-color: color-mod(var(--color-light-text-secondary) tint(30%));
+    --link-secondary-active-color: color-mod(var(--color-light-text-secondary) tint(50%));
 
     /* default */
-    --link-default-hover-color: #4da2ff;
-    --link-default-active-color: #80bdff;
-
-    /* TODO --link-default-hover-color: color-mod(--color-light-text-link) tint(30%));
-    --link-default-active-color: color-mod(--color-light-text-link) tint(50%)); */
+    --link-default-hover-color: color-mod(var(--color-light-text-link) tint(30%));
+    --link-default-active-color: color-mod(var(--color-light-text-link) tint(50%));
 }

packages/themes/src/mixins/pure-input/click.css

@@ -1,24 +1,24 @@
 @define-mixin pure-input-click {
     /* core vars */
-    --color-dark-indigo-07-flat: #eeeff1;
+    --color-light-specialbg-component: #eeeff1;
     --gap-s: 12px;
     --gap-m: 16px;
 
-    /* base */
+    /* theme */
     --pure-input-border-radius: 4px;
     --pure-input-border-bottom: 0;
-    --pure-input-bg-color: var(--color-dark-indigo-07-flat);
+    --pure-input-bg-color: var(--color-light-specialbg-component);
 
     /* paddings */
     --pure-input-paddings: 0 var(--gap-s);
     --pure-input-l-paddings: 0 var(--gap-m);
 
     /* disabled */
     --pure-input-disabled-border-bottom: 0;
-    --pure-input-disabled-bg-color: var(--color-dark-indigo-07-flat);
+    --pure-input-disabled-bg-color: var(--color-light-specialbg-component);
 
     /* focus */
     --pure-input-focus-shadow: none;
     --pure-input-focus-border-bottom: 0;
-    --pure-input-hover-bg-color: var(--color-dark-indigo-07-flat);
+    --pure-input-hover-bg-color: var(--color-light-specialbg-component);
 }

packages/themes/src/mixins/tabs/click.css

@@ -1,4 +1,9 @@
 @define-mixin tabs-click {
+    /* core vars */
+    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
+        'Helvetica Neue', Helvetica, sans-serif;
+
+    /* theme */
     --primary-tablist-s-font-size: 20px;
     --primary-tablist-s-font-weight: 500;
     --primary-tablist-s-font-family: var(--font-family-styrene);

packages/themes/src/mixins/tag/click.css

@@ -1,19 +1,22 @@
 @import '../../../../vars/src/colors.css';
+@import '../../../../vars/src/colors-indigo.css';
 
 @define-mixin tag-click {
     /* core vars */
+    --color-light-specialbg-component: #eeeff1;
+    --color-white: #fff;
 
     /* theme */
-    --tag-background-color: var(--color-dark-indigo-07-flat);
-    --tag-background-color-hover: #d6d7d9;
-    --tag-background-color-active: #a7a7a9;
-    --tag-text-color-checked-hover: #b3b3b3;
+    --tag-background-color: var(--color-light-specialbg-component);
+    --tag-background-color-hover: color-mod(
+        var(--color-light-specialbg-component) blenda(black 10%)
+    );
+    --tag-background-color-active: color-mod(
+        var(--color-light-specialbg-component) blenda(black 30%)
+    );
+    --tag-text-color-checked-hover: color-mod(var(--color-white) blenda(black 30%));
     --tag-border-color: transparent;
     --tag-border-color-hover: transparent;
     --tag-border-color-active: transparent;
     --tag-border-color-disabled: transparent;
-
-    /* --tag-background-color-hover: color-mod(var(--color-dark-indigo-07-flat) blenda(black 10%));
-    --tag-background-color-active: color-mod(var(--color-dark-indigo-07-flat) blenda(black 30%));
-    --tag-text-color-checked-hover: color-mod(var(--color-white) blenda(black 30%)); */
 }