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)';