├── .gitignore ├── css ├── tachyons-svg.css └── tachyons-svg.min.css ├── license ├── package.json ├── readme.md └── src └── tachyons-svg.css /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | npm-debug.log 31 | 32 | .DS_Store 33 | .AppleDouble 34 | .LSOverride 35 | 36 | # Icon must end with two \r 37 | Icon 38 | 39 | 40 | # Thumbnails 41 | ._* 42 | 43 | # Files that might appear on external disk 44 | .Spotlight-V100 45 | .Trashes 46 | 47 | # Directories potentially created on remote AFP share 48 | .AppleDB 49 | .AppleDesktop 50 | Network Trash Folder 51 | Temporary Items 52 | .apdisk 53 | 54 | # Vim 55 | Session.vim 56 | 57 | # Node 58 | node_modules/* 59 | npm-debug.log 60 | -------------------------------------------------------------------------------- /css/tachyons-svg.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SVG 4 | 5 | Base: 6 | fill = fill color 7 | stroke = stroke color 8 | sw = stroke-width 9 | 10 | Modifiers: 11 | 0 = 0 width stroke 12 | 1 = 1st step in stroke-width scale 13 | 2 = 2nd step in stroke-width scale 14 | 3 = 3rd step in stroke-width scale 15 | 4 = 4th step in stroke-width scale 16 | 5 = 5th step in stroke-width scale 17 | 6 = 6th step in stroke-width scale 18 | 7 = 7th step in stroke-width scale 19 | 20 | Media Query Extensions: 21 | -ns = not-small 22 | -m = medium 23 | -l = large 24 | */ 25 | /* Stroke colors */ 26 | .stroke-black-90 { stroke: rgba( 0, 0, 0, .9 ); } 27 | .stroke-black-80 { stroke: rgba( 0, 0, 0, .8 ); } 28 | .stroke-black-70 { stroke: rgba( 0, 0, 0, .7 ); } 29 | .stroke-black-60 { stroke: rgba( 0, 0, 0, .6 ); } 30 | .stroke-black-50 { stroke: rgba( 0, 0, 0, .5 ); } 31 | .stroke-black-40 { stroke: rgba( 0, 0, 0, .4 ); } 32 | .stroke-black-30 { stroke: rgba( 0, 0, 0, .3 ); } 33 | .stroke-black-20 { stroke: rgba( 0, 0, 0, .2 ); } 34 | .stroke-black-10 { stroke: rgba( 0, 0, 0, .1 ); } 35 | .stroke-black-05 { stroke: rgba( 0, 0, 0, .05 ); } 36 | .stroke-white-90 { stroke: rgba( 255, 255, 255, .9 ); } 37 | .stroke-white-80 { stroke: rgba( 255, 255, 255, .8 ); } 38 | .stroke-white-70 { stroke: rgba( 255, 255, 255, .7 ); } 39 | .stroke-white-60 { stroke: rgba( 255, 255, 255, .6 ); } 40 | .stroke-white-50 { stroke: rgba( 255, 255, 255, .5 ); } 41 | .stroke-white-40 { stroke: rgba( 255, 255, 255, .4 ); } 42 | .stroke-white-30 { stroke: rgba( 255, 255, 255, .3 ); } 43 | .stroke-white-20 { stroke: rgba( 255, 255, 255, .2 ); } 44 | .stroke-white-10 { stroke: rgba( 255, 255, 255, .1 ); } 45 | .stroke-black { stroke: #000; } 46 | .stroke-near-black { stroke: #111; } 47 | .stroke-dark-gray { stroke: #333; } 48 | .stroke-mid-gray { stroke: #555; } 49 | .stroke-gray { stroke: #777; } 50 | .stroke-silver { stroke: #999; } 51 | .stroke-light-silver { stroke: #aaa; } 52 | .stroke-moon-gray { stroke: #ccc; } 53 | .stroke-light-gray { stroke: #eee; } 54 | .stroke-near-white { stroke: #f4f4f4; } 55 | .stroke-white { stroke: #fff; } 56 | .stroke-dark-red { stroke: #e7040f; } 57 | .stroke-red { stroke: #ff4136; } 58 | .stroke-light-red { stroke: #ff725c; } 59 | .stroke-orange { stroke: #ff6300; } 60 | .stroke-gold { stroke: #ffb700; } 61 | .stroke-yellow { stroke: #ffd700; } 62 | .stroke-light-yellow { stroke: #fbf1a9; } 63 | .stroke-purple { stroke: #5e2ca5; } 64 | .stroke-light-purple { stroke: #a463f2; } 65 | .stroke-dark-pink { stroke: #d5008f; } 66 | .stroke-hot-pink { stroke: #ff41b4; } 67 | .stroke-pink { stroke: #ff80cc; } 68 | .stroke-light-pink { stroke: #ffa3d7; } 69 | .stroke-dark-green { stroke: #137752; } 70 | .stroke-green { stroke: #19a974; } 71 | .stroke-light-green { stroke: #9eebcf; } 72 | .stroke-navy { stroke: #001b44; } 73 | .stroke-dark-blue { stroke: #00449e; } 74 | .stroke-blue { stroke: #357edd; } 75 | .stroke-light-blue { stroke: #96ccff; } 76 | .stroke-lightest-blue { stroke: #cdecff; } 77 | .stroke-washed-blue { stroke: #f6fffe; } 78 | .stroke-washed-green { stroke: #e8fdf5; } 79 | .stroke-washed-yellow { stroke: #fffceb; } 80 | .stroke-washed-red { stroke: #ffdfdf; } 81 | .stroke-current-color { stroke: currentColor; } 82 | /* Stroke hover colors */ 83 | .hover-stroke-black-90:hover { stroke: rgba( 0, 0, 0, .9 ); } 84 | .hover-stroke-black-80:hover { stroke: rgba( 0, 0, 0, .8 ); } 85 | .hover-stroke-black-70:hover { stroke: rgba( 0, 0, 0, .7 ); } 86 | .hover-stroke-black-60:hover { stroke: rgba( 0, 0, 0, .6 ); } 87 | .hover-stroke-black-50:hover { stroke: rgba( 0, 0, 0, .5 ); } 88 | .hover-stroke-black-40:hover { stroke: rgba( 0, 0, 0, .4 ); } 89 | .hover-stroke-black-30:hover { stroke: rgba( 0, 0, 0, .3 ); } 90 | .hover-stroke-black-20:hover { stroke: rgba( 0, 0, 0, .2 ); } 91 | .hover-stroke-black-10:hover { stroke: rgba( 0, 0, 0, .1 ); } 92 | .hover-stroke-black-05:hover { stroke: rgba( 0, 0, 0, .05 ); } 93 | .hover-stroke-white-90:hover { stroke: rgba( 255, 255, 255, .9 ); } 94 | .hover-stroke-white-80:hover { stroke: rgba( 255, 255, 255, .8 ); } 95 | .hover-stroke-white-70:hover { stroke: rgba( 255, 255, 255, .7 ); } 96 | .hover-stroke-white-60:hover { stroke: rgba( 255, 255, 255, .6 ); } 97 | .hover-stroke-white-50:hover { stroke: rgba( 255, 255, 255, .5 ); } 98 | .hover-stroke-white-40:hover { stroke: rgba( 255, 255, 255, .4 ); } 99 | .hover-stroke-white-30:hover { stroke: rgba( 255, 255, 255, .3 ); } 100 | .hover-stroke-white-20:hover { stroke: rgba( 255, 255, 255, .2 ); } 101 | .hover-stroke-white-10:hover { stroke: rgba( 255, 255, 255, .1 ); } 102 | .hover-stroke-black:hover { stroke: #000; } 103 | .hover-stroke-near-black:hover { stroke: #111; } 104 | .hover-stroke-dark-gray:hover { stroke: #333; } 105 | .hover-stroke-mid-gray:hover { stroke: #555; } 106 | .hover-stroke-gray:hover { stroke: #777; } 107 | .hover-stroke-silver:hover { stroke: #999; } 108 | .hover-stroke-light-silver:hover { stroke: #aaa; } 109 | .hover-stroke-moon-gray:hover { stroke: #ccc; } 110 | .hover-stroke-light-gray:hover { stroke: #eee; } 111 | .hover-stroke-near-white:hover { stroke: #f4f4f4; } 112 | .hover-stroke-white:hover { stroke: #fff; } 113 | .hover-stroke-dark-red:hover { stroke: #e7040f; } 114 | .hover-stroke-red:hover { stroke: #ff4136; } 115 | .hover-stroke-light-red:hover { stroke: #ff725c; } 116 | .hover-stroke-orange:hover { stroke: #ff6300; } 117 | .hover-stroke-gold:hover { stroke: #ffb700; } 118 | .hover-stroke-yellow:hover { stroke: #ffd700; } 119 | .hover-stroke-light-yellow:hover { stroke: #fbf1a9; } 120 | .hover-stroke-purple:hover { stroke: #5e2ca5; } 121 | .hover-stroke-light-purple:hover { stroke: #a463f2; } 122 | .hover-stroke-dark-pink:hover { stroke: #d5008f; } 123 | .hover-stroke-hot-pink:hover { stroke: #ff41b4; } 124 | .hover-stroke-pink:hover { stroke: #ff80cc; } 125 | .hover-stroke-light-pink:hover { stroke: #ffa3d7; } 126 | .hover-stroke-dark-green:hover { stroke: #137752; } 127 | .hover-stroke-green:hover { stroke: #19a974; } 128 | .hover-stroke-light-green:hover { stroke: #9eebcf; } 129 | .hover-stroke-navy:hover { stroke: #001b44; } 130 | .hover-stroke-dark-blue:hover { stroke: #00449e; } 131 | .hover-stroke-blue:hover { stroke: #357edd; } 132 | .hover-stroke-light-blue:hover { stroke: #96ccff; } 133 | .hover-stroke-lightest-blue:hover { stroke: #cdecff; } 134 | .hover-stroke-washed-blue:hover { stroke: #f6fffe; } 135 | .hover-stroke-washed-green:hover { stroke: #e8fdf5; } 136 | .hover-stroke-washed-yellow:hover { stroke: #fffceb; } 137 | .hover-stroke-washed-red:hover { stroke: #ffdfdf; } 138 | .hover-stroke-current-color:hover { stroke: currentColor; } 139 | /* Fill colors */ 140 | .fill-black-90 { fill: rgba( 0, 0, 0, .9 ); } 141 | .fill-black-80 { fill: rgba( 0, 0, 0, .8 ); } 142 | .fill-black-70 { fill: rgba( 0, 0, 0, .7 ); } 143 | .fill-black-60 { fill: rgba( 0, 0, 0, .6 ); } 144 | .fill-black-50 { fill: rgba( 0, 0, 0, .5 ); } 145 | .fill-black-40 { fill: rgba( 0, 0, 0, .4 ); } 146 | .fill-black-30 { fill: rgba( 0, 0, 0, .3 ); } 147 | .fill-black-20 { fill: rgba( 0, 0, 0, .2 ); } 148 | .fill-black-10 { fill: rgba( 0, 0, 0, .1 ); } 149 | .fill-black-05 { fill: rgba( 0, 0, 0, .05 ); } 150 | .fill-white-90 { fill: rgba( 255, 255, 255, .9 ); } 151 | .fill-white-80 { fill: rgba( 255, 255, 255, .8 ); } 152 | .fill-white-70 { fill: rgba( 255, 255, 255, .7 ); } 153 | .fill-white-60 { fill: rgba( 255, 255, 255, .6 ); } 154 | .fill-white-50 { fill: rgba( 255, 255, 255, .5 ); } 155 | .fill-white-40 { fill: rgba( 255, 255, 255, .4 ); } 156 | .fill-white-30 { fill: rgba( 255, 255, 255, .3 ); } 157 | .fill-white-20 { fill: rgba( 255, 255, 255, .2 ); } 158 | .fill-white-10 { fill: rgba( 255, 255, 255, .1 ); } 159 | .fill-black { fill: #000; } 160 | .fill-near-black { fill: #111; } 161 | .fill-dark-gray { fill: #333; } 162 | .fill-mid-gray { fill: #555; } 163 | .fill-gray { fill: #777; } 164 | .fill-silver { fill: #999; } 165 | .fill-light-silver { fill: #aaa; } 166 | .fill-moon-gray { fill: #ccc; } 167 | .fill-light-gray { fill: #eee; } 168 | .fill-near-white { fill: #f4f4f4; } 169 | .fill-white { fill: #fff; } 170 | .fill-transparent { fill: transparent; } 171 | .fill-dark-red { fill: #e7040f; } 172 | .fill-red { fill: #ff4136; } 173 | .fill-light-red { fill: #ff725c; } 174 | .fill-orange { fill: #ff6300; } 175 | .fill-gold { fill: #ffb700; } 176 | .fill-yellow { fill: #ffd700; } 177 | .fill-light-yellow { fill: #fbf1a9; } 178 | .fill-purple { fill: #5e2ca5; } 179 | .fill-light-purple { fill: #a463f2; } 180 | .fill-dark-pink { fill: #d5008f; } 181 | .fill-hot-pink { fill: #ff41b4; } 182 | .fill-pink { fill: #ff80cc; } 183 | .fill-light-pink { fill: #ffa3d7; } 184 | .fill-dark-green { fill: #137752; } 185 | .fill-green { fill: #19a974; } 186 | .fill-light-green { fill: #9eebcf; } 187 | .fill-navy { fill: #001b44; } 188 | .fill-dark-blue { fill: #00449e; } 189 | .fill-blue { fill: #357edd; } 190 | .fill-light-blue { fill: #96ccff; } 191 | .fill-lightest-blue { fill: #cdecff; } 192 | .fill-washed-blue { fill: #f6fffe; } 193 | .fill-washed-green { fill: #e8fdf5; } 194 | .fill-washed-yellow { fill: #fffceb; } 195 | .fill-washed-red { fill: #ffdfdf; } 196 | .fill-current-color { fill: currentColor; } 197 | /* Fill hover colors */ 198 | .hover-fill-black-90:hover { fill: rgba( 0, 0, 0, .9 ); } 199 | .hover-fill-black-80:hover { fill: rgba( 0, 0, 0, .8 ); } 200 | .hover-fill-black-70:hover { fill: rgba( 0, 0, 0, .7 ); } 201 | .hover-fill-black-60:hover { fill: rgba( 0, 0, 0, .6 ); } 202 | .hover-fill-black-50:hover { fill: rgba( 0, 0, 0, .5 ); } 203 | .hover-fill-black-40:hover { fill: rgba( 0, 0, 0, .4 ); } 204 | .hover-fill-black-30:hover { fill: rgba( 0, 0, 0, .3 ); } 205 | .hover-fill-black-20:hover { fill: rgba( 0, 0, 0, .2 ); } 206 | .hover-fill-black-10:hover { fill: rgba( 0, 0, 0, .1 ); } 207 | .hover-fill-black-05:hover { fill: rgba( 0, 0, 0, .05 ); } 208 | .hover-fill-white-90:hover { fill: rgba( 255, 255, 255, .9 ); } 209 | .hover-fill-white-80:hover { fill: rgba( 255, 255, 255, .8 ); } 210 | .hover-fill-white-70:hover { fill: rgba( 255, 255, 255, .7 ); } 211 | .hover-fill-white-60:hover { fill: rgba( 255, 255, 255, .6 ); } 212 | .hover-fill-white-50:hover { fill: rgba( 255, 255, 255, .5 ); } 213 | .hover-fill-white-40:hover { fill: rgba( 255, 255, 255, .4 ); } 214 | .hover-fill-white-30:hover { fill: rgba( 255, 255, 255, .3 ); } 215 | .hover-fill-white-20:hover { fill: rgba( 255, 255, 255, .2 ); } 216 | .hover-fill-white-10:hover { fill: rgba( 255, 255, 255, .1 ); } 217 | .hover-fill-black:hover { fill: #000; } 218 | .hover-fill-near-black:hover { fill: #111; } 219 | .hover-fill-dark-gray:hover { fill: #333; } 220 | .hover-fill-mid-gray:hover { fill: #555; } 221 | .hover-fill-gray:hover { fill: #777; } 222 | .hover-fill-silver :hover { fill: #999; } 223 | .hover-fill-light-silver:hover { fill: #aaa; } 224 | .hover-fill-moon-gray:hover { fill: #ccc; } 225 | .hover-fill-light-gray:hover { fill: #eee; } 226 | .hover-fill-near-white:hover { fill: #f4f4f4; } 227 | .hover-fill-white:hover { fill: #fff; } 228 | .hover-fill-transparent:hover { fill: transparent; } 229 | .hover-fill-dark-red:hover { fill: #e7040f; } 230 | .hover-fill-red:hover { fill: #ff4136; } 231 | .hover-fill-light-red:hover { fill: #ff725c; } 232 | .hover-fill-orange:hover { fill: #ff6300; } 233 | .hover-fill-gold:hover { fill: #ffb700; } 234 | .hover-fill-yellow:hover { fill: #ffd700; } 235 | .hover-fill-light-yellow:hover { fill: #fbf1a9; } 236 | .hover-fill-purple:hover { fill: #5e2ca5; } 237 | .hover-fill-light-purple:hover { fill: #a463f2; } 238 | .hover-fill-dark-pink:hover { fill: #d5008f; } 239 | .hover-fill-hot-pink:hover { fill: #ff41b4; } 240 | .hover-fill-pink:hover { fill: #ff80cc; } 241 | .hover-fill-light-pink:hover { fill: #ffa3d7; } 242 | .hover-fill-dark-green:hover { fill: #137752; } 243 | .hover-fill-green:hover { fill: #19a974; } 244 | .hover-fill-light-green:hover { fill: #9eebcf; } 245 | .hover-fill-navy:hover { fill: #001b44; } 246 | .hover-fill-dark-blue:hover { fill: #00449e; } 247 | .hover-fill-blue:hover { fill: #357edd; } 248 | .hover-fill-light-blue:hover { fill: #96ccff; } 249 | .hover-fill-lightest-blue:hover { fill: #cdecff; } 250 | .hover-fill-washed-blue:hover { fill: #f6fffe; } 251 | .hover-fill-washed-green:hover { fill: #e8fdf5; } 252 | .hover-fill-washed-yellow:hover { fill: #fffceb; } 253 | .hover-fill-washed-red:hover { fill: #ffdfdf; } 254 | .hover-fill-current-color:hover { fill: currentColor; } 255 | /* Stroke widths */ 256 | .sw0 { stroke-width: 0; } 257 | .sw1 { stroke-width: .125rem; } 258 | .sw2 { stroke-width: .25rem; } 259 | .sw3 { stroke-width: .5rem; } 260 | .sw4 { stroke-width: 1rem; } 261 | .sw5 { stroke-width: 2rem; } 262 | .sw6 { stroke-width: 4rem; } 263 | .sw7 { stroke-width: 8rem; } 264 | @media screen and (min-width: 30em) { 265 | .sw0-ns { stroke-width: 0; } 266 | .sw1-ns { stroke-width: .125rem; } 267 | .sw2-ns { stroke-width: .25rem; } 268 | .sw3-ns { stroke-width: .5rem; } 269 | .sw4-ns { stroke-width: 1rem; } 270 | .sw5-ns { stroke-width: 2rem; } 271 | .sw6-ns { stroke-width: 4rem; } 272 | .sw7-ns { stroke-width: 8rem; } 273 | } 274 | @media screen and (min-width: 30em) and (max-width: 60em) { 275 | .sw0-m { stroke-width: 0; } 276 | .sw1-m { stroke-width: .125rem; } 277 | .sw2-m { stroke-width: .25rem; } 278 | .sw3-m { stroke-width: .5rem; } 279 | .sw4-m { stroke-width: 1rem; } 280 | .sw5-m { stroke-width: 2rem; } 281 | .sw6-m { stroke-width: 4rem; } 282 | .sw7-m { stroke-width: 8rem; } 283 | } 284 | @media screen and (min-width: 60em) { 285 | .sw0-l { stroke-width: 0; } 286 | .sw1-l { stroke-width: .125rem; } 287 | .sw2-l { stroke-width: .25rem; } 288 | .sw3-l { stroke-width: .5rem; } 289 | .sw4-l { stroke-width: 1rem; } 290 | .sw5-l { stroke-width: 2rem; } 291 | .sw6-l { stroke-width: 4rem; } 292 | .sw7-l { stroke-width: 8rem; } 293 | } 294 | 295 | -------------------------------------------------------------------------------- /css/tachyons-svg.min.css: -------------------------------------------------------------------------------- 1 | .stroke-black-90{stroke:rgba(0,0,0,.9)}.stroke-black-80{stroke:rgba(0,0,0,.8)}.stroke-black-70{stroke:rgba(0,0,0,.7)}.stroke-black-60{stroke:rgba(0,0,0,.6)}.stroke-black-50{stroke:rgba(0,0,0,.5)}.stroke-black-40{stroke:rgba(0,0,0,.4)}.stroke-black-30{stroke:rgba(0,0,0,.3)}.stroke-black-20{stroke:rgba(0,0,0,.2)}.stroke-black-10{stroke:rgba(0,0,0,.1)}.stroke-black-05{stroke:rgba(0,0,0,.05)}.stroke-white-90{stroke:hsla(0,0%,100%,.9)}.stroke-white-80{stroke:hsla(0,0%,100%,.8)}.stroke-white-70{stroke:hsla(0,0%,100%,.7)}.stroke-white-60{stroke:hsla(0,0%,100%,.6)}.stroke-white-50{stroke:hsla(0,0%,100%,.5)}.stroke-white-40{stroke:hsla(0,0%,100%,.4)}.stroke-white-30{stroke:hsla(0,0%,100%,.3)}.stroke-white-20{stroke:hsla(0,0%,100%,.2)}.stroke-white-10{stroke:hsla(0,0%,100%,.1)}.stroke-black{stroke:#000}.stroke-near-black{stroke:#111}.stroke-dark-gray{stroke:#333}.stroke-mid-gray{stroke:#555}.stroke-gray{stroke:#777}.stroke-silver{stroke:#999}.stroke-light-silver{stroke:#aaa}.stroke-moon-gray{stroke:#ccc}.stroke-light-gray{stroke:#eee}.stroke-near-white{stroke:#f4f4f4}.stroke-white{stroke:#fff}.stroke-dark-red{stroke:#e7040f}.stroke-red{stroke:#ff4136}.stroke-light-red{stroke:#ff725c}.stroke-orange{stroke:#ff6300}.stroke-gold{stroke:#ffb700}.stroke-yellow{stroke:gold}.stroke-light-yellow{stroke:#fbf1a9}.stroke-purple{stroke:#5e2ca5}.stroke-light-purple{stroke:#a463f2}.stroke-dark-pink{stroke:#d5008f}.stroke-hot-pink{stroke:#ff41b4}.stroke-pink{stroke:#ff80cc}.stroke-light-pink{stroke:#ffa3d7}.stroke-dark-green{stroke:#137752}.stroke-green{stroke:#19a974}.stroke-light-green{stroke:#9eebcf}.stroke-navy{stroke:#001b44}.stroke-dark-blue{stroke:#00449e}.stroke-blue{stroke:#357edd}.stroke-light-blue{stroke:#96ccff}.stroke-lightest-blue{stroke:#cdecff}.stroke-washed-blue{stroke:#f6fffe}.stroke-washed-green{stroke:#e8fdf5}.stroke-washed-yellow{stroke:#fffceb}.stroke-washed-red{stroke:#ffdfdf}.stroke-current-color{stroke:currentColor}.hover-stroke-black-90:hover{stroke:rgba(0,0,0,.9)}.hover-stroke-black-80:hover{stroke:rgba(0,0,0,.8)}.hover-stroke-black-70:hover{stroke:rgba(0,0,0,.7)}.hover-stroke-black-60:hover{stroke:rgba(0,0,0,.6)}.hover-stroke-black-50:hover{stroke:rgba(0,0,0,.5)}.hover-stroke-black-40:hover{stroke:rgba(0,0,0,.4)}.hover-stroke-black-30:hover{stroke:rgba(0,0,0,.3)}.hover-stroke-black-20:hover{stroke:rgba(0,0,0,.2)}.hover-stroke-black-10:hover{stroke:rgba(0,0,0,.1)}.hover-stroke-black-05:hover{stroke:rgba(0,0,0,.05)}.hover-stroke-white-90:hover{stroke:hsla(0,0%,100%,.9)}.hover-stroke-white-80:hover{stroke:hsla(0,0%,100%,.8)}.hover-stroke-white-70:hover{stroke:hsla(0,0%,100%,.7)}.hover-stroke-white-60:hover{stroke:hsla(0,0%,100%,.6)}.hover-stroke-white-50:hover{stroke:hsla(0,0%,100%,.5)}.hover-stroke-white-40:hover{stroke:hsla(0,0%,100%,.4)}.hover-stroke-white-30:hover{stroke:hsla(0,0%,100%,.3)}.hover-stroke-white-20:hover{stroke:hsla(0,0%,100%,.2)}.hover-stroke-white-10:hover{stroke:hsla(0,0%,100%,.1)}.hover-stroke-black:hover{stroke:#000}.hover-stroke-near-black:hover{stroke:#111}.hover-stroke-dark-gray:hover{stroke:#333}.hover-stroke-mid-gray:hover{stroke:#555}.hover-stroke-gray:hover{stroke:#777}.hover-stroke-silver:hover{stroke:#999}.hover-stroke-light-silver:hover{stroke:#aaa}.hover-stroke-moon-gray:hover{stroke:#ccc}.hover-stroke-light-gray:hover{stroke:#eee}.hover-stroke-near-white:hover{stroke:#f4f4f4}.hover-stroke-white:hover{stroke:#fff}.hover-stroke-dark-red:hover{stroke:#e7040f}.hover-stroke-red:hover{stroke:#ff4136}.hover-stroke-light-red:hover{stroke:#ff725c}.hover-stroke-orange:hover{stroke:#ff6300}.hover-stroke-gold:hover{stroke:#ffb700}.hover-stroke-yellow:hover{stroke:gold}.hover-stroke-light-yellow:hover{stroke:#fbf1a9}.hover-stroke-purple:hover{stroke:#5e2ca5}.hover-stroke-light-purple:hover{stroke:#a463f2}.hover-stroke-dark-pink:hover{stroke:#d5008f}.hover-stroke-hot-pink:hover{stroke:#ff41b4}.hover-stroke-pink:hover{stroke:#ff80cc}.hover-stroke-light-pink:hover{stroke:#ffa3d7}.hover-stroke-dark-green:hover{stroke:#137752}.hover-stroke-green:hover{stroke:#19a974}.hover-stroke-light-green:hover{stroke:#9eebcf}.hover-stroke-navy:hover{stroke:#001b44}.hover-stroke-dark-blue:hover{stroke:#00449e}.hover-stroke-blue:hover{stroke:#357edd}.hover-stroke-light-blue:hover{stroke:#96ccff}.hover-stroke-lightest-blue:hover{stroke:#cdecff}.hover-stroke-washed-blue:hover{stroke:#f6fffe}.hover-stroke-washed-green:hover{stroke:#e8fdf5}.hover-stroke-washed-yellow:hover{stroke:#fffceb}.hover-stroke-washed-red:hover{stroke:#ffdfdf}.hover-stroke-current-color:hover{stroke:currentColor}.fill-black-90{fill:rgba(0,0,0,.9)}.fill-black-80{fill:rgba(0,0,0,.8)}.fill-black-70{fill:rgba(0,0,0,.7)}.fill-black-60{fill:rgba(0,0,0,.6)}.fill-black-50{fill:rgba(0,0,0,.5)}.fill-black-40{fill:rgba(0,0,0,.4)}.fill-black-30{fill:rgba(0,0,0,.3)}.fill-black-20{fill:rgba(0,0,0,.2)}.fill-black-10{fill:rgba(0,0,0,.1)}.fill-black-05{fill:rgba(0,0,0,.05)}.fill-white-90{fill:hsla(0,0%,100%,.9)}.fill-white-80{fill:hsla(0,0%,100%,.8)}.fill-white-70{fill:hsla(0,0%,100%,.7)}.fill-white-60{fill:hsla(0,0%,100%,.6)}.fill-white-50{fill:hsla(0,0%,100%,.5)}.fill-white-40{fill:hsla(0,0%,100%,.4)}.fill-white-30{fill:hsla(0,0%,100%,.3)}.fill-white-20{fill:hsla(0,0%,100%,.2)}.fill-white-10{fill:hsla(0,0%,100%,.1)}.fill-black{fill:#000}.fill-near-black{fill:#111}.fill-dark-gray{fill:#333}.fill-mid-gray{fill:#555}.fill-gray{fill:#777}.fill-silver{fill:#999}.fill-light-silver{fill:#aaa}.fill-moon-gray{fill:#ccc}.fill-light-gray{fill:#eee}.fill-near-white{fill:#f4f4f4}.fill-white{fill:#fff}.fill-transparent{fill:transparent}.fill-dark-red{fill:#e7040f}.fill-red{fill:#ff4136}.fill-light-red{fill:#ff725c}.fill-orange{fill:#ff6300}.fill-gold{fill:#ffb700}.fill-yellow{fill:gold}.fill-light-yellow{fill:#fbf1a9}.fill-purple{fill:#5e2ca5}.fill-light-purple{fill:#a463f2}.fill-dark-pink{fill:#d5008f}.fill-hot-pink{fill:#ff41b4}.fill-pink{fill:#ff80cc}.fill-light-pink{fill:#ffa3d7}.fill-dark-green{fill:#137752}.fill-green{fill:#19a974}.fill-light-green{fill:#9eebcf}.fill-navy{fill:#001b44}.fill-dark-blue{fill:#00449e}.fill-blue{fill:#357edd}.fill-light-blue{fill:#96ccff}.fill-lightest-blue{fill:#cdecff}.fill-washed-blue{fill:#f6fffe}.fill-washed-green{fill:#e8fdf5}.fill-washed-yellow{fill:#fffceb}.fill-washed-red{fill:#ffdfdf}.fill-current-color{fill:currentColor}.hover-fill-black-90:hover{fill:rgba(0,0,0,.9)}.hover-fill-black-80:hover{fill:rgba(0,0,0,.8)}.hover-fill-black-70:hover{fill:rgba(0,0,0,.7)}.hover-fill-black-60:hover{fill:rgba(0,0,0,.6)}.hover-fill-black-50:hover{fill:rgba(0,0,0,.5)}.hover-fill-black-40:hover{fill:rgba(0,0,0,.4)}.hover-fill-black-30:hover{fill:rgba(0,0,0,.3)}.hover-fill-black-20:hover{fill:rgba(0,0,0,.2)}.hover-fill-black-10:hover{fill:rgba(0,0,0,.1)}.hover-fill-black-05:hover{fill:rgba(0,0,0,.05)}.hover-fill-white-90:hover{fill:hsla(0,0%,100%,.9)}.hover-fill-white-80:hover{fill:hsla(0,0%,100%,.8)}.hover-fill-white-70:hover{fill:hsla(0,0%,100%,.7)}.hover-fill-white-60:hover{fill:hsla(0,0%,100%,.6)}.hover-fill-white-50:hover{fill:hsla(0,0%,100%,.5)}.hover-fill-white-40:hover{fill:hsla(0,0%,100%,.4)}.hover-fill-white-30:hover{fill:hsla(0,0%,100%,.3)}.hover-fill-white-20:hover{fill:hsla(0,0%,100%,.2)}.hover-fill-white-10:hover{fill:hsla(0,0%,100%,.1)}.hover-fill-black:hover{fill:#000}.hover-fill-near-black:hover{fill:#111}.hover-fill-dark-gray:hover{fill:#333}.hover-fill-mid-gray:hover{fill:#555}.hover-fill-gray:hover{fill:#777}.hover-fill-silver :hover{fill:#999}.hover-fill-light-silver:hover{fill:#aaa}.hover-fill-moon-gray:hover{fill:#ccc}.hover-fill-light-gray:hover{fill:#eee}.hover-fill-near-white:hover{fill:#f4f4f4}.hover-fill-white:hover{fill:#fff}.hover-fill-transparent:hover{fill:transparent}.hover-fill-dark-red:hover{fill:#e7040f}.hover-fill-red:hover{fill:#ff4136}.hover-fill-light-red:hover{fill:#ff725c}.hover-fill-orange:hover{fill:#ff6300}.hover-fill-gold:hover{fill:#ffb700}.hover-fill-yellow:hover{fill:gold}.hover-fill-light-yellow:hover{fill:#fbf1a9}.hover-fill-purple:hover{fill:#5e2ca5}.hover-fill-light-purple:hover{fill:#a463f2}.hover-fill-dark-pink:hover{fill:#d5008f}.hover-fill-hot-pink:hover{fill:#ff41b4}.hover-fill-pink:hover{fill:#ff80cc}.hover-fill-light-pink:hover{fill:#ffa3d7}.hover-fill-dark-green:hover{fill:#137752}.hover-fill-green:hover{fill:#19a974}.hover-fill-light-green:hover{fill:#9eebcf}.hover-fill-navy:hover{fill:#001b44}.hover-fill-dark-blue:hover{fill:#00449e}.hover-fill-blue:hover{fill:#357edd}.hover-fill-light-blue:hover{fill:#96ccff}.hover-fill-lightest-blue:hover{fill:#cdecff}.hover-fill-washed-blue:hover{fill:#f6fffe}.hover-fill-washed-green:hover{fill:#e8fdf5}.hover-fill-washed-yellow:hover{fill:#fffceb}.hover-fill-washed-red:hover{fill:#ffdfdf}.hover-fill-current-color:hover{fill:currentColor}.sw0{stroke-width:0}.sw1{stroke-width:.125rem}.sw2{stroke-width:.25rem}.sw3{stroke-width:.5rem}.sw4{stroke-width:1rem}.sw5{stroke-width:2rem}.sw6{stroke-width:4rem}.sw7{stroke-width:8rem}@media screen and (min-width:30em){.sw0-ns{stroke-width:0}.sw1-ns{stroke-width:.125rem}.sw2-ns{stroke-width:.25rem}.sw3-ns{stroke-width:.5rem}.sw4-ns{stroke-width:1rem}.sw5-ns{stroke-width:2rem}.sw6-ns{stroke-width:4rem}.sw7-ns{stroke-width:8rem}}@media screen and (min-width:30em) and (max-width:60em){.sw0-m{stroke-width:0}.sw1-m{stroke-width:.125rem}.sw2-m{stroke-width:.25rem}.sw3-m{stroke-width:.5rem}.sw4-m{stroke-width:1rem}.sw5-m{stroke-width:2rem}.sw6-m{stroke-width:4rem}.sw7-m{stroke-width:8rem}}@media screen and (min-width:60em){.sw0-l{stroke-width:0}.sw1-l{stroke-width:.125rem}.sw2-l{stroke-width:.25rem}.sw3-l{stroke-width:.5rem}.sw4-l{stroke-width:1rem}.sw5-l{stroke-width:2rem}.sw6-l{stroke-width:4rem}.sw7-l{stroke-width:8rem}} 2 | 3 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 @mrmrs (mrmrs.io) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tachyons-svg", 3 | "version": "1.0.1", 4 | "style": "src/tachyons-svg.css", 5 | "main": "src/tachyons-svg.css", 6 | "description": "Tachyons module for manipulating common SVG attributes", 7 | "keywords": [ 8 | "tachyons", 9 | "tachyons-css" 10 | ], 11 | "files": [ 12 | "src", 13 | "css" 14 | ], 15 | "repository": "lowmess/tachyons-svg", 16 | "author": { 17 | "name": "Alec Lomas", 18 | "email": "alec@lowmess.com", 19 | "url": "http://lowmess.com" 20 | }, 21 | "license": "MIT", 22 | "devDependencies": { 23 | "tachyons-cli": "^1.0.5", 24 | "watch": "^0.19.1" 25 | }, 26 | "scripts": { 27 | "start": "npm run build:watch", 28 | "build:css": "tachyons src/tachyons-svg.css > css/tachyons-svg.css", 29 | "build:minify": "tachyons src/tachyons-svg.css --minify > css/tachyons-svg.min.css", 30 | "build:docs": "tachyons src/tachyons-svg.css --generate-docs -a --package=../../package.json > readme.md", 31 | "build": "npm run build:css && npm run build:minify && npm run build:docs", 32 | "build:watch": "watch 'npm run build' ./src" 33 | }, 34 | "tachyonsModule": { 35 | "category": "elements", 36 | "isCore": false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # tachyons-svg 1.0.1 2 | 3 | Tachyons module for manipulating common SVG attributes 4 | 5 | #### Stats 6 | 7 | 2013 | 258 | 258 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev tachyons-svg 17 | ``` 18 | 19 | Learn more about using css installed with npm: 20 | * https://webpack.github.io/docs/stylesheets.html 21 | * https://github.com/defunctzombie/npm-css 22 | 23 | #### With Git 24 | 25 | http: 26 | ``` 27 | git clone https://github.com/tachyons-css/tachyons-svg 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/tachyons-svg.git 33 | ``` 34 | 35 | ## Usage 36 | 37 | #### Using with [Postcss](https://github.com/postcss/postcss) 38 | 39 | Import the css module 40 | 41 | ```css 42 | @import "tachyons-svg"; 43 | ``` 44 | 45 | Then process the css using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli) 46 | 47 | ```sh 48 | $ npm i -g tachyons-cli 49 | $ tachyons path/to/css-file.css > dist/t.css 50 | ``` 51 | 52 | #### Using the css 53 | 54 | ##### CDN 55 | The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with: 56 | 57 | ``` 58 | 59 | ``` 60 | 61 | ##### Locally 62 | The built css is located in the `css` directory. It contains an unminified and minified version. 63 | You can either cut and paste that css or link to it directly in your html. 64 | 65 | ```html 66 | 67 | ``` 68 | 69 | #### Development 70 | 71 | The source css files can be found in the `src` directory. 72 | Running `$ npm start` will process the source css and place the built css in the `css` directory. 73 | 74 | ## The css 75 | 76 | ```css 77 | /* 78 | 79 | SVG 80 | 81 | Base: 82 | fill = fill color 83 | stroke = stroke color 84 | sw = stroke-width 85 | 86 | Modifiers: 87 | 0 = 0 width stroke 88 | 1 = 1st step in stroke-width scale 89 | 2 = 2nd step in stroke-width scale 90 | 3 = 3rd step in stroke-width scale 91 | 4 = 4th step in stroke-width scale 92 | 5 = 5th step in stroke-width scale 93 | 6 = 6th step in stroke-width scale 94 | 7 = 7th step in stroke-width scale 95 | 96 | Media Query Extensions: 97 | -ns = not-small 98 | -m = medium 99 | -l = large 100 | */ 101 | /* Stroke colors */ 102 | .stroke-black-90 { stroke: rgba( 0, 0, 0, .9 ); } 103 | .stroke-black-80 { stroke: rgba( 0, 0, 0, .8 ); } 104 | .stroke-black-70 { stroke: rgba( 0, 0, 0, .7 ); } 105 | .stroke-black-60 { stroke: rgba( 0, 0, 0, .6 ); } 106 | .stroke-black-50 { stroke: rgba( 0, 0, 0, .5 ); } 107 | .stroke-black-40 { stroke: rgba( 0, 0, 0, .4 ); } 108 | .stroke-black-30 { stroke: rgba( 0, 0, 0, .3 ); } 109 | .stroke-black-20 { stroke: rgba( 0, 0, 0, .2 ); } 110 | .stroke-black-10 { stroke: rgba( 0, 0, 0, .1 ); } 111 | .stroke-black-05 { stroke: rgba( 0, 0, 0, .05 ); } 112 | .stroke-white-90 { stroke: rgba( 255, 255, 255, .9 ); } 113 | .stroke-white-80 { stroke: rgba( 255, 255, 255, .8 ); } 114 | .stroke-white-70 { stroke: rgba( 255, 255, 255, .7 ); } 115 | .stroke-white-60 { stroke: rgba( 255, 255, 255, .6 ); } 116 | .stroke-white-50 { stroke: rgba( 255, 255, 255, .5 ); } 117 | .stroke-white-40 { stroke: rgba( 255, 255, 255, .4 ); } 118 | .stroke-white-30 { stroke: rgba( 255, 255, 255, .3 ); } 119 | .stroke-white-20 { stroke: rgba( 255, 255, 255, .2 ); } 120 | .stroke-white-10 { stroke: rgba( 255, 255, 255, .1 ); } 121 | .stroke-black { stroke: #000; } 122 | .stroke-near-black { stroke: #111; } 123 | .stroke-dark-gray { stroke: #333; } 124 | .stroke-mid-gray { stroke: #555; } 125 | .stroke-gray { stroke: #777; } 126 | .stroke-silver { stroke: #999; } 127 | .stroke-light-silver { stroke: #aaa; } 128 | .stroke-moon-gray { stroke: #ccc; } 129 | .stroke-light-gray { stroke: #eee; } 130 | .stroke-near-white { stroke: #f4f4f4; } 131 | .stroke-white { stroke: #fff; } 132 | .stroke-dark-red { stroke: #e7040f; } 133 | .stroke-red { stroke: #ff4136; } 134 | .stroke-light-red { stroke: #ff725c; } 135 | .stroke-orange { stroke: #ff6300; } 136 | .stroke-gold { stroke: #ffb700; } 137 | .stroke-yellow { stroke: #ffd700; } 138 | .stroke-light-yellow { stroke: #fbf1a9; } 139 | .stroke-purple { stroke: #5e2ca5; } 140 | .stroke-light-purple { stroke: #a463f2; } 141 | .stroke-dark-pink { stroke: #d5008f; } 142 | .stroke-hot-pink { stroke: #ff41b4; } 143 | .stroke-pink { stroke: #ff80cc; } 144 | .stroke-light-pink { stroke: #ffa3d7; } 145 | .stroke-dark-green { stroke: #137752; } 146 | .stroke-green { stroke: #19a974; } 147 | .stroke-light-green { stroke: #9eebcf; } 148 | .stroke-navy { stroke: #001b44; } 149 | .stroke-dark-blue { stroke: #00449e; } 150 | .stroke-blue { stroke: #357edd; } 151 | .stroke-light-blue { stroke: #96ccff; } 152 | .stroke-lightest-blue { stroke: #cdecff; } 153 | .stroke-washed-blue { stroke: #f6fffe; } 154 | .stroke-washed-green { stroke: #e8fdf5; } 155 | .stroke-washed-yellow { stroke: #fffceb; } 156 | .stroke-washed-red { stroke: #ffdfdf; } 157 | .stroke-current-color { stroke: currentColor; } 158 | /* Stroke hover colors */ 159 | .hover-stroke-black-90:hover { stroke: rgba( 0, 0, 0, .9 ); } 160 | .hover-stroke-black-80:hover { stroke: rgba( 0, 0, 0, .8 ); } 161 | .hover-stroke-black-70:hover { stroke: rgba( 0, 0, 0, .7 ); } 162 | .hover-stroke-black-60:hover { stroke: rgba( 0, 0, 0, .6 ); } 163 | .hover-stroke-black-50:hover { stroke: rgba( 0, 0, 0, .5 ); } 164 | .hover-stroke-black-40:hover { stroke: rgba( 0, 0, 0, .4 ); } 165 | .hover-stroke-black-30:hover { stroke: rgba( 0, 0, 0, .3 ); } 166 | .hover-stroke-black-20:hover { stroke: rgba( 0, 0, 0, .2 ); } 167 | .hover-stroke-black-10:hover { stroke: rgba( 0, 0, 0, .1 ); } 168 | .hover-stroke-black-05:hover { stroke: rgba( 0, 0, 0, .05 ); } 169 | .hover-stroke-white-90:hover { stroke: rgba( 255, 255, 255, .9 ); } 170 | .hover-stroke-white-80:hover { stroke: rgba( 255, 255, 255, .8 ); } 171 | .hover-stroke-white-70:hover { stroke: rgba( 255, 255, 255, .7 ); } 172 | .hover-stroke-white-60:hover { stroke: rgba( 255, 255, 255, .6 ); } 173 | .hover-stroke-white-50:hover { stroke: rgba( 255, 255, 255, .5 ); } 174 | .hover-stroke-white-40:hover { stroke: rgba( 255, 255, 255, .4 ); } 175 | .hover-stroke-white-30:hover { stroke: rgba( 255, 255, 255, .3 ); } 176 | .hover-stroke-white-20:hover { stroke: rgba( 255, 255, 255, .2 ); } 177 | .hover-stroke-white-10:hover { stroke: rgba( 255, 255, 255, .1 ); } 178 | .hover-stroke-black:hover { stroke: #000; } 179 | .hover-stroke-near-black:hover { stroke: #111; } 180 | .hover-stroke-dark-gray:hover { stroke: #333; } 181 | .hover-stroke-mid-gray:hover { stroke: #555; } 182 | .hover-stroke-gray:hover { stroke: #777; } 183 | .hover-stroke-silver:hover { stroke: #999; } 184 | .hover-stroke-light-silver:hover { stroke: #aaa; } 185 | .hover-stroke-moon-gray:hover { stroke: #ccc; } 186 | .hover-stroke-light-gray:hover { stroke: #eee; } 187 | .hover-stroke-near-white:hover { stroke: #f4f4f4; } 188 | .hover-stroke-white:hover { stroke: #fff; } 189 | .hover-stroke-dark-red:hover { stroke: #e7040f; } 190 | .hover-stroke-red:hover { stroke: #ff4136; } 191 | .hover-stroke-light-red:hover { stroke: #ff725c; } 192 | .hover-stroke-orange:hover { stroke: #ff6300; } 193 | .hover-stroke-gold:hover { stroke: #ffb700; } 194 | .hover-stroke-yellow:hover { stroke: #ffd700; } 195 | .hover-stroke-light-yellow:hover { stroke: #fbf1a9; } 196 | .hover-stroke-purple:hover { stroke: #5e2ca5; } 197 | .hover-stroke-light-purple:hover { stroke: #a463f2; } 198 | .hover-stroke-dark-pink:hover { stroke: #d5008f; } 199 | .hover-stroke-hot-pink:hover { stroke: #ff41b4; } 200 | .hover-stroke-pink:hover { stroke: #ff80cc; } 201 | .hover-stroke-light-pink:hover { stroke: #ffa3d7; } 202 | .hover-stroke-dark-green:hover { stroke: #137752; } 203 | .hover-stroke-green:hover { stroke: #19a974; } 204 | .hover-stroke-light-green:hover { stroke: #9eebcf; } 205 | .hover-stroke-navy:hover { stroke: #001b44; } 206 | .hover-stroke-dark-blue:hover { stroke: #00449e; } 207 | .hover-stroke-blue:hover { stroke: #357edd; } 208 | .hover-stroke-light-blue:hover { stroke: #96ccff; } 209 | .hover-stroke-lightest-blue:hover { stroke: #cdecff; } 210 | .hover-stroke-washed-blue:hover { stroke: #f6fffe; } 211 | .hover-stroke-washed-green:hover { stroke: #e8fdf5; } 212 | .hover-stroke-washed-yellow:hover { stroke: #fffceb; } 213 | .hover-stroke-washed-red:hover { stroke: #ffdfdf; } 214 | .hover-stroke-current-color:hover { stroke: currentColor; } 215 | /* Fill colors */ 216 | .fill-black-90 { fill: rgba( 0, 0, 0, .9 ); } 217 | .fill-black-80 { fill: rgba( 0, 0, 0, .8 ); } 218 | .fill-black-70 { fill: rgba( 0, 0, 0, .7 ); } 219 | .fill-black-60 { fill: rgba( 0, 0, 0, .6 ); } 220 | .fill-black-50 { fill: rgba( 0, 0, 0, .5 ); } 221 | .fill-black-40 { fill: rgba( 0, 0, 0, .4 ); } 222 | .fill-black-30 { fill: rgba( 0, 0, 0, .3 ); } 223 | .fill-black-20 { fill: rgba( 0, 0, 0, .2 ); } 224 | .fill-black-10 { fill: rgba( 0, 0, 0, .1 ); } 225 | .fill-black-05 { fill: rgba( 0, 0, 0, .05 ); } 226 | .fill-white-90 { fill: rgba( 255, 255, 255, .9 ); } 227 | .fill-white-80 { fill: rgba( 255, 255, 255, .8 ); } 228 | .fill-white-70 { fill: rgba( 255, 255, 255, .7 ); } 229 | .fill-white-60 { fill: rgba( 255, 255, 255, .6 ); } 230 | .fill-white-50 { fill: rgba( 255, 255, 255, .5 ); } 231 | .fill-white-40 { fill: rgba( 255, 255, 255, .4 ); } 232 | .fill-white-30 { fill: rgba( 255, 255, 255, .3 ); } 233 | .fill-white-20 { fill: rgba( 255, 255, 255, .2 ); } 234 | .fill-white-10 { fill: rgba( 255, 255, 255, .1 ); } 235 | .fill-black { fill: #000; } 236 | .fill-near-black { fill: #111; } 237 | .fill-dark-gray { fill: #333; } 238 | .fill-mid-gray { fill: #555; } 239 | .fill-gray { fill: #777; } 240 | .fill-silver { fill: #999; } 241 | .fill-light-silver { fill: #aaa; } 242 | .fill-moon-gray { fill: #ccc; } 243 | .fill-light-gray { fill: #eee; } 244 | .fill-near-white { fill: #f4f4f4; } 245 | .fill-white { fill: #fff; } 246 | .fill-transparent { fill: transparent; } 247 | .fill-dark-red { fill: #e7040f; } 248 | .fill-red { fill: #ff4136; } 249 | .fill-light-red { fill: #ff725c; } 250 | .fill-orange { fill: #ff6300; } 251 | .fill-gold { fill: #ffb700; } 252 | .fill-yellow { fill: #ffd700; } 253 | .fill-light-yellow { fill: #fbf1a9; } 254 | .fill-purple { fill: #5e2ca5; } 255 | .fill-light-purple { fill: #a463f2; } 256 | .fill-dark-pink { fill: #d5008f; } 257 | .fill-hot-pink { fill: #ff41b4; } 258 | .fill-pink { fill: #ff80cc; } 259 | .fill-light-pink { fill: #ffa3d7; } 260 | .fill-dark-green { fill: #137752; } 261 | .fill-green { fill: #19a974; } 262 | .fill-light-green { fill: #9eebcf; } 263 | .fill-navy { fill: #001b44; } 264 | .fill-dark-blue { fill: #00449e; } 265 | .fill-blue { fill: #357edd; } 266 | .fill-light-blue { fill: #96ccff; } 267 | .fill-lightest-blue { fill: #cdecff; } 268 | .fill-washed-blue { fill: #f6fffe; } 269 | .fill-washed-green { fill: #e8fdf5; } 270 | .fill-washed-yellow { fill: #fffceb; } 271 | .fill-washed-red { fill: #ffdfdf; } 272 | .fill-current-color { fill: currentColor; } 273 | /* Fill hover colors */ 274 | .hover-fill-black-90:hover { fill: rgba( 0, 0, 0, .9 ); } 275 | .hover-fill-black-80:hover { fill: rgba( 0, 0, 0, .8 ); } 276 | .hover-fill-black-70:hover { fill: rgba( 0, 0, 0, .7 ); } 277 | .hover-fill-black-60:hover { fill: rgba( 0, 0, 0, .6 ); } 278 | .hover-fill-black-50:hover { fill: rgba( 0, 0, 0, .5 ); } 279 | .hover-fill-black-40:hover { fill: rgba( 0, 0, 0, .4 ); } 280 | .hover-fill-black-30:hover { fill: rgba( 0, 0, 0, .3 ); } 281 | .hover-fill-black-20:hover { fill: rgba( 0, 0, 0, .2 ); } 282 | .hover-fill-black-10:hover { fill: rgba( 0, 0, 0, .1 ); } 283 | .hover-fill-black-05:hover { fill: rgba( 0, 0, 0, .05 ); } 284 | .hover-fill-white-90:hover { fill: rgba( 255, 255, 255, .9 ); } 285 | .hover-fill-white-80:hover { fill: rgba( 255, 255, 255, .8 ); } 286 | .hover-fill-white-70:hover { fill: rgba( 255, 255, 255, .7 ); } 287 | .hover-fill-white-60:hover { fill: rgba( 255, 255, 255, .6 ); } 288 | .hover-fill-white-50:hover { fill: rgba( 255, 255, 255, .5 ); } 289 | .hover-fill-white-40:hover { fill: rgba( 255, 255, 255, .4 ); } 290 | .hover-fill-white-30:hover { fill: rgba( 255, 255, 255, .3 ); } 291 | .hover-fill-white-20:hover { fill: rgba( 255, 255, 255, .2 ); } 292 | .hover-fill-white-10:hover { fill: rgba( 255, 255, 255, .1 ); } 293 | .hover-fill-black:hover { fill: #000; } 294 | .hover-fill-near-black:hover { fill: #111; } 295 | .hover-fill-dark-gray:hover { fill: #333; } 296 | .hover-fill-mid-gray:hover { fill: #555; } 297 | .hover-fill-gray:hover { fill: #777; } 298 | .hover-fill-silver :hover { fill: #999; } 299 | .hover-fill-light-silver:hover { fill: #aaa; } 300 | .hover-fill-moon-gray:hover { fill: #ccc; } 301 | .hover-fill-light-gray:hover { fill: #eee; } 302 | .hover-fill-near-white:hover { fill: #f4f4f4; } 303 | .hover-fill-white:hover { fill: #fff; } 304 | .hover-fill-transparent:hover { fill: transparent; } 305 | .hover-fill-dark-red:hover { fill: #e7040f; } 306 | .hover-fill-red:hover { fill: #ff4136; } 307 | .hover-fill-light-red:hover { fill: #ff725c; } 308 | .hover-fill-orange:hover { fill: #ff6300; } 309 | .hover-fill-gold:hover { fill: #ffb700; } 310 | .hover-fill-yellow:hover { fill: #ffd700; } 311 | .hover-fill-light-yellow:hover { fill: #fbf1a9; } 312 | .hover-fill-purple:hover { fill: #5e2ca5; } 313 | .hover-fill-light-purple:hover { fill: #a463f2; } 314 | .hover-fill-dark-pink:hover { fill: #d5008f; } 315 | .hover-fill-hot-pink:hover { fill: #ff41b4; } 316 | .hover-fill-pink:hover { fill: #ff80cc; } 317 | .hover-fill-light-pink:hover { fill: #ffa3d7; } 318 | .hover-fill-dark-green:hover { fill: #137752; } 319 | .hover-fill-green:hover { fill: #19a974; } 320 | .hover-fill-light-green:hover { fill: #9eebcf; } 321 | .hover-fill-navy:hover { fill: #001b44; } 322 | .hover-fill-dark-blue:hover { fill: #00449e; } 323 | .hover-fill-blue:hover { fill: #357edd; } 324 | .hover-fill-light-blue:hover { fill: #96ccff; } 325 | .hover-fill-lightest-blue:hover { fill: #cdecff; } 326 | .hover-fill-washed-blue:hover { fill: #f6fffe; } 327 | .hover-fill-washed-green:hover { fill: #e8fdf5; } 328 | .hover-fill-washed-yellow:hover { fill: #fffceb; } 329 | .hover-fill-washed-red:hover { fill: #ffdfdf; } 330 | .hover-fill-current-color:hover { fill: currentColor; } 331 | /* Stroke widths */ 332 | .sw0 { stroke-width: 0; } 333 | .sw1 { stroke-width: .125rem; } 334 | .sw2 { stroke-width: .25rem; } 335 | .sw3 { stroke-width: .5rem; } 336 | .sw4 { stroke-width: 1rem; } 337 | .sw5 { stroke-width: 2rem; } 338 | .sw6 { stroke-width: 4rem; } 339 | .sw7 { stroke-width: 8rem; } 340 | @media screen and (min-width: 30em) { 341 | .sw0-ns { stroke-width: 0; } 342 | .sw1-ns { stroke-width: .125rem; } 343 | .sw2-ns { stroke-width: .25rem; } 344 | .sw3-ns { stroke-width: .5rem; } 345 | .sw4-ns { stroke-width: 1rem; } 346 | .sw5-ns { stroke-width: 2rem; } 347 | .sw6-ns { stroke-width: 4rem; } 348 | .sw7-ns { stroke-width: 8rem; } 349 | } 350 | @media screen and (min-width: 30em) and (max-width: 60em) { 351 | .sw0-m { stroke-width: 0; } 352 | .sw1-m { stroke-width: .125rem; } 353 | .sw2-m { stroke-width: .25rem; } 354 | .sw3-m { stroke-width: .5rem; } 355 | .sw4-m { stroke-width: 1rem; } 356 | .sw5-m { stroke-width: 2rem; } 357 | .sw6-m { stroke-width: 4rem; } 358 | .sw7-m { stroke-width: 8rem; } 359 | } 360 | @media screen and (min-width: 60em) { 361 | .sw0-l { stroke-width: 0; } 362 | .sw1-l { stroke-width: .125rem; } 363 | .sw2-l { stroke-width: .25rem; } 364 | .sw3-l { stroke-width: .5rem; } 365 | .sw4-l { stroke-width: 1rem; } 366 | .sw5-l { stroke-width: 2rem; } 367 | .sw6-l { stroke-width: 4rem; } 368 | .sw7-l { stroke-width: 8rem; } 369 | } 370 | ``` 371 | 372 | ## Contributing 373 | 374 | 1. Fork it 375 | 2. Create your feature branch (`git checkout -b my-new-feature`) 376 | 3. Commit your changes (`git commit -am 'Add some feature'`) 377 | 4. Push to the branch (`git push origin my-new-feature`) 378 | 5. Create new Pull Request 379 | 380 | ## Authors 381 | 382 | - [Alec Lomas](http://lowmess.com) 383 | 384 | ## License 385 | 386 | ISC 387 | 388 | -------------------------------------------------------------------------------- /src/tachyons-svg.css: -------------------------------------------------------------------------------- 1 | @custom-media --breakpoint-not-small screen and (min-width: 30em); 2 | @custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em); 3 | @custom-media --breakpoint-large screen and (min-width: 60em); 4 | 5 | /* 6 | 7 | SVG 8 | 9 | Base: 10 | fill = fill color 11 | stroke = stroke color 12 | sw = stroke-width 13 | 14 | Modifiers: 15 | 0 = 0 width stroke 16 | 1 = 1st step in stroke-width scale 17 | 2 = 2nd step in stroke-width scale 18 | 3 = 3rd step in stroke-width scale 19 | 4 = 4th step in stroke-width scale 20 | 5 = 5th step in stroke-width scale 21 | 6 = 6th step in stroke-width scale 22 | 7 = 7th step in stroke-width scale 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | */ 29 | 30 | :root { 31 | --spacing-none: 0; 32 | --spacing-extra-extra-small: .125rem; 33 | --spacing-extra-small: .25rem; 34 | --spacing-small: .5rem; 35 | --spacing-medium: 1rem; 36 | --spacing-large: 2rem; 37 | --spacing-extra-large: 4rem; 38 | --spacing-extra-extra-large: 8rem; 39 | 40 | --black: #000; 41 | --near-black: #111; 42 | --dark-gray:#333; 43 | --mid-gray:#555; 44 | --gray: #777; 45 | --silver: #999; 46 | --light-silver: #aaa; 47 | --moon-gray: #ccc; 48 | --light-gray: #eee; 49 | --near-white: #f4f4f4; 50 | --white: #fff; 51 | 52 | --transparent:transparent; 53 | 54 | --black-90: rgba(0,0,0,.9); 55 | --black-80: rgba(0,0,0,.8); 56 | --black-70: rgba(0,0,0,.7); 57 | --black-60: rgba(0,0,0,.6); 58 | --black-50: rgba(0,0,0,.5); 59 | --black-40: rgba(0,0,0,.4); 60 | --black-30: rgba(0,0,0,.3); 61 | --black-20: rgba(0,0,0,.2); 62 | --black-10: rgba(0,0,0,.1); 63 | --black-05: rgba(0,0,0,.05); 64 | --black-025: rgba(0,0,0,.025); 65 | --black-0125: rgba(0,0,0,.0125); 66 | 67 | --white-90: rgba(255,255,255,.9); 68 | --white-80: rgba(255,255,255,.8); 69 | --white-70: rgba(255,255,255,.7); 70 | --white-60: rgba(255,255,255,.6); 71 | --white-50: rgba(255,255,255,.5); 72 | --white-40: rgba(255,255,255,.4); 73 | --white-30: rgba(255,255,255,.3); 74 | --white-20: rgba(255,255,255,.2); 75 | --white-10: rgba(255,255,255,.1); 76 | --white-05: rgba(255,255,255,.05); 77 | --white-025: rgba(255,255,255,.025); 78 | --white-0125: rgba(255,255,255,.0125); 79 | 80 | --dark-red: #e7040f; 81 | --red: #ff4136; 82 | --light-red: #ff725c; 83 | --orange: #ff6300; 84 | --gold: #ffb700; 85 | --yellow: #ffd700; 86 | --light-yellow: #fbf1a9; 87 | --purple: #5e2ca5; 88 | --light-purple: #a463f2; 89 | --dark-pink: #d5008f; 90 | --hot-pink: #ff41b4; 91 | --pink: #ff80cc; 92 | --light-pink: #ffa3d7; 93 | --dark-green: #137752; 94 | --green: #19a974; 95 | --light-green: #9eebcf; 96 | --navy: #001b44; 97 | --dark-blue: #00449e; 98 | --blue: #357edd; 99 | --light-blue: #96ccff; 100 | --lightest-blue: #cdecff; 101 | --washed-blue: #f6fffe; 102 | --washed-green: #e8fdf5; 103 | --washed-yellow: #fffceb; 104 | --washed-red: #ffdfdf; 105 | } 106 | 107 | /* Stroke colors */ 108 | 109 | .stroke-black-90 { stroke: var(--black-90); } 110 | .stroke-black-80 { stroke: var(--black-80); } 111 | .stroke-black-70 { stroke: var(--black-70); } 112 | .stroke-black-60 { stroke: var(--black-60); } 113 | .stroke-black-50 { stroke: var(--black-50); } 114 | .stroke-black-40 { stroke: var(--black-40); } 115 | .stroke-black-30 { stroke: var(--black-30); } 116 | .stroke-black-20 { stroke: var(--black-20); } 117 | .stroke-black-10 { stroke: var(--black-10); } 118 | .stroke-black-05 { stroke: var(--black-05); } 119 | 120 | .stroke-white-90 { stroke: var(--white-90); } 121 | .stroke-white-80 { stroke: var(--white-80); } 122 | .stroke-white-70 { stroke: var(--white-70); } 123 | .stroke-white-60 { stroke: var(--white-60); } 124 | .stroke-white-50 { stroke: var(--white-50); } 125 | .stroke-white-40 { stroke: var(--white-40); } 126 | .stroke-white-30 { stroke: var(--white-30); } 127 | .stroke-white-20 { stroke: var(--white-20); } 128 | .stroke-white-10 { stroke: var(--white-10); } 129 | 130 | .stroke-black { stroke: var(--black); } 131 | .stroke-near-black { stroke: var(--near-black); } 132 | .stroke-dark-gray { stroke: var(--dark-gray); } 133 | .stroke-mid-gray { stroke: var(--mid-gray); } 134 | .stroke-gray { stroke: var(--gray); } 135 | .stroke-silver { stroke: var(--silver); } 136 | .stroke-light-silver { stroke: var(--light-silver); } 137 | .stroke-moon-gray { stroke: var(--moon-gray); } 138 | .stroke-light-gray { stroke: var(--light-gray); } 139 | .stroke-near-white { stroke: var(--near-white); } 140 | .stroke-white { stroke: var(--white); } 141 | 142 | .stroke-dark-red { stroke: var(--dark-red); } 143 | .stroke-red { stroke: var(--red); } 144 | .stroke-light-red { stroke: var(--light-red); } 145 | .stroke-orange { stroke: var(--orange); } 146 | .stroke-gold { stroke: var(--gold); } 147 | .stroke-yellow { stroke: var(--yellow); } 148 | .stroke-light-yellow { stroke: var(--light-yellow); } 149 | .stroke-purple { stroke: var(--purple); } 150 | .stroke-light-purple { stroke: var(--light-purple); } 151 | .stroke-dark-pink { stroke: var(--dark-pink); } 152 | .stroke-hot-pink { stroke: var(--hot-pink); } 153 | .stroke-pink { stroke: var(--pink); } 154 | .stroke-light-pink { stroke: var(--light-pink); } 155 | .stroke-dark-green { stroke: var(--dark-green); } 156 | .stroke-green { stroke: var(--green); } 157 | .stroke-light-green { stroke: var(--light-green); } 158 | .stroke-navy { stroke: var(--navy); } 159 | .stroke-dark-blue { stroke: var(--dark-blue); } 160 | .stroke-blue { stroke: var(--blue); } 161 | .stroke-light-blue { stroke: var(--light-blue); } 162 | .stroke-lightest-blue { stroke: var(--lightest-blue); } 163 | .stroke-washed-blue { stroke: var(--washed-blue); } 164 | .stroke-washed-green { stroke: var(--washed-green); } 165 | .stroke-washed-yellow { stroke: var(--washed-yellow); } 166 | .stroke-washed-red { stroke: var(--washed-red); } 167 | 168 | .stroke-current-color { stroke: currentColor; } 169 | 170 | /* Stroke hover colors */ 171 | 172 | .hover-stroke-black-90:hover { stroke: var(--black-90); } 173 | .hover-stroke-black-80:hover { stroke: var(--black-80); } 174 | .hover-stroke-black-70:hover { stroke: var(--black-70); } 175 | .hover-stroke-black-60:hover { stroke: var(--black-60); } 176 | .hover-stroke-black-50:hover { stroke: var(--black-50); } 177 | .hover-stroke-black-40:hover { stroke: var(--black-40); } 178 | .hover-stroke-black-30:hover { stroke: var(--black-30); } 179 | .hover-stroke-black-20:hover { stroke: var(--black-20); } 180 | .hover-stroke-black-10:hover { stroke: var(--black-10); } 181 | .hover-stroke-black-05:hover { stroke: var(--black-05); } 182 | 183 | .hover-stroke-white-90:hover { stroke: var(--white-90); } 184 | .hover-stroke-white-80:hover { stroke: var(--white-80); } 185 | .hover-stroke-white-70:hover { stroke: var(--white-70); } 186 | .hover-stroke-white-60:hover { stroke: var(--white-60); } 187 | .hover-stroke-white-50:hover { stroke: var(--white-50); } 188 | .hover-stroke-white-40:hover { stroke: var(--white-40); } 189 | .hover-stroke-white-30:hover { stroke: var(--white-30); } 190 | .hover-stroke-white-20:hover { stroke: var(--white-20); } 191 | .hover-stroke-white-10:hover { stroke: var(--white-10); } 192 | 193 | .hover-stroke-black:hover { stroke: var(--black); } 194 | .hover-stroke-near-black:hover { stroke: var(--near-black); } 195 | .hover-stroke-dark-gray:hover { stroke: var(--dark-gray); } 196 | .hover-stroke-mid-gray:hover { stroke: var(--mid-gray); } 197 | .hover-stroke-gray:hover { stroke: var(--gray); } 198 | .hover-stroke-silver:hover { stroke: var(--silver); } 199 | .hover-stroke-light-silver:hover { stroke: var(--light-silver); } 200 | .hover-stroke-moon-gray:hover { stroke: var(--moon-gray); } 201 | .hover-stroke-light-gray:hover { stroke: var(--light-gray); } 202 | .hover-stroke-near-white:hover { stroke: var(--near-white); } 203 | .hover-stroke-white:hover { stroke: var(--white); } 204 | 205 | .hover-stroke-dark-red:hover { stroke: var(--dark-red); } 206 | .hover-stroke-red:hover { stroke: var(--red); } 207 | .hover-stroke-light-red:hover { stroke: var(--light-red); } 208 | .hover-stroke-orange:hover { stroke: var(--orange); } 209 | .hover-stroke-gold:hover { stroke: var(--gold); } 210 | .hover-stroke-yellow:hover { stroke: var(--yellow); } 211 | .hover-stroke-light-yellow:hover { stroke: var(--light-yellow); } 212 | .hover-stroke-purple:hover { stroke: var(--purple); } 213 | .hover-stroke-light-purple:hover { stroke: var(--light-purple); } 214 | .hover-stroke-dark-pink:hover { stroke: var(--dark-pink); } 215 | .hover-stroke-hot-pink:hover { stroke: var(--hot-pink); } 216 | .hover-stroke-pink:hover { stroke: var(--pink); } 217 | .hover-stroke-light-pink:hover { stroke: var(--light-pink); } 218 | .hover-stroke-dark-green:hover { stroke: var(--dark-green); } 219 | .hover-stroke-green:hover { stroke: var(--green); } 220 | .hover-stroke-light-green:hover { stroke: var(--light-green); } 221 | .hover-stroke-navy:hover { stroke: var(--navy); } 222 | .hover-stroke-dark-blue:hover { stroke: var(--dark-blue); } 223 | .hover-stroke-blue:hover { stroke: var(--blue); } 224 | .hover-stroke-light-blue:hover { stroke: var(--light-blue); } 225 | .hover-stroke-lightest-blue:hover { stroke: var(--lightest-blue); } 226 | .hover-stroke-washed-blue:hover { stroke: var(--washed-blue); } 227 | .hover-stroke-washed-green:hover { stroke: var(--washed-green); } 228 | .hover-stroke-washed-yellow:hover { stroke: var(--washed-yellow); } 229 | .hover-stroke-washed-red:hover { stroke: var(--washed-red); } 230 | 231 | .hover-stroke-current-color:hover { stroke: currentColor; } 232 | 233 | /* Fill colors */ 234 | 235 | .fill-black-90 { fill: var(--black-90); } 236 | .fill-black-80 { fill: var(--black-80); } 237 | .fill-black-70 { fill: var(--black-70); } 238 | .fill-black-60 { fill: var(--black-60); } 239 | .fill-black-50 { fill: var(--black-50); } 240 | .fill-black-40 { fill: var(--black-40); } 241 | .fill-black-30 { fill: var(--black-30); } 242 | .fill-black-20 { fill: var(--black-20); } 243 | .fill-black-10 { fill: var(--black-10); } 244 | .fill-black-05 { fill: var(--black-05); } 245 | .fill-white-90 { fill: var(--white-90); } 246 | .fill-white-80 { fill: var(--white-80); } 247 | .fill-white-70 { fill: var(--white-70); } 248 | .fill-white-60 { fill: var(--white-60); } 249 | .fill-white-50 { fill: var(--white-50); } 250 | .fill-white-40 { fill: var(--white-40); } 251 | .fill-white-30 { fill: var(--white-30); } 252 | .fill-white-20 { fill: var(--white-20); } 253 | .fill-white-10 { fill: var(--white-10); } 254 | 255 | .fill-black { fill: var(--black); } 256 | .fill-near-black { fill: var(--near-black); } 257 | .fill-dark-gray { fill: var(--dark-gray); } 258 | .fill-mid-gray { fill: var(--mid-gray); } 259 | .fill-gray { fill: var(--gray); } 260 | .fill-silver { fill: var(--silver); } 261 | .fill-light-silver { fill: var(--light-silver); } 262 | .fill-moon-gray { fill: var(--moon-gray); } 263 | .fill-light-gray { fill: var(--light-gray); } 264 | .fill-near-white { fill: var(--near-white); } 265 | .fill-white { fill: var(--white); } 266 | .fill-transparent { fill: var(--transparent); } 267 | 268 | .fill-dark-red { fill: var(--dark-red); } 269 | .fill-red { fill: var(--red); } 270 | .fill-light-red { fill: var(--light-red); } 271 | .fill-orange { fill: var(--orange); } 272 | .fill-gold { fill: var(--gold); } 273 | .fill-yellow { fill: var(--yellow); } 274 | .fill-light-yellow { fill: var(--light-yellow); } 275 | .fill-purple { fill: var(--purple); } 276 | .fill-light-purple { fill: var(--light-purple); } 277 | .fill-dark-pink { fill: var(--dark-pink); } 278 | .fill-hot-pink { fill: var(--hot-pink); } 279 | .fill-pink { fill: var(--pink); } 280 | .fill-light-pink { fill: var(--light-pink); } 281 | .fill-dark-green { fill: var(--dark-green); } 282 | .fill-green { fill: var(--green); } 283 | .fill-light-green { fill: var(--light-green); } 284 | .fill-navy { fill: var(--navy); } 285 | .fill-dark-blue { fill: var(--dark-blue); } 286 | .fill-blue { fill: var(--blue); } 287 | .fill-light-blue { fill: var(--light-blue); } 288 | .fill-lightest-blue { fill: var(--lightest-blue); } 289 | .fill-washed-blue { fill: var(--washed-blue); } 290 | .fill-washed-green { fill: var(--washed-green); } 291 | .fill-washed-yellow { fill: var(--washed-yellow); } 292 | .fill-washed-red { fill: var(--washed-red); } 293 | 294 | .fill-current-color { fill: currentColor; } 295 | 296 | /* Fill hover colors */ 297 | 298 | .hover-fill-black-90:hover { fill: var(--black-90); } 299 | .hover-fill-black-80:hover { fill: var(--black-80); } 300 | .hover-fill-black-70:hover { fill: var(--black-70); } 301 | .hover-fill-black-60:hover { fill: var(--black-60); } 302 | .hover-fill-black-50:hover { fill: var(--black-50); } 303 | .hover-fill-black-40:hover { fill: var(--black-40); } 304 | .hover-fill-black-30:hover { fill: var(--black-30); } 305 | .hover-fill-black-20:hover { fill: var(--black-20); } 306 | .hover-fill-black-10:hover { fill: var(--black-10); } 307 | .hover-fill-black-05:hover { fill: var(--black-05); } 308 | .hover-fill-white-90:hover { fill: var(--white-90); } 309 | .hover-fill-white-80:hover { fill: var(--white-80); } 310 | .hover-fill-white-70:hover { fill: var(--white-70); } 311 | .hover-fill-white-60:hover { fill: var(--white-60); } 312 | .hover-fill-white-50:hover { fill: var(--white-50); } 313 | .hover-fill-white-40:hover { fill: var(--white-40); } 314 | .hover-fill-white-30:hover { fill: var(--white-30); } 315 | .hover-fill-white-20:hover { fill: var(--white-20); } 316 | .hover-fill-white-10:hover { fill: var(--white-10); } 317 | 318 | .hover-fill-black:hover { fill: var(--black); } 319 | .hover-fill-near-black:hover { fill: var(--near-black); } 320 | .hover-fill-dark-gray:hover { fill: var(--dark-gray); } 321 | .hover-fill-mid-gray:hover { fill: var(--mid-gray); } 322 | .hover-fill-gray:hover { fill: var(--gray); } 323 | .hover-fill-silver :hover { fill: var(--silver); } 324 | .hover-fill-light-silver:hover { fill: var(--light-silver); } 325 | .hover-fill-moon-gray:hover { fill: var(--moon-gray); } 326 | .hover-fill-light-gray:hover { fill: var(--light-gray); } 327 | .hover-fill-near-white:hover { fill: var(--near-white); } 328 | .hover-fill-white:hover { fill: var(--white); } 329 | .hover-fill-transparent:hover { fill: var(--transparent); } 330 | 331 | .hover-fill-dark-red:hover { fill: var(--dark-red); } 332 | .hover-fill-red:hover { fill: var(--red); } 333 | .hover-fill-light-red:hover { fill: var(--light-red); } 334 | .hover-fill-orange:hover { fill: var(--orange); } 335 | .hover-fill-gold:hover { fill: var(--gold); } 336 | .hover-fill-yellow:hover { fill: var(--yellow); } 337 | .hover-fill-light-yellow:hover { fill: var(--light-yellow); } 338 | .hover-fill-purple:hover { fill: var(--purple); } 339 | .hover-fill-light-purple:hover { fill: var(--light-purple); } 340 | .hover-fill-dark-pink:hover { fill: var(--dark-pink); } 341 | .hover-fill-hot-pink:hover { fill: var(--hot-pink); } 342 | .hover-fill-pink:hover { fill: var(--pink); } 343 | .hover-fill-light-pink:hover { fill: var(--light-pink); } 344 | .hover-fill-dark-green:hover { fill: var(--dark-green); } 345 | .hover-fill-green:hover { fill: var(--green); } 346 | .hover-fill-light-green:hover { fill: var(--light-green); } 347 | .hover-fill-navy:hover { fill: var(--navy); } 348 | .hover-fill-dark-blue:hover { fill: var(--dark-blue); } 349 | .hover-fill-blue:hover { fill: var(--blue); } 350 | .hover-fill-light-blue:hover { fill: var(--light-blue); } 351 | .hover-fill-lightest-blue:hover { fill: var(--lightest-blue); } 352 | .hover-fill-washed-blue:hover { fill: var(--washed-blue); } 353 | .hover-fill-washed-green:hover { fill: var(--washed-green); } 354 | .hover-fill-washed-yellow:hover { fill: var(--washed-yellow); } 355 | .hover-fill-washed-red:hover { fill: var(--washed-red); } 356 | 357 | .hover-fill-current-color:hover { fill: currentColor; } 358 | 359 | /* Stroke widths */ 360 | 361 | .sw0 { stroke-width: 0; } 362 | .sw1 { stroke-width: var(--spacing-extra-extra-small); } 363 | .sw2 { stroke-width: var(--spacing-extra-small); } 364 | .sw3 { stroke-width: var(--spacing-small); } 365 | .sw4 { stroke-width: var(--spacing-medium); } 366 | .sw5 { stroke-width: var(--spacing-large); } 367 | .sw6 { stroke-width: var(--spacing-extra-large); } 368 | .sw7 { stroke-width: var(--spacing-extra-extra-large); } 369 | 370 | @media (--breakpoint-not-small) { 371 | .sw0-ns { stroke-width: 0; } 372 | .sw1-ns { stroke-width: var(--spacing-extra-extra-small); } 373 | .sw2-ns { stroke-width: var(--spacing-extra-small); } 374 | .sw3-ns { stroke-width: var(--spacing-small); } 375 | .sw4-ns { stroke-width: var(--spacing-medium); } 376 | .sw5-ns { stroke-width: var(--spacing-large); } 377 | .sw6-ns { stroke-width: var(--spacing-extra-large); } 378 | .sw7-ns { stroke-width: var(--spacing-extra-extra-large); } 379 | } 380 | 381 | @media (--breakpoint-medium) { 382 | .sw0-m { stroke-width: 0; } 383 | .sw1-m { stroke-width: var(--spacing-extra-extra-small); } 384 | .sw2-m { stroke-width: var(--spacing-extra-small); } 385 | .sw3-m { stroke-width: var(--spacing-small); } 386 | .sw4-m { stroke-width: var(--spacing-medium); } 387 | .sw5-m { stroke-width: var(--spacing-large); } 388 | .sw6-m { stroke-width: var(--spacing-extra-large); } 389 | .sw7-m { stroke-width: var(--spacing-extra-extra-large); } 390 | } 391 | 392 | @media (--breakpoint-large) { 393 | .sw0-l { stroke-width: 0; } 394 | .sw1-l { stroke-width: var(--spacing-extra-extra-small); } 395 | .sw2-l { stroke-width: var(--spacing-extra-small); } 396 | .sw3-l { stroke-width: var(--spacing-small); } 397 | .sw4-l { stroke-width: var(--spacing-medium); } 398 | .sw5-l { stroke-width: var(--spacing-large); } 399 | .sw6-l { stroke-width: var(--spacing-extra-large); } 400 | .sw7-l { stroke-width: var(--spacing-extra-extra-large); } 401 | } 402 | --------------------------------------------------------------------------------