kanto-ds 1.0.0

package/dist/tokens/README.md

@@ -0,0 +1,63 @@
+# Token layer
+
+Every visual decision in Kanto resolves to a CSS custom property declared on
+`:root`. Components never hard-code a colour, a size or a duration.
+
+Custom properties inherit _through_ shadow roots, which is what makes this work
+for web components: an app can restyle every Kanto element by redefining a
+token on `:root`, without piercing a single shadow boundary.
+
+## Files
+
+| File              | Contents                                       | Optional |
+| ----------------- | ---------------------------------------------- | -------- |
+| `colors.css`      | Dark palette, surfaces, text ramp, aliases     | no       |
+| `theme-light.css` | Light remap of the same names                  | no       |
+| `typography.css`  | Families and composite `font` shorthands       | no       |
+| `spacing.css`     | Radius, padding, gap, dimensions, motion, `z`  | no       |
+| `responsive.css`  | Breakpoint overrides + reduced-motion          | no       |
+| `fonts.css`       | `@font-face` for Manrope / Mulish / SCP        | yes      |
+| `base.css`        | Global element styles for the host application | yes      |
+| `index.css`       | Imports the five non-optional files            | —        |
+
+## Usage
+
+```js
+import 'kanto-ds/styles.css'; // fonts + tokens + base
+```
+
+or, to keep Kanto out of the host's global styles:
+
+```js
+import 'kanto-ds/tokens/index.css'; // variables only
+```
+
+## Theming
+
+Dark is the canonical theme and is what `:root` carries.
+
+```html
+<html data-theme="light">
+  <!-- forced light -->
+  <html data-theme="auto">
+    <!-- follows the OS -->
+  </html>
+</html>
+```
+
+## Conventions
+
+- **Surfaces are a ramp, not a shadow scale.** Elevation means a lighter
+  surface: `--color-dark-12` (page) → `--color-dark-16` (card) →
+  `--color-dark-20` (raised). The only shadow in the system is on toasts.
+- **Semantic colours come in three variants.** `-base` is opaque, for text and
+  solid fills; `-soft` is the same hue at 12% alpha, for tinted backgrounds;
+  `-hover` is 16%.
+- **Prefer the aliases.** `--surface-card` over `--color-dark-16`,
+  `--text-muted` over `--color-text-400`. The aliases survive a change to which
+  ramp step a role uses.
+- **Type is applied whole.** `font: var(--font-normal-medium)` sets weight, size,
+  line height and family in one declaration; there is no `--font-size-*` scale
+  to get half-applied.
+- **Inputs take an outline, never a border.** A border would reflow the field on
+  focus; `--outline-width` sits outside the box.

package/dist/tokens/base.css

