@ponti-studios/ui 1.5.1 → 1.7.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 {
@@ -63,6 +64,11 @@
   --color-muted-foreground: var(--text-secondary);
   --color-accent: var(--primary);
   --color-accent-foreground: var(--primary-foreground);
+  /* Distinct from --color-accent: that pairs with white/primary-foreground
+   * for solid fills (badges, active states). This pairs with the page
+   * background for standalone text/icons/borders (inline links, upload
+   * affordances) and must differ per theme to stay AA-compliant. */
+  --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 +77,9 @@
    * 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-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --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/generated/dark.colors.generated.ts

@@ -3,29 +3,32 @@
  */
 
 export default {
-  background: "#111113",
-  card: "#18191b",
-  popover: "#212225",
-  muted: "#18191b",
-  "text-primary": "#edeef0",
-  "text-secondary": "#b0b4ba",
-  tertiary: "#777b84",
-  primary: "#3e63dd",
+  background: "#171714",
+  card: "#1d1d19",
+  popover: "#22221e",
+  muted: "#1d1d19",
+  "text-primary": "#ffffff",
+  "text-secondary": "#aaa79f",
+  tertiary: "#d0ccc2",
+  primary: "#178277",
   destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
+  "success-foreground": "#15110f",
+  "warning-foreground": "#15110f",
   "primary-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,32 @@
  */
 
 :root {
-  --background: #111113;
-  --card: #18191b;
-  --popover: #212225;
-  --muted: #18191b;
-  --text-primary: #edeef0;
-  --text-secondary: #b0b4ba;
-  --tertiary: #777b84;
-  --primary: #3e63dd;
+  --background: #171714;
+  --card: #1d1d19;
+  --popover: #22221e;
+  --muted: #1d1d19;
+  --text-primary: #ffffff;
+  --text-secondary: #aaa79f;
+  --tertiary: #d0ccc2;
+  --primary: #178277;
   --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
+  --success-foreground: #15110f;
+  --warning-foreground: #15110f;
   --primary-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,28 @@
  */
 
 export default {
-  background: "#fcfcfd",
-  card: "#f9f9fb",
-  popover: "#f0f0f3",
-  muted: "#f9f9fb",
-  "text-primary": "#1c2024",
-  "text-secondary": "#60646c",
-  tertiary: "#80838d",
-  primary: "#3e63dd",
+  background: "#f4f0e8",
+  card: "#fbf8f2",
+  popover: "#f6f2ea",
+  muted: "#efe9dc",
+  "text-primary": "#11110f",
+  "text-secondary": "#6a6352",
+  tertiary: "#6d6659",
+  primary: "#107066",
   destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
+  "success-foreground": "#15110f",
+  "warning-foreground": "#15110f",
   "primary-foreground": "#ffffff",
   "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",

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

@@ -3,25 +3,28 @@
  */
 
 :root {
-  --background: #fcfcfd;
-  --card: #f9f9fb;
-  --popover: #f0f0f3;
-  --muted: #f9f9fb;
-  --text-primary: #1c2024;
-  --text-secondary: #60646c;
-  --tertiary: #80838d;
-  --primary: #3e63dd;
+  --background: #f4f0e8;
+  --card: #fbf8f2;
+  --popover: #f6f2ea;
+  --muted: #efe9dc;
+  --text-primary: #11110f;
+  --text-secondary: #6a6352;
+  --tertiary: #6d6659;
+  --primary: #107066;
   --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
+  --success-foreground: #15110f;
+  --warning-foreground: #15110f;
   --primary-foreground: #ffffff;
   --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;

package/src/styles/tokens/index.ts

@@ -1,7 +1,6 @@
 import darkTokens from "./generated/dark.colors.generated";
 import foundations from "./generated/foundations.generated";
 import lightTokens from "./generated/light.colors.generated";
-import nativeTokens from "./generated/native.generated";
 
 const toPixels = (value: string) => {
   if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
@@ -39,7 +38,6 @@ export const fontFamilies = Object.fromEntries(
   Object.entries(foundations.font).map(([key, value]) => [key, value.join(", ")]),
 ) as Record<keyof typeof foundations.font, string>;
 
-export const fontFamiliesNative = { sans: "System", serif: "serif", mono: "monospace" } as const;
 export const textSizes = Object.fromEntries(
   Object.entries(foundations.text).map(([key, value]) => [key, toPixels(value)]),
 ) as Record<keyof typeof foundations.text, number>;
@@ -63,7 +61,6 @@ export const transitionDurations = Object.fromEntries(
   Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
 ) as Record<keyof typeof foundations.duration, number>;
 export const animations = foundations.animate;
-export const motion = nativeTokens.motion;
 
 export type RadiusToken = keyof typeof radii;
 export type TextSizeToken = keyof typeof textSizes;

package/src/styles/tokens/source/dark.tokens.json

@@ -4,35 +4,35 @@
   },
   "background": {
     "$type": "color",
-    "$value": "rgb(17, 17, 19)"
+    "$value": "rgb(23, 23, 20)"
   },
   "card": {
     "$type": "color",
-    "$value": "rgb(24, 25, 27)"
+    "$value": "rgb(29, 29, 25)"
   },
   "popover": {
     "$type": "color",
-    "$value": "rgb(33, 34, 37)"
+    "$value": "rgb(34, 34, 30)"
   },
   "muted": {
     "$type": "color",
-    "$value": "rgb(24, 25, 27)"
+    "$value": "rgb(29, 29, 25)"
   },
   "text-primary": {
     "$type": "color",
-    "$value": "rgb(237, 238, 240)"
+    "$value": "rgb(255, 255, 255)"
   },
   "text-secondary": {
     "$type": "color",
-    "$value": "rgb(176, 180, 186)"
+    "$value": "rgb(170, 167, 159)"
   },
   "tertiary": {
     "$type": "color",
-    "$value": "rgb(119, 123, 132)"
+    "$value": "rgb(208, 204, 194)"
   },
   "primary": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(23, 130, 119)"
   },
   "destructive": {
     "$type": "color",
@@ -46,6 +46,14 @@
     "$type": "color",
     "$value": "rgb(255, 197, 61)"
   },
+  "success-foreground": {
+    "$type": "color",
+    "$value": "rgb(21, 17, 15)"
+  },
+  "warning-foreground": {
+    "$type": "color",
+    "$value": "rgb(21, 17, 15)"
+  },
   "primary-foreground": {
     "$type": "color",
     "$value": "rgb(255, 255, 255)"
@@ -58,13 +66,17 @@
     "$type": "color",
     "$value": "rgb(255, 149, 146)"
   },
+  "text-accent": {
+    "$type": "color",
+    "$value": "rgb(27, 152, 139)"
+  },
   "border-default": {
     "$type": "color",
-    "$value": "rgb(67, 72, 78)"
+    "$value": "rgb(107, 107, 102)"
   },
   "focus-ring": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(27, 152, 139)"
   },
   "chart-1": {
     "$type": "color",
@@ -76,7 +88,7 @@
   },
   "chart-3": {
     "$type": "color",
-    "$value": "rgb(18, 165, 148)"
+    "$value": "rgb(199, 49, 120)"
   },
   "chart-4": {
     "$type": "color",
@@ -96,7 +108,7 @@
   },
   "chart-neutral": {
     "$type": "color",
-    "$value": "rgb(90, 97, 105)"
+    "$value": "rgb(135, 141, 148)"
   },
   "overlay-scrim": {
     "$type": "color",

package/src/styles/tokens/source/light.tokens.json

@@ -4,35 +4,35 @@
   },
   "background": {
     "$type": "color",
-    "$value": "rgb(252, 252, 253)"
+    "$value": "rgb(244, 240, 232)"
   },
   "card": {
     "$type": "color",
-    "$value": "rgb(249, 249, 251)"
+    "$value": "rgb(251, 248, 242)"
   },
   "popover": {
     "$type": "color",
-    "$value": "rgb(240, 240, 243)"
+    "$value": "rgb(246, 242, 234)"
   },
   "muted": {
     "$type": "color",
-    "$value": "rgb(249, 249, 251)"
+    "$value": "rgb(239, 233, 220)"
   },
   "text-primary": {
     "$type": "color",
-    "$value": "rgb(28, 32, 36)"
+    "$value": "rgb(17, 17, 15)"
   },
   "text-secondary": {
     "$type": "color",
-    "$value": "rgb(96, 100, 108)"
+    "$value": "rgb(106, 99, 82)"
   },
   "tertiary": {
     "$type": "color",
-    "$value": "rgb(128, 131, 141)"
+    "$value": "rgb(109, 102, 89)"
   },
   "primary": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(16, 112, 102)"
   },
   "destructive": {
     "$type": "color",
@@ -46,6 +46,14 @@
     "$type": "color",
     "$value": "rgb(255, 197, 61)"
   },
+  "success-foreground": {
+    "$type": "color",
+    "$value": "rgb(21, 17, 15)"
+  },
+  "warning-foreground": {
+    "$type": "color",
+    "$value": "rgb(21, 17, 15)"
+  },
   "primary-foreground": {
     "$type": "color",
     "$value": "rgb(255, 255, 255)"
@@ -58,13 +66,17 @@
     "$type": "color",
     "$value": "rgb(200, 44, 49)"
   },
+  "text-accent": {
+    "$type": "color",
+    "$value": "rgb(16, 112, 102)"
+  },
   "border-default": {
     "$type": "color",
-    "$value": "rgb(205, 206, 214)"
+    "$value": "rgb(143, 133, 118)"
   },
   "focus-ring": {
     "$type": "color",
-    "$value": "rgb(62, 99, 221)"
+    "$value": "rgb(16, 112, 102)"
   },
   "chart-1": {
     "$type": "color",
@@ -76,7 +88,7 @@
   },
   "chart-3": {
     "$type": "color",
-    "$value": "rgb(18, 165, 148)"
+    "$value": "rgb(199, 49, 120)"
   },
   "chart-4": {
     "$type": "color",