@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/Switch.css

@@ -0,0 +1,197 @@
+/* Switch - Mojave Theme */
+
+/* ============================================
+   CONTAINER
+   ============================================ */
+
+.SwitchContainer {
+  display: var(--switch-root-display);
+  align-items: var(--switch-root-align-items);
+  gap: var(--switch-root-gap);
+  user-select: var(--switch-root-user-select);
+}
+
+.SwitchContainer[data-disabled] {
+  opacity: var(--switch-root-opacity-disabled);
+}
+
+/* ============================================
+   ROOT (Switch.Root - the track)
+   ============================================ */
+
+.SwitchRoot {
+  position: var(--switch-track-position);
+  display: var(--switch-track-display);
+  align-items: var(--switch-track-align-items);
+  appearance: none;
+  border: var(--switch-track-border);
+  margin: 0;
+  padding: var(--switch-track-padding);
+  width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  border-radius: var(--switch-track-border-radius);
+  background-color: var(--switch-track-background);
+  cursor: var(--switch-track-cursor);
+  flex-shrink: var(--switch-track-flex-shrink);
+  transition: var(--switch-track-transition);
+  outline: none;
+}
+
+/* Track text (on/off) */
+.SwitchRoot::before {
+  content: 'off';
+  position: var(--switch-track-text-position);
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--switch-track-text-off-right);
+  font-family: var(--switch-track-text-font-family);
+  font-size: var(--switch-track-text-font-size);
+  font-weight: var(--switch-track-text-font-weight);
+  line-height: var(--switch-track-text-line-height);
+  color: var(--switch-track-text-color);
+  text-transform: var(--switch-track-text-text-transform);
+  letter-spacing: var(--switch-track-text-letter-spacing);
+  transition: var(--switch-track-text-transition);
+  pointer-events: var(--switch-track-text-pointer-events);
+}
+
+.SwitchRoot[data-checked] {
+  background-color: var(--switch-track-background-checked);
+}
+
+.SwitchRoot[data-checked]::before {
+  content: 'on';
+  left: var(--switch-track-text-on-left);
+  right: auto;
+  color: var(--switch-track-text-color-checked);
+}
+
+.SwitchRoot:hover:not([data-disabled]) {
+  background-color: var(--switch-track-background-hover);
+}
+
+.SwitchRoot[data-checked]:hover:not([data-disabled]) {
+  background-color: var(--switch-track-background-checked-hover);
+}
+
+.SwitchRoot:focus-visible {
+  box-shadow: var(--switch-track-box-shadow-focus);
+  border-color: var(--switch-track-border-color-focus);
+}
+
+.SwitchRoot[data-disabled] {
+  background-color: var(--switch-track-background-disabled);
+  cursor: var(--switch-track-cursor-disabled);
+}
+
+/* ============================================
+   THUMB (Switch.Thumb - the moving circle)
+   ============================================ */
+
+.SwitchThumb {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  border-radius: var(--switch-thumb-border-radius);
+  background-color: var(--switch-thumb-background);
+  box-shadow: var(--switch-thumb-box-shadow);
+  transition: var(--switch-thumb-transition);
+}
+
+.SwitchThumb[data-checked] {
+  translate: var(--switch-thumb-transform-checked);
+}
+
+.SwitchRoot[data-disabled] .SwitchThumb {
+  background-color: var(--switch-thumb-background-disabled);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.SwitchLabel {
+  font-family: var(--switch-label-font-family);
+  font-size: var(--switch-label-font-size);
+  font-weight: var(--switch-label-font-weight);
+  line-height: var(--switch-label-line-height);
+  letter-spacing: var(--switch-label-letter-spacing);
+  color: var(--switch-label-color);
+  cursor: var(--switch-label-cursor);
+}
+
+.SwitchContainer[data-disabled] .SwitchLabel {
+  cursor: var(--switch-label-cursor-disabled);
+  opacity: var(--switch-label-opacity-disabled);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+/* Small */
+.SwitchContainer[data-size="sm"] .SwitchRoot {
+  width: var(--switch-track-width-sm);
+  height: var(--switch-track-height-sm);
+  padding: var(--switch-track-padding-sm);
+}
+
+.SwitchContainer[data-size="sm"] .SwitchRoot::before {
+  font-size: var(--switch-track-text-font-size-sm);
+  right: var(--switch-track-text-off-right-sm);
+}
+
+.SwitchContainer[data-size="sm"] .SwitchRoot[data-checked]::before {
+  left: var(--switch-track-text-on-left-sm);
+}
+
+.SwitchContainer[data-size="sm"] .SwitchThumb[data-checked] {
+  translate: var(--switch-thumb-transform-checked-sm);
+}
+
+.SwitchContainer[data-size="sm"] .SwitchLabel {
+  font-family: var(--switch-label-font-family-sm);
+  font-size: var(--switch-label-font-size-sm);
+  font-weight: var(--switch-label-font-weight-sm);
+  line-height: var(--switch-label-line-height-sm);
+  letter-spacing: var(--switch-label-letter-spacing-sm);
+}
+
+/* Large */
+.SwitchContainer[data-size="lg"] .SwitchRoot {
+  width: var(--switch-track-width-lg);
+  height: var(--switch-track-height-lg);
+  padding: var(--switch-track-padding-lg);
+}
+
+.SwitchContainer[data-size="lg"] .SwitchRoot::before {
+  font-size: var(--switch-track-text-font-size-lg);
+  right: var(--switch-track-text-off-right-lg);
+}
+
+.SwitchContainer[data-size="lg"] .SwitchRoot[data-checked]::before {
+  left: var(--switch-track-text-on-left-lg);
+}
+
+.SwitchContainer[data-size="lg"] .SwitchThumb[data-checked] {
+  translate: var(--switch-thumb-transform-checked-lg);
+}
+
+.SwitchContainer[data-size="lg"] .SwitchLabel {
+  font-family: var(--switch-label-font-family-lg);
+  font-size: var(--switch-label-font-size-lg);
+  font-weight: var(--switch-label-font-weight-lg);
+  line-height: var(--switch-label-line-height-lg);
+  letter-spacing: var(--switch-label-letter-spacing-lg);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .SwitchRoot,
+  .SwitchThumb,
+  .SwitchRoot::before {
+    transition: none;
+  }
+}

package/dist/styles/components/Tabs.css

@@ -0,0 +1,163 @@
+/* Tabs - Mojave Theme */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.TabsRoot {
+  display: var(--tabs-root-display);
+  flex-direction: var(--tabs-root-flex-direction);
+  gap: var(--tabs-root-gap);
+}
+
+.TabsRoot[data-orientation="vertical"] {
+  flex-direction: var(--tabs-root-flex-direction-vertical);
+}
+
+/* ============================================
+   TAB LIST
+   ============================================ */
+
+.TabsList {
+  display: var(--tabs-list-display);
+  gap: var(--tabs-list-gap);
+  border-bottom: var(--tabs-list-border-bottom);
+  padding: var(--tabs-list-padding);
+}
+
+.TabsRoot[data-orientation="vertical"] .TabsList {
+  flex-direction: var(--tabs-list-flex-direction-vertical);
+  border-bottom: var(--tabs-list-border-bottom-vertical);
+  border-right: var(--tabs-list-border-right-vertical);
+}
+
+/* ============================================
+   TAB (Trigger)
+   ============================================ */
+
+.TabsTab {
+  all: unset;
+  display: var(--tabs-tab-display);
+  align-items: var(--tabs-tab-align-items);
+  justify-content: var(--tabs-tab-justify-content);
+  padding: var(--tabs-tab-padding);
+  font-family: var(--tabs-tab-font-family);
+  font-size: var(--tabs-tab-font-size);
+  font-weight: var(--tabs-tab-font-weight);
+  line-height: var(--tabs-tab-line-height);
+  letter-spacing: var(--tabs-tab-letter-spacing);
+  color: var(--tabs-tab-color);
+  background: var(--tabs-tab-background);
+  border: var(--tabs-tab-border);
+  border-bottom: var(--tabs-tab-border-bottom);
+  border-radius: var(--tabs-tab-border-radius);
+  cursor: var(--tabs-tab-cursor);
+  transition: var(--tabs-tab-transition);
+  white-space: var(--tabs-tab-white-space);
+  box-sizing: border-box;
+}
+
+.TabsTab:hover:not([data-disabled]) {
+  color: var(--tabs-tab-color-hover);
+  background: var(--tabs-tab-background-hover);
+}
+
+.TabsTab[data-active] {
+  color: var(--tabs-tab-color-active);
+  border-bottom: var(--tabs-tab-border-bottom-active);
+  font-weight: var(--tabs-tab-font-weight-active);
+}
+
+.TabsTab:focus-visible {
+  outline: var(--tabs-tab-outline-focus);
+  outline-offset: var(--tabs-tab-outline-offset-focus);
+}
+
+.TabsTab[data-disabled] {
+  color: var(--tabs-tab-color-disabled);
+  cursor: var(--tabs-tab-cursor-disabled);
+  opacity: var(--tabs-tab-opacity-disabled);
+}
+
+/* Vertical orientation */
+.TabsRoot[data-orientation="vertical"] .TabsTab {
+  border-bottom: var(--tabs-tab-border-bottom-vertical);
+  border-right: var(--tabs-tab-border-right-vertical);
+}
+
+.TabsRoot[data-orientation="vertical"] .TabsTab[data-selected] {
+  border-bottom: var(--tabs-tab-border-bottom-vertical);
+  border-right: var(--tabs-tab-border-right-active-vertical);
+}
+
+/* ============================================
+   TAB PANEL
+   ============================================ */
+
+.TabsPanel {
+  padding: var(--tabs-panel-padding);
+  font-family: var(--tabs-panel-font-family);
+  font-size: var(--tabs-panel-font-size);
+  font-weight: var(--tabs-panel-font-weight);
+  line-height: var(--tabs-panel-line-height);
+  letter-spacing: var(--tabs-panel-letter-spacing);
+  color: var(--tabs-panel-color);
+  background: var(--tabs-panel-background);
+}
+
+.TabsPanel:focus-visible {
+  outline: var(--tabs-panel-outline-focus);
+  outline-offset: var(--tabs-panel-outline-offset-focus);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+/* Small */
+.TabsRoot[data-size="sm"] .TabsTab {
+  padding: var(--tabs-tab-padding-sm);
+  font-family: var(--tabs-tab-font-family-sm);
+  font-size: var(--tabs-tab-font-size-sm);
+  font-weight: var(--tabs-tab-font-weight-sm);
+  line-height: var(--tabs-tab-line-height-sm);
+  letter-spacing: var(--tabs-tab-letter-spacing-sm);
+}
+
+.TabsRoot[data-size="sm"] .TabsPanel {
+  padding: var(--tabs-panel-padding-sm);
+  font-family: var(--tabs-panel-font-family-sm);
+  font-size: var(--tabs-panel-font-size-sm);
+  font-weight: var(--tabs-panel-font-weight-sm);
+  line-height: var(--tabs-panel-line-height-sm);
+  letter-spacing: var(--tabs-panel-letter-spacing-sm);
+}
+
+/* Large */
+.TabsRoot[data-size="lg"] .TabsTab {
+  padding: var(--tabs-tab-padding-lg);
+  font-family: var(--tabs-tab-font-family-lg);
+  font-size: var(--tabs-tab-font-size-lg);
+  font-weight: var(--tabs-tab-font-weight-lg);
+  line-height: var(--tabs-tab-line-height-lg);
+  letter-spacing: var(--tabs-tab-letter-spacing-lg);
+}
+
+.TabsRoot[data-size="lg"] .TabsPanel {
+  padding: var(--tabs-panel-padding-lg);
+  font-family: var(--tabs-panel-font-family-lg);
+  font-size: var(--tabs-panel-font-size-lg);
+  font-weight: var(--tabs-panel-font-weight-lg);
+  line-height: var(--tabs-panel-line-height-lg);
+  letter-spacing: var(--tabs-panel-letter-spacing-lg);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .TabsTab {
+    transition: none;
+  }
+}

package/dist/styles/components/Toast.css

@@ -0,0 +1,261 @@
+/* Toast - Mojave Theme */
+
+/* ============================================
+   VIEWPORT
+   ============================================ */
+
+.Viewport {
+  position: var(--toast-viewport-position);
+  z-index: var(--toast-viewport-z-index);
+  width: var(--toast-viewport-width);
+  margin: 0 auto;
+  bottom: var(--toast-viewport-margin);
+  right: var(--toast-viewport-margin);
+  left: auto;
+  top: auto;
+  outline: 0;
+}
+
+@media (min-width: 500px) {
+  .Viewport {
+    bottom: var(--toast-viewport-margin-md);
+    right: var(--toast-viewport-margin-md);
+    width: var(--toast-viewport-width-md);
+  }
+}
+
+/* ============================================
+   TOAST ROOT
+   ============================================ */
+
+.Toast {
+  /* Local CSS variables for stacking calculations */
+  --gap: 0.75rem;
+  --peek: 0.75rem;
+  --scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));
+  --shrink: calc(1 - var(--scale));
+  --height: var(--toast-frontmost-height, var(--toast-height));
+  --offset-y: calc(
+    var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
+      var(--toast-swipe-movement-y)
+  );
+
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  margin: 0 auto;
+  margin-right: 0;
+  box-sizing: border-box;
+  width: 100%;
+  background: var(--toast-background);
+  color: var(--toast-color);
+  border: var(--toast-border);
+  border-radius: var(--toast-border-radius);
+  padding: var(--toast-padding);
+  box-shadow: var(--toast-box-shadow);
+  background-clip: padding-box;
+  transform-origin: bottom center;
+  user-select: none;
+  cursor: default;
+  
+  /* Stacking */
+  z-index: calc(1000 - var(--toast-index));
+  height: var(--height);
+  
+  /* Transform for stacking and swiping */
+  transform: translateX(var(--toast-swipe-movement-x))
+    translateY(
+      calc(
+        var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
+          (var(--shrink) * var(--height))
+      )
+    )
+    scale(var(--scale));
+  
+  transition: var(--toast-transition);
+}
+
+/* Expanded state - when hovering viewport */
+.Toast[data-expanded] {
+  transform: translateX(var(--toast-swipe-movement-x)) 
+    translateY(var(--offset-y));
+  height: var(--toast-height);
+}
+
+/* Starting animation */
+.Toast[data-starting-style],
+.Toast[data-ending-style] {
+  transform: translateY(150%);
+}
+
+/* Ending animation */
+.Toast[data-ending-style] {
+  opacity: 0;
+}
+
+.Toast[data-ending-style][data-swipe-direction='up'] {
+  transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+}
+
+.Toast[data-ending-style][data-swipe-direction='down'] {
+  transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+}
+
+.Toast[data-ending-style][data-swipe-direction='left'] {
+  transform: translateX(calc(var(--toast-swipe-movement-x) - 150%)) 
+    translateY(var(--offset-y));
+}
+
+.Toast[data-ending-style][data-swipe-direction='right'] {
+  transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) 
+    translateY(var(--offset-y));
+}
+
+/* Limited (removed due to exceeding limit) */
+.Toast[data-limited] {
+  opacity: 0;
+}
+
+/* Spacing between stacked toasts */
+.Toast::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  left: 0;
+  height: calc(var(--gap) + 1px);
+}
+
+/* Variants */
+.Toast[data-variant='success'] {
+  background: var(--toast-success-background);
+  border-color: var(--toast-success-border-color);
+  color: var(--toast-success-color);
+}
+
+.Toast[data-variant='error'] {
+  background: var(--toast-error-background);
+  border-color: var(--toast-error-border-color);
+  color: var(--toast-error-color);
+}
+
+.Toast[data-variant='warning'] {
+  background: var(--toast-warning-background);
+  border-color: var(--toast-warning-border-color);
+  color: var(--toast-warning-color);
+}
+
+.Toast[data-variant='info'] {
+  background: var(--toast-info-background);
+  border-color: var(--toast-info-border-color);
+  color: var(--toast-info-color);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.Content {
+  overflow: hidden;
+  transition: var(--toast-content-transition);
+}
+
+/* Content behind the frontmost toast */
+.Content[data-behind] {
+  opacity: 0;
+}
+
+/* Content when expanded */
+.Content[data-expanded] {
+  opacity: 1;
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.Title {
+  font-family: var(--toast-title-font-family);
+  font-weight: var(--toast-title-font-weight);
+  font-size: var(--toast-title-font-size);
+  line-height: var(--toast-title-line-height);
+  letter-spacing: var(--toast-title-letter-spacing);
+  margin: 0;
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.Description {
+  font-family: var(--toast-description-font-family);
+  font-size: var(--toast-description-font-size);
+  font-weight: var(--toast-description-font-weight);
+  line-height: var(--toast-description-line-height);
+  letter-spacing: var(--toast-description-letter-spacing);
+  margin: 0;
+  margin-top: var(--toast-description-margin-top);
+}
+
+/* ============================================
+   CLOSE BUTTON
+   ============================================ */
+
+.Close {
+  position: absolute;
+  top: var(--toast-close-top);
+  right: var(--toast-close-right);
+  padding: 0;
+  border: none;
+  background: transparent;
+  width: var(--toast-close-width);
+  height: var(--toast-close-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--toast-close-border-radius);
+  cursor: pointer;
+  color: inherit;
+}
+
+.Close:hover {
+  background-color: var(--toast-close-background-hover);
+}
+
+.Toast[data-variant='success'] .Close:hover {
+  background-color: var(--toast-success-close-hover);
+}
+
+.Toast[data-variant='error'] .Close:hover {
+  background-color: var(--toast-error-close-hover);
+}
+
+.Toast[data-variant='warning'] .Close:hover {
+  background-color: var(--toast-warning-close-hover);
+}
+
+.Toast[data-variant='info'] .Close:hover {
+  background-color: var(--toast-info-close-hover);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.Icon {
+  width: var(--toast-icon-width);
+  height: var(--toast-icon-height);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .Toast,
+  .Content {
+    transition: none;
+  }
+}