@appshell/tokens 1.0.0-alpha.15

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Navaris Technologies, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+# @appshell/tokens
+
+The design token contract an Application supplies and every package it composes consumes.
+
+A catalogue of components that cannot be themed to their host is not composable — visual
+coherence is the point. This package is the vocabulary that makes it possible: 41 CSS
+custom properties, a set of presets, and the contrast validation that keeps a theme
+legible.
+
+## For a package author
+
+Author against the names, always with a fallback so the package still renders standalone:
+
+```css
+.button {
+  background: var(--appshell-primary, #0284c7);
+  color: var(--appshell-on-primary, #fff);
+  border-radius: var(--appshell-radius-md, 0.5rem);
+  padding: var(--appshell-space-sm, 0.5rem) var(--appshell-space-md, 1rem);
+}
+.button:hover  { background: var(--appshell-primary-hover); }
+.button:focus-visible { outline: 2px solid var(--appshell-focus-ring); outline-offset: 2px; }
+```
+
+Never write a literal colour you expect to be themed. That is the one rule.
+
+## The contract
+
+**Colour is semantic; dimensions are a scale.** `--appshell-surface` says what a colour
+*means*; `--appshell-space-md` is honestly just a size. Nobody wants
+`--appshell-space-card-padding`.
+
+**Every colour that carries text has an `on-` partner.** Write
+`background: var(--appshell-primary); color: var(--appshell-on-primary)` and you cannot
+produce an illegible control whatever palette the Application supplies. It is also what
+makes dark mode a change of values rather than a change of logic.
+
+| Group | Roles |
+| --- | --- |
+| Surface | `surface`, `on-surface`, `surface-raised`, `on-surface-raised` |
+| Text & line | `text-muted`, `border` |
+| Action | `primary`, `on-primary`, `secondary`, `on-secondary` |
+| Derived | `primary-hover`, `primary-active`, `secondary-hover`, `secondary-active`, `focus-ring` |
+| Status | `danger`, `warning`, `success` and their `on-` partners |
+| Type | `font-body`, `font-mono`, `font-size-h1`…`h6`, `-body`, `-small`, `line-height-tight`, `-normal` |
+| Dimension | `space-xs`…`xl`, `radius-sm`/`md`/`lg` |
+
+Type sizes are named for their role rather than a `sm/md/lg` scale on purpose. A numeric
+scale reintroduces the divergence the contract exists to prevent — one author maps `h1` to
+`2xl`, another to `xl`, and headings stop matching across a composed page.
+
+**Derived roles cost a theme nothing.** Hover and active are a `color-mix` from their
+accent, and the focus ring is picked per base and accent. A theme may override any of
+them; none has to be supplied. So the contract publishes 41 names while an Application
+authors 36 at most — and usually none, because it picks presets.
+
+## Presets: base × accent
+
+Themes are two choices, not 41 values:
+
+```ts
+import { toCss } from '@appshell/tokens';
+
+toCss({ base: 'midnight', accent: 'ice' });
+```
+
+**Bases** carry surfaces, text, border and status, as a light/dark pair: `neutral`,
+`midnight`. **Accents** carry the two action colours: `ice`, `ember`, `emerald`, `violet`,
+`steel`. Either slot also accepts raw token values, and `overrides` adjusts a preset
+without forking it.
+
+Every combination is verified — see below — and `midnight`/`ice` is derived from the first
+application scheduled to migrate.
+
+## Contrast is the validation that matters
+
+Syntax checking earns little. It catches `--appshell-primary: bananas`; it misses
+`--appshell-on-primary: #fff` on `--appshell-primary: #fff`, which is perfectly valid CSS
+and invisible text.
+
+```ts
+import { composeTheme, validateTheme, describeFinding } from '@appshell/tokens';
+
+validateTheme(composeTheme({ base: 'neutral', accent: 'ice' }, 'light')).map(describeFinding);
+```
+
+Text pairs are checked at WCAG AA (4.5:1), the focus ring at 3:1 against its surface
+(1.4.11, non-text). A value that will not parse is reported rather than thrown, so one bad
+token does not hide the rest.
+
+Two things this caught while the presets were being chosen, both of which would otherwise
+have shipped:
+
+- **Tailwind's `indigo-500` fails against both black and white** — 4.28 and 4.22. There is
+  no legible text colour for it. The `violet` accent uses `indigo-600` instead.
+- **A focus ring that is simply the accent disappears** on 7 of the 20 preset combinations.
+  The rings are derived instead: hue and chroma are kept, lightness moves only as far as it
+  must to clear 3:1.
+
+The presets are held to the same standard as everyone else's themes — the test suite
+composes all 20 combinations and asserts no findings.
+
+## Colour format
+
+Values are `oklch`. Tailwind v4 consumes them directly and uses `color-mix` for its opacity
+modifiers. Tailwind v3 implements `bg-primary/50` as `rgb(var(--x) / <alpha-value>)` and
+needs channel-separated values, so a v3 package either forgoes opacity modifiers on themed
+colours or derives channel-split locals in its own stylesheet. The contract is not deformed
+for the older version.
+
+## Modes
+
+Three states, not two — an explicit choice in either direction plus the system default:
+
+```css
+:root                                        { /* light */ }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-appshell-theme="light"])   { /* dark, unless light was chosen */ }
+}
+:root[data-appshell-theme="dark"]            { /* dark, chosen */ }
+```
+
+Only the roles that actually differ are restated in the dark blocks. Type and dimensions
+never vary, and repeating them would triple the size of something the registry inlines into
+every page it serves.

