@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/styles/session-capability.css

@@ -0,0 +1,44 @@
+.og-session-capability { width:100%; max-width:540px; color:var(--og-color-fg); font-family:var(--og-font-sans,inherit); }
+.og-session-capability-shell { border:1px solid var(--og-color-border); border-radius:12px; background:var(--og-color-surface-1); overflow:hidden; }
+.og-session-capability-header { display:flex; align-items:center; gap:12px; padding:18px 19px 12px; }
+.og-session-capability-logo { display:flex; align-items:center; justify-content:center; width:41px; height:41px; flex-shrink:0; border:1px solid var(--og-color-border); border-radius:10px; background:var(--og-color-surface-2); font-size:13px; font-weight:600; overflow:hidden; }
+.og-session-capability-logo img { width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
+.og-session-capability-identity { flex:1; min-width:0; display:grid; gap:4px; overflow-wrap:anywhere; }
+.og-session-capability-identity h3 { margin:0; font-size:14px; font-weight:600; }
+.og-session-capability-identity span { font-size:11px; color:var(--og-color-fg-muted); }
+.og-session-capability-type { flex-shrink:0; padding:4px 7px; border-radius:5px; background:var(--og-color-surface-2); font-size:10px; }
+.og-session-capability-copy { margin:0; padding:0 19px 12px; font-size:12px; line-height:1.7; color:var(--og-color-fg-muted); overflow-wrap:anywhere; }
+.og-session-capability-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:0 19px 14px; }
+.og-session-capability-actions > span { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--og-color-fg-muted); }
+.og-session-capability-actions button { margin-left:auto; min-height:35px; padding:8px 13px; border-radius:7px; border:1px solid var(--og-color-primary-border); color:var(--og-color-primary-fg); background:var(--og-color-primary); font:inherit; font-size:12px; cursor:pointer; }
+.og-session-capability-note { margin:10px 0 0; font-size:10px; line-height:1.6; color:var(--og-color-fg-muted); }
+.og-session-capability :focus-visible, .og-session-capability-dialog :focus-visible { outline:2px solid var(--og-color-accent); outline-offset:3px; }
+.og-session-capability-overlay { position:fixed; inset:0; z-index:1000; background:rgb(0 0 0 / .4); }
+.og-session-capability-dialog { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001; width:min(42rem,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--og-color-border); border-radius:16px; background:var(--og-color-surface-1); color:var(--og-color-fg); font-family:var(--og-font-sans,inherit); box-shadow:0 16px 48px rgb(0 0 0 / .2); }
+.og-session-capability-dialog-header { display:flex; align-items:center; gap:12px; padding:24px; border-bottom:1px solid var(--og-color-border); }
+.og-session-capability-dialog-header > div { flex:1; min-width:0; }
+.og-session-capability-dialog-header h2 { margin:0; font-size:20px; font-weight:600; overflow-wrap:anywhere; }
+.og-session-capability-dialog-header p { margin:4px 0 0; color:var(--og-color-fg-muted); font-size:12px; }
+.og-session-capability-dialog-header > button { border:0; background:transparent; color:inherit; padding:8px; cursor:pointer; }
+.og-session-capability-dialog-body { min-height:0; overflow-y:auto; }
+.og-session-capability-dialog:has(.og-session-capability-setup) { width:min(32rem,calc(100vw - 32px)); }
+.og-session-capability-setup { padding:24px; display:grid; gap:16px; font-size:13px; }
+.og-session-capability-setup > p { margin:0; line-height:1.6; }
+.og-session-capability-setup label { display:flex; align-items:start; gap:8px; line-height:1.6; }
+.og-session-capability-setup button { font:inherit; padding:9px 12px; border-radius:7px; border:1px solid var(--og-color-border); background:var(--og-color-surface-2); color:inherit; cursor:pointer; }
+.og-session-capability-setup button:disabled { opacity:.55; cursor:not-allowed; }
+.og-session-capability-setup [role=alert] { color:var(--og-color-danger); }
+.og-session-capability-setup .og-session-capability-notice { color:var(--og-color-fg-muted); }
+.og-session-capability-shell[data-state="complete"] { border-color:color-mix(in srgb,var(--og-color-status-idle) 35%,var(--og-color-border)); }
+.og-session-capability-shell[data-state="complete"] .og-session-capability-header > svg,
+.og-session-capability-shell[data-state="complete"] .og-session-capability-copy { color:var(--og-color-status-idle); }
+.og-session-capability-shell[data-state="complete"] .og-session-capability-copy { font-weight:500; }
+.og-session-capability-setup fieldset { display:grid; gap:10px; margin:0; padding:0; border:0; min-width:0; }
+.og-session-capability-setup legend { padding:0 0 10px; font-weight:600; }
+.og-session-capability-setup input { margin-top:4px; accent-color:var(--og-color-accent-deep); }
+.og-session-capability-setup .og-session-capability-scope { color:var(--og-color-fg-muted); font-size:12px; }
+.og-session-capability-setup .og-session-capability-primary { justify-self:end; min-height:40px; padding:10px 16px; border:1px solid var(--og-color-primary-border); background:var(--og-color-primary); color:var(--og-color-primary-fg); font-weight:500; }
+.og-session-capability-setup .og-session-capability-primary:hover:not(:disabled) { filter:brightness(.94); }
+.og-session-capability-progress { color:var(--og-color-fg-muted); padding-block:8px; }
+.og-session-capability-setup .og-session-capability-stop { justify-self:end; }
+@media (pointer:coarse) { .og-session-capability-actions button,.og-session-capability-setup button { min-height:44px; } }

