@viasat/beam-tokens 2.0.0

package/components/Breadcrumb.css

@@ -0,0 +1,44 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-breadcrumb-color-enabled: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-breadcrumb-color-hover: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-breadcrumb-color-active: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-breadcrumb-color-selected: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-breadcrumb-size-icon-chevron: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-breadcrumb-typo-default: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-breadcrumb-space-gap: var(--bm-sem-space-25, 0.25rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-breadcrumb-color-enabled: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-breadcrumb-color-hover: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-breadcrumb-color-active: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-breadcrumb-color-selected: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-breadcrumb-size-icon-chevron: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-breadcrumb-typo-default: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-breadcrumb-space-gap: var(--bm-sem-space-25, 0.25rem);
+}

package/components/Button.css

@@ -0,0 +1,466 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-btn-color-accent-filled-bg: var(
+    --bm-sem-color-action-primary,
+    #00768f
+  );
+  --bm-comp-btn-color-accent-filled-fg: var(
+    --bm-sem-color-action-onPrimary,
+    #ffffff
+  );
+  --bm-comp-btn-color-accent-filled-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-outline-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-outline-fg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-btn-color-accent-outline-border: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-btn-color-accent-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-ghost-fg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-btn-color-accent-ghost-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-bare-fg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-btn-color-accent-bare-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-filled-bg: var(
+    --bm-sem-color-surface-inverse,
+    #202e39
+  );
+  --bm-comp-btn-color-neutral-filled-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-outline-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-outline-fg: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-btn-color-neutral-outline-border: var(
+    --bm-sem-color-border-inverse,
+    #465967
+  );
+  --bm-comp-btn-color-neutral-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-ghost-fg: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-btn-color-neutral-ghost-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-bare-fg: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-btn-color-neutral-bare-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-subtle-filled-bg: var(
+    --bm-sem-color-action-neutral-subtle,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-btn-color-neutral-subtle-filled-fg: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-btn-color-neutral-subtle-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-outline-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-outline-fg: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-btn-color-neutral-subtle-outline-border: var(
+    --bm-sem-color-border-info-secondary,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-btn-color-neutral-subtle-ghost-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-ghost-fg: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-btn-color-neutral-subtle-ghost-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-bare-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-bare-fg: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-btn-color-neutral-subtle-bare-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-filled-bg: var(
+    --bm-sem-color-action-destructive,
+    #cc2429
+  );
+  --bm-comp-btn-color-destructive-filled-fg: var(
+    --bm-sem-color-static-white,
+    #ffffff
+  );
+  --bm-comp-btn-color-destructive-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-outline-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-outline-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-btn-color-destructive-outline-border: var(
+    --bm-sem-color-border-negative-strong,
+    #cc2429
+  );
+  --bm-comp-btn-color-destructive-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-destructive-ghost-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-btn-color-destructive-ghost-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-destructive-bare-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-btn-color-destructive-bare-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-loading-filled-bg: var(
+    --bm-sem-color-action-neutral-subtle,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-btn-color-loading-filled-fg: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-btn-color-loading-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-loading-outline-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-outline-fg: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-btn-color-loading-outline-border: var(
+    --bm-sem-color-border-strong,
+    #8697a5
+  );
+  --bm-comp-btn-color-loading-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-ghost-fg: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-btn-color-loading-ghost-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-bare-fg: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-btn-color-loading-bare-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-btn-size-sm-width: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-btn-size-sm-height: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-btn-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-btn-size-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-btn-size-md-width: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-btn-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-btn-size-lg-height: var(--bm-sem-size-height-lg, 3rem);
+  --bm-comp-btn-size-lg-width: var(--bm-sem-size-height-lg, 3rem);
+  --bm-comp-btn-size-lg-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-btn-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-btn-space-label-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-btn-space-sm-x: var(--bm-utility-comp-btn-space-sm-x, 0.5rem);
+  --bm-comp-btn-space-sm-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-btn-space-md-x: var(--bm-utility-comp-btn-space-md-x, 0.75rem);
+  --bm-comp-btn-space-md-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-btn-space-lg-x: var(--bm-utility-comp-btn-space-lg-x, 1rem);
+  --bm-comp-btn-space-lg-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-btn-space-bare-x: var(--bm-sem-space-0, 0);
+  --bm-comp-btn-space-bare-y: var(--bm-sem-space-0, 0);
+  --bm-comp-btn-space-bare-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-btn-space-bare-label-x: var(--bm-sem-space-0, 0);
+  --bm-comp-btn-radius-container: var(
+    --bm-utility-comp-btn-radius-container,
+    0.25rem
+  );
+  --bm-comp-btn-radius-focus: var(--bm-utility-comp-btn-radius-focus, 0.5rem);
+  --bm-comp-btn-typo-sm: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-btn-typo-md: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-btn-typo-lg: var(
+    --bm-sem-typo-compact-label-lg,
+    600 1.125rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-btn-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-btn-opacity-spinner-track: var(--bm-primitive-opacity-20, 0.2);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-btn-color-accent-filled-bg: var(
+    --bm-sem-color-action-primary,
+    #43bfd6
+  );
+  --bm-comp-btn-color-accent-filled-fg: var(
+    --bm-sem-color-action-onPrimary,
+    #141d24
+  );
+  --bm-comp-btn-color-accent-filled-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-outline-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-outline-fg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-btn-color-accent-outline-border: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-btn-color-accent-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-ghost-fg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-btn-color-accent-ghost-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-accent-bare-fg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-btn-color-accent-bare-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-filled-bg: var(
+    --bm-sem-color-surface-inverse,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-filled-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-btn-color-neutral-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-outline-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-outline-fg: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-outline-border: var(
+    --bm-sem-color-border-inverse,
+    #dfe7ec
+  );
+  --bm-comp-btn-color-neutral-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-ghost-fg: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-ghost-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-bare-fg: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-bare-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-neutral-subtle-filled-bg: var(
+    --bm-sem-color-action-neutral-subtle,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-btn-color-neutral-subtle-filled-fg: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-subtle-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-outline-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-outline-fg: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-btn-color-neutral-subtle-outline-border: var(
+    --bm-sem-color-border-info-secondary,
+    rgba(209, 218, 224, 0.4)
+  );
+  --bm-comp-btn-color-neutral-subtle-ghost-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-ghost-fg: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-btn-color-neutral-subtle-ghost-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-bare-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-neutral-subtle-bare-fg: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-btn-color-neutral-subtle-bare-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-filled-bg: var(
+    --bm-sem-color-action-destructive,
+    #cc2429
+  );
+  --bm-comp-btn-color-destructive-filled-fg: var(
+    --bm-sem-color-static-white,
+    #ffffff
+  );
+  --bm-comp-btn-color-destructive-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-outline-bg: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-outline-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-btn-color-destructive-outline-border: var(
+    --bm-sem-color-border-negative-strong,
+    #f67378
+  );
+  --bm-comp-btn-color-destructive-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-destructive-ghost-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-btn-color-destructive-ghost-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-destructive-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-destructive-bare-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-btn-color-destructive-bare-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-loading-filled-bg: var(
+    --bm-sem-color-action-neutral-subtle,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-btn-color-loading-filled-fg: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-btn-color-loading-filled-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-btn-color-loading-outline-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-outline-fg: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-btn-color-loading-outline-border: var(
+    --bm-sem-color-border-strong,
+    #9fafbc
+  );
+  --bm-comp-btn-color-loading-ghost-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-ghost-fg: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-btn-color-loading-ghost-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-bare-bg: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-color-loading-bare-fg: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-btn-color-loading-bare-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-btn-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-btn-size-sm-width: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-btn-size-sm-height: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-btn-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-btn-size-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-btn-size-md-width: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-btn-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-btn-size-lg-height: var(--bm-sem-size-height-lg, 3rem);
+  --bm-comp-btn-size-lg-width: var(--bm-sem-size-height-lg, 3rem);
+  --bm-comp-btn-size-lg-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-btn-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-btn-space-label-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-btn-space-sm-x: var(--bm-utility-comp-btn-space-sm-x, 0.5rem);
+  --bm-comp-btn-space-sm-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-btn-space-md-x: var(--bm-utility-comp-btn-space-md-x, 0.75rem);
+  --bm-comp-btn-space-md-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-btn-space-lg-x: var(--bm-utility-comp-btn-space-lg-x, 1rem);
+  --bm-comp-btn-space-lg-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-btn-space-bare-x: var(--bm-sem-space-0, 0);
+  --bm-comp-btn-space-bare-y: var(--bm-sem-space-0, 0);
+  --bm-comp-btn-space-bare-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-btn-space-bare-label-x: var(--bm-sem-space-0, 0);
+  --bm-comp-btn-radius-container: var(
+    --bm-utility-comp-btn-radius-container,
+    0.25rem
+  );
+  --bm-comp-btn-radius-focus: var(--bm-utility-comp-btn-radius-focus, 0.5rem);
+  --bm-comp-btn-typo-sm: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-btn-typo-md: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-btn-typo-lg: var(
+    --bm-sem-typo-compact-label-lg,
+    600 1.125rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-btn-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-btn-opacity-spinner-track: var(--bm-primitive-opacity-20, 0.2);
+}

package/components/Card.css

@@ -0,0 +1,102 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-card-space-pad-lg: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-card-space-gap-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-card-space-gap-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-card-space-gap-lg: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-card-space-footer-actions-top: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-card-space-footer-actions-gap: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-card-space-footer-actions-gap-stacked: var(
+    --bm-sem-space-75,
+    0.75rem
+  );
+  --bm-comp-card-space-header-gap: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-card-space-header-actions-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-card-color-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-card-color-bg-selected: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-card-color-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-card-color-border-selected: var(
+    --bm-sem-color-border-selected,
+    #00768f
+  );
+  --bm-comp-card-color-heading: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-card-color-body: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-card-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-card-color-supporting: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-card-color-eyebrow: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-card-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-card-radius-outer: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-card-radius-inner: var(--bm-sem-radius-sm, 0.25rem);
+  --bm-comp-card-typo-heading: var(
+    --bm-sem-typo-heading-sm,
+    700 1.125rem/1.5rem "Uni Neue"
+  );
+  --bm-comp-card-typo-body: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-card-typo-supporting: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-card-typo-eyebrow: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-card-space-pad-lg: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-card-space-gap-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-card-space-gap-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-card-space-gap-lg: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-card-space-footer-actions-top: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-card-space-footer-actions-gap: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-card-space-footer-actions-gap-stacked: var(
+    --bm-sem-space-75,
+    0.75rem
+  );
+  --bm-comp-card-space-header-gap: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-card-space-header-actions-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-card-color-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-card-color-bg-selected: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-card-color-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-card-color-border-selected: var(
+    --bm-sem-color-border-selected,
+    #43bfd6
+  );
+  --bm-comp-card-color-heading: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-card-color-body: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-card-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-card-color-supporting: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-card-color-eyebrow: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-card-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-card-radius-outer: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-card-radius-inner: var(--bm-sem-radius-sm, 0.25rem);
+  --bm-comp-card-typo-heading: var(
+    --bm-sem-typo-heading-sm,
+    700 1.125rem/1.5rem "Uni Neue"
+  );
+  --bm-comp-card-typo-body: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-card-typo-supporting: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-card-typo-eyebrow: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+}