@amsterdam/design-system-tokens 0.7.0 → 0.8.0

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 (37) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/compact.css +1 -1
  3. package/dist/compact.d.ts +1 -1
  4. package/dist/compact.mjs +1 -1
  5. package/dist/compact.scss +1 -1
  6. package/dist/compact.theme.css +1 -1
  7. package/dist/index.css +176 -69
  8. package/dist/index.d.ts +209 -24
  9. package/dist/index.json +243 -58
  10. package/dist/index.mjs +160 -53
  11. package/dist/index.scss +176 -69
  12. package/dist/index.theme.css +176 -69
  13. package/package.json +1 -1
  14. package/src/brand/ams/border.tokens.json +12 -0
  15. package/src/common/ams/link-appearance.tokens.json +2 -2
  16. package/src/components/ams/accordion.tokens.json +6 -4
  17. package/src/components/ams/alert.tokens.json +1 -1
  18. package/src/components/ams/avatar.tokens.json +49 -0
  19. package/src/components/ams/button.tokens.json +11 -8
  20. package/src/components/ams/checkbox.tokens.json +6 -2
  21. package/src/components/ams/date-input.tokens.json +45 -0
  22. package/src/components/ams/description-list.tokens.json +20 -0
  23. package/src/components/ams/dialog.tokens.json +0 -7
  24. package/src/components/ams/form-field-character-counter.tokens.json +14 -0
  25. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  26. package/src/components/ams/page-menu.tokens.json +2 -2
  27. package/src/components/ams/radio.tokens.json +4 -1
  28. package/src/components/ams/screen.tokens.json +1 -0
  29. package/src/components/ams/search-field.tokens.json +7 -6
  30. package/src/components/ams/select.tokens.json +41 -0
  31. package/src/components/ams/skip-link.tokens.json +1 -1
  32. package/src/components/ams/table.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -4
  34. package/src/components/ams/text-area.tokens.json +9 -8
  35. package/src/components/ams/text-input.tokens.json +8 -7
  36. package/src/components/ams/time-input.tokens.json +45 -0
  37. package/src/common/ams/border.tokens.json +0 -9
package/dist/index.json CHANGED
@@ -1,5 +1,13 @@
1
1
  {
2
2
  "ams": {
3
+ "border": {
4
+ "width": {
5
+ "sm": "0.0625rem",
6
+ "md": "0.125rem",
7
+ "lg": "0.1875rem",
8
+ "xl": "0.25rem"
9
+ }
10
+ },
3
11
  "color": {
4
12
  "primary-black": "#000000",
5
13
  "primary-white": "#FFFFFF",
@@ -105,11 +113,6 @@
105
113
  "cursor": "pointer"
106
114
  }
107
115
  },
108
- "border-width": {
109
- "sm": "1px",
110
- "md": "2px",
111
- "lg": "3px"
112
- },
113
116
  "focus": {
114
117
  "outline-offset": "2px"
115
118
  },
@@ -146,28 +149,30 @@
146
149
  }
147
150
  },
148
151
  "accordion": {
152
+ "gap": ".5rem",
149
153
  "button": {
150
154
  "color": "#004699",
151
155
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
152
156
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
153
157
  "font-weight": 800,
158
+ "gap": "1rem",
154
159
  "line-height": "1.6",
155
160
  "padding-block": ".75rem",
156
- "padding-inline": "1rem",
161
+ "padding-inline": "0",
157
162
  "focus": {
158
163
  "outline-offset": "2px"
159
164
  },
160
165
  "hover": {
161
- "box-shadow": "inset 0 0 0 2px #767676"
166
+ "color": "#102E62"
162
167
  }
163
168
  },
164
169
  "panel": {
165
- "padding-block": "1rem",
166
- "padding-inline": "1rem"
170
+ "padding-block": "0 1rem",
171
+ "padding-inline": "0"
167
172
  }
168
173
  },
169
174
  "alert": {
170
- "border-width": "4px",
175
+ "border-width": "0.25rem",
171
176
  "border-style": "solid",
172
177
  "gap": "1rem",
173
178
  "padding-block": "1rem",
@@ -199,6 +204,51 @@
199
204
  "x-wide": "16 / 9",
200
205
  "2x-wide": "32 / 9"
201
206
  },
