feat: add mods colors (#770)

* chore: gen colors & replace color-mods

* fix(popover): set text color

* chore: storybook dark styles

* chore: build only needed colors

* chore: fix mode-switcher

* chore: add missing colors

* chore: mode-switcher refactoring

* chore: theme-switcher refactoring

* chore: fix mode + theme

* feat: replace color-mods in themes

* chore: fix screenshot-testing

* chore: update screenshots

* chore: tag story filename case issue

* fix(amount-input): caret color

* chore: fix screenshots

.storybook/addons/mode-switcher/dark.css

@@ -0,0 +1,9 @@
+body {
+    background: var(--color-dark-bg-primary);
+    color: var(--color-dark-text-primary);
+}
+
+#docs-root .sbdocs-wrapper {
+    background: var(--color-dark-bg-primary);
+    color: var(--color-dark-text-primary);
+}

.storybook/addons/mode-switcher/register.js

@@ -1,39 +1,23 @@
-// TODO: переписать
-
 import React, { useCallback, useState } from 'react';
-import { useChannel } from '@storybook/api';
 import addons, { types } from '@storybook/addons';
-import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';
 import { Form } from '@storybook/components';
-
-import './index.css';
+import { setModeVars, MODES } from './utils';
 
 export const ADDON_ID = 'mode-switcher';
