Merge pull request #1727 from epam/bugfix/CountIndicator-fixed-gray

[CountIndicator, Tag]: fixed gray color
epam · Nov 3, 2023 · 27bc5ff · 27bc5ff
2 parents da159af + ce59f61
commit 27bc5ff
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 20 deletions.
diff --git a/app/src/docs/_examples/countIndicator/Basic.example.tsx b/app/src/docs/_examples/countIndicator/Basic.example.tsx
@@ -28,7 +28,7 @@ export default function BasicCountIndicatorExample() {
     const getCountIndicator = (item: CountIndicatorProps) => {
         if (item.color === 'white') {
             return (
-                <div style={ { backgroundColor: '#1D1E26', display: 'flex', justifyItems: 'center' } }>
+                <div style={ { backgroundColor: 'var(--uui-neutral-70)', display: 'flex', justifyItems: 'center' } }>
                     <CountIndicator caption={ item.caption } color={ item.color } size={ item.size } />
                 </div>
             );

diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss
@@ -514,7 +514,10 @@
     .uui-count_indicator.uui-color-neutral {
         --uui-count_indicator-bg: var(--uui-neutral-30);
         --uui-count_indicator-border: var(--uui-neutral-30);
-        --uui-color-contrast: var(--uui-neutral-80);
+    }
+
+    .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {
+        --uui-count_indicator-caption: var(--uui-neutral-70);
     }
 
     /* Status Indicator */

diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss
@@ -653,7 +653,10 @@
     .uui-count_indicator.uui-color-neutral {
         --uui-count_indicator-bg: var(--uui-neutral-30);
         --uui-count_indicator-border: var(--uui-neutral-30);
-        --uui-count_indicator-caption: var(--uui-neutral-80);
+    }
+
+    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {
+        --uui-count_indicator-caption: var(--uui-neutral-70);
     }
 
     /* Status Indicator */

diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
@@ -715,19 +715,15 @@
 
     /* CountIndicator */
 
-    .uui-count_indicator.uui-color-neutral,
-    .uui-count_indicator.uui-color-info,
-    .uui-count_indicator.uui-color-blue,
-    .uui-count_indicator.uui-color-grass,
-    .uui-count_indicator.uui-color-success,
-    .uui-count_indicator.uui-color-critical,
-    .uui-count_indicator.uui-color-red,
-    .uui-count_indicator.uui-color-warning,
-    .uui-count_indicator.uui-color-amber {
+    .uui-count_indicator:is(.uui-color-neutral, .uui-color-info, .uui-color-blue, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-red, .uui-color-warning, .uui-color-amber) {
         --uui-count_indicator-bg: var(--uui-color-60);
         --uui-count_indicator-border: var(--uui-color-60);
     }
 
+    .uui-count_indicator.uui-color-neutral {
+        --uui-count_indicator-caption: var(--uui-neutral-10);
+    }
+
     /* Status Indicator */
 
     .uui-status_indicator.uui-color-white.uui-fill-outline {
@@ -801,6 +797,12 @@
         --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 {

diff --git a/epam-assets/theme/theme_promo.scss b/epam-assets/theme/theme_promo.scss
@@ -615,13 +615,16 @@
         --uui-tooltip-text: var(--white);
     }
 
-    /* Informer */
+    /* CountIndicator */
 
     .uui-count_indicator.uui-color-gray,
     .uui-count_indicator.uui-color-neutral {
         --uui-count_indicator-bg: var(--uui-neutral-30);
         --uui-count_indicator-border: var(--uui-neutral-30);
-        --uui-count_indicator-caption: var(--uui-neutral-80);
+    }
+
+    .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {
+        --uui-count_indicator-caption: var(--uui-neutral-70);
     }
 
     /* Status Indicator */

diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap
@@ -406,7 +406,7 @@ exports[`PickerInput should render with maximum props 1`] = `
     className="body multiline"
   >
     <button
-      className="container uui-button-box uui-enabled size-42 root uui-color-gray uui-tag"
+      className="container uui-button-box uui-enabled size-42 root uui-color-neutral uui-tag"
       onClick={[Function]}
       tabIndex={-1}
       type="button"
@@ -427,7 +427,7 @@ exports[`PickerInput should render with maximum props 1`] = `
       </div>
     </button>
     <button
-      className="container uui-button-box uui-enabled size-42 root uui-color-gray uui-tag"
+      className="container uui-button-box uui-enabled size-42 root uui-color-neutral uui-tag"
       onClick={[Function]}
       tabIndex={-1}
       type="button"

diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerToggler.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerToggler.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`PickerToggler should render with maximum props 1`] = `
     className="body multiline"
   >
     <button
-      className="container uui-button-box uui-enabled size-42 root uui-color-gray uui-tag"
+      className="container uui-button-box uui-enabled size-42 root uui-color-neutral uui-tag"
       onClick={[Function]}
       tabIndex={-1}
       type="button"

diff --git a/uui/components/widgets/Tag.tsx b/uui/components/widgets/Tag.tsx
@@ -35,7 +35,7 @@ export function applyTagMods(mods: TagMods) {
     return [
         css['size-' + (mods.size || defaultSize)],
         css.root,
-        'uui-color-gray',
+        'uui-color-neutral',
         'uui-tag',
     ];
 }

diff --git a/uui/components/widgets/__tests__/__snapshots__/Tag.test.tsx.snap b/uui/components/widgets/__tests__/__snapshots__/Tag.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Tag should be rendered correctly 1`] = `
 <button
-  className="container uui-button-box uui-enabled size-36 root uui-color-gray uui-tag"
+  className="container uui-button-box uui-enabled size-36 root uui-color-neutral uui-tag"
   onClick={[Function]}
   tabIndex={-1}
   type="button"
@@ -11,7 +11,7 @@ exports[`Tag should be rendered correctly 1`] = `
 
 exports[`Tag should be rendered correctly with props 1`] = `
 <button
-  className="container uui-button-box uui-enabled -clickable size-36 root uui-color-gray uui-tag"
+  className="container uui-button-box uui-enabled -clickable size-36 root uui-color-neutral uui-tag"
   onClick={[Function]}
   tabIndex={0}
   type="button"