@psnext/design-system 1.0.0 → 1.1.0

package/dist/styles/tokens/colors.css

@@ -0,0 +1,251 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --white: #ffffff;
+  --black: #000000;
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #e5e5e5;
+  --neutral-300: #d4d4d4;
+  --neutral-400: #a3a3a3;
+  --neutral-500: #737373;
+  --neutral-600: #525252;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-950: #0a0a0a;
+  --red-50: #fef2f5;
+  --red-100: #fde6ea;
+  --red-200: #fbccd6;
+  --red-300: #f699ac;
+  --red-400: #f26783;
+  --red-500: #e90130;
+  --red-600: #d2012b;
+  --red-700: #bc0126;
+  --red-800: #8d011d;
+  --red-900: #6c0016;
+  --red-950: #3d000d;
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+  --blue-950: #172554;
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+  --slate-950: #020617;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --gray-950: #030712;
+  --zinc-50: #fafafa;
+  --zinc-100: #f4f4f5;
+  --zinc-200: #e4e4e7;
+  --zinc-300: #d4d4d8;
+  --zinc-400: #a1a1aa;
+  --zinc-500: #71717a;
+  --zinc-600: #52525b;
+  --zinc-700: #3f3f46;
+  --zinc-800: #27272a;
+  --zinc-900: #18181b;
+  --zinc-950: #09090b;
+  --stone-50: #fafaf9;
+  --stone-100: #f5f5f4;
+  --stone-200: #e7e5e4;
+  --stone-300: #d6d3d1;
+  --stone-400: #a8a29e;
+  --stone-500: #78716c;
+  --stone-600: #57534e;
+  --stone-700: #44403c;
+  --stone-800: #292524;
+  --stone-900: #1c1917;
+  --stone-950: #0c0a09;
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-200: #fed7aa;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #c2410c;
+  --orange-800: #9a3412;
+  --orange-900: #7c2d12;
+  --orange-950: #431407;
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  --amber-950: #451a03;
+  --lime-50: #f7fee7;
+  --lime-100: #ecfccb;
+  --lime-200: #d9f99d;
+  --lime-300: #bef264;
+  --lime-400: #a3e635;
+  --lime-500: #84cc16;
+  --lime-600: #65a30d;
+  --lime-700: #4d7c0f;
+  --lime-800: #3f6212;
+  --lime-900: #365314;
+  --lime-950: #1a2e05;
+  --emerald-50: #ecfdf5;
+  --emerald-100: #d1fae5;
+  --emerald-200: #a7f3d0;
+  --emerald-300: #6ee7b7;
+  --emerald-400: #34d399;
+  --emerald-500: #10b981;
+  --emerald-600: #059669;
+  --emerald-700: #047857;
+  --emerald-800: #065f46;
+  --emerald-900: #064e3b;
+  --emerald-950: #022c22;
+  --teal-50: #f0fdfa;
+  --teal-100: #ccfbf1;
+  --teal-200: #99f6e4;
+  --teal-300: #5eead4;
+  --teal-400: #2dd4bf;
+  --teal-500: #14b8a6;
+  --teal-600: #0d9488;
+  --teal-700: #0f766e;
+  --teal-800: #115e59;
+  --teal-900: #134e4a;
+  --teal-950: #042f2e;
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-200: #a5f3fc;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0e7490;
+  --cyan-800: #155e75;
+  --cyan-900: #164e63;
+  --cyan-950: #083344;
+  --sky-50: #f0f9ff;
+  --sky-100: #e0f2fe;
+  --sky-200: #bae6fd;
+  --sky-300: #7dd3fc;
+  --sky-400: #38bdf8;
+  --sky-500: #0ea5e9;
+  --sky-600: #0284c7;
+  --sky-700: #0369a1;
+  --sky-800: #075985;
+  --sky-900: #0c4a6e;
+  --sky-950: #082f49;
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-300: #a5b4fc;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --indigo-700: #4338ca;
+  --indigo-800: #3730a3;
+  --indigo-900: #312e81;
+  --indigo-950: #1e1b4b;
+  --violet-50: #f5f3ff;
+  --violet-100: #ede9fe;
+  --violet-200: #ddd6fe;
+  --violet-300: #c4b5fd;
+  --violet-400: #a78bfa;
+  --violet-500: #8b5cf6;
+  --violet-600: #7c3aed;
+  --violet-700: #6d28d9;
+  --violet-800: #5b21b6;
+  --violet-900: #4c1d95;
+  --violet-950: #2e1065;
+  --purple-50: #faf5ff;
+  --purple-100: #f3e8ff;
+  --purple-200: #e9d5ff;
+  --purple-300: #d8b4fe;
+  --purple-400: #c084fc;
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --purple-700: #7e22ce;
+  --purple-800: #6b21a8;
+  --purple-900: #581c87;
+  --purple-950: #3b0764;
+  --fuchsia-50: #fdf4ff;
+  --fuchsia-100: #fae8ff;
+  --fuchsia-200: #f5d0fe;
+  --fuchsia-300: #f0abfc;
+  --fuchsia-400: #e879f9;
+  --fuchsia-500: #d946ef;
+  --fuchsia-600: #c026d3;
+  --fuchsia-700: #a21caf;
+  --fuchsia-800: #86198f;
+  --fuchsia-900: #701a75;
+  --fuchsia-950: #4a044e;
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fbcfe8;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b6;
+  --pink-500: #ec4899;
+  --pink-600: #db2777;
+  --pink-700: #be185d;
+  --pink-800: #9d174d;
+  --pink-900: #831843;
+  --pink-950: #500724;
+  --rose-50: #fff1f2;
+  --rose-100: #ffe4e6;
+  --rose-200: #fecdd3;
+  --rose-300: #fda4af;
+  --rose-400: #fb7185;
+  --rose-500: #f43f5e;
+  --rose-600: #e11d48;
+  --rose-700: #be123c;
+  --rose-800: #9f1239;
+  --rose-900: #881337;
+  --rose-950: #4c0519;
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
+  --green-200: #bbf7d0;
+  --green-300: #86efac;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-700: #15803d;
+  --green-800: #166534;
+  --green-900: #14532d;
+  --green-950: #052e16;
+  --yellow-50: #fefce8;
+  --yellow-100: #fef9c3;
+  --yellow-200: #fef08a;
+  --yellow-300: #fde047;
+  --yellow-400: #facc15;
+  --yellow-500: #eab308;
+  --yellow-600: #ca8a04;
+  --yellow-700: #a16207;
+  --yellow-800: #854d0e;
+  --yellow-900: #713f12;
+  --yellow-950: #422006;
+}

