@ponchia/ui 0.2.2 → 0.3.1

package/css/site.css

@@ -0,0 +1,295 @@
+/* ==========================================================================
+   site — first-class shell for content / marketing sites.
+
+   The framework already shipped an admin shell (app.css); this is its
+   public-site counterpart, promoted into the typed `ui-*` contract so
+   every consumer stops re-hand-rolling a container + header + nav +
+   footer + skip-link. Nothing-flat, logical properties, the dot active
+   cue. Active nav state is driven by `aria-current` (no extra class).
+   ========================================================================== */
+
+/* --- Container — centred reading measure + gutters --- */
+
+.ui-container {
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: var(--container, 72rem);
+  padding-inline: var(--space-md);
+}
+
+.ui-container--narrow {
+  max-inline-size: var(--container-narrow, 44rem);
+}
+
+/* --- Skip link — first focusable, jumps to main --- */
+
+.ui-skiplink {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  inset-block-start: -4rem;
+  inset-inline-start: var(--space-md);
+  padding: 0.7rem 1rem;
+  position: fixed;
+  z-index: var(--z-toast);
+}
+
+.ui-skiplink:focus {
+  inset-block-start: var(--space-md);
+}
+
+/* --- Header — brand · nav · actions --- */
+
+.ui-siteheader {
+  align-items: center;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: space-between;
+  padding-block: var(--space-sm);
+}
+
+.ui-siteheader__brand {
+  align-items: center;
+  color: var(--text);
+  display: inline-flex;
+  font-family: var(--display);
+  font-size: var(--text-lg);
+  gap: 0.5rem;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-siteheader__brand::before {
+  background: var(--accent);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  content: '';
+  flex: 0 0 auto;
+  inline-size: 0.5rem;
+}
+
+.ui-siteheader__actions {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-xs);
+}
+
+/* --- Nav — desktop inline, dot active cue via aria-current --- */
+
+.ui-sitenav {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+}
+
+.ui-sitenav a {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.45rem;
+  letter-spacing: var(--tracking-wide);
+  padding: 0.4rem 0.6rem;
+  text-transform: uppercase;
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-sitenav a::before {
+  background: currentColor;
+  border-radius: 50%;
+  block-size: 0.32rem;
+  content: '';
+  inline-size: 0.32rem;
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-spring);
+}
+
+.ui-sitenav a[aria-current] {
+  color: var(--accent-text);
+}
+
+.ui-sitenav a[aria-current]::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@media (hover: hover) {
+  .ui-sitenav a:hover {
+    color: var(--text);
+  }
+
+  .ui-sitenav a:hover::before {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* --- Mobile menu — native <details>, no JS required --- */
+
+.ui-sitemenu {
+  display: none;
+  position: relative;
+}
+
+.ui-sitemenu > summary {
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  gap: 0.4rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  min-block-size: 2.4rem;
+  padding: 0.42rem 0.7rem;
+  text-transform: uppercase;
+}
+
+.ui-sitemenu > summary::-webkit-details-marker {
+  display: none;
+}
+
+.ui-sitemenu[open] > summary {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.ui-sitemenu__panel {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  display: grid;
+  gap: 0.15rem;
+  inset-block-start: calc(100% + 0.4rem);
+  inset-inline-end: 0;
+  min-inline-size: 12rem;
+  padding: 0.4rem;
+  position: absolute;
+  z-index: var(--z-overlay);
+}
+
+/* Below the breakpoint the inline nav collapses into the menu. */
+@media (max-width: 720px) {
+  .ui-siteheader .ui-sitenav {
+    display: none;
+  }
+
+  .ui-sitemenu {
+    display: block;
+  }
+
+  .ui-sitemenu .ui-sitenav {
+    display: grid;
+  }
+}
+
+/* --- Footer --- */
+
+.ui-sitefooter {
+  align-items: center;
+  border-block-start: 1px solid var(--line);
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: var(--text-sm);
+  gap: var(--space-sm);
+  justify-content: space-between;
+  margin-block-start: var(--space-2xl);
+  padding-block: var(--space-md);
+}
+
+.ui-sitefooter__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+}
+
+.ui-sitefooter__links a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  text-underline-offset: 0.2rem;
+  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
+}
+
+@media (hover: hover) {
+  .ui-sitefooter__links a:hover {
+    text-decoration-color: var(--accent);
+  }
+}
+
+/* --- Tags — neutral, wrapping content labels (NOT ui-chip, which is a
+   single interactive token). Use a <ul>. --- */
+
+.ui-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-tag {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-size: var(--text-xs);
+  padding: 0.28rem 0.6rem;
+}
+
+.ui-tag--accent {
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
+  color: var(--accent-text);
+}
+
+/* --- Meta row — date · author · read-time, dot-separated --- */
+
+.ui-meta {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.55rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-meta__item {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+}
+
+.ui-meta__item:not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.22rem;
+  content: '';
+  inline-size: 0.22rem;
+}

package/css/table.css

@@ -100,3 +100,62 @@
   padding: 2rem;
   text-align: center;
 }
