@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.61 → 2.0.0-next.62

package/dist/openbridge.css

@@ -2711,8 +2711,10 @@
   --pui-components-border-radius-button: 6px;
   --pui-components-border-radius-cutout: 7px;
   --pui-components-line-thickness-min: 1px;
-  --pui-components-button-container-height: 56px;
+  --pui-components-button-button-size-min: 48px;
   --pui-components-indicator-container-height: 24px;
+  --pui-components-button-button-size: 52px;
+  --pui-components-indicator-container-padding-vertical: 4px;
 }
 .obc-component-size-medium {
   --global-size-spacing-touch-target-min: 56px;
@@ -5344,8 +5346,10 @@
   --pui-components-border-radius-button: 8px;
   --pui-components-border-radius-cutout: 10px;
   --pui-components-line-thickness-min: 2px;
-  --pui-components-button-container-height: 56px;
+  --pui-components-button-button-size-min: 56px;
   --pui-components-indicator-container-height: 32px;
+  --pui-components-button-button-size: 56px;
+  --pui-components-indicator-container-padding-vertical: 4px;
 }
 .obc-component-size-large {
   --global-size-spacing-touch-target-min: 72px;
@@ -7967,8 +7971,10 @@
   --pui-components-border-radius-button: 12px;
   --pui-components-border-radius-cutout: 14px;
   --pui-components-line-thickness-min: 2px;
-  --pui-components-button-container-height: 72px;
+  --pui-components-button-button-size-min: 72px;
   --pui-components-indicator-container-height: 32px;
+  --pui-components-button-button-size: 72px;
+  --pui-components-indicator-container-padding-vertical: 32px;
 }
 .obc-component-size-xl {
   --global-size-spacing-touch-target-min: 96px;
@@ -10608,58 +10614,12 @@
   --pui-components-border-radius-button: 16px;
   --pui-components-border-radius-cutout: 18px;
   --pui-components-line-thickness-min: 2px;
-  --pui-components-button-container-height: 96px;
+  --pui-components-button-button-size-min: 96px;
   --pui-components-indicator-container-height: 48px;
+  --pui-components-button-button-size: 96px;
+  --pui-components-indicator-container-padding-vertical: 48px;
 }
 * {
-  --typography-primitives-font-family-main: "Noto Sans";
-  --typography-primitives-font-size-071: 11.5px;
-  --typography-primitives-font-size-100: 16px;
-  --typography-primitives-font-size-150: 23px;
-  --typography-primitives-font-size-200: 34px;
-  --typography-primitives-font-size-250: 39px;
-  --typography-primitives-font-size-300: 45px;
-  --typography-primitives-font-size-350: 57px;
-  --typography-primitives-font-size-400: 68px;
-  --typography-primitives-font-size-450: 73px;
-  --typography-primitives-font-size-500: 78px;
-  --typography-primitives-line-height-071: 16px;
-  --typography-primitives-line-height-100: 20px;
-  --typography-primitives-line-height-150: 24px;
-  --typography-primitives-line-height-200: 32px;
-  --typography-primitives-line-height-250: 36px;
-  --typography-primitives-line-height-300: 48px;
-  --typography-primitives-line-height-350: 36px;
-  --typography-primitives-line-height-400: 64px;
-  --typography-primitives-line-height-450: 68px;
-  --typography-primitives-line-height-500: 72px;
-  --typography-primitives-font-weight-300: 370;
-  --typography-primitives-font-weight-500: 570;
-  --typography-primitives-font-weight-600: 670;
-  --typography-primitives-font-weight-200: 270;
-  --typography-primitives-font-weight-400: 470;
-  --typography-primitives-baseline-offset-071: 0px;
-  --typography-primitives-baseline-offset-100: 0px;
-  --typography-primitives-baseline-offset-150: 2px;
-  --typography-primitives-baseline-offset-200: 2px;
-  --typography-primitives-baseline-offset-250: 2px;
-  --typography-primitives-baseline-offset-300: 2px;
-  --typography-primitives-baseline-offset-350: 4px;
-  --typography-primitives-baseline-offset-400: 4px;
-  --typography-primitives-baseline-offset-450: 4px;
-  --typography-primitives-baseline-offset-500: 4px;
-  --typography-primitives-letter-spacing-071: 0px;
-  --typography-primitives-letter-spacing-100: 0px;
-  --typography-primitives-letter-spacing-150: 0px;
-  --typography-primitives-letter-spacing-200: 0.0024999999441206455px;
-  --typography-primitives-letter-spacing-250: -0.5px;
-  --typography-primitives-letter-spacing-300: -0.5px;
-  --typography-primitives-letter-spacing-350: -0.5px;
-  --typography-primitives-letter-spacing-400: -1px;
-  --typography-primitives-letter-spacing-450: -1px;
-  --typography-primitives-letter-spacing-500: -1px;
-  --weight-demo: "470";
-  --weight-demo-2: 470px;
   --font-size-075: 12px;
   --font-size-100: 16px;
   --font-size-150: 24px;
@@ -10902,6 +10862,103 @@
   --border-radius-br-12: 12px;
   --border-radius-br-16: 16px;
   --border-radius-br-24: 24px;
+  --advice-indicator-padding: var(
+    --instrument-components-advice-indicator-padding-indicator-padding-regular
+  );
+  --watchface-label-container-width: var(
+    --instrument-components-watchface-label-container-size-1
+  );
+  --scale-margin: var(--instrument-components-watchface-scale-margin-regular);
+  --scale-padding: var(--instrument-components-watchface-scale-padding-regular);
+  --scale-size: var(--instrument-components-watchface-scale-size-regular);
+  --tick-mark-main: var(
+    --instrument-components-watchface-tick-marks-length-main-regular
+  );
+  --tick-mark-primary: var(
+    --instrument-components-watchface-tick-marks-length-primary-regular
+  );
+  --tick-mark-secondary: var(
+    --instrument-components-watchface-tick-marks-length-secondary-regular
+  );
+  --tick-mark-tertiary: var(
+    --instrument-components-watchface-tick-marks-length-tertiary-regular
+  );
+  --frame-thickness: var(
+    --instrument-components-watchface-frame-regular-thickness
+  );
+  --frame-outer-margin: var(
+    --instrument-components-watchface-frame-regular-outer-margin
+  );
+  --frame-border-radius: var(
+    --instrument-components-watchface-frame-regular-border-radius
+  );
+  --frame-double-thickness: var(
+    --instrument-components-watchface-frame-regular-double-thickness
+  );
+  --frame-track-size: var(
+    --instrument-components-watchface-frame-regular-track-size
+  );
+  --typography-font-weight-regular: var(--day-typography-font-weight-regular);
+  --watchface-label-margin-size: var(
+    --instrument-components-watchface-label-margin-size-1
+  );
+  --tick-mark-main-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-main-regular
+  );
+  --tick-mark-primary-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-primary-regular
+  );
+  --tick-mark-secondary-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-secondary-regular
+  );
+  --tick-mark-tertiary-visibility: var(
+    --instrument-components-watchface-tick-marks-visibility-tertiary-regular
+  );
+  --advice-indicator-visibility: var(
+    --instrument-components-advice-indicator-visibility-indicator-visibility-regular
+  );
+  --scale-framed-size: var(
+    --instrument-components-watchface-scale-size-framed-regular
+  );
+  --advice-indicator-offset: var(
+    --instrument-components-advice-indicator-offset-offset-regular
+  );
+  --advice-indicator-container-size: var(
+    --instrument-components-advice-indicator-container-size-size-regular
+  );
+  --frame-track-margin: var(
+    --instrument-components-watchface-frame-regular-track-margin
+  );
+  --typography-font-weight-semibold: var(--day-typography-font-weight-semibold);
+  --typography-primitives-font-size-071: 11.5px;
+  --typography-primitives-font-weight-300: 370;
+  --typography-primitives-line-height-071: 16px;
+  --typography-primitives-baseline-offset-071: 0px;
+  --typography-primitives-letter-spacing-071: 0px;
+  --typography-primitives-font-weight-500: 570;
+  --typography-primitives-font-weight-600: 670;
+  --typography-primitives-font-size-100: 16.5px;
+  --typography-primitives-line-height-100: 20px;
+  --typography-primitives-baseline-offset-100: 0px;
+  --typography-primitives-letter-spacing-100: 0px;
+  --typography-primitives-font-size-150: 23px;
+  --typography-primitives-line-height-150: 24px;
+  --typography-primitives-baseline-offset-150: 2px;
+  --typography-primitives-letter-spacing-150: 0px;
+  --typography-primitives-font-size-200: 34px;
+  --typography-primitives-line-height-200: 32px;
+  --typography-primitives-baseline-offset-200: 2px;
+  --typography-primitives-letter-spacing-200: 0.0024999999441206455px;
+  --typography-primitives-font-size-300: 45px;
+  --typography-primitives-line-height-300: 40px;
+  --typography-primitives-baseline-offset-300: 2px;
+  --typography-primitives-letter-spacing-300: -0.5px;
+  --typography-primitives-font-size-400: 68px;
+  --typography-primitives-line-height-400: 64px;
+  --typography-primitives-baseline-offset-400: 4px;
+  --typography-primitives-letter-spacing-400: -1px;
+  --day-typography-font-weight-regular: 370;
+  --day-typography-font-weight-semibold: 570;
   --shadow-flat: var(--shadow-flat-x) var(--shadow-flat-y)
     var(--shadow-flat-blur) var(--shadow-flat-spread) var(--shadow-flat-color);
   --shadow-raised: var(--shadow-raised-x) var(--shadow-raised-y)
@@ -11764,7 +11821,7 @@
   --alert-caution-tint-color: rgb(251, 219, 1, 0.15000000596046448);
   --alert-running-tint-color: rgb(22, 155, 13, 0.11999999731779099);
   --integration-container-container: rgb(30, 30, 30);
-  --pui-beta-normal-background-color: rgb(31, 31, 31);
+  --pui-beta-opaque-cap-regular-background-color: rgb(31, 31, 31);
   --pui-beta-effect-button-highlight-color: rgb(
     255,
     255,
@@ -11772,10 +11829,10 @@
     0.10000000149011612
   );
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255, 0.03999999910593033);
-  --pui-beta-normal-content-color: rgb(217, 217, 217);
-  --pui-beta-emergency-background-color: rgb(56, 21, 21);
+  --pui-beta-opaque-backlight-active-color: rgb(240, 240, 240);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(56, 21, 21);
   --pui-beta-emergency-content-color: rgb(180, 180, 180);
-  --pui-beta-element-neutral-color: rgb(149, 149, 149);
+  --pui-beta-element-neutral-color: rgb(163, 163, 163);
   --pui-beta-element-active-color: rgb(217, 217, 217);
   --pui-beta-element-inactive-color: rgb(117, 117, 117);
   --pui-beta-element-symbol-color: rgb(89, 89, 89);