-export const MODE_DATA_ATTR = 'mode';
-const MODES = ['light', 'dark'];
 
 const Addon = () => {
-    const [mode, setMode] = useState(document.body.dataset[MODE_DATA_ATTR] || 'light');
-
-    const emit = useChannel(
-        {
-            [STORY_RENDERED]: () => emit(`${ADDON_ID}/mode`, mode),
-            [DOCS_RENDERED]: () => emit(`${ADDON_ID}/mode`, mode),
-        },
-        [mode],
-    );
+    const [mode, setMode] = useState('light');
 
     const handleChange = useCallback(event => {
         const newMode = event.target.value;
 
         setMode(newMode);
-        emit(`${ADDON_ID}/mode`, newMode);
 
-        document.querySelector('iframe').contentDocument.body.dataset[MODE_DATA_ATTR] = newMode;
+        setModeVars(newMode);
     }, []);
 
     return (
-        <div className='tool' style={{ opacity: 0 }}>
+        <div className='tool'>
             <Form.Select size={1} onChange={handleChange} className='select' value={mode}>
                 {MODES.map(mode => (
                     <option value={mode} key={mode}>

.storybook/addons/mode-switcher/utils.js

@@ -0,0 +1,19 @@
+import { extractMixinContent, getOrCreateStyleTag } from '../utils';
+
+import indigoDark from '!!raw-loader!../../../packages/themes/src/mixins/colors/colors-indigo.css';
+import bluetintDark from '!!raw-loader!../../../packages/themes/src/mixins/colors/colors-bluetint.css';
+import darkStyles from '!!raw-loader!./dark.css';
+
+export const MODES = ['light', 'dark'];
+export const MODE_COLORS_TAG_ID = 'mode-colors';
+
+export const darkColorsMap = {
+    indigo: extractMixinContent(indigoDark),
+    bluetint: extractMixinContent(bluetintDark),
+};
+
+export function setModeVars(mode) {
+    const vars = mode === 'dark' ? `:root { ${darkColorsMap['indigo']} }\n${darkStyles}` : '';
+
+    getOrCreateStyleTag(MODE_COLORS_TAG_ID).innerHTML = vars;
+}

.storybook/addons/theme-switcher/register.js

@@ -1,49 +1,36 @@
 import React, { useCallback, useState } from 'react';
 import addons, { types } from '@storybook/addons';
-import { useChannel, useParameter } from '@storybook/api';
-import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';
+import { useParameter } from '@storybook/api';
 import { Form } from '@storybook/components';
-
-import './index.css';
+import { setStyles } from './utils';
 
 export const ADDON_ID = 'theme-switcher';
-export const THEME_DATA_ATTR = 'theme';
 
 const Addon = () => {
-    const [theme, setTheme] = useState(document.body.dataset[THEME_DATA_ATTR] || 'default');
+    const [theme, setTheme] = useState('default');
     const { themes } = useParameter(ADDON_ID, { themes: [] });
 
-    const emit = useChannel({
-        [STORY_RENDERED]: () => emit(`${ADDON_ID}/theme`, theme),
-        [DOCS_RENDERED]: () => emit(`${ADDON_ID}/theme`, theme),
-    }, [theme]);
-
     const handleChange = useCallback(event => {
         const newTheme = event.target.value;
 
         setTheme(newTheme);
-        emit(`${ADDON_ID}/theme`, newTheme);
 
-        document.body.dataset[THEME_DATA_ATTR] = newTheme;
-        document.querySelector('iframe').contentDocument.body.dataset[THEME_DATA_ATTR] = newTheme;
+        setStyles(newTheme);
     }, []);
 
+    if (!themes.length) return null;
+
     return (
-        themes.length > 0 && (
-            <div className='tool'>
-                <span className='label'>Выбор темы: </span>
-                <Form.Select size={1} onChange={handleChange} className='select' value={theme}>
-                    {['default'].concat(themes).map(themeName => (
-                        <option
-                            value={themeName}
-                            key={themeName}
-                        >
-                            {themeName}
-                        </option>
-                    ))}
-                </Form.Select>
-            </div>
-        )
+        <div className='tool'>
+            <span className='label'>Выбор темы: </span>
+            <Form.Select size={1} onChange={handleChange} className='select' value={theme}>
+                {['default'].concat(themes).map(themeName => (
+                    <option value={themeName} key={themeName}>
+                        {themeName}
+                    </option>
+                ))}
+            </Form.Select>
+        </div>
     );
 };
 

.storybook/addons/theme-switcher/themes/click.css

@@ -0,0 +1,5 @@
+@import '../../../../packages/themes/src/mixins/click.css';
+
+:root {
+    @mixin theme-click;
+}

.storybook/addons/theme-switcher/themes/corp.css

@@ -0,0 +1,5 @@
+@import '../../../../packages/themes/src/mixins/corp.css';
+
+:root {
+    @mixin theme-corp;
+}

.storybook/addons/theme-switcher/themes/mobile.css

@@ -0,0 +1,5 @@
+@import '../../../../packages/themes/src/mixins/mobile.css';
+
+:root {
+    @mixin theme-mobile;
+}

.storybook/addons/theme-switcher/themes/site.css

@@ -0,0 +1,5 @@
+@import '../../../../packages/themes/src/mixins/site.css';
+
+:root {
+    @mixin theme-site;
+}

.storybook/addons/theme-switcher/utils.js

@@ -0,0 +1,35 @@
+import { getOrCreateStyleTag } from '../utils';
+import { MODE_COLORS_TAG_ID } from '../mode-switcher/utils';
+
+import bluetintColors from '!!postcss-loader!../../../packages/vars/src/colors-bluetint.css';
+
+import click from '!!postcss-loader!./themes/click.css';
+import mobile from '!!postcss-loader!./themes/mobile.css';
+import corp from '!!postcss-loader!./themes/corp.css';
+import site from '!!postcss-loader!./themes/site.css';
+
+export const themes = {
+    default: '',
+    click,
+    mobile,
+    corp,
+    site,
+};
+
+export const THEME_DATA_ATTR = 'theme';
+
+export function setThemeStylesInIframeHtmlPage() {
+    const matches = /&theme=([^&]*)/.exec(document.location.search);
+
+    if (matches) {
+        setStyles(matches[1], document);
+    }
+}
+
+export function getThemeStyles(theme) {
+    return [themes[theme], theme === 'mobile' ? bluetintColors : ''].join('\n');
+}
+
+export function setStyles(theme, doc) {
+    getOrCreateStyleTag('theme', MODE_COLORS_TAG_ID, doc).innerHTML = getThemeStyles(theme);
+}

.storybook/addons/utils.js

@@ -0,0 +1,28 @@
+export const getStoryDoc = () => document.querySelector('iframe').contentDocument;
+
+export function getOrCreateStyleTag(id, beforeId, doc = getStoryDoc()) {
+    const existingTag = doc.getElementById(id);
+    if (existingTag) {
+        return existingTag;
+    }
+
+    const styleTag = doc.createElement('style');
+    styleTag.id = id;
+
+    const before = doc.getElementById(beforeId);
+
+    if (before) {
+        doc.head.insertBefore(styleTag, before);
+    } else {
+        doc.head.appendChild(styleTag);
+    }
+
+    return styleTag;
+}
+
+export const extractMixinContent = css =>
+    css
+        .trim()
+        .split('\n')
+        .slice(1, -1)
+        .join('\n');

.storybook/blocks/component-header/ComponentHeader.module.css

@@ -1,6 +1,6 @@
 .component {
     position: relative;
-    margin: 0 0 24px;
+    margin: 0 0 var(--gap-xl);
 }
 
 .component h1 {
@@ -9,20 +9,20 @@
 
 .version {
     display: inline-block;
-    margin-left: 8px;
+    margin-left: var(--gap-xs);
     color: rgba(11, 31, 53, 0.6);
     font-size: 16px;
     line-height: 1.2;
 }
 
 .design {
-    padding: 0 0 0 20px;
+    padding: 0 0 0 var(--gap-l);
     background: url(https://static.figma.com/app/icon/1/favicon.svg) no-repeat 0 50%;
 }
 
 .github {
-    margin: 0 0 8px;
-    padding: 0 0 0 20px;
+    margin: 0 0 var(--gap-xs);
+    padding: 0 0 0 var(--gap-l);
     background: url(https://github.githubassets.com/favicons/favicon.svg) no-repeat 0 50%;
     background-size: 16px 16px;
 }
@@ -36,7 +36,7 @@
 }
 
 .links a {
-    color: #0f62fe;
-    border-bottom: 1px solid color-mod(#0f62fe alpha(30%));
+    color: var(--color-light-text-link);
+    border-bottom: 1px solid var(--color-light-text-link-alpha-30);
     text-decoration: none;
 }