eidos-ui 2.1.0 → 3.0.0

package/dist/index.css

@@ -1,42 +1,48 @@
 :root {
-  --primary-color: #6366f1;
-  --primary-rgb: 99, 102, 241;
-  --primary-dark: #4f46e5;
+  --primary-color: #5c5de8;
+  --primary-rgb: 92, 93, 232;
+  --primary-dark: #4a4dba;
   --primary-light: #a5b4fc;
   --primary-50: #eef2ff;
   --primary-100: #e0e7ff;
   --primary-200: #c7d2fe;
   --primary-300: #a5b4fc;
   --primary-400: #818cf8;
-  --primary-500: #6366f1;
+  --primary-500: #5c5de8;
   --primary-600: #4f46e5;
   --primary-700: #4338ca;
   --primary-800: #3730a3;
   --primary-900: #312e81;
-  --secondary-color: #64748b;
-  --secondary-rgb: 100, 116, 139;
-  --secondary-dark: #475569;
+  --secondary-color: #617087;
+  --secondary-rgb: 97, 112, 135;
+  --secondary-dark: #4d5b71;
   --secondary-light: #cbd5e1;
-  --hyperlink-color: #11a2ad;
-  --hyperlink-rgb: 6, 182, 212;
-  --hyperlink-dark: #0e919b;
+  --hyperlink-color: #007b84;
+  --hyperlink-rgb: 0, 123, 132;
+  --hyperlink-dark: #00646c;
   --hyperlink-light: #1fc1cd;
-  --success-color: #10b981;
-  --success-rgb: 16, 185, 129;
-  --success-dark: #059669;
+  --success-color: #007f57;
+  --success-rgb: 0, 127, 87;
+  --success-dark: #046847;
   --success-light: #6ee7b7;
-  --danger-color: #ef4444;
-  --danger-rgb: 239, 68, 68;
-  --danger-dark: #dc2626;
+  --danger-color: #d6272f;
+  --danger-rgb: 214, 39, 47;
+  --danger-dark: #ac2528;
   --danger-light: #fca5a5;
-  --warning-color: #f59e0b;
-  --warning-rgb: 245, 158, 11;
-  --warning-dark: #d97706;
+  --warning-color: #9c6300;
+  --warning-rgb: 156, 99, 0;
+  --warning-dark: #7f5003;
   --warning-light: #fcd34d;
-  --info-color: #06b6d4;
-  --info-rgb: 6, 182, 212;
-  --info-dark: #0891b2;
+  --info-color: #007a90;
+  --info-rgb: 0, 122, 144;
+  --info-dark: #006476;
   --info-light: #67e8f9;
+  --primary-contrast: var(--white);
+  --secondary-contrast: var(--white);
+  --success-contrast: var(--white);
+  --danger-contrast: var(--white);
+  --warning-contrast: var(--white);
+  --info-contrast: var(--white);
   --light-color: #f8fafc;
   --light-rgb: 248, 250, 252;
   --dark-color: #1e293b;
@@ -113,6 +119,11 @@
   --z-index-command-palette: 1500;
   --z-index-snackbar: 1600;
   --z-index-tooltip: 1700;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 }
 
 * {
@@ -515,22 +526,27 @@ svg.lucide {
 }
 .eidos-avatar--primary {
   background-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-avatar--secondary {
   background-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-avatar--success {
   background-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-avatar--danger {
   background-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-avatar--warning {
   background-color: var(--warning-color);
-  color: var(--dark-color);
+  color: var(--warning-contrast);
 }
 .eidos-avatar--info {
   background-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-avatar--gray {
   background-color: var(--gray-400);
@@ -626,22 +642,27 @@ svg.lucide {
 }
 .eidos-badge--primary {
   background-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-badge--secondary {
   background-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-badge--success {
   background-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-badge--danger {
   background-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-badge--warning {
   background-color: var(--warning-color);
-  color: var(--dark-color);
+  color: var(--warning-contrast);
 }
 .eidos-badge--info {
   background-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-badge--top-right.eidos-badge--rectangular {
   top: var(--badge-offset);
@@ -696,20 +717,17 @@ svg.lucide {
 }
 .eidos-pill--sm {
   min-width: 16px;
-  height: 2.2em;
   padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-xs);
 }
 .eidos-pill--md {
   min-width: 20px;
-  height: 2.2em;
-  padding: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-sm);
 }
 .eidos-pill--lg {
   min-width: 24px;
-  height: 2.2em;
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-base);
 }
 .eidos-pill--dot {
@@ -743,27 +761,27 @@ svg.lucide {
 }
 .eidos-pill--filled.eidos-pill--primary {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-pill--filled.eidos-pill--secondary {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-pill--filled.eidos-pill--success {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-pill--filled.eidos-pill--danger {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-pill--filled.eidos-pill--warning {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-pill--filled.eidos-pill--info {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-pill--outlined {
   background-color: transparent;
@@ -825,13 +843,13 @@ svg.lucide {
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
 }
 
 .eidos-breadcrumb-item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   line-height: 1;
   will-change: transform;
 }
@@ -839,7 +857,7 @@ svg.lucide {
 .eidos-breadcrumb-link {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   color: var(--gray-500);
   text-decoration: none;
@@ -871,7 +889,7 @@ svg.lucide {
 .eidos-breadcrumb-link--button {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   color: var(--gray-500);
   text-decoration: none;
@@ -894,7 +912,7 @@ svg.lucide {
 .eidos-breadcrumb-current {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--dark-color);
@@ -913,7 +931,6 @@ svg.lucide {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: 2px;
 }
 .eidos-breadcrumb-icon svg {
   width: 0.875em;
@@ -967,42 +984,42 @@ svg.lucide {
 }
 .eidos-button--filled.eidos-button--primary {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-button--filled.eidos-button--primary:hover:not(:disabled) {
-  background-color: var(--secondary-dark);
+  background-color: var(--primary-dark);
 }
 .eidos-button--filled.eidos-button--secondary {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-button--filled.eidos-button--secondary:hover:not(:disabled) {
   background-color: var(--secondary-dark);
 }
 .eidos-button--filled.eidos-button--success {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-button--filled.eidos-button--success:hover:not(:disabled) {
   background-color: var(--success-dark);
 }
 .eidos-button--filled.eidos-button--danger {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-button--filled.eidos-button--danger:hover:not(:disabled) {
   background-color: var(--danger-dark);
 }
 .eidos-button--filled.eidos-button--warning {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-button--filled.eidos-button--warning:hover:not(:disabled) {
   background-color: var(--warning-dark);
 }
 .eidos-button--filled.eidos-button--info {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-button--filled.eidos-button--info:hover:not(:disabled) {
   background-color: var(--info-dark);
@@ -1013,7 +1030,7 @@ svg.lucide {
 }
 .eidos-button--outlined:hover:not(:disabled) {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-button--outlined.eidos-button--primary {
   border-color: var(--primary-color);
@@ -1021,7 +1038,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--primary:hover:not(:disabled) {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-button--outlined.eidos-button--secondary {
   border-color: var(--secondary-color);
@@ -1029,7 +1046,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--secondary:hover:not(:disabled) {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-button--outlined.eidos-button--success {
   border-color: var(--success-color);
@@ -1037,7 +1054,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--success:hover:not(:disabled) {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-button--outlined.eidos-button--danger {
   border-color: var(--danger-color);
@@ -1045,7 +1062,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--danger:hover:not(:disabled) {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-button--outlined.eidos-button--warning {
   border-color: var(--warning-color);
@@ -1053,7 +1070,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--warning:hover:not(:disabled) {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-button--outlined.eidos-button--info {
   border-color: var(--info-color);
@@ -1061,7 +1078,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--info:hover:not(:disabled) {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-button--text {
   background-color: transparent;
@@ -1339,6 +1356,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--primary .eidos-checkbox-control--indeterminate {
   background: var(--primary-color);
   border-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1348,6 +1366,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-control--indeterminate {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-checkbox-wrapper--success .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1357,6 +1376,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--success .eidos-checkbox-control--indeterminate {
   background: var(--success-color);
   border-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-checkbox-wrapper--danger .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1366,6 +1386,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--danger .eidos-checkbox-control--indeterminate {
   background: var(--danger-color);
   border-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-checkbox-wrapper--warning .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1375,6 +1396,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--warning .eidos-checkbox-control--indeterminate {
   background: var(--warning-color);
   border-color: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-checkbox-wrapper--info .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1384,6 +1406,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--info .eidos-checkbox-control--indeterminate {
   background: var(--info-color);
   border-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-checkbox-wrapper:hover:not(.eidos-checkbox-wrapper--disabled) .eidos-checkbox-control:not(.eidos-checkbox-control--checked):not(.eidos-checkbox-control--indeterminate):not(.eidos-checkbox-control--disabled) {
   border-color: var(--gray-500);
@@ -1422,7 +1445,7 @@ svg.lucide {
 }
 
 .eidos-checkbox-icon {
-  color: var(--white);
+  color: inherit;
   flex-shrink: 0;
 }
 
@@ -1498,49 +1521,49 @@ svg.lucide {
 }
 .eidos-chip--filled {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-chip--filled:hover:not(.eidos-chip--disabled) {
   background-color: var(--primary-dark);
 }
 .eidos-chip--filled.eidos-chip--primary {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-chip--filled.eidos-chip--primary:hover:not(.eidos-chip--disabled) {
   background-color: var(--primary-dark);
 }
 .eidos-chip--filled.eidos-chip--secondary {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-chip--filled.eidos-chip--secondary:hover:not(.eidos-chip--disabled) {
   background-color: var(--secondary-dark);
 }
 .eidos-chip--filled.eidos-chip--success {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-chip--filled.eidos-chip--success:hover:not(.eidos-chip--disabled) {
   background-color: var(--success-dark);
 }
 .eidos-chip--filled.eidos-chip--danger {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-chip--filled.eidos-chip--danger:hover:not(.eidos-chip--disabled) {
   background-color: var(--danger-dark);
 }
 .eidos-chip--filled.eidos-chip--warning {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-chip--filled.eidos-chip--warning:hover:not(.eidos-chip--disabled) {
   background-color: var(--warning-dark);
 }
 .eidos-chip--filled.eidos-chip--info {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-chip--filled.eidos-chip--info:hover:not(.eidos-chip--disabled) {
   background-color: var(--info-dark);
@@ -1796,14 +1819,15 @@ svg.lucide {
   border-radius: var(--border-radius-sm);
   cursor: crosshair;
   user-select: none;
+  height: 160px;
 }
-.eidos-color-picker--sm .eidos-color-picker-canvas {
+.eidos-color-picker-panel--sm .eidos-color-picker-canvas {
   height: 120px;
 }
-.eidos-color-picker--md .eidos-color-picker-canvas {
+.eidos-color-picker-panel--md .eidos-color-picker-canvas {
   height: 160px;
 }
-.eidos-color-picker--lg .eidos-color-picker-canvas {
+.eidos-color-picker-panel--lg .eidos-color-picker-canvas {
   height: 200px;
 }
 
@@ -1839,6 +1863,7 @@ svg.lucide {
 
 .eidos-color-picker-alpha::-webkit-slider-thumb, .eidos-color-picker-hue::-webkit-slider-thumb {
   -webkit-appearance: none;
+  appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -1975,7 +2000,7 @@ svg.lucide {
 }
 .eidos-color-picker-format-btn--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-color-picker-format-btn:disabled {
   cursor: not-allowed;
@@ -2036,7 +2061,7 @@ svg.lucide {
 .eidos-color-picker-copy--copied {
   background: var(--success-color);
   border-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-color-picker-copy:disabled {
   opacity: 0.5;
@@ -2889,7 +2914,7 @@ kbd.eidos-cmd-kbd {
 .eidos-data-grid-cell-error {
   position: fixed;
   font-size: 10px;
-  color: var(--white);
+  color: var(--danger-contrast);
   background: var(--danger-color);
   white-space: nowrap;
   z-index: var(--z-index-tooltip);
@@ -3529,7 +3554,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-today.eidos-calendar-selected {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   border-color: var(--primary-300);
 }
 .eidos-calendar-date-cell.eidos-calendar-today.eidos-calendar-selected:hover:not(.eidos-calendar-disabled) {
@@ -3546,7 +3571,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-selected {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   font-weight: var(--font-weight-semibold);
 }
 .eidos-calendar-date-cell.eidos-calendar-selected:hover:not(.eidos-calendar-disabled) {
@@ -3563,7 +3588,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-range-start {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -3572,7 +3597,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-range-end {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -5424,26 +5449,31 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-pagination-page--active {
   border-color: transparent;
-  color: var(--white);
   cursor: text;
 }
 .eidos-pagination-page--active.eidos-pagination-page--primary {
   background: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--secondary {
   background: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--success {
   background: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--danger {
   background: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--warning {
   background: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--info {
   background: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-pagination-page--active:focus {
   box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
@@ -5716,6 +5746,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--primary .eidos-radio-control--checked {
   background: var(--primary-color);
   border-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-radio-wrapper--secondary .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5724,6 +5755,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--secondary .eidos-radio-control--checked {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-radio-wrapper--success .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5732,6 +5764,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--success .eidos-radio-control--checked {
   background: var(--success-color);
   border-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-radio-wrapper--danger .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5740,6 +5773,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--danger .eidos-radio-control--checked {
   background: var(--danger-color);
   border-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-radio-wrapper--warning .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5748,6 +5782,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--warning .eidos-radio-control--checked {
   background: var(--warning-color);
   border-color: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-radio-wrapper--info .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5756,6 +5791,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--info .eidos-radio-control--checked {
   background: var(--info-color);
   border-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-radio-wrapper:hover:not(.eidos-radio-wrapper--disabled) .eidos-radio-control:not(.eidos-radio-control--checked):not(.eidos-radio-control--disabled) {
   border-color: var(--gray-500);
@@ -5791,7 +5827,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-radio-dot {
   border-radius: 50%;
-  background: var(--white);
+  background: currentColor;
   flex-shrink: 0;
   transform: scale(0);
   transition: transform 0.2s ease;
@@ -6741,63 +6777,63 @@ kbd.eidos-cmd-kbd {
 .eidos-stepper-step--active.eidos-stepper-step--primary .eidos-stepper-dot {
   background: var(--primary-color);
   border-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--secondary .eidos-stepper-dot {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--success .eidos-stepper-dot {
   background: var(--success-color);
   border-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--danger .eidos-stepper-dot {
   background: var(--danger-color);
   border-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--warning .eidos-stepper-dot {
   background: var(--warning-color);
   border-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--info .eidos-stepper-dot {
   background: var(--info-color);
   border-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 
 .eidos-stepper-step--completed.eidos-stepper-step--primary .eidos-stepper-dot {
   background: var(--primary-color);
   border-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--secondary .eidos-stepper-dot {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--success .eidos-stepper-dot {
   background: var(--success-color);
   border-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--danger .eidos-stepper-dot {
   background: var(--danger-color);
   border-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--warning .eidos-stepper-dot {
   background: var(--warning-color);
   border-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--info .eidos-stepper-dot {
   background: var(--info-color);
   border-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--primary .eidos-stepper-connector, .eidos-stepper-step--completed.eidos-stepper-step--primary + .eidos-stepper-connector--extend {
   background: var(--primary-color);
@@ -6845,7 +6881,7 @@ kbd.eidos-cmd-kbd {
 .eidos-stepper-step--error .eidos-stepper-dot {
   background: var(--danger-color);
   border-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 
 .eidos-stepper-label {
@@ -6915,36 +6951,42 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-switch-wrapper--primary .eidos-switch-track--checked {
   background: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-switch-wrapper--primary .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-track--checked {
   background: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
 }
 .eidos-switch-wrapper--success .eidos-switch-track--checked {
   background: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-switch-wrapper--success .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
 }
 .eidos-switch-wrapper--danger .eidos-switch-track--checked {
   background: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-switch-wrapper--danger .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
 }
 .eidos-switch-wrapper--warning .eidos-switch-track--checked {
   background: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-switch-wrapper--warning .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
 }
 .eidos-switch-wrapper--info .eidos-switch-track--checked {
   background: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-switch-wrapper--info .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
@@ -6994,6 +7036,9 @@ kbd.eidos-cmd-kbd {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: left 0.2s ease;
 }
+.eidos-switch-track--checked .eidos-switch-thumb {
+  background: currentColor;
+}
 
 .eidos-table-container {
   background: var(--white);
@@ -7787,7 +7832,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--pills .eidos-tab--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 
 .eidos-tabs-list {
@@ -7864,7 +7909,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--primary.eidos-tabs--pills .eidos-tab--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-tabs--primary .eidos-tab:focus-visible {
   box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
@@ -7878,7 +7923,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--secondary.eidos-tabs--pills .eidos-tab--active {
   background: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-tabs--secondary .eidos-tab:focus-visible {
   box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
@@ -7892,7 +7937,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--success.eidos-tabs--pills .eidos-tab--active {
   background: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-tabs--success .eidos-tab:focus-visible {
   box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
@@ -7906,7 +7951,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--danger.eidos-tabs--pills .eidos-tab--active {
   background: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-tabs--danger .eidos-tab:focus-visible {
   box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
@@ -7920,7 +7965,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--warning.eidos-tabs--pills .eidos-tab--active {
   background: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-tabs--warning .eidos-tab:focus-visible {
   box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
@@ -7934,7 +7979,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--info.eidos-tabs--pills .eidos-tab--active {
   background: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-tabs--info .eidos-tab:focus-visible {
   box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
@@ -8498,6 +8543,137 @@ kbd.eidos-cmd-kbd {
     border-width: 3px;
   }
 }
+.eidos-theme-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.eidos-theme-editor-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.eidos-theme-editor-section__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.eidos-theme-editor-section__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--dark-color);
+}
+
+.eidos-theme-editor-section__hint {
+  font-size: var(--font-size-sm);
+  color: var(--gray-500);
+}
+.eidos-theme-editor-section__hint code {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--gray-100);
+  border-radius: var(--border-radius-xs);
+  padding: 0 0.25em;
+}
+
+.eidos-theme-editor-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.eidos-theme-editor-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+.eidos-theme-editor-row__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--dark-color);
+  flex: 0 0 auto;
+  min-width: 6.5em;
+}
+.eidos-theme-editor-row__diagnostics {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.eidos-theme-editor-row__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+.eidos-theme-editor-row--wide > .eidos-theme-editor-row__control {
+  flex: 1 1 18em;
+  min-width: 0;
+}
+
+.eidos-theme-editor-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  white-space: nowrap;
+  border-radius: 9999px;
+  padding: 0.15em 0.6em;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  border: 1px solid var(--gray-300);
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+}
+.eidos-theme-editor-badge__icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.eidos-theme-editor-badge--aa-large {
+  border-color: var(--gray-400);
+  color: var(--gray-800);
+}
+.eidos-theme-editor-badge--fail {
+  border-color: var(--gray-700);
+  background-color: var(--gray-800);
+  color: var(--gray-50);
+}
+
+.eidos-theme-editor-file {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.eidos-theme-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 767.98px) {
+  .eidos-theme-editor-row {
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+  .eidos-theme-editor-row__label {
+    min-width: 100%;
+  }
+}
 .eidos-timeline {
   list-style: none;
   margin: 0;
@@ -8538,22 +8714,22 @@ kbd.eidos-cmd-kbd {
 .eidos-timeline-item--primary .eidos-timeline-dot {
   border-color: var(--primary-color);
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-timeline-item--secondary .eidos-timeline-dot {
   border-color: var(--secondary-color);
   background: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-timeline-item--success .eidos-timeline-dot {
   border-color: var(--success-color);
   background: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-timeline-item--danger .eidos-timeline-dot {
   border-color: var(--danger-color);
   background: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-timeline-dot::after {
   content: "";
@@ -8889,16 +9065,46 @@ kbd.eidos-cmd-kbd {
 .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
   padding: var(--spacing-xl) var(--spacing-xl) 0;
 }
+@media (max-width: 1279.98px) {
+  .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
+    padding: var(--spacing-lg) var(--spacing-lg) 0;
+  }
+}
+@media (max-width: 1023.98px) {
+  .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
+    padding: var(--spacing-md) var(--spacing-md) 0;
+  }
+}
+@media (max-width: 767.98px) {
+  .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
+    padding: var(--spacing-sm) var(--spacing-sm) 0;
+  }
+}
 .eidos-pagelayout__body {
   padding-bottom: var(--spacing-xl);
 }
+@media (max-width: 1279.98px) {
+  .eidos-pagelayout__body {
+    padding-bottom: var(--spacing-lg);
+  }
+}
+@media (max-width: 1023.98px) {
+  .eidos-pagelayout__body {
+    padding-bottom: var(--spacing-md);
+  }
+}
+@media (max-width: 767.98px) {
+  .eidos-pagelayout__body {
+    padding-bottom: var(--spacing-sm);
+  }
+}
 
 .eidos-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  row-gap: var(--spacing-xs);
+  gap: var(--spacing-sm) var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-xl);
   min-height: var(--toolbar-height);
   box-sizing: border-box;
@@ -8920,8 +9126,8 @@ kbd.eidos-cmd-kbd {
 .eidos-toolbar__content {
   display: flex;
   align-items: center;
-  gap: var(--spacing-lg);
-  flex-shrink: 0;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
 }
 .eidos-toolbar__slot {
   display: flex;