@eventuras/ratio-ui 1.0.0

package/src/tokens/theme.css

@@ -0,0 +1,311 @@
+/* ============================================
+   LOSOL DESIGN SYSTEM - COLORS
+   ============================================
+   Color scales use oklch() directly in @theme so
+   Tailwind v4 opacity modifiers (e.g. bg-primary-200/50)
+   work at build time.
+
+   Semantic tokens (--primary, --text, etc.) remain as
+   var() references for runtime dark mode switching.
+   ============================================ */
+
+/* --------------------------------------------
+   Tailwind v4 theme: color scales (oklch)
+   -------------------------------------------- */
+@theme {
+  /* Primary - Ocean Teal */
+  --color-primary-50: oklch(0.9898 0.0026 229.9);
+  --color-primary-100: oklch(0.9282 0.0203 216.4);
+  --color-primary-200: oklch(0.8659 0.0390 215.1);
+  --color-primary-300: oklch(0.7743 0.0618 216.3);
+  --color-primary-400: oklch(0.6753 0.0768 215.9);
+  --color-primary-500: oklch(0.6096 0.0745 218.3);
+  --color-primary-600: oklch(0.5227 0.0675 224.9);
+  --color-primary-700: oklch(0.4578 0.0567 219.2);
+  --color-primary-800: oklch(0.3412 0.0399 221.7);
+  --color-primary-900: oklch(0.2736 0.0317 219.8);
+  --color-primary-950: oklch(0.1831 0.0213 231.0);
+
+  /* Secondary - Sunny Yellow */
+  --color-secondary-50: oklch(0.9964 0.0066 97.5);
+  --color-secondary-100: oklch(0.9645 0.0603 96.2);
+  --color-secondary-200: oklch(0.9257 0.1174 94.9);
+  --color-secondary-300: oklch(0.8836 0.1564 91.1);
+  --color-secondary-400: oklch(0.8466 0.1677 84.6);
+  --color-secondary-500: oklch(0.8247 0.1474 73.0);
+  --color-secondary-600: oklch(0.7093 0.1551 67.2);
+  --color-secondary-700: oklch(0.5913 0.1415 56.2);
+  --color-secondary-800: oklch(0.4355 0.1019 57.1);
+  --color-secondary-900: oklch(0.3217 0.0714 60.2);
+  --color-secondary-950: oklch(0.1904 0.0373 65.9);
+
+  /* Accent - Warm Terracotta */
+  --color-accent-50: oklch(0.9931 0.0034 38.5);
+  --color-accent-100: oklch(0.9503 0.0228 41.3);
+  --color-accent-200: oklch(0.8957 0.0517 40.6);
+  --color-accent-300: oklch(0.8226 0.0911 39.2);
+  --color-accent-400: oklch(0.7402 0.1370 35.6);
+  --color-accent-500: oklch(0.6878 0.1331 35.8);
+  --color-accent-600: oklch(0.6047 0.1438 36.5);
+  --color-accent-700: oklch(0.5251 0.1305 34.4);
+  --color-accent-800: oklch(0.3861 0.0934 33.9);
+  --color-accent-900: oklch(0.2670 0.0572 34.1);
+  --color-accent-950: oklch(0.1712 0.0273 32.6);
+
+  /* Neutral */
+  --color-neutral-50: oklch(0.9851 0.0001 263.3);
+  --color-neutral-100: oklch(0.9702 0.0001 263.3);
+  --color-neutral-200: oklch(0.9219 0.0001 263.3);
+  --color-neutral-300: oklch(0.8699 0.0001 263.3);
+  --color-neutral-400: oklch(0.7155 0.0001 263.3);
+  --color-neutral-500: oklch(0.5555 0.0000 263.3);
+  --color-neutral-600: oklch(0.4386 0.0000 263.3);
+  --color-neutral-700: oklch(0.3715 0.0000 263.3);
+  --color-neutral-800: oklch(0.2686 0.0000 263.3);
+  --color-neutral-900: oklch(0.2046 0.0000 263.3);
+  --color-neutral-950: oklch(0.1448 0.0000 263.3);
+
+  /* Success - Mint Green */
+  --color-success-50: oklch(0.9825 0.0164 163.1);
+  --color-success-100: oklch(0.9627 0.0425 158.2);
+  --color-success-200: oklch(0.9253 0.0797 156.7);
+  --color-success-300: oklch(0.8714 0.1353 154.9);
+  --color-success-400: oklch(0.8003 0.1820 151.7);
+  --color-success-500: oklch(0.7227 0.1920 149.6);
+  --color-success-600: oklch(0.6270 0.1699 149.2);
+  --color-success-700: oklch(0.5273 0.1371 150.1);
+  --color-success-800: oklch(0.4479 0.1083 151.3);
+  --color-success-900: oklch(0.3925 0.0896 152.6);
+  --color-success-950: oklch(0.2664 0.0628 153.0);
+
+  /* Warning - Amber */
+  --color-warning-50: oklch(0.9869 0.0213 95.3);
+  --color-warning-100: oklch(0.9619 0.0579 95.6);
+  --color-warning-200: oklch(0.9243 0.1151 95.8);
+  --color-warning-300: oklch(0.8790 0.1533 91.6);
+  --color-warning-400: oklch(0.8369 0.1643 84.4);
+  --color-warning-500: oklch(0.7686 0.1646 70.1);
+  --color-warning-600: oklch(0.6659 0.1574 58.3);
+  --color-warning-700: oklch(0.5553 0.1455 49.0);
+  --color-warning-800: oklch(0.4732 0.1247 46.2);
+  --color-warning-900: oklch(0.4137 0.1053 45.9);
+  --color-warning-950: oklch(0.2791 0.0742 45.6);
+
+  /* Error - Coral Red */
+  --color-error-50: oklch(0.9705 0.0129 17.0);
+  --color-error-100: oklch(0.9356 0.0309 17.6);
+  --color-error-200: oklch(0.8845 0.0592 18.3);
+  --color-error-300: oklch(0.8077 0.1035 19.5);
+  --color-error-400: oklch(0.7106 0.1661 22.2);
+  --color-error-500: oklch(0.6369 0.2078 25.3);
+  --color-error-600: oklch(0.5771 0.2151 27.3);
+  --color-error-700: oklch(0.5054 0.1905 27.5);
+  --color-error-800: oklch(0.4437 0.1613 26.9);
+  --color-error-900: oklch(0.3959 0.1331 25.7);
+  --color-error-950: oklch(0.2575 0.0885 26.0);
+
+  /* Info - Sky Blue */
+  --color-info-50: oklch(0.9771 0.0126 236.8);
+  --color-info-100: oklch(0.9514 0.0251 236.9);
+  --color-info-200: oklch(0.9014 0.0556 230.9);
+  --color-info-300: oklch(0.8276 0.1013 230.3);
+  --color-info-400: oklch(0.7535 0.1391 232.7);
+  --color-info-500: oklch(0.6847 0.1479 237.3);
+  --color-info-600: oklch(0.5876 0.1389 242.0);
+  --color-info-700: oklch(0.5000 0.1193 242.8);
+  --color-info-800: oklch(0.4434 0.1001 240.8);
+  --color-info-900: oklch(0.3912 0.0846 240.9);
+  --color-info-950: oklch(0.2934 0.0633 243.2);
+
+  /* Support - Sage Green */
+  --color-support-50: oklch(0.9903 0.0011 201.2);
+  --color-support-100: oklch(0.9324 0.0104 174.7);
+  --color-support-200: oklch(0.8680 0.0195 176.6);
+  --color-support-300: oklch(0.7591 0.0282 176.2);
+  --color-support-400: oklch(0.6544 0.0356 177.2);
+  --color-support-500: oklch(0.5667 0.0376 177.4);
+  --color-support-600: oklch(0.4850 0.0308 181.4);
+  --color-support-700: oklch(0.4249 0.0245 180.9);
+  --color-support-800: oklch(0.2942 0.0155 183.0);
+  --color-support-900: oklch(0.2267 0.0118 187.1);
+  --color-support-950: oklch(0.1626 0.0082 181.8);
+
+  /* --- Semantic (runtime-switchable via var()) --- */
+
+  /* Brand */
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+
+  /* Text */
+  --color-text: var(--text);
+  --color-text-muted: var(--text-muted);
+  --color-text-subtle: var(--text-subtle);
+  --color-text-light: var(--text-light);
+  --color-text-dark: var(--text-dark);
+  --color-text-on-primary: var(--text-on-primary);
+  --color-text-on-secondary: var(--text-on-secondary);
+  --color-text-on-accent: var(--text-on-accent);
+
+  /* Borders */
+  --color-border-1: var(--border-1);
+  --color-border-2: var(--border-2);
+
+  /* Surfaces */
+  --color-card: var(--card);
+  --color-card-hover: var(--card-hover);
+
+  /* Overlays */
+  --color-overlay-hover: var(--overlay-hover);
+  --color-overlay-press: var(--overlay-press);
+  --color-overlay-drag: var(--overlay-drag);
+
+  /* Status (semantic) */
+  --color-success: var(--success-solid);
+  --color-success-bg: var(--success-bg);
+  --color-success-border: var(--success-border);
+  --color-success-text: var(--success-text);
+  --color-success-on: var(--success-on-solid);
+
+  --color-info: var(--info-solid);
+  --color-info-bg: var(--info-bg);
+  --color-info-border: var(--info-border);
+  --color-info-text: var(--info-text);
+  --color-info-on: var(--info-on-solid);
+
+  --color-warning: var(--warning-solid);
+  --color-warning-bg: var(--warning-bg);
+  --color-warning-border: var(--warning-border);
+  --color-warning-text: var(--warning-text);
+  --color-warning-on: var(--warning-on-solid);
+
+  --color-error: var(--error-solid);
+  --color-error-bg: var(--error-bg);
+  --color-error-border: var(--error-border);
+  --color-error-text: var(--error-text);
+  --color-error-on: var(--error-on-solid);
+
+  /* Shadow */
+  --shadow-focus: 0 0 0 4px var(--focus-ring);
+}
+
+/* --------------------------------------------
+   Semantic tokens (light)
+   -------------------------------------------- */
+:root {
+  --primary: var(--color-primary-500);
+  --secondary: var(--color-secondary-500);
+  --accent: var(--color-accent-500);
+
+  --text: var(--color-neutral-900);
+  --text-muted: var(--color-neutral-700);
+  --text-subtle: var(--color-neutral-500);
+  --text-light: var(--color-neutral-50);
+  --text-dark: var(--color-neutral-900);
+
+  --text-on-primary: var(--color-neutral-50);
+  --text-on-secondary: #1A1405;
+  --text-on-accent: var(--color-neutral-50);
+
+  --border-1: var(--color-neutral-200);
+  --border-2: var(--color-neutral-300);
+
+  --alpha-1: 0.04;
+  --alpha-2: 0.08;
+  --alpha-3: 0.12;
+
+  --overlay-ink: 22 20 18;
+  --overlay-hover: rgba(var(--overlay-ink), var(--alpha-1));
+  --overlay-press: rgba(var(--overlay-ink), var(--alpha-2));
+  --overlay-drag: rgba(var(--overlay-ink), var(--alpha-3));
+
+  --card: rgb(255 255 255 / 0.5);
+  --card-hover: rgb(255 255 255 / 0.65);
+
+  --focus-ring: rgba(74, 142, 161, 0.45);
+
+  /* Status */
+  --success-solid: #2E9A62;
+  --success-on-solid: var(--color-neutral-50);
+  --success-bg: #EAF7F0;
+  --success-border: #BFE8D2;
+  --success-text: #1F6B46;
+
+  --info-solid: #2F7FA0;
+  --info-on-solid: var(--color-neutral-50);
+  --info-bg: #EAF4FA;
+  --info-border: #C6E3F1;
+  --info-text: #225E77;
+
+  --warning-solid: #D97706;
+  --warning-on-solid: #1A1405;
+  --warning-bg: #FFF6DE;
+  --warning-border: #FFE0A3;
+  --warning-text: #8A4B05;
+
+  --error-solid: #D64545;
+  --error-on-solid: var(--color-neutral-50);
+  --error-bg: #FDEEEE;
+  --error-border: #F6CACA;
+  --error-text: #8E2A2A;
+}
+
+/* --------------------------------------------
+   Semantic tokens (dark)
+   -------------------------------------------- */
+:root[data-theme="dark"] {
+  --primary: var(--color-primary-400);
+  --secondary: var(--color-secondary-400);
+  --accent: var(--color-accent-400);
+
+  --text: var(--color-neutral-50);
+  --text-muted: var(--color-neutral-200);
+  --text-subtle: var(--color-neutral-400);
+  --text-light: var(--color-neutral-50);
+  --text-dark: var(--color-neutral-900);
+
+  --text-on-primary: #071114;
+  --text-on-secondary: #1A1405;
+  --text-on-accent: #160B08;
+
+  --border-1: rgba(250, 247, 243, 0.10);
+  --border-2: rgba(250, 247, 243, 0.16);
+
+  --alpha-1: 0.06;
+  --alpha-2: 0.10;
+  --alpha-3: 0.16;
+
+  --overlay-ink: 250 247 243;
+  --overlay-hover: rgba(var(--overlay-ink), var(--alpha-1));
+  --overlay-press: rgba(var(--overlay-ink), var(--alpha-2));
+  --overlay-drag: rgba(var(--overlay-ink), var(--alpha-3));
+
+  --card: rgb(0 0 0 / 0.5);
+  --card-hover: rgb(0 0 0 / 0.65);
+
+  --focus-ring: rgba(91, 163, 181, 0.55);
+
+  /* Status (dark) */
+  --success-bg: rgba(46, 154, 98, 0.16);
+  --success-border: rgba(46, 154, 98, 0.28);
+  --success-text: #A7E7C6;
+
+  --info-bg: rgba(47, 127, 160, 0.16);
+  --info-border: rgba(47, 127, 160, 0.28);
+  --info-text: #A7D9EE;
+
+  --warning-bg: rgba(217, 119, 6, 0.18);
+  --warning-border: rgba(217, 119, 6, 0.30);
+  --warning-text: #FFD18A;
+
+  --error-bg: rgba(214, 69, 69, 0.18);
+  --error-border: rgba(214, 69, 69, 0.30);
+  --error-text: #FFB3B3;
+}
+
+/* --------------------------------------------
+   Base document styling
+   -------------------------------------------- */
+html {
+  color: var(--text);
+}