@@ -11814,6 +11871,46 @@
   --base-automation-enhanced-500: rgb(45, 84, 139);
   --base-automation-enhanced-600: rgb(29, 60, 103);
   --base-automation-enhanced-050-tint: rgb(10, 100, 237, 0.10999999940395355);
+  --pui-beta-translucent-backlight-regular-color: rgb(117, 117, 117);
+  --pui-beta-translucent-content-regular-color: rgb(31, 31, 31);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 77, 71);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 77, 71);
+  --pui-beta-translucent-content-color-enhanced: rgb(217, 217, 217);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(124, 169, 233);
+  --pui-beta-opaque-backlight-running-color: rgb(57, 162, 52);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 135, 42);
+  --pui-beta-opaque-backlight-caution-color: rgb(232, 179, 0);
+  --pui-beta-opaque-backlight-neutral-color: rgb(180, 180, 180);
+  --pui-beta-translucent-backlight-warning-color: rgb(233, 103, 0);
+  --pui-beta-translucent-backlight-caution-color: rgb(232, 179, 0);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(93, 143, 213);
+  --pui-beta-translucent-backlight-running-color: rgb(57, 162, 52);
+  --pui-beta-translucent-backlight-active-color: rgb(180, 180, 180);
+  --pui-beta-translucent-cap-regular-background-color: rgb(
+    255,
+    255,
+    255,
+    0.10000000149011612
+  );
+  --pui-beta-translucent-cap-regular-border-color: rgb(
+    255,
+    255,
+    255,
+    0.20000000298023224
+  );
+  --pui-beta-alert-running-color: rgb(57, 162, 52);
+  --pui-beta-alert-running-outline-color: rgb(57, 162, 52);
+  --pui-beta-alert-caution-color: rgb(232, 179, 0);
+  --pui-beta-alert-warning-color: rgb(233, 103, 0);
+  --pui-beta-alert-enhanced-color: rgb(93, 143, 213);
+  --pui-beta-element-enhanced-active-color: rgb(156, 193, 245);
+  --pui-beta-element-enhanced-neutral-color: rgb(93, 143, 213);
+  --pui-beta-border-indicator-edge-color: rgb(
+    255,
+    255,
+    255,
+    0.20999999344348907
+  );
 }
 :root[data-obc-theme="dusk"] {
   --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(255, 255, 255, .550)"/></svg>');
@@ -12699,11 +12796,11 @@
   --alert-caution-tint-color: rgb(239, 185, 0, 0.10000000149011612);
   --alert-running-tint-color: rgb(25, 129, 0, 0.11999999731779099);
   --integration-container-container: rgb(0, 0, 0);
-  --pui-beta-normal-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-regular-background-color: rgb(255, 255, 255);
   --pui-beta-effect-button-highlight-color: rgb(255, 255, 255);
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255);
-  --pui-beta-normal-content-color: rgb(255, 255, 255);
-  --pui-beta-emergency-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(255, 255, 255);
   --pui-beta-emergency-content-color: rgb(255, 255, 255);
   --pui-beta-element-neutral-color: rgb(255, 255, 255);
   --pui-beta-element-active-color: rgb(255, 255, 255);
