@utrecht/component-library-css 1.0.0-alpha.514 → 1.0.0-alpha.516

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 +36 -0
  2. package/dist/index.css +138 -9
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -513,6 +513,42 @@ however browsers don't seem to have implemented great looking supixel tweening y
513
513
  --_utrecht-button-hint-disabled-color,
514
514
  var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
515
515
  );
516
+ --_utrecht-button-pressed-background-color: var(
517
+ --_utrecht-button-hint-pressed-background-color,
518
+ var(
519
+ --_utrecht-button-hint-background-color,
520
+ var(
521
+ --_utrecht-button-appearance-pressed-background-color,
522
+ var(
523
+ --_utrecht-button-appearance-background-color,
524
+ var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
525
+ )
526
+ )
527
+ )
528
+ );
529
+ --_utrecht-button-pressed-border-color: var(
530
+ --_utrecht-button-hint-pressed-border-color,
531
+ var(
532
+ --_utrecht-button-hint-border-color,
533
+ var(
534
+ --_utrecht-button-appearance-pressed-border-color,
535
+ var(
536
+ --_utrecht-button-appearance-border-color,
537
+ var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
538
+ )
539
+ )
540
+ )
541
+ );
542
+ --_utrecht-button-pressed-color: var(
543
+ --_utrecht-button-hint-pressed-color,
544
+ var(
545
+ --_utrecht-button-hint-color,
546
+ var(
547
+ --_utrecht-button-appearance-pressed-color,
548
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
549
+ )
550
+ )
551
+ );
516
552
  --_utrecht-button-focus-background-color: var(
517
553
  --_utrecht-button-hint-focus-background-color,
518
554
  var(
package/dist/index.css CHANGED
@@ -804,6 +804,42 @@ ol.utrecht-breadcrumb__list {
804
804
  --_utrecht-button-hint-disabled-color,
805
805
  var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
806
806
  );
807
+ --_utrecht-button-pressed-background-color: var(
808
+ --_utrecht-button-hint-pressed-background-color,
809
+ var(
810
+ --_utrecht-button-hint-background-color,
811
+ var(
812
+ --_utrecht-button-appearance-pressed-background-color,
813
+ var(
814
+ --_utrecht-button-appearance-background-color,
815
+ var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
816
+ )
817
+ )
818
+ )
819
+ );
820
+ --_utrecht-button-pressed-border-color: var(
821
+ --_utrecht-button-hint-pressed-border-color,
822
+ var(
823
+ --_utrecht-button-hint-border-color,
824
+ var(
825
+ --_utrecht-button-appearance-pressed-border-color,
826
+ var(
827
+ --_utrecht-button-appearance-border-color,
828
+ var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
829
+ )
830
+ )
831
+ )
832
+ );
833
+ --_utrecht-button-pressed-color: var(
834
+ --_utrecht-button-hint-pressed-color,
835
+ var(
836
+ --_utrecht-button-hint-color,
837
+ var(
838
+ --_utrecht-button-appearance-pressed-color,
839
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
840
+ )
841
+ )
842
+ );
807
843
  --_utrecht-button-focus-background-color: var(
808
844
  --_utrecht-button-hint-focus-background-color,
809
845
  var(
@@ -982,15 +1018,9 @@ ol.utrecht-breadcrumb__list {
982
1018
  }
983
1019
 
984
1020
  .utrecht-button--pressed {
985
- /* Copy `active` styles for now.
986
- Later we can decide to:
987
- - merge `active` and `pressed` and name the state `pressed`, or:
988
- - merge `active` and `pressed` and name the state `active`, or:
989
- - add `pressed` design tokens
990
- */
991
- background-color: var(--_utrecht-button-active-background-color);
992
- border-color: var(--_utrecht-button-active-border-color);
993
- color: var(--_utrecht-button-active-color);
1021
+ background-color: var(--_utrecht-button-pressed-background-color);
1022
+ border-color: var(--_utrecht-button-pressed-border-color);
1023
+ color: var(--_utrecht-button-pressed-color);
994
1024
  }
995
1025
 
996
1026
  .utrecht-button:disabled,
@@ -1101,6 +1131,9 @@ ol.utrecht-breadcrumb__list {
1101
1131
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1102
1132
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
1103
1133
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
1134
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
1135
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
1136
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
1104
1137
  }
1105
1138
 
1106
1139
  .utrecht-button--secondary-action {
@@ -1123,6 +1156,9 @@ ol.utrecht-breadcrumb__list {
1123
1156
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
1124
1157
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
1125
1158
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
1159
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
1160
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
1161
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
1126
1162
  }
1127
1163
 
1128
1164
  .utrecht-button--subtle {
@@ -1145,6 +1181,9 @@ ol.utrecht-breadcrumb__list {
1145
1181
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
1146
1182
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
1147
1183
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
1184
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
1185
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
1186
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
1148
1187
  }
1149
1188
 
1150
1189
  .utrecht-button--primary-action.utrecht-button--danger {
@@ -1165,6 +1204,11 @@ ol.utrecht-breadcrumb__list {
1165
1204
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
1166
1205
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
1167
1206
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
1207
+ --_utrecht-button-hint-pressed-background-color: var(
1208
+ --utrecht-button-primary-action-danger-pressed-background-color
1209
+ );
1210
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
1211
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
1168
1212
  }
1169
1213
 
1170
1214
  .utrecht-button--primary-action.utrecht-button--ready {
@@ -1185,6 +1229,11 @@ ol.utrecht-breadcrumb__list {
1185
1229
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
1186
1230
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
1187
1231
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
1232
+ --_utrecht-button-hint-pressed-background-color: var(
1233
+ --utrecht-button-primary-action-ready-pressed-background-color
1234
+ );
1235
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
1236
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
1188
1237
  }
1189
1238
 
1190
1239
  .utrecht-button--primary-action.utrecht-button--warning {
@@ -1205,6 +1254,11 @@ ol.utrecht-breadcrumb__list {
1205
1254
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
1206
1255
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
1207
1256
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
1257
+ --_utrecht-button-hint-pressed-background-color: var(
1258
+ --utrecht-button-primary-action-warning-pressed-background-color
1259
+ );
1260
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
1261
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
1208
1262
  }
1209
1263
 
1210
1264
  .utrecht-button--secondary-action.utrecht-button--danger {
@@ -1225,6 +1279,11 @@ ol.utrecht-breadcrumb__list {
1225
1279
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
1226
1280
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
1227
1281
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
1282
+ --_utrecht-button-hint-pressed-background-color: var(
1283
+ --utrecht-button-secondary-action-danger-pressed-background-color
1284
+ );
1285
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
1286
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
1228
1287
  }
1229
1288
 
1230
1289
  .utrecht-button--secondary-action.utrecht-button--ready {
@@ -1245,6 +1304,11 @@ ol.utrecht-breadcrumb__list {
1245
1304
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
1246
1305
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
1247
1306
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
1307
+ --_utrecht-button-hint-pressed-background-color: var(
1308
+ --utrecht-button-secondary-action-ready-pressed-background-color
1309
+ );
1310
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
1311
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
1248
1312
  }
1249
1313
 
1250
1314
  .utrecht-button--secondary-action.utrecht-button--warning {
@@ -1265,6 +1329,11 @@ ol.utrecht-breadcrumb__list {
1265
1329
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
1266
1330
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
1267
1331
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
1332
+ --_utrecht-button-hint-pressed-background-color: var(
1333
+ --utrecht-button-secondary-action-warning-pressed-background-color
1334
+ );
1335
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
1336
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
1268
1337
  }
1269
1338
 
1270
1339
  .utrecht-button--subtle.utrecht-button--danger {
@@ -1285,6 +1354,11 @@ ol.utrecht-breadcrumb__list {
1285
1354
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
1286
1355
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
1287
1356
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
1357
+ --_utrecht-button-hint-pressed-background-color: var(
1358
+ --utrecht-button-subtle-danger-pressed-background-color
1359
+ );
1360
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
1361
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
1288
1362
  }
1289
1363
 
1290
1364
  .utrecht-button--subtle.utrecht-button--ready {
@@ -1305,6 +1379,11 @@ ol.utrecht-breadcrumb__list {
1305
1379
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
1306
1380
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
1307
1381
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
1382
+ --_utrecht-button-hint-pressed-background-color: var(
1383
+ --utrecht-button-subtle-ready-pressed-background-color
1384
+ );
1385
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
1386
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
1308
1387
  }
1309
1388
 
1310
1389
  .utrecht-button--subtle.utrecht-button--warning {
@@ -1325,6 +1404,11 @@ ol.utrecht-breadcrumb__list {
1325
1404
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
1326
1405
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
1327
1406
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
1407
+ --_utrecht-button-hint-pressed-background-color: var(
1408
+ --utrecht-button-subtle-warning-pressed-background-color
1409
+ );
1410
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
1411
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
1328
1412
  }
1329
1413
 
1330
1414
  /**
@@ -1700,6 +1784,42 @@ ol.utrecht-breadcrumb__list {
1700
1784
  --_utrecht-button-hint-disabled-color,
1701
1785
  var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
1702
1786
  );
1787
+ --_utrecht-button-pressed-background-color: var(
1788
+ --_utrecht-button-hint-pressed-background-color,
1789
+ var(
1790
+ --_utrecht-button-hint-background-color,
1791
+ var(
1792
+ --_utrecht-button-appearance-pressed-background-color,
1793
+ var(
1794
+ --_utrecht-button-appearance-background-color,
1795
+ var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
1796
+ )
1797
+ )
1798
+ )
1799
+ );
1800
+ --_utrecht-button-pressed-border-color: var(
1801
+ --_utrecht-button-hint-pressed-border-color,
1802
+ var(
1803
+ --_utrecht-button-hint-border-color,
1804
+ var(
1805
+ --_utrecht-button-appearance-pressed-border-color,
1806
+ var(
1807
+ --_utrecht-button-appearance-border-color,
1808
+ var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
1809
+ )
1810
+ )
1811
+ )
1812
+ );
1813
+ --_utrecht-button-pressed-color: var(
1814
+ --_utrecht-button-hint-pressed-color,
1815
+ var(
1816
+ --_utrecht-button-hint-color,
1817
+ var(
1818
+ --_utrecht-button-appearance-pressed-color,
1819
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
1820
+ )
1821
+ )
1822
+ );
1703
1823
  --_utrecht-button-focus-background-color: var(
1704
1824
  --_utrecht-button-hint-focus-background-color,
1705
1825
  var(
@@ -1957,6 +2077,9 @@ ol.utrecht-breadcrumb__list {
1957
2077
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
1958
2078
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
1959
2079
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
2080
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
2081
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
2082
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
1960
2083
  }
1961
2084
 
1962
2085
  .utrecht-button-link--secondary-action {
@@ -1979,6 +2102,9 @@ ol.utrecht-breadcrumb__list {
1979
2102
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
1980
2103
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
1981
2104
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
2105
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
2106
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
2107
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
1982
2108
  }
1983
2109
 
1984
2110
  .utrecht-button-link--subtle {
@@ -2001,6 +2127,9 @@ ol.utrecht-breadcrumb__list {
2001
2127
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
2002
2128
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
2003
2129
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
2130
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
2131
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
2132
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
2004
2133
  }
2005
2134
 
2006
2135
  /**
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.514",
2
+ "version": "1.0.0-alpha.516",
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": "94a84d1619a8303adc5933bebf5fe05b8ae2dae7"
29
+ "gitHead": "b846427f09ce26964233f63ac82f6499d09ca2aa"
30
30
  }