|
|
|
|
/*
|
|
|
|
|
* Generated Eidos foundation CSS.
|
|
|
|
|
*
|
|
|
|
|
* Source: src/uix/eidos/lib/themes/base.ts
|
|
|
|
|
* Command: npm run generate:eidos-css
|
|
|
|
|
*
|
|
|
|
|
* Do not edit this file by hand.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--space-0: 0px;
|
|
|
|
|
--space-1: 4px;
|
|
|
|
|
--space-2: 8px;
|
|
|
|
|
--space-3: 12px;
|
|
|
|
|
--space-4: 16px;
|
|
|
|
|
--space-5: 20px;
|
|
|
|
|
--space-6: 24px;
|
|
|
|
|
--space-8: 32px;
|
|
|
|
|
--space-10: 40px;
|
|
|
|
|
--space-12: 48px;
|
|
|
|
|
--space-16: 64px;
|
|
|
|
|
--space-0-5: 2px;
|
|
|
|
|
--space-1-5: 6px;
|
|
|
|
|
--space-2-5: 10px;
|
|
|
|
|
--space-3-5: 14px;
|
|
|
|
|
--space-4-5: 18px;
|
|
|
|
|
--space-5-5: 22px;
|
|
|
|
|
--control-height-xxs: 22px;
|
|
|
|
|
--control-height-xs: 26px;
|
|
|
|
|
--control-height-sm: 30px;
|
|
|
|
|
--control-height-md: 36px;
|
|
|
|
|
--control-height-lg: 44px;
|
|
|
|
|
--control-height-xl: 52px;
|
|
|
|
|
--control-height-xxl: 60px;
|
|
|
|
|
--radius-none: 0px;
|
|
|
|
|
--radius-sm: 4px;
|
|
|
|
|
--radius-md: 6px;
|
|
|
|
|
--radius-lg: 10px;
|
|
|
|
|
--radius-xl: 16px;
|
|
|
|
|
--radius-xxl: 20px;
|
|
|
|
|
--radius-full: 9999px;
|
|
|
|
|
--border-width-none: 0px;
|
|
|
|
|
--border-width-hairline: 0.5px;
|
|
|
|
|
--border-width-thin: 1px;
|
|
|
|
|
--border-width-medium: 1.5px;
|
|
|
|
|
--border-width-thick: 2px;
|
|
|
|
|
--border-style-solid: solid;
|
|
|
|
|
--border-style-dashed: dashed;
|
|
|
|
|
--border-style-dotted: dotted;
|
|
|
|
|
--border-width: var(--border-width-thin);
|
|
|
|
|
--border-style: var(--border-style-solid);
|
|
|
|
|
--border: var(--border-width) var(--border-style) var(--color-border-default);
|
|
|
|
|
--focus-ring-offset: 1px;
|
|
|
|
|
--focus-ring-width: 2px;
|
|
|
|
|
--focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--focus-ring-error: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color-error);
|
|
|
|
|
--container-width-sm: 448px;
|
|
|
|
|
--container-width-md: 688px;
|
|
|
|
|
--container-width-lg: 880px;
|
|
|
|
|
--container-width-xl: 1136px;
|
|
|
|
|
--container-width-xxl: 1280px;
|
|
|
|
|
--container-width-full: none;
|
|
|
|
|
--container-padding-inline: var(--space-4);
|
|
|
|
|
--content-width-xs: 20rem;
|
|
|
|
|
--content-width-sm: 24rem;
|
|
|
|
|
--content-width-md: 32rem;
|
|
|
|
|
--content-width-lg: 42rem;
|
|
|
|
|
--content-width-xl: 56rem;
|
|
|
|
|
--content-width-xxl: 72rem;
|
|
|
|
|
--content-width-prose: 65ch;
|
|
|
|
|
--aspect-ratio-square: 1 / 1;
|
|
|
|
|
--aspect-ratio-portrait: 3 / 4;
|
|
|
|
|
--aspect-ratio-landscape: 4 / 3;
|
|
|
|
|
--aspect-ratio-video: 16 / 9;
|
|
|
|
|
--aspect-ratio-wide: 21 / 9;
|
|
|
|
|
--aspect-ratio-golden: 1.618 / 1;
|
|
|
|
|
--density-compact-scale: 0.92;
|
|
|
|
|
--density-comfortable-scale: 1;
|
|
|
|
|
--density-spacious-scale: 1.08;
|
|
|
|
|
--density-compact-space-scale: 0.84;
|
|
|
|
|
--density-comfortable-space-scale: 1;
|
|
|
|
|
--density-spacious-space-scale: 1.16;
|
|
|
|
|
--density-compact-control-scale: 0.9;
|
|
|
|
|
--density-comfortable-control-scale: 1;
|
|
|
|
|
--density-spacious-control-scale: 1.12;
|
|
|
|
|
--density-compact-content-scale: 0.96;
|
|
|
|
|
--density-comfortable-content-scale: 1;
|
|
|
|
|
--density-spacious-content-scale: 1.04;
|
|
|
|
|
--density-scale: var(--density-comfortable-scale);
|
|
|
|
|
--density-space-scale: var(--density-comfortable-space-scale);
|
|
|
|
|
--density-control-scale: var(--density-comfortable-control-scale);
|
|
|
|
|
--density-content-scale: var(--density-comfortable-content-scale);
|
|
|
|
|
--duration-instant: 0ms;
|
|
|
|
|
--duration-fast: 120ms;
|
|
|
|
|
--duration-normal: 180ms;
|
|
|
|
|
--duration-moderate: 240ms;
|
|
|
|
|
--duration-slow: 320ms;
|
|
|
|
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
|
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
|
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
|
--ease-alert: cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
|
|
|
|
--ease-symmetric: cubic-bezier(0.4, 0, 0.6, 1);
|
|
|
|
|
--motion-distance-xs: 2px;
|
|
|
|
|
--motion-distance-sm: 4px;
|
|
|
|
|
--motion-distance-md: 8px;
|
|
|
|
|
--motion-distance-lg: 16px;
|
|
|
|
|
--motion-scale-enter: 0.985;
|
|
|
|
|
--motion-scale-press: 0.97;
|
|
|
|
|
--motion-stagger: 20ms;
|
|
|
|
|
--icon-size-xxs: 12px;
|
|
|
|
|
--icon-size-xs: 14px;
|
|
|
|
|
--icon-size-sm: 16px;
|
|
|
|
|
--icon-size-md: 18px;
|
|
|
|
|
--icon-size-lg: 20px;
|
|
|
|
|
--icon-size-xl: 24px;
|
|
|
|
|
--icon-size-xxl: 48px;
|
|
|
|
|
--icon-stroke-width-sm: 1.25;
|
|
|
|
|
--icon-stroke-width-md: 1.5;
|
|
|
|
|
--icon-stroke-width-lg: 1.75;
|
|
|
|
|
--opacity-0: 0;
|
|
|
|
|
--opacity-muted: 0.72;
|
|
|
|
|
--opacity-disabled: 0.48;
|
|
|
|
|
--opacity-scrim: 0.42;
|
|
|
|
|
--opacity-overlay: 0.66;
|
|
|
|
|
--opacity-hover: 0.92;
|
|
|
|
|
--opacity-press: 0.84;
|
|
|
|
|
--opacity-full: 1;
|
|
|
|
|
--z-index-base: 0;
|
|
|
|
|
--z-index-raised: 1;
|
|
|
|
|
--z-index-sticky: 100;
|
|
|
|
|
--z-index-dropdown: 300;
|
|
|
|
|
--z-index-popover: 400;
|
|
|
|
|
--z-index-tooltip: 500;
|
|
|
|
|
--z-index-modal: 700;
|
|
|
|
|
--z-index-toast: 900;
|
|
|
|
|
--font-family-primary: 'Instrument Sans', system-ui, sans-serif;
|
|
|
|
|
--font-family-secondary: Lora, Georgia, 'Times New Roman', serif;
|
|
|
|
|
--font-family-mono: 'Azeret Mono', ui-monospace, monospace;
|
|
|
|
|
--font-family-display: Lora, Georgia, 'Times New Roman', serif;
|
|
|
|
|
--font-size-xxs: 10px;
|
|
|
|
|
--font-line-height-xxs: 1.5;
|
|
|
|
|
--font-letter-spacing-xxs: 0;
|
|
|
|
|
--font-size-xs: 12px;
|
|
|
|
|
--font-line-height-xs: 1.5;
|
|
|
|
|
--font-letter-spacing-xs: 0;
|
|
|
|
|
--font-size-sm: 14px;
|
|
|
|
|
--font-line-height-sm: 1.45;
|
|
|
|
|
--font-letter-spacing-sm: 0;
|
|
|
|
|
--font-size-md: 16px;
|
|
|
|
|
--font-line-height-md: 1.45;
|
|
|
|
|
--font-letter-spacing-md: 0;
|
|
|
|
|
--font-size-lg: 20px;
|
|
|
|
|
--font-line-height-lg: 1.35;
|
|
|
|
|
--font-letter-spacing-lg: 0;
|
|
|
|
|
--font-size-xl: 28px;
|
|
|
|
|
--font-line-height-xl: 1.2;
|
|
|
|
|
--font-letter-spacing-xl: 0;
|
|
|
|
|
--font-size-xxl: 48px;
|
|
|
|
|
--font-line-height-xxl: 1.05;
|
|
|
|
|
--font-letter-spacing-xxl: 0;
|
|
|
|
|
--font-size-xxxl: 80px;
|
|
|
|
|
--font-line-height-xxxl: 1;
|
|
|
|
|
--font-letter-spacing-xxxl: 0;
|
|
|
|
|
--font-weight-regular: 400;
|
|
|
|
|
--font-weight-medium: 500;
|
|
|
|
|
--font-weight-semibold: 600;
|
|
|
|
|
--font-weight-bold: 700;
|
feat(eidos foundation): emit --style-{name}-* tokens for named typography styles
`STATIC_TYPOGRAPHY.styles` already defined 11 named typography styles
(hero, h1..h6, body, prose, label, caption, code) but the renderer
only emitted families / sizes / weights — the style entries lived
as data with no CSS reflection.
Extend `appendTypographyDeclarations` so each named style emits:
- `--style-{name}-font-family` → `var(--font-family-{family})`
- `--style-{name}-font-size` → `var(--font-size-{size})`
- `--style-{name}-line-height` → literal or `var(--font-line-height-{size})`
- `--style-{name}-letter-spacing` → literal or `var(--font-letter-spacing-{size})`
- `--style-{name}-font-weight` → `var(--font-weight-{weight})` (or numeric)
- `--style-{name}-color` → `var(--color-{dot.path → dash-path})`
Responsive sizes (e.g. `hero.size = { base: 'xxl', md: 'xxxl' }`)
emit the base value into `:root` and per-breakpoint
`@media (min-width: …)` blocks that override the same variables.
Breakpoint thresholds match `$libs/dom/responsive` (sm: 480, md: 768,
lg: 1024, xl: 1280, xxl: 1536).
`renderStaticCss` now iterates `STYLE_BREAKPOINT_ORDER` after the
main `:root` block and appends one media-query block per breakpoint
that has at least one responsive override. The `indentBlock` helper
preserves indentation inside the wrapper.
`base.css` regenerated. svelte-check 0 errors, `npm run component:audit`
81 / 81 PASS unchanged. This is foundation-only; no components consume
the new tokens yet — that lands in the typography port (Text + Heading
+ Display + Code + CodeBlock + Kbd + Mark + Highlight + Link).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--style-hero-font-family: var(--font-family-display);
|
|
|
|
|
--style-hero-font-size: var(--font-size-xxl);
|
|
|
|
|
--style-hero-line-height: 1;
|
|
|
|
|
--style-hero-letter-spacing: 0;
|
|
|
|
|
--style-hero-font-weight: var(--font-weight-bold);
|
|
|
|
|
--style-hero-color: var(--color-content-primary);
|
|
|
|
|
--style-h1-font-family: var(--font-family-display);
|
|
|
|
|
--style-h1-font-size: var(--font-size-xl);
|
|
|
|
|
--style-h1-line-height: 1.05;
|
|
|
|
|
--style-h1-letter-spacing: 0;
|
|
|
|
|
--style-h1-font-weight: var(--font-weight-bold);
|
|
|
|
|
--style-h1-color: var(--color-content-primary);
|
|
|
|
|
--style-h2-font-family: var(--font-family-display);
|
|
|
|
|
--style-h2-font-size: var(--font-size-lg);
|
|
|
|
|
--style-h2-line-height: 1.1;
|
|
|
|
|
--style-h2-letter-spacing: 0;
|
|
|
|
|
--style-h2-font-weight: var(--font-weight-bold);
|
|
|
|
|
--style-h2-color: var(--color-content-primary);
|
|
|
|
|
--style-h3-font-family: var(--font-family-primary);
|
|
|
|
|
--style-h3-font-size: var(--font-size-lg);
|
|
|
|
|
--style-h3-line-height: 1.2;
|
|
|
|
|
--style-h3-letter-spacing: 0;
|
|
|
|
|
--style-h3-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--style-h3-color: var(--color-content-primary);
|
|
|
|
|
--style-h4-font-family: var(--font-family-primary);
|
|
|
|
|
--style-h4-font-size: var(--font-size-md);
|
|
|
|
|
--style-h4-line-height: 1.25;
|
|
|
|
|
--style-h4-letter-spacing: 0;
|
|
|
|
|
--style-h4-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--style-h4-color: var(--color-content-primary);
|
|
|
|
|
--style-h5-font-family: var(--font-family-primary);
|
|
|
|
|
--style-h5-font-size: var(--font-size-sm);
|
|
|
|
|
--style-h5-line-height: 1.3;
|
|
|
|
|
--style-h5-letter-spacing: 0;
|
|
|
|
|
--style-h5-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--style-h5-color: var(--color-content-primary);
|
|
|
|
|
--style-h6-font-family: var(--font-family-primary);
|
|
|
|
|
--style-h6-font-size: var(--font-size-xs);
|
|
|
|
|
--style-h6-line-height: 1.35;
|
|
|
|
|
--style-h6-letter-spacing: 0;
|
|
|
|
|
--style-h6-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--style-h6-color: var(--color-content-primary);
|
|
|
|
|
--style-body-font-family: var(--font-family-primary);
|
|
|
|
|
--style-body-font-size: var(--font-size-md);
|
|
|
|
|
--style-body-line-height: 1.55;
|
|
|
|
|
--style-body-letter-spacing: 0;
|
|
|
|
|
--style-body-font-weight: var(--font-weight-regular);
|
|
|
|
|
--style-body-color: var(--color-content-primary);
|
|
|
|
|
--style-prose-font-family: var(--font-family-secondary);
|
|
|
|
|
--style-prose-font-size: var(--font-size-md);
|
|
|
|
|
--style-prose-line-height: 1.65;
|
|
|
|
|
--style-prose-letter-spacing: 0;
|
|
|
|
|
--style-prose-font-weight: var(--font-weight-regular);
|
|
|
|
|
--style-prose-color: var(--color-content-primary);
|
|
|
|
|
--style-label-font-family: var(--font-family-primary);
|
|
|
|
|
--style-label-font-size: var(--font-size-sm);
|
|
|
|
|
--style-label-line-height: 1.25;
|
|
|
|
|
--style-label-letter-spacing: 0;
|
|
|
|
|
--style-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--style-label-color: var(--color-content-primary);
|
|
|
|
|
--style-caption-font-family: var(--font-family-primary);
|
|
|
|
|
--style-caption-font-size: var(--font-size-xs);
|
|
|
|
|
--style-caption-line-height: 1.35;
|
|
|
|
|
--style-caption-letter-spacing: 0;
|
|
|
|
|
--style-caption-font-weight: var(--font-weight-regular);
|
|
|
|
|
--style-caption-color: var(--color-content-secondary);
|
|
|
|
|
--style-code-font-family: var(--font-family-mono);
|
|
|
|
|
--style-code-font-size: var(--font-size-sm);
|
|
|
|
|
--style-code-line-height: 1.45;
|
|
|
|
|
--style-code-letter-spacing: 0;
|
|
|
|
|
--style-code-font-weight: var(--font-weight-regular);
|
|
|
|
|
--style-code-color: var(--color-content-primary);
|
|
|
|
|
--size-xxs-control-height: var(--control-height-xxs);
|
|
|
|
|
--size-xxs-font-size: var(--font-size-xxs);
|
|
|
|
|
--size-xxs-font-line-height: var(--font-line-height-xxs);
|
|
|
|
|
--size-xxs-font-letter-spacing: var(--font-letter-spacing-xxs);
|
|
|
|
|
--size-xxs-icon-size: var(--icon-size-xxs);
|
|
|
|
|
--size-xxs-padding-inline: var(--space-1);
|
|
|
|
|
--size-xxs-padding-block: var(--space-0-5);
|
|
|
|
|
--size-xxs-gap: var(--space-1);
|
|
|
|
|
--size-xxs-radius: var(--radius-sm);
|
|
|
|
|
--size-xs-control-height: var(--control-height-xs);
|
|
|
|
|
--size-xs-font-size: var(--font-size-xs);
|
|
|
|
|
--size-xs-font-line-height: var(--font-line-height-xs);
|
|
|
|
|
--size-xs-font-letter-spacing: var(--font-letter-spacing-xs);
|
|
|
|
|
--size-xs-icon-size: var(--icon-size-xs);
|
|
|
|
|
--size-xs-padding-inline: var(--space-1-5);
|
|
|
|
|
--size-xs-padding-block: var(--space-1);
|
|
|
|
|
--size-xs-gap: var(--space-1);
|
|
|
|
|
--size-xs-radius: var(--radius-sm);
|
|
|
|
|
--size-sm-control-height: var(--control-height-sm);
|
|
|
|
|
--size-sm-font-size: var(--font-size-sm);
|
|
|
|
|
--size-sm-font-line-height: var(--font-line-height-sm);
|
|
|
|
|
--size-sm-font-letter-spacing: var(--font-letter-spacing-sm);
|
|
|
|
|
--size-sm-icon-size: var(--icon-size-sm);
|
|
|
|
|
--size-sm-padding-inline: var(--space-2);
|
|
|
|
|
--size-sm-padding-block: var(--space-1);
|
|
|
|
|
--size-sm-gap: var(--space-1-5);
|
|
|
|
|
--size-sm-radius: var(--radius-md);
|
|
|
|
|
--size-md-control-height: var(--control-height-md);
|
|
|
|
|
--size-md-font-size: var(--font-size-sm);
|
|
|
|
|
--size-md-font-line-height: var(--font-line-height-sm);
|
|
|
|
|
--size-md-font-letter-spacing: var(--font-letter-spacing-sm);
|
|
|
|
|
--size-md-icon-size: var(--icon-size-md);
|
|
|
|
|
--size-md-padding-inline: var(--space-3);
|
|
|
|
|
--size-md-padding-block: var(--space-1-5);
|
|
|
|
|
--size-md-gap: var(--space-2);
|
|
|
|
|
--size-md-radius: var(--radius-md);
|
|
|
|
|
--size-lg-control-height: var(--control-height-lg);
|
|
|
|
|
--size-lg-font-size: var(--font-size-md);
|
|
|
|
|
--size-lg-font-line-height: var(--font-line-height-md);
|
|
|
|
|
--size-lg-font-letter-spacing: var(--font-letter-spacing-md);
|
|
|
|
|
--size-lg-icon-size: var(--icon-size-lg);
|
|
|
|
|
--size-lg-padding-inline: var(--space-4);
|
|
|
|
|
--size-lg-padding-block: var(--space-2);
|
|
|
|
|
--size-lg-gap: var(--space-2-5);
|
|
|
|
|
--size-lg-radius: var(--radius-lg);
|
|
|
|
|
--size-xl-control-height: var(--control-height-xl);
|
|
|
|
|
--size-xl-font-size: var(--font-size-lg);
|
|
|
|
|
--size-xl-font-line-height: var(--font-line-height-lg);
|
|
|
|
|
--size-xl-font-letter-spacing: var(--font-letter-spacing-lg);
|
|
|
|
|
--size-xl-icon-size: var(--icon-size-xl);
|
|
|
|
|
--size-xl-padding-inline: var(--space-5);
|
|
|
|
|
--size-xl-padding-block: var(--space-2-5);
|
|
|
|
|
--size-xl-gap: var(--space-3);
|
|
|
|
|
--size-xl-radius: var(--radius-xl);
|
|
|
|
|
--size-xxl-control-height: var(--control-height-xxl);
|
|
|
|
|
--size-xxl-font-size: var(--font-size-xl);
|
|
|
|
|
--size-xxl-font-line-height: var(--font-line-height-xl);
|
|
|
|
|
--size-xxl-font-letter-spacing: var(--font-letter-spacing-xl);
|
|
|
|
|
--size-xxl-icon-size: var(--icon-size-xxl);
|
|
|
|
|
--size-xxl-padding-inline: var(--space-6);
|
|
|
|
|
--size-xxl-padding-block: var(--space-3);
|
|
|
|
|
--size-xxl-gap: var(--space-4);
|
|
|
|
|
--size-xxl-radius: var(--radius-xxl);
|
|
|
|
|
--control-height-2xs: var(--control-height-xxs);
|
|
|
|
|
--radius-xs: var(--radius-sm);
|
|
|
|
|
--font-sans: var(--font-family-primary);
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--font-ui: var(--style-label-font-family, var(--font-family-primary));
|
|
|
|
|
--font-serif: var(--font-family-secondary);
|
|
|
|
|
--font-prose: var(--font-family-secondary);
|
|
|
|
|
--font-heading: var(--font-family-display);
|
|
|
|
|
--font-display: var(--font-family-display);
|
|
|
|
|
--font-mono: var(--font-family-mono);
|
|
|
|
|
--font-code: var(--font-family-mono);
|
|
|
|
|
--text-1-size: var(--font-size-xxs);
|
|
|
|
|
--text-1-lh: var(--font-line-height-xxs);
|
|
|
|
|
--text-1-ls: var(--font-letter-spacing-xxs);
|
|
|
|
|
--text-2-size: var(--font-size-xs);
|
|
|
|
|
--text-2-lh: var(--font-line-height-xs);
|
|
|
|
|
--text-2-ls: var(--font-letter-spacing-xs);
|
|
|
|
|
--text-3-size: var(--font-size-sm);
|
|
|
|
|
--text-3-lh: var(--font-line-height-sm);
|
|
|
|
|
--text-3-ls: var(--font-letter-spacing-sm);
|
|
|
|
|
--text-4-size: var(--font-size-md);
|
|
|
|
|
--text-4-lh: var(--font-line-height-md);
|
|
|
|
|
--text-4-ls: var(--font-letter-spacing-md);
|
|
|
|
|
--text-5-size: var(--font-size-lg);
|
|
|
|
|
--text-5-lh: var(--font-line-height-lg);
|
|
|
|
|
--text-5-ls: var(--font-letter-spacing-lg);
|
|
|
|
|
--text-6-size: var(--font-size-xl);
|
|
|
|
|
--text-6-lh: var(--font-line-height-xl);
|
|
|
|
|
--text-6-ls: var(--font-letter-spacing-xl);
|
|
|
|
|
--font-size-base: var(--font-size-md);
|
|
|
|
|
--font-size-2xl: var(--font-size-xxl);
|
|
|
|
|
--font-size-3xl: var(--font-size-xxxl);
|
|
|
|
|
--font-weight-normal: var(--font-weight-regular);
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--leading-ui: var(--style-label-line-height, 1.25);
|
|
|
|
|
--leading-prose: 1.6;
|
|
|
|
|
--leading-text: var(--leading-prose);
|
|
|
|
|
--leading-heading: 1.2;
|
|
|
|
|
--leading-display: 1.05;
|
|
|
|
|
--tracking-badge: 0;
|
|
|
|
|
--tracking-label: 0;
|
|
|
|
|
--tracking-ui: 0;
|
|
|
|
|
--tracking-prose: 0;
|
|
|
|
|
--tracking-heading: 0;
|
|
|
|
|
--tracking-display: 0;
|
|
|
|
|
--tracking-tight: 0;
|
|
|
|
|
--tracking-normal: 0;
|
|
|
|
|
--tracking-wide: 0;
|
|
|
|
|
--tracking-wider: 0;
|
|
|
|
|
--motion-spin-duration: 800ms;
|
|
|
|
|
--color-focus-ring: var(--focus-ring-color);
|
|
|
|
|
--accordion-provider-border-width: var(--border-width);
|
|
|
|
|
--accordion-provider-radius: var(--radius-lg);
|
|
|
|
|
--accordion-outline-provider-bg: var(--color-surface-default);
|
|
|
|
|
--accordion-outline-provider-border: var(--color-border-default);
|
|
|
|
|
--accordion-outline-item-border: var(--color-border-subtle);
|
|
|
|
|
--accordion-outline-content-bg: var(--color-surface-default);
|
|
|
|
|
--accordion-surface-provider-bg: var(--color-surface-raised);
|
|
|
|
|
--accordion-surface-provider-border: var(--color-border-subtle);
|
|
|
|
|
--accordion-surface-provider-shadow: var(--shadow-subtle);
|
|
|
|
|
--accordion-surface-item-border: var(--color-border-subtle);
|
|
|
|
|
--accordion-surface-content-bg: var(--color-surface-default);
|
|
|
|
|
--accordion-ghost-provider-bg: transparent;
|
|
|
|
|
--accordion-ghost-provider-border: transparent;
|
|
|
|
|
--accordion-ghost-item-border: var(--color-border-subtle);
|
|
|
|
|
--accordion-ghost-content-bg: transparent;
|
|
|
|
|
--accordion-item-border-width: var(--border-width);
|
|
|
|
|
--accordion-trigger-min-height-sm: var(--control-height-sm);
|
|
|
|
|
--accordion-trigger-min-height-md: var(--control-height-md);
|
|
|
|
|
--accordion-trigger-min-height-lg: var(--control-height-lg);
|
|
|
|
|
--accordion-trigger-min-height-full: var(--control-height-xl);
|
|
|
|
|
--accordion-trigger-px-sm: var(--space-3);
|
|
|
|
|
--accordion-trigger-px-md: var(--space-4);
|
|
|
|
|
--accordion-trigger-px-lg: var(--space-5);
|
|
|
|
|
--accordion-trigger-px-full: var(--space-6);
|
|
|
|
|
--accordion-trigger-py-sm: var(--space-2-5);
|
|
|
|
|
--accordion-trigger-py-md: var(--space-3);
|
|
|
|
|
--accordion-trigger-py-lg: var(--space-3-5);
|
|
|
|
|
--accordion-trigger-py-full: var(--space-4);
|
|
|
|
|
--accordion-trigger-gap: var(--space-3);
|
|
|
|
|
--accordion-trigger-font-family: var(--font-ui);
|
|
|
|
|
--accordion-trigger-font-size-sm: var(--text-3-size);
|
|
|
|
|
--accordion-trigger-font-size-md: var(--text-4-size);
|
|
|
|
|
--accordion-trigger-font-size-lg: var(--text-5-size);
|
|
|
|
|
--accordion-trigger-font-size-full: var(--text-6-size);
|
|
|
|
|
--accordion-trigger-font-weight: var(--font-weight-medium);
|
|
|
|
|
--accordion-trigger-line-height: var(--leading-ui);
|
|
|
|
|
--accordion-trigger-color: var(--color-content-primary);
|
|
|
|
|
--accordion-trigger-color-open: var(--color-content-primary);
|
|
|
|
|
--accordion-trigger-color-disabled: var(--color-content-disabled);
|
|
|
|
|
--accordion-trigger-hover-bg: var(--color-surface-raised);
|
|
|
|
|
--accordion-trigger-hover-color: var(--color-content-primary);
|
|
|
|
|
--accordion-trigger-transition-duration: var(--duration-fast);
|
|
|
|
|
--accordion-trigger-transition-ease: var(--ease-default);
|
|
|
|
|
--accordion-trigger-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--accordion-trigger-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--accordion-trigger-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--accordion-content-px-sm: var(--space-3);
|
|
|
|
|
--accordion-content-px-md: var(--space-4);
|
|
|
|
|
--accordion-content-px-lg: var(--space-5);
|
|
|
|
|
--accordion-content-px-full: var(--space-6);
|
|
|
|
|
--accordion-content-py-sm: var(--space-2-5);
|
|
|
|
|
--accordion-content-py-md: var(--space-3);
|
|
|
|
|
--accordion-content-py-lg: var(--space-4);
|
|
|
|
|
--accordion-content-py-full: var(--space-5);
|
|
|
|
|
--accordion-content-font-family: var(--font-prose);
|
|
|
|
|
--accordion-content-font-size: var(--text-4-size);
|
|
|
|
|
--accordion-content-line-height: var(--leading-prose);
|
|
|
|
|
--accordion-content-color: var(--color-content-secondary);
|
|
|
|
|
--accordion-content-open-duration: var(--duration-normal);
|
|
|
|
|
--accordion-content-close-duration: var(--duration-fast);
|
|
|
|
|
--accordion-content-open-ease: var(--ease-out);
|
|
|
|
|
--accordion-content-close-ease: var(--ease-in);
|
|
|
|
|
--accordion-indicator-size-sm: var(--icon-size-sm);
|
|
|
|
|
--accordion-indicator-size-md: var(--icon-size-sm);
|
|
|
|
|
--accordion-indicator-size-lg: var(--icon-size-md);
|
|
|
|
|
--accordion-indicator-color: var(--color-content-secondary);
|
|
|
|
|
--accordion-indicator-color-open: var(--color-content-primary);
|
|
|
|
|
--accordion-indicator-rotation: 180deg;
|
|
|
|
|
--accordion-indicator-transition-duration: var(--duration-fast);
|
|
|
|
|
--accordion-indicator-transition-ease: var(--ease-default);
|
|
|
|
|
--avatar-size-xs: 24px;
|
|
|
|
|
--avatar-size-sm: 32px;
|
|
|
|
|
--avatar-size-md: 40px;
|
|
|
|
|
--avatar-size-lg: 48px;
|
|
|
|
|
--avatar-size-xl: 64px;
|
|
|
|
|
--avatar-size-xxl: 96px;
|
|
|
|
|
--avatar-font-family: var(--font-ui);
|
|
|
|
|
--avatar-font-size-xs: 10px;
|
|
|
|
|
--avatar-font-size-sm: 12px;
|
|
|
|
|
--avatar-font-size-md: 14px;
|
|
|
|
|
--avatar-font-size-lg: 16px;
|
|
|
|
|
--avatar-font-size-xl: 20px;
|
|
|
|
|
--avatar-font-size-xxl: 28px;
|
|
|
|
|
--avatar-font-weight: var(--font-weight-medium);
|
|
|
|
|
--avatar-radius-full: var(--radius-full);
|
|
|
|
|
--avatar-radius-md: var(--radius-md);
|
|
|
|
|
--avatar-radius-sm: var(--radius-sm);
|
|
|
|
|
--avatar-radius-none: 0;
|
|
|
|
|
--avatar-border-width: 2px;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--avatar-primary-solid-bg: var(--color-primary-solid);
|
|
|
|
|
--avatar-primary-solid-fg: var(--color-primary-contrast);
|
|
|
|
|
--avatar-primary-soft-bg: var(--color-primary-track);
|
|
|
|
|
--avatar-primary-soft-fg: var(--color-primary-text);
|
|
|
|
|
--avatar-primary-outline-border: var(--color-primary-border);
|
|
|
|
|
--avatar-primary-outline-fg: var(--color-primary-text);
|
|
|
|
|
--avatar-secondary-solid-bg: var(--color-secondary-solid);
|
|
|
|
|
--avatar-secondary-solid-fg: var(--color-secondary-contrast);
|
|
|
|
|
--avatar-secondary-soft-bg: var(--color-secondary-track);
|
|
|
|
|
--avatar-secondary-soft-fg: var(--color-secondary-text);
|
|
|
|
|
--avatar-secondary-outline-border: var(--color-secondary-border);
|
|
|
|
|
--avatar-secondary-outline-fg: var(--color-secondary-text);
|
|
|
|
|
--avatar-neutral-solid-bg: var(--color-neutral-solid);
|
|
|
|
|
--avatar-neutral-solid-fg: var(--color-surface-default);
|
|
|
|
|
--avatar-neutral-soft-bg: var(--color-neutral-track);
|
|
|
|
|
--avatar-neutral-soft-fg: var(--color-neutral-text);
|
|
|
|
|
--avatar-neutral-outline-border: var(--color-neutral-border);
|
|
|
|
|
--avatar-neutral-outline-fg: var(--color-neutral-text);
|
|
|
|
|
--avatar-affirm-solid-bg: var(--color-affirm-solid);
|
|
|
|
|
--avatar-affirm-solid-fg: var(--color-affirm-contrast);
|
|
|
|
|
--avatar-affirm-soft-bg: var(--color-affirm-track);
|
|
|
|
|
--avatar-affirm-soft-fg: var(--color-affirm-text);
|
|
|
|
|
--avatar-affirm-outline-border: var(--color-affirm-border);
|
|
|
|
|
--avatar-affirm-outline-fg: var(--color-affirm-text);
|
|
|
|
|
--avatar-fulfill-solid-bg: var(--color-fulfill-solid);
|
|
|
|
|
--avatar-fulfill-solid-fg: var(--color-fulfill-contrast);
|
|
|
|
|
--avatar-fulfill-soft-bg: var(--color-fulfill-track);
|
|
|
|
|
--avatar-fulfill-soft-fg: var(--color-fulfill-text);
|
|
|
|
|
--avatar-fulfill-outline-border: var(--color-fulfill-border);
|
|
|
|
|
--avatar-fulfill-outline-fg: var(--color-fulfill-text);
|
|
|
|
|
--avatar-risk-solid-bg: var(--color-risk-solid);
|
|
|
|
|
--avatar-risk-solid-fg: var(--color-risk-contrast);
|
|
|
|
|
--avatar-risk-soft-bg: var(--color-risk-track);
|
|
|
|
|
--avatar-risk-soft-fg: var(--color-risk-text);
|
|
|
|
|
--avatar-risk-outline-border: var(--color-risk-border);
|
|
|
|
|
--avatar-risk-outline-fg: var(--color-risk-text);
|
|
|
|
|
--avatar-threat-solid-bg: var(--color-threat-solid);
|
|
|
|
|
--avatar-threat-solid-fg: var(--color-threat-contrast);
|
|
|
|
|
--avatar-threat-soft-bg: var(--color-threat-track);
|
|
|
|
|
--avatar-threat-soft-fg: var(--color-threat-text);
|
|
|
|
|
--avatar-threat-outline-border: var(--color-threat-border);
|
|
|
|
|
--avatar-threat-outline-fg: var(--color-threat-text);
|
|
|
|
|
--avatar-loss-solid-bg: var(--color-loss-solid);
|
|
|
|
|
--avatar-loss-solid-fg: var(--color-loss-contrast);
|
|
|
|
|
--avatar-loss-soft-bg: var(--color-loss-track);
|
|
|
|
|
--avatar-loss-soft-fg: var(--color-loss-text);
|
|
|
|
|
--avatar-loss-outline-border: var(--color-loss-border);
|
|
|
|
|
--avatar-loss-outline-fg: var(--color-loss-text);
|
feat(eidos): Card, Avatar ext, Image, SText, Badge, service components + dates engine fixes
Sprint completo:
- Card (eidos + sema): elevation/intent/interactive, eventos select+activate.
- Avatar: ring, AvatarBadge, AvatarGroup separados; demo Avatar standalone.
- Image: status surface (idle/loading/loaded/error) consumiendo soma ImageProvider.
- SText + STextVirtualList: canvas-text engine portado de morfo-driven-soma como
componentes separados para optimizar bundle (no se importa canvas si no se usa).
- Badge: primitivo eidos puro.
- Trans, FormatNumber, FormatDate, RelativeTime: 4 service components greppables
alrededor de uix.langs y uix.format. Nav group "Utilities".
Bugs fix arts/format/dates (engine-dates.ts):
1. Preset / per-axis conflict: Intl.DateTimeFormat rechaza dateStyle/timeStyle
con cualquier per-axis (weekday/era/year/month/day/dayPeriod/hour/minute/
second/fractionalSecondDigits) o con timeZoneName. Engine drop-ea ambos
presets por defecto cuando detecta conflict (regla estricta — un solo
per-axis hace ilegales los dos presets).
2. Per-call locale override: formatDate/Time/DateTime aceptan tercer arg
locale?: string. No muta engine state. Cache (getCachedDateFormat) keyea
por (locale x options). resolveCallHourCycle: cuando hay locale override
y pref auto, el ciclo horario se resuelve desde el locale OVERRIDE.
3. withHourCycle precedence: caller hourCycle/hour12 ahora gana sobre
preferencia del engine. Antes spread mal ordenado sobrescribia 'h12' del
caller con 'h23' del engine cuando locale resolvia a 24h.
FormatDate component vuelve a rutear siempre por uix.format.dates
(cache + hourCycle + locale reactivo), pasando locale como tercer arg.
Demos service components autonomos del toolbar global: cada uno owns su
demoLocale state con 7 chips (es-ES/en-US/en-GB/de-DE/fr-FR/ja-JP/ar-EG).
FormatDate stage filtra dateStyle/timeStyle por mode + chip hourCycle anadido.
Tests: 14/14 passing en engine-dates.test.ts (+6 nuevos: conflict handling,
locale override, hourCycle precedence).
Docs: arts/format/README.md (handoff 2026-05-25 con las 3 reglas),
README.md por service component, project_service_components_sprint_2026-05-25.md,
feedback_service_demos_own_locale.md (pattern reusable).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--avatar-ring-width-sm: 1.5px;
|
|
|
|
|
--avatar-ring-width-md: 2px;
|
|
|
|
|
--avatar-ring-width-lg: 3px;
|
|
|
|
|
--avatar-color-custom: currentColor;
|
|
|
|
|
--avatar-color-custom-contrast: white;
|
|
|
|
|
--avatar-ring-color-custom: currentColor;
|
|
|
|
|
--avatar-badge-border-width: 2px;
|
|
|
|
|
--avatar-badge-color-custom: currentColor;
|
|
|
|
|
--avatar-badge-color-custom-contrast: white;
|
|
|
|
|
--avatar-group-gap-xs: var(--space-1);
|
|
|
|
|
--avatar-group-gap-sm: var(--space-2);
|
|
|
|
|
--avatar-group-gap-md: var(--space-3);
|
|
|
|
|
--avatar-group-gap-lg: var(--space-4);
|
|
|
|
|
--avatar-group-overlap: -0.6em;
|
|
|
|
|
--avatar-group-carve-width: 2px;
|
|
|
|
|
--avatar-group-carve-color: var(--color-surface-default);
|
|
|
|
|
--avatar-group-reverse-z-max: 20;
|
|
|
|
|
--avatar-group-max: 99;
|
|
|
|
|
--avatar-overflow-font-weight: var(--font-weight-medium);
|
|
|
|
|
--badge-px-xs: var(--space-1-5);
|
|
|
|
|
--badge-px-sm: var(--space-2);
|
|
|
|
|
--badge-px-md: var(--space-2-5);
|
|
|
|
|
--badge-px-lg: var(--space-3);
|
|
|
|
|
--badge-py-xs: var(--space-0-5);
|
|
|
|
|
--badge-py-sm: var(--space-0-5);
|
|
|
|
|
--badge-py-md: var(--space-1);
|
|
|
|
|
--badge-py-lg: var(--space-1-5);
|
|
|
|
|
--badge-gap-xs: var(--space-1);
|
|
|
|
|
--badge-gap-sm: var(--space-1);
|
|
|
|
|
--badge-gap-md: var(--space-1-5);
|
|
|
|
|
--badge-gap-lg: var(--space-2);
|
|
|
|
|
--badge-font-family: var(--font-ui);
|
|
|
|
|
--badge-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--badge-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--badge-font-size-md: var(--font-size-sm);
|
|
|
|
|
--badge-font-size-lg: var(--font-size-md);
|
|
|
|
|
--badge-font-weight: var(--font-weight-medium);
|
|
|
|
|
--badge-line-height: var(--leading-ui);
|
|
|
|
|
--badge-letter-spacing: 0.01em;
|
|
|
|
|
--badge-border-width: var(--border-width);
|
|
|
|
|
--badge-radius-sm: var(--radius-sm);
|
|
|
|
|
--badge-radius-md: var(--radius-md);
|
|
|
|
|
--badge-radius-lg: var(--radius-lg);
|
|
|
|
|
--badge-radius-full: var(--radius-full);
|
|
|
|
|
--badge-dot-size: 0.5em;
|
|
|
|
|
--badge-icon-size: 1em;
|
|
|
|
|
--badge-remove-size: 1.25em;
|
|
|
|
|
--badge-remove-margin-start: 0.125em;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--badge-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--badge-primary-text: var(--color-primary-text);
|
|
|
|
|
--badge-primary-contrast: var(--color-primary-contrast);
|
|
|
|
|
--badge-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--badge-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--badge-secondary-contrast: var(--color-secondary-contrast);
|
|
|
|
|
--badge-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--badge-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--badge-neutral-contrast: var(--color-surface-default);
|
|
|
|
|
--badge-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--badge-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--badge-affirm-contrast: var(--color-affirm-contrast);
|
|
|
|
|
--badge-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--badge-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--badge-fulfill-solid: var(--color-fulfill-solid);
|
|
|
|
|
--badge-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--badge-fulfill-contrast: var(--color-fulfill-contrast);
|
|
|
|
|
--badge-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--badge-risk-text: var(--color-risk-text);
|
|
|
|
|
--badge-risk-contrast: var(--color-risk-contrast);
|
|
|
|
|
--badge-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--badge-threat-text: var(--color-threat-text);
|
|
|
|
|
--badge-threat-contrast: var(--color-threat-contrast);
|
|
|
|
|
--badge-loss-track: var(--color-loss-track);
|
|
|
|
|
--badge-loss-border: var(--color-loss-border);
|
|
|
|
|
--badge-loss-solid: var(--color-loss-solid);
|
|
|
|
|
--badge-loss-text: var(--color-loss-text);
|
|
|
|
|
--badge-loss-contrast: var(--color-loss-contrast);
|
|
|
|
|
--badge-primary-track: var(--color-primary-track);
|
|
|
|
|
--badge-primary-border: var(--color-primary-border);
|
|
|
|
|
--badge-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--badge-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--badge-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--badge-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--badge-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--badge-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--badge-risk-track: var(--color-risk-track);
|
|
|
|
|
--badge-risk-border: var(--color-risk-border);
|
|
|
|
|
--badge-threat-track: var(--color-threat-track);
|
|
|
|
|
--badge-threat-border: var(--color-threat-border);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--breadcrumb-gap-xs: var(--space-0-5);
|
|
|
|
|
--breadcrumb-gap-sm: var(--space-1);
|
|
|
|
|
--breadcrumb-gap-md: var(--space-1-5);
|
|
|
|
|
--breadcrumb-gap-lg: var(--space-2);
|
|
|
|
|
--breadcrumb-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--breadcrumb-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--breadcrumb-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--breadcrumb-font-size-md: var(--font-size-sm);
|
|
|
|
|
--breadcrumb-font-size-lg: var(--font-size-md);
|
|
|
|
|
--breadcrumb-line-height: var(--leading-ui);
|
|
|
|
|
--breadcrumb-color: var(--color-content-secondary);
|
|
|
|
|
--breadcrumb-link-radius: var(--radius-sm);
|
|
|
|
|
--breadcrumb-link-color: var(--color-content-secondary);
|
|
|
|
|
--breadcrumb-link-color-hover: var(--color-content-primary);
|
|
|
|
|
--breadcrumb-link-color-current: var(--color-content-primary);
|
|
|
|
|
--breadcrumb-link-font-weight: var(--font-weight-medium);
|
|
|
|
|
--breadcrumb-link-font-weight-current: var(--font-weight-semibold);
|
|
|
|
|
--breadcrumb-separator-color: var(--color-content-muted);
|
|
|
|
|
--breadcrumb-ellipsis-size: var(--control-height-xs);
|
|
|
|
|
--breadcrumb-ellipsis-radius: var(--radius-md);
|
|
|
|
|
--breadcrumb-ellipsis-border-width: var(--border-width);
|
|
|
|
|
--breadcrumb-ellipsis-border: transparent;
|
|
|
|
|
--breadcrumb-ellipsis-border-hover: var(--color-border-subtle);
|
|
|
|
|
--breadcrumb-ellipsis-bg: transparent;
|
|
|
|
|
--breadcrumb-ellipsis-bg-hover: var(--color-surface-raised);
|
|
|
|
|
--breadcrumb-ellipsis-color: var(--color-content-muted);
|
|
|
|
|
--breadcrumb-ellipsis-color-hover: var(--color-content-primary);
|
|
|
|
|
--breadcrumb-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--breadcrumb-transition-duration: var(--duration-fast);
|
|
|
|
|
--breadcrumb-transition-ease: var(--ease-default);
|
feat(eidos): Card, Avatar ext, Image, SText, Badge, service components + dates engine fixes
Sprint completo:
- Card (eidos + sema): elevation/intent/interactive, eventos select+activate.
- Avatar: ring, AvatarBadge, AvatarGroup separados; demo Avatar standalone.
- Image: status surface (idle/loading/loaded/error) consumiendo soma ImageProvider.
- SText + STextVirtualList: canvas-text engine portado de morfo-driven-soma como
componentes separados para optimizar bundle (no se importa canvas si no se usa).
- Badge: primitivo eidos puro.
- Trans, FormatNumber, FormatDate, RelativeTime: 4 service components greppables
alrededor de uix.langs y uix.format. Nav group "Utilities".
Bugs fix arts/format/dates (engine-dates.ts):
1. Preset / per-axis conflict: Intl.DateTimeFormat rechaza dateStyle/timeStyle
con cualquier per-axis (weekday/era/year/month/day/dayPeriod/hour/minute/
second/fractionalSecondDigits) o con timeZoneName. Engine drop-ea ambos
presets por defecto cuando detecta conflict (regla estricta — un solo
per-axis hace ilegales los dos presets).
2. Per-call locale override: formatDate/Time/DateTime aceptan tercer arg
locale?: string. No muta engine state. Cache (getCachedDateFormat) keyea
por (locale x options). resolveCallHourCycle: cuando hay locale override
y pref auto, el ciclo horario se resuelve desde el locale OVERRIDE.
3. withHourCycle precedence: caller hourCycle/hour12 ahora gana sobre
preferencia del engine. Antes spread mal ordenado sobrescribia 'h12' del
caller con 'h23' del engine cuando locale resolvia a 24h.
FormatDate component vuelve a rutear siempre por uix.format.dates
(cache + hourCycle + locale reactivo), pasando locale como tercer arg.
Demos service components autonomos del toolbar global: cada uno owns su
demoLocale state con 7 chips (es-ES/en-US/en-GB/de-DE/fr-FR/ja-JP/ar-EG).
FormatDate stage filtra dateStyle/timeStyle por mode + chip hourCycle anadido.
Tests: 14/14 passing en engine-dates.test.ts (+6 nuevos: conflict handling,
locale override, hourCycle precedence).
Docs: arts/format/README.md (handoff 2026-05-25 con las 3 reglas),
README.md por service component, project_service_components_sprint_2026-05-25.md,
feedback_service_demos_own_locale.md (pattern reusable).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--card-px-xs: var(--space-3);
|
|
|
|
|
--card-px-sm: var(--space-4);
|
|
|
|
|
--card-px-md: var(--space-5);
|
|
|
|
|
--card-px-lg: var(--space-6);
|
|
|
|
|
--card-px-xl: var(--space-8);
|
|
|
|
|
--card-py-xs: var(--space-3);
|
|
|
|
|
--card-py-sm: var(--space-4);
|
|
|
|
|
--card-py-md: var(--space-5);
|
|
|
|
|
--card-py-lg: var(--space-6);
|
|
|
|
|
--card-py-xl: var(--space-8);
|
|
|
|
|
--card-gap-xs: var(--space-2);
|
|
|
|
|
--card-gap-sm: var(--space-3);
|
|
|
|
|
--card-gap-md: var(--space-4);
|
|
|
|
|
--card-gap-lg: var(--space-5);
|
|
|
|
|
--card-gap-xl: var(--space-6);
|
|
|
|
|
--card-font-family: var(--font-ui);
|
|
|
|
|
--card-line-height: var(--leading-ui);
|
|
|
|
|
--card-title-font-family: var(--font-heading);
|
|
|
|
|
--card-title-font-size-xs: var(--font-size-sm);
|
|
|
|
|
--card-title-font-size-sm: var(--font-size-md);
|
|
|
|
|
--card-title-font-size-md: var(--font-size-lg);
|
|
|
|
|
--card-title-font-size-lg: var(--font-size-xl);
|
|
|
|
|
--card-title-font-size-xl: var(--font-size-2xl);
|
|
|
|
|
--card-title-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--card-title-line-height: var(--leading-heading);
|
|
|
|
|
--card-title-letter-spacing: var(--tracking-tight);
|
|
|
|
|
--card-description-font-family: var(--font-ui);
|
|
|
|
|
--card-description-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--card-description-font-size-sm: var(--font-size-sm);
|
|
|
|
|
--card-description-font-size-md: var(--font-size-sm);
|
|
|
|
|
--card-description-font-size-lg: var(--font-size-md);
|
|
|
|
|
--card-description-font-size-xl: var(--font-size-md);
|
|
|
|
|
--card-description-line-height: var(--leading-prose);
|
|
|
|
|
--card-description-color: var(--color-content-secondary);
|
|
|
|
|
--card-body-font-size-xs: var(--font-size-sm);
|
|
|
|
|
--card-body-font-size-sm: var(--font-size-sm);
|
|
|
|
|
--card-body-font-size-md: var(--font-size-md);
|
|
|
|
|
--card-body-font-size-lg: var(--font-size-md);
|
|
|
|
|
--card-body-font-size-xl: var(--font-size-lg);
|
|
|
|
|
--card-body-line-height: var(--leading-prose);
|
|
|
|
|
--card-border-width: var(--border-width);
|
|
|
|
|
--card-radius-sm: var(--radius-md);
|
|
|
|
|
--card-radius-md: var(--radius-lg);
|
|
|
|
|
--card-radius-lg: var(--radius-xl);
|
|
|
|
|
--card-header-gap: var(--space-1-5);
|
|
|
|
|
--card-footer-gap: var(--space-3);
|
|
|
|
|
--card-footer-padding-start: var(--space-3);
|
|
|
|
|
--card-footer-border-color: var(--color-border-subtle);
|
|
|
|
|
--card-emerge-duration: 320ms;
|
|
|
|
|
--card-emerge-ease: var(--ease-out);
|
|
|
|
|
--card-emerge-distance: 8px;
|
|
|
|
|
--card-hover-lift: -2px;
|
|
|
|
|
--card-hover-shadow: var(--shadow-overlay);
|
|
|
|
|
--card-press-scale: 0.985;
|
|
|
|
|
--card-press-duration: 80ms;
|
|
|
|
|
--card-selected-ring-width: 2px;
|
|
|
|
|
--card-disabled-opacity: 0.6;
|
|
|
|
|
--card-color-custom: currentColor;
|
|
|
|
|
--card-color-custom-contrast: white;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--card-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--card-primary-text: var(--color-primary-text);
|
|
|
|
|
--card-primary-contrast: var(--color-primary-contrast);
|
|
|
|
|
--card-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--card-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--card-secondary-contrast: var(--color-secondary-contrast);
|
|
|
|
|
--card-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--card-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--card-neutral-contrast: var(--color-surface-default);
|
|
|
|
|
--card-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--card-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--card-affirm-contrast: var(--color-affirm-contrast);
|
|
|
|
|
--card-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--card-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--card-fulfill-solid: var(--color-fulfill-solid);
|
|
|
|
|
--card-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--card-fulfill-contrast: var(--color-fulfill-contrast);
|
|
|
|
|
--card-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--card-risk-text: var(--color-risk-text);
|
|
|
|
|
--card-risk-contrast: var(--color-risk-contrast);
|
|
|
|
|
--card-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--card-threat-text: var(--color-threat-text);
|
|
|
|
|
--card-threat-contrast: var(--color-threat-contrast);
|
|
|
|
|
--card-loss-track: var(--color-loss-track);
|
|
|
|
|
--card-loss-border: var(--color-loss-border);
|
|
|
|
|
--card-loss-solid: var(--color-loss-solid);
|
|
|
|
|
--card-loss-text: var(--color-loss-text);
|
|
|
|
|
--card-loss-contrast: var(--color-loss-contrast);
|
|
|
|
|
--card-primary-track: var(--color-primary-track);
|
|
|
|
|
--card-primary-border: var(--color-primary-border);
|
|
|
|
|
--card-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--card-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--card-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--card-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--card-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--card-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--card-risk-track: var(--color-risk-track);
|
|
|
|
|
--card-risk-border: var(--color-risk-border);
|
|
|
|
|
--card-threat-track: var(--color-threat-track);
|
|
|
|
|
--card-threat-border: var(--color-threat-border);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--checkbox-size-xs-box-size: 14px;
|
|
|
|
|
--checkbox-size-xs-indicator-size: 8px;
|
|
|
|
|
--checkbox-size-xs-indicator-stroke: 2px;
|
|
|
|
|
--checkbox-size-sm-box-size: 16px;
|
|
|
|
|
--checkbox-size-sm-indicator-size: 10px;
|
|
|
|
|
--checkbox-size-sm-indicator-stroke: 2px;
|
|
|
|
|
--checkbox-size-md-box-size: 18px;
|
|
|
|
|
--checkbox-size-md-indicator-size: 12px;
|
|
|
|
|
--checkbox-size-md-indicator-stroke: 2px;
|
|
|
|
|
--checkbox-size-lg-box-size: 22px;
|
|
|
|
|
--checkbox-size-lg-indicator-size: 14px;
|
|
|
|
|
--checkbox-size-lg-indicator-stroke: 2px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--checkbox-size-xl-box-size: 26px;
|
|
|
|
|
--checkbox-size-xl-indicator-size: 16px;
|
|
|
|
|
--checkbox-size-xl-indicator-stroke: 2px;
|
|
|
|
|
--checkbox-radius: var(--radius-sm);
|
|
|
|
|
--checkbox-border-width: var(--border-width);
|
|
|
|
|
--checkbox-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--checkbox-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--checkbox-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--checkbox-focus-ring-surface: var(--color-surface-default);
|
|
|
|
|
--checkbox-focus-ring: 0 0 0 var(--checkbox-focus-ring-offset) var(--checkbox-focus-ring-surface), 0 0 0 calc(var(--checkbox-focus-ring-offset) + var(--checkbox-focus-ring-width)) var(--checkbox-focus-ring-color);
|
|
|
|
|
--checkbox-transition-duration: var(--duration-fast);
|
|
|
|
|
--checkbox-transition-ease: var(--ease-default);
|
|
|
|
|
--checkbox-stroke-duration: 220ms;
|
|
|
|
|
--checkbox-stroke-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
--checkbox-bg-off: var(--color-surface-default);
|
|
|
|
|
--checkbox-bg-off-hover: color-mix( in srgb, var(--color-surface-default) 82%, var(--color-surface-overlay) );
|
|
|
|
|
--checkbox-border-off: var(--color-border-default);
|
|
|
|
|
--checkbox-border-off-hover: var(--color-border-strong);
|
|
|
|
|
--checkbox-bg-disabled: color-mix( in srgb, var(--color-surface-overlay) 78%, var(--color-surface-default) );
|
|
|
|
|
--checkbox-border-disabled: color-mix( in srgb, var(--color-border-default) 72%, var(--color-border-subtle) );
|
|
|
|
|
--checkbox-disabled-opacity: 0.72;
|
|
|
|
|
--checkbox-indicator-color: var(--color-content-on-solid);
|
|
|
|
|
--checkbox-indicator-color-disabled: color-mix( in srgb, var(--color-content-on-solid) 82%, var(--color-surface-default) );
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--checkbox-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--checkbox-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--checkbox-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--checkbox-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--checkbox-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--checkbox-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--checkbox-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--checkbox-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--checkbox-group-gap: var(--space-3);
|
|
|
|
|
--checkbox-group-label-font-family: var(--font-ui);
|
|
|
|
|
--checkbox-group-label-font-size: var(--font-size-sm);
|
|
|
|
|
--checkbox-group-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--checkbox-group-label-line-height: var(--leading-ui);
|
|
|
|
|
--checkbox-group-label-color: var(--color-content-primary);
|
|
|
|
|
--checkbox-group-label-color-disabled: var(--color-content-secondary);
|
|
|
|
|
--collapsible-trigger-font-family: var(--font-ui);
|
|
|
|
|
--collapsible-trigger-font-size: var(--font-size-sm);
|
|
|
|
|
--collapsible-trigger-font-weight: var(--font-weight-medium);
|
|
|
|
|
--collapsible-trigger-color: var(--color-content-primary);
|
|
|
|
|
--collapsible-trigger-color-hover: var(--color-content-primary);
|
|
|
|
|
--collapsible-trigger-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--collapsible-trigger-radius: var(--radius-sm);
|
|
|
|
|
--collapsible-trigger-padding: var(--space-2) var(--space-3);
|
|
|
|
|
--collapsible-content-padding: var(--space-3);
|
|
|
|
|
--collapsible-transition-duration: var(--duration-normal);
|
|
|
|
|
--collapsible-transition-ease: var(--ease-default);
|
|
|
|
|
--collapsible-disabled-opacity: 0.5;
|
|
|
|
|
--dialog-trigger-font-size: var(--font-size-sm);
|
|
|
|
|
--dialog-overlay-bg: var(--color-overlay);
|
|
|
|
|
--dialog-overlay-opacity: 62%;
|
|
|
|
|
--dialog-overlay-blur: 10px;
|
|
|
|
|
--dialog-overlay-z: 70;
|
|
|
|
|
--dialog-overlay-in-duration: 120ms;
|
|
|
|
|
--dialog-overlay-out-duration: 280ms;
|
|
|
|
|
--dialog-content-bg: var(--color-surface-overlay);
|
|
|
|
|
--dialog-content-color: var(--color-content-primary);
|
|
|
|
|
--dialog-content-border: var(--color-border-default);
|
|
|
|
|
--dialog-content-border-width: var(--border-width);
|
|
|
|
|
--dialog-content-radius: var(--radius-xl);
|
|
|
|
|
--dialog-content-shadow: var(--shadow-overlay);
|
|
|
|
|
--dialog-content-max-height: calc(100dvh - var(--space-8));
|
|
|
|
|
--dialog-content-max-height-sheet: 85dvh;
|
|
|
|
|
--dialog-content-width-sm: 420px;
|
|
|
|
|
--dialog-content-width-md: 560px;
|
|
|
|
|
--dialog-content-width-lg: 760px;
|
|
|
|
|
--dialog-content-width-xl: 1024px;
|
|
|
|
|
--dialog-content-width-inset: var(--space-6);
|
|
|
|
|
--dialog-content-full-inset: var(--space-3);
|
|
|
|
|
--dialog-content-full-radius: var(--radius-xxl);
|
|
|
|
|
--dialog-content-position-inset: var(--space-4);
|
|
|
|
|
--dialog-content-padding-sm: var(--space-4);
|
|
|
|
|
--dialog-content-padding-md: var(--space-5);
|
|
|
|
|
--dialog-content-padding-lg: var(--space-6);
|
|
|
|
|
--dialog-content-padding-full: var(--space-6);
|
|
|
|
|
--dialog-stack-gap: var(--space-4);
|
|
|
|
|
--dialog-header-gap: var(--space-3);
|
|
|
|
|
--dialog-footer-gap: var(--space-3);
|
|
|
|
|
--dialog-footer-margin-top: var(--space-2);
|
|
|
|
|
--dialog-title-font-family: var(--font-heading);
|
|
|
|
|
--dialog-title-font-size: var(--font-size-lg);
|
|
|
|
|
--dialog-title-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--dialog-title-line-height: var(--leading-heading);
|
|
|
|
|
--dialog-title-color: var(--color-content-primary);
|
|
|
|
|
--dialog-description-font-family: var(--font-ui);
|
|
|
|
|
--dialog-description-font-size: var(--font-size-sm);
|
|
|
|
|
--dialog-description-line-height: var(--leading-ui);
|
|
|
|
|
--dialog-description-color: var(--color-content-secondary);
|
|
|
|
|
--dialog-close-size: var(--control-height-sm);
|
|
|
|
|
--dialog-close-px: var(--space-2);
|
|
|
|
|
--dialog-close-radius: var(--radius-md);
|
|
|
|
|
--dialog-close-inset: var(--space-3);
|
|
|
|
|
--dialog-close-bg: transparent;
|
|
|
|
|
--dialog-close-bg-hover: color-mix(in srgb, var(--color-neutral-track) 72%, transparent);
|
|
|
|
|
--dialog-close-color: var(--color-content-secondary);
|
|
|
|
|
--dialog-close-color-hover: var(--color-content-primary);
|
|
|
|
|
--dialog-close-border: transparent;
|
|
|
|
|
--dialog-close-border-width: var(--border-width);
|
|
|
|
|
--dialog-close-transition-duration: var(--duration-fast);
|
|
|
|
|
--dialog-close-transition-ease: var(--ease-default);
|
|
|
|
|
--dialog-close-focus-ring-offset: 1px;
|
|
|
|
|
--dialog-close-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--dialog-close-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--field-gap-xs: var(--space-1);
|
|
|
|
|
--field-gap-sm: var(--space-1-5);
|
|
|
|
|
--field-gap-md: var(--space-2);
|
|
|
|
|
--field-gap-lg: var(--space-2-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--field-gap-xl: var(--space-3);
|
|
|
|
|
--field-font-family: var(--font-ui);
|
|
|
|
|
--field-label-gap: var(--space-1);
|
|
|
|
|
--field-label-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--field-label-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--field-label-font-size-md: var(--font-size-sm);
|
|
|
|
|
--field-label-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--field-label-font-size-xl: var(--font-size-md);
|
|
|
|
|
--field-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--field-label-line-height: var(--leading-ui);
|
|
|
|
|
--field-label-color: var(--color-content-primary);
|
|
|
|
|
--field-label-color-invalid: var(--color-risk-text);
|
|
|
|
|
--field-label-color-disabled: var(--color-content-disabled);
|
|
|
|
|
--field-layout-column-gap: var(--space-4);
|
|
|
|
|
--field-required-color: var(--color-risk-text);
|
|
|
|
|
--field-control-height-xs: var(--control-height-xs);
|
|
|
|
|
--field-control-height-sm: var(--control-height-sm);
|
|
|
|
|
--field-control-height-md: var(--control-height-md);
|
|
|
|
|
--field-control-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--field-control-height-xl: var(--control-height-xl);
|
|
|
|
|
--field-control-px-xs: var(--space-2);
|
|
|
|
|
--field-control-px-sm: var(--space-2-5);
|
|
|
|
|
--field-control-px-md: var(--space-3);
|
|
|
|
|
--field-control-px-lg: var(--space-3-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--field-control-px-xl: var(--space-4);
|
|
|
|
|
--field-control-gap-xs: var(--space-1);
|
|
|
|
|
--field-control-gap-sm: var(--space-1-5);
|
|
|
|
|
--field-control-gap-md: var(--space-2);
|
|
|
|
|
--field-control-gap-lg: var(--space-2-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--field-control-gap-xl: var(--space-3);
|
|
|
|
|
--field-control-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--field-control-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--field-control-font-size-md: var(--font-size-sm);
|
|
|
|
|
--field-control-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--field-control-font-size-xl: var(--font-size-md);
|
|
|
|
|
--field-control-line-height: var(--leading-ui);
|
|
|
|
|
--field-control-radius: var(--radius-md);
|
|
|
|
|
--field-control-border-width: var(--border-width);
|
|
|
|
|
--field-control-border: var(--color-border-default);
|
|
|
|
|
--field-control-border-hover: var(--color-border-strong);
|
|
|
|
|
--field-control-border-focus: var(--color-focus-ring);
|
|
|
|
|
--field-control-border-invalid: var(--color-risk-border);
|
|
|
|
|
--field-control-bg: var(--color-surface-default);
|
|
|
|
|
--field-control-ghost-border: transparent;
|
|
|
|
|
--field-control-ghost-bg: transparent;
|
|
|
|
|
--field-control-bg-readonly: var(--color-surface-muted);
|
|
|
|
|
--field-control-bg-disabled: var(--color-surface-muted);
|
|
|
|
|
--field-control-color: var(--color-content-primary);
|
|
|
|
|
--field-control-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--field-control-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--field-affix-color: var(--color-content-secondary);
|
|
|
|
|
--field-message-font-size: var(--font-size-xs);
|
|
|
|
|
--field-message-line-height: var(--leading-ui);
|
|
|
|
|
--field-helper-color: var(--color-content-secondary);
|
|
|
|
|
--field-error-color: var(--color-risk-text);
|
|
|
|
|
--field-transition-duration: var(--duration-fast);
|
|
|
|
|
--field-transition-ease: var(--ease-default);
|
|
|
|
|
--field-disabled-opacity: 0.56;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--form-gap-xs: var(--space-3);
|
|
|
|
|
--form-gap-sm: var(--space-4);
|
|
|
|
|
--form-gap-md: var(--space-5);
|
|
|
|
|
--form-gap-lg: var(--space-6);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--form-gap-xl: var(--space-7);
|
|
|
|
|
--form-font-family: var(--font-ui);
|
|
|
|
|
--form-color: var(--color-content-primary);
|
|
|
|
|
--form-radius: var(--radius-lg);
|
|
|
|
|
--form-border-width: var(--border-width);
|
|
|
|
|
--form-panel-padding: var(--space-5);
|
|
|
|
|
--form-panel-border: var(--color-border-default);
|
|
|
|
|
--form-panel-bg: var(--color-surface-raised);
|
|
|
|
|
--form-panel-shadow: var(--shadow-sm);
|
|
|
|
|
--form-grid-min: 18rem;
|
|
|
|
|
--form-grid-column-gap: var(--space-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--form-action-height-xs: var(--control-height-xs);
|
|
|
|
|
--form-action-height-sm: var(--control-height-sm);
|
|
|
|
|
--form-action-height-md: var(--control-height-md);
|
|
|
|
|
--form-action-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--form-action-height-xl: var(--control-height-xl);
|
|
|
|
|
--form-action-px-xs: var(--space-2-5);
|
|
|
|
|
--form-action-px-sm: var(--space-3);
|
|
|
|
|
--form-action-px-md: var(--space-3-5);
|
|
|
|
|
--form-action-px-lg: var(--space-4);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--form-action-px-xl: var(--space-4-5);
|
|
|
|
|
--form-action-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--form-action-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--form-action-font-size-md: var(--font-size-sm);
|
|
|
|
|
--form-action-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--form-action-font-size-xl: var(--font-size-md);
|
|
|
|
|
--form-action-font-weight: var(--font-weight-medium);
|
|
|
|
|
--form-action-line-height: var(--leading-ui);
|
|
|
|
|
--form-action-gap: var(--space-2);
|
|
|
|
|
--form-action-radius: var(--radius-md);
|
|
|
|
|
--form-action-border-width: var(--border-width);
|
|
|
|
|
--form-error-summary-padding: var(--space-3);
|
|
|
|
|
--form-error-summary-border-width: var(--border-width);
|
|
|
|
|
--form-error-summary-radius: var(--radius-md);
|
|
|
|
|
--form-error-summary-font-size: var(--font-size-sm);
|
|
|
|
|
--form-error-summary-line-height: var(--leading-ui);
|
|
|
|
|
--form-error-summary-list-indent: var(--space-4);
|
|
|
|
|
--form-link-underline-offset: 0.18em;
|
|
|
|
|
--form-auto-fields-gap: var(--space-3);
|
|
|
|
|
--form-auto-fields-array-padding: var(--space-3);
|
|
|
|
|
--form-auto-fields-border-width: var(--border-width);
|
|
|
|
|
--form-auto-fields-radius: var(--radius-md);
|
|
|
|
|
--form-auto-fields-item-gap: var(--space-2);
|
|
|
|
|
--form-auto-fields-item-padding: var(--space-3);
|
|
|
|
|
--form-widget-px: var(--space-3);
|
|
|
|
|
--form-widget-radius: var(--radius-md);
|
|
|
|
|
--form-widget-border-width: var(--border-width);
|
|
|
|
|
--form-transition-duration: var(--duration-fast);
|
|
|
|
|
--form-transition-ease: var(--ease-default);
|
|
|
|
|
--form-disabled-opacity: 0.56;
|
|
|
|
|
--drawer-overlay-bg: var(--color-overlay);
|
|
|
|
|
--drawer-overlay-blur: 10px;
|
|
|
|
|
--drawer-overlay-opacity: 62%;
|
|
|
|
|
--drawer-overlay-z: 72;
|
|
|
|
|
--drawer-inline-z: 64;
|
|
|
|
|
--drawer-handle-bg: var(--color-neutral-track);
|
|
|
|
|
--drawer-handle-bg-active: var(--color-content-secondary);
|
|
|
|
|
--drawer-handle-radius: var(--radius-full);
|
|
|
|
|
--drawer-handle-length: 36px;
|
|
|
|
|
--drawer-handle-thickness: 4px;
|
|
|
|
|
--drawer-handle-active-scale: 1.18;
|
|
|
|
|
--drawer-handle-transition-duration: var(--duration-fast);
|
|
|
|
|
--drawer-handle-transition-ease: var(--ease-out);
|
|
|
|
|
--drawer-content-bg: var(--color-surface-overlay);
|
|
|
|
|
--drawer-content-color: var(--color-content-primary);
|
|
|
|
|
--drawer-content-border: var(--color-border-default);
|
|
|
|
|
--drawer-content-border-width: var(--border-width);
|
|
|
|
|
--drawer-content-radius: var(--radius-xl);
|
|
|
|
|
--drawer-content-shadow: var(--shadow-overlay);
|
|
|
|
|
--drawer-content-shadow-dragging: var(--shadow-overlay-strong, var(--shadow-overlay));
|
|
|
|
|
--drawer-content-ring-dragging-width: 2px;
|
|
|
|
|
--drawer-content-ring-dragging-color: color-mix( in srgb, var(--color-content-secondary) 32%, transparent );
|
|
|
|
|
--drawer-content-ring-dragging-offset: 2px;
|
|
|
|
|
--drawer-content-inset: var(--space-3);
|
|
|
|
|
--drawer-content-width-sm: 360px;
|
|
|
|
|
--drawer-content-width-md: 440px;
|
|
|
|
|
--drawer-content-width-lg: 560px;
|
|
|
|
|
--drawer-content-height-sm: 260px;
|
|
|
|
|
--drawer-content-height-md: 360px;
|
|
|
|
|
--drawer-content-height-lg: 480px;
|
|
|
|
|
--drawer-content-padding-sm: var(--space-4);
|
|
|
|
|
--drawer-content-padding-md: var(--space-5);
|
|
|
|
|
--drawer-content-padding-lg: var(--space-6);
|
|
|
|
|
--drawer-content-padding-full: var(--space-6);
|
|
|
|
|
--drawer-stack-gap: var(--space-4);
|
|
|
|
|
--drawer-header-gap: var(--space-3);
|
|
|
|
|
--drawer-footer-gap: var(--space-3);
|
|
|
|
|
--drawer-footer-margin-top: var(--space-2);
|
|
|
|
|
--drawer-title-font-family: var(--font-heading);
|
|
|
|
|
--drawer-title-font-size: var(--font-size-lg);
|
|
|
|
|
--drawer-title-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--drawer-title-line-height: var(--leading-heading);
|
|
|
|
|
--drawer-title-color: var(--color-content-primary);
|
|
|
|
|
--drawer-description-font-family: var(--font-ui);
|
|
|
|
|
--drawer-description-font-size: var(--font-size-sm);
|
|
|
|
|
--drawer-description-line-height: var(--leading-ui);
|
|
|
|
|
--drawer-description-color: var(--color-content-secondary);
|
|
|
|
|
--drawer-close-size: var(--control-height-sm);
|
|
|
|
|
--drawer-close-px: var(--space-2);
|
|
|
|
|
--drawer-close-radius: var(--radius-md);
|
|
|
|
|
--drawer-close-bg: transparent;
|
|
|
|
|
--drawer-close-bg-hover: color-mix(in srgb, var(--color-neutral-track) 72%, transparent);
|
|
|
|
|
--drawer-close-color: var(--color-content-secondary);
|
|
|
|
|
--drawer-close-color-hover: var(--color-content-primary);
|
|
|
|
|
--drawer-close-border: transparent;
|
|
|
|
|
--drawer-close-border-width: var(--border-width);
|
|
|
|
|
--drawer-close-transition-duration: var(--duration-fast);
|
|
|
|
|
--drawer-close-transition-ease: var(--ease-default);
|
|
|
|
|
--drawer-close-focus-ring-offset: 1px;
|
|
|
|
|
--drawer-close-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--drawer-close-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--drawer-close-disabled-opacity: 0.5;
|
|
|
|
|
--icon-size: var(--icon-size-md);
|
|
|
|
|
--icon-stroke-width: var(--icon-stroke-width-md);
|
feat(eidos): Card, Avatar ext, Image, SText, Badge, service components + dates engine fixes
Sprint completo:
- Card (eidos + sema): elevation/intent/interactive, eventos select+activate.
- Avatar: ring, AvatarBadge, AvatarGroup separados; demo Avatar standalone.
- Image: status surface (idle/loading/loaded/error) consumiendo soma ImageProvider.
- SText + STextVirtualList: canvas-text engine portado de morfo-driven-soma como
componentes separados para optimizar bundle (no se importa canvas si no se usa).
- Badge: primitivo eidos puro.
- Trans, FormatNumber, FormatDate, RelativeTime: 4 service components greppables
alrededor de uix.langs y uix.format. Nav group "Utilities".
Bugs fix arts/format/dates (engine-dates.ts):
1. Preset / per-axis conflict: Intl.DateTimeFormat rechaza dateStyle/timeStyle
con cualquier per-axis (weekday/era/year/month/day/dayPeriod/hour/minute/
second/fractionalSecondDigits) o con timeZoneName. Engine drop-ea ambos
presets por defecto cuando detecta conflict (regla estricta — un solo
per-axis hace ilegales los dos presets).
2. Per-call locale override: formatDate/Time/DateTime aceptan tercer arg
locale?: string. No muta engine state. Cache (getCachedDateFormat) keyea
por (locale x options). resolveCallHourCycle: cuando hay locale override
y pref auto, el ciclo horario se resuelve desde el locale OVERRIDE.
3. withHourCycle precedence: caller hourCycle/hour12 ahora gana sobre
preferencia del engine. Antes spread mal ordenado sobrescribia 'h12' del
caller con 'h23' del engine cuando locale resolvia a 24h.
FormatDate component vuelve a rutear siempre por uix.format.dates
(cache + hourCycle + locale reactivo), pasando locale como tercer arg.
Demos service components autonomos del toolbar global: cada uno owns su
demoLocale state con 7 chips (es-ES/en-US/en-GB/de-DE/fr-FR/ja-JP/ar-EG).
FormatDate stage filtra dateStyle/timeStyle por mode + chip hourCycle anadido.
Tests: 14/14 passing en engine-dates.test.ts (+6 nuevos: conflict handling,
locale override, hourCycle precedence).
Docs: arts/format/README.md (handoff 2026-05-25 con las 3 reglas),
README.md por service component, project_service_components_sprint_2026-05-25.md,
feedback_service_demos_own_locale.md (pattern reusable).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--image-size-xs: 64px;
|
|
|
|
|
--image-size-sm: 96px;
|
|
|
|
|
--image-size-md: 160px;
|
|
|
|
|
--image-size-lg: 240px;
|
|
|
|
|
--image-size-xl: 360px;
|
|
|
|
|
--image-radius-none: 0;
|
|
|
|
|
--image-radius-sm: var(--radius-sm);
|
|
|
|
|
--image-radius-md: var(--radius-md);
|
|
|
|
|
--image-radius-lg: var(--radius-lg);
|
|
|
|
|
--image-radius-full: var(--radius-full);
|
|
|
|
|
--image-fade-duration: var(--duration-normal);
|
|
|
|
|
--image-fade-ease: var(--ease-out);
|
|
|
|
|
--image-placeholder-base: var(--color-surface-raised);
|
|
|
|
|
--image-placeholder-highlight: color-mix(in srgb, var(--color-surface-default) 70%, var(--color-surface-overlay));
|
|
|
|
|
--image-shimmer-duration: 1.8s;
|
|
|
|
|
--image-placeholder-color-custom: var(--color-neutral-track);
|
|
|
|
|
--image-font-family: var(--font-ui);
|
|
|
|
|
--image-fallback-color: var(--color-content-secondary);
|
|
|
|
|
--image-fallback-font-size: var(--font-size-sm);
|
|
|
|
|
--image-fallback-line-height: var(--leading-ui);
|
|
|
|
|
--image-error-bg: var(--color-surface-raised);
|
|
|
|
|
--image-error-color: var(--color-content-muted);
|
|
|
|
|
--image-error-font-size: var(--font-size-sm);
|
|
|
|
|
--image-error-line-height: var(--leading-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--meter-height-xs: 2px;
|
|
|
|
|
--meter-height-sm: 4px;
|
|
|
|
|
--meter-height-md: 6px;
|
|
|
|
|
--meter-height-lg: 8px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--meter-height-xl: 12px;
|
|
|
|
|
--meter-radius-xs: var(--radius-full);
|
|
|
|
|
--meter-radius-sm: var(--radius-full);
|
|
|
|
|
--meter-radius-md: var(--radius-full);
|
|
|
|
|
--meter-radius-lg: var(--radius-full);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--meter-radius-xl: var(--radius-full);
|
|
|
|
|
--meter-ring-size-xs: 2rem;
|
|
|
|
|
--meter-ring-size-sm: 2.5rem;
|
|
|
|
|
--meter-ring-size-md: 3rem;
|
|
|
|
|
--meter-ring-size-lg: 3.5rem;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--meter-ring-size-xl: 4rem;
|
|
|
|
|
--meter-ring-thickness-xs: 3px;
|
|
|
|
|
--meter-ring-thickness-sm: 4px;
|
|
|
|
|
--meter-ring-thickness-md: 6px;
|
|
|
|
|
--meter-ring-thickness-lg: 8px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--meter-ring-thickness-xl: 10px;
|
|
|
|
|
--meter-track-bg: var(--color-neutral-track);
|
|
|
|
|
--meter-ring-track-bg: color-mix(in srgb, var(--color-content-primary) 12%, var(--color-surface-default));
|
|
|
|
|
--meter-ring-center-bg: var(--color-surface-default);
|
|
|
|
|
--meter-indicator-bg-below: var(--color-risk-solid);
|
|
|
|
|
--meter-indicator-bg-optimum: var(--color-fulfill-solid);
|
|
|
|
|
--meter-indicator-bg-above: var(--color-threat-solid);
|
|
|
|
|
--meter-transition-duration: var(--duration-normal);
|
|
|
|
|
--meter-transition-ease: var(--ease-default);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--number-field-height-xs: var(--control-height-xs);
|
|
|
|
|
--number-field-height-sm: var(--control-height-sm);
|
|
|
|
|
--number-field-height-md: var(--control-height-md);
|
|
|
|
|
--number-field-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--number-field-height-xl: var(--control-height-xl);
|
|
|
|
|
--number-field-px-xs: var(--space-2);
|
|
|
|
|
--number-field-px-sm: var(--space-2-5);
|
|
|
|
|
--number-field-px-md: var(--space-3);
|
|
|
|
|
--number-field-px-lg: var(--space-3-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--number-field-px-xl: var(--space-4);
|
|
|
|
|
--number-field-gap-xs: var(--space-0-5);
|
|
|
|
|
--number-field-gap-sm: var(--space-1);
|
|
|
|
|
--number-field-gap-md: var(--space-1-5);
|
|
|
|
|
--number-field-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--number-field-gap-xl: var(--space-2-5);
|
|
|
|
|
--number-field-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--number-field-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--number-field-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--number-field-font-size-md: var(--font-size-sm);
|
|
|
|
|
--number-field-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--number-field-font-size-xl: var(--font-size-md);
|
|
|
|
|
--number-field-line-height: var(--leading-ui);
|
|
|
|
|
--number-field-radius: var(--radius-md);
|
|
|
|
|
--number-field-border-width: var(--border-width);
|
|
|
|
|
--number-field-border: var(--color-border-default);
|
|
|
|
|
--number-field-border-focus: var(--color-focus-ring);
|
|
|
|
|
--number-field-border-invalid: var(--color-risk-border);
|
|
|
|
|
--number-field-bg: var(--color-surface-default);
|
|
|
|
|
--number-field-color: var(--color-content-primary);
|
|
|
|
|
--number-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--number-field-control-radius: var(--radius-md);
|
|
|
|
|
--number-field-control-border-width: var(--border-width);
|
|
|
|
|
--number-field-control-border: transparent;
|
|
|
|
|
--number-field-control-border-hover: var(--color-border-subtle);
|
|
|
|
|
--number-field-control-border-active: var(--color-primary-border);
|
|
|
|
|
--number-field-control-bg: transparent;
|
|
|
|
|
--number-field-control-bg-hover: var(--color-surface-raised);
|
|
|
|
|
--number-field-control-bg-active: var(--color-primary-track);
|
|
|
|
|
--number-field-control-color: var(--color-content-secondary);
|
|
|
|
|
--number-field-control-color-hover: var(--color-content-primary);
|
|
|
|
|
--number-field-control-color-active: var(--color-primary-text);
|
|
|
|
|
--number-field-control-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--number-field-control-disabled-opacity: 0.48;
|
|
|
|
|
--number-field-transition-duration: var(--duration-fast);
|
|
|
|
|
--number-field-transition-ease: var(--ease-default);
|
|
|
|
|
--number-field-disabled-opacity: 0.56;
|
|
|
|
|
--date-field-stack-gap: var(--space-1-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-height-xs: var(--control-height-xs);
|
|
|
|
|
--date-field-height-sm: var(--control-height-sm);
|
|
|
|
|
--date-field-height-md: var(--control-height-md);
|
|
|
|
|
--date-field-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-height-xl: var(--control-height-xl);
|
|
|
|
|
--date-field-px-xs: var(--space-2);
|
|
|
|
|
--date-field-px-sm: var(--space-2-5);
|
|
|
|
|
--date-field-px-md: var(--space-3);
|
|
|
|
|
--date-field-px-lg: var(--space-3-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-px-xl: var(--space-4);
|
|
|
|
|
--date-field-gap-xs: var(--space-0-5);
|
|
|
|
|
--date-field-gap-sm: var(--space-0-5);
|
|
|
|
|
--date-field-gap-md: var(--space-1);
|
|
|
|
|
--date-field-gap-lg: var(--space-1-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-gap-xl: var(--space-2);
|
|
|
|
|
--date-field-segment-px-xs: var(--space-0-5);
|
|
|
|
|
--date-field-segment-px-sm: var(--space-0-5);
|
|
|
|
|
--date-field-segment-px-md: var(--space-1);
|
|
|
|
|
--date-field-segment-px-lg: var(--space-1-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-segment-px-xl: var(--space-2);
|
|
|
|
|
--date-field-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--date-field-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--date-field-font-size-md: var(--font-size-sm);
|
|
|
|
|
--date-field-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-font-size-xl: var(--font-size-md);
|
|
|
|
|
--date-field-line-height: var(--leading-ui);
|
|
|
|
|
--date-field-radius: var(--radius-md);
|
|
|
|
|
--date-field-border-width: var(--border-width);
|
|
|
|
|
--date-field-border: var(--color-border-default);
|
|
|
|
|
--date-field-border-invalid: var(--color-risk-border);
|
|
|
|
|
--date-field-bg: var(--color-surface-default);
|
|
|
|
|
--date-field-color: var(--color-content-primary);
|
|
|
|
|
--date-field-label-color: var(--color-content-secondary);
|
|
|
|
|
--date-field-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--date-field-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--date-field-literal-color: var(--color-content-muted);
|
|
|
|
|
--date-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--date-field-segment-min-width: 1.5ch;
|
|
|
|
|
--date-field-segment-height: calc(var(--_date-field-height) - var(--space-2));
|
|
|
|
|
--date-field-segment-radius: var(--radius-sm);
|
|
|
|
|
--date-field-segment-color: var(--color-content-primary);
|
|
|
|
|
--date-field-segment-invalid-color: var(--color-risk-text);
|
|
|
|
|
--date-field-segment-readonly-bg: var(--color-surface-overlay);
|
|
|
|
|
--date-field-segment-readonly-color: var(--color-content-secondary);
|
|
|
|
|
--date-field-segment-readonly-decoration: underline dotted var(--color-content-muted);
|
fix(uix audit): apply Kim audit remediations across morfo/soma/eidos/recipe layers
Resolves 34 of 40 failures from src/uix/audit-uix-kimi-1.md. The remaining
6 are all Words component (excluded per project owner — actively developed
on a separate track) or unrelated infra (cookie-adapter-client jsdom timeout).
Key changes:
- soma/provider/context.ts: swallow Svelte's `lifecycle_outside_component`
in `context.set()` so unit tests can instantiate providers without a
component tree (unblocked 18 picker tests in one line).
- soma/textarea: route inline style writes through `dom.apply({attrs})`
instead of direct `el.style.X = Y` (contract regex compliance).
- soma/picker-shell: add minimal Provider component + morfo so the shared
handle utility passes the morfo/component contract.
- eidos/_layout: lift `shared.ts` to `eidos/lib/layout-helpers.ts` (the
`_layout` directory wasn't a real component) and update 8 layout
primitive imports.
- eidos/command: replace `onMount` with `$effect` (visual layer can't use
Svelte 4 lifecycle hooks per component-api contract); restructure
`Item.Icon`/`Item.Shortcut` namespace so contract regex matches.
- eidos/color-picker: extract hue spectrum hsl literals to sidecar
`color-picker-spectrum.css`; keep main recipe color-literal-free.
- eidos/lib/recipes/base.ts: declare 196 layout-primitive + chrome CSS
vars (box, flex, grid, float, group, banner, container, section,
separator, toggle-group, pin-input, scroll-area, splitter,
navigation-menu, dropdown-menu, context-menu, date-range-field,
time-range-field, plus per-component additions to date-field,
color-picker, button, select). 197 missing → 0 non-Words.
- morfo: add `data-dir` to carousel, `data-kind` to date-picker, add
StrengthMeterLabel sub-part to password-field, register picker-shell.
- 5 pickers (date/color/date-range/time/time-range): add `internals.ts`
indirection so `exports.ts` doesn't re-export `*provider.svelte.ts`
directly (contract D); rewrite virtual root types to plain object
literals (no `WithChild`/`PrimitiveDivAttributes`).
- 4 new READMEs (button, textarea, password-field, picker-shell)
following the search-field canonical template.
Test result: 2391/2397 passing (99.75%). Remaining 6 failures are all
Words-scope or jsdom infra timeout — explicitly out of scope.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--date-field-segment-hover-bg: color-mix(in srgb, var(--color-content-primary) 6%, transparent);
|
|
|
|
|
--date-field-transition-duration: var(--duration-fast);
|
|
|
|
|
--date-field-transition-ease: var(--ease-default);
|
|
|
|
|
--date-field-disabled-opacity: 0.56;
|
|
|
|
|
--time-field-stack-gap: var(--space-1-5);
|
|
|
|
|
--time-field-height-xs: var(--control-height-xs);
|
|
|
|
|
--time-field-height-sm: var(--control-height-sm);
|
|
|
|
|
--time-field-height-md: var(--control-height-md);
|
|
|
|
|
--time-field-height-lg: var(--control-height-lg);
|
|
|
|
|
--time-field-height-xl: var(--control-height-xl);
|
|
|
|
|
--time-field-px-xs: var(--space-2);
|
|
|
|
|
--time-field-px-sm: var(--space-2-5);
|
|
|
|
|
--time-field-px-md: var(--space-3);
|
|
|
|
|
--time-field-px-lg: var(--space-3-5);
|
|
|
|
|
--time-field-px-xl: var(--space-4);
|
|
|
|
|
--time-field-gap-xs: var(--space-0-5);
|
|
|
|
|
--time-field-gap-sm: var(--space-0-5);
|
|
|
|
|
--time-field-gap-md: var(--space-1);
|
|
|
|
|
--time-field-gap-lg: var(--space-1-5);
|
|
|
|
|
--time-field-gap-xl: var(--space-2);
|
|
|
|
|
--time-field-segment-px-xs: var(--space-0-5);
|
|
|
|
|
--time-field-segment-px-sm: var(--space-0-5);
|
|
|
|
|
--time-field-segment-px-md: var(--space-1);
|
|
|
|
|
--time-field-segment-px-lg: var(--space-1-5);
|
|
|
|
|
--time-field-segment-px-xl: var(--space-2);
|
|
|
|
|
--time-field-font-family: var(--font-ui);
|
|
|
|
|
--time-field-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--time-field-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--time-field-font-size-md: var(--font-size-sm);
|
|
|
|
|
--time-field-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--time-field-font-size-xl: var(--font-size-md);
|
|
|
|
|
--time-field-line-height: var(--leading-ui);
|
|
|
|
|
--time-field-radius: var(--radius-md);
|
|
|
|
|
--time-field-border-width: var(--border-width);
|
|
|
|
|
--time-field-border: var(--color-border-default);
|
|
|
|
|
--time-field-border-invalid: var(--color-risk-border);
|
|
|
|
|
--time-field-bg: var(--color-surface-default);
|
|
|
|
|
--time-field-color: var(--color-content-primary);
|
|
|
|
|
--time-field-label-color: var(--color-content-secondary);
|
|
|
|
|
--time-field-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--time-field-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--time-field-literal-color: var(--color-content-muted);
|
|
|
|
|
--time-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--time-field-segment-min-width: 1.5ch;
|
|
|
|
|
--time-field-segment-height: calc(var(--_time-field-height) - var(--space-2));
|
|
|
|
|
--time-field-segment-radius: var(--radius-sm);
|
|
|
|
|
--time-field-segment-color: var(--color-content-primary);
|
|
|
|
|
--time-field-segment-invalid-color: var(--color-risk-text);
|
|
|
|
|
--time-field-segment-readonly-bg: var(--color-surface-overlay);
|
|
|
|
|
--time-field-segment-readonly-color: var(--color-content-secondary);
|
|
|
|
|
--time-field-segment-readonly-decoration: underline dotted var(--color-content-muted);
|
|
|
|
|
--time-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_time-field-accent-border);
|
|
|
|
|
--time-field-transition-duration: var(--duration-fast);
|
|
|
|
|
--time-field-transition-ease: var(--ease-default);
|
|
|
|
|
--time-field-disabled-opacity: 0.56;
|
|
|
|
|
--color-field-stack-gap: var(--space-1-5);
|
|
|
|
|
--color-field-height-xs: var(--control-height-xs);
|
|
|
|
|
--color-field-height-sm: var(--control-height-sm);
|
|
|
|
|
--color-field-height-md: var(--control-height-md);
|
|
|
|
|
--color-field-height-lg: var(--control-height-lg);
|
|
|
|
|
--color-field-height-xl: var(--control-height-xl);
|
|
|
|
|
--color-field-px-xs: var(--space-2);
|
|
|
|
|
--color-field-px-sm: var(--space-2-5);
|
|
|
|
|
--color-field-px-md: var(--space-3);
|
|
|
|
|
--color-field-px-lg: var(--space-3-5);
|
|
|
|
|
--color-field-px-xl: var(--space-4);
|
|
|
|
|
--color-field-gap-xs: var(--space-0-5);
|
|
|
|
|
--color-field-gap-sm: var(--space-0-5);
|
|
|
|
|
--color-field-gap-md: var(--space-1);
|
|
|
|
|
--color-field-gap-lg: var(--space-1-5);
|
|
|
|
|
--color-field-gap-xl: var(--space-2);
|
|
|
|
|
--color-field-segment-px-xs: var(--space-0-5);
|
|
|
|
|
--color-field-segment-px-sm: var(--space-0-5);
|
|
|
|
|
--color-field-segment-px-md: var(--space-1);
|
|
|
|
|
--color-field-segment-px-lg: var(--space-1-5);
|
|
|
|
|
--color-field-segment-px-xl: var(--space-2);
|
|
|
|
|
--color-field-font-family: var(--font-ui);
|
|
|
|
|
--color-field-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--color-field-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--color-field-font-size-md: var(--font-size-sm);
|
|
|
|
|
--color-field-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--color-field-font-size-xl: var(--font-size-md);
|
|
|
|
|
--color-field-line-height: var(--leading-ui);
|
|
|
|
|
--color-field-radius: var(--radius-md);
|
|
|
|
|
--color-field-border-width: var(--border-width);
|
|
|
|
|
--color-field-border: var(--color-border-default);
|
|
|
|
|
--color-field-border-invalid: var(--color-risk-border);
|
|
|
|
|
--color-field-bg: var(--color-surface-default);
|
|
|
|
|
--color-field-color: var(--color-content-primary);
|
|
|
|
|
--color-field-label-color: var(--color-content-secondary);
|
|
|
|
|
--color-field-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--color-field-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--color-field-literal-color: var(--color-content-muted);
|
|
|
|
|
--color-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--color-field-segment-min-width: 1.5ch;
|
|
|
|
|
--color-field-segment-height: calc(var(--_color-field-height) - var(--space-2));
|
|
|
|
|
--color-field-segment-radius: var(--radius-sm);
|
|
|
|
|
--color-field-segment-color: var(--color-content-primary);
|
|
|
|
|
--color-field-segment-invalid-color: var(--color-risk-text);
|
|
|
|
|
--color-field-segment-readonly-bg: var(--color-surface-overlay);
|
|
|
|
|
--color-field-segment-readonly-color: var(--color-content-secondary);
|
|
|
|
|
--color-field-segment-readonly-decoration: underline dotted var(--color-content-muted);
|
|
|
|
|
--color-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_color-field-accent-border);
|
|
|
|
|
--color-field-swatch-size-xs: calc(var(--control-height-xs) - var(--space-2));
|
|
|
|
|
--color-field-swatch-size-sm: calc(var(--control-height-sm) - var(--space-2));
|
|
|
|
|
--color-field-swatch-size-md: calc(var(--control-height-md) - var(--space-2));
|
|
|
|
|
--color-field-swatch-size-lg: calc(var(--control-height-lg) - var(--space-2));
|
|
|
|
|
--color-field-swatch-size-xl: calc(var(--control-height-xl) - var(--space-2));
|
|
|
|
|
--color-field-format-select-color: var(--color-content-secondary);
|
|
|
|
|
--color-field-format-select-bg: transparent;
|
|
|
|
|
--color-field-format-select-radius: var(--radius-sm);
|
|
|
|
|
--color-field-format-select-px: var(--space-1);
|
|
|
|
|
--color-field-transition-duration: var(--duration-fast);
|
|
|
|
|
--color-field-transition-ease: var(--ease-default);
|
|
|
|
|
--color-field-disabled-opacity: 0.56;
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-content-gap: var(--space-3);
|
|
|
|
|
--color-picker-content-padding-sm: var(--space-3);
|
|
|
|
|
--color-picker-content-padding-md: var(--space-3-5);
|
|
|
|
|
--color-picker-content-padding-lg: var(--space-4);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-content-width-sm: 17rem;
|
|
|
|
|
--color-picker-content-width-md: 19.5rem;
|
|
|
|
|
--color-picker-content-width-lg: 22rem;
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-trigger-height-sm: var(--control-height-sm);
|
|
|
|
|
--color-picker-trigger-height-md: var(--control-height-md);
|
|
|
|
|
--color-picker-trigger-height-lg: var(--control-height-lg);
|
|
|
|
|
--color-picker-trigger-px-sm: var(--space-2);
|
|
|
|
|
--color-picker-trigger-px-md: var(--space-2-5);
|
|
|
|
|
--color-picker-trigger-px-lg: var(--space-3);
|
|
|
|
|
--color-picker-trigger-gap: var(--space-2);
|
|
|
|
|
--color-picker-trigger-radius: var(--radius-md);
|
|
|
|
|
--color-picker-trigger-border-width: var(--border-width);
|
|
|
|
|
--color-picker-trigger-border: var(--color-border-default);
|
|
|
|
|
--color-picker-trigger-bg: var(--color-surface-default);
|
|
|
|
|
--color-picker-trigger-color: var(--color-content-primary);
|
|
|
|
|
--color-picker-trigger-hover-bg: var(--color-surface-overlay);
|
|
|
|
|
--color-picker-trigger-hover-border: var(--color-border-strong);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-trigger-swatch-size-sm: calc(var(--control-height-sm) - var(--space-2));
|
|
|
|
|
--color-picker-trigger-swatch-size-md: calc(var(--control-height-md) - var(--space-2));
|
|
|
|
|
--color-picker-trigger-swatch-size-lg: calc(var(--control-height-lg) - var(--space-2));
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-trigger-swatch-radius: var(--radius-full);
|
|
|
|
|
--color-picker-trigger-swatch-border: var(--color-border-subtle);
|
|
|
|
|
--color-picker-trigger-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-area-height: 11rem;
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-area-radius: var(--radius-md);
|
|
|
|
|
--color-picker-area-border-width: var(--border-width);
|
|
|
|
|
--color-picker-area-border: var(--color-border-subtle);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-area-thumb-size: 16px;
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-area-thumb-radius: var(--radius-full);
|
|
|
|
|
--color-picker-area-thumb-border-width: 2px;
|
|
|
|
|
--color-picker-area-thumb-border: var(--color-surface-default);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-area-thumb-shadow: 0 0 0 1px color-mix(in srgb, var(--color-neutral-contrast) 45%, transparent), 0 1px 2px color-mix(in srgb, var(--color-neutral-contrast) 20%, transparent);
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-transparency-cell: var(--color-content-muted);
|
|
|
|
|
--color-picker-transparency-cell-alt: var(--color-surface-default);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-swatch-size-sm: 1.25rem;
|
|
|
|
|
--color-picker-swatch-size-md: 1.5rem;
|
|
|
|
|
--color-picker-swatch-size-lg: 1.75rem;
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-swatch-radius: var(--radius-sm);
|
|
|
|
|
--color-picker-swatch-border: var(--color-border-subtle);
|
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider
(~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites
`components/color-picker-channel-slider.svelte` to compose
SliderProvider underneath. The channel slider now keeps only the
channel-aware bridge: setChannel writes the value, channelGradient
paints the track.
What the picker gains by reusing Slider
---------------------------------------
- sema events: `slider:handle-pick`, `slider:handle-drag`,
`slider:commit-set` now flow through the channel sliders (they were
silent before — the Sema layer had no perceptual hook on channel
drag/commit).
- single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown,
multi-touch, focus trap, RTL, step-snap — all from SliderProvider.
- ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex
managed by the slider's thumb provider.
- recipe tokens: channel sliders consume `--slider-*` (sizes, radii,
shadows) so they stay in lockstep with the standalone Slider and
with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The
`--color-picker-channel-slider-*` tokens are removed.
Public API impact
-----------------
- `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>`
remain as part names but now re-export `Slider.Range` /
`Slider.Thumb`. Consumers that compose them inline keep working.
- The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` /
`[data-slider-range]` (governed by the slider morfo) replace
`[data-color-picker-channel-slider-track]` /
`[data-color-picker-channel-slider-thumb]`. The wrapper still emits
`[data-color-picker-channel-slider][data-channel]` so per-channel
CSS targeting works; the gradient is exposed via
`--cp-channel-gradient` and routed onto the slider's track ::before.
- Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts
(the slider morfo owns those contracts now). `channel-slider`
remains as the wrapper marker with `data-channel`.
- Eidos: deletes `color-picker-channel-slider-track.svelte` and
`color-picker-channel-slider-thumb.svelte`; `index.ts` re-points
`ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos
components.
New norm N-8 added to PENDIENTES.md
-----------------------------------
"Reutilizar componentes ya definidos en componentes complejos siempre
que no supongan una pérdida de características demostrable." Documented
with this refactor as the worked example.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-swatch-checked-ring: var(--color-primary-solid);
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-swatch-gap: var(--space-1-5);
|
|
|
|
|
--color-picker-eye-dropper-size: var(--control-height-sm);
|
|
|
|
|
--color-picker-eye-dropper-radius: var(--radius-md);
|
|
|
|
|
--color-picker-eye-dropper-bg: transparent;
|
|
|
|
|
--color-picker-eye-dropper-color: var(--color-content-secondary);
|
|
|
|
|
--color-picker-eye-dropper-hover-bg: var(--color-surface-overlay);
|
|
|
|
|
--color-picker-eye-dropper-hover-color: var(--color-content-primary);
|
fix(uix audit): apply Kim audit remediations across morfo/soma/eidos/recipe layers
Resolves 34 of 40 failures from src/uix/audit-uix-kimi-1.md. The remaining
6 are all Words component (excluded per project owner — actively developed
on a separate track) or unrelated infra (cookie-adapter-client jsdom timeout).
Key changes:
- soma/provider/context.ts: swallow Svelte's `lifecycle_outside_component`
in `context.set()` so unit tests can instantiate providers without a
component tree (unblocked 18 picker tests in one line).
- soma/textarea: route inline style writes through `dom.apply({attrs})`
instead of direct `el.style.X = Y` (contract regex compliance).
- soma/picker-shell: add minimal Provider component + morfo so the shared
handle utility passes the morfo/component contract.
- eidos/_layout: lift `shared.ts` to `eidos/lib/layout-helpers.ts` (the
`_layout` directory wasn't a real component) and update 8 layout
primitive imports.
- eidos/command: replace `onMount` with `$effect` (visual layer can't use
Svelte 4 lifecycle hooks per component-api contract); restructure
`Item.Icon`/`Item.Shortcut` namespace so contract regex matches.
- eidos/color-picker: extract hue spectrum hsl literals to sidecar
`color-picker-spectrum.css`; keep main recipe color-literal-free.
- eidos/lib/recipes/base.ts: declare 196 layout-primitive + chrome CSS
vars (box, flex, grid, float, group, banner, container, section,
separator, toggle-group, pin-input, scroll-area, splitter,
navigation-menu, dropdown-menu, context-menu, date-range-field,
time-range-field, plus per-component additions to date-field,
color-picker, button, select). 197 missing → 0 non-Words.
- morfo: add `data-dir` to carousel, `data-kind` to date-picker, add
StrengthMeterLabel sub-part to password-field, register picker-shell.
- 5 pickers (date/color/date-range/time/time-range): add `internals.ts`
indirection so `exports.ts` doesn't re-export `*provider.svelte.ts`
directly (contract D); rewrite virtual root types to plain object
literals (no `WithChild`/`PrimitiveDivAttributes`).
- 4 new READMEs (button, textarea, password-field, picker-shell)
following the search-field canonical template.
Test result: 2391/2397 passing (99.75%). Remaining 6 failures are all
Words-scope or jsdom infra timeout — explicitly out of scope.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-hue-0: hsl(0, 100%, 50%);
|
|
|
|
|
--color-picker-hue-60: hsl(60, 100%, 50%);
|
|
|
|
|
--color-picker-hue-120: hsl(120, 100%, 50%);
|
|
|
|
|
--color-picker-hue-180: hsl(180, 100%, 50%);
|
|
|
|
|
--color-picker-hue-240: hsl(240, 100%, 50%);
|
|
|
|
|
--color-picker-hue-300: hsl(300, 100%, 50%);
|
|
|
|
|
--color-picker-hue-360: hsl(360, 100%, 50%);
|
|
|
|
|
--color-picker-saturation-floor: hsl(0, 0%, 50%);
|
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-picker-transition-duration: var(--duration-fast);
|
|
|
|
|
--color-picker-transition-ease: var(--ease-default);
|
|
|
|
|
--color-picker-disabled-opacity: 0.56;
|
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build:
- New <Button> compound (morfo + soma + sema + eidos): 6 variants
(solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional
icon/endIcon snippets, loading state with built-in Spinner, asChild
Slot pattern, intent-driven sema (commit-action with fromProp:intent).
Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE):
- context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group:
full per-part Morfo contracts, reference-parity tables, ARIA contract
tables, keyboard tables, composition controls.
- color-field, time-field, time-picker, time-range-picker, color-picker,
month-grid, year-grid: same canonical treatment; per-part data/aria/
keyboard iteration of raw morfo, reference parity vs react-aria/
ark-ui/Chakra/bits-ui/Mantine.
Picker recipe polish:
- PickerShell.Clear/Cancel/Close refactored to use <Button size="xs">
(affects 5 pickers — date / date-range / time / time-range / color).
- TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14
/ 32 -> 28), per-channel accent (hour=primary, minute=secondary,
second=neutral; end variant muted), ruler off by default, hour ruler
cleaned to 0/6/12/18/23.
- ColorPicker: typography token --_color-picker-trigger-font-size that
scales with data-size (10/12/14px); autoFormat default true; Area
recipe override for [data-x-channel='hue'] with rainbow gradient +
saturation/brightness Y overlays.
- ValueText eidos wrapper: fix children snippet bug that suppressed
soma's displayValue fallback.
- date-field.css: segment editing affordance (cursor + hover + active
ring) via new --_date-field-accent-element token across 8 color
cascades.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--button-height-xs: var(--control-height-xs);
|
|
|
|
|
--button-height-sm: var(--control-height-sm);
|
|
|
|
|
--button-height-md: var(--control-height-md);
|
|
|
|
|
--button-height-lg: var(--control-height-lg);
|
|
|
|
|
--button-height-xl: var(--control-height-xl);
|
|
|
|
|
--button-px-xs: var(--space-2);
|
|
|
|
|
--button-px-sm: var(--space-3);
|
|
|
|
|
--button-px-md: var(--space-4);
|
|
|
|
|
--button-px-lg: var(--space-5);
|
|
|
|
|
--button-px-xl: var(--space-6);
|
|
|
|
|
--button-gap-xs: var(--space-1);
|
|
|
|
|
--button-gap-sm: var(--space-1-5);
|
|
|
|
|
--button-gap-md: var(--space-2);
|
|
|
|
|
--button-gap-lg: var(--space-2-5);
|
|
|
|
|
--button-gap-xl: var(--space-3);
|
|
|
|
|
--button-font-family: var(--font-ui);
|
|
|
|
|
--button-line-height: var(--leading-ui);
|
|
|
|
|
--button-letter-spacing: var(--tracking-normal);
|
|
|
|
|
--button-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--button-font-size-sm: var(--font-size-sm);
|
|
|
|
|
--button-font-size-md: var(--font-size-sm);
|
|
|
|
|
--button-font-size-lg: var(--font-size-md);
|
|
|
|
|
--button-font-size-xl: var(--font-size-lg);
|
|
|
|
|
--button-font-weight-xs: var(--font-weight-medium);
|
|
|
|
|
--button-font-weight-sm: var(--font-weight-medium);
|
|
|
|
|
--button-font-weight-md: var(--font-weight-medium);
|
|
|
|
|
--button-font-weight-lg: var(--font-weight-medium);
|
|
|
|
|
--button-font-weight-xl: var(--font-weight-medium);
|
|
|
|
|
--button-icon-size-xs: 14px;
|
|
|
|
|
--button-icon-size-sm: 14px;
|
|
|
|
|
--button-icon-size-md: 16px;
|
|
|
|
|
--button-icon-size-lg: 18px;
|
|
|
|
|
--button-icon-size-xl: 20px;
|
|
|
|
|
--button-radius-sm: var(--radius-sm);
|
|
|
|
|
--button-radius-md: var(--radius-md);
|
|
|
|
|
--button-radius-lg: var(--radius-lg);
|
|
|
|
|
--button-radius-xl: var(--radius-xl);
|
|
|
|
|
--button-border-width: var(--border-width);
|
|
|
|
|
--button-shadow: none;
|
|
|
|
|
--button-transition-duration: var(--duration-fast);
|
|
|
|
|
--button-transition-ease: var(--ease-default);
|
|
|
|
|
--button-spinner-duration: 720ms;
|
|
|
|
|
--button-disabled-opacity: 0.5;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--button-primary-element: var(--color-primary-element);
|
|
|
|
|
--button-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--button-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--button-primary-text: var(--color-primary-text);
|
|
|
|
|
--button-primary-contrast: var(--color-primary-contrast);
|
|
|
|
|
--button-secondary-element: var(--color-secondary-element);
|
|
|
|
|
--button-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--button-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--button-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--button-secondary-contrast: var(--color-secondary-contrast);
|
|
|
|
|
--button-neutral-element: var(--color-neutral-element);
|
|
|
|
|
--button-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--button-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--button-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--button-neutral-contrast: var(--color-neutral-contrast);
|
|
|
|
|
--button-affirm-element: var(--color-affirm-element);
|
|
|
|
|
--button-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--button-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--button-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--button-affirm-contrast: var(--color-affirm-contrast);
|
|
|
|
|
--button-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--button-fulfill-element: var(--color-fulfill-element);
|
|
|
|
|
--button-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--button-fulfill-solid: var(--color-fulfill-solid);
|
|
|
|
|
--button-fulfill-solid-hover: var(--color-fulfill-solid-hover);
|
|
|
|
|
--button-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--button-fulfill-contrast: var(--color-fulfill-contrast);
|
|
|
|
|
--button-risk-element: var(--color-risk-element);
|
|
|
|
|
--button-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--button-risk-solid-hover: var(--color-risk-solid-hover);
|
|
|
|
|
--button-risk-text: var(--color-risk-text);
|
|
|
|
|
--button-risk-contrast: var(--color-risk-contrast);
|
|
|
|
|
--button-threat-element: var(--color-threat-element);
|
|
|
|
|
--button-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--button-threat-solid-hover: var(--color-threat-solid-hover);
|
|
|
|
|
--button-threat-text: var(--color-threat-text);
|
|
|
|
|
--button-threat-contrast: var(--color-threat-contrast);
|
|
|
|
|
--button-loss-track: var(--color-loss-track);
|
|
|
|
|
--button-loss-element: var(--color-loss-element);
|
|
|
|
|
--button-loss-border: var(--color-loss-border);
|
|
|
|
|
--button-loss-solid: var(--color-loss-solid);
|
|
|
|
|
--button-loss-solid-hover: var(--color-loss-solid-hover);
|
|
|
|
|
--button-loss-text: var(--color-loss-text);
|
|
|
|
|
--button-loss-contrast: var(--color-loss-contrast);
|
|
|
|
|
--calendar-gap: var(--space-3);
|
|
|
|
|
--calendar-padding-xs: var(--space-2);
|
|
|
|
|
--calendar-padding-sm: var(--space-3);
|
|
|
|
|
--calendar-padding-md: var(--space-4);
|
|
|
|
|
--calendar-padding-lg: var(--space-5);
|
|
|
|
|
--calendar-radius: var(--radius-lg);
|
|
|
|
|
--calendar-border-width: var(--border-width);
|
|
|
|
|
--calendar-border: var(--color-border-subtle);
|
|
|
|
|
--calendar-invalid-border: var(--color-risk-border);
|
|
|
|
|
--calendar-bg: var(--color-surface-raised);
|
|
|
|
|
--calendar-outline-bg: var(--color-surface-default);
|
|
|
|
|
--calendar-outline-shadow: none;
|
|
|
|
|
--calendar-color: var(--color-content-primary);
|
|
|
|
|
--calendar-shadow: var(--shadow-sm);
|
|
|
|
|
--calendar-font-family: var(--font-ui);
|
|
|
|
|
--calendar-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--calendar-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--calendar-font-size-md: var(--font-size-sm);
|
|
|
|
|
--calendar-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--calendar-line-height: var(--leading-ui);
|
|
|
|
|
--calendar-header-gap: var(--space-2);
|
|
|
|
|
--calendar-heading-color: var(--color-content-primary);
|
|
|
|
|
--calendar-heading-font-size: var(--font-size-sm);
|
|
|
|
|
--calendar-heading-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--calendar-control-size-xs: var(--control-height-xxs);
|
|
|
|
|
--calendar-control-size-sm: var(--control-height-xs);
|
|
|
|
|
--calendar-control-size-md: var(--control-height-sm);
|
|
|
|
|
--calendar-control-size-lg: var(--control-height-md);
|
|
|
|
|
--calendar-control-radius: var(--radius-md);
|
|
|
|
|
--calendar-control-border-width: var(--border-width);
|
|
|
|
|
--calendar-control-border: transparent;
|
|
|
|
|
--calendar-control-border-hover: var(--color-border-subtle);
|
|
|
|
|
--calendar-control-bg: transparent;
|
|
|
|
|
--calendar-control-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--calendar-control-color: var(--color-content-secondary);
|
|
|
|
|
--calendar-control-color-hover: var(--color-content-primary);
|
|
|
|
|
--calendar-select-min-width: 8ch;
|
|
|
|
|
--calendar-select-px: var(--space-2);
|
|
|
|
|
--calendar-grid-gap: var(--space-0-5);
|
|
|
|
|
--calendar-weekday-size: var(--space-5);
|
|
|
|
|
--calendar-weekday-color: var(--color-content-muted);
|
|
|
|
|
--calendar-weekday-font-size: var(--font-size-xs);
|
|
|
|
|
--calendar-weekday-font-weight: var(--font-weight-medium);
|
|
|
|
|
--calendar-day-size-xs: var(--control-height-xxs);
|
|
|
|
|
--calendar-day-size-sm: var(--control-height-xs);
|
|
|
|
|
--calendar-day-size-md: var(--control-height-sm);
|
|
|
|
|
--calendar-day-size-lg: var(--control-height-md);
|
|
|
|
|
--calendar-day-radius: var(--radius-md);
|
|
|
|
|
--calendar-day-border-width: var(--border-width);
|
|
|
|
|
--calendar-day-border: transparent;
|
|
|
|
|
--calendar-day-border-hover: var(--color-border-subtle);
|
|
|
|
|
--calendar-day-bg: transparent;
|
|
|
|
|
--calendar-day-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--calendar-day-color: var(--color-content-primary);
|
|
|
|
|
--calendar-day-color-hover: var(--color-content-primary);
|
|
|
|
|
--calendar-day-font-weight: var(--font-weight-regular);
|
|
|
|
|
--calendar-day-selected-color: var(--color-content-on-solid);
|
|
|
|
|
--calendar-day-today-border: var(--color-border-strong);
|
|
|
|
|
--calendar-day-today-color: var(--color-content-primary);
|
|
|
|
|
--calendar-day-today-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--calendar-day-outside-color: var(--color-content-muted);
|
|
|
|
|
--calendar-day-outside-opacity: 0.62;
|
|
|
|
|
--calendar-day-weekend-color: var(--color-content-secondary);
|
|
|
|
|
--calendar-day-holiday-shadow: inset 0 -2px 0 var(--_calendar-accent-border);
|
|
|
|
|
--calendar-day-unavailable-decoration: var(--color-risk-border);
|
|
|
|
|
--calendar-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--calendar-event-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--_calendar-accent-border);
|
|
|
|
|
--calendar-transition-duration: var(--duration-fast);
|
|
|
|
|
--calendar-transition-ease: var(--ease-default);
|
|
|
|
|
--calendar-disabled-opacity: 0.52;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--pagination-gap-xs: var(--space-0-5);
|
|
|
|
|
--pagination-gap-sm: var(--space-1);
|
|
|
|
|
--pagination-gap-md: var(--space-1-5);
|
|
|
|
|
--pagination-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--pagination-control-size-xs: var(--control-height-xxs);
|
|
|
|
|
--pagination-control-size-sm: var(--control-height-xs);
|
|
|
|
|
--pagination-control-size-md: var(--control-height-sm);
|
|
|
|
|
--pagination-control-size-lg: var(--control-height-md);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--pagination-control-px-xs: var(--space-1-5);
|
|
|
|
|
--pagination-control-px-sm: var(--space-2);
|
|
|
|
|
--pagination-control-px-md: var(--space-2-5);
|
|
|
|
|
--pagination-control-px-lg: var(--space-3);
|
|
|
|
|
--pagination-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--pagination-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--pagination-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--pagination-font-size-md: var(--font-size-sm);
|
|
|
|
|
--pagination-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--pagination-line-height: var(--leading-ui);
|
|
|
|
|
--pagination-control-radius: var(--radius-md);
|
|
|
|
|
--pagination-control-border-width: var(--border-width);
|
|
|
|
|
--pagination-control-border: transparent;
|
|
|
|
|
--pagination-control-border-hover: var(--color-border-subtle);
|
|
|
|
|
--pagination-control-bg: transparent;
|
|
|
|
|
--pagination-control-bg-hover: var(--color-surface-raised);
|
|
|
|
|
--pagination-control-color: var(--color-content-secondary);
|
|
|
|
|
--pagination-control-color-hover: var(--color-content-primary);
|
|
|
|
|
--pagination-selected-border: var(--color-primary-border);
|
|
|
|
|
--pagination-selected-border-hover: var(--color-primary-border);
|
|
|
|
|
--pagination-selected-bg: var(--color-primary-solid);
|
|
|
|
|
--pagination-selected-bg-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--pagination-selected-color: var(--color-content-on-solid);
|
|
|
|
|
--pagination-ellipsis-color: var(--color-content-muted);
|
|
|
|
|
--pagination-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--pagination-transition-duration: var(--duration-fast);
|
|
|
|
|
--pagination-transition-ease: var(--ease-default);
|
|
|
|
|
--pagination-disabled-opacity: 0.56;
|
|
|
|
|
--popover-content-z: 75;
|
|
|
|
|
--popover-overlay-z: 60;
|
|
|
|
|
--popover-overlay-bg: var(--color-overlay);
|
|
|
|
|
--popover-trigger-font-size: var(--font-size-sm);
|
|
|
|
|
--popover-gap: var(--space-3);
|
|
|
|
|
--popover-max-width: 32rem;
|
|
|
|
|
--popover-min-width-sm: 14rem;
|
|
|
|
|
--popover-min-width-md: 18rem;
|
|
|
|
|
--popover-min-width-lg: 22rem;
|
|
|
|
|
--popover-min-width-xl: 28rem;
|
|
|
|
|
--popover-padding-y-sm: var(--space-2);
|
|
|
|
|
--popover-padding-x-sm: var(--space-2-5);
|
|
|
|
|
--popover-padding-y-md: var(--space-3);
|
|
|
|
|
--popover-padding-x-md: var(--space-3);
|
|
|
|
|
--popover-padding-y-lg: var(--space-3-5);
|
|
|
|
|
--popover-padding-x-lg: var(--space-4);
|
|
|
|
|
--popover-padding-y-xl: var(--space-4);
|
|
|
|
|
--popover-padding-x-xl: var(--space-5);
|
|
|
|
|
--popover-font-size: var(--font-size-sm);
|
|
|
|
|
--popover-font-family: var(--font-ui);
|
|
|
|
|
--popover-font-weight: var(--font-weight-regular);
|
|
|
|
|
--popover-line-height: var(--leading-text);
|
|
|
|
|
--popover-title-font-family: var(--font-heading);
|
|
|
|
|
--popover-title-font-size: var(--font-size-md);
|
|
|
|
|
--popover-title-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--popover-title-line-height: var(--leading-heading);
|
|
|
|
|
--popover-title-color: var(--color-content-primary);
|
|
|
|
|
--popover-description-font-family: var(--font-ui);
|
|
|
|
|
--popover-description-font-size: var(--font-size-sm);
|
|
|
|
|
--popover-description-line-height: var(--leading-ui);
|
|
|
|
|
--popover-description-color: var(--color-content-secondary);
|
|
|
|
|
--popover-radius: var(--radius-lg);
|
|
|
|
|
--popover-border-width: var(--border-width);
|
|
|
|
|
--popover-bg: var(--color-surface-overlay);
|
|
|
|
|
--popover-color: var(--color-content-primary);
|
|
|
|
|
--popover-border: color-mix( in srgb, var(--color-border-default) 82%, var(--popover-bg) );
|
|
|
|
|
--popover-shadow: var(--shadow-overlay);
|
|
|
|
|
--popover-transition-duration: var(--duration-fast);
|
|
|
|
|
--popover-transition-ease: var(--ease-default);
|
|
|
|
|
--popover-close-size: var(--control-height-xs);
|
|
|
|
|
--popover-close-font-size: var(--font-size-sm);
|
|
|
|
|
--popover-close-radius: var(--radius-md);
|
|
|
|
|
--popover-close-border-width: var(--border-width);
|
|
|
|
|
--popover-close-bg: transparent;
|
|
|
|
|
--popover-close-bg-hover: color-mix( in srgb, var(--color-neutral-track) 72%, var(--popover-bg) );
|
|
|
|
|
--popover-close-color: var(--color-content-secondary);
|
|
|
|
|
--popover-close-border: color-mix(in srgb, var(--color-border-default) 72%, transparent);
|
|
|
|
|
--popover-close-border-hover: var(--color-border-strong);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--progress-height-xs: 2px;
|
|
|
|
|
--progress-height-sm: 4px;
|
|
|
|
|
--progress-height-md: 6px;
|
|
|
|
|
--progress-height-lg: 8px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--progress-height-xl: 12px;
|
|
|
|
|
--progress-vertical-height: 10rem;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--progress-radius-xs: var(--radius-full);
|
|
|
|
|
--progress-radius-sm: var(--radius-full);
|
|
|
|
|
--progress-radius-md: var(--radius-full);
|
|
|
|
|
--progress-radius-lg: var(--radius-full);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--progress-radius-xl: var(--radius-full);
|
|
|
|
|
--progress-ring-size-xs: 2rem;
|
|
|
|
|
--progress-ring-size-sm: 2.5rem;
|
|
|
|
|
--progress-ring-size-md: 3rem;
|
|
|
|
|
--progress-ring-size-lg: 3.5rem;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--progress-ring-size-xl: 4rem;
|
|
|
|
|
--progress-ring-thickness-xs: 3px;
|
|
|
|
|
--progress-ring-thickness-sm: 4px;
|
|
|
|
|
--progress-ring-thickness-md: 6px;
|
|
|
|
|
--progress-ring-thickness-lg: 8px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--progress-ring-thickness-xl: 10px;
|
|
|
|
|
--progress-label-font-family: var(--font-ui);
|
|
|
|
|
--progress-label-font-size: var(--font-size-sm);
|
|
|
|
|
--progress-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--progress-label-line-height: var(--leading-ui);
|
|
|
|
|
--progress-label-color: var(--color-content-primary);
|
|
|
|
|
--progress-value-text-font-family: var(--font-ui);
|
|
|
|
|
--progress-value-text-font-size: var(--font-size-sm);
|
|
|
|
|
--progress-value-text-font-weight: var(--font-weight-regular);
|
|
|
|
|
--progress-value-text-line-height: var(--leading-ui);
|
|
|
|
|
--progress-value-text-color: var(--color-content-secondary);
|
|
|
|
|
--progress-track-bg: color-mix(in srgb, var(--color-content-primary) 12%, var(--color-surface-default));
|
|
|
|
|
--progress-ring-track-bg: color-mix(in srgb, var(--color-content-primary) 12%, var(--color-surface-default));
|
|
|
|
|
--progress-ring-center-bg: var(--color-surface-default);
|
|
|
|
|
--progress-indicator-bg: var(--color-primary-solid);
|
|
|
|
|
--progress-indicator-bg-loaded: var(--color-fulfill-solid);
|
|
|
|
|
--progress-transition-duration: var(--duration-normal);
|
|
|
|
|
--progress-transition-ease: var(--ease-default);
|
|
|
|
|
--progress-indeterminate-width: 35%;
|
|
|
|
|
--progress-indeterminate-duration: 1.1s;
|
|
|
|
|
--progress-indeterminate-ease: var(--ease-default);
|
|
|
|
|
--radio-group-gap-vertical: var(--space-3);
|
|
|
|
|
--radio-group-gap-horizontal: var(--space-4);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--radio-group-item-size-xs: 14px;
|
|
|
|
|
--radio-group-item-size-sm: 16px;
|
|
|
|
|
--radio-group-item-size-md: 18px;
|
|
|
|
|
--radio-group-item-size-lg: 22px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--radio-group-item-size-xl: 26px;
|
|
|
|
|
--radio-group-dot-size-xs: 5px;
|
|
|
|
|
--radio-group-dot-size-sm: 6px;
|
|
|
|
|
--radio-group-dot-size-md: 7px;
|
|
|
|
|
--radio-group-dot-size-lg: 9px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--radio-group-dot-size-xl: 11px;
|
|
|
|
|
--radio-group-item-gap: var(--space-3);
|
|
|
|
|
--radio-group-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--radio-group-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--radio-group-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--radio-group-font-size-md: var(--font-size-sm);
|
|
|
|
|
--radio-group-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--radio-group-font-size-xl: var(--font-size-md);
|
|
|
|
|
--radio-group-font-weight: var(--font-weight-medium);
|
|
|
|
|
--radio-group-line-height: var(--leading-ui);
|
|
|
|
|
--radio-group-item-label-color: var(--color-content-primary);
|
|
|
|
|
--radio-group-item-label-color-disabled: var(--color-content-disabled);
|
|
|
|
|
--radio-group-indicator-radius: var(--radius-full);
|
|
|
|
|
--radio-group-indicator-border-width: var(--border-width);
|
|
|
|
|
--radio-group-indicator-bg: var(--color-surface-default);
|
|
|
|
|
--radio-group-indicator-border: var(--color-border-default);
|
|
|
|
|
--radio-group-indicator-border-hover: var(--color-border-strong);
|
|
|
|
|
--radio-group-indicator-bg-disabled: color-mix( in srgb, var(--color-surface-overlay) 78%, var(--color-surface-default) );
|
|
|
|
|
--radio-group-indicator-border-disabled: color-mix( in srgb, var(--color-border-default) 72%, var(--color-border-subtle) );
|
|
|
|
|
--radio-group-indicator-bg-checked-disabled: color-mix( in srgb, var(--color-content-disabled) 40%, var(--color-surface-overlay) );
|
|
|
|
|
--radio-group-dot-color: var(--color-content-on-solid);
|
|
|
|
|
--radio-group-dot-color-disabled: color-mix( in srgb, var(--color-content-on-solid) 82%, var(--color-surface-default) );
|
|
|
|
|
--radio-group-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--radio-group-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--radio-group-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--radio-group-focus-ring-surface: var(--color-surface-default);
|
|
|
|
|
--radio-group-focus-ring: 0 0 0 var(--radio-group-focus-ring-offset) var(--radio-group-focus-ring-surface), 0 0 0 calc(var(--radio-group-focus-ring-offset) + var(--radio-group-focus-ring-width)) var(--radio-group-focus-ring-color);
|
|
|
|
|
--radio-group-transition-duration: var(--duration-fast);
|
|
|
|
|
--radio-group-transition-ease: var(--ease-default);
|
|
|
|
|
--radio-group-disabled-opacity: 0.72;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--radio-group-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--radio-group-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--radio-group-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--radio-group-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--radio-group-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--radio-group-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--radio-group-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--radio-group-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--radio-group-label-font-family: var(--font-ui);
|
|
|
|
|
--radio-group-label-font-size: var(--font-size-sm);
|
|
|
|
|
--radio-group-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--radio-group-label-line-height: var(--leading-ui);
|
|
|
|
|
--radio-group-label-color: var(--color-content-primary);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--rating-group-gap-xs: var(--space-0-5);
|
|
|
|
|
--rating-group-gap-sm: var(--space-1);
|
|
|
|
|
--rating-group-gap-md: var(--space-1-5);
|
|
|
|
|
--rating-group-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--rating-group-gap-xl: var(--space-2-5);
|
|
|
|
|
--rating-group-item-size-xs: 14px;
|
|
|
|
|
--rating-group-item-size-sm: 18px;
|
|
|
|
|
--rating-group-item-size-md: 22px;
|
|
|
|
|
--rating-group-item-size-lg: 28px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--rating-group-item-size-xl: 34px;
|
|
|
|
|
--rating-group-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--rating-group-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--rating-group-font-size-sm: var(--font-size-sm);
|
|
|
|
|
--rating-group-font-size-md: var(--font-size-md);
|
|
|
|
|
--rating-group-font-size-lg: var(--font-size-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--rating-group-font-size-xl: var(--font-size-xl);
|
|
|
|
|
--rating-group-line-height: var(--leading-ui);
|
|
|
|
|
--rating-group-item-color-inactive: var(--color-neutral-border);
|
|
|
|
|
--rating-group-item-color-active: var(--color-fulfill-solid);
|
|
|
|
|
--rating-group-item-color-partial: var(--color-fulfill-solid);
|
|
|
|
|
--rating-group-item-hover-offset: -1px;
|
|
|
|
|
--rating-group-focus-radius: var(--radius-md);
|
|
|
|
|
--rating-group-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--rating-group-transition-duration: var(--duration-fast);
|
|
|
|
|
--rating-group-transition-ease: var(--ease-default);
|
|
|
|
|
--rating-group-disabled-opacity: 0.56;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--search-field-height-xs: var(--control-height-xs);
|
|
|
|
|
--search-field-height-sm: var(--control-height-sm);
|
|
|
|
|
--search-field-height-md: var(--control-height-md);
|
|
|
|
|
--search-field-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--search-field-height-xl: var(--control-height-xl);
|
|
|
|
|
--search-field-px-xs: var(--space-2);
|
|
|
|
|
--search-field-px-sm: var(--space-2-5);
|
|
|
|
|
--search-field-px-md: var(--space-3);
|
|
|
|
|
--search-field-px-lg: var(--space-3-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--search-field-px-xl: var(--space-4);
|
|
|
|
|
--search-field-gap-xs: var(--space-1);
|
|
|
|
|
--search-field-gap-sm: var(--space-1-5);
|
|
|
|
|
--search-field-gap-md: var(--space-2);
|
|
|
|
|
--search-field-gap-lg: var(--space-2-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--search-field-gap-xl: var(--space-3);
|
|
|
|
|
--search-field-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--search-field-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--search-field-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--search-field-font-size-md: var(--font-size-sm);
|
|
|
|
|
--search-field-font-size-lg: var(--font-size-sm);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--search-field-font-size-xl: var(--font-size-md);
|
|
|
|
|
--search-field-line-height: var(--leading-ui);
|
|
|
|
|
--search-field-radius: var(--radius-md);
|
|
|
|
|
--search-field-border-width: var(--border-width);
|
|
|
|
|
--search-field-border: var(--color-border-default);
|
|
|
|
|
--search-field-border-focus: var(--color-focus-ring);
|
|
|
|
|
--search-field-border-invalid: var(--color-risk-border);
|
|
|
|
|
--search-field-bg: var(--color-surface-default);
|
|
|
|
|
--search-field-color: var(--color-content-primary);
|
|
|
|
|
--search-field-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--search-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--search-field-clear-hidden-opacity: 0;
|
|
|
|
|
--search-field-icon-size-xs: var(--icon-size-xs);
|
|
|
|
|
--search-field-icon-size-sm: var(--icon-size-sm);
|
|
|
|
|
--search-field-icon-size-md: var(--icon-size-md);
|
|
|
|
|
--search-field-icon-size-lg: var(--icon-size-md);
|
|
|
|
|
--search-field-icon-size-xl: var(--icon-size-lg);
|
|
|
|
|
--search-field-icon-color: var(--color-content-muted);
|
|
|
|
|
--search-field-icon-margin-inline-end: var(--space-1-5);
|
|
|
|
|
--search-field-loading-indicator-size-xs: var(--icon-size-xs);
|
|
|
|
|
--search-field-loading-indicator-size-sm: var(--icon-size-sm);
|
|
|
|
|
--search-field-loading-indicator-size-md: var(--icon-size-md);
|
|
|
|
|
--search-field-loading-indicator-size-lg: var(--icon-size-md);
|
|
|
|
|
--search-field-loading-indicator-size-xl: var(--icon-size-lg);
|
|
|
|
|
--search-field-loading-indicator-color: var(--color-content-muted);
|
|
|
|
|
--search-field-loading-indicator-track: var(--color-border-subtle);
|
|
|
|
|
--search-field-loading-indicator-thickness: 2px;
|
|
|
|
|
--search-field-loading-indicator-duration: 900ms;
|
|
|
|
|
--search-field-transition-duration: var(--duration-fast);
|
|
|
|
|
--search-field-transition-ease: var(--ease-default);
|
|
|
|
|
--search-field-disabled-opacity: 0.56;
|
fix(password-field): align input chrome with system + add Form/SIUM demo
Style fix — input chrome was hand-rolled with raw color tokens
(`--color-neutral-border`, `--ring-width`) instead of consuming the
recipe layer like every other text input. Now matches search-field and
number-field exactly:
- Added `password-field` recipe to `src/uix/eidos/lib/recipes/base.ts`
with the same surface as `search-field` (height, px, gap, font-size
per size; border, focus, invalid, bg, color, focus-shadow tokens).
- Regenerated `src/uix/eidos/generated/base.css`.
- Rewrote `password-field.css` to consume the new tokens — same focus
ring (`focus-shadow`), same border colors, same disabled opacity,
same transition tokens. VisibilityTrigger gets its own border/bg/
color-on-hover scheme aligned with search-field's clear button.
- Added per-size icon + caps font-size tokens so the trigger and caps
pill scale with the input.
Form + SIUM demo — answers "how does PasswordField validate?":
Added a new subsection in the Live tab with three working forms wired
through `<Form>` + `<Field>` and SIUM schemas:
1. Login (purpose='current', non-empty password)
2. Registration (purpose='new', complexity rules via regex pipes —
uppercase + digit + symbol + 8+ chars, plus the visual StrengthMeter
as a companion to the schema)
3. Password change (3 fields with a cross-field `refine()` so new ===
confirm; demonstrates SIUM's refine pattern)
The section explicitly documents that PasswordField has no built-in
complexity rules — validation is schema-first. The schema decides
what's "correct"; PasswordField's flags propagate via Field's OR-merge
of `formFieldState.isInvalid`.
svelte-check: 0 errors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--password-field-height-xs: var(--control-height-xs);
|
|
|
|
|
--password-field-height-sm: var(--control-height-sm);
|
|
|
|
|
--password-field-height-md: var(--control-height-md);
|
|
|
|
|
--password-field-height-lg: var(--control-height-lg);
|
|
|
|
|
--password-field-height-xl: var(--control-height-xl);
|
|
|
|
|
--password-field-px-xs: var(--space-2);
|
|
|
|
|
--password-field-px-sm: var(--space-2-5);
|
|
|
|
|
--password-field-px-md: var(--space-3);
|
|
|
|
|
--password-field-px-lg: var(--space-3-5);
|
|
|
|
|
--password-field-px-xl: var(--space-4);
|
|
|
|
|
--password-field-gap-xs: var(--space-1);
|
|
|
|
|
--password-field-gap-sm: var(--space-1-5);
|
|
|
|
|
--password-field-gap-md: var(--space-2);
|
|
|
|
|
--password-field-gap-lg: var(--space-2-5);
|
|
|
|
|
--password-field-gap-xl: var(--space-3);
|
|
|
|
|
--password-field-font-family: var(--font-ui);
|
|
|
|
|
--password-field-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--password-field-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--password-field-font-size-md: var(--font-size-sm);
|
|
|
|
|
--password-field-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--password-field-font-size-xl: var(--font-size-md);
|
|
|
|
|
--password-field-line-height: var(--leading-ui);
|
|
|
|
|
--password-field-radius: var(--radius-md);
|
|
|
|
|
--password-field-border-width: var(--border-width);
|
|
|
|
|
--password-field-border: var(--color-border-default);
|
|
|
|
|
--password-field-border-focus: var(--color-focus-ring);
|
|
|
|
|
--password-field-border-invalid: var(--color-risk-border);
|
|
|
|
|
--password-field-bg: var(--color-surface-default);
|
|
|
|
|
--password-field-color: var(--color-content-primary);
|
|
|
|
|
--password-field-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--password-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--password-field-trigger-radius: var(--radius-full);
|
|
|
|
|
--password-field-trigger-border-width: var(--border-width);
|
|
|
|
|
--password-field-trigger-border: transparent;
|
|
|
|
|
--password-field-trigger-border-hover: var(--color-border-subtle);
|
|
|
|
|
--password-field-trigger-bg: transparent;
|
|
|
|
|
--password-field-trigger-bg-hover: var(--color-surface-raised);
|
|
|
|
|
--password-field-trigger-color: var(--color-content-secondary);
|
|
|
|
|
--password-field-trigger-color-hover: var(--color-content-primary);
|
|
|
|
|
--password-field-trigger-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--password-field-icon-size-xs: var(--control-height-xs);
|
|
|
|
|
--password-field-icon-size-sm: var(--control-height-xs);
|
|
|
|
|
--password-field-icon-size-md: var(--control-height-sm);
|
|
|
|
|
--password-field-icon-size-lg: var(--control-height-sm);
|
|
|
|
|
--password-field-icon-size-xl: var(--control-height-md);
|
fix(password-field): align input chrome with system + add Form/SIUM demo
Style fix — input chrome was hand-rolled with raw color tokens
(`--color-neutral-border`, `--ring-width`) instead of consuming the
recipe layer like every other text input. Now matches search-field and
number-field exactly:
- Added `password-field` recipe to `src/uix/eidos/lib/recipes/base.ts`
with the same surface as `search-field` (height, px, gap, font-size
per size; border, focus, invalid, bg, color, focus-shadow tokens).
- Regenerated `src/uix/eidos/generated/base.css`.
- Rewrote `password-field.css` to consume the new tokens — same focus
ring (`focus-shadow`), same border colors, same disabled opacity,
same transition tokens. VisibilityTrigger gets its own border/bg/
color-on-hover scheme aligned with search-field's clear button.
- Added per-size icon + caps font-size tokens so the trigger and caps
pill scale with the input.
Form + SIUM demo — answers "how does PasswordField validate?":
Added a new subsection in the Live tab with three working forms wired
through `<Form>` + `<Field>` and SIUM schemas:
1. Login (purpose='current', non-empty password)
2. Registration (purpose='new', complexity rules via regex pipes —
uppercase + digit + symbol + 8+ chars, plus the visual StrengthMeter
as a companion to the schema)
3. Password change (3 fields with a cross-field `refine()` so new ===
confirm; demonstrates SIUM's refine pattern)
The section explicitly documents that PasswordField has no built-in
complexity rules — validation is schema-first. The schema decides
what's "correct"; PasswordField's flags propagate via Field's OR-merge
of `formFieldState.isInvalid`.
svelte-check: 0 errors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--password-field-caps-color: var(--color-risk-text);
|
|
|
|
|
--password-field-caps-bg: color-mix(in srgb, var(--color-risk-track) 50%, transparent);
|
|
|
|
|
--password-field-caps-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--password-field-caps-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--password-field-caps-font-size-md: var(--font-size-xs);
|
|
|
|
|
--password-field-caps-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--password-field-caps-font-size-xl: var(--font-size-sm);
|
|
|
|
|
--password-field-strength-segment-bg: var(--color-border-default);
|
fix(password-field): align input chrome with system + add Form/SIUM demo
Style fix — input chrome was hand-rolled with raw color tokens
(`--color-neutral-border`, `--ring-width`) instead of consuming the
recipe layer like every other text input. Now matches search-field and
number-field exactly:
- Added `password-field` recipe to `src/uix/eidos/lib/recipes/base.ts`
with the same surface as `search-field` (height, px, gap, font-size
per size; border, focus, invalid, bg, color, focus-shadow tokens).
- Regenerated `src/uix/eidos/generated/base.css`.
- Rewrote `password-field.css` to consume the new tokens — same focus
ring (`focus-shadow`), same border colors, same disabled opacity,
same transition tokens. VisibilityTrigger gets its own border/bg/
color-on-hover scheme aligned with search-field's clear button.
- Added per-size icon + caps font-size tokens so the trigger and caps
pill scale with the input.
Form + SIUM demo — answers "how does PasswordField validate?":
Added a new subsection in the Live tab with three working forms wired
through `<Form>` + `<Field>` and SIUM schemas:
1. Login (purpose='current', non-empty password)
2. Registration (purpose='new', complexity rules via regex pipes —
uppercase + digit + symbol + 8+ chars, plus the visual StrengthMeter
as a companion to the schema)
3. Password change (3 fields with a cross-field `refine()` so new ===
confirm; demonstrates SIUM's refine pattern)
The section explicitly documents that PasswordField has no built-in
complexity rules — validation is schema-first. The schema decides
what's "correct"; PasswordField's flags propagate via Field's OR-merge
of `formFieldState.isInvalid`.
svelte-check: 0 errors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--password-field-strength-segment-gap: 4px;
|
|
|
|
|
--password-field-strength-segment-height: 6px;
|
fix(password-field): align input chrome with system + add Form/SIUM demo
Style fix — input chrome was hand-rolled with raw color tokens
(`--color-neutral-border`, `--ring-width`) instead of consuming the
recipe layer like every other text input. Now matches search-field and
number-field exactly:
- Added `password-field` recipe to `src/uix/eidos/lib/recipes/base.ts`
with the same surface as `search-field` (height, px, gap, font-size
per size; border, focus, invalid, bg, color, focus-shadow tokens).
- Regenerated `src/uix/eidos/generated/base.css`.
- Rewrote `password-field.css` to consume the new tokens — same focus
ring (`focus-shadow`), same border colors, same disabled opacity,
same transition tokens. VisibilityTrigger gets its own border/bg/
color-on-hover scheme aligned with search-field's clear button.
- Added per-size icon + caps font-size tokens so the trigger and caps
pill scale with the input.
Form + SIUM demo — answers "how does PasswordField validate?":
Added a new subsection in the Live tab with three working forms wired
through `<Form>` + `<Field>` and SIUM schemas:
1. Login (purpose='current', non-empty password)
2. Registration (purpose='new', complexity rules via regex pipes —
uppercase + digit + symbol + 8+ chars, plus the visual StrengthMeter
as a companion to the schema)
3. Password change (3 fields with a cross-field `refine()` so new ===
confirm; demonstrates SIUM's refine pattern)
The section explicitly documents that PasswordField has no built-in
complexity rules — validation is schema-first. The schema decides
what's "correct"; PasswordField's flags propagate via Field's OR-merge
of `formFieldState.isInvalid`.
svelte-check: 0 errors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--password-field-strength-radius: var(--radius-sm);
|
|
|
|
|
--password-field-transition-duration: var(--duration-fast);
|
|
|
|
|
--password-field-transition-ease: var(--ease-default);
|
|
|
|
|
--password-field-disabled-opacity: 0.56;
|
|
|
|
|
--select-stack-gap: var(--space-2);
|
|
|
|
|
--select-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--select-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--select-font-size-md: var(--font-size-sm);
|
|
|
|
|
--select-font-size-lg: var(--font-size-md);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-font-size-xl: var(--font-size-lg);
|
|
|
|
|
--select-line-height: var(--leading-ui);
|
|
|
|
|
--select-color: var(--color-content-primary);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-primary-text: var(--color-primary-text);
|
|
|
|
|
--select-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--select-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--select-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--select-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--select-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--select-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--select-risk-text: var(--color-risk-text);
|
|
|
|
|
--select-threat-text: var(--color-threat-text);
|
|
|
|
|
--select-loss-track: var(--color-loss-track);
|
|
|
|
|
--select-loss-border: var(--color-loss-border);
|
|
|
|
|
--select-loss-text: var(--color-loss-text);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-trigger-height-xs: var(--control-height-xs);
|
|
|
|
|
--select-trigger-height-sm: var(--control-height-sm);
|
|
|
|
|
--select-trigger-height-md: var(--control-height-md);
|
|
|
|
|
--select-trigger-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-trigger-height-xl: var(--control-height-xl);
|
|
|
|
|
--select-trigger-px-xs: var(--space-2);
|
|
|
|
|
--select-trigger-px-sm: var(--space-2-5);
|
|
|
|
|
--select-trigger-px-md: var(--space-3);
|
|
|
|
|
--select-trigger-px-lg: var(--space-3-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-trigger-px-xl: var(--space-4);
|
|
|
|
|
--select-trigger-gap-xs: var(--space-1);
|
|
|
|
|
--select-trigger-gap-sm: var(--space-1-5);
|
|
|
|
|
--select-trigger-gap-md: var(--space-2);
|
|
|
|
|
--select-trigger-gap-lg: var(--space-2-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-trigger-gap-xl: var(--space-3);
|
|
|
|
|
--select-trigger-border-width: var(--border-width);
|
|
|
|
|
--select-trigger-border: var(--color-border-default);
|
|
|
|
|
--select-trigger-border-hover: var(--color-border-strong);
|
|
|
|
|
--select-trigger-radius: var(--radius-md);
|
|
|
|
|
--select-trigger-bg: var(--color-surface-default);
|
|
|
|
|
--select-trigger-bg-hover: var(--color-surface-raised);
|
|
|
|
|
--select-trigger-shadow: var(--shadow-xs);
|
|
|
|
|
--select-trigger-color: var(--color-content-primary);
|
|
|
|
|
--select-trigger-indicator-color: var(--color-content-secondary);
|
|
|
|
|
--select-trigger-indicator-size: var(--icon-size-sm);
|
|
|
|
|
--select-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--select-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--select-disabled-border: var(--color-border-subtle);
|
|
|
|
|
--select-disabled-bg: var(--color-surface-raised);
|
|
|
|
|
--select-disabled-color: var(--color-content-disabled);
|
|
|
|
|
--select-content-z: 80;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-content-py-xs: var(--space-0-5);
|
|
|
|
|
--select-content-py-sm: var(--space-1);
|
|
|
|
|
--select-content-py-md: var(--space-1-5);
|
|
|
|
|
--select-content-py-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-content-py-xl: var(--space-2-5);
|
|
|
|
|
--select-content-px-xs: var(--space-0-5);
|
|
|
|
|
--select-content-px-sm: var(--space-1);
|
|
|
|
|
--select-content-px-md: var(--space-1-5);
|
|
|
|
|
--select-content-px-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-content-px-xl: var(--space-2-5);
|
|
|
|
|
--select-content-min-width: 12rem;
|
|
|
|
|
--select-content-max-width: 24rem;
|
|
|
|
|
--select-content-max-height: min(20rem, calc(100dvh - var(--space-6)));
|
|
|
|
|
--select-content-border-width: var(--border-width);
|
|
|
|
|
--select-content-border: var(--color-border-default);
|
|
|
|
|
--select-content-radius: var(--radius-lg);
|
|
|
|
|
--select-content-bg: var(--color-surface-overlay);
|
|
|
|
|
--select-content-color: var(--color-content-primary);
|
|
|
|
|
--select-content-shadow: var(--shadow-lg);
|
|
|
|
|
--select-content-outline-shadow: var(--shadow-md);
|
|
|
|
|
--select-content-ghost-shadow: var(--shadow-md);
|
|
|
|
|
--select-open-duration: var(--duration-normal);
|
|
|
|
|
--select-close-duration: var(--duration-fast);
|
|
|
|
|
--select-viewport-gap: var(--space-0-5);
|
|
|
|
|
--select-viewport-padding: var(--space-0-5);
|
|
|
|
|
--select-group-gap: var(--space-0-5);
|
|
|
|
|
--select-group-py: var(--space-1);
|
|
|
|
|
--select-group-heading-py: var(--space-1);
|
|
|
|
|
--select-group-heading-px: var(--space-2);
|
|
|
|
|
--select-group-heading-font-family: var(--font-ui);
|
|
|
|
|
--select-group-heading-font-size: var(--font-size-xs);
|
|
|
|
|
--select-group-heading-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--select-group-heading-letter-spacing: 0.04em;
|
|
|
|
|
--select-group-heading-color: var(--color-content-muted);
|
|
|
|
|
--select-separator-size: var(--border-width);
|
|
|
|
|
--select-separator-my: var(--space-1);
|
|
|
|
|
--select-separator-bg: var(--color-border-subtle);
|
|
|
|
|
--select-item-gap: var(--space-2);
|
|
|
|
|
--select-item-min-height: var(--control-height-sm);
|
|
|
|
|
--select-item-px: var(--space-2);
|
|
|
|
|
--select-item-radius: var(--radius-md);
|
|
|
|
|
--select-item-color: var(--color-content-primary);
|
|
|
|
|
--select-item-bg-highlighted: var(--color-surface-raised);
|
|
|
|
|
--select-item-color-highlighted: var(--color-content-primary);
|
|
|
|
|
--select-item-indicator-size: var(--icon-size-sm);
|
fix(uix audit): apply Kim audit remediations across morfo/soma/eidos/recipe layers
Resolves 34 of 40 failures from src/uix/audit-uix-kimi-1.md. The remaining
6 are all Words component (excluded per project owner — actively developed
on a separate track) or unrelated infra (cookie-adapter-client jsdom timeout).
Key changes:
- soma/provider/context.ts: swallow Svelte's `lifecycle_outside_component`
in `context.set()` so unit tests can instantiate providers without a
component tree (unblocked 18 picker tests in one line).
- soma/textarea: route inline style writes through `dom.apply({attrs})`
instead of direct `el.style.X = Y` (contract regex compliance).
- soma/picker-shell: add minimal Provider component + morfo so the shared
handle utility passes the morfo/component contract.
- eidos/_layout: lift `shared.ts` to `eidos/lib/layout-helpers.ts` (the
`_layout` directory wasn't a real component) and update 8 layout
primitive imports.
- eidos/command: replace `onMount` with `$effect` (visual layer can't use
Svelte 4 lifecycle hooks per component-api contract); restructure
`Item.Icon`/`Item.Shortcut` namespace so contract regex matches.
- eidos/color-picker: extract hue spectrum hsl literals to sidecar
`color-picker-spectrum.css`; keep main recipe color-literal-free.
- eidos/lib/recipes/base.ts: declare 196 layout-primitive + chrome CSS
vars (box, flex, grid, float, group, banner, container, section,
separator, toggle-group, pin-input, scroll-area, splitter,
navigation-menu, dropdown-menu, context-menu, date-range-field,
time-range-field, plus per-component additions to date-field,
color-picker, button, select). 197 missing → 0 non-Words.
- morfo: add `data-dir` to carousel, `data-kind` to date-picker, add
StrengthMeterLabel sub-part to password-field, register picker-shell.
- 5 pickers (date/color/date-range/time/time-range): add `internals.ts`
indirection so `exports.ts` doesn't re-export `*provider.svelte.ts`
directly (contract D); rewrite virtual root types to plain object
literals (no `WithChild`/`PrimitiveDivAttributes`).
- 4 new READMEs (button, textarea, password-field, picker-shell)
following the search-field canonical template.
Test result: 2391/2397 passing (99.75%). Remaining 6 failures are all
Words-scope or jsdom infra timeout — explicitly out of scope.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-item-focus-ring-width: 2px;
|
|
|
|
|
--select-item-description-mt: 0.125rem;
|
|
|
|
|
--select-item-description-color: var(--color-content-muted);
|
|
|
|
|
--select-item-description-font-size: 0.85em;
|
|
|
|
|
--select-transition-duration: var(--duration-fast);
|
|
|
|
|
--select-transition-ease: var(--ease-default);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--select-primary-track: var(--color-primary-track);
|
|
|
|
|
--select-primary-border: var(--color-primary-border);
|
|
|
|
|
--select-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--select-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--select-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--select-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--select-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--select-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--select-risk-track: var(--color-risk-track);
|
|
|
|
|
--select-risk-border: var(--color-risk-border);
|
|
|
|
|
--select-threat-track: var(--color-threat-track);
|
|
|
|
|
--select-threat-border: var(--color-threat-border);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-gap-xs: var(--space-0-5);
|
|
|
|
|
--toolbar-gap-sm: var(--space-1);
|
|
|
|
|
--toolbar-gap-md: var(--space-1-5);
|
|
|
|
|
--toolbar-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-padding-inline-xs: var(--space-0-5);
|
|
|
|
|
--toolbar-padding-inline-sm: var(--space-1);
|
|
|
|
|
--toolbar-padding-inline-md: var(--space-1-5);
|
|
|
|
|
--toolbar-padding-inline-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-padding-block-xs: var(--space-0-5);
|
|
|
|
|
--toolbar-padding-block-sm: var(--space-1);
|
|
|
|
|
--toolbar-padding-block-md: var(--space-1);
|
|
|
|
|
--toolbar-padding-block-lg: var(--space-1-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-control-height-xs: var(--control-height-xs);
|
|
|
|
|
--toolbar-control-height-sm: var(--control-height-sm);
|
|
|
|
|
--toolbar-control-height-md: var(--control-height-md);
|
|
|
|
|
--toolbar-control-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-control-px-xs: var(--space-1-5);
|
|
|
|
|
--toolbar-control-px-sm: var(--space-2);
|
|
|
|
|
--toolbar-control-px-md: var(--space-2-5);
|
|
|
|
|
--toolbar-control-px-lg: var(--space-3);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-control-gap-xs: var(--space-0-5);
|
|
|
|
|
--toolbar-control-gap-sm: var(--space-1);
|
|
|
|
|
--toolbar-control-gap-md: var(--space-1-5);
|
|
|
|
|
--toolbar-control-gap-lg: var(--space-2);
|
|
|
|
|
--toolbar-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toolbar-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--toolbar-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--toolbar-font-size-md: var(--font-size-sm);
|
|
|
|
|
--toolbar-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--toolbar-line-height: var(--leading-ui);
|
|
|
|
|
--toolbar-radius: var(--radius-lg);
|
|
|
|
|
--toolbar-bg: var(--color-surface-raised);
|
|
|
|
|
--toolbar-border: var(--color-border-subtle);
|
|
|
|
|
--toolbar-border-width: var(--border-width);
|
|
|
|
|
--toolbar-shadow: var(--shadow-xs);
|
|
|
|
|
--toolbar-color: var(--color-content-primary);
|
|
|
|
|
--toolbar-group-gap: var(--space-0-5);
|
|
|
|
|
--toolbar-control-radius: var(--radius-md);
|
|
|
|
|
--toolbar-control-border-width: var(--border-width);
|
|
|
|
|
--toolbar-control-border: transparent;
|
|
|
|
|
--toolbar-control-border-hover: var(--color-border-subtle);
|
|
|
|
|
--toolbar-control-border-active: var(--color-primary-border);
|
|
|
|
|
--toolbar-control-bg: transparent;
|
|
|
|
|
--toolbar-control-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--toolbar-control-bg-active: var(--color-primary-track);
|
|
|
|
|
--toolbar-control-color: var(--color-content-secondary);
|
|
|
|
|
--toolbar-control-color-hover: var(--color-content-primary);
|
|
|
|
|
--toolbar-control-color-active: var(--color-primary-text);
|
|
|
|
|
--toolbar-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--toolbar-separator-bg: var(--color-border-subtle);
|
|
|
|
|
--toolbar-separator-thickness: var(--border-width);
|
|
|
|
|
--toolbar-separator-length: var(--control-height-md);
|
|
|
|
|
--toolbar-separator-radius: var(--radius-full);
|
|
|
|
|
--toolbar-transition-duration: var(--duration-fast);
|
|
|
|
|
--toolbar-transition-ease: var(--ease-default);
|
|
|
|
|
--toolbar-disabled-opacity: 0.48;
|
|
|
|
|
--file-upload-gap-sm: var(--space-2);
|
|
|
|
|
--file-upload-gap-md: var(--space-3);
|
|
|
|
|
--file-upload-gap-lg: var(--space-4);
|
|
|
|
|
--file-upload-padding-sm: var(--space-4);
|
|
|
|
|
--file-upload-padding-md: var(--space-5);
|
|
|
|
|
--file-upload-padding-lg: var(--space-6);
|
|
|
|
|
--file-upload-control-height-sm: var(--control-height-sm);
|
|
|
|
|
--file-upload-control-height-md: var(--control-height-md);
|
|
|
|
|
--file-upload-control-height-lg: var(--control-height-lg);
|
|
|
|
|
--file-upload-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--file-upload-font-size-md: var(--font-size-sm);
|
|
|
|
|
--file-upload-font-size-lg: var(--font-size-md);
|
|
|
|
|
--file-upload-preview-size-sm: 32px;
|
|
|
|
|
--file-upload-preview-size-md: 40px;
|
|
|
|
|
--file-upload-preview-size-lg: 48px;
|
|
|
|
|
--file-upload-font-family: var(--font-ui);
|
|
|
|
|
--file-upload-line-height: var(--leading-ui);
|
|
|
|
|
--file-upload-color: var(--color-content-primary);
|
|
|
|
|
--file-upload-label-color: var(--color-content-secondary);
|
|
|
|
|
--file-upload-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--file-upload-dropzone-gap: var(--space-2);
|
|
|
|
|
--file-upload-dropzone-min-height: 9rem;
|
|
|
|
|
--file-upload-dropzone-border-width: var(--border-width);
|
|
|
|
|
--file-upload-dropzone-border: var(--color-border-default);
|
|
|
|
|
--file-upload-dropzone-radius: var(--radius-lg);
|
|
|
|
|
--file-upload-dropzone-bg: var(--color-surface-raised);
|
|
|
|
|
--file-upload-dropzone-color: var(--color-content-secondary);
|
|
|
|
|
--file-upload-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--file-upload-button-gap: var(--space-1-5);
|
|
|
|
|
--file-upload-button-px: var(--space-3);
|
|
|
|
|
--file-upload-button-border-width: var(--border-width);
|
|
|
|
|
--file-upload-button-border: var(--color-border-subtle);
|
|
|
|
|
--file-upload-button-border-hover: var(--color-border-default);
|
|
|
|
|
--file-upload-button-radius: var(--radius-md);
|
|
|
|
|
--file-upload-button-bg: var(--color-surface-raised);
|
|
|
|
|
--file-upload-button-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--file-upload-button-color: var(--color-content-secondary);
|
|
|
|
|
--file-upload-button-color-hover: var(--color-content-primary);
|
|
|
|
|
--file-upload-button-solid-color: var(--color-content-on-solid);
|
|
|
|
|
--file-upload-list-gap: var(--space-2);
|
|
|
|
|
--file-upload-item-gap: var(--space-3);
|
|
|
|
|
--file-upload-item-padding: var(--space-2);
|
|
|
|
|
--file-upload-item-border-width: var(--border-width);
|
|
|
|
|
--file-upload-item-border: var(--color-border-subtle);
|
|
|
|
|
--file-upload-item-radius: var(--radius-md);
|
|
|
|
|
--file-upload-item-bg: var(--color-surface-raised);
|
|
|
|
|
--file-upload-item-shadow: var(--shadow-xs);
|
|
|
|
|
--file-upload-preview-radius: var(--radius-sm);
|
|
|
|
|
--file-upload-preview-bg: var(--color-neutral-track);
|
|
|
|
|
--file-upload-preview-color: var(--color-neutral-text);
|
|
|
|
|
--file-upload-item-name-color: var(--color-content-primary);
|
|
|
|
|
--file-upload-item-name-font-weight: var(--font-weight-medium);
|
|
|
|
|
--file-upload-item-size-color: var(--color-content-muted);
|
|
|
|
|
--file-upload-item-size-font-size: var(--font-size-xs);
|
|
|
|
|
--file-upload-progress-height: 4px;
|
|
|
|
|
--file-upload-progress-radius: var(--radius-full);
|
|
|
|
|
--file-upload-progress-track-bg: var(--color-neutral-track);
|
|
|
|
|
--file-upload-transition-duration: var(--duration-fast);
|
|
|
|
|
--file-upload-transition-ease: var(--ease-default);
|
|
|
|
|
--file-upload-disabled-opacity: 0.52;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--file-upload-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--file-upload-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--file-upload-primary-text: var(--color-primary-text);
|
|
|
|
|
--file-upload-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--file-upload-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--file-upload-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--file-upload-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--file-upload-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--file-upload-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--file-upload-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--file-upload-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--file-upload-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--file-upload-fulfill-solid: var(--color-fulfill-solid);
|
|
|
|
|
--file-upload-fulfill-solid-hover: var(--color-fulfill-solid-hover);
|
|
|
|
|
--file-upload-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--file-upload-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--file-upload-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--file-upload-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--file-upload-risk-solid-hover: var(--color-risk-solid-hover);
|
|
|
|
|
--file-upload-risk-text: var(--color-risk-text);
|
|
|
|
|
--file-upload-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--file-upload-threat-solid-hover: var(--color-threat-solid-hover);
|
|
|
|
|
--file-upload-threat-text: var(--color-threat-text);
|
|
|
|
|
--file-upload-loss-solid: var(--color-loss-solid);
|
|
|
|
|
--file-upload-loss-solid-hover: var(--color-loss-solid-hover);
|
|
|
|
|
--file-upload-loss-track: var(--color-loss-track);
|
|
|
|
|
--file-upload-loss-border: var(--color-loss-border);
|
|
|
|
|
--file-upload-loss-text: var(--color-loss-text);
|
|
|
|
|
--file-upload-primary-track: var(--color-primary-track);
|
|
|
|
|
--file-upload-primary-border: var(--color-primary-border);
|
|
|
|
|
--file-upload-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--file-upload-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--file-upload-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--file-upload-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--file-upload-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--file-upload-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--file-upload-risk-track: var(--color-risk-track);
|
|
|
|
|
--file-upload-risk-border: var(--color-risk-border);
|
|
|
|
|
--file-upload-threat-track: var(--color-threat-track);
|
|
|
|
|
--file-upload-threat-border: var(--color-threat-border);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tag-group-gap-xs: var(--space-0-5);
|
|
|
|
|
--tag-group-gap-sm: var(--space-1);
|
|
|
|
|
--tag-group-gap-md: var(--space-1-5);
|
|
|
|
|
--tag-group-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tag-group-item-height-xs: var(--control-height-xs);
|
|
|
|
|
--tag-group-item-height-sm: var(--control-height-sm);
|
|
|
|
|
--tag-group-item-height-md: var(--control-height-md);
|
|
|
|
|
--tag-group-item-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tag-group-item-px-xs: var(--space-1-5);
|
|
|
|
|
--tag-group-item-px-sm: var(--space-2);
|
|
|
|
|
--tag-group-item-px-md: var(--space-2-5);
|
|
|
|
|
--tag-group-item-px-lg: var(--space-3);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tag-group-item-gap-xs: var(--space-0-5);
|
|
|
|
|
--tag-group-item-gap-sm: var(--space-1);
|
|
|
|
|
--tag-group-item-gap-md: var(--space-1-5);
|
|
|
|
|
--tag-group-item-gap-lg: var(--space-2);
|
|
|
|
|
--tag-group-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tag-group-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--tag-group-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--tag-group-font-size-md: var(--font-size-sm);
|
|
|
|
|
--tag-group-font-size-lg: var(--font-size-sm);
|
|
|
|
|
--tag-group-line-height: var(--leading-ui);
|
|
|
|
|
--tag-group-color: var(--color-content-primary);
|
|
|
|
|
--tag-group-label-color: var(--color-content-secondary);
|
|
|
|
|
--tag-group-label-font-weight: var(--font-weight-medium);
|
|
|
|
|
--tag-group-item-radius: var(--radius-full);
|
|
|
|
|
--tag-group-item-border-width: var(--border-width);
|
|
|
|
|
--tag-group-item-border: var(--color-border-subtle);
|
|
|
|
|
--tag-group-item-border-hover: var(--color-border-default);
|
|
|
|
|
--tag-group-item-bg: var(--color-surface-raised);
|
|
|
|
|
--tag-group-item-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--tag-group-item-shadow: var(--shadow-xs);
|
|
|
|
|
--tag-group-item-color: var(--color-content-secondary);
|
|
|
|
|
--tag-group-item-color-hover: var(--color-content-primary);
|
|
|
|
|
--tag-group-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--tag-group-solid-fg: var(--color-content-on-solid);
|
|
|
|
|
--tag-group-remove-size: var(--control-height-xs);
|
|
|
|
|
--tag-group-remove-radius: var(--radius-full);
|
|
|
|
|
--tag-group-remove-border-width: var(--border-width);
|
|
|
|
|
--tag-group-remove-border: transparent;
|
|
|
|
|
--tag-group-remove-border-hover: var(--color-border-subtle);
|
|
|
|
|
--tag-group-remove-bg: transparent;
|
|
|
|
|
--tag-group-remove-bg-hover: color-mix(in srgb, currentColor 12%, transparent);
|
|
|
|
|
--tag-group-transition-duration: var(--duration-fast);
|
|
|
|
|
--tag-group-transition-ease: var(--ease-default);
|
|
|
|
|
--tag-group-disabled-opacity: 0.5;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tag-group-primary-solid-bg: var(--color-primary-solid);
|
|
|
|
|
--tag-group-primary-solid-bg-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--tag-group-primary-soft-bg: var(--color-primary-track);
|
|
|
|
|
--tag-group-primary-soft-bg-hover: color-mix(in srgb, var(--color-primary-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-primary-soft-fg: var(--color-primary-text);
|
|
|
|
|
--tag-group-primary-outline-border: var(--color-primary-border);
|
|
|
|
|
--tag-group-primary-outline-fg: var(--color-primary-text);
|
|
|
|
|
--tag-group-secondary-solid-bg: var(--color-secondary-solid);
|
|
|
|
|
--tag-group-secondary-solid-bg-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--tag-group-secondary-soft-bg: var(--color-secondary-track);
|
|
|
|
|
--tag-group-secondary-soft-bg-hover: color-mix(in srgb, var(--color-secondary-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-secondary-soft-fg: var(--color-secondary-text);
|
|
|
|
|
--tag-group-secondary-outline-border: var(--color-secondary-border);
|
|
|
|
|
--tag-group-secondary-outline-fg: var(--color-secondary-text);
|
|
|
|
|
--tag-group-neutral-solid-bg: var(--color-neutral-solid);
|
|
|
|
|
--tag-group-neutral-solid-bg-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--tag-group-neutral-soft-bg: var(--color-neutral-track);
|
|
|
|
|
--tag-group-neutral-soft-bg-hover: color-mix(in srgb, var(--color-neutral-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-neutral-soft-fg: var(--color-neutral-text);
|
|
|
|
|
--tag-group-neutral-outline-border: var(--color-neutral-border);
|
|
|
|
|
--tag-group-neutral-outline-fg: var(--color-neutral-text);
|
|
|
|
|
--tag-group-affirm-solid-bg: var(--color-affirm-solid);
|
|
|
|
|
--tag-group-affirm-solid-bg-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--tag-group-affirm-soft-bg: var(--color-affirm-track);
|
|
|
|
|
--tag-group-affirm-soft-bg-hover: color-mix(in srgb, var(--color-affirm-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-affirm-soft-fg: var(--color-affirm-text);
|
|
|
|
|
--tag-group-affirm-outline-border: var(--color-affirm-border);
|
|
|
|
|
--tag-group-affirm-outline-fg: var(--color-affirm-text);
|
|
|
|
|
--tag-group-fulfill-solid-bg: var(--color-fulfill-solid);
|
|
|
|
|
--tag-group-fulfill-solid-bg-hover: var(--color-fulfill-solid-hover);
|
|
|
|
|
--tag-group-fulfill-soft-bg: var(--color-fulfill-track);
|
|
|
|
|
--tag-group-fulfill-soft-bg-hover: color-mix(in srgb, var(--color-fulfill-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-fulfill-soft-fg: var(--color-fulfill-text);
|
|
|
|
|
--tag-group-fulfill-outline-border: var(--color-fulfill-border);
|
|
|
|
|
--tag-group-fulfill-outline-fg: var(--color-fulfill-text);
|
|
|
|
|
--tag-group-risk-solid-bg: var(--color-risk-solid);
|
|
|
|
|
--tag-group-risk-solid-bg-hover: var(--color-risk-solid-hover);
|
|
|
|
|
--tag-group-risk-soft-bg: var(--color-risk-track);
|
|
|
|
|
--tag-group-risk-soft-bg-hover: color-mix(in srgb, var(--color-risk-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-risk-soft-fg: var(--color-risk-text);
|
|
|
|
|
--tag-group-risk-outline-border: var(--color-risk-border);
|
|
|
|
|
--tag-group-risk-outline-fg: var(--color-risk-text);
|
|
|
|
|
--tag-group-threat-solid-bg: var(--color-threat-solid);
|
|
|
|
|
--tag-group-threat-solid-bg-hover: var(--color-threat-solid-hover);
|
|
|
|
|
--tag-group-threat-soft-bg: var(--color-threat-track);
|
|
|
|
|
--tag-group-threat-soft-bg-hover: color-mix(in srgb, var(--color-threat-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-threat-soft-fg: var(--color-threat-text);
|
|
|
|
|
--tag-group-threat-outline-border: var(--color-threat-border);
|
|
|
|
|
--tag-group-threat-outline-fg: var(--color-threat-text);
|
|
|
|
|
--tag-group-loss-solid-bg: var(--color-loss-solid);
|
|
|
|
|
--tag-group-loss-solid-bg-hover: var(--color-loss-solid-hover);
|
|
|
|
|
--tag-group-loss-soft-bg: var(--color-loss-track);
|
|
|
|
|
--tag-group-loss-soft-bg-hover: color-mix(in srgb, var(--color-loss-track) 74%, var(--color-surface-overlay));
|
|
|
|
|
--tag-group-loss-soft-fg: var(--color-loss-text);
|
|
|
|
|
--tag-group-loss-outline-border: var(--color-loss-border);
|
|
|
|
|
--tag-group-loss-outline-fg: var(--color-loss-text);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-gap-xs: var(--space-0-5);
|
|
|
|
|
--editable-gap-sm: var(--space-1);
|
|
|
|
|
--editable-gap-md: var(--space-1-5);
|
|
|
|
|
--editable-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-gap-xl: var(--space-2-5);
|
|
|
|
|
--editable-control-height-xs: var(--control-height-xs);
|
|
|
|
|
--editable-control-height-sm: var(--control-height-sm);
|
|
|
|
|
--editable-control-height-md: var(--control-height-md);
|
|
|
|
|
--editable-control-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-control-height-xl: var(--control-height-xl);
|
|
|
|
|
--editable-control-px-xs: var(--space-1-5);
|
|
|
|
|
--editable-control-px-sm: var(--space-2);
|
|
|
|
|
--editable-control-px-md: var(--space-2-5);
|
|
|
|
|
--editable-control-px-lg: var(--space-3);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-control-px-xl: var(--space-3-5);
|
|
|
|
|
--editable-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--editable-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--editable-font-size-md: var(--font-size-sm);
|
|
|
|
|
--editable-font-size-lg: var(--font-size-md);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-font-size-xl: var(--font-size-lg);
|
|
|
|
|
--editable-line-height: var(--leading-ui);
|
|
|
|
|
--editable-color: var(--color-content-primary);
|
|
|
|
|
--editable-area-min-inline-size: 12ch;
|
|
|
|
|
--editable-control-radius: var(--radius-md);
|
|
|
|
|
--editable-control-border-width: var(--border-width);
|
|
|
|
|
--editable-control-border: var(--color-border-subtle);
|
|
|
|
|
--editable-control-border-hover: var(--color-border-default);
|
|
|
|
|
--editable-control-bg: var(--color-surface-raised);
|
|
|
|
|
--editable-control-shadow: var(--shadow-xs);
|
|
|
|
|
--editable-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--editable-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--editable-trigger-gap: var(--space-1);
|
|
|
|
|
--editable-trigger-px: var(--space-2-5);
|
|
|
|
|
--editable-trigger-radius: var(--radius-md);
|
|
|
|
|
--editable-trigger-border-width: var(--border-width);
|
|
|
|
|
--editable-trigger-border: var(--color-border-subtle);
|
|
|
|
|
--editable-trigger-border-hover: var(--color-border-default);
|
|
|
|
|
--editable-trigger-bg: var(--color-surface-raised);
|
|
|
|
|
--editable-trigger-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--editable-trigger-color: var(--color-content-secondary);
|
|
|
|
|
--editable-trigger-color-hover: var(--color-content-primary);
|
|
|
|
|
--editable-submit-color: var(--color-content-on-solid);
|
|
|
|
|
--editable-transition-duration: var(--duration-fast);
|
|
|
|
|
--editable-transition-ease: var(--ease-default);
|
|
|
|
|
--editable-disabled-opacity: 0.5;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--editable-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--editable-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--editable-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--editable-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--editable-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--editable-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--editable-primary-border: var(--color-primary-border);
|
|
|
|
|
--editable-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--editable-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--editable-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--editable-risk-border: var(--color-risk-border);
|
|
|
|
|
--editable-threat-border: var(--color-threat-border);
|
Build TextArea component + fix locale propagation bug across soma providers
Major work in this session:
1. NumberField demo refactored to expose Intl.NumberFormatOptions live
- 9 canonical presets (currency/unit/percent/compact/plain)
- Locale/currency/unit lists derived from $libs/langs, $libs/currency,
$format/units (no more hardcoded arrays)
- Default locale from uix.format.numbers.getLocale()
2. Bug fix: locale prop ignored when soma.format service is active
- soma/NumberField: 5 bypass points via new `hasOwnLocale` getter
(decimalSeparator, groupSeparator, formatValue, formatEditValue, parseValue)
- soma/Calendar: dateOrder respects locale prop (matches DateField precedence)
- soma/RangeCalendar: same dateOrder fix
- When the consumer passes `locale` prop, soma.nums/dates is bypassed
and Intl is used directly with the prop locale
3. TextArea — new component, full 4-layer stack
- morfo: 3 parts (provider/input/count), 3 events
(commit-input/commit-submit/shift-count-overflow), APG textbox
- soma: TextAreaProvider with autosize (scrollHeight measurement),
submitOn modes (false|enter|shift+enter|mod+enter), maxLength soft clamp,
Field integration (OR-merge), counter overflow tracking
- eidos: 5 sizes × 3 variants × 8 colors, autosize suppresses CSS resize
- sema: commit-submit + shift-count-overflow perceptual cues
- demo: canonical 6-tab depth, all props exposed as live controls
- PrimitiveTextareaAttributes added to soma/types/html.ts
4. Also includes accumulated unreleased work from prior sessions:
- Eidos ports: announce, clipboard, drag-drop, feed, table,
tree-grid, tree-view, virtual-grid, virtual-list, words
- Their canonical demos under web/routes/uix/components/
- Semantic events defined for utility morfos
(announce/clipboard/virtual-list/virtual-grid)
- Tree indent guides fixed (TreeView ::before, TreeGrid stacked gradients)
- Sidebar reorganized with Data + Utilities groups
- Eidos words content layer and primitives
Reference library survey performed before TextArea API design (Mantine,
Radix Themes, Chakra v3, React Aria, Ark UI, Bits UI, shadcn, MUI, Prime).
Decision documented: no separate CurrencyField/UnitField — single
NumberField with formatOptions is the canon (matches all surveyed
headless libs except PrimeReact's mode enum, which still uses 1 component).
svelte-check: 0 errors in modified/created files.
See CONTINUE.md for full session notes and next steps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--words-gap-sm: var(--space-2);
|
|
|
|
|
--words-gap-md: var(--space-2-5);
|
|
|
|
|
--words-gap-lg: var(--space-3);
|
|
|
|
|
--words-radius-sm: var(--radius-md);
|
|
|
|
|
--words-radius-md: var(--radius-lg);
|
|
|
|
|
--words-radius-lg: var(--radius-xl);
|
|
|
|
|
--words-max-inline-size: 52rem;
|
|
|
|
|
--words-border-width: var(--border-width);
|
|
|
|
|
--words-border: var(--color-border-subtle);
|
|
|
|
|
--words-border-hover: var(--color-border-default);
|
|
|
|
|
--words-bg: var(--color-surface-raised);
|
|
|
|
|
--words-shadow: var(--shadow-xs);
|
|
|
|
|
--words-color: var(--color-content-primary);
|
|
|
|
|
--words-font-family: var(--font-ui);
|
|
|
|
|
--words-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--words-font-size-md: var(--font-size-sm);
|
|
|
|
|
--words-font-size-lg: var(--font-size-md);
|
|
|
|
|
--words-line-height: var(--leading-ui);
|
|
|
|
|
--words-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--words-invalid-border: var(--color-risk-border);
|
|
|
|
|
--words-disabled-opacity: 0.5;
|
|
|
|
|
--words-toolbar-gap: var(--space-1);
|
|
|
|
|
--words-toolbar-px-sm: var(--space-2);
|
|
|
|
|
--words-toolbar-px-md: var(--space-2-5);
|
|
|
|
|
--words-toolbar-px-lg: var(--space-3);
|
|
|
|
|
--words-toolbar-py-sm: var(--space-1);
|
|
|
|
|
--words-toolbar-py-md: var(--space-1-5);
|
|
|
|
|
--words-toolbar-py-lg: var(--space-2);
|
|
|
|
|
--words-toolbar-border: var(--color-border-subtle);
|
|
|
|
|
--words-toolbar-bg: var(--color-surface-default);
|
|
|
|
|
--words-button-size-sm: var(--control-height-xs);
|
|
|
|
|
--words-button-size-md: var(--control-height-sm);
|
|
|
|
|
--words-button-size-lg: var(--control-height-md);
|
|
|
|
|
--words-command-gap: var(--space-1);
|
|
|
|
|
--words-command-px: var(--space-2);
|
|
|
|
|
--words-command-radius: var(--radius-md);
|
|
|
|
|
--words-command-color: var(--color-content-secondary);
|
|
|
|
|
--words-command-border-hover: var(--color-border-default);
|
|
|
|
|
--words-command-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--words-command-color-hover: var(--color-content-primary);
|
|
|
|
|
--words-command-solid-color: var(--color-content-on-solid);
|
|
|
|
|
--words-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--words-content-color: var(--color-content-primary);
|
|
|
|
|
--words-content-px-sm: var(--space-3);
|
|
|
|
|
--words-content-px-md: var(--space-4);
|
|
|
|
|
--words-content-px-lg: var(--space-5);
|
|
|
|
|
--words-content-py-sm: var(--space-2-5);
|
|
|
|
|
--words-content-py-md: var(--space-3);
|
|
|
|
|
--words-content-py-lg: var(--space-4);
|
|
|
|
|
--words-content-py-after-placeholder: var(--space-1);
|
|
|
|
|
--words-content-min-block-size-sm: 10rem;
|
|
|
|
|
--words-content-min-block-size-md: 13rem;
|
|
|
|
|
--words-content-min-block-size-lg: 16rem;
|
|
|
|
|
--words-content-max-block-size-sm: 50vh;
|
|
|
|
|
--words-content-max-block-size-md: 60vh;
|
|
|
|
|
--words-content-max-block-size-lg: 70vh;
|
|
|
|
|
--words-rail-bg: #ededed;
|
|
|
|
|
--words-rail-border: #cfcfcf;
|
Build TextArea component + fix locale propagation bug across soma providers
Major work in this session:
1. NumberField demo refactored to expose Intl.NumberFormatOptions live
- 9 canonical presets (currency/unit/percent/compact/plain)
- Locale/currency/unit lists derived from $libs/langs, $libs/currency,
$format/units (no more hardcoded arrays)
- Default locale from uix.format.numbers.getLocale()
2. Bug fix: locale prop ignored when soma.format service is active
- soma/NumberField: 5 bypass points via new `hasOwnLocale` getter
(decimalSeparator, groupSeparator, formatValue, formatEditValue, parseValue)
- soma/Calendar: dateOrder respects locale prop (matches DateField precedence)
- soma/RangeCalendar: same dateOrder fix
- When the consumer passes `locale` prop, soma.nums/dates is bypassed
and Intl is used directly with the prop locale
3. TextArea — new component, full 4-layer stack
- morfo: 3 parts (provider/input/count), 3 events
(commit-input/commit-submit/shift-count-overflow), APG textbox
- soma: TextAreaProvider with autosize (scrollHeight measurement),
submitOn modes (false|enter|shift+enter|mod+enter), maxLength soft clamp,
Field integration (OR-merge), counter overflow tracking
- eidos: 5 sizes × 3 variants × 8 colors, autosize suppresses CSS resize
- sema: commit-submit + shift-count-overflow perceptual cues
- demo: canonical 6-tab depth, all props exposed as live controls
- PrimitiveTextareaAttributes added to soma/types/html.ts
4. Also includes accumulated unreleased work from prior sessions:
- Eidos ports: announce, clipboard, drag-drop, feed, table,
tree-grid, tree-view, virtual-grid, virtual-list, words
- Their canonical demos under web/routes/uix/components/
- Semantic events defined for utility morfos
(announce/clipboard/virtual-list/virtual-grid)
- Tree indent guides fixed (TreeView ::before, TreeGrid stacked gradients)
- Sidebar reorganized with Data + Utilities groups
- Eidos words content layer and primitives
Reference library survey performed before TextArea API design (Mantine,
Radix Themes, Chakra v3, React Aria, Ark UI, Bits UI, shadcn, MUI, Prime).
Decision documented: no separate CurrencyField/UnitField — single
NumberField with formatOptions is the canon (matches all surveyed
headless libs except PrimeReact's mode enum, which still uses 1 component).
svelte-check: 0 errors in modified/created files.
See CONTINUE.md for full session notes and next steps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--words-selection-color: var(--color-content-primary);
|
|
|
|
|
--words-block-gap: var(--space-2);
|
|
|
|
|
--words-heading-color: var(--color-content-primary);
|
|
|
|
|
--words-heading-font-size: var(--font-size-lg);
|
|
|
|
|
--words-heading-h1-font-size: var(--font-size-xl);
|
|
|
|
|
--words-heading-h2-font-size: calc(var(--font-size-lg) + 4px);
|
|
|
|
|
--words-heading-h3-font-size: var(--font-size-lg);
|
Build TextArea component + fix locale propagation bug across soma providers
Major work in this session:
1. NumberField demo refactored to expose Intl.NumberFormatOptions live
- 9 canonical presets (currency/unit/percent/compact/plain)
- Locale/currency/unit lists derived from $libs/langs, $libs/currency,
$format/units (no more hardcoded arrays)
- Default locale from uix.format.numbers.getLocale()
2. Bug fix: locale prop ignored when soma.format service is active
- soma/NumberField: 5 bypass points via new `hasOwnLocale` getter
(decimalSeparator, groupSeparator, formatValue, formatEditValue, parseValue)
- soma/Calendar: dateOrder respects locale prop (matches DateField precedence)
- soma/RangeCalendar: same dateOrder fix
- When the consumer passes `locale` prop, soma.nums/dates is bypassed
and Intl is used directly with the prop locale
3. TextArea — new component, full 4-layer stack
- morfo: 3 parts (provider/input/count), 3 events
(commit-input/commit-submit/shift-count-overflow), APG textbox
- soma: TextAreaProvider with autosize (scrollHeight measurement),
submitOn modes (false|enter|shift+enter|mod+enter), maxLength soft clamp,
Field integration (OR-merge), counter overflow tracking
- eidos: 5 sizes × 3 variants × 8 colors, autosize suppresses CSS resize
- sema: commit-submit + shift-count-overflow perceptual cues
- demo: canonical 6-tab depth, all props exposed as live controls
- PrimitiveTextareaAttributes added to soma/types/html.ts
4. Also includes accumulated unreleased work from prior sessions:
- Eidos ports: announce, clipboard, drag-drop, feed, table,
tree-grid, tree-view, virtual-grid, virtual-list, words
- Their canonical demos under web/routes/uix/components/
- Semantic events defined for utility morfos
(announce/clipboard/virtual-list/virtual-grid)
- Tree indent guides fixed (TreeView ::before, TreeGrid stacked gradients)
- Sidebar reorganized with Data + Utilities groups
- Eidos words content layer and primitives
Reference library survey performed before TextArea API design (Mantine,
Radix Themes, Chakra v3, React Aria, Ark UI, Bits UI, shadcn, MUI, Prime).
Decision documented: no separate CurrencyField/UnitField — single
NumberField with formatOptions is the canon (matches all surveyed
headless libs except PrimeReact's mode enum, which still uses 1 component).
svelte-check: 0 errors in modified/created files.
See CONTINUE.md for full session notes and next steps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--words-heading-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--words-heading-line-height: var(--leading-heading);
|
|
|
|
|
--words-strong-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--words-code-radius: var(--radius-sm);
|
|
|
|
|
--words-code-bg: var(--color-surface-overlay);
|
|
|
|
|
--words-code-color: var(--color-content-primary);
|
|
|
|
|
--words-code-font-family: var(--font-mono);
|
|
|
|
|
--words-code-py: var(--space-0-5);
|
|
|
|
|
--words-code-px: var(--space-1);
|
|
|
|
|
--words-quote-px: var(--space-3);
|
|
|
|
|
--words-quote-border-width: var(--border-width-strong);
|
|
|
|
|
--words-quote-color: var(--color-content-secondary);
|
|
|
|
|
--words-list-padding-inline-start: var(--space-5);
|
|
|
|
|
--words-status-py: var(--space-2);
|
|
|
|
|
--words-status-color: var(--color-content-muted);
|
|
|
|
|
--words-status-font-size: var(--font-size-xs);
|
|
|
|
|
--words-status-error-color: var(--color-risk-text);
|
|
|
|
|
--words-transition-duration: var(--duration-fast);
|
|
|
|
|
--words-transition-ease: var(--ease-default);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--words-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--words-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--words-primary-text: var(--color-primary-text);
|
|
|
|
|
--words-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--words-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--words-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--words-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--words-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--words-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--words-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--words-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--words-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--words-fulfill-solid: var(--color-fulfill-solid);
|
|
|
|
|
--words-fulfill-solid-hover: var(--color-fulfill-solid-hover);
|
|
|
|
|
--words-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--words-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--words-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--words-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--words-risk-solid-hover: var(--color-risk-solid-hover);
|
|
|
|
|
--words-risk-text: var(--color-risk-text);
|
|
|
|
|
--words-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--words-threat-solid-hover: var(--color-threat-solid-hover);
|
|
|
|
|
--words-threat-text: var(--color-threat-text);
|
|
|
|
|
--words-loss-solid: var(--color-loss-solid);
|
|
|
|
|
--words-loss-solid-hover: var(--color-loss-solid-hover);
|
|
|
|
|
--words-loss-track: var(--color-loss-track);
|
|
|
|
|
--words-loss-border: var(--color-loss-border);
|
|
|
|
|
--words-loss-text: var(--color-loss-text);
|
|
|
|
|
--words-primary-track: var(--color-primary-track);
|
|
|
|
|
--words-primary-border: var(--color-primary-border);
|
|
|
|
|
--words-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--words-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--words-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--words-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--words-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--words-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--words-risk-track: var(--color-risk-track);
|
|
|
|
|
--words-risk-border: var(--color-risk-border);
|
|
|
|
|
--words-threat-track: var(--color-threat-track);
|
|
|
|
|
--words-threat-border: var(--color-threat-border);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-gap-xs: var(--space-1);
|
|
|
|
|
--tags-input-gap-sm: var(--space-1-5);
|
|
|
|
|
--tags-input-gap-md: var(--space-2);
|
|
|
|
|
--tags-input-gap-lg: var(--space-2-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-gap-xl: var(--space-3);
|
|
|
|
|
--tags-input-control-min-height-xs: var(--control-height-sm);
|
|
|
|
|
--tags-input-control-min-height-sm: var(--control-height-md);
|
|
|
|
|
--tags-input-control-min-height-md: var(--control-height-lg);
|
|
|
|
|
--tags-input-control-min-height-lg: calc(var(--control-height-lg) + var(--space-2));
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-control-min-height-xl: calc(var(--control-height-xl) + var(--space-2));
|
|
|
|
|
--tags-input-control-px-xs: var(--space-1-5);
|
|
|
|
|
--tags-input-control-px-sm: var(--space-2);
|
|
|
|
|
--tags-input-control-px-md: var(--space-2-5);
|
|
|
|
|
--tags-input-control-px-lg: var(--space-3);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-control-px-xl: var(--space-3-5);
|
|
|
|
|
--tags-input-control-py-xs: var(--space-0-5);
|
|
|
|
|
--tags-input-control-py-sm: var(--space-1);
|
|
|
|
|
--tags-input-control-py-md: var(--space-1-5);
|
|
|
|
|
--tags-input-control-py-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-control-py-xl: var(--space-2-5);
|
|
|
|
|
--tags-input-item-height-xs: var(--control-height-xs);
|
|
|
|
|
--tags-input-item-height-sm: var(--control-height-sm);
|
|
|
|
|
--tags-input-item-height-md: var(--control-height-md);
|
|
|
|
|
--tags-input-item-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-item-height-xl: var(--control-height-xl);
|
|
|
|
|
--tags-input-item-px-xs: var(--space-1-5);
|
|
|
|
|
--tags-input-item-px-sm: var(--space-2);
|
|
|
|
|
--tags-input-item-px-md: var(--space-2-5);
|
|
|
|
|
--tags-input-item-px-lg: var(--space-3);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-item-px-xl: var(--space-3-5);
|
|
|
|
|
--tags-input-font-family: var(--font-ui);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-font-size-xs: var(--font-size-xs);
|
|
|
|
|
--tags-input-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--tags-input-font-size-md: var(--font-size-sm);
|
|
|
|
|
--tags-input-font-size-lg: var(--font-size-md);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-font-size-xl: var(--font-size-lg);
|
|
|
|
|
--tags-input-line-height: var(--leading-ui);
|
|
|
|
|
--tags-input-color: var(--color-content-primary);
|
|
|
|
|
--tags-input-item-gap: var(--space-1-5);
|
|
|
|
|
--tags-input-control-radius: var(--radius-lg);
|
|
|
|
|
--tags-input-control-border-width: var(--border-width);
|
|
|
|
|
--tags-input-control-border: var(--color-border-default);
|
|
|
|
|
--tags-input-control-border-hover: var(--color-border-strong);
|
|
|
|
|
--tags-input-control-bg: var(--color-surface-raised);
|
|
|
|
|
--tags-input-control-shadow: var(--shadow-xs);
|
|
|
|
|
--tags-input-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--tags-input-input-min-inline-size: 8ch;
|
|
|
|
|
--tags-input-placeholder-color: var(--color-content-muted);
|
|
|
|
|
--tags-input-item-radius: var(--radius-full);
|
|
|
|
|
--tags-input-item-border-width: var(--border-width);
|
|
|
|
|
--tags-input-item-border: var(--color-border-subtle);
|
|
|
|
|
--tags-input-item-bg: var(--color-surface-overlay);
|
|
|
|
|
--tags-input-item-color: var(--color-content-primary);
|
|
|
|
|
--tags-input-action-gap: var(--space-1);
|
|
|
|
|
--tags-input-action-px: var(--space-2-5);
|
|
|
|
|
--tags-input-action-radius: var(--radius-md);
|
|
|
|
|
--tags-input-action-border-width: var(--border-width);
|
|
|
|
|
--tags-input-action-border: transparent;
|
|
|
|
|
--tags-input-action-border-hover: var(--color-border-subtle);
|
|
|
|
|
--tags-input-action-bg: transparent;
|
|
|
|
|
--tags-input-action-bg-hover: color-mix(in srgb, currentColor 10%, transparent);
|
|
|
|
|
--tags-input-action-color: var(--color-content-secondary);
|
|
|
|
|
--tags-input-action-color-hover: var(--color-content-primary);
|
|
|
|
|
--tags-input-delete-size: var(--control-height-xs);
|
|
|
|
|
--tags-input-delete-radius: var(--radius-full);
|
|
|
|
|
--tags-input-transition-duration: var(--duration-fast);
|
|
|
|
|
--tags-input-transition-ease: var(--ease-default);
|
|
|
|
|
--tags-input-disabled-opacity: 0.52;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--tags-input-primary-text: var(--color-primary-text);
|
|
|
|
|
--tags-input-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--tags-input-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--tags-input-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--tags-input-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--tags-input-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--tags-input-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--tags-input-risk-text: var(--color-risk-text);
|
|
|
|
|
--tags-input-threat-text: var(--color-threat-text);
|
|
|
|
|
--tags-input-loss-track: var(--color-loss-track);
|
|
|
|
|
--tags-input-loss-border: var(--color-loss-border);
|
|
|
|
|
--tags-input-loss-text: var(--color-loss-text);
|
|
|
|
|
--tags-input-primary-track: var(--color-primary-track);
|
|
|
|
|
--tags-input-primary-border: var(--color-primary-border);
|
|
|
|
|
--tags-input-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--tags-input-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--tags-input-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--tags-input-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--tags-input-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--tags-input-affirm-border: var(--color-affirm-border);
|
|
|
|
|
--tags-input-risk-track: var(--color-risk-track);
|
|
|
|
|
--tags-input-risk-border: var(--color-risk-border);
|
|
|
|
|
--tags-input-threat-track: var(--color-threat-track);
|
|
|
|
|
--tags-input-threat-border: var(--color-threat-border);
|
|
|
|
|
--stepper-gap-sm: var(--space-3);
|
|
|
|
|
--stepper-gap-md: var(--space-4);
|
|
|
|
|
--stepper-gap-lg: var(--space-5);
|
|
|
|
|
--stepper-indicator-size-sm: var(--control-height-sm);
|
|
|
|
|
--stepper-indicator-size-md: var(--control-height-md);
|
|
|
|
|
--stepper-indicator-size-lg: var(--control-height-lg);
|
|
|
|
|
--stepper-font-family: var(--font-ui);
|
|
|
|
|
--stepper-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--stepper-font-size-md: var(--font-size-sm);
|
|
|
|
|
--stepper-font-size-lg: var(--font-size-md);
|
|
|
|
|
--stepper-line-height: var(--leading-ui);
|
|
|
|
|
--stepper-color: var(--color-content-primary);
|
|
|
|
|
--stepper-list-gap: var(--space-1);
|
|
|
|
|
--stepper-item-gap: var(--space-2);
|
|
|
|
|
--stepper-trigger-gap: var(--space-2);
|
|
|
|
|
--stepper-trigger-px: var(--space-2);
|
|
|
|
|
--stepper-trigger-py: var(--space-1);
|
|
|
|
|
--stepper-trigger-radius: var(--radius-md);
|
|
|
|
|
--stepper-trigger-border-width: var(--border-width);
|
|
|
|
|
--stepper-trigger-color: var(--color-content-secondary);
|
|
|
|
|
--stepper-trigger-color-hover: var(--color-content-primary);
|
|
|
|
|
--stepper-trigger-bg-hover: var(--color-surface-overlay);
|
|
|
|
|
--stepper-indicator-radius: var(--radius-full);
|
|
|
|
|
--stepper-indicator-border-width: var(--border-width);
|
|
|
|
|
--stepper-indicator-border: var(--color-border-default);
|
|
|
|
|
--stepper-indicator-bg: var(--color-surface-raised);
|
|
|
|
|
--stepper-indicator-color: var(--color-content-secondary);
|
|
|
|
|
--stepper-indicator-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--stepper-complete-color: var(--color-content-on-solid);
|
|
|
|
|
--stepper-separator-min-size: 3rem;
|
|
|
|
|
--stepper-separator-thickness: var(--border-width-strong);
|
|
|
|
|
--stepper-separator-radius: var(--radius-full);
|
|
|
|
|
--stepper-separator-bg: var(--color-border-subtle);
|
|
|
|
|
--stepper-content-padding: var(--space-4);
|
|
|
|
|
--stepper-content-radius: var(--radius-lg);
|
|
|
|
|
--stepper-content-border-width: var(--border-width);
|
|
|
|
|
--stepper-content-border: var(--color-border-subtle);
|
|
|
|
|
--stepper-content-bg: var(--color-surface-raised);
|
|
|
|
|
--stepper-content-shadow: var(--shadow-xs);
|
|
|
|
|
--stepper-nav-height: var(--control-height-md);
|
|
|
|
|
--stepper-nav-px: var(--space-3);
|
|
|
|
|
--stepper-nav-radius: var(--radius-md);
|
|
|
|
|
--stepper-nav-border-width: var(--border-width);
|
|
|
|
|
--stepper-nav-border: var(--color-border-subtle);
|
|
|
|
|
--stepper-nav-bg: var(--color-surface-raised);
|
|
|
|
|
--stepper-nav-color: var(--color-content-primary);
|
|
|
|
|
--stepper-nav-hover-brightness: 1.04;
|
|
|
|
|
--stepper-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
|
|
|
--stepper-transition-duration: var(--duration-fast);
|
|
|
|
|
--stepper-transition-ease: var(--ease-default);
|
|
|
|
|
--stepper-disabled-opacity: 0.45;
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--stepper-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--stepper-primary-text: var(--color-primary-text);
|
|
|
|
|
--stepper-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--stepper-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--stepper-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--stepper-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--stepper-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--stepper-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--stepper-fulfill-solid: var(--color-fulfill-solid);
|
|
|
|
|
--stepper-fulfill-track: var(--color-fulfill-track);
|
|
|
|
|
--stepper-fulfill-border: var(--color-fulfill-border);
|
|
|
|
|
--stepper-fulfill-text: var(--color-fulfill-text);
|
|
|
|
|
--stepper-primary-track: var(--color-primary-track);
|
|
|
|
|
--stepper-primary-border: var(--color-primary-border);
|
|
|
|
|
--stepper-secondary-track: var(--color-secondary-track);
|
|
|
|
|
--stepper-secondary-border: var(--color-secondary-border);
|
|
|
|
|
--stepper-neutral-track: var(--color-neutral-track);
|
|
|
|
|
--stepper-neutral-border: var(--color-neutral-border);
|
|
|
|
|
--stepper-affirm-track: var(--color-affirm-track);
|
|
|
|
|
--stepper-affirm-border: var(--color-affirm-border);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--slider-track-size-xs: 3px;
|
|
|
|
|
--slider-track-size-sm: 4px;
|
|
|
|
|
--slider-track-size-md: 6px;
|
|
|
|
|
--slider-track-size-lg: 8px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--slider-track-size-xl: 10px;
|
|
|
|
|
--slider-thumb-size-xs: 12px;
|
|
|
|
|
--slider-thumb-size-sm: 16px;
|
|
|
|
|
--slider-thumb-size-md: 20px;
|
|
|
|
|
--slider-thumb-size-lg: 24px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--slider-thumb-size-xl: 28px;
|
|
|
|
|
--slider-hit-size-xs: 24px;
|
|
|
|
|
--slider-hit-size-sm: 28px;
|
|
|
|
|
--slider-hit-size-md: 32px;
|
|
|
|
|
--slider-hit-size-lg: 36px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--slider-hit-size-xl: 40px;
|
|
|
|
|
--slider-tick-size-xs: 3px;
|
|
|
|
|
--slider-tick-size-sm: 4px;
|
|
|
|
|
--slider-tick-size-md: 5px;
|
|
|
|
|
--slider-tick-size-lg: 6px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--slider-tick-size-xl: 7px;
|
|
|
|
|
--slider-min-inline-size: 12rem;
|
|
|
|
|
--slider-min-block-size: 10rem;
|
|
|
|
|
--slider-track-radius: var(--radius-full);
|
|
|
|
|
--slider-track-bg: var(--color-neutral-track);
|
|
|
|
|
--slider-range-bg: var(--color-primary-solid);
|
|
|
|
|
--slider-thumb-radius: var(--radius-full);
|
|
|
|
|
--slider-thumb-border-width: var(--border-width);
|
|
|
|
|
--slider-thumb-border: var(--color-border-default);
|
|
|
|
|
--slider-thumb-bg: var(--color-surface-default);
|
|
|
|
|
--slider-thumb-shadow: var(--shadow-subtle);
|
|
|
|
|
--slider-thumb-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color), var(--slider-thumb-shadow);
|
|
|
|
|
--slider-tick-radius: var(--radius-full);
|
|
|
|
|
--slider-tick-bg: var(--color-neutral-border);
|
|
|
|
|
--slider-tick-bg-active: var(--color-primary-solid);
|
|
|
|
|
--slider-transition-duration: var(--duration-fast);
|
|
|
|
|
--slider-transition-ease: var(--ease-default);
|
|
|
|
|
--slider-disabled-opacity: 0.56;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--switch-size-xs-track-width: 26px;
|
|
|
|
|
--switch-size-xs-track-height: 15px;
|
|
|
|
|
--switch-size-xs-thumb-size: 11px;
|
|
|
|
|
--switch-size-xs-thumb-translate: 12px;
|
|
|
|
|
--switch-size-sm-track-width: 32px;
|
|
|
|
|
--switch-size-sm-track-height: 18px;
|
|
|
|
|
--switch-size-sm-thumb-size: 14px;
|
|
|
|
|
--switch-size-sm-thumb-translate: 14px;
|
|
|
|
|
--switch-size-md-track-width: 38px;
|
|
|
|
|
--switch-size-md-track-height: 22px;
|
|
|
|
|
--switch-size-md-thumb-size: 18px;
|
|
|
|
|
--switch-size-md-thumb-translate: 16px;
|
|
|
|
|
--switch-size-lg-track-width: 46px;
|
|
|
|
|
--switch-size-lg-track-height: 28px;
|
|
|
|
|
--switch-size-lg-thumb-size: 24px;
|
|
|
|
|
--switch-size-lg-thumb-translate: 18px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--switch-size-xl-track-width: 54px;
|
|
|
|
|
--switch-size-xl-track-height: 34px;
|
|
|
|
|
--switch-size-xl-thumb-size: 30px;
|
|
|
|
|
--switch-size-xl-thumb-translate: 20px;
|
|
|
|
|
--switch-track-radius: var(--radius-full);
|
|
|
|
|
--switch-track-border-width: var(--border-width);
|
|
|
|
|
--switch-thumb-inset: 1px;
|
|
|
|
|
--switch-thumb-radius: var(--radius-full);
|
|
|
|
|
--switch-thumb-border-width: var(--border-width);
|
|
|
|
|
--switch-thumb-shadow: 0 1px 2px rgb(17 14 10 / 0.12);
|
|
|
|
|
--switch-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--switch-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--switch-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--switch-focus-ring-surface: var(--color-surface-default);
|
|
|
|
|
--switch-transition-duration: var(--duration-fast);
|
|
|
|
|
--switch-transition-ease: var(--ease-default);
|
|
|
|
|
--switch-track-bg-off: var(--color-surface-overlay);
|
|
|
|
|
--switch-track-bg-off-hover: color-mix( in srgb, var(--color-surface-overlay) 82%, var(--color-surface-raised) );
|
|
|
|
|
--switch-track-border-off: var(--color-border-default);
|
|
|
|
|
--switch-track-border-off-hover: var(--color-border-strong);
|
|
|
|
|
--switch-track-bg-disabled: color-mix( in srgb, var(--color-surface-overlay) 70%, var(--color-surface-default) );
|
|
|
|
|
--switch-track-border-disabled: color-mix( in srgb, var(--color-border-default) 70%, var(--color-border-subtle) );
|
|
|
|
|
--switch-thumb-bg-disabled: color-mix( in srgb, var(--color-surface-default) 88%, var(--color-surface-raised) );
|
|
|
|
|
--switch-thumb-border-disabled: color-mix( in srgb, var(--color-border-subtle) 88%, var(--color-surface-overlay) );
|
|
|
|
|
--switch-disabled-opacity: 0.72;
|
|
|
|
|
--switch-thumb-bg: var(--color-surface-default);
|
|
|
|
|
--switch-thumb-border: color-mix( in srgb, var(--color-border-default) 82%, var(--color-surface-overlay) );
|
|
|
|
|
--switch-thumb-icon-color: var(--color-content-muted);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--switch-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--switch-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--switch-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--switch-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--switch-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--switch-risk-solid-hover: var(--color-risk-solid-hover);
|
|
|
|
|
--switch-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--switch-threat-solid-hover: var(--color-threat-solid-hover);
|
|
|
|
|
--switch-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--switch-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--switch-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--switch-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--tabs-stack-gap: var(--space-4);
|
|
|
|
|
--tabs-line-stack-gap: var(--space-3);
|
|
|
|
|
--tabs-provider-radius: var(--radius-xl);
|
|
|
|
|
--tabs-provider-border-width: var(--border-width);
|
|
|
|
|
--tabs-provider-border: var(--color-border-default);
|
|
|
|
|
--tabs-provider-bg: var(--color-surface-raised);
|
|
|
|
|
--tabs-surface-provider-padding: var(--space-3);
|
|
|
|
|
--tabs-surface-provider-shadow: var(--shadow-subtle);
|
|
|
|
|
--tabs-list-gap: var(--space-1);
|
|
|
|
|
--tabs-list-padding: var(--space-1);
|
|
|
|
|
--tabs-list-radius: var(--radius-lg);
|
|
|
|
|
--tabs-list-width: 220px;
|
|
|
|
|
--tabs-list-bg: transparent;
|
|
|
|
|
--tabs-list-border-width: var(--border-width);
|
|
|
|
|
--tabs-list-border: var(--color-border-default);
|
|
|
|
|
--tabs-line-list-padding-inline-end: var(--space-2);
|
|
|
|
|
--tabs-surface-list-bg: color-mix(in srgb, var(--color-surface-default) 82%, transparent);
|
|
|
|
|
--tabs-pills-list-bg: color-mix(in srgb, var(--color-surface-default) 90%, transparent);
|
|
|
|
|
--tabs-trigger-height-xs: var(--control-height-xs);
|
|
|
|
|
--tabs-trigger-height-sm: var(--control-height-sm);
|
|
|
|
|
--tabs-trigger-height-md: var(--control-height-md);
|
|
|
|
|
--tabs-trigger-height-lg: var(--control-height-lg);
|
|
|
|
|
--tabs-trigger-px-xs: var(--space-2-5);
|
|
|
|
|
--tabs-trigger-px-sm: var(--space-3);
|
|
|
|
|
--tabs-trigger-px-md: var(--space-3-5);
|
|
|
|
|
--tabs-trigger-px-lg: var(--space-4);
|
|
|
|
|
--tabs-trigger-gap-xs: var(--space-1);
|
|
|
|
|
--tabs-trigger-gap-sm: var(--space-1-5);
|
|
|
|
|
--tabs-trigger-gap-md: var(--space-2);
|
|
|
|
|
--tabs-trigger-gap-lg: var(--space-2);
|
|
|
|
|
--tabs-trigger-radius: var(--radius-md);
|
|
|
|
|
--tabs-trigger-border-width: var(--border-width);
|
|
|
|
|
--tabs-trigger-font-family: var(--font-ui);
|
|
|
|
|
--tabs-trigger-font-size: var(--font-size-sm);
|
|
|
|
|
--tabs-trigger-font-weight: var(--font-weight-medium);
|
|
|
|
|
--tabs-trigger-line-height: var(--leading-ui);
|
|
|
|
|
--tabs-trigger-letter-spacing: var(--tracking-ui);
|
|
|
|
|
--tabs-trigger-color: var(--color-content-secondary);
|
|
|
|
|
--tabs-trigger-color-hover: var(--color-content-primary);
|
|
|
|
|
--tabs-trigger-color-active: var(--color-content-primary);
|
|
|
|
|
--tabs-trigger-bg: transparent;
|
|
|
|
|
--tabs-trigger-bg-hover: color-mix( in srgb, var(--color-surface-default) 84%, transparent );
|
|
|
|
|
--tabs-trigger-bg-active: var(--color-surface-overlay);
|
|
|
|
|
--tabs-trigger-border: transparent;
|
|
|
|
|
--tabs-trigger-border-active: var(--color-primary-border);
|
|
|
|
|
--tabs-trigger-transition-duration: var(--duration-fast);
|
|
|
|
|
--tabs-trigger-transition-ease: var(--ease-default);
|
|
|
|
|
--tabs-trigger-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--tabs-trigger-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--tabs-trigger-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--tabs-surface-trigger-border-active: color-mix( in srgb, var(--tabs-trigger-border-active) 58%, transparent );
|
|
|
|
|
--tabs-pills-trigger-radius: var(--radius-full);
|
|
|
|
|
--tabs-pills-trigger-border-active: color-mix( in srgb, var(--tabs-trigger-border-active) 58%, transparent );
|
|
|
|
|
--tabs-pills-trigger-shadow-active: var(--shadow-subtle);
|
|
|
|
|
--tabs-content-padding-xs: var(--space-3);
|
|
|
|
|
--tabs-content-padding-sm: var(--space-4);
|
|
|
|
|
--tabs-content-padding-md: var(--space-5);
|
|
|
|
|
--tabs-content-padding-lg: var(--space-6);
|
|
|
|
|
--tabs-content-radius: var(--radius-lg);
|
|
|
|
|
--tabs-content-bg: transparent;
|
|
|
|
|
--tabs-content-border-width: var(--border-width);
|
|
|
|
|
--tabs-content-border: transparent;
|
|
|
|
|
--tabs-content-color: var(--color-content-primary);
|
|
|
|
|
--tabs-surface-content-border: color-mix( in srgb, var(--tabs-provider-border) 84%, transparent );
|
|
|
|
|
--tabs-surface-content-bg: color-mix( in srgb, var(--color-surface-overlay) 92%, transparent );
|
|
|
|
|
--tabs-pills-content-padding-block-start: var(--space-2);
|
|
|
|
|
--tabs-disabled-opacity: 0.5;
|
|
|
|
|
--tabs-indicator-transition-duration: var(--duration-normal);
|
|
|
|
|
--tabs-indicator-transition-ease: cubic-bezier(0.32, 0.72, 0, 1);
|
|
|
|
|
--tabs-indicator-line-thickness: 2px;
|
|
|
|
|
--tabs-scrollable-fade: 16px;
|
feat(eidos): Card, Avatar ext, Image, SText, Badge, service components + dates engine fixes
Sprint completo:
- Card (eidos + sema): elevation/intent/interactive, eventos select+activate.
- Avatar: ring, AvatarBadge, AvatarGroup separados; demo Avatar standalone.
- Image: status surface (idle/loading/loaded/error) consumiendo soma ImageProvider.
- SText + STextVirtualList: canvas-text engine portado de morfo-driven-soma como
componentes separados para optimizar bundle (no se importa canvas si no se usa).
- Badge: primitivo eidos puro.
- Trans, FormatNumber, FormatDate, RelativeTime: 4 service components greppables
alrededor de uix.langs y uix.format. Nav group "Utilities".
Bugs fix arts/format/dates (engine-dates.ts):
1. Preset / per-axis conflict: Intl.DateTimeFormat rechaza dateStyle/timeStyle
con cualquier per-axis (weekday/era/year/month/day/dayPeriod/hour/minute/
second/fractionalSecondDigits) o con timeZoneName. Engine drop-ea ambos
presets por defecto cuando detecta conflict (regla estricta — un solo
per-axis hace ilegales los dos presets).
2. Per-call locale override: formatDate/Time/DateTime aceptan tercer arg
locale?: string. No muta engine state. Cache (getCachedDateFormat) keyea
por (locale x options). resolveCallHourCycle: cuando hay locale override
y pref auto, el ciclo horario se resuelve desde el locale OVERRIDE.
3. withHourCycle precedence: caller hourCycle/hour12 ahora gana sobre
preferencia del engine. Antes spread mal ordenado sobrescribia 'h12' del
caller con 'h23' del engine cuando locale resolvia a 24h.
FormatDate component vuelve a rutear siempre por uix.format.dates
(cache + hourCycle + locale reactivo), pasando locale como tercer arg.
Demos service components autonomos del toolbar global: cada uno owns su
demoLocale state con 7 chips (es-ES/en-US/en-GB/de-DE/fr-FR/ja-JP/ar-EG).
FormatDate stage filtra dateStyle/timeStyle por mode + chip hourCycle anadido.
Tests: 14/14 passing en engine-dates.test.ts (+6 nuevos: conflict handling,
locale override, hourCycle precedence).
Docs: arts/format/README.md (handoff 2026-05-25 con las 3 reglas),
README.md por service component, project_service_components_sprint_2026-05-25.md,
feedback_service_demos_own_locale.md (pattern reusable).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--s-text-hint-color: var(--color-content-secondary);
|
|
|
|
|
--s-text-hint-opacity: 0.8;
|
|
|
|
|
--s-text-hint-margin-top: var(--space-1);
|
|
|
|
|
--s-text-virtual-list-line-height: var(--leading-prose);
|
|
|
|
|
--s-text-virtual-list-color: var(--color-content-primary);
|
|
|
|
|
--s-text-virtual-list-bg: var(--color-surface-default);
|
|
|
|
|
--s-text-virtual-list-border-width: var(--border-width);
|
|
|
|
|
--s-text-virtual-list-border-color: var(--color-border-subtle);
|
|
|
|
|
--s-text-virtual-list-radius: var(--radius-md);
|
|
|
|
|
--s-text-virtual-list-row-px: var(--space-3);
|
|
|
|
|
--s-text-virtual-list-row-border-width: var(--border-width);
|
|
|
|
|
--s-text-virtual-list-row-border-color: var(--color-border-subtle);
|
|
|
|
|
--toast-toaster-z: 1200;
|
|
|
|
|
--toast-toaster-inset: var(--space-4);
|
|
|
|
|
--toast-toaster-gap: var(--space-3);
|
|
|
|
|
--toast-toaster-width: 420px;
|
|
|
|
|
--toast-provider-min-width: 280px;
|
|
|
|
|
--toast-provider-max-width: 420px;
|
|
|
|
|
--toast-provider-gap: var(--space-3);
|
|
|
|
|
--toast-provider-stack-gap: var(--space-1);
|
|
|
|
|
--toast-provider-px: var(--space-4);
|
|
|
|
|
--toast-provider-py: var(--space-3);
|
|
|
|
|
--toast-provider-border-width: var(--border-width);
|
|
|
|
|
--toast-provider-radius: var(--radius-lg);
|
|
|
|
|
--toast-provider-shadow: var(--shadow-overlay);
|
|
|
|
|
--toast-accent-width: 3px;
|
|
|
|
|
--toast-transition-duration: var(--duration-fast);
|
|
|
|
|
--toast-transition-ease: var(--ease-default);
|
|
|
|
|
--toast-closed-offset: 10px;
|
|
|
|
|
--toast-closed-scale: 0.98;
|
|
|
|
|
--toast-status-size: 32px;
|
|
|
|
|
--toast-status-radius: var(--radius-full);
|
|
|
|
|
--toast-title-font-family: var(--font-ui);
|
|
|
|
|
--toast-title-font-size: var(--font-size-sm);
|
|
|
|
|
--toast-title-font-weight: var(--font-weight-semibold);
|
|
|
|
|
--toast-title-line-height: var(--leading-ui);
|
|
|
|
|
--toast-title-color: var(--color-content-primary);
|
|
|
|
|
--toast-message-color: var(--color-content-primary);
|
|
|
|
|
--toast-description-font-family: var(--font-ui);
|
|
|
|
|
--toast-description-font-size: var(--font-size-xs);
|
|
|
|
|
--toast-description-line-height: var(--leading-prose);
|
|
|
|
|
--toast-description-color: var(--color-content-secondary);
|
|
|
|
|
--toast-action-gap: var(--space-1);
|
|
|
|
|
--toast-action-px: var(--space-2);
|
|
|
|
|
--toast-action-py: var(--space-1);
|
|
|
|
|
--toast-action-margin-top: var(--space-1);
|
|
|
|
|
--toast-action-border-width: var(--border-width);
|
|
|
|
|
--toast-action-radius: var(--radius-md);
|
|
|
|
|
--toast-action-font-family: var(--font-ui);
|
|
|
|
|
--toast-action-font-size: var(--font-size-xs);
|
|
|
|
|
--toast-action-font-weight: var(--font-weight-medium);
|
|
|
|
|
--toast-action-line-height: var(--leading-ui);
|
|
|
|
|
--toast-action-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--toast-action-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--toast-action-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--toast-close-size: 28px;
|
|
|
|
|
--toast-close-border-width: var(--border-width);
|
|
|
|
|
--toast-close-radius: var(--radius-full);
|
|
|
|
|
--toast-close-bg: transparent;
|
|
|
|
|
--toast-close-border: transparent;
|
|
|
|
|
--toast-close-color: var(--color-content-secondary);
|
|
|
|
|
--toast-close-hover-bg: var(--color-surface-raised);
|
|
|
|
|
--toast-close-hover-border: var(--color-border-subtle);
|
|
|
|
|
--toast-close-hover-color: var(--color-content-primary);
|
|
|
|
|
--toast-close-focus-ring-offset: var(--focus-ring-offset);
|
|
|
|
|
--toast-close-focus-ring-width: var(--focus-ring-width);
|
|
|
|
|
--toast-close-focus-ring-color: var(--focus-ring-color);
|
|
|
|
|
--toast-default-surface: color-mix( in srgb, var(--color-surface-overlay) 92%, var(--color-neutral-track) );
|
|
|
|
|
--toast-default-border: color-mix( in srgb, var(--color-neutral-border) 72%, var(--color-border-default) );
|
|
|
|
|
--toast-default-accent: var(--color-neutral-border);
|
|
|
|
|
--toast-default-status-bg: var(--color-neutral-track);
|
|
|
|
|
--toast-default-status-color: var(--color-neutral-text);
|
|
|
|
|
--toast-default-action-color: var(--color-neutral-text);
|
|
|
|
|
--toast-default-action-hover-bg: var(--color-neutral-track);
|
|
|
|
|
--toast-affirm-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-affirm-track) );
|
|
|
|
|
--toast-affirm-border: color-mix( in srgb, var(--color-affirm-border) 70%, var(--color-border-default) );
|
|
|
|
|
--toast-affirm-accent: var(--color-affirm-border);
|
|
|
|
|
--toast-affirm-status-bg: var(--color-affirm-track);
|
|
|
|
|
--toast-affirm-status-color: var(--color-affirm-text);
|
|
|
|
|
--toast-affirm-action-color: var(--color-affirm-text);
|
|
|
|
|
--toast-affirm-action-hover-bg: var(--color-affirm-track);
|
|
|
|
|
--toast-fulfill-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-fulfill-track) );
|
|
|
|
|
--toast-fulfill-border: color-mix( in srgb, var(--color-fulfill-border) 70%, var(--color-border-default) );
|
|
|
|
|
--toast-fulfill-accent: var(--color-fulfill-border);
|
|
|
|
|
--toast-fulfill-status-bg: var(--color-fulfill-track);
|
|
|
|
|
--toast-fulfill-status-color: var(--color-fulfill-text);
|
|
|
|
|
--toast-fulfill-action-color: var(--color-fulfill-text);
|
|
|
|
|
--toast-fulfill-action-hover-bg: var(--color-fulfill-track);
|
|
|
|
|
--toast-risk-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-risk-track) );
|
|
|
|
|
--toast-risk-border: color-mix( in srgb, var(--color-risk-border) 72%, var(--color-border-default) );
|
|
|
|
|
--toast-risk-accent: var(--color-risk-border);
|
|
|
|
|
--toast-risk-status-bg: var(--color-risk-track);
|
|
|
|
|
--toast-risk-status-color: var(--color-risk-text);
|
|
|
|
|
--toast-risk-action-color: var(--color-risk-text);
|
|
|
|
|
--toast-risk-action-hover-bg: var(--color-risk-track);
|
|
|
|
|
--toast-threat-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-threat-track) );
|
|
|
|
|
--toast-threat-border: color-mix( in srgb, var(--color-threat-border) 72%, var(--color-border-default) );
|
|
|
|
|
--toast-threat-accent: var(--color-threat-border);
|
|
|
|
|
--toast-threat-status-bg: var(--color-threat-track);
|
|
|
|
|
--toast-threat-status-color: var(--color-threat-text);
|
|
|
|
|
--toast-threat-action-color: var(--color-threat-text);
|
|
|
|
|
--toast-threat-action-hover-bg: var(--color-threat-track);
|
|
|
|
|
--toast-loss-surface: color-mix( in srgb, var(--color-surface-overlay) 90%, var(--color-loss-track) );
|
|
|
|
|
--toast-loss-border: color-mix( in srgb, var(--color-loss-border) 72%, var(--color-border-default) );
|
|
|
|
|
--toast-loss-accent: var(--color-loss-border);
|
|
|
|
|
--toast-loss-status-bg: var(--color-loss-track);
|
|
|
|
|
--toast-loss-status-color: var(--color-loss-text);
|
|
|
|
|
--toast-loss-action-color: var(--color-loss-text);
|
|
|
|
|
--toast-loss-action-hover-bg: var(--color-loss-track);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-height-xs: var(--control-height-xs);
|
|
|
|
|
--toggle-height-sm: var(--control-height-sm);
|
|
|
|
|
--toggle-height-md: var(--control-height-md);
|
|
|
|
|
--toggle-height-lg: var(--control-height-lg);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-height-xl: var(--control-height-xl);
|
|
|
|
|
--toggle-px-xs: var(--space-2);
|
|
|
|
|
--toggle-px-sm: var(--space-2-5);
|
|
|
|
|
--toggle-px-md: var(--space-3-5);
|
|
|
|
|
--toggle-px-lg: var(--space-4-5);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-px-xl: var(--space-5);
|
|
|
|
|
--toggle-gap-xs: var(--space-1);
|
|
|
|
|
--toggle-gap-sm: var(--space-1-5);
|
|
|
|
|
--toggle-gap-md: var(--space-1-5);
|
|
|
|
|
--toggle-gap-lg: var(--space-2);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-gap-xl: var(--space-2-5);
|
|
|
|
|
--toggle-font-family: var(--font-ui);
|
|
|
|
|
--toggle-line-height: var(--leading-ui);
|
|
|
|
|
--toggle-letter-spacing: var(--tracking-normal);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-font-size-xs: 10px;
|
|
|
|
|
--toggle-font-size-sm: 12px;
|
|
|
|
|
--toggle-font-size-md: 14px;
|
|
|
|
|
--toggle-font-size-lg: 16px;
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-font-size-xl: 18px;
|
|
|
|
|
--toggle-font-weight-xs: var(--font-weight-medium);
|
|
|
|
|
--toggle-font-weight-sm: var(--font-weight-medium);
|
|
|
|
|
--toggle-font-weight-md: var(--font-weight-medium);
|
|
|
|
|
--toggle-font-weight-lg: var(--font-weight-medium);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-font-weight-xl: var(--font-weight-medium);
|
|
|
|
|
--toggle-radius-xs: var(--radius-sm);
|
|
|
|
|
--toggle-radius-sm: var(--radius-sm);
|
|
|
|
|
--toggle-radius-md: var(--radius-md);
|
|
|
|
|
--toggle-radius-lg: var(--radius-md);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-radius-xl: var(--radius-md);
|
|
|
|
|
--toggle-border-width: var(--border-width);
|
|
|
|
|
--toggle-shadow: none;
|
|
|
|
|
--toggle-transition-duration: var(--duration-fast);
|
|
|
|
|
--toggle-transition-ease: var(--ease-default);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-primary-track: var(--color-primary-track);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-primary-element: var(--color-primary-element);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-primary-hover: var(--color-primary-hover);
|
|
|
|
|
--toggle-primary-border: var(--color-primary-border);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-primary-solid: var(--color-primary-solid);
|
|
|
|
|
--toggle-primary-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
--toggle-primary-text: var(--color-primary-text);
|
|
|
|
|
--toggle-primary-contrast: var(--color-primary-contrast);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-neutral-track: var(--color-neutral-track);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-neutral-element: var(--color-neutral-element);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-neutral-hover: var(--color-neutral-hover);
|
|
|
|
|
--toggle-neutral-border: var(--color-neutral-border);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-neutral-solid: var(--color-neutral-solid);
|
|
|
|
|
--toggle-neutral-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
--toggle-neutral-text: var(--color-neutral-text);
|
|
|
|
|
--toggle-neutral-contrast: var(--color-neutral-contrast);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-risk-track: var(--color-risk-track);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-risk-element: var(--color-risk-element);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-risk-hover: var(--color-risk-hover);
|
|
|
|
|
--toggle-risk-border: var(--color-risk-border);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-risk-solid: var(--color-risk-solid);
|
|
|
|
|
--toggle-risk-solid-hover: var(--color-risk-solid-hover);
|
|
|
|
|
--toggle-risk-text: var(--color-risk-text);
|
|
|
|
|
--toggle-risk-contrast: var(--color-risk-contrast);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-threat-track: var(--color-threat-track);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-threat-element: var(--color-threat-element);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-threat-hover: var(--color-threat-hover);
|
|
|
|
|
--toggle-threat-border: var(--color-threat-border);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-threat-solid: var(--color-threat-solid);
|
|
|
|
|
--toggle-threat-solid-hover: var(--color-threat-solid-hover);
|
|
|
|
|
--toggle-threat-text: var(--color-threat-text);
|
|
|
|
|
--toggle-threat-contrast: var(--color-threat-contrast);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-secondary-track: var(--color-secondary-track);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-secondary-element: var(--color-secondary-element);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-secondary-hover: var(--color-secondary-hover);
|
|
|
|
|
--toggle-secondary-border: var(--color-secondary-border);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-secondary-solid: var(--color-secondary-solid);
|
|
|
|
|
--toggle-secondary-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
--toggle-secondary-text: var(--color-secondary-text);
|
|
|
|
|
--toggle-secondary-contrast: var(--color-secondary-contrast);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-affirm-track: var(--color-affirm-track);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-affirm-element: var(--color-affirm-element);
|
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 months ago
|
|
|
--toggle-affirm-hover: var(--color-affirm-hover);
|
|
|
|
|
--toggle-affirm-border: var(--color-affirm-border);
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--toggle-affirm-solid: var(--color-affirm-solid);
|
|
|
|
|
--toggle-affirm-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
--toggle-affirm-text: var(--color-affirm-text);
|
|
|
|
|
--toggle-affirm-contrast: var(--color-affirm-contrast);
|
|
|
|
|
--toggle-solid-bg: var(--color-surface-raised);
|
|
|
|
|
--toggle-solid-fg: var(--color-content-primary);
|
|
|
|
|
--toggle-solid-border: var(--color-border-default);
|
|
|
|
|
--toggle-outline-bg: transparent;
|
|
|
|
|
--toggle-ghost-bg: transparent;
|
|
|
|
|
--toggle-ghost-border: transparent;
|
|
|
|
|
--toggle-ghost-hover-border: transparent;
|
|
|
|
|
--toggle-disabled-opacity: 0.45;
|
|
|
|
|
--tooltip-content-z: 76;
|
|
|
|
|
--tooltip-max-width: 22rem;
|
|
|
|
|
--tooltip-padding-y-sm: var(--space-1);
|
|
|
|
|
--tooltip-padding-x-sm: var(--space-2);
|
|
|
|
|
--tooltip-padding-y-md: var(--space-1-5);
|
|
|
|
|
--tooltip-padding-x-md: var(--space-2-5);
|
|
|
|
|
--tooltip-padding-y-lg: var(--space-2);
|
|
|
|
|
--tooltip-padding-x-lg: var(--space-3);
|
|
|
|
|
--tooltip-font-size-sm: var(--font-size-xs);
|
|
|
|
|
--tooltip-font-size-md: var(--font-size-sm);
|
|
|
|
|
--tooltip-font-size-lg: var(--font-size-md);
|
|
|
|
|
--tooltip-font-family: var(--font-ui);
|
|
|
|
|
--tooltip-font-weight: var(--font-weight-regular);
|
|
|
|
|
--tooltip-line-height: var(--leading-text);
|
|
|
|
|
--tooltip-radius: var(--radius-md);
|
|
|
|
|
--tooltip-border-width: var(--border-width);
|
|
|
|
|
--tooltip-bg: var(--color-surface-overlay);
|
|
|
|
|
--tooltip-color: var(--color-content-primary);
|
|
|
|
|
--tooltip-border: color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) );
|
|
|
|
|
--tooltip-shadow: var(--shadow-overlay);
|
fix(uix audit): apply Kim audit remediations across morfo/soma/eidos/recipe layers
Resolves 34 of 40 failures from src/uix/audit-uix-kimi-1.md. The remaining
6 are all Words component (excluded per project owner — actively developed
on a separate track) or unrelated infra (cookie-adapter-client jsdom timeout).
Key changes:
- soma/provider/context.ts: swallow Svelte's `lifecycle_outside_component`
in `context.set()` so unit tests can instantiate providers without a
component tree (unblocked 18 picker tests in one line).
- soma/textarea: route inline style writes through `dom.apply({attrs})`
instead of direct `el.style.X = Y` (contract regex compliance).
- soma/picker-shell: add minimal Provider component + morfo so the shared
handle utility passes the morfo/component contract.
- eidos/_layout: lift `shared.ts` to `eidos/lib/layout-helpers.ts` (the
`_layout` directory wasn't a real component) and update 8 layout
primitive imports.
- eidos/command: replace `onMount` with `$effect` (visual layer can't use
Svelte 4 lifecycle hooks per component-api contract); restructure
`Item.Icon`/`Item.Shortcut` namespace so contract regex matches.
- eidos/color-picker: extract hue spectrum hsl literals to sidecar
`color-picker-spectrum.css`; keep main recipe color-literal-free.
- eidos/lib/recipes/base.ts: declare 196 layout-primitive + chrome CSS
vars (box, flex, grid, float, group, banner, container, section,
separator, toggle-group, pin-input, scroll-area, splitter,
navigation-menu, dropdown-menu, context-menu, date-range-field,
time-range-field, plus per-component additions to date-field,
color-picker, button, select). 197 missing → 0 non-Words.
- morfo: add `data-dir` to carousel, `data-kind` to date-picker, add
StrengthMeterLabel sub-part to password-field, register picker-shell.
- 5 pickers (date/color/date-range/time/time-range): add `internals.ts`
indirection so `exports.ts` doesn't re-export `*provider.svelte.ts`
directly (contract D); rewrite virtual root types to plain object
literals (no `WithChild`/`PrimitiveDivAttributes`).
- 4 new READMEs (button, textarea, password-field, picker-shell)
following the search-field canonical template.
Test result: 2391/2397 passing (99.75%). Remaining 6 failures are all
Words-scope or jsdom infra timeout — explicitly out of scope.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--box-display: revert-layer;
|
|
|
|
|
--box-position: revert-layer;
|
|
|
|
|
--box-width: revert-layer;
|
|
|
|
|
--box-min-width: 0;
|
|
|
|
|
--box-max-width: revert-layer;
|
|
|
|
|
--box-height: revert-layer;
|
|
|
|
|
--box-min-height: revert-layer;
|
|
|
|
|
--box-max-height: revert-layer;
|
|
|
|
|
--box-padding: revert-layer;
|
|
|
|
|
--box-padding-block: revert-layer;
|
|
|
|
|
--box-padding-inline: revert-layer;
|
|
|
|
|
--box-padding-top: revert-layer;
|
|
|
|
|
--box-padding-right: revert-layer;
|
|
|
|
|
--box-padding-bottom: revert-layer;
|
|
|
|
|
--box-padding-left: revert-layer;
|
|
|
|
|
--box-margin: revert-layer;
|
|
|
|
|
--box-margin-block: revert-layer;
|
|
|
|
|
--box-margin-inline: revert-layer;
|
|
|
|
|
--box-margin-top: revert-layer;
|
|
|
|
|
--box-margin-right: revert-layer;
|
|
|
|
|
--box-margin-bottom: revert-layer;
|
|
|
|
|
--box-margin-left: revert-layer;
|
|
|
|
|
--box-gap: revert-layer;
|
|
|
|
|
--box-top: revert-layer;
|
|
|
|
|
--box-right: revert-layer;
|
|
|
|
|
--box-bottom: revert-layer;
|
|
|
|
|
--box-left: revert-layer;
|
|
|
|
|
--box-inset: revert-layer;
|
|
|
|
|
--box-inset-block: revert-layer;
|
|
|
|
|
--box-inset-inline: revert-layer;
|
|
|
|
|
--box-overflow: revert-layer;
|
|
|
|
|
--box-overflow-x: revert-layer;
|
|
|
|
|
--box-overflow-y: revert-layer;
|
|
|
|
|
--box-flex: revert-layer;
|
|
|
|
|
--box-grow: revert-layer;
|
|
|
|
|
--box-shrink: revert-layer;
|
|
|
|
|
--box-basis: revert-layer;
|
|
|
|
|
--box-order: revert-layer;
|
|
|
|
|
--box-align-self: revert-layer;
|
|
|
|
|
--box-justify-self: revert-layer;
|
|
|
|
|
--box-place-self: revert-layer;
|
|
|
|
|
--box-grid-column: revert-layer;
|
|
|
|
|
--box-grid-row: revert-layer;
|
|
|
|
|
--box-grid-area: revert-layer;
|
|
|
|
|
--flex-direction: row;
|
|
|
|
|
--flex-align: stretch;
|
|
|
|
|
--flex-justify: flex-start;
|
|
|
|
|
--flex-wrap: nowrap;
|
|
|
|
|
--flex-align-content: normal;
|
|
|
|
|
--flex-row-gap: var(--box-gap, revert-layer);
|
|
|
|
|
--flex-column-gap: var(--box-gap, revert-layer);
|
|
|
|
|
--grid-template-columns: none;
|
|
|
|
|
--grid-template-rows: none;
|
|
|
|
|
--grid-auto-columns: auto;
|
|
|
|
|
--grid-auto-rows: auto;
|
|
|
|
|
--grid-auto-flow: row;
|
|
|
|
|
--grid-align: stretch;
|
|
|
|
|
--grid-justify: start;
|
|
|
|
|
--grid-align-content: normal;
|
|
|
|
|
--grid-place-items: revert-layer;
|
|
|
|
|
--grid-place-content: revert-layer;
|
|
|
|
|
--grid-gap: revert-layer;
|
|
|
|
|
--grid-row-gap: var(--grid-gap, revert-layer);
|
|
|
|
|
--grid-column-gap: var(--grid-gap, revert-layer);
|
|
|
|
|
--float-gap: var(--space-3);
|
|
|
|
|
--group-attached-overlap: 1px;
|
|
|
|
|
--banner-gap: var(--space-3);
|
|
|
|
|
--banner-radius: 0;
|
|
|
|
|
--container-width-xl: var(--layout-container-width-xl, 80rem);
|
|
|
|
|
--section-padding-block-sm: var(--space-8);
|
|
|
|
|
--section-padding-block-md: var(--space-12);
|
|
|
|
|
--section-padding-block-lg: var(--space-16);
|
|
|
|
|
--section-padding-block-xl: calc(var(--space-16) * 1.5);
|
|
|
|
|
--separator-thickness: var(--border-width);
|
|
|
|
|
--separator-color: var(--color-border-default);
|
|
|
|
|
--separator-min-length: var(--space-4);
|
|
|
|
|
--toggle-group-gap: var(--space-1);
|
|
|
|
|
--pin-input-gap: var(--space-2);
|
|
|
|
|
--pin-input-disabled-opacity: 0.55;
|
|
|
|
|
--pin-input-cell-size-sm: 2rem;
|
|
|
|
|
--pin-input-cell-size-md: 2.5rem;
|
|
|
|
|
--pin-input-cell-size-lg: 3rem;
|
|
|
|
|
--pin-input-cell-size-xl: 3.5rem;
|
|
|
|
|
--pin-input-cell-font-size-sm: var(--font-size-md);
|
|
|
|
|
--pin-input-cell-font-size-md: var(--font-size-lg);
|
|
|
|
|
--pin-input-cell-font-size-lg: var(--font-size-xl);
|
|
|
|
|
--pin-input-cell-font-size-xl: var(--font-size-xxl);
|
|
|
|
|
--pin-input-cell-font-weight: 500;
|
|
|
|
|
--pin-input-cell-radius: var(--radius-md);
|
|
|
|
|
--pin-input-cell-border-width: 1px;
|
|
|
|
|
--pin-input-cell-border-color: var(--color-border-default);
|
|
|
|
|
--pin-input-cell-bg: var(--color-surface-default);
|
|
|
|
|
--pin-input-cell-filled-bg: var(--color-primary-element);
|
|
|
|
|
--pin-input-cell-filled-border: var(--color-primary-border);
|
|
|
|
|
--pin-input-cell-active-border: var(--color-primary-solid);
|
|
|
|
|
--pin-input-cell-invalid-border: var(--color-threat-solid);
|
|
|
|
|
--scroll-area-bg: transparent;
|
|
|
|
|
--scroll-area-radius: var(--radius-md);
|
|
|
|
|
--scroll-area-scrollbar-padding: var(--space-0-5);
|
|
|
|
|
--scroll-area-scrollbar-size: var(--space-2-5);
|
|
|
|
|
--scroll-area-track-bg: color-mix(in srgb, var(--color-neutral-track) 60%, transparent);
|
|
|
|
|
--scroll-area-track-bg-hover: color-mix(in srgb, var(--color-neutral-track) 84%, transparent);
|
|
|
|
|
--scroll-area-thumb-bg: var(--color-content-muted);
|
|
|
|
|
--scroll-area-thumb-bg-hover: var(--color-content-secondary);
|
|
|
|
|
--scroll-area-thumb-radius: var(--radius-full);
|
|
|
|
|
--scroll-area-thumb-min-size: var(--space-3);
|
|
|
|
|
--scroll-area-transition-duration: var(--duration-fast);
|
|
|
|
|
--scroll-area-transition-ease: var(--ease-default);
|
|
|
|
|
--splitter-bg: var(--color-surface-default);
|
|
|
|
|
--splitter-radius: var(--radius-md);
|
|
|
|
|
--splitter-border-width: var(--border-width);
|
|
|
|
|
--splitter-border-color: var(--color-border-default);
|
|
|
|
|
--splitter-disabled-opacity: 0.6;
|
|
|
|
|
--splitter-panel-bg: transparent;
|
|
|
|
|
--splitter-handle-size: var(--space-2);
|
|
|
|
|
--splitter-handle-bg: var(--color-border-subtle);
|
|
|
|
|
--splitter-handle-bg-hover: var(--color-border-default);
|
|
|
|
|
--splitter-handle-bg-active: var(--color-primary-solid);
|
|
|
|
|
--splitter-grip-radius: var(--radius-full);
|
|
|
|
|
--splitter-grip-bg: var(--color-content-muted);
|
|
|
|
|
--splitter-grip-main: var(--space-4);
|
|
|
|
|
--splitter-grip-cross: 2px;
|
|
|
|
|
--splitter-transition-duration: var(--duration-fast);
|
|
|
|
|
--splitter-transition-ease: var(--ease-default);
|
|
|
|
|
--navigation-menu-indicator-w: 0px;
|
|
|
|
|
--navigation-menu-indicator-x: 0px;
|
|
|
|
|
--dropdown-menu-content-min-width: 12rem;
|
|
|
|
|
--dropdown-menu-content-max-height: min(60vh, 22rem);
|
|
|
|
|
--dropdown-menu-content-padding: var(--space-1);
|
|
|
|
|
--dropdown-menu-content-border-width: 1px;
|
|
|
|
|
--dropdown-menu-content-border-color: var(--color-border-default);
|
|
|
|
|
--dropdown-menu-content-radius: var(--radius-md);
|
|
|
|
|
--dropdown-menu-content-bg: var(--color-surface-overlay);
|
|
|
|
|
--dropdown-menu-content-shadow: var(--shadow-floating);
|
|
|
|
|
--dropdown-menu-content-font-size: var(--font-size-sm);
|
|
|
|
|
--dropdown-menu-item-gap: var(--space-2);
|
|
|
|
|
--dropdown-menu-item-height: 2rem;
|
|
|
|
|
--dropdown-menu-item-px: var(--space-2);
|
|
|
|
|
--dropdown-menu-item-py: var(--space-1);
|
|
|
|
|
--dropdown-menu-item-radius: var(--radius-sm);
|
|
|
|
|
--dropdown-menu-item-bg-hover: var(--color-primary-element);
|
|
|
|
|
--dropdown-menu-item-fg-hover: var(--color-content-primary);
|
|
|
|
|
--dropdown-menu-item-disabled-opacity: 0.55;
|
|
|
|
|
--dropdown-menu-heading-px: var(--space-2);
|
|
|
|
|
--dropdown-menu-heading-py: var(--space-1);
|
|
|
|
|
--dropdown-menu-heading-font-size: var(--font-size-xs);
|
|
|
|
|
--dropdown-menu-separator-bg: var(--color-border-subtle);
|
|
|
|
|
--dropdown-menu-separator-my: var(--space-1);
|
|
|
|
|
--context-menu-content-min-width: 12rem;
|
|
|
|
|
--context-menu-content-max-height: min(60vh, 22rem);
|
|
|
|
|
--context-menu-content-padding: var(--space-1);
|
|
|
|
|
--context-menu-content-border-width: 1px;
|
|
|
|
|
--context-menu-content-border-color: var(--color-border-default);
|
|
|
|
|
--context-menu-content-radius: var(--radius-md);
|
|
|
|
|
--context-menu-content-bg: var(--color-surface-overlay);
|
|
|
|
|
--context-menu-content-shadow: var(--shadow-floating);
|
|
|
|
|
--context-menu-content-font-size: var(--font-size-sm);
|
|
|
|
|
--context-menu-item-gap: var(--space-2);
|
|
|
|
|
--context-menu-item-height: 2rem;
|
|
|
|
|
--context-menu-item-px: var(--space-2);
|
|
|
|
|
--context-menu-item-py: var(--space-1);
|
|
|
|
|
--context-menu-item-radius: var(--radius-sm);
|
|
|
|
|
--context-menu-item-bg-hover: var(--color-primary-element);
|
|
|
|
|
--context-menu-item-fg-hover: var(--color-content-primary);
|
|
|
|
|
--context-menu-item-disabled-opacity: 0.55;
|
|
|
|
|
--context-menu-heading-px: var(--space-2);
|
|
|
|
|
--context-menu-heading-py: var(--space-1);
|
|
|
|
|
--context-menu-heading-font-size: var(--font-size-xs);
|
|
|
|
|
--context-menu-separator-bg: var(--color-border-subtle);
|
|
|
|
|
--context-menu-separator-my: var(--space-1);
|
|
|
|
|
--date-range-field-row-gap: var(--space-3);
|
|
|
|
|
--date-range-field-separator-color: var(--color-content-muted);
|
|
|
|
|
--date-range-field-separator-glyph: '—';
|
|
|
|
|
--time-range-field-row-gap: var(--space-3);
|
|
|
|
|
--time-range-field-separator-color: var(--color-content-muted);
|
|
|
|
|
--time-range-field-separator-glyph: '—';
|
|
|
|
|
}
|
|
|
|
|
|
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
[data-avatar] {
|
|
|
|
|
--_avatar-bg: var(--avatar-neutral-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-neutral-soft-fg);
|
|
|
|
|
--_avatar-border: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='primary'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-primary-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-primary-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='secondary'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-secondary-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-secondary-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='neutral'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-neutral-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-neutral-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='affirm'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-affirm-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-affirm-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='fulfill'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-fulfill-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-fulfill-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='risk'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-risk-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-risk-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='threat'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-threat-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-threat-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='loss'][data-variant='solid'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-loss-solid-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-loss-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='primary'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-primary-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-primary-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='secondary'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-secondary-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-secondary-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='neutral'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-neutral-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-neutral-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='affirm'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-affirm-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-affirm-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='fulfill'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-fulfill-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-fulfill-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='risk'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-risk-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-risk-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='threat'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-threat-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-threat-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='loss'][data-variant='soft'] {
|
|
|
|
|
--_avatar-bg: var(--avatar-loss-soft-bg);
|
|
|
|
|
--_avatar-fg: var(--avatar-loss-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='primary'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-primary-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-primary-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='secondary'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-secondary-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-secondary-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='neutral'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-neutral-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-neutral-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='affirm'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-affirm-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-affirm-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='fulfill'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-fulfill-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-fulfill-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='risk'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-risk-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-risk-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='threat'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-threat-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-threat-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar][data-color='loss'][data-variant='outline'] {
|
|
|
|
|
--_avatar-bg: transparent;
|
|
|
|
|
--_avatar-fg: var(--avatar-loss-outline-fg);
|
|
|
|
|
--_avatar-border: var(--avatar-loss-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-affirm-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-affirm-solid-fg);
|
|
|
|
|
--_avatar-badge-border: var(--color-surface-default);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='primary'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-primary-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-primary-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='secondary'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-secondary-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-secondary-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='neutral'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-neutral-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-neutral-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='affirm'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-affirm-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-affirm-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='fulfill'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-fulfill-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-fulfill-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='risk'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-risk-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-risk-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='threat'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-threat-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-threat-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='loss'][data-variant='solid'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-loss-solid-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-loss-solid-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='primary'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-primary-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-primary-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='secondary'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-secondary-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-secondary-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='neutral'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-neutral-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-neutral-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='affirm'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-affirm-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-affirm-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='fulfill'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-fulfill-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-fulfill-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='risk'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-risk-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-risk-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='threat'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-threat-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-threat-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='loss'][data-variant='soft'] {
|
|
|
|
|
--_avatar-badge-bg: var(--avatar-loss-soft-bg);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-loss-soft-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='primary'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-primary-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-primary-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='secondary'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-secondary-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-secondary-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='neutral'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-neutral-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-neutral-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='affirm'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-affirm-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-affirm-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='fulfill'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-fulfill-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-fulfill-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='risk'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-risk-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-risk-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='threat'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-threat-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-threat-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-avatar-badge][data-color='loss'][data-variant='outline'] {
|
|
|
|
|
--_avatar-badge-bg: var(--color-surface-default);
|
|
|
|
|
--_avatar-badge-fg: var(--avatar-loss-outline-fg);
|
|
|
|
|
--_avatar-badge-border: var(--avatar-loss-outline-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge] {
|
|
|
|
|
--_badge-track: var(--badge-primary-track);
|
|
|
|
|
--_badge-border: var(--badge-primary-border);
|
|
|
|
|
--_badge-solid: var(--badge-primary-solid);
|
|
|
|
|
--_badge-text: var(--badge-primary-text);
|
|
|
|
|
--_badge-contrast: var(--badge-primary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='secondary'] {
|
|
|
|
|
--_badge-track: var(--badge-secondary-track);
|
|
|
|
|
--_badge-border: var(--badge-secondary-border);
|
|
|
|
|
--_badge-solid: var(--badge-secondary-solid);
|
|
|
|
|
--_badge-text: var(--badge-secondary-text);
|
|
|
|
|
--_badge-contrast: var(--badge-secondary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='neutral'] {
|
|
|
|
|
--_badge-track: var(--badge-neutral-track);
|
|
|
|
|
--_badge-border: var(--badge-neutral-border);
|
|
|
|
|
--_badge-solid: var(--badge-neutral-solid);
|
|
|
|
|
--_badge-text: var(--badge-neutral-text);
|
|
|
|
|
--_badge-contrast: var(--badge-neutral-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='affirm'] {
|
|
|
|
|
--_badge-track: var(--badge-affirm-track);
|
|
|
|
|
--_badge-border: var(--badge-affirm-border);
|
|
|
|
|
--_badge-solid: var(--badge-affirm-solid);
|
|
|
|
|
--_badge-text: var(--badge-affirm-text);
|
|
|
|
|
--_badge-contrast: var(--badge-affirm-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='fulfill'] {
|
|
|
|
|
--_badge-track: var(--badge-fulfill-track);
|
|
|
|
|
--_badge-border: var(--badge-fulfill-border);
|
|
|
|
|
--_badge-solid: var(--badge-fulfill-solid);
|
|
|
|
|
--_badge-text: var(--badge-fulfill-text);
|
|
|
|
|
--_badge-contrast: var(--badge-fulfill-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='risk'] {
|
|
|
|
|
--_badge-track: var(--badge-risk-track);
|
|
|
|
|
--_badge-border: var(--badge-risk-border);
|
|
|
|
|
--_badge-solid: var(--badge-risk-solid);
|
|
|
|
|
--_badge-text: var(--badge-risk-text);
|
|
|
|
|
--_badge-contrast: var(--badge-risk-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='threat'] {
|
|
|
|
|
--_badge-track: var(--badge-threat-track);
|
|
|
|
|
--_badge-border: var(--badge-threat-border);
|
|
|
|
|
--_badge-solid: var(--badge-threat-solid);
|
|
|
|
|
--_badge-text: var(--badge-threat-text);
|
|
|
|
|
--_badge-contrast: var(--badge-threat-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-badge][data-color='loss'] {
|
|
|
|
|
--_badge-track: var(--badge-loss-track);
|
|
|
|
|
--_badge-border: var(--badge-loss-border);
|
|
|
|
|
--_badge-solid: var(--badge-loss-solid);
|
|
|
|
|
--_badge-text: var(--badge-loss-text);
|
|
|
|
|
--_badge-contrast: var(--badge-loss-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card] {
|
|
|
|
|
--_card-track: var(--card-neutral-track);
|
|
|
|
|
--_card-border: var(--card-neutral-border);
|
|
|
|
|
--_card-solid: var(--card-neutral-solid);
|
|
|
|
|
--_card-text: var(--card-neutral-text);
|
|
|
|
|
--_card-contrast: var(--card-neutral-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='primary'] {
|
|
|
|
|
--_card-track: var(--card-primary-track);
|
|
|
|
|
--_card-border: var(--card-primary-border);
|
|
|
|
|
--_card-solid: var(--card-primary-solid);
|
|
|
|
|
--_card-text: var(--card-primary-text);
|
|
|
|
|
--_card-contrast: var(--card-primary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='secondary'] {
|
|
|
|
|
--_card-track: var(--card-secondary-track);
|
|
|
|
|
--_card-border: var(--card-secondary-border);
|
|
|
|
|
--_card-solid: var(--card-secondary-solid);
|
|
|
|
|
--_card-text: var(--card-secondary-text);
|
|
|
|
|
--_card-contrast: var(--card-secondary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='affirm'] {
|
|
|
|
|
--_card-track: var(--card-affirm-track);
|
|
|
|
|
--_card-border: var(--card-affirm-border);
|
|
|
|
|
--_card-solid: var(--card-affirm-solid);
|
|
|
|
|
--_card-text: var(--card-affirm-text);
|
|
|
|
|
--_card-contrast: var(--card-affirm-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='fulfill'] {
|
|
|
|
|
--_card-track: var(--card-fulfill-track);
|
|
|
|
|
--_card-border: var(--card-fulfill-border);
|
|
|
|
|
--_card-solid: var(--card-fulfill-solid);
|
|
|
|
|
--_card-text: var(--card-fulfill-text);
|
|
|
|
|
--_card-contrast: var(--card-fulfill-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='risk'] {
|
|
|
|
|
--_card-track: var(--card-risk-track);
|
|
|
|
|
--_card-border: var(--card-risk-border);
|
|
|
|
|
--_card-solid: var(--card-risk-solid);
|
|
|
|
|
--_card-text: var(--card-risk-text);
|
|
|
|
|
--_card-contrast: var(--card-risk-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='threat'] {
|
|
|
|
|
--_card-track: var(--card-threat-track);
|
|
|
|
|
--_card-border: var(--card-threat-border);
|
|
|
|
|
--_card-solid: var(--card-threat-solid);
|
|
|
|
|
--_card-text: var(--card-threat-text);
|
|
|
|
|
--_card-contrast: var(--card-threat-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-card][data-color='loss'] {
|
|
|
|
|
--_card-track: var(--card-loss-track);
|
|
|
|
|
--_card-border: var(--card-loss-border);
|
|
|
|
|
--_card-solid: var(--card-loss-solid);
|
|
|
|
|
--_card-text: var(--card-loss-text);
|
|
|
|
|
--_card-contrast: var(--card-loss-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-checkbox] {
|
|
|
|
|
--_checkbox-palette-solid: var(--checkbox-primary-solid);
|
|
|
|
|
--_checkbox-palette-solid-hover: var(--checkbox-primary-solid-hover);
|
|
|
|
|
--_checkbox-palette-text: var(--checkbox-indicator-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-checkbox][data-color='secondary'] {
|
|
|
|
|
--_checkbox-palette-solid: var(--checkbox-secondary-solid);
|
|
|
|
|
--_checkbox-palette-solid-hover: var(--checkbox-secondary-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-checkbox][data-color='neutral'] {
|
|
|
|
|
--_checkbox-palette-solid: var(--checkbox-neutral-solid);
|
|
|
|
|
--_checkbox-palette-solid-hover: var(--checkbox-neutral-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-checkbox][data-color='affirm'] {
|
|
|
|
|
--_checkbox-palette-solid: var(--checkbox-affirm-solid);
|
|
|
|
|
--_checkbox-palette-solid-hover: var(--checkbox-affirm-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button] {
|
|
|
|
|
--button-palette-track: var(--button-primary-track);
|
|
|
|
|
--button-palette-element: var(--button-primary-element);
|
|
|
|
|
--button-palette-border: var(--button-primary-border);
|
|
|
|
|
--button-palette-solid: var(--button-primary-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-primary-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-primary-text);
|
|
|
|
|
--button-palette-contrast: var(--button-primary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='secondary'] {
|
|
|
|
|
--button-palette-track: var(--button-secondary-track);
|
|
|
|
|
--button-palette-element: var(--button-secondary-element);
|
|
|
|
|
--button-palette-border: var(--button-secondary-border);
|
|
|
|
|
--button-palette-solid: var(--button-secondary-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-secondary-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-secondary-text);
|
|
|
|
|
--button-palette-contrast: var(--button-secondary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='neutral'] {
|
|
|
|
|
--button-palette-track: var(--button-neutral-track);
|
|
|
|
|
--button-palette-element: var(--button-neutral-element);
|
|
|
|
|
--button-palette-border: var(--button-neutral-border);
|
|
|
|
|
--button-palette-solid: var(--button-neutral-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-neutral-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-neutral-text);
|
|
|
|
|
--button-palette-contrast: var(--button-neutral-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='affirm'] {
|
|
|
|
|
--button-palette-track: var(--button-affirm-track);
|
|
|
|
|
--button-palette-element: var(--button-affirm-element);
|
|
|
|
|
--button-palette-border: var(--button-affirm-border);
|
|
|
|
|
--button-palette-solid: var(--button-affirm-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-affirm-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-affirm-text);
|
|
|
|
|
--button-palette-contrast: var(--button-affirm-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='fulfill'] {
|
|
|
|
|
--button-palette-track: var(--button-fulfill-track);
|
|
|
|
|
--button-palette-element: var(--button-fulfill-element);
|
|
|
|
|
--button-palette-border: var(--button-fulfill-border);
|
|
|
|
|
--button-palette-solid: var(--button-fulfill-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-fulfill-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-fulfill-text);
|
|
|
|
|
--button-palette-contrast: var(--button-fulfill-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='risk'] {
|
|
|
|
|
--button-palette-track: var(--button-risk-track);
|
|
|
|
|
--button-palette-element: var(--button-risk-element);
|
|
|
|
|
--button-palette-border: var(--button-risk-border);
|
|
|
|
|
--button-palette-solid: var(--button-risk-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-risk-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-risk-text);
|
|
|
|
|
--button-palette-contrast: var(--button-risk-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='threat'] {
|
|
|
|
|
--button-palette-track: var(--button-threat-track);
|
|
|
|
|
--button-palette-element: var(--button-threat-element);
|
|
|
|
|
--button-palette-border: var(--button-threat-border);
|
|
|
|
|
--button-palette-solid: var(--button-threat-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-threat-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-threat-text);
|
|
|
|
|
--button-palette-contrast: var(--button-threat-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-button][data-color='loss'] {
|
|
|
|
|
--button-palette-track: var(--button-loss-track);
|
|
|
|
|
--button-palette-element: var(--button-loss-element);
|
|
|
|
|
--button-palette-border: var(--button-loss-border);
|
|
|
|
|
--button-palette-solid: var(--button-loss-solid);
|
|
|
|
|
--button-palette-solid-hover: var(--button-loss-solid-hover);
|
|
|
|
|
--button-palette-text: var(--button-loss-text);
|
|
|
|
|
--button-palette-contrast: var(--button-loss-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-radio-group] {
|
|
|
|
|
--_radio-group-palette-solid: var(--radio-group-primary-solid);
|
|
|
|
|
--_radio-group-palette-solid-hover: var(--radio-group-primary-solid-hover);
|
|
|
|
|
--_radio-group-palette-text: var(--radio-group-dot-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-radio-group][data-color='secondary'] {
|
|
|
|
|
--_radio-group-palette-solid: var(--radio-group-secondary-solid);
|
|
|
|
|
--_radio-group-palette-solid-hover: var(--radio-group-secondary-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-radio-group][data-color='neutral'] {
|
|
|
|
|
--_radio-group-palette-solid: var(--radio-group-neutral-solid);
|
|
|
|
|
--_radio-group-palette-solid-hover: var(--radio-group-neutral-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-radio-group][data-color='affirm'] {
|
|
|
|
|
--_radio-group-palette-solid: var(--radio-group-affirm-solid);
|
|
|
|
|
--_radio-group-palette-solid-hover: var(--radio-group-affirm-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger], [data-select-content] {
|
|
|
|
|
--_select-accent-track: var(--select-primary-track);
|
|
|
|
|
--_select-accent-border: var(--select-primary-border);
|
|
|
|
|
--_select-accent-text: var(--select-primary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='secondary'], [data-select-content][data-color='secondary'] {
|
|
|
|
|
--_select-accent-track: var(--select-secondary-track);
|
|
|
|
|
--_select-accent-border: var(--select-secondary-border);
|
|
|
|
|
--_select-accent-text: var(--select-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='neutral'], [data-select-content][data-color='neutral'] {
|
|
|
|
|
--_select-accent-track: var(--select-neutral-track);
|
|
|
|
|
--_select-accent-border: var(--select-neutral-border);
|
|
|
|
|
--_select-accent-text: var(--select-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='affirm'], [data-select-content][data-color='affirm'] {
|
|
|
|
|
--_select-accent-track: var(--select-affirm-track);
|
|
|
|
|
--_select-accent-border: var(--select-affirm-border);
|
|
|
|
|
--_select-accent-text: var(--select-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='fulfill'], [data-select-content][data-color='fulfill'] {
|
|
|
|
|
--_select-accent-track: var(--select-fulfill-track);
|
|
|
|
|
--_select-accent-border: var(--select-fulfill-border);
|
|
|
|
|
--_select-accent-text: var(--select-fulfill-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='risk'], [data-select-content][data-color='risk'] {
|
|
|
|
|
--_select-accent-track: var(--select-risk-track);
|
|
|
|
|
--_select-accent-border: var(--select-risk-border);
|
|
|
|
|
--_select-accent-text: var(--select-risk-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='threat'], [data-select-content][data-color='threat'] {
|
|
|
|
|
--_select-accent-track: var(--select-threat-track);
|
|
|
|
|
--_select-accent-border: var(--select-threat-border);
|
|
|
|
|
--_select-accent-text: var(--select-threat-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-select-trigger][data-color='loss'], [data-select-content][data-color='loss'] {
|
|
|
|
|
--_select-accent-track: var(--select-loss-track);
|
|
|
|
|
--_select-accent-border: var(--select-loss-border);
|
|
|
|
|
--_select-accent-text: var(--select-loss-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-primary-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-primary-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-primary-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-primary-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-primary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='secondary'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-secondary-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-secondary-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-secondary-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-secondary-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='neutral'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-neutral-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-neutral-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-neutral-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-neutral-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='affirm'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-affirm-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-affirm-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-affirm-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-affirm-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='fulfill'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-fulfill-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-fulfill-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-fulfill-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-fulfill-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-fulfill-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='risk'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-risk-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-risk-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-risk-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-risk-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-risk-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='threat'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-threat-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-threat-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-threat-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-threat-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-threat-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-file-upload][data-color='loss'] {
|
|
|
|
|
--_file-upload-accent-solid: var(--file-upload-loss-solid);
|
|
|
|
|
--_file-upload-accent-solid-hover: var(--file-upload-loss-solid-hover);
|
|
|
|
|
--_file-upload-accent-track: var(--file-upload-loss-track);
|
|
|
|
|
--_file-upload-accent-border: var(--file-upload-loss-border);
|
|
|
|
|
--_file-upload-accent-text: var(--file-upload-loss-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-primary-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-primary-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-primary-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-primary-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-primary-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-primary-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-primary-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='secondary'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-secondary-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-secondary-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-secondary-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-secondary-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-secondary-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-secondary-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-secondary-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='neutral'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-neutral-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-neutral-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-neutral-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-neutral-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-neutral-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-neutral-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-neutral-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='affirm'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-affirm-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-affirm-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-affirm-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-affirm-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-affirm-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-affirm-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-affirm-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='fulfill'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-fulfill-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-fulfill-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-fulfill-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-fulfill-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-fulfill-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-fulfill-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-fulfill-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='risk'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-risk-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-risk-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-risk-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-risk-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-risk-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-risk-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-risk-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='threat'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-threat-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-threat-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-threat-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-threat-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-threat-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-threat-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-threat-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tag-group][data-color='loss'] {
|
|
|
|
|
--_tag-group-selected-solid-bg: var(--tag-group-loss-solid-bg);
|
|
|
|
|
--_tag-group-selected-solid-bg-hover: var(--tag-group-loss-solid-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-bg: var(--tag-group-loss-soft-bg);
|
|
|
|
|
--_tag-group-selected-soft-bg-hover: var(--tag-group-loss-soft-bg-hover);
|
|
|
|
|
--_tag-group-selected-soft-fg: var(--tag-group-loss-soft-fg);
|
|
|
|
|
--_tag-group-selected-outline-border: var(--tag-group-loss-outline-border);
|
|
|
|
|
--_tag-group-selected-outline-fg: var(--tag-group-loss-outline-fg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-primary-solid);
|
|
|
|
|
--_editable-accent-border: var(--editable-primary-border);
|
|
|
|
|
--_editable-accent-solid-hover: var(--color-primary-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='secondary'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-secondary-solid);
|
|
|
|
|
--_editable-accent-border: var(--editable-secondary-border);
|
|
|
|
|
--_editable-accent-solid-hover: var(--color-secondary-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='neutral'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-neutral-solid);
|
|
|
|
|
--_editable-accent-border: var(--editable-neutral-border);
|
|
|
|
|
--_editable-accent-solid-hover: var(--color-neutral-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='affirm'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-affirm-solid);
|
|
|
|
|
--_editable-accent-border: var(--editable-affirm-border);
|
|
|
|
|
--_editable-accent-solid-hover: var(--color-affirm-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='risk'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-risk-solid);
|
|
|
|
|
--_editable-accent-border: var(--editable-risk-border);
|
|
|
|
|
--_editable-accent-solid-hover: var(--color-risk-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-editable][data-color='threat'] {
|
|
|
|
|
--_editable-accent-solid: var(--editable-threat-solid);
|
|
|
|
|
--_editable-accent-border: var(--editable-threat-border);
|
|
|
|
|
--_editable-accent-solid-hover: var(--color-threat-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words] {
|
|
|
|
|
--_words-accent-solid: var(--words-primary-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-primary-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-primary-track);
|
|
|
|
|
--_words-accent-border: var(--words-primary-border);
|
|
|
|
|
--_words-accent-text: var(--words-primary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='secondary'] {
|
|
|
|
|
--_words-accent-solid: var(--words-secondary-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-secondary-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-secondary-track);
|
|
|
|
|
--_words-accent-border: var(--words-secondary-border);
|
|
|
|
|
--_words-accent-text: var(--words-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='neutral'] {
|
|
|
|
|
--_words-accent-solid: var(--words-neutral-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-neutral-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-neutral-track);
|
|
|
|
|
--_words-accent-border: var(--words-neutral-border);
|
|
|
|
|
--_words-accent-text: var(--words-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='affirm'] {
|
|
|
|
|
--_words-accent-solid: var(--words-affirm-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-affirm-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-affirm-track);
|
|
|
|
|
--_words-accent-border: var(--words-affirm-border);
|
|
|
|
|
--_words-accent-text: var(--words-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='fulfill'] {
|
|
|
|
|
--_words-accent-solid: var(--words-fulfill-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-fulfill-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-fulfill-track);
|
|
|
|
|
--_words-accent-border: var(--words-fulfill-border);
|
|
|
|
|
--_words-accent-text: var(--words-fulfill-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='risk'] {
|
|
|
|
|
--_words-accent-solid: var(--words-risk-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-risk-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-risk-track);
|
|
|
|
|
--_words-accent-border: var(--words-risk-border);
|
|
|
|
|
--_words-accent-text: var(--words-risk-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='threat'] {
|
|
|
|
|
--_words-accent-solid: var(--words-threat-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-threat-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-threat-track);
|
|
|
|
|
--_words-accent-border: var(--words-threat-border);
|
|
|
|
|
--_words-accent-text: var(--words-threat-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-words][data-color='loss'] {
|
|
|
|
|
--_words-accent-solid: var(--words-loss-solid);
|
|
|
|
|
--_words-accent-solid-hover: var(--words-loss-solid-hover);
|
|
|
|
|
--_words-accent-track: var(--words-loss-track);
|
|
|
|
|
--_words-accent-border: var(--words-loss-border);
|
|
|
|
|
--_words-accent-text: var(--words-loss-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-primary-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-primary-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-primary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='secondary'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-secondary-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-secondary-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='neutral'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-neutral-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-neutral-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='affirm'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-affirm-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-affirm-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='fulfill'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-fulfill-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-fulfill-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-fulfill-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='risk'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-risk-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-risk-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-risk-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='threat'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-threat-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-threat-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-threat-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-tags-input][data-color='loss'] {
|
|
|
|
|
--_tags-input-accent-track: var(--tags-input-loss-track);
|
|
|
|
|
--_tags-input-accent-border: var(--tags-input-loss-border);
|
|
|
|
|
--_tags-input-accent-text: var(--tags-input-loss-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper] {
|
|
|
|
|
--_stepper-accent-solid: var(--stepper-primary-solid);
|
|
|
|
|
--_stepper-accent-track: var(--stepper-primary-track);
|
|
|
|
|
--_stepper-accent-border: var(--stepper-primary-border);
|
|
|
|
|
--_stepper-accent-text: var(--stepper-primary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-color='secondary'] {
|
|
|
|
|
--_stepper-accent-solid: var(--stepper-secondary-solid);
|
|
|
|
|
--_stepper-accent-track: var(--stepper-secondary-track);
|
|
|
|
|
--_stepper-accent-border: var(--stepper-secondary-border);
|
|
|
|
|
--_stepper-accent-text: var(--stepper-secondary-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-color='neutral'] {
|
|
|
|
|
--_stepper-accent-solid: var(--stepper-neutral-solid);
|
|
|
|
|
--_stepper-accent-track: var(--stepper-neutral-track);
|
|
|
|
|
--_stepper-accent-border: var(--stepper-neutral-border);
|
|
|
|
|
--_stepper-accent-text: var(--stepper-neutral-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-color='affirm'] {
|
|
|
|
|
--_stepper-accent-solid: var(--stepper-affirm-solid);
|
|
|
|
|
--_stepper-accent-track: var(--stepper-affirm-track);
|
|
|
|
|
--_stepper-accent-border: var(--stepper-affirm-border);
|
|
|
|
|
--_stepper-accent-text: var(--stepper-affirm-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-stepper][data-color='fulfill'] {
|
|
|
|
|
--_stepper-accent-solid: var(--stepper-fulfill-solid);
|
|
|
|
|
--_stepper-accent-track: var(--stepper-fulfill-track);
|
|
|
|
|
--_stepper-accent-border: var(--stepper-fulfill-border);
|
|
|
|
|
--_stepper-accent-text: var(--stepper-fulfill-text);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-switch] {
|
|
|
|
|
--_switch-palette-solid: var(--switch-neutral-solid);
|
|
|
|
|
--_switch-palette-solid-hover: var(--switch-neutral-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-switch][data-color='primary'] {
|
|
|
|
|
--_switch-palette-solid: var(--switch-primary-solid);
|
|
|
|
|
--_switch-palette-solid-hover: var(--switch-primary-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-switch][data-color='secondary'] {
|
|
|
|
|
--_switch-palette-solid: var(--switch-secondary-solid);
|
|
|
|
|
--_switch-palette-solid-hover: var(--switch-secondary-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-switch][data-color='affirm'] {
|
|
|
|
|
--_switch-palette-solid: var(--switch-affirm-solid);
|
|
|
|
|
--_switch-palette-solid-hover: var(--switch-affirm-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-switch][data-color='risk'] {
|
|
|
|
|
--_switch-palette-solid: var(--switch-risk-solid);
|
|
|
|
|
--_switch-palette-solid-hover: var(--switch-risk-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-switch][data-color='threat'] {
|
|
|
|
|
--_switch-palette-solid: var(--switch-threat-solid);
|
|
|
|
|
--_switch-palette-solid-hover: var(--switch-threat-solid-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-neutral-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-neutral-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-neutral-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-neutral-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-neutral-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-neutral-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-neutral-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-neutral-contrast);
|
|
|
|
|
--toggle-solid-hover-bg: color-mix( in srgb, var(--color-surface-overlay) 68%, var(--toggle-palette-track) );
|
|
|
|
|
--toggle-solid-hover-border: color-mix( in srgb, var(--toggle-palette-border) 45%, var(--color-border-strong) );
|
|
|
|
|
--toggle-solid-on-bg: var(--toggle-palette-solid);
|
|
|
|
|
--toggle-solid-on-fg: var(--toggle-palette-contrast);
|
|
|
|
|
--toggle-solid-on-border: var(--toggle-palette-solid);
|
|
|
|
|
--toggle-solid-on-hover-bg: var(--toggle-palette-solid-hover);
|
|
|
|
|
--toggle-solid-on-hover-border: var(--toggle-palette-solid-hover);
|
|
|
|
|
--toggle-outline-fg: var(--toggle-palette-text);
|
|
|
|
|
--toggle-outline-border: color-mix( in srgb, var(--toggle-palette-border) 88%, var(--color-border-default) );
|
|
|
|
|
--toggle-outline-hover-bg: var(--toggle-palette-track);
|
|
|
|
|
--toggle-outline-hover-border: color-mix( in srgb, var(--toggle-palette-border) 100%, var(--color-border-default) );
|
|
|
|
|
--toggle-outline-on-bg: color-mix( in srgb, var(--toggle-palette-element) 100%, var(--color-surface-raised) );
|
|
|
|
|
--toggle-outline-on-fg: var(--toggle-palette-text);
|
|
|
|
|
--toggle-outline-on-border: var(--toggle-palette-border);
|
|
|
|
|
--toggle-outline-on-hover-bg: var(--toggle-palette-hover);
|
|
|
|
|
--toggle-outline-on-hover-border: var(--toggle-palette-border);
|
|
|
|
|
--toggle-ghost-fg: var(--toggle-palette-text);
|
|
|
|
|
--toggle-ghost-hover-bg: color-mix(in srgb, var(--toggle-palette-track) 72%, transparent);
|
|
|
|
|
--toggle-ghost-on-bg: var(--toggle-palette-track);
|
|
|
|
|
--toggle-ghost-on-fg: var(--toggle-palette-text);
|
|
|
|
|
--toggle-ghost-on-border: color-mix( in srgb, var(--toggle-palette-border) 72%, transparent );
|
|
|
|
|
--toggle-ghost-on-hover-bg: var(--toggle-palette-element);
|
|
|
|
|
--toggle-ghost-on-hover-border: color-mix( in srgb, var(--toggle-palette-border) 88%, transparent );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle][data-color='primary'] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-primary-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-primary-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-primary-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-primary-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-primary-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-primary-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-primary-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-primary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle][data-color='secondary'] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-secondary-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-secondary-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-secondary-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-secondary-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-secondary-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-secondary-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-secondary-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-secondary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle][data-color='affirm'] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-affirm-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-affirm-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-affirm-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-affirm-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-affirm-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-affirm-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-affirm-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-affirm-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle][data-color='risk'] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-risk-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-risk-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-risk-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-risk-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-risk-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-risk-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-risk-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-risk-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle][data-color='threat'] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-threat-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-threat-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-threat-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-threat-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-threat-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-threat-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-threat-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-threat-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle-group][data-color='primary'] [data-toggle-group-item] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-primary-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-primary-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-primary-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-primary-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-primary-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-primary-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-primary-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-primary-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle-group][data-color='affirm'] [data-toggle-group-item] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-affirm-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-affirm-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-affirm-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-affirm-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-affirm-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-affirm-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-affirm-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-affirm-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle-group][data-color='risk'] [data-toggle-group-item] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-risk-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-risk-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-risk-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-risk-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-risk-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-risk-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-risk-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-risk-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-toggle-group][data-color='threat'] [data-toggle-group-item] {
|
|
|
|
|
--toggle-palette-track: var(--toggle-threat-track);
|
|
|
|
|
--toggle-palette-element: var(--toggle-threat-element);
|
|
|
|
|
--toggle-palette-hover: var(--toggle-threat-hover);
|
|
|
|
|
--toggle-palette-border: var(--toggle-threat-border);
|
|
|
|
|
--toggle-palette-solid: var(--toggle-threat-solid);
|
|
|
|
|
--toggle-palette-solid-hover: var(--toggle-threat-solid-hover);
|
|
|
|
|
--toggle-palette-text: var(--toggle-threat-text);
|
|
|
|
|
--toggle-palette-contrast: var(--toggle-threat-contrast);
|
|
|
|
|
}
|
|
|
|
|
|
feat(eidos foundation): emit --style-{name}-* tokens for named typography styles
`STATIC_TYPOGRAPHY.styles` already defined 11 named typography styles
(hero, h1..h6, body, prose, label, caption, code) but the renderer
only emitted families / sizes / weights — the style entries lived
as data with no CSS reflection.
Extend `appendTypographyDeclarations` so each named style emits:
- `--style-{name}-font-family` → `var(--font-family-{family})`
- `--style-{name}-font-size` → `var(--font-size-{size})`
- `--style-{name}-line-height` → literal or `var(--font-line-height-{size})`
- `--style-{name}-letter-spacing` → literal or `var(--font-letter-spacing-{size})`
- `--style-{name}-font-weight` → `var(--font-weight-{weight})` (or numeric)
- `--style-{name}-color` → `var(--color-{dot.path → dash-path})`
Responsive sizes (e.g. `hero.size = { base: 'xxl', md: 'xxxl' }`)
emit the base value into `:root` and per-breakpoint
`@media (min-width: …)` blocks that override the same variables.
Breakpoint thresholds match `$libs/dom/responsive` (sm: 480, md: 768,
lg: 1024, xl: 1280, xxl: 1536).
`renderStaticCss` now iterates `STYLE_BREAKPOINT_ORDER` after the
main `:root` block and appends one media-query block per breakpoint
that has at least one responsive override. The `indentBlock` helper
preserves indentation inside the wrapper.
`base.css` regenerated. svelte-check 0 errors, `npm run component:audit`
81 / 81 PASS unchanged. This is foundation-only; no components consume
the new tokens yet — that lands in the typography port (Text + Heading
+ Display + Code + CodeBlock + Kbd + Mark + Highlight + Link).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
:root {
|
|
|
|
|
--style-hero-font-size: var(--font-size-xxxl);
|
|
|
|
|
--style-hero-line-height: var(--font-line-height-xxxl);
|
|
|
|
|
--style-hero-letter-spacing: var(--font-letter-spacing-xxxl);
|
|
|
|
|
--style-h1-font-size: var(--font-size-xxl);
|
|
|
|
|
--style-h1-line-height: var(--font-line-height-xxl);
|
|
|
|
|
--style-h1-letter-spacing: var(--font-letter-spacing-xxl);
|
|
|
|
|
--style-h2-font-size: var(--font-size-xl);
|
|
|
|
|
--style-h2-line-height: var(--font-line-height-xl);
|
|
|
|
|
--style-h2-letter-spacing: var(--font-letter-spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-density='compact'] {
|
|
|
|
|
--density-scale: var(--density-compact-scale);
|
|
|
|
|
--density-space-scale: var(--density-compact-space-scale);
|
|
|
|
|
--density-control-scale: var(--density-compact-control-scale);
|
|
|
|
|
--density-content-scale: var(--density-compact-content-scale);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-density='spacious'] {
|
|
|
|
|
--density-scale: var(--density-spacious-scale);
|
|
|
|
|
--density-space-scale: var(--density-spacious-space-scale);
|
|
|
|
|
--density-control-scale: var(--density-spacious-control-scale);
|
|
|
|
|
--density-content-scale: var(--density-spacious-content-scale);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root,
|
|
|
|
|
[data-theme='base-light'],
|
|
|
|
|
[data-theme='light'] {
|
|
|
|
|
--scale-gray-1: #fcfcfc;
|
|
|
|
|
--scale-gray-2: #f9f9f9;
|
|
|
|
|
--scale-gray-3: #f0f0f0;
|
|
|
|
|
--scale-gray-4: #e8e8e8;
|
|
|
|
|
--scale-gray-5: #e0e0e0;
|
|
|
|
|
--scale-gray-6: #d9d9d9;
|
|
|
|
|
--scale-gray-7: #cecece;
|
|
|
|
|
--scale-gray-8: #bbbbbb;
|
|
|
|
|
--scale-gray-9: #8d8d8d;
|
|
|
|
|
--scale-gray-10: #838383;
|
|
|
|
|
--scale-gray-11: #646464;
|
|
|
|
|
--scale-gray-12: #202020;
|
|
|
|
|
--scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent);
|
|
|
|
|
--scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent);
|
|
|
|
|
--scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent);
|
|
|
|
|
--scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent);
|
|
|
|
|
--scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent);
|
|
|
|
|
--scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent);
|
|
|
|
|
--scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent);
|
|
|
|
|
--scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent);
|
|
|
|
|
--scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent);
|
|
|
|
|
--scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent);
|
|
|
|
|
--scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent);
|
|
|
|
|
--scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent);
|
|
|
|
|
--scale-slate-1: #fcfcfd;
|
|
|
|
|
--scale-slate-2: #f9f9fb;
|
|
|
|
|
--scale-slate-3: #f0f0f3;
|
|
|
|
|
--scale-slate-4: #e8e8ec;
|
|
|
|
|
--scale-slate-5: #e0e1e6;
|
|
|
|
|
--scale-slate-6: #d9d9e0;
|
|
|
|
|
--scale-slate-7: #cdced6;
|
|
|
|
|
--scale-slate-8: #b9bbc6;
|
|
|
|
|
--scale-slate-9: #8b8d98;
|
|
|
|
|
--scale-slate-10: #80838d;
|
|
|
|
|
--scale-slate-11: #60646c;
|
|
|
|
|
--scale-slate-12: #1c2024;
|
|
|
|
|
--scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent);
|
|
|
|
|
--scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent);
|
|
|
|
|
--scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent);
|
|
|
|
|
--scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent);
|
|
|
|
|
--scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent);
|
|
|
|
|
--scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent);
|
|
|
|
|
--scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent);
|
|
|
|
|
--scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent);
|
|
|
|
|
--scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent);
|
|
|
|
|
--scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent);
|
|
|
|
|
--scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent);
|
|
|
|
|
--scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent);
|
|
|
|
|
--scale-blue-1: #fbfdff;
|
|
|
|
|
--scale-blue-2: #f4faff;
|
|
|
|
|
--scale-blue-3: #e6f4fe;
|
|
|
|
|
--scale-blue-4: #d5efff;
|
|
|
|
|
--scale-blue-5: #c2e5ff;
|
|
|
|
|
--scale-blue-6: #acd8fc;
|
|
|
|
|
--scale-blue-7: #8ec8f6;
|
|
|
|
|
--scale-blue-8: #5eb1ef;
|
|
|
|
|
--scale-blue-9: #0090ff;
|
|
|
|
|
--scale-blue-10: #0588f0;
|
|
|
|
|
--scale-blue-11: #0d74ce;
|
|
|
|
|
--scale-blue-12: #113264;
|
|
|
|
|
--scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent);
|
|
|
|
|
--scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent);
|
|
|
|
|
--scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent);
|
|
|
|
|
--scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent);
|
|
|
|
|
--scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent);
|
|
|
|
|
--scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent);
|
|
|
|
|
--scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent);
|
|
|
|
|
--scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent);
|
|
|
|
|
--scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent);
|
|
|
|
|
--scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent);
|
|
|
|
|
--scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent);
|
|
|
|
|
--scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent);
|
|
|
|
|
--scale-cyan-1: #fafdfe;
|
|
|
|
|
--scale-cyan-2: #f2fafb;
|
|
|
|
|
--scale-cyan-3: #def7f9;
|
|
|
|
|
--scale-cyan-4: #caf1f6;
|
|
|
|
|
--scale-cyan-5: #b5e9f0;
|
|
|
|
|
--scale-cyan-6: #9ddde7;
|
|
|
|
|
--scale-cyan-7: #7dcedc;
|
|
|
|
|
--scale-cyan-8: #3db9cf;
|
|
|
|
|
--scale-cyan-9: #00a2c7;
|
|
|
|
|
--scale-cyan-10: #0797b9;
|
|
|
|
|
--scale-cyan-11: #107d98;
|
|
|
|
|
--scale-cyan-12: #0d3c48;
|
|
|
|
|
--scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent);
|
|
|
|
|
--scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent);
|
|
|
|
|
--scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent);
|
|
|
|
|
--scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent);
|
|
|
|
|
--scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent);
|
|
|
|
|
--scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent);
|
|
|
|
|
--scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent);
|
|
|
|
|
--scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent);
|
|
|
|
|
--scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent);
|
|
|
|
|
--scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent);
|
|
|
|
|
--scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent);
|
|
|
|
|
--scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent);
|
|
|
|
|
--scale-teal-1: #fafefd;
|
|
|
|
|
--scale-teal-2: #f3fbf9;
|
|
|
|
|
--scale-teal-3: #e0f8f3;
|
|
|
|
|
--scale-teal-4: #ccf3ea;
|
|
|
|
|
--scale-teal-5: #b8eae0;
|
|
|
|
|
--scale-teal-6: #a1ded2;
|
|
|
|
|
--scale-teal-7: #83cdc1;
|
|
|
|
|
--scale-teal-8: #53b9ab;
|
|
|
|
|
--scale-teal-9: #12a594;
|
|
|
|
|
--scale-teal-10: #0d9b8a;
|
|
|
|
|
--scale-teal-11: #008573;
|
|
|
|
|
--scale-teal-12: #0d3d38;
|
|
|
|
|
--scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent);
|
|
|
|
|
--scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent);
|
|
|
|
|
--scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent);
|
|
|
|
|
--scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent);
|
|
|
|
|
--scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent);
|
|
|
|
|
--scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent);
|
|
|
|
|
--scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent);
|
|
|
|
|
--scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent);
|
|
|
|
|
--scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent);
|
|
|
|
|
--scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent);
|
|
|
|
|
--scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent);
|
|
|
|
|
--scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent);
|
|
|
|
|
--scale-green-1: #fbfefc;
|
|
|
|
|
--scale-green-2: #f4fbf6;
|
|
|
|
|
--scale-green-3: #e6f6eb;
|
|
|
|
|
--scale-green-4: #d6f1df;
|
|
|
|
|
--scale-green-5: #c4e8d1;
|
|
|
|
|
--scale-green-6: #adddc0;
|
|
|
|
|
--scale-green-7: #8eceaa;
|
|
|
|
|
--scale-green-8: #5bb98b;
|
|
|
|
|
--scale-green-9: #30a46c;
|
|
|
|
|
--scale-green-10: #2b9a66;
|
|
|
|
|
--scale-green-11: #218358;
|
|
|
|
|
--scale-green-12: #193b2d;
|
|
|
|
|
--scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent);
|
|
|
|
|
--scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent);
|
|
|
|
|
--scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent);
|
|
|
|
|
--scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent);
|
|
|
|
|
--scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent);
|
|
|
|
|
--scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent);
|
|
|
|
|
--scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent);
|
|
|
|
|
--scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent);
|
|
|
|
|
--scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent);
|
|
|
|
|
--scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent);
|
|
|
|
|
--scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent);
|
|
|
|
|
--scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent);
|
|
|
|
|
--scale-yellow-1: #fdfdf9;
|
|
|
|
|
--scale-yellow-2: #fffce8;
|
|
|
|
|
--scale-yellow-3: #fffbd1;
|
|
|
|
|
--scale-yellow-4: #fff8bb;
|
|
|
|
|
--scale-yellow-5: #fef2a4;
|
|
|
|
|
--scale-yellow-6: #f9e68c;
|
|
|
|
|
--scale-yellow-7: #efd36c;
|
|
|
|
|
--scale-yellow-8: #ebbc00;
|
|
|
|
|
--scale-yellow-9: #f5d90a;
|
|
|
|
|
--scale-yellow-10: #f7ce00;
|
|
|
|
|
--scale-yellow-11: #946800;
|
|
|
|
|
--scale-yellow-12: #35290f;
|
|
|
|
|
--scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent);
|
|
|
|
|
--scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent);
|
|
|
|
|
--scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent);
|
|
|
|
|
--scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent);
|
|
|
|
|
--scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent);
|
|
|
|
|
--scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent);
|
|
|
|
|
--scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent);
|
|
|
|
|
--scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent);
|
|
|
|
|
--scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent);
|
|
|
|
|
--scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent);
|
|
|
|
|
--scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent);
|
|
|
|
|
--scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent);
|
|
|
|
|
--scale-amber-1: #fefdfb;
|
|
|
|
|
--scale-amber-2: #fefbe9;
|
|
|
|
|
--scale-amber-3: #fff7c2;
|
|
|
|
|
--scale-amber-4: #ffee9c;
|
|
|
|
|
--scale-amber-5: #fbe577;
|
|
|
|
|
--scale-amber-6: #f3d673;
|
|
|
|
|
--scale-amber-7: #e9c162;
|
|
|
|
|
--scale-amber-8: #e2a336;
|
|
|
|
|
--scale-amber-9: #ffc53d;
|
|
|
|
|
--scale-amber-10: #ffba18;
|
|
|
|
|
--scale-amber-11: #ab6400;
|
|
|
|
|
--scale-amber-12: #4f3422;
|
|
|
|
|
--scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent);
|
|
|
|
|
--scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent);
|
|
|
|
|
--scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent);
|
|
|
|
|
--scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent);
|
|
|
|
|
--scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent);
|
|
|
|
|
--scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent);
|
|
|
|
|
--scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent);
|
|
|
|
|
--scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent);
|
|
|
|
|
--scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent);
|
|
|
|
|
--scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent);
|
|
|
|
|
--scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent);
|
|
|
|
|
--scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent);
|
|
|
|
|
--scale-orange-1: #fefcfb;
|
|
|
|
|
--scale-orange-2: #fff7ed;
|
|
|
|
|
--scale-orange-3: #ffefd6;
|
|
|
|
|
--scale-orange-4: #ffdfb5;
|
|
|
|
|
--scale-orange-5: #ffd19a;
|
|
|
|
|
--scale-orange-6: #ffc182;
|
|
|
|
|
--scale-orange-7: #f5ae73;
|
|
|
|
|
--scale-orange-8: #ec9455;
|
|
|
|
|
--scale-orange-9: #f76b15;
|
|
|
|
|
--scale-orange-10: #ef5f00;
|
|
|
|
|
--scale-orange-11: #cc4e00;
|
|
|
|
|
--scale-orange-12: #582d1d;
|
|
|
|
|
--scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent);
|
|
|
|
|
--scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent);
|
|
|
|
|
--scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent);
|
|
|
|
|
--scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent);
|
|
|
|
|
--scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent);
|
|
|
|
|
--scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent);
|
|
|
|
|
--scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent);
|
|
|
|
|
--scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent);
|
|
|
|
|
--scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent);
|
|
|
|
|
--scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent);
|
|
|
|
|
--scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent);
|
|
|
|
|
--scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent);
|
|
|
|
|
--scale-red-1: #fffcfc;
|
|
|
|
|
--scale-red-2: #fff7f7;
|
|
|
|
|
--scale-red-3: #feebec;
|
|
|
|
|
--scale-red-4: #ffdbdc;
|
|
|
|
|
--scale-red-5: #ffcdce;
|
|
|
|
|
--scale-red-6: #fdbdbe;
|
|
|
|
|
--scale-red-7: #f4a9aa;
|
|
|
|
|
--scale-red-8: #eb8e90;
|
|
|
|
|
--scale-red-9: #e5484d;
|
|
|
|
|
--scale-red-10: #dc3e42;
|
|
|
|
|
--scale-red-11: #ce2c31;
|
|
|
|
|
--scale-red-12: #641723;
|
|
|
|
|
--scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent);
|
|
|
|
|
--scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent);
|
|
|
|
|
--scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent);
|
|
|
|
|
--scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent);
|
|
|
|
|
--scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent);
|
|
|
|
|
--scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent);
|
|
|
|
|
--scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent);
|
|
|
|
|
--scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent);
|
|
|
|
|
--scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent);
|
|
|
|
|
--scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent);
|
|
|
|
|
--scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent);
|
|
|
|
|
--scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent);
|
|
|
|
|
--scale-pink-1: #fffcfe;
|
|
|
|
|
--scale-pink-2: #fff7fc;
|
|
|
|
|
--scale-pink-3: #feeef8;
|
|
|
|
|
--scale-pink-4: #fce5f3;
|
|
|
|
|
--scale-pink-5: #f9d8ec;
|
|
|
|
|
--scale-pink-6: #f3c6e2;
|
|
|
|
|
--scale-pink-7: #ecadd4;
|
|
|
|
|
--scale-pink-8: #e38ec3;
|
|
|
|
|
--scale-pink-9: #d6409f;
|
|
|
|
|
--scale-pink-10: #d23197;
|
|
|
|
|
--scale-pink-11: #cd1d8d;
|
|
|
|
|
--scale-pink-12: #651249;
|
|
|
|
|
--scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent);
|
|
|
|
|
--scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent);
|
|
|
|
|
--scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent);
|
|
|
|
|
--scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent);
|
|
|
|
|
--scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent);
|
|
|
|
|
--scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent);
|
|
|
|
|
--scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent);
|
|
|
|
|
--scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent);
|
|
|
|
|
--scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent);
|
|
|
|
|
--scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent);
|
|
|
|
|
--scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent);
|
|
|
|
|
--scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent);
|
|
|
|
|
--scale-purple-1: #fefcfe;
|
|
|
|
|
--scale-purple-2: #fbf7fe;
|
|
|
|
|
--scale-purple-3: #f7edfe;
|
|
|
|
|
--scale-purple-4: #f2e2fc;
|
|
|
|
|
--scale-purple-5: #ead5f9;
|
|
|
|
|
--scale-purple-6: #e0c4f4;
|
|
|
|
|
--scale-purple-7: #d1afec;
|
|
|
|
|
--scale-purple-8: #be93e4;
|
|
|
|
|
--scale-purple-9: #8e4ec6;
|
|
|
|
|
--scale-purple-10: #8347b9;
|
|
|
|
|
--scale-purple-11: #8145b5;
|
|
|
|
|
--scale-purple-12: #402060;
|
|
|
|
|
--scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent);
|
|
|
|
|
--scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent);
|
|
|
|
|
--scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent);
|
|
|
|
|
--scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent);
|
|
|
|
|
--scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent);
|
|
|
|
|
--scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent);
|
|
|
|
|
--scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent);
|
|
|
|
|
--scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent);
|
|
|
|
|
--scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent);
|
|
|
|
|
--scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent);
|
|
|
|
|
--scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent);
|
|
|
|
|
--scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent);
|
|
|
|
|
--primitive-primary-1: var(--scale-purple-1);
|
|
|
|
|
--primitive-primary-2: var(--scale-purple-2);
|
|
|
|
|
--primitive-primary-3: var(--scale-purple-3);
|
|
|
|
|
--primitive-primary-4: var(--scale-purple-4);
|
|
|
|
|
--primitive-primary-5: var(--scale-purple-5);
|
|
|
|
|
--primitive-primary-6: var(--scale-purple-6);
|
|
|
|
|
--primitive-primary-7: var(--scale-purple-7);
|
|
|
|
|
--primitive-primary-8: var(--scale-purple-8);
|
|
|
|
|
--primitive-primary-9: var(--scale-purple-9);
|
|
|
|
|
--primitive-primary-10: var(--scale-purple-10);
|
|
|
|
|
--primitive-primary-11: var(--scale-purple-11);
|
|
|
|
|
--primitive-primary-12: var(--scale-purple-12);
|
|
|
|
|
--primitive-primary-a1: var(--scale-purple-a1);
|
|
|
|
|
--primitive-primary-a2: var(--scale-purple-a2);
|
|
|
|
|
--primitive-primary-a3: var(--scale-purple-a3);
|
|
|
|
|
--primitive-primary-a4: var(--scale-purple-a4);
|
|
|
|
|
--primitive-primary-a5: var(--scale-purple-a5);
|
|
|
|
|
--primitive-primary-a6: var(--scale-purple-a6);
|
|
|
|
|
--primitive-primary-a7: var(--scale-purple-a7);
|
|
|
|
|
--primitive-primary-a8: var(--scale-purple-a8);
|
|
|
|
|
--primitive-primary-a9: var(--scale-purple-a9);
|
|
|
|
|
--primitive-primary-a10: var(--scale-purple-a10);
|
|
|
|
|
--primitive-primary-a11: var(--scale-purple-a11);
|
|
|
|
|
--primitive-primary-a12: var(--scale-purple-a12);
|
|
|
|
|
--color-primary-track: var(--primitive-primary-1);
|
|
|
|
|
--color-primary-element: var(--primitive-primary-3);
|
|
|
|
|
--color-primary-hover: var(--primitive-primary-4);
|
|
|
|
|
--color-primary-active: var(--primitive-primary-5);
|
|
|
|
|
--color-primary-border: var(--primitive-primary-6);
|
|
|
|
|
--color-primary-solid: var(--primitive-primary-9);
|
|
|
|
|
--color-primary-solid-hover: var(--primitive-primary-10);
|
|
|
|
|
--color-primary-text: var(--primitive-primary-11);
|
|
|
|
|
--color-primary-contrast: var(--primitive-primary-12);
|
|
|
|
|
--primitive-secondary-1: var(--scale-slate-1);
|
|
|
|
|
--primitive-secondary-2: var(--scale-slate-2);
|
|
|
|
|
--primitive-secondary-3: var(--scale-slate-3);
|
|
|
|
|
--primitive-secondary-4: var(--scale-slate-4);
|
|
|
|
|
--primitive-secondary-5: var(--scale-slate-5);
|
|
|
|
|
--primitive-secondary-6: var(--scale-slate-6);
|
|
|
|
|
--primitive-secondary-7: var(--scale-slate-7);
|
|
|
|
|
--primitive-secondary-8: var(--scale-slate-8);
|
|
|
|
|
--primitive-secondary-9: var(--scale-slate-9);
|
|
|
|
|
--primitive-secondary-10: var(--scale-slate-10);
|
|
|
|
|
--primitive-secondary-11: var(--scale-slate-11);
|
|
|
|
|
--primitive-secondary-12: var(--scale-slate-12);
|
|
|
|
|
--primitive-secondary-a1: var(--scale-slate-a1);
|
|
|
|
|
--primitive-secondary-a2: var(--scale-slate-a2);
|
|
|
|
|
--primitive-secondary-a3: var(--scale-slate-a3);
|
|
|
|
|
--primitive-secondary-a4: var(--scale-slate-a4);
|
|
|
|
|
--primitive-secondary-a5: var(--scale-slate-a5);
|
|
|
|
|
--primitive-secondary-a6: var(--scale-slate-a6);
|
|
|
|
|
--primitive-secondary-a7: var(--scale-slate-a7);
|
|
|
|
|
--primitive-secondary-a8: var(--scale-slate-a8);
|
|
|
|
|
--primitive-secondary-a9: var(--scale-slate-a9);
|
|
|
|
|
--primitive-secondary-a10: var(--scale-slate-a10);
|
|
|
|
|
--primitive-secondary-a11: var(--scale-slate-a11);
|
|
|
|
|
--primitive-secondary-a12: var(--scale-slate-a12);
|
|
|
|
|
--color-secondary-track: var(--primitive-secondary-1);
|
|
|
|
|
--color-secondary-element: var(--primitive-secondary-3);
|
|
|
|
|
--color-secondary-hover: var(--primitive-secondary-4);
|
|
|
|
|
--color-secondary-active: var(--primitive-secondary-5);
|
|
|
|
|
--color-secondary-border: var(--primitive-secondary-6);
|
|
|
|
|
--color-secondary-solid: var(--primitive-secondary-9);
|
|
|
|
|
--color-secondary-solid-hover: var(--primitive-secondary-10);
|
|
|
|
|
--color-secondary-text: var(--primitive-secondary-11);
|
|
|
|
|
--color-secondary-contrast: var(--primitive-secondary-12);
|
|
|
|
|
--primitive-tertiary-1: var(--scale-gray-1);
|
|
|
|
|
--primitive-tertiary-2: var(--scale-gray-2);
|
|
|
|
|
--primitive-tertiary-3: var(--scale-gray-3);
|
|
|
|
|
--primitive-tertiary-4: var(--scale-gray-4);
|
|
|
|
|
--primitive-tertiary-5: var(--scale-gray-5);
|
|
|
|
|
--primitive-tertiary-6: var(--scale-gray-6);
|
|
|
|
|
--primitive-tertiary-7: var(--scale-gray-7);
|
|
|
|
|
--primitive-tertiary-8: var(--scale-gray-8);
|
|
|
|
|
--primitive-tertiary-9: var(--scale-gray-9);
|
|
|
|
|
--primitive-tertiary-10: var(--scale-gray-10);
|
|
|
|
|
--primitive-tertiary-11: var(--scale-gray-11);
|
|
|
|
|
--primitive-tertiary-12: var(--scale-gray-12);
|
|
|
|
|
--primitive-tertiary-a1: var(--scale-gray-a1);
|
|
|
|
|
--primitive-tertiary-a2: var(--scale-gray-a2);
|
|
|
|
|
--primitive-tertiary-a3: var(--scale-gray-a3);
|
|
|
|
|
--primitive-tertiary-a4: var(--scale-gray-a4);
|
|
|
|
|
--primitive-tertiary-a5: var(--scale-gray-a5);
|
|
|
|
|
--primitive-tertiary-a6: var(--scale-gray-a6);
|
|
|
|
|
--primitive-tertiary-a7: var(--scale-gray-a7);
|
|
|
|
|
--primitive-tertiary-a8: var(--scale-gray-a8);
|
|
|
|
|
--primitive-tertiary-a9: var(--scale-gray-a9);
|
|
|
|
|
--primitive-tertiary-a10: var(--scale-gray-a10);
|
|
|
|
|
--primitive-tertiary-a11: var(--scale-gray-a11);
|
|
|
|
|
--primitive-tertiary-a12: var(--scale-gray-a12);
|
|
|
|
|
--color-tertiary-track: var(--primitive-tertiary-1);
|
|
|
|
|
--color-tertiary-element: var(--primitive-tertiary-3);
|
|
|
|
|
--color-tertiary-hover: var(--primitive-tertiary-4);
|
|
|
|
|
--color-tertiary-active: var(--primitive-tertiary-5);
|
|
|
|
|
--color-tertiary-border: var(--primitive-tertiary-6);
|
|
|
|
|
--color-tertiary-solid: var(--primitive-tertiary-9);
|
|
|
|
|
--color-tertiary-solid-hover: var(--primitive-tertiary-10);
|
|
|
|
|
--color-tertiary-text: var(--primitive-tertiary-11);
|
|
|
|
|
--color-tertiary-contrast: var(--primitive-tertiary-12);
|
|
|
|
|
--primitive-neutral-1: var(--scale-gray-1);
|
|
|
|
|
--primitive-neutral-2: var(--scale-gray-2);
|
|
|
|
|
--primitive-neutral-3: var(--scale-gray-3);
|
|
|
|
|
--primitive-neutral-4: var(--scale-gray-4);
|
|
|
|
|
--primitive-neutral-5: var(--scale-gray-5);
|
|
|
|
|
--primitive-neutral-6: var(--scale-gray-6);
|
|
|
|
|
--primitive-neutral-7: var(--scale-gray-7);
|
|
|
|
|
--primitive-neutral-8: var(--scale-gray-8);
|
|
|
|
|
--primitive-neutral-9: var(--scale-gray-9);
|
|
|
|
|
--primitive-neutral-10: var(--scale-gray-10);
|
|
|
|
|
--primitive-neutral-11: var(--scale-gray-11);
|
|
|
|
|
--primitive-neutral-12: var(--scale-gray-12);
|
|
|
|
|
--primitive-neutral-a1: var(--scale-gray-a1);
|
|
|
|
|
--primitive-neutral-a2: var(--scale-gray-a2);
|
|
|
|
|
--primitive-neutral-a3: var(--scale-gray-a3);
|
|
|
|
|
--primitive-neutral-a4: var(--scale-gray-a4);
|
|
|
|
|
--primitive-neutral-a5: var(--scale-gray-a5);
|
|
|
|
|
--primitive-neutral-a6: var(--scale-gray-a6);
|
|
|
|
|
--primitive-neutral-a7: var(--scale-gray-a7);
|
|
|
|
|
--primitive-neutral-a8: var(--scale-gray-a8);
|
|
|
|
|
--primitive-neutral-a9: var(--scale-gray-a9);
|
|
|
|
|
--primitive-neutral-a10: var(--scale-gray-a10);
|
|
|
|
|
--primitive-neutral-a11: var(--scale-gray-a11);
|
|
|
|
|
--primitive-neutral-a12: var(--scale-gray-a12);
|
|
|
|
|
--color-neutral-track: var(--primitive-neutral-1);
|
|
|
|
|
--color-neutral-element: var(--primitive-neutral-3);
|
|
|
|
|
--color-neutral-hover: var(--primitive-neutral-4);
|
|
|
|
|
--color-neutral-active: var(--primitive-neutral-5);
|
|
|
|
|
--color-neutral-border: var(--primitive-neutral-6);
|
|
|
|
|
--color-neutral-solid: var(--primitive-neutral-9);
|
|
|
|
|
--color-neutral-solid-hover: var(--primitive-neutral-10);
|
|
|
|
|
--color-neutral-text: var(--primitive-neutral-11);
|
|
|
|
|
--color-neutral-contrast: var(--primitive-neutral-12);
|
|
|
|
|
--primitive-affirm-1: var(--scale-teal-1);
|
|
|
|
|
--primitive-affirm-2: var(--scale-teal-2);
|
|
|
|
|
--primitive-affirm-3: var(--scale-teal-3);
|
|
|
|
|
--primitive-affirm-4: var(--scale-teal-4);
|
|
|
|
|
--primitive-affirm-5: var(--scale-teal-5);
|
|
|
|
|
--primitive-affirm-6: var(--scale-teal-6);
|
|
|
|
|
--primitive-affirm-7: var(--scale-teal-7);
|
|
|
|
|
--primitive-affirm-8: var(--scale-teal-8);
|
|
|
|
|
--primitive-affirm-9: var(--scale-teal-9);
|
|
|
|
|
--primitive-affirm-10: var(--scale-teal-10);
|
|
|
|
|
--primitive-affirm-11: var(--scale-teal-11);
|
|
|
|
|
--primitive-affirm-12: var(--scale-teal-12);
|
|
|
|
|
--primitive-affirm-a1: var(--scale-teal-a1);
|
|
|
|
|
--primitive-affirm-a2: var(--scale-teal-a2);
|
|
|
|
|
--primitive-affirm-a3: var(--scale-teal-a3);
|
|
|
|
|
--primitive-affirm-a4: var(--scale-teal-a4);
|
|
|
|
|
--primitive-affirm-a5: var(--scale-teal-a5);
|
|
|
|
|
--primitive-affirm-a6: var(--scale-teal-a6);
|
|
|
|
|
--primitive-affirm-a7: var(--scale-teal-a7);
|
|
|
|
|
--primitive-affirm-a8: var(--scale-teal-a8);
|
|
|
|
|
--primitive-affirm-a9: var(--scale-teal-a9);
|
|
|
|
|
--primitive-affirm-a10: var(--scale-teal-a10);
|
|
|
|
|
--primitive-affirm-a11: var(--scale-teal-a11);
|
|
|
|
|
--primitive-affirm-a12: var(--scale-teal-a12);
|
|
|
|
|
--color-affirm-track: var(--primitive-affirm-1);
|
|
|
|
|
--color-affirm-element: var(--primitive-affirm-3);
|
|
|
|
|
--color-affirm-hover: var(--primitive-affirm-4);
|
|
|
|
|
--color-affirm-active: var(--primitive-affirm-5);
|
|
|
|
|
--color-affirm-border: var(--primitive-affirm-6);
|
|
|
|
|
--color-affirm-solid: var(--primitive-affirm-9);
|
|
|
|
|
--color-affirm-solid-hover: var(--primitive-affirm-10);
|
|
|
|
|
--color-affirm-text: var(--primitive-affirm-11);
|
|
|
|
|
--color-affirm-contrast: var(--primitive-affirm-12);
|
|
|
|
|
--primitive-fulfill-1: var(--scale-green-1);
|
|
|
|
|
--primitive-fulfill-2: var(--scale-green-2);
|
|
|
|
|
--primitive-fulfill-3: var(--scale-green-3);
|
|
|
|
|
--primitive-fulfill-4: var(--scale-green-4);
|
|
|
|
|
--primitive-fulfill-5: var(--scale-green-5);
|
|
|
|
|
--primitive-fulfill-6: var(--scale-green-6);
|
|
|
|
|
--primitive-fulfill-7: var(--scale-green-7);
|
|
|
|
|
--primitive-fulfill-8: var(--scale-green-8);
|
|
|
|
|
--primitive-fulfill-9: var(--scale-green-9);
|
|
|
|
|
--primitive-fulfill-10: var(--scale-green-10);
|
|
|
|
|
--primitive-fulfill-11: var(--scale-green-11);
|
|
|
|
|
--primitive-fulfill-12: var(--scale-green-12);
|
|
|
|
|
--primitive-fulfill-a1: var(--scale-green-a1);
|
|
|
|
|
--primitive-fulfill-a2: var(--scale-green-a2);
|
|
|
|
|
--primitive-fulfill-a3: var(--scale-green-a3);
|
|
|
|
|
--primitive-fulfill-a4: var(--scale-green-a4);
|
|
|
|
|
--primitive-fulfill-a5: var(--scale-green-a5);
|
|
|
|
|
--primitive-fulfill-a6: var(--scale-green-a6);
|
|
|
|
|
--primitive-fulfill-a7: var(--scale-green-a7);
|
|
|
|
|
--primitive-fulfill-a8: var(--scale-green-a8);
|
|
|
|
|
--primitive-fulfill-a9: var(--scale-green-a9);
|
|
|
|
|
--primitive-fulfill-a10: var(--scale-green-a10);
|
|
|
|
|
--primitive-fulfill-a11: var(--scale-green-a11);
|
|
|
|
|
--primitive-fulfill-a12: var(--scale-green-a12);
|
|
|
|
|
--color-fulfill-track: var(--primitive-fulfill-1);
|
|
|
|
|
--color-fulfill-element: var(--primitive-fulfill-3);
|
|
|
|
|
--color-fulfill-hover: var(--primitive-fulfill-4);
|
|
|
|
|
--color-fulfill-active: var(--primitive-fulfill-5);
|
|
|
|
|
--color-fulfill-border: var(--primitive-fulfill-6);
|
|
|
|
|
--color-fulfill-solid: var(--primitive-fulfill-9);
|
|
|
|
|
--color-fulfill-solid-hover: var(--primitive-fulfill-10);
|
|
|
|
|
--color-fulfill-text: var(--primitive-fulfill-11);
|
|
|
|
|
--color-fulfill-contrast: var(--primitive-fulfill-12);
|
|
|
|
|
--primitive-risk-1: var(--scale-orange-1);
|
|
|
|
|
--primitive-risk-2: var(--scale-orange-2);
|
|
|
|
|
--primitive-risk-3: var(--scale-orange-3);
|
|
|
|
|
--primitive-risk-4: var(--scale-orange-4);
|
|
|
|
|
--primitive-risk-5: var(--scale-orange-5);
|
|
|
|
|
--primitive-risk-6: var(--scale-orange-6);
|
|
|
|
|
--primitive-risk-7: var(--scale-orange-7);
|
|
|
|
|
--primitive-risk-8: var(--scale-orange-8);
|
|
|
|
|
--primitive-risk-9: var(--scale-orange-9);
|
|
|
|
|
--primitive-risk-10: var(--scale-orange-10);
|
|
|
|
|
--primitive-risk-11: var(--scale-orange-11);
|
|
|
|
|
--primitive-risk-12: var(--scale-orange-12);
|
|
|
|
|
--primitive-risk-a1: var(--scale-orange-a1);
|
|
|
|
|
--primitive-risk-a2: var(--scale-orange-a2);
|
|
|
|
|
--primitive-risk-a3: var(--scale-orange-a3);
|
|
|
|
|
--primitive-risk-a4: var(--scale-orange-a4);
|
|
|
|
|
--primitive-risk-a5: var(--scale-orange-a5);
|
|
|
|
|
--primitive-risk-a6: var(--scale-orange-a6);
|
|
|
|
|
--primitive-risk-a7: var(--scale-orange-a7);
|
|
|
|
|
--primitive-risk-a8: var(--scale-orange-a8);
|
|
|
|
|
--primitive-risk-a9: var(--scale-orange-a9);
|
|
|
|
|
--primitive-risk-a10: var(--scale-orange-a10);
|
|
|
|
|
--primitive-risk-a11: var(--scale-orange-a11);
|
|
|
|
|
--primitive-risk-a12: var(--scale-orange-a12);
|
|
|
|
|
--color-risk-track: var(--primitive-risk-1);
|
|
|
|
|
--color-risk-element: var(--primitive-risk-3);
|
|
|
|
|
--color-risk-hover: var(--primitive-risk-4);
|
|
|
|
|
--color-risk-active: var(--primitive-risk-5);
|
|
|
|
|
--color-risk-border: var(--primitive-risk-6);
|
|
|
|
|
--color-risk-solid: var(--primitive-risk-9);
|
|
|
|
|
--color-risk-solid-hover: var(--primitive-risk-10);
|
|
|
|
|
--color-risk-text: var(--primitive-risk-11);
|
|
|
|
|
--color-risk-contrast: var(--primitive-risk-12);
|
|
|
|
|
--primitive-threat-1: var(--scale-red-1);
|
|
|
|
|
--primitive-threat-2: var(--scale-red-2);
|
|
|
|
|
--primitive-threat-3: var(--scale-red-3);
|
|
|
|
|
--primitive-threat-4: var(--scale-red-4);
|
|
|
|
|
--primitive-threat-5: var(--scale-red-5);
|
|
|
|
|
--primitive-threat-6: var(--scale-red-6);
|
|
|
|
|
--primitive-threat-7: var(--scale-red-7);
|
|
|
|
|
--primitive-threat-8: var(--scale-red-8);
|
|
|
|
|
--primitive-threat-9: var(--scale-red-9);
|
|
|
|
|
--primitive-threat-10: var(--scale-red-10);
|
|
|
|
|
--primitive-threat-11: var(--scale-red-11);
|
|
|
|
|
--primitive-threat-12: var(--scale-red-12);
|
|
|
|
|
--primitive-threat-a1: var(--scale-red-a1);
|
|
|
|
|
--primitive-threat-a2: var(--scale-red-a2);
|
|
|
|
|
--primitive-threat-a3: var(--scale-red-a3);
|
|
|
|
|
--primitive-threat-a4: var(--scale-red-a4);
|
|
|
|
|
--primitive-threat-a5: var(--scale-red-a5);
|
|
|
|
|
--primitive-threat-a6: var(--scale-red-a6);
|
|
|
|
|
--primitive-threat-a7: var(--scale-red-a7);
|
|
|
|
|
--primitive-threat-a8: var(--scale-red-a8);
|
|
|
|
|
--primitive-threat-a9: var(--scale-red-a9);
|
|
|
|
|
--primitive-threat-a10: var(--scale-red-a10);
|
|
|
|
|
--primitive-threat-a11: var(--scale-red-a11);
|
|
|
|
|
--primitive-threat-a12: var(--scale-red-a12);
|
|
|
|
|
--color-threat-track: var(--primitive-threat-1);
|
|
|
|
|
--color-threat-element: var(--primitive-threat-3);
|
|
|
|
|
--color-threat-hover: var(--primitive-threat-4);
|
|
|
|
|
--color-threat-active: var(--primitive-threat-5);
|
|
|
|
|
--color-threat-border: var(--primitive-threat-6);
|
|
|
|
|
--color-threat-solid: var(--primitive-threat-9);
|
|
|
|
|
--color-threat-solid-hover: var(--primitive-threat-10);
|
|
|
|
|
--color-threat-text: var(--primitive-threat-11);
|
|
|
|
|
--color-threat-contrast: var(--primitive-threat-12);
|
|
|
|
|
--primitive-loss-1: var(--scale-purple-1);
|
|
|
|
|
--primitive-loss-2: var(--scale-purple-2);
|
|
|
|
|
--primitive-loss-3: var(--scale-purple-3);
|
|
|
|
|
--primitive-loss-4: var(--scale-purple-4);
|
|
|
|
|
--primitive-loss-5: var(--scale-purple-5);
|
|
|
|
|
--primitive-loss-6: var(--scale-purple-6);
|
|
|
|
|
--primitive-loss-7: var(--scale-purple-7);
|
|
|
|
|
--primitive-loss-8: var(--scale-purple-8);
|
|
|
|
|
--primitive-loss-9: var(--scale-purple-9);
|
|
|
|
|
--primitive-loss-10: var(--scale-purple-10);
|
|
|
|
|
--primitive-loss-11: var(--scale-purple-11);
|
|
|
|
|
--primitive-loss-12: var(--scale-purple-12);
|
|
|
|
|
--primitive-loss-a1: var(--scale-purple-a1);
|
|
|
|
|
--primitive-loss-a2: var(--scale-purple-a2);
|
|
|
|
|
--primitive-loss-a3: var(--scale-purple-a3);
|
|
|
|
|
--primitive-loss-a4: var(--scale-purple-a4);
|
|
|
|
|
--primitive-loss-a5: var(--scale-purple-a5);
|
|
|
|
|
--primitive-loss-a6: var(--scale-purple-a6);
|
|
|
|
|
--primitive-loss-a7: var(--scale-purple-a7);
|
|
|
|
|
--primitive-loss-a8: var(--scale-purple-a8);
|
|
|
|
|
--primitive-loss-a9: var(--scale-purple-a9);
|
|
|
|
|
--primitive-loss-a10: var(--scale-purple-a10);
|
|
|
|
|
--primitive-loss-a11: var(--scale-purple-a11);
|
|
|
|
|
--primitive-loss-a12: var(--scale-purple-a12);
|
|
|
|
|
--color-loss-track: var(--primitive-loss-1);
|
|
|
|
|
--color-loss-element: var(--primitive-loss-3);
|
|
|
|
|
--color-loss-hover: var(--primitive-loss-4);
|
|
|
|
|
--color-loss-active: var(--primitive-loss-5);
|
|
|
|
|
--color-loss-border: var(--primitive-loss-6);
|
|
|
|
|
--color-loss-solid: var(--primitive-loss-9);
|
|
|
|
|
--color-loss-solid-hover: var(--primitive-loss-10);
|
|
|
|
|
--color-loss-text: var(--primitive-loss-11);
|
|
|
|
|
--color-loss-contrast: var(--primitive-loss-12);
|
|
|
|
|
--color-surface-default: var(--primitive-neutral-1);
|
|
|
|
|
--color-surface-raised: var(--primitive-neutral-2);
|
|
|
|
|
--color-surface-overlay: var(--primitive-neutral-3);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-surface-muted: var(--primitive-neutral-3);
|
|
|
|
|
--color-overlay: rgb(28 25 23 / 0.42);
|
|
|
|
|
--color-content-primary: var(--primitive-neutral-12);
|
|
|
|
|
--color-content-secondary: var(--primitive-neutral-11);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-content-muted: var(--primitive-neutral-10);
|
|
|
|
|
--color-content-disabled: var(--primitive-neutral-8);
|
|
|
|
|
--color-content-on-solid: #ffffff;
|
|
|
|
|
--color-border-subtle: var(--primitive-neutral-4);
|
|
|
|
|
--color-border-default: var(--primitive-neutral-6);
|
|
|
|
|
--color-border-strong: var(--primitive-neutral-8);
|
|
|
|
|
--focus-ring-color: color-mix(in srgb, var(--primitive-primary-8) 48%, transparent);
|
|
|
|
|
--focus-ring-color-error: color-mix(in srgb, var(--primitive-risk-8) 52%, transparent);
|
|
|
|
|
--shadow-1: 0 1px 2px rgb(15 23 42 / 0.08);
|
|
|
|
|
--shadow-2: 0 4px 12px rgb(15 23 42 / 0.10);
|
|
|
|
|
--shadow-3: 0 8px 24px rgb(15 23 42 / 0.12);
|
|
|
|
|
--shadow-4: 0 14px 36px rgb(15 23 42 / 0.15);
|
|
|
|
|
--shadow-5: 0 18px 48px rgb(15 23 42 / 0.18);
|
|
|
|
|
--shadow-6: 0 28px 72px rgb(15 23 42 / 0.22);
|
|
|
|
|
--shadow-none: none;
|
|
|
|
|
--shadow-subtle: var(--shadow-1);
|
|
|
|
|
--shadow-raised: var(--shadow-3);
|
|
|
|
|
--shadow-overlay: var(--shadow-5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-theme='base-dark'],
|
|
|
|
|
[data-theme='dark'] {
|
|
|
|
|
--scale-gray-1: #111111;
|
|
|
|
|
--scale-gray-2: #191919;
|
|
|
|
|
--scale-gray-3: #222222;
|
|
|
|
|
--scale-gray-4: #2a2a2a;
|
|
|
|
|
--scale-gray-5: #313131;
|
|
|
|
|
--scale-gray-6: #3a3a3a;
|
|
|
|
|
--scale-gray-7: #484848;
|
|
|
|
|
--scale-gray-8: #606060;
|
|
|
|
|
--scale-gray-9: #6e6e6e;
|
|
|
|
|
--scale-gray-10: #7b7b7b;
|
|
|
|
|
--scale-gray-11: #b4b4b4;
|
|
|
|
|
--scale-gray-12: #eeeeee;
|
|
|
|
|
--scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent);
|
|
|
|
|
--scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent);
|
|
|
|
|
--scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent);
|
|
|
|
|
--scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent);
|
|
|
|
|
--scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent);
|
|
|
|
|
--scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent);
|
|
|
|
|
--scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent);
|
|
|
|
|
--scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent);
|
|
|
|
|
--scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent);
|
|
|
|
|
--scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent);
|
|
|
|
|
--scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent);
|
|
|
|
|
--scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent);
|
|
|
|
|
--scale-slate-1: #111113;
|
|
|
|
|
--scale-slate-2: #18191b;
|
|
|
|
|
--scale-slate-3: #212225;
|
|
|
|
|
--scale-slate-4: #272a2d;
|
|
|
|
|
--scale-slate-5: #2e3135;
|
|
|
|
|
--scale-slate-6: #363a3f;
|
|
|
|
|
--scale-slate-7: #43484e;
|
|
|
|
|
--scale-slate-8: #5a6169;
|
|
|
|
|
--scale-slate-9: #696e77;
|
|
|
|
|
--scale-slate-10: #777b84;
|
|
|
|
|
--scale-slate-11: #b0b4ba;
|
|
|
|
|
--scale-slate-12: #edeef0;
|
|
|
|
|
--scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent);
|
|
|
|
|
--scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent);
|
|
|
|
|
--scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent);
|
|
|
|
|
--scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent);
|
|
|
|
|
--scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent);
|
|
|
|
|
--scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent);
|
|
|
|
|
--scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent);
|
|
|
|
|
--scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent);
|
|
|
|
|
--scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent);
|
|
|
|
|
--scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent);
|
|
|
|
|
--scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent);
|
|
|
|
|
--scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent);
|
|
|
|
|
--scale-blue-1: #0d1520;
|
|
|
|
|
--scale-blue-2: #111927;
|
|
|
|
|
--scale-blue-3: #0d2847;
|
|
|
|
|
--scale-blue-4: #003362;
|
|
|
|
|
--scale-blue-5: #004074;
|
|
|
|
|
--scale-blue-6: #104d87;
|
|
|
|
|
--scale-blue-7: #205d9e;
|
|
|
|
|
--scale-blue-8: #2870bd;
|
|
|
|
|
--scale-blue-9: #0090ff;
|
|
|
|
|
--scale-blue-10: #3b9eff;
|
|
|
|
|
--scale-blue-11: #70b8ff;
|
|
|
|
|
--scale-blue-12: #c2e6ff;
|
|
|
|
|
--scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent);
|
|
|
|
|
--scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent);
|
|
|
|
|
--scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent);
|
|
|
|
|
--scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent);
|
|
|
|
|
--scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent);
|
|
|
|
|
--scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent);
|
|
|
|
|
--scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent);
|
|
|
|
|
--scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent);
|
|
|
|
|
--scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent);
|
|
|
|
|
--scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent);
|
|
|
|
|
--scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent);
|
|
|
|
|
--scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent);
|
|
|
|
|
--scale-cyan-1: #0b161a;
|
|
|
|
|
--scale-cyan-2: #101b20;
|
|
|
|
|
--scale-cyan-3: #082c36;
|
|
|
|
|
--scale-cyan-4: #003848;
|
|
|
|
|
--scale-cyan-5: #004558;
|
|
|
|
|
--scale-cyan-6: #045468;
|
|
|
|
|
--scale-cyan-7: #12677e;
|
|
|
|
|
--scale-cyan-8: #11809c;
|
|
|
|
|
--scale-cyan-9: #00a2c7;
|
|
|
|
|
--scale-cyan-10: #23afd0;
|
|
|
|
|
--scale-cyan-11: #4ccce6;
|
|
|
|
|
--scale-cyan-12: #b6ecf7;
|
|
|
|
|
--scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent);
|
|
|
|
|
--scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent);
|
|
|
|
|
--scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent);
|
|
|
|
|
--scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent);
|
|
|
|
|
--scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent);
|
|
|
|
|
--scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent);
|
|
|
|
|
--scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent);
|
|
|
|
|
--scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent);
|
|
|
|
|
--scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent);
|
|
|
|
|
--scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent);
|
|
|
|
|
--scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent);
|
|
|
|
|
--scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent);
|
|
|
|
|
--scale-teal-1: #0d1514;
|
|
|
|
|
--scale-teal-2: #111c1b;
|
|
|
|
|
--scale-teal-3: #0d2d2a;
|
|
|
|
|
--scale-teal-4: #023b37;
|
|
|
|
|
--scale-teal-5: #084843;
|
|
|
|
|
--scale-teal-6: #145750;
|
|
|
|
|
--scale-teal-7: #1c6961;
|
|
|
|
|
--scale-teal-8: #207e73;
|
|
|
|
|
--scale-teal-9: #12a594;
|
|
|
|
|
--scale-teal-10: #0eb39e;
|
|
|
|
|
--scale-teal-11: #0bd8b6;
|
|
|
|
|
--scale-teal-12: #adf0dd;
|
|
|
|
|
--scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent);
|
|
|
|
|
--scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent);
|
|
|
|
|
--scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent);
|
|
|
|
|
--scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent);
|
|
|
|
|
--scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent);
|
|
|
|
|
--scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent);
|
|
|
|
|
--scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent);
|
|
|
|
|
--scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent);
|
|
|
|
|
--scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent);
|
|
|
|
|
--scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent);
|
|
|
|
|
--scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent);
|
|
|
|
|
--scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent);
|
|
|
|
|
--scale-green-1: #0e1512;
|
|
|
|
|
--scale-green-2: #121b17;
|
|
|
|
|
--scale-green-3: #132d21;
|
|
|
|
|
--scale-green-4: #113b29;
|
|
|
|
|
--scale-green-5: #174933;
|
|
|
|
|
--scale-green-6: #20573e;
|
|
|
|
|
--scale-green-7: #28684a;
|
|
|
|
|
--scale-green-8: #2f7c57;
|
|
|
|
|
--scale-green-9: #30a46c;
|
|
|
|
|
--scale-green-10: #33b074;
|
|
|
|
|
--scale-green-11: #3dd68c;
|
|
|
|
|
--scale-green-12: #b1f1cb;
|
|
|
|
|
--scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent);
|
|
|
|
|
--scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent);
|
|
|
|
|
--scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent);
|
|
|
|
|
--scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent);
|
|
|
|
|
--scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent);
|
|
|
|
|
--scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent);
|
|
|
|
|
--scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent);
|
|
|
|
|
--scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent);
|
|
|
|
|
--scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent);
|
|
|
|
|
--scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent);
|
|
|
|
|
--scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent);
|
|
|
|
|
--scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent);
|
|
|
|
|
--scale-yellow-1: #14120b;
|
|
|
|
|
--scale-yellow-2: #1b180f;
|
|
|
|
|
--scale-yellow-3: #2d2305;
|
|
|
|
|
--scale-yellow-4: #362b00;
|
|
|
|
|
--scale-yellow-5: #433500;
|
|
|
|
|
--scale-yellow-6: #524202;
|
|
|
|
|
--scale-yellow-7: #665417;
|
|
|
|
|
--scale-yellow-8: #836a21;
|
|
|
|
|
--scale-yellow-9: #ffe629;
|
|
|
|
|
--scale-yellow-10: #ffff57;
|
|
|
|
|
--scale-yellow-11: #f5e147;
|
|
|
|
|
--scale-yellow-12: #f6eeb4;
|
|
|
|
|
--scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent);
|
|
|
|
|
--scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent);
|
|
|
|
|
--scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent);
|
|
|
|
|
--scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent);
|
|
|
|
|
--scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent);
|
|
|
|
|
--scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent);
|
|
|
|
|
--scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent);
|
|
|
|
|
--scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent);
|
|
|
|
|
--scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent);
|
|
|
|
|
--scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent);
|
|
|
|
|
--scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent);
|
|
|
|
|
--scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent);
|
|
|
|
|
--scale-amber-1: #16120c;
|
|
|
|
|
--scale-amber-2: #1d180f;
|
|
|
|
|
--scale-amber-3: #302008;
|
|
|
|
|
--scale-amber-4: #3f2700;
|
|
|
|
|
--scale-amber-5: #4d3000;
|
|
|
|
|
--scale-amber-6: #5c3d05;
|
|
|
|
|
--scale-amber-7: #714f19;
|
|
|
|
|
--scale-amber-8: #8f6424;
|
|
|
|
|
--scale-amber-9: #ffc53d;
|
|
|
|
|
--scale-amber-10: #ffd60a;
|
|
|
|
|
--scale-amber-11: #ffca16;
|
|
|
|
|
--scale-amber-12: #ffe7b3;
|
|
|
|
|
--scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent);
|
|
|
|
|
--scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent);
|
|
|
|
|
--scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent);
|
|
|
|
|
--scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent);
|
|
|
|
|
--scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent);
|
|
|
|
|
--scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent);
|
|
|
|
|
--scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent);
|
|
|
|
|
--scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent);
|
|
|
|
|
--scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent);
|
|
|
|
|
--scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent);
|
|
|
|
|
--scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent);
|
|
|
|
|
--scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent);
|
|
|
|
|
--scale-orange-1: #17120e;
|
|
|
|
|
--scale-orange-2: #1e160f;
|
|
|
|
|
--scale-orange-3: #331e0b;
|
|
|
|
|
--scale-orange-4: #462100;
|
|
|
|
|
--scale-orange-5: #562800;
|
|
|
|
|
--scale-orange-6: #66350c;
|
|
|
|
|
--scale-orange-7: #7e451d;
|
|
|
|
|
--scale-orange-8: #a35829;
|
|
|
|
|
--scale-orange-9: #f76b15;
|
|
|
|
|
--scale-orange-10: #ff801f;
|
|
|
|
|
--scale-orange-11: #ffa057;
|
|
|
|
|
--scale-orange-12: #ffe0c2;
|
|
|
|
|
--scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent);
|
|
|
|
|
--scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent);
|
|
|
|
|
--scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent);
|
|
|
|
|
--scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent);
|
|
|
|
|
--scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent);
|
|
|
|
|
--scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent);
|
|
|
|
|
--scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent);
|
|
|
|
|
--scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent);
|
|
|
|
|
--scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent);
|
|
|
|
|
--scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent);
|
|
|
|
|
--scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent);
|
|
|
|
|
--scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent);
|
|
|
|
|
--scale-red-1: #191111;
|
|
|
|
|
--scale-red-2: #201314;
|
|
|
|
|
--scale-red-3: #3b1219;
|
|
|
|
|
--scale-red-4: #500f1c;
|
|
|
|
|
--scale-red-5: #611623;
|
|
|
|
|
--scale-red-6: #72232d;
|
|
|
|
|
--scale-red-7: #8c333a;
|
|
|
|
|
--scale-red-8: #b54548;
|
|
|
|
|
--scale-red-9: #e5484d;
|
|
|
|
|
--scale-red-10: #ec5d5e;
|
|
|
|
|
--scale-red-11: #ff9592;
|
|
|
|
|
--scale-red-12: #ffd1d9;
|
|
|
|
|
--scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent);
|
|
|
|
|
--scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent);
|
|
|
|
|
--scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent);
|
|
|
|
|
--scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent);
|
|
|
|
|
--scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent);
|
|
|
|
|
--scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent);
|
|
|
|
|
--scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent);
|
|
|
|
|
--scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent);
|
|
|
|
|
--scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent);
|
|
|
|
|
--scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent);
|
|
|
|
|
--scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent);
|
|
|
|
|
--scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent);
|
|
|
|
|
--scale-pink-1: #191117;
|
|
|
|
|
--scale-pink-2: #21121d;
|
|
|
|
|
--scale-pink-3: #37172f;
|
|
|
|
|
--scale-pink-4: #4b143d;
|
|
|
|
|
--scale-pink-5: #591c47;
|
|
|
|
|
--scale-pink-6: #692955;
|
|
|
|
|
--scale-pink-7: #833869;
|
|
|
|
|
--scale-pink-8: #a84885;
|
|
|
|
|
--scale-pink-9: #d6409f;
|
|
|
|
|
--scale-pink-10: #de51a8;
|
|
|
|
|
--scale-pink-11: #ff8dcc;
|
|
|
|
|
--scale-pink-12: #fdd1ea;
|
|
|
|
|
--scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent);
|
|
|
|
|
--scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent);
|
|
|
|
|
--scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent);
|
|
|
|
|
--scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent);
|
|
|
|
|
--scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent);
|
|
|
|
|
--scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent);
|
|
|
|
|
--scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent);
|
|
|
|
|
--scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent);
|
|
|
|
|
--scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent);
|
|
|
|
|
--scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent);
|
|
|
|
|
--scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent);
|
|
|
|
|
--scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent);
|
|
|
|
|
--scale-purple-1: #18111b;
|
|
|
|
|
--scale-purple-2: #1e1523;
|
|
|
|
|
--scale-purple-3: #301c3b;
|
|
|
|
|
--scale-purple-4: #3d224e;
|
|
|
|
|
--scale-purple-5: #48295c;
|
|
|
|
|
--scale-purple-6: #54346b;
|
|
|
|
|
--scale-purple-7: #664282;
|
|
|
|
|
--scale-purple-8: #8457aa;
|
|
|
|
|
--scale-purple-9: #8e4ec6;
|
|
|
|
|
--scale-purple-10: #9a5cd0;
|
|
|
|
|
--scale-purple-11: #d19dff;
|
|
|
|
|
--scale-purple-12: #ecd9fa;
|
|
|
|
|
--scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent);
|
|
|
|
|
--scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent);
|
|
|
|
|
--scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent);
|
|
|
|
|
--scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent);
|
|
|
|
|
--scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent);
|
|
|
|
|
--scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent);
|
|
|
|
|
--scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent);
|
|
|
|
|
--scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent);
|
|
|
|
|
--scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent);
|
|
|
|
|
--scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent);
|
|
|
|
|
--scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent);
|
|
|
|
|
--scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent);
|
|
|
|
|
--primitive-primary-1: var(--scale-purple-1);
|
|
|
|
|
--primitive-primary-2: var(--scale-purple-2);
|
|
|
|
|
--primitive-primary-3: var(--scale-purple-3);
|
|
|
|
|
--primitive-primary-4: var(--scale-purple-4);
|
|
|
|
|
--primitive-primary-5: var(--scale-purple-5);
|
|
|
|
|
--primitive-primary-6: var(--scale-purple-6);
|
|
|
|
|
--primitive-primary-7: var(--scale-purple-7);
|
|
|
|
|
--primitive-primary-8: var(--scale-purple-8);
|
|
|
|
|
--primitive-primary-9: var(--scale-purple-9);
|
|
|
|
|
--primitive-primary-10: var(--scale-purple-10);
|
|
|
|
|
--primitive-primary-11: var(--scale-purple-11);
|
|
|
|
|
--primitive-primary-12: var(--scale-purple-12);
|
|
|
|
|
--primitive-primary-a1: var(--scale-purple-a1);
|
|
|
|
|
--primitive-primary-a2: var(--scale-purple-a2);
|
|
|
|
|
--primitive-primary-a3: var(--scale-purple-a3);
|
|
|
|
|
--primitive-primary-a4: var(--scale-purple-a4);
|
|
|
|
|
--primitive-primary-a5: var(--scale-purple-a5);
|
|
|
|
|
--primitive-primary-a6: var(--scale-purple-a6);
|
|
|
|
|
--primitive-primary-a7: var(--scale-purple-a7);
|
|
|
|
|
--primitive-primary-a8: var(--scale-purple-a8);
|
|
|
|
|
--primitive-primary-a9: var(--scale-purple-a9);
|
|
|
|
|
--primitive-primary-a10: var(--scale-purple-a10);
|
|
|
|
|
--primitive-primary-a11: var(--scale-purple-a11);
|
|
|
|
|
--primitive-primary-a12: var(--scale-purple-a12);
|
|
|
|
|
--color-primary-track: var(--primitive-primary-1);
|
|
|
|
|
--color-primary-element: var(--primitive-primary-3);
|
|
|
|
|
--color-primary-hover: var(--primitive-primary-4);
|
|
|
|
|
--color-primary-active: var(--primitive-primary-5);
|
|
|
|
|
--color-primary-border: var(--primitive-primary-6);
|
|
|
|
|
--color-primary-solid: var(--primitive-primary-9);
|
|
|
|
|
--color-primary-solid-hover: var(--primitive-primary-10);
|
|
|
|
|
--color-primary-text: var(--primitive-primary-11);
|
|
|
|
|
--color-primary-contrast: var(--primitive-primary-12);
|
|
|
|
|
--primitive-secondary-1: var(--scale-slate-1);
|
|
|
|
|
--primitive-secondary-2: var(--scale-slate-2);
|
|
|
|
|
--primitive-secondary-3: var(--scale-slate-3);
|
|
|
|
|
--primitive-secondary-4: var(--scale-slate-4);
|
|
|
|
|
--primitive-secondary-5: var(--scale-slate-5);
|
|
|
|
|
--primitive-secondary-6: var(--scale-slate-6);
|
|
|
|
|
--primitive-secondary-7: var(--scale-slate-7);
|
|
|
|
|
--primitive-secondary-8: var(--scale-slate-8);
|
|
|
|
|
--primitive-secondary-9: var(--scale-slate-9);
|
|
|
|
|
--primitive-secondary-10: var(--scale-slate-10);
|
|
|
|
|
--primitive-secondary-11: var(--scale-slate-11);
|
|
|
|
|
--primitive-secondary-12: var(--scale-slate-12);
|
|
|
|
|
--primitive-secondary-a1: var(--scale-slate-a1);
|
|
|
|
|
--primitive-secondary-a2: var(--scale-slate-a2);
|
|
|
|
|
--primitive-secondary-a3: var(--scale-slate-a3);
|
|
|
|
|
--primitive-secondary-a4: var(--scale-slate-a4);
|
|
|
|
|
--primitive-secondary-a5: var(--scale-slate-a5);
|
|
|
|
|
--primitive-secondary-a6: var(--scale-slate-a6);
|
|
|
|
|
--primitive-secondary-a7: var(--scale-slate-a7);
|
|
|
|
|
--primitive-secondary-a8: var(--scale-slate-a8);
|
|
|
|
|
--primitive-secondary-a9: var(--scale-slate-a9);
|
|
|
|
|
--primitive-secondary-a10: var(--scale-slate-a10);
|
|
|
|
|
--primitive-secondary-a11: var(--scale-slate-a11);
|
|
|
|
|
--primitive-secondary-a12: var(--scale-slate-a12);
|
|
|
|
|
--color-secondary-track: var(--primitive-secondary-1);
|
|
|
|
|
--color-secondary-element: var(--primitive-secondary-3);
|
|
|
|
|
--color-secondary-hover: var(--primitive-secondary-4);
|
|
|
|
|
--color-secondary-active: var(--primitive-secondary-5);
|
|
|
|
|
--color-secondary-border: var(--primitive-secondary-6);
|
|
|
|
|
--color-secondary-solid: var(--primitive-secondary-9);
|
|
|
|
|
--color-secondary-solid-hover: var(--primitive-secondary-10);
|
|
|
|
|
--color-secondary-text: var(--primitive-secondary-11);
|
|
|
|
|
--color-secondary-contrast: var(--primitive-secondary-12);
|
|
|
|
|
--primitive-tertiary-1: var(--scale-gray-1);
|
|
|
|
|
--primitive-tertiary-2: var(--scale-gray-2);
|
|
|
|
|
--primitive-tertiary-3: var(--scale-gray-3);
|
|
|
|
|
--primitive-tertiary-4: var(--scale-gray-4);
|
|
|
|
|
--primitive-tertiary-5: var(--scale-gray-5);
|
|
|
|
|
--primitive-tertiary-6: var(--scale-gray-6);
|
|
|
|
|
--primitive-tertiary-7: var(--scale-gray-7);
|
|
|
|
|
--primitive-tertiary-8: var(--scale-gray-8);
|
|
|
|
|
--primitive-tertiary-9: var(--scale-gray-9);
|
|
|
|
|
--primitive-tertiary-10: var(--scale-gray-10);
|
|
|
|
|
--primitive-tertiary-11: var(--scale-gray-11);
|
|
|
|
|
--primitive-tertiary-12: var(--scale-gray-12);
|
|
|
|
|
--primitive-tertiary-a1: var(--scale-gray-a1);
|
|
|
|
|
--primitive-tertiary-a2: var(--scale-gray-a2);
|
|
|
|
|
--primitive-tertiary-a3: var(--scale-gray-a3);
|
|
|
|
|
--primitive-tertiary-a4: var(--scale-gray-a4);
|
|
|
|
|
--primitive-tertiary-a5: var(--scale-gray-a5);
|
|
|
|
|
--primitive-tertiary-a6: var(--scale-gray-a6);
|
|
|
|
|
--primitive-tertiary-a7: var(--scale-gray-a7);
|
|
|
|
|
--primitive-tertiary-a8: var(--scale-gray-a8);
|
|
|
|
|
--primitive-tertiary-a9: var(--scale-gray-a9);
|
|
|
|
|
--primitive-tertiary-a10: var(--scale-gray-a10);
|
|
|
|
|
--primitive-tertiary-a11: var(--scale-gray-a11);
|
|
|
|
|
--primitive-tertiary-a12: var(--scale-gray-a12);
|
|
|
|
|
--color-tertiary-track: var(--primitive-tertiary-1);
|
|
|
|
|
--color-tertiary-element: var(--primitive-tertiary-3);
|
|
|
|
|
--color-tertiary-hover: var(--primitive-tertiary-4);
|
|
|
|
|
--color-tertiary-active: var(--primitive-tertiary-5);
|
|
|
|
|
--color-tertiary-border: var(--primitive-tertiary-6);
|
|
|
|
|
--color-tertiary-solid: var(--primitive-tertiary-9);
|
|
|
|
|
--color-tertiary-solid-hover: var(--primitive-tertiary-10);
|
|
|
|
|
--color-tertiary-text: var(--primitive-tertiary-11);
|
|
|
|
|
--color-tertiary-contrast: var(--primitive-tertiary-12);
|
|
|
|
|
--primitive-neutral-1: var(--scale-gray-1);
|
|
|
|
|
--primitive-neutral-2: var(--scale-gray-2);
|
|
|
|
|
--primitive-neutral-3: var(--scale-gray-3);
|
|
|
|
|
--primitive-neutral-4: var(--scale-gray-4);
|
|
|
|
|
--primitive-neutral-5: var(--scale-gray-5);
|
|
|
|
|
--primitive-neutral-6: var(--scale-gray-6);
|
|
|
|
|
--primitive-neutral-7: var(--scale-gray-7);
|
|
|
|
|
--primitive-neutral-8: var(--scale-gray-8);
|
|
|
|
|
--primitive-neutral-9: var(--scale-gray-9);
|
|
|
|
|
--primitive-neutral-10: var(--scale-gray-10);
|
|
|
|
|
--primitive-neutral-11: var(--scale-gray-11);
|
|
|
|
|
--primitive-neutral-12: var(--scale-gray-12);
|
|
|
|
|
--primitive-neutral-a1: var(--scale-gray-a1);
|
|
|
|
|
--primitive-neutral-a2: var(--scale-gray-a2);
|
|
|
|
|
--primitive-neutral-a3: var(--scale-gray-a3);
|
|
|
|
|
--primitive-neutral-a4: var(--scale-gray-a4);
|
|
|
|
|
--primitive-neutral-a5: var(--scale-gray-a5);
|
|
|
|
|
--primitive-neutral-a6: var(--scale-gray-a6);
|
|
|
|
|
--primitive-neutral-a7: var(--scale-gray-a7);
|
|
|
|
|
--primitive-neutral-a8: var(--scale-gray-a8);
|
|
|
|
|
--primitive-neutral-a9: var(--scale-gray-a9);
|
|
|
|
|
--primitive-neutral-a10: var(--scale-gray-a10);
|
|
|
|
|
--primitive-neutral-a11: var(--scale-gray-a11);
|
|
|
|
|
--primitive-neutral-a12: var(--scale-gray-a12);
|
|
|
|
|
--color-neutral-track: var(--primitive-neutral-1);
|
|
|
|
|
--color-neutral-element: var(--primitive-neutral-3);
|
|
|
|
|
--color-neutral-hover: var(--primitive-neutral-4);
|
|
|
|
|
--color-neutral-active: var(--primitive-neutral-5);
|
|
|
|
|
--color-neutral-border: var(--primitive-neutral-6);
|
|
|
|
|
--color-neutral-solid: var(--primitive-neutral-9);
|
|
|
|
|
--color-neutral-solid-hover: var(--primitive-neutral-10);
|
|
|
|
|
--color-neutral-text: var(--primitive-neutral-11);
|
|
|
|
|
--color-neutral-contrast: var(--primitive-neutral-12);
|
|
|
|
|
--primitive-affirm-1: var(--scale-teal-1);
|
|
|
|
|
--primitive-affirm-2: var(--scale-teal-2);
|
|
|
|
|
--primitive-affirm-3: var(--scale-teal-3);
|
|
|
|
|
--primitive-affirm-4: var(--scale-teal-4);
|
|
|
|
|
--primitive-affirm-5: var(--scale-teal-5);
|
|
|
|
|
--primitive-affirm-6: var(--scale-teal-6);
|
|
|
|
|
--primitive-affirm-7: var(--scale-teal-7);
|
|
|
|
|
--primitive-affirm-8: var(--scale-teal-8);
|
|
|
|
|
--primitive-affirm-9: var(--scale-teal-9);
|
|
|
|
|
--primitive-affirm-10: var(--scale-teal-10);
|
|
|
|
|
--primitive-affirm-11: var(--scale-teal-11);
|
|
|
|
|
--primitive-affirm-12: var(--scale-teal-12);
|
|
|
|
|
--primitive-affirm-a1: var(--scale-teal-a1);
|
|
|
|
|
--primitive-affirm-a2: var(--scale-teal-a2);
|
|
|
|
|
--primitive-affirm-a3: var(--scale-teal-a3);
|
|
|
|
|
--primitive-affirm-a4: var(--scale-teal-a4);
|
|
|
|
|
--primitive-affirm-a5: var(--scale-teal-a5);
|
|
|
|
|
--primitive-affirm-a6: var(--scale-teal-a6);
|
|
|
|
|
--primitive-affirm-a7: var(--scale-teal-a7);
|
|
|
|
|
--primitive-affirm-a8: var(--scale-teal-a8);
|
|
|
|
|
--primitive-affirm-a9: var(--scale-teal-a9);
|
|
|
|
|
--primitive-affirm-a10: var(--scale-teal-a10);
|
|
|
|
|
--primitive-affirm-a11: var(--scale-teal-a11);
|
|
|
|
|
--primitive-affirm-a12: var(--scale-teal-a12);
|
|
|
|
|
--color-affirm-track: var(--primitive-affirm-1);
|
|
|
|
|
--color-affirm-element: var(--primitive-affirm-3);
|
|
|
|
|
--color-affirm-hover: var(--primitive-affirm-4);
|
|
|
|
|
--color-affirm-active: var(--primitive-affirm-5);
|
|
|
|
|
--color-affirm-border: var(--primitive-affirm-6);
|
|
|
|
|
--color-affirm-solid: var(--primitive-affirm-9);
|
|
|
|
|
--color-affirm-solid-hover: var(--primitive-affirm-10);
|
|
|
|
|
--color-affirm-text: var(--primitive-affirm-11);
|
|
|
|
|
--color-affirm-contrast: var(--primitive-affirm-12);
|
|
|
|
|
--primitive-fulfill-1: var(--scale-green-1);
|
|
|
|
|
--primitive-fulfill-2: var(--scale-green-2);
|
|
|
|
|
--primitive-fulfill-3: var(--scale-green-3);
|
|
|
|
|
--primitive-fulfill-4: var(--scale-green-4);
|
|
|
|
|
--primitive-fulfill-5: var(--scale-green-5);
|
|
|
|
|
--primitive-fulfill-6: var(--scale-green-6);
|
|
|
|
|
--primitive-fulfill-7: var(--scale-green-7);
|
|
|
|
|
--primitive-fulfill-8: var(--scale-green-8);
|
|
|
|
|
--primitive-fulfill-9: var(--scale-green-9);
|
|
|
|
|
--primitive-fulfill-10: var(--scale-green-10);
|
|
|
|
|
--primitive-fulfill-11: var(--scale-green-11);
|
|
|
|
|
--primitive-fulfill-12: var(--scale-green-12);
|
|
|
|
|
--primitive-fulfill-a1: var(--scale-green-a1);
|
|
|
|
|
--primitive-fulfill-a2: var(--scale-green-a2);
|
|
|
|
|
--primitive-fulfill-a3: var(--scale-green-a3);
|
|
|
|
|
--primitive-fulfill-a4: var(--scale-green-a4);
|
|
|
|
|
--primitive-fulfill-a5: var(--scale-green-a5);
|
|
|
|
|
--primitive-fulfill-a6: var(--scale-green-a6);
|
|
|
|
|
--primitive-fulfill-a7: var(--scale-green-a7);
|
|
|
|
|
--primitive-fulfill-a8: var(--scale-green-a8);
|
|
|
|
|
--primitive-fulfill-a9: var(--scale-green-a9);
|
|
|
|
|
--primitive-fulfill-a10: var(--scale-green-a10);
|
|
|
|
|
--primitive-fulfill-a11: var(--scale-green-a11);
|
|
|
|
|
--primitive-fulfill-a12: var(--scale-green-a12);
|
|
|
|
|
--color-fulfill-track: var(--primitive-fulfill-1);
|
|
|
|
|
--color-fulfill-element: var(--primitive-fulfill-3);
|
|
|
|
|
--color-fulfill-hover: var(--primitive-fulfill-4);
|
|
|
|
|
--color-fulfill-active: var(--primitive-fulfill-5);
|
|
|
|
|
--color-fulfill-border: var(--primitive-fulfill-6);
|
|
|
|
|
--color-fulfill-solid: var(--primitive-fulfill-9);
|
|
|
|
|
--color-fulfill-solid-hover: var(--primitive-fulfill-10);
|
|
|
|
|
--color-fulfill-text: var(--primitive-fulfill-11);
|
|
|
|
|
--color-fulfill-contrast: var(--primitive-fulfill-12);
|
|
|
|
|
--primitive-risk-1: var(--scale-orange-1);
|
|
|
|
|
--primitive-risk-2: var(--scale-orange-2);
|
|
|
|
|
--primitive-risk-3: var(--scale-orange-3);
|
|
|
|
|
--primitive-risk-4: var(--scale-orange-4);
|
|
|
|
|
--primitive-risk-5: var(--scale-orange-5);
|
|
|
|
|
--primitive-risk-6: var(--scale-orange-6);
|
|
|
|
|
--primitive-risk-7: var(--scale-orange-7);
|
|
|
|
|
--primitive-risk-8: var(--scale-orange-8);
|
|
|
|
|
--primitive-risk-9: var(--scale-orange-9);
|
|
|
|
|
--primitive-risk-10: var(--scale-orange-10);
|
|
|
|
|
--primitive-risk-11: var(--scale-orange-11);
|
|
|
|
|
--primitive-risk-12: var(--scale-orange-12);
|
|
|
|
|
--primitive-risk-a1: var(--scale-orange-a1);
|
|
|
|
|
--primitive-risk-a2: var(--scale-orange-a2);
|
|
|
|
|
--primitive-risk-a3: var(--scale-orange-a3);
|
|
|
|
|
--primitive-risk-a4: var(--scale-orange-a4);
|
|
|
|
|
--primitive-risk-a5: var(--scale-orange-a5);
|
|
|
|
|
--primitive-risk-a6: var(--scale-orange-a6);
|
|
|
|
|
--primitive-risk-a7: var(--scale-orange-a7);
|
|
|
|
|
--primitive-risk-a8: var(--scale-orange-a8);
|
|
|
|
|
--primitive-risk-a9: var(--scale-orange-a9);
|
|
|
|
|
--primitive-risk-a10: var(--scale-orange-a10);
|
|
|
|
|
--primitive-risk-a11: var(--scale-orange-a11);
|
|
|
|
|
--primitive-risk-a12: var(--scale-orange-a12);
|
|
|
|
|
--color-risk-track: var(--primitive-risk-1);
|
|
|
|
|
--color-risk-element: var(--primitive-risk-3);
|
|
|
|
|
--color-risk-hover: var(--primitive-risk-4);
|
|
|
|
|
--color-risk-active: var(--primitive-risk-5);
|
|
|
|
|
--color-risk-border: var(--primitive-risk-6);
|
|
|
|
|
--color-risk-solid: var(--primitive-risk-9);
|
|
|
|
|
--color-risk-solid-hover: var(--primitive-risk-10);
|
|
|
|
|
--color-risk-text: var(--primitive-risk-11);
|
|
|
|
|
--color-risk-contrast: var(--primitive-risk-12);
|
|
|
|
|
--primitive-threat-1: var(--scale-red-1);
|
|
|
|
|
--primitive-threat-2: var(--scale-red-2);
|
|
|
|
|
--primitive-threat-3: var(--scale-red-3);
|
|
|
|
|
--primitive-threat-4: var(--scale-red-4);
|
|
|
|
|
--primitive-threat-5: var(--scale-red-5);
|
|
|
|
|
--primitive-threat-6: var(--scale-red-6);
|
|
|
|
|
--primitive-threat-7: var(--scale-red-7);
|
|
|
|
|
--primitive-threat-8: var(--scale-red-8);
|
|
|
|
|
--primitive-threat-9: var(--scale-red-9);
|
|
|
|
|
--primitive-threat-10: var(--scale-red-10);
|
|
|
|
|
--primitive-threat-11: var(--scale-red-11);
|
|
|
|
|
--primitive-threat-12: var(--scale-red-12);
|
|
|
|
|
--primitive-threat-a1: var(--scale-red-a1);
|
|
|
|
|
--primitive-threat-a2: var(--scale-red-a2);
|
|
|
|
|
--primitive-threat-a3: var(--scale-red-a3);
|
|
|
|
|
--primitive-threat-a4: var(--scale-red-a4);
|
|
|
|
|
--primitive-threat-a5: var(--scale-red-a5);
|
|
|
|
|
--primitive-threat-a6: var(--scale-red-a6);
|
|
|
|
|
--primitive-threat-a7: var(--scale-red-a7);
|
|
|
|
|
--primitive-threat-a8: var(--scale-red-a8);
|
|
|
|
|
--primitive-threat-a9: var(--scale-red-a9);
|
|
|
|
|
--primitive-threat-a10: var(--scale-red-a10);
|
|
|
|
|
--primitive-threat-a11: var(--scale-red-a11);
|
|
|
|
|
--primitive-threat-a12: var(--scale-red-a12);
|
|
|
|
|
--color-threat-track: var(--primitive-threat-1);
|
|
|
|
|
--color-threat-element: var(--primitive-threat-3);
|
|
|
|
|
--color-threat-hover: var(--primitive-threat-4);
|
|
|
|
|
--color-threat-active: var(--primitive-threat-5);
|
|
|
|
|
--color-threat-border: var(--primitive-threat-6);
|
|
|
|
|
--color-threat-solid: var(--primitive-threat-9);
|
|
|
|
|
--color-threat-solid-hover: var(--primitive-threat-10);
|
|
|
|
|
--color-threat-text: var(--primitive-threat-11);
|
|
|
|
|
--color-threat-contrast: var(--primitive-threat-12);
|
|
|
|
|
--primitive-loss-1: var(--scale-purple-1);
|
|
|
|
|
--primitive-loss-2: var(--scale-purple-2);
|
|
|
|
|
--primitive-loss-3: var(--scale-purple-3);
|
|
|
|
|
--primitive-loss-4: var(--scale-purple-4);
|
|
|
|
|
--primitive-loss-5: var(--scale-purple-5);
|
|
|
|
|
--primitive-loss-6: var(--scale-purple-6);
|
|
|
|
|
--primitive-loss-7: var(--scale-purple-7);
|
|
|
|
|
--primitive-loss-8: var(--scale-purple-8);
|
|
|
|
|
--primitive-loss-9: var(--scale-purple-9);
|
|
|
|
|
--primitive-loss-10: var(--scale-purple-10);
|
|
|
|
|
--primitive-loss-11: var(--scale-purple-11);
|
|
|
|
|
--primitive-loss-12: var(--scale-purple-12);
|
|
|
|
|
--primitive-loss-a1: var(--scale-purple-a1);
|
|
|
|
|
--primitive-loss-a2: var(--scale-purple-a2);
|
|
|
|
|
--primitive-loss-a3: var(--scale-purple-a3);
|
|
|
|
|
--primitive-loss-a4: var(--scale-purple-a4);
|
|
|
|
|
--primitive-loss-a5: var(--scale-purple-a5);
|
|
|
|
|
--primitive-loss-a6: var(--scale-purple-a6);
|
|
|
|
|
--primitive-loss-a7: var(--scale-purple-a7);
|
|
|
|
|
--primitive-loss-a8: var(--scale-purple-a8);
|
|
|
|
|
--primitive-loss-a9: var(--scale-purple-a9);
|
|
|
|
|
--primitive-loss-a10: var(--scale-purple-a10);
|
|
|
|
|
--primitive-loss-a11: var(--scale-purple-a11);
|
|
|
|
|
--primitive-loss-a12: var(--scale-purple-a12);
|
|
|
|
|
--color-loss-track: var(--primitive-loss-1);
|
|
|
|
|
--color-loss-element: var(--primitive-loss-3);
|
|
|
|
|
--color-loss-hover: var(--primitive-loss-4);
|
|
|
|
|
--color-loss-active: var(--primitive-loss-5);
|
|
|
|
|
--color-loss-border: var(--primitive-loss-6);
|
|
|
|
|
--color-loss-solid: var(--primitive-loss-9);
|
|
|
|
|
--color-loss-solid-hover: var(--primitive-loss-10);
|
|
|
|
|
--color-loss-text: var(--primitive-loss-11);
|
|
|
|
|
--color-loss-contrast: var(--primitive-loss-12);
|
|
|
|
|
--color-surface-default: var(--primitive-neutral-1);
|
|
|
|
|
--color-surface-raised: var(--primitive-neutral-2);
|
|
|
|
|
--color-surface-overlay: var(--primitive-neutral-4);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-surface-muted: var(--primitive-neutral-3);
|
|
|
|
|
--color-overlay: rgb(0 0 0 / 0.66);
|
|
|
|
|
--color-content-primary: var(--primitive-neutral-12);
|
|
|
|
|
--color-content-secondary: var(--primitive-neutral-11);
|
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3
+ neutral-10). Plugs 17 broken --color-content-muted and 3 broken
--color-surface-muted references in recipes/components.
- form.css: fix --color-neutral-element-hover typo → --color-neutral-hover.
- archetypes.css + events.css: replace raw hsl/rgba indigo with
color-mix(var(--color-primary-solid) …) — no raw colors left in eidos.
- combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css
and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled
overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme.
- sizes: 20 components expand from sm/md/lg to xs..xl (form controls,
text inputs, progress/meter, field/form) or xs..lg (nav controls:
breadcrumb, pagination, tag-group, toolbar). Composite panels keep
sm/md/lg deliberately.
- variants: field + toolbar drop arbitrary ControlVariant narrowings;
both expose all 3 (surface | outline | ghost) with new outline CSS.
- pagination demo: disambiguate siblingCount/boundaryCount as "per side"
in label + API table (Radix/MUI convention).
- docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity)
+ §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) +
§12.8 (size category cheatsheet) added. eidos/README +
active_architecture.md sync texts/migration nomenclature.
- PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión.
Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 months ago
|
|
|
--color-content-muted: var(--primitive-neutral-10);
|
|
|
|
|
--color-content-disabled: var(--primitive-neutral-8);
|
|
|
|
|
--color-content-on-solid: #ffffff;
|
|
|
|
|
--color-border-subtle: var(--primitive-neutral-4);
|
|
|
|
|
--color-border-default: var(--primitive-neutral-6);
|
|
|
|
|
--color-border-strong: var(--primitive-neutral-8);
|
|
|
|
|
--focus-ring-color: color-mix(in srgb, var(--primitive-primary-8) 52%, transparent);
|
|
|
|
|
--focus-ring-color-error: color-mix(in srgb, var(--primitive-risk-8) 56%, transparent);
|
|
|
|
|
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.28);
|
|
|
|
|
--shadow-2: 0 5px 16px rgb(0 0 0 / 0.34);
|
|
|
|
|
--shadow-3: 0 10px 30px rgb(0 0 0 / 0.42);
|
|
|
|
|
--shadow-4: 0 16px 44px rgb(0 0 0 / 0.48);
|
|
|
|
|
--shadow-5: 0 22px 60px rgb(0 0 0 / 0.55);
|
|
|
|
|
--shadow-6: 0 34px 88px rgb(0 0 0 / 0.62);
|
|
|
|
|
--shadow-none: none;
|
|
|
|
|
--shadow-subtle: var(--shadow-1);
|
|
|
|
|
--shadow-raised: var(--shadow-3);
|
|
|
|
|
--shadow-overlay: var(--shadow-5);
|
|
|
|
|
}
|
