@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/dialtone.css CHANGED
@@ -5109,8 +5109,8 @@
5109
5109
  --avatar-border-radius: calc(var(--avatar-size-shape) * 0.125);
5110
5110
  --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.375);
5111
5111
  --avatar-presence-border-radius: calc(var(--avatar-border-radius) * 0.625);
5112
- --avatar-presence-position-right: var(--dt-spacing-0);
5113
- --avatar-presence-position-bottom: var(--dt-spacing-0);
5112
+ --avatar-presence-position-right: var(--dt-spacing-25-negative);
5113
+ --avatar-presence-position-bottom: var(--dt-spacing-25-negative);
5114
5114
  --avatar-icon-size: calc(var(--avatar-size-shape) * 0.625);
5115
5115
  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
5116
5116
  position: relative;
@@ -5238,10 +5238,10 @@
5238
5238
  position: absolute;
5239
5239
  background-color: var(--dt-color-neutral-white);
5240
5240
  border-radius: var(--avatar-border-radius);
5241
- opacity: 0.5;
5241
+ opacity: var(--dt-opacity-700);
5242
5242
  content: '';
5243
5243
  pointer-events: none;
5244
- inset: 0;
5244
+ inset: var(--dt-spacing-0);
5245
5245
  }
5246
5246
  .d-avatar__canvas {
5247
5247
  display: flex;
@@ -5333,7 +5333,7 @@
5333
5333
  }
5334
5334
  .d-avatar--clickable {
5335
5335
  --avatar-color-border: var(--dt-color-neutral-transparent);
5336
- padding: 0;
5336
+ padding: var(--dt-spacing-0);
5337
5337
  background-color: var(--dt-color-neutral-transparent);
5338
5338
  border: var(--dt-size-border-0) solid var(--avatar-color-border);
5339
5339
  border-radius: var(--avatar-border-radius);
@@ -5370,45 +5370,55 @@
5370
5370
  .d-avatar--xs,
5371
5371
  .d-avatar--size-100 {
5372
5372
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.25);
5373
+ --avatar-presence-position-right: var(--dt-spacing-0);
5374
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5373
5375
  --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");
5374
5376
  }
5375
5377
  .d-avatar--size-150 {
5376
5378
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.3125);
5377
5379
  --avatar-size-text: var(--dt-font-size-100);
5378
- --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");
5380
+ --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");
5379
5381
  }
5380
5382
  .d-avatar--sm,
5381
5383
  .d-avatar--size-200 {
5382
5384
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.375);
5383
5385
  --avatar-size-text: var(--dt-font-size-100);
5384
- --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");
5386
+ --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");
5385
5387
  }
5386
5388
  .d-avatar--size-250 {
5387
5389
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.4375);
5388
- --avatar-size-text: var(--dt-font-size-200);
5389
- --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");
5390
+ --avatar-size-text: var(--dt-font-size-125);
5391
+ --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");
5390
5392
  }
5391
5393
  .d-avatar--md,
5392
5394
  .d-avatar--size-300 {
5393
5395
  --avatar-size-text: var(--dt-font-size-200);
5394
- --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");
5396
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.328);
5397
+ --avatar-presence-position-right: var(--dt-spacing-1-negative);
5398
+ --avatar-presence-position-bottom: var(--dt-spacing-1-negative);
5399
+ --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");
5395
5400
  }
5396
5401
  .d-avatar--size-400 {
5397
5402
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.625);
5398
- --avatar-size-text: var(--dt-font-size-200);
5399
- --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");
5403
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
5404
+ --avatar-size-text: var(--dt-font-size-250);
5405
+ --avatar-presence-position-right: var(--dt-spacing-0);
5406
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5407
+ --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");
5400
5408
  }
5401
5409
  .d-avatar--lg,
5402
5410
  .d-avatar--size-500 {
5403
5411
  --avatar-size-shape: calc(var(--dt-layout-100) * 0.75);
5412
+ --avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
5404
5413
  --avatar-size-text: var(--dt-font-size-300);
5405
- --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");
5414
+ --avatar-presence-position-right: var(--dt-spacing-0);
5415
+ --avatar-presence-position-bottom: var(--dt-spacing-0);
5416
+ --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");
5406
5417
  }
5407
5418
  .d-avatar--xl,
5408
5419
  .d-avatar--size-600 {
5409
5420
  --avatar-size-shape: var(--dt-layout-100);
5410
5421
  --avatar-size-text: var(--dt-font-size-350);
5411
- --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");
5412
5422
  }
5413
5423
  .d-avatar--size-700 {
5414
5424
  --avatar-size-shape: var(--dt-layout-150);
@@ -10784,7 +10794,7 @@
10784
10794
  .d-emoji-picker__alignment {
10785
10795
  box-sizing: content-box !important;
10786
10796
  inline-size: auto;
10787
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
10797
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
10788
10798
  margin: 0 var(--dt-spacing-200);
10789
10799
  }
10790
10800
  .d-emoji-picker--footer {
@@ -10803,6 +10813,7 @@
10803
10813
  }
10804
10814
  .d-emoji-picker__tabset-list {
10805
10815
  gap: var(--dt-spacing-0);
10816
+ --tablist-padding-bottom: var(--dt-spacing-0);
10806
10817
  }
10807
10818
  .d-emoji-picker__tabset-list::after {
10808
10819
  background-color: var(--dt-color-neutral-transparent) !important;
@@ -10857,7 +10868,7 @@
10857
10868
  border-color: var(--dt-color-border-subtle);
10858
10869
  }
10859
10870
  .d-emoji-picker__selector {
10860
- min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
10871
+ min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
10861
10872
  }
10862
10873
  .d-emoji-picker__selector p {
10863
10874
  -webkit-padding-after: var(--dt-spacing-50);
@@ -10877,7 +10888,7 @@
10877
10888
  .d-emoji-picker__list {
10878
10889
  position: relative;
10879
10890
  block-size: 100%;
10880
- max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
10891
+ max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
10881
10892
  -webkit-padding-after: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
10882
10893
  padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
10883
10894
  overflow: hidden auto;
@@ -10899,7 +10910,7 @@
10899
10910
  flex-wrap: wrap;
10900
10911
  gap: var(--dt-spacing-25);
10901
10912
  inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
10902
- max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
10913
+ max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
10903
10914
  -webkit-margin-start: var(--dt-spacing-75-negative);
10904
10915
  margin-inline-start: var(--dt-spacing-75-negative);
10905
10916
  -webkit-padding-before: var(--dt-spacing-50);