package/dist/main.js

@@ -0,0 +1 @@
+!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var r=o();for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(()=>(()=>{"use strict";var e={d:(o,r)=>{for(var n in r)e.o(r,n)&&!e.o(o,n)&&Object.defineProperty(o,n,{enumerable:!0,get:r[n]})},o:(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{AA_NON_TEXT:()=>u,AA_TEXT:()=>k,ACCENTS:()=>_,ACCENT_COLOR_ROLES:()=>n,BASES:()=>$,BASE_COLOR_ROLES:()=>r,DEFAULT_TYPE_AND_DIMENSIONS:()=>A,DERIVED_COLOR_ROLES:()=>c,DIMENSION_ROLES:()=>s,FOCUS_RINGS:()=>x,MUTED_AGAINST:()=>h,NON_TEXT_PAIRS:()=>d,TEXT_PAIRS:()=>l,TOKEN_ROLES:()=>t,TYPE_ROLES:()=>a,composeTheme:()=>z,contrastRatio:()=>E,cssVar:()=>i,describeFinding:()=>w,parseColor:()=>b,toCss:()=>R,validateTheme:()=>S});const r=["surface","on-surface","surface-raised","on-surface-raised","text-muted","border","danger","on-danger","warning","on-warning","success","on-success"],n=["primary","on-primary","secondary","on-secondary"],c=["primary-hover","primary-active","secondary-hover","secondary-active","focus-ring"],a=["font-body","font-mono","font-size-h1","font-size-h2","font-size-h3","font-size-h4","font-size-h5","font-size-h6","font-size-body","font-size-small","line-height-tight","line-height-normal"],s=["space-xs","space-sm","space-md","space-lg","space-xl","radius-sm","radius-md","radius-lg"],t=[...r,...n,...c,...a,...s],i=e=>`--appshell-${e}`,l=[["surface","on-surface"],["surface-raised","on-surface-raised"],["primary","on-primary"],["secondary","on-secondary"],["danger","on-danger"],["warning","on-warning"],["success","on-success"]],h=["surface","surface-raised"],d=[["surface","focus-ring"]],k=4.5,u=3,m=e=>Math.min(1,Math.max(0,e)),f=e=>e<=.04045?e/12.92:((e+.055)/1.055)**2.4,p=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055,g=/^oklch\(\s*([\d.]+)%\s+([\d.]+)\s+([\d.]+)\s*\)$/i,y=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,b=e=>{const o=e.trim(),r=g.exec(o);if(r)return((e,o,r)=>{const n=r*Math.PI/180,c=o*Math.cos(n),a=o*Math.sin(n),s=(e+.3963377774*c+.2158037573*a)**3,t=(e-.1055613458*c-.0638541728*a)**3,i=(e-.0894841775*c-1.291485548*a)**3;return[m(p(4.0767416621*s-3.3077115913*t+.2309699292*i)),m(p(-1.2684380046*s+2.6097574011*t-.3413193965*i)),m(p(-.0041960863*s-.7034186147*t+1.707614701*i))]})(Number(r[1])/100,Number(r[2]),Number(r[3]));const n=y.exec(o);if(n){const e=3===n[1].length?[...n[1]].map((e=>e+e)).join(""):n[1];return[0,2,4].map((o=>parseInt(e.slice(o,o+2),16)/255))}},O=([e,o,r])=>.2126*f(e)+.7152*f(o)+.0722*f(r),E=(e,o)=>{const r=O(e),n=O(o);return(Math.max(r,n)+.05)/(Math.min(r,n)+.05)},v=(e,o,r)=>o.flatMap((([o,n])=>{const c=[o,n],a=b(e[o]),s=b(e[n]);if(!a||!s)return[{roles:c,required:r,reason:"unparseable"}];const t=E(a,s);return t>=r?[]:[{roles:c,ratio:t,required:r,reason:"below-threshold"}]})),S=e=>[...v(e,l,k),...v(e,h.map((e=>[e,"text-muted"])),k),...v(e,d,u)],w=({roles:e,ratio:o,required:r,reason:n})=>"unparseable"===n?`${e[0]} / ${e[1]}: could not be measured — one of the values is not a colour this understands.`:`${e[0]} / ${e[1]}: ${o?.toFixed(2)}:1, needs ${r}:1.`,$={neutral:{light:{surface:"oklch(99.0% 0.000 0.0)","on-surface":"oklch(21.0% 0.000 0.0)","surface-raised":"oklch(96.5% 0.000 0.0)","on-surface-raised":"oklch(21.0% 0.000 0.0)","text-muted":"oklch(50.0% 0.000 0.0)",border:"oklch(90.0% 0.000 0.0)",danger:"oklch(57.7% 0.215 27.3)","on-danger":"oklch(98.5% 0.000 89.9)",warning:"oklch(55.5% 0.146 49.0)","on-warning":"oklch(98.5% 0.000 89.9)",success:"oklch(50.8% 0.105 165.6)","on-success":"oklch(98.5% 0.000 89.9)"},dark:{surface:"oklch(18.0% 0.000 0.0)","on-surface":"oklch(95.0% 0.000 0.0)","surface-raised":"oklch(23.0% 0.000 0.0)","on-surface-raised":"oklch(95.0% 0.000 0.0)","text-muted":"oklch(68.0% 0.000 0.0)",border:"oklch(32.0% 0.000 0.0)",danger:"oklch(71.1% 0.166 22.2)","on-danger":"oklch(17.9% 0.006 285.8)",warning:"oklch(83.7% 0.164 84.4)","on-warning":"oklch(17.9% 0.006 285.8)",success:"oklch(77.3% 0.153 163.2)","on-success":"oklch(17.9% 0.006 285.8)"}},midnight:{light:{surface:"oklch(100.0% 0.000 89.9)","on-surface":"oklch(21.0% 0.006 285.9)","surface-raised":"oklch(96.7% 0.001 286.4)","on-surface-raised":"oklch(21.0% 0.006 285.9)","text-muted":"oklch(47.4% 0.013 285.9)",border:"oklch(92.0% 0.004 286.3)",danger:"oklch(57.7% 0.215 27.3)","on-danger":"oklch(98.5% 0.000 89.9)",warning:"oklch(55.5% 0.146 49.0)","on-warning":"oklch(98.5% 0.000 89.9)",success:"oklch(50.8% 0.105 165.6)","on-success":"oklch(98.5% 0.000 89.9)"},dark:{surface:"oklch(14.1% 0.004 285.8)","on-surface":"oklch(94.5% 0.007 286.3)","surface-raised":"oklch(18.9% 0.010 285.4)","on-surface-raised":"oklch(94.5% 0.007 286.3)","text-muted":"oklch(64.0% 0.015 286.0)",border:"oklch(27.6% 0.013 285.5)",danger:"oklch(71.1% 0.166 22.2)","on-danger":"oklch(17.9% 0.006 285.8)",warning:"oklch(83.7% 0.164 84.4)","on-warning":"oklch(17.9% 0.006 285.8)",success:"oklch(77.3% 0.153 163.2)","on-success":"oklch(17.9% 0.006 285.8)"}}},_={ice:{primary:"oklch(68.5% 0.148 237.3)","on-primary":"oklch(17.9% 0.006 285.8)",secondary:"oklch(76.9% 0.165 70.1)","on-secondary":"oklch(17.9% 0.006 285.8)"},ember:{primary:"oklch(57.7% 0.215 27.3)","on-primary":"oklch(98.5% 0.000 89.9)",secondary:"oklch(68.5% 0.148 237.3)","on-secondary":"oklch(17.9% 0.006 285.8)"},emerald:{primary:"oklch(69.6% 0.149 162.5)","on-primary":"oklch(17.9% 0.006 285.8)",secondary:"oklch(76.9% 0.165 70.1)","on-secondary":"oklch(17.9% 0.006 285.8)"},violet:{primary:"oklch(51.1% 0.230 277.0)","on-primary":"oklch(98.5% 0.000 89.9)",secondary:"oklch(76.9% 0.165 70.1)","on-secondary":"oklch(17.9% 0.006 285.8)"},steel:{primary:"oklch(44.2% 0.015 285.8)","on-primary":"oklch(98.5% 0.000 89.9)",secondary:"oklch(76.9% 0.165 70.1)","on-secondary":"oklch(17.9% 0.006 285.8)"}},x={neutral:{ice:{light:"oklch(64.5% 0.148 237.3)",dark:"oklch(68.5% 0.148 237.3)"},ember:{light:"oklch(57.7% 0.215 27.3)",dark:"oklch(57.7% 0.215 27.3)"},emerald:{light:"oklch(63.6% 0.149 162.5)",dark:"oklch(69.6% 0.149 162.5)"},violet:{light:"oklch(51.1% 0.230 277.0)",dark:"oklch(53.1% 0.230 277.0)"},steel:{light:"oklch(44.2% 0.015 285.8)",dark:"oklch(50.2% 0.015 285.8)"}},midnight:{ice:{light:"oklch(64.5% 0.148 237.3)",dark:"oklch(68.5% 0.148 237.3)"},ember:{light:"oklch(57.7% 0.215 27.3)",dark:"oklch(57.7% 0.215 27.3)"},emerald:{light:"oklch(63.6% 0.149 162.5)",dark:"oklch(69.6% 0.149 162.5)"},violet:{light:"oklch(51.1% 0.230 277.0)",dark:"oklch(51.1% 0.230 277.0)"},steel:{light:"oklch(44.2% 0.015 285.8)",dark:"oklch(48.2% 0.015 285.8)"}}},T=(e,o,r)=>`color-mix(in oklch, var(${i(e)}), ${o} ${r})`,j=(e,o)=>{const r="dark"===e?"white":"black",n="dark"===e?"black":"white";return{"primary-hover":T("primary",r,"12%"),"primary-active":T("primary",n,"10%"),"secondary-hover":T("secondary",r,"12%"),"secondary-active":T("secondary",n,"10%"),"focus-ring":o}},A={"font-body":"system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif","font-mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace","font-size-h1":"2.25rem","font-size-h2":"1.875rem","font-size-h3":"1.5rem","font-size-h4":"1.25rem","font-size-h5":"1.125rem","font-size-h6":"1rem","font-size-body":"1rem","font-size-small":"0.875rem","line-height-tight":"1.25","line-height-normal":"1.6","space-xs":"0.25rem","space-sm":"0.5rem","space-md":"1rem","space-lg":"1.5rem","space-xl":"2.5rem","radius-sm":"0.25rem","radius-md":"0.5rem","radius-lg":"1rem"},N=(e,o,r)=>{const{base:n,accent:c}=e;if("string"==typeof n&&"string"==typeof c){const e=x[n]?.[c]?.[r];if(e)return e}return o.primary},z=(e,o)=>{const r=((e,o)=>{if("string"!=typeof e)return e[o];const r=$[e];if(!r)throw new Error(`Unknown base '${e}'. Available: ${Object.keys($).join(", ")}.`);return r[o]})(e.base,o),n=(e=>{if("string"!=typeof e)return e;const o=_[e];if(!o)throw new Error(`Unknown accent '${e}'. Available: ${Object.keys(_).join(", ")}.`);return o})(e.accent);return{...A,...r,...n,...j(o,N(e,n,o)),...e.overrides}},M=(e,o,r)=>[`${r}${e} {`,...Object.entries(o).map((([e,o])=>`${r}  ${i(e)}: ${o};`)),`${r}}`].join("\n"),R=e=>{const o=z(e,"light"),r=z(e,"dark"),n=(c=o,a=r,Object.fromEntries(Object.entries(a).filter((([e,o])=>c[e]!==o))));var c,a;return[M(":root",o,""),"","@media (prefers-color-scheme: dark) {",M(':root:not([data-appshell-theme="light"])',n,"  "),"}","",M(':root[data-appshell-theme="dark"]',n,""),""].join("\n")};return o})()));

