@entur/button 3.2.14 → 3.2.16

package/dist/styles.css

@@ -292,6 +292,387 @@ a.eds-button--size-large {
 }
 /* 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-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1490196078);
+  --components-button-disabled-contrast-icon-disabled: #b6b8ba;
+  --components-button-disabled-contrast-text-disabled: #b6b8ba;
+  --components-button-disabled-standard-fill: #cfd2d4;
+  --components-button-disabled-standard-icon-disabled: #515254;
+  --components-button-disabled-standard-text-disabled: #515254;
+  --components-button-floating-contrast-active: #d9dae8;
+  --components-button-floating-contrast-default: #ffffff;
+  --components-button-floating-contrast-hover: #f6f6f9;
+  --components-button-floating-contrast-icon: #181c56;
+  --components-button-floating-contrast-text: #181c56;
+  --components-button-floating-standard-active: #11143c;
+  --components-button-floating-standard-default: #181c56;
+  --components-button-floating-standard-hover: #393d79;
+  --components-button-floating-standard-icon: #ffffff;
+  --components-button-floating-standard-text: #ffffff;
+  --components-button-iconbutton-contrast-active: #8794d4;
+  --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-iconbutton-contrast-hover: #626493;
+  --components-button-iconbutton-contrast-icon: #ffffff;
+  --components-button-iconbutton-contrast-icon-active: #181c56;
+  --components-button-iconbutton-contrast-text: #ffffff;
+  --components-button-iconbutton-contrast-text-active: #181c56;
+  --components-button-iconbutton-standard-active: #aeb7e2;
+  --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
+  --components-button-iconbutton-standard-hover: #d9ddf2;
+  --components-button-iconbutton-standard-icon: #181c56;
+  --components-button-iconbutton-standard-icon-active: #181c56;
+  --components-button-iconbutton-standard-text: #181c56;
+  --components-button-iconbutton-standard-text-active: #181c56;
+  --components-button-negative-contrast-active: #ff9494;
+  --components-button-negative-contrast-border: #ff9494;
+  --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
+  --components-button-negative-contrast-icon: #ffffff;
+  --components-button-negative-contrast-icon-active: #181c56;
+  --components-button-negative-contrast-text: #ffffff;
+  --components-button-negative-contrast-text-active: #181c56;
+  --components-button-negative-standard-active: #d31b1b;
+  --components-button-negative-standard-border: #d31b1b;
+  --components-button-negative-standard-default: rgba(255, 255, 255, 0);
+  --components-button-negative-standard-hover: #ffcece;
+  --components-button-negative-standard-icon: #d31b1b;
+  --components-button-negative-standard-icon-active: #ffffff;
+  --components-button-negative-standard-text: #d31b1b;
+  --components-button-negative-standard-text-active: #ffffff;
+  --components-button-primary-contrast-active: #8794d4;
+  --components-button-primary-contrast-default: #aeb7e2;
+  --components-button-primary-contrast-hover: #c7cdeb;
+  --components-button-primary-contrast-icon: #181c56;
+  --components-button-primary-contrast-text: #181c56;
+  --components-button-primary-standard-active: #11143c;
+  --components-button-primary-standard-default: #181c56;
+  --components-button-primary-standard-hover: #393d79;
+  --components-button-primary-standard-icon: #ffffff;
+  --components-button-primary-standard-text: #ffffff;
+  --components-button-secondary-contrast-active: #8794d4;
+  --components-button-secondary-contrast-border: #8284ab;
+  --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
+  --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-secondary-contrast-hover: #626493;
+  --components-button-secondary-contrast-icon: #ffffff;
+  --components-button-secondary-contrast-icon-active: #181c56;
+  --components-button-secondary-contrast-text: #ffffff;
+  --components-button-secondary-contrast-text-active: #181c56;
+  --components-button-secondary-standard-active: #aeb7e2;
+  --components-button-secondary-standard-border: #8284ab;
+  --components-button-secondary-standard-border-active: #181c56;
+  --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
+  --components-button-secondary-standard-hover: #d9ddf2;
+  --components-button-secondary-standard-icon: #181c56;
+  --components-button-secondary-standard-icon-active: #181c56;
+  --components-button-secondary-standard-text: #181c56;
+  --components-button-secondary-standard-text-active: #181c56;
+  --components-button-squaresecondary-contrast-active: #8794d4;
+  --components-button-squaresecondary-contrast-border: #8284ab;
+  --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-contrast-hover: #d9ddf2;
+  --components-button-squaresecondary-contrast-icon-active: #181c56;
+  --components-button-squaresecondary-contrast-icon-default: #ffffff;
+  --components-button-squaresecondary-contrast-icon-hover: #181c56;
+  --components-button-squaresecondary-contrast-label: #ffffff;
+  --components-button-squaresecondary-standard-active: #aeb7e2;
+  --components-button-squaresecondary-standard-border: #8284ab;
+  --components-button-squaresecondary-standard-border-active: #181c56;
+  --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-standard-hover: #d9ddf2;
+  --components-button-squaresecondary-standard-icon: #181c56;
+  --components-button-squaresecondary-standard-icon-active: #181c56;
+  --components-button-squaresecondary-standard-text: #181c56;
+  --components-button-squaresuccess-contrast-active: #37ab83;
+  --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
+  --components-button-squaresuccess-contrast-default: #5ac39a;
+  --components-button-squaresuccess-contrast-hover: #9cd9c2;
+  --components-button-squaresuccess-contrast-icon: #181c56;
+  --components-button-squaresuccess-contrast-label: #ffffff;
+  --components-button-squaresuccess-standard-active: #37ab83;
+  --components-button-squaresuccess-standard-border: #181c56;
+  --components-button-squaresuccess-standard-default: #5ac39a;
+  --components-button-squaresuccess-standard-hover: #9cd9c2;
+  --components-button-squaresuccess-standard-icon: #181c56;
+  --components-button-squaresuccess-standard-label: #181c56;
+  --components-button-success-contrast-active: #37ab83;
+  --components-button-success-contrast-border: rgba(255, 255, 255, 0);
+  --components-button-success-contrast-default: #5ac39a;
+  --components-button-success-contrast-hover: #9cd9c2;
+  --components-button-success-contrast-icon: #181c56;
+  --components-button-success-contrast-text: #181c56;
+  --components-button-success-standard-active: #37ab83;
+  --components-button-success-standard-border: #181c56;
+  --components-button-success-standard-default: #5ac39a;
+  --components-button-success-standard-hover: #9cd9c2;
+  --components-button-success-standard-icon: #181c56;
+  --components-button-success-standard-text: #181c56;
+}
+
+[data-color-mode=dark] {
+  --components-button-disabled-contrast-fill: rgba(207, 210, 212, 0.1019607843);
+  --components-button-disabled-contrast-icon-disabled: #b6b8ba;
+  --components-button-disabled-contrast-text-disabled: #b6b8ba;
+  --components-button-disabled-standard-fill: rgba(207, 210, 212, 0.1019607843);
+  --components-button-disabled-standard-icon-disabled: #b6b8ba;
+  --components-button-disabled-standard-text-disabled: #b6b8ba;
+  --components-button-floating-contrast-active: #8794d4;
+  --components-button-floating-contrast-default: #aeb7e2;
+  --components-button-floating-contrast-hover: #c7cdeb;
+  --components-button-floating-contrast-icon: #08091c;
+  --components-button-floating-contrast-text: #08091c;
+  --components-button-floating-standard-active: #8794d4;
+  --components-button-floating-standard-default: #aeb7e2;
+  --components-button-floating-standard-hover: #c7cdeb;
+  --components-button-floating-standard-icon: #08091c;
+  --components-button-floating-standard-text: #08091c;
+  --components-button-iconbutton-contrast-active: #8794d4;
+  --components-button-iconbutton-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-iconbutton-contrast-hover: #626493;
+  --components-button-iconbutton-contrast-icon: #e5e5e9;
+  --components-button-iconbutton-contrast-icon-active: #08091c;
+  --components-button-iconbutton-contrast-text: #e5e5e9;
+  --components-button-iconbutton-contrast-text-active: #08091c;
+  --components-button-iconbutton-standard-active: #8794d4;
+  --components-button-iconbutton-standard-default: rgba(255, 255, 255, 0);
+  --components-button-iconbutton-standard-hover: #626493;
+  --components-button-iconbutton-standard-icon: #e5e5e9;
+  --components-button-iconbutton-standard-icon-active: #08091c;
+  --components-button-iconbutton-standard-text: #e5e5e9;
+  --components-button-iconbutton-standard-text-active: #08091c;
+  --components-button-negative-contrast-active: #ff9494;
+  --components-button-negative-contrast-border: #ff9494;
+  --components-button-negative-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-negative-contrast-hover: rgba(255, 148, 148, 0.2);
+  --components-button-negative-contrast-icon: #e5e5e9;
+  --components-button-negative-contrast-icon-active: #08091c;
+  --components-button-negative-contrast-text: #e5e5e9;
+  --components-button-negative-contrast-text-active: #08091c;
+  --components-button-negative-standard-active: #ff9494;
+  --components-button-negative-standard-border: #ff9494;
+  --components-button-negative-standard-default: rgba(255, 255, 255, 0);
+  --components-button-negative-standard-hover: rgba(255, 148, 148, 0.2);
+  --components-button-negative-standard-icon: #e5e5e9;
+  --components-button-negative-standard-icon-active: #08091c;
+  --components-button-negative-standard-text: #e5e5e9;
+  --components-button-negative-standard-text-active: #08091c;
+  --components-button-primary-contrast-active: #8794d4;
+  --components-button-primary-contrast-default: #aeb7e2;
+  --components-button-primary-contrast-hover: #c7cdeb;
+  --components-button-primary-contrast-icon: #08091c;
+  --components-button-primary-contrast-text: #08091c;
+  --components-button-primary-standard-active: #8794d4;
+  --components-button-primary-standard-default: #aeb7e2;
+  --components-button-primary-standard-hover: #c7cdeb;
+  --components-button-primary-standard-icon: #08091c;
+  --components-button-primary-standard-text: #08091c;
+  --components-button-secondary-contrast-active: #8794d4;
+  --components-button-secondary-contrast-border: #8284ab;
+  --components-button-secondary-contrast-border-active: rgba(255, 255, 255, 0);
+  --components-button-secondary-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-secondary-contrast-hover: #626493;
+  --components-button-secondary-contrast-icon: #e5e5e9;
+  --components-button-secondary-contrast-icon-active: #08091c;
+  --components-button-secondary-contrast-text: #e5e5e9;
+  --components-button-secondary-contrast-text-active: #08091c;
+  --components-button-secondary-standard-active: #8794d4;
+  --components-button-secondary-standard-border: #8284ab;
+  --components-button-secondary-standard-border-active: rgba(255, 255, 255, 0);
+  --components-button-secondary-standard-default: rgba(255, 255, 255, 0);
+  --components-button-secondary-standard-hover: #626493;
+  --components-button-secondary-standard-icon: #e5e5e9;
+  --components-button-secondary-standard-icon-active: #08091c;
+  --components-button-secondary-standard-text: #e5e5e9;
+  --components-button-secondary-standard-text-active: #08091c;
+  --components-button-squaresecondary-contrast-active: #8794d4;
+  --components-button-squaresecondary-contrast-border: #8284ab;
+  --components-button-squaresecondary-contrast-border-active: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-contrast-default: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-contrast-hover: #626493;
+  --components-button-squaresecondary-contrast-icon-active: #08091c;
+  --components-button-squaresecondary-contrast-icon-default: #e5e5e9;
+  --components-button-squaresecondary-contrast-icon-hover: #e5e5e9;
+  --components-button-squaresecondary-contrast-label: #e5e5e9;
+  --components-button-squaresecondary-standard-active: #8794d4;
+  --components-button-squaresecondary-standard-border: #8284ab;
+  --components-button-squaresecondary-standard-border-active: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-standard-default: rgba(255, 255, 255, 0);
+  --components-button-squaresecondary-standard-hover: #626493;
+  --components-button-squaresecondary-standard-icon: #e5e5e9;
+  --components-button-squaresecondary-standard-icon-active: #08091c;
+  --components-button-squaresecondary-standard-text: #e5e5e9;
+  --components-button-squaresuccess-contrast-active: #5ac39a;
+  --components-button-squaresuccess-contrast-border: rgba(255, 255, 255, 0);
+  --components-button-squaresuccess-contrast-default: #5ac39a;
+  --components-button-squaresuccess-contrast-hover: #9cd9c2;
+  --components-button-squaresuccess-contrast-icon: #08091c;
+  --components-button-squaresuccess-contrast-label: #e5e5e9;
+  --components-button-squaresuccess-standard-active: #37ab83;
+  --components-button-squaresuccess-standard-border: rgba(255, 255, 255, 0);
+  --components-button-squaresuccess-standard-default: #5ac39a;
+  --components-button-squaresuccess-standard-hover: #9cd9c2;
+  --components-button-squaresuccess-standard-icon: #08091c;
+  --components-button-squaresuccess-standard-label: #e5e5e9;
+  --components-button-success-contrast-active: #37ab83;
+  --components-button-success-contrast-border: rgba(255, 255, 255, 0);
+  --components-button-success-contrast-default: #5ac39a;
+  --components-button-success-contrast-hover: #9cd9c2;
+  --components-button-success-contrast-icon: #08091c;
+  --components-button-success-contrast-text: #08091c;
+  --components-button-success-standard-active: #37ab83;
+  --components-button-success-standard-border: rgba(255, 255, 255, 0);
+  --components-button-success-standard-default: #5ac39a;
+  --components-button-success-standard-hover: #9cd9c2;
+  --components-button-success-standard-icon: #08091c;
+  --components-button-success-standard-text: #08091c;
+}
+
+/* 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-button: 1;
+}
+/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-square-button {
   align-items: center;
   -webkit-appearance: none;
@@ -511,512 +892,3 @@ a.eds-button--size-large {
   width: -moz-fit-content;
   width: fit-content;
 }
-@import "~@entur/tokens/dist/primitive.css";
-@import "~@entur/tokens/dist/semantic.css";
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-:root {
-  --fill-background-contrast-dark: var(--ebony-90);
-  --fill-background-contrast-light: var(--lavender-90);
-  --fill-background-contrast-lightalt: var(--blue-90);
-  --fill-background-contrast-lightalt-2: var(--blue-100);
-  --fill-background-overlay-solid: var(--ebony-80);
-  --fill-background-overlay-solidalt: var(--ebony-75);
-  --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
-  --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
-  --fill-background-standard-colorless: var(--white-alpha-0);
-  --fill-background-standard-dark: var(--ebony-100);
-  --fill-background-standard-light: var(--white-alpha-100);
-  --fill-background-subdued-dark: var(--ebony-85);
-  --fill-background-subdued-light: var(--blue-30);
-  --fill-background-tint-dark: var(--ebony-95);
-  --fill-background-tint-light: var(--blue-10);
-  --fill-background-tint-neutral: var(--grey-10);
-  --fill-background-tint-transparent: var(--transparent-blue-alpha10);
-  --fill-boolean-false-contrast: var(--blue-50);
-  --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
-  --fill-boolean-false-light: var(--grey-60);
-  --fill-boolean-true-contrast: var(--mint-40);
-  --fill-boolean-true-dark: var(--mint-40);
-  --fill-boolean-true-light: var(--mint-60);
-  --fill-disabled-light: var(--grey-40);
-  --fill-disabled-transparent: var(--transparent-neutral-alpha15);
-  --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
-  --fill-information-contrast: var(--sky-30);
-  --fill-information-deep: var(--sky-50);
-  --fill-information-muted: var(--sky-10);
-  --fill-information-tint: var(--sky-20);
-  --fill-negative-contrast: var(--coral-40);
-  --fill-negative-dark: var(--coral-90);
-  --fill-negative-deep: var(--coral-60);
-  --fill-negative-muted: var(--coral-20);
-  --fill-negative-tint: var(--coral-30);
-  --fill-negative-transparent: var(--transparent-coral-alpha20);
-  --fill-primary-active-contrast: var(--lavender-50);
-  --fill-primary-active-light: var(--lavender-100);
-  --fill-primary-default-contrast: var(--lavender-40);
-  --fill-primary-default-light: var(--lavender-90);
-  --fill-primary-hover-contrast: var(--lavender-30);
-  --fill-primary-hover-light: var(--blue-90);
-  --fill-secondary-active-contrast: var(--lavender-50);
-  --fill-secondary-active-light: var(--lavender-40);
-  --fill-secondary-default-colorless: var(--white-alpha-0);
-  --fill-secondary-hover-contrast: var(--blue-70);
-  --fill-secondary-hover-light: var(--lavender-20);
-  --fill-selected-default-contrast: var(--blue-90);
-  --fill-selected-default-dark: var(--ebony-10);
-  --fill-selected-default-darkalt: var(--ebony-50);
-  --fill-selected-default-light: var(--blue-10);
-  --fill-selected-default-neutral: var(--grey-30);
-  --fill-selected-hover-contrast: var(--blue-80);
-  --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
-  --fill-selected-hover-light: var(--blue-20);
-  --fill-selected-hover-neutral: var(--grey-20);
-  --fill-success-contrast: var(--mint-40);
-  --fill-success-deep: var(--mint-60);
-  --fill-success-muted: var(--mint-20);
-  --fill-success-subdued: var(--mint-50);
-  --fill-success-tint: var(--mint-30);
-  --fill-warning-contrast: var(--canary-40);
-  --fill-warning-deep: var(--canary-60);
-  --fill-warning-muted: var(--canary-20);
-  --fill-warning-tint: var(--canary-30);
-  --shape-accent: var(--lavender-90);
-  --shape-contrast: var(--lavender-40);
-  --shape-dark: var(--ebony-100);
-  --shape-darkalt: var(--ebony-30);
-  --shape-disabled: var(--grey-80);
-  --shape-highlight: var(--coral-40);
-  --shape-highlightalt: var(--coral-30);
-  --shape-inactive: var(--blue-40);
-  --shape-information: var(--sky-50);
-  --shape-informationalt: var(--sky-30);
-  --shape-light: var(--white-alpha-100);
-  --shape-lightalt: var(--ebony-10);
-  --shape-negative: var(--coral-60);
-  --shape-negativealt: var(--coral-30);
-  --shape-neutral: var(--grey-70);
-  --shape-neutralalt: var(--grey-50);
-  --shape-neutralalt2: var(--grey-60);
-  --shape-subdued: var(--blue-70);
-  --shape-subduedalt: var(--blue-30);
-  --shape-success: var(--mint-60);
-  --shape-successalt: var(--mint-40);
-  --shape-warning: var(--canary-60);
-  --shape-warningalt: var(--canary-40);
-  --stroke-accent: var(--lavender-90);
-  --stroke-colorless: var(--white-alpha-0);
-  --stroke-contrast: var(--lavender-40);
-  --stroke-contrastalt: var(--blue-80);
-  --stroke-dark: var(--ebony-30);
-  --stroke-darkalt: var(--ebony-50);
-  --stroke-darkalt-2: var(--ebony-100);
-  --stroke-highlight: var(--coral-40);
-  --stroke-highlightalt: var(--coral-30);
-  --stroke-information: var(--sky-50);
-  --stroke-light: var(--white-alpha-100);
-  --stroke-lightalt: var(--ebony-10);
-  --stroke-negative: var(--coral-60);
-  --stroke-negativealt: var(--coral-30);
-  --stroke-neutral: var(--grey-30);
-  --stroke-neutralalt: var(--grey-60);
-  --stroke-subdued: var(--blue-60);
-  --stroke-success: var(--mint-60);
-  --stroke-successalt: var(--mint-40);
-  --stroke-transparent: var(--transparent-blue-alpha40);
-  --stroke-transparentalt: var(--transparent-lavender-alpha70);
-  --stroke-warning: var(--canary-70);
-  --text-accent: var(--lavender-90);
-  --text-dark: var(--ebony-100);
-  --text-darkalt: var(--ebony-30);
-  --text-disabled: var(--grey-80);
-  --text-highlight: var(--lavender-40);
-  --text-highlightalt: var(--peach-40);
-  --text-light: var(--white-alpha-100);
-  --text-lightalt: var(--ebony-10);
-  --text-negative: var(--coral-60);
-  --text-negativealt: var(--coral-30);
-  --text-neutral: var(--grey-70);
-  --text-neutralalt: var(--grey-50);
-  --text-neutralalt2: var(--grey-60);
-  --text-subdued: var(--blue-70);
-  --text-subduedalt: var(--blue-30);
-  --text-success: var(--mint-60);
-  --text-successalt: var(--mint-40);
-}
-
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-[data-color-mode=light],
-:root {
-  --components-button-disabled-contrast-fill: var(--fill-disabled-transparent);
-  --components-button-disabled-contrast-icon-disabled: var(--shape-neutralalt);
-  --components-button-disabled-contrast-text-disabled: var(--text-neutralalt);
-  --components-button-disabled-standard-fill: var(--fill-disabled-light);
-  --components-button-disabled-standard-icon-disabled: var(--shape-disabled);
-  --components-button-disabled-standard-text-disabled: var(--text-disabled);
-  --components-button-floating-contrast-active: var(--fill-background-subdued-light);
-  --components-button-floating-contrast-default: var(--fill-background-standard-light);
-  --components-button-floating-contrast-hover: var(--fill-background-tint-light);
-  --components-button-floating-contrast-icon: var(--shape-accent);
-  --components-button-floating-contrast-text: var(--text-accent);
-  --components-button-floating-standard-active: var(--fill-primary-active-light);
-  --components-button-floating-standard-default: var(--fill-primary-default-light);
-  --components-button-floating-standard-hover: var(--fill-primary-hover-light);
-  --components-button-floating-standard-icon: var(--shape-light);
-  --components-button-floating-standard-text: var(--text-light);
-  --components-button-iconbutton-contrast-active: var(--fill-secondary-active-contrast);
-  --components-button-iconbutton-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-iconbutton-contrast-hover: var(--fill-secondary-hover-contrast);
-  --components-button-iconbutton-contrast-icon: var(--shape-light);
-  --components-button-iconbutton-contrast-icon-active: var(--shape-accent);
-  --components-button-iconbutton-contrast-text: var(--text-light);
-  --components-button-iconbutton-contrast-text-active: var(--text-accent);
-  --components-button-iconbutton-standard-active: var(--fill-secondary-active-light);
-  --components-button-iconbutton-standard-default: var(--fill-background-standard-colorless);
-  --components-button-iconbutton-standard-hover: var(--fill-secondary-hover-light);
-  --components-button-iconbutton-standard-icon: var(--shape-accent);
-  --components-button-iconbutton-standard-icon-active: var(--shape-accent);
-  --components-button-iconbutton-standard-text: var(--text-accent);
-  --components-button-iconbutton-standard-text-active: var(--text-accent);
-  --components-button-negative-contrast-active: var(--fill-negative-tint);
-  --components-button-negative-contrast-border: var(--fill-negative-tint);
-  --components-button-negative-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-negative-contrast-hover: var(--fill-negative-transparent);
-  --components-button-negative-contrast-icon: var(--shape-light);
-  --components-button-negative-contrast-icon-active: var(--shape-accent);
-  --components-button-negative-contrast-text: var(--text-light);
-  --components-button-negative-contrast-text-active: var(--text-accent);
-  --components-button-negative-standard-active: var(--fill-negative-deep);
-  --components-button-negative-standard-border: var(--fill-negative-deep);
-  --components-button-negative-standard-default: var(--fill-background-standard-colorless);
-  --components-button-negative-standard-hover: var(--fill-negative-muted);
-  --components-button-negative-standard-icon: var(--fill-negative-deep);
-  --components-button-negative-standard-icon-active: var(--shape-light);
-  --components-button-negative-standard-text: var(--fill-negative-deep);
-  --components-button-negative-standard-text-active: var(--text-light);
-  --components-button-primary-contrast-active: var(--fill-primary-active-contrast);
-  --components-button-primary-contrast-default: var(--fill-primary-default-contrast);
-  --components-button-primary-contrast-hover: var(--fill-primary-hover-contrast);
-  --components-button-primary-contrast-icon: var(--shape-accent);
-  --components-button-primary-contrast-text: var(--text-accent);
-  --components-button-primary-standard-active: var(--fill-primary-active-light);
-  --components-button-primary-standard-default: var(--fill-primary-default-light);
-  --components-button-primary-standard-hover: var(--fill-primary-hover-light);
-  --components-button-primary-standard-icon: var(--shape-light);
-  --components-button-primary-standard-text: var(--text-light);
-  --components-button-secondary-contrast-active: var(--fill-secondary-active-contrast);
-  --components-button-secondary-contrast-border: var(--stroke-subdued);
-  --components-button-secondary-contrast-border-active: var(--stroke-colorless);
-  --components-button-secondary-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-secondary-contrast-hover: var(--fill-secondary-hover-contrast);
-  --components-button-secondary-contrast-icon: var(--shape-light);
-  --components-button-secondary-contrast-icon-active: var(--shape-accent);
-  --components-button-secondary-contrast-text: var(--text-light);
-  --components-button-secondary-contrast-text-active: var(--text-accent);
-  --components-button-secondary-standard-active: var(--fill-secondary-active-light);
-  --components-button-secondary-standard-border: var(--stroke-subdued);
-  --components-button-secondary-standard-border-active: var(--stroke-accent);
-  --components-button-secondary-standard-default: var(--fill-background-standard-colorless);
-  --components-button-secondary-standard-hover: var(--fill-secondary-hover-light);
-  --components-button-secondary-standard-icon: var(--shape-accent);
-  --components-button-secondary-standard-icon-active: var(--shape-accent);
-  --components-button-secondary-standard-text: var(--text-accent);
-  --components-button-secondary-standard-text-active: var(--text-accent);
-  --components-button-squaresecondary-contrast-active: var(--fill-secondary-active-contrast);
-  --components-button-squaresecondary-contrast-border: var(--stroke-subdued);
-  --components-button-squaresecondary-contrast-border-active: var(--stroke-colorless);
-  --components-button-squaresecondary-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-squaresecondary-contrast-hover: var(--fill-secondary-hover-light);
-  --components-button-squaresecondary-contrast-icon-active: var(--shape-accent);
-  --components-button-squaresecondary-contrast-icon-default: var(--shape-light);
-  --components-button-squaresecondary-contrast-icon-hover: var(--shape-accent);
-  --components-button-squaresecondary-contrast-label: var(--text-light);
-  --components-button-squaresecondary-standard-active: var(--fill-secondary-active-light);
-  --components-button-squaresecondary-standard-border: var(--stroke-subdued);
-  --components-button-squaresecondary-standard-border-active: var(--stroke-accent);
-  --components-button-squaresecondary-standard-default: var(--fill-background-standard-colorless);
-  --components-button-squaresecondary-standard-hover: var(--fill-secondary-hover-light);
-  --components-button-squaresecondary-standard-icon: var(--shape-accent);
-  --components-button-squaresecondary-standard-icon-active: var(--shape-accent);
-  --components-button-squaresecondary-standard-text: var(--text-accent);
-  --components-button-squaresuccess-contrast-active: var(--fill-success-subdued);
-  --components-button-squaresuccess-contrast-border: var(--stroke-colorless);
-  --components-button-squaresuccess-contrast-default: var(--fill-success-contrast);
-  --components-button-squaresuccess-contrast-hover: var(--fill-success-tint);
-  --components-button-squaresuccess-contrast-icon: var(--shape-accent);
-  --components-button-squaresuccess-contrast-label: var(--text-light);
-  --components-button-squaresuccess-standard-active: var(--fill-success-subdued);
-  --components-button-squaresuccess-standard-border: var(--stroke-accent);
-  --components-button-squaresuccess-standard-default: var(--fill-success-contrast);
-  --components-button-squaresuccess-standard-hover: var(--fill-success-tint);
-  --components-button-squaresuccess-standard-icon: var(--shape-accent);
-  --components-button-squaresuccess-standard-label: var(--text-accent);
-  --components-button-success-contrast-active: var(--fill-success-subdued);
-  --components-button-success-contrast-border: var(--stroke-colorless);
-  --components-button-success-contrast-default: var(--fill-success-contrast);
-  --components-button-success-contrast-hover: var(--fill-success-tint);
-  --components-button-success-contrast-icon: var(--shape-accent);
-  --components-button-success-contrast-text: var(--text-accent);
-  --components-button-success-standard-active: var(--fill-success-subdued);
-  --components-button-success-standard-border: var(--stroke-accent);
-  --components-button-success-standard-default: var(--fill-success-contrast);
-  --components-button-success-standard-hover: var(--fill-success-tint);
-  --components-button-success-standard-icon: var(--shape-accent);
-  --components-button-success-standard-text: var(--text-accent);
-}
-
-[data-color-mode=dark] {
-  --components-button-disabled-contrast-fill: var(--fill-disabled-transparentalt);
-  --components-button-disabled-contrast-icon-disabled: var(--shape-neutralalt);
-  --components-button-disabled-contrast-text-disabled: var(--text-neutralalt);
-  --components-button-disabled-standard-fill: var(--fill-disabled-transparentalt);
-  --components-button-disabled-standard-icon-disabled: var(--shape-neutralalt);
-  --components-button-disabled-standard-text-disabled: var(--text-neutralalt);
-  --components-button-floating-contrast-active: var(--fill-primary-active-contrast);
-  --components-button-floating-contrast-default: var(--fill-primary-default-contrast);
-  --components-button-floating-contrast-hover: var(--fill-primary-hover-contrast);
-  --components-button-floating-contrast-icon: var(--shape-dark);
-  --components-button-floating-contrast-text: var(--text-dark);
-  --components-button-floating-standard-active: var(--fill-primary-active-contrast);
-  --components-button-floating-standard-default: var(--fill-primary-default-contrast);
-  --components-button-floating-standard-hover: var(--fill-primary-hover-contrast);
-  --components-button-floating-standard-icon: var(--shape-dark);
-  --components-button-floating-standard-text: var(--text-dark);
-  --components-button-iconbutton-contrast-active: var(--fill-secondary-active-contrast);
-  --components-button-iconbutton-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-iconbutton-contrast-hover: var(--fill-secondary-hover-contrast);
-  --components-button-iconbutton-contrast-icon: var(--shape-lightalt);
-  --components-button-iconbutton-contrast-icon-active: var(--shape-dark);
-  --components-button-iconbutton-contrast-text: var(--text-lightalt);
-  --components-button-iconbutton-contrast-text-active: var(--text-dark);
-  --components-button-iconbutton-standard-active: var(--fill-secondary-active-contrast);
-  --components-button-iconbutton-standard-default: var(--fill-background-standard-colorless);
-  --components-button-iconbutton-standard-hover: var(--fill-secondary-hover-contrast);
-  --components-button-iconbutton-standard-icon: var(--shape-lightalt);
-  --components-button-iconbutton-standard-icon-active: var(--shape-dark);
-  --components-button-iconbutton-standard-text: var(--text-lightalt);
-  --components-button-iconbutton-standard-text-active: var(--text-dark);
-  --components-button-negative-contrast-active: var(--fill-negative-tint);
-  --components-button-negative-contrast-border: var(--fill-negative-tint);
-  --components-button-negative-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-negative-contrast-hover: var(--fill-negative-transparent);
-  --components-button-negative-contrast-icon: var(--shape-lightalt);
-  --components-button-negative-contrast-icon-active: var(--shape-dark);
-  --components-button-negative-contrast-text: var(--text-lightalt);
-  --components-button-negative-contrast-text-active: var(--text-dark);
-  --components-button-negative-standard-active: var(--fill-negative-tint);
-  --components-button-negative-standard-border: var(--fill-negative-tint);
-  --components-button-negative-standard-default: var(--fill-background-standard-colorless);
-  --components-button-negative-standard-hover: var(--fill-negative-transparent);
-  --components-button-negative-standard-icon: var(--text-lightalt);
-  --components-button-negative-standard-icon-active: var(--shape-dark);
-  --components-button-negative-standard-text: var(--text-lightalt);
-  --components-button-negative-standard-text-active: var(--text-dark);
-  --components-button-primary-contrast-active: var(--fill-primary-active-contrast);
-  --components-button-primary-contrast-default: var(--fill-primary-default-contrast);
-  --components-button-primary-contrast-hover: var(--fill-primary-hover-contrast);
-  --components-button-primary-contrast-icon: var(--shape-dark);
-  --components-button-primary-contrast-text: var(--text-dark);
-  --components-button-primary-standard-active: var(--fill-primary-active-contrast);
-  --components-button-primary-standard-default: var(--fill-primary-default-contrast);
-  --components-button-primary-standard-hover: var(--fill-primary-hover-contrast);
-  --components-button-primary-standard-icon: var(--shape-dark);
-  --components-button-primary-standard-text: var(--text-dark);
-  --components-button-secondary-contrast-active: var(--fill-secondary-active-contrast);
-  --components-button-secondary-contrast-border: var(--stroke-subdued);
-  --components-button-secondary-contrast-border-active: var(--stroke-colorless);
-  --components-button-secondary-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-secondary-contrast-hover: var(--fill-secondary-hover-contrast);
-  --components-button-secondary-contrast-icon: var(--shape-lightalt);
-  --components-button-secondary-contrast-icon-active: var(--shape-dark);
-  --components-button-secondary-contrast-text: var(--text-lightalt);
-  --components-button-secondary-contrast-text-active: var(--text-dark);
-  --components-button-secondary-standard-active: var(--fill-secondary-active-contrast);
-  --components-button-secondary-standard-border: var(--stroke-subdued);
-  --components-button-secondary-standard-border-active: var(--stroke-colorless);
-  --components-button-secondary-standard-default: var(--fill-background-standard-colorless);
-  --components-button-secondary-standard-hover: var(--fill-secondary-hover-contrast);
-  --components-button-secondary-standard-icon: var(--shape-lightalt);
-  --components-button-secondary-standard-icon-active: var(--shape-dark);
-  --components-button-secondary-standard-text: var(--text-lightalt);
-  --components-button-secondary-standard-text-active: var(--text-dark);
-  --components-button-squaresecondary-contrast-active: var(--fill-secondary-active-contrast);
-  --components-button-squaresecondary-contrast-border: var(--stroke-subdued);
-  --components-button-squaresecondary-contrast-border-active: var(--stroke-colorless);
-  --components-button-squaresecondary-contrast-default: var(--fill-background-standard-colorless);
-  --components-button-squaresecondary-contrast-hover: var(--fill-secondary-hover-contrast);
-  --components-button-squaresecondary-contrast-icon-active: var(--shape-dark);
-  --components-button-squaresecondary-contrast-icon-default: var(--shape-lightalt);
-  --components-button-squaresecondary-contrast-icon-hover: var(--shape-lightalt);
-  --components-button-squaresecondary-contrast-label: var(--text-lightalt);
-  --components-button-squaresecondary-standard-active: var(--fill-secondary-active-contrast);
-  --components-button-squaresecondary-standard-border: var(--stroke-subdued);
-  --components-button-squaresecondary-standard-border-active: var(--stroke-colorless);
-  --components-button-squaresecondary-standard-default: var(--fill-background-standard-colorless);
-  --components-button-squaresecondary-standard-hover: var(--fill-secondary-hover-contrast);
-  --components-button-squaresecondary-standard-icon: var(--shape-lightalt);
-  --components-button-squaresecondary-standard-icon-active: var(--shape-dark);
-  --components-button-squaresecondary-standard-text: var(--text-lightalt);
-  --components-button-squaresuccess-contrast-active: var(--fill-success-contrast);
-  --components-button-squaresuccess-contrast-border: var(--stroke-colorless);
-  --components-button-squaresuccess-contrast-default: var(--fill-success-contrast);
-  --components-button-squaresuccess-contrast-hover: var(--fill-success-tint);
-  --components-button-squaresuccess-contrast-icon: var(--shape-dark);
-  --components-button-squaresuccess-contrast-label: var(--text-lightalt);
-  --components-button-squaresuccess-standard-active: var(--fill-success-subdued);
-  --components-button-squaresuccess-standard-border: var(--stroke-colorless);
-  --components-button-squaresuccess-standard-default: var(--fill-success-contrast);
-  --components-button-squaresuccess-standard-hover: var(--fill-success-tint);
-  --components-button-squaresuccess-standard-icon: var(--shape-dark);
-  --components-button-squaresuccess-standard-label: var(--text-lightalt);
-  --components-button-success-contrast-active: var(--fill-success-subdued);
-  --components-button-success-contrast-border: var(--stroke-colorless);
-  --components-button-success-contrast-default: var(--fill-success-contrast);
-  --components-button-success-contrast-hover: var(--fill-success-tint);
-  --components-button-success-contrast-icon: var(--shape-dark);
-  --components-button-success-contrast-text: var(--text-dark);
-  --components-button-success-standard-active: var(--fill-success-subdued);
-  --components-button-success-standard-border: var(--stroke-colorless);
-  --components-button-success-standard-default: var(--fill-success-contrast);
-  --components-button-success-standard-hover: var(--fill-success-tint);
-  --components-button-success-standard-icon: var(--shape-dark);
-  --components-button-success-standard-text: var(--text-dark);
-}
-
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-[data-color-mode=light],
-:root {
-  --basecolors-frame-contrast: var(--fill-background-contrast-light);
-  --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
-  --basecolors-frame-default: var(--fill-background-standard-light);
-  --basecolors-frame-elevated: var(--fill-background-standard-light);
-  --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
-  --basecolors-frame-subdued: var(--fill-background-subdued-light);
-  --basecolors-frame-tint: var(--fill-background-tint-light);
-  --basecolors-shape-accent: var(--shape-accent);
-  --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
-  --basecolors-shape-bicycle-default: var(--standard-bicycle);
-  --basecolors-shape-bus-contrast: var(--contrast-bus);
-  --basecolors-shape-bus-default: var(--standard-bus);
-  --basecolors-shape-cableway-contrast: var(--contrast-cableway);
-  --basecolors-shape-cableway-default: var(--standard-cableway);
-  --basecolors-shape-disabled: var(--shape-neutral);
-  --basecolors-shape-disabledalt: var(--shape-neutralalt);
-  --basecolors-shape-ferry-contrast: var(--contrast-ferry);
-  --basecolors-shape-ferry-default: var(--standard-ferry);
-  --basecolors-shape-funicular-contrast: var(--contrast-funicular);
-  --basecolors-shape-funicular-default: var(--standard-funicular);
-  --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
-  --basecolors-shape-helicopter-default: var(--standard-helicopter);
-  --basecolors-shape-highlight: var(--stroke-highlight);
-  --basecolors-shape-light: var(--shape-light);
-  --basecolors-shape-mask: var(--shape-light);
-  --basecolors-shape-maskalt: var(--shape-light);
-  --basecolors-shape-metro-contrast: var(--contrast-metro);
-  --basecolors-shape-metro-default: var(--standard-metro);
-  --basecolors-shape-mobility-contrast: var(--contrast-mobility);
-  --basecolors-shape-mobility-default: var(--standard-mobility);
-  --basecolors-shape-plane-contrast: var(--contrast-plane);
-  --basecolors-shape-plane-default: var(--standard-plane);
-  --basecolors-shape-subdued: var(--shape-subdued);
-  --basecolors-shape-subduedalt: var(--shape-subduedalt);
-  --basecolors-shape-taxi-contrast: var(--contrast-taxi);
-  --basecolors-shape-taxi-default: var(--standard-taxi);
-  --basecolors-shape-train-contrast: var(--contrast-train);
-  --basecolors-shape-train-default: var(--standard-train);
-  --basecolors-shape-tram-contrast: var(--contrast-tram);
-  --basecolors-shape-tram-default: var(--standard-tram);
-  --basecolors-shape-walk-contrast: var(--contrast-walk);
-  --basecolors-shape-walk-default: var(--standard-walk);
-  --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
-  --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
-  --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
-  --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
-  --basecolors-stroke-contrast: var(--stroke-contrast);
-  --basecolors-stroke-default: var(--stroke-accent);
-  --basecolors-stroke-disabled: var(--stroke-neutralalt);
-  --basecolors-stroke-focus-contrast: var(--stroke-contrast);
-  --basecolors-stroke-focus-standard: var(--stroke-accent);
-  --basecolors-stroke-highlight: var(--stroke-highlight);
-  --basecolors-stroke-light: var(--stroke-light);
-  --basecolors-stroke-subdued: var(--stroke-subdued);
-  --basecolors-stroke-subduedalt: var(--stroke-neutral);
-  --basecolors-text-accent: var(--text-accent);
-  --basecolors-text-disabled: var(--text-neutral);
-  --basecolors-text-disabledalt: var(--text-neutralalt);
-  --basecolors-text-highlight: var(--stroke-highlight);
-  --basecolors-text-light: var(--text-light);
-  --basecolors-text-subdued: var(--text-subdued);
-  --basecolors-text-subduedalt: var(--text-subduedalt);
-}
-
-[data-color-mode=dark] {
-  --basecolors-frame-contrast: var(--fill-background-contrast-dark);
-  --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
-  --basecolors-frame-default: var(--fill-background-standard-dark);
-  --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
-  --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
-  --basecolors-frame-subdued: var(--fill-background-subdued-dark);
-  --basecolors-frame-tint: var(--fill-background-tint-dark);
-  --basecolors-shape-accent: var(--shape-lightalt);
-  --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
-  --basecolors-shape-bicycle-default: var(--dark-bicycle);
-  --basecolors-shape-bus-contrast: var(--dark-bus);
-  --basecolors-shape-bus-default: var(--dark-bus);
-  --basecolors-shape-cableway-contrast: var(--dark-cableway);
-  --basecolors-shape-cableway-default: var(--dark-cableway);
-  --basecolors-shape-disabled: var(--shape-neutralalt);
-  --basecolors-shape-disabledalt: var(--shape-darkalt);
-  --basecolors-shape-ferry-contrast: var(--dark-ferry);
-  --basecolors-shape-ferry-default: var(--dark-ferry);
-  --basecolors-shape-funicular-contrast: var(--dark-funicular);
-  --basecolors-shape-funicular-default: var(--dark-funicular);
-  --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
-  --basecolors-shape-helicopter-default: var(--dark-helicopter);
-  --basecolors-shape-highlight: var(--stroke-highlightalt);
-  --basecolors-shape-light: var(--shape-lightalt);
-  --basecolors-shape-mask: var(--fill-background-subdued-dark);
-  --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
-  --basecolors-shape-metro-contrast: var(--dark-metro);
-  --basecolors-shape-metro-default: var(--dark-metro);
-  --basecolors-shape-mobility-contrast: var(--dark-mobility);
-  --basecolors-shape-mobility-default: var(--dark-mobility);
-  --basecolors-shape-plane-contrast: var(--dark-plane);
-  --basecolors-shape-plane-default: var(--dark-plane);
-  --basecolors-shape-subdued: var(--shape-darkalt);
-  --basecolors-shape-subduedalt: var(--shape-darkalt);
-  --basecolors-shape-taxi-contrast: var(--dark-taxi);
-  --basecolors-shape-taxi-default: var(--dark-taxi);
-  --basecolors-shape-train-contrast: var(--dark-train);
-  --basecolors-shape-train-default: var(--dark-train);
-  --basecolors-shape-tram-contrast: var(--dark-tram);
-  --basecolors-shape-tram-default: var(--dark-tram);
-  --basecolors-shape-walk-contrast: var(--dark-walk);
-  --basecolors-shape-walk-default: var(--dark-walk);
-  --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
-  --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
-  --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
-  --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
-  --basecolors-stroke-contrast: var(--stroke-contrast);
-  --basecolors-stroke-default: var(--stroke-dark);
-  --basecolors-stroke-disabled: var(--stroke-neutral);
-  --basecolors-stroke-focus-contrast: var(--stroke-contrast);
-  --basecolors-stroke-focus-standard: var(--stroke-contrast);
-  --basecolors-stroke-highlight: var(--stroke-highlightalt);
-  --basecolors-stroke-light: var(--stroke-dark);
-  --basecolors-stroke-subdued: var(--stroke-darkalt);
-  --basecolors-stroke-subduedalt: var(--stroke-darkalt);
-  --basecolors-text-accent: var(--text-lightalt);
-  --basecolors-text-disabled: var(--text-neutralalt);
-  --basecolors-text-disabledalt: var(--text-neutralalt);
-  --basecolors-text-highlight: var(--stroke-highlightalt);
-  --basecolors-text-light: var(--text-lightalt);
-  --basecolors-text-subdued: var(--text-darkalt);
-  --basecolors-text-subduedalt: var(--text-darkalt);
-}
-
-:root {
-  --eds-button: 1;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/button",
-  "version": "3.2.14",
+  "version": "3.2.16",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/button.esm.js",
@@ -27,10 +27,10 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/loader": "^0.4.58",
-    "@entur/tokens": "^3.13.2",
-    "@entur/utils": "^0.10.0",
+    "@entur/loader": "^0.4.60",
+    "@entur/tokens": "^3.13.3",
+    "@entur/utils": "^0.11.0",
     "classnames": "^2.3.1"
   },
-  "gitHead": "427e66ba68d33b8d1839714a48517b52afd5c2db"
+  "gitHead": "a6bd766dd2c7bf84eb3a5bcc8cfdbabca765e28e"
 }