Merge pull request #2419 from epam/feat/use_contrast_tokens_from_figma

Use "*-contrast" tokens directly from Figma. Remove hardcoded values.…

epam-assets/theme/theme_electric.scss

@@ -6,23 +6,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-electric {
-    /* contrast colors */
-    --uui-primary-contrast: var(--white);
-
-    --uui-accent-contrast: var(--white);
-
-    --uui-secondary-contrast: var(--white);
-
-    --uui-critical-contrast: var(--white);
-
-    --uui-info-contrast: var(--white);
-
-    --uui-success-contrast: var(--white);
-
-    --uui-warning-contrast: var(--uui-neutral-80);
-
-    --uui-error-contrast: var(--white);
-
     @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;

epam-assets/theme/theme_loveship.scss

@@ -5,23 +5,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-loveship {
-    /* contrast colors */
-    --uui-primary-contrast: var(--white);
-
-    --uui-accent-contrast: var(--white);
-
-    --uui-secondary-contrast: var(--white);
-
-    --uui-critical-contrast: var(--white);
-
-    --uui-info-contrast: var(--white);
-
-    --uui-success-contrast: var(--white);
-
-    --uui-warning-contrast: var(--night800);
-
-    --uui-error-contrast: var(--white);
-
     @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;

epam-assets/theme/theme_loveship_dark.scss

@@ -5,23 +5,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-loveship_dark {
-    /* contrast colors */
-    --uui-primary-contrast: var(--white);
-
-    --uui-accent-contrast: var(--white);
-
-    --uui-secondary-contrast: var(--white);
-
-    --uui-critical-contrast: var(--white);
-
-    --uui-info-contrast: var(--white);
-
-    --uui-success-contrast: var(--white);
-
-    --uui-warning-contrast: var(--night700);
-
-    --uui-error-contrast: var(--white);
-
     @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;

epam-assets/theme/theme_promo.scss

@@ -5,23 +5,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-promo {
-    /* contrast colors */
-    --uui-primary-contrast: var(--white);
-
-    --uui-accent-contrast: var(--white);
-
-    --uui-secondary-contrast: var(--white);
-
-    --uui-critical-contrast: var(--white);
-
-    --uui-info-contrast: var(--white);
-
-    --uui-success-contrast: var(--white);
-
-    --uui-warning-contrast: var(--gray80);
-
-    --uui-error-contrast: var(--white);
-
     @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;

epam-assets/theme/tokens/_theme_electric.scss

@@ -131,6 +131,7 @@
     --uui-accent-50: var(--emerald-50);
     --uui-accent-60: var(--emerald-60);
     --uui-accent-70: var(--emerald-70);
+    --uui-accent-contrast: var(--white);
 
     // "core/semantic/critical-"
     --uui-critical-5: var(--fire-5);
@@ -139,6 +140,7 @@
     --uui-critical-50: var(--fire-50);
     --uui-critical-60: var(--fire-60);
     --uui-critical-70: var(--fire-70);
+    --uui-critical-contrast: var(--white);
 
     // "core/semantic/error-"
     --uui-error-5: var(--fire-5);
@@ -147,6 +149,7 @@
     --uui-error-50: var(--fire-50);
     --uui-error-60: var(--fire-60);
     --uui-error-70: var(--fire-70);
+    --uui-error-contrast: var(--white);
 
     // "core/semantic/info-"
     --uui-info-5: var(--electric-5);
@@ -155,6 +158,7 @@
     --uui-info-50: var(--electric-50);
     --uui-info-60: var(--electric-60);
     --uui-info-70: var(--electric-70);
+    --uui-info-contrast: var(--white);
 
     // "core/semantic/primary-"
     --uui-primary-5: var(--electric-5);
@@ -163,6 +167,7 @@
     --uui-primary-50: var(--electric-50);
     --uui-primary-60: var(--electric-60);
     --uui-primary-70: var(--electric-70);
+    --uui-primary-contrast: var(--white);
 
     // "core/semantic/secondary-"
     --uui-secondary-5: var(--night100);
@@ -171,6 +176,7 @@
     --uui-secondary-50: var(--night600);
     --uui-secondary-60: var(--night700);
     --uui-secondary-70: var(--night800);
+    --uui-secondary-contrast: var(--white);
 
     // "core/semantic/success-"
     --uui-success-5: var(--emerald-5);
@@ -179,6 +185,7 @@
     --uui-success-50: var(--emerald-50);
     --uui-success-60: var(--emerald-60);
     --uui-success-70: var(--emerald-70);
+    --uui-success-contrast: var(--white);
 
     // "core/semantic/warning-"
     --uui-warning-5: var(--sun-5);
@@ -187,6 +194,7 @@
     --uui-warning-50: var(--sun-50);
     --uui-warning-60: var(--sun-60);
     --uui-warning-70: var(--sun-70);
+    --uui-warning-contrast: var(--uui-neutral-80);
 
     /********************/
     /*** Core Neutral ***/

epam-assets/theme/tokens/_theme_loveship_dark.scss

@@ -130,6 +130,7 @@
     --uui-accent-50: var(--grass-50);
     --uui-accent-60: var(--grass-60);
     --uui-accent-70: var(--grass-70);
+    --uui-accent-contrast: var(--white);
 
     // "core/semantic/critical-"
     --uui-critical-5: var(--fire-5);
@@ -138,6 +139,7 @@
     --uui-critical-50: var(--fire-50);
     --uui-critical-60: var(--fire-60);
     --uui-critical-70: var(--fire-70);
+    --uui-critical-contrast: var(--white);
 
     // "core/semantic/error-"
     --uui-error-5: var(--fire-5);
@@ -146,6 +148,7 @@
     --uui-error-50: var(--fire-50);
     --uui-error-60: var(--fire-60);
     --uui-error-70: var(--fire-70);
+    --uui-error-contrast: var(--white);
 
     // "core/semantic/info-"
     --uui-info-5: var(--sky-5);
@@ -154,6 +157,7 @@
     --uui-info-50: var(--sky-50);
     --uui-info-60: var(--sky-60);
     --uui-info-70: var(--sky-70);
+    --uui-info-contrast: var(--white);
 
     // "core/semantic/primary-"
     --uui-primary-5: var(--sky-5);
@@ -162,6 +166,7 @@
     --uui-primary-50: var(--sky-50);
     --uui-primary-60: var(--sky-60);
     --uui-primary-70: var(--sky-70);
+    --uui-primary-contrast: var(--white);
 
     // "core/semantic/secondary-"
     --uui-secondary-5: var(--night800);
@@ -170,6 +175,7 @@
     --uui-secondary-50: var(--night500);
     --uui-secondary-60: var(--night400);
     --uui-secondary-70: var(--night300);
+    --uui-secondary-contrast: var(--white);
 
     // "core/semantic/success-"
     --uui-success-5: var(--grass-5);
@@ -178,6 +184,7 @@
     --uui-success-50: var(--grass-50);
     --uui-success-60: var(--grass-60);
     --uui-success-70: var(--grass-70);
+    --uui-success-contrast: var(--white);
 
     // "core/semantic/warning-"
     --uui-warning-5: var(--sun-5);
@@ -186,6 +193,7 @@
     --uui-warning-50: var(--sun-50);
     --uui-warning-60: var(--sun-60);
     --uui-warning-70: var(--sun-70);
+    --uui-warning-contrast: var(--night700);
 
     /********************/
     /*** Core Neutral ***/

epam-assets/theme/tokens/_theme_loveship_light.scss

@@ -130,6 +130,7 @@
     --uui-accent-50: var(--grass-50);
     --uui-accent-60: var(--grass-60);
     --uui-accent-70: var(--grass-70);
+    --uui-accent-contrast: var(--white);
 
     // "core/semantic/critical-"
     --uui-critical-5: var(--fire-5);
@@ -138,6 +139,7 @@
     --uui-critical-50: var(--fire-50);
     --uui-critical-60: var(--fire-60);
     --uui-critical-70: var(--fire-70);
+    --uui-critical-contrast: var(--white);
 
     // "core/semantic/error-"
     --uui-error-5: var(--fire-5);
@@ -146,6 +148,7 @@
     --uui-error-50: var(--fire-50);
     --uui-error-60: var(--fire-60);
     --uui-error-70: var(--fire-70);
+    --uui-error-contrast: var(--white);
 
     // "core/semantic/info-"
     --uui-info-5: var(--sky-5);
@@ -154,6 +157,7 @@
     --uui-info-50: var(--sky-50);
     --uui-info-60: var(--sky-60);
     --uui-info-70: var(--sky-70);
+    --uui-info-contrast: var(--white);
 
     // "core/semantic/primary-"
     --uui-primary-5: var(--sky-5);
@@ -162,6 +166,7 @@
     --uui-primary-50: var(--sky-50);
     --uui-primary-60: var(--sky-60);
     --uui-primary-70: var(--sky-70);
+    --uui-primary-contrast: var(--white);
 
     // "core/semantic/secondary-"
     --uui-secondary-5: var(--night100);
@@ -170,6 +175,7 @@
     --uui-secondary-50: var(--night600);
     --uui-secondary-60: var(--night700);
     --uui-secondary-70: var(--night800);
+    --uui-secondary-contrast: var(--white);
 
     // "core/semantic/success-"
     --uui-success-5: var(--grass-5);
@@ -178,6 +184,7 @@
     --uui-success-50: var(--grass-50);
     --uui-success-60: var(--grass-60);
     --uui-success-70: var(--grass-70);
+    --uui-success-contrast: var(--white);
 
     // "core/semantic/warning-"
     --uui-warning-5: var(--sun-5);
@@ -186,6 +193,7 @@
     --uui-warning-50: var(--sun-50);
     --uui-warning-60: var(--sun-60);
     --uui-warning-70: var(--sun-70);
+    --uui-warning-contrast: var(--night800);
 
     /********************/
     /*** Core Neutral ***/

epam-assets/theme/tokens/_theme_promo.scss

@@ -130,6 +130,7 @@
     --uui-accent-50: var(--green-50);
     --uui-accent-60: var(--green-60);
     --uui-accent-70: var(--green-70);
+    --uui-accent-contrast: var(--white);
 
     // "core/semantic/critical-"
     --uui-critical-5: var(--red-5);
@@ -138,6 +139,7 @@
     --uui-critical-50: var(--red-50);
     --uui-critical-60: var(--red-60);
     --uui-critical-70: var(--red-70);
+    --uui-critical-contrast: var(--white);
 
     // "core/semantic/error-"
     --uui-error-5: var(--red-5);
@@ -146,6 +148,7 @@
     --uui-error-50: var(--red-50);
     --uui-error-60: var(--red-60);
     --uui-error-70: var(--red-70);
+    --uui-error-contrast: var(--white);
 
     // "core/semantic/info-"
     --uui-info-5: var(--blue-5);
@@ -154,6 +157,7 @@
     --uui-info-50: var(--blue-50);
     --uui-info-60: var(--blue-60);
     --uui-info-70: var(--blue-70);
+    --uui-info-contrast: var(--white);
 
     // "core/semantic/primary-"
     --uui-primary-5: var(--blue-5);
@@ -162,6 +166,7 @@
     --uui-primary-50: var(--blue-50);
     --uui-primary-60: var(--blue-60);
     --uui-primary-70: var(--blue-70);
+    --uui-primary-contrast: var(--white);
 
     // "core/semantic/secondary-"
     --uui-secondary-5: var(--gray10);
@@ -170,6 +175,7 @@
     --uui-secondary-50: var(--gray60);
     --uui-secondary-60: var(--gray70);
     --uui-secondary-70: var(--gray80);
+    --uui-secondary-contrast: var(--white);
 
     // "core/semantic/success-"
     --uui-success-5: var(--green-5);
@@ -178,6 +184,7 @@
     --uui-success-50: var(--green-50);
     --uui-success-60: var(--green-60);
     --uui-success-70: var(--green-70);
+    --uui-success-contrast: var(--white);
 
     // "core/semantic/warning-"
     --uui-warning-5: var(--amber-5);
@@ -186,6 +193,7 @@
     --uui-warning-50: var(--amber-50);
     --uui-warning-60: var(--amber-60);
     --uui-warning-70: var(--amber-70);
+    --uui-warning-contrast: var(--gray80);
 
     /********************/
     /*** Core Neutral ***/