@pikacss/plugin-typography 0.0.51 → 0.0.54

package/README.md

@@ -30,7 +30,7 @@ Then use in templates:
 
 ## Documentation
 
-See the [full documentation](https://pikacss.com/official-plugins/typography).
+See the [full documentation](https://pikacss.github.io/official-plugins/typography).
 
 ## License
 

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineEnginePlugin, defineStyleDefinition } from "@pikacss/core";
+import { defineEnginePlugin } from "@pikacss/core";
 //#region src/styles.ts
 /**
 * Default CSS custom property values for prose typography colors and accents.
@@ -49,446 +49,293 @@ const typographyVariables = {
 * engine.shortcuts.add(['prose-base', proseBaseStyle])
 * ```
 */
-const proseBaseStyle = defineStyleDefinition({
+const proseBaseStyle = {
 	"color": "var(--pk-prose-color-body)",
 	"maxWidth": "65ch",
 	"fontSize": "1rem",
 	"lineHeight": "1.75",
 	"$ > :first-child": { marginTop: "0" },
 	"$ > :last-child": { marginBottom: "0" }
-});
-/**
-* Paragraph and lead-text styles for prose content.
-* @internal
-*
-* @remarks Applies vertical margins to `<p>` elements and additional size,
-* color, and spacing overrides for elements carrying the `lead` class.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-paragraphs', ['prose-base', proseParagraphsStyle]])
-* ```
-*/
-const proseParagraphsStyle = defineStyleDefinition({
-	"$ p": {
-		marginTop: "1.25em",
-		marginBottom: "1.25em"
-	},
-	"$ [class~=\"lead\"]": {
-		color: "var(--pk-prose-color-lead)",
-		fontSize: "1.25em",
-		lineHeight: "1.6",
-		marginTop: "1.2em",
-		marginBottom: "1.2em"
-	}
-});
-/**
-* Anchor link styles for prose content.
-* @internal
-*
-* @remarks Sets link color, underline decoration, and medium font weight.
-* Nested `<strong>` and `<code>` inside links inherit the link color.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-links', ['prose-base', proseLinksStyle]])
-* ```
-*/
-const proseLinksStyle = defineStyleDefinition({
-	"$ a": {
-		color: "var(--pk-prose-color-links)",
-		textDecoration: "underline",
-		fontWeight: "500"
-	},
-	"$ a strong": { color: "inherit" },
-	"$ a code": { color: "inherit" }
-});
-/**
-* Strong and italic emphasis styles for prose content.
-* @internal
-*
-* @remarks Bold text receives a dedicated color variable and semi-bold weight.
-* When `<strong>` appears inside links, blockquotes, or table headers the
-* color inherits from the parent to avoid clashing with contextual colors.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-emphasis', ['prose-base', proseEmphasisStyle]])
-* ```
-*/
-const proseEmphasisStyle = defineStyleDefinition({
-	"$ strong": {
-		color: "var(--pk-prose-color-bold)",
-		fontWeight: "600"
-	},
-	"$ a strong": { color: "inherit" },
-	"$ blockquote strong": { color: "inherit" },
-	"$ thead th strong": { color: "inherit" },
-	"$ em": { fontStyle: "italic" }
-});
-/**
-* Keyboard input (`<kbd>`) styles for prose content.
-* @internal
-*
-* @remarks Renders `<kbd>` elements with a subtle raised appearance using
-* box-shadow borders. Color and shadow are driven by dedicated CSS variables.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-kbd', ['prose-base', proseKbdStyle]])
-* ```
-*/
-const proseKbdStyle = defineStyleDefinition({ "$ kbd": {
-	color: "var(--pk-prose-color-kbd)",
-	fontSize: "0.875em",
-	fontWeight: "500",
-	fontFamily: "inherit",
-	borderRadius: "0.3125rem",
-	paddingTop: "0.1875em",
-	paddingRight: "0.375em",
-	paddingBottom: "0.1875em",
-	paddingLeft: "0.375em",
-	boxShadow: "0 0 0 1px var(--pk-prose-kbd-shadows), 0 3px 0 var(--pk-prose-kbd-shadows)"
-} });
-/**
-* Ordered list, unordered list, and definition list styles for prose content.
-* @internal
-*
-* @remarks Handles list markers (decimal, alpha, roman), nested list bullet
-* progression (disc → circle → square), item spacing, and definition list
-* (`<dl>`, `<dt>`, `<dd>`) layout.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-lists', ['prose-base', proseListsStyle]])
-* ```
-*/
-const proseListsStyle = defineStyleDefinition({
-	"$ ol": {
-		listStyleType: "decimal",
-		marginTop: "1.25em",
-		marginBottom: "1.25em",
-		paddingLeft: "1.625em"
-	},
-	"$ ol[type=\"A\"]": { listStyleType: "upper-alpha" },
-	"$ ol[type=\"a\"]": { listStyleType: "lower-alpha" },
-	"$ ol[type=\"A\" s]": { listStyleType: "upper-alpha" },
-	"$ ol[type=\"a\" s]": { listStyleType: "lower-alpha" },
-	"$ ol[type=\"I\"]": { listStyleType: "upper-roman" },
-	"$ ol[type=\"i\"]": { listStyleType: "lower-roman" },
-	"$ ol[type=\"I\" s]": { listStyleType: "upper-roman" },
-	"$ ol[type=\"i\" s]": { listStyleType: "lower-roman" },
-	"$ ol[type=\"1\"]": { listStyleType: "decimal" },
-	"$ ul": {
-		listStyleType: "disc",
-		marginTop: "1.25em",
-		marginBottom: "1.25em",
-		paddingLeft: "1.625em"
-	},
-	"$ ul ul": { listStyleType: "circle" },
-	"$ ul ul ul": { listStyleType: "square" },
-	"$ li": {
-		marginTop: "0.5em",
-		marginBottom: "0.5em"
-	},
-	"$ ol > li": { paddingLeft: "0.375em" },
-	"$ ul > li": { paddingLeft: "0.375em" },
-	"$ > ul > li p": {
-		marginTop: "0.75em",
-		marginBottom: "0.75em"
-	},
-	"$ > ul > li > :first-child": { marginTop: "1.25em" },
-	"$ > ul > li > :last-child": { marginBottom: "1.25em" },
-	"$ > ol > li > :first-child": { marginTop: "1.25em" },
-	"$ > ol > li > :last-child": { marginBottom: "1.25em" },
-	"$ ul ul, $ ul ol, $ ol ul, $ ol ol": {
-		marginTop: "0.75em",
-		marginBottom: "0.75em"
-	},
-	"$ dl": {
-		marginTop: "1.25em",
-		marginBottom: "1.25em"
-	},
-	"$ dt": {
-		color: "var(--pk-prose-color-headings)",
-		fontWeight: "600",
-		marginTop: "1.25em"
-	},
-	"$ dd": {
-		marginTop: "0.5em",
-		paddingLeft: "1.625em"
-	}
-});
-/**
-* Horizontal rule (`<hr>`) styles for prose content.
-* @internal
-*
-* @remarks Applies generous vertical margins and a single-pixel top border
-* colored by the `--pk-prose-color-hr` variable. The element immediately
-* following an `<hr>` has its top margin collapsed.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-hr', ['prose-base', proseHrStyle]])
-* ```
-*/
-const proseHrStyle = defineStyleDefinition({
-	"$ hr": {
-		borderColor: "var(--pk-prose-color-hr)",
-		borderTopWidth: "1px",
-		marginTop: "3em",
-		marginBottom: "3em"
-	},
-	"$ hr + *": { marginTop: "0" }
-});
-/**
-* Heading (h1–h4) styles for prose content.
-* @internal
-*
-* @remarks Each heading level gets a distinct font size, weight, line height,
-* and vertical margin. Nested `<strong>` receives a heavier weight and
-* `<code>` inherits the heading color. Sibling elements after h2/h3/h4
-* have their top margin collapsed.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-headings', ['prose-base', proseHeadingsStyle]])
-* ```
-*/
-const proseHeadingsStyle = defineStyleDefinition({
-	"$ h1": {
-		color: "var(--pk-prose-color-headings)",
-		fontWeight: "800",
-		fontSize: "2.25em",
-		marginTop: "0",
-		marginBottom: "0.88em",
-		lineHeight: "1.1"
-	},
-	"$ h1 strong": { fontWeight: "900" },
-	"$ h1 code": { color: "inherit" },
-	"$ h2": {
-		color: "var(--pk-prose-color-headings)",
-		fontWeight: "700",
-		fontSize: "1.5em",
-		marginTop: "2em",
-		marginBottom: "1em",
-		lineHeight: "1.33"
-	},
-	"$ h2 strong": { fontWeight: "800" },
-	"$ h2 code": { color: "inherit" },
-	"$ h2 + *": { marginTop: "0" },
-	"$ h3": {
-		color: "var(--pk-prose-color-headings)",
-		fontWeight: "600",
-		fontSize: "1.25em",
-		marginTop: "1.6em",
-		marginBottom: "0.6em",
-		lineHeight: "1.6"
-	},
-	"$ h3 strong": { fontWeight: "700" },
-	"$ h3 code": { color: "inherit" },
-	"$ h3 + *": { marginTop: "0" },
-	"$ h4": {
-		color: "var(--pk-prose-color-headings)",
-		fontWeight: "600",
-		marginTop: "1.5em",
-		marginBottom: "0.5em",
-		lineHeight: "1.5"
-	},
-	"$ h4 strong": { fontWeight: "700" },
-	"$ h4 code": { color: "inherit" },
-	"$ h4 + *": { marginTop: "0" }
-});
-/**
-* Blockquote styles for prose content.
-* @internal
-*
-* @remarks Renders blockquotes with italic text, a left border accent,
-* and automatic open/close curly quotes via CSS `content`. Nested
-* `<code>` inherits the quote color.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-quotes', ['prose-base', proseQuotesStyle]])
-* ```
-*/
-const proseQuotesStyle = defineStyleDefinition({
-	"$ blockquote": {
-		fontWeight: "500",
-		fontStyle: "italic",
-		color: "var(--pk-prose-color-quotes)",
-		borderLeftWidth: "0.25rem",
-		borderLeftColor: "var(--pk-prose-color-quote-borders)",
-		quotes: "\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"",
-		marginTop: "1.6em",
-		marginBottom: "1.6em",
-		paddingLeft: "1em"
-	},
-	"$ blockquote p:first-of-type::before": { content: "open-quote" },
-	"$ blockquote p:last-of-type::after": { content: "close-quote" },
-	"$ blockquote code": { color: "inherit" }
-});
-/**
-* Image, video, picture, figure, and figcaption styles for prose content.
-* @internal
-*
-* @remarks Applies consistent vertical margins to media elements and
-* collapses inner margins within `<figure>`. Figcaptions receive a
-* smaller font size and the captions color variable.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-media', ['prose-base', proseMediaStyle]])
-* ```
-*/
-const proseMediaStyle = defineStyleDefinition({
-	"$ img": {
-		marginTop: "2em",
-		marginBottom: "2em"
-	},
-	"$ picture": {
-		display: "block",
-		marginTop: "2em",
-		marginBottom: "2em"
-	},
-	"$ video": {
-		marginTop: "2em",
-		marginBottom: "2em"
-	},
-	"$ figure": {
-		marginTop: "2em",
-		marginBottom: "2em"
-	},
-	"$ figure > *": {
-		marginTop: "0",
-		marginBottom: "0"
-	},
-	"$ figcaption": {
-		color: "var(--pk-prose-color-captions)",
-		fontSize: "0.875em",
-		lineHeight: "1.4",
-		marginTop: "0.85em"
-	}
-});
-/**
-* Inline code and preformatted code block styles for prose content.
-* @internal
-*
-* @remarks Inline `<code>` receives backtick-style pseudo-element wrappers
-* and bold weight. `<pre>` blocks get background color, rounded corners,
-* horizontal scroll, and padding. Code inside `<pre>` resets to inherit
-* parent styles and removes the backtick wrappers.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-code', ['prose-base', proseCodeStyle]])
-* ```
-*/
-const proseCodeStyle = defineStyleDefinition({
-	"$ code": {
-		color: "var(--pk-prose-color-code)",
-		fontWeight: "600",
-		fontSize: "0.875em"
-	},
-	"$ code::before": { content: "\"`\"" },
-	"$ code::after": { content: "\"`\"" },
-	"$ pre": {
-		color: "var(--pk-prose-color-pre-code)",
-		backgroundColor: "var(--pk-prose-color-pre-bg)",
-		overflowX: "auto",
-		fontWeight: "400",
-		fontSize: "0.875em",
-		lineHeight: "1.7",
-		marginTop: "1.7em",
-		marginBottom: "1.7em",
-		borderRadius: "0.375rem",
-		paddingTop: "0.85em",
-		paddingRight: "1.14em",
-		paddingBottom: "0.85em",
-		paddingLeft: "1.14em"
-	},
-	"$ pre code": {
-		backgroundColor: "transparent",
-		borderWidth: "0",
-		borderRadius: "0",
-		padding: "0",
-		fontWeight: "inherit",
-		color: "inherit",
-		fontSize: "inherit",
-		fontFamily: "inherit",
-		lineHeight: "inherit"
-	},
-	"$ pre code::before": { content: "none" },
-	"$ pre code::after": { content: "none" }
-});
-/**
-* Table, thead, tbody, and tfoot styles for prose content.
-* @internal
-*
-* @remarks Tables span the full width with auto layout. Header cells receive
-* the headings color and bottom border; body rows get per-row bottom
-* borders (removed on the last row). First and last cell padding is
-* collapsed flush with the table edges.
-*
-* @example
-* ```ts
-* engine.shortcuts.add(['prose-tables', ['prose-base', proseTablesStyle]])
-* ```
-*/
-const proseTablesStyle = defineStyleDefinition({
-	"$ table": {
-		width: "100%",
-		tableLayout: "auto",
-		textAlign: "left",
-		marginTop: "2em",
-		marginBottom: "2em",
-		fontSize: "0.875em",
-		lineHeight: "1.7"
-	},
-	"$ thead": {
-		borderBottomWidth: "1px",
-		borderBottomColor: "var(--pk-prose-color-th-borders)"
-	},
-	"$ thead th": {
-		color: "var(--pk-prose-color-headings)",
-		fontWeight: "600",
-		verticalAlign: "bottom",
-		paddingRight: "0.57em",
-		paddingBottom: "0.57em",
-		paddingLeft: "0.57em"
-	},
-	"$ thead th:first-child": { paddingLeft: "0" },
-	"$ thead th:last-child": { paddingRight: "0" },
-	"$ thead th code": { color: "inherit" },
-	"$ tbody tr": {
-		borderBottomWidth: "1px",
-		borderBottomColor: "var(--pk-prose-color-td-borders)"
-	},
-	"$ tbody tr:last-child": { borderBottomWidth: "0" },
-	"$ tbody td": { verticalAlign: "baseline" },
-	"$ tbody td, $ tfoot td": {
-		paddingTop: "0.57em",
-		paddingRight: "0.57em",
-		paddingBottom: "0.57em",
-		paddingLeft: "0.57em"
-	},
-	"$ tbody td:first-child, $ tfoot td:first-child": { paddingLeft: "0" },
-	"$ tbody td:last-child, $ tfoot td:last-child": { paddingRight: "0" }
-});
+};
 //#endregion
 //#region src/index.ts
 const proseShortcutModules = [
-	["prose-paragraphs", proseParagraphsStyle],
-	["prose-links", proseLinksStyle],
-	["prose-emphasis", proseEmphasisStyle],
-	["prose-kbd", proseKbdStyle],
-	["prose-lists", proseListsStyle],
-	["prose-hr", proseHrStyle],
-	["prose-headings", proseHeadingsStyle],
-	["prose-quotes", proseQuotesStyle],
-	["prose-media", proseMediaStyle],
-	["prose-code", proseCodeStyle],
-	["prose-tables", proseTablesStyle]
+	["prose-paragraphs", {
+		"$ p": {
+			marginTop: "1.25em",
+			marginBottom: "1.25em"
+		},
+		"$ [class~=\"lead\"]": {
+			color: "var(--pk-prose-color-lead)",
+			fontSize: "1.25em",
+			lineHeight: "1.6",
+			marginTop: "1.2em",
+			marginBottom: "1.2em"
+		}
+	}],
+	["prose-links", {
+		"$ a": {
+			color: "var(--pk-prose-color-links)",
+			textDecoration: "underline",
+			fontWeight: "500"
+		},
+		"$ a strong": { color: "inherit" },
+		"$ a code": { color: "inherit" }
+	}],
+	["prose-emphasis", {
+		"$ strong": {
+			color: "var(--pk-prose-color-bold)",
+			fontWeight: "600"
+		},
+		"$ a strong": { color: "inherit" },
+		"$ blockquote strong": { color: "inherit" },
+		"$ thead th strong": { color: "inherit" },
+		"$ em": { fontStyle: "italic" }
+	}],
+	["prose-kbd", { "$ kbd": {
+		color: "var(--pk-prose-color-kbd)",
+		fontSize: "0.875em",
+		fontWeight: "500",
+		fontFamily: "inherit",
+		borderRadius: "0.3125rem",
+		paddingTop: "0.1875em",
+		paddingRight: "0.375em",
+		paddingBottom: "0.1875em",
+		paddingLeft: "0.375em",
+		boxShadow: "0 0 0 1px var(--pk-prose-kbd-shadows), 0 3px 0 var(--pk-prose-kbd-shadows)"
+	} }],
+	["prose-lists", {
+		"$ ol": {
+			listStyleType: "decimal",
+			marginTop: "1.25em",
+			marginBottom: "1.25em",
+			paddingLeft: "1.625em"
+		},
+		"$ ol[type=\"A\"]": { listStyleType: "upper-alpha" },
+		"$ ol[type=\"a\"]": { listStyleType: "lower-alpha" },
+		"$ ol[type=\"A\" s]": { listStyleType: "upper-alpha" },
+		"$ ol[type=\"a\" s]": { listStyleType: "lower-alpha" },
+		"$ ol[type=\"I\"]": { listStyleType: "upper-roman" },
+		"$ ol[type=\"i\"]": { listStyleType: "lower-roman" },
+		"$ ol[type=\"I\" s]": { listStyleType: "upper-roman" },
+		"$ ol[type=\"i\" s]": { listStyleType: "lower-roman" },
+		"$ ol[type=\"1\"]": { listStyleType: "decimal" },
+		"$ ul": {
+			listStyleType: "disc",
+			marginTop: "1.25em",
+			marginBottom: "1.25em",
+			paddingLeft: "1.625em"
+		},
+		"$ ul ul": { listStyleType: "circle" },
+		"$ ul ul ul": { listStyleType: "square" },
+		"$ li": {
+			marginTop: "0.5em",
+			marginBottom: "0.5em"
+		},
+		"$ ol > li": { paddingLeft: "0.375em" },
+		"$ ul > li": { paddingLeft: "0.375em" },
+		"$ > ul > li p": {
+			marginTop: "0.75em",
+			marginBottom: "0.75em"
+		},
+		"$ > ul > li > p:first-child": { marginTop: "1.25em" },
+		"$ > ul > li > p:last-child": { marginBottom: "1.25em" },
+		"$ > ol > li > p:first-child": { marginTop: "1.25em" },
+		"$ > ol > li > p:last-child": { marginBottom: "1.25em" },
+		"$ ul ul, $ ul ol, $ ol ul, $ ol ol": {
+			marginTop: "0.75em",
+			marginBottom: "0.75em"
+		},
+		"$ dl": {
+			marginTop: "1.25em",
+			marginBottom: "1.25em"
+		},
+		"$ dt": {
+			color: "var(--pk-prose-color-headings)",
+			fontWeight: "600",
+			marginTop: "1.25em"
+		},
+		"$ dd": {
+			marginTop: "0.5em",
+			paddingLeft: "1.625em"
+		}
+	}],
+	["prose-hr", {
+		"$ hr": {
+			borderColor: "var(--pk-prose-color-hr)",
+			borderTopStyle: "solid",
+			borderTopWidth: "1px",
+			marginTop: "3em",
+			marginBottom: "3em"
+		},
+		"$ hr + *": { marginTop: "0" }
+	}],
+	["prose-headings", {
+		"$ h1": {
+			color: "var(--pk-prose-color-headings)",
+			fontWeight: "800",
+			fontSize: "2.25em",
+			marginTop: "0",
+			marginBottom: "0.88em",
+			lineHeight: "1.1"
+		},
+		"$ h1 strong": { fontWeight: "900" },
+		"$ h1 code": { color: "inherit" },
+		"$ h2": {
+			color: "var(--pk-prose-color-headings)",
+			fontWeight: "700",
+			fontSize: "1.5em",
+			marginTop: "2em",
+			marginBottom: "1em",
+			lineHeight: "1.33"
+		},
+		"$ h2 strong": { fontWeight: "800" },
+		"$ h2 code": { color: "inherit" },
+		"$ h2 + *": { marginTop: "0" },
+		"$ h3": {
+			color: "var(--pk-prose-color-headings)",
+			fontWeight: "600",
+			fontSize: "1.25em",
+			marginTop: "1.6em",
+			marginBottom: "0.6em",
+			lineHeight: "1.6"
+		},
+		"$ h3 strong": { fontWeight: "700" },
+		"$ h3 code": { color: "inherit" },
+		"$ h3 + *": { marginTop: "0" },
+		"$ h4": {
+			color: "var(--pk-prose-color-headings)",
+			fontWeight: "600",
+			marginTop: "1.5em",
+			marginBottom: "0.5em",
+			lineHeight: "1.5"
+		},
+		"$ h4 strong": { fontWeight: "700" },
+		"$ h4 code": { color: "inherit" },
+		"$ h4 + *": { marginTop: "0" }
+	}],
+	["prose-quotes", {
+		"$ blockquote": {
+			fontWeight: "500",
+			fontStyle: "italic",
+			color: "var(--pk-prose-color-quotes)",
+			borderLeftWidth: "0.25rem",
+			borderLeftColor: "var(--pk-prose-color-quote-borders)",
+			quotes: "\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"",
+			marginTop: "1.6em",
+			marginBottom: "1.6em",
+			paddingLeft: "1em"
+		},
+		"$ blockquote p:first-of-type::before": { content: "open-quote" },
+		"$ blockquote p:last-of-type::after": { content: "close-quote" },
+		"$ blockquote code": { color: "inherit" }
+	}],
+	["prose-media", {
+		"$ img": {
+			marginTop: "2em",
+			marginBottom: "2em"
+		},
+		"$ picture": {
+			display: "block",
+			marginTop: "2em",
+			marginBottom: "2em"
+		},
+		"$ video": {
+			marginTop: "2em",
+			marginBottom: "2em"
+		},
+		"$ figure": {
+			marginTop: "2em",
+			marginBottom: "2em"
+		},
+		"$ figure > *": {
+			marginTop: "0",
+			marginBottom: "0"
+		},
+		"$ figcaption": {
+			color: "var(--pk-prose-color-captions)",
+			fontSize: "0.875em",
+			lineHeight: "1.4",
+			marginTop: "0.85em"
+		}
+	}],
+	["prose-code", {
+		"$ code": {
+			color: "var(--pk-prose-color-code)",
+			fontWeight: "600",
+			fontSize: "0.875em"
+		},
+		"$ code::before": { content: "\"`\"" },
+		"$ code::after": { content: "\"`\"" },
+		"$ pre": {
+			color: "var(--pk-prose-color-pre-code)",
+			backgroundColor: "var(--pk-prose-color-pre-bg)",
+			overflowX: "auto",
+			fontWeight: "400",
+			fontSize: "0.875em",
+			lineHeight: "1.7",
+			marginTop: "1.7em",
+			marginBottom: "1.7em",
+			borderRadius: "0.375rem",
+			paddingTop: "0.85em",
+			paddingRight: "1.14em",
+			paddingBottom: "0.85em",
+			paddingLeft: "1.14em"
+		},
+		"$ pre code": {
+			backgroundColor: "transparent",
+			borderWidth: "0",
+			borderRadius: "0",
+			padding: "0",
+			fontWeight: "inherit",
+			color: "inherit",
+			fontSize: "inherit",
+			fontFamily: "inherit",
+			lineHeight: "inherit"
+		},
+		"$ pre code::before": { content: "none" },
+		"$ pre code::after": { content: "none" }
+	}],
+	["prose-tables", {
+		"$ table": {
+			width: "100%",
+			tableLayout: "auto",
+			textAlign: "left",
+			marginTop: "2em",
+			marginBottom: "2em",
+			fontSize: "0.875em",
+			lineHeight: "1.7"
+		},
+		"$ thead": {
+			borderBottomWidth: "1px",
+			borderBottomColor: "var(--pk-prose-color-th-borders)"
+		},
+		"$ thead th": {
+			color: "var(--pk-prose-color-headings)",
+			fontWeight: "600",
+			verticalAlign: "bottom",
+			paddingRight: "0.57em",
+			paddingBottom: "0.57em",
+			paddingLeft: "0.57em"
+		},
+		"$ thead th:first-child": { paddingLeft: "0" },
+		"$ thead th:last-child": { paddingRight: "0" },
+		"$ thead th code": { color: "inherit" },
+		"$ tbody tr": {
+			borderBottomWidth: "1px",
+			borderBottomColor: "var(--pk-prose-color-td-borders)"
+		},
+		"$ tbody tr:last-child": { borderBottomWidth: "0" },
+		"$ tbody td": { verticalAlign: "baseline" },
+		"$ tbody td, $ tfoot td": {
+			paddingTop: "0.57em",
+			paddingRight: "0.57em",
+			paddingBottom: "0.57em",
+			paddingLeft: "0.57em"
+		},
+		"$ tbody td:first-child, $ tfoot td:first-child": { paddingLeft: "0" },
+		"$ tbody td:last-child, $ tfoot td:last-child": { paddingRight: "0" }
+	}]
 ];
 const proseSizeVariants = {
 	"sm": {

package/package.json

@@ -4,10 +4,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.51",
+  "version": "0.0.54",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
-  "homepage": "https://pikacss.com",
+  "homepage": "https://pikacss.github.io",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pikacss/pikacss.git",
@@ -39,10 +39,10 @@
     "node": ">=22"
   },
   "peerDependencies": {
-    "@pikacss/core": "0.0.51"
+    "@pikacss/core": "0.0.54"
   },
   "devDependencies": {
-    "@pikacss/core": "0.0.51"
+    "@pikacss/core": "0.0.54"
   },
   "scripts": {
     "build": "tsdown",