@dialpad/dialtone-css 8.71.0 → 8.71.4

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 (20) hide show
  1. package/lib/build/less/components/banner.less +4 -1
  2. package/lib/build/less/components/card.less +2 -1
  3. package/lib/build/less/components/modal.less +5 -0
  4. package/lib/build/less/recipes/motion_text.less +2 -2
  5. package/lib/build/less/utilities/flex.less +11 -12
  6. package/lib/dist/dialtone-default-theme.css +32 -15
  7. package/lib/dist/dialtone-default-theme.min.css +1 -1
  8. package/lib/dist/dialtone.css +32 -15
  9. package/lib/dist/dialtone.min.css +1 -1
  10. package/lib/dist/tokens/tokens-botany-dark.css +1 -1
  11. package/lib/dist/tokens/tokens-buttercream-dark.css +1 -1
  12. package/lib/dist/tokens/tokens-deca-light.css +3 -3
  13. package/lib/dist/tokens/tokens-dp-dark.css +1 -1
  14. package/lib/dist/tokens/tokens-expressive-dark.css +1 -1
  15. package/lib/dist/tokens/tokens-expressive-sm-dark.css +1 -1
  16. package/lib/dist/tokens/tokens-high-desert-dark.css +1 -1
  17. package/lib/dist/tokens/tokens-plum-dark.css +1 -1
  18. package/lib/dist/tokens/tokens-sunflower-dark.css +1 -1
  19. package/lib/dist/tokens/tokens-tmo-dark.css +2 -2
  20. package/package.json +6 -1
package/lib/build/less/components/banner.less CHANGED
@@ -55,7 +55,6 @@
55
55
  display: flex;
56
56
  align-items: center;
57
57
  width: 100%;
58
- max-width: 128rem;
59
58
  min-height: 100%;
60
59
  margin: 0 auto;
61
60
  padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
@@ -65,6 +64,10 @@
65
64
  gap: var(--dt-space-300);
66
65
  align-items: baseline;
67
66
  }
67
+
68
+ .d-notice__message {
69
+ font-size: var(--dt-font-size-200) !important;
70
+ }
68
71
  }
69
72
 
70
73
  // ============================================================================
package/lib/build/less/components/card.less CHANGED
@@ -22,7 +22,8 @@
22
22
  flex-direction: column;
23
23
  justify-content: center;
24
24
  background: var(--dt-color-surface-primary);
25
- border-radius: var(--dt-size-300);
25
+ border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
26
+ border-radius: var(--dt-size-radius-300);
26
27
  box-shadow: var(--dt-shadow-card);
27
28
  }
28
29
 
package/lib/build/less/components/modal.less CHANGED
@@ -91,6 +91,11 @@
91
91
  visibility: hidden;
92
92
  opacity: 0;
93
93
  will-change: visibility, z-index, opacity, transform;
94
+
95
+ // unique non-compliant case where a modal is nested within another
96
+ &:has(.d-modal) {
97
+ background-clip: padding-box;
98
+ }
94
99
  }
95
100
 
96
101
  // $$ MAKE THEM APPEAR
package/lib/build/less/recipes/motion_text.less CHANGED
@@ -75,13 +75,13 @@
75
75
  }
76
76
 
77
77
  .dt-recipe-motion-text__char {
78
- display: inline-block;
78
+ display: inline;
79
79
  white-space: pre;
80
80
  }
81
81
 
82
82
  .dt-recipe-motion-text__word {
83
83
  position: relative;
84
- display: inline;
84
+ display: inline-block;
85
85
  white-space: nowrap;
86
86
  }
87
87
 
package/lib/build/less/utilities/flex.less CHANGED
@@ -23,8 +23,8 @@
23
23
  // has more than one line.
24
24
  // ----------------------------------------------------------------------------
25
25
  .d-ac-center { align-content: center !important; }
26
- .d-ac-flex-end { align-content: flex-end !important; }
27
- .d-ac-flex-start { align-content: flex-start !important; }
26
+ .d-ac-flex-end, .d-ac-end { align-content: flex-end !important; }
27
+ .d-ac-flex-start, .d-ac-start { align-content: flex-start !important; }
28
28
  .d-ac-space-around { align-content: space-around !important; }
29
29
  .d-ac-space-between { align-content: space-between !important; }
30
30
  .d-ac-space-evenly { align-content: space-evenly !important; }
@@ -41,8 +41,8 @@
41
41
  // justify-content.
42
42
  // ----------------------------------------------------------------------------
43
43
  .d-ai-center { align-items: center !important; }
44
- .d-ai-flex-end { align-items: flex-end !important; }
45
- .d-ai-flex-start { align-items: flex-start !important; }
44
+ .d-ai-flex-end, .d-ai-end { align-items: flex-end !important; }
45
+ .d-ai-flex-start, .d-ai-start { align-items: flex-start !important; }
46
46
  .d-ai-baseline { align-items: baseline !important; }
47
47
  .d-ai-stretch { align-items: stretch !important; }
48
48
  .d-ai-normal { align-items: normal !important; }
@@ -55,15 +55,14 @@
55
55
  // of the parent's main axis direction.
56
56
  // ----------------------------------------------------------------------------
57
57
  .d-as-center { align-self: center !important; }
58
- .d-as-flex-end { align-self: flex-end !important; }
59
- .d-as-flex-start { align-self: flex-start !important; }
58
+ .d-as-flex-end, .d-as-end { align-self: flex-end !important; }
59
+ .d-as-flex-start, .d-as-start { align-self: flex-start !important; }
60
60
  .d-as-baseline { align-self: baseline !important; }
61
61
  .d-as-stretch { align-self: stretch !important; }
62
62
  .d-as-auto { align-self: auto !important; }
63
63
  .d-as-normal { align-self: normal !important; }
64
64
  .d-as-unset { align-self: unset !important; }
65
65
 
66
-
67
66
  // ============================================================================
68
67
  // $ COLUMNS & LAYOUTS
69
68
  // ----------------------------------------------------------------------------
@@ -185,11 +184,11 @@
185
184
  // Defines the child alignment along the parent's main axis
186
185
  // ----------------------------------------------------------------------------
187
186
  .d-jc-center { justify-content: center !important; }
188
- .d-jc-flex-end { justify-content: flex-end !important; }
189
- .d-jc-flex-start { justify-content: flex-start !important; }
190
- .d-jc-space-around { justify-content: space-around !important; }
191
- .d-jc-space-between { justify-content: space-between !important; }
192
- .d-jc-space-evenly { justify-content: space-evenly !important; }
187
+ .d-jc-flex-end, .d-jc-end { justify-content: flex-end !important; }
188
+ .d-jc-flex-start, .d-jc-start { justify-content: flex-start !important; }
189
+ .d-jc-space-around, .d-jc-around { justify-content: space-around !important; }
190
+ .d-jc-space-between, .d-jc-between { justify-content: space-between !important; }
191
+ .d-jc-space-evenly, .d-jc-evenly { justify-content: space-evenly !important; }
193
192
  .d-jc-baseline { justify-content: baseline !important; }
194
193
  .d-jc-normal { justify-content: normal !important; }
195
194
  .d-jc-unset { justify-content: unset !important; }
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -2202,7 +2202,8 @@ template {
2202
2202
  flex-direction: column;
2203
2203
  justify-content: center;
2204
2204
  background: var(--dt-color-surface-primary);
2205
- border-radius: var(--dt-size-300);
2205
+ border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
2206
+ border-radius: var(--dt-size-radius-300);
2206
2207
  box-shadow: var(--dt-shadow-card);
2207
2208
  }