package/dist/styles/tokens/mode-dark.css

@@ -0,0 +1,101 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+.dark {
+  --bg-background: #1f2832; /** Use for general backgrounds. */
+  --bg-primary: #f3f4f6;
+  --bg-secondary: #1f2937;
+  --bg-accent: #111827; /** Level 1, official */
+  --bg-muted: #111827;
+  --bg-destructive: #6c0016;
+  --bg-destructive-alpha: rgb(127 29 29 / 0.2);
+  --bg-destructive-subtle: #3d000d;
+  --bg-input: rgb(255 255 255 / 0.05);
+  --bg-page-bg-brand: #3d000d;
+  --bg-page-bg-neutral: #030712;
+  --bg-info: #075985;
+  --bg-info-subtle: #0c4a6e;
+  --bg-success: #3f6212;
+  --bg-success-subtle: #365314;
+  --bg-warning: #9a3412;
+  --bg-warning-subtle: #431407;
+  --bg-error: #8d011d;
+  --bg-error-subtle: #6c0016;
+  --bg-backdrop: rgb(31 40 50 / 0.4);
+  --content-foreground: #f9fafb;
+  --content-primary-foreground: #030712;
+  --content-secondary-foreground: #f3f4f6;
+  --content-accent-foreground: #f3f4f6;
+  --content-muted-foreground: #9ca3af;
+  --content-destructive-foreground: #ffffff;
+  --content-info: #38bdf8;
+  --content-info-bold: #7dd3fc;
+  --content-success: #84cc16;
+  --content-success-bold: #bef264;
+  --content-warning: #f97316;
+  --content-warning-bold: #fdba74;
+  --content-error: #e90130;
+  --content-error-bold: #f699ac;
+  --content-destructive: #f26783;
+  --content-destructive-subtle: #bc0126;
+  --card-card-100: #1f2832;
+  --card-card-90: rgb(31 40 50 / 0.9);
+  --card-card-80: rgb(31 40 50 / 0.8);
+  --card-card-60: rgb(31 40 50 / 0.6);
+  --card-card-40: rgb(31 40 50 / 0.4);
+  --card-card-20: rgb(31 40 50 / 0.2);
+  --card-card-10: rgb(31 40 50 / 0.1);
+  --card-card-foreground: #ffffff;
+  --brand-colors-brand-50: #3d000d;
+  --brand-colors-brand-100: #6c0016;
+  --brand-colors-brand-200: #8d011d;
+  --brand-colors-brand-300: #bc0126;
+  --brand-colors-brand-400: #d2012b;
+  --brand-colors-brand-500: #e90130;
+  --brand-colors-brand-600: #f26783;
+  --brand-colors-brand-700: #f699ac;
+  --brand-colors-brand-800: #fbccd6;
+  --brand-colors-brand-900: #fde6ea;
+  --brand-colors-brand-950: #fef2f5;
+  --popover-popover: #ffffff;
+  --popover-popover-foreground: #1f2832;
+  --unofficial-foreground-alt: #d1d5db; /** Please use this for body text. */
+  --unofficial-body-background: #030712;
+  --unofficial-mid-alt: #9ca3af;
+  --unofficial-ghost-foreground: #e5e7eb;
+  --unofficial-ghost: rgb(255 255 255 / 0.0001);
+  --unofficial-ghost-hover: rgb(255 255 255 / 0.1);
+  --unofficial-primary-hover: #d1d5db;
+  --unofficial-secondary-hover: #111827;
+  --unofficial-outline: rgb(255 255 255 / 0.05);
+  --unofficial-outline-hover: rgb(255 255 255 / 0.1);
+  --unofficial-outline-active: rgb(255 255 255 / 0.15);
+  --unofficial-accent-0: #030712;
+  --unofficial-accent-2: #1f2937;
+  --unofficial-accent-3: #374151;
+  --border-border-0: #030712;
+  --border-border-1: #111827;
+  --border-border-2: #374151; /** level 2, official. See docs. */
+  --border-border-3: #374151;
+  --border-border-4: #4b5563;
+  --border-border-5: #6b7280;
+  --border-destructive-border: #f26783;
+  --border-success-border: #a3e635;
+  --border-warning-border: #fb923c;
+  --focus-ring: #374151; /** Focus ring */
+  --focus-ring-error: #6d2e2f; /** Focus ring error */
+  --sidebar-sidebar: #030712;
+  --sidebar-sidebar-foreground: #d1d5db;
+  --sidebar-sidebar-accent: #111827;
+  --sidebar-sidebar-accent-foreground: #f3f4f6;
+  --sidebar-sidebar-primary: #f9fafb;
+  --sidebar-sidebar-primary-foreground: #111827;
+  --sidebar-sidebar-border: #1f2937;
+  --sidebar-sidebar-ring: #374151;
+  --sidebar-unofficial-sidebar-muted: #6b7280;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #111628;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #201d1b;
+  --focus-ring-success: var(--content-success-bold); /** Focus ring error */
+}

