@utrecht/component-library-css 1.0.0-alpha.217 → 1.0.0-alpha.218

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 +184 -8
  2. package/dist/index.css +150 -10
  3. package/package.json +3 -3
  4. package/src/index.scss +1 -1
package/dist/html.css CHANGED
@@ -67,19 +67,22 @@
67
67
  .utrecht-html input[type=reset i],
68
68
  .utrecht-html input[type=submit i],
69
69
  .utrecht-html button {
70
- background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
70
+ background-color: var(--utrecht-button-background-color);
71
71
  border-color: var(--utrecht-button-border-color, transparent);
72
+ border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
72
73
  border-radius: var(--utrecht-button-border-radius);
73
74
  border-style: solid;
74
75
  border-width: var(--utrecht-button-border-width, 0);
75
- color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
76
+ border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
77
+ color: var(--utrecht-button-color);
76
78
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
77
79
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
78
80
  font-weight: var(--utrecht-button-font-weight);
79
81
  inline-size: var(--utrecht-button-inline-size, auto);
80
82
  letter-spacing: var(--utrecht-button-letter-spacing);
81
- min-block-size: var(--utrecht-button-min-block-size, auto);
82
- min-inline-size: var(--utrecht-button-min-inline-size, 0);
83
+ line-height: var(--utrecht-button-line-height);
84
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
85
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
83
86
  padding-block-end: var(--utrecht-button-padding-block-end);
84
87
  padding-block-start: var(--utrecht-button-padding-block-start);
85
88
  padding-inline-end: var(--utrecht-button-padding-inline-end);
@@ -175,6 +178,90 @@
175
178
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
176
179
  }
177
180
 
181
+ .utrecht-button--primary-action {
182
+ background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
183
+ border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
184
+ border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
185
+ color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
186
+ }
187
+
188
+ .utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
189
+ .utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
190
+ .utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
191
+ .utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
192
+ .utrecht-html input.utrecht-button--primary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
193
+ background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
194
+ border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
195
+ color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
196
+ }
197
+
198
+ .utrecht-button--primary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--primary-action[type=button i]:disabled,
199
+ .utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
200
+ .utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
201
+ .utrecht-html button.utrecht-button--primary-action:disabled,
202
+ .utrecht-button--primary-action.utrecht-button--disabled,
203
+ .utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
204
+ background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
205
+ border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
206
+ color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
207
+ }
208
+
209
+ .utrecht-button--secondary-action {
210
+ background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
211
+ border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
212
+ border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
213
+ color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
214
+ }
215
+
216
+ .utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
217
+ .utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
218
+ .utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
219
+ .utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
220
+ .utrecht-html input.utrecht-button--secondary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
221
+ background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
222
+ border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
223
+ color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
224
+ }
225
+
226
+ .utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--secondary-action[type=button i]:disabled,
227
+ .utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
228
+ .utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
229
+ .utrecht-html button.utrecht-button--secondary-action:disabled,
230
+ .utrecht-button--secondary-action.utrecht-button--disabled,
231
+ .utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
232
+ background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
233
+ border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
234
+ color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
235
+ }
236
+
237
+ .utrecht-button--subtle {
238
+ background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
239
+ border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
240
+ border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
241
+ color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
242
+ }
243
+
244
+ .utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
245
+ .utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
246
+ .utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
247
+ .utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
248
+ .utrecht-html input.utrecht-button--subtle[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
249
+ background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
250
+ border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
251
+ color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
252
+ }
253
+
254
+ .utrecht-button--subtle.utrecht-button:disabled, .utrecht-html input.utrecht-button--subtle[type=button i]:disabled,
255
+ .utrecht-html input.utrecht-button--subtle[type=reset i]:disabled,
256
+ .utrecht-html input.utrecht-button--subtle[type=submit i]:disabled,
257
+ .utrecht-html button.utrecht-button--subtle:disabled,
258
+ .utrecht-button--subtle.utrecht-button--disabled,
259
+ .utrecht-html button.utrecht-button--subtle[aria-disabled=true] {
260
+ background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
261
+ border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
262
+ color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
263
+ }
264
+
178
265
  /* override the `:focus` selector above */
179
266
  /* stylelint-disable-next-line no-descending-specificity */
