@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.52

package/src/mixins/font-extras.css

@@ -0,0 +1,103 @@
+/* ============================================================================
+ * Hand-curated font mixins
+ * ============================================================================
+ *
+ * These mixins are NOT produced by the obc-figma-plugin's `font-exports`
+ * codegen and live in their own file so `fonts.css` can be regenerated
+ * wholesale without risk of dropping them.
+ *
+ *   - `font-overlay-outline-shadow` — text outline shadow for legibility on
+ *     map/video overlays.
+ *   - `font-instrument-*-box` family — flex container shells that pair with
+ *     the generated `font-instrument-*` mixins to align numeric readouts to
+ *     their baseline padding tokens. Consumed by `readout`, `readout-list-item`,
+ *     `readout-setpoint`, and `ar/poi-header`.
+ *
+ * Auto-loaded by `postcss-mixins` (see `postcss.config.mjs` → `mixinsDir`)
+ * and audited by `npm run lint:mixins`.
+ * ============================================================================ */
+
+@define-mixin font-overlay-outline-shadow {
+  text-shadow:
+    1px 0 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    -1px 0 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    0 1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    0 -1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    1px 1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    -1px 1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    1px -1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    -1px -1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
+    0 1px 2px #000;
+}
+
+@define-mixin font-instrument-value-small-box {
+  display: flex;
+  align-items: flex-end;
+  block-size: var(--global-typography-instrument-value-small-container-height);
+  max-block-size: var(
+    --global-typography-instrument-value-small-container-height
+  );
+  padding-bottom: var(
+    --global-typography-instrument-value-small-padding-bottom
+  );
+  overflow: hidden;
+}
+
+@define-mixin font-instrument-value-regular-box {
+  display: flex;
+  align-items: flex-end;
+  block-size: var(
+    --global-typography-instrument-value-regular-container-height
+  );
+  max-block-size: var(
+    --global-typography-instrument-value-regular-container-height
+  );
+  padding-bottom: var(
+    --global-typography-instrument-value-regular-padding-bottom
+  );
+  overflow: hidden;
+}
+
+@define-mixin font-instrument-value-m-box {
+  display: flex;
+  align-items: flex-end;
+  block-size: var(--global-typography-instrument-value-medium-container-height);
+  max-block-size: var(
+    --global-typography-instrument-value-medium-container-height
+  );
+  padding-bottom: calc(
+    var(--global-typography-instrument-value-medium-padding-bottom) / 2
+  );
+  overflow: hidden;
+}
+
+@define-mixin font-instrument-value-enhanced-box {
+  display: flex;
+  align-items: flex-end;
+  block-size: var(--global-typography-instrument-value-large-container-height);
+  max-block-size: var(
+    --global-typography-instrument-value-large-container-height
+  );
+  padding-bottom: calc(
+    var(--global-typography-instrument-value-large-padding-bottom) / 2
+  );
+  overflow: hidden;
+}
+
+@define-mixin font-instrument-label-box {
+  display: flex;
+  align-items: flex-end;
+  block-size: var(--global-typography-instrument-label-container-height);
+  max-block-size: var(--global-typography-instrument-label-container-height);
+  padding-bottom: var(--global-typography-instrument-label-padding-bottom);
+  overflow: hidden;
+}
+
+@define-mixin font-instrument-unit-box {
+  display: flex;
+  align-items: flex-end;
+  block-size: var(--global-typography-instrument-unit-container-height);
+  max-block-size: var(--global-typography-instrument-unit-container-height);
+  padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
+  overflow: hidden;
+}

package/src/mixins/fonts.css

@@ -1,5 +1,13 @@
+/* ============================================================================
+ * Generated by the obc-figma-plugin's `font-exports` codegen — do not hand-edit.
+ * Replace wholesale on each regeneration. Hand-curated companion mixins live
+ * in `font-extras.css` (auto-loaded alongside this file).
+ * See IMPLEMENTATION_GUIDELINES.md § PostCSS for the full plugin workflow.
+ * ============================================================================ */
+
 @define-mixin font-label {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
   font-size: var(--global-typography-ui-label-font-size);
   line-height: var(--global-typography-ui-label-line-height);
   font-feature-settings:
@@ -9,7 +17,8 @@
 }
 
 @define-mixin font-label-active {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:
@@ -19,7 +28,8 @@
 }
 
 @define-mixin font-body {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
   font-size: var(--global-typography-ui-body-font-size);
   line-height: var(--global-typography-ui-body-line-height);
   font-feature-settings:
@@ -29,7 +39,8 @@
 }
 
 @define-mixin font-body-active {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-active-font-weight);
   font-size: var(--global-typography-ui-body-active-font-size);
   line-height: var(--global-typography-ui-body-active-line-height);
   font-feature-settings:
@@ -39,7 +50,8 @@
 }
 
 @define-mixin font-button {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
   font-feature-settings:
@@ -49,7 +61,8 @@
 }
 
 @define-mixin font-button-two-line {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-two-line-font-size);
   line-height: var(--global-typography-ui-button-two-line-line-height);
   letter-spacing: var(--global-typography-ui-button-two-line-letter-spacing);
