@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/NavigationMenu.css

@@ -0,0 +1,469 @@
+/* Navigation Menu - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.NavigationMenuRoot {
+  display: var(--navigation-menu-root-display);
+  align-items: var(--navigation-menu-root-align-items);
+  gap: var(--navigation-menu-root-gap);
+  background-color: var(--navigation-menu-root-background);
+  border-radius: var(--navigation-menu-root-border-radius);
+  padding: var(--navigation-menu-root-padding);
+  min-width: max-content;
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.NavigationMenuList {
+  display: flex;
+  position: relative;
+  align-items: center;
+  gap: var(--navigation-menu-root-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Reset ALL list items in the main navigation list */
+.NavigationMenuList > li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.NavigationMenuTrigger {
+  box-sizing: border-box;
+  display: var(--navigation-menu-trigger-display);
+  align-items: var(--navigation-menu-trigger-align-items);
+  justify-content: var(--navigation-menu-trigger-justify-content);
+  gap: var(--navigation-menu-trigger-gap);
+  height: var(--navigation-menu-trigger-height);
+  padding-block: var(--navigation-menu-trigger-padding-block);
+  padding-inline: var(--navigation-menu-trigger-padding-inline);
+  margin: 0;
+  outline: 0;
+  border: var(--navigation-menu-trigger-border);
+  border-radius: var(--navigation-menu-trigger-border-radius);
+  font-family: var(--navigation-menu-trigger-font-family);
+  font-size: var(--navigation-menu-trigger-font-size);
+  font-weight: var(--navigation-menu-trigger-font-weight);
+  line-height: var(--navigation-menu-trigger-line-height);
+  letter-spacing: var(--navigation-menu-trigger-letter-spacing);
+  color: var(--navigation-menu-trigger-color);
+  background: var(--navigation-menu-trigger-background);
+  cursor: var(--navigation-menu-trigger-cursor);
+  user-select: none;
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .NavigationMenuTrigger:hover {
+    background: var(--navigation-menu-trigger-background-hover);
+  }
+}
+
+.NavigationMenuTrigger[data-popup-open] {
+  background: var(--navigation-menu-trigger-background-active);
+}
+
+.NavigationMenuTrigger:focus-visible {
+  position: relative;
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -1px;
+}
+
+/* ============================================
+   ICON (chevron)
+   ============================================ */
+
+.NavigationMenuIcon {
+  width: var(--navigation-menu-indicator-size);
+  height: var(--navigation-menu-indicator-size);
+  color: var(--navigation-menu-indicator-color);
+  transition: var(--navigation-menu-indicator-transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.NavigationMenuIcon[data-popup-open] {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.NavigationMenuPositioner {
+  --easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --duration: 0.35s;
+  
+  box-sizing: border-box;
+  z-index: var(--navigation-menu-positioner-z-index);
+  transition-property: top, left, right, bottom;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--easing);
+  width: var(--positioner-width);
+  height: var(--positioner-height);
+  max-width: var(--available-width);
+}
+
+/* Add safe zone around positioner to prevent flickering */
+.NavigationMenuPositioner::before {
+  content: '';
+  position: absolute;
+}
+
+.NavigationMenuPositioner[data-side='top']::before {
+  left: 0;
+  right: 0;
+  bottom: -10px;
+  height: 10px;
+}
+
+.NavigationMenuPositioner[data-side='bottom']::before {
+  left: 0;
+  right: 0;
+  top: -10px;
+  height: 10px;
+}
+
+.NavigationMenuPositioner[data-side='left']::before {
+  top: 0;
+  bottom: 0;
+  right: -10px;
+  width: 10px;
+}
+
+.NavigationMenuPositioner[data-side='right']::before {
+  top: 0;
+  bottom: 0;
+  left: -10px;
+  width: 10px;
+}
+
+.NavigationMenuPositioner[data-instant] {
+  transition: none;
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.NavigationMenuPopup {
+  position: relative;
+  box-sizing: border-box;
+  background: var(--navigation-menu-popup-background);
+  border-radius: var(--navigation-menu-popup-border-radius);
+  color: var(--navigation-menu-popup-color);
+  transform-origin: var(--transform-origin);
+  transition-property: opacity, transform, width, height;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--easing);
+  width: var(--popup-width);
+  height: var(--popup-height);
+  outline: var(--navigation-menu-popup-border-width) solid var(--navigation-menu-popup-border-color);
+  box-shadow: var(--navigation-menu-popup-shadow);
+}
+
+.NavigationMenuPopup[data-starting-style],
+.NavigationMenuPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.NavigationMenuPopup[data-ending-style] {
+  transition-timing-function: ease;
+  transition-duration: 0.15s;
+}
+
+@media (prefers-color-scheme: dark) {
+  .NavigationMenuPopup {
+    outline-color: var(--navigation-menu-popup-border-color-dark);
+    outline-offset: -1px;
+  }
+}
+
+/* ============================================
+   VIEWPORT (content container)
+   ============================================ */
+
+.NavigationMenuViewport {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.NavigationMenuContent {
+  box-sizing: border-box;
+  transition:
+    opacity calc(var(--duration) * 0.5) ease,
+    transform var(--duration) var(--easing);
+  padding: var(--navigation-menu-popup-padding);
+  width: calc(100vw - 40px);
+  height: 100%;
+}
+
+@media (min-width: 500px) {
+  .NavigationMenuContent {
+    width: max-content;
+    min-width: var(--navigation-menu-popup-min-width);
+  }
+}
+
+.NavigationMenuContent[data-starting-style],
+.NavigationMenuContent[data-ending-style] {
+  opacity: 0;
+}
+
+.NavigationMenuContent[data-starting-style][data-activation-direction='left'] {
+  transform: translateX(-50%);
+}
+
+.NavigationMenuContent[data-starting-style][data-activation-direction='right'] {
+  transform: translateX(50%);
+}
+
+.NavigationMenuContent[data-ending-style][data-activation-direction='left'] {
+  transform: translateX(50%);
+}
+
+.NavigationMenuContent[data-ending-style][data-activation-direction='right'] {
+  transform: translateX(-50%);
+}
+
+/* ============================================
+   LINK LIST
+   ============================================ */
+
+.NavigationMenuLinkList {
+  display: var(--navigation-menu-content-display);
+  gap: var(--navigation-menu-content-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.NavigationMenuLinkList > li {
+  margin: 0;
+  padding: 0;
+}
+
+.NavigationMenuLinkList[data-columns='1'] {
+  grid-template-columns: 1fr;
+  max-width: 400px;
+}
+
+.NavigationMenuLinkList[data-columns='2'] {
+  grid-template-columns: var(--navigation-menu-content-grid-columns);
+}
+
+@media (max-width: 500px) {
+  .NavigationMenuLinkList[data-columns='2'] {
+    grid-template-columns: 1fr;
+  }
+}
+
+.NavigationMenuLinkList[data-columns='3'] {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ============================================
+   SECTIONS CONTAINER
+   ============================================ */
+
+.NavigationMenuSections {
+  display: grid;
+  gap: var(--navigation-menu-content-gap);
+}
+
+.NavigationMenuSections[data-columns='2'] {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.NavigationMenuSections[data-columns='3'] {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ============================================
+   LINK ITEM
+   ============================================ */
+
+.NavigationMenuLink {
+  box-sizing: border-box;
+  display: var(--navigation-menu-link-display);
+  flex-direction: var(--navigation-menu-link-flex-direction);
+  gap: var(--navigation-menu-link-gap);
+  padding: var(--navigation-menu-link-padding);
+  border-radius: var(--navigation-menu-link-border-radius);
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  text-decoration: var(--navigation-menu-link-text-decoration);
+  transition: var(--navigation-menu-link-transition);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .NavigationMenuLink:hover {
+    background: var(--navigation-menu-link-background-hover);
+  }
+}
+
+.NavigationMenuLink:focus-visible {
+  position: relative;
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -1px;
+}
+
+/* ============================================
+   LINK TITLE
+   ============================================ */
+
+.NavigationMenuLinkTitle {
+  font-family: var(--navigation-menu-link-title-font-family);
+  font-size: var(--navigation-menu-link-title-font-size);
+  font-weight: var(--navigation-menu-link-title-font-weight);
+  line-height: var(--navigation-menu-link-title-line-height);
+  letter-spacing: var(--navigation-menu-link-title-letter-spacing);
+  color: var(--navigation-menu-link-title-color);
+  margin: 0 0 4px 0;
+}
+
+/* ============================================
+   LINK DESCRIPTION
+   ============================================ */
+
+.NavigationMenuLinkDescription {
+  font-family: var(--navigation-menu-link-description-font-family);
+  font-size: var(--navigation-menu-link-description-font-size);
+  font-weight: var(--navigation-menu-link-description-font-weight);
+  letter-spacing: var(--navigation-menu-link-description-letter-spacing);
+  color: var(--navigation-menu-link-description-color);
+  line-height: var(--navigation-menu-link-description-line-height);
+  margin: 0;
+}
+
+/* ============================================
+   SECTION
+   ============================================ */
+
+.NavigationMenuSection {
+  display: var(--navigation-menu-section-display);
+  flex-direction: var(--navigation-menu-section-flex-direction);
+  gap: var(--navigation-menu-section-gap);
+}
+
+/* ============================================
+   SECTION HEADING
+   ============================================ */
+
+.NavigationMenuSectionHeading {
+  font-family: var(--navigation-menu-section-heading-font-family);
+  font-size: var(--navigation-menu-section-heading-font-size);
+  font-weight: var(--navigation-menu-section-heading-font-weight);
+  line-height: var(--navigation-menu-section-heading-line-height);
+  color: var(--navigation-menu-section-heading-color);
+  text-transform: var(--navigation-menu-section-heading-text-transform);
+  letter-spacing: var(--navigation-menu-section-heading-letter-spacing);
+  margin: 0 0 var(--navigation-menu-section-heading-margin-bottom) 0;
+}
+
+/* ============================================
+   ARROW (styled to match popup with border)
+   ============================================ */
+
+.NavigationMenuArrow {
+  display: flex;
+  transition: left calc(var(--duration)) var(--easing);
+}
+
+.NavigationMenuArrow[data-side='top'] {
+  bottom: -8px;
+  rotate: 180deg;
+}
+
+.NavigationMenuArrow[data-side='bottom'] {
+  top: -8px;
+  rotate: 0deg;
+}
+
+.NavigationMenuArrow[data-side='left'] {
+  right: -13px;
+  rotate: 90deg;
+}
+
+.NavigationMenuArrow[data-side='right'] {
+  left: -13px;
+  rotate: -90deg;
+}
+
+/* Arrow fill - matches popup background */
+.NavigationMenuArrowFill {
+  fill: var(--navigation-menu-popup-background);
+}
+
+/* Arrow outer stroke - creates the border effect */
+.NavigationMenuArrowOuterStroke {
+  fill: var(--navigation-menu-popup-border-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  .NavigationMenuArrowOuterStroke {
+    fill: var(--navigation-menu-popup-border-color-dark);
+  }
+}
+
+/* Arrow inner stroke - creates the inner border line */
+.NavigationMenuArrowInnerStroke {
+  fill: var(--navigation-menu-popup-border-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  .NavigationMenuArrowInnerStroke {
+    fill: var(--navigation-menu-popup-border-color-dark);
+  }
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.NavigationMenuSeparator {
+  height: var(--navigation-menu-separator-height);
+  background: var(--navigation-menu-separator-background);
+  margin-block: var(--navigation-menu-separator-margin-block);
+  border: none;
+  width: 100%;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .NavigationMenuPopup,
+  .NavigationMenuContent {
+    animation: none;
+  }
+  
+  .NavigationMenuTrigger,
+  .NavigationMenuLink,
+  .NavigationMenuIcon,
+  .NavigationMenuArrow {
+    transition: none;
+  }
+}

package/dist/styles/components/NumberField.css

@@ -0,0 +1,182 @@
+/* Number Field - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.NumberFieldRoot {
+  display: var(--number-field-root-display);
+  flex-direction: var(--number-field-root-flex-direction);
+  gap: var(--number-field-root-gap);
+}
+
+/* ============================================
+   GROUP (input + buttons container)
+   ============================================ */
+
+.NumberFieldGroup {
+  display: var(--number-field-group-display);
+  position: var(--number-field-group-position);
+  width: var(--number-field-group-width);
+}
+
+/* ============================================
+   INPUT
+   ============================================ */
+
+.NumberFieldInput {
+  box-sizing: border-box;
+  width: var(--number-field-input-width);
+  height: var(--number-field-input-height);
+  padding-block: var(--number-field-input-padding-block);
+  padding-inline-start: var(--number-field-input-padding-inline-start);
+  padding-inline-end: var(--number-field-input-padding-inline-end);
+  font-family: inherit;
+  font-size: var(--number-field-input-font-size);
+  font-weight: var(--number-field-input-font-weight);
+  line-height: var(--number-field-input-line-height);
+  color: var(--number-field-input-color);
+  background: var(--number-field-input-background);
+  border: var(--number-field-input-border-width) solid var(--number-field-input-border-color);
+  border-radius: var(--number-field-input-border-radius);
+  transition: var(--number-field-input-transition);
+  outline: none;
+}
+
+.NumberFieldInput:hover:not(:disabled):not(:focus) {
+  border-color: var(--number-field-input-border-color-hover);
+}
+
+.NumberFieldInput:focus {
+  outline: none;
+  border-color: var(--number-field-input-border-color-focus);
+  box-shadow: var(--number-field-input-shadow-focus);
+}
+
+.NumberFieldInput:disabled {
+  background: var(--number-field-input-background-disabled);
+  color: var(--number-field-input-color-disabled);
+  cursor: var(--number-field-input-cursor-disabled);
+}
+
+/* Error state */
+.NumberFieldRoot[data-invalid] .NumberFieldInput {
+  border-color: var(--number-field-input-border-color-error);
+}
+
+.NumberFieldRoot[data-invalid] .NumberFieldInput:focus {
+  border-color: var(--number-field-input-border-color-error);
+  box-shadow: var(--number-field-input-shadow-focus-error);
+}
+
+/* ============================================
+   INCREMENT/DECREMENT BUTTONS
+   ============================================ */
+
+.NumberFieldIncrement,
+.NumberFieldDecrement {
+  display: var(--number-field-button-display);
+  align-items: var(--number-field-button-align-items);
+  justify-content: var(--number-field-button-justify-content);
+  position: var(--number-field-button-position);
+  width: var(--number-field-button-width);
+  height: var(--number-field-button-height);
+  padding: 0;
+  border: var(--number-field-button-border);
+  background: var(--number-field-button-background);
+  color: var(--number-field-button-color);
+  cursor: var(--number-field-button-cursor);
+  transition: var(--number-field-button-transition);
+  border-radius: var(--number-field-button-border-radius);
+  outline: none;
+}
+
+.NumberFieldIncrement {
+  top: var(--number-field-increment-top);
+  right: var(--number-field-increment-right);
+}
+
+.NumberFieldDecrement {
+  bottom: var(--number-field-decrement-bottom);
+  right: var(--number-field-decrement-right);
+}
+
+.NumberFieldIncrement:hover:not(:disabled),
+.NumberFieldDecrement:hover:not(:disabled) {
+  background: var(--number-field-button-background-hover);
+  color: var(--number-field-button-color-hover);
+}
+
+.NumberFieldIncrement:active:not(:disabled),
+.NumberFieldDecrement:active:not(:disabled) {
+  background: var(--number-field-button-background-active);
+}
+
+.NumberFieldIncrement:focus-visible,
+.NumberFieldDecrement:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -1px;
+}
+
+.NumberFieldIncrement:disabled,
+.NumberFieldDecrement:disabled {
+  opacity: var(--number-field-button-opacity-disabled);
+  cursor: var(--number-field-button-cursor-disabled);
+}
+
+/* ============================================
+   SCRUB AREA
+   ============================================ */
+
+.NumberFieldScrubArea {
+  cursor: var(--number-field-scrub-area-cursor);
+  user-select: var(--number-field-scrub-area-user-select);
+}
+
+.NumberFieldScrubArea[data-scrubbing] {
+  cursor: var(--number-field-scrub-area-cursor);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.NumberFieldLabel {
+  font-size: var(--number-field-label-font-size);
+  font-weight: var(--number-field-label-font-weight);
+  color: var(--number-field-label-color);
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.NumberFieldDescription {
+  font-size: var(--number-field-description-font-size);
+  color: var(--number-field-description-color);
+  line-height: var(--number-field-description-line-height);
+  margin: 0;
+}
+
+/* ============================================
+   ERROR MESSAGE
+   ============================================ */
+
+.NumberFieldError {
+  font-size: var(--number-field-error-font-size);
+  color: var(--number-field-error-color);
+  line-height: var(--number-field-error-line-height);
+  margin: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .NumberFieldInput,
+  .NumberFieldIncrement,
+  .NumberFieldDecrement {
+    transition: none;
+  }
+}