@viasat/beam-tokens 2.71.0 → 2.72.1

package/README.md

@@ -254,6 +254,28 @@ const App = () => (
 );
 ```
 
+The two forms are equivalent. Use whichever suits your markup, including on the
+same element as the theme classes, as in the third example above.
+
+#### Supported languages
+
+| Code | Language           | Default font       |
+| ---- | ------------------ | ------------------ |
+| `ar` | Arabic             | `Noto Sans Arabic` |
+| `he` | Hebrew             | `Noto Sans Hebrew` |
+| `ja` | Japanese           | `Noto Sans JP`     |
+| `th` | Thai               | `Noto Sans Thai`   |
+| `zh` | Simplified Chinese | `Noto Sans SC`     |
+
+A code with no entry here does nothing. There is no error and no warning, the
+rules simply are not generated, so check this table before reaching for a
+locale Beam does not list.
+
+Brand themes may override the default. `bm-onefi-emirates` under `lang="ar"`
+asks for `Emirates`, and `bm-onefi-thai` under `lang="th"` asks for `Prompt`.
+Beam does not bundle licensed brand fonts, so your application has to load
+those files itself. The default fonts above ship with `@viasat/beam-fonts`.
+
 > 💡 **Note**: Language codes should follow the ISO 639-1 standard. In some cases, the browser may automatically apply the correct font based on the language attribute.
 
 ## How It Works

package/components/Badge.css

@@ -188,6 +188,42 @@
     --bm-sem-color-border-info-secondary,
     rgba(87, 103, 117, 0.4)
   );
+  --bm-comp-badge-color-accent-strong-bg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-accent-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-subtler,
+    #d7f4f9
+  );
+  --bm-comp-badge-color-accent-medium-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-subtle-border: var(
+    --bm-alias-color-ramp-accent-muter,
+    #8cd8e6
+  );
   --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
   --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -273,6 +309,52 @@
     --bm-sem-typo-compact-label-md,
     600 1rem/1.25rem "Source Sans Pro"
   );
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
 }
 
 :host,
@@ -464,6 +546,42 @@
     --bm-sem-color-border-info-secondary,
     rgba(209, 218, 224, 0.4)
   );
+  --bm-comp-badge-color-accent-strong-bg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-accent-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-subtler,
+    #00414d
+  );
+  --bm-comp-badge-color-accent-medium-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-subtle-border: var(
+    --bm-alias-color-ramp-accent-muter,
+    #00768f
+  );
   --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
   --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -549,4 +667,50 @@
     --bm-sem-typo-compact-label-md,
     600 1rem/1.25rem "Source Sans Pro"
   );
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
 }

package/components/BadgeIndicator.css

@@ -0,0 +1,114 @@
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~="bm-dark"] .bm-inverse,
+[data-bm-theme~="bm-dark"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~="bm-light"] {
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~="bm-light"] .bm-inverse,
+[data-bm-theme~="bm-light"].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~="bm-dark"] {
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
+}