Skip to content

Commit 769f0b4

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
chore: add variable font and emphasized typescales
PiperOrigin-RevId: 910175573
1 parent 259fd71 commit 769f0b4

2 files changed

Lines changed: 181 additions & 20 deletions

File tree

‎labs/gb/styles/tailwind.scss‎

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,50 +70,136 @@
7070
#{'--font-*'}: initial; // Do not use Tailwind's default font utilities.
7171
--font-brand: var(--md-ref-typeface-brand);
7272
--font-plain: var(--md-ref-typeface-plain);
73+
--font-weight-normal: var(--md-ref-typeface-weight-regular);
74+
--font-weight-medium: var(--md-ref-typeface-weight-medium);
75+
--font-weight-bold: var(--md-ref-typeface-weight-bold);
7376
#{'--text-*'}: initial; // Do not use Tailwind's default text utilities.
7477
#{'--tracking-*'}: initial;
7578
#{'--leading-*'}: initial;
7679
// Use the `typescale-<name>-<size>` utility to apply typography tokens.
7780
--typescale-label-sm: var(--md-sys-typescale-label-sm);
7881
--typescale-label-sm-tracking: var(--md-sys-typescale-label-sm-tracking);
82+
--typescale-label-sm-axes: var(--md-sys-typescale-label-sm-axes);
7983
--typescale-label-md: var(--md-sys-typescale-label-md);
8084
--typescale-label-md-tracking: var(--md-sys-typescale-label-md-tracking);
85+
--typescale-label-md-axes: var(--md-sys-typescale-label-md-axes);
8186
--typescale-label-lg: var(--md-sys-typescale-label-lg);
8287
--typescale-label-lg-tracking: var(--md-sys-typescale-label-lg-tracking);
88+
--typescale-label-lg-axes: var(--md-sys-typescale-label-lg-axes);
8389
--typescale-body-sm: var(--md-sys-typescale-body-sm);
8490
--typescale-body-sm-tracking: var(--md-sys-typescale-body-sm-tracking);
91+
--typescale-body-sm-axes: var(--md-sys-typescale-body-sm-axes);
8592
--typescale-body-md: var(--md-sys-typescale-body-md);
8693
--typescale-body-md-tracking: var(--md-sys-typescale-body-md-tracking);
94+
--typescale-body-md-axes: var(--md-sys-typescale-body-md-axes);
8795
--typescale-body-lg: var(--md-sys-typescale-body-lg);
8896
--typescale-body-lg-tracking: var(--md-sys-typescale-body-lg-tracking);
97+
--typescale-body-lg-axes: var(--md-sys-typescale-body-lg-axes);
8998
--typescale-title-sm: var(--md-sys-typescale-title-sm);
9099
--typescale-title-sm-tracking: var(--md-sys-typescale-title-sm-tracking);
100+
--typescale-title-sm-axes: var(--md-sys-typescale-title-sm-axes);
91101
--typescale-title-md: var(--md-sys-typescale-title-md);
92102
--typescale-title-md-tracking: var(--md-sys-typescale-title-md-tracking);
103+
--typescale-title-md-axes: var(--md-sys-typescale-title-md-axes);
93104
--typescale-title-lg: var(--md-sys-typescale-title-lg);
94105
--typescale-title-lg-tracking: var(--md-sys-typescale-title-lg-tracking);
106+
--typescale-title-lg-axes: var(--md-sys-typescale-title-lg-axes);
95107
--typescale-headline-sm: var(--md-sys-typescale-headline-sm);
96108
--typescale-headline-sm-tracking: var(
97109
--md-sys-typescale-headline-sm-tracking
98110
);
111+
--typescale-headline-sm-axes: var(--md-sys-typescale-headline-sm-axes);
99112
--typescale-headline-md: var(--md-sys-typescale-headline-md);
100113
--typescale-headline-md-tracking: var(
101114
--md-sys-typescale-headline-md-tracking
102115
);
116+
--typescale-headline-md-axes: var(--md-sys-typescale-headline-md-axes);
103117
--typescale-headline-lg: var(--md-sys-typescale-headline-lg);
104118
--typescale-headline-lg-tracking: var(
105119
--md-sys-typescale-headline-lg-tracking
106120
);
121+
--typescale-headline-lg-axes: var(--md-sys-typescale-headline-lg-axes);
107122
--typescale-display-sm: var(--md-sys-typescale-display-sm);
108123
--typescale-display-sm-tracking: var(--md-sys-typescale-display-sm-tracking);
124+
--typescale-display-sm-axes: var(--md-sys-typescale-display-sm-axes);
109125
--typescale-display-md: var(--md-sys-typescale-display-md);
110126
--typescale-display-md-tracking: var(--md-sys-typescale-display-md-tracking);
127+
--typescale-display-md-axes: var(--md-sys-typescale-display-md-axes);
111128
--typescale-display-lg: var(--md-sys-typescale-display-lg);
112129
--typescale-display-lg-tracking: var(--md-sys-typescale-display-lg-tracking);
113-
#{'--font-weight-*'}: initial; // Material supports a limited set of font weights.
114-
--font-weight-normal: var(--md-ref-typeface-weight-regular);
115-
--font-weight-medium: var(--md-ref-typeface-weight-medium);
116-
--font-weight-bold: var(--md-ref-typeface-weight-bold);
130+
--typescale-display-lg-axes: var(--md-sys-typescale-display-lg-axes);
131+
--typescale-emphasized-label-sm: var(--md-sys-typescale-emphasized-label-sm);
132+
--typescale-emphasized-label-sm-axes: var(
133+
--md-sys-typescale-emphasized-label-sm-axes
134+
);
135+
--typescale-emphasized-label-md: var(--md-sys-typescale-emphasized-label-md);
136+
--typescale-emphasized-label-md-axes: var(
137+
--md-sys-typescale-emphasized-label-md-axes
138+
);
139+
--typescale-emphasized-label-lg: var(--md-sys-typescale-emphasized-label-lg);
140+
--typescale-emphasized-label-lg-axes: var(
141+
--md-sys-typescale-emphasized-label-lg-axes
142+
);
143+
--typescale-emphasized-body-sm: var(--md-sys-typescale-emphasized-body-sm);
144+
--typescale-emphasized-body-sm-axes: var(
145+
--md-sys-typescale-emphasized-body-sm-axes
146+
);
147+
--typescale-emphasized-body-md: var(--md-sys-typescale-emphasized-body-md);
148+
--typescale-emphasized-body-md-axes: var(
149+
--md-sys-typescale-emphasized-body-md-axes
150+
);
151+
--typescale-emphasized-body-lg: var(--md-sys-typescale-emphasized-body-lg);
152+
--typescale-emphasized-body-lg-axes: var(
153+
--md-sys-typescale-emphasized-body-lg-axes
154+
);
155+
--typescale-emphasized-title-sm: var(--md-sys-typescale-emphasized-title-sm);
156+
--typescale-emphasized-title-sm-axes: var(
157+
--md-sys-typescale-emphasized-title-sm-axes
158+
);
159+
--typescale-emphasized-title-md: var(--md-sys-typescale-emphasized-title-md);
160+
--typescale-emphasized-title-md-axes: var(
161+
--md-sys-typescale-emphasized-title-md-axes
162+
);
163+
--typescale-emphasized-title-lg: var(--md-sys-typescale-emphasized-title-lg);
164+
--typescale-emphasized-title-lg-axes: var(
165+
--md-sys-typescale-emphasized-title-lg-axes
166+
);
167+
--typescale-emphasized-headline-sm: var(
168+
--md-sys-typescale-emphasized-headline-sm
169+
);
170+
--typescale-emphasized-headline-sm-axes: var(
171+
--md-sys-typescale-emphasized-headline-sm-axes
172+
);
173+
--typescale-emphasized-headline-md: var(
174+
--md-sys-typescale-emphasized-headline-md
175+
);
176+
--typescale-emphasized-headline-md-axes: var(
177+
--md-sys-typescale-emphasized-headline-md-axes
178+
);
179+
--typescale-emphasized-headline-lg: var(
180+
--md-sys-typescale-emphasized-headline-lg
181+
);
182+
--typescale-emphasized-headline-lg-axes: var(
183+
--md-sys-typescale-emphasized-headline-lg-axes
184+
);
185+
--typescale-emphasized-display-sm: var(
186+
--md-sys-typescale-emphasized-display-sm
187+
);
188+
--typescale-emphasized-display-sm-axes: var(
189+
--md-sys-typescale-emphasized-display-sm-axes
190+
);
191+
--typescale-emphasized-display-md: var(
192+
--md-sys-typescale-emphasized-display-md
193+
);
194+
--typescale-emphasized-display-md-axes: var(
195+
--md-sys-typescale-emphasized-display-md-axes
196+
);
197+
--typescale-emphasized-display-lg: var(
198+
--md-sys-typescale-emphasized-display-lg
199+
);
200+
--typescale-emphasized-display-lg-axes: var(
201+
--md-sys-typescale-emphasized-display-lg-axes
202+
);
117203

