Skip to content
This repository was archived by the owner on Sep 11, 2021. It is now read-only.

Commit 325da70

Browse files
adamwathanadamwathan
committed
Use blue as default checkbox/radio button color
Since it's closer to the expected browser default.
1 parent 58bfceb commit 325da70

File tree

2 files changed

+23
-23
lines changed

2 files changed

+23
-23
lines changed

‎docs/pages/index.mdx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ Here is a list of the all of the available options, as well as their default val
5252
boxShadow: defaultTheme.boxShadow.none,
5353
checkboxSize: '1em',
5454
radioSize: '1em',
55-
checkboxIcon: \`<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>\`,
56-
radioIcon: \`<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>\`,
55+
checkboxIcon: \`<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></svg>\`,
56+
radioIcon: \`<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"></svg>\`,
5757
checkedColor: 'currentColor',
58-
selectIcon: \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${'${defaultTheme.colors.gray[500]}'}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>\`,
58+
selectIcon: \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${'${defaultTheme.colors.gray[500]}'}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></svg>\`,
5959
selectIconOffset: defaultTheme.spacing[2],
6060
selectIconSize: '1.5em',
6161
}
@@ -76,7 +76,7 @@ Add basic styles to a normal `input` element using the `form-input` class.
7676
<CodeSample code={`
7777
<label class="block">
7878
<span class="text-gray-700">Input</span>
79-
<input type="email" class="form-input mt-1 block w-full" placeholder="[email protected]"/>
79+
<input type="email" class="form-input mt-1 block w-full" placeholder="[email protected]">
8080
</label>
8181
`}/>
8282

@@ -140,19 +140,19 @@ impose any opinions in that regard. Here we've used flexbox to center the checkb
140140
<div class="mt-2">
141141
<div>
142142
<label class="inline-flex items-center">
143-
<input type="checkbox" class="form-checkbox text-gray-800" checked/>
143+
<input type="checkbox" class="form-checkbox" checked>
144144
<span class="ml-2">Option 1</span>
145145
</label>
146146
</div>
147147
<div>
148148
<label class="inline-flex items-center">
149-
<input type="checkbox" class="form-checkbox text-gray-800"/>
149+
<input type="checkbox" class="form-checkbox">
150150
<span class="ml-2">Option 2</span>
151151
</label>
152152
</div>
153153
<div>
154154
<label class="inline-flex items-center">
155-
<input type="checkbox" class="form-checkbox text-gray-800"/>
155+
<input type="checkbox" class="form-checkbox">
156156
<span class="ml-2">Option 3</span>
157157
</label>
158158
</div>
@@ -171,19 +171,19 @@ color utilities, like `text-indigo-600`.
171171
<div class="mt-2">
172172
<div>
173173
<label class="inline-flex items-center">
174-
<input type="checkbox" class="form-checkbox text-indigo-600" checked/>
174+
<input type="checkbox" class="form-checkbox text-indigo-600" checked>
175175
<span class="ml-2">Option 1</span>
176176
</label>
177177
</div>
178178
<div>
179179
<label class="inline-flex items-center">
180-
<input type="checkbox" class="form-checkbox text-blue-500" checked/>
180+
<input type="checkbox" class="form-checkbox text-green-500" checked>
181181
<span class="ml-2">Option 2</span>
182182
</label>
183183
</div>
184184
<div>
185185
<label class="inline-flex items-center">
186-
<input type="checkbox" class="form-checkbox text-pink-600" checked/>
186+
<input type="checkbox" class="form-checkbox text-pink-600" checked>
187187
<span class="ml-2">Option 3</span>
188188
</label>
189189
</div>
@@ -202,19 +202,19 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
202202
<div class="mt-2">
203203
<div>
204204
<label class="inline-flex items-center">
205-
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-800" checked/>
205+
<input type="checkbox" class="form-checkbox h-4 w-4" checked>
206206
<span class="ml-2">Option 1</span>
207207
</label>
208208
</div>
209209
<div class="mt-1">
210210
<label class="inline-flex items-center">
211-
<input type="checkbox" class="form-checkbox h-6 w-6 text-gray-800"/>
211+
<input type="checkbox" class="form-checkbox h-6 w-6">
212212
<span class="ml-3 text-lg">Option 2</span>
213213
</label>
214214
</div>
215215
<div class="mt-1">
216216
<label class="inline-flex items-center">
217-
<input type="checkbox" class="form-checkbox h-8 w-8 text-gray-800"/>
217+
<input type="checkbox" class="form-checkbox h-8 w-8">
218218
<span class="ml-4 text-xl">Option 3</span>
219219
</label>
220220
</div>
@@ -235,19 +235,19 @@ impose any opinions in that regard. Here we've used flexbox to center the radio
235235
<div class="mt-2">
236236
<div>
237237
<label class="inline-flex items-center">
238-
<input type="radio" class="form-radio text-gray-800" name="radio" value="1" checked/>
238+
<input type="radio" class="form-radio" name="radio" value="1" checked>
239239
<span class="ml-2">Option 1</span>
240240
</label>
241241
</div>
242242
<div>
243243
<label class="inline-flex items-center">
244-
<input type="radio" class="form-radio text-gray-800" name="radio" value="2"/>
244+
<input type="radio" class="form-radio" name="radio" value="2">
245245
<span class="ml-2">Option 2</span>
246246
</label>
247247
</div>
248248
<div>
249249
<label class="inline-flex items-center">
250-
<input type="radio" class="form-radio text-gray-800" name="radio" value="3"/>
250+
<input type="radio" class="form-radio" name="radio" value="3">
251251
<span class="ml-2">Option 3</span>
252252
</label>
253253
</div>
@@ -267,19 +267,19 @@ color utilities, like `text-indigo-600`.
267267
<div class="mt-2">
268268
<div>
269269
<label class="inline-flex items-center">
270-
<input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked/>
270+
<input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked>
271271
<span class="ml-2">Option 1</span>
272272
</label>
273273
</div>
274274
<div>
275275
<label class="inline-flex items-center">
276-
<input type="radio" class="form-radio text-blue-500" name="radio-colors" value="2"/>
276+
<input type="radio" class="form-radio text-green-500" name="radio-colors" value="2">
277277
<span class="ml-2">Option 2</span>
278278
</label>
279279
</div>
280280
<div>
281281
<label class="inline-flex items-center">
282-
<input type="radio" class="form-radio text-pink-600" name="radio-colors" value="3"/>
282+
<input type="radio" class="form-radio text-pink-600" name="radio-colors" value="3">
283283
<span class="ml-2">Option 3</span>
284284
</label>
285285
</div>
@@ -298,19 +298,19 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
298298
<div class="mt-2">
299299
<div>
300300
<label class="inline-flex items-center">
301-
<input type="radio" class="form-radio h-4 w-4 text-gray-800" name="radio-sizes" value="1" checked/>
301+
<input type="radio" class="form-radio h-4 w-4" name="radio-sizes" value="1" checked>
302302
<span class="ml-2">Option 1</span>
303303
</label>
304304
</div>
305305
<div class="mt-1">
306306
<label class="inline-flex items-center">
307-
<input type="radio" class="form-radio h-6 w-6 text-gray-800" name="radio-sizes" value="2"/>
307+
<input type="radio" class="form-radio h-6 w-6" name="radio-sizes" value="2">
308308
<span class="ml-3 text-lg">Option 2</span>
309309
</label>
310310
</div>
311311
<div class="mt-1">
312312
<label class="inline-flex items-center">
313-
<input type="radio" class="form-radio h-8 w-8 text-gray-800" name="radio-sizes" value="3"/>
313+
<input type="radio" class="form-radio h-8 w-8" name="radio-sizes" value="3">
314314
<span class="ml-4 text-xl">Option 3</span>
315315
</label>
316316
</div>

‎index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
1919
radioSize: '1em',
2020
checkboxIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>`,
2121
radioIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`,
22-
checkedColor: defaultTheme.colors.gray[800],
22+
checkedColor: defaultTheme.colors.blue[500],
2323
selectIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
2424
selectIconOffset: defaultTheme.spacing[2],
2525
selectIconSize: '1.5em',

0 commit comments

Comments
 (0)