@infonomic/uikit 2.15.0 → 3.1.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/dropdown/dropdown.module.css

@@ -5,13 +5,13 @@
   .dropdown-content,
   .dropdown-subcontent {
     z-index: 20;
-    background-color: var(--canvas-25);
+    background-color: var(--surface-panel-elevated);
     padding: 4px;
     animation-duration: 400ms;
     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
     will-change: transform, opacity;
     border-width: var(--border-width-thin);
-    border-color: var(--border-color);
+    border-color: var(--surface-panel-border);
     border-style: var(--border-style-solid);
     border-radius: var(--border-radius-md);
     box-shadow: var(--shadow-sm);
@@ -41,6 +41,8 @@
     width: 100%;
     padding: 5px 2px;
     font-size: var(--font-size-sm);
+    color: var(--surface-item-text);
+    background-color: var(--surface-item);
     transition: background-color 0.2s;
     cursor: default;
     outline: none;
@@ -51,38 +53,21 @@
   .dropdown-item:hover,
   .dropdown-item:focus,
   .dropdown-item[data-highlighted] {
-    background-color: var(--canvas-50);
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
   }
 
   .dropdown-separator {
     margin: 0 auto;
     width: 90%;
-    background-color: var(--border-color);
+    background-color: var(--surface-panel-border);
     margin: var(--spacing-1) 0;
     border-top-width: var(--border-width-thin);
-    border-top-color: var(--border-color);
+    border-top-color: var(--surface-panel-border);
     border-top-style: var(--border-style-solid);
   }
 
-  /* 🌙 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) {
-
-    .dropdown-content:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .dropdown-subcontent:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      background-color: var(--canvas-800);
-    }
-
-    /* Updated to also cover data-highlighted presence */
-    .dropdown-item:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .dropdown-item:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)),
-    .dropdown-item[data-highlighted]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      background-color: var(--canvas-700);
-    }
-  }
+  /* Dark mode handled by surface tokens in theme layer */
 
   @keyframes slideUpAndFade {
     from {

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/help-text.module.css

@@ -3,17 +3,6 @@
 @layer infonomic-components {
   .text {
     font-size: 0.875rem;
-    color: var(--gray-800)
-  }
-
-  /* 🌙 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) {
-    .text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-      color: var(--gray-300);
-    }
+    color: var(--muted)
   }
 }

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: {},
 }