@vkontakte/vkui-tokens 4.1.0 → 4.2.1-dev-98b6e5.0

package/build/compilers/index.d.ts

@@ -2,8 +2,8 @@ import { PixelifyTheme, SpecialTokens, Theme, ThemeCssVarsWide } from '../../int
 declare type ThemeBuildType = 'root' | 'subtheme' | 'flat' | 'cssVars' | 'cssVarsPseudoRoot';
 declare function writeJsonFile<T = Theme>(themePath: string, theme: T, _?: ThemeBuildType): void;
 declare function writeTsFile<T extends SpecialTokens = Theme>(themePath: string, theme: T, type: ThemeBuildType, themeName?: string): void;
-declare function writeStyleFiles<PT = PixelifyTheme>(themePath: string, theme: PT): void;
-declare function writeCssVarsSourceFile<PT = PixelifyTheme>(themePath: string, theme: PT, cssWarsTheme: any): void;
+declare function writeStyleFiles<PT extends PixelifyTheme = PixelifyTheme>(themePath: string, theme: PT): void;
+declare function writeCssVarsSourceFile<PT extends PixelifyTheme = PixelifyTheme>(themePath: string, theme: PT, cssWarsTheme: any): void;
 declare function writeCssVarsSourceMediaFile<T = ThemeCssVarsWide>(themePath: string, theme: T): void;
 declare function writeCssVarsJsUtils<T = Theme>(themePath: string, theme: ThemeCssVarsWide<T>): void;
 export { writeCssVarsJsUtils, writeCssVarsSourceFile, writeCssVarsSourceMediaFile, writeJsonFile, writeStyleFiles, writeTsFile, };

package/build/compilers/index.js

@@ -70,9 +70,11 @@ function writeCssVarsSourceFile(themePath, theme, cssWarsTheme) {
     [
         { mode: 'default', fileName: 'index.css' },
         { mode: 'onlyVariables', fileName: 'onlyVariables.css' },
+        { mode: 'onlyVariablesLocal', fileName: 'onlyVariablesLocal.css' },
         { mode: 'onlyColors', fileName: 'onlyColors.css' },
         { mode: 'onlyAdaptiveGroups', fileName: 'onlyAdaptiveGroups.css' },
         { mode: 'noSizes', fileName: 'noSizes.css' },
+        { mode: 'noColors', fileName: 'noColors.css' },
     ].forEach(function (_a) {
         var _b;
         var mode = _a.mode, fileName = _a.fileName;

package/build/compilers/styles/compileStyles.d.ts

@@ -2,8 +2,10 @@ import 'css.escape';
 import { PixelifyTheme } from '../../../interfaces/general';
 import { Formats } from './helpers/tokenProcessors';
 export declare const serviceKeys: string[];
-export declare type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups' | 'noSizes';
+export declare type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyVariablesLocal' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups' | 'noSizes' | 'noColors';
+export declare function getPrefix<PT extends PixelifyTheme>(format: Formats, theme: PT): string;
+export declare function getRootSelector<PT extends PixelifyTheme>(theme: PT, mode: CompileStylesMode): string;
 /**
  * Компиллирует строку со стилями (в разных форматах), на основе темы
  */
-export declare const compileStyles: <PT = PixelifyTheme<import("../../../interfaces/general").Theme>>(format: Formats, theme: PT, mode?: CompileStylesMode) => string;
+export declare const compileStyles: <PT extends PixelifyTheme<import("../../../interfaces/general").Theme> = PixelifyTheme<import("../../../interfaces/general").Theme>>(format: Formats, theme: PT, mode?: CompileStylesMode) => string;

package/build/compilers/styles/compileStyles.js

@@ -4,28 +4,46 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compileStyles = exports.serviceKeys = void 0;
+exports.compileStyles = exports.getRootSelector = exports.getPrefix = exports.serviceKeys = void 0;
 require("css.escape");
 var common_tags_1 = require("common-tags");
+var getAllButColors_1 = require("../../helpers/getAllButColors");
 var getAllButSizes_1 = require("../../helpers/getAllButSizes");
 var getOnlyColors_1 = require("../../helpers/getOnlyColors");
 var unCamelcasify_1 = require("../../helpers/unCamelcasify");
 var tokenProcessors_1 = require("./helpers/tokenProcessors");
 var tokenRecognition_1 = require("./helpers/tokenRecognition");
 exports.serviceKeys = ['breakpoints', 'prefix', 'themeType'];
-/**
- * Компиллирует строку со стилями (в разных форматах), на основе темы
- */
-var compileStyles = function (format, theme, mode) {
-    if (mode === void 0) { mode = 'default'; }
-    var classicCssType = format === tokenProcessors_1.EStyleTypes.CSS || format === tokenProcessors_1.EStyleTypes.PCSS;
+function isClassicCssType(format) {
+    return format === tokenProcessors_1.EStyleTypes.CSS || format === tokenProcessors_1.EStyleTypes.PCSS;
+}
+function getPrefix(format, theme) {
     var prefix = theme.prefix ? theme.prefix + "-" : '';
-    if (classicCssType && prefix) {
+    if (isClassicCssType(format) && prefix) {
         prefix += '-';
     }
     if (format === tokenProcessors_1.EStyleTypes.CSS && !prefix) {
         prefix = 'vkui--';
     }
+    return prefix;
+}
+exports.getPrefix = getPrefix;
+function getRootSelector(theme, mode) {
+    var _a;
+    if (!mode.endsWith('Local')) {
+        return ':root';
+    }
+    return "." + getPrefix(tokenProcessors_1.EStyleTypes.CSS, theme) + ((_a = theme.themeNameBase) !== null && _a !== void 0 ? _a : theme.themeName) + "--" + theme.colorsScheme;
+}
+exports.getRootSelector = getRootSelector;
+/**
+ * Компиллирует строку со стилями (в разных форматах), на основе темы
+ */
+var compileStyles = function (format, theme, mode) {
+    if (mode === void 0) { mode = 'default'; }
+    var classicCssType = isClassicCssType(format);
+    var prefix = getPrefix(format, theme);
+    var rootSelector = getRootSelector(theme, mode);
     var getDeclaration = tokenProcessors_1.varDeclarations[format];
     var getVariableStatement = tokenProcessors_1.variablesStatementDeclaration[format];
     var getCustomMediaDeclaration = tokenProcessors_1.customMediaDeclaration[format];
@@ -39,6 +57,9 @@ var compileStyles = function (format, theme, mode) {
         case 'noSizes':
             theme = getAllButSizes_1.getAllButSizes(theme, theme.themeNameBase);
             break;
+        case 'noColors':
+            theme = getAllButColors_1.getAllButColors(theme, theme.themeNameBase);
+            break;
     }
     Object.keys(theme).forEach(function (key) {
         // пропускаем служебные ключи
@@ -91,9 +112,9 @@ var compileStyles = function (format, theme, mode) {
     });
     result = variables;
     if (classicCssType && variables) {
-        result = common_tags_1.stripIndent(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t:root {\n\t\t", "}\n\t\t"], ["\n\t\t:root {\n\t\t", "}\n\t\t"])), variables.split('\n').join('\n\t\t'));
+        result = common_tags_1.stripIndent(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t", " {\n\t\t", "}\n\t\t"], ["\n\t\t", " {\n\t\t", "}\n\t\t"])), rootSelector, variables.split('\n').join('\n\t\t'));
     }
-    if (mode === 'onlyVariables') {
+    if (mode === 'onlyVariables' || mode === 'onlyVariablesLocal') {
         return common_tags_1.stripIndent(result);
     }
     if (mode === 'onlyAdaptiveGroups') {