@darthcharles/greda 0.2.0 → 1.0.0

package/README.md

@@ -5,7 +5,7 @@ Built from shadcn/ui New York and Radix primitives, with compiled styles and
 TypeScript declarations. Supports React 18 and 19; no Tailwind setup required.
 
 **[Explore Storybook](https://elegant-hotteok-cbb834.netlify.app/)** ·
-[Theming guide](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/introduction-overview--theming) ·
+[Getting started](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/introduction-overview--getting-started) ·
 [Design tokens](https://elegant-hotteok-cbb834.netlify.app/?path=/story/design-tokens--overview)
 
 ## Quick start
@@ -41,8 +41,8 @@ Visit [Storybook](https://elegant-hotteok-cbb834.netlify.app/) for component API
 variants, interaction examples, and accessibility guidance.
 
 Greda and application markup share unprefixed utility classes such as
-`bg-primary`, `text-foreground`, and `border-primary`. Pass them through
-`className` to override component defaults. See the theming guide for supported
+`surface-primary`, `text-primary`, and `border-primary`. Pass them through
+`className` to override component defaults. See the introduction guide for supported
 utilities and migration from `ds-*` classes.
 
 ## With Tailwind 4
@@ -71,17 +71,16 @@ component styles also work without Tailwind.
 ## Theming
 
 Customization is optional. To change the default theme, import your own
-`theme.css` after the package stylesheet and override only the tokens you need.
+`theme.css` after the package stylesheet and override the base colors or other
+tokens you need.
 Unspecified values keep their base defaults, and components and color utilities
 automatically use your overrides:
 
 ```css
 /* theme.css */
 :root {
-  --primary: 9.500 55.556% 42.353%;
-  --primary-hover: 9.714 56.150% 36.667%;
-  --primary-foreground: 0 0% 100%;
-  --ring: 9.500 55.556% 42.353%;
+  --base-primary: 9.500 55.556% 42.353%;
+  --base-primary-hover: 9.714 56.150% 36.667%;
   --radius: 0.75rem;
 }
 ```
@@ -89,6 +88,42 @@ automatically use your overrides:
 Colors use space-separated HSL channels without an `hsl()` wrapper;
 `--overlay` also includes alpha. Other tokens accept ordinary CSS values.
 
+Consumers override only the generic base colors: `--base-primary`,
+`--base-primary-hover`, `--base-secondary`, `--base-tertiary`, `--base-accent`,
+`--base-destructive`, `--base-white`, `--base-black`, and selected
+`--base-gray-*` steps (50, 100, 200, 300, 500, 600, 800, 900). Every theme uses
+the same names. Greda assigns them to independent roles and utilities:
+
+| Category | Utility examples | Default light base colors |
+| --- | --- | --- |
+| Surfaces | `surface-primary`, `surface-secondary`, `surface-tertiary`, `surface-inverse` | White, gray-100, tertiary, black |
+| Text | `text-primary`, `text-secondary`, `text-muted`, `text-inverse` | Black, gray-600, gray-500, white |
+| Borders | `border-primary`, `border-secondary`, `border-inverse` | Gray-200, gray-100, gray-600 |
+
+`bg-primary` / `bg-secondary` use base primary/secondary action colors.
+Primary text and borders use their neutral base assignments independently.
+Dark assignments are built in. Define base overrides on `:root` or a
+`data-theme` element; scoped themes automatically rebind the role variables.
+Consumers do not need to declare surface, text, or border tokens.
+`surface-tertiary` uses `--base-tertiary`: soft blue (`#eff6ff`) in Base and
+light green (`#e8eee0`) in Comal, with darker counterparts in dark mode.
+Override `--base-tertiary` to customize this surface independently of accent
+backgrounds and hover states.
+
+`styles.css` includes role utilities and hover/focus variants; the Tailwind 4
+import also generates responsive and opacity variants. Start with Storybook's
+**Design Tokens → Overview**. **Base colors** shows the palette you customize,
+with brand/state colors first and neutrals second. **Color roles** combines
+surface, text, and border assignments with live examples. Other foundations
+have separate pages.
+
+**Migration:** move color overrides to the generic base slots above. In particular,
+`--primary` becomes `--base-primary`. `text-primary`, `text-secondary`,
+`text-muted`, `border-primary`, and `border-secondary` use category roles
+rather than the matching action color. Use `text-action` / `border-action`
+for action colors. Existing component tokens remain as derived variables;
+Greda owns their assignments. Tooltip uses inverse surface/text roles.
+
 Spacing tokens such as `--space-4` are shared distances for padding, margin, and
 gap. Use them directly in your own CSS when needed; layout rules are optional
 examples, not theme setup. If you only need tokens, import
@@ -98,7 +133,7 @@ Set `data-color-scheme="dark"` on `<html>` for the base dark palette. Brand
 overrides need matching dark colors. Apply themes to `<html>` so portaled
 content inherits them; scoped themes use the content component's `container` prop.
 
-The [theming guide](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/introduction-overview--theming)
+The [introduction guide](https://elegant-hotteok-cbb834.netlify.app/?path=/docs/introduction-overview--getting-started)
 covers fonts, dark mode, and scoped portals. Browse the
 [interactive token catalog](https://elegant-hotteok-cbb834.netlify.app/?path=/story/design-tokens--overview)
 or read the defaults in [tokens.css](src/styles/tokens.css).

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "secondary" | "default" | "destructive" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "secondary" | "default" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/index.js

@@ -1,27 +1,27 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
 import * as i from "react";
-import { Slot as k } from "@radix-ui/react-slot";
-import { cva as p } from "class-variance-authority";
+import { Slot as S } from "@radix-ui/react-slot";
+import { cva as f } from "class-variance-authority";
 import { cn as r } from "./utils.js";
-import * as b from "@radix-ui/react-label";
+import * as y from "@radix-ui/react-label";
 import * as s from "@radix-ui/react-select";
-import { Check as x, ChevronDown as y, ChevronUp as S, X as h, Minus as P } from "lucide-react";
+import { Check as b, ChevronDown as x, ChevronUp as k, X as h, Minus as P } from "lucide-react";
 import * as n from "@radix-ui/react-dialog";
 import * as v from "@radix-ui/react-checkbox";
 import * as u from "@radix-ui/react-tabs";
 import * as l from "@radix-ui/react-toast";
-import * as f from "@radix-ui/react-tooltip";
-const z = p(
+import * as p from "@radix-ui/react-tooltip";
+const z = f(
   "comal-ui inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all active:[&:not([aria-haspopup])]:translate-y-px motion-reduce:active:[&:not([aria-haspopup])]:transform-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground shadow hover:bg-primary-hover",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-primary surface-primary shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-action underline-offset-4 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -46,7 +46,7 @@ const z = p(
     type: C,
     ...T
   }, D) => /* @__PURE__ */ o(
-    d ? k : "button",
+    d ? S : "button",
     {
       className: r(z({ variant: t, size: a, className: e })),
       ref: D,
@@ -65,7 +65,7 @@ const j = i.forwardRef(
       type: t,
       className: r(
         "comal-ui",
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive md:text-sm",
+        "flex h-9 w-full rounded-md border border-primary bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-primary placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive md:text-sm",
         e
       ),
       ref: d,
@@ -79,7 +79,7 @@ const I = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   {
     className: r(
       "comal-ui",
-      "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive md:text-sm",
+      "flex min-h-[60px] w-full rounded-md border border-primary bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive md:text-sm",
       e
     ),
     ref: a,
@@ -87,30 +87,30 @@ const I = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   }
 ));
 I.displayName = "Textarea";
-const B = p(
+const B = f(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 ), L = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
-  b.Root,
+  y.Root,
   {
     ref: a,
     className: r("comal-ui", B(), e),
     ...t
   }
 ));
-L.displayName = b.Root.displayName;
-const xe = s.Root, ye = s.Group, he = s.Value, F = i.forwardRef(({ className: e, children: t, ...a }, d) => /* @__PURE__ */ m(
+L.displayName = y.Root.displayName;
+const be = s.Root, xe = s.Group, he = s.Value, F = i.forwardRef(({ className: e, children: t, ...a }, d) => /* @__PURE__ */ m(
   s.Trigger,
   {
     ref: d,
     className: r(
       "comal-ui",
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-primary bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive [&>span]:line-clamp-1",
       e
     ),
     ...a,
     children: [
       t,
-      /* @__PURE__ */ o(s.Icon, { asChild: !0, children: /* @__PURE__ */ o(y, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ o(s.Icon, { asChild: !0, children: /* @__PURE__ */ o(x, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
@@ -125,7 +125,7 @@ const w = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
       e
     ),
     ...t,
-    children: /* @__PURE__ */ o(S, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ o(k, { className: "h-4 w-4" })
   }
 ));
 w.displayName = s.ScrollUpButton.displayName;
@@ -139,7 +139,7 @@ const N = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
       e
     ),
     ...t,
-    children: /* @__PURE__ */ o(y, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ o(x, { className: "h-4 w-4" })
   }
 ));
 N.displayName = s.ScrollDownButton.displayName;
@@ -149,7 +149,7 @@ const H = i.forwardRef(({ className: e, container: t, children: a, position: d =
     ref: g,
     className: r(
       "comal-ui",
-      "relative z-popover max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-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 origin-[--radix-select-content-transform-origin]",
+      "relative z-popover max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border surface-raised text-primary 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 origin-[--radix-select-content-transform-origin]",
       d === "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",
       e
     ),
@@ -197,7 +197,7 @@ const A = i.forwardRef(({ className: e, children: t, ...a }, d) => /* @__PURE__
     ),
     ...a,
     children: [
-      /* @__PURE__ */ o("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ o(s.ItemIndicator, { children: /* @__PURE__ */ o(x, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ o("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ o(s.ItemIndicator, { children: /* @__PURE__ */ o(b, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ o(s.ItemText, { children: t })
     ]
   }
@@ -237,13 +237,13 @@ const G = i.forwardRef(({ className: e, container: t, children: a, ...d }, c) =>
       ref: c,
       className: r(
         "comal-ui",
-        "fixed left-[50%] top-[50%] z-overlay grid text-foreground w-[calc(100%-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border 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",
+        "fixed left-[50%] top-[50%] z-overlay grid text-primary w-[calc(100%-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border surface-primary 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",
         e
       ),
       ...d,
       children: [
         a,
-        /* @__PURE__ */ m(n.Close, { className: "comal-ui absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        /* @__PURE__ */ m(n.Close, { className: "comal-ui absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted", children: [
           /* @__PURE__ */ o(h, { className: "h-4 w-4" }),
           /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
         ] })
@@ -299,7 +299,7 @@ const E = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   n.Description,
   {
     ref: a,
-    className: r("comal-ui", "text-sm text-muted-foreground", e),
+    className: r("comal-ui", "text-sm text-muted", e),
     ...t
   }
 ));
@@ -310,7 +310,7 @@ const J = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ref: a,
     className: r(
       "comal-ui",
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border surface-raised text-primary shadow",
       e
     ),
     ...t
@@ -347,7 +347,7 @@ const W = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   "div",
   {
     ref: a,
-    className: r("comal-ui", "text-sm text-muted-foreground", e),
+    className: r("comal-ui", "text-sm text-muted", e),
     ...t
   }
 ));
@@ -374,7 +374,7 @@ const Z = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   }
 ));
 Z.displayName = "CardFooter";
-const $ = p(
+const $ = f(
   "comal-ui inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
@@ -382,7 +382,7 @@ const $ = p(
         default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground"
+        outline: "text-primary"
       }
     },
     defaultVariants: {
@@ -399,7 +399,7 @@ const ee = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ref: a,
     className: r(
       "comal-ui",
-      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-action shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled aria-[invalid=true]:border-destructive data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
       e
     ),
     ...t,
@@ -412,7 +412,7 @@ const ee = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
           "grid place-content-center text-current"
         ),
         children: [
-          /* @__PURE__ */ o(x, { className: "h-4 w-4", "data-check-icon": "" }),
+          /* @__PURE__ */ o(b, { className: "h-4 w-4", "data-check-icon": "" }),
           /* @__PURE__ */ o(P, { className: "h-4 w-4", "data-mixed-icon": "" })
         ]
       }
@@ -426,7 +426,7 @@ const Te = u.Root, te = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__
     ref: a,
     className: r(
       "comal-ui",
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground data-[orientation=vertical]:h-auto data-[orientation=vertical]:flex-col",
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted data-[orientation=vertical]:h-auto data-[orientation=vertical]:flex-col",
       e
     ),
     ...t
@@ -439,7 +439,7 @@ const ae = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ref: a,
     className: r(
       "comal-ui",
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:surface-primary data-[state=active]:text-primary data-[state=active]:shadow",
       e
     ),
     ...t
@@ -472,12 +472,12 @@ const De = l.Provider, re = i.forwardRef(({ className: e, ...t }, a) => /* @__PU
   }
 ));
 re.displayName = l.Viewport.displayName;
-const ie = p(
+const ie = f(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 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-background text-foreground",
+        default: "border surface-primary text-primary",
         destructive: "destructive group border-destructive bg-destructive text-destructive-foreground"
       }
     },
@@ -513,7 +513,7 @@ const ne = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
     ref: a,
     className: r(
       "comal-ui",
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 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-1 top-1 rounded-md p-1 text-primary/50 opacity-0 transition-opacity hover:text-primary focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-destructive-foreground/80 group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive-foreground group-[.destructive]:focus:ring-offset-destructive",
       e
     ),
     "aria-label": "Dismiss notification",
@@ -545,20 +545,20 @@ const ce = i.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o(
   }
 ));
 ce.displayName = l.Description.displayName;
-const ke = f.Provider, Se = f.Root, Pe = f.Trigger, me = i.forwardRef(({ className: e, container: t, sideOffset: a = 4, ...d }, c) => /* @__PURE__ */ o(f.Portal, { container: t, children: /* @__PURE__ */ o(
-  f.Content,
+const Se = p.Provider, ke = p.Root, Pe = p.Trigger, me = i.forwardRef(({ className: e, container: t, sideOffset: a = 4, ...d }, c) => /* @__PURE__ */ o(p.Portal, { container: t, children: /* @__PURE__ */ o(
+  p.Content,
   {
     ref: c,
     sideOffset: a,
     className: r(
       "comal-ui",
-      "z-popover max-w-[var(--tooltip-width)] overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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 origin-[--radix-tooltip-content-transform-origin]",
+      "z-popover max-w-[var(--tooltip-width)] overflow-hidden rounded-md surface-inverse px-3 py-1.5 text-xs text-inverse 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 origin-[--radix-tooltip-content-transform-origin]",
       e
     ),
     ...d
   }
 ) }));
-me.displayName = f.Content.displayName;
+me.displayName = p.Content.displayName;
 export {
   Ce as Badge,
   V as Button,
@@ -581,9 +581,9 @@ export {
   Ne as DialogTrigger,
   j as Input,
   L as Label,
-  xe as Select,
+  be as Select,
   H as SelectContent,
-  ye as SelectGroup,
+  xe as SelectGroup,
   A as SelectItem,
   U as SelectLabel,
   N as SelectScrollDownButton,
@@ -603,9 +603,9 @@ export {
   De as ToastProvider,
   le as ToastTitle,
   re as ToastViewport,
-  Se as Tooltip,
+  ke as Tooltip,
   me as TooltipContent,
-  ke as TooltipProvider,
+  Se as TooltipProvider,
   Pe as TooltipTrigger,
   $ as badgeVariants,
   z as buttonVariants,