package/styles/tokens.css

@@ -6,10 +6,13 @@
    `[data-og-theme="light"]` (or the `.og-light` class) on any ancestor, so
    themes can be nested and rebranded per subtree.
 
-   All colors are OKLCH for perceptual consistency. The palette is deliberately
-   calm: one accent, desaturated status hues, low-chroma neutral ramps on a
-   cool slate hue. Information density comes from typography and spacing, not
-   from color shouting.
+   The palette is deliberately calm: pure neutral greys (no hue tint), a
+   neutral grey "accent" for icons, links, focus and selected marks, and color
+   only where it carries meaning - the primary button's teal wash, the soft
+   teal/peach glow behind the rail and sign-in page, and the status hues.
+   Information density comes from typography and spacing, not from color
+   shouting. Neutral and brand values are exact studio hex values; status and
+   danger values are tuned for WCAG AA as 11-12 px text on every surface.
    -------------------------------------------------------------------------- */
 
 :root {
@@ -45,10 +48,10 @@
      embedded composer and its portalled menu can be tuned as one surface. */
   --og-model-picker-trigger-height: 2rem;
   --og-model-picker-trigger-height-mobile: 1.75rem;
-  --og-model-picker-menu-width: 18rem;
+  --og-model-picker-menu-width: 22rem;
   --og-model-picker-menu-padding: 0.375rem;
   --og-model-picker-row-padding-x: 0.625rem;
-  --og-model-picker-row-padding-y: 0.5rem;
+  --og-model-picker-row-padding-y: 0.375rem;
   --og-model-picker-effort-height: 2rem;
   --og-realtime-menu-width: 18rem;
 
@@ -79,36 +82,75 @@
   --og-ease-stream: cubic-bezier(0.16, 1, 0.3, 1);
   --og-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
 
-  /* Neutrals (dark) ---------------------------------------------------------- */
-  --og-color-bg: oklch(0.155 0.012 260);
-  --og-color-surface-1: oklch(0.19 0.014 260);
-  --og-color-surface-2: oklch(0.225 0.015 260);
-  --og-color-surface-3: oklch(0.265 0.016 260);
-  --og-color-border: oklch(0.3 0.014 260);
-  --og-color-border-strong: oklch(0.42 0.016 260);
-  --og-color-fg: oklch(0.955 0.005 260);
-  --og-color-fg-muted: oklch(0.73 0.012 260);
-  --og-color-fg-subtle: oklch(0.62 0.013 260);
+  /* Neutrals (dark, "graphite") -------------------------------------------
+     The rail and page chrome (`bg`) sit lighter than the main content pane
+     (`canvas`); surfaces step up from the rail. */
+  --og-color-bg: #303030;
+  --og-color-canvas: #202020;
+  --og-color-surface-1: #333333;
+  --og-color-surface-2: #383838;
+  --og-color-surface-3: #404040;
+  --og-color-selection: #484848;
+  /* Hover: one treatment for every navigation item, list row and menu row
+     (menu highlight and keyboard focus included). A translucent fg wash, so
+     it darkens or lightens whatever sits under it - the rail glow, the
+     canvas, a card or a menu panel - by the same visible step. Selected and
+     active rows use the stronger, opaque `selection`. */
+  --og-color-hover: rgb(230 230 230 / 0.08);
+  --og-color-border: #454545;
+  --og-color-border-strong: #555555;
+  --og-color-fg: #e6e6e6;
+  /* Labels you act on: rail and settings navigation, session titles, menu
+     rows. A hair under fg so the active item (fg) still stands out, never
+     muted like meta text. */
+  --og-color-fg-label: #d4d4d4;
+  /* A step over the studio's #b0b0b0 so muted text (secondary buttons, list
+     meta) keeps 4.5:1 on the selected-row fill too. */
+  --og-color-fg-muted: #b8b8b8;
+  /* Lifted from the studio's #949494 so quiet meta keeps 4.5:1 on the rail,
+     Surface 1-2 and the canvas. */
+  --og-color-fg-subtle: #a3a3a3;
 
-  /* Accent — one brand hue, used sparingly ----------------------------------- */
-  --og-color-accent: oklch(0.72 0.15 255);
-  --og-color-accent-strong: oklch(0.78 0.14 255);
-  /* Primary actions render ordinary 14 px accent-foreground text on this
-     token. Keep the blue dark enough to preserve WCAG AA contrast. */
-  --og-color-accent-deep: oklch(0.54 0.18 255);
-  --og-color-accent-fg: oklch(0.985 0.005 260);
+  /* Accent - a neutral grey for icons, links, focus rings, the active tab bar
+     and selected rings. Color lives in the primary wash and the glow. */
+  --og-color-accent: #c4c4c4;
+  --og-color-accent-strong: #dcdcdc;
+  --og-color-accent-deep: #d5d5d5;
+  --og-color-accent-fg: #242424;
   /* Legacy color-mix fallbacks stay in the base rule; supported values are
      grouped below so processors do not repeat this selector for every token. */
   --og-color-accent-soft: var(--og-color-accent);
 
-  /* Status — muted so they inform without alarming --------------------------- */
-  --og-color-status-queued: oklch(0.62 0.03 260);
-  --og-color-status-running: oklch(0.78 0.11 80);
-  --og-color-status-idle: oklch(0.78 0.12 155);
-  --og-color-status-waiting: oklch(0.74 0.12 305);
-  --og-color-status-failed: oklch(0.7 0.16 22);
-  --og-color-status-cancelled: oklch(0.6 0.035 260);
-  --og-color-danger: oklch(0.66 0.18 22);
+  /* Primary action - the "teal wash" button: a quiet tinted fill, ink text,
+     a 1px tinted edge and no shadow. Hover mixes 15% ink into the fill. */
+  --og-color-primary: #2b3432;
+  --og-color-primary-fg: #eeeeee;
+  --og-color-primary-border: #4e5e59;
+  --og-color-primary-hover: var(--og-color-primary);
+  /* Switch off state. On, a switch takes the primary fill and edge with a
+     primary-ink thumb, so the thumb brightens when it turns on. */
+  --og-color-switch-track: #454545;
+  --og-color-switch-thumb: #a3a3a3;
+
+  /* Glow - the soft teal (top-left) and peach (bottom-right) wash behind the
+     rail and the sign-in page. Quiet variants for dense surfaces. */
+  --og-glow-teal: #79d9c125;
+  --og-glow-peach: #ffb78724;
+  --og-glow-teal-quiet: #79d9c115;
+  --og-glow-peach-quiet: #ffb78714;
+
+  /* Status - muted so they inform without alarming --------------------------- */
+  --og-color-status-queued: #a3a3a3;
+  --og-color-status-running: #d5bd72;
+  --og-color-status-idle: #83cbb0;
+  --og-color-status-waiting: #e9ab77;
+  --og-color-status-failed: oklch(0.77 0.12 22);
+  --og-color-status-cancelled: #a3a3a3;
+  /* Readable as 14 px menu text on Surface 3. Filled destructive controls use
+     the darker danger fill with the danger foreground. */
+  --og-color-danger: oklch(0.76 0.13 22);
+  --og-color-danger-fill: oklch(0.52 0.16 22);
+  --og-color-danger-fg: #ffffff;
   --og-color-diff-add-bg: var(--og-color-status-idle);
   --og-color-diff-del-bg: var(--og-color-status-failed);
 
@@ -119,10 +161,10 @@
   --og-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.28);
   --og-shadow-md: 0 2px 8px oklch(0 0 0 / 0.32), 0 1px 2px oklch(0 0 0 / 0.24);
   --og-shadow-lg: 0 8px 28px oklch(0 0 0 / 0.42), 0 2px 8px oklch(0 0 0 / 0.28);
