Rename fillColor to colorContext (#265)

bheston · web-flow · commit c440b520fafa · 2025-09-22T12:03:15.000-07:00
diff --git a/change/@adaptive-web-adaptive-ui-8c8f6c84-57c3-4d8e-a436-454ac2f76be4.json b/change/@adaptive-web-adaptive-ui-8c8f6c84-57c3-4d8e-a436-454ac2f76be4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Rename fillColor to colorContext",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@adaptive-web-adaptive-ui-designer-core-7ccbfed0-3249-4681-b5c3-120ea4aa80a0.json b/change/@adaptive-web-adaptive-ui-designer-core-7ccbfed0-3249-4681-b5c3-120ea4aa80a0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Rename fillColor to colorContext",
+  "packageName": "@adaptive-web/adaptive-ui-designer-core",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@adaptive-web-adaptive-web-components-80e4915e-6d95-4e32-a1da-f9c8524f5841.json b/change/@adaptive-web-adaptive-web-components-80e4915e-6d95-4e32-a1da-f9c8524f5841.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Rename fillColor to colorContext",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/examples/use-adaptive-components/src/index.ts b/examples/use-adaptive-components/src/index.ts
@@ -19,7 +19,7 @@ AdaptiveDesignSystem.defineComponents({
 
 import {
     accentBaseColor,
-    fillColor,
+    colorContext,
     LayerBaseLuminance,
     layerFillBaseLuminance,
     layerFillFixedBase
@@ -30,9 +30,9 @@ import { Color } from '@adaptive-web/adaptive-ui';
 // This must be called during initialization for the Design Tokens to be setup so the component styling is applied.
 DesignToken.registerDefaultStyleTarget();
 
-// The `fillColor` Design Token is the reference for many color recipes - setup the layering system as that basis.
+// The `colorContext` Design Token is the reference for many color recipes - setup the layering system as that basis.
 // Look at the css for how this displays in the browser in the plain html model.
-fillColor.withDefault(layerFillFixedBase);
+colorContext.withDefault(layerFillFixedBase);
 
 // Simple event handlers to change Design Token values:
 
diff --git a/packages/adaptive-ui-designer-core/src/registry/recipes.ts b/packages/adaptive-ui-designer-core/src/registry/recipes.ts
@@ -17,6 +17,7 @@ import {
     bodyFontFamily,
     bodyFontStyle,
     bodyFontWeight,
+    colorContext,
     cornerRadiusControl,
     cornerRadiusLayer,
     criticalBaseColor,
@@ -223,6 +224,7 @@ const designTokens: DesignTokenStore = [
 ];
 
 const colorTokens: DesignTokenOrGroupStore = [
+    colorContext,
     // Layer
     layerFillFixedMinus4,
     layerFillFixedMinus3,
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts
@@ -1,7 +1,7 @@
 import { customElement, FASTElement, html } from "@microsoft/fast-element";
 import { DesignToken, StaticDesignTokenValue } from "@microsoft/fast-foundation";
 import { Color } from "@adaptive-web/adaptive-ui";
-import { fillColor } from "@adaptive-web/adaptive-ui/reference";
+import { colorContext } from "@adaptive-web/adaptive-ui/reference";
 import { DesignTokenValue, PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core";
 import { UIController } from "./ui-controller.js";
 
@@ -126,7 +126,7 @@ export class ElementsController {
         const element = this.getElementForNode(node);
         const val = token.getValueFor(element);
         // console.log("      getDesignTokenValue", node.id, node.type, token.name, "value", this.valueToString(val));
-        // console.log("        fill color", fillColor.getValueFor(element)?.toColorString(), element);
+        // console.log("        color context", colorContext.getValueFor(element)?.toColorString(), element);
         return val;
     }
 
@@ -194,7 +194,7 @@ export class ElementsController {
     }
 
     private resetFillColorForElement(element: FASTElement) {
-        this.setDesignTokenForElement(element, fillColor, null);
+        this.setDesignTokenForElement(element, colorContext, null);
         element.childNodes.forEach(child =>
             this.resetFillColorForElement(child as unknown as FASTElement)
         );
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts
@@ -2,7 +2,7 @@ import { calc } from '@csstools/css-calc';
 import { FASTElement, observable } from "@microsoft/fast-element";
 import { CSSDesignToken, DesignToken, type ValuesOf } from "@microsoft/fast-foundation";
 import { Color, InteractiveState, InteractiveTokenGroup, StyleProperty, Styles } from "@adaptive-web/adaptive-ui";
-import { fillColor } from "@adaptive-web/adaptive-ui/reference";
+import { colorContext } from "@adaptive-web/adaptive-ui/reference";
 import {
     AdaptiveDesignToken,
     AdaptiveDesignTokenOrGroup,
@@ -258,7 +258,7 @@ export class UIController {
                                     source,
                                 });
                             } else {
-                                console.warn("    token type not supported >", typeof token, token);
+                                console.warn("    token type not supported >", typeof token, token, applied.tokenID, applied.value);
                             }
                         }
                     } else if (applied.tokenID) {
@@ -341,7 +341,7 @@ export class UIController {
                                     source,
                                 });
                             } else {
-                                console.warn("    token type not supported >", typeof value, value);
+                                console.warn("    token type not supported >", typeof value, value, target);
                             }
                         }
                     }
@@ -381,7 +381,7 @@ export class UIController {
             if (colorHex) {
                 const parentElement = this._elements.getElementForNode(node).parentElement as FASTElement;
                 // console.log("    setting fill color token on parent element", colorHex, parentElement.id, parentElement.title);
-                this._elements.setDesignTokenForElement(parentElement, fillColor, Color.parse(colorHex));
+                this._elements.setDesignTokenForElement(parentElement, colorContext, Color.parse(colorHex));
             }
 
             const allApplied = this.collectEffectiveAppliedStyles(node);
@@ -420,8 +420,8 @@ export class UIController {
                     value = ret;
                 }
             }
-            // const fillColorValue = (this._elements.getDesignTokenValue(node, fillColor) as Color).toColorString();
-            // console.log("    evaluateEffectiveAppliedDesignToken", target, " : ", token.name, " -> ", value, valueDebug, `(from ${info.source})`, "fillColor", fillColorValue);
+            // const colorContextValue = (this._elements.getDesignTokenValue(node, colorContext) as Color).toColorString();
+            // console.log("    evaluateEffectiveAppliedDesignToken", target, " : ", token.name, " -> ", value, valueDebug, `(from ${info.source})`, "colorContext", colorContextValue);
 
             const applied = new AppliedStyleValue(value);
             node.effectiveAppliedStyleValues.set(target, applied);
diff --git a/packages/adaptive-ui-explorer/src/components/color-block.ts b/packages/adaptive-ui-explorer/src/components/color-block.ts
@@ -10,7 +10,7 @@ import {
     accentHueShiftGradientFillSubtleElementStyles,
     accentOutlineDiscernibleControlStyles,
     accentToHighlightGradientFillSubtleElementStyles,
-    fillColor,
+    colorContext,
     highlightFillDiscernibleControlStyles,
     highlightFillIdealControlStyles,
     highlightFillReadableControlStyles,
@@ -205,7 +205,7 @@ const styles = css`
         min-height: 100%;
         padding: 36px;
         gap: 24px;
-        background-color: ${fillColor};
+        background-color: ${colorContext};
         color: ${neutralStrokeReadable.rest};
     }
 
@@ -273,7 +273,7 @@ export class ColorBlock extends FASTElement {
         if (this.color && this.$fastController.isConnected) {
             const color = Color.parse(this.color)
             if (color) {
-                fillColor.setValueFor(this, color);
+                colorContext.setValueFor(this, color);
             }
         }
     }
diff --git a/packages/adaptive-ui-explorer/src/components/layer-background/index.ts b/packages/adaptive-ui-explorer/src/components/layer-background/index.ts
@@ -1,6 +1,6 @@
 import { Color } from '@adaptive-web/adaptive-ui';
 import {
-    fillColor,
+    colorContext,
     layerFillBaseLuminance,
     layerFillFixedBase,
     layerFillFixedMinus1,
@@ -23,7 +23,7 @@ const layerBackgroundStyles = css`
 
     :host {
         display: block;
-        background: ${fillColor};
+        background: ${colorContext};
         color: ${neutralStrokeStrongRest};
     }
 `;
@@ -93,7 +93,7 @@ export class LayerBackground extends FASTElement {
             }
 
             if (swatch !== null) {
-                fillColor.setValueFor(this, swatch);
+                colorContext.setValueFor(this, swatch);
             }
         }
     }
diff --git a/packages/adaptive-ui-explorer/src/components/style-example.ts b/packages/adaptive-ui-explorer/src/components/style-example.ts
@@ -1,5 +1,5 @@
 import { Color, InteractiveTokenGroup, StyleProperty, Styles, TypedCSSDesignToken } from "@adaptive-web/adaptive-ui";
-import { densityControl, fillColor } from '@adaptive-web/adaptive-ui/reference';
+import { colorContext, densityControl } from '@adaptive-web/adaptive-ui/reference';
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 import { css, customElement, FASTElement, html, observable, repeat, volatile, when } from "@microsoft/fast-element";
 import { AdaptiveComponent } from "./adaptive-component.js";
@@ -76,10 +76,10 @@ export class StyleExample extends FASTElement {
     public get styleValues(): StyleValue[] {
         const values: StyleValue[] = [];
 
-        let backgroundRest = fillColor;
-        let backgroundHover = fillColor;
-        let backgroundActive = fillColor;
-        let backgroundFocus = fillColor;
+        let backgroundRest = colorContext;
+        let backgroundHover = colorContext;
+        let backgroundActive = colorContext;
+        let backgroundFocus = colorContext;
 
         const backgroundValue = this.styles?.effectiveProperties?.get(StyleProperty.backgroundFill);
         if (backgroundValue) {
diff --git a/packages/adaptive-ui-explorer/src/components/swatch.ts b/packages/adaptive-ui-explorer/src/components/swatch.ts
@@ -1,5 +1,5 @@
 import { Color } from "@adaptive-web/adaptive-ui";
-import { densityControl, fillColor, neutralStrokeReadableRest, typeRampMinus1FontSize } from "@adaptive-web/adaptive-ui/reference";
+import { colorContext, densityControl, neutralStrokeReadableRest, typeRampMinus1FontSize } from "@adaptive-web/adaptive-ui/reference";
 import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
 import {
     attr,
@@ -115,15 +115,15 @@ export class AppSwatch extends FASTElement {
     public connectedCallback() {
         super.connectedCallback();
 
-        fillColor.subscribe(this);
+        colorContext.subscribe(this);
 
         this.updateObservables();
     }
 
     public disconnectedCallback() {
         super.disconnectedCallback();
 
-        fillColor.unsubscribe(this);
+        colorContext.unsubscribe(this);
     }
 
     public handleChange() {
@@ -183,7 +183,7 @@ export class AppSwatch extends FASTElement {
                 : this.fillRecipe,
             this.type === SwatchType.foreground
                 ? this.fillRecipe
-                : fillColor
+                : colorContext
         );
 
         this.contrastMessage = contrastMessage;
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts b/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts
@@ -1,8 +1,8 @@
 import { css } from "@microsoft/fast-element";
 import {
     bodyFontFamily,
+    colorContext,
     cornerRadiusLayer,
-    fillColor,
     neutralStrokeStrongRest,
     typeRampPlus3FontSize,
     typeRampPlus3LineHeight
@@ -18,7 +18,7 @@ export const sampleAppStyles = css`
         color: ${neutralStrokeStrongRest};
         min-height: 650px;
         min-width: 775px;
-        background: ${fillColor};
+        background: ${colorContext};
         border-radius: ${cornerRadiusLayer};
         --gutter: 20;
     }
diff --git a/packages/adaptive-ui/src/core/color/recipe.ts b/packages/adaptive-ui/src/core/color/recipe.ts
@@ -11,7 +11,7 @@ import { Palette } from "./palette.js";
  */
 export type ColorRecipeParams = {
     /**
-     * The reference color, implementation defaults to `fillColor`, but allows for overriding for nested color recipes.
+     * The reference color, implementation defaults to `colorContext`, but allows for overriding for nested color recipes.
      */
     reference: Paint | null,
 };
diff --git a/packages/adaptive-ui/src/migration/color.ts b/packages/adaptive-ui/src/migration/color.ts
@@ -23,7 +23,7 @@ import {
     accentStrokeReadableFocus,
     accentStrokeReadableHover,
     accentStrokeReadableRest,
-    fillColor,
+    colorContext,
     fillDiscernibleActiveDelta,
     fillDiscernibleFocusDelta,
     fillDiscernibleHoverDelta,
@@ -426,14 +426,14 @@ export const neutralFillInputRecipe = createTokenColorRecipe(
         interactiveSwatchSetAsOverlay(
             deltaSwatchSet(
                 resolve(neutralPalette),
-                params?.reference || resolve(fillColor),
+                params?.reference || resolve(colorContext),
                 resolve(neutralFillInputRestDelta),
                 resolve(neutralFillInputHoverDelta),
                 resolve(neutralFillInputActiveDelta),
                 resolve(neutralFillInputFocusDelta),
                 1,
             ),
-            params?.reference as Color || resolve(fillColor),
+            params?.reference as Color || resolve(colorContext),
             resolve(neutralAsOverlay)
         )
 );
@@ -477,14 +477,14 @@ export const neutralFillSecondaryRecipe = createTokenColorRecipe(
         interactiveSwatchSetAsOverlay(
             deltaSwatchSet(
                 resolve(neutralPalette),
-                params?.reference || resolve(fillColor),
+                params?.reference || resolve(colorContext),
                 resolve(neutralFillSecondaryRestDelta),
                 resolve(neutralFillSecondaryHoverDelta),
                 resolve(neutralFillSecondaryActiveDelta),
                 resolve(neutralFillSecondaryFocusDelta),
                 1,
             ),
-            params?.reference as Color || resolve(fillColor),
+            params?.reference as Color || resolve(colorContext),
             resolve(neutralAsOverlay)
         )
 );
@@ -573,10 +573,10 @@ export const neutralStrokeDividerRecipe = createTokenColorRecipe(
         swatchAsOverlay(
             deltaSwatch(
                 resolve(neutralPalette),
-                params?.reference || resolve(fillColor),
+                params?.reference || resolve(colorContext),
                 resolve(neutralStrokeDividerRestDelta)
             ),
-            params?.reference as Color || resolve(fillColor),
+            params?.reference as Color || resolve(colorContext),
             resolve(neutralAsOverlay)
         )!
 );
@@ -608,14 +608,14 @@ export const neutralStrokeInputRecipe = createTokenColorRecipe(
         interactiveSwatchSetAsOverlay(
             deltaSwatchSet(
                 resolve(neutralPalette),
-                params?.reference || resolve(fillColor),
+                params?.reference || resolve(colorContext),
                 resolve(neutralStrokeInputRestDelta),
                 resolve(neutralStrokeInputHoverDelta),
                 resolve(neutralStrokeInputActiveDelta),
                 resolve(neutralStrokeInputFocusDelta),
                 1,
             ),
-            params?.reference as Color || resolve(fillColor),
+            params?.reference as Color || resolve(colorContext),
             resolve(neutralAsOverlay)
         )
 );
diff --git a/packages/adaptive-ui/src/reference/color.ts b/packages/adaptive-ui/src/reference/color.ts
diff --git a/packages/adaptive-ui/src/reference/experimental.ts b/packages/adaptive-ui/src/reference/experimental.ts
diff --git a/packages/adaptive-ui/src/reference/layer.ts b/packages/adaptive-ui/src/reference/layer.ts
diff --git a/packages/adaptive-ui/src/reference/modules.ts b/packages/adaptive-ui/src/reference/modules.ts
diff --git a/packages/adaptive-web-components/src/components/calendar/calendar.styles.ts b/packages/adaptive-web-components/src/components/calendar/calendar.styles.ts

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { calc } from '@csstools/css-calc';`
`2`	`2`	`import { FASTElement, observable } from "@microsoft/fast-element";`
`3`	`3`	`import { CSSDesignToken, DesignToken, type ValuesOf } from "@microsoft/fast-foundation";`
`4`	`4`	`import { Color, InteractiveState, InteractiveTokenGroup, StyleProperty, Styles } from "@adaptive-web/adaptive-ui";`
`5`		`-import { fillColor } from "@adaptive-web/adaptive-ui/reference";`
	`5`	`+import { colorContext } from "@adaptive-web/adaptive-ui/reference";`
`6`	`6`	`import {`
`7`	`7`	`AdaptiveDesignToken,`
`8`	`8`	`AdaptiveDesignTokenOrGroup,`
`@@ -258,7 +258,7 @@ export class UIController {`
`258`	`258`	`source,`
`259`	`259`	`});`
`260`	`260`	`} else {`
`261`		`- console.warn(" token type not supported >", typeof token, token);`
	`261`	`+ console.warn(" token type not supported >", typeof token, token, applied.tokenID, applied.value);`
`262`	`262`	`}`
`263`	`263`	`}`
`264`	`264`	`} else if (applied.tokenID) {`
`@@ -341,7 +341,7 @@ export class UIController {`
`341`	`341`	`source,`
`342`	`342`	`});`
`343`	`343`	`} else {`
`344`		`- console.warn(" token type not supported >", typeof value, value);`
	`344`	`+ console.warn(" token type not supported >", typeof value, value, target);`
`345`	`345`	`}`
`346`	`346`	`}`
`347`	`347`	`}`
`@@ -381,7 +381,7 @@ export class UIController {`
`381`	`381`	`if (colorHex) {`
`382`	`382`	`const parentElement = this._elements.getElementForNode(node).parentElement as FASTElement;`
`383`	`383`	`// console.log(" setting fill color token on parent element", colorHex, parentElement.id, parentElement.title);`
`384`		`- this._elements.setDesignTokenForElement(parentElement, fillColor, Color.parse(colorHex));`
	`384`	`+ this._elements.setDesignTokenForElement(parentElement, colorContext, Color.parse(colorHex));`
`385`	`385`	`}`
`386`	`386`
`387`	`387`	`const allApplied = this.collectEffectiveAppliedStyles(node);`
`@@ -420,8 +420,8 @@ export class UIController {`
`420`	`420`	`value = ret;`
`421`	`421`	`}`
`422`	`422`	`}`
`423`		`- // const fillColorValue = (this._elements.getDesignTokenValue(node, fillColor) as Color).toColorString();`
`424`		- // console.log(" evaluateEffectiveAppliedDesignToken", target, " : ", token.name, " -> ", value, valueDebug, `(from ${info.source})`, "fillColor", fillColorValue);
	`423`	`+ // const colorContextValue = (this._elements.getDesignTokenValue(node, colorContext) as Color).toColorString();`
	`424`	+ // console.log(" evaluateEffectiveAppliedDesignToken", target, " : ", token.name, " -> ", value, valueDebug, `(from ${info.source})`, "colorContext", colorContextValue);
`425`	`425`
`426`	`426`	`const applied = new AppliedStyleValue(value);`
`427`	`427`	`node.effectiveAppliedStyleValues.set(target, applied);`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import {`
`10`	`10`	`accentHueShiftGradientFillSubtleElementStyles,`
`11`	`11`	`accentOutlineDiscernibleControlStyles,`
`12`	`12`	`accentToHighlightGradientFillSubtleElementStyles,`
`13`		`- fillColor,`
	`13`	`+ colorContext,`
`14`	`14`	`highlightFillDiscernibleControlStyles,`
`15`	`15`	`highlightFillIdealControlStyles,`
`16`	`16`	`highlightFillReadableControlStyles,`
@@ -205,7 +205,7 @@ const styles = css`
`205`	`205`	`min-height: 100%;`
`206`	`206`	`padding: 36px;`
`207`	`207`	`gap: 24px;`
`208`		`- background-color: ${fillColor};`
	`208`	`+ background-color: ${colorContext};`
`209`	`209`	`color: ${neutralStrokeReadable.rest};`
`210`	`210`	`}`
`211`	`211`
`@@ -273,7 +273,7 @@ export class ColorBlock extends FASTElement {`
`273`	`273`	`if (this.color && this.$fastController.isConnected) {`
`274`	`274`	`const color = Color.parse(this.color)`
`275`	`275`	`if (color) {`
`276`		`- fillColor.setValueFor(this, color);`
	`276`	`+ colorContext.setValueFor(this, color);`
`277`	`277`	`}`
`278`	`278`	`}`
`279`	`279`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { Color } from '@adaptive-web/adaptive-ui';`
`2`	`2`	`import {`
`3`		`- fillColor,`
	`3`	`+ colorContext,`
`4`	`4`	`layerFillBaseLuminance,`
`5`	`5`	`layerFillFixedBase,`
`6`	`6`	`layerFillFixedMinus1,`
@@ -23,7 +23,7 @@ const layerBackgroundStyles = css`
`23`	`23`
`24`	`24`	`:host {`
`25`	`25`	`display: block;`
`26`		`- background: ${fillColor};`
	`26`	`+ background: ${colorContext};`
`27`	`27`	`color: ${neutralStrokeStrongRest};`
`28`	`28`	`}`
`29`	`29`	`;
`@@ -93,7 +93,7 @@ export class LayerBackground extends FASTElement {`
`93`	`93`	`}`
`94`	`94`
`95`	`95`	`if (swatch !== null) {`
`96`		`- fillColor.setValueFor(this, swatch);`
	`96`	`+ colorContext.setValueFor(this, swatch);`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`	`}`