@dialpad/dialtone-css 8.81.0-next.10 → 8.81.0-next.12

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 (13) hide show
  1. package/lib/build/less/components/avatar.less +24 -14
  2. package/lib/build/less/components/emoji-picker.less +12 -4
  3. package/lib/dist/dialtone-default-theme.css +29 -18
  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 +29 -18
  7. package/lib/dist/dialtone.min.css +1 -1
  8. package/lib/dist/no-layers/dialtone-default-theme.css +29 -18
  9. package/lib/dist/no-layers/dialtone-default-theme.min.css +1 -1
  10. package/lib/dist/no-layers/dialtone.css +29 -18
  11. package/lib/dist/no-layers/dialtone.min.css +1 -1
  12. package/lib/dist/tokens-docs.json +1 -1
  13. package/package.json +1 -1
package/lib/dist/no-layers/dialtone-default-theme.css CHANGED
@@ -5089,8 +5089,8 @@ template {
5089
5089
  --avatar-border-radius: calc(var(--avatar-size-shape) * 0.125);
5090
5090
  --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.375);
5091
5091
  --avatar-presence-border-radius: calc(var(--avatar-border-radius) * 0.625);
5092
- --avatar-presence-position-right: var(--dt-spacing-0);
5093
- --avatar-presence-position-bottom: var(--dt-spacing-0);
5092
+ --avatar-presence-position-right: var(--dt-spacing-25-negative);
5093
+ --avatar-presence-position-bottom: var(--dt-spacing-25-negative);
5094
5094
  --avatar-icon-size: calc(var(--avatar-size-shape) * 0.625);
5095
5095
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
5096
5096
  position: relative;
@@ -5218,10 +5218,10 @@ template {
5218
5218
  position: absolute;
5219
5219
  background-color: var(--dt-color-neutral-white);
5220
5220
  border-radius: var(--avatar-border-radius);
5221
- opacity: 0.5;
5221
+ opacity: var(--dt-opacity-700);
5222
5222
  content: '';
5223
5223
  pointer-events: none;
5224
- inset: 0;
5224
+ inset: var(--dt-spacing-0);
5225
5225
  }
5226
5226
  .d-avatar__canvas {
5227
5227
  display: flex;
@@ -5313,7 +5313,7 @@ template {
5313
5313
  }
5314
5314
  .d-avatar--clickable {
5315
5315
  --avatar-color-border: var(--dt-color-neutral-transparent);
5316
- padding: 0;
5316
+ padding: var(--dt-spacing-0);
5317
5317
  background-color: var(--dt-color-neutral-transparent);
5318
5318
  border: var(--dt-size-border-0) solid var(--avatar-color-border);
5319
5319
  border-radius: var(--avatar-border-radius);
@@ -5350,45 +5350,55 @@ template {
5350
5350
  .d-avatar--xs,
5351
5351
  .d-avatar--size-100 {
5352
5352
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.25);
5353
+ --avatar-presence-position-right: var(--dt-spacing-0);
5354
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5353
5355
  --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.8 0c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C16 1.52 16 2.08 16 3.2v5.3h-3.5c-1.4 0-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C8.5 10.4 8.5 11.1 8.5 12.5V16H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C0 14.48 0 13.92 0 12.8V3.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C1.52 0 2.08 0 3.2 0z'/%3E%3C/svg%3E");
5354
5356
  }
5355
5357
  .d-avatar--size-150 {
5356
5358
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.3125);
5357
5359
  --avatar-size-text: var(--dt-font-size-100);
5358
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16 0c1.4 0 2.1 0 2.635.272a2.5 2.5 0 0 1 1.092 1.093C20 1.9 20 2.6 20 4v6.63h-4.37c-1.75 0-2.626 0-3.294.34-.588.3-1.066.778-1.365 1.366-.34.668-.341 1.544-.341 3.294V20H4c-1.4 0-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092C0 18.1 0 17.4 0 16V4c0-1.4 0-2.1.272-2.635A2.5 2.5 0 0 1 1.365.272C1.9 0 2.6 0 4 0z'/%3E%3C/svg%3E");
5360
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M17.5 0C18.8807 0 20 1.11929 20 2.5V12.5908H14.5C13.3956 12.5908 12.5003 13.4855 12.5 14.5898V20H2.5C1.11929 20 0 18.8807 0 17.5V2.5C0 1.11929 1.11929 0 2.5 0H17.5Z'/%3E%3C/svg%3E");
5359
5361
  }
5360
5362
  .d-avatar--sm,
5361
5363
  .d-avatar--size-200 {
5362
5364
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.375);
5363
5365
  --avatar-size-text: var(--dt-font-size-100);
5364
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.2 0c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.31 1.31C24 2.28 24 3.12 24 4.8v7.95h-5.25c-2.1 0-3.15 0-3.952.41a3.74 3.74 0 0 0-1.639 1.638c-.409.802-.409 1.852-.409 3.952V24H4.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.31-1.31C0 21.72 0 20.88 0 19.2V4.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.31-1.31C2.28 0 3.12 0 4.8 0z'/%3E%3C/svg%3E");
5366
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 0C22.65685 0 24 1.34315 24 3V15H17.4C16.07452 15 15 16.07452 15 17.4V24H3C1.34315 24 0 22.65685 0 21V3C0 1.34315 1.34315 0 3 0H21Z'/%3E%3C/svg%3E");
5365
5367
  }
