Mercurial

diff design_system/src/catalog.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/catalog.css	Wed Aug 05 05:25:40 2026 -0700
@@ -0,0 +1,401 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: var(--zenbu-sys-color-surface-canvas);
+  color: var(--zenbu-sys-color-text-primary);
+  font-family: var(--zenbu-sys-font-family-ui);
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.catalog-shell {
+  display: grid;
+  grid-template-columns: 17rem minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.catalog-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: auto;
+  padding: var(--zenbu-sys-space-container);
+  border-right: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
+  background: var(--zenbu-sys-color-surface-default);
+}
+
+.catalog-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zenbu-sys-space-control);
+  color: inherit;
+  font-size: var(--zenbu-sys-font-size-lg);
+  font-weight: 850;
+  text-decoration: none;
+}
+
+.catalog-search {
+  width: 100%;
+  margin-top: var(--zenbu-sys-space-container);
+}
+
+.catalog-search > zen-icon {
+  align-self: center;
+  margin-inline-start: var(--zenbu-sys-space-control);
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+.catalog-search > kbd {
+  align-self: center;
+  margin-inline-end: var(--zenbu-sys-space-related);
+  padding: 0 var(--zenbu-sys-space-icon-label);
+  border: 1px solid var(--zenbu-sys-color-border-subtle);
+  border-radius: var(--zenbu-sys-radius-control-small);
+  color: var(--zenbu-sys-color-text-secondary);
+  font: var(--zenbu-sys-font-size-xs)/1.5 var(--zenbu-sys-font-family-code);
+}
+
+.search-status {
+  min-height: 1.25rem;
+  margin: var(--zenbu-sys-space-icon-label) 0 0;
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
+.catalog-mark {
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
+  border-radius: 50%;
+  background: var(--zenbu-sys-color-action-primary-background);
+  color: var(--zenbu-sys-color-action-primary-foreground);
+}
+
+.catalog-sidebar h2 {
+  margin: var(--zenbu-sys-space-content) 0 var(--zenbu-sys-space-related);
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-xs);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.catalog-nav {
+  display: grid;
+  gap: var(--zenbu-sys-space-icon-label);
+}
+
+.catalog-nav a {
+  padding: var(--zenbu-sys-space-related) var(--zenbu-sys-space-control);
+  border-radius: var(--zenbu-sys-radius-control-small);
+  color: inherit;
+  text-decoration: none;
+}
+
+.catalog-nav a[hidden],
+.component-grid > a[hidden] {
+  display: none;
+}
+
+.catalog-nav a:hover,
+.catalog-nav a[aria-current] {
+  background: var(--zenbu-sys-color-action-primary-background);
+  color: var(--zenbu-sys-color-action-primary-foreground);
+}
+
+.theme-toggle {
+  width: 100%;
+  margin-top: var(--zenbu-sys-space-content);
+  padding: var(--zenbu-sys-space-related);
+  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
+  border-radius: var(--zenbu-sys-radius-control);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.theme-toggle-wrap {
+  display: flex;
+  width: 100%;
+}
+
+.catalog-main {
+  width: min(100%, var(--zenbu-sys-width-page));
+  min-width: 0;
+  padding: var(--zenbu-sys-space-section) clamp(1rem, 5vw, 5rem);
+  outline: none;
+}
+
+.catalog-page {
+  min-width: 0;
+}
+
+.catalog-page[hidden] {
+  display: none;
+}
+
+.page-heading {
+  max-width: 52rem;
+  margin-bottom: var(--zenbu-sys-space-section);
+}
+
+.eyebrow {
+  margin: 0 0 var(--zenbu-sys-space-related);
+  color: var(--zenbu-sys-color-info-foreground);
+  font-size: var(--zenbu-sys-font-size-sm);
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.page-heading h1 {
+  margin: 0 0 var(--zenbu-sys-space-control);
+  font-size: var(--zenbu-sys-type-page-title-size);
+  line-height: 1.05;
+}
+
+.page-heading p {
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-lg);
+}
+
+.principles,
+.component-grid,
+.token-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: var(--zenbu-sys-space-container);
+}
+
+.principle,
+.token-group {
+  padding: var(--zenbu-sys-space-container);
+  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
+  border-radius: var(--zenbu-sys-radius-container);
+  background: var(--zenbu-sys-color-surface-default);
+}
+
+.principle h2,
+.token-group h2 {
+  margin-top: 0;
+}
+
+.component-grid a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.component-grid zen-card {
+  height: 100%;
+}
+
+.component-grid code {
+  color: var(--zenbu-sys-color-info-foreground);
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
+.component-grid p {
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+.swatch-list {
+  display: grid;
+  gap: var(--zenbu-sys-space-related);
+  margin: 0;
+}
+
+.swatch-list div {
+  display: grid;
+  grid-template-columns: 2rem 1fr;
+  align-items: center;
+  gap: var(--zenbu-sys-space-related);
+}
+
+.swatch-list dt,
+.swatch-list dd {
+  margin: 0;
+  font-family: var(--zenbu-sys-font-family-code);
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
+.swatch {
+  --zenbu-color-swatch: transparent;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--zenbu-sys-color-border-default);
+  border-radius: 50%;
+  background: var(--zenbu-color-swatch);
+}
+
+.token-group-wide {
+  grid-column: span 2;
+}
+
+.token-group > p {
+  color: var(--zenbu-sys-color-text-secondary);
+}
+
+.palette-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+  gap: var(--zenbu-sys-space-control);
+}
+
+.palette-grid > div {
+  display: grid;
+  gap: var(--zenbu-sys-space-icon-label);
+}
+
+.palette-grid span {
+  --zenbu-color-swatch: transparent;
+  min-height: 3.5rem;
+  border: 1px solid var(--zenbu-sys-color-border-subtle);
+  border-radius: var(--zenbu-sys-radius-control);
+  background: var(--zenbu-color-swatch);
+}
+
+.palette-grid code {
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
+.data-palette {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(1.75rem, 1fr));
+  min-height: 4rem;
+  overflow: hidden;
+  border: 1px solid var(--zenbu-sys-color-border-default);
+  border-radius: var(--zenbu-sys-radius-control);
+}
+
+.data-palette span {
+  --zenbu-color-swatch: transparent;
+  background: var(--zenbu-color-swatch);
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: var(--zenbu-sys-space-control);
+}
+
+.icon-grid figure {
+  display: grid;
+  min-height: 7rem;
+  margin: 0;
+  padding: var(--zenbu-sys-space-control);
+  place-items: center;
+  gap: var(--zenbu-sys-space-related);
+  border: 1px solid var(--zenbu-sys-color-border-subtle);
+  border-radius: var(--zenbu-sys-radius-control);
+  background: var(--zenbu-sys-color-surface-default);
+}
+
+.icon-grid figcaption {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--zenbu-sys-color-text-secondary);
+  font-size: var(--zenbu-sys-font-size-xs);
+  text-overflow: ellipsis;
+}
+
+zen-story {
+  display: block;
+  max-width: 100%;
+  margin-bottom: var(--zenbu-sys-space-content);
+  overflow: hidden;
+  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
+  border-radius: var(--zenbu-sys-radius-container);
+  background: var(--zenbu-sys-color-surface-default);
+}
+
+zen-story > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zenbu-sys-space-control);
+  padding: var(--zenbu-sys-space-control) var(--zenbu-sys-space-group);
+  border-bottom: 1px solid var(--zenbu-sys-color-border-default);
+}
+
+zen-story > header h3 {
+  margin: 0;
+}
+
+zen-story > header button {
+  padding: var(--zenbu-sys-space-icon-label) var(--zenbu-sys-space-related);
+  border: 0;
+  border-radius: var(--zenbu-sys-radius-control-small);
+  background: transparent;
+  color: var(--zenbu-sys-color-info-foreground);
+  cursor: pointer;
+}
+
+.story-canvas {
+  min-height: 8rem;
+  padding: clamp(1rem, 4vw, 3rem);
+  background:
+    linear-gradient(90deg, var(--zenbu-sys-color-gridline) 1px, transparent 1px),
+    linear-gradient(var(--zenbu-sys-color-gridline) 1px, transparent 1px);
+  background-size: 1rem 1rem;
+}
+
+zen-story > pre {
+  max-height: 24rem;
+  overflow: auto;
+  margin: 0;
+  padding: var(--zenbu-sys-space-group);
+  border-top: 1px solid var(--zenbu-sys-color-border-default);
+  background: var(--zenbu-sys-color-code-surface);
+  color: var(--zenbu-sys-color-code-text);
+  font: var(--zenbu-sys-font-size-sm)/1.55 var(--zenbu-sys-font-family-code);
+}
+
+.demo-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: var(--zenbu-sys-space-container);
+}
+
+@media (max-width: 760px) {
+  .catalog-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .catalog-sidebar {
+    position: static;
+    width: 100%;
+    height: auto;
+    border-right: 0;
+    border-bottom: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
+  }
+
+  .catalog-nav {
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  }
+
+  .catalog-main {
+    padding: var(--zenbu-sys-space-content) var(--zenbu-sys-space-group);
+  }
+
+  .token-group-wide {
+    grid-column: auto;
+  }
+
+  .data-palette {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}