package/dist/types/contract.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The token contract: the complete, fixed vocabulary a package may consume and an
+ * Application must supply.
+ *
+ * Small and stable is the property that matters. A package authors against these names
+ * with fallbacks (`var(--appshell-primary, #0af)`) and renders standalone; an Application
+ * supplies the values and every package it composes moves together.
+ */
+export type Mode = 'light' | 'dark';
+/** Colour roles an Application's *base* supplies — everything not tied to the accent. */
+export declare const BASE_COLOR_ROLES: readonly ["surface", "on-surface", "surface-raised", "on-surface-raised", "text-muted", "border", "danger", "on-danger", "warning", "on-warning", "success", "on-success"];
+/** Colour roles an Application's *accent* supplies. */
+export declare const ACCENT_COLOR_ROLES: readonly ["primary", "on-primary", "secondary", "on-secondary"];
+/**
+ * Derived rather than authored. Hover and active are computed from their accent with
+ * `color-mix`, and the focus ring is picked per base+accent so it stays visible. A theme
+ * may override any of them; none has to be supplied.
+ */
+export declare const DERIVED_COLOR_ROLES: readonly ["primary-hover", "primary-active", "secondary-hover", "secondary-active", "focus-ring"];
+/**
+ * Named for their role, not their size. A numeric scale would reintroduce exactly the
+ * divergence this contract exists to prevent — one author mapping `h1` to `2xl` and
+ * another to `xl` is how headings stop matching across a composed page.
+ */
+export declare const TYPE_ROLES: readonly ["font-body", "font-mono", "font-size-h1", "font-size-h2", "font-size-h3", "font-size-h4", "font-size-h5", "font-size-h6", "font-size-body", "font-size-small", "line-height-tight", "line-height-normal"];
+/** Genuinely a scale. Nobody wants `--appshell-space-card-padding`. */
+export declare const DIMENSION_ROLES: readonly ["space-xs", "space-sm", "space-md", "space-lg", "space-xl", "radius-sm", "radius-md", "radius-lg"];
+export type BaseColorRole = (typeof BASE_COLOR_ROLES)[number];
+export type AccentColorRole = (typeof ACCENT_COLOR_ROLES)[number];
+export type DerivedColorRole = (typeof DERIVED_COLOR_ROLES)[number];
+export type TypeRole = (typeof TYPE_ROLES)[number];
+export type DimensionRole = (typeof DIMENSION_ROLES)[number];
+export type TokenRole = BaseColorRole | AccentColorRole | DerivedColorRole | TypeRole | DimensionRole;
+export declare const TOKEN_ROLES: readonly TokenRole[];
+export type BaseTokens = Record<BaseColorRole, string>;
+export type AccentTokens = Record<AccentColorRole, string>;
+export type Theme = Record<TokenRole, string>;
+/** The custom property a role is published as. */
+export declare const cssVar: (role: TokenRole) => string;
+/**
+ * Pairs the registry checks for contrast. Because every role that carries text has an
+ * `on-` partner, a theme cannot express illegible text without failing this list — which
+ * is the failure that actually reaches users, and the one a CSS parser alone never catches.
+ */
+export declare const TEXT_PAIRS: readonly (readonly [TokenRole, TokenRole])[];
+/** Muted text has no `on-` partner; it is read against both surfaces. */
+export declare const MUTED_AGAINST: readonly TokenRole[];
+/** Non-text, so 3:1 rather than 4.5:1 — WCAG 1.4.11. */
+export declare const NON_TEXT_PAIRS: readonly (readonly [TokenRole, TokenRole])[];
+export declare const AA_TEXT = 4.5;
+export declare const AA_NON_TEXT = 3;
+//# sourceMappingURL=contract.d.ts.map

