araharah-executor
84066fde65
- components.css: btn-primary/btn-secondary, input-field, card (+header/ref/content), chip-traffic/hazard/safe, maneuver-banner/arrow, checkbox, toggle, full text-* helper scale - every value is a var(--color-*)/var(--spacing-*)/var(--type-*) reference; zero hex, zero non-zero radius; only sanctioned border geometry (1/2/3px) and the 18x18 checkbox square as literals - theme.css: @import ./components.css as last import (D-11 mockup-derived scope)
310 lines
9.3 KiB
CSS
310 lines
9.3 KiB
CSS
/*
|
||
* @araharah/theme — component layer (mockup-derived, D-11)
|
||
* ------------------------------------------------------------------
|
||
* Every Rams component the four mockup screens show: buttons,
|
||
* inputs, telemetry cards, event chips, the maneuver banner,
|
||
* checkbox, and the two-way toggle — plus the full typography
|
||
* helper scale consuming the --type-* custom properties.
|
||
*
|
||
* Values are token references ONLY (D-03, D-07): colors via
|
||
* var(--color-*), spacing via var(--spacing-*), type via
|
||
* var(--type-*). The sole literals are the design doc's machined
|
||
* border geometry (1px / 2px inset rules, 3px focus brackets)
|
||
* and the exact 18x18 checkbox square — spec geometry, not theme
|
||
* values. Absolute zero roundedness; zero blur, glow, or
|
||
* transition anywhere.
|
||
*/
|
||
|
||
@layer components {
|
||
|
||
/* ——— Buttons (design doc: Components › Buttons & Trigger Controls) ——— */
|
||
|
||
.btn-primary,
|
||
.btn-secondary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--spacing-space-sm);
|
||
font: var(--type-label-lg);
|
||
letter-spacing: var(--type-label-lg-tracking);
|
||
text-transform: uppercase;
|
||
padding: var(--spacing-space-sm) var(--spacing-space-md);
|
||
border: 2px solid var(--color-matte-black);
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Primary action: signal-orange field, matte-black label.
|
||
Hover/focus inverts — matte-black field, orange label. */
|
||
.btn-primary {
|
||
background: var(--color-signal-orange);
|
||
color: var(--color-matte-black);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--color-matte-black);
|
||
color: var(--color-signal-orange);
|
||
}
|
||
|
||
/* Secondary action: soft-beige substrate; hover/focus shifts
|
||
to the chassis-subtle nested-surface tone. */
|
||
.btn-secondary {
|
||
background: var(--color-soft-beige);
|
||
color: var(--color-matte-black);
|
||
}
|
||
.btn-secondary:hover {
|
||
background: var(--color-chassis-subtle);
|
||
}
|
||
|
||
/* Focus brackets: the 2px frame thickens to a 3px
|
||
signal-orange rule. No outline ring, no glow, no
|
||
transition — a machined edge settling into its housing. */
|
||
.btn-primary:focus-visible {
|
||
background: var(--color-matte-black);
|
||
color: var(--color-signal-orange);
|
||
border: 3px solid var(--color-signal-orange);
|
||
outline: none;
|
||
}
|
||
.btn-secondary:focus-visible {
|
||
background: var(--color-chassis-subtle);
|
||
border: 3px solid var(--color-signal-orange);
|
||
outline: none;
|
||
}
|
||
|
||
/* ——— Inputs (design doc: Components › Input Fields & Search Bars) ——— */
|
||
|
||
.input-field {
|
||
font: var(--type-body-md);
|
||
letter-spacing: var(--type-body-md-tracking);
|
||
color: var(--color-matte-black);
|
||
background: var(--color-soft-beige);
|
||
border: 2px solid var(--color-matte-black);
|
||
border-radius: 0;
|
||
padding: var(--spacing-space-sm) var(--spacing-space-md);
|
||
caret-color: var(--color-signal-orange);
|
||
}
|
||
.input-field::placeholder {
|
||
color: var(--color-outline);
|
||
}
|
||
/* Focus: the frame thickens to a 3px signal-orange rule —
|
||
zero glow, zero blur, zero animation. */
|
||
.input-field:focus {
|
||
border: 3px solid var(--color-signal-orange);
|
||
outline: none;
|
||
}
|
||
|
||
/* ——— Telemetry cards (design doc: Components › Telemetry Cards & Module Panels) ——— */
|
||
|
||
.card {
|
||
background: var(--color-soft-beige);
|
||
color: var(--color-matte-black);
|
||
border: 1px solid var(--color-matte-black);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Header plate: separated from content by a horizontal 1px
|
||
rule; label-sm uppercase category left, reference badge right. */
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--spacing-space-sm);
|
||
padding: var(--spacing-space-sm) var(--spacing-space-md);
|
||
border-bottom: 1px solid var(--color-matte-black);
|
||
color: var(--color-on-surface-variant);
|
||
}
|
||
|
||
/* Reference badge: inverted matte-black plate, label-sm. */
|
||
.card-ref {
|
||
font: var(--type-label-sm);
|
||
letter-spacing: var(--type-label-sm-tracking);
|
||
text-transform: uppercase;
|
||
background: var(--color-matte-black);
|
||
color: var(--color-pure-white);
|
||
padding: var(--spacing-space-xs) var(--spacing-space-sm);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Content block: high-contrast data point in telemetry-num
|
||
paired with an adjacent unit label. */
|
||
.card-content {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--spacing-space-xs);
|
||
padding: var(--spacing-space-sm);
|
||
}
|
||
|
||
/* ——— Chips / event tags (design doc: Components › Chips & Event Tags) ——— */
|
||
|
||
.chip-traffic,
|
||
.chip-hazard,
|
||
.chip-safe {
|
||
display: inline-block;
|
||
font: var(--type-label-sm);
|
||
letter-spacing: var(--type-label-sm-tracking);
|
||
text-transform: uppercase;
|
||
padding: var(--spacing-space-xs) var(--spacing-space-sm);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Monolithic rectangular blocks, no rounding. */
|
||
.chip-traffic {
|
||
background: var(--color-signal-orange);
|
||
color: var(--color-matte-black);
|
||
}
|
||
.chip-hazard {
|
||
background: var(--color-functional-red);
|
||
color: var(--color-pure-white);
|
||
}
|
||
.chip-safe {
|
||
background: var(--color-olive-green);
|
||
color: var(--color-pure-white);
|
||
}
|
||
|
||
/* ——— Maneuver banner (design doc: Components › Navigation HUD) ——— */
|
||
|
||
.maneuver-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--spacing-space-md);
|
||
background: var(--color-matte-black);
|
||
color: var(--color-soft-beige);
|
||
padding: var(--spacing-space-md) var(--spacing-margin);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Step register reads signal-orange inside the inverted chassis. */
|
||
.maneuver-banner .text-label-sm {
|
||
color: var(--color-signal-orange);
|
||
}
|
||
.maneuver-banner .text-telemetry-num {
|
||
color: var(--color-pure-white);
|
||
}
|
||
|
||
/* Graphic vector: sharp directional turn arrow, 3px stroke,
|
||
drawn on square linecaps (sized by the spacing scale). */
|
||
.maneuver-arrow {
|
||
width: var(--spacing-space-xl);
|
||
height: var(--spacing-space-xl);
|
||
color: var(--color-signal-orange);
|
||
flex: none;
|
||
}
|
||
|
||
/* ——— Checkbox (design doc: Components › Checkboxes & Toggle Switches) ——— */
|
||
|
||
.checkbox {
|
||
appearance: none;
|
||
display: grid;
|
||
place-content: center;
|
||
width: 18px; /* design-doc geometry: exact 18x18 square */
|
||
height: 18px;
|
||
margin: 0;
|
||
border: 2px solid var(--color-matte-black);
|
||
border-radius: 0;
|
||
background: var(--color-pure-white);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Checked state: solid centered 8x8 square in signal-orange —
|
||
pure geometric state, no checkmark glyph. */
|
||
.checkbox:checked::before {
|
||
content: "";
|
||
width: var(--spacing-space-sm);
|
||
height: var(--spacing-space-sm);
|
||
background: var(--color-signal-orange);
|
||
}
|
||
.checkbox:focus-visible {
|
||
border: 3px solid var(--color-signal-orange);
|
||
outline: none;
|
||
}
|
||
|
||
/* ——— Two-way toggle: [ OFF | ON ] — active box inverts ——— */
|
||
|
||
.toggle {
|
||
display: inline-flex;
|
||
gap: var(--spacing-space-xs);
|
||
padding: var(--spacing-space-xs);
|
||
background: var(--color-chassis-subtle);
|
||
border: 1px solid var(--color-matte-black);
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Inactive side: muted chassis-subtle field, matte-black label. */
|
||
.toggle-option {
|
||
font: var(--type-label-lg);
|
||
letter-spacing: var(--type-label-lg-tracking);
|
||
text-transform: uppercase;
|
||
padding: var(--spacing-space-sm) var(--spacing-space-md);
|
||
background: var(--color-chassis-subtle);
|
||
color: var(--color-matte-black);
|
||
border: 0;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Active side fills solidly matte-black with inverted
|
||
signal-orange label. */
|
||
.toggle-option[aria-pressed="true"] {
|
||
background: var(--color-matte-black);
|
||
color: var(--color-signal-orange);
|
||
}
|
||
.toggle-option:focus-visible {
|
||
outline: 3px solid var(--color-signal-orange);
|
||
}
|
||
|
||
/* ——— Typography helpers: the full scale, token names verbatim ——— */
|
||
|
||
.text-display-lg {
|
||
font: var(--type-display-lg);
|
||
letter-spacing: var(--type-display-lg-tracking);
|
||
}
|
||
.text-display-lg-mobile {
|
||
font: var(--type-display-lg-mobile);
|
||
letter-spacing: var(--type-display-lg-mobile-tracking);
|
||
}
|
||
.text-headline-lg {
|
||
font: var(--type-headline-lg);
|
||
letter-spacing: var(--type-headline-lg-tracking);
|
||
}
|
||
.text-headline-lg-mobile {
|
||
font: var(--type-headline-lg-mobile);
|
||
letter-spacing: var(--type-headline-lg-mobile-tracking);
|
||
}
|
||
.text-headline-md {
|
||
font: var(--type-headline-md);
|
||
letter-spacing: var(--type-headline-md-tracking);
|
||
}
|
||
.text-headline-sm {
|
||
font: var(--type-headline-sm);
|
||
letter-spacing: var(--type-headline-sm-tracking);
|
||
}
|
||
.text-body-lg {
|
||
font: var(--type-body-lg);
|
||
letter-spacing: var(--type-body-lg-tracking);
|
||
}
|
||
.text-body-md {
|
||
font: var(--type-body-md);
|
||
letter-spacing: var(--type-body-md-tracking);
|
||
}
|
||
.text-body-sm {
|
||
font: var(--type-body-sm);
|
||
letter-spacing: var(--type-body-sm-tracking);
|
||
}
|
||
.text-label-lg {
|
||
font: var(--type-label-lg);
|
||
letter-spacing: var(--type-label-lg-tracking);
|
||
}
|
||
.text-label-md {
|
||
font: var(--type-label-md);
|
||
letter-spacing: var(--type-label-md-tracking);
|
||
}
|
||
.text-label-sm {
|
||
font: var(--type-label-sm);
|
||
letter-spacing: var(--type-label-sm-tracking);
|
||
}
|
||
.text-telemetry-num {
|
||
font: var(--type-telemetry-num);
|
||
letter-spacing: var(--type-telemetry-num-tracking);
|
||
}
|
||
}
|