207
+ "avatar": {
208
+ "aspect-ratio": "1 / 1",
209
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
210
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
211
+ "font-weight": 400,
212
+ "line-height": "1.6",
213
+ "padding-block": "0.25rem",
214
+ "padding-inline": "0.25rem",
215
+ "blue": {
216
+ "background-color": "#009DE6",
217
+ "color": "#000000"
218
+ },
219
+ "dark-blue": {
220
+ "background-color": "#004699",
221
+ "color": "#FFFFFF"
222
+ },
223
+ "dark-green": {
224
+ "background-color": "#00A03C",
225
+ "color": "#FFFFFF"
226
+ },
227
+ "green": {
228
+ "background-color": "#BED200",
229
+ "color": "#000000"
230
+ },
231
+ "magenta": {
232
+ "background-color": "#E50082",
233
+ "color": "#FFFFFF"
234
+ },
235
+ "orange": {
236
+ "background-color": "#FF9100",
237
+ "color": "#000000"
238
+ },
239
+ "purple": {
240
+ "background-color": "#A00078",
241
+ "color": "#FFFFFF"
242
+ },
243
+ "red": {
244
+ "background-color": "#EC0000",
245
+ "color": "#FFFFFF"
246
+ },
247
+ "yellow": {
248
+ "background-color": "#FFE600",
249
+ "color": "#000000"
250
+ }
251
+ },
202
252
  "badge": {
203
253
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
204
254
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
@@ -278,41 +328,44 @@
278
328
  "disabled": {
279
329
  "cursor": "not-allowed"
280
330
  },
331
+ "forced-color-mode": {
332
+ "border": "0.125rem solid"
333
+ },
281
334
  "primary": {
282
335
  "background-color": "#004699",
283
- "box-shadow": "inset 0 0 0 2px #004699",
336
+ "box-shadow": "inset 0 0 0 0.125rem #004699",
284
337
  "color": "#FFFFFF",
285
338
  "disabled": {
286
339
  "background-color": "#BEBEBE",
287
- "box-shadow": "inset 0 0 0 2px #BEBEBE"
340
+ "box-shadow": "inset 0 0 0 0.125rem #BEBEBE"
288
341
  },
289
342
  "hover": {
290
343
  "background-color": "#102E62",
291
- "box-shadow": "inset 0 0 0 2px #102E62"
344
+ "box-shadow": "inset 0 0 0 0.125rem #102E62"
292
345
  }
293
346
  },
294
347
  "secondary": {
295
348
  "background-color": "#FFFFFF",
296
349
  "color": "#004699",
297
- "box-shadow": "inset 0 0 0 2px #004699",
350
+ "box-shadow": "inset 0 0 0 0.125rem #004699",
298
351
  "hover": {
299
- "box-shadow": "inset 0 0 0 3px #102E62",
352
+ "box-shadow": "inset 0 0 0 0.1875rem #102E62",
300
353
  "color": "#102E62"
301
354
  },
302
355
  "disabled": {
303
356
  "background-color": "#FFFFFF",
304
- "box-shadow": "inset 0 0 0 2px #BEBEBE",
357
+ "box-shadow": "inset 0 0 0 0.125rem #BEBEBE",
305
358
  "color": "#BEBEBE"
306
359
  },
307
360
  "focus": {
308
- "box-shadow": "inset 0 0 0 2px #004699"
361
+ "box-shadow": "inset 0 0 0 0.125rem #004699"
309
362
  }
310
363
  },
311
364
  "tertiary": {
312
365
  "background-color": "transparent",
313
366
  "color": "#004699",
314
367
  "hover": {
315
- "box-shadow": "inset 0 0 0 2px #102E62",
368
+ "box-shadow": "inset 0 0 0 0.125rem #102E62",
316
369
  "color": "#102E62"
317
370
  },
318
371
  "disabled": {
@@ -343,6 +396,7 @@
343
396
  "outline-offset": "2px",
344
397
  "checkmark": {
345
398
  "border-color": "#004699",
399
+ "border-width": "0.125rem",
346
400
  "checked": {
347
401
  "background-color": "#004699",
348
402
  "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")",
@@ -352,6 +406,7 @@
352
406
  },
353
407
  "disabled": {
354
408
  "border-color": "#767676",
409
+ "border-width": "0.125rem",
355
410
  "checked": {
356
411
  "background-color": "#767676",
357
412
  "hover": {
@@ -366,7 +421,8 @@
366
421
  }
367
422
  },
368
423
  "hover": {
369
- "border-color": "#102E62"
424
+ "border-color": "#102E62",
425
+ "border-width": "0.1875rem"
370
426
  },
371
427
  "invalid": {
372
428
  "border-color": "#EC0000",
@@ -398,7 +454,8 @@
398
454
  "color": "#767676"
399
455
  },
400
456
  "hover": {
401
- "color": "#102E62"
457
+ "color": "#102E62",
458
+ "text-decoration-thickness": "0.125rem"
402
459
  }
403
460
  },
404
461
  "column": {
@@ -410,17 +467,61 @@
410
467
  "xl": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)"
411
468
  }
412
469
  },
470
+ "date-input": {
471
+ "background-color": "#FFFFFF",
472
+ "box-shadow": "inset 0 0 0 0.0625rem #000000",
473
+ "color": "#000000",
474
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
475
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
476
+ "font-weight": 400,
477
+ "line-height": "1.6",
478
+ "outline-offset": "2px",
479
+ "padding-block": ".5rem",
480
+ "padding-inline": "1.5rem",
481
+ "calender-picker-indicator": {
482
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
483
+ },
484
+ "disabled": {
485
+ "background-color": "#FFFFFF",
486
+ "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
487
+ "color": "#BEBEBE",
488
+ "calender-picker-indicator": {
489
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
490
+ }
491
+ },
492
+ "hover": {
493
+ "box-shadow": "inset 0 0 0 0.125rem #000000",
494
+ "calender-picker-indicator": {
495
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
496
+ }
497
+ },
498
+ "invalid": {
499
+ "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
500
+ "hover": {
501
+ "box-shadow": "inset 0 0 0 0.125rem #EC0000"
502
+ }
503
+ }
504
+ },
505
+ "description-list": {
506
+ "color": "#000000",
507
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
508
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
509
+ "font-weight": 400,
510
+ "gap": "1rem",
511
+ "inverse-color": "#FFFFFF",
512
+ "line-height": "1.6",
513
+ "row": {
514
+ "gap": "1rem"
515
+ },
516
+ "details": {
517
+ "font-weight": 800,
518
+ "padding-inline-start": "2rem"
519
+ }
520
+ },
413
521
  "dialog": {
414
522
  "background-color": "#FFFFFF",
415
523
  "border": "0",
416
524
  "max-inline-size": "min(87.69vw, 45rem)",
417
- "title": {
418
- "color": "#000000",
419
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
420
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
421
- "font-weight": 800,
422
- "line-height": "1.6"
423
- },
424
525
  "form": {
425
526
  "gap": "1.5rem",
426
527
  "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
@@ -443,12 +544,15 @@
443
544
  "line-height": "1.5"
444
545
  }
445
546
  },
446
- "form-label": {
547
+ "form-field-character-counter": {
447
548
  "color": "#000000",
448
549
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
449
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
450
- "font-weight": 800,
451
- "line-height": "1.5"
550
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
551
+ "font-weight": 400,
552
+ "line-height": "1.6",
553
+ "error": {
554
+ "color": "#EC0000"
555
+ }
452
556
  },
453
557
  "gap": {
454
558
  "xs": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
@@ -568,6 +672,13 @@
568
672
  "line-height": "1.6"
569
673
  }
570
674
  },
675
+ "label": {
676
+ "color": "#000000",
677
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
678
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
679
+ "font-weight": 800,
680
+ "line-height": "1.5"
681
+ },
571
682
  "link-list": {
572
683
  "gap": "0.5em",
573
684
  "link": {
@@ -722,8 +833,8 @@
722
833
  "line-height": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)"
723
834
  },
724
835
  "page-menu": {
725
- "column-gap": "2.5rem",
726
- "row-gap": "0.5rem",
836
+ "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
837
+ "row-gap": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)",
727
838
  "item": {
728
839
  "color": "#004699",
729
840
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -789,6 +900,7 @@
789
900
  "outline-offset": "2px",
790
901
  "circle": {
791
902
  "border-color": "#004699",
903
+ "border-width": "0.125rem",
792
904
  "checked": {
793
905
  "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
794
906
  "hover": {
@@ -797,6 +909,7 @@
797
909
  },
798
910
  "disabled": {
799
911
  "border-color": "#767676",
912
+ "border-width": "0.125rem",
800
913
  "checked": {
801
914
  "background-image": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")",
802
915
  "hover": {
@@ -824,7 +937,8 @@
824
937
  "color": "#767676"
825
938
  },
826
939
  "hover": {
827
- "color": "#102E62"
940
+ "color": "#102E62",
941
+ "text-decoration-thickness": "0.125rem"
828
942
  }
829
943
  },
830
944
  "row": {
@@ -837,6 +951,7 @@
837
951
  }
838
952
  },
839
953
  "screen": {
954
+ "background-color": "#FFFFFF",
840
955
  "wide": {
841
956
  "max-width": "100rem"
842
957
  },
@@ -856,10 +971,11 @@
856
971
  "padding-inline": ".5rem"
857
972
  },
858
973
  "input": {
859
- "box-shadow": "inset 0 0 0 1px #000000",
974
+ "background-color": "#FFFFFF",
975
+ "box-shadow": "inset 0 0 0 0.0625rem #000000",
860
976
  "color": "#000000",
861
977
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
862
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
978
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
863
979
  "font-weight": 400,
864
980
  "line-height": "1.6",
865
981
  "outline-offset": "2px",
@@ -868,23 +984,56 @@
868
984
  "cancel-button": {
869
985
  "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")",
870
986
  "color": "#004699",
871
- "height": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
872
- "width": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
987
+ "height": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
988
+ "width": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)"
873
989
  },
874
990
  "hover": {
875
- "box-shadow": "inset 0 0 0 2px #000000"
991
+ "box-shadow": "inset 0 0 0 0.125rem #000000"
876
992
  },
877
993
  "placeholder": {
878
994
  "color": "#767676"
879
995
  }
880
996
  }
881
997
  },
998
+ "select": {
999
+ "background-color": "#FFFFFF",
1000
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
1001
+ "background-position": "right 1rem center",
1002
+ "box-shadow": "inset 0 0 0 0.0625rem #000000",
1003
+ "color": "#000000",
1004
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
1005
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1006
+ "font-weight": 400,
1007
+ "line-height": "1.6",
1008
+ "outline-offset": "2px",
1009
+ "padding-block": ".5rem",
1010
+ "padding-inline": "1rem calc(2 * 1rem + 1em)",
1011
+ "disabled": {
1012
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
1013
+ "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
1014
+ "color": "#BEBEBE"
1015
+ },
1016
+ "hover": {
1017
+ "box-shadow": "inset 0 0 0 0.125rem #000000"
1018
+ },
1019
+ "invalid": {
1020
+ "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
1021
+ "hover": {
1022
+ "box-shadow": "inset 0 0 0 0.125rem #EC0000"
1023
+ }
1024
+ },
1025
+ "option": {
1026
+ "disabled": {
1027
+ "color": "#BEBEBE"
1028
+ }
1029
+ }
1030
+ },
882
1031
  "skip-link": {
883
1032
  "background-color": "#004699",
884
1033
  "color": "#FFFFFF",
885
1034
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
886
- "font-weight": 400,
887
1035
  "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
1036
+ "font-weight": 400,
888
1037
  "line-height": "1.6",
889
1038
  "outline-offset": "2px",
890
1039
  "padding-block": ".5rem",
@@ -942,14 +1091,14 @@
942
1091
  "table": {
943
1092
  "color": "#000000",
944
1093
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
945
- "font-weight": 400,
946
1094
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1095
+ "font-weight": 400,
947
1096
  "line-height": "1.6",
948
1097
  "caption": {
949
1098
  "font-weight": 800
950
1099
  },
951
1100
  "cell": {
952
- "border-bottom": "1px solid #E8E8E8",
1101
+ "border-bottom": "0.0625rem solid #E8E8E8",
953
1102
  "padding-block": "1rem",
954
1103
  "padding-inline": "1rem"
955
1104
  },
@@ -959,16 +1108,15 @@
959
1108
  },
960
1109
  "tabs": {
961
1110
  "list": {
962
- "border-bottom": ".125rem solid #004699"
1111
+ "background-color": "#FFFFFF",
1112
+ "border-bottom": "0.125rem solid #004699"
963
1113
  },
964
1114
  "button": {
965
- "background-color": "transparent",
966
- "border": "none",
967
1115
  "color": "#004699",
968
1116
  "cursor": "pointer",
969
1117
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
970
- "font-weight": 400,
971
1118
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1119
+ "font-weight": 400,
972
1120
  "line-height": "1.6",
973
1121
  "outline-offset": "-0.25rem",
974
1122
  "padding-block": ".5rem",
@@ -988,10 +1136,11 @@
988
1136
  }
989
1137
  },
990
1138
  "text-area": {
991
- "box-shadow": "inset 0 0 0 1px #000000",
1139
+ "background-color": "#FFFFFF",
1140
+ "box-shadow": "inset 0 0 0 0.0625rem #000000",
992
1141
  "color": "#000000",
993
1142
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
994
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
1143
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
995
1144
  "font-weight": 400,
996
1145
  "line-height": "1.6",
997
1146
  "min-height": "calc(1.6 * 1em + 2 * 0.5rem)",
@@ -1000,17 +1149,17 @@
1000
1149
  "padding-inline": "1rem",
1001
1150
  "disabled": {
1002
1151
  "background-color": "#FFFFFF",
1003
- "box-shadow": "inset 0 0 0 1px #BEBEBE",
1152
+ "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
1004
1153
  "color": "#BEBEBE",
1005
1154
  "cursor": "not-allowed"
1006
1155
  },
1007
1156
  "hover": {
1008
- "box-shadow": "inset 0 0 0 2px #000000"
1157
+ "box-shadow": "inset 0 0 0 0.125rem #000000"
1009
1158
  },
1010
1159
  "invalid": {
1011
- "box-shadow": "inset 0 0 0 1px #EC0000",
1160
+ "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
1012
1161
  "hover": {
1013
- "box-shadow": "inset 0 0 0 2px #EC0000"
1162
+ "box-shadow": "inset 0 0 0 0.125rem #EC0000"
1014
1163
  }
1015
1164
  },
1016
1165
  "placeholder": {
@@ -1018,10 +1167,11 @@
1018
1167
  }
1019
1168
  },
1020
1169
  "text-input": {
1021
- "box-shadow": "inset 0 0 0 1px #000000",
1170
+ "background-color": "#FFFFFF",
1171
+ "box-shadow": "inset 0 0 0 0.0625rem #000000",
1022
1172
  "color": "#000000",
1023
1173
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
1024
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
1174
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1025
1175
  "font-weight": 400,
1026
1176
  "line-height": "1.6",
1027
1177
  "outline-offset": "2px",
@@ -1029,22 +1179,57 @@
1029
1179
  "padding-inline": "1rem",
1030
1180
  "disabled": {
1031
1181
  "background-color": "#FFFFFF",
1032
- "box-shadow": "inset 0 0 0 1px #BEBEBE",
1182
+ "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
1033
1183
  "color": "#BEBEBE"
1034
1184
  },
1035
1185
  "hover": {
1036
- "box-shadow": "inset 0 0 0 2px #000000"
1186
+ "box-shadow": "inset 0 0 0 0.125rem #000000"
1037
1187
  },
1038
1188
  "invalid": {
1039
- "box-shadow": "inset 0 0 0 1px #EC0000",
1189
+ "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
1040
1190
  "hover": {
1041
- "box-shadow": "inset 0 0 0 2px #EC0000"
1191
+ "box-shadow": "inset 0 0 0 0.125rem #EC0000"
1042
1192
  }
1043
1193
  },
1044
1194
  "placeholder": {
1045
1195
  "color": "#767676"
1046
1196
  }
1047
1197
  },
1198
+ "time-input": {
1199
+ "background-color": "#FFFFFF",
1200
+ "box-shadow": "inset 0 0 0 0.0625rem #000000",
1201
+ "color": "#000000",
1202
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
1203
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1204
+ "font-weight": 400,
1205
+ "line-height": "1.6",
1206
+ "outline-offset": "2px",
1207
+ "padding-block": ".5rem",
1208
+ "padding-inline": "1rem",
1209
+ "calender-picker-indicator": {
1210
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
1211
+ },
1212
+ "disabled": {
1213
+ "background-color": "#FFFFFF",
1214
+ "box-shadow": "inset 0 0 0 0.0625rem #BEBEBE",
1215
+ "color": "#BEBEBE",
1216
+ "calender-picker-indicator": {
1217
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
1218
+ }
1219
+ },
1220
+ "hover": {
1221
+ "box-shadow": "inset 0 0 0 0.125rem #000000",
1222
+ "calender-picker-indicator": {
1223
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
1224
+ }
1225
+ },
1226
+ "invalid": {
1227
+ "box-shadow": "inset 0 0 0 0.0625rem #EC0000",
1228
+ "hover": {
1229
+ "box-shadow": "inset 0 0 0 0.125rem #EC0000"
1230
+ }
1231
+ }
1232
+ },
1048
1233
  "top-task-link": {
1049
1234
  "description": {
1050
1235
  "color": "#000000",