@norges-domstoler/dds-components 0.0.0-dev-20240724114556 → 0.0.0-dev-20240730083240

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 (9) hide show
  1. package/dist/index.css +41 -43
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +1 -194
  4. package/dist/index.d.ts +1 -194
  5. package/dist/index.js +202 -408
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +201 -406
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +18 -18
package/dist/index.css CHANGED
@@ -151,7 +151,7 @@
151
151
  }
152
152
  :where(.typographyStyles_body-sans-01) {
153
153
  margin: 0;
154
- font: var(--dds-font-body-sans-01-font-style) var(--dds-font-body-sans-01-font-weight) var(--dds-font-body-sans-01-font-size) / var(--dds-font-body-sans-01-line-height) var(--dds-font-body-sans-01-font-family);
154
+ font: var(--dds-font-body-sans-01);
155
155
  letter-spacing: var(--dds-font-body-sans-01-letter-spacing);
156
156
  color: var(--dds-color-text-default);
157
157
  }
@@ -162,7 +162,7 @@
162
162
  }
163
163
  :where(.typographyStyles_body-sans-02) {
164
164
  margin: 0;
165
- font: var(--dds-font-body-sans-02-font-style) var(--dds-font-body-sans-02-font-weight) var(--dds-font-body-sans-02-font-size) / var(--dds-font-body-sans-02-line-height) var(--dds-font-body-sans-02-font-family);
165
+ font: var(--dds-font-body-sans-02);
166
166
  letter-spacing: var(--dds-font-body-sans-02-letter-spacing);
167
167
  color: var(--dds-color-text-default);
168
168
  }
@@ -173,7 +173,7 @@
173
173
  }
174
174
  :where(.typographyStyles_body-sans-03) {
175
175
  margin: 0;
176
- font: var(--dds-font-body-sans-03-font-style) var(--dds-font-body-sans-03-font-weight) var(--dds-font-body-sans-03-font-size) / var(--dds-font-body-sans-03-line-height) var(--dds-font-body-sans-03-font-family);
176
+ font: var(--dds-font-body-sans-03);
177
177
  letter-spacing: var(--dds-font-body-sans-03-letter-spacing);
178
178
  color: var(--dds-color-text-default);
179
179
  }
@@ -184,7 +184,7 @@
184
184
  }
185
185
  :where(.typographyStyles_body-sans-04) {
186
186
  margin: 0;
187
- font: var(--dds-font-body-sans-04-font-style) var(--dds-font-body-sans-04-font-weight) var(--dds-font-body-sans-04-font-size) / var(--dds-font-body-sans-04-line-height) var(--dds-font-body-sans-04-font-family);
187
+ font: var(--dds-font-body-sans-04);
188
188
  letter-spacing: var(--dds-font-body-sans-04-letter-spacing);
189
189
  color: var(--dds-color-text-default);
190
190
  }
@@ -195,8 +195,7 @@
195
195
  }
196
196
  :where(.typographyStyles_lead-sans-01) {
197
197
  margin: 0;
198
- font: var(--dds-font-lead-sans-01-font-style) var(--dds-font-lead-sans-01-font-weight) var(--dds-font-lead-sans-01-font-size) / var(--dds-font-lead-sans-01-line-height) var(--dds-font-lead-sans-01-font-family);
199
- letter-spacing: var(--dds-font-lead-sans-01-letter-spacing);
198
+ font: var(--dds-font-lead-sans-01);
200
199
  color: var(--dds-color-text-default);
201
200
  }
202
201
  :where(.typographyStyles_lead-sans-01--margins) {
@@ -206,7 +205,7 @@
206
205
  }
207
206
  :where(.typographyStyles_lead-sans-02) {
208
207
  margin: 0;
209
- font: var(--dds-font-lead-sans-02-font-style) var(--dds-font-lead-sans-02-font-weight) var(--dds-font-lead-sans-02-font-size) / var(--dds-font-lead-sans-02-line-height) var(--dds-font-lead-sans-02-font-family);
208
+ font: var(--dds-font-lead-sans-02);
210
209
  letter-spacing: var(--dds-font-lead-sans-02-letter-spacing);
211
210
  color: var(--dds-color-text-default);
212
211
  }
@@ -217,7 +216,7 @@
217
216
  }
