-
Notifications
You must be signed in to change notification settings - Fork 112
/
box-shadow.yml
206 lines (203 loc) · 10.2 KB
/
box-shadow.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
global:
type: shadow
category: box-shadow
imports:
- ../aliases/box-shadow.yml
- ../aliases/offset.yml
props:
shadow-high:
value: "{!shadow-elevation-30}"
comment: High elevation default shadow.
shadow:
value: "{!shadow-elevation-20}"
comment: Default shadow.
shadow-low:
value: "{!shadow-elevation-10}"
comment: Low elevation default shadow.
shadow-card:
value: "{!shadow-elevation-10}"
comment: Shadow for cards.
shadow-focus:
value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}"
comment: Shadow for focus ring on interactive elements.
shadow-focus-inverse:
value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}"
comment: Shadow for focus ring on interactive elements on inverse backgrounds.
shadow-focus-inset:
value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-blue-60-transparent-70}"
comment: Shadow for inset focus on elements, such as DataGrid cells.
shadow-focus-inverse-inset:
value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0-transparent-40}"
comment: Shadow for inset focus ring on interactive elements on inverse backgrounds.
shadow-focus-shadow-border:
value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}, {!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}"
comment: Shadow for simultaneous focus and border.
shadow-border-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}"
comment: Weaker shadow border for disabled inputs.
shadow-border-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}"
comment: Weak shadow border for disabled inputs.
shadow-border:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}"
comment: Shadow border for inputs.
shadow-border-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}"
comment: Strong shadow border for inputs.
shadow-border-primary-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}"
comment: "Weaker shadow border for primary interactions."
shadow-border-primary-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}"
comment: "Weaker shadow border for primary interactions."
shadow-border-primary:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}"
comment: "Default shadow border for primary interactions."
shadow-border-primary-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}"
comment: Strong shadow border for inputs hover.
shadow-border-primary-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}"
comment: Stronger shadow border for inputs active.
shadow-border-primary-strongest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-100}"
comment: Strongest shadow border for inputs active.
shadow-border-destructive-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}"
comment: Weaker shadow border for destructive interactions.
shadow-border-destructive-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}"
comment: Weak shadow border for destructive interactions.
shadow-border-destructive:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}"
comment: Shadow border for destructive interactions.
shadow-border-destructive-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}"
comment: Strong shadow border for destructive interactions
shadow-border-destructive-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}"
comment: Strong shadow border for destructive interactions
shadow-border-destructive-strongest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-100}"
comment: Strongest shadow border for destructive interactions
shadow-border-success-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-green-20}"
comment: Weaker shadow border for success inputs.
shadow-border-warning-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-orange-20}"
comment: Weaker shadow border for warning inputs.
shadow-border-error-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}"
comment: Weaker shadow border for error inputs.
shadow-border-error-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}"
comment: Shadow border for inverse error inputs.
shadow-border-error:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}"
comment: Shadow border for error inputs.
shadow-border-error-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}"
comment: Shadow border for error inputs hover.
shadow-border-error-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}"
comment: Shadow border for error inputs hover.
shadow-border-error-strongest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-100}"
comment: Strongest shadow border for error inputs hover.
shadow-border-neutral-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}"
comment: Weaker shadow border for neutral inputs.
shadow-border-new-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-20}"
comment: Weaker shadow border for new status inputs.
shadow-border-decorative-10-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}"
comment: Weaker shadow border for decorative 10
shadow-border-decorative-20-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}"
comment: Weaker shadow border for decorative 20
shadow-border-decorative-30-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-green-20}"
comment: Weaker shadow border for decorative 30
shadow-border-decorative-40-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-20}"
comment: Weaker shadow border for decorative 40
shadow-border-inverse-weakest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}"
comment: Weakest shadow border on interactive elements on inverse backgrounds.
shadow-border-inverse-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}"
comment: Weaker shadow border on interactive elements on inverse backgrounds.
shadow-border-inverse:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}"
comment: Shadow border on interactive elements on inverse backgrounds.
shadow-border-inverse-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}"
comment: Strong shadow border on interactive elements on inverse backgrounds.
shadow-border-inverse-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-10}"
comment: Stronger shadow border on interactive elements on inverse backgrounds.
shadow-border-inverse-strongest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}"
comment: Strongest shadow border on interactive elements on inverse backgrounds.
shadow-border-subaccount:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-yellow-20}"
comment: Shadow border for subaccount badge.
shadow-border-inverse-new-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-70}"
comment: Shadow border for the sidebar beta badge.
# Top borders
shadow-border-top-primary:
value: "0px -1px {!offset-0} {!palette-blue-55}"
comment: Top shadow border for selected status of horizontal tabs
shadow-border-top-inverse-strongest:
value: "0px -1px {!offset-0} {!palette-blue-20}"
comment: Top shadow border for for selected status of horizontal tabs on inverse backgrounds
shadow-border-top-primary-strongest:
value: "0px -1px {!offset-0} {!palette-blue-90}"
comment: Top shadow border for selected hover status of horizontal tabs
# Right borders
shadow-border-right-inverse-strong:
value: "1px 0px {!palette-gray-20}"
comment: Right shadow border for hover status of vertical tabs on inverse backgrounds
# Bottom borders
shadow-border-bottom-primary:
value: "{!offset-0} 1px {!offset-0} {!palette-blue-55}"
comment: Bottom shadow border for primary status
shadow-border-bottom-neutral-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-blue-20}"
comment: Weaker bottom shadow border for neutral status
shadow-border-bottom-warning-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-orange-20}"
comment: Weaker bottom shadow border for warning status
shadow-border-bottom-error-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-red-20}"
comment: Weaker bottom shadow border for error status
shadow-border-bottom-success-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-green-20}"
comment: Weaker bottom shadow border for success status
shadow-border-bottom-new-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-purple-20}"
comment: Weaker bottom shadow border for new status
shadow-border-bottom-decorative-10-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-gray-20}"
comment: Weaker bottom shadow border for decorative 10
shadow-border-bottom-decorative-20-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-blue-20}"
comment: Weaker bottom shadow border for decorative 20
shadow-border-bottom-decorative-30-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-green-20}"
comment: Weaker bottom shadow border for decorative 30
shadow-border-bottom-decorative-40-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-purple-20}"
comment: Weaker bottom shadow border for decorative 40
shadow-border-bottom-subaccount:
value: "{!offset-0} 1px {!offset-0} {!palette-yellow-40}"
comment: Bottom shadow border for subaccount badge
shadow-border-bottom-inverse-new-weaker:
value: "{!offset-0} 1px {!offset-0} {!palette-purple-70}"
comment: Bottom shadow border for the sidebar beta badge
# User
shadow-border-user:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-purple-50}"
comment: Shadow border for user.