Merge pull request #1761 from epam/remove_contrast_text

Removed --uui-text-contrast variable and rename tooltip contrast to inverted
epam · Nov 20, 2023 · 8570340 · 8570340
2 parents a4fdf8a + 8a52d84
commit 8570340
Show file tree

Hide file tree

Showing 18 changed files with 36 additions and 44 deletions.
diff --git a/app/src/docs/_examples/tooltip/CustomMarkup.example.tsx b/app/src/docs/_examples/tooltip/CustomMarkup.example.tsx
@@ -8,18 +8,18 @@ export default function CustomMarkupExample() {
     ];
     const renderCustomMarkup = () => (
         <>
-            <Text fontSize="14" color="contrast">
+            <Text fontSize="14">
                 Copy Workload Based Revenue to Forecast
             </Text>
             <FlexRow spacing="12">
                 {months.map((month) => (
                     <FlexCell minWidth={ 60 } cx={ css.textBlock } key={ month }>
-                        <Text fontSize="14" lineHeight="18" color="contrast" cx={ css.text }>
+                        <Text fontSize="14" lineHeight="18" cx={ css.text }>
                             {month}
                             {' '}
                             - 22
                         </Text>
-                        <Text fontSize="12" lineHeight="18" color="contrast" cx={ css.text }>
+                        <Text fontSize="12" lineHeight="18" cx={ css.text }>
                             120k USD
                         </Text>
                     </FlexCell>
@@ -30,7 +30,7 @@ export default function CustomMarkupExample() {
 
     return (
         <FlexRow>
-            <Tooltip maxWidth={ 380 } renderContent={ renderCustomMarkup } placement="right">
+            <Tooltip maxWidth={ 380 } renderContent={ renderCustomMarkup } color="neutral" placement="right">
                 <Button data-foo={ 123 } fill="outline" caption="Custom tooltip" onClick={ () => null } />
             </Tooltip>
         </FlexRow>

diff --git a/app/src/docs/_examples/tooltip/CustomMarkupExample.module.scss b/app/src/docs/_examples/tooltip/CustomMarkupExample.module.scss
@@ -1,5 +1,5 @@
 .textBlock:not(:last-child) {
-    border-right: 1px solid var(--uui-text-contrast);
+    border-right: 1px solid var(--uui-neutral-5);
 }
 
 .text {

diff --git a/app/src/docs/_examples/tooltip/Variants.example.tsx b/app/src/docs/_examples/tooltip/Variants.example.tsx
@@ -6,12 +6,12 @@ import css from './TypesExample.module.scss';
 export default function VariantsTooltipExample() {
     return (
         <div className={ css.container }>
-            <Tooltip content="Tooltip message" placement="bottom" color="neutral">
-                <Button caption="Contrast" color="primary" onClick={ () => null } />
+            <Tooltip content="Tooltip message" placement="bottom" color="inverted">
+                <Button caption="Default" fill="outline" color="secondary" onClick={ () => null } />
             </Tooltip>
 
-            <Tooltip content="Tooltip message" placement="bottom" color="contrast">
-                <Button caption="Default" fill="outline" color="secondary" onClick={ () => null } />
+            <Tooltip content="Tooltip message" placement="bottom" color="neutral">
+                <Button caption="Contrast" color="primary" onClick={ () => null } />
             </Tooltip>
 
             <Tooltip content="Tooltip message" placement="bottom" color="critical">

diff --git a/app/src/docs/_props/uui/components/overlays/tooltip.props.tsx b/app/src/docs/_props/uui/components/overlays/tooltip.props.tsx
@@ -21,7 +21,7 @@ const tooltipDoc = new DocBuilder<TooltipProps & TooltipMods>({ name: 'Tooltip',
     .prop('closeOnMouseLeave', { examples: [{ name: 'toggler', value: 'toggler', isDefault: true }, 'boundary'] })
     .prop('color', {
         examples: [
-            'contrast', { name: 'default', value: 'neutral', isDefault: true }, 'critical',
+            'inverted', { name: 'default', value: 'neutral', isDefault: true }, 'critical',
         ],
     })
     .prop('closeDelay', {

diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss
@@ -215,7 +215,6 @@
     --uui-text-secondary: var(--uui-neutral-70);
     --uui-text-tertiary: var(--uui-neutral-60);
     --uui-text-disabled: var(--uui-neutral-50);
-    --uui-text-contrast: var(--uui-neutral-5);
 
     --uui-text-info: var(--uui-info-70);
     --uui-text-warning: var(--uui-warning-70);
@@ -492,9 +491,9 @@
         --uui-tooltip-bg: var(--uui-critical-60);
     }
 
-    .uui-tooltip-container.uui-color-contrast {
+    .uui-tooltip-container.uui-color-inverted {
         --uui-tooltip-bg: var(--night800);
-        --uui-tooltip-text: var(--uui-text-contrast);
+        --uui-tooltip-text: var(--uui-neutral-5);
     }
 
     /* CuntIndicator */

diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss
@@ -242,7 +242,6 @@
     --uui-text-secondary: var(--uui-neutral-70);
     --uui-text-tertiary: var(--uui-neutral-60);
     --uui-text-disabled: var(--uui-neutral-50);
-    --uui-text-contrast: var(--uui-neutral-5);
 
     --uui-text-info: var(--uui-info-70);
     --uui-text-warning: var(--uui-warning-70);
@@ -632,7 +631,7 @@
     }
 
     .uui-tooltip-container.uui-color-gray,
-    .uui-tooltip-container.uui-color-contrast {
+    .uui-tooltip-container.uui-color-inverted {
         --uui-tooltip-bg: var(--uui-neutral-80);
         --uui-tooltip-text: var(--white);
     }

diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
@@ -203,7 +203,6 @@
     --uui-text-secondary: var(--uui-neutral-10);
     --uui-text-tertiary: var(--uui-neutral-20);
     --uui-text-disabled: var(--uui-neutral-30);
-    --uui-text-contrast: var(--uui-neutral-70);
 
     --uui-text-info: var(--uui-info-70);
     --uui-text-warning: var(--uui-warning-70);
@@ -698,9 +697,9 @@
         --uui-color-contrast: var(--uui-text-primary);
     }
 
-    .uui-tooltip-container.uui-color-contrast {
+    .uui-tooltip-container.uui-color-inverted {
         --uui-tooltip-bg: var(--uui-neutral-10);
-        --uui-color-contrast: var(--uui-text-contrast);
+        --uui-tooltip-text: var(--uui-neutral-70);
     }
 
     .uui-tooltip-container.uui-color-neutral {

diff --git a/epam-assets/theme/theme_promo.scss b/epam-assets/theme/theme_promo.scss
@@ -207,7 +207,6 @@
     --uui-text-secondary: var(--uui-neutral-70);
     --uui-text-tertiary: var(--uui-neutral-60);
     --uui-text-disabled: var(--uui-neutral-50);
-    --uui-text-contrast: var(--uui-neutral-5);
 
     --uui-text-info: var(--uui-info-70);
     --uui-text-warning: var(--uui-warning-70);
@@ -607,7 +606,7 @@
     }
 
     .uui-tooltip-container.uui-color-gray,
-    .uui-tooltip-container.uui-color-contrast {
+    .uui-tooltip-container.uui-color-inverted {
         --uui-tooltip-bg: var(--uui-neutral-80);
         --uui-tooltip-text: var(--white);
     }

diff --git a/epam-assets/theme/theme_vanilla_thunder.scss b/epam-assets/theme/theme_vanilla_thunder.scss
@@ -146,9 +146,6 @@
     --uui-surface-main: var(--chromatic-0);
     --uui-surface-higher: var(--night100);
     --uui-surface-highest: var(--night200);
-    --uui-surface-contrast: var(--night800);
-    --uui-surface-contrast-low: var(--night800);
-    --uui-surface-contrast-lower: var(--night900);
 
     --uui-divider: var(--chromatic-200);
     --uui-divider-light: var(--chromatic-150);
@@ -158,7 +155,6 @@
     --uui-text-secondary: var(--chromatic-300);
     --uui-text-tertiary: var(--chromatic-300);
     --uui-text-disabled: var(--chromatic-200);
-    --uui-text-contrast: var(--chromatic-0);
 
     --uui-text-info: var(--uui-info-50);
     --uui-text-warning: var(--uui-warning-50);

diff --git a/uui/components/navigation/MainMenu/Burger/Burger.module.scss b/uui/components/navigation/MainMenu/Burger/Burger.module.scss
@@ -4,7 +4,7 @@
     --uui-burger_menu-bg: var(--uui-neutral-90);
     --uui-burger_menu-bg-hover: var(--uui-neutral-90);
     --uui-burger_menu-overlay: var(--uui-overlay);
-    --uui-burger_menu-icon: var(--uui-text-contrast);
+    --uui-burger_menu-icon: var(--uui-neutral-5);
     --uui-burger_menu-item: var(--uui-text-brand);
     //
     position: relative;

diff --git a/uui/components/navigation/MainMenu/MainMenu.module.scss b/uui/components/navigation/MainMenu/MainMenu.module.scss
@@ -1,8 +1,8 @@
 @use  '../../../assets/styles/effects' as *;
 
 .root {
-    --uui-main_menu-text: var(--uui-text-contrast);
-    --uui-main_menu-text-active: var(--uui-text-contrast);
+    --uui-main_menu-text: var(--uui-neutral-5);
+    --uui-main_menu-text-active: var(--uui-neutral-5);
     --uui-main_menu-bg: var(--uui-neutral-80);
     --uui-main_menu-hover: var(--uui-neutral-90);
     --uui-main_menu-active: var(--uui-neutral-90);
@@ -14,9 +14,9 @@
     --uui-main_menu-search-text: var(--uui-text-disabled);
     --uui-main_menu-search-icon: var(--uui-icon-disabled);
 
-    --uui-main_menu-icon: var(--uui-text-contrast);
-    --uui-main_menu-icon-hover: var(--uui-text-contrast);
-    --uui-main_menu-icon-active: var(--uui-text-contrast);
+    --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);
 
     --uui-main_menu-font: var(--uui-font);
     --uui-main_menu-font-weight: 600;

diff --git a/uui/components/navigation/MainMenu/MainMenuDropdown.module.scss b/uui/components/navigation/MainMenu/MainMenuDropdown.module.scss
@@ -1,8 +1,8 @@
 @use  '../../../assets/styles/effects' as *;
 
 .dropdown-body {
-    --uui-main_menu-text: var(--uui-text-contrast);
-    --uui-main_menu-text-active: var(--uui-text-contrast);
+    --uui-main_menu-text: var(--uui-neutral-5);
+    --uui-main_menu-text-active: var(--uui-neutral-5);
     --uui-main_menu-active: var(--uui-neutral-90);
     --uui-main_menu-border-active: var(--uui-primary-50);
 
@@ -11,9 +11,9 @@
     --uui-main_menu-dropdown-shadow: none;
     --uui-main_menu-dropdown-border-radius: none;
 
-    --uui-main_menu-icon: var(--uui-text-contrast);
-    --uui-main_menu-icon-hover: var(--uui-text-contrast);
-    --uui-main_menu-icon-active: var(--uui-text-contrast);
+    --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);
 
     //
     display: flex;

diff --git a/uui/components/overlays/Tooltip.tsx b/uui/components/overlays/Tooltip.tsx
@@ -4,15 +4,15 @@ import css from './Tooltip.module.scss';
 
 export interface TooltipMods {
     /** Tooltip color */
-    color?: 'neutral' | 'contrast' | 'critical';
+    color?: 'neutral' | 'inverted' | 'critical';
 }
 
 export type TooltipProps = UuiTooltipProps & TooltipMods;
 
 function applyTooltipMods(mods: TooltipMods) {
     return [
         css.root,
-        `uui-color-${mods.color || 'contrast'}`,
+        `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 

diff --git a/uui/components/tables/DataTableHeaderCell.module.scss b/uui/components/tables/DataTableHeaderCell.module.scss
@@ -155,6 +155,7 @@
     row-gap: 3px;
 
     .cell-tooltip-text {
+        color: var(--uui-tooltip-text);
         padding: 0;
     }
 }
diff --git a/uui/components/tables/DataTableHeaderCell.tsx b/uui/components/tables/DataTableHeaderCell.tsx
@@ -33,8 +33,8 @@ export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHe
 
     getTooltipContent = () => (
         <div className={ css.cellTooltipWrapper }>
-            <Text fontSize="14" color="contrast" fontWeight="600" cx={ css.cellTooltipText }>{ this.props.column.caption }</Text>
-            { this.props.column.info && <Text fontSize="12" color="contrast" cx={ css.cellTooltipText }>{ this.props.column.info }</Text> }
+            <Text fontSize="14" fontWeight="600" cx={ css.cellTooltipText }>{ this.props.column.caption }</Text>
+            { this.props.column.info && <Text fontSize="12" cx={ css.cellTooltipText }>{ this.props.column.info }</Text> }
         </div>
     );
 
@@ -44,7 +44,7 @@ export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHe
                 <div className={ cx(css.iconCell, css['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) }>
                     <Tooltip
                         placement="top"
-                        color="contrast"
+                        color="inverted"
                         renderContent={ this.getTooltipContent }
                         cx={ css.cellTooltip }
                         openDelay={ 600 }

diff --git a/uui/components/tables/columnsConfigurationModal/PinIconButton.tsx b/uui/components/tables/columnsConfigurationModal/PinIconButton.tsx
@@ -47,7 +47,7 @@ export function PinIconButton(props: IPinIconButton) {
 
     return (
         <span onMouseOver={ () => setIsHovered(true) } onMouseOut={ () => setIsHovered(false) }>
-            <Tooltip content={ tooltipText } placement="bottom" color="contrast">
+            <Tooltip content={ tooltipText } placement="bottom" color="inverted">
                 <IconButton icon={ pinIcon } onClick={ pinClickHandler } isDisabled={ isPinnedAlways } color={ isPinned ? 'info' : undefined } />
             </Tooltip>
         </span>

diff --git a/uui/components/typography/Text.module.scss b/uui/components/typography/Text.module.scss
@@ -36,7 +36,6 @@
         @include text-color('primary');
         @include text-color('secondary');
         @include text-color('disabled');
-        @include text-color('contrast');
 
         @include font-weight(200);
         @include font-weight(300);

diff --git a/uui/components/typography/Text.tsx b/uui/components/typography/Text.tsx
@@ -4,8 +4,8 @@ import { getTextClasses, TextSettings } from '../../helpers';
 import { Text as uuiText, TextProps as UuiTextProps } from '@epam/uui-components';
 import css from './Text.module.scss';
 
-export type TextColor = 'info' | 'warning' | 'error' | 'success' | 'brand' | 'primary' | 'secondary' | 'disabled' | 'contrast' | 'white';
-export const allTextColors: TextColor[] = ['info', 'warning', 'error', 'success', 'brand', 'primary', 'secondary', 'disabled', 'contrast', 'white'];
+export type TextColor = 'info' | 'warning' | 'error' | 'success' | 'brand' | 'primary' | 'secondary' | 'disabled' | 'white';
+export const allTextColors: TextColor[] = ['info', 'warning', 'error', 'success', 'brand', 'primary', 'secondary', 'disabled', 'white'];
 
 export interface TextMods extends TextSettings {
     color?: TextColor;