Merge pull request #1739 from epam/themes/update-variables

[Themes]: Update variables
epam · Nov 13, 2023 · f558288 · f558288
2 parents ac77c2a + 64b9388
commit f558288
Show file tree

Hide file tree

Showing 81 changed files with 689 additions and 788 deletions.
diff --git a/app/src/common/apiReference/TypeRefSection.module.scss b/app/src/common/apiReference/TypeRefSection.module.scss
@@ -6,7 +6,7 @@
     width: 960px;
 
     :global(.asterisk) {
-        color: var(--uui-labeled-input-asterisk);
+        color: var(--uui-labeled_input-asterisk);
         font-family: var(--font-semibold);
     }
 }
diff --git a/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx b/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { PickerInput, DataPickerRow, PickerItem, FlexCell } from '@epam/uui';
-import { DataRowProps, LazyDataSourceApiRequest, useLazyDataSource, useUuiContext } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
+import { DataRowProps, DataSourceState, LazyDataSourceApiRequest, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { PickerInput, DataPickerRow, PickerItem, FlexCell } from '@epam/uui';
 
 export default function LazyPersonsMultiPickerWithCustomUserRow() {
     const svc = useUuiContext();
@@ -18,13 +18,13 @@ export default function LazyPersonsMultiPickerWithCustomUserRow() {
         [],
     );
 
-    const renderUserRow = (props: DataRowProps<Person, number>) => (
+    const renderUserRow = (props: DataRowProps<Person, number>, dsState: DataSourceState) => (
         <DataPickerRow
             { ...props }
             key={ props.rowKey }
             alignActions="center"
             padding="12"
-            renderItem={ (item) => <PickerItem { ...props } title={ item.name } subtitle={ item.jobTitle } avatarUrl={ item.avatarUrl } /> }
+            renderItem={ (item) => <PickerItem { ...props } dataSourceState={ dsState } title={ item.name } subtitle={ item.jobTitle } avatarUrl={ item.avatarUrl } /> }
         />
     );
 

diff --git a/app/src/docs/_props/epam-promo/components/navigation/anchor.module.scss b/app/src/docs/_props/epam-promo/components/navigation/anchor.module.scss
@@ -1,5 +1,5 @@
 .panel {
-    border: 1px solid var(--uui-control-border-readonly);
+    border: 1px solid var(--uui-control-border-disabled);
 
     .icon-row {
         padding: 0 6px;
@@ -38,7 +38,7 @@
         }
 
         .text {
-            color: var(--uui-control-label-disabled);
+            color: var(--uui-text-disabled);
         }
     }
 }
diff --git a/app/src/docs/_props/loveship/components/navigation/anchor.module.scss b/app/src/docs/_props/loveship/components/navigation/anchor.module.scss
@@ -1,5 +1,5 @@
 .panel {
-    border: 1px solid var(--uui-control-border-readonly);
+    border: 1px solid var(--uui-control-border-disabled);
 
     .icon-row {
         padding: 0 6px;
@@ -38,7 +38,7 @@
         }
 
         .text {
-            color: var(--uui-control-label-disabled);
+            color: var(--uui-text-disabled);
         }
     }
 }
diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss
@@ -236,39 +236,26 @@
     --uui-icon-active: var(--uui-neutral-100);
     --uui-icon-disabled: var(--uui-neutral-40);
 
-    --uui-scroll_bars-bg: var(--uui-neutral-40);
-    --uui-scroll_bars-bg-active: var(--uui-neutral-60);
-
     --uui-control-bg: var(--uui-surface-main);
     --uui-control-bg-hover: var(--uui-neutral-60);
     --uui-control-bg-disabled: var(--uui-neutral-5);
-    --uui-control-bg-readonly: var(--uui-neutral-5);
 
     --uui-control-border: var(--uui-neutral-40);
     --uui-control-border-hover: var(--uui-neutral-60);
+    --uui-control-border-focus: var(--uui-primary-50);
     --uui-control-border-disabled: var(--uui-neutral-30);
-    --uui-control-border-readonly: var(--uui-neutral-30);
-    --uui-control-border-checked: var(--uui-primary-50);
-
-    --uui-control-label: var(--uui-text-primary);
-    --uui-control-label-disabled: var(--uui-text-disabled);
 
     --uui-control-placeholder: var(--uui-neutral-50);
 
     --uui-control-text: var(--uui-text-primary);
-    --uui-control-text-disabled: var(--uui-text-disabled);
+    --uui-control-text-disabled: var(--uui-text-tertiary);
 
     --uui-control-icon: var(--uui-neutral-50);
     --uui-control-icon-disabled: var(--uui-neutral-50);
 
-    --uui-control-checkbox-icon: var(--uui-neutral-0);
-
     --uui-outline-focus: #008ACE80;
 
-    --uui-search_result-bg-highlight: var(--uui-warning-10);
-
     --uui-skeleton: var(--uui-neutral-40);
-    --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
 
     --uui-border-radius: 3px;
     --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);

diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss
@@ -268,39 +268,26 @@
 
     // TODO: should be updated
 
-    --uui-scroll_bars-bg: var(--uui-neutral-40);
-    --uui-scroll_bars-bg-active: var(--uui-neutral-60);
-
     --uui-control-bg: var(--uui-surface-main);
     --uui-control-bg-hover: var(--uui-neutral-60);
     --uui-control-bg-disabled: var(--uui-neutral-5);
-    --uui-control-bg-readonly: var(--uui-neutral-5);
 
     --uui-control-border: var(--uui-neutral-40);
     --uui-control-border-hover: var(--uui-neutral-60);
+    --uui-control-border-focus: var(--uui-primary-50);
     --uui-control-border-disabled: var(--uui-neutral-30);
-    --uui-control-border-readonly: var(--uui-neutral-30);
-    --uui-control-border-checked: var(--uui-primary-50);
-
-    --uui-control-label: var(--uui-text-primary);
-    --uui-control-label-disabled: var(--uui-text-disabled);
 
     --uui-control-placeholder: var(--uui-neutral-50);
 
-    --uui-control-text: var(--uui-neutral-80);
-    --uui-control-text-disabled: var(--uui-neutral-50);
+    --uui-control-text: var(--uui-text-primary);
+    --uui-control-text-disabled: var(--uui-text-tertiary);
 
     --uui-control-icon: var(--uui-neutral-50);
     --uui-control-icon-disabled: var(--uui-neutral-50);
 
-    --uui-control-checkbox-icon: var(--uui-neutral-0);
-
     --uui-outline-focus: #008ACE80;
 
-    --uui-search_result-bg-highlight: var(--uui-warning-10);
-
     --uui-skeleton: var(--uui-neutral-40);
-    --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
 
     --uui-border-radius: 3px;
     --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
@@ -616,20 +603,20 @@
 
     .uui-icon_button.uui-color-neutral,
     .uui-icon_button.uui-color-night600 {
-        --uui-icon-btn: var(--uui-neutral-60);
-        --uui-icon-btn-hover: var(--uui-neutral-70);
-        --uui-icon-btn-active: var(--uui-neutral-80);
+        --uui-icon_btn: var(--uui-neutral-60);
+        --uui-icon_btn-hover: var(--uui-neutral-70);
+        --uui-icon_btn-active: var(--uui-neutral-80);
     }
 
     .uui-icon_button.uui-color-secondary {
-        --uui-icon-btn: var(--uui-neutral-50);
-        --uui-icon-btn-hover: var(--uui-neutral-60);
-        --uui-icon-btn-active: var(--uui-neutral-70);
+        --uui-icon_btn: var(--uui-neutral-50);
+        --uui-icon_btn-hover: var(--uui-neutral-60);
+        --uui-icon_btn-active: var(--uui-neutral-70);
     }
 
     .uui-icon_button.uui-color-white {
-        --uui-icon-btn-hover: var(--uui-neutral-20);
-        --uui-icon-btn-active: var(--uui-neutral-30);
+        --uui-icon_btn-hover: var(--uui-neutral-20);
+        --uui-icon_btn-active: var(--uui-neutral-30);
     }
 
     /* TooltipContainer */

diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
@@ -225,47 +225,35 @@
     --uui-icon: var(--uui-neutral-10);
     --uui-icon-hover: var(--uui-neutral-5);
     --uui-icon-active: var(--uui-neutral-5);