@@ -59,21 +72,9 @@
     "ss04" on;
 }
 
-@define-mixin font-overlay-outline-shadow {
-  text-shadow:
-    1px 0 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    -1px 0 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    0 1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    0 -1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    1px 1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    -1px 1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    1px -1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    -1px -1px 0 var(--overlay-element-active-inverted-color, #1a1a1a),
-    0 1px 2px #000;
-}
-
 @define-mixin font-overline {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-overline-font-weight);
   font-size: var(--global-typography-ui-overline-font-size);
   line-height: var(--global-typography-ui-overline-line-height);
   letter-spacing: var(--global-typography-ui-overline-letter-spacing);
@@ -84,7 +85,8 @@
 }
 
 @define-mixin font-overline-new {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-overline-font-weight);
   font-feature-settings:
     "liga" off,
     "clig" off,
@@ -92,7 +94,7 @@
 }
 
 @define-mixin font-subtitle {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-150);
   line-height: var(--line-height-150);
@@ -103,7 +105,7 @@
 }
 
 @define-mixin font-title {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
   font-weight: var(--font-weight-bold);
   font-size: var(--global-typography-ui-title-font-size);
   line-height: var(--global-typography-ui-title-line-height);
@@ -115,7 +117,7 @@
 }
 
 @define-mixin font-button-l {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-button-font-weight);
   font-size: var(--global-typography-ui-button-font-size);
   line-height: var(--global-typography-ui-button-line-height);
@@ -220,60 +222,6 @@
     "ss04" on;
 }
 
-@define-mixin font-instrument-value-small-box {
-  display: flex;
-  align-items: flex-end;
-  block-size: var(--global-typography-instrument-value-small-container-height);
-  max-block-size: var(
-    --global-typography-instrument-value-small-container-height
-  );
-  padding-bottom: var(
-    --global-typography-instrument-value-small-padding-bottom
-  );
-  overflow: hidden;
-}
-
-@define-mixin font-instrument-value-regular-box {
-  display: flex;
-  align-items: flex-end;
-  block-size: var(
-    --global-typography-instrument-value-regular-container-height
-  );
-  max-block-size: var(
-    --global-typography-instrument-value-regular-container-height
-  );
-  padding-bottom: var(
-    --global-typography-instrument-value-regular-padding-bottom
-  );
-  overflow: hidden;
-}
-
-@define-mixin font-instrument-value-m-box {
-  display: flex;
-  align-items: flex-end;
-  block-size: var(--global-typography-instrument-value-medium-container-height);
-  max-block-size: var(
-    --global-typography-instrument-value-medium-container-height
-  );
-  padding-bottom: calc(
-    var(--global-typography-instrument-value-medium-padding-bottom) / 2
-  );
-  overflow: hidden;
-}
-
-@define-mixin font-instrument-value-enhanced-box {
-  display: flex;
-  align-items: flex-end;
-  block-size: var(--global-typography-instrument-value-large-container-height);
-  max-block-size: var(
-    --global-typography-instrument-value-large-container-height
-  );
-  padding-bottom: calc(
-    var(--global-typography-instrument-value-large-padding-bottom) / 2
-  );
-  overflow: hidden;
-}
-
 @define-mixin font-instrument-label {
   font-family: var(--global-typography-font-family);
   font-size: var(--global-typography-instrument-label-font-size);
@@ -294,24 +242,6 @@
     "ss04" on;
 }
 
-@define-mixin font-instrument-label-box {
-  display: flex;
-  align-items: flex-end;
-  block-size: var(--global-typography-instrument-label-container-height);
-  max-block-size: var(--global-typography-instrument-label-container-height);
-  padding-bottom: var(--global-typography-instrument-label-padding-bottom);
-  overflow: hidden;
-}
-
-@define-mixin font-instrument-unit-box {
-  display: flex;
-  align-items: flex-end;
-  block-size: var(--global-typography-instrument-unit-container-height);
-  max-block-size: var(--global-typography-instrument-unit-container-height);
-  padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
-  overflow: hidden;
-}
-
 @define-mixin font-instrument-tick-mark {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-label-font-weight);

package/src/navigation-instruments/watch/watch.css

@@ -4,7 +4,7 @@
 
 .label {
   @mixin font-body;
-  font-size: calc(12px / var(--scale));
+  font-size: calc(12px / var(--scale, 1));
   fill: var(--element-neutral-color);
   dominant-baseline: central;
   text-anchor: middle;

package/src/navigation-instruments/watch-flat/watch-flat.css

@@ -4,7 +4,7 @@
 
 .label {
   @mixin font-body;
-  font-size: calc(16px / var(--scale));
+  font-size: calc(16px / var(--scale, 1));
   fill: var(--element-neutral-color);
   alignment-baseline: middle;
   text-anchor: middle;

package/src/pages/alert-detail-page/alert-detail-page.css

@@ -5,7 +5,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  background: var(--color-container-background-color);
+  background: var(--container-background-color);
   height: 100%;
 
   --padding-horizontal: var(--app-components-modal-margin-vertical);