@cloudhal/cli 0.0.0-stage → 0.1.0

package/dist/assets/starters/blog/src/styles/features/chrome.css

@@ -0,0 +1,193 @@
+/*
+ * Site chrome (RFC-0025 §2): the header and footer from `resolveChrome`. The defaults (logo-left,
+ * static, content width, plain; a simple footer) reproduce the former header and footer.
+ */
+.ch-skip {
+  @apply sr-only;
+}
+.ch-skip:focus {
+  @apply not-sr-only fixed top-2 left-2 z-50 rounded bg-white px-3 py-2 text-sm font-medium text-zinc-900 shadow;
+}
+#main:focus {
+  outline: none;
+}
+.ch-header {
+  @apply relative z-30;
+}
+.ch-header__inner {
+  @apply mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-3 px-4 py-6;
+}
+.ch-header[data-width="wide"] .ch-header__inner {
+  @apply max-w-6xl;
+}
+.ch-header[data-width="full"] .ch-header__inner {
+  @apply max-w-none sm:px-8;
+}
+.ch-header__brand {
+  @apply shrink-0 text-lg font-semibold whitespace-nowrap;
+}
+.ch-header__nav,
+.ch-header__utility {
+  @apply flex flex-wrap gap-4 text-sm text-zinc-600;
+}
+.ch-header__utility {
+  @apply text-xs;
+}
+.ch-header__actions {
+  @apply flex items-center gap-3;
+}
+.ch-header__actions:empty {
+  display: none;
+}
+.ch-header__actions .ch-button {
+  @apply px-3 py-1.5 text-sm whitespace-nowrap;
+}
+/* Layouts: the nav in the middle; everything centered on its own rows; brand and actions apart. */
+@media (min-width: 768px) {
+  .ch-header[data-layout="logo-left-nav-center"] .ch-header__inner {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+  .ch-header[data-layout="logo-left-nav-center"] .ch-header__actions {
+    justify-self: end;
+  }
+  .ch-header[data-layout="split"] .ch-header__nav {
+    margin-inline-end: auto;
+  }
+  .ch-header[data-layout="split"] .ch-header__brand {
+    order: 2;
+    margin-inline-end: auto;
+  }
+  .ch-header[data-layout="split"] .ch-header__nav {
+    order: 1;
+  }
+  .ch-header[data-layout="split"] .ch-header__actions {
+    order: 3;
+  }
+}
+.ch-header[data-layout="centered"] .ch-header__inner {
+  @apply flex-col justify-center text-center;
+}
+.ch-header[data-layout="centered"] .ch-header__nav {
+  @apply justify-center;
+}
+/* Behaviors: sticky; hide-on-scroll and fixed are sticky too (the chrome module hides the first). */
+.ch-header:is([data-behavior="sticky"], [data-behavior="hide-on-scroll"], [data-behavior="fixed"]) {
+  position: sticky;
+  top: 0;
+  background: var(--ch-color-surface, #fff);
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
+}
+:root:has(
+  .ch-header:is([data-behavior="sticky"], [data-behavior="hide-on-scroll"], [data-behavior="fixed"])
+) {
+  scroll-padding-top: var(--ch-header-h);
+}
+/* Surfaces: the same color roles as bands. */
+:is(.ch-header, .ch-footer)[data-surface="muted"] {
+  background: var(--ch-color-surface-muted);
+}
+.ch-header[data-surface="raised"] {
+  background: var(--ch-color-surface-raised);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 6px 20px -6px rgb(0 0 0 / 0.12);
+}
+:is(.ch-header, .ch-footer)[data-surface="inverse"] {
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+.ch-header[data-surface="brand"] {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+:is(.ch-header, .ch-footer):is([data-surface="inverse"], [data-surface="brand"])
+  :is(.ch-header__nav, .ch-header__utility, .ch-footer__inner) {
+  color: inherit;
+}
+:is(.ch-header, .ch-footer):is([data-surface="inverse"], [data-surface="brand"]) a {
+  color: inherit;
+}
+.ch-logo {
+  @apply block w-auto;
+  height: 1.75rem;
+}
+.ch-logo[data-size="s"] {
+  height: 1.25rem;
+}
+.ch-logo[data-size="l"] {
+  height: 2.5rem;
+}
+.ch-logo[data-variant="dark"] {
+  display: none;
+}
+:root[data-ch-mode="dark"] .ch-logo[data-variant="light"] {
+  display: none;
+}
+:root[data-ch-mode="dark"] .ch-logo[data-variant="dark"] {
+  display: block;
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-ch-mode="auto"] .ch-logo[data-variant="light"] {
+    display: none;
+  }
+  :root[data-ch-mode="auto"] .ch-logo[data-variant="dark"] {
+    display: block;
+  }
+}
+.ch-footer__inner {
+  @apply mx-auto max-w-3xl px-4 py-8 text-xs text-zinc-500;
+}
+/* On the muted surface, the role checked against it (text-muted on surface-muted, 4.5:1). */
+.ch-footer[data-surface="muted"] :is(.ch-footer__inner, .ch-footer__tagline) {
+  color: var(--ch-color-text-muted);
+}
+.ch-footer:not([data-layout="simple"], [data-layout="minimal"]) .ch-footer__inner {
+  @apply max-w-6xl py-12;
+}
+.ch-footer__legal {
+  @apply flex flex-wrap items-center justify-between gap-4;
+}
+.ch-footer[data-layout="minimal"] .ch-footer__legal {
+  @apply justify-center;
+}
+.ch-footer__top {
+  @apply mb-8 grid gap-8 text-sm sm:grid-cols-2 lg:grid-cols-4;
+}
+.ch-footer__brand {
+  @apply text-base font-semibold text-zinc-900;
+}
+.ch-footer__tagline {
+  @apply mt-2 max-w-xs text-zinc-600;
+}
+.ch-footer__social {
+  @apply mt-3 flex flex-wrap gap-3;
+}
+.ch-footer__legal .ch-footer__social {
+  @apply mt-0;
+}
+.ch-footer__social a,
+.ch-footer__col a {
+  @apply hover:text-zinc-700;
+}
+.ch-footer__heading {
+  @apply mb-3 font-medium text-zinc-900;
+}
+.ch-footer__col ul {
+  @apply space-y-2;
+}
+.ch-footer__cta {
+  @apply mb-10 flex flex-wrap items-center justify-between gap-4 rounded-lg px-6 py-8;
+  background: var(--ch-color-surface-muted);
+}
+.ch-footer:is([data-surface="muted"], [data-surface="inverse"]) .ch-footer__cta {
+  background: var(--ch-color-surface-raised);
+  color: var(--ch-color-text);
+}
+.ch-footer__cta-heading {
+  @apply text-xl font-semibold text-zinc-900;
+}
+:is(.ch-footer)[data-surface="inverse"]
+  :is(.ch-footer__brand, .ch-footer__heading, .ch-footer__tagline, .ch-footer__cta-heading) {
+  color: inherit;
+}

package/dist/assets/starters/blog/src/styles/features/comments.css

@@ -0,0 +1,75 @@
+/* Reader comments (RFC-0007): `<Comments />` renders plain HTML; these rules only style it. */
+.cloudhal-comments {
+  @apply space-y-4 border-t border-zinc-200 py-8;
+}
+.cloudhal-comments h2 {
+  @apply text-2xl font-semibold;
+}
+.cloudhal-comment-list,
+.cloudhal-comment-replies {
+  @apply space-y-4;
+}
+.cloudhal-comment-replies {
+  @apply mt-4 border-l border-zinc-200 pl-4;
+}
+.cloudhal-comment-meta {
+  @apply flex flex-wrap items-baseline gap-2 text-sm text-zinc-500;
+}
+.cloudhal-comment-author {
+  @apply font-semibold text-zinc-900;
+}
+.cloudhal-comment-badge {
+  @apply rounded bg-zinc-100 px-1.5 text-xs text-zinc-700;
+}
+.cloudhal-comment-body {
+  @apply mt-1 space-y-2 leading-relaxed;
+}
+.cloudhal-comment-body a,
+.cloudhal-comment-context {
+  @apply underline underline-offset-4;
+}
+.cloudhal-comment-actions {
+  @apply mt-1 flex flex-wrap items-start gap-3 text-sm text-zinc-500;
+}
+.cloudhal-comment-actions summary,
+.cloudhal-comment-reply {
+  @apply cursor-pointer underline-offset-4 hover:underline;
+}
+.cloudhal-comment-removed > p {
+  @apply text-sm text-zinc-500 italic;
+}
+.cloudhal-comment-note {
+  @apply rounded border border-zinc-300 bg-zinc-50 p-3 text-sm;
+}
+.cloudhal-comment-form,
+.cloudhal-report-form {
+  @apply max-w-xl space-y-3;
+}
+.cloudhal-comment-form h3 {
+  @apply text-lg font-semibold;
+}
+.cloudhal-comment-form label,
+.cloudhal-report-form label {
+  @apply block text-sm font-medium;
+}
+.cloudhal-comment-form small,
+.cloudhal-comment-privacy {
+  @apply block text-xs text-zinc-500;
+}
+.cloudhal-comment-form :is(input, textarea),
+.cloudhal-report-form :is(input, textarea, select) {
+  @apply w-full rounded border border-zinc-300 px-2 py-1;
+}
+.cloudhal-comment-form [aria-invalid="true"] {
+  @apply border-red-600;
+}
+.cloudhal-comment-form button,
+.cloudhal-report-form button {
+  @apply rounded px-4 py-2 bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse);
+}
+.cloudhal-comment-form button[data-cancel-reply] {
+  @apply bg-zinc-200 text-zinc-900;
+}
+.cloudhal-comments-pages a {
+  @apply text-sm underline underline-offset-4;
+}

package/dist/assets/starters/blog/src/styles/features/icons.css

@@ -0,0 +1,70 @@
+/*
+ * RFC-0026: icons follow the text (1em, currentColor), sit on its baseline, flip right-to-left
+ * when they point, and stay visible in forced colors.
+ */
+.ch-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: -0.125em;
+}
+[dir="rtl"] .ch-icon[data-ch-mirror] {
+  transform: scaleX(-1);
+}
+@media (forced-colors: active) {
+  .ch-icon {
+    fill: CanvasText;
+  }
+  a .ch-icon,
+  button .ch-icon {
+    fill: currentColor;
+  }
+}
+.ch-footer__social {
+  @apply items-center;
+}
+.ch-social-link {
+  @apply inline-flex size-8 items-center justify-center rounded-full text-lg;
+}
+.ch-social-link:hover {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+
+/* RFC-0026: icons in surfaces — on their own, in buttons, badges and statistics. */
+.ch-icon-box {
+  /* w-fit: in a Stack or Card (a flex column) it keeps its own width, at the start. */
+  @apply inline-flex w-fit items-center justify-center text-2xl;
+}
+.ch-icon-box[data-size="s"] {
+  @apply text-base;
+}
+.ch-icon-box[data-size="l"] {
+  @apply text-4xl;
+}
+.ch-icon-box[data-size="xl"] {
+  @apply text-6xl;
+}
+.ch-icon-box[data-tone="brand"] {
+  color: var(--ch-color-brand);
+}
+.ch-icon-box[data-tone="accent"] {
+  color: var(--ch-color-accent);
+}
+.ch-icon-box[data-tone="success"] {
+  color: #15803d;
+}
+.ch-icon-box[data-tone="warning"] {
+  color: #b45309;
+}
+.ch-icon-box[data-tone="danger"] {
+  color: #b91c1c;
+}
+.ch-button:has(> .ch-button__icon) {
+  @apply inline-flex items-center gap-2;
+}
+.ch-badge > .ch-icon {
+  @apply mr-1;
+}
+.ch-stat__icon {
+  @apply mb-2 block text-3xl;
+  color: var(--ch-color-brand);
+}

package/dist/assets/starters/blog/src/styles/features/languages.css

@@ -0,0 +1,34 @@
+/* RFC-0033 §4: the language switcher (header action and footer list). */
+.ch-languages {
+  position: relative;
+}
+.ch-languages > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.ch-languages > ul {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: 20;
+  margin-block-start: 0.5rem;
+  min-inline-size: 10rem;
+  padding: 0.5rem;
+  border: 1px solid rgb(0 0 0 / 0.12);
+  border-radius: 0.5rem;
+  background: var(--ch-color-surface);
+}
+.ch-languages a,
+.ch-footer__languages a {
+  display: block;
+  padding-block: 0.25rem;
+}
+.ch-languages a[aria-current="true"],
+.ch-footer__languages a[aria-current="true"] {
+  font-weight: 600;
+}
+.ch-footer__languages ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin-block: 1rem;
+}

package/dist/assets/starters/blog/src/styles/features/live-surfaces.css

@@ -0,0 +1,235 @@
+/* Live surfaces (RFC-0020 §4): conditional components, inputs and action buttons. */
+.ch-node {
+  display: contents;
+}
+.ch-node[hidden] {
+  display: none;
+}
+/* An action button starts from the browser's button: reset it, then give each style its own look. */
+button.ch-button {
+  @apply cursor-pointer border-0 bg-transparent font-medium;
+  font-family: inherit;
+}
+button.ch-button--primary {
+  @apply text-(--ch-color-on-brand);
+  background: var(--ch-color-brand);
+}
+button.ch-button--secondary {
+  @apply border border-zinc-300 text-zinc-900;
+}
+.ch-toggle {
+  @apply inline-flex w-fit flex-wrap gap-1 rounded-lg bg-zinc-100 p-1;
+}
+.ch-toggle__option input {
+  @apply sr-only;
+}
+.ch-toggle__option span {
+  @apply block cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600;
+}
+.ch-toggle__option input:checked + span {
+  @apply bg-white text-zinc-900 shadow-sm;
+}
+.ch-toggle__option input:focus-visible + span {
+  @apply outline-2 outline-offset-2;
+}
+.ch-field {
+  @apply grid content-start gap-1.5;
+}
+.ch-field__label {
+  @apply text-sm font-medium;
+}
+.ch-select {
+  @apply w-full max-w-xs rounded-md border border-zinc-300 bg-white px-3 py-2;
+}
+.ch-slider {
+  @apply flex items-center gap-3;
+}
+.ch-slider input {
+  @apply w-full max-w-sm;
+  accent-color: var(--ch-color-brand);
+}
+.ch-slider__value {
+  @apply min-w-12 text-right font-medium tabular-nums;
+}
+/* RFC-0022 §2: local inputs. */
+.ch-input-wrap {
+  @apply flex w-full max-w-xs items-center gap-2;
+}
+.ch-input {
+  @apply w-full max-w-xs rounded-md border border-zinc-300 bg-white px-3 py-2 tabular-nums;
+}
+.ch-input[aria-invalid="true"] {
+  @apply border-red-600;
+}
+.ch-input__unit {
+  @apply shrink-0 text-sm text-zinc-600;
+}
+.ch-field__help {
+  @apply text-sm text-zinc-600;
+}
+[aria-invalid="true"] ~ .ch-field__help,
+.ch-input-wrap:has([aria-invalid="true"]) ~ .ch-field__help {
+  @apply text-red-700;
+}
+.ch-check {
+  @apply flex w-fit cursor-pointer items-center gap-2;
+}
+.ch-check input {
+  @apply size-4;
+  accent-color: var(--ch-color-brand);
+}
+.ch-radio {
+  @apply m-0 grid min-w-0 gap-1.5 border-0 p-0;
+}
+.ch-radio__options {
+  @apply flex flex-col gap-1.5;
+}
+.ch-radio__option {
+  @apply flex w-fit cursor-pointer items-center gap-2;
+}
+.ch-radio__option input {
+  accent-color: var(--ch-color-brand);
+}
+.ch-radio[data-variant="buttons"] .ch-radio__options {
+  @apply inline-flex w-fit flex-row flex-wrap gap-1 rounded-lg bg-zinc-100 p-1;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option input {
+  @apply sr-only;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option span {
+  @apply block min-h-9 rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option input:checked + span {
+  @apply bg-white text-zinc-900 shadow-sm;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option input:focus-visible + span {
+  @apply outline-2 outline-offset-2;
+}
+.ch-noscript {
+  @apply text-sm text-zinc-600;
+}
+
+/* RFC-0022 §3: charts. Six series colors from the brand color, each distinct at 3:1 on white. */
+:root {
+  --ch-chart-1: var(--ch-color-brand);
+  --ch-chart-2: #2563eb;
+  --ch-chart-3: #d97706;
+  --ch-chart-4: #059669;
+  --ch-chart-5: #db2777;
+  --ch-chart-6: #7c3aed;
+}
+.ch-chart {
+  @apply m-0 grid gap-3;
+}
+.ch-chart__title {
+  @apply text-base font-semibold;
+}
+.ch-chart__svg {
+  @apply block h-auto w-full;
+}
+.ch-chart__grid {
+  stroke: var(--ch-color-border);
+  stroke-width: 1;
+}
+.ch-chart__tick {
+  fill: var(--ch-color-text-muted);
+  font-size: 12px;
+}
+.ch-chart__total {
+  fill: currentColor;
+  font-size: 22px;
+  font-weight: 600;
+}
+.ch-chart__legend {
+  @apply m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0 text-sm;
+}
+.ch-chart__legend li {
+  @apply flex items-center gap-1.5;
+}
+.ch-chart__swatch {
+  @apply inline-block size-3 rounded-sm;
+}
+.ch-chart__caption,
+.ch-chart__empty {
+  @apply text-sm text-zinc-600;
+}
+.ch-chart__data summary {
+  @apply cursor-pointer text-sm text-zinc-600;
+}
+.ch-chart__data table {
+  @apply mt-2 w-full border-collapse text-sm tabular-nums;
+}
+.ch-chart__data th,
+.ch-chart__data td {
+  @apply border-b border-zinc-200 px-2 py-1 text-left;
+}
+
+/* RFC-0022 §4: tables. Below 480 px each row is a card whose cells carry their column's label. */
+.ch-table-wrap {
+  @apply w-full;
+}
+.ch-table {
+  @apply w-full border-collapse text-sm tabular-nums;
+}
+.ch-table caption {
+  @apply pb-2 text-left text-base font-semibold;
+}
+.ch-table th,
+.ch-table td {
+  @apply border-b border-zinc-200 px-3 py-2 text-left align-top;
+}
+.ch-table th {
+  @apply font-semibold text-zinc-600;
+}
+.ch-table [data-align="end"] {
+  @apply text-right;
+}
+.ch-table[data-striped="yes"] tbody tr:nth-child(even) {
+  @apply bg-zinc-50;
+}
+.ch-table tr[data-highlight="yes"] {
+  background: color-mix(in srgb, var(--ch-color-brand) 8%, transparent);
+}
+.ch-table tr[data-highlight="yes"] td:first-child {
+  box-shadow: inset 3px 0 0 var(--ch-color-brand);
+}
+@media (max-width: 480px) {
+  .ch-table thead {
+    @apply sr-only;
+  }
+  .ch-table caption {
+    @apply block w-full;
+  }
+  .ch-table,
+  .ch-table tbody,
+  .ch-table tr,
+  .ch-table td {
+    @apply block w-full;
+  }
+  .ch-table tr {
+    @apply mb-3 rounded-lg border border-zinc-200 px-3 py-1;
+  }
+  .ch-table td {
+    @apply flex justify-between gap-4 border-b border-zinc-100 px-0 text-right last:border-b-0;
+  }
+  .ch-table td::before {
+    @apply text-left font-medium text-zinc-600;
+    content: attr(data-label);
+  }
+  .ch-table tr[data-highlight="yes"] td:first-child {
+    box-shadow: none;
+  }
+}
+
+/*
+ * Corners of controls (src/settings.ts `radius`, RFC-0023 §3): buttons and single-line fields
+ * take `--ch-radius-control`, a pill at `full`; cards and bands keep the smaller radii. After
+ * the base rules, so they win.
+ */
+.ch-button,
+.ch-hero__cta,
+.ch-body
+  :is(input[type="text"], input[type="search"], input[type="number"], input[type="email"], select),
+.ch-body form button[type="submit"]:not(.sr-only) {
+  border-radius: var(--ch-radius-control, 0.25rem);
+}