feat(password): migrate to semantic colors

Author: nlopin

src/components/Password/Password.tsx

@@ -1,14 +1,14 @@
 import React, { forwardRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { compose, MarginProps, margin, width, WidthProps } from 'styled-system';
-import { EyeOpenIcon, EyeClosedIcon } from '../../icons';
+import { compose, margin, MarginProps, width, WidthProps } from 'styled-system';
+import { EyeClosedIcon, EyeOpenIcon } from '../../icons';
 import { InnerInput as Input } from '../Input/InnerInput';
 import { InputProps } from '../Input/InputProps';
 import { InputWrapperProps } from '../Input/InputWrapper';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
-import { Colors } from '../../essentials/Colors/Colors';
 import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
+import { getSemanticValue } from '../../utils/cssVariables';
 import { ToggleButton } from './ToggleButton';
 import { TOGGLE_MODE_BUTTON_WIDTH } from './constants';
 import { extractWidthProps, extractWrapperMarginProps } from '../../utils/extractProps';
@@ -51,10 +51,24 @@ const defaultAriaStrings = {
 };
 
 const iconColors = {
-    regular: { color: Colors.AUTHENTIC_BLUE_550, hover: Colors.AUTHENTIC_BLUE_900 },
-    inverted: { color: Colors.AUTHENTIC_BLUE_200, hover: Colors.AUTHENTIC_BLUE_50 }
+    regular: {
+        color: getSemanticValue('icon-secondary-default'),
+        hover: getSemanticValue('icon-secondary-hover')
+    },
+    inverted: {
+        color: getSemanticValue('icon-secondary-inverted'),
+        hover: getSemanticValue('icon-secondary-hoverInverted')
+    }
 };
 
+// allow component level CSS variables to be passed via `style` prop
+declare module 'csstype' {
+    interface Properties {
+        '--wave-c-password-color'?: string;
+        '--wave-c-password-color-hover'?: string;
+    }
+}
+
 const Password = forwardRef<HTMLDivElement, PasswordProps>(
     (
         {
@@ -105,9 +119,8 @@ const Password = forwardRef<HTMLDivElement, PasswordProps>(
                             aria-controls={inputId}
                             aria-label={isHidden ? aria.showPasswordButton : aria.hidePasswordButton}
                             style={{
-                                // https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
-                                ['--color' as never]: color,
-                                ['--hover-color' as never]: hover
+                                '--wave-c-password-color': color,
+                                '--wave-c-password-color-hover': hover
                             }}
                         >
                             {isHidden ? <EyeOpenIcon /> : <EyeClosedIcon />}

src/components/Password/ToggleButton.ts

@@ -37,11 +37,11 @@ const ToggleButton = styled.button<Pick<InputProps, 'size' | 'variant'>>`
     ${inputType};
 
     svg path {
-        fill: var(--color);
+        fill: var(--wave-c-password-color);
     }
 
     &:hover svg path {
-        fill: var(--hover-color);
+        fill: var(--wave-c-password-color-hover);
     }
 `;
 

src/essentials/Colors/Colors.ts

@@ -115,6 +115,8 @@ export const SemanticColors = {
         secondary: {
             default: Colors.blue.primary[550],
             inverted: Colors.blue.primary[200],
+            hover: Colors.blue.primary[900],
+            hoverInverted: Colors.blue.primary[50],
         },
         tertiary: {
             default: Colors.blue.primary[350],

src/essentials/Colors/RedesignedColors.ts

@@ -113,6 +113,8 @@ export const SemanticColors = {
         secondary: {
             default: Colors.blue.primary[350],
             inverted: Colors.blue.primary[50],
+            hover: Colors.blue.primary[900],
+            hoverInverted: Colors.white,
         },
         tertiary: {
             default: Colors.blue.primary[350],

src/essentials/Colors/types.ts

@@ -65,6 +65,8 @@ export interface SemanticColorsSchema {
         secondary: {
             default: Color,
             inverted: Color,
+            hover: Color,
+            hoverInverted: Color,
         },
         tertiary: {
             default: Color,