@w6w/ui 0.0.0-stage → 0.1.1

package/src/styles/_tester.scss

@@ -0,0 +1,111 @@
+.w6w-testout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-testout-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+}
+/* Console output reads as a terminal — monospace + muted, distinct from Result. */
+.w6w-testout-console {
+  font-family: var(--w6w-font-mono);
+  color: var(--w6w-muted);
+  border-style: dashed;
+}
+
+/* Result / error box */
+.w6w-result {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  font-family: var(--w6w-font-mono);
+  font-size: 0.85em;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--w6w-text);
+}
+.w6w-result.w6w-error {
+  border-color: var(--w6w-danger);
+  color: var(--w6w-danger);
+}
+
+/* Host-embedded ActionTestForm (studio's ConnectionTesterModal wraps it in its
+   OWN full modal). The widget then fills that modal as a full-height flex column:
+   the params + saved-tests region scrolls, and the action bar is a bottom-pinned,
+   non-scrolling footer. These classes are only applied in `embedded` mode, so the
+   inline / own-pop-out layout is untouched. */
+.w6w-tester-embedded-root {
+  flex: 1;
+  min-height: 0;
+}
+.w6w-tester-embedded {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.w6w-tester-embedded-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.w6w-tester-embedded-cols {
+  display: flex;
+  gap: var(--w6w-sp-4);
+  align-items: flex-start;
+}
+.w6w-tester-embedded-main {
+  flex: 1;
+  min-width: 0;
+}
+.w6w-tester-embedded-rail {
+  width: 260px;
+  flex-shrink: 0;
+}
+/* The action bar as a pinned footer: kept out of the scroll region and separated
+   with a top border so Run / Save / Delete stay visible however long the params. */
+.w6w-tester-actions-footer {
+  margin-top: auto;
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-3);
+}
+
+/* ActionTestForm's OWN pop-out (`Modal size="full"`, the "Edit params" ⤢
+   toggle — not the host-embedded case above). T1.4.1 round 1 made `-full`'s
+   `overflow: hidden` live for the first time; the dialog itself no longer
+   scrolls, so at a realistic param count (15-23 is typical for a first-party
+   action, e.g. followupboss/search-people, youtube/search) content below the
+   fold became unreachable with zero scrollbar. This mirrors the
+   `.w6w-tester-embedded-scroll` mechanism above — flex:1/min-height:0 to fill
+   the dialog's remaining flex-column height, `overflow: auto` to own the
+   scrollbar — so the params + result (+ saved-tests rail) region scrolls
+   internally while the Run/Save/Delete action bar stays a pinned,
+   non-scrolling footer via the SAME `.w6w-tester-actions-footer` class. */
+.w6w-tester-popout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.w6w-tester-popout-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Uptime strip — one cell per day, "how has this service behaved lately" at a
+   glance. Colour comes from the same `--w6w-health-*` tokens as the health pill,
+   through the same single `--w6w-health-color` indirection (set once on the cell,
+   remapped by the per-state class below), so overriding a token restyles the pill
+   and the strip together.
+
+   Colour is never the only signal: the FILL HEIGHT encodes severity, so the row
+   stays readable in greyscale and for a colour-blind viewer — `ok` a short
+   baseline bar, `degraded` taller, `down` the full cell, and `unknown` a hatched
+   outline with no solid fill (nothing was measured: not a good day, not a bad
+   one). Each cell also carries a `title` with its day and state. */

package/src/styles/_tokens.scss

