@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.57 → 2.0.0-next.59

package/src/palettes/critical.md

@@ -0,0 +1,95 @@
+# Color/Styles/Critical
+
+Kodebasestil som speiler `Color/Styles/Alarm` i Figma **Palette**, men peker på **Critical-alarm**-primitiver i stedet for Alarm.
+
+Denne stilen finnes **ikke** i Figma Palette — den er definert kun i kodebasen (`manual.css`).
+
+## Unike primitive-farger per tema
+
+| Tema        | Primitive-farger brukt                                                                 |
+| ----------- | -------------------------------------------------------------------------------------- |
+| Day         | `Primitives-day/Critical-alarm/400`, `450`, `500`                                      |
+| Dusk BETA   | `Primitives-dusk/Critical-alarm/300`, `350`, `400` + `Primitives-dusk/Blue/500`        |
+| Night BETA  | `Primitives-night/Critical/300`, `350`, `400`, `500` + `Primitives-night/Enhanced/400` |
+| Bright BETA | `Primitives-day/Critical-alarm/400`, `500`, `600` + `Primitives-day/Blue/300`          |
+
+Night bruker mappen `Critical` (ikke `Critical-alarm`) fordi `Primitives-night/Critical-alarm` ikke finnes i Figma.
+
+## Detaljert mapping per state
+
+| State / property    | Day                | Dusk BETA          | Night BETA   | Bright BETA        |
+| ------------------- | ------------------ | ------------------ | ------------ | ------------------ |
+| Enabled background  | Critical-alarm/400 | Critical-alarm/300 | Critical/400 | Critical-alarm/400 |
+| Enabled border      | Critical-alarm/500 | Critical-alarm/350 | Critical/400 | Critical-alarm/600 |
+| Hover background    | Critical-alarm/450 | Critical-alarm/350 | Critical/400 | Critical-alarm/500 |
+| Hover border        | Critical-alarm/500 | Critical-alarm/350 | Critical/500 | Critical-alarm/600 |
+| Pressed background  | Critical-alarm/500 | Critical-alarm/400 | Critical/350 | Critical-alarm/600 |
+| Pressed border      | Critical-alarm/500 | Critical-alarm/350 | Critical/500 | Critical-alarm/600 |
+| Focused background  | Critical-alarm/400 | Critical-alarm/300 | Critical/400 | Critical-alarm/500 |
+| Focused border      | Critical-alarm/500 | Blue/500           | Enhanced/400 | Blue/300           |
+| Disabled background | Critical-alarm/400 | Critical-alarm/300 | Critical/300 | Critical-alarm/400 |
+| Disabled border     | Critical-alarm/400 | Critical-alarm/300 | Critical/300 | Critical-alarm/400 |
+
+Primitive-prefikser er forkortet (f.eks. `Critical-alarm/400` = `Primitives-day/Critical-alarm/400` for Day og Bright BETA).
+
+## Oppsummering
+
+- **Day** og **Bright BETA** bruker `Primitives-day/Critical-alarm/*` (Bright med mørkere nyanser: 500/600).
+- **Dusk BETA** bruker `Primitives-dusk/Critical-alarm/*` (300–400).
+- **Night BETA** bruker `Primitives-night/Critical/*` med samme nyansenummer som Alarm bruker for `Primitives-night/Alarm/*`.
+- **Focused border** er unntaket — den bruker ikke critical-farger, men blå/enhanced (samme som Alarm):
+  - Dusk → `Primitives-dusk/Blue/500`
+  - Night → `Primitives-night/Enhanced/400`
+  - Bright → `Primitives-day/Blue/300`
+
+## Semantiske tokens (kodebasen)
+
+| Token                                  |
+| -------------------------------------- |
+| `--critical-enabled-background-color`  |
+| `--critical-enabled-border-color`      |
+| `--critical-hover-background-color`    |
+| `--critical-hover-border-color`        |
+| `--critical-pressed-background-color`  |
+| `--critical-pressed-border-color`      |
+| `--critical-focused-background-color`  |
+| `--critical-focused-border-color`      |
+| `--critical-disabled-background-color` |
+| `--critical-disabled-border-color`     |
+| `--on-critical-color`                  |
+| `--on-critical-active-color`           |
+| `--on-critical-neutral-color`          |
+| `--on-critical-disabled-color`         |
+
+## On-critical mapping per tema
+
+| Token                      | Day                   | Dusk BETA                | Night BETA                        | Bright BETA           |
+| -------------------------- | --------------------- | ------------------------ | --------------------------------- | --------------------- |
+| on-critical-color          | Neutral-inverted/1000 | Neutral/1000             | Neutral-inverted-transparent/1000 | Neutral-inverted/1000 |
+| on-critical-active-color   | Neutral-inverted/1000 | Neutral-transparent/1000 | OnCriticalAlarm/Active-color      | Neutral-inverted/1000 |
+| on-critical-neutral-color  | Critical-alarm/050    | Neutral-transparent/1000 | OnCriticalAlarm/Neutral-color     | Neutral/000           |
+| on-critical-disabled-color | Critical-alarm/200    | Neutral/030              | OnCriticalAlarm/Disabled-color    | Critical-alarm/200    |
+
+Night bruker `Night-config/Styles/OnCriticalAlarm/*` (samme mønster som On-alarm for Night).
+
+## Container-farger
+
+Speiler `Color/Alert/Alarm-container-*` og `Color/Alert/Caution-container-*`, men med Critical-alarm/Notification-primitiver.
+
+| Token                                   | Day                | Dusk BETA          | Night BETA   | Bright BETA        |
+| --------------------------------------- | ------------------ | ------------------ | ------------ | ------------------ |
+| alert-critical-container-background     | Critical-alarm/100 | Critical-alarm/050 | Critical/100 | Critical-alarm/150 |
+| alert-critical-container-border         | Critical-alarm/200 | Critical-alarm/100 | Critical/100 | Critical-alarm/150 |
+| alert-notification-container-background | Notification/050   | Notification/050   | Enhanced/100 | Notification/050   |
+| alert-notification-container-border     | Notification/100   | Notification/100   | Enhanced/100 | Notification/050   |
+
+Night har ingen `Primitives-night/Notification/*` — notification-container bruker `Primitives-night/Enhanced/100`.
+
+| Token                                             |
+| ------------------------------------------------- |
+| `--alert-critical-container-background-color`     |
+| `--alert-critical-container-border-color`         |
+| `--alert-notification-container-background-color` |
+| `--alert-notification-container-border-color`     |
+
+Bruk med `@mixin style style=critical` (PostCSS) eller `@mixin alert-critical` (alert-mixin).

