Updated typography tokens into token group

change/@adaptive-web-adaptive-ui-3122690b-44f1-452f-881c-e6f08186573d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated typography tokens into token group",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui/src/core/typography/type-ramp.ts

@@ -0,0 +1,187 @@
+import type { DesignToken, DesignTokenResolver } from "@microsoft/fast-foundation";
+import type { TypedCSSDesignToken } from "../adaptive-design-tokens.js";
+import { TokenGroup } from "../types.js";
+import {
+    createTokenFontSize,
+    createTokenFontVariations,
+    createTokenLineHeight
+} from "../token-helpers.js";
+
+// TODO: This should be a recipe. Reevaluate as design tokens update.
+function fontVariations(sizeToken: DesignToken<string>): (resolve: DesignTokenResolver) => string {
+    return (resolve: DesignTokenResolver): string => {
+        return "";
+    };
+}
+
+/**
+ * Represents a single position on the type ramp with font size, line height, and font variations.
+ *
+ * @public
+ */
+export class TypeRampPosition {
+    /**
+     * The font size for this type ramp position.
+     *
+     * @public
+     */
+    public readonly fontSize: TypedCSSDesignToken<string>;
+
+    /**
+     * The line height for this type ramp position.
+     *
+     * @public
+     */
+    public readonly lineHeight: TypedCSSDesignToken<string>;
+
+    /**
+     * The font variations for this type ramp position.
+     *
+     * @public
+     */
+    public readonly fontVariations: TypedCSSDesignToken<string>;
+
+    /**
+     * Creates a new type ramp position.
+     *
+     * @param baseName - The base name of the type ramp.
+     * @param position - The position on the type ramp.
+     * @param fontSize - The font size for this type ramp position.
+     * @param lineHeight - The line height for this type ramp position.
+     */
+    constructor(
+        baseName: string,
+        position: string,
+        fontSize: string,
+        lineHeight: string,
+    ) {
+        this.fontSize = createTokenFontSize(`${baseName}.fontSize.${position}`).withDefault(fontSize);
+        this.lineHeight = createTokenLineHeight(`${baseName}.lineHeight.${position}`).withDefault(lineHeight);
+        this.fontVariations = createTokenFontVariations(`${baseName}.fontVariations.${position}`).withDefault(fontVariations(this.fontSize));
+    }
+}
+
+/**
+ * A complete type ramp with all positions from minus2 to plus6.
+ *
+ * @public
+ */
+export class TypeRampTokenGroup implements TokenGroup {
+    /**
+     * The minus2 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly minus2: TypeRampPosition;
+
+    /**
+     * The minus1 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly minus1: TypeRampPosition;
+
+    /**
+     * The base position on the type ramp.
+     *
+     * @public
+     */
+    public readonly base: TypeRampPosition;
+
+    /**
+     * The plus1 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly plus1: TypeRampPosition;
+
+    /**
+     * The plus2 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly plus2: TypeRampPosition;
+
+    /**
+     * The plus3 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly plus3: TypeRampPosition;
+
+    /**
+     * The plus4 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly plus4: TypeRampPosition;
+
+    /**
+     * The plus5 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly plus5: TypeRampPosition;
+
+    /**
+     * The plus6 position on the type ramp.
+     *
+     * @public
+     */
+    public readonly plus6: TypeRampPosition;
+
+    /**
+     * Creates a new type ramp token group with all positions.
+     *
+     * @param name - The base name of the token group (e.g., "typography.ramp").
+     * @param minus2FontSize - The font size for the minus2 position.
+     * @param minus2LineHeight - The line height for the minus2 position.
+     * @param minus1FontSize - The font size for the minus1 position.
+     * @param minus1LineHeight - The line height for the minus1 position.
+     * @param baseFontSize - The font size for the base position.
+     * @param baseLineHeight - The line height for the base position.
+     * @param plus1FontSize - The font size for the plus1 position.
+     * @param plus1LineHeight - The line height for the plus1 position.
+     * @param plus2FontSize - The font size for the plus2 position.
+     * @param plus2LineHeight - The line height for the plus2 position.
+     * @param plus3FontSize - The font size for the plus3 position.
+     * @param plus3LineHeight - The line height for the plus3 position.
+     * @param plus4FontSize - The font size for the plus4 position.
+     * @param plus4LineHeight - The line height for the plus4 position.
+     * @param plus5FontSize - The font size for the plus5 position.
+     * @param plus5LineHeight - The line height for the plus5 position.
+     * @param plus6FontSize - The font size for the plus6 position.
+     * @param plus6LineHeight - The line height for the plus6 position.
+     */
+    constructor(
+        public readonly name: string,
+        minus2FontSize: string,
+        minus2LineHeight: string,
+        minus1FontSize: string,
+        minus1LineHeight: string,
+        baseFontSize: string,
+        baseLineHeight: string,
+        plus1FontSize: string,
+        plus1LineHeight: string,
+        plus2FontSize: string,
+        plus2LineHeight: string,
+        plus3FontSize: string,
+        plus3LineHeight: string,
+        plus4FontSize: string,
+        plus4LineHeight: string,
+        plus5FontSize: string,
+        plus5LineHeight: string,
+        plus6FontSize: string,
+        plus6LineHeight: string
+    ) {
+        this.minus2 = new TypeRampPosition(name, "minus2", minus2FontSize, minus2LineHeight);
+        this.minus1 = new TypeRampPosition(name, "minus1", minus1FontSize, minus1LineHeight);
+        this.base = new TypeRampPosition(name, "base", baseFontSize, baseLineHeight);
+        this.plus1 = new TypeRampPosition(name, "plus1", plus1FontSize, plus1LineHeight);
+        this.plus2 = new TypeRampPosition(name, "plus2", plus2FontSize, plus2LineHeight);
+        this.plus3 = new TypeRampPosition(name, "plus3", plus3FontSize, plus3LineHeight);
+        this.plus4 = new TypeRampPosition(name, "plus4", plus4FontSize, plus4LineHeight);
+        this.plus5 = new TypeRampPosition(name, "plus5", plus5FontSize, plus5LineHeight);
+        this.plus6 = new TypeRampPosition(name, "plus6", plus6FontSize, plus6LineHeight);
+    }
+}