@@ -0,0 +1,160 @@
+/*
+ * @w6w/ui — styles for the pure-presentation components.
+ *
+ * Everything is namespaced under `.w6w-*` class names so this stylesheet
+ * won't collide with your app's CSS.
+ *
+ * THEMING
+ * -------
+ * The library ships a complete DEFAULT theme in BOTH light and dark:
+ *   - Light is the base.
+ *   - Dark applies automatically when the OS prefers dark
+ *     (`prefers-color-scheme: dark`).
+ *   - Either mode can be forced with `data-theme="light" | "dark"` on any
+ *     ancestor (usually <html>) — the same signal the JS components read
+ *     (AppIcon / CodeEditor / JsonEditor: explicit prop > data-theme > OS pref),
+ *     so CSS and components always agree.
+ *
+ * A HOST can override any subset of the tokens — set the ones you care about and
+ * the rest keep their themed defaults:
+ *
+ *   :root { --w6w-accent: #3355e6; }              // one token, both modes
+ *   html[data-theme="dark"] { --w6w-panel: #000 } // mode-specific
+ *
+ * Every default below is declared through `:where(...)` (specificity 0), so ANY
+ * host rule — even a plain `:root { ... }` — wins without !important. Tokens are
+ * defined on :root so every `.w6w-*` component inherits them out of the box.
+ */
+
+/* Light — the base defaults. */
+:where(:root) {
+  --w6w-bg: #f7f8fa;
+  --w6w-panel: #ffffff;
+  --w6w-panel-2: #f0f2f6;
+  --w6w-border: #d9dee5;
+  --w6w-text: #1a1d24;
+  --w6w-muted: #5f6875;
+  --w6w-accent: #3355e6;
+  --w6w-danger: #c1362f;
+  --w6w-success: #2e9e5b;
+  --w6w-health-ok: var(--w6w-success);
+  --w6w-health-degraded: #c77700;
+  --w6w-health-down: var(--w6w-danger);
+  --w6w-health-unknown: #5f6875;
+  --w6w-icon-swatch: #f0f2f6;
+  --w6w-code-comment: #6b7280;
+  --w6w-code-keyword: #8250df;
+  --w6w-code-string: #0a7b34;
+  --w6w-code-number: #b3541e;
+  --w6w-code-function: #1f6feb;
+  --w6w-code-punctuation: #5f6875;
+  --w6w-code-variable: #953800;
+  --w6w-radius: 10px;
+  --w6w-scheme: light;
+}
+
+/* Dark — followed automatically from the OS preference (unless a host has
+   forced a mode via data-theme, which is handled by the blocks below). */
+@media (prefers-color-scheme: dark) {
+  :where(:root) {
+    --w6w-bg: #0f1115;
+    --w6w-panel: #181b22;
+    --w6w-panel-2: #1f232c;
+    --w6w-border: #2a2f3a;
+    --w6w-text: #e6e8ee;
+    --w6w-muted: #9aa3b2;
+    --w6w-accent: #5b8cff;
+    --w6w-danger: #ff6b6b;
+    --w6w-success: #3fbf77;
+    --w6w-health-ok: var(--w6w-success);
+    --w6w-health-degraded: #f0a020;
+    --w6w-health-down: var(--w6w-danger);
+    --w6w-health-unknown: #9aa3b2;
+    --w6w-icon-swatch: #1f232c;
+    --w6w-scheme: dark;
+  --w6w-code-comment: #7d8797;
+  --w6w-code-keyword: #d2a8ff;
+  --w6w-code-string: #7ee787;
+  --w6w-code-number: #ffab70;
+  --w6w-code-function: #79c0ff;
+  --w6w-code-punctuation: #9aa3b2;
+  --w6w-code-variable: #ffa657;
+  }
+}
+
+/* Explicit mode. Declared AFTER the media query at equal (zero) specificity, so
+   a forced data-theme always beats the OS preference. */
+:where([data-theme="light"]) {
+  --w6w-scheme: light;
+  --w6w-bg: #f7f8fa;
+  --w6w-panel: #ffffff;
+  --w6w-panel-2: #f0f2f6;
+  --w6w-border: #d9dee5;
+  --w6w-text: #1a1d24;
+  --w6w-muted: #5f6875;
+  --w6w-accent: #3355e6;
+  --w6w-danger: #c1362f;
+  --w6w-success: #2e9e5b;
+  --w6w-health-ok: var(--w6w-success);
+  --w6w-health-degraded: #c77700;
+  --w6w-health-down: var(--w6w-danger);
+  --w6w-health-unknown: #5f6875;
+  --w6w-icon-swatch: #f0f2f6;
+  --w6w-code-comment: #6b7280;
+  --w6w-code-keyword: #8250df;
+  --w6w-code-string: #0a7b34;
+  --w6w-code-number: #b3541e;
+  --w6w-code-function: #1f6feb;
+  --w6w-code-punctuation: #5f6875;
+  --w6w-code-variable: #953800;
+}
+:where([data-theme="dark"]) {
+  --w6w-scheme: dark;
+  --w6w-bg: #0f1115;
+  --w6w-panel: #181b22;
+  --w6w-panel-2: #1f232c;
+  --w6w-border: #2a2f3a;
+  --w6w-text: #e6e8ee;
+  --w6w-muted: #9aa3b2;
+  --w6w-accent: #5b8cff;
+  --w6w-danger: #ff6b6b;
+  --w6w-success: #3fbf77;
+  --w6w-health-ok: var(--w6w-success);
+  --w6w-health-degraded: #f0a020;
+  --w6w-health-down: var(--w6w-danger);
+  --w6w-health-unknown: #9aa3b2;
+  --w6w-icon-swatch: #1f232c;
+  --w6w-code-comment: #7d8797;
+  --w6w-code-keyword: #d2a8ff;
+  --w6w-code-string: #7ee787;
+  --w6w-code-number: #ffab70;
+  --w6w-code-function: #79c0ff;
+  --w6w-code-punctuation: #9aa3b2;
+  --w6w-code-variable: #ffa657;
+}
+
+.w6w-muted {
+  color: var(--w6w-muted);
+}
+.w6w-small {
+  font-size: 0.85em;
+}
+
+/* color-scheme — declared on ui COMPONENT ROOTS, never on the host's <html>.
+   `color-scheme` inherits and also themes the page canvas, scrollbars and form
+   controls, so setting it on :root / [data-theme] let importing this file flip a
+   host's whole document. Instead each token block above also sets the
+   `--w6w-scheme` custom property (light / dark), which INHERITS, so the nearest
+   themed ancestor wins however themes nest (a light panel inside a dark page and
+   the reverse). Elements ui renders (any `w6w-` class, which covers the native
+   <dialog> modals) and the native controls inside them read it with
+   `color-scheme: var(--w6w-scheme)`. Not a hand-picked root list: every ui
+   component carries a `w6w-` class. Only an element whose class LIST has a token
+   starting `w6w-` matches (`class^=` / `class*=" w6w-"`), so host elements are never
+   touched: not a host `data-theme` wrapper, not a host class that merely contains
+   `w6w-` (`my-w6w-card`), and not a host element's own color-scheme on inputs nested
+   in a ui root (color-scheme inherits, so no descendant rule is needed). Nothing here
+   ever matches <html>/:root. All zero specificity. */
+:where([class^="w6w-"]:not(:root), [class*=" w6w-"]:not(:root)) {
+  color-scheme: var(--w6w-scheme);
+}

