feat(plasma-theme-builder): Actualize default tokens

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

@@ -149,10 +149,6 @@ export interface ThemeConfig {
         light: Grayscale;
         dark: Grayscale;
     };
-    opacity: {
-        textIcons: boolean;
-        surfaces: boolean;
-    };
 }
 
 export type TextIconsTokenName =
@@ -165,11 +161,17 @@ export type TextIconsTokenName =
     | 'textPositive'
     | 'textWarning'
     | 'textNegative'
-    | 'textTransparentAccent'
-    | 'textTransparentAccentGradient'
-    | 'textTransparentPositive'
-    | 'textTransparentWarning'
-    | 'textTransparentNegative';
+    | 'textAccentMinor'
+    | 'textAccentMinorGradient'
+    | 'textPromo'
+    | 'textPromoGradient'
+    | 'textPromoMinor'
+    | 'textPromoMinorGradient'
+    | 'textInfo'
+    | 'textPositiveMinor'
+    | 'textWarningMinor'
+    | 'textNegativeMinor'
+    | 'textInfoMinor';
 
 export type ControlsSurfacesName =
     | 'surfaceSolidDefault'
@@ -192,7 +194,53 @@ export type ControlsSurfacesName =
     | 'surfaceTransparentAccentGradient'
     | 'surfaceTransparentPositive'
     | 'surfaceTransparentWarning'
-    | 'surfaceTransparentNegative';
+    | 'surfaceTransparentNegative'
+    | 'surfaceAccentMinor'
+    | 'surfaceAccentMinorGradient'
+    | 'surfacePromo'
+    | 'surfacePromoGradient'
+    | 'surfacePromoMinor'
+    | 'surfacePromoMinorGradient'
+    | 'surfaceTransparentPromo'
+    | 'surfaceTransparentPromoGradient'
+    | 'surfaceInfo'
+    | 'surfacePositiveMinor'
+    | 'surfaceWarningMinor'
+    | 'surfaceNegativeMinor'
+    | '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';
 
@@ -277,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>;
@@ -313,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,
@@ -7,10 +8,11 @@ import type {
 } from '@salutejs/plasma-tokens-utils';
 
 import {
-    textIconsTokenGetters,
-    controlsSurfacesTokenGetters,
+    textTokenGetters,
+    surfaceTokenGetters,
     backgroundTokenGetters,
     overlayTokenGetters,
+    outlineTokenGetters,
 } from './themeTokenGetters';
 
 import type { TextIconsTokenName, ControlsSurfacesName, BackgroundName, OverlayName } from './themeTokenGetters';
@@ -92,10 +94,11 @@ const getTokensBackgroundByGroups = <T extends string>(
 
 const getThemeModeTokens = <T extends ThemeMode>(config: ThemeConfig, mode: T): Theme[T] => {
     return {
-        textIcons: getTokensByGroups<TextIconsTokenName>(textIconsTokenGetters, config, mode),
-        controlsSurfaces: getTokensByGroups<ControlsSurfacesName>(controlsSurfacesTokenGetters, config, mode),
-        backgrounds: getTokensBackgroundByGroups<BackgroundName>(backgroundTokenGetters, config, mode),
+        text: getTokensByGroups<TextIconsTokenName>(textTokenGetters, config, mode),
+        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/background/getBackgroundPrimaryTokens.ts

@@ -0,0 +1,24 @@
+import type { ThemeConfig, TokensByType } from '@salutejs/plasma-tokens-utils';
+import { getGreyTokenData, tokensCreator } from '../../../utils';
+
+export const getBackgroundPrimaryTokens = (config: ThemeConfig) => {
+    const { grayscale } = config;
+
+    const darkValue = getGreyTokenData({
+        saturation: 1000,
+        grayscale: grayscale.dark,
+    });
+    const lightValue = getGreyTokenData({
+        saturation: 50,
+        grayscale: grayscale.light,
+    });
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Основной фон',
+        onDark: 'Основной фон на темном фоне',
+        onLight: 'Основной фон на светлом фоне',
+        inverse: 'Инвертированный основной фон',
+    };
+
+    return tokensCreator({ darkValue, lightValue, darkSubGroup: 'dark', lightSubGroup: 'light', comment });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/background/getBackgroundSecondaryTokens.ts

@@ -0,0 +1,25 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getBackgroundSecondaryTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Вторичный фон',
+        onDark: 'Вторичный фон на темном фоне',
+        onLight: 'Вторичный фон на светлом фоне',
+        inverse: 'Инвертированный вторичный фон',
+    };
+
+    return tokensCreator({
+        darkValue,
+        lightValue,
+        darkSubGroup: 'dark',
+        lightSubGroup: 'light',
+        comment,
+        enabledAll: false,
+    });
+};

website/plasma-theme-builder/src/builder/themeTokenGetters/background/getBackgroundTertiaryTokens.ts

@@ -0,0 +1,25 @@
+import type { TokensByType } from '@salutejs/plasma-tokens-utils';
+
+import { baseColors } from '../../../types';
+import { tokensCreator } from '../../../utils';
+
+export const getBackgroundTertiaryTokens = () => {
+    const darkValue = baseColors.white.value;
+    const lightValue = baseColors.white.value;
+
+    const comment: Record<keyof TokensByType, string> = {
+        default: 'Третичный фон',
+        onDark: 'Третичный фон на темном фоне',
+        onLight: 'Третичный фон на светлом фоне',
+        inverse: 'Инвертированный третичный фон',
+    };
+
+    return tokensCreator({
+        darkValue,
+        lightValue,
+        darkSubGroup: 'dark',
+        lightSubGroup: 'light',
+        comment,
+        enabledAll: false,
+    });
+};