@dialpad/dialtone-css 8.52.0 → 8.53.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.
- package/lib/build/less/components/radio-checkbox.less +6 -0
- package/lib/build/less/components/toast.less +135 -0
- package/lib/dist/dialtone-default-theme.css +97 -0
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone.css +97 -0
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/tokens-docs.json +1 -1
- package/package.json +1 -1
|
@@ -159,6 +159,12 @@
|
|
|
159
159
|
cursor: pointer;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
+
.d-checkbox__messages,
|
|
163
|
+
.d-radio__messages {
|
|
164
|
+
margin-top: var(--dt-space-200-negative);
|
|
165
|
+
margin-left: var(--dt-space-550);
|
|
166
|
+
}
|
|
167
|
+
|
|
162
168
|
.d-checkbox__description {
|
|
163
169
|
display: flex;
|
|
164
170
|
box-sizing: border-box;
|
|
@@ -119,3 +119,138 @@
|
|
|
119
119
|
.d-toast--viewing {
|
|
120
120
|
--toast-color-background: var(--dt-color-surface-secondary);
|
|
121
121
|
}
|
|
122
|
+
|
|
123
|
+
// ============================================================================
|
|
124
|
+
// @ BASE STYLE
|
|
125
|
+
// ----------------------------------------------------------------------------
|
|
126
|
+
.d-toast-alternate {
|
|
127
|
+
// Component CSS Vars
|
|
128
|
+
// ------------------------------------------------------------------------
|
|
129
|
+
--toast-alternate-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
|
|
130
|
+
--toast-alternate-box-shadow: 0 0 0 var(--dt-size-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
|
|
131
|
+
--toast-alternate-color-background: var(--dt-color-surface-primary);
|
|
132
|
+
--toast-alternate-color-text: var(--dt-color-foreground-primary);
|
|
133
|
+
--toast-alternate-color-icon: var(--dt-color-foreground-muted);
|
|
134
|
+
--toast-alternate-font-color: var(--dt-color-foreground-tertiary);
|
|
135
|
+
--toast-alternate-font-size: var(--dt-font-size-200);
|
|
136
|
+
--toast-alternate-line-height: var(--dt-font-line-height-300);
|
|
137
|
+
--toast-alternate-border-radius: var(--dt-size-500);
|
|
138
|
+
--toast-alternate-border-color: var(--dt-color-border-subtle);
|
|
139
|
+
--toast-alternate-border-style: solid;
|
|
140
|
+
--toast-alternate-border-width: var(--dt-size-100);
|
|
141
|
+
|
|
142
|
+
z-index: var(--zi-notification);
|
|
143
|
+
|
|
144
|
+
// Base Styles
|
|
145
|
+
// ------------------------------------------------------------------------
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
box-sizing: border-box;
|
|
149
|
+
width: var(--dt-size-925);
|
|
150
|
+
padding: var(--dt-space-350) var(--dt-space-350) var(--dt-space-450) var(--dt-space-450);
|
|
151
|
+
color: var(--toast-alternate-color-text);
|
|
152
|
+
font-size: var(--toast-alternate-font-size);
|
|
153
|
+
line-height: var(--toast-alternate-line-height);
|
|
154
|
+
word-break: normal;
|
|
155
|
+
background-color: var(--toast-alternate-color-background);
|
|
156
|
+
border: var(--toast-alternate-border-width) var(--toast-alternate-border-style) var(--toast-alternate-border-color);
|
|
157
|
+
border-radius: var(--toast-alternate-border-radius);
|
|
158
|
+
box-shadow: var(--toast-alternate-box-shadow);
|
|
159
|
+
pointer-events: all;
|
|
160
|
+
|
|
161
|
+
// If there's a link in a toast, break the url so it wraps
|
|
162
|
+
> a {
|
|
163
|
+
word-break: break-all;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// If you want to hide and reveal the toast
|
|
167
|
+
&[aria-hidden='true'] {
|
|
168
|
+
visibility: hidden;
|
|
169
|
+
opacity: var(--dt-opacity-0);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&[aria-hidden='false'] {
|
|
173
|
+
visibility: visible;
|
|
174
|
+
opacity: var(--dt-opacity-1300);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.d-toast-layout-alternate__icon {
|
|
178
|
+
display: flex;
|
|
179
|
+
flex: 0 auto;
|
|
180
|
+
margin-right: var(--dt-space-300);
|
|
181
|
+
color: var(--toast-alternate-color-icon);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.d-notice__title {
|
|
185
|
+
color: var(--dt-color-foreground-tertiary);
|
|
186
|
+
font-weight: var(--dt-font-weight-normal);
|
|
187
|
+
font-size: var(--dt-font-size-100);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.d-notice__actions .base-button__button {
|
|
191
|
+
color: var(--dt-action-color-foreground-muted-default);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// ============================================================================
|
|
196
|
+
// $ CONTENT CONTAINER
|
|
197
|
+
// ----------------------------------------------------------------------------
|
|
198
|
+
.d-toast-alternate__content {
|
|
199
|
+
display: flex;
|
|
200
|
+
flex: 1 auto;
|
|
201
|
+
flex-direction: column;
|
|
202
|
+
margin-right: var(--dt-space-500);
|
|
203
|
+
color: var(--dt-color-foreground-primary);
|
|
204
|
+
font-weight: var(--dt-font-weight-normal);
|
|
205
|
+
font-size: var(--dt-font-size-200);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.d-toast-alternate__dialog {
|
|
209
|
+
position: relative;
|
|
210
|
+
align-items: center;
|
|
211
|
+
width: var(--dt-size-100-percent);
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
.d-notice__actions button:first-child {
|
|
215
|
+
margin-left: var(--dt-space-600); // 32
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.d-toast-alternate__header {
|
|
220
|
+
display: flex;
|
|
221
|
+
gap: var(--dt-space-200);
|
|
222
|
+
align-items: center;
|
|
223
|
+
color: var(--toast-alternate-font-color);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// $$ ERROR
|
|
227
|
+
// ----------------------------------------------------------------------------
|
|
228
|
+
.d-toast-alternate--error {
|
|
229
|
+
--toast-alternate-border-color: var(--dt-color-border-critical-subtle);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// $$ INFO
|
|
233
|
+
// ----------------------------------------------------------------------------
|
|
234
|
+
|
|
235
|
+
.d-toast-alternate--info {
|
|
236
|
+
--toast-alternate-border-color: var(--dt-color-border-subtle);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// $$ SUCCESS
|
|
240
|
+
// ----------------------------------------------------------------------------
|
|
241
|
+
.d-toast-alternate--success {
|
|
242
|
+
--toast-alternate-border-color: var(--dt-color-border-success-subtle);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
// $$ GRADIENT
|
|
246
|
+
// ----------------------------------------------------------------------------
|
|
247
|
+
.d-toast-alternate--gradient {
|
|
248
|
+
background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
|
|
249
|
+
var(--dt-color-border-ai) border-box;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
// $$ warning
|
|
253
|
+
// ----------------------------------------------------------------------------
|
|
254
|
+
.d-toast-alternate--warning {
|
|
255
|
+
--toast-alternate-border-color: var(--dt-color-border-warning-subtle);
|
|
256
|
+
}
|
|
@@ -3607,6 +3607,98 @@ legend .d-label--md {
|
|
|
3607
3607
|
.d-toast--viewing {
|
|
3608
3608
|
--toast-color-background: var(--dt-color-surface-secondary);
|
|
3609
3609
|
}
|
|
3610
|
+
.d-toast-alternate {
|
|
3611
|
+
--toast-alternate-color-shadow: hsla(var(--dt-color-black-900-hsl) / 0.15);
|
|
3612
|
+
--toast-alternate-box-shadow: 0 0 0 var(--dt-size-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-medium);
|
|
3613
|
+
--toast-alternate-color-background: var(--dt-color-surface-primary);
|
|
3614
|
+
--toast-alternate-color-text: var(--dt-color-foreground-primary);
|
|
3615
|
+
--toast-alternate-color-icon: var(--dt-color-foreground-muted);
|
|
3616
|
+
--toast-alternate-font-color: var(--dt-color-foreground-tertiary);
|
|
3617
|
+
--toast-alternate-font-size: var(--dt-font-size-200);
|
|
3618
|
+
--toast-alternate-line-height: var(--dt-font-line-height-300);
|
|
3619
|
+
--toast-alternate-border-radius: var(--dt-size-500);
|
|
3620
|
+
--toast-alternate-border-color: var(--dt-color-border-subtle);
|
|
3621
|
+
--toast-alternate-border-style: solid;
|
|
3622
|
+
--toast-alternate-border-width: var(--dt-size-100);
|
|
3623
|
+
z-index: var(--zi-notification);
|
|
3624
|
+
display: flex;
|
|
3625
|
+
align-items: center;
|
|
3626
|
+
box-sizing: border-box;
|
|
3627
|
+
width: var(--dt-size-925);
|
|
3628
|
+
padding: var(--dt-space-350) var(--dt-space-350) var(--dt-space-450) var(--dt-space-450);
|
|
3629
|
+
color: var(--toast-alternate-color-text);
|
|
3630
|
+
font-size: var(--toast-alternate-font-size);
|
|
3631
|
+
line-height: var(--toast-alternate-line-height);
|
|
3632
|
+
word-break: normal;
|
|
3633
|
+
background-color: var(--toast-alternate-color-background);
|
|
3634
|
+
border: var(--toast-alternate-border-width) var(--toast-alternate-border-style) var(--toast-alternate-border-color);
|
|
3635
|
+
border-radius: var(--toast-alternate-border-radius);
|
|
3636
|
+
box-shadow: var(--toast-alternate-box-shadow);
|
|
3637
|
+
pointer-events: all;
|
|
3638
|
+
}
|
|
3639
|
+
.d-toast-alternate > a {
|
|
3640
|
+
word-break: break-all;
|
|
3641
|
+
}
|
|
3642
|
+
.d-toast-alternate[aria-hidden='true'] {
|
|
3643
|
+
visibility: hidden;
|
|
3644
|
+
opacity: var(--dt-opacity-0);
|
|
3645
|
+
}
|
|
3646
|
+
.d-toast-alternate[aria-hidden='false'] {
|
|
3647
|
+
visibility: visible;
|
|
3648
|
+
opacity: var(--dt-opacity-1300);
|
|
3649
|
+
}
|
|
3650
|
+
.d-toast-alternate .d-toast-layout-alternate__icon {
|
|
3651
|
+
display: flex;
|
|
3652
|
+
flex: 0 auto;
|
|
3653
|
+
margin-right: var(--dt-space-300);
|
|
3654
|
+
color: var(--toast-alternate-color-icon);
|
|
3655
|
+
}
|
|
3656
|
+
.d-toast-alternate .d-notice__title {
|
|
3657
|
+
color: var(--dt-color-foreground-tertiary);
|
|
3658
|
+
font-weight: var(--dt-font-weight-normal);
|
|
3659
|
+
font-size: var(--dt-font-size-100);
|
|
3660
|
+
}
|
|
3661
|
+
.d-toast-alternate .d-notice__actions .base-button__button {
|
|
3662
|
+
color: var(--dt-action-color-foreground-muted-default);
|
|
3663
|
+
}
|
|
3664
|
+
.d-toast-alternate__content {
|
|
3665
|
+
display: flex;
|
|
3666
|
+
flex: 1 auto;
|
|
3667
|
+
flex-direction: column;
|
|
3668
|
+
margin-right: var(--dt-space-500);
|
|
3669
|
+
color: var(--dt-color-foreground-primary);
|
|
3670
|
+
font-weight: var(--dt-font-weight-normal);
|
|
3671
|
+
font-size: var(--dt-font-size-200);
|
|
3672
|
+
}
|
|
3673
|
+
.d-toast-alternate__dialog {
|
|
3674
|
+
position: relative;
|
|
3675
|
+
align-items: center;
|
|
3676
|
+
width: var(--dt-size-100-percent);
|
|
3677
|
+
}
|
|
3678
|
+
.d-toast-alternate__dialog .d-notice__actions button:first-child {
|
|
3679
|
+
margin-left: var(--dt-space-600);
|
|
3680
|
+
}
|
|
3681
|
+
.d-toast-alternate__header {
|
|
3682
|
+
display: flex;
|
|
3683
|
+
gap: var(--dt-space-200);
|
|
3684
|
+
align-items: center;
|
|
3685
|
+
color: var(--toast-alternate-font-color);
|
|
3686
|
+
}
|
|
3687
|
+
.d-toast-alternate--error {
|
|
3688
|
+
--toast-alternate-border-color: var(--dt-color-border-critical-subtle);
|
|
3689
|
+
}
|
|
3690
|
+
.d-toast-alternate--info {
|
|
3691
|
+
--toast-alternate-border-color: var(--dt-color-border-subtle);
|
|
3692
|
+
}
|
|
3693
|
+
.d-toast-alternate--success {
|
|
3694
|
+
--toast-alternate-border-color: var(--dt-color-border-success-subtle);
|
|
3695
|
+
}
|
|
3696
|
+
.d-toast-alternate--gradient {
|
|
3697
|
+
background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, var(--dt-color-border-ai) border-box;
|
|
3698
|
+
}
|
|
3699
|
+
.d-toast-alternate--warning {
|
|
3700
|
+
--toast-alternate-border-color: var(--dt-color-border-warning-subtle);
|
|
3701
|
+
}
|
|
3610
3702
|
.d-banner {
|
|
3611
3703
|
--banner-color-border: var(--dt-color-border-subtle);
|
|
3612
3704
|
--banner-line-height: var(--dt-font-line-height-200);
|
|
@@ -3853,6 +3945,11 @@ legend .d-label--md {
|
|
|
3853
3945
|
font: var(--dt-typography-label-md-plain);
|
|
3854
3946
|
cursor: pointer;
|
|
3855
3947
|
}
|
|
3948
|
+
.d-checkbox__messages,
|
|
3949
|
+
.d-radio__messages {
|
|
3950
|
+
margin-top: var(--dt-space-200-negative);
|
|
3951
|
+
margin-left: var(--dt-space-550);
|
|
3952
|
+
}
|
|
3856
3953
|
.d-checkbox__description {
|
|
3857
3954
|
display: flex;
|
|
3858
3955
|
box-sizing: border-box;
|