altitude-design 0.2.1 → 0.3.1

package/dist/tokens.css

@@ -1,4 +1,4 @@
-:root, [data-theme="daylight"] {
+:root, [data-theme="daylight"], [data-theme="mesa"] {
   --surface-trench: #e1e4ea;
   --surface-well: #eaedf1;
   --surface-ground: #f3f4f7;
@@ -27,6 +27,28 @@
   --presence-2: #0b7285;
   --presence-3: #7046c9;
   --on-presence: #ffffff;
+  --data-1: #5d7bff;
+  --data-2: #e65000;
+  --data-3: #0498b9;
+  --data-4: #2a8f00;
+  --data-5: #643980;
+  --data-6: #c56f99;
+  --data-other: #31343c;
+  --data-context: #898a8e;
+  --data-seq-1: #e4ebff;
+  --data-seq-2: #c1cdef;
+  --data-seq-3: #a0b0de;
+  --data-seq-4: #8093cd;
+  --data-seq-5: #6176bb;
+  --data-seq-6: #4559a9;
+  --data-seq-7: #2b3c97;
+  --data-div-neg-3: #503000;
+  --data-div-neg-2: #966112;
+  --data-div-neg-1: #c6a178;
+  --data-div-mid: #e6e8ed;
+  --data-div-pos-1: #97a7d6;
+  --data-div-pos-2: #5569ad;
+  --data-div-pos-3: #1d2a84;
   --scrim: #12161f52;
   --trench: inset 0 1px 3px #0f17292e, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900;
   --well: inset 0 1px 2px #0f17291a, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900;
@@ -39,7 +61,7 @@
   --lip-top: inset 0 18px 18px -18px #0f17293d;
   --lip-bottom: inset 0 -18px 18px -18px #0f17293d;
 }
-[data-theme="nightfall"] {
+[data-theme="nightfall"], [data-theme="alpine"] {
   --surface-trench: #08090c;
   --surface-well: #0c0e12;
   --surface-ground: #121419;
@@ -68,88 +90,28 @@
   --presence-2: #3fc1d0;
   --presence-3: #b39dff;
   --on-presence: #0b0d12;
-  --scrim: #00000080;
-  --trench: inset 0 2px 4px #000000b3, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
-  --well: inset 0 1px 2px #00000099, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
-  --elev-0: inset 0 1px 0 #ffffff00, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
-  --elev-1: inset 0 1px 0 #ffffff12, 0 0 0 1px #ffffff0a, 0 1px 2px #00000080, 0 2px 6px -1px #00000052;
-  --elev-2: inset 0 1px 0 #ffffff17, 0 0 0 1px #ffffff0d, 0 2px 4px -1px #00000073, 0 10px 20px -6px #00000066;
-  --elev-3: inset 0 1px 0 #ffffff1c, 0 0 0 1px #ffffff0f, 0 4px 8px -2px #00000073, 0 18px 36px -10px #00000080;
-  --elev-4: inset 0 1px 0 #ffffff21, 0 0 0 1px #ffffff12, 0 8px 16px -4px #00000080, 0 30px 60px -16px #0000008c;
-  --elev-5: inset 0 1px 0 #ffffff26, 0 0 0 1px #ffffff14, 0 12px 24px -6px #0000008c, 0 48px 96px -24px #00000099;
-  --lip-top: inset 0 18px 18px -18px #000000cc;
-  --lip-bottom: inset 0 -18px 18px -18px #000000cc;
-}
-[data-theme="mesa"] {
-  --surface-trench: #e5ddd2;
-  --surface-well: #eee7dd;
-  --surface-ground: #f6f1ea;
-  --surface-raised: #fffcf8;
-  --surface-lifted: #fffdfa;
-  --surface-floating: #ffffff;
-  --surface-overlay: #ffffff;
-  --surface-modal: #ffffff;
-  --ink: #221b14;
-  --ink-muted: #62564a;
-  --ink-faint: #a09484;
-  --line: #e6ded3;
-  --line-control: #807467;
-  --accent: #b4441b;
-  --on-accent: #ffffff;
-  --accent-ink: #a63e17;
-  --accent-soft: #f8e4d9;
-  --positive: #2c6e3f;
-  --positive-soft: #e3efdc;
-  --caution: #8a5000;
-  --caution-soft: #fbeccf;
-  --critical: #b3261e;
-  --critical-soft: #f9e1dc;
-  --on-critical: #ffffff;
-  --presence-1: #a8256a;
-  --presence-2: #0b7285;
-  --presence-3: #6e44c2;
-  --on-presence: #ffffff;
-  --scrim: #221b144d;
-  --trench: inset 0 1px 3px #2a1a0c2e, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00;
-  --well: inset 0 1px 2px #2a1a0c1a, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00;
-  --elev-0: inset 0 1px 0 #ffffff00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00;
-  --elev-1: inset 0 1px 0 #ffffffb3, 0 0 0 1px #2a1a0c17, 0 1px 2px #2a1a0c12, 0 2px 4px -1px #2a1a0c0f;
-  --elev-2: inset 0 1px 0 #ffffffcc, 0 0 0 1px #2a1a0c12, 0 2px 4px -1px #2a1a0c14, 0 8px 16px -6px #2a1a0c24;
-  --elev-3: inset 0 1px 0 #ffffffe6, 0 0 0 1px #2a1a0c0f, 0 4px 8px -2px #2a1a0c14, 0 16px 32px -10px #2a1a0c33;
-  --elev-4: inset 0 1px 0 #ffffff, 0 0 0 1px #2a1a0c0d, 0 8px 16px -4px #2a1a0c17, 0 28px 56px -16px #2a1a0c3d;
-  --elev-5: inset 0 1px 0 #ffffff, 0 0 0 1px #2a1a0c0a, 0 12px 24px -6px #2a1a0c1a, 0 48px 96px -24px #2a1a0c4d;
-  --lip-top: inset 0 18px 18px -18px #2a1a0c3d;
-  --lip-bottom: inset 0 -18px 18px -18px #2a1a0c3d;
-}
-[data-theme="alpine"] {
-  --surface-trench: #060a09;
-  --surface-well: #0a0f0e;
-  --surface-ground: #0f1513;
-  --surface-raised: #151e1b;
-  --surface-lifted: #1a2522;
-  --surface-floating: #202c28;
-  --surface-overlay: #25332f;
-  --surface-modal: #2a3935;
-  --ink: #eaf3ef;
-  --ink-muted: #9db0a9;
-  --ink-faint: #5d6c67;
-  --line: #222c29;
-  --line-control: #62736d;
-  --accent: #5fd6b2;
-  --on-accent: #04140f;
-  --accent-ink: #6fdcbc;
-  --accent-soft: #13302a;
-  --positive: #8ed67a;
-  --positive-soft: #1a2e17;
-  --caution: #efbd5b;
-  --caution-soft: #2f2712;
-  --critical: #ff8a70;
-  --critical-soft: #3a1a14;
-  --on-critical: #1a0905;
-  --presence-1: #f07ab8;
-  --presence-2: #5cc8e0;
-  --presence-3: #b9a3ff;
-  --on-presence: #06100d;
+  --data-1: #455ee1;
+  --data-2: #989902;
+  --data-3: #983dbc;
+  --data-4: #ce3401;
+  --data-5: #0397d2;
+  --data-6: #227702;
+  --data-other: #676a73;
+  --data-context: #86888b;
+  --data-seq-1: #2d3242;
+  --data-seq-2: #404966;
+  --data-seq-3: #54618c;
+  --data-seq-4: #687ab3;
+  --data-seq-5: #7e94dc;
+  --data-seq-6: #97b0ff;
+  --data-seq-7: #bfd0ff;
+  --data-div-neg-3: #ffc580;
+  --data-div-neg-2: #c68e48;
+  --data-div-neg-1: #816038;
+  --data-div-mid: #36383c;
+  --data-div-pos-1: #576590;
+  --data-div-pos-2: #8097df;
+  --data-div-pos-3: #bfd0ff;
   --scrim: #00000080;
   --trench: inset 0 2px 4px #000000b3, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
   --well: inset 0 1px 2px #00000099, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
@@ -177,6 +139,14 @@
   --radius-lg: 14px;
   --radius-xl: 20px;
   --radius-full: 9999px;
+  --size-target-min: 24px;
+  --size-control-sm: 30px;
+  --size-control-md: 36px;
+  --size-field-sm: 34px;
+  --size-field-md: 40px;
+  --size-row-md: 32px;
+  --breakpoint-narrow: 480px;
+  --breakpoint-compact: 640px;
   --dur-press: 90ms;
   --dur-travel-1: 140ms;
   --dur-travel-2: 180ms;
@@ -184,11 +154,16 @@
   --dur-travel-4: 260ms;
   --dur-travel-5: 300ms;
   --dur-sweep: 1600ms;
+  --dur-breath: 4800ms;
+  --dur-wave: 1800ms;
   --dur-grace: 300ms;
   --dur-onset: 500ms;
   --dur-hold: 1000ms;
   --dur-hover: 1800ms;
+  --dur-linger: 2000ms;
   --dur-settle: 8000ms;
+  --dur-arrive: 1100ms;
+  --dur-plate: 600ms;
   --ease-rise: cubic-bezier(0.2, 0.9, 0.25, 1);
   --ease-sink: cubic-bezier(0.45, 0, 0.8, 0.35);
   --ease-settle: cubic-bezier(0.3, 1.3, 0.45, 1);
@@ -203,3 +178,28 @@
   --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
 }
+@media (pointer: coarse) {
+  :root {
+    --size-target-min: 44px;
+    --size-control-sm: 40px;
+    --size-control-md: 44px;
+    --size-field-sm: 44px;
+    --size-field-md: 48px;
+    --size-row-md: 44px;
+  }
+}
+[data-density="comfortable"] {
+  --size-target-min: 44px;
+  --size-control-sm: 40px;
+  --size-control-md: 44px;
+  --size-field-sm: 44px;
+  --size-field-md: 48px;
+  --size-row-md: 44px;
+}
+[data-density="compact"] {
+  --size-control-sm: 30px;
+  --size-control-md: 36px;
+  --size-field-sm: 34px;
+  --size-field-md: 40px;
+  --size-row-md: 32px;
+}