@dialpad/dialtone-css 8.62.0 → 8.63.0-next.1

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 (96) hide show
  1. package/lib/build/less/components/avatar.less +15 -15
  2. package/lib/build/less/components/badge.less +2 -2
  3. package/lib/build/less/components/banner.less +8 -9
  4. package/lib/build/less/components/breadcrumbs.less +5 -4
  5. package/lib/build/less/components/button.less +20 -24
  6. package/lib/build/less/components/card.less +1 -1
  7. package/lib/build/less/components/chip.less +17 -18
  8. package/lib/build/less/components/collapsible.less +5 -5
  9. package/lib/build/less/components/combobox.less +3 -3
  10. package/lib/build/less/components/datepicker.less +9 -10
  11. package/lib/build/less/components/description-list.less +1 -1
  12. package/lib/build/less/components/dropdown.less +3 -4
  13. package/lib/build/less/components/emoji-picker.less +32 -33
  14. package/lib/build/less/components/emoji-text-wrapper.less +2 -2
  15. package/lib/build/less/components/emoji.less +1 -1
  16. package/lib/build/less/components/empty-state.less +3 -3
  17. package/lib/build/less/components/forms.less +7 -8
  18. package/lib/build/less/components/icon.less +2 -2
  19. package/lib/build/less/components/image-viewer.less +4 -4
  20. package/lib/build/less/components/input.less +19 -19
  21. package/lib/build/less/components/item-layout.less +8 -8
  22. package/lib/build/less/components/keyboard-shortcut.less +4 -5
  23. package/lib/build/less/components/list-item-group.less +1 -2
  24. package/lib/build/less/components/list-item.less +5 -5
  25. package/lib/build/less/components/modal.less +27 -29
  26. package/lib/build/less/components/notice.less +5 -5
  27. package/lib/build/less/components/pagination.less +2 -3
  28. package/lib/build/less/components/popover.less +7 -8
  29. package/lib/build/less/components/presence.less +2 -2
  30. package/lib/build/less/components/radio-checkbox.less +6 -6
  31. package/lib/build/less/components/rich-text-editor.less +16 -15
  32. package/lib/build/less/components/root-layout.less +9 -9
  33. package/lib/build/less/components/scrollbar.less +2 -2
  34. package/lib/build/less/components/scroller.less +8 -8
  35. package/lib/build/less/components/selects.less +6 -6
  36. package/lib/build/less/components/skeleton.less +7 -7
  37. package/lib/build/less/components/table.less +8 -8
  38. package/lib/build/less/components/toast.less +10 -10
  39. package/lib/build/less/components/toggle.less +21 -22
  40. package/lib/build/less/components/tooltip.less +29 -29
  41. package/lib/build/less/dialtone-reset.less +7 -5
  42. package/lib/build/less/recipes/attachment_carousel.less +17 -17
  43. package/lib/build/less/recipes/callbar_button.less +1 -2
  44. package/lib/build/less/recipes/callbar_button_with_dropdown.less +7 -7
  45. package/lib/build/less/recipes/callbar_button_with_popover.less +8 -9
  46. package/lib/build/less/recipes/callbox.less +8 -8
  47. package/lib/build/less/recipes/combobox_multi_select.less +14 -17
  48. package/lib/build/less/recipes/combobox_with_popover.less +1 -1
  49. package/lib/build/less/recipes/contact_info.less +7 -7
  50. package/lib/build/less/recipes/editor.less +8 -11
  51. package/lib/build/less/recipes/emoji_row.less +3 -3
  52. package/lib/build/less/recipes/feed_item_pill.less +10 -10
  53. package/lib/build/less/recipes/feed_item_row.less +11 -15
  54. package/lib/build/less/recipes/grouped_chip.less +6 -6
  55. package/lib/build/less/recipes/ivr_node.less +21 -21
  56. package/lib/build/less/recipes/leftbar_row.less +26 -30
  57. package/lib/build/less/recipes/message_input.less +13 -16
  58. package/lib/build/less/recipes/settings_menu_button.less +3 -3
  59. package/lib/build/less/recipes/top_banner_info.less +4 -5
  60. package/lib/build/less/utilities/backgrounds.less +12 -12
  61. package/lib/build/less/utilities/borders.less +81 -63
  62. package/lib/build/less/utilities/interactivity.less +6 -2
  63. package/lib/build/less/utilities/layout.less +34 -34
  64. package/lib/build/less/utilities/sizing.less +113 -113
  65. package/lib/build/less/utilities/spacing.less +60 -62
  66. package/lib/build/less/utilities/typography.less +3 -4
  67. package/lib/build/less/variables/sizes.less +8 -8
  68. package/lib/dist/dialtone-default-theme.css +4763 -8124
  69. package/lib/dist/dialtone-default-theme.min.css +1 -1
  70. package/lib/dist/dialtone-docs.json +1 -1
  71. package/lib/dist/dialtone.css +2648 -3922
  72. package/lib/dist/dialtone.min.css +1 -1
  73. package/lib/dist/tokens/tokens-aegean-dark.css +3018 -2
  74. package/lib/dist/tokens/tokens-aegean-light.css +3011 -2
  75. package/lib/dist/tokens/tokens-botany-dark.css +3011 -2
  76. package/lib/dist/tokens/tokens-botany-light.css +3018 -2
  77. package/lib/dist/tokens/tokens-buttercream-dark.css +3011 -2
  78. package/lib/dist/tokens/tokens-ceruleo-dark.css +2997 -2
  79. package/lib/dist/tokens/tokens-ceruleo-light.css +3476 -0
  80. package/lib/dist/tokens/tokens-dp-dark.css +104 -265
  81. package/lib/dist/tokens/tokens-expressive-dark.css +104 -265
  82. package/lib/dist/tokens/tokens-expressive-sm-dark.css +104 -265
  83. package/lib/dist/tokens/tokens-high-desert-dark.css +3018 -2
  84. package/lib/dist/tokens/tokens-high-desert-light.css +3011 -2
  85. package/lib/dist/tokens/tokens-melon-dark.css +3018 -2
  86. package/lib/dist/tokens/tokens-melon-light.css +3011 -2
  87. package/lib/dist/tokens/tokens-plum-dark.css +3025 -2
  88. package/lib/dist/tokens/tokens-plum-light.css +3018 -2
  89. package/lib/dist/tokens/tokens-sunflower-dark.css +3018 -2
  90. package/lib/dist/tokens/tokens-sunflower-light.css +3011 -2
  91. package/lib/dist/tokens/tokens-tmo-dark.css +104 -265
  92. package/lib/dist/tokens/tokens-verdant-haze-dark.css +3011 -2
  93. package/lib/dist/tokens/tokens-verdant-haze-light.css +3004 -2
  94. package/lib/dist/tokens-docs.json +1 -1
  95. package/package.json +2 -2
  96. package/lib/dist/tokens/tokens-ceruleo-default.css +0 -488
package/lib/build/less/utilities/spacing.less CHANGED
@@ -23,48 +23,48 @@
23
23
  // ============================================================================
24
24
  // $$ VERTICALLY
25
25
  // ----------------------------------------------------------------------------
26
- .d-stack0 { > * + * { margin-top: 0 !important; } }
27
- .d-stack1 { > * + * { margin-top: var(--dt-space-100) !important; } }
28
- .d-stack2 { > * + * { margin-top: var(--dt-space-200) !important; } }
29
- .d-stack4 { > * + * { margin-top: var(--dt-space-300) !important; } }
30
- .d-stack6 { > * + * { margin-top: var(--dt-space-350) !important; } }
31
- .d-stack8 { > * + * { margin-top: var(--dt-space-400) !important; } }
32
- .d-stack12 { > * + * { margin-top: var(--dt-space-450) !important; } }
33
- .d-stack16 { > * + * { margin-top: var(--dt-space-500) !important; } }
34
- .d-stack20 { > * + * { margin-top: var(--dt-space-525) !important; } }
35
- .d-stack24 { > * + * { margin-top: var(--dt-space-550) !important; } }
36
- .d-stack32 { > * + * { margin-top: var(--dt-space-600) !important; } }
37
- .d-stack48 { > * + * { margin-top: var(--dt-space-650) !important; } }
38
- .d-stack64 { > * + * { margin-top: var(--dt-space-700) !important; } }
39
- .d-stack72 { > * + * { margin-top: var(--dt-space-720) !important; } }
40
- .d-stack84 { > * + * { margin-top: var(--dt-space-730) !important; } }
41
- .d-stack96 { > * + * { margin-top: var(--dt-space-750) !important; } }
42
- .d-stack102 { > * + * { margin-top: var(--dt-space-760) !important; } }
43
- .d-stack114 { > * + * { margin-top: var(--dt-space-775) !important; } }
44
- .d-stack128 { > * + * { margin-top: var(--dt-space-800) !important; } }
26
+ .d-stack0 { > * + * { margin-block-start: 0 !important; } }
27
+ .d-stack1 { > * + * { margin-block-start: var(--dt-space-100) !important; } }
28
+ .d-stack2 { > * + * { margin-block-start: var(--dt-space-200) !important; } }
29
+ .d-stack4 { > * + * { margin-block-start: var(--dt-space-300) !important; } }
30
+ .d-stack6 { > * + * { margin-block-start: var(--dt-space-350) !important; } }
31
+ .d-stack8 { > * + * { margin-block-start: var(--dt-space-400) !important; } }
32
+ .d-stack12 { > * + * { margin-block-start: var(--dt-space-450) !important; } }
33
+ .d-stack16 { > * + * { margin-block-start: var(--dt-space-500) !important; } }
34
+ .d-stack20 { > * + * { margin-block-start: var(--dt-space-525) !important; } }
35
+ .d-stack24 { > * + * { margin-block-start: var(--dt-space-550) !important; } }
36
+ .d-stack32 { > * + * { margin-block-start: var(--dt-space-600) !important; } }
37
+ .d-stack48 { > * + * { margin-block-start: var(--dt-space-650) !important; } }
38
+ .d-stack64 { > * + * { margin-block-start: var(--dt-space-700) !important; } }
39
+ .d-stack72 { > * + * { margin-block-start: var(--dt-space-720) !important; } }
40
+ .d-stack84 { > * + * { margin-block-start: var(--dt-space-730) !important; } }
41
+ .d-stack96 { > * + * { margin-block-start: var(--dt-space-750) !important; } }
42
+ .d-stack102 { > * + * { margin-block-start: var(--dt-space-760) !important; } }
43
+ .d-stack114 { > * + * { margin-block-start: var(--dt-space-775) !important; } }
44
+ .d-stack128 { > * + * { margin-block-start: var(--dt-space-800) !important; } }
45
45
 
