@panneau/ui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/dist/badge/Badge.css

@@ -1,53 +1,41 @@
-.panneau-badge-ikDSa7 {
+.panneau-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--panneau-space-1);
-    min-width: 1.25rem;
-    height: 1.25rem;
-    padding: 0 var(--panneau-space-2);
-    font-size: var(--panneau-font-size-xs);
-    font-weight: var(--panneau-font-weight-medium);
-    font-variant-numeric: tabular-nums;
+    gap: var(--panneau-badge-gap, var(--panneau-space-1));
+    min-width: var(--panneau-badge-height, 1.25rem);
+    height: var(--panneau-badge-height, 1.25rem);
+    padding: 0 var(--panneau-badge-padding-x, var(--panneau-space-2));
+    font-size: var(--panneau-badge-font-size, var(--panneau-font-size-xs));
+    font-weight: var(--panneau-badge-font-weight, var(--panneau-font-weight-medium));
+    font-variant-numeric: var(--panneau-font-numeric);
     line-height: 1;
     white-space: nowrap;
-    color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-sunken);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-full);
+    border: var(--panneau-badge-border-width, var(--panneau-border-width)) solid transparent;
+    border-radius: var(--panneau-badge-radius, var(--panneau-radius-full));
 }
 
-.panneau-success-2NDSCG {
-    color: var(--panneau-color-success);
-    background-color: var(--panneau-color-success-subtle);
-    border-color: var(--panneau-color-success-border);
-}
-
-.panneau-danger-NLo-wP {
-    color: var(--panneau-color-danger);
-    background-color: var(--panneau-color-danger-subtle);
-    border-color: var(--panneau-color-danger-border);
-}
+/* Appearances: they read the --panneau-tone-* variables of the tone class (decision 0024). */
 
