Rename fillColor to colorContext

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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:
 

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,

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)
         );

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);

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);
             }
         }
     }

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);
             }
         }
     }

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) {

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;

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;
     }

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,
 };

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)
         )
 );