-  /* One soft halo only. The composer's focus affordance already draws a crisp
-     brand edge via `focus-within:border-og-accent/60`; the old `0 0 0 1px`
-     ring sat flush against that border and read as a doubled hairline, so the
-     glow is now purely the diffuse outer halo. */
+  /* One soft, neutral halo only. The composer's focus affordance already
+     draws a crisp edge via `focus-within:border-og-accent/50`; the old
+     `0 0 0 1px` ring sat flush against that border and read as a doubled
+     hairline, so the glow is purely a faint diffuse grey halo. */
   --og-shadow-glow: 0 0 24px var(--og-color-accent);
 
   /* Session chrome — override on `.og-session-chrome` (or an ancestor) to rebrand.
@@ -156,9 +198,11 @@
 @supports (color: color-mix(in lab, red, red)) {
   :root {
     --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 16%, transparent);
+    --og-color-hover: color-mix(in srgb, var(--og-color-fg) 8%, transparent);
+    --og-color-primary-hover: color-mix(in srgb, var(--og-color-primary) 85%, var(--og-color-primary-fg));
     --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 14%, transparent);
     --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 14%, transparent);
-    --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 18%, transparent);
+    --og-shadow-glow: 0 0 24px color-mix(in oklch, var(--og-color-accent) 10%, transparent);
     --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 82%, transparent);
     --og-session-chrome-surface-open: color-mix(in oklch, var(--og-color-surface-2) 92%, transparent);
     --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 85%, transparent);
@@ -190,7 +234,7 @@
   --og-line-height-composer-wide: 20px;
   --og-model-picker-trigger-height: 1.75rem;
   --og-model-picker-trigger-height-mobile: 1.75rem;
-  --og-model-picker-menu-width: 15rem;
+  --og-model-picker-menu-width: 20rem;
   --og-model-picker-menu-padding: 0.25rem;
   --og-model-picker-row-padding-x: 0.5rem;
   --og-model-picker-row-padding-y: 0.375rem;
@@ -201,39 +245,63 @@
 /* Light theme — explicit opt-in, themable per subtree ----------------------- */
 [data-og-theme="light"],
 .og-light {
-  --og-color-bg: oklch(0.978 0.003 260);
-  --og-color-surface-1: oklch(1 0 0);
-  --og-color-surface-2: oklch(0.962 0.004 260);
-  --og-color-surface-3: oklch(0.935 0.006 260);
-  --og-color-border: oklch(0.9 0.006 260);
-  --og-color-border-strong: oklch(0.8 0.01 260);
-  --og-color-fg: oklch(0.21 0.015 260);
-  --og-color-fg-muted: oklch(0.46 0.014 260);
-  --og-color-fg-subtle: oklch(0.5 0.012 260);
+  --og-color-bg: #f6f6f6;
+  --og-color-canvas: #ffffff;
+  --og-color-surface-1: #ffffff;
+  --og-color-surface-2: #eeeeee;
+  --og-color-surface-3: #e5e5e5;
+  --og-color-selection: #e2e2e2;
+  --og-color-hover: rgb(36 36 36 / 0.06);
+  --og-color-border: #dedede;
+  --og-color-border-strong: #bdbdbd;
+  --og-color-fg: #242424;
+  --og-color-fg-label: #3a3a3a;
+  /* Muted and subtle are a step darker than the studio's #686868 / #767676
+     so both keep 4.5:1 as small text on the rail, Surface 2 (row hover) and
+     the selected-row fill, with a visible step between them. */
+  --og-color-fg-muted: #5f5f5f;
+  --og-color-fg-subtle: #696969;
 
-  --og-color-accent: oklch(0.55 0.18 255);
-  --og-color-accent-strong: oklch(0.48 0.19 255);
-  --og-color-accent-deep: oklch(0.44 0.19 255);
-  --og-color-accent-fg: oklch(0.985 0.005 260);
+  --og-color-accent: #545454;
+  --og-color-accent-strong: #383838;
+  --og-color-accent-deep: #383838;
+  --og-color-accent-fg: #ffffff;
   /* Match the dark-token fallback strategy without duplicating support rules. */
   --og-color-accent-soft: var(--og-color-accent);
 
-  --og-color-status-queued: oklch(0.55 0.03 260);
-  /* Status letters are ordinary 11 px text, including over selected rows. */
-  --og-color-status-running: oklch(0.48 0.13 80);
-  /* Used as 11–12 px diff/status text, including on the pale addition tint.
-     Keep enough headroom above 4.5:1 on both Surface 1 and the tinted row. */
-  --og-color-status-idle: oklch(0.49 0.13 155);
-  --og-color-status-waiting: oklch(0.54 0.15 305);
+  --og-color-primary: #ebf2f0;
+  --og-color-primary-fg: #292929;
+  --og-color-primary-border: #c4d5d0;
+  --og-color-primary-hover: var(--og-color-primary);
+  --og-color-switch-track: #bdbdbd;
+  --og-color-switch-thumb: #ffffff;
+
+  --og-glow-teal: #9fe3d359;
+  --og-glow-peach: #ffb78752;
+  --og-glow-teal-quiet: #9fe3d32b;
+  --og-glow-peach-quiet: #ffb78729;
+
+  /* Status letters are ordinary 11-12 px text, including over row hover and
+     selected rows, and on the pale diff tints. The studio hues (#a3652f,
+     #8b782c, #287d64) are darkened just enough for 4.5:1 on Surface 2 and
+     on the selected-row fill. */
+  --og-color-status-queued: #696969;
+  --og-color-status-running: #716122;
+  --og-color-status-idle: #237058;
+  --og-color-status-waiting: #8c5524;
   --og-color-status-failed: oklch(0.5 0.19 22);
-  --og-color-status-cancelled: oklch(0.55 0.025 260);
-  --og-color-danger: oklch(0.55 0.2 22);
+  --og-color-status-cancelled: #696969;
+  /* Ordinary 14 px destructive menu text also appears on Surface 3. Keep
+     enough AA contrast headroom there, including browser color rounding. */
+  --og-color-danger: oklch(0.52 0.2 22);
+  --og-color-danger-fill: oklch(0.5 0.19 22);
+  --og-color-danger-fg: #ffffff;
   --og-color-diff-add-bg: var(--og-color-status-idle);
   --og-color-diff-del-bg: var(--og-color-status-failed);
 
-  --og-shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.07);
-  --og-shadow-md: 0 2px 8px oklch(0.2 0.02 260 / 0.09), 0 1px 2px oklch(0.2 0.02 260 / 0.06);
-  --og-shadow-lg: 0 8px 28px oklch(0.2 0.02 260 / 0.13), 0 2px 8px oklch(0.2 0.02 260 / 0.07);
+  --og-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.07);
+  --og-shadow-md: 0 2px 8px oklch(0 0 0 / 0.09), 0 1px 2px oklch(0 0 0 / 0.06);
+  --og-shadow-lg: 0 8px 28px oklch(0 0 0 / 0.13), 0 2px 8px oklch(0 0 0 / 0.07);
   --og-shadow-glow: 0 0 20px var(--og-color-accent);
 
   --og-session-chrome-surface: var(--og-color-surface-2);