@@ -12744,6 +12841,31 @@
   --base-automation-enhanced-500: rgb(43, 56, 73);
   --base-automation-enhanced-600: rgb(35, 46, 60);
   --base-automation-enhanced-050-tint: rgb(62, 146, 254, 0.12999999523162842);
+  --pui-beta-translucent-backlight-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-color-enhanced: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-neutral-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-background-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-border-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-outline-color: rgb(255, 255, 255);
+  --pui-beta-alert-caution-color: rgb(255, 255, 255);
+  --pui-beta-alert-warning-color: rgb(255, 255, 255);
+  --pui-beta-alert-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-active-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-neutral-color: rgb(255, 255, 255);
+  --pui-beta-border-indicator-edge-color: rgb(255, 255, 255);
 }
 :root[data-obc-theme="night"] {
   --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgb(51, 51, 0)"/></svg>');
@@ -13574,11 +13696,11 @@
   --alert-caution-tint-color: rgb(37, 29, 0);
   --alert-running-tint-color: rgb(0, 24, 0);
   --integration-container-container: rgb(0, 0, 0);
-  --pui-beta-normal-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-regular-background-color: rgb(255, 255, 255);
   --pui-beta-effect-button-highlight-color: rgb(255, 255, 255);
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255);
-  --pui-beta-normal-content-color: rgb(255, 255, 255);
-  --pui-beta-emergency-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(255, 255, 255);
   --pui-beta-emergency-content-color: rgb(255, 255, 255);
   --pui-beta-element-neutral-color: rgb(255, 255, 255);
   --pui-beta-element-active-color: rgb(255, 255, 255);
@@ -13619,6 +13741,31 @@
   --base-automation-enhanced-500: rgb(23, 30, 42);
   --base-automation-enhanced-600: rgb(14, 19, 28);
   --base-automation-enhanced-050-tint: rgb(14, 19, 28);
