@soul-refiner/design-system 1.7.11 → 1.7.12
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.
|
@@ -103,6 +103,11 @@ const Primary = styled(Box) `
|
|
|
103
103
|
background-color: var(--color-primary-blue-1);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
+
&:focus {
|
|
107
|
+
border: 1px solid var(--color-primary-blue-3);
|
|
108
|
+
background-color: var(--color-primary-blue-1);
|
|
109
|
+
}
|
|
110
|
+
|
|
106
111
|
&:active {
|
|
107
112
|
border: 1px solid var(--color-primary-blue-0);
|
|
108
113
|
background-color: var(--color-primary-blue-0);
|
|
@@ -120,11 +125,18 @@ const Secondary = styled(Box) `
|
|
|
120
125
|
border: 1px solid var(--color-primary-blue-4);
|
|
121
126
|
|
|
122
127
|
&:hover {
|
|
128
|
+
background-color: var(--color-primary-blue-1);
|
|
129
|
+
color: var(--color-primary-blue-1);
|
|
130
|
+
border: 1px solid var(--color-primary-blue-1);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:focus {
|
|
123
134
|
border: 1px solid var(--color-primary-blue-2);
|
|
124
135
|
color: var(--color-primary-blue-1);
|
|
125
136
|
}
|
|
126
137
|
|
|
127
138
|
&:active {
|
|
139
|
+
border: 1px solid var(--color-primary-blue-0);
|
|
128
140
|
color: var(--color-primary-blue-0);
|
|
129
141
|
}
|
|
130
142
|
|
|
@@ -145,6 +157,16 @@ const Outlined = styled(Box) `
|
|
|
145
157
|
|
|
146
158
|
&:hover {
|
|
147
159
|
background-color: var(--color-grey-10);
|
|
160
|
+
border: 1px solid var(--color-grey-8);
|
|
161
|
+
|
|
162
|
+
&.icon {
|
|
163
|
+
border: 1px solid var(--color-grey-8);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&:focus {
|
|
168
|
+
background-color: var(--color-grey-10);
|
|
169
|
+
border: 1px solid var(--color-primary-blue-3);
|
|
148
170
|
|
|
149
171
|
&.icon {
|
|
150
172
|
border: 1px solid var(--color-grey-8);
|
|
@@ -153,6 +175,7 @@ const Outlined = styled(Box) `
|
|
|
153
175
|
|
|
154
176
|
&:active {
|
|
155
177
|
background-color: var(--color-grey-9);
|
|
178
|
+
border: 1px solid var(--color-grey-8);
|
|
156
179
|
}
|
|
157
180
|
|
|
158
181
|
${base}
|
|
@@ -171,6 +194,11 @@ const Danger = styled(Box) `
|
|
|
171
194
|
background-color: var(--color-red-3);
|
|
172
195
|
}
|
|
173
196
|
|
|
197
|
+
&:focus {
|
|
198
|
+
border: 1px solid var(--color-primary-blue-2);
|
|
199
|
+
background-color: var(--color-red-3);
|
|
200
|
+
}
|
|
201
|
+
|
|
174
202
|
&:active {
|
|
175
203
|
border: 1px solid var(--color-red-2);
|
|
176
204
|
background-color: var(--color-red-2);
|
|
@@ -191,6 +219,11 @@ const Text = styled(Box) `
|
|
|
191
219
|
color: var(--color-primary-blue-1);
|
|
192
220
|
}
|
|
193
221
|
|
|
222
|
+
&:focus {
|
|
223
|
+
color: var(--color-primary-blue-1);
|
|
224
|
+
border: 1px solid var(--color-primary-blue-2);
|
|
225
|
+
}
|
|
226
|
+
|
|
194
227
|
&:active {
|
|
195
228
|
color: var(--color-primary-blue-0);
|
|
196
229
|
}
|
|
@@ -238,7 +271,12 @@ const Special = styled(Box) `
|
|
|
238
271
|
color: var(--color-primary-grey-3);
|
|
239
272
|
|
|
240
273
|
&:hover {
|
|
241
|
-
color: var(--color-grey-
|
|
274
|
+
background-color: var(--color-grey-10);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
&:focus {
|
|
278
|
+
background-color: var(--color-grey-10);
|
|
279
|
+
border: 1px solid var(--color-primary-blue-2);
|
|
242
280
|
}
|
|
243
281
|
|
|
244
282
|
&:active {
|