@utrecht/component-library-css 1.0.0-alpha.215 → 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 (9) hide show
  1. package/README.md +2 -2
  2. package/dist/html.css +184 -8
  3. package/dist/index.css +282 -3609
  4. package/package.json +4 -3
  5. package/src/index.scss +70 -7
  6. package/dist/bem.css +0 -2846
  7. package/dist/root-theme.css +0 -756
  8. package/src/bem.scss +0 -77
  9. package/src/root-theme.scss +0 -9
package/README.md CHANGED
@@ -16,7 +16,7 @@ Theoretically you can include the components in your HTML page like so, but this
16
16
  <html lang="en">
17
17
  <head>
18
18
  <title>Example page</title>
19
- <link rel="stylesheet" href="node_modules/@utrecht/component-library-css/dist/bem.css" />
19
+ <link rel="stylesheet" href="node_modules/@utrecht/component-library-css" />
20
20
  </head>
21
21
  <body>
22
22
  <h1 class="utrecht-heading-1">Home</h1>
@@ -29,7 +29,7 @@ The BEM class names can be particularly useful to include only the CSS you need
29
29
 
30
30
  ```js
31
31
  import React from "react";
32
- import style from "@utrecht/component-library-css/dist/bem.css";
32
+ import style from "@utrecht/component-library-css";
33
33
 
34
34
  export default class ExamplePage extends React.Component {
35
35
  render() {
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;