@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/ScrollArea.css

@@ -0,0 +1,103 @@
+/* Scroll Area - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.ScrollAreaRoot {
+  position: relative;
+  overflow: hidden;
+}
+
+/* ============================================
+   VIEWPORT
+   ============================================ */
+
+.ScrollAreaViewport {
+  width: var(--scroll-area-viewport-width);
+  height: var(--scroll-area-viewport-height);
+  overflow: var(--scroll-area-viewport-overflow);
+}
+
+/* ============================================
+   SCROLLBAR
+   ============================================ */
+
+.ScrollAreaScrollbar {
+  display: flex;
+  user-select: none;
+  touch-action: none;
+  padding: var(--scroll-area-scrollbar-padding);
+  background: var(--scroll-area-scrollbar-background);
+  transition: var(--scroll-area-scrollbar-transition);
+}
+
+.ScrollAreaScrollbar:hover {
+  background: var(--scroll-area-scrollbar-background-hover);
+}
+
+/* Vertical scrollbar */
+.ScrollAreaScrollbar[data-orientation='vertical'] {
+  width: var(--scroll-area-scrollbar-width);
+  flex-direction: column;
+}
+
+/* Horizontal scrollbar */
+.ScrollAreaScrollbar[data-orientation='horizontal'] {
+  height: var(--scroll-area-scrollbar-height);
+  flex-direction: row;
+}
+
+/* ============================================
+   THUMB
+   ============================================ */
+
+.ScrollAreaThumb {
+  flex: 1;
+  background: var(--scroll-area-thumb-background);
+  border-radius: var(--scroll-area-thumb-border-radius);
+  position: relative;
+  transition: var(--scroll-area-thumb-transition);
+  cursor: pointer;
+}
+
+.ScrollAreaThumb:hover {
+  background: var(--scroll-area-thumb-background-hover);
+}
+
+.ScrollAreaThumb:active,
+.ScrollAreaThumb[data-state='dragging'] {
+  background: var(--scroll-area-thumb-background-active);
+}
+
+/* Prevent thumb from being too small */
+.ScrollAreaThumb::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+/* ============================================
+   CORNER
+   ============================================ */
+
+.ScrollAreaCorner {
+  background: var(--scroll-area-corner-background);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ScrollAreaScrollbar,
+  .ScrollAreaThumb {
+    transition: none;
+  }
+}

package/dist/styles/components/Select.css