package/dist/styles/tokens/mode-light.css

@@ -0,0 +1,101 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --bg-background: #ffffff; /** Use for general backgrounds. */
+  --bg-primary: #111827;
+  --bg-secondary: #f3f4f6;
+  --bg-accent: #f3f4f6; /** Level 1, official */
+  --bg-muted: #f3f4f6;
+  --bg-destructive: #d2012b;
+  --bg-destructive-alpha: rgb(220 38 38 / 0.2);
+  --bg-destructive-subtle: #fef2f5;
+  --bg-input: #ffffff;
+  --bg-page-bg-brand: #fbccd6;
+  --bg-page-bg-neutral: #e2e8f0;
+  --bg-info: #bae6fd;
+  --bg-info-subtle: #e0f2fe;
+  --bg-success: #d9f99d;
+  --bg-success-subtle: #ecfccb;
+  --bg-warning: #fed7aa;
+  --bg-warning-subtle: #ffedd5;
+  --bg-error: #fbccd6;
+  --bg-error-subtle: #fde6ea;
+  --bg-backdrop: rgb(31 40 50 / 0.4);
+  --content-foreground: #030712;
+  --content-primary-foreground: #f9fafb;
+  --content-secondary-foreground: #111827;
+  --content-accent-foreground: #111827;
+  --content-muted-foreground: #6b7280;
+  --content-destructive-foreground: #ffffff;
+  --content-info: #0284c7;
+  --content-info-bold: #075985;
+  --content-success: #65a30d;
+  --content-success-bold: #3f6212;
+  --content-warning: #ea580c;
+  --content-warning-bold: #9a3412;
+  --content-error: #d2012b;
+  --content-error-bold: #8d011d;
+  --content-destructive: #d2012b;
+  --content-destructive-subtle: #f699ac;
+  --card-card-100: #ffffff;
+  --card-card-90: rgb(255 255 255 / 0.9);
+  --card-card-80: rgb(255 255 255 / 0.8);
+  --card-card-60: rgb(255 255 255 / 0.6);
+  --card-card-40: rgb(255 255 255 / 0.4);
+  --card-card-20: rgb(255 255 255 / 0.2);
+  --card-card-10: rgb(255 255 255 / 0.1);
+  --card-card-foreground: #030712;
+  --brand-colors-brand-50: #fef2f5;
+  --brand-colors-brand-100: #fde6ea;
+  --brand-colors-brand-200: #fbccd6;
+  --brand-colors-brand-300: #f699ac;
+  --brand-colors-brand-400: #f26783;
+  --brand-colors-brand-500: #e90130;
+  --brand-colors-brand-600: #d2012b;
+  --brand-colors-brand-700: #bc0126;
+  --brand-colors-brand-800: #8d011d;
+  --brand-colors-brand-900: #6c0016;
+  --brand-colors-brand-950: #3d000d;
+  --popover-popover: #1f2832;
+  --popover-popover-foreground: #ffffff;
+  --unofficial-foreground-alt: #374151; /** Please use this for body text. */
+  --unofficial-body-background: #ffffff;
+  --unofficial-mid-alt: #4b5563;
+  --unofficial-ghost-foreground: #374151;
+  --unofficial-ghost: rgb(255 255 255 / 0.0001);
+  --unofficial-ghost-hover: rgb(31 40 50 / 0.05);
+  --unofficial-primary-hover: #374151;
+  --unofficial-secondary-hover: #f9fafb;
+  --unofficial-outline: rgb(255 255 255 / 0.1);
+  --unofficial-outline-hover: rgb(31 40 50 / 0.0333);
+  --unofficial-outline-active: rgb(31 40 50 / 0.05);
+  --unofficial-accent-0: #f9fafb;
+  --unofficial-accent-2: #e5e7eb;
+  --unofficial-accent-3: #d1d5db;
+  --border-border-0: #f9fafb;
+  --border-border-1: #f3f4f6;
+  --border-border-2: #e5e7eb; /** level 2, official. See docs. */
+  --border-border-3: #d1d5db;
+  --border-border-4: #9ca3af;
+  --border-border-5: #6b7280;
+  --border-destructive-border: #d2012b;
+  --border-success-border: #65a30d;
+  --border-warning-border: #ea580c;
+  --focus-ring: #d1d5db; /** Focus ring */
+  --focus-ring-error: #f699ac; /** Focus ring error */
+  --sidebar-sidebar: #f9fafb;
+  --sidebar-sidebar-foreground: #374151;
+  --sidebar-sidebar-accent: #f3f4f6;
+  --sidebar-sidebar-accent-foreground: #111827;
+  --sidebar-sidebar-primary: #111827;
+  --sidebar-sidebar-primary-foreground: #f9fafb;
+  --sidebar-sidebar-border: #e5e7eb;
+  --sidebar-sidebar-ring: #d1d5db;
+  --sidebar-unofficial-sidebar-muted: #6b7280;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #bfdbfe;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #fef9c3;
+  --focus-ring-success: var(--content-success); /** Focus ring error */
+}

