@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/Avatar.css

@@ -0,0 +1,154 @@
+/* Avatar - Mojave Theme */
+
+/* ============================================
+   ROOT CONTAINER
+   ============================================ */
+
+.AvatarRoot {
+  display: var(--avatar-root-display);
+  align-items: var(--avatar-root-align-items);
+  justify-content: var(--avatar-root-justify-content);
+  width: var(--avatar-root-size);
+  height: var(--avatar-root-size);
+  border-radius: var(--avatar-root-border-radius);
+  overflow: hidden;
+  background: var(--avatar-root-bg);
+  border: var(--avatar-root-border-width) solid var(--avatar-root-border-color);
+  box-shadow: var(--avatar-root-shadow);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   IMAGE
+   ============================================ */
+
+.AvatarImage {
+  width: var(--avatar-image-width);
+  height: var(--avatar-image-height);
+  object-fit: var(--avatar-image-object-fit);
+}
+
+/* ============================================
+   FALLBACK
+   ============================================ */
+
+.AvatarFallback {
+  display: var(--avatar-fallback-display);
+  align-items: var(--avatar-fallback-align-items);
+  justify-content: var(--avatar-fallback-justify-content);
+  width: var(--avatar-fallback-width);
+  height: var(--avatar-fallback-height);
+  background: var(--avatar-fallback-bg);
+  color: var(--avatar-fallback-color);
+  font-family: var(--avatar-fallback-font-family);
+  font-size: var(--avatar-fallback-font-size);
+  font-weight: var(--avatar-fallback-font-weight);
+  line-height: var(--avatar-fallback-line-height);
+  letter-spacing: var(--avatar-fallback-letter-spacing);
+  text-transform: var(--avatar-fallback-text-transform);
+  user-select: var(--avatar-fallback-user-select);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.AvatarRoot[data-size='xs'] {
+  width: var(--avatar-size-xs);
+  height: var(--avatar-size-xs);
+}
+
+.AvatarRoot[data-size='xs'] .AvatarFallback {
+  font-family: var(--avatar-font-family-xs);
+  font-size: var(--avatar-font-size-xs);
+  font-weight: var(--avatar-font-weight-xs);
+  line-height: var(--avatar-line-height-xs);
+  letter-spacing: var(--avatar-letter-spacing-xs);
+}
+
+.AvatarRoot[data-size='sm'] {
+  width: var(--avatar-size-sm);
+  height: var(--avatar-size-sm);
+}
+
+.AvatarRoot[data-size='sm'] .AvatarFallback {
+  font-family: var(--avatar-font-family-sm);
+  font-size: var(--avatar-font-size-sm);
+  font-weight: var(--avatar-font-weight-sm);
+  line-height: var(--avatar-line-height-sm);
+  letter-spacing: var(--avatar-letter-spacing-sm);
+}
+
+.AvatarRoot[data-size='md'] {
+  width: var(--avatar-size-md);
+  height: var(--avatar-size-md);
+}
+
+.AvatarRoot[data-size='md'] .AvatarFallback {
+  font-family: var(--avatar-font-family-md);
+  font-size: var(--avatar-font-size-md);
+  font-weight: var(--avatar-font-weight-md);
+  line-height: var(--avatar-line-height-md);
+  letter-spacing: var(--avatar-letter-spacing-md);
+}
+
+.AvatarRoot[data-size='lg'] {
+  width: var(--avatar-size-lg);
+  height: var(--avatar-size-lg);
+}
+
+.AvatarRoot[data-size='lg'] .AvatarFallback {
+  font-family: var(--avatar-font-family-lg);
+  font-size: var(--avatar-font-size-lg);
+  font-weight: var(--avatar-font-weight-lg);
+  line-height: var(--avatar-line-height-lg);
+  letter-spacing: var(--avatar-letter-spacing-lg);
+}
+
+.AvatarRoot[data-size='xl'] {
+  width: var(--avatar-size-xl);
+  height: var(--avatar-size-xl);
+}
+
+.AvatarRoot[data-size='xl'] .AvatarFallback {
+  font-family: var(--avatar-font-family-xl);
+  font-size: var(--avatar-font-size-xl);
+  font-weight: var(--avatar-font-weight-xl);
+  line-height: var(--avatar-line-height-xl);
+  letter-spacing: var(--avatar-letter-spacing-xl);
+}
+
+/* ============================================
+   AVATAR GROUP
+   ============================================ */
+
+.AvatarGroup {
+  display: flex;
+  align-items: center;
+}
+
+.AvatarGroup .AvatarRoot {
+  margin-inline-start: calc(var(--avatar-root-size) * -0.33);
+  border: 3px solid var(--color-glare);
+}
+
+.AvatarGroup .AvatarRoot:first-child {
+  margin-inline-start: 0;
+}
+
+.AvatarGroup .AvatarRoot:hover {
+  z-index: 1;
+  transform: translateY(-2px);
+  transition: transform 0.2s ease;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .AvatarGroup .AvatarRoot:hover {
+    transform: none;
+    transition: none;
+  }
+}

package/dist/styles/components/Button.css

@@ -0,0 +1,164 @@
+/* Button - Mojave Theme */
+
+/* ============================================
+   BASE BUTTON
+   ============================================ */
+
+.Button {
+  display: var(--button-display);
+  align-items: var(--button-align-items);
+  justify-content: var(--button-justify-content);
+  gap: var(--button-gap);
+  height: var(--button-height);
+  padding-inline: var(--button-padding-inline);
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  letter-spacing: var(--button-letter-spacing);
+  border-radius: var(--button-border-radius);
+  border-width: var(--button-border-width);
+  border-style: solid;
+  transition: var(--button-transition);
+  cursor: var(--button-cursor);
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* ============================================
+   SOLID VARIANT (default)
+   ============================================ */
+
+.Button[data-variant="solid"],
+.Button:not([data-variant]) {
+  background: var(--button-solid-bg);
+  color: var(--button-solid-color);
+  border-color: var(--button-solid-border-color);
+}
+
+.Button[data-variant="solid"]:hover:not(:disabled):not([aria-disabled="true"]),
+.Button:not([data-variant]):hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--button-solid-bg-hover);
+  border-color: var(--button-solid-border-color-hover);
+}
+
+.Button[data-variant="solid"]:active:not(:disabled):not([aria-disabled="true"]),
+.Button:not([data-variant]):active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--button-solid-bg-active);
+  border-color: var(--button-solid-border-color-active);
+}
+
+.Button[data-variant="solid"]:focus-visible,
+.Button:not([data-variant]):focus-visible {
+  box-shadow: var(--button-solid-shadow-focus);
+}
+
+/* ============================================
+   OUTLINE VARIANT
+   ============================================ */
+
+.Button[data-variant="outline"] {
+  background: var(--button-outline-bg);
+  color: var(--button-outline-color);
+  border-color: var(--button-outline-border-color);
+}
+
+.Button[data-variant="outline"]:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--button-outline-bg-hover);
+  color: var(--button-outline-color-hover);
+  border-color: var(--button-outline-border-color-hover);
+}
+
+.Button[data-variant="outline"]:active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--button-outline-bg-active);
+}
+
+.Button[data-variant="outline"]:focus-visible {
+  box-shadow: var(--button-outline-shadow-focus);
+}
+
+/* ============================================
+   GHOST VARIANT
+   ============================================ */
+
+.Button[data-variant="ghost"] {
+  background: var(--button-ghost-bg);
+  color: var(--button-ghost-color);
+  border-color: var(--button-ghost-border-color);
+}
+
+.Button[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--button-ghost-bg-hover);
+  color: var(--button-ghost-color-hover);
+}
+
+.Button[data-variant="ghost"]:active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--button-ghost-bg-active);
+}
+
+.Button[data-variant="ghost"]:focus-visible {
+  box-shadow: var(--button-ghost-shadow-focus);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.Button:disabled,
+.Button[aria-disabled="true"] {
+  opacity: var(--button-disabled-opacity);
+  cursor: var(--button-disabled-cursor);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.Button[data-size="sm"] {
+  height: var(--button-height-sm);
+  padding-inline: var(--button-padding-inline-sm);
+  font-family: var(--button-font-family-sm);
+  font-size: var(--button-font-size-sm);
+  font-weight: var(--button-font-weight-sm);
+  line-height: var(--button-line-height-sm);
+  letter-spacing: var(--button-letter-spacing-sm);
+}
+
+.Button[data-size="lg"] {
+  height: var(--button-height-lg);
+  padding-inline: var(--button-padding-inline-lg);
+  font-family: var(--button-font-family-lg);
+  font-size: var(--button-font-size-lg);
+  font-weight: var(--button-font-weight-lg);
+  line-height: var(--button-line-height-lg);
+  letter-spacing: var(--button-letter-spacing-lg);
+}
+
+/* Extra Small */
+.Button[data-size='xs'] {
+  height: var(--button-height-xs);
+  padding-inline: var(--button-padding-inline-xs);
+  font-family: var(--button-font-family-xs);
+  font-size: var(--button-font-size-xs);
+  font-weight: var(--button-font-weight-xs);
+  line-height: var(--button-line-height-xs);
+  letter-spacing: var(--button-letter-spacing-xs);
+  gap: var(--button-gap-xs);
+}
+
+.Button[data-size='xs'] svg {
+  width: var(--button-icon-size-xs);
+  height: var(--button-icon-size-xs);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .Button {
+    transition: none;
+  }
+}

package/dist/styles/components/Checkbox.css

@@ -0,0 +1,199 @@
+/* Checkbox - Mojave Theme */
+
+/* ============================================
+   LABEL WRAPPER
+   ============================================ */
+
+.CheckboxLabel {
+  display: var(--checkbox-root-display);
+  align-items: var(--checkbox-root-align-items);
+  gap: var(--checkbox-root-gap);
+  cursor: var(--checkbox-label-cursor);
+  font-family: var(--checkbox-label-font-family);
+  font-size: var(--checkbox-label-font-size);
+  font-weight: var(--checkbox-label-font-weight);
+  line-height: var(--checkbox-label-line-height);
+  letter-spacing: var(--checkbox-label-letter-spacing);
+  color: var(--checkbox-label-color);
+  user-select: none;
+  min-height: 44px; /* Ensure consistent tap target */
+}
+
+/* ============================================
+   CHECKBOX ROOT (the actual checkbox button)
+   ============================================ */
+
+.CheckboxRoot {
+  all: unset;
+  box-sizing: border-box;
+  width: var(--checkbox-indicator-size);
+  height: var(--checkbox-indicator-size);
+  border-radius: var(--checkbox-indicator-border-radius);
+  border: var(--checkbox-indicator-border-width) solid var(--checkbox-indicator-border-color);
+  background: var(--checkbox-indicator-bg);
+  transition: var(--checkbox-indicator-transition);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.CheckboxRoot:hover {
+  border-color: var(--checkbox-indicator-border-color-hover);
+}
+
+.CheckboxRoot:focus-visible {
+  outline: none;
+  box-shadow: var(--checkbox-indicator-shadow-focus);
+}
+
+/* ============================================
+   CHECKED STATE (using data-checked attribute)
+   ============================================ */
+
+.CheckboxRoot[data-checked] {
+  background: var(--checkbox-indicator-bg-checked);
+  border-color: var(--checkbox-indicator-border-color-checked);
+}
+
+/* ============================================
+   INDETERMINATE STATE
+   ============================================ */
+
+.CheckboxRoot[data-indeterminate] {
+  background: var(--checkbox-indicator-bg-checked);
+  border-color: var(--checkbox-indicator-border-color-checked);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.CheckboxRoot[data-disabled] {
+  opacity: var(--checkbox-indicator-opacity-disabled);
+  cursor: var(--checkbox-indicator-cursor-disabled);
+}
+
+.CheckboxLabel:has(.CheckboxRoot[data-disabled]) {
+  color: var(--checkbox-label-color-disabled);
+  cursor: var(--checkbox-label-cursor-disabled);
+}
+
+/* ============================================
+   CHECKBOX INDICATOR (only renders when checked)
+   ============================================ */
+
+.CheckboxIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--checkbox-icon-color);
+  line-height: 0; /* Prevent line-height from affecting layout */
+}
+
+/* ============================================
+   CHECKBOX ICON
+   ============================================ */
+
+.CheckboxIcon {
+  width: var(--checkbox-icon-size);
+  height: var(--checkbox-icon-size);
+  fill: currentColor;
+  display: block; /* Prevent inline spacing issues */
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.CheckboxRoot[data-size='sm'] {
+  width: var(--checkbox-size-sm);
+  height: var(--checkbox-size-sm);
+}
+
+.CheckboxRoot[data-size='sm'] .CheckboxIcon {
+  width: var(--checkbox-icon-size-sm);
+  height: var(--checkbox-icon-size-sm);
+}
+
+.CheckboxLabel:has(.CheckboxRoot[data-size='sm']) {
+  font-family: var(--checkbox-label-font-family-sm);
+  font-size: var(--checkbox-label-font-size-sm);
+  font-weight: var(--checkbox-label-font-weight-sm);
+  line-height: var(--checkbox-label-line-height-sm);
+  letter-spacing: var(--checkbox-label-letter-spacing-sm);
+}
+
+.CheckboxRoot[data-size='lg'] {
+  width: var(--checkbox-size-lg);
+  height: var(--checkbox-size-lg);
+}
+
+.CheckboxRoot[data-size='lg'] .CheckboxIcon {
+  width: var(--checkbox-icon-size-lg);
+  height: var(--checkbox-icon-size-lg);
+}
+
+.CheckboxLabel:has(.CheckboxRoot[data-size='lg']) {
+  font-family: var(--checkbox-label-font-family-lg);
+  font-size: var(--checkbox-label-font-size-lg);
+  font-weight: var(--checkbox-label-font-weight-lg);
+  line-height: var(--checkbox-label-line-height-lg);
+  letter-spacing: var(--checkbox-label-letter-spacing-lg);
+}
+
+/* ============================================
+   STYLE VARIANTS
+   ============================================ */
+
+/* Outline variant */
+.CheckboxRoot[data-variant='outline'] {
+  background: var(--checkbox-outline-bg);
+}
+
+.CheckboxRoot[data-variant='outline'][data-checked] {
+  background: var(--checkbox-outline-checked-bg);
+}
+
+.CheckboxRoot[data-variant='outline'][data-checked] .CheckboxIndicator {
+  color: var(--checkbox-outline-checked-icon-color);
+}
+
+.CheckboxRoot[data-variant='outline'][data-disabled][data-checked] .CheckboxIndicator {
+  color: var(--checkbox-outline-disabled-checked-icon-color);
+}
+
+/* Circular variant */
+.CheckboxRoot[data-variant='circular'],
+.CheckboxRoot[data-variant='circular-outline'] {
+  border-radius: var(--checkbox-circular-border-radius);
+}
+
+.CheckboxRoot[data-variant='circular-outline'] {
+  background: var(--checkbox-outline-bg);
+}
+
+.CheckboxRoot[data-variant='circular-outline'][data-checked] {
+  background: var(--checkbox-outline-checked-bg);
+}
+
+.CheckboxRoot[data-variant='circular-outline'][data-checked] .CheckboxIndicator {
+  color: var(--checkbox-outline-checked-icon-color);
+}
+
+.CheckboxRoot[data-variant='circular-outline'][data-disabled][data-checked] .CheckboxIndicator {
+  color: var(--checkbox-outline-disabled-checked-icon-color);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .CheckboxRoot {
+    transition: none;
+  }
+}

package/dist/styles/components/CheckboxGroup.css

@@ -0,0 +1,21 @@
+/* Checkbox Group - Mojave Theme */
+
+/* ============================================
+   GROUP WRAPPER
+   ============================================ */
+
+.CheckboxGroup {
+  display: var(--checkbox-group-display);
+  flex-direction: var(--checkbox-group-flex-direction);
+  gap: var(--checkbox-group-gap);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.CheckboxGroup[data-disabled] {
+  opacity: var(--checkbox-group-disabled-opacity);
+  cursor: var(--checkbox-group-disabled-cursor);
+  pointer-events: none;
+}

package/dist/styles/components/Collapsible.css

@@ -0,0 +1,115 @@
+/* Collapsible - Mojave Theme */
+
+.Collapsible {
+  display: var(--collapsible-root-display);
+  width: var(--collapsible-root-width);
+  min-height: var(--collapsible-root-min-height);
+  flex-direction: var(--collapsible-root-flex-direction);
+  justify-content: var(--collapsible-root-justify-content);
+  color: var(--collapsible-root-color);
+}
+
+.CollapsibleIcon {
+  width: var(--collapsible-icon-size);
+  height: var(--collapsible-icon-size);
+  font-size: var(--collapsible-icon-size);
+  transition: var(--collapsible-icon-transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.CollapsibleTrigger {
+  display: var(--collapsible-trigger-display);
+  align-items: var(--collapsible-trigger-align-items);
+  gap: var(--collapsible-trigger-gap);
+  margin: var(--collapsible-trigger-margin);
+  border: var(--collapsible-trigger-border);
+  outline: var(--collapsible-trigger-outline);
+  padding: var(--collapsible-trigger-padding);
+  border-radius: var(--collapsible-trigger-border-radius);
+  background-color: var(--collapsible-trigger-background-default);
+  color: var(--collapsible-trigger-color);
+  font-family: var(--collapsible-trigger-font-family);
+  font-size: var(--collapsible-trigger-font-size);
+  line-height: var(--collapsible-trigger-line-height);
+  font-weight: var(--collapsible-trigger-font-weight);
+  letter-spacing: var(--collapsible-trigger-letter-spacing);
+  cursor: var(--collapsible-trigger-cursor);
+}
+
+@media (hover: hover) {
+  .CollapsibleTrigger:hover {
+    background-color: var(--collapsible-trigger-background-hover);
+  }
+}
+
+.CollapsibleTrigger:active {
+  background-color: var(--collapsible-trigger-background-active);
+}
+
+.CollapsibleTrigger:focus-visible {
+  outline: var(--collapsible-trigger-focus-outline);
+}
+
+.CollapsibleTrigger[data-panel-open] .CollapsibleIcon {
+  transform: rotate(90deg);
+}
+
+.CollapsiblePanel {
+  display: var(--collapsible-panel-display);
+  height: var(--collapsible-panel-height);
+  flex-direction: var(--collapsible-panel-flex-direction);
+  justify-content: var(--collapsible-panel-justify-content);
+  overflow: var(--collapsible-panel-overflow);
+  font-family: var(--collapsible-panel-font-family);
+  font-size: var(--collapsible-panel-font-size);
+  font-weight: var(--collapsible-panel-font-weight);
+  line-height: var(--collapsible-panel-line-height);
+  letter-spacing: var(--collapsible-panel-letter-spacing);
+  transition: var(--collapsible-panel-transition);
+}
+
+.CollapsiblePanel[hidden]:not([hidden='until-found']) {
+  display: none;
+}
+
+.CollapsiblePanel[data-starting-style],
+.CollapsiblePanel[data-ending-style] {
+  height: 0;
+}
+
+.CollapsibleContent {
+  display: var(--collapsible-content-display);
+  flex-direction: var(--collapsible-content-flex-direction);
+  gap: var(--collapsible-content-gap);
+  margin-top: var(--collapsible-content-margin-top);
+  padding: var(--collapsible-content-padding);
+  border-radius: var(--collapsible-content-border-radius);
+  background-color: var(--collapsible-content-background);
+  color: var(--collapsible-content-color);
+  cursor: var(--collapsible-content-cursor);
+  font-family: var(--collapsible-content-font-family);
+  font-size: var(--collapsible-content-font-size);
+  font-weight: var(--collapsible-content-font-weight);
+  line-height: var(--collapsible-content-line-height);
+  letter-spacing: var(--collapsible-content-letter-spacing);
+}
+
+.CollapsibleContent p {
+  margin: 0;
+}
+
+.CollapsibleContent code {
+  display: block;
+  margin-top: var(--collapsible-panel-code-margin-top);
+  padding: var(--collapsible-panel-code-padding);
+  border-radius: var(--collapsible-panel-code-border-radius);
+  background: var(--collapsible-panel-code-background);
+  font-family: var(--collapsible-panel-code-font-family);
+  font-size: var(--collapsible-panel-code-font-size);
+  font-weight: var(--collapsible-panel-code-font-weight);
+  line-height: var(--collapsible-panel-code-line-height);
+  letter-spacing: var(--collapsible-panel-code-letter-spacing);
+}