EPMRPP-90266 || Add -base prefix for base CSS custom properties

README.md

@@ -94,11 +94,11 @@ Then just override the ui-kit CSS custom properties in your custom theme class:
 
 ```scss
 .my-custom-theme {
-  --rp-ui-kit-font-family-base: OpenSans, Segoe UI, Tahoma, sans-serif;
-  --rp-ui-kit-color-primary: green;
-  --rp-ui-kit-color-primary-hover: #69e569;
-  --rp-ui-kit-color-primary-focused: var(--rp-ui-kit-color-primary-hover);
-  --rp-ui-kit-color-primary-pressed: var(--rp-ui-kit-color-primary-hover);
+  --rp-ui-base-font-family: OpenSans, Segoe UI, Tahoma, sans-serif;
+  --rp-ui-color-primary: green;
+  --rp-ui-color-primary-hover: #69e569;
+  --rp-ui-color-primary-focused: var(--rp-ui-color-primary-hover);
+  --rp-ui-color-primary-pressed: var(--rp-ui-color-primary-hover);
 }
 ```
 

src/assets/styles/themes/base.scss

@@ -3,86 +3,85 @@
 @use "../fonts/index";
 @import "light";
 
-// TODO: Use corresponding naming to separate base DS variables from the theme-specific. Discuss with UX
 :root {
   /* colors */
 
-  --rp-ui-kit-bg-000: #ffffff;
-  --rp-ui-kit-bg-100: #f7f7f8;
-  --rp-ui-kit-bg-200: #eceff4;
-
-  --rp-ui-kit-error: #dc5959;
-  --rp-ui-kit-error-hover: #f24a4a;
-  --rp-ui-kit-error-pressed: #c54141;
-  --rp-ui-kit-error-focused: #ffb1b1;
-
-  --rp-ui-kit-topaz: #00829b;
-  --rp-ui-kit-topaz-hover: #009dbb;
-  --rp-ui-kit-topaz-focused: #00b0d1;
-  --rp-ui-kit-topaz-pressed: #00758c;
-  --rp-ui-kit-almost-black: #3f3f3f;
-
-  --rp-ui-kit-e-100: #e3e7ec;
-  --rp-ui-kit-e-200: #c1c7d0;
-  --rp-ui-kit-e-300: #a2aab5;
-  --rp-ui-kit-e-400: #8d95a1;
-
-  --rp-ui-kit-dark-bg: #101010;
-  --rp-ui-kit-dark-bg-solid-98: #141414;
-
-  --rp-ui-kit-dark-error: #ff4040;
-  --rp-ui-kit-dark-error-text: #ff6666;
-  --rp-ui-kit-dark-log-error: #ff3222;
-  --rp-ui-kit-dark-log-fatal: #c2352b;
-
-  --rp-ui-kit-dark-topaz-main: #1a9cb0;
-  --rp-ui-kit-dark-topaz-hover: #1cb0c7;
-  --rp-ui-kit-dark-topaz-focused: #1dbdd6;
-  --rp-ui-kit-dark-topaz-pressed: #9ee7f2;
-  --rp-ui-kit-dark-topaz-text: #3abcd0;
-  --rp-ui-kit-dark-topaz-additional: #00505d;
-
-  --rp-ui-kit-dark-e-50: #e8e8e8;
-  --rp-ui-kit-dark-e-100: #cfcfcf;
-  --rp-ui-kit-dark-e-150: #8f8f8f;
-  --rp-ui-kit-dark-e-200: #626262;
-  --rp-ui-kit-dark-e-300: #383838;
-  --rp-ui-kit-dark-e-400: #262626;
-  --rp-ui-kit-dark-e-500: #222222;
+  --rp-ui-base-bg-000: #ffffff;
+  --rp-ui-base-bg-100: #f7f7f8;
+  --rp-ui-base-bg-200: #eceff4;
+
+  --rp-ui-base-error: #dc5959;
+  --rp-ui-base-error-hover: #f24a4a;
+  --rp-ui-base-error-pressed: #c54141;
+  --rp-ui-base-error-focused: #ffb1b1;
+
+  --rp-ui-base-topaz: #00829b;
+  --rp-ui-base-topaz-hover: #009dbb;
+  --rp-ui-base-topaz-focused: #00b0d1;
+  --rp-ui-base-topaz-pressed: #00758c;
+  --rp-ui-base-almost-black: #3f3f3f;
+
+  --rp-ui-base-e-100: #e3e7ec;
+  --rp-ui-base-e-200: #c1c7d0;
+  --rp-ui-base-e-300: #a2aab5;
+  --rp-ui-base-e-400: #8d95a1;
+
+  --rp-ui-base-dark-bg: #101010;
+  --rp-ui-base-dark-bg-solid-98: #141414;
+
+  --rp-ui-base-dark-error: #ff4040;
+  --rp-ui-base-dark-error-text: #ff6666;
+  --rp-ui-base-dark-log-error: #ff3222;
+  --rp-ui-base-dark-log-fatal: #c2352b;
+
+  --rp-ui-base-dark-topaz-main: #1a9cb0;
+  --rp-ui-base-dark-topaz-hover: #1cb0c7;
+  --rp-ui-base-dark-topaz-focused: #1dbdd6;
+  --rp-ui-base-dark-topaz-pressed: #9ee7f2;
+  --rp-ui-base-dark-topaz-text: #3abcd0;
+  --rp-ui-base-dark-topaz-additional: #00505d;
+
+  --rp-ui-base-dark-e-50: #e8e8e8;
+  --rp-ui-base-dark-e-100: #cfcfcf;
+  --rp-ui-base-dark-e-150: #8f8f8f;
+  --rp-ui-base-dark-e-200: #626262;
+  --rp-ui-base-dark-e-300: #383838;
+  --rp-ui-base-dark-e-400: #262626;
+  --rp-ui-base-dark-e-500: #222222;
 
   // TODO: Ask UX team to add these colors to the color palette
-  --rp-ui-kit-sm-warning: #d78706;
-  --rp-ui-kit-sm-warning-line-100: #fceecb;
-  --rp-ui-kit-sm-warning-line-200: #fbe7b6;
-  --rp-ui-kit-sm-error: #db3549;
-  --rp-ui-kit-sm-error-line-100: #fccbcb;
-  --rp-ui-kit-sm-error-line-200: #ffc0bd;
-  --rp-ui-kit-sm-info-line-100: #ced3db;
-
-  --rp-ui-kit-defect-type-AB: #ffc208;
-
-  --rp-ui-kit-tag-value-text: #394db6;
-  --rp-ui-kit-tag-value-background: #ced8fc;
-  --rp-ui-kit-tag-key-text: #6f4599;
-  --rp-ui-kit-tag-key-background: #dac3e6;
-  --rp-ui-kit-system-issue-group: #3e7be6;
-  --rp-ui-kit-product-bug-group: #d32f2f;
-  --rp-ui-kit-automation-bug-group: #ffc208;
-  --rp-ui-kit-no-defect-bug-group: #76839b;
-  --rp-ui-kit-test-execution-status-passed: #3aa76d;
+  --rp-ui-base-sm-warning: #d78706;
+  --rp-ui-base-sm-warning-line-100: #fceecb;
+  --rp-ui-base-sm-warning-line-200: #fbe7b6;
+  --rp-ui-base-sm-error: #db3549;
+  --rp-ui-base-sm-error-line-100: #fccbcb;
+  --rp-ui-base-sm-error-line-200: #ffc0bd;
+  --rp-ui-base-sm-info-line-100: #ced3db;
+
+  --rp-ui-base-defect-type-AB: #ffc208;
+
+  --rp-ui-base-tag-value-text: #394db6;
+  --rp-ui-base-tag-value-background: #ced8fc;
+  --rp-ui-base-tag-key-text: #6f4599;
+  --rp-ui-base-tag-key-background: #dac3e6;
+  --rp-ui-base-system-issue-group: #3e7be6;
+  --rp-ui-base-product-bug-group: #d32f2f;
+  --rp-ui-base-automation-bug-group: #ffc208;
+  --rp-ui-base-no-defect-bug-group: #76839b;
+  --rp-ui-base-test-execution-status-passed: #3aa76d;
 
   /* shadows */
-  --rp-ui-kit-shadow: 0px 1px 3px rgba(55, 67, 98, 0.1);
-  --rp-ui-kit-shadow-hover: 0px 1px 3px rgba(55, 67, 98, 0.2);
-  --rp-ui-kit-shadow-secondary: 0 8px 40px rgba(0, 0, 0, 0.15);
+  --rp-ui-base-shadow: 0px 1px 3px rgba(55, 67, 98, 0.1);
+  --rp-ui-base-shadow-hover: 0px 1px 3px rgba(55, 67, 98, 0.2);
+  --rp-ui-base-shadow-secondary: 0 8px 40px rgba(0, 0, 0, 0.15);
 
   /* overlays */
-  --rp-ui-kit-overlay: rgba(141, 149, 161, 0.35);
-  --rp-ui-kit-overlay-light-cyan: rgba(208, 240, 241, 0.7);
+  --rp-ui-base-overlay: rgba(141, 149, 161, 0.35);
+  --rp-ui-base-overlay-light-cyan: rgba(208, 240, 241, 0.7);
 
   /* fonts */
-  --rp-ui-kit-font-family-base: Roboto, Arial, Helvetica, sans-serif;
-  --rp-ui-kit-font-family-heading: OpenSans, Segoe UI, Tahoma, sans-serif;
+  --rp-ui-base-font-family: Roboto, Arial, Helvetica, sans-serif;
+  --rp-ui-base-font-family-heading: OpenSans, Segoe UI, Tahoma, sans-serif;
 
   // Default theme if the theme provider doesn't used
   @include light-theme;

src/assets/styles/themes/dark.scss

@@ -1,37 +1,37 @@
 .rp-ui-kit-theme-dark {
-  --rp-ui-kit-color-bg: var(--rp-ui-kit-dark-bg);
-  --rp-ui-kit-color-bg-2: var(--rp-ui-kit-dark-bg);
-  --rp-ui-kit-color-bg-3: var(--rp-ui-kit-dark-bg-solid-98);
+  --rp-ui-color-bg: var(--rp-ui-base-dark-bg);
+  --rp-ui-color-bg-2: var(--rp-ui-base-dark-bg);
+  --rp-ui-color-bg-3: var(--rp-ui-base-dark-bg-solid-98);
 
-  --rp-ui-kit-color-primary: var(--rp-ui-kit-dark-topaz-main);
-  --rp-ui-kit-color-primary-hover: var(--rp-ui-kit-dark-topaz-hover);
-  --rp-ui-kit-color-primary-focused: var(--rp-ui-kit-dark-topaz-focused);
-  --rp-ui-kit-color-primary-pressed: var(--rp-ui-kit-dark-topaz-pressed);
-  --rp-ui-kit-color-primary-text: var(--rp-ui-kit-dark-topaz-text);
+  --rp-ui-color-primary: var(--rp-ui-base-dark-topaz-main);
+  --rp-ui-color-primary-hover: var(--rp-ui-base-dark-topaz-hover);
+  --rp-ui-color-primary-focused: var(--rp-ui-base-dark-topaz-focused);
+  --rp-ui-color-primary-pressed: var(--rp-ui-base-dark-topaz-pressed);
+  --rp-ui-color-primary-text: var(--rp-ui-base-dark-topaz-text);
 
   // TODO: Discuss with UX team these colors for dark theme
-  --rp-ui-kit-color-error: var(--rp-ui-kit-dark-error);
-  --rp-ui-kit-color-error-hover: var(--rp-ui-kit-error-hover);
-  --rp-ui-kit-color-error-pressed: var(--rp-ui-kit-error-pressed);
-  --rp-ui-kit-color-error-focused: var(--rp-ui-kit-error-focused);
+  --rp-ui-color-error: var(--rp-ui-base-dark-error);
+  --rp-ui-color-error-hover: var(--rp-ui-base-error-hover);
+  --rp-ui-color-error-pressed: var(--rp-ui-base-error-pressed);
+  --rp-ui-color-error-focused: var(--rp-ui-base-error-focused);
 
-  --rp-ui-kit-color-text: var(--rp-ui-kit-dark-e-50);
-  --rp-ui-kit-color-text-2: var(--rp-ui-kit-dark-e-100);
-  --rp-ui-kit-color-text-3: var(--rp-ui-kit-bg-000);
+  --rp-ui-color-text: var(--rp-ui-base-dark-e-50);
+  --rp-ui-color-text-2: var(--rp-ui-base-dark-e-100);
+  --rp-ui-color-text-3: var(--rp-ui-base-bg-000);
 
-  --rp-ui-kit-color-field-bg: var(--rp-ui-kit-dark-e-400);
-  --rp-ui-kit-color-field-bg-2: var(--rp-ui-kit-dark-e-400);
-  --rp-ui-kit-color-field-border: var(--rp-ui-kit-dark-e-400);
-  --rp-ui-kit-color-field-border-2: var(--rp-ui-kit-dark-e-100);
-  --rp-ui-kit-color-field-border-2-hover: var(--rp-ui-kit-dark-e-50);
-  --rp-ui-kit-color-field-hover: var(--rp-ui-kit-e-200);
-  --rp-ui-kit-color-field-hover-2: var(--rp-ui-kit-e-300);
-  --rp-ui-kit-color-field-opened: var(--rp-ui-kit-e-200);
-  --rp-ui-kit-color-field-placeholder: var(--rp-ui-kit-dark-e-200);
+  --rp-ui-color-field-bg: var(--rp-ui-base-dark-e-400);
+  --rp-ui-color-field-bg-2: var(--rp-ui-base-dark-e-400);
+  --rp-ui-color-field-border: var(--rp-ui-base-dark-e-400);
+  --rp-ui-color-field-border-2: var(--rp-ui-base-dark-e-100);
+  --rp-ui-color-field-border-2-hover: var(--rp-ui-base-dark-e-50);
+  --rp-ui-color-field-hover: var(--rp-ui-base-e-200);
+  --rp-ui-color-field-hover-2: var(--rp-ui-base-e-300);
+  --rp-ui-color-field-opened: var(--rp-ui-base-e-200);
+  --rp-ui-color-field-placeholder: var(--rp-ui-base-dark-e-200);
 
-  --rp-ui-kit-color-radio-cheked: var(--rp-ui-kit-dark-topaz-main);
+  --rp-ui-color-radio-cheked: var(--rp-ui-base-dark-topaz-main);
 
-  --rp-ui-kit-color-disabled: var(--rp-ui-kit-dark-e-100);
+  --rp-ui-color-disabled: var(--rp-ui-base-dark-e-100);
 
-  --rp-ui-kit-opacity-default: 50%;
+  --rp-ui-opacity-default: 50%;
 }

src/assets/styles/themes/light.scss

@@ -1,38 +1,38 @@
 @mixin light-theme {
-  --rp-ui-kit-color-bg: var(--rp-ui-kit-bg-000);
-  --rp-ui-kit-color-bg-2: var(--rp-ui-kit-bg-100);
-  --rp-ui-kit-color-bg-3: var(--rp-ui-kit-bg-200);
-
-  --rp-ui-kit-color-primary: var(--rp-ui-kit-topaz);
-  --rp-ui-kit-color-primary-hover: var(--rp-ui-kit-topaz-hover);
-  --rp-ui-kit-color-primary-focused: var(--rp-ui-kit-topaz-focused);
-  --rp-ui-kit-color-primary-pressed: var(--rp-ui-kit-topaz-pressed);
-  --rp-ui-kit-color-primary-text: var(--rp-ui-kit-topaz);
-
-  --rp-ui-kit-color-error: var(--rp-ui-kit-error);
-  --rp-ui-kit-color-error-hover: var(--rp-ui-kit-error-hover);
-  --rp-ui-kit-color-error-pressed: var(--rp-ui-kit-error-pressed);
-  --rp-ui-kit-color-error-focused: var(--rp-ui-kit-error-focused);
-
-  --rp-ui-kit-color-text: var(--rp-ui-kit-almost-black);
-  --rp-ui-kit-color-text-2: var(--rp-ui-kit-almost-black);
-  --rp-ui-kit-color-text-3: var(--rp-ui-kit-almost-black);
-
-  --rp-ui-kit-color-field-bg: var(--rp-ui-kit-bg-000);
-  --rp-ui-kit-color-field-bg-2: var(--rp-ui-kit-bg-100);
-  --rp-ui-kit-color-field-border: var(--rp-ui-kit-e-200);
-  --rp-ui-kit-color-field-border-2: var(--rp-ui-kit-e-300);
-  --rp-ui-kit-color-field-border-2-hover: var(--rp-ui-kit-e-400);
-  --rp-ui-kit-color-field-hover: var(--rp-ui-kit-e-300);
-  --rp-ui-kit-color-field-hover-2: var(--rp-ui-kit-e-400);
-  --rp-ui-kit-color-field-opened: var(--rp-ui-kit-topaz-pressed);
-  --rp-ui-kit-color-field-placeholder: var(--rp-ui-kit-almost-black);
-
-  --rp-ui-kit-color-radio-cheked: var(--rp-ui-kit-topaz-pressed);
-
-  --rp-ui-kit-color-disabled: var(--rp-ui-kit-e-300);
-
-  --rp-ui-kit-opacity-default: 30%;
+  --rp-ui-color-bg: var(--rp-ui-base-bg-000);
+  --rp-ui-color-bg-2: var(--rp-ui-base-bg-100);
+  --rp-ui-color-bg-3: var(--rp-ui-base-bg-200);
+
+  --rp-ui-color-primary: var(--rp-ui-base-topaz);
+  --rp-ui-color-primary-hover: var(--rp-ui-base-topaz-hover);
+  --rp-ui-color-primary-focused: var(--rp-ui-base-topaz-focused);
+  --rp-ui-color-primary-pressed: var(--rp-ui-base-topaz-pressed);
+  --rp-ui-color-primary-text: var(--rp-ui-base-topaz);
+
+  --rp-ui-color-error: var(--rp-ui-base-error);
+  --rp-ui-color-error-hover: var(--rp-ui-base-error-hover);
+  --rp-ui-color-error-pressed: var(--rp-ui-base-error-pressed);
+  --rp-ui-color-error-focused: var(--rp-ui-base-error-focused);
+
+  --rp-ui-color-text: var(--rp-ui-base-almost-black);
+  --rp-ui-color-text-2: var(--rp-ui-base-almost-black);
+  --rp-ui-color-text-3: var(--rp-ui-base-almost-black);
+
+  --rp-ui-color-field-bg: var(--rp-ui-base-bg-000);
+  --rp-ui-color-field-bg-2: var(--rp-ui-base-bg-100);
+  --rp-ui-color-field-border: var(--rp-ui-base-e-200);
+  --rp-ui-color-field-border-2: var(--rp-ui-base-e-300);
+  --rp-ui-color-field-border-2-hover: var(--rp-ui-base-e-400);
+  --rp-ui-color-field-hover: var(--rp-ui-base-e-300);
+  --rp-ui-color-field-hover-2: var(--rp-ui-base-e-400);
+  --rp-ui-color-field-opened: var(--rp-ui-base-topaz-pressed);
+  --rp-ui-color-field-placeholder: var(--rp-ui-base-almost-black);
+
+  --rp-ui-color-radio-cheked: var(--rp-ui-base-topaz-pressed);
+
+  --rp-ui-color-disabled: var(--rp-ui-base-e-300);
+
+  --rp-ui-opacity-default: 30%;
 }
 
 .rp-ui-kit-theme-light {

src/components/bubblesLoader/bubblesLoader.module.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   &.color-topaz .bubble {
-    background-color: var(--rp-ui-kit-dark-topaz-main);
+    background-color: var(--rp-ui-base-dark-topaz-main);
   }
 }
 
@@ -11,7 +11,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--rp-ui-kit-bg-000);
+  background: var(--rp-ui-base-bg-000);
   transform: scale(0.3);
   animation: bubbles 2.5s infinite linear;
 }