package/dist/styles/tokens/shadows.css

@@ -0,0 +1,14 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --shadow-2xs: 0 1px 0 0 rgb(31 40 50 / 0);
+  --shadow-xs: 0 1px 2px 0 rgb(31 40 50 / 0);
+  --shadow-sm: 0 1px 3px 0 rgb(31 40 50 / 0.1), 0 1px 2px -1px rgb(31 40 50 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(31 40 50 / 0.1), 0 2px 4px -2px rgb(31 40 50 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(31 40 50 / 0.1), 0 4px 6px -4px rgb(31 40 50 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(31 40 50 / 0.1), 0 8px 10px -6px rgb(31 40 50 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(31 40 50 / 0.1);
+}

package/dist/styles/tokens/spacing.css

@@ -0,0 +1,44 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-28: 112px;
+  --spacing-32: 128px;
+  --spacing-36: 144px;
+  --spacing-40: 160px;
+  --spacing-44: 176px;
+  --spacing-48: 192px;
+  --spacing-52: 208px;
+  --spacing-56: 224px;
+  --spacing-60: 240px;
+  --spacing-64: 256px;
+  --spacing-72: 288px;
+  --spacing-80: 320px;
+  --spacing-96: 384px;
+  --spacing-0-5: 2px;
+  --spacing-0-75: 3px;
+  --spacing-1-25: 5px;
+  --spacing-1-5: 6px;
+  --spacing-2-5: 10px;
+  --spacing-3-5: 14px;
+  --spacing-infinite: 9999px;
+}

package/dist/styles/tokens/theme-bodhi.css

@@ -0,0 +1,35 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+.theme-bodhi {
+  --brand-neutrals-50: #f9fafb;
+  --brand-neutrals-100: #f3f4f6;
+  --brand-neutrals-200: #e5e7eb;
+  --brand-neutrals-300: #d1d5db;
+  --brand-neutrals-400: #9ca3af;
+  --brand-neutrals-500: #6b7280;
+  --brand-neutrals-600: #4b5563;
+  --brand-neutrals-700: #374151;
+  --brand-neutrals-800: #1f2937;
+  --brand-neutrals-900: #111827;
+  --brand-neutrals-950: #030712;
+  --brand-shades-50: #eff6ff;
+  --brand-shades-100: #dbeafe;
+  --brand-shades-200: #bfdbfe;
+  --brand-shades-300: #93c5fd;
+  --brand-shades-400: #60a5fa;
+  --brand-shades-500: #3b82f6;
+  --brand-shades-600: #2563eb;
+  --brand-shades-700: #1d4ed8;
+  --brand-shades-800: #1e40af;
+  --brand-shades-900: #1e3a8a;
+  --brand-shades-950: #172554;
+  --brand-combinations-1-brand-foreground: #ffffff;
+  --brand-combinations-1-brand: var(--brand-shades-500);
+  --brand-combinations-2-brand: var(--brand-shades-200);
+  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
+  --brand-combinations-3-brand: var(--brand-shades-950);
+  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+}

package/dist/styles/tokens/theme-slingshot.css

@@ -0,0 +1,35 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+.theme-slingshot {
+  --brand-neutrals-50: #f9fafb;
+  --brand-neutrals-100: #f3f4f6;
+  --brand-neutrals-200: #e5e7eb;
+  --brand-neutrals-300: #d1d5db;
+  --brand-neutrals-400: #9ca3af;
+  --brand-neutrals-500: #6b7280;
+  --brand-neutrals-600: #4b5563;
+  --brand-neutrals-700: #374151;
+  --brand-neutrals-800: #1f2937;
+  --brand-neutrals-900: #111827;
+  --brand-neutrals-950: #030712;
+  --brand-shades-50: #fef2f5;
+  --brand-shades-100: #fde6ea;
+  --brand-shades-200: #fbccd6;
+  --brand-shades-300: #f699ac;
+  --brand-shades-400: #f26783;
+  --brand-shades-500: #e90130;
+  --brand-shades-600: #d2012b;
+  --brand-shades-700: #bc0126;
+  --brand-shades-800: #8d011d;
+  --brand-shades-900: #6c0016;
+  --brand-shades-950: #3d000d;
+  --brand-combinations-1-brand-foreground: #ffffff;
+  --brand-combinations-1-brand: var(--brand-shades-500);
+  --brand-combinations-2-brand: var(--brand-shades-200);
+  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
+  --brand-combinations-3-brand: var(--brand-shades-950);
+  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+}

package/dist/styles/tokens/theme-sustain.css

@@ -0,0 +1,35 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+.theme-sustain {
+  --brand-neutrals-50: #f9fafb;
+  --brand-neutrals-100: #f3f4f6;
+  --brand-neutrals-200: #e5e7eb;
+  --brand-neutrals-300: #d1d5db;
+  --brand-neutrals-400: #9ca3af;
+  --brand-neutrals-500: #6b7280;
+  --brand-neutrals-600: #4b5563;
+  --brand-neutrals-700: #374151;
+  --brand-neutrals-800: #1f2937;
+  --brand-neutrals-900: #111827;
+  --brand-neutrals-950: #030712;
+  --brand-shades-50: #eef2ff;
+  --brand-shades-100: #e0e7ff;
+  --brand-shades-200: #c7d2fe;
+  --brand-shades-300: #a5b4fc;
+  --brand-shades-400: #818cf8;
+  --brand-shades-500: #6366f1;
+  --brand-shades-600: #4f46e5;
+  --brand-shades-700: #4338ca;
+  --brand-shades-800: #3730a3;
+  --brand-shades-900: #312e81;
+  --brand-shades-950: #1e1b4b;
+  --brand-combinations-1-brand-foreground: #ffffff;
+  --brand-combinations-1-brand: var(--brand-shades-500);
+  --brand-combinations-2-brand: var(--brand-shades-200);
+  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
+  --brand-combinations-3-brand: var(--brand-shades-950);
+  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+}

package/dist/styles/tokens/typography.css

@@ -0,0 +1,83 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --font-definitions-outfit: Outfit;
+  --font-definitions-inter: Inter;
+  --font-definitions-font-family-monospace: Geist Mono;
+  --heading-1-weight: Regular;
+  --heading-1-font-size: 48px;
+  --heading-1-line-height: 48px;
+  --heading-1-spacing: 48px;
+  --heading-1-letter-spacing: 0;
+  --heading-3-heading-3-weight: Regular;
+  --heading-3-font-size: 24px;
+  --heading-3-line-height: 28.8px;
+  --heading-3-spacing: 20px;
+  --heading-3-letter-spacing: 0;
+  --heading-2-weight: Regular;
+  --heading-2-font-size: 30px;
+  --heading-2-line-height: 30px;
+  --heading-2-spacing: 30px;
+  --heading-2-letter-spacing: 0;
+  --heading-4-weight: Regular;
+  --heading-4-font-size: 20px;
+  --heading-4-line-height: 24px;
+  --heading-4-spacing: 20px;
+  --heading-4-letter-spacing: 0;
+  --heading-5-weight: Medium;
+  --heading-5-font-size: 16px;
+  --heading-5-line-height: 24px;
+  --heading-5-spacing: 20px;
+  --heading-5-letter-spacing: 0;
+  --heading-6-weight: Medium;
+  --heading-6-font-size: 14px;
+  --heading-6-line-height: 24px;
+  --heading-6-spacing: 20px;
+  --heading-6-letter-spacing: 0;
+  --heading-7-weight: Medium;
+  --heading-7-font-size: 12px;
+  --heading-7-line-height: 24px;
+  --heading-7-spacing: 20px;
+  --heading-7-letter-spacing: 0;
+  --monospaced-font-size: 16px;
+  --monospaced-line-height: 24px;
+  --monospaced-spacing: 16px;
+  --monospaced-letter-spacing: 0;
+  --monospaced-font-weight: Regular;
+  --caption-font-size: 14px;
+  --caption-line-height: 21px;
+  --caption-spacing: 14px;
+  --caption-letter-spacing: 1.5px;
+  --caption-font-weight: Regular;
+  --paragraph-paragraph-weight: Regular;
+  --paragraph-paragraph-bold-weight: Semibold;
+  --paragraph-paragraph-medium-weight: Medium;
+  --paragraph-large-font-size: 18px;
+  --paragraph-large-line-height: 27px;
+  --paragraph-large-spacing: 18px;
+  --paragraph-large-letter-spacing: 0;
+  --paragraph-regular-font-size: 16px;
+  --paragraph-regular-line-height: 24px;
+  --paragraph-regular-spacing: 16px;
+  --paragraph-regular-letter-spacing: 0;
+  --paragraph-small-font-size: 14px;
+  --paragraph-small-line-height: 20px;
+  --paragraph-small-spacing: 14px;
+  --paragraph-small-letter-spacing: 0;
+  --paragraph-mini-font-size: 12px;
+  --paragraph-mini-line-height: 16px;
+  --paragraph-mini-spacing: 12px;
+  --paragraph-mini-letter-spacing: 0;
+  --font-definitions-font-family-headings: var(--font-definitions-outfit);
+  --font-definitions-font-family-body: var(--font-definitions-inter);
+  --heading-1-font-family: var(--font-definitions-font-family-headings);
+  --heading-3-font-family: var(--font-definitions-font-family-headings);
+  --heading-2-font-family: var(--font-definitions-font-family-headings);
+  --heading-4-font-family: var(--font-definitions-font-family-headings);
+  --heading-5-font-family: var(--font-definitions-font-family-headings);
+  --heading-6-font-family: var(--font-definitions-font-family-headings);
+  --heading-7-font-family: var(--font-definitions-font-family-headings);
+}