@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/src/core-table.css

@@ -0,0 +1,88 @@
+/* core/table as the Baseline Table (spec: components/table/spec.md, ADR-0018): the Table component's look, the same one
+   typeset now gives a bare <table> (ADR-0028, amended 2026-10-02), on the table/* tokens. Core's block styles draw a
+   3px header rule, a border on every cell, 0.5em padding and grey stripes, and load after this file, so every
+   selector doubles the block class to win without !important. Core's Stripes style stays as a block style, its stripes
+   the row tint (muted at 50 %). The block's colour, typography and border controls are off in theme.json. */
+
+.wp-block-table.wp-block-table table {
+  width: 100%;
+  border-collapse: collapse;
+  caption-side: bottom;
+  font-size: var(--bl-table-font-size);
+  line-height: var(--bl-table-line-height);
+}
+.wp-block-table.wp-block-table :is(thead, tfoot) {
+  border: 0;
+}
+.wp-block-table.wp-block-table :is(th, td) {
+  border: 0;
+}
+.wp-block-table.wp-block-table thead tr {
+  border-bottom: var(--bl-table-border-width) solid var(--border);
+}
+.wp-block-table.wp-block-table tbody tr {
+  border-bottom: var(--bl-table-border-width) solid var(--border);
+  transition: background-color 150ms;
+}
+.wp-block-table.wp-block-table tbody tr:last-child {
+  border-bottom-width: 0;
+}
+.wp-block-table.wp-block-table tbody tr:hover {
+  background-color: var(--bl-table-row-hover-background);
+}
+.wp-block-table.wp-block-table tfoot {
+  border-top: var(--bl-table-border-width) solid var(--border);
+  background-color: var(--bl-table-footer-background);
+  font-weight: var(--bl-table-head-font-weight);
+}
+.wp-block-table.wp-block-table 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;
+}
+.wp-block-table.wp-block-table :is(tbody, tfoot) :is(td, th) {
+  padding: var(--bl-table-cell-padding-y) var(--bl-table-cell-padding-x);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+/* core's column alignment controls write has-text-align-* on the cells; they keep working */
+.wp-block-table.wp-block-table :is(th, td).has-text-align-center {
+  text-align: center;
+}
+.wp-block-table.wp-block-table :is(th, td).has-text-align-right {
+  text-align: end;
+}
+/* a fixed-layout table wraps, as core intends (the editor's "Fixed width table cells") */
+.wp-block-table.wp-block-table .has-fixed-layout :is(th, td) {
+  white-space: normal;
+}
+
+/* the caption: the component's (text/sm, muted, 16px below), centred as a <caption> is */
+.wp-block-table.wp-block-table figcaption {
+  margin-block: var(--bl-table-caption-gap) 0;
+  color: var(--muted-foreground);
+  font-size: var(--bl-table-font-size);
+  line-height: var(--bl-table-line-height);
+  text-align: center;
+}
+
+/* Stripes: odd body rows take the row tint instead of rules; core's grey bottom border on the figure goes */
+.wp-block-table.wp-block-table.is-style-stripes {
+  border-bottom: 0;
+}
+.wp-block-table.wp-block-table.is-style-stripes table {
+  border-collapse: collapse;
+}
+.wp-block-table.wp-block-table.is-style-stripes tbody tr {
+  border-bottom-width: 0;
+}
+.wp-block-table.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
+  background-color: var(--bl-table-row-hover-background);
+}
+.wp-block-table.wp-block-table.is-style-stripes tbody tr:hover {
+  background-color: var(--muted);
+}

package/templates/wordpress/theme/src/core-tabs.css

