@scattered-light/loomiere-base-ui 0.0.0-stage → 0.1.0

package/dist/styles/components/Menu.css

@@ -0,0 +1,148 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Menu - Mojave Theme
+ *
+ * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
+ * dense menu height, and group labels, separators and check slots are the shared list
+ * parts, so menus and listboxes read as one family.
+ */
+
+.MenuPositioner {
+  z-index: var(--sl-popup-z-index);
+}
+
+.MenuPopup {
+  box-sizing: border-box;
+  background: var(--sl-popup-background);
+  border: var(--sl-popup-border-width) solid var(--sl-popup-border-color);
+  border-radius: var(--sl-popup-radius);
+  box-shadow: var(--sl-popup-shadow);
+  outline: none;
+  min-width: var(--sl-popup-min-width);
+  padding: var(--sl-popup-padding);
+  animation: menuFadeIn var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+}
+
+@keyframes menuFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(var(--sl-popup-scale-closed));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   ITEM (regular, checkbox, radio, submenu trigger)
+   ============================================ */
+
+.MenuItem,
+.MenuCheckboxItem,
+.MenuRadioItem,
+.MenuSubmenuTrigger {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-item-gap);
+  padding-block: var(--sl-item-padding-block);
+  padding-inline: var(--sl-item-padding-inline);
+  border-radius: var(--sl-item-radius);
+  color: var(--sl-item-color);
+  cursor: default;
+  user-select: none;
+  outline: none;
+  transition: var(--sl-item-transition);
+  font-family: var(--sl-font-base-font-family);
+  font-size: var(--sl-font-base-font-size);
+  font-weight: var(--sl-font-base-font-weight);
+  line-height: var(--sl-font-base-line-height);
+  letter-spacing: var(--sl-font-base-letter-spacing);
+  padding-block: var(--sl-item-padding-block-dense);
+  cursor: pointer;
+  list-style: none;
+}
+
+.MenuItem:hover,
+.MenuCheckboxItem:hover,
+.MenuRadioItem:hover,
+.MenuSubmenuTrigger:hover,
+.MenuItem[data-highlighted],
+.MenuCheckboxItem[data-highlighted],
+.MenuRadioItem[data-highlighted],
+.MenuSubmenuTrigger[data-highlighted] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.MenuItem[data-disabled],
+.MenuCheckboxItem[data-disabled],
+.MenuRadioItem[data-disabled],
+.MenuSubmenuTrigger[data-disabled] {
+  color: var(--sl-item-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--sl-item-opacity-disabled);
+}
+
+/* ============================================
+   CHECKBOX & RADIO ITEM INDICATORS
+   ============================================ */
+
+.MenuCheckboxItemIndicator,
+.MenuRadioItemIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-item-indicator-size);
+  height: var(--sl-item-indicator-size);
+  color: var(--sl-item-indicator-color);
+  line-height: 1;
+}
+
+.MenuCheckboxItemIndicatorIcon,
+.MenuRadioItemIndicatorIcon {
+  font-size: var(--sl-item-indicator-size);
+  line-height: 1;
+}
+
+/* Hide an unchecked radio's indicator when it is kept mounted */
+.MenuRadioItemIndicator[data-unchecked] {
+  display: none;
+}
+
+/* ============================================
+   GROUP, GROUP LABEL, SEPARATOR
+   ============================================ */
+
+.MenuGroup {
+  padding: 0;
+}
+
+.MenuGroupLabel {
+  font-family: var(--sl-font-condense-subtitle-label-font-family);
+  font-size: var(--sl-font-condense-subtitle-label-font-size);
+  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
+  line-height: var(--sl-font-condense-subtitle-label-line-height);
+  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
+  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
+  padding-inline: var(--sl-item-padding-inline);
+  color: var(--sl-text-secondary);
+}
+
+.MenuSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+}
+
+/* ============================================
+   SUBMENU TRIGGER ARROW
+   ============================================ */
+
+.MenuSubmenuTrigger::after {
+  content: '→';
+  margin-left: auto;
+  color: var(--sl-text-tertiary);
+}

package/dist/styles/components/Menubar.css

