@viasat/beam-tokens 2.0.0

package/components/Alert.css

@@ -0,0 +1,244 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-alert-color-positive-bg: var(
+    --bm-sem-color-surface-positive,
+    #daf7cf
+  );
+  --bm-comp-alert-color-positive-icon: var(
+    --bm-sem-color-icon-positive-strong,
+    #187c36
+  );
+  --bm-comp-alert-color-positive-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-positive-body: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-positive-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-alert-color-warning-bg: var(
+    --bm-sem-color-surface-warning,
+    #ffe4c9
+  );
+  --bm-comp-alert-color-warning-icon: var(
+    --bm-sem-color-icon-warning-strong,
+    #ac4902
+  );
+  --bm-comp-alert-color-warning-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-warning-body: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-alert-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-alert-color-negative-bg: var(
+    --bm-sem-color-surface-negative,
+    #fee6e7
+  );
+  --bm-comp-alert-color-negative-icon: var(
+    --bm-sem-color-icon-negative-strong,
+    #cc2429
+  );
+  --bm-comp-alert-color-negative-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-negative-body: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-negative-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-alert-color-info-primary-bg: var(
+    --bm-sem-color-surface-info-primary,
+    #ccf0ff
+  );
+  --bm-comp-alert-color-info-primary-icon: var(
+    --bm-sem-color-icon-info-primary-strong,
+    #006ead
+  );
+  --bm-comp-alert-color-info-primary-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-info-primary-body: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-alert-color-info-secondary-bg: var(
+    --bm-sem-color-surface-info-secondary,
+    #dfe7ec
+  );
+  --bm-comp-alert-color-info-secondary-icon: var(
+    --bm-sem-color-icon-info-secondary-strong,
+    #465967
+  );
+  --bm-comp-alert-color-info-secondary-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-info-secondary-body: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-alert-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-alert-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-alert-space-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-alert-space-sm-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-alert-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-alert-space-text-gap: var(--bm-sem-space-12, 0.125rem);
+  --bm-comp-alert-space-actions-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-alert-radius-in-page: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-alert-radius-full-width: var(--bm-sem-radius-none);
+  --bm-comp-alert-border-width: var(--bm-sem-border-width-none, 0);
+  --bm-comp-alert-size-sm-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-alert-size-md-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-alert-typo-sm-heading: var(
+    --bm-sem-typo-heading-xs,
+    700 1rem/1.25rem "Uni Neue"
+  );
+  --bm-comp-alert-typo-sm-body: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-alert-typo-md-heading: var(
+    --bm-sem-typo-heading-sm,
+    700 1.125rem/1.5rem "Uni Neue"
+  );
+  --bm-comp-alert-typo-md-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-alert-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-alert-color-positive-bg: var(
+    --bm-sem-color-surface-positive,
+    #02310e
+  );
+  --bm-comp-alert-color-positive-icon: var(
+    --bm-sem-color-icon-positive-strong,
+    #b3eb9e
+  );
+  --bm-comp-alert-color-positive-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-positive-body: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-positive-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-alert-color-warning-bg: var(
+    --bm-sem-color-surface-warning,
+    #3e1a00
+  );
+  --bm-comp-alert-color-warning-icon: var(
+    --bm-sem-color-icon-warning-strong,
+    #ffd4a8
+  );
+  --bm-comp-alert-color-warning-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-warning-body: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-alert-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-alert-color-negative-bg: var(
+    --bm-sem-color-surface-negative,
+    #520f11
+  );
+  --bm-comp-alert-color-negative-icon: var(
+    --bm-sem-color-icon-negative-strong,
+    #f67378
+  );
+  --bm-comp-alert-color-negative-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-negative-body: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-negative-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-alert-color-info-primary-bg: var(
+    --bm-sem-color-surface-info-primary,
+    #002f57
+  );
+  --bm-comp-alert-color-info-primary-icon: var(
+    --bm-sem-color-icon-info-primary-strong,
+    #9be1ff
+  );
+  --bm-comp-alert-color-info-primary-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-info-primary-body: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-alert-color-info-secondary-bg: var(
+    --bm-sem-color-surface-info-secondary,
+    #202e39
+  );
+  --bm-comp-alert-color-info-secondary-icon: var(
+    --bm-sem-color-icon-info-secondary-strong,
+    #c3cdd5
+  );
+  --bm-comp-alert-color-info-secondary-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-info-secondary-body: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-alert-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-alert-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-alert-space-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-alert-space-sm-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-alert-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-alert-space-text-gap: var(--bm-sem-space-12, 0.125rem);
+  --bm-comp-alert-space-actions-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-alert-radius-in-page: var(--bm-sem-radius-md, 0.5rem);
+  --bm-comp-alert-radius-full-width: var(--bm-sem-radius-none);
+  --bm-comp-alert-border-width: var(--bm-sem-border-width-none, 0);
+  --bm-comp-alert-size-sm-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-alert-size-md-icon: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-alert-typo-sm-heading: var(
+    --bm-sem-typo-heading-xs,
+    700 1rem/1.25rem "Uni Neue"
+  );
+  --bm-comp-alert-typo-sm-body: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-alert-typo-md-heading: var(
+    --bm-sem-typo-heading-sm,
+    700 1.125rem/1.5rem "Uni Neue"
+  );
+  --bm-comp-alert-typo-md-body: var(
+    --bm-sem-typo-body-md,
+    400 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-alert-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+}

