@gemboss/website-ui 0.0.0-stage → 0.2.0

package/css/tokens.css

@@ -0,0 +1,200 @@
+/* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
+:root {
+  color-scheme: light;
+  --gw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --gw-text-11: 11px;
+  --gw-text-12: 12px;
+  --gw-text-13: 13px;
+  --gw-text-14: 14px;
+  --gw-text-16: 16px;
+  --gw-text-18: 18px;
+  --gw-text-20: 20px;
+  --gw-text-22: 22px;
+  --gw-text-24: 24px;
+  --gw-text-30: 30px;
+  --gw-display-h1: clamp(40px, 4.6vw, 68px);
+  --gw-display-h2: clamp(32px, 3.4vw, 52px);
+  --gw-display-weight: 600;
+  --gw-display-tracking: -0.03em;
+  --gw-heading-weight: 650;
+  --gw-heading-tracking: -0.022em;
+  --gw-heading-leading: 1.08;
+  --gw-body-size: 18px;
+  --gw-body-leading: 1.6;
+  --gw-space-0: 0;
+  --gw-space-2: 2px;
+  --gw-space-4: 4px;
+  --gw-space-6: 6px;
+  --gw-space-8: 8px;
+  --gw-space-12: 12px;
+  --gw-space-16: 16px;
+  --gw-space-20: 20px;
+  --gw-space-24: 24px;
+  --gw-space-32: 32px;
+  --gw-space-40: 40px;
+  --gw-space-48: 48px;
+  --gw-space-64: 64px;
+  --gw-space-80: 80px;
+  --gw-space-96: 96px;
+  --gw-space-120: 120px;
+  --gw-space-section: clamp(56px, 38px + 5vw, 110px);
+  --gw-radius-0: 0;
+  --gw-radius-4: 4px;
+  --gw-radius-6: 6px;
+  --gw-radius-8: 8px;
+  --gw-radius-12: 12px;
+  --gw-radius-16: 16px;
+  --gw-radius-20: 20px;
+  --gw-radius-999: 999px;
+  --gw-radius-action: 8px;
+  --gw-radius-chip: 999px;
+  --gw-radius-card: 12px;
+  --gw-radius-panel: 16px;
+  --gw-shadow: 0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06);
+  --gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);
+  --gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);
+  --gw-wrap: 1120px;
+  --gw-wrap-narrow: 780px;
+  --gw-gutter: 22px;
+  --gw-header-height: 64px;
+  --gw-button-height: 40px;
+  --gw-tap-min: 44px;
+  --gw-ease: cubic-bezier(.22,1,.36,1);
+  --gw-reveal-ms: 700ms;
+  --gw-spin-ms: 700ms;
+  --gw-wash-pink: #ff6f5e;
+  --gw-wash-violet: #7c8af7;
+  --gw-wash-sky: #43b0ff;
+  --gw-wash-mint: #1fcf9f;
+  /* accent primitives: the only colours a brand overrides (docs/theming.md) */
+  --gw-accent-light: #5661f5;
+  --gw-accent-strong-light: #3a44de;
+  --gw-accent-soft-light: #eef0fe;
+  --gw-on-accent-light: #ffffff;
+  --gw-accent-dark: #7c84ff;
+  --gw-accent-strong-dark: #a3a9ff;
+  --gw-accent-soft-dark: #1f2140;
+  --gw-on-accent-dark: #0d0d12;
+  --gw-bg: #ffffff;
+  --gw-bg-soft: #f2f3f5;
+  --gw-surface: #ffffff;
+  --gw-ink: #1b1c1e;
+  --gw-ink-2: #3b3d42;
+  --gw-muted: #686b71;
+  --gw-line: #e5e7ea;
+  --gw-line-strong: #d5d8dd;
+  --gw-action: #1b1c1e;
+  --gw-action-hover: #000000;
+  --gw-on-action: #ffffff;
+  --gw-accent: var(--gw-accent-light);
+  --gw-accent-strong: var(--gw-accent-strong-light);
+  --gw-accent-soft: var(--gw-accent-soft-light);
+  --gw-on-accent: var(--gw-on-accent-light);
+  --gw-success: #007f5f;
+  --gw-success-soft: #e3f1df;
+  --gw-warning: #9a6700;
+  --gw-night: #0c0e14;
+  --gw-night-2: #141722;
+  --gw-on-night: #e3e4e8;
+  --gw-on-night-muted: #9aa3ff;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --gw-bg: #0d0d12;
+    --gw-bg-soft: #121318;
+    --gw-surface: #16171d;
+    --gw-ink: #e3e4e8;
+    --gw-ink-2: #c4c6cc;
+    --gw-muted: #9a9ca6;
+    --gw-line: #2a2b33;
+    --gw-line-strong: #383944;
+    --gw-action: #f2f3f5;
+    --gw-action-hover: #ffffff;
+    --gw-on-action: #0d0d12;
+    --gw-accent: var(--gw-accent-dark);
+    --gw-accent-strong: var(--gw-accent-strong-dark);
+    --gw-accent-soft: var(--gw-accent-soft-dark);
+    --gw-on-accent: var(--gw-on-accent-dark);
+    --gw-success: #34c38f;
+    --gw-success-soft: #132a22;
+    --gw-warning: #e0b341;
+    --gw-night: #0a0b10;
+    --gw-night-2: #12141c;
+    --gw-on-night: #e3e4e8;
+    --gw-on-night-muted: #9aa3ff;
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --gw-bg: #0d0d12;
+  --gw-bg-soft: #121318;
+  --gw-surface: #16171d;
+  --gw-ink: #e3e4e8;
+  --gw-ink-2: #c4c6cc;
+  --gw-muted: #9a9ca6;
+  --gw-line: #2a2b33;
+  --gw-line-strong: #383944;
+  --gw-action: #f2f3f5;
+  --gw-action-hover: #ffffff;
+  --gw-on-action: #0d0d12;
+  --gw-accent: var(--gw-accent-dark);
+  --gw-accent-strong: var(--gw-accent-strong-dark);
+  --gw-accent-soft: var(--gw-accent-soft-dark);
+  --gw-on-accent: var(--gw-on-accent-dark);
+  --gw-success: #34c38f;
+  --gw-success-soft: #132a22;
+  --gw-warning: #e0b341;
+  --gw-night: #0a0b10;
+  --gw-night-2: #12141c;
+  --gw-on-night: #e3e4e8;
+  --gw-on-night-muted: #9aa3ff;
+}
+:root[data-theme="light"] {
+  color-scheme: light;
+  --gw-bg: #ffffff;
+  --gw-bg-soft: #f2f3f5;
+  --gw-surface: #ffffff;
+  --gw-ink: #1b1c1e;
+  --gw-ink-2: #3b3d42;
+  --gw-muted: #686b71;
+  --gw-line: #e5e7ea;
+  --gw-line-strong: #d5d8dd;
+  --gw-action: #1b1c1e;
+  --gw-action-hover: #000000;
+  --gw-on-action: #ffffff;
+  --gw-accent: var(--gw-accent-light);
+  --gw-accent-strong: var(--gw-accent-strong-light);
+  --gw-accent-soft: var(--gw-accent-soft-light);
+  --gw-on-accent: var(--gw-on-accent-light);
+  --gw-success: #007f5f;
+  --gw-success-soft: #e3f1df;
+  --gw-warning: #9a6700;
+  --gw-night: #0c0e14;
+  --gw-night-2: #141722;
+  --gw-on-night: #e3e4e8;
+  --gw-on-night-muted: #9aa3ff;
+}
+/* night band: the dark palette inside, on the night ground, in both themes */
+.gw-band--night, .gw-showcase {
+  color-scheme: dark;
+  --gw-bg: var(--gw-night);
+  --gw-bg-soft: var(--gw-night-2);
+  --gw-surface: var(--gw-night-2);
+  --gw-ink: #e3e4e8;
+  --gw-ink-2: #c4c6cc;
+  --gw-muted: #9a9ca6;
+  --gw-line: #2a2b33;
+  --gw-line-strong: #383944;
+  --gw-action: #f2f3f5;
+  --gw-action-hover: #ffffff;
+  --gw-on-action: #0d0d12;
+  --gw-accent: var(--gw-accent-dark);
+  --gw-accent-strong: var(--gw-accent-strong-dark);
+  --gw-accent-soft: var(--gw-accent-soft-dark);
+  --gw-on-accent: var(--gw-on-accent-dark);
+  --gw-success: #34c38f;
+  --gw-success-soft: #132a22;
+  --gw-warning: #e0b341;
+}