@dialpad/dialtone-css 8.46.2 → 8.46.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 (33) hide show
  1. package/lib/build/less/components/avatar.less +2 -2
  2. package/lib/build/less/components/presence.less +2 -2
  3. package/lib/build/less/dialtone.less +20 -0
  4. package/lib/build/less/recipes/attachment_carousel.less +109 -0
  5. package/lib/build/less/recipes/callbar_button.less +47 -0
  6. package/lib/build/less/recipes/callbar_button_with_popover.less +55 -0
  7. package/lib/build/less/recipes/callbox.less +111 -0
  8. package/lib/build/less/recipes/combobox_multi_select.less +48 -0
  9. package/lib/build/less/recipes/contact_info.less +55 -0
  10. package/lib/build/less/recipes/editor.less +11 -0
  11. package/lib/build/less/recipes/emoji_row.less +73 -0
  12. package/lib/build/less/recipes/feed_item_pill.less +78 -0
  13. package/lib/build/less/recipes/feed_item_row.less +128 -0
  14. package/lib/build/less/recipes/grouped_chip.less +25 -0
  15. package/lib/build/less/recipes/ivr_node.less +56 -0
  16. package/lib/build/less/recipes/leftbar_row.less +389 -0
  17. package/lib/build/less/recipes/message_input.less +92 -0
  18. package/lib/build/less/recipes/settings_menu_button.less +31 -0
  19. package/lib/build/less/recipes/time_pill.less +9 -0
  20. package/lib/build/less/recipes/top_banner_info.less +30 -0
  21. package/lib/build/less/recipes/unread_pill.less +24 -0
  22. package/lib/dist/dialtone-default-theme.css +1157 -10
  23. package/lib/dist/dialtone-default-theme.min.css +1 -1
  24. package/lib/dist/dialtone.css +1151 -4
  25. package/lib/dist/dialtone.min.css +1 -1
  26. package/lib/dist/tokens/tokens-base-dark.css +6 -6
  27. package/lib/dist/tokens/tokens-base-light.css +6 -6
  28. package/lib/dist/tokens/tokens-debug-base.css +6 -6
  29. package/lib/dist/tokens/tokens-expressive-dark.css +6 -6
  30. package/lib/dist/tokens/tokens-expressive-light.css +6 -6
  31. package/lib/dist/tokens/tokens-expressive-sm-dark.css +6 -6
  32. package/lib/dist/tokens/tokens-expressive-sm-light.css +6 -6
  33. package/package.json +2 -2
package/lib/dist/tokens/tokens-base-dark.css CHANGED
@@ -977,13 +977,13 @@
977
977
  --dt-shadow-medium: var(--dt-shadow-medium-1-offset-x) var(--dt-shadow-medium-1-offset-y) var(--dt-shadow-medium-1-blur) var(--dt-shadow-medium-1-spread) var(--dt-shadow-medium-1-color), var(--dt-shadow-medium-2-offset-x) var(--dt-shadow-medium-2-offset-y) var(--dt-shadow-medium-2-blur) var(--dt-shadow-medium-2-spread) var(--dt-shadow-medium-2-color), var(--dt-shadow-medium-3-offset-x) var(--dt-shadow-medium-3-offset-y) var(--dt-shadow-medium-3-blur) var(--dt-shadow-medium-3-spread) var(--dt-shadow-medium-3-color), var(--dt-shadow-medium-4-offset-x) var(--dt-shadow-medium-4-offset-y) var(--dt-shadow-medium-4-blur) var(--dt-shadow-medium-4-spread) var(--dt-shadow-medium-4-color), var(--dt-shadow-medium-5-offset-x) var(--dt-shadow-medium-5-offset-y) var(--dt-shadow-medium-5-blur) var(--dt-shadow-medium-5-spread) var(--dt-shadow-medium-5-color);
