@crievo/omni 0.1.3 → 0.1.4

package/studio/web/styles/components/bencho/tokens.css

@@ -0,0 +1,243 @@
+/* Bencho's own palette, kept as it is on bencho.dev so the ported components keep their colors until the owner decides
+   whether the studio's tokens replace them. Two scopes:
+   - .bencho: the /bencho gallery page; `data-theme` picks the page palette, `data-fill` on a stage the card color
+     every component draws with (--fill-slab / --fill-on); `data-surface="glass"` adds the glass tokens.
+   - .bn-scope: wraps one ported component inside a real studio screen. It carries the light palette with a white fill
+     and follows the system theme (the studio reads prefers-color-scheme, not a class) for the dark fill.
+   Nothing here reaches the rest of the studio, which has its own --ok, --surface-2… */
+
+.bencho,
+.bn-scope {
+  --glass: 100;
+  --wash: 0.06;
+  --ink-rgb: 23, 24, 26;
+  --surface-rgb: 247, 247, 246;
+  --elev-rgb: 255, 255, 255;
+  --glass-rgb: 255, 255, 255;
+  --shadow-rgb: 23, 24, 26;
+  --bg: #fff;
+  --surface: #f7f7f6;
+  --surface-2: #f1f1f0;
+  --surface-3: #ecebe7;
+  --board: #fff;
+  --canvas-bg: #f7f7f6;
+  --pick: #0d99ff;
+  --pick-rgb: 13, 153, 255;
+  --guide: #ff3b6b;
+  --guide-on: #fff;
+  --bar-slot: 38px;
+  --bar-pad: 6px;
+  --bar-gap: 2px;
+  --card: #f7f7f6;
+  --solid: #0e0f11;
+  --solid-ink: #f4f3f1;
+  --pill-thumb: #fff;
+  --ink: #17181a;
+  --ink-2: #3c3b37;
+  --ink-3: #5c5b56;
+  --ink-4: #6f6e68;
+  --ink-5: #85847e;
+  --lock: #adaca6;
+  --on-ink: #fff;
+  --on-ink-rgb: 255, 255, 255;
+  --slab: var(--ink);
+  --on-slab: var(--on-ink);
+  --on-slab-rgb: var(--on-ink-rgb);
+  --glass-a: 0.35;
+  --glass-edge-a: 0.4;
+  --edge-hi: 0.75;
+  --edge-lo: 0.18;
+  --edge-far: 0.42;
+  --slab-dark: #0e0f11;
+  --spec-max: 0.35;
+  --ring-max: 0.4;
+  --lift-max: 0.06;
+  --bright-max: 0;
+  --pane: rgba(var(--glass-rgb), var(--glass-a));
+  --pane-edge: rgba(var(--glass-rgb), var(--glass-edge-a));
+  --pane-thumb: #ffffffd1;
+  --inlay: #ffffff8c;
+  --inlay-hi: #ffffffc7;
+  --ok: #15803d;
+  --paper: #dcd9cf;
+  --paper-2: #e9e7df;
+  --rule: #17181a29;
+  --signal: #2231dd;
+  --ember: #b8431c;
+  --font-head: "Google Sans", "Inter Head", var(--font-ui);
+  --font-ui:
+    "Inter", "Maison Neue", "MaisonNeue-Book", "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono: var(--font-ui);
+  --font-num: var(--font-ui);
+  --font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+}
+.bencho {
+  color-scheme: light;
+}
+.bencho[data-theme="dark"] {
+  color-scheme: dark;
+  --ink-rgb: 255, 255, 255;
+  --surface-rgb: 15, 15, 15;
+  --elev-rgb: 32, 32, 32;
+  --glass-rgb: 255, 255, 255;
+  --shadow-rgb: 0, 0, 0;
+  --bg: #000;
+  --surface: #0f0f0f;
+  --surface-2: #181818;
+  --surface-3: #202020;
+  --board: #1a1a1a;
+  --canvas-bg: #000;
+  --pick: #3aa9ff;
+  --guide: #ff5c84;
+  --guide-on: #fff;
+  --pick-rgb: 58, 169, 255;
+  --card: #0a0a0a;
+  --solid: #000;
+  --solid-ink: #fff;
+  --pill-thumb: #ffffff29;
+  --ink: #fff;
+  --ink-2: #b4b4b4;
+  --ink-3: #9a9a9a;
+  --ink-4: #828282;
+  --ink-5: #6b6b6b;
+  --lock: #525252;
+  --on-ink: #000;
+  --on-ink-rgb: 0, 0, 0;
+  --slab: var(--board);
+  --on-slab: var(--ink);
+  --on-slab-rgb: var(--ink-rgb);
+  --glass-a: 0.16;
+  --glass-edge-a: 0.2;
+  --edge-hi: 0.38;
+  --edge-lo: 0.06;
+  --edge-far: 0.2;
+  --slab-dark: #262626;
+  --spec-max: 0.15;
+  --ring-max: 0.14;
+  --lift-max: 0.5;
+  --bright-max: 22;
+  --pane-thumb: #ffffff21;
+  --inlay: #ffffff12;
+  --inlay-hi: #ffffff1f;
+  --wash: 0.09;
+  --ok: #34d17a;
+}
+.bencho [data-fill="light"],
+.bn-scope {
+  --fill-slab: #fff;
+  --fill-on: #17181a;
+  --fill-on-rgb: 23, 24, 26;
+  --ink: #17181a;
+  --ink-rgb: 23, 24, 26;
+  --ink-2: #3c3b37;
+  --ink-3: #5c5b56;
+  --ink-4: #6f6e68;
+  --ink-5: #85847e;
+  --on-ink: #fff;
+  --on-ink-rgb: 255, 255, 255;
+  --board: #fff;
+  --card: #f7f7f6;
+  --surface: #f7f7f6;
+  --surface-2: #f1f1f0;
+  --surface-3: #ecebe7;
+  --elev-rgb: 255, 255, 255;
+  --glass-rgb: 255, 255, 255;
+  --pill-thumb: #fff;
+  --inlay: #ffffff8c;
+  --slab-btn: #fff;
+}
+.bencho [data-fill="dark"] {
+  --fill-slab: var(--slab-dark);
+  --fill-on: #fff;
+  --fill-on-rgb: 255, 255, 255;
+  --ink: #fff;
+  --ink-rgb: 255, 255, 255;
+  --ink-2: #b4b4b4;
+  --ink-3: #9a9a9a;
+  --ink-4: #828282;
+  --ink-5: #6b6b6b;
+  --on-ink: #000;
+  --on-ink-rgb: 0, 0, 0;
+  --board: #1a1a1a;
+  --card: #0a0a0a;
+  --surface: #0f0f0f;
+  --surface-2: #181818;
+  --surface-3: #202020;
+  --elev-rgb: 32, 32, 32;
+  --glass-rgb: 255, 255, 255;
+  --pill-thumb: #ffffff29;
+  --inlay: #ffffff1a;
+  --slab-btn: var(--slab-dark);
+}
+.bencho [data-surface="glass"],
+.bn-scope {
+  --g: calc(var(--glass, 100) * 1%);
+  --pane: color-mix(in srgb, rgba(var(--glass-rgb), var(--glass-a)) var(--g), var(--fill-slab, var(--board)));
+  --pane-edge: color-mix(in srgb, rgba(var(--glass-rgb), var(--glass-edge-a)) var(--g), rgba(var(--ink-rgb), 0.08));
+  --pane-thumb: color-mix(in srgb, #ffffffd1 var(--g), rgba(var(--ink-rgb), 0.07));
+  --inlay: color-mix(in srgb, #ffffff8c var(--g), rgba(var(--ink-rgb), 0.05));
+  --inlay-hi: color-mix(in srgb, #ffffffc7 var(--g), rgba(var(--ink-rgb), 0.09));
+  --k: calc(var(--glass, 100) / 100);
+  --g-blur: calc(var(--glass, 100) * 0.25px);
+  --g-sat: calc(100% + var(--glass, 100) * 0.9%);
+  --g-bright: calc(100% + var(--bright-max) * var(--glass, 100) * 0.01%);
+  --g-spec: calc(var(--spec-max) * var(--k));
+  --g-ring: calc(var(--ring-max) * var(--k));
+  --g-lift: calc(var(--lift-max) * var(--k));
+  --g-edge-hi: calc(var(--edge-hi) * var(--k));
+  --g-edge-lo: calc(var(--edge-lo) * var(--k));
+  --g-edge-far: calc(var(--edge-far) * var(--k));
+}
+@media (prefers-color-scheme: dark) {
+  .bn-scope {
+    --surface-rgb: 15, 15, 15;
+    --shadow-rgb: 0, 0, 0;
+    --bg: #000;
+    --canvas-bg: #000;
+    --pick: #3aa9ff;
+    --guide: #ff5c84;
+    --guide-on: #fff;
+    --pick-rgb: 58, 169, 255;
+    --solid: #000;
+    --solid-ink: #fff;
+    --lock: #525252;
+    --slab: var(--board);
+    --on-slab: var(--ink);
+    --on-slab-rgb: var(--ink-rgb);
+    --glass-a: 0.16;
+    --glass-edge-a: 0.2;
+    --edge-hi: 0.38;
+    --edge-lo: 0.06;
+    --edge-far: 0.2;
+    --slab-dark: #262626;
+    --spec-max: 0.15;
+    --ring-max: 0.14;
+    --lift-max: 0.5;
+    --bright-max: 22;
+    --pane-thumb: #ffffff21;
+    --inlay-hi: #ffffff1f;
+    --wash: 0.09;
+    --ok: #34d17a;
+    --fill-slab: var(--slab-dark);
+    --fill-on: #fff;
+    --fill-on-rgb: 255, 255, 255;
+    --ink: #fff;
+    --ink-rgb: 255, 255, 255;
+    --ink-2: #b4b4b4;
+    --ink-3: #9a9a9a;
+    --ink-4: #828282;
+    --ink-5: #6b6b6b;
+    --on-ink: #000;
+    --on-ink-rgb: 0, 0, 0;
+    --board: #1a1a1a;
+    --card: #0a0a0a;
+    --surface: #0f0f0f;
+    --surface-2: #181818;
+    --surface-3: #202020;
+    --elev-rgb: 32, 32, 32;
+    --glass-rgb: 255, 255, 255;
+    --pill-thumb: #ffffff29;
+    --inlay: #ffffff1a;
+    --slab-btn: var(--slab-dark);
+  }
+}

package/studio/web/styles/components/bencho/upload-dropzone.css

@@ -0,0 +1,352 @@
+/* ══ Upload dropzone ═════════════════════════════════════ */
+.bn-upl {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 300px;
+  font-family: var(--font-ui);
+  color: var(--fill-on, var(--ink));
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* a slot of fixed size, so the box can close in round an upload
+   without moving anything below it */
+.bn-upl-zone-wrap {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 176px;
+}
+
+.bn-upl-zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  /* 176, up from 128: the drop target is the block, and a short
+     one read as a banner rather than a place to put something */
+  height: 176px;
+  padding: 0 16px;
+  overflow: hidden;
+  border-radius: var(--upl-r);
+  background: var(--fill-slab, var(--card));
+  /* a file over it and it grows, with a bounce; an upload and it
+     closes in round it */
+  transition:
+    scale 420ms cubic-bezier(0.24, 1.34, 0.38, 1),
+    width 420ms cubic-bezier(0.24, 1.34, 0.38, 1),
+    height 420ms cubic-bezier(0.24, 1.34, 0.38, 1),
+    background-color 220ms ease;
+}
+
+.bn-upl-zone[data-over] {
+  scale: 1.02;
+}
+
+/* the gulp: in a little as the file goes down, out past its size,
+   and settle */
+.bn-upl-zone[data-gulp] {
+  animation: bn-upl-gulp 460ms cubic-bezier(0.3, 1.2, 0.4, 1);
+}
+
+.bn-upl-zone[data-gulp] .bn-upl-icon {
+  animation: bn-upl-open 460ms cubic-bezier(0.3, 1.4, 0.4, 1);
+}
+
+[data-stroke="on"] .bn-upl-zone {
+  box-shadow: 0 0 0 1px var(--pane-edge);
+}
+
+.bn-upl-icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  /* a light grey tile, no edge — the fill's own ink walked most
+     of the way to its slab, so it is a pale grey on the light fill
+     and a lifted grey on the dark one */
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, var(--fill-slab, #ffffff));
+  color: color-mix(in srgb, var(--fill-on, #17181a) 72%, var(--fill-slab, #ffffff));
+  transition:
+    translate 420ms cubic-bezier(0.24, 1.34, 0.38, 1),
+    background-color 220ms ease,
+    color 220ms ease;
+}
+
+/* over the box the tile only lifts, and its arrow goes to full
+   ink — no colour of its own */
+.bn-upl-zone[data-over] .bn-upl-icon {
+  translate: 0 -4px;
+  color: var(--fill-on, var(--ink));
+}
+
+.bn-upl-say {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  text-align: center;
+  letter-spacing: 0em;
+}
+
+.bn-upl-say b {
+  font-weight: 500;
+}
+
+.bn-upl-say span {
+  font-size: 12px;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  letter-spacing: 0em;
+}
+
+.bn-upl-zone[data-refuse] .bn-upl-say b {
+  color: #e5484d;
+}
+
+/* the file, arrived in the box */
+.bn-upl-now {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: max-content;
+  flex: none;
+  animation: bn-upl-land 420ms var(--upl-spring) both;
+}
+
+.bn-upl-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 150px;
+}
+
+.bn-upl-name {
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  letter-spacing: 0em;
+}
+
+.bn-upl-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 14px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 52%, var(--fill-slab, #ffffff));
+  letter-spacing: 0em;
+}
+
+.bn-upl-track {
+  position: relative;
+  height: 4px;
+  margin-top: 4px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--fill-on, #17181a) 6%, var(--fill-slab, #ffffff));
+}
+
+.bn-upl-bar {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--signal, #2231dd);
+  transform-origin: left center;
+}
+
+.bn-upl-roll {
+  display: inline-flex;
+  line-height: 1em;
+  height: 1em;
+  overflow: hidden;
+}
+
+.bn-upl-roll-col {
+  display: inline-block;
+  height: 1em;
+  overflow: hidden;
+}
+
+.bn-upl-roll-strip {
+  display: flex;
+  flex-direction: column;
+  transition: transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1);
+}
+
+.bn-upl-roll-strip > span {
+  height: 1em;
+}
+
+.bn-upl-end {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+}
+
+.bn-upl-tick {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--ok, #15803d);
+  color: #fff;
+  animation: bn-upl-pop 380ms cubic-bezier(0.3, 1.6, 0.4, 1) both;
+}
+
+/* the tray: three files lying under the box */
+.bn-upl-tray {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.bn-upl-slot {
+  position: relative;
+  width: 76px;
+  height: 75px;
+}
+
+.bn-upl-file {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding-top: 4px;
+  cursor: grab;
+  touch-action: none;
+  outline: none;
+  /* home is a spring; the Bounce knob sets its overshoot */
+  transition:
+    transform 420ms var(--upl-spring),
+    opacity 220ms ease;
+}
+
+.bn-upl-file[data-held] {
+  z-index: 5;
+  cursor: grabbing;
+  transition: none;
+}
+
+.bn-upl-file[data-gone] {
+  opacity: 0;
+  pointer-events: none;
+  transition: none;
+}
+
+.bn-upl-file:not([data-gone]) {
+  animation: bn-upl-back 360ms var(--upl-spring) both;
+}
+
+.bn-upl-file:focus-visible .bn-upl-page {
+  outline: 2px solid var(--signal, #2231dd);
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+
+.bn-upl-page {
+  overflow: visible;
+}
+
+.bn-upl-page-line {
+  stroke: color-mix(in srgb, var(--fill-on, #17181a) 32%, var(--fill-slab, #ffffff));
+  stroke-width: 1.5;
+  /* outline only: the page is drawn, not filled */
+  fill: none;
+}
+
+.bn-upl-page-ext {
+  fill: #fff;
+  font-family: var(--font-ui);
+  /* size is the <text>'s own fontSize, in the icon's units */
+  font-weight: 500;
+  letter-spacing: 0em;
+}
+
+.bn-upl-label {
+  max-width: 76px;
+  overflow: hidden;
+  font-size: 11px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: color-mix(in srgb, var(--fill-on, #17181a) 72%, var(--fill-slab, #ffffff));
+  letter-spacing: 0em;
+}
+
+/* the tray sits on the STAGE, not on the block, so when Fill
+   takes the block the other way from the page its names would be
+   coloured for the wrong ground — light grey on a light stage.
+   Across that split they take the page's own ink instead. */
+/* the page's outline goes with its name, the same colour */
+:root:not([data-theme="dark"]) [data-fill="dark"] .bn-upl-label {
+  color: color-mix(in srgb, var(--fill-on, var(--ink)) 70%, #ffffff);
+}
+
+:root:not([data-theme="dark"]) [data-fill="dark"] .bn-upl-page-line {
+  stroke: color-mix(in srgb, var(--fill-on, var(--ink)) 70%, #ffffff);
+}
+
+:root[data-theme="dark"] [data-fill="light"] .bn-upl-label {
+  color: color-mix(in srgb, #f4f3f1 70%, var(--fill-on, var(--ink)));
+}
+
+:root[data-theme="dark"] [data-fill="light"] .bn-upl-page-line {
+  stroke: color-mix(in srgb, #f4f3f1 70%, var(--fill-on, var(--ink)));
+}
+
+@keyframes bn-upl-gulp {
+  0% {
+    scale: 1.02;
+  }
+  35% {
+    scale: 0.985;
+  }
+  70% {
+    scale: 1.006;
+  }
+  100% {
+    scale: 1;
+  }
+}
+
+@keyframes bn-upl-open {
+  40% {
+    scale: 1.08;
+  }
+}
+
+@keyframes bn-upl-land {
+  from {
+    opacity: 0;
+    scale: 0.85;
+    translate: 0 10px;
+  }
+}
+
+@keyframes bn-upl-pop {
+  from {
+    scale: 0;
+  }
+}
+
+@keyframes bn-upl-back {
+  from {
+    scale: 0.7;
+    opacity: 0;
+  }
+}