diff --git a/packages/plasma-b2c/package-lock.json b/packages/plasma-b2c/package-lock.json index e0c0693a59..6c573b786d 100644 --- a/packages/plasma-b2c/package-lock.json +++ b/packages/plasma-b2c/package-lock.json @@ -12,6 +12,7 @@ "@salutejs/plasma-core": "1.166.0", "@salutejs/plasma-hope": "1.292.0", "@salutejs/plasma-new-hope": "0.121.1-dev.0", + "@salutejs/plasma-themes": "0.13.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", "@salutejs/plasma-typo": "0.40.0" @@ -5115,6 +5116,11 @@ "styled-components": "^5.1.1" } }, + "node_modules/@salutejs/plasma-themes": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.13.0.tgz", + "integrity": "sha512-wQG6WyYzUq+0FIwUJTs3cyTe1qLi62GqjU5mow2yn2Cj569VtR1kqPE5v3qw+L3uD5KpqcpPOeWtVuZc+FQSgw==" + }, "node_modules/@salutejs/plasma-tokens-b2c": { "version": "0.51.0", "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2c/-/plasma-tokens-b2c-0.51.0.tgz", @@ -20003,6 +20009,11 @@ "param-case": "^3.0.4" } }, + "@salutejs/plasma-themes": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.13.0.tgz", + "integrity": "sha512-wQG6WyYzUq+0FIwUJTs3cyTe1qLi62GqjU5mow2yn2Cj569VtR1kqPE5v3qw+L3uD5KpqcpPOeWtVuZc+FQSgw==" + }, "@salutejs/plasma-tokens-b2c": { "version": "0.51.0", "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2c/-/plasma-tokens-b2c-0.51.0.tgz", diff --git a/packages/plasma-b2c/package.json b/packages/plasma-b2c/package.json index c5196a7fe5..034ffb19a3 100644 --- a/packages/plasma-b2c/package.json +++ b/packages/plasma-b2c/package.json @@ -45,6 +45,7 @@ "@salutejs/plasma-core": "1.166.0", "@salutejs/plasma-hope": "1.292.0", "@salutejs/plasma-new-hope": "0.121.1-dev.0", + "@salutejs/plasma-themes": "0.13.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", "@salutejs/plasma-typo": "0.40.0" @@ -107,4 +108,4 @@ "react" ], "sideEffects": false -} \ No newline at end of file +} diff --git a/packages/plasma-tokens/package.json b/packages/plasma-tokens/package.json index b8650a93f6..7e2f841db6 100644 --- a/packages/plasma-tokens/package.json +++ b/packages/plasma-tokens/package.json @@ -22,6 +22,7 @@ "access": "public" }, "files": [ + "css", "colors", "brands", "es", diff --git a/packages/plasma-web/package-lock.json b/packages/plasma-web/package-lock.json index f71491251a..730015cdb1 100644 --- a/packages/plasma-web/package-lock.json +++ b/packages/plasma-web/package-lock.json @@ -12,6 +12,7 @@ "@salutejs/plasma-core": "1.166.0", "@salutejs/plasma-hope": "1.292.0", "@salutejs/plasma-new-hope": "0.121.1-dev.0", + "@salutejs/plasma-themes": "0.13.0", "@salutejs/plasma-tokens-b2b": "1.41.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", @@ -4893,6 +4894,11 @@ "styled-components": "^5.1.1" } }, + "node_modules/@salutejs/plasma-themes": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.13.0.tgz", + "integrity": "sha512-wQG6WyYzUq+0FIwUJTs3cyTe1qLi62GqjU5mow2yn2Cj569VtR1kqPE5v3qw+L3uD5KpqcpPOeWtVuZc+FQSgw==" + }, "node_modules/@salutejs/plasma-tokens-b2b": { "version": "1.41.0", "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2b/-/plasma-tokens-b2b-1.41.0.tgz", @@ -19049,6 +19055,11 @@ "param-case": "^3.0.4" } }, + "@salutejs/plasma-themes": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.13.0.tgz", + "integrity": "sha512-wQG6WyYzUq+0FIwUJTs3cyTe1qLi62GqjU5mow2yn2Cj569VtR1kqPE5v3qw+L3uD5KpqcpPOeWtVuZc+FQSgw==" + }, "@salutejs/plasma-tokens-b2b": { "version": "1.41.0", "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2b/-/plasma-tokens-b2b-1.41.0.tgz", diff --git a/packages/plasma-web/package.json b/packages/plasma-web/package.json index 4f7a1f65b5..9baece8716 100644 --- a/packages/plasma-web/package.json +++ b/packages/plasma-web/package.json @@ -22,6 +22,7 @@ "@salutejs/plasma-core": "1.166.0", "@salutejs/plasma-hope": "1.292.0", "@salutejs/plasma-new-hope": "0.121.1-dev.0", + "@salutejs/plasma-themes": "0.13.0", "@salutejs/plasma-tokens-b2b": "1.41.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", @@ -110,4 +111,4 @@ "Fanil Zubairov" ], "sideEffects": false -} \ No newline at end of file +} diff --git a/packages/themes/core-themes/src/generate.ts b/packages/themes/core-themes/src/generate.ts index 5fc437402f..49abac2dea 100644 --- a/packages/themes/core-themes/src/generate.ts +++ b/packages/themes/core-themes/src/generate.ts @@ -16,7 +16,7 @@ import { generateThemes, generateTokens, } from './generators'; -import { getMetaGrouped, readTheme } from './utils'; +import { getMetaGrouped, readTheme, fallbackCreateColorTokensWrapper } from './utils'; export const generate = async (themes: ThemeRequest[]) => { const themeDir = 'src'; @@ -29,8 +29,14 @@ export const generate = async (themes: ThemeRequest[]) => { const { meta, variations } = themeSource; const metaGrouped = getMetaGrouped(themeSource.meta); - const colorCSSVariables = createColorTokens(variations.color, metaGrouped.color); - const colorJSVariables = createColorTokens(variations.color, metaGrouped.color, isJS); + // TODO: Использовать createColorTokens: https://github.com/salute-developers/plasma/issues/1363 + const colorCSSVariables = fallbackCreateColorTokensWrapper(theme.name, variations.color, metaGrouped.color); + const colorJSVariables = fallbackCreateColorTokensWrapper( + theme.name, + variations.color, + metaGrouped.color, + isJS, + ); const gradientCSSVariables = createGradientTokens(variations.gradient, metaGrouped.gradient); const gradientJSVariables = createGradientTokens(variations.gradient, metaGrouped.gradient, isJS); diff --git a/packages/themes/core-themes/src/utils/fallbackTokens.ts b/packages/themes/core-themes/src/utils/fallbackTokens.ts new file mode 100644 index 0000000000..6a0b030dd8 --- /dev/null +++ b/packages/themes/core-themes/src/utils/fallbackTokens.ts @@ -0,0 +1,74 @@ +// TODO: Убрать использование файла: https://github.com/salute-developers/plasma/issues/1363 + +import { createColorTokens } from '../creators'; +import { TokenType } from '../types'; + +import { camelToKebab } from './other'; + +export const deprecatedColorTokenOnActualToken: Record = { + whitePrimary: 'onDarkTextPrimary', + whiteSecondary: 'onDarkTextSecondary', + whiteTertiary: 'onDarkTextTertiary', + blackPrimary: 'onLightTextPrimary', + blackSecondary: 'onLightTextSecondary', + blackTertiary: 'onLightTextTertiary', + buttonBlack: 'onLightSurfaceSolidDefault', + buttonBlackSecondary: 'onLightSurfaceTransparentSecondary', + buttonWhite: 'onDarkSurfaceSolidDefault', + buttonWhiteSecondary: 'onDarkSurfaceTransparentSecondary', + text: 'textPrimary', + primary: 'textPrimary', + secondary: 'textSecondary', + tertiary: 'textTertiary', + paragraph: 'textParagraph', + background: 'backgroundPrimary', + accent: 'textAccent', + success: 'textPositive', + warning: 'textWarning', + critical: 'textNegative', + overlay: 'overlaySoft', + surfaceLiquid01: 'surfaceTransparentPrimary', + surfaceLiquid02: 'surfaceTransparentSecondary', + surfaceLiquid03: 'surfaceTransparentTertiary', + surfaceSolid01: 'surfaceSolidPrimary', + surfaceSolid02: 'surfaceSolidSecondary', + surfaceSolid03: 'surfaceSolidTertiary', + surfaceCard: 'surfaceTransparentCard', + buttonSecondary: 'surfaceTransparentSecondary', + buttonAccent: 'textAccent', + buttonSuccess: 'surfacePositive', + buttonWarning: 'surfaceWarning', + buttonCritical: 'surfaceNegative', +}; + +export const getFallbackTokens = (isJS?: boolean) => { + const legacyPrefix = 'plasmaColors'; + + return Object.entries(deprecatedColorTokenOnActualToken) + .map(([oldName, actualName]) => { + const oldVarName = `--${camelToKebab(legacyPrefix)}-${camelToKebab(oldName)}`; + const actualVarName = `--${camelToKebab(actualName)}`; + + if (isJS) { + return `/** @deprecated instead use ${actualName} */\nexport const ${oldName} = 'var(${oldVarName}, var(${actualVarName}))';\n`; + } + + return ` ${oldVarName}: var(${actualVarName});`; + }) + .join('\n'); +}; + +export const fallbackCreateColorTokensWrapper = (name: string, color: any, tokens?: Array, isJS = false) => { + const colorVariables = createColorTokens(color, tokens, isJS); + + if (name === 'plasma_web' || name === 'plasma_b2c') { + const fallbackTokens = getFallbackTokens(isJS); + + return { + dark: `${colorVariables.dark}\n${fallbackTokens}`, + light: `${colorVariables.light}\n${fallbackTokens}`, + }; + } + + return colorVariables; +}; diff --git a/packages/themes/core-themes/src/utils/index.ts b/packages/themes/core-themes/src/utils/index.ts index 7469a937f4..021054ad0e 100644 --- a/packages/themes/core-themes/src/utils/index.ts +++ b/packages/themes/core-themes/src/utils/index.ts @@ -1,3 +1,4 @@ export * from './meta'; export * from './theme'; export * from './other'; +export * from './fallbackTokens'; diff --git a/packages/themes/core-themes/src/utils/other.ts b/packages/themes/core-themes/src/utils/other.ts index 829cbfc14a..77fbd60766 100644 --- a/packages/themes/core-themes/src/utils/other.ts +++ b/packages/themes/core-themes/src/utils/other.ts @@ -1,2 +1,4 @@ export const kebabToCamel = (str: string) => str.replace(/-([a-z])/g, (_, group) => group.toUpperCase()).replace(/^./, (char) => char.toLowerCase()); + +export const camelToKebab = (str: string) => str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`); diff --git a/packages/themes/plasma-themes/src/css/plasma_b2c.module.css b/packages/themes/plasma-themes/src/css/plasma_b2c.module.css index 1f4feef8ee..d75b8a9486 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c.module.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c.module.css @@ -240,6 +240,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } .dark { @@ -527,6 +560,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } .light { diff --git a/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css b/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css index 0a309e1ac0..880df204f7 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css @@ -240,6 +240,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/css/plasma_b2c__light.css b/packages/themes/plasma-themes/src/css/plasma_b2c__light.css index 9247ea5d94..c84a589aa6 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c__light.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c__light.css @@ -240,6 +240,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/css/plasma_web.module.css b/packages/themes/plasma-themes/src/css/plasma_web.module.css index 1f4feef8ee..d75b8a9486 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web.module.css +++ b/packages/themes/plasma-themes/src/css/plasma_web.module.css @@ -240,6 +240,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } .dark { @@ -527,6 +560,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } .light { diff --git a/packages/themes/plasma-themes/src/css/plasma_web__dark.css b/packages/themes/plasma-themes/src/css/plasma_web__dark.css index 0a309e1ac0..880df204f7 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web__dark.css +++ b/packages/themes/plasma-themes/src/css/plasma_web__dark.css @@ -240,6 +240,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/css/plasma_web__light.css b/packages/themes/plasma-themes/src/css/plasma_web__light.css index 9247ea5d94..c84a589aa6 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web__light.css +++ b/packages/themes/plasma-themes/src/css/plasma_web__light.css @@ -240,6 +240,39 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts b/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts index 09a867fc15..004c3bfc8e 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts @@ -242,6 +242,39 @@ export const plasma_b2c__dark = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts b/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts index 61b2032a3c..e15b02884d 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts @@ -242,6 +242,39 @@ export const plasma_b2c__light = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts b/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts index 54c8043de6..61c8893230 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts @@ -242,6 +242,39 @@ export const plasma_web__dark = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/themes/plasma_web__light.ts b/packages/themes/plasma-themes/src/themes/plasma_web__light.ts index a2389790f8..96c9828141 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_web__light.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_web__light.ts @@ -242,6 +242,39 @@ export const plasma_web__light = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); + --plasma-colors-white-primary: var(--on-dark-text-primary); + --plasma-colors-white-secondary: var(--on-dark-text-secondary); + --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); + --plasma-colors-black-primary: var(--on-light-text-primary); + --plasma-colors-black-secondary: var(--on-light-text-secondary); + --plasma-colors-black-tertiary: var(--on-light-text-tertiary); + --plasma-colors-button-black: var(--on-light-surface-solid-default); + --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); + --plasma-colors-button-white: var(--on-dark-surface-solid-default); + --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); + --plasma-colors-text: var(--text-primary); + --plasma-colors-primary: var(--text-primary); + --plasma-colors-secondary: var(--text-secondary); + --plasma-colors-tertiary: var(--text-tertiary); + --plasma-colors-paragraph: var(--text-paragraph); + --plasma-colors-background: var(--background-primary); + --plasma-colors-accent: var(--text-accent); + --plasma-colors-success: var(--text-positive); + --plasma-colors-warning: var(--text-warning); + --plasma-colors-critical: var(--text-negative); + --plasma-colors-overlay: var(--overlay-soft); + --plasma-colors-surface-liquid01: var(--surface-transparent-primary); + --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); + --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); + --plasma-colors-surface-solid01: var(--surface-solid-primary); + --plasma-colors-surface-solid02: var(--surface-solid-secondary); + --plasma-colors-surface-solid03: var(--surface-solid-tertiary); + --plasma-colors-surface-card: var(--surface-transparent-card); + --plasma-colors-button-secondary: var(--surface-transparent-secondary); + --plasma-colors-button-accent: var(--text-accent); + --plasma-colors-button-success: var(--surface-positive); + --plasma-colors-button-warning: var(--surface-warning); + --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts b/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts index b135775d38..4b96cd62c7 100644 --- a/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts +++ b/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts @@ -712,6 +712,107 @@ export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; /** dark overlay onLight overlayBlur */ export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; +/** @deprecated instead use onDarkTextPrimary */ +export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; + +/** @deprecated instead use onDarkTextSecondary */ +export const whiteSecondary = 'var(--plasma-colors-white-secondary, var(--on-dark-text-secondary))'; + +/** @deprecated instead use onDarkTextTertiary */ +export const whiteTertiary = 'var(--plasma-colors-white-tertiary, var(--on-dark-text-tertiary))'; + +/** @deprecated instead use onLightTextPrimary */ +export const blackPrimary = 'var(--plasma-colors-black-primary, var(--on-light-text-primary))'; + +/** @deprecated instead use onLightTextSecondary */ +export const blackSecondary = 'var(--plasma-colors-black-secondary, var(--on-light-text-secondary))'; + +/** @deprecated instead use onLightTextTertiary */ +export const blackTertiary = 'var(--plasma-colors-black-tertiary, var(--on-light-text-tertiary))'; + +/** @deprecated instead use onLightSurfaceSolidDefault */ +export const buttonBlack = 'var(--plasma-colors-button-black, var(--on-light-surface-solid-default))'; + +/** @deprecated instead use onLightSurfaceTransparentSecondary */ +export const buttonBlackSecondary = + 'var(--plasma-colors-button-black-secondary, var(--on-light-surface-transparent-secondary))'; + +/** @deprecated instead use onDarkSurfaceSolidDefault */ +export const buttonWhite = 'var(--plasma-colors-button-white, var(--on-dark-surface-solid-default))'; + +/** @deprecated instead use onDarkSurfaceTransparentSecondary */ +export const buttonWhiteSecondary = + 'var(--plasma-colors-button-white-secondary, var(--on-dark-surface-transparent-secondary))'; + +/** @deprecated instead use textPrimary */ +export const text = 'var(--plasma-colors-text, var(--text-primary))'; + +/** @deprecated instead use textPrimary */ +export const primary = 'var(--plasma-colors-primary, var(--text-primary))'; + +/** @deprecated instead use textSecondary */ +export const secondary = 'var(--plasma-colors-secondary, var(--text-secondary))'; + +/** @deprecated instead use textTertiary */ +export const tertiary = 'var(--plasma-colors-tertiary, var(--text-tertiary))'; + +/** @deprecated instead use textParagraph */ +export const paragraph = 'var(--plasma-colors-paragraph, var(--text-paragraph))'; + +/** @deprecated instead use backgroundPrimary */ +export const background = 'var(--plasma-colors-background, var(--background-primary))'; + +/** @deprecated instead use textAccent */ +export const accent = 'var(--plasma-colors-accent, var(--text-accent))'; + +/** @deprecated instead use textPositive */ +export const success = 'var(--plasma-colors-success, var(--text-positive))'; + +/** @deprecated instead use textWarning */ +export const warning = 'var(--plasma-colors-warning, var(--text-warning))'; + +/** @deprecated instead use textNegative */ +export const critical = 'var(--plasma-colors-critical, var(--text-negative))'; + +/** @deprecated instead use overlaySoft */ +export const overlay = 'var(--plasma-colors-overlay, var(--overlay-soft))'; + +/** @deprecated instead use surfaceTransparentPrimary */ +export const surfaceLiquid01 = 'var(--plasma-colors-surface-liquid01, var(--surface-transparent-primary))'; + +/** @deprecated instead use surfaceTransparentSecondary */ +export const surfaceLiquid02 = 'var(--plasma-colors-surface-liquid02, var(--surface-transparent-secondary))'; + +/** @deprecated instead use surfaceTransparentTertiary */ +export const surfaceLiquid03 = 'var(--plasma-colors-surface-liquid03, var(--surface-transparent-tertiary))'; + +/** @deprecated instead use surfaceSolidPrimary */ +export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01, var(--surface-solid-primary))'; + +/** @deprecated instead use surfaceSolidSecondary */ +export const surfaceSolid02 = 'var(--plasma-colors-surface-solid02, var(--surface-solid-secondary))'; + +/** @deprecated instead use surfaceSolidTertiary */ +export const surfaceSolid03 = 'var(--plasma-colors-surface-solid03, var(--surface-solid-tertiary))'; + +/** @deprecated instead use surfaceTransparentCard */ +export const surfaceCard = 'var(--plasma-colors-surface-card, var(--surface-transparent-card))'; + +/** @deprecated instead use surfaceTransparentSecondary */ +export const buttonSecondary = 'var(--plasma-colors-button-secondary, var(--surface-transparent-secondary))'; + +/** @deprecated instead use textAccent */ +export const buttonAccent = 'var(--plasma-colors-button-accent, var(--text-accent))'; + +/** @deprecated instead use surfacePositive */ +export const buttonSuccess = 'var(--plasma-colors-button-success, var(--surface-positive))'; + +/** @deprecated instead use surfaceWarning */ +export const buttonWarning = 'var(--plasma-colors-button-warning, var(--surface-warning))'; + +/** @deprecated instead use surfaceNegative */ +export const buttonCritical = 'var(--plasma-colors-button-critical, var(--surface-negative))'; + /** Акцентный цвет с градиентом */ export const textAccentGradientHover = 'var(--text-accent-gradient-hover, #CCCCCCFF)'; diff --git a/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts b/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts index b135775d38..4b96cd62c7 100644 --- a/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts +++ b/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts @@ -712,6 +712,107 @@ export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; /** dark overlay onLight overlayBlur */ export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; +/** @deprecated instead use onDarkTextPrimary */ +export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; + +/** @deprecated instead use onDarkTextSecondary */ +export const whiteSecondary = 'var(--plasma-colors-white-secondary, var(--on-dark-text-secondary))'; + +/** @deprecated instead use onDarkTextTertiary */ +export const whiteTertiary = 'var(--plasma-colors-white-tertiary, var(--on-dark-text-tertiary))'; + +/** @deprecated instead use onLightTextPrimary */ +export const blackPrimary = 'var(--plasma-colors-black-primary, var(--on-light-text-primary))'; + +/** @deprecated instead use onLightTextSecondary */ +export const blackSecondary = 'var(--plasma-colors-black-secondary, var(--on-light-text-secondary))'; + +/** @deprecated instead use onLightTextTertiary */ +export const blackTertiary = 'var(--plasma-colors-black-tertiary, var(--on-light-text-tertiary))'; + +/** @deprecated instead use onLightSurfaceSolidDefault */ +export const buttonBlack = 'var(--plasma-colors-button-black, var(--on-light-surface-solid-default))'; + +/** @deprecated instead use onLightSurfaceTransparentSecondary */ +export const buttonBlackSecondary = + 'var(--plasma-colors-button-black-secondary, var(--on-light-surface-transparent-secondary))'; + +/** @deprecated instead use onDarkSurfaceSolidDefault */ +export const buttonWhite = 'var(--plasma-colors-button-white, var(--on-dark-surface-solid-default))'; + +/** @deprecated instead use onDarkSurfaceTransparentSecondary */ +export const buttonWhiteSecondary = + 'var(--plasma-colors-button-white-secondary, var(--on-dark-surface-transparent-secondary))'; + +/** @deprecated instead use textPrimary */ +export const text = 'var(--plasma-colors-text, var(--text-primary))'; + +/** @deprecated instead use textPrimary */ +export const primary = 'var(--plasma-colors-primary, var(--text-primary))'; + +/** @deprecated instead use textSecondary */ +export const secondary = 'var(--plasma-colors-secondary, var(--text-secondary))'; + +/** @deprecated instead use textTertiary */ +export const tertiary = 'var(--plasma-colors-tertiary, var(--text-tertiary))'; + +/** @deprecated instead use textParagraph */ +export const paragraph = 'var(--plasma-colors-paragraph, var(--text-paragraph))'; + +/** @deprecated instead use backgroundPrimary */ +export const background = 'var(--plasma-colors-background, var(--background-primary))'; + +/** @deprecated instead use textAccent */ +export const accent = 'var(--plasma-colors-accent, var(--text-accent))'; + +/** @deprecated instead use textPositive */ +export const success = 'var(--plasma-colors-success, var(--text-positive))'; + +/** @deprecated instead use textWarning */ +export const warning = 'var(--plasma-colors-warning, var(--text-warning))'; + +/** @deprecated instead use textNegative */ +export const critical = 'var(--plasma-colors-critical, var(--text-negative))'; + +/** @deprecated instead use overlaySoft */ +export const overlay = 'var(--plasma-colors-overlay, var(--overlay-soft))'; + +/** @deprecated instead use surfaceTransparentPrimary */ +export const surfaceLiquid01 = 'var(--plasma-colors-surface-liquid01, var(--surface-transparent-primary))'; + +/** @deprecated instead use surfaceTransparentSecondary */ +export const surfaceLiquid02 = 'var(--plasma-colors-surface-liquid02, var(--surface-transparent-secondary))'; + +/** @deprecated instead use surfaceTransparentTertiary */ +export const surfaceLiquid03 = 'var(--plasma-colors-surface-liquid03, var(--surface-transparent-tertiary))'; + +/** @deprecated instead use surfaceSolidPrimary */ +export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01, var(--surface-solid-primary))'; + +/** @deprecated instead use surfaceSolidSecondary */ +export const surfaceSolid02 = 'var(--plasma-colors-surface-solid02, var(--surface-solid-secondary))'; + +/** @deprecated instead use surfaceSolidTertiary */ +export const surfaceSolid03 = 'var(--plasma-colors-surface-solid03, var(--surface-solid-tertiary))'; + +/** @deprecated instead use surfaceTransparentCard */ +export const surfaceCard = 'var(--plasma-colors-surface-card, var(--surface-transparent-card))'; + +/** @deprecated instead use surfaceTransparentSecondary */ +export const buttonSecondary = 'var(--plasma-colors-button-secondary, var(--surface-transparent-secondary))'; + +/** @deprecated instead use textAccent */ +export const buttonAccent = 'var(--plasma-colors-button-accent, var(--text-accent))'; + +/** @deprecated instead use surfacePositive */ +export const buttonSuccess = 'var(--plasma-colors-button-success, var(--surface-positive))'; + +/** @deprecated instead use surfaceWarning */ +export const buttonWarning = 'var(--plasma-colors-button-warning, var(--surface-warning))'; + +/** @deprecated instead use surfaceNegative */ +export const buttonCritical = 'var(--plasma-colors-button-critical, var(--surface-negative))'; + /** Акцентный цвет с градиентом */ export const textAccentGradientHover = 'var(--text-accent-gradient-hover, #CCCCCCFF)';