46
46
  // ============================================================================
47
47
  // $$ HORIZONTALLY
48
48
  // ----------------------------------------------------------------------------
49
- .d-flow0 { > * + * { margin-left: 0 !important; } }
50
- .d-flow1 { > * + * { margin-left: var(--dt-space-100) !important; } }
51
- .d-flow2 { > * + * { margin-left: var(--dt-space-200) !important; } }
52
- .d-flow4 { > * + * { margin-left: var(--dt-space-300) !important; } }
53
- .d-flow6 { > * + * { margin-left: var(--dt-space-350) !important; } }
54
- .d-flow8 { > * + * { margin-left: var(--dt-space-400) !important; } }
55
- .d-flow12 { > * + * { margin-left: var(--dt-space-450) !important; } }
56
- .d-flow16 { > * + * { margin-left: var(--dt-space-500) !important; } }
57
- .d-flow20 { > * + * { margin-left: var(--dt-space-525) !important; } }
58
- .d-flow24 { > * + * { margin-left: var(--dt-space-550) !important; } }
59
- .d-flow32 { > * + * { margin-left: var(--dt-space-600) !important; } }
60
- .d-flow48 { > * + * { margin-left: var(--dt-space-650) !important; } }
61
- .d-flow64 { > * + * { margin-left: var(--dt-space-700) !important; } }
62
- .d-flow72 { > * + * { margin-left: var(--dt-space-720) !important; } }
63
- .d-flow84 { > * + * { margin-left: var(--dt-space-730) !important; } }
64
- .d-flow96 { > * + * { margin-left: var(--dt-space-750) !important; } }
65
- .d-flow102 { > * + * { margin-left: var(--dt-space-760) !important; } }
66
- .d-flow114 { > * + * { margin-left: var(--dt-space-775) !important; } }
67
- .d-flow128 { > * + * { margin-left: var(--dt-space-800) !important; } }
49
+ .d-flow0 { > * + * { margin-inline-start: 0 !important; } }
50
+ .d-flow1 { > * + * { margin-inline-start: var(--dt-space-100) !important; } }
51
+ .d-flow2 { > * + * { margin-inline-start: var(--dt-space-200) !important; } }
52
+ .d-flow4 { > * + * { margin-inline-start: var(--dt-space-300) !important; } }
53
+ .d-flow6 { > * + * { margin-inline-start: var(--dt-space-350) !important; } }
54
+ .d-flow8 { > * + * { margin-inline-start: var(--dt-space-400) !important; } }
55
+ .d-flow12 { > * + * { margin-inline-start: var(--dt-space-450) !important; } }
56
+ .d-flow16 { > * + * { margin-inline-start: var(--dt-space-500) !important; } }
57
+ .d-flow20 { > * + * { margin-inline-start: var(--dt-space-525) !important; } }
58
+ .d-flow24 { > * + * { margin-inline-start: var(--dt-space-550) !important; } }
59
+ .d-flow32 { > * + * { margin-inline-start: var(--dt-space-600) !important; } }
60
+ .d-flow48 { > * + * { margin-inline-start: var(--dt-space-650) !important; } }
61
+ .d-flow64 { > * + * { margin-inline-start: var(--dt-space-700) !important; } }
62
+ .d-flow72 { > * + * { margin-inline-start: var(--dt-space-720) !important; } }
63
+ .d-flow84 { > * + * { margin-inline-start: var(--dt-space-730) !important; } }
64
+ .d-flow96 { > * + * { margin-inline-start: var(--dt-space-750) !important; } }
65
+ .d-flow102 { > * + * { margin-inline-start: var(--dt-space-760) !important; } }
66
+ .d-flow114 { > * + * { margin-inline-start: var(--dt-space-775) !important; } }
67
+ .d-flow128 { > * + * { margin-inline-start: var(--dt-space-800) !important; } }
68
68
 