218
217
  :where(.typographyStyles_lead-sans-03) {
219
218
  margin: 0;
220
- font: var(--dds-font-lead-sans-03-font-style) var(--dds-font-lead-sans-03-font-weight) var(--dds-font-lead-sans-03-font-size) / var(--dds-font-lead-sans-03-line-height) var(--dds-font-lead-sans-03-font-family);
219
+ font: var(--dds-font-lead-sans-03);
221
220
  letter-spacing: var(--dds-font-lead-sans-03-letter-spacing);
222
221
  color: var(--dds-color-text-default);
223
222
  }
@@ -228,7 +227,7 @@
228
227
  }
229
228
  :where(.typographyStyles_lead-sans-04) {
230
229
  margin: 0;
231
- font: var(--dds-font-lead-sans-04-font-style) var(--dds-font-lead-sans-04-font-weight) var(--dds-font-lead-sans-04-font-size) / var(--dds-font-lead-sans-04-line-height) var(--dds-font-lead-sans-04-font-family);
230
+ font: var(--dds-font-lead-sans-04);
232
231
  letter-spacing: var(--dds-font-lead-sans-04-letter-spacing);
233
232
  color: var(--dds-color-text-default);
234
233
  }
@@ -239,8 +238,7 @@
239
238
  }
240
239
  :where(.typographyStyles_lead-sans-05) {
241
240
  margin: 0;
242
- font: var(--dds-font-lead-sans-05-font-style) var(--dds-font-lead-sans-05-font-weight) var(--dds-font-lead-sans-05-font-size) / var(--dds-font-lead-sans-05-line-height) var(--dds-font-lead-sans-05-font-family);
243
- letter-spacing: var(--dds-font-lead-sans-05-letter-spacing);
241
+ font: var(--dds-font-lead-sans-05);
244
242
  color: var(--dds-color-text-default);
245
243
  }
246
244
  :where(.typographyStyles_lead-sans-05--margins) {
@@ -250,7 +248,7 @@
250
248
  }
251
249
  :where(.typographyStyles_heading-sans-01) {
252
250
  margin: 0;
253
- font: var(--dds-font-heading-sans-01-font-style) var(--dds-font-heading-sans-01-font-weight) var(--dds-font-heading-sans-01-font-size) / var(--dds-font-heading-sans-01-line-height) var(--dds-font-heading-sans-01-font-family);
251
+ font: var(--dds-font-heading-sans-01);
254
252
  letter-spacing: var(--dds-font-heading-sans-01-letter-spacing);
255
253
  color: var(--dds-color-text-default);
256
254
  }
@@ -262,7 +260,7 @@
262
260
  }
263
261
  :where(.typographyStyles_heading-sans-02) {
264
262
  margin: 0;
265
- font: var(--dds-font-heading-sans-02-font-style) var(--dds-font-heading-sans-02-font-weight) var(--dds-font-heading-sans-02-font-size) / var(--dds-font-heading-sans-02-line-height) var(--dds-font-heading-sans-02-font-family);
263
+ font: var(--dds-font-heading-sans-02);
266
264
  letter-spacing: var(--dds-font-heading-sans-02-letter-spacing);
267
265
  color: var(--dds-color-text-default);
268
266
  }
@@ -274,7 +272,7 @@
274
272
  }
275
273
  :where(.typographyStyles_heading-sans-03) {
276
274
  margin: 0;
277
- font: var(--dds-font-heading-sans-03-font-style) var(--dds-font-heading-sans-03-font-weight) var(--dds-font-heading-sans-03-font-size) / var(--dds-font-heading-sans-03-line-height) var(--dds-font-heading-sans-03-font-family);
275
+ font: var(--dds-font-heading-sans-03);
278
276
  letter-spacing: var(--dds-font-heading-sans-03-letter-spacing);
279
277
  color: var(--dds-color-text-default);
280
278
  }
@@ -286,7 +284,7 @@
286
284
  }
287
285
  :where(.typographyStyles_heading-sans-04) {
288
286
  margin: 0;
289
- font: var(--dds-font-heading-sans-04-font-style) var(--dds-font-heading-sans-04-font-weight) var(--dds-font-heading-sans-04-font-size) / var(--dds-font-heading-sans-04-line-height) var(--dds-font-heading-sans-04-font-family);
287
+ font: var(--dds-font-heading-sans-04);
290
288
  letter-spacing: var(--dds-font-heading-sans-04-letter-spacing);
291
289
  color: var(--dds-color-text-default);
292
290
  }
@@ -298,7 +296,7 @@
298
296
  }
