@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/Dialog.css

@@ -0,0 +1,159 @@
+/* Dialog - Mojave Theme */
+
+/* Backdrop */
+.DialogBackdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--dialog-backdrop-background);
+  z-index: var(--dialog-backdrop-z-index);
+  animation: fadeIn var(--dialog-backdrop-animation-duration) var(--dialog-backdrop-animation-easing);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.DialogBackdrop[data-state='closing'] {
+  animation: fadeOut var(--dialog-backdrop-animation-duration) var(--dialog-backdrop-animation-easing);
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Popup */
+.DialogPopup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--dialog-popup-width);
+  max-width: var(--dialog-popup-max-width);
+  max-height: var(--dialog-popup-max-height);
+  background: var(--dialog-popup-background);
+  border: var(--dialog-popup-border-width) solid var(--dialog-popup-border-color);
+  border-radius: var(--dialog-popup-border-radius);
+  box-shadow: var(--dialog-popup-box-shadow);
+  padding: var(--dialog-popup-padding);
+  z-index: var(--dialog-popup-z-index);
+  animation: slideIn var(--dialog-popup-animation-duration) var(--dialog-popup-animation-easing);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dialog-popup-gap);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.DialogPopup[data-state='closing'] {
+  animation: slideOut var(--dialog-popup-animation-duration) var(--dialog-popup-animation-easing);
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%);
+  }
+}
+
+/* Close Button */
+.DialogClose {
+  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;
+}
+
+/* Title */
+.DialogTitle {
+  font-family: var(--dialog-title-font-family);
+  font-size: var(--dialog-title-font-size);
+  font-weight: var(--dialog-title-font-weight);
+  line-height: var(--dialog-title-line-height);
+  letter-spacing: var(--dialog-title-letter-spacing);
+  color: var(--dialog-title-color);
+  margin: 0;
+}
+
+/* Description */
+.DialogDescription {
+  font-family: var(--dialog-description-font-family);
+  font-size: var(--dialog-description-font-size);
+  font-weight: var(--dialog-description-font-weight);
+  line-height: var(--dialog-description-line-height);
+  letter-spacing: var(--dialog-description-letter-spacing);
+  color: var(--dialog-description-color);
+  margin: 0;
+}
+
+/* Content (for scrollable content) */
+.DialogContent {
+  flex: 1;
+  overflow-y: auto;
+  margin: var(--dialog-content-margin);
+  padding-right: var(--dialog-content-padding-right);
+}
+
+.DialogContent p {
+  margin: 0 0 var(--space-4) 0;
+}
+
+.DialogContent p:last-child {
+  margin-bottom: 0;
+}
+
+/* Form inside Dialog - override Form component spacing */
+.DialogPopup .Form {
+  gap: var(--dialog-form-gap);
+  margin: var(--dialog-form-margin);
+}
+
+/* Actions */
+.DialogActions {
+  display: var(--dialog-actions-display);
+  gap: var(--dialog-actions-gap);
+  justify-content: var(--dialog-actions-justify-content);
+  margin-top: var(--dialog-actions-margin-top);
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .DialogBackdrop,
+  .DialogPopup {
+    animation: none;
+  }
+}

package/dist/styles/components/Field.css

