@utrecht/component-library-css 1.0.0-alpha.490 → 1.0.0-alpha.492

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 (3) hide show
  1. package/dist/html.css +1 -1
  2. package/dist/index.css +16 -16
  3. package/package.json +3 -3
package/dist/html.css CHANGED
@@ -1416,7 +1416,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1416
1416
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, 1em));
1417
1417
  font-weight: initial; /* harden */
1418
1418
  height: initial; /* harden */
1419
- line-height: initial; /* harden */
1419
+ line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
1420
1420
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
1421
1421
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1422
1422
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
package/dist/index.css CHANGED
@@ -319,9 +319,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
319
319
  */
320
320
  .utrecht-badge-counter {
321
321
  /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */
322
- background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%)));
322
+ background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
323
323
  border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
324
- color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0deg, 0%, 100%)));
324
+ color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
325
325
  display: inline-block;
326
326
  font-family: var(--utrecht-document-font-family, sans-serif);
327
327
  font-size: var(--utrecht-badge-counter-font-size);
@@ -358,9 +358,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
358
358
  */
359
359
  .utrecht-badge-data {
360
360
  /* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges */
361
- background-color: var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));
361
+ background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
362
362
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
363
- color: var(--utrecht-badge-color, hsl(0deg, 0%, 100%));
363
+ color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
364
364
  display: inline-block;
365
365
  font-family: var(--utrecht-document-font-family, sans-serif);
366
366
  font-size: var(--utrecht-badge-font-size, inherit);
@@ -404,9 +404,9 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
404
404
  */
405
405
  .utrecht-badge-status {
406
406
  /* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges */
407
- background-color: var(--utrecht-badge-background-color, hsl(0deg, 0%, 0%));
407
+ background-color: var(--utrecht-badge-background-color, hsl(0, 0%, 0%));
408
408
  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
409
- color: var(--utrecht-badge-color, hsl(0deg, 0%, 100%));
409
+ color: var(--utrecht-badge-color, hsl(0, 0%, 100%));
410
410
  display: inline-block;
411
411
  font-family: var(--utrecht-document-font-family, sans-serif);
412
412
  font-size: var(--utrecht-badge-font-size, inherit);
@@ -423,17 +423,17 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
423
423
  }
424
424
 
425
425
  .utrecht-badge-status--danger {
426
- background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0deg, 100%, 40%));
426
+ background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%));
427
427
  color: var(--utrecht-feedback-danger-fill-color, white);
428
428
  }
429
429
 
430
430
  .utrecht-badge-status--warning {
431
- background-color: var(--utrecht-feedback-warning-fill-background-color, hsl(48deg, 100%, 50%));
431
+ background-color: var(--utrecht-feedback-warning-fill-background-color, hsl(48, 100%, 50%));
432
432
  color: var(--utrecht-feedback-warning-fill-color, white);
433
433
  }
434
434
 
435
435
  .utrecht-badge-status--safe {
436
- background-color: var(--utrecht-feedback-safe-fill-background-color, hsl(90deg, 30%, 50%));
436
+ background-color: var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%));
437
437
  color: var(--utrecht-feedback-safe-fill-color, white);
438
438
  }
439
439
 
@@ -443,32 +443,32 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
443
443
  }
444
444
 
445
445
  .utrecht-badge-status--valid {
446
- background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90deg, 30%, 50%)));
446
+ background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
447
447
  color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
448
448
  }
449
449
 
450
450
  .utrecht-badge-status--invalid {
451
- background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39deg, 100%, 50%)));
451
+ background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39, 100%, 50%)));
452
452
  color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white));
453
453
  }
454
454
 
455
455
  .utrecht-badge-status--error {
456
- background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0deg, 100%, 30%)));
456
+ background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 30%)));
457
457
  color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white));
458
458
  }
459
459
 
460
460
  .utrecht-badge-status--success {
461
- background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90deg, 30%, 50%)));
461
+ background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
462
462
  color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white));
463
463
  }
464
464
 
465
465
  .utrecht-badge-status--active {
466
- background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90deg, 30%, 50%)));
466
+ background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)));
467
467
  color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white));
468
468
  }
469
469
 
470
470
  .utrecht-badge-status--inactive {
471
- background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0deg, 100%, 40%)));
471
+ background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%)));
472
472
  color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
473
473
  }
474
474
 
@@ -5170,7 +5170,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5170
5170
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, 1em));
5171
5171
  font-weight: initial; /* harden */
5172
5172
  height: initial; /* harden */
5173
- line-height: initial; /* harden */
5173
+ line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
5174
5174
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
5175
5175
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
5176
5176
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.490",
2
+ "version": "1.0.0-alpha.492",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -18,7 +18,7 @@
18
18
  "devDependencies": {
19
19
  "node-sass-package-importer": "5.3.2",
20
20
  "rimraf": "3.0.2",
21
- "sass": "1.57.1"
21
+ "sass": "1.62.1"
22
22
  },
23
23
  "scripts": {
24
24
  "prebuild": "npm run clean",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "ec0a045d4d0d619d0c619f01dee860423ea2a5e8"
29
+ "gitHead": "0a75a5467dad967bc7caccefa7ee1ebf22a5d432"
30
30
  }