chore(design-tokens): accordion update (#853)

kronostechnologies · Apr 25, 2024 · 09ce84b · 09ce84b
1 parent 08af5fa
commit 09ce84b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 24 deletions.
diff --git a/packages/react/src/components/accordion/accordion-item.tsx b/packages/react/src/components/accordion/accordion-item.tsx
@@ -62,6 +62,7 @@ const HeadingStyled = styled(Heading)`
 
 const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     align-items: flex-start;
+    background: ${({ theme }) => theme.component['accordion-header-background-color']};
     border: 1px solid ${({ theme }) => theme.component['accordion-header-border-color']};
     border-radius: var(--border-radius-2x);
     color: ${({ theme }) => theme.component['accordion-header-text-color']};
@@ -78,21 +79,21 @@ const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     width: 100%;
 
     &[aria-expanded='true'] {
-        background: ${({ theme }) => theme.component['accordion-header-expanded-background-color']};
+        background: ${({ theme }) => theme.component['accordion-header-background-color']};
+        border: 1px solid ${({ theme }) => theme.component['accordion-header-border-color']};
         border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
-        color: ${({ theme }) => theme.component['accordion-header-expanded-text-color']};
+        color: ${({ theme }) => theme.component['accordion-header-text-color']};
         transition: border-radius 0.1s ease;
     }
 
     &:focus {
         box-shadow: inset 0 0 0 2px ${({ theme }) => theme.component['accordion-header-focus-box-shadow-inset-color']};
-        color: ${({ theme }) => theme.component['accordion-header-focus-text-color']};
     }
 
     &:hover {
         background: ${({ theme }) => theme.component['accordion-header-hover-background-color']};
         border-color: ${({ theme }) => theme.component['accordion-header-hover-border-color']};
-        color: ${({ theme }) => theme.component['accordion-header-hover-color']};
+        color: ${({ theme }) => theme.component['accordion-header-hover-text-color']};
     }
 
     > svg {
@@ -104,11 +105,11 @@ const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     &:disabled {
         background-color: ${({ theme }) => theme.component['accordion-header-disabled-background-color']};
         &:hover {
-            border-color: ${({ theme }) => theme.component['accordion-header-disabled-hover-border-color']};
-            color: ${({ theme }) => theme.component['accordion-header-disabled-hover-text-color']};
+            border-color: ${({ theme }) => theme.component['accordion-header-disabled-border-color']};
+            color: ${({ theme }) => theme.component['accordion-header-disabled-text-color']};
         }
         > svg {
-            color: ${({ theme }) => theme.component['accordion-header-disabled-svg-color']};
+            color: ${({ theme }) => theme.component['accordion-header-disabled-icon-color']};
         }
     }
 `;

diff --git a/packages/react/src/themes/tokens/component/accordion-tokens.ts b/packages/react/src/themes/tokens/component/accordion-tokens.ts
@@ -5,19 +5,17 @@ export type AccordionTokens =
     | 'accordion-panel-background-color'
     | 'accordion-panel-border-color'
     | 'accordion-panel-text-color'
+    | 'accordion-header-background-color'
     | 'accordion-header-border-color'
     | 'accordion-header-text-color'
-    | 'accordion-header-expanded-background-color'
-    | 'accordion-header-expanded-text-color'
-    | 'accordion-header-focus-box-shadow-inset-color'
-    | 'accordion-header-focus-text-color'
     | 'accordion-header-hover-background-color'
     | 'accordion-header-hover-border-color'
-    | 'accordion-header-hover-color'
+    | 'accordion-header-hover-text-color'
     | 'accordion-header-disabled-background-color'
-    | 'accordion-header-disabled-hover-border-color'
-    | 'accordion-header-disabled-hover-text-color'
-    | 'accordion-header-disabled-svg-color';
+    | 'accordion-header-disabled-border-color'
+    | 'accordion-header-disabled-text-color'
+    | 'accordion-header-disabled-icon-color'
+    | 'accordion-header-focus-box-shadow-inset-color';
 
 export type AccordionTokenValue = AliasTokens | RefTokens;
 
@@ -29,17 +27,15 @@ export const defaultAccordionTokens: AccordionTokenMap = {
     'accordion-panel-background-color': 'color-neutral-02',
     'accordion-panel-border-color': 'color-neutral-15',
     'accordion-panel-text-color': 'color-neutral-90',
+    'accordion-header-background-color': 'color-white',
     'accordion-header-border-color': 'color-neutral-15',
     'accordion-header-text-color': 'color-neutral-90',
-    'accordion-header-expanded-background-color': 'color-white',
-    'accordion-header-expanded-text-color': 'color-neutral-90',
-    'accordion-header-focus-box-shadow-inset-color': 'color-brand-20',
-    'accordion-header-focus-text-color': 'color-neutral-90',
     'accordion-header-hover-background-color': 'color-neutral-15',
-    'accordion-header-hover-border-color': 'color-neutral-90',
-    'accordion-header-hover-color': 'color-neutral-90',
+    'accordion-header-hover-border-color': 'color-black',
+    'accordion-header-hover-text-color': 'color-black',
     'accordion-header-disabled-background-color': 'color-neutral-05',
-    'accordion-header-disabled-hover-border-color': 'color-neutral-15',
-    'accordion-header-disabled-hover-text-color': 'color-neutral-30',
-    'accordion-header-disabled-svg-color': 'color-neutral-30',
+    'accordion-header-disabled-border-color': 'color-neutral-15',
+    'accordion-header-disabled-text-color': 'color-neutral-30',
+    'accordion-header-disabled-icon-color': 'color-neutral-30',
+    'accordion-header-focus-box-shadow-inset-color': 'color-brand-20',
 };