-.panneau-warning-3mFhiV {
-    color: var(--panneau-color-warning);
-    background-color: var(--panneau-color-warning-subtle);
-    border-color: var(--panneau-color-warning-border);
+.panneau-badge-subtle {
+    color: var(--panneau-tone-text);
+    background-color: var(--panneau-tone-subtle);
+    border-color: var(--panneau-tone-border);
 }
 
-.panneau-info-5vE5vu {
-    color: var(--panneau-color-info);
-    background-color: var(--panneau-color-info-subtle);
-    border-color: var(--panneau-color-info-border);
+.panneau-badge-solid {
+    color: var(--panneau-tone-solid-text);
+    background-color: var(--panneau-tone-solid);
+    border-color: var(--panneau-tone-solid);
 }
 
-.panneau-accent-cGs8f8 {
-    color: var(--panneau-color-accent-text);
-    background-color: var(--panneau-color-accent);
-    border-color: var(--panneau-color-accent);
+.panneau-badge-outline {
+    color: var(--panneau-tone-text);
+    background-color: transparent;
+    border-color: var(--panneau-tone-outline);
 }
 
-.panneau-visuallyHidden-YMPDBq {
+.panneau-badge-visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;

package/dist/badge/Badge.d.ts

@@ -1,7 +1,22 @@
 import type { ReactNode } from 'react';
-export type BadgeTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning' | 'info';
+import type { Tone } from '../theme/tones';
+/** @deprecated Use `Tone`. */
+export type BadgeTone = Tone;
+/** How a badge uses its tone. */
+export type BadgeAppearance = 'subtle' | 'solid' | 'outline';
+/**
+ * Named variants of `Badge`, registered by a theme (`components.badge.variants`). Declare them
+ * here so that `variant="tag"` type-checks.
+ */
+export interface BadgeVariants {
+}
 export interface BadgeProps {
-    tone?: BadgeTone;
+    /** Defaults to `neutral`. */
+    tone?: Tone;
+    /** Defaults to `subtle`. */
+    appearance?: BadgeAppearance;
+    /** A named variant of the theme. */
+    variant?: keyof BadgeVariants & string;
     children?: ReactNode;
     /**
      * Accessible text, when the visible content isn't enough on its own (a count of errors: "2
@@ -11,5 +26,5 @@ export interface BadgeProps {
     className?: string;
 }
 /** A short status or a count. */
-export declare function Badge({ tone, children, label, className }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ tone, appearance, variant, children, label, className, }: BadgeProps): import("react").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzF,MAAM,WAAW,UAAU;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iCAAiC;AACjC,wBAAgB,KAAK,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,UAAU,+BAajF"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,8BAA8B;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC;AAE7B,iCAAiC;AACjC,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7D;;;GAGG;AAEH,MAAM,WAAW,aAAa;CAAG;AAEjC,MAAM,WAAW,UAAU;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4BAA4B;IAC5B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iCAAiC;AACjC,wBAAgB,KAAK,CAAC,EAClB,IAAgB,EAChB,UAAqB,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,UAAU,+BAsBZ"}

package/dist/badge/Badge.js

@@ -1,11 +1,12 @@
 import { cx } from "../utils/cx.js";
+import { toneClass } from "../theme/toneClass.js";
 import Badge_module_default from "./Badge.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/badge/Badge.tsx
 /** A short status or a count. */
-function Badge({ tone = "neutral", children, label, className }) {
+function Badge({ tone = "neutral", appearance = "subtle", variant, children, label, className }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cx(Badge_module_default.badge, Badge_module_default[tone], className),
+		className: cx("panneau-badge", Badge_module_default.badge, toneClass(tone), Badge_module_default[appearance], variant !== void 0 && `panneau-badge-variant-${variant}`, className),
 		children: label !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			children

package/dist/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["styles","_Fragment"],"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Badge.module.css';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning' | 'info';\n\nexport interface BadgeProps {\n    tone?: BadgeTone;\n    children?: ReactNode;\n    /**\n     * Accessible text, when the visible content isn't enough on its own (a count of errors: \"2\n     * errors\"). The visible content is then hidden from assistive technologies.\n     */\n    label?: string;\n    className?: string;\n}\n\n/** A short status or a count. */\nexport function Badge({ tone = 'neutral', children, label, className }: BadgeProps) {\n    return (\n        <span className={cx(styles.badge, styles[tone], className)}>\n            {label !== undefined ? (\n                <>\n                    <span aria-hidden=\"true\">{children}</span>\n                    <span className={styles.visuallyHidden}>{label}</span>\n                </>\n            ) : (\n                children\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,MAAM,EAAE,OAAO,WAAW,UAAU,OAAO,aAAyB;CAChF,OACI,oBAAC,QAAD;EAAM,WAAW,GAAGA,qBAAO,OAAOA,qBAAO,OAAO,SAAS;EACpD,UAAA,UAAU,KAAA,IACP,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;GAAM,eAAY;GAAQ;EAAe,CAAA,GACzC,oBAAC,QAAD;GAAM,WAAWD,qBAAO;GAAiB,UAAA;EAAY,CAAA,CACzD,EAAA,CAAA,IAEA;CAEF,CAAA;AAEd"}
+{"version":3,"file":"Badge.js","names":["styles","_Fragment"],"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Badge.module.css';\n\n/** @deprecated Use `Tone`. */\nexport type BadgeTone = Tone;\n\n/** How a badge uses its tone. */\nexport type BadgeAppearance = 'subtle' | 'solid' | 'outline';\n\n/**\n * Named variants of `Badge`, registered by a theme (`components.badge.variants`). Declare them\n * here so that `variant=\"tag\"` type-checks.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- extended by projects\nexport interface BadgeVariants {}\n\nexport interface BadgeProps {\n    /** Defaults to `neutral`. */\n    tone?: Tone;\n    /** Defaults to `subtle`. */\n    appearance?: BadgeAppearance;\n    /** A named variant of the theme. */\n    variant?: keyof BadgeVariants & string;\n    children?: ReactNode;\n    /**\n     * Accessible text, when the visible content isn't enough on its own (a count of errors: \"2\n     * errors\"). The visible content is then hidden from assistive technologies.\n     */\n    label?: string;\n    className?: string;\n}\n\n/** A short status or a count. */\nexport function Badge({\n    tone = 'neutral',\n    appearance = 'subtle',\n    variant,\n    children,\n    label,\n    className,\n}: BadgeProps) {\n    return (\n        <span\n            className={cx(\n                'panneau-badge',\n                styles.badge,\n                toneClass(tone),\n                styles[appearance],\n                variant !== undefined && `panneau-badge-variant-${variant}`,\n                className,\n            )}\n        >\n            {label !== undefined ? (\n                <>\n                    <span aria-hidden=\"true\">{children}</span>\n                    <span className={styles.visuallyHidden}>{label}</span>\n                </>\n            ) : (\n                children\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;;AAqCA,SAAgB,MAAM,EAClB,OAAO,WACP,aAAa,UACb,SACA,UACA,OACA,aACW;CACX,OACI,oBAAC,QAAD;EACI,WAAW,GACP,iBACAA,qBAAO,OACP,UAAU,IAAI,GACdA,qBAAO,aACP,YAAY,KAAA,KAAa,yBAAyB,WAClD,SACJ;EAEC,UAAA,UAAU,KAAA,IACP,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;GAAM,eAAY;GAAQ;EAAe,CAAA,GACzC,oBAAC,QAAD;GAAM,WAAWD,qBAAO;GAAiB,UAAA;EAAY,CAAA,CACzD,EAAA,CAAA,IAEA;CAEF,CAAA;AAEd"}

package/dist/badge/Badge.module.js

@@ -1,22 +1,18 @@
 import "./Badge.css";
 //#region src/badge/Badge.module.css
-var badge = "panneau-badge-ikDSa7";
-var success = "panneau-success-2NDSCG";
-var danger = "panneau-danger-NLo-wP";
-var warning = "panneau-warning-3mFhiV";
-var info = "panneau-info-5vE5vu";
-var accent = "panneau-accent-cGs8f8";
-var visuallyHidden = "panneau-visuallyHidden-YMPDBq";
+var badge = "panneau-badge";
+var subtle = "panneau-badge-subtle";
+var solid = "panneau-badge-solid";
+var outline = "panneau-badge-outline";
+var visuallyHidden = "panneau-badge-visually-hidden";
 var Badge_module_default = {
 	badge,
-	success,
-	danger,
-	warning,
-	info,
-	accent,
+	subtle,
+	solid,
+	outline,
 	visuallyHidden
 };
 //#endregion
-export { accent, badge, danger, Badge_module_default as default, info, success, visuallyHidden, warning };
+export { badge, Badge_module_default as default, outline, solid, subtle, visuallyHidden };
 
 //# sourceMappingURL=Badge.module.js.map

package/dist/badge/Badge.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.js","names":[],"sources":["../../src/badge/Badge.module.css"],"sourcesContent":[".badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-1);\n    min-width: 1.25rem;\n    height: 1.25rem;\n    padding: 0 var(--panneau-space-2);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    white-space: nowrap;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-full);\n}\n\n.success {\n    color: var(--panneau-color-success);\n    background-color: var(--panneau-color-success-subtle);\n    border-color: var(--panneau-color-success-border);\n}\n\n.danger {\n    color: var(--panneau-color-danger);\n    background-color: var(--panneau-color-danger-subtle);\n    border-color: var(--panneau-color-danger-border);\n}\n\n.warning {\n    color: var(--panneau-color-warning);\n    background-color: var(--panneau-color-warning-subtle);\n    border-color: var(--panneau-color-warning-border);\n}\n\n.info {\n    color: var(--panneau-color-info);\n    background-color: var(--panneau-color-info-subtle);\n    border-color: var(--panneau-color-info-border);\n}\n\n.accent {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n    border-color: var(--panneau-color-accent);\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.js","names":[],"sources":["../../src/badge/Badge.module.css"],"sourcesContent":[".badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-badge-gap, var(--panneau-space-1));\n    min-width: var(--panneau-badge-height, 1.25rem);\n    height: var(--panneau-badge-height, 1.25rem);\n    padding: 0 var(--panneau-badge-padding-x, var(--panneau-space-2));\n    font-size: var(--panneau-badge-font-size, var(--panneau-font-size-xs));\n    font-weight: var(--panneau-badge-font-weight, var(--panneau-font-weight-medium));\n    font-variant-numeric: var(--panneau-font-numeric);\n    line-height: 1;\n    white-space: nowrap;\n    border: var(--panneau-badge-border-width, var(--panneau-border-width)) solid transparent;\n    border-radius: var(--panneau-badge-radius, var(--panneau-radius-full));\n}\n\n/* Appearances: they read the --panneau-tone-* variables of the tone class (decision 0024). */\n\n.subtle {\n    color: var(--panneau-tone-text);\n    background-color: var(--panneau-tone-subtle);\n    border-color: var(--panneau-tone-border);\n}\n\n.solid {\n    color: var(--panneau-tone-solid-text);\n    background-color: var(--panneau-tone-solid);\n    border-color: var(--panneau-tone-solid);\n}\n\n.outline {\n    color: var(--panneau-tone-text);\n    background-color: transparent;\n    border-color: var(--panneau-tone-outline);\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n}\n"],"mappings":""}

