| 1 | /* generated mostly with props.colors.src.js */
|
| 2 | export const Gray = {
|
| 3 | '--gray-0': '#f8f9fa',
|
| 4 | '--gray-1': '#f1f3f5',
|
| 5 | '--gray-2': '#e9ecef',
|
| 6 | '--gray-3': '#dee2e6',
|
| 7 | '--gray-4': '#ced4da',
|
| 8 | '--gray-5': '#adb5bd',
|
| 9 | '--gray-6': '#868e96',
|
| 10 | '--gray-7': '#495057',
|
| 11 | '--gray-8': '#343a40',
|
| 12 | '--gray-9': '#212529',
|
| 13 | '--gray-10': '#16191d',
|
| 14 | '--gray-11': '#0d0f12',
|
| 15 | '--gray-12': '#030507',
|
| 16 | }
|
| 17 |
|
| 18 | export const Stone = {
|
| 19 | '--stone-0': '#f8fafb',
|
| 20 | '--stone-1': '#f2f4f6',
|
| 21 | '--stone-2': '#ebedef',
|
| 22 | '--stone-3': '#e0e4e5',
|
| 23 | '--stone-4': '#d1d6d8',
|
| 24 | '--stone-5': '#b1b6b9',
|
| 25 | '--stone-6': '#979b9d',
|
| 26 | '--stone-7': '#7e8282',
|
| 27 | '--stone-8': '#666968',
|
| 28 | '--stone-9': '#50514f',
|
| 29 | '--stone-10': '#3a3a37',
|
| 30 | '--stone-11': '#252521',
|
| 31 | '--stone-12': '#121210',
|
| 32 | }
|
| 33 |
|
| 34 | export const Red = {
|
| 35 | '--red-0': '#fff5f5',
|
| 36 | '--red-1': '#ffe3e3',
|
| 37 | '--red-2': '#ffc9c9',
|
| 38 | '--red-3': '#ffa8a8',
|
| 39 | '--red-4': '#ff8787',
|
| 40 | '--red-5': '#ff6b6b',
|
| 41 | '--red-6': '#fa5252',
|
| 42 | '--red-7': '#f03e3e',
|
| 43 | '--red-8': '#e03131',
|
| 44 | '--red-9': '#c92a2a',
|
| 45 | '--red-10': '#b02525',
|
| 46 | '--red-11': '#962020',
|
| 47 | '--red-12': '#7d1a1a',
|
| 48 | }
|
| 49 |
|
| 50 | export const Pink = {
|
| 51 | '--pink-0': '#fff0f6',
|
| 52 | '--pink-1': '#ffdeeb',
|
| 53 | '--pink-2': '#fcc2d7',
|
| 54 | '--pink-3': '#faa2c1',
|
| 55 | '--pink-4': '#f783ac',
|
| 56 | '--pink-5': '#f06595',
|
| 57 | '--pink-6': '#e64980',
|
| 58 | '--pink-7': '#d6336c',
|
| 59 | '--pink-8': '#c2255c',
|
| 60 | '--pink-9': '#a61e4d',
|
| 61 | '--pink-10': '#8c1941',
|
| 62 | '--pink-11': '#731536',
|
| 63 | '--pink-12': '#59102a',
|
| 64 | }
|
| 65 |
|
| 66 | export const Purple = {
|
| 67 | '--purple-0': '#f8f0fc',
|
| 68 | '--purple-1': '#f3d9fa',
|
| 69 | '--purple-2': '#eebefa',
|
| 70 | '--purple-3': '#e599f7',
|
| 71 | '--purple-4': '#da77f2',
|
| 72 | '--purple-5': '#cc5de8',
|
| 73 | '--purple-6': '#be4bdb',
|
| 74 | '--purple-7': '#ae3ec9',
|
| 75 | '--purple-8': '#9c36b5',
|
| 76 | '--purple-9': '#862e9c',
|
| 77 | '--purple-10': '#702682',
|
| 78 | '--purple-11': '#5a1e69',
|
| 79 | '--purple-12': '#44174f',
|
| 80 | }
|
| 81 |
|
| 82 | export const Violet = {
|
| 83 | '--violet-0': '#f3f0ff',
|
| 84 | '--violet-1': '#e5dbff',
|
| 85 | '--violet-2': '#d0bfff',
|
| 86 | '--violet-3': '#b197fc',
|
| 87 | '--violet-4': '#9775fa',
|
| 88 | '--violet-5': '#845ef7',
|
| 89 | '--violet-6': '#7950f2',
|
| 90 | '--violet-7': '#7048e8',
|
| 91 | '--violet-8': '#6741d9',
|
| 92 | '--violet-9': '#5f3dc4',
|
| 93 | '--violet-10': '#5235ab',
|
| 94 | '--violet-11': '#462d91',
|
| 95 | '--violet-12': '#3a2578',
|
| 96 | }
|
| 97 |
|
| 98 | export const Indigo = {
|
| 99 | '--indigo-0': '#edf2ff',
|
| 100 | '--indigo-1': '#dbe4ff',
|
| 101 | '--indigo-2': '#bac8ff',
|
| 102 | '--indigo-3': '#91a7ff',
|
| 103 | '--indigo-4': '#748ffc',
|
| 104 | '--indigo-5': '#5c7cfa',
|
| 105 | '--indigo-6': '#4c6ef5',
|
| 106 | '--indigo-7': '#4263eb',
|
| 107 | '--indigo-8': '#3b5bdb',
|
| 108 | '--indigo-9': '#364fc7',
|
| 109 | '--indigo-10': '#2f44ad',
|
| 110 | '--indigo-11': '#283a94',
|
| 111 | '--indigo-12': '#21307a',
|
| 112 | }
|
| 113 |
|
| 114 | export const Blue = {
|
| 115 | '--blue-0': '#e7f5ff',
|
| 116 | '--blue-1': '#d0ebff',
|
| 117 | '--blue-2': '#a5d8ff',
|
| 118 | '--blue-3': '#74c0fc',
|
| 119 | '--blue-4': '#4dabf7',
|
| 120 | '--blue-5': '#339af0',
|
| 121 | '--blue-6': '#228be6',
|
| 122 | '--blue-7': '#1c7ed6',
|
| 123 | '--blue-8': '#1971c2',
|
| 124 | '--blue-9': '#1864ab',
|
| 125 | '--blue-10': '#145591',
|
| 126 | '--blue-11': '#114678',
|
| 127 | '--blue-12': '#0d375e',
|
| 128 | }
|
| 129 |
|
| 130 | export const Cyan = {
|
| 131 | '--cyan-0': '#e3fafc',
|
| 132 | '--cyan-1': '#c5f6fa',
|
| 133 | '--cyan-2': '#99e9f2',
|
| 134 | '--cyan-3': '#66d9e8',
|
| 135 | '--cyan-4': '#3bc9db',
|
| 136 | '--cyan-5': '#22b8cf',
|
| 137 | '--cyan-6': '#15aabf',
|
| 138 | '--cyan-7': '#1098ad',
|
| 139 | '--cyan-8': '#0c8599',
|
| 140 | '--cyan-9': '#0b7285',
|
| 141 | '--cyan-10': '#095c6b',
|
| 142 | '--cyan-11': '#074652',
|
| 143 | '--cyan-12': '#053038',
|
| 144 | }
|
| 145 |
|
| 146 | export const Teal = {
|
| 147 | '--teal-0': '#e6fcf5',
|
| 148 | '--teal-1': '#c3fae8',
|
| 149 | '--teal-2': '#96f2d7',
|
| 150 | '--teal-3': '#63e6be',
|
| 151 | '--teal-4': '#38d9a9',
|
| 152 | '--teal-5': '#20c997',
|
| 153 | '--teal-6': '#12b886',
|
| 154 | '--teal-7': '#0ca678',
|
| 155 | '--teal-8': '#099268',
|
| 156 | '--teal-9': '#087f5b',
|
| 157 | '--teal-10': '#066649',
|
| 158 | '--teal-11': '#054d37',
|
| 159 | '--teal-12': '#033325',
|
| 160 | }
|
| 161 |
|
| 162 | export const Green = {
|
| 163 | '--green-0': '#ebfbee',
|
| 164 | '--green-1': '#d3f9d8',
|
| 165 | '--green-2': '#b2f2bb',
|
| 166 | '--green-3': '#8ce99a',
|
| 167 | '--green-4': '#69db7c',
|
| 168 | '--green-5': '#51cf66',
|
| 169 | '--green-6': '#40c057',
|
| 170 | '--green-7': '#37b24d',
|
| 171 | '--green-8': '#2f9e44',
|
| 172 | '--green-9': '#2b8a3e',
|
| 173 | '--green-10': '#237032',
|
| 174 | '--green-11': '#1b5727',
|
| 175 | '--green-12': '#133d1b',
|
| 176 | }
|
| 177 |
|
| 178 | export const Lime = {
|
| 179 | '--lime-0': '#f4fce3',
|
| 180 | '--lime-1': '#e9fac8',
|
| 181 | '--lime-2': '#d8f5a2',
|
| 182 | '--lime-3': '#c0eb75',
|
| 183 | '--lime-4': '#a9e34b',
|
| 184 | '--lime-5': '#94d82d',
|
| 185 | '--lime-6': '#82c91e',
|
| 186 | '--lime-7': '#74b816',
|
| 187 | '--lime-8': '#66a80f',
|
| 188 | '--lime-9': '#5c940d',
|
| 189 | '--lime-10': '#4c7a0b',
|
| 190 | '--lime-11': '#3c6109',
|
| 191 | '--lime-12': '#2c4706',
|
| 192 | }
|
| 193 |
|
| 194 | export const Yellow = {
|
| 195 | '--yellow-0': '#fff9db',
|
| 196 | '--yellow-1': '#fff3bf',
|
| 197 | '--yellow-2': '#ffec99',
|
| 198 | '--yellow-3': '#ffe066',
|
| 199 | '--yellow-4': '#ffd43b',
|
| 200 | '--yellow-5': '#fcc419',
|
| 201 | '--yellow-6': '#fab005',
|
| 202 | '--yellow-7': '#f59f00',
|
| 203 | '--yellow-8': '#f08c00',
|
| 204 | '--yellow-9': '#e67700',
|
| 205 | '--yellow-10': '#b35c00',
|
| 206 | '--yellow-11': '#804200',
|
| 207 | '--yellow-12': '#663500',
|
| 208 | }
|
| 209 |
|
| 210 | export const Orange = {
|
| 211 | '--orange-0': '#fff4e6',
|
| 212 | '--orange-1': '#ffe8cc',
|
| 213 | '--orange-2': '#ffd8a8',
|
| 214 | '--orange-3': '#ffc078',
|
| 215 | '--orange-4': '#ffa94d',
|
| 216 | '--orange-5': '#ff922b',
|
| 217 | '--orange-6': '#fd7e14',
|
| 218 | '--orange-7': '#f76707',
|
| 219 | '--orange-8': '#e8590c',
|
| 220 | '--orange-9': '#d9480f',
|
| 221 | '--orange-10': '#bf400d',
|
| 222 | '--orange-11': '#99330b',
|
| 223 | '--orange-12': '#802b09',
|
| 224 | }
|
| 225 |
|
| 226 | export const Choco = {
|
| 227 | '--choco-0': '#fff8dc',
|
| 228 | '--choco-1': '#fce1bc',
|
| 229 | '--choco-2': '#f7ca9e',
|
| 230 | '--choco-3': '#f1b280',
|
| 231 | '--choco-4': '#e99b62',
|
| 232 | '--choco-5': '#df8545',
|
| 233 | '--choco-6': '#d46e25',
|
| 234 | '--choco-7': '#bd5f1b',
|
| 235 | '--choco-8': '#a45117',
|
| 236 | '--choco-9': '#8a4513',
|
| 237 | '--choco-10': '#703a13',
|
| 238 | '--choco-11': '#572f12',
|
| 239 | '--choco-12': '#3d210d',
|
| 240 | }
|
| 241 |
|
| 242 | export const Brown = {
|
| 243 | '--brown-0': '#faf4eb',
|
| 244 | '--brown-1': '#ede0d1',
|
| 245 | '--brown-2': '#e0cab7',
|
| 246 | '--brown-3': '#d3b79e',
|
| 247 | '--brown-4': '#c5a285',
|
| 248 | '--brown-5': '#b78f6d',
|
| 249 | '--brown-6': '#a87c56',
|
| 250 | '--brown-7': '#956b47',
|
| 251 | '--brown-8': '#825b3a',
|
| 252 | '--brown-9': '#6f4b2d',
|
| 253 | '--brown-10': '#5e3a21',
|
| 254 | '--brown-11': '#4e2b15',
|
| 255 | '--brown-12': '#422412',
|
| 256 | }
|
| 257 |
|
| 258 | export const Sand = {
|
| 259 | '--sand-0': '#f8fafb',
|
| 260 | '--sand-1': '#e6e4dc',
|
| 261 | '--sand-2': '#d5cfbd',
|
| 262 | '--sand-3': '#c2b9a0',
|
| 263 | '--sand-4': '#aea58c',
|
| 264 | '--sand-5': '#9a9178',
|
| 265 | '--sand-6': '#867c65',
|
| 266 | '--sand-7': '#736a53',
|
| 267 | '--sand-8': '#5f5746',
|
| 268 | '--sand-9': '#4b4639',
|
| 269 | '--sand-10': '#38352d',
|
| 270 | '--sand-11': '#252521',
|
| 271 | '--sand-12': '#121210',
|
| 272 | }
|
| 273 |
|
| 274 | export const Camo = {
|
| 275 | '--camo-0': '#f9fbe7',
|
| 276 | '--camo-1': '#e8ed9c',
|
| 277 | '--camo-2': '#d2df4e',
|
| 278 | '--camo-3': '#c2ce34',
|
| 279 | '--camo-4': '#b5bb2e',
|
| 280 | '--camo-5': '#a7a827',
|
| 281 | '--camo-6': '#999621',
|
| 282 | '--camo-7': '#8c851c',
|
| 283 | '--camo-8': '#7e7416',
|
| 284 | '--camo-9': '#6d6414',
|
| 285 | '--camo-10': '#5d5411',
|
| 286 | '--camo-11': '#4d460e',
|
| 287 | '--camo-12': '#36300a',
|
| 288 | }
|
| 289 |
|
| 290 | export const Jungle = {
|
| 291 | '--jungle-0': '#ecfeb0',
|
| 292 | '--jungle-1': '#def39a',
|
| 293 | '--jungle-2': '#d0e884',
|
| 294 | '--jungle-3': '#c2dd6e',
|
| 295 | '--jungle-4': '#b5d15b',
|
| 296 | '--jungle-5': '#a8c648',
|
| 297 | '--jungle-6': '#9bbb36',
|
| 298 | '--jungle-7': '#8fb024',
|
| 299 | '--jungle-8': '#84a513',
|
| 300 | '--jungle-9': '#7a9908',
|
| 301 | '--jungle-10': '#658006',
|
| 302 | '--jungle-11': '#516605',
|
| 303 | '--jungle-12': '#3d4d04',
|
| 304 | }
|
| 305 |
|
| 306 | /*
|
| 307 | https://codepen.io/argyleink/pen/VwrKRrY?
|
| 308 | * {
|
| 309 | --gray: #adb5bd;
|
| 310 | --red: #ff6b6b;
|
| 311 | --pink: #f06595;
|
| 312 | --purple: #cc5de8;
|
| 313 | --violet: #f3f0ff;
|
| 314 | --indigo: #5c7cfa;
|
| 315 | --blue: #339af0;
|
| 316 | --cyan: #22b8cf;
|
| 317 | --teal: #20c997;
|
| 318 | --green: #51cf66;
|
| 319 | --lime: #94d82d;
|
| 320 | --yellow: #fcc419;
|
| 321 | --orange: #ff922b;
|
| 322 |
|
| 323 | --base: var(--indigo);
|
| 324 |
|
| 325 | --color-0: lch(from var(--base) 98% 10 h);
|
| 326 | --color-1: lch(from var(--base) 93% 20 h);
|
| 327 | --color-2: lch(from var(--base) 85% 40 h);
|
| 328 | --color-3: lch(from var(--base) 75% 46 h);
|
| 329 | --color-4: lch(from var(--base) 66% 51 h);
|
| 330 | --color-5: lch(from var(--base) 61% 52 h);
|
| 331 | --color-6: lch(from var(--base) 55% 57 h);
|
| 332 | --color-7: lch(from var(--base) 49% 58 h);
|
| 333 | --color-8: lch(from var(--base) 43% 55 h);
|
| 334 | --color-9: lch(from var(--base) 39% 48 h);
|
| 335 | --color-10: lch(from var(--base) 31% 48 h);
|
| 336 | --color-11: lch(from var(--base) 25% 48 h);
|
| 337 | --color-12: lch(from var(--base) 15% 40 h);
|
| 338 | --color-13: lch(from var(--base) 10% 30 h);
|
| 339 | --color-14: lch(from var(--base) 5% 20 h);
|
| 340 | --color-15: lch(from var(--base) 1% 5 h);
|
| 341 | }
|
| 342 | */
|
| 343 |
|
| 344 | const Colors = {
|
| 345 | ...Gray,
|
| 346 | ...Stone,
|
| 347 | ...Red,
|
| 348 | ...Pink,
|
| 349 | ...Purple,
|
| 350 | ...Violet,
|
| 351 | ...Indigo,
|
| 352 | ...Blue,
|
| 353 | ...Cyan,
|
| 354 | ...Teal,
|
| 355 | ...Green,
|
| 356 | ...Lime,
|
| 357 | ...Yellow,
|
| 358 | ...Orange,
|
| 359 | ...Choco,
|
| 360 | ...Brown,
|
| 361 | ...Sand,
|
| 362 | ...Camo,
|
| 363 | ...Jungle,
|
| 364 | }
|
| 365 |
|
| 366 | export default Colors
|