@viasat/beam-tokens 2.0.0

package/components/Chip.css

@@ -0,0 +1,102 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-chip-color-bg: var(
+    --bm-sem-color-action-neutral-subtle,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-chip-color-fg: var(--bm-sem-color-icon-primary, #141d24);
+  --bm-comp-chip-color-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-chip-color-bg-selected: var(
+    --bm-sem-color-surface-selected,
+    #e9fcff
+  );
+  --bm-comp-chip-color-fg-selected: var(--bm-sem-color-icon-selected, #00768f);
+  --bm-comp-chip-color-border-selected: var(
+    --bm-sem-color-border-selected,
+    #00768f
+  );
+  --bm-comp-chip-radius-container: var(
+    --bm-utility-comp-chip-radius-container,
+    0.25rem
+  );
+  --bm-comp-chip-radius-focus: var(--bm-utility-comp-chip-radius-focus, 0.5rem);
+  --bm-comp-chip-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-chip-space-sm-x: var(--bm-utility-comp-chip-space-sm-x, 0.5rem);
+  --bm-comp-chip-space-sm-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-chip-space-md-x: var(--bm-utility-comp-chip-space-md-x, 0.5rem);
+  --bm-comp-chip-space-lg-x: var(--bm-utility-comp-chip-space-lg-x, 0.75rem);
+  --bm-comp-chip-space-text: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-chip-size-sm-height: var(--bm-sem-size-height-xs, 1.5rem);
+  --bm-comp-chip-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-chip-size-md-height: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-chip-size-md-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-chip-size-lg-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-chip-size-lg-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-chip-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-chip-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-chip-typo-lg: var(
+    --bm-sem-typo-label-md,
+    600 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-chip-shadow: 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-chip-color-bg: var(
+    --bm-sem-color-action-neutral-subtle,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-chip-color-fg: var(--bm-sem-color-icon-primary, #ffffff);
+  --bm-comp-chip-color-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-chip-color-bg-selected: var(
+    --bm-sem-color-surface-selected,
+    #00414d
+  );
+  --bm-comp-chip-color-fg-selected: var(--bm-sem-color-icon-selected, #43bfd6);
+  --bm-comp-chip-color-border-selected: var(
+    --bm-sem-color-border-selected,
+    #43bfd6
+  );
+  --bm-comp-chip-radius-container: var(
+    --bm-utility-comp-chip-radius-container,
+    0.25rem
+  );
+  --bm-comp-chip-radius-focus: var(--bm-utility-comp-chip-radius-focus, 0.5rem);
+  --bm-comp-chip-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-chip-space-sm-x: var(--bm-utility-comp-chip-space-sm-x, 0.5rem);
+  --bm-comp-chip-space-sm-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-chip-space-md-x: var(--bm-utility-comp-chip-space-md-x, 0.5rem);
+  --bm-comp-chip-space-lg-x: var(--bm-utility-comp-chip-space-lg-x, 0.75rem);
+  --bm-comp-chip-space-text: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-chip-size-sm-height: var(--bm-sem-size-height-xs, 1.5rem);
+  --bm-comp-chip-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-chip-size-md-height: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-chip-size-md-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-chip-size-lg-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-chip-size-lg-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-chip-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-chip-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-chip-typo-lg: var(
+    --bm-sem-typo-label-md,
+    600 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-chip-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+}

package/components/CloseButton.css

@@ -0,0 +1,42 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-close-btn-color-default: var(
+    --bm-sem-color-icon-secondary,
+    #576775
+  );
+  --bm-comp-close-btn-space-x: var(--bm-primitive-dimension-12, 0.125rem);
+  --bm-comp-close-btn-space-y: var(--bm-primitive-dimension-12, 0.125rem);
+  --bm-comp-close-btn-size-xs: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-close-btn-size-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-close-btn-size-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-close-btn-size-lg: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-close-btn-size-xl: var(--bm-sem-size-icon-xl, 1.75rem);
+  --bm-comp-close-btn-radius: var(
+    --bm-utility-comp-btn-radius-container,
+    0.25rem
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-close-btn-color-default: var(
+    --bm-sem-color-icon-secondary,
+    #c3cdd5
+  );
+  --bm-comp-close-btn-space-x: var(--bm-primitive-dimension-12, 0.125rem);
+  --bm-comp-close-btn-space-y: var(--bm-primitive-dimension-12, 0.125rem);
+  --bm-comp-close-btn-size-xs: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-close-btn-size-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-close-btn-size-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-close-btn-size-lg: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-close-btn-size-xl: var(--bm-sem-size-icon-xl, 1.75rem);
+  --bm-comp-close-btn-radius: var(
+    --bm-utility-comp-btn-radius-container,
+    0.25rem
+  );
+}

package/components/DataTable.css

@@ -0,0 +1,214 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-data-table-color-zebra: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-data-table-color-header-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-data-table-color-header-body: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-data-table-color-col-header-bg: var(
+    --bm-sem-color-surface-transparent,
+    #ffffff00
+  );
+  --bm-comp-data-table-color-col-header-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-data-table-color-col-header-group-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-data-table-color-col-header-group-text: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-data-table-color-cell-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-data-table-color-cell-text-supporting: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-data-table-color-cell-icon: var(
+    --bm-sem-color-icon-secondary,
+    #576775
+  );
+  --bm-comp-data-table-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-header-sm-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-header-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-col-header-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-col-header-group-height: var(
+    --bm-primitive-dimension-200,
+    2rem
+  );
+  --bm-comp-data-table-space-cell-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-cell-sm-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-cell-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-cell-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-footer-sm-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-footer-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-footer-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-section-inner-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-section-sm-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-section-md-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-section-lg-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-typo-cell: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-emphisis: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-supporting: var(
+    --bm-sem-typo-compact-body-xs,
+    400 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header-group: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-size-col-header-group-height: var(
+    --bm-primitive-dimension-225,
+    2.25rem
+  );
+  --bm-comp-data-table-size-cell-sm-height: var(
+    --bm-primitive-dimension-275,
+    2.75rem
+  );
+  --bm-comp-data-table-size-cell-md-height: var(
+    --bm-primitive-dimension-325,
+    3.25rem
+  );
+  --bm-comp-data-table-size-cell-lg-height: var(
+    --bm-primitive-dimension-375,
+    3.75rem
+  );
+  --bm-comp-data-table-size-cell-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-data-table-radius: var(--bm-sem-radius-md, 0.5rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-data-table-color-zebra: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-data-table-color-header-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-data-table-color-header-body: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-color-col-header-bg: var(
+    --bm-sem-color-surface-transparent,
+    #ffffff00
+  );
+  --bm-comp-data-table-color-col-header-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-data-table-color-col-header-group-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-data-table-color-col-header-group-text: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-color-cell-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-data-table-color-cell-text-supporting: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-color-cell-icon: var(
+    --bm-sem-color-icon-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-header-sm-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-header-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-col-header-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-col-header-group-height: var(
+    --bm-primitive-dimension-200,
+    2rem
+  );
+  --bm-comp-data-table-space-cell-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-cell-sm-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-cell-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-cell-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-footer-sm-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-footer-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-footer-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-section-inner-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-section-sm-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-section-md-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-section-lg-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-typo-cell: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-emphisis: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-supporting: var(
+    --bm-sem-typo-compact-body-xs,
+    400 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header-group: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-size-col-header-group-height: var(
+    --bm-primitive-dimension-225,
+    2.25rem
+  );
+  --bm-comp-data-table-size-cell-sm-height: var(
+    --bm-primitive-dimension-275,
+    2.75rem
+  );
+  --bm-comp-data-table-size-cell-md-height: var(
+    --bm-primitive-dimension-325,
+    3.25rem
+  );
+  --bm-comp-data-table-size-cell-lg-height: var(
+    --bm-primitive-dimension-375,
+    3.75rem
+  );
+  --bm-comp-data-table-size-cell-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-data-table-radius: var(--bm-sem-radius-md, 0.5rem);
+}

package/components/Dialog.css

@@ -0,0 +1,150 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-dialog-color-description: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-dialog-color-body: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-dialog-color-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-dialog-color-overlay: var(
+    --bm-sem-color-overlay-black-40,
+    rgba(20, 29, 36, 0.72)
+  );
+  --bm-comp-dialog-color-icon: var(--bm-sem-color-icon-primary, #141d24);
+  --bm-comp-dialog-color-icon-info: var(
+    --bm-sem-color-icon-info-primary,
+    #0095e0
+  );
+  --bm-comp-dialog-color-icon-positive: var(
+    --bm-sem-color-icon-positive,
+    #24a148
+  );
+  --bm-comp-dialog-color-icon-warning: var(
+    --bm-sem-color-icon-warning,
+    #eb6200
+  );
+  --bm-comp-dialog-color-icon-negative: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-dialog-radius-default: var(--bm-sem-radius-lg, 1rem);
+  --bm-comp-dialog-radius-sm-screen: var(--bm-sem-radius-none);
+  --bm-comp-dialog-space-x: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-dialog-space-sm-screen-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-dialog-space-heading-top: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-dialog-space-heading-gap-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-dialog-space-heading-gap-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-dialog-space-heading-text-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-dialog-space-footer-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-dialog-space-footer-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-dialog-space-footer-sm-screen-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-dialog-space-body-y: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-dialog-space-body-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-dialog-space-viewport-offset: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-dialog-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-dialog-size-sm: 400px;
+  --bm-comp-dialog-size-md: 600px;
+  --bm-comp-dialog-size-lg: 720px;
+  --bm-comp-dialog-size-xl: 920px;
+  --bm-comp-dialog-size-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-dialog-size-divider-wrapper: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-dialog-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.12)
+  );
+  --bm-comp-dialog-typo-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-dialog-typo-description: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-dialog-typo-heading: var(
+    --bm-sem-typo-heading-md,
+    700 1.25rem/1.75rem "Uni Neue"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-dialog-color-description: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-dialog-color-body: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-dialog-color-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-dialog-color-overlay: var(
+    --bm-sem-color-overlay-black-40,
+    rgba(20, 29, 36, 0.72)
+  );
+  --bm-comp-dialog-color-icon: var(--bm-sem-color-icon-primary, #ffffff);
+  --bm-comp-dialog-color-icon-info: var(
+    --bm-sem-color-icon-info-primary,
+    #64cefb
+  );
+  --bm-comp-dialog-color-icon-positive: var(
+    --bm-sem-color-icon-positive,
+    #71d963
+  );
+  --bm-comp-dialog-color-icon-warning: var(
+    --bm-sem-color-icon-warning,
+    #ffb17a
+  );
+  --bm-comp-dialog-color-icon-negative: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-dialog-radius-default: var(--bm-sem-radius-lg, 1rem);
+  --bm-comp-dialog-radius-sm-screen: var(--bm-sem-radius-none);
+  --bm-comp-dialog-space-x: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-dialog-space-sm-screen-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-dialog-space-heading-top: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-dialog-space-heading-gap-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-dialog-space-heading-gap-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-dialog-space-heading-text-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-dialog-space-footer-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-dialog-space-footer-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-dialog-space-footer-sm-screen-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-dialog-space-body-y: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-dialog-space-body-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-dialog-space-viewport-offset: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-dialog-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-dialog-size-sm: 400px;
+  --bm-comp-dialog-size-md: 600px;
+  --bm-comp-dialog-size-lg: 720px;
+  --bm-comp-dialog-size-xl: 920px;
+  --bm-comp-dialog-size-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-dialog-size-divider-wrapper: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-dialog-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.3)
+  );
+  --bm-comp-dialog-typo-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-dialog-typo-description: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-dialog-typo-heading: var(
+    --bm-sem-typo-heading-md,
+    700 1.25rem/1.75rem "Uni Neue"
+  );
+}

package/components/Divider.css

@@ -0,0 +1,32 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[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);
+  --bm-comp-divider-typo-text: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-divider-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-divider-size-icon-only: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-divider-space-content: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-divider-space-content-gap: var(--bm-sem-space-25, 0.25rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[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);
+  --bm-comp-divider-typo-text: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-divider-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-divider-size-icon-only: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-divider-space-content: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-divider-space-content-gap: var(--bm-sem-space-25, 0.25rem);
+}

package/components/EmptyState.css

@@ -0,0 +1,56 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-empty-state-color-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-empty-state-color-body: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-empty-state-color-icon: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-empty-state-space-gap: var(--bm-sem-space-200, 2rem);
+  --bm-comp-empty-state-space-text-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-empty-state-space-actions-gap: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-empty-state-size-icon: var(--bm-primitive-dimension-600, 6rem);
+  --bm-comp-empty-state-size-width: 35rem;
+  --bm-comp-empty-state-typo-heading: var(
+    --bm-sem-typo-heading-lg,
+    700 1.5rem/2rem "Uni Neue"
+  );
+  --bm-comp-empty-state-typo-body: var(
+    --bm-sem-typo-body-lg,
+    400 1.125rem/1.75rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-empty-state-color-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-empty-state-color-body: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-empty-state-color-icon: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-empty-state-space-gap: var(--bm-sem-space-200, 2rem);
+  --bm-comp-empty-state-space-text-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-empty-state-space-actions-gap: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-empty-state-size-icon: var(--bm-primitive-dimension-600, 6rem);
+  --bm-comp-empty-state-size-width: 35rem;
+  --bm-comp-empty-state-typo-heading: var(
+    --bm-sem-typo-heading-lg,
+    700 1.5rem/2rem "Uni Neue"
+  );
+  --bm-comp-empty-state-typo-body: var(
+    --bm-sem-typo-body-lg,
+    400 1.125rem/1.75rem "Source Sans Pro"
+  );
+}