@utrecht/design-tokens 3.2.0 → 3.3.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 (53) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +9 -0
  3. package/dist/_mixin.scss +9 -0
  4. package/dist/_variables.scss +9 -0
  5. package/dist/dark/_mixin-theme.scss +9 -0
  6. package/dist/dark/_mixin.scss +9 -0
  7. package/dist/dark/_variables.scss +9 -0
  8. package/dist/dark/index.cjs +9 -0
  9. package/dist/dark/index.css +9 -0
  10. package/dist/dark/index.d.ts +9 -0
  11. package/dist/dark/index.flat.json +9 -0
  12. package/dist/dark/index.json +315 -0
  13. package/dist/dark/index.mjs +9 -0
  14. package/dist/dark/index.tokens.json +86 -0
  15. package/dist/dark/list.json +315 -0
  16. package/dist/dark/list.mjs +315 -0
  17. package/dist/dark/property.css +8 -0
  18. package/dist/dark/root.css +9 -0
  19. package/dist/dark/theme-prince-xml.css +9 -0
  20. package/dist/dark/theme.css +9 -0
  21. package/dist/dark/tokens.cjs +392 -0
  22. package/dist/dark/tokens.d.ts +50 -0
  23. package/dist/dark/tokens.json +392 -0
  24. package/dist/dark/variables.cjs +9 -0
  25. package/dist/dark/variables.css +9 -0
  26. package/dist/dark/variables.d.ts +9 -0
  27. package/dist/dark/variables.json +9 -0
  28. package/dist/dark/variables.less +9 -0
  29. package/dist/dark/variables.mjs +9 -0
  30. package/dist/index.cjs +9 -0
  31. package/dist/index.css +18 -0
  32. package/dist/index.d.ts +9 -0
  33. package/dist/index.flat.json +9 -0
  34. package/dist/index.json +315 -0
  35. package/dist/index.mjs +9 -0
  36. package/dist/index.tokens.json +86 -0
  37. package/dist/list.json +315 -0
  38. package/dist/list.mjs +315 -0
  39. package/dist/property.css +8 -0
  40. package/dist/root.css +9 -0
  41. package/dist/theme-prince-xml.css +9 -0
  42. package/dist/theme.css +9 -0
  43. package/dist/tokens.cjs +392 -0
  44. package/dist/tokens.d.ts +50 -0
  45. package/dist/tokens.json +392 -0
  46. package/dist/variables.cjs +9 -0
  47. package/dist/variables.css +9 -0
  48. package/dist/variables.d.ts +9 -0
  49. package/dist/variables.json +9 -0
  50. package/dist/variables.less +9 -0
  51. package/dist/variables.mjs +9 -0
  52. package/package.json +1 -1
  53. package/src/component/utrecht/tooltip.tokens.json +15 -0
@@ -35188,6 +35188,398 @@
35188
35188
  }
35189
35189
  }
35190
35190
  },
