@sylwellsoftware/fray 0.5.0 → 0.7.0

package/themes/shiny/theme.css

@@ -1,314 +1,512 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-theme="shiny"] {
-  color-scheme: light;
-  --fray-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --fray-font-size: 0.875rem;
-  --fray-line-height: 1.25;
-  --fray-control-min-height: 2rem;
-  --fray-space-xs: 0.25rem;
-  --fray-space-sm: 0.5rem;
-  --fray-space-md: 1rem;
-  --fray-space-lg: 1.5rem;
-  --fray-radius-sm: 0.2rem;
-  --fray-radius-md: 0.35rem;
-  --fray-radius-lg: 0.55rem;
-  --fray-motion-fast: 120ms;
-
-  --fray-shiny-primary-gradient: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fray-color-primary) 52%, var(--fray-color-highlight)) 0%,
-    var(--fray-color-primary) 55%,
-    var(--fray-color-primary-active) 100%
-  );
-  --fray-shiny-surface-gradient: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fray-color-surface-raised) 92%, var(--fray-color-highlight)) 0%,
-    var(--fray-color-surface-muted) 62%,
-    var(--fray-color-surface-inset) 100%
-  );
-  --fray-shiny-highlight: radial-gradient(
-    145% 90% at 35% 0%,
-    color-mix(in srgb, var(--fray-color-highlight) 62%, transparent),
-    transparent 58%
-  );
-
-  --fray-ui-background: var(--fray-color-surface);
-  --fray-ui-color: var(--fray-color-text);
-  --fray-ui-border: 1px solid color-mix(in srgb, var(--fray-color-border-strong) 72%, var(--fray-color-highlight));
-  --fray-ui-shadow: 0 2px 6px color-mix(in srgb, var(--fray-color-shadow) 38%, transparent);
-  --fray-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fray-color-focus) 58%, transparent);
-
-  --fray-panel-background: var(--fray-color-surface);
-  --fray-panel-color: var(--fray-color-text);
-  --fray-panel-border: 1px solid var(--fray-color-border);
-  --fray-panel-shadow: 0 2px 8px color-mix(in srgb, var(--fray-color-shadow) 34%, transparent);
-  --fray-panel-radius: var(--fray-radius-lg);
-  --fray-dialog-shadow: 0 1.25rem 4rem color-mix(in srgb, var(--fray-color-shadow) 48%, transparent);
-  --fray-dialog-backdrop-background: color-mix(in srgb, var(--fray-color-shadow) 58%, transparent);
-
-  --fray-header-background: var(--fray-shiny-primary-gradient);
-  --fray-header-color: var(--fray-color-on-primary);
-  --fray-header-border: 1px solid color-mix(in srgb, var(--fray-color-primary-active) 70%, var(--fray-color-highlight));
-  --fray-header-shadow: 0 2px 4px color-mix(in srgb, var(--fray-color-shadow) 42%, transparent);
-  --fray-section-header-background: var(--fray-header-background);
-  --fray-panel-header-background: var(--fray-header-background);
-  --fray-table-header-background: var(--fray-shiny-surface-gradient);
-  --fray-dialog-header-background: var(--fray-header-background);
-
-  --fray-button-background: var(--fray-shiny-surface-gradient);
-  --fray-button-background-hover: linear-gradient(
-    to bottom,
-    color-mix(in srgb, var(--fray-color-primary-soft) 60%, var(--fray-color-highlight)),
-    var(--fray-color-primary-soft)
-  );
-  --fray-button-background-active: var(--fray-shiny-primary-gradient);
-  --fray-button-background-disabled: color-mix(in srgb, var(--fray-color-disabled) 82%, transparent);
-  --fray-button-color: var(--fray-color-text);
-  --fray-button-border: 1px solid color-mix(in srgb, var(--fray-color-border-strong) 65%, var(--fray-color-highlight));
-  --fray-button-shadow: 0 1px 2px color-mix(in srgb, var(--fray-color-shadow) 48%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fray-color-highlight) 72%, transparent);
-  --fray-button-shadow-active: inset 0 2px 3px color-mix(in srgb, var(--fray-color-shadow) 45%, transparent);
-  --fray-toggle-button-background: transparent;
-  --fray-tab-button-background: var(--fray-shiny-surface-gradient);
-  --fray-dropdown-trigger-background: var(--fray-shiny-primary-gradient);
-
-  --fray-input-background: var(--fray-color-surface-raised);
-  --fray-input-color: var(--fray-color-text);
-  --fray-input-border: 1px solid var(--fray-color-border-strong);
-  --fray-input-shadow: inset 1px 1px 3px color-mix(in srgb, var(--fray-color-shadow) 22%, transparent);
-  --fray-input-background-disabled: var(--fray-color-disabled);
-  --fray-input-color-disabled: var(--fray-color-on-disabled);
-
-  --fray-selection-background: var(--fray-shiny-primary-gradient);
-  --fray-selection-color: var(--fray-color-on-primary);
-  --fray-row-hover-background: var(--fray-color-primary-soft);
-  --fray-table-row-background: var(--fray-color-surface);
-  --fray-table-row-alt-background: var(--fray-color-surface-muted);
-  --fray-checkbox-box-background: linear-gradient(to bottom, var(--fray-color-surface-raised), var(--fray-color-surface-inset));
-  --fray-checkbox-box-background-checked: var(--fray-shiny-primary-gradient);
-  --fray-checkbox-box-border: 1px solid var(--fray-color-border-strong);
-  --fray-checkbox-symbol-color: var(--fray-color-on-primary);
-  --fray-radio-background: transparent;
-  --fray-radio-background-checked: transparent;
-  --fray-toolbar-background: var(--fray-shiny-surface-gradient);
-  --fray-toolbar-color: var(--fray-color-text);
-  --fray-toolbar-border: 1px solid color-mix(in srgb, var(--fray-color-border) 75%, var(--fray-color-highlight));
-  --fray-toolbar-shadow: var(--fray-ui-shadow);
-  --fray-tabline-background: var(--fray-color-surface-muted);
-  --fray-tab-active-background: var(--fray-color-surface);
-  --fray-progress-track-background: linear-gradient(to bottom, var(--fray-color-surface-inset), var(--fray-color-surface-raised));
-  --fray-progress-value-background: var(--fray-shiny-primary-gradient);
-  --fray-working-background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--fray-color-shadow) 8%, transparent) 0 0.7rem, color-mix(in srgb, var(--fray-color-highlight) 28%, transparent) 0.7rem 1.4rem);
-
-  --base-font-size: var(--fray-font-size);
-  --ui-font-size: var(--fray-font-size);
-  --ui-padding: var(--fray-space-sm);
-  --ui-padding-h: var(--fray-space-sm);
-  --ui-padding-v: var(--fray-space-xs);
-  --ui-border-radius: var(--fray-radius-md);
-  --ui-text-color: var(--fray-ui-color);
-  --ui-muted-text-color: var(--fray-color-text-muted);
-  --ui-border-color: var(--fray-color-border);
-  --ui-input-bg: var(--fray-input-background);
-  --ui-input-border: var(--fray-input-border);
-  --ui-input-bg-disabled: var(--fray-input-background-disabled);
-  --ui-input-border-disabled: 1px solid var(--fray-color-border);
-  --ui-input-text-color-disabled: var(--fray-input-color-disabled);
-  --ui-accent-color: var(--fray-color-primary);
-  --ui-accent-color-highlight: var(--fray-color-primary-soft);
-  --input-width: 15rem;
-  --input-shadow: var(--fray-input-shadow);
-  --button-background: var(--fray-button-background);
-  --button-background-hover: var(--fray-button-background-hover);
-  --button-background-disabled: var(--fray-button-background-disabled);
-  --button-border: var(--fray-button-border);
-  --button-border-disabled: 1px solid var(--fray-color-border);
-  --button-shadow: var(--fray-button-shadow);
-  --button-color: var(--fray-button-color);
-  --toggle-selected-bg: var(--fray-selection-background);
-  --toggle-selected-text: var(--fray-selection-color);
-  --panel-bg: var(--fray-panel-background);
-  --panel-border: var(--fray-panel-border);
-  --panel-radius: var(--fray-panel-radius);
-  --panel-shadow: var(--fray-panel-shadow);
-  --panel-color: var(--fray-panel-color);
-  --panel-padding: var(--fray-space-md);
-  --toolbar-bg: var(--fray-toolbar-background);
-  --toolbar-border: var(--fray-toolbar-border);
-  --toolbar-radius: var(--fray-radius-md);
-  --toolbar-shadow: var(--fray-toolbar-shadow);
-  --toolbar-color: var(--fray-toolbar-color);
-  --sectionheader-bg: var(--fray-section-header-background, var(--fray-header-background));
-  --sectionheader-shadow: var(--fray-header-shadow);
-  --sectionheader-color: var(--fray-header-color);
-  --tabline-bg: var(--fray-tabline-background);
-  --tab-bg-active: var(--fray-tab-active-background);
-  --error-color: var(--fray-color-error);
-  --cbx-o-border: var(--fray-checkbox-box-border);
-  --cbx-border-radius: var(--fray-radius-sm);
-  --spacing-small: var(--fray-space-sm);
-  --spacing-medium: var(--fray-space-md);
-  --noselect-user-select: none;
-  --noselect-cursor: default;
-}
+@layer theme {
+  :where(:root:not([data-theme]), [data-theme="shiny"]) {
+      color-scheme: light;
+      --font-family: Arial, Helvetica, sans-serif;
+      --font-size: 0.75rem;
+      --line-height: 1.2;
+      --control-min-height: 1.5rem;
+      --space-xs: 0.1875rem;
+      --space-sm: 0.375rem;
+      --space-md: 0.625rem;
+      --space-lg: 1rem;
+      --radius-sm: 0.125rem;
+      --radius-md: 0.1875rem;
+      --radius-lg: 0.25rem;
+      --motion-fast: 120ms;
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-  button[data-fray-component="button"],
-  [role="tab"],
-  [role="radio"],
-  [role="checkbox"]
-) {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  transition: filter var(--fray-motion-fast), transform var(--fray-motion-fast);
-}
+      --shiny-primary-gradient: linear-gradient(to bottom, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 66%, var(--palette-primary-300) 100%);
+      --shiny-surface-gradient: linear-gradient(to top, var(--palette-neutral-50) 0.55rem, var(--palette-neutral-50) 0.8rem, var(--palette-neutral-200) 100%);
+      --shiny-surface-gradient-hover: linear-gradient(to bottom, var(--palette-neutral-50) 0.55rem, var(--palette-neutral-50) 0.8rem, var(--palette-neutral-200) 100%);
+      --shiny-list-gradient: linear-gradient(to bottom, var(--palette-neutral-600), var(--palette-neutral-800));
+      --shiny-highlight: radial-gradient(140% 75% at 30% 10%, color-mix(in oklch, var(--palette-light) 66%, transparent) 0 50%, transparent 51%);
+      --shiny-raised-shadow: inset 2px -2px 2px color-mix(in oklch, var(--palette-light) 48%, transparent), inset -2px 3px 3px -1px color-mix(in oklch, var(--palette-dark) 40%, transparent), -1px 1px 2px color-mix(in oklch, var(--palette-dark) 42%, transparent);
+      --shiny-control-shadow: inset 1px -1px 3px 1px color-mix(in oklch, var(--palette-light) 92%, transparent), inset 0 0 3px color-mix(in oklch, var(--palette-dark) 46%, transparent), -1px 1px 2px -1px color-mix(in oklch, var(--palette-dark) 46%, transparent);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-  button[data-fray-component="button"],
-  [role="tab"],
-  [role="radio"],
-  [role="checkbox"]
-)::before {
-  content: "";
-  position: absolute;
-  inset: 1px;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--fray-shiny-highlight);
-  pointer-events: none;
-}
+      --ui-background: var(--palette-neutral-50);
+      --ui-color: var(--palette-primary-900);
+      --ui-border: 1px solid var(--palette-neutral-300);
+      --ui-shadow: 0 1px 2.5px color-mix(in oklch, var(--palette-dark) 58%, transparent);
+      --focus-ring: 0 0 0 2px var(--palette-primary-400);
+      --focus-color: var(--palette-primary);
+      --error-color: var(--palette-red);
+      --error-contrast: var(--palette-contrast-light);
+      --success-color: var(--palette-green);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-  button[data-fray-component="button"],
-  [role="tab"],
-  [role="radio"],
-  [role="checkbox"]
-):active {
-  transform: translateY(1px);
-  box-shadow: var(--fray-button-shadow-active);
-}
+      --panel-background: var(--palette-neutral-50);
+      --panel-color: var(--ui-color);
+      --panel-border: 1px solid var(--palette-neutral-300);
+      --panel-shadow: 0 1px 2.5px color-mix(in oklch, var(--palette-dark) 58%, transparent);
+      --panel-radius: 0;
+      --dialog-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--palette-dark) 35%, transparent);
+      --dialog-backdrop-background: color-mix(in oklch, var(--palette-dark) 55%, transparent);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-  [data-fray-component="panel"] > [data-part="header"],
-  dialog[data-fray-component="dialog"] > [data-part="header"],
-  th[data-fray-component="table-header-cell"]
-) {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-}
+      --header-background: radial-gradient(140% 75% at 40% 15%, #fff2, #fff2 47%, #fff0 55%, #fff0), var(--shiny-primary-gradient);
+      --header-color: var(--palette-contrast-light);
+      --header-border: 0 solid transparent;
+      --header-shadow: inset 2px -2px 2px 0 #fff7, inset -2px 3px 3px -1px #0006, -1px 1px 2px 0 #0005;
+      --section-header-background: var(--header-background);
+      --section-header-color: var(--header-color);
+      --section-header-border: var(--header-border);
+      --section-header-shadow: var(--header-shadow);
+      --panel-header-background: var(--section-header-background);
+      --panel-header-color: var(--section-header-color);
+      --table-header-background: var(--palette-neutral-100);
+      --table-header-color: var(--ui-color);
+      --dialog-header-background: var(--section-header-background);
+      --dialog-header-color: var(--section-header-color);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-  [data-fray-component="panel"] > [data-part="header"],
-  dialog[data-fray-component="dialog"] > [data-part="header"],
-  th[data-fray-component="table-header-cell"]
-)::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background: var(--fray-shiny-highlight);
-  border: 1px solid color-mix(in srgb, var(--fray-color-highlight) 22%, transparent);
-  pointer-events: none;
-}
+      --button-background: var(--shiny-surface-gradient);
+      --button-background-hover: var(--shiny-surface-gradient-hover);
+      --button-background-active: var(--shiny-primary-gradient);
+      --button-background-disabled: var(--palette-neutral-200);
+      --button-color: var(--ui-color);
+      --button-border: 1px solid var(--palette-light);
+      --button-shadow: -1px 1px 2px 1px color-mix(in oklch, var(--palette-dark) 50%, transparent), inset 0 1px 0 color-mix(in oklch, var(--palette-light) 72%, transparent);
+      --button-shadow-active: -1px 1px 2px 0 color-mix(in oklch, var(--palette-dark) 58%, transparent), inset 1px 1px 2px color-mix(in oklch, var(--palette-dark) 34%, transparent);
+      --toggle-button-background: var(--button-background);
+      --toggle-button-background-checked: var(--selection-background);
+      --tab-button-background: var(--button-background);
+      --tab-button-background-active: var(--tab-active-background);
+      --menu-button-background: var(--button-background);
+      --dropdown-trigger-background: var(--button-background);
+      --table-header-button-background: var(--button-background);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) [data-fray-component="checkbox"] [data-part="symbol"] {
-  position: relative;
-  color: var(--fray-checkbox-symbol-color);
-  background: var(--fray-checkbox-box-background);
-  box-shadow: inset 1px 1px 2px color-mix(in srgb, var(--fray-color-shadow) 24%, transparent), 0 1px 2px color-mix(in srgb, var(--fray-color-shadow) 42%, transparent);
-  overflow: hidden;
-}
+      --input-background: var(--palette-light);
+      --input-color: var(--ui-color);
+      --input-border: 1px solid var(--palette-neutral-500);
+      --input-shadow: inset -1px 1px 3px -2px color-mix(in oklch, var(--palette-dark) 58%, transparent);
+      --input-background-disabled: var(--palette-neutral-200);
+      --input-color-disabled: var(--palette-neutral-700);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) [data-fray-component="checkbox"] [aria-checked="true"] [data-part="symbol"] {
-  background: var(--fray-checkbox-box-background-checked);
-}
+      --selection-background: var(--palette-primary);
+      --selection-color: var(--palette-contrast-light);
+      --row-hover-background: var(--palette-primary-100);
+      --table-row-background: var(--palette-neutral-50);
+      --table-row-alt-background: var(--palette-neutral-100);
+      --checkbox-box-background: var(--input-background);
+      --checkbox-box-background-checked: var(--selection-background);
+      --checkbox-box-border: 0 solid transparent;
+      --checkbox-symbol-color: var(--selection-color);
+      --radio-background: var(--button-background);
+      --radio-background-checked: var(--selection-background);
+      --toolbar-background: var(--shiny-surface-gradient);
+      --toolbar-color: var(--ui-color);
+      --toolbar-border: 1px solid var(--palette-neutral-300);
+      --toolbar-shadow: 0 1px 2px color-mix(in oklch, var(--palette-dark) 30%, transparent);
+      --tabline-background: var(--palette-neutral-100);
+      --tab-active-background: var(--palette-neutral-50);
+      --progress-track-background: var(--palette-neutral-200);
+      --progress-value-background: var(--shiny-primary-gradient);
+      --working-background-image: linear-gradient(-45deg, transparent 25%, color-mix(in oklch, var(--palette-light) 35%, transparent) 25% 50%, transparent 50% 75%, color-mix(in oklch, var(--palette-light) 35%, transparent) 75%);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) [data-fray-component="checkbox"] [data-part="symbol"]::before {
-  content: "";
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background: var(--fray-shiny-highlight);
-  pointer-events: none;
-}
+      --colored-base: var(--palette-primary);
+      --colored-light: var(--palette-primary-light);
+      --colored-dark: var(--palette-primary-dark);
+      --colored-contrast: var(--palette-contrast-light);
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) [data-fray-component="dropdown"] > select,
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where([data-fray-component="theme-picker"], [data-fray-component="color-picker"]) > select {
-  appearance: none;
-  padding-inline-end: 2.25rem;
-}
+      --base-font-size: var(--font-size);
+      --ui-font-size: var(--font-size);
+      --ui-padding: var(--space-sm);
+      --ui-padding-h: var(--space-sm);
+      --ui-padding-v: var(--space-xs);
+      --ui-border-radius: var(--radius-md);
+      --ui-text-color: var(--ui-color);
+      --ui-muted-text-color: var(--palette-neutral-700);
+      --ui-border-color: var(--palette-neutral-300);
+      --ui-input-bg: var(--input-background);
+      --ui-input-border: var(--input-border);
+      --ui-input-bg-disabled: var(--input-background-disabled);
+      --ui-input-border-disabled: 1px solid var(--palette-neutral-300);
+      --ui-input-text-color-disabled: var(--input-color-disabled);
+      --ui-accent-color: var(--palette-primary);
+      --ui-accent-color-highlight: var(--palette-primary-100);
+      --input-width: 15rem;
+      --button-border-disabled: 1px solid var(--palette-neutral-300);
+      --toggle-selected-bg: var(--selection-background);
+      --toggle-selected-text: var(--selection-color);
+      --panel-bg: var(--panel-background);
+      --panel-padding: var(--space-sm);
+      --toolbar-bg: var(--toolbar-background);
+      --toolbar-radius: var(--radius-md);
+      --sectionheader-bg: var(--section-header-background);
+      --sectionheader-shadow: var(--section-header-shadow);
+      --sectionheader-color: var(--section-header-color);
+      --tabline-bg: var(--tabline-background);
+      --tab-bg-active: var(--tab-active-background);
+      --cbx-o-border: var(--checkbox-box-border);
+      --cbx-border-radius: var(--radius-sm);
+      --spacing-small: var(--space-sm);
+      --spacing-medium: var(--space-md);
+      --noselect-user-select: none;
+      --noselect-cursor: default;
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-  [data-fray-component="dropdown"],
-  [data-fray-component="theme-picker"],
-  [data-fray-component="color-picker"]
-)::after {
-  content: "⌄";
-  position: absolute;
-  inset-block: 1px;
-  inset-inline-end: 1px;
-  display: grid;
-  width: 1.9rem;
-  place-items: center;
-  color: var(--fray-color-on-primary);
-  background: var(--fray-dropdown-trigger-background);
-  border-inline-start: 1px solid color-mix(in srgb, var(--fray-color-primary-active) 70%, var(--fray-color-highlight));
-  border-radius: 0 calc(var(--fray-radius-md) - 1px) calc(var(--fray-radius-md) - 1px) 0;
-  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fray-color-highlight) 58%, transparent), -1px 0 2px color-mix(in srgb, var(--fray-color-shadow) 28%, transparent);
-  pointer-events: none;
-}
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      line-height: var(--line-height);
+      color: var(--ui-color);
+      background: var(--ui-background);
+  }
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) progress {
-  overflow: hidden;
-  border: 0;
-  border-radius: var(--fray-radius-md);
-  background: var(--fray-progress-track-background);
-  box-shadow: inset 1px 1px 3px color-mix(in srgb, var(--fray-color-shadow) 32%, transparent);
-}
+  @scope (:root:not([data-theme]), [data-theme="shiny"]) to ([data-theme], [data-theme-exclude]) {
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) progress::-webkit-progress-bar {
-  background: var(--fray-progress-track-background);
-}
+    :where(button, .buttonlike) {
+      min-height: var(--control-min-height);
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--button-color);
+      background: var(--button-background);
+      border: var(--button-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--button-shadow);
+      font: inherit;
+      cursor: default;
+      user-select: none;
+    }
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) progress::-webkit-progress-value {
-  background: var(--fray-shiny-highlight), var(--fray-progress-value-background);
-}
+    :where(button, .buttonlike, input, select, textarea, .inputlike, .inputshell, .selectshell, .checkboxshell, [role="checkbox"], [role="radio"], [role="tab"]) {
+      user-select: none;
+    }
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) progress::-moz-progress-bar {
-  background: var(--fray-shiny-highlight), var(--fray-progress-value-background);
-}
+    :where(button, .buttonlike):hover:not(:disabled, [aria-disabled="true"]) {
+      background: var(--button-background-hover);
+    }
 
