@dialpad/dialtone 9.44.0 → 9.46.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 (48) hide show
  1. package/dist/css/dialtone.css +28 -24
  2. package/dist/css/dialtone.min.css +1 -1
  3. package/dist/tokens/css/variables-dark.css +5 -1
  4. package/dist/tokens/css/variables-expressive-dark.css +5 -1
  5. package/dist/tokens/css/variables-expressive-light.css +5 -1
  6. package/dist/tokens/css/variables-expressive-sm-dark.css +5 -1
  7. package/dist/tokens/css/variables-expressive-sm-light.css +5 -1
  8. package/dist/tokens/css/variables-light.css +5 -1
  9. package/dist/tokens/css/variables-tmo-dark.css +5 -1
  10. package/dist/tokens/css/variables-tmo-light.css +5 -1
  11. package/dist/tokens/doc.json +416 -0
  12. package/dist/tokens/less/variables-dark.less +5 -1
  13. package/dist/tokens/less/variables-expressive-dark.less +5 -1
  14. package/dist/tokens/less/variables-expressive-light.less +5 -1
  15. package/dist/tokens/less/variables-expressive-sm-dark.less +5 -1
  16. package/dist/tokens/less/variables-expressive-sm-light.less +5 -1
  17. package/dist/tokens/less/variables-light.less +5 -1
  18. package/dist/tokens/less/variables-tmo-dark.less +5 -1
  19. package/dist/tokens/less/variables-tmo-light.less +5 -1
  20. package/dist/tokens/tokens-dark.json +4 -0
  21. package/dist/tokens/tokens-light.json +4 -0
  22. package/dist/vue2/component-documentation.json +1 -1
  23. package/dist/vue2/lib/callbar-button-with-popover.cjs +16 -1
  24. package/dist/vue2/lib/callbar-button-with-popover.cjs.map +1 -1
  25. package/dist/vue2/lib/callbar-button-with-popover.js +16 -1
  26. package/dist/vue2/lib/callbar-button-with-popover.js.map +1 -1
  27. package/dist/vue2/lib/tooltip.cjs +8 -1
  28. package/dist/vue2/lib/tooltip.cjs.map +1 -1
  29. package/dist/vue2/lib/tooltip.js +8 -1
  30. package/dist/vue2/lib/tooltip.js.map +1 -1
  31. package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts +16 -1
  32. package/dist/vue2/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
  33. package/dist/vue2/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +31 -0
  34. package/dist/vue2/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts.map +1 -1
  35. package/dist/vue3/component-documentation.json +1 -1
  36. package/dist/vue3/lib/callbar-button-with-popover.cjs +17 -2
  37. package/dist/vue3/lib/callbar-button-with-popover.cjs.map +1 -1
  38. package/dist/vue3/lib/callbar-button-with-popover.js +17 -2
  39. package/dist/vue3/lib/callbar-button-with-popover.js.map +1 -1
  40. package/dist/vue3/lib/tooltip.cjs +8 -1
  41. package/dist/vue3/lib/tooltip.cjs.map +1 -1
  42. package/dist/vue3/lib/tooltip.js +8 -1
  43. package/dist/vue3/lib/tooltip.js.map +1 -1
  44. package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts +15 -0
  45. package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
  46. package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +31 -0
  47. package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts.map +1 -1
  48. package/package.json +1 -1
@@ -736,7 +736,7 @@ template {
736
736
  .d-badge {
737
737
  --badge-color-text: var(--dt-badge-color-foreground-default);
738
738
  --badge-color-background: var(--dt-badge-color-background-default);
739
- --badge-color-outline: var(--dt-color-border-subtle);
739
+ --badge-color-outline: var(--dt-badge-color-border-default);
740
740
  --badge-radius: var(--dt-size-300);
741
741
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
742
742
  --badge-font-size: var(--dt-font-size-100);
@@ -787,13 +787,9 @@ template {
787
787
  --badge-color-background: var(--dt-badge-color-background-bulletin);
788
788
  }
789
789
  .d-badge--bulletin.d-badge--subtle {
790
- --badge-color-text: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 40%));
791
- --badge-color-background: hsla(var(--primary-color-hsl) / 0.1);
792
- --badge-color-outline: hsla(var(--primary-color-hsl) / 0.5);
793
- }
794
- .dialtone-theme-dark .d-badge--bulletin.d-badge--subtle {
795
- --badge-color-text: var(--dt-color-foreground-primary);
796
- --badge-color-background: hsla(var(--primary-color-hsl) / 0.6);
790
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
791
+ --badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
792
+ --badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
797
793
  }
