@siena-ai/design-system 0.0.29 → 0.2.1

package/dist/globals.css

@@ -14,7 +14,7 @@
   down ancient walls, Renaissance elegance, and timeless beauty.
 
   Design Principles:
-  1. Typography is the hero — Editorial New serif for headlines
+  1. Typography is the hero — Fraunces serif for headlines
   2. Warm color palette — cream, bougainvillea purple, sage, ochre
   3. No gimmicks — no glows, gradients, or glassmorphism
   4. Generous whitespace — content breathes
@@ -24,10 +24,10 @@
 */
 
 @theme inline {
-  /* Font families — Next.js sets --font-display and --font-funnel via body class */
-  /* SWAP FONTS: change layout.tsx localFont config + update fallback here */
+  /* Font families - Next.js sets font CSS vars via body class */
+  /* SWAP FONTS HERE: use --font-funnel for Funnel Sans, --font-geist for Geist */
   --font-sans: var(--font-funnel), ui-sans-serif, system-ui, sans-serif;
-  --font-serif: var(--font-display), "EB Garamond", Georgia, serif;
+  --font-serif: var(--font-fraunces), ui-serif, Georgia, serif;
 
   /* Border radius - slightly softer */
   --radius-sm: 0.375rem;
@@ -47,9 +47,6 @@
   --color-siena-sky: var(--siena-sky);
   --color-siena-tuscan-stone: var(--siena-tuscan-stone);
 
-  /* CSAT star rating color */
-  --color-csat-star: var(--csat-star);
-
   /* Base semantic colors - reference CSS variables for dark mode support */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -85,11 +82,11 @@
 
 :root, :host{
   /* ─────────────────────────────────────────────────────────────
-     FONT FAMILIES — Runtime override (Next.js sets --font-display via body class)
-     Tailwind's @theme compiles out var(--font-display) since it doesn't exist at build time.
+     FONT FAMILIES — Runtime override (Next.js sets --font-fraunces via body class)
+     Tailwind's @theme compiles out var(--font-fraunces) since it doesn't exist at build time.
      We re-declare here so the runtime value takes precedence.
      ───────────────────────────────────────────────────────────── */
-  --font-serif: var(--font-display), "EB Garamond", Georgia, serif;
+  --font-serif: var(--font-fraunces), ui-serif, Georgia, serif;
   --font-sans: var(--font-funnel), ui-sans-serif, system-ui, sans-serif;
 
   /* ─────────────────────────────────────────────────────────────
@@ -197,9 +194,6 @@
      CHAT TOKENS — Siena Chat System
      ───────────────────────────────────────────────────────────── */
 
-  /* CSAT Star Rating - Warm, sunny gold (App Store style) */
-  --csat-star: #F5C842;
-
   /* Message Bubbles */
   --chat-user-bg: #E8E4DF;
   --chat-user-fg: #1A1A1A;
@@ -229,7 +223,7 @@
      AVATAR COLOR PALETTE — 14 Solid Earthy Colors
      ───────────────────────────────────────────────────────────── */
 
-  --avatar-bougainvillea: #D7C1DD;
+  --avatar-bougainvillea: #9B4DAF;
   --avatar-terracotta: #C45D35;
   --avatar-rust: #A44A3F;
   --avatar-clay: #B67352;
@@ -277,15 +271,6 @@
    TYPOGRAPHY — The Hero of the Design
    ═══════════════════════════════════════════════════════════════ */
 
-/* DISPLAY H1/H2: PP Editorial New for headline headings.
-   Outside @layer so it beats Tailwind v4's font-sans on body.
-   Uses direct --font-display variable (single hop) with literal fallback.
-   To swap display fonts: change layout.tsx config + update fallback name here. */
-h1, h2 {
-  font-family: var(--font-display, "PP Editorial New"), "EB Garamond", Georgia, serif !important;
-  font-weight: 400 !important;
-}
-
 @layer base {
   /* Shared heading styles */
   h1, h2, h3, h4, h5, h6 {
@@ -294,6 +279,11 @@ h1, h2 {
     text-wrap: balance;
   }
 
+  /* SERIF: Only h1 and h2 use Fraunces */
+  h1, h2 {
+    font-family: var(--font-serif);
+  }
+
   /* SANS-SERIF: h3-h6 use Geist/Funnel Sans (default font-sans) */
   h3, h4, h5, h6 {
     font-family: var(--font-sans);
@@ -386,9 +376,9 @@ h1, h2 {
    ═══════════════════════════════════════════════════════════════ */
 
 @layer utilities {
-  /* Serif headings utility — !important needed to beat body's unlayered font-sans */
+  /* Serif headings utility */
   .font-serif {
-    font-family: var(--font-serif) !important;
+    font-family: var(--font-serif);
   }
 
   /* Bougainvillea text accent */
@@ -473,12 +463,12 @@ h1, h2 {
 
   /* SELECTED — User actively chose this option (OptionCard, template picker) */
   .state-selected {
-    @apply border-siena-sky bg-siena-sky/5;
+    @apply border-primary bg-primary/5;
   }
 
   /* ACTIVE FILTER — A filter/toggle is currently applied (softer than selected) */
   .state-active-filter {
-    @apply border-siena-sky/50 bg-siena-sky/5;
+    @apply border-primary/50 bg-primary/5;
   }
 
   /* EXPANDED — Collapsible content is open (NOT an action, just state) */
@@ -983,17 +973,6 @@ h1, h2 {
     @apply text-foreground decoration-foreground;
   }
 
-  /* ── Link utility classes ────────────────────────────────────────────── */
-  /* Inline text links (embedded in body text, descriptions, tooltips)     */
-  .link-inline {
-    @apply text-foreground underline underline-offset-4 decoration-muted-foreground/50;
-    @apply hover:decoration-foreground transition-colors;
-  }
-  /* Action links ("Learn more", "View all", "Edit", navigation-style)    */
-  .link-action {
-    @apply text-muted-foreground hover:text-foreground transition-colors;
-  }
-
   .prose-siena ul,
   .prose-siena ol {
     @apply text-muted-foreground;
@@ -1009,48 +988,6 @@ h1, h2 {
     @apply border-l-2 border-primary pl-3 italic;
     @apply text-muted-foreground;
   }
-
-  /* ─────────────────────────────────────────────────────────────────
-     PROSE-CHAT — For chat messages (WCAG AA contrast)
-     Full foreground color for maximum readability
-     ───────────────────────────────────────────────────────────────── */
-
-  .prose-chat {
-    @apply text-foreground;
-  }
-
-  .prose-chat p {
-    @apply text-foreground leading-snug;
-    margin-bottom: 0.5em;
-  }
-
-  .prose-chat ul,
-  .prose-chat ol {
-    @apply text-foreground;
-    margin-bottom: 0.5em;
-    padding-left: 1.25em;
-  }
-
-  .prose-chat li {
-    margin-bottom: 0.125em;
-  }
-
-  .prose-chat a {
-    @apply text-foreground underline underline-offset-4 decoration-muted-foreground/50;
-    transition: color 150ms, text-decoration-color 150ms;
-  }
-
-  .prose-chat a:hover {
-    @apply text-foreground decoration-foreground;
-  }
-
-  .prose-chat blockquote {
-    @apply border-l-2 border-primary pl-3 italic text-foreground/80;
-  }
-
-  .prose-chat code {
-    @apply text-foreground bg-muted px-1 py-0.5 rounded text-[0.875em];
-  }
 }
 
 /*
@@ -1105,9 +1042,9 @@ h1, h2 {
   --siena-bougainvillea-dark: #9B4DAF;
   --siena-bougainvillea-light: #DBA3E8;
 
-  --siena-sage: #6B9F6F;
-  --siena-sage-dark: #4E8053;
-  --siena-sage-light: #8BBF8F;
+  --siena-sage: #5D7A5F;
+  --siena-sage-dark: #3D5A3F;
+  --siena-sage-light: #7A9A7C;
 
   --siena-ochre: #D4A017;
   --siena-ochre-dark: #B8860B;
@@ -1143,7 +1080,7 @@ h1, h2 {
 
   /* Charts - Mediterranean palette (vibrant on dark) */
   --chart-1: #C77DDB;                    /* bougainvillea purple */
-  --chart-2: #6B9F6F;                    /* sage (deep foliage green) */
+  --chart-2: #5D7A5F;                    /* sage (deep foliage green) */
   --chart-3: #6BB0D8;                    /* tuscan sky blue (was ochre) */
   --chart-4: #D4C5B5;                    /* tuscan stone (warm beige) */
   --chart-5: #DBA3E8;                    /* bougainvillea light */
@@ -1168,9 +1105,6 @@ h1, h2 {
      CHAT TOKENS — Dark Mode
      ───────────────────────────────────────────────────────────── */
 
-  /* CSAT Star Rating - Slightly lighter for dark bg */
-  --csat-star: #F7D35C;
-
   --chat-user-bg: #44403C;
   --chat-user-fg: #FAFAF9;
   --chat-ai-bg: transparent;
@@ -1189,7 +1123,7 @@ h1, h2 {
   --avatar-amber: #D4A86C;
   --avatar-ochre: #B89B2A;
   --avatar-olive: #7C9A4E;
-  --avatar-sage: #7AAF7E;
+  --avatar-sage: #6D8B74;
   --avatar-forest: #4D8A5D;
   --avatar-teal: #4A9898;
   --avatar-sky: #7AAFCC;
@@ -1208,32 +1142,6 @@ h1, h2 {
   ---break---
 */
 
-/* ============================================================================
-   REACT-COLORFUL — Color Picker Styles
-   ============================================================================ */
-
-.react-colorful {
-  width: 200px !important;
-  height: 200px !important;
-}
-
-.react-colorful__saturation {
-  border-radius: 8px 8px 0 0;
-}
-
-.react-colorful__hue {
-  height: 14px;
-  border-radius: 0 0 8px 8px;
-}
-
-.react-colorful__saturation-pointer,
-.react-colorful__hue-pointer {
-  width: 18px;
-  height: 18px;
-  border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;