5366
5368
  .d-avatar--size-250 {
5367
5369
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.4375);
5368
- --avatar-size-text: var(--dt-font-size-200);
5369
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M22.4 0c1.96 0 2.94 0 3.689.382a3.5 3.5 0 0 1 1.53 1.53C27.998 2.66 28 3.64 28 5.6v9.28h-6.12c-2.45 0-3.676 0-4.611.476a4.38 4.38 0 0 0-1.913 1.913c-.476.935-.476 2.16-.476 4.61V28H5.6c-1.96 0-2.94 0-3.689-.382a3.5 3.5 0 0 1-1.53-1.53C.002 25.34 0 24.36 0 22.4V5.6c0-1.96 0-2.94.382-3.69A3.5 3.5 0 0 1 1.912.38C2.66.002 3.64 0 5.6 0z'/%3E%3C/svg%3E");
5370
+ --avatar-size-text: var(--dt-font-size-125);
5371
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M24.5 0C26.433 0 28 1.567 28 3.5V17.5H20.3C18.7536 17.5 17.5 18.7536 17.5 20.3V28H3.5C1.567 28 0 26.433 0 24.5V3.5C0 1.567 1.567 0 3.5 0H24.5Z'/%3E%3C/svg%3E");
5370
5372
  }
5371
5373
  .d-avatar--md,
5372
5374
  .d-avatar--size-300 {
5373
5375
  --avatar-size-text: var(--dt-font-size-200);
5374
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M25.6 0c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.749 1.748C32 3.039 32 4.16 32 6.4V17h-7c-2.8 0-4.2 0-5.27.545a5 5 0 0 0-2.185 2.185C17 20.8 17 22.2 17 25v7H6.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C0 28.961 0 27.84 0 25.6V6.4c0-2.24 0-3.36.436-4.216A4 4 0 0 1 2.184.436C3.039 0 4.16 0 6.4 0z'/%3E%3C/svg%3E");
5376
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.328);
5377
+ --avatar-presence-position-right: var(--dt-spacing-1-negative);
5378
+ --avatar-presence-position-bottom: var(--dt-spacing-1-negative);
5379
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M28 0C30.2091 0 32 1.79086 32 4V20.5H23.7C21.9327 20.5 20.5 21.9327 20.5 23.7V32H4C1.79086 32 0 30.2091 0 28V4C0 1.79086 1.79086 0 4 0H28Z'/%3E%3C/svg%3E");
5375
5380
  }
5376
5381
  .d-avatar--size-400 {
5377
5382
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.625);
5378
- --avatar-size-text: var(--dt-font-size-200);
5379
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M32 0c2.8 0 4.2 0 5.27.545a5 5 0 0 1 2.185 2.185C40 3.8 40 5.2 40 8v13.25h-8.75c-3.5 0-5.25 0-6.588.682a6.25 6.25 0 0 0-2.73 2.73C21.25 26 21.25 27.75 21.25 31.25V40H8c-2.8 0-4.2 0-5.27-.545A5 5 0 0 1 .545 37.27C0 36.2 0 34.8 0 32V8c0-2.8 0-4.2.545-5.27A5 5 0 0 1 2.73.545C3.8 0 5.2 0 8 0z'/%3E%3C/svg%3E");
5383
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
5384
+ --avatar-size-text: var(--dt-font-size-250);
5385
+ --avatar-presence-position-right: var(--dt-spacing-0);
5386
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5387
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M35 0C37.7614 0 40 2.23858 40 5V25.4986H29C26.7909 25.4986 25 27.2895 25 29.4986V40H5C2.23858 40 0 37.7614 0 35V5C0 2.23858 2.23858 0 5 0H35Z'/%3E%3C/svg%3E");
5380
5388
  }
