@dynatrace/strato-design-tokens 1.3.1 → 1.4.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/animations/index.js +0 -1
- package/animations-js/index.js +0 -1
- package/borders/index.js +0 -1
- package/box-shadows/index.d.ts +147 -0
- package/box-shadows/index.js +149 -2
- package/breakpoints/index.js +0 -1
- package/breakpoints-js/index.js +0 -1
- package/colors/index.d.ts +26 -0
- package/colors/index.js +27 -2
- package/easings/index.js +0 -1
- package/easings-js/index.js +0 -1
- package/elevations/index.js +0 -1
- package/esm/box-shadows/index.js +149 -1
- package/esm/box-shadows/index.js.map +2 -2
- package/esm/colors/index.js +27 -1
- package/esm/colors/index.js.map +2 -2
- package/esm/variables/index.js +59 -0
- package/esm/variables/index.js.map +2 -2
- package/esm/variables-dark/index.js +59 -0
- package/esm/variables-dark/index.js.map +2 -2
- package/index.js +0 -1
- package/package.json +1 -1
- package/spacings/index.js +0 -1
- package/styles/variables-dark.css +114 -0
- package/styles/variables.css +114 -0
- package/timings/index.js +0 -1
- package/timings-js/index.js +0 -1
- package/typography/index.js +0 -1
- package/variables/index.d.ts +59 -0
- package/variables/index.js +59 -1
- package/variables-dark/index.d.ts +59 -0
- package/variables-dark/index.js +59 -1
package/animations/index.js
CHANGED
package/animations-js/index.js
CHANGED
package/borders/index.js
CHANGED
package/box-shadows/index.d.ts
CHANGED
|
@@ -73,5 +73,152 @@ declare const _default: {
|
|
|
73
73
|
Drag: string;
|
|
74
74
|
};
|
|
75
75
|
};
|
|
76
|
+
Field: {
|
|
77
|
+
Neutral: {
|
|
78
|
+
Emphasized: {
|
|
79
|
+
/**
|
|
80
|
+
* Use for emphasized neutral button and input in rest state.
|
|
81
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-rest. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff.
|
|
82
|
+
*/
|
|
83
|
+
Rest: string;
|
|
84
|
+
/**
|
|
85
|
+
* Use for emphasized neutral button and input in hover state.
|
|
86
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-hover. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4.
|
|
87
|
+
*/
|
|
88
|
+
Hover: string;
|
|
89
|
+
/**
|
|
90
|
+
* Use for emphasized neutral button and input in active state.
|
|
91
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-active. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc.
|
|
92
|
+
*/
|
|
93
|
+
Active: string;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Use for accentuated neutral button.
|
|
97
|
+
* Css custom property: --dt-box-shadows-field-neutral-accent. Default value: inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #2d2e4e1f.
|
|
98
|
+
*/
|
|
99
|
+
Accent: string;
|
|
100
|
+
/**
|
|
101
|
+
* Use for disabled neutral button and input.
|
|
102
|
+
* Css custom property: --dt-box-shadows-field-neutral-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
103
|
+
*/
|
|
104
|
+
Disabled: string;
|
|
105
|
+
};
|
|
106
|
+
Primary: {
|
|
107
|
+
Emphasized: {
|
|
108
|
+
/**
|
|
109
|
+
* Use for emphasized primary button in rest state.
|
|
110
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-rest. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e1e5f7.
|
|
111
|
+
*/
|
|
112
|
+
Rest: string;
|
|
113
|
+
/**
|
|
114
|
+
* Use for emphasized primary button in hover state.
|
|
115
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-hover. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d5dbf6.
|
|
116
|
+
*/
|
|
117
|
+
Hover: string;
|
|
118
|
+
/**
|
|
119
|
+
* Use for emphasized primary button in active state.
|
|
120
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-active. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c9d1f4.
|
|
121
|
+
*/
|
|
122
|
+
Active: string;
|
|
123
|
+
};
|
|
124
|
+
/**
|
|
125
|
+
* Use for accentuated primary button.
|
|
126
|
+
* Css custom property: --dt-box-shadows-field-primary-accent. Default value: inset 0px 0px 0px 1px #250f9833, inset 0px -1px 0px #250f984d, 0px 1px 1px -1px #2d2e4e1f.
|
|
127
|
+
*/
|
|
128
|
+
Accent: string;
|
|
129
|
+
/**
|
|
130
|
+
* Use for disabled primary button.
|
|
131
|
+
* Css custom property: --dt-box-shadows-field-primary-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
132
|
+
*/
|
|
133
|
+
Disabled: string;
|
|
134
|
+
};
|
|
135
|
+
Success: {
|
|
136
|
+
Emphasized: {
|
|
137
|
+
/**
|
|
138
|
+
* Use for emphasized success button in rest state.
|
|
139
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-rest. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e0e7e6.
|
|
140
|
+
*/
|
|
141
|
+
Rest: string;
|
|
142
|
+
/**
|
|
143
|
+
* Use for emphasized success button in hover state.
|
|
144
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-hover. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d3dedd.
|
|
145
|
+
*/
|
|
146
|
+
Hover: string;
|
|
147
|
+
/**
|
|
148
|
+
* Use for emphasized success button in active state.
|
|
149
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-active. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c7d5d3.
|
|
150
|
+
*/
|
|
151
|
+
Active: string;
|
|
152
|
+
};
|
|
153
|
+
/**
|
|
154
|
+
* Use for accentuated success button.
|
|
155
|
+
* Css custom property: --dt-box-shadows-field-success-accent. Default value: inset 0px 0px 0px 1px #003b3626, inset 0px -1px 0px #003b364d, 0px 1px 1px -1px #2d2e4e1f.
|
|
156
|
+
*/
|
|
157
|
+
Accent: string;
|
|
158
|
+
/**
|
|
159
|
+
* Use for disabled success button.
|
|
160
|
+
* Css custom property: --dt-box-shadows-field-success-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
161
|
+
*/
|
|
162
|
+
Disabled: string;
|
|
163
|
+
};
|
|
164
|
+
Warning: {
|
|
165
|
+
Emphasized: {
|
|
166
|
+
/**
|
|
167
|
+
* Use for emphasized warning button in rest state.
|
|
168
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-rest. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9f0e5.
|
|
169
|
+
*/
|
|
170
|
+
Rest: string;
|
|
171
|
+
/**
|
|
172
|
+
* Use for emphasized warning button in hover state.
|
|
173
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-hover. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9ebdb.
|
|
174
|
+
*/
|
|
175
|
+
Hover: string;
|
|
176
|
+
/**
|
|
177
|
+
* Use for emphasized warning button in active state.
|
|
178
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-active. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9e6d0.
|
|
179
|
+
*/
|
|
180
|
+
Active: string;
|
|
181
|
+
};
|
|
182
|
+
/**
|
|
183
|
+
* Use for accentuated warning button.
|
|
184
|
+
* Css custom property: --dt-box-shadows-field-warning-accent. Default value: inset 0px 0px 0px 1px #512a001a, inset 0px -1px 0px #512a0033, 0px 1px 1px -1px #2d2e4e1f.
|
|
185
|
+
*/
|
|
186
|
+
Accent: string;
|
|
187
|
+
/**
|
|
188
|
+
* Use for disabled warning button.
|
|
189
|
+
* Css custom property: --dt-box-shadows-field-warning-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
190
|
+
*/
|
|
191
|
+
Disabled: string;
|
|
192
|
+
};
|
|
193
|
+
Critical: {
|
|
194
|
+
Emphasized: {
|
|
195
|
+
/**
|
|
196
|
+
* Use for emphasized critical button and input in rest state.
|
|
197
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-rest. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1.
|
|
198
|
+
*/
|
|
199
|
+
Rest: string;
|
|
200
|
+
/**
|
|
201
|
+
* Use for emphasized critical button and input in hover state.
|
|
202
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-hover. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5.
|
|
203
|
+
*/
|
|
204
|
+
Hover: string;
|
|
205
|
+
/**
|
|
206
|
+
* Use for emphasized critical button and input in active state.
|
|
207
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-active. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9.
|
|
208
|
+
*/
|
|
209
|
+
Active: string;
|
|
210
|
+
};
|
|
211
|
+
/**
|
|
212
|
+
* Use for accentuated critical button.
|
|
213
|
+
* Css custom property: --dt-box-shadows-field-critical-accent. Default value: inset 0px 0px 0px 1px #75001333, inset 0px -1px 0px #7500134d, 0px 1px 1px -1px #2d2e4e1f.
|
|
214
|
+
*/
|
|
215
|
+
Accent: string;
|
|
216
|
+
/**
|
|
217
|
+
* Use for disabled critical button and input.
|
|
218
|
+
* Css custom property: --dt-box-shadows-field-critical-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
219
|
+
*/
|
|
220
|
+
Disabled: string;
|
|
221
|
+
};
|
|
222
|
+
};
|
|
76
223
|
};
|
|
77
224
|
export default _default;
|
package/box-shadows/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -92,6 +91,154 @@ const Surface = {
|
|
|
92
91
|
Drag: "var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52)"
|
|
93
92
|
}
|
|
94
93
|
};
|
|
94
|
+
const Field = {
|
|
95
|
+
Neutral: {
|
|
96
|
+
Emphasized: {
|
|
97
|
+
/**
|
|
98
|
+
* Use for emphasized neutral button and input in rest state.
|
|
99
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-rest. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff.
|
|
100
|
+
*/
|
|
101
|
+
Rest: "var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff)",
|
|
102
|
+
/**
|
|
103
|
+
* Use for emphasized neutral button and input in hover state.
|
|
104
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-hover. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4.
|
|
105
|
+
*/
|
|
106
|
+
Hover: "var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4)",
|
|
107
|
+
/**
|
|
108
|
+
* Use for emphasized neutral button and input in active state.
|
|
109
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-active. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc.
|
|
110
|
+
*/
|
|
111
|
+
Active: "var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc)"
|
|
112
|
+
},
|
|
113
|
+
/**
|
|
114
|
+
* Use for accentuated neutral button.
|
|
115
|
+
* Css custom property: --dt-box-shadows-field-neutral-accent. Default value: inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #2d2e4e1f.
|
|
116
|
+
*/
|
|
117
|
+
Accent: "var(--dt-box-shadows-field-neutral-accent, inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #2d2e4e1f)",
|
|
118
|
+
/**
|
|
119
|
+
* Use for disabled neutral button and input.
|
|
120
|
+
* Css custom property: --dt-box-shadows-field-neutral-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
121
|
+
*/
|
|
122
|
+
Disabled: "var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
123
|
+
},
|
|
124
|
+
Primary: {
|
|
125
|
+
Emphasized: {
|
|
126
|
+
/**
|
|
127
|
+
* Use for emphasized primary button in rest state.
|
|
128
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-rest. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e1e5f7.
|
|
129
|
+
*/
|
|
130
|
+
Rest: "var(--dt-box-shadows-field-primary-emphasized-rest, inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e1e5f7)",
|
|
131
|
+
/**
|
|
132
|
+
* Use for emphasized primary button in hover state.
|
|
133
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-hover. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d5dbf6.
|
|
134
|
+
*/
|
|
135
|
+
Hover: "var(--dt-box-shadows-field-primary-emphasized-hover, inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d5dbf6)",
|
|
136
|
+
/**
|
|
137
|
+
* Use for emphasized primary button in active state.
|
|
138
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-active. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c9d1f4.
|
|
139
|
+
*/
|
|
140
|
+
Active: "var(--dt-box-shadows-field-primary-emphasized-active, inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c9d1f4)"
|
|
141
|
+
},
|
|
142
|
+
/**
|
|
143
|
+
* Use for accentuated primary button.
|
|
144
|
+
* Css custom property: --dt-box-shadows-field-primary-accent. Default value: inset 0px 0px 0px 1px #250f9833, inset 0px -1px 0px #250f984d, 0px 1px 1px -1px #2d2e4e1f.
|
|
145
|
+
*/
|
|
146
|
+
Accent: "var(--dt-box-shadows-field-primary-accent, inset 0px 0px 0px 1px #250f9833, inset 0px -1px 0px #250f984d, 0px 1px 1px -1px #2d2e4e1f)",
|
|
147
|
+
/**
|
|
148
|
+
* Use for disabled primary button.
|
|
149
|
+
* Css custom property: --dt-box-shadows-field-primary-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
150
|
+
*/
|
|
151
|
+
Disabled: "var(--dt-box-shadows-field-primary-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
152
|
+
},
|
|
153
|
+
Success: {
|
|
154
|
+
Emphasized: {
|
|
155
|
+
/**
|
|
156
|
+
* Use for emphasized success button in rest state.
|
|
157
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-rest. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e0e7e6.
|
|
158
|
+
*/
|
|
159
|
+
Rest: "var(--dt-box-shadows-field-success-emphasized-rest, inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e0e7e6)",
|
|
160
|
+
/**
|
|
161
|
+
* Use for emphasized success button in hover state.
|
|
162
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-hover. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d3dedd.
|
|
163
|
+
*/
|
|
164
|
+
Hover: "var(--dt-box-shadows-field-success-emphasized-hover, inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d3dedd)",
|
|
165
|
+
/**
|
|
166
|
+
* Use for emphasized success button in active state.
|
|
167
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-active. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c7d5d3.
|
|
168
|
+
*/
|
|
169
|
+
Active: "var(--dt-box-shadows-field-success-emphasized-active, inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c7d5d3)"
|
|
170
|
+
},
|
|
171
|
+
/**
|
|
172
|
+
* Use for accentuated success button.
|
|
173
|
+
* Css custom property: --dt-box-shadows-field-success-accent. Default value: inset 0px 0px 0px 1px #003b3626, inset 0px -1px 0px #003b364d, 0px 1px 1px -1px #2d2e4e1f.
|
|
174
|
+
*/
|
|
175
|
+
Accent: "var(--dt-box-shadows-field-success-accent, inset 0px 0px 0px 1px #003b3626, inset 0px -1px 0px #003b364d, 0px 1px 1px -1px #2d2e4e1f)",
|
|
176
|
+
/**
|
|
177
|
+
* Use for disabled success button.
|
|
178
|
+
* Css custom property: --dt-box-shadows-field-success-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
179
|
+
*/
|
|
180
|
+
Disabled: "var(--dt-box-shadows-field-success-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
181
|
+
},
|
|
182
|
+
Warning: {
|
|
183
|
+
Emphasized: {
|
|
184
|
+
/**
|
|
185
|
+
* Use for emphasized warning button in rest state.
|
|
186
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-rest. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9f0e5.
|
|
187
|
+
*/
|
|
188
|
+
Rest: "var(--dt-box-shadows-field-warning-emphasized-rest, inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9f0e5)",
|
|
189
|
+
/**
|
|
190
|
+
* Use for emphasized warning button in hover state.
|
|
191
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-hover. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9ebdb.
|
|
192
|
+
*/
|
|
193
|
+
Hover: "var(--dt-box-shadows-field-warning-emphasized-hover, inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9ebdb)",
|
|
194
|
+
/**
|
|
195
|
+
* Use for emphasized warning button in active state.
|
|
196
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-active. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9e6d0.
|
|
197
|
+
*/
|
|
198
|
+
Active: "var(--dt-box-shadows-field-warning-emphasized-active, inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9e6d0)"
|
|
199
|
+
},
|
|
200
|
+
/**
|
|
201
|
+
* Use for accentuated warning button.
|
|
202
|
+
* Css custom property: --dt-box-shadows-field-warning-accent. Default value: inset 0px 0px 0px 1px #512a001a, inset 0px -1px 0px #512a0033, 0px 1px 1px -1px #2d2e4e1f.
|
|
203
|
+
*/
|
|
204
|
+
Accent: "var(--dt-box-shadows-field-warning-accent, inset 0px 0px 0px 1px #512a001a, inset 0px -1px 0px #512a0033, 0px 1px 1px -1px #2d2e4e1f)",
|
|
205
|
+
/**
|
|
206
|
+
* Use for disabled warning button.
|
|
207
|
+
* Css custom property: --dt-box-shadows-field-warning-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
208
|
+
*/
|
|
209
|
+
Disabled: "var(--dt-box-shadows-field-warning-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
210
|
+
},
|
|
211
|
+
Critical: {
|
|
212
|
+
Emphasized: {
|
|
213
|
+
/**
|
|
214
|
+
* Use for emphasized critical button and input in rest state.
|
|
215
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-rest. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1.
|
|
216
|
+
*/
|
|
217
|
+
Rest: "var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1)",
|
|
218
|
+
/**
|
|
219
|
+
* Use for emphasized critical button and input in hover state.
|
|
220
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-hover. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5.
|
|
221
|
+
*/
|
|
222
|
+
Hover: "var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5)",
|
|
223
|
+
/**
|
|
224
|
+
* Use for emphasized critical button and input in active state.
|
|
225
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-active. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9.
|
|
226
|
+
*/
|
|
227
|
+
Active: "var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9)"
|
|
228
|
+
},
|
|
229
|
+
/**
|
|
230
|
+
* Use for accentuated critical button.
|
|
231
|
+
* Css custom property: --dt-box-shadows-field-critical-accent. Default value: inset 0px 0px 0px 1px #75001333, inset 0px -1px 0px #7500134d, 0px 1px 1px -1px #2d2e4e1f.
|
|
232
|
+
*/
|
|
233
|
+
Accent: "var(--dt-box-shadows-field-critical-accent, inset 0px 0px 0px 1px #75001333, inset 0px -1px 0px #7500134d, 0px 1px 1px -1px #2d2e4e1f)",
|
|
234
|
+
/**
|
|
235
|
+
* Use for disabled critical button and input.
|
|
236
|
+
* Css custom property: --dt-box-shadows-field-critical-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
237
|
+
*/
|
|
238
|
+
Disabled: "var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
239
|
+
}
|
|
240
|
+
};
|
|
95
241
|
var box_shadows_default = {
|
|
96
|
-
Surface
|
|
242
|
+
Surface,
|
|
243
|
+
Field
|
|
97
244
|
};
|
package/breakpoints/index.js
CHANGED
package/breakpoints-js/index.js
CHANGED
package/colors/index.d.ts
CHANGED
|
@@ -10,6 +10,10 @@ declare const _default: {
|
|
|
10
10
|
'20': string;
|
|
11
11
|
};
|
|
12
12
|
Background: {
|
|
13
|
+
Shell: {
|
|
14
|
+
/** Css custom property: --dt-colors-theme-background-shell-default. Default value: #f2f2f5. */
|
|
15
|
+
Default: string;
|
|
16
|
+
};
|
|
13
17
|
/** Css custom property: --dt-colors-theme-background-10. Default value: #f9f9fa. */
|
|
14
18
|
'10': string;
|
|
15
19
|
/** Css custom property: --dt-colors-theme-background-20. Default value: #fff. */
|
|
@@ -490,6 +494,13 @@ declare const _default: {
|
|
|
490
494
|
AccentActive: string;
|
|
491
495
|
};
|
|
492
496
|
};
|
|
497
|
+
Shell: {
|
|
498
|
+
/**
|
|
499
|
+
* Use for the shell background.
|
|
500
|
+
* Css custom property: --dt-colors-background-shell-default. Default value: #f2f2f5.
|
|
501
|
+
*/
|
|
502
|
+
Default: string;
|
|
503
|
+
};
|
|
493
504
|
};
|
|
494
505
|
Border: {
|
|
495
506
|
Neutral: {
|
|
@@ -550,6 +561,21 @@ declare const _default: {
|
|
|
550
561
|
* Css custom property: --dt-colors-border-neutral-accent-active. Default value: #2f2f4f.
|
|
551
562
|
*/
|
|
552
563
|
AccentActive: string;
|
|
564
|
+
/**
|
|
565
|
+
* Use as border color of subtle elements.
|
|
566
|
+
* Css custom property: --dt-colors-border-neutral-subdued. Default value: #ebecf0.
|
|
567
|
+
*/
|
|
568
|
+
Subdued: string;
|
|
569
|
+
/**
|
|
570
|
+
* Use as border color of subtle elements on hover interaction.
|
|
571
|
+
* Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #dadbe4.
|
|
572
|
+
*/
|
|
573
|
+
SubduedHover: string;
|
|
574
|
+
/**
|
|
575
|
+
* Use for click interactions on subtle elements.
|
|
576
|
+
* Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #d0d1dc.
|
|
577
|
+
*/
|
|
578
|
+
SubduedActive: string;
|
|
553
579
|
};
|
|
554
580
|
Primary: {
|
|
555
581
|
OnAccent: {
|
package/colors/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -29,6 +28,10 @@ const Theme = {
|
|
|
29
28
|
"20": "var(--dt-colors-theme-foreground-20, #fff)"
|
|
30
29
|
},
|
|
31
30
|
Background: {
|
|
31
|
+
Shell: {
|
|
32
|
+
/** Css custom property: --dt-colors-theme-background-shell-default. Default value: #f2f2f5. */
|
|
33
|
+
Default: "var(--dt-colors-theme-background-shell-default, #f2f2f5)"
|
|
34
|
+
},
|
|
32
35
|
/** Css custom property: --dt-colors-theme-background-10. Default value: #f9f9fa. */
|
|
33
36
|
"10": "var(--dt-colors-theme-background-10, #f9f9fa)",
|
|
34
37
|
/** Css custom property: --dt-colors-theme-background-20. Default value: #fff. */
|
|
@@ -508,6 +511,13 @@ const Background = {
|
|
|
508
511
|
*/
|
|
509
512
|
AccentActive: "var(--dt-colors-background-field-critical-accent-active, #a2001d)"
|
|
510
513
|
}
|
|
514
|
+
},
|
|
515
|
+
Shell: {
|
|
516
|
+
/**
|
|
517
|
+
* Use for the shell background.
|
|
518
|
+
* Css custom property: --dt-colors-background-shell-default. Default value: #f2f2f5.
|
|
519
|
+
*/
|
|
520
|
+
Default: "var(--dt-colors-background-shell-default, #f2f2f5)"
|
|
511
521
|
}
|
|
512
522
|
};
|
|
513
523
|
const Border = {
|
|
@@ -568,7 +578,22 @@ const Border = {
|
|
|
568
578
|
* Use as border color of accentuated elements on click interaction.
|
|
569
579
|
* Css custom property: --dt-colors-border-neutral-accent-active. Default value: #2f2f4f.
|
|
570
580
|
*/
|
|
571
|
-
AccentActive: "var(--dt-colors-border-neutral-accent-active, #2f2f4f)"
|
|
581
|
+
AccentActive: "var(--dt-colors-border-neutral-accent-active, #2f2f4f)",
|
|
582
|
+
/**
|
|
583
|
+
* Use as border color of subtle elements.
|
|
584
|
+
* Css custom property: --dt-colors-border-neutral-subdued. Default value: #ebecf0.
|
|
585
|
+
*/
|
|
586
|
+
Subdued: "var(--dt-colors-border-neutral-subdued, #ebecf0)",
|
|
587
|
+
/**
|
|
588
|
+
* Use as border color of subtle elements on hover interaction.
|
|
589
|
+
* Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #dadbe4.
|
|
590
|
+
*/
|
|
591
|
+
SubduedHover: "var(--dt-colors-border-neutral-subdued-hover, #dadbe4)",
|
|
592
|
+
/**
|
|
593
|
+
* Use for click interactions on subtle elements.
|
|
594
|
+
* Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #d0d1dc.
|
|
595
|
+
*/
|
|
596
|
+
SubduedActive: "var(--dt-colors-border-neutral-subdued-active, #d0d1dc)"
|
|
572
597
|
},
|
|
573
598
|
Primary: {
|
|
574
599
|
OnAccent: {
|
package/easings/index.js
CHANGED
package/easings-js/index.js
CHANGED
package/elevations/index.js
CHANGED
package/esm/box-shadows/index.js
CHANGED
|
@@ -69,8 +69,156 @@ const Surface = {
|
|
|
69
69
|
Drag: "var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52)"
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
|
+
const Field = {
|
|
73
|
+
Neutral: {
|
|
74
|
+
Emphasized: {
|
|
75
|
+
/**
|
|
76
|
+
* Use for emphasized neutral button and input in rest state.
|
|
77
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-rest. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff.
|
|
78
|
+
*/
|
|
79
|
+
Rest: "var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff)",
|
|
80
|
+
/**
|
|
81
|
+
* Use for emphasized neutral button and input in hover state.
|
|
82
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-hover. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4.
|
|
83
|
+
*/
|
|
84
|
+
Hover: "var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4)",
|
|
85
|
+
/**
|
|
86
|
+
* Use for emphasized neutral button and input in active state.
|
|
87
|
+
* Css custom property: --dt-box-shadows-field-neutral-emphasized-active. Default value: inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc.
|
|
88
|
+
*/
|
|
89
|
+
Active: "var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc)"
|
|
90
|
+
},
|
|
91
|
+
/**
|
|
92
|
+
* Use for accentuated neutral button.
|
|
93
|
+
* Css custom property: --dt-box-shadows-field-neutral-accent. Default value: inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #2d2e4e1f.
|
|
94
|
+
*/
|
|
95
|
+
Accent: "var(--dt-box-shadows-field-neutral-accent, inset 0px 0px 0px 1px #0000004d, inset 0px -1px 0px #0000008c, 0px 1px 1px -1px #2d2e4e1f)",
|
|
96
|
+
/**
|
|
97
|
+
* Use for disabled neutral button and input.
|
|
98
|
+
* Css custom property: --dt-box-shadows-field-neutral-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
99
|
+
*/
|
|
100
|
+
Disabled: "var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
101
|
+
},
|
|
102
|
+
Primary: {
|
|
103
|
+
Emphasized: {
|
|
104
|
+
/**
|
|
105
|
+
* Use for emphasized primary button in rest state.
|
|
106
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-rest. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e1e5f7.
|
|
107
|
+
*/
|
|
108
|
+
Rest: "var(--dt-box-shadows-field-primary-emphasized-rest, inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e1e5f7)",
|
|
109
|
+
/**
|
|
110
|
+
* Use for emphasized primary button in hover state.
|
|
111
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-hover. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d5dbf6.
|
|
112
|
+
*/
|
|
113
|
+
Hover: "var(--dt-box-shadows-field-primary-emphasized-hover, inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d5dbf6)",
|
|
114
|
+
/**
|
|
115
|
+
* Use for emphasized primary button in active state.
|
|
116
|
+
* Css custom property: --dt-box-shadows-field-primary-emphasized-active. Default value: inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c9d1f4.
|
|
117
|
+
*/
|
|
118
|
+
Active: "var(--dt-box-shadows-field-primary-emphasized-active, inset 0px 0px 0px 1px #250f980f, inset 0px -1px 0px #250f981a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c9d1f4)"
|
|
119
|
+
},
|
|
120
|
+
/**
|
|
121
|
+
* Use for accentuated primary button.
|
|
122
|
+
* Css custom property: --dt-box-shadows-field-primary-accent. Default value: inset 0px 0px 0px 1px #250f9833, inset 0px -1px 0px #250f984d, 0px 1px 1px -1px #2d2e4e1f.
|
|
123
|
+
*/
|
|
124
|
+
Accent: "var(--dt-box-shadows-field-primary-accent, inset 0px 0px 0px 1px #250f9833, inset 0px -1px 0px #250f984d, 0px 1px 1px -1px #2d2e4e1f)",
|
|
125
|
+
/**
|
|
126
|
+
* Use for disabled primary button.
|
|
127
|
+
* Css custom property: --dt-box-shadows-field-primary-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
128
|
+
*/
|
|
129
|
+
Disabled: "var(--dt-box-shadows-field-primary-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
130
|
+
},
|
|
131
|
+
Success: {
|
|
132
|
+
Emphasized: {
|
|
133
|
+
/**
|
|
134
|
+
* Use for emphasized success button in rest state.
|
|
135
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-rest. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e0e7e6.
|
|
136
|
+
*/
|
|
137
|
+
Rest: "var(--dt-box-shadows-field-success-emphasized-rest, inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #e0e7e6)",
|
|
138
|
+
/**
|
|
139
|
+
* Use for emphasized success button in hover state.
|
|
140
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-hover. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d3dedd.
|
|
141
|
+
*/
|
|
142
|
+
Hover: "var(--dt-box-shadows-field-success-emphasized-hover, inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d3dedd)",
|
|
143
|
+
/**
|
|
144
|
+
* Use for emphasized success button in active state.
|
|
145
|
+
* Css custom property: --dt-box-shadows-field-success-emphasized-active. Default value: inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c7d5d3.
|
|
146
|
+
*/
|
|
147
|
+
Active: "var(--dt-box-shadows-field-success-emphasized-active, inset 0px 0px 0px 1px #003b360f, inset 0px -1px 0px #003b361a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #c7d5d3)"
|
|
148
|
+
},
|
|
149
|
+
/**
|
|
150
|
+
* Use for accentuated success button.
|
|
151
|
+
* Css custom property: --dt-box-shadows-field-success-accent. Default value: inset 0px 0px 0px 1px #003b3626, inset 0px -1px 0px #003b364d, 0px 1px 1px -1px #2d2e4e1f.
|
|
152
|
+
*/
|
|
153
|
+
Accent: "var(--dt-box-shadows-field-success-accent, inset 0px 0px 0px 1px #003b3626, inset 0px -1px 0px #003b364d, 0px 1px 1px -1px #2d2e4e1f)",
|
|
154
|
+
/**
|
|
155
|
+
* Use for disabled success button.
|
|
156
|
+
* Css custom property: --dt-box-shadows-field-success-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
157
|
+
*/
|
|
158
|
+
Disabled: "var(--dt-box-shadows-field-success-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
159
|
+
},
|
|
160
|
+
Warning: {
|
|
161
|
+
Emphasized: {
|
|
162
|
+
/**
|
|
163
|
+
* Use for emphasized warning button in rest state.
|
|
164
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-rest. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9f0e5.
|
|
165
|
+
*/
|
|
166
|
+
Rest: "var(--dt-box-shadows-field-warning-emphasized-rest, inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9f0e5)",
|
|
167
|
+
/**
|
|
168
|
+
* Use for emphasized warning button in hover state.
|
|
169
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-hover. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9ebdb.
|
|
170
|
+
*/
|
|
171
|
+
Hover: "var(--dt-box-shadows-field-warning-emphasized-hover, inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9ebdb)",
|
|
172
|
+
/**
|
|
173
|
+
* Use for emphasized warning button in active state.
|
|
174
|
+
* Css custom property: --dt-box-shadows-field-warning-emphasized-active. Default value: inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9e6d0.
|
|
175
|
+
*/
|
|
176
|
+
Active: "var(--dt-box-shadows-field-warning-emphasized-active, inset 0px 0px 0px 1px #512a000f, inset 0px -1px 0px #512a001a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f9e6d0)"
|
|
177
|
+
},
|
|
178
|
+
/**
|
|
179
|
+
* Use for accentuated warning button.
|
|
180
|
+
* Css custom property: --dt-box-shadows-field-warning-accent. Default value: inset 0px 0px 0px 1px #512a001a, inset 0px -1px 0px #512a0033, 0px 1px 1px -1px #2d2e4e1f.
|
|
181
|
+
*/
|
|
182
|
+
Accent: "var(--dt-box-shadows-field-warning-accent, inset 0px 0px 0px 1px #512a001a, inset 0px -1px 0px #512a0033, 0px 1px 1px -1px #2d2e4e1f)",
|
|
183
|
+
/**
|
|
184
|
+
* Use for disabled warning button.
|
|
185
|
+
* Css custom property: --dt-box-shadows-field-warning-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
186
|
+
*/
|
|
187
|
+
Disabled: "var(--dt-box-shadows-field-warning-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
188
|
+
},
|
|
189
|
+
Critical: {
|
|
190
|
+
Emphasized: {
|
|
191
|
+
/**
|
|
192
|
+
* Use for emphasized critical button and input in rest state.
|
|
193
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-rest. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1.
|
|
194
|
+
*/
|
|
195
|
+
Rest: "var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1)",
|
|
196
|
+
/**
|
|
197
|
+
* Use for emphasized critical button and input in hover state.
|
|
198
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-hover. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5.
|
|
199
|
+
*/
|
|
200
|
+
Hover: "var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5)",
|
|
201
|
+
/**
|
|
202
|
+
* Use for emphasized critical button and input in active state.
|
|
203
|
+
* Css custom property: --dt-box-shadows-field-critical-emphasized-active. Default value: inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9.
|
|
204
|
+
*/
|
|
205
|
+
Active: "var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9)"
|
|
206
|
+
},
|
|
207
|
+
/**
|
|
208
|
+
* Use for accentuated critical button.
|
|
209
|
+
* Css custom property: --dt-box-shadows-field-critical-accent. Default value: inset 0px 0px 0px 1px #75001333, inset 0px -1px 0px #7500134d, 0px 1px 1px -1px #2d2e4e1f.
|
|
210
|
+
*/
|
|
211
|
+
Accent: "var(--dt-box-shadows-field-critical-accent, inset 0px 0px 0px 1px #75001333, inset 0px -1px 0px #7500134d, 0px 1px 1px -1px #2d2e4e1f)",
|
|
212
|
+
/**
|
|
213
|
+
* Use for disabled critical button and input.
|
|
214
|
+
* Css custom property: --dt-box-shadows-field-critical-disabled. Default value: inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f.
|
|
215
|
+
*/
|
|
216
|
+
Disabled: "var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f)"
|
|
217
|
+
}
|
|
218
|
+
};
|
|
72
219
|
var box_shadows_default = {
|
|
73
|
-
Surface
|
|
220
|
+
Surface,
|
|
221
|
+
Field
|
|
74
222
|
};
|
|
75
223
|
export {
|
|
76
224
|
box_shadows_default as default
|