@sylwellsoftware/fray 0.7.0 → 1.0.0

package/themes/shiny/theme.css

@@ -1,512 +1,131 @@
 @charset "utf-8";
-
+/* Shiny changes theme tokens only. Components own all consuming selectors. */
 @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;
-
-      --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);
-
-      --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);
-
-      --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);
-
-      --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);
-
-      --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);
-
-      --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);
-
-      --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%);
-
-      --colored-base: var(--palette-primary);
-      --colored-light: var(--palette-primary-light);
-      --colored-dark: var(--palette-primary-dark);
-      --colored-contrast: var(--palette-contrast-light);
-
-      --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;
-
-      font-family: var(--font-family);
-      font-size: var(--font-size);
-      line-height: var(--line-height);
-      color: var(--ui-color);
-      background: var(--ui-background);
-  }
-
-  @scope (:root:not([data-theme]), [data-theme="shiny"]) to ([data-theme], [data-theme-exclude]) {
-
-    :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(button, .buttonlike, input, select, textarea, .inputlike, .inputshell, .selectshell, .checkboxshell, [role="checkbox"], [role="radio"], [role="tab"]) {
-      user-select: none;
-    }
-
-    :where(button, .buttonlike):hover:not(:disabled, [aria-disabled="true"]) {
-      background: var(--button-background-hover);
-    }
-
-    :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(.selectshell) > select {
-        appearance: auto;
-        padding-inline-end: var(--space-sm);
-      }
-    }
+  :root {
+    /* Foundation and shared chrome */
+    color-scheme: only light;
+    --box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.3);
+    --button-shadow: -1px 1px 2px 1px rgba(0,0,0,0.5);
+    --button-shadow-pressed: -1px 1px 2px 0px #0008;
+    --ui-gradient: linear-gradient( to top, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
+    --ui-gradient-2: linear-gradient( to bottom, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
+    --shiny-ui-gradient: var(--ui-gradient);
+    --shiny-ui-gradient-2: var(--ui-gradient-2);
+    --text-color: var(--palette-primary-900);
+    --ui-color: var(--text-color);
+
+    /* Layout components; the island canvas stays base white. */
+    --panel-background: var(--ui-primary-bg-color);
+    --panel-color: var(--text-color);
+    --panel-border: none;
+    --panel-radius: 0px;
+    --island-margin: var(--space-sm);
+    --island-border: 1px solid rgb(255 255 255 / 0.45);
+    --island-shadow: 0px 1px 2.5px 0px #666;
+    --section-header-background:
+      radial-gradient(100% 50% at 40% 10%, #fff0, #fff0 30%, #ffffff15 110%, #fff0 120%, #fff0 calc(120% + 1%)),
+      linear-gradient(1deg, var(--palette-primary-900) 0%, var(--palette-primary) 65%, rgba(41,137,216,1) 65%, var(--palette-primary-200) 100%);
+    --section-header-color: var(--palette-contrast-light);
+    --section-header-shadow:
+      inset -1px 1px 2px 0px #0003,
+      inset 1px -1px 2px 0px #fff5,
+      inset -1px 1px 1px 0px #0006,
+      inset 1px -1px 1px 0px #fff5,
+      0px 1px 2px 0px #000a;
+
+    --sidebar-background:
+      linear-gradient(135deg, rgb(255 255 255 / 0.4), transparent 55%),
+      var(--panel-background);
+    --sidebar-radius: 0;
+    --sidebar-toolbar-background: color-mix(in oklch, var(--palette-primary-100) 72%, var(--palette-light));
+    --sidebar-toolbar-border: 1px solid color-mix(in oklch, var(--palette-primary) 24%, var(--palette-neutral-300));
+    --toolbar-background: var(--ui-gradient);
+
+    /* Input components */
+    --input-shadow: inset -1px 1px 3px -2px rgba(0,0,0,0.45);
+    --dropdown-trigger-content: '\23F7';
+
+    /* Action components */
+    --button-background: var(--ui-gradient-2);
+    --button-background-hover: var(--ui-gradient);
+    --button-background-active: var(--ui-gradient);
+    --button-border: 1px solid #fff;
+    --button-shadow-active: var(--button-shadow-pressed);
+
+    --cbx-x-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, #400 0%, #c00 65%, #e00 100%);
+    --cbx-x-color: #fff;
+    --cbx-x-border: 0px solid rgba(0,0,0,0);
+    --cbx-x-shadow: inset 1px -1px 1px 0px #fffa, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
+    --cbx-o-bg: linear-gradient(to bottom, #ffffffd5 0%, #ffffffe5 100%), linear-gradient(to bottom, var(--palette-primary) 0%, var(--palette-primary) 100%);
+    --cbx-o-color: var(--ui-input-text-color);
+    --cbx-o-border: 0px solid rgba(0,0,0,0);
+    --cbx-o-shadow: inset 1px -1px 1px 0px #ffff, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
+    --cbx-c-bg: var(--checkbox-box-background-checked);
+    --cbx-c-color: #fff;
+    --cbx-c-border: 0px solid rgba(0,0,0,0);
+    --cbx-c-shadow: inset 1px -1px 1px 0px #fff9, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
+    --cbx-r-bg: radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0), linear-gradient(to bottom, #030 0%, #0a0 65%, #0d0 100%);
+    --cbx-r-color: #fff;
+    --cbx-r-border: 0px solid rgba(0,0,0,0);
+    --cbx-r-shadow: inset 1px -1px 1px 0px #fff8, inset -1px 2px 3px -1px #0002, -1px 1px 2px 0px #0005;
+
+    /* Choice components */
+    --checkbox-box-background:
+      linear-gradient(to bottom, rgb(255 255 255 / 0.84), rgb(255 255 255 / 0.9)),
+      var(--palette-primary);
+    --checkbox-box-background-checked:
+      radial-gradient(140% 75% at 30% 10%, #fff5, #fff4 47%, #fff0 55%, #fff0),
+      linear-gradient(to bottom, var(--palette-primary-900), var(--palette-primary) 65%, var(--palette-primary-400));
+    --checkbox-box-border: 0 solid transparent;
+    --checkbox-box-shadow:
+      inset 1px -1px 1px rgb(255 255 255 / 1),
+      inset -1px 2px 3px rgb(0 0 0 / 0.13),
+      -1px 1px 2px rgb(0 0 0 / 0.33);
+    --checkbox-symbol-color: var(--palette-contrast-light);
+
+    --toggle-button-background-checked:
+      radial-gradient(140% 75% at 30% 10%, #fff4, #fff5 47%, #fff0 55%, #fff0),
+      linear-gradient(to bottom, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 66%, var(--palette-primary-400) 100%);
+    --toggle-button-border-checked: 0 solid transparent;
+    --toggle-button-selected-inline-overlap: -1px;
+    --toggle-button-selected-z-index: 1;
+    --toggle-button-shadow-checked: -1px 1px 2px rgb(0 0 0 / 0.53);
+    --toggle-group-shadow: var(--button-shadow);
+    --toggle-inactive-shared-border-color: transparent;
+    --toggle-inactive-separator-background: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0.58),
+      rgb(0 0 0 / 0.18)
+    );
+    --toggle-inactive-separator-block-inset: 0.35rem;
+
+    /* Navigation components */
+    --tabline-background: var(--shiny-ui-gradient-2);
+    --tabline-padding-inline-start: 5px;
+    --tab-button-background: var(--shiny-ui-gradient);
+    --tab-button-background-active: var(--shiny-ui-gradient);
+    --tab-button-shadow: inset 0px -3px 2px -2px #0005, 0px 0px 3px 0px rgba(0,0,0,0.6);
+    --tab-button-shadow-active: 0px 0px 3px 0px rgba(0,0,0,0.6);
+    --tab-button-inactive-bottom-shadow: 0px 1px 3px 0px #000a;
+
+    /* Status and graphical components */
+    --progress-track-background: linear-gradient(0deg, var(--ui-dark-bg-color) 0%, #f0f0f0 100%);
+    --progress-value-background:
+      radial-gradient(100% 50% at 40% 10%, #fff0, #fff0 30%, #ffffff15 110%, #fff0 120%, #fff0 calc(120% + 1%)),
+      linear-gradient(15deg, #1e5799 0%, var(--palette-primary) 65%, var(--palette-primary) 65%, #7db9e8 100%);
+    --progress-value-shadow:
+      inset -1px 1px 3px 0 #0003,
+      inset 1px -1px 3px 0 #fff5,
+      inset -1px 1px 1px 1px #0006,
+      inset 1px -1px 1px 1px #fff5,
+      -1px 1px 3px 0 #0006;
+    --block-graph-block-border: none;
+    --block-graph-block-gloss-opacity: 1;
+    --block-graph-block-shadow:
+      inset -2px 2px 3px 0 #fff6,
+      inset 2px -2px 3px 0 #0005,
+      inset -10px 10px 28px 0 #0006,
+      inset 10px -10px 28px 0 #fff4,
+      -3px 3px 4px 0 #0006;
   }
 }