@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,80 @@
+/* The site header on core blocks (B5; spec: components/header/spec.md): parts/header.html and the header-inline /
+   header-stacked patterns. Mirrors registry/src/blocks/header-*. Core's navigation overlay (src/core-navigation.css)
+   is the mobile menu; it switches at core's own 600px. */
+
+/* Announcement (Header/Inline): one centred message on the muted surface (baselineSurface), 8px of block padding */
+.wp-block-group.bl-announcement {
+  padding-block: calc(var(--spacing, 0.25rem) * 2);
+  font-size: var(--bl-text-sm, 0.875rem);
+  line-height: var(--bl-text-sm--line-height, 1.25rem);
+}
+.wp-block-group.bl-announcement > * {
+  margin-block: 0;
+}
+.wp-block-group.bl-announcement a {
+  color: var(--foreground);
+  font-weight: 600;
+  text-decoration: none;
+}
+.wp-block-group.bl-announcement a:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+/* The bar: Section > Container (constrained, wide) with 16px of block padding and a bottom rule */
+.wp-block-group.bl-header-bar {
+  padding-block: calc(var(--spacing, 0.25rem) * 4);
+  border-bottom: 1px solid var(--border);
+}
+.wp-block-group.bl-header-row {
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+.wp-block-group.bl-header-row > * {
+  margin-block: 0;
+}
+.wp-block-group.bl-header-row .wp-block-site-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.wp-block-group.bl-header-actions {
+  gap: calc(var(--spacing, 0.25rem) * 4);
+}
+
+/* Header/Inline: the navigation takes the space between the title and the actions and centres in it; once core
+   folds it into its menu button, the button comes first (Figma's mobile: menu, then logo) */
+.wp-block-group.bl-header-row > .bl-header-nav {
+  flex: 1 1 auto;
+}
+@media (max-width: 599px) {
+  .wp-block-group.bl-header-row > .bl-header-nav {
+    flex: 0 0 auto;
+    order: -1;
+  }
+}
+
+/* Header/Stacked: the navigation row below the bar; below 600px it goes and the first row's menu button takes over */
+.wp-block-group.bl-header-nav-row {
+  padding-block: calc(var(--spacing, 0.25rem) * 2);
+  border-bottom: 1px solid var(--border);
+}
+.wp-block-group.bl-header-row > .bl-header-nav-mobile {
+  flex: 0 0 auto;
+}
+@media (min-width: 600px) {
+  .wp-block-group.bl-header-row > .bl-header-nav-mobile {
+    display: none;
+  }
+}
+@media (max-width: 599px) {
+  .wp-block-group.bl-header-nav-row {
+    display: none;
+  }
+}
+.wp-block-group.bl-header-row > .bl-header-actions {
+  margin-inline-start: auto;
+}
+
+/* Search in a dialog (core/search, block style dialog): the dialog holds core's form as is */
+.bl-search-dialog dialog .wp-block-search {
+  margin: 0;
+}

package/templates/wordpress/theme/src/icons.generated.css

@@ -0,0 +1,16 @@
+/* Generated by tokens/icons.mjs (baseline-tokens icons) from tokens/icons/vocabulary.json (active set: material-symbols). Do not edit. */
+/* Glyphs a stylesheet has to draw itself, as mask images. Tint them with the element's own color:
+     mask-image: var(--bl-icon-check); mask-repeat: no-repeat; mask-size: 100% 100%;
+     background-color: var(--primary-foreground);
+   They follow the active icon set, so a designer switching sets moves these too. */
+:root {
+  --bl-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m9.55%2015.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175%209.2q-.3.3-.7.3t-.7-.3L4.55%2013q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-minus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%2013q-.425%200-.712-.288T5%2012t.288-.712T6%2011h12q.425%200%20.713.288T19%2012t-.288.713T18%2013z%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11%2013H6q-.425%200-.712-.288T5%2012t.288-.712T6%2011h5V6q0-.425.288-.712T12%205t.713.288T13%206v5h5q.425%200%20.713.288T19%2012t-.288.713T18%2013h-5v5q0%20.425-.288.713T12%2019t-.712-.288T11%2018z%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.625%2014.913q-.175-.063-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9%203.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6%204.6q-.15.15-.325.213t-.375.062t-.375-.062%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-chevron-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m12%2010.8l-3.9%203.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6%204.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-chevron-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m10.8%2012l3.9%203.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425%2012t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-chevron-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.6%2012L8.7%208.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6%204.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6%204.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-more-horizontal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6%2014q-.825%200-1.412-.587T4%2012t.588-1.412T6%2010t1.413.588T8%2012t-.587%201.413T6%2014m6%200q-.825%200-1.412-.587T10%2012t.588-1.412T12%2010t1.413.588T14%2012t-.587%201.413T12%2014m6%200q-.825%200-1.412-.587T16%2012t.588-1.412T18%2010t1.413.588T20%2012t-.587%201.413T18%2014%22%2F%3E%3C%2Fsvg%3E");
+  --bl-icon-loader: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.125%2021.213q-1.825-.788-3.187-2.15t-2.15-3.188T2%2011.988t.788-3.875t2.15-3.175t3.187-2.15T12%202q.425%200%20.713.288T13%203t-.288.713T12%204Q8.675%204%206.337%206.338T4%2012t2.338%205.663T12%2020t5.663-2.337T20%2012q0-.425.288-.712T21%2011t.713.288T22%2012q0%202.05-.788%203.875t-2.15%203.188t-3.175%202.15t-3.875.787t-3.887-.787%22%2F%3E%3C%2Fsvg%3E");
+}

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

@@ -0,0 +1,105 @@
+/* Input Group on WordPress (spec: components/input-group/spec.md). No core block wraps a control in a box, so
+   ADR-0018's ladder ends at element styling — but core/search with `buttonPosition: "button-inside"` renders
+   exactly this shape, a field with a button attached inside one border, and it is the one real group in core.
+   This file gives it the component's look. Mirrors registry/src/ui/input-group/input-group.tsx.
+
+   The group owns the box and the control inside goes borderless, which is the whole idea: without this the
+   input draws its own border inside the wrapper's and you get a box in a box.
+
+   `button-outside` is left alone on purpose. That is two controls side by side, which is Button Group or plain
+   layout, not this component (spec: the opening paragraph). field.css keeps giving it the field gap. */
+
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  height: var(--bl-input-group-md-height);
+  padding: 0;
+  border: var(--bl-input-group-md-border-width) solid var(--input);
+  border-radius: var(--bl-input-group-md-radius);
+  background-color: transparent;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+
+/* The group reacts to the control rather than taking a state of its own: :focus-within and :has() do the work,
+   which is why there is no state class here (spec: States). */
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper):focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper):has(:disabled) {
+  opacity: 0.5;
+}
+
+/* The control goes borderless and gives up its own ring: the group draws both. */
+:where(.wp-block-search__button-inside .wp-block-search__input) {
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+  padding-inline: var(--bl-input-group-md-padding-x);
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+:where(.wp-block-search__button-inside .wp-block-search__input):focus-visible {
+  border: 0;
+  box-shadow: none;
+}
+
+/* The button is the addon chip — Button secondary at xs, reading Button's own tokens rather than repeating
+   them, which is what the Figma private part draws (spec: Addons).
+
+   These selectors are deliberately NOT wrapped in :where(), unlike everything above. theme.json's
+   `elements.button` styles every .wp-element-button — which the search button is — giving it primary colours,
+   the md radius, md font size, md padding and a primary hover. WordPress emits that at roughly
+   `:root :where(.wp-element-button)`, so a :where()-wrapped rule here is (0,0,0) and loses every property,
+   including the hover. Two real classes is (0,2,0) and wins. Every property theme.json sets has to be
+   answered, including :hover and :focus, or the button reverts mid-interaction. */
+.wp-block-search__button-inside .wp-block-search__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bl-button-xs-gap);
+  height: var(--bl-button-xs-height);
+  margin-inline: 0 calc(var(--bl-input-group-md-padding-y) + 0.3rem);
+  padding: 0 var(--bl-button-xs-padding-x);
+  border: 1px solid transparent;
+  border-radius: var(--bl-button-xs-radius);
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-button-xs-font-size);
+  line-height: var(--bl-button-xs-line-height);
+  font-weight: var(--bl-button-font-weight);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+/* theme.json sets a primary :hover and a primary :focus, so both are answered here with Button's secondary
+   hover — the same color-mix core-button.css uses, so the chip and a real secondary Button agree. */
+.wp-block-search__button-inside .wp-block-search__button:hover,
+.wp-block-search__button-inside .wp-block-search__button:focus {
+  background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+  color: var(--secondary-foreground);
+}
+
+.wp-block-search__button-inside .wp-block-search__button:focus-visible {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  outline: none;
+}
+
+/* An icon-only search button is square at the chip's height, the same rule Button's icon sizes follow. */
+.wp-block-search__button-inside .wp-block-search__button.has-icon {
+  width: var(--bl-button-xs-height);
+  padding-inline: 0;
+}
+
+.wp-block-search__button-inside .wp-block-search__button svg {
+  width: var(--bl-control-addon-icon-size);
+  height: var(--bl-control-addon-icon-size);
+}

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