@@ -0,0 +1,192 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Menubar - Mojave Theme
+ *
+ * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
+ * dense menu height, and group labels, separators and check slots are the shared list
+ * parts, so menus and listboxes read as one family.
+ */
+
+.MenubarRoot {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-space-1);
+  padding: var(--sl-space-1);
+  background: var(--sl-surface-base);
+  border: var(--sl-stroke-default) solid var(--sl-border-subtle);
+  border-radius: var(--sl-radius-chrome);
+}
+
+/* Triggers look like menu rows until their menu opens, then like a selected row. */
+.MenubarTrigger {
+  font-family: var(--sl-font-condense-trigger-font-family);
+  font-size: var(--sl-font-condense-trigger-font-size);
+  font-weight: var(--sl-font-condense-trigger-font-weight);
+  line-height: var(--sl-font-condense-trigger-line-height);
+  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  padding-block: var(--sl-item-padding-block-dense);
+  padding-inline: var(--sl-item-padding-inline);
+  border: none;
+  border-radius: var(--sl-item-radius);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+  outline: none;
+  white-space: nowrap;
+  transition: var(--sl-item-transition);
+}
+
+.MenubarTrigger:hover {
+  background: var(--sl-fill-subtle);
+}
+
+.MenubarTrigger[data-popup-open] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.MenubarTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.MenubarPositioner {
+  z-index: var(--sl-popup-z-index);
+}
+
+.MenubarPopup {
+  box-sizing: border-box;
+  background: var(--sl-popup-background);
+  border: var(--sl-popup-border-width) solid var(--sl-popup-border-color);
+  border-radius: var(--sl-popup-radius);
+  box-shadow: var(--sl-popup-shadow);
+  outline: none;
+  min-width: var(--sl-popup-min-width);
+  padding: var(--sl-popup-padding);
+  animation: menubarFadeIn var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+}
+
+@keyframes menubarFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(var(--sl-popup-scale-closed));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   ITEM (regular, checkbox, radio, submenu trigger)
+   ============================================ */
+
+.MenubarItem,
+.MenubarCheckboxItem,
+.MenubarRadioItem,
+.MenubarSubmenuTrigger {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-item-gap);
+  padding-block: var(--sl-item-padding-block);
+  padding-inline: var(--sl-item-padding-inline);
+  border-radius: var(--sl-item-radius);
+  color: var(--sl-item-color);
+  cursor: default;
+  user-select: none;
+  outline: none;
+  transition: var(--sl-item-transition);
+  font-family: var(--sl-font-base-font-family);
+  font-size: var(--sl-font-base-font-size);
+  font-weight: var(--sl-font-base-font-weight);
+  line-height: var(--sl-font-base-line-height);
+  letter-spacing: var(--sl-font-base-letter-spacing);
+  padding-block: var(--sl-item-padding-block-dense);
+  cursor: pointer;
+  list-style: none;
+}
+
+.MenubarItem:hover,
+.MenubarCheckboxItem:hover,
+.MenubarRadioItem:hover,
+.MenubarSubmenuTrigger:hover,
+.MenubarItem[data-highlighted],
+.MenubarCheckboxItem[data-highlighted],
+.MenubarRadioItem[data-highlighted],
+.MenubarSubmenuTrigger[data-highlighted] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.MenubarItem[data-disabled],
+.MenubarCheckboxItem[data-disabled],
+.MenubarRadioItem[data-disabled],
+.MenubarSubmenuTrigger[data-disabled] {
+  color: var(--sl-item-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--sl-item-opacity-disabled);
+}
+
+/* ============================================
+   CHECKBOX & RADIO ITEM INDICATORS
+   ============================================ */
+
+.MenubarCheckboxItemIndicator,
+.MenubarRadioItemIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-item-indicator-size);
+  height: var(--sl-item-indicator-size);
+  color: var(--sl-item-indicator-color);
+  line-height: 1;
+}
+
+.MenubarCheckboxItemIndicatorIcon,
+.MenubarRadioItemIndicatorIcon {
+  font-size: var(--sl-item-indicator-size);
+  line-height: 1;
+}
+
+/* Hide an unchecked radio's indicator when it is kept mounted */
+.MenubarRadioItemIndicator[data-unchecked] {
+  display: none;
+}
+
+/* ============================================
+   GROUP, GROUP LABEL, SEPARATOR
+   ============================================ */
+
+.MenubarGroup {
+  padding: 0;
+}
+
+.MenubarGroupLabel {
+  font-family: var(--sl-font-condense-subtitle-label-font-family);
+  font-size: var(--sl-font-condense-subtitle-label-font-size);
+  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
+  line-height: var(--sl-font-condense-subtitle-label-line-height);
+  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
+  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
+  padding-inline: var(--sl-item-padding-inline);
+  color: var(--sl-text-secondary);
+}
+
+.MenubarSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+}
+
+/* ============================================
+   SUBMENU TRIGGER ARROW
+   ============================================ */
+
+.MenubarSubmenuTrigger::after {
+  content: '→';
+  margin-left: auto;
+  color: var(--sl-text-tertiary);
+}

package/dist/styles/components/Meter.css

@@ -0,0 +1,59 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Meter - Mojave Theme
+ *
+ * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
+ * the accent by default, or set data-color on the root (success, warning, error, any palette)
+ * to show a zone. Base UI doesn't map low/high/optimum, so the app picks the color.
+ */
+
+.MeterRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-gauge-gap);
+  width: 100%;
+}
+
+.MeterLabel {
+  font-family: var(--sl-font-base-label-font-family);
+  font-size: var(--sl-font-base-label-font-size);
+  font-weight: var(--sl-font-base-label-font-weight);
+  line-height: var(--sl-font-base-label-line-height);
+  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  color: var(--sl-gauge-label-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.MeterTrack {
+  position: relative;
+  height: var(--sl-gauge-height);
+  background: var(--sl-gauge-track-color);
+  border-radius: var(--sl-gauge-radius);
+  overflow: hidden;
+}
+
+.MeterIndicator {
+  height: 100%;
+  background: var(--sl-scope-solid);
+  border-radius: var(--sl-gauge-radius);
+  transition: var(--sl-gauge-transition);
+}
+
+.MeterValue {
+  font-family: var(--sl-font-minimize-font-family);
+  font-size: var(--sl-font-minimize-font-size);
+  font-weight: var(--sl-font-minimize-font-weight);
+  line-height: var(--sl-font-minimize-line-height);
+  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  color: var(--sl-gauge-value-color);
+  text-align: right;
+}
+
+.MeterTrack[data-size='sm'] {
+  height: var(--sl-gauge-height-sm);
+}
+
+.MeterTrack[data-size='lg'] {
+  height: var(--sl-gauge-height-lg);
+}