@@ -0,0 +1,79 @@
+/**
+ * Global element styles.
+ *
+ * Optional. Custom elements style themselves inside their shadow roots, so
+ * Kanto components render correctly without this file; it exists so the
+ * *application's own* markup (headings, links, page background) matches.
+ * Import `kanto-ds/tokens/index.css` instead if you only want the variables.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* The system's signature: everything cross-fades on theme change and hover,
+   fast enough to read as instant. Honours prefers-reduced-motion through
+   --duration-instant. */
+*,
+*::before,
+*::after {
+  transition:
+    background-color var(--duration-instant),
+    color var(--duration-instant);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--surface-page);
+  color: var(--text-body);
+  font: var(--font-normal-regular);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h4,
+h6,
+p,
+a {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h4,
+h6 {
+  color: var(--text-muted);
+}
+
+h1 {
+  font: var(--font-title-h1);
+}
+h4 {
+  font: var(--font-title-h4);
+}
+h6 {
+  font: var(--font-title-h6);
+}
+
+a {
+  color: var(--color-primary-base);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+code,
+pre {
+  font: var(--font-code-regular);
+}
+
+/* Keyboard focus is always visible; pointer focus is not. */
+:focus-visible {
+  outline: var(--outline-width) solid var(--color-primary-base);
+  outline-offset: 2px;
+}

package/dist/tokens/colors.css

@@ -0,0 +1,125 @@
+/**
+ * Kanto colour tokens.
+ *
+ * Dark is what `:root` carries, so a page that sets nothing gets it. Light
+ * remaps the same names, so neither theme costs a component any CSS.
+ *
+ * Surfaces are an eleven-step ramp (`--color-dark-8` … `--color-dark-24`)
+ * rather than a shadow scale — in Kanto, elevation means "slightly lighter
+ * surface". Semantic colours each ship three variants: `-base` (opaque, for
+ * text and solid fills), `-soft` (12% alpha, for tinted backgrounds) and
+ * `-hover` (16% alpha).
+ */
+
+:root {
+  color-scheme: dark;
+
+  /* === BRAND === */
+  --color-white: rgba(244, 244, 245, 1);
+  --color-primary-base: rgba(101, 98, 248, 1);
+  --color-primary-hover: rgba(111, 109, 248, 1);
+  --color-primary-soft: rgba(101, 98, 248, 0.12);
+  --color-secondary-hover: rgba(111, 116, 246, 0.16);
+
+  /* === SEMANTIC === */
+  --color-danger-base: rgba(245, 61, 92, 1);
+  --color-danger-hover: rgba(243, 73, 107, 0.16);
+  --color-danger-soft: rgba(245, 61, 92, 0.12);
+
+  --color-info-base: rgba(53, 175, 243, 1);
+  --color-info-hover: rgba(53, 175, 243, 0.16);
+  --color-info-soft: rgba(53, 175, 243, 0.12);
+
+  --color-warning-base: rgba(245, 171, 61, 1);
+  --color-warning-hover: rgba(245, 171, 61, 0.16);
+  --color-warning-soft: rgba(245, 171, 61, 0.12);
+
+  --color-success-base: rgba(53, 221, 131, 1);
+  --color-success-hover: rgba(53, 221, 131, 0.16);
+  --color-success-soft: rgba(53, 221, 131, 0.12);
+
+  /* === TEXT (100 = highest contrast) === */
+  --color-text-100: rgba(244, 244, 245, 1);
+  --color-text-400: rgba(145, 145, 161, 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);
+
+  /* === 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);
+
+  /* === NAVIGATION === */
+  --color-navigation-top-icon: #f4f4f5;
+  --color-navigation-icon: #656572;
+  --color-navigation-icon-close: #ec2d3a;
+
+  /* === OVERLAY === */
+  --color-overlay: rgba(145, 145, 161, 1);
+  --color-backdrop: rgba(0, 0, 0, 0.45);
+
+  /* === SEMANTIC ALIASES ===
+     Prefer these in application code: they survive a change to the
+     underlying ramp step. */
+  --surface-page: var(--color-dark-12);
+  --surface-card: var(--color-dark-16);
+  --surface-raised: var(--color-dark-20);
+  --surface-hover: var(--color-dark-22);
+  --border-subtle: var(--color-dark-20);
+
+  /* === CHART ===
+     A categorical order, fixed and never cycled, kept clear of the semantic
+     colours so a series can never be mistaken for a status. Validated against
+     the card surface in both themes: worst adjacent CVD ΔE 8.4, normal-vision
+     ΔE 19.3, every slot at least 3:1 here.
+
+     A single-series chart uses --color-primary-base instead: with one series
+     there is no identity to encode, and the title names it. */
+  --chart-series-1: #3987e5;
+  --chart-series-2: #d95926;
+  --chart-series-3: #199e70;
+  --chart-series-4: #c98500;
+  --chart-series-5: #d55181;
+  --chart-series-6: #008300;
+  --chart-series-7: #9085e9;
+  --chart-series-8: #e66767;
+
+  --chart-grid: var(--color-dark-20);
+  --chart-axis: var(--color-text-500);
+
+  /* A field's hairline. Deliberately stronger than --border-subtle: a panel
+     divider only has to separate two areas of the same surface, while a field
+     has to read as a field on the page, on a card and inside a modal — three
+     different backgrounds, one of which it very nearly matches. */
+  --border-field: var(--color-text-700);
+
+  /* A form panel sits one step above the page so its fields, which are
+     filled at --color-dark-12, read as wells recessed into it. */
+  --surface-form: var(--color-dark-16);
+  --surface-field: var(--color-dark-12);
+
+  /* Recessed surface for code. Not a ramp step: the ramp inverts between
+     themes and "the darkest surface" stops meaning "recessed" in light. */
+  --surface-code: var(--color-dark-8);
+  --text-code: var(--color-text-100);
+  --border-code: var(--color-dark-16);
+
+  /* Deliberately opposite the page, for anything that must read as floating
+     above it — the tooltip. */
+  --surface-inverted: var(--color-dark-8);
+  --text-inverted: var(--color-text-100);
+  --text-body: var(--color-text-100);
+  --text-muted: var(--color-text-400);
+  --text-disabled: var(--color-text-700);
+}

package/dist/tokens/fonts.css

@@ -0,0 +1,136 @@
+/**
+ * @font-face declarations for the Kanto families.
+ *
+ * All three are SIL Open Font License 1.1, so they ship with the package. The
+ * display and body faces are variable fonts split into Latin and Cyrillic
+ * subsets: a page only downloads the subsets its text actually uses.
+ *
+ * Optional: `typography.css` ships fallback stacks, so an app that prefers
+ * its own faces can skip this file entirely.
+ *
+ * See `../assets/fonts/README.md` for the licence terms.
+ */
+
+/* === MANROPE — display / titles === */
+@font-face {
+  font-family: 'Manrope';
+  src: url('../assets/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2') format('woff2');
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: 'Manrope';
+  src: url('../assets/fonts/manrope/manrope-cyrillic-wght-normal.woff2') format('woff2');
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: 'Manrope';
+  src: url('../assets/fonts/manrope/manrope-latin-ext-wght-normal.woff2') format('woff2');
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Manrope';
+  src: url('../assets/fonts/manrope/manrope-latin-wght-normal.woff2') format('woff2');
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* === MULISH — body / UI === */
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-cyrillic-ext-wght-normal.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-cyrillic-wght-normal.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-latin-ext-wght-normal.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-latin-wght-normal.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-cyrillic-ext-wght-italic.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: italic;
+  font-display: swap;
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-cyrillic-wght-italic.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: italic;
+  font-display: swap;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-latin-ext-wght-italic.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: italic;
+  font-display: swap;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Mulish';
+  src: url('../assets/fonts/mulish/mulish-latin-wght-italic.woff2') format('woff2');
+  font-weight: 200 1000;
+  font-style: italic;
+  font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* === SOURCE CODE PRO — code === */
+@font-face {
+  font-family: 'Source Code Pro';
+  src: url('../assets/fonts/source_code_pro/SourceCodePro-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/tokens/index.css

@@ -0,0 +1,12 @@
+/**
+ * Token layer only — custom properties, no global element styles.
+ *
+ * Use this when Kanto has to coexist with another design system's resets.
+ * Webfonts (`fonts.css`) and page-level styles (`base.css`) are opt-in.
+ */
+
+@import './colors.css';
+@import './theme-light.css';
+@import './typography.css';
+@import './spacing.css';
+@import './responsive.css';

package/dist/tokens/responsive.css

@@ -0,0 +1,108 @@
+/**
+ * Responsive overrides for the type and spacing scales.
+ *
+ * Kanto rescales by redefining tokens rather than by writing breakpoints in
+ * every component, so a component's CSS stays breakpoint-free and a new
+ * breakpoint is added in exactly one place.
+ */
+
+/* === 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);
+    /* 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;
+  }
+}
+
+/* === 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;
+  }
+}
+
+/* === ULTRA-WIDE (21:9 and wider) ===
+   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;
+  }
+}
+
+/* === REDUCED MOTION === */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0s;
+    --duration-fast: 0s;
+    --duration-normal: 0s;
+  }
+}

package/dist/tokens/spacing.css

@@ -0,0 +1,66 @@
+/**
+ * Kanto spacing, radius and dimension tokens (desktop scale). Responsive
+ * overrides live in `responsive.css`.
+ */
+
+:root {
+  /* === RADIUS === */
+  --border-radius: 8px; /* inputs, buttons, square chips */
+  --border-radius-card: 12px;
+  --radius-input: 8px;
+  --radius-modal: 12px;
+  --radius-sub-menu: 2px;
+  --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;
+
+  /* === GAP === */
+  --gap-element: 4px;
+  --gap-button: 8px;
+  --gap-drag-drop: 12px;
+  --gap-form: 16px;
+  --gap-card: 20px;
+  --gap-modal: 20px;
+  --gap-sub-menu: 24px;
+
+  /* === DIMENSIONS === */
+  --button-height-small: 32px;
+  --button-height: 40px;
+  --button-height-large: 48px;
+  --button-padding-x: 16px;
+
+  /* === BORDERS === */
+  --border-width: 1px;
+  --outline-width: 2px; /* inputs gain an outline, never a border, on focus */
+
+  /* === MOTION ===
+     Fast and utilitarian: no bounces, no springs. */
+  --duration-instant: 0.1s;
+  --duration-fast: 0.16s;
+  --duration-normal: 0.2s;
+  --easing-standard: ease;
+
+  /* === ELEVATION ===
+     Kanto expresses elevation as a lighter surface. The only real shadow in
+     the system is on toasts. */
+  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.15);
+
+  /* === LAYERS === */
+  --z-dropdown: 100;
+  --z-tooltip: 200;
+  --z-side-panel: 300;
+  --z-modal: 400;
+  --z-toast: 500;
+}