@amsterdamdatalabs/enact-extensions 0.1.0 → 0.1.3

package/web/assets/tokens/base.css

@@ -0,0 +1,45 @@
+/* Amsterdam Data Labs — minimal base element styles. */
+:root {
+  color-scheme: light;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-md);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background: var(--bg-canvas);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono);
+}
+
+a {
+  color: var(--text-link);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+::selection {
+  background: var(--adl-teal-100);
+  color: var(--adl-navy-900);
+}

package/web/assets/tokens/colors.css

@@ -0,0 +1,248 @@
+/* Amsterdam Data Labs — color tokens.
+   Primitives (--adl-*) come from the ADL W3C DTCG token source.
+   Product code should consume the SEMANTIC tokens (bottom of file). */
+
+:root {
+  /* ── Primitive ramps ───────────────────────────────────────── */
+
+  /* Teal — primary brand. Anchor 500 = #18949a */
+  --adl-teal-50:  #e6f4f5;
+  --adl-teal-100: #c0e3e5;
+  --adl-teal-200: #95d0d3;
+  --adl-teal-300: #66bcc0;
+  --adl-teal-400: #3aa9ae;
+  --adl-teal-500: #18949a;
+  --adl-teal-600: #147f84;
+  --adl-teal-700: #10696d;
+  --adl-teal-800: #0c5256;
+  --adl-teal-900: #073b3e;
+
+  /* Mint — secondary brand / success. Anchor 400 = #5acfb0 */
+  --adl-mint-50:  #e9f9f4;
+  --adl-mint-100: #cdf1e6;
+  --adl-mint-200: #a6e6d2;
+  --adl-mint-300: #7eddc1;
+  --adl-mint-400: #5acfb0;
+  --adl-mint-500: #3bb898;
+  --adl-mint-600: #2e9a7f;
+  --adl-mint-700: #237b66;
+  --adl-mint-800: #195d4d;
+  --adl-mint-900: #103f34;
+
+  /* Navy — cool ink / dark neutral. Anchors 600/700/900 */
+  --adl-navy-50:  #eef2f6;
+  --adl-navy-100: #d2dde7;
+  --adl-navy-200: #a8bccf;
+  --adl-navy-300: #7795b1;
+  --adl-navy-400: #4a6a8a;
+  --adl-navy-500: #2c4763;
+  --adl-navy-600: #1f3a5f;
+  --adl-navy-700: #1a2332;
+  --adl-navy-800: #0f2a44;
+  --adl-navy-900: #0a2840;
+  --adl-navy-950: #061726;
+
+  /* Blue — sky / bright blue. Anchors 200/400/500 */
+  --adl-blue-50:  #eaf3fc;
+  --adl-blue-100: #cfe6f9;
+  --adl-blue-200: #c5ddf2;
+  --adl-blue-300: #8ec6ee;
+  --adl-blue-400: #5dade2;
+  --adl-blue-500: #4fa0e3;
+  --adl-blue-600: #3a82c4;
+  --adl-blue-700: #2e679e;
+  --adl-blue-800: #234e78;
+  --adl-blue-900: #183753;
+
+  /* Indigo — periwinkle. Anchors 500/600 */
+  --adl-indigo-50:  #eef1fb;
+  --adl-indigo-100: #d6ddf5;
+  --adl-indigo-200: #b3c0ec;
+  --adl-indigo-300: #8fa3e2;
+  --adl-indigo-400: #7389db;
+  --adl-indigo-500: #5b7bd5;
+  --adl-indigo-600: #5b6bc0;
+  --adl-indigo-700: #48569c;
+  --adl-indigo-800: #384278;
+  --adl-indigo-900: #282f55;
+
+  /* Violet — accent. Anchor 500 = #6c5ce7 */
+  --adl-violet-50:  #efedfc;
+  --adl-violet-100: #d8d2f8;
+  --adl-violet-200: #bab0f2;
+  --adl-violet-300: #9b8eec;
+  --adl-violet-400: #8170e9;
+  --adl-violet-500: #6c5ce7;
+  --adl-violet-600: #5847c4;
+  --adl-violet-700: #46389c;
+  --adl-violet-800: #352b76;
+  --adl-violet-900: #251e52;
+
+  /* Cyan — highlight. Anchor 400 = #4dd0e1 */
+  --adl-cyan-50:  #e7fafc;
+  --adl-cyan-100: #c4f1f6;
+  --adl-cyan-200: #97e5ee;
+  --adl-cyan-300: #6cdae6;
+  --adl-cyan-400: #4dd0e1;
+  --adl-cyan-500: #2bb6c8;
+  --adl-cyan-600: #2194a3;
+  --adl-cyan-700: #19737f;
+  --adl-cyan-800: #12545d;
+  --adl-cyan-900: #0b373d;
+
+  /* Maroon — deep accent (estimated anchor 600) */
+  --adl-maroon-50:  #f7eaea;
+  --adl-maroon-100: #ecc9c9;
+  --adl-maroon-200: #dc9d9d;
+  --adl-maroon-300: #c96f6f;
+  --adl-maroon-400: #a84444;
+  --adl-maroon-500: #842b2b;
+  --adl-maroon-600: #6b2020;
+  --adl-maroon-700: #561a1a;
+  --adl-maroon-800: #411414;
+  --adl-maroon-900: #2d0e0e;
+
+  /* Red — error / danger. Anchors 300 (dark) / 500 (light) */
+  --adl-red-50:  #fcebe9;
+  --adl-red-100: #f6cac5;
+  --adl-red-200: #eea49b;
+  --adl-red-300: #e57373;
+  --adl-red-400: #d4564a;
+  --adl-red-500: #c0392b;
+  --adl-red-600: #a32d21;
+  --adl-red-700: #82241a;
+  --adl-red-800: #611b14;
+  --adl-red-900: #41120d;
+
+  /* Pink — soft tint. Anchor 200 = #f5c2c7 */
+  --adl-pink-50:  #fdf0f1;
+  --adl-pink-100: #fad9dc;
+  --adl-pink-200: #f5c2c7;
+  --adl-pink-300: #eda1a8;
+  --adl-pink-400: #e07c85;
+  --adl-pink-500: #cf5762;
+
+  /* Amber — warning (added default; no native ADL warning hue) */
+  --adl-amber-50:  #fdf6e8;
+  --adl-amber-100: #f9e6bf;
+  --adl-amber-200: #f2cf86;
+  --adl-amber-300: #e9b652;
+  --adl-amber-400: #e0a23b;
+  --adl-amber-500: #c8842a;
+  --adl-amber-600: #a4691f;
+  --adl-amber-700: #7e4f18;
+
+  /* Neutral — cool grays. Anchors 0/50/200 */
+  --adl-neutral-0:   #ffffff;
+  --adl-neutral-50:  #f7fbff;
+  --adl-neutral-100: #eef4fa;
+  --adl-neutral-200: #dde7f0;
+  --adl-neutral-300: #c2d2e0;
+  --adl-neutral-400: #9fb2c4;
+  --adl-neutral-500: #7388a0;
+  --adl-neutral-600: #51647a;
+  --adl-neutral-700: #374759;
+  --adl-neutral-800: #1f2c3a;
+  --adl-neutral-900: #0e1822;
+}
+
+/* ── Semantic tokens — LIGHT (default) ─────────────────────────
+   Consume these in product code; never the raw ramps. */
+:root {
+  --bg-canvas:  var(--adl-neutral-0);
+  --bg-subtle:  var(--adl-neutral-50);
+  --bg-muted:   var(--adl-neutral-200);
+  --bg-inverse: var(--adl-navy-900);
+
+  --surface-default: var(--adl-neutral-0);
+  --surface-raised:  var(--adl-neutral-50);
+  --surface-sunken:  var(--adl-neutral-100);
+
+  --text-primary:   var(--adl-navy-900);
+  --text-secondary: var(--adl-navy-600);
+  --text-muted:     var(--adl-neutral-500);
+  --text-inverse:   var(--adl-neutral-0);
+  --text-link:      var(--adl-teal-600);
+  --text-on-brand:  var(--adl-neutral-0);
+
+  --border-subtle:  var(--adl-neutral-200);
+  --border-default: var(--adl-neutral-300);
+  --border-strong:  var(--adl-neutral-400);
+  --border-focus:   var(--adl-teal-500);
+
+  --brand-primary:        var(--adl-teal-500);
+  --brand-primary-hover:  var(--adl-teal-600);
+  --brand-primary-active: var(--adl-teal-700);
+  --brand-primary-subtle: var(--adl-teal-50);
+  --brand-secondary:       var(--adl-mint-400);
+  --brand-secondary-hover: var(--adl-mint-500);
+  --brand-accent:     var(--adl-indigo-500);
+  --brand-accent-alt: var(--adl-violet-500);
+
+  --feedback-info:           var(--adl-blue-500);
+  --feedback-info-subtle:    var(--adl-blue-50);
+  --feedback-success:        var(--adl-mint-600);
+  --feedback-success-subtle: var(--adl-mint-50);
+  --feedback-warning:        var(--adl-amber-400);
+  --feedback-warning-subtle: var(--adl-amber-50);
+  --feedback-danger:         var(--adl-red-500);
+  --feedback-danger-subtle:  var(--adl-red-50);
+
+  /* Data-viz categorical order */
+  --chart-1: var(--adl-teal-500);
+  --chart-2: var(--adl-indigo-500);
+  --chart-3: var(--adl-cyan-400);
+  --chart-4: var(--adl-violet-500);
+  --chart-5: var(--adl-blue-500);
+  --chart-6: var(--adl-mint-400);
+}
+
+/* ── Semantic tokens — DARK ───────────────────────────────────
+   Apply data-theme="dark" on <html> or any subtree root. */
+[data-theme="dark"] {
+  --bg-canvas:  var(--adl-navy-950);
+  --bg-subtle:  var(--adl-navy-900);
+  --bg-muted:   var(--adl-navy-800);
+  --bg-inverse: var(--adl-neutral-50);
+
+  --surface-default: var(--adl-navy-900);
+  --surface-raised:  var(--adl-navy-800);
+  --surface-sunken:  var(--adl-navy-950);
+
+  --text-primary:   var(--adl-neutral-50);
+  --text-secondary: var(--adl-blue-200);
+  --text-muted:     var(--adl-navy-300);
+  --text-inverse:   var(--adl-navy-900);
+  --text-link:      var(--adl-blue-400);
+  --text-on-brand:  var(--adl-navy-900);
+
+  --border-subtle:  var(--adl-navy-800);
+  --border-default: var(--adl-navy-700);
+  --border-strong:  var(--adl-navy-600);
+  --border-focus:   var(--adl-mint-400);
+
+  --brand-primary:        var(--adl-mint-400);
+  --brand-primary-hover:  var(--adl-mint-300);
+  --brand-primary-active: var(--adl-mint-200);
+  --brand-primary-subtle: var(--adl-teal-900);
+  --brand-secondary:       var(--adl-blue-500);
+  --brand-secondary-hover: var(--adl-blue-400);
+  --brand-accent:     var(--adl-indigo-600);
+  --brand-accent-alt: var(--adl-cyan-400);
+
+  --feedback-info:           var(--adl-blue-400);
+  --feedback-info-subtle:    var(--adl-navy-800);
+  --feedback-success:        var(--adl-mint-400);
+  --feedback-success-subtle: var(--adl-teal-900);
+  --feedback-warning:        var(--adl-amber-300);
+  --feedback-warning-subtle: var(--adl-amber-700);
+  --feedback-danger:         var(--adl-red-300);
+  --feedback-danger-subtle:  var(--adl-red-900);
+
+  --chart-1: var(--adl-cyan-400);
+  --chart-2: var(--adl-indigo-400);
+  --chart-3: var(--adl-mint-400);
+  --chart-4: var(--adl-violet-400);
+  --chart-5: var(--adl-blue-400);
+  --chart-6: var(--adl-teal-300);
+}

package/web/assets/tokens/effects.css

@@ -0,0 +1,24 @@
+/* Amsterdam Data Labs — radii, shadows, motion. */
+:root {
+  /* Corner radii — crisp, technical; generous only on pills/avatars */
+  --radius-xs: 4px;   /* checkboxes, tags */
+  --radius-sm: 6px;   /* inputs, buttons */
+  --radius-md: 10px;  /* cards */
+  --radius-lg: 14px;  /* modals, feature panels */
+  --radius-xl: 20px;  /* hero media */
+  --radius-full: 999px; /* pills, avatars */
+
+  /* Shadows — cool navy-tinted, low spread. Elevation, not decoration. */
+  --shadow-xs: 0 1px 2px rgba(10, 40, 64, 0.06);
+  --shadow-sm: 0 1px 3px rgba(10, 40, 64, 0.08), 0 1px 2px rgba(10, 40, 64, 0.04);
+  --shadow-md: 0 4px 12px rgba(10, 40, 64, 0.10), 0 1px 3px rgba(10, 40, 64, 0.06);
+  --shadow-lg: 0 12px 32px rgba(10, 40, 64, 0.14), 0 2px 6px rgba(10, 40, 64, 0.06);
+  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--border-focus) 30%, transparent);
+
+  /* Motion — quick, understated. No bounces. */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
+  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
+  --duration-fast: 120ms; /* @kind other */
+  --duration-base: 180ms; /* @kind other */
+  --duration-slow: 320ms; /* @kind other */
+}

package/web/assets/tokens/fonts.css

@@ -0,0 +1,8 @@
+/* Amsterdam Data Labs — webfonts.
+   NOTE: No brand font binaries were provided. These are Google Fonts
+   substitutions chosen to match the geometric, technical wordmark:
+   - Space Grotesk  → display / headings (geometric grotesque, techy)
+   - Manrope        → body / UI text (clean, slightly geometric humanist)
+   - IBM Plex Mono  → code, data, numerals in tables
+   Replace with licensed brand fonts when available. */
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

package/web/assets/tokens/index.css

@@ -0,0 +1,18 @@
+/* Amsterdam Data Labs Design System — token entrypoint.
+   Link this single file from HTML to load the full ADL token set.
+
+   Import order:
+   1. fonts   — @import Google Fonts (must be first so the font faces are
+                available when other tokens reference --font-* vars)
+   2. colors  — primitive ramps (--adl-*) + semantic aliases
+                (--bg-*, --surface-*, --text-*, --border-*, --brand-*, etc.)
+   3. spacing — 4px-grid space scale, breakpoints, z-index layers
+   4. effects — radii, shadows, motion easing + duration
+   5. base    — element resets that consume the tokens above
+*/
+
+@import "./fonts.css";
+@import "./colors.css";
+@import "./spacing.css";
+@import "./effects.css";
+@import "./base.css";

package/web/assets/tokens/spacing.css

@@ -0,0 +1,50 @@
+/* Amsterdam Data Labs — spacing, breakpoints, z-index. 4px base grid. */
+:root {
+  --space-0:  0;
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1:  4px;
+  --space-1-5: 6px;
+  --space-2:  8px;
+  --space-2-5: 10px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-7:  28px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+  --space-40: 160px;
+  --space-48: 192px;
+
+  /* Breakpoints (min-width, mobile-first) — for reference in JS/media queries:
+     sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* Content widths */
+  --container-max: 1200px;
+  --container-narrow: 720px;
+
+  /* Z-index layers */
+  --z-hide: -1; /* @kind other */
+  --z-base: 0; /* @kind other */
+  --z-raised: 10; /* @kind other */
+  --z-dropdown: 1000; /* @kind other */
+  --z-sticky: 1100; /* @kind other */
+  --z-banner: 1200; /* @kind other */
+  --z-overlay: 1300; /* @kind other */
+  --z-modal: 1400; /* @kind other */
+  --z-popover: 1500; /* @kind other */
+  --z-toast: 1600; /* @kind other */
+  --z-tooltip: 1700; /* @kind other */
+}