@viasat/beam-tokens 2.0.0

package/components/ProgressBar.css

@@ -0,0 +1,78 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-progress-bar-color-indicator-default: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-progress-bar-color-indicator-success: var(
+    --bm-sem-color-surface-positive-strong,
+    #187c36
+  );
+  --bm-comp-progress-bar-color-indicator-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-progress-bar-size-sm-height: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-progress-bar-size-md-height: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-progress-bar-size-lg-height: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-progress-bar-typo-label: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-progress-bar-color-indicator-default: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-progress-bar-color-indicator-success: var(
+    --bm-sem-color-surface-positive-strong,
+    #b3eb9e
+  );
+  --bm-comp-progress-bar-color-indicator-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-progress-bar-color-track: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-progress-bar-color-label: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-progress-bar-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-progress-bar-space-label-bottom: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-progress-bar-space-status-top: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-progress-bar-size-sm-height: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-progress-bar-size-md-height: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-progress-bar-size-lg-height: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-progress-bar-typo-label: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+}

package/components/SegmentedControl.css

@@ -0,0 +1,56 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-seg-control-color-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-seg-control-color-fg: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-seg-control-color-border: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-seg-control-color-bg-selected: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-seg-control-color-fg-selected: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-seg-control-color-border-selected: var(
+    --bm-sem-color-border-inverse,
+    #465967
+  );
+  --bm-comp-seg-control-space-sm-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-seg-control-space-md-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-seg-control-space-lg-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-seg-control-radius: var(--bm-sem-radius-sm, 0.25rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-seg-control-color-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-seg-control-color-fg: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-seg-control-color-border: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-seg-control-color-bg-selected: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-seg-control-color-fg-selected: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-seg-control-color-border-selected: var(
+    --bm-sem-color-border-inverse,
+    #dfe7ec
+  );
+  --bm-comp-seg-control-space-sm-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-seg-control-space-md-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-seg-control-space-lg-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-seg-control-radius: var(--bm-sem-radius-sm, 0.25rem);
+}

package/components/SideNav.css

@@ -0,0 +1,28 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-side-nav-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-side-nav-space-item-start: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-side-nav-space-heading-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-side-nav-size-rail: 4.25rem;
+  --bm-comp-side-nav-color-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-side-nav-color-border: var(--bm-sem-color-border-01, #dfe7ec);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-side-nav-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-side-nav-space-item-start: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-side-nav-space-heading-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-side-nav-size-rail: 4.25rem;
+  --bm-comp-side-nav-color-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-side-nav-color-border: var(--bm-sem-color-border-01, #32424e);
+}

package/components/Slider.css

@@ -0,0 +1,78 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-slider-color-handle-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-slider-color-handle-border: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-slider-color-endpoint: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-slider-color-values: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-slider-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-slider-color-step: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-slider-size-track: var(--bm-primitive-dimension-25, 0.25rem);
+  --bm-comp-slider-size-handle: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-slider-size-handle-active: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-slider-size-endpoint: var(--bm-comp-slider-size-track, 0.25rem);
+  --bm-comp-slider-size-step-x: var(--bm-primitive-dimension-12, 0.125rem);
+  --bm-comp-slider-space-gap-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-slider-space-gap-inside-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-slider-space-gap-outside-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-slider-radius-handle: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-slider-radius-endpoint: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-slider-radius-track: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-slider-border-width-handle: var(--bm-sem-border-width-lg, 0.125rem);
+  --bm-comp-slider-typo-values: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-slider-color-handle-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-slider-color-handle-border: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-slider-color-endpoint: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-slider-color-values: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-slider-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-slider-color-step: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-slider-size-track: var(--bm-primitive-dimension-25, 0.25rem);
+  --bm-comp-slider-size-handle: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-slider-size-handle-active: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-slider-size-endpoint: var(--bm-comp-slider-size-track, 0.25rem);
+  --bm-comp-slider-size-step-x: var(--bm-primitive-dimension-12, 0.125rem);
+  --bm-comp-slider-space-gap-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-slider-space-gap-inside-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-slider-space-gap-outside-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-slider-radius-handle: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-slider-radius-endpoint: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-slider-radius-track: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-slider-border-width-handle: var(--bm-sem-border-width-lg, 0.125rem);
+  --bm-comp-slider-typo-values: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+}

