@viasat/beam-tokens 2.0.0

package/components/Input.css

@@ -0,0 +1,328 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-input-color-bg-disabled: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);
+  --bm-comp-input-color-border-error: var(
+    --bm-sem-color-border-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-border-disabled: rgba(134, 151, 165, 0.4);
+  --bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-input-color-text-placeholder: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-input-color-text-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-input-color-icon-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-input-color-icon-error: var(
+    --bm-sem-color-icon-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);
+  --bm-comp-input-color-choice-checkbox-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-checkbox-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-checkbox-selected-bg-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-choice-checkbox-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-switch-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-switch-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-switch-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-radio-selected-bg: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-radio-selected-border: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-input-color-choice-radio-selected-bg-error: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-input-color-choice-radio-selected-border-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-input-typo-default: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-label-choice: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-choice-nudge: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
+  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-text-area-height: var(
+    --bm-primitive-dimension-475,
+    4.75rem
+  );
+  --bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio-inside: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-input-size-choice-switch-height: var(
+    --bm-sem-size-icon-md,
+    1.25rem
+  );
+  --bm-comp-input-size-choice-switch-width: var(
+    --bm-primitive-dimension-250,
+    2.5rem
+  );
+  --bm-comp-input-size-choice-switch-knob: var(
+    --bm-primitive-dimension-87,
+    0.875rem
+  );
+  --bm-comp-input-radius-field: var(--bm-sem-radius-input-md, 0.25rem);
+  --bm-comp-input-radius-choice-checkbox: var(
+    --bm-sem-radius-input-sm,
+    0.125rem
+  );
+  --bm-comp-input-radius-choice-radio: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-radius-choice-switch: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-border-width-field-default: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-border-width-field-error: var(
+    --bm-sem-border-width-lg,
+    0.125rem
+  );
+  --bm-comp-input-border-width-choice: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-shadow-field: var(
+    --bm-sem-shadow-none,
+    0 0 0 0 rgb(0, 0, 0, 0)
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-input-color-bg-disabled: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);
+  --bm-comp-input-color-border-error: var(
+    --bm-sem-color-border-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-border-disabled: rgba(159, 175, 188, 0.4);
+  --bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-input-color-text-placeholder: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-input-color-text-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(195, 205, 213, 0.4)
+  );
+  --bm-comp-input-color-icon-disabled: var(
+    --bm-sem-color-text-disabled,
+    rgba(195, 205, 213, 0.4)
+  );
+  --bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-input-color-icon-error: var(
+    --bm-sem-color-icon-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);
+  --bm-comp-input-color-choice-checkbox-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-checkbox-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #141d24
+  );
+  --bm-comp-input-color-choice-checkbox-selected-bg-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-choice-checkbox-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-switch-selected-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-switch-selected-icon: var(
+    --bm-sem-color-icon-primary-inverse,
+    #141d24
+  );
+  --bm-comp-input-color-choice-switch-selected-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-input-color-choice-radio-selected-bg: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-input-color-choice-radio-selected-border: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-input-color-choice-radio-selected-bg-error: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-input-color-choice-radio-selected-border-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-color-choice-radio-selected-inner-circle-error: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-input-typo-default: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-label-choice: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-choice-nudge: var(
+    --bm-primitive-dimension-12,
+    0.125rem
+  );
+  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
+  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-text-area-height: var(
+    --bm-primitive-dimension-475,
+    4.75rem
+  );
+  --bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-choice-radio-inside: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-input-size-choice-switch-height: var(
+    --bm-sem-size-icon-md,
+    1.25rem
+  );
+  --bm-comp-input-size-choice-switch-width: var(
+    --bm-primitive-dimension-250,
+    2.5rem
+  );
+  --bm-comp-input-size-choice-switch-knob: var(
+    --bm-primitive-dimension-87,
+    0.875rem
+  );
+  --bm-comp-input-radius-field: var(--bm-sem-radius-input-md, 0.25rem);
+  --bm-comp-input-radius-choice-checkbox: var(
+    --bm-sem-radius-input-sm,
+    0.125rem
+  );
+  --bm-comp-input-radius-choice-radio: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-radius-choice-switch: var(
+    --bm-sem-radius-input-lg,
+    624.938rem
+  );
+  --bm-comp-input-border-width-field-default: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-border-width-field-error: var(
+    --bm-sem-border-width-lg,
+    0.125rem
+  );
+  --bm-comp-input-border-width-choice: var(
+    --bm-sem-border-width-input,
+    0.063rem
+  );
+  --bm-comp-input-shadow-field: var(
+    --bm-sem-shadow-none,
+    0 0 0 0 rgb(0, 0, 0, 0)
+  );
+}

