@dialpad/dialtone-css 8.78.0-next.1 → 8.78.0-next.3

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 (108) hide show
  1. package/README.md +0 -2
  2. package/lib/build/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue +26 -0
  3. package/lib/build/js/dialtone_migrate_flex_to_stack/index.mjs +56 -15
  4. package/lib/build/js/dialtone_migrate_tshirt_to_numeric/index.mjs +233 -0
  5. package/lib/build/js/dialtone_migrate_tshirt_to_numeric/test.mjs +336 -0
  6. package/lib/build/js/dialtone_migration_helper/configs/physical-to-logical.mjs +86 -0
  7. package/lib/build/js/dialtone_migration_helper/configs/size-to-layout.mjs +212 -0
  8. package/lib/build/js/dialtone_migration_helper/configs/space-to-spacing.mjs +48 -0
  9. package/lib/build/js/dialtone_migration_helper/configs/stack-gap-to-spacing.mjs +88 -0
  10. package/lib/build/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs +135 -0
  11. package/lib/build/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue +275 -0
  12. package/lib/build/js/dialtone_migration_helper/tests/space-to-spacing-test-examples.vue +193 -0
  13. package/lib/build/less/components/avatar.less +8 -19
  14. package/lib/build/less/components/badge.less +22 -20
  15. package/lib/build/less/components/banner.less +5 -5
  16. package/lib/build/less/components/breadcrumbs.less +4 -4
  17. package/lib/build/less/components/button.less +39 -39
  18. package/lib/build/less/components/card.less +4 -4
  19. package/lib/build/less/components/chip.less +41 -51
  20. package/lib/build/less/components/codeblock.less +2 -2
  21. package/lib/build/less/components/collapsible.less +2 -2
  22. package/lib/build/less/components/combobox-multi-select.less +8 -8
  23. package/lib/build/less/components/combobox-with-popover.less +1 -1
  24. package/lib/build/less/components/combobox.less +5 -5
  25. package/lib/build/less/components/datepicker.less +6 -6
  26. package/lib/build/less/components/description-list.less +14 -3
  27. package/lib/build/less/components/dropdown.less +4 -4
  28. package/lib/build/less/components/emoji-picker.less +35 -35
  29. package/lib/build/less/components/empty-state.less +5 -5
  30. package/lib/build/less/components/filter-pill.less +5 -5
  31. package/lib/build/less/components/forms.less +10 -10
  32. package/lib/build/less/components/image-viewer.less +2 -2
  33. package/lib/build/less/components/input.less +17 -22
  34. package/lib/build/less/components/item-layout.less +8 -8
  35. package/lib/build/less/components/keyboard-shortcut.less +3 -3
  36. package/lib/build/less/components/link.less +5 -5
  37. package/lib/build/less/components/list-group.less +1 -1
  38. package/lib/build/less/components/list-item-group.less +1 -1
  39. package/lib/build/less/components/list-item.less +9 -9
  40. package/lib/build/less/components/modal.less +20 -20
  41. package/lib/build/less/components/notice.less +11 -11
  42. package/lib/build/less/components/pagination.less +5 -5
  43. package/lib/build/less/components/popover.less +5 -5
  44. package/lib/build/less/components/radio-checkbox.less +11 -10
  45. package/lib/build/less/components/rich-text-editor.less +13 -13
  46. package/lib/build/less/components/scrollbar.less +2 -2
  47. package/lib/build/less/components/segmented-control.less +6 -6
  48. package/lib/build/less/components/selects.less +18 -13
  49. package/lib/build/less/components/skeleton.less +4 -4
  50. package/lib/build/less/components/stack.less +24 -69
  51. package/lib/build/less/components/table.less +6 -7
  52. package/lib/build/less/components/tabs.less +24 -24
  53. package/lib/build/less/components/toast.less +16 -16
  54. package/lib/build/less/components/toggle.less +23 -23
  55. package/lib/build/less/components/tooltip.less +27 -27
  56. package/lib/build/less/dialtone-reset.less +3 -3
  57. package/lib/build/less/dialtone-transitions.less +4 -4
  58. package/lib/build/less/dialtone.less +2 -2
  59. package/lib/build/less/recipes/attachment_carousel.less +13 -13
  60. package/lib/build/less/recipes/callbar_button.less +1 -1
  61. package/lib/build/less/recipes/callbar_button_with_dropdown.less +7 -7
  62. package/lib/build/less/recipes/callbar_button_with_popover.less +8 -8
  63. package/lib/build/less/recipes/callbox.less +6 -6
  64. package/lib/build/less/recipes/contact_info.less +9 -9
  65. package/lib/build/less/recipes/editor.less +12 -12
  66. package/lib/build/less/recipes/emoji_row.less +8 -8
  67. package/lib/build/less/recipes/feed_item_pill.less +13 -13
  68. package/lib/build/less/recipes/feed_item_row.less +10 -10
  69. package/lib/build/less/recipes/grouped_chip.less +2 -2
  70. package/lib/build/less/recipes/ivr_node.less +13 -13
  71. package/lib/build/less/recipes/leftbar_row.less +23 -23
  72. package/lib/build/less/recipes/message_input.less +16 -16
  73. package/lib/build/less/recipes/settings_menu_button.less +10 -10
  74. package/lib/build/less/recipes/time_pill.less +1 -1
  75. package/lib/build/less/recipes/top_banner_info.less +8 -8
  76. package/lib/build/less/recipes/unread_pill.less +2 -2
  77. package/lib/build/less/themes/default.less +1 -1
  78. package/lib/build/less/utilities/backgrounds.less +3 -3
  79. package/lib/build/less/utilities/effects.less +20 -20
  80. package/lib/build/less/utilities/flex.less +11 -11
  81. package/lib/build/less/utilities/layout.less +4 -4
  82. package/lib/build/less/utilities/sizing.less +172 -0
  83. package/lib/build/less/utilities/spacing.less +49 -49
  84. package/lib/build/less/utilities/typography.less +2 -2
  85. package/lib/build/less/variables/sizes.less +8 -8
  86. package/lib/dist/dialtone-default-theme.css +5220 -1117
  87. package/lib/dist/dialtone-default-theme.min.css +1 -1
  88. package/lib/dist/dialtone-docs.json +1 -1
  89. package/lib/dist/dialtone.css +5203 -1117
  90. package/lib/dist/dialtone.min.css +1 -1
  91. package/lib/dist/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue +26 -0
  92. package/lib/dist/js/dialtone_migrate_flex_to_stack/index.mjs +56 -15
  93. package/lib/dist/js/dialtone_migrate_tshirt_to_numeric/index.mjs +233 -0
  94. package/lib/dist/js/dialtone_migrate_tshirt_to_numeric/test.mjs +336 -0
  95. package/lib/dist/js/dialtone_migration_helper/configs/physical-to-logical.mjs +86 -0
  96. package/lib/dist/js/dialtone_migration_helper/configs/size-to-layout.mjs +212 -0
  97. package/lib/dist/js/dialtone_migration_helper/configs/space-to-spacing.mjs +48 -0
  98. package/lib/dist/js/dialtone_migration_helper/configs/stack-gap-to-spacing.mjs +88 -0
  99. package/lib/dist/js/dialtone_migration_helper/configs/utility-class-to-token-stops.mjs +135 -0
  100. package/lib/dist/js/dialtone_migration_helper/tests/size-to-layout-test-examples.vue +275 -0
  101. package/lib/dist/js/dialtone_migration_helper/tests/space-to-spacing-test-examples.vue +193 -0
  102. package/lib/dist/tokens/tokens-base-dark.css +17 -0
  103. package/lib/dist/tokens/tokens-base-light.css +17 -0
  104. package/lib/dist/tokens/tokens-debug-base.css +17 -0
  105. package/lib/dist/tokens-docs.json +1 -1
  106. package/package.json +3 -3
  107. package/lib/build/js/dialtone_migration_helper/configs/space-to-size.mjs +0 -15
  108. package/lib/dist/js/dialtone_migration_helper/configs/space-to-size.mjs +0 -15
