forked from c-fu/arah2
feat(01-design-tokens-rams-foundation-02): component layer — Rams component classes built only from tokens
- 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)
This commit is contained in:
araharah-executor
@@ -0,0 +1,309 @@
|
|||||||
|
/*
|
||||||
|
* @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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -12,6 +12,7 @@
|
|||||||
|
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "./tokens.css";
|
@import "./tokens.css";
|
||||||
|
@import "./components.css";
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Class candidates (D-02, D-06): the four mockup screens are the
|
* Class candidates (D-02, D-06): the four mockup screens are the
|
||||||
|
|||||||
Reference in New Issue
Block a user