package/components/Label.css

@@ -0,0 +1,46 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-label-typo-default: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-label-typo-optional: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-label-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-label-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-label-space-bottom: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-label-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-label-typo-default: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-label-typo-optional: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-label-typo-character-count: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-label-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-label-space-bottom: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-label-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+}

package/components/Link.css

@@ -0,0 +1,102 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-link-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-link-size-lg-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-link-size-xl-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-link-typo-sm: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-link-typo-md: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-link-typo-lg: var(
+    --bm-sem-typo-body-lg,
+    400 1.125rem/1.75rem "Source Sans Pro"
+  );
+  --bm-comp-link-typo-xl: var(
+    --bm-sem-typo-body-xl,
+    400 1.25rem/2rem "Source Sans Pro"
+  );
+  --bm-comp-link-color-primary-enabled: var(
+    --bm-sem-color-link-primary,
+    #00768f
+  );
+  --bm-comp-link-color-primary-hover: var(
+    --bm-utility-color-accent-strong,
+    #005b75
+  );
+  --bm-comp-link-color-primary-active: var(
+    --bm-utility-color-accent-stronger,
+    #00414d
+  );
+  --bm-comp-link-color-secondary-enabled: var(
+    --bm-sem-color-link-secondary,
+    #141d24
+  );
+  --bm-comp-link-color-secondary-hover: var(
+    --bm-sem-color-link-secondary,
+    #141d24
+  );
+  --bm-comp-link-color-secondary-active: var(
+    --bm-sem-color-link-secondary,
+    #141d24
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-link-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-link-size-lg-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-link-size-xl-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-link-typo-sm: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-link-typo-md: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-link-typo-lg: var(
+    --bm-sem-typo-body-lg,
+    400 1.125rem/1.75rem "Source Sans Pro"
+  );
+  --bm-comp-link-typo-xl: var(
+    --bm-sem-typo-body-xl,
+    400 1.25rem/2rem "Source Sans Pro"
+  );
+  --bm-comp-link-color-primary-enabled: var(
+    --bm-sem-color-link-primary,
+    #43bfd6
+  );
+  --bm-comp-link-color-primary-hover: var(
+    --bm-utility-color-accent-strong,
+    #b2e7f0
+  );
+  --bm-comp-link-color-primary-active: var(
+    --bm-utility-color-accent-stronger,
+    #d7f4f9
+  );
+  --bm-comp-link-color-secondary-enabled: var(
+    --bm-sem-color-link-secondary,
+    #ffffff
+  );
+  --bm-comp-link-color-secondary-hover: var(
+    --bm-sem-color-link-secondary,
+    #ffffff
+  );
+  --bm-comp-link-color-secondary-active: var(
+    --bm-sem-color-link-secondary,
+    #ffffff
+  );
+}

package/components/List.css

@@ -0,0 +1,22 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-list-space-marker: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-list-space-bottom-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-list-space-bottom-lg: var(--bm-sem-space-100, 1rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-list-space-marker: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-list-space-bottom-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-list-space-bottom-lg: var(--bm-sem-space-100, 1rem);
+}

package/components/Menu.css

@@ -0,0 +1,14 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-menu-space-trigger-offset: var(--bm-sem-space-50, 0.5rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-menu-space-trigger-offset: var(--bm-sem-space-50, 0.5rem);
+}

package/components/Pagination.css

