@viasat/beam-tokens 2.0.0

package/components/Badge.css

@@ -0,0 +1,542 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-badge-color-positive-strong-bg: var(
+    --bm-sem-color-surface-positive-strong,
+    #187c36
+  );
+  --bm-comp-badge-color-positive-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-positive-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-medium-bg: var(
+    --bm-sem-color-surface-positive,
+    #daf7cf
+  );
+  --bm-comp-badge-color-positive-medium-fg: var(
+    --bm-sem-color-text-positive,
+    #187c36
+  );
+  --bm-comp-badge-color-positive-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-fg: var(
+    --bm-sem-color-text-positive,
+    #187c36
+  );
+  --bm-comp-badge-color-positive-subtle-border: var(
+    --bm-sem-color-border-positive,
+    rgba(24, 124, 54, 0.4)
+  );
+  --bm-comp-badge-color-warning-strong-bg: var(
+    --bm-sem-color-surface-warning-strong,
+    #ac4902
+  );
+  --bm-comp-badge-color-warning-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-warning-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-medium-bg: var(
+    --bm-sem-color-surface-warning,
+    #ffe4c9
+  );
+  --bm-comp-badge-color-warning-medium-fg: var(
+    --bm-sem-color-text-warning,
+    #ac4902
+  );
+  --bm-comp-badge-color-warning-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-fg: var(
+    --bm-sem-color-text-warning,
+    #ac4902
+  );
+  --bm-comp-badge-color-warning-subtle-border: var(
+    --bm-sem-color-border-warning,
+    rgba(172, 73, 2, 0.4)
+  );
+  --bm-comp-badge-color-negative-strong-bg: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-badge-color-negative-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-negative-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-medium-bg: var(
+    --bm-sem-color-surface-negative,
+    #fee6e7
+  );
+  --bm-comp-badge-color-negative-medium-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-badge-color-negative-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-badge-color-negative-subtle-border: var(
+    --bm-sem-color-border-negative,
+    rgba(204, 36, 41, 0.4)
+  );
+  --bm-comp-badge-color-info-primary-strong-bg: var(
+    --bm-sem-color-surface-info-primary-strong,
+    #006ead
+  );
+  --bm-comp-badge-color-info-primary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-info-primary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-medium-bg: var(
+    --bm-sem-color-surface-info-primary,
+    #ccf0ff
+  );
+  --bm-comp-badge-color-info-primary-medium-fg: var(
+    --bm-sem-color-text-info-primary,
+    #006ead
+  );
+  --bm-comp-badge-color-info-primary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-fg: var(
+    --bm-sem-color-text-info-primary,
+    #006ead
+  );
+  --bm-comp-badge-color-info-primary-subtle-border: var(
+    --bm-sem-color-border-info-primary,
+    rgba(0, 110, 173, 0.4)
+  );
+  --bm-comp-badge-color-info-secondary-strong-bg: var(
+    --bm-sem-color-surface-info-secondary-strong,
+    #576775
+  );
+  --bm-comp-badge-color-info-secondary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-info-secondary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-medium-bg: var(
+    --bm-sem-color-surface-info-secondary,
+    #dfe7ec
+  );
+  --bm-comp-badge-color-info-secondary-medium-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #465967
+  );
+  --bm-comp-badge-color-info-secondary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #465967
+  );
+  --bm-comp-badge-color-info-secondary-subtle-border: var(
+    --bm-sem-color-border-info-secondary,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-space-x: var(--bm-utility-comp-badge-space-x, 0.75rem);
+  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-badge-size-sm-height: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-badge-size-md-height: var(--bm-primitive-dimension-175, 1.75rem);
+  --bm-comp-badge-radius: var(--bm-utility-comp-badge-radius, 624.938rem);
+  --bm-comp-badge-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-badge-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-badge-dot-color-positive-bg: var(
+    --bm-sem-color-icon-positive,
+    #24a148
+  );
+  --bm-comp-badge-dot-color-positive-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-positive-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-warning-bg: var(
+    --bm-sem-color-icon-warning,
+    #eb6200
+  );
+  --bm-comp-badge-dot-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-badge-dot-color-warning-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-negative-bg: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-badge-dot-color-negative-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-negative-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-info-primary-bg: var(
+    --bm-sem-color-icon-info-primary,
+    #0095e0
+  );
+  --bm-comp-badge-dot-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-primary-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-info-secondary-bg: var(
+    --bm-sem-color-icon-info-secondary,
+    #576775
+  );
+  --bm-comp-badge-dot-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-secondary-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-badge-dot-size: 0.625rem;
+  --bm-comp-badge-dot-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-dot-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-badge-dot-typo-subtle: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-dot-typo-strong: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-badge-color-positive-strong-bg: var(
+    --bm-sem-color-surface-positive-strong,
+    #b3eb9e
+  );
+  --bm-comp-badge-color-positive-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-positive-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-medium-bg: var(
+    --bm-sem-color-surface-positive,
+    #02310e
+  );
+  --bm-comp-badge-color-positive-medium-fg: var(
+    --bm-sem-color-text-positive,
+    #b3eb9e
+  );
+  --bm-comp-badge-color-positive-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-fg: var(
+    --bm-sem-color-text-positive,
+    #b3eb9e
+  );
+  --bm-comp-badge-color-positive-subtle-border: var(
+    --bm-sem-color-border-positive,
+    rgba(179, 235, 158, 0.4)
+  );
+  --bm-comp-badge-color-warning-strong-bg: var(
+    --bm-sem-color-surface-warning-strong,
+    #ffd4a8
+  );
+  --bm-comp-badge-color-warning-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-warning-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-medium-bg: var(
+    --bm-sem-color-surface-warning,
+    #3e1a00
+  );
+  --bm-comp-badge-color-warning-medium-fg: var(
+    --bm-sem-color-text-warning,
+    #ffd4a8
+  );
+  --bm-comp-badge-color-warning-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-fg: var(
+    --bm-sem-color-text-warning,
+    #ffd4a8
+  );
+  --bm-comp-badge-color-warning-subtle-border: var(
+    --bm-sem-color-border-warning,
+    rgba(255, 212, 168, 0.4)
+  );
+  --bm-comp-badge-color-negative-strong-bg: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-badge-color-negative-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-negative-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-medium-bg: var(
+    --bm-sem-color-surface-negative,
+    #520f11
+  );
+  --bm-comp-badge-color-negative-medium-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-badge-color-negative-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-badge-color-negative-subtle-border: var(
+    --bm-sem-color-border-negative,
+    rgba(253, 203, 205, 0.4)
+  );
+  --bm-comp-badge-color-info-primary-strong-bg: var(
+    --bm-sem-color-surface-info-primary-strong,
+    #64cefb
+  );
+  --bm-comp-badge-color-info-primary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-info-primary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-medium-bg: var(
+    --bm-sem-color-surface-info-primary,
+    #002f57
+  );
+  --bm-comp-badge-color-info-primary-medium-fg: var(
+    --bm-sem-color-text-info-primary,
+    #9be1ff
+  );
+  --bm-comp-badge-color-info-primary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-fg: var(
+    --bm-sem-color-text-info-primary,
+    #9be1ff
+  );
+  --bm-comp-badge-color-info-primary-subtle-border: var(
+    --bm-sem-color-border-info-primary,
+    rgba(155, 225, 255, 0.4)
+  );
+  --bm-comp-badge-color-info-secondary-strong-bg: var(
+    --bm-sem-color-surface-info-secondary-strong,
+    #d1dae0
+  );
+  --bm-comp-badge-color-info-secondary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-info-secondary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-medium-bg: var(
+    --bm-sem-color-surface-info-secondary,
+    #202e39
+  );
+  --bm-comp-badge-color-info-secondary-medium-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #c3cdd5
+  );
+  --bm-comp-badge-color-info-secondary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #c3cdd5
+  );
+  --bm-comp-badge-color-info-secondary-subtle-border: var(
+    --bm-sem-color-border-info-secondary,
+    rgba(209, 218, 224, 0.4)
+  );
+  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-space-x: var(--bm-utility-comp-badge-space-x, 0.75rem);
+  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-badge-size-sm-height: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-badge-size-md-height: var(--bm-primitive-dimension-175, 1.75rem);
+  --bm-comp-badge-radius: var(--bm-utility-comp-badge-radius, 624.938rem);
+  --bm-comp-badge-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-badge-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-badge-dot-color-positive-bg: var(
+    --bm-sem-color-icon-positive,
+    #71d963
+  );
+  --bm-comp-badge-dot-color-positive-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-positive-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-warning-bg: var(
+    --bm-sem-color-icon-warning,
+    #ffb17a
+  );
+  --bm-comp-badge-dot-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-badge-dot-color-warning-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-negative-bg: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-badge-dot-color-negative-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-negative-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-info-primary-bg: var(
+    --bm-sem-color-icon-info-primary,
+    #64cefb
+  );
+  --bm-comp-badge-dot-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-primary-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-info-secondary-bg: var(
+    --bm-sem-color-icon-info-secondary,
+    #9fafbc
+  );
+  --bm-comp-badge-dot-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-secondary-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-badge-dot-size: 0.625rem;
+  --bm-comp-badge-dot-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-dot-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-badge-dot-typo-subtle: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-dot-typo-strong: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+}

