Migrated type ramp to style modules (#72)

Author: bheston

change/@adaptive-web-adaptive-ui-56e70be2-b8c2-42a4-93e2-f9bf15dfa4b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Migrated type ramp to style modules",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-web-components-578c06ad-4e1e-4d6e-a522-e0a5aa54fe58.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Migrated type ramp to style modules",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

examples/customize-component/src/init-ds.ts

@@ -2,4 +2,4 @@
 
 import { neutralFillDiscernibleControlStyles, selectableSelectedStyles } from "@adaptive-web/adaptive-ui";
 
-selectableSelectedStyles.alias = neutralFillDiscernibleControlStyles;
+selectableSelectedStyles.appendComposed(neutralFillDiscernibleControlStyles);

packages/adaptive-ui-explorer/src/components/style-example.ts

@@ -66,7 +66,7 @@ export class StyleExample extends FASTElement {
         let backgroundActive = fillColor;
         let backgroundFocus = fillColor;
 
-        const backgroundValue = (this.styles?.properties || {})[StyleProperty.backgroundFill];
+        const backgroundValue = (this.styles?.effectiveProperties || {})[StyleProperty.backgroundFill];
         if (backgroundValue) {
             if (typeof backgroundValue === "string") {
                 // ignore for now
@@ -106,7 +106,7 @@ export class StyleExample extends FASTElement {
             }
         }
 
-        const colorValue = (this.styles?.properties || {})[StyleProperty.foregroundFill];
+        const colorValue = (this.styles?.effectiveProperties || {})[StyleProperty.foregroundFill];
         if (colorValue) {
             if (typeof colorValue === "string") {
                 // ignore for now
@@ -146,7 +146,7 @@ export class StyleExample extends FASTElement {
             }
         }
 
-        const borderValue = (this.styles?.properties || {})[StyleProperty.borderFill];
+        const borderValue = (this.styles?.effectiveProperties || {})[StyleProperty.borderFill];
         if (borderValue) {
             if (typeof borderValue === "string") {
                 // ignore for now

packages/adaptive-ui/docs/api-report.md

@@ -607,6 +607,9 @@ export function isDark(color: RelativeLuminance): boolean;
 // @public (undocumented)
 export const itemStyles: Styles;
 
+// @public (undocumented)
+export const labelTextStyles: Styles;
+
 // @public
 export const LayerBaseLuminance: Readonly<{
     readonly LightMode: 0.95;
@@ -1391,6 +1394,7 @@ export const StyleProperty: {
     readonly fontSize: "fontSize";
     readonly fontWeight: "fontWeight";
     readonly fontStyle: "fontStyle";
+    readonly fontVariationSettings: "fontVariationSettings";
     readonly letterSpacing: "letterSpacing";
     readonly lineHeight: "lineHeight";
     readonly padding: "padding";
@@ -1407,14 +1411,14 @@ export type StyleProperty = ValuesOf<typeof StyleProperty>;
 // @public
 export class Styles {
     // (undocumented)
-    get alias(): Styles;
-    set alias(alias: Styles);
-    // (undocumented)
-    static fromAlias(styles: Styles): Styles;
-    // (undocumented)
+    appendComposed(styles: Styles): void;
+    clearComposed(): void;
+    static compose(...styles: Styles[]): Styles;
+    get composed(): Styles[] | undefined;
+    get effectiveProperties(): StyleProperties;
     static fromProperties(properties: StyleProperties): Styles;
-    // (undocumented)
-    get properties(): StyleProperties;
+    get properties(): StyleProperties | undefined;
+    set properties(properties: StyleProperties | undefined);
 }
 
 // @public
@@ -1446,7 +1450,7 @@ export class SwatchRGB implements Swatch {
     toColorString(): string;
 }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const typeRampBase: CSSDirective;
 
 // @public (undocumented)
@@ -1458,7 +1462,10 @@ export const typeRampBaseFontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampBaseLineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampBaseStyles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampMinus1: CSSDirective;
 
 // @public (undocumented)
@@ -1470,7 +1477,10 @@ export const typeRampMinus1FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampMinus1LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampMinus1Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampMinus2: CSSDirective;
 
 // @public (undocumented)
@@ -1482,7 +1492,10 @@ export const typeRampMinus2FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampMinus2LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampMinus2Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampPlus1: CSSDirective;
 
 // @public (undocumented)
@@ -1494,7 +1507,10 @@ export const typeRampPlus1FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampPlus1LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampPlus1Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampPlus2: CSSDirective;
 
 // @public (undocumented)
@@ -1506,7 +1522,10 @@ export const typeRampPlus2FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampPlus2LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampPlus2Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampPlus3: CSSDirective;
 
 // @public (undocumented)
@@ -1518,7 +1537,10 @@ export const typeRampPlus3FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampPlus3LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampPlus3Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampPlus4: CSSDirective;
 
 // @public (undocumented)
@@ -1530,7 +1552,10 @@ export const typeRampPlus4FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampPlus4LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampPlus4Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampPlus5: CSSDirective;
 
 // @public (undocumented)
@@ -1542,7 +1567,10 @@ export const typeRampPlus5FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampPlus5LineHeight: CSSDesignToken<string>;
 
-// @public (undocumented)
+// @public
+export const typeRampPlus5Styles: Styles;
+
+// @public @deprecated (undocumented)
 export const typeRampPlus6: CSSDirective;
 
 // @public (undocumented)
@@ -1554,6 +1582,9 @@ export const typeRampPlus6FontVariations: CSSDesignToken<string>;
 // @public (undocumented)
 export const typeRampPlus6LineHeight: CSSDesignToken<string>;
 
+// @public
+export const typeRampPlus6Styles: Styles;
+
 // @public
 export const WcagContrastLevel: {
     readonly aa: "aa";