refactor(components): use semantic design tokens

Author: dpellier

packages/ods-react/src/components/accordion/src/components/accordion-content/AccordionContent.tsx

@@ -12,11 +12,10 @@ const AccordionContent: FC<AccordionContentProp> = forwardRef(({
 }, ref): JSX.Element => {
   return (
     <Accordion.ItemContent
-      className={ classNames(style[ 'accordion-content' ], className) }
+      className={ classNames(style['accordion-content'], className) }
       data-ods="accordion-content"
       ref={ ref }
-      { ...props }
-    >
+      { ...props }>
       { children }
     </Accordion.ItemContent>
   );

packages/ods-react/src/components/accordion/src/components/accordion-content/accordionContent.module.scss

@@ -1,7 +1,5 @@
-@use "../accordion/accordion.module";
-
 @layer ods-atoms {
   .accordion-content {
-    padding: 0 accordion.$ods-accordion-padding accordion.$ods-accordion-padding;
+    padding: 0 var(--ods-accordion-padding) var(--ods-accordion-padding);
   }
 }

packages/ods-react/src/components/accordion/src/components/accordion-item/AccordionItem.tsx

@@ -23,13 +23,12 @@ const AccordionItem: FC<AccordionItemProp> = forwardRef(({
 }, ref): JSX.Element => {
   return (
     <Accordion.Item
-      className={ classNames(style[ 'accordion-item' ], className) }
+      className={ classNames(style['accordion-item'], className) }
       data-ods="accordion-item"
       disabled={ disabled }
       ref={ ref }
       value={ value }
-      { ...props }
-    >
+      { ...props }>
       { children }
     </Accordion.Item>
   );

packages/ods-react/src/components/accordion/src/components/accordion-item/accordionItem.module.scss

@@ -1,26 +1,23 @@
-@use '../../../../../style/focus';
 @use '../../../../../style/state';
-@use "../accordion/accordion.module";
 
 @layer ods-atoms {
   .accordion-item {
     display: grid;
-    border-width: accordion.$ods-accordion-border-size;
+    position: relative;
+    border-width: var(--ods-accordion-border-width);
     border-style: solid;
-    border-color: transparent;
+    border-color: var(--ods-accordion-border-color);
 
     &:not(:first-child) {
       margin-top: -1px;
     }
 
     &:not([data-disabled]) {
-      &[data-state='closed']:hover, &:focus-within {
-        transition: .3s border-color ease-out;
-        border-color: var(--ods-color-primary-200);
-      }
-
-      &[data-state='open'] {
-        border-color: var(--ods-color-primary-500);
+      &[data-state='open'],
+      &[data-state='closed']:hover,
+      &:focus-within {
+        z-index: 1;
+        border-color: var(--ods-accordion-border-color-hover);
       }
     }
 

packages/ods-react/src/components/accordion/src/components/accordion-trigger/AccordionTrigger.tsx

@@ -13,17 +13,17 @@ const AccordionTrigger: FC<AccordionTriggerProp> = forwardRef(({
 }, ref): JSX.Element => {
   return (
     <Accordion.ItemTrigger
-      className={ classNames(style[ 'accordion-trigger' ], className) }
+      className={ classNames(style['accordion-trigger'], className) }
       data-ods="accordion-trigger"
       ref={ ref }
       { ...props }>
-      <div className={ style[ 'accordion-trigger__content' ] }>
+      <div className={ style['accordion-trigger__content'] }>
         { children }
       </div>
 
       <Accordion.ItemIndicator asChild>
         <Icon
-          className={ style[ 'accordion-trigger__icon' ] }
+          className={ style['accordion-trigger__icon'] }
           name={ ICON_NAME.chevronDown } />
       </Accordion.ItemIndicator>
     </Accordion.ItemTrigger>

packages/ods-react/src/components/accordion/src/components/accordion-trigger/accordionTrigger.module.scss

@@ -1,19 +1,17 @@
 @use '../../../../../style/focus';
-@use '../../../../../style/state';
-@use "../accordion/accordion.module";
 
 @layer ods-atoms {
   .accordion-trigger {
     $trigger: &;
 
     display: grid;
     grid-template-columns: 1fr max-content;
-    column-gap: accordion.$ods-accordion-padding;
+    column-gap: var(--ods-accordion-padding);
     align-items: center;
-    border: accordion.$ods-accordion-border-size solid transparent;
+    border: solid var(--ods-accordion-border-width) transparent;
     background: transparent;
     cursor: pointer;
-    padding: accordion.$ods-accordion-padding;
+    padding: var(--ods-accordion-padding);
     text-align: left;
     font-family: inherit;
     font-size: inherit;
@@ -27,14 +25,14 @@
         @include focus.ods-focus();
       }
 
-      &[data-state='open'] {
+      &[data-state="open"] {
         #{$trigger}__icon {
           transform: rotate(180deg);
         }
       }
 
       #{$trigger}__icon {
-        color: var(--ods-color-primary-500);
+        color: var(--ods-theme-primary-color);
         font-size: 1.25rem;
       }
     }

packages/ods-react/src/components/accordion/src/components/accordion/Accordion.tsx

@@ -1,6 +1,7 @@
 import { Accordion as VendorAccordion } from '@ark-ui/react/accordion';
 import classNames from 'classnames';
 import { type ComponentPropsWithRef, type FC, type JSX, forwardRef } from 'react';
+import styles from './accordion.module.scss';
 
 interface AccordionChangeDetail {
   value: string[],
@@ -40,7 +41,7 @@ const Accordion: FC<AccordionProp> = forwardRef(({
 }, ref): JSX.Element => {
   return (
     <VendorAccordion.Root
-      className={ classNames(className) }
+      className={ classNames(styles['accordion'], className) }
       collapsible={ true }
       data-ods="accordion"
       defaultValue={ defaultValue }
@@ -49,8 +50,7 @@ const Accordion: FC<AccordionProp> = forwardRef(({
       multiple={ multiple }
       onValueChange={ onChange }
       value={ value }
-      { ...props }
-    />
+      { ...props } />
   );
 });
 

packages/ods-react/src/components/accordion/src/components/accordion/accordion.module.scss

@@ -1,2 +1,8 @@
-$ods-accordion-border-size: 1px;
-$ods-accordion-padding: 24px;
+@layer ods-atoms {
+  .accordion {
+    --ods-accordion-border-color: var(--ods-color-neutral-200);
+    --ods-accordion-border-color-hover: var(--ods-color-neutral-500);
+    --ods-accordion-border-width: 1px;
+    --ods-accordion-padding: 24px;
+  }
+}

packages/ods-react/src/components/accordion/src/dev.module.css

@@ -0,0 +1,4 @@
+.custom-accordion {
+  --ods-accordion-border-width: 4px;
+  --ods-accordion-padding: 40px;
+}

packages/ods-react/src/components/accordion/src/dev.stories.tsx

@@ -1,28 +1,38 @@
 import { useState } from 'react';
+import { Button } from '../../button/src';
+import { Text } from '../../text/src';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '.';
-import { Button } from '../../button/src/index';
-import { Text } from '../../text/src/index';
+import style from './dev.module.css';
 
 export default {
   component: Accordion,
   title: 'Accordion dev',
 };
 
+export const CustomStyle = () => (
+  <Accordion className={ style['custom-accordion'] }>
+    <AccordionItem value="1">
+      <AccordionTrigger>
+        My content
+      </AccordionTrigger>
+      <AccordionContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+);
+
 export const Default = () => (
-  <div style={ { width: '300px' } }>
-    <Accordion>
-      <AccordionItem value="1">
-        <AccordionTrigger>
-          <Text preset="paragraph">My content</Text>
-        </AccordionTrigger>
-        <AccordionContent>
-          <Text preset="paragraph">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </Text>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  </div>
+  <Accordion>
+    <AccordionItem value="1">
+      <AccordionTrigger>
+        My content
+      </AccordionTrigger>
+      <AccordionContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
 );
 
 export const Multiple = () => (