Skip to content

Commit 2aea6e9

Browse files
adamwathanadamwathan
authored
Rename --font-family-* variables to --font-* (#14885)
This PR renames the `--font-family-*` theme variables to `--font-*` to more closely match the utility names and be a bit more terse in general. ```diff @theme { - --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } ``` This is part of a bigger set of changes where we're renaming other theme variables as well with the same goals, since many existing theme variables like `--shadow-*` and `--radius-*` are already not using the explicit CSS property name. --------- Co-authored-by: Adam Wathan <[email protected]>
1 parent c5b6df2 commit 2aea6e9

File tree

9 files changed

+93
-71
lines changed

9 files changed

+93
-71
lines changed

‎integrations/upgrade/js-config.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,8 +247,8 @@ test(
247247
--width-full-minus-96: calc(100% - 24rem);
248248
--width-225px: 225px;
249249
250-
--font-family-sans: Inter, system-ui, sans-serif;
251-
--font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
250+
--font-sans: Inter, system-ui, sans-serif;
251+
--font-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
252252
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
253253
254254
--radius-4xl: 2rem;

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
55
:root {
66
--default-transition-duration: .15s;
77
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
8-
--default-font-family: var(--font-family-sans);
9-
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
10-
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
11-
--default-mono-font-family: var(--font-family-mono);
12-
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
13-
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
8+
--default-font-family: var(--font-sans);
9+
--default-font-feature-settings: var(--font-sans--font-feature-settings);
10+
--default-font-variation-settings: var(--font-sans--font-variation-settings);
11+
--default-mono-font-family: var(--font-mono);
12+
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
13+
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
1414
--breakpoint-sm: 40rem;
1515
--breakpoint-md: 48rem;
1616
--breakpoint-lg: 64rem;
@@ -311,9 +311,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
311311
--width-6xl: 72rem;
312312
--width-7xl: 80rem;
313313
--width-prose: 65ch;
314-
--font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
315-
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
316-
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
314+
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
315+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
316+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
317317
--font-size-xs: .75rem;
318318
--font-size-xs--line-height: 1rem;
319319
--font-size-sm: .875rem;

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
44
":root {
55
--default-transition-duration: .15s;
66
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
7-
--default-font-family: var(--font-family-sans);
8-
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
9-
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
10-
--default-mono-font-family: var(--font-family-mono);
11-
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
12-
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
7+
--default-font-family: var(--font-sans);
8+
--default-font-feature-settings: var(--font-sans--font-feature-settings);
9+
--default-font-variation-settings: var(--font-sans--font-variation-settings);
10+
--default-mono-font-family: var(--font-mono);
11+
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
12+
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
1313
--breakpoint-sm: 40rem;
1414
--breakpoint-md: 48rem;
1515
--breakpoint-lg: 64rem;
@@ -310,9 +310,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
310310
--width-6xl: 72rem;
311311
--width-7xl: 80rem;
312312
--width-prose: 65ch;
313-
--font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
314-
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
315-
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
313+
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
314+
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
315+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
316316
--font-size-xs: .75rem;
317317
--font-size-xs--line-height: 1rem;
318318
--font-size-sm: .875rem;

‎packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ test('config values can be merged into the theme', () => {
6969
expect(theme.resolve('sm', ['--radius'])).toEqual('0.33rem')
7070
expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite')
7171
expect(theme.resolve('red-500', ['--color'])).toEqual('red')
72-
expect(theme.resolve('sans', ['--font-family'])).toEqual('Inter, system-ui, sans-serif')
73-
expect(theme.resolveWith('mono', ['--font-family'], ['--font-variation-settings'])).toEqual([
72+
expect(theme.resolve('sans', ['--font'])).toEqual('Inter, system-ui, sans-serif')
73+
expect(theme.resolveWith('mono', ['--font'], ['--font-variation-settings'])).toEqual([
7474
'Potato Mono',
7575
{ '--font-variation-settings': '"XHGT" 0.7' },
7676
])

‎packages/tailwindcss/src/compat/apply-config-to-theme.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function applyConfigToTheme(
5959
// Replace `--default-font-*` with `fontFamily.sans` values
6060
{
6161
let fontFamily = resolveThemeValue(theme.fontFamily.sans)
62-
if (fontFamily && designSystem.theme.hasDefault('--font-family-sans')) {
62+
if (fontFamily && designSystem.theme.hasDefault('--font-sans')) {
6363
designSystem.theme.add('--default-font-family', fontFamily, options)
6464
designSystem.theme.add(
6565
'--default-font-feature-settings',
@@ -77,7 +77,7 @@ export function applyConfigToTheme(
7777
// Replace `--default-mono-font-*` with `fontFamily.mono` values
7878
{
7979
let fontFamily = resolveThemeValue(theme.fontFamily.mono)
80-
if (fontFamily && designSystem.theme.hasDefault('--font-family-mono')) {
80+
if (fontFamily && designSystem.theme.hasDefault('--font-mono')) {
8181
designSystem.theme.add('--default-mono-font-family', fontFamily, options)
8282
designSystem.theme.add(
8383
'--default-mono-font-feature-settings',
@@ -133,6 +133,7 @@ export function keyPathToCssProperty(path: string[]) {
133133
if (path[0] === 'borderRadius') path[0] = 'radius'
134134
if (path[0] === 'boxShadow') path[0] = 'shadow'
135135
if (path[0] === 'animation') path[0] = 'animate'
136+
if (path[0] === 'fontFamily') path[0] = 'font'
136137

137138
for (let part of path) {
138139
if (!IS_VALID_KEY.test(part)) return null

‎packages/tailwindcss/src/compat/config.test.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -716,7 +716,7 @@ describe('default font family compatibility', () => {
716716
}
717717
@config "./config.js";
718718
@theme {
719-
--font-family-sans: Sandwich Sans;
719+
--font-sans: Sandwich Sans;
720720
}
721721
@tailwind utilities;
722722
`
@@ -739,10 +739,10 @@ describe('default font family compatibility', () => {
739739
--default-font-family: var(--font-family-sans);
740740
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
741741
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
742-
--font-family-sans: Sandwich Sans;
742+
--font-sans: Sandwich Sans;
743743
}
744744
.font-sans {
745-
font-family: var(--font-family-sans);
745+
font-family: var(--font-sans);
746746
}
747747
"
748748
`)
@@ -945,9 +945,9 @@ describe('default font family compatibility', () => {
945945
}) => {
946946
let input = css`
947947
@theme default {
948-
--default-mono-font-family: var(--font-family-mono);
949-
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
950-
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
948+
--default-mono-font-family: var(--font-mono);
949+
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
950+
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
951951
}
952952
@config "./config.js";
953953
@tailwind utilities;
@@ -989,13 +989,13 @@ describe('default font family compatibility', () => {
989989
}) => {
990990
let input = css`
991991
@theme default {
992-
--default-mono-font-family: var(--font-family-mono);
993-
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
994-
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
992+
--default-mono-font-family: var(--font-mono);
993+
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
994+
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
995995
}
996996
@config "./config.js";
997997
@theme {
998-
--font-family-mono: Sandwich Mono;
998+
--font-mono: Sandwich Mono;
999999
}
10001000
@tailwind utilities;
10011001
`
@@ -1015,13 +1015,13 @@ describe('default font family compatibility', () => {
10151015

10161016
expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
10171017
":root {
1018-
--default-mono-font-family: var(--font-family-mono);
1019-
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
1020-
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
1021-
--font-family-mono: Sandwich Mono;
1018+
--default-mono-font-family: var(--font-mono);
1019+
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
1020+
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
1021+
--font-mono: Sandwich Mono;
10221022
}
10231023
.font-mono {
1024-
font-family: var(--font-family-mono);
1024+
font-family: var(--font-mono);
10251025
}
10261026
"
10271027
`)

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12305,8 +12305,9 @@ test('font', async () => {
1230512305
await compileCss(
1230612306
css`
1230712307
@theme {
12308-
--font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
12309-
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
12308+
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
12309+
'Segoe UI Symbol', 'Noto Color Emoji';
12310+
--font-weight-bold: 650;
1231012311
}
1231112312
@tailwind utilities;
1231212313
`,
@@ -12327,7 +12328,8 @@ test('font', async () => {
1232712328
),
1232812329
).toMatchInlineSnapshot(`
1232912330
":root {
12330-
--font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
12331+
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
12332+
--font-weight-bold: 650;
1233112333
}
1233212334
1233312335
.font-\\[\\"arial_rounded\\"\\] {
@@ -12343,7 +12345,7 @@ test('font', async () => {
1234312345
}
1234412346
1234512347
.font-sans {
12346-
font-family: var(--font-family-sans);
12348+
font-family: var(--font-sans);
1234712349
}
1234812350
1234912351
.font-\\[100\\] {
@@ -12361,6 +12363,11 @@ test('font', async () => {
1236112363
font-weight: var(--my-family);
1236212364
}
1236312365
12366+
.font-bold {
12367+
--tw-font-weight: var(--font-weight-bold);
12368+
font-weight: var(--font-weight-bold);
12369+
}
12370+
1236412371
@supports (-moz-orient: inline) {
1236512372
@layer base {
1236612373
*, :before, :after, ::backdrop {
@@ -12375,24 +12382,37 @@ test('font', async () => {
1237512382
}"
1237612383
`)
1237712384
expect(
12378-
await run([
12379-
'font',
12380-
// font-family
12381-
'-font-sans',
12382-
12383-
// font-weight
12384-
'-font-bold',
12385-
12386-
'font-sans/foo',
12387-
'font-["arial_rounded"]/foo',
12388-
'font-[ui-sans-serif]/foo',
12389-
'font-[var(--my-family)]/foo',
12390-
'font-[family-name:var(--my-family)]/foo',
12391-
'font-[generic-name:var(--my-family)]/foo',
12392-
'font-bold/foo',
12393-
'font-[100]/foo',
12394-
'font-[number:var(--my-weight)]/foo',
12395-
]),
12385+
await compileCss(
12386+
css`
12387+
@theme reference {
12388+
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
12389+
'Segoe UI Symbol', 'Noto Color Emoji';
12390+
--font-size-xl: 24px;
12391+
--font-weight-bold: 650;
12392+
}
12393+
@tailwind utilities;
12394+
`,
12395+
[
12396+
'font',
12397+
// font-family
12398+
'-font-sans',
12399+
12400+
// font-weight
12401+
'-font-bold',
12402+
12403+
'font-size-xl',
12404+
'font-weight-bold',
12405+
'font-sans/foo',
12406+
'font-["arial_rounded"]/foo',
12407+
'font-[ui-sans-serif]/foo',
12408+
'font-[var(--my-family)]/foo',
12409+
'font-[family-name:var(--my-family)]/foo',
12410+
'font-[generic-name:var(--my-family)]/foo',
12411+
'font-bold/foo',
12412+
'font-[100]/foo',
12413+
'font-[number:var(--my-weight)]/foo',
12414+
],
12415+
),
1239612416
).toEqual('')
1239712417
})
1239812418

‎packages/tailwindcss/src/utilities.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2778,8 +2778,9 @@ export function createUtilities(theme: Theme) {
27782778
{
27792779
let value = theme.resolveWith(
27802780
candidate.value.value,
2781-
['--font-family'],
2781+
['--font'],
27822782
['--font-feature-settings', '--font-variation-settings'],
2783+
['--font-weight', '--font-size'],
27832784
)
27842785
if (value) {
27852786
let [families, options = {}] = value

‎packages/tailwindcss/theme.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
/* Defaults */
33
--default-transition-duration: 150ms;
44
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
5-
--default-font-family: var(--font-family-sans);
6-
--default-font-feature-settings: var(--font-family-sans--font-feature-settings);
7-
--default-font-variation-settings: var(--font-family-sans--font-variation-settings);
8-
--default-mono-font-family: var(--font-family-mono);
9-
--default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
10-
--default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
5+
--default-font-family: var(--font-sans);
6+
--default-font-feature-settings: var(--font-sans--font-feature-settings);
7+
--default-font-variation-settings: var(--font-sans--font-variation-settings);
8+
--default-mono-font-family: var(--font-mono);
9+
--default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
10+
--default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
1111

1212
/* Breakpoints */
1313
--breakpoint-sm: 40rem;
@@ -352,10 +352,10 @@
352352
--width-prose: 65ch;
353353

354354
/* Fonts */
355-
--font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
355+
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
356356
'Segoe UI Symbol', 'Noto Color Emoji';
357-
--font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
358-
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
357+
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
358+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
359359
'Courier New', monospace;
360360

361361
/* Type scale */

0 commit comments

Comments
 (0)