@sylwellsoftware/fray 0.6.0 → 1.0.0

package/themes/shiny/theme.css

@@ -1,504 +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: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      --font-size: 0.875rem;
-      --line-height: 1.25;
-      --control-min-height: 2rem;
-      --space-xs: 0.25rem;
-      --space-sm: 0.5rem;
-      --space-md: 1rem;
-      --space-lg: 1.5rem;
-      --radius-sm: 0.2rem;
-      --radius-md: 0.35rem;
-      --radius-lg: 0.55rem;
-      --motion-fast: 120ms;
-
-      --shiny-primary-gradient: linear-gradient(to bottom, var(--palette-primary-300), var(--palette-primary) 55%, var(--palette-primary-700));
-      --shiny-surface-gradient: linear-gradient(to bottom, var(--palette-light), var(--palette-neutral-100) 62%, var(--palette-neutral-200));
-      --shiny-highlight: radial-gradient(145% 90% at 35% 0%, color-mix(in oklch, var(--palette-light) 62%, transparent), transparent 58%);
-
-      --ui-background: var(--palette-neutral-50);
-      --ui-color: var(--palette-neutral-950);
-      --ui-border: 1px solid var(--palette-neutral-300);
-      --ui-shadow: 0 2px 6px color-mix(in oklch, var(--palette-dark) 38%, 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(--palette-neutral-950);
-      --panel-border: 1px solid var(--palette-neutral-300);
-      --panel-shadow: 0 2px 8px color-mix(in oklch, var(--palette-dark) 34%, transparent);
-      --panel-radius: var(--radius-md);
-      --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: var(--shiny-primary-gradient);
-      --header-color: var(--palette-contrast-light);
-      --header-border: 0 solid transparent;
-      --header-shadow: 0 2px 4px color-mix(in oklch, var(--palette-dark) 42%, transparent);
-      --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(--header-color);
-      --dialog-header-background: var(--section-header-background);
-      --dialog-header-color: var(--section-header-color);
-
-      --button-background: var(--shiny-surface-gradient);
-      --button-background-hover: linear-gradient(to bottom, var(--palette-primary-50), var(--palette-primary-100));
-      --button-background-active: var(--shiny-primary-gradient);
-      --button-background-disabled: var(--palette-neutral-200);
-      --button-color: var(--palette-neutral-950);
-      --button-border: 1px solid var(--palette-neutral-500);
-      --button-shadow: 0 1px 2px color-mix(in oklch, var(--palette-dark) 48%, transparent), inset 0 1px 0 color-mix(in oklch, var(--palette-light) 72%, transparent);
-      --button-shadow-active: inset 0 2px 3px color-mix(in oklch, var(--palette-dark) 45%, 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(--palette-neutral-950);
-      --input-border: 1px solid var(--palette-neutral-500);
-      --input-shadow: none;
-      --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: var(--input-border);
-      --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(--palette-neutral-950);
-      --toolbar-border: 0 solid transparent;
-      --toolbar-shadow: none;
-      --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-md);
-      --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):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, 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, 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([role="checkbox"][aria-checked="true"] .inputshell) {
-      color: var(--checkbox-symbol-color);
-      background: var(--checkbox-box-background-checked);
-    }
-
-    :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);
-      box-shadow: var(--header-shadow);
-    }
-
-    :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: var(--colored-base);
-      border-color: color-mix(in oklch, var(--colored-dark) 72%, currentColor);
-    }
-
-    :where(.coloredinner) {
-      color: var(--colored-contrast);
-      background: var(--colored-base);
-    }
-
-    :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;
-    }
-    :where([role="tab"][aria-selected="true"]) {
-      color: var(--button-color);
-      background: var(--tab-button-background-active);
-    }
-    :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 {
-      background: var(--row-hover-background);
-    }
-
-    :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(button, .buttonlike, [role="tab"], [role="radio"], [role="checkbox"]) {
-      position: relative;
-      isolation: isolate;
-      overflow: hidden;
-      transition: filter var(--motion-fast), transform var(--motion-fast);
-    }
-
-    :where(.coloredlike, .coloredshell) {
-      background: linear-gradient(135deg, var(--colored-light), var(--colored-base) 55%, var(--colored-dark));
-    }
-
-    :where(.coloredinner) {
-      background: color-mix(in oklch, var(--colored-dark) 30%, transparent);
-    }
-
-    :where(button, .buttonlike, [role="tab"], [role="radio"], [role="checkbox"])::before,
-    :where(header, th, .headerlike)::after,
-    :where(.inputshell)::before {
-      content: "";
-      position: absolute;
-      inset: 1px;
-      border-radius: inherit;
-      background: var(--shiny-highlight);
-      pointer-events: none;
-    }
-
-    :where(button, .buttonlike, [role="tab"], [role="radio"], [role="checkbox"])::before {
-      z-index: -1;
-    }
-
-    :where(header, .headerlike) {
-      position: relative;
-      isolation: isolate;
-      overflow: clip;
-    }
-
-    :where(.inputshell) {
-      position: relative;
-      isolation: isolate;
-      overflow: hidden;
-    }
-
-    :where(header, th, .headerlike)::after {
-      inset: 0;
-      z-index: -1;
-      border: 1px solid color-mix(in oklch, var(--palette-light) 22%, transparent);
-    }
-
-    :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;
   }
 }