├── .gitignore ├── README.md ├── TrelloPalette.sketch ├── build ├── brand-colors.json ├── brand-colors.less ├── brand-colors.min.json ├── brand-colors.sass ├── brand-colors.scss ├── brand_colors.xml └── trello.sketchpalette ├── index.coffee ├── package.json ├── src ├── converters │ ├── android.coffee │ ├── index.coffee │ ├── json.coffee │ ├── less.coffee │ ├── scss.coffee │ └── sketchpalette.coffee ├── data │ ├── ADG-palette.coffee │ ├── palette-o.coffee │ └── palette.coffee └── utils │ ├── slugify.coffee │ └── write.coffee └── tools ├── convert └── convertSketch /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Trellicolors 2 | 3 | This script converts the Trello brand colors into various formats. 4 | 5 | Various formats include… 6 | 7 | - LESS, SCSS, and SASS variables 8 | - XML (for Android) 9 | - JSON 10 | 11 | If you’re just looking for exported files, see `/build`. 12 | 13 | 14 | # Sketch Palette 15 | 16 | To import the sketch palette: 17 | 18 | - Install the [sketch-palettes 19 | plugin](https://github.com/andrewfiorillo/sketch-palettes). 20 | - Import `/build/trello.sketchpalette` via the usage instructions. 21 | -------------------------------------------------------------------------------- /TrelloPalette.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trello-archive/trellicolors/d05bea3e440d4bb69f73d26fbd0fca3ed00d6029/TrelloPalette.sketch -------------------------------------------------------------------------------- /build/brand-colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "N0": "#FFFFFF", 3 | "N10": "#FAFBFC", 4 | "N20": "#F4F5F7", 5 | "N30": "#EBECF0", 6 | "N40": "#DFE1E6", 7 | "N50": "#C1C7D0", 8 | "N60": "#B3BAC5", 9 | "N70": "#A5ADBA", 10 | "N80": "#97A0AF", 11 | "N90": "#8993A4", 12 | "N100": "#7A869A", 13 | "N200": "#6B778C", 14 | "N300": "#5E6C84", 15 | "N400": "#505F79", 16 | "N500": "#42526E", 17 | "N600": "#344563", 18 | "N700": "#253858", 19 | "N800": "#172B4D", 20 | "N900": "#091E42", 21 | "trello-blue-50": "#E4F0F6", 22 | "trello-blue-100": "#BCD9EA", 23 | "trello-blue-200": "#8BBDD9", 24 | "trello-blue-300": "#5BA4CF", 25 | "trello-blue-400": "#298FCA", 26 | "trello-blue-500": "#0079BF", 27 | "trello-blue-600": "#026AA7", 28 | "trello-blue-700": "#055A8C", 29 | "trello-blue-800": "#094C72", 30 | "trello-blue-900": "#0C3953", 31 | "green-50": "#EEF6EC", 32 | "green-100": "#D6ECD2", 33 | "green-200": "#B7DDB0", 34 | "green-300": "#99D18F", 35 | "green-400": "#7BC86C", 36 | "green-500": "#61BD4F", 37 | "green-600": "#5AAC44", 38 | "green-700": "#519839", 39 | "green-800": "#49852E", 40 | "green-900": "#3F6F21", 41 | "orange-50": "#FDF5EC", 42 | "orange-100": "#FCE8D2", 43 | "orange-200": "#FAD8B0", 44 | "orange-300": "#FDC788", 45 | "orange-400": "#FFB968", 46 | "orange-500": "#FFAB4A", 47 | "orange-600": "#E99E40", 48 | "orange-700": "#D29034", 49 | "orange-800": "#BB8129", 50 | "orange-900": "#A0711C", 51 | "red-50": "#FBEDEB", 52 | "red-100": "#F5D3CE", 53 | "red-200": "#EFB3AB", 54 | "red-300": "#EC9488", 55 | "red-400": "#EF7564", 56 | "red-500": "#EB5A46", 57 | "red-600": "#CF513D", 58 | "red-700": "#B04632", 59 | "red-800": "#933B27", 60 | "red-900": "#6E2F1A", 61 | "yellow-50": "#FDFAE5", 62 | "yellow-100": "#FAF3C0", 63 | "yellow-200": "#F5EA92", 64 | "yellow-300": "#F3E260", 65 | "yellow-400": "#F5DD29", 66 | "yellow-500": "#F2D600", 67 | "yellow-600": "#E6C60D", 68 | "yellow-700": "#D9B51C", 69 | "yellow-800": "#CCA42B", 70 | "yellow-900": "#BD903C", 71 | "purple-50": "#F7F0FA", 72 | "purple-100": "#EDDBF4", 73 | "purple-200": "#DFC0EB", 74 | "purple-300": "#D5A6E6", 75 | "purple-400": "#CD8DE5", 76 | "purple-500": "#C377E0", 77 | "purple-600": "#A86CC1", 78 | "purple-700": "#89609E", 79 | "purple-800": "#6C547B", 80 | "purple-900": "#484553", 81 | "pink-50": "#FEF2F9", 82 | "pink-100": "#FCDEF0", 83 | "pink-200": "#FAC6E5", 84 | "pink-300": "#FFB0E1", 85 | "pink-400": "#FF95D6", 86 | "pink-500": "#FF80CE", 87 | "pink-600": "#E76EB1", 88 | "pink-700": "#CD5A91", 89 | "pink-800": "#B44772", 90 | "pink-900": "#96304C", 91 | "sky-50": "#E4F7FA", 92 | "sky-100": "#BDECF3", 93 | "sky-200": "#8FDFEB", 94 | "sky-300": "#5DD3E5", 95 | "sky-400": "#29CCE5", 96 | "sky-500": "#00C2E0", 97 | "sky-600": "#00AECC", 98 | "sky-700": "#0098B7", 99 | "sky-800": "#0082A0", 100 | "sky-900": "#006988", 101 | "lime-50": "#ECFBF3", 102 | "lime-100": "#D3F6E4", 103 | "lime-200": "#B3F1D0", 104 | "lime-300": "#90ECC1", 105 | "lime-400": "#6DECA9", 106 | "lime-500": "#51E898", 107 | "lime-600": "#4FD683", 108 | "lime-700": "#4DC26B", 109 | "lime-800": "#4CAF54", 110 | "lime-900": "#4A9839", 111 | "business-blue-50": "#EDEFF4", 112 | "business-blue-100": "#D2D7E5", 113 | "business-blue-200": "#B2B9D0", 114 | "business-blue-300": "#838FB5", 115 | "business-blue-400": "#6170A1", 116 | "business-blue-500": "#42548E", 117 | "business-blue-600": "#3E4D80", 118 | "business-blue-700": "#3A476F", 119 | "business-blue-800": "#36405F", 120 | "business-blue-900": "#30364C", 121 | "light-gray-50": "#F8F9F9", 122 | "light-gray-100": "#EDEFF0", 123 | "light-gray-200": "#E2E4E6", 124 | "light-gray-300": "#D6DADC", 125 | "light-gray-400": "#CDD2D4", 126 | "light-gray-500": "#C4C9CC", 127 | "light-gray-600": "#B6BBBF", 128 | "light-gray-700": "#A5ACB0", 129 | "light-gray-800": "#959DA1", 130 | "light-gray-900": "#838C91" 131 | } -------------------------------------------------------------------------------- /build/brand-colors.less: -------------------------------------------------------------------------------- 1 | // Trello Brand Colors 2 | 3 | @N0: #FFFFFF; 4 | @N10: #FAFBFC; 5 | @N20: #F4F5F7; 6 | @N30: #EBECF0; 7 | @N40: #DFE1E6; 8 | @N50: #C1C7D0; 9 | @N60: #B3BAC5; 10 | @N70: #A5ADBA; 11 | @N80: #97A0AF; 12 | @N90: #8993A4; 13 | @N100: #7A869A; 14 | @N200: #6B778C; 15 | @N300: #5E6C84; 16 | @N400: #505F79; 17 | @N500: #42526E; 18 | @N600: #344563; 19 | @N700: #253858; 20 | @N800: #172B4D; 21 | @N900: #091E42; 22 | 23 | @N10A: fade(#091E42, 2%); 24 | @N20A: fade(#091E42, 4%); 25 | @N30A: fade(#091E42, 8%); 26 | @N40A: fade(#091E42, 13%); 27 | @N50A: fade(#091E42, 25%); 28 | @N60A: fade(#091E42, 31%); 29 | @N70A: fade(#091E42, 36%); 30 | @N80A: fade(#091E42, 42%); 31 | @N90A: fade(#091E42, 48%); 32 | @N100A: fade(#091E42, 54%); 33 | @N200A: fade(#091E42, 60%); 34 | @N300A: fade(#091E42, 66%); 35 | @N400A: fade(#091E42, 71%); 36 | @N500A: fade(#091E42, 77%); 37 | @N600A: fade(#091E42, 82%); 38 | @N700A: fade(#091E42, 89%); 39 | @N800A: fade(#091E42, 95%); 40 | 41 | @trello-blue-50: #E4F0F6; 42 | @trello-blue-100: #BCD9EA; 43 | @trello-blue-200: #8BBDD9; 44 | @trello-blue-300: #5BA4CF; 45 | @trello-blue-400: #298FCA; 46 | @trello-blue-500: #0079BF; 47 | @trello-blue-600: #026AA7; 48 | @trello-blue-700: #055A8C; 49 | @trello-blue-800: #094C72; 50 | @trello-blue-900: #0C3953; 51 | 52 | @green-50: #EEF6EC; 53 | @green-100: #D6ECD2; 54 | @green-200: #B7DDB0; 55 | @green-300: #99D18F; 56 | @green-400: #7BC86C; 57 | @green-500: #61BD4F; 58 | @green-600: #5AAC44; 59 | @green-700: #519839; 60 | @green-800: #49852E; 61 | @green-900: #3F6F21; 62 | 63 | @orange-50: #FDF5EC; 64 | @orange-100: #FCE8D2; 65 | @orange-200: #FAD8B0; 66 | @orange-300: #FDC788; 67 | @orange-400: #FFB968; 68 | @orange-500: #FFAB4A; 69 | @orange-600: #E99E40; 70 | @orange-700: #D29034; 71 | @orange-800: #BB8129; 72 | @orange-900: #A0711C; 73 | 74 | @red-50: #FBEDEB; 75 | @red-100: #F5D3CE; 76 | @red-200: #EFB3AB; 77 | @red-300: #EC9488; 78 | @red-400: #EF7564; 79 | @red-500: #EB5A46; 80 | @red-600: #CF513D; 81 | @red-700: #B04632; 82 | @red-800: #933B27; 83 | @red-900: #6E2F1A; 84 | 85 | @yellow-50: #FDFAE5; 86 | @yellow-100: #FAF3C0; 87 | @yellow-200: #F5EA92; 88 | @yellow-300: #F3E260; 89 | @yellow-400: #F5DD29; 90 | @yellow-500: #F2D600; 91 | @yellow-600: #E6C60D; 92 | @yellow-700: #D9B51C; 93 | @yellow-800: #CCA42B; 94 | @yellow-900: #BD903C; 95 | 96 | @purple-50: #F7F0FA; 97 | @purple-100: #EDDBF4; 98 | @purple-200: #DFC0EB; 99 | @purple-300: #D5A6E6; 100 | @purple-400: #CD8DE5; 101 | @purple-500: #C377E0; 102 | @purple-600: #A86CC1; 103 | @purple-700: #89609E; 104 | @purple-800: #6C547B; 105 | @purple-900: #484553; 106 | 107 | @pink-50: #FEF2F9; 108 | @pink-100: #FCDEF0; 109 | @pink-200: #FAC6E5; 110 | @pink-300: #FFB0E1; 111 | @pink-400: #FF95D6; 112 | @pink-500: #FF80CE; 113 | @pink-600: #E76EB1; 114 | @pink-700: #CD5A91; 115 | @pink-800: #B44772; 116 | @pink-900: #96304C; 117 | 118 | @sky-50: #E4F7FA; 119 | @sky-100: #BDECF3; 120 | @sky-200: #8FDFEB; 121 | @sky-300: #5DD3E5; 122 | @sky-400: #29CCE5; 123 | @sky-500: #00C2E0; 124 | @sky-600: #00AECC; 125 | @sky-700: #0098B7; 126 | @sky-800: #0082A0; 127 | @sky-900: #006988; 128 | 129 | @lime-50: #ECFBF3; 130 | @lime-100: #D3F6E4; 131 | @lime-200: #B3F1D0; 132 | @lime-300: #90ECC1; 133 | @lime-400: #6DECA9; 134 | @lime-500: #51E898; 135 | @lime-600: #4FD683; 136 | @lime-700: #4DC26B; 137 | @lime-800: #4CAF54; 138 | @lime-900: #4A9839; 139 | 140 | @business-blue-50: #EDEFF4; 141 | @business-blue-100: #D2D7E5; 142 | @business-blue-200: #B2B9D0; 143 | @business-blue-300: #838FB5; 144 | @business-blue-400: #6170A1; 145 | @business-blue-500: #42548E; 146 | @business-blue-600: #3E4D80; 147 | @business-blue-700: #3A476F; 148 | @business-blue-800: #36405F; 149 | @business-blue-900: #30364C; 150 | 151 | @light-gray-50: #F8F9F9; 152 | @light-gray-100: #EDEFF0; 153 | @light-gray-200: #E2E4E6; 154 | @light-gray-300: #D6DADC; 155 | @light-gray-400: #CDD2D4; 156 | @light-gray-500: #C4C9CC; 157 | @light-gray-600: #B6BBBF; 158 | @light-gray-700: #A5ACB0; 159 | @light-gray-800: #959DA1; 160 | @light-gray-900: #838C91; 161 | -------------------------------------------------------------------------------- /build/brand-colors.min.json: -------------------------------------------------------------------------------- 1 | {"N0":"#FFFFFF","N10":"#FAFBFC","N20":"#F4F5F7","N30":"#EBECF0","N40":"#DFE1E6","N50":"#C1C7D0","N60":"#B3BAC5","N70":"#A5ADBA","N80":"#97A0AF","N90":"#8993A4","N100":"#7A869A","N200":"#6B778C","N300":"#5E6C84","N400":"#505F79","N500":"#42526E","N600":"#344563","N700":"#253858","N800":"#172B4D","N900":"#091E42","trello-blue-50":"#E4F0F6","trello-blue-100":"#BCD9EA","trello-blue-200":"#8BBDD9","trello-blue-300":"#5BA4CF","trello-blue-400":"#298FCA","trello-blue-500":"#0079BF","trello-blue-600":"#026AA7","trello-blue-700":"#055A8C","trello-blue-800":"#094C72","trello-blue-900":"#0C3953","green-50":"#EEF6EC","green-100":"#D6ECD2","green-200":"#B7DDB0","green-300":"#99D18F","green-400":"#7BC86C","green-500":"#61BD4F","green-600":"#5AAC44","green-700":"#519839","green-800":"#49852E","green-900":"#3F6F21","orange-50":"#FDF5EC","orange-100":"#FCE8D2","orange-200":"#FAD8B0","orange-300":"#FDC788","orange-400":"#FFB968","orange-500":"#FFAB4A","orange-600":"#E99E40","orange-700":"#D29034","orange-800":"#BB8129","orange-900":"#A0711C","red-50":"#FBEDEB","red-100":"#F5D3CE","red-200":"#EFB3AB","red-300":"#EC9488","red-400":"#EF7564","red-500":"#EB5A46","red-600":"#CF513D","red-700":"#B04632","red-800":"#933B27","red-900":"#6E2F1A","yellow-50":"#FDFAE5","yellow-100":"#FAF3C0","yellow-200":"#F5EA92","yellow-300":"#F3E260","yellow-400":"#F5DD29","yellow-500":"#F2D600","yellow-600":"#E6C60D","yellow-700":"#D9B51C","yellow-800":"#CCA42B","yellow-900":"#BD903C","purple-50":"#F7F0FA","purple-100":"#EDDBF4","purple-200":"#DFC0EB","purple-300":"#D5A6E6","purple-400":"#CD8DE5","purple-500":"#C377E0","purple-600":"#A86CC1","purple-700":"#89609E","purple-800":"#6C547B","purple-900":"#484553","pink-50":"#FEF2F9","pink-100":"#FCDEF0","pink-200":"#FAC6E5","pink-300":"#FFB0E1","pink-400":"#FF95D6","pink-500":"#FF80CE","pink-600":"#E76EB1","pink-700":"#CD5A91","pink-800":"#B44772","pink-900":"#96304C","sky-50":"#E4F7FA","sky-100":"#BDECF3","sky-200":"#8FDFEB","sky-300":"#5DD3E5","sky-400":"#29CCE5","sky-500":"#00C2E0","sky-600":"#00AECC","sky-700":"#0098B7","sky-800":"#0082A0","sky-900":"#006988","lime-50":"#ECFBF3","lime-100":"#D3F6E4","lime-200":"#B3F1D0","lime-300":"#90ECC1","lime-400":"#6DECA9","lime-500":"#51E898","lime-600":"#4FD683","lime-700":"#4DC26B","lime-800":"#4CAF54","lime-900":"#4A9839","business-blue-50":"#EDEFF4","business-blue-100":"#D2D7E5","business-blue-200":"#B2B9D0","business-blue-300":"#838FB5","business-blue-400":"#6170A1","business-blue-500":"#42548E","business-blue-600":"#3E4D80","business-blue-700":"#3A476F","business-blue-800":"#36405F","business-blue-900":"#30364C","light-gray-50":"#F8F9F9","light-gray-100":"#EDEFF0","light-gray-200":"#E2E4E6","light-gray-300":"#D6DADC","light-gray-400":"#CDD2D4","light-gray-500":"#C4C9CC","light-gray-600":"#B6BBBF","light-gray-700":"#A5ACB0","light-gray-800":"#959DA1","light-gray-900":"#838C91"} -------------------------------------------------------------------------------- /build/brand-colors.sass: -------------------------------------------------------------------------------- 1 | // Trello Brand Colors 2 | 3 | $N0: #FFFFFF; 4 | $N10: #FAFBFC; 5 | $N20: #F4F5F7; 6 | $N30: #EBECF0; 7 | $N40: #DFE1E6; 8 | $N50: #C1C7D0; 9 | $N60: #B3BAC5; 10 | $N70: #A5ADBA; 11 | $N80: #97A0AF; 12 | $N90: #8993A4; 13 | $N100: #7A869A; 14 | $N200: #6B778C; 15 | $N300: #5E6C84; 16 | $N400: #505F79; 17 | $N500: #42526E; 18 | $N600: #344563; 19 | $N700: #253858; 20 | $N800: #172B4D; 21 | $N900: #091E42; 22 | 23 | $N10A: rgba(#091E42, 0.02); 24 | $N20A: rgba(#091E42, 0.04); 25 | $N30A: rgba(#091E42, 0.08); 26 | $N40A: rgba(#091E42, 0.13); 27 | $N50A: rgba(#091E42, 0.25); 28 | $N60A: rgba(#091E42, 0.31); 29 | $N70A: rgba(#091E42, 0.36); 30 | $N80A: rgba(#091E42, 0.42); 31 | $N90A: rgba(#091E42, 0.48); 32 | $N100A: rgba(#091E42, 0.54); 33 | $N200A: rgba(#091E42, 0.6); 34 | $N300A: rgba(#091E42, 0.66); 35 | $N400A: rgba(#091E42, 0.71); 36 | $N500A: rgba(#091E42, 0.77); 37 | $N600A: rgba(#091E42, 0.82); 38 | $N700A: rgba(#091E42, 0.89); 39 | $N800A: rgba(#091E42, 0.95); 40 | 41 | $trello-blue-50: #E4F0F6; 42 | $trello-blue-100: #BCD9EA; 43 | $trello-blue-200: #8BBDD9; 44 | $trello-blue-300: #5BA4CF; 45 | $trello-blue-400: #298FCA; 46 | $trello-blue-500: #0079BF; 47 | $trello-blue-600: #026AA7; 48 | $trello-blue-700: #055A8C; 49 | $trello-blue-800: #094C72; 50 | $trello-blue-900: #0C3953; 51 | 52 | $green-50: #EEF6EC; 53 | $green-100: #D6ECD2; 54 | $green-200: #B7DDB0; 55 | $green-300: #99D18F; 56 | $green-400: #7BC86C; 57 | $green-500: #61BD4F; 58 | $green-600: #5AAC44; 59 | $green-700: #519839; 60 | $green-800: #49852E; 61 | $green-900: #3F6F21; 62 | 63 | $orange-50: #FDF5EC; 64 | $orange-100: #FCE8D2; 65 | $orange-200: #FAD8B0; 66 | $orange-300: #FDC788; 67 | $orange-400: #FFB968; 68 | $orange-500: #FFAB4A; 69 | $orange-600: #E99E40; 70 | $orange-700: #D29034; 71 | $orange-800: #BB8129; 72 | $orange-900: #A0711C; 73 | 74 | $red-50: #FBEDEB; 75 | $red-100: #F5D3CE; 76 | $red-200: #EFB3AB; 77 | $red-300: #EC9488; 78 | $red-400: #EF7564; 79 | $red-500: #EB5A46; 80 | $red-600: #CF513D; 81 | $red-700: #B04632; 82 | $red-800: #933B27; 83 | $red-900: #6E2F1A; 84 | 85 | $yellow-50: #FDFAE5; 86 | $yellow-100: #FAF3C0; 87 | $yellow-200: #F5EA92; 88 | $yellow-300: #F3E260; 89 | $yellow-400: #F5DD29; 90 | $yellow-500: #F2D600; 91 | $yellow-600: #E6C60D; 92 | $yellow-700: #D9B51C; 93 | $yellow-800: #CCA42B; 94 | $yellow-900: #BD903C; 95 | 96 | $purple-50: #F7F0FA; 97 | $purple-100: #EDDBF4; 98 | $purple-200: #DFC0EB; 99 | $purple-300: #D5A6E6; 100 | $purple-400: #CD8DE5; 101 | $purple-500: #C377E0; 102 | $purple-600: #A86CC1; 103 | $purple-700: #89609E; 104 | $purple-800: #6C547B; 105 | $purple-900: #484553; 106 | 107 | $pink-50: #FEF2F9; 108 | $pink-100: #FCDEF0; 109 | $pink-200: #FAC6E5; 110 | $pink-300: #FFB0E1; 111 | $pink-400: #FF95D6; 112 | $pink-500: #FF80CE; 113 | $pink-600: #E76EB1; 114 | $pink-700: #CD5A91; 115 | $pink-800: #B44772; 116 | $pink-900: #96304C; 117 | 118 | $sky-50: #E4F7FA; 119 | $sky-100: #BDECF3; 120 | $sky-200: #8FDFEB; 121 | $sky-300: #5DD3E5; 122 | $sky-400: #29CCE5; 123 | $sky-500: #00C2E0; 124 | $sky-600: #00AECC; 125 | $sky-700: #0098B7; 126 | $sky-800: #0082A0; 127 | $sky-900: #006988; 128 | 129 | $lime-50: #ECFBF3; 130 | $lime-100: #D3F6E4; 131 | $lime-200: #B3F1D0; 132 | $lime-300: #90ECC1; 133 | $lime-400: #6DECA9; 134 | $lime-500: #51E898; 135 | $lime-600: #4FD683; 136 | $lime-700: #4DC26B; 137 | $lime-800: #4CAF54; 138 | $lime-900: #4A9839; 139 | 140 | $business-blue-50: #EDEFF4; 141 | $business-blue-100: #D2D7E5; 142 | $business-blue-200: #B2B9D0; 143 | $business-blue-300: #838FB5; 144 | $business-blue-400: #6170A1; 145 | $business-blue-500: #42548E; 146 | $business-blue-600: #3E4D80; 147 | $business-blue-700: #3A476F; 148 | $business-blue-800: #36405F; 149 | $business-blue-900: #30364C; 150 | 151 | $light-gray-50: #F8F9F9; 152 | $light-gray-100: #EDEFF0; 153 | $light-gray-200: #E2E4E6; 154 | $light-gray-300: #D6DADC; 155 | $light-gray-400: #CDD2D4; 156 | $light-gray-500: #C4C9CC; 157 | $light-gray-600: #B6BBBF; 158 | $light-gray-700: #A5ACB0; 159 | $light-gray-800: #959DA1; 160 | $light-gray-900: #838C91; 161 | -------------------------------------------------------------------------------- /build/brand-colors.scss: -------------------------------------------------------------------------------- 1 | // Trello Brand Colors 2 | 3 | $N0: #FFFFFF; 4 | $N10: #FAFBFC; 5 | $N20: #F4F5F7; 6 | $N30: #EBECF0; 7 | $N40: #DFE1E6; 8 | $N50: #C1C7D0; 9 | $N60: #B3BAC5; 10 | $N70: #A5ADBA; 11 | $N80: #97A0AF; 12 | $N90: #8993A4; 13 | $N100: #7A869A; 14 | $N200: #6B778C; 15 | $N300: #5E6C84; 16 | $N400: #505F79; 17 | $N500: #42526E; 18 | $N600: #344563; 19 | $N700: #253858; 20 | $N800: #172B4D; 21 | $N900: #091E42; 22 | 23 | $N10A: rgba(#091E42, 0.02); 24 | $N20A: rgba(#091E42, 0.04); 25 | $N30A: rgba(#091E42, 0.08); 26 | $N40A: rgba(#091E42, 0.13); 27 | $N50A: rgba(#091E42, 0.25); 28 | $N60A: rgba(#091E42, 0.31); 29 | $N70A: rgba(#091E42, 0.36); 30 | $N80A: rgba(#091E42, 0.42); 31 | $N90A: rgba(#091E42, 0.48); 32 | $N100A: rgba(#091E42, 0.54); 33 | $N200A: rgba(#091E42, 0.6); 34 | $N300A: rgba(#091E42, 0.66); 35 | $N400A: rgba(#091E42, 0.71); 36 | $N500A: rgba(#091E42, 0.77); 37 | $N600A: rgba(#091E42, 0.82); 38 | $N700A: rgba(#091E42, 0.89); 39 | $N800A: rgba(#091E42, 0.95); 40 | 41 | $trello-blue-50: #E4F0F6; 42 | $trello-blue-100: #BCD9EA; 43 | $trello-blue-200: #8BBDD9; 44 | $trello-blue-300: #5BA4CF; 45 | $trello-blue-400: #298FCA; 46 | $trello-blue-500: #0079BF; 47 | $trello-blue-600: #026AA7; 48 | $trello-blue-700: #055A8C; 49 | $trello-blue-800: #094C72; 50 | $trello-blue-900: #0C3953; 51 | 52 | $green-50: #EEF6EC; 53 | $green-100: #D6ECD2; 54 | $green-200: #B7DDB0; 55 | $green-300: #99D18F; 56 | $green-400: #7BC86C; 57 | $green-500: #61BD4F; 58 | $green-600: #5AAC44; 59 | $green-700: #519839; 60 | $green-800: #49852E; 61 | $green-900: #3F6F21; 62 | 63 | $orange-50: #FDF5EC; 64 | $orange-100: #FCE8D2; 65 | $orange-200: #FAD8B0; 66 | $orange-300: #FDC788; 67 | $orange-400: #FFB968; 68 | $orange-500: #FFAB4A; 69 | $orange-600: #E99E40; 70 | $orange-700: #D29034; 71 | $orange-800: #BB8129; 72 | $orange-900: #A0711C; 73 | 74 | $red-50: #FBEDEB; 75 | $red-100: #F5D3CE; 76 | $red-200: #EFB3AB; 77 | $red-300: #EC9488; 78 | $red-400: #EF7564; 79 | $red-500: #EB5A46; 80 | $red-600: #CF513D; 81 | $red-700: #B04632; 82 | $red-800: #933B27; 83 | $red-900: #6E2F1A; 84 | 85 | $yellow-50: #FDFAE5; 86 | $yellow-100: #FAF3C0; 87 | $yellow-200: #F5EA92; 88 | $yellow-300: #F3E260; 89 | $yellow-400: #F5DD29; 90 | $yellow-500: #F2D600; 91 | $yellow-600: #E6C60D; 92 | $yellow-700: #D9B51C; 93 | $yellow-800: #CCA42B; 94 | $yellow-900: #BD903C; 95 | 96 | $purple-50: #F7F0FA; 97 | $purple-100: #EDDBF4; 98 | $purple-200: #DFC0EB; 99 | $purple-300: #D5A6E6; 100 | $purple-400: #CD8DE5; 101 | $purple-500: #C377E0; 102 | $purple-600: #A86CC1; 103 | $purple-700: #89609E; 104 | $purple-800: #6C547B; 105 | $purple-900: #484553; 106 | 107 | $pink-50: #FEF2F9; 108 | $pink-100: #FCDEF0; 109 | $pink-200: #FAC6E5; 110 | $pink-300: #FFB0E1; 111 | $pink-400: #FF95D6; 112 | $pink-500: #FF80CE; 113 | $pink-600: #E76EB1; 114 | $pink-700: #CD5A91; 115 | $pink-800: #B44772; 116 | $pink-900: #96304C; 117 | 118 | $sky-50: #E4F7FA; 119 | $sky-100: #BDECF3; 120 | $sky-200: #8FDFEB; 121 | $sky-300: #5DD3E5; 122 | $sky-400: #29CCE5; 123 | $sky-500: #00C2E0; 124 | $sky-600: #00AECC; 125 | $sky-700: #0098B7; 126 | $sky-800: #0082A0; 127 | $sky-900: #006988; 128 | 129 | $lime-50: #ECFBF3; 130 | $lime-100: #D3F6E4; 131 | $lime-200: #B3F1D0; 132 | $lime-300: #90ECC1; 133 | $lime-400: #6DECA9; 134 | $lime-500: #51E898; 135 | $lime-600: #4FD683; 136 | $lime-700: #4DC26B; 137 | $lime-800: #4CAF54; 138 | $lime-900: #4A9839; 139 | 140 | $business-blue-50: #EDEFF4; 141 | $business-blue-100: #D2D7E5; 142 | $business-blue-200: #B2B9D0; 143 | $business-blue-300: #838FB5; 144 | $business-blue-400: #6170A1; 145 | $business-blue-500: #42548E; 146 | $business-blue-600: #3E4D80; 147 | $business-blue-700: #3A476F; 148 | $business-blue-800: #36405F; 149 | $business-blue-900: #30364C; 150 | 151 | $light-gray-50: #F8F9F9; 152 | $light-gray-100: #EDEFF0; 153 | $light-gray-200: #E2E4E6; 154 | $light-gray-300: #D6DADC; 155 | $light-gray-400: #CDD2D4; 156 | $light-gray-500: #C4C9CC; 157 | $light-gray-600: #B6BBBF; 158 | $light-gray-700: #A5ACB0; 159 | $light-gray-800: #959DA1; 160 | $light-gray-900: #838C91; 161 | -------------------------------------------------------------------------------- /build/brand_colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #FFFFFF 5 | #FAFBFC 6 | #F4F5F7 7 | #EBECF0 8 | #DFE1E6 9 | #C1C7D0 10 | #B3BAC5 11 | #A5ADBA 12 | #97A0AF 13 | #8993A4 14 | #7A869A 15 | #6B778C 16 | #5E6C84 17 | #505F79 18 | #42526E 19 | #344563 20 | #253858 21 | #172B4D 22 | #091E42 23 | 24 | #05091E42 25 | #0A091E42 26 | #14091E42 27 | #21091E42 28 | #40091E42 29 | #4F091E42 30 | #5C091E42 31 | #6B091E42 32 | #7A091E42 33 | #8A091E42 34 | #99091E42 35 | #A8091E42 36 | #B5091E42 37 | #C4091E42 38 | #D1091E42 39 | #E3091E42 40 | #F2091E42 41 | 42 | #E4F0F6 43 | #BCD9EA 44 | #8BBDD9 45 | #5BA4CF 46 | #298FCA 47 | #0079BF 48 | #026AA7 49 | #055A8C 50 | #094C72 51 | #0C3953 52 | 53 | #EEF6EC 54 | #D6ECD2 55 | #B7DDB0 56 | #99D18F 57 | #7BC86C 58 | #61BD4F 59 | #5AAC44 60 | #519839 61 | #49852E 62 | #3F6F21 63 | 64 | #FDF5EC 65 | #FCE8D2 66 | #FAD8B0 67 | #FDC788 68 | #FFB968 69 | #FFAB4A 70 | #E99E40 71 | #D29034 72 | #BB8129 73 | #A0711C 74 | 75 | #FBEDEB 76 | #F5D3CE 77 | #EFB3AB 78 | #EC9488 79 | #EF7564 80 | #EB5A46 81 | #CF513D 82 | #B04632 83 | #933B27 84 | #6E2F1A 85 | 86 | #FDFAE5 87 | #FAF3C0 88 | #F5EA92 89 | #F3E260 90 | #F5DD29 91 | #F2D600 92 | #E6C60D 93 | #D9B51C 94 | #CCA42B 95 | #BD903C 96 | 97 | #F7F0FA 98 | #EDDBF4 99 | #DFC0EB 100 | #D5A6E6 101 | #CD8DE5 102 | #C377E0 103 | #A86CC1 104 | #89609E 105 | #6C547B 106 | #484553 107 | 108 | #FEF2F9 109 | #FCDEF0 110 | #FAC6E5 111 | #FFB0E1 112 | #FF95D6 113 | #FF80CE 114 | #E76EB1 115 | #CD5A91 116 | #B44772 117 | #96304C 118 | 119 | #E4F7FA 120 | #BDECF3 121 | #8FDFEB 122 | #5DD3E5 123 | #29CCE5 124 | #00C2E0 125 | #00AECC 126 | #0098B7 127 | #0082A0 128 | #006988 129 | 130 | #ECFBF3 131 | #D3F6E4 132 | #B3F1D0 133 | #90ECC1 134 | #6DECA9 135 | #51E898 136 | #4FD683 137 | #4DC26B 138 | #4CAF54 139 | #4A9839 140 | 141 | #EDEFF4 142 | #D2D7E5 143 | #B2B9D0 144 | #838FB5 145 | #6170A1 146 | #42548E 147 | #3E4D80 148 | #3A476F 149 | #36405F 150 | #30364C 151 | 152 | #F8F9F9 153 | #EDEFF0 154 | #E2E4E6 155 | #D6DADC 156 | #CDD2D4 157 | #C4C9CC 158 | #B6BBBF 159 | #A5ACB0 160 | #959DA1 161 | #838C91 162 | 163 | -------------------------------------------------------------------------------- /build/trello.sketchpalette: -------------------------------------------------------------------------------- 1 | {"compatibleVersion":"2.0","pluginVersion":"2.21","colors":[{"name":"N0","red":1,"green":1,"blue":1,"alpha":1},{"name":"N10","red":0.9803921568627451,"green":0.984313725490196,"blue":0.9882352941176471,"alpha":1},{"name":"N20","red":0.9568627450980393,"green":0.9607843137254902,"blue":0.9686274509803922,"alpha":1},{"name":"N30","red":0.9215686274509803,"green":0.9254901960784314,"blue":0.9411764705882353,"alpha":1},{"name":"N40","red":0.8745098039215686,"green":0.8823529411764706,"blue":0.9019607843137255,"alpha":1},{"name":"N50","red":0.7568627450980392,"green":0.7803921568627451,"blue":0.8156862745098039,"alpha":1},{"name":"N60","red":0.7019607843137254,"green":0.7294117647058823,"blue":0.7725490196078432,"alpha":1},{"name":"N70","red":0.6470588235294118,"green":0.6784313725490196,"blue":0.7294117647058823,"alpha":1},{"name":"N80","red":0.592156862745098,"green":0.6274509803921569,"blue":0.6862745098039216,"alpha":1},{"name":"N90","red":0.5372549019607843,"green":0.5764705882352941,"blue":0.6431372549019608,"alpha":1},{"name":"N100","red":0.47843137254901963,"green":0.5254901960784314,"blue":0.6039215686274509,"alpha":1},{"name":"N200","red":0.4196078431372549,"green":0.4666666666666667,"blue":0.5490196078431373,"alpha":1},{"name":"N300","red":0.3686274509803922,"green":0.4235294117647059,"blue":0.5176470588235295,"alpha":1},{"name":"N400","red":0.3137254901960784,"green":0.37254901960784315,"blue":0.4745098039215686,"alpha":1},{"name":"N500","red":0.25882352941176473,"green":0.3215686274509804,"blue":0.43137254901960786,"alpha":1},{"name":"N600","red":0.20392156862745098,"green":0.27058823529411763,"blue":0.38823529411764707,"alpha":1},{"name":"N700","red":0.1450980392156863,"green":0.2196078431372549,"blue":0.34509803921568627,"alpha":1},{"name":"N800","red":0.09019607843137255,"green":0.16862745098039217,"blue":0.30196078431372547,"alpha":1},{"name":"N900","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"N10A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.02},{"name":"N20A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.04},{"name":"N30A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.08},{"name":"N40A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.13},{"name":"N50A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.25},{"name":"N60A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.31},{"name":"N70A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.36},{"name":"N80A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.42},{"name":"N90A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.48},{"name":"N100A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.54},{"name":"N200A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.6},{"name":"N300A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.66},{"name":"N400A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.71},{"name":"N500A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.77},{"name":"N600A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.82},{"name":"N700A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.89},{"name":"N800A","red":0.03529411764705882,"green":0.11764705882352941,"blue":0.25882352941176473,"alpha":0.95},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Trello Blue 50","red":0.8941176470588236,"green":0.9411764705882353,"blue":0.9647058823529412,"alpha":1},{"name":"Trello Blue 100","red":0.7372549019607844,"green":0.8509803921568627,"blue":0.9176470588235294,"alpha":1},{"name":"Trello Blue 200","red":0.5450980392156862,"green":0.7411764705882353,"blue":0.8509803921568627,"alpha":1},{"name":"Trello Blue 300","red":0.3568627450980392,"green":0.6431372549019608,"blue":0.8117647058823529,"alpha":1},{"name":"Trello Blue 400","red":0.1607843137254902,"green":0.5607843137254902,"blue":0.792156862745098,"alpha":1},{"name":"Trello Blue 500","red":0,"green":0.4745098039215686,"blue":0.7490196078431373,"alpha":1},{"name":"Trello Blue 600","red":0.00784313725490196,"green":0.41568627450980394,"blue":0.6549019607843137,"alpha":1},{"name":"Trello Blue 700","red":0.0196078431372549,"green":0.35294117647058826,"blue":0.5490196078431373,"alpha":1},{"name":"Trello Blue 800","red":0.03529411764705882,"green":0.2980392156862745,"blue":0.4470588235294118,"alpha":1},{"name":"Trello Blue 900","red":0.047058823529411764,"green":0.2235294117647059,"blue":0.3254901960784314,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Green 50","red":0.9333333333333333,"green":0.9647058823529412,"blue":0.9254901960784314,"alpha":1},{"name":"Green 100","red":0.8392156862745098,"green":0.9254901960784314,"blue":0.8235294117647058,"alpha":1},{"name":"Green 200","red":0.7176470588235294,"green":0.8666666666666667,"blue":0.6901960784313725,"alpha":1},{"name":"Green 300","red":0.6,"green":0.8196078431372549,"blue":0.5607843137254902,"alpha":1},{"name":"Green 400","red":0.4823529411764706,"green":0.7843137254901961,"blue":0.4235294117647059,"alpha":1},{"name":"Green 500","red":0.3803921568627451,"green":0.7411764705882353,"blue":0.30980392156862746,"alpha":1},{"name":"Green 600","red":0.35294117647058826,"green":0.6745098039215687,"blue":0.26666666666666666,"alpha":1},{"name":"Green 700","red":0.3176470588235294,"green":0.596078431372549,"blue":0.2235294117647059,"alpha":1},{"name":"Green 800","red":0.28627450980392155,"green":0.5215686274509804,"blue":0.1803921568627451,"alpha":1},{"name":"Green 900","red":0.24705882352941178,"green":0.43529411764705883,"blue":0.12941176470588237,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Orange 50","red":0.9921568627450981,"green":0.9607843137254902,"blue":0.9254901960784314,"alpha":1},{"name":"Orange 100","red":0.9882352941176471,"green":0.9098039215686274,"blue":0.8235294117647058,"alpha":1},{"name":"Orange 200","red":0.9803921568627451,"green":0.8470588235294118,"blue":0.6901960784313725,"alpha":1},{"name":"Orange 300","red":0.9921568627450981,"green":0.7803921568627451,"blue":0.5333333333333333,"alpha":1},{"name":"Orange 400","red":1,"green":0.7254901960784313,"blue":0.40784313725490196,"alpha":1},{"name":"Orange 500","red":1,"green":0.6705882352941176,"blue":0.2901960784313726,"alpha":1},{"name":"Orange 600","red":0.9137254901960784,"green":0.6196078431372549,"blue":0.25098039215686274,"alpha":1},{"name":"Orange 700","red":0.8235294117647058,"green":0.5647058823529412,"blue":0.20392156862745098,"alpha":1},{"name":"Orange 800","red":0.7333333333333333,"green":0.5058823529411764,"blue":0.1607843137254902,"alpha":1},{"name":"Orange 900","red":0.6274509803921569,"green":0.44313725490196076,"blue":0.10980392156862745,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Red 50","red":0.984313725490196,"green":0.9294117647058824,"blue":0.9215686274509803,"alpha":1},{"name":"Red 100","red":0.9607843137254902,"green":0.8274509803921568,"blue":0.807843137254902,"alpha":1},{"name":"Red 200","red":0.9372549019607843,"green":0.7019607843137254,"blue":0.6705882352941176,"alpha":1},{"name":"Red 300","red":0.9254901960784314,"green":0.5803921568627451,"blue":0.5333333333333333,"alpha":1},{"name":"Red 400","red":0.9372549019607843,"green":0.4588235294117647,"blue":0.39215686274509803,"alpha":1},{"name":"Red 500","red":0.9215686274509803,"green":0.35294117647058826,"blue":0.27450980392156865,"alpha":1},{"name":"Red 600","red":0.8117647058823529,"green":0.3176470588235294,"blue":0.23921568627450981,"alpha":1},{"name":"Red 700","red":0.6901960784313725,"green":0.27450980392156865,"blue":0.19607843137254902,"alpha":1},{"name":"Red 800","red":0.5764705882352941,"green":0.23137254901960785,"blue":0.15294117647058825,"alpha":1},{"name":"Red 900","red":0.43137254901960786,"green":0.1843137254901961,"blue":0.10196078431372549,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Yellow 50","red":0.9921568627450981,"green":0.9803921568627451,"blue":0.8980392156862745,"alpha":1},{"name":"Yellow 100","red":0.9803921568627451,"green":0.9529411764705882,"blue":0.7529411764705882,"alpha":1},{"name":"Yellow 200","red":0.9607843137254902,"green":0.9176470588235294,"blue":0.5725490196078431,"alpha":1},{"name":"Yellow 300","red":0.9529411764705882,"green":0.8862745098039215,"blue":0.3764705882352941,"alpha":1},{"name":"Yellow 400","red":0.9607843137254902,"green":0.8666666666666667,"blue":0.1607843137254902,"alpha":1},{"name":"Yellow 500","red":0.9490196078431372,"green":0.8392156862745098,"blue":0,"alpha":1},{"name":"Yellow 600","red":0.9019607843137255,"green":0.7764705882352941,"blue":0.050980392156862744,"alpha":1},{"name":"Yellow 700","red":0.8509803921568627,"green":0.7098039215686275,"blue":0.10980392156862745,"alpha":1},{"name":"Yellow 800","red":0.8,"green":0.6431372549019608,"blue":0.16862745098039217,"alpha":1},{"name":"Yellow 900","red":0.7411764705882353,"green":0.5647058823529412,"blue":0.23529411764705882,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Purple 50","red":0.9686274509803922,"green":0.9411764705882353,"blue":0.9803921568627451,"alpha":1},{"name":"Purple 100","red":0.9294117647058824,"green":0.8588235294117647,"blue":0.9568627450980393,"alpha":1},{"name":"Purple 200","red":0.8745098039215686,"green":0.7529411764705882,"blue":0.9215686274509803,"alpha":1},{"name":"Purple 300","red":0.8352941176470589,"green":0.6509803921568628,"blue":0.9019607843137255,"alpha":1},{"name":"Purple 400","red":0.803921568627451,"green":0.5529411764705883,"blue":0.8980392156862745,"alpha":1},{"name":"Purple 500","red":0.7647058823529411,"green":0.4666666666666667,"blue":0.8784313725490196,"alpha":1},{"name":"Purple 600","red":0.6588235294117647,"green":0.4235294117647059,"blue":0.7568627450980392,"alpha":1},{"name":"Purple 700","red":0.5372549019607843,"green":0.3764705882352941,"blue":0.6196078431372549,"alpha":1},{"name":"Purple 800","red":0.4235294117647059,"green":0.32941176470588235,"blue":0.4823529411764706,"alpha":1},{"name":"Purple 900","red":0.2823529411764706,"green":0.27058823529411763,"blue":0.3254901960784314,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Pink 50","red":0.996078431372549,"green":0.9490196078431372,"blue":0.9764705882352941,"alpha":1},{"name":"Pink 100","red":0.9882352941176471,"green":0.8705882352941177,"blue":0.9411764705882353,"alpha":1},{"name":"Pink 200","red":0.9803921568627451,"green":0.7764705882352941,"blue":0.8980392156862745,"alpha":1},{"name":"Pink 300","red":1,"green":0.6901960784313725,"blue":0.8823529411764706,"alpha":1},{"name":"Pink 400","red":1,"green":0.5843137254901961,"blue":0.8392156862745098,"alpha":1},{"name":"Pink 500","red":1,"green":0.5019607843137255,"blue":0.807843137254902,"alpha":1},{"name":"Pink 600","red":0.9058823529411765,"green":0.43137254901960786,"blue":0.6941176470588235,"alpha":1},{"name":"Pink 700","red":0.803921568627451,"green":0.35294117647058826,"blue":0.5686274509803921,"alpha":1},{"name":"Pink 800","red":0.7058823529411765,"green":0.2784313725490196,"blue":0.4470588235294118,"alpha":1},{"name":"Pink 900","red":0.5882352941176471,"green":0.18823529411764706,"blue":0.2980392156862745,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Sky 50","red":0.8941176470588236,"green":0.9686274509803922,"blue":0.9803921568627451,"alpha":1},{"name":"Sky 100","red":0.7411764705882353,"green":0.9254901960784314,"blue":0.9529411764705882,"alpha":1},{"name":"Sky 200","red":0.5607843137254902,"green":0.8745098039215686,"blue":0.9215686274509803,"alpha":1},{"name":"Sky 300","red":0.36470588235294116,"green":0.8274509803921568,"blue":0.8980392156862745,"alpha":1},{"name":"Sky 400","red":0.1607843137254902,"green":0.8,"blue":0.8980392156862745,"alpha":1},{"name":"Sky 500","red":0,"green":0.7607843137254902,"blue":0.8784313725490196,"alpha":1},{"name":"Sky 600","red":0,"green":0.6823529411764706,"blue":0.8,"alpha":1},{"name":"Sky 700","red":0,"green":0.596078431372549,"blue":0.7176470588235294,"alpha":1},{"name":"Sky 800","red":0,"green":0.5098039215686274,"blue":0.6274509803921569,"alpha":1},{"name":"Sky 900","red":0,"green":0.4117647058823529,"blue":0.5333333333333333,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Lime 50","red":0.9254901960784314,"green":0.984313725490196,"blue":0.9529411764705882,"alpha":1},{"name":"Lime 100","red":0.8274509803921568,"green":0.9647058823529412,"blue":0.8941176470588236,"alpha":1},{"name":"Lime 200","red":0.7019607843137254,"green":0.9450980392156862,"blue":0.8156862745098039,"alpha":1},{"name":"Lime 300","red":0.5647058823529412,"green":0.9254901960784314,"blue":0.7568627450980392,"alpha":1},{"name":"Lime 400","red":0.42745098039215684,"green":0.9254901960784314,"blue":0.6627450980392157,"alpha":1},{"name":"Lime 500","red":0.3176470588235294,"green":0.9098039215686274,"blue":0.596078431372549,"alpha":1},{"name":"Lime 600","red":0.30980392156862746,"green":0.8392156862745098,"blue":0.5137254901960784,"alpha":1},{"name":"Lime 700","red":0.30196078431372547,"green":0.7607843137254902,"blue":0.4196078431372549,"alpha":1},{"name":"Lime 800","red":0.2980392156862745,"green":0.6862745098039216,"blue":0.32941176470588235,"alpha":1},{"name":"Lime 900","red":0.2901960784313726,"green":0.596078431372549,"blue":0.2235294117647059,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Business Blue 50","red":0.9294117647058824,"green":0.9372549019607843,"blue":0.9568627450980393,"alpha":1},{"name":"Business Blue 100","red":0.8235294117647058,"green":0.8431372549019608,"blue":0.8980392156862745,"alpha":1},{"name":"Business Blue 200","red":0.6980392156862745,"green":0.7254901960784313,"blue":0.8156862745098039,"alpha":1},{"name":"Business Blue 300","red":0.5137254901960784,"green":0.5607843137254902,"blue":0.7098039215686275,"alpha":1},{"name":"Business Blue 400","red":0.3803921568627451,"green":0.4392156862745098,"blue":0.6313725490196078,"alpha":1},{"name":"Business Blue 500","red":0.25882352941176473,"green":0.32941176470588235,"blue":0.5568627450980392,"alpha":1},{"name":"Business Blue 600","red":0.24313725490196078,"green":0.30196078431372547,"blue":0.5019607843137255,"alpha":1},{"name":"Business Blue 700","red":0.22745098039215686,"green":0.2784313725490196,"blue":0.43529411764705883,"alpha":1},{"name":"Business Blue 800","red":0.21176470588235294,"green":0.25098039215686274,"blue":0.37254901960784315,"alpha":1},{"name":"Business Blue 900","red":0.18823529411764706,"green":0.21176470588235294,"blue":0.2980392156862745,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":"Light Gray 50","red":0.9725490196078431,"green":0.9764705882352941,"blue":0.9764705882352941,"alpha":1},{"name":"Light Gray 100","red":0.9294117647058824,"green":0.9372549019607843,"blue":0.9411764705882353,"alpha":1},{"name":"Light Gray 200","red":0.8862745098039215,"green":0.8941176470588236,"blue":0.9019607843137255,"alpha":1},{"name":"Light Gray 300","red":0.8392156862745098,"green":0.8549019607843137,"blue":0.8627450980392157,"alpha":1},{"name":"Light Gray 400","red":0.803921568627451,"green":0.8235294117647058,"blue":0.8313725490196079,"alpha":1},{"name":"Light Gray 500","red":0.7686274509803922,"green":0.788235294117647,"blue":0.8,"alpha":1},{"name":"Light Gray 600","red":0.7137254901960784,"green":0.7333333333333333,"blue":0.7490196078431373,"alpha":1},{"name":"Light Gray 700","red":0.6470588235294118,"green":0.6745098039215687,"blue":0.6901960784313725,"alpha":1},{"name":"Light Gray 800","red":0.5843137254901961,"green":0.615686274509804,"blue":0.6313725490196078,"alpha":1},{"name":"Light Gray 900","red":0.5137254901960784,"green":0.5490196078431373,"blue":0.5686274509803921,"alpha":1},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"},{"name":null,"red":"1","green":"1","blue":"1","alpha":"1"}]} -------------------------------------------------------------------------------- /index.coffee: -------------------------------------------------------------------------------- 1 | converters = require './src/converters' 2 | 3 | for key, task of converters 4 | task() 5 | console.log "Converting #{key}…" 6 | 7 | console.log "\nDone! Everything is in /build!" 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "trellicolors", 3 | "version": "1.0.0", 4 | "description": "Convert Trello brand colors into various formats.", 5 | "main": "index.coffee", 6 | "scripts": { 7 | "convert": "tools/convert" 8 | }, 9 | "author": "Trello Inc.", 10 | "license": "MIT", 11 | "dependencies": { 12 | "coffee-script": "^1.9.1", 13 | "hex-rgb": "^3.0.0", 14 | "nodemon": "^1.3.7", 15 | "require-dir": "~0.3.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/converters/android.coffee: -------------------------------------------------------------------------------- 1 | palette = require '../data/palette.coffee' 2 | slugify = require '../utils/slugify.coffee' 3 | write = require '../utils/write.coffee' 4 | hexRgb = require 'hex-rgb' 5 | 6 | module.exports = -> 7 | data = """ 8 | \n""" 9 | 10 | for group, colors of palette 11 | data += "\n" 12 | for item in colors 13 | if item.alpha 14 | # Android uses #AARRGGBB, so get hex value of alpha and prepend to hex 15 | i = Math.round(item.alpha * 100) / 100; 16 | alpha = Math.round(i * 255); 17 | alphaHex = (alpha + 0x10000).toString(16).substr(-2).toUpperCase(); 18 | value = "#" + alphaHex + item.hex.substr(1) 19 | data += " #{value}\n" 20 | else 21 | data += " #{item.hex}\n" 22 | 23 | data += "\n" 24 | 25 | write('brand_colors.xml', data) 26 | -------------------------------------------------------------------------------- /src/converters/index.coffee: -------------------------------------------------------------------------------- 1 | requireDir = require 'require-dir' 2 | dir = requireDir('./') 3 | 4 | module.exports = dir 5 | -------------------------------------------------------------------------------- /src/converters/json.coffee: -------------------------------------------------------------------------------- 1 | palette = require '../data/palette.coffee' 2 | slugify = require '../utils/slugify.coffee' 3 | write = require '../utils/write.coffee' 4 | 5 | module.exports = -> 6 | data = {} 7 | 8 | for group, colors of palette 9 | for item in colors 10 | # don't show alpha neutrals for now 11 | if !item.alpha 12 | key = "#{item.varname}" 13 | data[key] = item.hex 14 | 15 | json = JSON.stringify(data, null, 2) 16 | 17 | write('brand-colors.json', json) 18 | 19 | json = JSON.stringify(data) 20 | 21 | write('brand-colors.min.json', json) 22 | -------------------------------------------------------------------------------- /src/converters/less.coffee: -------------------------------------------------------------------------------- 1 | palette = require '../data/palette.coffee' 2 | slugify = require '../utils/slugify.coffee' 3 | write = require '../utils/write.coffee' 4 | 5 | module.exports = -> 6 | data = "// Trello Brand Colors\n" 7 | 8 | for group, colors of palette 9 | data += "\n" 10 | 11 | for item in colors 12 | if item.alpha 13 | alpha = item.alpha * 100 14 | value = "fade(#{item.hex}, #{alpha}%)" 15 | data += "@#{item.varname}: #{value};\n" 16 | else 17 | data += "@#{item.varname}: #{item.hex};\n" 18 | 19 | write('brand-colors.less', data) 20 | -------------------------------------------------------------------------------- /src/converters/scss.coffee: -------------------------------------------------------------------------------- 1 | palette = require '../data/palette.coffee' 2 | slugify = require '../utils/slugify.coffee' 3 | write = require '../utils/write.coffee' 4 | 5 | module.exports = -> 6 | data = "// Trello Brand Colors\n" 7 | 8 | for group, colors of palette 9 | data += "\n" 10 | 11 | for item in colors 12 | if item.alpha 13 | value = "rgba(#{item.hex}, #{item.alpha})" 14 | data += "$#{item.varname}: #{value};\n" 15 | else 16 | data += "$#{item.varname}: #{item.hex};\n" 17 | 18 | write('brand-colors.scss', data) 19 | write('brand-colors.sass', data) 20 | -------------------------------------------------------------------------------- /src/converters/sketchpalette.coffee: -------------------------------------------------------------------------------- 1 | palette = require '../data/palette.coffee' 2 | write = require '../utils/write.coffee' 3 | hexRgb = require 'hex-rgb' 4 | 5 | module.exports = -> 6 | data = {"compatibleVersion":"2.0", "pluginVersion":"2.21", "colors": []} 7 | 8 | for group, colors of palette 9 | 10 | # Add hexes 11 | 12 | for val in colors 13 | 14 | # Sketch Palette uses percent value for red, green, blue. 15 | rgb = hexRgb(val.hex) 16 | 17 | # sketch palette expects a percent value, but hex-rgb exports as 0-255 18 | red = rgb.red / 255 19 | green = rgb.green / 255 20 | blue = rgb.blue / 255 21 | 22 | alpha = val.alpha 23 | 24 | # alpha is a percent value (between 0 and 1). 25 | # 1 is solid and a safe default. 26 | if !alpha 27 | alpha = 1 28 | 29 | name = val.displayname 30 | 31 | item = { name, red, green, blue, alpha } 32 | 33 | data.colors.push item 34 | 35 | # Add padding 36 | # There are 8 columns per row in the Sketch picker. 37 | # This helps organize the colors a bit. 38 | 39 | numColors = Object.keys(colors).length 40 | cols = 8 41 | continue if Number.isInteger(numColors / cols) 42 | 43 | rows = Math.floor(numColors / cols) 44 | 45 | remainder = cols - (numColors - (rows * cols)) 46 | for x in [1..remainder] 47 | blank = { 'name': null, 'red': '1', 'green': '1', 'blue': '1', 'alpha': '1' } 48 | data.colors.push blank 49 | 50 | 51 | json = JSON.stringify(data) 52 | 53 | write('trello.sketchpalette', json) 54 | -------------------------------------------------------------------------------- /src/data/ADG-palette.coffee: -------------------------------------------------------------------------------- 1 | module.exports = 2 | 3 | "Blue": 4 | "B500": "#0747A6" 5 | "B400": "#0052CC" 6 | "B300": "#0065FF" 7 | "B200": "#2684FF" 8 | "B100": "#4C9AFF" 9 | "B75": "#B2D4FF" 10 | "B50": "#DEEBFF" 11 | 12 | "Red": 13 | "R500": "#BF2600" 14 | "R400": "#DE350B" 15 | "R300": "#FF5630" 16 | "R200": "#FF7452" 17 | "R100": "#FF8F73" 18 | "R75": "#FFBDAD" 19 | "R50": "#FFEBE5" 20 | 21 | "Yellow": 22 | "Y500": "#FF8B00" 23 | "Y400": "#FF991F" 24 | "Y300": "#FFAB00" 25 | "Y200": "#FFC400" 26 | "Y100": "#FFE380" 27 | "Y75": "#FFF0B2" 28 | "Y50": "#FFFAE5" 29 | 30 | "Green": 31 | "G500": "#006644" 32 | "G400": "#00875A" 33 | "G300": "#36B37E" 34 | "G200": "#57D9A3" 35 | "G100": "#79F2C0" 36 | "G75": "#ABF5D1" 37 | "G50": "#E3FCEF" 38 | 39 | "Teal": 40 | "T500": "#008DA6" 41 | "T400": "#00A3BF" 42 | "T300": "#00B8D9" 43 | "T200": "#00C7E5" 44 | "T100": "#79E2F2" 45 | "T75": "#B3F5FF" 46 | "T50": "#E6FCFF" 47 | 48 | "Purple": 49 | "P500": "#403294" 50 | "P400": "#5243AA" 51 | "P300": "#6554C0" 52 | "P200": "#8777D9" 53 | "P100": "#998DD9" 54 | "P75": "#C0B6F2" 55 | "P50": "#EAE6FF" 56 | -------------------------------------------------------------------------------- /src/data/palette-o.coffee: -------------------------------------------------------------------------------- 1 | module.exports = 2 | "Trello Blue": 3 | 50: "#E4F0F6" 4 | 100: "#BCD9EA" 5 | 200: "#8BBDD9" 6 | 300: "#5BA4CF" 7 | 400: "#298FCA" 8 | 500: "#0079BF" 9 | 600: "#026AA7" 10 | 700: "#055A8C" 11 | 800: "#094C72" 12 | 900: "#0C3953" 13 | 14 | "Green": 15 | 50: "#EEF6EC" 16 | 100: "#D6ECD2" 17 | 200: "#B7DDB0" 18 | 300: "#99D18F" 19 | 400: "#7BC86C" 20 | 500: "#61BD4F" 21 | 600: "#5AAC44" 22 | 700: "#519839" 23 | 800: "#49852E" 24 | 900: "#3F6F21" 25 | 26 | "Orange": 27 | 50: "#FDF5EC" 28 | 100: "#FCE8D2" 29 | 200: "#FAD8B0" 30 | 300: "#FDC788" 31 | 400: "#FFB968" 32 | 500: "#FFAB4A" 33 | 600: "#E99E40" 34 | 700: "#D29034" 35 | 800: "#BB8129" 36 | 900: "#A0711C" 37 | 38 | "Red": 39 | 50: "#FBEDEB" 40 | 100: "#F5D3CE" 41 | 200: "#EFB3AB" 42 | 300: "#EC9488" 43 | 400: "#EF7564" 44 | 500: "#EB5A46" 45 | 600: "#CF513D" 46 | 700: "#B04632" 47 | 800: "#933B27" 48 | 900: "#6E2F1A" 49 | 50 | "Yellow": 51 | 50: "#FDFAE5" 52 | 100: "#FAF3C0" 53 | 200: "#F5EA92" 54 | 300: "#F3E260" 55 | 400: "#F5DD29" 56 | 500: "#F2D600" 57 | 600: "#E6C60D" 58 | 700: "#D9B51C" 59 | 800: "#CCA42B" 60 | 900: "#BD903C" 61 | 62 | "Purple": 63 | 50: "#F7F0FA" 64 | 100: "#EDDBF4" 65 | 200: "#DFC0EB" 66 | 300: "#D5A6E6" 67 | 400: "#CD8DE5" 68 | 500: "#C377E0" 69 | 600: "#A86CC1" 70 | 700: "#89609E" 71 | 800: "#6C547B" 72 | 900: "#484553" 73 | 74 | "Pink": 75 | 50: "#FEF2F9" 76 | 100: "#FCDEF0" 77 | 200: "#FAC6E5" 78 | 300: "#FFB0E1" 79 | 400: "#FF95D6" 80 | 500: "#FF80CE" 81 | 600: "#E76EB1" 82 | 700: "#CD5A91" 83 | 800: "#B44772" 84 | 900: "#96304C" 85 | 86 | "Sky": 87 | 50: "#E4F7FA" 88 | 100: "#BDECF3" 89 | 200: "#8FDFEB" 90 | 300: "#5DD3E5" 91 | 400: "#29CCE5" 92 | 500: "#00C2E0" 93 | 600: "#00AECC" 94 | 700: "#0098B7" 95 | 800: "#0082A0" 96 | 900: "#006988" 97 | 98 | "Lime": 99 | 50: "#ECFBF3" 100 | 100: "#D3F6E4" 101 | 200: "#B3F1D0" 102 | 300: "#90ECC1" 103 | 400: "#6DECA9" 104 | 500: "#51E898" 105 | 600: "#4FD683" 106 | 700: "#4DC26B" 107 | 800: "#4CAF54" 108 | 900: "#4A9839" 109 | 110 | "Light Gray": 111 | 50: "#F8F9F9" 112 | 100: "#EDEFF0" 113 | 200: "#E2E4E6" 114 | 300: "#D6DADC" 115 | 400: "#CDD2D4" 116 | 500: "#C4C9CC" 117 | 600: "#B6BBBF" 118 | 700: "#A5ACB0" 119 | 800: "#959DA1" 120 | 900: "#838C91" 121 | 122 | "Business Blue": 123 | 50: "#EDEFF4" 124 | 100: "#D2D7E5" 125 | 200: "#B2B9D0" 126 | 300: "#838FB5" 127 | 400: "#6170A1" 128 | 500: "#42548E" 129 | 600: "#3E4D80" 130 | 700: "#3A476F" 131 | 800: "#36405F" 132 | 900: "#30364C" 133 | -------------------------------------------------------------------------------- /src/data/palette.coffee: -------------------------------------------------------------------------------- 1 | module.exports = 2 | 3 | "Neutrals": [ 4 | { 5 | "varname": "N0" 6 | "displayname": "N0" 7 | "hex": "#FFFFFF" 8 | } 9 | { 10 | "varname": "N10" 11 | "displayname": "N10" 12 | "hex": "#FAFBFC" 13 | } 14 | { 15 | "varname": "N20" 16 | "displayname": "N20" 17 | "hex": "#F4F5F7" 18 | }, 19 | { 20 | "varname": "N30" 21 | "displayname": "N30" 22 | "hex": "#EBECF0" 23 | }, 24 | { 25 | "varname": "N40" 26 | "displayname": "N40" 27 | "hex": "#DFE1E6" 28 | } 29 | { 30 | "varname": "N50" 31 | "displayname": "N50" 32 | "hex": "#C1C7D0" 33 | } 34 | { 35 | "varname": "N60" 36 | "displayname": "N60" 37 | "hex": "#B3BAC5" 38 | } 39 | { 40 | "varname": "N70" 41 | "displayname": "N70" 42 | "hex": "#A5ADBA" 43 | } 44 | { 45 | "varname": "N80" 46 | "displayname": "N80" 47 | "hex": "#97A0AF" 48 | } 49 | { 50 | "varname": "N90" 51 | "displayname": "N90" 52 | "hex": "#8993A4" 53 | } 54 | { 55 | "varname": "N100" 56 | "displayname": "N100" 57 | "hex": "#7A869A" 58 | } 59 | { 60 | "varname": "N200" 61 | "displayname": "N200" 62 | "hex": "#6B778C" 63 | } 64 | { 65 | "varname": "N300" 66 | "displayname": "N300" 67 | "hex": "#5E6C84" 68 | } 69 | { 70 | "varname": "N400" 71 | "displayname": "N400" 72 | "hex": "#505F79" 73 | } 74 | { 75 | "varname": "N500" 76 | "displayname": "N500" 77 | "hex": "#42526E" 78 | } 79 | { 80 | "varname": "N600" 81 | "displayname": "N600" 82 | "hex": "#344563" 83 | } 84 | { 85 | "varname": "N700" 86 | "displayname": "N700" 87 | "hex": "#253858" 88 | } 89 | { 90 | "varname": "N800" 91 | "displayname": "N800" 92 | "hex": "#172B4D" 93 | } 94 | { 95 | "varname": "N900" 96 | "displayname": "N900" 97 | "hex": "#091E42" 98 | } 99 | ] 100 | 101 | "Alpha Neutrals": [ 102 | { 103 | "varname": "N10A" 104 | "displayname": "N10A" 105 | "hex": "#091E42" 106 | "alpha": 0.02 107 | } 108 | { 109 | "varname": "N20A" 110 | "displayname": "N20A" 111 | "hex": "#091E42" 112 | "alpha": 0.04 113 | } 114 | { 115 | "varname": "N30A" 116 | "displayname": "N30A" 117 | "hex": "#091E42" 118 | "alpha": 0.08 119 | } 120 | { 121 | "varname": "N40A" 122 | "displayname": "N40A" 123 | "hex": "#091E42" 124 | "alpha": 0.13 125 | } 126 | { 127 | "varname": "N50A" 128 | "displayname": "N50A" 129 | "hex": "#091E42" 130 | "alpha": 0.25 131 | } 132 | { 133 | "varname": "N60A" 134 | "displayname": "N60A" 135 | "hex": "#091E42" 136 | "alpha": 0.31 137 | } 138 | { 139 | "varname": "N70A" 140 | "displayname": "N70A" 141 | "hex": "#091E42" 142 | "alpha": 0.36 143 | } 144 | { 145 | "varname": "N80A" 146 | "displayname": "N80A" 147 | "hex": "#091E42" 148 | "alpha": 0.42 149 | } 150 | { 151 | "varname": "N90A" 152 | "displayname": "N90A" 153 | "hex": "#091E42" 154 | "alpha": 0.48 155 | } 156 | { 157 | "varname": "N100A" 158 | "displayname": "N100A" 159 | "hex": "#091E42" 160 | "alpha": 0.54 161 | } 162 | { 163 | "varname": "N200A" 164 | "displayname": "N200A" 165 | "hex": "#091E42" 166 | "alpha": 0.6 167 | } 168 | { 169 | "varname": "N300A" 170 | "displayname": "N300A" 171 | "hex": "#091E42" 172 | "alpha": 0.66 173 | } 174 | { 175 | "varname": "N400A" 176 | "displayname": "N400A" 177 | "hex": "#091E42" 178 | "alpha": 0.71 179 | } 180 | { 181 | "varname": "N500A" 182 | "displayname": "N500A" 183 | "hex": "#091E42" 184 | "alpha": 0.77 185 | } 186 | { 187 | "varname": "N600A" 188 | "displayname": "N600A" 189 | "hex": "#091E42" 190 | "alpha": 0.82 191 | } 192 | { 193 | "varname": "N700A" 194 | "displayname": "N700A" 195 | "hex": "#091E42" 196 | "alpha": 0.89 197 | } 198 | { 199 | "varname": "N800A" 200 | "displayname": "N800A" 201 | "hex": "#091E42" 202 | "alpha": 0.95 203 | } 204 | ] 205 | 206 | "Trello Blue": [ 207 | { 208 | "varname": "trello-blue-50" 209 | "displayname": "Trello Blue 50" 210 | "hex": "#E4F0F6" 211 | } 212 | { 213 | "varname": "trello-blue-100" 214 | "displayname": "Trello Blue 100" 215 | "hex": "#BCD9EA" 216 | } 217 | { 218 | "varname": "trello-blue-200" 219 | "displayname": "Trello Blue 200" 220 | "hex": "#8BBDD9" 221 | } 222 | { 223 | "varname": "trello-blue-300" 224 | "displayname": "Trello Blue 300" 225 | "hex": "#5BA4CF" 226 | } 227 | { 228 | "varname": "trello-blue-400" 229 | "displayname": "Trello Blue 400" 230 | "hex": "#298FCA" 231 | } 232 | { 233 | "varname": "trello-blue-500" 234 | "displayname": "Trello Blue 500" 235 | "hex": "#0079BF" 236 | } 237 | { 238 | "varname": "trello-blue-600" 239 | "displayname": "Trello Blue 600" 240 | "hex": "#026AA7" 241 | } 242 | { 243 | "varname": "trello-blue-700" 244 | "displayname": "Trello Blue 700" 245 | "hex": "#055A8C" 246 | } 247 | { 248 | "varname": "trello-blue-800" 249 | "displayname": "Trello Blue 800" 250 | "hex": "#094C72" 251 | } 252 | { 253 | "varname": "trello-blue-900" 254 | "displayname": "Trello Blue 900" 255 | "hex": "#0C3953" 256 | } 257 | ] 258 | 259 | 260 | "Green": [ 261 | { 262 | "varname": "green-50" 263 | "displayname": "Green 50" 264 | "hex": "#EEF6EC" 265 | } 266 | { 267 | "varname": "green-100" 268 | "displayname": "Green 100" 269 | "hex": "#D6ECD2" 270 | } 271 | { 272 | "varname": "green-200" 273 | "displayname": "Green 200" 274 | "hex": "#B7DDB0" 275 | } 276 | { 277 | "varname": "green-300" 278 | "displayname": "Green 300" 279 | "hex": "#99D18F" 280 | } 281 | { 282 | "varname": "green-400" 283 | "displayname": "Green 400" 284 | "hex": "#7BC86C" 285 | } 286 | { 287 | "varname": "green-500" 288 | "displayname": "Green 500" 289 | "hex": "#61BD4F" 290 | } 291 | { 292 | "varname": "green-600" 293 | "displayname": "Green 600" 294 | "hex": "#5AAC44" 295 | } 296 | { 297 | "varname": "green-700" 298 | "displayname": "Green 700" 299 | "hex": "#519839" 300 | } 301 | { 302 | "varname": "green-800" 303 | "displayname": "Green 800" 304 | "hex": "#49852E" 305 | } 306 | { 307 | "varname": "green-900" 308 | "displayname": "Green 900" 309 | "hex": "#3F6F21" 310 | } 311 | ] 312 | 313 | "Orange": [ 314 | { 315 | "varname": "orange-50" 316 | "displayname": "Orange 50" 317 | "hex": "#FDF5EC" 318 | } 319 | { 320 | "varname": "orange-100" 321 | "displayname": "Orange 100" 322 | "hex": "#FCE8D2" 323 | } 324 | { 325 | "varname": "orange-200" 326 | "displayname": "Orange 200" 327 | "hex": "#FAD8B0" 328 | } 329 | { 330 | "varname": "orange-300" 331 | "displayname": "Orange 300" 332 | "hex": "#FDC788" 333 | } 334 | { 335 | "varname": "orange-400" 336 | "displayname": "Orange 400" 337 | "hex": "#FFB968" 338 | } 339 | { 340 | "varname": "orange-500" 341 | "displayname": "Orange 500" 342 | "hex": "#FFAB4A" 343 | } 344 | { 345 | "varname": "orange-600" 346 | "displayname": "Orange 600" 347 | "hex": "#E99E40" 348 | } 349 | { 350 | "varname": "orange-700" 351 | "displayname": "Orange 700" 352 | "hex": "#D29034" 353 | } 354 | { 355 | "varname": "orange-800" 356 | "displayname": "Orange 800" 357 | "hex": "#BB8129" 358 | } 359 | { 360 | "varname": "orange-900" 361 | "displayname": "Orange 900" 362 | "hex": "#A0711C" 363 | } 364 | ] 365 | 366 | 367 | "Red": [ 368 | { 369 | "varname": "red-50" 370 | "displayname": "Red 50" 371 | "hex": "#FBEDEB" 372 | } 373 | { 374 | "varname": "red-100" 375 | "displayname": "Red 100" 376 | "hex": "#F5D3CE" 377 | } 378 | { 379 | "varname": "red-200" 380 | "displayname": "Red 200" 381 | "hex": "#EFB3AB" 382 | } 383 | { 384 | "varname": "red-300" 385 | "displayname": "Red 300" 386 | "hex": "#EC9488" 387 | } 388 | { 389 | "varname": "red-400" 390 | "displayname": "Red 400" 391 | "hex": "#EF7564" 392 | } 393 | { 394 | "varname": "red-500" 395 | "displayname": "Red 500" 396 | "hex": "#EB5A46" 397 | } 398 | { 399 | "varname": "red-600" 400 | "displayname": "Red 600" 401 | "hex": "#CF513D" 402 | } 403 | { 404 | "varname": "red-700" 405 | "displayname": "Red 700" 406 | "hex": "#B04632" 407 | } 408 | { 409 | "varname": "red-800" 410 | "displayname": "Red 800" 411 | "hex": "#933B27" 412 | } 413 | { 414 | "varname": "red-900" 415 | "displayname": "Red 900" 416 | "hex": "#6E2F1A" 417 | } 418 | ] 419 | 420 | "Yellow": [ 421 | { 422 | "varname": "yellow-50" 423 | "displayname": "Yellow 50" 424 | "hex": "#FDFAE5" 425 | } 426 | { 427 | "varname": "yellow-100" 428 | "displayname": "Yellow 100" 429 | "hex": "#FAF3C0" 430 | } 431 | { 432 | "varname": "yellow-200" 433 | "displayname": "Yellow 200" 434 | "hex": "#F5EA92" 435 | } 436 | { 437 | "varname": "yellow-300" 438 | "displayname": "Yellow 300" 439 | "hex": "#F3E260" 440 | } 441 | { 442 | "varname": "yellow-400" 443 | "displayname": "Yellow 400" 444 | "hex": "#F5DD29" 445 | } 446 | { 447 | "varname": "yellow-500" 448 | "displayname": "Yellow 500" 449 | "hex": "#F2D600" 450 | } 451 | { 452 | "varname": "yellow-600" 453 | "displayname": "Yellow 600" 454 | "hex": "#E6C60D" 455 | } 456 | { 457 | "varname": "yellow-700" 458 | "displayname": "Yellow 700" 459 | "hex": "#D9B51C" 460 | } 461 | { 462 | "varname": "yellow-800" 463 | "displayname": "Yellow 800" 464 | "hex": "#CCA42B" 465 | } 466 | { 467 | "varname": "yellow-900" 468 | "displayname": "Yellow 900" 469 | "hex": "#BD903C" 470 | } 471 | ] 472 | 473 | "Purple": [ 474 | { 475 | "varname": "purple-50" 476 | "displayname": "Purple 50" 477 | "hex": "#F7F0FA" 478 | } 479 | { 480 | "varname": "purple-100" 481 | "displayname": "Purple 100" 482 | "hex": "#EDDBF4" 483 | } 484 | { 485 | "varname": "purple-200" 486 | "displayname": "Purple 200" 487 | "hex": "#DFC0EB" 488 | } 489 | { 490 | "varname": "purple-300" 491 | "displayname": "Purple 300" 492 | "hex": "#D5A6E6" 493 | } 494 | { 495 | "varname": "purple-400" 496 | "displayname": "Purple 400" 497 | "hex": "#CD8DE5" 498 | } 499 | { 500 | "varname": "purple-500" 501 | "displayname": "Purple 500" 502 | "hex": "#C377E0" 503 | } 504 | { 505 | "varname": "purple-600" 506 | "displayname": "Purple 600" 507 | "hex": "#A86CC1" 508 | } 509 | { 510 | "varname": "purple-700" 511 | "displayname": "Purple 700" 512 | "hex": "#89609E" 513 | } 514 | { 515 | "varname": "purple-800" 516 | "displayname": "Purple 800" 517 | "hex": "#6C547B" 518 | } 519 | { 520 | "varname": "purple-900" 521 | "displayname": "Purple 900" 522 | "hex": "#484553" 523 | } 524 | ] 525 | 526 | "Pink": [ 527 | { 528 | "varname": "pink-50" 529 | "displayname": "Pink 50" 530 | "hex": "#FEF2F9" 531 | } 532 | { 533 | "varname": "pink-100" 534 | "displayname": "Pink 100" 535 | "hex": "#FCDEF0" 536 | } 537 | { 538 | "varname": "pink-200" 539 | "displayname": "Pink 200" 540 | "hex": "#FAC6E5" 541 | } 542 | { 543 | "varname": "pink-300" 544 | "displayname": "Pink 300" 545 | "hex": "#FFB0E1" 546 | } 547 | { 548 | "varname": "pink-400" 549 | "displayname": "Pink 400" 550 | "hex": "#FF95D6" 551 | } 552 | { 553 | "varname": "pink-500" 554 | "displayname": "Pink 500" 555 | "hex": "#FF80CE" 556 | } 557 | { 558 | "varname": "pink-600" 559 | "displayname": "Pink 600" 560 | "hex": "#E76EB1" 561 | } 562 | { 563 | "varname": "pink-700" 564 | "displayname": "Pink 700" 565 | "hex": "#CD5A91" 566 | } 567 | { 568 | "varname": "pink-800" 569 | "displayname": "Pink 800" 570 | "hex": "#B44772" 571 | } 572 | { 573 | "varname": "pink-900" 574 | "displayname": "Pink 900" 575 | "hex": "#96304C" 576 | } 577 | ] 578 | 579 | "Sky": [ 580 | { 581 | "varname": "sky-50" 582 | "displayname": "Sky 50" 583 | "hex": "#E4F7FA" 584 | } 585 | { 586 | "varname": "sky-100" 587 | "displayname": "Sky 100" 588 | "hex": "#BDECF3" 589 | } 590 | { 591 | "varname": "sky-200" 592 | "displayname": "Sky 200" 593 | "hex": "#8FDFEB" 594 | } 595 | { 596 | "varname": "sky-300" 597 | "displayname": "Sky 300" 598 | "hex": "#5DD3E5" 599 | } 600 | { 601 | "varname": "sky-400" 602 | "displayname": "Sky 400" 603 | "hex": "#29CCE5" 604 | } 605 | { 606 | "varname": "sky-500" 607 | "displayname": "Sky 500" 608 | "hex": "#00C2E0" 609 | } 610 | { 611 | "varname": "sky-600" 612 | "displayname": "Sky 600" 613 | "hex": "#00AECC" 614 | } 615 | { 616 | "varname": "sky-700" 617 | "displayname": "Sky 700" 618 | "hex": "#0098B7" 619 | } 620 | { 621 | "varname": "sky-800" 622 | "displayname": "Sky 800" 623 | "hex": "#0082A0" 624 | } 625 | { 626 | "varname": "sky-900" 627 | "displayname": "Sky 900" 628 | "hex": "#006988" 629 | } 630 | ] 631 | 632 | "Lime": [ 633 | { 634 | "varname": "lime-50" 635 | "displayname": "Lime 50" 636 | "hex": "#ECFBF3" 637 | } 638 | { 639 | "varname": "lime-100" 640 | "displayname": "Lime 100" 641 | "hex": "#D3F6E4" 642 | } 643 | { 644 | "varname": "lime-200" 645 | "displayname": "Lime 200" 646 | "hex": "#B3F1D0" 647 | } 648 | { 649 | "varname": "lime-300" 650 | "displayname": "Lime 300" 651 | "hex": "#90ECC1" 652 | } 653 | { 654 | "varname": "lime-400" 655 | "displayname": "Lime 400" 656 | "hex": "#6DECA9" 657 | } 658 | { 659 | "varname": "lime-500" 660 | "displayname": "Lime 500" 661 | "hex": "#51E898" 662 | } 663 | { 664 | "varname": "lime-600" 665 | "displayname": "Lime 600" 666 | "hex": "#4FD683" 667 | } 668 | { 669 | "varname": "lime-700" 670 | "displayname": "Lime 700" 671 | "hex": "#4DC26B" 672 | } 673 | { 674 | "varname": "lime-800" 675 | "displayname": "Lime 800" 676 | "hex": "#4CAF54" 677 | } 678 | { 679 | "varname": "lime-900" 680 | "displayname": "Lime 900" 681 | "hex": "#4A9839" 682 | } 683 | ] 684 | 685 | "Business Blue": [ 686 | { 687 | "varname": "business-blue-50" 688 | "displayname": "Business Blue 50" 689 | "hex": "#EDEFF4" 690 | } 691 | { 692 | "varname": "business-blue-100" 693 | "displayname": "Business Blue 100" 694 | "hex": "#D2D7E5" 695 | } 696 | { 697 | "varname": "business-blue-200" 698 | "displayname": "Business Blue 200" 699 | "hex": "#B2B9D0" 700 | } 701 | { 702 | "varname": "business-blue-300" 703 | "displayname": "Business Blue 300" 704 | "hex": "#838FB5" 705 | } 706 | { 707 | "varname": "business-blue-400" 708 | "displayname": "Business Blue 400" 709 | "hex": "#6170A1" 710 | } 711 | { 712 | "varname": "business-blue-500" 713 | "displayname": "Business Blue 500" 714 | "hex": "#42548E" 715 | } 716 | { 717 | "varname": "business-blue-600" 718 | "displayname": "Business Blue 600" 719 | "hex": "#3E4D80" 720 | } 721 | { 722 | "varname": "business-blue-700" 723 | "displayname": "Business Blue 700" 724 | "hex": "#3A476F" 725 | } 726 | { 727 | "varname": "business-blue-800" 728 | "displayname": "Business Blue 800" 729 | "hex": "#36405F" 730 | } 731 | { 732 | "varname": "business-blue-900" 733 | "displayname": "Business Blue 900" 734 | "hex": "#30364C" 735 | } 736 | ] 737 | 738 | "Light Gray": [ 739 | { 740 | "varname": "light-gray-50" 741 | "displayname": "Light Gray 50" 742 | "hex": "#F8F9F9" 743 | } 744 | { 745 | "varname": "light-gray-100" 746 | "displayname": "Light Gray 100" 747 | "hex": "#EDEFF0" 748 | } 749 | { 750 | "varname": "light-gray-200" 751 | "displayname": "Light Gray 200" 752 | "hex": "#E2E4E6" 753 | } 754 | { 755 | "varname": "light-gray-300" 756 | "displayname": "Light Gray 300" 757 | "hex": "#D6DADC" 758 | } 759 | { 760 | "varname": "light-gray-400" 761 | "displayname": "Light Gray 400" 762 | "hex": "#CDD2D4" 763 | } 764 | { 765 | "varname": "light-gray-500" 766 | "displayname": "Light Gray 500" 767 | "hex": "#C4C9CC" 768 | } 769 | { 770 | "varname": "light-gray-600" 771 | "displayname": "Light Gray 600" 772 | "hex": "#B6BBBF" 773 | } 774 | { 775 | "varname": "light-gray-700" 776 | "displayname": "Light Gray 700" 777 | "hex": "#A5ACB0" 778 | } 779 | { 780 | "varname": "light-gray-800" 781 | "displayname": "Light Gray 800" 782 | "hex": "#959DA1" 783 | } 784 | { 785 | "varname": "light-gray-900" 786 | "displayname": "Light Gray 900" 787 | "hex": "#838C91" 788 | } 789 | ] 790 | -------------------------------------------------------------------------------- /src/utils/slugify.coffee: -------------------------------------------------------------------------------- 1 | slugify = (string, doUnderscore) -> 2 | 3 | string = string 4 | .replace(/[^\w ]+/g,'') 5 | .replace(/\ +/g,'-') 6 | 7 | if doUnderscore 8 | string = string.replace(/\-/g,'_') 9 | 10 | return string 11 | 12 | module.exports = slugify 13 | -------------------------------------------------------------------------------- /src/utils/write.coffee: -------------------------------------------------------------------------------- 1 | fs = require 'fs' 2 | 3 | write = (name, data) -> 4 | fs.writeFile "build/#{name}", data, (err) -> 5 | if err 6 | console.log err 7 | 8 | module.exports = write 9 | -------------------------------------------------------------------------------- /tools/convert: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | node_modules/coffee-script/bin/coffee index.coffee 4 | -------------------------------------------------------------------------------- /tools/convertSketch: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | node_modules/coffee-script/bin/coffee src/converters/sketchpalette.coffee 4 | cat build/trello.sketchpalette 5 | --------------------------------------------------------------------------------