@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,80 @@
+/* The starter sections on core blocks (B5; spec: components/sections/spec.md); mirrors registry/src/blocks/*. */
+
+/* Eyebrow: typeset/small in primary, 8px above the heading (Figma's HGroup gap, spacing/2) */
+p.is-style-eyebrow {
+  color: var(--primary);
+  font-size: var(--bl-text-sm, 0.875rem);
+  line-height: var(--bl-text-sm--line-height, 1.25rem);
+}
+:is(.typeset, .editor-styles-wrapper .is-root-container, .wp-block-group, .wp-block-column) > p.is-style-eyebrow + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: calc(var(--spacing, 0.25rem) * 2);
+}
+
+/* Lead: the paragraph under a heading, typeset/p in muted-foreground */
+p.is-style-lead {
+  color: var(--muted-foreground);
+}
+
+/* the blog grid (core/query > post-template, Cards): the date and category row under the title */
+.bl-post-grid .bl-post-meta {
+  gap: calc(var(--spacing, 0.25rem) * 2);
+  align-items: center;
+  color: var(--muted-foreground);
+}
+.bl-post-grid .bl-post-meta .wp-block-post-terms a {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--bl-badge-md-padding-x, 0.5rem);
+  height: var(--bl-badge-md-height, 1.25rem);
+  border-radius: var(--bl-badge-md-radius, 9999px);
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  font-size: var(--bl-badge-md-font-size, 0.75rem);
+  font-weight: 500;
+  text-decoration: none;
+}
+.bl-post-grid .wp-block-post-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.bl-post-grid .wp-block-post-title a:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.bl-post-grid .wp-block-post-template {
+  gap: var(--bl-spacing-responsive-sm);
+}
+
+/* the post template is a list: typeset's list rules (bullets, indent, item margins) must not reach the cards */
+.bl-post-grid .wp-block-post-template.wp-block-post-template {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.bl-post-grid .wp-block-post-template > li {
+  margin: 0;
+  padding: 0;
+}
+
+/* Figma's gaps in a section's heading group: 20px from the heading to the lead and to the actions (spacing/5) */
+.wp-block-group :is(h1, h2, h3).wp-block-heading + p.is-style-lead,
+.wp-block-column :is(h1, h2, h3).wp-block-heading + p.is-style-lead,
+.wp-block-group :is(h1, h2, h3, p).wp-block-heading + .wp-block-buttons,
+.wp-block-group p.is-style-lead + .wp-block-buttons,
+.wp-block-column p.is-style-lead + .wp-block-buttons {
+  margin-block-start: calc(var(--spacing, 0.25rem) * 5);
+}
+.wp-block-group :is(h1, h2, h3).wp-block-heading + .wp-block-buttons,
+.wp-block-column :is(h1, h2, h3).wp-block-heading + .wp-block-buttons {
+  margin-block-start: calc(var(--spacing, 0.25rem) * 5);
+}
+
+/* designed headlines balance their lines, as the React blocks' text-balance */
+:is(h1, h2).wp-block-heading:is(.has-display-lg-font-size, .has-display-md-font-size, .has-display-sm-font-size, .has-heading-xl-font-size) {
+  text-wrap: balance;
+}
+
+/* the cards are a second Container below the heading group: the responsive sm gap between them, as Figma's Section */
+.wp-block-group > .wp-block-query.bl-post-grid {
+  margin-block-start: var(--bl-spacing-responsive-sm);
+}

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

@@ -0,0 +1,24 @@
+/* acf/sheet (spec: components/sheet/spec.md). The panel itself is Tailwind classes in inc/components/sheet.php,
+   identical to React's; this file holds what classes on the panel cannot reach. The page scroll lock is src/dialog.css's
+   rule, which covers every modal <dialog>. */
+
+/* ACF's InnerBlocks wrappers (front end and editor) and the footer's core/buttons step out of the layout, so body blocks
+   are the panel's flex items and the footer's buttons stack in it, as in acf/dialog (src/dialog.css). */
+:is(.wp-block-acf-sheet, .wp-block-acf-sheet-footer) :is(.acf-innerblocks-container, .block-editor-inner-blocks, .block-editor-block-list__layout),
+.wp-block-acf-sheet-footer .wp-block-buttons {
+  display: contents;
+}
+
+/* Upstream's body has no padding (the React consumer adds it). Here the body is editors' blocks, so everything between
+   the header and the footer is padded inline to line up with them, with no flow margins on top of the panel's gap. */
+/* The blocks sit inside ACF's wrapper, which is display: contents above, so the padding goes on them, not on it. */
+[data-slot="sheet-content"] > :not([data-slot="sheet-header"], [data-slot="sheet-footer"], .wp-block-button, .acf-innerblocks-container),
+[data-slot="sheet-content"] > .acf-innerblocks-container > :not([data-slot="sheet-footer"]) {
+  margin-block: 0;
+  padding-inline: var(--bl-sheet-padding);
+}
+
+/* stacked footer buttons fill the panel, as React's flex-col does */
+.wp-block-acf-sheet-footer .wp-block-button > .wp-block-button__link {
+  width: 100%;
+}

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

@@ -0,0 +1,120 @@
+/* Switch on WordPress (spec: components/switch/spec.md). There is no core switch block and no Gravity Forms
+   switch field — GF renders a checkbox — so ADR-0018's ladder ends at element styling and the native control
+   *is* the component. Mirrors registry/src/ui/switch/switch.tsx.
+
+   The selector is `input[type="checkbox"][role="switch"]`, which is **opt-in markup**: nothing already on a
+   WordPress site carries role="switch", so no existing checkbox changes appearance. That also means the
+   author writes one element and nothing else — so unlike React, where the thumb is a sibling span, here it is
+   a pseudo-element. There is no wrapper to put a sibling in, and a switch needs no icon, so nothing is lost.
+
+   Size is `data-size="sm"` on the input itself, for the same reason: React puts it on the wrapper span and
+   there is no wrapper here. `md` is the default and needs no attribute. */
+
+:where(input[type="checkbox"][role="switch"]) {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  /* the track hugs its thumb with switch/padding on each side, so the height is derived rather than bound —
+     binding it would let the two disagree (spec: Sizes) */
+  width: var(--bl-switch-md-width);
+  height: calc(var(--bl-switch-md-thumb-size) + 2 * var(--bl-switch-padding));
+  margin: 0;
+  /* A real colour in every state, not transparent: Figma binds color/input unchecked and color/primary
+     checked, on all twelve variants. */
+  border: var(--bl-switch-border-width) solid var(--input);
+  border-radius: var(--bl-switch-radius);
+  background-color: var(--input);
+  vertical-align: middle;
+  outline: none;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+:where(input[type="checkbox"][role="switch"][data-size="sm"]) {
+  width: var(--bl-switch-sm-width);
+  height: calc(var(--bl-switch-sm-thumb-size) + 2 * var(--bl-switch-padding));
+}
+
+:where(input[type="checkbox"][role="switch"]):checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+/* The thumb. Travel is the track minus its padding minus the thumb, so it lands exactly switch/padding from
+   the far end.
+
+   The start offset subtracts the border width, and that is not a fudge: an absolutely positioned
+   pseudo-element is laid out against its element's PADDING box, which sits inside the border, while React and
+   Shopify put the thumb in a borderless wrapper and measure from the border box. Without this the thumb sat
+   one border-width further in on WordPress than on the other three platforms -- invisible while
+   switch/border-width was 0, and visible the moment it became 1px (2026-09-29). The travel below needs no
+   such correction: it is a distance, not an origin. */
+:where(input[type="checkbox"][role="switch"])::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--bl-switch-padding) - var(--bl-switch-border-width));
+  width: var(--bl-switch-md-thumb-size);
+  height: var(--bl-switch-md-thumb-size);
+  border-radius: var(--bl-switch-md-thumb-radius);
+  /* The thumb is color/primary-foreground, not color/background. Baseline has no light/dark: Scheme 2 IS the
+     dark scheme, and its --background is #020618, so bg-background drew a near-black thumb on an indigo track.
+     A hardcoded white would be wrong in the other direction -- Warning's --primary is #ffb900 and its
+     --primary-foreground is #461901, because white on amber is unreadable. primary-foreground is *defined* as
+     the colour that reads on primary, so it is correct in all five schemes by construction, and it is what
+     Radio's dot already uses. Unchecked the track is --input, where it also reads. (Rebound in Figma on the 12
+     Switch variants, 2026-09-29.) */
+  background-color: var(--primary-foreground);
+  translate: 0 -50%;
+  transition: translate 150ms;
+}
+
+:where(input[type="checkbox"][role="switch"][data-size="sm"])::before {
+  width: var(--bl-switch-sm-thumb-size);
+  height: var(--bl-switch-sm-thumb-size);
+  border-radius: var(--bl-switch-sm-thumb-radius);
+}
+
+:where(input[type="checkbox"][role="switch"]):checked::before {
+  translate: calc(
+      var(--bl-switch-md-width) - 2 * var(--bl-switch-padding) - var(--bl-switch-md-thumb-size)
+    )
+    -50%;
+}
+
+:where(input[type="checkbox"][role="switch"][data-size="sm"]):checked::before {
+  translate: calc(
+      var(--bl-switch-sm-width) - 2 * var(--bl-switch-padding) - var(--bl-switch-sm-thumb-size)
+    )
+    -50%;
+}
+
+/* focus-visible is the shared 3px ring, the same contract every other control uses. */
+:where(input[type="checkbox"][role="switch"]):focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+/* invalid is a destructive border plus the ring, the same contract every other control uses. It showed only
+   the ring until 2026-09-29, when switch/border-width moved from 0 to 1px so the border could be expressed. */
+:where(input[type="checkbox"][role="switch"])[aria-invalid="true"] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+}
+
+/* invalid does not override checked: a switched-on control still has to read as on, so the primary border
+   wins and only the ring carries the error. Figma draws exactly this. */
+:where(input[type="checkbox"][role="switch"])[aria-invalid="true"]:checked {
+  border-color: var(--primary);
+}
+
+:where(input[type="checkbox"][role="switch"]):disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* A 20px-tall track fails WCAG 2.5.8 on touch. The target is grown with a pseudo-element rather than with
+   padding, which would move the track. A label with `for` is the bigger target in practice; this is the floor. */
+:where(input[type="checkbox"][role="switch"])::after {
+  content: "";
+  position: absolute;
+  inset: -8px -12px;
+}