@@ -0,0 +1,297 @@
+/* Select - Mojave Theme */
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.SelectTrigger {
+  display: var(--select-trigger-display);
+  align-items: var(--select-trigger-align-items);
+  justify-content: var(--select-trigger-justify-content);
+  width: var(--select-trigger-width);
+  height: var(--select-trigger-height);
+  padding-block: var(--select-trigger-padding-block);
+  padding-inline: var(--select-trigger-padding-inline);
+  font-family: inherit;
+  font-size: var(--select-trigger-font-size);
+  font-weight: var(--select-trigger-font-weight);
+  line-height: var(--select-trigger-line-height);
+  color: var(--select-trigger-color);
+  background: var(--select-trigger-background);
+  border: var(--select-trigger-border-width) solid var(--select-trigger-border-color);
+  border-radius: var(--select-trigger-border-radius);
+  transition: var(--select-trigger-transition);
+  cursor: var(--select-trigger-cursor);
+  outline: none;
+  gap: var(--space-2);
+}
+
+.SelectTrigger:hover:not(:disabled) {
+  border-color: var(--select-trigger-border-color-hover);
+}
+
+.SelectTrigger:focus-visible {
+  border-color: var(--select-trigger-border-color-focus);
+  box-shadow: var(--select-trigger-shadow-focus);
+}
+
+.SelectTrigger:disabled {
+  background: var(--select-trigger-background-disabled);
+  color: var(--select-trigger-color-disabled);
+  cursor: var(--select-trigger-cursor-disabled);
+}
+
+/* ============================================
+   VALUE
+   ============================================ */
+
+.SelectValue {
+  flex: 1;
+  text-align: left;
+  color: var(--select-value-color);
+}
+
+.SelectValue:empty::before {
+  content: attr(data-placeholder);
+  color: var(--select-value-color-placeholder);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.SelectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--select-icon-size);
+  height: var(--select-icon-size);
+  color: var(--select-icon-color);
+  flex-shrink: 0;
+  transition: var(--select-icon-transition);
+}
+
+.SelectTrigger[aria-expanded='true'] .SelectIcon {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.SelectBackdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--select-backdrop-background);
+  z-index: var(--select-backdrop-z-index);
+  animation: fadeIn var(--select-popup-animation-duration) var(--select-popup-animation-easing);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.SelectPositioner {
+  z-index: var(--select-positioner-z-index);
+  outline: 0;
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.SelectPopup {
+  box-sizing: border-box;
+  background: var(--select-popup-background);
+  border: var(--select-popup-border-width) solid var(--select-popup-border-color);
+  border-radius: var(--select-popup-border-radius);
+  box-shadow: var(--select-popup-box-shadow);
+  padding: var(--select-popup-padding);
+  width: var(--anchor-width);
+  max-width: var(--available-width);
+  animation: slideDown var(--select-popup-animation-duration) var(--select-popup-animation-easing);
+  outline: 0;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.SelectList {
+  max-height: var(--select-list-max-height);
+  overflow: var(--select-list-overflow);
+  outline: 0;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.SelectItem {
+  display: var(--select-item-display);
+  align-items: var(--select-item-align-items);
+  gap: var(--select-item-gap);
+  padding-block: var(--select-item-padding-block);
+  padding-inline: var(--select-item-padding-inline);
+  font-size: var(--select-item-font-size);
+  color: var(--select-item-color);
+  cursor: var(--select-item-cursor);
+  border-radius: var(--select-item-border-radius);
+  transition: var(--select-item-transition);
+  outline: none;
+  user-select: none;
+}
+
+.SelectItem:hover:not([data-disabled]) {
+  background: var(--select-item-background-hover);
+  color: var(--select-item-color-hover);
+}
+
+.SelectItem[data-selected] {
+  background: var(--select-item-background-selected);
+  color: var(--select-item-color-selected);
+}
+
+.SelectItem[data-highlighted] {
+  background: var(--select-item-background-highlighted);
+}
+
+.SelectItem[data-disabled] {
+  color: var(--select-item-color-disabled);
+  cursor: var(--select-item-cursor-disabled);
+  opacity: 0.5;
+}
+
+/* ============================================
+   ITEM TEXT
+   ============================================ */
+
+.SelectItemText {
+  flex: 1;
+}
+
+/* ============================================
+   ITEM INDICATOR
+   ============================================ */
+
+.SelectItemIndicator {
+  display: var(--select-item-indicator-display);
+  align-items: var(--select-item-indicator-align-items);
+  justify-content: var(--select-item-indicator-justify-content);
+  width: var(--select-item-indicator-width);
+  height: var(--select-item-indicator-height);
+  color: var(--select-item-indicator-color);
+}
+
+.SelectItemIndicatorIcon {
+  font-size: var(--select-item-indicator-width);
+  line-height: 1;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.SelectGroup {
+  display: var(--select-group-display);
+  flex-direction: var(--select-group-flex-direction);
+  gap: var(--select-group-gap);
+}
+
+.SelectGroupLabel {
+  padding-block-start: var(--select-group-label-padding-block-start);
+  padding-block-end: var(--select-group-label-padding-block-end);
+  padding-inline: var(--select-group-label-padding-inline);
+  font-size: var(--select-group-label-font-size);
+  font-weight: var(--select-group-label-font-weight);
+  color: var(--select-group-label-color);
+  text-transform: var(--select-group-label-text-transform);
+  letter-spacing: var(--select-group-label-letter-spacing);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.SelectSeparator {
+  height: var(--select-separator-height);
+  background: var(--select-separator-background);
+  margin-block: var(--select-separator-margin-block);
+  border: none;
+}
+
+/* ============================================
+   SCROLL ARROWS
+   ============================================ */
+
+.SelectScrollArrow {
+  display: var(--select-scroll-arrow-display);
+  align-items: var(--select-scroll-arrow-align-items);
+  justify-content: var(--select-scroll-arrow-justify-content);
+  height: var(--select-scroll-arrow-height);
+  color: var(--select-scroll-arrow-color);
+  background: var(--select-scroll-arrow-background);
+  cursor: var(--select-scroll-arrow-cursor);
+}
+
+.SelectScrollArrow:hover {
+  background: var(--select-scroll-arrow-background-hover);
+}
+
+.SelectScrollArrowIcon {
+  width: 12px;
+  height: 12px;
+}
+
+/* ============================================
+   ARROW (popup pointer)
+   ============================================ */
+
+.SelectArrow {
+  width: var(--select-arrow-width);
+  height: var(--select-arrow-height);
+}
+
+.SelectArrowFill {
+  fill: var(--select-arrow-fill);
+}
+
+.SelectArrowStroke {
+  stroke: var(--select-arrow-stroke);
+  stroke-width: var(--select-arrow-stroke-width);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .SelectTrigger,
+  .SelectIcon,
+  .SelectItem,
+  .SelectPopup,
+  .SelectBackdrop {
+    animation: none;
+    transition: none;
+  }
+}

package/dist/styles/components/Separator.css

@@ -0,0 +1,34 @@
+/* Separator - Mojave Theme */
+
+/* ============================================
+   BASE SEPARATOR
+   ============================================ */
+
+.Separator {
+  border: none;
+  background: var(--separator-background);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   HORIZONTAL (default)
+   ============================================ */
+
+.Separator[data-orientation='horizontal'],
+.Separator:not([data-orientation]) {
+  width: var(--separator-width);
+  height: var(--separator-height);
+  margin-block: var(--separator-margin-block);
+  margin-inline: var(--separator-margin-inline);
+}
+
+/* ============================================
+   VERTICAL
+   ============================================ */
+
+.Separator[data-orientation='vertical'] {
+  width: var(--separator-vertical-width);
+  height: var(--separator-vertical-height);
+  margin-block: var(--separator-vertical-margin-block);
+  margin-inline: var(--separator-vertical-margin-inline);
+}

package/dist/styles/components/Slider.css

@@ -0,0 +1,163 @@
+/* Slider - Mojave Theme */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.SliderRoot {
+  display: var(--slider-root-display);
+  flex-direction: var(--slider-root-flex-direction);
+  gap: var(--slider-root-gap);
+  width: var(--slider-root-width);
+}
+
+/* ============================================
+   VALUE DISPLAY
+   ============================================ */
+
+.SliderValue {
+  font-family: var(--slider-value-font-family);
+  font-size: var(--slider-value-font-size);
+  font-weight: var(--slider-value-font-weight);
+  line-height: var(--slider-value-line-height);
+  letter-spacing: var(--slider-value-letter-spacing);
+  color: var(--slider-value-color);
+}
+
+/* ============================================
+   CONTROL
+   ============================================ */
+
+.SliderControl {
+  box-sizing: border-box;
+  display: var(--slider-control-display);
+  align-items: var(--slider-control-align-items);
+  position: var(--slider-control-position);
+  touch-action: var(--slider-control-touch-action);
+  cursor: var(--slider-control-cursor);
+  width: 100%;
+  padding-block: 0.75rem;
+  user-select: none;
+}
+
+.SliderControl[data-disabled] {
+  cursor: var(--slider-control-cursor-disabled);
+  opacity: var(--slider-control-opacity-disabled);
+}
+
+/* ============================================
+   TRACK
+   ============================================ */
+
+.SliderTrack {
+  width: var(--slider-track-width);
+  height: var(--slider-track-height);
+  background: var(--slider-track-background);
+  border-radius: var(--slider-track-border-radius);
+  position: var(--slider-track-position);
+  user-select: none;
+}
+
+.SliderControl[data-orientation='vertical'] .SliderTrack {
+  width: var(--slider-vertical-track-width);
+  height: var(--slider-vertical-track-height);
+}
+
+/* ============================================
+   INDICATOR
+   ============================================ */
+
+.SliderIndicator {
+  background: var(--slider-indicator-background);
+  border-radius: var(--slider-indicator-border-radius);
+  position: var(--slider-indicator-position);
+  height: var(--slider-indicator-height);
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+
+/* ============================================
+   THUMB
+   ============================================ */
+
+.SliderThumb {
+  width: var(--slider-thumb-width);
+  height: var(--slider-thumb-height);
+  background: var(--slider-thumb-background);
+  border: var(--slider-thumb-border);
+  border-radius: var(--theme-radius-pill);
+  cursor: var(--slider-thumb-cursor);
+  transition: var(--slider-thumb-transition);
+  outline: none;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+.SliderControl[data-orientation='vertical'] .SliderThumb {
+  /* Vertical orientation handled by Base UI */
+}
+
+@media (hover: hover) {
+  .SliderThumb:hover:not([data-disabled]) {
+    box-shadow: var(--slider-thumb-box-shadow-hover);
+  }
+}
+
+.SliderThumb:has(:focus-visible) {
+  box-shadow: var(--slider-thumb-box-shadow-focus);
+  outline: var(--slider-thumb-outline-focus);
+  outline-offset: var(--slider-thumb-outline-offset-focus);
+}
+
+.SliderThumb[data-dragging] {
+  cursor: var(--slider-thumb-cursor-active);
+  box-shadow: var(--slider-thumb-box-shadow-active);
+}
+
+.SliderThumb[data-disabled] {
+  cursor: var(--slider-thumb-cursor-disabled);
+  background: var(--slider-thumb-background-disabled);
+  border: var(--slider-thumb-border-disabled);
+}
+
+/* ============================================
+   MARKS
+   ============================================ */
+
+.SliderMark {
+  width: var(--slider-mark-width);
+  height: var(--slider-mark-height);
+  background: var(--slider-mark-background);
+  border-radius: var(--theme-radius-pill);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.SliderControl[data-orientation='vertical'] .SliderMark {
+  width: var(--slider-mark-height);
+  height: var(--slider-mark-width);
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+}
+
+/* ============================================
+   VERTICAL ORIENTATION
+   ============================================ */
+
+.SliderControl[data-orientation='vertical'] {
+  height: var(--slider-vertical-control-height);
+  width: var(--slider-vertical-control-width);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .SliderThumb {
+    transition: none;
+  }
+}