@dialpad/dialtone-css 8.34.0 → 8.36.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 (7) hide show
  1. package/lib/build/less/components/badge.less +4 -9
  2. package/lib/build/less/components/chip.less +4 -4
  3. package/lib/build/less/components/empty-state.less +33 -28
  4. package/lib/build/less/utilities/typography.less +14 -0
  5. package/lib/dist/dialtone.css +77 -47
  6. package/lib/dist/dialtone.min.css +1 -1
  7. package/package.json +2 -2
package/lib/build/less/components/badge.less CHANGED
@@ -22,7 +22,7 @@
22
22
  // --------------------------------------------------------------------------
23
23
  --badge-color-text: var(--dt-badge-color-foreground-default);
24
24
  --badge-color-background: var(--dt-badge-color-background-default);
25
- --badge-color-outline: var(--dt-color-border-subtle);
25
+ --badge-color-outline: var(--dt-badge-color-border-default);
26
26
  --badge-radius: var(--dt-size-300);
27
27
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
28
28
  --badge-font-size: var(--dt-font-size-100);
@@ -85,14 +85,9 @@
85
85
  --badge-color-background: var(--dt-badge-color-background-bulletin);
86
86
 
87
87
  &.d-badge--subtle {
88
- --badge-color-text: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 40%));
89
- --badge-color-background: hsla(var(--primary-color-hsl) / 0.1);
90
- --badge-color-outline: hsla(var(--primary-color-hsl) / 0.5);
91
-
92
- .dialtone-theme-dark & {
93
- --badge-color-text: var(--dt-color-foreground-primary);
94
- --badge-color-background: hsla(var(--primary-color-hsl) / 0.6);
95
- }
88
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
89
+ --badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
90
+ --badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
96
91
  }
97
92
  }
98
93
 
package/lib/build/less/components/chip.less CHANGED
@@ -30,6 +30,7 @@
30
30
  align-items: center;
31
31
  justify-content: center;
32
32
  box-sizing: border-box;
33
+ max-width: var(--dt-size-100-percent);
33
34
  padding: var(--dt-space-300) var(--dt-space-400);
34
35
  color: var(--chip-color-text);
35
36
  font-size: var(--dt-font-size-200);
@@ -38,10 +39,9 @@
38
39
  background-color: var(--chip-color-background);
39
40
  border: none;
40
41
  border-radius: var(--chip-border-radius);
41
- transition-timing-function: var(--ttf-in-out);
42
+ transition-timing-function: var(--ttf-out-quint);
42
43
  transition-duration: var(--td200);
43
44
  transition-property: background-color;
44
- max-width: var(--dt-size-100-percent);
45
45
 
46
46
  // Reserves space within the chip for the close button, since the close button is
47
47
  // not nested within the chip. Only apply if close button exists (more than one child).
@@ -61,13 +61,13 @@
61
61
  cursor: pointer;
62
62
 
63
63
  &:hover {
64
- --chip-color-background: var(--dt-color-black-300);
64
+ --chip-color-background: var(--dt-color-surface-bold-opaque);
65
65
 
66
66
  text-decoration: none;
67
67
  }
68
68
 
69
69
  &:active {
70
- --chip-color-background: var(--dt-color-black-400);
70
+ --chip-color-background: var(--dt-color-surface-moderate-opaque);
71
71
  }
72
72
 
