@le-space/ui 0.6.42 → 0.6.43

package/styles.css

@@ -1,21 +1,95 @@
+/*
+ * Relay Button widget theme — Le-Space brand system (Style Guide V1.0).
+ * Dark ("Deep Space") is the default. Light mode activates when the host
+ * page sets `data-theme="light"` (Docusaurus convention) or
+ * `data-relay-theme="light"` on any ancestor element.
+ *
+ * The widget uses a compact type scale (13px body) instead of the 16px web
+ * scale from the style guide — see docs/reference/branding for the rationale.
+ */
 :root {
+  /* Typography — Inter for UI text, JetBrains Mono for labels/status/code. */
   --relay-font-heading:
-    "Epilogue", "Avenir Next", "Segoe UI", sans-serif;
+    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
   --relay-font-body:
-    "DM Sans", "Inter", "Segoe UI", sans-serif;
+    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
   --relay-font-mono:
-    "DM Mono", "SFMono-Regular", "Menlo", monospace;
-  --relay-panel-bg: rgba(49, 46, 129, 0.94);
-  --relay-panel-border: rgba(199, 210, 254, 0.22);
-  --relay-panel-shadow: 0 28px 80px rgba(49, 46, 129, 0.34);
-  --relay-text: #f8fafc;
-  --relay-muted: #9fb2ca;
-  --relay-blue: #4f46e5;
-  --relay-red: #6366f1;
-  --relay-yellow: #ffc83f;
-  --relay-green: #37d67a;
-  --relay-launcher-border: rgba(199, 210, 254, 0.42);
-  --relay-launcher-badge-bg: rgba(49, 46, 129, 0.92);
-  --relay-launcher-badge-border: rgba(191, 219, 254, 0.24);
-  --relay-backdrop-accent: rgba(79, 70, 229, 0.2);
+    "JetBrains Mono", ui-monospace, "SFMono-Regular", "Noto Sans Mono", Menlo, monospace;
+
+  /* Core palette (dark) */
+  --relay-deep-space: #0b0e15;
+  --relay-nebula: #141926;
+  --relay-horizon: #232b3d;
+  --relay-starlight: #edf1f8;
+  --relay-stardust: #a8b3c7;
+  --relay-comet: #6b7690;
+  --relay-coral: #ff6b5b;
+  --relay-cyan: #58c7f3;
+
+  /* Semantic colors */
+  --relay-success: #3edc97;
+  --relay-warning: #ffc24b;
+  --relay-danger: #ff4d6a;
+  --relay-info: #58c7f3;
+
+  /* Component tokens */
+  --relay-panel-bg: rgba(20, 25, 38, 0.97);
+  --relay-panel-border: var(--relay-horizon);
+  --relay-panel-shadow: 0 28px 80px rgba(4, 6, 12, 0.55);
+  --relay-text: var(--relay-starlight);
+  --relay-muted: var(--relay-stardust);
+  --relay-text-dim: var(--relay-comet);
+  --relay-surface: rgba(11, 14, 21, 0.55);
+  --relay-surface-border: var(--relay-horizon);
+  --relay-field-bg: rgba(11, 14, 21, 0.85);
+  --relay-accent: var(--relay-coral);
+  --relay-accent-contrast: #0b0e15;
+  --relay-link: var(--relay-cyan);
+
+  /* Launcher: the brand lockup as a button — Deep Space pill. */
+  --relay-launcher-bg: linear-gradient(135deg, #10151f 0%, #0b0e15 100%);
+  --relay-launcher-border: var(--relay-horizon);
+  --relay-launcher-text: var(--relay-starlight);
+  --relay-launcher-shadow: 0 18px 40px rgba(4, 6, 12, 0.5);
+  --relay-launcher-badge-bg: rgba(20, 25, 38, 0.92);
+  --relay-launcher-badge-border: var(--relay-horizon);
+  --relay-backdrop-accent: rgba(255, 107, 91, 0.14);
+
+  /* Legacy status aliases (kept for host-page overrides) */
+  --relay-blue: var(--relay-info);
+  --relay-red: var(--relay-danger);
+  --relay-yellow: var(--relay-warning);
+  --relay-green: var(--relay-success);
+}
+
+:root[data-theme="light"],
+[data-theme="light"],
+[data-relay-theme="light"] {
+  --relay-coral: #e8503f;
+  --relay-cyan: #0e86c4;
+  --relay-success: #0f9d6a;
+  --relay-warning: #a8690a;
+  --relay-danger: #d5365a;
+  --relay-info: #0e86c4;
+
+  --relay-panel-bg: rgba(255, 255, 255, 0.98);
+  --relay-panel-border: #d9e0ec;
+  --relay-panel-shadow: 0 28px 80px rgba(20, 27, 46, 0.18);
+  --relay-text: #141b2e;
+  --relay-muted: #4d5a74;
+  --relay-text-dim: #6b7690;
+  --relay-surface: rgba(20, 27, 46, 0.04);
+  --relay-surface-border: #d9e0ec;
+  --relay-field-bg: #ffffff;
+  --relay-accent: var(--relay-coral);
+  --relay-accent-contrast: #ffffff;
+  --relay-link: var(--relay-cyan);
+
+  --relay-launcher-bg: linear-gradient(135deg, #ffffff 0%, #f2f5fa 100%);
+  --relay-launcher-border: #d9e0ec;
+  --relay-launcher-text: #141b2e;
+  --relay-launcher-shadow: 0 18px 40px rgba(20, 27, 46, 0.16);
+  --relay-launcher-badge-bg: rgba(20, 27, 46, 0.05);
+  --relay-launcher-badge-border: #d9e0ec;
+  --relay-backdrop-accent: rgba(232, 80, 63, 0.1);
 }

package/svelte/SponsorRelayFab.svelte

@@ -449,12 +449,14 @@ export let apiHosts = undefined
     max-height: calc(100vh - 12.5rem);
     overflow: auto;
     border: 1px solid var(--relay-panel-border);
-    border-radius: 1.6rem;
+    border-radius: 0.625rem;
     background: var(--relay-panel-bg);
     box-shadow: var(--relay-panel-shadow);
     color: var(--relay-text);
     padding: 1rem;
     font-family: var(--relay-font-body);
+    font-size: 0.8125rem;
+    line-height: 1.5;
   }
 
   .panel-head,
@@ -474,9 +476,9 @@ export let apiHosts = undefined
     gap: 0.28rem;
     margin: 0.25rem 0 0.8rem;
     padding: 0.7rem 0.85rem;
-    border-radius: 1rem;
-    background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
-    border: 1px solid rgba(125, 211, 252, 0.18);
+    border-radius: 0.625rem;
+    background: rgba(88, 199, 243, 0.08);
+    border: 1px solid rgba(88, 199, 243, 0.22);
   }
 
   .polling-head {
@@ -486,12 +488,12 @@ export let apiHosts = undefined
   }
 
   .polling-row strong {
-    font-size: 0.88rem;
+    font-size: 0.8125rem;
   }
 
   .polling-row small {
-    color: var(--relay-text-dim);
-    line-height: 1.35;
+    color: var(--relay-muted);
+    line-height: 1.4;
   }
 
   .rootfs-blocker {
@@ -499,19 +501,30 @@ export let apiHosts = undefined
     gap: 0.55rem;
     margin-top: 1rem;
     padding: 0.9rem;
-    border: 1px solid rgba(248, 113, 113, 0.58);
-    border-radius: 1rem;
-    background: rgba(127, 29, 29, 0.34);
-    color: #fee2e2;
+    border: 1px solid rgba(255, 77, 106, 0.5);
+    border-radius: 0.625rem;
+    background: rgba(255, 77, 106, 0.1);
+    color: var(--relay-text);
+  }
+
+  .rootfs-blocker strong {
+    color: var(--relay-danger);
   }
 
   .rootfs-blocker p,
   .rootfs-blocker small { margin: 0; line-height: 1.45; }
