@framingui/ui 0.6.3 → 0.6.4

package/dist/index.mjs

@@ -12,7 +12,7 @@ import {
   Separator,
   buttonVariants,
   cn
-} from "./chunk-7UBERMRE.mjs";
+} from "./chunk-RWYATDH5.mjs";
 
 // src/lib/tokens.ts
 var tokenVars = {
@@ -20,64 +20,64 @@ var tokenVars = {
   // Background Tokens
   // ========================================
   bg: {
-    background: "var(--tekton-bg-background)",
-    foreground: "var(--tekton-bg-foreground)",
-    card: "var(--tekton-bg-card)",
-    cardForeground: "var(--tekton-bg-card-foreground)",
-    popover: "var(--tekton-bg-popover)",
-    popoverForeground: "var(--tekton-bg-popover-foreground)",
-    primary: "var(--tekton-bg-primary)",
-    primaryForeground: "var(--tekton-bg-primary-foreground)",
-    secondary: "var(--tekton-bg-secondary)",
-    secondaryForeground: "var(--tekton-bg-secondary-foreground)",
-    muted: "var(--tekton-bg-muted)",
-    mutedForeground: "var(--tekton-bg-muted-foreground)",
-    accent: "var(--tekton-bg-accent)",
-    accentForeground: "var(--tekton-bg-accent-foreground)",
-    destructive: "var(--tekton-bg-destructive)",
-    destructiveForeground: "var(--tekton-bg-destructive-foreground)"
+    background: "var(--bg-background)",
+    foreground: "var(--bg-foreground)",
+    card: "var(--bg-card)",
+    cardForeground: "var(--bg-card-foreground)",
+    popover: "var(--bg-popover)",
+    popoverForeground: "var(--bg-popover-foreground)",
+    primary: "var(--bg-primary)",
+    primaryForeground: "var(--bg-primary-foreground)",
+    secondary: "var(--bg-secondary)",
+    secondaryForeground: "var(--bg-secondary-foreground)",
+    muted: "var(--bg-muted)",
+    mutedForeground: "var(--bg-muted-foreground)",
+    accent: "var(--bg-accent)",
+    accentForeground: "var(--bg-accent-foreground)",
+    destructive: "var(--bg-destructive)",
+    destructiveForeground: "var(--bg-destructive-foreground)"
   },
   // ========================================
   // Border Tokens
   // ========================================
   border: {
-    default: "var(--tekton-border-default)",
-    input: "var(--tekton-border-input)",
-    ring: "var(--tekton-border-ring)"
+    default: "var(--border-default)",
+    input: "var(--border-input)",
+    ring: "var(--border-ring)"
   },
   // ========================================
   // Radius Tokens
   // ========================================
   radius: {
-    sm: "var(--tekton-radius-sm)",
-    md: "var(--tekton-radius-md)",
-    lg: "var(--tekton-radius-lg)",
-    xl: "var(--tekton-radius-xl)",
-    full: "var(--tekton-radius-full)",
-    select: "var(--tekton-radius-select)"
+    sm: "var(--radius-sm)",
+    md: "var(--radius-md)",
+    lg: "var(--radius-lg)",
+    xl: "var(--radius-xl)",
+    full: "var(--radius-full)",
+    select: "var(--radius-select)"
   },
   // ========================================
   // Spacing Tokens (4px base)
   // ========================================
   spacing: {
-    0: "var(--tekton-spacing-0)",
-    1: "var(--tekton-spacing-1)",
-    2: "var(--tekton-spacing-2)",
-    3: "var(--tekton-spacing-3)",
-    4: "var(--tekton-spacing-4)",
-    5: "var(--tekton-spacing-5)",
-    6: "var(--tekton-spacing-6)",
-    8: "var(--tekton-spacing-8)",
-    10: "var(--tekton-spacing-10)",
-    12: "var(--tekton-spacing-12)",
-    16: "var(--tekton-spacing-16)"
+    0: "var(--spacing-0)",
+    1: "var(--spacing-1)",
+    2: "var(--spacing-2)",
+    3: "var(--spacing-3)",
+    4: "var(--spacing-4)",
+    5: "var(--spacing-5)",
+    6: "var(--spacing-6)",
+    8: "var(--spacing-8)",
+    10: "var(--spacing-10)",
+    12: "var(--spacing-12)",
+    16: "var(--spacing-16)"
   }
 };
 function isTokenReference(value) {
-  return value.startsWith("var(--tekton-") && value.endsWith(")");
+  return value.startsWith("var(--") && value.endsWith(")");
 }
 function extractTokenName(token) {
-  const match = token.match(/var\(--tekton-(.*)\)/);
+  const match = token.match(/var\(--(.*)\)/);
   return match ? match[1] : "";
 }
 
@@ -128,58 +128,70 @@ function themeToCSS(theme) {
   /* ========================================
      Component Tokens (@framingui/ui \uCEF4\uD3EC\uB10C\uD2B8\uC6A9)
      ======================================== */
-  --tekton-bg-background: ${resolveColor(tokens.semantic.background.canvas)};
-  --tekton-bg-foreground: ${textPrimary};
+  --bg-background: ${resolveColor(tokens.semantic.background.canvas)};
+  --bg-foreground: ${textPrimary};
 
-  --tekton-bg-card: ${resolveColor(tokens.semantic.background.surface.default)};
-  --tekton-bg-card-foreground: ${textPrimary};
+  --bg-card: ${resolveColor(tokens.semantic.background.surface.default)};
+  --bg-card-foreground: ${textPrimary};
 
-  --tekton-bg-popover: ${resolveColor(tokens.semantic.background.surface.default)};
-  --tekton-bg-popover-foreground: ${textPrimary};
+  --bg-popover: ${resolveColor(tokens.semantic.background.surface.default)};
+  --bg-popover-foreground: ${textPrimary};
 
-  --tekton-bg-primary: ${resolveColor(tokens.semantic.background.brand.default)};
-  --tekton-bg-primary-foreground: ${oklchToCSS(white)};
+  --bg-primary: ${resolveColor(tokens.semantic.background.brand.default)};
+  --bg-primary-foreground: ${oklchToCSS(white)};
 
-  --tekton-bg-secondary: ${resolveColor(tokens.semantic.background.surface.emphasis)};
-  --tekton-bg-secondary-foreground: ${textPrimary};
+  --bg-secondary: ${resolveColor(tokens.semantic.background.surface.emphasis)};
+  --bg-secondary-foreground: ${textPrimary};
 
-  --tekton-bg-muted: ${resolveColor(tokens.semantic.background.surface.subtle)};
-  --tekton-bg-muted-foreground: ${textSecondary};
+  --bg-muted: ${resolveColor(tokens.semantic.background.surface.subtle)};
+  --bg-muted-foreground: ${textSecondary};
 
-  --tekton-bg-accent: ${resolveColor(tokens.semantic.background.surface.emphasis)};
-  --tekton-bg-accent-foreground: ${textPrimary};
+  --bg-accent: ${resolveColor(tokens.semantic.background.surface.emphasis)};
+  --bg-accent-foreground: ${textPrimary};
 
-  --tekton-bg-destructive: ${oklchToCSS({ l: 0.5, c: 0.2, h: 30 })}; /* Default red */
-  --tekton-bg-destructive-foreground: ${oklchToCSS(white)};
+  --bg-destructive: ${oklchToCSS({ l: 0.5, c: 0.2, h: 30 })}; /* Default red */
+  --bg-destructive-foreground: ${oklchToCSS(white)};
+
+  --bg-base: ${resolveColor(tokens.semantic.background.canvas)};
+  --bg-success: ${resolveColor(tokens.semantic.background.brand.emphasis)};
 
   /* ========================================
      Border Tokens
      ======================================== */
-  --tekton-border-default: ${resolveColor(tokens.semantic.border.default.default)};
-  --tekton-border-input: ${resolveColor(tokens.semantic.border.default.subtle)};
-  --tekton-border-ring: ${resolveColor(tokens.semantic.background.brand.default)};
+  --border-default: ${resolveColor(tokens.semantic.border.default.default)};
+  --border-input: ${resolveColor(tokens.semantic.border.default.subtle)};
+  --border-ring: ${resolveColor(tokens.semantic.background.brand.default)};
+  --border-border: ${resolveColor(tokens.semantic.border.default.default)};
+  --border-primary: ${resolveColor(tokens.semantic.background.brand.default)};
 
   /* ========================================
      Page Semantic Tokens (\uD398\uC774\uC9C0 \uD15C\uD50C\uB9BF \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C\uC6A9)
      ======================================== */
-  --tekton-bg-canvas: ${resolveColor(tokens.semantic.background.canvas)};
-  --tekton-bg-surface: ${resolveColor(tokens.semantic.background.surface.default)};
-  --tekton-text-primary: ${textPrimary};
-  --tekton-text-secondary: ${textSecondary};
-  --tekton-text-tertiary: ${textTertiary};
-  --tekton-action-primary: ${textPrimary};
-  --tekton-action-primary-text: ${oklchToCSS(white)};
-  --tekton-border-emphasis: ${resolveColor(tokens.semantic.border.default.emphasis)};
+  --bg-canvas: ${resolveColor(tokens.semantic.background.canvas)};
+  --bg-surface: ${resolveColor(tokens.semantic.background.surface.default)};
+  --text-primary: ${textPrimary};
+  --text-secondary: ${textSecondary};
+  --text-tertiary: ${textTertiary};
+  --text-foreground: ${textPrimary};
+  --text-card-foreground: ${textPrimary};
+  --text-popover-foreground: ${textPrimary};
+  --text-muted-foreground: ${textSecondary};
+  --text-link: ${resolveColor(tokens.semantic.background.brand.default)};
+  --text-success: ${resolveColor(tokens.semantic.background.brand.emphasis)};
+  --text-destructive: ${oklchToCSS({ l: 0.5, c: 0.2, h: 30 })};
+  --action-primary: ${textPrimary};
+  --action-primary-text: ${oklchToCSS(white)};
+  --border-emphasis: ${resolveColor(tokens.semantic.border.default.emphasis)};
 
   /* ========================================
      Radius Tokens
      ======================================== */
-  ${Object.entries(tokens.atomic.radius).map(([key, val]) => `--tekton-radius-${key}: ${val};`).join("\n  ")}
+  ${Object.entries(tokens.atomic.radius).map(([key, val]) => `--radius-${key}: ${val};`).join("\n  ")}
 
   /* ========================================
      Spacing Tokens
      ======================================== */
-  ${Object.entries(tokens.atomic.spacing).map(([key, val]) => `--tekton-spacing-${key}: ${val};`).join("\n  ")}
+  ${Object.entries(tokens.atomic.spacing).map(([key, val]) => `--spacing-${key}: ${val};`).join("\n  ")}
 }
 `;
   return css.trim();
@@ -307,14 +319,14 @@ function getMotionTransition(transition, motionSafe) {
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var badgeVariants = cva(
-  "inline-flex items-center rounded-[var(--tekton-radius-full)] border px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-1)] text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--tekton-border-ring)] focus:ring-offset-2",
+  "inline-flex items-center rounded-[var(--radius-full)] border px-[var(--spacing-3)] py-[var(--spacing-1)] text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-ring)] focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-[var(--tekton-bg-primary)] text-[var(--tekton-bg-primary-foreground)] hover:bg-[var(--tekton-bg-primary)]/80",
-        secondary: "border-transparent bg-[var(--tekton-bg-secondary)] text-[var(--tekton-bg-secondary-foreground)] hover:bg-[var(--tekton-bg-secondary)]/80",
-        destructive: "border-transparent bg-[var(--tekton-bg-destructive)] text-[var(--tekton-bg-destructive-foreground)] hover:bg-[var(--tekton-bg-destructive)]/80",
-        outline: "text-[var(--tekton-bg-foreground)]"
+        default: "border-transparent bg-[var(--bg-primary)] text-[var(--bg-primary-foreground)] hover:bg-[var(--bg-primary)]/80",
+        secondary: "border-transparent bg-[var(--bg-secondary)] text-[var(--bg-secondary-foreground)] hover:bg-[var(--bg-secondary)]/80",
+        destructive: "border-transparent bg-[var(--bg-destructive)] text-[var(--bg-destructive-foreground)] hover:bg-[var(--bg-destructive)]/80",
+        outline: "text-[var(--bg-foreground)]"
       }
     },
     defaultVariants: {
@@ -335,7 +347,7 @@ var Avatar = React.forwardRef(({ className, children, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-[var(--tekton-radius-full)]",
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-[var(--radius-full)]",
       className
     ),
     ...props,
@@ -357,7 +369,7 @@ var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "flex h-full w-full items-center justify-center rounded-[var(--tekton-radius-full)] bg-[var(--tekton-bg-muted)]",
+      "flex h-full w-full items-center justify-center rounded-[var(--radius-full)] bg-[var(--bg-muted)]",
       className
     ),
     ...props
@@ -375,7 +387,7 @@ var Checkbox = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-[var(--tekton-radius-sm)] border border-[var(--tekton-border-input)] ring-offset-[var(--tekton-bg-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--tekton-bg-primary)] data-[state=checked]:text-[var(--tekton-bg-primary-foreground)]",
+      "peer h-4 w-4 shrink-0 rounded-[var(--radius-sm)] border border-[var(--border-input)] ring-offset-[var(--bg-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--bg-primary)] data-[state=checked]:text-[var(--bg-primary-foreground)]",
       className
     ),
     ...props,
@@ -393,7 +405,7 @@ var RadioGroup = React3.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx4(
     RadioGroupPrimitive.Root,
     {
-      className: cn("grid gap-[var(--tekton-spacing-2)]", className),
+      className: cn("grid gap-[var(--spacing-2)]", className),
       ...props,
       ref
     }
@@ -406,7 +418,7 @@ var RadioGroupItem = React3.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "aspect-square h-4 w-4 rounded-[var(--tekton-radius-full)] border border-[var(--tekton-border-input)] text-[var(--tekton-bg-primary)] ring-offset-[var(--tekton-bg-background)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-[var(--radius-full)] border border-[var(--border-input)] text-[var(--bg-primary)] ring-offset-[var(--bg-background)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -424,7 +436,7 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-[var(--tekton-radius-full)] p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--tekton-bg-background)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--tekton-bg-primary)] data-[state=unchecked]:bg-[var(--tekton-bg-muted)]",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-[var(--radius-full)] p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-background)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--bg-primary)] data-[state=unchecked]:bg-[var(--bg-muted)]",
       className
     ),
     ...props,
@@ -433,7 +445,7 @@ var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
       SwitchPrimitives.Thumb,
       {
         className: cn(
-          "pointer-events-none block h-4 w-4 rounded-[var(--tekton-radius-full)] bg-[var(--tekton-bg-background)] shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block h-4 w-4 rounded-[var(--radius-full)] bg-[var(--bg-background)] shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
         )
       }
     )
@@ -450,7 +462,7 @@ var Textarea = React5.forwardRef(
       "textarea",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-input)] bg-[var(--tekton-bg-background)] px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-2)] text-sm ring-offset-[var(--tekton-bg-background)] placeholder:text-[var(--tekton-bg-muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-[var(--radius-md)] border border-[var(--border-input)] bg-[var(--bg-background)] px-[var(--spacing-3)] py-[var(--spacing-2)] text-sm ring-offset-[var(--bg-background)] placeholder:text-[var(--bg-muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -468,7 +480,7 @@ function Skeleton({ className, ...props }) {
     "div",
     {
       className: cn(
-        "animate-pulse rounded-[var(--tekton-radius-md)] bg-[var(--tekton-bg-muted)]",
+        "animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-muted)]",
         className
       ),
       ...props
@@ -506,7 +518,7 @@ var ScrollBar = React6.forwardRef(({ className, orientation = "vertical", ...pro
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-[var(--tekton-radius-full)] bg-[var(--tekton-border-default)]" })
+    children: /* @__PURE__ */ jsx8(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-[var(--radius-full)] bg-[var(--border-default)]" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
@@ -524,7 +536,7 @@ var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-[var(--tekton-radius-select,var(--tekton-radius-md))] border border-[var(--tekton-border-input)] bg-[var(--tekton-bg-background)] px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-2)] text-sm ring-offset-[var(--tekton-bg-background)] placeholder:text-[var(--tekton-bg-muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--tekton-border-ring)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-[var(--radius-select,var(--radius-md))] border border-[var(--border-input)] bg-[var(--bg-background)] px-[var(--spacing-3)] py-[var(--spacing-2)] text-sm ring-offset-[var(--bg-background)] placeholder:text-[var(--bg-muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--border-ring)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -560,7 +572,7 @@ var SelectContent = React7.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-popover)] text-[var(--tekton-bg-popover-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--bg-popover)] text-[var(--bg-popover-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -588,7 +600,7 @@ var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "py-[var(--tekton-spacing-2)] pl-8 pr-[var(--tekton-spacing-2)] text-sm font-semibold",
+      "py-[var(--spacing-2)] pl-8 pr-[var(--spacing-2)] text-sm font-semibold",
       className
     ),
     ...props
@@ -600,7 +612,7 @@ var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-[var(--tekton-radius-sm)] py-[var(--tekton-spacing-2)] pl-8 pr-[var(--tekton-spacing-2)] text-sm outline-none focus:bg-[var(--tekton-bg-accent)] focus:text-[var(--tekton-bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-[var(--radius-sm)] py-[var(--spacing-2)] pl-8 pr-[var(--spacing-2)] text-sm outline-none focus:bg-[var(--bg-accent)] focus:text-[var(--bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -615,7 +627,7 @@ var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[var(--tekton-bg-muted)]", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--bg-muted)]", className),
     ...props
   }
 ));
@@ -709,7 +721,7 @@ var DropdownMenuSubTrigger = React9.forwardRef(({ className, inset, children, ..
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-[var(--tekton-radius-sm)] px-[var(--tekton-spacing-2)] py-[var(--tekton-spacing-2)] text-sm outline-none focus:bg-[var(--tekton-bg-accent)] data-[state=open]:bg-[var(--tekton-bg-accent)]",
+      "flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-[var(--spacing-2)] py-[var(--spacing-2)] text-sm outline-none focus:bg-[var(--bg-accent)] data-[state=open]:bg-[var(--bg-accent)]",
       inset && "pl-8",
       className
     ),
@@ -726,7 +738,7 @@ var DropdownMenuSubContent = React9.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-popover)] p-1 text-[var(--tekton-bg-popover-foreground)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--bg-popover)] p-1 text-[var(--bg-popover-foreground)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -739,7 +751,7 @@ var DropdownMenuContent = React9.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-popover)] p-1 text-[var(--tekton-bg-popover-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--bg-popover)] p-1 text-[var(--bg-popover-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -751,7 +763,7 @@ var DropdownMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--tekton-radius-sm)] px-[var(--tekton-spacing-2)] py-[var(--tekton-spacing-2)] text-sm outline-none transition-colors focus:bg-[var(--tekton-bg-accent)] focus:text-[var(--tekton-bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-[var(--spacing-2)] py-[var(--spacing-2)] text-sm outline-none transition-colors focus:bg-[var(--bg-accent)] focus:text-[var(--bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     ),
@@ -764,7 +776,7 @@ var DropdownMenuCheckboxItem = React9.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--tekton-radius-sm)] py-[var(--tekton-spacing-2)] pl-8 pr-[var(--tekton-spacing-2)] text-sm outline-none transition-colors focus:bg-[var(--tekton-bg-accent)] focus:text-[var(--tekton-bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-[var(--spacing-2)] pl-8 pr-[var(--spacing-2)] text-sm outline-none transition-colors focus:bg-[var(--bg-accent)] focus:text-[var(--bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     checked,
@@ -781,7 +793,7 @@ var DropdownMenuRadioItem = React9.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--tekton-radius-sm)] py-[var(--tekton-spacing-2)] pl-8 pr-[var(--tekton-spacing-2)] text-sm outline-none transition-colors focus:bg-[var(--tekton-bg-accent)] focus:text-[var(--tekton-bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-[var(--spacing-2)] pl-8 pr-[var(--spacing-2)] text-sm outline-none transition-colors focus:bg-[var(--bg-accent)] focus:text-[var(--bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -797,7 +809,7 @@ var DropdownMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "px-[var(--tekton-spacing-2)] py-[var(--tekton-spacing-2)] text-sm font-semibold",
+      "px-[var(--spacing-2)] py-[var(--spacing-2)] text-sm font-semibold",
       inset && "pl-8",
       className
     ),
@@ -809,7 +821,7 @@ var DropdownMenuSeparator = React9.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[var(--tekton-bg-muted)]", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--bg-muted)]", className),
     ...props
   }
 ));
@@ -835,7 +847,7 @@ var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "border-t bg-[var(--tekton-bg-muted)]/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[var(--bg-muted)]/50 font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -848,7 +860,7 @@ var TableRow = React10.forwardRef(
     {
       ref,
       className: cn(
-        "border-b border-[var(--tekton-border-default)] transition-colors hover:bg-[var(--tekton-bg-muted)]/50 data-[state=selected]:bg-[var(--tekton-bg-muted)]",
+        "border-b border-[var(--border-default)] transition-colors hover:bg-[var(--bg-muted)]/50 data-[state=selected]:bg-[var(--bg-muted)]",
         className
       ),
       ...props
@@ -861,7 +873,7 @@ var TableHead = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "h-12 px-[var(--tekton-spacing-4)] text-left align-middle font-medium text-[var(--tekton-bg-muted-foreground)] [&:has([role=checkbox])]:pr-0",
+      "h-12 px-[var(--spacing-4)] text-left align-middle font-medium text-[var(--bg-muted-foreground)] [&:has([role=checkbox])]:pr-0",
       className
     ),
     ...props
@@ -873,7 +885,7 @@ var TableCell = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "p-[var(--tekton-spacing-4)] align-middle [&:has([role=checkbox])]:pr-0",
+      "p-[var(--spacing-4)] align-middle [&:has([role=checkbox])]:pr-0",
       className
     ),
     ...props
@@ -885,7 +897,7 @@ var TableCaption = React10.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "mt-[var(--tekton-spacing-4)] text-sm text-[var(--tekton-bg-muted-foreground)]",
+      "mt-[var(--spacing-4)] text-sm text-[var(--bg-muted-foreground)]",
       className
     ),
     ...props
@@ -903,7 +915,7 @@ var TabsList = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-[var(--tekton-radius-xl)] bg-[var(--tekton-bg-muted)] p-1 text-[var(--tekton-bg-muted-foreground)]",
+      "inline-flex h-10 items-center justify-center rounded-[var(--radius-xl)] bg-[var(--bg-muted)] p-1 text-[var(--bg-muted-foreground)]",
       className
     ),
     ...props
@@ -915,7 +927,7 @@ var TabsTrigger = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--tekton-radius-xl)] px-[var(--tekton-spacing-3)] py-1.5 text-sm font-medium ring-offset-[var(--tekton-bg-background)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--tekton-bg-background)] data-[state=active]:text-[var(--tekton-bg-foreground)] data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-xl)] px-[var(--spacing-3)] py-1.5 text-sm font-medium ring-offset-[var(--bg-background)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--bg-background)] data-[state=active]:text-[var(--bg-foreground)] data-[state=active]:shadow-sm",
       className
     ),
     ...props
@@ -927,7 +939,7 @@ var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "mt-[var(--tekton-spacing-2)] ring-offset-[var(--tekton-bg-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2",
+      "mt-[var(--spacing-2)] ring-offset-[var(--bg-background)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -947,7 +959,7 @@ var ToastViewport = React12.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-[var(--tekton-spacing-4)] sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-[var(--spacing-4)] sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     ),
     ...props
@@ -955,12 +967,12 @@ var ToastViewport = React12.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 var toastVariants = cva2(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-[var(--tekton-spacing-4)] overflow-hidden rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] p-[var(--tekton-spacing-6)] pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-[var(--spacing-4)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)] p-[var(--spacing-6)] pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border bg-[var(--tekton-bg-background)] text-[var(--tekton-bg-foreground)]",
-        destructive: "destructive group border-[var(--tekton-bg-destructive)] bg-[var(--tekton-bg-destructive)] text-[var(--tekton-bg-destructive-foreground)]"
+        default: "border bg-[var(--bg-background)] text-[var(--bg-foreground)]",
+        destructive: "destructive group border-[var(--bg-destructive)] bg-[var(--bg-destructive)] text-[var(--bg-destructive-foreground)]"
       }
     },
     defaultVariants: {
@@ -984,7 +996,7 @@ var ToastAction = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-[var(--tekton-radius-md)] border border-[var(--tekton-bg-muted)] bg-transparent px-[var(--tekton-spacing-3)] text-sm font-medium ring-offset-[var(--tekton-bg-background)] transition-colors hover:bg-[var(--tekton-bg-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--tekton-border-ring)] focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-[var(--tekton-bg-muted)]/40 group-[.destructive]:hover:border-[var(--tekton-bg-destructive)]/30 group-[.destructive]:hover:bg-[var(--tekton-bg-destructive)] group-[.destructive]:hover:text-[var(--tekton-bg-destructive-foreground)] group-[.destructive]:focus:ring-[var(--tekton-bg-destructive)]",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-[var(--bg-muted)] bg-transparent px-[var(--spacing-3)] text-sm font-medium ring-offset-[var(--bg-background)] transition-colors hover:bg-[var(--bg-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-ring)] focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-[var(--bg-muted)]/40 group-[.destructive]:hover:border-[var(--bg-destructive)]/30 group-[.destructive]:hover:bg-[var(--bg-destructive)] group-[.destructive]:hover:text-[var(--bg-destructive-foreground)] group-[.destructive]:focus:ring-[var(--bg-destructive)]",
       className
     ),
     ...props
@@ -996,7 +1008,7 @@ var ToastClose = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "absolute right-2 top-2 rounded-[var(--tekton-radius-md)] p-1 text-[var(--tekton-bg-foreground)]/50 opacity-0 transition-opacity hover:text-[var(--tekton-bg-foreground)] focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-[var(--radius-md)] p-1 text-[var(--bg-foreground)]/50 opacity-0 transition-opacity hover:text-[var(--bg-foreground)] focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className
     ),
     "toast-close": "",
@@ -1030,7 +1042,7 @@ var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-popover)] px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-2)] text-sm text-[var(--tekton-bg-popover-foreground)] shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--bg-popover)] px-[var(--spacing-3)] py-[var(--spacing-2)] text-sm text-[var(--bg-popover-foreground)] shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1051,7 +1063,7 @@ var PopoverContent = React14.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-popover)] p-[var(--tekton-spacing-4)] text-[var(--tekton-bg-popover-foreground)] shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-72 rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--bg-popover)] p-[var(--spacing-4)] text-[var(--bg-popover-foreground)] shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1073,7 +1085,7 @@ var SheetOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
   SheetPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-[var(--tekton-bg-background)]/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[var(--bg-background)]/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props,
@@ -1082,14 +1094,14 @@ var SheetOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva3(
-  "fixed z-50 gap-[var(--tekton-spacing-4)] bg-[var(--tekton-bg-background)] p-[var(--tekton-spacing-6)] shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-[var(--spacing-4)] bg-[var(--bg-background)] p-[var(--spacing-6)] shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b border-[var(--tekton-border-default)] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t border-[var(--tekton-border-default)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r border-[var(--tekton-border-default)] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l border-[var(--tekton-border-default)] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        top: "inset-x-0 top-0 border-b border-[var(--border-default)] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t border-[var(--border-default)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r border-[var(--border-default)] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l border-[var(--border-default)] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -1101,7 +1113,7 @@ var SheetContent = React15.forwardRef(({ side = "right", className, children, ..
   /* @__PURE__ */ jsx17(SheetOverlay, {}),
   /* @__PURE__ */ jsxs5(SheetPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
     children,
-    /* @__PURE__ */ jsxs5(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-[var(--tekton-radius-sm)] opacity-70 ring-offset-[var(--tekton-bg-background)] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--tekton-border-ring)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-[var(--tekton-bg-secondary)]", children: [
+    /* @__PURE__ */ jsxs5(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-[var(--bg-background)] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--border-ring)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-[var(--bg-secondary)]", children: [
       /* @__PURE__ */ jsx17(X3, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Close" })
     ] })
@@ -1112,7 +1124,7 @@ var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx17(
   "div",
   {
     className: cn(
-      "flex flex-col space-y-[var(--tekton-spacing-2)] text-center sm:text-left",
+      "flex flex-col space-y-[var(--spacing-2)] text-center sm:text-left",
       className
     ),
     ...props
@@ -1123,7 +1135,7 @@ var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx17(
   "div",
   {
     className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-[var(--tekton-spacing-2)]",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-[var(--spacing-2)]",
       className
     ),
     ...props
@@ -1134,7 +1146,7 @@ var SheetTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
   SheetPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold text-[var(--tekton-bg-foreground)]", className),
+    className: cn("text-lg font-semibold text-[var(--bg-foreground)]", className),
     ...props
   }
 ));
@@ -1143,7 +1155,7 @@ var SheetDescription = React15.forwardRef(({ className, ...props }, ref) => /* @
   SheetPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-[var(--tekton-bg-muted-foreground)]", className),
+    className: cn("text-sm text-[var(--bg-muted-foreground)]", className),
     ...props
   }
 ));
@@ -1236,14 +1248,14 @@ var Progress = React17.forwardRef(({ className, value, ...props }, ref) => /* @_
     "aria-valuemin": 0,
     "aria-valuemax": 100,
     className: cn(
-      "relative h-4 w-full overflow-hidden rounded-[var(--tekton-radius-full)] bg-[var(--tekton-bg-secondary)]",
+      "relative h-4 w-full overflow-hidden rounded-[var(--radius-full)] bg-[var(--bg-secondary)]",
       className
     ),
     ...props,
     children: /* @__PURE__ */ jsx19(
       ProgressPrimitive.Indicator,
       {
-        className: "h-full w-full flex-1 bg-[var(--tekton-bg-primary)] transition-all",
+        className: "h-full w-full flex-1 bg-[var(--bg-primary)] transition-all",
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )
@@ -1256,7 +1268,7 @@ import * as React18 from "react";
 import { cva as cva4 } from "class-variance-authority";
 import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 var sidebarVariants = cva4(
-  "flex flex-col border-r border-[var(--tekton-border-default)] bg-[var(--tekton-bg-background)] transition-all duration-300",
+  "flex flex-col border-r border-[var(--border-default)] bg-[var(--bg-background)] transition-all duration-300",
   {
     variants: {
       variant: {
@@ -1276,7 +1288,7 @@ var sidebarVariants = cva4(
   }
 );
 var sidebarHeaderVariants = cva4(
-  "flex items-center gap-[var(--tekton-spacing-2)] border-b border-[var(--tekton-border-default)] bg-[var(--tekton-bg-card)] p-[var(--tekton-spacing-4)]",
+  "flex items-center gap-[var(--spacing-2)] border-b border-[var(--border-default)] bg-[var(--bg-card)] p-[var(--spacing-4)]",
   {
     variants: {
       size: {
@@ -1290,12 +1302,12 @@ var sidebarHeaderVariants = cva4(
     }
   }
 );
-var sidebarContentVariants = cva4("flex-1 overflow-y-auto p-[var(--tekton-spacing-4)]", {
+var sidebarContentVariants = cva4("flex-1 overflow-y-auto p-[var(--spacing-4)]", {
   variants: {
     spacing: {
-      default: "space-y-[var(--tekton-spacing-2)]",
-      compact: "space-y-[var(--tekton-spacing-1)]",
-      relaxed: "space-y-[var(--tekton-spacing-4)]"
+      default: "space-y-[var(--spacing-2)]",
+      compact: "space-y-[var(--spacing-1)]",
+      relaxed: "space-y-[var(--spacing-4)]"
     }
   },
   defaultVariants: {
@@ -1303,12 +1315,12 @@ var sidebarContentVariants = cva4("flex-1 overflow-y-auto p-[var(--tekton-spacin
   }
 });
 var sidebarItemVariants = cva4(
-  "flex w-full items-center gap-[var(--tekton-spacing-3)] rounded-[var(--tekton-radius-md)] px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-2)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "flex w-full items-center gap-[var(--spacing-3)] rounded-[var(--radius-md)] px-[var(--spacing-3)] py-[var(--spacing-2)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "text-[var(--tekton-bg-foreground)] hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)]",
-        active: "bg-[var(--tekton-bg-primary)] text-[var(--tekton-bg-primary-foreground)] hover:bg-[var(--tekton-bg-primary)]/90"
+        default: "text-[var(--bg-foreground)] hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)]",
+        active: "bg-[var(--bg-primary)] text-[var(--bg-primary-foreground)] hover:bg-[var(--bg-primary)]/90"
       }
     },
     defaultVariants: {
@@ -1316,17 +1328,17 @@ var sidebarItemVariants = cva4(
     }
   }
 );
-var sidebarSectionVariants = cva4("space-y-[var(--tekton-spacing-1)]", {
+var sidebarSectionVariants = cva4("space-y-[var(--spacing-1)]", {
   variants: {}
 });
 var sidebarSectionTitleVariants = cva4(
-  "px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-2)] text-xs font-semibold uppercase tracking-wider text-[var(--tekton-text-muted-foreground)]",
+  "px-[var(--spacing-3)] py-[var(--spacing-2)] text-xs font-semibold uppercase tracking-wider text-[var(--text-muted-foreground)]",
   {
     variants: {}
   }
 );
 var sidebarFooterVariants = cva4(
-  "border-t border-[var(--tekton-border-default)] p-[var(--tekton-spacing-4)]",
+  "border-t border-[var(--border-default)] p-[var(--spacing-4)]",
   {
     variants: {}
   }
@@ -1390,7 +1402,7 @@ var SidebarSection = React18.forwardRef(
         {
           className: cn(
             sidebarSectionTitleVariants(),
-            "w-full text-left hover:text-[var(--tekton-bg-foreground)] transition-colors"
+            "w-full text-left hover:text-[var(--bg-foreground)] transition-colors"
           ),
           onClick: () => setIsCollapsed(!isCollapsed),
           "aria-expanded": !isCollapsed,
@@ -1407,7 +1419,7 @@ var SidebarSection = React18.forwardRef(
           ] })
         }
       ),
-      !isCollapsed && /* @__PURE__ */ jsx20("div", { className: "space-y-[var(--tekton-spacing-1)]", children })
+      !isCollapsed && /* @__PURE__ */ jsx20("div", { className: "space-y-[var(--spacing-1)]", children })
     ] });
   }
 );
@@ -1448,7 +1460,7 @@ var NavigationMenuList = React19.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "group flex flex-1 list-none items-center justify-center gap-[var(--tekton-spacing-1)]",
+      "group flex flex-1 list-none items-center justify-center gap-[var(--spacing-1)]",
       className
     ),
     ...props
@@ -1457,7 +1469,7 @@ var NavigationMenuList = React19.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva5(
-  "group inline-flex h-10 w-max items-center justify-center rounded-[var(--tekton-radius-md)] bg-[var(--tekton-bg-background)] px-[var(--tekton-spacing-4)] py-[var(--tekton-spacing-2)] text-sm font-medium transition-colors hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)] focus:bg-[var(--tekton-bg-accent)] focus:text-[var(--tekton-bg-accent-foreground)] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[var(--tekton-bg-accent)]/50 data-[state=open]:bg-[var(--tekton-bg-accent)]/50"
+  "group inline-flex h-10 w-max items-center justify-center rounded-[var(--radius-md)] bg-[var(--bg-background)] px-[var(--spacing-4)] py-[var(--spacing-2)] text-sm font-medium transition-colors hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)] focus:bg-[var(--bg-accent)] focus:text-[var(--bg-accent-foreground)] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[var(--bg-accent)]/50 data-[state=open]:bg-[var(--bg-accent)]/50"
 );
 var NavigationMenuTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
   NavigationMenuPrimitive.Trigger,
@@ -1511,7 +1523,7 @@ var NavigationMenuViewport = React19.forwardRef(({ className, ...props }, ref) =
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
-      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--tekton-radius-md)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-popover)] text-[var(--tekton-text-popover-foreground)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-default)] bg-[var(--bg-popover)] text-[var(--text-popover-foreground)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
       className
     ),
     ref,
@@ -1528,7 +1540,7 @@ var NavigationMenuIndicator = React19.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx21("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-[var(--tekton-border-default)] shadow-md" })
+    children: /* @__PURE__ */ jsx21("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-[var(--border-default)] shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
@@ -1537,7 +1549,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 import * as React20 from "react";
 import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
-var breadcrumbVariants = cva6("flex items-center gap-[var(--tekton-spacing-2)]", {
+var breadcrumbVariants = cva6("flex items-center gap-[var(--spacing-2)]", {
   variants: {
     size: {
       sm: "text-xs",
@@ -1556,12 +1568,12 @@ var breadcrumbItemVariants = cva6("inline-flex items-center gap-1.5", {
   variants: {}
 });
 var breadcrumbLinkVariants = cva6(
-  "transition-colors hover:text-[var(--tekton-bg-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 rounded-[var(--tekton-radius-sm)]",
+  "transition-colors hover:text-[var(--bg-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 rounded-[var(--radius-sm)]",
   {
     variants: {
       active: {
-        true: "text-[var(--tekton-bg-foreground)] font-medium pointer-events-none",
-        false: "text-[var(--tekton-text-muted-foreground)] underline-offset-4 hover:underline"
+        true: "text-[var(--bg-foreground)] font-medium pointer-events-none",
+        false: "text-[var(--text-muted-foreground)] underline-offset-4 hover:underline"
       }
     },
     defaultVariants: {
@@ -1569,11 +1581,11 @@ var breadcrumbLinkVariants = cva6(
     }
   }
 );
-var breadcrumbSeparatorVariants = cva6("text-[var(--tekton-text-muted-foreground)] select-none", {
+var breadcrumbSeparatorVariants = cva6("text-[var(--text-muted-foreground)] select-none", {
   variants: {}
 });
 var breadcrumbEllipsisVariants = cva6(
-  "inline-flex h-9 w-9 items-center justify-center text-[var(--tekton-text-muted-foreground)]",
+  "inline-flex h-9 w-9 items-center justify-center text-[var(--text-muted-foreground)]",
   {
     variants: {}
   }
@@ -1626,7 +1638,7 @@ var BreadcrumbPage = React20.forwardRef(
       "aria-current": "page",
       className: cn(
         breadcrumbLinkVariants({ active: true }),
-        "text-[var(--tekton-bg-foreground)]",
+        "text-[var(--bg-foreground)]",
         className
       ),
       ...props
@@ -1692,7 +1704,7 @@ var Command = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-[var(--tekton-radius-md)] bg-[var(--tekton-bg-popover)] text-[var(--tekton-text-popover-foreground)]",
+      "flex h-full w-full flex-col overflow-hidden rounded-[var(--radius-md)] bg-[var(--bg-popover)] text-[var(--text-popover-foreground)]",
       className
     ),
     ...props
@@ -1708,16 +1720,16 @@ var CommandDialog = ({
     {
       ...props,
       className: cn(
-        "fixed inset-0 z-50 bg-[var(--tekton-bg-background)]/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        "fixed inset-0 z-50 bg-[var(--bg-background)]/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       ),
-      children: /* @__PURE__ */ jsx23("div", { className: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-background)] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", children: /* @__PURE__ */ jsx23(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--tekton-text-muted-foreground)] [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+      children: /* @__PURE__ */ jsx23("div", { className: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--border-default)] bg-[var(--bg-background)] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", children: /* @__PURE__ */ jsx23(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--text-muted-foreground)] [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
     }
   );
 };
 var CommandInput = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs10(
   "div",
   {
-    className: "flex items-center border-b border-[var(--tekton-border-default)] px-3",
+    className: "flex items-center border-b border-[var(--border-default)] px-3",
     "cmdk-input-wrapper": "",
     children: [
       /* @__PURE__ */ jsx23(
@@ -1745,7 +1757,7 @@ var CommandInput = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
         {
           ref,
           className: cn(
-            "flex h-11 w-full rounded-[var(--tekton-radius-md)] bg-transparent py-3 text-sm outline-none placeholder:text-[var(--tekton-text-muted-foreground)] disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-11 w-full rounded-[var(--radius-md)] bg-transparent py-3 text-sm outline-none placeholder:text-[var(--text-muted-foreground)] disabled:cursor-not-allowed disabled:opacity-50",
             className
           ),
           ...props
@@ -1768,7 +1780,7 @@ var CommandEmpty = React21.forwardRef((props, ref) => /* @__PURE__ */ jsx23(
   CommandPrimitive.Empty,
   {
     ref,
-    className: "py-6 text-center text-sm text-[var(--tekton-text-muted-foreground)]",
+    className: "py-6 text-center text-sm text-[var(--text-muted-foreground)]",
     ...props
   }
 ));
@@ -1778,7 +1790,7 @@ var CommandGroup = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-[var(--tekton-bg-foreground)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--tekton-text-muted-foreground)]",
+      "overflow-hidden p-1 text-[var(--bg-foreground)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-[var(--text-muted-foreground)]",
       className
     ),
     ...props
@@ -1789,7 +1801,7 @@ var CommandSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @
   CommandPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-[var(--tekton-border-default)]", className),
+    className: cn("-mx-1 h-px bg-[var(--border-default)]", className),
     ...props
   }
 ));
@@ -1799,7 +1811,7 @@ var CommandItem = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--tekton-radius-sm)] px-2 py-1.5 text-sm outline-none aria-selected:bg-[var(--tekton-bg-accent)] aria-selected:text-[var(--tekton-bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none aria-selected:bg-[var(--bg-accent)] aria-selected:text-[var(--bg-accent-foreground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props
@@ -1811,7 +1823,7 @@ var CommandShortcut = ({ className, ...props }) => {
     "span",
     {
       className: cn(
-        "ml-auto text-xs tracking-widest text-[var(--tekton-text-muted-foreground)]",
+        "ml-auto text-xs tracking-widest text-[var(--text-muted-foreground)]",
         className
       ),
       ...props
@@ -1834,34 +1846,34 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         month: "space-y-4 w-full",
         caption: "relative flex justify-center items-center h-9 w-full",
         month_caption: "flex items-center",
-        caption_label: "text-sm font-black text-[var(--tekton-bg-foreground)]",
+        caption_label: "text-sm font-black text-[var(--bg-foreground)]",
         nav: "absolute inset-0 flex items-center justify-between pointer-events-none z-10 px-2",
         button_previous: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--tekton-radius-md)] text-sm font-medium ring-offset-[var(--tekton-bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          "hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)]",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium ring-offset-[var(--bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          "hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)]",
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 pointer-events-auto"
         ),
         button_next: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--tekton-radius-md)] text-sm font-medium ring-offset-[var(--tekton-bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          "hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)]",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium ring-offset-[var(--bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          "hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)]",
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 pointer-events-auto"
         ),
         month_grid: "w-full border-collapse space-y-1",
         weekdays: "flex w-full",
-        weekday: "text-[var(--tekton-bg-muted-foreground)] rounded-[var(--tekton-radius-md)] flex-1 font-normal text-[0.8rem] text-center",
+        weekday: "text-[var(--bg-muted-foreground)] rounded-[var(--radius-md)] flex-1 font-normal text-[0.8rem] text-center",
         week: "flex w-full mt-2",
-        day: "flex-1 aspect-square text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-[var(--tekton-radius-md)] [&:has([aria-selected].day-outside)]:bg-[var(--tekton-bg-accent)]/50 [&:has([aria-selected])]:bg-[var(--tekton-bg-accent)] first:[&:has([aria-selected])]:rounded-l-[var(--tekton-radius-md)] last:[&:has([aria-selected])]:rounded-r-[var(--tekton-radius-md)] focus-within:relative focus-within:z-20",
+        day: "flex-1 aspect-square text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-[var(--radius-md)] [&:has([aria-selected].day-outside)]:bg-[var(--bg-accent)]/50 [&:has([aria-selected])]:bg-[var(--bg-accent)] first:[&:has([aria-selected])]:rounded-l-[var(--radius-md)] last:[&:has([aria-selected])]:rounded-r-[var(--radius-md)] focus-within:relative focus-within:z-20",
         day_button: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--tekton-radius-md)] text-sm font-medium ring-offset-[var(--tekton-bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          "hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)]",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium ring-offset-[var(--bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          "hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)]",
           "h-full w-full p-0 font-normal aria-selected:opacity-100"
         ),
         range_end: "day-range-end",
-        selected: "rounded-[var(--tekton-radius-md)] bg-[var(--tekton-bg-primary)] text-[var(--tekton-bg-primary-foreground)] hover:bg-[var(--tekton-bg-primary)] hover:text-[var(--tekton-bg-primary-foreground)] focus:bg-[var(--tekton-bg-primary)] focus:text-[var(--tekton-bg-primary-foreground)]",
-        today: "rounded-[var(--tekton-radius-md)] bg-[var(--tekton-bg-accent)] text-[var(--tekton-bg-accent-foreground)]",
-        outside: "day-outside text-[var(--tekton-bg-muted-foreground)] opacity-50 aria-selected:bg-[var(--tekton-bg-accent)]/50 aria-selected:text-[var(--tekton-bg-muted-foreground)] aria-selected:opacity-30",
-        disabled: "text-[var(--tekton-bg-muted-foreground)] opacity-50",
-        range_middle: "aria-selected:bg-[var(--tekton-bg-accent)] aria-selected:text-[var(--tekton-bg-accent-foreground)]",
+        selected: "rounded-[var(--radius-md)] bg-[var(--bg-primary)] text-[var(--bg-primary-foreground)] hover:bg-[var(--bg-primary)] hover:text-[var(--bg-primary-foreground)] focus:bg-[var(--bg-primary)] focus:text-[var(--bg-primary-foreground)]",
+        today: "rounded-[var(--radius-md)] bg-[var(--bg-accent)] text-[var(--bg-accent-foreground)]",
+        outside: "day-outside text-[var(--bg-muted-foreground)] opacity-50 aria-selected:bg-[var(--bg-accent)]/50 aria-selected:text-[var(--bg-muted-foreground)] aria-selected:opacity-30",
+        disabled: "text-[var(--bg-muted-foreground)] opacity-50",
+        range_middle: "aria-selected:bg-[var(--bg-accent)] aria-selected:text-[var(--bg-accent-foreground)]",
         hidden: "invisible",
         ...classNames
       },