package/lib/build/less/utilities/typography.less CHANGED
@@ -368,13 +368,13 @@ ul {
368
368
 
369
369
  .d-td-underline {
370
370
  text-decoration: underline !important;
371
- text-underline-offset: var(--dt-size-200) !important;
371
+ text-underline-offset: var(--dt-spacing-25) !important;
372
372
  text-decoration-thickness: var(--dt-size-border-100) !important;
373
373
  }
374
374
 
375
375
  .d-td-dotted {
376
376
  text-decoration: underline dotted !important;
377
- text-underline-offset: var(--dt-size-200) !important;
377
+ text-underline-offset: var(--dt-spacing-25) !important;
378
378
  text-decoration-thickness: var(--dt-size-border-100) !important;
379
379
  }
380
380
 
package/lib/build/less/variables/sizes.less CHANGED
@@ -11,8 +11,8 @@
11
11
  // ----------------------------------------------------------------------------
12
12
 
13
13
  #d-internal__input-and-select-xs() {
14
- --input-padding-y: calc(calc(var(--dt-size-350) - var(--dt-size-100)) - var(--input-border-width));
15
- --input-padding-x: calc(var(--dt-size-400) - var(--input-border-width));
14
+ --input-padding-y: calc(calc(var(--dt-spacing-75) - var(--dt-spacing-1)) - var(--input-border-width));
15
+ --input-padding-x: calc(var(--dt-spacing-100) - var(--input-border-width));
16
16
  --input-border-radius: var(--dt-inputs-size-radius-xs);
17
17
  --input-typography: var(--dt-typography-inputs-xs);
18
18
 
@@ -25,8 +25,8 @@
25
25
  // $$ SMALL
26
26
  // ----------------------------------------------------------------------------
27
27
  #d-internal__input-and-select-sm() {
28
- --input-padding-y: calc(var(--dt-size-350) - var(--input-border-width));
29
- --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
28
+ --input-padding-y: calc(var(--dt-spacing-75) - var(--input-border-width));
29
+ --input-padding-x: calc((var(--dt-layout-25) - var(--dt-spacing-50)) - var(--input-border-width));
30
30
  --input-typography: var(--dt-typography-inputs-sm);
31
31
  --input-border-radius: var(--dt-inputs-size-radius-sm);
32
32
 
@@ -39,8 +39,8 @@
39
39
  // $$ LARGE
40
40
  // ----------------------------------------------------------------------------
41
41
  #d-internal__input-and-select-lg() {
42
- --input-padding-y: calc((var(--dt-size-400) + var(--dt-size-200)) - var(--input-border-width));
43
- --input-padding-x: calc(var(--dt-size-500) - var(--input-border-width));
42
+ --input-padding-y: calc((var(--dt-spacing-100) + var(--dt-spacing-25)) - var(--input-border-width));
43
+ --input-padding-x: calc(var(--dt-layout-25) - var(--input-border-width));
44
44
  --input-border-radius: var(--dt-inputs-size-radius-lg);
45
45
  --input-typography: var(--dt-typography-inputs-lg);
46
46
 
@@ -53,8 +53,8 @@
53
53
  // $$ EXTRA LARGE
54
54
  // ----------------------------------------------------------------------------
55
55
  #d-internal__input-and-select-xl() {
56
- --input-padding-y: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
57
- --input-padding-x: calc(var(--dt-size-500) - var(--input-border-width));
56
+ --input-padding-y: calc((var(--dt-layout-25) - var(--dt-spacing-50)) - var(--input-border-width));
57
+ --input-padding-x: calc(var(--dt-layout-25) - var(--input-border-width));
58
58
  --input-border-radius: var(--dt-inputs-size-radius-xl);
59
59
  --input-typography: var(--dt-typography-inputs-xl);
60
60