978
978
  --dt-shadow-small: var(--dt-shadow-small-1-offset-x) var(--dt-shadow-small-1-offset-y) var(--dt-shadow-small-1-blur) var(--dt-shadow-small-1-spread) var(--dt-shadow-small-1-color), var(--dt-shadow-small-2-offset-x) var(--dt-shadow-small-2-offset-y) var(--dt-shadow-small-2-blur) var(--dt-shadow-small-2-spread) var(--dt-shadow-small-2-color), var(--dt-shadow-small-3-offset-x) var(--dt-shadow-small-3-offset-y) var(--dt-shadow-small-3-blur) var(--dt-shadow-small-3-spread) var(--dt-shadow-small-3-color), var(--dt-shadow-small-4-offset-x) var(--dt-shadow-small-4-offset-y) var(--dt-shadow-small-4-blur) var(--dt-shadow-small-4-spread) var(--dt-shadow-small-4-color), var(--dt-shadow-small-5-offset-x) var(--dt-shadow-small-5-offset-y) var(--dt-shadow-small-5-blur) var(--dt-shadow-small-5-spread) var(--dt-shadow-small-5-color);
979
979
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
980
- --dt-size-base: calc(var(--dt-font-size-root) * 0.8);
980
+ --dt-size-base: calc(1rem * 0.8);
981
981
  --dt-font-family-expressive: Archivo, var(--dt-font-family-body);
982
- --dt-font-size-500: calc(var(--dt-font-size-root) * 3.8); /* extra large / xxl */
983
- --dt-font-size-400: calc(var(--dt-font-size-root) * 2.7); /* extra large / xl */
984
- --dt-font-size-300: calc(var(--dt-font-size-root) * 1.9); /* large */
985
- --dt-font-size-200: calc(var(--dt-font-size-root) * 1.5); /* medium / base */
986
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.2); /* small */
982
+ --dt-font-size-500: calc(1rem * 3.8); /* extra large / xxl */
983
+ --dt-font-size-400: calc(1rem * 2.7); /* extra large / xl */
984
+ --dt-font-size-300: calc(1rem * 1.9); /* large */
985
+ --dt-font-size-200: calc(1rem * 1.5); /* medium / base */
986
+ --dt-font-size-100: calc(1rem * 1.2); /* small */
987
987
  --dt-space-base: var(--dt-size-base);
988
988
  --dt-font-size-100-mobile: 1.2rem;
989
989
  --dt-font-size-200-mobile: 1.6rem;
package/lib/dist/tokens/tokens-base-light.css CHANGED
@@ -737,13 +737,13 @@
737
737
  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
738
738
  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
739
739
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
740
- --dt-size-base: calc(var(--dt-font-size-root) * 0.8);
740
+ --dt-size-base: calc(1rem * 0.8);
741
741
  --dt-font-family-expressive: Archivo, var(--dt-font-family-body);
742
- --dt-font-size-500: calc(var(--dt-font-size-root) * 3.8); /* extra large / xxl */
743
- --dt-font-size-400: calc(var(--dt-font-size-root) * 2.7); /* extra large / xl */
744
- --dt-font-size-300: calc(var(--dt-font-size-root) * 1.9); /* large */
745
- --dt-font-size-200: calc(var(--dt-font-size-root) * 1.5); /* medium / base */
746
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.2); /* small */
742
+ --dt-font-size-500: calc(1rem * 3.8); /* extra large / xxl */
743
+ --dt-font-size-400: calc(1rem * 2.7); /* extra large / xl */
744
+ --dt-font-size-300: calc(1rem * 1.9); /* large */
745
+ --dt-font-size-200: calc(1rem * 1.5); /* medium / base */
746
+ --dt-font-size-100: calc(1rem * 1.2); /* small */
747
747
  --dt-space-base: var(--dt-size-base);
748
748
  --dt-font-size-100-mobile: 1.2rem;
749
749
  --dt-font-size-200-mobile: 1.6rem;
package/lib/dist/tokens/tokens-debug-base.css CHANGED
@@ -737,13 +737,13 @@
737
737
  --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
738
738
  --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
