Merge branch 'main' into dependabot/npm_and_yarn/rollup-2.79.2

Author: bheston

change/@adaptive-web-adaptive-ui-d4b8c096-adce-4fec-8616-9f0320e1f530.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add support for margin properties",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-dda26682-04a9-49e9-abb3-c4c13a75350b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Improve StyleProperty shorthand capabilities",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-core-848b0782-1e38-4b1d-9704-28611cffce60.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Improve StyleProperty shorthand capabilities",
+  "packageName": "@adaptive-web/adaptive-ui-designer-core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-figma-4c209d8b-7be9-46a2-8600-17463e77f670.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add support for margin properties",
+  "packageName": "@adaptive-web/adaptive-ui-designer-figma",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-f8c4444f-eeae-489a-9d3d-8f84c8fc761b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Add support for looking up Token Groups in anatomy",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-web-components-0a6dc60f-a996-4459-a2ab-6fa972eda308.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Improve StyleProperty shorthand capabilities",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

examples/customize-component/src/index.ts

@@ -1,5 +1,4 @@
 import {
-    BorderFill,
     createForegroundSet,
     Styles
 } from "@adaptive-web/adaptive-ui";
@@ -39,7 +38,7 @@ AdaptiveDesignSystem.defineComponents({
 // Define a custom style module.
 const accentOutlineReadableControlStyles: Styles = Styles.fromProperties({
     backgroundFill: neutralFillSubtle,
-    ...BorderFill.all(accentStrokeReadable),
+    borderFill: accentStrokeReadable,
     foregroundFill: createForegroundSet(accentStrokeReadableRecipe, neutralFillSubtle),
 });
 

packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts

@@ -9,7 +9,7 @@ import {
     Palette,
     PaletteRGB,
     StyleProperty,
-    stylePropertyBorderFillAll,
+    StylePropertyShorthand,
     Swatch,
 } from "@adaptive-web/adaptive-ui";
 import {
@@ -34,7 +34,7 @@ export const docPalette = createNonCss<Palette>("doc-palette").withDefault(
 
 export const docForegroundRecipe = createTokenColorRecipe(
     "doc-foreground",
-    [...stylePropertyBorderFillAll, StyleProperty.foregroundFill],
+    [...StylePropertyShorthand.borderFill, StyleProperty.foregroundFill],
     (resolve: DesignTokenResolver, params?: ColorRecipeParams) =>
         contrastSwatch(
             resolve(docPalette),

packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts

@@ -2,10 +2,7 @@ import { css, customElement, FASTElement, html, observable, repeat, when } from
 import { staticallyCompose } from "@microsoft/fast-foundation";
 import {
     StyleProperty,
-    stylePropertyBorderFillAll,
-    stylePropertyBorderThicknessAll,
-    stylePropertyCornerRadiusAll,
-    stylePropertyPaddingAll
+    StylePropertyShorthand,
 } from "@adaptive-web/adaptive-ui";
 import {
     cornerRadiusControl,
@@ -283,7 +280,7 @@ const template = html<App>`
                                         TokenGlyphType.backgroundSwatch)}
                                 ${(x) =>
                                     availableTokensTemplate(
-                                        stylePropertyBorderFillAll,
+                                        StylePropertyShorthand.borderFill,
                                         "Stroke",
                                         "stack",
                                         TokenGlyphType.borderSwatch
@@ -312,12 +309,12 @@ const template = html<App>`
                                 ${(x) => availableStylesTemplate("Shape")}
                                 ${(x) =>
                                     availableTokensTemplate(
-                                        stylePropertyCornerRadiusAll,
+                                        StylePropertyShorthand.cornerRadius,
                                         "Corner radius",
                                     )}
                                 ${(x) =>
                                     availableTokensTemplate(
-                                        stylePropertyBorderThicknessAll,
+                                        StylePropertyShorthand.borderThickness,
                                         "Stroke thickness",
                                     )}
                             </div>
@@ -336,7 +333,7 @@ const template = html<App>`
                                 ${(x) => availableStylesTemplate("Density")}
                                 ${(x) =>
                                     availableTokensTemplate(
-                                        [...stylePropertyPaddingAll, StyleProperty.gap],
+                                        [...StylePropertyShorthand.padding, StyleProperty.gap],
                                         "Density",
                                     )}
                             </div>
@@ -673,10 +670,10 @@ export class App extends FASTElement {
     private refreshObservables() {
         this.backgroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.backgroundFill]);
         this.foregroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.foregroundFill]);
-        this.borderFillTokens = this.controller.styles.getAppliedDesignTokens(stylePropertyBorderFillAll);
-        this.borderThicknessTokens = this.controller.styles.getAppliedDesignTokens(stylePropertyBorderThicknessAll);
-        this.densityTokens = this.controller.styles.getAppliedDesignTokens([...stylePropertyPaddingAll, StyleProperty.gap]);
-        this.cornerRadiusTokens = this.controller.styles.getAppliedDesignTokens(stylePropertyCornerRadiusAll);
+        this.borderFillTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.borderFill);
+        this.borderThicknessTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.borderThickness);
+        this.densityTokens = this.controller.styles.getAppliedDesignTokens([...StylePropertyShorthand.padding, StyleProperty.gap]);
+        this.cornerRadiusTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.cornerRadius);
         this.textTokens = this.controller.styles.getAppliedDesignTokens([
             StyleProperty.fontFamily,
             StyleProperty.fontStyle,

packages/adaptive-ui-designer-figma/src/lib/anatomy.ts

@@ -230,7 +230,7 @@ function parseComponent(node: PluginUINodeData): Anatomy {
 function isContextNode(node: PluginUINodeData, componentName: string): boolean {
     // Remove non-ascii characters (we tried a convention of decorating template node names)
     const nodeName = node.name.replace(/[^\x20-\x7F]/g, "").trim();
-    return node.type === "COMPONENT" || nodeName.toLowerCase() === componentName.toLowerCase();
+    return node.type === "COMPONENT" || componentName.toLowerCase().indexOf(nodeName.toLowerCase()) !== -1;
 }
 
 function walkNode(node: PluginUINodeData, componentName: string, condition: Record<string, string | boolean> | undefined, anatomy: Anatomy): void {