diff --git a/change/@adaptive-web-adaptive-ui-6e923336-80b2-4e6c-b796-5fd9a74a304b.json b/change/@adaptive-web-adaptive-ui-6e923336-80b2-4e6c-b796-5fd9a74a304b.json new file mode 100644 index 00000000..c89ae761 --- /dev/null +++ b/change/@adaptive-web-adaptive-ui-6e923336-80b2-4e6c-b796-5fd9a74a304b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Added token for multiline line height in type ramp", + "packageName": "@adaptive-web/adaptive-ui", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/adaptive-ui-explorer/src/app.ts b/packages/adaptive-ui-explorer/src/app.ts index 95bd7401..ff4e9995 100644 --- a/packages/adaptive-ui-explorer/src/app.ts +++ b/packages/adaptive-ui-explorer/src/app.ts @@ -258,6 +258,9 @@ export class App extends FASTElement { case "typeScaleLineHeightRatio": typeRampScale.lineHeightRatio.setValueFor(app.canvas, source.typeScaleLineHeightRatio); break; + case "typeScaleLineHeightMultilineRatio": + typeRampScale.lineHeightMultilineRatio.setValueFor(app.canvas, source.typeScaleLineHeightMultilineRatio); + break; case "typeScaleLineHeightSnap": typeRampScale.lineHeightSnap.setValueFor(app.canvas, `${source.typeScaleLineHeightSnap}px`); break; diff --git a/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.template.ts b/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.template.ts index 18e52abb..98df9e07 100644 --- a/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.template.ts +++ b/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.template.ts @@ -133,6 +133,20 @@ export function controlPaneTemplate(): ElementViewTemplat /> +
+ + x.state.typeScaleLineHeightMultilineRatio} + @input=${(x, c) => + x.state.typeScaleLineHeightMultilineRatio = parseFloat(c.eventTarget().value) + } + /> +
+
`Lorem ipsum dolor sit amet, consectetur a export function typographyTemplate(): ElementViewTemplate { return html` -
+

