@vobs/ui 0.3.0 → 1.0.0

package/src/styles/base.css

@@ -0,0 +1,240 @@
+/*
+ * scaffold.css - Layout, reset, typography utilities, shared atoms
+ * Provides the page chrome consumed by preview/component-*.html and
+ * ui_kits/*.html. Component-specific styles live in components.css.
+ */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* Keep browser-rendered form controls aligned with the active Vobs palette. */
+:root { color-scheme: var(--vobs-color-scheme, dark); }
+
+select,
+option,
+optgroup {
+  color: var(--text-default);
+  background-color: var(--bg-base-secondary);
+}
+
+/* Theme-aware scrollbars for page, layout and component overflow containers. */
+* {
+  scrollbar-color: var(--vobs-scrollbar-thumb) var(--vobs-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+:where([data-vobs-scrollable],
+  .vobs-kit-layout__sidebar,
+  .vobs-kit-breadcrumb,
+  .vobs-kit-tabs):hover,
+:where([data-vobs-scrollable],
+  .vobs-kit-layout__sidebar,
+  .vobs-kit-breadcrumb,
+  .vobs-kit-tabs):focus-within {
+  scrollbar-color: var(--vobs-scrollbar-thumb-hover) var(--vobs-scrollbar-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--vobs-scrollbar-size);
+  height: var(--vobs-scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--vobs-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--vobs-scrollbar-thumb);
+  border: 2px solid transparent;
+  border-radius: var(--radius-full, 9999px);
+  background-clip: padding-box;
+}
+
+:where([data-vobs-scrollable],
+  .vobs-kit-layout__sidebar,
+  .vobs-kit-breadcrumb,
+  .vobs-kit-tabs):hover::-webkit-scrollbar,
+:where([data-vobs-scrollable],
+  .vobs-kit-layout__sidebar,
+  .vobs-kit-breadcrumb,
+  .vobs-kit-tabs):focus-within::-webkit-scrollbar {
+  width: var(--vobs-scrollbar-size-hover);
+  height: var(--vobs-scrollbar-size-hover);
+}
+
+:where([data-vobs-scrollable],
+  .vobs-kit-layout__sidebar,
+  .vobs-kit-breadcrumb,
+  .vobs-kit-tabs):hover::-webkit-scrollbar-thumb,
+:where([data-vobs-scrollable],
+  .vobs-kit-layout__sidebar,
+  .vobs-kit-breadcrumb,
+  .vobs-kit-tabs):focus-within::-webkit-scrollbar-thumb {
+  background: var(--vobs-scrollbar-thumb-hover);
+  border-width: 2px;
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background: var(--vobs-scrollbar-thumb-active);
+}
+
+html, body {
+  background: var(--bg-base-default);
+  color: var(--text-default);
+  font-family: var(--body-base-font-family);
+  font-size: var(--body-base-font-size);
+  line-height: var(--body-base-line-height);
+  font-weight: var(--body-base-font-weight);
+  min-height: 100%;
+}
+/* avoid x-overflow inside the parent iframe */
+html, body { overflow-x: hidden; max-width: 100%; }
+
+img, svg, video, canvas { max-width: 100%; }
+a { color: var(--text-default); text-decoration: none; }
+a:hover { color: var(--text-default-hover); }
+hr { border: 0; border-top: 1px solid var(--border-neutral-l1); margin: var(--spacer-24) 0; }
+
+/* Section / heading helpers */
+.h1 { font-family: var(--heading-2xl-font-family); font-size: var(--heading-2xl-font-size); line-height: var(--heading-2xl-line-height); font-weight: var(--heading-2xl-font-weight); color: var(--text-default); }
+.h2 { font-family: var(--heading-md-font-family); font-size: var(--heading-md-font-size); line-height: var(--heading-md-line-height); font-weight: var(--heading-md-font-weight); color: var(--text-default); }
+.h3 { font-family: var(--heading-sm-font-family); font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight); color: var(--text-default); }
+.eyebrow { font-size: var(--body-xs-font-size); line-height: var(--body-xs-line-height); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }
+.text-secondary { color: var(--text-secondary); }
+.text-tertiary { color: var(--text-tertiary); }
+
+/* ===== Hero / brand title =====
+ * Display title for marketing heroes ("The Real AI Engineer"-style). Each
+ * brand-led letter (T / R / A / E or "T"-"R"-"A"-"E") gets its own brand
+ * accent. Use the .vui-hero-title element with .brand1-.brand4 children.
+ * Numerics inside any hero MUST inherit the body sans (NOT mono) — heroes
+ * are typeset content, not data.
+ */
+.vui-hero-title {
+  font-family: var(--heading-3xl-font-family);
+  font-size: clamp(40px, 6vw, 72px);
+  line-height: 1.04;
+  font-weight: var(--heading-3xl-font-weight, 600);
+  letter-spacing: -0.03em;
+  color: var(--text-default);
+}
+.vui-hero-title .brand1 { color: var(--bg-brand); }
+.vui-hero-title .brand2 { color: var(--text-default); }
+.vui-hero-title .brand3 { color: var(--bg-brand); }
+.vui-hero-title .brand4 { color: var(--text-default); }
+.vui-hero-title__sub {
+  display: block;
+  margin-top: var(--spacer-12);
+  font-size: clamp(28px, 4vw, 56px);
+  color: var(--text-secondary);
+  letter-spacing: -0.02em;
+}
+
+/* ===== Section title with mono index =====
+ * Pattern: [00] brand-mono index above a 2-line section heading.
+ * Reference: trae.ai value-section card titles.
+ */
+.vui-section-title__index {
+  display: block;
+  font-family: var(--code-editor-font-family, 'JetBrains Mono', ui-monospace, monospace);
+  font-size: var(--body-sm-font-size, 14px);
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--bg-brand);
+  margin-bottom: var(--spacer-16);
+}
+.vui-section-title {
+  font-family: var(--heading-xl-font-family, var(--heading-3xl-font-family));
+  font-size: clamp(24px, 2.4vw, 32px);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--text-default);
+  font-weight: var(--font-weight-strong, 600);
+  margin: 0;
+}
+
+/* ===== Layout helpers ===== */
+.row { display: flex; gap: var(--spacer-12); flex-wrap: wrap; align-items: center; }
+.col { display: flex; flex-direction: column; gap: var(--spacer-12); }
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer-16); }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacer-16); }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacer-16); }
+.stack-8 { display: flex; flex-direction: column; gap: var(--spacer-8); }
+.stack-12 { display: flex; flex-direction: column; gap: var(--spacer-12); }
+.stack-16 { display: flex; flex-direction: column; gap: var(--spacer-16); }
+.stack-24 { display: flex; flex-direction: column; gap: var(--spacer-24); }
+.stack-40 { display: flex; flex-direction: column; gap: var(--spacer-40); }
+
+/* preview header (per page) */
+.pv-header { margin-bottom: var(--spacer-32); padding-bottom: var(--spacer-16); border-bottom: 1px solid var(--border-neutral-l1); }
+.pv-header h1 { font-size: var(--heading-lg-font-size); line-height: var(--heading-lg-line-height); font-weight: var(--heading-lg-font-weight); margin-bottom: var(--spacer-4); }
+.pv-header p { color: var(--text-secondary); font-size: var(--body-sm-font-size); }
+
+.pv-section { margin-bottom: var(--spacer-32); }
+.pv-section__title { font-size: var(--heading-xs-font-size); font-weight: var(--heading-xs-font-weight); margin-bottom: var(--spacer-12); color: var(--text-default); }
+.pv-section__sub { font-size: var(--body-xs-font-size); color: var(--text-tertiary); margin-bottom: var(--spacer-12); }
+
+/* ===== Tooltip / Popover ===== */
+.vui-tooltip {
+  display: inline-flex; align-items: center; gap: var(--spacer-6);
+  padding: var(--spacer-4) var(--spacer-8);
+  background: var(--bg-tooltip);
+  color: var(--text-default);
+  border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4);
+  font-size: var(--body-xs-font-size); line-height: var(--body-xs-line-height);
+  box-shadow: 0 8px 24px rgba(0,0,0,.36);
+}
+
+.vui-popover {
+  background: var(--bg-overlay-l1);
+  border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4);
+  padding: var(--spacer-12);
+  box-shadow: 0 12px 32px rgba(0,0,0,.36);
+}
+
+/* ===== Empty state ===== */
+.vui-empty {
+  display: flex; flex-direction: column; align-items: center;
+  padding: var(--spacer-40) var(--spacer-24);
+  color: var(--text-tertiary); text-align: center;
+  border: 1px dashed var(--border-neutral-l1);
+  border-radius: var(--radius-4);
+}
+.vui-empty__icon {
+  width: 40px; height: 40px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--border-neutral-l1); margin-bottom: var(--spacer-12);
+  color: var(--icon-secondary);
+}
+.vui-empty__title { color: var(--text-default); font-size: var(--body-base-font-size); font-weight: var(--font-weight-medium, 500); margin-bottom: var(--spacer-4); }
+.vui-empty__desc { font-size: var(--body-sm-font-size); }
+
+/* ===== Code block ===== */
+.vui-code {
+  background: var(--bg-overlay-l1);
+  border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4);
+  padding: var(--spacer-12) var(--spacer-16);
+  color: var(--text-default);
+  font-family: var(--code-editor-font-family);
+  font-size: var(--code-editor-font-size);
+  line-height: var(--code-editor-line-height);
+  white-space: pre;
+  overflow: auto;
+}
+
+/* ===== Kbd =====
+ * Defined in components.css (see ── Kbd ─ section). Avoid duplicating here.
+ */
+
+/* ===== Mono / Numeric utilities =====
+ * Anything code-like or numeric (counts, currencies, percentages, IDs,
+ * tabular cells, kbd, code) MUST use the mono token + tabular figures.
+ */
+.mono,
+.num,
+code, kbd, samp, pre {
+  font-family: var(--code-editor-font-family);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1, "lnum" 1;
+}