@dialpad/dialtone-css 8.80.0-next.8 → 8.80.0-next.9

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 (28) hide show
  1. package/lib/build/js/dialtone_migrate/index.mjs +856 -0
  2. package/lib/build/js/dialtone_migrate_props/index.mjs +2 -1
  3. package/lib/build/js/dialtone_migration_helper/configs/physical-to-logical.mjs +7 -7
  4. package/lib/build/js/dialtone_migration_helper/configs/vue3-to-vue-imports.mjs +17 -0
  5. package/lib/build/less/components/box.less +2 -2
  6. package/lib/build/less/components/card.less +1 -1
  7. package/lib/build/less/components/image-viewer.less +0 -1
  8. package/lib/build/less/components/modal.less +1 -1
  9. package/lib/build/less/components/popover.less +1 -1
  10. package/lib/build/less/components/toast.less +2 -2
  11. package/lib/build/less/recipes/contact_info.less +0 -1
  12. package/lib/build/less/recipes/unread_pill.less +1 -1
  13. package/lib/build/less/utilities/effects.less +5 -11
  14. package/lib/dist/dialtone-default-theme.css +74 -184
  15. package/lib/dist/dialtone-default-theme.min.css +1 -1
  16. package/lib/dist/dialtone-docs.json +1 -1
  17. package/lib/dist/dialtone.css +30 -23
  18. package/lib/dist/dialtone.min.css +1 -1
  19. package/lib/dist/js/dialtone_migrate/index.mjs +856 -0
  20. package/lib/dist/js/dialtone_migrate_props/index.mjs +2 -1
  21. package/lib/dist/js/dialtone_migrate_tshirt_to_numeric/index.mjs +0 -0
  22. package/lib/dist/js/dialtone_migration_helper/configs/physical-to-logical.mjs +7 -7
  23. package/lib/dist/js/dialtone_migration_helper/configs/vue3-to-vue-imports.mjs +17 -0
  24. package/lib/dist/tokens/tokens-base-dark.css +126 -267
  25. package/lib/dist/tokens/tokens-base-light.css +44 -161
  26. package/lib/dist/tokens/tokens-debug-base.css +41 -158
  27. package/lib/dist/tokens-docs.json +1 -1
  28. package/package.json +4 -1
package/lib/dist/dialtone.css CHANGED
@@ -1234,9 +1234,6 @@
1234
1234
  .d-box--pbe-800 {
1235
1235
  --box-pbe: var(--dt-spacing-800);
1236
1236
  }
1237
- .d-box--surface-overlay {
1238
- --box-surface: var(--dt-color-surface-overlay);
1239
- }
1240
1237
  .d-box--surface-primary {
1241
1238
  --box-surface: var(--dt-color-surface-primary);
1242
1239
  }
@@ -1624,14 +1621,20 @@
1624
1621
  .d-box--br-circle {
1625
1622
  --box-br: var(--dt-size-radius-circle);
1626
1623
  }
1627
- .d-box--shadow-raised {
1628
- --box-shadow: var(--dt-shadow-raised);
1624
+ .d-box--shadow-small {
1625
+ --box-shadow: var(--dt-shadow-small);
1626
+ }
1627
+ .d-box--shadow-medium {
1628
+ --box-shadow: var(--dt-shadow-medium);
1629
+ }
1630
+ .d-box--shadow-large {
1631
+ --box-shadow: var(--dt-shadow-large);
1629
1632
  }
1630
- .d-box--shadow-overlay {
1631
- --box-shadow: var(--dt-shadow-overlay);
1633
+ .d-box--shadow-extra-large {
1634
+ --box-shadow: var(--dt-shadow-extra-large);
1632
1635
  }
1633
- .d-box--shadow-modal {
1634
- --box-shadow: var(--dt-shadow-modal);
1636
+ .d-box--shadow-card {
1637
+ --box-shadow: var(--dt-shadow-card);
1635
1638
  }
1636
1639
  .d-box--is-0 {
1637
1640
  inline-size: 0;
@@ -6724,7 +6727,6 @@
6724
6727
  max-block-size: 80%;
6725
6728
  padding: var(--dt-spacing-0);
6726
6729
  border-radius: var(--dt-size-radius-0);
6727
- box-shadow: var(--dt-shadow-modal);
6728
6730
  }
6729
6731
  .d-image-viewer__full__image {
6730
6732
  max-inline-size: 100%;
@@ -7090,7 +7092,7 @@
7090
7092
  background: var(--dt-color-surface-primary);
7091
7093
  border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
7092
7094
  border-radius: var(--dt-size-radius-300);
7093
- box-shadow: var(--dt-shadow-raised);
7095
+ box-shadow: var(--dt-shadow-card);
7094
7096
  }
7095
7097
  .d-card__header {
7096
7098
  display: flex;
@@ -7293,7 +7295,7 @@
7293
7295
  --modal-dialog-color-border: var(--dt-color-border-subtle);
7294
7296
  --modal-dialog-color-text: var(--dt-color-foreground-primary);
7295
7297
  --modal-header-color-text: var(--dt-color-foreground-primary);
7296
- --modal-dialog-shadow: var(--dt-shadow-modal);
7298
+ --modal-dialog-shadow: var(--dt-shadow-large);
7297
7299
  -webkit-app-region: no-drag;
7298
7300
  position: fixed;
7299
7301
  inset: 0;
@@ -7757,7 +7759,7 @@
7757
7759
  }
7758
7760
  .d-toast {
7759
7761
  --toast-color-shadow: var(--dt-color-border-subtle);
7760
- --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-overlay);
7762
+ --toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-medium);
7761
7763
  z-index: var(--zi-notification);
7762
7764
  display: block;
7763
7765
  max-inline-size: var(--dt-layout-700);
@@ -7810,7 +7812,7 @@
7810
7812
  }
7811
7813
  .d-toast-alternate {
7812
7814
  --toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 0.15);
7813
- --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-overlay);
7815
+ --toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
7814
7816
  --toast-alternate-color-background: var(--dt-color-surface-primary);