-    --uui-icon-disabled: var(--uui-neutral-50);
-
-    --uui-scroll_bars-bg: var(--uui-neutral-40);
-    --uui-scroll_bars-bg-active: var(--uui-neutral-30);
+    --uui-icon-disabled: var(--uui-neutral-30);
 
     --uui-control-bg: var(--uui-surface-main);
     --uui-control-bg-hover: var(--uui-neutral-60);
     --uui-control-bg-disabled: var(--uui-neutral-60);
-    --uui-control-bg-readonly: var(--uui-neutral-60);
 
     --uui-control-border: var(--uui-neutral-40);
     --uui-control-border-hover: var(--uui-neutral-20);
+    --uui-control-border-focus: var(--uui-primary-60);
     --uui-control-border-disabled: var(--uui-neutral-40);
-    --uui-control-border-readonly: var(--uui-neutral-40);
-    --uui-control-border-checked: var(--uui-primary-60);
-
-    --uui-control-label: var(--uui-text-primary);
-    --uui-control-label-disabled: var(--uui-text-disabled);
 
-    --uui-control-placeholder: var(--uui-text-tertiary);
+    --uui-control-placeholder: var(--uui-neutral-30);
 
     --uui-control-text: var(--uui-text-primary);
-    --uui-control-text-disabled: var(--uui-text-disabled);
+    --uui-control-text-disabled: var(--uui-text-tertiary);
 
     --uui-control-icon: var(--uui-neutral-30);
     --uui-control-icon-disabled: var(--uui-neutral-30);
 
-    --uui-control-checkbox-icon: var(--white);
-
     --uui-outline-focus: #008ACE80;
 
-    --uui-search_result-bg-highlight: var(--uui-warning-20);
+    --uui-skeleton: var(--uui-neutral-30);
 
-    --uui-skeleton: var(--uui-neutral-40);
-    --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-40) 50%, var(--uui-neutral-40) 100%);
-
-    --uui-border-radius: 3px;
     --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
     --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
     --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
 
+    --uui-border-radius: 3px;
+
     /* core variables end */
 
     /* ------------------------------------ */
@@ -622,36 +610,36 @@
     /* IconButton */
 
     .uui-icon_button.uui-color-info {
-        --uui-icon-btn: var(--uui-color-60);
-        --uui-icon-btn-hover: var(--uui-color-70);
-        --uui-icon-btn-active: var(--uui-color-70);
+        --uui-icon_btn: var(--uui-color-60);
+        --uui-icon_btn-hover: var(--uui-color-70);
+        --uui-icon_btn-active: var(--uui-color-70);
     }
 
     .uui-icon_button.uui-color-secondary {
-        --uui-icon-btn: var(--uui-neutral-40);
-        --uui-icon-btn-hover: var(--uui-neutral-30);
-        --uui-icon-btn-active: var(--uui-neutral-30);
+        --uui-icon_btn: var(--uui-neutral-40);
+        --uui-icon_btn-hover: var(--uui-neutral-30);
+        --uui-icon_btn-active: var(--uui-neutral-30);
     }
 
     /* LinkButton */
 
     .uui-link_button.uui-color-contrast {
-        --uui-link_button-text: var(--uui-neutral-0);
-        --uui-link_button-text-hover: var(--uui-neutral-5);
-        --uui-link_button-text-active: var(--uui-neutral-10);
+        --uui-link_btn-text: var(--uui-neutral-0);
+        --uui-link_btn-text-hover: var(--uui-neutral-5);
+        --uui-link_btn-text-active: var(--uui-neutral-10);
     }
 
     .uui-link_button.uui-color-primary {
-        --uui-link_button-text: var(--uui-color-60);
-        --uui-link_button-text-hover: var(--uui-color-70);
-        --uui-link_button-text-disabled: var(--uui-text-disabled);
+        --uui-link_btn-text: var(--uui-color-60);
+        --uui-link_btn-text-hover: var(--uui-color-70);
+        --uui-link_btn-text-disabled: var(--uui-text-disabled);
     }
 
     /*  TubButton */
 
     .uui-tab-button {
-        --uui-tab_button-text-hover: var(--uui-primary-60);
-        --uui-tab_button-text-active: var(--uui-primary-60);
+        --uui-tab_btn-text-hover: var(--uui-primary-60);
+        --uui-tab_btn-text-active: var(--uui-primary-60);
     }
 
     /* MainMenu */
