@equinor/eds-core-react 2.3.5 → 2.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +143 -277
- package/build/index.min.css +1 -5
- package/dist/eds-core-react.cjs +209 -25
- package/dist/esm/components/Autocomplete/AddNewOption.js +1 -1
- package/dist/esm/components/Autocomplete/Autocomplete.js +1 -1
- package/dist/esm/components/Autocomplete/Option.js +11 -2
- package/dist/esm/components/Autocomplete/SelectAllOption.js +1 -1
- package/dist/esm/components/Autocomplete/useAutocomplete.js +13 -2
- package/dist/esm/components/Banner/Banner.tokens.js +2 -10
- package/dist/esm/components/Chip/Chip.js +1 -1
- package/dist/esm/components/Chip/Chip.tokens.js +0 -2
- package/dist/esm/components/Datepicker/DatePicker.js +4 -1
- package/dist/esm/components/Datepicker/DateRangePicker.js +4 -1
- package/dist/esm/components/Datepicker/fields/DateFieldSegments.js +11 -2
- package/dist/esm/components/Datepicker/utils/get-calendar-date.js +1 -1
- package/dist/esm/components/Datepicker/utils/getLocalizedValidationErrors.js +164 -0
- package/dist/esm/components/EdsProvider/eds.context.js +1 -1
- package/dist/esm/components/Menu/Menu.context.js +1 -1
- package/dist/esm/components/SideBar/SideBar.context.js +1 -1
- package/dist/esm/components/Table/DataCell/DataCell.js +1 -1
- package/dist/esm/components/Table/FooterCell/FooterCell.js +1 -1
- package/dist/esm/components/Table/HeaderCell/HeaderCell.js +1 -1
- package/dist/esm/components/Typography/Typography.js +1 -1
- package/dist/esm/index.js +64 -64
- package/dist/esm-next/components/next/Button/Button.js +3 -5
- package/dist/esm-next/components/next/Input/Input.js +6 -11
- package/dist/esm-next/components/next/TextField/TextField.js +7 -2
- package/dist/esm-next/index.next.js +4 -4
- package/dist/index.next.cjs +15 -18
- package/dist/types/components/Autocomplete/Autocomplete.d.ts +1 -1
- package/dist/types/components/Autocomplete/AutocompleteContext.d.ts +2 -2
- package/dist/types/components/Autocomplete/useAutocomplete.d.ts +3 -2
- package/dist/types/components/Datepicker/DateRangePicker.d.ts +1 -1
- package/dist/types/components/Datepicker/utils/getLocalizedValidationErrors.d.ts +9 -0
- package/dist/types/components/SideBar/SideBarButton/index.d.ts +1 -1
- package/dist/types/components/next/Input/Input.types.d.ts +6 -4
- package/dist/types/components/next/TextField/TextField.d.ts +1 -0
- package/package.json +33 -33
package/build/index.css
CHANGED
|
@@ -2,15 +2,27 @@
|
|
|
2
2
|
@layer eds-components;
|
|
3
3
|
/* EDS 2.0 Next Components - CSS */
|
|
4
4
|
/* Define layer order - eds-components has lowest priority for easy user overrides */
|
|
5
|
+
/*
|
|
6
|
+
* Font loading:
|
|
7
|
+
* Next components use two font families:
|
|
8
|
+
* - "Inter" for UI text (buttons, inputs, labels, etc.)
|
|
9
|
+
* - "Equinor" for headings
|
|
10
|
+
*
|
|
11
|
+
* Load both fonts via the EDS variable font stylesheet:
|
|
12
|
+
* <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
|
|
13
|
+
*
|
|
14
|
+
* Note: The older "equinor-font.css" only includes the Equinor font.
|
|
15
|
+
* If you only load that, UI components will fall back to a generic sans-serif.
|
|
16
|
+
*/
|
|
5
17
|
:root,[data-color-scheme=light]{color-scheme:light}
|
|
6
18
|
[data-color-scheme=dark]{color-scheme:dark}
|
|
7
|
-
:root{--eds-color-bg-floating:light-dark(#fff,#202223);--eds-color-bg-backdrop:light-dark(#aeaeae,#738696);--eds-color-bg-input:light-dark(#f5f5f5,#0b0b0b);--eds-color-border-focus:light-dark(#6fb6e9,#2d8bc5);--eds-color-text-link:light-dark(#0070a9,#5abbfb);--eds-color-accent-1:light-dark(#eaf8fa,#0a0b0b);--eds-color-accent-2:light-dark(#f6ffff,#1e2323);--eds-color-accent-3:light-dark(#cfe7e9,#3c6266);--eds-color-accent-4:light-dark(#bbdbdf,#3e7378);--eds-color-accent-5:light-dark(#a2cdd2,#41878e);--eds-color-accent-6:light-dark(#bbdbdf,#3c6266);--eds-color-accent-7:light-dark(#7cbac1,#439199);--eds-color-accent-8:light-dark(#21767e,#6ec0c9);--eds-color-accent-9:light-dark(#206f77,#8cd2da);--eds-color-accent-10:light-dark(#205c62,#ace3e9);--eds-color-accent-11:light-dark(#20565c,#c7f1f6);--eds-color-accent-12:light-dark(#1f6369,#bcebf1);--eds-color-accent-13:light-dark(#141f20,#e6ffff);--eds-color-accent-14:light-dark(#cae4e7,#2c3839);--eds-color-accent-15:light-dark(#fff,#030303);--eds-color-neutral-1:light-dark(#f5f5f5,#0b0b0b);--eds-color-neutral-2:light-dark(#fff,#202223);--eds-color-neutral-3:light-dark(#e1e1e1,#525c65);--eds-color-neutral-4:light-dark(#d4d4d4,#5d6b76);--eds-color-neutral-5:light-dark(#c4c4c4,#6b7d8b);--eds-color-neutral-6:light-dark(#d4d4d4,#525c65);--eds-color-neutral-7:light-dark(#aeaeae,#738696);--eds-color-neutral-8:light-dark(#696969,#9fb4c6);--eds-color-neutral-9:light-dark(#636363,#b4c7d7);--eds-color-neutral-10:light-dark(#525252,#cadae7);--eds-color-neutral-11:light-dark(#4d4d4d,#deeaf4);--eds-color-neutral-12:light-dark(#585858,#d6e3ee);--eds-color-neutral-13:light-dark(#1d1d1d,#f5fdff);--eds-color-neutral-14:light-dark(#dedede,#333639);--eds-color-neutral-15:light-dark(#fff,#030303);--eds-color-info-1:light-dark(#e7f8ff,#0a0b0c);--eds-color-info-2:light-dark(#f4ffff,#1d2226);--eds-color-info-3:light-dark(#cae6fa,#33607e);--eds-color-info-4:light-dark(#b5daf5,#316f98);--eds-color-info-5:light-dark(#99cbf0,#2e82b7);--eds-color-info-6:light-dark(#b5daf5,#33607e);--eds-color-info-7:light-dark(#6fb6e9,#2d8bc5);--eds-color-info-8:light-dark(#0070a9,#5abbfb);--eds-color-info-9:light-dark(#006aa0,#7dceff);--eds-color-info-10:light-dark(#085883,#a2e0ff);--eds-color-info-11:light-dark(#0e5279,#c4eeff);--eds-color-info-12:light-dark(#015e8d,#b7e8ff);--eds-color-info-13:light-dark(#121e27,#ecffff);--eds-color-info-14:light-dark(#c5e3f9,#2a3741);--eds-color-info-15:light-dark(#fff,#030304);--eds-color-success-1:light-dark(#eafbe8,#0a0c0a);--eds-color-success-2:light-dark(#f6fff5,#1e231e);--eds-color-success-3:light-dark(#cfeacc,#3c673a);--eds-color-success-4:light-dark(#bbe0b8,#3e793c);--eds-color-success-5:light-dark(#a2d49e,#418e3e);--eds-color-success-6:light-dark(#bbe0b8,#3c673a);--eds-color-success-7:light-dark(#7cc278,#439941);--eds-color-success-8:light-dark(#227e22,#6eca6a);--eds-color-success-9:light-dark(#207720,#8cdb87);--eds-color-success-10:light-dark(#20621f,#aceba8);--eds-color-success-11:light-dark(#215c1f,#c7f7c3);--eds-color-success-12:light-dark(#20691f,#bcf2b8);--eds-color-success-13:light-dark(#142114,#e6ffe3);--eds-color-success-14:light-dark(#cae8c7,#2c392b);--eds-color-success-15:light-dark(#fff,#030303);--eds-color-warning-1:light-dark(#fff1e2,#0c0b0a);--eds-color-warning-2:light-dark(#fffcf0,#27201b);--eds-color-warning-3:light-dark(#fbdac1,#7e4e25);--eds-color-warning-4:light-dark(#f6caaa,#97571b);--eds-color-warning-5:light-dark(#f0b689,#b46201);--eds-color-warning-6:light-dark(#f6caaa,#7e4e25);--eds-color-warning-7:light-dark(#e89959,#c36800);--eds-color-warning-8:light-dark(#a34e00,#f99539);--eds-color-warning-9:light-dark(#9b4900,#ffad63);--eds-color-warning-10:light-dark(#813e00,#ffc791);--eds-color-warning-11:light-dark(#773a00,#ffddb9);--eds-color-warning-12:light-dark(#8a4100,#ffd4aa);--eds-color-warning-13:light-dark(#27190e,#fff7e6);--eds-color-warning-14:light-dark(#fad6bc,#413226);--eds-color-warning-15:light-dark(#fff,#040303);--eds-color-danger-1:light-dark(#ffecea,#0d0a0a);--eds-color-danger-2:light-dark(#fff9f8,#2a1e1e);--eds-color-danger-3:light-dark(#ffd0ce,#923a3c);--eds-color-danger-4:light-dark(#ffbcba,#b03940);--eds-color-danger-5:light-dark(#ffa3a1,#d43745);--eds-color-danger-6:light-dark(#ffbcba,#923a3c);--eds-color-danger-7:light-dark(#ff7a7d,#e53748);--eds-color-danger-8:light-dark(#c6002d,#ff8082);--eds-color-danger-9:light-dark(#bc002a,#ffa3a1);--eds-color-danger-10:light-dark(#9a1026,#ffc1bf);--eds-color-danger-11:light-dark(#8e1525,#ffd9d7);--eds-color-danger-12:light-dark(#a50827,#ffd0ce);--eds-color-danger-13:light-dark(#2e1414,#fff5f4);--eds-color-danger-14:light-dark(#ffcbc9,#492d2c);--eds-color-danger-15:light-dark(#fff,#040303);--eds-color-bg-neutral-canvas:var(--eds-color-neutral-1);--eds-color-bg-neutral-surface:var(--eds-color-neutral-2);--eds-color-bg-neutral-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-neutral-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-neutral-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-neutral-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-neutral-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-neutral-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-accent-canvas:var(--eds-color-accent-1);--eds-color-bg-accent-surface:var(--eds-color-accent-2);--eds-color-bg-accent-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-accent-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-accent-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-accent-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-accent-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-accent-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-success-canvas:var(--eds-color-success-1);--eds-color-bg-success-surface:var(--eds-color-success-2);--eds-color-bg-success-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-success-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-success-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-success-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-success-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-success-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-info-canvas:var(--eds-color-info-1);--eds-color-bg-info-surface:var(--eds-color-info-2);--eds-color-bg-info-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-info-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-info-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-info-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-info-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-info-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-warning-canvas:var(--eds-color-warning-1);--eds-color-bg-warning-surface:var(--eds-color-warning-2);--eds-color-bg-warning-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-warning-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-warning-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-warning-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-warning-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-warning-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-danger-canvas:var(--eds-color-danger-1);--eds-color-bg-danger-surface:var(--eds-color-danger-2);--eds-color-bg-danger-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-danger-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-danger-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-danger-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-danger-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-danger-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-border-neutral-subtle:var(--eds-color-neutral-6);--eds-color-border-neutral-medium:var(--eds-color-neutral-7);--eds-color-border-neutral-strong:var(--eds-color-neutral-8);--eds-color-border-accent-subtle:var(--eds-color-accent-6);--eds-color-border-accent-medium:var(--eds-color-accent-7);--eds-color-border-accent-strong:var(--eds-color-accent-8);--eds-color-border-success-subtle:var(--eds-color-success-6);--eds-color-border-success-medium:var(--eds-color-success-7);--eds-color-border-success-strong:var(--eds-color-success-8);--eds-color-border-info-subtle:var(--eds-color-info-6);--eds-color-border-info-medium:var(--eds-color-info-7);--eds-color-border-info-strong:var(--eds-color-info-8);--eds-color-border-warning-subtle:var(--eds-color-warning-6);--eds-color-border-warning-medium:var(--eds-color-warning-7);--eds-color-border-warning-strong:var(--eds-color-warning-8);--eds-color-border-danger-subtle:var(--eds-color-danger-6);--eds-color-border-danger-medium:var(--eds-color-danger-7);--eds-color-border-danger-strong:var(--eds-color-danger-8);--eds-color-text-neutral-subtle:var(--eds-color-neutral-12);--eds-color-text-neutral-strong:var(--eds-color-neutral-13);--eds-color-text-neutral-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-neutral-strong-on-emphasis:var(--eds-color-neutral-15);--eds-color-text-accent-subtle:var(--eds-color-accent-12);--eds-color-text-accent-strong:var(--eds-color-accent-13);--eds-color-text-accent-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-accent-strong-on-emphasis:var(--eds-color-accent-15);--eds-color-text-success-subtle:var(--eds-color-success-12);--eds-color-text-success-strong:var(--eds-color-success-13);--eds-color-text-success-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-success-strong-on-emphasis:var(--eds-color-success-15);--eds-color-text-info-subtle:var(--eds-color-info-12);--eds-color-text-info-strong:var(--eds-color-info-13);--eds-color-text-info-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-info-strong-on-emphasis:var(--eds-color-info-15);--eds-color-text-warning-subtle:var(--eds-color-warning-12);--eds-color-text-warning-strong:var(--eds-color-warning-13);--eds-color-text-warning-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-warning-strong-on-emphasis:var(--eds-color-warning-15);--eds-color-text-danger-subtle:var(--eds-color-danger-12);--eds-color-text-danger-strong:var(--eds-color-danger-13);--eds-color-text-danger-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-danger-strong-on-emphasis:var(--eds-color-danger-15)}
|
|
8
|
-
:root,[data-color-appearance=neutral]{--eds-color-bg-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-canvas:var(--eds-color-neutral-1);--eds-color-bg-surface:var(--eds-color-neutral-2);--eds-color-border-subtle:var(--eds-color-neutral-6);--eds-color-border-medium:var(--eds-color-neutral-7);--eds-color-border-strong:var(--eds-color-neutral-8);--eds-color-text-subtle:var(--eds-color-neutral-12);--eds-color-text-strong:var(--eds-color-neutral-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-strong-on-emphasis:var(--eds-color-neutral-15)}
|
|
9
|
-
[data-color-appearance=accent]{--eds-color-bg-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-canvas:var(--eds-color-accent-1);--eds-color-bg-surface:var(--eds-color-accent-2);--eds-color-border-subtle:var(--eds-color-accent-6);--eds-color-border-medium:var(--eds-color-accent-7);--eds-color-border-strong:var(--eds-color-accent-8);--eds-color-text-subtle:var(--eds-color-accent-12);--eds-color-text-strong:var(--eds-color-accent-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-strong-on-emphasis:var(--eds-color-accent-15)}
|
|
10
|
-
[data-color-appearance=danger]{--eds-color-bg-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-bg-canvas:var(--eds-color-danger-1);--eds-color-bg-surface:var(--eds-color-danger-2);--eds-color-border-subtle:var(--eds-color-danger-6);--eds-color-border-medium:var(--eds-color-danger-7);--eds-color-border-strong:var(--eds-color-danger-8);--eds-color-text-subtle:var(--eds-color-danger-12);--eds-color-text-strong:var(--eds-color-danger-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-strong-on-emphasis:var(--eds-color-danger-15)}
|
|
11
|
-
[data-color-appearance=info]{--eds-color-bg-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-canvas:var(--eds-color-info-1);--eds-color-bg-surface:var(--eds-color-info-2);--eds-color-border-subtle:var(--eds-color-info-6);--eds-color-border-medium:var(--eds-color-info-7);--eds-color-border-strong:var(--eds-color-info-8);--eds-color-text-subtle:var(--eds-color-info-12);--eds-color-text-strong:var(--eds-color-info-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-strong-on-emphasis:var(--eds-color-info-15)}
|
|
12
|
-
[data-color-appearance=success]{--eds-color-bg-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-canvas:var(--eds-color-success-1);--eds-color-bg-surface:var(--eds-color-success-2);--eds-color-border-subtle:var(--eds-color-success-6);--eds-color-border-medium:var(--eds-color-success-7);--eds-color-border-strong:var(--eds-color-success-8);--eds-color-text-subtle:var(--eds-color-success-12);--eds-color-text-strong:var(--eds-color-success-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-strong-on-emphasis:var(--eds-color-success-15)}
|
|
13
|
-
[data-color-appearance=warning]{--eds-color-bg-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-canvas:var(--eds-color-warning-1);--eds-color-bg-surface:var(--eds-color-warning-2);--eds-color-border-subtle:var(--eds-color-warning-6);--eds-color-border-medium:var(--eds-color-warning-7);--eds-color-border-strong:var(--eds-color-warning-8);--eds-color-text-subtle:var(--eds-color-warning-12);--eds-color-text-strong:var(--eds-color-warning-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-strong-on-emphasis:var(--eds-color-warning-15)}
|
|
19
|
+
:root{--eds-color-bg-floating:light-dark(#fff,#202223);--eds-color-bg-backdrop:light-dark(#aeaeae,#738696);--eds-color-bg-input:light-dark(#f5f5f5,#0b0b0b);--eds-color-border-focus:light-dark(#6fb6e9,#2d8bc5);--eds-color-text-link:light-dark(#0070a9,#5abbfb);--eds-color-bg-disabled:light-dark(#e1e1e1,#525c65);--eds-color-border-disabled:light-dark(#aeaeae,#738696);--eds-color-text-disabled:light-dark(#aeaeae,#738696);--eds-color-accent-1:light-dark(#eaf8fa,#0a0b0b);--eds-color-accent-2:light-dark(#f6ffff,#1e2323);--eds-color-accent-3:light-dark(#cfe7e9,#3c6266);--eds-color-accent-4:light-dark(#bbdbdf,#3e7378);--eds-color-accent-5:light-dark(#a2cdd2,#41878e);--eds-color-accent-6:light-dark(#bbdbdf,#3c6266);--eds-color-accent-7:light-dark(#7cbac1,#439199);--eds-color-accent-8:light-dark(#21767e,#6ec0c9);--eds-color-accent-9:light-dark(#206f77,#8cd2da);--eds-color-accent-10:light-dark(#205c62,#ace3e9);--eds-color-accent-11:light-dark(#20565c,#c7f1f6);--eds-color-accent-12:light-dark(#1f6369,#bcebf1);--eds-color-accent-13:light-dark(#141f20,#e6ffff);--eds-color-accent-14:light-dark(#cae4e7,#2c3839);--eds-color-accent-15:light-dark(#fff,#030303);--eds-color-neutral-1:light-dark(#f5f5f5,#0b0b0b);--eds-color-neutral-2:light-dark(#fff,#202223);--eds-color-neutral-3:light-dark(#e1e1e1,#525c65);--eds-color-neutral-4:light-dark(#d4d4d4,#5d6b76);--eds-color-neutral-5:light-dark(#c4c4c4,#6b7d8b);--eds-color-neutral-6:light-dark(#d4d4d4,#525c65);--eds-color-neutral-7:light-dark(#aeaeae,#738696);--eds-color-neutral-8:light-dark(#696969,#9fb4c6);--eds-color-neutral-9:light-dark(#636363,#b4c7d7);--eds-color-neutral-10:light-dark(#525252,#cadae7);--eds-color-neutral-11:light-dark(#4d4d4d,#deeaf4);--eds-color-neutral-12:light-dark(#585858,#d6e3ee);--eds-color-neutral-13:light-dark(#1d1d1d,#f5fdff);--eds-color-neutral-14:light-dark(#dedede,#333639);--eds-color-neutral-15:light-dark(#fff,#030303);--eds-color-info-1:light-dark(#e7f8ff,#0a0b0c);--eds-color-info-2:light-dark(#f4ffff,#1d2226);--eds-color-info-3:light-dark(#cae6fa,#33607e);--eds-color-info-4:light-dark(#b5daf5,#316f98);--eds-color-info-5:light-dark(#99cbf0,#2e82b7);--eds-color-info-6:light-dark(#b5daf5,#33607e);--eds-color-info-7:light-dark(#6fb6e9,#2d8bc5);--eds-color-info-8:light-dark(#0070a9,#5abbfb);--eds-color-info-9:light-dark(#006aa0,#7dceff);--eds-color-info-10:light-dark(#085883,#a2e0ff);--eds-color-info-11:light-dark(#0e5279,#c4eeff);--eds-color-info-12:light-dark(#015e8d,#b7e8ff);--eds-color-info-13:light-dark(#121e27,#ecffff);--eds-color-info-14:light-dark(#c5e3f9,#2a3741);--eds-color-info-15:light-dark(#fff,#030304);--eds-color-success-1:light-dark(#eafbe8,#0a0c0a);--eds-color-success-2:light-dark(#f6fff5,#1e231e);--eds-color-success-3:light-dark(#cfeacc,#3c673a);--eds-color-success-4:light-dark(#bbe0b8,#3e793c);--eds-color-success-5:light-dark(#a2d49e,#418e3e);--eds-color-success-6:light-dark(#bbe0b8,#3c673a);--eds-color-success-7:light-dark(#7cc278,#439941);--eds-color-success-8:light-dark(#227e22,#6eca6a);--eds-color-success-9:light-dark(#207720,#8cdb87);--eds-color-success-10:light-dark(#20621f,#aceba8);--eds-color-success-11:light-dark(#215c1f,#c7f7c3);--eds-color-success-12:light-dark(#20691f,#bcf2b8);--eds-color-success-13:light-dark(#142114,#e6ffe3);--eds-color-success-14:light-dark(#cae8c7,#2c392b);--eds-color-success-15:light-dark(#fff,#030303);--eds-color-warning-1:light-dark(#fff1e2,#0c0b0a);--eds-color-warning-2:light-dark(#fffcf0,#27201b);--eds-color-warning-3:light-dark(#fbdac1,#7e4e25);--eds-color-warning-4:light-dark(#f6caaa,#97571b);--eds-color-warning-5:light-dark(#f0b689,#b46201);--eds-color-warning-6:light-dark(#f6caaa,#7e4e25);--eds-color-warning-7:light-dark(#e89959,#c36800);--eds-color-warning-8:light-dark(#a34e00,#f99539);--eds-color-warning-9:light-dark(#9b4900,#ffad63);--eds-color-warning-10:light-dark(#813e00,#ffc791);--eds-color-warning-11:light-dark(#773a00,#ffddb9);--eds-color-warning-12:light-dark(#8a4100,#ffd4aa);--eds-color-warning-13:light-dark(#27190e,#fff7e6);--eds-color-warning-14:light-dark(#fad6bc,#413226);--eds-color-warning-15:light-dark(#fff,#040303);--eds-color-danger-1:light-dark(#ffecea,#0d0a0a);--eds-color-danger-2:light-dark(#fff9f8,#2a1e1e);--eds-color-danger-3:light-dark(#ffd0ce,#923a3c);--eds-color-danger-4:light-dark(#ffbcba,#b03940);--eds-color-danger-5:light-dark(#ffa3a1,#d43745);--eds-color-danger-6:light-dark(#ffbcba,#923a3c);--eds-color-danger-7:light-dark(#ff7a7d,#e53748);--eds-color-danger-8:light-dark(#c6002d,#ff8082);--eds-color-danger-9:light-dark(#bc002a,#ffa3a1);--eds-color-danger-10:light-dark(#9a1026,#ffc1bf);--eds-color-danger-11:light-dark(#8e1525,#ffd9d7);--eds-color-danger-12:light-dark(#a50827,#ffd0ce);--eds-color-danger-13:light-dark(#2e1414,#fff5f4);--eds-color-danger-14:light-dark(#ffcbc9,#492d2c);--eds-color-danger-15:light-dark(#fff,#040303);--eds-color-bg-neutral-canvas:var(--eds-color-neutral-1);--eds-color-bg-neutral-surface:var(--eds-color-neutral-2);--eds-color-bg-neutral-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-neutral-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-neutral-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-neutral-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-neutral-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-neutral-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-accent-canvas:var(--eds-color-accent-1);--eds-color-bg-accent-surface:var(--eds-color-accent-2);--eds-color-bg-accent-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-accent-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-accent-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-accent-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-accent-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-accent-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-success-canvas:var(--eds-color-success-1);--eds-color-bg-success-surface:var(--eds-color-success-2);--eds-color-bg-success-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-success-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-success-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-success-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-success-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-success-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-info-canvas:var(--eds-color-info-1);--eds-color-bg-info-surface:var(--eds-color-info-2);--eds-color-bg-info-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-info-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-info-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-info-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-info-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-info-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-warning-canvas:var(--eds-color-warning-1);--eds-color-bg-warning-surface:var(--eds-color-warning-2);--eds-color-bg-warning-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-warning-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-warning-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-warning-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-warning-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-warning-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-danger-canvas:var(--eds-color-danger-1);--eds-color-bg-danger-surface:var(--eds-color-danger-2);--eds-color-bg-danger-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-danger-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-danger-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-danger-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-danger-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-danger-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-border-neutral-subtle:var(--eds-color-neutral-6);--eds-color-border-neutral-medium:var(--eds-color-neutral-7);--eds-color-border-neutral-strong:var(--eds-color-neutral-8);--eds-color-border-accent-subtle:var(--eds-color-accent-6);--eds-color-border-accent-medium:var(--eds-color-accent-7);--eds-color-border-accent-strong:var(--eds-color-accent-8);--eds-color-border-success-subtle:var(--eds-color-success-6);--eds-color-border-success-medium:var(--eds-color-success-7);--eds-color-border-success-strong:var(--eds-color-success-8);--eds-color-border-info-subtle:var(--eds-color-info-6);--eds-color-border-info-medium:var(--eds-color-info-7);--eds-color-border-info-strong:var(--eds-color-info-8);--eds-color-border-warning-subtle:var(--eds-color-warning-6);--eds-color-border-warning-medium:var(--eds-color-warning-7);--eds-color-border-warning-strong:var(--eds-color-warning-8);--eds-color-border-danger-subtle:var(--eds-color-danger-6);--eds-color-border-danger-medium:var(--eds-color-danger-7);--eds-color-border-danger-strong:var(--eds-color-danger-8);--eds-color-text-neutral-subtle:var(--eds-color-neutral-12);--eds-color-text-neutral-strong:var(--eds-color-neutral-13);--eds-color-text-neutral-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-neutral-strong-on-emphasis:var(--eds-color-neutral-15);--eds-color-text-accent-subtle:var(--eds-color-accent-12);--eds-color-text-accent-strong:var(--eds-color-accent-13);--eds-color-text-accent-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-accent-strong-on-emphasis:var(--eds-color-accent-15);--eds-color-text-success-subtle:var(--eds-color-success-12);--eds-color-text-success-strong:var(--eds-color-success-13);--eds-color-text-success-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-success-strong-on-emphasis:var(--eds-color-success-15);--eds-color-text-info-subtle:var(--eds-color-info-12);--eds-color-text-info-strong:var(--eds-color-info-13);--eds-color-text-info-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-info-strong-on-emphasis:var(--eds-color-info-15);--eds-color-text-warning-subtle:var(--eds-color-warning-12);--eds-color-text-warning-strong:var(--eds-color-warning-13);--eds-color-text-warning-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-warning-strong-on-emphasis:var(--eds-color-warning-15);--eds-color-text-danger-subtle:var(--eds-color-danger-12);--eds-color-text-danger-strong:var(--eds-color-danger-13);--eds-color-text-danger-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-danger-strong-on-emphasis:var(--eds-color-danger-15)}
|
|
20
|
+
:root,[data-color-appearance=neutral]{--eds-color-bg-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-neutral-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-neutral-3);--eds-color-bg-canvas:var(--eds-color-neutral-1);--eds-color-bg-surface:var(--eds-color-neutral-2);--eds-color-border-subtle:var(--eds-color-neutral-6);--eds-color-border-medium:var(--eds-color-neutral-7);--eds-color-border-strong:var(--eds-color-neutral-8);--eds-color-border-disabled:var(--eds-color-neutral-7);--eds-color-text-subtle:var(--eds-color-neutral-12);--eds-color-text-strong:var(--eds-color-neutral-13);--eds-color-text-disabled:var(--eds-color-neutral-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-strong-on-emphasis:var(--eds-color-neutral-15)}
|
|
21
|
+
[data-color-appearance=accent]{--eds-color-bg-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-accent-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-accent-3);--eds-color-bg-canvas:var(--eds-color-accent-1);--eds-color-bg-surface:var(--eds-color-accent-2);--eds-color-border-subtle:var(--eds-color-accent-6);--eds-color-border-medium:var(--eds-color-accent-7);--eds-color-border-strong:var(--eds-color-accent-8);--eds-color-border-disabled:var(--eds-color-accent-7);--eds-color-text-subtle:var(--eds-color-accent-12);--eds-color-text-strong:var(--eds-color-accent-13);--eds-color-text-disabled:var(--eds-color-accent-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-strong-on-emphasis:var(--eds-color-accent-15)}
|
|
22
|
+
[data-color-appearance=danger]{--eds-color-bg-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-danger-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-danger-3);--eds-color-bg-canvas:var(--eds-color-danger-1);--eds-color-bg-surface:var(--eds-color-danger-2);--eds-color-border-subtle:var(--eds-color-danger-6);--eds-color-border-medium:var(--eds-color-danger-7);--eds-color-border-strong:var(--eds-color-danger-8);--eds-color-border-disabled:var(--eds-color-danger-7);--eds-color-text-subtle:var(--eds-color-danger-12);--eds-color-text-strong:var(--eds-color-danger-13);--eds-color-text-disabled:var(--eds-color-danger-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-strong-on-emphasis:var(--eds-color-danger-15)}
|
|
23
|
+
[data-color-appearance=info]{--eds-color-bg-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-info-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-info-3);--eds-color-bg-canvas:var(--eds-color-info-1);--eds-color-bg-surface:var(--eds-color-info-2);--eds-color-border-subtle:var(--eds-color-info-6);--eds-color-border-medium:var(--eds-color-info-7);--eds-color-border-strong:var(--eds-color-info-8);--eds-color-border-disabled:var(--eds-color-info-7);--eds-color-text-subtle:var(--eds-color-info-12);--eds-color-text-strong:var(--eds-color-info-13);--eds-color-text-disabled:var(--eds-color-info-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-strong-on-emphasis:var(--eds-color-info-15)}
|
|
24
|
+
[data-color-appearance=success]{--eds-color-bg-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-success-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-success-3);--eds-color-bg-canvas:var(--eds-color-success-1);--eds-color-bg-surface:var(--eds-color-success-2);--eds-color-border-subtle:var(--eds-color-success-6);--eds-color-border-medium:var(--eds-color-success-7);--eds-color-border-strong:var(--eds-color-success-8);--eds-color-border-disabled:var(--eds-color-success-7);--eds-color-text-subtle:var(--eds-color-success-12);--eds-color-text-strong:var(--eds-color-success-13);--eds-color-text-disabled:var(--eds-color-success-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-strong-on-emphasis:var(--eds-color-success-15)}
|
|
25
|
+
[data-color-appearance=warning]{--eds-color-bg-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-warning-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-warning-3);--eds-color-bg-canvas:var(--eds-color-warning-1);--eds-color-bg-surface:var(--eds-color-warning-2);--eds-color-border-subtle:var(--eds-color-warning-6);--eds-color-border-medium:var(--eds-color-warning-7);--eds-color-border-strong:var(--eds-color-warning-8);--eds-color-border-disabled:var(--eds-color-warning-7);--eds-color-text-subtle:var(--eds-color-warning-12);--eds-color-text-strong:var(--eds-color-warning-13);--eds-color-text-disabled:var(--eds-color-warning-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-strong-on-emphasis:var(--eds-color-warning-15)}
|
|
14
26
|
:root,[data-density=spacious]{--eds-sizing-icon-xs:1rem;--eds-sizing-icon-sm:1.125rem;--eds-sizing-icon-md:1.25rem;--eds-sizing-icon-lg:1.5rem;--eds-sizing-icon-xl:1.75rem;--eds-sizing-icon-2xl:2rem;--eds-sizing-icon-3xl:2.313rem;--eds-sizing-icon-4xl:2.625rem;--eds-sizing-icon-5xl:3rem;--eds-sizing-icon-6xl:3.5rem;--eds-sizing-selectable-xs:1.25rem;--eds-sizing-selectable-sm:1.5rem;--eds-sizing-selectable-md:2.25rem;--eds-sizing-selectable-lg:2.75rem;--eds-sizing-selectable-xl:3.25rem;--eds-sizing-selectable-2xl:3.75rem;--eds-sizing-stroke-thin:.063rem;--eds-sizing-stroke-thick:.125rem;--eds-sizing-stroke-none:0rem;--eds-spacing-icon-xs-gap-horizontal:.406rem;--eds-spacing-icon-xs-gap-vertical:.406rem;--eds-spacing-icon-sm-gap-horizontal:.469rem;--eds-spacing-icon-sm-gap-vertical:.469rem;--eds-spacing-icon-md-gap-horizontal:.531rem;--eds-spacing-icon-md-gap-vertical:.531rem;--eds-spacing-icon-lg-gap-horizontal:.625rem;--eds-spacing-icon-lg-gap-vertical:.625rem;--eds-spacing-icon-xl-gap-horizontal:.719rem;--eds-spacing-icon-xl-gap-vertical:.719rem;--eds-spacing-icon-2xl-gap-horizontal:.813rem;--eds-spacing-icon-2xl-gap-vertical:.813rem;--eds-spacing-icon-3xl-gap-horizontal:.938rem;--eds-spacing-icon-3xl-gap-vertical:.938rem;--eds-spacing-icon-4xl-gap-horizontal:1.094rem;--eds-spacing-icon-4xl-gap-vertical:1.094rem;--eds-spacing-icon-5xl-gap-horizontal:1.25rem;--eds-spacing-icon-5xl-gap-vertical:1.25rem;--eds-spacing-icon-6xl-gap-horizontal:1.438rem;--eds-spacing-icon-6xl-gap-vertical:1.438rem;--eds-spacing-border-radius-rounded:.25rem;--eds-spacing-border-radius-pill:62.5rem;--eds-spacing-border-radius-none:0rem;--eds-spacing-inset-xs-horizontal:.5rem;--eds-spacing-inset-xs-vertical-squished:.375rem;--eds-spacing-inset-xs-vertical-squared:.5rem;--eds-spacing-inset-xs-vertical-stretched:.75rem;--eds-spacing-inset-sm-horizontal:.75rem;--eds-spacing-inset-sm-vertical-squished:.5rem;--eds-spacing-inset-sm-vertical-squared:.75rem;--eds-spacing-inset-sm-vertical-stretched:1rem;--eds-spacing-inset-md-horizontal:1rem;--eds-spacing-inset-md-vertical-squished:.75rem;--eds-spacing-inset-md-vertical-squared:1rem;--eds-spacing-inset-md-vertical-stretched:1.25rem;--eds-spacing-inset-lg-horizontal:1.25rem;--eds-spacing-inset-lg-vertical-squished:1rem;--eds-spacing-inset-lg-vertical-squared:1.25rem;--eds-spacing-inset-lg-vertical-stretched:1.5rem;--eds-spacing-inset-xl-horizontal:1.5rem;--eds-spacing-inset-xl-vertical-squished:1.25rem;--eds-spacing-inset-xl-vertical-squared:1.5rem;--eds-spacing-inset-xl-vertical-stretched:1.75rem;--eds-spacing-horizontal-4xs:.125rem;--eds-spacing-horizontal-3xs:.25rem;--eds-spacing-horizontal-2xs:.375rem;--eds-spacing-horizontal-xs:.5rem;--eds-spacing-horizontal-sm:.75rem;--eds-spacing-horizontal-md:1rem;--eds-spacing-horizontal-lg:1.25rem;--eds-spacing-horizontal-xl:1.5rem;--eds-spacing-horizontal-2xl:1.75rem;--eds-spacing-horizontal-3xl:2rem;--eds-spacing-vertical-4xs:.125rem;--eds-spacing-vertical-3xs:.25rem;--eds-spacing-vertical-2xs:.375rem;--eds-spacing-vertical-xs:.5rem;--eds-spacing-vertical-sm:.75rem;--eds-spacing-vertical-md:1rem;--eds-spacing-vertical-lg:1.25rem;--eds-spacing-vertical-xl:1.5rem;--eds-spacing-vertical-2xl:1.75rem;--eds-spacing-vertical-3xl:2rem;--eds-typography-ui-body-xs-font-size:.656rem;--eds-typography-ui-body-xs-tracking-tight:-1.15px;--eds-typography-ui-body-xs-tracking-normal:0px;--eds-typography-ui-body-xs-tracking-wide:1.15px;--eds-typography-ui-body-xs-font-weight-lighter:300;--eds-typography-ui-body-xs-font-weight-normal:400;--eds-typography-ui-body-xs-font-weight-bolder:500;--eds-typography-ui-body-xs-line-height-default:1rem;--eds-typography-ui-body-xs-line-height-squished:.75rem;--eds-typography-ui-body-sm-font-size:.75rem;--eds-typography-ui-body-sm-tracking-tight:-1.32px;--eds-typography-ui-body-sm-tracking-normal:0px;--eds-typography-ui-body-sm-tracking-wide:1.32px;--eds-typography-ui-body-sm-font-weight-lighter:300;--eds-typography-ui-body-sm-font-weight-normal:400;--eds-typography-ui-body-sm-font-weight-bolder:500;--eds-typography-ui-body-sm-line-height-default:1rem;--eds-typography-ui-body-sm-line-height-squished:.75rem;--eds-typography-ui-body-font-family:"Inter";--eds-typography-ui-body-md-font-size:.875rem;--eds-typography-ui-body-md-tracking-tight:-1.54px;--eds-typography-ui-body-md-tracking-normal:0px;--eds-typography-ui-body-md-tracking-wide:1.54px;--eds-typography-ui-body-md-font-weight-lighter:300;--eds-typography-ui-body-md-font-weight-normal:400;--eds-typography-ui-body-md-font-weight-bolder:500;--eds-typography-ui-body-md-line-height-default:1.25rem;--eds-typography-ui-body-md-line-height-squished:1rem;--eds-typography-ui-body-lg-font-size:1rem;--eds-typography-ui-body-lg-tracking-tight:-1.76px;--eds-typography-ui-body-lg-tracking-normal:0px;--eds-typography-ui-body-lg-tracking-wide:1.76px;--eds-typography-ui-body-lg-font-weight-lighter:300;--eds-typography-ui-body-lg-font-weight-normal:400;--eds-typography-ui-body-lg-font-weight-bolder:500;--eds-typography-ui-body-lg-line-height-default:1.5rem;--eds-typography-ui-body-lg-line-height-squished:1.25rem;--eds-typography-ui-body-xl-font-size:1.156rem;--eds-typography-ui-body-xl-tracking-tight:-1.76px;--eds-typography-ui-body-xl-tracking-normal:0px;--eds-typography-ui-body-xl-tracking-wide:2.035px;--eds-typography-ui-body-xl-font-weight-lighter:300;--eds-typography-ui-body-xl-font-weight-normal:400;--eds-typography-ui-body-xl-font-weight-bolder:500;--eds-typography-ui-body-xl-line-height-default:1.5rem;--eds-typography-ui-body-xl-line-height-squished:1.25rem;--eds-typography-ui-body-2xl-font-size:1.313rem;--eds-typography-ui-body-2xl-tracking-tight:-2.31px;--eds-typography-ui-body-2xl-tracking-normal:0px;--eds-typography-ui-body-2xl-tracking-wide:2.31px;--eds-typography-ui-body-2xl-font-weight-lighter:300;--eds-typography-ui-body-2xl-font-weight-normal:400;--eds-typography-ui-body-2xl-font-weight-bolder:500;--eds-typography-ui-body-2xl-line-height-default:1.75rem;--eds-typography-ui-body-2xl-line-height-squished:1.5rem;--eds-typography-ui-body-3xl-font-size:1.531rem;--eds-typography-ui-body-3xl-tracking-tight:-2.695px;--eds-typography-ui-body-3xl-tracking-normal:0px;--eds-typography-ui-body-3xl-tracking-wide:2.695px;--eds-typography-ui-body-3xl-font-weight-lighter:300;--eds-typography-ui-body-3xl-font-weight-normal:400;--eds-typography-ui-body-3xl-font-weight-bolder:500;--eds-typography-ui-body-3xl-line-height-default:2rem;--eds-typography-ui-body-3xl-line-height-squished:1.75rem;--eds-typography-ui-body-4xl-font-size:1.75rem;--eds-typography-ui-body-4xl-tracking-tight:-3.08px;--eds-typography-ui-body-4xl-tracking-normal:0px;--eds-typography-ui-body-4xl-tracking-wide:3.08px;--eds-typography-ui-body-4xl-font-weight-lighter:300;--eds-typography-ui-body-4xl-font-weight-normal:400;--eds-typography-ui-body-4xl-font-weight-bolder:500;--eds-typography-ui-body-4xl-line-height-default:2rem;--eds-typography-ui-body-4xl-line-height-squished:1.75rem;--eds-typography-ui-body-5xl-font-size:2rem;--eds-typography-ui-body-5xl-tracking-tight:-3.52px;--eds-typography-ui-body-5xl-tracking-normal:0px;--eds-typography-ui-body-5xl-tracking-wide:3.52px;--eds-typography-ui-body-5xl-font-weight-lighter:300;--eds-typography-ui-body-5xl-font-weight-normal:400;--eds-typography-ui-body-5xl-font-weight-bolder:500;--eds-typography-ui-body-5xl-line-height-default:2.25rem;--eds-typography-ui-body-5xl-line-height-squished:2rem;--eds-typography-ui-body-6xl-font-size:2.313rem;--eds-typography-ui-body-6xl-tracking-tight:-4.07px;--eds-typography-ui-body-6xl-tracking-normal:0px;--eds-typography-ui-body-6xl-tracking-wide:4.07px;--eds-typography-ui-body-6xl-font-weight-lighter:300;--eds-typography-ui-body-6xl-font-weight-normal:400;--eds-typography-ui-body-6xl-font-weight-bolder:500;--eds-typography-ui-body-6xl-line-height-default:2.5rem;--eds-typography-ui-body-6xl-line-height-squished:2.25rem;--eds-typography-header-font-family:"Equinor";--eds-typography-header-xs-font-size:.75rem;--eds-typography-header-xs-tracking-tight:-1.15px;--eds-typography-header-xs-tracking-normal:0px;--eds-typography-header-xs-tracking-wide:1.15px;--eds-typography-header-xs-font-weight-lighter:300;--eds-typography-header-xs-font-weight-normal:400;--eds-typography-header-xs-font-weight-bolder:500;--eds-typography-header-xs-line-height-default:1rem;--eds-typography-header-xs-line-height-squished:.75rem;--eds-typography-header-sm-font-size:.875rem;--eds-typography-header-sm-tracking-tight:-1.32px;--eds-typography-header-sm-tracking-normal:0px;--eds-typography-header-sm-tracking-wide:1.32px;--eds-typography-header-sm-font-weight-lighter:300;--eds-typography-header-sm-font-weight-normal:400;--eds-typography-header-sm-font-weight-bolder:500;--eds-typography-header-sm-line-height-default:1rem;--eds-typography-header-sm-line-height-squished:.75rem;--eds-typography-header-md-font-size:1rem;--eds-typography-header-md-tracking-tight:-1.54px;--eds-typography-header-md-tracking-normal:0px;--eds-typography-header-md-tracking-wide:1.54px;--eds-typography-header-md-font-weight-lighter:300;--eds-typography-header-md-font-weight-normal:400;--eds-typography-header-md-font-weight-bolder:500;--eds-typography-header-md-line-height-default:1.25rem;--eds-typography-header-md-line-height-squished:1rem;--eds-typography-header-lg-font-size:1.125rem;--eds-typography-header-lg-tracking-tight:-1.76px;--eds-typography-header-lg-tracking-normal:0px;--eds-typography-header-lg-tracking-wide:1.76px;--eds-typography-header-lg-font-weight-lighter:300;--eds-typography-header-lg-font-weight-normal:400;--eds-typography-header-lg-font-weight-bolder:500;--eds-typography-header-lg-line-height-default:1.5rem;--eds-typography-header-lg-line-height-squished:1.25rem;--eds-typography-header-xl-font-size:1.313rem;--eds-typography-header-xl-tracking-tight:-1.76px;--eds-typography-header-xl-tracking-normal:0px;--eds-typography-header-xl-tracking-wide:2.035px;--eds-typography-header-xl-font-weight-lighter:300;--eds-typography-header-xl-font-weight-normal:400;--eds-typography-header-xl-font-weight-bolder:500;--eds-typography-header-xl-line-height-default:1.5rem;--eds-typography-header-xl-line-height-squished:1.25rem;--eds-typography-header-2xl-font-size:1.5rem;--eds-typography-header-2xl-tracking-tight:-2.31px;--eds-typography-header-2xl-tracking-normal:0px;--eds-typography-header-2xl-tracking-wide:2.31px;--eds-typography-header-2xl-font-weight-lighter:300;--eds-typography-header-2xl-font-weight-normal:400;--eds-typography-header-2xl-font-weight-bolder:500;--eds-typography-header-2xl-line-height-default:1.75rem;--eds-typography-header-2xl-line-height-squished:1.5rem;--eds-typography-header-3xl-font-size:1.719rem;--eds-typography-header-3xl-tracking-tight:-2.695px;--eds-typography-header-3xl-tracking-normal:0px;--eds-typography-header-3xl-tracking-wide:2.695px;--eds-typography-header-3xl-font-weight-lighter:300;--eds-typography-header-3xl-font-weight-normal:400;--eds-typography-header-3xl-font-weight-bolder:500;--eds-typography-header-3xl-line-height-default:2rem;--eds-typography-header-3xl-line-height-squished:1.75rem;--eds-typography-header-4xl-font-size:1.969rem;--eds-typography-header-4xl-tracking-tight:-3.08px;--eds-typography-header-4xl-tracking-normal:0px;--eds-typography-header-4xl-tracking-wide:3.08px;--eds-typography-header-4xl-font-weight-lighter:300;--eds-typography-header-4xl-font-weight-normal:400;--eds-typography-header-4xl-font-weight-bolder:500;--eds-typography-header-4xl-line-height-default:2rem;--eds-typography-header-4xl-line-height-squished:1.75rem;--eds-typography-header-5xl-font-size:2.281rem;--eds-typography-header-5xl-tracking-tight:-3.52px;--eds-typography-header-5xl-tracking-normal:0px;--eds-typography-header-5xl-tracking-wide:3.52px;--eds-typography-header-5xl-font-weight-lighter:300;--eds-typography-header-5xl-font-weight-normal:400;--eds-typography-header-5xl-font-weight-bolder:500;--eds-typography-header-5xl-line-height-default:2.25rem;--eds-typography-header-5xl-line-height-squished:2rem;--eds-typography-header-6xl-font-size:2.625rem;--eds-typography-header-6xl-tracking-tight:-4.07px;--eds-typography-header-6xl-tracking-normal:0px;--eds-typography-header-6xl-tracking-wide:4.07px;--eds-typography-header-6xl-font-weight-lighter:300;--eds-typography-header-6xl-font-weight-normal:400;--eds-typography-header-6xl-font-weight-bolder:500;--eds-typography-header-6xl-line-height-default:2.5rem;--eds-typography-header-6xl-line-height-squished:2.25rem}
|
|
15
27
|
[data-density=comfortable]{--eds-sizing-icon-xs:.875rem;--eds-sizing-icon-sm:1rem;--eds-sizing-icon-md:1.125rem;--eds-sizing-icon-lg:1.25rem;--eds-sizing-icon-xl:1.5rem;--eds-sizing-icon-2xl:1.75rem;--eds-sizing-icon-3xl:2rem;--eds-sizing-icon-4xl:2.313rem;--eds-sizing-icon-5xl:2.625rem;--eds-sizing-icon-6xl:3rem;--eds-sizing-selectable-xs:1rem;--eds-sizing-selectable-sm:1.25rem;--eds-sizing-selectable-md:1.5rem;--eds-sizing-selectable-lg:2.25rem;--eds-sizing-selectable-xl:2.75rem;--eds-sizing-selectable-2xl:3.25rem;--eds-sizing-stroke-thin:.063rem;--eds-sizing-stroke-thick:.125rem;--eds-sizing-stroke-none:0rem;--eds-spacing-icon-xs-gap-horizontal:.344rem;--eds-spacing-icon-xs-gap-vertical:.344rem;--eds-spacing-icon-sm-gap-horizontal:.406rem;--eds-spacing-icon-sm-gap-vertical:.406rem;--eds-spacing-icon-md-gap-horizontal:.469rem;--eds-spacing-icon-md-gap-vertical:.469rem;--eds-spacing-icon-lg-gap-horizontal:.531rem;--eds-spacing-icon-lg-gap-vertical:.531rem;--eds-spacing-icon-xl-gap-horizontal:.625rem;--eds-spacing-icon-xl-gap-vertical:.625rem;--eds-spacing-icon-2xl-gap-horizontal:.719rem;--eds-spacing-icon-2xl-gap-vertical:.719rem;--eds-spacing-icon-3xl-gap-horizontal:.813rem;--eds-spacing-icon-3xl-gap-vertical:.813rem;--eds-spacing-icon-4xl-gap-horizontal:.938rem;--eds-spacing-icon-4xl-gap-vertical:.938rem;--eds-spacing-icon-5xl-gap-horizontal:1.094rem;--eds-spacing-icon-5xl-gap-vertical:1.094rem;--eds-spacing-icon-6xl-gap-horizontal:1.25rem;--eds-spacing-icon-6xl-gap-vertical:1.25rem;--eds-spacing-border-radius-rounded:.188rem;--eds-spacing-border-radius-pill:62.5rem;--eds-spacing-border-radius-none:0rem;--eds-spacing-inset-xs-horizontal:.375rem;--eds-spacing-inset-xs-vertical-squished:.25rem;--eds-spacing-inset-xs-vertical-squared:.375rem;--eds-spacing-inset-xs-vertical-stretched:.5rem;--eds-spacing-inset-sm-horizontal:.5rem;--eds-spacing-inset-sm-vertical-squished:.375rem;--eds-spacing-inset-sm-vertical-squared:.5rem;--eds-spacing-inset-sm-vertical-stretched:.75rem;--eds-spacing-inset-md-horizontal:.75rem;--eds-spacing-inset-md-vertical-squished:.5rem;--eds-spacing-inset-md-vertical-squared:.75rem;--eds-spacing-inset-md-vertical-stretched:1rem;--eds-spacing-inset-lg-horizontal:1rem;--eds-spacing-inset-lg-vertical-squished:.75rem;--eds-spacing-inset-lg-vertical-squared:1rem;--eds-spacing-inset-lg-vertical-stretched:1.25rem;--eds-spacing-inset-xl-horizontal:1.25rem;--eds-spacing-inset-xl-vertical-squished:1rem;--eds-spacing-inset-xl-vertical-squared:1.25rem;--eds-spacing-inset-xl-vertical-stretched:1.5rem;--eds-spacing-horizontal-4xs:.063rem;--eds-spacing-horizontal-3xs:.125rem;--eds-spacing-horizontal-2xs:.25rem;--eds-spacing-horizontal-xs:.375rem;--eds-spacing-horizontal-sm:.5rem;--eds-spacing-horizontal-md:.75rem;--eds-spacing-horizontal-lg:1rem;--eds-spacing-horizontal-xl:1.25rem;--eds-spacing-horizontal-2xl:1.5rem;--eds-spacing-horizontal-3xl:1.75rem;--eds-spacing-vertical-4xs:.063rem;--eds-spacing-vertical-3xs:.125rem;--eds-spacing-vertical-2xs:.25rem;--eds-spacing-vertical-xs:.375rem;--eds-spacing-vertical-sm:.5rem;--eds-spacing-vertical-md:.75rem;--eds-spacing-vertical-lg:1rem;--eds-spacing-vertical-xl:1.25rem;--eds-spacing-vertical-2xl:1.5rem;--eds-spacing-vertical-3xl:1.75rem;--eds-typography-ui-body-xs-font-size:.563rem;--eds-typography-ui-body-xs-tracking-tight:-.99px;--eds-typography-ui-body-xs-tracking-normal:0px;--eds-typography-ui-body-xs-tracking-wide:.99px;--eds-typography-ui-body-xs-font-weight-lighter:300;--eds-typography-ui-body-xs-font-weight-normal:400;--eds-typography-ui-body-xs-font-weight-bolder:500;--eds-typography-ui-body-xs-line-height-default:.75rem;--eds-typography-ui-body-xs-line-height-squished:.75rem;--eds-typography-ui-body-sm-font-size:.656rem;--eds-typography-ui-body-sm-tracking-tight:-1.15px;--eds-typography-ui-body-sm-tracking-normal:0px;--eds-typography-ui-body-sm-tracking-wide:1.15px;--eds-typography-ui-body-sm-font-weight-lighter:300;--eds-typography-ui-body-sm-font-weight-normal:400;--eds-typography-ui-body-sm-font-weight-bolder:500;--eds-typography-ui-body-sm-line-height-default:1rem;--eds-typography-ui-body-sm-line-height-squished:.75rem;--eds-typography-ui-body-font-family:"Inter";--eds-typography-ui-body-md-font-size:.75rem;--eds-typography-ui-body-md-tracking-tight:-1.32px;--eds-typography-ui-body-md-tracking-normal:0px;--eds-typography-ui-body-md-tracking-wide:1.32px;--eds-typography-ui-body-md-font-weight-lighter:300;--eds-typography-ui-body-md-font-weight-normal:400;--eds-typography-ui-body-md-font-weight-bolder:500;--eds-typography-ui-body-md-line-height-default:1rem;--eds-typography-ui-body-md-line-height-squished:.75rem;--eds-typography-ui-body-lg-font-size:.875rem;--eds-typography-ui-body-lg-tracking-tight:-1.54px;--eds-typography-ui-body-lg-tracking-normal:0px;--eds-typography-ui-body-lg-tracking-wide:1.54px;--eds-typography-ui-body-lg-font-weight-lighter:300;--eds-typography-ui-body-lg-font-weight-normal:400;--eds-typography-ui-body-lg-font-weight-bolder:500;--eds-typography-ui-body-lg-line-height-default:1.25rem;--eds-typography-ui-body-lg-line-height-squished:1rem;--eds-typography-ui-body-xl-font-size:1rem;--eds-typography-ui-body-xl-tracking-tight:-1.76px;--eds-typography-ui-body-xl-tracking-normal:0px;--eds-typography-ui-body-xl-tracking-wide:1.76px;--eds-typography-ui-body-xl-font-weight-lighter:300;--eds-typography-ui-body-xl-font-weight-normal:400;--eds-typography-ui-body-xl-font-weight-bolder:500;--eds-typography-ui-body-xl-line-height-default:1.5rem;--eds-typography-ui-body-xl-line-height-squished:1.25rem;--eds-typography-ui-body-2xl-font-size:1.156rem;--eds-typography-ui-body-2xl-tracking-tight:-1.76px;--eds-typography-ui-body-2xl-tracking-normal:0px;--eds-typography-ui-body-2xl-tracking-wide:2.035px;--eds-typography-ui-body-2xl-font-weight-lighter:300;--eds-typography-ui-body-2xl-font-weight-normal:400;--eds-typography-ui-body-2xl-font-weight-bolder:500;--eds-typography-ui-body-2xl-line-height-default:1.5rem;--eds-typography-ui-body-2xl-line-height-squished:1.25rem;--eds-typography-ui-body-3xl-font-size:1.313rem;--eds-typography-ui-body-3xl-tracking-tight:-2.31px;--eds-typography-ui-body-3xl-tracking-normal:0px;--eds-typography-ui-body-3xl-tracking-wide:2.31px;--eds-typography-ui-body-3xl-font-weight-lighter:300;--eds-typography-ui-body-3xl-font-weight-normal:400;--eds-typography-ui-body-3xl-font-weight-bolder:500;--eds-typography-ui-body-3xl-line-height-default:1.75rem;--eds-typography-ui-body-3xl-line-height-squished:1.5rem;--eds-typography-ui-body-4xl-font-size:1.531rem;--eds-typography-ui-body-4xl-tracking-tight:-2.695px;--eds-typography-ui-body-4xl-tracking-normal:0px;--eds-typography-ui-body-4xl-tracking-wide:2.695px;--eds-typography-ui-body-4xl-font-weight-lighter:300;--eds-typography-ui-body-4xl-font-weight-normal:400;--eds-typography-ui-body-4xl-font-weight-bolder:500;--eds-typography-ui-body-4xl-line-height-default:2rem;--eds-typography-ui-body-4xl-line-height-squished:1.75rem;--eds-typography-ui-body-5xl-font-size:1.75rem;--eds-typography-ui-body-5xl-tracking-tight:-3.08px;--eds-typography-ui-body-5xl-tracking-normal:0px;--eds-typography-ui-body-5xl-tracking-wide:3.08px;--eds-typography-ui-body-5xl-font-weight-lighter:300;--eds-typography-ui-body-5xl-font-weight-normal:400;--eds-typography-ui-body-5xl-font-weight-bolder:500;--eds-typography-ui-body-5xl-line-height-default:2rem;--eds-typography-ui-body-5xl-line-height-squished:1.75rem;--eds-typography-ui-body-6xl-font-size:2rem;--eds-typography-ui-body-6xl-tracking-tight:-3.52px;--eds-typography-ui-body-6xl-tracking-normal:0px;--eds-typography-ui-body-6xl-tracking-wide:3.52px;--eds-typography-ui-body-6xl-font-weight-lighter:300;--eds-typography-ui-body-6xl-font-weight-normal:0px;--eds-typography-ui-body-6xl-font-weight-bolder:500;--eds-typography-ui-body-6xl-line-height-default:2.25rem;--eds-typography-ui-body-6xl-line-height-squished:2rem;--eds-typography-header-font-family:"Equinor";--eds-typography-header-xs-font-size:.656rem;--eds-typography-header-xs-tracking-tight:-.99px;--eds-typography-header-xs-tracking-normal:0px;--eds-typography-header-xs-tracking-wide:.99px;--eds-typography-header-xs-font-weight-lighter:300;--eds-typography-header-xs-font-weight-normal:400;--eds-typography-header-xs-font-weight-bolder:500;--eds-typography-header-xs-line-height-default:.75rem;--eds-typography-header-xs-line-height-squished:.75rem;--eds-typography-header-sm-font-size:.75rem;--eds-typography-header-sm-tracking-tight:-1.15px;--eds-typography-header-sm-tracking-normal:0px;--eds-typography-header-sm-tracking-wide:1.15px;--eds-typography-header-sm-font-weight-lighter:300;--eds-typography-header-sm-font-weight-normal:400;--eds-typography-header-sm-font-weight-bolder:500;--eds-typography-header-sm-line-height-default:1rem;--eds-typography-header-sm-line-height-squished:.75rem;--eds-typography-header-md-font-size:.875rem;--eds-typography-header-md-tracking-tight:-1.32px;--eds-typography-header-md-tracking-normal:0px;--eds-typography-header-md-tracking-wide:1.32px;--eds-typography-header-md-font-weight-lighter:300;--eds-typography-header-md-font-weight-normal:400;--eds-typography-header-md-font-weight-bolder:500;--eds-typography-header-md-line-height-default:1rem;--eds-typography-header-md-line-height-squished:.75rem;--eds-typography-header-lg-font-size:1rem;--eds-typography-header-lg-tracking-tight:-1.54px;--eds-typography-header-lg-tracking-normal:0px;--eds-typography-header-lg-tracking-wide:1.54px;--eds-typography-header-lg-font-weight-lighter:300;--eds-typography-header-lg-font-weight-normal:400;--eds-typography-header-lg-font-weight-bolder:500;--eds-typography-header-lg-line-height-default:1.25rem;--eds-typography-header-lg-line-height-squished:1rem;--eds-typography-header-xl-font-size:1.125rem;--eds-typography-header-xl-tracking-tight:-1.76px;--eds-typography-header-xl-tracking-normal:0px;--eds-typography-header-xl-tracking-wide:1.76px;--eds-typography-header-xl-font-weight-lighter:300;--eds-typography-header-xl-font-weight-normal:400;--eds-typography-header-xl-font-weight-bolder:500;--eds-typography-header-xl-line-height-default:1.5rem;--eds-typography-header-xl-line-height-squished:1.25rem;--eds-typography-header-2xl-font-size:1.313rem;--eds-typography-header-2xl-tracking-tight:-1.76px;--eds-typography-header-2xl-tracking-normal:0px;--eds-typography-header-2xl-tracking-wide:2.035px;--eds-typography-header-2xl-font-weight-lighter:300;--eds-typography-header-2xl-font-weight-normal:400;--eds-typography-header-2xl-font-weight-bolder:500;--eds-typography-header-2xl-line-height-default:1.5rem;--eds-typography-header-2xl-line-height-squished:1.25rem;--eds-typography-header-3xl-font-size:1.5rem;--eds-typography-header-3xl-tracking-tight:-2.31px;--eds-typography-header-3xl-tracking-normal:0px;--eds-typography-header-3xl-tracking-wide:2.31px;--eds-typography-header-3xl-font-weight-lighter:300;--eds-typography-header-3xl-font-weight-normal:400;--eds-typography-header-3xl-font-weight-bolder:500;--eds-typography-header-3xl-line-height-default:1.75rem;--eds-typography-header-3xl-line-height-squished:1.5rem;--eds-typography-header-4xl-font-size:1.719rem;--eds-typography-header-4xl-tracking-tight:-2.695px;--eds-typography-header-4xl-tracking-normal:0px;--eds-typography-header-4xl-tracking-wide:2.695px;--eds-typography-header-4xl-font-weight-lighter:300;--eds-typography-header-4xl-font-weight-normal:400;--eds-typography-header-4xl-font-weight-bolder:500;--eds-typography-header-4xl-line-height-default:2rem;--eds-typography-header-4xl-line-height-squished:1.75rem;--eds-typography-header-5xl-font-size:1.969rem;--eds-typography-header-5xl-tracking-tight:-3.08px;--eds-typography-header-5xl-tracking-normal:0px;--eds-typography-header-5xl-tracking-wide:3.08px;--eds-typography-header-5xl-font-weight-lighter:300;--eds-typography-header-5xl-font-weight-normal:400;--eds-typography-header-5xl-font-weight-bolder:500;--eds-typography-header-5xl-line-height-default:2rem;--eds-typography-header-5xl-line-height-squished:1.75rem;--eds-typography-header-6xl-font-size:2.281rem;--eds-typography-header-6xl-tracking-tight:-3.52px;--eds-typography-header-6xl-tracking-normal:0px;--eds-typography-header-6xl-tracking-wide:3.52px;--eds-typography-header-6xl-font-weight-lighter:300;--eds-typography-header-6xl-font-weight-normal:400;--eds-typography-header-6xl-font-weight-bolder:500;--eds-typography-header-6xl-line-height-default:2.25rem;--eds-typography-header-6xl-line-height-squished:2rem}
|
|
16
28
|
[data-space-proportions=squished]{--eds-spacing-proportions-xs-horizontal:var(--eds-spacing-inset-xs-horizontal);--eds-spacing-proportions-xs-vertical:var(--eds-spacing-inset-xs-vertical-squished);--eds-spacing-proportions-sm-horizontal:var(--eds-spacing-inset-sm-horizontal);--eds-spacing-proportions-sm-vertical:var(--eds-spacing-inset-sm-vertical-squished);--eds-spacing-proportions-md-horizontal:var(--eds-spacing-inset-md-horizontal);--eds-spacing-proportions-md-vertical:var(--eds-spacing-inset-md-vertical-squished);--eds-spacing-proportions-lg-horizontal:var(--eds-spacing-inset-lg-horizontal);--eds-spacing-proportions-lg-vertical:var(--eds-spacing-inset-lg-vertical-squished);--eds-spacing-proportions-xl-horizontal:var(--eds-spacing-inset-xl-horizontal);--eds-spacing-proportions-xl-vertical:var(--eds-spacing-inset-xl-vertical-squished)}
|
|
@@ -170,125 +182,55 @@
|
|
|
170
182
|
background-color 150ms ease-in-out,
|
|
171
183
|
border-color 150ms ease-in-out,
|
|
172
184
|
color 150ms ease-in-out;
|
|
173
|
-
|
|
174
|
-
/* Comfortable density asymmetric padding for visual text centering */
|
|
175
|
-
/* These values compensate for font metrics (ascenders/descenders) */
|
|
176
|
-
/* Empirically determined from Figma design */
|
|
177
|
-
--_comfortable-padding-top: 0.313rem; /* 5px */
|
|
178
|
-
--_comfortable-padding-bottom: 0.188rem; /* 3px */
|
|
179
|
-
|
|
180
|
-
/* Comfortable density icon-only padding to match label button heights */
|
|
181
|
-
/* Formula: (target-height - icon-size) / 2 where target-height = label button height */
|
|
182
|
-
/* Empirically determined from Figma design */
|
|
183
|
-
--_comfortable-icon-padding-sm: 0.125rem; /* 2px: (20px - 16px) / 2 */
|
|
184
|
-
--_comfortable-icon-padding-md: 0.188rem; /* 3px: (24px - 18px) / 2 */
|
|
185
|
-
--_comfortable-icon-padding-lg: 0.5rem; /* 8px: (36px - 20px) / 2 */
|
|
186
185
|
}
|
|
187
186
|
|
|
188
|
-
/* ===== SIZE VARIANTS
|
|
187
|
+
/* ===== SIZE VARIANTS ===== */
|
|
189
188
|
/*
|
|
190
|
-
*
|
|
191
|
-
*
|
|
192
|
-
*
|
|
193
|
-
* Token reference (from --eds-selectable-space-*):
|
|
194
|
-
* - lg: horizontal=20px, vertical=16px (spacious) / 12px (comfortable)
|
|
195
|
-
* - md: horizontal=16px, vertical=12px (spacious) / 8px (comfortable)
|
|
196
|
-
* - sm: horizontal=12px, vertical=8px (spacious) / 6px (comfortable)
|
|
189
|
+
* Button height is controlled by min-height.
|
|
190
|
+
* The span keeps its natural line-height and is centered by flexbox.
|
|
197
191
|
*
|
|
198
|
-
*
|
|
199
|
-
*
|
|
200
|
-
* - Gap values slightly adjusted for visual balance with icons
|
|
192
|
+
* Spacious (default): sm=24px, md=36px, lg=44px
|
|
193
|
+
* Comfortable: sm=20px, md=24px, lg=36px
|
|
201
194
|
*/
|
|
202
195
|
|
|
203
196
|
.eds-button[data-selectable-space='lg'] {
|
|
204
|
-
|
|
205
|
-
padding-
|
|
206
|
-
padding-inline: var(--eds-selectable-space-horizontal); /* 20px spacious / 16px comfortable */
|
|
197
|
+
min-height: 2.75rem; /* 44px */
|
|
198
|
+
padding-inline: var(--eds-selectable-space-horizontal);
|
|
207
199
|
gap: var(--eds-typography-gap-horizontal);
|
|
208
200
|
}
|
|
209
201
|
|
|
210
202
|
.eds-button[data-selectable-space='md'] {
|
|
211
|
-
|
|
212
|
-
padding-
|
|
213
|
-
padding-inline: var(--eds-selectable-space-horizontal); /* 16px spacious / 12px comfortable */
|
|
203
|
+
min-height: 2.25rem; /* 36px */
|
|
204
|
+
padding-inline: var(--eds-selectable-space-horizontal);
|
|
214
205
|
gap: var(--eds-typography-gap-horizontal);
|
|
215
206
|
}
|
|
216
207
|
|
|
217
208
|
.eds-button[data-selectable-space='sm'] {
|
|
218
|
-
|
|
219
|
-
padding-
|
|
220
|
-
padding-inline: var(--eds-selectable-space-horizontal); /* 12px spacious / 8px comfortable */
|
|
209
|
+
min-height: 1.5rem; /* 24px */
|
|
210
|
+
padding-inline: var(--eds-selectable-space-horizontal);
|
|
221
211
|
gap: var(--eds-typography-gap-horizontal);
|
|
222
212
|
}
|
|
223
213
|
|
|
224
|
-
/*
|
|
225
|
-
/*
|
|
226
|
-
* Note: Density-specific overrides are defined OUTSIDE @layer (after this block closes)
|
|
227
|
-
* to ensure they can override the typography tokens from @equinor/eds-tokens
|
|
228
|
-
*/
|
|
214
|
+
/* Comfortable density */
|
|
229
215
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
* Icon-only buttons maintain same height as label buttons but adapt to density.
|
|
233
|
-
* Formula: padding = base-padding + (line-height - icon-size) / 2
|
|
234
|
-
*
|
|
235
|
-
* This ensures icon buttons:
|
|
236
|
-
* - Match label button height in both spacious and comfortable density
|
|
237
|
-
* - Center the icon vertically regardless of density mode
|
|
238
|
-
* - Adapt automatically via --eds-typography-line-height-squished token
|
|
239
|
-
*
|
|
240
|
-
* Density behavior:
|
|
241
|
-
* - Spacious: Uses larger line-height → more padding → taller buttons
|
|
242
|
-
* - Comfortable: Uses smaller line-height → less padding → shorter buttons
|
|
243
|
-
*/
|
|
244
|
-
|
|
245
|
-
.eds-button[data-icon-only] {
|
|
246
|
-
aspect-ratio: 1;
|
|
216
|
+
[data-density='comfortable'] .eds-button[data-selectable-space='lg'] {
|
|
217
|
+
min-height: 2.25rem; /* 36px */
|
|
247
218
|
}
|
|
248
219
|
|
|
249
|
-
.eds-button[data-
|
|
250
|
-
|
|
251
|
-
/* Adapts with line-height (20px spacious / 16px comfortable) */
|
|
252
|
-
/* Target height: 44px spacious / 40px comfortable */
|
|
253
|
-
--_base-padding: calc(var(--eds-selectable-space-vertical) - 0.25rem);
|
|
254
|
-
padding: calc(
|
|
255
|
-
var(--_base-padding) +
|
|
256
|
-
(
|
|
257
|
-
var(--eds-typography-line-height-squished) -
|
|
258
|
-
var(--eds-typography-icon-size)
|
|
259
|
-
) /
|
|
260
|
-
2
|
|
261
|
-
);
|
|
220
|
+
[data-density='comfortable'] .eds-button[data-selectable-space='md'] {
|
|
221
|
+
min-height: 1.5rem; /* 24px */
|
|
262
222
|
}
|
|
263
223
|
|
|
264
|
-
.eds-button[data-
|
|
265
|
-
|
|
266
|
-
/* Adapts with line-height (16px spacious / 12px comfortable) */
|
|
267
|
-
/* Target height: 36px spacious / 32px comfortable */
|
|
268
|
-
--_base-padding: calc(var(--eds-selectable-space-vertical) - 0.125rem);
|
|
269
|
-
padding: calc(
|
|
270
|
-
var(--_base-padding) +
|
|
271
|
-
(
|
|
272
|
-
var(--eds-typography-line-height-squished) -
|
|
273
|
-
var(--eds-typography-icon-size)
|
|
274
|
-
) /
|
|
275
|
-
2
|
|
276
|
-
);
|
|
224
|
+
[data-density='comfortable'] .eds-button[data-selectable-space='sm'] {
|
|
225
|
+
min-height: 1.25rem; /* 20px */
|
|
277
226
|
}
|
|
278
227
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
padding:
|
|
285
|
-
var(--_base-padding) +
|
|
286
|
-
(
|
|
287
|
-
var(--eds-typography-line-height-squished) -
|
|
288
|
-
var(--eds-typography-icon-size)
|
|
289
|
-
) /
|
|
290
|
-
2
|
|
291
|
-
);
|
|
228
|
+
/* ===== ICON-ONLY BUTTON ===== */
|
|
229
|
+
/* Height from size variant, aspect-ratio makes it square, flexbox centers icon */
|
|
230
|
+
|
|
231
|
+
.eds-button[data-icon-only] {
|
|
232
|
+
aspect-ratio: 1;
|
|
233
|
+
padding: 0;
|
|
292
234
|
}
|
|
293
235
|
|
|
294
236
|
/* ===== ROUND ICON-ONLY BUTTON ===== */
|
|
@@ -313,8 +255,8 @@
|
|
|
313
255
|
}
|
|
314
256
|
|
|
315
257
|
.eds-button[data-variant='primary']:disabled {
|
|
316
|
-
background-color: var(--eds-color-bg-fill-
|
|
317
|
-
color: var(--eds-color-
|
|
258
|
+
background-color: var(--eds-color-bg-fill-emphasis-disabled);
|
|
259
|
+
color: var(--eds-color-text-disabled);
|
|
318
260
|
cursor: not-allowed;
|
|
319
261
|
}
|
|
320
262
|
|
|
@@ -338,9 +280,9 @@
|
|
|
338
280
|
|
|
339
281
|
.eds-button[data-variant='secondary']:disabled {
|
|
340
282
|
outline: var(--eds-border-width-default, 1px) solid
|
|
341
|
-
var(--eds-color-border-
|
|
283
|
+
var(--eds-color-border-disabled);
|
|
342
284
|
outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
|
|
343
|
-
color: var(--eds-color-
|
|
285
|
+
color: var(--eds-color-text-disabled);
|
|
344
286
|
cursor: not-allowed;
|
|
345
287
|
}
|
|
346
288
|
|
|
@@ -360,7 +302,7 @@
|
|
|
360
302
|
}
|
|
361
303
|
|
|
362
304
|
.eds-button[data-variant='ghost']:disabled {
|
|
363
|
-
color: var(--eds-color-
|
|
305
|
+
color: var(--eds-color-text-disabled);
|
|
364
306
|
cursor: not-allowed;
|
|
365
307
|
}
|
|
366
308
|
|
|
@@ -384,102 +326,25 @@
|
|
|
384
326
|
flex-shrink: 0;
|
|
385
327
|
}
|
|
386
328
|
|
|
387
|
-
/* Icon-only buttons: remove negative margins
|
|
329
|
+
/* Icon-only buttons: remove negative margins since flexbox handles centering */
|
|
388
330
|
.eds-button[data-icon-only] .icon {
|
|
389
331
|
margin: 0;
|
|
390
332
|
}
|
|
391
333
|
}
|
|
392
|
-
/* ===== LABEL WRAPPER (TypographyNext) ===== */
|
|
393
|
-
/* Outside @layer to override typography.css which sets display: block on [data-font-family] */
|
|
394
|
-
.eds-button {
|
|
395
|
-
display: inline-flex;
|
|
396
|
-
}
|
|
397
|
-
.eds-button > span {
|
|
398
|
-
display: inline-flex;
|
|
399
|
-
align-items: center;
|
|
400
|
-
gap: inherit;
|
|
401
|
-
}
|
|
402
|
-
/* Reset baseline padding and text-box-trim for proper centering */
|
|
403
|
-
.eds-button > span[data-baseline] {
|
|
404
|
-
padding: 0;
|
|
405
|
-
/* Disable text-box-trim so text sits centered within its line-height box */
|
|
406
|
-
/* Flexbox will then center the entire line-height box vertically in the button */
|
|
407
|
-
text-box-trim: none;
|
|
408
|
-
text-box-edge: auto;
|
|
409
|
-
}
|
|
410
|
-
/* Icon-only: span should not affect layout */
|
|
411
|
-
.eds-button[data-icon-only] > span {
|
|
412
|
-
display: contents;
|
|
413
|
-
}
|
|
414
|
-
/* ===== DENSITY OVERRIDES ===== */
|
|
415
334
|
/*
|
|
416
|
-
*
|
|
335
|
+
* Outside @layer to override typography.css [data-font-family] { display: block }.
|
|
336
|
+
* The span wraps text children via TypographyNext and needs inline-flex for
|
|
337
|
+
* icon+text gap and vertical centering.
|
|
417
338
|
*
|
|
418
|
-
*
|
|
419
|
-
*
|
|
420
|
-
* - default: SM (12px) instead of MD (14px)
|
|
421
|
-
* - large: MD (14px) instead of LG (16px)
|
|
422
|
-
*
|
|
423
|
-
* Target heights in comfortable mode:
|
|
424
|
-
* - small: 20px (4px × 2 + 12px line-height)
|
|
425
|
-
* - default: 24px (4px × 2 + 16px line-height)
|
|
426
|
-
* - large: 36px (8px × 2 + 20px line-height)
|
|
427
|
-
*
|
|
428
|
-
* These overrides are OUTSIDE @layer to ensure they can override the typography
|
|
429
|
-
* tokens from @equinor/eds-tokens/css/variables.
|
|
339
|
+
* text-box/padding-block reset disables typography.css baseline padding —
|
|
340
|
+
* button handles its own sizing via min-height + flexbox centering.
|
|
430
341
|
*/
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
--eds-typography-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='sm'][data-font-size='sm'] {
|
|
438
|
-
/* Target: 20px = (5px + 3px) + 12px line-height */
|
|
439
|
-
/* Asymmetric padding to visually center text (more top, less bottom) */
|
|
440
|
-
padding-top: var(--_comfortable-padding-top);
|
|
441
|
-
padding-bottom: var(--_comfortable-padding-bottom);
|
|
442
|
-
}
|
|
443
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='md'][data-font-size='md'],
|
|
444
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='md'] [data-font-size='md'] {
|
|
445
|
-
/* Override line-height to maintain MD height (16px instead of SM's 12px) */
|
|
446
|
-
--eds-typography-line-height: 1rem; /* 16px (MD line-height, NOT SM) */
|
|
447
|
-
--eds-typography-line-height-squished: 1rem; /* 16px */
|
|
448
|
-
}
|
|
449
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='md'][data-font-size='md'] {
|
|
450
|
-
/* Target: 24px = (5px + 3px) + 16px line-height */
|
|
451
|
-
/* Asymmetric padding to visually center text (more top, less bottom) */
|
|
452
|
-
padding-top: var(--_comfortable-padding-top);
|
|
453
|
-
padding-bottom: var(--_comfortable-padding-bottom);
|
|
454
|
-
}
|
|
455
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='lg'][data-font-size='lg'],
|
|
456
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='lg'] [data-font-size='lg'] {
|
|
457
|
-
/* Override line-height to maintain LG height (20px instead of MD's 16px) */
|
|
458
|
-
--eds-typography-line-height: 1.25rem; /* 20px (LG line-height, NOT MD) */
|
|
459
|
-
--eds-typography-line-height-squished: 1.25rem; /* 20px */
|
|
460
|
-
}
|
|
461
|
-
[data-density='comfortable'] .eds-button[data-selectable-space='lg'][data-font-size='lg'] {
|
|
462
|
-
/* Target: 36px = (8px × 2) + 20px */
|
|
463
|
-
/* Token gives 12px in comfortable mode, minus icon compensation = 8px */
|
|
464
|
-
padding-block: calc(var(--eds-selectable-space-vertical) - 0.25rem); /* 12px → 8px */
|
|
465
|
-
}
|
|
466
|
-
/* Icon-only button overrides for comfortable density */
|
|
467
|
-
/* Set fixed padding to ensure square buttons that match labeled button heights */
|
|
468
|
-
/* Formula: padding = (target-height - icon-size) / 2 */
|
|
469
|
-
[data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='sm'] {
|
|
470
|
-
/* Target: 20×20px to match labeled small button (20px height) */
|
|
471
|
-
/* Icon size: 16px, padding needed: (20 - 16) / 2 = 2px */
|
|
472
|
-
padding: var(--_comfortable-icon-padding-sm);
|
|
473
|
-
}
|
|
474
|
-
[data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='md'] {
|
|
475
|
-
/* Target: 24×24px to match labeled default button (24px height) */
|
|
476
|
-
/* Icon size: 18px, padding needed: (24 - 18) / 2 = 3px */
|
|
477
|
-
padding: var(--_comfortable-icon-padding-md);
|
|
478
|
-
}
|
|
479
|
-
[data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='lg'] {
|
|
480
|
-
/* Target: 36×36px to match labeled large button (36px height) */
|
|
481
|
-
/* Icon size: 20px, padding needed: (36 - 20) / 2 = 8px */
|
|
482
|
-
padding: var(--_comfortable-icon-padding-lg);
|
|
342
|
+
.eds-button > span {
|
|
343
|
+
display: inline-flex;
|
|
344
|
+
align-items: center;
|
|
345
|
+
gap: var(--eds-typography-gap-horizontal);
|
|
346
|
+
text-box: normal;
|
|
347
|
+
padding-block: 0;
|
|
483
348
|
}
|
|
484
349
|
@layer eds-components {
|
|
485
350
|
.eds-field {
|
|
@@ -539,9 +404,15 @@
|
|
|
539
404
|
color: var(--_eds-field-helper-color);
|
|
540
405
|
}
|
|
541
406
|
|
|
407
|
+
/* Reduce gap before helper message to 3xs spacing.
|
|
408
|
+
Applied to the preceding sibling (not helper message) to avoid [data-font-family] margin: 0 override. */
|
|
409
|
+
.eds-field > :has(+ .eds-field__helper-message) {
|
|
410
|
+
margin-block-end: calc(var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical));
|
|
411
|
+
}
|
|
412
|
+
|
|
542
413
|
/* Only helper message changes color when disabled */
|
|
543
414
|
.eds-field[data-disabled='true'] {
|
|
544
|
-
--_eds-field-helper-color: var(--eds-color-
|
|
415
|
+
--_eds-field-helper-color: var(--eds-color-text-disabled);
|
|
545
416
|
}
|
|
546
417
|
}
|
|
547
418
|
@layer eds-components {
|
|
@@ -692,7 +563,7 @@
|
|
|
692
563
|
}
|
|
693
564
|
|
|
694
565
|
.eds-checkbox[data-disabled='true'] .eds-checkbox__icon {
|
|
695
|
-
fill: var(--eds-color-
|
|
566
|
+
fill: var(--eds-color-text-disabled);
|
|
696
567
|
}
|
|
697
568
|
|
|
698
569
|
/* Icon visibility */
|
|
@@ -731,7 +602,7 @@
|
|
|
731
602
|
}
|
|
732
603
|
|
|
733
604
|
.eds-field.eds-checkbox[data-disabled='true'] .eds-field__label {
|
|
734
|
-
color: var(--eds-color-
|
|
605
|
+
color: var(--eds-color-text-disabled);
|
|
735
606
|
cursor: not-allowed;
|
|
736
607
|
}
|
|
737
608
|
|
|
@@ -884,7 +755,7 @@
|
|
|
884
755
|
}
|
|
885
756
|
|
|
886
757
|
.eds-radio[data-disabled='true'] .eds-radio__icon {
|
|
887
|
-
fill: var(--eds-color-
|
|
758
|
+
fill: var(--eds-color-text-disabled);
|
|
888
759
|
}
|
|
889
760
|
|
|
890
761
|
/* Icon visibility */
|
|
@@ -909,7 +780,7 @@
|
|
|
909
780
|
}
|
|
910
781
|
|
|
911
782
|
.eds-field.eds-radio[data-disabled='true'] .eds-field__label {
|
|
912
|
-
color: var(--eds-color-
|
|
783
|
+
color: var(--eds-color-text-disabled);
|
|
913
784
|
cursor: not-allowed;
|
|
914
785
|
}
|
|
915
786
|
}
|
|
@@ -965,7 +836,7 @@
|
|
|
965
836
|
}
|
|
966
837
|
|
|
967
838
|
&[data-disabled='true'] .eds-field__label {
|
|
968
|
-
color: var(--eds-color-
|
|
839
|
+
color: var(--eds-color-text-disabled);
|
|
969
840
|
cursor: not-allowed;
|
|
970
841
|
}
|
|
971
842
|
}
|
|
@@ -1039,7 +910,7 @@
|
|
|
1039
910
|
}
|
|
1040
911
|
|
|
1041
912
|
.eds-switch:has(.eds-switch__input:disabled) & {
|
|
1042
|
-
background-color: var(--eds-color-
|
|
913
|
+
background-color: var(--eds-color-bg-disabled);
|
|
1043
914
|
box-shadow: none;
|
|
1044
915
|
}
|
|
1045
916
|
}
|
|
@@ -1047,6 +918,11 @@
|
|
|
1047
918
|
@layer eds-components {
|
|
1048
919
|
/* Container */
|
|
1049
920
|
.eds-input-container {
|
|
921
|
+
/* Temporary alias until proper input background token is available */
|
|
922
|
+
--_bg-input: var(--eds-color-bg-canvas);
|
|
923
|
+
/* Temporary alias until proper readonly text token is available */
|
|
924
|
+
--_readonly-text-color: var(--eds-color-border-strong);
|
|
925
|
+
|
|
1050
926
|
isolation: isolate;
|
|
1051
927
|
display: flex;
|
|
1052
928
|
flex-direction: row;
|
|
@@ -1054,8 +930,8 @@
|
|
|
1054
930
|
gap: var(--eds-typography-gap-horizontal);
|
|
1055
931
|
box-sizing: border-box;
|
|
1056
932
|
inline-size: 100%;
|
|
1057
|
-
background: var(--
|
|
1058
|
-
/*
|
|
933
|
+
background: var(--_bg-input);
|
|
934
|
+
/* Outline instead of border to not affect height calculation */
|
|
1059
935
|
outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-subtle);
|
|
1060
936
|
outline-offset: calc(-1 * var(--eds-sizing-stroke-thin));
|
|
1061
937
|
border-radius: var(--eds-spacing-border-radius-none);
|
|
@@ -1065,40 +941,28 @@
|
|
|
1065
941
|
background-color 150ms,
|
|
1066
942
|
outline-color 150ms;
|
|
1067
943
|
|
|
1068
|
-
/* Hover - only for enabled inputs */
|
|
1069
944
|
&:hover:not([data-disabled]):not([data-readonly]) {
|
|
1070
945
|
outline-color: var(--eds-color-border-strong);
|
|
1071
946
|
|
|
1072
947
|
& .eds-input {
|
|
1073
948
|
color: var(--eds-color-text-strong);
|
|
1074
|
-
/*
|
|
949
|
+
/* Safari autofill override */
|
|
1075
950
|
-webkit-text-fill-color: var(--eds-color-text-strong);
|
|
1076
951
|
|
|
1077
952
|
&::placeholder {
|
|
1078
953
|
color: var(--eds-color-text-strong);
|
|
954
|
+
/* Safari autofill override */
|
|
1079
955
|
-webkit-text-fill-color: var(--eds-color-text-strong);
|
|
1080
956
|
}
|
|
1081
957
|
}
|
|
1082
|
-
|
|
1083
|
-
/* Hover for adornments - only when not invalid */
|
|
1084
|
-
&:not([data-invalid]) {
|
|
1085
|
-
& .eds-adornment__text,
|
|
1086
|
-
& .eds-adornment__adornment {
|
|
1087
|
-
color: var(--eds-color-text-strong);
|
|
1088
|
-
}
|
|
1089
|
-
}
|
|
1090
958
|
}
|
|
1091
959
|
|
|
1092
|
-
/* Focus
|
|
1093
|
-
Matches Switch pattern: stroke-thin ring with stroke-thick gap */
|
|
960
|
+
/* Focus ring with gap (box-shadow since outline is used for border) */
|
|
1094
961
|
&:focus-within {
|
|
1095
962
|
outline-color: var(--eds-color-border-strong);
|
|
1096
|
-
/* Use box-shadow since outline is used for the border */
|
|
1097
963
|
box-shadow:
|
|
1098
|
-
0 0 0 var(--eds-sizing-stroke-
|
|
1099
|
-
0 0 0
|
|
1100
|
-
calc(var(--eds-sizing-stroke-thick) + var(--eds-sizing-stroke-thin))
|
|
1101
|
-
var(--eds-color-border-focus);
|
|
964
|
+
0 0 0 var(--eds-sizing-stroke-thin) var(--_bg-input),
|
|
965
|
+
0 0 0 calc(var(--eds-sizing-stroke-thin) * 2) var(--eds-color-border-focus);
|
|
1102
966
|
}
|
|
1103
967
|
|
|
1104
968
|
/* Invalid state */
|
|
@@ -1108,15 +972,8 @@
|
|
|
1108
972
|
&:focus-within {
|
|
1109
973
|
outline-color: var(--eds-color-border-strong);
|
|
1110
974
|
box-shadow:
|
|
1111
|
-
0 0 0 var(--eds-sizing-stroke-
|
|
1112
|
-
0 0 0
|
|
1113
|
-
calc(var(--eds-sizing-stroke-thick) + var(--eds-sizing-stroke-thin))
|
|
1114
|
-
var(--eds-color-border-focus);
|
|
1115
|
-
}
|
|
1116
|
-
|
|
1117
|
-
& .eds-input::placeholder {
|
|
1118
|
-
color: var(--eds-color-border-strong);
|
|
1119
|
-
-webkit-text-fill-color: var(--eds-color-border-strong);
|
|
975
|
+
0 0 0 var(--eds-sizing-stroke-thin) var(--_bg-input),
|
|
976
|
+
0 0 0 calc(var(--eds-sizing-stroke-thin) * 2) var(--eds-color-border-focus);
|
|
1120
977
|
}
|
|
1121
978
|
}
|
|
1122
979
|
|
|
@@ -1126,23 +983,23 @@
|
|
|
1126
983
|
outline-color: transparent;
|
|
1127
984
|
|
|
1128
985
|
& .eds-input {
|
|
1129
|
-
color: var(--eds-color-
|
|
986
|
+
color: var(--eds-color-text-disabled);
|
|
1130
987
|
cursor: not-allowed;
|
|
1131
988
|
opacity: 1;
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
); /* Safari autofill override */
|
|
989
|
+
/* Safari autofill override */
|
|
990
|
+
-webkit-text-fill-color: var(--eds-color-text-disabled);
|
|
1135
991
|
|
|
1136
992
|
&::placeholder {
|
|
1137
|
-
color: var(--eds-color-
|
|
1138
|
-
|
|
993
|
+
color: var(--eds-color-text-disabled);
|
|
994
|
+
/* Safari autofill override */
|
|
995
|
+
-webkit-text-fill-color: var(--eds-color-text-disabled);
|
|
1139
996
|
}
|
|
1140
997
|
}
|
|
1141
998
|
|
|
1142
999
|
& .eds-adornment__text,
|
|
1143
1000
|
& .eds-adornment__adornment,
|
|
1144
1001
|
& .eds-error-icon {
|
|
1145
|
-
color: var(--eds-color-
|
|
1002
|
+
color: var(--eds-color-text-disabled);
|
|
1146
1003
|
}
|
|
1147
1004
|
}
|
|
1148
1005
|
|
|
@@ -1151,26 +1008,28 @@
|
|
|
1151
1008
|
outline-color: transparent;
|
|
1152
1009
|
|
|
1153
1010
|
& .eds-input {
|
|
1154
|
-
color: var(--
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
); /* Safari autofill override */
|
|
1158
|
-
|
|
1159
|
-
&::placeholder {
|
|
1160
|
-
color: var(--eds-color-border-strong);
|
|
1161
|
-
-webkit-text-fill-color: var(--eds-color-border-strong);
|
|
1162
|
-
}
|
|
1011
|
+
color: var(--_readonly-text-color);
|
|
1012
|
+
/* Safari autofill override */
|
|
1013
|
+
-webkit-text-fill-color: var(--_readonly-text-color);
|
|
1163
1014
|
}
|
|
1164
1015
|
|
|
1165
1016
|
& .eds-adornment__text,
|
|
1166
1017
|
& .eds-adornment__adornment {
|
|
1167
|
-
color: var(--
|
|
1018
|
+
color: var(--_readonly-text-color);
|
|
1168
1019
|
}
|
|
1169
1020
|
}
|
|
1170
1021
|
}
|
|
1171
1022
|
|
|
1023
|
+
/* Comfortable density: uses XS vertical spacing for 24px height */
|
|
1024
|
+
[data-density='comfortable'] .eds-input-container {
|
|
1025
|
+
padding-block: var(--eds-spacing-proportions-xs-vertical);
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1172
1028
|
/* Input/Textarea element */
|
|
1173
1029
|
.eds-input {
|
|
1030
|
+
/* Temporary alias until proper placeholder text token is available */
|
|
1031
|
+
--_placeholder-text-color: var(--eds-color-border-strong);
|
|
1032
|
+
|
|
1174
1033
|
flex: 1;
|
|
1175
1034
|
min-inline-size: 0;
|
|
1176
1035
|
border: var(--eds-sizing-stroke-none);
|
|
@@ -1184,7 +1043,9 @@
|
|
|
1184
1043
|
resize: none;
|
|
1185
1044
|
|
|
1186
1045
|
&::placeholder {
|
|
1187
|
-
color: var(--
|
|
1046
|
+
color: var(--_placeholder-text-color);
|
|
1047
|
+
/* Safari autofill override */
|
|
1048
|
+
-webkit-text-fill-color: var(--_placeholder-text-color);
|
|
1188
1049
|
}
|
|
1189
1050
|
}
|
|
1190
1051
|
|
|
@@ -1200,16 +1061,42 @@
|
|
|
1200
1061
|
align-items: center;
|
|
1201
1062
|
gap: var(--eds-typography-gap-horizontal);
|
|
1202
1063
|
flex-shrink: 0;
|
|
1203
|
-
}
|
|
1204
|
-
|
|
1205
|
-
/* Adornment text (prefix/suffix) */
|
|
1206
|
-
.eds-adornment__text {
|
|
1207
1064
|
color: var(--eds-color-text-subtle);
|
|
1208
1065
|
}
|
|
1209
1066
|
|
|
1210
|
-
/* Adornment icons */
|
|
1067
|
+
/* Adornment icons and buttons */
|
|
1211
1068
|
.eds-adornment__adornment {
|
|
1212
|
-
|
|
1069
|
+
display: flex;
|
|
1070
|
+
align-items: center;
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
/* Prevent button from expanding Input (Button size="small" is 24px, Input needs 20px) */
|
|
1074
|
+
.eds-adornment__adornment:has(button) {
|
|
1075
|
+
block-size: var(--eds-typography-ui-body-md-line-height-default);
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
/* Make button fit the 20px space to match Input content height */
|
|
1079
|
+
.eds-adornment__adornment button {
|
|
1080
|
+
inline-size: var(--eds-typography-ui-body-md-line-height-default);
|
|
1081
|
+
block-size: var(--eds-typography-ui-body-md-line-height-default);
|
|
1082
|
+
padding: 0;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
/* Negative margin aligns buttons with icon adornments
|
|
1086
|
+
Applied to wrapper to avoid [data-font-family] margin override */
|
|
1087
|
+
|
|
1088
|
+
/* End adornment */
|
|
1089
|
+
.eds-input ~ .eds-adornment .eds-adornment__adornment:has(button) {
|
|
1090
|
+
margin-inline-end: calc(
|
|
1091
|
+
(var(--eds-sizing-icon-xs) - var(--eds-typography-ui-body-md-line-height-default)) / 2
|
|
1092
|
+
);
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
/* Start adornment */
|
|
1096
|
+
.eds-adornment:has(~ .eds-input) .eds-adornment__adornment:has(button) {
|
|
1097
|
+
margin-inline-start: calc(
|
|
1098
|
+
(var(--eds-sizing-icon-xs) - var(--eds-typography-ui-body-md-line-height-default)) / 2
|
|
1099
|
+
);
|
|
1213
1100
|
}
|
|
1214
1101
|
}
|
|
1215
1102
|
@layer eds-components {
|
|
@@ -1222,31 +1109,10 @@
|
|
|
1222
1109
|
}
|
|
1223
1110
|
|
|
1224
1111
|
.eds-text-field__info {
|
|
1225
|
-
display: inline-flex;
|
|
1226
|
-
align-items: center;
|
|
1227
1112
|
flex-shrink: 0;
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
background: transparent;
|
|
1231
|
-
color: var(--eds-color-icon-subtle);
|
|
1232
|
-
cursor: pointer;
|
|
1113
|
+
/* Negative margin collapses the button's 24px layout contribution to ~8px,
|
|
1114
|
+
matching Figma's 8px icon container. Label text-box height determines row height. */
|
|
1233
1115
|
margin-block: calc(var(--eds-sizing-icon-xs) / -2);
|
|
1234
|
-
|
|
1235
|
-
&:hover,
|
|
1236
|
-
&:focus-visible {
|
|
1237
|
-
color: var(--eds-color-icon-info);
|
|
1238
|
-
|
|
1239
|
-
& svg {
|
|
1240
|
-
background: var(--eds-color-bg-fill-muted-hover);
|
|
1241
|
-
border-radius: var(--eds-spacing-border-radius-pill);
|
|
1242
|
-
}
|
|
1243
|
-
}
|
|
1244
|
-
|
|
1245
|
-
&:focus-visible {
|
|
1246
|
-
outline: var(--eds-sizing-stroke-thick) solid var(--eds-color-focus);
|
|
1247
|
-
outline-offset: var(--eds-sizing-stroke-thick);
|
|
1248
|
-
border-radius: var(--eds-spacing-border-radius-pill);
|
|
1249
|
-
}
|
|
1250
1116
|
}
|
|
1251
1117
|
}
|
|
1252
1118
|
|