69
69
  // ============================================================================
70
70
  // $ MARGIN
@@ -72,36 +72,34 @@
72
72
  .d-m-auto { margin: auto !important; }
73
73
  .d-m-unset { margin: unset !important; }
74
74
 
75
- .d-mt-auto { margin-top: auto !important; }
76
- .d-mt-unset { margin-top: unset !important; }
75
+ .d-mt-auto { margin-block-start: auto !important; }
76
+ .d-mt-unset { margin-block-start: unset !important; }
77
77
 
78
- .d-mr-auto { margin-right: auto !important; }
79
- .d-mr-unset { margin-right: unset !important; }
78
+ .d-mr-auto { margin-inline-end: auto !important; }
79
+ .d-mr-unset { margin-inline-end: unset !important; }
80
80
 
81
- .d-mb-auto { margin-bottom: auto !important; }
82
- .d-mb-unset { margin-bottom: unset !important; }
81
+ .d-mb-auto { margin-block-end: auto !important; }
82
+ .d-mb-unset { margin-block-end: unset !important; }
83
83
 
84
- .d-ml-auto { margin-left: auto !important; }
85
- .d-ml-unset { margin-left: unset !important; }
84
+ .d-ml-auto { margin-inline-start: auto !important; }
85
+ .d-ml-unset { margin-inline-start: unset !important; }
86
86
 
87
87
  .d-mx-auto {
88
- margin-right: auto !important;
89
- margin-left: auto !important;
88
+ margin-inline: auto auto !important;
90
89
  }
91
90
 
92
91
  .d-mx-unset {
93
- margin-right: unset !important;
94
- margin-left: unset !important;
92
+ margin-inline-end: unset !important;
93
+ margin-inline-start: unset !important;
95
94
  }
96
95
 
97
96
  .d-my-auto {
98
- margin-top: auto !important;
99
- margin-bottom: auto !important;
97
+ margin-block: auto auto !important;
100
98
  }