Minus 2 (font-size: ${x => x.minus2.fontSize}, line-height: ${x => x.minus2.lineHeight}) ${x => x.state.multiline ? multiLineText : singleLineText} diff --git a/packages/adaptive-ui-explorer/src/typography/typography.ts b/packages/adaptive-ui-explorer/src/typography/typography.ts index f1416208..49ebb148 100644 --- a/packages/adaptive-ui-explorer/src/typography/typography.ts +++ b/packages/adaptive-ui-explorer/src/typography/typography.ts @@ -1,5 +1,4 @@ -import { customElement, FASTElement, observable } from "@microsoft/fast-element"; -import { DesignToken, DesignTokenChangeRecord } from "@microsoft/fast-foundation"; +import { customElement, FASTElement, observable, Observable } from "@microsoft/fast-element"; import { State } from "../state.js"; import { typographyStyles as styles } from "./typography.styles.js"; import { typographyTemplate as template } from "./typography.template.js"; @@ -57,6 +56,16 @@ export class Typography extends FASTElement { // Subscribe to token changes this.subscribeToTokenChanges(); + + // Subscribe to state.multiline changes + Observable.getNotifier(this.state).subscribe(this, "multiline"); + } + + disconnectedCallback(): void { + super.disconnectedCallback(); + + // Unsubscribe from state changes + Observable.getNotifier(this.state).unsubscribe(this, "multiline"); } private subscribeToTokenChanges(): void { @@ -70,15 +79,18 @@ export class Typography extends FASTElement { positions.forEach(position => { position.fontSize.subscribe(this); position.lineHeight.subscribe(this); + position.lineHeightMultiline.subscribe(this); }); // Also subscribe to multiplier and ratio changes typeRampScale.multiplier.subscribe(this); typeRampScale.lineHeightRatio.subscribe(this); + typeRampScale.lineHeightMultilineRatio.subscribe(this); typeRampScale.lineHeightSnap.subscribe(this); } - handleChange(token: DesignToken, record: DesignTokenChangeRecord): void { + handleChange(source: any, propertyName?: any): void { + // Handle both DesignToken changes and Observable property changes if (!this.updateScheduled) { this.updateScheduled = true; requestAnimationFrame(() => { diff --git a/packages/adaptive-ui/docs/api-report.md b/packages/adaptive-ui/docs/api-report.md index 90532317..f822a179 100644 --- a/packages/adaptive-ui/docs/api-report.md +++ b/packages/adaptive-ui/docs/api-report.md @@ -867,15 +867,23 @@ export interface TypedDesignToken extends DesignTokenMetadata { // @public export class TypeRampPosition { - constructor(baseName: string, position: string, fontSize: DesignTokenValue, lineHeight: DesignTokenValue); + constructor(baseName: string, position: string, config: TypeRampPositionConfig); readonly fontSize: TypedCSSDesignToken; readonly fontVariations: TypedCSSDesignToken; readonly lineHeight: TypedCSSDesignToken; + readonly lineHeightMultiline: TypedCSSDesignToken; +} + +// @public +export interface TypeRampPositionConfig { + fontSize: DesignTokenValue; + lineHeight: DesignTokenValue; + lineHeightMultiline: DesignTokenValue; } // @public export class TypeRampTokenGroup implements TokenGroup { - constructor(name: string, minus2FontSize: DesignTokenValue, minus2LineHeight: DesignTokenValue, minus1FontSize: DesignTokenValue, minus1LineHeight: DesignTokenValue, baseFontSize: DesignTokenValue, baseLineHeight: DesignTokenValue, plus1FontSize: DesignTokenValue, plus1LineHeight: DesignTokenValue, plus2FontSize: DesignTokenValue, plus2LineHeight: DesignTokenValue, plus3FontSize: DesignTokenValue, plus3LineHeight: DesignTokenValue, plus4FontSize: DesignTokenValue, plus4LineHeight: DesignTokenValue, plus5FontSize: DesignTokenValue, plus5LineHeight: DesignTokenValue, plus6FontSize: DesignTokenValue, plus6LineHeight: DesignTokenValue); + constructor(name: string, minus2: TypeRampPositionConfig, minus1: TypeRampPositionConfig, base: TypeRampPositionConfig, plus1: TypeRampPositionConfig, plus2: TypeRampPositionConfig, plus3: TypeRampPositionConfig, plus4: TypeRampPositionConfig, plus5: TypeRampPositionConfig, plus6: TypeRampPositionConfig); readonly base: TypeRampPosition; readonly minus1: TypeRampPosition; readonly minus2: TypeRampPosition; @@ -891,7 +899,8 @@ export class TypeRampTokenGroup implements TokenGroup { // @public export class TypeScaleTokenGroup extends TypeRampTokenGroup { - constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightSnap?: string); + constructor(name: string, baseSize: string, multiplier: number, lineHeightRatio?: number, lineHeightMultilineRatio?: number, lineHeightSnap?: string); + readonly lineHeightMultilineRatio: TypedDesignToken; readonly lineHeightRatio: TypedDesignToken; readonly lineHeightSnap: TypedCSSDesignToken; readonly multiplier: TypedDesignToken; diff --git a/packages/adaptive-ui/src/core/typography/type-ramp.ts b/packages/adaptive-ui/src/core/typography/type-ramp.ts index 40c5b109..dde78d24 100644 --- a/packages/adaptive-ui/src/core/typography/type-ramp.ts +++ b/packages/adaptive-ui/src/core/typography/type-ramp.ts @@ -17,6 +17,28 @@ function fontVariations(sizeToken: DesignToken): (resolve: DesignTokenRe }; } +/** + * Configuration for a single position on the type ramp. + * + * @public + */ +export interface TypeRampPositionConfig { + /** + * The font size for this position. + */ + fontSize: DesignTokenValue; + + /** + * The line height for single-line UI elements. + */ + lineHeight: DesignTokenValue; + + /** + * The line height for multiline text. + */ + lineHeightMultiline: DesignTokenValue; +} + /** * Represents a single position on the type ramp with font size, line height, and font variations. * @@ -31,12 +53,19 @@ export class TypeRampPosition { public readonly fontSize: TypedCSSDesignToken; /** - * The line height for this type ramp position. + * The line height for this type ramp position (optimized for single-line UI elements). * * @public */ public readonly lineHeight: TypedCSSDesignToken; + /** + * The line height for multiline text that wraps (optimized for readability). + * + * @public + */ + public readonly lineHeightMultiline: TypedCSSDesignToken; + /** * The font variations for this type ramp position. * @@ -49,17 +78,16 @@ export class TypeRampPosition { * * @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. + * @param config - The configuration for this type ramp position. */ constructor( baseName: string, position: string, - fontSize: DesignTokenValue, - lineHeight: DesignTokenValue, + config: TypeRampPositionConfig, ) { - this.fontSize = createTokenFontSize(`${baseName}.fontSize.${position}`).withDefault(fontSize); - this.lineHeight = createTokenLineHeight(`${baseName}.lineHeight.${position}`).withDefault(lineHeight); + this.fontSize = createTokenFontSize(`${baseName}.fontSize.${position}`).withDefault(config.fontSize); + this.lineHeight = createTokenLineHeight(`${baseName}.lineHeight.${position}`).withDefault(config.lineHeight); + this.lineHeightMultiline = createTokenLineHeight(`${baseName}.lineHeightMultiline.${position}`).withDefault(config.lineHeightMultiline); this.fontVariations = createTokenFontVariations(`${baseName}.fontVariations.${position}`).withDefault(fontVariations(this.fontSize)); } } @@ -137,55 +165,37 @@ export class TypeRampTokenGroup implements TokenGroup { * 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. + * @param minus2 - Configuration for the minus2 position. + * @param minus1 - Configuration for the minus1 position. + * @param base - Configuration for the base position. + * @param plus1 - Configuration for the plus1 position. + * @param plus2 - Configuration for the plus2 position. + * @param plus3 - Configuration for the plus3 position. + * @param plus4 - Configuration for the plus4 position. + * @param plus5 - Configuration for the plus5 position. + * @param plus6 - Configuration for the plus6 position. */ constructor( public readonly name: string, - minus2FontSize: DesignTokenValue, - minus2LineHeight: DesignTokenValue, - minus1FontSize: DesignTokenValue, - minus1LineHeight: DesignTokenValue, - baseFontSize: DesignTokenValue, - baseLineHeight: DesignTokenValue, - plus1FontSize: DesignTokenValue, - plus1LineHeight: DesignTokenValue, - plus2FontSize: DesignTokenValue, - plus2LineHeight: DesignTokenValue, - plus3FontSize: DesignTokenValue, - plus3LineHeight: DesignTokenValue, - plus4FontSize: DesignTokenValue, - plus4LineHeight: DesignTokenValue, - plus5FontSize: DesignTokenValue, - plus5LineHeight: DesignTokenValue, - plus6FontSize: DesignTokenValue, - plus6LineHeight: DesignTokenValue + minus2: TypeRampPositionConfig, + minus1: TypeRampPositionConfig, + base: TypeRampPositionConfig, + plus1: TypeRampPositionConfig, + plus2: TypeRampPositionConfig, + plus3: TypeRampPositionConfig, + plus4: TypeRampPositionConfig, + plus5: TypeRampPositionConfig, + plus6: TypeRampPositionConfig, ) { - 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); + this.minus2 = new TypeRampPosition(name, "minus2", minus2); + this.minus1 = new TypeRampPosition(name, "minus1", minus1); + this.base = new TypeRampPosition(name, "base", base); + this.plus1 = new TypeRampPosition(name, "plus1", plus1); + this.plus2 = new TypeRampPosition(name, "plus2", plus2); + this.plus3 = new TypeRampPosition(name, "plus3", plus3); + this.plus4 = new TypeRampPosition(name, "plus4", plus4); + this.plus5 = new TypeRampPosition(name, "plus5", plus5); + this.plus6 = new TypeRampPosition(name, "plus6", plus6); } } @@ -207,12 +217,19 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { public readonly multiplier: TypedDesignToken; /** - * The line height ratio token for the type scale. + * The line height ratio token for the type scale (for single-line UI). * * @public */ public readonly lineHeightRatio: TypedDesignToken; + /** + * The line height ratio token for multiline text (for better readability). + * + * @public + */ + public readonly lineHeightMultilineRatio: TypedDesignToken; + /** * The line height snap token for rounding line heights. * @@ -226,48 +243,50 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { * @param name - The base name of the token group (e.g., "typography.ramp.scale"). * @param baseSize - The base font size as a string value (e.g., "16px"). * @param multiplier - The multiplier for the type scale (e.g., 1.25). - * @param lineHeightRatio - The line height ratio (default: 1.4). + * @param lineHeightRatio - The line height ratio for single-line UI (default: 1.4). * @param lineHeightSnap - The line height snap value for rounding line heights (default: "2px"). + * @param lineHeightMultilineRatio - The line height ratio for multiline text (default: 1.5). */ constructor( name: string, baseSize: string, multiplier: number, - lineHeightRatio: number = 1.4, - lineHeightSnap: string = "2px" + lineHeightRatio: number = 1.3, + lineHeightMultilineRatio: number = 1.6, + lineHeightSnap: string = "2px", ) { // Create the tokens const multiplierToken = createTokenNumber(`${name}.multiplier`).withDefault(multiplier); const lineHeightRatioToken = createTokenNumber(`${name}.lineHeightRatio`).withDefault(lineHeightRatio); + const lineHeightMultilineRatioToken = createTokenNumber(`${name}.lineHeightMultilineRatio`).withDefault(lineHeightMultilineRatio); const lineHeightSnapToken = createTokenDimension(`${name}.lineHeightSnap`).withDefault(lineHeightSnap); - // Call parent constructor with placeholder values + // Create placeholder configs for all positions // We'll update the tokens with calculated values after all position tokens are created + const placeholderConfig: TypeRampPositionConfig = { + fontSize: "0px", + lineHeight: "0px", + lineHeightMultiline: "0px", + }; + + // Call parent constructor with placeholder values super( name, - "0px", // minus2 fontSize placeholder - "0px", // minus2 lineHeight placeholder - "0px", // minus1 fontSize placeholder - "0px", // minus1 lineHeight placeholder - baseSize, // base fontSize (the only concrete value) - "0px", // base lineHeight placeholder - "0px", // plus1 fontSize placeholder - "0px", // plus1 lineHeight placeholder - "0px", // plus2 fontSize placeholder - "0px", // plus2 lineHeight placeholder - "0px", // plus3 fontSize placeholder - "0px", // plus3 lineHeight placeholder - "0px", // plus4 fontSize placeholder - "0px", // plus4 lineHeight placeholder - "0px", // plus5 fontSize placeholder - "0px", // plus5 lineHeight placeholder - "0px", // plus6 fontSize placeholder - "0px" // plus6 lineHeight placeholder + placeholderConfig, // minus2 + placeholderConfig, // minus1 + { fontSize: baseSize, lineHeight: "0px", lineHeightMultiline: "0px" }, // base (only fontSize is concrete) + placeholderConfig, // plus1 + placeholderConfig, // plus2 + placeholderConfig, // plus3 + placeholderConfig, // plus4 + placeholderConfig, // plus5 + placeholderConfig, // plus6 ); // Set the tokens this.multiplier = multiplierToken; this.lineHeightRatio = lineHeightRatioToken; + this.lineHeightMultilineRatio = lineHeightMultilineRatioToken; this.lineHeightSnap = lineHeightSnapToken; // Now that all position tokens exist, update them with calculated values @@ -279,6 +298,10 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.minus2.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.minus2.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.minus2.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.minus1.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -288,11 +311,19 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.minus1.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.minus1.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.minus1.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.base.lineHeight.withDefault( (resolve: DesignTokenResolver) => `round(${resolve(this.base.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.base.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.base.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.plus1.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -302,6 +333,10 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.plus1.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.plus1.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.plus1.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.plus2.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -311,6 +346,10 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.plus2.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.plus2.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.plus2.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.plus3.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -320,6 +359,10 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.plus3.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.plus3.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.plus3.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.plus4.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -329,6 +372,10 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.plus4.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.plus4.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.plus4.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.plus5.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -338,6 +385,10 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.plus5.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.plus5.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.plus5.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); this.plus6.fontSize.withDefault( (resolve: DesignTokenResolver) => @@ -347,5 +398,9 @@ export class TypeScaleTokenGroup extends TypeRampTokenGroup { (resolve: DesignTokenResolver) => `round(${resolve(this.plus6.fontSize)} * ${resolve(lineHeightRatioToken)}, ${resolve(lineHeightSnapToken)})` ); + this.plus6.lineHeightMultiline.withDefault( + (resolve: DesignTokenResolver) => + `round(${resolve(this.plus6.fontSize)} * ${resolve(lineHeightMultilineRatioToken)}, ${resolve(lineHeightSnapToken)})` + ); } } diff --git a/packages/adaptive-ui/src/reference/modules.ts b/packages/adaptive-ui/src/reference/modules.ts index cf19aa67..97ce81dc 100644 --- a/packages/adaptive-ui/src/reference/modules.ts +++ b/packages/adaptive-ui/src/reference/modules.ts @@ -88,33 +88,7 @@ import { labelFontFamily, labelFontStyle, labelFontWeight, - typeRampBaseFontSize, - typeRampBaseFontVariations, - typeRampBaseLineHeight, - typeRampMinus1FontSize, - typeRampMinus1FontVariations, - typeRampMinus1LineHeight, - typeRampMinus2FontSize, - typeRampMinus2FontVariations, - typeRampMinus2LineHeight, - typeRampPlus1FontSize, - typeRampPlus1FontVariations, - typeRampPlus1LineHeight, - typeRampPlus2FontSize, - typeRampPlus2FontVariations, - typeRampPlus2LineHeight, - typeRampPlus3FontSize, - typeRampPlus3FontVariations, - typeRampPlus3LineHeight, - typeRampPlus4FontSize, - typeRampPlus4FontVariations, - typeRampPlus4LineHeight, - typeRampPlus5FontSize, - typeRampPlus5FontVariations, - typeRampPlus5LineHeight, - typeRampPlus6FontSize, - typeRampPlus6FontVariations, - typeRampPlus6LineHeight, + typeRampDefault, } from "./type.js"; import { densityBorderStyles, transparent } from "./util.js"; @@ -1366,10 +1340,10 @@ export const neutralDividerDiscernibleElementStyles: Styles = Styles.fromPropert export const typeRampBaseStyles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampBaseFontSize, - lineHeight: typeRampBaseLineHeight, + fontSize: typeRampDefault.base.fontSize, + lineHeight: typeRampDefault.base.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampBaseFontVariations, + fontVariationSettings: typeRampDefault.base.fontVariations, }, "text.type-ramp-base", ); @@ -1382,10 +1356,10 @@ export const typeRampBaseStyles: Styles = Styles.fromProperties( export const typeRampMinus1Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampMinus1FontSize, - lineHeight: typeRampMinus1LineHeight, + fontSize: typeRampDefault.minus1.fontSize, + lineHeight: typeRampDefault.minus1.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampMinus1FontVariations, + fontVariationSettings: typeRampDefault.minus1.fontVariations, }, "text.type-ramp-minus-1", ); @@ -1398,10 +1372,10 @@ export const typeRampMinus1Styles: Styles = Styles.fromProperties( export const typeRampMinus2Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampMinus2FontSize, - lineHeight: typeRampMinus2LineHeight, + fontSize: typeRampDefault.minus2.fontSize, + lineHeight: typeRampDefault.minus2.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampMinus2FontVariations, + fontVariationSettings: typeRampDefault.minus2.fontVariations, }, "text.type-ramp-minus-2", ); @@ -1414,10 +1388,10 @@ export const typeRampMinus2Styles: Styles = Styles.fromProperties( export const typeRampPlus1Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampPlus1FontSize, - lineHeight: typeRampPlus1LineHeight, + fontSize: typeRampDefault.plus1.fontSize, + lineHeight: typeRampDefault.plus1.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampPlus1FontVariations, + fontVariationSettings: typeRampDefault.plus1.fontVariations, }, "text.type-ramp-plus-1", ); @@ -1430,10 +1404,10 @@ export const typeRampPlus1Styles: Styles = Styles.fromProperties( export const typeRampPlus2Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampPlus2FontSize, - lineHeight: typeRampPlus2LineHeight, + fontSize: typeRampDefault.plus2.fontSize, + lineHeight: typeRampDefault.plus2.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampPlus2FontVariations, + fontVariationSettings: typeRampDefault.plus2.fontVariations, }, "text.type-ramp-plus-2", ); @@ -1446,10 +1420,10 @@ export const typeRampPlus2Styles: Styles = Styles.fromProperties( export const typeRampPlus3Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampPlus3FontSize, - lineHeight: typeRampPlus3LineHeight, + fontSize: typeRampDefault.plus3.fontSize, + lineHeight: typeRampDefault.plus3.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampPlus3FontVariations, + fontVariationSettings: typeRampDefault.plus3.fontVariations, }, "text.type-ramp-plus-3", ); @@ -1462,10 +1436,10 @@ export const typeRampPlus3Styles: Styles = Styles.fromProperties( export const typeRampPlus4Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampPlus4FontSize, - lineHeight: typeRampPlus4LineHeight, + fontSize: typeRampDefault.plus4.fontSize, + lineHeight: typeRampDefault.plus4.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampPlus4FontVariations, + fontVariationSettings: typeRampDefault.plus4.fontVariations, }, "text.type-ramp-plus-4", ); @@ -1478,10 +1452,10 @@ export const typeRampPlus4Styles: Styles = Styles.fromProperties( export const typeRampPlus5Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampPlus5FontSize, - lineHeight: typeRampPlus5LineHeight, + fontSize: typeRampDefault.plus5.fontSize, + lineHeight: typeRampDefault.plus5.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampPlus5FontVariations, + fontVariationSettings: typeRampDefault.plus5.fontVariations, }, "text.type-ramp-plus-5", ); @@ -1494,10 +1468,10 @@ export const typeRampPlus5Styles: Styles = Styles.fromProperties( export const typeRampPlus6Styles: Styles = Styles.fromProperties( { fontFamily: fontFamily, - fontSize: typeRampPlus6FontSize, - lineHeight: typeRampPlus6LineHeight, + fontSize: typeRampDefault.plus6.fontSize, + lineHeight: typeRampDefault.plus6.lineHeight, fontWeight: fontWeight, - fontVariationSettings: typeRampPlus6FontVariations, + fontVariationSettings: typeRampDefault.plus6.fontVariations, }, "text.type-ramp-plus-6", ); @@ -1659,6 +1633,20 @@ export const plainTextStyles: Styles = Styles.compose( "styles.text-plain", ); +/** + * @public + */ +export const plainTextMultilineStyles: Styles = Styles.compose( + [ + typeRampBaseStyles, + neutralForegroundStrongElementStyles, + ], + { + lineHeight: typeRampDefault.base.lineHeightMultiline, + }, + "styles.text-plain-multiline", +); + /** * @public */ diff --git a/packages/adaptive-ui/src/reference/type.ts b/packages/adaptive-ui/src/reference/type.ts index 434481b9..e4286768 100644 --- a/packages/adaptive-ui/src/reference/type.ts +++ b/packages/adaptive-ui/src/reference/type.ts @@ -52,24 +52,15 @@ export const labelFontStyle = createTokenFontStyle("typography.fontStyle.label") */ export const typeRampDefault = new TypeRampTokenGroup( "typography.ramp.default", - "10px", - "12px", - "12px", - "14px", - "14px", - "16px", - "16px", - "22px", - "20px", - "26px", - "24px", - "32px", - "28px", - "36px", - "32px", - "40px", - "40px", - "52px" + { fontSize: "10px", lineHeight: "12px", lineHeightMultiline: "14px" }, // minus2 + { fontSize: "12px", lineHeight: "14px", lineHeightMultiline: "16px" }, // minus1 + { fontSize: "14px", lineHeight: "16px", lineHeightMultiline: "18px" }, // base + { fontSize: "16px", lineHeight: "22px", lineHeightMultiline: "24px" }, // plus1 + { fontSize: "20px", lineHeight: "26px", lineHeightMultiline: "28px" }, // plus2 + { fontSize: "24px", lineHeight: "32px", lineHeightMultiline: "34px" }, // plus3 + { fontSize: "28px", lineHeight: "36px", lineHeightMultiline: "38px" }, // plus4 + { fontSize: "32px", lineHeight: "40px", lineHeightMultiline: "42px" }, // plus5 + { fontSize: "40px", lineHeight: "52px", lineHeightMultiline: "56px" } // plus6 ); /** @@ -86,12 +77,16 @@ export const typeRampDefault = new TypeRampTokenGroup( * export const typeRampScale = new TypeScaleTokenGroup( * "typography.ramp.scale", * "16px", // base size - * 1.25, // multiplier (each step is 1.25x the previous) - * 1.4 // line height ratio (optional, defaults to 1.4) + * 1.2, // multiplier (each step is 1.2x the previous) + * 1.3, // line height ratio for single-line UI (optional, defaults to 1.3) + * 1.6, // line height ratio for multiline text (optional, defaults to 1.6) + * "2px", // line height snap for rounding (optional, defaults to "2px") * ); * * // Access the scale: * // typeRampScale.base.fontSize - the primary editable base font size token + * // typeRampScale.base.lineHeight - for single-line UI elements + * // typeRampScale.base.lineHeightMultiline - for multiline text * // typeRampScale.multiplier - the multiplier token (also editable) * // typeRampScale.plus1.fontSize - derived: "calc(base * multiplier)" * // typeRampScale.plus2.fontSize - derived: "calc(base * pow(multiplier, 2))"