mirror of
https://github.com/versia-pub/docs.git
synced 2026-03-13 02:49:16 +01:00
chore: ⬆️ Upgrade to Tailwind v4
This commit is contained in:
Jesse Wierzbinski
parent
e363639803
commit
737969835d
24 changed files with 741 additions and 402 deletions
218
typography.ts
218
typography.ts
|
|
@ -1,67 +1,69 @@
|
|||
import type { PluginUtils } from "tailwindcss/types/config";
|
||||
|
||||
export default function typographyStyles({ theme }: PluginUtils) {
|
||||
export default function typographyStyles() {
|
||||
return {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
"--tw-prose-body": theme("colors.zinc.700"),
|
||||
"--tw-prose-headings": theme("colors.zinc.900"),
|
||||
"--tw-prose-links": theme("colors.brand.500"),
|
||||
"--tw-prose-links-hover": theme("colors.brand.600"),
|
||||
"--tw-prose-links-underline": theme("colors.brand.500 / 0.3"),
|
||||
"--tw-prose-bold": theme("colors.zinc.900"),
|
||||
"--tw-prose-counters": theme("colors.zinc.500"),
|
||||
"--tw-prose-bullets": theme("colors.zinc.300"),
|
||||
"--tw-prose-hr": theme("colors.zinc.900 / 0.05"),
|
||||
"--tw-prose-quotes": theme("colors.zinc.900"),
|
||||
"--tw-prose-quote-borders": theme("colors.zinc.200"),
|
||||
"--tw-prose-captions": theme("colors.zinc.500"),
|
||||
"--tw-prose-code": theme("colors.zinc.900"),
|
||||
"--tw-prose-code-bg": theme("colors.zinc.100"),
|
||||
"--tw-prose-code-ring": theme("colors.zinc.300"),
|
||||
"--tw-prose-th-borders": theme("colors.zinc.300"),
|
||||
"--tw-prose-td-borders": theme("colors.zinc.200"),
|
||||
"--tw-prose-body": "var(--color-zinc-700)",
|
||||
"--tw-prose-headings": "var(--color-zinc-900)",
|
||||
"--tw-prose-links": "var(--color-brand-500)",
|
||||
"--tw-prose-links-hover": "var(--color-brand-600)",
|
||||
"--tw-prose-links-underline":
|
||||
"color-mix(in oklab, var(--color-brand-500) 30%, transparent)",
|
||||
"--tw-prose-bold": "var(--color-zinc-900)",
|
||||
"--tw-prose-counters": "var(--color-zinc-500)",
|
||||
"--tw-prose-bullets": "var(--color-zinc-300)",
|
||||
"--tw-prose-hr":
|
||||
"color-mix(in oklab, var(--color-zinc-900) 5%, transparent)",
|
||||
"--tw-prose-quotes": "var(--color-zinc-900)",
|
||||
"--tw-prose-quote-borders": "var(--color-zinc-200)",
|
||||
"--tw-prose-captions": "var(--color-zinc-500)",
|
||||
"--tw-prose-code": "var(--color-zinc-900)",
|
||||
"--tw-prose-code-bg": "var(--color-zinc-100)",
|
||||
"--tw-prose-code-ring": "var(--color-zinc-300)",
|
||||
"--tw-prose-th-borders": "var(--color-zinc-300)",
|
||||
"--tw-prose-td-borders": "var(--color-zinc-200)",
|
||||
|
||||
"--tw-prose-invert-body": theme("colors.zinc.400"),
|
||||
"--tw-prose-invert-headings": theme("colors.white"),
|
||||
"--tw-prose-invert-links": theme("colors.brand.400"),
|
||||
"--tw-prose-invert-links-hover": theme("colors.brand.500"),
|
||||
"--tw-prose-invert-links-underline": theme(
|
||||
"colors.brand.500 / 0.3",
|
||||
),
|
||||
"--tw-prose-invert-bold": theme("colors.white"),
|
||||
"--tw-prose-invert-counters": theme("colors.zinc.400"),
|
||||
"--tw-prose-invert-bullets": theme("colors.zinc.600"),
|
||||
"--tw-prose-invert-hr": theme("colors.white / 0.05"),
|
||||
"--tw-prose-invert-quotes": theme("colors.zinc.100"),
|
||||
"--tw-prose-invert-quote-borders": theme("colors.zinc.700"),
|
||||
"--tw-prose-invert-captions": theme("colors.zinc.400"),
|
||||
"--tw-prose-invert-code": theme("colors.white"),
|
||||
"--tw-prose-invert-code-bg": theme("colors.zinc.700 / 0.15"),
|
||||
"--tw-prose-invert-code-ring": theme("colors.white / 0.1"),
|
||||
"--tw-prose-invert-th-borders": theme("colors.zinc.600"),
|
||||
"--tw-prose-invert-td-borders": theme("colors.zinc.700"),
|
||||
"--tw-prose-invert-body": "var(--color-zinc-400)",
|
||||
"--tw-prose-invert-headings": "var(--color-white)",
|
||||
"--tw-prose-invert-links": "var(--color-brand-400)",
|
||||
"--tw-prose-invert-links-hover": "var(--color-brand-500)",
|
||||
"--tw-prose-invert-links-underline":
|
||||
"color-mix(in oklab, var(--color-brand-500) 30%, transparent)",
|
||||
"--tw-prose-invert-bold": "var(--color-white)",
|
||||
"--tw-prose-invert-counters": "var(--color-zinc-400)",
|
||||
"--tw-prose-invert-bullets": "var(--color-zinc-600)",
|
||||
"--tw-prose-invert-hr":
|
||||
"color-mix(in oklab, var(--color-white) 5%, transparent)",
|
||||
"--tw-prose-invert-quotes": "var(--color-zinc-100)",
|
||||
"--tw-prose-invert-quote-borders": "var(--color-zinc-700)",
|
||||
"--tw-prose-invert-captions": "var(--color-zinc-400)",
|
||||
"--tw-prose-invert-code": "var(--color-white)",
|
||||
"--tw-prose-invert-code-bg":
|
||||
"color-mix(in oklab, var(--color-zinc-700) 15%, transparent)",
|
||||
"--tw-prose-invert-code-ring":
|
||||
"color-mix(in oklab, var(--color-white) 10%, transparent)",
|
||||
"--tw-prose-invert-th-borders": "var(--color-zinc-600)",
|
||||
"--tw-prose-invert-td-borders": "var(--color-zinc-700)",
|
||||
|
||||
// Base
|
||||
color: "var(--tw-prose-body)",
|
||||
fontSize: theme("fontSize.base")[0],
|
||||
lineHeight: theme("lineHeight.8"),
|
||||
fontSize: "var(--text-base)",
|
||||
lineHeight: "--spacing(8)",
|
||||
|
||||
// Text
|
||||
p: {
|
||||
marginTop: theme("spacing.8"),
|
||||
marginBottom: theme("spacing.8"),
|
||||
marginTop: "--spacing(8)",
|
||||
marginBottom: "--spacing(8)",
|
||||
},
|
||||
'[class~="lead"]': {
|
||||
fontSize: theme("fontSize.base")[0],
|
||||
...theme("fontSize.base")[1],
|
||||
fontSize: "var(--text-base)",
|
||||
lineHeight: "var(--text-base--line-height)",
|
||||
},
|
||||
|
||||
// Lists
|
||||
ol: {
|
||||
listStyleType: "decimal",
|
||||
marginTop: theme("spacing.5"),
|
||||
marginBottom: theme("spacing.5"),
|
||||
marginTop: "--spacing(5)",
|
||||
marginBottom: "--spacing(5)",
|
||||
paddingLeft: "1.625rem",
|
||||
},
|
||||
'ol[type="A"]': {
|
||||
|
|
@ -93,16 +95,16 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
},
|
||||
ul: {
|
||||
listStyleType: "disc",
|
||||
marginTop: theme("spacing.5"),
|
||||
marginBottom: theme("spacing.5"),
|
||||
marginTop: "--spacing(5)",
|
||||
marginBottom: "--spacing(5)",
|
||||
paddingLeft: "1.625rem",
|
||||
},
|
||||
li: {
|
||||
marginTop: theme("spacing.2"),
|
||||
marginBottom: theme("spacing.2"),
|
||||
marginTop: "--spacing(2)",
|
||||
marginBottom: "--spacing(2)",
|
||||
},
|
||||
":is(ol, ul) > li": {
|
||||
paddingLeft: theme("spacing[1.5]"),
|
||||
paddingLeft: "--spacing(1.5)",
|
||||
},
|
||||
"ol > li::marker": {
|
||||
fontWeight: "400",
|
||||
|
|
@ -112,42 +114,42 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
color: "var(--tw-prose-bullets)",
|
||||
},
|
||||
"> ul > li p": {
|
||||
marginTop: theme("spacing.3"),
|
||||
marginBottom: theme("spacing.3"),
|
||||
marginTop: "--spacing(3)",
|
||||
marginBottom: "--spacing(3)",
|
||||
},
|
||||
"> ul > li > *:first-child": {
|
||||
marginTop: theme("spacing.5"),
|
||||
marginTop: "--spacing(5)",
|
||||
},
|
||||
"> ul > li > *:last-child": {
|
||||
marginBottom: theme("spacing.5"),
|
||||
marginBottom: "--spacing(5)",
|
||||
},
|
||||
"> ol > li > *:first-child": {
|
||||
marginTop: theme("spacing.5"),
|
||||
marginTop: "--spacing(5)",
|
||||
},
|
||||
"> ol > li > *:last-child": {
|
||||
marginBottom: theme("spacing.5"),
|
||||
marginBottom: "--spacing(5)",
|
||||
},
|
||||
"ul ul, ul ol, ol ul, ol ol": {
|
||||
marginTop: theme("spacing.3"),
|
||||
marginBottom: theme("spacing.3"),
|
||||
marginTop: "--spacing(3)",
|
||||
marginBottom: "--spacing(3)",
|
||||
},
|
||||
|
||||
// Horizontal rules
|
||||
hr: {
|
||||
borderColor: "var(--tw-prose-hr)",
|
||||
borderTopWidth: 1,
|
||||
marginTop: theme("spacing.16"),
|
||||
marginBottom: theme("spacing.16"),
|
||||
marginTop: "--spacing(16)",
|
||||
marginBottom: "--spacing(16)",
|
||||
maxWidth: "none",
|
||||
marginLeft: `calc(-1 * ${theme("spacing.4")})`,
|
||||
marginRight: `calc(-1 * ${theme("spacing.4")})`,
|
||||
marginLeft: "--spacing(-4)",
|
||||
marginRight: "--spacing(-4)",
|
||||
"@screen sm": {
|
||||
marginLeft: `calc(-1 * ${theme("spacing.6")})`,
|
||||
marginRight: `calc(-1 * ${theme("spacing.6")})`,
|
||||
marginLeft: "--spacing(-6)",
|
||||
marginRight: "--spacing(-6)",
|
||||
},
|
||||
"@screen lg": {
|
||||
marginLeft: `calc(-1 * ${theme("spacing.8")})`,
|
||||
marginRight: `calc(-1 * ${theme("spacing.8")})`,
|
||||
marginLeft: "--spacing(-8)",
|
||||
marginRight: "--spacing(-8)",
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -159,9 +161,9 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
borderLeftWidth: "0.25rem",
|
||||
borderLeftColor: "var(--tw-prose-quote-borders)",
|
||||
quotes: '"\\201C""\\201D""\\2018""\\2019"',
|
||||
marginTop: theme("spacing.8"),
|
||||
marginBottom: theme("spacing.8"),
|
||||
paddingLeft: theme("spacing.5"),
|
||||
marginTop: "--spacing(8)",
|
||||
marginBottom: "--spacing(8)",
|
||||
paddingLeft: "--spacing(5)",
|
||||
},
|
||||
"blockquote p:first-of-type::before": {
|
||||
content: "open-quote",
|
||||
|
|
@ -174,31 +176,31 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
h1: {
|
||||
color: "var(--tw-prose-headings)",
|
||||
fontWeight: "700",
|
||||
fontSize: theme("fontSize.4xl")[0],
|
||||
...theme("fontSize.4xl")[1],
|
||||
marginBottom: theme("spacing.6"),
|
||||
fontSize: "var(--text-4xl)",
|
||||
lineHeight: "var(--text-4xl--line-height)",
|
||||
marginBottom: "--spacing(6)",
|
||||
},
|
||||
h2: {
|
||||
color: "var(--tw-prose-headings)",
|
||||
fontWeight: "600",
|
||||
fontSize: theme("fontSize.2xl")[0],
|
||||
...theme("fontSize.2xl")[1],
|
||||
marginTop: theme("spacing.16"),
|
||||
marginBottom: theme("spacing.8"),
|
||||
fontSize: "var(--text-2xl)",
|
||||
lineHeight: "var(--text-2xl--line-height)",
|
||||
marginTop: "--spacing(16)",
|
||||
marginBottom: "--spacing(8)",
|
||||
},
|
||||
h3: {
|
||||
color: "var(--tw-prose-headings)",
|
||||
fontSize: theme("fontSize.lg")[0],
|
||||
...theme("fontSize.lg")[1],
|
||||
fontSize: "var(--text-lg)",
|
||||
lineHeight: "var(--text-lg--line-height)",
|
||||
fontWeight: "600",
|
||||
marginTop: theme("spacing.10"),
|
||||
marginBottom: theme("spacing.2"),
|
||||
marginTop: "--spacing(10)",
|
||||
marginBottom: "--spacing(2)",
|
||||
},
|
||||
|
||||
// Media
|
||||
"img, video, figure": {
|
||||
marginTop: theme("spacing.8"),
|
||||
marginBottom: theme("spacing.8"),
|
||||
marginTop: "--spacing(8)",
|
||||
marginBottom: "--spacing(8)",
|
||||
},
|
||||
"figure > *": {
|
||||
marginTop: "0",
|
||||
|
|
@ -206,9 +208,9 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
},
|
||||
figcaption: {
|
||||
color: "var(--tw-prose-captions)",
|
||||
fontSize: theme("fontSize.sm")[0],
|
||||
...theme("fontSize.sm")[1],
|
||||
marginTop: theme("spacing.2"),
|
||||
fontSize: "var(--text-sm)",
|
||||
lineHeight: "var(--text-sm--line-height)",
|
||||
marginTop: "--spacing(2)",
|
||||
},
|
||||
|
||||
// Tables
|
||||
|
|
@ -216,9 +218,9 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
width: "100%",
|
||||
tableLayout: "auto",
|
||||
textAlign: "left",
|
||||
marginTop: theme("spacing.8"),
|
||||
marginBottom: theme("spacing.8"),
|
||||
lineHeight: theme("lineHeight.6"),
|
||||
marginTop: "--spacing(8)",
|
||||
marginBottom: "--spacing(8)",
|
||||
lineHeight: "--spacing(8)",
|
||||
},
|
||||
thead: {
|
||||
borderBottomWidth: "1px",
|
||||
|
|
@ -228,9 +230,9 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
color: "var(--tw-prose-headings)",
|
||||
fontWeight: "600",
|
||||
verticalAlign: "bottom",
|
||||
paddingRight: theme("spacing.2"),
|
||||
paddingBottom: theme("spacing.2"),
|
||||
paddingLeft: theme("spacing.2"),
|
||||
paddingRight: "--spacing(2)",
|
||||
paddingBottom: "--spacing(2)",
|
||||
paddingLeft: "--spacing(2)",
|
||||
},
|
||||
"thead th:first-child": {
|
||||
paddingLeft: "0",
|
||||
|
|
@ -256,10 +258,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
verticalAlign: "top",
|
||||
},
|
||||
":is(tbody, tfoot) td": {
|
||||
paddingTop: theme("spacing.2"),
|
||||
paddingRight: theme("spacing.2"),
|
||||
paddingBottom: theme("spacing.2"),
|
||||
paddingLeft: theme("spacing.2"),
|
||||
paddingTop: "--spacing(2)",
|
||||
paddingRight: "--spacing(2)",
|
||||
paddingBottom: "--spacing(2)",
|
||||
paddingLeft: "--spacing(2)",
|
||||
},
|
||||
":is(tbody, tfoot) td:first-child": {
|
||||
paddingLeft: "0",
|
||||
|
|
@ -274,10 +276,8 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
textDecoration: "underline transparent",
|
||||
fontWeight: "500",
|
||||
transitionProperty: "color, text-decoration-color",
|
||||
transitionDuration: theme("transitionDuration.DEFAULT"),
|
||||
transitionTimingFunction: theme(
|
||||
"transitionTimingFunction.DEFAULT",
|
||||
),
|
||||
transitionDuration: "0.15s",
|
||||
transitionTimingFunction: "var(--ease-in-out)",
|
||||
"&:hover": {
|
||||
color: "var(--tw-prose-links-hover)",
|
||||
textDecorationColor: "var(--tw-prose-links-underline)",
|
||||
|
|
@ -295,27 +295,27 @@ export default function typographyStyles({ theme }: PluginUtils) {
|
|||
},
|
||||
code: {
|
||||
color: "var(--tw-prose-code)",
|
||||
borderRadius: theme("borderRadius.lg"),
|
||||
paddingTop: theme("padding[1.5]"),
|
||||
paddingRight: theme("padding[1.5]"),
|
||||
paddingBottom: theme("padding.1"),
|
||||
paddingLeft: theme("padding[1.5]"),
|
||||
borderRadius: "var(--radius-lg)",
|
||||
paddingTop: "--spacing(1.5)",
|
||||
paddingRight: "--spacing(1.5)",
|
||||
paddingBottom: "--spacing(1)",
|
||||
paddingLeft: "--spacing(1.5)",
|
||||
boxShadow: "inset 0 0 0 1px var(--tw-prose-code-ring)",
|
||||
backgroundColor: "var(--tw-prose-code-bg)",
|
||||
// If gets too long, split into multiple lines
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
fontSize: theme("fontSize.xs"),
|
||||
fontSize: "var(--text-xs)",
|
||||
},
|
||||
":is(a, h1, h2, h3, blockquote, thead th) code": {
|
||||
color: "inherit",
|
||||
},
|
||||
"h2 code": {
|
||||
fontSize: theme("fontSize.base")[0],
|
||||
fontSize: "var(--text-base)",
|
||||
fontWeight: "inherit",
|
||||
},
|
||||
"h3 code": {
|
||||
fontSize: theme("fontSize.sm")[0],
|
||||
fontSize: "var(--text-sm)",
|
||||
fontWeight: "inherit",
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue