AUI: Improve StyleProperty shorthand capabilities

Author: bheston

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,

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

@@ -40,17 +40,17 @@ export function blackOrWhiteByContrastSet(set: InteractiveSwatchSet, minContrast
 // @public
 export type BooleanCondition = string;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const BorderFill: {
     all: (value: StyleValue) => StyleProperties;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const BorderStyle: {
     all: (value: StyleValue) => StyleProperties;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const BorderThickness: {
     all: (value: StyleValue) => StyleProperties;
 };
@@ -133,7 +133,7 @@ export function contrastSwatch(palette: Palette, reference: Swatch, minContrast:
 // @public
 export const convertStylesToFocusState: (styles: Styles) => Styles;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const CornerRadius: {
     all: (value: StyleValue) => StyleProperties;
 };
@@ -300,6 +300,9 @@ export type DesignTokenType = ValuesOf<typeof DesignTokenType> | string;
 // @public
 export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue;
 
+// @public
+export type EffectiveStylePropertiesMap = Map<string, StyleValue>;
+
 // @public
 export class ElementStylesRenderer {
     constructor(styles: Styles);
@@ -410,7 +413,7 @@ export function luminanceSwatch(luminance: number): Swatch;
 // @public
 export function makeSelector(params: StyleModuleEvaluateParameters, state: InteractiveState): string;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const Padding: {
     all: (value: StyleValue) => StyleProperties;
     verticalHorizontal: (valueVertical: StyleValue, valueHorizontal: StyleValue) => StyleProperties;
@@ -555,6 +558,9 @@ export type StyleDeclaration = {
     properties?: StyleProperties;
 };
 
+// @public
+export type StyleKey = StyleProperty | StylePropertyShorthand | (string & Record<never, never>);
+
 // @public
 export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition;
 
@@ -570,10 +576,10 @@ export interface StyleModuleTarget {
 }
 
 // @public
-export type StyleProperties = Partial<Record<StylePropertyCss, StyleValue>>;
+export type StyleProperties = Partial<Record<StyleKey, StyleValue>>;
 
 // @public
-export type StylePropertiesMap = Map<StylePropertyCss, StyleValue>;
+export type StylePropertiesMap = Map<StyleKey, StyleValue>;
 
 // @public
 export const StyleProperty: {
@@ -626,24 +632,41 @@ export const StyleProperty: {
 // @public
 export type StyleProperty = ValuesOf<typeof StyleProperty>;
 
-// @public
+// @public @deprecated
 export const stylePropertyBorderFillAll: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
 
-// @public
+// @public @deprecated
 export const stylePropertyBorderStyleAll: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
 
-// @public
+// @public @deprecated
 export const stylePropertyBorderThicknessAll: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
 
-// @public
+// @public @deprecated
 export const stylePropertyCornerRadiusAll: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
 
-// @public
+// @public @deprecated
 export type StylePropertyCss = StyleProperty | (string & Record<never, never>);
 
-// @public
+// @public @deprecated
 export const stylePropertyPaddingAll: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
 
+// @public (undocumented)
+export const StylePropertyShorthand: {
+    borderFill: ("borderFillTop" | "borderFillRight" | "borderFillBottom" | "borderFillLeft")[];
+    borderThickness: ("borderThicknessTop" | "borderThicknessRight" | "borderThicknessBottom" | "borderThicknessLeft")[];
+    borderStyle: ("borderStyleTop" | "borderStyleRight" | "borderStyleBottom" | "borderStyleLeft")[];
+    cornerRadius: ("cornerRadiusTopLeft" | "cornerRadiusTopRight" | "cornerRadiusBottomRight" | "cornerRadiusBottomLeft")[];
+    margin: ("marginTop" | "marginRight" | "marginBottom" | "marginLeft")[];
+    marginHorizontal: ("marginRight" | "marginLeft")[];
+    marginVertical: ("marginTop" | "marginBottom")[];
+    padding: ("paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft")[];
+    paddingHorizontal: ("paddingRight" | "paddingLeft")[];
+    paddingVertical: ("paddingTop" | "paddingBottom")[];
+};
+
+// @public
+export type StylePropertyShorthand = keyof typeof StylePropertyShorthand;
+
 // @public
 export type StyleRule = {
     target?: StyleModuleTarget;
@@ -660,7 +683,7 @@ export class Styles {
     static compose(styles: Styles[], properties?: StyleProperties, name?: string): Styles;
     get composed(): Styles[] | undefined;
     get effectiveAdaptiveProperties(): Map<StyleProperty, StyleValue>;
-    get effectiveProperties(): StylePropertiesMap;
+    get effectiveProperties(): EffectiveStylePropertiesMap;
     static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles;
     static fromProperties(properties: StyleProperties, name?: string): Styles;
     readonly name: string | undefined;