@@ -0,0 +1,116 @@
+/* Input on WordPress (spec: components/input/spec.md). There is no core input block — the core block reference
+   lists none — so ADR-0018's ladder ends at element styling and the native control *is* the component. Two
+   consumers share these values: the theme's own controls (comment form, core/search, core/post-password) here,
+   and Gravity Forms through its CSS API in gravityforms.css. Both resolve to the same --bl-input-md-* variables,
+   so one designer change in Figma moves both. Mirrors registry/src/ui/input/input.tsx. */
+
+:where(
+  input[type="text"],
+  input[type="email"],
+  input[type="url"],
+  input[type="tel"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"],
+  input[type="file"],
+  .wp-block-search__input
+) {
+  width: 100%;
+  min-width: 0;
+  height: var(--bl-input-md-height);
+  padding: var(--bl-input-md-padding-y) var(--bl-input-md-padding-x);
+  border: var(--bl-input-md-border-width) solid var(--input);
+  border-radius: var(--bl-input-md-radius);
+  background-color: transparent;
+  color: var(--foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-input-md-font-size);
+  line-height: var(--bl-input-md-line-height);
+  /* type=file lays its button and "no file chosen" label out as in-flow content, which otherwise sits at the
+     top of a fixed-height box; align-content centres block-container content without touching display. */
+  align-content: center;
+  /* ... and block padding would push that in-flow button past the bottom of the box, so type=file drops it
+     below. Same carve-out as gravityforms.css and the other three platforms. */
+  outline: none;
+  transition: color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+/* 16px on phones stops iOS zooming on focus; the token size from the md breakpoint up (shadcn's rule). */
+@media (max-width: 767px) {
+  :where(
+    input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"],
+    input[type="password"], input[type="search"], input[type="date"], input[type="file"], .wp-block-search__input
+  ) {
+    font-size: 1rem;
+  }
+}
+
+:where(input, .wp-block-search__input)::placeholder {
+  color: var(--muted-foreground);
+}
+
+:where(input, .wp-block-search__input):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 input looks the same as one
+   inside a Gravity Forms field (spec: States). */
+:where(input, .wp-block-search__input)[aria-invalid="true"] {
+  border-color: var(--destructive);
+  color: var(--destructive);
+}
+:where(input, .wp-block-search__input)[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+}
+
+:where(input, .wp-block-search__input):disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* the browser's own file button, styled as Button secondary xs — Figma nests a real Button instance there */
+:where(input[type="file"]) {
+  padding-block: 0;
+  /* Input Group's start padding for a leading button (input-group.tsx), so the file button sits like one */
+  padding-inline-start: calc(var(--bl-input-group-md-padding-x) - 0.3rem);
+}
+
+/* The number spinner is browser chrome Figma does not draw, and in Blink it appears on hover and shifts the
+   value. Hidden on every platform (spec: components/input/spec.md). */
+:where(input[type="number"]) {
+  appearance: textfield;
+}
+
+:where(input[type="number"])::-webkit-inner-spin-button,
+:where(input[type="number"])::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+:where(input[type="file"])::file-selector-button {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: var(--bl-input-md-gap);
+  height: var(--bl-button-xs-height);
+  padding-inline: var(--bl-button-xs-padding-x);
+  border: 0;
+  border-radius: var(--bl-button-xs-radius);
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  font-family: inherit;
+  font-size: var(--bl-button-xs-font-size);
+  font-weight: var(--bl-button-font-weight);
+  cursor: pointer;
+}
+
+/* core/search puts the input in a flex wrapper with its own button; keep the field filling the row. */
+.wp-block-search .wp-block-search__input {
+  flex-grow: 1;
+}

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

@@ -0,0 +1,7 @@
+/* acf/item-group (spec: components/item/spec.md). ACF wraps InnerBlocks in div.acf-innerblocks-container on the front
+   end and the editor adds its own layout wrappers, so the group's flex gap would space one wrapper instead of the items.
+   The wrappers step out of the layout (display: contents) and the items become the group's flex children, as Avatar
+   Group does (src/core-avatar.css). The editor's per-block wrapper (div.wp-block) is the item itself in apiVersion 3. */
+.wp-block-acf-item-group :is(.acf-innerblocks-container, .block-editor-inner-blocks, .block-editor-block-list__layout) {
+  display: contents;
+}