180
267
  /**
@@ -574,19 +661,22 @@
574
661
  .utrecht-html input[type=reset i],
575
662
  .utrecht-html input[type=submit i],
576
663
  .utrecht-html button {
577
- background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
664
+ background-color: var(--utrecht-button-background-color);
578
665
  border-color: var(--utrecht-button-border-color, transparent);
666
+ border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
579
667
  border-radius: var(--utrecht-button-border-radius);
580
668
  border-style: solid;
581
669
  border-width: var(--utrecht-button-border-width, 0);
582
- color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
670
+ border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
671
+ color: var(--utrecht-button-color);
583
672
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
584
673
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
585
674
  font-weight: var(--utrecht-button-font-weight);
586
675
  inline-size: var(--utrecht-button-inline-size, auto);
587
676
  letter-spacing: var(--utrecht-button-letter-spacing);
588
- min-block-size: var(--utrecht-button-min-block-size, auto);
589
- min-inline-size: var(--utrecht-button-min-inline-size, 0);
677
+ line-height: var(--utrecht-button-line-height);
678
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
679
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
590
680
  padding-block-end: var(--utrecht-button-padding-block-end);
591
681
  padding-block-start: var(--utrecht-button-padding-block-start);
592
682
  padding-inline-end: var(--utrecht-button-padding-inline-end);
@@ -682,6 +772,90 @@
682
772
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
683
773
  }
684
774
 
775
+ .utrecht-button--primary-action {
776
+ background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
777
+ border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
778
+ border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
779
+ color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
780
+ }
781
+
782
+ .utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--primary-action:not(:disabled):hover:not([aria-disabled=true]),
783
+ .utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
784
+ .utrecht-html input.utrecht-button--primary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
785
+ .utrecht-html input.utrecht-button--primary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
786
+ .utrecht-html input.utrecht-button--primary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
787
+ background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
788
+ border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
789
+ color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
790
+ }
791
+
792
+ .utrecht-button--primary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--primary-action[type=button i]:disabled,
793
+ .utrecht-html input.utrecht-button--primary-action[type=reset i]:disabled,
794
+ .utrecht-html input.utrecht-button--primary-action[type=submit i]:disabled,
795
+ .utrecht-html button.utrecht-button--primary-action:disabled,
796
+ .utrecht-button--primary-action.utrecht-button--disabled,
797
+ .utrecht-html button.utrecht-button--primary-action[aria-disabled=true] {
798
+ background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
799
+ border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
800
+ color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
801
+ }
802
+
803
+ .utrecht-button--secondary-action {
804
+ background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
805
+ border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
806
+ border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
807
+ color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
808
+ }
809
+
810
+ .utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--secondary-action:not(:disabled):hover:not([aria-disabled=true]),
811
+ .utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
812
+ .utrecht-html input.utrecht-button--secondary-action[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
813
+ .utrecht-html input.utrecht-button--secondary-action[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
814
+ .utrecht-html input.utrecht-button--secondary-action[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
815
+ background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
816
+ border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
817
+ color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
818
+ }
819
+
820
+ .utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-html input.utrecht-button--secondary-action[type=button i]:disabled,
821
+ .utrecht-html input.utrecht-button--secondary-action[type=reset i]:disabled,
822
+ .utrecht-html input.utrecht-button--secondary-action[type=submit i]:disabled,
823
+ .utrecht-html button.utrecht-button--secondary-action:disabled,
824
+ .utrecht-button--secondary-action.utrecht-button--disabled,
825
+ .utrecht-html button.utrecht-button--secondary-action[aria-disabled=true] {
826
+ background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
827
+ border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
828
+ color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
829
+ }
830
+
831
+ .utrecht-button--subtle {
832
+ background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
833
+ border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
834
+ border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
835
+ color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
836
+ }
837
+
838
+ .utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-html button.utrecht-button--subtle:not(:disabled):hover:not([aria-disabled=true]),
839
+ .utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
840
+ .utrecht-html input.utrecht-button--subtle[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
841
+ .utrecht-html input.utrecht-button--subtle[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
842
+ .utrecht-html input.utrecht-button--subtle[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
843
+ background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
844
+ border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
845
+ color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
846
+ }
847
+
848
+ .utrecht-button--subtle.utrecht-button:disabled, .utrecht-html input.utrecht-button--subtle[type=button i]:disabled,
849
+ .utrecht-html input.utrecht-button--subtle[type=reset i]:disabled,
850
+ .utrecht-html input.utrecht-button--subtle[type=submit i]:disabled,
851
+ .utrecht-html button.utrecht-button--subtle:disabled,
852
+ .utrecht-button--subtle.utrecht-button--disabled,
853
+ .utrecht-html button.utrecht-button--subtle[aria-disabled=true] {
854
+ background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
855
+ border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
856
+ color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
857
+ }
858
+
685
859
  /* override the `:focus` selector above */
