AUI: Improve StyleProperty shorthand capabilities (#231)

Author: bheston

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": "47367562+bheston@users.noreply.github.com",
+  "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": "47367562+bheston@users.noreply.github.com",
+  "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": "47367562+bheston@users.noreply.github.com",
+  "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),
 });
 

package-lock.json

@@ -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-core/src/registry/custom-recipes.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,