@ndwnu/design-system 14.1.2 → 14.2.1

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 (55) hide show
  1. package/CLAUDE.md +1525 -1525
  2. package/README.md +4 -4
  3. package/assets/icons.ts +83 -83
  4. package/fesm2022/ndwnu-design-system.mjs +168 -157
  5. package/fesm2022/ndwnu-design-system.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/FONTS.md +46 -46
  8. package/styles/base/_colors.scss +246 -246
  9. package/styles/base/_fonts.scss +13 -13
  10. package/styles/base/_material.scss +17 -17
  11. package/styles/base/_typography.scss +133 -133
  12. package/styles/base/_variables.scss +92 -92
  13. package/styles/base/colors.stories.model.ts +85 -85
  14. package/styles/base/colors.stories.ts +24 -24
  15. package/styles/base/index.scss +5 -5
  16. package/styles/base/typography.stories.ts +111 -111
  17. package/styles/components/_button.scss +133 -133
  18. package/styles/components/_card.scss +3 -3
  19. package/styles/components/_datepicker.scss +134 -134
  20. package/styles/components/_divider.scss +10 -10
  21. package/styles/components/_dropdown.scss +8 -8
  22. package/styles/components/_edit-bar.scss +97 -97
  23. package/styles/components/_filter-button.scss +39 -39
  24. package/styles/components/_guided-tour.scss +70 -70
  25. package/styles/components/_input.scss +253 -253
  26. package/styles/components/_label.scss +23 -23
  27. package/styles/components/_link.scss +36 -36
  28. package/styles/components/_list-item.scss +7 -7
  29. package/styles/components/_map.scss +114 -114
  30. package/styles/components/_menu-button.scss +37 -37
  31. package/styles/components/_popover.scss +19 -19
  32. package/styles/components/_summary-card.scss +183 -183
  33. package/styles/components/_table.scss +8 -8
  34. package/styles/components/divider.stories.ts +80 -80
  35. package/styles/components/index.scss +17 -17
  36. package/styles/components/link.stories.ts +154 -154
  37. package/styles/index.scss +4 -4
  38. package/styles/layout/_grid.scss +165 -165
  39. package/styles/layout/_overlay.scss +7 -7
  40. package/styles/layout/grid.stories.ts +168 -168
  41. package/styles/layout/index.scss +2 -2
  42. package/styles/storybook/_core.scss +60 -60
  43. package/styles/storybook/_reset.scss +21 -21
  44. package/styles/storybook/index.scss +17 -17
  45. package/styles/storybook/overrides/_buttons.scss +95 -95
  46. package/styles/storybook/overrides/_code-previews.scss +97 -97
  47. package/styles/storybook/overrides/_content.scss +24 -24
  48. package/styles/storybook/overrides/_headers.scss +31 -31
  49. package/styles/storybook/overrides/_layout.scss +44 -44
  50. package/styles/storybook/overrides/_table.scss +112 -112
  51. package/styles/storybook/overrides/index.scss +6 -6
  52. package/styles/storybook/overrides.css +355 -355
  53. package/styles/utils/_screenreader.scss +13 -13
  54. package/styles/utils/classes.stories.ts +157 -157
  55. package/styles/utils/index.scss +1 -1
