packages/shared/lib/colors.ts

   1 import type { ColorFormats } from 'tinycolor2';
   2 import tinycolor from 'tinycolor2';
   3 import { c } from 'ttag';
   4
   5 import type { SimpleMap } from '@proton/shared/lib/interfaces';
   6 import randomIntFromInterval from '@proton/utils/randomIntFromInterval';
   7
   8 export const ACCENT_COLORS_MAP = {
   9     purple: { color: '#8080FF', getName: () => c('color').t`purple` },
  10     pink: { color: '#DB60D6', getName: () => c('color').t`pink` },
  11     strawberry: { color: '#EC3E7C', getName: () => c('color').t`strawberry` },
  12     carrot: { color: '#F78400', getName: () => c('color').t`carrot` },
  13     sahara: { color: '#936D58', getName: () => c('color').t`sahara` },
  14     enzian: { color: '#5252CC', getName: () => c('color').t`enzian` },
  15     plum: { color: '#A839A4', getName: () => c('color').t`plum` },
  16     cerise: { color: '#BA1E55', getName: () => c('color').t`cerise` },
  17     copper: { color: '#C44800', getName: () => c('color').t`copper` },
  18     soil: { color: '#54473F', getName: () => c('color').t`soil` },
  19     slateblue: { color: '#415DF0', getName: () => c('color').t`slateblue` },
  20     pacific: { color: '#179FD9', getName: () => c('color').t`pacific` },
  21     reef: { color: '#1DA583', getName: () => c('color').t`reef` },
  22     fern: { color: '#3CBB3A', getName: () => c('color').t`fern` },
  23     olive: { color: '#B4A40E', getName: () => c('color').t`olive` },
  24     cobalt: { color: '#273EB2', getName: () => c('color').t`cobalt` },
  25     ocean: { color: '#0A77A6', getName: () => c('color').t`ocean` },
  26     pine: { color: '#0F735A', getName: () => c('color').t`pine` },
  27     forest: { color: '#258723', getName: () => c('color').t`forest` },
  28     pickle: { color: '#807304', getName: () => c('color').t`pickle` },
  29 };
  30
  31 export const ACCENT_COLORS = Object.values(ACCENT_COLORS_MAP).map(({ color }) => color);
  32
  33 const COLOR_NAME_MAP = Object.values(ACCENT_COLORS_MAP).reduce<SimpleMap<() => string>>((acc, { color, getName }) => {
  34     acc[color] = getName;
  35
  36     return acc;
  37 }, {});
  38
  39 export const getColorName = (color: string) => {
  40     return COLOR_NAME_MAP[color.toUpperCase()]?.();
  41 };
  42
  43 export const getRandomAccentColor = () => ACCENT_COLORS[randomIntFromInterval(0, ACCENT_COLORS.length - 1)];
  44
  45 // Euclidean distance between colors
  46 const getColorDistance = (color1: ColorFormats.RGBA, color2: ColorFormats.RGBA): number => {
  47     return Math.sqrt((color1.r - color2.r) ** 2 + (color2.g - color2.g) ** 2 + (color1.b - color2.b) ** 2);
  48 };
  49
  50 export const getClosestProtonColor = (inputColor: string): string | undefined => {
  51     const color = tinycolor(inputColor);
  52
  53     if (color.isValid()) {
  54         const inputColorRGB = color.toRgb();
  55         let closestColor;
  56         let closestDistance: number;
  57
  58         ACCENT_COLORS.forEach((protonColor) => {
  59             const protonColorRGB = tinycolor(protonColor).toRgb();
  60             const colorDistance = getColorDistance(protonColorRGB, inputColorRGB);
  61
  62             if (closestDistance === undefined || colorDistance < closestDistance) {
  63                 closestDistance = colorDistance;
  64                 closestColor = protonColor;
  65             }
  66         });
  67
  68         return closestColor;
  69     }
  70     return undefined;
  71 };
  72
  73 // List of CSS3 colors https://www.w3.org/TR/css-color-3/#svg-color
  74 export const CSS3_COLORS = [
  75     'aliceblue',
  76     'antiquewhite',
  77     'aqua',
  78     'aquamarine',
  79     'azure',
  80     'beige',
  81     'bisque',
  82     'black',
  83     'blanchedalmond',
  84     'blue',
  85     'blueviolet',
  86     'brown',
  87     'burlywood',
  88     'cadetblue',
  89     'chartreuse',
  90     'chocolate',
  91     'coral',
  92     'cornflowerblue',
  93     'cornsilk',
  94     'crimson',
  95     'cyan',
  96     'darkblue',
  97     'darkcyan',
  98     'darkgoldenrod',
  99     'darkgray',
 100     'darkgreen',
 101     'darkgrey',
 102     'darkkhaki',
 103     'darkmagenta',
 104     'darkolivegreen',
 105     'darkorange',
 106     'darkorchid',
 107     'darkred',
 108     'darksalmon',
 109     'darkseagreen',
 110     'darkslateblue',
 111     'darkslategray',
 112     'darkslategrey',
 113     'darkturquoise',
 114     'darkviolet',
 115     'deeppink',
 116     'deepskyblue',
 117     'dimgray',
 118     'dimgrey',
 119     'dodgerblue',
 120     'firebrick',
 121     'floralwhite',
 122     'forestgreen',
 123     'fuchsia',
 124     'gainsboro',
 125     'ghostwhite',
 126     'gold',
 127     'goldenrod',
 128     'gray',
 129     'green',
 130     'greenyellow',
 131     'grey',
 132     'honeydew',
 133     'hotpink',
 134     'indianred',
 135     'indigo',
 136     'ivory',
 137     'khaki',
 138     'lavender',
 139     'lavenderblush',
 140     'lawngreen',
 141     'lemonchiffon',
 142     'lightblue',
 143     'lightcoral',
 144     'lightcyan',
 145     'lightgoldenrodyellow',
 146     'lightgray',
 147     'lightgreen',
 148     'lightgrey',
 149     'lightpink',
 150     'lightsalmon',
 151     'lightseagreen',
 152     'lightskyblue',
 153     'lightslategray',
 154     'lightslategrey',
 155     'lightsteelblue',
 156     'lightyellow',
 157     'lime',
 158     'limegreen',
 159     'linen',
 160     'magenta',
 161     'maroon',
 162     'mediumaquamarine',
 163     'mediumblue',
 164     'mediumorchid',
 165     'mediumpurple',
 166     'mediumseagreen',
 167     'mediumslateblue',
 168     'mediumspringgreen',
 169     'mediumturquoise',
 170     'mediumvioletred',
 171     'midnightblue',
 172     'mintcream',
 173     'mistyrose',
 174     'moccasin',
 175     'navajowhite',
 176     'navy',
 177     'oldlace',
 178     'olive',
 179     'olivedrab',
 180     'orange',
 181     'orangered',
 182     'orchid',
 183     'palegoldenrod',
 184     'palegreen',
 185     'paleturquoise',
 186     'palevioletred',
 187     'papayawhip',
 188     'peachpuff',
 189     'peru',
 190     'pink',
 191     'plum',
 192     'powderblue',
 193     'purple',
 194     'red',
 195     'rosybrown',
 196     'royalblue',
 197     'saddlebrown',
 198     'salmon',
 199     'sandybrown',
 200     'seagreen',
 201     'seashell',
 202     'sienna',
 203     'silver',
 204     'skyblue',
 205     'slateblue',
 206     'slategray',
 207     'slategrey',
 208     'snow',
 209     'springgreen',
 210     'steelblue',
 211     'tan',
 212     'teal',
 213     'thistle',
 214     'tomato',
 215     'turquoise',
 216     'violet',
 217     'wheat',
 218     'yellowgreen',
 219 ];