@dialpad/dialtone-css 8.58.2 → 8.58.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 (11) hide show
  1. package/lib/build/less/components/rich-text-editor.less +24 -0
  2. package/lib/build/less/utilities/backgrounds.less +12 -4
  3. package/lib/build/less/utilities/borders.less +8 -0
  4. package/lib/build/less/utilities/colors.less +0 -12
  5. package/lib/build/less/utilities/typography.less +13 -13
  6. package/lib/dist/dialtone-default-theme.css +50 -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 +50 -28
  10. package/lib/dist/dialtone.min.css +1 -1
  11. package/package.json +1 -1
package/lib/build/less/components/rich-text-editor.less CHANGED
@@ -69,3 +69,27 @@
69
69
  white-space: nowrap;
70
70
  text-overflow: ellipsis;
71
71
  }
72
+
73
+ .d-mention-suggestion__container {
74
+ width: 100%;
75
+ }
76
+ .d-mention-suggestion__details-container {
77
+ width: 90%;
78
+ }
79
+
80
+ .d-mention-suggestion__presence {
81
+ min-width: fit-content;
82
+ margin-left: var(--dt-space-200);
83
+ }
84
+
85
+ .d-mention-suggestion__status {
86
+ overflow: hidden;
87
+ white-space: nowrap;
88
+ text-overflow: ellipsis;
89
+ color: var(--dt-color-foreground-tertiary);
90
+ margin-left: var(--dt-space-100);
91
+ }
92
+
93
+ .d-mention-suggestion__divider {
94
+ color: var(--dt-color-foreground-tertiary);
95
+ }
package/lib/build/less/utilities/backgrounds.less CHANGED
@@ -26,11 +26,11 @@
26
26
  // ============================================================================
27
27
  // $ BACKGROUND CLIP
28
28
  // ----------------------------------------------------------------------------
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; }
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; }
32
32
 
33
- .d-bgclip-text {
33
+ .d-bgc-text {
34
34
  color: transparent !important;
35
35
  -webkit-background-clip: text !important;
36
36
  background-clip: text !important;
@@ -137,3 +137,11 @@
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,6 +229,14 @@
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
+
232
240
  .d-divide-ai > * + * {
233
241
  border-image: var(--dt-color-border-ai) 1 !important;
234
242
  }
package/lib/build/less/utilities/colors.less CHANGED
@@ -32,20 +32,8 @@
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
-
39
35
  // $$ BORDER COLORS
40
36
  // ----------------------------------------------------------------------------
41
37
  .d-bc-transparent { border-color: transparent !important; }
42
38
  .d-bc-current { border-color: currentColor !important; }
43
39
  .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-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; }
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; }
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-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; }
279
+ .d-fs-normal { font-style: normal !important; }
280
+ .d-fs-italic { font-style: italic !important; }
281
+ .d-fs-unset { font-style: unset !important; }
282
282
 
283
283
 
284
284
  // ============================================================================
285
285
  // $$ FONT WEIGHT
286
286
  // ----------------------------------------------------------------------------
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; }
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; }
292
292
 
293
293
 
294
294
  // ============================================================================
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -4219,6 +4219,28 @@ legend .d-label--md {
4219
4219
  white-space: nowrap;
4220
4220
  text-overflow: ellipsis;
4221
4221
  }
4222
+ .d-mention-suggestion__container {
4223
+ width: 100%;
4224
+ }
4225
+ .d-mention-suggestion__details-container {
4226
+ width: 90%;
4227
+ }
4228
+ .d-mention-suggestion__presence {
4229
+ min-width: -webkit-fit-content;
4230
+ min-width: -moz-fit-content;
4231
+ min-width: fit-content;
4232
+ margin-left: var(--dt-space-200);
4233
+ }
4234
+ .d-mention-suggestion__status {
4235
+ overflow: hidden;
4236
+ white-space: nowrap;
4237
+ text-overflow: ellipsis;
4238
+ color: var(--dt-color-foreground-tertiary);
4239
+ margin-left: var(--dt-space-100);
4240
+ }
4241
+ .d-mention-suggestion__divider {
4242
+ color: var(--dt-color-foreground-tertiary);
4243
+ }
4222
4244
  .vue-recycle-scroller {
4223
4245
  position: relative;
4224
4246
  }