7815
7817
  --toast-alternate-color-text: var(--dt-color-foreground-primary);
7816
7818
  --toast-alternate-color-icon: var(--dt-color-foreground-muted);
@@ -7986,7 +7988,7 @@
7986
7988
  --popover-border-width: var(--dt-size-border-100);
7987
7989
  --popover-border-radius: var(--dt-size-radius-400);
7988
7990
  --popover-color-border: var(--dt-color-border-subtle);
7989
- --popover-shadow: var(--dt-shadow-overlay);
7991
+ --popover-shadow: var(--dt-shadow-card);
7990
7992
  -webkit-app-region: no-drag;
7991
7993
  display: grid;
7992
7994
  grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
@@ -10313,7 +10315,6 @@
10313
10315
  display: flex;
10314
10316
  align-items: center;
10315
10317
  justify-content: flex-start;
10316
- min-inline-size: var(--dt-layout-75);
10317
10318
  block-size: var(--dt-layout-100-percent);
10318
10319
  background-color: transparent;
10319
10320
  background-image: none;
@@ -11414,7 +11415,7 @@
11414
11415
  line-height: var(--dt-font-line-height-600);
11415
11416
  border: none;
11416
11417
  border-radius: var(--dt-size-radius-pill);
11417
- box-shadow: var(--dt-shadow-overlay);
11418
+ box-shadow: var(--dt-shadow-medium);
11418
11419
  cursor: pointer;
11419
11420
  }
11420
11421
  .d-recipe-leftbar-unread-pill-mentions {
@@ -12141,14 +12142,20 @@
12141
12142
  opacity: 0;
12142
12143
  }
12143
12144
  }
12144
- .d-bs-raised, .h\:d-bs-raised:hover, .f\:d-bs-raised:focus, .f\:d-bs-raised:focus-within, .fv\:d-bs-raised:focus-visible, .d-bs-sm, .h\:d-bs-sm:hover, .f\:d-bs-sm:focus, .f\:d-bs-sm:focus-within, .fv\:d-bs-sm:focus-visible, .d-bs-card, .h\:d-bs-card:hover, .f\:d-bs-card:focus, .f\:d-bs-card:focus-within, .fv\:d-bs-card:focus-visible {
12145
- box-shadow: var(--dt-shadow-raised) !important;
12145
+ .d-bs-sm, .h\:d-bs-sm:hover, .f\:d-bs-sm:focus, .f\:d-bs-sm:focus-within, .fv\:d-bs-sm:focus-visible {
12146
+ box-shadow: var(--dt-shadow-small) !important;
12147
+ }
12148
+ .d-bs-md, .h\:d-bs-md:hover, .f\:d-bs-md:focus, .f\:d-bs-md:focus-within, .fv\:d-bs-md:focus-visible {
12149
+ box-shadow: var(--dt-shadow-medium) !important;
12150
+ }
12151
+ .d-bs-lg, .h\:d-bs-lg:hover, .f\:d-bs-lg:focus, .f\:d-bs-lg:focus-within, .fv\:d-bs-lg:focus-visible {
12152
+ box-shadow: var(--dt-shadow-large) !important;
12146
12153
  }
12147
- .d-bs-overlay, .h\:d-bs-overlay:hover, .f\:d-bs-overlay:focus, .f\:d-bs-overlay:focus-within, .fv\:d-bs-overlay:focus-visible, .d-bs-md, .h\:d-bs-md:hover, .f\:d-bs-md:focus, .f\:d-bs-md:focus-within, .fv\:d-bs-md:focus-visible, .d-bs-lg, .h\:d-bs-lg:hover, .f\:d-bs-lg:focus, .f\:d-bs-lg:focus-within, .fv\:d-bs-lg:focus-visible {
12148
- box-shadow: var(--dt-shadow-overlay) !important;
12154
+ .d-bs-xl, .h\:d-bs-xl:hover, .f\:d-bs-xl:focus, .f\:d-bs-xl:focus-within, .fv\:d-bs-xl:focus-visible {
12155
+ box-shadow: var(--dt-shadow-extra-large) !important;
12149
12156
  }
12150
- .d-bs-modal, .h\:d-bs-modal:hover, .f\:d-bs-modal:focus, .f\:d-bs-modal:focus-within, .fv\:d-bs-modal:focus-visible, .d-bs-xl, .h\:d-bs-xl:hover, .f\:d-bs-xl:focus, .f\:d-bs-xl:focus-within, .fv\:d-bs-xl:focus-visible {
12151
- box-shadow: var(--dt-shadow-modal) !important;
12157
+ .d-bs-card, .h\:d-bs-card:hover, .f\:d-bs-card:focus, .f\:d-bs-card:focus-within, .fv\:d-bs-card:focus-visible {
12158
+ box-shadow: var(--dt-shadow-card) !important;
12152
12159
  }
12153
12160
  .d-bs-none, .h\:d-bs-none:hover, .f\:d-bs-none:focus, .f\:d-bs-none:focus-within, .fv\:d-bs-none:focus-visible {
12154
12161
  box-shadow: none !important;