@dialpad/dialtone-css 8.57.2 → 8.58.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 (11) hide show
  1. package/lib/build/less/components/emoji-picker.less +5 -0
  2. package/lib/build/less/utilities/backgrounds.less +4 -12
  3. package/lib/build/less/utilities/borders.less +0 -8
  4. package/lib/build/less/utilities/colors.less +12 -0
  5. package/lib/build/less/utilities/typography.less +13 -13
  6. package/lib/dist/dialtone-default-theme.css +32 -28
  7. package/lib/dist/dialtone-default-theme.min.css +1 -1
  8. package/lib/dist/dialtone-docs.json +1 -1
  9. package/lib/dist/dialtone.css +32 -28
  10. package/lib/dist/dialtone.min.css +1 -1
  11. package/package.json +1 -1
package/lib/build/less/components/emoji-picker.less CHANGED
@@ -53,6 +53,11 @@
53
53
  border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
54
54
  }
55
55
 
56
+ &__add-emoji {
57
+ flex-shrink: 0;
58
+ font-size: var(--dt-font-size-100);
59
+ }
60
+
56
61
  &__tabset-list {
57
62
  gap: var(--dt-space-0);
58
63
  justify-content: space-between;
package/lib/build/less/utilities/backgrounds.less CHANGED
@@ -26,11 +26,11 @@
26
26
  // ============================================================================
27
27
  // $ BACKGROUND CLIP
28
28
  // ----------------------------------------------------------------------------
29
- .d-bgc-border-box { background-clip: border-box !important; }
30
- .d-bgc-padding-box { background-clip: padding-box !important; }
31
- .d-bgc-content-box { background-clip: content-box !important; }
29
+ .d-bgclip-border-box { background-clip: border-box !important; }
30
+ .d-bgclip-padding-box { background-clip: padding-box !important; }
31
+ .d-bgclip-content-box { background-clip: content-box !important; }
32
32
 
33
- .d-bgc-text {
33
+ .d-bgclip-text {
34
34
  color: transparent !important;
35
35
  -webkit-background-clip: text !important;
36
36
  background-clip: text !important;
@@ -137,11 +137,3 @@
137
137
  .d-bgg-pattern-slanted-stripes-light { --bgg-pattern: var(--bgg-pattern-slanted-stripes-light) !important; }
138
138
  .d-bgg-pattern-steps-light { --bgg-pattern: var(--bgg-pattern-steps-light) !important; }
139
139
  .d-bgg-pattern-stripe-light { --bgg-pattern: var(--bgg-pattern-stripe-light) !important; }
140
-
141
- // ============================================================================
142
- // $ Background linear gradient
143
- // ----------------------------------------------------------------------------
144
-
145
- .d-bgc-ai {
146
- background-image: var(--dt-color-surface-ai) !important;
147
- }
package/lib/build/less/utilities/borders.less CHANGED
@@ -229,14 +229,6 @@
229
229
  // $$ Border linear gradient
230
230
  // ----------------------------------------------------------------------------
231
231
 
232
- /*
233
- * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
234
- * https://dev.to/afif/border-with-gradient-and-radius-387f
235
- */
236
- .d-bc-ai {
237
- border-image: var(--dt-color-border-ai) 1 !important;
238
- }
239
-
240
232
  .d-divide-ai > * + * {
241
233
  border-image: var(--dt-color-border-ai) 1 !important;
242
234
  }
package/lib/build/less/utilities/colors.less CHANGED
@@ -32,8 +32,20 @@
32
32
  background-image: unset !important;
33
33
  }
34
34
 
35
+ .d-bgc-ai {
36
+ background-image: var(--dt-color-surface-ai) !important;
37
+ }
38
+
35
39
  // $$ BORDER COLORS
36
40
  // ----------------------------------------------------------------------------
37
41
  .d-bc-transparent { border-color: transparent !important; }
38
42
  .d-bc-current { border-color: currentColor !important; }
39
43
  .d-bc-unset { border-color: unset !important; }
44
+
45
+ /*
46
+ * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
47
+ * https://dev.to/afif/border-with-gradient-and-radius-387f
48
+ */
49
+ .d-bc-ai {
50
+ border-image: var(--dt-color-border-ai) 1 !important;
51
+ }
package/lib/build/less/utilities/typography.less CHANGED
@@ -27,11 +27,11 @@
27
27
  // ============================================================================
28
28
  // $ FONT FAMILY
29
29
  // ----------------------------------------------------------------------------
30
- .d-ff-custom { font-family: var(--dt-font-family-body) !important; }
31
- .d-ff-sans { font-family: var(--dt-font-family-body) !important; }
32
- .d-ff-mono { font-family: var(--dt-font-family-mono) !important; }
33
- .d-ff-marketing { font-family: var(--dt-font-family-expressive) !important; }
34
- .d-ff-unset { font-family: unset !important; }
30
+ .d-font-family-custom { font-family: var(--dt-font-family-body) !important; }
31
+ .d-font-family-sans { font-family: var(--dt-font-family-body) !important; }
32
+ .d-font-family-mono { font-family: var(--dt-font-family-mono) !important; }
33
+ .d-font-family-marketing { font-family: var(--dt-font-family-expressive) !important; }
34
+ .d-font-family-unset { font-family: unset !important; }
35
35
 
36
36
  // ============================================================================
37
37
  // $ RESET HEADERS & PARAGRAPH MARGINS
@@ -276,19 +276,19 @@ ul {
276
276
  // ============================================================================
277
277
  // $$ FONT STYLE
278
278
  // ----------------------------------------------------------------------------
279
- .d-fs-normal { font-style: normal !important; }
280
- .d-fs-italic { font-style: italic !important; }
281
- .d-fs-unset { font-style: unset !important; }
279
+ .d-font-style-normal { font-style: normal !important; }
280
+ .d-font-style-italic { font-style: italic !important; }
281
+ .d-font-style-unset { font-style: unset !important; }
282
282
 
283
283
 
284
284
  // ============================================================================
285
285
  // $$ FONT WEIGHT
286
286
  // ----------------------------------------------------------------------------
287
- .d-fw-normal { font-weight: var(--dt-font-weight-normal) !important; }
288
- .d-fw-medium { font-weight: var(--dt-font-weight-medium) !important; }
289
- .d-fw-semibold { font-weight: var(--dt-font-weight-semi-bold) !important; }
290
- .d-fw-bold { font-weight: var(--dt-font-weight-bold) !important; }
291
- .d-fw-unset { font-weight: unset !important; }
287
+ .d-font-weight-normal { font-weight: var(--dt-font-weight-normal) !important; }
288
+ .d-font-weight-medium { font-weight: var(--dt-font-weight-medium) !important; }
289
+ .d-font-weight-semibold { font-weight: var(--dt-font-weight-semi-bold) !important; }
290
+ .d-font-weight-bold { font-weight: var(--dt-font-weight-bold) !important; }
291
+ .d-font-weight-unset { font-weight: unset !important; }
292
292
 
293
293
 
294
294
  // ============================================================================
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -5280,6 +5280,10 @@ legend .d-label--md {
5280
5280
  background: var(--dt-color-surface-secondary);
5281
5281
  border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
5282
5282
  }
5283
+ .d-emoji-picker__add-emoji {
5284
+ flex-shrink: 0;
5285
+ font-size: var(--dt-font-size-100);
5286
+ }
5283
5287
  .d-emoji-picker__tabset-list {
5284
5288
  gap: var(--dt-space-0);
5285
5289
  justify-content: space-between;
@@ -5438,16 +5442,16 @@ legend .d-label--md {
5438
5442
  .d-bga-unset {
5439
5443
  background-attachment: unset !important;
5440
5444
  }
5441
- .d-bgc-border-box {
5445
+ .d-bgclip-border-box {
5442
5446
  background-clip: border-box !important;
5443
5447
  }
5444
- .d-bgc-padding-box {
5448
+ .d-bgclip-padding-box {
5445
5449
  background-clip: padding-box !important;
5446
5450
  }
5447
- .d-bgc-content-box {
5451
+ .d-bgclip-content-box {
5448
5452
  background-clip: content-box !important;
5449
5453
  }
5450
- .d-bgc-text {
5454
+ .d-bgclip-text {
5451
5455
  color: transparent !important;
5452
5456
  -webkit-background-clip: text !important;
5453
5457
  background-clip: text !important;
@@ -5632,9 +5636,6 @@ legend .d-label--md {
5632
5636
  .d-bgg-pattern-stripe-light {
5633
5637
  --bgg-pattern: var(--bgg-pattern-stripe-light) !important;
5634
5638
  }
5635
- .d-bgc-ai {
5636
- background-image: var(--dt-color-surface-ai) !important;
5637
- }
5638
5639
  .d-ba {
5639
5640
  border: var(--dt-size-100) solid !important;
5640
5641
  }
@@ -5899,14 +5900,6 @@ legend .d-label--md {
5899
5900
  .d-divide-x-reverse > * + * {
5900
5901
  --divide-x-reverse: 1;
5901
5902
  }
5902
- /*
5903
- * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
5904
- * https://dev.to/afif/border-with-gradient-and-radius-387f
5905
- */
5906
- .d-bc-ai {
5907
- -o-border-image: var(--dt-color-border-ai) 1 !important;
5908
- border-image: var(--dt-color-border-ai) 1 !important;
5909
- }
5910
5903
  .d-divide-ai > * + * {
5911
5904
  -o-border-image: var(--dt-color-border-ai) 1 !important;
5912
5905
  border-image: var(--dt-color-border-ai) 1 !important;
@@ -5928,6 +5921,9 @@ legend .d-label--md {
5928
5921
  background-color: unset !important;
5929
5922
  background-image: unset !important;
5930
5923
  }
5924
+ .d-bgc-ai {
5925
+ background-image: var(--dt-color-surface-ai) !important;
5926
+ }
5931
5927
  .d-bc-transparent, .h\:d-bc-transparent:hover, .f\:d-bc-transparent:focus, .f\:d-bc-transparent:focus-within, .fv\:d-bc-transparent:focus-visible {
5932
5928
  border-color: transparent !important;
5933
5929
  }
@@ -5937,6 +5933,14 @@ legend .d-label--md {
5937
5933
  .d-bc-unset, .h\:d-bc-unset:hover, .f\:d-bc-unset:focus, .f\:d-bc-unset:focus-within, .fv\:d-bc-unset:focus-visible {
5938
5934
  border-color: unset !important;
5939
5935
  }
5936
+ /*
5937
+ * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
5938
+ * https://dev.to/afif/border-with-gradient-and-radius-387f
5939
+ */
5940
+ .d-bc-ai {
5941
+ -o-border-image: var(--dt-color-border-ai) 1 !important;
5942
+ border-image: var(--dt-color-border-ai) 1 !important;
5943
+ }
5940
5944
  @-webkit-keyframes d-loading-circle {
5941
5945
  from {
5942
5946
  -webkit-transform: rotate(0deg);
@@ -7942,19 +7946,19 @@ legend .d-label--md {
7942
7946
  .d-g-unset {
7943
7947
  gap: unset !important;
7944
7948
  }
7945
- .d-ff-custom {
7949
+ .d-font-family-custom {
7946
7950
  font-family: var(--dt-font-family-body) !important;
7947
7951
  }
7948
- .d-ff-sans {
7952
+ .d-font-family-sans {
7949
7953
  font-family: var(--dt-font-family-body) !important;
7950
7954
  }
7951
- .d-ff-mono {
7955
+ .d-font-family-mono {
7952
7956
  font-family: var(--dt-font-family-mono) !important;
7953
7957
  }
7954
- .d-ff-marketing {
7958
+ .d-font-family-marketing {
7955
7959
  font-family: var(--dt-font-family-expressive) !important;
7956
7960
  }
7957
- .d-ff-unset {
7961
+ .d-font-family-unset {
7958
7962
  font-family: unset !important;
7959
7963
  }
7960
7964
  h1,
@@ -8175,28 +8179,28 @@ ul {
8175
8179
  .d-headline54 {
8176
8180
  font: var(--dt-typography-headline-xxl);
8177
8181
  }
8178
- .d-fs-normal {
8182
+ .d-font-style-normal {
8179
8183
  font-style: normal !important;
8180
8184
  }
8181
- .d-fs-italic {
8185
+ .d-font-style-italic {
8182
8186
  font-style: italic !important;
8183
8187
  }
8184
- .d-fs-unset {
8188
+ .d-font-style-unset {
8185
8189
  font-style: unset !important;
8186
8190
  }
8187
- .d-fw-normal {
8191
+ .d-font-weight-normal {
8188
8192
  font-weight: var(--dt-font-weight-normal) !important;
8189
8193
  }
8190
- .d-fw-medium {
8194
+ .d-font-weight-medium {
8191
8195
  font-weight: var(--dt-font-weight-medium) !important;
8192
8196
  }
8193
- .d-fw-semibold {
8197
+ .d-font-weight-semibold {
8194
8198
  font-weight: var(--dt-font-weight-semi-bold) !important;
8195
8199
  }
8196
- .d-fw-bold {
8200
+ .d-font-weight-bold {
8197
8201
  font-weight: var(--dt-font-weight-bold) !important;
8198
8202
  }
8199
- .d-fw-unset {
8203
+ .d-font-weight-unset {
8200
8204
  font-weight: unset !important;
8201
8205
  }
8202
8206
  .d-lh0 {