@@ -0,0 +1,58 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-pagination-size-divider-height: var(
+    --bm-primitive-dimension-100,
+    1rem
+  );
+  --bm-comp-pagination-color-text: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-pagination-color-bg-selected: var(
+    --bm-sem-color-surface-selected,
+    #e9fcff
+  );
+  --bm-comp-pagination-color-fg-selected: var(
+    --bm-sem-color-text-selected,
+    #00768f
+  );
+  --bm-comp-pagination-color-border-selected: var(
+    --bm-sem-color-border-selected,
+    #00768f
+  );
+  --bm-comp-pagination-typo-default: 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-pagination-space-content-gap: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-pagination-space-controls-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-pagination-size-divider-height: var(
+    --bm-primitive-dimension-100,
+    1rem
+  );
+  --bm-comp-pagination-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-pagination-color-bg-selected: var(
+    --bm-sem-color-surface-selected,
+    #00414d
+  );
+  --bm-comp-pagination-color-fg-selected: var(
+    --bm-sem-color-text-selected,
+    #43bfd6
+  );
+  --bm-comp-pagination-color-border-selected: var(
+    --bm-sem-color-border-selected,
+    #43bfd6
+  );
+  --bm-comp-pagination-typo-default: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+}

package/components/Panel.css

@@ -0,0 +1,74 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-panel-size-sm: 20rem;
+  --bm-comp-panel-size-md: 27.5rem;
+  --bm-comp-panel-size-lg: 40rem;
+  --bm-comp-panel-space-x-sm: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-space-x-md: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-panel-space-header-pad-top: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-panel-space-header-pad-bottom: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-space-header-gap-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-panel-space-header-gap-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-panel-space-footer-pad-top: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-space-footer-pad-bottom: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-panel-space-footer-gap-actions: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-panel-space-footer-gap-actions-stack: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-radius: var(--bm-sem-radius-lg, 1rem);
+  --bm-comp-panel-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.12)
+  );
+  --bm-comp-panel-typo-heading: var(
+    --bm-sem-typo-heading-sm,
+    700 1.125rem/1.5rem "Uni Neue"
+  );
+  --bm-comp-panel-typo-description: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-panel-color-heading: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-panel-color-description: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-panel-size-sm: 20rem;
+  --bm-comp-panel-size-md: 27.5rem;
+  --bm-comp-panel-size-lg: 40rem;
+  --bm-comp-panel-space-x-sm: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-space-x-md: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-panel-space-header-pad-top: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-panel-space-header-pad-bottom: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-space-header-gap-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-panel-space-header-gap-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-panel-space-footer-pad-top: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-space-footer-pad-bottom: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-panel-space-footer-gap-actions: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-panel-space-footer-gap-actions-stack: var(--bm-sem-space-100, 1rem);
+  --bm-comp-panel-radius: var(--bm-sem-radius-lg, 1rem);
+  --bm-comp-panel-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.3)
+  );
+  --bm-comp-panel-typo-heading: var(
+    --bm-sem-typo-heading-sm,
+    700 1.125rem/1.5rem "Uni Neue"
+  );
+  --bm-comp-panel-typo-description: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-panel-color-heading: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-panel-color-description: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+}

package/components/Popover.css

@@ -0,0 +1,56 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-popover-color-bg-inverted: var(
+    --bm-sem-color-surface-inverse,
+    #202e39
+  );
+  --bm-comp-popover-color-border-inverted: var(
+    --bm-sem-color-border-inverse,
+    #465967
+  );
+  --bm-comp-popover-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.12)
+  );
+  --bm-comp-popover-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-popover-radius: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-popover-space-sm: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-popover-space-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-popover-space-lg: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-popover-space-offset: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-popover-size-beak-width: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-popover-size-beak-height: 0.625rem;
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-popover-color-bg-inverted: var(
+    --bm-sem-color-surface-inverse,
+    #ffffff
+  );
+  --bm-comp-popover-color-border-inverted: var(
+    --bm-sem-color-border-inverse,
+    #dfe7ec
+  );
+  --bm-comp-popover-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.3)
+  );
+  --bm-comp-popover-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-popover-radius: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-popover-space-sm: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-popover-space-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-popover-space-lg: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-popover-space-offset: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-popover-size-beak-width: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-popover-size-beak-height: 0.625rem;
+}