@amsterdam/design-system-css 0.1.2 → 0.1.3

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 (48) hide show
  1. package/dist/button/button.css +702 -0
  2. package/dist/button/button.css.map +1 -0
  3. package/dist/details/details.css +62 -0
  4. package/dist/details/details.css.map +1 -0
  5. package/dist/form-label/form-label.css +26 -0
  6. package/dist/form-label/form-label.css.map +1 -0
  7. package/dist/heading/heading.css +45 -95
  8. package/dist/heading/heading.css.map +1 -1
  9. package/dist/icon/icon.css +106 -21
  10. package/dist/icon/icon.css.map +1 -1
  11. package/dist/link/link.css +83 -55
  12. package/dist/link/link.css.map +1 -1
  13. package/dist/list/list.css +5 -0
  14. package/dist/list/list.css.map +1 -1
  15. package/dist/paragraph/paragraph.css +40 -44
  16. package/dist/paragraph/paragraph.css.map +1 -1
  17. package/dist/radio-button/radio-button.css +341 -0
  18. package/dist/radio-button/radio-button.css.map +1 -0
  19. package/dist/textbox/textbox.css +178 -0
  20. package/dist/textbox/textbox.css.map +1 -0
  21. package/package.json +7 -6
  22. package/src/button/README.md +24 -0
  23. package/src/button/button-css.md +12 -0
  24. package/src/button/button.scss +14 -0
  25. package/src/form-label/README.md +3 -0
  26. package/src/form-label/form-label.scss +17 -0
  27. package/src/heading/README.md +23 -0
  28. package/src/heading/heading-css.md +3 -0
  29. package/src/heading/heading.scss +40 -25
  30. package/src/icon/README.md +21 -0
  31. package/src/icon/icon.scss +87 -18
  32. package/src/link/README.md +1 -0
  33. package/src/link/link.scss +88 -32
  34. package/src/list/list.scss +11 -0
  35. package/src/paragraph/README.md +24 -0
  36. package/src/paragraph/paragraph-css.md +3 -0
  37. package/src/paragraph/paragraph.scss +35 -9
  38. package/utils/breakpoint.scss +7 -2
  39. package/utils/calculate-fluid-style.scss +6 -1
  40. package/dist/document/document.css +0 -22
  41. package/dist/document/document.css.map +0 -1
  42. package/dist/grid/grid.css +0 -340
  43. package/dist/grid/grid.css.map +0 -1
  44. package/dist/spacing/spacing.css +0 -249
  45. package/dist/spacing/spacing.css.map +0 -1
  46. package/src/document/document.scss +0 -16
  47. package/src/grid/grid.scss +0 -83
  48. package/src/spacing/spacing.scss +0 -60
package/dist/paragraph/paragraph.css CHANGED
@@ -1,53 +1,49 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright (c) 2023 Gemeente Amsterdam
4
+ */
5
+ /**
6
+ * @license EUPL-1.2+
7
+ * Copyright (c) 2023 Gemeente Amsterdam
8
+ */
9
+ /*
10
+ The breakpoint is 854px / 16 = 53.375rems
11
+ https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
12
+ */
1
13
  .amsterdam-paragraph {
2
- font-size: clamp(
3
- 1.125rem,
4
- calc(
5
- 1.125rem + 0.00375 * (100vw - 20rem)
6
- ),
7
- 1.5rem
8
- );
9
- line-height: clamp(
10
- 1.8125rem,
11
- calc(
12
- 1.8125rem + 0.005625 * (100vw - 20rem)
13
- ),
14
- 2.375rem
15
- );
14
+ color: var(--amsterdam-paragraph-color);
15
+ font-family: var(--amsterdam-paragraph-font-family);
16
+ font-size: var(--amsterdam-paragraph-font-size-narrow);
17
+ font-weight: var(--amsterdam-paragraph-font-weight);
18
+ line-height: var(--amsterdam-paragraph-line-height);
19
+ box-sizing: border-box;
16
20
  margin-block: 0;
21
+ -webkit-text-size-adjust: 100%;
17
22
  }
