@almadar/ui 4.57.5 → 5.1.0

package/themes/gazette.css

@@ -0,0 +1,411 @@
+/**
+ * Gazette Theme
+ *
+ * Spacious editorial aesthetic in the Substack/Notion lineage. Warm paper
+ * backgrounds, serif headlines, generous whitespace, and a single muted rust
+ * accent paired with sage — old-magazine warmth over corporate neutrals.
+ */
+
+/* ==========================================================================
+ * LIGHT MODE
+ * ========================================================================== */
+[data-theme="gazette-light"] {
+    /* Shadows - Soft, prominent for editorial card lift */
+    --shadow-none: none;
+    --shadow-sm: 0 1px 2px rgba(26, 22, 20, 0.06);
+    --shadow-main:
+        0 4px 16px rgba(26, 22, 20, 0.08), 0 2px 4px rgba(26, 22, 20, 0.04);
+    --shadow-lg:
+        0 16px 48px rgba(26, 22, 20, 0.14), 0 6px 16px rgba(26, 22, 20, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(26, 22, 20, 0.06);
+    --shadow-hover:
+        0 20px 56px rgba(26, 22, 20, 0.16), 0 8px 20px rgba(26, 22, 20, 0.08);
+    --shadow-active: 0 2px 8px rgba(26, 22, 20, 0.1);
+
+    /* Border radius - Soft */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width - Hairline */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Warm paper with rust + sage accents */
+    --color-primary: #a85436;
+    --color-primary-hover: #8c4329;
+    --color-primary-foreground: #fdfbf6;
+
+    --color-secondary: #6b8e5a;
+    --color-secondary-hover: #5a7a4b;
+    --color-secondary-foreground: #fdfbf6;
+
+    --color-accent: #a85436;
+    --color-accent-foreground: #fdfbf6;
+
+    --color-muted: #f3eee3;
+    --color-muted-foreground: #6b5f55;
+
+    --color-background: #fdfbf6;
+    --color-foreground: #1a1614;
+    --color-card: #ffffff;
+    --color-card-foreground: #1a1614;
+    --color-surface: #f8f3e8;
+    --color-border: #e6dccb;
+    --color-input: #e6dccb;
+    --color-ring: #a85436;
+
+    /* Semantic colors */
+    --color-error: #b3402c;
+    --color-error-foreground: #fdfbf6;
+    --color-success: #5a7a4b;
+    --color-success-foreground: #fdfbf6;
+    --color-warning: #c08a2e;
+    --color-warning-foreground: #1a1614;
+    --color-info: #4a6b8a;
+    --color-info-foreground: #fdfbf6;
+
+    /* Typography - Editorial: serif display + Inter body + JetBrains mono */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.005em;
+    --line-height: 1.75;
+
+    /* Icon styling - Phosphor duotone, soft stroke */
+    --icon-stroke-width: 1.5;
+    --icon-color: #1a1614;
+
+    /* Transitions - Organic */
+    --transition-fast: 250ms;
+    --transition-normal: 400ms;
+    --transition-slow: 600ms;
+    --transition-timing: cubic-bezier(0.2, 0, 0, 1);
+
+    /* Hover/Active transforms - Gentle lift */
+    --hover-scale: 1;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring - Rust */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 3px;
+    --focus-ring-color: #a85436;
+
+    /* Density axis — spacious 8pt rhythm */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 32px;
+    --space-8: 40px;
+    --space-9: 48px;
+    --space-10: 56px;
+    --space-11: 64px;
+    --space-12: 80px;
+    /* Density axis — per-element heights (generous) */
+    --button-height-sm: 36px;
+    --button-height-md: 40px;
+    --button-height-lg: 44px;
+    --input-height-sm: 36px;
+    --input-height-md: 40px;
+    --input-height-lg: 44px;
+    --row-height-compact: 44px;
+    --row-height-normal: 56px;
+    --row-height-spacious: 64px;
+    /* Density axis — per-element padding (editorial breathing room) */
+    --card-padding-sm: 16px;
+    --card-padding-md: 24px;
+    --card-padding-lg: 32px;
+    --dialog-padding: 32px;
+    --section-gap: 48px;
+    /* Type axis — editorial family triplet */
+    --font-family-display: "Fraunces", "Charter", Georgia, serif;
+    --font-family-body:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono:
+        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        monospace;
+    /* Type axis — size scale (generous reading leading) */
+    --text-xs: 13px;
+    --leading-xs: 18px;
+    --text-sm: 14px;
+    --leading-sm: 22px;
+    --text-base: 16px;
+    --leading-base: 28px;
+    --text-lg: 19px;
+    --leading-lg: 30px;
+    --text-xl: 22px;
+    --leading-xl: 32px;
+    --text-2xl: 26px;
+    --leading-2xl: 34px;
+    --text-3xl: 30px;
+    --leading-3xl: 38px;
+    --text-4xl: 38px;
+    --leading-4xl: 46px;
+    --text-display-1: 52px;
+    --leading-display-1: 60px;
+    --text-display-2: 68px;
+    --leading-display-2: 76px;
+    /* Type axis — intent mapping (serif headlines, generous leading) */
+    --intent-heading-major-size: var(--text-3xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-3xl);
+    --intent-heading-minor-size: var(--text-xl);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-xl);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-base);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-base);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    /* Motion axis — organic durations */
+    --duration-instant: 0ms;
+    --duration-fast: 250ms;
+    --duration-normal: 400ms;
+    --duration-slow: 600ms;
+    --duration-dramatic: 900ms;
+    /* Motion axis — emphasized easing palette */
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    /* Iconography axis — phosphor duotone, larger default */
+    --icon-family: phosphor-duotone;
+    --icon-default-size: 20px;
+    /* Elevation axis — shadowed editorial cards */
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    /* Geometry axis — soft hairlines */
+    --radius-container: 12px;
+    --radius-interactive: 10px;
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+}
+
+/* ==========================================================================
+ * DARK MODE
+ * ========================================================================== */
+[data-theme="gazette-dark"] {
+    /* Shadows - Deeper for night-mode editorial */
+    --shadow-none: none;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-main:
+        0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
+    --shadow-lg:
+        0 16px 48px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.3);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-hover:
+        0 20px 56px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.35);
+    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+    /* Border radius - Soft */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Border width - Hairline */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Warm deep-black with rust + brighter sage */
+    --color-primary: #c0664a;
+    --color-primary-hover: #d57a5d;
+    --color-primary-foreground: #14110d;
+
+    --color-secondary: #8aac76;
+    --color-secondary-hover: #9dbf89;
+    --color-secondary-foreground: #14110d;
+
+    --color-accent: #c0664a;
+    --color-accent-foreground: #14110d;
+
+    --color-muted: #1f1a16;
+    --color-muted-foreground: #a89e91;
+
+    --color-background: #14110d;
+    --color-foreground: #f5efe6;
+    --color-card: #1f1a16;
+    --color-card-foreground: #f5efe6;
+    --color-surface: #1a1612;
+    --color-border: #2e2620;
+    --color-input: #2e2620;
+    --color-ring: #c0664a;
+
+    /* Semantic colors - Warmer for dark */
+    --color-error: #d96650;
+    --color-error-foreground: #14110d;
+    --color-success: #8aac76;
+    --color-success-foreground: #14110d;
+    --color-warning: #d9a85a;
+    --color-warning-foreground: #14110d;
+    --color-info: #7a9ec0;
+    --color-info-foreground: #14110d;
+
+    /* Typography - Editorial: serif display + Inter body + JetBrains mono */
+    --font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.005em;
+    --line-height: 1.75;
+
+    /* Icon styling - Phosphor duotone, soft stroke */
+    --icon-stroke-width: 1.5;
+    --icon-color: #f5efe6;
+
+    /* Transitions - Organic */
+    --transition-fast: 250ms;
+    --transition-normal: 400ms;
+    --transition-slow: 600ms;
+    --transition-timing: cubic-bezier(0.2, 0, 0, 1);
+
+    /* Hover/Active transforms - Gentle lift */
+    --hover-scale: 1;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring - Rust */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 3px;
+    --focus-ring-color: #c0664a;
+
+    /* Density axis — spacious 8pt rhythm */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 32px;
+    --space-8: 40px;
+    --space-9: 48px;
+    --space-10: 56px;
+    --space-11: 64px;
+    --space-12: 80px;
+    /* Density axis — per-element heights (generous) */
+    --button-height-sm: 36px;
+    --button-height-md: 40px;
+    --button-height-lg: 44px;
+    --input-height-sm: 36px;
+    --input-height-md: 40px;
+    --input-height-lg: 44px;
+    --row-height-compact: 44px;
+    --row-height-normal: 56px;
+    --row-height-spacious: 64px;
+    /* Density axis — per-element padding (editorial breathing room) */
+    --card-padding-sm: 16px;
+    --card-padding-md: 24px;
+    --card-padding-lg: 32px;
+    --dialog-padding: 32px;
+    --section-gap: 48px;
+    /* Type axis — editorial family triplet */
+    --font-family-display: "Fraunces", "Charter", Georgia, serif;
+    --font-family-body:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono:
+        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        monospace;
+    /* Type axis — size scale (generous reading leading) */
+    --text-xs: 13px;
+    --leading-xs: 18px;
+    --text-sm: 14px;
+    --leading-sm: 22px;
+    --text-base: 16px;
+    --leading-base: 28px;
+    --text-lg: 19px;
+    --leading-lg: 30px;
+    --text-xl: 22px;
+    --leading-xl: 32px;
+    --text-2xl: 26px;
+    --leading-2xl: 34px;
+    --text-3xl: 30px;
+    --leading-3xl: 38px;
+    --text-4xl: 38px;
+    --leading-4xl: 46px;
+    --text-display-1: 52px;
+    --leading-display-1: 60px;
+    --text-display-2: 68px;
+    --leading-display-2: 76px;
+    /* Type axis — intent mapping (serif headlines, generous leading) */
+    --intent-heading-major-size: var(--text-3xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-3xl);
+    --intent-heading-minor-size: var(--text-xl);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-xl);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-base);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-base);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    /* Motion axis — organic durations */
+    --duration-instant: 0ms;
+    --duration-fast: 250ms;
+    --duration-normal: 400ms;
+    --duration-slow: 600ms;
+    --duration-dramatic: 900ms;
+    /* Motion axis — emphasized easing palette */
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    /* Iconography axis — phosphor duotone, larger default */
+    --icon-family: phosphor-duotone;
+    --icon-default-size: 20px;
+    /* Elevation axis — shadowed editorial cards */
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    /* Geometry axis — soft hairlines */
+    --radius-container: 12px;
+    --radius-interactive: 10px;
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+}

package/themes/index.css

@@ -8,6 +8,11 @@
  * IMPORTANT: @import must precede all other statements (Vite requirement).
  */
 
+/* Layer 1 skin axes — font families consumed by prism / gazette / terminal / atelier / kiosk.
+ * Combined into a single Google Fonts request for fewer round-trips. font-display: swap
+ * means body text renders immediately with the fallback chain while the web fonts load. */
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap");
+
 /* Core themes */
 @import "./wireframe.css";
 @import "./minimalist.css";
@@ -29,6 +34,13 @@
 @import "./arctic.css";
 @import "./copper.css";
 
+/* Layer 1 skin axes — truly-unique themes (see docs/Almadar_Std_Variations.md) */
+@import "./prism.css";
+@import "./gazette.css";
+@import "./terminal.css";
+@import "./atelier.css";
+@import "./kiosk.css";
+
 /**
  * Minimal element reset for @almadar/ui components.
  *