@utrecht/component-library-css 1.0.0-alpha.478 → 1.0.0-alpha.479

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/html.css +27 -3
  2. package/dist/index.css +45 -5
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -1205,9 +1205,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
1205
1205
  outline-style: revert;
1206
1206
  }
1207
1207
  .utrecht-html select[aria-invalid=true] {
1208
+ --_utrecht-select-border-width: var(
1209
+ --utrecht-select-invalid-border-width,
1210
+ var(
1211
+ --utrecht-form-control-invalid-border-width,
1212
+ var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
1213
+ )
1214
+ );
1208
1215
  background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1209
1216
  border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1210
- border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))));
1217
+ border-width: var(--_utrecht-select-border-width);
1218
+ border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
1211
1219
  }
1212
1220
  .utrecht-html hr {
1213
1221
  border-color: var(--utrecht-separator-color);
@@ -1360,9 +1368,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
1360
1368
  outline-style: revert;
1361
1369
  }
1362
1370
  .utrecht-html textarea:invalid, .utrecht-html textarea[aria-invalid=true] {
1371
+ --_utrecht-textarea-border-width: var(
1372
+ --utrecht-textarea-invalid-border-width,
1373
+ var(
1374
+ --utrecht-form-control-invalid-border-width,
1375
+ var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
1376
+ )
1377
+ );
1363
1378
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1364
1379
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1365
- border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
1380
+ border-width: var(--_utrecht-textarea-border-width);
1381
+ border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
1366
1382
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1367
1383
  }
1368
1384
  .utrecht-html textarea:read-only {
@@ -1496,9 +1512,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
1496
1512
  .utrecht-html input[type=url i][aria-invalid=true],
1497
1513
  .utrecht-html input[type=week i]:invalid,
1498
1514
  .utrecht-html input[type=week i][aria-invalid=true] {
1515
+ --_utrecht-textbox-border-width: var(
1516
+ --utrecht-textbox-invalid-border-width,
1517
+ var(
1518
+ --utrecht-form-control-invalid-border-width,
1519
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
1520
+ )
1521
+ );
1499
1522
  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))));
1500
1523
  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))));
1501
- border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
1524
+ border-width: var(--_utrecht-textbox-border-width);
1525
+ 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)))));
1502
1526
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
1503
1527
  }
1504
1528
  .utrecht-html input:not([type]):read-only,
package/dist/index.css CHANGED
@@ -4634,9 +4634,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
4634
4634
  }
4635
4635
 
4636
4636
  .utrecht-select--invalid {
4637
+ --_utrecht-select-border-width: var(
4638
+ --utrecht-select-invalid-border-width,
4639
+ var(
4640
+ --utrecht-form-control-invalid-border-width,
4641
+ var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
4642
+ )
4643
+ );
4637
4644
  background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
4638
4645
  border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
4639
- border-width: var(--utrecht-select-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))));
4646
+ border-width: var(--_utrecht-select-border-width);
4647
+ border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
4640
4648
  }
4641
4649
 
4642
4650
  /* stylelint-disable-next-line block-no-empty */
@@ -5017,9 +5025,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
5017
5025
  }
5018
5026
 
5019
5027
  .utrecht-textarea--invalid {
5028
+ --_utrecht-textarea-border-width: var(
5029
+ --utrecht-textarea-invalid-border-width,
5030
+ var(
5031
+ --utrecht-form-control-invalid-border-width,
5032
+ var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
5033
+ )
5034
+ );
5020
5035
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5021
5036
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5022
- border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
5037
+ border-width: var(--_utrecht-textarea-border-width);
5038
+ border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
5023
5039
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5024
5040
  }
5025
5041
 
@@ -5090,9 +5106,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
5090
5106
  outline-style: revert;
5091
5107
  }
5092
5108
  .utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
5109
+ --_utrecht-textarea-border-width: var(
5110
+ --utrecht-textarea-invalid-border-width,
5111
+ var(
5112
+ --utrecht-form-control-invalid-border-width,
5113
+ var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
5114
+ )
5115
+ );
5093
5116
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5094
5117
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5095
- border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))));
5118
+ border-width: var(--_utrecht-textarea-border-width);
5119
+ border-bottom-width: var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));
5096
5120
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5097
5121
  }
5098
5122
  .utrecht-textarea--html-textarea:read-only {
@@ -5149,9 +5173,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
5149
5173
  }
5150
5174
 
5151
5175
  .utrecht-textbox--invalid {
5176
+ --_utrecht-textbox-border-width: var(
5177
+ --utrecht-textbox-invalid-border-width,
5178
+ var(
5179
+ --utrecht-form-control-invalid-border-width,
5180
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
5181
+ )
5182
+ );
5152
5183
  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))));
5153
5184
  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))));
5154
- border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
5185
+ border-width: var(--_utrecht-textbox-border-width);
5186
+ 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)))));
5155
5187
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5156
5188
  }
5157
5189
 
@@ -5236,9 +5268,17 @@ however browsers don't seem to have implemented great looking supixel tweening y
5236
5268
  outline-style: revert;
5237
5269
  }
5238
5270
  .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
5271
+ --_utrecht-textbox-border-width: var(
5272
+ --utrecht-textbox-invalid-border-width,
5273
+ var(
5274
+ --utrecht-form-control-invalid-border-width,
5275
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
5276
+ )
5277
+ );
5239
5278
  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))));
5240
5279
  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))));
5241
- border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))));
5280
+ border-width: var(--_utrecht-textbox-border-width);
5281
+ 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)))));
5242
5282
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
5243
5283
  }
5244
5284
  .utrecht-textbox--html-input:read-only {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.478",
2
+ "version": "1.0.0-alpha.479",
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",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "ea8c203b8d44989f472eedc4bd2659a00dc8d461"
29
+ "gitHead": "6edca66ee0446a22e4f9b497866fe534c550b022"
30
30
  }