@scattered-light/base-ui-theme 0.1.0

package/dist/styles/semantic/collapsible.css

@@ -0,0 +1,123 @@
+/* Collapsible Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --collapsible-root-display: flex;
+  --collapsible-root-width: 14rem;
+  --collapsible-root-min-height: 9rem;
+  --collapsible-root-flex-direction: column;
+  --collapsible-root-justify-content: center;
+  --collapsible-root-color: var(--theme-neutral-900);
+  
+  /* ============================================
+     ICON
+     ============================================ */
+  
+  --collapsible-icon-size: 0.75rem;
+  --collapsible-icon-transition: transform 150ms ease-out;
+  
+  /* ============================================
+     TRIGGER
+     ============================================ */
+  
+  --collapsible-trigger-display: flex;
+  --collapsible-trigger-align-items: center;
+  --collapsible-trigger-gap: var(--space-2);
+  --collapsible-trigger-margin: 0;
+  --collapsible-trigger-border: 0;
+  --collapsible-trigger-outline: 0;
+  --collapsible-trigger-padding: var(--space-1) var(--space-2);
+  --collapsible-trigger-border-radius: var(--theme-radius-item);
+  --collapsible-trigger-background-default: var(--theme-neutral-100);
+  --collapsible-trigger-background-hover: var(--theme-neutral-200);
+  --collapsible-trigger-background-active: var(--theme-neutral-200);
+  --collapsible-trigger-color: var(--theme-neutral-900);
+  --collapsible-trigger-font-family: var(--theme-font-base-subtitle-font-family);
+  --collapsible-trigger-font-size: var(--theme-font-base-subtitle-font-size);
+  --collapsible-trigger-line-height: var(--theme-font-base-subtitle-line-height);
+  --collapsible-trigger-font-weight: var(--theme-font-base-subtitle-font-weight);
+  --collapsible-trigger-letter-spacing: var(--theme-font-base-subtitle-letter-spacing);
+  --collapsible-trigger-cursor: pointer;
+  
+  /* Trigger Focus State */
+  --collapsible-trigger-focus-outline: var(--theme-a11y-focus-outline-width) solid var(--theme-primary-600);
+  
+  /* ============================================
+     PANEL
+     ============================================ */
+  
+  --collapsible-panel-display: flex;
+  --collapsible-panel-height: var(--collapsible-panel-height);
+  --collapsible-panel-flex-direction: column;
+  --collapsible-panel-justify-content: end;
+  --collapsible-panel-overflow: hidden;
+  --collapsible-panel-font-family: var(--theme-font-base-font-family);
+  --collapsible-panel-font-size: var(--theme-font-base-font-size);
+  --collapsible-panel-font-weight: var(--theme-font-base-font-weight);
+  --collapsible-panel-line-height: var(--theme-font-base-line-height);
+  --collapsible-panel-letter-spacing: var(--theme-font-base-letter-spacing);
+  --collapsible-panel-transition: all 150ms ease-out;
+  
+  /* Panel Text */
+  --collapsible-panel-text-color: var(--theme-neutral-900);
+  --collapsible-panel-text-line-height: var(--theme-font-base-line-height);
+  
+  /* Panel Code */
+  --collapsible-panel-code-margin-top: var(--space-2);
+  --collapsible-panel-code-padding: var(--space-2);
+  --collapsible-panel-code-background: var(--theme-neutral-50);
+  --collapsible-panel-code-border-radius: var(--theme-radius-item);
+  --collapsible-panel-code-font-family: var(--theme-font-code-font-family);
+  --collapsible-panel-code-font-size: var(--theme-font-code-font-size);
+  --collapsible-panel-code-font-weight: var(--theme-font-code-font-weight);
+  --collapsible-panel-code-line-height: var(--theme-font-code-line-height);
+  --collapsible-panel-code-letter-spacing: var(--theme-font-code-letter-spacing);
+  
+  /* ============================================
+     CONTENT
+     ============================================ */
+  
+  --collapsible-content-display: flex;
+  --collapsible-content-flex-direction: column;
+  --collapsible-content-gap: var(--space-2);
+  --collapsible-content-margin-top: var(--space-1);
+  --collapsible-content-padding: var(--space-2) 0 var(--space-2) 1.75rem;
+  --collapsible-content-border-radius: var(--theme-radius-item);
+  --collapsible-content-background: var(--theme-neutral-100);
+  --collapsible-content-cursor: text;
+  --collapsible-content-color: var(--theme-neutral-900);
+  --collapsible-content-font-family: var(--theme-font-base-font-family);
+  --collapsible-content-font-size: var(--theme-font-base-font-size);
+  --collapsible-content-font-weight: var(--theme-font-base-font-weight);
+  --collapsible-content-line-height: var(--theme-font-base-line-height);
+  --collapsible-content-letter-spacing: var(--theme-font-base-letter-spacing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --collapsible-root-color: var(--theme-neutral-100);
+    --collapsible-trigger-background-default: var(--theme-neutral-800);
+    --collapsible-trigger-background-hover: var(--theme-neutral-700);
+    --collapsible-trigger-background-active: var(--theme-neutral-700);
+    --collapsible-trigger-color: var(--theme-neutral-100);
+    --collapsible-content-background: var(--theme-neutral-800);
+    --collapsible-content-color: var(--theme-neutral-100);
+  }
+}
+
+[data-theme='dark'] {
+  --collapsible-root-color: var(--theme-neutral-100);
+  --collapsible-trigger-background-default: var(--theme-neutral-800);
+  --collapsible-trigger-background-hover: var(--theme-neutral-700);
+  --collapsible-trigger-background-active: var(--theme-neutral-700);
+  --collapsible-trigger-color: var(--theme-neutral-100);
+  --collapsible-content-background: var(--theme-neutral-800);
+  --collapsible-content-color: var(--theme-neutral-100);
+}

