From 8fd5b7fa62951d1bfb83015c1214128c4ee685ac Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Wed, 16 Oct 2024 20:41:33 -0700 Subject: [PATCH] AUI: Improve StyleProperty shorthand capabilities (#231) --- ...-dda26682-04a9-49e9-abb3-c4c13a75350b.json | 7 ++ ...-848b0782-1e38-4b1d-9704-28611cffce60.json | 7 ++ ...-0a6dc60f-a996-4459-a2ab-6fa972eda308.json | 7 ++ examples/customize-component/src/index.ts | 3 +- package-lock.json | 64 +++++------ .../src/registry/custom-recipes.ts | 4 +- .../src/ui/app.ts | 21 ++-- packages/adaptive-ui/docs/api-report.md | 51 ++++++--- .../adaptive-ui/src/core/density/index.ts | 4 +- .../core/modules/element-styles-renderer.ts | 8 +- .../adaptive-ui/src/core/modules/styles.ts | 77 +++++++++---- .../adaptive-ui/src/core/modules/types.ts | 107 +++++++++++++----- packages/adaptive-ui/src/migration/color.ts | 6 +- .../adaptive-ui/src/reference/appearance.ts | 10 +- packages/adaptive-ui/src/reference/color.ts | 20 ++-- packages/adaptive-ui/src/reference/modules.ts | 25 ++-- .../progress/progress.styles.modules.ts | 5 +- .../tooltip/tooltip.styles.modules.ts | 3 - 18 files changed, 272 insertions(+), 157 deletions(-) create mode 100644 change/@adaptive-web-adaptive-ui-dda26682-04a9-49e9-abb3-c4c13a75350b.json create mode 100644 change/@adaptive-web-adaptive-ui-designer-core-848b0782-1e38-4b1d-9704-28611cffce60.json create mode 100644 change/@adaptive-web-adaptive-web-components-0a6dc60f-a996-4459-a2ab-6fa972eda308.json diff --git a/change/@adaptive-web-adaptive-ui-dda26682-04a9-49e9-abb3-c4c13a75350b.json b/change/@adaptive-web-adaptive-ui-dda26682-04a9-49e9-abb3-c4c13a75350b.json new file mode 100644 index 00000000..b8195bc4 --- /dev/null +++ b/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" +} diff --git a/change/@adaptive-web-adaptive-ui-designer-core-848b0782-1e38-4b1d-9704-28611cffce60.json b/change/@adaptive-web-adaptive-ui-designer-core-848b0782-1e38-4b1d-9704-28611cffce60.json new file mode 100644 index 00000000..e9c48a2d --- /dev/null +++ b/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" +} diff --git a/change/@adaptive-web-adaptive-web-components-0a6dc60f-a996-4459-a2ab-6fa972eda308.json b/change/@adaptive-web-adaptive-web-components-0a6dc60f-a996-4459-a2ab-6fa972eda308.json new file mode 100644 index 00000000..19548263 --- /dev/null +++ b/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" +} diff --git a/examples/customize-component/src/index.ts b/examples/customize-component/src/index.ts index 9959a0af..d557f606 100644 --- a/examples/customize-component/src/index.ts +++ b/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), }); diff --git a/package-lock.json b/package-lock.json index e36b9a7b..b5906ad3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "devDependencies": { "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3", + "vite": "^4.5.5", "vite-plugin-svgo": "^1.3.0" } }, @@ -661,9 +661,9 @@ } }, "examples/customize-component/node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -738,7 +738,7 @@ "devDependencies": { "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3", + "vite": "^4.5.5", "vite-plugin-svgo": "^1.3.0" } }, @@ -1364,9 +1364,9 @@ } }, "examples/use-adaptive-components/node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -33119,7 +33119,7 @@ "esbuild": "^0.17.10", "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3", + "vite": "^4.5.5", "vite-plugin-singlefile": "^0.13.3", "vite-plugin-svgo": "^1.3.0" }, @@ -33715,9 +33715,9 @@ } }, "packages/adaptive-ui-designer-figma-plugin/node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -33869,7 +33869,7 @@ "devDependencies": { "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3" + "vite": "^4.5.5" } }, "packages/adaptive-ui-explorer/node_modules/@esbuild/android-arm": { @@ -34338,9 +34338,9 @@ } }, "packages/adaptive-ui-explorer/node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -34983,7 +34983,7 @@ "esbuild": "^0.17.10", "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3", + "vite": "^4.5.5", "vite-plugin-singlefile": "^0.13.3", "vite-plugin-svgo": "^1.3.0" }, @@ -35306,9 +35306,9 @@ } }, "vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "requires": { "esbuild": "^0.18.10", @@ -35379,7 +35379,7 @@ "culori": "^3.2.0", "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3" + "vite": "^4.5.5" }, "dependencies": { "@esbuild/android-arm": { @@ -35614,9 +35614,9 @@ } }, "vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "requires": { "esbuild": "^0.18.10", @@ -35772,7 +35772,7 @@ "@adaptive-web/adaptive-web-components": "0.7.4", "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3", + "vite": "^4.5.5", "vite-plugin-svgo": "^1.3.0" }, "dependencies": { @@ -36123,9 +36123,9 @@ } }, "vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "requires": { "esbuild": "^0.18.10", @@ -36151,7 +36151,7 @@ "@adaptive-web/adaptive-web-components": "0.7.4", "rimraf": "^3.0.2", "typescript": "^4.7.0", - "vite": "^4.5.3", + "vite": "^4.5.5", "vite-plugin-svgo": "^1.3.0" }, "dependencies": { @@ -36502,9 +36502,9 @@ } }, "vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "requires": { "esbuild": "^0.18.10", diff --git a/packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts b/packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts index 08f6bdc5..a4e83add 100644 --- a/packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts +++ b/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("doc-palette").withDefault( export const docForegroundRecipe = createTokenColorRecipe( "doc-foreground", - [...stylePropertyBorderFillAll, StyleProperty.foregroundFill], + [...StylePropertyShorthand.borderFill, StyleProperty.foregroundFill], (resolve: DesignTokenResolver, params?: ColorRecipeParams) => contrastSwatch( resolve(docPalette), diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts index ca2aa1f4..3c1ee707 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts +++ b/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` TokenGlyphType.backgroundSwatch)} ${(x) => availableTokensTemplate( - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, "Stroke", "stack", TokenGlyphType.borderSwatch @@ -312,12 +309,12 @@ const template = html` ${(x) => availableStylesTemplate("Shape")} ${(x) => availableTokensTemplate( - stylePropertyCornerRadiusAll, + StylePropertyShorthand.cornerRadius, "Corner radius", )} ${(x) => availableTokensTemplate( - stylePropertyBorderThicknessAll, + StylePropertyShorthand.borderThickness, "Stroke thickness", )} @@ -336,7 +333,7 @@ const template = html` ${(x) => availableStylesTemplate("Density")} ${(x) => availableTokensTemplate( - [...stylePropertyPaddingAll, StyleProperty.gap], + [...StylePropertyShorthand.padding, StyleProperty.gap], "Density", )} @@ -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, diff --git a/packages/adaptive-ui/docs/api-report.md b/packages/adaptive-ui/docs/api-report.md index 9af0b2cb..02469eb3 100644 --- a/packages/adaptive-ui/docs/api-report.md +++ b/packages/adaptive-ui/docs/api-report.md @@ -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 | string; // @public export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue; +// @public +export type EffectiveStylePropertiesMap = Map; + // @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); + // @public export type StyleModuleEvaluateParameters = StyleModuleTarget & InteractivityDefinition; @@ -570,10 +576,10 @@ export interface StyleModuleTarget { } // @public -export type StyleProperties = Partial>; +export type StyleProperties = Partial>; // @public -export type StylePropertiesMap = Map; +export type StylePropertiesMap = Map; // @public export const StyleProperty: { @@ -626,24 +632,41 @@ export const StyleProperty: { // @public export type StyleProperty = ValuesOf; -// @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); -// @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; - get effectiveProperties(): StylePropertiesMap; + get effectiveProperties(): EffectiveStylePropertiesMap; static fromDeclaration(declaration: StyleDeclaration, name?: string): Styles; static fromProperties(properties: StyleProperties, name?: string): Styles; readonly name: string | undefined; diff --git a/packages/adaptive-ui/src/core/density/index.ts b/packages/adaptive-ui/src/core/density/index.ts index 208e7f14..aa5a3813 100644 --- a/packages/adaptive-ui/src/core/density/index.ts +++ b/packages/adaptive-ui/src/core/density/index.ts @@ -4,7 +4,7 @@ import { DesignToken } from "@microsoft/fast-foundation"; import { DesignTokenType, TypedCSSDesignToken, TypedDesignToken } from "../adaptive-design-tokens.js"; import { TokenGroup } from "../types.js"; import { createTokenDimension, createTokenNonCss } from "../token-helpers.js"; -import { StyleProperty, stylePropertyBorderThicknessAll } from "../modules/types.js"; +import { StyleProperty, StylePropertyShorthand } from "../modules/types.js"; /** * The adjustment (plus or minus) to density unit values. @@ -148,7 +148,7 @@ export class DensityPaddingAndGapTokenGroup implements TokenGroup { ) { this.designUnit = createTokenDimension(`${name}.designUnit`).withDefault(designUnit); - this.borderThickness = createTokenDimension(`${name}.borderThickness`, stylePropertyBorderThicknessAll).withDefault(borderThickness); + this.borderThickness = createTokenDimension(`${name}.borderThickness`, StylePropertyShorthand.borderThickness).withDefault(borderThickness); this.horizontalPaddingUnits = createTokenNonCss( `${name}.horizontal.paddingUnits`, diff --git a/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts b/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts index eeaf4b44..48747d92 100644 --- a/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts +++ b/packages/adaptive-ui/src/core/modules/element-styles-renderer.ts @@ -4,7 +4,7 @@ import { CSSDesignToken } from "@microsoft/fast-foundation"; import { Interactivity, type InteractivityDefinition, type StyleModuleTarget, StyleProperty } from "../modules/types.js"; import { InteractiveState, InteractiveValues } from "../types.js"; import { makeSelector } from "./selector.js"; -import type { ComponentAnatomy, StyleModuleEvaluateParameters, StylePropertyCss, StyleRules } from "./types.js"; +import type { ComponentAnatomy, StyleModuleEvaluateParameters, StyleRules } from "./types.js"; import { stylePropertyToCssProperty } from "./css.js"; import { convertStylesToFocusState, Styles } from "./styles.js"; @@ -50,7 +50,7 @@ export class ElementStylesRenderer { // Perhaps these static functions turn into a registration mechanism. private static declaration( - property: StylePropertyCss, + property: string, value: string | number | CSSDirective, state: InteractiveState, ): DeclarationMap { @@ -69,7 +69,7 @@ export class ElementStylesRenderer { } private static propertySingle( - property: StylePropertyCss, + property: string, value: string | number | CSSDirective, ): StyleModuleEvaluate { return (params: StyleModuleEvaluateParameters): RuleMap => { @@ -80,7 +80,7 @@ export class ElementStylesRenderer { } private static propertyInteractive( - property: StylePropertyCss, + property: string, values: InteractiveValues, ): StyleModuleEvaluate { return (params: StyleModuleEvaluateParameters): RuleMap => { diff --git a/packages/adaptive-ui/src/core/modules/styles.ts b/packages/adaptive-ui/src/core/modules/styles.ts index 14b52118..72456e1e 100644 --- a/packages/adaptive-ui/src/core/modules/styles.ts +++ b/packages/adaptive-ui/src/core/modules/styles.ts @@ -5,7 +5,14 @@ import { Swatch } from "../color/swatch.js"; import { TypedCSSDesignToken, TypedDesignToken } from "../adaptive-design-tokens.js"; import { InteractiveTokenGroup, InteractiveValues } from "../types.js"; import { createForegroundSet, createForegroundSetBySet } from "../token-helpers-color.js"; -import { StyleModuleTarget, StyleProperty, StylePropertyCss } from "./types.js"; +import { StyleModuleTarget, StyleProperty, StylePropertyShorthand } from "./types.js"; + +/** + * Key for a style property, a {@link (StyleProperty:type)}, {@link (StylePropertyShorthand:type)}, or a string for any other CSS property. + * + * @public + */ +export type StyleKey = StyleProperty | StylePropertyShorthand | (string & Record); /** * Supported values for a style property. @@ -15,21 +22,28 @@ import { StyleModuleTarget, StyleProperty, StylePropertyCss } from "./types.js"; export type StyleValue = CSSDesignToken | InteractiveValues | CSSDirective | string | number; /** - * An object of style definitions, where the key is the {@link (StylePropertyCss:type)} and the value is the token or final value. + * An object of style definitions, where the key is the {@link (StyleKey:type)} and the value is the token or final value. * * @remarks * The `Record` format is a convenience for manual authoring of style modules (instead of a `Map`). * * @public */ -export type StyleProperties = Partial>; +export type StyleProperties = Partial>; + +/** + * A `Map` of style definitions, where the key is the {@link (StyleKey:type)} and the value is the token or final value. + * + * @public + */ +export type StylePropertiesMap = Map; /** - * A `Map` of style definitions, where the key is the {@link (StylePropertyCss:type)} and the value is the token or final value. + * A `Map` of style definitions, where the key is a string and the value is the token or final value. * * @public */ -export type StylePropertiesMap = Map; +export type EffectiveStylePropertiesMap = Map; /** * The properties and values for a {@link StyleRule} definition. @@ -114,6 +128,7 @@ export const Fill = { /** * @public + * @deprecated Use StylePropertyShorthand instead */ export const BorderFill = { all: function(value: StyleValue): StyleProperties { @@ -128,6 +143,7 @@ export const BorderFill = { /** * @public + * @deprecated Use StylePropertyShorthand instead */ export const BorderThickness = { all: function(value: StyleValue): StyleProperties { @@ -142,6 +158,7 @@ export const BorderThickness = { /** * @public + * @deprecated Use StylePropertyShorthand instead */ export const BorderStyle = { all: function(value: StyleValue): StyleProperties { @@ -156,6 +173,7 @@ export const BorderStyle = { /** * @public + * @deprecated Use StylePropertyShorthand instead */ export const CornerRadius = { all: function(value: StyleValue): StyleProperties { @@ -170,6 +188,7 @@ export const CornerRadius = { /** * @public + * @deprecated Use StylePropertyShorthand instead */ export const Padding = { all: function(value: StyleValue): StyleProperties { @@ -226,7 +245,7 @@ export const convertStylesToFocusState = (styles: Styles) => { }; /** - * A modular definition of style properties, either an alias to another style module or a collection of style properties. + * A composable definition of style properties, either an alias to another style or a collection of style properties. * * @public */ @@ -236,7 +255,7 @@ export class Styles { // Individual properties, or additional to composed style properties private _properties?: StylePropertiesMap; // Effective properties from composed styles and additional properties - private _composedProperties?: StylePropertiesMap; + private _effectiveProperties: EffectiveStylePropertiesMap = new Map(); private constructor( /** @@ -249,10 +268,9 @@ export class Styles { throw `Style '${name}' already created. Update it instead.`; } - if (Array.isArray(propertiesOrStyles)) { + if (Array.isArray(propertiesOrStyles)) { // styles this._composed = propertiesOrStyles; - this.createEffectiveProperties(); - } else { + } else { // properties this._properties = new Map(); for (const k in propertiesOrStyles) { const key: keyof StyleProperties = k as keyof StyleProperties; @@ -263,6 +281,8 @@ export class Styles { } } + this.createEffectiveProperties(); + if (name) { Styles.Shared.set(name, this); } @@ -280,11 +300,14 @@ export class Styles { */ public clearComposed(): void { this._composed = undefined; - this._composedProperties = undefined; + this.createEffectiveProperties(); } public appendComposed(styles: Styles): void { - this._composed?.push(styles); + if (this._composed === undefined) { + this._composed = []; + } + this._composed.push(styles); this.createEffectiveProperties(); } @@ -303,14 +326,8 @@ export class Styles { /** * Gets the full effective set of properties, from composed styles and local properties as applicable. */ - public get effectiveProperties(): StylePropertiesMap { - if (this._composedProperties) { - return this._composedProperties; - } else if (this._properties) { - return this._properties; - } else { - return new Map(); - } + public get effectiveProperties(): EffectiveStylePropertiesMap { + return this._effectiveProperties; } /** @@ -323,18 +340,30 @@ export class Styles { } private createEffectiveProperties() { + const map: EffectiveStylePropertiesMap = new Map(); + if (this._composed) { - const map: StylePropertiesMap = new Map(); this._composed.forEach((styles: Styles) => { styles.effectiveProperties.forEach((value, target) => { map.set(target, value); }); }); - this._properties?.forEach((value, target) => { - map.set(target, value); + } + + if (this._properties) { + this._properties.forEach((value, target) => { + if (target in StylePropertyShorthand) { + const props: StyleProperty[] = StylePropertyShorthand[target as StylePropertyShorthand]; + props.forEach(prop => { + map.set(prop, value); + }); + } else { + map.set(target, value); + } }); - this._composedProperties = map; } + + this._effectiveProperties = map; } public static Shared: Map = new Map(); diff --git a/packages/adaptive-ui/src/core/modules/types.ts b/packages/adaptive-ui/src/core/modules/types.ts index 87b1e918..e89cc972 100644 --- a/packages/adaptive-ui/src/core/modules/types.ts +++ b/packages/adaptive-ui/src/core/modules/types.ts @@ -357,10 +357,77 @@ export const StyleProperty = { */ export type StyleProperty = ValuesOf; +/** + * @public + */ +export const StylePropertyShorthand = { + borderFill: [ + StyleProperty.borderFillTop, + StyleProperty.borderFillRight, + StyleProperty.borderFillBottom, + StyleProperty.borderFillLeft, + ], + borderThickness: [ + StyleProperty.borderThicknessTop, + StyleProperty.borderThicknessRight, + StyleProperty.borderThicknessBottom, + StyleProperty.borderThicknessLeft, + ], + borderStyle: [ + StyleProperty.borderStyleTop, + StyleProperty.borderStyleRight, + StyleProperty.borderStyleBottom, + StyleProperty.borderStyleLeft, + ], + cornerRadius: [ + StyleProperty.cornerRadiusTopLeft, + StyleProperty.cornerRadiusTopRight, + StyleProperty.cornerRadiusBottomRight, + StyleProperty.cornerRadiusBottomLeft, + ], + margin: [ + StyleProperty.marginTop, + StyleProperty.marginRight, + StyleProperty.marginBottom, + StyleProperty.marginLeft, + ], + marginHorizontal: [ + StyleProperty.marginRight, + StyleProperty.marginLeft, + ], + marginVertical: [ + StyleProperty.marginTop, + StyleProperty.marginBottom, + ], + padding: [ + StyleProperty.paddingTop, + StyleProperty.paddingRight, + StyleProperty.paddingBottom, + StyleProperty.paddingLeft, + ], + paddingHorizontal: [ + StyleProperty.paddingRight, + StyleProperty.paddingLeft, + ], + paddingVertical: [ + StyleProperty.paddingTop, + StyleProperty.paddingBottom, + ], +}; + +/** + * Supported style property shorthands for design-to-code with Adaptive UI. + * + * @public + */ +export type StylePropertyShorthand = keyof typeof StylePropertyShorthand; + + /** * Any style property, either an {@link (StyleProperty:type)} or a string for any other CSS property. * * @public + * @deprecated Use StyleKey instead */ export type StylePropertyCss = StyleProperty | (string & Record); @@ -368,61 +435,41 @@ export type StylePropertyCss = StyleProperty | (string & Record); * A convenience shorthand for all border fill {@link (StyleProperty:type)} values. * * @public + * @deprecated Use StylePropertyShorthand instead */ -export const stylePropertyBorderFillAll = [ - StyleProperty.borderFillTop, - StyleProperty.borderFillRight, - StyleProperty.borderFillBottom, - StyleProperty.borderFillLeft -]; +export const stylePropertyBorderFillAll = StylePropertyShorthand.borderFill; /** * A convenience shorthand for all border thickness {@link (StyleProperty:type)} values. * * @public + * @deprecated Use StylePropertyShorthand instead */ -export const stylePropertyBorderThicknessAll = [ - StyleProperty.borderThicknessTop, - StyleProperty.borderThicknessRight, - StyleProperty.borderThicknessBottom, - StyleProperty.borderThicknessLeft -]; +export const stylePropertyBorderThicknessAll = StylePropertyShorthand.borderThickness; /** * A convenience shorthand for all border style {@link (StyleProperty:type)} values. * * @public + * @deprecated Use StylePropertyShorthand instead */ -export const stylePropertyBorderStyleAll = [ - StyleProperty.borderStyleTop, - StyleProperty.borderStyleRight, - StyleProperty.borderStyleBottom, - StyleProperty.borderStyleLeft -]; +export const stylePropertyBorderStyleAll = StylePropertyShorthand.borderStyle; /** * A convenience shorthand for all corner radius {@link (StyleProperty:type)} values. * * @public + * @deprecated Use StylePropertyShorthand instead */ -export const stylePropertyCornerRadiusAll = [ - StyleProperty.cornerRadiusTopLeft, - StyleProperty.cornerRadiusTopRight, - StyleProperty.cornerRadiusBottomRight, - StyleProperty.cornerRadiusBottomLeft -]; +export const stylePropertyCornerRadiusAll = StylePropertyShorthand.cornerRadius; /** * A convenience shorthand for all padding {@link (StyleProperty:type)} values. * * @public + * @deprecated Use StylePropertyShorthand instead */ -export const stylePropertyPaddingAll = [ - StyleProperty.paddingTop, - StyleProperty.paddingRight, - StyleProperty.paddingBottom, - StyleProperty.paddingLeft -]; +export const stylePropertyPaddingAll = StylePropertyShorthand.padding; /** * A list of {@link StyleRule}s in the context of a component. diff --git a/packages/adaptive-ui/src/migration/color.ts b/packages/adaptive-ui/src/migration/color.ts index 586fa5d5..42faf00f 100644 --- a/packages/adaptive-ui/src/migration/color.ts +++ b/packages/adaptive-ui/src/migration/color.ts @@ -5,7 +5,7 @@ import { deltaSwatchSet } from "../core/color/recipes/delta-swatch-set.js"; import { deltaSwatch } from "../core/color/recipes/delta-swatch.js"; import { Swatch } from "../core/color/swatch.js"; import { interactiveSwatchSetAsOverlay, swatchAsOverlay } from "../core/color/utilities/opacity.js"; -import { StyleProperty, stylePropertyBorderFillAll } from "../core/modules/types.js"; +import { StyleProperty, StylePropertyShorthand } from "../core/modules/types.js"; import { createTokenColorRecipe, createTokenColorRecipeValue, @@ -568,7 +568,7 @@ export const neutralStrokeDividerRestDelta = createTokenDelta(neutralStrokeDivid /** @public @deprecated Use "Subtle" instead */ export const neutralStrokeDividerRecipe = createTokenColorRecipe( neutralStrokeDividerName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver, params?: ColorRecipeParams): Swatch => swatchAsOverlay( deltaSwatch( @@ -603,7 +603,7 @@ export const neutralStrokeInputFocusDelta = createTokenDelta(neutralStrokeInputN /** @public @deprecated Use "Subtle" instead */ export const neutralStrokeInputRecipe = createTokenColorRecipe( neutralStrokeInputName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver, params?: ColorRecipeParams) => interactiveSwatchSetAsOverlay( deltaSwatchSet( diff --git a/packages/adaptive-ui/src/reference/appearance.ts b/packages/adaptive-ui/src/reference/appearance.ts index fc8472a5..3fde10be 100644 --- a/packages/adaptive-ui/src/reference/appearance.ts +++ b/packages/adaptive-ui/src/reference/appearance.ts @@ -1,18 +1,18 @@ -import { stylePropertyBorderThicknessAll, stylePropertyCornerRadiusAll } from "../core/modules/types.js"; +import { StylePropertyShorthand } from "../core/modules/types.js"; import { createTokenDimension } from "../core/token-helpers.js"; /** @public */ export const designUnit = createTokenDimension("global.designUnit").withDefault("4px"); /** @public */ -export const cornerRadiusControl = createTokenDimension("shape.cornerRadius.default", stylePropertyCornerRadiusAll).withDefault("4px"); +export const cornerRadiusControl = createTokenDimension("shape.cornerRadius.default", StylePropertyShorthand.cornerRadius).withDefault("4px"); // Planning to migrate the radius settings as part of the density system. /** @public */ -export const cornerRadiusLayer = createTokenDimension("density.layer.cornerRadius", stylePropertyCornerRadiusAll).withDefault("8px"); +export const cornerRadiusLayer = createTokenDimension("density.layer.cornerRadius", StylePropertyShorthand.cornerRadius).withDefault("8px"); /** @public */ -export const strokeThickness = createTokenDimension("shape.strokeThickness.default", stylePropertyBorderThicknessAll).withDefault("1px"); +export const strokeThickness = createTokenDimension("shape.strokeThickness.default", StylePropertyShorthand.borderThickness).withDefault("1px"); /** @public */ -export const focusStrokeThickness = createTokenDimension("shape.strokeThickness.focus", stylePropertyBorderThicknessAll).withDefault("2px"); +export const focusStrokeThickness = createTokenDimension("shape.strokeThickness.focus", StylePropertyShorthand.borderThickness).withDefault("2px"); diff --git a/packages/adaptive-ui/src/reference/color.ts b/packages/adaptive-ui/src/reference/color.ts index c2671643..6c35c68e 100644 --- a/packages/adaptive-ui/src/reference/color.ts +++ b/packages/adaptive-ui/src/reference/color.ts @@ -11,7 +11,7 @@ import { Swatch } from "../core/color/swatch.js"; import { _white } from "../core/color/utilities/color-constants.js"; import { conditionalSwatchSet } from "../core/color/utilities/conditional.js"; import { interactiveSwatchSetAsOverlay } from "../core/color/utilities/opacity.js"; -import { StyleProperty, stylePropertyBorderFillAll } from "../core/modules/types.js"; +import { StyleProperty, StylePropertyShorthand } from "../core/modules/types.js"; import { Recipe, RecipeOptional } from "../core/recipes.js"; import { createTokenColorRecipe, @@ -441,7 +441,7 @@ export const strokeSafetyDisabledDelta = createTokenDelta(strokeSafetyName, Inte /** @public */ export const strokeSafetyRecipe = createTokenColorRecipeForPalette( strokeSafetyName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver, params: ColorRecipePaletteParams) => conditionalSwatchSet( contrastAndDeltaSwatchSet( @@ -479,7 +479,7 @@ export const strokeStealthDisabledDelta = createTokenDelta(strokeStealthName, In /** @public */ export const strokeStealthRecipe = createTokenColorRecipeForPalette( strokeStealthName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver, params: ColorRecipePaletteParams) => contrastAndDeltaSwatchSet( params.palette, @@ -516,7 +516,7 @@ export const strokeSubtleDisabledDelta = createTokenDelta(strokeSubtleName, Inte /** @public */ export const strokeSubtleRecipe = createTokenColorRecipeForPalette( strokeSubtleName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver, params: ColorRecipePaletteParams) => contrastAndDeltaSwatchSet( params.palette, @@ -551,7 +551,7 @@ export const strokeDiscernibleDisabledDelta = createTokenDelta(strokeDiscernible /** @public */ export const strokeDiscernibleRecipe = createTokenColorRecipeForPalette( strokeDiscernibleName, - [...stylePropertyBorderFillAll, StyleProperty.foregroundFill], + [...StylePropertyShorthand.borderFill, StyleProperty.foregroundFill], (resolve: DesignTokenResolver, params: ColorRecipePaletteParams) => contrastAndDeltaSwatchSet( params.palette, @@ -586,7 +586,7 @@ export const strokeReadableDisabledDelta = createTokenDelta(strokeReadableName, /** @public */ export const strokeReadableRecipe = createTokenColorRecipeForPalette( strokeReadableName, - [...stylePropertyBorderFillAll, StyleProperty.foregroundFill], + [...StylePropertyShorthand.borderFill, StyleProperty.foregroundFill], (resolve: DesignTokenResolver, params: ColorRecipePaletteParams) => contrastAndDeltaSwatchSet( params.palette, @@ -624,7 +624,7 @@ export const strokeStrongDisabledDelta = createTokenDelta(strokeStrongName, Inte /** @public */ export const strokeStrongRecipe = createTokenColorRecipeForPalette( strokeStrongName, - [...stylePropertyBorderFillAll, StyleProperty.foregroundFill], + [...StylePropertyShorthand.borderFill, StyleProperty.foregroundFill], (resolve: DesignTokenResolver, params: ColorRecipePaletteParams) => contrastAndDeltaSwatchSet( params.palette, @@ -1753,7 +1753,7 @@ const focusStrokeName = "color.focusStroke"; /** @public */ export const focusStrokeRecipe = createTokenColorRecipe( focusStrokeName, - [...stylePropertyBorderFillAll, StyleProperty.outlineColor], + [...StylePropertyShorthand.borderFill, StyleProperty.outlineColor], (resolve: DesignTokenResolver, params?: ColorRecipeParams): Swatch => contrastSwatch( resolve(focusStrokePalette), @@ -1772,7 +1772,7 @@ const focusStrokeOuterName = "color.focusStroke.outer"; /** @public */ export const focusStrokeOuterRecipe = createTokenColorRecipe( focusStrokeOuterName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver): Swatch => blackOrWhiteByContrast(resolve(fillColor), resolve(minContrastReadable), true) ); @@ -1787,7 +1787,7 @@ const focusStrokeInnerName = "color.focusStroke.inner"; /** @public */ export const focusStrokeInnerRecipe = createTokenColorRecipe( focusStrokeInnerName, - stylePropertyBorderFillAll, + StylePropertyShorthand.borderFill, (resolve: DesignTokenResolver): Swatch => blackOrWhiteByContrast(resolve(focusStrokeOuter), resolve(minContrastReadable), false) ); diff --git a/packages/adaptive-ui/src/reference/modules.ts b/packages/adaptive-ui/src/reference/modules.ts index 44fa670f..7b2dd6c9 100644 --- a/packages/adaptive-ui/src/reference/modules.ts +++ b/packages/adaptive-ui/src/reference/modules.ts @@ -1,5 +1,5 @@ import { ValuesOf } from "@microsoft/fast-foundation"; -import { BorderFill, BorderStyle, BorderThickness, CornerRadius, Fill, Padding, Styles, StyleValue } from "../core/modules/styles.js"; +import { Fill, Styles, StyleValue } from "../core/modules/styles.js"; import { cornerRadiusControl, cornerRadiusLayer, focusStrokeThickness, strokeThickness } from "./appearance.js"; import { accentFillDiscernible, @@ -126,7 +126,7 @@ import { */ export const controlShapeStyles: Styles = Styles.fromProperties( { - ...CornerRadius.all(cornerRadiusControl), + cornerRadius: cornerRadiusControl, }, "shape.control", ); @@ -140,7 +140,7 @@ export const controlShapeStyles: Styles = Styles.fromProperties( */ export const layerShapeStyles: Styles = Styles.fromProperties( { - ...CornerRadius.all(cornerRadiusLayer), + cornerRadius: cornerRadiusLayer, }, "shape.layer", ); @@ -154,7 +154,7 @@ export const layerShapeStyles: Styles = Styles.fromProperties( */ export const roundShapeStyles: Styles = Styles.fromProperties( { - ...CornerRadius.all("999px"), + cornerRadius: "999px", }, "shape.round", ); @@ -170,7 +170,8 @@ export const roundShapeStyles: Styles = Styles.fromProperties( */ export const controlDensityStyles: Styles = Styles.fromProperties( { - ...Padding.verticalHorizontal(densityControl.verticalPadding, densityControl.horizontalPadding), + paddingHorizontal: densityControl.horizontalPadding, + paddingVertical: densityControl.verticalPadding, gap: densityControl.horizontalGap, }, "density.control", @@ -187,7 +188,7 @@ export const controlDensityStyles: Styles = Styles.fromProperties( */ export const controlSquareDensityStyles: Styles = Styles.fromProperties( { - ...Padding.verticalHorizontal(densityControl.verticalPadding, densityControl.verticalPadding), + padding: densityControl.verticalPadding, gap: densityControl.horizontalGap, }, "density.control-square", @@ -243,7 +244,8 @@ export const autofillInnerDensityStyles: Styles = Styles.fromProperties( */ export const itemContainerDensityStyles: Styles = Styles.fromProperties( { - ...Padding.verticalHorizontal(densityItemContainer.verticalPadding, densityItemContainer.horizontalPadding), + paddingHorizontal: densityItemContainer.horizontalPadding, + paddingVertical: densityItemContainer.verticalPadding, gap: densityItemContainer.horizontalGap, }, "density.item-container", @@ -258,7 +260,8 @@ export const itemContainerDensityStyles: Styles = Styles.fromProperties( */ export const layerDensityStyles: Styles = Styles.fromProperties( { - ...Padding.verticalHorizontal(densityLayer.verticalPadding, densityLayer.horizontalPadding), + paddingHorizontal: densityLayer.horizontalPadding, + paddingVertical: densityLayer.verticalPadding, gap: densityLayer.horizontalGap, }, "density.layer", @@ -270,9 +273,9 @@ const transparent = "transparent"; // but setting the color is done elsewhere or not at all, producing inconsistent and unpredictable styling. const densityBorderStyles = (fillValue: StyleValue) => { return { - ...BorderThickness.all(strokeThickness), - ...BorderStyle.all("solid"), - ...BorderFill.all(fillValue), + borderThickness: strokeThickness, + borderStyle: "solid", + borderFill: fillValue, } }; diff --git a/packages/adaptive-web-components/src/components/progress/progress.styles.modules.ts b/packages/adaptive-web-components/src/components/progress/progress.styles.modules.ts index b5a784d1..292caf05 100644 --- a/packages/adaptive-web-components/src/components/progress/progress.styles.modules.ts +++ b/packages/adaptive-web-components/src/components/progress/progress.styles.modules.ts @@ -1,5 +1,4 @@ import { - CornerRadius, StyleRules, } from "@adaptive-web/adaptive-ui"; import { @@ -18,7 +17,7 @@ export const styleModules: StyleRules = [ { properties: { backgroundFill: neutralFillSubtle.rest, - ...CornerRadius.all(designUnit), + cornerRadius: designUnit, }, }, { @@ -27,7 +26,7 @@ export const styleModules: StyleRules = [ }, properties: { backgroundFill: accentFillReadable.rest, - ...CornerRadius.all(designUnit), + cornerRadius: designUnit, }, }, ]; diff --git a/packages/adaptive-web-components/src/components/tooltip/tooltip.styles.modules.ts b/packages/adaptive-web-components/src/components/tooltip/tooltip.styles.modules.ts index c071f186..b55151b1 100644 --- a/packages/adaptive-web-components/src/components/tooltip/tooltip.styles.modules.ts +++ b/packages/adaptive-web-components/src/components/tooltip/tooltip.styles.modules.ts @@ -1,12 +1,10 @@ import { - BorderFill, StyleRules, } from "@adaptive-web/adaptive-ui"; import { controlDensityStyles, controlShapeStyles, neutralFillSubtle, - neutralStrokeSubtle, plainTextStyles, shadowTooltipStyles } from "@adaptive-web/adaptive-ui/reference"; @@ -25,7 +23,6 @@ export const styleModules: StyleRules = [ shadowTooltipStyles, ], properties: { - ...BorderFill.all(neutralStrokeSubtle.rest), backgroundFill: neutralFillSubtle.rest, }, },