118204
// Shape
119205
--radius-xs: var(--md-sys-shape-corner-xs);
@@ -149,4 +235,10 @@
149235
@utility typescale-* {
150236
font: #{'--value(--typescale-*)'};
151237
letter-spacing: #{'--value(--typescale-*-tracking)'};
238+
font-variation-settings: #{'--value(--typescale-*-axes)'};
239+
}
240+
@utility typescale-emphasized-* {
241+
font: #{'--value(--typescale-emphasized-*)'};
242+
letter-spacing: #{'--value(--typescale-*-tracking)'};
243+
font-variation-settings: #{'--value(--typescale-emphasized-*-axes)'};
152244
}

‎labs/gb/styles/typography/internal/_typography-tokens.scss‎

Lines changed: 85 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,24 @@
44
//
55

66
// go/keep-sorted start by_regex='(.+) prefix_order=sass:
7+
@use 'sass:list';
78
@use 'sass:map';
89
@use 'sass:meta';
10+
@use 'sass:string';
911
@use '../../../../../sass/ext/map_ext';
1012
@use '../../../../../tokens/versions/latest/sass/md-ref-typeface';
1113
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale';
14+
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-emphasized';
15+
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-emphasized-meta';
1216
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-meta';
1317
// go/keep-sorted end
1418

