| 1 | /** |
| 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | * |
| 4 | * This source code is licensed under the MIT license found in the |
| 5 | * LICENSE file in the root directory of this source tree. |
| 6 | */ |
| 7 | |
| 8 | /** |
| 9 | * Sync from <https://github.com/reactjs/reactjs.org/blob/main/beta/colors.js>. |
| 10 | */ |
| 11 | |
| 12 | module.exports = { |
| 13 | // Text colors |
| 14 | primary: '#23272F', // gray-90 |
| 15 | 'primary-dark': '#F6F7F9', // gray-5 |
| 16 | secondary: '#404756', // gray-70 |
| 17 | 'secondary-dark': '#EBECF0', // gray-10 |
| 18 | link: '#087EA4', // blue-50 |
| 19 | 'link-dark': '#149ECA', // blue-40 |
| 20 | syntax: '#EBECF0', // gray-10 |
| 21 | wash: '#FFFFFF', |
| 22 | 'wash-dark': '#23272F', // gray-90 |
| 23 | card: '#F6F7F9', // gray-05 |
| 24 | 'card-dark': '#343A46', // gray-80 |
| 25 | highlight: '#E6F7FF', // blue-10 |
| 26 | 'highlight-dark': 'rgba(88,175,223,.1)', |
| 27 | border: '#EBECF0', // gray-10 |
| 28 | 'border-dark': '#343A46', // gray-80 |
| 29 | 'secondary-button': '#EBECF0', // gray-10 |
| 30 | 'secondary-button-dark': '#404756', // gray-70 |
| 31 | |
| 32 | // Gray |
| 33 | 'gray-95': '#16181D', |
| 34 | 'gray-90': '#23272F', |
| 35 | 'gray-80': '#343A46', |
| 36 | 'gray-70': '#404756', |
| 37 | 'gray-60': '#4E5769', |
| 38 | 'gray-50': '#5E687E', // unused |
| 39 | 'gray-40': '#78839B', |
| 40 | 'gray-30': '#99A1B3', |
| 41 | 'gray-20': '#BCC1CD', |
| 42 | 'gray-10': '#EBECF0', |
| 43 | 'gray-5': '#F6F7F9', |
| 44 | |
| 45 | // Blue |
| 46 | 'blue-60': '#045975', |
| 47 | 'blue-50': '#087EA4', |
| 48 | 'blue-40': '#149ECA', // Brand Blue |
| 49 | 'blue-30': '#58C4DC', // unused |
| 50 | 'blue-20': '#ABE2ED', |
| 51 | 'blue-10': '#E6F7FF', // todo: doesn't match illustrations |
| 52 | 'blue-5': '#E6F6FA', |
| 53 | |
| 54 | // Yellow |
| 55 | 'yellow-60': '#B65700', |
| 56 | 'yellow-50': '#C76A15', |
| 57 | 'yellow-40': '#DB7D27', // unused |
| 58 | 'yellow-30': '#FABD62', // unused |
| 59 | 'yellow-20': '#FCDEB0', // unused |
| 60 | 'yellow-10': '#FDE7C7', |
| 61 | 'yellow-5': '#FEF5E7', |
| 62 | |
| 63 | // Purple |
| 64 | 'purple-60': '#2B3491', // unused |
| 65 | 'purple-50': '#575FB7', |
| 66 | 'purple-40': '#6B75DB', |
| 67 | 'purple-30': '#8891EC', |
| 68 | 'purple-20': '#C3C8F5', // unused |
| 69 | 'purple-10': '#E7E9FB', |
| 70 | 'purple-5': '#F3F4FD', |
| 71 | |
| 72 | // Green |
| 73 | 'green-60': '#2B6E62', |
| 74 | 'green-50': '#388F7F', |
| 75 | 'green-40': '#44AC99', |
| 76 | 'green-30': '#7FCCBF', |
| 77 | 'green-20': '#ABDED5', |
| 78 | 'green-10': '#E5F5F2', |
| 79 | 'green-5': '#F4FBF9', |
| 80 | |
| 81 | // RED |
| 82 | 'red-60': '#712D28', |
| 83 | 'red-50': '#A6423A', // unused |
| 84 | 'red-40': '#C1554D', |
| 85 | 'red-30': '#D07D77', |
| 86 | 'red-20': '#E5B7B3', // unused |
| 87 | 'red-10': '#F2DBD9', // unused |
| 88 | 'red-5': '#FAF1F0', |
| 89 | |
| 90 | // MISC |
| 91 | 'code-block': '#99a1b30f', // gray-30 @ 6% |
| 92 | 'gradient-blue': '#58C4DC', // Only used for the landing gradient for now. |
| 93 | github: { |
| 94 | highlight: '#fffbdd', |
| 95 | }, |
| 96 | }; |