@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/Popover.css

@@ -0,0 +1,167 @@
+/* Popover - Mojave Theme */
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.PopoverTrigger {
+  display: var(--popover-trigger-display);
+  align-items: var(--popover-trigger-align-items);
+  justify-content: var(--popover-trigger-justify-content);
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.PopoverBackdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--popover-backdrop-background);
+  z-index: var(--popover-backdrop-z-index);
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.PopoverPositioner {
+  z-index: var(--popover-positioner-z-index);
+  outline: 0;
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.PopoverPopup {
+  position: relative;
+  min-width: var(--popover-popup-min-width);
+  max-width: var(--popover-popup-max-width);
+  padding: var(--popover-popup-padding);
+  background: var(--popover-popup-background);
+  border: var(--popover-popup-border-width) solid var(--popover-popup-border-color);
+  border-radius: var(--popover-popup-border-radius);
+  box-shadow: var(--popover-popup-shadow);
+  outline: none;
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--popover-popup-animation-duration) var(--popover-popup-animation-easing),
+              transform var(--popover-popup-animation-duration) var(--popover-popup-animation-easing);
+}
+
+.PopoverPopup[data-starting-style],
+.PopoverPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.PopoverTitle {
+  font-family: var(--popover-title-font-family);
+  font-size: var(--popover-title-font-size);
+  font-weight: var(--popover-title-font-weight);
+  color: var(--popover-title-color);
+  line-height: var(--popover-title-line-height);
+  letter-spacing: var(--popover-title-letter-spacing);
+  margin: 0 0 var(--popover-title-margin-bottom) 0;
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.PopoverDescription {
+  font-family: var(--popover-description-font-family);
+  font-size: var(--popover-description-font-size);
+  font-weight: var(--popover-description-font-weight);
+  color: var(--popover-description-color);
+  line-height: var(--popover-description-line-height);
+  letter-spacing: var(--popover-description-letter-spacing);
+  margin: 0;
+}
+
+/* ============================================
+   CLOSE BUTTON
+   ============================================ */
+
+.PopoverClose {
+  position: var(--popover-close-position);
+  top: var(--popover-close-top);
+  right: var(--popover-close-right);
+  width: var(--popover-close-width);
+  height: var(--popover-close-height);
+  padding: var(--popover-close-padding);
+  border: var(--popover-close-border);
+  border-radius: var(--popover-close-border-radius);
+  background: var(--popover-close-background);
+  color: var(--popover-close-color);
+  cursor: var(--popover-close-cursor);
+  transition: var(--popover-close-transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.PopoverClose:hover {
+  background: var(--popover-close-background-hover);
+  color: var(--popover-close-color-hover);
+}
+
+.PopoverClose:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -1px;
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.PopoverArrow {
+  display: flex;
+}
+
+.PopoverArrow[data-side='top'] {
+  bottom: -8px;
+  rotate: 180deg;
+}
+
+.PopoverArrow[data-side='bottom'] {
+  top: -8px;
+  rotate: 0deg;
+}
+
+.PopoverArrow[data-side='left'] {
+  right: -13px;
+  rotate: 90deg;
+}
+
+.PopoverArrow[data-side='right'] {
+  left: -13px;
+  rotate: -90deg;
+}
+
+.PopoverArrowFill {
+  fill: var(--popover-arrow-fill);
+}
+
+.PopoverArrowOuterStroke {
+  fill: var(--popover-arrow-stroke);
+}
+
+.PopoverArrowInnerStroke {
+  fill: var(--popover-arrow-stroke);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .PopoverPopup {
+    transition: none;
+  }
+}

package/dist/styles/components/PreviewCard.css

@@ -0,0 +1,148 @@
+/* Preview Card - Mojave Theme */
+
+/* ============================================
+   TRIGGER (link)
+   ============================================ */
+
+.PreviewCardTrigger {
+  color: var(--preview-card-trigger-color);
+  text-decoration: var(--preview-card-trigger-text-decoration);
+  text-decoration-style: var(--preview-card-trigger-text-decoration-style);
+  text-underline-offset: var(--preview-card-trigger-text-underline-offset);
+  cursor: var(--preview-card-trigger-cursor);
+}
+
+.PreviewCardTrigger:hover {
+  color: var(--preview-card-trigger-color-hover);
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.PreviewCardPositioner {
+  z-index: var(--preview-card-positioner-z-index);
+  outline: 0;
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.PreviewCardPopup {
+  position: relative;
+  min-width: var(--preview-card-popup-min-width);
+  max-width: var(--preview-card-popup-max-width);
+  padding: var(--preview-card-popup-padding);
+  background: var(--preview-card-popup-background);
+  border: var(--preview-card-popup-border-width) solid var(--preview-card-popup-border-color);
+  border-radius: var(--preview-card-popup-border-radius);
+  box-shadow: var(--preview-card-popup-shadow);
+  overflow: var(--preview-card-popup-overflow);
+  outline: none;
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--preview-card-popup-animation-duration) var(--preview-card-popup-animation-easing),
+              transform var(--preview-card-popup-animation-duration) var(--preview-card-popup-animation-easing);
+}
+
+.PreviewCardPopup[data-starting-style],
+.PreviewCardPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.95) translateY(-4px);
+}
+
+/* ============================================
+   IMAGE
+   ============================================ */
+
+.PreviewCardImage {
+  width: var(--preview-card-image-width);
+  height: var(--preview-card-image-height);
+  display: var(--preview-card-image-display);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.PreviewCardContent {
+  padding: var(--preview-card-content-padding);
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.PreviewCardTitle {
+  font-family: var(--preview-card-title-font-family);
+  font-size: var(--preview-card-title-font-size);
+  font-weight: var(--preview-card-title-font-weight);
+  color: var(--preview-card-title-color);
+  line-height: var(--preview-card-title-line-height);
+  letter-spacing: var(--preview-card-title-letter-spacing);
+  margin: 0 0 var(--preview-card-title-margin-bottom) 0;
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.PreviewCardDescription {
+  font-family: var(--preview-card-description-font-family);
+  font-size: var(--preview-card-description-font-size);
+  font-weight: var(--preview-card-description-font-weight);
+  color: var(--preview-card-description-color);
+  line-height: var(--preview-card-description-line-height);
+  letter-spacing: var(--preview-card-description-letter-spacing);
+  margin: 0;
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.PreviewCardArrow {
+  display: flex;
+}
+
+.PreviewCardArrow[data-side='top'] {
+  bottom: -8px;
+  rotate: 180deg;
+}
+
+.PreviewCardArrow[data-side='bottom'] {
+  top: -8px;
+  rotate: 0deg;
+}
+
+.PreviewCardArrow[data-side='left'] {
+  right: -13px;
+  rotate: 90deg;
+}
+
+.PreviewCardArrow[data-side='right'] {
+  left: -13px;
+  rotate: -90deg;
+}
+
+.PreviewCardArrowFill {
+  fill: var(--preview-card-arrow-fill);
+}
+
+.PreviewCardArrowOuterStroke {
+  fill: var(--preview-card-arrow-stroke);
+}
+
+.PreviewCardArrowInnerStroke {
+  fill: var(--preview-card-arrow-stroke);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .PreviewCardPopup {
+    transition: none;
+  }
+}

package/dist/styles/components/Progress.css

@@ -0,0 +1,130 @@
+/* Progress - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.ProgressRoot {
+  display: var(--progress-root-display);
+  flex-direction: var(--progress-root-flex-direction);
+  gap: var(--progress-root-gap);
+  width: var(--progress-root-width);
+}
+
+/* ============================================
+   HEADER (label + value container)
+   ============================================ */
+
+.ProgressHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ProgressLabel {
+  font-family: var(--progress-label-font-family);
+  font-size: var(--progress-label-font-size);
+  font-weight: var(--progress-label-font-weight);
+  line-height: var(--progress-label-line-height);
+  letter-spacing: var(--progress-label-letter-spacing);
+  color: var(--progress-label-color);
+}
+
+/* ============================================
+   VALUE (percentage display)
+   ============================================ */
+
+.ProgressValue {
+  font-family: var(--progress-value-font-family);
+  font-size: var(--progress-value-font-size);
+  font-weight: var(--progress-value-font-weight);
+  line-height: var(--progress-value-line-height);
+  letter-spacing: var(--progress-value-letter-spacing);
+  color: var(--progress-value-color);
+}
+
+/* ============================================
+   TRACK
+   ============================================ */
+
+.ProgressTrack {
+  position: relative;
+  height: var(--progress-track-height);
+  background: var(--progress-track-background);
+  border-radius: var(--progress-track-border-radius);
+  overflow: var(--progress-track-overflow);
+}
+
+/* ============================================
+   INDICATOR
+   ============================================ */
+
+.ProgressIndicator {
+  height: 100%;
+  background: var(--progress-indicator-background);
+  border-radius: var(--progress-indicator-border-radius);
+  transition: var(--progress-indicator-transition);
+}
+
+/* Indeterminate state */
+.ProgressRoot[data-state='indeterminate'] .ProgressIndicator {
+  animation: progressIndeterminate var(--progress-indicator-indeterminate-animation-duration) ease-in-out infinite;
+}
+
+@keyframes progressIndeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.ProgressRoot[data-size='sm'] .ProgressTrack {
+  height: var(--progress-track-height-sm);
+}
+
+.ProgressRoot[data-size='lg'] .ProgressTrack {
+  height: var(--progress-track-height-lg);
+}
+
+/* ============================================
+   COLOR VARIANTS
+   ============================================ */
+
+.ProgressRoot[data-variant='success'] .ProgressIndicator {
+  background: var(--progress-indicator-success);
+}
+
+.ProgressRoot[data-variant='warning'] .ProgressIndicator {
+  background: var(--progress-indicator-warning);
+}
+
+.ProgressRoot[data-variant='error'] .ProgressIndicator {
+  background: var(--progress-indicator-error);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ProgressIndicator {
+    transition: none;
+  }
+  
+  .ProgressRoot[data-state='indeterminate'] .ProgressIndicator {
+    animation: none;
+  }
+}

package/dist/styles/components/Radio.css

@@ -0,0 +1,178 @@
+/* Radio - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER (label wrapper)
+   ============================================ */
+
+.RadioRoot {
+  display: var(--radio-root-display);
+  align-items: var(--radio-root-align-items);
+  gap: var(--radio-root-gap);
+  cursor: var(--radio-label-cursor);
+}
+
+.RadioRoot[data-disabled] {
+  cursor: var(--radio-button-cursor-disabled);
+}
+
+/* ============================================
+   RADIO BUTTON (Radio.Root element)
+   ============================================ */
+
+.RadioButton {
+  box-sizing: border-box;
+  display: flex;
+  width: var(--radio-button-size);
+  height: var(--radio-button-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radio-button-border-radius);
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: var(--radio-button-transition);
+}
+
+.RadioButton[data-unchecked] {
+  border: var(--radio-button-border-width) solid var(--radio-button-border-color);
+  background-color: var(--radio-button-bg);
+}
+
+.RadioRoot:hover .RadioButton[data-unchecked]:not([disabled]) {
+  border-color: var(--radio-button-border-color-hover);
+}
+
+.RadioButton[data-checked] {
+  background-color: var(--radio-button-bg-checked);
+  border: var(--radio-button-border-width) solid var(--radio-button-border-color-checked);
+}
+
+.RadioButton:focus-visible {
+  outline: 2px solid var(--radio-button-border-color-checked);
+  outline-offset: 2px;
+  box-shadow: var(--radio-button-shadow-focus);
+}
+
+.RadioButton[disabled] {
+  opacity: var(--radio-button-opacity-disabled);
+  cursor: var(--radio-button-cursor-disabled);
+}
+
+/* ============================================
+   RADIO INDICATOR (inner dot)
+   ============================================ */
+
+.RadioIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.RadioIndicator[data-unchecked] {
+  display: none;
+}
+
+.RadioIndicator::before {
+  content: '';
+  border-radius: var(--radio-indicator-border-radius);
+  width: var(--radio-indicator-size);
+  height: var(--radio-indicator-size);
+  background-color: var(--radio-indicator-color);
+  animation: radioScale 0.15s ease-out;
+}
+
+@keyframes radioScale {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.RadioLabel {
+  font-family: var(--radio-label-font-family);
+  font-size: var(--radio-label-font-size);
+  font-weight: var(--radio-label-font-weight);
+  line-height: var(--radio-label-line-height);
+  letter-spacing: var(--radio-label-letter-spacing);
+  color: var(--radio-label-color);
+  user-select: none;
+}
+
+.RadioRoot[data-disabled] .RadioLabel {
+  color: var(--radio-label-color-disabled);
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.RadioGroup {
+  display: var(--radio-group-display);
+  flex-direction: var(--radio-group-flex-direction);
+  gap: var(--radio-group-gap);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.RadioRoot[data-size='sm'] .RadioButton {
+  width: var(--radio-button-size-sm);
+  height: var(--radio-button-size-sm);
+}
+
+.RadioRoot[data-size='sm'] .RadioIndicator::before {
+  width: var(--radio-indicator-size-sm);
+  height: var(--radio-indicator-size-sm);
+}
+
+.RadioRoot[data-size='sm'] .RadioLabel {
+  font-family: var(--radio-label-font-family-sm);
+  font-size: var(--radio-label-font-size-sm);
+  font-weight: var(--radio-label-font-weight-sm);
+  line-height: var(--radio-label-line-height-sm);
+  letter-spacing: var(--radio-label-letter-spacing-sm);
+}
+
+.RadioRoot[data-size='lg'] .RadioButton {
+  width: var(--radio-button-size-lg);
+  height: var(--radio-button-size-lg);
+}
+
+.RadioRoot[data-size='lg'] .RadioIndicator::before {
+  width: var(--radio-indicator-size-lg);
+  height: var(--radio-indicator-size-lg);
+}
+
+.RadioRoot[data-size='lg'] .RadioLabel {
+  font-family: var(--radio-label-font-family-lg);
+  font-size: var(--radio-label-font-size-lg);
+  font-weight: var(--radio-label-font-weight-lg);
+  line-height: var(--radio-label-line-height-lg);
+  letter-spacing: var(--radio-label-letter-spacing-lg);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .RadioButton {
+    transition: none;
+  }
+  
+  .RadioIndicator::before {
+    animation: none;
+  }
+}