Skip to content

Commit d7cafbd

Browse files
zyyvzyyv
authored
feat(preset-typography): compatible with theme colors with alpha placeholder (#4420)
1 parent 73c93fb commit d7cafbd

File tree

5 files changed

+82
-22
lines changed

5 files changed

+82
-22
lines changed

‎packages-presets/preset-typography/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
},
3939
"dependencies": {
4040
"@unocss/core": "workspace:*",
41-
"@unocss/preset-mini": "workspace:*"
41+
"@unocss/preset-mini": "workspace:*",
42+
"@unocss/rule-utils": "workspace:*"
4243
}
4344
}

‎packages-presets/preset-typography/src/index.ts‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { CSSObject, Preset } from '@unocss/core'
22
import type { Theme } from '@unocss/preset-mini'
33
import type { TypographyCompatibilityOptions } from './types/compatibilityOptions'
44
import { definePreset, toEscapedSelector } from '@unocss/core'
5+
import { alphaPlaceholders } from '@unocss/rule-utils'
56
import { getElements, getPreflights } from './preflights'
67

78
/**
@@ -100,28 +101,49 @@ export const presetTypography = definePreset((options?: TypographyOptions): Pres
100101
return
101102

102103
const colorObject = typeof baseColor === 'object' ? baseColor : {}
103-
return {
104-
'--un-prose-body': colorObject[700] ?? baseColor,
105-
'--un-prose-headings': colorObject[900] ?? baseColor,
106-
'--un-prose-links': colorObject[900] ?? baseColor,
107-
'--un-prose-lists': colorObject[400] ?? baseColor,
108-
'--un-prose-hr': colorObject[200] ?? baseColor,
109-
'--un-prose-captions': colorObject[500] ?? baseColor,
110-
'--un-prose-code': colorObject[900] ?? baseColor,
111-
'--un-prose-borders': colorObject[200] ?? baseColor,
112-
'--un-prose-bg-soft': colorObject[100] ?? baseColor,
113-
104+
const TagColorMap = {
105+
'body': 700,
106+
'headings': 900,
107+
'links': 900,
108+
'lists': 400,
109+
'hr': 200,
110+
'captions': 500,
111+
'code': 900,
112+
'borders': 200,
113+
'bg-soft': 100,
114114
// invert colors (dark mode)
115-
'--un-prose-invert-body': colorObject[200] ?? baseColor,
116-
'--un-prose-invert-headings': colorObject[100] ?? baseColor,
117-
'--un-prose-invert-links': colorObject[100] ?? baseColor,
118-
'--un-prose-invert-lists': colorObject[500] ?? baseColor,
119-
'--un-prose-invert-hr': colorObject[700] ?? baseColor,
120-
'--un-prose-invert-captions': colorObject[400] ?? baseColor,
121-
'--un-prose-invert-code': colorObject[100] ?? baseColor,
122-
'--un-prose-invert-borders': colorObject[700] ?? baseColor,
123-
'--un-prose-invert-bg-soft': colorObject[800] ?? baseColor,
115+
'invert-body': 200,
116+
'invert-headings': 100,
117+
'invert-links': 100,
118+
'invert-lists': 500,
119+
'invert-hr': 700,
120+
'invert-captions': 400,
121+
'invert-code': 100,
122+
'invert-borders': 700,
123+
'invert-bg-soft': 800,
124+
}
125+
126+
const result: any = {}
127+
128+
for (const key in TagColorMap) {
129+
const value = TagColorMap[key as keyof typeof TagColorMap]
130+
const color = colorObject[value] ?? baseColor
131+
let hasAlpha = false
132+
133+
for (const placeholder of alphaPlaceholders) {
134+
if (color.includes(placeholder)) {
135+
hasAlpha = true
136+
result[`--un-prose-${key}-opacity`] = 1
137+
result[`--un-prose-${key}`] = color.replace(placeholder, `var(--un-prose-${key}-opacity)`)
138+
break
139+
}
140+
}
141+
142+
if (!hasAlpha)
143+
result[`--un-prose-${key}`] = color
124144
}
145+
146+
return result
125147
},
126148
{ layer: 'typography' },
127149
],

‎packages-presets/rule-utils/src/colors.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export interface ParsedColorValue {
3838

3939
/* eslint-disable no-case-declarations */
4040
const cssColorFunctions = ['hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'rgb', 'rgba']
41-
const alphaPlaceholders = ['%alpha', '<alpha-value>']
41+
export const alphaPlaceholders = ['%alpha', '<alpha-value>']
4242
const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map(v => escapeRegExp(v)).join('|'))
4343

