@amsterdamdatalabs/enact-extensions 0.1.42 → 0.1.47

package/web/assets/tokens/colors.css

@@ -1,248 +0,0 @@
-/* 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

@@ -1,24 +0,0 @@
-/* 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

@@ -1,8 +0,0 @@
-/* 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

@@ -1,18 +0,0 @@
-/* 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

@@ -1,50 +0,0 @@
-/* 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 */
-}