@adea-ai/ui 0.71.6 → 0.72.1

package/dist/r/src/components/ui/switch/switch.tsx

@@ -21,6 +21,8 @@ export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'>
   thumbClass?: string
   labelClass?: string
   descriptionClass?: string
+  label?: JSX.Element
+  description?: JSX.Element
   /**
    * Replaces the control and label. Omit it to get the default control beside
    * `label` and `description`; supply it to compose the parts yourself.
@@ -36,16 +38,30 @@ export function Switch(props: SwitchProps) {
     'labelClass',
     'descriptionClass',
     'children',
+    'label',
+    'description',
     'aria-label',
     'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
-    <KobalteSwitch class={cn('group/switch flex items-center gap-2.5', local.class)} {...rest}>
+    <KobalteSwitch
+      title={local.title}
+      class={cn('group/switch flex items-center gap-2.5', local.class)}
+      {...rest}
+    >
       {/* The name belongs on the input; see Checkbox for why. */}
       <KobalteSwitch.Input
         aria-label={local['aria-label']}
         aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
       />
       <KobalteSwitch.Control
         class={cn(
@@ -67,14 +83,23 @@ export function Switch(props: SwitchProps) {
           )}
         />
       </KobalteSwitch.Control>
-      {local.children ?? (
-        <div class="grid gap-0.5">
-          <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)} />
-          <KobalteSwitch.Description
-            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
-          />
-        </div>
-      )}
+      {local.children ??
+        (local.label || local.description ? (
+          <div class="grid gap-0.5">
+            {local.label ? (
+              <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>
+                {local.label}
+              </KobalteSwitch.Label>
+            ) : null}
+            {local.description ? (
+              <KobalteSwitch.Description
+                class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+              >
+                {local.description}
+              </KobalteSwitch.Description>
+            ) : null}
+          </div>
+        ) : null)}
     </KobalteSwitch>
   )
 }

package/dist/r/src/lib/themes.ts

