kanto-ds 1.5.2 → 1.6.0

package/dist/tokens/colors.css

@@ -17,17 +17,23 @@
  * them their colour.
  */
 
-:root {
+/* The accent and the tint of the neutrals are inputs: set them on any
+   element — directly, through a data-accent preset (accents.css) or with
+   setAccent() — and the tokens below follow. Each falls back to Kanto's
+   violet. An element carrying data-accent re-declares the tokens, so an
+   accent set on a container themes that container. */
+:root,
+[data-accent] {
   color-scheme: dark;
 
   /* === BRAND === */
   --color-white: rgba(244, 244, 245, 1);
   /* Dark enough to carry white text at 4.5:1 in both themes — hover steps
      darker, not lighter, for the same reason. */
-  --color-primary-base: rgba(95, 93, 234, 1);
-  --color-primary-hover: rgba(88, 86, 224, 1);
-  --color-primary-soft: rgba(95, 93, 234, 0.12);
-  --color-secondary-hover: rgba(111, 116, 246, 0.16);
+  --color-primary-base: var(--accent-base, rgba(95, 93, 234, 1));
+  --color-primary-hover: var(--accent-hover, rgba(88, 86, 224, 1));
+  --color-primary-soft: color-mix(in srgb, var(--color-primary-base) 12%, transparent);
+  --color-secondary-hover: var(--accent-wash, rgba(111, 116, 246, 0.16));
 
   /* === SEMANTIC === */
   --color-danger-base: rgba(245, 61, 92, 1);
@@ -50,34 +56,73 @@
   --color-success-soft: rgba(53, 221, 131, 0.12);
 
   /* === TEXT STEPS OF THE BRAND AND SEMANTIC COLOURS === */
-  --color-primary-text: #8e97ff;
+  --color-primary-text: var(--accent-text-dark, #8e97ff);
   --color-danger-text: #ff727f;
   --color-info-text: #06b0fc;
   --color-warning-text: #fca80d;
   --color-success-text: #01df7e;
 
-  /* === TEXT (100 = highest contrast) === */
-  --color-text-100: rgba(244, 244, 245, 1);
+  /* === TEXT (100 = highest contrast) ===
+     Neutral, tinted by the accent: each step keeps its lightness and chroma
+     and sits at a fixed offset from --neutral-hue, so the default reproduces
+     the ramp Kanto shipped to within a tenth of an sRGB unit. */
+  --color-text-100: oklch(
+    0.9674 calc(0.0013 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.4)
+  );
   /* 4.5:1 on every surface up to --color-dark-24, and on the tinted alerts. */
-  --color-text-400: rgba(169, 169, 181, 1);
-  --color-text-500: rgba(101, 101, 114, 1);
-  --color-text-600: rgba(75, 75, 88, 1);
-  --color-text-700: rgba(66, 66, 77, 1);
-  --color-text-800: rgba(58, 58, 68, 1);
-  --color-text-900: rgba(39, 39, 42, 1);
+  --color-text-400: oklch(
+    0.7386 calc(0.0171 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8)
+  );
+  --color-text-500: oklch(
+    0.5113 calc(0.0204 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.7)
+  );
+  --color-text-600: oklch(
+    0.4178 calc(0.0215 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.4)
+  );
+  --color-text-700: oklch(
+    0.3833 calc(0.0186 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.5)
+  );
+  --color-text-800: oklch(
+    0.3524 calc(0.0172 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.5)
+  );
+  --color-text-900: oklch(
+    0.2739 calc(0.0055 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8)
+  );
 
   /* === SURFACES (low → high elevation) === */
-  --color-dark-8: rgba(19, 18, 22, 1);
-  --color-dark-12: rgba(29, 28, 34, 1);
-  --color-dark-14: rgba(34, 33, 39, 1);
-  --color-dark-15: rgba(36, 35, 41, 1);
-  --color-dark-16: rgba(38, 37, 44, 1);
-  --color-dark-18: rgba(43, 42, 50, 1);
-  --color-dark-19: rgba(45, 44, 53, 1);
-  --color-dark-20: rgba(48, 46, 56, 1);
-  --color-dark-22: rgba(53, 51, 61, 1);
-  --color-dark-23: rgba(55, 53, 64, 1);
-  --color-dark-24: rgba(58, 56, 67, 1);
+  --color-dark-8: oklch(
+    0.1852 calc(0.0082 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 19)
+  );
+  --color-dark-12: oklch(
+    0.2302 calc(0.0115 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 15.1)
+  );
+  --color-dark-14: oklch(
+    0.2514 calc(0.0113 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 15.2)
+  );
+  --color-dark-15: oklch(
+    0.2597 calc(0.0112 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 15.3)
+  );
+  --color-dark-16: oklch(
+    0.2685 calc(0.0129 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 14.1)
+  );
+  --color-dark-18: oklch(
+    0.2894 calc(0.0145 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 13.2)
+  );
+  --color-dark-19: oklch(
+    0.2979 calc(0.0162 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 12.5)
+  );
+  --color-dark-20: oklch(
+    0.3074 calc(0.018 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 16.5)
+  );
+  --color-dark-22: oklch(
+    0.3271 calc(0.0177 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 16.6)
+  );
+  --color-dark-23: oklch(
+    0.3354 calc(0.0193 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 15.7)
+  );
+  --color-dark-24: oklch(
+    0.3471 calc(0.0191 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 15.7)
+  );
 
   /* === NAVIGATION === */
   --color-navigation-top-icon: #f4f4f5;
@@ -137,6 +182,14 @@
   /* Deliberately opposite the page, for anything that must read as floating
      above it — the tooltip. */
   --surface-inverted: var(--color-dark-8);
+
+  /* What floats over the page — a list, a calendar, a menu. In the dark the
+     ramp sets it apart on its own: a lighter surface, no edge, no shadow. */
+  --surface-popover: var(--color-dark-20);
+  --border-popover: transparent;
+  --shadow-popover: none;
+  /* Lines inside a popover: --border-subtle is the popover's own colour here. */
+  --divider-popover: var(--color-dark-24);
   --text-inverted: var(--color-text-100);
   --text-body: var(--color-text-100);
   --text-muted: var(--color-text-400);

package/dist/tokens/index.css

@@ -7,6 +7,8 @@
 
 @import './colors.css';
 @import './theme-light.css';
+@import './accents.css';
 @import './typography.css';
 @import './spacing.css';
 @import './responsive.css';
+@import './appearance.css';

package/dist/tokens/responsive.css

@@ -8,62 +8,116 @@
 
 /* === MOBILE (< 600px) === */
 @media (max-width: 599px) {
-  :root {
-    --font-title-studio: 400 36px/44px var(--font-family-display);
-    --font-title-h1: 600 30px/36px var(--font-family-display);
-    --font-title-h4: 400 22px/28px var(--font-family-display);
-    --font-title-h6: 600 18px/22px var(--font-family-display);
-    --font-normal-regular: 400 12px/18px var(--font-family-body);
-    --font-normal-medium: 500 12px/18px var(--font-family-body);
-    --font-normal-small: 400 10px/14px var(--font-family-body);
+  :root,
+  [data-radius],
+  [data-density],
+  [data-text-size],
+  [data-font] {
+    --font-title-studio: 400 calc(36px * var(--text-scale, 1)) / calc(44px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h1: 600 calc(30px * var(--text-scale, 1)) / calc(36px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h4: 400 calc(22px * var(--text-scale, 1)) / calc(28px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h6: 600 calc(18px * var(--text-scale, 1)) / calc(22px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-normal-regular: 400 calc(12px * var(--text-scale, 1)) / calc(18px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-normal-medium: 500 calc(12px * var(--text-scale, 1)) / calc(18px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-normal-small: 400 calc(10px * var(--text-scale, 1)) / calc(14px * var(--text-scale, 1))
+      var(--font-family-body);
     /* 16px keeps iOS Safari from zooming on focus. */
-    --font-input: 400 16px/1.4 var(--font-family-body);
-    --font-code-regular: 400 12px/16px var(--font-family-code);
-
-    --padding-card: 16px;
-    --padding-modal: 16px;
-    --padding-input: 8px 0;
-    --padding-form: 12px;
-    --button-padding-x: 12px;
-
-    --gap-card: 14px;
-    --gap-modal: 14px;
-    --gap-element: 4px;
-    --gap-form: 12px;
-    --gap-button: 8px;
-
-    --button-height-small: 30px;
-    --button-height: 36px;
-    --button-height-large: 42px;
+    --font-input: 400 calc(16px * var(--text-scale, 1))/1.4 var(--font-family-body);
+    --font-code-regular: 400 calc(12px * var(--text-scale, 1)) / calc(16px * var(--text-scale, 1))
+      var(--font-family-code);
+
+    --padding-card: calc(16px * var(--density-scale, 1));
+    --padding-modal: calc(16px * var(--density-scale, 1));
+    --padding-input: calc(8px * var(--density-scale, 1)) 0;
+    --padding-form: calc(12px * var(--density-scale, 1));
+    --button-padding-x: calc(12px * var(--density-scale, 1));
+
+    --gap-card: calc(14px * var(--density-scale, 1));
+    --gap-modal: calc(14px * var(--density-scale, 1));
+    --gap-element: calc(4px * var(--density-scale, 1));
+    --gap-form: calc(12px * var(--density-scale, 1));
+    --gap-button: calc(8px * var(--density-scale, 1));
+
+    --button-height-small: calc(30px * var(--density-scale, 1));
+    --button-height: calc(36px * var(--density-scale, 1));
+    --button-height-large: calc(42px * var(--density-scale, 1));
+  }
+
+  /* Heights land on even pixels, so text centres on whole ones. CSS rounding
+     is newer than the rest of Kanto's CSS: behind @supports, an older
+     browser keeps the unrounded height rather than losing it. */
+  @supports (width: round(nearest, 1px, 1px)) {
+    :root,
+    [data-radius],
+    [data-density],
+    [data-text-size],
+    [data-font] {
+      --button-height-small: round(nearest, calc(30px * var(--density-scale, 1)), 2px);
+      --button-height: round(nearest, calc(36px * var(--density-scale, 1)), 2px);
+      --button-height-large: round(nearest, calc(42px * var(--density-scale, 1)), 2px);
+    }
   }
 }
 
 /* === TABLET (600px – 1023px) === */
 @media (min-width: 600px) and (max-width: 1023px) {
-  :root {
-    --font-title-studio: 400 44px/52px var(--font-family-display);
-    --font-title-h1: 600 36px/42px var(--font-family-display);
-    --font-title-h4: 400 26px/32px var(--font-family-display);
-    --font-title-h6: 600 20px/24px var(--font-family-display);
-    --font-normal-regular: 400 14px/18px var(--font-family-body);
-    --font-normal-medium: 500 14px/18px var(--font-family-body);
-    --font-normal-small: 400 12px/16px var(--font-family-body);
-    --font-code-regular: 400 14px/18px var(--font-family-code);
-
-    --padding-card: 20px;
-    --padding-modal: 20px;
-    --padding-input: 10px 0;
-    --padding-form: 16px;
-
-    --gap-card: 18px;
-    --gap-modal: 18px;
-    --gap-element: 4px;
-    --gap-form: 14px;
-    --gap-button: 10px;
-
-    --button-height-small: 32px;
-    --button-height: 40px;
-    --button-height-large: 46px;
+  :root,
+  [data-radius],
+  [data-density],
+  [data-text-size],
+  [data-font] {
+    --font-title-studio: 400 calc(44px * var(--text-scale, 1)) / calc(52px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h1: 600 calc(36px * var(--text-scale, 1)) / calc(42px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h4: 400 calc(26px * var(--text-scale, 1)) / calc(32px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h6: 600 calc(20px * var(--text-scale, 1)) / calc(24px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-normal-regular: 400 calc(14px * var(--text-scale, 1)) / calc(18px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-normal-medium: 500 calc(14px * var(--text-scale, 1)) / calc(18px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-normal-small: 400 calc(12px * var(--text-scale, 1)) / calc(16px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-code-regular: 400 calc(14px * var(--text-scale, 1)) / calc(18px * var(--text-scale, 1))
+      var(--font-family-code);
+
+    --padding-card: calc(20px * var(--density-scale, 1));
+    --padding-modal: calc(20px * var(--density-scale, 1));
+    --padding-input: calc(10px * var(--density-scale, 1)) 0;
+    --padding-form: calc(16px * var(--density-scale, 1));
+
+    --gap-card: calc(18px * var(--density-scale, 1));
+    --gap-modal: calc(18px * var(--density-scale, 1));
+    --gap-element: calc(4px * var(--density-scale, 1));
+    --gap-form: calc(14px * var(--density-scale, 1));
+    --gap-button: calc(10px * var(--density-scale, 1));
+
+    --button-height-small: calc(32px * var(--density-scale, 1));
+    --button-height: calc(40px * var(--density-scale, 1));
+    --button-height-large: calc(46px * var(--density-scale, 1));
+  }
+
+  /* Heights land on even pixels, so text centres on whole ones. CSS rounding
+     is newer than the rest of Kanto's CSS: behind @supports, an older
+     browser keeps the unrounded height rather than losing it. */
+  @supports (width: round(nearest, 1px, 1px)) {
+    :root,
+    [data-radius],
+    [data-density],
+    [data-text-size],
+    [data-font] {
+      --button-height-small: round(nearest, calc(32px * var(--density-scale, 1)), 2px);
+      --button-height: round(nearest, calc(40px * var(--density-scale, 1)), 2px);
+      --button-height-large: round(nearest, calc(46px * var(--density-scale, 1)), 2px);
+    }
   }
 }
 
@@ -71,36 +125,67 @@
    Kanto ships on trading-desk and NOC displays; at 21:9 the desktop scale
    reads as tiny rather than dense. */
 @media (min-aspect-ratio: 21/9) {
-  :root {
-    --font-title-studio: 400 72px/84px var(--font-family-display);
-    --font-title-h1: 600 56px/64px var(--font-family-display);
-    --font-title-h4: 400 36px/44px var(--font-family-display);
-    --font-title-h6: 600 28px/34px var(--font-family-display);
-    --font-normal-regular: 400 16px/22px var(--font-family-body);
-    --font-normal-medium: 500 16px/22px var(--font-family-body);
-    --font-normal-small: 400 14px/18px var(--font-family-body);
-    --font-code-regular: 400 16px/22px var(--font-family-code);
-
-    --padding-card: 36px;
-    --padding-modal: 36px;
-    --padding-input: 16px 0;
-    --padding-form: 24px;
-
-    --gap-card: 32px;
-    --gap-modal: 32px;
-    --gap-element: 6px;
-    --gap-form: 20px;
-    --gap-button: 16px;
-
-    --button-height-small: 40px;
-    --button-height: 52px;
-    --button-height-large: 60px;
+  :root,
+  [data-radius],
+  [data-density],
+  [data-text-size],
+  [data-font] {
+    --font-title-studio: 400 calc(72px * var(--text-scale, 1)) / calc(84px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h1: 600 calc(56px * var(--text-scale, 1)) / calc(64px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h4: 400 calc(36px * var(--text-scale, 1)) / calc(44px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-title-h6: 600 calc(28px * var(--text-scale, 1)) / calc(34px * var(--text-scale, 1))
+      var(--font-family-display);
+    --font-normal-regular: 400 calc(16px * var(--text-scale, 1)) / calc(22px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-normal-medium: 500 calc(16px * var(--text-scale, 1)) / calc(22px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-normal-small: 400 calc(14px * var(--text-scale, 1)) / calc(18px * var(--text-scale, 1))
+      var(--font-family-body);
+    --font-code-regular: 400 calc(16px * var(--text-scale, 1)) / calc(22px * var(--text-scale, 1))
+      var(--font-family-code);
+
+    --padding-card: calc(36px * var(--density-scale, 1));
+    --padding-modal: calc(36px * var(--density-scale, 1));
+    --padding-input: calc(16px * var(--density-scale, 1)) 0;
+    --padding-form: calc(24px * var(--density-scale, 1));
+
+    --gap-card: calc(32px * var(--density-scale, 1));
+    --gap-modal: calc(32px * var(--density-scale, 1));
+    --gap-element: calc(6px * var(--density-scale, 1));
+    --gap-form: calc(20px * var(--density-scale, 1));
+    --gap-button: calc(16px * var(--density-scale, 1));
+
+    --button-height-small: calc(40px * var(--density-scale, 1));
+    --button-height: calc(52px * var(--density-scale, 1));
+    --button-height-large: calc(60px * var(--density-scale, 1));
+  }
+
+  /* Heights land on even pixels, so text centres on whole ones. CSS rounding
+     is newer than the rest of Kanto's CSS: behind @supports, an older
+     browser keeps the unrounded height rather than losing it. */
+  @supports (width: round(nearest, 1px, 1px)) {
+    :root,
+    [data-radius],
+    [data-density],
+    [data-text-size],
+    [data-font] {
+      --button-height-small: round(nearest, calc(40px * var(--density-scale, 1)), 2px);
+      --button-height: round(nearest, calc(52px * var(--density-scale, 1)), 2px);
+      --button-height-large: round(nearest, calc(60px * var(--density-scale, 1)), 2px);
+    }
   }
 }
 
 /* === REDUCED MOTION === */
 @media (prefers-reduced-motion: reduce) {
-  :root {
+  :root,
+  [data-radius],
+  [data-density],
+  [data-text-size],
+  [data-font] {
     --duration-instant: 0s;
     --duration-fast: 0s;
     --duration-normal: 0s;

package/dist/tokens/spacing.css

@@ -3,43 +3,47 @@
  * overrides live in `responsive.css`.
  */
 
-:root {
+:root,
+[data-radius],
+[data-density],
+[data-text-size],
+[data-font] {
   /* === RADIUS === */
-  --border-radius: 8px; /* inputs, buttons, square chips */
-  --border-radius-card: 12px;
-  --radius-input: 8px;
-  --radius-modal: 12px;
-  --radius-sub-menu: 2px;
+  --border-radius: calc(8px * var(--radius-scale, 1)); /* inputs, buttons, square chips */
+  --border-radius-card: calc(12px * var(--radius-scale, 1));
+  --radius-input: calc(8px * var(--radius-scale, 1));
+  --radius-modal: calc(12px * var(--radius-scale, 1));
+  --radius-sub-menu: calc(2px * var(--radius-scale, 1));
   --radius-pill: 20px; /* tag chips */
   --radius-full: 9999px; /* toggle track and thumb */
 
   /* === PADDING === */
-  --padding-card: 24px;
-  --padding-modal: 24px;
-  --padding-input: 8px 0;
-  --padding-form: 16px;
-  --padding-sub-menu: 12px 24px;
-  --padding-sub-menu-item: 8px 16px;
-  --padding-expand: 8px;
-  --padding-expand-item: 8px 16px;
-  --padding-drag-drop: 16px 24px;
-  --padding-chip: 4px 12px;
-  --text-area-padding: 10px 16px;
+  --padding-card: calc(24px * var(--density-scale, 1));
+  --padding-modal: calc(24px * var(--density-scale, 1));
+  --padding-input: calc(8px * var(--density-scale, 1)) 0;
+  --padding-form: calc(16px * var(--density-scale, 1));
+  --padding-sub-menu: calc(12px * var(--density-scale, 1)) calc(24px * var(--density-scale, 1));
+  --padding-sub-menu-item: calc(8px * var(--density-scale, 1)) calc(16px * var(--density-scale, 1));
+  --padding-expand: calc(8px * var(--density-scale, 1));
+  --padding-expand-item: calc(8px * var(--density-scale, 1)) calc(16px * var(--density-scale, 1));
+  --padding-drag-drop: calc(16px * var(--density-scale, 1)) calc(24px * var(--density-scale, 1));
+  --padding-chip: calc(4px * var(--density-scale, 1)) calc(12px * var(--density-scale, 1));
+  --text-area-padding: calc(10px * var(--density-scale, 1)) calc(16px * var(--density-scale, 1));
 
   /* === GAP === */
-  --gap-element: 4px;
-  --gap-button: 8px;
-  --gap-drag-drop: 12px;
-  --gap-form: 16px;
-  --gap-card: 20px;
-  --gap-modal: 20px;
-  --gap-sub-menu: 24px;
+  --gap-element: calc(4px * var(--density-scale, 1));
+  --gap-button: calc(8px * var(--density-scale, 1));
+  --gap-drag-drop: calc(12px * var(--density-scale, 1));
+  --gap-form: calc(16px * var(--density-scale, 1));
+  --gap-card: calc(20px * var(--density-scale, 1));
+  --gap-modal: calc(20px * var(--density-scale, 1));
+  --gap-sub-menu: calc(24px * var(--density-scale, 1));
 
   /* === DIMENSIONS === */
-  --button-height-small: 32px;
-  --button-height: 40px;
-  --button-height-large: 48px;
-  --button-padding-x: 16px;
+  --button-height-small: calc(32px * var(--density-scale, 1));
+  --button-height: calc(40px * var(--density-scale, 1));
+  --button-height-large: calc(48px * var(--density-scale, 1));
+  --button-padding-x: calc(16px * var(--density-scale, 1));
 
   /* === BORDERS === */
   --border-width: 1px;
@@ -65,3 +69,18 @@
   --z-modal: 400;
   --z-toast: 500;
 }
+
+/* Heights land on even pixels, so text centres on whole ones. CSS rounding
+   is newer than the rest of Kanto's CSS: behind @supports, an older
+   browser keeps the unrounded height rather than losing it. */
+@supports (width: round(nearest, 1px, 1px)) {
+  :root,
+  [data-radius],
+  [data-density],
+  [data-text-size],
+  [data-font] {
+    --button-height-small: round(nearest, calc(32px * var(--density-scale, 1)), 2px);
+    --button-height: round(nearest, calc(40px * var(--density-scale, 1)), 2px);
+    --button-height-large: round(nearest, calc(48px * var(--density-scale, 1)), 2px);
+  }
+}