@adarsh_goswami/design 0.1.0

package/dist/tailwind.config.css

@@ -0,0 +1,122 @@
+/* @adarsh_goswami/brand — Tailwind v4 theme */
+/*
+  Add to your main CSS file:
+
+  @import "tailwindcss";
+  @import "@adarsh_goswami/brand/dist/theme.css";
+  @import "@adarsh_goswami/brand/dist/tailwind.config.css";
+*/
+
+@theme {
+  /* ── COLORS — BACKGROUNDS ── */
+  --color-bg-base:    var(--bg-base);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-raised:  var(--bg-raised);
+  --color-bg-overlay: var(--bg-overlay);
+  --color-bg-hover:   var(--bg-hover);
+  --color-bg-active:  var(--bg-active);
+
+  /* ── COLORS — BORDERS ── */
+  --color-border-subtle: var(--border-subtle);
+  --color-border-soft:   var(--border-soft);
+  --color-border-mid:    var(--border-mid);
+  --color-border-hover:  var(--border-hover);
+  --color-border-focus:  var(--border-focus);
+
+  /* ── COLORS — TEXT ── */
+  --color-text-primary:   var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted:     var(--text-muted);
+  --color-text-disabled:  var(--text-disabled);
+
+  /* ── COLORS — ACCENT ── */
+  --color-accent:        var(--accent);
+  --color-accent-bright: var(--accent-bright);
+  --color-accent-dim:    var(--accent-dim);
+  --color-accent-hover:    var(--accent-hover);
+  --color-accent-active:   var(--accent-active);
+  --color-accent-contrast: var(--accent-contrast);
+
+  /* ── COLORS — SEMANTIC ── */
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error:   var(--error);
+  --color-info:    var(--info);
+
+  /* ── TYPOGRAPHY — FONT FAMILIES ── */
+  --font-display: var(--brand-font-display);
+  --font-body:    var(--brand-font-body);
+  --font-mono:    var(--brand-font-mono);
+
+  /* ── TYPOGRAPHY — FONT SIZES ── */
+  --text-xs:   var(--brand-text-xs);
+  --text-sm:   var(--brand-text-sm);
+  --text-base: var(--brand-text-base);
+  --text-md:   var(--brand-text-md);
+  --text-lg:   var(--brand-text-lg);
+  --text-xl:   var(--brand-text-xl);
+  --text-2xl:  var(--brand-text-2xl);
+  --text-3xl:  var(--brand-text-3xl);
+  --text-4xl:  var(--brand-text-4xl);
+  --text-5xl:  var(--brand-text-5xl);
+
+  /* ── TYPOGRAPHY — LINE HEIGHTS ── */
+  --leading-none:    var(--brand-leading-none);
+  --leading-tight:   var(--brand-leading-tight);
+  --leading-snug:    var(--brand-leading-snug);
+  --leading-normal:  var(--brand-leading-normal);
+  --leading-relaxed: var(--brand-leading-relaxed);
+  --leading-loose:   var(--brand-leading-loose);
+
+  /* ── TYPOGRAPHY — LETTER SPACING ── */
+  --tracking-tighter: var(--brand-tracking-tighter);
+  --tracking-tight:   var(--brand-tracking-tight);
+  --tracking-normal:  var(--brand-tracking-normal);
+  --tracking-wide:    var(--brand-tracking-wide);
+  --tracking-wider:   var(--brand-tracking-wider);
+  --tracking-widest:  var(--brand-tracking-widest);
+
+  /* ── LAYOUT ── */
+  --container-max:   var(--brand-layout-container-max);
+  --prose-max:       var(--brand-layout-prose-max);
+  --prose-sm-max:    var(--brand-layout-prose-sm-max);
+  --spacing-layout-px: var(--brand-layout-px);
+
+  /* ── TYPOGRAPHY — FLUID SIZES ── */
+  --text-hero: var(--brand-text-hero);
+
+  /* ── BACKDROP BLUR ── */
+  --blur-nav: var(--brand-backdrop-blur-nav);
+
+  /* ── RADIUS ── */
+  --radius-sm:   var(--brand-radius-sm);
+  --radius-md:   var(--brand-radius-md);
+  --radius-lg:   var(--brand-radius-lg);
+  --radius-xl:   var(--brand-radius-xl);
+  --radius-2xl:  var(--brand-radius-2xl);
+  --radius-full: var(--brand-radius-full);
+
+  /* ── SHADOWS ── */
+  --shadow-sm:     var(--brand-shadow-sm);
+  --shadow-md:     var(--brand-shadow-md);
+  --shadow-lg:     var(--brand-shadow-lg);
+  --shadow-accent: var(--brand-shadow-accent);
+
+  /* ── Z-INDEX ── */
+  --z-base:     var(--brand-z-base);
+  --z-dropdown: var(--brand-z-dropdown);
+  --z-sticky:   var(--brand-z-sticky);
+  --z-overlay:  var(--brand-z-overlay);
+  --z-modal:    var(--brand-z-modal);
+  --z-toast:    var(--brand-z-toast);
+  --z-tooltip:  var(--brand-z-tooltip);
+
+  /* ── TRANSITIONS — DURATION ── */
+  --duration-fast: var(--brand-duration-fast);
+  --duration-base: var(--brand-duration-base);
+  --duration-slow: var(--brand-duration-slow);
+
+  /* ── TRANSITIONS — EASING ── */
+  --ease-smooth:  var(--brand-ease-out);
+  --ease-in-out:  var(--brand-ease-in-out);
+}