@@ -0,0 +1,86 @@
+/* Tabs on WordPress (spec: components/tabs/spec.md; ADR-0018: core/tabs is styled, it has a comparable block).
+   Core's markup:  div.wp-block-tabs > div.wp-block-tab-list[role=tablist] > button[role=tab][aria-selected]
+                                     + div.wp-block-tab-panels > section.wp-block-tab-panel[role=tabpanel][hidden]
+   core's Interactivity API selects, moves focus with the arrow keys and hides the other panels. Core has no vertical
+   orientation (tab-list's layout disallows it) and no disabled tab, so neither is styled here.
+   This file holds what both looks share: the list's box, the tab's box and type, hover, focus and the selected tab's
+   text. The looks (the muted pill, the underline) are tokens/looks/wordpress/tabs-<look>.css, generated into
+   src/looks.generated.css. Mirrors registry/src/ui/tabs/tabs.tsx; geometry from the tabs/* tokens. Core styles the
+   buttons inside :where(), so these rules win without specificity games. */
+
+.wp-block-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-tabs-gap);
+}
+.wp-block-tabs > .wp-block-tab-list,
+.wp-block-tabs > .wp-block-tab-panels {
+  margin: 0;
+}
+/* In post content the tabs take typeset's flow gap above them, like any embedded component (tokens/typeset.css, the
+   Baseline addition): core/tabs carries neither not-typeset nor data-slot, so this names it, as core-card.css does. */
+:is(.typeset, .editor-styles-wrapper .is-root-container) > .wp-block-tabs:not(:first-child) {
+  margin-block-start: var(--typeset-flow);
+}
+
+/* the list: as wide as its tabs, the list padding around them, 32px high */
+.wp-block-tabs > .wp-block-tab-list {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  width: fit-content;
+  height: var(--bl-tabs-list-height);
+  align-items: center;
+  justify-content: center;
+  padding: var(--bl-tabs-list-padding);
+  color: var(--muted-foreground);
+}
+
+/* the tab */
+.wp-block-tabs > .wp-block-tab-list > button {
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 0%;
+  height: calc(100% - 1px);
+  align-items: center;
+  justify-content: center;
+  gap: var(--bl-tabs-trigger-gap);
+  padding: var(--bl-tabs-trigger-padding-y) var(--bl-tabs-trigger-padding-x);
+  border: var(--bl-tabs-trigger-border-width) solid transparent;
+  border-radius: var(--bl-tabs-trigger-radius);
+  background: transparent;
+  color: var(--bl-tabs-trigger-foreground);
+  font-family: inherit;
+  font-size: var(--bl-tabs-trigger-font-size);
+  font-weight: var(--bl-tabs-trigger-font-weight);
+  line-height: var(--bl-tabs-trigger-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: color 150ms, background-color 150ms, box-shadow 150ms, border-color 150ms;
+}
+.wp-block-tabs > .wp-block-tab-list > button:hover,
+.wp-block-tabs > .wp-block-tab-list > button[aria-selected="true"] {
+  color: var(--foreground);
+}
+/* focus keeps Baseline's ring role (already translucent), as Button's */
+.wp-block-tabs > .wp-block-tab-list > button:focus-visible {
+  z-index: 1;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+/* core's own selected underline (a ::before border) gives way to the looks' */
+.wp-block-tabs > .wp-block-tab-list > button::before {
+  content: none;
+}
+
+/* the panel: upstream's text-sm; prose inside keeps typeset's flow */
+.wp-block-tabs > .wp-block-tab-panels > .wp-block-tab-panel {
+  font-size: var(--bl-text-sm);
+  line-height: var(--bl-text-sm--line-height);
+  outline: none;
+}
+/* the panel's first block adds no space above (typeset trims only its own root's first child); the list-to-panel space
+   is tabs/gap alone */
+.wp-block-tabs > .wp-block-tab-panels > .wp-block-tab-panel > :first-child {
+  margin-block-start: 0;
+}

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

@@ -0,0 +1,29 @@
+/* acf/dialog (spec: components/dialog/spec.md). The box itself is Tailwind classes in inc/components/dialog.php,
+   identical to React's; this file holds what classes on the dialog cannot reach. */
+
+/* The page does not scroll behind an open modal (React ships the same rule from dialog.css.json). */
+:root:has(dialog[open]:modal) {
+  overflow: hidden;
+}
+
+/* ACF wraps InnerBlocks in div.acf-innerblocks-container (front end and editor) and the editor adds its own layout
+   wrappers, so the dialog's grid gap would space one wrapper instead of the body blocks. The wrappers step out of the
+   layout, as in acf/item-group (src/item.css). Inside the footer, core/buttons steps out too, so its buttons take the
+   footer's gap and stack (primary on top) below sm like React's. */
+:is(.wp-block-acf-dialog, .wp-block-acf-dialog-footer) :is(.acf-innerblocks-container, .block-editor-inner-blocks, .block-editor-block-list__layout),
+.wp-block-acf-dialog-footer .wp-block-buttons {
+  display: contents;
+}
+
+/* Stacked below sm, every button fills the footer as React's do (the wrapper stretches; the button inside must follow).
+   In the row from sm, a wrapper is only as wide as its button, so this changes nothing there. */
+.wp-block-acf-dialog-footer .wp-block-button > .wp-block-button__link {
+  width: 100%;
+}
+
+/* Body blocks are the dialog's grid items, spaced by its gap: no flow margins on top of that (core's block-gap and
+   typeset's rhythm both add them). The footer's negative margins are its own and stay. */
+[data-slot="dialog-content"] > :not([data-slot="dialog-footer"], [data-slot="dialog-close"]),
+[data-slot="dialog-content"] > .wp-block-acf-dialog-footer {
+  margin-block: 0;
+}

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

@@ -0,0 +1,65 @@
+/* Block editor stylesheet: theme + utilities WITHOUT Tailwind's global preflight (ADR-0008). WordPress falls back to
+   the non-iframed editor whenever a third-party block is still apiVersion 2, and a global reset would then hit the
+   admin chrome. Instead, Baseline elements (anything with data-slot) get a scoped reset equivalent to preflight.
+   Built by `npm run build` into assets/editor.css and enqueued via enqueue_block_assets (inside the iframe). */
+@import "./fonts.css";
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "../assets/tokens.css";
+@import "./typeset.css"; /* prose rhythm (ADR-0028): the canvas root counts as the .typeset wrapper */
+@import "./text-styles.css"; /* content ramp (ADR-0014, generated): display-* / heading-* and the has-<style>-font-size presets */
+@import "./core-button.css"; /* core/button as the Baseline button (ADR-0018) */
+@import "./core-avatar.css"; /* core/avatar renders in the editor canvas too */
+@import "./core-card.css"; /* core/group as the Baseline Card (ADR-0018): block styles card, card-header, card-footer */
+@import "./sections.css"; /* the starter sections' paragraph styles and blog grid (B5) */
+@import "./header.css"; /* the site header on core blocks: parts/header.html, patterns header-inline / header-stacked (B5) */
+@import "./core-layout.css"; /* Section, Container, Columns, Panel on core/group and core/columns (B5) */
+@import "./core-breadcrumbs.css"; /* core/breadcrumbs as the Baseline Breadcrumb (ADR-0018): chevron mask separator */
+@import "./core-pagination.css"; /* core/query-pagination and paginate_links() as the Baseline Pagination (ADR-0018) */
+@import "./core-accordion.css"; /* core/accordion and core/details as the Baseline Accordion (ADR-0018); looks in looks.generated.css */
+@import "./carousel.css"; /* acf/carousel (spec: components/carousel/spec.md) */
+@import "./core-navigation.css"; /* core/navigation as the Baseline Navigation Menu (ADR-0018) */
+@import "./core-tabs.css"; /* core/tabs as the Baseline Tabs (ADR-0018); looks in looks.generated.css */
+@import "./looks.generated.css"; /* the installed looks (ADR-0031), generated by tokens/looks.mjs */
+@import "./core-table.css"; /* core/table as the Baseline Table (ADR-0018): the component's look, as typeset gives prose tables */
+@import "./media.css"; /* Media: core/image, core/video and core/embed; the video facade from inc/media.php */
+@import "./item.css"; /* acf/item-group: the gap reaches the items through ACF's InnerBlocks wrappers */
+@import "./dialog.css"; /* acf/dialog: page scroll lock and the InnerBlocks wrappers stepping out of the grid */
+@import "./sheet.css"; /* acf/sheet: InnerBlocks wrappers, body padding and stacked footer buttons */
+@import "./core-button-editor.css"; /* canvas icon preview + Icon panel (ADR-0020) */
+@import "./icons.generated.css"; /* mask glyphs for controls the theme does not emit the markup for */
+@import "./input.css"; /* core/search and comment fields render in the editor canvas too */
+@import "./checkbox.css"; /* the comment form's consent box renders in the editor canvas too */
+@import "./field.css"; /* the search and comment form blocks render in the editor canvas too */
+@import "./gravityforms.css"; /* GF block previews render inside the editor iframe too */
+
+@source "../blocks";
+@source "../inc";
+
+@layer base {
+  /* the parts of preflight Baseline components rely on, scoped to Baseline markup */
+  [data-slot],
+  [data-slot] *,
+  [data-slot] *::before,
+  [data-slot] *::after {
+    box-sizing: border-box;
+    border: 0 solid;
+  }
+  [data-slot="button"] {
+    appearance: none;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    font-family: var(--font-sans);
+    line-height: inherit;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  [data-slot] svg {
+    display: block;
+    vertical-align: middle;
+  }
+}

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

@@ -0,0 +1,95 @@
+/* Field on WordPress (spec: components/field/spec.md). Field emits no markup here. Two things already render
+   a label, a control and helper text for you: Gravity Forms, mapped through its CSS API in gravityforms.css,
+   and WordPress itself, for the search block, the comment form and the post password form. This file is the
+   second half — it makes core's own form markup read like the Baseline component.
+
+   Everything is `:where()` so a plugin or a child theme can still win without fighting specificity. Values are
+   the field/* and label/* tokens, the same ones the React component consumes. */
+
+/* --- label ------------------------------------------------------------------------------------------- */
+:where(
+  .wp-block-search__label,
+  .comment-form label,
+  .wp-block-post-comments-form label,
+  .post-password-form label,
+  .wp-block-loginout label
+) {
+  display: flex;
+  align-items: center;
+  gap: var(--bl-label-gap);
+  width: fit-content;
+  color: var(--foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-label-font-size);
+  line-height: var(--bl-label-line-height);
+  font-weight: var(--bl-label-font-weight);
+  user-select: none;
+}
+
+/* --- the field stack: label, control, then helper text ----------------------------------------------- */
+:where(
+  .comment-form p,
+  .wp-block-post-comments-form p,
+  .post-password-form p
+) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-field-gap);
+}
+
+/* core wraps the password field's label and input in one <p> alongside the submit button; keep that row
+   horizontal so the button does not stretch across the form */
+:where(.post-password-form p:has(input[type="submit"])) {
+  flex-direction: row;
+  align-items: flex-end;
+  gap: var(--bl-field-gap);
+}
+
+/* fields sit apart by the group gap, which is what FieldGroup does in code */
+:where(.comment-form, .wp-block-post-comments-form form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-field-group-gap);
+}
+
+/* the search block is a label above a row of input + button */
+:where(.wp-block-search__label) {
+  margin-block-end: var(--bl-field-gap);
+}
+:where(.wp-block-search .wp-block-search__inside-wrapper) {
+  gap: var(--bl-field-gap);
+}
+
+/* --- description and helper text ---------------------------------------------------------------------- */
+:where(
+  .comment-notes,
+  .comment-form-cookies-consent label,
+  .logged-in-as,
+  .wp-block-post-comments-form .comment-notes,
+  .post-password-form > p:first-child
+) {
+  color: var(--muted-foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-field-description-font-size);
+  line-height: var(--bl-field-description-line-height);
+  font-weight: var(--bl-field-description-font-weight);
+}
+
+/* the consent checkbox row is a horizontal Field: control first, label beside it */
+:where(.comment-form-cookies-consent) {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--bl-field-gap);
+}
+
+/* --- required marker and validation --------------------------------------------------------------------- */
+:where(.comment-form .required, .required-field-message) {
+  color: var(--destructive);
+}
+:where(.comment-form .error, .wp-block-post-comments-form .error) {
+  color: var(--destructive);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-field-error-font-size);
+  line-height: var(--bl-field-error-line-height);
+  font-weight: var(--bl-field-error-font-weight);
+}

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

@@ -0,0 +1,3 @@
+/* Font loading is a project fact, not a token (ADR-0017): the FAMILY comes from Figma (font/sans -> --bl-font-sans ->
+   Tailwind --font-sans); HOW it loads is decided per client (Google Fonts, Adobe Fonts, self-hosted). Default: Inter. */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");