101
99
 
102
100
  .d-my-unset {
103
- margin-top: unset !important;
104
- margin-bottom: unset !important;
101
+ margin-block-start: unset !important;
102
+ margin-block-end: unset !important;
105
103
  }
106
104
 
107
105
 
@@ -110,22 +108,22 @@
110
108
  // ----------------------------------------------------------------------------
111
109
  .d-p-unset { padding: unset !important; }
112
110
 
113
- .d-pt-unset { padding-top: unset !important; }
111
+ .d-pt-unset { padding-block-start: unset !important; }
114
112
 
115
- .d-pr-unset { padding-right: unset !important; }
113
+ .d-pr-unset { padding-inline-end: unset !important; }
116
114
 
117
- .d-pb-unset { padding-bottom: unset !important; }
115
+ .d-pb-unset { padding-block-end: unset !important; }
118
116
 
119
- .d-pl-unset { padding-left: unset !important; }
117
+ .d-pl-unset { padding-inline-start: unset !important; }
120
118
 
121
119
  .d-px-unset {
122
- padding-right: unset !important;
123
- padding-left: unset !important;
120
+ padding-inline-end: unset !important;
121
+ padding-inline-start: unset !important;
124
122
  }
125
123
 
126
124
  .d-py-unset {
127
- padding-top: unset !important;
128
- padding-bottom: unset !important;
125
+ padding-block-start: unset !important;
126
+ padding-block-end: unset !important;
129
127
  }
130
128
 
131
129
  // ============================================================================
package/lib/build/less/utilities/typography.less CHANGED
@@ -45,8 +45,7 @@ h6,
45
45
  p,
46
46
  ol,
47
47
  ul {
48
- margin-top: 0;
49
- margin-bottom: 0;
48
+ margin-block: 0 0;
50
49
  }
51
50
 
52
51
  // ============================================================================
@@ -338,8 +337,8 @@ ul {
338
337
  // ============================================================================
339
338
  // $$ TEXT ALIGN
340
339
  // ----------------------------------------------------------------------------
341
- .d-ta-left { text-align: left !important; }
342
- .d-ta-right { text-align: right !important; }
340
+ .d-ta-left { text-align: start !important; }
341
+ .d-ta-right { text-align: end !important; }
343
342
  .d-ta-center { text-align: center !important; }
344
343
  .d-ta-justify { text-align: justify !important; }
345
344
  .d-ta-unset { text-align: unset !important; }
package/lib/build/less/variables/sizes.less CHANGED
@@ -17,8 +17,8 @@
17
17
  --input-typography: var(--dt-typography-inputs-xs);
18
18
 
19
19
  .d-btn__icon {
20
- width: var(--dt-icon-size-100);
21
- height: var(--dt-icon-size-100);
20
+ inline-size: var(--dt-icon-size-100);
21
+ block-size: var(--dt-icon-size-100);
22
22
  }
23
23
  }
24
24
 
@@ -31,8 +31,8 @@
31
31
  --input-border-radius: var(--dt-inputs-size-radius-sm);
32
32
 
33
33
  .d-btn__icon {
34
- width: var(--dt-icon-size-200);
35
- height: var(--dt-icon-size-200);
34
+ inline-size: var(--dt-icon-size-200);
35
+ block-size: var(--dt-icon-size-200);
36
36
  }
37
37
  }
38
38
 
@@ -45,8 +45,8 @@
45
45
  --input-typography: var(--dt-typography-inputs-lg);
46
46
 
47
47
  .d-btn__icon {
48
- width: var(--dt-icon-size-400);
49
- height: var(--dt-icon-size-400);
48
+ inline-size: var(--dt-icon-size-400);
49
+ block-size: var(--dt-icon-size-400);
50
50
  }
51
51
  }
52
52
 
@@ -59,7 +59,7 @@
59
59
  --input-typography: var(--dt-typography-inputs-xl);
60
60
 
61
61
  .d-btn__icon {
62
- width: var(--dt-icon-size-500);
63
- height: var(--dt-icon-size-500);
62
+ inline-size: var(--dt-icon-size-500);
63
+ block-size: var(--dt-icon-size-500);
64
64
  }
65
65
  }