@arbor-css/core 0.0.108 → 0.0.111

package/dist/runtime/components/ModeGraph.js

@@ -1,10 +1,13 @@
-import { isCalcEquation, printEquation } from '@arbor-css/calc';
+import { isCss, printCss } from '@arbor-css/css-eval';
 import { getInternals } from '@arbor-css/preset';
 import { isToken } from '@arbor-css/tokens';
 import { css, html, LitElement } from 'lit-element';
 import { buildModeTokenGraph, } from '../../util/buildModeTokenGraph.js';
-import { getPreset } from '../registration.js';
+import { getContext, getPreset, subscribeToEnvChanges, } from '../registration.js';
 const graphCache = new Map();
+subscribeToEnvChanges(() => {
+    graphCache.clear();
+});
 function memoizedTokenGraph(modeName, preset) {
     const cacheKey = `${modeName}`;
     if (graphCache.has(cacheKey)) {
@@ -17,17 +20,22 @@ function memoizedTokenGraph(modeName, preset) {
         throw new Error(`Mode "${modeName}" not found in preset.`);
     }
     const graph = buildModeTokenGraph(modeInstance, preset, {
+        ...getContext(),
         skipBaking: false,
     });
     graphCache.set(cacheKey, graph);
     return graph;
 }
-class ModeGraph extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = '';
-        this.preset = getPreset();
+// sorts by nest depth (shallow first), then by name alphabetically
+function categoryDepthSort(tokenA, tokenB) {
+    const categoryA = tokenA.split('-').length;
+    const categoryB = tokenB.split('-').length;
+    if (categoryA === categoryB) {
+        return tokenA.localeCompare(tokenB);
     }
+    return categoryA - categoryB;
+}
+class ModeGraph extends LitElement {
     static get properties() {
         return {
             mode: { type: String },
@@ -65,9 +73,16 @@ class ModeGraph extends LitElement {
 				display: flex;
 				flex-direction: column;
 				font-family: monospace;
+				gap: var(--modeGraph-tokens-gap, var(--m-spacing-sm, 4px));
 			}
 		`;
     }
+    constructor() {
+        super();
+        this.mode = '';
+        this.preset = getPreset();
+        subscribeToEnvChanges(() => this.render());
+    }
     render() {
         const graph = memoizedTokenGraph(this.mode, this.preset);
         return html `
@@ -79,10 +94,11 @@ class ModeGraph extends LitElement {
 					</span>
 				</div>
 				<div class="tokens">
-					${graph.roots.map((tokenName) => {
+					${graph.roots.sort(categoryDepthSort).map((tokenName) => {
             return html `<arbor-mode-graph-token
 							.mode=${this.mode}
 							.name=${tokenName}
+							.expanded=${graph.roots.length <= 3}
 						></arbor-mode-graph-token>`;
         })}
 				</div>
@@ -97,6 +113,7 @@ class ModeGraphToken extends LitElement {
         this.mode = '';
         this.dependency = '@@none';
         this.depth = 0;
+        this.expanded = false;
         this.preset = getPreset();
     }
     static get properties() {
@@ -105,6 +122,7 @@ class ModeGraphToken extends LitElement {
             name: { type: String },
             dependency: { type: String, optional: true },
             depth: { type: Number, optional: true },
+            expanded: { type: Boolean, optional: true },
         };
     }
     static get styles() {
@@ -129,15 +147,20 @@ class ModeGraphToken extends LitElement {
 			}
 
 			summary {
-				cursor: pointer;
 				display: flex;
 				flex-direction: column;
+				&[data-has-dependents='true'] {
+					cursor: pointer;
+				}
 			}
 			.summary-line {
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between;
 				align-items: start;
+				white-space: nowrap;
+				gap: var(--modeGraph-token-summary-gap, var(--m-spacing-sm, 4px));
+				max-width: 100%;
 			}
 			.sub-line {
 				color: var(
@@ -148,6 +171,17 @@ class ModeGraphToken extends LitElement {
 					--modeGraph-token-sub-line-font-size,
 					var(--m-text-ambient-size, 12px)
 				);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				min-width: 0;
+				max-width: 100%;
+
+				& > span {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
 			}
 
 			.name {
@@ -162,6 +196,10 @@ class ModeGraphToken extends LitElement {
 				flex-direction: row;
 				align-items: center;
 				gap: var(--modeGraph-token-value-gap, var(--m-spacing-sm, 4px));
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				max-width: 50%;
 			}
 
 			.computed,
@@ -170,9 +208,15 @@ class ModeGraphToken extends LitElement {
 					--modeGraph-token-computed-color,
 					var(--m-surface-ambient-fg, black)
 				);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 			.base-computed {
 				opacity: 0.6;
+				display: inline-flex;
+				flex-direction: row;
+				align-items: center;
 				&::after {
 					content: '→';
 					margin-inline: 4px;
@@ -222,34 +266,12 @@ class ModeGraphToken extends LitElement {
 				);
 				font-size: var(
 					--modeGraph-token-dependent-font-size,
-					var(--m-primitive-typography-size, 14px)
+					var(--m-text-secondary-size, 14px)
 				);
 				display: flex;
 				flex-direction: column;
 			}
-			.dependent-summary {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				flex-wrap: wrap;
-			}
-			.dependent-definition {
-				width: 100%;
-				overflow-x: auto;
-				text-align: left;
-				color: var(
-					--modeGraph-token-dependent-definition-color,
-					var(--m-color-neutral-heavy, darkgray)
-				);
-				font-size: var(
-					--modeGraph-token-dependent-definition-font-size,
-					var(--m-text-ambient-size, 12px)
-				);
-				font-family: var(
-					--modeGraph-token-dependent-definition-font-family,
-					var(--m-primitive-typography-font-mono, monospace)
-				);
-			}
+
 			.dependent-reference {
 				color: var(
 					--modeGraph-token-dependent-reference-color,
@@ -262,6 +284,12 @@ class ModeGraphToken extends LitElement {
 			}
 		`;
     }
+    // need to manually subscribe to trigger updates
+    // when windows size changes vw units, etc
+    connectedCallback() {
+        super.connectedCallback();
+        subscribeToEnvChanges(() => this.requestUpdate());
+    }
     render() {
         const baseGraph = memoizedTokenGraph('base', this.preset);
         const graph = memoizedTokenGraph(this.mode, this.preset);
@@ -271,7 +299,7 @@ class ModeGraphToken extends LitElement {
 				Token "${this.name}" not found in mode "${this.mode}".
 			</div>`;
         }
-        const definitionRaw = isCalcEquation(tokenNode.raw) ? printEquation(tokenNode.raw)
+        const definitionRaw = isCss(tokenNode.raw) ? printCss(tokenNode.raw)
             : isToken(tokenNode.raw) ? tokenNode.raw.name
                 : tokenNode.raw.toString();
         const changed = baseGraph.nodes[this.name]?.computed !== tokenNode.computed;
@@ -284,23 +312,42 @@ class ModeGraphToken extends LitElement {
                 definitionInterleaved.push(html `<span class="dependent-reference">${this.dependency}</span>`);
             }
         }
+        const baseComputed = changed ? baseGraph.nodes[this.name]?.computed : null;
+        const isColor = tokenNode.token.purpose === 'color' ||
+            tokenNode.token.purpose === 'background' ||
+            tokenNode.token.purpose === 'shadow-color';
         return html `
-			<details>
-				<summary>
+			<details
+				.?open=${this.expanded}
+				data-has-dependents=${tokenNode.dependents.length > 0}
+			>
+				<summary data-has-dependents=${tokenNode.dependents.length > 0}>
 					<div class="summary-line">
 						<span class="name">${this.name}</span>
 						<span class="value">
-							${changed ?
-            html `<span class="base-computed"
-									>${baseGraph.nodes[this.name]?.computed ?? 'n/a'}</span
+							${baseComputed ?
+            html `<span class="base-computed" title="${baseComputed}"
+									>${isColor ?
+                html `<arbor-color-swatch
+											.value="${baseComputed}"
+										></arbor-color-swatch>`
+                : baseComputed}</span
 								>`
             : ''}
-							<span class="computed">${tokenNode.computed}</span>
+							<span class="computed" title="${tokenNode.computed}"
+								>${isColor ?
+            html `<arbor-color-swatch
+										.value="${tokenNode.computed}"
+									></arbor-color-swatch>`
+            : tokenNode.computed}</span
+							>
 						</span>
 					</div>
 					${this.depth > 0 ?
             html `<div class="summary-line sub-line">
-							<span class="definition"> ${definitionInterleaved} </span>
+							<span class="definition" title="${definitionRaw}">
+								${definitionInterleaved}
+							</span>
 						</div>`
             : ''}
 					${tokenNode.dependents.length > 0 ?
@@ -318,13 +365,13 @@ class ModeGraphToken extends LitElement {
             : ''}
 				</summary>
 				<ul class="dependents">
-					${tokenNode.dependents.map((dep) => {
+					${tokenNode.dependents.sort(categoryDepthSort).map((dep) => {
             return html `<li class="dependent">
 							<arbor-mode-graph-token
-								mode=${this.mode}
-								name=${dep}
-								dependency=${this.name}
-								depth=${this.depth + 1}
+								.mode=${this.mode}
+								.name=${dep}
+								.dependency=${this.name}
+								.depth=${this.depth + 1}
 							></arbor-mode-graph-token>
 						</li> `;
         })}

package/dist/runtime/components/ModeGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModeGraph.js","sourceRoot":"","sources":["../../../src/runtime/components/ModeGraph.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModeGraph.js","sourceRoot":"","sources":["../../../src/runtime/components/ModeGraph.ts"],"names":[],"mappings":"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"}

package/dist/runtime/components/Outputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Outputs.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAI/C,qBAAa,YAAa,SAAQ,UAAU;IAC3C,MAAM,sLAAe;IACrB,MAAM;CAwCN;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,SAE/B"}
+{"version":3,"file":"Outputs.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAI/C,qBAAa,YAAa,SAAQ,UAAU;IAC3C,MAAM,sLAAe;IACrB,MAAM;CAyCN;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,SAE/B"}

package/dist/runtime/components/Outputs.js

@@ -2,7 +2,7 @@ import { isToken } from '@arbor-css/tokens';
 import { convertStructure } from '@arbor-css/util';
 import { html, LitElement } from 'lit-element';
 import { generateStylesheet } from '../../stylesheet/generateStylesheet.js';
-import { getPreset } from '../registration.js';
+import { getContext, getPreset } from '../registration.js';
 export class ArborOutputs extends LitElement {
     constructor() {
         super(...arguments);
@@ -26,6 +26,7 @@ ${JSON.stringify(convertStructure(this.preset.$.mode, isToken, (token) => token.
 				<summary>Generated CSS</summary>
 				<pre>
 ${generateStylesheet(this.preset, {
+            ...getContext(),
             skipBaking: false,
         })}</pre
 				>

package/dist/runtime/components/Outputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Outputs.js","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QACC,WAAM,GAAG,SAAS,EAAE,CAAC;IAyCtB,CAAC;IAxCA,MAAM;QACL,OAAO,IAAI,CAAA;;;;EAIX,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC5B,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAClB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC5B,UAAU,EAAE,KAAK;SACjB,CAAC;;;GAGJ,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC"}
+{"version":3,"file":"Outputs.js","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QACC,WAAM,GAAG,SAAS,EAAE,CAAC;IA0CtB,CAAC;IAzCA,MAAM;QACL,OAAO,IAAI,CAAA;;;;EAIX,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC5B,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAClB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC5B,GAAG,UAAU,EAAE;YACf,UAAU,EAAE,KAAK;SACjB,CAAC;;;GAGJ,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC"}

package/dist/runtime/components/SpacingScale.js

@@ -1,7 +1,7 @@
 import { isToken } from '@arbor-css/tokens';
 import { css, html, LitElement } from 'lit-element';
 import { resolveComputedTokenValue } from '../../util/resolveComputedTokenValue.js';
-import { getPreset } from '../registration.js';
+import { getContext, getPreset } from '../registration.js';
 class SpacingScale extends LitElement {
     constructor() {
         super(...arguments);
@@ -36,7 +36,7 @@ class SpacingScale extends LitElement {
             .filter(isToken)
             .map((token) => ({
             name: token.name,
-            value: resolveComputedTokenValue(this.preset, token.name),
+            value: resolveComputedTokenValue(this.preset, token.name, getContext()),
         }));
         return html `
 			${steps.map(({ name, value }) => html `

package/dist/runtime/components/SpacingScale.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpacingScale.js","sourceRoot":"","sources":["../../../src/runtime/components/SpacingScale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA0BC,WAAM,GAAG,SAAS,EAAE,CAAC;IAqBtB,CAAC;IA9CA,MAAM,KAAK,MAAM;QAChB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBT,CAAC;IACH,CAAC;IAID,MAAM;QACL,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;aACrD,MAAM,CAAC,OAAO,CAAC;aACf,GAAG,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC;YACrB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC;SACzD,CAAC,CAAC,CAAC;QAEL,OAAO,IAAI,CAAA;KACR,KAAK,CAAC,GAAG,CACV,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEhB,IAAI,MAAM,KAAK;wCACY,KAAK;;KAExC,CACD;GACD,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"SpacingScale.js","sourceRoot":"","sources":["../../../src/runtime/components/SpacingScale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA0BC,WAAM,GAAG,SAAS,EAAE,CAAC;IAqBtB,CAAC;IA9CA,MAAM,KAAK,MAAM;QAChB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBT,CAAC;IACH,CAAC;IAID,MAAM;QACL,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;aACrD,MAAM,CAAC,OAAO,CAAC;aACf,GAAG,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC;YACrB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;SACvE,CAAC,CAAC,CAAC;QAEL,OAAO,IAAI,CAAA;KACR,KAAK,CAAC,GAAG,CACV,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEhB,IAAI,MAAM,KAAK;wCACY,KAAK;;KAExC,CACD;GACD,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;AAC5D,CAAC"}

package/dist/runtime/components/SystemDemo.d.ts

@@ -0,0 +1,2 @@
+export default function register(): void;
+//# sourceMappingURL=SystemDemo.d.ts.map

package/dist/runtime/components/SystemDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemDemo.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/SystemDemo.ts"],"names":[],"mappings":"AA+BA,MAAM,CAAC,OAAO,UAAU,QAAQ,SAE/B"}

package/dist/runtime/components/SystemDemo.js

@@ -0,0 +1,32 @@
+import { css, html, LitElement } from 'lit-element';
+class SystemDemo extends LitElement {
+    static get styles() {
+        return css `
+			:host {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+				gap: var(--m-spacing-lg);
+				box-sizing: border-box;
+				width: 100%;
+			}
+		`;
+    }
+    render() {
+        return html `
+			<div>
+				<arbor-intent-demos></arbor-intent-demos>
+				<hr />
+				<arbor-spacing-scale></arbor-spacing-scale>
+				<hr />
+				<arbor-mixins-list></arbor-mixins-list>
+				<arbor-functions-list></arbor-functions-list>
+			</div>
+			<arbor-mode-graph mode="base"></arbor-mode-graph>
+			<arbor-outputs></arbor-outputs>
+		`;
+    }
+}
+export default function register() {
+    customElements.define('arbor-system-demo', SystemDemo);
+}
+//# sourceMappingURL=SystemDemo.js.map

package/dist/runtime/components/SystemDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemDemo.js","sourceRoot":"","sources":["../../../src/runtime/components/SystemDemo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,UAAW,SAAQ,UAAU;IAClC,MAAM,KAAK,MAAM;QAChB,OAAO,GAAG,CAAA;;;;;;;;GAQT,CAAC;IACH,CAAC;IAED,MAAM;QACL,OAAO,IAAI,CAAA;;;;;;;;;;;GAWV,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AACxD,CAAC"}

package/dist/runtime/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,QAAQ,SAQ/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,UAAU,QAAQ,SAU/B"}

package/dist/runtime/components/index.js

@@ -1,9 +1,11 @@
+import registerColorSwatch from './ColorSwatch.js';
 import registerFunctionsList from './FunctionsList.js';
 import registerIntentDemos from './IntentDemos.js';
 import registerMixinsList from './MixinsList.js';
 import registerModeGraph from './ModeGraph.js';
 import registerOutputs from './Outputs.js';
 import registerSpacingScale from './SpacingScale.js';
+import registerSystemDemo from './SystemDemo.js';
 export default function register() {
     registerModeGraph();
     registerOutputs();
@@ -11,6 +13,8 @@ export default function register() {
     registerMixinsList();
     registerIntentDemos();
     registerSpacingScale();
+    registerColorSwatch();
+    registerSystemDemo();
     console.debug('Arbor Runtime components registered');
 }
 //# sourceMappingURL=index.js.map

package/dist/runtime/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;AACvD,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;AACnD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AACjD,OAAO,iBAAiB,MAAM,gBAAgB,CAAC;AAC/C,OAAO,eAAe,MAAM,cAAc,CAAC;AAC3C,OAAO,oBAAoB,MAAM,mBAAmB,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,kBAAkB,EAAE,CAAC;IACrB,mBAAmB,EAAE,CAAC;IACtB,oBAAoB,EAAE,CAAC;IACvB,OAAO,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;AACtD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;AACnD,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;AACvD,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;AACnD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AACjD,OAAO,iBAAiB,MAAM,gBAAgB,CAAC;AAC/C,OAAO,eAAe,MAAM,cAAc,CAAC;AAC3C,OAAO,oBAAoB,MAAM,mBAAmB,CAAC;AACrD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,kBAAkB,EAAE,CAAC;IACrB,mBAAmB,EAAE,CAAC;IACtB,oBAAoB,EAAE,CAAC;IACvB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,CAAC;IACrB,OAAO,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;AACtD,CAAC"}

package/dist/runtime/registration.d.ts

@@ -1,6 +1,10 @@
+import { CssEnvValues, CssResolutionContext } from '@arbor-css/css-eval';
 import { ArborPreset } from '@arbor-css/preset/config';
 export declare const ready: Promise<void>;
 export declare function getPreset(): ArborPreset;
+export declare function getEnvValues(): CssEnvValues;
+export declare function getContext(): CssResolutionContext;
+export declare function subscribeToEnvChanges(callback: () => void): () => void;
 export declare function getStyleSheet(): CSSStyleSheet;
-export declare function connect(arbor: ArborPreset<any, any>): void;
+export declare function connect(arbor: ArborPreset<any, any>): Promise<void>;
 //# sourceMappingURL=registration.d.ts.map

package/dist/runtime/registration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registration.d.ts","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,eAAO,MAAM,KAAK,eAA8C,CAAC;AAEjE,wBAAgB,SAAS,IAAI,WAAW,CAOvC;AAED,wBAAgB,aAAa,IAAI,aAAa,CAO7C;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,QASnD"}
+{"version":3,"file":"registration.d.ts","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,oBAAoB,EAEpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,eAAO,MAAM,KAAK,eAA8C,CAAC;AAGjE,wBAAgB,SAAS,IAAI,WAAW,CAOvC;AAED,wBAAgB,YAAY,IAAI,YAAY,CAW3C;AAED,wBAAgB,UAAU,IAAI,oBAAoB,CAUjD;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,IAAI,cAOzD;AAED,wBAAgB,aAAa,IAAI,aAAa,CAO7C;AAED,wBAAsB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,iBAUzD"}

package/dist/runtime/registration.js

@@ -1,23 +1,54 @@
+import { loadSimplifier } from '@arbor-css/css-eval/browser';
 import { generateStylesheet } from '../stylesheet/generateStylesheet.js';
 import register from './components/index.js';
 let preset = undefined;
 let styleSheet = undefined;
 let resolve = () => { };
 export const ready = new Promise((res) => (resolve = res));
+let simplifier;
 export function getPreset() {
     if (!preset) {
         throw new Error('Arbor configuration has not been set. Please call connect() first.');
     }
     return preset;
 }
+export function getEnvValues() {
+    const vw = window.visualViewport?.width ?? window.innerWidth;
+    const vh = window.visualViewport?.height ?? window.innerHeight;
+    const rootFontSize = getComputedStyle(document.documentElement).fontSize;
+    const rem = rootFontSize.includes('px') ? parseFloat(rootFontSize) : undefined;
+    return {
+        deviceWidthPx: vw,
+        deviceHeightPx: vh,
+        remPx: rem,
+    };
+}
+export function getContext() {
+    if (!simplifier) {
+        throw new Error('Arbor CSS simplifier has not been initialized. Please call connect() first.');
+    }
+    return {
+        simplifier,
+        envValues: getEnvValues(),
+    };
+}
+export function subscribeToEnvChanges(callback) {
+    window.addEventListener('resize', callback);
+    window.visualViewport?.addEventListener('resize', callback);
+    return () => {
+        window.removeEventListener('resize', callback);
+        window.visualViewport?.removeEventListener('resize', callback);
+    };
+}
 export function getStyleSheet() {
     if (!styleSheet) {
         throw new Error('Arbor stylesheet has not been generated. Please call connect() first.');
     }
     return styleSheet;
 }
-export function connect(arbor) {
+export async function connect(arbor) {
     preset = arbor;
+    simplifier = await loadSimplifier({ passes: 2 });
     // by turning off layers, we make the generated CSS take precedence over any existing pregenerated stylesheet.
     const styles = generateStylesheet(preset, { layer: false });
     styleSheet = new CSSStyleSheet();

package/dist/runtime/registration.js.map

@@ -1 +1 @@
-{"version":3,"file":"registration.js","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,IAAI,MAAM,GAAsC,SAAS,CAAC;AAC1D,IAAI,UAAU,GAA8B,SAAS,CAAC;AACtD,IAAI,OAAO,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,OAAO,CAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;AAEjE,MAAM,UAAU,SAAS;IACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACd,oEAAoE,CACpE,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACd,uEAAuE,CACvE,CAAC;IACH,CAAC;IACD,OAAO,UAAU,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,KAA4B;IACnD,MAAM,GAAG,KAAK,CAAC;IACf,8GAA8G;IAC9G,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5D,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;IACjC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAC3E,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"registration.js","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,IAAI,MAAM,GAAsC,SAAS,CAAC;AAC1D,IAAI,UAAU,GAA8B,SAAS,CAAC;AACtD,IAAI,OAAO,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,OAAO,CAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;AACjE,IAAI,UAAyB,CAAC;AAE9B,MAAM,UAAU,SAAS;IACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACd,oEAAoE,CACpE,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC;AAED,MAAM,UAAU,YAAY;IAC3B,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,EAAE,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC;IAC7D,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC;IAC/D,MAAM,YAAY,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,GAAG,GACR,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,OAAO;QACN,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,EAAE;QAClB,KAAK,EAAE,GAAG;KACV,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU;IACzB,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACd,6EAA6E,CAC7E,CAAC;IACH,CAAC;IACD,OAAO;QACN,UAAU;QACV,SAAS,EAAE,YAAY,EAAE;KACzB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,QAAoB;IACzD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC5C,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC5D,OAAO,GAAG,EAAE;QACX,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC/C,MAAM,CAAC,cAAc,EAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChE,CAAC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACd,uEAAuE,CACvE,CAAC;IACH,CAAC;IACD,OAAO,UAAU,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,KAA4B;IACzD,MAAM,GAAG,KAAK,CAAC;IACf,UAAU,GAAG,MAAM,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IACjD,8GAA8G;IAC9G,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5D,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;IACjC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAC3E,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;AACZ,CAAC"}

package/dist/runtime/tokenGroups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokenGroups.d.ts","sourceRoot":"","sources":["../../src/runtime/tokenGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAqB,MAAM,mBAAmB,CAAC;AAE1E,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW;;;;;;;;;;;;sCAoD8tE,CAAC;sBAAgD,CAAC;;;;;;;;;;;;;0CAAid,CAAC;0BAAoD,CAAC;;;;;;;;;;;;;;;;0CAAojB,CAAC;0BAAoD,CAAC;;;;;;;eATp6G,KAAK;iBACH,KAAK;qBACD,KAAK;;EAMtB"}
+{"version":3,"file":"tokenGroups.d.ts","sourceRoot":"","sources":["../../src/runtime/tokenGroups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAqB,MAAM,mBAAmB,CAAC;AAE1E,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW;;;;;;;;;;;;sCAoD6uE,CAAC;sBAAgD,CAAC;;;;;;;;;;;;;0CAAid,CAAC;0BAAoD,CAAC;;;;;;;;;;;;;;;;0CAAojB,CAAC;0BAAoD,CAAC;;;;;;;eATn7G,KAAK;iBACH,KAAK;qBACD,KAAK;;EAMtB"}

package/dist/stylesheet/generateStylesheet.d.ts

@@ -1,6 +1,8 @@
+import { CssSimplifier } from '@arbor-css/css-eval';
 import { AnyArborPreset } from '@arbor-css/preset/config';
-export declare function generateStylesheet(config: AnyArborPreset, { layer: cascadeLayerName, skipBaking, }?: {
+export declare function generateStylesheet(config: AnyArborPreset, { layer: cascadeLayerName, skipBaking, simplifier, }?: {
     layer?: string | false;
     skipBaking?: boolean;
+    simplifier?: CssSimplifier;
 }): string;
 //# sourceMappingURL=generateStylesheet.d.ts.map

package/dist/stylesheet/generateStylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateStylesheet.d.ts","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAIxE,wBAAgB,kBAAkB,CACjC,MAAM,EAAE,cAAc,EACtB,EACC,KAAK,EAAE,gBAA0B,EACjC,UAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CAChB,GACJ,MAAM,CAyBR"}
+{"version":3,"file":"generateStylesheet.d.ts","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAIxE,wBAAgB,kBAAkB,CACjC,MAAM,EAAE,cAAc,EACtB,EACC,KAAK,EAAE,gBAA0B,EACjC,UAAU,EACV,UAAU,GACV,GAAE;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,aAAa,CAAC;CACtB,GACJ,MAAM,CAyBR"}

package/dist/stylesheet/generateStylesheet.js

@@ -1,14 +1,14 @@
 import { getInternals } from '@arbor-css/preset/config';
 import { flattenTokenSchema } from '@arbor-css/tokens';
 import { modeToCss } from './modeToCss.js';
-export function generateStylesheet(config, { layer: cascadeLayerName = 'arbor', skipBaking, } = {}) {
+export function generateStylesheet(config, { layer: cascadeLayerName = 'arbor', skipBaking, simplifier, } = {}) {
     const { modes } = getInternals(config);
     const allModeProps = flattenTokenSchema(config.$.mode);
     return `/* Auto-generated CSS - do not edit directly */
 	${cascadeLayerName ? `@layer ${cascadeLayerName} {` : ''}
 ${[config.baseMode, ...Object.values(modes)]
         .map((modeValue) => {
-        return modeToCss(modeValue, config, { skipBaking });
+        return modeToCss(modeValue, config, { simplifier, skipBaking });
     })
         .join('\n\n')}
 /* Function definitions */

package/dist/stylesheet/generateStylesheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateStylesheet.js","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,UAAU,kBAAkB,CACjC,MAAsB,EACtB,EACC,KAAK,EAAE,gBAAgB,GAAG,OAAO,EACjC,UAAU,MAIP,EAAE;IAEN,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEvD,OAAO;GACL,gBAAgB,CAAC,CAAC,CAAC,UAAU,gBAAgB,IAAI,CAAC,CAAC,CAAC,EAAE;EACvD,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC1C,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;QAClB,OAAO,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;SACD,IAAI,CAAC,MAAM,CAAC;;EAEZ,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;SAC/B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC;SAC1B,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,MAAM,CAAC;;EAEZ,YAAY;SACZ,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC;SAC9B,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,MAAM,CAAC;EACZ,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;CAC5B;SACE,IAAI,EAAE;SACN,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC"}
+{"version":3,"file":"generateStylesheet.js","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,UAAU,kBAAkB,CACjC,MAAsB,EACtB,EACC,KAAK,EAAE,gBAAgB,GAAG,OAAO,EACjC,UAAU,EACV,UAAU,MAKP,EAAE;IAEN,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEvD,OAAO;GACL,gBAAgB,CAAC,CAAC,CAAC,UAAU,gBAAgB,IAAI,CAAC,CAAC,CAAC,EAAE;EACvD,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC1C,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;QAClB,OAAO,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC;SACD,IAAI,CAAC,MAAM,CAAC;;EAEZ,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;SAC/B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC;SAC1B,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,MAAM,CAAC;;EAEZ,YAAY;SACZ,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC;SAC9B,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,MAAM,CAAC;EACZ,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;CAC5B;SACE,IAAI,EAAE;SACN,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC"}

package/dist/stylesheet/generateStylesheet.test.js

@@ -9,12 +9,12 @@ it("generates a preset's CSS, including globals, primitives, modes, and function
             },
             mainColor: 'brand',
         },
-        globals: {
-            roundness: 1,
+        shape: {
+            roundness: '1',
         },
     });
-    const css = generateStylesheet(preset);
-    expect(css).toContain('--m-global-roundness: 1');
+    const css = generateStylesheet(preset, {});
+    expect(css).toContain('--m-global-shape-roundness: 1');
     expect(css).toContain('--m-primitive-color-brand-mid: ');
     expect(css).toContain('--m-color-main: ');
     expect(css).toContain('@function --fn-color-lighter');

package/dist/stylesheet/generateStylesheet.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateStylesheet.test.js","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,EAAE,CAAC,+EAA+E,EAAE,GAAG,EAAE;IACxF,MAAM,MAAM,GAAG,WAAW,CAAC;QAC1B,KAAK,EAAE;YACN,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;aAClB;YACD,SAAS,EAAE,OAAO;SAClB;QACD,OAAO,EAAE;YACR,SAAS,EAAE,CAAC;SACZ;KACD,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAEvC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC;IACjD,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC;IACzD,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC"}
+{"version":3,"file":"generateStylesheet.test.js","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,EAAE,CAAC,+EAA+E,EAAE,GAAG,EAAE;IACxF,MAAM,MAAM,GAAG,WAAW,CAAC;QAC1B,KAAK,EAAE;YACN,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;aAClB;YACD,SAAS,EAAE,OAAO;SAClB;QACD,KAAK,EAAE;YACN,SAAS,EAAE,GAAG;SACd;KACD,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAE3C,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,+BAA+B,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC;IACzD,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC"}

package/dist/stylesheet/modeToCss.d.ts

@@ -1,7 +1,6 @@
+import { CssResolutionContext } from '@arbor-css/css-eval';
 import { ModeInstance } from '@arbor-css/modes';
 import { ArborPreset } from '@arbor-css/preset';
 import { SimpleTokenSchema } from '@arbor-css/tokens';
-export declare function modeToCss<TModeShape extends SimpleTokenSchema>(mode: ModeInstance<TModeShape>, preset: ArborPreset<TModeShape>, { skipBaking }?: {
-    skipBaking?: boolean;
-}): string;
+export declare function modeToCss<TModeShape extends SimpleTokenSchema>(mode: ModeInstance<TModeShape>, preset: ArborPreset<TModeShape>, ctx: CssResolutionContext): string;
 //# sourceMappingURL=modeToCss.d.ts.map

package/dist/stylesheet/modeToCss.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modeToCss.d.ts","sourceRoot":"","sources":["../../src/stylesheet/modeToCss.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAMtD,wBAAgB,SAAS,CAAC,UAAU,SAAS,iBAAiB,EAC7D,IAAI,EAAE,YAAY,CAAC,UAAU,CAAC,EAC9B,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC,EAC/B,EAAE,UAAU,EAAE,GAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAO,GAC3C,MAAM,CAgCR"}
+{"version":3,"file":"modeToCss.d.ts","sourceRoot":"","sources":["../../src/stylesheet/modeToCss.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAoB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAMtD,wBAAgB,SAAS,CAAC,UAAU,SAAS,iBAAiB,EAC7D,IAAI,EAAE,YAAY,CAAC,UAAU,CAAC,EAC9B,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC,EAC/B,GAAG,EAAE,oBAAoB,GACvB,MAAM,CA8BR"}

package/dist/stylesheet/modeToCss.js

@@ -1,10 +1,8 @@
 import { getModeInternals } from '@arbor-css/modes';
 import { buildModeTokenGraph, walkModeTokenGraph, } from '../util/buildModeTokenGraph.js';
-export function modeToCss(mode, preset, { skipBaking } = {}) {
+export function modeToCss(mode, preset, ctx) {
     const modeInternals = getModeInternals(mode);
-    const graph = buildModeTokenGraph(mode, preset, {
-        skipBaking,
-    });
+    const graph = buildModeTokenGraph(mode, preset, ctx);
     const valuesCss = walkModeTokenGraph(graph).reduce((acc, node) => `${acc}${node.token.name}: ${node.computed};\n`, '');
     const content = [valuesCss, preset.modeSchema.extraCss]
         .filter(Boolean)