-  .rootfs-reference { overflow-wrap: anywhere; font-size: 0.7rem; }
+  .rootfs-reference { overflow-wrap: anywhere; font-size: 0.6875rem; font-family: var(--relay-font-mono); }
   .rootfs-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
-  .rootfs-actions .refresh { padding: 0.55rem 0.7rem; }
-  .rootfs-actions a { color: #bfdbfe; font-size: 0.78rem; }
-  .primary.blocked { border-color: rgba(248, 113, 113, 0.45); background: rgba(148, 163, 184, 0.22); color: #fee2e2; box-shadow: none; cursor: not-allowed; }
+  .rootfs-actions .refresh { padding: 0.5rem 0.7rem; }
+  .rootfs-actions a { color: var(--relay-link); font-size: 0.75rem; }
+
+  .primary.blocked {
+    border-color: rgba(255, 77, 106, 0.45);
+    background: var(--relay-surface);
+    color: var(--relay-muted);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 
   .eyebrow,
   .field span,
@@ -519,17 +532,25 @@ export let apiHosts = undefined
   .mono-block span,
   .instance-grid span,
   .section-head small {
-    color: var(--relay-muted);
-    font-size: 0.72rem;
+    color: var(--relay-comet);
+    font-family: var(--relay-font-mono);
+    font-weight: 700;
+    font-size: 0.6563rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
 
+  .eyebrow {
+    color: var(--relay-accent);
+  }
+
   .eyebrow-version {
-    font-size: 0.62rem;
+    font-family: var(--relay-font-mono);
+    font-weight: 400;
+    font-size: 0.625rem;
     letter-spacing: 0.04em;
     text-transform: none;
-    color: rgba(191, 219, 254, 0.82);
+    color: var(--relay-comet);
   }
 
   h2,
@@ -540,62 +561,80 @@ export let apiHosts = undefined
   }
 
   h2 {
-    font-size: 1.5rem;
+    font-size: 1.125rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--relay-text);
+  }
+
+  h3 {
+    font-size: 0.9375rem;
+    font-weight: 600;
   }
 
   .refresh,
   .primary,
   .delete,
   .warning {
-    border-radius: 0.95rem;
-    padding: 0.7rem 0.9rem;
+    border-radius: 0.5rem;
+    padding: 0.65rem 0.9rem;
     cursor: pointer;
-    font-weight: 700;
+    font-family: var(--relay-font-body);
+    font-size: 0.8125rem;
+    font-weight: 600;
     line-height: 1.1;
+    transition: filter 150ms ease, border-color 150ms ease;
   }
 
   .refresh {
-    border: 1px solid rgba(255, 255, 255, 0.22);
+    border: 1px solid var(--relay-surface-border);
     color: var(--relay-text);
-    background: rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-    backdrop-filter: blur(8px);
+    background: var(--relay-surface);
+  }
+
+  .refresh:hover:not(:disabled) {
+    border-color: var(--relay-cyan);
   }
 
   .primary {
     width: 100%;
-    border: 1px solid rgba(251, 191, 36, 0.42);
-    background: linear-gradient(135deg, #f6c453 0%, #f59e0b 100%);
-    color: #281606;
-    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.24);
+    border: 1px solid transparent;
+    background: var(--relay-accent);
+    color: var(--relay-accent-contrast);
+    font-weight: 700;
+    box-shadow: 0 10px 24px rgba(255, 107, 91, 0.22);
+  }
+
+  .primary:hover:not(:disabled) {
+    filter: brightness(1.06);
   }
 
   .delete {
-    border: 1px solid rgba(248, 113, 113, 0.45);
-    background: rgba(239, 68, 68, 0.18);
-    color: #ffe2e2;
+    border: 1px solid rgba(255, 77, 106, 0.45);
+    background: transparent;
+    color: var(--relay-danger);
   }
 
   .warning {
-    border: 1px solid rgba(251, 146, 60, 0.4);
-    background: rgba(251, 146, 60, 0.16);
-    color: #fed7aa;
+    border: 1px solid rgba(255, 194, 75, 0.45);
+    background: transparent;
+    color: var(--relay-warning);
   }
 
   .chip-confirmed {
-    background: rgba(34, 197, 94, 0.16);
-    color: #86efac;
+    border-color: rgba(62, 220, 151, 0.45);
+    color: var(--relay-success);
     display: inline-flex;
     align-items: center;
     gap: 0.32rem;
   }
 
   .chip-dot-confirmed {
-    width: 0.45rem;
-    height: 0.45rem;
+    width: 0.42rem;
+    height: 0.42rem;
     border-radius: 999px;
-    background: #22c55e;
-    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+    background: var(--relay-success);
+    box-shadow: 0 0 0 3px rgba(62, 220, 151, 0.18);
   }
 
   .status-strip,
@@ -610,10 +649,10 @@ export let apiHosts = undefined
   .metric-card {
     display: grid;
     gap: 0.3rem;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 1rem;
+    border: 1px solid var(--relay-surface-border);
+    border-radius: 0.625rem;
     padding: 0.8rem;
-    background: rgba(255, 255, 255, 0.035);
+    background: var(--relay-surface);
   }
 
   .status-pill {
@@ -622,13 +661,25 @@ export let apiHosts = undefined
     gap: 0.7rem;
   }
 
+  .status-pill strong,
+  .metric-card strong {
+    font-size: 0.8125rem;
+  }
+
+  .status-pill small,
+  .metric-card small {
+    color: var(--relay-muted);
+    font-size: 0.6875rem;
+    line-height: 1.4;
+  }
+
   .orphan-box {
     display: grid;
     gap: 0.7rem;
     padding: 0.85rem;
-    border-radius: 1rem;
-    border: 1px solid rgba(248, 113, 113, 0.22);
-    background: linear-gradient(180deg, rgba(127, 29, 29, 0.18), rgba(69, 10, 10, 0.12));
+    border-radius: 0.625rem;
+    border: 1px solid rgba(255, 77, 106, 0.3);
+    background: rgba(255, 77, 106, 0.06);
   }
 
   .orphan-head {
@@ -636,18 +687,23 @@ export let apiHosts = undefined
     gap: 0.2rem;
   }
 
+  .orphan-head strong {
+    color: var(--relay-danger);
+  }
+
   .orphan-head small {
-    color: #fecaca;
-    line-height: 1.35;
+    color: var(--relay-muted);
+    line-height: 1.4;
   }
 
   .orphan-card {
     display: grid;
     gap: 0.35rem;
     padding: 0.75rem;
-    border-radius: 0.9rem;
-    background: rgba(15, 23, 42, 0.22);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.5rem;
+    background: var(--relay-surface);
+    border: 1px solid var(--relay-surface-border);
+    font-size: 0.75rem;
   }
 
   .orphan-title {
@@ -657,9 +713,10 @@ export let apiHosts = undefined
   .alert {
     margin: 0.8rem 0 0;
     padding: 0.75rem 0.85rem;
-    border-radius: 0.9rem;
-    background: rgba(233, 19, 21, 0.12);
-    color: #ffd9d9;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(255, 77, 106, 0.3);
+    background: rgba(255, 77, 106, 0.1);
+    color: var(--relay-danger);
   }
 
   .status-text {
@@ -681,8 +738,8 @@ export let apiHosts = undefined
 
   .field small {
     color: var(--relay-muted);
-    font-size: 0.72rem;
-    line-height: 1.35;
+    font-size: 0.6875rem;
+    line-height: 1.4;
   }
 
   .field.wide {
@@ -691,17 +748,17 @@ export let apiHosts = undefined
 
   .accordion {
     margin-top: 0.9rem;
-    border: 1px solid var(--relay-panel-border);
-    border-radius: 1rem;
-    background: rgba(255, 255, 255, 0.035);
+    border: 1px solid var(--relay-surface-border);
+    border-radius: 0.625rem;
+    background: var(--relay-surface);
   }
 
   .accordion summary {
     cursor: pointer;
     list-style: none;
-    padding: 0.8rem 0.95rem;
+    padding: 0.75rem 0.9rem;
     color: var(--relay-text);
-    font: 700 0.8rem/1.1 var(--relay-font-heading);
+    font: 700 0.6875rem/1.1 var(--relay-font-mono);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
@@ -711,7 +768,7 @@ export let apiHosts = undefined
   }
 
   .accordion-body {
-    padding: 0 0.95rem 0.95rem;
+    padding: 0 0.9rem 0.9rem;
   }
 
   .advanced-grid {
@@ -723,12 +780,19 @@ export let apiHosts = undefined
   select,
   textarea {
     width: 100%;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 0.95rem;
-    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--relay-surface-border);
+    border-radius: 0.5rem;
+    background: var(--relay-field-bg);
     color: var(--relay-text);
-    padding: 0.75rem 0.85rem;
-    font: 500 0.9rem/1.35 var(--relay-font-body);
+    padding: 0.65rem 0.8rem;
+    font: 500 0.8125rem/1.4 var(--relay-font-body);
+  }
+
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid var(--relay-cyan);
+    outline-offset: 1px;
   }
 
   textarea,
@@ -736,6 +800,11 @@ export let apiHosts = undefined
     font-family: var(--relay-font-mono);
   }
 
+  .mono-block strong {
+    font-size: 0.75rem;
+    overflow-wrap: anywhere;
+  }
+
   .actions,
   .deployment-box,
   .instances {
@@ -749,11 +818,21 @@ export let apiHosts = undefined
     gap: 0.3rem;
   }
 
+  .deployment-box strong {
+    font-family: var(--relay-font-mono);
+    font-size: 0.75rem;
+  }
+
   .instance-grid {
     grid-template-columns: 1fr 1fr;
     margin: 0.75rem 0;
   }
 
+  .instance-grid strong {
+    font-size: 0.8125rem;
+    overflow-wrap: anywhere;
+  }
+
   .chip-row {
     display: flex;
     gap: 0.4rem;
@@ -761,11 +840,16 @@ export let apiHosts = undefined
   }
 
   .chip {
+    border: 1px solid var(--relay-surface-border);
     border-radius: 999px;
-    padding: 0.25rem 0.55rem;
-    background: rgba(255, 255, 255, 0.08);
-    color: var(--relay-text);
-    font-size: 0.72rem;
+    padding: 0.22rem 0.55rem;
+    background: transparent;
+    color: var(--relay-muted);
+    font-family: var(--relay-font-mono);
+    font-weight: 700;
+    font-size: 0.6563rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
   }
 
   .link-row {
@@ -775,9 +859,14 @@ export let apiHosts = undefined
   }
 
   .link-row a {
-    color: #bde0ff;
+    color: var(--relay-link);
     text-decoration: none;
-    font-weight: 700;
+    font-weight: 600;
+    font-size: 0.8125rem;
+  }
+
+  .link-row a:hover {
+    text-decoration: underline;
   }
 
   .empty {

package/svelte/components/AccordionSection.svelte

@@ -12,17 +12,17 @@
 
 <style>
   .accordion {
-    border: 1px solid var(--relay-panel-border);
-    border-radius: 1rem;
-    background: rgba(255, 255, 255, 0.035);
+    border: 1px solid var(--relay-surface-border);
+    border-radius: 0.625rem;
+    background: var(--relay-surface);
   }
 
   summary {
     cursor: pointer;
     list-style: none;
-    padding: 0.8rem 0.95rem;
+    padding: 0.75rem 0.9rem;
     color: var(--relay-text);
-    font: 700 0.8rem/1.1 var(--relay-font-heading);
+    font: 700 0.6875rem/1.1 var(--relay-font-mono);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }
@@ -32,6 +32,6 @@
   }
 
   .accordion-body {
-    padding: 0 0.95rem 0.95rem;
+    padding: 0 0.9rem 0.9rem;
   }
 </style>

package/svelte/components/CopyButton.svelte

@@ -20,12 +20,20 @@
 
 <style>
   .copy-button {
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid var(--relay-surface-border);
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.04);
-    color: var(--relay-text);
+    background: transparent;
+    color: var(--relay-muted);
     padding: 0.28rem 0.7rem;
-    font: 600 0.73rem/1 var(--relay-font-body);
+    font: 700 0.6563rem/1 var(--relay-font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
     cursor: pointer;
+    transition: color 150ms ease, border-color 150ms ease;
+  }
+
+  .copy-button:hover {
+    color: var(--relay-text);
+    border-color: var(--relay-cyan);
   }
 </style>

package/svelte/components/LauncherButton.svelte

@@ -5,22 +5,45 @@
 </script>
 
 <button class={`launcher ${mode} ${open ? 'open' : ''}`} type="button" on:click={onToggle}>
+  <svg class="mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
+    <line x1="17" y1="15.4" x2="19.6" y2="13" class="mark-link" stroke-width="2.4" stroke-linecap="round" />
+    <circle cx="11.5" cy="20.5" r="7" class="mark-node" />
+    <circle cx="23.5" cy="9.5" r="4.2" fill="none" class="mark-peer" stroke-width="2.8" />
+  </svg>
   <span>Relay Button</span>
 </button>
 
 <style>
   .launcher {
-    border: 2px solid var(--relay-launcher-border);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid var(--relay-launcher-border);
     border-radius: 999px;
-    padding: 0.9rem 1.2rem;
-    background: linear-gradient(135deg, var(--relay-blue) 0%, var(--relay-red) 100%);
-    color: white;
-    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.28);
-    font: 700 0.84rem/1 var(--relay-font-heading);
+    padding: 0.75rem 1.1rem;
+    background: var(--relay-launcher-bg);
+    color: var(--relay-launcher-text);
+    box-shadow: var(--relay-launcher-shadow);
+    font: 700 0.78rem/1 var(--relay-font-mono);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     cursor: pointer;
-    transition: transform 180ms ease;
+    transition: transform 180ms ease, border-color 180ms ease;
+  }
+
+  .mark {
+    width: 1.15rem;
+    height: 1.15rem;
+    flex: none;
+  }
+
+  .mark-node {
+    fill: var(--relay-coral);
+  }
+
+  .mark-peer,
+  .mark-link {
+    stroke: var(--relay-cyan);
   }
 
   .launcher.floating {
@@ -33,12 +56,13 @@
   .launcher.inline {
     position: relative;
     z-index: auto;
-    padding: 0.55rem 0.9rem;
-    font-size: 0.78rem;
+    padding: 0.5rem 0.85rem;
+    font-size: 0.72rem;
   }
 
   .launcher:hover,
   .launcher.open {
     transform: translateY(-2px) scale(1.02);
+    border-color: var(--relay-cyan);
   }
   </style>