@appshell/tokens 1.0.0-alpha.22 → 1.0.0-alpha.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +1 -1
- package/dist/types/contrast.d.ts +8 -0
- package/dist/types/index.d.ts +2 -2
- package/dist/types/theme.d.ts +11 -0
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 c in r)("object"==typeof exports?exports:e)[c]=r[c]}}(this,(()=>(()=>{"use strict";var e={d:(o,r)=>{for(var c in r)e.o(r,c)&&!e.o(o,c)&&Object.defineProperty(o,c,{enumerable:!0,get:r[c]})},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:()=>m,AA_TEXT:()=>k,ACCENTS:()=>x,ACCENT_COLOR_ROLES:()=>c,BASES:()=>_,BASE_COLOR_ROLES:()=>r,DEFAULT_TYPE_AND_DIMENSIONS:()=>N,DERIVED_COLOR_ROLES:()=>n,DIMENSION_ROLES:()=>s,FOCUS_RINGS:()=>T,MUTED_AGAINST:()=>h,NON_TEXT_PAIRS:()=>d,TEXT_PAIRS:()=>l,TOKEN_ROLES:()=>t,TYPE_ROLES:()=>a,composeTheme:()=>R,contrastRatio:()=>O,cssVar:()=>i,describeFinding:()=>w,parseColor:()=>b,pinnedMode:()=>j,toCss:()=>C,toHex:()=>$,validateTheme:()=>E});const r=["surface","on-surface","surface-raised","on-surface-raised","text-muted","border","danger","on-danger","warning","on-warning","success","on-success"],c=["primary","on-primary","secondary","on-secondary"],n=["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,...c,...n,...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,m=3,u=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 c=r*Math.PI/180,n=o*Math.cos(c),a=o*Math.sin(c),s=(e+.3963377774*n+.2158037573*a)**3,t=(e-.1055613458*n-.0638541728*a)**3,i=(e-.0894841775*n-1.291485548*a)**3;return[u(p(4.0767416621*s-3.3077115913*t+.2309699292*i)),u(p(-1.2684380046*s+2.6097574011*t-.3413193965*i)),u(p(-.0041960863*s-.7034186147*t+1.707614701*i))]})(Number(r[1])/100,Number(r[2]),Number(r[3]));const c=y.exec(o);if(c){const e=3===c[1].length?[...c[1]].map((e=>e+e)).join(""):c[1];return[0,2,4].map((o=>parseInt(e.slice(o,o+2),16)/255))}},S=([e,o,r])=>.2126*f(e)+.7152*f(o)+.0722*f(r),O=(e,o)=>{const r=S(e),c=S(o);return(Math.max(r,c)+.05)/(Math.min(r,c)+.05)},$=e=>{const o=b(e);if(o)return`#${o.map((e=>Math.round(255*e).toString(16).padStart(2,"0"))).join("")}`},v=(e,o,r)=>o.flatMap((([o,c])=>{const n=[o,c],a=b(e[o]),s=b(e[c]);if(!a||!s)return[{roles:n,required:r,reason:"unparseable"}];const t=O(a,s);return t>=r?[]:[{roles:n,ratio:t,required:r,reason:"below-threshold"}]})),E=e=>[...v(e,l,k),...v(e,h.map((e=>[e,"text-muted"])),k),...v(e,d,m)],w=({roles:e,ratio:o,required:r,reason:c})=>"unparseable"===c?`${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)"}}},x={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)"}},T={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)"}}},j=e=>e.colorScheme&&"system"!==e.colorScheme?e.colorScheme:void 0,M=(e,o,r)=>`color-mix(in oklch, var(${i(e)}), ${o} ${r})`,A=(e,o)=>{const r="dark"===e?"white":"black",c="dark"===e?"black":"white";return{"primary-hover":M("primary",r,"12%"),"primary-active":M("primary",c,"10%"),"secondary-hover":M("secondary",r,"12%"),"secondary-active":M("secondary",c,"10%"),"focus-ring":o}},N={"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"},z=(e,o,r)=>{const{base:c,accent:n}=e;if("string"==typeof c&&"string"==typeof n){const e=T[c]?.[n]?.[r];if(e)return e}return o.primary},R=(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),c=(e=>{if("string"!=typeof e)return e;const o=x[e];if(!o)throw new Error(`Unknown accent '${e}'. Available: ${Object.keys(x).join(", ")}.`);return o})(e.accent);return{...N,...r,...c,...A(o,z(e,c,o)),...e.overrides}},I=(e,o,r,c={})=>[`${r}${e} {`,...Object.entries(c).map((([e,o])=>`${r} ${e}: ${o};`)),...Object.entries(o).map((([e,o])=>`${r} ${i(e)}: ${o};`)),`${r}}`].join("\n"),C=e=>{const o=j(e);if(o){const r=R(e,o);return`${I(":root",r,"",{"color-scheme":o})}\n`}const r=R(e,"light"),c=R(e,"dark"),n=(a=r,s=c,Object.fromEntries(Object.entries(s).filter((([e,o])=>a[e]!==o))));var a,s;return[I(":root",r,"",{"color-scheme":"light dark"}),"","@media (prefers-color-scheme: dark) {",I(':root:not([data-appshell-theme="light"])',n," "),"}","",I(':root[data-appshell-theme="dark"]',n,""),""].join("\n")};return o})()));
|
package/dist/types/contrast.d.ts
CHANGED
|
@@ -12,6 +12,14 @@ type Rgb = [number, number, number];
|
|
|
12
12
|
export declare const parseColor: (value: string) => Rgb | undefined;
|
|
13
13
|
/** WCAG 2.1 contrast ratio, 1–21. */
|
|
14
14
|
export declare const contrastRatio: (a: Rgb, b: Rgb) => number;
|
|
15
|
+
/**
|
|
16
|
+
* A colour as `#rrggbb`.
|
|
17
|
+
*
|
|
18
|
+
* `<meta name="theme-color">` takes a CSS colour, but browser support for `oklch` there
|
|
19
|
+
* is not something to rely on for a hint the page cannot detect the failure of — a
|
|
20
|
+
* value the browser does not understand is simply ignored, silently.
|
|
21
|
+
*/
|
|
22
|
+
export declare const toHex: (value: string) => string | undefined;
|
|
15
23
|
export type ContrastFinding = {
|
|
16
24
|
roles: [TokenRole, TokenRole];
|
|
17
25
|
ratio?: number;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export * from './contract';
|
|
2
|
-
export { contrastRatio, describeFinding, parseColor, validateTheme, type ContrastFinding, } from './contrast';
|
|
2
|
+
export { contrastRatio, describeFinding, parseColor, toHex, validateTheme, type ContrastFinding, } from './contrast';
|
|
3
3
|
export { ACCENTS, BASES, FOCUS_RINGS } from './presets';
|
|
4
|
-
export { composeTheme, DEFAULT_TYPE_AND_DIMENSIONS, toCss, type ThemeSelection } from './theme';
|
|
4
|
+
export { composeTheme, DEFAULT_TYPE_AND_DIMENSIONS, pinnedMode, toCss, type ColorScheme, type ThemeSelection, } from './theme';
|
package/dist/types/theme.d.ts
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
import { type AccentTokens, type BaseTokens, type Mode, type Theme } from './contract';
|
|
2
|
+
/**
|
|
3
|
+
* `system` follows the viewer's preference. Pinning a scheme is for an application that
|
|
4
|
+
* ships one look on purpose, and it is honoured all the way down: the palette stops
|
|
5
|
+
* varying, the root is stamped so the tokens cannot be swapped underneath it, and the
|
|
6
|
+
* browser is told which scheme to render its own scrollbars and form controls in.
|
|
7
|
+
*/
|
|
8
|
+
export type ColorScheme = 'system' | 'light' | 'dark';
|
|
2
9
|
export type ThemeSelection = {
|
|
3
10
|
/** A base preset name, or the base's own token values. */
|
|
4
11
|
base: string | Record<Mode, BaseTokens>;
|
|
5
12
|
/** An accent preset name, or the accent's own token values. */
|
|
6
13
|
accent: string | AccentTokens;
|
|
14
|
+
/** Defaults to `system`. */
|
|
15
|
+
colorScheme?: ColorScheme;
|
|
7
16
|
/** Overrides applied last, so an Application can adjust a preset without forking it. */
|
|
8
17
|
overrides?: Partial<Theme>;
|
|
9
18
|
};
|
|
19
|
+
/** The mode a pinned scheme resolves to, or undefined when it follows the viewer. */
|
|
20
|
+
export declare const pinnedMode: (selection: ThemeSelection) => Mode | undefined;
|
|
10
21
|
/** Type and dimensions do not vary by mode, and no preset currently changes them. */
|
|
11
22
|
export declare const DEFAULT_TYPE_AND_DIMENSIONS: Record<string, string>;
|
|
12
23
|
/** The full token map for one mode. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appshell/tokens",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.23",
|
|
4
4
|
"description": "The Appshell design token contract, its presets, and contrast validation",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"appshell"
|
|
32
32
|
],
|
|
33
33
|
"license": "MIT",
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "c6a783bb4602f305b98b2cc618a5a20e74538fca"
|
|
35
35
|
}
|