@@ -0,0 +1,138 @@
+/* Field - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER (new - not in Input)
+   ============================================ */
+
+.FieldRoot {
+  display: var(--field-root-display);
+  flex-direction: var(--field-root-flex-direction);
+  gap: var(--field-root-gap);
+}
+
+.FieldRoot[data-disabled] {
+  opacity: var(--field-disabled-opacity);
+  pointer-events: none;
+}
+
+/* ============================================
+   LABEL (new - not in Input)
+   ============================================ */
+
+.FieldLabel {
+  font-family: var(--field-label-font-family);
+  font-size: var(--field-label-font-size);
+  font-weight: var(--field-label-font-weight);
+  line-height: var(--field-label-line-height);
+  letter-spacing: var(--field-label-letter-spacing);
+  color: var(--field-label-color);
+  display: block;
+  margin-bottom: var(--field-label-margin-bottom);
+}
+
+/* ============================================
+   CONTROL (inherits ALL styles from Input)
+   ============================================ */
+
+.FieldControl {
+  /* Inherit all base input styles */
+  box-sizing: border-box;
+  width: var(--input-width);
+  height: var(--input-height);
+  padding-block: var(--input-padding-block);
+  padding-inline: var(--input-padding-inline);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  letter-spacing: var(--input-letter-spacing);
+  color: var(--input-color);
+  background: var(--input-background);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  transition: var(--input-transition);
+  outline: none;
+}
+
+.FieldControl::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.FieldControl:hover:not(:disabled):not(:focus) {
+  border-color: var(--input-border-color-hover);
+}
+
+.FieldControl:focus {
+  outline: none;
+  border-color: var(--input-border-color-focus);
+  box-shadow: var(--input-shadow-focus);
+}
+
+.FieldControl:disabled {
+  background: var(--input-background-disabled);
+  color: var(--input-color-disabled);
+  cursor: var(--input-cursor-disabled);
+}
+
+/* ============================================
+   WARNING STATE
+   ============================================ */
+
+.FieldRoot[data-invalid] .FieldControl,
+.FieldControl[aria-invalid="true"] {
+  border-color: var(--input-border-color-error);
+}
+
+.FieldRoot[data-invalid] .FieldControl:focus,
+.FieldControl[aria-invalid="true"]:focus {
+  border-color: var(--input-border-color-error);
+  box-shadow: var(--input-shadow-focus-error);
+}
+
+/* ============================================
+   DESCRIPTION (new - not in Input)
+   ============================================ */
+
+.FieldDescription {
+  margin-top: var(--field-description-margin-top);
+  font-family: var(--field-description-font-family);
+  font-size: var(--field-description-font-size);
+  font-weight: var(--field-description-font-weight);
+  line-height: var(--field-description-line-height);
+  letter-spacing: var(--field-description-letter-spacing);
+  color: var(--field-description-color);
+}
+
+/* ============================================
+   ERROR (new - not in Input)
+   ============================================ */
+
+.FieldError {
+  margin-top: var(--field-error-margin-top);
+  font-family: var(--field-error-font-family);
+  font-size: var(--field-error-font-size);
+  line-height: var(--field-error-line-height);
+  letter-spacing: var(--field-error-letter-spacing);
+  color: var(--field-error-color);
+  font-weight: var(--field-error-font-weight);
+}
+
+/* ============================================
+   TEXTAREA VARIANT (new - not in Input)
+   ============================================ */
+
+textarea.FieldControl {
+  resize: vertical;
+  min-height: 80px;
+  height: auto;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .FieldControl {
+    transition: none;
+  }
+}

package/dist/styles/components/Fieldset.css