package/src/styles/_uptime.scss

@@ -0,0 +1,61 @@
+.w6w-uptime-strip {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: var(--w6w-sp-0-5);
+  height: 22px;
+  min-width: 0;
+  align-items: stretch;
+}
+.w6w-uptime-cell {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-uptime-fill: 100%;
+  position: relative;
+  min-width: 2px;
+  border-radius: 2px;
+  /* The unfilled remainder of the day, so the strip reads as a continuous row
+     rather than as floating bars. */
+  background: color-mix(in srgb, var(--w6w-border) 55%, transparent);
+  overflow: hidden;
+}
+.w6w-uptime-cell::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--w6w-uptime-fill);
+  border-radius: inherit;
+  background: var(--w6w-health-color);
+}
+.w6w-uptime-cell-ok {
+  --w6w-health-color: var(--w6w-health-ok);
+  --w6w-uptime-fill: 35%;
+}
+.w6w-uptime-cell-degraded {
+  --w6w-health-color: var(--w6w-health-degraded);
+  --w6w-uptime-fill: 65%;
+}
+.w6w-uptime-cell-down {
+  --w6w-health-color: var(--w6w-health-down);
+  --w6w-uptime-fill: 100%;
+}
+.w6w-uptime-cell-unknown {
+  --w6w-health-color: var(--w6w-health-unknown);
+  --w6w-uptime-fill: 100%;
+}
+/* No solid fill for `unknown` — a hatch, so an unmeasured day can never be
+   mistaken for a healthy or a failing one, with or without colour. */
+.w6w-uptime-cell-unknown::after {
+  background: repeating-linear-gradient(
+    45deg,
+    color-mix(in srgb, var(--w6w-health-color) 45%, transparent) 0 2px,
+    transparent 2px 5px
+  );
+  border: 1px solid color-mix(in srgb, var(--w6w-health-color) 35%, var(--w6w-border));
+}
+
+/* --- CodeBlock ------------------------------------------------------------ */
+/* Read-only syntax-highlighted display (`<CodeBlock>`). The colours come from
+   the `--w6w-code-*` tokens via inline styles Prism sets, so this rule only
+   owns box, rhythm and overflow. */