package/components/BadgeDot.css

@@ -0,0 +1,150 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-badge-dot-color-positive-bg: var(
+    --bm-sem-color-icon-positive,
+    #24a148
+  );
+  --bm-comp-badge-dot-color-positive-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-positive-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-warning-bg: var(
+    --bm-sem-color-icon-warning,
+    #eb6200
+  );
+  --bm-comp-badge-dot-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-badge-dot-color-warning-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-negative-bg: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-badge-dot-color-negative-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-negative-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-info-primary-bg: var(
+    --bm-sem-color-icon-info-primary,
+    #0095e0
+  );
+  --bm-comp-badge-dot-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-primary-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-info-secondary-bg: var(
+    --bm-sem-color-icon-info-secondary,
+    #576775
+  );
+  --bm-comp-badge-dot-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-secondary-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-badge-dot-size: 0.625rem;
+  --bm-comp-badge-dot-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-dot-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-badge-dot-typo-subtle: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-dot-typo-strong: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-badge-dot-color-positive-bg: var(
+    --bm-sem-color-icon-positive,
+    #71d963
+  );
+  --bm-comp-badge-dot-color-positive-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-positive-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-warning-bg: var(
+    --bm-sem-color-icon-warning,
+    #ffb17a
+  );
+  --bm-comp-badge-dot-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-badge-dot-color-warning-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-negative-bg: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-badge-dot-color-negative-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-negative-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-info-primary-bg: var(
+    --bm-sem-color-icon-info-primary,
+    #64cefb
+  );
+  --bm-comp-badge-dot-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-primary-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-info-secondary-bg: var(
+    --bm-sem-color-icon-info-secondary,
+    #9fafbc
+  );
+  --bm-comp-badge-dot-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-secondary-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-badge-dot-size: 0.625rem;
+  --bm-comp-badge-dot-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-dot-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-badge-dot-typo-subtle: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-dot-typo-strong: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+}

package/components/BatchActions.css

@@ -0,0 +1,34 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-batch-actions-typo-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-batch-actions-color-count: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-batch-actions-space-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-batch-actions-space-actions-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-batch-actions-space-offset: var(--bm-sem-space-100, 1rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-batch-actions-typo-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-batch-actions-color-count: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-batch-actions-space-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-batch-actions-space-actions-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-batch-actions-space-offset: var(--bm-sem-space-100, 1rem);
+}