package/dist/badge/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Badge. */
+export declare const badgeTokens: import("..").ComponentTokens<"badge", "panneau-badge-height" | "panneau-badge-radius" | "panneau-badge-gap" | "panneau-badge-padding-x" | "panneau-badge-border-width" | "panneau-badge-font-size" | "panneau-badge-font-weight">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/badge/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/badge/tokens.ts"],"names":[],"mappings":"AAEA,uBAAuB;AACvB,eAAO,MAAM,WAAW,mOAetB,CAAC"}

package/dist/badge/tokens.js

@@ -0,0 +1,23 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/badge/tokens.ts
+/** Tokens of Badge. */
+var badgeTokens = defineComponentTokens("badge", {
+	/** Space between an icon and the text. */
+	gap: "var(--panneau-space-1)",
+	/** Height, and minimum width. */
+	height: "1.25rem",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-2)",
+	/** Font size. */
+	"font-size": "var(--panneau-font-size-xs)",
+	/** Font weight. */
+	"font-weight": "var(--panneau-font-weight-medium)",
+	/** Width of the border. */
+	"border-width": "var(--panneau-border-width)",
+	/** Corner radius: a pill by default. */
+	radius: "var(--panneau-radius-full)"
+});
+//#endregion
+export { badgeTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/badge/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/badge/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Badge. */\nexport const badgeTokens = defineComponentTokens('badge', {\n    /** Space between an icon and the text. */\n    gap: 'var(--panneau-space-1)',\n    /** Height, and minimum width. */\n    height: '1.25rem',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-2)',\n    /** Font size. */\n    'font-size': 'var(--panneau-font-size-xs)',\n    /** Font weight. */\n    'font-weight': 'var(--panneau-font-weight-medium)',\n    /** Width of the border. */\n    'border-width': 'var(--panneau-border-width)',\n    /** Corner radius: a pill by default. */\n    radius: 'var(--panneau-radius-full)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,KAAK;;CAEL,QAAQ;;CAER,aAAa;;CAEb,aAAa;;CAEb,eAAe;;CAEf,gBAAgB;;CAEhB,QAAQ;AACZ,CAAC"}

package/dist/button/Button.css

@@ -1,21 +1,25 @@
-.panneau-button-eiKKZV {
+.panneau-button {
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    gap: var(--panneau-space-2);
+    gap: var(--panneau-button-gap, var(--panneau-space-2));
     min-height: var(--panneau-control-height);
-    padding: 0 var(--panneau-space-4);
-    font-size: var(--panneau-font-size-md);
-    font-weight: var(--panneau-font-weight-medium);
+    padding: 0
+        var(
+            --panneau-button-padding-x,
+            calc(var(--panneau-control-padding-x) + var(--panneau-space-1))
+        );
+    font-size: var(--panneau-button-font-size, var(--panneau-font-size-md));
+    font-weight: var(--panneau-button-font-weight, var(--panneau-font-weight-medium));
     line-height: var(--panneau-line-height-tight);
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
-    border: var(--panneau-border-width) solid transparent;
-    border-radius: var(--panneau-radius-md);
+    border: var(--panneau-button-border-width, var(--panneau-border-width)) solid transparent;
+    border-radius: var(--panneau-button-radius, var(--panneau-radius-md));
     transition:
         background-color var(--panneau-duration),
         border-color var(--panneau-duration),
@@ -23,86 +27,98 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.panneau-button-eiKKZV[data-focus-visible] {
+.panneau-button[data-focus-visible] {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-button-eiKKZV[data-disabled] {
+.panneau-button[data-disabled] {
     cursor: not-allowed;
     opacity: 0.55;
 }
 
-.panneau-sm-Y4qjxi {
+.panneau-button-sm {
     min-height: var(--panneau-control-height-sm);
-    padding: 0 var(--panneau-space-3);
-    font-size: var(--panneau-font-size-sm);
+    padding: 0 var(--panneau-button-padding-x-sm, var(--panneau-control-padding-x));
+    font-size: var(--panneau-button-font-size-sm, var(--panneau-font-size-sm));
 }
 
-.panneau-fullWidth-TLKFBq {
+.panneau-button-full-width {
     display: flex;
     width: 100%;
 }
 
-.panneau-primary-EU45ZN {
-    color: var(--panneau-color-accent-text);
-    background-color: var(--panneau-color-accent);
+/*
+ * Appearances (decision 0024): each one reads the --panneau-tone-* variables of the tone class on
+ * the same element, so every tone, built-in or added by a theme, works with every appearance.
+ */
+
+.panneau-button-solid {
+    color: var(--panneau-tone-solid-text);
+    background-color: var(--panneau-tone-solid);
 }
 
-.panneau-primary-EU45ZN[data-hovered],
-.panneau-primary-EU45ZN[data-pressed] {
-    background-color: var(--panneau-color-accent-hover);
+.panneau-button-solid[data-hovered],
+.panneau-button-solid[data-pressed] {
+    background-color: var(--panneau-tone-solid-hover);
 }
 
-.panneau-secondary-5BZ2i9 {
-    color: var(--panneau-color-text);
+.panneau-button-outline {
+    color: var(--panneau-tone-text);
     background-color: var(--panneau-color-surface);
-    border-color: var(--panneau-color-border-control);
+    border-color: var(--panneau-tone-outline);
 }
 
-.panneau-secondary-5BZ2i9[data-hovered] {
-    background-color: var(--panneau-color-hover);
+.panneau-button-outline[data-hovered] {
+    background-color: color-mix(in srgb, var(--panneau-tone-text) 6%, var(--panneau-color-surface));
 }
 
-.panneau-secondary-5BZ2i9[data-pressed] {
-    background-color: var(--panneau-color-pressed);
+.panneau-button-outline[data-pressed] {
+    background-color: color-mix(
+        in srgb,
+        var(--panneau-tone-text) 10%,
+        var(--panneau-color-surface)
+    );
 }
 
-.panneau-ghost-OX4KsD {
-    color: var(--panneau-color-text);
-    background-color: transparent;
+.panneau-button-subtle {
+    color: var(--panneau-tone-text);
+    background-color: var(--panneau-tone-subtle);
 }
 
-.panneau-ghost-OX4KsD[data-hovered] {
-    background-color: var(--panneau-color-hover);
+.panneau-button-subtle[data-hovered] {
+    background-color: color-mix(in srgb, var(--panneau-tone-text) 8%, var(--panneau-tone-subtle));
 }
 
-.panneau-ghost-OX4KsD[data-pressed] {
-    background-color: var(--panneau-color-pressed);
+.panneau-button-subtle[data-pressed] {
+    background-color: color-mix(in srgb, var(--panneau-tone-text) 14%, var(--panneau-tone-subtle));
+}
+
+.panneau-button-ghost {
+    color: var(--panneau-tone-text);
+    background-color: transparent;
 }
 
-.panneau-danger-57n-Hg {
-    color: var(--panneau-color-danger-solid-text);
-    background-color: var(--panneau-color-danger-solid);
+.panneau-button-ghost[data-hovered] {
+    background-color: color-mix(in srgb, var(--panneau-tone-text) 6%, transparent);
 }
 
-.panneau-danger-57n-Hg[data-hovered],
-.panneau-danger-57n-Hg[data-pressed] {
-    background-color: var(--panneau-color-danger-solid-hover);
+.panneau-button-ghost[data-pressed] {
+    background-color: color-mix(in srgb, var(--panneau-tone-text) 10%, transparent);
 }
 
-.panneau-content-SVjwiQ {
+.panneau-button-content {
     display: inline-flex;
     align-items: center;
     gap: inherit;
     min-width: 0;
 }
 
-.panneau-pending-j5UroX .panneau-content-SVjwiQ {
+.panneau-button-pending .panneau-button-content {
     visibility: hidden;
 }
 
-.panneau-spinner-QToZmM {
+.panneau-button-spinner {
     position: absolute;
     inset: 0;
     display: flex;

package/dist/button/Button.d.ts

@@ -1,11 +1,38 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { type IconComponent } from '../icon/Icon';
+import type { Tone } from '../theme/tones';
 import styles from './Button.module.css';
+/** How a button uses its tone, like Bootstrap's `.btn-*` and `.btn-outline-*`. */
+export type ButtonAppearance = 'solid' | 'outline' | 'subtle' | 'ghost';
+/**
+ * Named variants of `Button`, registered by a theme (`components.button.variants`). Declare them
+ * here so that `variant="pill"` type-checks:
+ *
+ * ```ts
+ * declare module '@panneau/ui' {
+ *     interface ButtonVariants {
+ *         pill: true;
+ *     }
+ * }
+ * ```
+ */
+export interface ButtonVariants {
+}
+/**
+ * The variants of the first alpha, kept as aliases of a tone and an appearance: `primary` is
+ * accent solid, `secondary` neutral outline, `ghost` neutral ghost, `danger` danger solid.
+ *
+ * @deprecated Use `tone` and `appearance`.
+ */
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 export interface ButtonProps extends Omit<AriaButtonProps, 'className' | 'style' | 'children'> {
-    /** Defaults to `secondary`. */
-    variant?: ButtonVariant;
+    /** Defaults to `neutral`. */
+    tone?: Tone;
+    /** Defaults to `outline` for the neutral tone, and `solid` for the others. */
+    appearance?: ButtonAppearance;
+    /** A named variant of the theme, or one of the deprecated aliases (`primary`…). */
+    variant?: ButtonVariant | (keyof ButtonVariants & string);
     size?: 'sm' | 'md';
     /** Icon before the label. */
     icon?: IconComponent;
@@ -21,6 +48,6 @@ export interface ButtonProps extends Omit<AriaButtonProps, 'className' | 'style'
  * A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses
  * while assistive technologies announce the pending state.
  */
-export declare function Button({ variant, size, icon, iconEnd, fullWidth, isPending, children, className, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ tone, appearance, variant, size, icon, iconEnd, fullWidth, isPending, children, className, ...props }: ButtonProps): import("react").JSX.Element;
 export { styles as buttonStyles };
 //# sourceMappingURL=Button.d.ts.map

package/dist/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1F,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACnB,OAAqB,EACrB,IAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACX,EAAE,WAAW,+BA8Bb;AAED,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,cAAc;CAAG;AAElC;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAazE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1F,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,8EAA8E;IAC9E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,GAAG,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,UAAU,EACV,OAAO,EACP,IAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACX,EAAE,WAAW,+BAqCb;AAED,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,CAAC"}

package/dist/button/Button.js

@@ -1,19 +1,44 @@
 import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
 import { Spinner } from "../spinner/Spinner.js";
+import { toneClass } from "../theme/toneClass.js";
 import Button_module_default from "./Button.module.js";
 import { Button } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/button/Button.tsx
+var ALIASES = {
+	primary: {
+		tone: "accent",
+		appearance: "solid"
+	},
+	secondary: {
+		tone: "neutral",
+		appearance: "outline"
+	},
+	ghost: {
+		tone: "neutral",
+		appearance: "ghost"
+	},
+	danger: {
+		tone: "danger",
+		appearance: "solid"
+	}
+};
+function isAlias(variant) {
+	return Object.hasOwn(ALIASES, variant);
+}
 /**
 * A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses
 * while assistive technologies announce the pending state.
 */
-function Button$1({ variant = "secondary", size = "md", icon, iconEnd, fullWidth = false, isPending = false, children, className, ...props }) {
+function Button$1({ tone, appearance, variant, size = "md", icon, iconEnd, fullWidth = false, isPending = false, children, className, ...props }) {
+	const alias = variant !== void 0 && isAlias(variant) ? ALIASES[variant] : void 0;
+	const resolvedTone = tone ?? alias?.tone ?? "neutral";
+	const resolvedAppearance = appearance ?? alias?.appearance ?? (resolvedTone === "neutral" ? "outline" : "solid");
 	return /* @__PURE__ */ jsxs(Button, {
 		...props,
 		isPending,
-		className: cx(Button_module_default.button, Button_module_default[variant], size === "sm" && Button_module_default.sm, fullWidth && Button_module_default.fullWidth, isPending && Button_module_default.pending, className),
+		className: cx("panneau-button", Button_module_default.button, toneClass(resolvedTone), Button_module_default[resolvedAppearance], variant !== void 0 && alias === void 0 && `panneau-button-variant-${variant}`, size === "sm" && Button_module_default.sm, fullWidth && Button_module_default.fullWidth, isPending && Button_module_default.pending, className),
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: Button_module_default.content,
 			children: [

package/dist/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","AriaButton","styles"],"sources":["../../src/button/Button.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { Spinner } from '../spinner/Spinner';\nimport { cx } from '../utils/cx';\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\n\nexport interface ButtonProps extends Omit<AriaButtonProps, 'className' | 'style' | 'children'> {\n    /** Defaults to `secondary`. */\n    variant?: ButtonVariant;\n    size?: 'sm' | 'md';\n    /** Icon before the label. */\n    icon?: IconComponent;\n    /** Icon after the label. */\n    iconEnd?: IconComponent;\n    /** Takes the full width of its container. */\n    fullWidth?: boolean;\n    children?: ReactNode;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/**\n * A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses\n * while assistive technologies announce the pending state.\n */\nexport function Button({\n    variant = 'secondary',\n    size = 'md',\n    icon,\n    iconEnd,\n    fullWidth = false,\n    isPending = false,\n    children,\n    className,\n    ...props\n}: ButtonProps) {\n    return (\n        <AriaButton\n            {...props}\n            isPending={isPending}\n            className={cx(\n                styles.button,\n                styles[variant],\n                size === 'sm' && styles.sm,\n                fullWidth && styles.fullWidth,\n                isPending && styles.pending,\n                className,\n            )}\n        >\n            <span className={styles.content}>\n                {icon !== undefined ? (\n                    <Icon icon={icon} size={size === 'sm' ? 'sm' : 'md'} />\n                ) : null}\n                {children}\n                {iconEnd !== undefined ? (\n                    <Icon icon={iconEnd} size={size === 'sm' ? 'sm' : 'md'} />\n                ) : null}\n            </span>\n            {isPending ? (\n                <span className={styles.spinner}>\n                    <Spinner size=\"sm\" />\n                </span>\n            ) : null}\n        </AriaButton>\n    );\n}\n\nexport { styles as buttonStyles };\n"],"mappings":";;;;;;;;;;;AA6BA,SAAgBA,SAAO,EACnB,UAAU,aACV,OAAO,MACP,MACA,SACA,YAAY,OACZ,YAAY,OACZ,UACA,WACA,GAAG,SACS;CACZ,OACI,qBAACC,QAAD;EACI,GAAI;EACO;EACX,WAAW,GACPC,sBAAO,QACPA,sBAAO,UACP,SAAS,QAAQA,sBAAO,IACxB,aAAaA,sBAAO,WACpB,aAAaA,sBAAO,SACpB,SACJ;EAVJ,UAAA,CAYI,qBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAxB,UAAA;IACK,SAAS,KAAA,IACN,oBAAC,MAAD;KAAY;KAAM,MAAM,SAAS,OAAO,OAAO;IAAK,CAAA,IACpD;IACH;IACA,YAAY,KAAA,IACT,oBAAC,MAAD;KAAM,MAAM;KAAS,MAAM,SAAS,OAAO,OAAO;IAAK,CAAA,IACvD;GACF;EACL,CAAA,GAAA,YACG,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GACpB,UAAA,oBAAC,SAAD,EAAS,MAAK,KAAI,CAAA;EAChB,CAAA,IACN,IACI;;AAEpB"}
+{"version":3,"file":"Button.js","names":["Button","AriaButton","styles"],"sources":["../../src/button/Button.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { Spinner } from '../spinner/Spinner';\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Button.module.css';\n\n/** How a button uses its tone, like Bootstrap's `.btn-*` and `.btn-outline-*`. */\nexport type ButtonAppearance = 'solid' | 'outline' | 'subtle' | 'ghost';\n\n/**\n * Named variants of `Button`, registered by a theme (`components.button.variants`). Declare them\n * here so that `variant=\"pill\"` type-checks:\n *\n * ```ts\n * declare module '@panneau/ui' {\n *     interface ButtonVariants {\n *         pill: true;\n *     }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- extended by projects\nexport interface ButtonVariants {}\n\n/**\n * The variants of the first alpha, kept as aliases of a tone and an appearance: `primary` is\n * accent solid, `secondary` neutral outline, `ghost` neutral ghost, `danger` danger solid.\n *\n * @deprecated Use `tone` and `appearance`.\n */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\n\nconst ALIASES: Record<ButtonVariant, { tone: Tone; appearance: ButtonAppearance }> = {\n    primary: { tone: 'accent', appearance: 'solid' },\n    secondary: { tone: 'neutral', appearance: 'outline' },\n    ghost: { tone: 'neutral', appearance: 'ghost' },\n    danger: { tone: 'danger', appearance: 'solid' },\n};\n\nfunction isAlias(variant: string): variant is ButtonVariant {\n    return Object.hasOwn(ALIASES, variant);\n}\n\nexport interface ButtonProps extends Omit<AriaButtonProps, 'className' | 'style' | 'children'> {\n    /** Defaults to `neutral`. */\n    tone?: Tone;\n    /** Defaults to `outline` for the neutral tone, and `solid` for the others. */\n    appearance?: ButtonAppearance;\n    /** A named variant of the theme, or one of the deprecated aliases (`primary`…). */\n    variant?: ButtonVariant | (keyof ButtonVariants & string);\n    size?: 'sm' | 'md';\n    /** Icon before the label. */\n    icon?: IconComponent;\n    /** Icon after the label. */\n    iconEnd?: IconComponent;\n    /** Takes the full width of its container. */\n    fullWidth?: boolean;\n    children?: ReactNode;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/**\n * A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses\n * while assistive technologies announce the pending state.\n */\nexport function Button({\n    tone,\n    appearance,\n    variant,\n    size = 'md',\n    icon,\n    iconEnd,\n    fullWidth = false,\n    isPending = false,\n    children,\n    className,\n    ...props\n}: ButtonProps) {\n    const alias = variant !== undefined && isAlias(variant) ? ALIASES[variant] : undefined;\n    const resolvedTone = tone ?? alias?.tone ?? 'neutral';\n    const resolvedAppearance =\n        appearance ?? alias?.appearance ?? (resolvedTone === 'neutral' ? 'outline' : 'solid');\n    return (\n        <AriaButton\n            {...props}\n            isPending={isPending}\n            className={cx(\n                'panneau-button',\n                styles.button,\n                toneClass(resolvedTone),\n                styles[resolvedAppearance],\n                variant !== undefined && alias === undefined && `panneau-button-variant-${variant}`,\n                size === 'sm' && styles.sm,\n                fullWidth && styles.fullWidth,\n                isPending && styles.pending,\n                className,\n            )}\n        >\n            <span className={styles.content}>\n                {icon !== undefined ? (\n                    <Icon icon={icon} size={size === 'sm' ? 'sm' : 'md'} />\n                ) : null}\n                {children}\n                {iconEnd !== undefined ? (\n                    <Icon icon={iconEnd} size={size === 'sm' ? 'sm' : 'md'} />\n                ) : null}\n            </span>\n            {isPending ? (\n                <span className={styles.spinner}>\n                    <Spinner size=\"sm\" />\n                </span>\n            ) : null}\n        </AriaButton>\n    );\n}\n\nexport { styles as buttonStyles };\n"],"mappings":";;;;;;;;AAoCA,IAAM,UAA+E;CACjF,SAAS;EAAE,MAAM;EAAU,YAAY;CAAQ;CAC/C,WAAW;EAAE,MAAM;EAAW,YAAY;CAAU;CACpD,OAAO;EAAE,MAAM;EAAW,YAAY;CAAQ;CAC9C,QAAQ;EAAE,MAAM;EAAU,YAAY;CAAQ;AAClD;AAEA,SAAS,QAAQ,SAA2C;CACxD,OAAO,OAAO,OAAO,SAAS,OAAO;AACzC;;;;;AAyBA,SAAgBA,SAAO,EACnB,MACA,YACA,SACA,OAAO,MACP,MACA,SACA,YAAY,OACZ,YAAY,OACZ,UACA,WACA,GAAG,SACS;CACZ,MAAM,QAAQ,YAAY,KAAA,KAAa,QAAQ,OAAO,IAAI,QAAQ,WAAW,KAAA;CAC7E,MAAM,eAAe,QAAQ,OAAO,QAAQ;CAC5C,MAAM,qBACF,cAAc,OAAO,eAAe,iBAAiB,YAAY,YAAY;CACjF,OACI,qBAACC,QAAD;EACI,GAAI;EACO;EACX,WAAW,GACP,kBACAC,sBAAO,QACP,UAAU,YAAY,GACtBA,sBAAO,qBACP,YAAY,KAAA,KAAa,UAAU,KAAA,KAAa,0BAA0B,WAC1E,SAAS,QAAQA,sBAAO,IACxB,aAAaA,sBAAO,WACpB,aAAaA,sBAAO,SACpB,SACJ;EAbJ,UAAA,CAeI,qBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAxB,UAAA;IACK,SAAS,KAAA,IACN,oBAAC,MAAD;KAAY;KAAM,MAAM,SAAS,OAAO,OAAO;IAAK,CAAA,IACpD;IACH;IACA,YAAY,KAAA,IACT,oBAAC,MAAD;KAAM,MAAM;KAAS,MAAM,SAAS,OAAO,OAAO;IAAK,CAAA,IACvD;GACF;EACL,CAAA,GAAA,YACG,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GACpB,UAAA,oBAAC,SAAD,EAAS,MAAK,KAAI,CAAA;EAChB,CAAA,IACN,IACI;;AAEpB"}

package/dist/button/Button.module.js

@@ -1,28 +1,28 @@
 import "./Button.css";
 //#region src/button/Button.module.css
-var button = "panneau-button-eiKKZV";
-var sm = "panneau-sm-Y4qjxi";
-var fullWidth = "panneau-fullWidth-TLKFBq";
-var primary = "panneau-primary-EU45ZN";
-var secondary = "panneau-secondary-5BZ2i9";
-var ghost = "panneau-ghost-OX4KsD";
-var danger = "panneau-danger-57n-Hg";
-var content = "panneau-content-SVjwiQ";
-var pending = "panneau-pending-j5UroX";
-var spinner = "panneau-spinner-QToZmM";
+var button = "panneau-button";
+var sm = "panneau-button-sm";
+var fullWidth = "panneau-button-full-width";
+var solid = "panneau-button-solid";
+var outline = "panneau-button-outline";
+var subtle = "panneau-button-subtle";
+var ghost = "panneau-button-ghost";
+var content = "panneau-button-content";
+var pending = "panneau-button-pending";
+var spinner = "panneau-button-spinner";
 var Button_module_default = {
 	button,
 	sm,
 	fullWidth,
-	primary,
-	secondary,
+	solid,
+	outline,
+	subtle,
 	ghost,
-	danger,
 	content,
 	pending,
 	spinner
 };
 //#endregion
-export { button, content, danger, Button_module_default as default, fullWidth, ghost, pending, primary, secondary, sm, spinner };
+export { button, content, Button_module_default as default, fullWidth, ghost, outline, pending, sm, solid, spinner, subtle };
 
 //# sourceMappingURL=Button.module.js.map

package/dist/button/Button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/button/Button.module.css"],"sourcesContent":[".button {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-4);\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    border: var(--panneau-border-width) solid transparent;\n    border-radius: var(--panneau-radius-md);\n    transition:\n        background-color var(--panneau-duration),\n        border-color var(--panneau-duration),\n        color var(--panneau-duration);\n    -webkit-tap-highlight-color: transparent;\n}\n\n.button[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.button[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.sm {\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.primary {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n}\n\n.primary[data-hovered],\n.primary[data-pressed] {\n    background-color: var(--panneau-color-accent-hover);\n}\n\n.secondary {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface);\n    border-color: var(--panneau-color-border-control);\n}\n\n.secondary[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.secondary[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.ghost {\n    color: var(--panneau-color-text);\n    background-color: transparent;\n}\n\n.ghost[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.ghost[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.danger {\n    color: var(--panneau-color-danger-solid-text);\n    background-color: var(--panneau-color-danger-solid);\n}\n\n.danger[data-hovered],\n.danger[data-pressed] {\n    background-color: var(--panneau-color-danger-solid-hover);\n}\n\n.content {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n    min-width: 0;\n}\n\n.pending .content {\n    visibility: hidden;\n}\n\n.spinner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/button/Button.module.css"],"sourcesContent":[".button {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-button-gap, var(--panneau-space-2));\n    min-height: var(--panneau-control-height);\n    padding: 0\n        var(\n            --panneau-button-padding-x,\n            calc(var(--panneau-control-padding-x) + var(--panneau-space-1))\n        );\n    font-size: var(--panneau-button-font-size, var(--panneau-font-size-md));\n    font-weight: var(--panneau-button-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    border: var(--panneau-button-border-width, var(--panneau-border-width)) solid transparent;\n    border-radius: var(--panneau-button-radius, var(--panneau-radius-md));\n    transition:\n        background-color var(--panneau-duration),\n        border-color var(--panneau-duration),\n        color var(--panneau-duration);\n    -webkit-tap-highlight-color: transparent;\n}\n\n.button[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.button[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.sm {\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-button-padding-x-sm, var(--panneau-control-padding-x));\n    font-size: var(--panneau-button-font-size-sm, var(--panneau-font-size-sm));\n}\n\n.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n/*\n * Appearances (decision 0024): each one reads the --panneau-tone-* variables of the tone class on\n * the same element, so every tone, built-in or added by a theme, works with every appearance.\n */\n\n.solid {\n    color: var(--panneau-tone-solid-text);\n    background-color: var(--panneau-tone-solid);\n}\n\n.solid[data-hovered],\n.solid[data-pressed] {\n    background-color: var(--panneau-tone-solid-hover);\n}\n\n.outline {\n    color: var(--panneau-tone-text);\n    background-color: var(--panneau-color-surface);\n    border-color: var(--panneau-tone-outline);\n}\n\n.outline[data-hovered] {\n    background-color: color-mix(in srgb, var(--panneau-tone-text) 6%, var(--panneau-color-surface));\n}\n\n.outline[data-pressed] {\n    background-color: color-mix(\n        in srgb,\n        var(--panneau-tone-text) 10%,\n        var(--panneau-color-surface)\n    );\n}\n\n.subtle {\n    color: var(--panneau-tone-text);\n    background-color: var(--panneau-tone-subtle);\n}\n\n.subtle[data-hovered] {\n    background-color: color-mix(in srgb, var(--panneau-tone-text) 8%, var(--panneau-tone-subtle));\n}\n\n.subtle[data-pressed] {\n    background-color: color-mix(in srgb, var(--panneau-tone-text) 14%, var(--panneau-tone-subtle));\n}\n\n.ghost {\n    color: var(--panneau-tone-text);\n    background-color: transparent;\n}\n\n.ghost[data-hovered] {\n    background-color: color-mix(in srgb, var(--panneau-tone-text) 6%, transparent);\n}\n\n.ghost[data-pressed] {\n    background-color: color-mix(in srgb, var(--panneau-tone-text) 10%, transparent);\n}\n\n.content {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n    min-width: 0;\n}\n\n.pending .content {\n    visibility: hidden;\n}\n\n.spinner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n}\n"],"mappings":""}

package/dist/button/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Button. */
+export declare const buttonTokens: import("..").ComponentTokens<"button", "panneau-button-radius" | "panneau-button-gap" | "panneau-button-padding-x" | "panneau-button-border-width" | "panneau-button-font-size" | "panneau-button-font-weight" | "panneau-button-padding-x-sm" | "panneau-button-font-size-sm">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/button/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/button/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,iRAiBvB,CAAC"}

package/dist/button/tokens.js

@@ -0,0 +1,25 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/button/tokens.ts
+/** Tokens of Button. */
+var buttonTokens = defineComponentTokens("button", {
+	/** Space between the icon and the label. */
+	gap: "var(--panneau-space-2)",
+	/** Horizontal padding. */
+	"padding-x": "calc(var(--panneau-control-padding-x) + var(--panneau-space-1))",
+	/** Font size of the label. */
+	"font-size": "var(--panneau-font-size-md)",
+	/** Font weight of the label. */
+	"font-weight": "var(--panneau-font-weight-medium)",
+	/** Width of the border. */
+	"border-width": "var(--panneau-border-width)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-md)",
+	/** Horizontal padding of the small size. */
+	"padding-x-sm": "var(--panneau-control-padding-x)",
+	/** Font size of the small size. */
+	"font-size-sm": "var(--panneau-font-size-sm)"
+});
+//#endregion
+export { buttonTokens };
+
+//# sourceMappingURL=tokens.js.map