You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
12 KiB
239 lines
12 KiB
/*
|
|
* Untitled UI — capa de pulido de componentes.
|
|
*
|
|
* Los recipes de Eidos son genéricos; esta capa los lleva a la anatomía
|
|
* exacta de Untitled UI (inputs con sombra + borde gris-300 + anillo de
|
|
* foco lavanda de 4px, botones con sombra y anillo real, switch/checkbox/
|
|
* tabs/select coherentes, cards y badges con su contorno).
|
|
*
|
|
* Está scopeada a `[data-theme^='untitled-ui']` — atributo que ActiveEidos
|
|
* proyecta en `<html>`, así que:
|
|
* - solo aplica cuando el tema Untitled UI está activo (no contamina),
|
|
* - tiene mayor especificidad que el recipe base (gana sin `!important`),
|
|
* - alcanza también el contenido portaleado (select / menús / tooltip),
|
|
* que cuelga de `<body>` bajo el mismo `<html>`.
|
|
*/
|
|
|
|
[data-theme^='untitled-ui'] {
|
|
/* Anillo de foco lavanda de Untitled UI: usa el brand violeta (= rol
|
|
* secundario aquí), NO el color del control. Es la firma de UUI — un
|
|
* halo suave de 4px del brand, no un anillo del color del propio control. */
|
|
--uui-ring: 0 0 0 4px color-mix(in srgb, var(--color-secondary-solid) 24%, transparent);
|
|
--uui-ring-error: 0 0 0 4px color-mix(in srgb, var(--color-threat-solid) 24%, transparent);
|
|
/* Color de borde del control enfocado (brand violeta). */
|
|
--uui-focus-border: var(--color-secondary-border);
|
|
/* Sombra base de controles (Untitled UI shadow-xs). */
|
|
--uui-control-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.05);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'][data-mode='dark'] {
|
|
--uui-ring: 0 0 0 4px color-mix(in srgb, var(--color-secondary-solid) 40%, transparent);
|
|
--uui-ring-error: 0 0 0 4px color-mix(in srgb, var(--color-threat-solid) 40%, transparent);
|
|
--uui-control-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Text inputs (Field)
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-field-control] {
|
|
border-color: var(--color-border-default);
|
|
background: var(--color-surface-default);
|
|
box-shadow: var(--uui-control-shadow);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-field]:not([data-disabled]):not([data-readonly]) [data-field-control]:hover {
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-field-control]:focus-within {
|
|
border-color: var(--uui-focus-border);
|
|
box-shadow: var(--uui-control-shadow), var(--uui-ring);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-field][data-invalid] [data-field-control] {
|
|
border-color: var(--color-threat-border);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-field][data-invalid] [data-field-control]:focus-within {
|
|
box-shadow: var(--uui-control-shadow), var(--uui-ring-error);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-field-label] {
|
|
font-weight: 500;
|
|
color: var(--color-content-secondary);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-field-input]::placeholder {
|
|
color: var(--color-content-muted);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Select (trigger igual que un input, panel pulido)
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-select-trigger] {
|
|
border-color: var(--color-border-default);
|
|
background: var(--color-surface-default);
|
|
box-shadow: var(--uui-control-shadow);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-select-trigger]:hover:not(:disabled):not([data-disabled]) {
|
|
border-color: var(--color-border-strong);
|
|
background: var(--color-surface-default);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-select-trigger]:focus-visible,
|
|
[data-theme^='untitled-ui'] [data-select-trigger][data-state='open'] {
|
|
border-color: var(--uui-focus-border);
|
|
box-shadow: var(--uui-control-shadow), var(--uui-ring);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-select-content] {
|
|
border-color: var(--color-border-subtle);
|
|
box-shadow:
|
|
0 12px 16px -4px rgb(16 24 40 / 0.08),
|
|
0 4px 6px -2px rgb(16 24 40 / 0.03);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'][data-mode='dark'] [data-select-content] {
|
|
box-shadow:
|
|
0 12px 16px -4px rgb(0 0 0 / 0.5),
|
|
0 4px 6px -2px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-select-item] {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Buttons — sombra sutil + anillo real (Untitled UI usa halo, no outline)
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-button]:not([data-variant='ghost']):not([data-variant='plain']) {
|
|
box-shadow: var(--uui-control-shadow);
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-button][data-variant='outline'],
|
|
[data-theme^='untitled-ui'] [data-button][data-variant='surface'] {
|
|
border-color: var(--color-border-default);
|
|
color: var(--color-content-secondary);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-button][data-variant='outline']:hover:not([data-disabled]),
|
|
[data-theme^='untitled-ui'] [data-button][data-variant='surface']:hover:not([data-disabled]) {
|
|
background: var(--color-surface-muted);
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-button]:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--uui-control-shadow), var(--uui-ring);
|
|
}
|
|
|
|
/* (El texto sobre sólidos de color lo resuelve ahora el engine: el slot
|
|
* `contrast` por defecto mapea a `--color-content-on-solid`. Ver el fix en
|
|
* render-css.ts + THEMING.md. Antes había aquí un workaround forzando blanco.) */
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Switch — pista off gris claro + anillo de foco
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-switch]:not([data-state='checked']):not([data-disabled]) {
|
|
background: var(--color-surface-muted);
|
|
border-color: var(--color-border-default);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-switch]:focus-visible {
|
|
box-shadow: var(--uui-ring);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-switch-thumb] {
|
|
box-shadow:
|
|
0 1px 3px rgb(16 24 40 / 0.1),
|
|
0 1px 2px rgb(16 24 40 / 0.06);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Checkbox / Radio — anillo de foco coherente
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-checkbox]:focus-visible,
|
|
[data-theme^='untitled-ui'] [data-checkbox]:has(:focus-visible),
|
|
[data-theme^='untitled-ui'] [data-radio-group-item]:focus-visible,
|
|
[data-theme^='untitled-ui'] [data-radio-group-item]:has(:focus-visible) {
|
|
outline: none;
|
|
box-shadow: var(--uui-ring);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Tabs — foco coherente + indicador brand
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-tabs-trigger]:focus-visible {
|
|
box-shadow: var(--uui-ring);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] [data-tabs][data-variant='line'] [data-tabs-trigger][data-state='active'] {
|
|
color: var(--color-primary-text);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Accordion — foco
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-accordion-trigger]:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--uui-ring);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Menús portaleados (dropdown-menu / menubar / tooltip)
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] :is([data-dropdown-menu-content], [data-menubar-content], [data-context-menu-content]) {
|
|
border-color: var(--color-border-subtle);
|
|
box-shadow:
|
|
0 12px 16px -4px rgb(16 24 40 / 0.08),
|
|
0 4px 6px -2px rgb(16 24 40 / 0.03);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'][data-mode='dark'] :is([data-dropdown-menu-content], [data-menubar-content], [data-context-menu-content]) {
|
|
box-shadow:
|
|
0 12px 16px -4px rgb(0 0 0 / 0.5),
|
|
0 4px 6px -2px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'] :is([data-dropdown-menu-item], [data-menubar-item]):focus-visible,
|
|
[data-theme^='untitled-ui'] :is([data-dropdown-menu-item], [data-menubar-item])[data-highlighted] {
|
|
background: var(--color-surface-muted);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Card — borde gris-200 + sombra de Untitled UI
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-card] {
|
|
border: 1px solid var(--color-border-subtle);
|
|
box-shadow:
|
|
0 1px 3px rgb(16 24 40 / 0.1),
|
|
0 1px 2px -1px rgb(16 24 40 / 0.06);
|
|
}
|
|
|
|
[data-theme^='untitled-ui'][data-mode='dark'] [data-card] {
|
|
box-shadow:
|
|
0 1px 3px rgb(0 0 0 / 0.4),
|
|
0 1px 2px -1px rgb(0 0 0 / 0.4);
|
|
}
|
|
|
|
/* ════════════════════════════════════════════════════════════════════
|
|
* Badge — borde sutil del mismo tinte (firma de Untitled UI)
|
|
* ════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme^='untitled-ui'] [data-badge][data-variant='soft'] {
|
|
border-color: color-mix(in srgb, var(--_badge-solid) 24%, transparent);
|
|
}
|