299
297
  :where(.typographyStyles_heading-sans-05) {
300
298
  margin: 0;
301
- font: var(--dds-font-heading-sans-05-font-style) var(--dds-font-heading-sans-05-font-weight) var(--dds-font-heading-sans-05-font-size) / var(--dds-font-heading-sans-05-line-height) var(--dds-font-heading-sans-05-font-family);
299
+ font: var(--dds-font-heading-sans-05);
302
300
  letter-spacing: var(--dds-font-heading-sans-05-letter-spacing);
303
301
  color: var(--dds-color-text-default);
304
302
  }
@@ -310,7 +308,7 @@
310
308
  }
311
309
  :where(.typographyStyles_heading-sans-06) {
312
310
  margin: 0;
313
- font: var(--dds-font-heading-sans-06-font-style) var(--dds-font-heading-sans-06-font-weight) var(--dds-font-heading-sans-06-font-size) / var(--dds-font-heading-sans-06-line-height) var(--dds-font-heading-sans-06-font-family);
311
+ font: var(--dds-font-heading-sans-06);
314
312
  letter-spacing: var(--dds-font-heading-sans-06-letter-spacing);
315
313
  color: var(--dds-color-text-default);
316
314
  }
@@ -322,7 +320,7 @@
322
320
  }
323
321
  :where(.typographyStyles_heading-sans-07) {
324
322
  margin: 0;
325
- font: var(--dds-font-heading-sans-07-font-style) var(--dds-font-heading-sans-07-font-weight) var(--dds-font-heading-sans-07-font-size) / var(--dds-font-heading-sans-07-line-height) var(--dds-font-heading-sans-07-font-family);
323
+ font: var(--dds-font-heading-sans-07);
326
324
  letter-spacing: var(--dds-font-heading-sans-07-letter-spacing);
327
325
  color: var(--dds-color-text-default);
328
326
  }
@@ -334,7 +332,7 @@
334
332
  }
335
333
  :where(.typographyStyles_heading-sans-08) {
336
334
  margin: 0;
337
- font: var(--dds-font-heading-sans-08-font-style) var(--dds-font-heading-sans-08-font-weight) var(--dds-font-heading-sans-08-font-size) / var(--dds-font-heading-sans-08-line-height) var(--dds-font-heading-sans-08-font-family);
335
+ font: var(--dds-font-heading-sans-08);
338
336
  letter-spacing: var(--dds-font-heading-sans-08-letter-spacing);
339
337
  color: var(--dds-color-text-default);
340
338
  }
@@ -346,7 +344,7 @@
346
344
  }
347
345
  :where(.typographyStyles_supporting-style-label-01) {
348
346
  margin: 0;
349
- font: var(--dds-font-supporting-style-label-01-font-style) var(--dds-font-supporting-style-label-01-font-weight) var(--dds-font-supporting-style-label-01-font-size) / var(--dds-font-supporting-style-label-01-line-height) var(--dds-font-supporting-style-label-01-font-family);
347
+ font: var(--dds-font-supporting-style-label-01);
350
348
  letter-spacing: var(--dds-font-supporting-style-label-01-letter-spacing);
351
349
  color: var(--dds-color-text-medium);
352
350
  }
@@ -357,7 +355,7 @@
357
355
  }
358
356
  :where(.typographyStyles_supporting-style-helper-text-01) {
359
357
  margin: 0;
360
- font: var(--dds-font-supporting-style-helpertext-01-font-style) var(--dds-font-supporting-style-helpertext-01-font-weight) var(--dds-font-supporting-style-helpertext-01-font-size) / var(--dds-font-supporting-style-helpertext-01-line-height) var(--dds-font-supporting-style-helpertext-01-font-family);
358
+ font: var(--dds-font-supporting-style-helper-text-01);
361
359
  letter-spacing: var(--dds-font-supporting-style-helpertext-01-letter-spacing);
362
360
  color: var(--dds-color-text-subtle);
363
361
  }
@@ -368,7 +366,7 @@
368
366
  }
369
367
  :where(.typographyStyles_supporting-style-placeholder-text-01) {
370
368
  margin: 0;
371
- font: var(--dds-font-supporting-style-placeholdertext-01-font-style) var(--dds-font-supporting-style-placeholdertext-01-font-weight) var(--dds-font-supporting-style-placeholdertext-01-font-size) / var(--dds-font-supporting-style-placeholdertext-01-line-height) var(--dds-font-supporting-style-placeholdertext-01-font-family);
369
+ font: var(--dds-font-supporting-style-placeholder-text-01);
372
370
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-01-letter-spacing );
373
371
  color: var(--dds-color-text-subtle);