4444
export function hex2rgba(hex = ''): RGBAColorValue | undefined {

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/preset-typography.test.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,3 +202,37 @@ describe('typography elements modify', () => {
202202
`)
203203
})
204204
})
205+
206+
describe('typography with custom theme colors', () => {
207+
it('with alpha', async () => {
208+
const uno = await createGenerator({
209+
presets: [
210+
presetTypography(),
211+
],
212+
theme: {
213+
colors: {
214+
myColor: {
215+
50: 'oklch(0.95 0.018 0 / <alpha-value>)',
216+
100: 'oklch(0.93 0.05 0 / <alpha-value>)',
217+
200: 'oklch(0.88 0.09 0 / <alpha-value>)',
218+
300: 'oklch(0.82 0.14 0 / <alpha-value>)',
219+
400: 'oklch(0.73 0.195 0 / <alpha-value>)',
220+
500: 'oklch(0.64 0.24 0 / <alpha-value>)',
221+
600: 'oklch(0.56 0.235 0 / <alpha-value>)',
222+
700: 'oklch(0.49 0.22 0)', // prose-body will be no alpha.
223+
800: 'oklch(0.41 0.185 0 / <alpha-value>)',
224+
900: 'oklch(0.36 0.15 0 / <alpha-value>)',
225+
950: 'oklch(0.26 0.11 0 / <alpha-value>)',
226+
},
227+
},
228+
},
229+
})
230+
231+
const { css } = await uno.generate('prose-myColor', { preflights: false })
232+
233+
expect(css).toMatchInlineSnapshot(`
234+
"/* layer: typography */
235+
.prose-myColor{--un-prose-body:oklch(0.49 0.22 0);--un-prose-headings-opacity:1;--un-prose-headings:oklch(0.36 0.15 0 / var(--un-prose-headings-opacity));--un-prose-links-opacity:1;--un-prose-links:oklch(0.36 0.15 0 / var(--un-prose-links-opacity));--un-prose-lists-opacity:1;--un-prose-lists:oklch(0.73 0.195 0 / var(--un-prose-lists-opacity));--un-prose-hr-opacity:1;--un-prose-hr:oklch(0.88 0.09 0 / var(--un-prose-hr-opacity));--un-prose-captions-opacity:1;--un-prose-captions:oklch(0.64 0.24 0 / var(--un-prose-captions-opacity));--un-prose-code-opacity:1;--un-prose-code:oklch(0.36 0.15 0 / var(--un-prose-code-opacity));--un-prose-borders-opacity:1;--un-prose-borders:oklch(0.88 0.09 0 / var(--un-prose-borders-opacity));--un-prose-bg-soft-opacity:1;--un-prose-bg-soft:oklch(0.93 0.05 0 / var(--un-prose-bg-soft-opacity));--un-prose-invert-body-opacity:1;--un-prose-invert-body:oklch(0.88 0.09 0 / var(--un-prose-invert-body-opacity));--un-prose-invert-headings-opacity:1;--un-prose-invert-headings:oklch(0.93 0.05 0 / var(--un-prose-invert-headings-opacity));--un-prose-invert-links-opacity:1;--un-prose-invert-links:oklch(0.93 0.05 0 / var(--un-prose-invert-links-opacity));--un-prose-invert-lists-opacity:1;--un-prose-invert-lists:oklch(0.64 0.24 0 / var(--un-prose-invert-lists-opacity));--un-prose-invert-hr:oklch(0.49 0.22 0);--un-prose-invert-captions-opacity:1;--un-prose-invert-captions:oklch(0.73 0.195 0 / var(--un-prose-invert-captions-opacity));--un-prose-invert-code-opacity:1;--un-prose-invert-code:oklch(0.93 0.05 0 / var(--un-prose-invert-code-opacity));--un-prose-invert-borders:oklch(0.49 0.22 0);--un-prose-invert-bg-soft-opacity:1;--un-prose-invert-bg-soft:oklch(0.41 0.185 0 / var(--un-prose-invert-bg-soft-opacity));}"
236+
`)
237+
})
238+
})

0 commit comments

Comments
 (0)