package/dist/styles/semantic/combobox.css

@@ -0,0 +1,325 @@
+/* Combobox Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --combobox-root-display: flex;
+  --combobox-root-flex-direction: column;
+  --combobox-root-gap: var(--space-2);
+  --combobox-root-width: 100%;
+  --combobox-root-max-width: 400px;
+  --combobox-min-height: 42px;
+  
+  /* ============================================
+     LABEL
+     ============================================ */
+  
+  --combobox-label-font-family: var(--theme-font-base-label-font-family);
+  --combobox-label-font-size: var(--theme-font-base-label-font-size);
+  --combobox-label-font-weight: var(--theme-font-base-label-font-weight);
+  --combobox-label-line-height: var(--theme-font-base-label-line-height);
+  --combobox-label-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --combobox-label-color: var(--text-primary);
+  --combobox-label-margin-bottom: var(--space-1);
+  
+  /* ============================================
+     INPUT WRAPPER
+     ============================================ */
+  
+  --combobox-input-wrapper-display: flex;
+  --combobox-input-wrapper-align-items: center;
+  --combobox-input-wrapper-position: relative;
+  
+  /* ============================================
+     INPUT (reuses base input tokens)
+     ============================================ */
+  
+  --combobox-input-width: var(--input-width);
+  --combobox-input-height: var(--input-height);
+  --combobox-input-padding-block: var(--input-padding-block);
+  --combobox-input-padding-inline-start: var(--input-padding-inline);
+  --combobox-input-padding-inline-end: var(--space-10); /* Extra space for action buttons */
+  --combobox-input-font-family: var(--input-font-family);
+  --combobox-input-font-size: var(--input-font-size);
+  --combobox-input-font-weight: var(--input-font-weight);
+  --combobox-input-line-height: var(--input-line-height);
+  --combobox-input-letter-spacing: var(--input-letter-spacing);
+  --combobox-input-color: var(--input-color);
+  --combobox-input-background: var(--input-background);
+  --combobox-input-border-width: var(--input-border-width);
+  --combobox-input-border-color: var(--input-border-color);
+  --combobox-input-border-radius: var(--input-border-radius);
+  --combobox-input-transition: var(--input-transition);
+  --combobox-input-placeholder-color: var(--input-placeholder-color);
+  
+  /* Input states (reuse from base input) */
+  --combobox-input-border-color-hover: var(--input-border-color-hover);
+  --combobox-input-border-color-focus: var(--input-border-color-focus);
+  --combobox-input-shadow-focus: var(--input-shadow-focus);
+  --combobox-input-background-disabled: var(--input-background-disabled);
+  --combobox-input-color-disabled: var(--input-color-disabled);
+  --combobox-input-cursor-disabled: var(--input-cursor-disabled);
+  
+  /* ============================================
+     ACTION BUTTONS
+     ============================================ */
+  
+  --combobox-action-buttons-display: flex;
+  --combobox-action-buttons-gap: var(--space-1);
+  --combobox-action-buttons-position: absolute;
+  --combobox-action-buttons-right: var(--space-3);
+  
+  /* ============================================
+     CLEAR BUTTON
+     ============================================ */
+  
+  --combobox-clear-position: relative;
+  --combobox-clear-size: var(--space-6);
+  --combobox-clear-bg: transparent;
+  --combobox-clear-bg-hover: var(--surface-raised);
+  --combobox-clear-color: var(--text-tertiary);
+  --combobox-clear-color-hover: var(--text-primary);
+  --combobox-clear-border-radius: var(--theme-radius-item);
+  --combobox-clear-font-size: var(--theme-maximize-xl-font-size);
+  --combobox-clear-transition: all 0.2s ease;
+  
+  /* ============================================
+     TRIGGER BUTTON
+     ============================================ */
+  
+  --combobox-trigger-position: relative;
+  --combobox-trigger-size: var(--space-6);
+  --combobox-trigger-bg: transparent;
+  --combobox-trigger-bg-hover: var(--surface-raised);
+  --combobox-trigger-color: var(--text-tertiary);
+  --combobox-trigger-color-hover: var(--text-primary);
+  --combobox-trigger-border-radius: var(--theme-radius-item);
+  --combobox-trigger-font-size: var(--theme-maximize-xl-font-size);
+  --combobox-trigger-transition: all 0.2s ease;
+  
+  /* ============================================
+     CHIPS (Multiple Select)
+     ============================================ */
+  
+  --combobox-chip-background: var(--theme-neutral-200);
+  --combobox-chip-color: var(--text-primary);
+  --combobox-chip-border-radius: var(--theme-radius-item);
+  --combobox-chip-font-family: var(--theme-font-condense-font-family);
+  --combobox-chip-font-size: var(--theme-font-condense-font-size);
+  --combobox-chip-font-weight: var(--theme-font-condense-font-weight);
+  --combobox-chip-line-height: var(--theme-font-condense-line-height);
+  --combobox-chip-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --combobox-chip-padding: var(--space-1) var(--space-2);
+  
+  --combobox-chip-remove-border-radius: var(--theme-radius-item);
+  --combobox-chip-remove-background-hover: var(--theme-neutral-300);
+  --combobox-chip-remove-icon-size: 14px;
+  
+  /* ============================================
+     POSITIONER & POPUP
+     ============================================ */
+  
+  --combobox-positioner-z-index: 1500;
+  
+  --combobox-popup-margin-block-start: var(--space-1);
+  --combobox-popup-bg: var(--surface-base);
+  --combobox-popup-border-width: var(--theme-stroke-default);
+  --combobox-popup-border-color: var(--border-default);
+  --combobox-popup-border-radius: var(--input-border-radius);
+  --combobox-popup-shadow: var(--shadow-lg);
+  --combobox-popup-animation-duration: 0.2s;
+  --combobox-popup-animation-easing: ease-out;
+  
+  /* ============================================
+     LIST
+     ============================================ */
+  
+  --combobox-list-max-height: 300px;
+  --combobox-list-padding: var(--space-1);
+  
+  /* ============================================
+     ITEM
+     ============================================ */
+  
+  --combobox-item-padding-block: var(--space-2-5);
+  --combobox-item-padding-inline: var(--space-3);
+  --combobox-item-font-family: var(--theme-font-base-font-family);
+  --combobox-item-font-size: var(--theme-font-base-font-size);
+  --combobox-item-font-weight: var(--theme-font-base-font-weight);
+  --combobox-item-line-height: var(--theme-font-base-line-height);
+  --combobox-item-letter-spacing: var(--theme-font-base-letter-spacing);
+  --combobox-item-color: var(--text-primary);
+  --combobox-item-bg-hover: var(--theme-primary-100);
+  --combobox-item-color-hover: var(--theme-primary-800);
+  --combobox-item-bg-selected: var(--theme-primary-200);
+  --combobox-item-color-selected: var(--theme-primary-900);
+  --combobox-item-font-weight-selected: var(--font-weight-normal);
+  --combobox-item-color-disabled: var(--text-disabled);
+  --combobox-item-opacity-disabled: 0.5;
+  --combobox-item-border-radius: var(--theme-radius-item);
+  --combobox-item-transition: all 0.15s ease;
+  
+  /* ============================================
+     ITEM INDICATOR
+     ============================================ */
+  
+  --combobox-item-indicator-display: flex;
+  --combobox-item-indicator-align-items: center;
+  --combobox-item-indicator-justify-content: center;
+  --combobox-item-indicator-width: 16px;
+  --combobox-item-indicator-height: 16px;
+  --combobox-item-indicator-color: var(--theme-primary-600);
+  
+  /* ============================================
+     EMPTY STATE
+     ============================================ */
+  
+  --combobox-empty-padding-block: var(--space-6);
+  --combobox-empty-padding-inline: var(--space-3);
+  --combobox-empty-text-align: center;
+  --combobox-empty-color: var(--text-tertiary);
+  --combobox-empty-font-family: var(--theme-font-condense-font-family);
+  --combobox-empty-font-size: var(--theme-font-condense-font-size);
+  --combobox-empty-font-weight: var(--theme-font-condense-font-weight);
+  --combobox-empty-line-height: var(--theme-font-condense-line-height);
+  --combobox-empty-letter-spacing: var(--theme-font-condense-letter-spacing);
+  
+  /* ============================================
+     STATUS
+     ============================================ */
+  
+  --combobox-status-padding: var(--space-2);
+  --combobox-status-color: var(--text-secondary);
+  --combobox-status-font-family: var(--theme-font-condense-font-family);
+  --combobox-status-font-size: var(--theme-font-condense-font-size);
+  --combobox-status-font-weight: var(--theme-font-condense-font-weight);
+  --combobox-status-line-height: var(--theme-font-condense-line-height);
+  --combobox-status-letter-spacing: var(--theme-font-condense-letter-spacing);
+  
+  /* ============================================
+     GROUP
+     ============================================ */
+  
+  --combobox-group-padding: 0;
+  
+  --combobox-group-label-padding-block-start: var(--space-2);
+  --combobox-group-label-padding-block-end: var(--space-1);
+  --combobox-group-label-padding-inline: var(--space-3);
+  --combobox-group-label-font-family: var(--theme-font-condense-subtitle-label-font-family);
+  --combobox-group-label-font-size: var(--theme-font-condense-subtitle-label-font-size);
+  --combobox-group-label-font-weight: var(--theme-font-condense-subtitle-label-font-weight);
+  --combobox-group-label-line-height: var(--theme-font-condense-subtitle-label-line-height);
+  --combobox-group-label-letter-spacing: var(--theme-font-condense-subtitle-label-letter-spacing);
+  --combobox-group-label-color: var(--text-secondary);
+  --combobox-group-label-text-transform: var(--theme-font-condense-subtitle-label-text-transform);
+  
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --combobox-separator-height: var(--theme-stroke-default);
+  --combobox-separator-bg: var(--border-subtle);
+  --combobox-separator-margin-block: var(--space-1);
+  
+  /* ============================================
+     SELECT-STYLE TRIGGER (Input inside popup)
+     ============================================ */
+  
+  --combobox-select-trigger-display: flex;
+  --combobox-select-trigger-align-items: center;
+  --combobox-select-trigger-justify-content: space-between;
+  --combobox-select-trigger-width: 100%;
+  --combobox-select-trigger-height: var(--input-height);
+  --combobox-select-trigger-padding-block: var(--input-padding-block);
+  --combobox-select-trigger-padding-inline: var(--input-padding-inline);
+  --combobox-select-trigger-font-family: var(--input-font-family);
+  --combobox-select-trigger-font-size: var(--input-font-size);
+  --combobox-select-trigger-font-weight: var(--input-font-weight);
+  --combobox-select-trigger-line-height: var(--input-line-height);
+  --combobox-select-trigger-letter-spacing: var(--input-letter-spacing);
+  --combobox-select-trigger-color: var(--input-color);
+  --combobox-select-trigger-background: var(--input-background);
+  --combobox-select-trigger-border-width: var(--input-border-width);
+  --combobox-select-trigger-border-color: var(--input-border-color);
+  --combobox-select-trigger-border-radius: var(--input-border-radius);
+  --combobox-select-trigger-transition: var(--input-transition);
+  
+  --combobox-select-trigger-border-color-hover: var(--input-border-color-hover);
+  --combobox-select-trigger-border-color-focus: var(--input-border-color-focus);
+  --combobox-select-trigger-shadow-focus: var(--input-shadow-focus);
+  
+  /* ============================================
+     ICON (chevron in trigger)
+     ============================================ */
+  
+  --combobox-icon-size: 16px;
+  --combobox-icon-color: var(--text-tertiary);
+  
+  /* ============================================
+     INPUT CONTAINER (inside popup)
+     ============================================ */
+  
+  --combobox-input-container-padding: var(--space-2);
+  --combobox-input-container-border-bottom-width: var(--theme-stroke-default);
+  --combobox-input-container-border-bottom-color: var(--border-subtle);
+  
+  /* ============================================
+     ASYNC/STATUS STYLES
+     ============================================ */
+  
+  --combobox-spinner-size: 14px;
+  --combobox-spinner-border-width: var(--theme-stroke-emphasis);
+  --combobox-spinner-color: var(--theme-primary-600);
+  
+  --combobox-item-title-font-family: var(--theme-font-base-trigger-font-family);
+  --combobox-item-title-font-size: var(--theme-font-base-trigger-font-size);
+  --combobox-item-title-font-weight: var(--theme-font-base-trigger-font-weight);
+  --combobox-item-title-line-height: var(--theme-font-base-trigger-line-height);
+  --combobox-item-title-letter-spacing: var(--theme-font-base-trigger-letter-spacing);
+  --combobox-item-title-color: var(--text-primary);
+  
+  --combobox-item-subtitle-font-family: var(--theme-font-condense-font-family);
+  --combobox-item-subtitle-font-size: var(--theme-font-condense-font-size);
+  --combobox-item-subtitle-font-weight: var(--theme-font-condense-font-weight);
+  --combobox-item-subtitle-line-height: var(--theme-font-condense-line-height);
+  --combobox-item-subtitle-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --combobox-item-subtitle-color: var(--text-secondary);
+  --combobox-item-subtitle-margin-top: var(--space-0-5);
+  
+  --combobox-item-username-color: var(--theme-primary-600);
+  --combobox-item-username-font-family: var(--theme-font-condense-font-family);
+  --combobox-item-username-font-weight: var(--font-weight-medium);
+  --combobox-item-username-letter-spacing: var(--theme-font-condense-letter-spacing);
+  
+  --combobox-item-email-font-family: var(--theme-font-minimize-font-family);
+  --combobox-item-email-font-size: var(--theme-font-minimize-font-size);
+  --combobox-item-email-font-weight: var(--theme-font-minimize-font-weight);
+  --combobox-item-email-line-height: var(--theme-font-minimize-line-height);
+  --combobox-item-email-letter-spacing: var(--theme-font-minimize-letter-spacing);
+  --combobox-item-email-color: var(--text-tertiary);
+  --combobox-item-email-margin-top: var(--space-0-5);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --combobox-input-background: var(--input-background);
+    --combobox-popup-bg: var(--theme-neutral-50);
+    --combobox-clear-bg-hover: var(--theme-neutral-100);
+    --combobox-trigger-bg-hover: var(--theme-neutral-100);
+    --combobox-select-trigger-background: var(--input-background);
+  }
+}
+
+[data-theme='dark'] {
+  --combobox-input-background: var(--input-background);
+  --combobox-popup-bg: var(--theme-neutral-50);
+  --combobox-clear-bg-hover: var(--theme-neutral-100);
+  --combobox-trigger-bg-hover: var(--theme-neutral-100);
+  --combobox-select-trigger-background: var(--input-background);
+}

