Skip to content

Commit 2407fcf

Browse files
bhestonbheston
committed
Updated typography tokens into token group
1 parent 5f0ebfd commit 2407fcf

File tree

3 files changed

+325
-105
lines changed

3 files changed

+325
-105
lines changed

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

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import type { DesignToken, DesignTokenResolver } from "@microsoft/fast-foundation";
2+
import type { TypedCSSDesignToken } from "../adaptive-design-tokens.js";
3+
import { TokenGroup } from "../types.js";
4+
import {
5+
createTokenFontSize,
6+
createTokenFontVariations,
7+
createTokenLineHeight
8+
} from "../token-helpers.js";
9+
10+
// TODO: This should be a recipe. Reevaluate as design tokens update.
11+
function fontVariations(sizeToken: DesignToken<string>): (resolve: DesignTokenResolver) => string {
12+
return (resolve: DesignTokenResolver): string => {
13+
return "";
14+
};
15+
}
16+
17+
/**
18+
* Represents a single position on the type ramp with font size, line height, and font variations.
19+
*
20+
* @public
21+
*/
22+
export class TypeRampPosition {
23+
/**
24+
* The font size for this type ramp position.
25+
*
26+
* @public
27+
*/
28+
public readonly fontSize: TypedCSSDesignToken<string>;
29+
30+
/**
31+
* The line height for this type ramp position.
32+
*
33+
* @public
34+
*/
35+
public readonly lineHeight: TypedCSSDesignToken<string>;
36+
37+
/**
38+
* The font variations for this type ramp position.
39+
*
40+
* @public
41+
*/
42+
public readonly fontVariations: TypedCSSDesignToken<string>;
43+
44+
/**
45+
* Creates a new type ramp position.
46+
*
47+
* @param baseName - The base name of the type ramp.
48+
* @param position - The position on the type ramp.
49+
* @param fontSize - The font size for this type ramp position.
50+
* @param lineHeight - The line height for this type ramp position.
51+
*/
52+
constructor(
53+
baseName: string,
54+
position: string,
55+
fontSize: string,
56+
lineHeight: string,
57+
) {
58+
this.fontSize = createTokenFontSize(`${baseName}.fontSize.${position}`).withDefault(fontSize);
59+
this.lineHeight = createTokenLineHeight(`${baseName}.lineHeight.${position}`).withDefault(lineHeight);
60+
this.fontVariations = createTokenFontVariations(`${baseName}.fontVariations.${position}`).withDefault(fontVariations(this.fontSize));
61+
}
62+
}
63+
64+
/**
65+
* A complete type ramp with all positions from minus2 to plus6.
66+
*
67+
* @public
68+
*/
69+
export class TypeRampTokenGroup implements TokenGroup {
70+
/**
71+
* The minus2 position on the type ramp.
72+
*
73+
* @public
74+
*/
75+
public readonly minus2: TypeRampPosition;
76+
77+
/**
78+
* The minus1 position on the type ramp.
79+
*
80+
* @public
81+
*/
82+
public readonly minus1: TypeRampPosition;
83+
84+
/**
85+
* The base position on the type ramp.
86+
*
87+
* @public
88+
*/
89+
public readonly base: TypeRampPosition;
90+
91+
/**
92+
* The plus1 position on the type ramp.
93+
*
94+
* @public
95+
*/
96+
public readonly plus1: TypeRampPosition;
97+
98+
/**
99+
* The plus2 position on the type ramp.
100+
*
101+
* @public
102+
*/
103+
public readonly plus2: TypeRampPosition;
104+
105+
/**
106+
* The plus3 position on the type ramp.
107+
*
108+
* @public
109+
*/
110+
public readonly plus3: TypeRampPosition;
111+
112+
/**
113+
* The plus4 position on the type ramp.
114+
*
115+
* @public
116+
*/
117+
public readonly plus4: TypeRampPosition;
118+
119+
/**
120+
* The plus5 position on the type ramp.
121+
*
122+
* @public
123+
*/
124+
public readonly plus5: TypeRampPosition;
125+
126+
/**
127+
* The plus6 position on the type ramp.
128+
*
129+
* @public
130+
*/
131+
public readonly plus6: TypeRampPosition;
132+
133+
/**
134+
* Creates a new type ramp token group with all positions.
135+
*
136+
* @param name - The base name of the token group (e.g., "typography.ramp").
137+
* @param minus2FontSize - The font size for the minus2 position.
138+
* @param minus2LineHeight - The line height for the minus2 position.
139+
* @param minus1FontSize - The font size for the minus1 position.
140+
* @param minus1LineHeight - The line height for the minus1 position.
141+
* @param baseFontSize - The font size for the base position.
142+
* @param baseLineHeight - The line height for the base position.
143+
* @param plus1FontSize - The font size for the plus1 position.
144+
* @param plus1LineHeight - The line height for the plus1 position.
145+
* @param plus2FontSize - The font size for the plus2 position.
146+
* @param plus2LineHeight - The line height for the plus2 position.
147+
* @param plus3FontSize - The font size for the plus3 position.
148+
* @param plus3LineHeight - The line height for the plus3 position.
149+
* @param plus4FontSize - The font size for the plus4 position.
150+
* @param plus4LineHeight - The line height for the plus4 position.
151+
* @param plus5FontSize - The font size for the plus5 position.
152+
* @param plus5LineHeight - The line height for the plus5 position.
153+
* @param plus6FontSize - The font size for the plus6 position.
154+
* @param plus6LineHeight - The line height for the plus6 position.
155+
*/
156+
constructor(
157+
public readonly name: string,
158+
minus2FontSize: string,
159+
minus2LineHeight: string,
160+
minus1FontSize: string,
161+
minus1LineHeight: string,
162+
baseFontSize: string,
163+
baseLineHeight: string,
164+
plus1FontSize: string,
165+
plus1LineHeight: string,
166+
plus2FontSize: string,
167+
plus2LineHeight: string,
168+
plus3FontSize: string,
169+
plus3LineHeight: string,
170+
plus4FontSize: string,
171+
plus4LineHeight: string,
172+
plus5FontSize: string,
173+
plus5LineHeight: string,
174+
plus6FontSize: string,
175+
plus6LineHeight: string
176+
) {
177+
this.minus2 = new TypeRampPosition(name, "minus2", minus2FontSize, minus2LineHeight);
178+
this.minus1 = new TypeRampPosition(name, "minus1", minus1FontSize, minus1LineHeight);
179+
this.base = new TypeRampPosition(name, "base", baseFontSize, baseLineHeight);
180+
this.plus1 = new TypeRampPosition(name, "plus1", plus1FontSize, plus1LineHeight);
181+
this.plus2 = new TypeRampPosition(name, "plus2", plus2FontSize, plus2LineHeight);
182+
this.plus3 = new TypeRampPosition(name, "plus3", plus3FontSize, plus3LineHeight);
183+
this.plus4 = new TypeRampPosition(name, "plus4", plus4FontSize, plus4LineHeight);
184+
this.plus5 = new TypeRampPosition(name, "plus5", plus5FontSize, plus5LineHeight);
185+
this.plus6 = new TypeRampPosition(name, "plus6", plus6FontSize, plus6LineHeight);
186+
}
187+
}

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