@@ -5442,16 +5464,16 @@ legend .d-label--md {
5442
5464
  .d-bga-unset {
5443
5465
  background-attachment: unset !important;
5444
5466
  }
5445
- .d-bgclip-border-box {
5467
+ .d-bgc-border-box {
5446
5468
  background-clip: border-box !important;
5447
5469
  }
5448
- .d-bgclip-padding-box {
5470
+ .d-bgc-padding-box {
5449
5471
  background-clip: padding-box !important;
5450
5472
  }
5451
- .d-bgclip-content-box {
5473
+ .d-bgc-content-box {
5452
5474
  background-clip: content-box !important;
5453
5475
  }
5454
- .d-bgclip-text {
5476
+ .d-bgc-text {
5455
5477
  color: transparent !important;
5456
5478
  -webkit-background-clip: text !important;
5457
5479
  background-clip: text !important;
@@ -5636,6 +5658,9 @@ legend .d-label--md {
5636
5658
  .d-bgg-pattern-stripe-light {
5637
5659
  --bgg-pattern: var(--bgg-pattern-stripe-light) !important;
5638
5660
  }
5661
+ .d-bgc-ai {
5662
+ background-image: var(--dt-color-surface-ai) !important;
5663
+ }
5639
5664
  .d-ba {
5640
5665
  border: var(--dt-size-100) solid !important;
5641
5666
  }
@@ -5900,6 +5925,14 @@ legend .d-label--md {
5900
5925
  .d-divide-x-reverse > * + * {
5901
5926
  --divide-x-reverse: 1;
5902
5927
  }
5928
+ /*
5929
+ * Note: border-image is not compatible with border-radius, but it's the easiest way to get a linear gradient border.
5930
+ * https://dev.to/afif/border-with-gradient-and-radius-387f
5931
+ */
5932
+ .d-bc-ai {
5933
+ -o-border-image: var(--dt-color-border-ai) 1 !important;
5934
+ border-image: var(--dt-color-border-ai) 1 !important;
5935
+ }
5903
5936
  .d-divide-ai > * + * {
5904
5937
  -o-border-image: var(--dt-color-border-ai) 1 !important;
5905
5938
  border-image: var(--dt-color-border-ai) 1 !important;
@@ -5921,9 +5954,6 @@ legend .d-label--md {
5921
5954
  background-color: unset !important;
5922
5955
  background-image: unset !important;
5923
5956
  }
5924
- .d-bgc-ai {
5925
- background-image: var(--dt-color-surface-ai) !important;
5926
- }
5927
5957
  .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 {
5928
5958
  border-color: transparent !important;
5929
5959
  }
@@ -5933,14 +5963,6 @@ legend .d-label--md {
5933
5963
  .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 {
5934
5964
  border-color: unset !important;
5935
5965
  }
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
- }
5944
5966
  @-webkit-keyframes d-loading-circle {
5945
5967
  from {
5946
5968
  -webkit-transform: rotate(0deg);
@@ -7946,19 +7968,19 @@ legend .d-label--md {
7946
7968
  .d-g-unset {
7947
7969
  gap: unset !important;
7948
7970
  }
7949
- .d-font-family-custom {
7971
+ .d-ff-custom {
7950
7972
  font-family: var(--dt-font-family-body) !important;
7951
7973
  }
7952
- .d-font-family-sans {
7974
+ .d-ff-sans {
7953
7975
  font-family: var(--dt-font-family-body) !important;
7954
7976
  }
7955
- .d-font-family-mono {
7977
+ .d-ff-mono {
7956
7978
  font-family: var(--dt-font-family-mono) !important;
7957
7979
  }
7958
- .d-font-family-marketing {
7980
+ .d-ff-marketing {
7959
7981
  font-family: var(--dt-font-family-expressive) !important;
7960
7982
  }
7961
- .d-font-family-unset {
7983
+ .d-ff-unset {
7962
7984
  font-family: unset !important;
7963
7985
  }
7964
7986
  h1,
@@ -8179,28 +8201,28 @@ ul {
8179
8201
  .d-headline54 {
8180
8202
  font: var(--dt-typography-headline-xxl);
8181
8203
  }
8182
- .d-font-style-normal {
8204
+ .d-fs-normal {
8183
8205
  font-style: normal !important;
8184
8206
  }
8185
- .d-font-style-italic {
8207
+ .d-fs-italic {
8186
8208
  font-style: italic !important;
8187
8209
  }
8188
- .d-font-style-unset {
8210
+ .d-fs-unset {
8189
8211
  font-style: unset !important;
8190
8212
  }
8191
- .d-font-weight-normal {
8213
+ .d-fw-normal {
8192
8214
  font-weight: var(--dt-font-weight-normal) !important;
8193
8215
  }
8194
- .d-font-weight-medium {
8216
+ .d-fw-medium {
8195
8217
  font-weight: var(--dt-font-weight-medium) !important;
8196
8218
  }
8197
- .d-font-weight-semibold {
8219
+ .d-fw-semibold {
8198
8220
  font-weight: var(--dt-font-weight-semi-bold) !important;
8199
8221
  }
8200
- .d-font-weight-bold {
8222
+ .d-fw-bold {
8201
8223
  font-weight: var(--dt-font-weight-bold) !important;
8202
8224
  }
8203
- .d-font-weight-unset {
8225
+ .d-fw-unset {
8204
8226
  font-weight: unset !important;
8205
8227
  }
8206
8228
  .d-lh0 {