35191
+ "tooltip": {
35192
+ "background-color": {
35193
+ "$extensions": {
35194
+ "nl.nldesignsystem.css.property": {
35195
+ "syntax": "<color>",
35196
+ "inherits": true
35197
+ },
35198
+ "nl.nldesignsystem.figma.supports-token": false
35199
+ },
35200
+ "type": "color",
35201
+ "value": "hsl(0 0% 100%)",
35202
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35203
+ "isSource": true,
35204
+ "original": {
35205
+ "$extensions": {
35206
+ "nl.nldesignsystem.css.property": {
35207
+ "syntax": "<color>",
35208
+ "inherits": true
35209
+ },
35210
+ "nl.nldesignsystem.figma.supports-token": false
35211
+ },
35212
+ "type": "color",
35213
+ "value": "{utrecht.color.white}"
35214
+ },
35215
+ "name": "utrechtTooltipBackgroundColor",
35216
+ "attributes": {},
35217
+ "path": [
35218
+ "utrecht",
35219
+ "tooltip",
35220
+ "background-color"
35221
+ ]
35222
+ },
35223
+ "border-color": {
35224
+ "$extensions": {
35225
+ "nl.nldesignsystem.css.property": {
35226
+ "syntax": "<color>",
35227
+ "inherits": true
35228
+ },
35229
+ "nl.nldesignsystem.figma.supports-token": false
35230
+ },
35231
+ "type": "color",
35232
+ "value": "hsl(0 0% 40%)",
35233
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35234
+ "isSource": true,
35235
+ "original": {
35236
+ "$extensions": {
35237
+ "nl.nldesignsystem.css.property": {
35238
+ "syntax": "<color>",
35239
+ "inherits": true
35240
+ },
35241
+ "nl.nldesignsystem.figma.supports-token": false
35242
+ },
35243
+ "type": "color",
35244
+ "value": "{utrecht.color.grey.40}"
35245
+ },
35246
+ "name": "utrechtTooltipBorderColor",
35247
+ "attributes": {},
35248
+ "path": [
35249
+ "utrecht",
35250
+ "tooltip",
35251
+ "border-color"
35252
+ ]
35253
+ },
35254
+ "border-radius": {
35255
+ "$extensions": {
35256
+ "nl.nldesignsystem.css.property": {
35257
+ "syntax": "<length-percentage>",
35258
+ "inherits": true
35259
+ },
35260
+ "nl.nldesignsystem.figma.supports-token": false,
35261
+ "studio.tokens": {
35262
+ "originalType": "borderRadius"
35263
+ }
35264
+ },
35265
+ "type": "dimension",
35266
+ "value": "0",
35267
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35268
+ "isSource": true,
35269
+ "original": {
35270
+ "$extensions": {
35271
+ "nl.nldesignsystem.css.property": {
35272
+ "syntax": "<length-percentage>",
35273
+ "inherits": true
35274
+ },
35275
+ "nl.nldesignsystem.figma.supports-token": false,
35276
+ "studio.tokens": {
35277
+ "originalType": "borderRadius"
35278
+ }
35279
+ },
35280
+ "type": "dimension",
35281
+ "value": "0"
35282
+ },
35283
+ "name": "utrechtTooltipBorderRadius",
35284
+ "attributes": {},
35285
+ "path": [
35286
+ "utrecht",
35287
+ "tooltip",
35288
+ "border-radius"
35289
+ ]
35290
+ },
35291
+ "border-width": {
35292
+ "$extensions": {
35293
+ "nl.nldesignsystem.css.property": {
35294
+ "syntax": "<length>",
35295
+ "inherits": true
35296
+ },
35297
+ "nl.nldesignsystem.figma.supports-token": false,
35298
+ "studio.tokens": {
35299
+ "originalType": "borderWidth"
35300
+ }
35301
+ },
35302
+ "type": "dimension",
35303
+ "value": "1px",
35304
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35305
+ "isSource": true,
35306
+ "original": {
35307
+ "$extensions": {
35308
+ "nl.nldesignsystem.css.property": {
35309
+ "syntax": "<length>",
35310
+ "inherits": true
35311
+ },
35312
+ "nl.nldesignsystem.figma.supports-token": false,
35313
+ "studio.tokens": {
35314
+ "originalType": "borderWidth"
35315
+ }
35316
+ },
35317
+ "type": "dimension",
35318
+ "value": "1px"
35319
+ },
35320
+ "name": "utrechtTooltipBorderWidth",
35321
+ "attributes": {},
35322
+ "path": [
35323
+ "utrecht",
35324
+ "tooltip",
35325
+ "border-width"
35326
+ ]
35327
+ },
35328
+ "color": {
35329
+ "$extensions": {
35330
+ "nl.nldesignsystem.css.property": {
35331
+ "syntax": "<color>",
35332
+ "inherits": true
35333
+ },
35334
+ "nl.nldesignsystem.figma.supports-token": false
35335
+ },
35336
+ "type": "color",
35337
+ "value": "hsl(0 0% 40%)",
35338
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35339
+ "isSource": true,
35340
+ "original": {
35341
+ "$extensions": {
35342
+ "nl.nldesignsystem.css.property": {
35343
+ "syntax": "<color>",
35344
+ "inherits": true
35345
+ },
35346
+ "nl.nldesignsystem.figma.supports-token": false
35347
+ },
35348
+ "type": "color",
35349
+ "value": "{utrecht.color.grey.40}"
35350
+ },
35351
+ "name": "utrechtTooltipColor",
35352
+ "attributes": {},
35353
+ "path": [
35354
+ "utrecht",
35355
+ "tooltip",
35356
+ "color"
35357
+ ]
35358
+ },
35359
+ "font-family": {
35360
+ "$extensions": {
35361
+ "nl.nldesignsystem.css.property": {
35362
+ "syntax": "*",
35363
+ "inherits": true
35364
+ },
35365
+ "nl.nldesignsystem.figma.supports-token": false,
35366
+ "studio.tokens": {
35367
+ "originalType": "fontFamilies"
35368
+ }
35369
+ },
35370
+ "type": "fontFamily",
35371
+ "value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
35372
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35373
+ "isSource": true,
35374
+ "original": {
35375
+ "$extensions": {
35376
+ "nl.nldesignsystem.css.property": {
35377
+ "syntax": "*",
35378
+ "inherits": true
35379
+ },
35380
+ "nl.nldesignsystem.figma.supports-token": false,
35381
+ "studio.tokens": {
35382
+ "originalType": "fontFamilies"
35383
+ }
35384
+ },
35385
+ "type": "fontFamily",
35386
+ "value": "{utrecht.typography.sans-serif.font-family}"
35387
+ },
35388
+ "name": "utrechtTooltipFontFamily",
35389
+ "attributes": {},
35390
+ "path": [
35391
+ "utrecht",
35392
+ "tooltip",
35393
+ "font-family"
35394
+ ]
35395
+ },
35396
+ "font-size": {
35397
+ "$extensions": {
35398
+ "nl.nldesignsystem.css.property": {
35399
+ "syntax": "<length>",
35400
+ "inherits": true
35401
+ },
35402
+ "nl.nldesignsystem.figma.supports-token": false,
35403
+ "studio.tokens": {
35404
+ "originalType": "fontSizes"
35405
+ }
35406
+ },
35407
+ "type": "fontSize",
35408
+ "value": "1rem",
35409
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35410
+ "isSource": true,
35411
+ "original": {
35412
+ "$extensions": {
35413
+ "nl.nldesignsystem.css.property": {
35414
+ "syntax": "<length>",
35415
+ "inherits": true
35416
+ },
35417
+ "nl.nldesignsystem.figma.supports-token": false,
35418
+ "studio.tokens": {
35419
+ "originalType": "fontSizes"
35420
+ }
35421
+ },
35422
+ "type": "fontSize",
35423
+ "value": "{utrecht.typography.scale.md.font-size}"
35424
+ },
35425
+ "name": "utrechtTooltipFontSize",
35426
+ "attributes": {},
35427
+ "path": [
35428
+ "utrecht",
35429
+ "tooltip",
35430
+ "font-size"
35431
+ ]
35432
+ },
35433
+ "font-weight": {
35434
+ "$extensions": {
35435
+ "nl.nldesignsystem.css.property": {
35436
+ "syntax": "<number>",
35437
+ "inherits": false
35438
+ },
35439
+ "nl.nldesignsystem.figma.supports-token": false
35440
+ },
35441
+ "type": "fontWeights"
35442
+ },
35443
+ "line-height": {
35444
+ "$extensions": {
35445
+ "nl.nldesignsystem.css.property": {
35446
+ "syntax": [
35447
+ "<length>",
35448
+ "<number>"
35449
+ ],
35450
+ "inherits": true
35451
+ },
35452
+ "nl.nldesignsystem.figma.supports-token": false
35453
+ },
35454
+ "type": "lineHeights"
35455
+ },
35456
+ "max-inline-size": {
35457
+ "$extensions": {
35458
+ "nl.nldesignsystem.css.property": {
35459
+ "syntax": "<length>",
35460
+ "inherits": true
35461
+ },
35462
+ "nl.nldesignsystem.figma.supports-token": false
35463
+ },
35464
+ "type": "sizing"
35465
+ },
35466
+ "padding-block": {
35467
+ "$extensions": {
35468
+ "nl.nldesignsystem.css.property": {
35469
+ "syntax": "<length>",
35470
+ "inherits": true
35471
+ },
35472
+ "nl.nldesignsystem.figma.supports-token": false,
35473
+ "studio.tokens": {
35474
+ "originalType": "spacing"
35475
+ }
35476
+ },
35477
+ "type": "dimension",
35478
+ "value": "8px",
35479
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35480
+ "isSource": true,
35481
+ "original": {
35482
+ "$extensions": {
35483
+ "nl.nldesignsystem.css.property": {
35484
+ "syntax": "<length>",
35485
+ "inherits": true
35486
+ },
35487
+ "nl.nldesignsystem.figma.supports-token": false,
35488
+ "studio.tokens": {
35489
+ "originalType": "spacing"
35490
+ }
35491
+ },
35492
+ "type": "dimension",
35493
+ "value": "{utrecht.space.block.xs}"
35494
+ },
35495
+ "name": "utrechtTooltipPaddingBlock",
35496
+ "attributes": {},
35497
+ "path": [
35498
+ "utrecht",
35499
+ "tooltip",
35500
+ "padding-block"
35501
+ ]
35502
+ },
35503
+ "padding-inline": {
35504
+ "$extensions": {
35505
+ "nl.nldesignsystem.css.property": {
35506
+ "syntax": "<length>",
35507
+ "inherits": true
35508
+ },
35509
+ "nl.nldesignsystem.figma.supports-token": false,
35510
+ "studio.tokens": {
35511
+ "originalType": "spacing"
35512
+ }
35513
+ },
35514
+ "type": "dimension",
35515
+ "value": "16px",
35516
+ "filePath": "src/component/utrecht/tooltip.tokens.json",
35517
+ "isSource": true,
35518
+ "original": {
35519
+ "$extensions": {
35520
+ "nl.nldesignsystem.css.property": {
35521
+ "syntax": "<length>",
35522
+ "inherits": true
35523
+ },
35524
+ "nl.nldesignsystem.figma.supports-token": false,
35525
+ "studio.tokens": {
35526
+ "originalType": "spacing"
35527
+ }
35528
+ },
35529
+ "type": "dimension",
35530
+ "value": "{utrecht.space.inline.md}"
35531
+ },
35532
+ "name": "utrechtTooltipPaddingInline",
35533
+ "attributes": {},
35534
+ "path": [
35535
+ "utrecht",
35536
+ "tooltip",
35537
+ "padding-inline"
35538
+ ]
35539
+ },
35540
+ "transition-duration": {
35541
+ "$extensions": {
35542
+ "nl.nldesignsystem.css.property": {
35543
+ "syntax": "<time>",
35544
+ "inherits": true
35545
+ },
35546
+ "nl.nldesignsystem.figma.supports-token": false
35547
+ },
35548
+ "type": "other"
35549
+ },
35550
+ "transition-timing-function": {
35551
+ "$extensions": {
35552
+ "nl.nldesignsystem.css.property": {
35553
+ "syntax": "<time>",
35554
+ "inherits": true
35555
+ },
35556
+ "nl.nldesignsystem.figma.supports-token": false
35557
+ },
35558
+ "type": "other"
35559
+ },
35560
+ "z-index": {
35561
+ "$extensions": {
35562
+ "nl.nldesignsystem.css.property": {
35563
+ "syntax": "<number>",
35564
+ "inherits": true
35565
+ },
35566
+ "nl.nldesignsystem.figma.supports-token": false
35567
+ },
35568
+ "type": "other"
35569
+ },
35570
+ "arrow": {
35571
+ "size": {
35572
+ "$extensions": {
35573
+ "nl.nldesignsystem.css.property": {
35574
+ "syntax": "<length-percentage>",
35575
+ "inherits": true
35576
+ },
35577
+ "nl.nldesignsystem.figma.supports-token": false
35578
+ },
35579
+ "type": "sizing"
35580
+ }
35581
+ }
35582
+ },
35191
35583
  "toptask-link": {
35192
35584
  "background-color": {
35193
35585
  "$extensions": {
@@ -906,6 +906,15 @@ module.exports = {
906
906
  "utrechtTextareaBorderBottomWidth": "3px",
907
907
  "utrechtTextareaLineHeight": "1.5",
908
908
  "utrechtTextboxBorderBottomWidth": "3px",
909
+ "utrechtTooltipBackgroundColor": "hsl(0 0% 100%)",
910
+ "utrechtTooltipBorderColor": "hsl(0 0% 40%)",
911
+ "utrechtTooltipBorderRadius": "0",
912
+ "utrechtTooltipBorderWidth": "1px",
913
+ "utrechtTooltipColor": "hsl(0 0% 40%)",
914
+ "utrechtTooltipFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
915
+ "utrechtTooltipFontSize": "1rem",
916
+ "utrechtTooltipPaddingBlock": "8px",
917
+ "utrechtTooltipPaddingInline": "16px",
909
918
  "utrechtToptaskLinkBackgroundColor": "hsl(211 60% 80%)",
910
919
  "utrechtToptaskLinkColor": "hsl(0 0% 15%)",
911
920
  "utrechtToptaskLinkFontSize": "1rem",
@@ -30,6 +30,8 @@
30
30
  --utrecht-toptask-link-hover-transform-scale: 1.02;
31
31
  --utrecht-topnav-link-focus-text-decoration: none;
32
32
  --utrecht-topnav-link-focus-border-type: dotted;
33
+ --utrecht-tooltip-border-width: 1px;
34
+ --utrecht-tooltip-border-radius: 0;
33
35
  --utrecht-textbox-border-bottom-width: 3px;
34
36
  --utrecht-textarea-border-bottom-width: 3px;
35
37
  --utrecht-textarea-border-block-end-width: 3px;
@@ -426,6 +428,13 @@
426
428
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
427
429
  --utrecht-topnav-link-color: var(--utrecht-color-white);
428
430
  --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
431
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
432
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
433
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
434
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
435
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
436
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
437
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
429
438
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
430
439
  --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
431
440
  --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
@@ -972,6 +972,15 @@ export const utrechtTextareaBorderBlockEndWidth : string;
972
972
  export const utrechtTextareaBorderBottomWidth : string;
973
973
  export const utrechtTextareaLineHeight : string;
974
974
  export const utrechtTextboxBorderBottomWidth : string;
975
+ export const utrechtTooltipBackgroundColor : string;
976
+ export const utrechtTooltipBorderColor : string;
977
+ export const utrechtTooltipBorderRadius : string;
978
+ export const utrechtTooltipBorderWidth : string;
979
+ export const utrechtTooltipColor : string;
980
+ export const utrechtTooltipFontFamily : string;
981
+ export const utrechtTooltipFontSize : string;
982
+ export const utrechtTooltipPaddingBlock : string;
983
+ export const utrechtTooltipPaddingInline : string;
975
984
  export const utrechtToptaskLinkBackgroundColor : string;
976
985
  export const utrechtToptaskLinkColor : string;
977
986
  export const utrechtToptaskLinkFontSize : string;
@@ -1071,6 +1071,15 @@
1071
1071
  "utrechtTextareaBorderBottomWidth": "3px",
1072
1072
  "utrechtTextareaLineHeight": "1.5",
1073
1073
  "utrechtTextboxBorderBottomWidth": "3px",
1074
+ "utrechtTooltipBackgroundColor": "hsl(0 0% 100%)",
1075
+ "utrechtTooltipBorderColor": "hsl(0 0% 40%)",
1076
+ "utrechtTooltipBorderRadius": "0",
1077
+ "utrechtTooltipBorderWidth": "1px",
1078
+ "utrechtTooltipColor": "hsl(0 0% 40%)",
1079
+ "utrechtTooltipFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1080
+ "utrechtTooltipFontSize": "1rem",
1081
+ "utrechtTooltipPaddingBlock": "8px",
1082
+ "utrechtTooltipPaddingInline": "16px",
1074
1083
  "utrechtTopnavLinkBackgroundColor": "hsl(211 60% 40%)",
1075
1084
  "utrechtTopnavLinkColor": "hsl(0 0% 100%)",
1076
1085
  "utrechtTopnavLinkFocusBackgroundColor": "hsl(48 100% 80%)",
@@ -101,6 +101,8 @@
101
101
  @utrecht-toptask-link-min-inline-size: 15rem;
102
102
  @utrecht-toptask-link-min-block-size: 8.25rem;
103
103
  @utrecht-toptask-link-line-height: 1.2;
104
+ @utrecht-tooltip-border-width: 1px;
105
+ @utrecht-tooltip-border-radius: 0;
104
106
  @utrecht-textbox-border-bottom-width: 3px;
105
107
  @utrecht-textarea-border-bottom-width: 3px;
106
108
  @utrecht-textarea-border-block-end-width: 3px;
@@ -504,6 +506,13 @@
504
506
  @utrecht-toptask-link-padding-block-start: @utrecht-space-block-xl;
505
507
  @utrecht-toptask-link-padding-block-end: @utrecht-space-block-xl;
506
508
  @utrecht-toptask-link-font-size: @utrecht-typography-scale-md-font-size;
509
+ @utrecht-tooltip-padding-inline: @utrecht-space-inline-md;
510
+ @utrecht-tooltip-padding-block: @utrecht-space-block-xs;
511
+ @utrecht-tooltip-font-size: @utrecht-typography-scale-md-font-size;
512
+ @utrecht-tooltip-font-family: @utrecht-typography-sans-serif-font-family;
513
+ @utrecht-tooltip-color: @utrecht-color-grey-40;
514
+ @utrecht-tooltip-border-color: @utrecht-color-grey-40;
515
+ @utrecht-tooltip-background-color: @utrecht-color-white;
507
516
  @utrecht-textarea-line-height: @utrecht-typography-line-height-md;
508
517
  @utrecht-table-row-alternate-even-color: @utrecht-color-black;
509
518
  @utrecht-table-row-alternate-even-background-color: @utrecht-color-grey-95;
@@ -905,6 +905,15 @@ export const utrechtTextareaBorderBlockEndWidth = "3px";
905
905
  export const utrechtTextareaBorderBottomWidth = "3px";
906
906
  export const utrechtTextareaLineHeight = "1.5";
907
907
  export const utrechtTextboxBorderBottomWidth = "3px";
908
+ export const utrechtTooltipBackgroundColor = "hsl(0 0% 100%)";
909
+ export const utrechtTooltipBorderColor = "hsl(0 0% 40%)";
910
+ export const utrechtTooltipBorderRadius = "0";
911
+ export const utrechtTooltipBorderWidth = "1px";
912
+ export const utrechtTooltipColor = "hsl(0 0% 40%)";
913
+ export const utrechtTooltipFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
914
+ export const utrechtTooltipFontSize = "1rem";
915
+ export const utrechtTooltipPaddingBlock = "8px";
916
+ export const utrechtTooltipPaddingInline = "16px";
908
917
  export const utrechtToptaskLinkBackgroundColor = "hsl(211 60% 80%)";
909
918
  export const utrechtToptaskLinkColor = "hsl(0 0% 15%)";
910
919
  export const utrechtToptaskLinkFontSize = "1rem";
package/dist/index.cjs CHANGED
@@ -895,6 +895,15 @@ module.exports = {
895
895
  "utrechtTextareaBorderBottomWidth": "3px",
896
896
  "utrechtTextareaLineHeight": "1.5",
897
897
  "utrechtTextboxBorderBottomWidth": "3px",
898
+ "utrechtTooltipBackgroundColor": "hsl(0 0% 100%)",
899
+ "utrechtTooltipBorderColor": "hsl(0 0% 40%)",
900
+ "utrechtTooltipBorderRadius": "0",
901
+ "utrechtTooltipBorderWidth": "1px",
902
+ "utrechtTooltipColor": "hsl(0 0% 40%)",
903
+ "utrechtTooltipFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
904
+ "utrechtTooltipFontSize": "1rem",
905
+ "utrechtTooltipPaddingBlock": "8px",
906
+ "utrechtTooltipPaddingInline": "16px",
898
907
  "utrechtToptaskLinkBackgroundColor": "hsl(211 60% 35%)",
899
908
  "utrechtToptaskLinkColor": "hsl(0 0% 100%)",
900
909
  "utrechtToptaskLinkFontSize": "1rem",
package/dist/index.css CHANGED
@@ -130,6 +130,8 @@
130
130
  --utrecht-toptask-link-min-inline-size: 15rem;
131
131
  --utrecht-toptask-link-min-block-size: 8.25rem;
132
132
  --utrecht-toptask-link-line-height: 1.2;
133
+ --utrecht-tooltip-border-width: 1px;
134
+ --utrecht-tooltip-border-radius: 0;
133
135
  --utrecht-textbox-border-bottom-width: 3px;
134
136
  --utrecht-textarea-border-bottom-width: 3px;
135
137
  --utrecht-textarea-border-block-end-width: 3px;
@@ -531,6 +533,13 @@
531
533
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
532
534
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
533
535
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
536
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
537
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
538
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
539
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
540
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
541
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
542
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
534
543
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
535
544
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
536
545
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
@@ -1252,6 +1261,8 @@
1252
1261
  --utrecht-toptask-link-min-inline-size: 15rem;
1253
1262
  --utrecht-toptask-link-min-block-size: 8.25rem;
1254
1263
  --utrecht-toptask-link-line-height: 1.2;
1264
+ --utrecht-tooltip-border-width: 1px;
1265
+ --utrecht-tooltip-border-radius: 0;
1255
1266
  --utrecht-textbox-border-bottom-width: 3px;
1256
1267
  --utrecht-textarea-border-bottom-width: 3px;
1257
1268
  --utrecht-textarea-border-block-end-width: 3px;
@@ -1655,6 +1666,13 @@
1655
1666
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
1656
1667
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
1657
1668
  --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
1669
+ --utrecht-tooltip-padding-inline: var(--utrecht-space-inline-md);
1670
+ --utrecht-tooltip-padding-block: var(--utrecht-space-block-xs);
1671
+ --utrecht-tooltip-font-size: var(--utrecht-typography-scale-md-font-size);
1672
+ --utrecht-tooltip-font-family: var(--utrecht-typography-sans-serif-font-family);
1673
+ --utrecht-tooltip-color: var(--utrecht-color-grey-40);
1674
+ --utrecht-tooltip-border-color: var(--utrecht-color-grey-40);
1675
+ --utrecht-tooltip-background-color: var(--utrecht-color-white);
1658
1676
  --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
1659
1677
  --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
1660
1678
  --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
package/dist/index.d.ts CHANGED
@@ -961,6 +961,15 @@ export const utrechtTextareaBorderBlockEndWidth : string;
961
961
  export const utrechtTextareaBorderBottomWidth : string;
962
962
  export const utrechtTextareaLineHeight : string;
963
963
  export const utrechtTextboxBorderBottomWidth : string;
964
+ export const utrechtTooltipBackgroundColor : string;
965
+ export const utrechtTooltipBorderColor : string;
966
+ export const utrechtTooltipBorderRadius : string;
967
+ export const utrechtTooltipBorderWidth : string;
968
+ export const utrechtTooltipColor : string;
969
+ export const utrechtTooltipFontFamily : string;
970
+ export const utrechtTooltipFontSize : string;
971
+ export const utrechtTooltipPaddingBlock : string;
972
+ export const utrechtTooltipPaddingInline : string;
964
973
  export const utrechtToptaskLinkBackgroundColor : string;
965
974
  export const utrechtToptaskLinkColor : string;
966
975
  export const utrechtToptaskLinkFontSize : string;
@@ -1060,6 +1060,15 @@
1060
1060
  "utrechtTextareaBorderBottomWidth": "3px",
1061
1061
  "utrechtTextareaLineHeight": "1.5",
1062
1062
  "utrechtTextboxBorderBottomWidth": "3px",
1063
+ "utrechtTooltipBackgroundColor": "hsl(0 0% 100%)",
1064
+ "utrechtTooltipBorderColor": "hsl(0 0% 40%)",
1065
+ "utrechtTooltipBorderRadius": "0",
1066
+ "utrechtTooltipBorderWidth": "1px",
1067
+ "utrechtTooltipColor": "hsl(0 0% 40%)",
1068
+ "utrechtTooltipFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1069
+ "utrechtTooltipFontSize": "1rem",
1070
+ "utrechtTooltipPaddingBlock": "8px",
1071
+ "utrechtTooltipPaddingInline": "16px",
1063
1072
  "utrechtTopnavLinkBackgroundColor": "hsl(211 60% 40%)",
1064
1073
  "utrechtTopnavLinkColor": "hsl(0 0% 100%)",
1065
1074
  "utrechtTopnavLinkFocusBackgroundColor": "hsl(48 100% 80%)",