Lines changed: 72 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -719,42 +719,78 @@ export const TokenNameMapping = {
719719
"layer-fill-interactive-active": "color.layer.fill.interactive.active",
720720
"layer-fill-interactive-focus": "color.layer.fill.interactive.focus",
721721
"layer-fill-interactive-disabled": "color.layer.fill.interactive.disabled",
722-
"font-family": "typography.default.fontFamily",
723-
"body-font-family": "typography.body.fontFamily",
724-
"label-font-family": "typography.label.fontFamily",
725-
"font-weight": "typography.default.fontWeight",
726-
"body-font-weight": "typography.body.fontWeight",
727-
"label-font-weight": "typography.label.fontWeight",
728-
"font-style": "typography.default.fontStyle",
729-
"body-font-style": "typography.body.fontStyle",
730-
"label-font-style": "typography.label.fontStyle",
731-
"type-ramp-base-font-size": "typography.ramp.base.fontSize",
732-
"type-ramp-base-line-height": "typography.ramp.base.lineHeight",
733-
"type-ramp-base-font-variations": "typography.ramp.base.fontVariations",
734-
"type-ramp-minus-1-font-size": "typography.ramp.minus1.fontSize",
735-
"type-ramp-minus-1-line-height": "typography.ramp.minus1.lineHeight",
736-
"type-ramp-minus-1-font-variations": "typography.ramp.minus1.fontVariations",
737-
"type-ramp-minus-2-font-size": "typography.ramp.minus2.fontSize",
738-
"type-ramp-minus-2-line-height": "typography.ramp.minus2.lineHeight",
739-
"type-ramp-minus-2-font-variations": "typography.ramp.minus2.fontVariations",
740-
"type-ramp-plus-1-font-size": "typography.ramp.plus1.fontSize",
741-
"type-ramp-plus-1-line-height": "typography.ramp.plus1.lineHeight",
742-
"type-ramp-plus-1-font-variations": "typography.ramp.plus1.fontVariations",
743-
"type-ramp-plus-2-font-size": "typography.ramp.plus2.fontSize",
744-
"type-ramp-plus-2-line-height": "typography.ramp.plus2.lineHeight",
745-
"type-ramp-plus-2-font-variations": "typography.ramp.plus2.fontVariations",
746-
"type-ramp-plus-3-font-size": "typography.ramp.plus3.fontSize",
747-
"type-ramp-plus-3-line-height": "typography.ramp.plus3.lineHeight",
748-
"type-ramp-plus-3-font-variations": "typography.ramp.plus3.fontVariations",
749-
"type-ramp-plus-4-font-size": "typography.ramp.plus4.fontSize",
750-
"type-ramp-plus-4-line-height": "typography.ramp.plus4.lineHeight",
751-
"type-ramp-plus-4-font-variations": "typography.ramp.plus4.fontVariations",
752-
"type-ramp-plus-5-font-size": "typography.ramp.plus5.fontSize",
753-
"type-ramp-plus-5-line-height": "typography.ramp.plus5.lineHeight",
754-
"type-ramp-plus-5-font-variations": "typography.ramp.plus5.fontVariations",
755-
"type-ramp-plus-6-font-size": "typography.ramp.plus6.fontSize",
756-
"type-ramp-plus-6-line-height": "typography.ramp.plus6.lineHeight",
757-
"type-ramp-plus-6-font-variations": "typography.ramp.plus6.fontVariations",
722+
"font-family": "typography.fontFamily.default",
723+
"body-font-family": "typography.fontFamily.body",
724+
"label-font-family": "typography.fontFamily.label",
725+
"font-weight": "typography.fontWeight.default",
726+
"body-font-weight": "typography.fontWeight.body",
727+
"label-font-weight": "typography.fontWeight.label",
728+
"font-style": "typography.fontStyle.default",
729+
"body-font-style": "typography.fontStyle.body",
730+
"label-font-style": "typography.fontStyle.label",
731+
"typography.default.fontFamily": "typography.fontFamily.default",
732+
"typography.body.fontFamily": "typography.fontFamily.body",
733+
"typography.label.fontFamily": "typography.fontFamily.label",
734+
"typography.default.fontWeight": "typography.fontWeight.default",
735+
"typography.body.fontWeight": "typography.fontWeight.body",
736+
"typography.label.fontWeight": "typography.fontWeight.label",
737+
"typography.default.fontStyle": "typography.fontStyle.default",
738+
"typography.body.fontStyle": "typography.fontStyle.body",
739+
"typography.label.fontStyle": "typography.fontStyle.label",
740+
"type-ramp-base-font-size": "typography.ramp.default.fontSize.base",
741+
"type-ramp-base-line-height": "typography.ramp.default.lineHeight.base",
742+
"type-ramp-base-font-variations": "typography.ramp.default.fontVariations.base",
743+
"type-ramp-minus-1-font-size": "typography.ramp.default.fontSize.minus1",
744+
"type-ramp-minus-1-line-height": "typography.ramp.default.lineHeight.minus1",
745+
"type-ramp-minus-1-font-variations": "typography.ramp.default.fontVariations.minus1",
746+
"type-ramp-minus-2-font-size": "typography.ramp.default.fontSize.minus2",
747+
"type-ramp-minus-2-line-height": "typography.ramp.default.lineHeight.minus2",
748+
"type-ramp-minus-2-font-variations": "typography.ramp.default.fontVariations.minus2",
749+
"type-ramp-plus-1-font-size": "typography.ramp.default.fontSize.plus1",
750+
"type-ramp-plus-1-line-height": "typography.ramp.default.lineHeight.plus1",
751+
"type-ramp-plus-1-font-variations": "typography.ramp.default.fontVariations.plus1",
752+
"type-ramp-plus-2-font-size": "typography.ramp.default.fontSize.plus2",
753+
"type-ramp-plus-2-line-height": "typography.ramp.default.lineHeight.plus2",
754+
"type-ramp-plus-2-font-variations": "typography.ramp.default.fontVariations.plus2",
755+
"type-ramp-plus-3-font-size": "typography.ramp.default.fontSize.plus3",
756+
"type-ramp-plus-3-line-height": "typography.ramp.default.lineHeight.plus3",
757+
"type-ramp-plus-3-font-variations": "typography.ramp.default.fontVariations.plus3",
758+
"type-ramp-plus-4-font-size": "typography.ramp.default.fontSize.plus4",
759+
"type-ramp-plus-4-line-height": "typography.ramp.default.lineHeight.plus4",
760+
"type-ramp-plus-4-font-variations": "typography.ramp.default.fontVariations.plus4",
761+
"type-ramp-plus-5-font-size": "typography.ramp.default.fontSize.plus5",
762+
"type-ramp-plus-5-line-height": "typography.ramp.default.lineHeight.plus5",
763+
"type-ramp-plus-5-font-variations": "typography.ramp.default.fontVariations.plus5",
764+
"type-ramp-plus-6-font-size": "typography.ramp.default.fontSize.plus6",
765+
"type-ramp-plus-6-line-height": "typography.ramp.default.lineHeight.plus6",
766+
"type-ramp-plus-6-font-variations": "typography.ramp.default.fontVariations.plus6",
767+
"typography.ramp.base.fontSize": "typography.ramp.default.fontSize.base",
768+
"typography.ramp.base.lineHeight": "typography.ramp.default.lineHeight.base",
769+
"typography.ramp.base.fontVariations": "typography.ramp.default.fontVariations.base",
770+
"typography.ramp.minus1.fontSize": "typography.ramp.default.fontSize.minus1",
771+
"typography.ramp.minus1.lineHeight": "typography.ramp.default.lineHeight.minus1",
772+
"typography.ramp.minus1.fontVariations": "typography.ramp.default.fontVariations.minus1",
773+
"typography.ramp.minus2.fontSize": "typography.ramp.default.fontSize.minus2",
774+
"typography.ramp.minus2.lineHeight": "typography.ramp.default.lineHeight.minus2",
775+
"typography.ramp.minus2.fontVariations": "typography.ramp.default.fontVariations.minus2",
776+
"typography.ramp.plus1.fontSize": "typography.ramp.default.fontSize.plus1",
777+
"typography.ramp.plus1.lineHeight": "typography.ramp.default.lineHeight.plus1",
778+
"typography.ramp.plus1.fontVariations": "typography.ramp.default.fontVariations.plus1",
779+
"typography.ramp.plus2.fontSize": "typography.ramp.default.fontSize.plus2",
780+
"typography.ramp.plus2.lineHeight": "typography.ramp.default.lineHeight.plus2",
781+
"typography.ramp.plus2.fontVariations": "typography.ramp.default.fontVariations.plus2",
782+
"typography.ramp.plus3.fontSize": "typography.ramp.default.fontSize.plus3",
783+
"typography.ramp.plus3.lineHeight": "typography.ramp.default.lineHeight.plus3",
784+
"typography.ramp.plus3.fontVariations": "typography.ramp.default.fontVariations.plus3",
785+
"typography.ramp.plus4.fontSize": "typography.ramp.default.fontSize.plus4",
786+
"typography.ramp.plus4.lineHeight": "typography.ramp.default.lineHeight.plus4",
787+
"typography.ramp.plus4.fontVariations": "typography.ramp.default.fontVariations.plus4",
788+
"typography.ramp.plus5.fontSize": "typography.ramp.default.fontSize.plus5",
789+
"typography.ramp.plus5.lineHeight": "typography.ramp.default.lineHeight.plus5",
790+
"typography.ramp.plus5.fontVariations": "typography.ramp.default.fontVariations.plus5",
791+
"typography.ramp.plus6.fontSize": "typography.ramp.default.fontSize.plus6",
792+
"typography.ramp.plus6.lineHeight": "typography.ramp.default.lineHeight.plus6",
793+
"typography.ramp.plus6.fontVariations": "typography.ramp.default.fontVariations.plus6",
758794
"accent-stroke-readable-on-accent-fill-stealth-rest": "color.accent.stroke.readable.on.accent.fill.stealth.rest",
759795
"accent-stroke-readable-on-accent-fill-stealth-hover": "color.accent.stroke.readable.on.accent.fill.stealth.hover",
760796
"accent-stroke-readable-on-accent-fill-stealth-active": "color.accent.stroke.readable.on.accent.fill.stealth.active",

0 commit comments

Comments
 (0)