1519
@mixin emit-custom-properties(
1620
$typescale-vars: meta.module-variables(md-sys-typescale),
1721
$typescale-meta: meta.module-variables(md-sys-typescale-meta),
22+
$typescale-emphasized-vars: meta.module-variables(md-sys-typescale-emphasized),
23+
$typescale-emphasized-meta:
24+
meta.module-variables(md-sys-typescale-emphasized-meta),
1825
$typeface-vars:
1926
map.merge(
2027
meta.module-variables(md-ref-typeface),
@@ -55,26 +62,88 @@
5562
@each $scale in $scales {
5663
@each $long-size, $short-size in $sizes {
5764
$typescale: '#{$scale}-#{$long-size}';
58-
$weight: map_ext.get-strict(
59-
$typescale-meta,
60-
'#{$typescale}-weight--resolved'
61-
);
62-
$size: map_ext.get-strict($typescale-vars, '#{$typescale}-size');
63-
$line-height: map_ext.get-strict(
64-
$typescale-vars,
65-
'#{$typescale}-line-height'
65+
66+
$font: _font($typescale, $typescale-vars, $typescale-meta);
67+
$tracking: map_ext.get-strict($typescale-vars, '#{$typescale}-tracking');
68+
$axes: _axes($typescale, $typescale-vars);
69+
$emphasized-font: _font(
70+
$typescale,
71+
$typescale-emphasized-vars,
72+
$typescale-emphasized-meta
6673
);
67-
$font: map_ext.get-strict(
68-
$typescale-meta,
69-
'#{$typescale}-font--resolved'
74+
$emphasized-axes: _axes-emphasized(
75+
$typescale,
76+
$typescale-emphasized-vars
7077
);
71-
$tracking: map_ext.get-strict($typescale-vars, '#{$typescale}-tracking');
7278

73-
--md-sys-typescale-#{$scale}-#{$short-size}: #{$weight}
74-
#{$size} /
75-
#{$line-height}
76-
#{$font};
79+
--md-sys-typescale-#{$scale}-#{$short-size}: #{$font};
7780
--md-sys-typescale-#{$scale}-#{$short-size}-tracking: #{$tracking};
81+
--md-sys-typescale-#{$scale}-#{$short-size}-axes: #{$axes};
82+
--md-sys-typescale-emphasized-#{$scale}-#{$short-size}: #{$emphasized-font};
83+
--md-sys-typescale-emphasized-#{$scale}-#{$short-size}-axes: #{$emphasized-axes};
7884
}
7985
}
8086
}
87+
88+
/// Returns the `font` shorthand for a typescale from the provided token and
89+
/// metadata variable maps.
90+
@function _font($typescale, $vars, $meta) {
91+
$weight: map_ext.get-strict($meta, '#{$typescale}-weight--resolved');
92+
$size: map_ext.get-strict($vars, '#{$typescale}-size');
93+
$line-height: map_ext.get-strict($vars, '#{$typescale}-line-height');
94+
$family: map_ext.get-strict($meta, '#{$typescale}-font--resolved');
95+
@return #{$weight} #{$size} / #{$line-height} #{$family};
96+
}
97+
98+
/// Returns the `font-variation-settings` value for a typescale from the
99+
/// provided token variable map. Returns `normal` if no axes are changed from
100+
/// their default values.
101+
@function _axes($typescale, $vars) {
102+
$axes: ();
103+
$axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-rond'));
104+
$axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-grad'));
105+
@if list.length($axes) == 0 {
106+
@return normal;
107+
}
108+
@return $axes;
109+
}
110+
111+
// TODO: Remove this function once emphasized tokens are fixed to use `'ROND' 100`
112+
@function _axes-emphasized($typescale, $vars) {
113+
$axes: ();
114+
$axes: _append-axis($axes, ('ROND' 100));
115+
$axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-grad'));
116+
@return $axes;
117+
}
118+
119+
/// Appends a font axis to a list if it is not the default value for the axis.
120+
@function _append-axis($axes, $axis) {
121+
// Not all axes from Carbon are supported in gBreeze.
122+
// - 'opsz': use `font-size`
123+
// - 'slnt': use `font-style`
124+
// - 'wdth': use `font-stretch`/`font-width`
125+
// - 'wght': use `font-weight`
126+
$default-axes: (
127+
'ROND': 0,
128+
'GRAD': 0,
129+
// These axes are unused in Material, but included for Carbon completeness.
130+
'CRSV': 0,
131+
'FILL': 0,
132+
'HEXP': 0,
133+
);
134+
$axis-tag: list.nth($axis, 1);
135+
$axis-value: list.nth($axis, 2);
136+
@if not map.has-key($default-axes, $axis-tag) {
137+
// Do not append unsupported axes.
138+
@return $axes;
139+
}
140+
@if map.get($default-axes, $axis-tag) == $axis-value {
141+
// Do not append axes with default values.
142+
@return $axes;
143+
}
144+
145+
// Manually add quotes since Sass removes them for custom property values,
146+
// even with string.quote().
147+
$axis: '"#{$axis-tag}" #{$axis-value}';
148+
@return list.append($axes, $axis, $separator: comma);
149+
}

0 commit comments

Comments
 (0)