5381
5389
  .d-avatar--lg,
5382
5390
  .d-avatar--size-500 {
5383
5391
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.75);
5392
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
5384
5393
  --avatar-size-text: var(--dt-font-size-300);
5385
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M38.4 0c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C48 4.56 48 6.24 48 9.6v15.9H37.5c-4.2 0-6.3 0-7.905.817a7.5 7.5 0 0 0-3.278 3.278C25.5 31.199 25.5 33.3 25.5 37.5V48H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 43.44 0 41.76 0 38.4V9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0z'/%3E%3C/svg%3E");
5394
+ --avatar-presence-position-right: var(--dt-spacing-0);
5395
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5396
+ --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M42 0C45.3137 0 48 2.68629 48 6V30.5377H34.8C32.149 30.5377 30 32.6867 30 35.3377V48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42Z'/%3E%3C/svg%3E");
5386
5397
  }
5387
5398
  .d-avatar--xl,
5388
5399
  .d-avatar--size-600 {
5389
5400
  --avatar-size-shape: var(--dt-layout-100);
5390
5401
  --avatar-size-text: var(--dt-font-size-350);
5391
- --avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M51.2 0c4.48 0 6.72 0 8.432.872a8 8 0 0 1 3.496 3.496C64 6.08 64 8.32 64 12.8V34H50c-5.6 0-8.4 0-10.54 1.09a10 10 0 0 0-4.37 4.37C34 41.6 34 44.4 34 50v14H12.8c-4.48 0-6.72 0-8.432-.872a8 8 0 0 1-3.496-3.496C0 57.92 0 55.68 0 51.2V12.8c0-4.48 0-6.72.872-8.432A8 8 0 0 1 4.368.872C6.08 0 8.32 0 12.8 0z'/%3E%3C/svg%3E");
5392
5402
  }
5393
5403
  .d-avatar--size-700 {
5394
5404
  --avatar-size-shape: var(--dt-layout-150);
@@ -10676,7 +10686,7 @@ legend .d-label {
10676
10686
  .d-emoji-picker__alignment {
10677
10687
  box-sizing: content-box !important;
10678
10688
  inline-size: auto;
10679
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
10689
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
10680
10690
  margin: 0 var(--dt-spacing-200);
10681
10691
  }
10682
10692
  .d-emoji-picker--footer {
@@ -10695,6 +10705,7 @@ legend .d-label {
10695
10705
  }
10696
10706
  .d-emoji-picker__tabset-list {
10697
10707
  gap: var(--dt-spacing-0);
10708
+ --tablist-padding-bottom: var(--dt-spacing-0);
10698
10709
  }
10699
10710
  .d-emoji-picker__tabset-list::after {
10700
10711
  background-color: var(--dt-color-neutral-transparent) !important;
@@ -10749,7 +10760,7 @@ legend .d-label {
10749
10760
  border-color: var(--dt-color-border-subtle);
10750
10761
  }
10751
10762
  .d-emoji-picker__selector {
10752
- min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
10763
+ min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
10753
10764
  }
10754
10765
  .d-emoji-picker__selector p {
10755
10766
  -webkit-padding-after: var(--dt-spacing-50);
@@ -10769,7 +10780,7 @@ legend .d-label {
10769
10780
  .d-emoji-picker__list {
10770
10781
  position: relative;
10771
10782
  block-size: 100%;
10772
- max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
10783
+ max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
10773
10784
  -webkit-padding-after: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
10774
10785
  padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
10775
10786
  overflow: hidden auto;
@@ -10791,7 +10802,7 @@ legend .d-label {
10791
10802
  flex-wrap: wrap;
10792
10803
  gap: var(--dt-spacing-25);
10793
10804
  inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
10794
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
10805
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
10795
10806
  -webkit-margin-start: var(--dt-spacing-75-negative);
10796
10807
  margin-inline-start: var(--dt-spacing-75-negative);
10797
10808
  -webkit-padding-before: var(--dt-spacing-50);