feat(themes): add themes structure (#108)

* feat(themes): add themes structure

* fix(themes): fix typo

* feat(themes): complete theme structures. add inputs themes

* feat(themes): generate pure css & mixins

* chore(themes): remove getCSSModuleLocalIdent

.storybook/webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const getCSSModuleLocalIdent = require('./utils/getCSSModuleLocalIdent');
 const componentsResolver = require('./utils/componentsResolver');
 const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 

bin/build-themes.js

@@ -0,0 +1,56 @@
+const shell = require('shelljs');
+const glob = require('glob');
+const path = require('path');
+const fs = require('fs');
+
+// Записывает правила в :root
+const toRoot = rules => `:root {${rules}}\n`;
+
+// Возвращает контент миксина
+const extractContentFromMixins = css => {
+    if ((css.match(/@define-mixin/g) || []).length != 1) {
+        throw new Error('Theme file should contain exactly one mixin');
+    }
+
+    const match = /@define-mixin.*{([\s\S]*?)}/gm.exec(css);
+
+    if (match) return match[1];
+};
+
+// Удаляем файл с дефолтной темой, его публиковать не нужно
+shell.rm('dist/default.css');
+
+// Переходим в папку с мисинами и парсим темы
+shell.cd('dist/mixins');
+
+const themes = glob.sync('./*.css', {}).map(cssPath => {
+    return path.basename(cssPath).replace('.css', '');
+});
+
+themes.forEach(theme => {
+    let allVars = '';
+
+    // Извлекаем переменные из файлов с миксинами и генерируем 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);
+
+        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));
+    }
+});
+
+// Переносим сгенерированные css-файлы в /dist
+shell.cd('../');
+shell.cp('-R', './css/.', './');
+shell.rm('-rf', './css');

bin/build.sh

@@ -6,19 +6,28 @@ set -e
 # удаляю билды
 yarn clean
 
-# компилю все подпакеты, за исключением core-components-vars
-lerna exec --parallel --ignore @alfalab/core-components-vars -- tsc --build
+# компилю все подпакеты, за исключением css-пакетов (vars, themes)
+lerna exec --parallel \
+    --ignore @alfalab/core-components-vars \
+    --ignore @alfalab/core-components-themes \
+    -- tsc --build
 
 # копирую все дополнительные файлы в dist
 copy_cmd="yarn copyfiles -e \"**/*.{[jt]s*(x),mdx,snap}\" -u 1 \"src/**/*\" dist"
 lerna exec --parallel -- $copy_cmd
 
-# обрабатываю postcss в подпакетах, которые содержат css-файлы, за исключением core-components-vars
+# обрабатываю postcss в подпакетах, которые содержат css-файлы, за исключением css-пакетов (vars, themes)
 postcss_cmd='
 if [ $(find . -type f -name "*.css" | wc -l) -gt 0 ];
     then postcss dist/*.css -d dist;
 fi'
-lerna exec --parallel --ignore @alfalab/core-components-vars -- $postcss_cmd
+lerna exec --parallel \
+    --ignore @alfalab/core-components-vars \
+    --ignore @alfalab/core-components-themes \
+    -- $postcss_cmd
+
+# собираю пакет themes
+lerna exec --scope @alfalab/core-components-themes -- node $(pwd)/bin/build-themes.js
 
 # копирую результат сборки в dist/modern
 copy_modern="mkdir dist/modern && yarn copyfiles -e dist/modern -u 1 dist/**/* dist/modern"
@@ -42,5 +51,8 @@ cp package.json dist/package.json
 # делаю корневой пакет публичным
 yarn json -f dist/package.json -I -e "delete this.private" -e "delete this.workspaces"
 
-# копирую package.json в dist для @alfalab/core-components-vars, т.к. он публикуется из папки dist
-lerna exec --scope @alfalab/core-components-vars -- cp package.json dist/package.json
+# копирую package.json в dist для css-пакетов, т.к. они публикуется из папки dist
+lerna exec \
+    --scope @alfalab/core-components-vars \
+    --scope @alfalab/core-components-themes \
+    -- cp package.json dist/package.json

