@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/src/typeset.css

@@ -0,0 +1,510 @@
+/* Generated by tokens/build.mjs from tokens/typeset.css. Do not edit. WordPress copy: unlayered (core block
+   styles are unlayered) and the block editor canvas root counts as the .typeset wrapper. */
+/*
+ * Baseline typeset: a fork of shadcn/typeset (https://ui.shadcn.com/typeset.css, fetched 2026-09-24).
+ * ADR-0028 §2: only the hooks at the top and the inline shadcn variables are rewired to Baseline's emitted names
+ * (--bl-font-heading, --bl-font-mono, --foreground, --muted-foreground, --border, --primary, --ring, --muted,
+ * --bl-radius-lg). Nothing else changes, so an upstream update diffs cleanly, except one marked Baseline addition (the
+ * flow gap above an embedded component, 2026-10-01) and one marked Baseline change (tables take the Table
+ * component's look, 2026-10-02).
+ * Canonical copy (ADR-0028 §2, amended 2026-09-24): edit only this file. tokens/build.mjs writes the platform copies:
+ * registry/src/styles/typeset.css (verbatim), platforms/wordpress/theme/src/typeset.css (unlayered, editor root) and
+ * platforms/shopify/theme/snippets/typeset.liquid (unlayered, inside {% stylesheet %}); platforms/html/src/baseline.css
+ * imports this file directly.
+ */
+
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container)) {
+  --typeset-font-body: inherit;
+  --typeset-font-heading: var(--bl-font-heading);
+  --typeset-font-mono: var(--bl-font-mono);
+  --typeset-size: 1em;
+  --typeset-leading: 1.75;
+  --typeset-flow: 1.25em;
+}
+
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container)) {
+  font-family: var(--typeset-font-body);
+  font-size: calc(var(--typeset-size) * 1.125);
+  line-height: var(--typeset-leading);
+  color: var(--foreground);
+  overflow-wrap: break-word;
+  margin-trim: block-start;
+
+  @media (min-width: 48rem), print {
+    font-size: var(--typeset-size);
+  }
+
+  --typeset-muted: var(--muted-foreground);
+  --typeset-rule: var(--border);
+}
+
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container))
+  *:not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ) {
+  /* Paragraphs. */
+  &:where(p) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+
+  /* Headings. */
+  &:where(h1, h2, h3, h4, h5, h6) {
+    color: var(--foreground);
+    font-family: var(--typeset-font-heading);
+    font-weight: 600;
+    margin-block-end: 0;
+  }
+  &:where(h1) {
+    font-size: 1.75em;
+    line-height: 1.3;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(h2) {
+    font-size: 1.25em;
+    line-height: 1.4;
+    margin-block-start: calc(var(--typeset-flow) * 1.4);
+  }
+  &:where(h3) {
+    font-size: 1.125em;
+    line-height: 1.45;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(h4) {
+    font-size: 1em;
+    line-height: 1.5;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(h5) {
+    font-size: 0.875em;
+    line-height: 1.5;
+    font-weight: 500;
+    color: var(--typeset-muted);
+    margin-block-start: calc(var(--typeset-flow) / 0.875);
+  }
+  &:where(h6) {
+    font-size: 0.8125em;
+    line-height: 1.5;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--typeset-muted);
+    margin-block-start: calc(var(--typeset-flow) / 0.8125);
+  }
+  /* Anchors. */
+  &:where([id]) {
+    scroll-margin-block-start: var(--typeset-flow);
+  }
+
+  /* Headings own the space below them. */
+  &:where(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
+    margin-block-start: 1em;
+  }
+  &:where(:is(h1, h2, h3, h4) :is(code)) {
+    font-size: 0.9em;
+  }
+
+  /* Links. */
+  &:where(a) {
+    color: inherit;
+    font-weight: 500;
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
+  }
+  &:where(a:hover) {
+    text-decoration-color: currentColor;
+  }
+  &:where(a:focus-visible) {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: 0.125em;
+  }
+  &:where(:is(h1, h2, h3, h4, h5, h6) :is(a)) {
+    font-weight: inherit;
+  }
+
+  /* Inline semantics. */
+  &:where(strong, b) {
+    font-weight: 600;
+  }
+  &:where(:is(h1, h2, h3, h4) :is(strong, b)) {
+    font-weight: 600;
+  }
+  &:where(mark) {
+    background-color: color-mix(
+      in oklab,
+      oklch(0.86 0.17 95) 40%,
+      transparent
+    );
+    color: inherit;
+    padding: 0.05em 0.15em;
+    border-radius: 0.2em;
+  }
+  &:where(abbr[title]) {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 0.2em;
+    cursor: help;
+  }
+  &:where(del, s) {
+    color: var(--typeset-muted);
+    text-decoration-line: line-through;
+  }
+  &:where(sup, sub) {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  &:where(sup) {
+    top: -0.5em;
+  }
+  &:where(sub) {
+    bottom: -0.25em;
+  }
+  &:where(sup a) {
+    text-decoration-line: none;
+    font-weight: 500;
+  }
+
+  /* Lists. */
+  &:where(ul) {
+    list-style-type: disc;
+  }
+  &:where(ol) {
+    list-style-type: decimal;
+  }
+  &:where(ul ul) {
+    list-style-type: circle;
+  }
+  &:where(ul ul ul) {
+    list-style-type: square;
+  }
+  &:where(ol[type="a" i]) {
+    list-style-type: lower-alpha;
+  }
+  &:where(ol[type="i" i]) {
+    list-style-type: lower-roman;
+  }
+  &:where(ol[type="A" s]) {
+    list-style-type: upper-alpha;
+  }
+  &:where(ol[type="I" s]) {
+    list-style-type: upper-roman;
+  }
+  &:where(ul, ol) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    padding-inline-start: 1.5em;
+  }
+  &:where(li) {
+    margin-block-start: 0.5em;
+    padding-inline-start: 0.4em;
+  }
+  &:where(li > p, li > ul, li > ol) {
+    margin-block-start: 0.5em;
+  }
+  &:where(ul > li)::marker {
+    color: var(--typeset-muted);
+  }
+  &:where(ol > li)::marker {
+    color: var(--typeset-muted);
+  }
+
+  /* GFM task lists. */
+  &:where(ul.contains-task-list) {
+    list-style-type: none;
+    padding-inline-start: 0.25em;
+  }
+  &:where(li.task-list-item > input[type="checkbox"]) {
+    margin-inline-end: 0.5em;
+    vertical-align: -0.1em;
+    accent-color: var(--primary);
+  }
+
+  /* Disclosures. */
+  &:where(details) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+  &:where(summary) {
+    cursor: pointer;
+    font-weight: 500;
+  }
+  &:where(summary)::marker {
+    color: var(--typeset-muted);
+  }
+
+  /* Keyboard keys. */
+  &:where(kbd) {
+    font-family: inherit;
+    font-size: 0.85em;
+    font-weight: 500;
+    border: 1px solid var(--typeset-rule);
+    border-block-end-width: 2px;
+    border-radius: min(calc(var(--bl-radius-lg) * 0.6), 0.35em);
+    padding: 0.0625em 0.35em;
+  }
+
+  /* Definition lists. */
+  &:where(dl) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+  &:where(dt) {
+    font-weight: 500;
+    margin-block-start: 1em;
+  }
+  &:where(dt + dt) {
+    margin-block-start: 0.25em;
+  }
+  &:where(dd) {
+    margin-block-start: 0.25em;
+    margin-inline-start: 0;
+    padding-inline-start: 1em;
+    color: var(--typeset-muted);
+  }
+
+  /* Inline code. */
+  &:where(:not(pre) > code) {
+    background-color: var(--muted);
+    font-family: var(--typeset-font-mono);
+    font-size: 0.85em;
+    border-radius: min(calc(var(--bl-radius-lg) * 0.6), 0.35em);
+    padding: 0.125em 0.3em;
+  }
+
+  /* Code blocks. */
+  &:where(pre) {
+    background-color: var(--muted);
+    font-family: var(--typeset-font-mono);
+    font-size: 0.875em;
+    line-height: 1.5;
+    tab-size: 2;
+    direction: ltr;
+    border-radius: var(--bl-radius-lg);
+    padding: 0.75em 1em;
+    overflow-x: auto;
+    margin-block-start: calc(var(--typeset-flow) / 0.875);
+    margin-block-end: 0;
+  }
+  &:where(pre code) {
+    background-color: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    border-radius: 0;
+  }
+
+  /* Blockquote. */
+  &:where(blockquote) {
+    border-inline-start: 2px solid var(--typeset-rule);
+    padding-inline-start: 1em;
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    margin-inline: 0;
+  }
+
+  /* Dividers. */
+  &:where(hr) {
+    border: 0;
+    border-block-start: 1px solid var(--typeset-rule);
+    margin-block-start: calc(var(--typeset-flow) * 2.4);
+    margin-block-end: 0;
+  }
+  &:where(hr + h1, hr + h2, hr + h3, hr + h4) {
+    margin-block-start: var(--typeset-flow);
+  }
+
+  /* GFM footnotes. */
+  &:where(.footnotes, [data-footnotes]) {
+    margin-block-start: calc(var(--typeset-flow) * 2);
+    border-block-start: 1px solid var(--typeset-rule);
+    padding-block-start: var(--typeset-flow);
+    font-size: 0.875em;
+    color: var(--typeset-muted);
+  }
+
+  /* Math. */
+  &:where(math[display="block"]) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-block: 0.25em;
+  }
+
+  /* Media. */
+  &:where(img, video) {
+    border-radius: var(--bl-radius-lg);
+    max-width: 100%;
+    height: auto;
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+  &:where(p img) {
+    margin-block-start: 0;
+  }
+  &:where(figure) {
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+    margin-inline: 0;
+  }
+  &:where(figcaption) {
+    color: var(--typeset-muted);
+    font-size: 0.875em;
+    text-align: center;
+    margin-block-start: calc(0.75em / 0.875);
+  }
+
+  /* Tables: Baseline change (ADR-0028 §2, amended 2026-10-02, user decision; not upstream typeset). A table in prose
+     takes the Table component's look (registry/src/ui/table/table.tsx, upstream shadcn Table) on the same table/*
+     tokens, so a table reads the same wherever it appears: rules under the header and between body rows, the
+     footer filled, a row filled on hover, 40px header cells, 8px cells, no wrapping. Wide tables scroll inside a
+     .typeset-scroll wrapper (WordPress's core/table figure already scrolls). */
+  &:where(table) {
+    width: 100%;
+    caption-side: bottom;
+    font-size: var(--bl-table-font-size);
+    line-height: var(--bl-table-line-height);
+    border-collapse: collapse;
+    margin-block-start: var(--typeset-flow);
+    margin-block-end: 0;
+  }
+
+  /* Horizontal scroll for any wide block. Wrap it and the wrapper owns the
+     flow margin. */
+  &:where(.typeset-scroll) {
+    overflow-x: auto;
+    margin-block-start: var(--typeset-flow);
+  }
+  &:where(.typeset-scroll > *) {
+    margin-block-start: 0;
+  }
+  &:where(thead tr) {
+    border-block-end: var(--bl-table-border-width) solid var(--typeset-rule);
+  }
+  &:where(tbody tr) {
+    border-block-end: var(--bl-table-border-width) solid var(--typeset-rule);
+    transition: background-color 150ms;
+  }
+  &:where(tbody tr:last-child) {
+    border-block-end-width: 0;
+  }
+  &:where(tbody tr:hover) {
+    background-color: var(--bl-table-row-hover-background);
+  }
+  &:where(tfoot) {
+    border-block-start: var(--bl-table-border-width) solid var(--typeset-rule);
+    background-color: var(--bl-table-footer-background);
+    font-weight: var(--bl-table-head-font-weight);
+  }
+  &:where(thead th) {
+    height: var(--bl-table-head-height);
+    padding: 0 var(--bl-table-cell-padding-x);
+    color: var(--foreground);
+    font-weight: var(--bl-table-head-font-weight);
+    text-align: start;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  &:where(:is(tbody, tfoot) :is(td, th)) {
+    padding: var(--bl-table-cell-padding-y) var(--bl-table-cell-padding-x);
+    text-align: start;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  &:where(tbody th) {
+    font-weight: var(--bl-table-head-font-weight);
+  }
+  &:where(caption) {
+    margin-block-start: var(--bl-table-caption-gap);
+    color: var(--typeset-muted);
+    font-size: var(--bl-table-font-size);
+    line-height: var(--bl-table-line-height);
+  }
+  &:where(th[align="center"], td[align="center"]) {
+    text-align: center;
+  }
+  &:where(th[align="right"], td[align="right"]) {
+    text-align: end;
+  }
+
+  /* Blocks inside list items keep the list's tighter rhythm. */
+  &:where(li > blockquote, li > table, li > figure) {
+    margin-block-start: 0.5em;
+  }
+  &:where(li > pre) {
+    margin-block-start: calc(0.5em / 0.875);
+  }
+
+  @media print {
+    &:where(pre, table, blockquote, figure) {
+      break-inside: avoid;
+    }
+    &:where(h1, h2, h3, h4) {
+      break-after: avoid;
+    }
+  }
+
+  /* Forced colors strips the code background, so give it a border. */
+  @media (forced-colors: active) {
+    &:where(:not(pre) > code) {
+      border: 1px solid;
+    }
+  }
+}
+
+/* Baseline addition (ADR-0028 §2, amended 2026-10-01; not in upstream). A component embedded in flowing content opts
+   out of typeset (.not-typeset, or the data-slot every Baseline component root carries), and that also took away the
+   space above it, so an Alert or Card sat flush against the paragraph before it. A direct child of the typeset root
+   that is a component gets the flow gap above it, except as the first child; whatever follows it already has its own
+   flow margin. Same specificity as the rules above. */
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container)) > :where(.not-typeset, [data-not-typeset], [data-slot]):where(:not(:first-child)) {
+  margin-block-start: var(--typeset-flow);
+}
+
+/* First child adds no space above. Last so it wins ties. */
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container))
+  > :where(:first-child):not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ),
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container))
+  > :where(:first-child)
+  > :where(:first-child):not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ),
+:is(.typeset, :where(.editor-styles-wrapper .is-root-container))
+  :where(
+    li > :first-child,
+    blockquote > :first-child,
+    td > :first-child,
+    th > :first-child,
+    dd > :first-child,
+    figure > :first-child,
+    figure > picture > img
+  ):not(
+    :where(
+      .not-typeset,
+      [data-not-typeset],
+      .not-typeset *,
+      [data-not-typeset] *
+    )
+  ) {
+  margin-block-start: 0;
+}

package/templates/wordpress/theme/style.css

@@ -0,0 +1,13 @@
+/*
+Theme Name: GC Baseline
+Theme URI: https://bitbucket.org/goldencomm/design-system
+Author: GoldenComm
+Description: GC Baseline design system for WordPress - hybrid theme with ACF Blocks styled by Tailwind on the shared tokens.
+Version: 0.1.0
+Requires at least: 7.0
+Tested up to: 7.1
+Requires PHP: 8.2
+License: proprietary
+Text Domain: baseline
+*/
+/* Styles are enqueued from assets/ (see functions.php); this file only carries the theme header. */