@ternent/core 0.0.1

package/packages/ui/src/primitives/TreeView/TreeView.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { TreeView, createTreeCollection } from "@ark-ui/vue/tree-view";
+import type { TreeCollection } from "@ark-ui/vue/tree-view";
+import { computed } from "vue";
+import type { SelectionChangeDetails } from "@zag-js/tree-view";
+import TreeViewNode from "./TreeViewNode.vue";
+import type { TreeNode } from "./TreeView.types.js";
+
+defineOptions({ name: "TreeViewPrimitive" });
+
+const props = withDefaults(
+  defineProps<{
+    nodes: TreeNode[];
+    ariaLabel?: string;
+    selectionMode?: "single" | "multiple";
+    selectedValue?: string[];
+    defaultExpandedDepth?: number;
+    editableValues?: boolean;
+    textSize?: "xs" | "sm" | "md" | "lg";
+  }>(),
+  {
+    ariaLabel: "Tree view",
+    selectionMode: "single",
+    defaultExpandedDepth: 1,
+    editableValues: false,
+    textSize: "sm",
+  },
+);
+
+const emit = defineEmits<{
+  (event: "value-change", payload: { path: string; raw: string }): void;
+  (event: "update:selectedValue", value: string[]): void;
+  (event: "selection-change", payload: SelectionChangeDetails<TreeNode>): void;
+}>();
+
+const hasNodes = computed(() => props.nodes?.length > 0);
+
+const collection = computed<TreeCollection<TreeNode>>(() =>
+  createTreeCollection<TreeNode>({
+    rootNode: {
+      id: "root",
+      label: props.ariaLabel,
+      children: props.nodes ?? [],
+    },
+    nodeToValue: (node) => node.id,
+    nodeToString: (node) => node.label,
+    nodeToChildren: (node) => node.children ?? [],
+  }),
+);
+
+const rootNodes = computed(() => collection.value.getNodeChildren(collection.value.rootNode));
+
+function collectExpandedValues(nodes: TreeNode[], maxDepth: number, depth = 0, acc: string[] = []) {
+  if (maxDepth <= 0 || depth >= maxDepth) return acc;
+  for (const node of nodes) {
+    if (node.children && node.children.length > 0) {
+      acc.push(node.id);
+      collectExpandedValues(node.children, maxDepth, depth + 1, acc);
+    }
+  }
+  return acc;
+}
+
+const defaultExpandedValue = computed(() =>
+  collectExpandedValues(props.nodes ?? [], props.defaultExpandedDepth),
+);
+
+function handleValueEdit(path: string, raw: string) {
+  emit("value-change", { path, raw });
+}
+
+function handleSelectedValueChange(value: string[]) {
+  emit("update:selectedValue", value);
+}
+
+function handleSelectionChange(details: SelectionChangeDetails<TreeNode>) {
+  emit("selection-change", details);
+}
+</script>
+
+<template>
+  <TreeView.Root
+    :aria-label="ariaLabel"
+    :collection="collection"
+    :selection-mode="selectionMode"
+    :selected-value="selectedValue"
+    :default-expanded-value="defaultExpandedValue"
+    @update:selected-value="handleSelectedValueChange"
+    @selection-change="handleSelectionChange"
+    class="w-full text-[var(--ui-text)]"
+    :class="{
+      'text-xs': textSize === 'xs',
+      'text-sm': textSize === 'sm',
+      'text-base': textSize === 'md',
+      'text-lg': textSize === 'lg',
+    }"
+  >
+    <TreeView.Tree class="space-y-1">
+      <template v-if="hasNodes">
+        <TreeViewNode
+          v-for="(node, index) in rootNodes"
+          :key="node.id"
+          :node="node"
+          :collection="collection"
+          :index-path="[index]"
+          :editable-values="editableValues"
+          :on-value-edit="handleValueEdit"
+        />
+      </template>
+      <p v-else class="text-xs opacity-60">No nodes to display.</p>
+    </TreeView.Tree>
+  </TreeView.Root>
+</template>

package/packages/ui/src/primitives/TreeView/TreeViewNode.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { TreeView } from "@ark-ui/vue/tree-view";
+import type { TreeCollection } from "@ark-ui/vue/tree-view";
+import Badge from "../Badge/Badge.vue";
+import type { TreeNode } from "./TreeView.types.js";
+
+defineOptions({ name: "TreeViewNode" });
+
+const props = withDefaults(
+  defineProps<{
+    node: TreeNode;
+    collection: TreeCollection<TreeNode>;
+    indexPath: number[];
+    level?: number;
+    editableValues?: boolean;
+    onValueEdit?: (path: string, raw: string) => void;
+  }>(),
+  {
+    level: 0,
+    editableValues: false,
+    onValueEdit: undefined,
+  },
+);
+
+const hasChildren = computed(() => props.collection.isBranchNode(props.node));
+const childNodes = computed(() => props.collection.getNodeChildren(props.node));
+const rowStyle = computed(() => ({
+  paddingLeft: `${props.level * 16}px`,
+  color: props.node.tone === "critical" ? "var(--ui-critical)" : undefined,
+}));
+const rowToneClass = computed(() =>
+  props.node.tone === "critical"
+    ? "border border-[color-mix(in_srgb,var(--ui-critical)_18%,transparent)] bg-[color-mix(in_srgb,var(--ui-critical-muted)_65%,transparent)]"
+    : "border border-transparent",
+);
+const labelToneClass = computed(() =>
+  props.node.tone === "critical" ? "text-[var(--ui-text)]" : "text-[var(--ui-text)]",
+);
+const valueToneClass = computed(() =>
+  props.node.tone === "critical" ? "text-[var(--ui-text-muted)]" : "text-[var(--ui-text-muted)]",
+);
+const textStyle = computed(() =>
+  props.node.tone === "critical" ? { color: "var(--ui-critical)" } : undefined,
+);
+
+const isEditingValue = ref(false);
+const draftValue = ref("");
+
+const hasRawValue = computed(() => Object.prototype.hasOwnProperty.call(props.node, "rawValue"));
+
+function formatRawValue(value: unknown) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (value === null) return "null";
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value ?? "");
+  }
+}
+
+function beginValueEdit() {
+  if (!props.editableValues || !props.onValueEdit || !hasRawValue.value) return;
+  draftValue.value = formatRawValue(props.node.rawValue);
+  isEditingValue.value = true;
+}
+
+function commitValueEdit() {
+  if (!isEditingValue.value) return;
+  isEditingValue.value = false;
+  if (!props.onValueEdit) return;
+  props.onValueEdit(props.node.id, draftValue.value);
+}
+
+function cancelValueEdit() {
+  isEditingValue.value = false;
+  draftValue.value = "";
+}
+</script>
+
+<template>
+  <TreeView.NodeProvider :node="node" :index-path="indexPath">
+    <TreeView.NodeContext v-slot="context">
+      <TreeView.Branch v-if="hasChildren">
+        <TreeView.BranchControl
+          :style="rowStyle"
+          class="group flex w-full items-center gap-2 rounded-md px-2 py-1 text-left transition hover:bg-[var(--ui-border)]"
+          :class="rowToneClass"
+        >
+          <TreeView.BranchTrigger class="flex items-center gap-2">
+            <TreeView.BranchIndicator>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                class="h-3 w-3 transition-transform duration-200"
+                :class="{ 'rotate-90': context.expanded }"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 1 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08 0Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </TreeView.BranchIndicator>
+            <TreeView.BranchText
+              class="flex-1 truncate"
+              :class="[labelToneClass, { 'font-semibold': context.selected }]"
+              :style="textStyle"
+            >
+              {{ node.label }}
+            </TreeView.BranchText>
+          </TreeView.BranchTrigger>
+          <Badge v-if="node.badge" tone="critical" variant="soft" size="xs">
+            {{ node.badge }}
+          </Badge>
+          <input
+            v-if="editableValues && hasRawValue && isEditingValue"
+            v-model="draftValue"
+            class="ml-auto max-w-[55%] rounded border border-[var(--ui-border)] bg-transparent px-2 py-1 text-[0.85em]"
+            @keydown.enter.prevent="commitValueEdit"
+            @keydown.esc.prevent="cancelValueEdit"
+            @blur="commitValueEdit"
+          />
+          <span
+            v-else-if="node.value || node.meta"
+            class="ml-auto max-w-[55%] truncate text-[0.85em]"
+            :class="valueToneClass"
+            :style="textStyle"
+            @dblclick.stop="beginValueEdit"
+          >
+            {{ node.value || node.meta }}
+          </span>
+        </TreeView.BranchControl>
+        <TreeView.BranchContent class="space-y-1">
+          <TreeView.Tree class="space-y-1">
+            <TreeViewNode
+              v-for="(child, childIndex) in childNodes"
+              :key="child.id"
+              :node="child"
+              :collection="collection"
+              :index-path="[...indexPath, childIndex]"
+              :level="level + 1"
+              :editable-values="editableValues"
+              :on-value-edit="onValueEdit"
+            />
+          </TreeView.Tree>
+        </TreeView.BranchContent>
+      </TreeView.Branch>
+
+      <TreeView.Item
+        v-else
+        :style="rowStyle"
+        class="group flex w-full items-center gap-2 rounded-md px-2 py-1 text-left transition hover:bg-[var(--ui-border)]"
+        :class="rowToneClass"
+      >
+        <TreeView.ItemText
+          class="flex-1 truncate"
+          :class="[labelToneClass, { 'font-semibold': context.selected }]"
+          :style="textStyle"
+        >
+          {{ node.label }}
+        </TreeView.ItemText>
+        <Badge v-if="node.badge" tone="critical" variant="soft" size="xs">
+          {{ node.badge }}
+        </Badge>
+        <input
+          v-if="editableValues && hasRawValue && isEditingValue"
+          v-model="draftValue"
+          class="ml-auto max-w-[55%] rounded border border-[var(--ui-border)] bg-transparent px-2 py-1 text-[0.85em]"
+          @keydown.enter.prevent="commitValueEdit"
+          @keydown.esc.prevent="cancelValueEdit"
+          @blur="commitValueEdit"
+        />
+        <span
+          v-else-if="node.value || node.meta"
+          class="ml-auto max-w-[55%] truncate text-[0.85em]"
+          :class="valueToneClass"
+          :style="textStyle"
+          @dblclick.stop="beginValueEdit"
+        >
+          {{ node.value || node.meta }}
+        </span>
+      </TreeView.Item>
+    </TreeView.NodeContext>
+  </TreeView.NodeProvider>
+</template>

package/packages/ui/src/primitives/index.ts

@@ -0,0 +1,29 @@
+import "../style.css";
+
+export { default as Button } from "./Button/Button.vue";
+export { default as Accordion } from "./Accordion/Accordion.vue";
+export { default as AccordionItem } from "./Accordion/AccordionItem.vue";
+export { default as Badge } from "./Badge/Badge.vue";
+export { default as Card } from "./Card/Card.vue";
+export { default as Checkbox } from "./Checkbox/Checkbox.vue";
+export { default as Dialog } from "./Dialog/Dialog.vue";
+export { default as Drawer } from "./Drawer/Drawer.vue";
+export { default as Menu } from "./Menu/Menu.vue";
+export { default as Popover } from "./Popover/Popover.vue";
+export { default as RadioGroup } from "./RadioGroup/RadioGroup.vue";
+export { default as Separator } from "./Separator/Separator.vue";
+export { default as Skeleton } from "./Skeleton/Skeleton.vue";
+export { default as Spinner } from "./Spinner/Spinner.vue";
+export { default as Switch } from "./Switch/Switch.vue";
+export { default as Tabs } from "./Tabs/Tabs.vue";
+export { default as Tooltip } from "./Tooltip/Tooltip.vue";
+export { default as TreeView } from "./TreeView/TreeView.vue";
+export { default as Input } from "./Input/Input.vue";
+export { default as Textarea } from "./Textarea/Textarea.vue";
+export { default as Label } from "./Label/Label.vue";
+export { default as FieldMessage } from "./FieldMessage/FieldMessage.vue";
+export { default as FileInput } from "./FileInput/FileInput.vue";
+export { default as Accordian } from "./Accordion/Accordion.vue";
+export { default as AccordianItem } from "./Accordion/AccordionItem.vue";
+export { default as SplitButton } from "./SplitButton/SplitButton.vue";
+export type { TreeNode } from "./TreeView/TreeView.types";

