kanto-ds 1.6.0 → 1.7.0

package/README.md

@@ -1,10 +1,22 @@
 # Kanto
 
-**A design system for data-dense product interfaces** — dashboards, admin
-tools, forms.
+**Forty-nine web components for dashboards, admin tools and forms — in your
+colours, in any framework.**
 
-The components are standard custom elements, so they run in React, Vue,
-Angular, Svelte or plain HTML without a per-framework rewrite.
+[![npm](https://img.shields.io/npm/v/kanto-ds?color=5f5dea&label=npm)](https://www.npmjs.com/package/kanto-ds)
+[![CI](https://github.com/MrArnaudMichel/kanto/actions/workflows/ci.yml/badge.svg)](https://github.com/MrArnaudMichel/kanto/actions/workflows/ci.yml)
+[![Accessibility: axe, both themes](https://img.shields.io/badge/accessibility-axe%20tested%2C%20both%20themes-5f5dea)](#accessibility)
+[![License: MIT](https://img.shields.io/badge/license-MIT-5f5dea)](LICENSE)
+
+**[Open the live docs and playground](https://kanto.arnaudmichel.fr).** Pick a
+colour, a font and a density, watch a real screen change, and copy the one
+line that does it in your project — or open it on StackBlitz.
+
+They are standard custom elements, so the same `<kt-button>` runs in React,
+Vue, Angular, Svelte and plain HTML. Two complete themes, every element audited by axe in both and driven
+by the keyboard in its tests, and no framework to adopt.
+
+## Start
 
 ```bash
 npm install kanto-ds
@@ -23,6 +35,37 @@ import 'kanto-ds/styles.css';
 </kt-card>
 ```
 
+No bundler? One stylesheet and one script tag:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kanto-ds@1/dist/styles.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/kanto-ds@1"></script>
+```
+
+Per-framework setup — React 18 and 19, Vue, Angular, Svelte — is in
+**[docs/frameworks.md](docs/frameworks.md)**.
+
+## Make it yours
+
+Colour, font, corners, density and text size are each one attribute, on the
+page or on any container:
+
+```html
+<html data-accent="teal" data-radius="round" data-density="compact"></html>
+```
+
+Or any colour at all — Kanto solves the shades for it and keeps every text at
+4.5:1 in both themes:
+
+```js
+import { setAppearance } from 'kanto-ds';
+
+setAppearance({ accent: '#e11d48', radius: 'round', textSize: 'large' });
+```
+
+Fonts other than Kanto's own (`data-font="inter"`, `"plex"`, `"geist"`) need
+the face loaded by your page, from Google Fonts or your own files.
+
 ---
 
 ## Showcase
@@ -121,8 +164,10 @@ import 'kanto-ds/components/core/kt-button'; // just this one
 ## Icons
 
 `<kt-icon>` resolves [Lucide](https://lucide.dev) icons by name at render time,
-which means the set cannot be tree-shaken. So Kanto ships only the 24 its own
-elements draw. Register what your application uses:
+which means the set cannot be tree-shaken. So Kanto ships the 24 its own
+elements draw and nine a first screen reaches for (`plus`, `pencil`,
+`settings`, `download`, `upload`, `external-link`, `filter`, `ellipsis`,
+`refresh-cw`). Register what else your application uses:
 
 ```js
 import { Rocket, Wallet } from 'lucide';
@@ -164,6 +209,11 @@ editor data generated from it, so plain HTML gets completion and hover docs:
 
 - **Storybook** and API-docs generators take `kanto-ds/custom-elements.json`.
 
+**AI assistants** read [`llms.txt`](https://kanto.arnaudmichel.fr/llms.txt): the
+rules that make code right the first time and a link to every component's
+page. In a project, each page also ships at
+`node_modules/kanto-ds/dist/docs/<tag>.md`.
+
 ## Accessibility
 
 Not a phase at the end; it is why several of these components exist in this