package/dist/theme.css

@@ -0,0 +1,495 @@
+/* @adarsh_goswami/brand — design tokens */
+/* Single source of truth for all brand decisions */
+/* Dark theme: default (:root). Light theme: add data-theme="light" to <html> */
+
+/*
+  Required Google Fonts import — add to your project's index.html or global CSS:
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
+*/
+
+:root {
+  /* ── BRAND COLORS ── */
+  --bg-base:       #0A0A0B;
+  --bg-surface:    #111113;
+  --bg-raised:     #18181C;
+  --bg-overlay:    #1F1F25;
+
+  --border-subtle: #1E1E24;
+  --border-soft:   #2A2A34;
+  --border-mid:    #3A3A48;
+
+  --text-primary:   #F0EEF8;
+  --text-secondary: #9997AA;
+  --text-muted:     #5C5A6E;
+  --text-disabled:  #3A3848;
+
+  /* Accent — electric violet-indigo */
+  --accent:        #7C6EFA;
+  --accent-bright: #9B8FFB;
+  --accent-dim:    #4A3FCC;
+  --accent-glow:     rgba(124, 110, 250, 0.15);
+  --accent-subtle:   rgba(124, 110, 250, 0.08);
+  --accent-contrast: #ffffff;
+
+  /* Semantic */
+  --success: #3DD68C;
+  --warning: #F5A623;
+  --error:   #F2546A;
+  --info:    #4AA8FF;
+
+  --success-bg: rgba(61, 214, 140, 0.08);
+  --warning-bg: rgba(245, 166, 35, 0.08);
+  --error-bg:   rgba(242, 84, 106, 0.08);
+  --info-bg:    rgba(74, 168, 255, 0.08);
+
+  --accent-border:  rgba(124, 110, 250, 0.2);
+  --success-border: rgba(61, 214, 140, 0.2);
+  --warning-border: rgba(245, 166, 35, 0.2);
+  --error-border:   rgba(242, 84, 106, 0.2);
+  --info-border:    rgba(74, 168, 255, 0.2);
+
+  /* ── INTERACTIVE STATES ── */
+  --bg-hover:      #1A1A1F;
+  --bg-active:     #212127;
+
+  --accent-hover:  #8D80FB;
+  --accent-active: #6B5CE8;
+
+  --border-hover:  #454558;
+  --border-focus:  #7C6EFA;
+
+  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
+
+  /* ── TYPOGRAPHY — FONT FAMILIES ── */
+  /* Prefixed to avoid conflict with Tailwind's --font-* namespace */
+  --brand-font-display: 'Syne', sans-serif;
+  --brand-font-body:    'DM Sans', sans-serif;
+  --brand-font-mono:    'DM Mono', monospace;
+
+  /* Font weights */
+  /* Prefixed to avoid conflict with Tailwind's --font-* namespace */
+  --brand-font-light:     300;
+  --brand-font-regular:   400;
+  --brand-font-medium:    500;
+  --brand-font-semibold:  600;
+  --brand-font-bold:      700;
+  --brand-font-extrabold: 800;
+
+  /* ── TYPOGRAPHY — TYPE SCALE ── */
+  /* Prefixed to avoid conflict with Tailwind's --text-* namespace */
+  --brand-text-xs:   0.6875rem;  /* 11px */
+  --brand-text-sm:   0.8125rem;  /* 13px */
+  --brand-text-base: 0.9375rem;  /* 15px */
+  --brand-text-md:   1.0625rem;  /* 17px */
+  --brand-text-lg:   1.25rem;    /* 20px */
+  --brand-text-xl:   1.5rem;     /* 24px */
+  --brand-text-2xl:  2rem;       /* 32px */
+  --brand-text-3xl:  2.75rem;    /* 44px */
+  --brand-text-4xl:  3.75rem;    /* 60px */
+  --brand-text-5xl:  5rem;       /* 80px */
+
+  /* ── TYPOGRAPHY — LINE HEIGHTS ── */
+  /* Prefixed to avoid conflict with Tailwind's --leading-* namespace */
+  --brand-leading-none:    1;
+  --brand-leading-tight:   1.15;
+  --brand-leading-snug:    1.3;
+  --brand-leading-normal:  1.5;
+  --brand-leading-relaxed: 1.6;
+  --brand-leading-loose:   1.8;
+
+  /* ── TYPOGRAPHY — LETTER SPACING ── */
+  /* Prefixed to avoid conflict with Tailwind's --tracking-* namespace */
+  --brand-tracking-tighter: -0.03em;
+  --brand-tracking-tight:   -0.015em;
+  --brand-tracking-normal:   0em;
+  --brand-tracking-wide:     0.06em;
+  --brand-tracking-wider:    0.1em;
+  --brand-tracking-widest:   0.16em;
+
+  /* ── SPACING ── */
+  /* --sp-* has no conflict with Tailwind's --spacing-* namespace */
+  --sp-1:  0.25rem;
+  --sp-2:  0.5rem;
+  --sp-3:  0.75rem;
+  --sp-4:  1rem;
+  --sp-5:  1.25rem;
+  --sp-6:  1.5rem;
+  --sp-8:  2rem;
+  --sp-10: 2.5rem;
+  --sp-12: 3rem;
+  --sp-16: 4rem;
+  --sp-20: 5rem;
+  --sp-24: 6rem;
+
+  /* ── LAYOUT ── */
+  /* Prefixed to avoid conflict with Tailwind namespaces */
+  --brand-layout-container-max: 1100px;
+  --brand-layout-px:            1.5rem;
+  --brand-layout-prose-max:     520px;
+  --brand-layout-prose-sm-max:  440px;
+
+  /* ── TYPOGRAPHY — FLUID SIZES ── */
+  --brand-text-hero: clamp(3rem, 8vw, 5rem);
+
+  /* ── BACKDROP ── */
+  --brand-backdrop-blur-nav: 12px;
+
+  /* ── RADIUS ── */
+  /* Prefixed to avoid conflict with Tailwind's --radius-* namespace */
+  --brand-radius-sm:   4px;
+  --brand-radius-md:   8px;
+  --brand-radius-lg:   12px;
+  --brand-radius-xl:   16px;
+  --brand-radius-2xl:  24px;
+  --brand-radius-full: 9999px;
+
+  /* ── SHADOWS ── */
+  /* Prefixed to avoid conflict with Tailwind's --shadow-* namespace */
+  --brand-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4);
+  --brand-shadow-md:     0 4px 16px rgba(0, 0, 0, 0.5);
+  --brand-shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.6);
+  --brand-shadow-accent: 0 0 24px rgba(124, 110, 250, 0.25);
+
+  /* ── TRANSITIONS ── */
+  /* Prefixed to avoid conflict with Tailwind's --ease-* and --duration-* namespaces */
+  --brand-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
+  --brand-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --brand-duration-fast: 120ms;
+  --brand-duration-base: 220ms;
+  --brand-duration-slow: 400ms;
+
+  /* ── Z-INDEX ── */
+  /* Prefixed to avoid conflict with Tailwind's --z-* namespace */
+  --brand-z-base:     0;
+  --brand-z-dropdown: 100;
+  --brand-z-sticky:   200;
+  --brand-z-overlay:  300;
+  --brand-z-modal:    400;
+  --brand-z-toast:    500;
+  --brand-z-tooltip:  600;
+}
+
+/* ── LIGHT THEME OVERRIDES ── */
+/*
+  Apply data-theme="light" to <html> and use <Theme appearance="light"> in Radix.
+*/
+
+[data-theme="light"] {
+  /* Backgrounds */
+  --bg-base:       #FAFAFA;
+  --bg-surface:    #FFFFFF;
+  --bg-raised:     #F4F4F6;
+  --bg-overlay:    #EEEEF2;
+
+  --border-subtle: #E8E8EF;
+  --border-soft:   #D8D8E4;
+  --border-mid:    #C0C0D0;
+
+  --text-primary:   #0D0C14;
+  --text-secondary: #4A4860;
+  --text-muted:     #7A788C;
+  --text-disabled:  #B0AEC4;
+
+  /* Accent — slightly deepened for contrast on light backgrounds */
+  --accent:        #6B5CE8;
+  --accent-bright: #7C6EFA;
+  --accent-dim:    #4A3FCC;
+  --accent-glow:     rgba(107, 92, 232, 0.12);
+  --accent-subtle:   rgba(107, 92, 232, 0.06);
+  --accent-contrast: #ffffff;
+
+  /* Semantic — same hues, readable on light */
+  --success: #1F9E62;
+  --warning: #C07A10;
+  --error:   #C62B44;
+  --info:    #1A72CC;
+
+  --success-bg: rgba(31, 158, 98, 0.08);
+  --warning-bg: rgba(192, 122, 16, 0.08);
+  --error-bg:   rgba(198, 43, 68, 0.08);
+  --info-bg:    rgba(26, 114, 204, 0.08);
+
+  --accent-border:  rgba(107, 92, 232, 0.20);
+  --success-border: rgba(31, 158, 98, 0.20);
+  --warning-border: rgba(192, 122, 16, 0.20);
+  --error-border:   rgba(198, 43, 68, 0.20);
+  --info-border:    rgba(26, 114, 204, 0.20);
+
+  /* Interactive states */
+  --bg-hover:      #EFEFF4;
+  --bg-active:     #E5E5ED;
+
+  --accent-hover:  #7C6EFA;
+  --accent-active: #5D4FD6;
+
+  --border-hover:  #A8A8BE;
+  --border-focus:  #6B5CE8;
+
+  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
+
+  /* Shadows — lighter for light surfaces */
+  --brand-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.08);
+  --brand-shadow-md:     0 4px 16px rgba(0, 0, 0, 0.10);
+  --brand-shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.14);
+  --brand-shadow-accent: 0 0 24px rgba(107, 92, 232, 0.20);
+}
+
+/* ── THEME TOGGLE ── */
+/*
+  The one opinionated switch in this package — toggles dark/light theme.
+  Dark mode: deep space track with stars, moon thumb → glowing orb when switching to light.
+  Light mode: clean minimal track, accent fill when active.
+
+  Architecture note: Radix Switch renders the pill-shaped track on ::before (not on the root
+  element). The root element's border-radius resolves to 0px outside of .rt-Skeleton, so all
+  visual background/border styling must target ::before to stay pill-shaped.
+*/
+
+/* Root — layout only; no visual background/border here */
+.ag-theme-toggle.rt-SwitchRoot {
+  position: relative;
+  outline: none;   /* suppress any browser outline on the <button> root */
+  background: none;
+  --switch-height: 24px;
+  --switch-thumb-inset: 2px;
+}
+
+/* Dark mode — cosmic track on the pill-shaped ::before */
+.ag-theme-toggle.rt-SwitchRoot::before {
+  background-color: #07060e;
+  background-image: none;   /* override Radix gradient */
+  box-shadow: inset 0 0 0 1px rgba(124, 110, 250, 0.25);
+  transition:
+    background-color var(--brand-duration-base) var(--brand-ease-out),
+    box-shadow       var(--brand-duration-base) var(--brand-ease-out);
+}
+
+/* Star field — border-radius uses the pill variable directly (not inherit, which would be 0) */
+.ag-theme-toggle.rt-SwitchRoot::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--switch-border-radius);
+  background-image:
+    radial-gradient(0.8px 0.8px at 15% 25%, rgba(255,255,255,0.80) 0%, transparent 100%),
+    radial-gradient(0.6px 0.6px at 72% 18%, rgba(255,255,255,0.60) 0%, transparent 100%),
+    radial-gradient(1px   1px   at 55% 72%, rgba(255,255,255,0.50) 0%, transparent 100%),
+    radial-gradient(0.7px 0.7px at 83% 55%, rgba(255,255,255,0.70) 0%, transparent 100%),
+    radial-gradient(0.5px 0.5px at 28% 78%, rgba(255,255,255,0.40) 0%, transparent 100%),
+    radial-gradient(0.6px 0.6px at 63% 38%, rgba(200,190,255,0.50) 0%, transparent 100%),
+    radial-gradient(0.4px 0.4px at 42% 88%, rgba(255,255,255,0.35) 0%, transparent 100%);
+  transition: opacity var(--brand-duration-slow) var(--brand-ease-out);
+  pointer-events: none;
+}
+
+.ag-theme-toggle.rt-SwitchRoot:hover:not([data-disabled])::before {
+  box-shadow:
+    inset 0 0 0 1px rgba(124, 110, 250, 0.45),
+    0 0 12px rgba(124, 110, 250, 0.08);
+}
+
+/* Suppress Radix's focus outline on ::before and replace with our pill-shaped focus ring */
+.ag-theme-toggle.rt-SwitchRoot:focus-visible {
+  outline: none;
+}
+.ag-theme-toggle.rt-SwitchRoot:focus-visible::before {
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(124, 110, 250, 0.25), var(--focus-ring);
+}
+.ag-theme-toggle.rt-SwitchRoot[data-state="checked"]:focus-visible::before {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), var(--focus-ring);
+}
+
+/* Moon thumb */
+.ag-theme-toggle.rt-SwitchRoot .rt-SwitchThumb {
+  background: radial-gradient(circle at 36% 32%, #eeeaff 0%, #b8b0f0 38%, #7c74c4 75%, #4e4890 100%);
+  box-shadow:
+    0 0 0 2px rgba(124, 110, 250, 0.45),
+    0 0 14px rgba(124, 110, 250, 0.55),
+    0 2px 6px rgba(0, 0, 0, 0.55);
+  position: absolute;
+  overflow: hidden;
+  transition:
+    background var(--brand-duration-base) var(--brand-ease-out),
+    box-shadow var(--brand-duration-base) var(--brand-ease-out),
+    transform  var(--brand-duration-base) var(--brand-ease-out);
+}
+
+/* Moon craters */
+.ag-theme-toggle.rt-SwitchRoot .rt-SwitchThumb::before {
+  content: '';
+  position: absolute;
+  width: 38%; height: 38%;
+  border-radius: 50%;
+  background: rgba(60, 50, 120, 0.30);
+  top: 18%; left: 20%;
+  box-shadow:
+    6px -1px 0 1.5px rgba(60, 50, 120, 0.22),
+    2px  8px 0 1px   rgba(60, 50, 120, 0.18);
+  pointer-events: none;
+}
+
+.ag-theme-toggle.rt-SwitchRoot:active:not([data-disabled]) .rt-SwitchThumb {
+  transform: scaleX(1.16);
+}
+
+
+/* Checked state = light mode active — clean minimal regardless of page theme */
+.ag-theme-toggle.rt-SwitchRoot[data-state="checked"]::before {
+  background-color: #e8e7f0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+.ag-theme-toggle.rt-SwitchRoot[data-state="checked"]::after { opacity: 0; }
+.ag-theme-toggle.rt-SwitchRoot[data-state="checked"]:hover:not([data-disabled])::before {
+  background-color: #dddce8;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+.ag-theme-toggle.rt-SwitchRoot[data-state="checked"] .rt-SwitchThumb {
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(0, 0, 0, 0.06);
+}
+.ag-theme-toggle.rt-SwitchRoot[data-state="checked"] .rt-SwitchThumb::before { display: none; }
+
+/* ── RADIX UI THEMES OVERRIDE ── */
+/*
+  Usage in consuming projects — no accentColor/grayColor props needed:
+  Dark:  <Theme appearance="dark">
+  Light: <Theme appearance="light">  (with data-theme="light" on <html>)
+*/
+
+/* Define accent and gray scales directly — Radix reads these without needing named color props */
+.radix-themes {
+  /* ── Accent scale — AG brand violet-indigo ── */
+  --accent-1:  #0d0b1a;
+  --accent-2:  #13112b;
+  --accent-3:  #1e1a42;
+  --accent-4:  #271f56;
+  --accent-5:  #312869;
+  --accent-6:  #3c3378;
+  --accent-7:  #4e4490;
+  --accent-8:  #6055b8;
+  --accent-9:  #7C6EFA;  /* --accent        */
+  --accent-10: #8D80FB;  /* --accent-hover  */
+  --accent-11: #9B8FFB;  /* --accent-bright */
+  --accent-12: #d4d0ff;
+
+  --accent-a1:  rgba(124, 110, 250, 0.04);
+  --accent-a2:  rgba(124, 110, 250, 0.07);
+  --accent-a3:  rgba(124, 110, 250, 0.12);
+  --accent-a4:  rgba(124, 110, 250, 0.18);
+  --accent-a5:  rgba(124, 110, 250, 0.25);
+  --accent-a6:  rgba(124, 110, 250, 0.32);
+  --accent-a7:  rgba(124, 110, 250, 0.43);
+  --accent-a8:  rgba(124, 110, 250, 0.60);
+  --accent-a9:  rgba(124, 110, 250, 0.80);
+  --accent-a10: rgba(141, 128, 251, 0.85);
+  --accent-a11: rgba(155, 143, 251, 0.92);
+  --accent-a12: rgba(212, 208, 255, 0.98);
+
+  --accent-contrast:  #ffffff;
+  --accent-surface:   rgba(124, 110, 250, 0.08);
+  --accent-indicator: #7C6EFA;
+  --accent-track:     #7C6EFA;
+
+  /* ── Gray scale — AG dark palette ── */
+  --gray-1:  #0A0A0B;  /* --bg-base        */
+  --gray-2:  #111113;  /* --bg-surface     */
+  --gray-3:  #18181C;  /* --bg-raised      */
+  --gray-4:  #1F1F25;  /* --bg-overlay     */
+  --gray-5:  #1A1A1F;  /* --bg-hover       */
+  --gray-6:  #1E1E24;  /* --border-subtle  */
+  --gray-7:  #2A2A34;  /* --border-soft    */
+  --gray-8:  #3A3A48;  /* --border-mid     */
+  --gray-9:  #3A3848;  /* --text-disabled  */
+  --gray-10: #5C5A6E;  /* --text-muted     */
+  --gray-11: #9997AA;  /* --text-secondary */
+  --gray-12: #F0EEF8;  /* --text-primary   */
+
+  --gray-a1:  rgba(255, 255, 255, 0.00);
+  --gray-a2:  rgba(255, 255, 255, 0.04);
+  --gray-a3:  rgba(255, 255, 255, 0.07);
+  --gray-a4:  rgba(255, 255, 255, 0.10);
+  --gray-a5:  rgba(255, 255, 255, 0.06);
+  --gray-a6:  rgba(255, 255, 255, 0.07);
+  --gray-a7:  rgba(255, 255, 255, 0.11);
+  --gray-a8:  rgba(255, 255, 255, 0.18);
+  --gray-a9:  rgba(255, 255, 255, 0.17);
+  --gray-a10: rgba(255, 255, 255, 0.27);
+  --gray-a11: rgba(255, 255, 255, 0.52);
+  --gray-a12: rgba(240, 238, 248, 0.97);
+
+  /* ── Font families ── */
+  --default-font-family: var(--brand-font-body);
+  --heading-font-family: var(--brand-font-display);
+  --code-font-family:    var(--brand-font-mono);
+}
+
+/* ── RADIX UI THEMES — LIGHT OVERRIDE ── */
+/* Applied when <html data-theme="light"> + <Theme appearance="light"> */
+[data-theme="light"] .radix-themes {
+  /* ── Accent scale — AG brand violet-indigo on light ── */
+  --accent-1:  #faf9ff;
+  --accent-2:  #f3f1ff;
+  --accent-3:  #e8e4ff;
+  --accent-4:  #d8d2ff;
+  --accent-5:  #c8c0ff;
+  --accent-6:  #b3a8ff;
+  --accent-7:  #9b8ffb;
+  --accent-8:  #7c6efa;
+  --accent-9:  #6B5CE8;  /* --accent        */
+  --accent-10: #5D4FD6;  /* --accent-hover  */
+  --accent-11: #4A3FCC;  /* --accent-dim    */
+  --accent-12: #1a1060;
+
+  --accent-a1:  rgba(107, 92, 232, 0.02);
+  --accent-a2:  rgba(107, 92, 232, 0.05);
+  --accent-a3:  rgba(107, 92, 232, 0.10);
+  --accent-a4:  rgba(107, 92, 232, 0.16);
+  --accent-a5:  rgba(107, 92, 232, 0.22);
+  --accent-a6:  rgba(107, 92, 232, 0.30);
+  --accent-a7:  rgba(107, 92, 232, 0.42);
+  --accent-a8:  rgba(107, 92, 232, 0.60);
+  --accent-a9:  rgba(107, 92, 232, 0.85);
+  --accent-a10: rgba(93, 79, 214, 0.88);
+  --accent-a11: rgba(74, 63, 204, 0.92);
+  --accent-a12: rgba(26, 16, 96, 0.97);
+
+  --accent-contrast:  #ffffff;
+  --accent-surface:   rgba(107, 92, 232, 0.06);
+  --accent-indicator: #6B5CE8;
+  --accent-track:     #6B5CE8;
+
+  /* ── Gray scale — AG light palette ── */
+  --gray-1:  #FAFAFA;  /* --bg-base        */
+  --gray-2:  #FFFFFF;  /* --bg-surface      */
+  --gray-3:  #F4F4F6;  /* --bg-raised       */
+  --gray-4:  #EEEEF2;  /* --bg-overlay      */
+  --gray-5:  #EFEFF4;  /* --bg-hover        */
+  --gray-6:  #E8E8EF;  /* --border-subtle   */
+  --gray-7:  #D8D8E4;  /* --border-soft     */
+  --gray-8:  #C0C0D0;  /* --border-mid      */
+  --gray-9:  #B0AEC4;  /* --text-disabled   */
+  --gray-10: #7A788C;  /* --text-muted      */
+  --gray-11: #4A4860;  /* --text-secondary  */
+  --gray-12: #0D0C14;  /* --text-primary    */
+
+  --gray-a1:  rgba(0, 0, 0, 0.00);
+  --gray-a2:  rgba(0, 0, 0, 0.00);
+  --gray-a3:  rgba(0, 0, 0, 0.04);
+  --gray-a4:  rgba(0, 0, 0, 0.07);
+  --gray-a5:  rgba(0, 0, 0, 0.06);
+  --gray-a6:  rgba(0, 0, 0, 0.09);
+  --gray-a7:  rgba(0, 0, 0, 0.15);
+  --gray-a8:  rgba(0, 0, 0, 0.25);
+  --gray-a9:  rgba(0, 0, 0, 0.31);
+  --gray-a10: rgba(0, 0, 0, 0.53);
+  --gray-a11: rgba(0, 0, 0, 0.72);
+  --gray-a12: rgba(0, 0, 0, 0.95);
+
+  /* ── Font families ── */
+  --default-font-family: var(--brand-font-body);
+  --heading-font-family: var(--brand-font-display);
+  --code-font-family:    var(--brand-font-mono);
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@adarsh_goswami/design",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Single source of truth for Adarsh Goswami's personal design system — pre-themed Radix UI components, CSS tokens, and Tailwind preset.",
+  "author": "Adarsh Goswami",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/theme.css": "./dist/theme.css",
+    "./dist/tailwind.config.css": "./dist/tailwind.config.css",
+    "./dist/assets/*": "./dist/assets/*"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "demo": "vite",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@radix-ui/themes": ">=3.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@radix-ui/themes": "^3.3.0",
+    "@types/bun": "latest",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.8"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1"
+  }
+}