@dialpad/dialtone-css 8.34.0 → 8.35.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 (5) hide show
  1. package/lib/build/less/components/empty-state.less +33 -28
  2. package/lib/build/less/utilities/typography.less +14 -0
  3. package/lib/dist/dialtone.css +51 -25
  4. package/lib/dist/dialtone.min.css +1 -1
  5. package/package.json +1 -1
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
@@ -1889,38 +1889,37 @@ template {
1889
1889
  flex-direction: column;
1890
1890
  align-items: center;
1891
1891
  justify-content: center;
1892
+ width: 100%;
1893
+ padding: var(--dt-space-600);
1892
1894
  text-align: center;
1893
- margin: 0 auto;
1894
1895
  }
1895
- .d-empty-state--size-sm {
1896
- width: 50%;
1897
- padding: var(--dt-space-500);
1898
- }
1899
- .d-empty-state--size-sm h1 {
1900
- font: var(--dt-typography-headline-md);
1896
+ .d-empty-state__icon {
1897
+ color: var(--dt-color-foreground-tertiary);
1898
+ line-height: 0;
1901
1899
  }
1902
- .d-empty-state--size-sm p {
1903
- font: var(--dt-typography-body-sm);
1900
+ .d-empty-state__illustration {
1901
+ line-height: 0;
1904
1902
  }
1905
- .d-empty-state--size-md {
1906
- width: 70%;
1907
- padding: var(--dt-space-500);
1903
+ .d-empty-state__content {
1904
+ padding: var(--dt-space-600) 0;
1908
1905
  }
1909
- .d-empty-state--size-md h1 {
1910
- font: var(--dt-typography-headline-xl);
1906
+ .d-empty-state__content--sm {
1907
+ padding: var(--dt-space-500) 0;
1911
1908
  }
1912
- .d-empty-state--size-md p {
1913
- font: var(--dt-typography-body-sm);
1909
+ .d-empty-state__header-text {
1910
+ text-wrap: balance;
1914
1911
  }
1915
- .d-empty-state--size-lg {
1916
- width: 100%;
1917
- padding: var(--dt-space-600);
1912
+ .d-empty-state__body-text {
1913
+ color: var(--dt-color-foreground-secondary);
1914
+ text-wrap: balance;
1918
1915
  }
1919
- .d-empty-state--size-lg h1 {
1920
- font: var(--dt-typography-headline-xxl);
1916
+ .d-empty-state--size-sm {
1917
+ width: var(--dt-size-50-percent);
1918
+ padding: var(--dt-space-500);
1921
1919
  }
1922
- .d-empty-state--size-lg p {
1923
- font: var(--dt-typography-body-md);
1920
+ .d-empty-state--size-md {
1921
+ width: var(--dt-size-70-percent);
1922
+ padding: var(--dt-space-500);
1924
1923
  }
1925
1924
  fieldset {
1926
1925
  min-width: 0;
@@ -7456,6 +7455,33 @@ ul {
7456
7455
  white-space: nowrap !important;
7457
7456
  text-overflow: ellipsis !important;
7458
7457
  }
7458
+ .d-fvn-normal {
7459
+ font-variant-numeric: normal !important;
7460
+ }
7461
+ .d-fvn-ordinal {
7462
+ font-variant-numeric: ordinal !important;
7463
+ }
7464
+ .d-fvn-slashed-zero {
7465
+ font-variant-numeric: slashed-zero !important;
7466
+ }
7467
+ .d-fvn-lining {
7468
+ font-variant-numeric: lining-nums !important;
7469
+ }
7470
+ .d-fvn-proportional {
7471
+ font-variant-numeric: proportional-nums !important;
7472
+ }
7473
+ .d-fvn-tabular {
7474
+ font-variant-numeric: tabular-nums !important;
7475
+ }
7476
+ .d-fvn-diagonal {
7477
+ font-variant-numeric: diagonal-fractions !important;
7478
+ }
7479
+ .d-fvn-stacked {
7480
+ font-variant-numeric: stacked-fractions !important;
7481
+ }
7482
+ .d-fvn-unset {
7483
+ font-variant-numeric: unset !important;
7484
+ }
7459
7485
  @font-face {
7460
7486
  font-weight: 400;
7461
7487
  font-family: Archivo;
@@ -7561,7 +7587,7 @@ body {
7561
7587
  }
7562
7588
  /**
7563
7589
  * Do not edit directly
7564
- * Generated on Fri, 31 May 2024 23:05:48 GMT
7590
+ * Generated on Fri, 07 Jun 2024 22:29:04 GMT
7565
7591
  */
7566
7592
 
7567
7593
  .dialtone-theme-light {
@@ -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 Fri, 07 Jun 2024 22:29:05 GMT
8382
8408
  */
8383
8409
 
8384
8410
  .dialtone-theme-dark {