-@media (forced-colors: active) {
-  :where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-    button[data-fray-component="button"],
-    [role="tab"],
-    [role="radio"],
-    [role="checkbox"],
-    [data-fray-component="panel"] > [data-part="header"],
-    dialog[data-fray-component="dialog"] > [data-part="header"],
-    th[data-fray-component="table-header-cell"]
-  )::before,
-  :where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-    [data-fray-component="panel"] > [data-part="header"],
-    dialog[data-fray-component="dialog"] > [data-part="header"],
-    th[data-fray-component="table-header-cell"]
-  )::after,
-  :where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-    [data-fray-component="dropdown"],
-    [data-fray-component="theme-picker"],
-    [data-fray-component="color-picker"]
-  )::after {
-    display: none;
-  }
+    :where(button, .buttonlike):active:not(:disabled, [aria-disabled="true"]) {
+      background: var(--button-background-active);
+      box-shadow: var(--button-shadow-active);
+    }
+
+    :where(button, .buttonlike):focus-visible,
+    :where(input, select, textarea, .inputlike):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 1px;
+      box-shadow: var(--focus-ring);
+    }
+
+    :where(button, .buttonlike):disabled,
+    :where(.buttonlike[aria-disabled="true"]) {
+      color: var(--input-color-disabled);
+      background: var(--button-background-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :where(.buttonshell) {
+      border: var(--button-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--button-shadow);
+    }
+
+    :where(.buttoninner) {
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--button-color);
+      background: var(--button-background);
+    }
+
+    :where(input:not([type="checkbox"]), select, textarea, .inputlike) {
+      min-height: var(--control-min-height);
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--input-color);
+      background: var(--input-background);
+      border: var(--input-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--input-shadow);
+      box-sizing: border-box;
+      font: inherit;
+    }
+
+    :where(input:not([type="checkbox"]), select, textarea, .inputlike):disabled,
+    :where(.inputlike[aria-disabled="true"]) {
+      color: var(--input-color-disabled);
+      background: var(--input-background-disabled);
+      cursor: not-allowed;
+    }
+
+    :where(.inputshell) {
+      color: var(--input-color);
+      background: var(--input-background);
+      border: var(--input-border);
+      border-radius: var(--radius-sm);
+      box-shadow: var(--input-shadow);
+    }
+
+    :where(.checkboxshell) {
+      color: var(--input-color);
+      background: var(--shiny-highlight), var(--shiny-surface-gradient);
+      border: var(--checkbox-box-border);
+      border-radius: var(--radius-sm);
+      box-shadow: var(--shiny-control-shadow);
+    }
+
+    :where(input[type="checkbox"]:checked + .checkboxshell) {
+      color: var(--checkbox-symbol-color);
+      background: var(--shiny-highlight), var(--shiny-primary-gradient);
+      box-shadow: inset 0 0 3px color-mix(in oklch, var(--palette-primary-950) 72%, transparent), -1px 1px 2px -1px color-mix(in oklch, var(--palette-dark) 54%, transparent);
+    }
+
+    :where([role="checkbox"][aria-checked="true"] .inputshell) {
+      color: var(--checkbox-symbol-color);
+      background: var(--shiny-highlight), var(--shiny-primary-gradient);
+      box-shadow: inset 0 0 3px color-mix(in oklch, var(--palette-primary-950) 72%, transparent), -1px 1px 2px -1px color-mix(in oklch, var(--palette-dark) 54%, transparent);
+    }
+
+    :where(input[type="checkbox"]:disabled + .checkboxshell),
+    :where([role="checkbox"][aria-disabled="true"] .inputshell) {
+      color: var(--palette-neutral-600);
+      background: var(--palette-neutral-200);
+      box-shadow: inset 0 0 2px color-mix(in oklch, var(--palette-dark) 25%, transparent);
+    }
+
+    :where(.inputinner) {
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--input-color);
+      background: var(--input-background);
+    }
+
+    :where(.selectshell) { position: relative; }
+
+    :where(table, textarea, [role="tree"], [role="listbox"], .datacomponentlike) {
+      color: var(--ui-color);
+      background: var(--ui-background);
+      border-color: var(--palette-neutral-300);
+    }
+
+    :where(.datacomponentshell) {
+      border: var(--ui-border);
+      border-radius: var(--panel-radius);
+      box-shadow: var(--ui-shadow);
+    }
+
+    :where(.datacomponentinner) {
+      padding: var(--space-sm);
+      color: var(--ui-color);
+      background: var(--ui-background);
+    }
+
+    :where(header, th, .headerlike) {
+      color: var(--header-color);
+      background: var(--header-background);
+      border: var(--header-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--header-shadow);
+    }
+
+    :where(header, .headerlike) {
+      padding: var(--space-xs) var(--space-sm);
+    }
+
+    :where(th > button) {
+      color: var(--table-header-color);
+      background: var(--table-header-button-background);
+    }
+
+    :where(th) {
+      color: var(--table-header-color);
+      background: var(--table-header-background);
+    }
+
+    :where(dialog > header) {
+      color: var(--dialog-header-color);
+      background: var(--dialog-header-background);
+    }
+
+    :where(dl > div) { border-block-end: 1px solid var(--ui-border-color); }
+    :where(dt) {
+      color: var(--ui-muted-text-color);
+      font-weight: 600;
+    }
+
+    :where(.headershell) {
+      border: var(--header-border);
+      box-shadow: var(--header-shadow);
+    }
+
+    :where(.headerinner) {
+      padding: var(--space-sm);
+      color: var(--header-color);
+      background: var(--header-background);
+    }
+
+    :where(.panellike, aside, dialog) {
+      color: var(--panel-color);
+      background: var(--panel-background);
+      border: var(--panel-border);
+      border-radius: var(--panel-radius);
+      box-shadow: var(--panel-shadow);
+    }
+
+    :where(.panelshell) {
+      border: var(--panel-border);
+      border-radius: var(--panel-radius);
+      box-shadow: var(--panel-shadow);
+    }
+
+    :where(.panelinner) {
+      padding: var(--space-md);
+      color: var(--panel-color);
+      background: var(--panel-background);
+    }
+
+    :where(dialog)::backdrop { background: var(--dialog-backdrop-background); }
+    :where(dialog > footer) { border-block-start: 1px solid var(--ui-border-color); }
+
+    :where([role="toolbar"], .toolbarlike) {
+      color: var(--toolbar-color);
+      background: var(--toolbar-background);
+      border: var(--toolbar-border);
+      box-shadow: var(--toolbar-shadow);
+    }
+
+    :where(.toolbarshell) {
+      border: var(--toolbar-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--toolbar-shadow);
+    }
+
+    :where(.toolbarinner) {
+      padding: var(--space-sm);
+      color: var(--toolbar-color);
+      background: var(--toolbar-background);
+    }
+
+    :where(.coloredlike, .coloredshell) {
+      --colored-base: var(--palette-primary);
+      --colored-light: var(--palette-primary-light);
+      --colored-dark: var(--palette-primary-dark);
+      --colored-contrast: var(--palette-contrast-light);
+      color: var(--colored-contrast);
+      background: linear-gradient(to bottom, var(--colored-light) 0%, var(--colored-base) 65%, var(--colored-base) 65%, var(--colored-dark) 100%);
+      border-color: color-mix(in oklch, var(--colored-dark) 72%, currentColor);
+      box-shadow: inset 2px -2px 2px 0 #fff7, inset -2px 3px 3px -1px #0006, -1px 1px 2px 0 #0005;
+    }
+
+    :where(.coloredinner) {
+      color: var(--colored-contrast);
+      background: transparent;
+    }
+
+    :where([aria-selected="true"], [aria-pressed="true"]) {
+      color: var(--selection-color);
+      background: var(--selection-background);
+    }
+
+    :where([role="tab"]) {
+      background: var(--tab-button-background);
+      border-radius: var(--radius-md) var(--radius-md) 0 0;
+      box-shadow: inset 0 -3px 3px -3px color-mix(in oklch, var(--palette-dark) 68%, transparent);
+    }
+    :where([role="tab"][aria-selected="true"]) {
+      color: var(--button-color);
+      background: var(--tab-button-background-active);
+      box-shadow: -1px -1px 2px color-mix(in oklch, var(--palette-dark) 35%, transparent);
+      transform: translateY(-2px);
+    }
+    :where([role="radio"]) { background: var(--toggle-button-background); }
+    :where([role="radio"][aria-checked="true"]) {
+      color: var(--selection-color);
+      background: var(--toggle-button-background-checked);
+    }
+    :where([role="radiogroup"] > [role="radio"]) { border-radius: 0; }
+    :where([role="radiogroup"] > [role="radio"]:first-child) {
+      border-radius: var(--radius-md) 0 0 var(--radius-md);
+    }
+    :where([role="radiogroup"] > [role="radio"]:last-child) {
+      border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    }
+
+    :where([role="option"], [role="treeitem"], tbody tr[tabindex]):hover {
+      color: var(--ui-color);
+      background: var(--row-hover-background);
+    }
+
+    :where([role="option"]:not([aria-selected="true"]):not(:hover)) {
+      margin: 2px;
+      color: var(--palette-contrast-light);
+      background: var(--shiny-list-gradient);
+      border: 1px solid var(--palette-neutral-600);
+      border-radius: var(--radius-md);
+      box-shadow: inset 1px 1px 2px color-mix(in oklch, var(--palette-light) 28%, transparent), -1px 1px 2px color-mix(in oklch, var(--palette-dark) 42%, transparent);
+    }
+
+    :where([role="option"][aria-selected="true"]) {
+      margin: 2px;
+      border: 1px solid var(--palette-primary-700);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shiny-raised-shadow);
+    }
+
+    :where([role="option"], [role="treeitem"], tbody tr[tabindex]):focus-visible {
+      outline: 2px solid var(--focus-color);
+      outline-offset: -2px;
+    }
+
+    :where(tbody tr:nth-child(odd)) { background: var(--table-row-background); }
+    :where(tbody tr:nth-child(even)) { background: var(--table-row-alt-background); }
+    :where([role="alert"]) { color: var(--error-color); }
+
+    :where(progress) {
+      color: var(--progress-value-background);
+      background: var(--progress-track-background);
+      accent-color: var(--palette-primary);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      :where(dialog[open]) { animation: theme-dialog-enter var(--motion-fast) ease-out; }
+    }
+
+    @keyframes theme-dialog-enter {
+      from { transform: translateY(0.4rem); }
+    }
+
+    @media (forced-colors: active) {
+      :where(.coloredlike, .coloredshell, .coloredinner) {
+        color: CanvasText;
+        background: Canvas;
+        border-color: CanvasText;
+        forced-color-adjust: auto;
+      }
+    }
+
+    :where(.selectshell) > select {
+      appearance: none;
+      padding-inline-end: 2.25rem;
+    }
+
+    :where(.selectshell)::after {
+      content: "⌄";
+      position: absolute;
+      inset-block: 1px;
+      inset-inline-end: 1px;
+      display: grid;
+      width: 1.9rem;
+      place-items: center;
+      color: var(--palette-contrast-light);
+      background: var(--dropdown-trigger-background);
+      border-inline-start: 1px solid var(--palette-primary-700);
+      border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
+      pointer-events: none;
+    }
+
+    :where(progress) {
+      overflow: hidden;
+      border: 0;
+      border-radius: var(--radius-md);
+      box-shadow: inset 1px 1px 3px color-mix(in oklch, var(--palette-dark) 32%, transparent);
+    }
+
+    @media (forced-colors: active) {
+      :where(button, .buttonlike, [role="tab"], [role="radio"], [role="checkbox"])::before,
+      :where(header, th, .headerlike)::after,
+      :where(.inputshell)::before,
+      :where(.selectshell)::after {
+        display: none;
+      }
 
-  :where(:root:not([data-fray-theme]), [data-fray-theme="shiny"]) :where(
-    [data-fray-component="dropdown"],
-    [data-fray-component="theme-picker"],
-    [data-fray-component="color-picker"]
-  ) > select {
-    appearance: auto;
-    padding-inline-end: var(--fray-space-sm);
+      :where(.selectshell) > select {
+        appearance: auto;
+        padding-inline-end: var(--space-sm);
+      }
+    }
   }
 }