@infonomic/uikit 2.14.0 → 3.0.0

package/src/components/button/copy-button.stories.tsx

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { intent } from '../@types/shared.js'
 import { variant } from './@types/button.js'
-import { CopyButton } from './copy-button.js'
+import { CopyButton as CopyButtonComponent } from './copy-button.js'
 
-type Story = StoryObj<typeof CopyButton>
+type Story = StoryObj<typeof CopyButtonComponent>
 
 const CopyDemo = (): React.JSX.Element => {
   return (
@@ -19,7 +19,7 @@ const CopyDemo = (): React.JSX.Element => {
           >
             {variant.map((v) => {
               return (
-                <CopyButton
+                <CopyButtonComponent
                   text="I should be in your clipboard."
                   key={`${i}-${v}`}
                   intent={i}
@@ -34,17 +34,17 @@ const CopyDemo = (): React.JSX.Element => {
   )
 }
 
-export const Copy: Story = {
+export const CopyButtons: Story = {
   render: () => <CopyDemo />,
 }
 
-const meta: Meta<typeof CopyButton> = {
+const meta: Meta<typeof CopyButtonComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Components/Button',
-  component: CopyButton,
+  component: CopyButtonComponent,
 }
 
 export default meta

package/src/components/button/copy-button.tsx

@@ -4,7 +4,6 @@ import cx from 'classnames'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
-import { CopyIcon } from '../../icons'
 import { Tooltip } from '../tooltip/tooltip.js'
 import type { ButtonProps } from './button.js'
 import { Button } from './button.js'
@@ -60,15 +59,6 @@ export function CopyButton({
     }
   })
 
-  const svgColor =
-    intent === 'noeffect' ||
-    intent === 'secondary' ||
-    intent === 'warning' ||
-    variant === 'outlined' ||
-    variant === 'text'
-      ? styles['copy-button-foreground']
-      : styles['copy-button-foreground-reversed']
-
   const tooltipText = copied != null && copied ? copiedText : hoverText
 
   return (
@@ -80,11 +70,25 @@ export function CopyButton({
           intent={intent}
           fullWidth={fullWidth}
           ripple={ripple}
-          className={cx('copy-button', variant, size, intent, styles['copy-button'], className)}
+          className={cx('copy-button', variant, size, intent, styles[size], className)}
           onClick={handleCopied}
           {...rest}
         >
-          <CopyIcon svgClassName={cx(svgColor, svgClassName)} width="18px" height="18px" />
+          <svg
+            className={svgClassName}
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+            viewBox="0 0 15 15"
+            strokeWidth="0"
+          >
+            <path
+              d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
+              fill="currentColor"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            />
+          </svg>
         </Button>
       </Tooltip>
     </div>

package/src/components/calendar/calendar.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof CalendarComponent> = {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Components/Calendar',
+  title: 'Components/Input/Calendar',
   component: CalendarComponent,
 }
 

package/src/components/input/checkbox.module.css

@@ -109,125 +109,69 @@
 
   /* Intents */
   .primary {
-    --checkbox-variant-outlined-border: var(--primary-400);
-    --checkbox-variant-outlined: var(--primary-400);
-    --checkbox-variant-outlined-hover-border: var(--primary-500);
-    --checkbox-variant-outline-ring-color: var(--primary-400);
-    --checkbox-variant-filled: var(--primary-400);
+    --checkbox-variant-outlined-border: var(--fill-primary-strong);
+    --checkbox-variant-outlined: var(--fill-primary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-primary);
+    --checkbox-variant-filled: var(--fill-primary-strong);
+    --checkbox-icon-color: var(--text-on-primary);
   }
 
   .secondary {
-    --checkbox-variant-outlined-border: var(--secondary-500);
-    --checkbox-variant-outlined: var(--secondary-500);
-    --checkbox-variant-outlined-hover-border: var(--secondary-500);
-    --checkbox-variant-outline-ring-color: var(--secondary-500);
-    --checkbox-variant-filled: var(--secondary-500);
+    --checkbox-variant-outlined-border: var(--fill-secondary-strong);
+    --checkbox-variant-outlined: var(--fill-secondary-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-secondary);
+    --checkbox-variant-filled: var(--fill-secondary-strong);
+    --checkbox-icon-color: var(--text-on-secondary);
   }
 
   .noeffect {
-    --checkbox-variant-outlined-border: var(--gray-400);
-    --checkbox-variant-outlined: var(--gray-400);
-    --checkbox-variant-outlined-hover-border: var(--gray-400);
-    --checkbox-variant-outline-ring-color: var(--gray-400);
-    --checkbox-variant-filled: var(--gray-400);
+    --checkbox-variant-outlined-border: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined: var(--fill-noeffect-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-noeffect);
+    --checkbox-variant-filled: var(--fill-noeffect-strong);
+    --checkbox-icon-color: var(--text-on-noeffect);
   }
 
   .success {
-    --checkbox-variant-outlined-border: var(--green-400);
-    --checkbox-variant-outlined: var(--green-400);
-    --checkbox-variant-outlined-hover-border: var(--green-400);
-    --checkbox-variant-outline-ring-color: var(--green-400);
-    --checkbox-variant-filled: var(--green-400);
+    --checkbox-variant-outlined-border: var(--fill-success-strong);
+    --checkbox-variant-outlined: var(--fill-success-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-success);
+    --checkbox-variant-filled: var(--fill-success-strong);
+    --checkbox-icon-color: var(--text-on-success);
   }
 
   .info {
-    --checkbox-variant-outlined-border: var(--blue-400);
-    --checkbox-variant-outlined: var(--blue-400);
-    --checkbox-variant-outlined-hover-border: var(--blue-400);
-    --checkbox-variant-outline-ring-color: var(--blue-400);
-    --checkbox-variant-filled: var(--blue-400);
+    --checkbox-variant-outlined-border: var(--fill-info-strong);
+    --checkbox-variant-outlined: var(--fill-info-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-info);
+    --checkbox-variant-filled: var(--fill-info-strong);
+    --checkbox-icon-color: var(--text-on-info);
   }
 
   .warning {
-    --checkbox-variant-outlined-border: var(--yellow-400);
-    --checkbox-variant-outlined: var(--yellow-400);
-    --checkbox-variant-outlined-hover-border: var(--yellow-400);
-    --checkbox-variant-outline-ring-color: var(--yellow-400);
-    --checkbox-variant-filled: var(--yellow-400);
+    --checkbox-variant-outlined-border: var(--fill-warning-strong);
+    --checkbox-variant-outlined: var(--fill-warning-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-warning);
+    --checkbox-variant-filled: var(--fill-warning-strong);
+    --checkbox-icon-color: var(--text-on-warning);
   }
 
   .danger {
-    --checkbox-variant-outlined-border: var(--red-400);
-    --checkbox-variant-outlined: var(--red-400);
-    --checkbox-variant-outlined-hover-border: var(--red-400);
-    --checkbox-variant-outline-ring-color: var(--red-400);
-    --checkbox-variant-filled: var(--red-400);
+    --checkbox-variant-outlined-border: var(--fill-danger-strong);
+    --checkbox-variant-outlined: var(--fill-danger-strong);
+    --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
+    --checkbox-variant-outline-ring-color: var(--ring-danger);
+    --checkbox-variant-filled: var(--fill-danger-strong);
+    --checkbox-icon-color: var(--text-on-danger);
   }
 
-  /* 🌙 Dark via `.dark` class. We rely on the 
-  * consuming application to detect a user's preferred
-  * color scheme - either by header or cookie, and set
-  * a root html class accordingly
-  */
-  :global(.dark) {
-
-    /* Intents */
-    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--primary-300);
-      --checkbox-variant-outlined: var(--primary-300);
-      --checkbox-variant-outlined-hover-border: var(--primary-500);
-      --checkbox-variant-outline-ring-color: var(--primary-300);
-      --checkbox-variant-filled: var(--primary-500);
-    }
-
-    .secondary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--secondary-500);
-      --checkbox-variant-outlined: var(--secondary-500);
-      --checkbox-variant-outlined-hover-border: var(--secondary-500);
-      --checkbox-variant-outline-ring-color: var(--secondary-500);
-      --checkbox-variant-filled: var(--secondary-500);
-    }
-
-    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--gray-400);
-      --checkbox-variant-outlined: var(--gray-400);
-      --checkbox-variant-outlined-hover-border: var(--gray-400);
-      --checkbox-variant-outline-ring-color: var(--gray-400);
-      --checkbox-variant-filled: var(--gray-400);
-    }
-
-    .success:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--green-400);
-      --checkbox-variant-outlined: var(--green-400);
-      --checkbox-variant-outlined-hover-border: var(--green-400);
-      --checkbox-variant-outline-ring-color: var(--green-400);
-      --checkbox-variant-filled: var(--green-400);
-    }
-
-    .info:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--blue-400);
-      --checkbox-variant-outlined: var(--blue-400);
-      --checkbox-variant-outlined-hover-border: var(--blue-400);
-      --checkbox-variant-outline-ring-color: var(--blue-400);
-      --checkbox-variant-filled: var(--blue-400);
-    }
-
-    .warning:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--yellow-400);
-      --checkbox-variant-outlined: var(--yellow-400);
-      --checkbox-variant-outlined-hover-border: var(--yellow-400);
-      --checkbox-variant-outline-ring-color: var(--yellow-400);
-      --checkbox-variant-filled: var(--yellow-400);
-    }
-
-    .danger:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --checkbox-variant-outlined-border: var(--red-400);
-      --checkbox-variant-outlined: var(--red-400);
-      --checkbox-variant-outlined-hover-border: var(--red-400);
-      --checkbox-variant-outline-ring-color: var(--red-400);
-      --checkbox-variant-filled: var(--red-400);
-    }
-  }
+  /* Dark mode handled by semantic tokens in theme layer */
 
   @keyframes checkBoxIn {
     0% {

package/src/components/input/input.module.css

@@ -169,142 +169,67 @@
 
   /* Intents */
   .primary {
-    --input-variant-outlined-border: var(--primary-300);
-    --input-variant-outlined-hover-border: var(--primary-500);
-    --input-variant-outline-ring-color: var(--primary-300);
-    --input-variant-underlined-border: var(--primary-300);
-    --input-variant-underlined-hover-border: var(--primary-500);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-primary);
+    --input-variant-outlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-outline-ring-color: var(--ring-primary);
+    --input-variant-underlined-border: var(--stroke-primary);
+    --input-variant-underlined-hover-border: var(--stroke-primary-hover);
+    --input-variant-filled: var(--fill-primary-weak);
   }
 
   .secondary {
-    --input-variant-outlined-border: var(--secondary-600);
-    --input-variant-outlined-hover-border: var(--secondary-800);
-    --input-variant-outline-ring-color: var(--secondary-600);
-    --input-variant-underlined-border: var(--secondary-600);
-    --input-variant-underlined-hover-border: var(--secondary-800);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-secondary);
+    --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-outline-ring-color: var(--ring-secondary);
+    --input-variant-underlined-border: var(--stroke-secondary);
+    --input-variant-underlined-hover-border: var(--stroke-secondary-hover);
+    --input-variant-filled: var(--fill-secondary-weak);
   }
 
   .noeffect {
-    --input-variant-outlined-border: var(--gray-500);
-    --input-variant-outlined-hover-border: var(--gray-700);
-    --input-variant-outline-ring-color: var(--gray-700);
-    --input-variant-underlined-border: var(--gray-500);
-    --input-variant-underlined-hover-border: var(--gray-700);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-noeffect);
+    --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-outline-ring-color: var(--ring-noeffect);
+    --input-variant-underlined-border: var(--stroke-noeffect);
+    --input-variant-underlined-hover-border: var(--stroke-noeffect-hover);
+    --input-variant-filled: var(--fill-noeffect-weak);
   }
 
   .success {
-    --input-variant-outlined-border: var(--green-300);
-    --input-variant-outlined-hover-border: var(--green-600);
-    --input-variant-outline-ring-color: var(--green-600);
-    --input-variant-underlined-border: var(--green-300);
-    --input-variant-underlined-hover-border: var(--green-600);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-success);
+    --input-variant-outlined-hover-border: var(--stroke-success-hover);
+    --input-variant-outline-ring-color: var(--ring-success);
+    --input-variant-underlined-border: var(--stroke-success);
+    --input-variant-underlined-hover-border: var(--stroke-success-hover);
+    --input-variant-filled: var(--fill-success-weak);
   }
 
   .info {
-    --input-variant-outlined-border: var(--blue-300);
-    --input-variant-outlined-hover-border: var(--blue-600);
-    --input-variant-outline-ring-color: var(--blue-300);
-    --input-variant-underlined-border: var(--blue-100);
-    --input-variant-underlined-hover-border: var(--blue-400);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-info);
+    --input-variant-outlined-hover-border: var(--stroke-info-hover);
+    --input-variant-outline-ring-color: var(--ring-info);
+    --input-variant-underlined-border: var(--stroke-info);
+    --input-variant-underlined-hover-border: var(--stroke-info-hover);
+    --input-variant-filled: var(--fill-info-weak);
   }
 
   .warning {
-    --input-variant-outlined-border: var(--yellow-600);
-    --input-variant-outlined-hover-border: var(--yellow-800);
-    --input-variant-outline-ring-color: var(--yellow-600);
-    --input-variant-underlined-border: var(--yellow-600);
-    --input-variant-underlined-hover-border: var(--yellow-800);
-    --input-variant-filled: var(--gray-50);
+    --input-variant-outlined-border: var(--stroke-warning);
+    --input-variant-outlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-outline-ring-color: var(--ring-warning);
+    --input-variant-underlined-border: var(--stroke-warning);
+    --input-variant-underlined-hover-border: var(--stroke-warning-hover);
+    --input-variant-filled: var(--fill-warning-weak);
   }
 
   .danger {
-    --input-variant-outlined-border: var(--red-300);
-    --input-variant-outlined-hover-border: var(--red-600);
-    --input-variant-outline-ring-color: var(--red-600);
-    --input-variant-underlined-border: var(--red-300);
-    --input-variant-underlined-hover-border: var(--red-600);
-    --input-variant-filled: var(--gray-50);
-  }
-
-  /* 🌙 Dark via `.dark` class. We rely on the 
-  * consuming application to detect a user's preferred
-  * color scheme - either by header or cookie, and set
-  * a root html class accordingly
-  */
-  :global(.dark) {
-
-    .input:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .input:active:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --ring-offset-color: var(--background);
-    }
-
-    /* Intents */
-    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--primary-200);
-      --input-variant-outlined-hover-border: var(--primary-100);
-      --input-variant-outline-ring-color: var(--primary-200);
-      --input-variant-underlined-border: var(--primary-200);
-      --input-variant-underlined-hover-border: var(--primary-100);
-      --input-variant-filled: var(--canvas-800);
-    }
-
-    .secondary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--secondary-600);
-      --input-variant-outlined-hover-border: var(--secondary-400);
-      --input-variant-outline-ring-color: var(--secondary-600);
-      --input-variant-underlined-border: var(--secondary-600);
-      --input-variant-underlined-hover-border: var(--secondary-400);
-      --input-variant-filled: var(--canvas-800);
-    }
-
-    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--gray-500);
-      --input-variant-outlined-hover-border: var(--gray-300);
-      --input-variant-outline-ring-color: var(--gray-400);
-      --input-variant-underlined-border: var(--gray-500);
-      --input-variant-underlined-hover-border: var(--gray-300);
-      --input-variant-filled: var(--canvas-800);
-    }
-
-    .success:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--green-500);
-      --input-variant-outlined-hover-border: var(--green-300);
-      --input-variant-outline-ring-color: var(--green-400);
-      --input-variant-underlined-border: var(--green-500);
-      --input-variant-underlined-hover-border: var(--green-300);
-      --input-variant-filled: var(--canvas-800);
-    }
-
-    .info:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--blue-500);
-      --input-variant-outlined-hover-border: var(--blue-300);
-      --input-variant-outline-ring-color: var(--blue-400);
-      --input-variant-underlined-border: var(--blue-500);
-      --input-variant-underlined-hover-border: var(--blue-300);
-      --input-variant-filled: var(--canvas-800);
-    }
-
-    .warning:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--yellow-500);
-      --input-variant-outlined-hover-border: var(--yellow-300);
-      --input-variant-outline-ring-color: var(--yellow-400);
-      --input-variant-underlined-border: var(--yellow-500);
-      --input-variant-underlined-hover-border: var(--yellow-300);
-      --input-variant-filled: var(--canvas-800);
-    }
-
-    .danger:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --input-variant-outlined-border: var(--red-500);
-      --input-variant-outlined-hover-border: var(--red-300);
-      --input-variant-outline-ring-color: var(--red-400);
-      --input-variant-underlined-border: var(--red-500);
-      --input-variant-underlined-hover-border: var(--red-500);
-      --input-variant-filled: var(--canvas-800);
-    }
+    --input-variant-outlined-border: var(--stroke-danger);
+    --input-variant-outlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-outline-ring-color: var(--ring-danger);
+    --input-variant-underlined-border: var(--stroke-danger);
+    --input-variant-underlined-hover-border: var(--stroke-danger-hover);
+    --input-variant-filled: var(--fill-danger-weak);
   }
