Added support for generated type scale token values

change/@adaptive-web-adaptive-ui-381becf1-b6b2-4333-9695-40c2a1c8877e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added support for generated type scale token values",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui-explorer/src/app.ts

@@ -39,13 +39,15 @@ import { ControlPane } from "./components/control-pane/index.js";
 import { LayerBackground } from "./components/layer-background/index.js";
 import { PaletteGradient } from "./components/palette-gradient/palette-gradient.js";
 import { SampleApp } from "./sample/index.js";
+import { typeRampScale, Typography } from "./typography/index.js";
 import { State } from "./state.js";
 
 ColorBlock;
 ControlPane;
 LayerBackground;
 PaletteGradient;
 SampleApp;
+Typography;
 
 const colorBlockTemplate = html<App>`
     ${repeat(
@@ -85,6 +87,12 @@ const sampleTemplate = html<App>`
     </app-design-system-provider>
 `;
 
+const typographyTemplate = html<App>`
+    <app-design-system-provider>
+        <app-typography></app-typography>
+    </app-design-system-provider>
+`;
+
 const template = html<App>`
     <div class="container fill">
         <div class="row fill">
@@ -241,6 +249,18 @@ export class App extends FASTElement {
                         case "wcagContrastLevel":
                             wcagContrastLevel.setValueFor(app.canvas, source.wcagContrastLevel);
                             break;
+                        case "typeScaleBaseSize":
+                            typeRampScale.base.fontSize.setValueFor(app.canvas, `${source.typeScaleBaseSize}px`);
+                            break;
+                        case "typeScaleMultiplier":
+                            typeRampScale.multiplier.setValueFor(app.canvas, source.typeScaleMultiplier);
+                            break;
+                        case "typeScaleLineHeightRatio":
+                            typeRampScale.lineHeightRatio.setValueFor(app.canvas, source.typeScaleLineHeightRatio);
+                            break;
+                        case "typeScaleLineHeightSnap":
+                            typeRampScale.lineHeightSnap.setValueFor(app.canvas, `${source.typeScaleLineHeightSnap}px`);
+                            break;
                         default:
                             break;
                     }
