@norges-domstoler/dds-design-tokens 4.0.2 → 5.0.0

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.
Files changed (61) hide show
  1. package/README.md +9 -12
  2. package/dist/cjs/dds/build/js/borderRadius.d.ts +10 -30
  3. package/dist/cjs/dds/build/js/colors.d.ts +152 -67
  4. package/dist/cjs/dds/build/js/ddsTokens.d.ts +270 -205
  5. package/dist/cjs/dds/build/js/font.d.ts +50 -0
  6. package/dist/cjs/dds/build/js/grid.d.ts +15 -35
  7. package/dist/cjs/dds/build/js/iconSize.d.ts +6 -6
  8. package/dist/cjs/dds/build/js/outershadow.d.ts +1 -1
  9. package/dist/cjs/dds/build/js/spacing.d.ts +28 -88
  10. package/dist/cjs/dds/index.d.ts +10 -11
  11. package/dist/cjs/index.js +1855 -606
  12. package/dist/cjs/src/ddsBaseTokens.d.ts +631 -3
  13. package/dist/css/borderRadius.css +6 -16
  14. package/dist/css/breakpoints.css +1 -1
  15. package/dist/css/colors.css +152 -67
  16. package/dist/css/ddsTokens.css +197 -198
  17. package/dist/css/font.css +1 -1
  18. package/dist/css/grid.css +11 -26
  19. package/dist/css/iconSize.css +4 -4
  20. package/dist/css/outershadow.css +1 -1
  21. package/dist/css/spacing.css +15 -45
  22. package/dist/dds/build/js/borderRadius.d.ts +10 -30
  23. package/dist/dds/build/js/borderRadius.js +11 -31
  24. package/dist/dds/build/js/colors.d.ts +152 -67
  25. package/dist/dds/build/js/colors.js +153 -68
  26. package/dist/dds/build/js/ddsTokens.d.ts +270 -205
  27. package/dist/dds/build/js/ddsTokens.js +630 -0
  28. package/dist/dds/build/js/font.d.ts +50 -0
  29. package/dist/dds/build/js/font.js +51 -1
  30. package/dist/dds/build/js/grid.d.ts +15 -35
  31. package/dist/dds/build/js/grid.js +16 -36
  32. package/dist/dds/build/js/iconSize.d.ts +6 -6
  33. package/dist/dds/build/js/iconSize.js +7 -7
  34. package/dist/dds/build/js/outershadow.d.ts +1 -1
  35. package/dist/dds/build/js/outershadow.js +1 -1
  36. package/dist/dds/build/js/spacing.d.ts +28 -88
  37. package/dist/dds/build/js/spacing.js +29 -89
  38. package/dist/dds/index.d.ts +10 -11
  39. package/dist/ddsBaseTokens.js +3 -5
  40. package/dist/ddsReferenceTokens.js +6 -6
  41. package/dist/index.js +1 -1
  42. package/dist/scss/_borderRadius.scss +6 -16
  43. package/dist/scss/_breakpoints.scss +1 -1
  44. package/dist/scss/_colors.scss +153 -102
  45. package/dist/scss/_ddsTokens.scss +198 -198
  46. package/dist/scss/_font.scss +1 -1
  47. package/dist/scss/_iconSize.scss +4 -4
  48. package/dist/scss/_outershadow.scss +1 -1
  49. package/dist/scss/_spacing.scss +16 -45
  50. package/dist/src/ddsBaseTokens.d.ts +631 -3
  51. package/package.json +6 -6
  52. package/dist/cjs/dds/build/js/border.d.ts +0 -30
  53. package/dist/cjs/dds/build/js/innershadow.d.ts +0 -8
  54. package/dist/css/border.css +0 -31
  55. package/dist/css/innershadow.css +0 -11
  56. package/dist/dds/build/js/border.d.ts +0 -30
  57. package/dist/dds/build/js/border.js +0 -32
  58. package/dist/dds/build/js/innershadow.d.ts +0 -8
  59. package/dist/dds/build/js/innershadow.js +0 -10
  60. package/dist/scss/_border.scss +0 -28
  61. package/dist/scss/_innershadow.scss +0 -8