739
739
  --dt-color-gradient-magenta-purple: #ff5c00; /* Gradient for Ai-oriented treatments. */
740
- --dt-size-base: calc(var(--dt-font-size-root) * 0.8);
740
+ --dt-size-base: calc(1rem * 0.8);
741
741
  --dt-font-family-expressive: Archivo, var(--dt-font-family-body);
742
- --dt-font-size-500: calc(var(--dt-font-size-root) * 3.8); /* extra large / xxl */
743
- --dt-font-size-400: calc(var(--dt-font-size-root) * 2.7); /* extra large / xl */
744
- --dt-font-size-300: calc(var(--dt-font-size-root) * 1.9); /* large */
745
- --dt-font-size-200: calc(var(--dt-font-size-root) * 1.5); /* medium / base */
746
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.2); /* small */
742
+ --dt-font-size-500: calc(1rem * 3.8); /* extra large / xxl */
743
+ --dt-font-size-400: calc(1rem * 2.7); /* extra large / xl */
744
+ --dt-font-size-300: calc(1rem * 1.9); /* large */
745
+ --dt-font-size-200: calc(1rem * 1.5); /* medium / base */
746
+ --dt-font-size-100: calc(1rem * 1.2); /* small */
747
747
  --dt-space-base: var(--dt-size-base);
748
748
  --dt-font-size-100-mobile: 1.2rem;
749
749
  --dt-font-size-200-mobile: 1.6rem;
package/lib/dist/tokens/tokens-expressive-dark.css CHANGED
@@ -1225,12 +1225,12 @@
1225
1225
  --dt-color-foreground-primary-hsla: var(--dt-color-black-900-hsla);
1226
1226
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1227
1227
  --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1228
- --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
1229
- --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
1230
- --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
1231
- --dt-font-size-300: calc(var(--dt-font-size-root) * 2.8); /* large */
1232
- --dt-font-size-200: calc(var(--dt-font-size-root) * 2); /* medium / base */
1233
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.6); /* small */
1228
+ --dt-font-size-600: calc(1rem * 10.5);
1229
+ --dt-font-size-500: calc(1rem * 6.5); /* extra large / xxl */
1230
+ --dt-font-size-400: calc(1rem * 4.1); /* extra large / xl */
1231
+ --dt-font-size-300: calc(1rem * 2.8); /* large */
1232
+ --dt-font-size-200: calc(1rem * 2); /* medium / base */
1233
+ --dt-font-size-100: calc(1rem * 1.6); /* small */
1234
1234
  --dt-radio-color-border-checked-h: var(--dt-color-border-brand-h);
1235
1235
  --dt-radio-color-border-checked-s: var(--dt-color-border-brand-s);
1236
1236
  --dt-radio-color-border-checked-l: var(--dt-color-border-brand-l);
package/lib/dist/tokens/tokens-expressive-light.css CHANGED
@@ -1239,12 +1239,12 @@
1239
1239
  --dt-color-foreground-primary-hsla: var(--dt-color-black-900-hsla);
1240
1240
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1241
1241
  --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1242
- --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
1243
- --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
1244
- --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
1245
- --dt-font-size-300: calc(var(--dt-font-size-root) * 2.8); /* large */
1246
- --dt-font-size-200: calc(var(--dt-font-size-root) * 2); /* medium / base */
1247
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.6); /* small */
1242
+ --dt-font-size-600: calc(1rem * 10.5);
1243
+ --dt-font-size-500: calc(1rem * 6.5); /* extra large / xxl */
1244
+ --dt-font-size-400: calc(1rem * 4.1); /* extra large / xl */
1245
+ --dt-font-size-300: calc(1rem * 2.8); /* large */
1246
+ --dt-font-size-200: calc(1rem * 2); /* medium / base */
1247
+ --dt-font-size-100: calc(1rem * 1.6); /* small */
1248
1248
  --dt-radio-color-border-checked-h: var(--dt-color-border-brand-h);
1249
1249
  --dt-radio-color-border-checked-s: var(--dt-color-border-brand-s);
1250
1250
  --dt-radio-color-border-checked-l: var(--dt-color-border-brand-l);
package/lib/dist/tokens/tokens-expressive-sm-dark.css CHANGED
@@ -1225,12 +1225,12 @@
1225
1225
  --dt-color-foreground-primary-hsla: var(--dt-color-black-900-hsla);
1226
1226
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1227
1227
  --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1228
- --dt-font-size-600: calc(var(--dt-font-size-root) * 5.1);
1229
- --dt-font-size-500: calc(var(--dt-font-size-root) * 4.1); /* extra large / xxl */
1230
- --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* extra large / xl */
1231
- --dt-font-size-300: calc(var(--dt-font-size-root) * 2.0); /* large */
1232
- --dt-font-size-200: calc(var(--dt-font-size-root) * 1.6); /* medium / base */
1233
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.2); /* small */
1228
+ --dt-font-size-600: calc(1rem * 5.1);
1229
+ --dt-font-size-500: calc(1rem * 4.1); /* extra large / xxl */
1230
+ --dt-font-size-400: calc(1rem * 2.8); /* extra large / xl */
1231
+ --dt-font-size-300: calc(1rem * 2.0); /* large */
1232
+ --dt-font-size-200: calc(1rem * 1.6); /* medium / base */
1233
+ --dt-font-size-100: calc(1rem * 1.2); /* small */
1234
1234
  --dt-radio-color-border-checked-h: var(--dt-color-border-brand-h);
1235
1235
  --dt-radio-color-border-checked-s: var(--dt-color-border-brand-s);
1236
1236
  --dt-radio-color-border-checked-l: var(--dt-color-border-brand-l);
package/lib/dist/tokens/tokens-expressive-sm-light.css CHANGED
@@ -1239,12 +1239,12 @@
1239
1239
  --dt-color-foreground-primary-hsla: var(--dt-color-black-900-hsla);
1240
1240
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1241
1241
  --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1242
- --dt-font-size-600: calc(var(--dt-font-size-root) * 5.1);
1243
- --dt-font-size-500: calc(var(--dt-font-size-root) * 4.1); /* extra large / xxl */
1244
- --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* extra large / xl */
1245
- --dt-font-size-300: calc(var(--dt-font-size-root) * 2.0); /* large */
1246
- --dt-font-size-200: calc(var(--dt-font-size-root) * 1.6); /* medium / base */
1247
- --dt-font-size-100: calc(var(--dt-font-size-root) * 1.2); /* small */
1242
+ --dt-font-size-600: calc(1rem * 5.1);
1243
+ --dt-font-size-500: calc(1rem * 4.1); /* extra large / xxl */
1244
+ --dt-font-size-400: calc(1rem * 2.8); /* extra large / xl */
1245
+ --dt-font-size-300: calc(1rem * 2.0); /* large */
1246
+ --dt-font-size-200: calc(1rem * 1.6); /* medium / base */
1247
+ --dt-font-size-100: calc(1rem * 1.2); /* small */
1248
1248
  --dt-radio-color-border-checked-h: var(--dt-color-border-brand-h);
1249
1249
  --dt-radio-color-border-checked-s: var(--dt-color-border-brand-s);
1250
1250
  --dt-radio-color-border-checked-l: var(--dt-color-border-brand-l);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone-css",
3
- "version": "8.46.2",
3
+ "version": "8.46.3",
4
4
  "description": "Dialpad's design system",
5
5
  "keywords": [
6
6
  "Dialpad",
@@ -88,7 +88,7 @@
88
88
  "semantic-release": "^21.0.6",
89
89
  "through2": "^4.0.2",
90
90
  "yargs": "^17.7.2",
91
- "@dialpad/dialtone-tokens": "1.37.1",
91
+ "@dialpad/dialtone-tokens": "1.37.2",
92
92
  "@dialpad/postcss-responsive-variations": "1.1.5"
93
93
  },
94
94
  "peerDependencies": {