@dialpad/dialtone-css 8.80.0-next.7 → 8.80.0-next.8
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/box.less +11 -3
- package/lib/build/less/components/button.less +30 -25
- package/lib/build/less/components/card.less +1 -1
- package/lib/build/less/components/chip.less +32 -0
- package/lib/build/less/components/image-viewer.less +1 -0
- package/lib/build/less/components/modal.less +1 -1
- package/lib/build/less/components/popover.less +1 -1
- package/lib/build/less/components/toast.less +2 -2
- package/lib/build/less/recipes/unread_pill.less +1 -1
- package/lib/build/less/utilities/effects.less +11 -5
- package/lib/dist/dialtone-default-theme.css +541 -128
- package/lib/dist/dialtone-default-theme.min.css +1 -1
- package/lib/dist/dialtone-docs.json +1 -1
- package/lib/dist/dialtone.css +380 -84
- package/lib/dist/dialtone.min.css +1 -1
- package/lib/dist/tokens/tokens-base-dark.css +267 -126
- package/lib/dist/tokens/tokens-base-light.css +161 -44
- package/lib/dist/tokens/tokens-debug-base.css +158 -41
- package/lib/dist/tokens-docs.json +1 -1
- package/package.json +2 -2
|
@@ -62,6 +62,8 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
._box-layout(@prop) {
|
|
65
|
+
&-0 { @{prop}: 0; }
|
|
66
|
+
|
|
65
67
|
&-1px { @{prop}: var(--dt-layout-1px); }
|
|
66
68
|
&-2px { @{prop}: var(--dt-layout-2px); }
|
|
67
69
|
&-8px { @{prop}: var(--dt-layout-8px); }
|
|
@@ -70,9 +72,15 @@
|
|
|
70
72
|
&-24px { @{prop}: var(--dt-layout-24px); }
|
|
71
73
|
&-50 { @{prop}: var(--dt-layout-50); }
|
|
72
74
|
&-75 { @{prop}: var(--dt-layout-75); }
|
|
73
|
-
|
|
75
|
+
|
|
76
|
+
each(range(100, 200, 25), {
|
|
77
|
+
&-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
each(range(250, 1600, 50), {
|
|
74
81
|
&-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
|
|
75
82
|
});
|
|
83
|
+
|
|
76
84
|
// Percentage tokens
|
|
77
85
|
each(@box-layout-percent-values, {
|
|
78
86
|
&-@{value}p { @{prop}: ~"var(--dt-layout-@{value}-percent)"; }
|
|
@@ -103,13 +111,13 @@
|
|
|
103
111
|
// ============================================================================
|
|
104
112
|
// $ VALUE LISTS
|
|
105
113
|
// ----------------------------------------------------------------------------
|
|
106
|
-
@box-surface-values: primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
|
|
114
|
+
@box-surface-values: overlay, primary, secondary, moderate, bold, strong, contrast, backdrop, brand, info, warning, critical, positive, success, brand-subtle, brand-strong, info-subtle, info-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, positive-subtle, positive-strong, success-subtle, success-strong, primary-opaque, secondary-opaque, moderate-opaque, bold-opaque, strong-opaque, contrast-opaque, brand-opaque, brand-subtle-opaque, info-opaque, info-subtle-opaque, warning-opaque, warning-subtle-opaque, critical-opaque, critical-subtle-opaque, positive-opaque, positive-subtle-opaque, success-opaque, success-subtle-opaque;
|
|
107
115
|
|
|
108
116
|
@box-border-color-values: subtle, default, moderate, bold, accent, focus, brand, warning, critical, info, positive, success, brand-subtle, brand-strong, warning-subtle, warning-strong, critical-subtle, critical-strong, info-subtle, info-strong, positive-subtle, positive-strong, success-subtle, success-strong;
|
|
109
117
|
|
|
110
118
|
@box-border-width-values: 0, 50, 100, 150, 200, 300, 400;
|
|
111
119
|
@box-layout-percent-values: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 95, 100;
|
|
112
|
-
@box-shadow-values:
|
|
120
|
+
@box-shadow-values: raised, overlay, modal;
|
|
113
121
|
@box-overflow-values: hidden, scroll, auto, clip, visible;
|
|
114
122
|
|
|
115
123
|
@layer dialtone.components {
|
|
@@ -113,31 +113,6 @@
|
|
|
113
113
|
box-shadow: var(--dt-shadow-focus);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
&--disabled,
|
|
117
|
-
&:disabled {
|
|
118
|
-
--chroma-adjust-text: .08;
|
|
119
|
-
--chroma-adjust-background: .08;
|
|
120
|
-
--chroma-adjust-border: .08;
|
|
121
|
-
--opacity-adjust-text: 65%;
|
|
122
|
-
--opacity-adjust-background: 65%;
|
|
123
|
-
--opacity-adjust-border: 40%;
|
|
124
|
-
|
|
125
|
-
color: color-mix(in oklch, oklch( from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
|
|
126
|
-
background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
|
|
127
|
-
border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
|
|
128
|
-
cursor: not-allowed;
|
|
129
|
-
transition: none;
|
|
130
|
-
pointer-events: none;
|
|
131
|
-
|
|
132
|
-
&.d-btn--primary {
|
|
133
|
-
--opacity-adjust-text: 80%;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
&.d-btn--muted {
|
|
137
|
-
--opacity-adjust-text: 50%;
|
|
138
|
-
--opacity-adjust-border: 50%;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
116
|
}
|
|
142
117
|
|
|
143
118
|
._btn-circle() {
|
|
@@ -207,6 +182,36 @@
|
|
|
207
182
|
._btn();
|
|
208
183
|
}
|
|
209
184
|
|
|
185
|
+
.d-btn:where(.d-btn--disabled, :disabled),
|
|
186
|
+
.d-btn--md:where(.d-btn--disabled, :disabled) {
|
|
187
|
+
--chroma-adjust-text: .08;
|
|
188
|
+
--chroma-adjust-background: .08;
|
|
189
|
+
--chroma-adjust-border: .08;
|
|
190
|
+
--opacity-adjust-text: 65%;
|
|
191
|
+
--opacity-adjust-background: 65%;
|
|
192
|
+
--opacity-adjust-border: 40%;
|
|
193
|
+
|
|
194
|
+
color: color-mix(in oklch, oklch( from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
|
|
195
|
+
background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
|
|
196
|
+
border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
|
|
197
|
+
cursor: not-allowed;
|
|
198
|
+
transition: none;
|
|
199
|
+
pointer-events: none;
|
|
200
|
+
|
|
201
|
+
&:where(.d-btn--primary) {
|
|
202
|
+
--opacity-adjust-text: 80%;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
&:where(.d-btn--muted) {
|
|
206
|
+
--opacity-adjust-text: 50%;
|
|
207
|
+
--opacity-adjust-border: 60%;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&:where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
|
|
211
|
+
--button-color-background: var(--dt-action-color-background-muted-active);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
|
|
210
215
|
.d-btn--unstyled {
|
|
211
216
|
/* stylelint-disable */
|
|
212
217
|
all: unset; // Must be first!
|
|
@@ -115,6 +115,38 @@
|
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
// Explicit disabled styling for chip close button.
|
|
119
|
+
// This duplicates the button disabled logic since the ._btn() mixin no longer includes disabled state handling.
|
|
120
|
+
// PLUS it may be simplified with upcoming Chip redesign/refactor
|
|
121
|
+
.d-chip__close:where(.d-chip__close--disabled, :disabled) {
|
|
122
|
+
--chroma-adjust-text: .08;
|
|
123
|
+
--chroma-adjust-background: .08;
|
|
124
|
+
--chroma-adjust-border: .08;
|
|
125
|
+
--opacity-adjust-text: 65%;
|
|
126
|
+
--opacity-adjust-background: 65%;
|
|
127
|
+
--opacity-adjust-border: 40%;
|
|
128
|
+
|
|
129
|
+
color: color-mix(in oklch, oklch( from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent );
|
|
130
|
+
background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent );
|
|
131
|
+
border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent );
|
|
132
|
+
cursor: not-allowed;
|
|
133
|
+
transition: none;
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
|
|
136
|
+
&:where(.d-btn--primary) {
|
|
137
|
+
--opacity-adjust-text: 80%;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&:where(.d-btn--muted) {
|
|
141
|
+
--opacity-adjust-text: 50%;
|
|
142
|
+
--opacity-adjust-border: 60%;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&:where(.d-btn--active):where(.d-btn--outlined, .d-btn--muted) {
|
|
146
|
+
--button-color-background: var(--dt-action-color-background-muted-active);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
118
150
|
.d-chip__icon {
|
|
119
151
|
--chip-icon-size: calc(var(--dt-layout-25) * 1.25);
|
|
120
152
|
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
--modal-dialog-color-border: var(--dt-color-border-subtle);
|
|
101
101
|
--modal-dialog-color-text: var(--dt-color-foreground-primary);
|
|
102
102
|
--modal-header-color-text: var(--dt-color-foreground-primary);
|
|
103
|
-
--modal-dialog-shadow: var(--dt-shadow-
|
|
103
|
+
--modal-dialog-shadow: var(--dt-shadow-modal);
|
|
104
104
|
|
|
105
105
|
// If we don't set this the native app header region will override all click events on the modal overlay
|
|
106
106
|
-webkit-app-region: no-drag;
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
--popover-border-width: var(--dt-size-border-100);
|
|
30
30
|
--popover-border-radius: var(--dt-size-radius-400);
|
|
31
31
|
--popover-color-border: var(--dt-color-border-subtle);
|
|
32
|
-
--popover-shadow: var(--dt-shadow-
|
|
32
|
+
--popover-shadow: var(--dt-shadow-overlay);
|
|
33
33
|
|
|
34
34
|
// If we don't set this the native app header region will override all click events within the popover
|
|
35
35
|
-webkit-app-region: no-drag;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
// Component CSS Vars
|
|
29
29
|
// ------------------------------------------------------------------------
|
|
30
30
|
--toast-color-shadow: var(--dt-color-border-subtle);
|
|
31
|
-
--toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-
|
|
31
|
+
--toast-box-shadow: 0 0 0 var(--dt-size-border-100) var(--toast-color-shadow) inset, var(--dt-shadow-overlay);
|
|
32
32
|
|
|
33
33
|
z-index: var(--zi-notification);
|
|
34
34
|
display: block;
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
// Component CSS Vars
|
|
126
126
|
// ------------------------------------------------------------------------
|
|
127
127
|
--toast-alternate-color-shadow: oklch(from var(--dt-color-black-900) l c h / 0.15);
|
|
128
|
-
--toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-
|
|
128
|
+
--toast-alternate-box-shadow: 0 0 0 var(--dt-spacing-0) var(--toast-alternate-color-shadow) inset, var(--dt-shadow-overlay);
|
|
129
129
|
--toast-alternate-color-background: var(--dt-color-surface-primary);
|
|
130
130
|
--toast-alternate-color-text: var(--dt-color-foreground-primary);
|
|
131
131
|
--toast-alternate-color-icon: var(--dt-color-foreground-muted);
|
|
@@ -142,11 +142,17 @@
|
|
|
142
142
|
// ============================================================================
|
|
143
143
|
// $ BOX SHADOW
|
|
144
144
|
// ----------------------------------------------------------------------------
|
|
145
|
-
.d-bs-
|
|
146
|
-
.d-bs-
|
|
147
|
-
.d-bs-
|
|
148
|
-
|
|
149
|
-
.d-bs-
|
|
145
|
+
.d-bs-raised,
|
|
146
|
+
.d-bs-sm,
|
|
147
|
+
.d-bs-card { box-shadow: var(--dt-shadow-raised) !important; }
|
|
148
|
+
|
|
149
|
+
.d-bs-overlay,
|
|
150
|
+
.d-bs-md,
|
|
151
|
+
.d-bs-lg { box-shadow: var(--dt-shadow-overlay) !important; }
|
|
152
|
+
|
|
153
|
+
.d-bs-modal,
|
|
154
|
+
.d-bs-xl { box-shadow: var(--dt-shadow-modal) !important; }
|
|
155
|
+
|
|
150
156
|
.d-bs-none { box-shadow: none !important; }
|
|
151
157
|
.d-bs-unset { box-shadow: unset !important; }
|
|
152
158
|
|