@siena-ai/design-system 0.0.24 → 0.0.25

package/dist/globals.css

@@ -14,7 +14,7 @@
   down ancient walls, Renaissance elegance, and timeless beauty.
 
   Design Principles:
-  1. Typography is the hero — Fraunces serif for headlines
+  1. Typography is the hero — Editorial New 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 CSS vars via body class */
-  /* SWAP FONTS HERE: use --font-funnel for Funnel Sans, --font-geist for Geist */
+  /* Font families — Next.js sets --font-display and --font-funnel via body class */
+  /* SWAP FONTS: change layout.tsx localFont config + update fallback here */
   --font-sans: var(--font-funnel), ui-sans-serif, system-ui, sans-serif;
-  --font-serif: var(--font-fraunces), ui-serif, Georgia, serif;
+  --font-serif: var(--font-display), "EB Garamond", Georgia, serif;
 
   /* Border radius - slightly softer */
   --radius-sm: 0.375rem;
@@ -47,6 +47,9 @@
   --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);
@@ -82,11 +85,11 @@
 
 :root, :host{
   /* ─────────────────────────────────────────────────────────────
-     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.
+     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.
      We re-declare here so the runtime value takes precedence.
      ───────────────────────────────────────────────────────────── */
-  --font-serif: var(--font-fraunces), ui-serif, Georgia, serif;
+  --font-serif: var(--font-display), "EB Garamond", Georgia, serif;
   --font-sans: var(--font-funnel), ui-sans-serif, system-ui, sans-serif;
 
   /* ─────────────────────────────────────────────────────────────
@@ -194,6 +197,9 @@
      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;
@@ -223,7 +229,7 @@
      AVATAR COLOR PALETTE — 14 Solid Earthy Colors
      ───────────────────────────────────────────────────────────── */
 
-  --avatar-bougainvillea: #9B4DAF;
+  --avatar-bougainvillea: #D7C1DD;
   --avatar-terracotta: #C45D35;
   --avatar-rust: #A44A3F;
   --avatar-clay: #B67352;
@@ -271,6 +277,15 @@
    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 {
@@ -279,11 +294,6 @@
     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);
@@ -376,9 +386,9 @@
    ═══════════════════════════════════════════════════════════════ */
 
 @layer utilities {
-  /* Serif headings utility */
+  /* Serif headings utility — !important needed to beat body's unlayered font-sans */
   .font-serif {
-    font-family: var(--font-serif);
+    font-family: var(--font-serif) !important;
   }
 
   /* Bougainvillea text accent */
@@ -463,12 +473,12 @@
 
   /* SELECTED — User actively chose this option (OptionCard, template picker) */
   .state-selected {
-    @apply border-primary bg-primary/5;
+    @apply border-siena-sky bg-siena-sky/5;
   }
 
   /* ACTIVE FILTER — A filter/toggle is currently applied (softer than selected) */
   .state-active-filter {
-    @apply border-primary/50 bg-primary/5;
+    @apply border-siena-sky/50 bg-siena-sky/5;
   }
 
   /* EXPANDED — Collapsible content is open (NOT an action, just state) */
@@ -973,6 +983,17 @@
     @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;
@@ -988,6 +1009,48 @@
     @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];
+  }
 }
 
 /*
@@ -1042,9 +1105,9 @@
   --siena-bougainvillea-dark: #9B4DAF;
   --siena-bougainvillea-light: #DBA3E8;
 
-  --siena-sage: #5D7A5F;
-  --siena-sage-dark: #3D5A3F;
-  --siena-sage-light: #7A9A7C;
+  --siena-sage: #6B9F6F;
+  --siena-sage-dark: #4E8053;
+  --siena-sage-light: #8BBF8F;
 
   --siena-ochre: #D4A017;
   --siena-ochre-dark: #B8860B;
@@ -1080,7 +1143,7 @@
 
   /* Charts - Mediterranean palette (vibrant on dark) */
   --chart-1: #C77DDB;                    /* bougainvillea purple */
-  --chart-2: #5D7A5F;                    /* sage (deep foliage green) */
+  --chart-2: #6B9F6F;                    /* sage (deep foliage green) */
   --chart-3: #6BB0D8;                    /* tuscan sky blue (was ochre) */
   --chart-4: #D4C5B5;                    /* tuscan stone (warm beige) */
   --chart-5: #DBA3E8;                    /* bougainvillea light */
@@ -1105,6 +1168,9 @@
      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;
@@ -1123,7 +1189,7 @@
   --avatar-amber: #D4A86C;
   --avatar-ochre: #B89B2A;
   --avatar-olive: #7C9A4E;
-  --avatar-sage: #6D8B74;
+  --avatar-sage: #7AAF7E;
   --avatar-forest: #4D8A5D;
   --avatar-teal: #4A9898;
   --avatar-sky: #7AAFCC;
@@ -1142,6 +1208,32 @@
   ---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;