chore: update theme docs (#1505)

core-ds · Dec 17, 2024 · bd71aed · bd71aed
1 parent 9555ebb
commit bd71aed
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/.storybook/theming-wizard/answers/keepCssVars/index.tsx b/.storybook/theming-wizard/answers/keepCssVars/index.tsx
@@ -22,6 +22,19 @@ export const KeepCssVars = ({ answers }: { answers: Answers }) => {
         </div>,
     );
 
+    steps.push(
+        <div>
+            <Typography.Text>
+                Также если вы используете индексный файл с переменными (vars/index.css) , то
+                рекомендуем вам перейти на один из бандлов, подготовленных под продукты (например,
+                vars/bundle/click.css). В этих бандлах всегда будет правильный набор переменных для
+                вашего продукта. Если в продукте встречаются очень старые deprecated цвета из файла
+                vars/colors.css, дополнительно подключите его (он всё ещё есть в индексном файле, но
+                в бандлы его уже не добавляли).
+            </Typography.Text>
+        </div>,
+    );
+
     if (answers.darkMode === 'yes') {
         steps.push(
             <div key='darkModeWithVars' style={{ flex: 1 }}>

diff --git a/.storybook/theming-wizard/answers/keepCssVars/utils.ts b/.storybook/theming-wizard/answers/keepCssVars/utils.ts
@@ -11,7 +11,9 @@ import darkMode from '@alfalab/core-components/themes/dark';
 
 export const cssImportsExample = (answers: Answers) => {
     const cssImports: string[] = [
-        "@import '@alfalab/core-components/vars/index.css';",
+        answers.product === 'default'
+            ? "@import '@alfalab/core-components/vars/index.css';"
+            : `@import '@alfalab/core-components/vars/bundle/${answers.product}.css';`,
         answers.product !== 'default'
             ? `@import '@alfalab/core-components/themes/${answers.product}.css';`
             : '',