@ponti-studios/ui 1.6.0 → 1.8.0

package/src/components/primitives/avatar-placeholder.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
+  <title id="title">Portrait placeholder</title>
+  <desc id="desc">An illustrated portrait with warm coral and blue tones.</desc>
+  <rect width="256" height="256" fill="#dce8f2"/>
+  <circle cx="202" cy="54" r="34" fill="#ffb36b"/>
+  <path d="M0 214c36-34 74-47 112-39 37 8 63 34 79 81H0z" fill="#185a72"/>
+  <path d="M83 256c5-49 25-78 73-78 47 0 68 29 73 78z" fill="#ff704d"/>
+  <path d="M91 111c0-43 28-73 66-73s66 30 66 73c0 42-25 72-66 72s-66-30-66-72z" fill="#c97852"/>
+  <path d="M88 111c-2-46 25-79 70-79 42 0 68 29 68 72-14-16-31-26-51-30-23 27-52 39-87 37z" fill="#243746"/>
+  <circle cx="128" cy="116" r="5" fill="#243746"/>
+  <circle cx="176" cy="116" r="5" fill="#243746"/>
+  <path d="M137 145c8 6 17 6 25 0" fill="none" stroke="#243746" stroke-linecap="round" stroke-width="5"/>
+</svg>

package/src/components/primitives/avatar.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar";
+import avatarPlaceholder from "./avatar-placeholder.svg";
 
 const meta = {
   title: "Primitives/Avatar",
@@ -14,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 export const WithImage: Story = {
   render: () => (
     <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarImage src={avatarPlaceholder} alt="Illustrated portrait" />
       <AvatarFallback>CN</AvatarFallback>
     </Avatar>
   ),

package/src/components/primitives/badge.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { LucideAlertCircle, LucideDiamond, LucideNut } from "lucide-react";
 import { Badge } from "./badge";
 
 const meta = {
@@ -24,9 +25,18 @@ export const Default: Story = {
 export const Variants: Story = {
   render: () => (
     <div className="flex flex-wrap gap-3">
-      <Badge variant="default">Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="default">
+        <LucideDiamond className="size-3" />
+        Default
+      </Badge>
+      <Badge variant="secondary">
+        <LucideNut className="size-3" />
+        Secondary
+      </Badge>
+      <Badge variant="destructive">
+        <LucideAlertCircle className="size-3" />
+        Destructive
+      </Badge>
       <Badge variant="outline">Outline</Badge>
     </div>
   ),

package/src/components/primitives/badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "state-settle inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border border-transparent px-1.5 py-px text-xs font-medium [&>svg]:size-3 [&>svg]:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+  "state-settle inline-flex w-fit shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded border border-transparent px-1.5 py-px text-xs font-medium [&>svg]:size-3 [&>svg]:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20",
   {
     variants: {
       variant: {

package/src/components/primitives/button.tsx

@@ -20,7 +20,7 @@ const buttonVariants = cva(
         outline: "border-input bg-background hover:bg-muted hover:text-muted-foreground",
         secondary: "border-input bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "border-transparent bg-transparent hover:bg-muted hover:text-muted-foreground",
-        link: "border-transparent bg-transparent px-0 text-primary underline-offset-4 hover:underline",
+        link: "border-transparent bg-transparent px-0 text-accent-text underline-offset-4 hover:underline",
       },
       size: {
         sm: "min-h-8 px-2.5 text-xs",

package/src/components/primitives/card.tsx

@@ -25,8 +25,12 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-title" className={cn("text-xl", className)} {...props} />;
+function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3 data-slot="card-title" className={cn("text-xl", className)} {...props}>
+      {props.children}
+    </h3>
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {

package/src/components/primitives/index.ts

@@ -10,6 +10,3 @@ export {
   CardHeader,
   CardTitle,
 } from "./card";
-export { Label } from "./label";
-export { StatusBadge } from "./status-badge";
-export type { StatusBadgeConfig, StatusBadgeProps } from "./status-badge";

package/src/index.ts

@@ -9,17 +9,16 @@ export { useMediaQuery } from "./hooks/use-media-query";
 export { useIsMobile } from "./hooks/use-mobile";
 export { normalizeOtp, OTP_LENGTH } from "./lib/auth";
 export { copyToClipboard } from "./lib/clipboard";
-export { createMemoryStorage } from "./lib/create-memory-storage";
 export { cn } from "./lib/utils";
 export { colors } from "./styles/tokens/css-vars";
 export {
   animations,
+  breakpoints,
   colorThemes,
   colorTokenNames,
   containers,
   easing,
   fontFamilies,
-  fontFamiliesNative,
   fontWeights,
   leading,
   radii,
@@ -29,7 +28,6 @@ export {
   textSizes,
   tracking,
   transitionDurations,
-  breakpoints,
   zIndices,
 } from "./styles/tokens/index";
 export type {

package/src/lib/index.ts

@@ -1,4 +1,3 @@
-export { cn } from "./utils";
-export { copyToClipboard } from "./clipboard";
-export { createMemoryStorage } from "./create-memory-storage";
 export { normalizeOtp, OTP_LENGTH } from "./auth";
+export { copyToClipboard } from "./clipboard";
+export { cn } from "./utils";

package/src/styles/animations.css

@@ -90,6 +90,14 @@
     opacity: 0;
   }
 }
+@keyframes progress-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
 
 .data-open\:animate-in[data-open],
 .data-open\:animate-in[data-state="open"] {
@@ -125,6 +133,44 @@
   animation: sheet-slide-out-bottom 200ms var(--ease-drawer);
 }
 
+[data-slot="dialog-overlay"][data-open],
+[data-slot="dialog-overlay"][data-state="open"] {
+  animation: fade-in 200ms var(--ease-out);
+}
+[data-slot="dialog-overlay"][data-closed],
+[data-slot="dialog-overlay"][data-state="closed"] {
+  /* Must stay in lockstep with [data-slot="dialog-content"]'s close duration below (both 200ms) —
+     Base UI gates the whole portal's unmount on this element's own close-animation duration, not
+     the content panel's, so a mismatch here yanks the sliding/zooming panel off mid-animation. */
+  animation: fade-out 200ms var(--ease-in);
+}
+
+/* Mobile: bottom sheet, slides up from the edge it's anchored to. */
+[data-slot="dialog-content"][data-open],
+[data-slot="dialog-content"][data-state="open"] {
+  animation: sheet-slide-in-bottom 300ms var(--ease-drawer);
+}
+[data-slot="dialog-content"][data-closed],
+[data-slot="dialog-content"][data-state="closed"] {
+  animation: sheet-slide-out-bottom 200ms var(--ease-drawer);
+}
+
+/* Desktop: centered card, fades and scales in place instead of sliding. */
+@media (min-width: 640px) {
+  [data-slot="dialog-content"][data-open],
+  [data-slot="dialog-content"][data-state="open"] {
+    animation:
+      fade-in 150ms var(--ease-out),
+      zoom-in 150ms var(--ease-out);
+  }
+  [data-slot="dialog-content"][data-closed],
+  [data-slot="dialog-content"][data-state="closed"] {
+    animation:
+      fade-out 200ms var(--ease-in),
+      zoom-out 200ms var(--ease-in);
+  }
+}
+
 @media (min-width: 768px) {
   [data-slot="sheet-content"][data-open],
   [data-slot="sheet-content"][data-state="open"] {
@@ -162,4 +208,20 @@
   [data-slot="sheet-content"][data-state="closed"] {
     animation: fade-out 120ms var(--ease-in) !important;
   }
+  [data-slot="dialog-overlay"][data-open],
+  [data-slot="dialog-overlay"][data-state="open"] {
+    animation: fade-in 120ms var(--ease-out) !important;
+  }
+  [data-slot="dialog-overlay"][data-closed],
+  [data-slot="dialog-overlay"][data-state="closed"] {
+    animation: fade-out 120ms var(--ease-in) !important;
+  }
+  [data-slot="dialog-content"][data-open],
+  [data-slot="dialog-content"][data-state="open"] {
+    animation: fade-in var(--duration-150) var(--ease-out) !important;
+  }
+  [data-slot="dialog-content"][data-closed],
+  [data-slot="dialog-content"][data-state="closed"] {
+    animation: fade-out 120ms var(--ease-in) !important;
+  }
 }

package/src/styles/index.css

@@ -29,6 +29,7 @@
   --animate-fade-out: fade-out 120ms ease-in;
   --animate-zoom-in: zoom-in 150ms ease-out;
   --animate-zoom-out: zoom-out 120ms ease-in;
+  --animate-progress-shimmer: progress-shimmer 1.1s linear infinite;
 }
 
 @utility fade-in-0 {
@@ -53,16 +54,19 @@
   --color-foreground: var(--text-primary);
   --color-card: var(--card);
   --color-card-foreground: var(--text-primary);
-  --color-popover: var(--background);
+  --color-popover: var(--popover);
   --color-popover-foreground: var(--text-primary);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--card);
+  --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--text-primary);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--text-secondary);
-  --color-accent: var(--primary);
-  --color-accent-foreground: var(--primary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  /* Distinct from --color-accent: this pairs with the page background for
+   * standalone text/icons/borders (inline links, upload affordances). */
+  --color-accent-text: var(--text-accent);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   /* Distinct from --color-destructive: that pairs with white for solid
@@ -71,7 +75,11 @@
    * messages, alert copy) and must differ per theme to stay AA-compliant. */
   --color-destructive-text: var(--text-destructive);
   --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-text: var(--text-success);
   --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-text: var(--text-warning);
   --color-border: var(--border-default);
   --color-input: var(--border-default);
   --color-ring: var(--focus-ring);
@@ -178,6 +186,15 @@
 @utility scroll-fade-none {
   --scroll-fade-mask: none;
 }
+/* Hides the native scrollbar so a custom overlay affordance (ScrollArea's
+ * Scrollbar/Thumb) can stand in for it. */
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 @utility h-screen {
   height: 100vh;
   height: 100dvh;
@@ -279,6 +296,16 @@
     cursor: pointer;
     font-family: inherit;
   }
+  label {
+    color: var(--color-foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+  }
+  :where(.peer:disabled) ~ label {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
   h1,
   h2,
   h3,

package/src/styles/tokens/color-systems.stories.tsx

@@ -2,40 +2,188 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "../../components/primitives/button";
 import { colors } from "./css-vars";
-import { colorTokenNames } from "./index";
+import type { ColorToken } from "./index";
 
 const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+type Role = {
+  token: ColorToken;
+  purpose: string;
+  foreground?: ColorToken;
+};
+
+const surfaces: Role[] = [
+  { token: "background", purpose: "The page and app shell surface." },
+  { token: "card", purpose: "Content containers and grouped information." },
+  { token: "popover", purpose: "Dropdowns, dialogs, and floating panels." },
+  { token: "muted", purpose: "Quiet, disabled, and loading surfaces." },
+  { token: "secondary", purpose: "Secondary actions and selectable chips." },
+  {
+    token: "accent",
+    purpose: "Tinted emphasis and hover surfaces.",
+    foreground: "accent-foreground",
+  },
+];
+
+const text: Role[] = [
+  { token: "text-primary", purpose: "Primary reading text." },
+  { token: "text-secondary", purpose: "Supporting labels and descriptions." },
+  { token: "tertiary", purpose: "Metadata, timestamps, and placeholders." },
+  { token: "text-accent", purpose: "Standalone links and accent affordances." },
+  { token: "text-success", purpose: "Standalone positive status text and icons." },
+  { token: "text-warning", purpose: "Standalone cautionary status text and icons." },
+  { token: "text-destructive", purpose: "Standalone error and destructive text." },
+];
+
+const actions: Role[] = [
+  {
+    token: "primary",
+    purpose: "The strongest action on a screen.",
+    foreground: "primary-foreground",
+  },
+  {
+    token: "destructive",
+    purpose: "Irreversible or dangerous actions.",
+    foreground: "destructive-foreground",
+  },
+  {
+    token: "success",
+    purpose: "Positive indicators and confirmed states.",
+    foreground: "success-foreground",
+  },
+  {
+    token: "warning",
+    purpose: "Caution indicators and attention states.",
+    foreground: "warning-foreground",
+  },
+];
+
+const system: Role[] = [
+  { token: "border-default", purpose: "Default borders, inputs, and dividers." },
+  { token: "focus-ring", purpose: "Keyboard focus indication." },
+  { token: "overlay-scrim", purpose: "Backdrop behind modal surfaces." },
+];
+
+const charts: Role[] = [
+  { token: "chart-1", purpose: "Categorical data series one." },
+  { token: "chart-2", purpose: "Categorical data series two." },
+  { token: "chart-3", purpose: "Categorical data series three." },
+  { token: "chart-4", purpose: "Categorical data series four." },
+  { token: "chart-5", purpose: "Categorical data series five." },
+  { token: "chart-positive", purpose: "Positive trend in a visualization." },
+  { token: "chart-negative", purpose: "Negative trend in a visualization." },
+  { token: "chart-neutral", purpose: "Neutral or baseline trend." },
+];
+
+function RoleCard({ token, purpose, foreground }: Role) {
+  const isText = token.startsWith("text-") || token === "tertiary";
+  const isSurface = surfaces.some((role) => role.token === token);
+  const swatchOnly = !isText && !isSurface && !foreground;
+  const background = isText ? "background" : token;
+  const contentColor = isText ? token : (foreground ?? "text-primary");
+
+  return (
+    <article className="border-border overflow-hidden rounded-md border bg-card">
+      <div
+        className="flex min-h-24 items-end p-3"
+        style={{
+          backgroundColor: colors[swatchOnly ? "card" : background],
+          color: colors[swatchOnly ? "text-primary" : contentColor],
+        }}
+      >
+        {swatchOnly ? (
+          <span
+            aria-hidden="true"
+            className="h-full min-h-16 w-full rounded-sm"
+            style={{ backgroundColor: colors[token] }}
+          />
+        ) : (
+          <span className="font-mono text-xs">{token}</span>
+        )}
+      </div>
+      <div className="grid gap-1 p-3">
+        <code className="text-sm font-medium">--{token}</code>
+        <p className="text-muted-foreground text-sm">{purpose}</p>
+        {foreground && (
+          <p className="text-muted-foreground text-xs">Paired content: --{foreground}</p>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function RoleSection({
+  title,
+  description,
+  roles,
+}: {
+  title: string;
+  description: string;
+  roles: Role[];
+}) {
+  return (
+    <section className="grid gap-3">
+      <div className="grid gap-1">
+        <h2 className="text-lg font-semibold">{title}</h2>
+        <p className="text-muted-foreground text-sm">{description}</p>
+      </div>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {roles.map((role) => (
+          <RoleCard key={role.token} {...role} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export const SystemAppearance: Story = {
   render: () => (
-    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
-      <header className="grid gap-2">
-        <h1 className="text-2xl font-semibold">System color roles</h1>
-        <p className="text-muted-foreground max-w-prose text-sm">
-          These semantic roles resolve from the operating system’s light or dark appearance. CSS is
-          the single source of their values.
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid max-w-3xl gap-2">
+        <p className="text-accent-text text-xs font-medium uppercase tracking-widest">
+          Foundations
         </p>
+        <h1 className="text-2xl font-semibold">Color roles</h1>
+        <p className="text-muted-foreground text-sm">
+          Every color has a job. These roles resolve from the operating system’s light or dark
+          appearance and are the only colors components should consume.
+        </p>
+        <div className="flex flex-wrap gap-2 pt-2">
+          <Button>Primary action</Button>
+          <Button variant="secondary">Secondary action</Button>
+          <Button variant="outline">Outline action</Button>
+          <Button variant="destructive">Delete item</Button>
+        </div>
       </header>
-      <div className="flex flex-wrap gap-2">
-        <Button>Primary action</Button>
-        <Button variant="secondary">Secondary action</Button>
-        <Button variant="outline">Outline action</Button>
-        <Button variant="destructive">Delete item</Button>
-      </div>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-        {colorTokenNames.map((token) => (
-          <div
-            key={token}
-            className="border-border grid min-h-20 content-end rounded-md border p-3"
-            style={{ backgroundColor: colors[token] }}
-          >
-            <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
-              {token}
-            </span>
-          </div>
-        ))}
+
+      <div className="grid gap-10">
+        <RoleSection
+          title="Surfaces"
+          description="Backgrounds establish hierarchy. Use the lightest appropriate surface and let spacing do the rest."
+          roles={surfaces}
+        />
+        <RoleSection
+          title="Text"
+          description="Text roles describe hierarchy or state. Use a text role when content sits directly on a surface."
+          roles={text}
+        />
+        <RoleSection
+          title="Actions and status"
+          description="Fill roles communicate action or state and always pair with their matching foreground."
+          roles={actions}
+        />
+        <RoleSection
+          title="System"
+          description="Structural colors support boundaries, focus, and modal layering without competing with content."
+          roles={system}
+        />
+        <RoleSection
+          title="Charts"
+          description="Chart roles are for data visualization only. They do not communicate interaction or severity in product UI."
+          roles={charts}
+        />
       </div>
     </main>
   ),

package/src/styles/tokens/generated/dark.colors.generated.ts

@@ -3,29 +3,37 @@
  */
 
 export default {
-  background: "#111113",
-  card: "#18191b",
-  popover: "#212225",
-  muted: "#18191b",
-  "text-primary": "#edeef0",
-  "text-secondary": "#b0b4ba",
-  tertiary: "#777b84",
-  primary: "#3e63dd",
+  background: "#171714",
+  card: "#1d1d19",
+  secondary: "#2b2b25",
+  popover: "#22221e",
+  muted: "#1d1d19",
+  "text-primary": "#ffffff",
+  "text-secondary": "#aaa79f",
+  tertiary: "#d0ccc2",
+  primary: "#178277",
+  accent: "#21433f",
   destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
+  "text-success": "#55d89a",
+  "text-warning": "#ffd86a",
+  "success-foreground": "#15110f",
+  "warning-foreground": "#15110f",
   "primary-foreground": "#ffffff",
+  "accent-foreground": "#ffffff",
   "destructive-foreground": "#ffffff",
   "text-destructive": "#ff9592",
-  "border-default": "#43484e",
-  "focus-ring": "#3e63dd",
+  "text-accent": "#1b988b",
+  "border-default": "#6b6b66",
+  "focus-ring": "#1b988b",
   "chart-1": "#3e63dd",
   "chart-2": "#6e56cf",
-  "chart-3": "#12a594",
+  "chart-3": "#c73178",
   "chart-4": "#f76b15",
   "chart-5": "#696e77",
   "chart-positive": "#30a46c",
   "chart-negative": "#e5484d",
-  "chart-neutral": "#5a6169",
+  "chart-neutral": "#878d94",
   "overlay-scrim": "#000000",
 };

package/src/styles/tokens/generated/dark.css

@@ -3,29 +3,37 @@
  */
 
 :root {
-  --background: #111113;
-  --card: #18191b;
-  --popover: #212225;
-  --muted: #18191b;
-  --text-primary: #edeef0;
-  --text-secondary: #b0b4ba;
-  --tertiary: #777b84;
-  --primary: #3e63dd;
+  --background: #171714;
+  --card: #1d1d19;
+  --secondary: #2b2b25;
+  --popover: #22221e;
+  --muted: #1d1d19;
+  --text-primary: #ffffff;
+  --text-secondary: #aaa79f;
+  --tertiary: #d0ccc2;
+  --primary: #178277;
+  --accent: #21433f;
   --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
+  --text-success: #55d89a;
+  --text-warning: #ffd86a;
+  --success-foreground: #15110f;
+  --warning-foreground: #15110f;
   --primary-foreground: #ffffff;
+  --accent-foreground: #ffffff;
   --destructive-foreground: #ffffff;
   --text-destructive: #ff9592;
-  --border-default: #43484e;
-  --focus-ring: #3e63dd;
+  --text-accent: #1b988b;
+  --border-default: #6b6b66;
+  --focus-ring: #1b988b;
   --chart-1: #3e63dd;
   --chart-2: #6e56cf;
-  --chart-3: #12a594;
+  --chart-3: #c73178;
   --chart-4: #f76b15;
   --chart-5: #696e77;
   --chart-positive: #30a46c;
   --chart-negative: #e5484d;
-  --chart-neutral: #5a6169;
+  --chart-neutral: #878d94;
   --overlay-scrim: #000000;
 }

package/src/styles/tokens/generated/light.colors.generated.ts

@@ -3,25 +3,33 @@
  */
 
 export default {
-  background: "#fcfcfd",
-  card: "#f9f9fb",
-  popover: "#f0f0f3",
-  muted: "#f9f9fb",
-  "text-primary": "#1c2024",
-  "text-secondary": "#60646c",
-  tertiary: "#80838d",
-  primary: "#3e63dd",
+  background: "#f4f0e8",
+  card: "#fbf8f2",
+  secondary: "#e8e4da",
+  popover: "#f6f2ea",
+  muted: "#efe9dc",
+  "text-primary": "#11110f",
+  "text-secondary": "#6a6352",
+  tertiary: "#6d6659",
+  primary: "#107066",
+  accent: "#d7efeb",
   destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
+  "text-success": "#1f7a50",
+  "text-warning": "#8a5a00",
+  "success-foreground": "#15110f",
+  "warning-foreground": "#15110f",
   "primary-foreground": "#ffffff",
+  "accent-foreground": "#11110f",
   "destructive-foreground": "#ffffff",
   "text-destructive": "#c82c31",
-  "border-default": "#cdced6",
-  "focus-ring": "#3e63dd",
+  "text-accent": "#107066",
+  "border-default": "#8f8576",
+  "focus-ring": "#107066",
   "chart-1": "#3e63dd",
   "chart-2": "#6e56cf",
-  "chart-3": "#12a594",
+  "chart-3": "#c73178",
   "chart-4": "#f76b15",
   "chart-5": "#8b8d98",
   "chart-positive": "#1f7a50",