374
372
  }
@@ -379,7 +377,7 @@
379
377
  }
380
378
  :where(.typographyStyles_supporting-style-placeholder-text-02) {
381
379
  margin: 0;
382
- font: var(--dds-font-supporting-style-placeholdertext-02-font-style) var(--dds-font-supporting-style-placeholdertext-02-font-weight) var(--dds-font-supporting-style-placeholdertext-02-font-size) / var(--dds-font-supporting-style-placeholdertext-02-line-height) var(--dds-font-supporting-style-placeholdertext-02-font-family);
380
+ font: var(--dds-font-supporting-style-placeholder-text-02);
383
381
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-02-letter-spacing );
384
382
  color: var(--dds-color-text-subtle);
385
383
  }
@@ -390,7 +388,7 @@
390
388
  }
391
389
  :where(.typographyStyles_supporting-style-placeholder-text-03) {
392
390
  margin: 0;
393
- font: var(--dds-font-supporting-style-placeholdertext-03-font-style) var(--dds-font-supporting-style-placeholdertext-03-font-weight) var(--dds-font-supporting-style-placeholdertext-03-font-size) / var(--dds-font-supporting-style-placeholdertext-03-line-height) var(--dds-font-supporting-style-placeholdertext-03-font-family);
391
+ font: var(--dds-font-supporting-style-placeholder-text-03);
394
392
  letter-spacing: var( --dds-font-supporting-style-placeholdertext-03-letter-spacing );
395
393
  color: var(--dds-color-text-subtle);
396
394
  }
@@ -401,7 +399,7 @@
401
399
  }
402
400
  :where(.typographyStyles_supporting-style-tiny-01) {
403
401
  margin: 0;
404
- font: var(--dds-font-supporting-style-tiny-01-font-style) var(--dds-font-supporting-style-tiny-01-font-weight) var(--dds-font-supporting-style-tiny-01-font-size) / var(--dds-font-supporting-style-tiny-01-line-height) var(--dds-font-supporting-style-tiny-01-font-family);
402
+ font: var(--dds-font-supporting-style-tiny-01);
405
403
  letter-spacing: var(--dds-font-supporting-style-tiny-01-letter-spacing);
406
404
  color: var(--dds-color-text-default);
407
405
  }
@@ -412,7 +410,7 @@
412
410
  }
413
411
  :where(.typographyStyles_supporting-style-tiny-02) {
414
412
  margin: 0;
415
- font: var(--dds-font-supporting-style-tiny-02-font-style) var(--dds-font-supporting-style-tiny-02-font-weight) var(--dds-font-supporting-style-tiny-02-font-size) / var(--dds-font-supporting-style-tiny-02-line-height) var(--dds-font-supporting-style-tiny-02-font-family);
413
+ font: var(--dds-font-supporting-style-tiny-02);
416
414
  letter-spacing: var(--dds-font-supporting-style-tiny-02-letter-spacing);
417
415
  color: var(--dds-color-text-default);
418
416
  }
@@ -796,16 +794,16 @@
796
794
  margin: 0;
797
795
  }
798
796
  .Paper_shadow--1 {
799
- box-shadow: var(--dds-shadow-1-onlight);
797
+ box-shadow: var(--dds-shadow-1);
800
798
  }
801
799
  .Paper_shadow--2 {
802
- box-shadow: var(--dds-shadow-2-onlight);
800
+ box-shadow: var(--dds-shadow-2);
803
801
  }
804
802
  .Paper_shadow--3 {
805
- box-shadow: var(--dds-shadow-3-onlight);
803
+ box-shadow: var(--dds-shadow-3);
806
804
  }
807
805
  .Paper_shadow--4 {
808
- box-shadow: var(--dds-shadow-4-onlight);
806
+ box-shadow: var(--dds-shadow-4);
809
807
  }
810
808
  .Paper_border--default {
811
809
  border: 1px solid var(--dds-color-border-default);
@@ -901,7 +899,7 @@
901
899
  padding: var(--dds-spacing-x0-25);
902
900
  }
903
901
  .Button_icon {
904
- font-size: var(--dds-font-supporting-style-tiny-01-line-height);
902
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
905
903
  }
906
904
  }
907
905
  .Button_button--small {
@@ -922,7 +920,7 @@
922
920
  padding: var(--dds-spacing-x0-5);
923
921
  }