package/src/palettes/manual.css

@@ -0,0 +1,165 @@
+:root[data-obc-theme="day"] {
+  --critical-enabled-background-color: rgb(196, 36, 183);
+  --critical-enabled-border-color: rgb(153, 0, 143);
+  --critical-hover-background-color: rgb(173, 5, 162);
+  --critical-hover-border-color: rgb(153, 0, 143);
+  --critical-pressed-background-color: rgb(153, 0, 143);
+  --critical-pressed-border-color: rgb(153, 0, 143);
+  --critical-focused-background-color: rgb(196, 36, 183);
+  --critical-focused-border-color: rgb(153, 0, 143);
+  --critical-disabled-background-color: rgb(196, 36, 183);
+  --critical-disabled-border-color: rgb(196, 36, 183);
+  --on-critical-color: rgb(255, 255, 255);
+  --on-critical-active-color: rgb(255, 255, 255);
+  --on-critical-neutral-color: rgb(254, 232, 250);
+  --on-critical-disabled-color: rgb(248, 155, 235);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(254, 207, 246);
+  --alert-critical-container-border-color: rgb(248, 155, 235);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(226, 240, 255);
+  --alert-notification-container-border-color: rgb(195, 223, 255);
+}
+
+:root[data-obc-theme="dusk"] {
+  --critical-enabled-background-color: rgb(189, 40, 190);
+  --critical-enabled-border-color: rgb(206, 65, 207);
+  --critical-hover-background-color: rgb(206, 65, 207);
+  --critical-hover-border-color: rgb(206, 65, 207);
+  --critical-pressed-background-color: rgb(218, 85, 218);
+  --critical-pressed-border-color: rgb(206, 65, 207);
+  --critical-focused-background-color: rgb(189, 40, 190);
+  --critical-focused-border-color: rgb(132, 179, 239);
+  --critical-disabled-background-color: rgb(189, 40, 190);
+  --critical-disabled-border-color: rgb(189, 40, 190);
+  --on-critical-color: rgb(255, 255, 255);
+  --on-critical-active-color: rgb(255, 255, 255);
+  --on-critical-neutral-color: rgb(255, 255, 255);
+  --on-critical-disabled-color: rgb(38, 38, 38);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(85, 0, 86);
+  --alert-critical-container-border-color: rgb(102, 0, 104);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(0, 35, 123);
+  --alert-notification-container-border-color: rgb(0, 44, 144);
+}
+
+:root[data-obc-theme="night"] {
+  --critical-enabled-background-color: rgb(195, 48, 196);
+  --critical-enabled-border-color: rgb(195, 48, 196);
+  --critical-hover-background-color: rgb(195, 48, 196);
+  --critical-hover-border-color: rgb(224, 100, 224);
+  --critical-pressed-background-color: rgb(181, 30, 182);
+  --critical-pressed-border-color: rgb(224, 100, 224);
+  --critical-focused-background-color: rgb(195, 48, 196);
+  --critical-focused-border-color: rgb(44, 131, 102);
+  --critical-disabled-background-color: rgb(161, 6, 163);
+  --critical-disabled-border-color: rgb(161, 6, 163);
+  --on-critical-color: rgb(0, 0, 0);
+  --on-critical-active-color: rgb(0, 0, 0);
+  --on-critical-neutral-color: rgb(0, 0, 0, 0.699999988079071);
+  --on-critical-disabled-color: rgb(0, 0, 0, 0.30000001192092896);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(59, 0, 60);
+  --alert-critical-container-border-color: rgb(59, 0, 60);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(16, 33, 26);
+  --alert-notification-container-border-color: rgb(16, 33, 26);
+}
+
+:root[data-obc-theme="bright"] {
+  --critical-enabled-background-color: rgb(196, 36, 183);
+  --critical-enabled-border-color: rgb(112, 0, 104);
+  --critical-hover-background-color: rgb(153, 0, 143);
+  --critical-hover-border-color: rgb(112, 0, 104);
+  --critical-pressed-background-color: rgb(112, 0, 104);
+  --critical-pressed-border-color: rgb(112, 0, 104);
+  --critical-focused-background-color: rgb(153, 0, 143);
+  --critical-focused-border-color: rgb(93, 143, 213);
+  --critical-disabled-background-color: rgb(196, 36, 183);
+  --critical-disabled-border-color: rgb(196, 36, 183);
+  --on-critical-color: rgb(255, 255, 255);
+  --on-critical-active-color: rgb(255, 255, 255);
+  --on-critical-neutral-color: rgb(255, 255, 255);
+  --on-critical-disabled-color: rgb(248, 155, 235);
+  --alert-critical-color: var(--critical-enabled-background-color);
+  --alert-critical-outline-color: var(--critical-enabled-border-color);
+  --alert-critical-container-background-color: rgb(252, 184, 242);
+  --alert-critical-container-border-color: rgb(252, 184, 242);
+  --alert-diagnostic-color: var(--notification-enabled-background-color);
+  --alert-diagnostic-outline-color: var(--notification-enabled-border-color);
+  --alert-notification-container-background-color: rgb(226, 240, 255);
+  --alert-notification-container-border-color: rgb(226, 240, 255);
+}
+
+@property --critical-blink-on {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --critical-blink-off {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --low-blink-on {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --low-blink-off {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@keyframes critical-blink {
+  0% {
+    --critical-blink-on: 1;
+    --critical-blink-off: 0;
+  }
+
+  50% {
+    --critical-blink-on: 0;
+    --critical-blink-off: 1;
+  }
+
+  100% {
+    --critical-blink-on: 1;
+    --critical-blink-off: 0;
+  }
+}
+
+@keyframes low-blink {
+  0% {
+    --low-blink-on: 1;
+    --low-blink-off: 0;
+  }
+
+  50% {
+    --low-blink-on: 0;
+    --low-blink-off: 1;
+  }
+
+  100% {
+    --low-blink-on: 1;
+    --low-blink-off: 0;
+  }
+}
+
+:root {
+  animation:
+    warning-blink 4s infinite,
+    critical-blink 1s infinite,
+    low-blink 8s infinite;
+  animation-timing-function: steps(1);
+}

package/src/types.ts

@@ -9,8 +9,24 @@ export enum AlertType {
   Alarm = 'alarm',
   Warning = 'warning',
   Caution = 'caution',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
+export const ALERT_SEVERITY_PRIORITY = [
+  AlertType.IsaCritical,
+  AlertType.Alarm,
+  AlertType.IsaHigh,
+  AlertType.Warning,
+  AlertType.IsaMedium,
+  AlertType.Caution,
+  AlertType.IsaLow,
+  AlertType.IsaDiagnostic,
+];
+
 export enum AlertCategory {
   a = 'a',
   b = 'b',
@@ -71,11 +87,12 @@ export function isBlocked(alert: Alert) {
   return alert.blocked !== false && alert.blocked !== undefined;
 }
 
-const priorityOrder = [AlertType.Alarm, AlertType.Warning, AlertType.Caution];
-
 export function comparePriorityAlerts(a: Alert, b: Alert) {
   if (a.type !== b.type) {
-    return priorityOrder.indexOf(b.type) - priorityOrder.indexOf(a.type);
+    return (
+      ALERT_SEVERITY_PRIORITY.indexOf(b.type) -
+      ALERT_SEVERITY_PRIORITY.indexOf(a.type)
+    );
   }
 
   if (isActive(a) !== isActive(b)) {