@appshell/tokens 1.0.0-alpha.26 → 1.0.0-alpha.28
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/index.d.ts +1 -1
- package/dist/types/theme.d.ts +24 -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 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:()=>
|
|
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:()=>a,FOCUS_RINGS:()=>T,MUTED_AGAINST:()=>h,NON_TEXT_PAIRS:()=>d,TEXT_PAIRS:()=>l,TOKEN_ROLES:()=>t,TYPE_ROLES:()=>s,composeTheme:()=>R,contrastRatio:()=>v,cssFrom:()=>L,cssVar:()=>i,describeFinding:()=>w,parseColor:()=>b,pinnedMode:()=>j,resolveTheme:()=>C,toCss:()=>P,toHex:()=>O,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"],s=["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"],a=["space-xs","space-sm","space-md","space-lg","space-xl","radius-sm","radius-md","radius-lg"],t=[...r,...c,...n,...s,...a],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),s=o*Math.sin(c),a=(e+.3963377774*n+.2158037573*s)**3,t=(e-.1055613458*n-.0638541728*s)**3,i=(e-.0894841775*n-1.291485548*s)**3;return[u(p(4.0767416621*a-3.3077115913*t+.2309699292*i)),u(p(-1.2684380046*a+2.6097574011*t-.3413193965*i)),u(p(-.0041960863*a-.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),v=(e,o)=>{const r=S(e),c=S(o);return(Math.max(r,c)+.05)/(Math.min(r,c)+.05)},O=e=>{const o=b(e);if(o)return`#${o.map((e=>Math.round(255*e).toString(16).padStart(2,"0"))).join("")}`},$=(e,o,r)=>o.flatMap((([o,c])=>{const n=[o,c],s=b(e[o]),a=b(e[c]);if(!s||!a)return[{roles:n,required:r,reason:"unparseable"}];const t=v(s,a);return t>=r?[]:[{roles:n,ratio:t,required:r,reason:"below-threshold"}]})),E=e=>[...$(e,l,k),...$(e,h.map((e=>[e,"text-muted"])),k),...$(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=>({light:R(e,"light"),dark:R(e,"dark")}),L=(e,o={})=>{const{colorScheme:r,overrides:c}=o,n=r&&"system"!==r?r:void 0,s=e=>({...e,...c});if(n)return`${I(":root",s(e[n]),"",{"color-scheme":n})}\n`;const a=s(e.light),t=s(e.dark),i=(l=a,h=t,Object.fromEntries(Object.entries(h).filter((([e,o])=>l[e]!==o))));var l,h;return[I(":root",a,"",{"color-scheme":"light dark"}),"","@media (prefers-color-scheme: dark) {",I(':root:not([data-appshell-theme="light"])',i," "),"}","",I(':root[data-appshell-theme="dark"]',i,""),""].join("\n")},P=e=>L(C(e),{colorScheme:e.colorScheme});return o})()));
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export * from './contract';
|
|
2
2
|
export { contrastRatio, describeFinding, parseColor, toHex, validateTheme, type ContrastFinding, } from './contrast';
|
|
3
3
|
export { ACCENTS, BASES, FOCUS_RINGS } from './presets';
|
|
4
|
-
export { composeTheme,
|
|
4
|
+
export { DEFAULT_TYPE_AND_DIMENSIONS, composeTheme, cssFrom, pinnedMode, resolveTheme, toCss, type ColorScheme, type CssOptions, type ResolvedTheme, type ThemeSelection, } from './theme';
|
package/dist/types/theme.d.ts
CHANGED
|
@@ -22,9 +22,33 @@ export declare const pinnedMode: (selection: ThemeSelection) => Mode | undefined
|
|
|
22
22
|
export declare const DEFAULT_TYPE_AND_DIMENSIONS: Record<string, string>;
|
|
23
23
|
/** The full token map for one mode. */
|
|
24
24
|
export declare const composeTheme: (selection: ThemeSelection, mode: Mode) => Theme;
|
|
25
|
+
/**
|
|
26
|
+
* A theme with both modes already worked out.
|
|
27
|
+
*
|
|
28
|
+
* This is the shape a *published* theme stores. Resolving a selection and emitting CSS
|
|
29
|
+
* used to be one step, which meant the only way to render a theme was to re-resolve its
|
|
30
|
+
* preset names — so the values behind a name lived in whatever build was deployed, and an
|
|
31
|
+
* Application's recorded appearance moved when that build did. Materialising both modes
|
|
32
|
+
* lets the values be stored, versioned and rendered from, rather than looked up.
|
|
33
|
+
*/
|
|
34
|
+
export type ResolvedTheme = Record<Mode, Theme>;
|
|
35
|
+
/** Works out both modes of a selection, including any overrides it carries. */
|
|
36
|
+
export declare const resolveTheme: (selection: ThemeSelection) => ResolvedTheme;
|
|
37
|
+
export type CssOptions = {
|
|
38
|
+
/** Defaults to `system`. Belongs to whoever is rendering, not to the theme. */
|
|
39
|
+
colorScheme?: ColorScheme;
|
|
40
|
+
/** Applied over the resolved values, so a consumer can adjust without forking. */
|
|
41
|
+
overrides?: Partial<Theme>;
|
|
42
|
+
};
|
|
25
43
|
/**
|
|
26
44
|
* Three states, not two: an explicit choice in either direction, and the system default
|
|
27
45
|
* when nothing is stamped on the root. A theme that only handled `prefers-color-scheme`
|
|
28
46
|
* would give a viewer no way to override it.
|
|
29
47
|
*/
|
|
48
|
+
export declare const cssFrom: (resolved: ResolvedTheme, options?: CssOptions) => string;
|
|
49
|
+
/**
|
|
50
|
+
* Resolve and emit in one step. The authoring path — a preset name in hand, CSS wanted.
|
|
51
|
+
* The registry uses `cssFrom` against a stored theme instead, so what it renders cannot
|
|
52
|
+
* drift from what was published.
|
|
53
|
+
*/
|
|
30
54
|
export declare const toCss: (selection: ThemeSelection) => string;
|
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.28",
|
|
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": "98536b28cc795ff6fb4964c2a16c2f8334d16c1b"
|
|
35
35
|
}
|