924
922
  .Button_icon {
925
- font-size: var(--dds-font-body-sans-01-line-height);
923
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
926
924
  }
927
925
  }
928
926
  .Button_button--medium {
@@ -943,7 +941,7 @@
943
941
  padding: var(--dds-spacing-x0-75);
944
942
  }
945
943
  .Button_icon {
946
- font-size: var(--dds-font-body-sans-02-line-height);
944
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
947
945
  }
948
946
  }
949
947
  .Button_button--large {
@@ -964,7 +962,7 @@
964
962
  padding: var(--dds-spacing-x1);
965
963
  }
966
964
  .Button_icon {
967
- font-size: var(--dds-font-body-sans-04-line-height);
965
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
968
966
  }
969
967
  }
970
968
  .Button_spinner-wrapper--absolute {
@@ -1058,7 +1056,6 @@
1058
1056
  overflow-y: auto;
1059
1057
  min-width: 180px;
1060
1058
  max-width: 300px;
1061
- box-shadow: var(--dds-shadow-1-onlight);
1062
1059
  }
1063
1060
  .OverflowMenu_list {
1064
1061
  display: flex;
@@ -1094,7 +1091,7 @@
1094
1091
  .OverflowMenu_icon {
1095
1092
  display: flex;
1096
1093
  align-items: center;
1097
- font-size: var(--dds-font-body-sans-01-line-height);
1094
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1098
1095
  }
1099
1096
  .OverflowMenu_divider {
1100
1097
  margin-inline: var(--dds-spacing-x0-5);
@@ -1380,7 +1377,7 @@
1380
1377
  background-color: var(--dds-color-surface-default);
1381
1378
  border: 1px solid var(--dds-color-border-default);
1382
1379
  padding: var(--dds-spacing-x0-5);
1383
- box-shadow: var(--dds-shadow-2-onlight);
1380
+ box-shadow: var(--dds-shadow-2);
1384
1381
  }
1385
1382
  .DateInput_calendar {
1386
1383
  display: flex;
@@ -2194,7 +2191,7 @@
2194
2191
  box-sizing: border-box;
2195
2192
  display: grid;
2196
2193
  align-items: center;
2197
- box-shadow: var(--dds-shadow-1-onlight);
2194
+ box-shadow: var(--dds-shadow-1);
2198
2195
  border-radius: var(--dds-border-radius-1);
2199
2196
  padding: var(--dds-spacing-x0-75);
2200
2197
  gap: var(--dds-spacing-x0-5);
@@ -2933,7 +2930,8 @@
2933
2930
  }
2934
2931
  th {
2935
2932
  background-color: var(--dds-color-surface-default);
2936
- font-size: var(--dds-font-body-sans-01-font-size);
2933
+ font: var(--dds-font-body-sans-01);
2934
+ font-weight: var(--dds-font-weight-bold);
2937
2935
  }
2938
2936
  }
2939
2937
  .Table_row {
@@ -3283,7 +3281,7 @@
3283
3281
  .ToggleBar_content--large--just-icon {
3284
3282
  padding: var(--dds-spacing-x1);
3285
3283
  svg {
3286
- font-size: var(--dds-font-body-sans-04-line-height);
3284
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3287
3285
  }
3288
3286
  }
3289
3287
  .ToggleBar_content--large--with-text {
@@ -3293,7 +3291,7 @@
3293
3291
  .ToggleBar_content--medium--just-icon {
3294
3292
  padding: var(--dds-spacing-x0-75);
3295
3293
  svg {
3296
- font-size: var(--dds-font-body-sans-02-line-height);
3294
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3297
3295
  }
3298
3296
  }
3299
3297
  .ToggleBar_content--medium--with-text {
@@ -3303,7 +3301,7 @@
3303
3301
  .ToggleBar_content--small--just-icon {
3304
3302
  padding: var(--dds-spacing-x0-5);
3305
3303
  svg {
3306
- font-size: var(--dds-font-body-sans-01-line-height);
3304
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3307
3305
  }
3308
3306
  }
3309
3307
  .ToggleBar_content--small--with-text {
@@ -3313,7 +3311,7 @@
3313
3311
  .ToggleBar_content--tiny--just-icon {
3314
3312
  padding: var(--dds-spacing-x0-25);
3315
3313
  svg {
3316
- font-size: var(--dds-font-supporting-style-tiny-01-line-height);
3314
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
3317
3315
  }
3318
3316
  }
3319
3317
  .ToggleBar_content--tiny--with-text {