feat(plasma-theme-builder): Add tokens creators for outline group

utils/plasma-tokens-utils/src/types.ts

@@ -210,6 +210,38 @@ export type ControlsSurfacesName =
     | 'surfaceInfoMinor'
     | 'surfaceTransparentInfo';
 
+export type OutlineName =
+    | 'outlineSolidPrimary'
+    | 'outlineSolidSecondary'
+    | 'outlineSolidTertiary'
+    | 'outlineTransparentDefault'
+    | 'outlineTransparentPrimary'
+    | 'outlineTransparentSecondary'
+    | 'outlineTransparentTertiary'
+    | 'outlineAccent'
+    | 'outlineAccentGradient'
+    | 'outlinePositive'
+    | 'outlineWarning'
+    | 'outlineNegative'
+    | 'outlineClear'
+    | 'outlineTransparentAccent'
+    | 'outlineTransparentAccentGradient'
+    | 'outlineTransparentPositive'
+    | 'outlineTransparentWarning'
+    | 'outlineTransparentNegative'
+    | 'outlineAccentMinor'
+    | 'outlineAccentMinorGradient'
+    | 'outlinePromo'
+    | 'outlinePromoGradient'
+    | 'outlinePromoMinor'
+    | 'outlinePromoMinorGradient'
+    | 'outlineInfo'
+    | 'outlinePositiveMinor'
+    | 'outlineWarningMinor'
+    | 'outlineNegativeMinor'
+    | 'outlineInfoMinor'
+    | 'outlineTransparentInfo';
+
 export type BackgroundName = 'backgroundPrimary' | 'backgroundSecondary' | 'backgroundTertiary';
 
 export type OverlayName = 'overlaySoft' | 'overlayHard';
@@ -293,12 +325,14 @@ export interface Theme {
         controlsSurfaces: TokensByType<ControlsSurfacesName>;
         backgrounds: TokensBackgroundByType<BackgroundName>;
         overlay: TokensByType<OverlayName>;
+        outline: TokensByType<OutlineName>;
     };
     light: {
         textIcons: TokensByType<TextIconsTokenName>;
         controlsSurfaces: TokensByType<ControlsSurfacesName>;
         backgrounds: TokensBackgroundByType<BackgroundName>;
         overlay: TokensByType<OverlayName>;
+        outline: TokensByType<OutlineName>;
     };
     shadow?: Record<string, string>;
     borderRadius?: Record<string, string>;
@@ -329,6 +363,7 @@ export type ActualTokenNames =
     | ControlsSurfacesName
     | BackgroundName
     | OverlayName
+    | OutlineName
     | 'white'
     | 'black'
     | 'clear'

website/plasma-theme-builder/src/builder/createTheme.ts

@@ -1,4 +1,5 @@
 import type {
+    OutlineName,
     ThemeConfig,
     ThemeMode,
     TokensBackgroundByType,
@@ -11,6 +12,7 @@ import {
     surfaceTokenGetters,
     backgroundTokenGetters,
     overlayTokenGetters,
+    outlineTokenGetters,
 } from './themeTokenGetters';
 
 import type { TextIconsTokenName, ControlsSurfacesName, BackgroundName, OverlayName } from './themeTokenGetters';
@@ -96,6 +98,7 @@ const getThemeModeTokens = <T extends ThemeMode>(config: ThemeConfig, mode: T):
         surface: getTokensByGroups<ControlsSurfacesName>(surfaceTokenGetters, config, mode),
         background: getTokensBackgroundByGroups<BackgroundName>(backgroundTokenGetters, config, mode),
         overlay: getTokensByGroups<OverlayName>(overlayTokenGetters, config, mode),
+        outline: getTokensByGroups<OutlineName>(outlineTokenGetters, config, mode),
     };
 };
 

website/plasma-theme-builder/src/builder/themeTokenGetters/index.ts

@@ -2,8 +2,10 @@ export { textTokenGetters } from './text';
 export { surfaceTokenGetters } from './surface';
 export { backgroundTokenGetters } from './background';
 export { overlayTokenGetters } from './overlay';
+export { outlineTokenGetters } from './outline';
 
 export type { TextIconsTokenName } from '@salutejs/plasma-tokens-utils';
 export type { ControlsSurfacesName } from '@salutejs/plasma-tokens-utils';
 export type { BackgroundName } from '@salutejs/plasma-tokens-utils';
 export type { OverlayName } from '@salutejs/plasma-tokens-utils';