798
794
  .d-badge--ai {
799
795
  --badge-color-text: var(--dt-badge-color-foreground-bulletin);
@@ -1362,6 +1358,7 @@ template {
1362
1358
  align-items: center;
1363
1359
  justify-content: center;
1364
1360
  box-sizing: border-box;
1361
+ max-width: var(--dt-size-100-percent);
1365
1362
  padding: var(--dt-space-300) var(--dt-space-400);
1366
1363
  color: var(--chip-color-text);
1367
1364
  font-size: var(--dt-font-size-200);
@@ -1370,10 +1367,9 @@ template {
1370
1367
  background-color: var(--chip-color-background);
1371
1368
  border: none;
1372
1369
  border-radius: var(--chip-border-radius);
1373
- transition-timing-function: var(--ttf-in-out);
1370
+ transition-timing-function: var(--ttf-out-quint);
1374
1371
  transition-duration: var(--td200);
1375
1372
  transition-property: background-color;
1376
- max-width: var(--dt-size-100-percent);
1377
1373
  }
1378
1374
  .d-chip__label:not(:only-child)::after {
1379
1375
  flex-shrink: 0;
@@ -1392,14 +1388,14 @@ template {
1392
1388
  .d-chip__label:is(button):hover,
1393
1389
  .d-chip__label:is([role='button']):hover,
1394
1390
  .d-chip__label:is([role='link']):hover {
1395
- --chip-color-background: var(--dt-color-black-300);
1391
+ --chip-color-background: var(--dt-color-surface-bold-opaque);
1396
1392
  text-decoration: none;
1397
1393
  }
1398
1394
  .d-chip__label:is(a):active,
1399
1395
  .d-chip__label:is(button):active,
1400
1396
  .d-chip__label:is([role='button']):active,
1401
1397
  .d-chip__label:is([role='link']):active {
1402
- --chip-color-background: var(--dt-color-black-400);
1398
+ --chip-color-background: var(--dt-color-surface-moderate-opaque);
1403
1399
  }
1404
1400
  .d-chip__label:is(a):focus-visible,
1405
1401
  .d-chip__label:is(button):focus-visible,
@@ -7587,7 +7583,7 @@ body {
7587
7583
  }
7588
7584
  /**
7589
7585
  * Do not edit directly
7590
- * Generated on Fri, 07 Jun 2024 22:29:04 GMT
7586
+ * Generated on Tue, 11 Jun 2024 22:43:35 GMT
7591
7587
  */
7592
7588
 
7593
7589
  .dialtone-theme-light {
@@ -8369,9 +8365,13 @@ body {
8369
8365
  --dt-badge-color-background-warning: #FFF4CC;
8370
8366
  --dt-badge-color-background-critical: #FFE5E6;
8371
8367
  --dt-badge-color-background-bulletin: #7C52FF;
8368
+ --dt-badge-color-background-bulletin-subtle: hsl(255 100% 66.1% / 0.1);
8372
8369
  --dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
8373
8370
  --dt-badge-color-foreground-default: #000000;
8374
8371
  --dt-badge-color-foreground-bulletin: #ffffff;
8372
+ --dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
8373
+ --dt-badge-color-border-default: hsl(0 0% 0% / 0.1);
8374
+ --dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
8375
8375
  --dt-checkbox-size-width: 1.6rem;
8376
8376
  --dt-checkbox-size-height: 1.6rem;
8377
8377
  --dt-checkbox-size-radius: 0.4rem;
@@ -8404,7 +8404,7 @@ body {
8404
8404
 
8405
8405
  /**
8406
8406
  * Do not edit directly
8407
- * Generated on Fri, 07 Jun 2024 22:29:05 GMT
8407
+ * Generated on Tue, 11 Jun 2024 22:43:35 GMT
8408
8408
  */
8409
8409
 
8410
8410
  .dialtone-theme-dark {
@@ -9306,9 +9306,13 @@ body {
9306
9306
  --dt-badge-color-background-warning: #815008;
9307
9307
  --dt-badge-color-background-critical: #5B0505;
9308
9308
  --dt-badge-color-background-bulletin: #7C52FF;
9309
+ --dt-badge-color-background-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
9309
9310
  --dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
9310
9311
  --dt-badge-color-foreground-default: #E6E6E6;
9311
9312
  --dt-badge-color-foreground-bulletin: #ffffff;
9313
+ --dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
9314
+ --dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
9315
+ --dt-badge-color-border-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
9312
9316
  --dt-checkbox-size-width: 1.6rem;
9313
9317
  --dt-checkbox-size-height: 1.6rem;
9314
9318
  --dt-checkbox-size-radius: 0.4rem;
@@ -10836,43 +10840,43 @@ body {
10836
10840
  --fco: 0% !important;
10837
10841
  }
10838
10842
 
10839
- .d-bco-100, .h\:d-bco-100:hover, .f\:d-bco-100:focus, .f\:d-bco-100:focus-within, .fv\:d-bco-100:focus-visible {
10843
+ .d-bco100, .h\:d-bco100:hover, .f\:d-bco100:focus, .f\:d-bco100:focus-within, .fv\:d-bco100:focus-visible {
10840
10844
  --bco: 100% !important;
10841
10845
  }
10842
10846
 
10843
- .d-bco-99, .h\:d-bco-99:hover, .f\:d-bco-99:focus, .f\:d-bco-99:focus-within, .fv\:d-bco-99:focus-visible {
10847
+ .d-bco99, .h\:d-bco99:hover, .f\:d-bco99:focus, .f\:d-bco99:focus-within, .fv\:d-bco99:focus-visible {
10844
10848
  --bco: 99% !important;
10845
10849
  }
10846
10850
 
10847
- .d-bco-95, .h\:d-bco-95:hover, .f\:d-bco-95:focus, .f\:d-bco-95:focus-within, .fv\:d-bco-95:focus-visible {
10851
+ .d-bco95, .h\:d-bco95:hover, .f\:d-bco95:focus, .f\:d-bco95:focus-within, .fv\:d-bco95:focus-visible {
10848
10852
  --bco: 95% !important;
10849
10853
  }
10850
10854
 
10851
- .d-bco-90, .h\:d-bco-90:hover, .f\:d-bco-90:focus, .f\:d-bco-90:focus-within, .fv\:d-bco-90:focus-visible {
10855
+ .d-bco90, .h\:d-bco90:hover, .f\:d-bco90:focus, .f\:d-bco90:focus-within, .fv\:d-bco90:focus-visible {
10852
10856
  --bco: 90% !important;
10853
10857
  }
10854
10858
 
10855
- .d-bco-85, .h\:d-bco-85:hover, .f\:d-bco-85:focus, .f\:d-bco-85:focus-within, .fv\:d-bco-85:focus-visible {
10859
+ .d-bco85, .h\:d-bco85:hover, .f\:d-bco85:focus, .f\:d-bco85:focus-within, .fv\:d-bco85:focus-visible {
10856
10860
  --bco: 85% !important;
10857
10861
  }
10858
10862
 
10859
- .d-bco-75, .h\:d-bco-75:hover, .f\:d-bco-75:focus, .f\:d-bco-75:focus-within, .fv\:d-bco-75:focus-visible {
10863
+ .d-bco75, .h\:d-bco75:hover, .f\:d-bco75:focus, .f\:d-bco75:focus-within, .fv\:d-bco75:focus-visible {
10860
10864
  --bco: 75% !important;
10861
10865
  }
10862
10866
 
10863
- .d-bco-50, .h\:d-bco-50:hover, .f\:d-bco-50:focus, .f\:d-bco-50:focus-within, .fv\:d-bco-50:focus-visible {
10867
+ .d-bco50, .h\:d-bco50:hover, .f\:d-bco50:focus, .f\:d-bco50:focus-within, .fv\:d-bco50:focus-visible {
10864
10868
  --bco: 50% !important;
10865
10869
  }
10866
10870
 
10867
- .d-bco-25, .h\:d-bco-25:hover, .f\:d-bco-25:focus, .f\:d-bco-25:focus-within, .fv\:d-bco-25:focus-visible {
10871
+ .d-bco25, .h\:d-bco25:hover, .f\:d-bco25:focus, .f\:d-bco25:focus-within, .fv\:d-bco25:focus-visible {
10868
10872
  --bco: 25% !important;
10869
10873
  }
10870
10874
 
10871
- .d-bco-10, .h\:d-bco-10:hover, .f\:d-bco-10:focus, .f\:d-bco-10:focus-within, .fv\:d-bco-10:focus-visible {
10875
+ .d-bco10, .h\:d-bco10:hover, .f\:d-bco10:focus, .f\:d-bco10:focus-within, .fv\:d-bco10:focus-visible {
10872
10876
  --bco: 10% !important;
10873
10877
  }
10874
10878
 
10875
- .d-bco-0, .h\:d-bco-0:hover, .f\:d-bco-0:focus, .f\:d-bco-0:focus-within, .fv\:d-bco-0:focus-visible {
10879
+ .d-bco0, .h\:d-bco0:hover, .f\:d-bco0:focus, .f\:d-bco0:focus-within, .fv\:d-bco0:focus-visible {
10876
10880
  --bco: 0% !important;
10877
10881
  }
10878
10882