feat(selectlist): use css variables in variants

Author: Martí Malek

src/components/SelectList/SelectList.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import * as React from 'react';
 import { SelectList } from './SelectList';
-import { SemanticColors } from '../../essentials';
+import { getSemanticValue } from '../../utils/cssVariables';
 
 describe('SelectList', () => {
     it('renders options in multi select', () => {
@@ -21,14 +21,14 @@ describe('SelectList', () => {
 
         const normalTag = screen.getByText('Sales').parentElement;
         expect(normalTag).toHaveStyle(`
-            background-color: ${SemanticColors.background.info};
-            border-color: ${SemanticColors.border.infoEmphasized};
+            background-color: ${getSemanticValue('background-element-info-default')};
+            border-color: ${getSemanticValue('border-info-default')};
         `);
 
         const errorTag = screen.getByText('Marketing').parentElement;
         expect(errorTag).toHaveStyle(`
             background-color: transparent;
-            border-color: ${SemanticColors.border.dangerEmphasized};
+            border-color: ${getSemanticValue('border-danger-default')};
         `);
     });
 
@@ -50,13 +50,13 @@ describe('SelectList', () => {
         const normalTag = screen.getByText('Sales').parentElement;
         expect(normalTag).toHaveStyle(`
             background-color: transparent;
-            border-color: ${SemanticColors.border.primary};
+            border-color: ${getSemanticValue('border-disabled')};
         `);
 
         const errorTag = screen.getByText('Marketing').parentElement;
         expect(errorTag).toHaveStyle(`
             background-color: transparent;
-            border-color: ${SemanticColors.border.primary};
+            border-color: ${getSemanticValue('border-disabled')};
         `);
     });
 });

src/components/SelectList/SelectList.tsx

@@ -37,8 +37,6 @@ const getOptionVariant = (selectProps: Props, option: unknown): 'default' | 'dis
     return 'default';
 };
 
-const getColor = (key: string, props: Props) => String(get(key)(props));
-
 const customStyles: StylesConfig = {
     container: (provided, { selectProps }: WithSelectProps<Props>) => {
         const bSize = {
@@ -219,27 +217,27 @@ const customStyles: StylesConfig = {
                     borderColor: getSemanticValue('border-disabled'),
 
                     '> [role="button"]': {
-                        color: getColor('semanticColors.icon.disabled', selectProps)
+                        color: getSemanticValue('foreground-disabled')
                     }
                 };
             case 'error':
                 return {
                     ...styles,
-                    color: getColor('semanticColors.text.dangerInverted', selectProps),
+                    color: getSemanticValue('foreground-danger-default'),
                     backgroundColor: 'transparent',
-                    borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps),
+                    borderColor: getSemanticValue('border-danger-default'),
 
                     '> [role="button"]': {
-                        color: getColor('semanticColors.icon.danger', selectProps)
+                        color: getSemanticValue('foreground-danger-default')
                     },
 
                     '&:hover': {
-                        color: getColor('semanticColors.text.primaryInverted', selectProps),
-                        backgroundColor: getColor('semanticColors.background.dangerEmphasized', selectProps),
-                        borderColor: getColor('semanticColors.border.dangerEmphasized', selectProps),
+                        color: getSemanticValue('foreground-on-background-danger'),
+                        backgroundColor: getSemanticValue('background-surface-danger-emphasized'),
+                        borderColor: getSemanticValue('border-danger-default'),
 
                         '> [role="button"]': {
-                            color: getColor('semanticColors.icon.primaryInverted', selectProps)
+                            color: getSemanticValue('foreground-on-background-danger')
                         }
                     }
                 };
@@ -252,16 +250,16 @@ const customStyles: StylesConfig = {
                     borderColor: getSemanticValue('border-info-default'),
 
                     '> [role="button"]': {
-                        color: getColor('semanticColors.icon.action', selectProps)
+                        color: getSemanticValue('foreground-info-default')
                     },
 
                     '&:hover': {
                         color: getSemanticValue('foreground-on-background-primary'),
                         backgroundColor: getSemanticValue('background-element-info-emphasized'),
-                        borderColor: getColor('semanticColors.border.infoEmphasized', selectProps),
+                        borderColor: getSemanticValue('border-info-default'),
 
                         '> [role="button"]': {
-                            color: getColor('semanticColors.icon.primaryInverted', selectProps)
+                            color: getSemanticValue('foreground-on-background-info')
                         }
                     }
                 };

src/components/Tag/Tag.spec.tsx

@@ -1,7 +1,6 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 import { Tag } from './Tag';
-import { SemanticColors } from '../../essentials';
 import { getSemanticValue } from '../../utils/cssVariables';
 
 describe('Tag', () => {