73
73
  &:focus-visible {
package/lib/build/less/components/empty-state.less CHANGED
@@ -15,42 +15,47 @@
15
15
  flex-direction: column;
16
16
  align-items: center;
17
17
  justify-content: center;
18
+ width: 100%;
19
+ padding: var(--dt-space-600);
18
20
  text-align: center;
19
- margin: 0 auto;
20
21
 
21
- &--size-sm {
22
- width: 50%;
23
- padding: var(--dt-space-500);
22
+ &__icon {
23
+ color: var(--dt-color-foreground-tertiary);
24
+ line-height: 0;
25
+ }
24
26
 
25
- h1{
26
- font: var(--dt-typography-headline-md);
27
- }
28
- p{
29
- font: var(--dt-typography-body-sm);
30
- }
27
+ &__illustration {
28
+ line-height: 0;
31
29
  }
32
30
 
33
- &--size-md {
34
- width: 70%;
35
- padding: var(--dt-space-500);
31
+ &__content {
32
+ padding: var(--dt-space-600) 0;
33
+ }
36
34
 
37
- h1{
38
- font: var(--dt-typography-headline-xl);
39
- }
40
- p{
41
- font: var(--dt-typography-body-sm);
42
- }
35
+ &__content--sm {
36
+ padding: var(--dt-space-500) 0;
43
37
  }
44
38
 
45
- &--size-lg {
46
- width: 100%;
47
- padding: var(--dt-space-600);
39
+ &__content--md {}
40
+
41
+ &__content--lg {}
42
+
43
+ &__header-text {
44
+ text-wrap: balance;
45
+ }
48
46
 
49
- h1{
50
- font: var(--dt-typography-headline-xxl);
51
- }
52
- p{
53
- font: var(--dt-typography-body-md);
54
- }
47
+ &__body-text {
48
+ color: var(--dt-color-foreground-secondary);
49
+ text-wrap: balance;
50
+ }
51
+
52
+ &--size-sm {
53
+ width: var(--dt-size-50-percent);
54
+ padding: var(--dt-space-500);
55
+ }
56
+
57
+ &--size-md {
58
+ width: var(--dt-size-70-percent);
59
+ padding: var(--dt-space-500);
55
60
  }
56
61
  }
package/lib/build/less/utilities/typography.less CHANGED
@@ -22,6 +22,7 @@
22
22
  // • WHITESPACE
23
23
  // • WORD-BREAK
24
24
  // • WORD-WRAP
25
+ // • FONT VARIANT NUMERIC
25
26
  //
26
27
  // ============================================================================
27
28
  // $ FONT FAMILY
@@ -443,3 +444,16 @@ ul {
443
444
  white-space: nowrap !important;
444
445
  text-overflow: ellipsis !important;
445
446
  }
447
+
448
+ // ============================================================================
449
+ // $$ FONT VARIANT NUMERIC
450
+ // ----------------------------------------------------------------------------
451
+ .d-fvn-normal { font-variant-numeric: normal !important; }
452
+ .d-fvn-ordinal { font-variant-numeric: ordinal !important; }
453
+ .d-fvn-slashed-zero { font-variant-numeric: slashed-zero !important; }
454
+ .d-fvn-lining { font-variant-numeric: lining-nums !important; }
455
+ .d-fvn-proportional { font-variant-numeric: proportional-nums !important; }
456
+ .d-fvn-tabular { font-variant-numeric: tabular-nums !important; }
457
+ .d-fvn-diagonal { font-variant-numeric: diagonal-fractions !important; }
458
+ .d-fvn-stacked { font-variant-numeric: stacked-fractions !important; }
459
+ .d-fvn-unset { font-variant-numeric: unset !important; }
package/lib/dist/dialtone.css CHANGED
@@ -736,7 +736,7 @@ template {
736
736
  .d-badge {
737
737
  --badge-color-text: var(--dt-badge-color-foreground-default);
738
738
  --badge-color-background: var(--dt-badge-color-background-default);
739
- --badge-color-outline: var(--dt-color-border-subtle);
739
+ --badge-color-outline: var(--dt-badge-color-border-default);
740
740
  --badge-radius: var(--dt-size-300);
741
741
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
742
742
  --badge-font-size: var(--dt-font-size-100);
@@ -787,13 +787,9 @@ template {
787
787
  --badge-color-background: var(--dt-badge-color-background-bulletin);
788
788
  }
789
789
  .d-badge--bulletin.d-badge--subtle {
790
- --badge-color-text: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 40%));
791
- --badge-color-background: hsla(var(--primary-color-hsl) / 0.1);
792
- --badge-color-outline: hsla(var(--primary-color-hsl) / 0.5);
793
- }
794
- .dialtone-theme-dark .d-badge--bulletin.d-badge--subtle {
795
- --badge-color-text: var(--dt-color-foreground-primary);
796
- --badge-color-background: hsla(var(--primary-color-hsl) / 0.6);
790
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
791
+ --badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
792
+ --badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
797
793
  }
798
794
  .d-badge--ai {
799
795
  --badge-color-text: var(--dt-badge-color-foreground-bulletin);
@@ -1362,6 +1358,7 @@ template {
1362
1358
  align-items: center;
1363
1359
  justify-content: center;
1364
1360
  box-sizing: border-box;
1361
+ max-width: var(--dt-size-100-percent);
1365
1362
  padding: var(--dt-space-300) var(--dt-space-400);
1366
1363
  color: var(--chip-color-text);
1367
1364
  font-size: var(--dt-font-size-200);
@@ -1370,10 +1367,9 @@ template {
1370
1367
  background-color: var(--chip-color-background);
1371
1368
  border: none;
1372
1369
  border-radius: var(--chip-border-radius);
1373
- transition-timing-function: var(--ttf-in-out);
1370
+ transition-timing-function: var(--ttf-out-quint);
1374
1371
  transition-duration: var(--td200);
1375
1372
  transition-property: background-color;
1376
- max-width: var(--dt-size-100-percent);
1377
1373
  }
1378
1374
  .d-chip__label:not(:only-child)::after {
1379
1375
  flex-shrink: 0;
@@ -1392,14 +1388,14 @@ template {
1392
1388
  .d-chip__label:is(button):hover,
1393
1389
  .d-chip__label:is([role='button']):hover,
1394
1390
  .d-chip__label:is([role='link']):hover {
1395
- --chip-color-background: var(--dt-color-black-300);
1391
+ --chip-color-background: var(--dt-color-surface-bold-opaque);
1396
1392
  text-decoration: none;
1397
1393
  }
1398
1394
  .d-chip__label:is(a):active,
1399
1395
  .d-chip__label:is(button):active,
1400
1396
  .d-chip__label:is([role='button']):active,
1401
1397
  .d-chip__label:is([role='link']):active {
1402
- --chip-color-background: var(--dt-color-black-400);
1398
+ --chip-color-background: var(--dt-color-surface-moderate-opaque);
1403
1399
  }
1404
1400
  .d-chip__label:is(a):focus-visible,
1405
1401
  .d-chip__label:is(button):focus-visible,
@@ -1889,38 +1885,37 @@ template {
1889
1885
  flex-direction: column;
1890
1886
  align-items: center;
1891
1887
  justify-content: center;
1888
+ width: 100%;
1889
+ padding: var(--dt-space-600);
1892
1890
  text-align: center;
1893
- margin: 0 auto;
1894
1891
  }
1895
- .d-empty-state--size-sm {
1896
- width: 50%;
1897
- padding: var(--dt-space-500);
1892
+ .d-empty-state__icon {
1893
+ color: var(--dt-color-foreground-tertiary);
1894
+ line-height: 0;
1898
1895
  }
1899
- .d-empty-state--size-sm h1 {
1900
- font: var(--dt-typography-headline-md);
1896
+ .d-empty-state__illustration {
1897
+ line-height: 0;
1901
1898
  }
1902
- .d-empty-state--size-sm p {
1903
- font: var(--dt-typography-body-sm);
1899
+ .d-empty-state__content {
1900
+ padding: var(--dt-space-600) 0;
1904
1901
  }
1905
- .d-empty-state--size-md {
1906
- width: 70%;
1907
- padding: var(--dt-space-500);
1902
+ .d-empty-state__content--sm {
1903
+ padding: var(--dt-space-500) 0;
1908
1904
  }
1909
- .d-empty-state--size-md h1 {
1910
- font: var(--dt-typography-headline-xl);
1905
+ .d-empty-state__header-text {
1906
+ text-wrap: balance;
1911
1907
  }
1912
- .d-empty-state--size-md p {
1913
- font: var(--dt-typography-body-sm);
1914
- }
1915
- .d-empty-state--size-lg {
1916
- width: 100%;
1917
- padding: var(--dt-space-600);
1908
+ .d-empty-state__body-text {
1909
+ color: var(--dt-color-foreground-secondary);
1910
+ text-wrap: balance;
1918
1911
  }
1919
- .d-empty-state--size-lg h1 {
1920
- font: var(--dt-typography-headline-xxl);
1912
+ .d-empty-state--size-sm {
1913
+ width: var(--dt-size-50-percent);
1914
+ padding: var(--dt-space-500);
1921
1915
  }
1922
- .d-empty-state--size-lg p {
1923
- font: var(--dt-typography-body-md);
1916
+ .d-empty-state--size-md {
1917
+ width: var(--dt-size-70-percent);
1918
+ padding: var(--dt-space-500);
1924
1919
  }
1925
1920
  fieldset {
1926
1921
  min-width: 0;
@@ -7456,6 +7451,33 @@ ul {
7456
7451
  white-space: nowrap !important;
7457
7452
  text-overflow: ellipsis !important;
7458
7453
  }
7454
+ .d-fvn-normal {
7455
+ font-variant-numeric: normal !important;
7456
+ }
7457
+ .d-fvn-ordinal {
7458
+ font-variant-numeric: ordinal !important;
7459
+ }
7460
+ .d-fvn-slashed-zero {
7461
+ font-variant-numeric: slashed-zero !important;
7462
+ }
7463
+ .d-fvn-lining {
7464
+ font-variant-numeric: lining-nums !important;
7465
+ }
7466
+ .d-fvn-proportional {
7467
+ font-variant-numeric: proportional-nums !important;
7468
+ }
7469
+ .d-fvn-tabular {
7470
+ font-variant-numeric: tabular-nums !important;
7471
+ }
7472
+ .d-fvn-diagonal {
7473
+ font-variant-numeric: diagonal-fractions !important;
7474
+ }
7475
+ .d-fvn-stacked {
7476
+ font-variant-numeric: stacked-fractions !important;
7477
+ }
7478
+ .d-fvn-unset {
7479
+ font-variant-numeric: unset !important;
7480
+ }
7459
7481
  @font-face {
7460
7482
  font-weight: 400;
7461
7483
  font-family: Archivo;
@@ -7561,7 +7583,7 @@ body {
7561
7583
  }
7562
7584
  /**
7563
7585
  * Do not edit directly
7564
- * Generated on Fri, 31 May 2024 23:05:48 GMT
7586
+ * Generated on Tue, 11 Jun 2024 10:09:14 GMT
7565
7587
  */
7566
7588
 
7567
7589
  .dialtone-theme-light {
@@ -8343,9 +8365,13 @@ body {
8343
8365
  --dt-badge-color-background-warning: #FFF4CC;
8344
8366
  --dt-badge-color-background-critical: #FFE5E6;
8345
8367
  --dt-badge-color-background-bulletin: #7C52FF;
8368
+ --dt-badge-color-background-bulletin-subtle: hsl(255 100% 66.1% / 0.1);
8346
8369
  --dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
8347
8370
  --dt-badge-color-foreground-default: #000000;
8348
8371
  --dt-badge-color-foreground-bulletin: #ffffff;
8372
+ --dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
8373
+ --dt-badge-color-border-default: hsl(0 0% 0% / 0.1);
8374
+ --dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
8349
8375
  --dt-checkbox-size-width: 1.6rem;
8350
8376
  --dt-checkbox-size-height: 1.6rem;
8351
8377
  --dt-checkbox-size-radius: 0.4rem;
@@ -8378,7 +8404,7 @@ body {
8378
8404
 
8379
8405
  /**
8380
8406
  * Do not edit directly
8381
- * Generated on Fri, 31 May 2024 23:05:49 GMT
8407
+ * Generated on Tue, 11 Jun 2024 10:09:14 GMT
8382
8408
  */
8383
8409
 
8384
8410
  .dialtone-theme-dark {
@@ -9280,9 +9306,13 @@ body {
9280
9306
  --dt-badge-color-background-warning: #815008;
9281
9307
  --dt-badge-color-background-critical: #5B0505;
9282
9308
  --dt-badge-color-background-bulletin: #7C52FF;
9309
+ --dt-badge-color-background-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
9283
9310
  --dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
9284
9311
  --dt-badge-color-foreground-default: #E6E6E6;
9285
9312
  --dt-badge-color-foreground-bulletin: #ffffff;
9313
+ --dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
9314
+ --dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
9315
+ --dt-badge-color-border-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
9286
9316
  --dt-checkbox-size-width: 1.6rem;
9287
9317
  --dt-checkbox-size-height: 1.6rem;
9288
9318
  --dt-checkbox-size-radius: 0.4rem;
@@ -10810,43 +10840,43 @@ body {
10810
10840
  --fco: 0% !important;
10811
10841
  }
10812
10842
 
10813
- .d-bco-100, .h\:d-bco-100:hover, .f\:d-bco-100:focus, .f\:d-bco-100:focus-within, .fv\:d-bco-100:focus-visible {
10843
+ .d-bco100, .h\:d-bco100:hover, .f\:d-bco100:focus, .f\:d-bco100:focus-within, .fv\:d-bco100:focus-visible {
10814
10844
  --bco: 100% !important;
10815
10845
  }
10816
10846
 
10817
- .d-bco-99, .h\:d-bco-99:hover, .f\:d-bco-99:focus, .f\:d-bco-99:focus-within, .fv\:d-bco-99:focus-visible {
10847
+ .d-bco99, .h\:d-bco99:hover, .f\:d-bco99:focus, .f\:d-bco99:focus-within, .fv\:d-bco99:focus-visible {
10818
10848
  --bco: 99% !important;
10819
10849
  }
10820
10850
 
10821
- .d-bco-95, .h\:d-bco-95:hover, .f\:d-bco-95:focus, .f\:d-bco-95:focus-within, .fv\:d-bco-95:focus-visible {
10851
+ .d-bco95, .h\:d-bco95:hover, .f\:d-bco95:focus, .f\:d-bco95:focus-within, .fv\:d-bco95:focus-visible {
10822
10852
  --bco: 95% !important;
10823
10853
  }
10824
10854
 
10825
- .d-bco-90, .h\:d-bco-90:hover, .f\:d-bco-90:focus, .f\:d-bco-90:focus-within, .fv\:d-bco-90:focus-visible {
10855
+ .d-bco90, .h\:d-bco90:hover, .f\:d-bco90:focus, .f\:d-bco90:focus-within, .fv\:d-bco90:focus-visible {
10826
10856
  --bco: 90% !important;
10827
10857
  }
10828
10858
 
10829
- .d-bco-85, .h\:d-bco-85:hover, .f\:d-bco-85:focus, .f\:d-bco-85:focus-within, .fv\:d-bco-85:focus-visible {
10859
+ .d-bco85, .h\:d-bco85:hover, .f\:d-bco85:focus, .f\:d-bco85:focus-within, .fv\:d-bco85:focus-visible {
10830
10860
  --bco: 85% !important;
10831
10861
  }
10832
10862
 
10833
- .d-bco-75, .h\:d-bco-75:hover, .f\:d-bco-75:focus, .f\:d-bco-75:focus-within, .fv\:d-bco-75:focus-visible {
10863
+ .d-bco75, .h\:d-bco75:hover, .f\:d-bco75:focus, .f\:d-bco75:focus-within, .fv\:d-bco75:focus-visible {
10834
10864
  --bco: 75% !important;
10835
10865
  }
10836
10866
 
10837
- .d-bco-50, .h\:d-bco-50:hover, .f\:d-bco-50:focus, .f\:d-bco-50:focus-within, .fv\:d-bco-50:focus-visible {
10867
+ .d-bco50, .h\:d-bco50:hover, .f\:d-bco50:focus, .f\:d-bco50:focus-within, .fv\:d-bco50:focus-visible {
10838
10868
  --bco: 50% !important;
10839
10869
  }
10840
10870
 
10841
- .d-bco-25, .h\:d-bco-25:hover, .f\:d-bco-25:focus, .f\:d-bco-25:focus-within, .fv\:d-bco-25:focus-visible {
10871
+ .d-bco25, .h\:d-bco25:hover, .f\:d-bco25:focus, .f\:d-bco25:focus-within, .fv\:d-bco25:focus-visible {
10842
10872
  --bco: 25% !important;
10843
10873
  }
10844
10874
 
10845
- .d-bco-10, .h\:d-bco-10:hover, .f\:d-bco-10:focus, .f\:d-bco-10:focus-within, .fv\:d-bco-10:focus-visible {
10875
+ .d-bco10, .h\:d-bco10:hover, .f\:d-bco10:focus, .f\:d-bco10:focus-within, .fv\:d-bco10:focus-visible {
10846
10876
  --bco: 10% !important;
10847
10877
  }
10848
10878
 
10849
- .d-bco-0, .h\:d-bco-0:hover, .f\:d-bco-0:focus, .f\:d-bco-0:focus-within, .fv\:d-bco-0:focus-visible {
10879
+ .d-bco0, .h\:d-bco0:hover, .f\:d-bco0:focus, .f\:d-bco0:focus-within, .fv\:d-bco0:focus-visible {
10850
10880
  --bco: 0% !important;
10851
10881
  }
10852
10882