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.
138 lines
6.5 KiB
138 lines
6.5 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):
|
|
*
|
|
* generated/ foundation CSS generated from EidosConfig
|
|
* themes/ font assets used by the base generated theme
|
|
* components/ recipes per component (selectors and state rules)
|
|
* 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 EidosConfig and emitted by the generated foundation.
|
|
* Recipes inside eidos consume them via `var(--*)`. Higher layers (sema,
|
|
* soma, morfo) do NOT consume these tokens — those layers carry their own
|
|
* concerns (perceptual durations, behavior, contract DNA) that are
|
|
* independent of visual rendering.
|
|
*/
|
|
|
|
/* ── Foundation: generated static fallback ─────────────────────────────────
|
|
*
|
|
* ActiveEidos is the canonical source for generated foundation CSS. This
|
|
* entrypoint imports the generated artifact for SSR/static docs where
|
|
* `ActiveEidos.create({ applyDom: false })` does not inject runtime styles.
|
|
* Historical `contracts/` and `themes/base/` CSS were retired once
|
|
* ActiveEidos became the source for generated foundation/theme CSS.
|
|
*/
|
|
|
|
/* ── Theme assets: font faces used by the base static theme tokens ───────── */
|
|
@import './themes/fonts.css';
|
|
|
|
/* ── Generated foundation: ActiveEidos base config static export ────────── */
|
|
@import './generated/base.css';
|
|
|
|
/* ── Eidos-specific layers (no equivalent in air) ───────────────────────── */
|
|
@import './archetypes.css';
|
|
@import './events.css';
|
|
|
|
/* ── Component recipes ──────────────────────────────────────────────────── */
|
|
/* Layout primitives load first so component recipes can layer on top of them. */
|
|
@import './components/box/box.css';
|
|
@import './components/flex/flex.css';
|
|
@import './components/grid/grid.css';
|
|
@import './components/stack/stack.css';
|
|
@import './components/group/group.css';
|
|
@import './components/wrap/wrap.css';
|
|
@import './components/container/container.css';
|
|
@import './components/section/section.css';
|
|
@import './components/aspect-ratio/aspect-ratio.css';
|
|
@import './components/auto-grid/auto-grid.css';
|
|
@import './components/banner/banner.css';
|
|
@import './components/float/float.css';
|
|
@import './components/scroll-area/scroll-area.css';
|
|
@import './components/separator/separator.css';
|
|
@import './components/splitter/splitter.css';
|
|
@import './components/text/text.css';
|
|
@import './components/heading/heading.css';
|
|
@import './components/display/display.css';
|
|
@import './components/code/code.css';
|
|
@import './components/code-block/code-block.css';
|
|
@import './components/kbd/kbd.css';
|
|
@import './components/mark/mark.css';
|
|
@import './components/highlight/highlight.css';
|
|
@import './components/link/link.css';
|
|
@import './components/icon/icon.css';
|
|
@import './components/avatar/avatar.css';
|
|
@import './components/breadcrumb/breadcrumb.css';
|
|
@import './components/toast/toast.css';
|
|
@import './components/dialog/dialog.css';
|
|
@import './components/alert-dialog/alert-dialog.css';
|
|
@import './components/dropdown-menu/dropdown-menu.css';
|
|
@import './components/context-menu/context-menu.css';
|
|
@import './components/pin-input/pin-input.css';
|
|
@import './components/date-range-field/date-range-field.css';
|
|
@import './components/drawer/drawer.css';
|
|
@import './components/field/field.css';
|
|
@import './components/form/form.css';
|
|
@import './components/popover/popover.css';
|
|
@import './components/tooltip/tooltip.css';
|
|
@import './components/progress/progress.css';
|
|
@import './components/meter/meter.css';
|
|
@import './components/number-field/number-field.css';
|
|
@import './components/pagination/pagination.css';
|
|
@import './components/toggle/toggle.css';
|
|
@import './components/toggle-group/toggle-group.css';
|
|
@import './components/switch/switch.css';
|
|
@import './components/collapsible/collapsible.css';
|
|
@import './components/accordion/accordion.css';
|
|
@import './components/tabs/tabs.css';
|
|
@import './components/checkbox/checkbox.css';
|
|
@import './components/radio-group/radio-group.css';
|
|
@import './components/rating-group/rating-group.css';
|
|
@import './components/search-field/search-field.css';
|
|
@import './components/select/select.css';
|
|
@import './components/combobox/combobox.css';
|
|
@import './components/calendar/calendar.css';
|
|
@import './components/month-grid/month-grid.css';
|
|
@import './components/year-grid/year-grid.css';
|
|
@import './components/date-field/date-field.css';
|
|
@import './components/date-picker/date-picker.css';
|
|
@import './components/date-range-picker/date-range-picker.css';
|
|
@import './components/time-field/time-field.css';
|
|
@import './components/color-field/color-field.css';
|
|
@import './components/picker-shell/picker-shell.css';
|
|
@import './components/time-picker/time-picker.css';
|
|
@import './components/time-range-picker/time-range-picker.css';
|
|
@import './components/color-picker/color-picker.css';
|
|
@import './components/slider/slider.css';
|
|
@import './components/toolbar/toolbar.css';
|
|
@import './components/tag-group/tag-group.css';
|
|
@import './components/tags-input/tags-input.css';
|
|
@import './components/file-upload/file-upload.css';
|
|
@import './components/editable/editable.css';
|
|
@import './components/stepper/stepper.css';
|