package/dist/css/breakpoints.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Jan 2024 11:05:28 GMT
3
+ * Generated on Fri, 07 Jun 2024 10:30:37 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/css/colors.css CHANGED
@@ -1,73 +1,158 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Jan 2024 11:05:28 GMT
3
+ * Generated on Mon, 10 Jun 2024 11:27:50 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --dds-color-primary-lightest: rgba(234, 239, 244, 1);
8
- --dds-color-primary-lighter: rgba(172, 187, 198, 1);
9
- --dds-color-primary-light: rgba(79, 106, 126, 1);
10
- --dds-color-primary-base: rgba(53, 71, 84, 1); /* Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
11
- --dds-color-primary-dark: rgba(49, 61, 69, 1);
12
- --dds-color-primary-darker: rgba(32, 43, 50, 1);
13
- --dds-color-primary-darkest: rgba(21, 28, 34, 1);
14
- --dds-color-neutrals-white: rgba(255, 255, 255, 1);
15
- --dds-color-neutrals-gray-1: rgba(248, 249, 249, 1);
16
- --dds-color-neutrals-gray-2: rgba(235, 236, 238, 1);
17
- --dds-color-neutrals-gray-3: rgba(207, 212, 215, 1);
18
- --dds-color-neutrals-gray-4: rgba(173, 181, 186, 1);
19
- --dds-color-neutrals-gray-5: rgba(119, 131, 140, 1);
20
- --dds-color-neutrals-gray-6: rgba(84, 92, 98, 1);
21
- --dds-color-neutrals-gray-7: rgba(58, 65, 70, 1);
22
- --dds-color-neutrals-gray-8: rgba(34, 39, 42, 1);
23
- --dds-color-neutrals-gray-9: rgba(11, 13, 14, 1);
24
- --dds-color-interactive-lightest: rgba(231, 241, 247, 1);
25
- --dds-color-interactive-lighter: rgba(159, 197, 222, 1);
26
- --dds-color-interactive-light: rgba(88, 154, 198, 1);
27
- --dds-color-interactive-base: rgba(16, 110, 173, 1); /* Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den */
28
- --dds-color-interactive-dark: rgba(13, 88, 138, 1);
29
- --dds-color-interactive-darker: rgba(10, 66, 104, 1);
30
- --dds-color-interactive-darkest: rgba(6, 44, 69, 1);
31
- --dds-color-secondary-lightest: rgba(230, 237, 237, 1); /* --l80 */
32
- --dds-color-secondary-lighter: rgba(205, 219, 219, 1);
33
- --dds-color-secondary-light: rgba(184, 205, 205, 1);
34
- --dds-color-secondary-base: rgba(154, 184, 183, 1); /* Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
35
- --dds-color-secondary-dark: rgba(123, 147, 146, 1);
36
- --dds-color-secondary-darker: rgba(77, 100, 99, 1);
37
- --dds-color-secondary-darkest: rgba(62, 74, 73, 1);
38
- --dds-color-tertiary-lightest: rgba(255, 230, 223, 1);
39
- --dds-color-tertiary-lighter: rgba(255, 214, 202, 1);
40
- --dds-color-tertiary-light: rgba(246, 193, 177, 1);
41
- --dds-color-tertiary-base: rgba(242, 166, 143, 1); /* Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge */
42
- --dds-color-tertiary-dark: rgba(245, 152, 119, 1);
43
- --dds-color-tertiary-darker: rgba(242, 126, 85, 1);
44
- --dds-color-tertiary-darkest: rgba(194, 101, 68, 1);
45
- --dds-color-success-lightest: rgba(240, 249, 240, 1);
46
- --dds-color-success-lighter: rgba(193, 229, 194, 1);
47
- --dds-color-success-light: rgba(147, 210, 148, 1);
48
- --dds-color-success-base: rgba(101, 190, 102, 1); /* Brukes for å kommunisere suksess eller noe som er riktig. */
49
- --dds-color-success-dark: rgba(81, 152, 82, 1);
50
- --dds-color-success-darker: rgba(61, 114, 61, 1);
51
- --dds-color-success-darkest: rgba(40, 76, 41, 1);
52
- --dds-color-danger-lightest: rgba(251, 235, 235, 1);
53
- --dds-color-danger-lighter: rgba(239, 175, 175, 1);
54
- --dds-color-danger-light: rgba(228, 115, 115, 1);
55
- --dds-color-danger-base: rgba(216, 55, 55, 1); /* Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett. */
56
- --dds-color-danger-dark: rgba(173, 44, 44, 1);
57
- --dds-color-danger-darker: rgba(130, 33, 33, 1);
58
- --dds-color-danger-darkest: rgba(86, 22, 22, 1);
59
- --dds-color-warning-lightest: rgba(254, 252, 237, 1);
60
- --dds-color-warning-lighter: rgba(251, 243, 184, 1);
61
- --dds-color-warning-light: rgba(247, 233, 130, 1);
62
- --dds-color-warning-base: rgba(244, 224, 77, 1); /* Brukes for å kommunisere varsler. */
63
- --dds-color-warning-dark: rgba(195, 179, 62, 1);
64
- --dds-color-warning-darker: rgba(146, 134, 46, 1);
65
- --dds-color-warning-darkest: rgba(98, 90, 31, 1);
66
- --dds-color-info-lightest: rgba(241, 248, 253, 1);
67
- --dds-color-info-lighter: rgba(200, 227, 245, 1);
68
- --dds-color-info-light: rgba(158, 206, 238, 1);
69
- --dds-color-info-base: rgba(117, 185, 230, 1);
70
- --dds-color-info-dark: rgba(94, 148, 184, 1);
71
- --dds-color-info-darker: rgba(70, 111, 138, 1);
72
- --dds-color-info-darkest: rgba(47, 74, 92, 1);
7
+ --dds-color-primary-lightest: #eaeff4;
8
+ --dds-color-primary-lighter: #acbbc6;
9
+ --dds-color-primary-light: #4f6a7e;
10
+ --dds-color-primary-base: #354754;
11
+ --dds-color-primary-dark: #313d45;
12
+ --dds-color-primary-darker: #202b32;
13
+ --dds-color-primary-darkest: #151c22;
14
+ --dds-color-neutrals-white: #ffffff;
15
+ --dds-color-neutrals-gray1: #f8f9f9;
16
+ --dds-color-neutrals-gray2: #ebecee;
17
+ --dds-color-neutrals-gray3: #cfd4d7;
18
+ --dds-color-neutrals-gray4: #adb5ba;
19
+ --dds-color-neutrals-gray5: #77838c;
20
+ --dds-color-neutrals-gray6: #545c62;
21
+ --dds-color-neutrals-gray7: #3a4146;
22
+ --dds-color-neutrals-gray8: #22272a;
23
+ --dds-color-neutrals-gray9: #0b0d0e;
24
+ --dds-color-interactive-lightest: #e7f1f7;
25
+ --dds-color-interactive-lighter: #9fc5de;
26
+ --dds-color-interactive-light: #589ac6;
27
+ --dds-color-interactive-base: #106ead;
28
+ --dds-color-interactive-dark: #0d588a;
29
+ --dds-color-interactive-darker: #0a4268;
30
+ --dds-color-interactive-darkest: #062c45;
31
+ --dds-color-secondary-lightest: #e6eded;
32
+ --dds-color-secondary-lighter: #cddbdb;
33
+ --dds-color-secondary-light: #b8cdcd;
34
+ --dds-color-secondary-base: #9ab8b7;
35
+ --dds-color-secondary-dark: #7b9392;
36
+ --dds-color-secondary-darker: #4d6463;
37
+ --dds-color-secondary-darkest: #3e4a49;
38
+ --dds-color-tertiary-lightest: #ffe6df;
39
+ --dds-color-tertiary-lighter: #ffd6ca;
40
+ --dds-color-tertiary-light: #f6c1b1;
41
+ --dds-color-tertiary-base: #f2a68f;
42
+ --dds-color-tertiary-dark: #f59877;
43
+ --dds-color-tertiary-darker: #f27e55;
44
+ --dds-color-tertiary-darkest: #c26544;
45
+ --dds-color-success-lightest: #f0f9f0;
46
+ --dds-color-success-lighter: #c1e5c2;
47
+ --dds-color-success-light: #93d294;
48
+ --dds-color-success-base: #65be66;
49
+ --dds-color-success-dark: #519852;
50
+ --dds-color-success-darker: #3d723d;
51
+ --dds-color-success-darkest: #284c29;
52
+ --dds-color-danger-lightest: #fbebeb;
53
+ --dds-color-danger-lighter: #efafaf;
54
+ --dds-color-danger-light: #e47373;
55
+ --dds-color-danger-base: #d83737;
56
+ --dds-color-danger-dark: #ad2c2c;
57
+ --dds-color-danger-darker: #822121;
58
+ --dds-color-danger-darkest: #561616;
59
+ --dds-color-warning-lightest: #fefced;
60
+ --dds-color-warning-lighter: #fbf3b8;
61
+ --dds-color-warning-light: #f7e982;
62
+ --dds-color-warning-base: #f4e04d;
63
+ --dds-color-warning-dark: #c3b33e;
64
+ --dds-color-warning-darker: #92862e;
65
+ --dds-color-warning-darkest: #625a1f;
66
+ --dds-color-info-lightest: #f1f8fd;
67
+ --dds-color-info-lighter: #c8e3f5;
68
+ --dds-color-info-light: #9eceee;
69
+ --dds-color-info-base: #75b9e6;
70
+ --dds-color-info-dark: #5e94b8;
71
+ --dds-color-info-darker: #466f8a;
72
+ --dds-color-info-darkest: #2f4a5c;
73
+ --dds-color-visited-base: #7F29B4;
74
+ --dds-color-visited-lighter: #CCA9E1;
75
+ --dds-color-bg-default: #ffffff;
76
+ --dds-color-bg-subtle: #f8f9f9;
77
+ --dds-color-surface-default: #ffffff;
78
+ --dds-color-surface-subtle: #f8f9f9;
79
+ --dds-color-surface-medium: #ebecee;
80
+ --dds-color-surface-hover-default: #e7f1f7;
81
+ --dds-color-surface-hover-subtle: #f8f9f9;
82
+ --dds-color-surface-selected-default: #e7f1f7;
83
+ --dds-color-surface-inverse-default: #354754;
84
+ --dds-color-surface-inverse-hover: #313d45;
85
+ --dds-color-surface-inverse-selected: #202b32;
86
+ --dds-color-surface-action-resting: #106ead;
87
+ --dds-color-surface-action-hover: #0d588a;
88
+ --dds-color-surface-action-selected: #106ead;
89
+ --dds-color-surface-action-danger-resting: #d83737;
90
+ --dds-color-surface-action-danger-hover: #ad2c2c;
91
+ --dds-color-surface-action-selected-disabled: #77838c;
92
+ --dds-color-surface-danger-default: #fbebeb;
93
+ --dds-color-surface-danger-strong: #e47373;
94
+ --dds-color-surface-success-default: #f0f9f0;
95
+ --dds-color-surface-success-strong: #93d294;
96
+ --dds-color-surface-warning-default: #fefced;
97
+ --dds-color-surface-warning-strong: #f7e982;
98
+ --dds-color-surface-info-default: #f1f8fd;
99
+ --dds-color-surface-info-strong: #9eceee;
100
+ --dds-color-surface-paper-default: #ffffff;
101
+ --dds-color-surface-backdrop-default: #0b0d0e80;
102
+ --dds-color-surface-field-default: #ffffff;
103
+ --dds-color-surface-field-disabled: #f8f9f9;
104
+ --dds-color-surface-highlighted-default: #ffe6df;
105
+ --dds-color-surface-scrollbar: #adb5ba;
106
+ --dds-color-surface-notification: #d83737;
107
+ --dds-color-border-default: #77838c;
108
+ --dds-color-border-subtle: #cfd4d7;
109
+ --dds-color-border-inverse: #acbbc6;
110
+ --dds-color-border-action-default: #106ead;
111
+ --dds-color-border-action-hover: #0d588a;
112
+ --dds-color-border-success: #65be66;
113
+ --dds-color-border-warning: #f4e04d;
114
+ --dds-color-border-danger: #d83737;
115
+ --dds-color-border-info: #75b9e6;
116
+ --dds-color-border-on-action: #ffffff;
117
+ --dds-color-text-default: #0b0d0e;
118
+ --dds-color-text-medium: #3a4146;
119
+ --dds-color-text-subtle: #545c62;
120
+ --dds-color-text-on-inverse: #ffffff;
121
+ --dds-color-text-on-action: #ffffff;
122
+ --dds-color-text-on-status-default: #0b0d0e;
123
+ --dds-color-text-on-status-strong: #0b0d0e;
124
+ --dds-color-text-action-resting: #106ead;
125
+ --dds-color-text-action-hover: #0d588a;
126
+ --dds-color-text-requiredfield: #d83737;
127
+ --dds-color-text-action-visited: #7F29B4;
128
+ --dds-color-text-on-notification: #ffffff;
129
+ --dds-color-icon-default: #0b0d0e;
130
+ --dds-color-icon-medium: #3a4146;
131
+ --dds-color-icon-subtle: #545c62;
132
+ --dds-color-icon-on-inverse: #ffffff;
133
+ --dds-color-icon-on-action: #ffffff;
134
+ --dds-color-icon-action-resting: #106ead;
135
+ --dds-color-icon-action-hover: #0d588a;
136
+ --dds-color-icon-on-success-default: #3d723d;
137
+ --dds-color-icon-on-success-strong: #0b0d0e;
138
+ --dds-color-icon-on-warning-default: #92862e;
139
+ --dds-color-icon-on-warning-strong: #0b0d0e;
140
+ --dds-color-icon-on-danger-default: #ad2c2c;
141
+ --dds-color-icon-on-danger-strong: #0b0d0e;
142
+ --dds-color-icon-on-info-default: #466f8a;
143
+ --dds-color-icon-on-info-strong: #0b0d0e;
144
+ --dds-color-brand-primary-default: #354754;
145
+ --dds-color-brand-primary-subtle: #eaeff4;
146
+ --dds-color-brand-primary-medium: #acbbc6;
147
+ --dds-color-brand-primary-strong: #202b32;
148
+ --dds-color-brand-secondary-default: #9ab8b7;
149
+ --dds-color-brand-secondary-subtle: #e6eded;
150
+ --dds-color-brand-secondary-medium: #b8cdcd;
151
+ --dds-color-brand-secondary-strong: #4d6463;
152
+ --dds-color-brand-tertiary-default: #f2a68f;
153
+ --dds-color-brand-tertiary-subtle: #ffe6df;
154
+ --dds-color-brand-tertiary-medium: #f6c1b1;
155
+ --dds-color-brand-tertiary-strong: #f27e55;
156
+ --dds-color-focus-outside: #2f4a5c;
157
+ --dds-color-focus-inside: #f1f8fd;
73
158
  }