package/styles/storybook/overrides.css CHANGED
@@ -1,355 +1,355 @@
1
- :root {
2
- --_grey-700: 195, 100%, 10%;
3
- --_grey-600: 196, 13%, 29%;
4
- --_grey-500: 197, 7%, 40%;
5
- --_grey-400: 204, 2%, 54%;
6
- --_grey-300: 192, 5%, 82%;
7
- --_grey-200: 204, 11%, 91%;
8
- --_grey-100: 200, 16%, 96%;
9
- --_white: 0, 0%, 100%;
10
-
11
- --ndw-color-grey-700: hsl(var(--_grey-700));
12
- --ndw-color-grey-600: hsl(var(--_grey-600));
13
- --ndw-color-grey-500: hsl(var(--_grey-500));
14
- --ndw-color-grey-400: hsl(var(--_grey-400));
15
- --ndw-color-grey-300: hsl(var(--_grey-300));
16
- --ndw-color-grey-200: hsl(var(--_grey-200));
17
- --ndw-color-grey-100: hsl(var(--_grey-100));
18
- --ndw-color-white: hsl(var(--_white));
19
-
20
- --_primary: 19, 100%;
21
- --_primary-050: var(--_primary), 95%;
22
- --_primary-100: var(--_primary), 80%;
23
- --_primary-200: var(--_primary), 73%;
24
- --_primary-300: var(--_primary), 62%;
25
- --_primary-400: var(--_primary), 50%;
26
- --_primary-500: var(--_primary), 40%;
27
- --_primary-600: var(--_primary), 35%;
28
- --_primary-700: var(--_primary), 27%;
29
- --_primary-800: var(--_primary), 15%;
30
-
31
- --ndw-color-primary-050: hsl(var(--_primary-050));
32
- --ndw-color-primary-100: hsl(var(--_primary-100));
33
- --ndw-color-primary-200: hsl(var(--_primary-200));
34
- --ndw-color-primary-300: hsl(var(--_primary-300));
35
- --ndw-color-primary-400: hsl(var(--_primary-400));
36
- --ndw-color-primary-500: hsl(var(--_primary-500));
37
- --ndw-color-primary-600: hsl(var(--_primary-600));
38
- --ndw-color-primary-700: hsl(var(--_primary-700));
39
- --ndw-color-primary-800: hsl(var(--_primary-800));
40
-
41
- --ndw-color-primary: var(--ndw-color-primary-500);
42
- --ndw-color-primary-hover: var(--ndw-color-primary-600);
43
- --ndw-color-primary-active: var(--ndw-color-primary-700);
44
-
45
- --_secondary-050: 209, 100%, 96%;
46
- --_secondary-100: 209, 85%, 91%;
47
- --_secondary-200: 209, 85%, 78%;
48
- --_secondary-300: 209, 85%, 69%;
49
- --_secondary-400: 208, 100%, 46%;
50
- --_secondary-500: 208, 100%, 41%;
51
- --_secondary-600: 209, 100%, 32%;
52
- --_secondary-700: 209, 100%, 18%;
53
-
54
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
55
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
56
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
57
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
58
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
59
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
60
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
61
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
62
-
63
- --ndw-color-secondary: var(--ndw-color-secondary-500);
64
- --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
65
- --ndw-color-secondary-active: var(--ndw-color-secondary-700);
66
-
67
- --_tertiary-400: 43, 100%, 50%;
68
- --_tertiary-500: 42, 100%, 43%;
69
-
70
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
71
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
72
-
73
- --_link: 208, 100%;
74
- --_link-400: var(--_link), 41%;
75
- --_link-500: var(--_link), 32%;
76
-
77
- --ndw-color-link-400: hsl(var(--_link-400));
78
- --ndw-color-link-500: hsl(var(--_link-500));
79
-
80
- --_positive: 133, 92%;
81
- --_positive-100: 117, 56%, 92%;
82
- --_positive-500: var(--_positive), 33%;
83
- --_positive-600: var(--_positive), 24%;
84
- --_warning: 43, 93%;
85
- --_warning-100: 44, 100%, 94%;
86
- --_warning-500: var(--_warning), 43%;
87
- --_warning-600: 42, 83%, 32%;
88
- --_alternative: 292, 100%;
89
- --_alternative-100: var(--_alternative), 95%;
90
- --_alternative-500: 292, 95%, 33%;
91
- --_critical: 0, 100%;
92
- --_critical-100: var(--_critical), 98%;
93
- --_critical-200: var(--_critical), 95%;
94
- --_critical-300: var(--_critical), 90%;
95
- --_critical-500: var(--_critical), 46%;
96
- --_info-100: 210, 100%, 96%;
97
- --_info-200: 210, 86%, 91%;
98
- --_info-500: 208, 100%, 41%;
99
-
100
- --ndw-color-positive-100: hsl(var(--_positive-100));
101
- --ndw-color-positive-500: hsl(var(--_positive-500));
102
- --ndw-color-positive-600: hsl(var(--_positive-600));
103
- --ndw-color-warning-100: hsl(var(--_warning-100));
104
- --ndw-color-warning-500: hsl(var(--_warning-500));
105
- --ndw-color-warning-600: hsl(var(--_warning-600));
106
- --ndw-color-alternative-100: hsl(var(--_alternative-100));
107
- --ndw-color-alternative-500: hsl(var(--_alternative-500));
108
- --ndw-color-critical-100: hsl(var(--_critical-100));
109
- --ndw-color-critical-200: hsl(var(--_critical-200));
110
- --ndw-color-critical-300: hsl(var(--_critical-300));
111
- --ndw-color-critical-500: hsl(var(--_critical-500));
112
- --ndw-color-info-100: hsl(var(--_info-100));
113
- --ndw-color-info-200: hsl(var(--_info-200));
114
- --ndw-color-info-500: hsl(var(--_info-500));
115
-
116
- --ndw-color-notification: hsl(19, 100%, 35%);
117
-
118
- --_data-a-500: 133, 100%, 21%;
119
- --_data-a-100: 101, 61%, 81%;
120
- --_data-b-500: 0, 0%, 27%;
121
- --_data-b-100: 0, 0%, 87%;
122
- --_data-c-500: 209, 97%, 38%;
123
- --_data-c-100: 194, 95%, 84%;
124
- --_data-d-500: 292, 95%, 33%;
125
- --_data-d-100: 292, 100%, 87%;
126
- --_data-e-500: 51, 95%, 23%;
127
- --_data-e-100: 54, 89%, 79%;
128
- --_data-f-500: 0, 97%, 35%;
129
- --_data-f-100: 0, 100%, 94%;
130
-
131
- --ndw-color-data-a-500: hsl(var(--_data-a-500));
132
- --ndw-color-data-a-100: hsl(var(--_data-a-100));
133
- --ndw-color-data-b-500: hsl(var(--_data-b-500));
134
- --ndw-color-data-b-100: hsl(var(--_data-b-100));
135
- --ndw-color-data-c-500: hsl(var(--_data-c-500));
136
- --ndw-color-data-c-100: hsl(var(--_data-c-100));
137
- --ndw-color-data-d-500: hsl(var(--_data-d-500));
138
- --ndw-color-data-d-100: hsl(var(--_data-d-100));
139
- --ndw-color-data-e-500: hsl(var(--_data-e-500));
140
- --ndw-color-data-e-100: hsl(var(--_data-e-100));
141
- --ndw-color-data-f-500: hsl(var(--_data-f-500));
142
- --ndw-color-data-f-100: hsl(var(--_data-f-100));
143
-
144
- --_alpha-black: 0, 0%, 0%;
145
- --_alpha-007: 0.07;
146
- --_alpha-015: 0.15;
147
- --_alpha-040: 0.4;
148
-
149
- --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
150
- --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
151
- --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
152
-
153
- --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
154
-
155
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
156
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
157
-
158
- --ndw-color-background: var(--ndw-color-primary);
159
- --ndw-color-background-hover: var(--ndw-color-primary-hover);
160
- --ndw-color-background-active: var(--ndw-color-primary-active);
161
- --ndw-color-background-disabled: var(--ndw-color-grey-300);
162
-
163
- --ndw-color-foreground: var(--ndw-color-white);
164
- --ndw-color-foreground-hover: var(--ndw-color-white);
165
- --ndw-color-foreground-active: var(--ndw-color-white);
166
-
167
- --ndw-color-text: var(--ndw-color-grey-700);
168
-
169
- --ndw-spacing-3xs: 0.125rem;
170
- --ndw-spacing-2xs: 0.25rem;
171
- --ndw-spacing-xs: 0.5rem;
172
- --ndw-spacing-sm: 0.75rem;
173
- --ndw-spacing-md: 1rem;
174
- --ndw-spacing-lg: 1.5rem;
175
- --ndw-spacing-xl: 2rem;
176
- --ndw-spacing-2xl: 2.5rem;
177
- --ndw-spacing-3xl: 3rem;
178
- --ndw-spacing-4xl: 5rem;
179
- --ndw-spacing-5xl: 8rem;
180
-
181
- --ndw-border-size-sm: 1px;
182
- --ndw-border-size-md: 2px;
183
- --ndw-border-size-lg: 3px;
184
-
185
- --ndw-border-radius-xs: 0.125rem;
186
- --ndw-border-radius-sm: 0.25rem;
187
- --ndw-border-radius-md: 0.5rem;
188
- --ndw-border-radius-lg: 1.5rem;
189
-
190
- --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
191
- --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
192
- --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
193
- --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
194
- --ndw-backdrop-color: var(--ndw-alpha-black-040);
195
-
196
- --ndw-animation-speed-very-fast: 100ms;
197
- --ndw-animation-speed-fast: 200ms;
198
- --ndw-animation-speed-default: 300ms;
199
- --ndw-animation-speed-slow: 500ms;
200
-
201
- --ndw-icon-size-md: 1rem;
202
- --ndw-icon-size-lg: 1.5rem;
203
-
204
- --multi-select-default-width: 18.75rem;
205
-
206
- --ndw-font-family-body: 'Nunito Sans', sans-serif;
207
- --ndw-font-family-heading: 'DM Sans', sans-serif;
208
-
209
- --ndw-base-font-size: 16px;
210
-
211
- --ndw-font-size-2xs: 0.5625rem;
212
- --ndw-font-size-xs: 0.6875rem;
213
- --ndw-font-size-sm: 0.8125rem;
214
- --ndw-font-size-md: 1.125rem;
215
- --ndw-font-size-lg: 1.25rem;
216
- --ndw-font-size-xl: 1.5rem;
217
-
218
- --ndw-font-weight-regular: 400;
219
- --ndw-font-weight-bold: 650;
220
-
221
- --ndw-line-height-sm: 1.375rem;
222
- --ndw-line-height-md: 1.5rem;
223
-
224
- --ndw-rotate-half: rotate(180deg);
225
-
226
- --ndw-modal-width-sm: 31.25rem;
227
- --ndw-modal-width-md: 45rem;
228
- }
229
-
230
- [data-theme='nwb'] {
231
- --_primary-050: 176, 44%, 95%;
232
- --_primary-100: 176, 44%, 82%;
233
- --_primary-200: 176, 44%, 73%;
234
- --_primary-300: 176, 50%, 60%;
235
- --_primary-400: 176, 55%, 48%;
236
- --_primary-500: 176, 58%, 41%;
237
- --_primary-600: 176, 60%, 34%;
238
- --_primary-700: 176, 68%, 21%;
239
- --_primary-800: 176, 68%, 13%;
240
-
241
- --ndw-color-primary-050: hsl(var(--_primary-050));
242
- --ndw-color-primary-100: hsl(var(--_primary-100));
243
- --ndw-color-primary-200: hsl(var(--_primary-200));
244
- --ndw-color-primary-300: hsl(var(--_primary-300));
245
- --ndw-color-primary-400: hsl(var(--_primary-400));
246
- --ndw-color-primary-500: hsl(var(--_primary-500));
247
- --ndw-color-primary-600: hsl(var(--_primary-600));
248
- --ndw-color-primary-700: hsl(var(--_primary-700));
249
- --ndw-color-primary-800: hsl(var(--_primary-800));
250
-
251
- --_secondary-050: 339, 100%, 96%;
252
- --_secondary-100: 333, 85%, 91%;
253
- --_secondary-200: 327, 85%, 78%;
254
- --_secondary-300: 324, 85%, 69%;
255
- --_secondary-400: 320, 70%, 60%;
256
- --_secondary-500: 312, 50%, 41%;
257
- --_secondary-600: 312, 50%, 32%;
258
- --_secondary-700: 312, 100%, 20%;
259
-
260
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
261
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
262
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
263
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
264
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
265
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
266
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
267
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
268
-
269
- --_tertiary-400: 309, 29%, 36%;
270
- --_tertiary-500: 309, 29%, 18%;
271
-
272
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
273
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
274
-
275
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
276
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
277
- }
278
-
279
- body {
280
- font-family: var(--ndw-font-family-body);
281
- font-size: var(--ndw-base-font-size);
282
- }
283
-
284
- h1,
285
- h2,
286
- h3,
287
- h4,
288
- h5,
289
- h6 {
290
- &.css-11knh3z,
291
- &.css-wzniqs {
292
- font-family: var(--ndw-font-family-heading);
293
- }
294
- }
295
-
296
- .sidebar-container.css-r1cy5n {
297
- background-color: var(--ndw-color-grey-700);
298
- color: var(--ndw-color-grey-400);
299
-
300
- div.sidebar-header.css-1be7p8e {
301
- padding-left: 0.25rem;
302
- padding-top: 0.125rem;
303
-
304
- img.css-32o4gv {
305
- max-width: 130px !important;
306
- }
307
- }
308
-
309
- div.search-field.css-1bn0s81 {
310
- background-color: var(--ndw-color-white);
311
- height: 2rem;
312
- }
313
-
314
- .sidebar-item.css-ld0a14 {
315
- border-radius: 0;
316
- color: var(--ndw-color-grey-400);
317
- height: 1.75rem;
318
- margin-inline: -0.75rem;
319
-
320
- svg {
321
- &.css-1e3avu6,
322
- &.css-1omskcr,
323
- &.css-ndobih,
324
- &.css-rqpmm3,
325
- &.css-9ilfw8 {
326
- color: var(--ndw-color-grey-400);
327
- }
328
- }
329
-
330
- &:hover {
331
- background-color: var(--ndw-color-grey-600);
332
- color: var(--ndw-color-white);
333
- }
334
-
335
- &[data-selected='true'] {
336
- background-color: transparent;
337
- color: var(--ndw-color-white);
338
- font-weight: 500;
339
-
340
- svg {
341
- &.css-1e3avu6,
342
- &.css-1omskcr,
343
- &.css-ndobih,
344
- &.css-rqpmm3,
345
- &.css-9ilfw8 {
346
- color: var(--ndw-color-white);
347
- }
348
- }
349
-
350
- &:hover {
351
- background-color: var(--ndw-color-grey-600);
352
- }
353
- }
354
- }
355
- }
1
+ :root {
2
+ --_grey-700: 195, 100%, 10%;
3
+ --_grey-600: 196, 13%, 29%;
4
+ --_grey-500: 197, 7%, 40%;
5
+ --_grey-400: 204, 2%, 54%;
6
+ --_grey-300: 192, 5%, 82%;
7
+ --_grey-200: 204, 11%, 91%;
8
+ --_grey-100: 200, 16%, 96%;
9
+ --_white: 0, 0%, 100%;
10
+
11
+ --ndw-color-grey-700: hsl(var(--_grey-700));
12
+ --ndw-color-grey-600: hsl(var(--_grey-600));
13
+ --ndw-color-grey-500: hsl(var(--_grey-500));
14
+ --ndw-color-grey-400: hsl(var(--_grey-400));
15
+ --ndw-color-grey-300: hsl(var(--_grey-300));
16
+ --ndw-color-grey-200: hsl(var(--_grey-200));
17
+ --ndw-color-grey-100: hsl(var(--_grey-100));
18
+ --ndw-color-white: hsl(var(--_white));
19
+
20
+ --_primary: 19, 100%;
21
+ --_primary-050: var(--_primary), 95%;
22
+ --_primary-100: var(--_primary), 80%;
23
+ --_primary-200: var(--_primary), 73%;
24
+ --_primary-300: var(--_primary), 62%;
25
+ --_primary-400: var(--_primary), 50%;
26
+ --_primary-500: var(--_primary), 40%;
27
+ --_primary-600: var(--_primary), 35%;
28
+ --_primary-700: var(--_primary), 27%;
29
+ --_primary-800: var(--_primary), 15%;
30
+
31
+ --ndw-color-primary-050: hsl(var(--_primary-050));
32
+ --ndw-color-primary-100: hsl(var(--_primary-100));
33
+ --ndw-color-primary-200: hsl(var(--_primary-200));
34
+ --ndw-color-primary-300: hsl(var(--_primary-300));
35
+ --ndw-color-primary-400: hsl(var(--_primary-400));
36
+ --ndw-color-primary-500: hsl(var(--_primary-500));
37
+ --ndw-color-primary-600: hsl(var(--_primary-600));
38
+ --ndw-color-primary-700: hsl(var(--_primary-700));
39
+ --ndw-color-primary-800: hsl(var(--_primary-800));
40
+
41
+ --ndw-color-primary: var(--ndw-color-primary-500);
42
+ --ndw-color-primary-hover: var(--ndw-color-primary-600);
43
+ --ndw-color-primary-active: var(--ndw-color-primary-700);
44
+
45
+ --_secondary-050: 209, 100%, 96%;
46
+ --_secondary-100: 209, 85%, 91%;
47
+ --_secondary-200: 209, 85%, 78%;
48
+ --_secondary-300: 209, 85%, 69%;
49
+ --_secondary-400: 208, 100%, 46%;
50
+ --_secondary-500: 208, 100%, 41%;
51
+ --_secondary-600: 209, 100%, 32%;
52
+ --_secondary-700: 209, 100%, 18%;
53
+
54
+ --ndw-color-secondary-050: hsl(var(--_secondary-050));
55
+ --ndw-color-secondary-100: hsl(var(--_secondary-100));
56
+ --ndw-color-secondary-200: hsl(var(--_secondary-200));
57
+ --ndw-color-secondary-300: hsl(var(--_secondary-300));
58
+ --ndw-color-secondary-400: hsl(var(--_secondary-400));
59
+ --ndw-color-secondary-500: hsl(var(--_secondary-500));
60
+ --ndw-color-secondary-600: hsl(var(--_secondary-600));
61
+ --ndw-color-secondary-700: hsl(var(--_secondary-700));
62
+
63
+ --ndw-color-secondary: var(--ndw-color-secondary-500);
64
+ --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
65
+ --ndw-color-secondary-active: var(--ndw-color-secondary-700);
66
+
67
+ --_tertiary-400: 43, 100%, 50%;
68
+ --_tertiary-500: 42, 100%, 43%;
69
+
70
+ --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
71
+ --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
72
+
73
+ --_link: 208, 100%;
74
+ --_link-400: var(--_link), 41%;
75
+ --_link-500: var(--_link), 32%;
76
+
77
+ --ndw-color-link-400: hsl(var(--_link-400));
78
+ --ndw-color-link-500: hsl(var(--_link-500));
79
+
80
+ --_positive: 133, 92%;
81
+ --_positive-100: 117, 56%, 92%;
82
+ --_positive-500: var(--_positive), 33%;
83
+ --_positive-600: var(--_positive), 24%;
84
+ --_warning: 43, 93%;
85
+ --_warning-100: 44, 100%, 94%;
86
+ --_warning-500: var(--_warning), 43%;
87
+ --_warning-600: 42, 83%, 32%;
88
+ --_alternative: 292, 100%;
89
+ --_alternative-100: var(--_alternative), 95%;
90
+ --_alternative-500: 292, 95%, 33%;
91
+ --_critical: 0, 100%;
92
+ --_critical-100: var(--_critical), 98%;
93
+ --_critical-200: var(--_critical), 95%;
94
+ --_critical-300: var(--_critical), 90%;
95
+ --_critical-500: var(--_critical), 46%;
96
+ --_info-100: 210, 100%, 96%;
97
+ --_info-200: 210, 86%, 91%;
98
+ --_info-500: 208, 100%, 41%;
99
+
100
+ --ndw-color-positive-100: hsl(var(--_positive-100));
101
+ --ndw-color-positive-500: hsl(var(--_positive-500));
102
+ --ndw-color-positive-600: hsl(var(--_positive-600));
103
+ --ndw-color-warning-100: hsl(var(--_warning-100));
104
+ --ndw-color-warning-500: hsl(var(--_warning-500));
105
+ --ndw-color-warning-600: hsl(var(--_warning-600));
106
+ --ndw-color-alternative-100: hsl(var(--_alternative-100));
107
+ --ndw-color-alternative-500: hsl(var(--_alternative-500));
108
+ --ndw-color-critical-100: hsl(var(--_critical-100));
109
+ --ndw-color-critical-200: hsl(var(--_critical-200));
110
+ --ndw-color-critical-300: hsl(var(--_critical-300));
111
+ --ndw-color-critical-500: hsl(var(--_critical-500));
112
+ --ndw-color-info-100: hsl(var(--_info-100));
113
+ --ndw-color-info-200: hsl(var(--_info-200));
114
+ --ndw-color-info-500: hsl(var(--_info-500));
115
+
116
+ --ndw-color-notification: hsl(19, 100%, 35%);
117
+
118
+ --_data-a-500: 133, 100%, 21%;
119
+ --_data-a-100: 101, 61%, 81%;
120
+ --_data-b-500: 0, 0%, 27%;
121
+ --_data-b-100: 0, 0%, 87%;
122
+ --_data-c-500: 209, 97%, 38%;
123
+ --_data-c-100: 194, 95%, 84%;
124
+ --_data-d-500: 292, 95%, 33%;
125
+ --_data-d-100: 292, 100%, 87%;
126
+ --_data-e-500: 51, 95%, 23%;
127
+ --_data-e-100: 54, 89%, 79%;
128
+ --_data-f-500: 0, 97%, 35%;
129
+ --_data-f-100: 0, 100%, 94%;
130
+
131
+ --ndw-color-data-a-500: hsl(var(--_data-a-500));
132
+ --ndw-color-data-a-100: hsl(var(--_data-a-100));
133
+ --ndw-color-data-b-500: hsl(var(--_data-b-500));
134
+ --ndw-color-data-b-100: hsl(var(--_data-b-100));
135
+ --ndw-color-data-c-500: hsl(var(--_data-c-500));
136
+ --ndw-color-data-c-100: hsl(var(--_data-c-100));
137
+ --ndw-color-data-d-500: hsl(var(--_data-d-500));
138
+ --ndw-color-data-d-100: hsl(var(--_data-d-100));
139
+ --ndw-color-data-e-500: hsl(var(--_data-e-500));
140
+ --ndw-color-data-e-100: hsl(var(--_data-e-100));
141
+ --ndw-color-data-f-500: hsl(var(--_data-f-500));
142
+ --ndw-color-data-f-100: hsl(var(--_data-f-100));
143
+
144
+ --_alpha-black: 0, 0%, 0%;
145
+ --_alpha-007: 0.07;
146
+ --_alpha-015: 0.15;
147
+ --_alpha-040: 0.4;
148
+
149
+ --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
150
+ --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
151
+ --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
152
+
153
+ --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
154
+
155
+ --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
156
+ --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
157
+
158
+ --ndw-color-background: var(--ndw-color-primary);
159
+ --ndw-color-background-hover: var(--ndw-color-primary-hover);
160
+ --ndw-color-background-active: var(--ndw-color-primary-active);
161
+ --ndw-color-background-disabled: var(--ndw-color-grey-300);
162
+
163
+ --ndw-color-foreground: var(--ndw-color-white);
164
+ --ndw-color-foreground-hover: var(--ndw-color-white);
165
+ --ndw-color-foreground-active: var(--ndw-color-white);
166
+
167
+ --ndw-color-text: var(--ndw-color-grey-700);
168
+
169
+ --ndw-spacing-3xs: 0.125rem;
170
+ --ndw-spacing-2xs: 0.25rem;
171
+ --ndw-spacing-xs: 0.5rem;
172
+ --ndw-spacing-sm: 0.75rem;
173
+ --ndw-spacing-md: 1rem;
174
+ --ndw-spacing-lg: 1.5rem;
175
+ --ndw-spacing-xl: 2rem;
176
+ --ndw-spacing-2xl: 2.5rem;
177
+ --ndw-spacing-3xl: 3rem;
178
+ --ndw-spacing-4xl: 5rem;
179
+ --ndw-spacing-5xl: 8rem;
180
+
181
+ --ndw-border-size-sm: 1px;
182
+ --ndw-border-size-md: 2px;
183
+ --ndw-border-size-lg: 3px;
184
+
185
+ --ndw-border-radius-xs: 0.125rem;
186
+ --ndw-border-radius-sm: 0.25rem;
187
+ --ndw-border-radius-md: 0.5rem;
188
+ --ndw-border-radius-lg: 1.5rem;
189
+
190
+ --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
191
+ --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
192
+ --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
193
+ --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
194
+ --ndw-backdrop-color: var(--ndw-alpha-black-040);
195
+
196
+ --ndw-animation-speed-very-fast: 100ms;
197
+ --ndw-animation-speed-fast: 200ms;
198
+ --ndw-animation-speed-default: 300ms;
199
+ --ndw-animation-speed-slow: 500ms;
200
+
201
+ --ndw-icon-size-md: 1rem;
202
+ --ndw-icon-size-lg: 1.5rem;
203
+
204
+ --multi-select-default-width: 18.75rem;
205
+
206
+ --ndw-font-family-body: 'Nunito Sans', sans-serif;
207
+ --ndw-font-family-heading: 'DM Sans', sans-serif;
208
+
209
+ --ndw-base-font-size: 16px;
210
+
211
+ --ndw-font-size-2xs: 0.5625rem;
212
+ --ndw-font-size-xs: 0.6875rem;
213
+ --ndw-font-size-sm: 0.8125rem;
214
+ --ndw-font-size-md: 1.125rem;
215
+ --ndw-font-size-lg: 1.25rem;
216
+ --ndw-font-size-xl: 1.5rem;
217
+
218
+ --ndw-font-weight-regular: 400;
219
+ --ndw-font-weight-bold: 650;
220
+
221
+ --ndw-line-height-sm: 1.375rem;
222
+ --ndw-line-height-md: 1.5rem;
223
+
224
+ --ndw-rotate-half: rotate(180deg);
225
+
226
+ --ndw-modal-width-sm: 31.25rem;
227
+ --ndw-modal-width-md: 45rem;
228
+ }
229
+
230
+ [data-theme='nwb'] {
231
+ --_primary-050: 176, 44%, 95%;
232
+ --_primary-100: 176, 44%, 82%;
233
+ --_primary-200: 176, 44%, 73%;
234
+ --_primary-300: 176, 50%, 60%;
235
+ --_primary-400: 176, 55%, 48%;
236
+ --_primary-500: 176, 58%, 41%;
237
+ --_primary-600: 176, 60%, 34%;
238
+ --_primary-700: 176, 68%, 21%;
239
+ --_primary-800: 176, 68%, 13%;
240
+
241
+ --ndw-color-primary-050: hsl(var(--_primary-050));
242
+ --ndw-color-primary-100: hsl(var(--_primary-100));
243
+ --ndw-color-primary-200: hsl(var(--_primary-200));
244
+ --ndw-color-primary-300: hsl(var(--_primary-300));
245
+ --ndw-color-primary-400: hsl(var(--_primary-400));
246
+ --ndw-color-primary-500: hsl(var(--_primary-500));
247
+ --ndw-color-primary-600: hsl(var(--_primary-600));
248
+ --ndw-color-primary-700: hsl(var(--_primary-700));
249
+ --ndw-color-primary-800: hsl(var(--_primary-800));
250
+
251
+ --_secondary-050: 339, 100%, 96%;
252
+ --_secondary-100: 333, 85%, 91%;
253
+ --_secondary-200: 327, 85%, 78%;
254
+ --_secondary-300: 324, 85%, 69%;
255
+ --_secondary-400: 320, 70%, 60%;
256
+ --_secondary-500: 312, 50%, 41%;
257
+ --_secondary-600: 312, 50%, 32%;
258
+ --_secondary-700: 312, 100%, 20%;
259
+
260
+ --ndw-color-secondary-050: hsl(var(--_secondary-050));
261
+ --ndw-color-secondary-100: hsl(var(--_secondary-100));
262
+ --ndw-color-secondary-200: hsl(var(--_secondary-200));
263
+ --ndw-color-secondary-300: hsl(var(--_secondary-300));
264
+ --ndw-color-secondary-400: hsl(var(--_secondary-400));
265
+ --ndw-color-secondary-500: hsl(var(--_secondary-500));
266
+ --ndw-color-secondary-600: hsl(var(--_secondary-600));
267
+ --ndw-color-secondary-700: hsl(var(--_secondary-700));
268
+
269
+ --_tertiary-400: 309, 29%, 36%;
270
+ --_tertiary-500: 309, 29%, 18%;
271
+
272
+ --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
273
+ --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
274
+
275
+ --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
276
+ --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
277
+ }
278
+
279
+ body {
280
+ font-family: var(--ndw-font-family-body);
281
+ font-size: var(--ndw-base-font-size);
282
+ }
283
+
284
+ h1,
285
+ h2,
286
+ h3,
287
+ h4,
288
+ h5,
289
+ h6 {
290
+ &.css-11knh3z,
291
+ &.css-wzniqs {
292
+ font-family: var(--ndw-font-family-heading);
293
+ }
294
+ }
295
+
296
+ .sidebar-container.css-r1cy5n {
297
+ background-color: var(--ndw-color-grey-700);
298
+ color: var(--ndw-color-grey-400);
299
+
300
+ div.sidebar-header.css-1be7p8e {
301
+ padding-left: 0.25rem;
302
+ padding-top: 0.125rem;
303
+
304
+ img.css-32o4gv {
305
+ max-width: 130px !important;
306
+ }
307
+ }
308
+
309
+ div.search-field.css-1bn0s81 {
310
+ background-color: var(--ndw-color-white);
311
+ height: 2rem;
312
+ }
313
+
314
+ .sidebar-item.css-ld0a14 {
315
+ border-radius: 0;
316
+ color: var(--ndw-color-grey-400);
317
+ height: 1.75rem;
318
+ margin-inline: -0.75rem;
319
+
320
+ svg {
321
+ &.css-1e3avu6,
322
+ &.css-1omskcr,
323
+ &.css-ndobih,
324
+ &.css-rqpmm3,
325
+ &.css-9ilfw8 {
326
+ color: var(--ndw-color-grey-400);
327
+ }
328
+ }
329
+
330
+ &:hover {
331
+ background-color: var(--ndw-color-grey-600);
332
+ color: var(--ndw-color-white);
333
+ }
334
+
335
+ &[data-selected='true'] {
336
+ background-color: transparent;
337
+ color: var(--ndw-color-white);
338
+ font-weight: 500;
339
+
340
+ svg {
341
+ &.css-1e3avu6,
342
+ &.css-1omskcr,
343
+ &.css-ndobih,
344
+ &.css-rqpmm3,
345
+ &.css-9ilfw8 {
346
+ color: var(--ndw-color-white);
347
+ }
348
+ }
349
+
350
+ &:hover {
351
+ background-color: var(--ndw-color-grey-600);
352
+ }
353
+ }
354
+ }
355
+ }