+  --pui-beta-translucent-backlight-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-color-enhanced: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-neutral-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-background-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-border-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-outline-color: rgb(255, 255, 255);
+  --pui-beta-alert-caution-color: rgb(255, 255, 255);
+  --pui-beta-alert-warning-color: rgb(255, 255, 255);
+  --pui-beta-alert-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-active-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-neutral-color: rgb(255, 255, 255);
+  --pui-beta-border-indicator-edge-color: rgb(255, 255, 255);
 }
 :root[data-obc-theme="bright"] {
   --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(0, 0, 0, .650)"/></svg>');
@@ -14464,11 +14611,11 @@
   --alert-caution-tint-color: rgb(253, 242, 165);
   --alert-running-tint-color: rgb(6, 131, 6);
   --integration-container-container: rgb(0, 0, 0);
-  --pui-beta-normal-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-regular-background-color: rgb(255, 255, 255);
   --pui-beta-effect-button-highlight-color: rgb(255, 255, 255);
   --pui-beta-effect-button-edge-color: rgb(255, 255, 255);
-  --pui-beta-normal-content-color: rgb(255, 255, 255);
-  --pui-beta-emergency-background-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-opaque-cap-emergency-background-color: rgb(255, 255, 255);
   --pui-beta-emergency-content-color: rgb(255, 255, 255);
   --pui-beta-element-neutral-color: rgb(255, 255, 255);
   --pui-beta-element-active-color: rgb(255, 255, 255);
@@ -14509,6 +14656,31 @@
   --base-automation-enhanced-500: rgb(45, 84, 139);
   --base-automation-enhanced-600: rgb(29, 60, 103);
   --base-automation-enhanced-050-tint: rgb(228, 238, 253);
+  --pui-beta-translucent-backlight-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-regular-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-alarm-color: rgb(255, 255, 255);
+  --pui-beta-translucent-content-color-enhanced: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-opaque-backlight-neutral-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-warning-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-caution-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-running-color: rgb(255, 255, 255);
+  --pui-beta-translucent-backlight-active-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-background-color: rgb(255, 255, 255);
+  --pui-beta-translucent-cap-regular-border-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-color: rgb(255, 255, 255);
+  --pui-beta-alert-running-outline-color: rgb(255, 255, 255);
+  --pui-beta-alert-caution-color: rgb(255, 255, 255);
+  --pui-beta-alert-warning-color: rgb(255, 255, 255);
+  --pui-beta-alert-enhanced-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-active-color: rgb(255, 255, 255);
+  --pui-beta-element-enhanced-neutral-color: rgb(255, 255, 255);
+  --pui-beta-border-indicator-edge-color: rgb(255, 255, 255);
 }
 @property --alarm-blink-on {
   syntax: "<number>";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.61",
+  "version": "2.0.0-next.62",
   "type": "module",
   "repository": {
     "type": "git",
@@ -140,9 +140,10 @@
     "typecheck": "tsc --noEmit",
     "format": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\"  --write",
     "format:check": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\"  --check",
-    "lint": "npm run lint:mixins && npm run lint:variables && npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint": "npm run lint:mixins && npm run lint:variables && npm run lint:icons && npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:mixins": "tsx ./script/check-css-mixins.ts",
     "lint:variables": "tsx ./script/check-css-variables.ts",
+    "lint:icons": "tsx ./script/check-icon-hex-leaks.ts",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer --strict --maxWarnings 0",
     "fix-imports": "node fix-imports.mjs",

package/script/check-css-variables.ts

@@ -11,7 +11,7 @@
  * - Identifies unique variable usages and their locations (including fallback detection).
  * - Detects duplicate variable definitions (warning).
  * - Detects usages of undefined variables (error), excluding a predefined set of allowed undefined variables.
- * - Skips `src/palettes/variables.css` for usage checks as it is considered a definition-only file.
+ * - Scans `src/palettes/variables.css` for `var(...)` usages too: its semantic tokens reference primitives in the same file, so a missing primitive (e.g. a token dropped from the Figma export) would otherwise go undetected.
  * - Exits with code 1 if any undefined variable usages (without fallbacks) are found.
  *
  * Usage Examples:
@@ -106,9 +106,6 @@ async function run(): Promise<void> {
 
   for (const file of cssFiles) {
     const content = fs.readFileSync(file, 'utf8');
-    const isPaletteFile = file.endsWith(
-      `${path.sep}src${path.sep}palettes${path.sep}variables.css`
-    );
 
     const definitionRegex = /(^|[;{\s])(\-\-[A-Za-z0-9_-]+)\s*:/gm;
     for (const match of content.matchAll(definitionRegex)) {
@@ -132,10 +129,6 @@ async function run(): Promise<void> {
       definitions.set(name, [...(definitions.get(name) ?? []), location]);
     }
 
-    if (isPaletteFile) {
-      continue;
-    }
-
     let start = 0;
     while ((start = content.indexOf('var(', start)) !== -1) {
       let openParens = 1;

package/script/check-icon-hex-leaks.ts

@@ -0,0 +1,70 @@
+/**
+ * Fails `npm run lint:icons` if any generated icon (`src/icons/*.ts`) still
+ * contains a literal hex `fill="#…"` or `stroke="#…"` attribute. Every such
+ * attribute indicates one of:
+ *
+ *   1. A converter regression in `script/convert-icons.ts` (the most recent
+ *      example: `getSingleColorIcon` originally rewrote `fill` but not
+ *      `stroke`, leaking raw hex strokes into 27 icons across `obi-alarm-*`,
+ *      `obi-warning-*`, `obi-connector-*`, etc.).
+ *   2. An unbound Figma variable on a fill/stroke. Designers should bind the
+ *      color in Figma; if the variable id is new, regenerate
+ *      `script/figmavariables.json` from the obc-figma-plugin and re-run
+ *      `npm run download:icons`. See `script/.cache/unknown-variables.json`
+ *      for the per-id diagnostic.
+ *
+ * The check is intentionally zero-tolerance — there is currently no
+ * documented case where an icon legitimately needs a hard-coded hex, because
+ * the themed (`iconCss`) variant always uses CSS variables and the
+ * single-color (`icon`) variant always uses `currentColor`. If a future
+ * legitimate exception arises, prefer adding an explicit allowlist here over
+ * reintroducing a sliding budget.
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+
+const iconsDir = path.resolve('src/icons');
+const hexAttrRegex = /(?:fill|stroke)="#[0-9A-Fa-f]{6,8}"/g;
+
+interface Leak {
+  file: string;
+  attr: string;
+}
+
+const leaks: Leak[] = [];
+
+for (const file of fs.readdirSync(iconsDir).sort()) {
+  if (!file.endsWith('.ts')) continue;
+  const text = fs.readFileSync(path.join(iconsDir, file), 'utf8');
+  const matches = text.match(hexAttrRegex);
+  if (!matches) continue;
+  for (const attr of matches) leaks.push({file, attr});
+}
+
+if (leaks.length === 0) {
+  console.log(
+    `[lint:icons] no literal hex fill/stroke attributes in ${iconsDir}`
+  );
+  process.exit(0);
+}
+
+console.error(
+  `[lint:icons] found ${leaks.length} literal hex fill/stroke attribute(s) in src/icons/*.ts:`
+);
+for (const {file, attr} of leaks) {
+  console.error(`  ${file}\t${attr}`);
+}
+console.error('');
+console.error(
+  '  Each leak is either (a) a converter regression in script/convert-icons.ts'
+);
+console.error(
+  '  or (b) a Figma variable that is not bound on the source fill/stroke.'
+);
+console.error(
+  '  See script/.cache/unknown-variables.json for unresolved variable ids,'
+);
+console.error(
+  '  and the JSDoc on this script for the full diagnostic checklist.'
+);
+process.exit(1);

package/script/convert-icons.ts

@@ -6,25 +6,74 @@ const __dirname = path.dirname(new URL(import.meta.url).pathname);
 const figmaVariablesPath = path.join(__dirname, 'figmavariables.json');
 const figmaVariables = JSON.parse(fs.readFileSync(figmaVariablesPath, 'utf8'));
 
+/**
+ * Figma variable IDs encountered on bound fills/strokes that are not present
+ * in `figmavariables.json`. These cause the converter to fall back to a
+ * literal hex color, which silently defeats the `var(--undefined)` grep gate.
+ * Downloaders should serialize this set after a run so designers can extend
+ * `figmavariables.json` to cover the missing tokens.
+ */
+export const unresolvedFigmaVariables = new Set<string>();
+
+function resolveFigmaVariable(variableId: string): string | undefined {
+  const token = figmaVariables[variableId];
+  if (token === undefined) unresolvedFigmaVariables.add(variableId);
+  return token;
+}
+
+/**
+ * Persist the `unresolvedFigmaVariables` set to disk so designers and CI can
+ * see which Figma variable IDs were referenced by icons but missing from
+ * `figmavariables.json`. Called by the download scripts after a run. Returns
+ * the number of unresolved IDs so the caller can fail the build.
+ */
+export function writeUnresolvedFigmaVariablesReport(filePath: string): number {
+  const ids = [...unresolvedFigmaVariables].sort();
+  const dir = path.dirname(filePath);
+  fs.mkdirSync(dir, {recursive: true});
+  fs.writeFileSync(filePath, JSON.stringify(ids, null, 2) + '\n');
+  if (ids.length > 0) {
+    console.warn(
+      `[convert-icons] ${ids.length} unresolved Figma variable id(s) — see ${filePath}`
+    );
+  }
+  return ids.length;
+}
+
 dotenv.config();
 
 export interface IconRef {
   name: string;
   id: string;
   javascriptName: string;
-  styles: {[colorCode: string]: {cssClass: string}};
+  styles: {[colorCode: string]: {cssClass: string | undefined}};
 }
 
 export function getSingleColorIcon(imageData: string, icon: IconRef): string {
   // replace fill color with currentColor
   const fillRegex = /fill="[^"]+"/g;
-  const replace = 'fill="currentColor"';
-  let imageDataNew = imageData.replace(fillRegex, replace);
+  let imageDataNew = imageData.replace(fillRegex, 'fill="currentColor"');
 
   // remove fillOpacity
   const fillOpacityRegex = /fill-opacity="[^"]+"/g;
   imageDataNew = imageDataNew.replace(fillOpacityRegex, '');
 
+  // replace stroke color with currentColor (mirror the fill handling so the
+  // single-color variant inherits the host color for both paint operations;
+  // otherwise raw Figma hex strokes leak through and the icon ignores theme
+  // changes / `currentColor`).
+  const strokeRegex = /stroke="[^"]+"/g;
+  imageDataNew = imageDataNew.replace(strokeRegex, (match) => {
+    // Preserve `stroke="none"` so shapes that explicitly disable stroking
+    // (common in Figma exports of filled-only paths) stay unstroked.
+    if (match === 'stroke="none"') return match;
+    return 'stroke="currentColor"';
+  });
+
+  // remove strokeOpacity
+  const strokeOpacityRegex = /stroke-opacity="[^"]+"/g;
+  imageDataNew = imageDataNew.replace(strokeOpacityRegex, '');
+
   return imageDataNew;
 }
 
@@ -88,6 +137,28 @@ export function getCssColorIcon(imageData: string, icon: IconRef): string {
   const strokeOpacityRegex = /stroke-opacity="[^"]+"/g;
   imageData = imageData.replace(strokeOpacityRegex, '');
 
+  // Merge sibling `style="…"` attributes on the same element. The fill and
+  // stroke passes each emit their own `style="…"` independently, so an
+  // element with both attributes ends up with two `style` attributes — only
+  // the first is honored by browsers. Combine them into one per opening tag,
+  // regardless of whether the two `style` attributes are adjacent or have
+  // other attributes between them.
+  const tagRegex = /<[a-zA-Z][^>]*>/g;
+  const styleAttrRegex = /\s+style="([^"]*)"/g;
+  imageData = imageData.replace(tagRegex, (tag) => {
+    const styles: string[] = [];
+    const stripped = tag.replace(styleAttrRegex, (_m, decls) => {
+      const trimmed = decls.trim().replace(/;$/, '');
+      if (trimmed) styles.push(trimmed);
+      return '';
+    });
+    if (styles.length <= 1) return tag;
+    // Re-insert a single merged style attribute just before the closing `>`
+    // (or `/>`), preserving the rest of the tag's structure.
+    const merged = ` style="${styles.join('; ')}"`;
+    return stripped.replace(/\s*\/?>$/, (end) => merged + end);
+  });
+
   return imageData;
 }
 