@@ -242,8 +310,8 @@
   --og-session-chrome-border-open: var(--og-color-border);
   --og-session-chrome-highlight: var(--og-color-surface-3);
   --og-session-chrome-highlight-ring: var(--og-color-fg);
-  --og-session-chrome-shadow: 0 4px 16px -10px oklch(0.2 0.02 260 / 0.14);
-  --og-session-chrome-shadow-open: 0 8px 22px -12px oklch(0.2 0.02 260 / 0.18);
+  --og-session-chrome-shadow: 0 4px 16px -10px oklch(0 0 0 / 0.14);
+  --og-session-chrome-shadow-open: 0 8px 22px -12px oklch(0 0 0 / 0.18);
   --og-session-chrome-row-hover: var(--og-color-surface-3);
 
   color-scheme: light;
@@ -253,9 +321,11 @@
   [data-og-theme="light"],
   .og-light {
     --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 11%, transparent);
+    --og-color-hover: color-mix(in srgb, var(--og-color-fg) 6%, transparent);
+    --og-color-primary-hover: color-mix(in srgb, var(--og-color-primary) 85%, var(--og-color-primary-fg));
     --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 12%, transparent);
     --og-color-diff-del-bg: color-mix(in oklch, var(--og-color-status-failed) 12%, transparent);
-    --og-shadow-glow: 0 0 20px color-mix(in oklch, var(--og-color-accent) 14%, transparent);
+    --og-shadow-glow: 0 0 20px color-mix(in oklch, var(--og-color-accent) 12%, transparent);
     --og-session-chrome-surface: color-mix(in oklch, var(--og-color-surface-2) 88%, transparent);
     --og-session-chrome-border: color-mix(in oklch, var(--og-color-border) 90%, transparent);
     --og-session-chrome-highlight-ring: color-mix(in oklch, var(--og-color-fg) 12%, transparent);