+
+/* --- Sortable headers (wired by initTableSort) --- */
+.ui-table__sort {
+  align-items: center;
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 0.4rem;
+  letter-spacing: inherit;
+  padding: 0;
+  text-transform: inherit;
+  inline-size: 100%;
+}
+
+.ui-table__sort::after {
+  content: '↕';
+  opacity: 0.4;
+}
+
+.ui-table th[aria-sort='ascending'] .ui-table__sort::after {
+  content: '↑';
+  opacity: 1;
+}
+
+.ui-table th[aria-sort='descending'] .ui-table__sort::after {
+  content: '↓';
+  opacity: 1;
+}
+
+/* --- Row selection --- */
+.ui-table__select {
+  inline-size: 1px; /* shrink-to-fit checkbox column */
+  white-space: nowrap;
+}
+
+.ui-table--selectable tbody tr[aria-selected='true'] td {
+  background: var(--bg-accent);
+}
+
+/* --- Bulk-action toolbar --- */
+.ui-table__toolbar {
+  align-items: center;
+  border: 1px solid var(--line);
+  border-block-end: 0;
+  border-start-start-radius: var(--radius-md);
+  border-start-end-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+}
+
+/* --- Loading state: set aria-busy + .ui-table--loading on the wrap --- */
+.ui-table--loading {
+  opacity: 0.6;
+  pointer-events: none;
+}

package/css/tokens.css

@@ -52,6 +52,54 @@
   --dot-size: 2px;
   --dot-gap: 14px;
 
+  /* Stacking-context scale. Replaces scattered magic z-indexes so
+     consumers can reason about (and override) layering coherently.
+     Values match the prior literals — purely a refactor, no visual
+     change. */
+  --z-base: 0;
+  --z-raised: 10;
+  --z-sticky: 20;
+  --z-overlay: 30;
+  --z-popover: 50;
+  --z-toast: 60;
+
+  /* Accent ramp — a stepped family for charts / data-viz / multi-state
+     surfaces (the use case tokens/index.js advertises). Derived from the
+     single --accent knob via color-mix against the theme bg, so it
+     re-brands and theme-adapts automatically; no per-theme duplication. */
+  --accent-1: color-mix(in srgb, var(--accent) 8%, var(--bg));
+  --accent-2: color-mix(in srgb, var(--accent) 16%, var(--bg));
+  --accent-3: color-mix(in srgb, var(--accent) 32%, var(--bg));
+  --accent-4: color-mix(in srgb, var(--accent) 60%, var(--bg));
+  --accent-5: var(--accent);
+  --accent-6: var(--accent-strong);
+
+  /* Neutral surface ramp (low → high contrast against --bg). */
+  --surface-1: var(--bg);
+  --surface-2: var(--bg-elevated);
+  --surface-3: var(--panel);
+  --surface-4: var(--panel-soft);
+  --surface-5: var(--line);
+  --surface-6: var(--line-strong);
+
+  /* Semantic tier — stable, prefixed aliases over the (shorter,
+     legacy) primitive names. New consumer code should target these:
+     re-skinning one role no longer means chasing component internals.
+     The short names below stay as permanent back-compat aliases. */
+  --bronto-color-bg: var(--bg);
+  --bronto-color-surface: var(--panel);
+  --bronto-color-surface-raised: var(--panel-strong);
+  --bronto-color-border: var(--line);
+  --bronto-color-border-strong: var(--line-strong);
+  --bronto-color-text: var(--text);
+  --bronto-color-text-muted: var(--text-dim);
+  --bronto-color-action: var(--accent);
+  --bronto-color-on-action: var(--button-text);
+  --bronto-color-focus: var(--focus-ring);
+  --bronto-color-success: var(--success);
+  --bronto-color-warning: var(--warning);
+  --bronto-color-danger: var(--danger);
+
   /* Aliases kept for back-compat with existing semantic classes */
   --surface: var(--panel);
   --surface-raised: var(--panel-strong);