package/templates/wordpress/theme/src/text-styles.css

@@ -0,0 +1,44 @@
+/* Generated by tokens/build.mjs from the Figma text styles (src/figma/text-styles.json). Do not edit. Content ramp
+   (ADR-0014): a class per style, and the matching core font-size preset (has-<style>-font-size). */
+:is(.display-lg, .has-display-lg-font-size):is(.display-lg, .has-display-lg-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-5xl);
+  line-height: var(--bl-text-responsive-5xl--line-height);
+  font-weight: 600;
+}
+:is(.display-md, .has-display-md-font-size):is(.display-md, .has-display-md-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-4xl);
+  line-height: var(--bl-text-responsive-4xl--line-height);
+  font-weight: 600;
+}
+:is(.display-sm, .has-display-sm-font-size):is(.display-sm, .has-display-sm-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-3xl);
+  line-height: var(--bl-text-responsive-3xl--line-height);
+  font-weight: 600;
+}
+:is(.heading-lg, .has-heading-lg-font-size):is(.heading-lg, .has-heading-lg-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-xl);
+  line-height: var(--bl-text-responsive-xl--line-height);
+  font-weight: 600;
+}
+:is(.heading-md, .has-heading-md-font-size):is(.heading-md, .has-heading-md-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-lg);
+  line-height: var(--bl-text-responsive-lg--line-height);
+  font-weight: 600;
+}
+:is(.heading-sm, .has-heading-sm-font-size):is(.heading-sm, .has-heading-sm-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-md);
+  line-height: var(--bl-text-responsive-md--line-height);
+  font-weight: 600;
+}
+:is(.heading-xl, .has-heading-xl-font-size):is(.heading-xl, .has-heading-xl-font-size) {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-text-responsive-2xl);
+  line-height: var(--bl-text-responsive-2xl--line-height);
+  font-weight: 600;
+}

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

