refactor(components): use semantic design tokens

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 = () => (

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

@@ -1,6 +1,7 @@
 .custom-badge {
+  --ods-badge-border-radius: 16px;
+
   border: 2px solid #4b0082;
-  border-radius: 16px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   background-color: #8a2be2;
   padding: 4px 8px;

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

@@ -1,4 +1,4 @@
-import { BADGE_COLORS, Badge } from '.';
+import { BADGE_COLORS, BADGE_SIZES, Badge } from '.';
 import style from './dev.module.css';
 
 export default {
@@ -31,3 +31,18 @@ export const Default = () => (
     Default
   </Badge>
 );
+
+export const Sizes = () => (
+  <div style={{ display: 'flex', flexFlow: 'row', columnGap: '8px' }}>
+    {
+      BADGE_SIZES.map((size) => (
+        <Badge
+          style={{ alignSelf: 'center' }}
+          key={ size }
+          size={ size }>
+          Badge - { size }
+        </Badge>
+      ))
+    }
+  </div>
+);

packages/ods-react/src/components/breadcrumb/src/components/breadcrumb-ellipsis/breadcrumbEllipsis.module.scss

@@ -11,7 +11,7 @@
       background-color: transparent;
       padding: 0;
       line-height: 1;
-      color: var(--ods-color-text);
+      color: var(--ods-theme-text-color);
       font-weight: 600;
     }
   }

packages/ods-react/src/components/breadcrumb/src/components/breadcrumb-item/breadcrumbItem.module.scss

@@ -1,6 +1,6 @@
 @layer ods-molecules {
   .breadcrumb-item {
-    color: var(--ods-color-text);
+    color: var(--ods-theme-text-color);
     font-weight: 600;
   }
 }

packages/ods-react/src/components/breadcrumb/src/components/breadcrumb-separator/breadcrumbSeparator.module.scss

@@ -1,10 +1,8 @@
-@use '../breadcrumb/breadcrumb.module';
-
 @layer ods-molecules {
   .breadcrumb-separator {
     &::after {
-      padding: 0 breadcrumb.$breadcrumb-spacing;
-      color: var(--ods-color-text);
+      padding: 0 var(--ods-theme-padding-horizontal);
+      color: var(--ods-theme-text-color);
       font-weight: 700;
       content: '|';
     }

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

@@ -1,5 +1,3 @@
-$breadcrumb-spacing: 8px;
-
 @layer ods-molecules {
   .breadcrumb {
     &__list {

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

@@ -104,7 +104,7 @@
       inset: 0;
       align-items: center;
       justify-content: center;
-      background-color: var(--ods-color-neutral-100);
+      background-color: var(--ods-theme-background-color-disabled);
     }
   }
 }

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

@@ -12,3 +12,8 @@
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }
+
+.custom-button-critical {
+  --ods-theme-border-color-critical: #c47e01;
+  --ods-theme-background-color-critical: #ffa400;
+}

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

@@ -1,4 +1,4 @@
-import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_VARIANTS, Button } from '.';
+import { BUTTON_COLOR, BUTTON_COLORS, BUTTON_SIZES, BUTTON_VARIANTS, Button } from '.';
 import style from './dev.module.css';
 
 export default {
@@ -30,9 +30,21 @@ export const Colors = () => (
 );
 
 export const CustomStyle = () => (
-  <Button className={ style['custom-button'] }>
-    Custom Styled Button
-  </Button>
+  <>
+    <Button className={ style['custom-button'] }>
+      Custom Styled Button
+    </Button>
+
+    <br /><br />
+    <Button color={ BUTTON_COLOR.critical }>
+      Normal critical
+    </Button>
+    <Button
+      className={ style['custom-button-critical'] }
+      color={ BUTTON_COLOR.critical }>
+      Overridden critical
+    </Button>
+  </>
 );
 
 export const Default = () => (
@@ -54,15 +66,24 @@ export const Accessibility = () => (
 )
 
 export const Sizes = () => (
-  <div style={{ display: 'flex', flexFlow: 'row', columnGap: '16px' }}>
+  <div style={{ display: 'flex', flexFlow: 'column', rowGap: '16px' }}>
     {
-      BUTTON_SIZES.map((size) => (
-        <Button
-          style={{ alignSelf: 'center' }}
-          key={ size }
-          size={ size }>
-          Button - { size }
-        </Button>
+      BUTTON_VARIANTS.map((variant) => (
+        <div
+          key={ variant }
+          style={{ display: 'flex', flexFlow: 'row', columnGap: '8px' }}>
+          {
+            BUTTON_SIZES.map((size) => (
+              <Button
+                style={{ alignSelf: 'center' }}
+                key={ size }
+                size={ size }
+                variant={ variant }>
+                { variant } - { size }
+              </Button>
+            ))
+          }
+        </div>
       ))
     }
   </div>