Skip to content

Commit 19c65a2

Browse files
tbolttbolt
authored
updates links colors to meet wcag, misc other fixes based on community feedback (#6)
1 parent a81d2f1 commit 19c65a2

3 files changed

Lines changed: 38 additions & 24 deletions

File tree

‎bolt.css‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Bolt.css
3-
* Version 0.2.0
3+
* Version 0.4.0
44
* https://github.com/tbolt/boltcss
55
*
66
* Sections
@@ -15,27 +15,30 @@
1515
*/
1616

1717
:root {
18-
--links: #4589ee;
1918
--highlight-border-radius: 7px;
2019
--border-radius: 11px;
2120

21+
--links: #0f6dff;
2222
--background-body: #fff;
2323
--background-main: #f1f1f1;
24+
--background-inputs: #fcfcfc;
2425
--text: #1c1d1e;
2526
--border: #dddddd;
26-
--hover-highlight: #b8b8b8;
27+
--focus-highlight: #b8b8b8;
2728
--shadow-color: #545454;
2829
--table-highlight: #f1f1f1;
2930
--select-icon-url: url("data:image/svg+xml,%3Csvg width='292' height='292' viewBox='0 0 292 292' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='Path' fill='%23222222' stroke='none' d='M 287 69 C 283.606537 65.469971 278.895844 63.513214 274 63.600006 L 18.4 63.600006 C 13.4 63.600006 9.1 65.400009 5.5 69 C 1.984143 72.328568 -0.005267 76.958466 -0 81.800003 C -0 86.800003 1.8 91.100006 5.4 94.699997 L 133.399994 222.600006 C 137 226.200012 141.199997 228 146.199997 228 C 151.199997 228 155.399994 226.200012 159 222.600006 L 287 94.600006 C 290.5 91.100006 292.399994 86.800003 292.399994 81.800003 C 292.399994 76.800003 290.5 72.600006 286.899994 69 Z'/%3E%3C/svg%3E");
3031
}
3132

3233
@media (prefers-color-scheme: dark) {
3334
:root {
35+
--links: #4589ee;
3436
--background-body: #0f0f0f;
3537
--background-main: #222;
38+
--background-inputs: #222;
3639
--text: #efefef;
3740
--border: #444;
38-
--hover-highlight: #888;
41+
--focus-highlight: #888;
3942
--shadow-color: #bebebe;
4043
--table-highlight: #222;
4144
--select-icon-url: url("data:image/svg+xml,%3Csvg width='292' height='292' viewBox='0 0 292 292' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='Path' fill='%23ffffff' stroke='none' d='M 287 69 C 283.606537 65.469971 278.895844 63.513214 274 63.600006 L 18.4 63.600006 C 13.4 63.600006 9.1 65.400009 5.5 69 C 1.984143 72.328568 -0.005267 76.958466 -0 81.800003 C -0 86.800003 1.8 91.100006 5.4 94.699997 L 133.399994 222.600006 C 137 226.200012 141.199997 228 146.199997 228 C 151.199997 228 155.399994 226.200012 159 222.600006 L 287 94.600006 C 290.5 91.100006 292.399994 86.800003 292.399994 81.800003 C 292.399994 76.800003 290.5 72.600006 286.899994 69 Z'/%3E%3C/svg%3E");
@@ -52,8 +55,8 @@ html,
5255
body {
5356
margin: 0;
5457
font-size: 12pt;
55-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
56-
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
58+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
59+
sans-serif;
5760
color: var(--text);
5861
background: var(--background-body);
5962
}
@@ -209,6 +212,8 @@ kbd,
209212
code,
210213
time {
211214
border-radius: var(--highlight-border-radius, 4px);
215+
box-decoration-break: clone;
216+
-webkit-box-decoration-break: clone;
212217
}
213218

214219
mark {
@@ -231,7 +236,8 @@ time {
231236
color: var(--text);
232237
}
233238

234-
code {
239+
code,
240+
pre {
235241
font-size: 1em;
236242
padding: 2px 4px;
237243
background-color: whitesmoke;
@@ -249,6 +255,7 @@ pre > code {
249255

250256
pre {
251257
margin: 0;
258+
border-radius: var(--border-radius);
252259
}
253260

254261
sup,
@@ -369,7 +376,7 @@ label {
369376

370377
input {
371378
font-size: 1em;
372-
background-color: var(--background-main);
379+
background-color: var(--background-inputs);
373380
border: 1px solid var(--border);
374381
color: var(--text);
375382
margin: 6px 0px;
@@ -413,19 +420,19 @@ input[type="radio"]:checked {
413420

414421
input[type="range"] {
415422
vertical-align: middle;
416-
appearance: auto;
423+
padding: 0;
417424
}
418425

419426
textarea {
420427
font-family: inherit;
421428
font-size: 1em;
422-
background-color: var(--background-main);
429+
background-color: var(--background-inputs);
423430
border: 1px solid var(--border);
424431
padding: 11px;
425432
color: var(--text);
426433
border-radius: var(--border-radius);
427434
outline: none;
428-
resize: none;
435+
/* resize: none; Todo: research if there is a non-js way to style/move grippie */
429436
max-width: 100%;
430437
}
431438

@@ -442,7 +449,7 @@ select {
442449
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
443450
border-radius: 0.5em;
444451
appearance: none;
445-
background-color: var(--background-main);
452+
background-color: var(--background-inputs);
446453
background-image: var(--select-icon-url);
447454
background-repeat: no-repeat, repeat;
448455
background-position: right 0.7em top 50%, 0 0;
@@ -455,11 +462,18 @@ select:is([multiple]) {
455462
height: fit-content;
456463
}
457464

465+
fieldset:focus-within,
466+
input:focus-within,
467+
textarea:focus-within,
468+
select:focus-within {
469+
border-color: var(--focus-highlight);
470+
}
471+
458472
fieldset:hover,
459473
input:hover,
460474
textarea:hover,
461475
select:hover {
462-
border-color: var(--hover-highlight);
476+
border-color: var(--focus-highlight);
463477
}
464478

465479
meter {

‎index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -218,14 +218,14 @@ <h3 class="demo-header">ul</h3>
218218
<!-- pre -->
219219
<h3 class="demo-header">pre</h3>
220220
<pre role="img" aria-label="ASCII COW">
221-
___________________________
222-
| I'm an expert in my field.|
223-
---------------------------
224-
\ ^__^
225-
\ (oo)\_______
226-
(__)\ )\/\
227-
||----w |
228-
|| ||
221+
___________________________
222+
| I'm an expert in my field.|
223+
---------------------------
224+
\ ^__^
225+
\ (oo)\_______
226+
(__)\ )\/\
227+
||----w |
228+
|| ||
229229
</pre>
230230

231231
<!-- img -->
@@ -406,8 +406,8 @@ <h3 class="demo-header">progress</h3>
406406
<div>
407407
<h3 class="demo-header" id="rangedemo-label">range/output</h3>
408408
<form oninput="result.value=parseInt(rangedemo.value)">
409-
<input type="range" id="rangedemo" name="rangedemo" value="50" aria-labelledby="rangedemo-label" />
410-
<output name="result" for="b">60</output>
409+
<input type="range" id="rangedemo" name="rangedemo" value="0" aria-labelledby="rangedemo-label" />
410+
<output name="result" for="b">0</output>
411411
</form>
412412
</div>
413413
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "boltcss",
3-
"version": "0.2.0",
3+
"version": "0.4.0",
44
"description": "Boltcss classless CSS stylesheet",
55
"main": "bolt.css",
66
"scripts": {},

0 commit comments

Comments
 (0)