packages/adaptive-ui/src/reference/token-naming.ts

@@ -719,42 +719,78 @@ export const TokenNameMapping = {
     "layer-fill-interactive-active": "color.layer.fill.interactive.active",
     "layer-fill-interactive-focus": "color.layer.fill.interactive.focus",
     "layer-fill-interactive-disabled": "color.layer.fill.interactive.disabled",
-    "font-family": "typography.default.fontFamily",
-    "body-font-family": "typography.body.fontFamily",
-    "label-font-family": "typography.label.fontFamily",
-    "font-weight": "typography.default.fontWeight",
-    "body-font-weight": "typography.body.fontWeight",
-    "label-font-weight": "typography.label.fontWeight",
-    "font-style": "typography.default.fontStyle",
-    "body-font-style": "typography.body.fontStyle",
-    "label-font-style": "typography.label.fontStyle",
-    "type-ramp-base-font-size": "typography.ramp.base.fontSize",
-    "type-ramp-base-line-height": "typography.ramp.base.lineHeight",
-    "type-ramp-base-font-variations": "typography.ramp.base.fontVariations",
-    "type-ramp-minus-1-font-size": "typography.ramp.minus1.fontSize",
-    "type-ramp-minus-1-line-height": "typography.ramp.minus1.lineHeight",
-    "type-ramp-minus-1-font-variations": "typography.ramp.minus1.fontVariations",
-    "type-ramp-minus-2-font-size": "typography.ramp.minus2.fontSize",
-    "type-ramp-minus-2-line-height": "typography.ramp.minus2.lineHeight",
-    "type-ramp-minus-2-font-variations": "typography.ramp.minus2.fontVariations",
-    "type-ramp-plus-1-font-size": "typography.ramp.plus1.fontSize",
-    "type-ramp-plus-1-line-height": "typography.ramp.plus1.lineHeight",
-    "type-ramp-plus-1-font-variations": "typography.ramp.plus1.fontVariations",
-    "type-ramp-plus-2-font-size": "typography.ramp.plus2.fontSize",
-    "type-ramp-plus-2-line-height": "typography.ramp.plus2.lineHeight",
-    "type-ramp-plus-2-font-variations": "typography.ramp.plus2.fontVariations",
-    "type-ramp-plus-3-font-size": "typography.ramp.plus3.fontSize",
-    "type-ramp-plus-3-line-height": "typography.ramp.plus3.lineHeight",
-    "type-ramp-plus-3-font-variations": "typography.ramp.plus3.fontVariations",
-    "type-ramp-plus-4-font-size": "typography.ramp.plus4.fontSize",
-    "type-ramp-plus-4-line-height": "typography.ramp.plus4.lineHeight",
-    "type-ramp-plus-4-font-variations": "typography.ramp.plus4.fontVariations",
-    "type-ramp-plus-5-font-size": "typography.ramp.plus5.fontSize",
-    "type-ramp-plus-5-line-height": "typography.ramp.plus5.lineHeight",
-    "type-ramp-plus-5-font-variations": "typography.ramp.plus5.fontVariations",
-    "type-ramp-plus-6-font-size": "typography.ramp.plus6.fontSize",
-    "type-ramp-plus-6-line-height": "typography.ramp.plus6.lineHeight",
-    "type-ramp-plus-6-font-variations": "typography.ramp.plus6.fontVariations",
+    "font-family": "typography.fontFamily.default",
+    "body-font-family": "typography.fontFamily.body",
+    "label-font-family": "typography.fontFamily.label",
+    "font-weight": "typography.fontWeight.default",
+    "body-font-weight": "typography.fontWeight.body",
+    "label-font-weight": "typography.fontWeight.label",
+    "font-style": "typography.fontStyle.default",
+    "body-font-style": "typography.fontStyle.body",
+    "label-font-style": "typography.fontStyle.label",
+    "typography.default.fontFamily": "typography.fontFamily.default",
+    "typography.body.fontFamily": "typography.fontFamily.body",
+    "typography.label.fontFamily": "typography.fontFamily.label",
+    "typography.default.fontWeight": "typography.fontWeight.default",
+    "typography.body.fontWeight": "typography.fontWeight.body",
+    "typography.label.fontWeight": "typography.fontWeight.label",
+    "typography.default.fontStyle": "typography.fontStyle.default",
+    "typography.body.fontStyle": "typography.fontStyle.body",
+    "typography.label.fontStyle": "typography.fontStyle.label",
+    "type-ramp-base-font-size": "typography.ramp.default.fontSize.base",
+    "type-ramp-base-line-height": "typography.ramp.default.lineHeight.base",
+    "type-ramp-base-font-variations": "typography.ramp.default.fontVariations.base",
+    "type-ramp-minus-1-font-size": "typography.ramp.default.fontSize.minus1",
+    "type-ramp-minus-1-line-height": "typography.ramp.default.lineHeight.minus1",
+    "type-ramp-minus-1-font-variations": "typography.ramp.default.fontVariations.minus1",
+    "type-ramp-minus-2-font-size": "typography.ramp.default.fontSize.minus2",
+    "type-ramp-minus-2-line-height": "typography.ramp.default.lineHeight.minus2",
+    "type-ramp-minus-2-font-variations": "typography.ramp.default.fontVariations.minus2",
+    "type-ramp-plus-1-font-size": "typography.ramp.default.fontSize.plus1",
+    "type-ramp-plus-1-line-height": "typography.ramp.default.lineHeight.plus1",
+    "type-ramp-plus-1-font-variations": "typography.ramp.default.fontVariations.plus1",
+    "type-ramp-plus-2-font-size": "typography.ramp.default.fontSize.plus2",
+    "type-ramp-plus-2-line-height": "typography.ramp.default.lineHeight.plus2",
+    "type-ramp-plus-2-font-variations": "typography.ramp.default.fontVariations.plus2",
+    "type-ramp-plus-3-font-size": "typography.ramp.default.fontSize.plus3",
+    "type-ramp-plus-3-line-height": "typography.ramp.default.lineHeight.plus3",
+    "type-ramp-plus-3-font-variations": "typography.ramp.default.fontVariations.plus3",
+    "type-ramp-plus-4-font-size": "typography.ramp.default.fontSize.plus4",
+    "type-ramp-plus-4-line-height": "typography.ramp.default.lineHeight.plus4",
+    "type-ramp-plus-4-font-variations": "typography.ramp.default.fontVariations.plus4",
+    "type-ramp-plus-5-font-size": "typography.ramp.default.fontSize.plus5",
+    "type-ramp-plus-5-line-height": "typography.ramp.default.lineHeight.plus5",
+    "type-ramp-plus-5-font-variations": "typography.ramp.default.fontVariations.plus5",
+    "type-ramp-plus-6-font-size": "typography.ramp.default.fontSize.plus6",
+    "type-ramp-plus-6-line-height": "typography.ramp.default.lineHeight.plus6",
+    "type-ramp-plus-6-font-variations": "typography.ramp.default.fontVariations.plus6",
+    "typography.ramp.base.fontSize": "typography.ramp.default.fontSize.base",
+    "typography.ramp.base.lineHeight": "typography.ramp.default.lineHeight.base",
+    "typography.ramp.base.fontVariations": "typography.ramp.default.fontVariations.base",
+    "typography.ramp.minus1.fontSize": "typography.ramp.default.fontSize.minus1",
+    "typography.ramp.minus1.lineHeight": "typography.ramp.default.lineHeight.minus1",
+    "typography.ramp.minus1.fontVariations": "typography.ramp.default.fontVariations.minus1",
+    "typography.ramp.minus2.fontSize": "typography.ramp.default.fontSize.minus2",
+    "typography.ramp.minus2.lineHeight": "typography.ramp.default.lineHeight.minus2",
+    "typography.ramp.minus2.fontVariations": "typography.ramp.default.fontVariations.minus2",
+    "typography.ramp.plus1.fontSize": "typography.ramp.default.fontSize.plus1",
+    "typography.ramp.plus1.lineHeight": "typography.ramp.default.lineHeight.plus1",
+    "typography.ramp.plus1.fontVariations": "typography.ramp.default.fontVariations.plus1",
+    "typography.ramp.plus2.fontSize": "typography.ramp.default.fontSize.plus2",
+    "typography.ramp.plus2.lineHeight": "typography.ramp.default.lineHeight.plus2",
+    "typography.ramp.plus2.fontVariations": "typography.ramp.default.fontVariations.plus2",
+    "typography.ramp.plus3.fontSize": "typography.ramp.default.fontSize.plus3",
+    "typography.ramp.plus3.lineHeight": "typography.ramp.default.lineHeight.plus3",
+    "typography.ramp.plus3.fontVariations": "typography.ramp.default.fontVariations.plus3",
+    "typography.ramp.plus4.fontSize": "typography.ramp.default.fontSize.plus4",
+    "typography.ramp.plus4.lineHeight": "typography.ramp.default.lineHeight.plus4",
+    "typography.ramp.plus4.fontVariations": "typography.ramp.default.fontVariations.plus4",
+    "typography.ramp.plus5.fontSize": "typography.ramp.default.fontSize.plus5",
+    "typography.ramp.plus5.lineHeight": "typography.ramp.default.lineHeight.plus5",
+    "typography.ramp.plus5.fontVariations": "typography.ramp.default.fontVariations.plus5",
+    "typography.ramp.plus6.fontSize": "typography.ramp.default.fontSize.plus6",
+    "typography.ramp.plus6.lineHeight": "typography.ramp.default.lineHeight.plus6",
+    "typography.ramp.plus6.fontVariations": "typography.ramp.default.fontVariations.plus6",
     "accent-stroke-readable-on-accent-fill-stealth-rest": "color.accent.stroke.readable.on.accent.fill.stealth.rest",
     "accent-stroke-readable-on-accent-fill-stealth-hover": "color.accent.stroke.readable.on.accent.fill.stealth.hover",
     "accent-stroke-readable-on-accent-fill-stealth-active": "color.accent.stroke.readable.on.accent.fill.stealth.active",