@@ -266,6 +286,8 @@ export class App extends FASTElement {
     public componentTypeTemplate(): ViewTemplate<App, any> {
         if (this.state.componentType === ComponentType.sample) {
             return sampleTemplate;
+        } else if (this.state.componentType === ComponentType.typography) {
+            return typographyTemplate;
         } else {
             return colorBlockTemplate;
         }

packages/adaptive-ui-explorer/src/component-type.ts

@@ -2,5 +2,6 @@ export enum ComponentType {
     backplate = "backplate",
     text = "text",
     form = "form",
+    typography = "typography",
     sample = "sample",
 }

packages/adaptive-ui-explorer/src/components/control-pane/control-pane.template.ts

@@ -90,5 +90,66 @@ export function controlPaneTemplate<T extends ControlPane>(): ElementViewTemplat
             id="showSwatches"
             :checked=${twoWay((x) => x.state.showSwatches)}
         >Show swatches</adaptive-switch>
+
+        <div>
+            <label>Type scale base size (px)</label>
+            <input
+                type="number"
+                min="8"
+                max="32"
+                step="1"
+                value=${(x) => x.state.typeScaleBaseSize}
+                @input=${(x, c) =>
+                    x.state.typeScaleBaseSize = parseFloat(c.eventTarget<HTMLInputElement>().value)
+                }
+            />
+        </div>
+
+        <div>
+            <label>Type scale multiplier</label>
+            <input
+                type="number"
+                min="1.0"
+                max="2.0"
+                step="0.01"
+                value=${(x) => x.state.typeScaleMultiplier}
+                @input=${(x, c) =>
+                    x.state.typeScaleMultiplier = parseFloat(c.eventTarget<HTMLInputElement>().value)
+                }
+            />
+        </div>
+
+        <div>
+            <label>Type scale line height ratio</label>
+            <input
+                type="number"
+                min="1.0"
+                max="2.0"
+                step="0.01"
+                value=${(x) => x.state.typeScaleLineHeightRatio}
+                @input=${(x, c) =>
+                    x.state.typeScaleLineHeightRatio = parseFloat(c.eventTarget<HTMLInputElement>().value)
+                }
+            />
+        </div>
+
+        <div>
+            <label>Type scale line height snap (px)</label>
+            <input
+                type="number"
+                min="1"
+                max="10"
+                step="1"
+                value=${(x) => x.state.typeScaleLineHeightSnap}
+                @input=${(x, c) =>
+                    x.state.typeScaleLineHeightSnap = parseFloat(c.eventTarget<HTMLInputElement>().value)
+                }
+            />
+        </div>
+
+        <adaptive-switch
+            id="multiline"
+            :checked=${twoWay((x) => x.state.multiline)}
+        >Multiline typography</adaptive-switch>
     `;
 }

packages/adaptive-ui-explorer/src/state.ts

@@ -14,6 +14,11 @@ export interface State {
     wcagContrastLevel: WcagContrastLevel;
     disabledState: boolean;
     showSwatches: boolean;
+    typeScaleBaseSize: number;
+    typeScaleMultiplier: number;
+    typeScaleLineHeightRatio: number;
+    typeScaleLineHeightSnap: number;
+    multiline: boolean;
 }
 
 const PLACEHOLDER_COLOR = Color.parse("#ff00ff")!;
@@ -42,4 +47,19 @@ export class DefaultState implements State {
 
     @observable
     public showSwatches: boolean = false;
+
+    @observable
+    public typeScaleBaseSize: number = 16;
+
+    @observable
+    public typeScaleMultiplier: number = 1.2;
+
+    @observable
+    public typeScaleLineHeightRatio: number = 1.4;
+
+    @observable
+    public typeScaleLineHeightSnap: number = 2;
+
+    @observable
+    public multiline: boolean = false;
 }

packages/adaptive-ui-explorer/src/typography/index.ts

@@ -0,0 +1,2 @@
+export { Typography } from "./typography.js";
+export { typeRampScale } from "./type-scale.js";

packages/adaptive-ui-explorer/src/typography/type-scale.ts

@@ -0,0 +1,3 @@
+import { TypeScaleTokenGroup } from "@adaptive-web/adaptive-ui";
+
+export const typeRampScale = new TypeScaleTokenGroup("typography.ramp.scale", "16px", 1.2, 1.4, "2px");

packages/adaptive-ui-explorer/src/typography/typography.styles.ts

@@ -0,0 +1,85 @@
+import { css } from "@microsoft/fast-element";
+import { bodyFontFamily, colorContext, neutralFillSubtle, neutralStrokeStrong } from "@adaptive-web/adaptive-ui/reference";
+import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
+import { typeRampScale } from "./type-scale.js";
+
+export const typographyStyles = css`
+    ${componentBaseStyles}
+
+    :host {
+        display: flex;
+        font-family: ${bodyFontFamily};
+        color: ${neutralStrokeStrong.rest};
+        background: ${colorContext};
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 24px;
+    }
+
+    p {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .sample-text {
+        display: block;
+        background: ${neutralFillSubtle.rest};
+    }
+
+    .values {
+        font-size: 14px;
+        line-height: 16px;
+        font-family: monospace;
+    }
+
+    p.minus2 {
+        font-size: ${typeRampScale.minus2.fontSize};
+        line-height: ${typeRampScale.minus2.lineHeight};
+    }
+
+    p.minus1 {
+        font-size: ${typeRampScale.minus1.fontSize};
+        line-height: ${typeRampScale.minus1.lineHeight};
+    }
+
+    p.base {
+        font-size: ${typeRampScale.base.fontSize};
+        line-height: ${typeRampScale.base.lineHeight};
+    }
+
+    p.plus1 {
+        font-size: ${typeRampScale.plus1.fontSize};
+        line-height: ${typeRampScale.plus1.lineHeight};
+    }
+
+    p.plus2 {
+        font-size: ${typeRampScale.plus2.fontSize};
+        line-height: ${typeRampScale.plus2.lineHeight};
+    }
+
+    p.plus3 {
+        font-size: ${typeRampScale.plus3.fontSize};
+        line-height: ${typeRampScale.plus3.lineHeight};
+    }
+
+    p.plus4 {
+        font-size: ${typeRampScale.plus4.fontSize};
+        line-height: ${typeRampScale.plus4.lineHeight};
+    }
+
+    p.plus5 {
+        font-size: ${typeRampScale.plus5.fontSize};
+        line-height: ${typeRampScale.plus5.lineHeight};
+    }
+
+    p.plus6 {
+        font-size: ${typeRampScale.plus6.fontSize};
+        line-height: ${typeRampScale.plus6.lineHeight};
+    }
+`;

packages/adaptive-ui-explorer/src/typography/typography.template.ts

@@ -0,0 +1,48 @@
+import { ElementViewTemplate, html } from "@microsoft/fast-element";
+import { Typography } from "./typography.js";
+
+const singleLineText = html<Typography>`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
+const multiLineText = html<Typography>`Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Sed do eiusmod tempor incididunt ut labore et dolore.`;
+
+export function typographyTemplate<T extends Typography>(): ElementViewTemplate<T> {
+    return html<T>`
+        <div class="content">
+            <p class="minus2">
+                <span class="values">Minus 2 (font-size: ${x => x.minus2.fontSize}, line-height: ${x => x.minus2.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="minus1">
+                <span class="values">Minus 1 (font-size: ${x => x.minus1.fontSize}, line-height: ${x => x.minus1.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="base">
+                <span class="values">Base (font-size: ${x => x.base.fontSize}, line-height: ${x => x.base.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="plus1">
+                <span class="values">Plus 1 (font-size: ${x => x.plus1.fontSize}, line-height: ${x => x.plus1.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="plus2">
+                <span class="values">Plus 2 (font-size: ${x => x.plus2.fontSize}, line-height: ${x => x.plus2.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="plus3">
+                <span class="values">Plus 3 (font-size: ${x => x.plus3.fontSize}, line-height: ${x => x.plus3.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="plus4">
+                <span class="values">Plus 4 (font-size: ${x => x.plus4.fontSize}, line-height: ${x => x.plus4.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="plus5">
+                <span class="values">Plus 5 (font-size: ${x => x.plus5.fontSize}, line-height: ${x => x.plus5.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+            <p class="plus6">
+                <span class="values">Plus 6 (font-size: ${x => x.plus6.fontSize}, line-height: ${x => x.plus6.lineHeight})</span>
+                <span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
+            </p>
+        </div>
+    `;
+}