package/dist/types/contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract.d.ts","sourceRoot":"","sources":["../../src/contract.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpC,yFAAyF;AACzF,eAAO,MAAM,gBAAgB,4KAanB,CAAC;AAEX,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,iEAAkE,CAAC;AAElG;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mGAMtB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU,qNAab,CAAC;AAEX,uEAAuE;AACvE,eAAO,MAAM,eAAe,8GASlB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,SAAS,GACjB,aAAa,GACb,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,aAAa,CAAC;AAElB,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAM3C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;AACvD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAC3D,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9C,kDAAkD;AAClD,eAAO,MAAM,MAAM,SAAU,SAAS,KAAG,MAA8B,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAQlE,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,SAAS,SAAS,EAAkC,CAAC;AAEjF,wDAAwD;AACxD,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAEtE,CAAC;AAEF,eAAO,MAAM,OAAO,MAAM,CAAC;AAC3B,eAAO,MAAM,WAAW,IAAI,CAAC"}

package/dist/types/contrast.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Contrast checking for a theme.
+ *
+ * Syntax validation on its own earns little: it catches `--appshell-primary: bananas` and
+ * misses `--appshell-on-primary: #fff` on `--appshell-primary: #fff`, which is valid CSS
+ * and invisible text. Checking the `on-` pairs catches the failure that reaches users, and
+ * subsumes syntax validation for free — a value that will not parse cannot be measured.
+ */
+import { type Theme, type TokenRole } from './contract';
+type Rgb = [number, number, number];
+/** Returns undefined rather than throwing — an unmeasurable value is reported, not fatal. */
+export declare const parseColor: (value: string) => Rgb | undefined;
+/** WCAG 2.1 contrast ratio, 1–21. */
+export declare const contrastRatio: (a: Rgb, b: Rgb) => number;
+export type ContrastFinding = {
+    roles: [TokenRole, TokenRole];
+    ratio?: number;
+    required: number;
+    reason: 'below-threshold' | 'unparseable';
+};
+/**
+ * Every finding for a theme. Empty means it passes.
+ *
+ * `color-mix` values are skipped rather than failed: hover and active are derived from
+ * roles that are themselves checked, and resolving them needs a browser.
+ */
+export declare const validateTheme: (theme: Theme) => ContrastFinding[];
+export declare const describeFinding: ({ roles, ratio, required, reason }: ContrastFinding) => string;
+export {};
+//# sourceMappingURL=contrast.d.ts.map

