@scattered-light/base-ui-theme 0.1.0

package/dist/styles/components/Toggle.css

@@ -0,0 +1,103 @@
+/* Toggle - Mojave Theme */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.Toggle {
+  all: unset;
+  box-sizing: border-box;
+  display: var(--toggle-display);
+  align-items: var(--toggle-align-items);
+  justify-content: var(--toggle-justify-content);
+  gap: var(--toggle-gap);
+  padding-block: var(--toggle-padding-block);
+  padding-inline: var(--toggle-padding-inline);
+  font-family: var(--toggle-font-family);
+  font-size: var(--toggle-font-size);
+  font-weight: var(--toggle-font-weight);
+  line-height: var(--toggle-line-height);
+  letter-spacing: var(--toggle-letter-spacing);
+  color: var(--toggle-color);
+  background: var(--toggle-background);
+  border: var(--toggle-border-width) solid var(--toggle-border-color);
+  border-radius: var(--toggle-border-radius);
+  cursor: var(--toggle-cursor);
+  transition: var(--toggle-transition);
+  user-select: var(--toggle-user-select);
+}
+
+.Toggle:hover:not([data-disabled]):not(:disabled) {
+  background: var(--toggle-background-hover);
+  border-color: var(--toggle-border-color-hover);
+}
+
+.Toggle[data-pressed],
+.Toggle[aria-pressed='true'] {
+  background: var(--toggle-background-pressed);
+  color: var(--toggle-color-pressed);
+  border-color: var(--toggle-border-color-pressed);
+}
+
+.Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled),
+.Toggle[aria-pressed='true']:hover:not([data-disabled]):not(:disabled) {
+  background: var(--toggle-background-pressed-hover);
+  border-color: var(--toggle-border-color-pressed-hover);
+}
+
+.Toggle:focus-visible {
+  outline: var(--toggle-outline-focus);
+  outline-offset: var(--toggle-outline-offset-focus);
+}
+
+.Toggle[data-disabled],
+.Toggle:disabled {
+  opacity: var(--toggle-opacity-disabled);
+  cursor: var(--toggle-cursor-disabled);
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.Toggle[data-size='sm'] {
+  padding-block: var(--toggle-padding-block-sm);
+  padding-inline: var(--toggle-padding-inline-sm);
+  font-family: var(--toggle-font-family-sm);
+  font-size: var(--toggle-font-size-sm);
+  font-weight: var(--toggle-font-weight-sm);
+  line-height: var(--toggle-line-height-sm);
+  letter-spacing: var(--toggle-letter-spacing-sm);
+  border-radius: var(--toggle-border-radius-sm);
+}
+
+.Toggle[data-size='lg'] {
+  padding-block: var(--toggle-padding-block-lg);
+  padding-inline: var(--toggle-padding-inline-lg);
+  font-family: var(--toggle-font-family-lg);
+  font-size: var(--toggle-font-size-lg);
+  font-weight: var(--toggle-font-weight-lg);
+  line-height: var(--toggle-line-height-lg);
+  letter-spacing: var(--toggle-letter-spacing-lg);
+  border-radius: var(--toggle-border-radius-lg);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.Toggle svg {
+  width: 1.25em;
+  height: 1.25em;
+  flex-shrink: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .Toggle {
+    transition: none;
+  }
+}

package/dist/styles/components/ToggleGroup.css

@@ -0,0 +1,19 @@
+/* Toggle Group - Mojave Theme */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.ToggleGroup {
+  display: var(--toggle-group-display);
+  gap: var(--toggle-group-gap);
+  padding: var(--toggle-group-padding);
+  background: var(--toggle-group-background);
+  border-radius: var(--toggle-group-border-radius);
+  border: var(--toggle-group-border-width) solid var(--toggle-group-border-color);
+}
+
+/* Adjust toggle styles when inside a group */
+.ToggleGroup .Toggle {
+  border-radius: var(--radius-sm);
+}

package/dist/styles/components/Toolbar.css

@@ -0,0 +1,78 @@
+/* Toolbar - Mojave Theme */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.Toolbar {
+  display: var(--toolbar-display);
+  align-items: var(--toolbar-align-items);
+  gap: var(--toolbar-gap);
+  padding: var(--toolbar-padding);
+  background: var(--toolbar-background);
+  border-radius: var(--toolbar-border-radius);
+  border: var(--toolbar-border-width) solid var(--toolbar-border-color);
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.ToolbarGroup {
+  display: var(--toolbar-group-display);
+  align-items: var(--toolbar-group-align-items);
+  gap: var(--toolbar-group-gap);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.ToolbarSeparator {
+  width: var(--toolbar-separator-width);
+  height: var(--toolbar-separator-height);
+  background: var(--toolbar-separator-background);
+  margin-inline: var(--toolbar-separator-margin-inline);
+  border: none;
+}
+
+/* ============================================
+   BUTTON (inherits from Button component)
+   ============================================ */
+
+.Toolbar .ToolbarButton {
+  /* Buttons inside toolbar use existing Button styles */
+}
+
+/* ============================================
+   LINK
+   ============================================ */
+
+.ToolbarLink {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.ToolbarLink:hover {
+  color: var(--text-primary);
+}
+
+.ToolbarLink:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   INPUT (inherits from Input component)
+   ============================================ */
+
+.Toolbar .ToolbarInput {
+  /* Inputs inside toolbar use existing Input styles */
+  max-width: 200px;
+}

package/dist/styles/components/Tooltip.css

@@ -0,0 +1,87 @@
+/* Tooltip - Mojave Theme */
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.TooltipTrigger {
+  /* Trigger can be any element, no specific styles needed */
+  cursor: help;
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.TooltipPositioner {
+  z-index: var(--tooltip-positioner-z-index);
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.TooltipPopup {
+  background: var(--tooltip-popup-background);
+  color: var(--tooltip-popup-color);
+  padding-block: var(--tooltip-popup-padding-block);
+  padding-inline: var(--tooltip-popup-padding-inline);
+  border-radius: var(--tooltip-popup-border-radius);
+  font-family: var(--tooltip-popup-font-family);
+  font-size: var(--tooltip-popup-font-size);
+  font-weight: var(--tooltip-popup-font-weight);
+  line-height: var(--tooltip-popup-line-height);
+  letter-spacing: var(--tooltip-popup-letter-spacing);
+  max-width: var(--tooltip-popup-max-width);
+  box-shadow: var(--tooltip-popup-box-shadow);
+  word-wrap: break-word;
+  user-select: none;
+}
+
+/* Animation states */
+.TooltipPopup[data-starting-style] {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.TooltipPopup[data-open] {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity var(--tooltip-popup-animation-duration) var(--tooltip-popup-animation-easing),
+              transform var(--tooltip-popup-animation-duration) var(--tooltip-popup-animation-easing);
+}
+
+.TooltipPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity var(--tooltip-popup-animation-duration) var(--tooltip-popup-animation-easing),
+              transform var(--tooltip-popup-animation-duration) var(--tooltip-popup-animation-easing);
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.TooltipArrow {
+  width: var(--tooltip-arrow-width);
+  height: var(--tooltip-arrow-height);
+}
+
+.TooltipArrow svg {
+  fill: var(--tooltip-arrow-fill);
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .TooltipPopup {
+    transition: none;
+  }
+  
+  .TooltipPopup[data-starting-style],
+  .TooltipPopup[data-ending-style] {
+    transform: none;
+  }
+}

package/dist/styles/index.css

@@ -0,0 +1,103 @@
+/* Mojave Design System - Main Entry Point */
+@import '@material-symbols/font-400/outlined.css';
+
+/* Base styles */
+@import './base/colors.css';
+@import './base/global.css';
+@import './base/spacing.css';
+@import './base/borders.css';
+@import './base/shadows.css';
+@import './base/breakpoints.css';
+@import './base/z-index.css';
+@import './base/transitions.css';
+@import './base/typography.css';
+@import './base/reset.css';
+@import './base/reset-accessibility.css';
+
+/* Theme roles (palette → semantic steps) */
+@import './theme/theme-roles.css';
+@import './theme/theme-primitives.css';
+@import './theme/theme-spacing.css';
+@import './theme/theme-typography.css';
+@import './theme/theme-radius.css';
+@import './theme/theme-stroke.css';
+@import './theme/theme-accessibility.css';
+
+/* Semantic token files */
+@import './semantic/accessibility.css';
+@import './semantic/accordion.css';
+@import './semantic/alert-dialog.css';
+@import './semantic/autocomplete.css';
+@import './semantic/avatar.css';
+@import './semantic/badge.css';
+@import './semantic/button.css';
+@import './semantic/checkbox.css';
+@import './semantic/checkbox-group.css';
+@import './semantic/card.css';
+@import './semantic/context-menu.css';
+@import './semantic/dialog.css';
+@import './semantic/dropdown.css';
+@import './semantic/input.css';
+@import './semantic/menu.css';
+@import './semantic/menubar.css';
+@import './semantic/modal.css';
+@import './semantic/navigation-menu.css';
+@import './semantic/number-field.css';
+@import './semantic/popover.css';
+@import './semantic/preview-card.css';
+@import './semantic/progress.css';
+@import './semantic/radio.css';
+@import './semantic/scroll-area.css';
+@import './semantic/select.css';
+@import './semantic/slider.css';
+@import './semantic/switch.css';
+@import './semantic/tabs.css'; 
+@import './semantic/toast.css'; 
+@import './semantic/toggle.css';
+@import './semantic/toggle-group.css';
+@import './semantic/toolbar.css';
+@import './semantic/tooltip.css';
+@import './semantic/ag-grid.css';
+
+/* Utility Styles */
+@import './utilities/color-styles.css';
+@import './utilities/text-styles.css';
+@import './utilities/layout-styles.css';
+
+/* Component styles */
+@import './components/Accordion.css';
+@import './components/AlertDialog.css';
+@import './components/Autocomplete.css';
+@import './components/Avatar.css';
+@import './components/Button.css';
+@import './components/Checkbox.css';
+@import './components/CheckboxGroup.css';
+@import './components/Collapsible.css';
+@import './components/Combobox.css';
+@import './components/ContextMenu.css';
+@import './components/Dialog.css';
+@import './components/Field.css';
+@import './components/Fieldset.css';
+@import './components/Form.css';
+@import './components/Input.css';
+@import './components/Menu.css';
+@import './components/Menubar.css';
+@import './components/Meter.css';
+@import './components/NavigationMenu.css';
+@import './components/NumberField.css';
+@import './components/Popover.css';
+@import './components/PreviewCard.css';
+@import './components/Progress.css';
+@import './components/Radio.css';
+@import './components/ScrollArea.css';
+@import './components/Select.css';
+@import './components/Separator.css';
+@import './components/Slider.css';
+@import './components/Switch.css';
+@import './components/Tabs.css';
+@import './components/Toast.css';
+@import './components/Toggle.css';
+@import './components/ToggleGroup.css';
+@import './components/Toolbar.css';
+@import './components/Tooltip.css';
+@import './components/AGGrid.css';

package/dist/styles/semantic/accessibility.css

@@ -0,0 +1,77 @@
+/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
+
+:focus-visible {
+  outline: var(--theme-a11y-focus-outline-width) solid var(--focus-ring);
+  outline-offset: var(--theme-a11y-focus-outline-offset);
+  border-radius: var(--theme-a11y-focus-ring-radius);
+}
+
+a:focus-visible {
+  outline: var(--theme-a11y-focus-outline-width) solid var(--focus-ring);
+  outline-offset: var(--theme-a11y-link-focus-outline-offset);
+  border-radius: var(--theme-a11y-link-focus-ring-radius);
+}
+
+input:invalid,
+textarea:invalid,
+select:invalid {
+  border-color: var(--theme-status-error, #ef4444);
+}
+
+input:invalid:focus,
+textarea:invalid:focus,
+select:invalid:focus {
+  outline-color: var(--theme-status-error, #ef4444);
+}
+
+[required]::after,
+[aria-required='true']::after {
+  content: ' *';
+  color: var(--theme-status-error, #ef4444);
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --border-default: var(--theme-neutral-600);
+    --border-strong: var(--theme-neutral-800);
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --border-default: var(--theme-neutral-700);
+    --border-strong: var(--theme-neutral-900);
+    --text-secondary: var(--theme-neutral-1000);
+  }
+
+  button,
+  a {
+    text-decoration: underline;
+  }
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid CanvasText;
+  }
+
+  button,
+  a {
+    border: 1px solid ButtonText;
+  }
+}
+
+@media (pointer: coarse) {
+  button,
+  a,
+  input[type='button'],
+  input[type='submit'],
+  input[type='reset'],
+  input[type='checkbox'],
+  input[type='radio'],
+  select,
+  textarea {
+    min-height: var(--theme-a11y-min-touch-target);
+    min-width: var(--theme-a11y-min-touch-target);
+  }
+}

package/dist/styles/semantic/accordion.css

@@ -0,0 +1,102 @@
+/* Accordion Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ACCORDION CONTAINER
+     ============================================ */
+  
+  --accordion-bg: var(--theme-neutral-50);
+  --accordion-border-radius: var(--theme-radius-surface);
+  
+  /* ============================================
+     ACCORDION ITEM
+     ============================================ */
+  
+  --accordion-item-border-color: var(--border-default);
+  --accordion-item-border-width: var(--theme-stroke-default);
+  
+  /* ============================================
+     ACCORDION TRIGGER (HEADER/BUTTON)
+     ============================================ */
+  
+  --accordion-trigger-padding-block: var(--space-4);
+  --accordion-trigger-padding-inline: var(--space-6);
+  --accordion-trigger-gap: var(--space-4);
+  --accordion-trigger-bg: var(--surface-base);
+  --accordion-trigger-bg-hover: var(--surface-raised);
+  --accordion-trigger-bg-active: var(--theme-neutral-100);
+  --accordion-trigger-text-color: var(--text-primary);
+  --accordion-trigger-font-family: var(--theme-maximize-md-font-family);
+  --accordion-trigger-font-size: var(--theme-maximize-md-font-size);
+  --accordion-trigger-font-weight: var(--theme-maximize-md-font-weight);
+  --accordion-trigger-line-height: var(--theme-maximize-md-line-height);
+  --accordion-trigger-letter-spacing: var(--theme-maximize-md-letter-spacing);
+  
+  /* ============================================
+     ACCORDION ICON
+     ============================================ */
+  
+  --accordion-icon-size: 1.25rem;
+  --accordion-icon-color: var(--text-secondary);
+  --accordion-icon-transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* ============================================
+     ACCORDION CONTENT
+     ============================================ */
+  
+  --accordion-content-padding-block-start: 0;
+  --accordion-content-padding-block-end: var(--space-4);
+  --accordion-content-padding-inline: var(--space-6);
+  --accordion-content-bg: var(--surface-base);
+  --accordion-content-text-color: var(--text-secondary);
+  --accordion-content-font-family: var(--theme-font-base-font-family);
+  --accordion-content-font-size: var(--theme-font-base-font-size);
+  --accordion-content-font-weight: var(--theme-font-base-font-weight);
+  --accordion-content-line-height: var(--theme-font-base-line-height);
+  --accordion-content-letter-spacing: var(--theme-font-base-letter-spacing);
+  
+  /* ============================================
+     ACCORDION TRANSITIONS
+     ============================================ */
+  
+  --accordion-transition: background-color 0.2s ease;
+  
+  /* ============================================
+     ACCORDION VARIANTS
+     ============================================ */
+  
+  /* Separated variant */
+  --accordion-separated-gap: var(--space-2);
+  --accordion-separated-item-border-radius: var(--theme-radius-chrome);
+  --accordion-separated-item-border-color: var(--border-default);
+  --accordion-separated-item-border-width: var(--theme-stroke-default);
+  --accordion-separated-item-bg: var(--surface-base);
+  
+  /* Bordered variant */
+  --accordion-bordered-border-width: var(--theme-stroke-default);
+  --accordion-bordered-border-color: var(--border-default);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --accordion-bg: var(--theme-neutral-100);
+    --accordion-trigger-bg: var(--theme-neutral-50);
+    --accordion-trigger-bg-hover: var(--theme-neutral-200);
+    --accordion-trigger-bg-active: var(--theme-neutral-300);
+    --accordion-content-bg: var(--theme-neutral-50);
+    --accordion-separated-item-bg: var(--theme-neutral-50);
+  }
+}
+
+[data-theme='dark'] {
+  --accordion-bg: var(--theme-neutral-100);
+  --accordion-trigger-bg: var(--theme-neutral-50);
+  --accordion-trigger-bg-hover: var(--theme-neutral-200);
+  --accordion-trigger-bg-active: var(--theme-neutral-300);
+  --accordion-content-bg: var(--theme-neutral-50);
+  --accordion-separated-item-bg: var(--theme-neutral-50);
+}

package/dist/styles/semantic/ag-grid.css

@@ -0,0 +1,114 @@
+/* AG Grid Semantic Tokens - Mojave Theme */
+/* All AG Grid CSS variables mapped to Mojave design tokens */
+
+:root {
+ /* ============================================
+    GRID STRUCTURE & SIZING
+    ============================================ */
+ --ag-grid-size: 4px; /*This tells AG-Grid what the fallback mutiplier is for spacing when not using out spacing variables.*/
+ --ag-grid-row-height: var(--space-10); /* 40px - matches Input height */
+ --ag-grid-header-height: var(--space-10); /* 40px - matches Input height */
+ --ag-grid-cell-horizontal-padding: var(--space-3); /* 12px - matches Input padding */
+  
+ /* ============================================
+    BACKGROUNDS
+    ============================================ */
+ --ag-grid-background-color: var(--theme-surface-canvas);
+ --ag-grid-foreground-color: var(--theme-neutral-1200);
+ --ag-grid-odd-row-background-color: transparent;
+ --ag-grid-header-background-color: var(--theme-neutral-50);
+ --ag-grid-selected-row-background-color: var(--theme-primary-50);
+  
+ /* ============================================
+    HOVER & INTERACTION STATES
+    ============================================ */
+ --ag-grid-row-hover-color: var(--theme-neutral-100);
+ --ag-grid-column-hover-color: var(--theme-neutral-100);
+ --ag-grid-range-selection-background-color: var(--theme-primary-100);
+  
+ /* ============================================
+    BORDERS & RADIUS
+    ============================================ */
+ --ag-grid-border-color: var(--theme-neutral-300);
+ --ag-grid-secondary-border-color: var(--theme-neutral-200);
+ --ag-grid-border-radius: var(--theme-radius-item); /* General border radius */
+ --ag-grid-wrapper-border-radius: var(--theme-radius-item); /* Outer grid wrapper */
+ --ag-grid-button-border-radius: var(--theme-radius-item); /* Buttons */
+ --ag-grid-checkbox-border-radius: var(--theme-radius-pill); /* Checkboxes */
+ --ag-grid-icon-button-border-radius: var(--theme-radius-pill); /* Icon buttons */
+ --ag-grid-input-border-radius: var(--theme-radius-item); /* Input fields */
+  
+ /* ============================================
+    TEXT COLORS
+    ============================================ */
+ --ag-grid-header-foreground-color: var(--theme-neutral-1200);
+  
+ /* ============================================
+    INTERACTIVE ELEMENTS
+    ============================================ */
+ --ag-grid-input-focus-border-color: var(--theme-primary-600);
+ --ag-grid-input-focus-box-shadow: 0 0 0 2px var(--theme-primary-200);
+  
+ /* Checkbox - Reference the checkbox component tokens */
+ --ag-grid-checkbox-checked-color: var(--checkbox-indicator-bg-checked);
+ --ag-grid-checkbox-unchecked-color: var(--checkbox-indicator-border-color);
+ --ag-grid-checkbox-indeterminate-color: var(--checkbox-indicator-bg-checked);
+  
+ /* ============================================
+    TYPOGRAPHY
+    ============================================ */
+ --ag-grid-font-family: var(--theme-font-condense-font-family);
+ --ag-grid-font-size: var(--theme-font-condense-font-size);
+ --ag-grid-line-height: var(--theme-font-condense-line-height);
+ --ag-grid-letter-spacing: var(--theme-font-condense-letter-spacing);
+ --ag-grid-header-font-family: var(--theme-font-condense-subtitle-font-family);
+ --ag-grid-header-font-size: var(--theme-font-condense-subtitle-font-size);
+ --ag-grid-header-font-weight: var(--theme-font-condense-subtitle-font-weight);
+ --ag-grid-header-line-height: var(--theme-font-condense-subtitle-line-height);
+ --ag-grid-header-letter-spacing: var(--theme-font-condense-subtitle-letter-spacing);
+  
+ /* ============================================
+    ICONS
+    ============================================ */
+ --ag-grid-icon-size: 16px;
+
+ /* ============================================
+     INPUTS
+     ============================================ */
+  --ag-grid-input-border-color: var(--theme-neutral-300);
+  --ag-grid-input-height: var(--space-10); /* 40px - match our inputs */
+  --ag-grid-input-padding: var(--space-3); /* 12px */
+  
+ /* ============================================
+    MENUS & DROPDOWNS
+    ============================================ */
+ --ag-grid-menu-background-color: var(--theme-surface-canvas);
+ --ag-grid-menu-border-color: var(--theme-neutral-300);
+ --ag-grid-menu-shadow: var(--shadow-lg);
+ --ag-grid-menu-padding: var(--space-2);
+ --ag-grid-menu-item-padding: var(--space-2) var(--space-3);
+ --ag-grid-list-item-height: var(--space-10); /* 40px - match our menu items */
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+ :root {
+   --ag-grid-background-color: var(--theme-neutral-1200);
+   --ag-grid-foreground-color: var(--theme-neutral-50);
+   --ag-grid-border-color: var(--theme-neutral-900);
+   --ag-grid-header-background-color: var(--theme-neutral-1100);
+   --ag-grid-row-hover-color: var(--theme-neutral-1100);
+   --ag-grid-selected-row-background-color: var(--theme-primary-900);
+   --ag-grid-menu-background-color: var(--theme-neutral-1100);
+ }
+}
+
+[data-theme='dark'] {
+ --ag-grid-background-color: var(--theme-neutral-1200);
+ --ag-grid-foreground-color: var(--theme-neutral-50);
+ --ag-grid-border-color: var(--theme-neutral-900);
+ --ag-grid-header-background-color: var(--theme-neutral-1100);
+ --ag-grid-row-hover-color: var(--theme-neutral-1100);
+ --ag-grid-selected-row-background-color: var(--theme-primary-900);
+ --ag-grid-menu-background-color: var(--theme-neutral-1100);
+}