@@ -0,0 +1,48 @@
+/* Fieldset - Mojave Theme */
+
+/* ============================================
+   FIELDSET
+   ============================================ */
+
+.Fieldset {
+  border: var(--fieldset-border);
+  padding: var(--fieldset-padding);
+  margin: var(--fieldset-margin);
+  display: var(--fieldset-display);
+  flex-direction: var(--fieldset-flex-direction);
+  gap: var(--fieldset-gap);
+}
+
+.Fieldset[disabled] {
+  opacity: var(--fieldset-disabled-opacity);
+  pointer-events: none;
+}
+
+/* ============================================
+   LEGEND
+   ============================================ */
+
+.FieldsetLegend {
+  font-family: var(--fieldset-legend-font-family);
+  font-size: var(--fieldset-legend-font-size);
+  font-weight: var(--fieldset-legend-font-weight);
+  line-height: var(--fieldset-legend-line-height);
+  letter-spacing: var(--fieldset-legend-letter-spacing);
+  color: var(--fieldset-legend-color);
+  margin-bottom: var(--fieldset-legend-margin-bottom);
+  padding: var(--fieldset-legend-padding);
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.FieldsetDescription {
+  font-family: var(--fieldset-description-font-family);
+  font-size: var(--fieldset-description-font-size);
+  font-weight: var(--fieldset-description-font-weight);
+  color: var(--fieldset-description-color);
+  line-height: var(--fieldset-description-line-height);
+  letter-spacing: var(--fieldset-description-letter-spacing);
+  margin-bottom: var(--fieldset-description-margin-bottom);
+}

package/dist/styles/components/Form.css

@@ -0,0 +1,22 @@
+/* Form - Mojave Theme */
+
+/* ============================================
+   FORM
+   ============================================ */
+
+.Form {
+  display: var(--form-display);
+  flex-direction: var(--form-flex-direction);
+  gap: var(--form-gap);
+}
+
+/* ============================================
+   FORM ACTIONS (button container)
+   ============================================ */
+
+.FormActions {
+  display: var(--form-actions-display);
+  gap: var(--form-actions-gap);
+  justify-content: var(--form-actions-justify-content);
+  margin-top: var(--form-actions-margin-top);
+}

package/dist/styles/components/Input.css

@@ -0,0 +1,106 @@
+/* Input - Mojave Theme */
+
+/* ============================================
+   BASE INPUT
+   ============================================ */
+
+.Input {
+  box-sizing: border-box;
+  width: var(--input-width);
+  height: var(--input-height);
+  padding-block: var(--input-padding-block);
+  padding-inline: var(--input-padding-inline);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  letter-spacing: var(--input-letter-spacing);
+  color: var(--input-color);
+  background: var(--input-background);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  transition: var(--input-transition);
+  outline: none;
+}
+
+.Input::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.Input:hover:not(:disabled):not(:focus) {
+  border-color: var(--input-border-color-hover);
+}
+
+.Input:focus {
+  outline: none;
+  border-color: var(--input-border-color-focus);
+  box-shadow: var(--input-shadow-focus);
+}
+
+.Input:disabled {
+  background: var(--input-background-disabled);
+  color: var(--input-color-disabled);
+  cursor: var(--input-cursor-disabled);
+}
+
+/* ============================================
+   WARNING STATE
+   ============================================ */
+
+.Input[data-error],
+.Input[aria-invalid="true"] {
+  border-color: var(--input-border-color-error);
+}
+
+.Input[data-error]:focus,
+.Input[aria-invalid="true"]:focus {
+  border-color: var(--input-border-color-error);
+  box-shadow: var(--input-shadow-focus-error);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.Input[data-size="xs"] {
+  height: var(--input-height-xs);
+  padding-block: var(--input-padding-block-xs);
+  padding-inline: var(--input-padding-inline-xs);
+  font-family: var(--input-font-family-xs);
+  font-size: var(--input-font-size-xs);
+  font-weight: var(--input-font-weight-xs);
+  line-height: var(--input-line-height-xs);
+  letter-spacing: var(--input-letter-spacing-xs);
+}
+
+.Input[data-size="sm"] {
+  height: var(--input-height-sm);
+  padding-block: var(--input-padding-block-sm);
+  padding-inline: var(--input-padding-inline-sm);
+  font-family: var(--input-font-family-sm);
+  font-size: var(--input-font-size-sm);
+  font-weight: var(--input-font-weight-sm);
+  line-height: var(--input-line-height-sm);
+  letter-spacing: var(--input-letter-spacing-sm);
+}
+
+.Input[data-size="lg"] {
+  height: var(--input-height-lg);
+  padding-block: var(--input-padding-block-lg);
+  padding-inline: var(--input-padding-inline-lg);
+  font-family: var(--input-font-family-lg);
+  font-size: var(--input-font-size-lg);
+  font-weight: var(--input-font-weight-lg);
+  line-height: var(--input-line-height-lg);
+  letter-spacing: var(--input-letter-spacing-lg);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .Input {
+    transition: none;
+  }
+}

package/dist/styles/components/Menu.css

@@ -0,0 +1,158 @@
+/* Menu - Mojave Theme */
+
+/* ============================================
+   TRIGGER (uses Button component)
+   ============================================ */
+
+/* No trigger styles needed - uses Button component */
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.MenuPositioner {
+  z-index: var(--menu-positioner-z-index);
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.MenuPopup {
+  min-width: var(--menu-popup-min-width);
+  background: var(--menu-popup-background);
+  border: var(--menu-popup-border);
+  border-radius: var(--menu-popup-border-radius);
+  padding: var(--menu-popup-padding);
+  box-shadow: var(--menu-popup-shadow);
+  animation: menuFadeIn var(--menu-popup-animation-duration) var(--menu-popup-animation-easing);
+}
+
+@keyframes menuFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.MenuItem,
+.MenuCheckboxItem,
+.MenuRadioItem,
+.MenuSubmenuTrigger {
+  padding: var(--menu-item-padding-block) var(--menu-item-padding-inline);
+  font-size: var(--menu-item-font-size);
+  color: var(--menu-item-color);
+  cursor: var(--menu-item-cursor);
+  border-radius: var(--menu-item-border-radius);
+  transition: var(--menu-item-transition);
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  outline: none;
+  list-style: none;
+}
+
+.MenuItem:hover,
+.MenuCheckboxItem:hover,
+.MenuRadioItem:hover,
+.MenuSubmenuTrigger:hover {
+  background: var(--menu-item-background-hover);
+  color: var(--menu-item-color-hover);
+}
+
+.MenuItem[data-disabled],
+.MenuCheckboxItem[data-disabled],
+.MenuRadioItem[data-disabled] {
+  color: var(--menu-item-color-disabled);
+  cursor: var(--menu-item-cursor-disabled);
+  opacity: var(--menu-item-opacity-disabled);
+}
+
+/* ============================================
+   CHECKBOX & RADIO ITEM INDICATORS
+   ============================================ */
+
+.MenuCheckboxItemIndicator,
+.MenuRadioItemIndicator {
+  width: var(--menu-item-indicator-width);
+  height: var(--menu-item-indicator-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--menu-item-indicator-color);
+  font-size: var(--menu-item-indicator-font-size);
+  font-weight: bold;
+}
+
+.MenuCheckboxItemIndicatorIcon,
+.MenuRadioItemIndicatorIcon {
+  font-size: var(--menu-item-indicator-width);
+  line-height: 1;
+}
+
+/* Hide unchecked radio button indicator */
+.MenuRadioItemIndicator[data-unchecked] {
+  display: none;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.MenuGroup {
+  padding: var(--menu-group-padding);
+}
+
+/* ============================================
+   GROUP LABEL
+   ============================================ */
+
+.MenuGroupLabel {
+  padding-block-start: var(--menu-group-label-padding-block-start);
+  padding-block-end: var(--menu-group-label-padding-block-end);
+  padding-inline: var(--menu-group-label-padding-inline);
+  font-size: var(--menu-group-label-font-size);
+  font-weight: var(--menu-group-label-font-weight);
+  color: var(--menu-group-label-color);
+  text-transform: var(--menu-group-label-text-transform);
+  letter-spacing: var(--menu-group-label-letter-spacing);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.MenuSeparator {
+  height: var(--menu-separator-height);
+  background: var(--menu-separator-background);
+  margin-block: var(--menu-separator-margin-block);
+}
+
+/* ============================================
+   SUBMENU TRIGGER ARROW
+   ============================================ */
+
+.MenuSubmenuTrigger::after {
+  content: '→';
+  margin-left: auto;
+  color: var(--menu-submenu-arrow-color);
+  font-size: var(--menu-submenu-arrow-font-size);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .MenuPopup {
+    animation: none;
+  }
+}