@rafael_dias/akoma 0.3.0

package/src/styles/tokens.css

@@ -0,0 +1,328 @@
+/* Akoma Design System — foundations
+ *
+ * One family, two expressions:
+ *   App  (default / data-mood="app") — tactile, optimistic and relaxed
+ *   Site (data-mood="site")          — composed, precise and trustworthy
+ *
+ * The component API stays identical. Mood only changes design tokens.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&family=Lora:ital,wght@0,500;0,600;1,500&display=swap');
+
+:root {
+  /* Shared family DNA */
+  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-editorial: 'Lora', Georgia, serif;
+  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  --radius-full: 9999px;
+
+  --page-pad-x: 20px;
+  --page-pad-top: 28px;
+  --page-pad-bottom: 24px;
+  --shell-max: 480px;
+  --nav-height: 68px;
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-top: env(safe-area-inset-top, 0px);
+
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* App expression — warm stone + soft violet */
+  --bg: #f8f6f1;
+  --bg-elevated: #fffefa;
+  --bg-soft: #f0ede6;
+  --bg-muted: #e5e0d6;
+  --bg-tinted: #f1eefb;
+
+  --text: #29312d;
+  --text-secondary: #65706a;
+  --text-tertiary: #929b95;
+  --text-inverse: #fffefa;
+
+  --border: rgba(41, 49, 45, 0.07);
+  --border-strong: rgba(41, 49, 45, 0.14);
+
+  --accent: #6658b8;
+  --accent-hover: #5548a3;
+  --accent-soft: #ece9f8;
+  --accent-contrast: #ffffff;
+
+  --cat-1: #5d8ca8;
+  --cat-2: #8a72b4;
+  --cat-3: #b98136;
+  --cat-4: #568269;
+  --cat-5: #b86e7f;
+  --cat-6: #7c7a72;
+
+  --success: #327257;
+  --success-soft: #e5f2eb;
+  --warning: #8b641e;
+  --warning-soft: #f8efd9;
+  --danger: #a94f46;
+  --danger-soft: #fae9e6;
+  --info: #426f8e;
+  --info-soft: #e6f0f6;
+
+  --shadow-sm: 0 1px 2px rgba(49, 44, 35, 0.04), 0 8px 22px rgba(49, 44, 35, 0.055);
+  --shadow-md: 0 2px 4px rgba(49, 44, 35, 0.04), 0 18px 44px rgba(49, 44, 35, 0.09);
+  --shadow-nav: 0 -8px 32px rgba(49, 44, 35, 0.07);
+
+  --radius-sm: 12px;
+  --radius-md: 18px;
+  --radius-lg: 28px;
+  --button-radius: var(--radius-full);
+  --card-radius: 24px;
+  --field-radius: 16px;
+  --chip-radius: var(--radius-full);
+  --badge-radius: var(--radius-full);
+
+  --card-bg: var(--bg-elevated);
+  --card-border: transparent;
+  --card-shadow: var(--shadow-sm);
+  --field-bg: var(--bg-soft);
+  --field-bg-hover: var(--bg-muted);
+  --field-border: transparent;
+  --control-border: var(--border-strong);
+  --focus-ring: 0 0 0 4px rgba(102, 88, 184, 0.15);
+  --button-shadow: 0 6px 18px rgba(102, 88, 184, 0.2);
+
+  --nav-glass: rgba(255, 254, 250, 0.9);
+  --fill-strong: #29312d;
+  --on-fill-strong: #fffefa;
+  --toast-bg: #29312d;
+  --toast-fg: #fffefa;
+
+  --orb-1: rgba(102, 88, 184, 0.13);
+  --orb-2: rgba(86, 130, 105, 0.12);
+  --orb-3: rgba(221, 168, 94, 0.12);
+
+  color-scheme: light;
+}
+
+/* Explicit app scope makes side-by-side mood previews possible. */
+[data-mood='app'] {
+  --bg: #f8f6f1;
+  --bg-elevated: #fffefa;
+  --bg-soft: #f0ede6;
+  --bg-muted: #e5e0d6;
+  --bg-tinted: #f1eefb;
+  --text: #29312d;
+  --text-secondary: #65706a;
+  --text-tertiary: #929b95;
+  --text-inverse: #fffefa;
+  --border: rgba(41, 49, 45, 0.07);
+  --border-strong: rgba(41, 49, 45, 0.14);
+  --accent: #6658b8;
+  --accent-hover: #5548a3;
+  --accent-soft: #ece9f8;
+  --accent-contrast: #ffffff;
+  --shadow-sm: 0 1px 2px rgba(49, 44, 35, 0.04), 0 8px 22px rgba(49, 44, 35, 0.055);
+  --shadow-md: 0 2px 4px rgba(49, 44, 35, 0.04), 0 18px 44px rgba(49, 44, 35, 0.09);
+  --radius-sm: 12px;
+  --radius-md: 18px;
+  --radius-lg: 28px;
+  --button-radius: var(--radius-full);
+  --card-radius: 24px;
+  --field-radius: 16px;
+  --chip-radius: var(--radius-full);
+  --badge-radius: var(--radius-full);
+  --card-bg: var(--bg-elevated);
+  --card-border: transparent;
+  --card-shadow: var(--shadow-sm);
+  --field-bg: var(--bg-soft);
+  --field-bg-hover: var(--bg-muted);
+  --field-border: transparent;
+  --focus-ring: 0 0 0 4px rgba(102, 88, 184, 0.15);
+  --button-shadow: 0 6px 18px rgba(102, 88, 184, 0.2);
+}
+
+/* Site expression — mineral white + confident evergreen.
+ * More controlled radii and visible structure suit finance and B2B contexts.
+ */
+[data-mood='site'] {
+  --bg: #f6f7f3;
+  --bg-elevated: #ffffff;
+  --bg-soft: #edf0ea;
+  --bg-muted: #dfe4dc;
+  --bg-tinted: #e8f0eb;
+
+  --text: #213129;
+  --text-secondary: #5b6a62;
+  --text-tertiary: #8b978f;
+  --text-inverse: #ffffff;
+
+  --border: rgba(33, 49, 41, 0.08);
+  --border-strong: rgba(33, 49, 41, 0.16);
+
+  --accent: #2e684f;
+  --accent-hover: #245640;
+  --accent-soft: #e2eee7;
+  --accent-contrast: #ffffff;
+
+  --cat-1: #4f7f9b;
+  --cat-2: #76639b;
+  --cat-3: #9a702d;
+  --cat-4: #3f7557;
+  --cat-5: #9e596b;
+  --cat-6: #6f756f;
+
+  --success: #276a4a;
+  --success-soft: #e2f0e8;
+  --warning: #805d18;
+  --warning-soft: #f5ecd4;
+  --danger: #98483f;
+  --danger-soft: #f8e7e4;
+  --info: #386984;
+  --info-soft: #e3eef4;
+
+  --shadow-sm: 0 1px 2px rgba(28, 48, 38, 0.035), 0 5px 16px rgba(28, 48, 38, 0.045);
+  --shadow-md: 0 2px 4px rgba(28, 48, 38, 0.04), 0 14px 36px rgba(28, 48, 38, 0.075);
+  --shadow-nav: 0 -6px 28px rgba(28, 48, 38, 0.055);
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --button-radius: 10px;
+  --card-radius: 16px;
+  --field-radius: 10px;
+  --chip-radius: 10px;
+  --badge-radius: 8px;
+
+  --card-bg: var(--bg-elevated);
+  --card-border: var(--border);
+  --card-shadow: 0 1px 2px rgba(28, 48, 38, 0.025), 0 8px 24px rgba(28, 48, 38, 0.04);
+  --field-bg: var(--bg-elevated);
+  --field-bg-hover: var(--bg-elevated);
+  --field-border: var(--border-strong);
+  --control-border: var(--border-strong);
+  --focus-ring: 0 0 0 4px rgba(46, 104, 79, 0.13);
+  --button-shadow: 0 4px 12px rgba(46, 104, 79, 0.16);
+
+  --nav-glass: rgba(255, 255, 255, 0.92);
+  --fill-strong: #213129;
+  --on-fill-strong: #ffffff;
+  --toast-bg: #213129;
+  --toast-fg: #ffffff;
+
+  --orb-1: rgba(46, 104, 79, 0.1);
+  --orb-2: rgba(79, 127, 155, 0.08);
+  --orb-3: rgba(154, 112, 45, 0.07);
+
+  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
+  color-scheme: light;
+}
+
+/* App dark — charcoal with a warm mineral undertone. */
+[data-theme='dark'] {
+  --bg: #1d211f;
+  --bg-elevated: #272c29;
+  --bg-soft: #303632;
+  --bg-muted: #3a413c;
+  --bg-tinted: #312e40;
+
+  --text: #f3f1ec;
+  --text-secondary: #b4bbb6;
+  --text-tertiary: #7f8983;
+  --text-inverse: #202421;
+
+  --border: rgba(255, 255, 255, 0.07);
+  --border-strong: rgba(255, 255, 255, 0.14);
+
+  --accent: #a99ee8;
+  --accent-hover: #bbb2f0;
+  --accent-soft: #39354f;
+  --accent-contrast: #211d38;
+
+  --success: #78b997;
+  --success-soft: #283e32;
+  --warning: #d4ad61;
+  --warning-soft: #413823;
+  --danger: #df8a81;
+  --danger-soft: #472f2d;
+  --info: #86afc8;
+  --info-soft: #293b46;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 22px rgba(0, 0, 0, 0.14);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.24);
+  --card-border: rgba(255, 255, 255, 0.04);
+  --field-border: rgba(255, 255, 255, 0.1);
+  --control-border: rgba(255, 255, 255, 0.14);
+  --focus-ring: 0 0 0 4px rgba(169, 158, 232, 0.18);
+  --button-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
+
+  --nav-glass: rgba(39, 44, 41, 0.92);
+  --fill-strong: #f3f1ec;
+  --on-fill-strong: #202421;
+  --toast-bg: #f3f1ec;
+  --toast-fg: #202421;
+
+  --orb-1: rgba(169, 158, 232, 0.11);
+  --orb-2: rgba(120, 185, 151, 0.09);
+  --orb-3: rgba(212, 173, 97, 0.08);
+
+  color-scheme: dark;
+}
+
+/* Site dark — deep green-charcoal, restrained and high-confidence. */
+[data-mood='site'][data-theme='dark'] {
+  --bg: #19211d;
+  --bg-elevated: #232d28;
+  --bg-soft: #2b3731;
+  --bg-muted: #35433b;
+  --bg-tinted: #263b31;
+
+  --text: #f0f3f0;
+  --text-secondary: #abb7b0;
+  --text-tertiary: #77867d;
+  --text-inverse: #17201b;
+
+  --accent: #82b99d;
+  --accent-hover: #96c6ae;
+  --accent-soft: #294438;
+  --accent-contrast: #13241c;
+
+  --success: #76b792;
+  --success-soft: #274236;
+  --warning: #d0ab62;
+  --warning-soft: #413824;
+  --danger: #dc8b82;
+  --danger-soft: #472f2d;
+  --info: #84adc4;
+  --info-soft: #293d47;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 18px rgba(0, 0, 0, 0.13);
+  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.22);
+  --card-border: rgba(255, 255, 255, 0.065);
+  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
+  --field-border: rgba(255, 255, 255, 0.13);
+  --control-border: rgba(255, 255, 255, 0.14);
+  --focus-ring: 0 0 0 4px rgba(130, 185, 157, 0.16);
+  --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+  --nav-glass: rgba(35, 45, 40, 0.92);
+  --fill-strong: #f0f3f0;
+  --on-fill-strong: #17201b;
+  --toast-bg: #f0f3f0;
+  --toast-fg: #17201b;
+
+  --orb-1: rgba(130, 185, 157, 0.09);
+  --orb-2: rgba(132, 173, 196, 0.07);
+  --orb-3: rgba(208, 171, 98, 0.06);
+
+  color-scheme: dark;
+}