+
+  /* Dark mode handled by semantic tokens in theme layer */
 }

package/src/components/input/input.stories.tsx

@@ -9,7 +9,7 @@ import { size, variant } from './@types/input.js'
 import { Input, InputAdornment } from './index.js'
 
 export default {
-  title: 'Components/Input/TextInput',
+  title: 'Components/Input/Text',
   component: Input,
   argTypes: {},
 }

package/src/components/input/radio-group.module.css

@@ -89,98 +89,42 @@
 
   /* Intents */
   .primary {
-    --radio-border: var(--primary-400);
-    /* --ring-color: var(--primary-400); */
-    --radio-indicator-color: var(--primary-400);
+    --radio-border: var(--fill-primary-strong);
+    --radio-indicator-color: var(--fill-primary-strong);
   }
 
   .secondary {
-    --radio-border: var(--secondary-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--secondary-400);
+    --radio-border: var(--fill-secondary-strong);
+    --radio-indicator-color: var(--fill-secondary-strong);
   }
 
   .noeffect {
-    --radio-border: var(--gray-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--gray-400);
+    --radio-border: var(--fill-noeffect-strong);
+    --radio-indicator-color: var(--fill-noeffect-strong);
   }
 
   .success {
-    --radio-border: var(--green-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--green-400);
+    --radio-border: var(--fill-success-strong);
+    --radio-indicator-color: var(--fill-success-strong);
   }
 
   .info {
-    --radio-border: var(--blue-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--blue-400);
+    --radio-border: var(--fill-info-strong);
+    --radio-indicator-color: var(--fill-info-strong);
   }
 
   .warning {
-    --radio-border: var(--yellow-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--yellow-400);
+    --radio-border: var(--fill-warning-strong);
+    --radio-indicator-color: var(--fill-warning-strong);
   }
 
   .danger {
-    --radio-border: var(--red-400);
-    /* --ring-color: var(--secondary-400); */
-    --radio-indicator-color: var(--red-400);
-  }
-
-  /* 🌙 Dark via `.dark` class. We rely on the 
-  * consuming application to detect a user's preferred
-  * color scheme - either by header or cookie, and set
-  * a root html class accordingly
-  */
-  :global(.dark) {
-
-    /* Intents */
-    .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--primary-300);
-      /* --ring-color: var(--primary-400); */
-      --radio-indicator-color: var(--primary-300);
-    }
-
-    .secondary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--secondary-500);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--secondary-500);
-    }
-
-    .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      ---radio-border: var(--gray-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--gray-400);
-    }
-
-    .success:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--green-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--green-400);
-    }
-
-    .info:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--blue-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--blue-400);
-    }
-
-    .warning:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--yellow-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--yellow-400);
-    }
-
-    .danger:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      --radio-border: var(--red-400);
-      /* --ring-color: var(--secondary-400); */
-      --radio-indicator-color: var(--red-400);
-    }
+    --radio-border: var(--fill-danger-strong);
+    --radio-indicator-color: var(--fill-danger-strong);
   }
 