@@ -39,6 +39,7 @@ import {
   chartSeries,
   getAccent,
   hasTheme,
+  shadcnDestructiveProjection,
   statusForeground,
   tint,
   primaryHover,
@@ -78,6 +79,9 @@ export type ThemeColors = {
   destructive: string
   destructiveForeground: string
   destructiveSubtle: string
+  /** Contrast-safe solid-action presentation, derived from the canonical error role. */
+  destructiveAction: string
+  destructiveActionForeground: string
   success: string
   successForeground: string
   successSubtle: string
@@ -170,10 +174,12 @@ export type ThemeVariant = {
 /**
  * Canonical role → this system's `ThemeColors` key.
  *
- * Read by {@link toVariant}. Every key of `ThemeColors` must appear, so a role added
- * to this system fails the type check rather than silently resolving to `undefined`.
+ * Read by {@link toVariant}. The two derived destructive-action presentation values
+ * are intentionally excluded; the shared Themes adapter owns their color math.
  */
-const ROLE_FOR: Readonly<Record<keyof ThemeColors, keyof AdeaThemeRecord['colors']>> = {
+type ThemeRole = Exclude<keyof ThemeColors, 'destructiveAction' | 'destructiveActionForeground'>
+
+const ROLE_FOR: Readonly<Record<ThemeRole, keyof AdeaThemeRecord['colors']>> = {
   background: 'background',
   foreground: 'text',
   card: 'surface',
@@ -216,14 +222,17 @@ const ROLE_FOR: Readonly<Record<keyof ThemeColors, keyof AdeaThemeRecord['colors
 /** Builds the design system's view of one catalogue entry. */
 function toVariant(theme: AdeaThemeRecord): ThemeVariant {
   const colors = {} as ThemeColors
-  for (const key of Object.keys(ROLE_FOR) as (keyof ThemeColors)[]) {
+  for (const key of Object.keys(ROLE_FOR) as ThemeRole[]) {
     colors[key] = theme.colors[ROLE_FOR[key]]
   }
-  // The label on a solid destructive fill is measured rather than mapped: on a bright
-  // red it is black and on a deep red it is white, and using the body text would put
-  // white on a mid-tone red at about 3:1.
+  // Keep the semantic foreground paired with the canonical error role. Filled
+  // destructive actions use the distinct projection below so their /90 hover state
+  // remains readable without changing icons, borders, or tinted status surfaces.
   colors.destructiveForeground = statusForeground(theme, 'error')
   colors.destructiveSubtle = tint(theme.colors.error, theme.colors.background)
+  const destructiveAction = shadcnDestructiveProjection(theme)
+  colors.destructiveAction = destructiveAction.fill
+  colors.destructiveActionForeground = destructiveAction.foreground
   colors.successForeground = statusForeground(theme, 'success')
   colors.successSubtle = tint(theme.colors.success, theme.colors.background)
   colors.warningForeground = statusForeground(theme, 'warning')
@@ -397,6 +406,8 @@ export function themeCssVariables(theme: ThemeVariant): Record<string, string> {
     '--destructive': c.destructive,
     '--destructive-foreground': c.destructiveForeground,
     '--destructive-subtle': c.destructiveSubtle,
+    '--destructive-action': c.destructiveAction,
+    '--destructive-action-foreground': c.destructiveActionForeground,
     '--success': c.success,
     '--success-foreground': c.successForeground,
     '--success-subtle': c.successSubtle,

package/dist/r/src/lib/tokens.ts

@@ -184,13 +184,14 @@ export const colorTokens: TokenDefinition[] = [
     name: 'destructive',
     kind: 'color',
     themed: true,
-    description: 'Irreversible or dangerous actions.',
+    description: 'The canonical error hue for semantic status indicators and tinted notices.',
   },
   {
     name: 'destructive-foreground',
     kind: 'color',
     themed: true,
-    description: 'Label on `destructive`.',
+    description:
+      'Text on the canonical error hue; solid actions use `destructive-action-foreground`.',
   },
   {
     name: 'destructive-subtle',
@@ -198,6 +199,18 @@ export const colorTokens: TokenDefinition[] = [
     themed: true,
     description: 'Opaque destructive tint against the canvas; subtle labels use foreground.',
   },
+  {
+    name: 'destructive-action',
+    kind: 'color',
+    themed: true,
+    description: 'Contrast-safe solid fill for destructive actions, derived from the error role.',
+  },
+  {
+    name: 'destructive-action-foreground',
+    kind: 'color',
+    themed: true,
+    description: 'Text on the destructive action fill and its 90% hover composition.',
+  },
   { name: 'success', kind: 'color', themed: true, description: 'A completed or healthy state.' },
   { name: 'success-foreground', kind: 'color', themed: true, description: 'Label on `success`.' },
   {

package/dist/r/src/styles/theme.css

@@ -81,6 +81,8 @@
   /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.4705 0.1626 25.78);
   --destructive-foreground: oklch(0.933 0.016 261.79);
+  --destructive-action: oklch(0.4705 0.1626 25.78);
+  --destructive-action-foreground: oklch(0.933 0.016 261.79);
   --success: oklch(0.4311 0.1809 145.62);
   --success-foreground: oklch(0.933 0.016 261.79);
   --warning: oklch(0.4556 0.1401 79.91);
@@ -216,6 +218,8 @@
   /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.7345 0.1626 25.78);
   --destructive-foreground: oklch(0.1918 0.0238 265.37);
+  --destructive-action: oklch(0.7345 0.1626 25.78);
+  --destructive-action-foreground: oklch(0.1918 0.0238 265.37);
   --success: oklch(0.6951 0.1809 145.62);
   --success-foreground: oklch(0.1918 0.0238 265.37);
   --warning: oklch(0.7196 0.1401 79.91);
@@ -730,6 +734,8 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-subtle: var(--destructive-subtle);
+  --color-destructive-action: var(--destructive-action);
+  --color-destructive-action-foreground: var(--destructive-action-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-success-subtle: var(--success-subtle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.71.6",
+  "version": "0.72.1",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -106,7 +106,7 @@
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {
-    "@adea-ai/themes": "^0.6.1",
+    "@adea-ai/themes": "^0.6.2",
     "@corvu/calendar": "^0.1.2",
     "@corvu/drawer": "^0.2.4",
     "@corvu/otp-field": "^0.1.4",

package/registry.json

@@ -1670,7 +1670,7 @@
       "title": "Appearance Editor",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.6.1",
+        "@adea-ai/themes@^0.6.2",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.48.0"
       ],
@@ -2064,7 +2064,7 @@
       "title": "Class-name and token helpers",
       "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
       "dependencies": [
-        "@adea-ai/themes@^0.6.1",
+        "@adea-ai/themes@^0.6.2",
         "class-variance-authority@^0.7.1",
         "clsx@^2.1.1",
         "tailwind-merge@^3.7.0"

package/src/components/theme/theme-picker.tsx

@@ -47,7 +47,7 @@ export function ThemeSwatch(props: ThemeSwatchProps) {
           colors().card,
           colors().primary,
           colors().accent,
-          colors().destructive,
+          colors().destructiveAction,
         ]}
       >
         {(color) => (
@@ -109,7 +109,10 @@ export function ThemePreview(props: ThemePreviewProps) {
           <div class="h-1 w-16 rounded-full" style={{ 'background-color': c().mutedForeground }} />
           <div class="mt-auto flex items-center gap-1">
             <span class="h-3 w-9 rounded-sm" style={{ 'background-color': c().primary }} />
-            <span class="h-3 w-6 rounded-sm" style={{ 'background-color': c().destructive }} />
+            <span
+              class="h-3 w-6 rounded-sm"
+              style={{ 'background-color': c().destructiveAction }}
+            />
             <span class="h-3 w-6 rounded-sm" style={{ 'background-color': c().secondary }} />
           </div>
         </div>

package/src/components/ui/button/button.tsx

@@ -29,7 +29,7 @@ export const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-hover',
         /** For the action that destroys something. Never the default. */
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive-subtle',
+          'bg-destructive-action text-destructive-action-foreground hover:bg-destructive-action/90 focus-visible:ring-destructive-subtle',
         /** A bordered button for a surface that already has a fill. */
         outline:
           'border border-border bg-transparent text-foreground hover:bg-surface-hover hover:border-input',

package/src/components/ui/checkbox/checkbox.tsx

@@ -21,6 +21,8 @@ export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'childr
   controlClass?: string
   labelClass?: string
   descriptionClass?: string
+  label?: JSX.Element
+  description?: JSX.Element
   /**
    * Replaces the control and label. Omit it to get the default control beside
    * `label` and `description`; supply it to compose the parts yourself.
@@ -35,13 +37,23 @@ export function Checkbox(props: CheckboxProps) {
     'labelClass',
     'descriptionClass',
     'children',
+    'label',
+    'description',
     'indeterminate',
     'aria-label',
     'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
-    <KobalteCheckbox class={cn('group/checkbox flex items-start gap-2.5', local.class)} {...rest}>
+    <KobalteCheckbox
+      title={local.title}
+      class={cn('group/checkbox flex items-start gap-2.5', local.class)}
+      {...rest}
+    >
       {/*
        * The name goes on the input, which is what carries the value and takes
        * focus. On the Root it would land on a plain div and name nothing — the
@@ -50,6 +62,10 @@ export function Checkbox(props: CheckboxProps) {
       <KobalteCheckbox.Input
         aria-label={local['aria-label']}
         aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
       />
       <KobalteCheckbox.Control
         class={cn(
@@ -67,14 +83,23 @@ export function Checkbox(props: CheckboxProps) {
           {local.indeterminate ? <Minus class="size-3" /> : <Check class="size-3" />}
         </KobalteCheckbox.Indicator>
       </KobalteCheckbox.Control>
-      {local.children ?? (
-        <div class="grid gap-0.5 leading-none">
-          <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)} />
-          <KobalteCheckbox.Description
-            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
-          />
-        </div>
-      )}
+      {local.children ??
+        (local.label || local.description ? (
+          <div class="grid gap-0.5">
+            {local.label ? (
+              <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>
+                {local.label}
+              </KobalteCheckbox.Label>
+            ) : null}
+            {local.description ? (
+              <KobalteCheckbox.Description
+                class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+              >
+                {local.description}
+              </KobalteCheckbox.Description>
+            ) : null}
+          </div>
+        ) : null)}
     </KobalteCheckbox>
   )
 }

package/src/components/ui/radio-group/radio-group.tsx

@@ -25,7 +25,8 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
   controlClass?: string
   /**
    * The option's visible label. A radio with no accessible name is unreachable
-   * by a screen reader and by voice control, so supply this or a child.
+   * by a screen reader and by voice control, so supply this, a labelled child,
+   * `aria-label`, or `aria-labelledby`.
    */
   label?: string
   description?: string
@@ -38,14 +39,28 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
     'label',
     'description',
     'children',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
     <KobalteRadioGroup.Item
+      title={local.title}
       class={cn('group/radio flex items-start gap-2.5', local.class)}
       {...rest}
     >
-      <KobalteRadioGroup.ItemInput />
+      <KobalteRadioGroup.ItemInput
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
+      />
       <KobalteRadioGroup.ItemControl
         class={cn(
           'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',
@@ -63,9 +78,11 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       </KobalteRadioGroup.ItemControl>
       {local.children ?? (
         <div class="grid gap-0.5 leading-none">
-          <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
-            {local.label}
-          </KobalteRadioGroup.ItemLabel>
+          {local.label ? (
+            <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
+              {local.label}
+            </KobalteRadioGroup.ItemLabel>
+          ) : null}
           {local.description ? (
             <KobalteRadioGroup.ItemDescription class="text-muted-foreground text-sm">
               {local.description}

package/src/components/ui/switch/switch.tsx

@@ -21,6 +21,8 @@ export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'>
   thumbClass?: string
   labelClass?: string
   descriptionClass?: string
+  label?: JSX.Element
+  description?: JSX.Element
   /**
    * Replaces the control and label. Omit it to get the default control beside
    * `label` and `description`; supply it to compose the parts yourself.
@@ -36,16 +38,30 @@ export function Switch(props: SwitchProps) {
     'labelClass',
     'descriptionClass',
     'children',
+    'label',
+    'description',
     'aria-label',
     'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
-    <KobalteSwitch class={cn('group/switch flex items-center gap-2.5', local.class)} {...rest}>
+    <KobalteSwitch
+      title={local.title}
+      class={cn('group/switch flex items-center gap-2.5', local.class)}
+      {...rest}
+    >
       {/* The name belongs on the input; see Checkbox for why. */}
       <KobalteSwitch.Input
         aria-label={local['aria-label']}
         aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
       />
       <KobalteSwitch.Control
         class={cn(
@@ -67,14 +83,23 @@ export function Switch(props: SwitchProps) {
           )}
         />
       </KobalteSwitch.Control>
-      {local.children ?? (
-        <div class="grid gap-0.5">
-          <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)} />
-          <KobalteSwitch.Description
-            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
-          />
-        </div>
-      )}
+      {local.children ??
+        (local.label || local.description ? (
+          <div class="grid gap-0.5">
+            {local.label ? (
+              <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>
+                {local.label}
+              </KobalteSwitch.Label>
+            ) : null}
+            {local.description ? (
+              <KobalteSwitch.Description
+                class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+              >
+                {local.description}
+              </KobalteSwitch.Description>
+            ) : null}
+          </div>
+        ) : null)}
     </KobalteSwitch>
   )
 }

package/src/lib/themes.ts

@@ -39,6 +39,7 @@ import {
   chartSeries,
   getAccent,
   hasTheme,
+  shadcnDestructiveProjection,
   statusForeground,
   tint,
   primaryHover,
@@ -78,6 +79,9 @@ export type ThemeColors = {
   destructive: string
   destructiveForeground: string
   destructiveSubtle: string
+  /** Contrast-safe solid-action presentation, derived from the canonical error role. */
+  destructiveAction: string
+  destructiveActionForeground: string
   success: string
   successForeground: string
   successSubtle: string
@@ -170,10 +174,12 @@ export type ThemeVariant = {
 /**
  * Canonical role → this system's `ThemeColors` key.
  *
- * Read by {@link toVariant}. Every key of `ThemeColors` must appear, so a role added
- * to this system fails the type check rather than silently resolving to `undefined`.
+ * Read by {@link toVariant}. The two derived destructive-action presentation values
+ * are intentionally excluded; the shared Themes adapter owns their color math.
  */
-const ROLE_FOR: Readonly<Record<keyof ThemeColors, keyof AdeaThemeRecord['colors']>> = {
+type ThemeRole = Exclude<keyof ThemeColors, 'destructiveAction' | 'destructiveActionForeground'>
+
+const ROLE_FOR: Readonly<Record<ThemeRole, keyof AdeaThemeRecord['colors']>> = {
   background: 'background',
   foreground: 'text',
   card: 'surface',
@@ -216,14 +222,17 @@ const ROLE_FOR: Readonly<Record<keyof ThemeColors, keyof AdeaThemeRecord['colors
 /** Builds the design system's view of one catalogue entry. */
 function toVariant(theme: AdeaThemeRecord): ThemeVariant {
   const colors = {} as ThemeColors
-  for (const key of Object.keys(ROLE_FOR) as (keyof ThemeColors)[]) {
+  for (const key of Object.keys(ROLE_FOR) as ThemeRole[]) {
     colors[key] = theme.colors[ROLE_FOR[key]]
   }
-  // The label on a solid destructive fill is measured rather than mapped: on a bright
-  // red it is black and on a deep red it is white, and using the body text would put
-  // white on a mid-tone red at about 3:1.
+  // Keep the semantic foreground paired with the canonical error role. Filled
+  // destructive actions use the distinct projection below so their /90 hover state
+  // remains readable without changing icons, borders, or tinted status surfaces.
   colors.destructiveForeground = statusForeground(theme, 'error')
   colors.destructiveSubtle = tint(theme.colors.error, theme.colors.background)
+  const destructiveAction = shadcnDestructiveProjection(theme)
+  colors.destructiveAction = destructiveAction.fill
+  colors.destructiveActionForeground = destructiveAction.foreground
   colors.successForeground = statusForeground(theme, 'success')
   colors.successSubtle = tint(theme.colors.success, theme.colors.background)
   colors.warningForeground = statusForeground(theme, 'warning')
@@ -397,6 +406,8 @@ export function themeCssVariables(theme: ThemeVariant): Record<string, string> {
     '--destructive': c.destructive,
     '--destructive-foreground': c.destructiveForeground,
     '--destructive-subtle': c.destructiveSubtle,
+    '--destructive-action': c.destructiveAction,
+    '--destructive-action-foreground': c.destructiveActionForeground,
     '--success': c.success,
     '--success-foreground': c.successForeground,
     '--success-subtle': c.successSubtle,

package/src/lib/tokens.ts

@@ -184,13 +184,14 @@ export const colorTokens: TokenDefinition[] = [
     name: 'destructive',
     kind: 'color',
     themed: true,
-    description: 'Irreversible or dangerous actions.',
+    description: 'The canonical error hue for semantic status indicators and tinted notices.',
   },
   {
     name: 'destructive-foreground',
     kind: 'color',
     themed: true,
-    description: 'Label on `destructive`.',
+    description:
+      'Text on the canonical error hue; solid actions use `destructive-action-foreground`.',
   },
   {
     name: 'destructive-subtle',
@@ -198,6 +199,18 @@ export const colorTokens: TokenDefinition[] = [
     themed: true,
     description: 'Opaque destructive tint against the canvas; subtle labels use foreground.',
   },
+  {
+    name: 'destructive-action',
+    kind: 'color',
+    themed: true,
+    description: 'Contrast-safe solid fill for destructive actions, derived from the error role.',
+  },
+  {
+    name: 'destructive-action-foreground',
+    kind: 'color',
+    themed: true,
+    description: 'Text on the destructive action fill and its 90% hover composition.',
+  },
   { name: 'success', kind: 'color', themed: true, description: 'A completed or healthy state.' },
   { name: 'success-foreground', kind: 'color', themed: true, description: 'Label on `success`.' },
   {

package/src/styles/theme.css

@@ -81,6 +81,8 @@
   /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.4705 0.1626 25.78);
   --destructive-foreground: oklch(0.933 0.016 261.79);
+  --destructive-action: oklch(0.4705 0.1626 25.78);
+  --destructive-action-foreground: oklch(0.933 0.016 261.79);
   --success: oklch(0.4311 0.1809 145.62);
   --success-foreground: oklch(0.933 0.016 261.79);
   --warning: oklch(0.4556 0.1401 79.91);
@@ -216,6 +218,8 @@
   /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.7345 0.1626 25.78);
   --destructive-foreground: oklch(0.1918 0.0238 265.37);
+  --destructive-action: oklch(0.7345 0.1626 25.78);
+  --destructive-action-foreground: oklch(0.1918 0.0238 265.37);
   --success: oklch(0.6951 0.1809 145.62);
   --success-foreground: oklch(0.1918 0.0238 265.37);
   --warning: oklch(0.7196 0.1401 79.91);
@@ -730,6 +734,8 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-subtle: var(--destructive-subtle);
+  --color-destructive-action: var(--destructive-action);
+  --color-destructive-action-foreground: var(--destructive-action-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-success-subtle: var(--success-subtle);