package/components/Spinner.css

@@ -0,0 +1,120 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-spinner-color-track: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-spinner-color-indicator: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-spinner-color-indicator-neutral: var(
+    --bm-sem-color-border-strong,
+    #8697a5
+  );
+  --bm-comp-spinner-space-xs-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-spinner-space-sm-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-spinner-space-md-gap: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-spinner-space-lg-gap: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-spinner-space-content-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-spinner-space-nudge-y: var(--bm-sem-space-12, 0.125rem);
+  --bm-comp-spinner-size-xxs-track: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-spinner-size-xxs-border-width: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-spinner-size-xs-track: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-spinner-size-xs-border-width: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-spinner-size-sm-track: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-spinner-size-sm-border-width: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-spinner-size-md-track: var(--bm-primitive-dimension-400, 4rem);
+  --bm-comp-spinner-size-md-border-width: var(
+    --bm-primitive-dimension-37,
+    0.375rem
+  );
+  --bm-comp-spinner-size-lg-track: var(--bm-primitive-dimension-550, 5.5rem);
+  --bm-comp-spinner-size-lg-border-width: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-spinner-size-width: 27.5rem;
+  --bm-comp-spinner-typo-heading: var(
+    --bm-sem-typo-label-md,
+    600 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-spinner-typo-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-spinner-color-track: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-spinner-color-indicator: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-spinner-color-indicator-neutral: var(
+    --bm-sem-color-border-strong,
+    #9fafbc
+  );
+  --bm-comp-spinner-space-xs-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-spinner-space-sm-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-spinner-space-md-gap: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-spinner-space-lg-gap: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-spinner-space-content-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-spinner-space-nudge-y: var(--bm-sem-space-12, 0.125rem);
+  --bm-comp-spinner-size-xxs-track: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-spinner-size-xxs-border-width: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-spinner-size-xs-track: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-spinner-size-xs-border-width: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-spinner-size-sm-track: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-spinner-size-sm-border-width: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-spinner-size-md-track: var(--bm-primitive-dimension-400, 4rem);
+  --bm-comp-spinner-size-md-border-width: var(
+    --bm-primitive-dimension-37,
+    0.375rem
+  );
+  --bm-comp-spinner-size-lg-track: var(--bm-primitive-dimension-550, 5.5rem);
+  --bm-comp-spinner-size-lg-border-width: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-spinner-size-width: 27.5rem;
+  --bm-comp-spinner-typo-heading: var(
+    --bm-sem-typo-label-md,
+    600 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-spinner-typo-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+}

package/components/Stepper.css

@@ -0,0 +1,248 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-stepper-color-incomplete-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-stepper-color-incomplete-fg: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-stepper-color-incomplete-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-stepper-color-incomplete-heading: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-stepper-color-current-bg: var(
+    --bm-utility-color-accent-subtlest,
+    #e9fcff
+  );
+  --bm-comp-stepper-color-current-fg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-stepper-color-current-border: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-stepper-color-current-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-stepper-color-complete-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-stepper-color-complete-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-stepper-color-complete-border: var(
+    --bm-comp-stepper-color-complete-bg,
+    #00768f
+  );
+  --bm-comp-stepper-color-complete-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-stepper-color-error-bg: var(
+    --bm-sem-color-surface-negative,
+    #fee6e7
+  );
+  --bm-comp-stepper-color-error-fg: var(--bm-sem-color-text-negative, #cc2429);
+  --bm-comp-stepper-color-error-border: var(
+    --bm-comp-stepper-color-error-fg,
+    #cc2429
+  );
+  --bm-comp-stepper-color-error-heading: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-stepper-color-body: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-stepper-color-line: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-stepper-color-line-complete: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-stepper-size-sm-container: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-stepper-size-sm-incomplete: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-stepper-size-sm-line-wrapper: var(
+    --bm-comp-stepper-size-sm-container,
+    1rem
+  );
+  --bm-comp-stepper-size-md-container: var(
+    --bm-primitive-dimension-150,
+    1.5rem
+  );
+  --bm-comp-stepper-size-md-line-wrapper: var(
+    --bm-comp-stepper-size-md-container,
+    1.5rem
+  );
+  --bm-comp-stepper-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-stepper-space-content-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-stepper-space-horizontal-line-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-stepper-space-horizontal-content-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-stepper-space-vertical-content-wrapper-y: var(
+    --bm-sem-space-75,
+    0.75rem
+  );
+  --bm-comp-stepper-space-vertical-content-wrapper-gap: var(
+    --bm-sem-space-50,
+    0.5rem
+  );
+  --bm-comp-stepper-space-vertical-content-bottom: var(
+    --bm-sem-space-50,
+    0.5rem
+  );
+  --bm-comp-stepper-typo-heading: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-stepper-typo-body: var(
+    --bm-sem-typo-body-xs,
+    400 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-stepper-typo-number: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-stepper-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-stepper-border-width-container: var(
+    --bm-sem-border-width-md,
+    0.063rem
+  );
+  --bm-comp-stepper-border-width-line: var(--bm-sem-border-width-md, 0.063rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-stepper-color-incomplete-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-stepper-color-incomplete-fg: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-stepper-color-incomplete-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-stepper-color-incomplete-heading: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-stepper-color-current-bg: var(
+    --bm-utility-color-accent-subtlest,
+    #01262d
+  );
+  --bm-comp-stepper-color-current-fg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-stepper-color-current-border: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-stepper-color-current-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-stepper-color-complete-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-stepper-color-complete-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-stepper-color-complete-border: var(
+    --bm-comp-stepper-color-complete-bg,
+    #43bfd6
+  );
+  --bm-comp-stepper-color-complete-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-stepper-color-error-bg: var(
+    --bm-sem-color-surface-negative,
+    #520f11
+  );
+  --bm-comp-stepper-color-error-fg: var(--bm-sem-color-text-negative, #f67378);
+  --bm-comp-stepper-color-error-border: var(
+    --bm-comp-stepper-color-error-fg,
+    #f67378
+  );
+  --bm-comp-stepper-color-error-heading: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-stepper-color-body: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-stepper-color-line: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-stepper-color-line-complete: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-stepper-size-sm-container: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-stepper-size-sm-incomplete: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-stepper-size-sm-line-wrapper: var(
+    --bm-comp-stepper-size-sm-container,
+    1rem
+  );
+  --bm-comp-stepper-size-md-container: var(
+    --bm-primitive-dimension-150,
+    1.5rem
+  );
+  --bm-comp-stepper-size-md-line-wrapper: var(
+    --bm-comp-stepper-size-md-container,
+    1.5rem
+  );
+  --bm-comp-stepper-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-stepper-space-content-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-stepper-space-horizontal-line-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-stepper-space-horizontal-content-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-stepper-space-vertical-content-wrapper-y: var(
+    --bm-sem-space-75,
+    0.75rem
+  );
+  --bm-comp-stepper-space-vertical-content-wrapper-gap: var(
+    --bm-sem-space-50,
+    0.5rem
+  );
+  --bm-comp-stepper-space-vertical-content-bottom: var(
+    --bm-sem-space-50,
+    0.5rem
+  );
+  --bm-comp-stepper-typo-heading: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-stepper-typo-body: var(
+    --bm-sem-typo-body-xs,
+    400 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-stepper-typo-number: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-stepper-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-stepper-border-width-container: var(
+    --bm-sem-border-width-md,
+    0.063rem
+  );
+  --bm-comp-stepper-border-width-line: var(--bm-sem-border-width-md, 0.063rem);
+}