feat(themes): add surface transparent tokens to sdds

salute-developers · May 16, 2024 · e266fde · e266fde
1 parent 8867e1c
commit e266fde
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)';