package/components/Avatar.css

@@ -0,0 +1,124 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-avatar-size-xs: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-avatar-size-sm: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-avatar-size-md: var(--bm-primitive-dimension-200, 2rem);
+  --bm-comp-avatar-size-lg: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-avatar-size-xl: var(--bm-primitive-dimension-300, 3rem);
+  --bm-comp-avatar-size-icon-xs: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-avatar-size-icon-sm: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-avatar-size-icon-md: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-avatar-size-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-avatar-size-icon-xl: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-avatar-color-border: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-avatar-color-accent-bg: var(
+    --bm-utility-color-accent-default,
+    #00768f
+  );
+  --bm-comp-avatar-color-accent-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-avatar-color-neutral-bg: var(
+    --bm-utility-color-gray-default,
+    #576775
+  );
+  --bm-comp-avatar-color-neutral-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-avatar-color-overflow-bg: var(
+    --bm-utility-color-gray-subtler,
+    #dfe7ec
+  );
+  --bm-comp-avatar-color-overflow-fg: var(--bm-sem-color-text-primary, #141d24);
+  --bm-comp-avatar-color-overflow-border: var(
+    --bm-sem-color-surface-01,
+    #ffffff
+  );
+  --bm-comp-avatar-typo-xs: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-lg: var(
+    --bm-sem-typo-label-md,
+    600 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-xl: var(
+    --bm-sem-typo-label-lg,
+    600 1.125rem/1.75rem "Source Sans Pro"
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-avatar-size-xs: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-avatar-size-sm: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-avatar-size-md: var(--bm-primitive-dimension-200, 2rem);
+  --bm-comp-avatar-size-lg: var(--bm-primitive-dimension-250, 2.5rem);
+  --bm-comp-avatar-size-xl: var(--bm-primitive-dimension-300, 3rem);
+  --bm-comp-avatar-size-icon-xs: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-avatar-size-icon-sm: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-avatar-size-icon-md: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-avatar-size-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-avatar-size-icon-xl: var(--bm-sem-size-icon-lg, 1.5rem);
+  --bm-comp-avatar-color-border: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-avatar-color-accent-bg: var(
+    --bm-utility-color-accent-default,
+    #43bfd6
+  );
+  --bm-comp-avatar-color-accent-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-avatar-color-neutral-bg: var(
+    --bm-utility-color-gray-default,
+    #9fafbc
+  );
+  --bm-comp-avatar-color-neutral-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-avatar-color-overflow-bg: var(
+    --bm-utility-color-gray-subtler,
+    #32424e
+  );
+  --bm-comp-avatar-color-overflow-fg: var(--bm-sem-color-text-primary, #ffffff);
+  --bm-comp-avatar-color-overflow-border: var(
+    --bm-sem-color-surface-01,
+    #202e39
+  );
+  --bm-comp-avatar-typo-xs: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-lg: var(
+    --bm-sem-typo-label-md,
+    600 1rem/1.5rem "Source Sans Pro"
+  );
+  --bm-comp-avatar-typo-xl: var(
+    --bm-sem-typo-label-lg,
+    600 1.125rem/1.75rem "Source Sans Pro"
+  );
+}