18
-
19
- .amsterdam-paragraph-intro {
20
- font-size: clamp(
21
- 1.375rem,
22
- calc(
23
- 1.375rem + 0.005 * (100vw - 20rem)
24
- ),
25
- 1.875rem
26
- );
27
- line-height: clamp(
28
- 2.1875rem,
29
- calc(
30
- 2.1875rem + 0.00625 * (100vw - 20rem)
31
- ),
32
- 2.8125rem
33
- );
23
+ @media screen and (width > 53.375rem) {
24
+ .amsterdam-paragraph {
25
+ font-size: var(--amsterdam-paragraph-font-size-wide);
26
+ }
34
27
  }
35
28
 
36
29
  .amsterdam-paragraph-small {
37
- font-size: clamp(
38
- 1rem,
39
- calc(
40
- 1rem + 0.00125 * (100vw - 20rem)
41
- ),
42
- 1.125rem
43
- );
44
- line-height: clamp(
45
- 1.5rem,
46
- calc(
47
- 1.5rem + 0.003125 * (100vw - 20rem)
48
- ),
49
- 1.8125rem
50
- );
30
+ font-size: var(--amsterdam-paragraph-small-font-size-narrow);
31
+ line-height: var(--amsterdam-paragraph-small-line-height);
32
+ }
33
+ @media screen and (width > 53.375rem) {
34
+ .amsterdam-paragraph-small {
35
+ font-size: var(--amsterdam-paragraph-small-font-size-wide);
36
+ }
37
+ }
38
+
39
+ .amsterdam-paragraph-large {
40
+ font-size: var(--amsterdam-paragraph-large-font-size-narrow);
41
+ line-height: var(--amsterdam-paragraph-large-line-height);
42
+ }
43
+ @media screen and (width > 53.375rem) {
44
+ .amsterdam-paragraph-large {
45
+ font-size: var(--amsterdam-paragraph-large-font-size-wide);
46
+ }
51
47
  }
52
48
 
53
49
  /*# sourceMappingURL=paragraph.css.map */
package/dist/paragraph/paragraph.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss"],"names":[],"mappings":"AAEA;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;;AAAA,AAAA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"paragraph.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EAVA;EACA;EACA;;AAUA;EAPF;IAQI;;;;AAMJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI","file":"paragraph.css"}
package/dist/radio-button/radio-button.css ADDED
@@ -0,0 +1,341 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+ /**
6
+ * @license EUPL-1.2
7
+ * Copyright (c) 2021 Robbert Broersma
8
+ */
9
+ /**
10
+ * @license EUPL-1.2
11
+ * Copyright (c) 2021 Gemeente Utrecht
12
+ * Copyright (c) 2021 Robbert Broersma
13
+ */
14
+ /* stylelint-disable-next-line block-no-empty */
15
+ /* stylelint-disable-next-line block-no-empty */
16
+ .utrecht-radio-button {
17
+ /*
18
+ * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
19
+ * With a 0% gradient, the circle will have jagged edges.
20
+ */
21
+ -webkit-appearance: none;
22
+ -moz-appearance: none;
23
+ appearance: none;
24
+ margin-block-end: 0;
25
+ margin-block-start: 0;
26
+ margin-inline-end: 0;
27
+ margin-inline-start: 0;
28
+ --_utrecht-radio-button-background-color: var(
29
+ --_utrecht-radio-button-interactive-background-color,
30
+ var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
31
+ );
32
+ --_utrecht-radio-button-border-color: var(
33
+ --_utrecht-radio-button-interactive-border-color,
34
+ var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
35
+ );
36
+ --_utrecht-radio-button-border-width: var(
37
+ --_utrecht-radio-button-interactive-border-width,
38
+ var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
39
+ );
40
+ --_utrecht-radio-button-color: var(
41
+ --_utrecht-radio-button-interactive-color,
42
+ var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
43
+ );
44
+ --_utrecht-radio-button-icon-size: 0;
45
+ background-color: var(--_utrecht-radio-button-background-color);
46
+ background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
47
+ background-position: center;
48
+ background-repeat: no-repeat;
49
+ background-size: contain;
50
+ block-size: var(--utrecht-radio-button-size, 1em);
51
+ border-color: var(--_utrecht-radio-button-border-color);
52
+ border-radius: 50%;
53
+ border-style: solid;
54
+ border-width: var(--_utrecht-radio-button-border-width);
55
+ cursor: var(--utrecht-action-activate-cursor);
56
+ inline-size: var(--utrecht-radio-button-size, 1em);
57
+ margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
58
+ -webkit-print-color-adjust: exact;
59
+ print-color-adjust: exact;
60
+ -webkit-user-select: none;
61
+ user-select: none;
62
+ vertical-align: top;
63
+ }
64
+
65
+ .utrecht-radio-button--checked {
66
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
67
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
68
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
69
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
70
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
71
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
72
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
73
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
74
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
75
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
76
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
77
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
78
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
79
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
80
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
81
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
82
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
83
+ }
84
+
85
+ .utrecht-radio-button--hover {
86
+ --_utrecht-radio-button-interactive-background-color: var(
87
+ --_utrecht-radio-button-state-hover-background-color,
88
+ var(--utrecht-radio-button-hover-background-color)
89
+ );
90
+ --_utrecht-radio-button-interactive-border-color: var(
91
+ --_utrecht-radio-button-state-hover-border-color,
92
+ var(--utrecht-radio-button-hover-border-color)
93
+ );
94
+ --_utrecht-radio-button-interactive-border-width: var(
95
+ --_utrecht-radio-button-state-hover-border-width,
96
+ var(--utrecht-radio-button-hover-border-width)
97
+ );
98
+ --_utrecht-radio-button-interactive-color: var(
99
+ --_utrecht-radio-button-state-hover-color,
100
+ var(--utrecht-radio-button-hover-color)
101
+ );
102
+ }
103
+
104
+ .utrecht-radio-button--focus {
105
+ --_utrecht-radio-button-interactive-background-color: var(
106
+ --utrecht-radio-button-focus-background-color,
107
+ var(--utrecht-radio-button-focus-background-color)
108
+ );
109
+ --_utrecht-radio-button-interactive-border-color: var(
110
+ --utrecht-radio-button-focus-border-color,
111
+ var(--utrecht-radio-button-focus-border-color)
112
+ );
113
+ --_utrecht-radio-button-interactive-border-width: var(
114
+ --utrecht-radio-button-focus-border-width,
115
+ var(--utrecht-radio-button-focus-border-width)
116
+ );
117
+ --_utrecht-radio-button-interactive-color: var(
118
+ --utrecht-radio-button-focus-color,
119
+ var(--utrecht-radio-button-focus-color)
120
+ );
121
+ }
122
+
123
+ .utrecht-radio-button--focus-visible {
124
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
125
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
126
+ * can combine it with the focus ring box shadow.
127
+ */
128
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
129
+ var(--utrecht-focus-inverse-outline-color, transparent);
130
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
131
+ outline-color: var(--utrecht-focus-outline-color, revert);
132
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
133
+ outline-style: var(--utrecht-focus-outline-style, revert);
134
+ outline-width: var(--utrecht-focus-outline-width, revert);
135
+ }
136
+
137
+ .utrecht-radio-button--active {
138
+ --_utrecht-radio-button-interactive-background-color: var(
139
+ --_utrecht-radio-button-state-active-background-color,
140
+ var(--utrecht-radio-button-active-background-color)
141
+ );
142
+ --_utrecht-radio-button-interactive-border-color: var(
143
+ --_utrecht-radio-button-state-active-border-color,
144
+ var(--utrecht-radio-button-active-border-color)
145
+ );
146
+ --_utrecht-radio-button-interactive-border-width: var(
147
+ --_utrecht-radio-button-state-active-border-width,
148
+ var(--utrecht-radio-button-active-border-width)
149
+ );
150
+ --_utrecht-radio-button-interactive-color: var(
151
+ --_utrecht-radio-button-state-active-color,
152
+ var(--utrecht-radio-button-active-color)
153
+ );
154
+ }
155
+
156
+ .utrecht-radio-button--disabled {
157
+ /*
158
+ * The disabled radio button should have:
159
+ * - should have no active effect
160
+ * - should have no focus effect
161
+ * - should have no hover effect
162
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
163
+ */
164
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
165
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
166
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
167
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
168
+ /* no focus effect */
169
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
170
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
171
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
172
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
173
+ /* no active effect */
174
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
175
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
176
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
177
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
178
+ /* no hover effect */
179
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
180
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
181
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
182
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
183
+ cursor: var(--utrecht-action-disabled-cursor);
184
+ }
185
+
186
+ .utrecht-radio-button--invalid {
187
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
188
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
189
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
190
+ }
191
+
192
+ .utrecht-radio-button--html-input {
193
+ /* override the `:focus` selector above */
194
+ /* stylelint-disable-next-line no-descending-specificity */
195
+ }
196
+ .utrecht-radio-button--html-input:checked {
197
+ --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
198
+ --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
199
+ --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
200
+ --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
201
+ --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
202
+ --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
203
+ --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
204
+ --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
205
+ --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
206
+ --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
207
+ --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
208
+ --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
209
+ --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
210
+ --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
211
+ --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
212
+ --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
213
+ --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
214
+ }
215
+ .utrecht-radio-button--html-input:disabled {
216
+ /*
217
+ * The disabled radio button should have:
218
+ * - should have no active effect
219
+ * - should have no focus effect
220
+ * - should have no hover effect
221
+ * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
222
+ */
223
+ --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
224
+ --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
225
+ --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
226
+ --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
227
+ /* no focus effect */
228
+ --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
229
+ --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
230
+ --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
231
+ --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
232
+ /* no active effect */
233
+ --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
234
+ --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
235
+ --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
236
+ --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
237
+ /* no hover effect */
238
+ --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
239
+ --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
240
+ --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
241
+ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
242
+ cursor: var(--utrecht-action-disabled-cursor);
243
+ }
244
+ .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
245
+ border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
246
+ border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
247
+ color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
248
+ }
249
+ .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
250
+ --_utrecht-radio-button-interactive-background-color: var(
251
+ --utrecht-radio-button-focus-background-color,
252
+ var(--utrecht-radio-button-focus-background-color)
253
+ );
254
+ --_utrecht-radio-button-interactive-border-color: var(
255
+ --utrecht-radio-button-focus-border-color,
256
+ var(--utrecht-radio-button-focus-border-color)
257
+ );
258
+ --_utrecht-radio-button-interactive-border-width: var(
259
+ --utrecht-radio-button-focus-border-width,
260
+ var(--utrecht-radio-button-focus-border-width)
261
+ );
262
+ --_utrecht-radio-button-interactive-color: var(
263
+ --utrecht-radio-button-focus-color,
264
+ var(--utrecht-radio-button-focus-color)
265
+ );
266
+ }
267
+ .utrecht-radio-button--html-input:focus-visible {
268
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
269
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
270
+ * can combine it with the focus ring box shadow.
271
+ */
272
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
273
+ var(--utrecht-focus-inverse-outline-color, transparent);
274
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
275
+ outline-color: var(--utrecht-focus-outline-color, revert);
276
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
277
+ outline-style: var(--utrecht-focus-outline-style, revert);
278
+ outline-width: var(--utrecht-focus-outline-width, revert);
279
+ }
280
+ .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
281
+ --_utrecht-radio-button-interactive-background-color: var(
282
+ --_utrecht-radio-button-state-hover-background-color,
283
+ var(--utrecht-radio-button-hover-background-color)
284
+ );
285
+ --_utrecht-radio-button-interactive-border-color: var(
286
+ --_utrecht-radio-button-state-hover-border-color,
287
+ var(--utrecht-radio-button-hover-border-color)
288
+ );
289
+ --_utrecht-radio-button-interactive-border-width: var(
290
+ --_utrecht-radio-button-state-hover-border-width,
291
+ var(--utrecht-radio-button-hover-border-width)
292
+ );
293
+ --_utrecht-radio-button-interactive-color: var(
294
+ --_utrecht-radio-button-state-hover-color,
295
+ var(--utrecht-radio-button-hover-color)
296
+ );
297
+ }
298
+ .utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) {
299
+ --_utrecht-radio-button-interactive-background-color: var(
300
+ --_utrecht-radio-button-state-active-background-color,
301
+ var(--utrecht-radio-button-active-background-color)
302
+ );
303
+ --_utrecht-radio-button-interactive-border-color: var(
304
+ --_utrecht-radio-button-state-active-border-color,
305
+ var(--utrecht-radio-button-active-border-color)
306
+ );
307
+ --_utrecht-radio-button-interactive-border-width: var(
308
+ --_utrecht-radio-button-state-active-border-width,
309
+ var(--utrecht-radio-button-active-border-width)
310
+ );
311
+ --_utrecht-radio-button-interactive-color: var(
312
+ --_utrecht-radio-button-state-active-color,
313
+ var(--utrecht-radio-button-active-color)
314
+ );
315
+ }
316
+
317
+ .amsterdam-radio-button {
318
+ --_amsterdam-radio-button-background-color: var(--amsterdam-radio-button-background-color, currentColor);
319
+ }
320
+
321
+ .amsterdam-radio-button:checked {
322
+ background-image: radial-gradient(circle, var(--_amsterdam-radio-button-background-color, transparent) 50%, currentColor 60%);
323
+ }
324
+
325
+ .amsterdam-radio-button:hover {
326
+ box-shadow: var(--amsterdam-radio-button-hover-box-shadow);
327
+ }
328
+
329
+ .amsterdam-radio-button:checked:hover {
330
+ background-color: var(--amsterdam-radio-button-hover-background-color);
331
+ border-color: var(--amsterdam-radio-button-hover-border-color);
332
+ box-shadow: none;
333
+ }
334
+
335
+ .amsterdam-radio-button:disabled:checked {
336
+ --_amsterdam-radio-button-background-color: var(--amsterdam-radio-button-disabled-background-color);
337
+ background-color: var(--amsterdam-radio-button-disabled-background-color);
338
+ border-color: var(--amsterdam-radio-button-disabled-border-color);
339
+ }
340
+
341
+ /*# sourceMappingURL=radio-button.css.map */
package/dist/radio-button/radio-button.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../node_modules/@utrecht/components/radio-button/css/index.scss","../../node_modules/@utrecht/components/radio-button/css/_mixin.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../src/radio-button/radio-button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADwHA;AD9IA;ACWE;AAAA;AAAA;AAAA;EAVA;EACA;EACA;EACA;EACA;EACA;EACA;EAUA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;EAEA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpDF;ECwDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpEF;EC2IE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADnJF;EC4JE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADpKF;AEdE;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;AFOF;ECwGE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADhHF;ACwDE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EAEA;;;ADlFF;EC0FE;EACA;EACA;;;ADxFF;ACiLE;AACA;;AAvBA;EA/HA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmHA;AA/GA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EAEA;;AAqFA;EA7EA;EACA;EACA;;AAqFA;EArCA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;AA+BA;ACjNA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;AD0MA;EApEA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;AA4DA;EA/FA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;AE5IF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA","file":"radio-button.css"}
package/dist/textbox/textbox.css ADDED
@@ -0,0 +1,178 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+ /**
6
+ * @license EUPL-1.2
7
+ * Copyright (c) 2021 Gemeente Utrecht
8
+ * Copyright (c) 2021 Robbert Broersma
9
+ */
10
+ /* stylelint-disable-next-line block-no-empty */
11
+ /**
12
+ * @license EUPL-1.2
13
+ * Copyright (c) 2021 Robbert Broersma
14
+ */
15
+ /**
16
+ * @license EUPL-1.2
17
+ * Copyright (c) 2021 Gemeente Utrecht
18
+ * Copyright (c) 2021 Robbert Broersma
19
+ */
20
+ /* stylelint-disable-next-line block-no-empty */
21
+ .utrecht-textbox {
22
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
23
+ border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
24
+ border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
25
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
26
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
27
+ border-style: solid;
28
+ box-sizing: border-box;
29
+ color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
30
+ font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
31
+ font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
32
+ font-weight: initial; /* harden */
33
+ height: initial; /* harden */
34
+ line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
35
+ max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
36
+ padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
37
+ padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
38
+ padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
39
+ padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
40
+ width: 100%;
41
+ }
42
+
43
+ .utrecht-textbox--invalid {
44
+ --_utrecht-textbox-border-width: var(
45
+ --utrecht-textbox-invalid-border-width,
46
+ var(
47
+ --utrecht-form-control-invalid-border-width,
48
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
49
+ )
50
+ );
51
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
52
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
53
+ border-width: var(--_utrecht-textbox-border-width);
54
+ border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
55
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
56
+ }
57
+
58
+ .utrecht-textbox--disabled {
59
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
60
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
61
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
62
+ cursor: var(--utrecht-action-disabled-cursor);
63
+ }
64
+
65
+ .utrecht-textbox--focus {
66
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
67
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
68
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
69
+ }
70
+
71
+ .utrecht-textbox--focus-visible {
72
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
73
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
74
+ * can combine it with the focus ring box shadow.
75
+ */
76
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
77
+ var(--utrecht-focus-inverse-outline-color, transparent);
78
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
79
+ outline-color: var(--utrecht-focus-outline-color, revert);
80
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
81
+ outline-style: var(--utrecht-focus-outline-style, revert);
82
+ outline-width: var(--utrecht-focus-outline-width, revert);
83
+ }
84
+
85
+ .utrecht-textbox--read-only {
86
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
87
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
88
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
89
+ }
90
+
91
+ .utrecht-textbox__placeholder {
92
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
93
+ font-style: var(--utrecht-form-control-placeholder-font-style);
94
+ opacity: 100%;
95
+ }
96
+
97
+ .utrecht-textbox--numeric {
98
+ -moz-appearance: textfield; /* avoid spinner input in Firefox */
99
+ font-variant-numeric: lining-nums tabular-nums;
100
+ }
101
+
102
+ .utrecht-textbox--password {
103
+ font-variant-ligatures: none;
104
+ font-variant-numeric: slashed-zero;
105
+ }
106
+
107
+ .utrecht-textbox--url {
108
+ font-variant-ligatures: none;
109
+ }
110
+
111
+ .utrecht-textbox--html-input:disabled {
112
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
113
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
114
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
115
+ cursor: var(--utrecht-action-disabled-cursor);
116
+ }
117
+ .utrecht-textbox--html-input:focus {
118
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
119
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
120
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
121
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
122
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
123
+ * can combine it with the focus ring box shadow.
124
+ */
125
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
126
+ var(--utrecht-focus-inverse-outline-color, transparent);
127
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
128
+ outline-color: var(--utrecht-focus-outline-color, revert);
129
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
130
+ outline-style: var(--utrecht-focus-outline-style, revert);
131
+ outline-width: var(--utrecht-focus-outline-width, revert);
132
+ }
133
+ .utrecht-textbox--html-input:focus:not(:focus-visible) {
134
+ /* undo focus ring */
135
+ box-shadow: none;
136
+ outline-style: revert;
137
+ }
138
+ .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
139
+ --_utrecht-textbox-border-width: var(
140
+ --utrecht-textbox-invalid-border-width,
141
+ var(
142
+ --utrecht-form-control-invalid-border-width,
143
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
144
+ )
145
+ );
146
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
147
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
148
+ border-width: var(--_utrecht-textbox-border-width);
149
+ border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
150
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
151
+ }
152
+ .utrecht-textbox--html-input:read-only {
153
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
154
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
155
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
156
+ }
157
+ .utrecht-textbox--html-input::placeholder {
158
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
159
+ font-style: var(--utrecht-form-control-placeholder-font-style);
160
+ opacity: 100%;
161
+ }
162
+ .utrecht-textbox--html-input[type=password i] {
163
+ font-variant-ligatures: none;
164
+ font-variant-numeric: slashed-zero;
165
+ }
166
+ .utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] {
167
+ font-variant-ligatures: none;
168
+ }
169
+ .utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
170
+ -moz-appearance: textfield; /* avoid spinner input in Firefox */
171
+ font-variant-numeric: lining-nums tabular-nums;
172
+ }
173
+
174
+ .amsterdam-textbox:hover {
175
+ box-shadow: var(--amsterdam-textbox-hover-box-shadow);
176
+ }
177
+
178
+ /*# sourceMappingURL=textbox.css.map */
package/dist/textbox/textbox.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../node_modules/@utrecht/components/textbox/css/index.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../node_modules/@utrecht/components/textbox/css/_mixin.scss","../../src/textbox/textbox.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;AC7BA;AAAA;AAAA;AAAA;ADAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADrBA;EEAE;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EAIA;;;AFvBF;EE2BE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQA;EAOA;EAOA;EACA;EAUA;;;AFxDF;EE+DE;EAOA;EAOA;EAIA;;;AF7EF;EEmFE;EAOA;EAOA;;;AF5FF;AChBE;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADSF;EEmGE;EAOA;EAOA;;;AF7GF;EEoHE;EAIA;EACA;;;AFrHF;EEyHE;EACA;;;AFtHF;EE0HE;EACA;;;AFvHF;EE2HE;;;AAIA;EA7FA;EAOA;EAOA;EAIA;;AAmFE;EA7EF;EAOA;EAOA;AD5GA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;ACqKE;ADjKF;EACA;EACA;;AC4KA;EA/JA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQA;EAOA;EAOA;EACA;EAUA;;AAmIA;EA3EA;EAOA;EAOA;;AAiEA;EA1DA;EAIA;EACA;;AFtGA;EE+GA;EACA;;AF7GA;EEiHA;;AF3GA;EEiGA;EACA;;;AC5JA;EACE","file":"textbox.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.2",
2
+ "version": "0.1.3",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -17,11 +17,12 @@
17
17
  "build": "sass src/:dist/",
18
18
  "clean": "rimraf dist/"
19
19
  },
20
- "dependencies": {
21
- "normalize.css": "8.0.1"
22
- },
23
20
  "devDependencies": {
24
- "sass": "1.58.0"
21
+ "@amsterdam/design-system-tokens": "0.1.2",
22
+ "sass": "1.63.6"
23
+ },
24
+ "dependencies": {
25
+ "@utrecht/components": "1.0.0-alpha.492"
25
26
  },
26
- "gitHead": "89f67a928d30a512e8fa7f31b8dae925846fc411"
27
+ "gitHead": "c11658e889d52c6a48a058bbbe332d4fe170c3c4"
27
28
  }