686
860
  /* stylelint-disable-next-line no-descending-specificity */
687
861
  /**
@@ -1099,6 +1273,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1099
1273
  }
1100
1274
 
1101
1275
  .utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
1276
+ background-color: var(--utrecht-link-focus-background-color, transparent);
1102
1277
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1103
1278
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1104
1279
  text-decoration-skip: none;
@@ -1815,6 +1990,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1815
1990
  }
1816
1991
 
1817
1992
  .utrecht-link--focus, .utrecht-link:focus, .utrecht-html a:focus {
1993
+ background-color: var(--utrecht-link-focus-background-color, transparent);
1818
1994
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1819
1995
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1820
1996
  text-decoration-skip: none;
package/dist/index.css CHANGED
@@ -343,19 +343,22 @@ ol.utrecht-breadcrumb__list {
343
343
  */
344
344
  /* stylelint-disable-next-line block-no-empty */
345
345
  .utrecht-button, .utrecht-button-link {
346
- background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
346
+ background-color: var(--utrecht-button-background-color);
347
347
  border-color: var(--utrecht-button-border-color, transparent);
348
+ border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
348
349
  border-radius: var(--utrecht-button-border-radius);
349
350
  border-style: solid;
350
351
  border-width: var(--utrecht-button-border-width, 0);
351
- color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
352
+ border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
353
+ color: var(--utrecht-button-color);
352
354
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
353
355
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
354
356
  font-weight: var(--utrecht-button-font-weight);
355
357
  inline-size: var(--utrecht-button-inline-size, auto);
356
358
  letter-spacing: var(--utrecht-button-letter-spacing);
357
- min-block-size: var(--utrecht-button-min-block-size, auto);
358
- min-inline-size: var(--utrecht-button-min-inline-size, 0);
359
+ line-height: var(--utrecht-button-line-height);
360
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
361
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
359
362
  padding-block-end: var(--utrecht-button-padding-block-end);
360
363
  padding-block-start: var(--utrecht-button-padding-block-start);
361
364
  padding-inline-end: var(--utrecht-button-padding-inline-end);
@@ -427,6 +430,72 @@ ol.utrecht-breadcrumb__list {
427
430
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
428
431
  }
429
432
 
433
+ .utrecht-button--primary-action {
434
+ background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
435
+ border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
436
+ border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
437
+ color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
438
+ }
439
+
440
+ .utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-button--primary-action.utrecht-button-link--hover:not(:disabled),
441
+ .utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
442
+ .utrecht-button--primary-action.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
443
+ background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
444
+ border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
445
+ color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
446
+ }
447
+
448
+ .utrecht-button--primary-action.utrecht-button:disabled, .utrecht-button--primary-action.utrecht-button-link:disabled,
449
+ .utrecht-button--primary-action.utrecht-button--disabled {
450
+ background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
451
+ border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
452
+ color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
453
+ }
454
+
455
+ .utrecht-button--secondary-action {
456
+ background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
457
+ border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
458
+ border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
459
+ color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
460
+ }
461
+
462
+ .utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-button--secondary-action.utrecht-button-link--hover:not(:disabled),
463
+ .utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
464
+ .utrecht-button--secondary-action.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
465
+ background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
466
+ border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
467
+ color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
468
+ }
469
+
470
+ .utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-button--secondary-action.utrecht-button-link:disabled,
471
+ .utrecht-button--secondary-action.utrecht-button--disabled {
472
+ background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
473
+ border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
474
+ color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
475
+ }
476
+
477
+ .utrecht-button--subtle {
478
+ background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
479
+ border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
480
+ border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
481
+ color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
482
+ }
483
+
484
+ .utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-button--subtle.utrecht-button-link--hover:not(:disabled),
485
+ .utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
486
+ .utrecht-button--subtle.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
487
+ background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
488
+ border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
489
+ color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
490
+ }
491
+
492
+ .utrecht-button--subtle.utrecht-button:disabled, .utrecht-button--subtle.utrecht-button-link:disabled,
493
+ .utrecht-button--subtle.utrecht-button--disabled {
494
+ background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
495
+ border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
496
+ color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
497
+ }
498
+
430
499
  /**
431
500
  * @license EUPL-1.2
432
501
  * Copyright (c) 2022 Frameless B.V.
@@ -478,19 +547,22 @@ ol.utrecht-breadcrumb__list {
478
547
  */
