@viasat/beam-tokens 2.0.0

package/components/Tabs.css

@@ -0,0 +1,106 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-tabs-color-text: var(--bm-sem-color-text-secondary, #576775);
+  --bm-comp-tabs-color-text-selected: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-tabs-color-icon: var(--bm-sem-color-icon-secondary, #576775);
+  --bm-comp-tabs-color-icon-selected: var(
+    --bm-sem-color-icon-selected,
+    #00768f
+  );
+  --bm-comp-tabs-color-indicator: var(--bm-sem-color-border-03, #dfe7ec);
+  --bm-comp-tabs-color-indicator-selected: var(
+    --bm-sem-color-border-selected,
+    #00768f
+  );
+  --bm-comp-tabs-typo-md: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-typo-md-selected: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-typo-lg: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-typo-lg-selected: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-size-md-item: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-tabs-size-md-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-tabs-size-md-icon-only: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-tabs-size-md-indicator-extent: var(
+    --bm-comp-tabs-size-md-icon-only,
+    1.25rem
+  );
+  --bm-comp-tabs-size-lg-item: var(--bm-primitive-dimension-300, 3rem);
+  --bm-comp-tabs-size-lg-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-tabs-size-lg-icon-only: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-tabs-size-lg-indicator-extent: var(
+    --bm-comp-tabs-size-lg-icon-only,
+    1.5rem
+  );
+  --bm-comp-tabs-size-indicator: 0.188rem;
+  --bm-comp-tabs-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-tabs-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-tabs-space-gap-outer: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-tabs-radius-indicator: var(--bm-sem-radius-round, 624.938rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-tabs-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);
+  --bm-comp-tabs-color-text-selected: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-tabs-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);
+  --bm-comp-tabs-color-icon-selected: var(
+    --bm-sem-color-icon-selected,
+    #43bfd6
+  );
+  --bm-comp-tabs-color-indicator: var(--bm-sem-color-border-03, #576775);
+  --bm-comp-tabs-color-indicator-selected: var(
+    --bm-sem-color-border-selected,
+    #43bfd6
+  );
+  --bm-comp-tabs-typo-md: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-typo-md-selected: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-typo-lg: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-typo-lg-selected: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-tabs-size-md-item: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-tabs-size-md-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-tabs-size-md-icon-only: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-tabs-size-md-indicator-extent: var(
+    --bm-comp-tabs-size-md-icon-only,
+    1.25rem
+  );
+  --bm-comp-tabs-size-lg-item: var(--bm-primitive-dimension-300, 3rem);
+  --bm-comp-tabs-size-lg-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-tabs-size-lg-icon-only: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-tabs-size-lg-indicator-extent: var(
+    --bm-comp-tabs-size-lg-icon-only,
+    1.5rem
+  );
+  --bm-comp-tabs-size-indicator: 0.188rem;
+  --bm-comp-tabs-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-tabs-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-tabs-space-gap-outer: var(--bm-sem-space-150, 1.5rem);
+  --bm-comp-tabs-radius-indicator: var(--bm-sem-radius-round, 624.938rem);
+}

package/components/Toast.css

@@ -0,0 +1,190 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-toast-color-positive-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-toast-color-positive-icon: var(
+    --bm-sem-color-icon-positive,
+    #24a148
+  );
+  --bm-comp-toast-color-positive-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-toast-color-positive-body: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-toast-color-positive-highlight: var(
+    --bm-comp-toast-color-positive-icon,
+    #24a148
+  );
+  --bm-comp-toast-color-positive-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-toast-color-warning-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-toast-color-warning-icon: var(--bm-sem-color-icon-warning, #eb6200);
+  --bm-comp-toast-color-warning-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-toast-color-warning-body: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-toast-color-warning-highlight: var(
+    --bm-comp-toast-color-warning-icon,
+    #eb6200
+  );
+  --bm-comp-toast-color-warning-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-toast-color-negative-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-toast-color-negative-icon: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-toast-color-negative-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-toast-color-negative-body: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-toast-color-negative-highlight: var(
+    --bm-comp-toast-color-negative-icon,
+    #ed464c
+  );
+  --bm-comp-toast-color-negative-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-toast-color-info-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-toast-color-info-icon: var(
+    --bm-sem-color-icon-info-primary,
+    #0095e0
+  );
+  --bm-comp-toast-color-info-heading: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-toast-color-info-body: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-toast-color-info-highlight: var(
+    --bm-comp-toast-color-info-icon,
+    #0095e0
+  );
+  --bm-comp-toast-color-info-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-toast-radius: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-toast-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-toast-size-width: var(--bm-primitive-dimension-2400, 24rem);
+  --bm-comp-toast-size-highlight-width: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-toast-size-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-toast-space-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-toast-space-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-space-lite-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-toast-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-toast-space-content-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-toast-space-text-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-toast-space-actions-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-space-stack: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-space-viewport-offset: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.12)
+  );
+  --bm-comp-toast-typo-heading: var(
+    --bm-sem-typo-heading-xs,
+    700 1rem/1.25rem "Uni Neue"
+  );
+  --bm-comp-toast-typo-body: 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-toast-color-positive-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-toast-color-positive-icon: var(
+    --bm-sem-color-icon-positive,
+    #71d963
+  );
+  --bm-comp-toast-color-positive-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-toast-color-positive-body: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-toast-color-positive-highlight: var(
+    --bm-comp-toast-color-positive-icon,
+    #71d963
+  );
+  --bm-comp-toast-color-positive-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-toast-color-warning-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-toast-color-warning-icon: var(--bm-sem-color-icon-warning, #ffb17a);
+  --bm-comp-toast-color-warning-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-toast-color-warning-body: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-toast-color-warning-highlight: var(
+    --bm-comp-toast-color-warning-icon,
+    #ffb17a
+  );
+  --bm-comp-toast-color-warning-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-toast-color-negative-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-toast-color-negative-icon: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-toast-color-negative-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-toast-color-negative-body: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-toast-color-negative-highlight: var(
+    --bm-comp-toast-color-negative-icon,
+    #ed464c
+  );
+  --bm-comp-toast-color-negative-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-toast-color-info-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-toast-color-info-icon: var(
+    --bm-sem-color-icon-info-primary,
+    #64cefb
+  );
+  --bm-comp-toast-color-info-heading: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-toast-color-info-body: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-toast-color-info-highlight: var(
+    --bm-comp-toast-color-info-icon,
+    #64cefb
+  );
+  --bm-comp-toast-color-info-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-toast-radius: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-toast-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-toast-size-width: var(--bm-primitive-dimension-2400, 24rem);
+  --bm-comp-toast-size-highlight-width: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-toast-size-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-toast-space-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-toast-space-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-space-lite-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-toast-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-toast-space-content-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-toast-space-text-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-toast-space-actions-gap: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-space-stack: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-space-viewport-offset: var(--bm-sem-space-100, 1rem);
+  --bm-comp-toast-shadow: var(
+    --bm-sem-shadow-overlay,
+    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.3)
+  );
+  --bm-comp-toast-typo-heading: var(
+    --bm-sem-typo-heading-xs,
+    700 1rem/1.25rem "Uni Neue"
+  );
+  --bm-comp-toast-typo-body: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+}