+export type { OutlineName } from '@salutejs/plasma-tokens-utils';

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineAccentGradientTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineAccentGradientTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Акцентный цвет обводки с градиентом',
+        onDark: 'Акцентный цвет обводки с градиентом на темном фоне',
+        onLight: 'Акцентный цвет обводки с градиентом на светлом фоне',
+        inverse: 'Инвертированный акцентный цвет обводки с градиентом',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment, enabledAll: false });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineAccentMinorGradientTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineAccentMinorGradientTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Акцентный минорный цвет обводки с градиентом',
+        onDark: 'Акцентный минорный цвет обводки с градиентом на темном фоне',
+        onLight: 'Акцентный минорный цвет обводки с градиентом на светлом фоне',
+        inverse: 'Инвертированный акцентный минорный цвет обводки с градиентом',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment, enabledAll: false });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineAccentMinorTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType, ThemeConfig } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator, updateColorSaturation } from '../../../utils';
+
+export const getOutlineAccentMinorTokens = (config: ThemeConfig) => {
+    const darkValue = updateColorSaturation(config.accentColor.dark, 850);
+    const lightValue = updateColorSaturation(config.accentColor.light, 250);
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Акцентный минорный непрозрачный цвет обводки',
+        onDark: 'Акцентный минорный непрозрачный цвет обводки на темном фоне',
+        onLight: 'Акцентный минорный непрозрачный цвет обводки на светлом фоне',
+        inverse: 'Инвертированный акцентный минорный непрозрачный цвет обводки',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineAccentTokens.ts

@@ -0,0 +1,17 @@
+import type { ThemeConfig, TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineAccentTokens = (config: ThemeConfig) => {
+    const darkValue = config.accentColor.dark;
+    const lightValue = config.accentColor.light;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Акцентный цвет обводки',
+        onDark: 'Акцентный цвет обводки на темном фоне',
+        onLight: 'Акцентный цвет обводки на светлом фоне',
+        inverse: 'Инвертированный акцентный цвет обводки',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineClearTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineClearTokens = () => {
+    const darkValue = baseColors.clear.value;
+    const lightValue = baseColors.clear.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Бесцветная обводка',
+        onDark: 'Бесцветная обводка на темном фоне',
+        onLight: 'Бесцветная обводка на светлом фоне',
+        inverse: 'Инвертированная бесцветная обводка',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineInfoMinorTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineInfoMinorTokens = () => {
+    const darkValue = '[general.blue.850]';
+    const lightValue = '[general.blue.250]';
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Минорный цвет обводки информация',
+        onDark: 'Минорный цвет обводки информация на темном фоне',
+        onLight: 'Минорный цвет обводки информация на светлом фоне',
+        inverse: 'Инвертированный минорный цвет обводки информация',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineInfoTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineInfoTokens = () => {
+    const darkValue = '[general.blue.500]';
+    const lightValue = '[general.blue.600]';
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Цвет обводки информация',
+        onDark: 'Цвет обводки информация на темном фоне',
+        onLight: 'Цвет обводки информация на светлом фоне',
+        inverse: 'Инвертированный цвет обводки информация',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineNegativeMinorTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineNegativeMinorTokens = () => {
+    const darkValue = '[general.red.850]';
+    const lightValue = '[general.red.250]';
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Минорный цвет обводки ошибка',
+        onDark: 'Минорный цвет обводки ошибка на темном фоне',
+        onLight: 'Минорный цвет обводки ошибка на светлом фоне',
+        inverse: 'Инвертированный минорный цвет обводки ошибка',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineNegativeTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineNegativeTokens = () => {
+    const darkValue = '[general.red.500]';
+    const lightValue = '[general.red.600]';
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Цвет обводки ошибка',
+        onDark: 'Цвет обводки ошибка на темном фоне',
+        onLight: 'Цвет обводки ошибка на светлом фоне',
+        inverse: 'Инвертированный цвет обводки ошибка',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlinePositiveMinorTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlinePositiveMinorTokens = () => {
+    const darkValue = '[general.green.850]';
+    const lightValue = '[general.green.250]';
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Минорный цвет обводки успех',
+        onDark: 'Минорный цвет обводки успех на темном фоне',
+        onLight: 'Минорный цвет обводки успех на светлом фоне',
+        inverse: 'Инвертированный минорный цвет обводки успех',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlinePositiveTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlinePositiveTokens = () => {
+    const darkValue = '[general.green.500]';
+    const lightValue = '[general.green.600]';
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Цвет обводки успех',
+        onDark: 'Цвет обводки успех на темном фоне',
+        onLight: 'Цвет обводки успех на светлом фоне',
+        inverse: 'Инвертированный цвет обводки успех',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlinePromoGradientTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getOutlinePromoGradientTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Промо цвет обводки с градиентом',
+        onDark: 'Промо цвет обводки с градиентом на темном фоне',
+        onLight: 'Промо цвет обводки с градиентом на светлом фоне',
+        inverse: 'Инвертированный промо цвет обводки с градиентом',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment, enabledAll: false });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlinePromoMinorGradientTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getOutlinePromoMinorGradientTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Минорный промо цвет обводки с градиентом',
+        onDark: 'Минорный промо цвет обводки с градиентом на темном фоне',
+        onLight: 'Минорный промо цвет обводки с градиентом на светлом фоне',
+        inverse: 'Инвертированный минорный промо цвет обводки с градиентом',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment, enabledAll: false });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlinePromoMinorTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType, ThemeConfig } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+import { baseColors } from '../../../types';
+
+export const getOutlinePromoMinorTokens = (config: ThemeConfig) => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Минорный промо цвет обводки',
+        onDark: 'Минорный промо цвет обводки на темном фоне',
+        onLight: 'Минорный промо цвет обводки на светлом фоне',
+        inverse: 'Инвертированный минорный промо цвет обводки',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment, enabledAll: false });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlinePromoTokens.ts

@@ -0,0 +1,18 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getOutlinePromoTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Промо цвет обводки',
+        onDark: 'Промо цвет обводки на темном фоне',
+        onLight: 'Промо цвет обводки на светлом фоне',
+        inverse: 'Инвертированный промо цвет обводки',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment, enabledAll: false });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/outline/getOutlineSolidPrimaryTokens.ts

@@ -0,0 +1,17 @@
+import type { TokensByType, ThemeConfig } from '@salutejs/plasma-tokens-utils';
+
+import { tokensCreator } from '../../../utils';
+
+export const getOutlineSolidPrimaryTokens = (config: ThemeConfig) => {
+    const darkValue = `[general.${config.grayscale.dark}.${900}]`;
+    const lightValue = `[general.${config.grayscale.light}.${200}]`;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Основной непрозрачный цвет обводки',
+        onDark: 'Основной непрозрачный цвет обводки на темном фоне',
+        onLight: 'Основной непрозрачный цвет обводки на светлом фоне',
+        inverse: 'Инвертированный основной непрозрачный цвет обводки',
+    };
+
+    return tokensCreator({ darkValue, lightValue, comment });
+};