package/dist/types/contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast.d.ts","sourceRoot":"","sources":["../../src/contrast.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAML,KAAK,KAAK,EACV,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAEpB,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AA2BpC,6FAA6F;AAC7F,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,GAAG,GAAG,SAgBhD,CAAC;AAKF,qCAAqC;AACrC,eAAO,MAAM,aAAa,MAAO,GAAG,KAAK,GAAG,KAAG,MAK9C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,iBAAiB,GAAG,aAAa,CAAC;CAC3C,CAAC;AAqBF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,UAAW,KAAK,KAAG,eAAe,EAQ3D,CAAC;AAEF,eAAO,MAAM,eAAe,uCAAwC,eAAe,KAAG,MAGP,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './contract';
+export { contrastRatio, describeFinding, parseColor, validateTheme, type ContrastFinding, } from './contrast';
+export { ACCENTS, BASES, FOCUS_RINGS } from './presets';
+export { composeTheme, DEFAULT_TYPE_AND_DIMENSIONS, toCss, type ThemeSelection } from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EACL,aAAa,EACb,eAAe,EACf,UAAU,EACV,aAAa,EACb,KAAK,eAAe,GACrB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/presets.d.ts

@@ -0,0 +1,5 @@
+import type { AccentTokens, BaseTokens, Mode } from './contract';
+export declare const BASES: Record<string, Record<Mode, BaseTokens>>;
+export declare const ACCENTS: Record<string, AccentTokens>;
+export declare const FOCUS_RINGS: Record<string, Record<string, Record<Mode, string>>>;
+//# sourceMappingURL=presets.d.ts.map

