Translates the foundation of air's visual system into eidos:
- eidos/contracts/ public token interfaces (4 root + 64 components)
- eidos/tokens/ per-component token values (62 components + motion)
- eidos/themes/base/ light + dark + _static + motion (4 files)
Mechanical translation: `--air-*` → `--eidos-*` everywhere, relative
imports preserved. The CSS is currently NOT wired into the legacy air/
folder, which stays for reference until phase 4 cleanup.
The `--eidos-*` prefix is documented in eidos/index.css with the two
reasons it earns its keep:
1. Authorship clarity at debug time (DevTools can identify the layer)
2. Override discipline (consumers know they're targeting public API)
Phase 1 only adds the foundation without touching component recipes.
The hand-rolled recipes (toast, dialog, toggle, switch, collapsible)
and the legacy hand-rolled tokens.css continue to load alongside the
new tree. Phase 2 will replace recipes with air-translated equivalents
and reconcile the duplicate motion/tint tokens.
Architectural note: air targeted terra and gated its CSS with
`.air-{component}` class on a wrapper. Eidos targets soma+morfo and
applies universally to the data-attrs the morfo declares — no class
gates, no Svelte wrappers. The morfo layer is the one that decides
which `data-*` attrs exist, which is the substantive shift between
the two systems.
Verification: smoke 68/68, morfo-check 66/66, focus rings + dialog
entrance/exit still working per Playwright check (curve unchanged).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
morfo-runtime
parent
e4d131b58d
commit
0ebc9a9d83
@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Eidos — Collapsible component recipe (V1.5).
|
||||
*
|
||||
* Disclosure pattern. Trigger expands/collapses Content; Content uses
|
||||
* the HTML `hidden` attribute (display:none) when closed, so there's no
|
||||
* transition opportunity. The recipe just paints the envelope: trigger
|
||||
* as a button, content as a padded panel.
|
||||
*
|
||||
* If a future iteration moves Collapsible to use the Presence layer
|
||||
* (data-starting-style / data-ending-style), the recipe can grow a
|
||||
* height transition via interpolate-size or grid-template-rows tricks.
|
||||
*
|
||||
* Public CSS API:
|
||||
* --eidos-collapsible-trigger-bg / -border / -bg-hover
|
||||
* --eidos-collapsible-trigger-padding / -radius
|
||||
* --eidos-collapsible-content-bg / -border
|
||||
* --eidos-collapsible-content-padding / -radius
|
||||
*/
|
||||
|
||||
[data-collapsible-trigger] {
|
||||
display: inline-block;
|
||||
padding: var(--eidos-collapsible-trigger-padding, 0.5rem 1rem);
|
||||
border: 1px solid var(--eidos-collapsible-trigger-border, hsl(220 13% 82%));
|
||||
border-radius: var(--eidos-collapsible-trigger-radius, 6px);
|
||||
background: var(--eidos-collapsible-trigger-bg, hsl(220 14% 96%));
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
transition: background-color var(--eidos-motion-fast) var(--eidos-easing-standard);
|
||||
/* cursor + hover-dim transition come from [data-archetype='trigger'] */
|
||||
}
|
||||
|
||||
[data-collapsible-trigger]:hover:not([data-disabled]):not([disabled]) {
|
||||
background: var(--eidos-collapsible-trigger-bg-hover, hsl(220 13% 91%));
|
||||
}
|
||||
|
||||
[data-collapsible-content] {
|
||||
margin-top: 0.5rem;
|
||||
padding: var(--eidos-collapsible-content-padding, 1rem);
|
||||
border: 1px solid var(--eidos-collapsible-content-border, hsl(220 13% 89%));
|
||||
border-radius: var(--eidos-collapsible-content-radius, 6px);
|
||||
background: var(--eidos-collapsible-content-bg, hsl(220 14% 98%));
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
:root {
|
||||
--eidos-accordion-provider-border-width: ;
|
||||
--eidos-accordion-provider-radius: ;
|
||||
--eidos-accordion-outline-provider-bg: ;
|
||||
--eidos-accordion-outline-provider-border: ;
|
||||
--eidos-accordion-outline-item-border: ;
|
||||
--eidos-accordion-outline-content-bg: ;
|
||||
--eidos-accordion-surface-provider-bg: ;
|
||||
--eidos-accordion-surface-provider-border: ;
|
||||
--eidos-accordion-surface-provider-shadow: ;
|
||||
--eidos-accordion-surface-item-border: ;
|
||||
--eidos-accordion-surface-content-bg: ;
|
||||
--eidos-accordion-ghost-provider-bg: ;
|
||||
--eidos-accordion-ghost-provider-border: ;
|
||||
--eidos-accordion-ghost-item-border: ;
|
||||
--eidos-accordion-ghost-content-bg: ;
|
||||
|
||||
--eidos-accordion-item-border-width: ;
|
||||
|
||||
--eidos-accordion-trigger-min-height-sm: ;
|
||||
--eidos-accordion-trigger-min-height-md: ;
|
||||
--eidos-accordion-trigger-min-height-lg: ;
|
||||
--eidos-accordion-trigger-px-sm: ;
|
||||
--eidos-accordion-trigger-px-md: ;
|
||||
--eidos-accordion-trigger-px-lg: ;
|
||||
--eidos-accordion-trigger-py-sm: ;
|
||||
--eidos-accordion-trigger-py-md: ;
|
||||
--eidos-accordion-trigger-py-lg: ;
|
||||
--eidos-accordion-trigger-gap: ;
|
||||
--eidos-accordion-trigger-font-family: ;
|
||||
--eidos-accordion-trigger-font-size-sm: ;
|
||||
--eidos-accordion-trigger-font-size-md: ;
|
||||
--eidos-accordion-trigger-font-size-lg: ;
|
||||
--eidos-accordion-trigger-font-weight: ;
|
||||
--eidos-accordion-trigger-line-height: ;
|
||||
--eidos-accordion-trigger-color: ;
|
||||
--eidos-accordion-trigger-color-open: ;
|
||||
--eidos-accordion-trigger-color-disabled: ;
|
||||
--eidos-accordion-trigger-hover-bg: ;
|
||||
--eidos-accordion-trigger-hover-color: ;
|
||||
--eidos-accordion-trigger-transition-duration: ;
|
||||
--eidos-accordion-trigger-transition-ease: ;
|
||||
--eidos-accordion-trigger-focus-ring-offset: ;
|
||||
--eidos-accordion-trigger-focus-ring-width: ;
|
||||
--eidos-accordion-trigger-focus-ring-color: ;
|
||||
|
||||
--eidos-accordion-content-px-sm: ;
|
||||
--eidos-accordion-content-px-md: ;
|
||||
--eidos-accordion-content-px-lg: ;
|
||||
--eidos-accordion-content-py-sm: ;
|
||||
--eidos-accordion-content-py-md: ;
|
||||
--eidos-accordion-content-py-lg: ;
|
||||
--eidos-accordion-content-font-family: ;
|
||||
--eidos-accordion-content-font-size-sm: ;
|
||||
--eidos-accordion-content-font-size-md: ;
|
||||
--eidos-accordion-content-font-size-lg: ;
|
||||
--eidos-accordion-content-line-height: ;
|
||||
--eidos-accordion-content-color: ;
|
||||
--eidos-accordion-content-open-duration: ;
|
||||
--eidos-accordion-content-close-duration: ;
|
||||
--eidos-accordion-content-open-ease: ;
|
||||
--eidos-accordion-content-close-ease: ;
|
||||
|
||||
--eidos-accordion-indicator-size-sm: ;
|
||||
--eidos-accordion-indicator-size-md: ;
|
||||
--eidos-accordion-indicator-size-lg: ;
|
||||
--eidos-accordion-indicator-color: ;
|
||||
--eidos-accordion-indicator-color-open: ;
|
||||
--eidos-accordion-indicator-rotation: ;
|
||||
--eidos-accordion-indicator-transition-duration: ;
|
||||
--eidos-accordion-indicator-transition-ease: ;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--eidos-aspect-ratio-radius: ;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
/*
|
||||
* AutoGrid no expone tokens públicos.
|
||||
* Es composición pura de Grid con resolución automática de columnas.
|
||||
* El contrato existe para mantener la paridad estructural del sistema.
|
||||
*/
|
||||
@ -0,0 +1,66 @@
|
||||
:root {
|
||||
--eidos-avatar-size-xs: ;
|
||||
--eidos-avatar-size-sm: ;
|
||||
--eidos-avatar-size-md: ;
|
||||
--eidos-avatar-size-lg: ;
|
||||
--eidos-avatar-size-xl: ;
|
||||
--eidos-avatar-size-xxl: ;
|
||||
|
||||
--eidos-avatar-font-family: ;
|
||||
--eidos-avatar-font-size-xs: ;
|
||||
--eidos-avatar-font-size-sm: ;
|
||||
--eidos-avatar-font-size-md: ;
|
||||
--eidos-avatar-font-size-lg: ;
|
||||
--eidos-avatar-font-size-xl: ;
|
||||
--eidos-avatar-font-size-xxl: ;
|
||||
--eidos-avatar-font-weight: ;
|
||||
|
||||
--eidos-avatar-radius-full: ;
|
||||
--eidos-avatar-radius-md: ;
|
||||
--eidos-avatar-radius-sm: ;
|
||||
--eidos-avatar-radius-none: ;
|
||||
|
||||
--eidos-avatar-border-width: ;
|
||||
|
||||
--eidos-avatar-color-primary-solid-bg: ;
|
||||
--eidos-avatar-color-primary-solid-fg: ;
|
||||
--eidos-avatar-color-primary-soft-bg: ;
|
||||
--eidos-avatar-color-primary-soft-fg: ;
|
||||
--eidos-avatar-color-primary-outline-border: ;
|
||||
--eidos-avatar-color-primary-outline-fg: ;
|
||||
|
||||
--eidos-avatar-color-neutral-solid-bg: ;
|
||||
--eidos-avatar-color-neutral-solid-fg: ;
|
||||
--eidos-avatar-color-neutral-soft-bg: ;
|
||||
--eidos-avatar-color-neutral-soft-fg: ;
|
||||
--eidos-avatar-color-neutral-outline-border: ;
|
||||
--eidos-avatar-color-neutral-outline-fg: ;
|
||||
|
||||
--eidos-avatar-color-success-solid-bg: ;
|
||||
--eidos-avatar-color-success-solid-fg: ;
|
||||
--eidos-avatar-color-success-soft-bg: ;
|
||||
--eidos-avatar-color-success-soft-fg: ;
|
||||
--eidos-avatar-color-success-outline-border: ;
|
||||
--eidos-avatar-color-success-outline-fg: ;
|
||||
|
||||
--eidos-avatar-color-warning-solid-bg: ;
|
||||
--eidos-avatar-color-warning-solid-fg: ;
|
||||
--eidos-avatar-color-warning-soft-bg: ;
|
||||
--eidos-avatar-color-warning-soft-fg: ;
|
||||
--eidos-avatar-color-warning-outline-border: ;
|
||||
--eidos-avatar-color-warning-outline-fg: ;
|
||||
|
||||
--eidos-avatar-color-danger-solid-bg: ;
|
||||
--eidos-avatar-color-danger-solid-fg: ;
|
||||
--eidos-avatar-color-danger-soft-bg: ;
|
||||
--eidos-avatar-color-danger-soft-fg: ;
|
||||
--eidos-avatar-color-danger-outline-border: ;
|
||||
--eidos-avatar-color-danger-outline-fg: ;
|
||||
|
||||
--eidos-avatar-color-info-solid-bg: ;
|
||||
--eidos-avatar-color-info-solid-fg: ;
|
||||
--eidos-avatar-color-info-soft-bg: ;
|
||||
--eidos-avatar-color-info-soft-fg: ;
|
||||
--eidos-avatar-color-info-outline-border: ;
|
||||
--eidos-avatar-color-info-outline-fg: ;
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
:root {
|
||||
--eidos-badge-gap: ;
|
||||
--eidos-badge-radius: ;
|
||||
--eidos-badge-border-width: ;
|
||||
--eidos-badge-font-family: ;
|
||||
--eidos-badge-font-weight: ;
|
||||
--eidos-badge-line-height: ;
|
||||
--eidos-badge-letter-spacing: ;
|
||||
--eidos-badge-shadow-solid: ;
|
||||
|
||||
--eidos-badge-min-height-sm: ;
|
||||
--eidos-badge-min-height-md: ;
|
||||
--eidos-badge-min-height-lg: ;
|
||||
--eidos-badge-px-sm: ;
|
||||
--eidos-badge-px-md: ;
|
||||
--eidos-badge-px-lg: ;
|
||||
--eidos-badge-py-sm: ;
|
||||
--eidos-badge-py-md: ;
|
||||
--eidos-badge-py-lg: ;
|
||||
--eidos-badge-font-size-sm: ;
|
||||
--eidos-badge-font-size-md: ;
|
||||
--eidos-badge-font-size-lg: ;
|
||||
|
||||
--eidos-badge-bg-solid-primary: ;
|
||||
--eidos-badge-border-solid-primary: ;
|
||||
--eidos-badge-color-solid-primary: ;
|
||||
--eidos-badge-bg-subtle-primary: ;
|
||||
--eidos-badge-border-subtle-primary: ;
|
||||
--eidos-badge-color-subtle-primary: ;
|
||||
--eidos-badge-bg-outline-primary: ;
|
||||
--eidos-badge-border-outline-primary: ;
|
||||
--eidos-badge-color-outline-primary: ;
|
||||
|
||||
--eidos-badge-bg-solid-neutral: ;
|
||||
--eidos-badge-border-solid-neutral: ;
|
||||
--eidos-badge-color-solid-neutral: ;
|
||||
--eidos-badge-bg-subtle-neutral: ;
|
||||
--eidos-badge-border-subtle-neutral: ;
|
||||
--eidos-badge-color-subtle-neutral: ;
|
||||
--eidos-badge-bg-outline-neutral: ;
|
||||
--eidos-badge-border-outline-neutral: ;
|
||||
--eidos-badge-color-outline-neutral: ;
|
||||
|
||||
--eidos-badge-bg-solid-success: ;
|
||||
--eidos-badge-border-solid-success: ;
|
||||
--eidos-badge-color-solid-success: ;
|
||||
--eidos-badge-bg-subtle-success: ;
|
||||
--eidos-badge-border-subtle-success: ;
|
||||
--eidos-badge-color-subtle-success: ;
|
||||
--eidos-badge-bg-outline-success: ;
|
||||
--eidos-badge-border-outline-success: ;
|
||||
--eidos-badge-color-outline-success: ;
|
||||
|
||||
--eidos-badge-bg-solid-warning: ;
|
||||
--eidos-badge-border-solid-warning: ;
|
||||
--eidos-badge-color-solid-warning: ;
|
||||
--eidos-badge-bg-subtle-warning: ;
|
||||
--eidos-badge-border-subtle-warning: ;
|
||||
--eidos-badge-color-subtle-warning: ;
|
||||
--eidos-badge-bg-outline-warning: ;
|
||||
--eidos-badge-border-outline-warning: ;
|
||||
--eidos-badge-color-outline-warning: ;
|
||||
|
||||
--eidos-badge-bg-solid-danger: ;
|
||||
--eidos-badge-border-solid-danger: ;
|
||||
--eidos-badge-color-solid-danger: ;
|
||||
--eidos-badge-bg-subtle-danger: ;
|
||||
--eidos-badge-border-subtle-danger: ;
|
||||
--eidos-badge-color-subtle-danger: ;
|
||||
--eidos-badge-bg-outline-danger: ;
|
||||
--eidos-badge-border-outline-danger: ;
|
||||
--eidos-badge-color-outline-danger: ;
|
||||
|
||||
--eidos-badge-bg-solid-info: ;
|
||||
--eidos-badge-border-solid-info: ;
|
||||
--eidos-badge-color-solid-info: ;
|
||||
--eidos-badge-bg-subtle-info: ;
|
||||
--eidos-badge-border-subtle-info: ;
|
||||
--eidos-badge-color-subtle-info: ;
|
||||
--eidos-badge-bg-outline-info: ;
|
||||
--eidos-badge-border-outline-info: ;
|
||||
--eidos-badge-color-outline-info: ;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
:root {
|
||||
--eidos-box-box-sizing: ;
|
||||
--eidos-box-min-width-base: ;
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
:root {
|
||||
/* Dimensions */
|
||||
--eidos-button-height-2xs: ;
|
||||
--eidos-button-height-xs: ;
|
||||
--eidos-button-height-sm: ;
|
||||
--eidos-button-height-md: ;
|
||||
--eidos-button-height-lg: ;
|
||||
--eidos-button-height-xl: ;
|
||||
|
||||
--eidos-button-px-2xs: ;
|
||||
--eidos-button-px-xs: ;
|
||||
--eidos-button-px-sm: ;
|
||||
--eidos-button-px-md: ;
|
||||
--eidos-button-px-lg: ;
|
||||
--eidos-button-px-xl: ;
|
||||
|
||||
--eidos-button-gap-2xs: ;
|
||||
--eidos-button-gap-xs: ;
|
||||
--eidos-button-gap-sm: ;
|
||||
--eidos-button-gap-md: ;
|
||||
--eidos-button-gap-lg: ;
|
||||
--eidos-button-gap-xl: ;
|
||||
|
||||
/* Global appearance */
|
||||
--eidos-button-radius: ;
|
||||
--eidos-button-font-family: ;
|
||||
--eidos-button-line-height: ;
|
||||
--eidos-button-letter-spacing: ;
|
||||
--eidos-button-font-weight: ;
|
||||
--eidos-button-font-size-2xs: ;
|
||||
--eidos-button-font-size-xs: ;
|
||||
--eidos-button-font-size-sm: ;
|
||||
--eidos-button-font-size-md: ;
|
||||
--eidos-button-font-size-lg: ;
|
||||
--eidos-button-font-size-xl: ;
|
||||
--eidos-button-font-weight-2xs: ;
|
||||
--eidos-button-font-weight-xs: ;
|
||||
--eidos-button-font-weight-sm: ;
|
||||
--eidos-button-font-weight-md: ;
|
||||
--eidos-button-font-weight-lg: ;
|
||||
--eidos-button-font-weight-xl: ;
|
||||
--eidos-button-icon-size-2xs: ;
|
||||
--eidos-button-icon-size-xs: ;
|
||||
--eidos-button-icon-size-sm: ;
|
||||
--eidos-button-icon-size-md: ;
|
||||
--eidos-button-icon-size-lg: ;
|
||||
--eidos-button-icon-size-xl: ;
|
||||
--eidos-button-icon-only-size-2xs: ;
|
||||
--eidos-button-icon-only-size-xs: ;
|
||||
--eidos-button-icon-only-size-sm: ;
|
||||
--eidos-button-icon-only-size-md: ;
|
||||
--eidos-button-icon-only-size-lg: ;
|
||||
--eidos-button-icon-only-size-xl: ;
|
||||
--eidos-button-radius-2xs: ;
|
||||
--eidos-button-radius-xs: ;
|
||||
--eidos-button-radius-sm: ;
|
||||
--eidos-button-radius-md: ;
|
||||
--eidos-button-radius-lg: ;
|
||||
--eidos-button-radius-xl: ;
|
||||
--eidos-button-rounded-sm: ;
|
||||
--eidos-button-rounded-md: ;
|
||||
--eidos-button-rounded-lg: ;
|
||||
--eidos-button-rounded-xl: ;
|
||||
--eidos-button-rounded-xxl: ;
|
||||
--eidos-button-rounded-full: ;
|
||||
--eidos-button-transition-duration: ;
|
||||
--eidos-button-transition-ease: ;
|
||||
|
||||
/* Solid */
|
||||
--eidos-button-solid-bg: ;
|
||||
--eidos-button-solid-bg-hover: ;
|
||||
--eidos-button-solid-fg: ;
|
||||
|
||||
/* Soft */
|
||||
--eidos-button-soft-bg: ;
|
||||
--eidos-button-soft-bg-hover: ;
|
||||
--eidos-button-soft-fg: ;
|
||||
|
||||
/* Surface */
|
||||
--eidos-button-surface-bg: ;
|
||||
--eidos-button-surface-bg-hover: ;
|
||||
--eidos-button-surface-fg: ;
|
||||
--eidos-button-surface-border: ;
|
||||
|
||||
/* Outline */
|
||||
--eidos-button-outline-bg: ;
|
||||
--eidos-button-outline-bg-hover: ;
|
||||
--eidos-button-outline-fg: ;
|
||||
--eidos-button-outline-border: ;
|
||||
|
||||
/* Ghost */
|
||||
--eidos-button-ghost-bg: ;
|
||||
--eidos-button-ghost-bg-hover: ;
|
||||
--eidos-button-ghost-fg: ;
|
||||
|
||||
/* Plain */
|
||||
--eidos-button-plain-bg: ;
|
||||
--eidos-button-plain-fg: ;
|
||||
--eidos-button-plain-fg-hover: ;
|
||||
|
||||
--eidos-button-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
:root {
|
||||
--eidos-calendar-gap: var(--eidos-space-2);
|
||||
--eidos-calendar-header-gap: var(--eidos-space-2);
|
||||
--eidos-calendar-padding: var(--eidos-space-2);
|
||||
--eidos-calendar-radius: var(--eidos-radius-xl);
|
||||
--eidos-calendar-border-width: 1px;
|
||||
--eidos-calendar-bg: transparent;
|
||||
--eidos-calendar-border: transparent;
|
||||
--eidos-calendar-shadow: none;
|
||||
--eidos-calendar-invalid-border: transparent;
|
||||
--eidos-calendar-readonly-opacity: 1;
|
||||
--eidos-calendar-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-calendar-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
--eidos-calendar-heading-font-family: var(--eidos-font-ui);
|
||||
--eidos-calendar-heading-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-calendar-heading-font-weight: var(--eidos-font-weight-semibold);
|
||||
--eidos-calendar-heading-line-height: var(--eidos-leading-ui);
|
||||
--eidos-calendar-heading-letter-spacing: var(--eidos-tracking-tight);
|
||||
--eidos-calendar-heading-color: inherit;
|
||||
--eidos-calendar-header-padding: var(--eidos-space-2);
|
||||
--eidos-calendar-header-radius: var(--eidos-radius-lg);
|
||||
--eidos-calendar-header-bg: transparent;
|
||||
--eidos-calendar-header-border-width: var(--eidos-border-width);
|
||||
--eidos-calendar-header-border: transparent;
|
||||
|
||||
--eidos-calendar-nav-size-sm: 1.9rem;
|
||||
--eidos-calendar-nav-size-md: 2.15rem;
|
||||
--eidos-calendar-nav-size-lg: 2.4rem;
|
||||
--eidos-calendar-nav-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-calendar-nav-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-calendar-nav-font-size-lg: var(--eidos-font-size-md);
|
||||
--eidos-calendar-nav-radius: var(--eidos-radius-md);
|
||||
--eidos-calendar-nav-border-width: 1px;
|
||||
--eidos-calendar-nav-bg: transparent;
|
||||
--eidos-calendar-nav-border: transparent;
|
||||
--eidos-calendar-nav-border-hover: transparent;
|
||||
--eidos-calendar-nav-color: inherit;
|
||||
--eidos-calendar-nav-color-hover: inherit;
|
||||
--eidos-calendar-nav-bg-hover: transparent;
|
||||
--eidos-calendar-nav-focus-ring: none;
|
||||
--eidos-calendar-nav-disabled-opacity: 0.45;
|
||||
--eidos-calendar-nav-cluster-gap: var(--eidos-space-2);
|
||||
|
||||
--eidos-calendar-select-height-sm: 1.9rem;
|
||||
--eidos-calendar-select-height-md: 2.15rem;
|
||||
--eidos-calendar-select-height-lg: 2.4rem;
|
||||
--eidos-calendar-select-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-calendar-select-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-calendar-select-font-size-lg: var(--eidos-font-size-md);
|
||||
--eidos-calendar-select-px: var(--eidos-space-3);
|
||||
--eidos-calendar-select-radius: var(--eidos-radius-md);
|
||||
--eidos-calendar-select-border-width: 1px;
|
||||
--eidos-calendar-select-bg: transparent;
|
||||
--eidos-calendar-select-border: transparent;
|
||||
--eidos-calendar-select-border-hover: transparent;
|
||||
--eidos-calendar-select-border-focus: transparent;
|
||||
--eidos-calendar-select-color: inherit;
|
||||
--eidos-calendar-select-disabled-bg: transparent;
|
||||
--eidos-calendar-select-disabled-border: transparent;
|
||||
--eidos-calendar-select-disabled-color: inherit;
|
||||
--eidos-calendar-select-focus-ring: none;
|
||||
--eidos-calendar-select-font-family: var(--eidos-font-ui);
|
||||
--eidos-calendar-select-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-calendar-select-line-height: var(--eidos-leading-ui);
|
||||
|
||||
--eidos-calendar-weekday-padding-block: var(--eidos-space-2);
|
||||
--eidos-calendar-weekday-font-family: var(--eidos-font-ui);
|
||||
--eidos-calendar-weekday-font-size: var(--eidos-font-size-2xs);
|
||||
--eidos-calendar-weekday-font-weight: var(--eidos-font-weight-semibold);
|
||||
--eidos-calendar-weekday-line-height: var(--eidos-leading-ui);
|
||||
--eidos-calendar-weekday-letter-spacing: 0.04em;
|
||||
--eidos-calendar-weekday-color: inherit;
|
||||
--eidos-calendar-grid-bg: transparent;
|
||||
--eidos-calendar-grid-border-width: var(--eidos-border-width);
|
||||
--eidos-calendar-grid-border: transparent;
|
||||
--eidos-calendar-grid-radius: var(--eidos-radius-lg);
|
||||
--eidos-calendar-grid-padding: var(--eidos-space-2);
|
||||
--eidos-calendar-grid-shadow: none;
|
||||
--eidos-calendar-grid-gap: 0.3rem;
|
||||
--eidos-calendar-grid-head-divider: transparent;
|
||||
|
||||
--eidos-calendar-cell-padding: 0.125rem;
|
||||
--eidos-calendar-day-size-sm: 2.2rem;
|
||||
--eidos-calendar-day-size-md: 2.65rem;
|
||||
--eidos-calendar-day-size-lg: 3rem;
|
||||
--eidos-calendar-day-radius-sm: var(--eidos-radius-full);
|
||||
--eidos-calendar-day-radius-md: var(--eidos-radius-full);
|
||||
--eidos-calendar-day-radius-lg: var(--eidos-radius-full);
|
||||
--eidos-calendar-day-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-calendar-day-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-calendar-day-font-size-lg: var(--eidos-font-size-md);
|
||||
--eidos-calendar-day-font-family: var(--eidos-font-ui);
|
||||
--eidos-calendar-day-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-calendar-day-line-height: var(--eidos-leading-ui);
|
||||
--eidos-calendar-day-font-weight-selected: var(--eidos-font-weight-medium);
|
||||
--eidos-calendar-day-border-width: var(--eidos-border-width);
|
||||
--eidos-calendar-day-bg: transparent;
|
||||
--eidos-calendar-day-border: transparent;
|
||||
--eidos-calendar-day-shadow: none;
|
||||
--eidos-calendar-day-color: inherit;
|
||||
--eidos-calendar-day-color-hover: inherit;
|
||||
--eidos-calendar-day-color-today: inherit;
|
||||
--eidos-calendar-day-color-selected: inherit;
|
||||
--eidos-calendar-day-color-disabled: inherit;
|
||||
--eidos-calendar-day-color-outside: inherit;
|
||||
--eidos-calendar-day-color-unavailable: inherit;
|
||||
--eidos-calendar-day-bg-today: transparent;
|
||||
--eidos-calendar-day-bg-hover: transparent;
|
||||
--eidos-calendar-day-bg-selected: transparent;
|
||||
--eidos-calendar-day-border-today: transparent;
|
||||
--eidos-calendar-day-border-hover: transparent;
|
||||
--eidos-calendar-day-border-selected: transparent;
|
||||
--eidos-calendar-day-border-disabled: transparent;
|
||||
--eidos-calendar-day-shadow-hover: none;
|
||||
--eidos-calendar-day-shadow-selected: none;
|
||||
--eidos-calendar-day-focus-ring: none;
|
||||
--eidos-calendar-day-today-ring: currentColor;
|
||||
--eidos-calendar-day-cursor: pointer;
|
||||
--eidos-calendar-readonly-day-cursor: default;
|
||||
--eidos-calendar-day-disabled-opacity: 0.5;
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
:root {
|
||||
--eidos-checkbox-size-sm-box-size: ;
|
||||
--eidos-checkbox-size-sm-indicator-size: ;
|
||||
--eidos-checkbox-size-sm-indicator-stroke: ;
|
||||
--eidos-checkbox-size-sm-indeterminate-width: ;
|
||||
--eidos-checkbox-size-sm-indeterminate-height: ;
|
||||
|
||||
--eidos-checkbox-size-md-box-size: ;
|
||||
--eidos-checkbox-size-md-indicator-size: ;
|
||||
--eidos-checkbox-size-md-indicator-stroke: ;
|
||||
--eidos-checkbox-size-md-indeterminate-width: ;
|
||||
--eidos-checkbox-size-md-indeterminate-height: ;
|
||||
|
||||
--eidos-checkbox-size-lg-box-size: ;
|
||||
--eidos-checkbox-size-lg-indicator-size: ;
|
||||
--eidos-checkbox-size-lg-indicator-stroke: ;
|
||||
--eidos-checkbox-size-lg-indeterminate-width: ;
|
||||
--eidos-checkbox-size-lg-indeterminate-height: ;
|
||||
|
||||
--eidos-checkbox-radius: ;
|
||||
--eidos-checkbox-border-width: ;
|
||||
--eidos-checkbox-indeterminate-radius: ;
|
||||
|
||||
--eidos-checkbox-focus-ring-offset: ;
|
||||
--eidos-checkbox-focus-ring-width: ;
|
||||
--eidos-checkbox-focus-ring-color: ;
|
||||
--eidos-checkbox-focus-ring-surface: ;
|
||||
--eidos-checkbox-focus-ring: ;
|
||||
--eidos-checkbox-transition-duration: ;
|
||||
--eidos-checkbox-transition-ease: ;
|
||||
|
||||
--eidos-checkbox-bg-off: ;
|
||||
--eidos-checkbox-bg-off-hover: ;
|
||||
--eidos-checkbox-border-off: ;
|
||||
--eidos-checkbox-border-off-hover: ;
|
||||
|
||||
--eidos-checkbox-bg-disabled: ;
|
||||
--eidos-checkbox-border-disabled: ;
|
||||
--eidos-checkbox-disabled-opacity: ;
|
||||
|
||||
--eidos-checkbox-indicator-color: ;
|
||||
--eidos-checkbox-indicator-color-disabled: ;
|
||||
|
||||
--eidos-checkbox-color-primary-solid: ;
|
||||
--eidos-checkbox-color-primary-solid-hover: ;
|
||||
|
||||
--eidos-checkbox-color-neutral-solid: ;
|
||||
--eidos-checkbox-color-neutral-solid-hover: ;
|
||||
|
||||
--eidos-checkbox-color-success-solid: ;
|
||||
--eidos-checkbox-color-success-solid-hover: ;
|
||||
|
||||
--eidos-checkbox-color-warning-solid: ;
|
||||
--eidos-checkbox-color-warning-solid-hover: ;
|
||||
|
||||
--eidos-checkbox-color-danger-solid: ;
|
||||
--eidos-checkbox-color-danger-solid-hover: ;
|
||||
|
||||
--eidos-checkbox-color-info-solid: ;
|
||||
--eidos-checkbox-color-info-solid-hover: ;
|
||||
|
||||
--eidos-checkbox-group-gap: ;
|
||||
--eidos-checkbox-group-label-font-family: ;
|
||||
--eidos-checkbox-group-label-font-size: ;
|
||||
--eidos-checkbox-group-label-font-weight: ;
|
||||
--eidos-checkbox-group-label-line-height: ;
|
||||
--eidos-checkbox-group-label-color: ;
|
||||
--eidos-checkbox-group-label-color-disabled: ;
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
/*
|
||||
* air/contracts/component/code-block.css
|
||||
*
|
||||
* API pública del componente CodeBlock.
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-code-block-font-family: ;
|
||||
--eidos-code-block-font-weight: ;
|
||||
--eidos-code-block-header-font-weight: ;
|
||||
--eidos-code-block-filename-font-size: ;
|
||||
--eidos-code-block-filename-line-height: ;
|
||||
--eidos-code-block-lang-font-size: ;
|
||||
--eidos-code-block-lang-line-height: ;
|
||||
--eidos-code-block-copy-font-size: ;
|
||||
--eidos-code-block-copy-line-height: ;
|
||||
|
||||
--eidos-code-block-border-width: ;
|
||||
--eidos-code-block-bg: ;
|
||||
--eidos-code-block-border: ;
|
||||
--eidos-code-block-radius: ;
|
||||
--eidos-code-block-color: ;
|
||||
|
||||
--eidos-code-block-header-bg: ;
|
||||
--eidos-code-block-header-border: ;
|
||||
--eidos-code-block-header-color: ;
|
||||
|
||||
--eidos-code-block-padding-x: ;
|
||||
--eidos-code-block-padding-y: ;
|
||||
--eidos-code-block-header-px: ;
|
||||
--eidos-code-block-header-py: ;
|
||||
--eidos-code-block-header-gap: ;
|
||||
|
||||
/* Copy control */
|
||||
--eidos-code-block-copy-bg: ;
|
||||
--eidos-code-block-copy-border-width: ;
|
||||
--eidos-code-block-copy-border: ;
|
||||
--eidos-code-block-copy-color: ;
|
||||
--eidos-code-block-copy-gap: ;
|
||||
--eidos-code-block-copy-px: ;
|
||||
--eidos-code-block-copy-py: ;
|
||||
--eidos-code-block-copy-radius: ;
|
||||
--eidos-code-block-copy-hover-bg: ;
|
||||
--eidos-code-block-copy-hover-border: ;
|
||||
--eidos-code-block-copy-hover-color: ;
|
||||
--eidos-code-block-copy-transition-duration: ;
|
||||
--eidos-code-block-copy-transition-ease: ;
|
||||
--eidos-code-block-copy-focus-ring-width: ;
|
||||
--eidos-code-block-copy-focus-ring-offset: ;
|
||||
--eidos-code-block-copy-focus-ring-color: ;
|
||||
--eidos-code-block-copy-success-border: ;
|
||||
--eidos-code-block-copy-success-color: ;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* air/contracts/component/code.css
|
||||
*
|
||||
* API pública del componente Code.
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*
|
||||
* Code usa siempre --eidos-font-code. No tiene prop family ni weight.
|
||||
* variant='block' renderiza con fondo y padding.
|
||||
* variant='inline' es solo tipografía con fondo sutil.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-code-font-family: ;
|
||||
--eidos-code-font-weight: ;
|
||||
|
||||
/* Colores */
|
||||
--eidos-code-color-primary: ;
|
||||
--eidos-code-color-secondary: ;
|
||||
|
||||
/* Block */
|
||||
--eidos-code-border-width: ;
|
||||
--eidos-code-bg: ;
|
||||
--eidos-code-border: ;
|
||||
--eidos-code-radius: ;
|
||||
--eidos-code-padding-x: ;
|
||||
--eidos-code-padding-y: ;
|
||||
|
||||
/* Inline */
|
||||
--eidos-code-inline-bg: ;
|
||||
--eidos-code-inline-border: ;
|
||||
--eidos-code-inline-radius: ;
|
||||
--eidos-code-inline-px: ;
|
||||
--eidos-code-inline-py: ;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
:root {
|
||||
--eidos-collapsible-trigger-font-family: ;
|
||||
--eidos-collapsible-trigger-font-size: ;
|
||||
--eidos-collapsible-trigger-font-weight: ;
|
||||
--eidos-collapsible-trigger-color: ;
|
||||
--eidos-collapsible-trigger-color-hover: ;
|
||||
--eidos-collapsible-trigger-bg-hover: ;
|
||||
--eidos-collapsible-trigger-radius: ;
|
||||
--eidos-collapsible-trigger-padding: ;
|
||||
|
||||
--eidos-collapsible-content-padding: ;
|
||||
|
||||
--eidos-collapsible-transition-duration: ;
|
||||
--eidos-collapsible-transition-ease: ;
|
||||
--eidos-collapsible-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,136 @@
|
||||
:root {
|
||||
--eidos-color-picker-trigger-height-sm: ;
|
||||
--eidos-color-picker-trigger-height-md: ;
|
||||
--eidos-color-picker-trigger-height-lg: ;
|
||||
--eidos-color-picker-trigger-px-sm: ;
|
||||
--eidos-color-picker-trigger-px-md: ;
|
||||
--eidos-color-picker-trigger-px-lg: ;
|
||||
--eidos-color-picker-trigger-gap-sm: ;
|
||||
--eidos-color-picker-trigger-gap-md: ;
|
||||
--eidos-color-picker-trigger-gap-lg: ;
|
||||
--eidos-color-picker-trigger-font-family: ;
|
||||
--eidos-color-picker-trigger-font-size-sm: ;
|
||||
--eidos-color-picker-trigger-font-size-md: ;
|
||||
--eidos-color-picker-trigger-font-size-lg: ;
|
||||
--eidos-color-picker-trigger-font-weight: ;
|
||||
--eidos-color-picker-trigger-line-height: ;
|
||||
--eidos-color-picker-trigger-letter-spacing: ;
|
||||
--eidos-color-picker-trigger-radius-sm: ;
|
||||
--eidos-color-picker-trigger-radius-md: ;
|
||||
--eidos-color-picker-trigger-radius-lg: ;
|
||||
--eidos-color-picker-trigger-border-width: ;
|
||||
--eidos-color-picker-trigger-transition-duration: ;
|
||||
--eidos-color-picker-trigger-transition-ease: ;
|
||||
--eidos-color-picker-trigger-swatch-size-sm: ;
|
||||
--eidos-color-picker-trigger-swatch-size-md: ;
|
||||
--eidos-color-picker-trigger-swatch-size-lg: ;
|
||||
--eidos-color-picker-trigger-swatch-border: ;
|
||||
--eidos-color-picker-trigger-surface-bg: ;
|
||||
--eidos-color-picker-trigger-surface-fg: ;
|
||||
--eidos-color-picker-trigger-surface-border: ;
|
||||
--eidos-color-picker-trigger-surface-hover-bg: ;
|
||||
--eidos-color-picker-trigger-surface-hover-border: ;
|
||||
--eidos-color-picker-trigger-outline-bg: ;
|
||||
--eidos-color-picker-trigger-outline-fg: ;
|
||||
--eidos-color-picker-trigger-outline-border: ;
|
||||
--eidos-color-picker-trigger-outline-hover-bg: ;
|
||||
--eidos-color-picker-trigger-outline-hover-border: ;
|
||||
--eidos-color-picker-trigger-ghost-bg: ;
|
||||
--eidos-color-picker-trigger-ghost-fg: ;
|
||||
--eidos-color-picker-trigger-ghost-border: ;
|
||||
--eidos-color-picker-trigger-ghost-hover-bg: ;
|
||||
--eidos-color-picker-trigger-ghost-hover-border: ;
|
||||
--eidos-color-picker-content-width-sm: ;
|
||||
--eidos-color-picker-content-width-md: ;
|
||||
--eidos-color-picker-content-width-lg: ;
|
||||
--eidos-color-picker-content-padding-sm: ;
|
||||
--eidos-color-picker-content-padding-md: ;
|
||||
--eidos-color-picker-content-padding-lg: ;
|
||||
--eidos-color-picker-content-gap: ;
|
||||
--eidos-color-picker-content-radius: ;
|
||||
--eidos-color-picker-content-border-width: ;
|
||||
--eidos-color-picker-content-border: ;
|
||||
--eidos-color-picker-content-bg: ;
|
||||
--eidos-color-picker-content-shadow: ;
|
||||
--eidos-color-picker-area-height: ;
|
||||
--eidos-color-picker-area-radius: ;
|
||||
--eidos-color-picker-area-border-width: ;
|
||||
--eidos-color-picker-area-border: ;
|
||||
--eidos-color-picker-area-thumb-size: ;
|
||||
--eidos-color-picker-area-thumb-border-width: ;
|
||||
--eidos-color-picker-area-thumb-border: ;
|
||||
--eidos-color-picker-area-thumb-shadow: ;
|
||||
--eidos-color-picker-slider-height: ;
|
||||
--eidos-color-picker-slider-radius: ;
|
||||
--eidos-color-picker-slider-border-width: ;
|
||||
--eidos-color-picker-slider-border: ;
|
||||
--eidos-color-picker-slider-thumb-size: ;
|
||||
--eidos-color-picker-slider-thumb-border-width: ;
|
||||
--eidos-color-picker-slider-thumb-border: ;
|
||||
--eidos-color-picker-slider-thumb-bg: ;
|
||||
--eidos-color-picker-slider-thumb-shadow: ;
|
||||
--eidos-color-picker-input-height-sm: ;
|
||||
--eidos-color-picker-input-height-md: ;
|
||||
--eidos-color-picker-input-height-lg: ;
|
||||
--eidos-color-picker-input-px-sm: ;
|
||||
--eidos-color-picker-input-px-md: ;
|
||||
--eidos-color-picker-input-px-lg: ;
|
||||
--eidos-color-picker-input-font-family: ;
|
||||
--eidos-color-picker-input-font-size-sm: ;
|
||||
--eidos-color-picker-input-font-size-md: ;
|
||||
--eidos-color-picker-input-font-size-lg: ;
|
||||
--eidos-color-picker-input-line-height: ;
|
||||
--eidos-color-picker-input-letter-spacing: ;
|
||||
--eidos-color-picker-input-radius-sm: ;
|
||||
--eidos-color-picker-input-radius-md: ;
|
||||
--eidos-color-picker-input-radius-lg: ;
|
||||
--eidos-color-picker-input-border-width: ;
|
||||
--eidos-color-picker-input-fg: ;
|
||||
--eidos-color-picker-input-placeholder: ;
|
||||
--eidos-color-picker-input-focus-border: ;
|
||||
--eidos-color-picker-input-transition-duration: ;
|
||||
--eidos-color-picker-input-transition-ease: ;
|
||||
--eidos-color-picker-input-outline-bg: ;
|
||||
--eidos-color-picker-input-outline-border: ;
|
||||
--eidos-color-picker-input-surface-bg: ;
|
||||
--eidos-color-picker-input-surface-border: ;
|
||||
--eidos-color-picker-input-ghost-bg: ;
|
||||
--eidos-color-picker-input-ghost-border: ;
|
||||
--eidos-color-picker-swatches-gap: ;
|
||||
--eidos-color-picker-swatch-size: ;
|
||||
--eidos-color-picker-swatch-radius: ;
|
||||
--eidos-color-picker-swatch-border-width: ;
|
||||
--eidos-color-picker-swatch-border: ;
|
||||
--eidos-color-picker-swatch-selected-ring: ;
|
||||
--eidos-color-picker-eyedropper-height-sm: ;
|
||||
--eidos-color-picker-eyedropper-height-md: ;
|
||||
--eidos-color-picker-eyedropper-height-lg: ;
|
||||
--eidos-color-picker-eyedropper-px-sm: ;
|
||||
--eidos-color-picker-eyedropper-px-md: ;
|
||||
--eidos-color-picker-eyedropper-px-lg: ;
|
||||
--eidos-color-picker-eyedropper-gap: ;
|
||||
--eidos-color-picker-eyedropper-font-family: ;
|
||||
--eidos-color-picker-eyedropper-font-size-sm: ;
|
||||
--eidos-color-picker-eyedropper-font-size-md: ;
|
||||
--eidos-color-picker-eyedropper-font-size-lg: ;
|
||||
--eidos-color-picker-eyedropper-line-height: ;
|
||||
--eidos-color-picker-eyedropper-radius-sm: ;
|
||||
--eidos-color-picker-eyedropper-radius-md: ;
|
||||
--eidos-color-picker-eyedropper-radius-lg: ;
|
||||
--eidos-color-picker-eyedropper-border-width: ;
|
||||
--eidos-color-picker-eyedropper-surface-bg: ;
|
||||
--eidos-color-picker-eyedropper-surface-fg: ;
|
||||
--eidos-color-picker-eyedropper-surface-border: ;
|
||||
--eidos-color-picker-eyedropper-surface-hover-bg: ;
|
||||
--eidos-color-picker-eyedropper-surface-hover-border: ;
|
||||
--eidos-color-picker-eyedropper-outline-bg: ;
|
||||
--eidos-color-picker-eyedropper-outline-fg: ;
|
||||
--eidos-color-picker-eyedropper-outline-border: ;
|
||||
--eidos-color-picker-eyedropper-outline-hover-bg: ;
|
||||
--eidos-color-picker-eyedropper-outline-hover-border: ;
|
||||
--eidos-color-picker-eyedropper-ghost-bg: ;
|
||||
--eidos-color-picker-eyedropper-ghost-fg: ;
|
||||
--eidos-color-picker-eyedropper-ghost-border: ;
|
||||
--eidos-color-picker-eyedropper-ghost-hover-bg: ;
|
||||
--eidos-color-picker-eyedropper-ghost-hover-border: ;
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
:root {
|
||||
--eidos-combobox-height-xs: ;
|
||||
--eidos-combobox-height-sm: ;
|
||||
--eidos-combobox-height-md: ;
|
||||
--eidos-combobox-height-lg: ;
|
||||
|
||||
--eidos-combobox-px-xs: ;
|
||||
--eidos-combobox-px-sm: ;
|
||||
--eidos-combobox-px-md: ;
|
||||
--eidos-combobox-px-lg: ;
|
||||
|
||||
--eidos-combobox-font-size-xs: ;
|
||||
--eidos-combobox-font-size-sm: ;
|
||||
--eidos-combobox-font-size-md: ;
|
||||
--eidos-combobox-font-size-lg: ;
|
||||
|
||||
--eidos-combobox-radius: ;
|
||||
--eidos-combobox-border-width: ;
|
||||
--eidos-combobox-font-family: ;
|
||||
--eidos-combobox-font-weight: ;
|
||||
--eidos-combobox-line-height: ;
|
||||
--eidos-combobox-bg: ;
|
||||
--eidos-combobox-color: ;
|
||||
--eidos-combobox-placeholder-color: ;
|
||||
--eidos-combobox-shadow: ;
|
||||
|
||||
--eidos-combobox-outline-border: ;
|
||||
--eidos-combobox-outline-border-hover: ;
|
||||
--eidos-combobox-outline-border-focus: ;
|
||||
|
||||
--eidos-combobox-ghost-bg: ;
|
||||
--eidos-combobox-ghost-bg-hover: ;
|
||||
--eidos-combobox-ghost-border: ;
|
||||
--eidos-combobox-ghost-border-hover: ;
|
||||
--eidos-combobox-ghost-border-focus: ;
|
||||
|
||||
--eidos-combobox-focus-ring-offset: ;
|
||||
--eidos-combobox-focus-ring-width: ;
|
||||
--eidos-combobox-focus-ring-color: ;
|
||||
--eidos-combobox-focus-ring: ;
|
||||
--eidos-combobox-transition-duration: ;
|
||||
--eidos-combobox-transition-ease: ;
|
||||
|
||||
--eidos-combobox-invalid-border: ;
|
||||
--eidos-combobox-invalid-border-focus: ;
|
||||
--eidos-combobox-invalid-focus-ring-color: ;
|
||||
--eidos-combobox-invalid-focus-ring: ;
|
||||
|
||||
--eidos-combobox-disabled-bg: ;
|
||||
--eidos-combobox-disabled-color: ;
|
||||
--eidos-combobox-disabled-border: ;
|
||||
|
||||
--eidos-combobox-trigger-border-width: ;
|
||||
--eidos-combobox-trigger-radius: ;
|
||||
--eidos-combobox-trigger-bg: ;
|
||||
--eidos-combobox-trigger-bg-hover: ;
|
||||
--eidos-combobox-trigger-border: ;
|
||||
--eidos-combobox-trigger-border-hover: ;
|
||||
--eidos-combobox-trigger-border-focus: ;
|
||||
--eidos-combobox-trigger-color: ;
|
||||
--eidos-combobox-trigger-color-hover: ;
|
||||
--eidos-combobox-trigger-shadow: ;
|
||||
--eidos-combobox-control-divider: ;
|
||||
|
||||
/* Chips */
|
||||
--eidos-combobox-chip-gap: ;
|
||||
--eidos-combobox-chip-padding: ;
|
||||
--eidos-combobox-chip-radius: ;
|
||||
--eidos-combobox-chip-bg: ;
|
||||
--eidos-combobox-chip-color: ;
|
||||
--eidos-combobox-chip-font-size: ;
|
||||
--eidos-combobox-chip-line-height: ;
|
||||
--eidos-combobox-chip-overflow-bg: ;
|
||||
--eidos-combobox-chip-overflow-color: ;
|
||||
--eidos-combobox-chip-remove-size: ;
|
||||
--eidos-combobox-chip-remove-font-size: ;
|
||||
--eidos-combobox-chip-label-max-width: ;
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
:root {
|
||||
--eidos-command-radius: ;
|
||||
--eidos-command-border-width: ;
|
||||
--eidos-command-bg: ;
|
||||
--eidos-command-border: ;
|
||||
--eidos-command-border-hover: ;
|
||||
--eidos-command-border-focus: ;
|
||||
--eidos-command-shadow: ;
|
||||
--eidos-command-focus-ring: ;
|
||||
--eidos-command-max-height: ;
|
||||
|
||||
--eidos-command-input-height-sm: ;
|
||||
--eidos-command-input-height-md: ;
|
||||
--eidos-command-input-height-lg: ;
|
||||
--eidos-command-input-px-sm: ;
|
||||
--eidos-command-input-px-md: ;
|
||||
--eidos-command-input-px-lg: ;
|
||||
--eidos-command-input-font-size-sm: ;
|
||||
--eidos-command-input-font-size-md: ;
|
||||
--eidos-command-input-font-size-lg: ;
|
||||
--eidos-command-input-font-family: ;
|
||||
--eidos-command-input-font-weight: ;
|
||||
--eidos-command-input-line-height: ;
|
||||
--eidos-command-input-color: ;
|
||||
--eidos-command-input-placeholder-color: ;
|
||||
--eidos-command-input-divider: ;
|
||||
|
||||
--eidos-command-list-padding: ;
|
||||
--eidos-command-list-gap: ;
|
||||
--eidos-command-group-gap: ;
|
||||
--eidos-command-group-items-gap: ;
|
||||
|
||||
--eidos-command-item-height-sm: ;
|
||||
--eidos-command-item-height-md: ;
|
||||
--eidos-command-item-height-lg: ;
|
||||
--eidos-command-item-px-sm: ;
|
||||
--eidos-command-item-px-md: ;
|
||||
--eidos-command-item-px-lg: ;
|
||||
--eidos-command-item-radius: ;
|
||||
--eidos-command-item-gap: ;
|
||||
--eidos-command-item-font-family: ;
|
||||
--eidos-command-item-font-weight: ;
|
||||
--eidos-command-item-line-height: ;
|
||||
--eidos-command-item-font-size-sm: ;
|
||||
--eidos-command-item-font-size-md: ;
|
||||
--eidos-command-item-font-size-lg: ;
|
||||
--eidos-command-item-color: ;
|
||||
--eidos-command-item-color-selected: ;
|
||||
--eidos-command-item-color-disabled: ;
|
||||
--eidos-command-item-bg-selected: ;
|
||||
|
||||
--eidos-command-group-heading-px: ;
|
||||
--eidos-command-group-heading-py: ;
|
||||
--eidos-command-group-heading-font-family: ;
|
||||
--eidos-command-group-heading-font-size: ;
|
||||
--eidos-command-group-heading-font-weight: ;
|
||||
--eidos-command-group-heading-color: ;
|
||||
--eidos-command-group-heading-letter-spacing: ;
|
||||
|
||||
--eidos-command-separator-color: ;
|
||||
--eidos-command-separator-margin: ;
|
||||
|
||||
--eidos-command-feedback-padding: ;
|
||||
--eidos-command-feedback-color: ;
|
||||
--eidos-command-feedback-font-size: ;
|
||||
--eidos-command-feedback-line-height: ;
|
||||
|
||||
--eidos-command-shortcut-color: ;
|
||||
--eidos-command-shortcut-font-size: ;
|
||||
|
||||
--eidos-command-transition-duration: ;
|
||||
--eidos-command-transition-ease: ;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
:root {
|
||||
--eidos-container-width-sm: ;
|
||||
--eidos-container-width-md: ;
|
||||
--eidos-container-width-lg: ;
|
||||
--eidos-container-width-xl: ;
|
||||
--eidos-container-width-xxl: ;
|
||||
--eidos-container-width-full: ;
|
||||
--eidos-container-padding-inline: ;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
:root {
|
||||
/* Overlay */
|
||||
--eidos-dialog-overlay-bg: ;
|
||||
--eidos-dialog-overlay-opacity: ;
|
||||
--eidos-dialog-overlay-blur: ;
|
||||
--eidos-dialog-overlay-z: ;
|
||||
--eidos-dialog-overlay-in-duration: ;
|
||||
--eidos-dialog-overlay-out-duration: ;
|
||||
|
||||
/* Surface */
|
||||
--eidos-dialog-content-bg: ;
|
||||
--eidos-dialog-content-color: ;
|
||||
--eidos-dialog-content-border: ;
|
||||
--eidos-dialog-content-border-width: ;
|
||||
--eidos-dialog-content-radius: ;
|
||||
--eidos-dialog-content-shadow: ;
|
||||
--eidos-dialog-content-max-height: ;
|
||||
--eidos-dialog-content-max-height-sheet: ;
|
||||
|
||||
/* Width + padding by size */
|
||||
--eidos-dialog-content-width-sm: ;
|
||||
--eidos-dialog-content-width-md: ;
|
||||
--eidos-dialog-content-width-lg: ;
|
||||
--eidos-dialog-content-width-xl: ;
|
||||
--eidos-dialog-content-width-inset: ;
|
||||
--eidos-dialog-content-full-inset: ;
|
||||
--eidos-dialog-content-full-radius: ;
|
||||
|
||||
--eidos-dialog-content-padding-sm: ;
|
||||
--eidos-dialog-content-padding-md: ;
|
||||
--eidos-dialog-content-padding-lg: ;
|
||||
--eidos-dialog-content-padding-full: ;
|
||||
|
||||
/* Internal layout */
|
||||
--eidos-dialog-stack-gap: ;
|
||||
--eidos-dialog-header-gap: ;
|
||||
--eidos-dialog-footer-gap: ;
|
||||
--eidos-dialog-footer-margin-top: ;
|
||||
|
||||
/* Title */
|
||||
--eidos-dialog-title-font-family: ;
|
||||
--eidos-dialog-title-font-size: ;
|
||||
--eidos-dialog-title-font-weight: ;
|
||||
--eidos-dialog-title-line-height: ;
|
||||
--eidos-dialog-title-color: ;
|
||||
|
||||
/* Description */
|
||||
--eidos-dialog-description-font-family: ;
|
||||
--eidos-dialog-description-font-size: ;
|
||||
--eidos-dialog-description-line-height: ;
|
||||
--eidos-dialog-description-color: ;
|
||||
|
||||
/* Close control */
|
||||
--eidos-dialog-close-size: ;
|
||||
--eidos-dialog-close-px: ;
|
||||
--eidos-dialog-close-radius: ;
|
||||
--eidos-dialog-close-bg: ;
|
||||
--eidos-dialog-close-bg-hover: ;
|
||||
--eidos-dialog-close-color: ;
|
||||
--eidos-dialog-close-color-hover: ;
|
||||
--eidos-dialog-close-border: ;
|
||||
--eidos-dialog-close-border-width: ;
|
||||
--eidos-dialog-close-transition-duration: ;
|
||||
--eidos-dialog-close-transition-ease: ;
|
||||
--eidos-dialog-close-focus-ring-offset: ;
|
||||
--eidos-dialog-close-focus-ring-width: ;
|
||||
--eidos-dialog-close-focus-ring-color: ;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
/*
|
||||
* air/contracts/component/display.css
|
||||
*
|
||||
* API pública del componente Display.
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*
|
||||
* Display es el único componente tipográfico que permite override
|
||||
* explícito de tracking (`tight | normal | wide`) porque a tamaños
|
||||
* grandes (44-60px) el ajuste es parte del diseño visual.
|
||||
* El resto de componentes resuelven tracking automáticamente por size.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-display-font-family: ;
|
||||
--eidos-display-font-family-sans: ;
|
||||
--eidos-display-font-weight: ;
|
||||
|
||||
/* Colores */
|
||||
--eidos-display-color-primary: ;
|
||||
--eidos-display-color-secondary: ;
|
||||
|
||||
/* Tracking (solo Display expone override explícito de tracking) */
|
||||
--eidos-display-tracking-tight: ;
|
||||
--eidos-display-tracking-normal: ;
|
||||
--eidos-display-tracking-wide: ;
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
:root {
|
||||
--eidos-drawer-overlay-bg: ;
|
||||
--eidos-drawer-overlay-blur: ;
|
||||
--eidos-drawer-overlay-z: ;
|
||||
|
||||
--eidos-drawer-content-bg: ;
|
||||
--eidos-drawer-content-color: ;
|
||||
--eidos-drawer-content-border: ;
|
||||
--eidos-drawer-content-border-width: ;
|
||||
--eidos-drawer-content-radius: ;
|
||||
--eidos-drawer-content-shadow: ;
|
||||
--eidos-drawer-content-inset: ;
|
||||
|
||||
--eidos-drawer-content-width-sm: ;
|
||||
--eidos-drawer-content-width-md: ;
|
||||
--eidos-drawer-content-width-lg: ;
|
||||
|
||||
--eidos-drawer-content-height-sm: ;
|
||||
--eidos-drawer-content-height-md: ;
|
||||
--eidos-drawer-content-height-lg: ;
|
||||
|
||||
--eidos-drawer-content-padding-sm: ;
|
||||
--eidos-drawer-content-padding-md: ;
|
||||
--eidos-drawer-content-padding-lg: ;
|
||||
--eidos-drawer-content-padding-full: ;
|
||||
|
||||
--eidos-drawer-stack-gap: ;
|
||||
--eidos-drawer-header-gap: ;
|
||||
--eidos-drawer-footer-gap: ;
|
||||
--eidos-drawer-footer-margin-top: ;
|
||||
|
||||
--eidos-drawer-title-font-family: ;
|
||||
--eidos-drawer-title-font-size: ;
|
||||
--eidos-drawer-title-font-weight: ;
|
||||
--eidos-drawer-title-line-height: ;
|
||||
--eidos-drawer-title-color: ;
|
||||
|
||||
--eidos-drawer-description-font-family: ;
|
||||
--eidos-drawer-description-font-size: ;
|
||||
--eidos-drawer-description-line-height: ;
|
||||
--eidos-drawer-description-color: ;
|
||||
|
||||
--eidos-drawer-close-size: ;
|
||||
--eidos-drawer-close-px: ;
|
||||
--eidos-drawer-close-radius: ;
|
||||
--eidos-drawer-close-bg: ;
|
||||
--eidos-drawer-close-bg-hover: ;
|
||||
--eidos-drawer-close-color: ;
|
||||
--eidos-drawer-close-color-hover: ;
|
||||
--eidos-drawer-close-border: ;
|
||||
--eidos-drawer-close-border-width: ;
|
||||
--eidos-drawer-close-transition-duration: ;
|
||||
--eidos-drawer-close-transition-ease: ;
|
||||
--eidos-drawer-close-focus-ring-offset: ;
|
||||
--eidos-drawer-close-focus-ring-width: ;
|
||||
--eidos-drawer-close-focus-ring-color: ;
|
||||
--eidos-drawer-close-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
:root {
|
||||
--eidos-dropdown-menu-min-width: ;
|
||||
--eidos-dropdown-menu-max-height: ;
|
||||
--eidos-dropdown-menu-padding: ;
|
||||
--eidos-dropdown-menu-radius: ;
|
||||
--eidos-dropdown-menu-bg: ;
|
||||
--eidos-dropdown-menu-border: ;
|
||||
--eidos-dropdown-menu-border-width: ;
|
||||
--eidos-dropdown-menu-shadow: ;
|
||||
|
||||
--eidos-dropdown-menu-item-height-sm: ;
|
||||
--eidos-dropdown-menu-item-height-md: ;
|
||||
--eidos-dropdown-menu-item-height-lg: ;
|
||||
--eidos-dropdown-menu-item-px: ;
|
||||
--eidos-dropdown-menu-item-radius: ;
|
||||
--eidos-dropdown-menu-item-font-family: ;
|
||||
--eidos-dropdown-menu-item-font-size-sm: ;
|
||||
--eidos-dropdown-menu-item-font-size-md: ;
|
||||
--eidos-dropdown-menu-item-font-size-lg: ;
|
||||
--eidos-dropdown-menu-item-color: ;
|
||||
--eidos-dropdown-menu-item-color-highlighted: ;
|
||||
--eidos-dropdown-menu-item-bg-highlighted: ;
|
||||
--eidos-dropdown-menu-item-color-disabled: ;
|
||||
|
||||
--eidos-dropdown-menu-separator-color: ;
|
||||
--eidos-dropdown-menu-separator-margin: ;
|
||||
|
||||
--eidos-dropdown-menu-group-heading-font-size: ;
|
||||
--eidos-dropdown-menu-group-heading-font-weight: ;
|
||||
--eidos-dropdown-menu-group-heading-color: ;
|
||||
--eidos-dropdown-menu-group-heading-px: ;
|
||||
--eidos-dropdown-menu-group-heading-py: ;
|
||||
--eidos-dropdown-menu-group-heading-letter-spacing: ;
|
||||
|
||||
--eidos-dropdown-menu-transition-duration: ;
|
||||
--eidos-dropdown-menu-transition-ease: ;
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
:root {
|
||||
/* Provider */
|
||||
--eidos-editable-font-family: ;
|
||||
--eidos-editable-gap: ;
|
||||
|
||||
/* Preview */
|
||||
--eidos-editable-preview-font-size-sm: ;
|
||||
--eidos-editable-preview-font-size-md: ;
|
||||
--eidos-editable-preview-font-size-lg: ;
|
||||
--eidos-editable-preview-font-weight: ;
|
||||
--eidos-editable-preview-line-height: ;
|
||||
--eidos-editable-preview-color: ;
|
||||
--eidos-editable-preview-color-empty: ;
|
||||
--eidos-editable-preview-px: ;
|
||||
--eidos-editable-preview-py: ;
|
||||
--eidos-editable-preview-radius: ;
|
||||
--eidos-editable-preview-border-width: ;
|
||||
--eidos-editable-preview-border: ;
|
||||
--eidos-editable-preview-border-hover: ;
|
||||
--eidos-editable-preview-bg: ;
|
||||
--eidos-editable-preview-bg-hover: ;
|
||||
--eidos-editable-preview-cursor: ;
|
||||
--eidos-editable-preview-transition-duration: ;
|
||||
--eidos-editable-preview-transition-ease: ;
|
||||
|
||||
/* Input */
|
||||
--eidos-editable-input-height-sm: ;
|
||||
--eidos-editable-input-height-md: ;
|
||||
--eidos-editable-input-height-lg: ;
|
||||
--eidos-editable-input-font-size-sm: ;
|
||||
--eidos-editable-input-font-size-md: ;
|
||||
--eidos-editable-input-font-size-lg: ;
|
||||
--eidos-editable-input-font-weight: ;
|
||||
--eidos-editable-input-line-height: ;
|
||||
--eidos-editable-input-px: ;
|
||||
--eidos-editable-input-color: ;
|
||||
--eidos-editable-input-bg: ;
|
||||
--eidos-editable-input-border-width: ;
|
||||
--eidos-editable-input-border: ;
|
||||
--eidos-editable-input-border-focus: ;
|
||||
--eidos-editable-input-radius: ;
|
||||
--eidos-editable-input-transition-duration: ;
|
||||
--eidos-editable-input-transition-ease: ;
|
||||
|
||||
/* Triggers */
|
||||
--eidos-editable-trigger-size-sm: ;
|
||||
--eidos-editable-trigger-size-md: ;
|
||||
--eidos-editable-trigger-size-lg: ;
|
||||
--eidos-editable-trigger-font-size-sm: ;
|
||||
--eidos-editable-trigger-font-size-md: ;
|
||||
--eidos-editable-trigger-font-size-lg: ;
|
||||
--eidos-editable-trigger-radius: ;
|
||||
--eidos-editable-trigger-border-width: ;
|
||||
--eidos-editable-trigger-border: ;
|
||||
--eidos-editable-trigger-bg: ;
|
||||
--eidos-editable-trigger-color: ;
|
||||
--eidos-editable-trigger-bg-hover: ;
|
||||
--eidos-editable-trigger-color-hover: ;
|
||||
--eidos-editable-trigger-border-hover: ;
|
||||
--eidos-editable-trigger-transition-duration: ;
|
||||
--eidos-editable-trigger-transition-ease: ;
|
||||
|
||||
/* Focus */
|
||||
--eidos-editable-focus-ring-offset: ;
|
||||
--eidos-editable-focus-ring-width: ;
|
||||
--eidos-editable-focus-ring-color: ;
|
||||
|
||||
/* Disabled */
|
||||
--eidos-editable-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
:root {
|
||||
/* Gap interno entre partes */
|
||||
--eidos-field-gap-xs: ;
|
||||
--eidos-field-gap-sm: ;
|
||||
--eidos-field-gap-md: ;
|
||||
--eidos-field-gap-lg: ;
|
||||
|
||||
/* Label */
|
||||
--eidos-field-label-required-gap: ;
|
||||
--eidos-field-label-size-xs: ;
|
||||
--eidos-field-label-size-sm: ;
|
||||
--eidos-field-label-size-md: ;
|
||||
--eidos-field-label-size-lg: ;
|
||||
|
||||
--eidos-field-font-family: ;
|
||||
--eidos-field-line-height: ;
|
||||
--eidos-field-label-weight: ;
|
||||
--eidos-field-label-color: ;
|
||||
--eidos-field-label-color-disabled: ;
|
||||
--eidos-field-label-color-error: ;
|
||||
--eidos-field-control-transition-duration: ;
|
||||
--eidos-field-control-transition-ease: ;
|
||||
|
||||
/* Required */
|
||||
--eidos-field-required-color: ;
|
||||
|
||||
/* Helper */
|
||||
--eidos-field-helper-size: ;
|
||||
--eidos-field-helper-color: ;
|
||||
--eidos-field-helper-color-disabled: ;
|
||||
|
||||
/* Error */
|
||||
--eidos-field-error-size: ;
|
||||
--eidos-field-error-color: ;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
:root {
|
||||
--eidos-file-upload-font-family: ;
|
||||
--eidos-file-upload-gap: ;
|
||||
--eidos-file-upload-dropzone-min-height-sm: ;
|
||||
--eidos-file-upload-dropzone-min-height-md: ;
|
||||
--eidos-file-upload-dropzone-min-height-lg: ;
|
||||
--eidos-file-upload-dropzone-padding-sm: ;
|
||||
--eidos-file-upload-dropzone-padding-md: ;
|
||||
--eidos-file-upload-dropzone-padding-lg: ;
|
||||
--eidos-file-upload-dropzone-radius: ;
|
||||
--eidos-file-upload-dropzone-border-width: ;
|
||||
--eidos-file-upload-dropzone-border-style: ;
|
||||
--eidos-file-upload-dropzone-border: ;
|
||||
--eidos-file-upload-dropzone-border-hover: ;
|
||||
--eidos-file-upload-dropzone-border-dragging: ;
|
||||
--eidos-file-upload-dropzone-bg: ;
|
||||
--eidos-file-upload-dropzone-bg-hover: ;
|
||||
--eidos-file-upload-dropzone-bg-dragging: ;
|
||||
--eidos-file-upload-dropzone-color: ;
|
||||
--eidos-file-upload-dropzone-font-size-sm: ;
|
||||
--eidos-file-upload-dropzone-font-size-md: ;
|
||||
--eidos-file-upload-dropzone-font-size-lg: ;
|
||||
--eidos-file-upload-dropzone-transition-duration: ;
|
||||
--eidos-file-upload-dropzone-transition-ease: ;
|
||||
--eidos-file-upload-list-gap: ;
|
||||
--eidos-file-upload-item-padding-sm: ;
|
||||
--eidos-file-upload-item-padding-md: ;
|
||||
--eidos-file-upload-item-padding-lg: ;
|
||||
--eidos-file-upload-item-radius: ;
|
||||
--eidos-file-upload-item-border-width: ;
|
||||
--eidos-file-upload-item-border: ;
|
||||
--eidos-file-upload-item-bg: ;
|
||||
--eidos-file-upload-item-gap: ;
|
||||
--eidos-file-upload-item-name-font-size-sm: ;
|
||||
--eidos-file-upload-item-name-font-size-md: ;
|
||||
--eidos-file-upload-item-name-font-size-lg: ;
|
||||
--eidos-file-upload-item-name-font-weight: ;
|
||||
--eidos-file-upload-item-name-color: ;
|
||||
--eidos-file-upload-item-size-font-size: ;
|
||||
--eidos-file-upload-item-size-color: ;
|
||||
--eidos-file-upload-item-remove-size: ;
|
||||
--eidos-file-upload-item-remove-color: ;
|
||||
--eidos-file-upload-item-remove-color-hover: ;
|
||||
--eidos-file-upload-item-progress-height: ;
|
||||
--eidos-file-upload-item-progress-radius: ;
|
||||
--eidos-file-upload-item-progress-bg: ;
|
||||
--eidos-file-upload-item-progress-fill: ;
|
||||
--eidos-file-upload-focus-ring-offset: ;
|
||||
--eidos-file-upload-focus-ring-width: ;
|
||||
--eidos-file-upload-focus-ring-color: ;
|
||||
--eidos-file-upload-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
:root {
|
||||
--eidos-flex-direction-default: ;
|
||||
--eidos-flex-align-default: ;
|
||||
--eidos-flex-justify-default: ;
|
||||
--eidos-flex-wrap-default: ;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--eidos-float-offset-x: ;
|
||||
--eidos-float-offset-y: ;
|
||||
--eidos-float-bg: ;
|
||||
--eidos-float-color: ;
|
||||
--eidos-float-border-width: ;
|
||||
--eidos-float-border-color: ;
|
||||
--eidos-float-radius: ;
|
||||
--eidos-float-shadow: ;
|
||||
--eidos-float-padding-x: ;
|
||||
--eidos-float-padding-y: ;
|
||||
--eidos-float-cursor: ;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
:root {
|
||||
--eidos-form-gap-sm: ;
|
||||
--eidos-form-gap-md: ;
|
||||
--eidos-form-gap-lg: ;
|
||||
--eidos-form-field-gap-sm: ;
|
||||
--eidos-form-field-gap-md: ;
|
||||
--eidos-form-field-gap-lg: ;
|
||||
--eidos-form-control-gap: ;
|
||||
--eidos-form-disabled-opacity: ;
|
||||
--eidos-form-font-family: ;
|
||||
--eidos-form-line-height: ;
|
||||
--eidos-form-label-size-sm: ;
|
||||
--eidos-form-label-size-md: ;
|
||||
--eidos-form-label-size-lg: ;
|
||||
--eidos-form-label-weight: ;
|
||||
--eidos-form-label-color: ;
|
||||
--eidos-form-label-color-disabled: ;
|
||||
--eidos-form-label-color-error: ;
|
||||
--eidos-form-label-required-gap: ;
|
||||
--eidos-form-required-color: ;
|
||||
--eidos-form-description-size: ;
|
||||
--eidos-form-description-color: ;
|
||||
--eidos-form-description-color-disabled: ;
|
||||
--eidos-form-error-size: ;
|
||||
--eidos-form-error-color: ;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
:root {
|
||||
--eidos-grid-template-columns-default: ;
|
||||
--eidos-grid-template-rows-default: ;
|
||||
--eidos-grid-auto-columns-default: ;
|
||||
--eidos-grid-auto-rows-default: ;
|
||||
--eidos-grid-auto-flow-default: ;
|
||||
--eidos-grid-align-default: ;
|
||||
--eidos-grid-justify-default: ;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--eidos-group-attached-overlap: ;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
/*
|
||||
* air/contracts/component/heading.css
|
||||
*
|
||||
* API pública del componente Heading.
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*
|
||||
* Regla crítica: `level` (h1-h6) y `size` (1-12) son siempre independientes.
|
||||
* Un h1 puede tener size=4 en un sidebar.
|
||||
* Un h3 puede tener size=10 en una landing.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-heading-font-family: ;
|
||||
--eidos-heading-font-family-sans: ;
|
||||
--eidos-heading-font-weight: ;
|
||||
|
||||
/* Colores */
|
||||
--eidos-heading-color-primary: ;
|
||||
--eidos-heading-color-secondary: ;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/*
|
||||
* air/contracts/component/icon.css
|
||||
*
|
||||
* API pública del componente Icon.
|
||||
* El contrato global ya publica la escala nombrada (--eidos-icon-size-* y
|
||||
* --eidos-icon-stroke-width-*). Este contrato de componente documenta solo
|
||||
* los defaults que consume Icon si el usuario no pasa props.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--eidos-icon-size: ;
|
||||
--eidos-icon-stroke-width: ;
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
/*
|
||||
* Contratos por componente.
|
||||
* Cada archivo declara la interfaz pública de tokens de un componente de air.
|
||||
*/
|
||||
@import './icon.css';
|
||||
@import './box.css';
|
||||
@import './container.css';
|
||||
@import './flex.css';
|
||||
@import './stack.css';
|
||||
@import './grid.css';
|
||||
@import './auto-grid.css';
|
||||
@import './group.css';
|
||||
@import './wrap.css';
|
||||
@import './section.css';
|
||||
@import './aspect-ratio.css';
|
||||
@import './float.css';
|
||||
@import './separator.css';
|
||||
@import './scroll-area.css';
|
||||
@import './splitter.css';
|
||||
@import './button.css';
|
||||
@import './text.css';
|
||||
@import './heading.css';
|
||||
@import './display.css';
|
||||
@import './code.css';
|
||||
@import './kbd.css';
|
||||
@import './mark.css';
|
||||
@import './code-block.css';
|
||||
@import './text-virtual-list.css';
|
||||
@import './input.css';
|
||||
@import './field.css';
|
||||
@import './form.css';
|
||||
@import './calendar.css';
|
||||
@import './spinner.css';
|
||||
@import './badge.css';
|
||||
@import './switch.css';
|
||||
@import './checkbox.css';
|
||||
@import './radio-group.css';
|
||||
@import './toggle.css';
|
||||
@import './toggle-group.css';
|
||||
@import './toolbar.css';
|
||||
@import './avatar.css';
|
||||
@import './meter.css';
|
||||
@import './collapsible.css';
|
||||
@import './dropdown-menu.css';
|
||||
@import './menubar.css';
|
||||
@import './slider.css';
|
||||
@import './progress.css';
|
||||
@import './tags-input.css';
|
||||
@import './number-field.css';
|
||||
@import './accordion.css';
|
||||
@import './select.css';
|
||||
@import './combobox.css';
|
||||
@import './command.css';
|
||||
@import './color-picker.css';
|
||||
@import './tooltip.css';
|
||||
@import './link-preview.css';
|
||||
@import './popover.css';
|
||||
@import './drawer.css';
|
||||
@import './dialog.css';
|
||||
@import './tabs.css';
|
||||
@import './toast.css';
|
||||
@import './pagination.css';
|
||||
@import './editable.css';
|
||||
@import './pin-input.css';
|
||||
@import './rating-group.css';
|
||||
@import './stepper.css';
|
||||
@import './file-upload.css';
|
||||
@ -0,0 +1,81 @@
|
||||
:root {
|
||||
/* Size */
|
||||
--eidos-input-height-xs: ;
|
||||
--eidos-input-height-sm: ;
|
||||
--eidos-input-height-md: ;
|
||||
--eidos-input-height-lg: ;
|
||||
|
||||
--eidos-input-px-xs: ;
|
||||
--eidos-input-px-sm: ;
|
||||
--eidos-input-px-md: ;
|
||||
--eidos-input-px-lg: ;
|
||||
|
||||
--eidos-input-adornment-gap-xs: ;
|
||||
--eidos-input-adornment-gap-sm: ;
|
||||
--eidos-input-adornment-gap-md: ;
|
||||
--eidos-input-adornment-gap-lg: ;
|
||||
|
||||
--eidos-input-py-xs: ;
|
||||
--eidos-input-py-sm: ;
|
||||
--eidos-input-py-md: ;
|
||||
--eidos-input-py-lg: ;
|
||||
|
||||
--eidos-input-radius: ;
|
||||
--eidos-input-border-width: ;
|
||||
--eidos-input-font-family: ;
|
||||
--eidos-input-font-weight: ;
|
||||
--eidos-input-line-height: ;
|
||||
|
||||
/* Font */
|
||||
--eidos-input-font-size-xs: ;
|
||||
--eidos-input-font-size-sm: ;
|
||||
--eidos-input-font-size-md: ;
|
||||
--eidos-input-font-size-lg: ;
|
||||
|
||||
/* Base colors */
|
||||
--eidos-input-bg: ;
|
||||
--eidos-input-color: ;
|
||||
--eidos-input-placeholder-color: ;
|
||||
--eidos-input-adornment-color: ;
|
||||
--eidos-input-shadow: ;
|
||||
|
||||
/* Outline */
|
||||
--eidos-input-outline-border: ;
|
||||
--eidos-input-outline-border-hover: ;
|
||||
--eidos-input-outline-border-focus: ;
|
||||
|
||||
/* Ghost */
|
||||
--eidos-input-ghost-bg: ;
|
||||
--eidos-input-ghost-bg-hover: ;
|
||||
--eidos-input-ghost-border: ;
|
||||
--eidos-input-ghost-border-hover: ;
|
||||
--eidos-input-ghost-border-focus: ;
|
||||
|
||||
/* Caret + selection */
|
||||
--eidos-input-caret-color: ;
|
||||
--eidos-input-selection-bg: ;
|
||||
|
||||
/* Focus */
|
||||
--eidos-input-focus-ring-offset: ;
|
||||
--eidos-input-focus-ring-width: ;
|
||||
--eidos-input-focus-ring-color: ;
|
||||
--eidos-input-transition-duration: ;
|
||||
--eidos-input-transition-ease: ;
|
||||
--eidos-input-focus-ring: ;
|
||||
|
||||
/* Error */
|
||||
--eidos-input-error-border: ;
|
||||
--eidos-input-error-border-focus: ;
|
||||
--eidos-input-error-focus-ring-color: ;
|
||||
--eidos-input-error-focus-ring: ;
|
||||
|
||||
/* Disabled */
|
||||
--eidos-input-disabled-bg: ;
|
||||
--eidos-input-disabled-color: ;
|
||||
--eidos-input-disabled-border: ;
|
||||
|
||||
/* Readonly */
|
||||
--eidos-input-readonly-bg: ;
|
||||
--eidos-input-readonly-border: ;
|
||||
--eidos-input-readonly-color: ;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* air/contracts/component/kbd.css
|
||||
*
|
||||
* API pública del componente Kbd.
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-kbd-font-family: ;
|
||||
--eidos-kbd-font-weight: ;
|
||||
|
||||
--eidos-kbd-border-width: ;
|
||||
--eidos-kbd-bottom-border-width: ;
|
||||
--eidos-kbd-color: ;
|
||||
--eidos-kbd-bg: ;
|
||||
--eidos-kbd-border: ;
|
||||
--eidos-kbd-shadow: ;
|
||||
--eidos-kbd-radius: ;
|
||||
--eidos-kbd-px: ;
|
||||
--eidos-kbd-py: ;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
:root {
|
||||
--eidos-link-preview-content-z: ;
|
||||
--eidos-link-preview-max-width: ;
|
||||
--eidos-link-preview-min-width-sm: ;
|
||||
--eidos-link-preview-min-width-md: ;
|
||||
--eidos-link-preview-min-width-lg: ;
|
||||
--eidos-link-preview-padding-y-sm: ;
|
||||
--eidos-link-preview-padding-x-sm: ;
|
||||
--eidos-link-preview-padding-y-md: ;
|
||||
--eidos-link-preview-padding-x-md: ;
|
||||
--eidos-link-preview-padding-y-lg: ;
|
||||
--eidos-link-preview-padding-x-lg: ;
|
||||
--eidos-link-preview-font-size-sm: ;
|
||||
--eidos-link-preview-font-size-md: ;
|
||||
--eidos-link-preview-font-size-lg: ;
|
||||
--eidos-link-preview-font-family: ;
|
||||
--eidos-link-preview-font-weight: ;
|
||||
--eidos-link-preview-line-height: ;
|
||||
--eidos-link-preview-gap: ;
|
||||
--eidos-link-preview-radius: ;
|
||||
--eidos-link-preview-border-width: ;
|
||||
--eidos-link-preview-bg: ;
|
||||
--eidos-link-preview-color: ;
|
||||
--eidos-link-preview-border: ;
|
||||
--eidos-link-preview-shadow: ;
|
||||
--eidos-link-preview-trigger-color: ;
|
||||
--eidos-link-preview-trigger-color-active: ;
|
||||
--eidos-link-preview-trigger-underline-color: ;
|
||||
--eidos-link-preview-trigger-underline-color-active: ;
|
||||
--eidos-link-preview-trigger-underline-offset: ;
|
||||
--eidos-link-preview-trigger-underline-thickness: ;
|
||||
--eidos-link-preview-trigger-radius: ;
|
||||
--eidos-link-preview-trigger-transition-duration: ;
|
||||
--eidos-link-preview-trigger-transition-ease: ;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* air/contracts/component/mark.css
|
||||
*
|
||||
* API pública del componente Mark (y Highlight).
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*
|
||||
* Highlight usa los mismos tokens de color que Mark.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--eidos-mark-px: ;
|
||||
--eidos-mark-py: ;
|
||||
--eidos-mark-radius: ;
|
||||
|
||||
/* Variantes de color — todas explícitas, ninguna implícita */
|
||||
--eidos-mark-bg-yellow: ;
|
||||
--eidos-mark-color-yellow: ;
|
||||
--eidos-mark-bg-green: ;
|
||||
--eidos-mark-color-green: ;
|
||||
--eidos-mark-bg-blue: ;
|
||||
--eidos-mark-color-blue: ;
|
||||
--eidos-mark-bg-red: ;
|
||||
--eidos-mark-color-red: ;
|
||||
--eidos-mark-bg-purple: ;
|
||||
--eidos-mark-color-purple: ;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
:root {
|
||||
--eidos-menubar-height-sm: ;
|
||||
--eidos-menubar-height-md: ;
|
||||
--eidos-menubar-height-lg: ;
|
||||
--eidos-menubar-px-sm: ;
|
||||
--eidos-menubar-px-md: ;
|
||||
--eidos-menubar-px-lg: ;
|
||||
--eidos-menubar-gap-sm: ;
|
||||
--eidos-menubar-gap-md: ;
|
||||
--eidos-menubar-gap-lg: ;
|
||||
--eidos-menubar-trigger-px-sm: ;
|
||||
--eidos-menubar-trigger-px-md: ;
|
||||
--eidos-menubar-trigger-px-lg: ;
|
||||
--eidos-menubar-font-family: ;
|
||||
--eidos-menubar-font-size-sm: ;
|
||||
--eidos-menubar-font-size-md: ;
|
||||
--eidos-menubar-font-size-lg: ;
|
||||
--eidos-menubar-font-weight: ;
|
||||
--eidos-menubar-line-height: ;
|
||||
--eidos-menubar-letter-spacing: ;
|
||||
--eidos-menubar-radius-sm: ;
|
||||
--eidos-menubar-radius-md: ;
|
||||
--eidos-menubar-radius-lg: ;
|
||||
--eidos-menubar-trigger-radius-sm: ;
|
||||
--eidos-menubar-trigger-radius-md: ;
|
||||
--eidos-menubar-trigger-radius-lg: ;
|
||||
--eidos-menubar-border-width: ;
|
||||
--eidos-menubar-bg: ;
|
||||
--eidos-menubar-border: ;
|
||||
--eidos-menubar-shadow: ;
|
||||
--eidos-menubar-trigger-color: ;
|
||||
--eidos-menubar-trigger-color-disabled: ;
|
||||
--eidos-menubar-trigger-bg-hover: ;
|
||||
--eidos-menubar-trigger-bg-open: ;
|
||||
--eidos-menubar-trigger-color-open: ;
|
||||
|
||||
--eidos-menubar-content-min-width: ;
|
||||
--eidos-menubar-content-max-height: ;
|
||||
--eidos-menubar-content-padding: ;
|
||||
--eidos-menubar-content-radius: ;
|
||||
--eidos-menubar-content-bg: ;
|
||||
--eidos-menubar-content-border: ;
|
||||
--eidos-menubar-content-border-width: ;
|
||||
--eidos-menubar-content-shadow: ;
|
||||
|
||||
--eidos-menubar-item-height-sm: ;
|
||||
--eidos-menubar-item-height-md: ;
|
||||
--eidos-menubar-item-height-lg: ;
|
||||
--eidos-menubar-item-px: ;
|
||||
--eidos-menubar-item-radius: ;
|
||||
--eidos-menubar-item-font-size-sm: ;
|
||||
--eidos-menubar-item-font-size-md: ;
|
||||
--eidos-menubar-item-font-size-lg: ;
|
||||
--eidos-menubar-item-color: ;
|
||||
--eidos-menubar-item-color-highlighted: ;
|
||||
--eidos-menubar-item-bg-highlighted: ;
|
||||
--eidos-menubar-item-color-disabled: ;
|
||||
|
||||
--eidos-menubar-separator-color: ;
|
||||
--eidos-menubar-separator-margin: ;
|
||||
|
||||
--eidos-menubar-group-heading-font-size: ;
|
||||
--eidos-menubar-group-heading-font-weight: ;
|
||||
--eidos-menubar-group-heading-color: ;
|
||||
--eidos-menubar-group-heading-px: ;
|
||||
--eidos-menubar-group-heading-py: ;
|
||||
--eidos-menubar-group-heading-letter-spacing: ;
|
||||
|
||||
--eidos-menubar-transition-duration: ;
|
||||
--eidos-menubar-transition-ease: ;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
:root {
|
||||
--eidos-meter-track-height-sm: ;
|
||||
--eidos-meter-track-height-md: ;
|
||||
--eidos-meter-track-height-lg: ;
|
||||
--eidos-meter-track-radius: ;
|
||||
--eidos-meter-track-bg: ;
|
||||
--eidos-meter-transition-duration: ;
|
||||
--eidos-meter-transition-ease: ;
|
||||
|
||||
--eidos-meter-color-primary: ;
|
||||
--eidos-meter-color-neutral: ;
|
||||
--eidos-meter-color-success: ;
|
||||
--eidos-meter-color-warning: ;
|
||||
--eidos-meter-color-danger: ;
|
||||
--eidos-meter-color-info: ;
|
||||
|
||||
--eidos-meter-label-font-family: ;
|
||||
--eidos-meter-label-font-size: ;
|
||||
--eidos-meter-label-color: ;
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
:root {
|
||||
--eidos-number-field-label-font-family: ;
|
||||
--eidos-number-field-label-font-size: ;
|
||||
--eidos-number-field-label-font-weight: ;
|
||||
--eidos-number-field-label-line-height: ;
|
||||
--eidos-number-field-label-color: ;
|
||||
|
||||
--eidos-number-field-min-height-sm: ;
|
||||
--eidos-number-field-min-height-md: ;
|
||||
--eidos-number-field-min-height-lg: ;
|
||||
--eidos-number-field-px-sm: ;
|
||||
--eidos-number-field-px-md: ;
|
||||
--eidos-number-field-px-lg: ;
|
||||
--eidos-number-field-font-size-sm: ;
|
||||
--eidos-number-field-font-size-md: ;
|
||||
--eidos-number-field-font-size-lg: ;
|
||||
--eidos-number-field-font-family: ;
|
||||
--eidos-number-field-line-height: ;
|
||||
--eidos-number-field-radius: ;
|
||||
--eidos-number-field-border-width: ;
|
||||
--eidos-number-field-bg: ;
|
||||
--eidos-number-field-bg-ghost: ;
|
||||
--eidos-number-field-border: ;
|
||||
--eidos-number-field-border-ghost: ;
|
||||
--eidos-number-field-border-focus: ;
|
||||
--eidos-number-field-border-invalid: ;
|
||||
--eidos-number-field-text-color: ;
|
||||
--eidos-number-field-shadow: ;
|
||||
--eidos-number-field-focus-ring: ;
|
||||
--eidos-number-field-focus-ring-invalid: ;
|
||||
--eidos-number-field-transition-duration: ;
|
||||
--eidos-number-field-transition-ease: ;
|
||||
|
||||
--eidos-number-field-stepper-inline-size-sm: ;
|
||||
--eidos-number-field-stepper-inline-size-md: ;
|
||||
--eidos-number-field-stepper-inline-size-lg: ;
|
||||
--eidos-number-field-stepper-block-size-sm: ;
|
||||
--eidos-number-field-stepper-block-size-md: ;
|
||||
--eidos-number-field-stepper-block-size-lg: ;
|
||||
--eidos-number-field-stepper-radius: ;
|
||||
--eidos-number-field-stepper-border-width: ;
|
||||
--eidos-number-field-stepper-bg: ;
|
||||
--eidos-number-field-stepper-bg-hover: ;
|
||||
--eidos-number-field-stepper-border: ;
|
||||
--eidos-number-field-stepper-border-hover: ;
|
||||
--eidos-number-field-stepper-color: ;
|
||||
--eidos-number-field-stepper-font-size: ;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
:root {
|
||||
/* Provider */
|
||||
--eidos-pagination-gap: ;
|
||||
--eidos-pagination-font-family: ;
|
||||
|
||||
/* Page button */
|
||||
--eidos-pagination-page-size-sm: ;
|
||||
--eidos-pagination-page-size-md: ;
|
||||
--eidos-pagination-page-size-lg: ;
|
||||
--eidos-pagination-page-min-width-sm: ;
|
||||
--eidos-pagination-page-min-width-md: ;
|
||||
--eidos-pagination-page-min-width-lg: ;
|
||||
--eidos-pagination-page-px-sm: ;
|
||||
--eidos-pagination-page-px-md: ;
|
||||
--eidos-pagination-page-px-lg: ;
|
||||
--eidos-pagination-page-radius: ;
|
||||
--eidos-pagination-page-font-size-sm: ;
|
||||
--eidos-pagination-page-font-size-md: ;
|
||||
--eidos-pagination-page-font-size-lg: ;
|
||||
--eidos-pagination-page-font-weight: ;
|
||||
--eidos-pagination-page-line-height: ;
|
||||
--eidos-pagination-page-border-width: ;
|
||||
--eidos-pagination-page-border: ;
|
||||
--eidos-pagination-page-bg: ;
|
||||
--eidos-pagination-page-color: ;
|
||||
--eidos-pagination-page-bg-hover: ;
|
||||
--eidos-pagination-page-color-hover: ;
|
||||
--eidos-pagination-page-border-hover: ;
|
||||
--eidos-pagination-page-bg-selected: ;
|
||||
--eidos-pagination-page-color-selected: ;
|
||||
--eidos-pagination-page-border-selected: ;
|
||||
--eidos-pagination-page-transition-duration: ;
|
||||
--eidos-pagination-page-transition-ease: ;
|
||||
|
||||
/* Nav buttons (prev/next) */
|
||||
--eidos-pagination-nav-size-sm: ;
|
||||
--eidos-pagination-nav-size-md: ;
|
||||
--eidos-pagination-nav-size-lg: ;
|
||||
--eidos-pagination-nav-min-width-sm: ;
|
||||
--eidos-pagination-nav-min-width-md: ;
|
||||
--eidos-pagination-nav-min-width-lg: ;
|
||||
--eidos-pagination-nav-px-sm: ;
|
||||
--eidos-pagination-nav-px-md: ;
|
||||
--eidos-pagination-nav-px-lg: ;
|
||||
--eidos-pagination-nav-radius: ;
|
||||
--eidos-pagination-nav-font-size-sm: ;
|
||||
--eidos-pagination-nav-font-size-md: ;
|
||||
--eidos-pagination-nav-font-size-lg: ;
|
||||
--eidos-pagination-nav-border-width: ;
|
||||
--eidos-pagination-nav-border: ;
|
||||
--eidos-pagination-nav-bg: ;
|
||||
--eidos-pagination-nav-color: ;
|
||||
--eidos-pagination-nav-bg-hover: ;
|
||||
--eidos-pagination-nav-color-hover: ;
|
||||
--eidos-pagination-nav-border-hover: ;
|
||||
|
||||
/* Ellipsis */
|
||||
--eidos-pagination-ellipsis-color: ;
|
||||
--eidos-pagination-ellipsis-font-size-sm: ;
|
||||
--eidos-pagination-ellipsis-font-size-md: ;
|
||||
--eidos-pagination-ellipsis-font-size-lg: ;
|
||||
--eidos-pagination-ellipsis-px: ;
|
||||
|
||||
/* Focus */
|
||||
--eidos-pagination-focus-ring-offset: ;
|
||||
--eidos-pagination-focus-ring-width: ;
|
||||
--eidos-pagination-focus-ring-color: ;
|
||||
|
||||
/* Disabled */
|
||||
--eidos-pagination-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
:root {
|
||||
/* Provider */
|
||||
--eidos-pin-input-gap-sm: ;
|
||||
--eidos-pin-input-gap-md: ;
|
||||
--eidos-pin-input-gap-lg: ;
|
||||
--eidos-pin-input-font-family: ;
|
||||
|
||||
/* Cell */
|
||||
--eidos-pin-input-cell-width-sm: ;
|
||||
--eidos-pin-input-cell-width-md: ;
|
||||
--eidos-pin-input-cell-width-lg: ;
|
||||
--eidos-pin-input-cell-height-sm: ;
|
||||
--eidos-pin-input-cell-height-md: ;
|
||||
--eidos-pin-input-cell-height-lg: ;
|
||||
--eidos-pin-input-cell-radius: ;
|
||||
--eidos-pin-input-cell-border-width: ;
|
||||
--eidos-pin-input-cell-border: ;
|
||||
--eidos-pin-input-cell-border-hover: ;
|
||||
--eidos-pin-input-cell-border-active: ;
|
||||
--eidos-pin-input-cell-bg: ;
|
||||
--eidos-pin-input-cell-bg-hover: ;
|
||||
--eidos-pin-input-cell-color: ;
|
||||
--eidos-pin-input-cell-font-size-sm: ;
|
||||
--eidos-pin-input-cell-font-size-md: ;
|
||||
--eidos-pin-input-cell-font-size-lg: ;
|
||||
--eidos-pin-input-cell-font-weight: ;
|
||||
--eidos-pin-input-cell-line-height: ;
|
||||
--eidos-pin-input-cell-transition-duration: ;
|
||||
--eidos-pin-input-cell-transition-ease: ;
|
||||
|
||||
/* Caret */
|
||||
--eidos-pin-input-caret-color: ;
|
||||
--eidos-pin-input-caret-width: ;
|
||||
--eidos-pin-input-caret-height-sm: ;
|
||||
--eidos-pin-input-caret-height-md: ;
|
||||
--eidos-pin-input-caret-height-lg: ;
|
||||
|
||||
/* Focus */
|
||||
--eidos-pin-input-focus-ring-offset: ;
|
||||
--eidos-pin-input-focus-ring-width: ;
|
||||
--eidos-pin-input-focus-ring-color: ;
|
||||
|
||||
/* Disabled */
|
||||
--eidos-pin-input-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
:root {
|
||||
--eidos-popover-content-z: ;
|
||||
--eidos-popover-gap: ;
|
||||
--eidos-popover-max-width: ;
|
||||
--eidos-popover-min-width-sm: ;
|
||||
--eidos-popover-min-width-md: ;
|
||||
--eidos-popover-min-width-lg: ;
|
||||
--eidos-popover-padding-y-sm: ;
|
||||
--eidos-popover-padding-x-sm: ;
|
||||
--eidos-popover-padding-y-md: ;
|
||||
--eidos-popover-padding-x-md: ;
|
||||
--eidos-popover-padding-y-lg: ;
|
||||
--eidos-popover-padding-x-lg: ;
|
||||
--eidos-popover-font-size-sm: ;
|
||||
--eidos-popover-font-size-md: ;
|
||||
--eidos-popover-font-size-lg: ;
|
||||
--eidos-popover-font-family: ;
|
||||
--eidos-popover-font-weight: ;
|
||||
--eidos-popover-line-height: ;
|
||||
--eidos-popover-radius: ;
|
||||
--eidos-popover-border-width: ;
|
||||
--eidos-popover-bg: ;
|
||||
--eidos-popover-color: ;
|
||||
--eidos-popover-border: ;
|
||||
--eidos-popover-shadow: ;
|
||||
--eidos-popover-transition-duration: ;
|
||||
--eidos-popover-transition-ease: ;
|
||||
--eidos-popover-close-size: ;
|
||||
--eidos-popover-close-radius: ;
|
||||
--eidos-popover-close-border-width: ;
|
||||
--eidos-popover-close-bg: ;
|
||||
--eidos-popover-close-bg-hover: ;
|
||||
--eidos-popover-close-color: ;
|
||||
--eidos-popover-close-border: ;
|
||||
--eidos-popover-close-border-hover: ;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
:root {
|
||||
--eidos-progress-gap: ;
|
||||
--eidos-progress-radius: ;
|
||||
--eidos-progress-font-family: ;
|
||||
--eidos-progress-font-weight: ;
|
||||
--eidos-progress-line-height: ;
|
||||
--eidos-progress-track-size-sm: ;
|
||||
--eidos-progress-track-size-md: ;
|
||||
--eidos-progress-track-size-lg: ;
|
||||
--eidos-progress-font-size-sm: ;
|
||||
--eidos-progress-font-size-md: ;
|
||||
--eidos-progress-font-size-lg: ;
|
||||
--eidos-progress-circular-size-sm: ;
|
||||
--eidos-progress-circular-size-md: ;
|
||||
--eidos-progress-circular-size-lg: ;
|
||||
--eidos-progress-circular-stroke-sm: ;
|
||||
--eidos-progress-circular-stroke-md: ;
|
||||
--eidos-progress-circular-stroke-lg: ;
|
||||
--eidos-progress-transition-duration: ;
|
||||
--eidos-progress-transition-ease: ;
|
||||
--eidos-progress-indeterminate-duration: ;
|
||||
|
||||
--eidos-progress-fill-primary: ;
|
||||
--eidos-progress-track-primary: ;
|
||||
--eidos-progress-text-primary: ;
|
||||
--eidos-progress-fill-neutral: ;
|
||||
--eidos-progress-track-neutral: ;
|
||||
--eidos-progress-text-neutral: ;
|
||||
--eidos-progress-fill-success: ;
|
||||
--eidos-progress-track-success: ;
|
||||
--eidos-progress-text-success: ;
|
||||
--eidos-progress-fill-warning: ;
|
||||
--eidos-progress-track-warning: ;
|
||||
--eidos-progress-text-warning: ;
|
||||
--eidos-progress-fill-danger: ;
|
||||
--eidos-progress-track-danger: ;
|
||||
--eidos-progress-text-danger: ;
|
||||
--eidos-progress-fill-info: ;
|
||||
--eidos-progress-track-info: ;
|
||||
--eidos-progress-text-info: ;
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
:root {
|
||||
--eidos-radio-group-gap-vertical: ;
|
||||
--eidos-radio-group-gap-horizontal: ;
|
||||
|
||||
--eidos-radio-group-item-size-sm: ;
|
||||
--eidos-radio-group-item-size-md: ;
|
||||
--eidos-radio-group-item-size-lg: ;
|
||||
--eidos-radio-group-indicator-size-sm: ;
|
||||
--eidos-radio-group-indicator-size-md: ;
|
||||
--eidos-radio-group-indicator-size-lg: ;
|
||||
--eidos-radio-group-dot-size-sm: ;
|
||||
--eidos-radio-group-dot-size-md: ;
|
||||
--eidos-radio-group-dot-size-lg: ;
|
||||
|
||||
--eidos-radio-group-item-gap: ;
|
||||
--eidos-radio-group-font-family: ;
|
||||
--eidos-radio-group-font-size-sm: ;
|
||||
--eidos-radio-group-font-size-md: ;
|
||||
--eidos-radio-group-font-size-lg: ;
|
||||
--eidos-radio-group-font-weight: ;
|
||||
--eidos-radio-group-line-height: ;
|
||||
--eidos-radio-group-item-label-color: ;
|
||||
--eidos-radio-group-item-label-color-disabled: ;
|
||||
|
||||
--eidos-radio-group-indicator-radius: ;
|
||||
--eidos-radio-group-indicator-border-width: ;
|
||||
--eidos-radio-group-indicator-bg: ;
|
||||
--eidos-radio-group-indicator-border: ;
|
||||
--eidos-radio-group-indicator-border-hover: ;
|
||||
--eidos-radio-group-indicator-bg-disabled: ;
|
||||
--eidos-radio-group-indicator-border-disabled: ;
|
||||
--eidos-radio-group-indicator-bg-checked-disabled: ;
|
||||
|
||||
--eidos-radio-group-dot-radius: ;
|
||||
--eidos-radio-group-dot-color: ;
|
||||
--eidos-radio-group-dot-color-disabled: ;
|
||||
|
||||
--eidos-radio-group-focus-ring-offset: ;
|
||||
--eidos-radio-group-focus-ring-width: ;
|
||||
--eidos-radio-group-focus-ring-color: ;
|
||||
--eidos-radio-group-focus-ring-surface: ;
|
||||
--eidos-radio-group-focus-ring: ;
|
||||
--eidos-radio-group-transition-duration: ;
|
||||
--eidos-radio-group-transition-ease: ;
|
||||
--eidos-radio-group-disabled-opacity: ;
|
||||
|
||||
--eidos-radio-group-color-primary-solid: ;
|
||||
--eidos-radio-group-color-primary-solid-hover: ;
|
||||
--eidos-radio-group-color-neutral-solid: ;
|
||||
--eidos-radio-group-color-neutral-solid-hover: ;
|
||||
--eidos-radio-group-color-success-solid: ;
|
||||
--eidos-radio-group-color-success-solid-hover: ;
|
||||
--eidos-radio-group-color-warning-solid: ;
|
||||
--eidos-radio-group-color-warning-solid-hover: ;
|
||||
--eidos-radio-group-color-danger-solid: ;
|
||||
--eidos-radio-group-color-danger-solid-hover: ;
|
||||
--eidos-radio-group-color-info-solid: ;
|
||||
--eidos-radio-group-color-info-solid-hover: ;
|
||||
|
||||
--eidos-radio-group-label-font-family: ;
|
||||
--eidos-radio-group-label-font-size: ;
|
||||
--eidos-radio-group-label-font-weight: ;
|
||||
--eidos-radio-group-label-line-height: ;
|
||||
--eidos-radio-group-label-color: ;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
:root {
|
||||
/* Root */
|
||||
--eidos-rating-group-gap-sm: ;
|
||||
--eidos-rating-group-gap-md: ;
|
||||
--eidos-rating-group-gap-lg: ;
|
||||
|
||||
/* Item / star */
|
||||
--eidos-rating-group-item-size-sm: ;
|
||||
--eidos-rating-group-item-size-md: ;
|
||||
--eidos-rating-group-item-size-lg: ;
|
||||
--eidos-rating-group-color-active: ;
|
||||
--eidos-rating-group-color-inactive: ;
|
||||
--eidos-rating-group-color-hover: ;
|
||||
--eidos-rating-group-transition-duration: ;
|
||||
--eidos-rating-group-transition-ease: ;
|
||||
|
||||
/* Focus */
|
||||
--eidos-rating-group-focus-ring-offset: ;
|
||||
--eidos-rating-group-focus-ring-width: ;
|
||||
--eidos-rating-group-focus-ring-color: ;
|
||||
|
||||
/* Disabled */
|
||||
--eidos-rating-group-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
:root {
|
||||
--eidos-scroll-area-radius: ;
|
||||
--eidos-scroll-area-bg: ;
|
||||
--eidos-scroll-area-track-bg: ;
|
||||
--eidos-scroll-area-thumb-bg: ;
|
||||
--eidos-scroll-area-thumb-radius: ;
|
||||
--eidos-scroll-area-scrollbar-size: ;
|
||||
--eidos-scroll-area-scrollbar-padding: ;
|
||||
--eidos-scroll-area-transition-duration: ;
|
||||
--eidos-scroll-area-transition-easing: ;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
:root {
|
||||
--eidos-section-padding-block-sm: ;
|
||||
--eidos-section-padding-block-md: ;
|
||||
--eidos-section-padding-block-lg: ;
|
||||
--eidos-section-padding-block-xl: ;
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--eidos-select-trigger-height-xs: ;
|
||||
--eidos-select-trigger-height-sm: ;
|
||||
--eidos-select-trigger-height-md: ;
|
||||
--eidos-select-trigger-height-lg: ;
|
||||
|
||||
--eidos-select-trigger-px-xs: ;
|
||||
--eidos-select-trigger-px-sm: ;
|
||||
--eidos-select-trigger-px-md: ;
|
||||
--eidos-select-trigger-px-lg: ;
|
||||
|
||||
--eidos-select-trigger-gap-xs: ;
|
||||
--eidos-select-trigger-gap-sm: ;
|
||||
--eidos-select-trigger-gap-md: ;
|
||||
--eidos-select-trigger-gap-lg: ;
|
||||
|
||||
--eidos-select-trigger-font-size-xs: ;
|
||||
--eidos-select-trigger-font-size-sm: ;
|
||||
--eidos-select-trigger-font-size-md: ;
|
||||
--eidos-select-trigger-font-size-lg: ;
|
||||
|
||||
--eidos-select-trigger-radius: ;
|
||||
--eidos-select-trigger-border-width: ;
|
||||
--eidos-select-trigger-font-family: ;
|
||||
--eidos-select-trigger-font-weight: ;
|
||||
--eidos-select-trigger-line-height: ;
|
||||
--eidos-select-trigger-bg: ;
|
||||
--eidos-select-trigger-color: ;
|
||||
--eidos-select-trigger-placeholder-color: ;
|
||||
--eidos-select-trigger-shadow: ;
|
||||
--eidos-select-trigger-icon-color: ;
|
||||
--eidos-select-trigger-transition-duration: ;
|
||||
--eidos-select-trigger-transition-ease: ;
|
||||
--eidos-select-trigger-summary-gap: ;
|
||||
--eidos-select-trigger-chip-max-width: ;
|
||||
--eidos-select-trigger-chip-px: ;
|
||||
--eidos-select-trigger-chip-py: ;
|
||||
--eidos-select-trigger-chip-radius: ;
|
||||
--eidos-select-trigger-chip-font-size: ;
|
||||
--eidos-select-trigger-chip-line-height: ;
|
||||
--eidos-select-trigger-chip-bg: ;
|
||||
--eidos-select-trigger-chip-color: ;
|
||||
--eidos-select-trigger-chip-more-bg: ;
|
||||
--eidos-select-trigger-chip-more-color: ;
|
||||
|
||||
--eidos-select-outline-border: ;
|
||||
--eidos-select-outline-border-hover: ;
|
||||
--eidos-select-outline-border-focus: ;
|
||||
|
||||
--eidos-select-ghost-bg: ;
|
||||
--eidos-select-ghost-bg-hover: ;
|
||||
--eidos-select-ghost-border: ;
|
||||
--eidos-select-ghost-border-hover: ;
|
||||
--eidos-select-ghost-border-focus: ;
|
||||
|
||||
--eidos-select-focus-ring-offset: ;
|
||||
--eidos-select-focus-ring-width: ;
|
||||
--eidos-select-focus-ring-color: ;
|
||||
--eidos-select-focus-ring: ;
|
||||
|
||||
--eidos-select-invalid-border: ;
|
||||
--eidos-select-invalid-border-focus: ;
|
||||
--eidos-select-invalid-focus-ring-color: ;
|
||||
--eidos-select-invalid-focus-ring: ;
|
||||
|
||||
--eidos-select-disabled-bg: ;
|
||||
--eidos-select-disabled-color: ;
|
||||
--eidos-select-disabled-border: ;
|
||||
|
||||
--eidos-select-content-bg: ;
|
||||
--eidos-select-content-color: ;
|
||||
--eidos-select-content-border: ;
|
||||
--eidos-select-content-border-width: ;
|
||||
--eidos-select-content-radius: ;
|
||||
--eidos-select-content-shadow: ;
|
||||
--eidos-select-content-z: ;
|
||||
--eidos-select-content-padding: ;
|
||||
--eidos-select-content-min-width: ;
|
||||
--eidos-select-content-max-height: ;
|
||||
|
||||
--eidos-select-viewport-padding: ;
|
||||
|
||||
--eidos-select-item-min-height: ;
|
||||
--eidos-select-item-px: ;
|
||||
--eidos-select-item-gap: ;
|
||||
--eidos-select-item-radius: ;
|
||||
--eidos-select-item-font-family: ;
|
||||
--eidos-select-item-font-size: ;
|
||||
--eidos-select-item-font-weight: ;
|
||||
--eidos-select-item-line-height: ;
|
||||
--eidos-select-item-transition-duration: ;
|
||||
--eidos-select-item-transition-ease: ;
|
||||
--eidos-select-item-color: ;
|
||||
--eidos-select-item-bg-highlighted: ;
|
||||
--eidos-select-item-color-highlighted: ;
|
||||
--eidos-select-item-bg-selected: ;
|
||||
--eidos-select-item-color-selected: ;
|
||||
--eidos-select-item-color-disabled: ;
|
||||
--eidos-select-item-indicator-color: ;
|
||||
|
||||
--eidos-select-group-gap: ;
|
||||
--eidos-select-group-padding-block: ;
|
||||
--eidos-select-group-heading-px: ;
|
||||
--eidos-select-group-heading-py: ;
|
||||
--eidos-select-group-heading-font-family: ;
|
||||
--eidos-select-group-heading-font-size: ;
|
||||
--eidos-select-group-heading-font-weight: ;
|
||||
--eidos-select-group-heading-line-height: ;
|
||||
--eidos-select-group-heading-letter-spacing: ;
|
||||
--eidos-select-group-heading-color: ;
|
||||
|
||||
--eidos-select-scroll-button-height: ;
|
||||
--eidos-select-scroll-button-radius: ;
|
||||
--eidos-select-scroll-button-color: ;
|
||||
--eidos-select-scroll-button-bg-hover: ;
|
||||
--eidos-select-indicator-transition-duration: ;
|
||||
--eidos-select-indicator-transition-ease: ;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
:root {
|
||||
--eidos-separator-thickness: ;
|
||||
--eidos-separator-min-length: ;
|
||||
--eidos-separator-color: ;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
:root {
|
||||
--eidos-slider-track-size-sm: ;
|
||||
--eidos-slider-track-size-md: ;
|
||||
--eidos-slider-track-size-lg: ;
|
||||
--eidos-slider-track-radius: ;
|
||||
--eidos-slider-track-bg: ;
|
||||
--eidos-slider-track-border-width: ;
|
||||
--eidos-slider-track-border: ;
|
||||
--eidos-slider-thumb-size-sm: ;
|
||||
--eidos-slider-thumb-size-md: ;
|
||||
--eidos-slider-thumb-size-lg: ;
|
||||
--eidos-slider-thumb-color: ;
|
||||
--eidos-slider-thumb-border-width: ;
|
||||
--eidos-slider-thumb-shadow: ;
|
||||
--eidos-slider-focus-ring: ;
|
||||
--eidos-slider-accent-bg: ;
|
||||
--eidos-slider-accent-border: ;
|
||||
--eidos-slider-disabled-opacity: ;
|
||||
--eidos-slider-tick-size: ;
|
||||
--eidos-slider-tick-bg: ;
|
||||
--eidos-slider-label-font-family: ;
|
||||
--eidos-slider-label-font-size: ;
|
||||
--eidos-slider-label-line-height: ;
|
||||
--eidos-slider-label-color: ;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
/*
|
||||
* air/contracts/component/spinner.css
|
||||
*
|
||||
* API pública del componente Spinner.
|
||||
* Expone color, escala, velocidad y geometría básica por variante.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--eidos-spinner-color: ;
|
||||
|
||||
--eidos-spinner-size-sm: ;
|
||||
--eidos-spinner-size-md: ;
|
||||
--eidos-spinner-size-lg: ;
|
||||
--eidos-spinner-size-xl: ;
|
||||
|
||||
--eidos-spinner-speed-slow: ;
|
||||
--eidos-spinner-speed-normal: ;
|
||||
--eidos-spinner-speed-fast: ;
|
||||
|
||||
--eidos-spinner-circular-stroke-sm: ;
|
||||
--eidos-spinner-circular-stroke-md: ;
|
||||
--eidos-spinner-circular-stroke-lg: ;
|
||||
--eidos-spinner-circular-stroke-xl: ;
|
||||
|
||||
--eidos-spinner-bars-gap-sm: ;
|
||||
--eidos-spinner-bars-gap-md: ;
|
||||
--eidos-spinner-bars-gap-lg: ;
|
||||
--eidos-spinner-bars-gap-xl: ;
|
||||
--eidos-spinner-bars-width-sm: ;
|
||||
--eidos-spinner-bars-width-md: ;
|
||||
--eidos-spinner-bars-width-lg: ;
|
||||
--eidos-spinner-bars-width-xl: ;
|
||||
--eidos-spinner-bars-radius: ;
|
||||
|
||||
--eidos-spinner-dots-gap-sm: ;
|
||||
--eidos-spinner-dots-gap-md: ;
|
||||
--eidos-spinner-dots-gap-lg: ;
|
||||
--eidos-spinner-dots-gap-xl: ;
|
||||
--eidos-spinner-dots-dot-sm: ;
|
||||
--eidos-spinner-dots-dot-md: ;
|
||||
--eidos-spinner-dots-dot-lg: ;
|
||||
--eidos-spinner-dots-dot-xl: ;
|
||||
|
||||
--eidos-spinner-pulse-ring-stroke: ;
|
||||
--eidos-spinner-pulse-dot-ratio: ;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--eidos-splitter-radius: ;
|
||||
--eidos-splitter-bg: ;
|
||||
--eidos-splitter-panel-bg: ;
|
||||
--eidos-splitter-border-width: ;
|
||||
--eidos-splitter-border-color: ;
|
||||
--eidos-splitter-handle-size: ;
|
||||
--eidos-splitter-handle-bg: ;
|
||||
--eidos-splitter-grip-bg: ;
|
||||
--eidos-splitter-grip-main: ;
|
||||
--eidos-splitter-grip-cross: ;
|
||||
--eidos-splitter-grip-radius: ;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--eidos-stack-gap-default: ;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
:root {
|
||||
--eidos-stepper-gap: ;
|
||||
--eidos-stepper-font-family: ;
|
||||
--eidos-stepper-list-gap-sm: ;
|
||||
--eidos-stepper-list-gap-md: ;
|
||||
--eidos-stepper-list-gap-lg: ;
|
||||
--eidos-stepper-indicator-size-sm: ;
|
||||
--eidos-stepper-indicator-size-md: ;
|
||||
--eidos-stepper-indicator-size-lg: ;
|
||||
--eidos-stepper-indicator-font-size-sm: ;
|
||||
--eidos-stepper-indicator-font-size-md: ;
|
||||
--eidos-stepper-indicator-font-size-lg: ;
|
||||
--eidos-stepper-indicator-font-weight: ;
|
||||
--eidos-stepper-indicator-radius: ;
|
||||
--eidos-stepper-indicator-border-width: ;
|
||||
--eidos-stepper-indicator-bg-incomplete: ;
|
||||
--eidos-stepper-indicator-border-incomplete: ;
|
||||
--eidos-stepper-indicator-color-incomplete: ;
|
||||
--eidos-stepper-indicator-bg-active: ;
|
||||
--eidos-stepper-indicator-border-active: ;
|
||||
--eidos-stepper-indicator-color-active: ;
|
||||
--eidos-stepper-indicator-bg-completed: ;
|
||||
--eidos-stepper-indicator-border-completed: ;
|
||||
--eidos-stepper-indicator-color-completed: ;
|
||||
--eidos-stepper-indicator-transition-duration: ;
|
||||
--eidos-stepper-indicator-transition-ease: ;
|
||||
--eidos-stepper-title-font-size-sm: ;
|
||||
--eidos-stepper-title-font-size-md: ;
|
||||
--eidos-stepper-title-font-size-lg: ;
|
||||
--eidos-stepper-title-font-weight: ;
|
||||
--eidos-stepper-title-color: ;
|
||||
--eidos-stepper-title-color-incomplete: ;
|
||||
--eidos-stepper-description-font-size-sm: ;
|
||||
--eidos-stepper-description-font-size-md: ;
|
||||
--eidos-stepper-description-font-size-lg: ;
|
||||
--eidos-stepper-description-color: ;
|
||||
--eidos-stepper-separator-thickness: ;
|
||||
--eidos-stepper-separator-color-incomplete: ;
|
||||
--eidos-stepper-separator-color-completed: ;
|
||||
--eidos-stepper-separator-color-active: ;
|
||||
--eidos-stepper-separator-transition-duration: ;
|
||||
--eidos-stepper-separator-transition-ease: ;
|
||||
--eidos-stepper-trigger-radius: ;
|
||||
--eidos-stepper-trigger-gap: ;
|
||||
--eidos-stepper-content-padding-sm: ;
|
||||
--eidos-stepper-content-padding-md: ;
|
||||
--eidos-stepper-content-padding-lg: ;
|
||||
--eidos-stepper-focus-ring-offset: ;
|
||||
--eidos-stepper-focus-ring-width: ;
|
||||
--eidos-stepper-focus-ring-color: ;
|
||||
--eidos-stepper-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
:root {
|
||||
--eidos-switch-size-sm-track-width: ;
|
||||
--eidos-switch-size-sm-track-height: ;
|
||||
--eidos-switch-size-sm-thumb-size: ;
|
||||
--eidos-switch-size-sm-thumb-translate: ;
|
||||
|
||||
--eidos-switch-size-md-track-width: ;
|
||||
--eidos-switch-size-md-track-height: ;
|
||||
--eidos-switch-size-md-thumb-size: ;
|
||||
--eidos-switch-size-md-thumb-translate: ;
|
||||
|
||||
--eidos-switch-size-lg-track-width: ;
|
||||
--eidos-switch-size-lg-track-height: ;
|
||||
--eidos-switch-size-lg-thumb-size: ;
|
||||
--eidos-switch-size-lg-thumb-translate: ;
|
||||
|
||||
--eidos-switch-track-radius: ;
|
||||
--eidos-switch-track-border-width: ;
|
||||
--eidos-switch-thumb-inset: ;
|
||||
--eidos-switch-thumb-radius: ;
|
||||
--eidos-switch-thumb-border-width: ;
|
||||
--eidos-switch-thumb-shadow: ;
|
||||
|
||||
--eidos-switch-focus-ring-offset: ;
|
||||
--eidos-switch-focus-ring-width: ;
|
||||
--eidos-switch-focus-ring-color: ;
|
||||
--eidos-switch-focus-ring-surface: ;
|
||||
--eidos-switch-transition-duration: ;
|
||||
--eidos-switch-transition-ease: ;
|
||||
|
||||
--eidos-switch-track-bg-off: ;
|
||||
--eidos-switch-track-bg-off-hover: ;
|
||||
--eidos-switch-track-border-off: ;
|
||||
--eidos-switch-track-border-off-hover: ;
|
||||
|
||||
--eidos-switch-track-bg-disabled: ;
|
||||
--eidos-switch-track-border-disabled: ;
|
||||
--eidos-switch-thumb-bg-disabled: ;
|
||||
--eidos-switch-thumb-border-disabled: ;
|
||||
--eidos-switch-disabled-opacity: ;
|
||||
|
||||
--eidos-switch-thumb-bg: ;
|
||||
--eidos-switch-thumb-border: ;
|
||||
|
||||
--eidos-switch-color-primary-track: ;
|
||||
--eidos-switch-color-primary-border: ;
|
||||
--eidos-switch-color-primary-solid: ;
|
||||
--eidos-switch-color-primary-solid-hover: ;
|
||||
|
||||
--eidos-switch-color-neutral-track: ;
|
||||
--eidos-switch-color-neutral-border: ;
|
||||
--eidos-switch-color-neutral-solid: ;
|
||||
--eidos-switch-color-neutral-solid-hover: ;
|
||||
|
||||
--eidos-switch-color-success-track: ;
|
||||
--eidos-switch-color-success-border: ;
|
||||
--eidos-switch-color-success-solid: ;
|
||||
--eidos-switch-color-success-solid-hover: ;
|
||||
|
||||
--eidos-switch-color-warning-track: ;
|
||||
--eidos-switch-color-warning-border: ;
|
||||
--eidos-switch-color-warning-solid: ;
|
||||
--eidos-switch-color-warning-solid-hover: ;
|
||||
|
||||
--eidos-switch-color-danger-track: ;
|
||||
--eidos-switch-color-danger-border: ;
|
||||
--eidos-switch-color-danger-solid: ;
|
||||
--eidos-switch-color-danger-solid-hover: ;
|
||||
|
||||
--eidos-switch-color-info-track: ;
|
||||
--eidos-switch-color-info-border: ;
|
||||
--eidos-switch-color-info-solid: ;
|
||||
--eidos-switch-color-info-solid-hover: ;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
:root {
|
||||
/* Context */
|
||||
--eidos-tabs-stack-gap: ;
|
||||
--eidos-tabs-line-stack-gap: ;
|
||||
--eidos-tabs-provider-radius: ;
|
||||
--eidos-tabs-provider-border-width: ;
|
||||
--eidos-tabs-provider-border: ;
|
||||
--eidos-tabs-provider-bg: ;
|
||||
--eidos-tabs-surface-provider-padding: ;
|
||||
--eidos-tabs-surface-provider-shadow: ;
|
||||
|
||||
/* List */
|
||||
--eidos-tabs-list-gap: ;
|
||||
--eidos-tabs-list-padding: ;
|
||||
--eidos-tabs-list-radius: ;
|
||||
--eidos-tabs-list-width: ;
|
||||
--eidos-tabs-list-bg: ;
|
||||
--eidos-tabs-list-border-width: ;
|
||||
--eidos-tabs-list-border: ;
|
||||
--eidos-tabs-line-list-padding-inline-end: ;
|
||||
--eidos-tabs-surface-list-bg: ;
|
||||
--eidos-tabs-pills-list-bg: ;
|
||||
|
||||
/* Trigger */
|
||||
--eidos-tabs-trigger-height-xs: ;
|
||||
--eidos-tabs-trigger-height-sm: ;
|
||||
--eidos-tabs-trigger-height-md: ;
|
||||
--eidos-tabs-trigger-height-lg: ;
|
||||
--eidos-tabs-trigger-px-xs: ;
|
||||
--eidos-tabs-trigger-px-sm: ;
|
||||
--eidos-tabs-trigger-px-md: ;
|
||||
--eidos-tabs-trigger-px-lg: ;
|
||||
--eidos-tabs-trigger-gap-xs: ;
|
||||
--eidos-tabs-trigger-gap-sm: ;
|
||||
--eidos-tabs-trigger-gap-md: ;
|
||||
--eidos-tabs-trigger-gap-lg: ;
|
||||
--eidos-tabs-trigger-radius: ;
|
||||
--eidos-tabs-trigger-border-width: ;
|
||||
--eidos-tabs-trigger-font-family: ;
|
||||
--eidos-tabs-trigger-font-size: ;
|
||||
--eidos-tabs-trigger-font-weight: ;
|
||||
--eidos-tabs-trigger-line-height: ;
|
||||
--eidos-tabs-trigger-letter-spacing: ;
|
||||
--eidos-tabs-trigger-color: ;
|
||||
--eidos-tabs-trigger-color-hover: ;
|
||||
--eidos-tabs-trigger-color-active: ;
|
||||
--eidos-tabs-trigger-bg: ;
|
||||
--eidos-tabs-trigger-bg-hover: ;
|
||||
--eidos-tabs-trigger-bg-active: ;
|
||||
--eidos-tabs-trigger-border: ;
|
||||
--eidos-tabs-trigger-border-active: ;
|
||||
--eidos-tabs-trigger-transition-duration: ;
|
||||
--eidos-tabs-trigger-transition-ease: ;
|
||||
--eidos-tabs-trigger-focus-ring-offset: ;
|
||||
--eidos-tabs-trigger-focus-ring-width: ;
|
||||
--eidos-tabs-trigger-focus-ring-color: ;
|
||||
--eidos-tabs-surface-trigger-border-active: ;
|
||||
--eidos-tabs-pills-trigger-radius: ;
|
||||
--eidos-tabs-pills-trigger-border-active: ;
|
||||
--eidos-tabs-pills-trigger-shadow-active: ;
|
||||
|
||||
/* Content */
|
||||
--eidos-tabs-content-padding-xs: ;
|
||||
--eidos-tabs-content-padding-sm: ;
|
||||
--eidos-tabs-content-padding-md: ;
|
||||
--eidos-tabs-content-padding-lg: ;
|
||||
--eidos-tabs-content-radius: ;
|
||||
--eidos-tabs-content-bg: ;
|
||||
--eidos-tabs-content-border-width: ;
|
||||
--eidos-tabs-content-border: ;
|
||||
--eidos-tabs-content-color: ;
|
||||
--eidos-tabs-surface-content-border: ;
|
||||
--eidos-tabs-surface-content-bg: ;
|
||||
--eidos-tabs-pills-content-padding-block-start: ;
|
||||
|
||||
--eidos-tabs-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
:root {
|
||||
--eidos-tags-input-min-height-sm: ;
|
||||
--eidos-tags-input-min-height-md: ;
|
||||
--eidos-tags-input-min-height-lg: ;
|
||||
--eidos-tags-input-px-sm: ;
|
||||
--eidos-tags-input-px-md: ;
|
||||
--eidos-tags-input-px-lg: ;
|
||||
--eidos-tags-input-py-sm: ;
|
||||
--eidos-tags-input-py-md: ;
|
||||
--eidos-tags-input-py-lg: ;
|
||||
--eidos-tags-input-gap-sm: ;
|
||||
--eidos-tags-input-gap-md: ;
|
||||
--eidos-tags-input-gap-lg: ;
|
||||
--eidos-tags-input-font-size-sm: ;
|
||||
--eidos-tags-input-font-size-md: ;
|
||||
--eidos-tags-input-font-size-lg: ;
|
||||
--eidos-tags-input-line-height: ;
|
||||
--eidos-tags-input-radius: ;
|
||||
--eidos-tags-input-border-width: ;
|
||||
--eidos-tags-input-bg: ;
|
||||
--eidos-tags-input-bg-ghost: ;
|
||||
--eidos-tags-input-border: ;
|
||||
--eidos-tags-input-border-ghost: ;
|
||||
--eidos-tags-input-border-focus: ;
|
||||
--eidos-tags-input-border-invalid: ;
|
||||
--eidos-tags-input-text-color: ;
|
||||
--eidos-tags-input-placeholder-color: ;
|
||||
--eidos-tags-input-shadow: ;
|
||||
--eidos-tags-input-focus-ring: ;
|
||||
--eidos-tags-input-focus-ring-invalid: ;
|
||||
--eidos-tags-input-transition-duration: ;
|
||||
--eidos-tags-input-transition-ease: ;
|
||||
--eidos-tags-input-disabled-opacity: ;
|
||||
|
||||
--eidos-tags-input-tag-height-sm: ;
|
||||
--eidos-tags-input-tag-height-md: ;
|
||||
--eidos-tags-input-tag-height-lg: ;
|
||||
--eidos-tags-input-tag-px-sm: ;
|
||||
--eidos-tags-input-tag-px-md: ;
|
||||
--eidos-tags-input-tag-px-lg: ;
|
||||
--eidos-tags-input-tag-font-size-sm: ;
|
||||
--eidos-tags-input-tag-font-size-md: ;
|
||||
--eidos-tags-input-tag-font-size-lg: ;
|
||||
--eidos-tags-input-tag-gap: ;
|
||||
--eidos-tags-input-tag-radius: ;
|
||||
--eidos-tags-input-tag-bg: ;
|
||||
--eidos-tags-input-tag-border: ;
|
||||
--eidos-tags-input-tag-color: ;
|
||||
--eidos-tags-input-tag-focus-ring: ;
|
||||
|
||||
--eidos-tags-input-clear-color: ;
|
||||
--eidos-tags-input-clear-radius: ;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
/*
|
||||
* contracts/component/text-virtual-list.css
|
||||
*
|
||||
* Contrato público de tokens para TextVirtualList.
|
||||
* Los implementadores de temas pueden sobrescribir estos tokens.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-tvl-font-family: ;
|
||||
--eidos-tvl-font-weight: ;
|
||||
|
||||
--eidos-tvl-border-width: ;
|
||||
--eidos-tvl-row-border-width: ;
|
||||
--eidos-tvl-bg: ;
|
||||
--eidos-tvl-border: ;
|
||||
--eidos-tvl-row-border: ;
|
||||
--eidos-tvl-color: ;
|
||||
--eidos-tvl-radius: ;
|
||||
--eidos-tvl-px: ;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* air/contracts/component/text.css
|
||||
*
|
||||
* API pública del componente Text.
|
||||
* Estos tokens son estables: cambiarlos es breaking change.
|
||||
*
|
||||
* Audiencia: consumidores del componente que quieran sobreescribir
|
||||
* colores en un scope concreto sin tocar el tema global.
|
||||
*
|
||||
* Nota: el tamaño, leading y tracking NO son tokens de componente.
|
||||
* Se resuelven automáticamente desde la escala global (--eidos-text-N-*)
|
||||
* según la prop `size`. El consumidor no los configura manualmente.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-text-font-family: ;
|
||||
--eidos-text-font-family-prose: ;
|
||||
--eidos-text-font-family-code: ;
|
||||
--eidos-text-font-weight: ;
|
||||
|
||||
/* Colores */
|
||||
--eidos-text-color-primary: ;
|
||||
--eidos-text-color-secondary: ;
|
||||
--eidos-text-color-disabled: ;
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
:root {
|
||||
--eidos-toast-toaster-z: ;
|
||||
--eidos-toast-toaster-inset: ;
|
||||
--eidos-toast-toaster-gap: ;
|
||||
--eidos-toast-toaster-width: ;
|
||||
|
||||
--eidos-toast-provider-min-width: ;
|
||||
--eidos-toast-provider-max-width: ;
|
||||
--eidos-toast-provider-gap: ;
|
||||
--eidos-toast-provider-stack-gap: ;
|
||||
--eidos-toast-provider-px: ;
|
||||
--eidos-toast-provider-py: ;
|
||||
--eidos-toast-provider-border-width: ;
|
||||
--eidos-toast-provider-radius: ;
|
||||
--eidos-toast-provider-shadow: ;
|
||||
--eidos-toast-accent-width: ;
|
||||
--eidos-toast-transition-duration: ;
|
||||
--eidos-toast-transition-ease: ;
|
||||
--eidos-toast-closed-offset: ;
|
||||
--eidos-toast-closed-scale: ;
|
||||
|
||||
--eidos-toast-status-size: ;
|
||||
--eidos-toast-status-radius: ;
|
||||
|
||||
--eidos-toast-title-font-family: ;
|
||||
--eidos-toast-title-font-size: ;
|
||||
--eidos-toast-title-font-weight: ;
|
||||
--eidos-toast-title-line-height: ;
|
||||
--eidos-toast-title-color: ;
|
||||
|
||||
--eidos-toast-message-font-family: ;
|
||||
--eidos-toast-message-font-size: ;
|
||||
--eidos-toast-message-font-weight: ;
|
||||
--eidos-toast-message-line-height: ;
|
||||
--eidos-toast-message-color: ;
|
||||
|
||||
--eidos-toast-description-font-family: ;
|
||||
--eidos-toast-description-font-size: ;
|
||||
--eidos-toast-description-line-height: ;
|
||||
--eidos-toast-description-color: ;
|
||||
|
||||
--eidos-toast-action-gap: ;
|
||||
--eidos-toast-action-px: ;
|
||||
--eidos-toast-action-py: ;
|
||||
--eidos-toast-action-margin-top: ;
|
||||
--eidos-toast-action-border-width: ;
|
||||
--eidos-toast-action-radius: ;
|
||||
--eidos-toast-action-font-family: ;
|
||||
--eidos-toast-action-font-size: ;
|
||||
--eidos-toast-action-font-weight: ;
|
||||
--eidos-toast-action-line-height: ;
|
||||
--eidos-toast-action-focus-ring-offset: ;
|
||||
--eidos-toast-action-focus-ring-width: ;
|
||||
--eidos-toast-action-focus-ring-color: ;
|
||||
|
||||
--eidos-toast-close-size: ;
|
||||
--eidos-toast-close-border-width: ;
|
||||
--eidos-toast-close-radius: ;
|
||||
--eidos-toast-close-bg: ;
|
||||
--eidos-toast-close-border: ;
|
||||
--eidos-toast-close-color: ;
|
||||
--eidos-toast-close-hover-bg: ;
|
||||
--eidos-toast-close-hover-border: ;
|
||||
--eidos-toast-close-hover-color: ;
|
||||
--eidos-toast-close-focus-ring-offset: ;
|
||||
--eidos-toast-close-focus-ring-width: ;
|
||||
--eidos-toast-close-focus-ring-color: ;
|
||||
|
||||
--eidos-toast-default-surface: ;
|
||||
--eidos-toast-default-border: ;
|
||||
--eidos-toast-default-accent: ;
|
||||
--eidos-toast-default-status-bg: ;
|
||||
--eidos-toast-default-status-color: ;
|
||||
--eidos-toast-default-action-color: ;
|
||||
--eidos-toast-default-action-hover-bg: ;
|
||||
|
||||
--eidos-toast-success-surface: ;
|
||||
--eidos-toast-success-border: ;
|
||||
--eidos-toast-success-accent: ;
|
||||
--eidos-toast-success-status-bg: ;
|
||||
--eidos-toast-success-status-color: ;
|
||||
--eidos-toast-success-action-color: ;
|
||||
--eidos-toast-success-action-hover-bg: ;
|
||||
|
||||
--eidos-toast-error-surface: ;
|
||||
--eidos-toast-error-border: ;
|
||||
--eidos-toast-error-accent: ;
|
||||
--eidos-toast-error-status-bg: ;
|
||||
--eidos-toast-error-status-color: ;
|
||||
--eidos-toast-error-action-color: ;
|
||||
--eidos-toast-error-action-hover-bg: ;
|
||||
|
||||
--eidos-toast-warning-surface: ;
|
||||
--eidos-toast-warning-border: ;
|
||||
--eidos-toast-warning-accent: ;
|
||||
--eidos-toast-warning-status-bg: ;
|
||||
--eidos-toast-warning-status-color: ;
|
||||
--eidos-toast-warning-action-color: ;
|
||||
--eidos-toast-warning-action-hover-bg: ;
|
||||
|
||||
--eidos-toast-info-surface: ;
|
||||
--eidos-toast-info-border: ;
|
||||
--eidos-toast-info-accent: ;
|
||||
--eidos-toast-info-status-bg: ;
|
||||
--eidos-toast-info-status-color: ;
|
||||
--eidos-toast-info-action-color: ;
|
||||
--eidos-toast-info-action-hover-bg: ;
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
:root {
|
||||
--eidos-toggle-group-height-sm: ;
|
||||
--eidos-toggle-group-height-md: ;
|
||||
--eidos-toggle-group-height-lg: ;
|
||||
--eidos-toggle-group-px-sm: ;
|
||||
--eidos-toggle-group-px-md: ;
|
||||
--eidos-toggle-group-px-lg: ;
|
||||
--eidos-toggle-group-gap-ghost: ;
|
||||
--eidos-toggle-group-font-family: ;
|
||||
--eidos-toggle-group-line-height: ;
|
||||
--eidos-toggle-group-letter-spacing: ;
|
||||
--eidos-toggle-group-font-size-sm: ;
|
||||
--eidos-toggle-group-font-size-md: ;
|
||||
--eidos-toggle-group-font-size-lg: ;
|
||||
--eidos-toggle-group-font-weight: ;
|
||||
--eidos-toggle-group-radius-sm: ;
|
||||
--eidos-toggle-group-radius-md: ;
|
||||
--eidos-toggle-group-radius-lg: ;
|
||||
--eidos-toggle-group-border-width: ;
|
||||
--eidos-toggle-group-transition-duration: ;
|
||||
--eidos-toggle-group-transition-ease: ;
|
||||
|
||||
--eidos-toggle-group-color-primary-track: ;
|
||||
--eidos-toggle-group-color-primary-element: ;
|
||||
--eidos-toggle-group-color-primary-hover: ;
|
||||
--eidos-toggle-group-color-primary-border: ;
|
||||
--eidos-toggle-group-color-primary-text: ;
|
||||
|
||||
--eidos-toggle-group-color-neutral-track: ;
|
||||
--eidos-toggle-group-color-neutral-element: ;
|
||||
--eidos-toggle-group-color-neutral-hover: ;
|
||||
--eidos-toggle-group-color-neutral-border: ;
|
||||
--eidos-toggle-group-color-neutral-text: ;
|
||||
|
||||
--eidos-toggle-group-color-success-track: ;
|
||||
--eidos-toggle-group-color-success-element: ;
|
||||
--eidos-toggle-group-color-success-hover: ;
|
||||
--eidos-toggle-group-color-success-border: ;
|
||||
--eidos-toggle-group-color-success-text: ;
|
||||
|
||||
--eidos-toggle-group-color-warning-track: ;
|
||||
--eidos-toggle-group-color-warning-element: ;
|
||||
--eidos-toggle-group-color-warning-hover: ;
|
||||
--eidos-toggle-group-color-warning-border: ;
|
||||
--eidos-toggle-group-color-warning-text: ;
|
||||
|
||||
--eidos-toggle-group-color-danger-track: ;
|
||||
--eidos-toggle-group-color-danger-element: ;
|
||||
--eidos-toggle-group-color-danger-hover: ;
|
||||
--eidos-toggle-group-color-danger-border: ;
|
||||
--eidos-toggle-group-color-danger-text: ;
|
||||
|
||||
--eidos-toggle-group-color-info-track: ;
|
||||
--eidos-toggle-group-color-info-element: ;
|
||||
--eidos-toggle-group-color-info-hover: ;
|
||||
--eidos-toggle-group-color-info-border: ;
|
||||
--eidos-toggle-group-color-info-text: ;
|
||||
|
||||
--eidos-toggle-group-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
:root {
|
||||
--eidos-toggle-height-sm: ;
|
||||
--eidos-toggle-height-md: ;
|
||||
--eidos-toggle-height-lg: ;
|
||||
--eidos-toggle-px-sm: ;
|
||||
--eidos-toggle-px-md: ;
|
||||
--eidos-toggle-px-lg: ;
|
||||
--eidos-toggle-gap-sm: ;
|
||||
--eidos-toggle-gap-md: ;
|
||||
--eidos-toggle-gap-lg: ;
|
||||
--eidos-toggle-font-family: ;
|
||||
--eidos-toggle-line-height: ;
|
||||
--eidos-toggle-letter-spacing: ;
|
||||
--eidos-toggle-font-size-sm: ;
|
||||
--eidos-toggle-font-size-md: ;
|
||||
--eidos-toggle-font-size-lg: ;
|
||||
--eidos-toggle-font-weight-sm: ;
|
||||
--eidos-toggle-font-weight-md: ;
|
||||
--eidos-toggle-font-weight-lg: ;
|
||||
--eidos-toggle-radius-sm: ;
|
||||
--eidos-toggle-radius-md: ;
|
||||
--eidos-toggle-radius-lg: ;
|
||||
--eidos-toggle-border-width: ;
|
||||
--eidos-toggle-shadow: ;
|
||||
--eidos-toggle-transition-duration: ;
|
||||
--eidos-toggle-transition-ease: ;
|
||||
--eidos-toggle-palette-track: ;
|
||||
--eidos-toggle-palette-element: ;
|
||||
--eidos-toggle-palette-hover: ;
|
||||
--eidos-toggle-palette-active: ;
|
||||
--eidos-toggle-palette-border: ;
|
||||
--eidos-toggle-palette-solid: ;
|
||||
--eidos-toggle-palette-solid-hover: ;
|
||||
--eidos-toggle-palette-text: ;
|
||||
--eidos-toggle-palette-contrast: ;
|
||||
--eidos-toggle-surface-bg: ;
|
||||
--eidos-toggle-surface-fg: ;
|
||||
--eidos-toggle-surface-border: ;
|
||||
--eidos-toggle-surface-hover-bg: ;
|
||||
--eidos-toggle-surface-hover-border: ;
|
||||
--eidos-toggle-surface-on-bg: ;
|
||||
--eidos-toggle-surface-on-fg: ;
|
||||
--eidos-toggle-surface-on-border: ;
|
||||
--eidos-toggle-surface-on-hover-bg: ;
|
||||
--eidos-toggle-surface-on-hover-border: ;
|
||||
--eidos-toggle-outline-bg: ;
|
||||
--eidos-toggle-outline-fg: ;
|
||||
--eidos-toggle-outline-border: ;
|
||||
--eidos-toggle-outline-hover-bg: ;
|
||||
--eidos-toggle-outline-hover-border: ;
|
||||
--eidos-toggle-outline-on-bg: ;
|
||||
--eidos-toggle-outline-on-fg: ;
|
||||
--eidos-toggle-outline-on-border: ;
|
||||
--eidos-toggle-outline-on-hover-bg: ;
|
||||
--eidos-toggle-outline-on-hover-border: ;
|
||||
--eidos-toggle-ghost-bg: ;
|
||||
--eidos-toggle-ghost-fg: ;
|
||||
--eidos-toggle-ghost-border: ;
|
||||
--eidos-toggle-ghost-hover-bg: ;
|
||||
--eidos-toggle-ghost-hover-border: ;
|
||||
--eidos-toggle-ghost-on-bg: ;
|
||||
--eidos-toggle-ghost-on-fg: ;
|
||||
--eidos-toggle-ghost-on-border: ;
|
||||
--eidos-toggle-ghost-on-hover-bg: ;
|
||||
--eidos-toggle-ghost-on-hover-border: ;
|
||||
--eidos-toggle-color-primary-track: ;
|
||||
--eidos-toggle-color-primary-element: ;
|
||||
--eidos-toggle-color-primary-hover: ;
|
||||
--eidos-toggle-color-primary-active: ;
|
||||
--eidos-toggle-color-primary-border: ;
|
||||
--eidos-toggle-color-primary-solid: ;
|
||||
--eidos-toggle-color-primary-solid-hover: ;
|
||||
--eidos-toggle-color-primary-text: ;
|
||||
--eidos-toggle-color-primary-contrast: ;
|
||||
--eidos-toggle-color-neutral-track: ;
|
||||
--eidos-toggle-color-neutral-element: ;
|
||||
--eidos-toggle-color-neutral-hover: ;
|
||||
--eidos-toggle-color-neutral-active: ;
|
||||
--eidos-toggle-color-neutral-border: ;
|
||||
--eidos-toggle-color-neutral-solid: ;
|
||||
--eidos-toggle-color-neutral-solid-hover: ;
|
||||
--eidos-toggle-color-neutral-text: ;
|
||||
--eidos-toggle-color-neutral-contrast: ;
|
||||
--eidos-toggle-color-success-track: ;
|
||||
--eidos-toggle-color-success-element: ;
|
||||
--eidos-toggle-color-success-hover: ;
|
||||
--eidos-toggle-color-success-active: ;
|
||||
--eidos-toggle-color-success-border: ;
|
||||
--eidos-toggle-color-success-solid: ;
|
||||
--eidos-toggle-color-success-solid-hover: ;
|
||||
--eidos-toggle-color-success-text: ;
|
||||
--eidos-toggle-color-success-contrast: ;
|
||||
--eidos-toggle-color-warning-track: ;
|
||||
--eidos-toggle-color-warning-element: ;
|
||||
--eidos-toggle-color-warning-hover: ;
|
||||
--eidos-toggle-color-warning-active: ;
|
||||
--eidos-toggle-color-warning-border: ;
|
||||
--eidos-toggle-color-warning-solid: ;
|
||||
--eidos-toggle-color-warning-solid-hover: ;
|
||||
--eidos-toggle-color-warning-text: ;
|
||||
--eidos-toggle-color-warning-contrast: ;
|
||||
--eidos-toggle-color-danger-track: ;
|
||||
--eidos-toggle-color-danger-element: ;
|
||||
--eidos-toggle-color-danger-hover: ;
|
||||
--eidos-toggle-color-danger-active: ;
|
||||
--eidos-toggle-color-danger-border: ;
|
||||
--eidos-toggle-color-danger-solid: ;
|
||||
--eidos-toggle-color-danger-solid-hover: ;
|
||||
--eidos-toggle-color-danger-text: ;
|
||||
--eidos-toggle-color-danger-contrast: ;
|
||||
--eidos-toggle-color-info-track: ;
|
||||
--eidos-toggle-color-info-element: ;
|
||||
--eidos-toggle-color-info-hover: ;
|
||||
--eidos-toggle-color-info-active: ;
|
||||
--eidos-toggle-color-info-border: ;
|
||||
--eidos-toggle-color-info-solid: ;
|
||||
--eidos-toggle-color-info-solid-hover: ;
|
||||
--eidos-toggle-color-info-text: ;
|
||||
--eidos-toggle-color-info-contrast: ;
|
||||
|
||||
--eidos-toggle-disabled-opacity: ;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
:root {
|
||||
--eidos-toolbar-height-sm: ;
|
||||
--eidos-toolbar-height-md: ;
|
||||
--eidos-toolbar-height-lg: ;
|
||||
--eidos-toolbar-px-sm: ;
|
||||
--eidos-toolbar-px-md: ;
|
||||
--eidos-toolbar-px-lg: ;
|
||||
--eidos-toolbar-gap-sm: ;
|
||||
--eidos-toolbar-gap-md: ;
|
||||
--eidos-toolbar-gap-lg: ;
|
||||
--eidos-toolbar-item-px-sm: ;
|
||||
--eidos-toolbar-item-px-md: ;
|
||||
--eidos-toolbar-item-px-lg: ;
|
||||
--eidos-toolbar-font-family: ;
|
||||
--eidos-toolbar-font-size-sm: ;
|
||||
--eidos-toolbar-font-size-md: ;
|
||||
--eidos-toolbar-font-size-lg: ;
|
||||
--eidos-toolbar-font-weight: ;
|
||||
--eidos-toolbar-line-height: ;
|
||||
--eidos-toolbar-letter-spacing: ;
|
||||
--eidos-toolbar-radius-sm: ;
|
||||
--eidos-toolbar-radius-md: ;
|
||||
--eidos-toolbar-radius-lg: ;
|
||||
--eidos-toolbar-item-radius-sm: ;
|
||||
--eidos-toolbar-item-radius-md: ;
|
||||
--eidos-toolbar-item-radius-lg: ;
|
||||
--eidos-toolbar-border-width: ;
|
||||
--eidos-toolbar-separator-size: ;
|
||||
--eidos-toolbar-transition-duration: ;
|
||||
--eidos-toolbar-transition-ease: ;
|
||||
--eidos-toolbar-disabled-opacity: ;
|
||||
|
||||
--eidos-toolbar-color-primary-track: ;
|
||||
--eidos-toolbar-color-primary-element: ;
|
||||
--eidos-toolbar-color-primary-hover: ;
|
||||
--eidos-toolbar-color-primary-border: ;
|
||||
--eidos-toolbar-color-primary-text: ;
|
||||
|
||||
--eidos-toolbar-color-neutral-track: ;
|
||||
--eidos-toolbar-color-neutral-element: ;
|
||||
--eidos-toolbar-color-neutral-hover: ;
|
||||
--eidos-toolbar-color-neutral-border: ;
|
||||
--eidos-toolbar-color-neutral-text: ;
|
||||
|
||||
--eidos-toolbar-color-success-track: ;
|
||||
--eidos-toolbar-color-success-element: ;
|
||||
--eidos-toolbar-color-success-hover: ;
|
||||
--eidos-toolbar-color-success-border: ;
|
||||
--eidos-toolbar-color-success-text: ;
|
||||
|
||||
--eidos-toolbar-color-warning-track: ;
|
||||
--eidos-toolbar-color-warning-element: ;
|
||||
--eidos-toolbar-color-warning-hover: ;
|
||||
--eidos-toolbar-color-warning-border: ;
|
||||
--eidos-toolbar-color-warning-text: ;
|
||||
|
||||
--eidos-toolbar-color-danger-track: ;
|
||||
--eidos-toolbar-color-danger-element: ;
|
||||
--eidos-toolbar-color-danger-hover: ;
|
||||
--eidos-toolbar-color-danger-border: ;
|
||||
--eidos-toolbar-color-danger-text: ;
|
||||
|
||||
--eidos-toolbar-color-info-track: ;
|
||||
--eidos-toolbar-color-info-element: ;
|
||||
--eidos-toolbar-color-info-hover: ;
|
||||
--eidos-toolbar-color-info-border: ;
|
||||
--eidos-toolbar-color-info-text: ;
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
:root {
|
||||
--eidos-tooltip-content-z: ;
|
||||
--eidos-tooltip-max-width: ;
|
||||
--eidos-tooltip-padding-y-sm: ;
|
||||
--eidos-tooltip-padding-x-sm: ;
|
||||
--eidos-tooltip-padding-y-md: ;
|
||||
--eidos-tooltip-padding-x-md: ;
|
||||
--eidos-tooltip-padding-y-lg: ;
|
||||
--eidos-tooltip-padding-x-lg: ;
|
||||
--eidos-tooltip-font-size-sm: ;
|
||||
--eidos-tooltip-font-size-md: ;
|
||||
--eidos-tooltip-font-size-lg: ;
|
||||
--eidos-tooltip-font-family: ;
|
||||
--eidos-tooltip-font-weight: ;
|
||||
--eidos-tooltip-line-height: ;
|
||||
--eidos-tooltip-radius: ;
|
||||
--eidos-tooltip-border-width: ;
|
||||
--eidos-tooltip-bg: ;
|
||||
--eidos-tooltip-color: ;
|
||||
--eidos-tooltip-border: ;
|
||||
--eidos-tooltip-shadow: ;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
/*
|
||||
* Wrap no expone tokens públicos.
|
||||
* Es composición pura de Flex con flex-wrap forzado.
|
||||
* El contrato existe para mantener la paridad estructural del sistema.
|
||||
*/
|
||||
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* air/contracts/contract-all.css
|
||||
*
|
||||
* Barrel completo para autores de tema que quieran implementar
|
||||
* todo el sistema contractual de air.
|
||||
*/
|
||||
|
||||
@import './contract.css';
|
||||
@import './contract-categorical.css';
|
||||
@import './contract-primitives.css';
|
||||
@ -0,0 +1,96 @@
|
||||
/*
|
||||
* air/contracts/contract-categorical.css
|
||||
*
|
||||
* Extension opcional para familias categoricas.
|
||||
* Requiere contract.css implementado.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Ruby */
|
||||
--eidos-color-ruby-track: ;
|
||||
--eidos-color-ruby-element: ;
|
||||
--eidos-color-ruby-hover: ;
|
||||
--eidos-color-ruby-active: ;
|
||||
--eidos-color-ruby-border: ;
|
||||
--eidos-color-ruby-solid: ;
|
||||
--eidos-color-ruby-solid-hover: ;
|
||||
--eidos-color-ruby-text: ;
|
||||
--eidos-color-ruby-contrast: ;
|
||||
|
||||
/* Amber */
|
||||
--eidos-color-amber-track: ;
|
||||
--eidos-color-amber-element: ;
|
||||
--eidos-color-amber-hover: ;
|
||||
--eidos-color-amber-active: ;
|
||||
--eidos-color-amber-border: ;
|
||||
--eidos-color-amber-solid: ;
|
||||
--eidos-color-amber-solid-hover: ;
|
||||
--eidos-color-amber-text: ;
|
||||
--eidos-color-amber-contrast: ;
|
||||
|
||||
/* Lime */
|
||||
--eidos-color-lime-track: ;
|
||||
--eidos-color-lime-element: ;
|
||||
--eidos-color-lime-hover: ;
|
||||
--eidos-color-lime-active: ;
|
||||
--eidos-color-lime-border: ;
|
||||
--eidos-color-lime-solid: ;
|
||||
--eidos-color-lime-solid-hover: ;
|
||||
--eidos-color-lime-text: ;
|
||||
--eidos-color-lime-contrast: ;
|
||||
|
||||
/* Teal */
|
||||
--eidos-color-teal-track: ;
|
||||
--eidos-color-teal-element: ;
|
||||
--eidos-color-teal-hover: ;
|
||||
--eidos-color-teal-active: ;
|
||||
--eidos-color-teal-border: ;
|
||||
--eidos-color-teal-solid: ;
|
||||
--eidos-color-teal-solid-hover: ;
|
||||
--eidos-color-teal-text: ;
|
||||
--eidos-color-teal-contrast: ;
|
||||
|
||||
/* Sky */
|
||||
--eidos-color-sky-track: ;
|
||||
--eidos-color-sky-element: ;
|
||||
--eidos-color-sky-hover: ;
|
||||
--eidos-color-sky-active: ;
|
||||
--eidos-color-sky-border: ;
|
||||
--eidos-color-sky-solid: ;
|
||||
--eidos-color-sky-solid-hover: ;
|
||||
--eidos-color-sky-text: ;
|
||||
--eidos-color-sky-contrast: ;
|
||||
|
||||
/* Violet */
|
||||
--eidos-color-violet-track: ;
|
||||
--eidos-color-violet-element: ;
|
||||
--eidos-color-violet-hover: ;
|
||||
--eidos-color-violet-active: ;
|
||||
--eidos-color-violet-border: ;
|
||||
--eidos-color-violet-solid: ;
|
||||
--eidos-color-violet-solid-hover: ;
|
||||
--eidos-color-violet-text: ;
|
||||
--eidos-color-violet-contrast: ;
|
||||
|
||||
/* Pink */
|
||||
--eidos-color-pink-track: ;
|
||||
--eidos-color-pink-element: ;
|
||||
--eidos-color-pink-hover: ;
|
||||
--eidos-color-pink-active: ;
|
||||
--eidos-color-pink-border: ;
|
||||
--eidos-color-pink-solid: ;
|
||||
--eidos-color-pink-solid-hover: ;
|
||||
--eidos-color-pink-text: ;
|
||||
--eidos-color-pink-contrast: ;
|
||||
|
||||
/* Sand */
|
||||
--eidos-color-sand-track: ;
|
||||
--eidos-color-sand-element: ;
|
||||
--eidos-color-sand-hover: ;
|
||||
--eidos-color-sand-active: ;
|
||||
--eidos-color-sand-border: ;
|
||||
--eidos-color-sand-solid: ;
|
||||
--eidos-color-sand-solid-hover: ;
|
||||
--eidos-color-sand-text: ;
|
||||
--eidos-color-sand-contrast: ;
|
||||
}
|
||||
@ -0,0 +1,106 @@
|
||||
/*
|
||||
* air/contracts/contract-primitives.css
|
||||
*
|
||||
* Extension opcional para autores de tema avanzado.
|
||||
* Permite redefinir escalas de 12 pasos.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Neutral */
|
||||
--eidos-primitive-neutral-1: ;
|
||||
--eidos-primitive-neutral-2: ;
|
||||
--eidos-primitive-neutral-3: ;
|
||||
--eidos-primitive-neutral-4: ;
|
||||
--eidos-primitive-neutral-5: ;
|
||||
--eidos-primitive-neutral-6: ;
|
||||
--eidos-primitive-neutral-7: ;
|
||||
--eidos-primitive-neutral-8: ;
|
||||
--eidos-primitive-neutral-9: ;
|
||||
--eidos-primitive-neutral-10: ;
|
||||
--eidos-primitive-neutral-11: ;
|
||||
--eidos-primitive-neutral-12: ;
|
||||
|
||||
/* Neutral cool */
|
||||
--eidos-primitive-neutral-cool-1: ;
|
||||
--eidos-primitive-neutral-cool-2: ;
|
||||
--eidos-primitive-neutral-cool-3: ;
|
||||
--eidos-primitive-neutral-cool-4: ;
|
||||
--eidos-primitive-neutral-cool-5: ;
|
||||
--eidos-primitive-neutral-cool-6: ;
|
||||
--eidos-primitive-neutral-cool-7: ;
|
||||
--eidos-primitive-neutral-cool-8: ;
|
||||
--eidos-primitive-neutral-cool-9: ;
|
||||
--eidos-primitive-neutral-cool-10: ;
|
||||
--eidos-primitive-neutral-cool-11: ;
|
||||
--eidos-primitive-neutral-cool-12: ;
|
||||
|
||||
/* Primary */
|
||||
--eidos-primitive-primary-1: ;
|
||||
--eidos-primitive-primary-2: ;
|
||||
--eidos-primitive-primary-3: ;
|
||||
--eidos-primitive-primary-4: ;
|
||||
--eidos-primitive-primary-5: ;
|
||||
--eidos-primitive-primary-6: ;
|
||||
--eidos-primitive-primary-7: ;
|
||||
--eidos-primitive-primary-8: ;
|
||||
--eidos-primitive-primary-9: ;
|
||||
--eidos-primitive-primary-10: ;
|
||||
--eidos-primitive-primary-11: ;
|
||||
--eidos-primitive-primary-12: ;
|
||||
|
||||
/* Danger */
|
||||
--eidos-primitive-danger-1: ;
|
||||
--eidos-primitive-danger-2: ;
|
||||
--eidos-primitive-danger-3: ;
|
||||
--eidos-primitive-danger-4: ;
|
||||
--eidos-primitive-danger-5: ;
|
||||
--eidos-primitive-danger-6: ;
|
||||
--eidos-primitive-danger-7: ;
|
||||
--eidos-primitive-danger-8: ;
|
||||
--eidos-primitive-danger-9: ;
|
||||
--eidos-primitive-danger-10: ;
|
||||
--eidos-primitive-danger-11: ;
|
||||
--eidos-primitive-danger-12: ;
|
||||
|
||||
/* Success */
|
||||
--eidos-primitive-success-1: ;
|
||||
--eidos-primitive-success-2: ;
|
||||
--eidos-primitive-success-3: ;
|
||||
--eidos-primitive-success-4: ;
|
||||
--eidos-primitive-success-5: ;
|
||||
--eidos-primitive-success-6: ;
|
||||
--eidos-primitive-success-7: ;
|
||||
--eidos-primitive-success-8: ;
|
||||
--eidos-primitive-success-9: ;
|
||||
--eidos-primitive-success-10: ;
|
||||
--eidos-primitive-success-11: ;
|
||||
--eidos-primitive-success-12: ;
|
||||
|
||||
/* Warning */
|
||||
--eidos-primitive-warning-1: ;
|
||||
--eidos-primitive-warning-2: ;
|
||||
--eidos-primitive-warning-3: ;
|
||||
--eidos-primitive-warning-4: ;
|
||||
--eidos-primitive-warning-5: ;
|
||||
--eidos-primitive-warning-6: ;
|
||||
--eidos-primitive-warning-7: ;
|
||||
--eidos-primitive-warning-8: ;
|
||||
--eidos-primitive-warning-9: ;
|
||||
--eidos-primitive-warning-10: ;
|
||||
--eidos-primitive-warning-11: ;
|
||||
--eidos-primitive-warning-12: ;
|
||||
|
||||
/* Info */
|
||||
--eidos-primitive-info-1: ;
|
||||
--eidos-primitive-info-2: ;
|
||||
--eidos-primitive-info-3: ;
|
||||
--eidos-primitive-info-4: ;
|
||||
--eidos-primitive-info-5: ;
|
||||
--eidos-primitive-info-6: ;
|
||||
--eidos-primitive-info-7: ;
|
||||
--eidos-primitive-info-8: ;
|
||||
--eidos-primitive-info-9: ;
|
||||
--eidos-primitive-info-10: ;
|
||||
--eidos-primitive-info-11: ;
|
||||
--eidos-primitive-info-12: ;
|
||||
}
|
||||
@ -0,0 +1,261 @@
|
||||
/*
|
||||
* air/contracts/contract.css
|
||||
*
|
||||
* Contrato minimo obligatorio de air hacia los temas.
|
||||
* Solo semanticos y escalas globales.
|
||||
*
|
||||
* Este archivo define interfaz, no implementacion.
|
||||
* Cambiar nombres o semantica aqui es breaking change.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Surfaces */
|
||||
--eidos-color-surface-default: ;
|
||||
--eidos-color-surface-raised: ;
|
||||
--eidos-color-surface-overlay: ;
|
||||
--eidos-color-overlay: ;
|
||||
|
||||
/* Content */
|
||||
--eidos-color-content-primary: ;
|
||||
--eidos-color-content-secondary: ;
|
||||
--eidos-color-content-disabled: ;
|
||||
--eidos-color-content-on-solid: ;
|
||||
|
||||
/* Borders and focus */
|
||||
--eidos-color-border-subtle: ;
|
||||
--eidos-color-border-default: ;
|
||||
--eidos-color-border-strong: ;
|
||||
--eidos-color-focus-ring: ;
|
||||
|
||||
/* Primary */
|
||||
--eidos-color-primary-track: ;
|
||||
--eidos-color-primary-element: ;
|
||||
--eidos-color-primary-hover: ;
|
||||
--eidos-color-primary-active: ;
|
||||
--eidos-color-primary-border: ;
|
||||
--eidos-color-primary-solid: ;
|
||||
--eidos-color-primary-solid-hover: ;
|
||||
--eidos-color-primary-text: ;
|
||||
--eidos-color-primary-contrast: ;
|
||||
|
||||
/* Neutral */
|
||||
--eidos-color-neutral-track: ;
|
||||
--eidos-color-neutral-element: ;
|
||||
--eidos-color-neutral-hover: ;
|
||||
--eidos-color-neutral-active: ;
|
||||
--eidos-color-neutral-border: ;
|
||||
--eidos-color-neutral-solid: ;
|
||||
--eidos-color-neutral-solid-hover: ;
|
||||
--eidos-color-neutral-text: ;
|
||||
--eidos-color-neutral-contrast: ;
|
||||
|
||||
/* Neutral cool */
|
||||
--eidos-color-neutral-cool-track: ;
|
||||
--eidos-color-neutral-cool-element: ;
|
||||
--eidos-color-neutral-cool-hover: ;
|
||||
--eidos-color-neutral-cool-active: ;
|
||||
--eidos-color-neutral-cool-border: ;
|
||||
--eidos-color-neutral-cool-text: ;
|
||||
--eidos-color-neutral-cool-contrast: ;
|
||||
|
||||
/* Danger */
|
||||
--eidos-color-danger-track: ;
|
||||
--eidos-color-danger-element: ;
|
||||
--eidos-color-danger-hover: ;
|
||||
--eidos-color-danger-active: ;
|
||||
--eidos-color-danger-border: ;
|
||||
--eidos-color-danger-solid: ;
|
||||
--eidos-color-danger-solid-hover: ;
|
||||
--eidos-color-danger-text: ;
|
||||
--eidos-color-danger-contrast: ;
|
||||
|
||||
/* Success */
|
||||
--eidos-color-success-track: ;
|
||||
--eidos-color-success-element: ;
|
||||
--eidos-color-success-hover: ;
|
||||
--eidos-color-success-active: ;
|
||||
--eidos-color-success-border: ;
|
||||
--eidos-color-success-solid: ;
|
||||
--eidos-color-success-solid-hover: ;
|
||||
--eidos-color-success-text: ;
|
||||
--eidos-color-success-contrast: ;
|
||||
|
||||
/* Warning */
|
||||
--eidos-color-warning-track: ;
|
||||
--eidos-color-warning-element: ;
|
||||
--eidos-color-warning-hover: ;
|
||||
--eidos-color-warning-active: ;
|
||||
--eidos-color-warning-border: ;
|
||||
--eidos-color-warning-solid: ;
|
||||
--eidos-color-warning-solid-hover: ;
|
||||
--eidos-color-warning-text: ;
|
||||
--eidos-color-warning-contrast: ;
|
||||
|
||||
/* Info */
|
||||
--eidos-color-info-track: ;
|
||||
--eidos-color-info-element: ;
|
||||
--eidos-color-info-hover: ;
|
||||
--eidos-color-info-active: ;
|
||||
--eidos-color-info-border: ;
|
||||
--eidos-color-info-solid: ;
|
||||
--eidos-color-info-solid-hover: ;
|
||||
--eidos-color-info-text: ;
|
||||
--eidos-color-info-contrast: ;
|
||||
|
||||
/* Space */
|
||||
--eidos-space-0: ;
|
||||
--eidos-space-0-5: ;
|
||||
--eidos-space-1: ;
|
||||
--eidos-space-1-5: ;
|
||||
--eidos-space-2: ;
|
||||
--eidos-space-2-5: ;
|
||||
--eidos-space-3: ;
|
||||
--eidos-space-3-5: ;
|
||||
--eidos-space-4: ;
|
||||
--eidos-space-4-5: ;
|
||||
--eidos-space-5: ;
|
||||
--eidos-space-5-5: ;
|
||||
--eidos-space-6: ;
|
||||
--eidos-space-8: ;
|
||||
--eidos-space-10: ;
|
||||
--eidos-space-12: ;
|
||||
--eidos-space-16: ;
|
||||
|
||||
/* Control heights */
|
||||
--eidos-control-height-2xs: ;
|
||||
--eidos-control-height-xs: ;
|
||||
--eidos-control-height-sm: ;
|
||||
--eidos-control-height-md: ;
|
||||
--eidos-control-height-lg: ;
|
||||
--eidos-control-height-xl: ;
|
||||
|
||||
/* Shared interaction geometry */
|
||||
--eidos-border-width: ;
|
||||
--eidos-focus-ring-offset: ;
|
||||
--eidos-focus-ring-width: ;
|
||||
|
||||
/* Radius */
|
||||
--eidos-radius-none: ;
|
||||
--eidos-radius-sm: ;
|
||||
--eidos-radius-md: ;
|
||||
--eidos-radius-lg: ;
|
||||
--eidos-radius-xl: ;
|
||||
--eidos-radius-xxl: ;
|
||||
--eidos-radius-full: ;
|
||||
|
||||
/* Typography families */
|
||||
--eidos-font-sans: ;
|
||||
--eidos-font-mono: ;
|
||||
--eidos-font-ui: ;
|
||||
--eidos-font-prose: ;
|
||||
--eidos-font-heading: ;
|
||||
--eidos-font-display: ;
|
||||
--eidos-font-code: ;
|
||||
|
||||
/* Typography 12-step scale */
|
||||
--eidos-text-1-size: ;
|
||||
--eidos-text-1-lh: ;
|
||||
--eidos-text-1-ls: ;
|
||||
--eidos-text-2-size: ;
|
||||
--eidos-text-2-lh: ;
|
||||
--eidos-text-2-ls: ;
|
||||
--eidos-text-3-size: ;
|
||||
--eidos-text-3-lh: ;
|
||||
--eidos-text-3-ls: ;
|
||||
--eidos-text-4-size: ;
|
||||
--eidos-text-4-lh: ;
|
||||
--eidos-text-4-ls: ;
|
||||
--eidos-text-5-size: ;
|
||||
--eidos-text-5-lh: ;
|
||||
--eidos-text-5-ls: ;
|
||||
--eidos-text-6-size: ;
|
||||
--eidos-text-6-lh: ;
|
||||
--eidos-text-6-ls: ;
|
||||
--eidos-text-7-size: ;
|
||||
--eidos-text-7-lh: ;
|
||||
--eidos-text-7-ls: ;
|
||||
--eidos-text-8-size: ;
|
||||
--eidos-text-8-lh: ;
|
||||
--eidos-text-8-ls: ;
|
||||
--eidos-text-9-size: ;
|
||||
--eidos-text-9-lh: ;
|
||||
--eidos-text-9-ls: ;
|
||||
--eidos-text-10-size: ;
|
||||
--eidos-text-10-lh: ;
|
||||
--eidos-text-10-ls: ;
|
||||
--eidos-text-11-size: ;
|
||||
--eidos-text-11-lh: ;
|
||||
--eidos-text-11-ls: ;
|
||||
--eidos-text-12-size: ;
|
||||
--eidos-text-12-lh: ;
|
||||
--eidos-text-12-ls: ;
|
||||
|
||||
/* Typography roles */
|
||||
--eidos-font-size-xxs: ;
|
||||
--eidos-font-size-xs: ;
|
||||
--eidos-font-size-sm: ;
|
||||
--eidos-font-size-md: ;
|
||||
--eidos-font-size-lg: ;
|
||||
--eidos-font-size-xl: ;
|
||||
--eidos-font-size-2xl: ;
|
||||
--eidos-font-size-3xl: ;
|
||||
--eidos-font-weight-regular: ;
|
||||
--eidos-font-weight-medium: ;
|
||||
--eidos-font-weight-semibold: ;
|
||||
--eidos-font-weight-bold: ;
|
||||
--eidos-leading-ui: ;
|
||||
--eidos-leading-prose: ;
|
||||
--eidos-leading-heading: ;
|
||||
--eidos-leading-display: ;
|
||||
--eidos-tracking-badge: ;
|
||||
--eidos-tracking-label: ;
|
||||
--eidos-tracking-ui: ;
|
||||
--eidos-tracking-prose: ;
|
||||
--eidos-tracking-heading: ;
|
||||
--eidos-tracking-display: ;
|
||||
|
||||
/* Elevation */
|
||||
--eidos-shadow-none: ;
|
||||
--eidos-shadow-subtle: ;
|
||||
--eidos-shadow-raised: ;
|
||||
--eidos-shadow-overlay: ;
|
||||
|
||||
/* Themed focus colors */
|
||||
--eidos-focus-ring-color: ;
|
||||
--eidos-focus-ring-color-error: ;
|
||||
--eidos-focus-ring: ;
|
||||
--eidos-focus-ring-error: ;
|
||||
|
||||
/* Motion */
|
||||
--eidos-duration-instant: ;
|
||||
--eidos-duration-fast: ;
|
||||
--eidos-duration-normal: ;
|
||||
--eidos-duration-moderate: ;
|
||||
--eidos-duration-slow: ;
|
||||
--eidos-ease-default: ;
|
||||
--eidos-ease-out: ;
|
||||
--eidos-ease-in: ;
|
||||
--eidos-ease-spring: ;
|
||||
--eidos-ease-alert: ;
|
||||
--eidos-ease-symmetric: ;
|
||||
--eidos-motion-distance-xs: ;
|
||||
--eidos-motion-distance-sm: ;
|
||||
--eidos-motion-distance-md: ;
|
||||
--eidos-motion-distance-lg: ;
|
||||
--eidos-motion-stagger: ;
|
||||
--eidos-motion-scale-enter: ;
|
||||
--eidos-motion-scale-press: ;
|
||||
--eidos-motion-spin-duration: ;
|
||||
|
||||
/* Icons */
|
||||
--eidos-icon-size-xxs: ;
|
||||
--eidos-icon-size-xs: ;
|
||||
--eidos-icon-size-sm: ;
|
||||
--eidos-icon-size-md: ;
|
||||
--eidos-icon-size-lg: ;
|
||||
--eidos-icon-size-xl: ;
|
||||
--eidos-icon-size-xxl: ;
|
||||
--eidos-icon-stroke-width-sm: ;
|
||||
--eidos-icon-stroke-width-md: ;
|
||||
--eidos-icon-stroke-width-lg: ;
|
||||
}
|
||||
@ -1,34 +1,65 @@
|
||||
/**
|
||||
* Eidos — V1 entrypoint.
|
||||
*
|
||||
* Imports compose into the global cascade in the order tokens →
|
||||
* archetypes → events. Components scoped CSS may override anything below
|
||||
* via higher specificity or later import order.
|
||||
*
|
||||
* Consumer usage:
|
||||
* import '$uix/eidos/index.css'
|
||||
* (in app root or a route layout)
|
||||
*
|
||||
* What this ships:
|
||||
* - tokens: motion durations, easings, opacities, intent tints, focus ring
|
||||
* - archetypes: transversal `[data-archetype=...]` selectors covering
|
||||
* trigger / overlay / content / indicator / thumb / track / close /
|
||||
* action / item / option, plus a universal focus-visible ring
|
||||
* - events: reactions to `data-event*` perceptual signals (dismiss /
|
||||
* close / present / open / announce) and `data-last-action` exit tinting
|
||||
* - components: per-component recipes that compose tokens + archetypes
|
||||
* into a finished visual layer (V1.5 — building out incrementally)
|
||||
*
|
||||
* What's deliberately NOT here yet:
|
||||
* - theming dimension (no `[data-theme]` overrides yet — comes after
|
||||
* enough recipes exist to have something worth modulating)
|
||||
* - sound / vibra (those are separate engines that subscribe to sema)
|
||||
* 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 `--eidos-*` 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 `--eidos-*`
|
||||
* deliberately, for two reasons:
|
||||
*
|
||||
* 1. **Authorship clarity at debug time.** Inspecting an element in
|
||||
* DevTools and seeing `--eidos-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 `--eidos-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(--eidos-*)`. 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.
|
||||
*/
|
||||
|
||||
@import './tokens.css';
|
||||
/* ── 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 './tokens.css'; /* legacy hand-rolled motion/tint/focus tokens — phase 2 will reconcile with air-translated tokens */
|
||||
@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/toggle.css';
|
||||
@import './components/switch.css';
|
||||
@import './components/collapsible.css';
|
||||
|
||||
@ -0,0 +1,199 @@
|
||||
/* Static tokens — theme-invariant. Never put colors or shadows here. */
|
||||
:root {
|
||||
/* Compatibility aliases — simple var() pointers, theme-invariant */
|
||||
--eidos-color-bg: var(--eidos-color-surface-default);
|
||||
--eidos-color-surface: var(--eidos-color-surface-raised);
|
||||
--eidos-color-text-primary: var(--eidos-color-content-primary);
|
||||
--eidos-color-text-secondary: var(--eidos-color-content-secondary);
|
||||
--eidos-color-text-disabled: var(--eidos-color-content-disabled);
|
||||
--eidos-color-border: var(--eidos-color-border-default);
|
||||
--eidos-color-border-focus: var(--eidos-color-focus-ring);
|
||||
--eidos-color-border-error: var(--eidos-color-danger-border);
|
||||
--eidos-color-accent: var(--eidos-color-primary-solid);
|
||||
--eidos-color-accent-muted: var(--eidos-color-primary-element);
|
||||
--eidos-color-accent-text: var(--eidos-color-primary-text);
|
||||
--eidos-color-accent-border: var(--eidos-color-primary-border);
|
||||
--eidos-color-error: var(--eidos-color-danger-solid);
|
||||
--eidos-color-error-muted: var(--eidos-color-danger-element);
|
||||
--eidos-color-success: var(--eidos-color-success-solid);
|
||||
--eidos-color-success-muted: var(--eidos-color-success-element);
|
||||
--eidos-color-warning: var(--eidos-color-warning-solid);
|
||||
--eidos-color-warning-muted: var(--eidos-color-warning-element);
|
||||
|
||||
/* Spacing scale
|
||||
* Escala global para composición: gaps, paddings, margins y offsets.
|
||||
* Los componentes deben consumir esta escala a través de sus tokens
|
||||
* públicos, no usar números crudos directamente en CSS.
|
||||
*/
|
||||
--eidos-space-0: 0px;
|
||||
--eidos-space-0-5: 2px;
|
||||
--eidos-space-1: 4px;
|
||||
--eidos-space-1-5: 6px;
|
||||
--eidos-space-2: 8px;
|
||||
--eidos-space-2-5: 10px;
|
||||
--eidos-space-3: 12px;
|
||||
--eidos-space-3-5: 14px;
|
||||
--eidos-space-4: 16px;
|
||||
--eidos-space-4-5: 18px;
|
||||
--eidos-space-5: 20px;
|
||||
--eidos-space-5-5: 22px;
|
||||
--eidos-space-6: 24px;
|
||||
--eidos-space-8: 32px;
|
||||
--eidos-space-10: 40px;
|
||||
--eidos-space-12: 48px;
|
||||
--eidos-space-16: 64px;
|
||||
|
||||
/* Control heights
|
||||
* Escala global para alturas interactivas. Esto no es spacing: responde
|
||||
* a densidad de UI y touch targets, así que vive en una escala separada.
|
||||
*/
|
||||
--eidos-control-height-2xs: 22px;
|
||||
--eidos-control-height-xs: 26px;
|
||||
--eidos-control-height-sm: 30px;
|
||||
--eidos-control-height-md: 36px;
|
||||
--eidos-control-height-lg: 44px;
|
||||
--eidos-control-height-xl: 52px;
|
||||
|
||||
/* Shared interaction geometry */
|
||||
--eidos-border-width: 1px;
|
||||
--eidos-focus-ring-offset: 1px;
|
||||
--eidos-focus-ring-width: 2px;
|
||||
--eidos-focus-ring: 0 0 0 var(--eidos-focus-ring-width) var(--eidos-focus-ring-color);
|
||||
--eidos-focus-ring-error: 0 0 0 var(--eidos-focus-ring-width) var(--eidos-focus-ring-color-error);
|
||||
|
||||
/* Radius scale */
|
||||
--eidos-radius-none: 0px;
|
||||
--eidos-radius-sm: 4px;
|
||||
--eidos-radius-md: 6px;
|
||||
--eidos-radius-lg: 10px;
|
||||
--eidos-radius-xl: 16px;
|
||||
--eidos-radius-xxl: 20px;
|
||||
--eidos-radius-full: 9999px;
|
||||
|
||||
/* Typography families */
|
||||
--eidos-font-sans: 'Instrument Sans', system-ui, sans-serif;
|
||||
--eidos-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
|
||||
--eidos-font-mono: 'Azeret Mono', ui-monospace, monospace;
|
||||
--eidos-font-ui: var(--eidos-font-sans);
|
||||
--eidos-font-prose: var(--eidos-font-serif);
|
||||
--eidos-font-heading: var(--eidos-font-serif);
|
||||
--eidos-font-display: var(--eidos-font-serif);
|
||||
--eidos-font-code: var(--eidos-font-mono);
|
||||
|
||||
/* Typography 12-step scale
|
||||
* Escala de 12 pasos. Cada paso define size, line-height y letter-spacing
|
||||
* como triplete fijo. El consumidor elige size; el sistema resuelve lh y ls.
|
||||
* Sufijos: -size (font-size), -lh (line-height), -ls (letter-spacing).
|
||||
*/
|
||||
--eidos-text-1-size: 10px;
|
||||
--eidos-text-1-lh: 1.6;
|
||||
--eidos-text-1-ls: 0.03em;
|
||||
--eidos-text-2-size: 12px;
|
||||
--eidos-text-2-lh: 1.6;
|
||||
--eidos-text-2-ls: 0.02em;
|
||||
--eidos-text-3-size: 14px;
|
||||
--eidos-text-3-lh: 1.5;
|
||||
--eidos-text-3-ls: 0.01em;
|
||||
--eidos-text-4-size: 16px;
|
||||
--eidos-text-4-lh: 1.5;
|
||||
--eidos-text-4-ls: 0.005em;
|
||||
--eidos-text-5-size: 18px;
|
||||
--eidos-text-5-lh: 1.5;
|
||||
--eidos-text-5-ls: 0em;
|
||||
--eidos-text-6-size: 20px;
|
||||
--eidos-text-6-lh: 1.5;
|
||||
--eidos-text-6-ls: 0em;
|
||||
--eidos-text-7-size: 24px;
|
||||
--eidos-text-7-lh: 1.4;
|
||||
--eidos-text-7-ls: -0.005em;
|
||||
--eidos-text-8-size: 28px;
|
||||
--eidos-text-8-lh: 1.35;
|
||||
--eidos-text-8-ls: -0.01em;
|
||||
--eidos-text-9-size: 36px;
|
||||
--eidos-text-9-lh: 1.25;
|
||||
--eidos-text-9-ls: -0.015em;
|
||||
--eidos-text-10-size: 44px;
|
||||
--eidos-text-10-lh: 1.15;
|
||||
--eidos-text-10-ls: -0.02em;
|
||||
--eidos-text-11-size: 52px;
|
||||
--eidos-text-11-lh: 1.1;
|
||||
--eidos-text-11-ls: -0.025em;
|
||||
--eidos-text-12-size: 60px;
|
||||
--eidos-text-12-lh: 1.05;
|
||||
--eidos-text-12-ls: -0.03em;
|
||||
|
||||
/* Typography roles */
|
||||
--eidos-font-weight-regular: 400;
|
||||
--eidos-font-weight-medium: 500;
|
||||
--eidos-font-weight-semibold: 600;
|
||||
--eidos-font-weight-bold: 700;
|
||||
--eidos-leading-ui: 1.25;
|
||||
--eidos-leading-prose: 1.6;
|
||||
--eidos-leading-heading: 1.2;
|
||||
--eidos-leading-display: 1.05;
|
||||
--eidos-tracking-badge: 0.06em;
|
||||
--eidos-tracking-label: 0.03em;
|
||||
--eidos-tracking-ui: 0;
|
||||
--eidos-tracking-prose: 0;
|
||||
--eidos-tracking-heading: -0.01em;
|
||||
--eidos-tracking-display: -0.025em;
|
||||
|
||||
/* Legacy typography aliases (deprecated: usar escala --eidos-text-N-* directamente) */
|
||||
--eidos-font-size-xxs: var(--eidos-text-1-size); /* 11px */
|
||||
--eidos-font-size-xs: var(--eidos-text-2-size); /* 12px */
|
||||
--eidos-font-size-sm: var(--eidos-text-3-size); /* 14px */
|
||||
--eidos-font-size-md: var(--eidos-text-5-size); /* 18px */
|
||||
--eidos-font-size-lg: var(--eidos-text-7-size); /* 24px */
|
||||
--eidos-font-size-xl: var(--eidos-text-8-size); /* 28px */
|
||||
--eidos-font-size-2xl: var(--eidos-text-10-size); /* 44px */
|
||||
--eidos-font-size-3xl: var(--eidos-text-11-size); /* 52px */
|
||||
--eidos-leading-text: var(--eidos-leading-prose);
|
||||
--eidos-tracking-tight: -0.01em;
|
||||
--eidos-tracking-normal: var(--eidos-tracking-ui);
|
||||
--eidos-tracking-wide: var(--eidos-tracking-label);
|
||||
--eidos-tracking-wider: var(--eidos-tracking-badge);
|
||||
|
||||
/* Icons */
|
||||
--eidos-icon-size-xxs: 12px;
|
||||
--eidos-icon-size-xs: 14px;
|
||||
--eidos-icon-size-sm: 16px;
|
||||
--eidos-icon-size-md: 18px;
|
||||
--eidos-icon-size-lg: 20px;
|
||||
--eidos-icon-size-xl: 24px;
|
||||
--eidos-icon-size-xxl: 48px;
|
||||
|
||||
--eidos-icon-stroke-width-sm: 1.25;
|
||||
--eidos-icon-stroke-width-md: 1.5;
|
||||
--eidos-icon-stroke-width-lg: 1.75;
|
||||
|
||||
/* Motion: duraciones */
|
||||
--eidos-duration-instant: 0ms;
|
||||
--eidos-duration-fast: 120ms;
|
||||
--eidos-duration-normal: 180ms;
|
||||
--eidos-duration-moderate: 240ms;
|
||||
--eidos-duration-slow: 320ms;
|
||||
|
||||
/* Motion: easings */
|
||||
--eidos-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--eidos-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--eidos-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--eidos-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--eidos-ease-alert: cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
||||
--eidos-ease-symmetric: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
|
||||
/* Motion: distancias */
|
||||
--eidos-motion-distance-xs: 2px;
|
||||
--eidos-motion-distance-sm: 4px;
|
||||
--eidos-motion-distance-md: 8px;
|
||||
--eidos-motion-distance-lg: 16px;
|
||||
|
||||
/* Motion: escalas */
|
||||
--eidos-motion-scale-enter: 0.985;
|
||||
--eidos-motion-scale-press: 0.97;
|
||||
|
||||
/* Motion: stagger */
|
||||
--eidos-motion-stagger: 20ms;
|
||||
|
||||
/* Motion: spin (legacy, usar --eidos-duration-* directamente) */
|
||||
--eidos-motion-spin-duration: 0.8s;
|
||||
}
|
||||
@ -0,0 +1,180 @@
|
||||
/* Base-dark theme — solo primitivos de color, tokens semánticos y sombras.
|
||||
* Tokens estáticos (spacing, tipografía, motion, etc.) viven en _static.css.
|
||||
*/
|
||||
[data-theme='base-dark'] {
|
||||
/* Private primitives: neutral */
|
||||
--eidos-primitive-neutral-1: #111110;
|
||||
--eidos-primitive-neutral-2: #191918;
|
||||
--eidos-primitive-neutral-3: #222221;
|
||||
--eidos-primitive-neutral-4: #2a2a28;
|
||||
--eidos-primitive-neutral-5: #31312e;
|
||||
--eidos-primitive-neutral-6: #3b3a37;
|
||||
--eidos-primitive-neutral-7: #494844;
|
||||
--eidos-primitive-neutral-8: #62605b;
|
||||
--eidos-primitive-neutral-9: #6f6d66;
|
||||
--eidos-primitive-neutral-10: #7c7b74;
|
||||
--eidos-primitive-neutral-11: #b5b3ad;
|
||||
--eidos-primitive-neutral-12: #eeeeec;
|
||||
|
||||
/* Private primitives: primary */
|
||||
--eidos-primitive-primary-1: #131221;
|
||||
--eidos-primitive-primary-2: #19172a;
|
||||
--eidos-primitive-primary-3: #211d46;
|
||||
--eidos-primitive-primary-4: #2a245e;
|
||||
--eidos-primitive-primary-5: #342d6f;
|
||||
--eidos-primitive-primary-6: #403989;
|
||||
--eidos-primitive-primary-7: #544ab0;
|
||||
--eidos-primitive-primary-8: #685de0;
|
||||
--eidos-primitive-primary-9: #7a68f2;
|
||||
--eidos-primitive-primary-10: #9285fb;
|
||||
--eidos-primitive-primary-11: #c7beff;
|
||||
--eidos-primitive-primary-12: #e7e3ff;
|
||||
|
||||
/* Private primitives: info */
|
||||
--eidos-primitive-info-1: #0d1520;
|
||||
--eidos-primitive-info-2: #111927;
|
||||
--eidos-primitive-info-3: #0d2847;
|
||||
--eidos-primitive-info-4: #003362;
|
||||
--eidos-primitive-info-5: #004074;
|
||||
--eidos-primitive-info-6: #104d87;
|
||||
--eidos-primitive-info-7: #205d9e;
|
||||
--eidos-primitive-info-8: #2870bd;
|
||||
--eidos-primitive-info-9: #0090ff;
|
||||
--eidos-primitive-info-10: #3b9eff;
|
||||
--eidos-primitive-info-11: #70b8ff;
|
||||
--eidos-primitive-info-12: #c2e6ff;
|
||||
|
||||
/* Private primitives: success */
|
||||
--eidos-primitive-success-1: #0e1512;
|
||||
--eidos-primitive-success-2: #121b17;
|
||||
--eidos-primitive-success-3: #132d21;
|
||||
--eidos-primitive-success-4: #113b29;
|
||||
--eidos-primitive-success-5: #174933;
|
||||
--eidos-primitive-success-6: #20573e;
|
||||
--eidos-primitive-success-7: #28684a;
|
||||
--eidos-primitive-success-8: #2f7c57;
|
||||
--eidos-primitive-success-9: #30a46c;
|
||||
--eidos-primitive-success-10: #33b074;
|
||||
--eidos-primitive-success-11: #3dd68c;
|
||||
--eidos-primitive-success-12: #b1f1cb;
|
||||
|
||||
/* Private primitives: warning */
|
||||
--eidos-primitive-warning-1: #19120d;
|
||||
--eidos-primitive-warning-2: #21170f;
|
||||
--eidos-primitive-warning-3: #32200f;
|
||||
--eidos-primitive-warning-4: #422813;
|
||||
--eidos-primitive-warning-5: #54341a;
|
||||
--eidos-primitive-warning-6: #694322;
|
||||
--eidos-primitive-warning-7: #8d5b2b;
|
||||
--eidos-primitive-warning-8: #b37231;
|
||||
--eidos-primitive-warning-9: #df8d2e;
|
||||
--eidos-primitive-warning-10: #f5a64a;
|
||||
--eidos-primitive-warning-11: #ffd4a3;
|
||||
--eidos-primitive-warning-12: #ffecd1;
|
||||
|
||||
/* Private primitives: danger */
|
||||
--eidos-primitive-danger-1: #191111;
|
||||
--eidos-primitive-danger-2: #201314;
|
||||
--eidos-primitive-danger-3: #3b1219;
|
||||
--eidos-primitive-danger-4: #500f1c;
|
||||
--eidos-primitive-danger-5: #611623;
|
||||
--eidos-primitive-danger-6: #72232d;
|
||||
--eidos-primitive-danger-7: #8c333a;
|
||||
--eidos-primitive-danger-8: #b54548;
|
||||
--eidos-primitive-danger-9: #e5484d;
|
||||
--eidos-primitive-danger-10: #ec5d5e;
|
||||
--eidos-primitive-danger-11: #ff9592;
|
||||
--eidos-primitive-danger-12: #ffd1d9;
|
||||
|
||||
/* Semantic surfaces */
|
||||
--eidos-color-surface-default: var(--eidos-primitive-neutral-1);
|
||||
--eidos-color-surface-raised: var(--eidos-primitive-neutral-3);
|
||||
--eidos-color-surface-overlay: var(--eidos-primitive-neutral-4);
|
||||
--eidos-color-overlay: rgb(0 0 0 / 0.66);
|
||||
|
||||
/* Semantic content */
|
||||
--eidos-color-content-primary: var(--eidos-primitive-neutral-12);
|
||||
--eidos-color-content-secondary: var(--eidos-primitive-neutral-11);
|
||||
--eidos-color-content-disabled: var(--eidos-primitive-neutral-7);
|
||||
--eidos-color-content-on-solid: #ffffff;
|
||||
|
||||
/* Semantic borders */
|
||||
--eidos-color-border-subtle: var(--eidos-primitive-neutral-4);
|
||||
--eidos-color-border-default: var(--eidos-primitive-neutral-6);
|
||||
--eidos-color-border-strong: var(--eidos-primitive-neutral-8);
|
||||
--eidos-color-focus-ring: var(--eidos-primitive-primary-10);
|
||||
--eidos-focus-ring-color: color-mix(in srgb, var(--eidos-color-focus-ring) 24%, transparent);
|
||||
--eidos-focus-ring-color-error: color-mix(in srgb, var(--eidos-color-danger-border) 62%, transparent);
|
||||
|
||||
/* Primary palette */
|
||||
--eidos-color-primary-track: var(--eidos-primitive-primary-1);
|
||||
--eidos-color-primary-element: var(--eidos-primitive-primary-3);
|
||||
--eidos-color-primary-hover: var(--eidos-primitive-primary-4);
|
||||
--eidos-color-primary-active: var(--eidos-primitive-primary-5);
|
||||
--eidos-color-primary-border: var(--eidos-primitive-primary-6);
|
||||
--eidos-color-primary-solid: var(--eidos-primitive-primary-9);
|
||||
--eidos-color-primary-solid-hover: var(--eidos-primitive-primary-10);
|
||||
--eidos-color-primary-text: var(--eidos-primitive-primary-11);
|
||||
--eidos-color-primary-contrast: var(--eidos-primitive-primary-12);
|
||||
|
||||
/* Neutral palette */
|
||||
--eidos-color-neutral-track: var(--eidos-primitive-neutral-1);
|
||||
--eidos-color-neutral-element: var(--eidos-primitive-neutral-3);
|
||||
--eidos-color-neutral-hover: var(--eidos-primitive-neutral-4);
|
||||
--eidos-color-neutral-active: var(--eidos-primitive-neutral-5);
|
||||
--eidos-color-neutral-border: var(--eidos-primitive-neutral-6);
|
||||
--eidos-color-neutral-solid: var(--eidos-primitive-neutral-9);
|
||||
--eidos-color-neutral-solid-hover: var(--eidos-primitive-neutral-10);
|
||||
--eidos-color-neutral-text: var(--eidos-primitive-neutral-11);
|
||||
--eidos-color-neutral-contrast: var(--eidos-primitive-neutral-12);
|
||||
|
||||
/* Success palette */
|
||||
--eidos-color-success-track: var(--eidos-primitive-success-1);
|
||||
--eidos-color-success-element: var(--eidos-primitive-success-3);
|
||||
--eidos-color-success-hover: var(--eidos-primitive-success-4);
|
||||
--eidos-color-success-active: var(--eidos-primitive-success-5);
|
||||
--eidos-color-success-border: var(--eidos-primitive-success-6);
|
||||
--eidos-color-success-solid: var(--eidos-primitive-success-9);
|
||||
--eidos-color-success-solid-hover: var(--eidos-primitive-success-10);
|
||||
--eidos-color-success-text: var(--eidos-primitive-success-11);
|
||||
--eidos-color-success-contrast: var(--eidos-primitive-success-12);
|
||||
|
||||
/* Warning palette */
|
||||
--eidos-color-warning-track: var(--eidos-primitive-warning-1);
|
||||
--eidos-color-warning-element: var(--eidos-primitive-warning-3);
|
||||
--eidos-color-warning-hover: var(--eidos-primitive-warning-4);
|
||||
--eidos-color-warning-active: var(--eidos-primitive-warning-5);
|
||||
--eidos-color-warning-border: var(--eidos-primitive-warning-6);
|
||||
--eidos-color-warning-solid: var(--eidos-primitive-warning-9);
|
||||
--eidos-color-warning-solid-hover: var(--eidos-primitive-warning-10);
|
||||
--eidos-color-warning-text: var(--eidos-primitive-warning-11);
|
||||
--eidos-color-warning-contrast: var(--eidos-primitive-warning-12);
|
||||
|
||||
/* Danger palette */
|
||||
--eidos-color-danger-track: var(--eidos-primitive-danger-1);
|
||||
--eidos-color-danger-element: var(--eidos-primitive-danger-3);
|
||||
--eidos-color-danger-hover: var(--eidos-primitive-danger-4);
|
||||
--eidos-color-danger-active: var(--eidos-primitive-danger-5);
|
||||
--eidos-color-danger-border: var(--eidos-primitive-danger-6);
|
||||
--eidos-color-danger-solid: var(--eidos-primitive-danger-9);
|
||||
--eidos-color-danger-solid-hover: var(--eidos-primitive-danger-10);
|
||||
--eidos-color-danger-text: var(--eidos-primitive-danger-11);
|
||||
--eidos-color-danger-contrast: var(--eidos-primitive-danger-12);
|
||||
|
||||
/* Info palette */
|
||||
--eidos-color-info-track: var(--eidos-primitive-info-1);
|
||||
--eidos-color-info-element: var(--eidos-primitive-info-3);
|
||||
--eidos-color-info-hover: var(--eidos-primitive-info-4);
|
||||
--eidos-color-info-active: var(--eidos-primitive-info-5);
|
||||
--eidos-color-info-border: var(--eidos-primitive-info-6);
|
||||
--eidos-color-info-solid: var(--eidos-primitive-info-9);
|
||||
--eidos-color-info-solid-hover: var(--eidos-primitive-info-10);
|
||||
--eidos-color-info-text: var(--eidos-primitive-info-11);
|
||||
--eidos-color-info-contrast: var(--eidos-primitive-info-12);
|
||||
|
||||
/* Shadows */
|
||||
--eidos-shadow-none: none;
|
||||
--eidos-shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.24), 0 0 0 1px rgb(255 255 255 / 0.04);
|
||||
--eidos-shadow-raised: 0 4px 12px rgb(0 0 0 / 0.32), 0 1px 2px rgb(0 0 0 / 0.16);
|
||||
--eidos-shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.48), 0 4px 8px rgb(0 0 0 / 0.24);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
@import './_static.css';
|
||||
@import './light.css';
|
||||
@import './dark.css';
|
||||
@ -0,0 +1,181 @@
|
||||
/* Base-light theme — solo primitivos de color, tokens semánticos y sombras.
|
||||
* Tokens estáticos (spacing, tipografía, motion, etc.) viven en _static.css.
|
||||
*/
|
||||
[data-theme='base-light'],
|
||||
:root {
|
||||
/* Private primitives: neutral */
|
||||
--eidos-primitive-neutral-1: #fcfbf9;
|
||||
--eidos-primitive-neutral-2: #f7f5f2;
|
||||
--eidos-primitive-neutral-3: #f0ede9;
|
||||
--eidos-primitive-neutral-4: #e7e3de;
|
||||
--eidos-primitive-neutral-5: #ddd8d1;
|
||||
--eidos-primitive-neutral-6: #d1cbc2;
|
||||
--eidos-primitive-neutral-7: #bdb6ac;
|
||||
--eidos-primitive-neutral-8: #a29a8f;
|
||||
--eidos-primitive-neutral-9: #7d7469;
|
||||
--eidos-primitive-neutral-10: #685f55;
|
||||
--eidos-primitive-neutral-11: #4a443d;
|
||||
--eidos-primitive-neutral-12: #24211d;
|
||||
|
||||
/* Private primitives: primary */
|
||||
--eidos-primitive-primary-1: #fdfcff;
|
||||
--eidos-primitive-primary-2: #f8f6ff;
|
||||
--eidos-primitive-primary-3: #f0ecff;
|
||||
--eidos-primitive-primary-4: #e5deff;
|
||||
--eidos-primitive-primary-5: #d7cbff;
|
||||
--eidos-primitive-primary-6: #c5b2ff;
|
||||
--eidos-primitive-primary-7: #a38af8;
|
||||
--eidos-primitive-primary-8: #8668ec;
|
||||
--eidos-primitive-primary-9: #6d57e2;
|
||||
--eidos-primitive-primary-10: #5f49d0;
|
||||
--eidos-primitive-primary-11: #533ead;
|
||||
--eidos-primitive-primary-12: #2c235d;
|
||||
|
||||
/* Private primitives: info */
|
||||
--eidos-primitive-info-1: #fbfdff;
|
||||
--eidos-primitive-info-2: #f4faff;
|
||||
--eidos-primitive-info-3: #e6f4fe;
|
||||
--eidos-primitive-info-4: #d5efff;
|
||||
--eidos-primitive-info-5: #c2e5ff;
|
||||
--eidos-primitive-info-6: #acd8fc;
|
||||
--eidos-primitive-info-7: #8ec8f6;
|
||||
--eidos-primitive-info-8: #5eb1ef;
|
||||
--eidos-primitive-info-9: #0090ff;
|
||||
--eidos-primitive-info-10: #0588f0;
|
||||
--eidos-primitive-info-11: #0d74ce;
|
||||
--eidos-primitive-info-12: #113264;
|
||||
|
||||
/* Private primitives: success */
|
||||
--eidos-primitive-success-1: #fbfefc;
|
||||
--eidos-primitive-success-2: #f4fbf6;
|
||||
--eidos-primitive-success-3: #e6f6eb;
|
||||
--eidos-primitive-success-4: #d6f1df;
|
||||
--eidos-primitive-success-5: #c4e8d1;
|
||||
--eidos-primitive-success-6: #adddc0;
|
||||
--eidos-primitive-success-7: #8eceaa;
|
||||
--eidos-primitive-success-8: #5bb98b;
|
||||
--eidos-primitive-success-9: #30a46c;
|
||||
--eidos-primitive-success-10: #2b9a66;
|
||||
--eidos-primitive-success-11: #218358;
|
||||
--eidos-primitive-success-12: #193b2d;
|
||||
|
||||
/* Private primitives: warning */
|
||||
--eidos-primitive-warning-1: #fffaf3;
|
||||
--eidos-primitive-warning-2: #fff3e6;
|
||||
--eidos-primitive-warning-3: #fee6c7;
|
||||
--eidos-primitive-warning-4: #fdd7a1;
|
||||
--eidos-primitive-warning-5: #f6c171;
|
||||
--eidos-primitive-warning-6: #eba14d;
|
||||
--eidos-primitive-warning-7: #d48734;
|
||||
--eidos-primitive-warning-8: #bc6f24;
|
||||
--eidos-primitive-warning-9: #d18422;
|
||||
--eidos-primitive-warning-10: #bc7419;
|
||||
--eidos-primitive-warning-11: #8f5614;
|
||||
--eidos-primitive-warning-12: #4a2f12;
|
||||
|
||||
/* Private primitives: danger */
|
||||
--eidos-primitive-danger-1: #fffcfc;
|
||||
--eidos-primitive-danger-2: #fff7f7;
|
||||
--eidos-primitive-danger-3: #feebec;
|
||||
--eidos-primitive-danger-4: #ffdbdc;
|
||||
--eidos-primitive-danger-5: #ffcdce;
|
||||
--eidos-primitive-danger-6: #fdbdbe;
|
||||
--eidos-primitive-danger-7: #f4a9aa;
|
||||
--eidos-primitive-danger-8: #eb8e90;
|
||||
--eidos-primitive-danger-9: #e5484d;
|
||||
--eidos-primitive-danger-10: #dc3e42;
|
||||
--eidos-primitive-danger-11: #ce2c31;
|
||||
--eidos-primitive-danger-12: #641723;
|
||||
|
||||
/* Semantic surfaces */
|
||||
--eidos-color-surface-default: var(--eidos-primitive-neutral-1);
|
||||
--eidos-color-surface-raised: var(--eidos-primitive-neutral-3);
|
||||
--eidos-color-surface-overlay: var(--eidos-primitive-neutral-4);
|
||||
--eidos-color-overlay: rgb(19 16 13 / 0.42);
|
||||
|
||||
/* Semantic content */
|
||||
--eidos-color-content-primary: var(--eidos-primitive-neutral-12);
|
||||
--eidos-color-content-secondary: var(--eidos-primitive-neutral-10);
|
||||
--eidos-color-content-disabled: var(--eidos-primitive-neutral-7);
|
||||
--eidos-color-content-on-solid: #ffffff;
|
||||
|
||||
/* Semantic borders */
|
||||
--eidos-color-border-subtle: var(--eidos-primitive-neutral-4);
|
||||
--eidos-color-border-default: var(--eidos-primitive-neutral-6);
|
||||
--eidos-color-border-strong: var(--eidos-primitive-neutral-8);
|
||||
--eidos-color-focus-ring: var(--eidos-primitive-primary-8);
|
||||
--eidos-focus-ring-color: color-mix(in srgb, var(--eidos-color-focus-ring) 24%, transparent);
|
||||
--eidos-focus-ring-color-error: color-mix(in srgb, var(--eidos-color-danger-border) 62%, transparent);
|
||||
|
||||
/* Primary palette */
|
||||
--eidos-color-primary-track: var(--eidos-primitive-primary-1);
|
||||
--eidos-color-primary-element: var(--eidos-primitive-primary-3);
|
||||
--eidos-color-primary-hover: var(--eidos-primitive-primary-4);
|
||||
--eidos-color-primary-active: var(--eidos-primitive-primary-5);
|
||||
--eidos-color-primary-border: var(--eidos-primitive-primary-6);
|
||||
--eidos-color-primary-solid: var(--eidos-primitive-primary-9);
|
||||
--eidos-color-primary-solid-hover: var(--eidos-primitive-primary-10);
|
||||
--eidos-color-primary-text: var(--eidos-primitive-primary-11);
|
||||
--eidos-color-primary-contrast: var(--eidos-primitive-primary-12);
|
||||
|
||||
/* Neutral palette */
|
||||
--eidos-color-neutral-track: var(--eidos-primitive-neutral-1);
|
||||
--eidos-color-neutral-element: var(--eidos-primitive-neutral-3);
|
||||
--eidos-color-neutral-hover: var(--eidos-primitive-neutral-4);
|
||||
--eidos-color-neutral-active: var(--eidos-primitive-neutral-5);
|
||||
--eidos-color-neutral-border: var(--eidos-primitive-neutral-6);
|
||||
--eidos-color-neutral-solid: var(--eidos-primitive-neutral-9);
|
||||
--eidos-color-neutral-solid-hover: var(--eidos-primitive-neutral-10);
|
||||
--eidos-color-neutral-text: var(--eidos-primitive-neutral-11);
|
||||
--eidos-color-neutral-contrast: var(--eidos-primitive-neutral-12);
|
||||
|
||||
/* Success palette */
|
||||
--eidos-color-success-track: var(--eidos-primitive-success-1);
|
||||
--eidos-color-success-element: var(--eidos-primitive-success-3);
|
||||
--eidos-color-success-hover: var(--eidos-primitive-success-4);
|
||||
--eidos-color-success-active: var(--eidos-primitive-success-5);
|
||||
--eidos-color-success-border: var(--eidos-primitive-success-6);
|
||||
--eidos-color-success-solid: var(--eidos-primitive-success-9);
|
||||
--eidos-color-success-solid-hover: var(--eidos-primitive-success-10);
|
||||
--eidos-color-success-text: var(--eidos-primitive-success-11);
|
||||
--eidos-color-success-contrast: var(--eidos-primitive-success-12);
|
||||
|
||||
/* Warning palette */
|
||||
--eidos-color-warning-track: var(--eidos-primitive-warning-1);
|
||||
--eidos-color-warning-element: var(--eidos-primitive-warning-3);
|
||||
--eidos-color-warning-hover: var(--eidos-primitive-warning-4);
|
||||
--eidos-color-warning-active: var(--eidos-primitive-warning-5);
|
||||
--eidos-color-warning-border: var(--eidos-primitive-warning-6);
|
||||
--eidos-color-warning-solid: var(--eidos-primitive-warning-9);
|
||||
--eidos-color-warning-solid-hover: var(--eidos-primitive-warning-10);
|
||||
--eidos-color-warning-text: var(--eidos-primitive-warning-11);
|
||||
--eidos-color-warning-contrast: var(--eidos-primitive-warning-12);
|
||||
|
||||
/* Danger palette */
|
||||
--eidos-color-danger-track: var(--eidos-primitive-danger-1);
|
||||
--eidos-color-danger-element: var(--eidos-primitive-danger-3);
|
||||
--eidos-color-danger-hover: var(--eidos-primitive-danger-4);
|
||||
--eidos-color-danger-active: var(--eidos-primitive-danger-5);
|
||||
--eidos-color-danger-border: var(--eidos-primitive-danger-6);
|
||||
--eidos-color-danger-solid: var(--eidos-primitive-danger-9);
|
||||
--eidos-color-danger-solid-hover: var(--eidos-primitive-danger-10);
|
||||
--eidos-color-danger-text: var(--eidos-primitive-danger-11);
|
||||
--eidos-color-danger-contrast: var(--eidos-primitive-danger-12);
|
||||
|
||||
/* Info palette */
|
||||
--eidos-color-info-track: var(--eidos-primitive-info-1);
|
||||
--eidos-color-info-element: var(--eidos-primitive-info-3);
|
||||
--eidos-color-info-hover: var(--eidos-primitive-info-4);
|
||||
--eidos-color-info-active: var(--eidos-primitive-info-5);
|
||||
--eidos-color-info-border: var(--eidos-primitive-info-6);
|
||||
--eidos-color-info-solid: var(--eidos-primitive-info-9);
|
||||
--eidos-color-info-solid-hover: var(--eidos-primitive-info-10);
|
||||
--eidos-color-info-text: var(--eidos-primitive-info-11);
|
||||
--eidos-color-info-contrast: var(--eidos-primitive-info-12);
|
||||
|
||||
/* Shadows */
|
||||
--eidos-shadow-none: none;
|
||||
--eidos-shadow-subtle: 0 1px 2px rgb(17 14 10 / 0.06), 0 0 0 1px rgb(17 14 10 / 0.02);
|
||||
--eidos-shadow-raised: 0 4px 12px rgb(17 14 10 / 0.08), 0 1px 2px rgb(17 14 10 / 0.03);
|
||||
--eidos-shadow-overlay: 0 12px 32px rgb(17 14 10 / 0.12), 0 4px 8px rgb(17 14 10 / 0.05);
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
:root {
|
||||
--eidos-accordion-provider-border-width: var(--eidos-border-width);
|
||||
--eidos-accordion-provider-radius: var(--eidos-radius-lg);
|
||||
--eidos-accordion-outline-provider-bg: var(--eidos-color-surface-default);
|
||||
--eidos-accordion-outline-provider-border: var(--eidos-color-border-default);
|
||||
--eidos-accordion-outline-item-border: var(--eidos-color-border-subtle);
|
||||
--eidos-accordion-outline-content-bg: var(--eidos-color-surface-default);
|
||||
--eidos-accordion-surface-provider-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-accordion-surface-provider-border: var(--eidos-color-border-subtle);
|
||||
--eidos-accordion-surface-provider-shadow: var(--eidos-shadow-subtle);
|
||||
--eidos-accordion-surface-item-border: var(--eidos-color-border-subtle);
|
||||
--eidos-accordion-surface-content-bg: var(--eidos-color-surface-default);
|
||||
--eidos-accordion-ghost-provider-bg: transparent;
|
||||
--eidos-accordion-ghost-provider-border: transparent;
|
||||
--eidos-accordion-ghost-item-border: var(--eidos-color-border-subtle);
|
||||
--eidos-accordion-ghost-content-bg: transparent;
|
||||
|
||||
--eidos-accordion-item-border-width: var(--eidos-border-width);
|
||||
|
||||
--eidos-accordion-trigger-min-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-accordion-trigger-min-height-md: var(--eidos-control-height-md);
|
||||
--eidos-accordion-trigger-min-height-lg: var(--eidos-control-height-lg);
|
||||
--eidos-accordion-trigger-px-sm: var(--eidos-space-3);
|
||||
--eidos-accordion-trigger-px-md: var(--eidos-space-4);
|
||||
--eidos-accordion-trigger-px-lg: var(--eidos-space-5);
|
||||
--eidos-accordion-trigger-py-sm: var(--eidos-space-2-5);
|
||||
--eidos-accordion-trigger-py-md: var(--eidos-space-3);
|
||||
--eidos-accordion-trigger-py-lg: var(--eidos-space-3-5);
|
||||
--eidos-accordion-trigger-gap: var(--eidos-space-3);
|
||||
--eidos-accordion-trigger-font-family: var(--eidos-font-ui);
|
||||
--eidos-accordion-trigger-font-size-sm: var(--eidos-text-3-size);
|
||||
--eidos-accordion-trigger-font-size-md: var(--eidos-text-4-size);
|
||||
--eidos-accordion-trigger-font-size-lg: var(--eidos-text-5-size);
|
||||
--eidos-accordion-trigger-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-accordion-trigger-line-height: var(--eidos-leading-ui);
|
||||
--eidos-accordion-trigger-color: var(--eidos-color-content-primary);
|
||||
--eidos-accordion-trigger-color-open: var(--eidos-color-primary-text);
|
||||
--eidos-accordion-trigger-color-disabled: var(--eidos-color-content-disabled);
|
||||
--eidos-accordion-trigger-hover-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-accordion-trigger-hover-color: var(--eidos-color-content-primary);
|
||||
--eidos-accordion-trigger-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-accordion-trigger-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-accordion-trigger-focus-ring-offset: var(--eidos-focus-ring-offset);
|
||||
--eidos-accordion-trigger-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-accordion-trigger-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
|
||||
--eidos-accordion-content-px-sm: var(--eidos-space-3);
|
||||
--eidos-accordion-content-px-md: var(--eidos-space-4);
|
||||
--eidos-accordion-content-px-lg: var(--eidos-space-5);
|
||||
--eidos-accordion-content-py-sm: var(--eidos-space-2-5);
|
||||
--eidos-accordion-content-py-md: var(--eidos-space-3);
|
||||
--eidos-accordion-content-py-lg: var(--eidos-space-4);
|
||||
--eidos-accordion-content-font-family: var(--eidos-font-prose);
|
||||
--eidos-accordion-content-font-size-sm: var(--eidos-text-3-size);
|
||||
--eidos-accordion-content-font-size-md: var(--eidos-text-4-size);
|
||||
--eidos-accordion-content-font-size-lg: var(--eidos-text-4-size);
|
||||
--eidos-accordion-content-line-height: var(--eidos-leading-prose);
|
||||
--eidos-accordion-content-color: var(--eidos-color-content-secondary);
|
||||
--eidos-accordion-content-open-duration: var(--eidos-duration-normal);
|
||||
--eidos-accordion-content-close-duration: var(--eidos-duration-fast);
|
||||
--eidos-accordion-content-open-ease: var(--eidos-ease-out);
|
||||
--eidos-accordion-content-close-ease: var(--eidos-ease-in);
|
||||
|
||||
--eidos-accordion-indicator-size-sm: var(--eidos-icon-size-sm);
|
||||
--eidos-accordion-indicator-size-md: var(--eidos-icon-size-sm);
|
||||
--eidos-accordion-indicator-size-lg: var(--eidos-icon-size-md);
|
||||
--eidos-accordion-indicator-color: var(--eidos-color-content-secondary);
|
||||
--eidos-accordion-indicator-color-open: var(--eidos-color-primary-text);
|
||||
--eidos-accordion-indicator-rotation: 180deg;
|
||||
--eidos-accordion-indicator-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-accordion-indicator-transition-ease: var(--eidos-ease-default);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--eidos-aspect-ratio-radius: var(--eidos-radius-lg);
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
:root {
|
||||
--eidos-avatar-size-xs: 24px;
|
||||
--eidos-avatar-size-sm: 32px;
|
||||
--eidos-avatar-size-md: 40px;
|
||||
--eidos-avatar-size-lg: 48px;
|
||||
--eidos-avatar-size-xl: 64px;
|
||||
--eidos-avatar-size-xxl: 96px;
|
||||
|
||||
--eidos-avatar-font-family: var(--eidos-font-ui);
|
||||
--eidos-avatar-font-size-xs: 10px;
|
||||
--eidos-avatar-font-size-sm: 12px;
|
||||
--eidos-avatar-font-size-md: 14px;
|
||||
--eidos-avatar-font-size-lg: 16px;
|
||||
--eidos-avatar-font-size-xl: 20px;
|
||||
--eidos-avatar-font-size-xxl: 28px;
|
||||
--eidos-avatar-font-weight: var(--eidos-font-weight-medium);
|
||||
|
||||
--eidos-avatar-radius-full: var(--eidos-radius-full);
|
||||
--eidos-avatar-radius-md: var(--eidos-radius-md);
|
||||
--eidos-avatar-radius-sm: var(--eidos-radius-sm);
|
||||
--eidos-avatar-radius-none: 0;
|
||||
|
||||
--eidos-avatar-border-width: 2px;
|
||||
|
||||
--eidos-avatar-color-primary-solid-bg: var(--eidos-color-primary-solid);
|
||||
--eidos-avatar-color-primary-solid-fg: var(--eidos-color-primary-contrast);
|
||||
--eidos-avatar-color-primary-soft-bg: var(--eidos-color-primary-track);
|
||||
--eidos-avatar-color-primary-soft-fg: var(--eidos-color-primary-text);
|
||||
--eidos-avatar-color-primary-outline-border: var(--eidos-color-primary-border);
|
||||
--eidos-avatar-color-primary-outline-fg: var(--eidos-color-primary-text);
|
||||
|
||||
--eidos-avatar-color-neutral-solid-bg: var(--eidos-color-neutral-solid);
|
||||
--eidos-avatar-color-neutral-solid-fg: var(--eidos-color-surface-default);
|
||||
--eidos-avatar-color-neutral-soft-bg: var(--eidos-color-neutral-track);
|
||||
--eidos-avatar-color-neutral-soft-fg: var(--eidos-color-neutral-text);
|
||||
--eidos-avatar-color-neutral-outline-border: var(--eidos-color-neutral-border);
|
||||
--eidos-avatar-color-neutral-outline-fg: var(--eidos-color-neutral-text);
|
||||
|
||||
--eidos-avatar-color-success-solid-bg: var(--eidos-color-success-solid);
|
||||
--eidos-avatar-color-success-solid-fg: var(--eidos-color-success-contrast);
|
||||
--eidos-avatar-color-success-soft-bg: var(--eidos-color-success-track);
|
||||
--eidos-avatar-color-success-soft-fg: var(--eidos-color-success-text);
|
||||
--eidos-avatar-color-success-outline-border: var(--eidos-color-success-border);
|
||||
--eidos-avatar-color-success-outline-fg: var(--eidos-color-success-text);
|
||||
|
||||
--eidos-avatar-color-warning-solid-bg: var(--eidos-color-warning-solid);
|
||||
--eidos-avatar-color-warning-solid-fg: var(--eidos-color-warning-contrast);
|
||||
--eidos-avatar-color-warning-soft-bg: var(--eidos-color-warning-track);
|
||||
--eidos-avatar-color-warning-soft-fg: var(--eidos-color-warning-text);
|
||||
--eidos-avatar-color-warning-outline-border: var(--eidos-color-warning-border);
|
||||
--eidos-avatar-color-warning-outline-fg: var(--eidos-color-warning-text);
|
||||
|
||||
--eidos-avatar-color-danger-solid-bg: var(--eidos-color-danger-solid);
|
||||
--eidos-avatar-color-danger-solid-fg: var(--eidos-color-danger-contrast);
|
||||
--eidos-avatar-color-danger-soft-bg: var(--eidos-color-danger-track);
|
||||
--eidos-avatar-color-danger-soft-fg: var(--eidos-color-danger-text);
|
||||
--eidos-avatar-color-danger-outline-border: var(--eidos-color-danger-border);
|
||||
--eidos-avatar-color-danger-outline-fg: var(--eidos-color-danger-text);
|
||||
|
||||
--eidos-avatar-color-info-solid-bg: var(--eidos-color-info-solid);
|
||||
--eidos-avatar-color-info-solid-fg: var(--eidos-color-info-contrast);
|
||||
--eidos-avatar-color-info-soft-bg: var(--eidos-color-info-track);
|
||||
--eidos-avatar-color-info-soft-fg: var(--eidos-color-info-text);
|
||||
--eidos-avatar-color-info-outline-border: var(--eidos-color-info-border);
|
||||
--eidos-avatar-color-info-outline-fg: var(--eidos-color-info-text);
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
:root {
|
||||
--eidos-badge-gap: var(--eidos-space-1);
|
||||
--eidos-badge-radius: var(--eidos-radius-full);
|
||||
--eidos-badge-border-width: 1px;
|
||||
--eidos-badge-font-family: var(--eidos-font-sans);
|
||||
--eidos-badge-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-badge-line-height: 1;
|
||||
--eidos-badge-letter-spacing: 0.01em;
|
||||
--eidos-badge-shadow-solid: none;
|
||||
|
||||
--eidos-badge-min-height-sm: 1.25rem;
|
||||
--eidos-badge-min-height-md: 1.5rem;
|
||||
--eidos-badge-min-height-lg: 1.75rem;
|
||||
--eidos-badge-px-sm: 0.4rem;
|
||||
--eidos-badge-px-md: 0.55rem;
|
||||
--eidos-badge-px-lg: 0.7rem;
|
||||
--eidos-badge-py-sm: 0.14rem;
|
||||
--eidos-badge-py-md: 0.2rem;
|
||||
--eidos-badge-py-lg: 0.26rem;
|
||||
--eidos-badge-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-badge-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-badge-font-size-lg: var(--eidos-font-size-sm);
|
||||
|
||||
--eidos-badge-bg-solid-primary: var(--eidos-color-primary-solid);
|
||||
--eidos-badge-border-solid-primary: var(--eidos-color-primary-solid);
|
||||
--eidos-badge-color-solid-primary: var(--eidos-color-primary-contrast);
|
||||
--eidos-badge-bg-subtle-primary: var(--eidos-color-primary-track);
|
||||
--eidos-badge-border-subtle-primary: var(--eidos-color-primary-border);
|
||||
--eidos-badge-color-subtle-primary: var(--eidos-color-primary-text);
|
||||
--eidos-badge-bg-outline-primary: transparent;
|
||||
--eidos-badge-border-outline-primary: var(--eidos-color-primary-border);
|
||||
--eidos-badge-color-outline-primary: var(--eidos-color-primary-text);
|
||||
|
||||
--eidos-badge-bg-solid-neutral: var(--eidos-color-neutral-solid);
|
||||
--eidos-badge-border-solid-neutral: var(--eidos-color-neutral-solid);
|
||||
--eidos-badge-color-solid-neutral: var(--eidos-color-neutral-contrast);
|
||||
--eidos-badge-bg-subtle-neutral: var(--eidos-color-neutral-track);
|
||||
--eidos-badge-border-subtle-neutral: var(--eidos-color-neutral-border);
|
||||
--eidos-badge-color-subtle-neutral: var(--eidos-color-neutral-text);
|
||||
--eidos-badge-bg-outline-neutral: transparent;
|
||||
--eidos-badge-border-outline-neutral: var(--eidos-color-neutral-border);
|
||||
--eidos-badge-color-outline-neutral: var(--eidos-color-neutral-text);
|
||||
|
||||
--eidos-badge-bg-solid-success: var(--eidos-color-success-solid);
|
||||
--eidos-badge-border-solid-success: var(--eidos-color-success-solid);
|
||||
--eidos-badge-color-solid-success: var(--eidos-color-success-contrast);
|
||||
--eidos-badge-bg-subtle-success: var(--eidos-color-success-track);
|
||||
--eidos-badge-border-subtle-success: var(--eidos-color-success-border);
|
||||
--eidos-badge-color-subtle-success: var(--eidos-color-success-text);
|
||||
--eidos-badge-bg-outline-success: transparent;
|
||||
--eidos-badge-border-outline-success: var(--eidos-color-success-border);
|
||||
--eidos-badge-color-outline-success: var(--eidos-color-success-text);
|
||||
|
||||
--eidos-badge-bg-solid-warning: var(--eidos-color-warning-solid);
|
||||
--eidos-badge-border-solid-warning: var(--eidos-color-warning-solid);
|
||||
--eidos-badge-color-solid-warning: var(--eidos-color-warning-contrast);
|
||||
--eidos-badge-bg-subtle-warning: var(--eidos-color-warning-track);
|
||||
--eidos-badge-border-subtle-warning: var(--eidos-color-warning-border);
|
||||
--eidos-badge-color-subtle-warning: var(--eidos-color-warning-text);
|
||||
--eidos-badge-bg-outline-warning: transparent;
|
||||
--eidos-badge-border-outline-warning: var(--eidos-color-warning-border);
|
||||
--eidos-badge-color-outline-warning: var(--eidos-color-warning-text);
|
||||
|
||||
--eidos-badge-bg-solid-danger: var(--eidos-color-danger-solid);
|
||||
--eidos-badge-border-solid-danger: var(--eidos-color-danger-solid);
|
||||
--eidos-badge-color-solid-danger: var(--eidos-color-danger-contrast);
|
||||
--eidos-badge-bg-subtle-danger: var(--eidos-color-danger-track);
|
||||
--eidos-badge-border-subtle-danger: var(--eidos-color-danger-border);
|
||||
--eidos-badge-color-subtle-danger: var(--eidos-color-danger-text);
|
||||
--eidos-badge-bg-outline-danger: transparent;
|
||||
--eidos-badge-border-outline-danger: var(--eidos-color-danger-border);
|
||||
--eidos-badge-color-outline-danger: var(--eidos-color-danger-text);
|
||||
|
||||
--eidos-badge-bg-solid-info: var(--eidos-color-info-solid);
|
||||
--eidos-badge-border-solid-info: var(--eidos-color-info-solid);
|
||||
--eidos-badge-color-solid-info: var(--eidos-color-info-contrast);
|
||||
--eidos-badge-bg-subtle-info: var(--eidos-color-info-track);
|
||||
--eidos-badge-border-subtle-info: var(--eidos-color-info-border);
|
||||
--eidos-badge-color-subtle-info: var(--eidos-color-info-text);
|
||||
--eidos-badge-bg-outline-info: transparent;
|
||||
--eidos-badge-border-outline-info: var(--eidos-color-info-border);
|
||||
--eidos-badge-color-outline-info: var(--eidos-color-info-text);
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
:root {
|
||||
--eidos-box-box-sizing: border-box;
|
||||
--eidos-box-min-width-base: 0;
|
||||
}
|
||||
@ -0,0 +1,298 @@
|
||||
:root {
|
||||
--eidos-button-height-2xs: var(--eidos-control-height-2xs);
|
||||
--eidos-button-height-xs: var(--eidos-control-height-xs);
|
||||
--eidos-button-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-button-height-md: var(--eidos-control-height-md);
|
||||
--eidos-button-height-lg: var(--eidos-control-height-lg);
|
||||
--eidos-button-height-xl: var(--eidos-control-height-xl);
|
||||
--eidos-button-px-2xs: var(--eidos-space-1-5);
|
||||
--eidos-button-px-xs: var(--eidos-space-2);
|
||||
--eidos-button-px-sm: var(--eidos-space-2-5);
|
||||
--eidos-button-px-md: var(--eidos-space-3-5);
|
||||
--eidos-button-px-lg: var(--eidos-space-4-5);
|
||||
--eidos-button-px-xl: var(--eidos-space-5-5);
|
||||
--eidos-button-gap-2xs: var(--eidos-space-1);
|
||||
--eidos-button-gap-xs: var(--eidos-space-1);
|
||||
--eidos-button-gap-sm: var(--eidos-space-1-5);
|
||||
--eidos-button-gap-md: var(--eidos-space-1-5);
|
||||
--eidos-button-gap-lg: var(--eidos-space-2);
|
||||
--eidos-button-gap-xl: var(--eidos-space-2);
|
||||
--eidos-button-font-family: var(--eidos-font-sans);
|
||||
--eidos-button-line-height: var(--eidos-leading-ui);
|
||||
--eidos-button-letter-spacing: var(--eidos-tracking-normal);
|
||||
--eidos-button-font-size-2xs: 11px;
|
||||
--eidos-button-font-size-xs: 12px;
|
||||
--eidos-button-font-size-sm: 12px;
|
||||
--eidos-button-font-size-md: 14px;
|
||||
--eidos-button-font-size-lg: 16px;
|
||||
--eidos-button-font-size-xl: 16px;
|
||||
--eidos-button-font-weight-2xs: var(--eidos-font-weight-medium);
|
||||
--eidos-button-font-weight-xs: var(--eidos-font-weight-medium);
|
||||
--eidos-button-font-weight-sm: var(--eidos-font-weight-medium);
|
||||
--eidos-button-font-weight-md: var(--eidos-font-weight-medium);
|
||||
--eidos-button-font-weight-lg: var(--eidos-font-weight-medium);
|
||||
--eidos-button-font-weight-xl: var(--eidos-font-weight-semibold);
|
||||
--eidos-button-icon-size-2xs: 12px;
|
||||
--eidos-button-icon-size-xs: 13px;
|
||||
--eidos-button-icon-size-sm: 15px;
|
||||
--eidos-button-icon-size-md: 16px;
|
||||
--eidos-button-icon-size-lg: 18px;
|
||||
--eidos-button-icon-size-xl: 20px;
|
||||
--eidos-button-icon-only-size-2xs: 14px;
|
||||
--eidos-button-icon-only-size-xs: 15px;
|
||||
--eidos-button-icon-only-size-sm: 16px;
|
||||
--eidos-button-icon-only-size-md: 18px;
|
||||
--eidos-button-icon-only-size-lg: 20px;
|
||||
--eidos-button-icon-only-size-xl: 22px;
|
||||
--eidos-button-radius-2xs: var(--eidos-radius-sm);
|
||||
--eidos-button-radius-xs: var(--eidos-radius-sm);
|
||||
--eidos-button-radius-sm: var(--eidos-radius-sm);
|
||||
--eidos-button-radius-md: var(--eidos-radius-md);
|
||||
--eidos-button-radius-lg: var(--eidos-radius-md);
|
||||
--eidos-button-radius-xl: var(--eidos-radius-lg);
|
||||
--eidos-button-rounded-sm: var(--eidos-radius-sm);
|
||||
--eidos-button-rounded-md: var(--eidos-radius-md);
|
||||
--eidos-button-rounded-lg: var(--eidos-radius-lg);
|
||||
--eidos-button-rounded-xl: var(--eidos-radius-xl);
|
||||
--eidos-button-rounded-xxl: var(--eidos-radius-xxl);
|
||||
--eidos-button-rounded-full: var(--eidos-radius-full);
|
||||
--eidos-button-solid-bg: var(--eidos-color-primary-solid);
|
||||
--eidos-button-solid-bg-hover: var(--eidos-color-primary-solid-hover);
|
||||
--eidos-button-soft-bg: var(--eidos-color-primary-element);
|
||||
--eidos-button-soft-bg-hover: var(--eidos-color-primary-hover);
|
||||
--eidos-button-soft-fg: var(--eidos-color-primary-text);
|
||||
--eidos-button-surface-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-button-surface-bg-hover: var(--eidos-color-neutral-element);
|
||||
--eidos-button-surface-fg: var(--eidos-color-content-primary);
|
||||
--eidos-button-surface-border: var(--eidos-color-border-default);
|
||||
--eidos-button-outline-bg: transparent;
|
||||
--eidos-button-outline-bg-hover: var(--eidos-color-primary-track);
|
||||
--eidos-button-outline-fg: var(--eidos-color-primary-text);
|
||||
--eidos-button-outline-border: var(--eidos-color-primary-border);
|
||||
--eidos-button-ghost-bg: transparent;
|
||||
--eidos-button-ghost-bg-hover: var(--eidos-color-neutral-element);
|
||||
--eidos-button-ghost-fg: var(--eidos-color-content-primary);
|
||||
--eidos-button-plain-bg: transparent;
|
||||
--eidos-button-plain-fg: var(--eidos-color-primary-text);
|
||||
--eidos-button-plain-fg-hover: var(--eidos-color-primary-solid);
|
||||
--_air-button-height: var(--eidos-button-height-md);
|
||||
--_air-button-padding-inline: var(--eidos-button-px-md);
|
||||
--_air-button-gap: var(--eidos-button-gap-md);
|
||||
--_air-button-border-width: var(--eidos-border-width);
|
||||
--eidos-button-radius: var(--eidos-button-radius-md);
|
||||
--_air-button-font-size: var(--eidos-button-font-size-md);
|
||||
--eidos-button-font-weight: var(--eidos-button-font-weight-md);
|
||||
--_air-button-font-weight: var(--eidos-button-font-weight-md);
|
||||
--_air-button-icon-size: 1em;
|
||||
--_air-button-focus-ring-offset: var(--eidos-focus-ring-offset);
|
||||
--_air-button-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--_air-button-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
--_air-button-focus-ring-surface: var(--eidos-color-surface-default);
|
||||
--eidos-button-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-button-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
--_air-button-palette-track: var(--eidos-color-primary-track);
|
||||
--_air-button-palette-element: var(--eidos-color-primary-element);
|
||||
--_air-button-palette-hover: var(--eidos-color-primary-hover);
|
||||
--_air-button-palette-active: var(--eidos-color-primary-active);
|
||||
--_air-button-palette-border: var(--eidos-color-primary-border);
|
||||
--_air-button-palette-solid: var(--eidos-color-primary-solid);
|
||||
--_air-button-palette-solid-hover: var(--eidos-color-primary-solid-hover);
|
||||
--_air-button-palette-text: var(--eidos-color-primary-text);
|
||||
--_air-button-palette-contrast: var(--eidos-color-primary-contrast);
|
||||
|
||||
--_air-button-color-primary-track: var(--eidos-color-primary-track);
|
||||
--_air-button-color-primary-element: var(--eidos-color-primary-element);
|
||||
--_air-button-color-primary-hover: var(--eidos-color-primary-hover);
|
||||
--_air-button-color-primary-active: var(--eidos-color-primary-active);
|
||||
--_air-button-color-primary-border: var(--eidos-color-primary-border);
|
||||
--_air-button-color-primary-solid: var(--eidos-color-primary-solid);
|
||||
--_air-button-color-primary-solid-hover: var(--eidos-color-primary-solid-hover);
|
||||
--_air-button-color-primary-text: var(--eidos-color-primary-text);
|
||||
--_air-button-color-primary-contrast: var(--eidos-color-primary-contrast);
|
||||
|
||||
--_air-button-color-neutral-track: var(--eidos-color-neutral-track);
|
||||
--_air-button-color-neutral-element: var(--eidos-color-neutral-element);
|
||||
--_air-button-color-neutral-hover: var(--eidos-color-neutral-hover);
|
||||
--_air-button-color-neutral-active: var(--eidos-color-neutral-active);
|
||||
--_air-button-color-neutral-border: var(--eidos-color-neutral-border);
|
||||
--_air-button-color-neutral-solid: var(--eidos-color-neutral-solid);
|
||||
--_air-button-color-neutral-solid-hover: var(--eidos-color-neutral-solid-hover);
|
||||
--_air-button-color-neutral-text: var(--eidos-color-neutral-text);
|
||||
--_air-button-color-neutral-contrast: var(--eidos-color-neutral-contrast);
|
||||
|
||||
--_air-button-color-success-track: var(--eidos-color-success-track);
|
||||
--_air-button-color-success-element: var(--eidos-color-success-element);
|
||||
--_air-button-color-success-hover: var(--eidos-color-success-hover);
|
||||
--_air-button-color-success-active: var(--eidos-color-success-active);
|
||||
--_air-button-color-success-border: var(--eidos-color-success-border);
|
||||
--_air-button-color-success-solid: var(--eidos-color-success-solid);
|
||||
--_air-button-color-success-solid-hover: var(--eidos-color-success-solid-hover);
|
||||
--_air-button-color-success-text: var(--eidos-color-success-text);
|
||||
--_air-button-color-success-contrast: var(--eidos-color-success-contrast);
|
||||
|
||||
--_air-button-color-warning-track: var(--eidos-color-warning-track);
|
||||
--_air-button-color-warning-element: var(--eidos-color-warning-element);
|
||||
--_air-button-color-warning-hover: var(--eidos-color-warning-hover);
|
||||
--_air-button-color-warning-active: var(--eidos-color-warning-active);
|
||||
--_air-button-color-warning-border: var(--eidos-color-warning-border);
|
||||
--_air-button-color-warning-solid: var(--eidos-color-warning-solid);
|
||||
--_air-button-color-warning-solid-hover: var(--eidos-color-warning-solid-hover);
|
||||
--_air-button-color-warning-text: var(--eidos-color-warning-text);
|
||||
--_air-button-color-warning-contrast: var(--eidos-color-warning-contrast);
|
||||
|
||||
--_air-button-color-danger-track: var(--eidos-color-danger-track);
|
||||
--_air-button-color-danger-element: var(--eidos-color-danger-element);
|
||||
--_air-button-color-danger-hover: var(--eidos-color-danger-hover);
|
||||
--_air-button-color-danger-active: var(--eidos-color-danger-active);
|
||||
--_air-button-color-danger-border: var(--eidos-color-danger-border);
|
||||
--_air-button-color-danger-solid: var(--eidos-color-danger-solid);
|
||||
--_air-button-color-danger-solid-hover: var(--eidos-color-danger-solid-hover);
|
||||
--_air-button-color-danger-text: var(--eidos-color-danger-text);
|
||||
--_air-button-color-danger-contrast: var(--eidos-color-danger-contrast);
|
||||
|
||||
--_air-button-color-info-track: var(--eidos-color-info-track);
|
||||
--_air-button-color-info-element: var(--eidos-color-info-element);
|
||||
--_air-button-color-info-hover: var(--eidos-color-info-hover);
|
||||
--_air-button-color-info-active: var(--eidos-color-info-active);
|
||||
--_air-button-color-info-border: var(--eidos-color-info-border);
|
||||
--_air-button-color-info-solid: var(--eidos-color-info-solid);
|
||||
--_air-button-color-info-solid-hover: var(--eidos-color-info-solid-hover);
|
||||
--_air-button-color-info-text: var(--eidos-color-info-text);
|
||||
--_air-button-color-info-contrast: var(--eidos-color-info-contrast);
|
||||
|
||||
--eidos-button-solid-fg: var(--eidos-color-content-on-solid);
|
||||
--_air-button-bg: var(--_air-button-palette-solid);
|
||||
--_air-button-fg: var(--eidos-button-solid-fg);
|
||||
--_air-button-border: var(--_air-button-palette-solid);
|
||||
--_air-button-shadow: none;
|
||||
--_air-button-hover-bg: var(--_air-button-palette-solid-hover);
|
||||
--_air-button-hover-border: var(--_air-button-palette-solid-hover);
|
||||
--_air-button-hover-shadow: none;
|
||||
--_air-button-active-bg: var(--_air-button-variant-solid-active-bg);
|
||||
--_air-button-active-border: var(--_air-button-variant-solid-active-border);
|
||||
--_air-button-active-shadow: inset 0 1px 0 rgb(0 0 0 / 0.08);
|
||||
--_air-button-label-color: currentColor;
|
||||
--_air-button-icon-color: currentColor;
|
||||
--_air-button-spinner-color: currentColor;
|
||||
--_air-button-focus-ring:
|
||||
0 0 0 var(--_air-button-focus-ring-offset) var(--_air-button-focus-ring-surface),
|
||||
0 0 0 calc(var(--_air-button-focus-ring-offset) + var(--_air-button-focus-ring-width))
|
||||
var(--_air-button-focus-ring-color);
|
||||
}
|
||||
|
||||
[data-button].air-button {
|
||||
--_air-button-variant-solid-bg: var(--_air-button-palette-solid);
|
||||
--_air-button-variant-solid-fg: var(--eidos-button-solid-fg);
|
||||
--_air-button-variant-solid-border: var(--_air-button-palette-solid);
|
||||
--_air-button-variant-solid-hover-bg: var(--_air-button-palette-solid-hover);
|
||||
--_air-button-variant-solid-hover-border: var(--_air-button-palette-solid-hover);
|
||||
--_air-button-variant-solid-active-bg: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-solid-hover) 88%,
|
||||
black
|
||||
);
|
||||
--_air-button-variant-solid-active-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-solid-hover) 88%,
|
||||
black
|
||||
);
|
||||
--_air-button-variant-solid-icon-color: currentColor;
|
||||
--_air-button-variant-solid-spinner-color: currentColor;
|
||||
|
||||
--_air-button-variant-soft-bg: var(--_air-button-palette-element);
|
||||
--_air-button-variant-soft-fg: var(--_air-button-palette-text);
|
||||
--_air-button-variant-soft-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 58%,
|
||||
var(--eidos-color-border-subtle)
|
||||
);
|
||||
--_air-button-variant-soft-hover-bg: var(--_air-button-palette-hover);
|
||||
--_air-button-variant-soft-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 76%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--_air-button-variant-soft-active-bg: var(--_air-button-palette-active);
|
||||
--_air-button-variant-soft-active-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 88%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--_air-button-variant-soft-icon-color: currentColor;
|
||||
--_air-button-variant-soft-spinner-color: currentColor;
|
||||
|
||||
--_air-button-variant-surface-bg: var(--eidos-color-surface-raised);
|
||||
--_air-button-variant-surface-fg: var(--eidos-color-content-primary);
|
||||
--_air-button-variant-surface-border: var(--eidos-color-border-default);
|
||||
--_air-button-variant-surface-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-overlay) 68%,
|
||||
var(--_air-button-palette-track)
|
||||
);
|
||||
--_air-button-variant-surface-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 45%,
|
||||
var(--eidos-color-border-strong)
|
||||
);
|
||||
--_air-button-variant-surface-active-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-overlay) 80%,
|
||||
var(--_air-button-palette-track)
|
||||
);
|
||||
--_air-button-variant-surface-active-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 68%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--_air-button-variant-surface-icon-color: currentColor;
|
||||
--_air-button-variant-surface-spinner-color: currentColor;
|
||||
|
||||
--_air-button-variant-outline-bg: transparent;
|
||||
--_air-button-variant-outline-fg: var(--_air-button-palette-text);
|
||||
--_air-button-variant-outline-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 88%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--_air-button-variant-outline-hover-bg: var(--_air-button-palette-track);
|
||||
--_air-button-variant-outline-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 100%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--_air-button-variant-outline-active-bg: var(--_air-button-palette-element);
|
||||
--_air-button-variant-outline-active-border: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-border) 100%,
|
||||
var(--eidos-color-border-strong)
|
||||
);
|
||||
--_air-button-variant-outline-icon-color: currentColor;
|
||||
--_air-button-variant-outline-spinner-color: currentColor;
|
||||
|
||||
--_air-button-variant-ghost-bg: transparent;
|
||||
--_air-button-variant-ghost-fg: var(--_air-button-palette-text);
|
||||
--_air-button-variant-ghost-border: transparent;
|
||||
--_air-button-variant-ghost-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--_air-button-palette-track) 72%,
|
||||
transparent
|
||||
);
|
||||
--_air-button-variant-ghost-hover-border: transparent;
|
||||
--_air-button-variant-ghost-active-bg: var(--_air-button-palette-element);
|
||||
--_air-button-variant-ghost-active-border: transparent;
|
||||
--_air-button-variant-ghost-icon-color: currentColor;
|
||||
--_air-button-variant-ghost-spinner-color: currentColor;
|
||||
|
||||
--_air-button-variant-plain-bg: transparent;
|
||||
--_air-button-variant-plain-fg: var(--_air-button-palette-text);
|
||||
--_air-button-variant-plain-border: transparent;
|
||||
--_air-button-variant-plain-hover-bg: transparent;
|
||||
--_air-button-variant-plain-hover-border: transparent;
|
||||
--_air-button-variant-plain-active-bg: transparent;
|
||||
--_air-button-variant-plain-active-border: transparent;
|
||||
--_air-button-variant-plain-icon-color: currentColor;
|
||||
--_air-button-variant-plain-spinner-color: currentColor;
|
||||
|
||||
--eidos-button-disabled-opacity: 0.45;
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--eidos-calendar-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-calendar-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-default) 86%,
|
||||
var(--eidos-calendar-bg)
|
||||
);
|
||||
--eidos-calendar-shadow: var(--eidos-shadow-subtle);
|
||||
--eidos-calendar-invalid-border: var(--eidos-color-danger-border);
|
||||
--eidos-calendar-readonly-opacity: 1;
|
||||
|
||||
--eidos-calendar-heading-color: var(--eidos-color-content-primary);
|
||||
--eidos-calendar-header-padding: var(--eidos-space-2) var(--eidos-space-2-5);
|
||||
--eidos-calendar-header-radius: var(--eidos-radius-lg);
|
||||
--eidos-calendar-header-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-raised) 96%,
|
||||
var(--eidos-calendar-bg)
|
||||
);
|
||||
--eidos-calendar-header-border-width: var(--eidos-border-width);
|
||||
--eidos-calendar-header-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-subtle) 92%,
|
||||
var(--eidos-calendar-header-bg)
|
||||
);
|
||||
|
||||
--eidos-calendar-nav-bg: color-mix(in srgb, var(--eidos-color-surface) 92%, transparent);
|
||||
--eidos-calendar-nav-border: color-mix(in srgb, var(--eidos-color-border-default) 84%, transparent);
|
||||
--eidos-calendar-nav-border-hover: var(--eidos-color-border-strong);
|
||||
--eidos-calendar-nav-color: var(--eidos-color-content-secondary);
|
||||
--eidos-calendar-nav-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-calendar-nav-bg-hover: color-mix(in srgb, var(--eidos-color-surface-raised) 96%, transparent);
|
||||
--eidos-calendar-nav-focus-ring: var(--eidos-focus-ring);
|
||||
|
||||
--eidos-calendar-select-bg: color-mix(in srgb, var(--eidos-color-surface) 92%, transparent);
|
||||
--eidos-calendar-select-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-default) 84%,
|
||||
transparent
|
||||
);
|
||||
--eidos-calendar-select-border-hover: var(--eidos-color-border-strong);
|
||||
--eidos-calendar-select-border-focus: var(--eidos-color-primary-border);
|
||||
--eidos-calendar-select-color: var(--eidos-color-content-primary);
|
||||
--eidos-calendar-select-disabled-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-raised) 90%,
|
||||
var(--eidos-color-surface-default)
|
||||
);
|
||||
--eidos-calendar-select-disabled-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-default) 72%,
|
||||
transparent
|
||||
);
|
||||
--eidos-calendar-select-disabled-color: var(--eidos-color-content-disabled);
|
||||
--eidos-calendar-select-focus-ring: var(--eidos-focus-ring);
|
||||
|
||||
--eidos-calendar-weekday-color: var(--eidos-color-content-disabled);
|
||||
--eidos-calendar-weekday-font-family: var(--eidos-font-ui);
|
||||
--eidos-calendar-grid-bg: transparent;
|
||||
--eidos-calendar-grid-border-width: var(--eidos-border-width);
|
||||
--eidos-calendar-grid-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-subtle) 92%,
|
||||
var(--eidos-calendar-grid-bg)
|
||||
);
|
||||
--eidos-calendar-grid-radius: var(--eidos-radius-lg);
|
||||
--eidos-calendar-grid-padding: var(--eidos-space-2);
|
||||
--eidos-calendar-grid-shadow: none;
|
||||
--eidos-calendar-grid-gap: 0.34rem;
|
||||
--eidos-calendar-grid-head-divider: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-subtle) 72%,
|
||||
transparent
|
||||
);
|
||||
|
||||
--eidos-calendar-day-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-calendar-day-border: var(--eidos-color-border-default);
|
||||
--eidos-calendar-day-shadow: none;
|
||||
--eidos-calendar-day-font-family: var(--eidos-font-ui);
|
||||
--eidos-calendar-day-color: var(--eidos-color-content-primary);
|
||||
--eidos-calendar-day-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-calendar-day-color-today: var(--eidos-color-primary-text);
|
||||
--eidos-calendar-day-color-selected: var(--eidos-color-primary-contrast);
|
||||
--eidos-calendar-day-color-disabled: var(--eidos-color-content-disabled);
|
||||
--eidos-calendar-day-color-outside: var(--eidos-color-content-disabled);
|
||||
--eidos-calendar-day-color-unavailable: var(--eidos-color-danger-text);
|
||||
--eidos-calendar-day-bg-today: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 82%,
|
||||
var(--eidos-calendar-day-bg)
|
||||
);
|
||||
--eidos-calendar-day-bg-hover: var(--eidos-color-surface-raised);
|
||||
--eidos-calendar-day-bg-selected: var(--eidos-color-primary-solid);
|
||||
--eidos-calendar-day-border-today: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-border) 82%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--eidos-calendar-day-border-hover: var(--eidos-color-border-strong);
|
||||
--eidos-calendar-day-border-selected: var(--eidos-color-primary-solid);
|
||||
--eidos-calendar-day-border-disabled: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-subtle) 88%,
|
||||
var(--eidos-calendar-day-bg)
|
||||
);
|
||||
--eidos-calendar-day-shadow-hover: none;
|
||||
--eidos-calendar-day-shadow-selected: 0 0.35rem 0.85rem
|
||||
color-mix(in srgb, var(--eidos-color-primary-solid) 18%, transparent);
|
||||
--eidos-calendar-day-focus-ring: var(--eidos-focus-ring);
|
||||
--eidos-calendar-day-line-height: var(--eidos-leading-ui);
|
||||
--eidos-calendar-day-today-ring: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-border) 76%,
|
||||
transparent
|
||||
);
|
||||
--eidos-calendar-day-cursor: pointer;
|
||||
--eidos-calendar-readonly-day-cursor: default;
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
:root {
|
||||
--eidos-checkbox-size-sm-box-size: 16px;
|
||||
--eidos-checkbox-size-sm-indicator-size: 10px;
|
||||
--eidos-checkbox-size-sm-indicator-stroke: 2px;
|
||||
--eidos-checkbox-size-sm-indeterminate-width: 8px;
|
||||
--eidos-checkbox-size-sm-indeterminate-height: 2px;
|
||||
|
||||
--eidos-checkbox-size-md-box-size: 18px;
|
||||
--eidos-checkbox-size-md-indicator-size: 12px;
|
||||
--eidos-checkbox-size-md-indicator-stroke: 2px;
|
||||
--eidos-checkbox-size-md-indeterminate-width: 10px;
|
||||
--eidos-checkbox-size-md-indeterminate-height: 2px;
|
||||
|
||||
--eidos-checkbox-size-lg-box-size: 22px;
|
||||
--eidos-checkbox-size-lg-indicator-size: 14px;
|
||||
--eidos-checkbox-size-lg-indicator-stroke: 2px;
|
||||
--eidos-checkbox-size-lg-indeterminate-width: 12px;
|
||||
--eidos-checkbox-size-lg-indeterminate-height: 2px;
|
||||
|
||||
--eidos-checkbox-radius: var(--eidos-radius-sm);
|
||||
--eidos-checkbox-border-width: var(--eidos-border-width);
|
||||
--eidos-checkbox-indeterminate-radius: var(--eidos-radius-full);
|
||||
|
||||
--eidos-checkbox-focus-ring-offset: var(--eidos-focus-ring-offset);
|
||||
--eidos-checkbox-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-checkbox-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
--eidos-checkbox-focus-ring-surface: var(--eidos-color-surface-default);
|
||||
--eidos-checkbox-focus-ring: var(--eidos-focus-ring);
|
||||
--eidos-checkbox-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-checkbox-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
--eidos-checkbox-bg-off: var(--eidos-color-surface-default);
|
||||
--eidos-checkbox-bg-off-hover: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-default) 82%,
|
||||
var(--eidos-color-surface-overlay)
|
||||
);
|
||||
--eidos-checkbox-border-off: var(--eidos-color-border-default);
|
||||
--eidos-checkbox-border-off-hover: var(--eidos-color-border-strong);
|
||||
|
||||
--eidos-checkbox-bg-disabled: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-overlay) 78%,
|
||||
var(--eidos-color-surface-default)
|
||||
);
|
||||
--eidos-checkbox-border-disabled: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-default) 72%,
|
||||
var(--eidos-color-border-subtle)
|
||||
);
|
||||
--eidos-checkbox-disabled-opacity: 0.72;
|
||||
|
||||
--eidos-checkbox-indicator-color: var(--eidos-color-content-on-solid);
|
||||
--eidos-checkbox-indicator-color-disabled: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-content-on-solid) 82%,
|
||||
var(--eidos-color-surface-default)
|
||||
);
|
||||
|
||||
--eidos-checkbox-color-primary-solid: var(--eidos-color-primary-solid);
|
||||
--eidos-checkbox-color-primary-solid-hover: var(--eidos-color-primary-solid-hover);
|
||||
|
||||
--eidos-checkbox-color-neutral-solid: var(--eidos-color-neutral-solid);
|
||||
--eidos-checkbox-color-neutral-solid-hover: var(--eidos-color-neutral-solid-hover);
|
||||
|
||||
--eidos-checkbox-color-success-solid: var(--eidos-color-success-solid);
|
||||
--eidos-checkbox-color-success-solid-hover: var(--eidos-color-success-solid-hover);
|
||||
|
||||
--eidos-checkbox-color-warning-solid: var(--eidos-color-warning-solid);
|
||||
--eidos-checkbox-color-warning-solid-hover: var(--eidos-color-warning-solid-hover);
|
||||
|
||||
--eidos-checkbox-color-danger-solid: var(--eidos-color-danger-solid);
|
||||
--eidos-checkbox-color-danger-solid-hover: var(--eidos-color-danger-solid-hover);
|
||||
|
||||
--eidos-checkbox-color-info-solid: var(--eidos-color-info-solid);
|
||||
--eidos-checkbox-color-info-solid-hover: var(--eidos-color-info-solid-hover);
|
||||
|
||||
--eidos-checkbox-group-gap: var(--eidos-space-3);
|
||||
--eidos-checkbox-group-label-font-family: var(--eidos-font-ui);
|
||||
--eidos-checkbox-group-label-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-checkbox-group-label-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-checkbox-group-label-line-height: var(--eidos-leading-ui);
|
||||
--eidos-checkbox-group-label-color: var(--eidos-color-content-primary);
|
||||
--eidos-checkbox-group-label-color-disabled: var(--eidos-color-content-secondary);
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
/*
|
||||
* air/tokens/component/code-block.css
|
||||
*
|
||||
* Tokens internos del componente CodeBlock.
|
||||
* La API pública está documentada en contracts/component/code-block.css.
|
||||
*
|
||||
* CodeBlock es un bloque de código con cabecera estructurada (filename, language, copy).
|
||||
* Complementa a Code, que es el componente base inline/block.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía compartida de las partes del bloque */
|
||||
--eidos-code-block-font-family: var(--eidos-font-code);
|
||||
--eidos-code-block-font-weight: var(--eidos-font-weight-regular);
|
||||
--eidos-code-block-header-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-code-block-filename-font-size: var(--eidos-text-2-size);
|
||||
--eidos-code-block-filename-line-height: var(--eidos-text-2-lh);
|
||||
--eidos-code-block-lang-font-size: var(--eidos-text-1-size);
|
||||
--eidos-code-block-lang-line-height: var(--eidos-text-1-lh);
|
||||
--eidos-code-block-copy-font-size: var(--eidos-text-1-size);
|
||||
--eidos-code-block-copy-line-height: var(--eidos-text-1-lh);
|
||||
|
||||
--eidos-code-block-border-width: var(--eidos-border-width);
|
||||
--eidos-code-block-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-code-block-border: var(--eidos-color-border-subtle);
|
||||
--eidos-code-block-radius: var(--eidos-radius-lg);
|
||||
--eidos-code-block-color: var(--eidos-color-content-primary);
|
||||
|
||||
--eidos-code-block-header-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-code-block-header-border: var(--eidos-color-border-subtle);
|
||||
--eidos-code-block-header-color: var(--eidos-color-content-secondary);
|
||||
|
||||
--eidos-code-block-padding-x: var(--eidos-space-4);
|
||||
--eidos-code-block-padding-y: var(--eidos-space-3);
|
||||
--eidos-code-block-header-px: var(--eidos-space-4);
|
||||
--eidos-code-block-header-py: var(--eidos-space-2);
|
||||
--eidos-code-block-header-gap: var(--eidos-space-2);
|
||||
|
||||
/*
|
||||
* El botón de copia es parte de la API visual de CodeBlock.
|
||||
* Mantener sus estados aquí evita que hover/focus/success se resuelvan
|
||||
* directamente contra semánticos globales dentro del CSS del componente.
|
||||
*/
|
||||
--eidos-code-block-copy-bg: transparent;
|
||||
--eidos-code-block-copy-border-width: var(--eidos-border-width);
|
||||
--eidos-code-block-copy-border: var(--eidos-code-block-header-border);
|
||||
--eidos-code-block-copy-color: var(--eidos-code-block-header-color);
|
||||
--eidos-code-block-copy-gap: var(--eidos-space-1);
|
||||
--eidos-code-block-copy-px: var(--eidos-space-2);
|
||||
--eidos-code-block-copy-py: var(--eidos-space-1);
|
||||
--eidos-code-block-copy-radius: var(--eidos-radius-sm);
|
||||
--eidos-code-block-copy-hover-bg: var(--eidos-code-block-bg);
|
||||
--eidos-code-block-copy-hover-border: var(--eidos-color-border-default);
|
||||
--eidos-code-block-copy-hover-color: var(--eidos-color-content-primary);
|
||||
--eidos-code-block-copy-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-code-block-copy-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-code-block-copy-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-code-block-copy-focus-ring-offset: var(--eidos-focus-ring-offset);
|
||||
--eidos-code-block-copy-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
--eidos-code-block-copy-success-border: var(--eidos-color-success-track);
|
||||
--eidos-code-block-copy-success-color: var(--eidos-color-success-text);
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* air/tokens/component/code.css
|
||||
*
|
||||
* Tokens internos del componente Code.
|
||||
* La API pública está documentada en contracts/component/code.css.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-code-font-family: var(--eidos-font-code);
|
||||
--eidos-code-font-weight: var(--eidos-font-weight-regular);
|
||||
|
||||
/* Colores públicos */
|
||||
--eidos-code-color-primary: var(--eidos-color-content-primary);
|
||||
--eidos-code-color-secondary: var(--eidos-color-content-secondary);
|
||||
|
||||
/* Block variant */
|
||||
--eidos-code-border-width: var(--eidos-border-width);
|
||||
--eidos-code-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-code-border: var(--eidos-color-border-subtle);
|
||||
--eidos-code-radius: var(--eidos-radius-md);
|
||||
--eidos-code-padding-x: var(--eidos-space-4);
|
||||
--eidos-code-padding-y: var(--eidos-space-3);
|
||||
|
||||
/* Inline variant */
|
||||
--eidos-code-inline-bg: color-mix(in srgb, var(--eidos-color-surface-overlay) 80%, transparent);
|
||||
--eidos-code-inline-border: var(--eidos-color-border-subtle);
|
||||
--eidos-code-inline-radius: var(--eidos-radius-sm);
|
||||
--eidos-code-inline-px: 0.35em;
|
||||
--eidos-code-inline-py: 0.1em;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
:root {
|
||||
--eidos-collapsible-trigger-font-family: var(--eidos-font-ui);
|
||||
--eidos-collapsible-trigger-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-collapsible-trigger-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-collapsible-trigger-color: var(--eidos-color-content-primary);
|
||||
--eidos-collapsible-trigger-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-collapsible-trigger-bg-hover: var(--eidos-color-surface-overlay);
|
||||
--eidos-collapsible-trigger-radius: var(--eidos-radius-sm);
|
||||
--eidos-collapsible-trigger-padding: var(--eidos-space-2) var(--eidos-space-3);
|
||||
|
||||
--eidos-collapsible-content-padding: var(--eidos-space-3);
|
||||
|
||||
--eidos-collapsible-transition-duration: var(--eidos-duration-normal);
|
||||
--eidos-collapsible-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-collapsible-disabled-opacity: 0.5;
|
||||
}
|
||||
@ -0,0 +1,189 @@
|
||||
:root {
|
||||
--eidos-color-picker-trigger-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-color-picker-trigger-height-md: var(--eidos-control-height-md);
|
||||
--eidos-color-picker-trigger-height-lg: var(--eidos-control-height-lg);
|
||||
--eidos-color-picker-trigger-px-sm: var(--eidos-space-2-5);
|
||||
--eidos-color-picker-trigger-px-md: var(--eidos-space-3-5);
|
||||
--eidos-color-picker-trigger-px-lg: var(--eidos-space-4-5);
|
||||
--eidos-color-picker-trigger-gap-sm: var(--eidos-space-2);
|
||||
--eidos-color-picker-trigger-gap-md: var(--eidos-space-2);
|
||||
--eidos-color-picker-trigger-gap-lg: var(--eidos-space-2-5);
|
||||
--eidos-color-picker-trigger-font-family: var(--eidos-font-ui);
|
||||
--eidos-color-picker-trigger-font-size-sm: 12px;
|
||||
--eidos-color-picker-trigger-font-size-md: 14px;
|
||||
--eidos-color-picker-trigger-font-size-lg: 16px;
|
||||
--eidos-color-picker-trigger-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-color-picker-trigger-line-height: var(--eidos-leading-ui);
|
||||
--eidos-color-picker-trigger-letter-spacing: var(--eidos-tracking-normal);
|
||||
--eidos-color-picker-trigger-radius-sm: var(--eidos-radius-sm);
|
||||
--eidos-color-picker-trigger-radius-md: var(--eidos-radius-md);
|
||||
--eidos-color-picker-trigger-radius-lg: var(--eidos-radius-md);
|
||||
--eidos-color-picker-trigger-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-trigger-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-color-picker-trigger-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-color-picker-trigger-swatch-size-sm: 18px;
|
||||
--eidos-color-picker-trigger-swatch-size-md: 20px;
|
||||
--eidos-color-picker-trigger-swatch-size-lg: 22px;
|
||||
--eidos-color-picker-trigger-swatch-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-strong) 62%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-trigger-surface-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-color-picker-trigger-surface-fg: var(--eidos-color-content-primary);
|
||||
--eidos-color-picker-trigger-surface-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-trigger-surface-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-overlay) 68%,
|
||||
var(--eidos-color-primary-track)
|
||||
);
|
||||
--eidos-color-picker-trigger-surface-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-border) 42%,
|
||||
var(--eidos-color-border-strong)
|
||||
);
|
||||
--eidos-color-picker-trigger-outline-bg: transparent;
|
||||
--eidos-color-picker-trigger-outline-fg: var(--eidos-color-content-primary);
|
||||
--eidos-color-picker-trigger-outline-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-trigger-outline-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 58%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-trigger-outline-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-border) 72%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--eidos-color-picker-trigger-ghost-bg: transparent;
|
||||
--eidos-color-picker-trigger-ghost-fg: var(--eidos-color-content-primary);
|
||||
--eidos-color-picker-trigger-ghost-border: transparent;
|
||||
--eidos-color-picker-trigger-ghost-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 70%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-trigger-ghost-hover-border: transparent;
|
||||
--eidos-color-picker-content-width-sm: 288px;
|
||||
--eidos-color-picker-content-width-md: 320px;
|
||||
--eidos-color-picker-content-width-lg: 360px;
|
||||
--eidos-color-picker-content-padding-sm: var(--eidos-space-3);
|
||||
--eidos-color-picker-content-padding-md: var(--eidos-space-4);
|
||||
--eidos-color-picker-content-padding-lg: var(--eidos-space-5);
|
||||
--eidos-color-picker-content-gap: var(--eidos-space-4);
|
||||
--eidos-color-picker-content-radius: var(--eidos-radius-xl);
|
||||
--eidos-color-picker-content-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-content-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-content-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-color-picker-content-shadow: var(--eidos-shadow-overlay);
|
||||
--eidos-color-picker-area-height: 156px;
|
||||
--eidos-color-picker-area-radius: var(--eidos-radius-lg);
|
||||
--eidos-color-picker-area-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-area-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-area-thumb-size: 14px;
|
||||
--eidos-color-picker-area-thumb-border-width: 2px;
|
||||
--eidos-color-picker-area-thumb-border: white;
|
||||
--eidos-color-picker-area-thumb-shadow: 0 0 0 1px rgb(0 0 0 / 0.18), 0 6px 18px rgb(0 0 0 / 0.18);
|
||||
--eidos-color-picker-slider-height: 12px;
|
||||
--eidos-color-picker-slider-radius: var(--eidos-radius-full);
|
||||
--eidos-color-picker-slider-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-slider-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-strong) 40%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-slider-thumb-size: 16px;
|
||||
--eidos-color-picker-slider-thumb-border-width: 1px;
|
||||
--eidos-color-picker-slider-thumb-border: rgb(255 255 255 / 0.92);
|
||||
--eidos-color-picker-slider-thumb-bg: var(--eidos-color-surface);
|
||||
--eidos-color-picker-slider-thumb-shadow: 0 0 0 1px rgb(0 0 0 / 0.14), 0 4px 14px rgb(0 0 0 / 0.16);
|
||||
--eidos-color-picker-input-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-color-picker-input-height-md: var(--eidos-control-height-md);
|
||||
--eidos-color-picker-input-height-lg: var(--eidos-control-height-lg);
|
||||
--eidos-color-picker-input-px-sm: var(--eidos-space-2-5);
|
||||
--eidos-color-picker-input-px-md: var(--eidos-space-3);
|
||||
--eidos-color-picker-input-px-lg: var(--eidos-space-3-5);
|
||||
--eidos-color-picker-input-font-family: var(--eidos-font-mono);
|
||||
--eidos-color-picker-input-font-size-sm: 12px;
|
||||
--eidos-color-picker-input-font-size-md: 13px;
|
||||
--eidos-color-picker-input-font-size-lg: 14px;
|
||||
--eidos-color-picker-input-line-height: var(--eidos-leading-ui);
|
||||
--eidos-color-picker-input-letter-spacing: var(--eidos-tracking-normal);
|
||||
--eidos-color-picker-input-radius-sm: var(--eidos-radius-sm);
|
||||
--eidos-color-picker-input-radius-md: var(--eidos-radius-md);
|
||||
--eidos-color-picker-input-radius-lg: var(--eidos-radius-md);
|
||||
--eidos-color-picker-input-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-input-fg: var(--eidos-color-content-primary);
|
||||
--eidos-color-picker-input-placeholder: var(--eidos-color-content-disabled);
|
||||
--eidos-color-picker-input-focus-border: var(--eidos-color-accent-border);
|
||||
--eidos-color-picker-input-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-color-picker-input-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-color-picker-input-outline-bg: var(--eidos-color-surface);
|
||||
--eidos-color-picker-input-outline-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-input-surface-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-color-picker-input-surface-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-input-ghost-bg: transparent;
|
||||
--eidos-color-picker-input-ghost-border: transparent;
|
||||
--eidos-color-picker-swatches-gap: var(--eidos-space-2);
|
||||
--eidos-color-picker-swatch-size: 22px;
|
||||
--eidos-color-picker-swatch-radius: var(--eidos-radius-full);
|
||||
--eidos-color-picker-swatch-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-swatch-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-strong) 42%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-swatch-selected-ring:
|
||||
0 0 0 2px var(--eidos-color-surface-overlay), 0 0 0 4px var(--eidos-color-accent-border);
|
||||
--eidos-color-picker-eyedropper-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-color-picker-eyedropper-height-md: var(--eidos-control-height-md);
|
||||
--eidos-color-picker-eyedropper-height-lg: var(--eidos-control-height-lg);
|
||||
--eidos-color-picker-eyedropper-px-sm: var(--eidos-space-2-5);
|
||||
--eidos-color-picker-eyedropper-px-md: var(--eidos-space-3);
|
||||
--eidos-color-picker-eyedropper-px-lg: var(--eidos-space-3-5);
|
||||
--eidos-color-picker-eyedropper-gap: var(--eidos-space-2);
|
||||
--eidos-color-picker-eyedropper-font-family: var(--eidos-font-ui);
|
||||
--eidos-color-picker-eyedropper-font-size-sm: 12px;
|
||||
--eidos-color-picker-eyedropper-font-size-md: 13px;
|
||||
--eidos-color-picker-eyedropper-font-size-lg: 14px;
|
||||
--eidos-color-picker-eyedropper-line-height: var(--eidos-leading-ui);
|
||||
--eidos-color-picker-eyedropper-radius-sm: var(--eidos-radius-sm);
|
||||
--eidos-color-picker-eyedropper-radius-md: var(--eidos-radius-md);
|
||||
--eidos-color-picker-eyedropper-radius-lg: var(--eidos-radius-md);
|
||||
--eidos-color-picker-eyedropper-border-width: var(--eidos-border-width);
|
||||
--eidos-color-picker-eyedropper-surface-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-color-picker-eyedropper-surface-fg: var(--eidos-color-content-primary);
|
||||
--eidos-color-picker-eyedropper-surface-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-eyedropper-surface-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-overlay) 74%,
|
||||
var(--eidos-color-primary-track)
|
||||
);
|
||||
--eidos-color-picker-eyedropper-surface-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-border) 45%,
|
||||
var(--eidos-color-border-strong)
|
||||
);
|
||||
--eidos-color-picker-eyedropper-outline-bg: transparent;
|
||||
--eidos-color-picker-eyedropper-outline-fg: var(--eidos-color-content-primary);
|
||||
--eidos-color-picker-eyedropper-outline-border: var(--eidos-color-border-default);
|
||||
--eidos-color-picker-eyedropper-outline-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 64%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-eyedropper-outline-hover-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-border) 72%,
|
||||
var(--eidos-color-border-default)
|
||||
);
|
||||
--eidos-color-picker-eyedropper-ghost-bg: transparent;
|
||||
--eidos-color-picker-eyedropper-ghost-fg: var(--eidos-color-content-secondary);
|
||||
--eidos-color-picker-eyedropper-ghost-border: transparent;
|
||||
--eidos-color-picker-eyedropper-ghost-hover-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 70%,
|
||||
transparent
|
||||
);
|
||||
--eidos-color-picker-eyedropper-ghost-hover-border: transparent;
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
:root {
|
||||
--eidos-combobox-height-xs: var(--eidos-control-height-xs);
|
||||
--eidos-combobox-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-combobox-height-md: var(--eidos-control-height-md);
|
||||
--eidos-combobox-height-lg: var(--eidos-control-height-lg);
|
||||
|
||||
--eidos-combobox-px-xs: var(--eidos-space-1-5);
|
||||
--eidos-combobox-px-sm: var(--eidos-space-2);
|
||||
--eidos-combobox-px-md: var(--eidos-space-3);
|
||||
--eidos-combobox-px-lg: var(--eidos-space-3-5);
|
||||
|
||||
--eidos-combobox-font-size-xs: var(--eidos-font-size-xs);
|
||||
--eidos-combobox-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-combobox-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-combobox-font-size-lg: var(--eidos-font-size-sm);
|
||||
|
||||
--eidos-combobox-radius: var(--eidos-input-radius);
|
||||
--eidos-combobox-border-width: var(--eidos-input-border-width);
|
||||
--eidos-combobox-font-family: var(--eidos-input-font-family);
|
||||
--eidos-combobox-font-weight: var(--eidos-input-font-weight);
|
||||
--eidos-combobox-line-height: var(--eidos-input-line-height);
|
||||
--eidos-combobox-bg: var(--eidos-input-bg);
|
||||
--eidos-combobox-color: var(--eidos-input-color);
|
||||
--eidos-combobox-placeholder-color: var(--eidos-input-placeholder-color);
|
||||
--eidos-combobox-shadow: var(--eidos-input-shadow);
|
||||
|
||||
--eidos-combobox-outline-border: var(--eidos-input-outline-border);
|
||||
--eidos-combobox-outline-border-hover: var(--eidos-input-outline-border-hover);
|
||||
--eidos-combobox-outline-border-focus: var(--eidos-input-outline-border-focus);
|
||||
|
||||
--eidos-combobox-ghost-bg: var(--eidos-input-ghost-bg);
|
||||
--eidos-combobox-ghost-bg-hover: var(--eidos-input-ghost-bg-hover);
|
||||
--eidos-combobox-ghost-border: var(--eidos-input-ghost-border);
|
||||
--eidos-combobox-ghost-border-hover: var(--eidos-input-ghost-border-hover);
|
||||
--eidos-combobox-ghost-border-focus: var(--eidos-input-ghost-border-focus);
|
||||
|
||||
--eidos-combobox-focus-ring-offset: var(--eidos-input-focus-ring-offset);
|
||||
--eidos-combobox-focus-ring-width: var(--eidos-input-focus-ring-width);
|
||||
--eidos-combobox-focus-ring-color: var(--eidos-input-focus-ring-color);
|
||||
--eidos-combobox-focus-ring: var(--eidos-focus-ring);
|
||||
--eidos-combobox-transition-duration: var(--eidos-input-transition-duration);
|
||||
--eidos-combobox-transition-ease: var(--eidos-input-transition-ease);
|
||||
|
||||
--eidos-combobox-invalid-border: var(--eidos-input-error-border);
|
||||
--eidos-combobox-invalid-border-focus: var(--eidos-input-error-border-focus);
|
||||
--eidos-combobox-invalid-focus-ring-color: var(--eidos-input-error-focus-ring-color);
|
||||
--eidos-combobox-invalid-focus-ring: var(--eidos-focus-ring-error);
|
||||
|
||||
--eidos-combobox-disabled-bg: var(--eidos-input-disabled-bg);
|
||||
--eidos-combobox-disabled-color: var(--eidos-input-disabled-color);
|
||||
--eidos-combobox-disabled-border: var(--eidos-input-disabled-border);
|
||||
|
||||
--eidos-combobox-trigger-border-width: var(--eidos-border-width);
|
||||
--eidos-combobox-trigger-radius: var(--eidos-radius-md);
|
||||
--eidos-combobox-trigger-bg: var(--eidos-color-surface-raised);
|
||||
--eidos-combobox-trigger-bg-hover: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-overlay) 68%,
|
||||
var(--eidos-combobox-trigger-bg)
|
||||
);
|
||||
--eidos-combobox-trigger-border: var(--eidos-color-border-default);
|
||||
--eidos-combobox-trigger-border-hover: var(--eidos-color-border-strong);
|
||||
--eidos-combobox-trigger-border-focus: var(--eidos-combobox-outline-border-focus);
|
||||
--eidos-combobox-trigger-color: var(--eidos-color-content-secondary);
|
||||
--eidos-combobox-trigger-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-combobox-trigger-shadow: none;
|
||||
--eidos-combobox-control-divider: var(--eidos-combobox-trigger-border);
|
||||
|
||||
/* Chips */
|
||||
--eidos-combobox-chip-gap: var(--eidos-space-1);
|
||||
--eidos-combobox-chip-padding: var(--eidos-space-0-5) var(--eidos-space-1-5);
|
||||
--eidos-combobox-chip-radius: var(--eidos-radius-full);
|
||||
--eidos-combobox-chip-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 82%,
|
||||
var(--eidos-combobox-bg)
|
||||
);
|
||||
--eidos-combobox-chip-color: var(--eidos-color-content-primary);
|
||||
--eidos-combobox-chip-font-size: var(--eidos-font-size-xs);
|
||||
--eidos-combobox-chip-line-height: var(--eidos-leading-ui);
|
||||
--eidos-combobox-chip-overflow-bg: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-neutral-track) 74%,
|
||||
var(--eidos-combobox-bg)
|
||||
);
|
||||
--eidos-combobox-chip-overflow-color: var(--eidos-color-content-secondary);
|
||||
--eidos-combobox-chip-remove-size: 14px;
|
||||
--eidos-combobox-chip-remove-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-combobox-chip-label-max-width: 8rem;
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
:root {
|
||||
--eidos-command-radius: var(--eidos-radius-xl);
|
||||
--eidos-command-border-width: var(--eidos-border-width);
|
||||
--eidos-command-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-command-border: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-default) 76%,
|
||||
var(--eidos-command-bg)
|
||||
);
|
||||
--eidos-command-border-hover: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-strong) 84%,
|
||||
var(--eidos-command-bg)
|
||||
);
|
||||
--eidos-command-border-focus: var(--eidos-color-primary-border);
|
||||
--eidos-command-shadow: var(--eidos-shadow-overlay);
|
||||
--eidos-command-focus-ring: var(--eidos-focus-ring);
|
||||
--eidos-command-max-height: 320px;
|
||||
|
||||
--eidos-command-input-height-sm: var(--eidos-control-height-sm);
|
||||
--eidos-command-input-height-md: var(--eidos-control-height-md);
|
||||
--eidos-command-input-height-lg: var(--eidos-control-height-lg);
|
||||
--eidos-command-input-px-sm: var(--eidos-space-3);
|
||||
--eidos-command-input-px-md: var(--eidos-space-4);
|
||||
--eidos-command-input-px-lg: var(--eidos-space-4-5);
|
||||
--eidos-command-input-font-size-sm: var(--eidos-font-size-sm);
|
||||
--eidos-command-input-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-command-input-font-size-lg: var(--eidos-font-size-md);
|
||||
--eidos-command-input-font-family: var(--eidos-font-ui);
|
||||
--eidos-command-input-font-weight: var(--eidos-font-weight-regular);
|
||||
--eidos-command-input-line-height: var(--eidos-leading-ui);
|
||||
--eidos-command-input-color: var(--eidos-color-content-primary);
|
||||
--eidos-command-input-placeholder-color: var(--eidos-color-content-disabled);
|
||||
--eidos-command-input-divider: color-mix(in srgb, var(--eidos-color-border-subtle) 80%, transparent);
|
||||
|
||||
--eidos-command-list-padding: var(--eidos-space-1);
|
||||
--eidos-command-list-gap: var(--eidos-space-1);
|
||||
--eidos-command-group-gap: var(--eidos-space-1);
|
||||
--eidos-command-group-items-gap: 2px;
|
||||
|
||||
--eidos-command-item-height-sm: 32px;
|
||||
--eidos-command-item-height-md: 36px;
|
||||
--eidos-command-item-height-lg: 42px;
|
||||
--eidos-command-item-px-sm: var(--eidos-space-2-5);
|
||||
--eidos-command-item-px-md: var(--eidos-space-3);
|
||||
--eidos-command-item-px-lg: var(--eidos-space-3-5);
|
||||
--eidos-command-item-radius: var(--eidos-radius-lg);
|
||||
--eidos-command-item-gap: var(--eidos-space-2);
|
||||
--eidos-command-item-font-family: var(--eidos-font-ui);
|
||||
--eidos-command-item-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-command-item-line-height: var(--eidos-leading-ui);
|
||||
--eidos-command-item-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-command-item-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-command-item-font-size-lg: var(--eidos-font-size-sm);
|
||||
--eidos-command-item-color: var(--eidos-color-content-primary);
|
||||
--eidos-command-item-color-selected: var(--eidos-color-content-primary);
|
||||
--eidos-command-item-color-disabled: var(--eidos-color-content-disabled);
|
||||
--eidos-command-item-bg-selected: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 82%,
|
||||
var(--eidos-command-bg)
|
||||
);
|
||||
|
||||
--eidos-command-group-heading-px: var(--eidos-space-2);
|
||||
--eidos-command-group-heading-py: var(--eidos-space-2);
|
||||
--eidos-command-group-heading-font-family: var(--eidos-font-mono);
|
||||
--eidos-command-group-heading-font-size: var(--eidos-font-size-xs);
|
||||
--eidos-command-group-heading-font-weight: var(--eidos-font-weight-semibold);
|
||||
--eidos-command-group-heading-color: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-content-secondary) 88%,
|
||||
transparent
|
||||
);
|
||||
--eidos-command-group-heading-letter-spacing: var(--eidos-tracking-wider);
|
||||
|
||||
--eidos-command-separator-color: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-border-subtle) 86%,
|
||||
transparent
|
||||
);
|
||||
--eidos-command-separator-margin: var(--eidos-space-1) 0;
|
||||
|
||||
--eidos-command-feedback-padding: var(--eidos-space-4);
|
||||
--eidos-command-feedback-color: var(--eidos-color-content-secondary);
|
||||
--eidos-command-feedback-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-command-feedback-line-height: var(--eidos-leading-prose);
|
||||
|
||||
--eidos-command-shortcut-color: var(--eidos-color-content-secondary);
|
||||
--eidos-command-shortcut-font-size: var(--eidos-font-size-xs);
|
||||
|
||||
--eidos-command-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-command-transition-ease: var(--eidos-ease-default);
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
:root {
|
||||
--eidos-container-width-sm: 448px;
|
||||
--eidos-container-width-md: 688px;
|
||||
--eidos-container-width-lg: 880px;
|
||||
--eidos-container-width-xl: 1136px;
|
||||
--eidos-container-width-xxl: 1280px;
|
||||
--eidos-container-width-full: none;
|
||||
--eidos-container-padding-inline: var(--eidos-space-4);
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
/*
|
||||
* Tokens internos de Dialog.
|
||||
*
|
||||
* Dialog aterriza la geometría compartida del tema en una superficie modal:
|
||||
* overlay, panel, jerarquía tipográfica y un close control ligero.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--eidos-dialog-overlay-bg: var(--eidos-color-overlay);
|
||||
--eidos-dialog-overlay-opacity: 62%;
|
||||
--eidos-dialog-overlay-blur: 10px;
|
||||
--eidos-dialog-overlay-z: 70;
|
||||
--eidos-dialog-overlay-in-duration: 120ms;
|
||||
/* Más largo que la salida del panel (160-180 ms) para que el backdrop
|
||||
permanezca visible mientras el panel sale y solo luego desaparezca. */
|
||||
--eidos-dialog-overlay-out-duration: 280ms;
|
||||
|
||||
--eidos-dialog-content-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-dialog-content-color: var(--eidos-color-content-primary);
|
||||
--eidos-dialog-content-border: var(--eidos-color-border-default);
|
||||
--eidos-dialog-content-border-width: var(--eidos-border-width);
|
||||
--eidos-dialog-content-radius: var(--eidos-radius-xl);
|
||||
--eidos-dialog-content-shadow: var(--eidos-shadow-overlay);
|
||||
--eidos-dialog-content-max-height: calc(100dvh - var(--eidos-space-8));
|
||||
--eidos-dialog-content-max-height-sheet: 85dvh;
|
||||
|
||||
--eidos-dialog-content-width-sm: 420px;
|
||||
--eidos-dialog-content-width-md: 560px;
|
||||
--eidos-dialog-content-width-lg: 760px;
|
||||
--eidos-dialog-content-width-xl: 1024px;
|
||||
--eidos-dialog-content-width-inset: var(--eidos-space-6);
|
||||
--eidos-dialog-content-full-inset: var(--eidos-space-3);
|
||||
--eidos-dialog-content-full-radius: var(--eidos-radius-xxl);
|
||||
|
||||
--eidos-dialog-content-padding-sm: var(--eidos-space-4);
|
||||
--eidos-dialog-content-padding-md: var(--eidos-space-5);
|
||||
--eidos-dialog-content-padding-lg: var(--eidos-space-6);
|
||||
--eidos-dialog-content-padding-full: var(--eidos-space-6);
|
||||
|
||||
--eidos-dialog-stack-gap: var(--eidos-space-4);
|
||||
--eidos-dialog-header-gap: var(--eidos-space-3);
|
||||
--eidos-dialog-footer-gap: var(--eidos-space-3);
|
||||
--eidos-dialog-footer-margin-top: var(--eidos-space-2);
|
||||
|
||||
--eidos-dialog-title-font-family: var(--eidos-font-heading);
|
||||
--eidos-dialog-title-font-size: var(--eidos-font-size-lg);
|
||||
--eidos-dialog-title-font-weight: var(--eidos-font-weight-semibold);
|
||||
--eidos-dialog-title-line-height: var(--eidos-leading-heading);
|
||||
--eidos-dialog-title-color: var(--eidos-color-content-primary);
|
||||
|
||||
--eidos-dialog-description-font-family: var(--eidos-font-ui);
|
||||
--eidos-dialog-description-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-dialog-description-line-height: var(--eidos-leading-ui);
|
||||
--eidos-dialog-description-color: var(--eidos-color-content-secondary);
|
||||
|
||||
--eidos-dialog-close-size: var(--eidos-control-height-sm);
|
||||
--eidos-dialog-close-px: var(--eidos-space-2);
|
||||
--eidos-dialog-close-radius: var(--eidos-radius-md);
|
||||
--eidos-dialog-close-bg: transparent;
|
||||
--eidos-dialog-close-bg-hover: color-mix(in srgb, var(--eidos-color-neutral-track) 72%, transparent);
|
||||
--eidos-dialog-close-color: var(--eidos-color-content-secondary);
|
||||
--eidos-dialog-close-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-dialog-close-border: transparent;
|
||||
--eidos-dialog-close-border-width: var(--eidos-border-width);
|
||||
--eidos-dialog-close-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-dialog-close-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-dialog-close-focus-ring-offset: 1px;
|
||||
--eidos-dialog-close-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-dialog-close-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
/*
|
||||
* air/tokens/component/display.css
|
||||
*
|
||||
* Tokens internos del componente Display.
|
||||
* La API pública está documentada en contracts/component/display.css.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tipografía */
|
||||
--eidos-display-font-family: var(--eidos-font-display);
|
||||
--eidos-display-font-family-sans: var(--eidos-font-sans);
|
||||
--eidos-display-font-weight: var(--eidos-font-weight-regular);
|
||||
|
||||
/* Colores públicos */
|
||||
--eidos-display-color-primary: var(--eidos-color-content-primary);
|
||||
--eidos-display-color-secondary: var(--eidos-color-content-secondary);
|
||||
|
||||
/* Tracking override para Display — única excepción a la automatización de ls por size.
|
||||
* A tamaños grandes (44-60px) el tracking es una decisión de diseño visual explícita.
|
||||
*/
|
||||
--eidos-display-tracking-tight: -0.03em;
|
||||
--eidos-display-tracking-normal: 0em;
|
||||
--eidos-display-tracking-wide: 0.02em;
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
:root {
|
||||
--eidos-drawer-overlay-bg: var(--eidos-color-overlay);
|
||||
--eidos-drawer-overlay-blur: 10px;
|
||||
--eidos-drawer-overlay-z: 72;
|
||||
|
||||
--eidos-drawer-content-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-drawer-content-color: var(--eidos-color-content-primary);
|
||||
--eidos-drawer-content-border: var(--eidos-color-border-default);
|
||||
--eidos-drawer-content-border-width: var(--eidos-border-width);
|
||||
--eidos-drawer-content-radius: var(--eidos-radius-xl);
|
||||
--eidos-drawer-content-shadow: var(--eidos-shadow-overlay);
|
||||
--eidos-drawer-content-inset: var(--eidos-space-3);
|
||||
|
||||
--eidos-drawer-content-width-sm: 360px;
|
||||
--eidos-drawer-content-width-md: 440px;
|
||||
--eidos-drawer-content-width-lg: 560px;
|
||||
|
||||
--eidos-drawer-content-height-sm: 260px;
|
||||
--eidos-drawer-content-height-md: 360px;
|
||||
--eidos-drawer-content-height-lg: 480px;
|
||||
|
||||
--eidos-drawer-content-padding-sm: var(--eidos-space-4);
|
||||
--eidos-drawer-content-padding-md: var(--eidos-space-5);
|
||||
--eidos-drawer-content-padding-lg: var(--eidos-space-6);
|
||||
--eidos-drawer-content-padding-full: var(--eidos-space-6);
|
||||
|
||||
--eidos-drawer-stack-gap: var(--eidos-space-4);
|
||||
--eidos-drawer-header-gap: var(--eidos-space-3);
|
||||
--eidos-drawer-footer-gap: var(--eidos-space-3);
|
||||
--eidos-drawer-footer-margin-top: var(--eidos-space-2);
|
||||
|
||||
--eidos-drawer-title-font-family: var(--eidos-font-heading);
|
||||
--eidos-drawer-title-font-size: var(--eidos-font-size-lg);
|
||||
--eidos-drawer-title-font-weight: var(--eidos-font-weight-semibold);
|
||||
--eidos-drawer-title-line-height: var(--eidos-leading-heading);
|
||||
--eidos-drawer-title-color: var(--eidos-color-content-primary);
|
||||
|
||||
--eidos-drawer-description-font-family: var(--eidos-font-ui);
|
||||
--eidos-drawer-description-font-size: var(--eidos-font-size-sm);
|
||||
--eidos-drawer-description-line-height: var(--eidos-leading-ui);
|
||||
--eidos-drawer-description-color: var(--eidos-color-content-secondary);
|
||||
|
||||
--eidos-drawer-close-size: var(--eidos-control-height-sm);
|
||||
--eidos-drawer-close-px: var(--eidos-space-2);
|
||||
--eidos-drawer-close-radius: var(--eidos-radius-md);
|
||||
--eidos-drawer-close-bg: transparent;
|
||||
--eidos-drawer-close-bg-hover: color-mix(in srgb, var(--eidos-color-neutral-track) 72%, transparent);
|
||||
--eidos-drawer-close-color: var(--eidos-color-content-secondary);
|
||||
--eidos-drawer-close-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-drawer-close-border: transparent;
|
||||
--eidos-drawer-close-border-width: var(--eidos-border-width);
|
||||
--eidos-drawer-close-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-drawer-close-transition-ease: var(--eidos-ease-default);
|
||||
--eidos-drawer-close-focus-ring-offset: 1px;
|
||||
--eidos-drawer-close-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-drawer-close-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
--eidos-drawer-close-disabled-opacity: 0.5;
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
:root {
|
||||
--eidos-dropdown-menu-min-width: 180px;
|
||||
--eidos-dropdown-menu-max-height: 320px;
|
||||
--eidos-dropdown-menu-padding: var(--eidos-space-1);
|
||||
--eidos-dropdown-menu-radius: var(--eidos-radius-lg);
|
||||
--eidos-dropdown-menu-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-dropdown-menu-border: var(--eidos-color-border-default);
|
||||
--eidos-dropdown-menu-border-width: var(--eidos-border-width);
|
||||
--eidos-dropdown-menu-shadow: var(--eidos-shadow-3);
|
||||
|
||||
--eidos-dropdown-menu-item-height-sm: 28px;
|
||||
--eidos-dropdown-menu-item-height-md: 32px;
|
||||
--eidos-dropdown-menu-item-height-lg: 38px;
|
||||
--eidos-dropdown-menu-item-px: var(--eidos-space-2);
|
||||
--eidos-dropdown-menu-item-radius: var(--eidos-radius-sm);
|
||||
--eidos-dropdown-menu-item-font-family: var(--eidos-font-ui);
|
||||
--eidos-dropdown-menu-item-font-size-sm: 12px;
|
||||
--eidos-dropdown-menu-item-font-size-md: 14px;
|
||||
--eidos-dropdown-menu-item-font-size-lg: 16px;
|
||||
--eidos-dropdown-menu-item-color: var(--eidos-color-content-primary);
|
||||
--eidos-dropdown-menu-item-color-highlighted: var(--eidos-color-content-primary);
|
||||
--eidos-dropdown-menu-item-bg-highlighted: var(--eidos-color-surface-raised);
|
||||
--eidos-dropdown-menu-item-color-disabled: var(--eidos-color-content-disabled);
|
||||
|
||||
--eidos-dropdown-menu-separator-color: var(--eidos-color-border-default);
|
||||
--eidos-dropdown-menu-separator-margin: var(--eidos-space-1) 0;
|
||||
|
||||
--eidos-dropdown-menu-group-heading-font-size: 11px;
|
||||
--eidos-dropdown-menu-group-heading-font-weight: var(--eidos-font-weight-semibold);
|
||||
--eidos-dropdown-menu-group-heading-color: var(--eidos-color-content-tertiary);
|
||||
--eidos-dropdown-menu-group-heading-px: var(--eidos-space-2);
|
||||
--eidos-dropdown-menu-group-heading-py: var(--eidos-space-1);
|
||||
--eidos-dropdown-menu-group-heading-letter-spacing: var(--eidos-tracking-wider);
|
||||
|
||||
--eidos-dropdown-menu-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-dropdown-menu-transition-ease: var(--eidos-ease-default);
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
:root {
|
||||
/* Provider */
|
||||
--eidos-editable-font-family: var(--eidos-font-ui);
|
||||
--eidos-editable-gap: var(--eidos-space-2);
|
||||
|
||||
/* Preview */
|
||||
--eidos-editable-preview-font-size-sm: var(--eidos-font-size-sm);
|
||||
--eidos-editable-preview-font-size-md: var(--eidos-font-size-base);
|
||||
--eidos-editable-preview-font-size-lg: var(--eidos-font-size-lg);
|
||||
--eidos-editable-preview-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-editable-preview-line-height: var(--eidos-leading-ui);
|
||||
--eidos-editable-preview-color: var(--eidos-color-content-primary);
|
||||
--eidos-editable-preview-color-empty: var(--eidos-color-content-tertiary);
|
||||
--eidos-editable-preview-px: var(--eidos-space-1);
|
||||
--eidos-editable-preview-py: var(--eidos-space-0-5);
|
||||
--eidos-editable-preview-radius: var(--eidos-radius-sm);
|
||||
--eidos-editable-preview-border-width: 1px;
|
||||
--eidos-editable-preview-border: transparent;
|
||||
--eidos-editable-preview-border-hover: var(--eidos-color-border-default);
|
||||
--eidos-editable-preview-bg: transparent;
|
||||
--eidos-editable-preview-bg-hover: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-default) 60%,
|
||||
transparent
|
||||
);
|
||||
--eidos-editable-preview-cursor: pointer;
|
||||
--eidos-editable-preview-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-editable-preview-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
/* Input */
|
||||
--eidos-editable-input-height-sm: var(--eidos-control-height-xs);
|
||||
--eidos-editable-input-height-md: var(--eidos-control-height-sm);
|
||||
--eidos-editable-input-height-lg: var(--eidos-control-height-md);
|
||||
--eidos-editable-input-font-size-sm: var(--eidos-font-size-sm);
|
||||
--eidos-editable-input-font-size-md: var(--eidos-font-size-base);
|
||||
--eidos-editable-input-font-size-lg: var(--eidos-font-size-lg);
|
||||
--eidos-editable-input-font-weight: var(--eidos-font-weight-normal);
|
||||
--eidos-editable-input-line-height: var(--eidos-leading-ui);
|
||||
--eidos-editable-input-px: var(--eidos-space-2);
|
||||
--eidos-editable-input-color: var(--eidos-color-content-primary);
|
||||
--eidos-editable-input-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-editable-input-border-width: var(--eidos-border-width);
|
||||
--eidos-editable-input-border: var(--eidos-color-border-default);
|
||||
--eidos-editable-input-border-focus: var(--eidos-color-primary-border);
|
||||
--eidos-editable-input-radius: var(--eidos-radius-md);
|
||||
--eidos-editable-input-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-editable-input-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
/* Triggers */
|
||||
--eidos-editable-trigger-size-sm: var(--eidos-control-height-xs);
|
||||
--eidos-editable-trigger-size-md: var(--eidos-control-height-sm);
|
||||
--eidos-editable-trigger-size-lg: var(--eidos-control-height-md);
|
||||
--eidos-editable-trigger-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-editable-trigger-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-editable-trigger-font-size-lg: var(--eidos-font-size-base);
|
||||
--eidos-editable-trigger-radius: var(--eidos-radius-md);
|
||||
--eidos-editable-trigger-border-width: var(--eidos-border-width);
|
||||
--eidos-editable-trigger-border: var(--eidos-color-border-default);
|
||||
--eidos-editable-trigger-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-editable-trigger-color: var(--eidos-color-content-secondary);
|
||||
--eidos-editable-trigger-bg-hover: var(--eidos-color-surface-raised);
|
||||
--eidos-editable-trigger-color-hover: var(--eidos-color-content-primary);
|
||||
--eidos-editable-trigger-border-hover: var(--eidos-color-border-emphasis);
|
||||
--eidos-editable-trigger-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-editable-trigger-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
/* Focus */
|
||||
--eidos-editable-focus-ring-offset: var(--eidos-focus-ring-offset);
|
||||
--eidos-editable-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-editable-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
|
||||
/* Disabled */
|
||||
--eidos-editable-disabled-opacity: 0.5;
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* air/tokens/component/field.css
|
||||
*
|
||||
* Tokens internos del componente Field.
|
||||
* La API pública está documentada en contracts/component/field.css.
|
||||
*
|
||||
* El componente inyecta inline --_air-field-gap y --_air-field-label-size
|
||||
* según el size activo (sm/md/lg), para que el cascade afecte a todas las
|
||||
* partes del campo sin necesitar clases por size.
|
||||
*
|
||||
* Field reutiliza los tokens de Input para la caja visual del control.
|
||||
* Aquí solo definimos la capa propia del campo: layout vertical, label,
|
||||
* helper, error y required indicator.
|
||||
*
|
||||
* Nota de implementación: el componente inyecta inline:
|
||||
*
|
||||
* --_air-field-gap: var(--eidos-field-gap-{size})
|
||||
* --_air-field-label-size: var(--eidos-field-label-size-{size})
|
||||
*/
|
||||
|
||||
:root {
|
||||
--eidos-field-gap-xs: var(--eidos-space-1);
|
||||
--eidos-field-gap-sm: var(--eidos-space-1);
|
||||
--eidos-field-gap-md: var(--eidos-space-1-5);
|
||||
--eidos-field-gap-lg: var(--eidos-space-2);
|
||||
|
||||
--eidos-field-label-required-gap: 0.35em;
|
||||
--eidos-field-label-size-xs: var(--eidos-font-size-xs);
|
||||
--eidos-field-label-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-field-label-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-field-label-size-lg: var(--eidos-font-size-sm);
|
||||
|
||||
--eidos-field-font-family: var(--eidos-font-ui);
|
||||
--eidos-field-line-height: var(--eidos-leading-ui);
|
||||
--eidos-field-label-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-field-label-color: var(--eidos-color-content-primary);
|
||||
--eidos-field-label-color-disabled: var(--eidos-color-content-disabled);
|
||||
--eidos-field-label-color-error: var(--eidos-color-content-primary);
|
||||
--eidos-field-control-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-field-control-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
--eidos-field-required-color: var(--eidos-color-danger-text);
|
||||
|
||||
--eidos-field-helper-size: var(--eidos-font-size-xs);
|
||||
--eidos-field-helper-color: var(--eidos-color-content-secondary);
|
||||
--eidos-field-helper-color-disabled: var(--eidos-color-content-disabled);
|
||||
|
||||
--eidos-field-error-size: var(--eidos-font-size-xs);
|
||||
--eidos-field-error-color: var(--eidos-color-danger-text);
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
:root {
|
||||
/* Provider */
|
||||
--eidos-file-upload-font-family: var(--eidos-font-ui);
|
||||
--eidos-file-upload-gap: var(--eidos-space-3);
|
||||
|
||||
/* Dropzone */
|
||||
--eidos-file-upload-dropzone-min-height-sm: 8rem;
|
||||
--eidos-file-upload-dropzone-min-height-md: 10rem;
|
||||
--eidos-file-upload-dropzone-min-height-lg: 12rem;
|
||||
--eidos-file-upload-dropzone-padding-sm: var(--eidos-space-4);
|
||||
--eidos-file-upload-dropzone-padding-md: var(--eidos-space-6);
|
||||
--eidos-file-upload-dropzone-padding-lg: var(--eidos-space-8);
|
||||
--eidos-file-upload-dropzone-radius: var(--eidos-radius-lg);
|
||||
--eidos-file-upload-dropzone-border-width: 2px;
|
||||
--eidos-file-upload-dropzone-border-style: dashed;
|
||||
--eidos-file-upload-dropzone-border: var(--eidos-color-border-default);
|
||||
--eidos-file-upload-dropzone-border-hover: var(--eidos-color-border-emphasis);
|
||||
--eidos-file-upload-dropzone-border-dragging: var(--eidos-color-primary-border);
|
||||
--eidos-file-upload-dropzone-bg: transparent;
|
||||
--eidos-file-upload-dropzone-bg-hover: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-surface-default) 50%,
|
||||
transparent
|
||||
);
|
||||
--eidos-file-upload-dropzone-bg-dragging: color-mix(
|
||||
in srgb,
|
||||
var(--eidos-color-primary-track) 30%,
|
||||
transparent
|
||||
);
|
||||
--eidos-file-upload-dropzone-color: var(--eidos-color-content-secondary);
|
||||
--eidos-file-upload-dropzone-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-file-upload-dropzone-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-file-upload-dropzone-font-size-lg: var(--eidos-font-size-base);
|
||||
--eidos-file-upload-dropzone-transition-duration: var(--eidos-duration-fast);
|
||||
--eidos-file-upload-dropzone-transition-ease: var(--eidos-ease-default);
|
||||
|
||||
/* File list */
|
||||
--eidos-file-upload-list-gap: var(--eidos-space-2);
|
||||
|
||||
/* Item */
|
||||
--eidos-file-upload-item-padding-sm: var(--eidos-space-2) var(--eidos-space-3);
|
||||
--eidos-file-upload-item-padding-md: var(--eidos-space-2-5) var(--eidos-space-3);
|
||||
--eidos-file-upload-item-padding-lg: var(--eidos-space-3) var(--eidos-space-4);
|
||||
--eidos-file-upload-item-radius: var(--eidos-radius-md);
|
||||
--eidos-file-upload-item-border-width: var(--eidos-border-width);
|
||||
--eidos-file-upload-item-border: var(--eidos-color-border-default);
|
||||
--eidos-file-upload-item-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-file-upload-item-gap: var(--eidos-space-3);
|
||||
|
||||
/* Item name */
|
||||
--eidos-file-upload-item-name-font-size-sm: var(--eidos-font-size-xs);
|
||||
--eidos-file-upload-item-name-font-size-md: var(--eidos-font-size-sm);
|
||||
--eidos-file-upload-item-name-font-size-lg: var(--eidos-font-size-base);
|
||||
--eidos-file-upload-item-name-font-weight: var(--eidos-font-weight-medium);
|
||||
--eidos-file-upload-item-name-color: var(--eidos-color-content-primary);
|
||||
|
||||
/* Item size */
|
||||
--eidos-file-upload-item-size-font-size: var(--eidos-font-size-xs);
|
||||
--eidos-file-upload-item-size-color: var(--eidos-color-content-tertiary);
|
||||
|
||||
/* Item remove */
|
||||
--eidos-file-upload-item-remove-size: 1.5rem;
|
||||
--eidos-file-upload-item-remove-color: var(--eidos-color-content-tertiary);
|
||||
--eidos-file-upload-item-remove-color-hover: var(--eidos-color-danger-solid);
|
||||
|
||||
/* Item progress */
|
||||
--eidos-file-upload-item-progress-height: 4px;
|
||||
--eidos-file-upload-item-progress-radius: var(--eidos-radius-full);
|
||||
--eidos-file-upload-item-progress-bg: var(--eidos-color-surface-default);
|
||||
--eidos-file-upload-item-progress-fill: var(--eidos-color-primary-solid);
|
||||
|
||||
/* Focus */
|
||||
--eidos-file-upload-focus-ring-offset: var(--eidos-focus-ring-offset);
|
||||
--eidos-file-upload-focus-ring-width: var(--eidos-focus-ring-width);
|
||||
--eidos-file-upload-focus-ring-color: var(--eidos-focus-ring-color);
|
||||
|
||||
/* Disabled */
|
||||
--eidos-file-upload-disabled-opacity: 0.5;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
:root {
|
||||
--eidos-flex-direction-default: row;
|
||||
--eidos-flex-align-default: stretch;
|
||||
--eidos-flex-justify-default: flex-start;
|
||||
--eidos-flex-wrap-default: nowrap;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--eidos-float-offset-x: 0px;
|
||||
--eidos-float-offset-y: 0px;
|
||||
--eidos-float-bg: var(--eidos-color-surface-overlay);
|
||||
--eidos-float-color: var(--eidos-color-content-primary);
|
||||
--eidos-float-border-width: 1px;
|
||||
--eidos-float-border-color: var(--eidos-color-border-default);
|
||||
--eidos-float-radius: var(--eidos-radius-md);
|
||||
--eidos-float-shadow: var(--eidos-shadow-overlay);
|
||||
--eidos-float-padding-x: var(--eidos-space-2);
|
||||
--eidos-float-padding-y: var(--eidos-space-1);
|
||||
--eidos-float-cursor: default;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
:root {
|
||||
--eidos-form-gap-sm: var(--eidos-space-4);
|
||||
--eidos-form-gap-md: var(--eidos-space-5);
|
||||
--eidos-form-gap-lg: var(--eidos-space-6);
|
||||
--eidos-form-field-gap-sm: var(--eidos-space-2);
|
||||
--eidos-form-field-gap-md: var(--eidos-space-3);
|
||||
--eidos-form-field-gap-lg: var(--eidos-space-4);
|
||||
--eidos-form-control-gap: var(--eidos-space-2);
|
||||
--eidos-form-disabled-opacity: 0.84;
|
||||
--eidos-form-font-family: var(--eidos-field-font-family);
|
||||
--eidos-form-line-height: var(--eidos-field-line-height);
|
||||
--eidos-form-label-size-sm: var(--eidos-field-label-size-sm);
|
||||
--eidos-form-label-size-md: var(--eidos-field-label-size-md);
|
||||
--eidos-form-label-size-lg: var(--eidos-field-label-size-lg);
|
||||
--eidos-form-label-weight: var(--eidos-field-label-weight);
|
||||
--eidos-form-label-color: var(--eidos-field-label-color);
|
||||
--eidos-form-label-color-disabled: var(--eidos-field-label-color-disabled);
|
||||
--eidos-form-label-color-error: var(--eidos-field-label-color-error);
|
||||
--eidos-form-label-required-gap: var(--eidos-space-1);
|
||||
--eidos-form-required-color: var(--eidos-field-required-color);
|
||||
--eidos-form-description-size: var(--eidos-field-helper-size);
|
||||
--eidos-form-description-color: var(--eidos-field-helper-color);
|
||||
--eidos-form-description-color-disabled: var(--eidos-field-helper-color-disabled);
|
||||
--eidos-form-error-size: var(--eidos-field-error-size);
|
||||
--eidos-form-error-color: var(--eidos-field-error-color);
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
:root {
|
||||
--eidos-grid-template-columns-default: none;
|
||||
--eidos-grid-template-rows-default: none;
|
||||
--eidos-grid-auto-columns-default: auto;
|
||||
--eidos-grid-auto-rows-default: auto;
|
||||
--eidos-grid-auto-flow-default: row;
|
||||
--eidos-grid-align-default: stretch;
|
||||
--eidos-grid-justify-default: stretch;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue