@dialpad/dialtone-css 8.62.0 → 8.63.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 (31) hide show
  1. package/lib/build/less/components/emoji-text-wrapper.less +4 -3
  2. package/lib/build/less/recipes/emoji_row.less +34 -3
  3. package/lib/dist/dialtone-default-theme.css +1807 -5183
  4. package/lib/dist/dialtone-default-theme.min.css +1 -1
  5. package/lib/dist/dialtone-docs.json +1 -1
  6. package/lib/dist/dialtone.css +646 -1997
  7. package/lib/dist/dialtone.min.css +1 -1
  8. package/lib/dist/tokens/tokens-aegean-dark.css +3018 -2
  9. package/lib/dist/tokens/tokens-aegean-light.css +3011 -2
  10. package/lib/dist/tokens/tokens-botany-dark.css +3011 -2
  11. package/lib/dist/tokens/tokens-botany-light.css +3018 -2
  12. package/lib/dist/tokens/tokens-buttercream-dark.css +3011 -2
  13. package/lib/dist/tokens/tokens-ceruleo-dark.css +2997 -2
  14. package/lib/dist/tokens/tokens-ceruleo-light.css +3476 -0
  15. package/lib/dist/tokens/tokens-dp-dark.css +104 -265
  16. package/lib/dist/tokens/tokens-expressive-dark.css +104 -265
  17. package/lib/dist/tokens/tokens-expressive-sm-dark.css +104 -265
  18. package/lib/dist/tokens/tokens-high-desert-dark.css +3018 -2
  19. package/lib/dist/tokens/tokens-high-desert-light.css +3011 -2
  20. package/lib/dist/tokens/tokens-melon-dark.css +3018 -2
  21. package/lib/dist/tokens/tokens-melon-light.css +3011 -2
  22. package/lib/dist/tokens/tokens-plum-dark.css +3025 -2
  23. package/lib/dist/tokens/tokens-plum-light.css +3018 -2
  24. package/lib/dist/tokens/tokens-sunflower-dark.css +3018 -2
  25. package/lib/dist/tokens/tokens-sunflower-light.css +3011 -2
  26. package/lib/dist/tokens/tokens-tmo-dark.css +104 -265
  27. package/lib/dist/tokens/tokens-verdant-haze-dark.css +3011 -2
  28. package/lib/dist/tokens/tokens-verdant-haze-light.css +3004 -2
  29. package/lib/dist/tokens-docs.json +1 -1
  30. package/package.json +2 -2
  31. package/lib/dist/tokens/tokens-ceruleo-default.css +0 -488
@@ -1,9 +1,10 @@
1
1
  .d-emoji-text-wrapper {
2
- .d-emoji {
2
+ // Only inline emojis need this adjustments
3
+ >.d-emoji {
3
4
  height: 1em;
4
5
 
5
- .d-icon {
6
- top: calc(50% - 1px);
6
+ img.d-icon {
7
+ inset-block-start: calc(50% - 1px);
7
8
  }
8
9
  }
9
10
  }
@@ -9,7 +9,29 @@
9
9
  }
10
10
 
11
11
  .d-recipe-emoji-row__tooltip-content {
12
- max-width: var(--dt-size-975);
12
+ max-inline-size: var(--dt-size-875);
13
+ }
14
+
15
+ .d-recipe-emoji-row__tooltip-emoji {
16
+ display: inline-block;
17
+ padding: var(--dt-space-300);
18
+ background-color: var(--dt-color-neutral-white);
19
+ border-radius: var(--dt-size-radius-300);
20
+ margin-block: var(--dt-space-300) var(--dt-space-350);
21
+
22
+ .d-emoji {
23
+ height: var(--icon-size);
24
+ }
25
+ }
26
+
27
+ .d-recipe-emoji-row__tooltip-names {
28
+ display: inline-block;
29
+ font-weight: var(--dt-font-weight-semi-bold);
30
+ }
31
+
32
+ .d-recipe-emoji-row__tooltip-label {
33
+ color: var(--dt-color-foreground-secondary-inverted);
34
+ font-weight: var(--dt-font-weight-medium);
13
35
  }
14
36
 
15
37
  .d-recipe-emoji-row__reaction {
@@ -30,7 +52,7 @@
30
52
  }
31
53
 
32
54
  &:hover {
33
- --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);
55
+ --emoji-item-color-inset-shadow: var(--dt-color-border-moderate);
34
56
  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);
35
57
  }
36
58
 
@@ -72,6 +94,15 @@
72
94
  }
73
95
 
74
96
  .d-recipe-emoji-row__emoji {
97
+ --emoji-size: calc(var(--dt-icon-size-200) + .2rem);
98
+
75
99
  display: inline-flex;
76
- margin-right: var(--dt-space-300);
100
+ margin-inline-end: var(--dt-space-300);
101
+ inline-size: var(--emoji-size);
102
+ block-size: var(--emoji-size);
103
+ }
104
+
105
+ .d-recipe-emoji-row__emoji-img {
106
+ inline-size: var(--emoji-size);
107
+ block-size: var(--emoji-size);
77
108
  }