package/dist/css/ddsTokens.css CHANGED
@@ -1,115 +1,9 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Jan 2024 11:05:28 GMT
3
+ * Generated on Mon, 10 Jun 2024 11:27:50 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --dds-breakpoint-xs: 1px;
8
- --dds-breakpoint-sm: 600px;
9
- --dds-breakpoint-md: 960px;
10
- --dds-breakpoint-lg: 1280px;
11
- --dds-breakpoint-xl: 1920px;
12
- --dds-color-primary-lightest: rgba(234, 239, 244, 1);
13
- --dds-color-primary-lighter: rgba(172, 187, 198, 1);
14
- --dds-color-primary-light: rgba(79, 106, 126, 1);
15
- --dds-color-primary-base: rgba(
16
- 53,
17
- 71,
18
- 84,
19
- 1
20
- ); /* Primary er hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
21
- --dds-color-primary-dark: rgba(49, 61, 69, 1);
22
- --dds-color-primary-darker: rgba(32, 43, 50, 1);
23
- --dds-color-primary-darkest: rgba(21, 28, 34, 1);
24
- --dds-color-neutrals-white: rgba(255, 255, 255, 1);
25
- --dds-color-neutrals-gray-1: rgba(248, 249, 249, 1);
26
- --dds-color-neutrals-gray-2: rgba(235, 236, 238, 1);
27
- --dds-color-neutrals-gray-3: rgba(207, 212, 215, 1);
28
- --dds-color-neutrals-gray-4: rgba(173, 181, 186, 1);
29
- --dds-color-neutrals-gray-5: rgba(119, 131, 140, 1);
30
- --dds-color-neutrals-gray-6: rgba(84, 92, 98, 1);
31
- --dds-color-neutrals-gray-7: rgba(58, 65, 70, 1);
32
- --dds-color-neutrals-gray-8: rgba(34, 39, 42, 1);
33
- --dds-color-neutrals-gray-9: rgba(11, 13, 14, 1);
34
- --dds-color-interactive-lightest: rgba(231, 241, 247, 1);
35
- --dds-color-interactive-lighter: rgba(159, 197, 222, 1);
36
- --dds-color-interactive-light: rgba(88, 154, 198, 1);
37
- --dds-color-interactive-base: rgba(
38
- 16,
39
- 110,
40
- 173,
41
- 1
42
- ); /* Interactive brukes til interaksjon. Dette er vanligvis knapper og lenker. Den brukes ofte for å indikere at en komponent er klikkbar eller at man interagerer med den */
43
- --dds-color-interactive-dark: rgba(13, 88, 138, 1);
44
- --dds-color-interactive-darker: rgba(10, 66, 104, 1);
45
- --dds-color-interactive-darkest: rgba(6, 44, 69, 1);
46
- --dds-color-secondary-lightest: rgba(230, 237, 237, 1); /* --l80 */
47
- --dds-color-secondary-lighter: rgba(205, 219, 219, 1);
48
- --dds-color-secondary-light: rgba(184, 205, 205, 1);
49
- --dds-color-secondary-base: rgba(
50
- 154,
51
- 184,
52
- 183,
53
- 1
54
- ); /* Secondary er den andre hovedfargen til Domstolene. Denne brukes ofte som bakgrunnsfarge og i komponenter. */
55
- --dds-color-secondary-dark: rgba(123, 147, 146, 1);
56
- --dds-color-secondary-darker: rgba(77, 100, 99, 1);
57
- --dds-color-secondary-darkest: rgba(62, 74, 73, 1);
58
- --dds-color-tertiary-lightest: rgba(255, 230, 223, 1);
59
- --dds-color-tertiary-lighter: rgba(255, 214, 202, 1);
60
- --dds-color-tertiary-light: rgba(246, 193, 177, 1);
61
- --dds-color-tertiary-base: rgba(
62
- 242,
63
- 166,
64
- 143,
65
- 1
66
- ); /* Tertiary er er den tredje profilfargen til Domstolene. Denne brukes gjerne som støttefarge */
67
- --dds-color-tertiary-dark: rgba(245, 152, 119, 1);
68
- --dds-color-tertiary-darker: rgba(242, 126, 85, 1);
69
- --dds-color-tertiary-darkest: rgba(194, 101, 68, 1);
70
- --dds-color-success-lightest: rgba(240, 249, 240, 1);
71
- --dds-color-success-lighter: rgba(193, 229, 194, 1);
72
- --dds-color-success-light: rgba(147, 210, 148, 1);
73
- --dds-color-success-base: rgba(
74
- 101,
75
- 190,
76
- 102,
77
- 1
78
- ); /* Brukes for å kommunisere suksess eller noe som er riktig. */
79
- --dds-color-success-dark: rgba(81, 152, 82, 1);
80
- --dds-color-success-darker: rgba(61, 114, 61, 1);
81
- --dds-color-success-darkest: rgba(40, 76, 41, 1);
82
- --dds-color-danger-lightest: rgba(251, 235, 235, 1);
83
- --dds-color-danger-lighter: rgba(239, 175, 175, 1);
84
- --dds-color-danger-light: rgba(228, 115, 115, 1);
85
- --dds-color-danger-base: rgba(
86
- 216,
87
- 55,
88
- 55,
89
- 1
90
- ); /* Brukes for å kommunisere feil og destruktive handlinger, som f.eks. slett. */
91
- --dds-color-danger-dark: rgba(173, 44, 44, 1);
92
- --dds-color-danger-darker: rgba(130, 33, 33, 1);
93
- --dds-color-danger-darkest: rgba(86, 22, 22, 1);
94
- --dds-color-warning-lightest: rgba(254, 252, 237, 1);
95
- --dds-color-warning-lighter: rgba(251, 243, 184, 1);
96
- --dds-color-warning-light: rgba(247, 233, 130, 1);
97
- --dds-color-warning-base: rgba(
98
- 244,
99
- 224,
100
- 77,
101
- 1
102
- ); /* Brukes for å kommunisere varsler. */
103
- --dds-color-warning-dark: rgba(195, 179, 62, 1);
104
- --dds-color-warning-darker: rgba(146, 134, 46, 1);
105
- --dds-color-warning-darkest: rgba(98, 90, 31, 1);
106
- --dds-color-info-lightest: rgba(241, 248, 253, 1);
107
- --dds-color-info-lighter: rgba(200, 227, 245, 1);
108
- --dds-color-info-light: rgba(158, 206, 238, 1);
109
- --dds-color-info-base: rgba(117, 185, 230, 1);
110
- --dds-color-info-dark: rgba(94, 148, 184, 1);
111
- --dds-color-info-darker: rgba(70, 111, 138, 1);
112
- --dds-color-info-darkest: rgba(47, 74, 92, 1);
113
7
  --dds-font-heading-sans-01-font-size: 16px;