479
548
  /* stylelint-disable-next-line block-no-empty */
480
549
  .utrecht-button, .utrecht-button-link {
481
- background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
550
+ background-color: var(--utrecht-button-background-color);
482
551
  border-color: var(--utrecht-button-border-color, transparent);
552
+ border-bottom-color: var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent));
483
553
  border-radius: var(--utrecht-button-border-radius);
484
554
  border-style: solid;
485
555
  border-width: var(--utrecht-button-border-width, 0);
486
- color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
556
+ border-bottom-width: var(--utrecht-button-border-bottom-width, var(--utrecht-button-border-width, 0));
557
+ color: var(--utrecht-button-color);
487
558
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
488
559
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
489
560
  font-weight: var(--utrecht-button-font-weight);
490
561
  inline-size: var(--utrecht-button-inline-size, auto);
491
562
  letter-spacing: var(--utrecht-button-letter-spacing);
492
- min-block-size: var(--utrecht-button-min-block-size, auto);
493
- min-inline-size: var(--utrecht-button-min-inline-size, 0);
563
+ line-height: var(--utrecht-button-line-height);
564
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
565
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
494
566
  padding-block-end: var(--utrecht-button-padding-block-end);
495
567
  padding-block-start: var(--utrecht-button-padding-block-start);
496
568
  padding-inline-end: var(--utrecht-button-padding-inline-end);
@@ -562,6 +634,72 @@ ol.utrecht-breadcrumb__list {
562
634
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
563
635
  }
564
636
 
637
+ .utrecht-button--primary-action {
638
+ background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
639
+ border-color: var(--utrecht-button-primary-action-border-color, var(--utrecht-button-border-color));
640
+ border-width: var(--utrecht-button-primary-action-border-width, var(--utrecht-button-border-width));
641
+ color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
642
+ }
643
+
644
+ .utrecht-button--primary-action.utrecht-button--hover:not(:disabled), .utrecht-button--primary-action.utrecht-button-link--hover:not(:disabled),
645
+ .utrecht-button--primary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
646
+ .utrecht-button--primary-action.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
647
+ background-color: var(--utrecht-button-primary-action-hover-background-color, var(--utrecht-button-primary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
648
+ border-color: var(--utrecht-button-primary-action-hover-border-color, var(--utrecht-button-primary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
649
+ color: var(--utrecht-button-primary-action-hover-color, var(--utrecht-button-primary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
650
+ }
651
+
652
+ .utrecht-button--primary-action.utrecht-button:disabled, .utrecht-button--primary-action.utrecht-button-link:disabled,
653
+ .utrecht-button--primary-action.utrecht-button--disabled {
654
+ background-color: var(--utrecht-button-primary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
655
+ border-color: var(--utrecht-button-primary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
656
+ color: var(--utrecht-button-primary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
657
+ }
658
+
659
+ .utrecht-button--secondary-action {
660
+ background-color: var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-background-color));
661
+ border-color: var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-border-color));
662
+ border-width: var(--utrecht-button-secondary-action-border-width, var(--utrecht-button-border-width));
663
+ color: var(--utrecht-button-secondary-action-color, var(--utrecht-button-color));
664
+ }
665
+
666
+ .utrecht-button--secondary-action.utrecht-button--hover:not(:disabled), .utrecht-button--secondary-action.utrecht-button-link--hover:not(:disabled),
667
+ .utrecht-button--secondary-action.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
668
+ .utrecht-button--secondary-action.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
669
+ background-color: var(--utrecht-button-secondary-action-hover-background-color, var(--utrecht-button-secondary-action-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
670
+ border-color: var(--utrecht-button-secondary-action-hover-border-color, var(--utrecht-button-secondary-action-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
671
+ color: var(--utrecht-button-secondary-action-hover-color, var(--utrecht-button-secondary-action-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
672
+ }
673
+
674
+ .utrecht-button--secondary-action.utrecht-button:disabled, .utrecht-button--secondary-action.utrecht-button-link:disabled,
675
+ .utrecht-button--secondary-action.utrecht-button--disabled {
676
+ background-color: var(--utrecht-button-secondary-action-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
677
+ border-color: var(--utrecht-button-secondary-action-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
678
+ color: var(--utrecht-button-secondary-action-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
679
+ }
680
+
681
+ .utrecht-button--subtle {
682
+ background-color: var(--utrecht-button-subtle-background-color, var(--utrecht-button-background-color));
683
+ border-color: var(--utrecht-button-subtle-border-color, var(--utrecht-button-border-color));
684
+ border-width: var(--utrecht-button-subtle-border-width, var(--utrecht-button-border-width));
685
+ color: var(--utrecht-button-subtle-color, var(--utrecht-button-color));
686
+ }
687
+
688
+ .utrecht-button--subtle.utrecht-button--hover:not(:disabled), .utrecht-button--subtle.utrecht-button-link--hover:not(:disabled),
689
+ .utrecht-button--subtle.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
690
+ .utrecht-button--subtle.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
691
+ background-color: var(--utrecht-button-subtle-hover-background-color, var(--utrecht-button-subtle-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))));
692
+ border-color: var(--utrecht-button-subtle-hover-border-color, var(--utrecht-button-subtle-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))));
693
+ color: var(--utrecht-button-subtle-hover-color, var(--utrecht-button-subtle-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))));
694
+ }
695
+
696
+ .utrecht-button--subtle.utrecht-button:disabled, .utrecht-button--subtle.utrecht-button-link:disabled,
697
+ .utrecht-button--subtle.utrecht-button--disabled {
698
+ background-color: var(--utrecht-button-subtle-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)));
699
+ border-color: var(--utrecht-button-subtle-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)));
700
+ color: var(--utrecht-button-subtle-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)));
701
+ }
702
+
565
703
  .utrecht-button-link {
566
704
  cursor: var(--utrecht-action-navigate-cursor, pointer);
567
705
  text-decoration: none;
@@ -1448,6 +1586,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1448
1586
  }
