@almadar/ui 6.28.0 → 6.30.0

package/themes/notion-editorial.css

@@ -1,58 +1,20 @@
 /**
- * Notion Editorial Theme
- *
- * Personality: warm editorial document feel — Notion / Medium / NYT-lineage. Serif
- * display for headings, generous 8pt rhythm, soft Material-style shadows, organic
- * ease-out motion, duotone phosphor icons.
- *
- * Spec axes (per docs/Almadar_Std_Variations.md §2.4):
- *   Color        warm off-white + dark slate ink
- *   Density      spacious (8pt rhythm, 36/44/52 buttons)
- *   Type         editorial (Fraunces serif display + Inter body, 1.7 leading)
- *   Geometry     soft (8/12/16 radius, thin borders)
- *   Elevation    shadowed (Material 1-5 shadows)
- *   Motion       organic (cubic-bezier ease-out, 200/350/500ms)
- *   Iconography  duotone (phosphor-duotone)
- *   Illustration illustrated (svg illustration empty states)
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/notion-editorial.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
 [data-theme="notion-editorial-light"] {
-    --shadow-none: none;
-    --shadow-sm: 0 1px 2px rgba(25, 25, 25, 0.06);
-    --shadow-main: 0 2px 6px rgba(25, 25, 25, 0.08), 0 1px 2px rgba(25, 25, 25, 0.04);
-    --shadow-lg: 0 10px 24px rgba(25, 25, 25, 0.10), 0 4px 8px rgba(25, 25, 25, 0.06);
-    --shadow-inner: inset 0 1px 2px rgba(25, 25, 25, 0.06);
-    --shadow-hover: 0 4px 12px rgba(25, 25, 25, 0.10);
-    --shadow-active: 0 1px 2px rgba(25, 25, 25, 0.06);
-
-    --radius-none: 0px;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 20px;
-    --radius-full: 9999px;
-
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 1px;
-
     --color-primary: #c2410c;
     --color-primary-hover: #9a3412;
     --color-primary-foreground: #fefdf9;
-
     --color-secondary: #f4f1ea;
     --color-secondary-hover: #ebe7dc;
     --color-secondary-foreground: #191919;
-
     --color-accent: #d13f0a;
     --color-accent-foreground: #fefdf9;
-
     --color-muted: #f4f1ea;
     --color-muted-foreground: #6b6660;
-
     --color-background: #fefdf9;
     --color-foreground: #191919;
     --color-card: #ffffff;
@@ -61,14 +23,12 @@
     --color-border: #e8e3d6;
     --color-input: #d8d2c2;
     --color-ring: #ff6b35;
-
     --color-table-header: #f4f1ea;
     --color-table-border: #e8e3d6;
     --color-table-row-hover: #f9f6ef;
     --color-surface-hover: #ebe7dc;
     --color-border-hover: #c8c1ad;
     --color-placeholder: #a39c8f;
-
     --color-error: #b42318;
     --color-error-foreground: #fefdf9;
     --color-success: #067647;
@@ -77,21 +37,72 @@
     --color-warning-foreground: #fefdf9;
     --color-info: #1849a9;
     --color-info-foreground: #fefdf9;
-
-    --font-family:
-        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --font-family-display:
-        "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
-    --font-family-body:
-        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --font-family-mono:
-        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 1px;
+    --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.7;
-
+    --intent-numeric-family: var(--font-family-display);
+    --icon-color: currentColor;
+    --transition-fast: 200ms;
+    --transition-normal: 350ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.0, 0.0, 0.2, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #ff6b35;
+    --shadow-none: none;
+    --shadow-sm: 0 1px 2px rgba(25, 25, 25, 0.06);
+    --shadow-main: 0 2px 6px rgba(25, 25, 25, 0.08), 0 1px 2px rgba(25, 25, 25, 0.04);
+    --shadow-lg: 0 10px 24px rgba(25, 25, 25, 0.10), 0 4px 8px rgba(25, 25, 25, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(25, 25, 25, 0.06);
+    --shadow-hover: 0 4px 12px rgba(25, 25, 25, 0.10);
+    --shadow-active: 0 1px 2px rgba(25, 25, 25, 0.06);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 16px;
+    --space-4: 24px;
+    --space-5: 32px;
+    --space-6: 40px;
+    --space-7: 48px;
+    --space-8: 56px;
+    --space-9: 64px;
+    --space-10: 72px;
+    --space-11: 80px;
+    --space-12: 96px;
+    --button-height-sm: 36px;
+    --button-height-md: 44px;
+    --button-height-lg: 52px;
+    --input-height-sm: 36px;
+    --input-height-md: 44px;
+    --input-height-lg: 52px;
+    --row-height-compact: 48px;
+    --row-height-normal: 56px;
+    --row-height-spacious: 72px;
+    --card-padding-sm: 24px;
+    --card-padding-md: 32px;
+    --card-padding-lg: 48px;
+    --dialog-padding: 48px;
+    --section-gap: 80px;
+    --font-family-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
+    --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --text-xs: 13px;
     --leading-xs: 22px;
     --text-sm: 15px;
@@ -112,7 +123,6 @@
     --leading-display-1: 80px;
     --text-display-2: 96px;
     --leading-display-2: 104px;
-
     --intent-heading-major-size: var(--text-3xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-3xl);
@@ -134,118 +144,41 @@
     --intent-numeric-size: var(--text-4xl);
     --intent-numeric-weight: var(--font-weight-bold);
     --intent-numeric-leading: var(--leading-4xl);
-    --intent-numeric-family: var(--font-family-display);
-
-    --space-0: 0px;
-    --space-1: 4px;
-    --space-2: 8px;
-    --space-3: 16px;
-    --space-4: 24px;
-    --space-5: 32px;
-    --space-6: 40px;
-    --space-7: 48px;
-    --space-8: 56px;
-    --space-9: 64px;
-    --space-10: 72px;
-    --space-11: 80px;
-    --space-12: 96px;
-
-    --button-height-sm: 36px;
-    --button-height-md: 44px;
-    --button-height-lg: 52px;
-    --input-height-sm: 36px;
-    --input-height-md: 44px;
-    --input-height-lg: 52px;
-    --row-height-compact: 48px;
-    --row-height-normal: 56px;
-    --row-height-spacious: 72px;
-
-    --card-padding-sm: 24px;
-    --card-padding-md: 32px;
-    --card-padding-lg: 48px;
-    --dialog-padding: 48px;
-    --section-gap: 80px;
-
+    --duration-instant: 0ms;
+    --duration-fast: 200ms;
+    --duration-normal: 350ms;
+    --duration-slow: 500ms;
+    --duration-dramatic: 700ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.0, 0.0, 0.2, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
     --icon-family: phosphor-duotone;
-    --icon-default-size: 20px;
     --icon-stroke-width: 1.5;
-    --icon-color: currentColor;
-
+    --icon-default-size: 20px;
     --elevation-card: 0 1px 2px rgba(25, 25, 25, 0.06);
     --elevation-popover: 0 4px 12px rgba(25, 25, 25, 0.10), 0 1px 2px rgba(25, 25, 25, 0.04);
     --elevation-dialog: 0 24px 48px rgba(25, 25, 25, 0.18), 0 8px 16px rgba(25, 25, 25, 0.08);
     --elevation-toast: 0 8px 24px rgba(25, 25, 25, 0.14), 0 2px 6px rgba(25, 25, 25, 0.06);
-
     --radius-container: 14px;
     --radius-interactive: 10px;
     --radius-pill: 9999px;
     --border-hairline: 1px;
     --border-standard: 1px;
     --border-heavy: 1px;
-
-    --transition-fast: 200ms;
-    --transition-normal: 350ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.0, 0.0, 0.2, 1);
-
-    --duration-instant: 0ms;
-    --duration-fast: 200ms;
-    --duration-normal: 350ms;
-    --duration-slow: 500ms;
-    --duration-dramatic: 700ms;
-    --easing-linear: linear;
-    --easing-standard: cubic-bezier(0.0, 0.0, 0.2, 1);
-    --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
-    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 0;
-
-    --focus-ring-width: 3px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #ff6b35;
 }
 
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
 [data-theme="notion-editorial-dark"] {
-    --shadow-none: none;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --shadow-main: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.55);
-    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);
-
-    --radius-none: 0px;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 20px;
-    --radius-full: 9999px;
-
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 1px;
-
     --color-primary: #ff8557;
     --color-primary-hover: #ff9a73;
     --color-primary-foreground: #1a1a17;
-
     --color-secondary: #26241f;
     --color-secondary-hover: #2f2d27;
     --color-secondary-foreground: #f5f1e6;
-
     --color-accent: #ff8557;
     --color-accent-foreground: #1a1a17;
-
     --color-muted: #26241f;
     --color-muted-foreground: #a39c8f;
-
     --color-background: #1a1a17;
     --color-foreground: #f5f1e6;
     --color-card: #22211d;
@@ -254,14 +187,12 @@
     --color-border: #3a3730;
     --color-input: #45413a;
     --color-ring: #ff8557;
-
     --color-table-header: #26241f;
     --color-table-border: #3a3730;
     --color-table-row-hover: #201f1b;
     --color-surface-hover: #2f2d27;
     --color-border-hover: #524d44;
     --color-placeholder: #807a6e;
-
     --color-error: #f97066;
     --color-error-foreground: #1a1a17;
     --color-success: #75e0a7;
@@ -270,21 +201,72 @@
     --color-warning-foreground: #1a1a17;
     --color-info: #84caff;
     --color-info-foreground: #1a1a17;
-
-    --font-family:
-        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --font-family-display:
-        "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
-    --font-family-body:
-        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --font-family-mono:
-        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 1px;
+    --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.7;
-
+    --intent-numeric-family: var(--font-family-display);
+    --icon-color: currentColor;
+    --transition-fast: 200ms;
+    --transition-normal: 350ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.0, 0.0, 0.2, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #ff8557;
+    --shadow-none: none;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-main: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.55);
+    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 16px;
+    --space-4: 24px;
+    --space-5: 32px;
+    --space-6: 40px;
+    --space-7: 48px;
+    --space-8: 56px;
+    --space-9: 64px;
+    --space-10: 72px;
+    --space-11: 80px;
+    --space-12: 96px;
+    --button-height-sm: 36px;
+    --button-height-md: 44px;
+    --button-height-lg: 52px;
+    --input-height-sm: 36px;
+    --input-height-md: 44px;
+    --input-height-lg: 52px;
+    --row-height-compact: 48px;
+    --row-height-normal: 56px;
+    --row-height-spacious: 72px;
+    --card-padding-sm: 24px;
+    --card-padding-md: 32px;
+    --card-padding-lg: 48px;
+    --dialog-padding: 48px;
+    --section-gap: 80px;
+    --font-family-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
+    --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --text-xs: 13px;
     --leading-xs: 22px;
     --text-sm: 15px;
@@ -305,7 +287,6 @@
     --leading-display-1: 80px;
     --text-display-2: 96px;
     --leading-display-2: 104px;
-
     --intent-heading-major-size: var(--text-3xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-3xl);
@@ -327,77 +308,26 @@
     --intent-numeric-size: var(--text-4xl);
     --intent-numeric-weight: var(--font-weight-bold);
     --intent-numeric-leading: var(--leading-4xl);
-    --intent-numeric-family: var(--font-family-display);
-
-    --space-0: 0px;
-    --space-1: 4px;
-    --space-2: 8px;
-    --space-3: 16px;
-    --space-4: 24px;
-    --space-5: 32px;
-    --space-6: 40px;
-    --space-7: 48px;
-    --space-8: 56px;
-    --space-9: 64px;
-    --space-10: 72px;
-    --space-11: 80px;
-    --space-12: 96px;
-
-    --button-height-sm: 36px;
-    --button-height-md: 44px;
-    --button-height-lg: 52px;
-    --input-height-sm: 36px;
-    --input-height-md: 44px;
-    --input-height-lg: 52px;
-    --row-height-compact: 48px;
-    --row-height-normal: 56px;
-    --row-height-spacious: 72px;
-
-    --card-padding-sm: 24px;
-    --card-padding-md: 32px;
-    --card-padding-lg: 48px;
-    --dialog-padding: 48px;
-    --section-gap: 80px;
-
+    --duration-instant: 0ms;
+    --duration-fast: 200ms;
+    --duration-normal: 350ms;
+    --duration-slow: 500ms;
+    --duration-dramatic: 700ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.0, 0.0, 0.2, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
     --icon-family: phosphor-duotone;
-    --icon-default-size: 20px;
     --icon-stroke-width: 1.5;
-    --icon-color: currentColor;
-
+    --icon-default-size: 20px;
     --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.4);
     --elevation-popover: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3);
     --elevation-dialog: 0 24px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
     --elevation-toast: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
-
     --radius-container: 14px;
     --radius-interactive: 10px;
     --radius-pill: 9999px;
     --border-hairline: 1px;
     --border-standard: 1px;
     --border-heavy: 1px;
-
-    --transition-fast: 200ms;
-    --transition-normal: 350ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.0, 0.0, 0.2, 1);
-
-    --duration-instant: 0ms;
-    --duration-fast: 200ms;
-    --duration-normal: 350ms;
-    --duration-slow: 500ms;
-    --duration-dramatic: 700ms;
-    --easing-linear: linear;
-    --easing-standard: cubic-bezier(0.0, 0.0, 0.2, 1);
-    --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
-    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 0;
-
-    --focus-ring-width: 3px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #ff8557;
 }