Skip to content

Commit f8e21d7

Browse files
1aron1aron
committed
Add: font:<size> Variables 3xs to 10xl 
1 parent 1998301 commit f8e21d7

File tree

6 files changed

+102
-9
lines changed

6 files changed

+102
-9
lines changed

‎internal‎

‎packages/core/src/config/variables.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,24 @@ const variables = {
2727
'extrabold': 800,
2828
'heavy': 900
2929
},
30+
"font-size": {
31+
"3xs": 8,
32+
"2xs": 10,
33+
"xs": 12,
34+
"sm": 14,
35+
"md": 16,
36+
"lg": 18,
37+
"xl": 20,
38+
"2xl": 24,
39+
"3xl": 32,
40+
"4xl": 36,
41+
"5xl": 40,
42+
"6xl": 48,
43+
"7xl": 60,
44+
"8xl": 72,
45+
"9xl": 96,
46+
"10xl": 128
47+
},
3048
'order': {
3149
'first': -999999,
3250
'last': 999999

‎packages/core/tests/config/variables/font.test.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,37 @@ it.concurrent('should be able to access related font variables using inherited r
2727
'-extrabold',
2828
'heavy',
2929
'-heavy',
30+
'3xs',
31+
'-3xs',
32+
'2xs',
33+
'-2xs',
34+
'xs',
35+
'-xs',
36+
'sm',
37+
'-sm',
38+
'md',
39+
'-md',
40+
'lg',
41+
'-lg',
42+
'xl',
43+
'-xl',
44+
'2xl',
45+
'-2xl',
46+
'3xl',
47+
'-3xl',
48+
'4xl',
49+
'-4xl',
50+
'5xl',
51+
'-5xl',
52+
'6xl',
53+
'-6xl',
54+
'7xl',
55+
'-7xl',
56+
'8xl',
57+
'-8xl',
58+
'9xl',
59+
'-9xl',
60+
'10xl',
61+
'-10xl',
3062
])
3163
})

‎site/app/[locale]/reference/font-size/components/Overview.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@ import SyntaxTr from 'internal/components/SyntaxTr'
44

55
export default () => {
66
return (
7-
<>
8-
<SyntaxTable>
9-
{syntaxes.map((syntax) =>
10-
<SyntaxTr value={syntax} key={syntax}></SyntaxTr>)
11-
}
12-
</SyntaxTable>
13-
</>
7+
<SyntaxTable>
8+
{syntaxes.map((syntax) =>
9+
<SyntaxTr value={syntax} key={syntax}></SyntaxTr>)
10+
}
11+
</SyntaxTable>
1412
)
1513
}

‎site/app/[locale]/reference/font-size/content.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,35 @@
11
## Overview [sr-only]
22
<Overview/>
33

4+
<Demo $py={0}>
5+
<DemoPanel className="flex flex-col gap:8x w:full">
6+
<div className="w:full">
7+
<DemoLabel>font:xs</DemoLabel>
8+
<DemoP className="font:xs">Sphinx of black quartz, judge my vow.</DemoP>
9+
</div>
10+
<div className="w:full">
11+
<DemoLabel>font:sm</DemoLabel>
12+
<DemoP className="font:sm">Sphinx of black quartz, judge my vow.</DemoP>
13+
</div>
14+
<div className="w:full">
15+
<DemoLabel>font:md</DemoLabel>
16+
<DemoP className="font:md">Sphinx of black quartz, judge my vow.</DemoP>
17+
</div>
18+
<div className="w:full">
19+
<DemoLabel>font:lg</DemoLabel>
20+
<DemoP className="font:lg">Sphinx of black quartz, judge my vow.</DemoP>
21+
</div>
22+
<div className="w:full">
23+
<DemoLabel>font:xl</DemoLabel>
24+
<DemoP className="font:xl">Sphinx of black quartz, judge my vow.</DemoP>
25+
</div>
26+
<div className="w:full">
27+
<DemoLabel>font:2xl</DemoLabel>
28+
<DemoP className="font:2xl">Sphinx of black quartz, judge my vow.</DemoP>
29+
</div>
30+
</DemoPanel>
31+
</Demo>
32+
433
## Conditionally apply
534
Apply styles based on different states using [selectors](/guide/state-selectors) and [applying conditionally](/guide/applying-conditionally).
635
```html

‎site/app/[locale]/reference/font-size/syntaxes.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
const syntaxes = [
2-
['font-size:`size`']
2+
['font-size:`size`'],
3+
'font:3xs',
4+
'font:2xs',
5+
'font:xs',
6+
'font:sm',
7+
'font:md',
8+
'font:lg',
9+
'font:xl',
10+
'font:2xl',
11+
'font:3xl',
12+
'font:4xl',
13+
'font:5xl',
14+
'font:6xl',
15+
'font:7xl',
16+
'font:8xl',
17+
'font:9xl',
18+
'font:10xl',
319
]
420

521
export default syntaxes

0 commit comments

Comments
 (0)