Skip to content

Commit 69a36fb

Browse files
author
mrmrs
committed
Fix bug in color docs with incorrect colors showing up.
1 parent 98d79cf commit 69a36fb

File tree

5 files changed

+3997
-1886
lines changed

5 files changed

+3997
-1886
lines changed

‎css/tachyons.css

+55-55
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ img { max-width: 100%; }
388388
*/
389389
.b--black { border-color: #000; }
390390
.b--near-black { border-color: #111; }
391-
.b--dark-gray { border-color: #4d4d4f; }
391+
.b--dark-gray { border-color: #333; }
392392
.b--mid-gray { border-color: #555; }
393393
.b--gray { border-color: #777; }
394394
.b--silver { border-color: #999; }
@@ -424,8 +424,8 @@ img { max-width: 100%; }
424424
.b--dark-red { border-color: #e7040f; }
425425
.b--red { border-color: #ff4136; }
426426
.b--light-red { border-color: #ff725c; }
427-
.b--orange { border-color: #f48120; }
428-
.b--gold { border-color: #faad3f; }
427+
.b--orange { border-color: #ff6300; }
428+
.b--gold { border-color: #ffb700; }
429429
.b--yellow { border-color: #ffd700; }
430430
.b--light-yellow { border-color: #fbf1a9; }
431431
.b--purple { border-color: #5e2ca5; }
@@ -439,8 +439,8 @@ img { max-width: 100%; }
439439
.b--light-green { border-color: #9eebcf; }
440440
.b--navy { border-color: #001b44; }
441441
.b--dark-blue { border-color: #00449e; }
442-
.b--blue { border-color: #408bc9; }
443-
.b--light-blue { border-color: #76c4e2; }
442+
.b--blue { border-color: #357edd; }
443+
.b--light-blue { border-color: #96ccff; }
444444
.b--lightest-blue { border-color: #cdecff; }
445445
.b--washed-blue { border-color: #f6fffe; }
446446
.b--washed-green { border-color: #e8fdf5; }
@@ -918,11 +918,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
918918
Docs: http://tachyons.io/docs/elements/links/
919919
920920
*/
921-
.link { text-decoration: none; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
922-
.link:link, .link:visited { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
923-
.link:hover { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
924-
.link:active { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
925-
.link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; outline: 1px dotted currentColor; }
921+
.link { text-decoration: none; transition: color .15s ease-in; }
922+
.link:link, .link:visited { transition: color .15s ease-in; }
923+
.link:hover { transition: color .15s ease-in; }
924+
.link:active { transition: color .15s ease-in; }
925+
.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
926926
/*
927927
928928
LISTS
@@ -1138,7 +1138,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
11381138
.white-10 { color: rgba( 255, 255, 255, .1 ); }
11391139
.black { color: #000; }
11401140
.near-black { color: #111; }
1141-
.dark-gray { color: #4d4d4f; }
1141+
.dark-gray { color: #333; }
11421142
.mid-gray { color: #555; }
11431143
.gray { color: #777; }
11441144
.silver { color: #999; }
@@ -1150,8 +1150,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
11501150
.dark-red { color: #e7040f; }
11511151
.red { color: #ff4136; }
11521152
.light-red { color: #ff725c; }
1153-
.orange { color: #f48120; }
1154-
.gold { color: #faad3f; }
1153+
.orange { color: #ff6300; }
1154+
.gold { color: #ffb700; }
11551155
.yellow { color: #ffd700; }
11561156
.light-yellow { color: #fbf1a9; }
11571157
.purple { color: #5e2ca5; }
@@ -1165,8 +1165,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
11651165
.light-green { color: #9eebcf; }
11661166
.navy { color: #001b44; }
11671167
.dark-blue { color: #00449e; }
1168-
.blue { color: #408bc9; }
1169-
.light-blue { color: #76c4e2; }
1168+
.blue { color: #357edd; }
1169+
.light-blue { color: #96ccff; }
11701170
.lightest-blue { color: #cdecff; }
11711171
.washed-blue { color: #f6fffe; }
11721172
.washed-green { color: #e8fdf5; }
@@ -1195,7 +1195,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
11951195
/* Background colors */
11961196
.bg-black { background-color: #000; }
11971197
.bg-near-black { background-color: #111; }
1198-
.bg-dark-gray { background-color: #4d4d4f; }
1198+
.bg-dark-gray { background-color: #333; }
11991199
.bg-mid-gray { background-color: #555; }
12001200
.bg-gray { background-color: #777; }
12011201
.bg-silver { background-color: #999; }
@@ -1208,8 +1208,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
12081208
.bg-dark-red { background-color: #e7040f; }
12091209
.bg-red { background-color: #ff4136; }
12101210
.bg-light-red { background-color: #ff725c; }
1211-
.bg-orange { background-color: #f48120; }
1212-
.bg-gold { background-color: #faad3f; }
1211+
.bg-orange { background-color: #ff6300; }
1212+
.bg-gold { background-color: #ffb700; }
12131213
.bg-yellow { background-color: #ffd700; }
12141214
.bg-light-yellow { background-color: #fbf1a9; }
12151215
.bg-purple { background-color: #5e2ca5; }
@@ -1223,8 +1223,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
12231223
.bg-light-green { background-color: #9eebcf; }
12241224
.bg-navy { background-color: #001b44; }
12251225
.bg-dark-blue { background-color: #00449e; }
1226-
.bg-blue { background-color: #408bc9; }
1227-
.bg-light-blue { background-color: #76c4e2; }
1226+
.bg-blue { background-color: #357edd; }
1227+
.bg-light-blue { background-color: #96ccff; }
12281228
.bg-lightest-blue { background-color: #cdecff; }
12291229
.bg-washed-blue { background-color: #f6fffe; }
12301230
.bg-washed-green { background-color: #e8fdf5; }
@@ -1243,8 +1243,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
12431243
.hover-black:focus { color: #000; }
12441244
.hover-near-black:hover { color: #111; }
12451245
.hover-near-black:focus { color: #111; }
1246-
.hover-dark-gray:hover { color: #4d4d4f; }
1247-
.hover-dark-gray:focus { color: #4d4d4f; }
1246+
.hover-dark-gray:hover { color: #333; }
1247+
.hover-dark-gray:focus { color: #333; }
12481248
.hover-mid-gray:hover { color: #555; }
12491249
.hover-mid-gray:focus { color: #555; }
12501250
.hover-gray:hover { color: #777; }
@@ -1302,8 +1302,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
13021302
.hover-bg-black:focus { background-color: #000; }
13031303
.hover-bg-near-black:hover { background-color: #111; }
13041304
.hover-bg-near-black:focus { background-color: #111; }
1305-
.hover-bg-dark-gray:hover { background-color: #4d4d4f; }
1306-
.hover-bg-dark-gray:focus { background-color: #4d4d4f; }
1305+
.hover-bg-dark-gray:hover { background-color: #333; }
1306+
.hover-bg-dark-gray:focus { background-color: #333; }
13071307
.hover-bg-mid-gray:hover { background-color: #555; }
13081308
.hover-bg-mid-gray:focus { background-color: #555; }
13091309
.hover-bg-gray:hover { background-color: #777; }
@@ -1364,10 +1364,10 @@ code, .code { font-family: Consolas, monaco, monospace; }
13641364
.hover-red:focus { color: #ff4136; }
13651365
.hover-light-red:hover { color: #ff725c; }
13661366
.hover-light-red:focus { color: #ff725c; }
1367-
.hover-orange:hover { color: #f48120; }
1368-
.hover-orange:focus { color: #f48120; }
1369-
.hover-gold:hover { color: #faad3f; }
1370-
.hover-gold:focus { color: #faad3f; }
1367+
.hover-orange:hover { color: #ff6300; }
1368+
.hover-orange:focus { color: #ff6300; }
1369+
.hover-gold:hover { color: #ffb700; }
1370+
.hover-gold:focus { color: #ffb700; }
13711371
.hover-yellow:hover { color: #ffd700; }
13721372
.hover-yellow:focus { color: #ffd700; }
13731373
.hover-light-yellow:hover { color: #fbf1a9; }
@@ -1394,10 +1394,10 @@ code, .code { font-family: Consolas, monaco, monospace; }
13941394
.hover-navy:focus { color: #001b44; }
13951395
.hover-dark-blue:hover { color: #00449e; }
13961396
.hover-dark-blue:focus { color: #00449e; }
1397-
.hover-blue:hover { color: #408bc9; }
1398-
.hover-blue:focus { color: #408bc9; }
1399-
.hover-light-blue:hover { color: #76c4e2; }
1400-
.hover-light-blue:focus { color: #76c4e2; }
1397+
.hover-blue:hover { color: #357edd; }
1398+
.hover-blue:focus { color: #357edd; }
1399+
.hover-light-blue:hover { color: #96ccff; }
1400+
.hover-light-blue:focus { color: #96ccff; }
14011401
.hover-lightest-blue:hover { color: #cdecff; }
14021402
.hover-lightest-blue:focus { color: #cdecff; }
14031403
.hover-washed-blue:hover { color: #f6fffe; }
@@ -1414,10 +1414,10 @@ code, .code { font-family: Consolas, monaco, monospace; }
14141414
.hover-bg-red:focus { background-color: #ff4136; }
14151415
.hover-bg-light-red:hover { background-color: #ff725c; }
14161416
.hover-bg-light-red:focus { background-color: #ff725c; }
1417-
.hover-bg-orange:hover { background-color: #f48120; }
1418-
.hover-bg-orange:focus { background-color: #f48120; }
1419-
.hover-bg-gold:hover { background-color: #faad3f; }
1420-
.hover-bg-gold:focus { background-color: #faad3f; }
1417+
.hover-bg-orange:hover { background-color: #ff6300; }
1418+
.hover-bg-orange:focus { background-color: #ff6300; }
1419+
.hover-bg-gold:hover { background-color: #ffb700; }
1420+
.hover-bg-gold:focus { background-color: #ffb700; }
14211421
.hover-bg-yellow:hover { background-color: #ffd700; }
14221422
.hover-bg-yellow:focus { background-color: #ffd700; }
14231423
.hover-bg-light-yellow:hover { background-color: #fbf1a9; }
@@ -1444,10 +1444,10 @@ code, .code { font-family: Consolas, monaco, monospace; }
14441444
.hover-bg-navy:focus { background-color: #001b44; }
14451445
.hover-bg-dark-blue:hover { background-color: #00449e; }
14461446
.hover-bg-dark-blue:focus { background-color: #00449e; }
1447-
.hover-bg-blue:hover { background-color: #408bc9; }
1448-
.hover-bg-blue:focus { background-color: #408bc9; }
1449-
.hover-bg-light-blue:hover { background-color: #76c4e2; }
1450-
.hover-bg-light-blue:focus { background-color: #76c4e2; }
1447+
.hover-bg-blue:hover { background-color: #357edd; }
1448+
.hover-bg-blue:focus { background-color: #357edd; }
1449+
.hover-bg-light-blue:hover { background-color: #96ccff; }
1450+
.hover-bg-light-blue:focus { background-color: #96ccff; }
14511451
.hover-bg-lightest-blue:hover { background-color: #cdecff; }
14521452
.hover-bg-lightest-blue:focus { background-color: #cdecff; }
14531453
.hover-bg-washed-blue:hover { background-color: #f6fffe; }
@@ -1881,16 +1881,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
18811881
Dim element on hover by adding the dim class.
18821882
18831883
*/
1884-
.dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
1885-
.dim:hover, .dim:focus { opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
1886-
.dim:active { opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; }
1884+
.dim { opacity: 1; transition: opacity .15s ease-in; }
1885+
.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
1886+
.dim:active { opacity: .8; transition: opacity .15s ease-out; }
18871887
/*
18881888
18891889
Animate opacity to 100% on hover by adding the glow class.
18901890
18911891
*/
1892-
.glow { -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
1893-
.glow:hover, .glow:focus { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
1892+
.glow { transition: opacity .15s ease-in; }
1893+
.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
18941894
/*
18951895
18961896
Hide child & reveal on hover:
@@ -1905,15 +1905,15 @@ code, .code { font-family: Consolas, monaco, monospace; }
19051905
<div class="child"> Hidden until hover or focus </div>
19061906
</div>
19071907
*/
1908-
.hide-child .child { opacity: 0; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
1909-
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
1908+
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
1909+
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
19101910
.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
19111911
/* Can combine this with overflow-hidden to make background images grow on hover
19121912
* even if you are using background-size: cover */
1913-
.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-out; transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
1913+
.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
19141914
.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
19151915
.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
1916-
.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
1916+
.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
19171917
.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
19181918
.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
19191919
/* Add pointer on hover */
@@ -1924,12 +1924,12 @@ code, .code { font-family: Consolas, monaco, monospace; }
19241924
Performant box-shadow animation pattern from
19251925
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
19261926
*/
1927-
.shadow-hover { cursor: pointer; position: relative; -webkit-transition: all .5s cubic-bezier( .165, .84, .44, 1 ); transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
1928-
.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
1927+
.shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
1928+
.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
19291929
.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
19301930
/* Combine with classes in skins and skins-pseudo for
19311931
* many different transition possibilities. */
1932-
.bg-animate, .bg-animate:hover, .bg-animate:focus { -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; }
1932+
.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
19331933
/*
19341934
19351935
Z-INDEX
@@ -1992,9 +1992,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
19921992
.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
19931993
.nested-copy-seperator p+p { margin-top: 1.5em; }
19941994
.nested-img img { width: 100%; max-width: 100%; display: block; }
1995-
.nested-links a { color: #408bc9; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
1996-
.nested-links a:hover { color: #76c4e2; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
1997-
.nested-links a:focus { color: #76c4e2; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
1995+
.nested-links a { color: #357edd; transition: color .15s ease-in; }
1996+
.nested-links a:hover { color: #96ccff; transition: color .15s ease-in; }
1997+
.nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }
19981998
/*
19991999
20002000
STYLES

‎css/tachyons.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)