@@ -661,12 +649,12 @@
         --uui-main_menu-text-active: var(--uui-text-brand);
         --uui-main_menu-bg: var(--uui-neutral-70);
 
-        //--uui-main_menu-search-bg: var(--uui-neutral-5);
-        //--uui-main_menu-search-border: var(--uui-neutral-40);
-        //--uui-main_menu-search-placeholder: var(--uui-text-tertiary);
-        //--uui-main_menu-search-text: var(--uui-text-primary);
-        //--uui-main_menu-search-icon: var(--uui-neutral-70);
-        //
+        --uui-main_menu-search-bg: var(--uui-neutral-5);
+        --uui-main_menu-search-border: var(--uui-neutral-40);
+        --uui-main_menu-search-placeholder: var(--uui-text-tertiary);
+        --uui-main_menu-search-text: var(--uui-text-primary);
+        --uui-main_menu-search-icon: var(--uui-neutral-70);
+
         --uui-main_menu-icon: var(--uui-neutral-5);
         --uui-main_menu-icon-hover: var(--uui-neutral-5);
         --uui-main_menu-icon-active: var(--uui-neutral-5);
@@ -684,8 +672,8 @@
         --uui-burger_menu-bg: var(--uui-app-bg);
         --uui-burger_menu-bg-hover: var(--uui-app-bg);
         --uui-burger_menu-caption: var(--uui-neutral-90);
-        --uui-burger_icon: var(--uui-neutral-5);
-        --uui-burger_item: var(--uui-app-bg);
+        --uui-burger_menu-icon: var(--uui-neutral-5);
+        --uui-burger_menu-item: var(--uui-app-bg);
     }
 
     /* BurgerButton */
@@ -695,14 +683,14 @@
         --uui-burger_btn_caption-active: var(--uui-primary-50);
         --uui-burger_btn-border: var(--uui-neutral-40);
     }
-    //
-    ///* BurgerSearch */
-    //.uui-main_menu-burger-search {
-    //    --uui-burger_search: var(--uui-text-brand);
-    //    --uui-burger_search-fill: var(--uui-neutral-70);
-    //    --uui-burger_search-bg: var(--uui-neutral-40);
-    //    --uui-burger_search-placeholder: var(--uui-text-tertiary);
-    //}
+
+    /* BurgerSearch */
+    .uui-main_menu-burger-search {
+        --uui-burger_search: var(--uui-text-brand);
+        --uui-burger_search-fill: var(--uui-neutral-70);
+        --uui-burger_search-bg: var(--uui-neutral-40);
+        --uui-burger_search-placeholder: var(--uui-text-tertiary);
+    }
 
     .uui-tooltip-container.uui-color-neutral {
         --uui-tooltip-bg: var(--uui-surface-main);
@@ -770,6 +758,37 @@
         --uui-alert-border: var(--uui-color-60);
     }
 
+    /* Tag */
+
+    .uui-tag.uui-color-neutral {
+        --uui-tag-bg: var(--uui-neutral-40);
+    }
+
+    .uui-presets-panel-input .uui-icon-cancel {
+        &:hover {
+            background-color: var(--uui-neutral-60);
+        }
+
+        &:active {
+            background-color: var(--uui-neutral-50);
+        }
+    }
+
+    .uui-scroll-bars {
+        --uui-scroll_bars-bg: var(--uui-neutral-40);
+        --uui-scroll_bars-bg-active: var(--uui-neutral-30);
+    }
+
+    .uui-text-placeholder {
+        --uui-text_placeholder-gradient: linear-gradient(90deg, var(--uui-neutral-30) 0%, var(--uui-neutral-50) 50%, var(--uui-neutral-30) 100%);
+    }
+
+    .uui-typography {
+        .uui-highlight {
+            background-color: var(--uui-warning-20);
+        }
+    }
+
     /* fonts */
 
     .uui-font-sans {
@@ -798,12 +817,6 @@
         --uui-text-font: var(--uui-font);
         --uui-text-font-weight: 300;
     }
-
-    /* Tag */
-
-    .uui-tag.uui-color-neutral {
-        --uui-tag-bg: var(--uui-neutral-40);
-    }
 }
 
 .uui-theme-loveship_dark {