@@ -102,8 +173,8 @@ export function kebabToUpperCamelCase(kebabCase: string): string {
 export function getStylesForNode(
   node: Node,
   styles: {[styleId: string]: Style}
-): {[colorCode: string]: {cssClass: string}} {
-  let out = {};
+): {[colorCode: string]: {cssClass: string | undefined}} {
+  let out: {[colorCode: string]: {cssClass: string | undefined}} = {};
 
   if ('children' in node) {
     for (const child of node.children) {
@@ -122,7 +193,7 @@ export function getStylesForNode(
             fils = rgbaToHexOrColorName(fill.color!);
             if ('boundVariables' in fill) {
               const variableId = fill.boundVariables.color.id;
-              out[fils] = {cssClass: figmaVariables[variableId]};
+              out[fils] = {cssClass: resolveFigmaVariable(variableId)};
             }
           }
         });
@@ -147,7 +218,7 @@ export function getStylesForNode(
             strokes = rgbaToHexOrColorName(stroke.color!);
             if ('boundVariables' in stroke) {
               const variableId = stroke.boundVariables.color.id;
-              out[strokes] = {cssClass: figmaVariables[variableId]};
+              out[strokes] = {cssClass: resolveFigmaVariable(variableId)};
             }
           }
         });
@@ -167,7 +238,7 @@ export function getStylesForNode(
                 const color = rgbaToHexOrColorName(f.color!);
                 if ('boundVariables' in f) {
                   const variableId = f.boundVariables.color.id;
-                  out[color] = {cssClass: figmaVariables[variableId]};
+                  out[color] = {cssClass: resolveFigmaVariable(variableId)};
                 }
               }
             }