package/dist/types/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/presets.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEjE,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CA6D1D,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA+BhD,CAAC;AAKF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CA6C5E,CAAC"}

package/dist/types/theme.d.ts

@@ -0,0 +1,20 @@
+import { type AccentTokens, type BaseTokens, type Mode, type Theme } from './contract';
+export type ThemeSelection = {
+    /** A base preset name, or the base's own token values. */
+    base: string | Record<Mode, BaseTokens>;
+    /** An accent preset name, or the accent's own token values. */
+    accent: string | AccentTokens;
+    /** Overrides applied last, so an Application can adjust a preset without forking it. */
+    overrides?: Partial<Theme>;
+};
+/** Type and dimensions do not vary by mode, and no preset currently changes them. */
+export declare const DEFAULT_TYPE_AND_DIMENSIONS: Record<string, string>;
+/** The full token map for one mode. */
+export declare const composeTheme: (selection: ThemeSelection, mode: Mode) => Theme;
+/**
+ * Three states, not two: an explicit choice in either direction, and the system default
+ * when nothing is stamped on the root. A theme that only handled `prefers-color-scheme`
+ * would give a viewer no way to override it.
+ */
+export declare const toCss: (selection: ThemeSelection) => string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,KAAK,EAEX,MAAM,YAAY,CAAC;AAGpB,MAAM,MAAM,cAAc,GAAG;IAC3B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACxC,+DAA+D;IAC/D,MAAM,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CAC5B,CAAC;AAwBF,qFAAqF;AACrF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAsB9D,CAAC;AAwCF,uCAAuC;AACvC,eAAO,MAAM,YAAY,cAAe,cAAc,QAAQ,IAAI,KAAG,KAWpE,CAAC;AAmBF;;;;GAIG;AACH,eAAO,MAAM,KAAK,cAAe,cAAc,KAAG,MAgBjD,CAAC"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@appshell/tokens",
+  "version": "1.0.0-alpha.15",
+  "description": "The Appshell design token contract, its presets, and contrast validation",
+  "main": "dist/main.js",
+  "types": "dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/appshellhq/appshell.git"
+  },
+  "author": "Robert Hamilton <rh@navaris.com>",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "webpack --mode production && npm run build:types",
+    "build:types": "tsc --emitDeclarationOnly",
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "start": "webpack --watch --mode development && npm run build:types",
+    "stats": "webpack --json > stats.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "design tokens",
+    "theming",
+    "micro-frontends",
+    "appshell"
+  ],
+  "license": "MIT"
+}