Compare commits
6 commits
main
...
feat/text-
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7eaa7a1e79 | ||
|
|
e4948ed09b | ||
|
|
afc92049e4 | ||
|
|
66be2a6bb5 | ||
|
|
d573991871 | ||
|
|
939b319acd |
4 changed files with 1320 additions and 7 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -243,7 +243,7 @@ export class Theme {
|
||||||
}
|
}
|
||||||
|
|
||||||
resolveWith(
|
resolveWith(
|
||||||
candidateValue: string,
|
candidateValue: string | null,
|
||||||
themeKeys: ThemeKey[],
|
themeKeys: ThemeKey[],
|
||||||
nestedKeys: `--${string}`[] = [],
|
nestedKeys: `--${string}`[] = [],
|
||||||
): [string, Record<string, string>] | null {
|
): [string, Record<string, string>] | null {
|
||||||
|
|
|
||||||
|
|
@ -24173,6 +24173,7 @@ test('text', async () => {
|
||||||
css`
|
css`
|
||||||
@theme {
|
@theme {
|
||||||
--spacing: 0.25rem;
|
--spacing: 0.25rem;
|
||||||
|
--spacing-superbig: 25rem;
|
||||||
--color-red-500: #ef4444;
|
--color-red-500: #ef4444;
|
||||||
--text-color-blue-500: #3b82f6;
|
--text-color-blue-500: #3b82f6;
|
||||||
--text-sm: 0.875rem;
|
--text-sm: 0.875rem;
|
||||||
|
|
@ -24233,11 +24234,27 @@ test('text', async () => {
|
||||||
'text-[clamp(1rem,2rem,3rem)]',
|
'text-[clamp(1rem,2rem,3rem)]',
|
||||||
'text-[clamp(1rem,var(--size),3rem)]',
|
'text-[clamp(1rem,var(--size),3rem)]',
|
||||||
'text-[clamp(1rem,var(--size),3rem)]/9',
|
'text-[clamp(1rem,var(--size),3rem)]/9',
|
||||||
|
|
||||||
|
// font-size / line-height / letter-spacing / font-weight
|
||||||
|
'text-20',
|
||||||
|
'text-20/6',
|
||||||
|
'text-20/none',
|
||||||
|
'text-20/snug',
|
||||||
|
'text-20/superbig',
|
||||||
|
'text-20/[4px]',
|
||||||
|
|
||||||
|
'text-superbig',
|
||||||
|
'text-superbig/6',
|
||||||
|
'text-superbig/none',
|
||||||
|
'text-superbig/snug',
|
||||||
|
'text-superbig/superbig',
|
||||||
|
'text-superbig/[4px]',
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
":root, :host {
|
":root, :host {
|
||||||
--spacing: .25rem;
|
--spacing: .25rem;
|
||||||
|
--spacing-superbig: 25rem;
|
||||||
--color-red-500: #ef4444;
|
--color-red-500: #ef4444;
|
||||||
--text-color-blue-500: #3b82f6;
|
--text-color-blue-500: #3b82f6;
|
||||||
--text-sm: .875rem;
|
--text-sm: .875rem;
|
||||||
|
|
@ -24245,6 +24262,31 @@ test('text', async () => {
|
||||||
--leading-snug: 1.375;
|
--leading-snug: 1.375;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-20\\/6 {
|
||||||
|
font-size: calc(var(--spacing) * 20);
|
||||||
|
line-height: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-20\\/\\[4px\\] {
|
||||||
|
font-size: calc(var(--spacing) * 20);
|
||||||
|
line-height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-20\\/none {
|
||||||
|
font-size: calc(var(--spacing) * 20);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-20\\/snug {
|
||||||
|
font-size: calc(var(--spacing) * 20);
|
||||||
|
line-height: var(--leading-snug);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-20\\/superbig {
|
||||||
|
font-size: calc(var(--spacing) * 20);
|
||||||
|
line-height: var(--spacing-superbig);
|
||||||
|
}
|
||||||
|
|
||||||
.text-\\[10px\\]\\/none {
|
.text-\\[10px\\]\\/none {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
@ -24300,6 +24342,35 @@ test('text', async () => {
|
||||||
line-height: var(--leading-snug);
|
line-height: var(--leading-snug);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-superbig\\/6 {
|
||||||
|
font-size: var(--spacing-superbig);
|
||||||
|
line-height: calc(var(--spacing) * 6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-superbig\\/\\[4px\\] {
|
||||||
|
font-size: var(--spacing-superbig);
|
||||||
|
line-height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-superbig\\/none {
|
||||||
|
font-size: var(--spacing-superbig);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-superbig\\/snug {
|
||||||
|
font-size: var(--spacing-superbig);
|
||||||
|
line-height: var(--leading-snug);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-superbig\\/superbig {
|
||||||
|
font-size: var(--spacing-superbig);
|
||||||
|
line-height: var(--spacing-superbig);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-20 {
|
||||||
|
font-size: calc(var(--spacing) * 20);
|
||||||
|
}
|
||||||
|
|
||||||
.text-\\[12px\\] {
|
.text-\\[12px\\] {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
@ -24332,6 +24403,10 @@ test('text', async () => {
|
||||||
font-size: xx-large;
|
font-size: xx-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-superbig {
|
||||||
|
font-size: var(--spacing-superbig);
|
||||||
|
}
|
||||||
|
|
||||||
.text-\\[\\#0088cc\\] {
|
.text-\\[\\#0088cc\\] {
|
||||||
color: #08c;
|
color: #08c;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5092,9 +5092,23 @@ export function createUtilities(theme: Theme) {
|
||||||
{
|
{
|
||||||
let value = theme.resolveWith(
|
let value = theme.resolveWith(
|
||||||
candidate.value.value,
|
candidate.value.value,
|
||||||
['--text'],
|
['--text', '--spacing'],
|
||||||
['--line-height', '--letter-spacing', '--font-weight'],
|
['--line-height', '--letter-spacing', '--font-weight'],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// Bare values use the spacing scale
|
||||||
|
if (!value) {
|
||||||
|
let multiplier = theme.resolveWith(
|
||||||
|
null,
|
||||||
|
['--spacing'],
|
||||||
|
['--line-height', '--letter-spacing', '--font-weight'],
|
||||||
|
)
|
||||||
|
if (!multiplier) return
|
||||||
|
if (!isValidSpacingMultiplier(candidate.value.value)) return
|
||||||
|
|
||||||
|
value = [`calc(${multiplier[0]} * ${candidate.value.value})`, multiplier[1]]
|
||||||
|
}
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
let [fontSize, options = {}] = Array.isArray(value) ? value : [value]
|
let [fontSize, options = {}] = Array.isArray(value) ? value : [value]
|
||||||
|
|
||||||
|
|
@ -5102,7 +5116,7 @@ export function createUtilities(theme: Theme) {
|
||||||
let modifier =
|
let modifier =
|
||||||
candidate.modifier.kind === 'arbitrary'
|
candidate.modifier.kind === 'arbitrary'
|
||||||
? candidate.modifier.value
|
? candidate.modifier.value
|
||||||
: theme.resolve(candidate.modifier.value, ['--leading'])
|
: theme.resolve(candidate.modifier.value, ['--leading', '--spacing'])
|
||||||
|
|
||||||
if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
|
if (!modifier && isValidSpacingMultiplier(candidate.modifier.value)) {
|
||||||
let multiplier = theme.resolve(null, ['--spacing'])
|
let multiplier = theme.resolve(null, ['--spacing'])
|
||||||
|
|
@ -5158,10 +5172,10 @@ export function createUtilities(theme: Theme) {
|
||||||
modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
|
modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
values: [],
|
values: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
|
||||||
valueThemeKeys: ['--text'],
|
valueThemeKeys: ['--text', '--spacing'],
|
||||||
modifiers: [],
|
modifiers: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
|
||||||
modifierThemeKeys: ['--leading'],
|
modifierThemeKeys: ['--leading', '--spacing'],
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue