/* Minimal VCL theme — the shared visual language for the SSR render and (later) the live runtime. Ported from the reference classic.css, trimmed to the walking-skeleton component set. */ /* v038: PROJECT GRADIENT TOKENS — the named gradients offered by the components' `backgroundGradient` dropdown. The renderer maps a chosen token to `background-image: var(--tp-grad-)`, so EVERY component that uses a gradient is themed from here: edit a token below and all of them update at once. `none` in the dropdown = no gradient (the solid backgroundColor shows). Add your own --tp-grad-* here. */ :root { --tp-grad-button: linear-gradient(to bottom, #f7f7f7, #dcdcdc); /* default button sheen (silver) */ --tp-grad-primary: linear-gradient(to bottom, #5b9bd5, #2e6da4); /* blue */ --tp-grad-success: linear-gradient(to bottom, #5cb85c, #3d8b3d); /* green */ --tp-grad-danger: linear-gradient(to bottom, #e25c5c, #c9302c); /* red */ --tp-grad-warning: linear-gradient(to bottom, #f0ad4e, #d58512); /* amber */ --tp-grad-dark: linear-gradient(to bottom, #4a4a4a, #222222); /* dark */ --tp-grad-light: linear-gradient(to bottom, #ffffff, #e6e6e6); /* light */ --tp-grad-steel: linear-gradient(to bottom, #e4e9f0, #c4ccd8); /* blue-grey */ } /* v305: THE THEME TOKEN VOCABULARY (css-import.txt M3/S4). Component styles.css consume these via var(--tp-x, ) — with NO theme every fallback IS the pre-v305 value, so the classic look is pixel-identical (R6). A token theme (themes\dark\dark.css) redefines them in one block under its .tp-theme- body scope. The vocabulary (fallbacks vary per use — one token, many shades): --tp-page-bg page background --tp-form-bg form-host default surface --tp-fg text --tp-fg-muted secondary/disabled text --tp-surface white surfaces (inputs, grid) --tp-surface-2 grey chrome (panels, headers) --tp-border control/frame borders --tp-grid-line grid row/col separator lines --tp-input-bg input fill --tp-input-border input borders --tp-btn-bg / --tp-btn-fg / --tp-btn-ring button base (+ the --tp-grad-* gradients below) --tp-grad-button-hover / --tp-grad-button-active button interaction gradients --tp-accent selection/links/sort/chevrons --tp-accent-fg text on accent --tp-accent-soft multi-select/soft highlight --tp-hover hover wash --tp-tint tinted panels (grid detail/group/aggregate strips) --tp-grid-row-alt alternate row banding --tp-shadow optional user shadow (v034) Plus the AUTO-NAMED per-class default-surface tokens: a fill surface's UNSET backgroundColor / borderColor is emitted inline as var(--tp-def--bg / -border-color, ) by SurfaceCssFromForm — themes opt classes in (see themes\dark\dark.css); instance-set props emit the bare literal and always win. */ .vcl-form-host { box-sizing: border-box; box-shadow: var(--tp-shadow, 0 0 transparent); } /* v034: optional form shadow (--tp-shadow set inline when shadow=True) */ /* Component looks now live in their packages' styles.css (served via /components.css): .vcl-button -> components/Standard/TButton, .vcl-label -> TLabel, .vcl-edit -> TEdit. */ .vcl-unknown { border: 1px dashed #c00; color: #c00; font: 10px monospace; box-sizing: border-box; } /* v374: cross-document view transitions - same-origin navigations (menu clicks) cross-fade instead of hard-swapping. Chromium 126+ honors it; other engines ignore the at-rule (plain navigation, no breakage). classic.css is linked FIRST in every page RenderFormPage emits (preview + export), so every document opts in - the rule is per-document, both the old and the new page need it for the transition to run. */ @view-transition { navigation: auto; }