1449
1587
 
1450
1588
  .utrecht-link--focus, .utrecht-link-button--focus, .utrecht-link:focus, .utrecht-link-button:focus {
1589
+ background-color: var(--utrecht-link-focus-background-color, transparent);
1451
1590
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1452
1591
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1453
1592
  text-decoration-skip: none;
@@ -1485,8 +1624,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1485
1624
  font-weight: var(--utrecht-button-font-weight);
1486
1625
  inline-size: var(--utrecht-button-inline-size, auto);
1487
1626
  letter-spacing: var(--utrecht-button-letter-spacing);
1488
- min-block-size: var(--utrecht-button-min-block-size, auto);
1489
- min-inline-size: var(--utrecht-button-min-inline-size, 0);
1627
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
1628
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
1490
1629
  padding-block-end: var(--utrecht-button-padding-block-end);
1491
1630
  padding-block-start: var(--utrecht-button-padding-block-start);
1492
1631
  padding-inline-end: var(--utrecht-button-padding-inline-end);
@@ -1627,6 +1766,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1627
1766
  }
1628
1767
 
1629
1768
  .utrecht-link--focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus {
1769
+ background-color: var(--utrecht-link-focus-background-color, transparent);
1630
1770
  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
1631
1771
  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
1632
1772
  text-decoration-skip: none;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.217",
2
+ "version": "1.0.0-alpha.218",
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",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.210",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.211",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.51.0"
@@ -27,5 +27,5 @@
27
27
  "clean": "rimraf dist/"
28
28
  },
29
29
  "main": "dist/index.css",
30
- "gitHead": "bd089384485cb0158780cb7cef9267a1a4870237"
30
+ "gitHead": "567e7defa9a87fd3010e77ec49170bd39fa1ed81"
31
31
  }
package/src/index.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  @import "../../../components/backdrop/css";
24
24
  @import "../../../components/blockquote/css";
25
25
  @import "../../../components/breadcrumb/css";
26
- @import "../../../components/button/bem";
26
+ @import "../../../components/button/css";
27
27
  @import "../../../components/button-group/css";
28
28
  @import "../../../components/button-link/css";
29
29
  @import "../../../components/checkbox/css";