From e266fde54650cf8871b40e888dd95079cdd12324 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Thu, 16 May 2024 11:26:20 +0300 Subject: [PATCH] feat(themes): add surface transparent tokens to sdds --- .../data-themes/data/themes/sdds_serv.json | 72 +++++++++---------- .../sdds-themes/src/css/sdds_serv.module.css | 18 +++++ .../sdds-themes/src/css/sdds_serv__dark.css | 9 +++ .../sdds-themes/src/css/sdds_serv__light.css | 9 +++ .../sdds-themes/src/themes/sdds_serv__dark.ts | 9 +++ .../src/themes/sdds_serv__light.ts | 9 +++ .../sdds-themes/src/tokens/sdds_serv/index.ts | 27 +++++++ 7 files changed, 117 insertions(+), 36 deletions(-) diff --git a/packages/themes/data-themes/data/themes/sdds_serv.json b/packages/themes/data-themes/data/themes/sdds_serv.json index 73e2a5e7a7..962a9f635d 100644 --- a/packages/themes/data-themes/data/themes/sdds_serv.json +++ b/packages/themes/data-themes/data/themes/sdds_serv.json @@ -1585,49 +1585,49 @@ "enabled": false }, "surfaceTransparentPositiveHover": { - "value": "#FFFFFFFF", + "value": "#1A9E323D", "comment": "Прозрачный цвет фона поверхности/контрола успех", - "enabled": false + "enabled": true }, "surfaceTransparentPositiveActive": { - "value": "#FFFFFFFF", + "value": "#1A9E320F", "comment": "Прозрачный цвет фона поверхности/контрола успех", - "enabled": false + "enabled": true }, "surfaceTransparentPositive": { - "value": "#FFFFFF", + "value": "rgba(26,158,50,0.12)", "comment": "Прозрачный цвет фона поверхности/контрола успех", - "enabled": false + "enabled": true }, "surfaceTransparentWarningHover": { - "value": "#FFFFFFFF", + "value": "#FA5F053D", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentWarningActive": { - "value": "#FFFFFFFF", + "value": "#FA5F050F", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentWarning": { - "value": "#FFFFFF", + "value": "rgba(250,95,5,0.12)", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentNegativeHover": { - "value": "#FFFFFFFF", + "value": "#FF293E3D", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentNegativeActive": { - "value": "#FFFFFFFF", + "value": "#FF293E0F", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentNegative": { - "value": "#FFFFFF", + "value": "rgba(255,41,62,0.12)", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentInfoHover": { "value": "#FFFFFFFF", @@ -6733,49 +6733,49 @@ "enabled": false }, "surfaceTransparentPositiveHover": { - "value": "#FFFFFFFF", + "value": "#1A9E3205", "comment": "Прозрачный цвет фона поверхности/контрола успех", - "enabled": false + "enabled": true }, "surfaceTransparentPositiveActive": { - "value": "#FFFFFFFF", + "value": "#1A9E321A", "comment": "Прозрачный цвет фона поверхности/контрола успех", - "enabled": false + "enabled": true }, "surfaceTransparentPositive": { - "value": "#FFFFFF", + "value": "rgba(26,158,50,0.06)", "comment": "Прозрачный цвет фона поверхности/контрола успех", - "enabled": false + "enabled": true }, "surfaceTransparentWarningHover": { - "value": "#FFFFFFFF", + "value": "#FA5F0505", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentWarningActive": { - "value": "#FFFFFFFF", + "value": "#FA5F051A", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentWarning": { - "value": "#FFFFFF", + "value": "rgba(250,95,5,0.06)", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentNegativeHover": { - "value": "#FFFFFFFF", + "value": "#F31B3105", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentNegativeActive": { - "value": "#FFFFFFFF", + "value": "#F31B311A", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentNegative": { - "value": "#FFFFFF", + "value": "rgba(243,27,49,0.06)", "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", - "enabled": false + "enabled": true }, "surfaceTransparentInfoHover": { "value": "#FFFFFFFF", diff --git a/packages/themes/sdds-themes/src/css/sdds_serv.module.css b/packages/themes/sdds-themes/src/css/sdds_serv.module.css index cbe781be1c..5ac9a99430 100644 --- a/packages/themes/sdds-themes/src/css/sdds_serv.module.css +++ b/packages/themes/sdds-themes/src/css/sdds_serv.module.css @@ -157,6 +157,15 @@ --surface-negative-hover: #FF475AFF; --surface-negative-active: #FF1F35FF; --surface-negative: #FF293E; + --surface-transparent-positive-hover: #1A9E323D; + --surface-transparent-positive-active: #1A9E320F; + --surface-transparent-positive: rgba(26,158,50,0.12); + --surface-transparent-warning-hover: #FA5F053D; + --surface-transparent-warning-active: #FA5F050F; + --surface-transparent-warning: rgba(250,95,5,0.12); + --surface-transparent-negative-hover: #FF293E3D; + --surface-transparent-negative-active: #FF293E0F; + --surface-transparent-negative: rgba(255,41,62,0.12); --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; @@ -480,6 +489,15 @@ --surface-negative-hover: #FF5263FF; --surface-negative-active: #FF142CFF; --surface-negative: #FF293E; + --surface-transparent-positive-hover: #1A9E3205; + --surface-transparent-positive-active: #1A9E321A; + --surface-transparent-positive: rgba(26,158,50,0.06); + --surface-transparent-warning-hover: #FA5F0505; + --surface-transparent-warning-active: #FA5F051A; + --surface-transparent-warning: rgba(250,95,5,0.06); + --surface-transparent-negative-hover: #F31B3105; + --surface-transparent-negative-active: #F31B311A; + --surface-transparent-negative: rgba(243,27,49,0.06); --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; diff --git a/packages/themes/sdds-themes/src/css/sdds_serv__dark.css b/packages/themes/sdds-themes/src/css/sdds_serv__dark.css index 604f102274..b9c8d8dc64 100644 --- a/packages/themes/sdds-themes/src/css/sdds_serv__dark.css +++ b/packages/themes/sdds-themes/src/css/sdds_serv__dark.css @@ -157,6 +157,15 @@ --surface-negative-hover: #FF475AFF; --surface-negative-active: #FF1F35FF; --surface-negative: #FF293E; + --surface-transparent-positive-hover: #1A9E323D; + --surface-transparent-positive-active: #1A9E320F; + --surface-transparent-positive: rgba(26,158,50,0.12); + --surface-transparent-warning-hover: #FA5F053D; + --surface-transparent-warning-active: #FA5F050F; + --surface-transparent-warning: rgba(250,95,5,0.12); + --surface-transparent-negative-hover: #FF293E3D; + --surface-transparent-negative-active: #FF293E0F; + --surface-transparent-negative: rgba(255,41,62,0.12); --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; diff --git a/packages/themes/sdds-themes/src/css/sdds_serv__light.css b/packages/themes/sdds-themes/src/css/sdds_serv__light.css index 400911f67d..47b1a8eb2a 100644 --- a/packages/themes/sdds-themes/src/css/sdds_serv__light.css +++ b/packages/themes/sdds-themes/src/css/sdds_serv__light.css @@ -157,6 +157,15 @@ --surface-negative-hover: #FF5263FF; --surface-negative-active: #FF142CFF; --surface-negative: #FF293E; + --surface-transparent-positive-hover: #1A9E3205; + --surface-transparent-positive-active: #1A9E321A; + --surface-transparent-positive: rgba(26,158,50,0.06); + --surface-transparent-warning-hover: #FA5F0505; + --surface-transparent-warning-active: #FA5F051A; + --surface-transparent-warning: rgba(250,95,5,0.06); + --surface-transparent-negative-hover: #F31B3105; + --surface-transparent-negative-active: #F31B311A; + --surface-transparent-negative: rgba(243,27,49,0.06); --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; diff --git a/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts b/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts index 211b54f71d..0f62c60db1 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts @@ -159,6 +159,15 @@ export const sdds_serv__dark = ([ --surface-negative-hover: #FF475AFF; --surface-negative-active: #FF1F35FF; --surface-negative: #FF293E; + --surface-transparent-positive-hover: #1A9E323D; + --surface-transparent-positive-active: #1A9E320F; + --surface-transparent-positive: rgba(26,158,50,0.12); + --surface-transparent-warning-hover: #FA5F053D; + --surface-transparent-warning-active: #FA5F050F; + --surface-transparent-warning: rgba(250,95,5,0.12); + --surface-transparent-negative-hover: #FF293E3D; + --surface-transparent-negative-active: #FF293E0F; + --surface-transparent-negative: rgba(255,41,62,0.12); --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; diff --git a/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts b/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts index f774cf1450..c85b0518be 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts @@ -159,6 +159,15 @@ export const sdds_serv__light = ([ --surface-negative-hover: #FF5263FF; --surface-negative-active: #FF142CFF; --surface-negative: #FF293E; + --surface-transparent-positive-hover: #1A9E3205; + --surface-transparent-positive-active: #1A9E321A; + --surface-transparent-positive: rgba(26,158,50,0.06); + --surface-transparent-warning-hover: #FA5F0505; + --surface-transparent-warning-active: #FA5F051A; + --surface-transparent-warning: rgba(250,95,5,0.06); + --surface-transparent-negative-hover: #F31B3105; + --surface-transparent-negative-active: #F31B311A; + --surface-transparent-negative: rgba(243,27,49,0.06); --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; diff --git a/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts b/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts index cb43bdf5d9..8b05deb3b5 100644 --- a/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts +++ b/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts @@ -471,6 +471,33 @@ export const surfaceNegativeActive = 'var(--surface-negative-active, #FF1F35FF)' /** Цвет фона поверхности/контрола ошибка */ export const surfaceNegative = 'var(--surface-negative, #FF293E)'; +/** Прозрачный цвет фона поверхности/контрола успех */ +export const surfaceTransparentPositiveHover = 'var(--surface-transparent-positive-hover, #1A9E323D)'; + +/** Прозрачный цвет фона поверхности/контрола успех */ +export const surfaceTransparentPositiveActive = 'var(--surface-transparent-positive-active, #1A9E320F)'; + +/** Прозрачный цвет фона поверхности/контрола успех */ +export const surfaceTransparentPositive = 'var(--surface-transparent-positive, rgba(26,158,50,0.12))'; + +/** Прозрачный цвет фона поверхности/контрола предупреждение */ +export const surfaceTransparentWarningHover = 'var(--surface-transparent-warning-hover, #FA5F053D)'; + +/** Прозрачный цвет фона поверхности/контрола предупреждение */ +export const surfaceTransparentWarningActive = 'var(--surface-transparent-warning-active, #FA5F050F)'; + +/** Прозрачный цвет фона поверхности/контрола предупреждение */ +export const surfaceTransparentWarning = 'var(--surface-transparent-warning, rgba(250,95,5,0.12))'; + +/** Прозрачный цвет фона поверхности/контрола предупреждение */ +export const surfaceTransparentNegativeHover = 'var(--surface-transparent-negative-hover, #FF293E3D)'; + +/** Прозрачный цвет фона поверхности/контрола предупреждение */ +export const surfaceTransparentNegativeActive = 'var(--surface-transparent-negative-active, #FF293E0F)'; + +/** Прозрачный цвет фона поверхности/контрола предупреждение */ +export const surfaceTransparentNegative = 'var(--surface-transparent-negative, rgba(255,41,62,0.12))'; + /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover, #1C1C1CFF)';