├── .gitignore
├── less
    ├── colors.less
    ├── _variables.less
    └── _skins.less
├── package.json
└── css
    ├── colors.min.css
    └── colors.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/less/colors.less:
--------------------------------------------------------------------------------
 1 | /***
 2 | 
 3 |    colors.css v2.0.0
 4 |    http://clrs.cc
 5 |    @mrmrs
 6 |    MIT License
 7 | 
 8 | ***/
 9 | 
10 | @import "_variables";
11 | @import "_skins";
12 | 
13 | 


--------------------------------------------------------------------------------
/less/_variables.less:
--------------------------------------------------------------------------------
 1 | //
 2 | // COLOR VARIABLES
 3 | //
 4 | // - Cool
 5 | // - Warm
 6 | // - Gray Scale
 7 | //
 8 | 
 9 | // Cool
10 | 
11 | @aqua:  #7FDBFF;
12 | @blue:  #0074D9;
13 | @navy:  #001F3F;
14 | @teal:  #39CCCC;
15 | @green: #2ECC40;
16 | @olive: #3D9970;
17 | @lime:  #01FF70;
18 | 
19 | // Warm
20 | 
21 | @yellow:  #FFDC00;
22 | @orange:  #FF851B;
23 | @red:     #FF4136;
24 | @fuchsia: #F012BE;
25 | @purple:  #B10DC9;
26 | @maroon:  #85144B;
27 | 
28 | // Gray Scale
29 | 
30 | @white:  #FFFFFF;
31 | @silver: #DDDDDD;
32 | @gray:   #AAAAAA;
33 | @black:  #111111;
34 | 
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "colors-less",
 3 |   "version": "1.0.1",
 4 |   "description": "Better default colors for the web",
 5 |   "main": "css/colors.css",
 6 |   "scripts": {
 7 |     "start": "lessc less/colors.less css/colors.css && lessc --clean-css less/colors.less css/colors.min.css"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/mrmrs/colors-less.git"
12 |   },
13 |   "keywords": [
14 |     "less",
15 |     "css",
16 |     "colors"
17 |   ],
18 |   "author": "mrmrs",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/mrmrs/colors-less/issues"
22 |   },
23 |   "homepage": "https://github.com/mrmrs/colors-less#readme",
24 |   "devDependencies": {
25 |     "less": "^3.0.1",
26 |     "less-plugin-clean-css": "^1.5.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/css/colors.min.css:
--------------------------------------------------------------------------------
1 | .bg-navy{background-color:#001F3F}.bg-blue{background-color:#0074D9}.bg-aqua{background-color:#7FDBFF}.bg-teal{background-color:#39CCCC}.bg-olive{background-color:#3D9970}.bg-green{background-color:#2ECC40}.bg-lime{background-color:#01FF70}.bg-yellow{background-color:#FFDC00}.bg-orange{background-color:#FF851B}.bg-red{background-color:#FF4136}.bg-fuchsia{background-color:#F012BE}.bg-purple{background-color:#B10DC9}.bg-maroon{background-color:#85144B}.bg-white{background-color:#FFF}.bg-gray{background-color:#AAA}.bg-silver{background-color:#DDD}.bg-black{background-color:#111}.navy{color:#001F3F}.blue{color:#0074D9}.aqua{color:#7FDBFF}.teal{color:#39CCCC}.olive{color:#3D9970}.green{color:#2ECC40}.lime{color:#01FF70}.yellow{color:#FFDC00}.orange{color:#FF851B}.red{color:#FF4136}.fuchsia{color:#F012BE}.purple{color:#B10DC9}.maroon{color:#85144B}.white{color:#FFF}.silver{color:#DDD}.gray{color:#AAA}.black{color:#111}.border--navy{border-color:#001F3F}.border--blue{border-color:#0074D9}.border--aqua{border-color:#7FDBFF}.border--teal{border-color:#39CCCC}.border--olive{border-color:#3D9970}.border--green{border-color:#2ECC40}.border--lime{border-color:#01FF70}.border--yellow{border-color:#FFDC00}.border--orange{border-color:#FF851B}.border--red{border-color:#FF4136}.border--fuchsia{border-color:#F012BE}.border--purple{border-color:#B10DC9}.border--maroon{border-color:#85144B}.border--white{border-color:#FFF}.border--gray{border-color:#AAA}.border--silver{border-color:#DDD}.border--black{border-color:#111}.fill-navy{fill:#001F3F}.fill-blue{fill:#0074D9}.fill-aqua{fill:#7FDBFF}.fill-teal{fill:#39CCCC}.fill-olive{fill:#3D9970}.fill-green{fill:#2ECC40}.fill-lime{fill:#01FF70}.fill-yellow{fill:#FFDC00}.fill-orange{fill:#FF851B}.fill-red{fill:#FF4136}.fill-fuchsia{fill:#F012BE}.fill-purple{fill:#B10DC9}.fill-maroon{fill:#85144B}.fill-white{fill:#FFF}.fill-gray{fill:#AAA}.fill-silver{fill:#DDD}.fill-black{fill:#111}.stroke-navy{stroke:#001F3F}.stroke-blue{stroke:#0074D9}.stroke-aqua{stroke:#7FDBFF}.stroke-teal{stroke:#39CCCC}.stroke-olive{stroke:#3D9970}.stroke-green{stroke:#2ECC40}.stroke-lime{stroke:#01FF70}.stroke-yellow{stroke:#FFDC00}.stroke-orange{stroke:#FF851B}.stroke-red{stroke:#FF4136}.stroke-fuchsia{stroke:#F012BE}.stroke-purple{stroke:#B10DC9}.stroke-maroon{stroke:#85144B}.stroke-white{stroke:#FFF}.stroke-gray{stroke:#AAA}.stroke-silver{stroke:#DDD}.stroke-black{stroke:#111}


--------------------------------------------------------------------------------
/less/_skins.less:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |    SKINS
  4 |    - Backgrounds
  5 |    - Colors
  6 |    - Border colors
  7 |    - SVG fills
  8 |    - SVG strokes
  9 | 
 10 | */
 11 | 
 12 | 
 13 | /* Backgrounds */
 14 | 
 15 | .bg-navy {    background-color: @navy; }
 16 | .bg-blue {    background-color: @blue; }
 17 | .bg-aqua {    background-color: @aqua; }
 18 | .bg-teal {    background-color: @teal; }
 19 | .bg-olive {   background-color: @olive; }
 20 | .bg-green {   background-color: @green; }
 21 | .bg-lime {    background-color: @lime; }
 22 | .bg-yellow {  background-color: @yellow; }
 23 | .bg-orange {  background-color: @orange; }
 24 | .bg-red {     background-color: @red; }
 25 | .bg-fuchsia { background-color: @fuchsia; }
 26 | .bg-purple {  background-color: @purple; }
 27 | .bg-maroon {  background-color: @maroon; }
 28 | .bg-white {   background-color: @white; }
 29 | .bg-gray {    background-color: @gray; }
 30 | .bg-silver {  background-color: @silver; }
 31 | .bg-black {   background-color: @black; }
 32 | 
 33 | 
 34 | /* Colors */
 35 | 
 36 | .navy {       color: @navy; }
 37 | .blue {       color: @blue; }
 38 | .aqua {       color: @aqua; }
 39 | .teal {       color: @teal; }
 40 | .olive {      color: @olive; }
 41 | .green {      color: @green; }
 42 | .lime {       color: @lime; }
 43 | .yellow {     color: @yellow; }
 44 | .orange {     color: @orange; }
 45 | .red {        color: @red; }
 46 | .fuchsia {    color: @fuchsia; }
 47 | .purple {     color: @purple; }
 48 | .maroon {     color: @maroon; }
 49 | .white {      color: @white; }
 50 | .silver {     color: @silver; }
 51 | .gray {       color: @gray; }
 52 | .black {      color: @black; }
 53 | 
 54 | 
 55 | /* Border colors 
 56 | 
 57 |    Use with another border utility that sets border-width and style 
 58 |    i.e .border { border-width: 1px; border-style: solid; }     
 59 | */
 60 | 
 61 | .border--navy {    border-color: @navy; }
 62 | .border--blue {    border-color: @blue; }
 63 | .border--aqua {    border-color: @aqua; }
 64 | .border--teal {    border-color: @teal; }
 65 | .border--olive {   border-color: @olive; }
 66 | .border--green {   border-color: @green; }
 67 | .border--lime {    border-color: @lime; }
 68 | .border--yellow {  border-color: @yellow; }
 69 | .border--orange {  border-color: @orange; }
 70 | .border--red {     border-color: @red; }
 71 | .border--fuchsia { border-color: @fuchsia; }
 72 | .border--purple {  border-color: @purple; }
 73 | .border--maroon {  border-color: @maroon; }
 74 | .border--white {   border-color: @white; }
 75 | .border--gray {    border-color: @gray; }
 76 | .border--silver {  border-color: @silver; }
 77 | .border--black {   border-color: @black; }
 78 | 
 79 | 
 80 | /* Fills for SVG */
 81 | 
 82 | .fill-navy {    fill: @navy; }
 83 | .fill-blue {    fill: @blue; }
 84 | .fill-aqua {    fill: @aqua; }
 85 | .fill-teal {    fill: @teal; }
 86 | .fill-olive {   fill: @olive; }
 87 | .fill-green {   fill: @green; }
 88 | .fill-lime {    fill: @lime; }
 89 | .fill-yellow {  fill: @yellow; }
 90 | .fill-orange {  fill: @orange; }
 91 | .fill-red {     fill: @red; }
 92 | .fill-fuchsia { fill: @fuchsia; }
 93 | .fill-purple {  fill: @purple; }
 94 | .fill-maroon {  fill: @maroon; }
 95 | .fill-white {   fill: @white; }
 96 | .fill-gray {    fill: @gray; }
 97 | .fill-silver {  fill: @silver; }
 98 | .fill-black {   fill: @black; }
 99 | 
100 | /* Strokes for SVG */
101 | 
102 | .stroke-navy {    stroke: @navy; }
103 | .stroke-blue {    stroke: @blue; }
104 | .stroke-aqua {    stroke: @aqua; }
105 | .stroke-teal {    stroke: @teal; }
106 | .stroke-olive {   stroke: @olive; }
107 | .stroke-green {   stroke: @green; }
108 | .stroke-lime {    stroke: @lime; }
109 | .stroke-yellow {  stroke: @yellow; }
110 | .stroke-orange {  stroke: @orange; }
111 | .stroke-red {     stroke: @red; }
112 | .stroke-fuchsia { stroke: @fuchsia; }
113 | .stroke-purple {  stroke: @purple; }
114 | .stroke-maroon {  stroke: @maroon; }
115 | .stroke-white {   stroke: @white; }
116 | .stroke-gray {    stroke: @gray; }
117 | .stroke-silver {  stroke: @silver; }
118 | .stroke-black {   stroke: @black; }
119 | 
120 | 


--------------------------------------------------------------------------------
/css/colors.css:
--------------------------------------------------------------------------------
  1 | /***
  2 | 
  3 |    colors.css v2.0.0
  4 |    http://clrs.cc
  5 |    @mrmrs
  6 |    MIT License
  7 | 
  8 | ***/
  9 | /*
 10 | 
 11 |    SKINS
 12 |    - Backgrounds
 13 |    - Colors
 14 |    - Border colors
 15 |    - SVG fills
 16 |    - SVG strokes
 17 | 
 18 | */
 19 | /* Backgrounds */
 20 | .bg-navy {
 21 |   background-color: #001F3F;
 22 | }
 23 | .bg-blue {
 24 |   background-color: #0074D9;
 25 | }
 26 | .bg-aqua {
 27 |   background-color: #7FDBFF;
 28 | }
 29 | .bg-teal {
 30 |   background-color: #39CCCC;
 31 | }
 32 | .bg-olive {
 33 |   background-color: #3D9970;
 34 | }
 35 | .bg-green {
 36 |   background-color: #2ECC40;
 37 | }
 38 | .bg-lime {
 39 |   background-color: #01FF70;
 40 | }
 41 | .bg-yellow {
 42 |   background-color: #FFDC00;
 43 | }
 44 | .bg-orange {
 45 |   background-color: #FF851B;
 46 | }
 47 | .bg-red {
 48 |   background-color: #FF4136;
 49 | }
 50 | .bg-fuchsia {
 51 |   background-color: #F012BE;
 52 | }
 53 | .bg-purple {
 54 |   background-color: #B10DC9;
 55 | }
 56 | .bg-maroon {
 57 |   background-color: #85144B;
 58 | }
 59 | .bg-white {
 60 |   background-color: #FFFFFF;
 61 | }
 62 | .bg-gray {
 63 |   background-color: #AAAAAA;
 64 | }
 65 | .bg-silver {
 66 |   background-color: #DDDDDD;
 67 | }
 68 | .bg-black {
 69 |   background-color: #111111;
 70 | }
 71 | /* Colors */
 72 | .navy {
 73 |   color: #001F3F;
 74 | }
 75 | .blue {
 76 |   color: #0074D9;
 77 | }
 78 | .aqua {
 79 |   color: #7FDBFF;
 80 | }
 81 | .teal {
 82 |   color: #39CCCC;
 83 | }
 84 | .olive {
 85 |   color: #3D9970;
 86 | }
 87 | .green {
 88 |   color: #2ECC40;
 89 | }
 90 | .lime {
 91 |   color: #01FF70;
 92 | }
 93 | .yellow {
 94 |   color: #FFDC00;
 95 | }
 96 | .orange {
 97 |   color: #FF851B;
 98 | }
 99 | .red {
100 |   color: #FF4136;
101 | }
102 | .fuchsia {
103 |   color: #F012BE;
104 | }
105 | .purple {
106 |   color: #B10DC9;
107 | }
108 | .maroon {
109 |   color: #85144B;
110 | }
111 | .white {
112 |   color: #FFFFFF;
113 | }
114 | .silver {
115 |   color: #DDDDDD;
116 | }
117 | .gray {
118 |   color: #AAAAAA;
119 | }
120 | .black {
121 |   color: #111111;
122 | }
123 | /* Border colors 
124 | 
125 |    Use with another border utility that sets border-width and style 
126 |    i.e .border { border-width: 1px; border-style: solid; }     
127 | */
128 | .border--navy {
129 |   border-color: #001F3F;
130 | }
131 | .border--blue {
132 |   border-color: #0074D9;
133 | }
134 | .border--aqua {
135 |   border-color: #7FDBFF;
136 | }
137 | .border--teal {
138 |   border-color: #39CCCC;
139 | }
140 | .border--olive {
141 |   border-color: #3D9970;
142 | }
143 | .border--green {
144 |   border-color: #2ECC40;
145 | }
146 | .border--lime {
147 |   border-color: #01FF70;
148 | }
149 | .border--yellow {
150 |   border-color: #FFDC00;
151 | }
152 | .border--orange {
153 |   border-color: #FF851B;
154 | }
155 | .border--red {
156 |   border-color: #FF4136;
157 | }
158 | .border--fuchsia {
159 |   border-color: #F012BE;
160 | }
161 | .border--purple {
162 |   border-color: #B10DC9;
163 | }
164 | .border--maroon {
165 |   border-color: #85144B;
166 | }
167 | .border--white {
168 |   border-color: #FFFFFF;
169 | }
170 | .border--gray {
171 |   border-color: #AAAAAA;
172 | }
173 | .border--silver {
174 |   border-color: #DDDDDD;
175 | }
176 | .border--black {
177 |   border-color: #111111;
178 | }
179 | /* Fills for SVG */
180 | .fill-navy {
181 |   fill: #001F3F;
182 | }
183 | .fill-blue {
184 |   fill: #0074D9;
185 | }
186 | .fill-aqua {
187 |   fill: #7FDBFF;
188 | }
189 | .fill-teal {
190 |   fill: #39CCCC;
191 | }
192 | .fill-olive {
193 |   fill: #3D9970;
194 | }
195 | .fill-green {
196 |   fill: #2ECC40;
197 | }
198 | .fill-lime {
199 |   fill: #01FF70;
200 | }
201 | .fill-yellow {
202 |   fill: #FFDC00;
203 | }
204 | .fill-orange {
205 |   fill: #FF851B;
206 | }
207 | .fill-red {
208 |   fill: #FF4136;
209 | }
210 | .fill-fuchsia {
211 |   fill: #F012BE;
212 | }
213 | .fill-purple {
214 |   fill: #B10DC9;
215 | }
216 | .fill-maroon {
217 |   fill: #85144B;
218 | }
219 | .fill-white {
220 |   fill: #FFFFFF;
221 | }
222 | .fill-gray {
223 |   fill: #AAAAAA;
224 | }
225 | .fill-silver {
226 |   fill: #DDDDDD;
227 | }
228 | .fill-black {
229 |   fill: #111111;
230 | }
231 | /* Strokes for SVG */
232 | .stroke-navy {
233 |   stroke: #001F3F;
234 | }
235 | .stroke-blue {
236 |   stroke: #0074D9;
237 | }
238 | .stroke-aqua {
239 |   stroke: #7FDBFF;
240 | }
241 | .stroke-teal {
242 |   stroke: #39CCCC;
243 | }
244 | .stroke-olive {
245 |   stroke: #3D9970;
246 | }
247 | .stroke-green {
248 |   stroke: #2ECC40;
249 | }
250 | .stroke-lime {
251 |   stroke: #01FF70;
252 | }
253 | .stroke-yellow {
254 |   stroke: #FFDC00;
255 | }
256 | .stroke-orange {
257 |   stroke: #FF851B;
258 | }
259 | .stroke-red {
260 |   stroke: #FF4136;
261 | }
262 | .stroke-fuchsia {
263 |   stroke: #F012BE;
264 | }
265 | .stroke-purple {
266 |   stroke: #B10DC9;
267 | }
268 | .stroke-maroon {
269 |   stroke: #85144B;
270 | }
271 | .stroke-white {
272 |   stroke: #FFFFFF;
273 | }
274 | .stroke-gray {
275 |   stroke: #AAAAAA;
276 | }
277 | .stroke-silver {
278 |   stroke: #DDDDDD;
279 | }
280 | .stroke-black {
281 |   stroke: #111111;
282 | }
283 | 


--------------------------------------------------------------------------------