feat(accordion): migrate to semantic colors

Author: Rasid Redzic

src/components/Accordion/Accordion.tsx

@@ -1,15 +1,14 @@
 import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
-
-import { SemanticColors } from '../../essentials';
 import { Box } from '../Box/Box';
 import { Compact } from './components/Compact';
 import { DefaultPanel } from './components/Default';
 import { AccordionProps } from './types';
+import { getSemanticValue } from '../../utils/cssVariables';
 
 const HorizontalDivider = styled(Box)`
     border: 0;
-    border-top: solid 0.0625rem ${SemanticColors.border.primary};
+    border-top: solid 0.0625rem ${getSemanticValue('border-primary-default')};
 `;
 
 const HorizontalDividerTop = HorizontalDivider;

src/components/Accordion/components/ChevronDown.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { ChevronDownIcon } from '../../../icons';
-import { SemanticColors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 export const ChevronDown = styled(ChevronDownIcon)`
-    color: ${props => (props.color ? props.color : SemanticColors.icon.primary)};
+    color: ${props => (props.color ? props.color : getSemanticValue('overrides-accordion-icon-primary-default'))};
 `;

src/components/Accordion/components/ChevronUp.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { ChevronUpIcon } from '../../../icons';
-import { SemanticColors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 export const ChevronUp = styled(ChevronUpIcon)`
-    color: ${props => (props.color ? props.color : SemanticColors.icon.primary)};
+    color: ${props => (props.color ? props.color : getSemanticValue('overrides-accordion-icon-primary-default'))};
 `;

src/components/Accordion/components/Compact.tsx

@@ -1,14 +1,13 @@
-import React, { useState, ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import styled from 'styled-components';
-
-import { SemanticColors } from '../../../essentials';
 import { Box } from '../../Box/Box';
 import { Headline } from '../../Headline/Headline';
 import { Header } from './Header';
 import { ChevronUp } from './ChevronUp';
 import { ChevronDown } from './ChevronDown';
 import { Description } from './Description';
 import { AccordionProps } from '../types';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 type Props = Pick<
     AccordionProps,
@@ -19,15 +18,15 @@ const StyleHeadline = styled(Headline)``;
 
 const PanelHeader = styled(Header)`
     &:hover ${StyleHeadline} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 
     &:hover ${ChevronDown} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 
     &:hover ${ChevronUp} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 `;
 

src/components/Accordion/components/Default.tsx

@@ -1,7 +1,5 @@
-import React, { useState, PropsWithChildren, ReactElement } from 'react';
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
 import styled from 'styled-components';
-
-import { SemanticColors } from '../../../essentials';
 import { Text } from '../../Text/Text';
 import { Box } from '../../Box/Box';
 import { Headline } from '../../Headline/Headline';
@@ -10,49 +8,54 @@ import { ChevronUp } from './ChevronUp';
 import { ChevronDown } from './ChevronDown';
 import { Description } from './Description';
 import { AccordionProps } from '../types';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 const ButtonLabel = styled(Text).attrs({ as: 'p' })`
-    color: ${SemanticColors.text.link};
+    color: ${getSemanticValue('text-link')};
 `;
 
 const PanelHeader = styled(Header)`
     &:hover {
-        background-color: ${SemanticColors.background.info};
+        background-color: ${getSemanticValue('background-info-default')};
     }
 
     &:hover ${ButtonLabel} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 
     &:hover ${ChevronDown} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 `;
 
 const CardHeader = styled(Header).attrs({ p: '3' })`
-    background-color: ${SemanticColors.background.secondary};
+    background-color: ${getSemanticValue('background-secondary-default')};
     border-radius: 0.3125rem 0.3125rem 0 0;
 
     &:hover {
-        background-color: ${SemanticColors.background.info};
+        background-color: ${getSemanticValue('background-info-default')};
     }
 
     &:hover ${ButtonLabel} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 
     &:hover ${ChevronUp} {
-        color: ${SemanticColors.text.linkHover};
+        color: ${getSemanticValue('text-linkHover')};
     }
 `;
 
 const PanelBody = styled(Box).attrs({ my: '3' })`
-    border: solid 0.0625rem ${SemanticColors.border.primary};
+    border: solid 0.0625rem ${getSemanticValue('border-primary-default')};
     border-radius: 0.3125rem;
 `;
 
 const PanelIcon = ({ isOpen }: { isOpen: boolean }) =>
-    isOpen ? <ChevronUp color={SemanticColors.icon.action} /> : <ChevronDown color={SemanticColors.icon.action} />;
+    isOpen ? (
+        <ChevronUp color={getSemanticValue('icon-action-default')} />
+    ) : (
+        <ChevronDown color={getSemanticValue('icon-action-default')} />
+    );
 
 export const DefaultPanel = ({
     heading,

src/components/Accordion/components/Header.tsx

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-
-import { SemanticColors } from '../../../essentials';
 import { Box } from '../../Box/Box';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
-export const Header = styled(Box).attrs({ p: '2', color: SemanticColors.text.primary })`
+export const Header = styled(Box).attrs({ p: '2', color: getSemanticValue('text-primary') })`
     display: flex;
     flex-direction: row;
     justify-content: space-between;

src/essentials/Colors/Colors.ts

@@ -189,7 +189,14 @@ export const SemanticColors = {
                     emphasized: Colors.blue.primary[550]
                 },
                 info: {
-                    emphasized: Colors.blue.secondary[900],
+                    emphasized: Colors.blue.secondary[900]
+                }
+            }
+        },
+        accordion: {
+            icon: {
+                primary: {
+                    default: Colors.blue.secondary[900]
                 }
             }
         }

src/essentials/Colors/RedesignedColors.ts

@@ -190,6 +190,13 @@ export const SemanticColors = {
                     emphasized: Colors.blue.primary[900]
                 }
             }
+        },
+        accordion: {
+            icon: {
+                primary: {
+                    default: Colors.blue.secondary[900]
+                }
+            }
         }
     }
 } satisfies SemanticColorsSchema;

src/essentials/Colors/types.ts

@@ -27,6 +27,7 @@ export interface SemanticColorsSchema {
     },
     overrides: {
         label: Object.Partial<SemanticColorsSchema, 'deep'>,
+        accordion: Object.Partial<SemanticColorsSchema, 'deep'>,
     },
     background: {
         primary: {