package/dist/styles/semantic/context-menu.css

@@ -0,0 +1,131 @@
+/* Context Menu Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     TRIGGER
+     ============================================ */
+  
+  --context-menu-trigger-cursor: context-menu;
+  --context-menu-trigger-user-select: none;
+  
+  /* ============================================
+     POSITIONER
+     ============================================ */
+  
+  --context-menu-positioner-z-index: 1500;
+  
+  /* ============================================
+     POPUP
+     ============================================ */
+  
+  --context-menu-popup-min-width: 200px;
+  --context-menu-popup-background: var(--theme-surface-canvas);
+  --context-menu-popup-border: var(--theme-stroke-default) solid var(--theme-neutral-300);
+  --context-menu-popup-border-radius: var(--theme-radius-surface);
+  --context-menu-popup-padding: var(--space-1);
+  --context-menu-popup-shadow: var(--shadow-lg);
+  --context-menu-popup-animation-duration: 0.15s;
+  --context-menu-popup-animation-easing: ease-out;
+  
+  /* ============================================
+     ITEM (includes regular items, checkbox items, radio items)
+     ============================================ */
+  
+  --context-menu-item-padding-block: var(--space-2);
+  --context-menu-item-padding-inline: var(--space-3);
+  --context-menu-item-font-family: var(--theme-font-base-font-family);
+  --context-menu-item-font-size: var(--theme-font-base-font-size);
+  --context-menu-item-font-weight: var(--theme-font-base-font-weight);
+  --context-menu-item-line-height: var(--theme-font-base-line-height);
+  --context-menu-item-letter-spacing: var(--theme-font-base-letter-spacing);
+  --context-menu-item-color: var(--text-primary);
+  --context-menu-item-cursor: pointer;
+  --context-menu-item-border-radius: var(--theme-radius-item);
+  --context-menu-item-transition: all 0.15s ease;
+  --context-menu-item-gap: var(--space-2);
+  
+  /* Item states */
+  --context-menu-item-background-hover: var(--theme-primary-100);
+  --context-menu-item-color-hover: var(--theme-primary-800);
+  --context-menu-item-color-disabled: var(--text-disabled);
+  --context-menu-item-cursor-disabled: not-allowed;
+  --context-menu-item-opacity-disabled: 0.5;
+  
+  /* ============================================
+     CHECKBOX & RADIO ITEM INDICATOR
+     ============================================ */
+  
+  --context-menu-item-indicator-width: 16px;
+  --context-menu-item-indicator-height: 16px;
+  --context-menu-item-indicator-color: var(--theme-primary-700);
+  --context-menu-item-indicator-font-size: 12px;
+  
+  /* ============================================
+     GROUP
+     ============================================ */
+  
+  --context-menu-group-padding: 0;
+  
+  /* ============================================
+     GROUP LABEL
+     ============================================ */
+  
+  --context-menu-group-label-padding-block-start: var(--space-2);
+  --context-menu-group-label-padding-block-end: var(--space-1);
+  --context-menu-group-label-padding-inline: var(--space-3);
+  --context-menu-group-label-font-family: var(--theme-font-minimize-subtitle-label-font-family);
+  --context-menu-group-label-font-size: var(--theme-font-minimize-subtitle-label-font-size);
+  --context-menu-group-label-font-weight: var(--theme-font-minimize-subtitle-label-font-weight);
+  --context-menu-group-label-line-height: var(--theme-font-minimize-subtitle-label-line-height);
+  --context-menu-group-label-color: var(--text-secondary);
+  --context-menu-group-label-text-transform: var(--theme-font-minimize-subtitle-label-text-transform);
+  --context-menu-group-label-letter-spacing: var(--theme-font-minimize-subtitle-label-letter-spacing);
+  
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --context-menu-separator-height: var(--theme-stroke-default);
+  --context-menu-separator-background: var(--theme-neutral-300);
+  --context-menu-separator-margin-block: var(--space-1);
+  
+  /* ============================================
+     SUBMENU TRIGGER
+     ============================================ */
+  
+  --context-menu-submenu-trigger-padding-inline-end: var(--space-8);
+  --context-menu-submenu-arrow-color: var(--text-tertiary);
+  --context-menu-submenu-arrow-font-size: var(--theme-font-base-font-size);
+  
+  /* ============================================
+     ARROW (Popup arrow/pointer)
+     ============================================ */
+  
+  --context-menu-arrow-width: 10px;
+  --context-menu-arrow-height: 10px;
+  --context-menu-arrow-fill: var(--theme-surface-canvas);
+  --context-menu-arrow-stroke: var(--theme-neutral-300);
+  --context-menu-arrow-stroke-width: var(--theme-stroke-default);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --context-menu-popup-background: var(--theme-neutral-100);
+    --context-menu-popup-border: var(--theme-stroke-default) solid var(--theme-neutral-600);
+    --context-menu-separator-background: var(--theme-neutral-600);
+    --context-menu-arrow-fill: var(--theme-neutral-100);
+    --context-menu-arrow-stroke: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --context-menu-popup-background: var(--theme-neutral-100);
+  --context-menu-popup-border: var(--theme-stroke-default) solid var(--theme-neutral-600);
+  --context-menu-separator-background: var(--theme-neutral-600);
+  --context-menu-arrow-fill: var(--theme-neutral-100);
+  --context-menu-arrow-stroke: var(--theme-neutral-600);
+}