@@ -80,21 +128,26 @@
   --text-dim: #686863;
   --accent: #d71921;
   --accent-strong: color-mix(in srgb, var(--accent) 83%, #000);
+  --accent-text: var(--accent-strong);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
   --success: #2f7d4f;
-  --success-soft: rgba(47, 125, 79, 0.12);
+  --success-soft: rgb(47, 125, 79, 0.12);
   --warning: #806414;
-  --warning-soft: rgba(128, 100, 20, 0.13);
+  --warning-soft: rgb(128, 100, 20, 0.13);
   --orange: #a85f32;
-  --orange-soft: rgba(168, 95, 50, 0.13);
+  --orange-soft: rgb(168, 95, 50, 0.13);
   --danger: #c01622;
-  --danger-soft: rgba(192, 22, 34, 0.1);
-  --code-bg: rgba(10, 10, 10, 0.05);
+  --danger-soft: rgb(192, 22, 34, 0.1);
+  --code-bg: rgb(10, 10, 10, 0.05);
   --button-text: #ffffff;
-  --field-dot: rgba(10, 10, 10, 0.16);
-  --field-dot-hot: rgba(10, 10, 10, 0.4);
+  --field-dot: rgb(10, 10, 10, 0.16);
+  --field-dot-hot: rgb(10, 10, 10, 0.4);
   --field-dot-accent: color-mix(in srgb, var(--accent) 78%, transparent);
-  --focus-ring: color-mix(in srgb, var(--accent) 50%, transparent);
+
+  /* Solid by default: this token drives every focus outline, so it must
+     clear the 3:1 non-text contrast minimum. Override per theme/subtree
+     to tune the ring without touching --accent. */
+  --focus-ring: var(--accent);
   --shadow: none;
   --shadow-raised: 0 0 0 1px var(--line-strong);
 }
@@ -126,21 +179,22 @@
     --text-dim: #858585;
     --accent: #ff3b41;
     --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
+    --accent-text: var(--accent-strong);
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
     --success: #4ec27e;
-    --success-soft: rgba(78, 194, 126, 0.14);
+    --success-soft: rgb(78, 194, 126, 0.14);
     --warning: #d8bd72;
-    --warning-soft: rgba(216, 189, 114, 0.14);
+    --warning-soft: rgb(216, 189, 114, 0.14);
     --orange: #d08c5b;
-    --orange-soft: rgba(208, 140, 91, 0.15);
+    --orange-soft: rgb(208, 140, 91, 0.15);
     --danger: #ff4d54;
-    --danger-soft: rgba(255, 77, 84, 0.15);
-    --code-bg: rgba(255, 255, 255, 0.05);
+    --danger-soft: rgb(255, 77, 84, 0.15);
+    --code-bg: rgb(255, 255, 255, 0.05);
     --button-text: #000000;
-    --field-dot: rgba(242, 242, 242, 0.14);
-    --field-dot-hot: rgba(242, 242, 242, 0.36);
+    --field-dot: rgb(242, 242, 242, 0.14);
+    --field-dot-hot: rgb(242, 242, 242, 0.36);
     --field-dot-accent: color-mix(in srgb, var(--accent) 82%, transparent);
-    --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent);
+    --focus-ring: var(--accent);
     --shadow: none;
     --shadow-raised: 0 0 0 1px var(--line-strong);
   }
@@ -162,21 +216,22 @@
   --text-dim: #858585;
   --accent: #ff3b41;
   --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
+  --accent-text: var(--accent-strong);
   --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
   --success: #4ec27e;
-  --success-soft: rgba(78, 194, 126, 0.14);
+  --success-soft: rgb(78, 194, 126, 0.14);
   --warning: #d8bd72;
-  --warning-soft: rgba(216, 189, 114, 0.14);
+  --warning-soft: rgb(216, 189, 114, 0.14);
   --orange: #d08c5b;
-  --orange-soft: rgba(208, 140, 91, 0.15);
+  --orange-soft: rgb(208, 140, 91, 0.15);
   --danger: #ff4d54;
-  --danger-soft: rgba(255, 77, 84, 0.15);
-  --code-bg: rgba(255, 255, 255, 0.05);
+  --danger-soft: rgb(255, 77, 84, 0.15);
+  --code-bg: rgb(255, 255, 255, 0.05);
   --button-text: #000000;
-  --field-dot: rgba(242, 242, 242, 0.14);
-  --field-dot-hot: rgba(242, 242, 242, 0.36);
+  --field-dot: rgb(242, 242, 242, 0.14);
+  --field-dot-hot: rgb(242, 242, 242, 0.36);
   --field-dot-accent: color-mix(in srgb, var(--accent) 82%, transparent);
-  --focus-ring: color-mix(in srgb, var(--accent) 55%, transparent);
+  --focus-ring: var(--accent);
   --shadow: none;
   --shadow-raised: 0 0 0 1px var(--line-strong);
 }