@viasat/beam-tokens 2.20.0 → 2.21.1

package/components/Accordion.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-accordion-color-heading: var(--bm-sem-color-text-primary, #141d24);
   --bm-comp-accordion-color-body: var(--bm-sem-color-text-secondary, #576775);
@@ -56,6 +61,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-accordion-color-heading: var(--bm-sem-color-text-primary, #ffffff);
   --bm-comp-accordion-color-body: var(--bm-sem-color-text-secondary, #c3cdd5);

package/components/ActionList.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-actionlist-color-text: var(--bm-sem-color-text-primary, #141d24);
   --bm-comp-actionlist-color-bg-selected: var(
@@ -77,6 +82,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-actionlist-color-text: var(--bm-sem-color-text-primary, #ffffff);
   --bm-comp-actionlist-color-bg-selected: var(

package/components/Alert.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-alert-color-positive-bg: var(
     --bm-sem-color-surface-positive,
@@ -124,6 +129,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-alert-color-positive-bg: var(
     --bm-sem-color-surface-positive,

package/components/Avatar.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-avatar-size-xs: var(--bm-primitive-dimension-125, 1.25rem);
   --bm-comp-avatar-size-sm: var(--bm-primitive-dimension-150, 1.5rem);
@@ -64,6 +69,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-avatar-size-xs: var(--bm-primitive-dimension-125, 1.25rem);
   --bm-comp-avatar-size-sm: var(--bm-primitive-dimension-150, 1.5rem);

package/components/Badge.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-badge-color-positive-strong-bg: var(
     --bm-sem-color-surface-positive-strong,
@@ -273,6 +278,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-badge-color-positive-strong-bg: var(
     --bm-sem-color-surface-positive-strong,

package/components/BadgeDot.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-badge-dot-color-positive-bg: var(
     --bm-sem-color-icon-positive,
@@ -77,6 +82,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-badge-dot-color-positive-bg: var(
     --bm-sem-color-icon-positive,

package/components/BatchActions.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-batch-actions-typo-count: var(
     --bm-sem-typo-body-sm,
@@ -19,6 +24,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-batch-actions-typo-count: var(
     --bm-sem-typo-body-sm,

package/components/Breadcrumb.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-breadcrumb-color-enabled: var(
     --bm-sem-color-text-secondary,
@@ -24,6 +29,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-breadcrumb-color-enabled: var(
     --bm-sem-color-text-secondary,

package/components/Button.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-btn-color-accent-filled-bg: var(
     --bm-sem-color-action-primary,
@@ -235,6 +240,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-btn-color-accent-filled-bg: var(
     --bm-sem-color-action-primary,

package/components/Card.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-card-space-pad-sm: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-card-space-pad-md: var(--bm-sem-space-100, 1rem);
@@ -53,6 +58,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-card-space-pad-sm: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-card-space-pad-md: var(--bm-sem-space-100, 1rem);

package/components/Chip.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-chip-color-bg: var(
     --bm-sem-color-action-neutral-subtle,
@@ -53,6 +58,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-chip-color-bg: var(
     --bm-sem-color-action-neutral-subtle,

package/components/CloseButton.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-close-btn-color-default: var(
     --bm-sem-color-icon-secondary,
@@ -23,6 +28,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-close-btn-color-default: var(
     --bm-sem-color-icon-secondary,

package/components/DataTable.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-data-table-color-bg: var(--bm-sem-color-surface-01, #ffffff);
   --bm-comp-data-table-color-border: var(--bm-sem-color-border-01, #dfe7ec);
@@ -109,6 +114,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-data-table-color-bg: var(--bm-sem-color-surface-01, #202e39);
   --bm-comp-data-table-color-border: var(--bm-sem-color-border-01, #32424e);

package/components/Dialog.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-dialog-color-bg: var(--bm-sem-color-surface-01, #ffffff);
   --bm-comp-dialog-color-heading: var(--bm-sem-color-text-primary, #141d24);
@@ -77,6 +82,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-dialog-color-bg: var(--bm-sem-color-surface-01, #202e39);
   --bm-comp-dialog-color-heading: var(--bm-sem-color-text-primary, #ffffff);

package/components/Divider.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-divider-color-text: var(--bm-sem-color-text-secondary, #576775);
   --bm-comp-divider-color-icon: var(--bm-sem-color-icon-secondary, #576775);
@@ -18,6 +23,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-divider-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);
   --bm-comp-divider-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);

package/components/EmptyState.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-empty-state-color-heading: var(
     --bm-sem-color-text-primary,
@@ -30,6 +35,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-empty-state-color-heading: var(
     --bm-sem-color-text-primary,

package/components/FileUpload.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-file-upload-color-dropzone-bg: var(
     --bm-sem-color-surface-01,
@@ -104,6 +109,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-file-upload-color-dropzone-bg: var(
     --bm-sem-color-surface-01,

package/components/Header.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-header-color-bg: var(--bm-sem-color-surface-01, #ffffff);
   --bm-comp-header-color-border: var(--bm-sem-color-border-01, #dfe7ec);
@@ -49,6 +54,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-header-color-bg: var(--bm-sem-color-surface-01, #202e39);
   --bm-comp-header-color-border: var(--bm-sem-color-border-01, #32424e);

package/components/HelperText.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-helper-text-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-helper-text-space-top: var(--bm-sem-space-50, 0.5rem);
@@ -52,6 +57,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-helper-text-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-helper-text-space-top: var(--bm-sem-space-50, 0.5rem);

package/components/Input.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);
   --bm-comp-input-color-bg-disabled: var(
@@ -166,6 +171,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);
   --bm-comp-input-color-bg-disabled: var(

package/components/Label.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-label-color-text: var(--bm-sem-color-text-secondary, #576775);
   --bm-comp-label-color-icon: var(--bm-sem-color-icon-secondary, #576775);
@@ -25,6 +30,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-label-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);
   --bm-comp-label-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);

package/components/Link.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-link-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-link-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -53,6 +58,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-link-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-link-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);

package/components/List.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-list-space-indent: var(--bm-sem-space-200, 2rem);
   --bm-comp-list-space-icon: var(--bm-sem-space-50, 0.5rem);
@@ -13,6 +18,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-list-space-indent: var(--bm-sem-space-200, 2rem);
   --bm-comp-list-space-icon: var(--bm-sem-space-50, 0.5rem);

package/components/Menu.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-menu-space-trigger-offset: var(--bm-sem-space-50, 0.5rem);
 }
@@ -9,6 +14,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-menu-space-trigger-offset: var(--bm-sem-space-50, 0.5rem);
 }

package/components/Pagination.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-pagination-space-content-gap: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-pagination-space-controls-gap: var(--bm-sem-space-25, 0.25rem);
@@ -31,6 +36,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-pagination-space-content-gap: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-pagination-space-controls-gap: var(--bm-sem-space-25, 0.25rem);

package/components/Panel.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-panel-size-sm: 20rem;
   --bm-comp-panel-size-md: 27.5rem;
@@ -39,6 +44,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-panel-size-sm: 20rem;
   --bm-comp-panel-size-md: 27.5rem;

package/components/Popover.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-popover-color-bg: var(--bm-sem-color-surface-01, #ffffff);
   --bm-comp-popover-color-border: var(--bm-sem-color-border-01, #dfe7ec);
@@ -30,6 +35,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-popover-color-bg: var(--bm-sem-color-surface-01, #202e39);
   --bm-comp-popover-color-border: var(--bm-sem-color-border-01, #32424e);

package/components/ProgressBar.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-progress-bar-color-indicator-default: var(
     --bm-utility-color-accent-default,
@@ -41,6 +46,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-progress-bar-color-indicator-default: var(
     --bm-utility-color-accent-default,

package/components/SegmentedControl.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-seg-control-color-bg: var(
     --bm-sem-color-surface-highlight,
@@ -30,6 +35,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-seg-control-color-bg: var(
     --bm-sem-color-surface-highlight,

package/components/SideNav.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-side-nav-space-x: var(--bm-sem-space-100, 1rem);
   --bm-comp-side-nav-space-y: var(--bm-sem-space-75, 0.75rem);
@@ -16,6 +21,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-side-nav-space-x: var(--bm-sem-space-100, 1rem);
   --bm-comp-side-nav-space-y: var(--bm-sem-space-75, 0.75rem);

package/components/Slider.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-slider-color-track-bg: var(--bm-sem-color-border-02, #d1dae0);
   --bm-comp-slider-color-track-bg-filled: var(
@@ -41,6 +46,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-slider-color-track-bg: var(--bm-sem-color-border-02, #465967);
   --bm-comp-slider-color-track-bg-filled: var(

package/components/Spinner.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-spinner-color-heading: var(--bm-sem-color-text-primary, #141d24);
   --bm-comp-spinner-color-body: var(--bm-sem-color-text-primary, #141d24);
@@ -62,6 +67,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-spinner-color-heading: var(--bm-sem-color-text-primary, #ffffff);
   --bm-comp-spinner-color-body: var(--bm-sem-color-text-primary, #ffffff);

package/components/Stepper.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-stepper-color-incomplete-bg: var(
     --bm-sem-color-surface-highlight,
@@ -126,6 +131,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-stepper-color-incomplete-bg: var(
     --bm-sem-color-surface-highlight,

package/components/Tabs.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-tabs-color-text: var(--bm-sem-color-text-secondary, #576775);
   --bm-comp-tabs-color-text-selected: var(--bm-sem-color-text-primary, #141d24);
@@ -55,6 +60,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-tabs-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);
   --bm-comp-tabs-color-text-selected: var(--bm-sem-color-text-primary, #ffffff);

package/components/Toast.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-toast-color-positive-bg: var(--bm-sem-color-surface-01, #ffffff);
   --bm-comp-toast-color-positive-icon: var(
@@ -97,6 +102,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-toast-color-positive-bg: var(--bm-sem-color-surface-01, #202e39);
   --bm-comp-toast-color-positive-icon: var(

package/components/Tooltip.css

@@ -2,6 +2,11 @@
 :host,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-light"] {
   --bm-comp-tooltip-color-bg: var(--bm-sem-color-surface-inverse, #202e39);
   --bm-comp-tooltip-color-text: var(
@@ -37,6 +42,11 @@
 :host,
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
 [data-bm-theme~="bm-dark"] {
   --bm-comp-tooltip-color-bg: var(--bm-sem-color-surface-inverse, #ffffff);
   --bm-comp-tooltip-color-text: var(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-tokens",
-  "version": "2.20.0",
+  "version": "2.21.1",
   "description": "Design tokens for the Beam Design System with support for CSS, SASS, and CSS-in-JS",
   "license": "MIT",
   "author": "Viasat",

package/tokens.css

@@ -1,6 +1,9 @@
 :root,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
 [data-bm-theme~="bm-light"] {
   --bm-primitive-color-gray-100: rgb(242, 245, 248);
   --bm-primitive-color-gray-200: rgb(223, 231, 236);
@@ -1063,6 +1066,9 @@
 }
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
 [data-bm-theme~="bm-dark"] {
   --bm-utility-color-accent-subtlest: var(--bm-theme-color-brand-1100, #01262d);
   --bm-utility-color-accent-subtler: var(--bm-theme-color-brand-900, #00414d);
@@ -3430,6 +3436,9 @@
 :root,
 .bm-light,
 .bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
 [data-bm-theme~="bm-light"] {
   --bm-primitive-shadow-0: var(--bm-primitive-dimension-0)
     var(--bm-primitive-dimension-0) var(--bm-primitive-dimension-0)
@@ -3469,6 +3478,9 @@
 }
 .bm-dark,
 .bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
 [data-bm-theme~="bm-dark"] {
   --bm-utility-shadow-intensity: 0.3;
   --bm-sem-shadow-none: var(--bm-primitive-shadow-0);

package/types/utils/constants/types.d.ts

@@ -80,6 +80,16 @@ export type ClassName = {
      * @example bm-light bm-dark
      */
     base?: string;
+    /**
+     * Multiple base themes (use instead of base when targeting multiple themes)
+     * @example ['bm-light', 'bm-dark']
+     */
+    bases?: string[];
+    /**
+     * Inverse theme class name, generates both descendant and compound selectors
+     * @example bm-inverse
+     */
+    inverse?: string;
     /**
      * Brand specific class name
      * @example bm-onefi