You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
3.2 KiB
71 lines
3.2 KiB
/**
|
|
* Eidos — visual layer entrypoint.
|
|
*
|
|
* Eidos is CSS that reads `data-*` attrs emitted by the morfo-runtime
|
|
* (via soma) and the visual channel (via sema) and applies styling.
|
|
* It does not act, it does not own state, it does not decide events.
|
|
*
|
|
* Layout (translated from the legacy `air/` layer with the architectural
|
|
* adjustments below — air targeted terra and was class-gated; eidos
|
|
* targets soma+morfo and applies universally to the data-attrs the
|
|
* morfo declares):
|
|
*
|
|
* contracts/ public token interfaces (empty declarations — themes fill)
|
|
* tokens/ per-component internal values that reference contracts
|
|
* themes/ implementations: light / dark / brand
|
|
* components/ recipes per component (compose tokens + selectors)
|
|
* archetypes transversal selectors keyed by `data-archetype`
|
|
* events reactions to `data-event-*` signals (sema visual channel)
|
|
*
|
|
* --- The `--*` token prefix ---
|
|
*
|
|
* In an app with a single owned design system there's no strict need for a
|
|
* prefix on custom properties: nothing else collides. We keep `--*`
|
|
* deliberately, for two reasons:
|
|
*
|
|
* 1. **Authorship clarity at debug time.** Inspecting an element in
|
|
* DevTools and seeing `--toggle-bg` immediately answers "this
|
|
* came from the visual layer of UIX". A bare `--toggle-bg` could
|
|
* come from anywhere — a third-party widget, a route-scoped style,
|
|
* an experiment.
|
|
*
|
|
* 2. **Override discipline.** A consumer overriding `--color-
|
|
* primary-element` knows they are overriding the visual layer
|
|
* contract, not just naming-colliding with some local variable.
|
|
* The prefix makes the public API surface explicit.
|
|
*
|
|
* Tokens are owned by eidos; recipes inside eidos consume them via
|
|
* `var(--*)`. Higher layers (sema, soma, morfo) do NOT consume
|
|
* these tokens and do NOT use the prefix — those layers carry their own
|
|
* concerns (perceptual durations, behavior, contract DNA) that are
|
|
* independent of visual rendering.
|
|
*/
|
|
|
|
/* ── Foundation: contracts (declarative API surfaces) ───────────────────── */
|
|
@import './contracts/contract-all.css';
|
|
@import './contracts/components/index.css';
|
|
|
|
/* ── Foundation: per-component token values referencing contracts ───────── */
|
|
@import './tokens/motion.css';
|
|
@import './tokens/components/index.css';
|
|
|
|
/* ── Theme: actual values filling the contract slots (default = base) ───── */
|
|
@import './themes/base/index.css';
|
|
|
|
/* ── Eidos-specific layers (no equivalent in air) ───────────────────────── */
|
|
@import './archetypes.css';
|
|
@import './events.css';
|
|
|
|
/* ── Component recipes (V1.5 hand-rolled; phase 2 replaces with air-translated) ── */
|
|
@import './components/toast.css';
|
|
@import './components/dialog.css';
|
|
@import './components/drawer.css';
|
|
@import './components/popover.css';
|
|
@import './components/tooltip.css';
|
|
@import './components/toggle/toggle.css';
|
|
@import './components/switch/switch.css';
|
|
@import './components/collapsible/collapsible.css';
|
|
@import './components/accordion.css';
|
|
@import './components/tabs.css';
|
|
@import './components/checkbox.css';
|