package.json

@@ -98,6 +98,7 @@
     "eslint-plugin-sort-class-members": "^1.6.0",
     "fork-ts-checker-webpack-plugin": "^4.0.2",
     "git-url-parse": "^11.1.2",
+    "glob": "^7.1.6",
     "handlebars": "^4.7.3",
     "husky": "^4.2.1",
     "identity-obj-proxy": "^3.0.0",

packages/button/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     /* primary */

packages/checkbox/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     --checkbox-bg-color: var(--color-dark-indigo-05-flat);

packages/input/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     --input-border-radius: 4px 4px 0 0;

packages/popover/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     --popover-border-color: var(--color-dark-indigo-15-flat);

packages/pure-input/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     --pure-input-border-radius: 4px 4px 0 0;

packages/switch/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     --switch-label-color: var(--color-dark-indigo);

packages/tag/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     /* border */

packages/themes/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@alfalab/core-components-themes",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "ISC",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    }
+}

packages/themes/default.css → packages/themes/src/default.css

@@ -1,6 +1,6 @@
-@import '../vars/src/colors.css';
-@import '../vars/src/gaps.css';
-@import '../vars/src/typography.css';
+@import '../../vars/src/colors.css';
+@import '../../vars/src/gaps.css';
+@import '../../vars/src/typography.css';
 
 :root {
     --text-primary-color: var(--color-dark-indigo);

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

@@ -1,4 +1,4 @@
-:root {
+@define-mixin button-click {
     --button-ghost-hover-color: var(--color-red-brand);
     --button-ghost-active-color: var(--color-red-dark);
 }

packages/themes/src/mixins/click.css

@@ -0,0 +1,9 @@
+@import './input/click.css';
+@import './pure-input/click.css';
+@import './button/click.css';
+
+@define-mixin theme-click {
+    @mixin input-click;
+    @mixin pure-input-click;
+    @mixin button-click;
+}

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

@@ -0,0 +1,27 @@
+@define-mixin input-click {
+    --input-border-radius: 4px;
+    --input-border-bottom: 0;
+    --input-bg-color: var(--color-dark-indigo-07-flat);
+
+    /* paddings */
+    --input-paddings: 0 var(--gap-s);
+    --input-l-paddings: 0 var(--gap-m);
+
+    /* paddings */
+    --input-labeled-s-paddings: 23px var(--gap-s) 5px;
+    --input-labeled-m-paddings: 28px var(--gap-s) 8px;
+    --input-labeled-l-paddings: 34px var(--gap-m) 14px;
+
+    /* disabled */
+    --input-disabled-border-bottom: 0;
+    --input-disabled-bg-color: var(--color-dark-indigo-07-flat);
+
+    /* focus */
+    --input-focus-shadow: none;
+    --input-focus-border-bottom: 0;
+    --input-hover-bg-color: var(--color-dark-indigo-07-flat);
+
+    /* error */
+    --input-error-shadow: inset 0 0 0 1px var(--input-error-color);
+    --input-error-border-bottom: 0;
+}

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

@@ -0,0 +1,18 @@
+@define-mixin pure-input-click {
+    --pure-input-border-radius: 4px;
+    --pure-input-border-bottom: 0;
+    --pure-input-bg-color: var(--color-dark-indigo-07-flat);
+
+    /* 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);
+
+    /* focus */
+    --pure-input-focus-shadow: none;
+    --pure-input-focus-border-bottom: 0;
+    --pure-input-hover-bg-color: var(--color-dark-indigo-07-flat);
+}

packages/tooltip/src/index.module.css

@@ -1,4 +1,4 @@
-@import '../../themes/default.css';
+@import '../../themes/src/default.css';
 
 :root {
     --tooltip-border-color: var(--color-dark-indigo-15-flat);