114
8
  --dds-font-heading-sans-01-text-decoration: none;
115
9
  --dds-font-heading-sans-01-font-family: 'IBM Plex Sans';
@@ -385,95 +279,200 @@
385
279
  --dds-font-code-monospace-02-paragraph-indent: 0px;
386
280
  --dds-font-code-monospace-02-paragraph-spacing: 9px;
387
281
  --dds-font-code-monospace-02-text-case: none;
388
- --borders-dds-border-focus-base-stroke-align: inside;
389
- --borders-dds-border-focus-base-stroke-miter-limit: 4;
390
- --borders-dds-border-focus-base-stroke-weight: 1px;
391
- --borders-dds-border-focus-base-stroke: rgba(98, 90, 31, 1);
392
- --borders-dds-border-focus-ondark-stroke-align: inside;
393
- --borders-dds-border-focus-ondark-stroke-miter-limit: 4;
394
- --borders-dds-border-focus-ondark-stroke-weight: 1px;
395
- --borders-dds-border-focus-ondark-stroke: rgba(251, 243, 184, 1);
396
- --borders-dds-border-focus-inputfield-stroke-align: inside;
397
- --borders-dds-border-focus-inputfield-stroke-miter-limit: 4;
398
- --borders-dds-border-focus-inputfield-stroke-weight: 2px;
399
- --borders-dds-border-focus-inputfield-stroke: rgba(16, 110, 173, 1);
400
- --borders-dds-border-focus-card-stroke-align: outside;
401
- --borders-dds-border-focus-card-stroke-miter-limit: 4;
402
- --borders-dds-border-focus-card-stroke-weight: 2px;
403
- --borders-dds-border-focus-card-stroke: rgba(98, 90, 31, 1);
404
- --borders-dds-border-style-light-stroke-align: inside;
405
- --borders-dds-border-style-light-stroke-miter-limit: 4;
406
- --borders-dds-border-style-light-stroke-weight: 1px;
407
- --borders-dds-border-style-light-stroke: rgba(172, 187, 198, 1);
408
- --borders-dds-border-style-dark-stroke-align: inside;
409
- --borders-dds-border-style-dark-stroke-miter-limit: 4;
410
- --borders-dds-border-style-dark-stroke-weight: 1px;
411
- --borders-dds-border-style-dark-stroke: rgba(53, 71, 84, 1);
412
- --radii-dds-border-radius-1-radius: 2px;
413
- --radii-dds-border-radius-1-radii-top-left: 2px;
414
- --radii-dds-border-radius-1-radii-top-right: 2px;
415
- --radii-dds-border-radius-1-radii-bottom-right: 2px;
416
- --radii-dds-border-radius-1-radii-bottom-left: 2px;
417
- --radii-dds-border-radius-2-radius: 4px;
418
- --radii-dds-border-radius-2-radii-top-left: 4px;
419
- --radii-dds-border-radius-2-radii-top-right: 4px;
420
- --radii-dds-border-radius-2-radii-bottom-right: 4px;
421
- --radii-dds-border-radius-2-radii-bottom-left: 4px;
422
- --radii-dds-border-radius-3-radius: 8px;
423
- --radii-dds-border-radius-3-radii-top-left: 8px;
424
- --radii-dds-border-radius-3-radii-top-right: 8px;
425
- --radii-dds-border-radius-3-radii-bottom-right: 8px;
426
- --radii-dds-border-radius-3-radii-bottom-left: 8px;
427
- --dds-innershadow-1-ondark: 1px 2px 4px 0px rgba(0, 0, 0, 0.5) inset;
428
- --dds-innershadow-1-onlight: 1px 2px 4px 0px rgba(0, 0, 0, 0.1) inset;
429
- --dds-innershadow-2-ondark: 2px 4px 8px 0px rgba(0, 0, 0, 0.5) inset;
430
- --dds-innershadow-2-onlight: 2px 4px 8px 0px rgba(0, 0, 0, 0.1) inset;
431
- --dds-shadow-1-ondark: 1px 2px 4px 0px rgba(0, 0, 0, 0.5);
432
- --dds-shadow-1-onlight: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
433
- --dds-shadow-2-ondark: 2px 4px 8px 0px rgba(0, 0, 0, 0.5);
434
- --dds-shadow-2-onlight: 2px 4px 8px 0px rgba(0, 0, 0, 0.1);
435
- --dds-shadow-3-ondark: 4px 8px 16px 0px rgba(0, 0, 0, 0.5);
436
- --dds-shadow-3-onlight: 4px 8px 16px 0px rgba(0, 0, 0, 0.1);
437
- --dds-shadow-4-ondark: 8px 16px 32px 0px rgba(0, 0, 0, 0.5);
438
- --dds-shadow-4-onlight: 8px 16px 32px 0px rgba(0, 0, 0, 0.1);
439
- --dds-grid-xs-0-599-pattern: columns;
440
- --dds-grid-xs-0-599-gutter-size: 16px;
441
- --dds-grid-xs-0-599-alignment: stretch;
442
- --dds-grid-xs-0-599-count: 4;
443
- --dds-grid-xs-0-599-offset: 16px;
444
- --dds-grid-sm-600-959-pattern: columns;
445
- --dds-grid-sm-600-959-gutter-size: 16px;
446
- --dds-grid-sm-600-959-alignment: stretch;
447
- --dds-grid-sm-600-959-count: 8;
448
- --dds-grid-sm-600-959-offset: 16px;
449
- --dds-grid-md-960-1279-pattern: columns;
450
- --dds-grid-md-960-1279-gutter-size: 24px;
451
- --dds-grid-md-960-1279-alignment: stretch;
452
- --dds-grid-md-960-1279-count: 12;
453
- --dds-grid-md-960-1279-offset: 24px;
454
- --dds-grid-lg-1280-1919-pattern: columns;
455
- --dds-grid-lg-1280-1919-gutter-size: 24px;
456
- --dds-grid-lg-1280-1919-alignment: stretch;
457
- --dds-grid-lg-1280-1919-count: 12;
458
- --dds-grid-lg-1280-1919-offset: 24px;
459
- --dds-grid-xl-1920-pattern: columns;
460
- --dds-grid-xl-1920-gutter-size: 24px;
461
- --dds-grid-xl-1920-alignment: stretch;
462
- --dds-grid-xl-1920-count: 12;
463
- --dds-grid-xl-1920-offset: 24px;
464
- --dds-iconsize-medium: 24px;
465
- --dds-iconsize-large: 40px;
466
- --dds-iconsize-small: 16px;
467
- --sizes-dds-spacing-x-3: 48px; /* 48px */
468
- --sizes-dds-spacing-x-2-5: 40px; /* 40px */
469
- --sizes-dds-spacing-x-2: 32px; /* 32px */
470
- --sizes-dds-spacing-x-10: 160px; /* 160px */
471
- --sizes-dds-spacing-x-1-5: 24px; /* 24px */
472
- --sizes-dds-spacing-x-6: 96px; /* 96px */
473
- --sizes-dds-spacing-x-1: 16px; /* 16px */
474
- --sizes-dds-spacing-x-4: 64px; /* 64px */
475
- --sizes-dds-spacing-x-0-75: 12px; /* 12px */
476
- --sizes-dds-spacing-x-0-5: 8px; /* 8px */
477
- --sizes-dds-spacing-x-0-25: 4px; /* 4px */
478
- --sizes-dds-spacing-x-0-125: 2px; /* 2px */
282
+ --dds-shadow-1-ondark: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.5);
283
+ --dds-shadow-1-onlight: 1.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.1);
284
+ --dds-shadow-2-ondark: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.5);
285
+ --dds-shadow-2-onlight: 2.0px 4.0px 8.0px 0px rgba(0, 0, 0, 0.1);
286
+ --dds-shadow-3-ondark: 4.0px 8.0px 16.0px 0px rgba(0, 0, 0, 0.5);
287
+ --dds-shadow-3-onlight: 4.0px 8.0px 16.0px 0px rgba(0, 0, 0, 0.1);
288
+ --dds-shadow-4-ondark: 8.0px 16.0px 32.0px 0px rgba(0, 0, 0, 0.5);
289
+ --dds-shadow-4-onlight: 8.0px 16.0px 32.0px 0px rgba(0, 0, 0, 0.1);
290
+ --dds-color-primary-lightest: #eaeff4;
291
+ --dds-color-primary-lighter: #acbbc6;
292
+ --dds-color-primary-light: #4f6a7e;
293
+ --dds-color-primary-base: #354754;
294
+ --dds-color-primary-dark: #313d45;
295
+ --dds-color-primary-darker: #202b32;
296
+ --dds-color-primary-darkest: #151c22;
297
+ --dds-color-neutrals-white: #ffffff;
298
+ --dds-color-neutrals-gray1: #f8f9f9;
299
+ --dds-color-neutrals-gray2: #ebecee;
300
+ --dds-color-neutrals-gray3: #cfd4d7;
301
+ --dds-color-neutrals-gray4: #adb5ba;
302
+ --dds-color-neutrals-gray5: #77838c;
303
+ --dds-color-neutrals-gray6: #545c62;
304
+ --dds-color-neutrals-gray7: #3a4146;
305
+ --dds-color-neutrals-gray8: #22272a;
306
+ --dds-color-neutrals-gray9: #0b0d0e;
307
+ --dds-color-interactive-lightest: #e7f1f7;
308
+ --dds-color-interactive-lighter: #9fc5de;
309
+ --dds-color-interactive-light: #589ac6;
310
+ --dds-color-interactive-base: #106ead;
311
+ --dds-color-interactive-dark: #0d588a;
312
+ --dds-color-interactive-darker: #0a4268;
313
+ --dds-color-interactive-darkest: #062c45;
314
+ --dds-color-secondary-lightest: #e6eded;
315
+ --dds-color-secondary-lighter: #cddbdb;
316
+ --dds-color-secondary-light: #b8cdcd;
317
+ --dds-color-secondary-base: #9ab8b7;
318
+ --dds-color-secondary-dark: #7b9392;
319
+ --dds-color-secondary-darker: #4d6463;
320
+ --dds-color-secondary-darkest: #3e4a49;
321
+ --dds-color-tertiary-lightest: #ffe6df;
322
+ --dds-color-tertiary-lighter: #ffd6ca;
323
+ --dds-color-tertiary-light: #f6c1b1;
324
+ --dds-color-tertiary-base: #f2a68f;
325
+ --dds-color-tertiary-dark: #f59877;
326
+ --dds-color-tertiary-darker: #f27e55;
327
+ --dds-color-tertiary-darkest: #c26544;
328
+ --dds-color-success-lightest: #f0f9f0;
329
+ --dds-color-success-lighter: #c1e5c2;
330
+ --dds-color-success-light: #93d294;
331
+ --dds-color-success-base: #65be66;
332
+ --dds-color-success-dark: #519852;
333
+ --dds-color-success-darker: #3d723d;
334
+ --dds-color-success-darkest: #284c29;
335
+ --dds-color-danger-lightest: #fbebeb;
336
+ --dds-color-danger-lighter: #efafaf;
337
+ --dds-color-danger-light: #e47373;
338
+ --dds-color-danger-base: #d83737;
339
+ --dds-color-danger-dark: #ad2c2c;
340
+ --dds-color-danger-darker: #822121;
341
+ --dds-color-danger-darkest: #561616;
342
+ --dds-color-warning-lightest: #fefced;
343
+ --dds-color-warning-lighter: #fbf3b8;
344
+ --dds-color-warning-light: #f7e982;
345
+ --dds-color-warning-base: #f4e04d;
346
+ --dds-color-warning-dark: #c3b33e;
347
+ --dds-color-warning-darker: #92862e;
348
+ --dds-color-warning-darkest: #625a1f;
349
+ --dds-color-info-lightest: #f1f8fd;
350
+ --dds-color-info-lighter: #c8e3f5;
351
+ --dds-color-info-light: #9eceee;
352
+ --dds-color-info-base: #75b9e6;
353
+ --dds-color-info-dark: #5e94b8;
354
+ --dds-color-info-darker: #466f8a;
355
+ --dds-color-info-darkest: #2f4a5c;
356
+ --dds-color-visited-base: #7F29B4;
357
+ --dds-color-visited-lighter: #CCA9E1;
358
+ --dds-color-bg-default: #ffffff;
359
+ --dds-color-bg-subtle: #f8f9f9;
360
+ --dds-color-surface-default: #ffffff;
361
+ --dds-color-surface-subtle: #f8f9f9;
362
+ --dds-color-surface-medium: #ebecee;
363
+ --dds-color-surface-hover-default: #e7f1f7;
364
+ --dds-color-surface-hover-subtle: #f8f9f9;
365
+ --dds-color-surface-selected-default: #e7f1f7;
366
+ --dds-color-surface-inverse-default: #354754;
367
+ --dds-color-surface-inverse-hover: #313d45;
368
+ --dds-color-surface-inverse-selected: #202b32;
369
+ --dds-color-surface-action-resting: #106ead;
370
+ --dds-color-surface-action-hover: #0d588a;
371
+ --dds-color-surface-action-selected: #106ead;
372
+ --dds-color-surface-action-danger-resting: #d83737;
373
+ --dds-color-surface-action-danger-hover: #ad2c2c;
374
+ --dds-color-surface-action-selected-disabled: #77838c;
375
+ --dds-color-surface-danger-default: #fbebeb;
376
+ --dds-color-surface-danger-strong: #e47373;
377
+ --dds-color-surface-success-default: #f0f9f0;
378
+ --dds-color-surface-success-strong: #93d294;
379
+ --dds-color-surface-warning-default: #fefced;
380
+ --dds-color-surface-warning-strong: #f7e982;
381
+ --dds-color-surface-info-default: #f1f8fd;
382
+ --dds-color-surface-info-strong: #9eceee;
383
+ --dds-color-surface-paper-default: #ffffff;
384
+ --dds-color-surface-backdrop-default: #0b0d0e80;
385
+ --dds-color-surface-field-default: #ffffff;
386
+ --dds-color-surface-field-disabled: #f8f9f9;
387
+ --dds-color-surface-highlighted-default: #ffe6df;
388
+ --dds-color-surface-scrollbar: #adb5ba;
389
+ --dds-color-surface-notification: #d83737;
390
+ --dds-color-border-default: #77838c;
391
+ --dds-color-border-subtle: #cfd4d7;
392
+ --dds-color-border-inverse: #acbbc6;
393
+ --dds-color-border-action-default: #106ead;
394
+ --dds-color-border-action-hover: #0d588a;
395
+ --dds-color-border-success: #65be66;
396
+ --dds-color-border-warning: #f4e04d;
397
+ --dds-color-border-danger: #d83737;
398
+ --dds-color-border-info: #75b9e6;
399
+ --dds-color-border-on-action: #ffffff;
400
+ --dds-color-text-default: #0b0d0e;
401
+ --dds-color-text-medium: #3a4146;
402
+ --dds-color-text-subtle: #545c62;
403
+ --dds-color-text-on-inverse: #ffffff;
404
+ --dds-color-text-on-action: #ffffff;
405
+ --dds-color-text-on-status-default: #0b0d0e;
406
+ --dds-color-text-on-status-strong: #0b0d0e;
407
+ --dds-color-text-action-resting: #106ead;
408
+ --dds-color-text-action-hover: #0d588a;
409
+ --dds-color-text-requiredfield: #d83737;
410
+ --dds-color-text-action-visited: #7F29B4;
411
+ --dds-color-text-on-notification: #ffffff;
412
+ --dds-color-icon-default: #0b0d0e;
413
+ --dds-color-icon-medium: #3a4146;
414
+ --dds-color-icon-subtle: #545c62;
415
+ --dds-color-icon-on-inverse: #ffffff;
416
+ --dds-color-icon-on-action: #ffffff;
417
+ --dds-color-icon-action-resting: #106ead;
418
+ --dds-color-icon-action-hover: #0d588a;
419
+ --dds-color-icon-on-success-default: #3d723d;
420
+ --dds-color-icon-on-success-strong: #0b0d0e;
421
+ --dds-color-icon-on-warning-default: #92862e;
422
+ --dds-color-icon-on-warning-strong: #0b0d0e;
423
+ --dds-color-icon-on-danger-default: #ad2c2c;
424
+ --dds-color-icon-on-danger-strong: #0b0d0e;
425
+ --dds-color-icon-on-info-default: #466f8a;
426
+ --dds-color-icon-on-info-strong: #0b0d0e;
427
+ --dds-color-brand-primary-default: #354754;
428
+ --dds-color-brand-primary-subtle: #eaeff4;
429
+ --dds-color-brand-primary-medium: #acbbc6;
430
+ --dds-color-brand-primary-strong: #202b32;
431
+ --dds-color-brand-secondary-default: #9ab8b7;
432
+ --dds-color-brand-secondary-subtle: #e6eded;
433
+ --dds-color-brand-secondary-medium: #b8cdcd;
434
+ --dds-color-brand-secondary-strong: #4d6463;
435
+ --dds-color-brand-tertiary-default: #f2a68f;
436
+ --dds-color-brand-tertiary-subtle: #ffe6df;
437
+ --dds-color-brand-tertiary-medium: #f6c1b1;
438
+ --dds-color-brand-tertiary-strong: #f27e55;
439
+ --dds-color-focus-outside: #2f4a5c;
440
+ --dds-color-focus-inside: #f1f8fd;
441
+ --dds-border-radius-0: 0px;
442
+ --dds-border-radius-1: 2px;
443
+ --dds-border-radius-2: 4px;
444
+ --dds-border-radius-3: 8px;
445
+ --dds-border-radius-100: 9999px;
446
+ --dds-spacing-x0: 0px;
447
+ --dds-spacing-x0-125: 2px;
448
+ --dds-spacing-x0-25: 4px;
449
+ --dds-spacing-x0-5: 8px;
450
+ --dds-spacing-x0-75: 12px;
451
+ --dds-spacing-x1: 16px;
452
+ --dds-spacing-x1-5: 24px;
453
+ --dds-spacing-x2: 32px;
454
+ --dds-spacing-x2-5: 40px;
455
+ --dds-spacing-x3: 48px;
456
+ --dds-spacing-x4: 64px;
457
+ --dds-spacing-x6: 96px;
458
+ --dds-spacing-x10: 160px;
459
+ --dds-spacing-padding-top-heading: 0.7em;
460
+ --dds-icon-size-large: 40px;
461
+ --dds-icon-size-medium: 24px;
462
+ --dds-icon-size-small: 16px;
463
+ --dds-grid-xs-count: 4;
464
+ --dds-grid-xs-gutter-size: 16px;
465
+ --dds-grid-sm-count: 8;
466
+ --dds-grid-sm-gutter-size: 16px;
467
+ --dds-grid-lg-count: 12;
468
+ --dds-grid-lg-gutter-size: 24px;
469
+ --dds-grid-md-count: 12;
470
+ --dds-grid-md-gutter-size: 24px;
471
+ --dds-grid-xl-count: 12;
472
+ --dds-grid-xl-gutter-size: 24px;
473
+ --dds-breakpoint-xs: 1px;
474
+ --dds-breakpoint-sm: 600px;
475
+ --dds-breakpoint-md: 960px;
476
+ --dds-breakpoint-lg: 1280px;
477
+ --dds-breakpoint-xl: 1920px;
479
478
  }