feat(tag): use css variables in variants

Author: Martí Malek

src/components/Tag/Tag.spec.tsx

@@ -1,7 +1,7 @@
 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', () => {
     it('renders and can be dismissed', () => {
@@ -28,28 +28,28 @@ describe('Tag', () => {
         const { container } = render(<Tag variant="disabled">Lorem</Tag>);
 
         expect(container.firstChild).toHaveStyle(`
-            border-color: ${SemanticColors.border.primary};
+            border-color: ${getSemanticValue('border-disabled')};
         `);
         expect(screen.getByText('Lorem')).toHaveStyle(`
-            color: ${SemanticColors.text.disabled};
+            color: ${getSemanticValue('foreground-disabled')};
         `);
         expect(screen.getByTestId('dismiss-icon')).toHaveStyle(`
-            color: ${SemanticColors.icon.disabled};
+            color: ${getSemanticValue('foreground-disabled')};
         `);
     });
 
     it('renders error variant', () => {
         const { container } = render(<Tag variant="error">Lorem</Tag>);
 
         expect(container.firstChild).toHaveStyle(`
-            background-color: ${SemanticColors.background.danger};
-            border-color: ${SemanticColors.border.dangerEmphasized};
+            background-color: ${getSemanticValue('background-surface-danger-default')};
+            border-color: ${getSemanticValue('border-danger-default')};
         `);
         expect(screen.getByText('Lorem')).toHaveStyle(`
-            color: ${SemanticColors.text.dangerInverted};
+            color: ${getSemanticValue('foreground-danger-default')};
         `);
         expect(screen.getByTestId('dismiss-icon')).toHaveStyle(`
-            color: ${SemanticColors.icon.danger};
+            color: ${getSemanticValue('foreground-danger-default')};
         `);
     });
 });

src/components/Tag/Tag.tsx

@@ -50,16 +50,16 @@ const tagVariant = variant({
             borderColor: getSemanticValue('border-info-default'),
 
             [`> ${TagText}`]: {
-                color: get('semanticColors.text.link')
+                color: getSemanticValue('foreground-info-default')
             },
 
             [`> ${DismissIcon}`]: {
-                color: get('semanticColors.icon.action')
+                color: getSemanticValue('foreground-info-default')
             },
 
             '&:hover': {
                 backgroundColor: getSemanticValue('background-element-info-emphasized'),
-                borderColor: get('semanticColors.border.infoEmphasized'),
+                borderColor: getSemanticValue('border-info-default'),
 
                 [`> ${TagText}`]: {
                     color: getSemanticValue('foreground-on-background-info')
@@ -71,38 +71,38 @@ const tagVariant = variant({
             }
         },
         disabled: {
-            borderColor: get('semanticColors.border.primary'),
+            borderColor: getSemanticValue('border-disabled'),
 
             [`> ${TagText}`]: {
-                color: get('semanticColors.text.disabled')
+                color: getSemanticValue('foreground-disabled')
             },
 
             [`> ${DismissIcon}`]: {
-                color: get('semanticColors.icon.disabled')
+                color: getSemanticValue('foreground-disabled')
             }
         },
         error: {
-            backgroundColor: get('semanticColors.background.danger'),
-            borderColor: get('semanticColors.border.dangerEmphasized'),
+            backgroundColor: getSemanticValue('background-surface-danger-default'),
+            borderColor: getSemanticValue('border-danger-default'),
 
             [`> ${TagText}`]: {
-                color: get('semanticColors.text.dangerInverted')
+                color: getSemanticValue('foreground-danger-default')
             },
 
             [`> ${DismissIcon}`]: {
-                color: get('semanticColors.icon.danger')
+                color: getSemanticValue('foreground-danger-default')
             },
 
             '&:hover': {
-                backgroundColor: get('semanticColors.background.dangerEmphasized'),
-                borderColor: get('semanticColors.border.dangerEmphasized'),
+                backgroundColor: getSemanticValue('background-surface-danger-emphasized'),
+                borderColor: getSemanticValue('border-danger-default'),
 
                 [`> ${TagText}`]: {
-                    color: get('semanticColors.text.primaryInverted')
+                    color: getSemanticValue('foreground-on-background-danger')
                 },
 
                 [`> ${DismissIcon}`]: {
-                    color: get('semanticColors.icon.primaryInverted')
+                    color: getSemanticValue('foreground-on-background-danger')
                 }
             }
         }
@@ -144,4 +144,4 @@ const Tag: FC<PropsWithChildren<TagProps>> = ({
     </TagWrapper>
 );
 
-export { Tag, TagProps };
+export { Tag, TagProps };