@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/Menubar.css

@@ -0,0 +1,201 @@
+/* Menubar - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.MenubarRoot {
+  display: var(--menubar-root-display);
+  align-items: var(--menubar-root-align-items);
+  gap: var(--menubar-root-gap);
+  padding: var(--menubar-root-padding);
+  background: var(--menubar-root-background);
+  border: var(--menubar-root-border);
+  border-radius: var(--menubar-root-border-radius);
+}
+
+/* ============================================
+   TRIGGER (Menu trigger in menubar)
+   ============================================ */
+
+.MenubarTrigger {
+  padding: var(--menubar-trigger-padding-block) var(--menubar-trigger-padding-inline);
+  font-family: var(--menubar-trigger-font-family);
+  font-size: var(--menubar-trigger-font-size);
+  font-weight: var(--menubar-trigger-font-weight);
+  line-height: var(--menubar-trigger-line-height);
+  letter-spacing: var(--menubar-trigger-letter-spacing);
+  color: var(--menubar-trigger-color);
+  background: var(--menubar-trigger-background);
+  border: var(--menubar-trigger-border);
+  border-radius: var(--menubar-trigger-border-radius);
+  cursor: var(--menubar-trigger-cursor);
+  transition: var(--menubar-trigger-transition);
+  outline: none;
+  white-space: nowrap;
+}
+
+.MenubarTrigger:hover {
+  background: var(--menubar-trigger-background-hover);
+}
+
+.MenubarTrigger[data-state='open'] {
+  background: var(--menubar-trigger-background-active);
+  color: var(--menubar-trigger-color-active);
+}
+
+.MenubarTrigger:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   POSITIONER (reuse Menu styles)
+   ============================================ */
+
+.MenubarPositioner {
+  z-index: var(--menubar-positioner-z-index);
+}
+
+/* ============================================
+   POPUP (reuse Menu styles)
+   ============================================ */
+
+.MenubarPopup {
+  min-width: var(--menubar-popup-min-width);
+  background: var(--menubar-popup-background);
+  border: var(--menubar-popup-border);
+  border-radius: var(--menubar-popup-border-radius);
+  padding: var(--menubar-popup-padding);
+  box-shadow: var(--menubar-popup-shadow);
+  animation: menubarFadeIn var(--menubar-popup-animation-duration) var(--menubar-popup-animation-easing);
+}
+
+@keyframes menubarFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   ITEMS (reuse Menu item styles)
+   ============================================ */
+
+.MenubarItem,
+.MenubarCheckboxItem,
+.MenubarRadioItem,
+.MenubarSubmenuTrigger {
+  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;
+}
+
+.MenubarItem:hover,
+.MenubarCheckboxItem:hover,
+.MenubarRadioItem:hover,
+.MenubarSubmenuTrigger:hover {
+  background: var(--menu-item-background-hover);
+  color: var(--menu-item-color-hover);
+}
+
+.MenubarItem[data-disabled],
+.MenubarCheckboxItem[data-disabled],
+.MenubarRadioItem[data-disabled] {
+  color: var(--menu-item-color-disabled);
+  cursor: var(--menu-item-cursor-disabled);
+  opacity: var(--menu-item-opacity-disabled);
+}
+
+/* ============================================
+   CHECKBOX & RADIO ITEM INDICATORS
+   ============================================ */
+
+.MenubarCheckboxItemIndicator,
+.MenubarRadioItemIndicator {
+  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;
+}
+
+.MenubarCheckboxItemIndicatorIcon,
+.MenubarRadioItemIndicatorIcon {
+  font-size: var(--menu-item-indicator-width);
+  line-height: 1;
+}
+
+/* Hide unchecked radio button indicator */
+.MenubarRadioItemIndicator[data-unchecked] {
+  display: none;
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.MenubarGroup {
+  padding: var(--menu-group-padding);
+}
+
+/* ============================================
+   GROUP LABEL
+   ============================================ */
+
+.MenubarGroupLabel {
+  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
+   ============================================ */
+
+.MenubarSeparator {
+  height: var(--menu-separator-height);
+  background: var(--menu-separator-background);
+  margin-block: var(--menu-separator-margin-block);
+}
+
+/* ============================================
+   SUBMENU TRIGGER ARROW
+   ============================================ */
+
+.MenubarSubmenuTrigger::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) {
+  .MenubarPopup {
+    animation: none;
+  }
+}

package/dist/styles/components/Meter.css

@@ -0,0 +1,104 @@
+/* Meter - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.MeterRoot {
+  display: var(--meter-root-display);
+  flex-direction: var(--meter-root-flex-direction);
+  gap: var(--meter-root-gap);
+  width: var(--meter-root-width);
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.MeterLabel {
+  font-family: var(--meter-label-font-family);
+  font-size: var(--meter-label-font-size);
+  font-weight: var(--meter-label-font-weight);
+  line-height: var(--meter-label-line-height);
+  letter-spacing: var(--meter-label-letter-spacing);
+  color: var(--meter-label-color);
+  margin-bottom: var(--meter-label-margin-bottom);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* ============================================
+   TRACK (Background bar)
+   ============================================ */
+
+.MeterTrack {
+  height: var(--meter-track-height);
+  background: var(--meter-track-background);
+  border-radius: var(--meter-track-border-radius);
+  overflow: var(--meter-track-overflow);
+  position: relative;
+}
+
+/* ============================================
+   INDICATOR (Filled portion)
+   ============================================ */
+
+.MeterIndicator {
+  height: var(--meter-indicator-height);
+  background: var(--meter-indicator-background);
+  border-radius: var(--meter-indicator-border-radius);
+  transition: var(--meter-indicator-transition);
+}
+
+/* ============================================
+   VALUE LABEL
+   ============================================ */
+
+.MeterValue {
+  font-family: var(--meter-value-font-family);
+  font-size: var(--meter-value-font-size);
+  font-weight: var(--meter-value-font-weight);
+  line-height: var(--meter-value-line-height);
+  letter-spacing: var(--meter-value-letter-spacing);
+  color: var(--meter-value-color);
+  text-align: var(--meter-value-text-align);
+}
+
+/* ============================================
+   STATUS COLORS
+   ============================================ */
+
+.MeterIndicator[data-state='optimum'] {
+  background: var(--meter-indicator-background-optimum);
+}
+
+.MeterIndicator[data-state='sub-optimum'] {
+  background: var(--meter-indicator-background-sub-optimum);
+}
+
+.MeterIndicator[data-state='sub-sub-optimum'] {
+  background: var(--meter-indicator-background-sub-sub-optimum);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.MeterTrack[data-size='sm'] {
+  height: var(--meter-track-height-sm);
+}
+
+.MeterTrack[data-size='lg'] {
+  height: var(--meter-track-height-lg);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .MeterIndicator {
+    transition: none;
+  }
+}