@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/compiled/themes/macos-classic/compact.css

@@ -244,6 +244,14 @@
   --radius-container: var(--border-radius-lg);
   --radius-pill: var(--border-radius-full);
 }
+@layer components {
+  :root .rui-input-group .rui-input {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
 :where(:root) {
   color-scheme: light;
 }
@@ -457,7 +465,8 @@
   --background-code: #171717;
   --on-background-code: #ffffff;
 }
-:root, :root[data-rui-theme='macos-classic'] {
+:root,
+:root[data-rui-theme='macos-classic'] {
   --font-sans: Charcoal, Geneva, 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
   --font-heading: Charcoal, Geneva, 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
   --font-mono: Monaco, Menlo, 'Courier New', monospace;
@@ -484,6 +493,17 @@
   --macos-classic-well: inset 1px 1px 0 var(--macos-classic-shadow), inset -1px -1px 0 var(--macos-classic-light);
   --macos-classic-tab-shape: polygon(13.7% 0, 86.3% 0, 100% 100%, 0 100%);
   --macos-classic-tab-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75.31 23.44' preserveAspectRatio='none'%3E%3Cpath d='M0,23.44 L10.32,0 H64.98 L75.31,23.44' fill='none' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
+  --macos-classic-scrollbar-thumb: #9b9bf9;
+  --macos-classic-scrollbar-highlight: #cdcdfc;
+  --macos-classic-scrollbar-shadow: #353594;
+  --macos-classic-scrollbar-edge: #555655;
+}
+:where(.dark),
+:root.dark[data-rui-theme='macos-classic'] {
+  --macos-classic-scrollbar-thumb: var(--macos-classic-selection);
+  --macos-classic-scrollbar-highlight: var(--macos-classic-blue-light);
+  --macos-classic-scrollbar-shadow: var(--macos-classic-blue);
+  --macos-classic-scrollbar-edge: var(--macos-classic-shadow);
 }
 @layer components {
   :root .rui-switch {
@@ -591,7 +611,8 @@
 	:root .rui-date-field__group,
 	:root .rui-date-range-picker__group,
 	:root .rui-input-group,
-	:root .rui-number-field__group {
+	:root .rui-number-field__group,
+	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])) {
     border-radius: var(--radius-none);
     border-color: var(--macos-classic-dark);
     background-color: var(--macos-classic-field);
@@ -746,8 +767,13 @@
     font-size: 0;
     box-shadow: var(--macos-classic-bevel);
   }
+  :root .rui-popover {
+    --rui-popover-radius: 0;
+    --rui-popover-surface: var(--macos-classic-surface);
+    --rui-popover-border-color: var(--macos-classic-dark);
+    --rui-popover-shadow: var(--macos-classic-bevel), 1px 1px 0 var(--macos-classic-dark), 3px 3px 0 rgb(0 0 0 / 0.25);
+  }
   :root .rui-dialog__surface,
-	:root .rui-popover-host,
 	:root .rui-hover-card__content,
 	:root .rui-calendar {
     border-radius: var(--radius-none);
@@ -806,7 +832,7 @@
     padding-inline: 1.125rem;
     clip-path: var(--macos-classic-tab-shape);
     border-radius: 0;
-    background-color: var(--macos-classic-mid);
+    background-color: var(--macos-classic-container);
     background-image: var(--macos-classic-tab-outline);
     background-position: 0 0;
     background-size: 100% 100%;
@@ -834,37 +860,206 @@
     box-shadow: none;
     padding: var(--rui-tabs-panel-padding);
   }
+  :root .rui-select__listbox .rui-listbox,
+	:root .rui-combobox__listbox .rui-listbox {
+    background-color: transparent;
+  }
+  :root .rui-listbox {
+    gap: 0;
+    padding: 1px;
+  }
+  :root .rui-listbox--bordered {
+    border-radius: var(--radius-none);
+    border-color: var(--macos-classic-dark);
+    background-color: var(--macos-classic-field);
+    color: var(--macos-classic-field-text);
+    box-shadow: none;
+  }
+  :root .rui-listbox__option,
+	:root .rui-menu-button__item,
+	:root .rui-menubar__item,
+	:root .rui-menubar__menu-item,
+	:root .rui-tree__node,
+	:root .rui-calendar__day {
+    border-radius: 0;
+    background-image: none;
+    transition: none;
+  }
+  :root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
+    --tw-ring-shadow: 0 0 #0000;
+  }
+  :root .rui-menu-button__item:is(:hover, :focus-visible):not([aria-disabled='true']),
+	:root .rui-menubar__menu-item:is(:hover, :focus-visible):not(:disabled):not([aria-disabled='true']),
+	:root .rui-menubar__menu-item[aria-expanded='true'],
+	:root .rui-menubar__item:is([aria-expanded='true'], :active):not(:disabled):not([aria-disabled='true']),
+	:root .rui-listbox__option[data-active]:not([aria-selected='true']):not([aria-disabled='true']) {
+    background-color: var(--macos-classic-selection);
+    color: var(--macos-classic-selection-text);
+    box-shadow: none;
+    outline: none;
+    --tw-ring-shadow: 0 0 #0000;
+  }
+  :root .rui-menubar {
+    border-radius: var(--radius-none);
+    gap: 0;
+    padding: 0 0.25rem;
+    border: 0;
+    border-bottom: 1px solid var(--macos-classic-dark);
+    background-color: var(--macos-classic-face);
+    box-shadow: inset 0 1px 0 var(--macos-classic-light);
+  }
+  :root .rui-menubar__item {
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+  }
+  :root .rui-menubar__item:hover:not(:disabled):not([aria-disabled='true']):not([aria-expanded='true']) {
+    background-color: transparent;
+  }
+  :root .rui-tooltip__content {
+    --rui-tooltip-radius: 0;
+    --rui-tooltip-surface: var(--macos-classic-field);
+    --rui-tooltip-color: var(--macos-classic-field-text);
+    --rui-tooltip-shadow: 0 0 0 1px var(--macos-classic-dark), 2px 2px 0 rgb(0 0 0 / 0.3);
+  }
+  :root .rui-tag {
+    border-radius: var(--radius-sm);
+    border-color: var(--macos-classic-dark);
+    background-color: var(--macos-classic-face);
+    background-image: none;
+    color: var(--macos-classic-text);
+    box-shadow: var(--macos-classic-bevel);
+  }
+  :root .rui-tag[aria-selected='true'] {
+    border-color: var(--macos-classic-dark);
+    background-color: var(--macos-classic-selection);
+    color: var(--macos-classic-selection-text);
+    box-shadow: none;
+  }
+  :root .rui-tag__remove {
+    border-radius: var(--radius-none);
+  }
+  :root .rui-tree {
+    border-radius: var(--radius-none);
+    border-color: var(--macos-classic-dark);
+    background-color: var(--macos-classic-field);
+    color: var(--macos-classic-field-text);
+    box-shadow: none;
+  }
+  :root .rui-tree ul {
+    border-left: 0;
+  }
+  :root .rui-tree__node {
+    color: var(--macos-classic-field-text);
+  }
+  :root .rui-tree__node:hover:not([aria-selected='true']) {
+    background-color: transparent;
+  }
+  :root .rui-disclosure__icon--chevron > * {
+    display: none;
+  }
+  :root .rui-disclosure__icon--chevron::before {
+    content: '';
+    border-block: 4px solid transparent;
+    border-inline-start: 6px solid var(--macos-classic-text);
+  }
+  :root .rui-disclosure__icon--chevron,
+	:root .rui-disclosure__trigger[aria-expanded='true'] .rui-disclosure__icon--chevron {
+    transition: none;
+    transform: none;
+  }
+  :root .rui-disclosure__trigger[aria-expanded='true'] .rui-disclosure__icon--chevron {
+    transform: rotate(90deg);
+  }
+  :root .rui-disclosure__trigger:hover {
+    background-color: transparent;
+  }
   :root .rui-listbox__option[aria-selected='true'],
 	:root .rui-menu-button__item[aria-checked='true'],
 	:root .rui-menubar__menu-item[aria-checked='true'],
 	:root .rui-tree__node[aria-selected='true'],
 	:root .rui-calendar__day[aria-selected='true'],
 	:root .rui-sidebar__menu-button--active,
+	:root .rui-sidebar__menu-button[aria-current='page'],
 	:root .rui-navigation-menu__link-list a[aria-current='page'] {
     background-color: var(--macos-classic-selection);
     color: var(--macos-classic-selection-text);
   }
-  :root .rui-table,
+  :root rui-table,
 	:root .rui-grid {
+    border-radius: 0;
+    border-color: var(--macos-classic-dark);
+    box-shadow: none;
+  }
+  :root .rui-table__cell,
+	:root .rui-table__selection-cell,
+	:root .rui-table__empty-state,
+	:root .rui-table__empty-state-spacer,
+	:root .rui-grid__cell {
+    border-color: var(--macos-classic-mid);
     background-color: var(--macos-classic-field);
     color: var(--macos-classic-field-text);
   }
-  :root .rui-table__header,
-	:root .rui-treegrid__row--header,
-	:root .rui-calendar__weekdays {
+  :root .rui-table__column,
+	:root .rui-grid__row:first-child .rui-grid__cell,
+	:root .rui-treegrid__row--header .rui-treegrid__cell {
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    border-right: 1px solid var(--macos-classic-shadow);
+    border-bottom: 1px solid var(--macos-classic-dark);
+    background-color: var(--macos-classic-face);
+    color: var(--macos-classic-text);
+    box-shadow: var(--macos-classic-bevel);
+  }
+  :root .rui-table__column .rui-table__sort {
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    color: var(--macos-classic-text);
+  }
+  :root .rui-calendar__weekdays {
     --tw-font-weight: var(--font-weight-normal, 400);
     font-weight: var(--font-weight-normal, 400);
     background-color: var(--macos-classic-face);
     box-shadow: var(--macos-classic-raised);
   }
-  :root .rui-table__row:nth-child(even),
-	:root .rui-grid__row:nth-child(even) {
-    background-color: var(--macos-classic-light);
-    background-image: linear-gradient(var(--macos-classic-container) 0 0);
-    background-blend-mode: soft-light;
+  :root .rui-treegrid {
+    border-radius: var(--radius-none);
+    border: 1px solid var(--macos-classic-dark);
+    background-color: var(--macos-classic-field);
+    color: var(--macos-classic-field-text);
+    box-shadow: none;
+    --rui-treegrid-indent: 0.875rem;
+  }
+  :root .rui-treegrid__cell {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding-inline: var(--spacing-2);
+    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
+    color: var(--macos-classic-field-text);
+  }
+  :root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
+    background-color: var(--macos-classic-container);
+  }
+  :root .rui-treegrid__cell[aria-selected='true'] {
+    background-color: var(--macos-classic-selection);
+    color: var(--macos-classic-selection-text);
+  }
+  :root .rui-treegrid__row[aria-expanded='false'] .rui-treegrid__cell:first-child::before,
+	:root .rui-treegrid__row[aria-expanded='true'] .rui-treegrid__cell:first-child::before {
+    width: 0;
+    height: 0;
+    margin-inline-end: 0.5rem;
+    border: 0;
+    border-block: 4px solid transparent;
+    border-inline-start: 6px solid currentColor;
+    transform: none;
+    transition: none;
+  }
+  :root .rui-treegrid__row[aria-expanded='true'] .rui-treegrid__cell:first-child::before {
+    transform: rotate(90deg);
   }
   :root .rui-alert,
-	:root .rui-toast__content {
+	:root .rui-toast {
     border-radius: var(--radius-none);
     color: var(--color-on-surface);
     border: 1px solid var(--macos-classic-dark);
@@ -872,6 +1067,27 @@
     box-shadow: var(--macos-classic-bevel),
 			1px 1px 0 var(--macos-classic-dark);
   }
+  :root .rui-toast {
+    background-image: none;
+  }
+  :root .rui-toast--info .rui-toast__icon {
+    color: var(--macos-classic-blue);
+  }
+  :root .rui-toast--success .rui-toast__icon {
+    color: var(--macos-classic-green);
+  }
+  :root .rui-toast--warning .rui-toast__icon {
+    color: var(--macos-classic-amber);
+  }
+  :root .rui-toast--error .rui-toast__icon {
+    color: var(--macos-classic-red);
+  }
+  :root .rui-toast__close {
+    border-color: var(--macos-classic-dark);
+    background-color: var(--macos-classic-face);
+    color: var(--macos-classic-text);
+    box-shadow: var(--macos-classic-bevel);
+  }
   :root .rui-alert--inline.rui-alert--dismissible {
     padding-inline-start: 2.5rem;
   }
@@ -903,19 +1119,35 @@
     color: var(--macos-classic-red);
   }
   :root .rui-badge,
-	:root .rui-chip,
-	:root .rui-pagination__link {
+	:root .rui-chip {
     border-radius: var(--radius-sm);
     color: var(--color-on-surface);
     border: 1px solid var(--macos-classic-dark);
     background-color: var(--macos-classic-face);
     box-shadow: var(--macos-classic-raised);
   }
+  :root .rui-pagination__link {
+    min-width: 0;
+  }
+  :root .rui-calendar {
+    --radius-control: 0;
+  }
   :root .rui-separator,
 	:root .rui-sidebar__separator {
     background-color: var(--macos-classic-shadow);
     box-shadow: 0 1px 0 var(--macos-classic-light);
   }
+  :root .rui-slider {
+    --rui-slider-track-size: 0.3125rem;
+  }
+  :root .rui-slider__thumb {
+    inline-size: 0.6875rem;
+    block-size: 1.125rem;
+  }
+  :root .rui-slider--vertical .rui-slider__thumb {
+    inline-size: 1.125rem;
+    block-size: 0.6875rem;
+  }
   :root .rui-slider__thumb,
 	:root .rui-number-field__stepper {
     border-radius: var(--radius-sm);
@@ -931,9 +1163,15 @@
     background-color: var(--macos-classic-field);
     box-shadow: var(--macos-classic-well);
   }
+  :root .rui-meter__track {
+    background-color: var(--macos-classic-container);
+  }
   :root .rui-meter__fill {
     border-radius: var(--radius-none);
     background-color: var(--macos-classic-selection);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45),
+			inset 0 -1px 0 rgb(0 0 0 / 0.3),
+			1px 0 0 var(--macos-classic-dark);
   }
   :root .rui-slider__range-fill {
     border-radius: var(--radius-none);
@@ -950,6 +1188,7 @@
 		:root .rui-date-range-picker__group,
 		:root .rui-input-group,
 		:root .rui-number-field__group,
+		:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
 		:root .rui-select__control,
 		:root .rui-checkbox__control,
 		:root .rui-radio__control {
@@ -968,6 +1207,206 @@
     }
   }
 }
+@supports (-moz-appearance: none) {
+  :root,
+	:root * {
+    scrollbar-width: auto;
+    scrollbar-color: var(--macos-classic-scrollbar-thumb) var(--macos-classic-mid);
+  }
+}
+:root::-webkit-scrollbar,
+:root *::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+:root::-webkit-scrollbar-button:end,
+:root *::-webkit-scrollbar-button:end {
+  display: block;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--macos-classic-dark);
+  background-color: var(--macos-classic-face);
+  box-shadow: inset 1px 1px 0 var(--macos-classic-light),
+		inset -1px -1px 0 var(--macos-classic-mid);
+}
+:root::-webkit-scrollbar-button:start,
+:root *::-webkit-scrollbar-button:start {
+  display: none;
+}
+:root::-webkit-scrollbar-button:end:vertical,
+:root *::-webkit-scrollbar-button:end:vertical {
+  border-left: 1px solid var(--macos-classic-dark);
+  border-right: 1px solid var(--macos-classic-dark);
+  border-bottom: 1px solid var(--macos-classic-dark);
+}
+:root::-webkit-scrollbar-button:end:vertical:decrement,
+:root *::-webkit-scrollbar-button:end:vertical:decrement {
+  background: linear-gradient(transparent 75%, var(--macos-classic-dark) 0) 50% / 8px 4px no-repeat,
+		linear-gradient(transparent 50%, var(--macos-classic-dark) 0) 50% / 6px 4px no-repeat,
+		linear-gradient(transparent 25%, var(--macos-classic-dark) 0) 50% / 4px 4px no-repeat,
+		linear-gradient(var(--macos-classic-dark) 50%, var(--macos-classic-dark) 0) 50% / 2px 4px no-repeat,
+		var(--macos-classic-face);
+}
+:root::-webkit-scrollbar-button:end:vertical:increment,
+:root *::-webkit-scrollbar-button:end:vertical:increment {
+  height: 15px;
+  border-bottom: 0;
+  background: linear-gradient(0deg, transparent 75%, var(--macos-classic-dark) 0) 50% / 8px 4px no-repeat,
+		linear-gradient(0deg, transparent 50%, var(--macos-classic-dark) 0) 50% / 6px 4px no-repeat,
+		linear-gradient(0deg, transparent 25%, var(--macos-classic-dark) 0) 50% / 4px 4px no-repeat,
+		linear-gradient(0deg, var(--macos-classic-dark) 50%, var(--macos-classic-dark) 0) 50% / 2px 4px no-repeat,
+		var(--macos-classic-face);
+}
+:root::-webkit-scrollbar-button:end:horizontal,
+:root *::-webkit-scrollbar-button:end:horizontal {
+  border-top: 1px solid var(--macos-classic-dark);
+  border-bottom: 1px solid var(--macos-classic-dark);
+  border-right: 1px solid var(--macos-classic-dark);
+}
+:root::-webkit-scrollbar-button:end:horizontal:decrement,
+:root *::-webkit-scrollbar-button:end:horizontal:decrement {
+  background: linear-gradient(90deg, transparent 75%, var(--macos-classic-dark) 0) 50% / 4px 8px no-repeat,
+		linear-gradient(90deg, transparent 50%, var(--macos-classic-dark) 0) 50% / 4px 6px no-repeat,
+		linear-gradient(90deg, transparent 25%, var(--macos-classic-dark) 0) 50% / 4px 4px no-repeat,
+		linear-gradient(90deg, var(--macos-classic-dark) 50%, var(--macos-classic-dark) 0) 50% / 4px 2px no-repeat,
+		var(--macos-classic-face);
+}
+:root::-webkit-scrollbar-button:end:horizontal:increment,
+:root *::-webkit-scrollbar-button:end:horizontal:increment {
+  width: 15px;
+  border-right: 0;
+  background: linear-gradient(270deg, transparent 75%, var(--macos-classic-dark) 0) 50% / 4px 8px no-repeat,
+		linear-gradient(270deg, transparent 50%, var(--macos-classic-dark) 0) 50% / 4px 6px no-repeat,
+		linear-gradient(270deg, transparent 25%, var(--macos-classic-dark) 0) 50% / 4px 4px no-repeat,
+		linear-gradient(270deg, var(--macos-classic-dark) 50%, var(--macos-classic-dark) 0) 50% / 4px 2px no-repeat,
+		var(--macos-classic-face);
+}
+:root::-webkit-scrollbar-track,
+:root *::-webkit-scrollbar-track {
+  background: radial-gradient(circle at 0.5px 0.5px, var(--macos-classic-shadow) 0.5px, transparent 0) 0 / 4px 2px repeat,
+		radial-gradient(circle at 2.5px 1.5px, var(--macos-classic-shadow) 0.5px, transparent 0) 0 / 4px 2px repeat,
+		var(--macos-classic-mid);
+}
+:root::-webkit-scrollbar-track:vertical,
+:root *::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid var(--macos-classic-dark);
+  border-right: 1px solid var(--macos-classic-dark);
+  box-shadow: inset 1px 1px 0 var(--macos-classic-shadow),
+		inset -1px 2px 0 var(--macos-classic-light),
+		inset 2px 0 0 var(--macos-classic-shadow),
+		inset -2px 0 0 var(--macos-classic-mid);
+}
+:root::-webkit-scrollbar-track:horizontal,
+:root *::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid var(--macos-classic-dark);
+  border-bottom: 1px solid var(--macos-classic-dark);
+  box-shadow: inset 1px 1px 0 var(--macos-classic-shadow),
+		inset 2px -1px 0 var(--macos-classic-light),
+		inset 0 2px 0 var(--macos-classic-shadow),
+		inset 0 -2px 0 var(--macos-classic-mid);
+}
+:root::-webkit-scrollbar-thumb,
+:root *::-webkit-scrollbar-thumb {
+  box-sizing: border-box;
+  width: 14px;
+  background-color: var(--macos-classic-scrollbar-thumb);
+  border: 1px solid var(--macos-classic-dark);
+  border-radius: 0;
+  box-shadow: inset 1px 1px 0 var(--macos-classic-scrollbar-highlight),
+		inset -1px -1px 0 var(--macos-classic-scrollbar-shadow);
+}
+:root::-webkit-scrollbar-thumb:vertical,
+:root *::-webkit-scrollbar-thumb:vertical {
+  border-left: 1px solid var(--macos-classic-dark);
+  border-right: 1px solid var(--macos-classic-dark);
+  border-top: 1px solid var(--macos-classic-scrollbar-edge);
+  background: linear-gradient(
+				transparent 12.5%,
+				var(--macos-classic-scrollbar-shadow) 0,
+				var(--macos-classic-scrollbar-shadow) 25%,
+				transparent 0,
+				transparent 37.5%,
+				var(--macos-classic-scrollbar-shadow) 0,
+				var(--macos-classic-scrollbar-shadow) 50%,
+				transparent 0,
+				transparent 62.5%,
+				var(--macos-classic-scrollbar-shadow) 0,
+				var(--macos-classic-scrollbar-shadow) 75%,
+				transparent 0,
+				transparent 87.5%,
+				var(--macos-classic-scrollbar-shadow) 0
+			)
+			50% / 7px 8px no-repeat,
+		linear-gradient(
+				var(--macos-classic-scrollbar-highlight) 12.5%,
+				transparent 0,
+				transparent 25%,
+				var(--macos-classic-scrollbar-highlight) 0,
+				var(--macos-classic-scrollbar-highlight) 37.5%,
+				transparent 0,
+				transparent 50%,
+				var(--macos-classic-scrollbar-highlight) 0,
+				var(--macos-classic-scrollbar-highlight) 62.5%,
+				transparent 0,
+				transparent 75%,
+				var(--macos-classic-scrollbar-highlight) 0,
+				var(--macos-classic-scrollbar-highlight) 87.5%,
+				transparent 0
+			)
+			49% / 7px 8px no-repeat,
+		var(--macos-classic-scrollbar-thumb);
+}
+:root::-webkit-scrollbar-thumb:horizontal,
+:root *::-webkit-scrollbar-thumb:horizontal {
+  border-top: 1px solid var(--macos-classic-dark);
+  border-bottom: 1px solid var(--macos-classic-dark);
+  border-left: 1px solid var(--macos-classic-scrollbar-edge);
+  background: linear-gradient(
+				90deg,
+				transparent 12.5%,
+				var(--macos-classic-scrollbar-shadow) 0,
+				var(--macos-classic-scrollbar-shadow) 25%,
+				transparent 0,
+				transparent 37.5%,
+				var(--macos-classic-scrollbar-shadow) 0,
+				var(--macos-classic-scrollbar-shadow) 50%,
+				transparent 0,
+				transparent 62.5%,
+				var(--macos-classic-scrollbar-shadow) 0,
+				var(--macos-classic-scrollbar-shadow) 75%,
+				transparent 0,
+				transparent 87.5%,
+				var(--macos-classic-scrollbar-shadow) 0
+			)
+			50% / 8px 7px no-repeat,
+		linear-gradient(
+				90deg,
+				var(--macos-classic-scrollbar-highlight) 12.5%,
+				transparent 0,
+				transparent 25%,
+				var(--macos-classic-scrollbar-highlight) 0,
+				var(--macos-classic-scrollbar-highlight) 37.5%,
+				transparent 0,
+				transparent 50%,
+				var(--macos-classic-scrollbar-highlight) 0,
+				var(--macos-classic-scrollbar-highlight) 62.5%,
+				transparent 0,
+				transparent 75%,
+				var(--macos-classic-scrollbar-highlight) 0,
+				var(--macos-classic-scrollbar-highlight) 87.5%,
+				transparent 0
+			)
+			center 49% / 8px 7px no-repeat,
+		var(--macos-classic-scrollbar-thumb);
+}
+:root::-webkit-scrollbar-corner,
+:root *::-webkit-scrollbar-corner {
+  border-top: 1px solid var(--macos-classic-dark);
+  border-left: 1px solid var(--macos-classic-dark);
+  box-shadow: inset 1px 1px 0 var(--macos-classic-light);
+  background: var(--macos-classic-container);
+}
 :root {
   --space-1: calc(0.125rem * var(--rui-density));
   --space-2: calc(0.25rem * var(--rui-density));