@utrecht/component-library-css 5.2.0 → 6.1.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 (4) hide show
  1. package/dist/html.css +52 -55
  2. package/dist/index.css +144 -118
  3. package/dist/prince-xml.css +199 -170
  4. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -55,7 +55,14 @@
55
55
  }
56
56
  .utrecht-html blockquote {
57
57
  background-color: var(--utrecht-blockquote-background-color);
58
+ border-color: var(--utrecht-blockquote-border-color);
59
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
60
+ border-style: solid;
61
+ border-width: var(--utrecht-blockquote-border-width, 0);
62
+ border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
58
63
  color: var(--utrecht-blockquote-color);
64
+ display: flex;
65
+ flex-direction: column;
59
66
  font-family: var(--utrecht-document-font-family);
60
67
  font-size: var(--utrecht-blockquote-font-size);
61
68
  font-style: var(--utrecht-blockquote-font-style);
@@ -67,6 +74,7 @@
67
74
  padding-block-start: var(--utrecht-blockquote-padding-block-start);
68
75
  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
69
76
  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
77
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
70
78
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
71
79
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
72
80
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -283,12 +291,12 @@
283
291
  border-width: var(--_utrecht-button-border-width);
284
292
  box-sizing: border-box;
285
293
  color: var(--_utrecht-button-color);
294
+ column-gap: var(--utrecht-button-column-gap);
286
295
  cursor: var(--utrecht-action-activate-cursor, revert);
287
296
  display: inline-flex;
288
297
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
289
298
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
290
299
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
291
- gap: var(--utrecht-button-icon-gap);
292
300
  inline-size: var(--utrecht-button-inline-size, auto);
293
301
  justify-content: center;
294
302
  line-height: var(--_utrecht-button-line-height);
@@ -365,7 +373,7 @@
365
373
  .utrecht-html input[type=checkbox i]:disabled {
366
374
  cursor: var(--utrecht-action-disabled-cursor, revert);
367
375
  }
368
- .utrecht-html input[type=checkbox i]:focus {
376
+ .utrecht-html input[type=checkbox i] :focus-visible {
369
377
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
370
378
  var(--utrecht-focus-inverse-outline-color, transparent);
371
379
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -374,10 +382,6 @@
374
382
  outline-style: var(--utrecht-focus-outline-style, revert);
375
383
  outline-width: var(--utrecht-focus-outline-width, revert);
376
384
  }
377
- .utrecht-html input[type=checkbox i]:focus:not(:focus-visible) {
378
- box-shadow: none;
379
- outline-style: revert;
380
- }
381
385
  .utrecht-html body {
382
386
  -webkit-font-smoothing: auto !important;
383
387
  -moz-osx-font-smoothing: auto !important;
@@ -606,11 +610,11 @@
606
610
  }
607
611
  .utrecht-html a:focus {
608
612
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
609
- --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
610
- --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
611
613
  background-color: var(--utrecht-link-focus-background-color, transparent);
612
614
  text-decoration-skip: none;
613
615
  text-decoration-skip-ink: none;
616
+ }
617
+ .utrecht-html a:focus-visible {
614
618
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
615
619
  var(--utrecht-focus-inverse-outline-color, transparent);
616
620
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -618,12 +622,16 @@
618
622
  outline-offset: var(--utrecht-focus-outline-offset, revert);
619
623
  outline-style: var(--utrecht-focus-outline-style, revert);
620
624
  outline-width: var(--utrecht-focus-outline-width, revert);
625
+ --_utrecht-link-state-text-decoration: var(
626
+ --utrecht-link-focus-visible-text-decoration,
627
+ var(--utrecht-link-focus-text-decoration)
628
+ );
629
+ --_utrecht-link-state-text-decoration-thickness: var(
630
+ --utrecht-link-focus-visible-text-decoration-thickness,
631
+ var(--utrecht-link-focus-text-decoration-thickness)
632
+ );
621
633
  z-index: var(--utrecht-stack-focus-z-index, 1);
622
634
  }
623
- .utrecht-html a:focus:not(:focus-visible) {
624
- box-shadow: none;
625
- outline-style: revert;
626
- }
627
635
  .utrecht-html a[href^="tel:" i] {
628
636
  white-space: nowrap;
629
637
  }
@@ -655,24 +663,9 @@
655
663
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
656
664
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
657
665
  }
658
- .utrecht-html p.lead {
659
- color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
660
- font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
661
- font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
662
- line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
663
- }
664
666
  .utrecht-html * ~ p {
665
667
  --utrecht-space-around: 1;
666
668
  }
667
- .utrecht-html p:has(> small:only-child) {
668
- color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
669
- font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
670
- font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
671
- line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
672
- }
673
- .utrecht-html p > small:only-child {
674
- font-size: inherit;
675
- }
676
669
  .utrecht-html pre:has(> code:only-child) {
677
670
  background-color: var(--utrecht-code-background-color);
678
671
  color: var(--utrecht-code-color);
@@ -771,10 +764,19 @@
771
764
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
772
765
  }
773
766
  .utrecht-html input[type=radio i]:disabled {
774
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
775
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
776
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
777
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
767
+ --_utrecht-radio-button-background-color: var(
768
+ --utrecht-radio-button-disabled-background-color,
769
+ var(--utrecht-radio-button-background-color)
770
+ );
771
+ --_utrecht-radio-button-border-color: var(
772
+ --utrecht-radio-button-disabled-border-color,
773
+ var(--utrecht-radio-button-border-color)
774
+ );
775
+ --_utrecht-radio-button-border-width: var(
776
+ --utrecht-radio-button-disabled-border-width,
777
+ var(--utrecht-radio-button-border-width)
778
+ );
779
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
778
780
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
779
781
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
780
782
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
@@ -871,6 +873,7 @@
871
873
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
872
874
  font-weight: var(--utrecht-select-font-size, var(--utrecht-form-control-font-weight, initial));
873
875
  inline-size: 100%;
876
+ line-height: var(--utrecht-select-line-height, var(--utrecht-form-control-line-height, initial));
874
877
  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
875
878
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
876
879
  max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
@@ -883,6 +886,8 @@
883
886
  background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
884
887
  border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
885
888
  color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
889
+ }
890
+ .utrecht-html select:focus-visible {
886
891
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
887
892
  var(--utrecht-focus-inverse-outline-color, transparent);
888
893
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -891,10 +896,6 @@
891
896
  outline-style: var(--utrecht-focus-outline-style, revert);
892
897
  outline-width: var(--utrecht-focus-outline-width, revert);
893
898
  }
894
- .utrecht-html select:focus:not(:focus-visible) {
895
- box-shadow: none;
896
- outline-style: revert;
897
- }
898
899
  .utrecht-html select:disabled {
899
900
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
900
901
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
@@ -1060,6 +1061,8 @@
1060
1061
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1061
1062
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1062
1063
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1064
+ }
1065
+ .utrecht-html textarea:focus-visible {
1063
1066
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1064
1067
  var(--utrecht-focus-inverse-outline-color, transparent);
1065
1068
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1068,10 +1071,6 @@
1068
1071
  outline-style: var(--utrecht-focus-outline-style, revert);
1069
1072
  outline-width: var(--utrecht-focus-outline-width, revert);
1070
1073
  }
1071
- .utrecht-html textarea:focus:not(:focus-visible) {
1072
- box-shadow: none;
1073
- outline-style: revert;
1074
- }
1075
1074
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1076
1075
  --_utrecht-textarea-border-width: var(
1077
1076
  --utrecht-textarea-invalid-border-width,
@@ -1161,6 +1160,20 @@
1161
1160
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
1162
1161
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
1163
1162
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1163
+ }
1164
+ .utrecht-html input:not([type]):focus-visible,
1165
+ .utrecht-html input[type=date i]:focus-visible,
1166
+ .utrecht-html input[type=datetime-local i]:focus-visible,
1167
+ .utrecht-html input[type=email i]:focus-visible,
1168
+ .utrecht-html input[type=month i]:focus-visible,
1169
+ .utrecht-html input[type=number i]:focus-visible,
1170
+ .utrecht-html input[type=password i]:focus-visible,
1171
+ .utrecht-html input[type=search i]:focus-visible,
1172
+ .utrecht-html input[type=tel i]:focus-visible,
1173
+ .utrecht-html input[type=text i]:focus-visible,
1174
+ .utrecht-html input[type=time i]:focus-visible,
1175
+ .utrecht-html input[type=url i]:focus-visible,
1176
+ .utrecht-html input[type=week i]:focus-visible {
1164
1177
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
1165
1178
  var(--utrecht-focus-inverse-outline-color, transparent);
1166
1179
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -1169,22 +1182,6 @@
1169
1182
  outline-style: var(--utrecht-focus-outline-style, revert);
1170
1183
  outline-width: var(--utrecht-focus-outline-width, revert);
1171
1184
  }
1172
- .utrecht-html input:not([type]):focus:not(:focus-visible),
1173
- .utrecht-html input[type=date i]:focus:not(:focus-visible),
1174
- .utrecht-html input[type=datetime-local i]:focus:not(:focus-visible),
1175
- .utrecht-html input[type=email i]:focus:not(:focus-visible),
1176
- .utrecht-html input[type=month i]:focus:not(:focus-visible),
1177
- .utrecht-html input[type=number i]:focus:not(:focus-visible),
1178
- .utrecht-html input[type=password i]:focus:not(:focus-visible),
1179
- .utrecht-html input[type=search i]:focus:not(:focus-visible),
1180
- .utrecht-html input[type=tel i]:focus:not(:focus-visible),
1181
- .utrecht-html input[type=text i]:focus:not(:focus-visible),
1182
- .utrecht-html input[type=time i]:focus:not(:focus-visible),
1183
- .utrecht-html input[type=url i]:focus:not(:focus-visible),
1184
- .utrecht-html input[type=week i]:focus:not(:focus-visible) {
1185
- box-shadow: none;
1186
- outline-style: revert;
1187
- }
1188
1185
  .utrecht-html input:not([type]):invalid, .utrecht-html input:not([type])[aria-invalid=true],
1189
1186
  .utrecht-html input[type=date i]:invalid,
1190
1187
  .utrecht-html input[type=date i][aria-invalid=true],