@entur/layout 2.2.2 → 2.2.4

package/dist/styles.css

@@ -404,6 +404,307 @@
 }
 /* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[data-color-mode=light],
+:root {
+  --components-layout-badge-information-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-information-contrast-bullet: #64b3e7;
+  --components-layout-badge-information-contrast-fill: #64b3e7;
+  --components-layout-badge-information-contrast-text: #181c56;
+  --components-layout-badge-information-contrast-text-bullet: #ffffff;
+  --components-layout-badge-information-standard-border: #067eb2;
+  --components-layout-badge-information-standard-bullet: #067eb2;
+  --components-layout-badge-information-standard-fill: #e1eff8;
+  --components-layout-badge-information-standard-text: #181c56;
+  --components-layout-badge-information-standard-text-bullet: #181c56;
+  --components-layout-badge-negative-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-negative-contrast-bullet: #ff5959;
+  --components-layout-badge-negative-contrast-fill: #ff9494;
+  --components-layout-badge-negative-contrast-text: #181c56;
+  --components-layout-badge-negative-contrast-text-bullet: #ffffff;
+  --components-layout-badge-negative-standard-border: #d31b1b;
+  --components-layout-badge-negative-standard-bullet: #d31b1b;
+  --components-layout-badge-negative-standard-fill: #ffcece;
+  --components-layout-badge-negative-standard-text: #181c56;
+  --components-layout-badge-negative-standard-text-bullet: #181c56;
+  --components-layout-badge-neutral-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-neutral-contrast-bullet: #c7cdeb;
+  --components-layout-badge-neutral-contrast-fill: #54568c;
+  --components-layout-badge-neutral-contrast-text: #ffffff;
+  --components-layout-badge-neutral-contrast-text-bullet: #ffffff;
+  --components-layout-badge-neutral-standard-border: #949699;
+  --components-layout-badge-neutral-standard-bullet: #81828f;
+  --components-layout-badge-neutral-standard-fill: #f6f6f9;
+  --components-layout-badge-neutral-standard-text: #181c56;
+  --components-layout-badge-neutral-standard-text-bullet: #181c56;
+  --components-layout-badge-primary-contrast-bullet: #aeb7e2;
+  --components-layout-badge-primary-contrast-fill: #aeb7e2;
+  --components-layout-badge-primary-contrast-text: #181c56;
+  --components-layout-badge-primary-contrast-text-bullet: #ffffff;
+  --components-layout-badge-primary-standard-bullet: #181c56;
+  --components-layout-badge-primary-standard-fill: #181c56;
+  --components-layout-badge-primary-standard-text: #ffffff;
+  --components-layout-badge-primary-standard-text-bullet: #181c56;
+  --components-layout-badge-success-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-success-contrast-bullet: #5ac39a;
+  --components-layout-badge-success-contrast-fill: #5ac39a;
+  --components-layout-badge-success-contrast-text: #181c56;
+  --components-layout-badge-success-contrast-text-bullet: #ffffff;
+  --components-layout-badge-success-standard-border: #1a8e60;
+  --components-layout-badge-success-standard-bullet: #1a8e60;
+  --components-layout-badge-success-standard-fill: #d0f1e3;
+  --components-layout-badge-success-standard-text: #181c56;
+  --components-layout-badge-success-standard-text-bullet: #181c56;
+  --components-layout-badge-warning-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-warning-contrast-bullet: #ffe082;
+  --components-layout-badge-warning-contrast-fill: #ffe082;
+  --components-layout-badge-warning-contrast-text: #181c56;
+  --components-layout-badge-warning-contrast-text-bullet: #ffffff;
+  --components-layout-badge-warning-standard-border: #e9b10c;
+  --components-layout-badge-warning-standard-bullet: #ffca28;
+  --components-layout-badge-warning-standard-fill: #fff4cd;
+  --components-layout-badge-warning-standard-text: #181c56;
+  --components-layout-badge-warning-standard-text-bullet: #181c56;
+  --components-layout-card-contrast-border-default: rgba(255, 255, 255, 0);
+  --components-layout-card-contrast-border-active: #aeb7e2;
+  --components-layout-card-contrast-divide: #ff5959;
+  --components-layout-card-contrast-fill-default: #393d79;
+  --components-layout-card-contrast-fill-hoveractive: #54568c;
+  --components-layout-card-contrast-icon: #ffffff;
+  --components-layout-card-contrast-subjecttext: #d9dae8;
+  --components-layout-card-contrast-text: #ffffff;
+  --components-layout-card-standard-border-default: #e3e6e8;
+  --components-layout-card-standard-border-active: #181c56;
+  --components-layout-card-standard-divide: #ff5959;
+  --components-layout-card-standard-fill-default: #ffffff;
+  --components-layout-card-standard-fill-hoveractive: #f6f6f9;
+  --components-layout-card-standard-icon: #181c56;
+  --components-layout-card-standard-subjecttext: #626493;
+  --components-layout-card-standard-text: #181c56;
+}
+
+[data-color-mode=dark] {
+  --components-layout-badge-information-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-information-contrast-bullet: #acd7f1;
+  --components-layout-badge-information-contrast-fill: #acd7f1;
+  --components-layout-badge-information-contrast-text: #08091c;
+  --components-layout-badge-information-contrast-text-bullet: #e5e5e9;
+  --components-layout-badge-information-standard-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-information-standard-bullet: #acd7f1;
+  --components-layout-badge-information-standard-fill: #acd7f1;
+  --components-layout-badge-information-standard-text: #08091c;
+  --components-layout-badge-information-standard-text-bullet: #e5e5e9;
+  --components-layout-badge-negative-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-negative-contrast-bullet: #ff9494;
+  --components-layout-badge-negative-contrast-fill: #ffcece;
+  --components-layout-badge-negative-contrast-text: #08091c;
+  --components-layout-badge-negative-contrast-text-bullet: #e5e5e9;
+  --components-layout-badge-negative-standard-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-negative-standard-bullet: #ff9494;
+  --components-layout-badge-negative-standard-fill: #ffcece;
+  --components-layout-badge-negative-standard-text: #08091c;
+  --components-layout-badge-negative-standard-text-bullet: #e5e5e9;
+  --components-layout-badge-neutral-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-neutral-contrast-bullet: #e5e5e9;
+  --components-layout-badge-neutral-contrast-fill: rgba(229, 229, 233, 0.3490196078);
+  --components-layout-badge-neutral-contrast-text: #e5e5e9;
+  --components-layout-badge-neutral-contrast-text-bullet: #e5e5e9;
+  --components-layout-badge-neutral-standard-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-neutral-standard-bullet: #e5e5e9;
+  --components-layout-badge-neutral-standard-fill: rgba(229, 229, 233, 0.3490196078);
+  --components-layout-badge-neutral-standard-text: #e5e5e9;
+  --components-layout-badge-neutral-standard-text-bullet: #e5e5e9;
+  --components-layout-badge-primary-contrast-bullet: #aeb7e2;
+  --components-layout-badge-primary-contrast-fill: #aeb7e2;
+  --components-layout-badge-primary-contrast-text: #08091c;
+  --components-layout-badge-primary-contrast-text-bullet: #e5e5e9;
+  --components-layout-badge-primary-standard-bullet: #aeb7e2;
+  --components-layout-badge-primary-standard-fill: #aeb7e2;
+  --components-layout-badge-primary-standard-text: #08091c;
+  --components-layout-badge-primary-standard-text-bullet: #e5e5e9;
+  --components-layout-badge-success-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-success-contrast-bullet: #9cd9c2;
+  --components-layout-badge-success-contrast-fill: #9cd9c2;
+  --components-layout-badge-success-contrast-text: #08091c;
+  --components-layout-badge-success-contrast-text-bullet: #e5e5e9;
+  --components-layout-badge-success-standard-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-success-standard-bullet: #9cd9c2;
+  --components-layout-badge-success-standard-fill: #9cd9c2;
+  --components-layout-badge-success-standard-text: #08091c;
+  --components-layout-badge-success-standard-text-bullet: #e5e5e9;
+  --components-layout-badge-warning-contrast-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-warning-contrast-bullet: #ffeeb3;
+  --components-layout-badge-warning-contrast-fill: #ffeeb3;
+  --components-layout-badge-warning-contrast-text: #08091c;
+  --components-layout-badge-warning-contrast-text-bullet: #e5e5e9;
+  --components-layout-badge-warning-standard-border: rgba(255, 255, 255, 0);
+  --components-layout-badge-warning-standard-bullet: #ffeeb3;
+  --components-layout-badge-warning-standard-fill: #ffeeb3;
+  --components-layout-badge-warning-standard-text: #08091c;
+  --components-layout-badge-warning-standard-text-bullet: #e5e5e9;
+  --components-layout-card-contrast-border-default: rgba(255, 255, 255, 0);
+  --components-layout-card-contrast-border-active: #b3b4bd;
+  --components-layout-card-contrast-divide: #ff9494;
+  --components-layout-card-contrast-fill-default: rgba(229, 229, 233, 0.1490196078);
+  --components-layout-card-contrast-fill-hoveractive: #393a49;
+  --components-layout-card-contrast-icon: #e5e5e9;
+  --components-layout-card-contrast-subjecttext: #b3b4bd;
+  --components-layout-card-contrast-text: #e5e5e9;
+  --components-layout-card-standard-border-default: rgba(255, 255, 255, 0);
+  --components-layout-card-standard-border-active: #b3b4bd;
+  --components-layout-card-standard-divide: #ff9494;
+  --components-layout-card-standard-fill-default: rgba(229, 229, 233, 0.1490196078);
+  --components-layout-card-standard-fill-hoveractive: #393a49;
+  --components-layout-card-standard-icon: #e5e5e9;
+  --components-layout-card-standard-subjecttext: #b3b4bd;
+  --components-layout-card-standard-text: #e5e5e9;
+}
+
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+[data-color-mode=light],
+:root {
+  --basecolors-frame-contrast: #181c56;
+  --basecolors-frame-contrastalt: #393d79;
+  --basecolors-frame-default: #ffffff;
+  --basecolors-frame-elevated: #ffffff;
+  --basecolors-frame-elevatedalt: #f6f6f9;
+  --basecolors-frame-subdued: #d9dae8;
+  --basecolors-frame-tint: #f6f6f9;
+  --basecolors-shape-accent: #181c56;
+  --basecolors-shape-bicycle-contrast: #00db9b;
+  --basecolors-shape-bicycle-default: #388f76;
+  --basecolors-shape-bus-contrast: #ff6392;
+  --basecolors-shape-bus-default: #c5044e;
+  --basecolors-shape-cableway-contrast: #b482fb;
+  --basecolors-shape-cableway-default: #78469a;
+  --basecolors-shape-disabled: #6e6f73;
+  --basecolors-shape-disabledalt: #b6b8ba;
+  --basecolors-shape-ferry-contrast: #6fdfff;
+  --basecolors-shape-ferry-default: #0c6693;
+  --basecolors-shape-funicular-contrast: #b482fb;
+  --basecolors-shape-funicular-default: #78469a;
+  --basecolors-shape-helicopter-contrast: #fbafea;
+  --basecolors-shape-helicopter-default: #800664;
+  --basecolors-shape-highlight: #ff5959;
+  --basecolors-shape-light: #ffffff;
+  --basecolors-shape-mask: #ffffff;
+  --basecolors-shape-maskalt: #ffffff;
+  --basecolors-shape-metro-contrast: #f08901;
+  --basecolors-shape-metro-default: #bf5826;
+  --basecolors-shape-mobility-contrast: #00db9b;
+  --basecolors-shape-mobility-default: #388f76;
+  --basecolors-shape-plane-contrast: #fbafea;
+  --basecolors-shape-plane-default: #800664;
+  --basecolors-shape-subdued: #626493;
+  --basecolors-shape-subduedalt: #d9dae8;
+  --basecolors-shape-taxi-contrast: #ffe082;
+  --basecolors-shape-taxi-default: #3d3e40;
+  --basecolors-shape-train-contrast: #42a5f5;
+  --basecolors-shape-train-default: #00367f;
+  --basecolors-shape-tram-contrast: #b482fb;
+  --basecolors-shape-tram-default: #78469a;
+  --basecolors-shape-walk-contrast: #8284ab;
+  --basecolors-shape-walk-default: #8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast: #fbafea;
+  --basecolors-shape-airportlinkbus-default: #800664;
+  --basecolors-shape-airportlinkrail-contrast: #fbafea;
+  --basecolors-shape-airportlinkrail-default: #800664;
+  --basecolors-stroke-contrast: #aeb7e2;
+  --basecolors-stroke-default: #181c56;
+  --basecolors-stroke-disabled: #949699;
+  --basecolors-stroke-focus-contrast: #aeb7e2;
+  --basecolors-stroke-focus-standard: #181c56;
+  --basecolors-stroke-highlight: #ff5959;
+  --basecolors-stroke-light: #ffffff;
+  --basecolors-stroke-subdued: #8284ab;
+  --basecolors-stroke-subduedalt: #e3e6e8;
+  --basecolors-text-accent: #181c56;
+  --basecolors-text-disabled: #6e6f73;
+  --basecolors-text-disabledalt: #b6b8ba;
+  --basecolors-text-highlight: #ff5959;
+  --basecolors-text-light: #ffffff;
+  --basecolors-text-subdued: #626493;
+  --basecolors-text-subduedalt: #d9dae8;
+}
+
+[data-color-mode=dark] {
+  --basecolors-frame-contrast: #212233;
+  --basecolors-frame-contrastalt: #141527;
+  --basecolors-frame-default: #08091c;
+  --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
+  --basecolors-frame-elevatedalt: #464755;
+  --basecolors-frame-subdued: #2d2e3e;
+  --basecolors-frame-tint: #141527;
+  --basecolors-shape-accent: #e5e5e9;
+  --basecolors-shape-bicycle-contrast: #4db295;
+  --basecolors-shape-bicycle-default: #4db295;
+  --basecolors-shape-bus-contrast: #e87a9b;
+  --basecolors-shape-bus-default: #e87a9b;
+  --basecolors-shape-cableway-contrast: #b898e5;
+  --basecolors-shape-cableway-default: #b898e5;
+  --basecolors-shape-disabled: #b6b8ba;
+  --basecolors-shape-disabledalt: #b3b4bd;
+  --basecolors-shape-ferry-contrast: #8ccfe2;
+  --basecolors-shape-ferry-default: #8ccfe2;
+  --basecolors-shape-funicular-contrast: #b898e5;
+  --basecolors-shape-funicular-default: #b898e5;
+  --basecolors-shape-helicopter-contrast: #f2b8e5;
+  --basecolors-shape-helicopter-default: #f2b8e5;
+  --basecolors-shape-highlight: #ff9494;
+  --basecolors-shape-light: #e5e5e9;
+  --basecolors-shape-mask: #2d2e3e;
+  --basecolors-shape-maskalt: #393a49;
+  --basecolors-shape-metro-contrast: #dd973c;
+  --basecolors-shape-metro-default: #dd973c;
+  --basecolors-shape-mobility-contrast: #4db295;
+  --basecolors-shape-mobility-default: #4db295;
+  --basecolors-shape-plane-contrast: #f2b8e5;
+  --basecolors-shape-plane-default: #f2b8e5;
+  --basecolors-shape-subdued: #b3b4bd;
+  --basecolors-shape-subduedalt: #b3b4bd;
+  --basecolors-shape-taxi-contrast: #ffe082;
+  --basecolors-shape-taxi-default: #ffe082;
+  --basecolors-shape-train-contrast: #60a2d7;
+  --basecolors-shape-train-default: #60a2d7;
+  --basecolors-shape-tram-contrast: #b898e5;
+  --basecolors-shape-tram-default: #b898e5;
+  --basecolors-shape-walk-contrast: #8d8e9c;
+  --basecolors-shape-walk-default: #8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
+  --basecolors-shape-airportlinkbus-default: #f2b8e5;
+  --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
+  --basecolors-shape-airportlinkrail-default: #f2b8e5;
+  --basecolors-stroke-contrast: #aeb7e2;
+  --basecolors-stroke-default: #b3b4bd;
+  --basecolors-stroke-disabled: #e3e6e8;
+  --basecolors-stroke-focus-contrast: #aeb7e2;
+  --basecolors-stroke-focus-standard: #aeb7e2;
+  --basecolors-stroke-highlight: #ff9494;
+  --basecolors-stroke-light: #b3b4bd;
+  --basecolors-stroke-subdued: #81828f;
+  --basecolors-stroke-subduedalt: #81828f;
+  --basecolors-text-accent: #e5e5e9;
+  --basecolors-text-disabled: #b6b8ba;
+  --basecolors-text-disabledalt: #b6b8ba;
+  --basecolors-text-highlight: #ff9494;
+  --basecolors-text-light: #e5e5e9;
+  --basecolors-text-subdued: #b3b4bd;
+  --basecolors-text-subduedalt: #b3b4bd;
+}
+
+:root {
+  --eds-layout: 1;
+}
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-tag {
   background: #e9e9e9;
   color: #181c56;
@@ -431,167 +732,3 @@
 .eds-tag--compact.eds-tag--trailing-icon .eds-icon {
   margin-left: 0.25rem;
 }
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-@import '~@entur/tokens/dist/semantic.css';
-@import '~@entur/tokens/dist/base.css';
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-[data-color-mode=light],
-:root {
-  --components-layout-badge-information-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-information-contrast-bullet: var(--fill-information-contrast);
-  --components-layout-badge-information-contrast-fill: var(--fill-information-contrast);
-  --components-layout-badge-information-contrast-text: var(--text-accent);
-  --components-layout-badge-information-contrast-text-bullet: var(--text-light);
-  --components-layout-badge-information-standard-border: var(--stroke-information);
-  --components-layout-badge-information-standard-bullet: var(--fill-information-deep);
-  --components-layout-badge-information-standard-fill: var(--fill-information-muted);
-  --components-layout-badge-information-standard-text: var(--text-accent);
-  --components-layout-badge-information-standard-text-bullet: var(--text-accent);
-  --components-layout-badge-negative-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-negative-contrast-bullet: var(--fill-negative-contrast);
-  --components-layout-badge-negative-contrast-fill: var(--fill-negative-tint);
-  --components-layout-badge-negative-contrast-text: var(--text-accent);
-  --components-layout-badge-negative-contrast-text-bullet: var(--text-light);
-  --components-layout-badge-negative-standard-border: var(--stroke-negative);
-  --components-layout-badge-negative-standard-bullet: var(--fill-negative-deep);
-  --components-layout-badge-negative-standard-fill: var(--fill-negative-muted);
-  --components-layout-badge-negative-standard-text: var(--text-accent);
-  --components-layout-badge-negative-standard-text-bullet: var(--text-accent);
-  --components-layout-badge-neutral-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-neutral-contrast-bullet: var(--fill-primary-hover-contrast);
-  --components-layout-badge-neutral-contrast-fill: var(--fill-selected-hover-contrast);
-  --components-layout-badge-neutral-contrast-text: var(--text-light);
-  --components-layout-badge-neutral-contrast-text-bullet: var(--text-light);
-  --components-layout-badge-neutral-standard-border: var(--stroke-neutralalt);
-  --components-layout-badge-neutral-standard-bullet: var(--fill-selected-default-darkalt);
-  --components-layout-badge-neutral-standard-fill: var(--fill-selected-default-light);
-  --components-layout-badge-neutral-standard-text: var(--text-accent);
-  --components-layout-badge-neutral-standard-text-bullet: var(--text-accent);
-  --components-layout-badge-primary-contrast-bullet: var(--fill-primary-default-contrast);
-  --components-layout-badge-primary-contrast-fill: var(--fill-primary-default-contrast);
-  --components-layout-badge-primary-contrast-text: var(--text-accent);
-  --components-layout-badge-primary-contrast-text-bullet: var(--text-light);
-  --components-layout-badge-primary-standard-bullet: var(--fill-primary-default-light);
-  --components-layout-badge-primary-standard-fill: var(--fill-primary-default-light);
-  --components-layout-badge-primary-standard-text: var(--text-light);
-  --components-layout-badge-primary-standard-text-bullet: var(--text-accent);
-  --components-layout-badge-success-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-success-contrast-bullet: var(--fill-success-contrast);
-  --components-layout-badge-success-contrast-fill: var(--fill-success-contrast);
-  --components-layout-badge-success-contrast-text: var(--text-accent);
-  --components-layout-badge-success-contrast-text-bullet: var(--text-light);
-  --components-layout-badge-success-standard-border: var(--stroke-success);
-  --components-layout-badge-success-standard-bullet: var(--fill-success-deep);
-  --components-layout-badge-success-standard-fill: var(--fill-success-muted);
-  --components-layout-badge-success-standard-text: var(--text-accent);
-  --components-layout-badge-success-standard-text-bullet: var(--text-accent);
-  --components-layout-badge-warning-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-warning-contrast-bullet: var(--fill-warning-contrast);
-  --components-layout-badge-warning-contrast-fill: var(--fill-warning-contrast);
-  --components-layout-badge-warning-contrast-text: var(--text-accent);
-  --components-layout-badge-warning-contrast-text-bullet: var(--text-light);
-  --components-layout-badge-warning-standard-border: var(--stroke-warning);
-  --components-layout-badge-warning-standard-bullet: var(--fill-warning-deep);
-  --components-layout-badge-warning-standard-fill: var(--fill-warning-muted);
-  --components-layout-badge-warning-standard-text: var(--text-accent);
-  --components-layout-badge-warning-standard-text-bullet: var(--text-accent);
-  --components-layout-card-contrast-border-default: var(--stroke-colorless);
-  --components-layout-card-contrast-border-active: var(--stroke-contrast);
-  --components-layout-card-contrast-divide: var(--stroke-highlight);
-  --components-layout-card-contrast-fill-default: var(--fill-selected-default-contrast);
-  --components-layout-card-contrast-fill-hoveractive: var(--fill-selected-hover-contrast);
-  --components-layout-card-contrast-icon: var(--shape-light);
-  --components-layout-card-contrast-subjecttext: var(--text-subduedalt);
-  --components-layout-card-contrast-text: var(--text-light);
-  --components-layout-card-standard-border-default: var(--stroke-neutral);
-  --components-layout-card-standard-border-active: var(--stroke-accent);
-  --components-layout-card-standard-divide: var(--stroke-highlight);
-  --components-layout-card-standard-fill-default: var(--fill-background-standard-light);
-  --components-layout-card-standard-fill-hoveractive: var(--fill-background-tint-light);
-  --components-layout-card-standard-icon: var(--shape-accent);
-  --components-layout-card-standard-subjecttext: var(--text-subdued);
-  --components-layout-card-standard-text: var(--text-accent);
-}
-
-[data-color-mode=dark] {
-  --components-layout-badge-information-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-information-contrast-bullet: var(--fill-information-tint);
-  --components-layout-badge-information-contrast-fill: var(--fill-information-tint);
-  --components-layout-badge-information-contrast-text: var(--text-dark);
-  --components-layout-badge-information-contrast-text-bullet: var(--text-lightalt);
-  --components-layout-badge-information-standard-border: var(--stroke-colorless);
-  --components-layout-badge-information-standard-bullet: var(--fill-information-tint);
-  --components-layout-badge-information-standard-fill: var(--fill-information-tint);
-  --components-layout-badge-information-standard-text: var(--text-dark);
-  --components-layout-badge-information-standard-text-bullet: var(--text-lightalt);
-  --components-layout-badge-negative-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-negative-contrast-bullet: var(--fill-negative-tint);
-  --components-layout-badge-negative-contrast-fill: var(--fill-negative-muted);
-  --components-layout-badge-negative-contrast-text: var(--text-dark);
-  --components-layout-badge-negative-contrast-text-bullet: var(--text-lightalt);
-  --components-layout-badge-negative-standard-border: var(--stroke-colorless);
-  --components-layout-badge-negative-standard-bullet: var(--fill-negative-tint);
-  --components-layout-badge-negative-standard-fill: var(--fill-negative-muted);
-  --components-layout-badge-negative-standard-text: var(--text-dark);
-  --components-layout-badge-negative-standard-text-bullet: var(--text-lightalt);
-  --components-layout-badge-neutral-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-neutral-contrast-bullet: var(--fill-selected-default-dark);
-  --components-layout-badge-neutral-contrast-fill: var(--fill-selected-hover-dark);
-  --components-layout-badge-neutral-contrast-text: var(--text-lightalt);
-  --components-layout-badge-neutral-contrast-text-bullet: var(--text-lightalt);
-  --components-layout-badge-neutral-standard-border: var(--stroke-colorless);
-  --components-layout-badge-neutral-standard-bullet: var(--fill-selected-default-dark);
-  --components-layout-badge-neutral-standard-fill: var(--fill-selected-hover-dark);
-  --components-layout-badge-neutral-standard-text: var(--text-lightalt);
-  --components-layout-badge-neutral-standard-text-bullet: var(--text-lightalt);
-  --components-layout-badge-primary-contrast-bullet: var(--fill-primary-default-contrast);
-  --components-layout-badge-primary-contrast-fill: var(--fill-primary-default-contrast);
-  --components-layout-badge-primary-contrast-text: var(--text-dark);
-  --components-layout-badge-primary-contrast-text-bullet: var(--text-lightalt);
-  --components-layout-badge-primary-standard-bullet: var(--fill-primary-default-contrast);
-  --components-layout-badge-primary-standard-fill: var(--fill-primary-default-contrast);
-  --components-layout-badge-primary-standard-text: var(--text-dark);
-  --components-layout-badge-primary-standard-text-bullet: var(--text-lightalt);
-  --components-layout-badge-success-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-success-contrast-bullet: var(--fill-success-tint);
-  --components-layout-badge-success-contrast-fill: var(--fill-success-tint);
-  --components-layout-badge-success-contrast-text: var(--text-dark);
-  --components-layout-badge-success-contrast-text-bullet: var(--text-lightalt);
-  --components-layout-badge-success-standard-border: var(--stroke-colorless);
-  --components-layout-badge-success-standard-bullet: var(--fill-success-tint);
-  --components-layout-badge-success-standard-fill: var(--fill-success-tint);
-  --components-layout-badge-success-standard-text: var(--text-dark);
-  --components-layout-badge-success-standard-text-bullet: var(--text-lightalt);
-  --components-layout-badge-warning-contrast-border: var(--stroke-colorless);
-  --components-layout-badge-warning-contrast-bullet: var(--fill-warning-tint);
-  --components-layout-badge-warning-contrast-fill: var(--fill-warning-tint);
-  --components-layout-badge-warning-contrast-text: var(--text-dark);
-  --components-layout-badge-warning-contrast-text-bullet: var(--text-lightalt);
-  --components-layout-badge-warning-standard-border: var(--stroke-colorless);
-  --components-layout-badge-warning-standard-bullet: var(--fill-warning-tint);
-  --components-layout-badge-warning-standard-fill: var(--fill-warning-tint);
-  --components-layout-badge-warning-standard-text: var(--text-dark);
-  --components-layout-badge-warning-standard-text-bullet: var(--text-lightalt);
-  --components-layout-card-contrast-border-default: var(--stroke-colorless);
-  --components-layout-card-contrast-border-active: var(--stroke-dark);
-  --components-layout-card-contrast-divide: var(--stroke-highlightalt);
-  --components-layout-card-contrast-fill-default: var(--fill-background-overlay-transparent);
-  --components-layout-card-contrast-fill-hoveractive: var(--fill-background-overlay-solid);
-  --components-layout-card-contrast-icon: var(--shape-lightalt);
-  --components-layout-card-contrast-subjecttext: var(--text-darkalt);
-  --components-layout-card-contrast-text: var(--text-lightalt);
-  --components-layout-card-standard-border-default: var(--stroke-colorless);
-  --components-layout-card-standard-border-active: var(--stroke-dark);
-  --components-layout-card-standard-divide: var(--stroke-highlightalt);
-  --components-layout-card-standard-fill-default: var(--fill-background-overlay-transparent);
-  --components-layout-card-standard-fill-hoveractive: var(--fill-background-overlay-solid);
-  --components-layout-card-standard-icon: var(--shape-lightalt);
-  --components-layout-card-standard-subjecttext: var(--text-darkalt);
-  --components-layout-card-standard-text: var(--text-lightalt);
-}
-
-:root {
-  --eds-layout: 1;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/layout",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/layout.esm.js",
@@ -27,11 +27,11 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/icons": "^6.15.2",
-    "@entur/tokens": "^3.13.1",
-    "@entur/typography": "^1.8.26",
-    "@entur/utils": "^0.10.0",
+    "@entur/icons": "^6.15.4",
+    "@entur/tokens": "^3.13.3",
+    "@entur/typography": "^1.8.28",
+    "@entur/utils": "^0.10.1",
     "classnames": "^2.3.1"
   },
-  "gitHead": "c36e1121738a702fe5ed92cd3f26636d7a4ef026"
+  "gitHead": "89d5de6d31962e236a5c147e129bf915576166b4"
 }