package/packages/ui/src/style.css

@@ -0,0 +1,7 @@
+@layer theme, base, components, utilities;
+@import "./design-system/tokens.css" layer(theme);
+@import "./design-system/base.css" layer(base);
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+@plugin "@tailwindcss/typography";

package/packages/ui/src/style.js

@@ -0,0 +1 @@
+import "./style.css";

package/packages/ui/src/themes/armour.css

@@ -0,0 +1,147 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="armour-light"], [data-theme="armour-light"] {
+  color-scheme: light;
+  --ui-bg: #f3f8f7;
+  --ui-fg: #142321;
+  --ui-fg-muted: #5c726e;
+  --ui-surface: #e7efed;
+  --ui-surface-hover: #dbe7e4;
+  --ui-border: rgba(20, 35, 33, 0.12);
+  --ui-primary: #0f766e;
+  --ui-on-primary: #f3f8f7;
+  --ui-primary-muted: rgba(15, 118, 110, 0.14);
+  --ui-primary-hover: rgba(15, 118, 110, 0.22);
+  --ui-primary-active: rgba(15, 118, 110, 0.3);
+  --ui-secondary: #51656a;
+  --ui-on-secondary: #f3f8f7;
+  --ui-secondary-muted: rgba(81, 101, 106, 0.14);
+  --ui-secondary-hover: rgba(81, 101, 106, 0.22);
+  --ui-secondary-active: rgba(81, 101, 106, 0.3);
+  --ui-accent: #10b981;
+  --ui-on-accent: #062018;
+  --ui-accent-muted: rgba(16, 185, 129, 0.14);
+  --ui-accent-hover: rgba(16, 185, 129, 0.22);
+  --ui-accent-active: rgba(16, 185, 129, 0.3);
+  --ui-success: #15803d;
+  --ui-on-success: #f3f8f7;
+  --ui-success-muted: rgba(21, 128, 61, 0.16);
+  --ui-success-hover: rgba(21, 128, 61, 0.24);
+  --ui-success-active: rgba(21, 128, 61, 0.32);
+  --ui-warning: #b45309;
+  --ui-on-warning: #fff7ed;
+  --ui-warning-muted: rgba(180, 83, 9, 0.16);
+  --ui-warning-hover: rgba(180, 83, 9, 0.24);
+  --ui-warning-active: rgba(180, 83, 9, 0.32);
+  --ui-info: #0ea5e9;
+  --ui-on-info: #f3f8f7;
+  --ui-info-muted: rgba(14, 165, 233, 0.16);
+  --ui-info-hover: rgba(14, 165, 233, 0.24);
+  --ui-info-active: rgba(14, 165, 233, 0.32);
+  --ui-critical: #b91c1c;
+  --ui-on-critical: #fef2f2;
+  --ui-critical-muted: rgba(185, 28, 28, 0.16);
+  --ui-critical-hover: rgba(185, 28, 28, 0.24);
+  --ui-critical-active: rgba(185, 28, 28, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(20, 35, 33, 0.06);
+  --ui-tonal-secondary-hover: rgba(20, 35, 33, 0.1);
+  --ui-tonal-tertiary: rgba(20, 35, 33, 0.03);
+  --ui-tonal-tertiary-hover: rgba(20, 35, 33, 0.07);
+  --ui-ring: rgba(15, 118, 110, 0.4);
+  --ui-glow-primary: 0 0 0 2px rgba(15, 118, 110, 0.25);
+  --ui-glow-accent: 0 0 0 2px rgba(16, 185, 129, 0.22);
+  --ui-glow-critical: 0 0 0 2px rgba(185, 28, 28, 0.25);
+  --ui-glow-success: 0 0 0 2px rgba(21, 128, 61, 0.22);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(12, 21, 20, 0.12);
+  --ui-shadow-md: 0 6px 18px rgba(12, 21, 20, 0.22);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #0f766e;
+  --ui-logo-end: #10b981;
+  --ui-logo-cutout: #f3f8f7;
+}
+
+:root[data-theme="armour-dark"], [data-theme="armour-dark"] {
+  color-scheme: dark;
+  --ui-bg: #071513;
+  --ui-fg: #e7f4f1;
+  --ui-fg-muted: #93ada7;
+  --ui-surface: #0d1d1a;
+  --ui-surface-hover: #142824;
+  --ui-border: rgba(231, 244, 241, 0.08);
+  --ui-primary: #14b8a6;
+  --ui-on-primary: #041311;
+  --ui-primary-muted: rgba(20, 184, 166, 0.16);
+  --ui-primary-hover: rgba(20, 184, 166, 0.24);
+  --ui-primary-active: rgba(20, 184, 166, 0.32);
+  --ui-secondary: #5d7470;
+  --ui-on-secondary: #ffffff;
+  --ui-secondary-muted: rgba(93, 116, 112, 0.16);
+  --ui-secondary-hover: rgba(93, 116, 112, 0.24);
+  --ui-secondary-active: rgba(93, 116, 112, 0.32);
+  --ui-accent: #34d399;
+  --ui-on-accent: #04140f;
+  --ui-accent-muted: rgba(52, 211, 153, 0.16);
+  --ui-accent-hover: rgba(52, 211, 153, 0.24);
+  --ui-accent-active: rgba(52, 211, 153, 0.32);
+  --ui-success: #22c55e;
+  --ui-on-success: #04140a;
+  --ui-success-muted: rgba(34, 197, 94, 0.16);
+  --ui-success-hover: rgba(34, 197, 94, 0.24);
+  --ui-success-active: rgba(34, 197, 94, 0.32);
+  --ui-warning: #f59e0b;
+  --ui-on-warning: #1a1002;
+  --ui-warning-muted: rgba(245, 158, 11, 0.16);
+  --ui-warning-hover: rgba(245, 158, 11, 0.24);
+  --ui-warning-active: rgba(245, 158, 11, 0.32);
+  --ui-info: #38bdf8;
+  --ui-on-info: #04131a;
+  --ui-info-muted: rgba(56, 189, 248, 0.16);
+  --ui-info-hover: rgba(56, 189, 248, 0.24);
+  --ui-info-active: rgba(56, 189, 248, 0.32);
+  --ui-critical: #ef4444;
+  --ui-on-critical: #190606;
+  --ui-critical-muted: rgba(239, 68, 68, 0.16);
+  --ui-critical-hover: rgba(239, 68, 68, 0.24);
+  --ui-critical-active: rgba(239, 68, 68, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(231, 244, 241, 0.06);
+  --ui-tonal-secondary-hover: rgba(231, 244, 241, 0.12);
+  --ui-tonal-tertiary: rgba(231, 244, 241, 0.03);
+  --ui-tonal-tertiary-hover: rgba(231, 244, 241, 0.08);
+  --ui-ring: rgba(20, 184, 166, 0.45);
+  --ui-glow-primary: 0 0 0 2px rgba(20, 184, 166, 0.35);
+  --ui-glow-accent: 0 0 0 2px rgba(52, 211, 153, 0.35);
+  --ui-glow-critical: 0 0 0 2px rgba(239, 68, 68, 0.3);
+  --ui-glow-success: 0 0 0 2px rgba(34, 197, 94, 0.35);
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --ui-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.65);
+  --ui-radius-sm: 6px;
+  --ui-radius-md: 10px;
+  --ui-radius-lg: 14px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 180ms;
+  --ui-duration-slow: 240ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.98;
+  --ui-logo-start: #14b8a6;
+  --ui-logo-end: #34d399;
+  --ui-logo-cutout: #071513;
+}

package/packages/ui/src/themes/aurora.css

@@ -0,0 +1,147 @@
+/* This file is generated from src/themes/semanticThemeContract.js. */
+
+:root[data-theme="aurora-light"], [data-theme="aurora-light"] {
+  color-scheme: light;
+  --ui-bg: #f2fbff;
+  --ui-fg: #14323d;
+  --ui-fg-muted: #4d6a73;
+  --ui-surface: #e4f2f8;
+  --ui-surface-hover: #d7e7ee;
+  --ui-border: rgba(20, 50, 61, 0.12);
+  --ui-primary: #0e7490;
+  --ui-on-primary: #f2fbff;
+  --ui-primary-muted: rgba(14, 116, 144, 0.14);
+  --ui-primary-hover: rgba(14, 116, 144, 0.22);
+  --ui-primary-active: rgba(14, 116, 144, 0.3);
+  --ui-secondary: #4338ca;
+  --ui-on-secondary: #f2fbff;
+  --ui-secondary-muted: rgba(67, 56, 202, 0.14);
+  --ui-secondary-hover: rgba(67, 56, 202, 0.22);
+  --ui-secondary-active: rgba(67, 56, 202, 0.3);
+  --ui-accent: #e11d48;
+  --ui-on-accent: #f2fbff;
+  --ui-accent-muted: rgba(225, 29, 72, 0.14);
+  --ui-accent-hover: rgba(225, 29, 72, 0.22);
+  --ui-accent-active: rgba(225, 29, 72, 0.3);
+  --ui-success: #16a34a;
+  --ui-on-success: #f2fbff;
+  --ui-success-muted: rgba(22, 163, 74, 0.16);
+  --ui-success-hover: rgba(22, 163, 74, 0.24);
+  --ui-success-active: rgba(22, 163, 74, 0.32);
+  --ui-warning: #ca8a04;
+  --ui-on-warning: #f2fbff;
+  --ui-warning-muted: rgba(202, 138, 4, 0.16);
+  --ui-warning-hover: rgba(202, 138, 4, 0.24);
+  --ui-warning-active: rgba(202, 138, 4, 0.32);
+  --ui-info: #2563eb;
+  --ui-on-info: #f2fbff;
+  --ui-info-muted: rgba(37, 99, 235, 0.16);
+  --ui-info-hover: rgba(37, 99, 235, 0.24);
+  --ui-info-active: rgba(37, 99, 235, 0.32);
+  --ui-critical: #dc2626;
+  --ui-on-critical: #f2fbff;
+  --ui-critical-muted: rgba(220, 38, 38, 0.16);
+  --ui-critical-hover: rgba(220, 38, 38, 0.24);
+  --ui-critical-active: rgba(220, 38, 38, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(20, 50, 61, 0.06);
+  --ui-tonal-secondary-hover: rgba(20, 50, 61, 0.1);
+  --ui-tonal-tertiary: rgba(20, 50, 61, 0.03);
+  --ui-tonal-tertiary-hover: rgba(20, 50, 61, 0.07);
+  --ui-ring: rgba(14, 116, 144, 0.4);
+  --ui-glow-primary: 0 0 0 2px rgba(14, 116, 144, 0.25);
+  --ui-glow-accent: 0 0 0 2px rgba(225, 29, 72, 0.22);
+  --ui-glow-critical: 0 0 0 2px rgba(220, 38, 38, 0.25);
+  --ui-glow-success: 0 0 0 2px rgba(22, 163, 74, 0.22);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(10, 24, 30, 0.12);
+  --ui-shadow-md: 0 6px 18px rgba(10, 24, 30, 0.22);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #e11d48;
+  --ui-logo-end: #4338ca;
+  --ui-logo-cutout: #f2fbff;
+}
+
+:root[data-theme="aurora-dark"], [data-theme="aurora-dark"] {
+  color-scheme: dark;
+  --ui-bg: #0b1217;
+  --ui-fg: #e4f8ff;
+  --ui-fg-muted: #a8c8d1;
+  --ui-surface: #121a21;
+  --ui-surface-hover: #1a2430;
+  --ui-border: rgba(228, 248, 255, 0.12);
+  --ui-primary: #67e8f9;
+  --ui-on-primary: #0b1217;
+  --ui-primary-muted: rgba(103, 232, 249, 0.14);
+  --ui-primary-hover: rgba(103, 232, 249, 0.22);
+  --ui-primary-active: rgba(103, 232, 249, 0.3);
+  --ui-secondary: #c7d2fe;
+  --ui-on-secondary: #0b1217;
+  --ui-secondary-muted: rgba(199, 210, 254, 0.16);
+  --ui-secondary-hover: rgba(199, 210, 254, 0.24);
+  --ui-secondary-active: rgba(199, 210, 254, 0.32);
+  --ui-accent: #fda4af;
+  --ui-on-accent: #0b1217;
+  --ui-accent-muted: rgba(253, 164, 175, 0.16);
+  --ui-accent-hover: rgba(253, 164, 175, 0.24);
+  --ui-accent-active: rgba(253, 164, 175, 0.32);
+  --ui-success: #86efac;
+  --ui-on-success: #0b1411;
+  --ui-success-muted: rgba(134, 239, 172, 0.16);
+  --ui-success-hover: rgba(134, 239, 172, 0.24);
+  --ui-success-active: rgba(134, 239, 172, 0.32);
+  --ui-warning: #fde047;
+  --ui-on-warning: #0b1217;
+  --ui-warning-muted: rgba(253, 224, 71, 0.16);
+  --ui-warning-hover: rgba(253, 224, 71, 0.24);
+  --ui-warning-active: rgba(253, 224, 71, 0.32);
+  --ui-info: #93c5fd;
+  --ui-on-info: #0b1220;
+  --ui-info-muted: rgba(147, 197, 253, 0.16);
+  --ui-info-hover: rgba(147, 197, 253, 0.24);
+  --ui-info-active: rgba(147, 197, 253, 0.32);
+  --ui-critical: #fca5a5;
+  --ui-on-critical: #14090b;
+  --ui-critical-muted: rgba(252, 165, 165, 0.16);
+  --ui-critical-hover: rgba(252, 165, 165, 0.24);
+  --ui-critical-active: rgba(252, 165, 165, 0.32);
+  --ui-danger: var(--ui-critical);
+  --ui-on-danger: var(--ui-on-critical);
+  --ui-danger-muted: var(--ui-critical-muted);
+  --ui-danger-hover: var(--ui-critical-hover);
+  --ui-danger-active: var(--ui-critical-active);
+  --ui-tonal-secondary: rgba(228, 248, 255, 0.08);
+  --ui-tonal-secondary-hover: rgba(228, 248, 255, 0.14);
+  --ui-tonal-tertiary: rgba(228, 248, 255, 0.04);
+  --ui-tonal-tertiary-hover: rgba(228, 248, 255, 0.1);
+  --ui-ring: rgba(103, 232, 249, 0.5);
+  --ui-glow-primary: 0 0 0 2px rgba(103, 232, 249, 0.35);
+  --ui-glow-accent: 0 0 0 2px rgba(253, 164, 175, 0.35);
+  --ui-glow-critical: 0 0 0 2px rgba(252, 165, 165, 0.3);
+  --ui-glow-success: 0 0 0 2px rgba(134, 239, 172, 0.3);
+  --ui-radius-sm: 8px;
+  --ui-radius-md: 12px;
+  --ui-radius-lg: 16px;
+  --ui-duration-fast: 120ms;
+  --ui-duration-normal: 200ms;
+  --ui-duration-slow: 300ms;
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --ui-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
+  --ui-lift-hover: -0.5px;
+  --ui-scale-active: 0.97;
+  --ui-logo-start: #fda4af;
+  --ui-logo-end: #c7d2fe;
+  --ui-logo-cutout: #0b1217;
+}