package/src/tokens/typography.css

@@ -0,0 +1,22 @@
+@theme {
+  /* Fonts */
+  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Source Serif 4", ui-serif, Georgia, serif;
+  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
+
+  /* Recommended roles */
+  --font-display: var(--font-serif);
+  --font-body: var(--font-sans);
+
+  /* Fluid typography - @link https://utopia.fyi/type/calculator */
+  --font-size-xs: clamp(0.75rem, 0.7rem + 0.13vw, 0.81rem);
+  --font-size-sm: clamp(0.88rem, 0.83rem + 0.16vw, 0.96rem);
+  --font-size-base: clamp(1rem, 0.96rem + 0.19vw, 1.13rem);
+  --font-size-lg: clamp(1.13rem, 1.06rem + 0.23vw, 1.27rem);
+  --font-size-xl: clamp(1.27rem, 1.19rem + 0.27vw, 1.42rem);
+  --font-size-2xl: clamp(1.42rem, 1.33rem + 0.32vw, 1.6rem);
+  --font-size-3xl: clamp(1.6rem, 1.48rem + 0.37vw, 1.8rem);
+  --font-size-4xl: clamp(1.8rem, 1.66rem + 0.43vw, 2.03rem);
+  --font-size-5xl: clamp(2.03rem, 1.85rem + 0.49vw, 2.28rem);
+  --font-size-6xl: clamp(2.28rem, 2.07rem + 0.55vw, 2.57rem);
+}