@aleph-front/ds 0.0.0

package/src/styles/tokens.css

@@ -0,0 +1,267 @@
+/* ──────────────────────────────────────────────
+   Layer 1: Color Scales, Gradients, Shadows, Fonts
+   ────────────────────────────────────────────── */
+@theme {
+  /* Primary (brand purple, H: 285.48) — 600 = brand #5100CD */
+  --color-primary-50: oklch(0.97 0.012 285.48);
+  --color-primary-100: oklch(0.93 0.040 285.48);
+  --color-primary-200: oklch(0.87 0.080 285.48);
+  --color-primary-300: oklch(0.77 0.140 285.48);
+  --color-primary-400: oklch(0.64 0.210 285.48);
+  --color-primary-500: oklch(0.50 0.254 285.48);
+  --color-primary-600: oklch(0.372 0.254 285.48);
+  --color-primary-700: oklch(0.31 0.224 285.48);
+  --color-primary-800: oklch(0.25 0.174 285.48);
+  --color-primary-900: oklch(0.20 0.114 285.48);
+  --color-primary-950: oklch(0.15 0.064 285.48);
+
+  /* Accent (brand lime, H: 121.30) — 300 = brand #D4FF00 */
+  --color-accent-50: oklch(0.98 0.030 121.30);
+  --color-accent-100: oklch(0.96 0.100 121.30);
+  --color-accent-200: oklch(0.94 0.180 121.30);
+  --color-accent-300: oklch(0.929 0.228 121.30);
+  --color-accent-400: oklch(0.82 0.200 121.30);
+  --color-accent-500: oklch(0.72 0.175 121.30);
+  --color-accent-600: oklch(0.62 0.150 121.30);
+  --color-accent-700: oklch(0.52 0.120 121.30);
+  --color-accent-800: oklch(0.42 0.085 121.30);
+  --color-accent-900: oklch(0.32 0.055 121.30);
+  --color-accent-950: oklch(0.22 0.030 121.30);
+
+  /* Success (green, H: 145) — 500 = #36D846 */
+  --color-success-50: oklch(0.98 0.020 145);
+  --color-success-100: oklch(0.94 0.050 145);
+  --color-success-200: oklch(0.88 0.100 145);
+  --color-success-300: oklch(0.81 0.160 145);
+  --color-success-400: oklch(0.76 0.200 145);
+  --color-success-500: oklch(0.72 0.230 145);
+  --color-success-600: oklch(0.60 0.200 145);
+  --color-success-700: oklch(0.50 0.170 145);
+  --color-success-800: oklch(0.40 0.130 145);
+  --color-success-900: oklch(0.30 0.085 145);
+  --color-success-950: oklch(0.20 0.045 145);
+
+  /* Warning (amber, H: 75) — 500 = #FBAE18 */
+  --color-warning-50: oklch(0.98 0.020 75);
+  --color-warning-100: oklch(0.95 0.050 75);
+  --color-warning-200: oklch(0.90 0.100 75);
+  --color-warning-300: oklch(0.86 0.140 75);
+  --color-warning-400: oklch(0.83 0.165 75);
+  --color-warning-500: oklch(0.80 0.180 75);
+  --color-warning-600: oklch(0.70 0.165 75);
+  --color-warning-700: oklch(0.60 0.140 75);
+  --color-warning-800: oklch(0.48 0.110 75);
+  --color-warning-900: oklch(0.35 0.075 75);
+  --color-warning-950: oklch(0.24 0.045 75);
+
+  /* Error (red, H: 12) — 600 = #DE3668 */
+  --color-error-50: oklch(0.98 0.010 12);
+  --color-error-100: oklch(0.93 0.040 12);
+  --color-error-200: oklch(0.87 0.080 12);
+  --color-error-300: oklch(0.79 0.130 12);
+  --color-error-400: oklch(0.70 0.170 12);
+  --color-error-500: oklch(0.63 0.200 12);
+  --color-error-600: oklch(0.57 0.200 12);
+  --color-error-700: oklch(0.48 0.175 12);
+  --color-error-800: oklch(0.39 0.140 12);
+  --color-error-900: oklch(0.30 0.095 12);
+  --color-error-950: oklch(0.20 0.055 12);
+
+  /* Destructive (alias → error, for shadcn/Tailwind convention compatibility) */
+  --color-destructive-50: var(--color-error-50);
+  --color-destructive-100: var(--color-error-100);
+  --color-destructive-200: var(--color-error-200);
+  --color-destructive-300: var(--color-error-300);
+  --color-destructive-400: var(--color-error-400);
+  --color-destructive-500: var(--color-error-500);
+  --color-destructive-600: var(--color-error-600);
+  --color-destructive-700: var(--color-error-700);
+  --color-destructive-800: var(--color-error-800);
+  --color-destructive-900: var(--color-error-900);
+  --color-destructive-950: var(--color-error-950);
+
+  /* Neutral (gray with slight purple tint, H: 265) */
+  --color-neutral-50: oklch(0.98 0.003 265);
+  --color-neutral-100: oklch(0.94 0.006 265);
+  --color-neutral-200: oklch(0.90 0.008 265);
+  --color-neutral-300: oklch(0.83 0.012 265);
+  --color-neutral-400: oklch(0.71 0.015 265);
+  --color-neutral-500: oklch(0.55 0.015 265);
+  --color-neutral-600: oklch(0.45 0.014 265);
+  --color-neutral-700: oklch(0.37 0.012 265);
+  --color-neutral-800: oklch(0.29 0.010 265);
+  --color-neutral-900: oklch(0.21 0.008 265);
+  --color-neutral-950: oklch(0.14 0.005 265);
+
+  /* Base (dark indigo, H: 280) — tone-sur-tone dark surface palette */
+  --color-base-900: oklch(0.22 0.025 280);
+  --color-base-800: oklch(0.28 0.030 280);
+  --color-base-700: oklch(0.34 0.034 280);
+
+  /* Gradients */
+  --gradient-main-base: linear-gradient(90deg, #141421 8.24%, #5100CD 71.81%);
+  --gradient-main-dark: linear-gradient(90deg, #1C1C32 8.24%, #5100CD 71.81%);
+  --gradient-lime: linear-gradient(90deg, #D6FF00 27.88%, #F5F7DB 100%);
+  --gradient-success: linear-gradient(90deg, #36D846 0%, #63E570 100%);
+  --gradient-warning: linear-gradient(90deg, #FFE814 0%, #FBAE18 100%);
+  --gradient-error: linear-gradient(90deg, #FFAC89 0%, #DE3668 90.62%);
+  --gradient-info: linear-gradient(90deg, #C8ADF0 22.66%, #5100CD 244.27%);
+  --gradient-destructive: var(--gradient-error);
+
+  /* Shadows */
+  --shadow-brand-sm: 0px 4px 4px oklch(0.372 0.254 285.48 / 0.15);
+  --shadow-brand: 0px 4px 24px oklch(0.372 0.254 285.48 / 0.1);
+  --shadow-brand-lg: 0px 4px 48px oklch(0.372 0.254 285.48 / 0.25);
+
+  /* Fonts */
+  --font-heading: "rigid-square", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Source Code Pro", ui-monospace, monospace;
+}
+
+/* ──────────────────────────────────────────────
+   Layer 2: Semantic Surface Tokens (theme-dependent)
+   ────────────────────────────────────────────── */
+:root {
+  --background: #F9F4FF;
+  --foreground: #141421;
+  --primary: var(--color-primary-600);
+  --primary-foreground: #ffffff;
+  --accent: var(--color-accent-300);
+  --accent-foreground: #141421;
+  --muted: var(--color-primary-100);
+  --muted-foreground: var(--color-neutral-500);
+  --surface: var(--color-primary-50);
+  --surface-foreground: #141421;
+  --edge: var(--color-primary-200);
+  --edge-hover: var(--color-primary-300);
+
+  --gradient-main: var(--gradient-main-base);
+
+  --duration-fast: 200ms;
+  --duration-normal: 500ms;
+  --duration-slow: 700ms;
+  --timing: ease-in-out;
+}
+
+.theme-dark {
+  --background: #141421;
+  --foreground: #F9F4FF;
+  --primary: var(--color-primary-400);
+  --primary-foreground: #ffffff;
+  --accent: var(--color-accent-300);
+  --accent-foreground: #141421;
+  --muted: var(--color-base-900);
+  --muted-foreground: var(--color-neutral-400);
+  --surface: var(--color-base-900);
+  --surface-foreground: #F9F4FF;
+  --edge: var(--color-base-800);
+  --edge-hover: var(--color-base-700);
+
+  --gradient-main: var(--gradient-main-dark);
+}
+
+/* ──────────────────────────────────────────────
+   Layer 3: Tailwind Bridge (semantic → utilities)
+   ────────────────────────────────────────────── */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-edge: var(--edge);
+  --color-edge-hover: var(--edge-hover);
+}
+
+/* ──────────────────────────────────────────────
+   Utilities: gradient border effects
+
+   Uses full background declarations per state to
+   avoid setting custom properties inside :hover
+   (Turbopack's CSS optimizer can't parse var()
+   in custom property assignments within nested
+   hover media queries).
+   ────────────────────────────────────────────── */
+.border-gradient-main {
+  border-color: transparent;
+  background:
+    linear-gradient(var(--color-primary-100), var(--color-primary-100)) padding-box,
+    var(--gradient-main) border-box;
+}
+.border-gradient-main:hover {
+  background:
+    linear-gradient(var(--color-primary-200), var(--color-primary-200)) padding-box,
+    var(--gradient-main) border-box;
+}
+.border-gradient-main:active {
+  background:
+    linear-gradient(var(--color-primary-300), var(--color-primary-300)) padding-box,
+    var(--gradient-main) border-box;
+}
+
+.gradient-fill-main {
+  background: var(--gradient-main) border-box;
+}
+.gradient-fill-main:hover {
+  background:
+    linear-gradient(oklch(1 0 0 / 0.1), oklch(1 0 0 / 0.1)) border-box,
+    var(--gradient-main) border-box;
+}
+.gradient-fill-main:active {
+  background:
+    linear-gradient(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.1)) border-box,
+    var(--gradient-main) border-box;
+}
+
+.gradient-fill-lime {
+  background: var(--gradient-lime) border-box;
+}
+.gradient-fill-lime:hover {
+  background:
+    linear-gradient(oklch(0 0 0 / 0.06), oklch(0 0 0 / 0.06)) border-box,
+    var(--gradient-lime) border-box;
+}
+.gradient-fill-lime:active {
+  background:
+    linear-gradient(oklch(0 0 0 / 0.12), oklch(0 0 0 / 0.12)) border-box,
+    var(--gradient-lime) border-box;
+}
+
+/* ── Card Noise (fx-grain) ─────────────────────────────── */
+
+.card-noise {
+  position: relative;
+  isolation: isolate;
+  background-image: radial-gradient(
+    50% 50%,
+    var(--color-primary-100) 0%,
+    oklch(from var(--color-primary-100) l c h / 0.57) 100%
+  );
+}
+
+.theme-dark .card-noise {
+  background-image: radial-gradient(
+    50% 50%,
+    var(--color-primary-950) 0%,
+    oklch(from var(--color-primary-950) l c h / 0.57) 100%
+  );
+}
+
+.card-noise::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDAwIiB3aWR0aD0iNDAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii4yNSIgdHlwZT0iZnJhY3RhbE5vaXNlIiBudW1PY3RhdmVzPSIzIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMSAwIDAgMCAwIDAgMCAwIDAgMCAwLjgwIDAgMCAwIDEwIC03LjI1Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2YpIi8+PC9zdmc+");
+  background-size: 400px 400px;
+  background-repeat: repeat;
+  opacity: 0.3;
+  pointer-events: none;
+}