@@ -0,0 +1,61 @@
+/* Textarea on WordPress (spec: components/textarea/spec.md). There is no core textarea block, so ADR-0018's
+   ladder ends at element styling and the native control *is* the component. Mirrors
+   registry/src/ui/textarea/textarea.tsx.
+
+   Two consumers share these values: the theme's own markup (the comment form's message box) here, and Gravity
+   Forms' Paragraph Text field through its CSS API in gravityforms.css. Both resolve to the same
+   --bl-textarea-md-* variables, so one designer change in Figma moves both.
+
+   Everything is on :where() so a plugin can still override, exactly as input.css is. */
+
+:where(textarea) {
+  /* field-sizing:content grows the box with its content in CSS alone -- no JS auto-grow on any platform.
+     Safari and Firefox ignore it today and keep the `rows` height and scroll, which is a plain textarea, so
+     the degradation is invisible rather than broken. min-height is the floor either way. */
+  field-sizing: content;
+  /* Vertical only. A textarea is as wide as its container -- Field, a form column, a grid cell -- so dragging it
+     wider breaks the layout around it and nothing puts it back. Height is the dimension the user actually needs,
+     and field-sizing already grows it; the handle is for overriding that. */
+  resize: vertical;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--bl-textarea-md-min-height);
+  /* padding-y is 8px against Input's 4px: a paragraph starting at the top of a 64px box wants a looser pad
+     than a single line centred in a 32px one (spec: Size). */
+  padding: var(--bl-textarea-md-padding-y) var(--bl-textarea-md-padding-x);
+  border: var(--bl-textarea-md-border-width) solid var(--input);
+  border-radius: var(--bl-textarea-md-radius);
+  background-color: transparent;
+  color: var(--foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-textarea-md-font-size);
+  line-height: var(--bl-textarea-md-line-height);
+  outline: none;
+  transition: color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+:where(textarea)::placeholder {
+  color: var(--muted-foreground);
+}
+
+:where(textarea):focus-visible {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+/* invalid is set here rather than inherited from a surrounding field, so a bare textarea looks the same as
+   one inside a Field -- the call Input made and the reason its spec gives. */
+:where(textarea)[aria-invalid="true"] {
+  border-color: var(--destructive);
+  color: var(--destructive);
+}
+
+:where(textarea)[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+}
+
+:where(textarea):disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/templates/wordpress/theme/src/toggle-group.css

@@ -0,0 +1,28 @@
+/* Toggle Group, joined (spacing 0): only the outer corners are rounded, and outline items share one border instead of
+   two. The same rules as registry/src/ui/toggle-group/toggle-group.css.json; --toggle-radius is set by the item's size
+   (inc/components/toggle.php). */
+[data-slot="toggle-group"][data-spacing="0"] > [data-slot="toggle-group-item"] {
+  border-radius: 0;
+}
+[data-slot="toggle-group"][data-spacing="0"][data-orientation="horizontal"] > [data-slot="toggle-group-item"]:first-child {
+  border-start-start-radius: var(--toggle-radius);
+  border-end-start-radius: var(--toggle-radius);
+}
+[data-slot="toggle-group"][data-spacing="0"][data-orientation="horizontal"] > [data-slot="toggle-group-item"]:last-child {
+  border-start-end-radius: var(--toggle-radius);
+  border-end-end-radius: var(--toggle-radius);
+}
+[data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] > [data-slot="toggle-group-item"]:first-child {
+  border-start-start-radius: var(--toggle-radius);
+  border-start-end-radius: var(--toggle-radius);
+}
+[data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] > [data-slot="toggle-group-item"]:last-child {
+  border-end-start-radius: var(--toggle-radius);
+  border-end-end-radius: var(--toggle-radius);
+}
+[data-slot="toggle-group"][data-spacing="0"][data-orientation="horizontal"] > [data-slot="toggle-group-item"][data-variant="outline"]:not(:first-child) {
+  border-inline-start-width: 0;
+}
+[data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] > [data-slot="toggle-group-item"][data-variant="outline"]:not(:first-child) {
+  border-block-start-width: 0;
+}