/* ============================================================ AxLab Design System — Smart.Accent × Gravity UI gravity-axlab.css — THE CUSTOMIZATION LAYER AxLab is no longer hand-built per project. Its FOUNDATION is Gravity UI (@gravity-ui/uikit). This file is the *skin*: it re-points Gravity's public CSS-variable contract (`--g-*`) to AxLab Smart.Accent values, so every real Gravity component — Button, Text, Card, TextInput, Label, Switch, Table, Select… — renders in the AxLab voice with zero per-component overrides. ── How a consuming project uses it ──────────────────────────── 1. npm i @gravity-ui/uikit 2. import '@gravity-ui/uikit/styles/styles.css'; // Gravity base 3. import 'gravity-axlab.css'; // THIS file 4. … // or "light" (renders
) 5. Optionally set a direction + product accent on a wrapper:
This file overrides ONLY the semantic `--g-*` tokens; Gravity's private palette and component logic stay intact. The AxLab primitives it draws from live in `colors_and_type.css`. ============================================================ */ @import url('colors_and_type.css'); /* ============================================================ 1 · COMMON — applies to every Gravity theme (.g-root). Type families, the colossal display scale, radii, spacing. ============================================================ */ .g-root { /* ---- Type families: Gravity sans→Inter, mono→JetBrains Mono ---- */ --g-font-family-sans: var(--font-ui); --g-font-family-monospace: var(--font-mono); /* Gravity's "display" tier is AxLab's signature expanded face. Header/subheader stay on the display face too (AxLab has no mid-range sans heading — headings are the expanded face). */ --g-text-display-font-family: var(--font-display); --g-text-header-font-family: var(--font-display); --g-text-subheader-font-family: var(--font-display); /* Heavier display weight + the AxLab colossal jump. Gravity display weight is 600 → AxLab pushes to 800 with negative tracking applied through .g-text below. */ --g-text-display-font-weight: 800; --g-text-header-font-weight: 700; /* Re-scale Gravity's display tiers up to AxLab's architectural anchor (the "no mid-range h2 — polarities only" idea). */ --g-text-display-4-font-size: 64px; --g-text-display-4-line-height: 64px; --g-text-display-3-font-size: 48px; --g-text-display-3-line-height: 52px; --g-text-display-2-font-size: 36px; --g-text-display-2-line-height: 40px; --g-text-display-1-font-size: 28px; --g-text-display-1-line-height: 32px; /* ---- Corner radii — AxLab tool register ---- */ --g-border-radius-xs: 4px; --g-border-radius-s: 5px; --g-border-radius-m: 6px; --g-border-radius-l: 8px; /* card */ --g-border-radius-xl: 10px; --g-focus-border-radius: 2px; /* spacing-base is already 4px in Gravity — AxLab's 4/8/16/24/48/96 all fall out of the --g-spacing-* scale, so nothing to override. */ /* ---- Bridge: let AxLab utility classes (.panel/.glass/.eyebrow/ .ds-display/.ds-type) work on a Gravity root by aliasing AxLab semantic vars onto the live --g-* values. One world. ---- */ --bg: var(--g-color-base-background); --surface: var(--g-color-base-float); --surface-2: var(--g-color-base-generic-ultralight); --surface-hover: var(--g-color-base-simple-hover); --border: var(--g-color-line-generic); --border-strong: var(--g-color-line-generic-hover); --text: var(--g-color-text-primary); --text-soft: var(--g-color-text-complementary); --text-dim: var(--g-color-text-secondary); --text-faint: var(--g-color-text-hint); } /* Apply AxLab's negative tracking + leading to Gravity's expanded-face tiers. Gravity emits .g-text_variant_display-*/header-*/subheader-*. */ .g-root :is( [class*='g-text_variant_display'], [class*='g-text_variant_header'], [class*='g-text_variant_subheader'] ) { letter-spacing: -0.025em; } .g-root [class*='g-text_variant_display-4'] { letter-spacing: -0.04em; line-height: 0.95; } /* ============================================================ 2 · APP · DARK (.g-root_theme_dark) AxLab tool/marketing canvas — near-black #0f0f10, ONE accent. ============================================================ */ .g-root_theme_dark { /* ---- Canvas ---- */ --g-color-base-background: #0f0f10; --g-color-base-modal: #161618; /* ---- THE ACCENT — Gravity "brand" === AxLab accent (lime default). --accent is the animatable @property color from colors_and_type.css, so a whole surface can crossfade between product accents. ---- */ --g-color-base-brand: var(--accent); --g-color-base-brand-hover: var(--accent-hover); --g-color-text-brand: var(--accent); --g-color-text-brand-heavy: var(--accent-hover); --g-color-text-brand-contrast: var(--accent-ink); /* text/icon ON the accent */ --g-color-line-brand: var(--accent); --g-color-text-link: var(--accent); --g-color-text-link-hover: var(--accent-hover); --g-color-base-selection: color-mix(in srgb, var(--accent) 26%, transparent); --g-color-base-selection-hover: color-mix(in srgb, var(--accent) 34%, transparent); /* ---- Tonal surfaces — AxLab separates by TONE + AIR, so generic fills are quiet (no loud white-10 chips). ---- */ --g-color-base-generic: rgba(255, 255, 255, 0.06); --g-color-base-generic-hover: rgba(255, 255, 255, 0.10); --g-color-base-generic-medium: rgba(255, 255, 255, 0.10); --g-color-base-generic-medium-hover: rgba(255, 255, 255, 0.14); --g-color-base-generic-ultralight: rgba(255, 255, 255, 0.04); --g-color-base-simple-hover: rgba(255, 255, 255, 0.06); --g-color-base-simple-hover-solid: #1c1c1f; /* floating / solid popover surfaces */ --g-color-base-float: #161618; --g-color-base-float-hover: #1c1c1f; --g-color-base-float-medium: #1c1c1f; --g-color-base-float-heavy: #222226; --g-color-base-float-accent: #1c1c1f; /* ---- Text scale ---- */ --g-color-text-primary: #ededee; --g-color-text-complementary: #b4b4ba; --g-color-text-secondary: #8b8b92; --g-color-text-hint: #6b6b72; /* ---- Hairlines do the structural work ---- */ --g-color-line-generic: rgba(255, 255, 255, 0.08); --g-color-line-generic-hover: rgba(255, 255, 255, 0.16); --g-color-line-generic-active: rgba(255, 255, 255, 0.22); --g-color-line-generic-solid: #2a2a2e; --g-color-line-focus: var(--accent); /* ---- Semantic status → AxLab app palette ---- */ --g-color-text-info: var(--info); --g-color-text-positive: var(--ok); --g-color-text-warning: var(--warn); --g-color-text-danger: var(--err); --g-color-line-info: var(--info); --g-color-line-positive: var(--ok); --g-color-line-warning: var(--warn); --g-color-line-danger: var(--err); /* ---- Elevation ---- */ --g-color-sfx-shadow: rgba(0, 0, 0, 0.45); --g-color-sfx-veil: rgba(0, 0, 0, 0.55); --selection-bg: var(--g-color-base-selection); } /* ============================================================ 3 · APP · LIGHT (.g-root_theme_light) Daytime tool/dashboard — clean white, accent still a signal. ============================================================ */ .g-root_theme_light { --g-color-base-background: #ffffff; --g-color-base-modal: #ffffff; --g-color-base-brand: var(--accent); --g-color-base-brand-hover: var(--accent-hover); --g-color-text-brand: #5a7d12; /* lime is illegible on white → ink it down for text */ --g-color-text-brand-heavy: #4a6b0e; --g-color-text-brand-contrast: var(--accent-ink); --g-color-line-brand: var(--accent); --g-color-text-link: #4a6b0e; --g-color-text-link-hover: #3a5409; --g-color-base-selection: color-mix(in srgb, var(--accent) 42%, transparent); --g-color-base-selection-hover: color-mix(in srgb, var(--accent) 52%, transparent); --g-color-base-generic: rgba(0, 0, 0, 0.05); --g-color-base-generic-hover: rgba(0, 0, 0, 0.08); --g-color-base-generic-ultralight: #fafafa; --g-color-base-simple-hover: rgba(0, 0, 0, 0.04); --g-color-base-simple-hover-solid: #f4f4f5; --g-color-base-float: #ffffff; --g-color-base-float-hover: #fafafa; --g-color-base-float-medium: #fafafa; --g-color-base-float-heavy: #f4f4f5; --g-color-text-primary: #18181b; --g-color-text-complementary: #3f3f46; --g-color-text-secondary: #52525b; --g-color-text-hint: #a1a1aa; --g-color-line-generic: rgba(0, 0, 0, 0.08); --g-color-line-generic-hover: rgba(0, 0, 0, 0.14); --g-color-line-generic-active: rgba(0, 0, 0, 0.20); --g-color-line-generic-solid: #e4e4e7; --g-color-line-focus: var(--accent); --g-color-text-info: var(--info); --g-color-text-positive: var(--ok); --g-color-text-warning: var(--warn); --g-color-text-danger: var(--err); --g-color-line-info: var(--info); --g-color-line-positive: var(--ok); --g-color-line-warning: var(--warn); --g-color-line-danger: var(--err); --g-color-sfx-shadow: rgba(0, 0, 0, 0.10); --g-color-sfx-veil: rgba(0, 0, 0, 0.25); --selection-bg: var(--g-color-base-selection); } /* ============================================================ 4 · DIRECTIONS (the Smart.Accent "dialects") One DNA, three behaviors. Set data-shift on any wrapper inside the g-root. These tune RADIUS, DENSITY and MOTION — NOT the accent hue. Where there's less color → tool; where there's more size/motion → showcase. ============================================================ */ /* — Инструмент (tool): Supabase/Linear. Tight radius, instant motion. */ [data-shift='tool'] { --g-border-radius-m: 6px; --g-border-radius-l: 8px; --g-border-radius-xl: 8px; --ax-ease: var(--transition); /* 120ms, ≤1px, no lift */ } /* — Маркетинг (marketing): Framer. Bigger softer radius, premium ease. */ [data-shift='marketing'] { --g-border-radius-m: var(--radius-sm-lg); /* 10 */ --g-border-radius-l: var(--radius-md-lg); /* 14 */ --g-border-radius-xl: 18px; --ax-ease: var(--transition-slow); } [data-shift='marketing'] .g-button { transition: transform .26s var(--ease-premium), box-shadow .26s var(--ease-premium); } [data-shift='marketing'] .g-button_view_action:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); } /* — Портфолио (portfolio): personality. Springy overshoot on press. */ [data-shift='portfolio'] { --g-border-radius-m: var(--radius-sm-lg); --g-border-radius-l: var(--radius-md-lg); --g-border-radius-xl: 16px; --ax-ease: var(--ease-spring); } [data-shift='portfolio'] .g-button { transition: transform .35s var(--ease-spring); } [data-shift='portfolio'] .g-button_view_action:hover { transform: scale(1.05) rotate(-1.2deg); } [data-shift='portfolio'] .g-button_view_action:active { transform: scale(.94); } /* ============================================================ 5 · ACCENT CROSSFADE Because --accent is an @property , re-tinting the wrapper animates the WHOLE surface (brand fill, links, focus ring, selection) over one premium ease. Used when scope changes between products. ============================================================ */ .g-root_theme_dark, .g-root_theme_light { transition: --accent var(--transition-accent), --page-accent var(--transition-accent); }