package/dist/styles/semantic/dialog.css

@@ -0,0 +1,91 @@
+/* Dialog Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     BACKDROP
+     ============================================ */
+  
+  --dialog-backdrop-background: color-mix(in srgb, var(--theme-overlay-base) 50%, transparent);
+  --dialog-backdrop-z-index: 1000;
+  --dialog-backdrop-animation-duration: 0.2s;
+  --dialog-backdrop-animation-easing: ease-out;
+  
+  /* ============================================
+     POPUP
+     ============================================ */
+  
+  --dialog-popup-width: 90vw;
+  --dialog-popup-max-width: 500px;
+  --dialog-popup-max-height: 90vh;
+  --dialog-popup-background: var(--theme-surface-canvas);
+  --dialog-popup-border-width: var(--theme-stroke-default);
+  --dialog-popup-border-color: var(--theme-neutral-300);
+  --dialog-popup-border-radius: var(--theme-radius-surface);
+  --dialog-popup-box-shadow: var(--shadow-xl);
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-gap: var(--space-4);
+  --dialog-popup-z-index: 1001;
+  --dialog-popup-animation-duration: 0.2s;
+  --dialog-popup-animation-easing: ease-out;
+  
+  /* ============================================
+     TITLE — display xl
+     ============================================ */
+  
+  --dialog-title-font-family: var(--theme-maximize-xl-font-family);
+  --dialog-title-font-size: var(--theme-maximize-xl-font-size);
+  --dialog-title-font-weight: var(--theme-maximize-xl-font-weight);
+  --dialog-title-line-height: var(--theme-maximize-xl-line-height);
+  --dialog-title-letter-spacing: var(--theme-maximize-xl-letter-spacing);
+  --dialog-title-color: var(--text-primary);
+  
+  /* ============================================
+     DESCRIPTION — body
+     ============================================ */
+  
+  --dialog-description-font-family: var(--theme-font-base-font-family);
+  --dialog-description-font-size: var(--theme-font-base-font-size);
+  --dialog-description-font-weight: var(--theme-font-base-font-weight);
+  --dialog-description-line-height: var(--theme-font-base-line-height);
+  --dialog-description-letter-spacing: var(--theme-font-base-letter-spacing);
+  --dialog-description-color: var(--text-secondary);
+  
+  /* ============================================
+     CONTENT (scrollable area)
+     ============================================ */
+  
+  --dialog-content-margin: var(--space-4) 0;
+  --dialog-content-padding-right: var(--space-2);
+  
+  /* ============================================
+     FORM (when form is inside dialog)
+     ============================================ */
+  
+  --dialog-form-gap: var(--space-4);
+  --dialog-form-margin: var(--space-4) 0;
+  
+  /* ============================================
+     ACTIONS
+     ============================================ */
+  
+  --dialog-actions-display: flex;
+  --dialog-actions-gap: var(--space-3);
+  --dialog-actions-justify-content: flex-end;
+  --dialog-actions-margin-top: var(--space-6);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dialog-popup-background: var(--theme-neutral-50);
+    --dialog-popup-border-color: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --dialog-popup-background: var(--theme-neutral-50);
+  --dialog-popup-border-color: var(--theme-neutral-600);
+}

package/dist/styles/semantic/dropdown.css

@@ -0,0 +1,16 @@
+/* Dropdown Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     DROPDOWN TOKENS
+     ============================================ */
+  
+  --dropdown-bg: var(--surface-overlay);
+  --dropdown-border-color: var(--border-default);
+  --dropdown-border-radius: var(--theme-radius-surface);
+  --dropdown-shadow: var(--shadow-lg);
+  --dropdown-padding: var(--space-2);
+  --dropdown-item-padding-block: var(--space-2);
+  --dropdown-item-padding-inline: var(--space-inline-sm);
+  --dropdown-item-border-radius: var(--theme-radius-item);
+}