package/components/Tooltip.css

@@ -0,0 +1,70 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-tooltip-color-bg: var(--bm-sem-color-surface-inverse, #202e39);
+  --bm-comp-tooltip-color-text: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-tooltip-color-icon-trigger: var(
+    --bm-sem-color-icon-secondary,
+    #576775
+  );
+  --bm-comp-tooltip-radius: var(--bm-sem-radius-sm, 0.25rem);
+  --bm-comp-tooltip-space-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-tooltip-space-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-tooltip-space-arrow: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-tooltip-space-offset: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-tooltip-size-arrow-width: 0.625rem;
+  --bm-comp-tooltip-size-arrow-height: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-tooltip-size-width: var(--bm-primitive-dimension-1500, 15rem);
+  --bm-comp-tooltip-size-icon-trigger-xs: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-tooltip-size-icon-trigger-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-tooltip-size-icon-trigger-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-tooltip-size-icon-trigger-lg: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-tooltip-size-icon-trigger-xl: var(--bm-sem-size-icon-xl, 1.75rem);
+  --bm-comp-tooltip-typo-body: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-tooltip-color-bg: var(--bm-sem-color-surface-inverse, #ffffff);
+  --bm-comp-tooltip-color-text: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-tooltip-color-icon-trigger: var(
+    --bm-sem-color-icon-secondary,
+    #c3cdd5
+  );
+  --bm-comp-tooltip-radius: var(--bm-sem-radius-sm, 0.25rem);
+  --bm-comp-tooltip-space-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-tooltip-space-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-tooltip-space-arrow: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-tooltip-space-offset: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-tooltip-size-arrow-width: 0.625rem;
+  --bm-comp-tooltip-size-arrow-height: var(
+    --bm-primitive-dimension-25,
+    0.25rem
+  );
+  --bm-comp-tooltip-size-width: var(--bm-primitive-dimension-1500, 15rem);
+  --bm-comp-tooltip-size-icon-trigger-xs: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-tooltip-size-icon-trigger-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-tooltip-size-icon-trigger-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-tooltip-size-icon-trigger-lg: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-tooltip-size-icon-trigger-xl: var(--bm-sem-size-icon-xl, 1.75rem);
+  --bm-comp-tooltip-typo-body: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+}