2208
2209
  .d-card__header {
@@ -3610,6 +3611,9 @@ legend .d-label--md {
3610
3611
  opacity: 0;
3611
3612
  will-change: visibility, z-index, opacity, transform;
3612
3613
  }
3614
+ .d-modal__dialog:has(.d-modal) {
3615
+ background-clip: padding-box;
3616
+ }
3613
3617
  .d-modal[aria-hidden='false'],
3614
3618
  .d-modal[aria-hidden='false'] .d-modal__dialog,
3615
3619
  .d-modal--transparent[aria-hidden='false'],
@@ -4127,7 +4131,6 @@ legend .d-label--md {
4127
4131
  display: flex;
4128
4132
  align-items: center;
4129
4133
  width: 100%;
4130
- max-width: 128rem;
4131
4134
  min-height: 100%;
4132
4135
  margin: 0 auto;
4133
4136
  padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
@@ -4137,6 +4140,9 @@ legend .d-label--md {
4137
4140
  gap: var(--dt-space-300);
4138
4141
  align-items: baseline;
4139
4142
  }
4143
+ .d-banner__dialog .d-notice__message {
4144
+ font-size: var(--dt-font-size-200) !important;
4145
+ }
4140
4146
  .d-banner.d-banner--important {
4141
4147
  --banner-color-border: transparent;
4142
4148
  }
@@ -6582,10 +6588,12 @@ legend .d-label--md {
6582
6588
  .d-ac-center {
6583
6589
  align-content: center !important;
6584
6590
  }
6585
- .d-ac-flex-end {
6591
+ .d-ac-flex-end,
6592
+ .d-ac-end {
6586
6593
  align-content: flex-end !important;
6587
6594
  }
6588
- .d-ac-flex-start {
6595
+ .d-ac-flex-start,
6596
+ .d-ac-start {
6589
6597
  align-content: flex-start !important;
6590
6598
  }
6591
6599
  .d-ac-space-around {
@@ -6612,10 +6620,12 @@ legend .d-label--md {
6612
6620
  .d-ai-center {
6613
6621
  align-items: center !important;
6614
6622
  }
6615
- .d-ai-flex-end {
6623
+ .d-ai-flex-end,
6624
+ .d-ai-end {
6616
6625
  align-items: flex-end !important;
6617
6626
  }
6618
- .d-ai-flex-start {
6627
+ .d-ai-flex-start,
6628
+ .d-ai-start {
6619
6629
  align-items: flex-start !important;
6620
6630
  }
6621
6631
  .d-ai-baseline {
@@ -6633,10 +6643,12 @@ legend .d-label--md {
6633
6643
  .d-as-center {
6634
6644
  align-self: center !important;
6635
6645
  }
6636
- .d-as-flex-end {
6646
+ .d-as-flex-end,
6647
+ .d-as-end {
6637
6648
  align-self: flex-end !important;
6638
6649
  }
6639
- .d-as-flex-start {
6650
+ .d-as-flex-start,
6651
+ .d-as-start {
6640
6652
  align-self: flex-start !important;
6641
6653
  }
6642
6654
  .d-as-baseline {
@@ -6828,19 +6840,24 @@ legend .d-label--md {
6828
6840
  .d-jc-center {
6829
6841
  justify-content: center !important;
6830
6842
  }
6831
- .d-jc-flex-end {
6843
+ .d-jc-flex-end,
6844
+ .d-jc-end {
6832
6845
  justify-content: flex-end !important;
6833
6846
  }
6834
- .d-jc-flex-start {
6847
+ .d-jc-flex-start,
6848
+ .d-jc-start {
6835
6849
  justify-content: flex-start !important;
6836
6850
  }
6837
- .d-jc-space-around {
6851
+ .d-jc-space-around,
6852
+ .d-jc-around {
6838
6853
  justify-content: space-around !important;
6839
6854
  }
6840
- .d-jc-space-between {
6855
+ .d-jc-space-between,
6856
+ .d-jc-between {
6841
6857
  justify-content: space-between !important;
6842
6858
  }
6843
- .d-jc-space-evenly {
6859
+ .d-jc-space-evenly,
6860
+ .d-jc-evenly {
6844
6861
  justify-content: space-evenly !important;
6845
6862
  }
6846
6863
  .d-jc-baseline {
@@ -10167,12 +10184,12 @@ ul {
10167
10184
  display: contents;
10168
10185
  }
10169
10186
  .dt-recipe-motion-text__char {
10170
- display: inline-block;
10187
+ display: inline;
10171
10188
  white-space: pre;
10172
10189
  }
10173
10190
  .dt-recipe-motion-text__word {
10174
10191
  position: relative;
10175
- display: inline;
10192
+ display: inline-block;
10176
10193
  white-space: nowrap;
10177
10194
  }
10178
10195
  @-webkit-keyframes dt-recipe-motion-text-gradient-in-char-appear {