@egcs/newui 0.0.0-stage → 0.1.0-alpha.1

package/dist/tailwind/source/forms/input-group/input-group.css

@@ -0,0 +1,123 @@
+@layer components {
+  .nui-input-group {
+    display: flex;
+    align-items: stretch;
+    padding: 0;
+  }
+  .nui-input-group > :is(input, textarea).nui-text-control {
+    flex: 1;
+    width: 0;
+    min-height: calc(var(--nui-text-height) - 2px);
+    height: auto;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+  .nui-input-group > .nui-text-control:first-child {
+    border-start-start-radius: max(0px, calc(var(--nui-text-radius) - 1px));
+    border-end-start-radius: max(0px, calc(var(--nui-text-radius) - 1px));
+  }
+  .nui-input-group > .nui-text-control:last-child {
+    border-start-end-radius: max(0px, calc(var(--nui-text-radius) - 1px));
+    border-end-end-radius: max(0px, calc(var(--nui-text-radius) - 1px));
+  }
+  .nui-input-group:where([data-readonly], :has(> [readonly])):not([data-disabled]):not(
+    :has(> :disabled)
+  ) {
+    background: var(--nui-surface);
+  }
+  .nui-input-group > .nui-text-control:focus-visible {
+    outline: none;
+  }
+  .nui-input-group-icon,
+  .nui-input-group-addon,
+  .nui-input-group-action {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--nui-muted-foreground);
+    border-radius: inherit;
+  }
+  .nui-input-group-icon {
+    width: calc(var(--nui-text-height) - 2px);
+    pointer-events: none;
+  }
+  .nui-input-group-icon > svg {
+    width: 1em;
+    height: 1em;
+  }
+  .nui-input-group-icon[data-placement="start"] {
+    order: -1;
+    margin-inline-end: -0.375rem;
+  }
+  .nui-input-group-icon[data-placement="end"] {
+    order: 1;
+    margin-inline-start: -0.375rem;
+  }
+  .nui-input-group-addon {
+    padding-inline: var(--nui-text-padding);
+    background: var(--nui-surface);
+  }
+  .nui-input-group-addon[data-placement="start"] {
+    border-inline-end: 1px solid var(--nui-border);
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .nui-input-group-addon[data-placement="end"] {
+    border-inline-start: 1px solid var(--nui-border);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .nui-input-group-action {
+    padding: 0.1875rem;
+  }
+  .nui-input-group[data-attached] > .nui-input-group-action {
+    padding: 0;
+    margin-block: -1px;
+  }
+  .nui-input-group[data-attached] > .nui-input-group-action[data-placement="end"] {
+    margin-inline-end: -1px;
+  }
+  .nui-input-group[data-attached] > .nui-input-group-action[data-placement="start"] {
+    margin-inline-start: -1px;
+  }
+  .nui-input-group:has(> .nui-input-group-icon[data-placement="start"]) > .nui-text-control {
+    padding-inline-start: 0.375rem;
+  }
+  .nui-input-group:has(> .nui-input-group-icon[data-placement="end"]) > .nui-text-control {
+    padding-inline-end: 0.375rem;
+  }
+  .nui-input-group[data-valid] > .nui-input-group-icon {
+    color: var(--nui-success-text);
+  }
+  .nui-input-group[data-invalid] > .nui-input-group-icon {
+    color: var(--nui-danger-text);
+  }
+  .nui-input-group:is([data-disabled], :has(> .nui-text-control:disabled))
+    > :where(.nui-input-group-icon, .nui-input-group-addon) {
+    color: var(--nui-disabled-foreground);
+    background: var(--nui-disabled-background);
+  }
+}
+
+@layer utilities {
+  /* Shared field dimensions take precedence over an action Button's size recipe. */
+  .nui-input-group-action > .nui-button {
+    height: calc(var(--nui-text-height) - 0.5rem);
+    min-height: 0;
+    font-size: inherit;
+    border-radius: inherit;
+  }
+  .nui-input-group[data-attached] > .nui-input-group-action > .nui-button {
+    height: var(--nui-text-height);
+  }
+  .nui-input-group[data-attached] > .nui-input-group-action[data-placement="end"] > .nui-button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .nui-input-group[data-attached] > .nui-input-group-action[data-placement="start"] > .nui-button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+}

package/dist/tailwind/source/forms/input-group/input-group.styles.css

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../text-control.styles.css";
+@import "../../actions/button/button.styles.css";
+@import "../../feedback/loading/loading.styles.css";
+@import "./input-group.css";

package/dist/tailwind/source/forms/text-control.css

@@ -0,0 +1,100 @@
+@layer components {
+  .nui-text-control {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--nui-text-height);
+    padding: var(--nui-text-block) var(--nui-text-padding);
+    border: 1px solid var(--nui-text-border);
+    border-radius: var(--nui-text-radius);
+    background: var(--nui-background);
+    color: var(--nui-foreground);
+    font-family: inherit;
+    font-size: var(--nui-text-font);
+    line-height: var(--nui-leading-normal);
+    transition:
+      border-color var(--nui-motion-duration),
+      outline-color var(--nui-motion-duration);
+  }
+  .nui-text-control::placeholder {
+    color: var(--nui-muted-foreground);
+  }
+  input.nui-text-control {
+    height: var(--nui-text-height);
+  }
+  textarea.nui-text-control {
+    display: block;
+    padding-block: 0.625rem;
+  }
+  textarea.nui-text-control[data-resize="vertical"] {
+    resize: vertical;
+  }
+  textarea.nui-text-control[data-resize="horizontal"] {
+    resize: horizontal;
+  }
+  textarea.nui-text-control[data-resize="both"] {
+    resize: both;
+  }
+  textarea.nui-text-control[data-resize="none"] {
+    resize: none;
+  }
+  .nui-text-control:where(input, textarea):where(:not(:disabled, :read-only)):hover,
+  .nui-input-group:where(:not([data-disabled], [data-readonly])):hover {
+    border-color: var(--nui-text-hover);
+  }
+  .nui-text-control:where(input, textarea):focus-visible,
+  .nui-input-group:has(> .nui-text-control:focus-visible) {
+    outline: var(--nui-focus-width) solid var(--nui-text-focus);
+    outline-offset: -1px;
+    border-color: var(--nui-text-focus);
+  }
+  .nui-text-control[data-valid] {
+    border-color: var(--nui-success-border);
+  }
+  .nui-text-control[data-valid]:not(:disabled, [data-disabled]):hover,
+  .nui-text-control[data-valid]:focus-visible,
+  .nui-input-group[data-valid]:has(> .nui-text-control:focus-visible) {
+    border-color: var(--nui-success-border-hover);
+    outline-color: var(--nui-success-focus);
+  }
+  .nui-text-control[data-invalid] {
+    border-color: var(--nui-danger-border);
+  }
+  .nui-text-control[data-invalid]:not(:disabled, [data-disabled]):hover,
+  .nui-text-control[data-invalid]:focus-visible,
+  .nui-input-group[data-invalid]:has(> .nui-text-control:focus-visible) {
+    border-color: var(--nui-danger-border-hover);
+    outline-color: var(--nui-danger-focus);
+  }
+  .nui-text-control[data-loading] {
+    cursor: progress;
+  }
+  .nui-text-control:is(input, textarea):read-only {
+    background: var(--nui-surface);
+  }
+  .nui-text-control:disabled,
+  .nui-input-group[data-disabled],
+  .nui-input-group:has(> .nui-text-control:disabled) {
+    background: var(--nui-disabled-background);
+    border-color: var(--nui-disabled-border);
+    color: var(--nui-disabled-foreground);
+    cursor: not-allowed;
+  }
+  .nui-text-control:disabled::placeholder {
+    color: var(--nui-disabled-foreground);
+  }
+  input.nui-text-control[data-appearance="static"]:where(:not(:disabled)) {
+    padding-inline: 0;
+    border-color: transparent;
+    background: transparent;
+    border-radius: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nui-text-control {
+      transition: none;
+    }
+  }
+  [data-motion="reduced"] .nui-text-control {
+    transition: none;
+  }
+}

package/dist/tailwind/source/forms/text-control.recipe.ts

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants/lite";
+
+export const textControlRecipe = tv({
+  base: "nui-text-control",
+  variants: {
+    size: {
+      sm: "nui:[--nui-text-height:var(--nui-control-height-sm)] nui:[--nui-text-font:var(--nui-font-size-sm)] nui:[--nui-text-padding:0.625rem] nui:[--nui-text-block:0.25rem]",
+      md: "nui:[--nui-text-height:var(--nui-control-height-md)] nui:[--nui-text-font:var(--nui-font-size-base)] nui:[--nui-text-padding:0.75rem] nui:[--nui-text-block:0.375rem]",
+      lg: "nui:[--nui-text-height:var(--nui-control-height-lg)] nui:[--nui-text-font:var(--nui-font-size-lg)] nui:[--nui-text-padding:1rem] nui:[--nui-text-block:0.5rem]",
+    },
+    tone: {
+      neutral:
+        "nui:[--nui-text-border:var(--nui-control-border)] nui:[--nui-text-hover:var(--nui-control-border-hover)] nui:[--nui-text-focus:var(--nui-focus-ring)]",
+      primary:
+        "nui:[--nui-text-border:var(--nui-primary-border)] nui:[--nui-text-hover:var(--nui-primary-border-hover)] nui:[--nui-text-focus:var(--nui-primary-focus)]",
+      info: "nui:[--nui-text-border:var(--nui-info-border)] nui:[--nui-text-hover:var(--nui-info-border-hover)] nui:[--nui-text-focus:var(--nui-info-focus)]",
+      success:
+        "nui:[--nui-text-border:var(--nui-success-border)] nui:[--nui-text-hover:var(--nui-success-border-hover)] nui:[--nui-text-focus:var(--nui-success-focus)]",
+      warning:
+        "nui:[--nui-text-border:var(--nui-warning-border)] nui:[--nui-text-hover:var(--nui-warning-border-hover)] nui:[--nui-text-focus:var(--nui-warning-focus)]",
+      danger:
+        "nui:[--nui-text-border:var(--nui-danger-border)] nui:[--nui-text-hover:var(--nui-danger-border-hover)] nui:[--nui-text-focus:var(--nui-danger-focus)]",
+    },
+    rounded: {
+      true: "nui:[--nui-text-radius:999px]",
+      false: "nui:[--nui-text-radius:var(--nui-radius-md)]",
+    },
+  },
+  defaultVariants: { size: "md", tone: "neutral", rounded: false },
+});

package/dist/tailwind/source/forms/text-control.styles.css

@@ -0,0 +1,4 @@
+@import "../styles/foundations.css";
+@import "./text-control.css";
+
+@source "./text-control.recipe.ts";

package/dist/tailwind/source/forms/textarea/textarea.styles.css

@@ -0,0 +1,2 @@
+@import "../../styles/foundations.css";
+@import "../text-control.styles.css";

package/dist/tailwind/source/foundations/base.css

@@ -0,0 +1,3 @@
+@import "./tokens.css";
+@import "./metrics.css";
+@import "./theme.css";

package/dist/tailwind/source/foundations/metrics.css

@@ -0,0 +1,44 @@
+:root {
+  --nui-font-sans:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --nui-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  --nui-font-size-xs: 0.75rem;
+  --nui-font-size-sm: 0.875rem;
+  --nui-font-size-base: 1rem;
+  --nui-font-size-lg: 1.125rem;
+  --nui-font-size-xl: 1.25rem;
+  --nui-font-size-2xl: 1.5rem;
+  --nui-font-size-3xl: 1.875rem;
+  --nui-font-size-4xl: 2.25rem;
+  --nui-font-size-5xl: 3rem;
+  --nui-font-size-display-sm: 2rem;
+  --nui-font-size-display-md: 2.5rem;
+  --nui-font-weight-normal: 400;
+  --nui-font-weight-medium: 500;
+  --nui-font-weight-semibold: 600;
+  --nui-leading-tight: 1.25;
+  --nui-leading-snug: 1.375;
+  --nui-leading-normal: 1.5;
+  --nui-leading-relaxed: 1.625;
+  --nui-tracking-tight: -0.025em;
+  --nui-space-unit: 0.25rem;
+  --nui-radius-xs: 0.125rem;
+  --nui-radius-sm: 0.25rem;
+  --nui-radius-md: 0.375rem;
+  --nui-radius-lg: 0.5rem;
+  --nui-radius-xl: 0.75rem;
+  --nui-radius-2xl: 1rem;
+  --nui-radius-3xl: 1.5rem;
+  --nui-radius-4xl: 2rem;
+  --nui-control-height-xs: 1.5rem;
+  --nui-control-height-sm: 2rem;
+  --nui-control-height-md: 2.5rem;
+  --nui-control-height-lg: 3rem;
+  --nui-focus-width: 2px;
+  --nui-focus-offset: 2px;
+  --nui-motion-duration: 150ms;
+  --nui-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}

package/dist/tailwind/source/foundations/radix.css

@@ -0,0 +1,82 @@
+/*! Generated from @radix-ui/colors (MIT). Run bun run colors:generate; do not edit values. */
+:root {
+  --nui-slate-1: light-dark(#fcfcfd, #111113);
+  --nui-slate-2: light-dark(#f9f9fb, #18191b);
+  --nui-slate-3: light-dark(#f0f0f3, #212225);
+  --nui-slate-4: light-dark(#e8e8ec, #272a2d);
+  --nui-slate-5: light-dark(#e0e1e6, #2e3135);
+  --nui-slate-6: light-dark(#d9d9e0, #363a3f);
+  --nui-slate-7: light-dark(#cdced6, #43484e);
+  --nui-slate-8: light-dark(#b9bbc6, #5a6169);
+  --nui-slate-9: light-dark(#8b8d98, #696e77);
+  --nui-slate-10: light-dark(#80838d, #777b84);
+  --nui-slate-11: light-dark(#60646c, #b0b4ba);
+  --nui-slate-12: light-dark(#1c2024, #edeef0);
+  --nui-blue-1: light-dark(#fbfdff, #0d1520);
+  --nui-blue-2: light-dark(#f4faff, #111927);
+  --nui-blue-3: light-dark(#e6f4fe, #0d2847);
+  --nui-blue-4: light-dark(#d5efff, #003362);
+  --nui-blue-5: light-dark(#c2e5ff, #004074);
+  --nui-blue-6: light-dark(#acd8fc, #104d87);
+  --nui-blue-7: light-dark(#8ec8f6, #205d9e);
+  --nui-blue-8: light-dark(#5eb1ef, #2870bd);
+  --nui-blue-9: light-dark(#0090ff, #0090ff);
+  --nui-blue-10: light-dark(#0588f0, #3b9eff);
+  --nui-blue-11: light-dark(#0d74ce, #70b8ff);
+  --nui-blue-12: light-dark(#113264, #c2e6ff);
+  --nui-sky-1: light-dark(#f9feff, #0d141f);
+  --nui-sky-2: light-dark(#f1fafd, #111a27);
+  --nui-sky-3: light-dark(#e1f6fd, #112840);
+  --nui-sky-4: light-dark(#d1f0fa, #113555);
+  --nui-sky-5: light-dark(#bee7f5, #154467);
+  --nui-sky-6: light-dark(#a9daed, #1b537b);
+  --nui-sky-7: light-dark(#8dcae3, #1f6692);
+  --nui-sky-8: light-dark(#60b3d7, #197cae);
+  --nui-sky-9: light-dark(#7ce2fe, #7ce2fe);
+  --nui-sky-10: light-dark(#74daf8, #a8eeff);
+  --nui-sky-11: light-dark(#00749e, #75c7f0);
+  --nui-sky-12: light-dark(#1d3e56, #c2f3ff);
+  --nui-green-1: light-dark(#fbfefc, #0e1512);
+  --nui-green-2: light-dark(#f4fbf6, #121b17);
+  --nui-green-3: light-dark(#e6f6eb, #132d21);
+  --nui-green-4: light-dark(#d6f1df, #113b29);
+  --nui-green-5: light-dark(#c4e8d1, #174933);
+  --nui-green-6: light-dark(#adddc0, #20573e);
+  --nui-green-7: light-dark(#8eceaa, #28684a);
+  --nui-green-8: light-dark(#5bb98b, #2f7c57);
+  --nui-green-9: light-dark(#30a46c, #30a46c);
+  --nui-green-10: light-dark(#2b9a66, #33b074);
+  --nui-green-11: light-dark(#218358, #3dd68c);
+  --nui-green-12: light-dark(#193b2d, #b1f1cb);
+  --nui-amber-1: light-dark(#fefdfb, #16120c);
+  --nui-amber-2: light-dark(#fefbe9, #1d180f);
+  --nui-amber-3: light-dark(#fff7c2, #302008);
+  --nui-amber-4: light-dark(#ffee9c, #3f2700);
+  --nui-amber-5: light-dark(#fbe577, #4d3000);
+  --nui-amber-6: light-dark(#f3d673, #5c3d05);
+  --nui-amber-7: light-dark(#e9c162, #714f19);
+  --nui-amber-8: light-dark(#e2a336, #8f6424);
+  --nui-amber-9: light-dark(#ffc53d, #ffc53d);
+  --nui-amber-10: light-dark(#ffba18, #ffd60a);
+  --nui-amber-11: light-dark(#ab6400, #ffca16);
+  --nui-amber-12: light-dark(#4f3422, #ffe7b3);
+  --nui-red-1: light-dark(#fffcfc, #191111);
+  --nui-red-2: light-dark(#fff7f7, #201314);
+  --nui-red-3: light-dark(#feebec, #3b1219);
+  --nui-red-4: light-dark(#ffdbdc, #500f1c);
+  --nui-red-5: light-dark(#ffcdce, #611623);
+  --nui-red-6: light-dark(#fdbdbe, #72232d);
+  --nui-red-7: light-dark(#f4a9aa, #8c333a);
+  --nui-red-8: light-dark(#eb8e90, #b54548);
+  --nui-red-9: light-dark(#e5484d, #e5484d);
+  --nui-red-10: light-dark(#dc3e42, #ec5d5e);
+  --nui-red-11: light-dark(#ce2c31, #ff9592);
+  --nui-red-12: light-dark(#641723, #ffd1d9);
+  --nui-shadow-ink: rgba(0, 0, 0, 0.95);
+  --nui-highlight-ink: rgba(255, 255, 255, 0.95);
+  --nui-on-blue: white;
+  --nui-on-sky: #1c2024;
+  --nui-on-green: white;
+  --nui-on-amber: #21201c;
+  --nui-on-red: white;
+}

package/dist/tailwind/source/foundations/theme.css

@@ -0,0 +1,136 @@
+/* Shared by the prefixed components and the optional application preset. */
+@theme inline {
+  --default-font-family: var(--nui-font-sans);
+  --default-mono-font-family: var(--nui-font-mono);
+  --text-xs: var(--nui-font-size-xs);
+  --text-sm: var(--nui-font-size-sm);
+  --text-base: var(--nui-font-size-base);
+  --text-lg: var(--nui-font-size-lg);
+  --text-xl: var(--nui-font-size-xl);
+  --text-2xl: var(--nui-font-size-2xl);
+  --text-3xl: var(--nui-font-size-3xl);
+  --text-4xl: var(--nui-font-size-4xl);
+  --text-5xl: var(--nui-font-size-5xl);
+  --text-display-sm: var(--nui-font-size-display-sm);
+  --text-display-md: var(--nui-font-size-display-md);
+  --spacing: var(--nui-space-unit);
+  --default-transition-duration: var(--nui-motion-duration);
+  --default-transition-timing-function: var(--nui-motion-easing);
+  --font-sans: var(--nui-font-sans);
+  --font-mono: var(--nui-font-mono);
+  --font-weight-normal: var(--nui-font-weight-normal);
+  --font-weight-medium: var(--nui-font-weight-medium);
+  --font-weight-semibold: var(--nui-font-weight-semibold);
+  --leading-tight: var(--nui-leading-tight);
+  --leading-snug: var(--nui-leading-snug);
+  --leading-normal: var(--nui-leading-normal);
+  --leading-relaxed: var(--nui-leading-relaxed);
+  --tracking-tight: var(--nui-tracking-tight);
+  --radius-xs: var(--nui-radius-xs);
+  --radius-sm: var(--nui-radius-sm);
+  --radius-md: var(--nui-radius-md);
+  --radius-lg: var(--nui-radius-lg);
+  --radius-xl: var(--nui-radius-xl);
+  --radius-2xl: var(--nui-radius-2xl);
+  --radius-3xl: var(--nui-radius-3xl);
+  --radius-4xl: var(--nui-radius-4xl);
+  --color-background: var(--nui-background);
+  --color-focus-ring: var(--nui-focus-ring);
+  --color-muted: var(--nui-muted);
+  --color-foreground: var(--nui-foreground);
+  --color-muted-foreground: var(--nui-muted-foreground);
+  --color-surface: var(--nui-surface);
+  --color-border: var(--nui-border);
+  --color-control-border: var(--nui-control-border);
+  --color-control-border-hover: var(--nui-control-border-hover);
+  --color-disabled-background: var(--nui-disabled-background);
+  --color-disabled-foreground: var(--nui-disabled-foreground);
+  --color-disabled-border: var(--nui-disabled-border);
+  --color-primary: var(--nui-primary);
+  --color-primary-hover: var(--nui-primary-hover);
+  --color-primary-soft: var(--nui-primary-soft);
+  --color-primary-soft-hover: var(--nui-primary-soft-hover);
+  --color-primary-soft-active: var(--nui-primary-soft-active);
+  --color-primary-border: var(--nui-primary-border);
+  --color-primary-border-hover: var(--nui-primary-border-hover);
+  --color-primary-text: var(--nui-primary-text);
+  --color-primary-text-strong: var(--nui-primary-text-strong);
+  --color-primary-focus: var(--nui-primary-focus);
+  --color-on-primary: var(--nui-on-primary);
+  --color-neutral: var(--nui-neutral);
+  --color-neutral-hover: var(--nui-neutral-hover);
+  --color-neutral-soft: var(--nui-neutral-soft);
+  --color-neutral-soft-hover: var(--nui-neutral-soft-hover);
+  --color-neutral-soft-active: var(--nui-neutral-soft-active);
+  --color-neutral-border: var(--nui-neutral-border);
+  --color-neutral-border-hover: var(--nui-neutral-border-hover);
+  --color-neutral-text: var(--nui-neutral-text);
+  --color-neutral-text-strong: var(--nui-neutral-text-strong);
+  --color-neutral-focus: var(--nui-neutral-focus);
+  --color-on-neutral: var(--nui-on-neutral);
+  --color-info: var(--nui-info);
+  --color-info-hover: var(--nui-info-hover);
+  --color-info-soft: var(--nui-info-soft);
+  --color-info-soft-hover: var(--nui-info-soft-hover);
+  --color-info-soft-active: var(--nui-info-soft-active);
+  --color-info-border: var(--nui-info-border);
+  --color-info-border-hover: var(--nui-info-border-hover);
+  --color-info-text: var(--nui-info-text);
+  --color-info-text-strong: var(--nui-info-text-strong);
+  --color-info-focus: var(--nui-info-focus);
+  --color-on-info: var(--nui-on-info);
+  --color-success: var(--nui-success);
+  --color-success-hover: var(--nui-success-hover);
+  --color-success-soft: var(--nui-success-soft);
+  --color-success-soft-hover: var(--nui-success-soft-hover);
+  --color-success-soft-active: var(--nui-success-soft-active);
+  --color-success-border: var(--nui-success-border);
+  --color-success-border-hover: var(--nui-success-border-hover);
+  --color-success-text: var(--nui-success-text);
+  --color-success-text-strong: var(--nui-success-text-strong);
+  --color-success-focus: var(--nui-success-focus);
+  --color-on-success: var(--nui-on-success);
+  --color-warning: var(--nui-warning);
+  --color-warning-hover: var(--nui-warning-hover);
+  --color-warning-soft: var(--nui-warning-soft);
+  --color-warning-soft-hover: var(--nui-warning-soft-hover);
+  --color-warning-soft-active: var(--nui-warning-soft-active);
+  --color-warning-border: var(--nui-warning-border);
+  --color-warning-border-hover: var(--nui-warning-border-hover);
+  --color-warning-text: var(--nui-warning-text);
+  --color-warning-text-strong: var(--nui-warning-text-strong);
+  --color-warning-focus: var(--nui-warning-focus);
+  --color-on-warning: var(--nui-on-warning);
+  --color-danger: var(--nui-danger);
+  --color-danger-hover: var(--nui-danger-hover);
+  --color-danger-soft: var(--nui-danger-soft);
+  --color-danger-soft-hover: var(--nui-danger-soft-hover);
+  --color-danger-soft-active: var(--nui-danger-soft-active);
+  --color-danger-border: var(--nui-danger-border);
+  --color-danger-border-hover: var(--nui-danger-border-hover);
+  --color-danger-text: var(--nui-danger-text);
+  --color-danger-text-strong: var(--nui-danger-text-strong);
+  --color-danger-focus: var(--nui-danger-focus);
+  --color-on-danger: var(--nui-on-danger);
+  --shadow-elevated: var(--nui-elevated-shadow);
+  --shadow-overlay: var(--nui-overlay-shadow);
+  --shadow-popover: var(--nui-popover-shadow);
+  --shadow-tooltip: var(--nui-tooltip-shadow);
+  --shadow-hover-card: var(--nui-hover-card-shadow);
+  --shadow-toast: var(--nui-toast-shadow);
+  --ease-ui: var(--nui-motion-easing);
+}
+
+@custom-variant motion-reduce {
+  @media (prefers-reduced-motion: reduce) {
+    @slot;
+  }
+  &:where([data-motion="reduced"], [data-motion="reduced"] *) {
+    @slot;
+  }
+}
+
+@utility focus-ring {
+  outline: var(--nui-focus-width) solid var(--nui-focus-ring);
+  outline-offset: var(--nui-focus-offset);
+}