Skip to content

Commit 3cfec25

Browse files
bhestonbheston
authored
Added support for generated type scale token values (#272)
1 parent 172ae7a commit 3cfec25

15 files changed

Lines changed: 630 additions & 50 deletions

File tree

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Added support for generated type scale token values",
4+
"packageName": "@adaptive-web/adaptive-ui",
5+
"email": "47367562+bheston@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,15 @@ import { ControlPane } from "./components/control-pane/index.js";
3939
import { LayerBackground } from "./components/layer-background/index.js";
4040
import { PaletteGradient } from "./components/palette-gradient/palette-gradient.js";
4141
import { SampleApp } from "./sample/index.js";
42+
import { typeRampScale, Typography } from "./typography/index.js";
4243
import { State } from "./state.js";
4344

4445
ColorBlock;
4546
ControlPane;
4647
LayerBackground;
4748
PaletteGradient;
4849
SampleApp;
50+
Typography;
4951

5052
const colorBlockTemplate = html<App>`
5153
${repeat(
@@ -85,6 +87,12 @@ const sampleTemplate = html<App>`
8587
</app-design-system-provider>
8688
`;
8789

90+
const typographyTemplate = html<App>`
91+
<app-design-system-provider>
92+
<app-typography></app-typography>
93+
</app-design-system-provider>
94+
`;
95+
8896
const template = html<App>`
8997
<div class="container fill">
9098
<div class="row fill">
@@ -241,6 +249,18 @@ export class App extends FASTElement {
241249
case "wcagContrastLevel":
242250
wcagContrastLevel.setValueFor(app.canvas, source.wcagContrastLevel);
243251
break;
252+
case "typeScaleBaseSize":
253+
typeRampScale.base.fontSize.setValueFor(app.canvas, `${source.typeScaleBaseSize}px`);
254+
break;
255+
case "typeScaleMultiplier":
256+
typeRampScale.multiplier.setValueFor(app.canvas, source.typeScaleMultiplier);
257+
break;
258+
case "typeScaleLineHeightRatio":
259+
typeRampScale.lineHeightRatio.setValueFor(app.canvas, source.typeScaleLineHeightRatio);
260+
break;
261+
case "typeScaleLineHeightSnap":
262+
typeRampScale.lineHeightSnap.setValueFor(app.canvas, `${source.typeScaleLineHeightSnap}px`);
263+
break;
244264
default:
245265
break;
246266
}
@@ -266,6 +286,8 @@ export class App extends FASTElement {
266286
public componentTypeTemplate(): ViewTemplate<App, any> {
267287
if (this.state.componentType === ComponentType.sample) {
268288
return sampleTemplate;
289+
} else if (this.state.componentType === ComponentType.typography) {
290+
return typographyTemplate;
269291
} else {
270292
return colorBlockTemplate;
271293
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export enum ComponentType {
22
backplate = "backplate",
33
text = "text",
44
form = "form",
5+
typography = "typography",
56
sample = "sample",
67
}

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,5 +90,66 @@ export function controlPaneTemplate<T extends ControlPane>(): ElementViewTemplat
9090
id="showSwatches"
9191
:checked=${twoWay((x) => x.state.showSwatches)}
9292
>Show swatches</adaptive-switch>
93+
94+
<div>
95+
<label>Type scale base size (px)</label>
96+
<input
97+
type="number"
98+
min="8"
99+
max="32"
100+
step="1"
101+
value=${(x) => x.state.typeScaleBaseSize}
102+
@input=${(x, c) =>
103+
x.state.typeScaleBaseSize = parseFloat(c.eventTarget<HTMLInputElement>().value)
104+
}
105+
/>
106+
</div>
107+
108+
<div>
109+
<label>Type scale multiplier</label>
110+
<input
111+
type="number"
112+
min="1.0"
113+
max="2.0"
114+
step="0.01"
115+
value=${(x) => x.state.typeScaleMultiplier}
116+
@input=${(x, c) =>
117+
x.state.typeScaleMultiplier = parseFloat(c.eventTarget<HTMLInputElement>().value)
118+
}
119+
/>
120+
</div>
121+
122+
<div>
123+
<label>Type scale line height ratio</label>
124+
<input
125+
type="number"
126+
min="1.0"
127+
max="2.0"
128+
step="0.01"
129+
value=${(x) => x.state.typeScaleLineHeightRatio}
130+
@input=${(x, c) =>
131+
x.state.typeScaleLineHeightRatio = parseFloat(c.eventTarget<HTMLInputElement>().value)
132+
}
133+
/>
134+
</div>
135+
136+
<div>
137+
<label>Type scale line height snap (px)</label>
138+
<input
139+
type="number"
140+
min="1"
141+
max="10"
142+
step="1"
143+
value=${(x) => x.state.typeScaleLineHeightSnap}
144+
@input=${(x, c) =>
145+
x.state.typeScaleLineHeightSnap = parseFloat(c.eventTarget<HTMLInputElement>().value)
146+
}
147+
/>
148+
</div>
149+
150+
<adaptive-switch
151+
id="multiline"
152+
:checked=${twoWay((x) => x.state.multiline)}
153+
>Multiline typography</adaptive-switch>
93154
`;
94155
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ export interface State {
1414
wcagContrastLevel: WcagContrastLevel;
1515
disabledState: boolean;
1616
showSwatches: boolean;
17+
typeScaleBaseSize: number;
18+
typeScaleMultiplier: number;
19+
typeScaleLineHeightRatio: number;
20+
typeScaleLineHeightSnap: number;
21+
multiline: boolean;
1722
}
1823

1924
const PLACEHOLDER_COLOR = Color.parse("#ff00ff")!;
@@ -42,4 +47,19 @@ export class DefaultState implements State {
4247

4348
@observable
4449
public showSwatches: boolean = false;
50+
51+
@observable
52+
public typeScaleBaseSize: number = 16;
53+
54+
@observable
55+
public typeScaleMultiplier: number = 1.2;
56+
57+
@observable
58+
public typeScaleLineHeightRatio: number = 1.4;
59+
60+
@observable
61+
public typeScaleLineHeightSnap: number = 2;
62+
63+
@observable
64+
public multiline: boolean = false;
4565
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { Typography } from "./typography.js";
2+
export { typeRampScale } from "./type-scale.js";

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { TypeScaleTokenGroup } from "@adaptive-web/adaptive-ui";
2+
3+
export const typeRampScale = new TypeScaleTokenGroup("typography.ramp.scale", "16px", 1.2, 1.4, "2px");

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { css } from "@microsoft/fast-element";
2+
import { bodyFontFamily, colorContext, neutralFillSubtle, neutralStrokeStrong } from "@adaptive-web/adaptive-ui/reference";
3+
import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
4+
import { typeRampScale } from "./type-scale.js";
5+
6+
export const typographyStyles = css`
7+
${componentBaseStyles}
8+
9+
:host {
10+
display: flex;
11+
font-family: ${bodyFontFamily};
12+
color: ${neutralStrokeStrong.rest};
13+
background: ${colorContext};
14+
}
15+
16+
.content {
17+
display: flex;
18+
flex-direction: column;
19+
gap: 16px;
20+
padding: 24px;
21+
}
22+
23+
p {
24+
margin: 0;
25+
display: flex;
26+
flex-direction: column;
27+
gap: 4px;
28+
}
29+
30+
.sample-text {
31+
display: block;
32+
background: ${neutralFillSubtle.rest};
33+
}
34+
35+
.values {
36+
font-size: 14px;
37+
line-height: 16px;
38+
font-family: monospace;
39+
}
40+
41+
p.minus2 {
42+
font-size: ${typeRampScale.minus2.fontSize};
43+
line-height: ${typeRampScale.minus2.lineHeight};
44+
}
45+
46+
p.minus1 {
47+
font-size: ${typeRampScale.minus1.fontSize};
48+
line-height: ${typeRampScale.minus1.lineHeight};
49+
}
50+
51+
p.base {
52+
font-size: ${typeRampScale.base.fontSize};
53+
line-height: ${typeRampScale.base.lineHeight};
54+
}
55+
56+
p.plus1 {
57+
font-size: ${typeRampScale.plus1.fontSize};
58+
line-height: ${typeRampScale.plus1.lineHeight};
59+
}
60+
61+
p.plus2 {
62+
font-size: ${typeRampScale.plus2.fontSize};
63+
line-height: ${typeRampScale.plus2.lineHeight};
64+
}
65+
66+
p.plus3 {
67+
font-size: ${typeRampScale.plus3.fontSize};
68+
line-height: ${typeRampScale.plus3.lineHeight};
69+
}
70+
71+
p.plus4 {
72+
font-size: ${typeRampScale.plus4.fontSize};
73+
line-height: ${typeRampScale.plus4.lineHeight};
74+
}
75+
76+
p.plus5 {
77+
font-size: ${typeRampScale.plus5.fontSize};
78+
line-height: ${typeRampScale.plus5.lineHeight};
79+
}
80+
81+
p.plus6 {
82+
font-size: ${typeRampScale.plus6.fontSize};
83+
line-height: ${typeRampScale.plus6.lineHeight};
84+
}
85+
`;

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { ElementViewTemplate, html } from "@microsoft/fast-element";
2+
import { Typography } from "./typography.js";
3+
4+
const singleLineText = html<Typography>`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
5+
const multiLineText = html<Typography>`Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Sed do eiusmod tempor incididunt ut labore et dolore.`;
6+
7+
export function typographyTemplate<T extends Typography>(): ElementViewTemplate<T> {
8+
return html<T>`
9+
<div class="content">
10+
<p class="minus2">
11+
<span class="values">Minus 2 (font-size: ${x => x.minus2.fontSize}, line-height: ${x => x.minus2.lineHeight})</span>
12+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
13+
</p>
14+
<p class="minus1">
15+
<span class="values">Minus 1 (font-size: ${x => x.minus1.fontSize}, line-height: ${x => x.minus1.lineHeight})</span>
16+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
17+
</p>
18+
<p class="base">
19+
<span class="values">Base (font-size: ${x => x.base.fontSize}, line-height: ${x => x.base.lineHeight})</span>
20+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
21+
</p>
22+
<p class="plus1">
23+
<span class="values">Plus 1 (font-size: ${x => x.plus1.fontSize}, line-height: ${x => x.plus1.lineHeight})</span>
24+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
25+
</p>
26+
<p class="plus2">
27+
<span class="values">Plus 2 (font-size: ${x => x.plus2.fontSize}, line-height: ${x => x.plus2.lineHeight})</span>
28+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
29+
</p>
30+
<p class="plus3">
31+
<span class="values">Plus 3 (font-size: ${x => x.plus3.fontSize}, line-height: ${x => x.plus3.lineHeight})</span>
32+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
33+
</p>
34+
<p class="plus4">
35+
<span class="values">Plus 4 (font-size: ${x => x.plus4.fontSize}, line-height: ${x => x.plus4.lineHeight})</span>
36+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
37+
</p>
38+
<p class="plus5">
39+
<span class="values">Plus 5 (font-size: ${x => x.plus5.fontSize}, line-height: ${x => x.plus5.lineHeight})</span>
40+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
41+
</p>
42+
<p class="plus6">
43+
<span class="values">Plus 6 (font-size: ${x => x.plus6.fontSize}, line-height: ${x => x.plus6.lineHeight})</span>
44+
<span class="sample-text">${x => x.state.multiline ? multiLineText : singleLineText}</span>
45+
</p>
46+
</div>
47+
`;
48+
}

0 commit comments

Comments
 (0)