+  /* Dark mode handled by semantic tokens in theme layer */
+
   @keyframes radioIn {
     0% {
       opacity: 0;

package/src/components/input/radio-group.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta = {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Components/RadioGroup',
+  title: 'Components/Input',
   component: RadioGroupComponent,
 }
 

package/src/components/input/select.stories.tsx

@@ -4,7 +4,7 @@ import type React from 'react'
 import { Select, SelectItem, type SelectValue } from './select.js'
 
 export default {
-  title: 'Components/Select',
+  title: 'Components/Input/Select',
   component: Select,
   argTypes: {},
 }

package/src/components/notifications/alert.module.css

@@ -42,10 +42,6 @@
     margin-top: -2px;
   }
 
-  .close svg {
-    fill: white
-  }
-
   .fade {
     opacity: 0;
     transition: opacity 0.4s ease-in-out;

package/src/components/overlay/overlay.tsx

@@ -38,7 +38,7 @@ const BodyLock = (): null => {
       if(appBar != null) appBar.classList.remove('app-bar-overlay-shown')
       if (mediaMatch.matches) {
         classList.remove('overlay-shown--desktop')
-        if (appBar != null) appBar.classList.remove('app-bar-overlay-shown app-bar-overlay-shown--desktop')
+        if (appBar != null) appBar.classList.remove('app-bar-overlay-shown', 'app-bar-overlay-shown--desktop')
       } else {
         classList.remove('overlay-shown--mobile')
         if (appBar != null) appBar.classList.remove('app-bar-overlay-shown--mobile')

package/src/icons/close-icon.tsx

@@ -6,7 +6,7 @@ import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'
 
 export const CloseIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-contrast'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('close-icon', className)} {...rest}>

package/src/icons/copy-icon.tsx

@@ -9,7 +9,7 @@ import type { IconProps } from './types/icon.js'
 import styles from './icons.module.css'
 
 export const CopyIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
-  const applied = cx(styles['fill-gray'], svgClassName)
+  const applied = cx(styles['fill-current'], svgClassName)
 
   return (
     <IconElement className={cx('copy-icon', className)} {...rest}>
@@ -23,7 +23,6 @@ export const CopyIcon = ({ className, svgClassName, ...rest }: IconProps): React
       >
         <path
           d="M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z"
-          // fill="currentColor"
           fillRule="evenodd"
           clipRule="evenodd"
         />