tailwind.config.js

const colors = {
  gray: {
    100: "#F8F8F8",
    200: "#F0F0F0",
    300: "#E7E7E7",
    400: "#CECECE",
    500: "#9C9C9C",
    600: "#6A6A6A",
    700: "#383838",
    750: "#2A2A2A",
    800: "#1E1E1E",
  },
  grey: {
    50: { main: "#161616", hover: "#343434", active: "#474747" },
    75: { main: "#1e1e1e", hover: "#3f3f3f", active: "#525252" },
    100: { main: "#242424", hover: "#474747", active: "#5b5b5b" },
    125: { main: "#2a2a2a", hover: "#4e4e4e", active: "#636363" },
    200: { main: "#3a3a3a", hover: "#616161", active: "#777" },
    425: { main: "#666", hover: "#919191", active: "#a6a6a6" },
    625: { main: "#929292", hover: "#bbb", active: "#cecece" },
    850: { main: "#cecece", hover: "#a8a8a8", active: "#939393" },
    925: { main: "#e5e5e5", hover: "#c5c5c5", active: "#b2b2b2" },
    950: { main: "#eee", hover: "#d2d2d2", active: "#c1c1c1" },
    975: { main: "#f6f6f6", hover: "#dfdfdf", active: "#cfcfcf" },
    1000: { main: "#fff", hover: "#f6f6f6", active: "#ededed" },
    525: { main: "#7b7b7b", hover: "#a6a6a6", active: "#bababa" },
  },

  "blue-france": {
    75: { main: "#1b1b35", hover: "#3a3a68", active: "#4d4d83" },
    100: { main: "#21213f", hover: "#424275", active: "#56568c" },
    125: { main: "#272747", hover: "#4a4a7d", active: "#5e5e90" },
    200: { main: "#313178", hover: "#5757ad", active: "#6c6cbb" },
    625: { main: "#8585f6", hover: "#b1b1f9", active: "#c6c6fb" },
    850: { main: "#cacafb", hover: "#a1a1f8", active: "#8b8bf6" },
    925: { main: "#e3e3fd", hover: "#c1c1fb", active: "#adadf9" },
    950: { main: "#ececfe", hover: "#cecefc", active: "#bbbbfc" },
    975: { main: "#f5f5fe", hover: "#dcdcfc", active: "#cbcbfa" },
    113: { main: "#000091", hover: "#1212ff", active: "#2323ff" },
    525: { main: "#6a6af4", hover: "#9898f8", active: "#aeaef9" },
  },

  "red-marianne": {
    75: { main: "#2b1919", hover: "#573737", active: "#704848" },
    100: { main: "#331f1f", hover: "#613f3f", active: "#7b5151" },
    125: { main: "#3b2424", hover: "#6b4545", active: "#865757" },
    200: { main: "#5e2a2b", hover: "#9c4a4c", active: "#be5c5e" },
    425: { main: "#c9191e", hover: "#f93f42", active: "#f95a5c" },
    625: { main: "#f95c5e", hover: "#fa9293", active: "#fbabac" },
    850: { main: "#fcbfbf", hover: "#fb8f8f", active: "#fa7474" },
    925: { main: "#fddede", hover: "#fbb6b6", active: "#fa9e9e" },
    950: { main: "#fee9e9", hover: "#fdc5c5", active: "#fcafaf" },
    975: { main: "#fef4f4", hover: "#fcd7d7", active: "#fac4c4" },
    472: { main: "#e1000f", hover: "#ff292f", active: "#ff4347" },
  },

  info: {
    75: { main: "#171d2e", hover: "#333e5c", active: "#445177" },
    100: { main: "#1d2437", hover: "#3b4767", active: "#4c5b83" },
    125: { main: "#222a3f", hover: "#414e71", active: "#53638d" },
    200: { main: "#273961", hover: "#45619f", active: "#5576c0" },
    425: { main: "#0063cb", hover: "#3b87ff", active: "#6798ff" },
    625: { main: "#518fff", hover: "#98b4ff", active: "#b4c7ff" },
    850: { main: "#bccdff", hover: "#83a9ff", active: "#5f96ff" },
    925: { main: "#dde5ff", hover: "#b1c6ff", active: "#95b4ff" },
    950: { main: "#e8edff", hover: "#c2d1ff", active: "#a9bfff" },
    975: { main: "#f4f6ff", hover: "#d6deff", active: "#c2cfff" },
    525: { main: "#0078f3", hover: "#6196ff", active: "#85a9ff" },
  },

  success: {
    75: { main: "#142117", hover: "#2e4533", active: "#3d5943" },
    100: { main: "#19271d", hover: "#344c3b", active: "#44624d" },
    125: { main: "#1e2e22", hover: "#3b5541", active: "#4b6b53" },
    200: { main: "#204129", hover: "#3a6d48", active: "#478558" },
    425: { main: "#18753c", hover: "#27a959", active: "#2fc368" },
    625: { main: "#27a658", hover: "#36d975", active: "#3df183" },
    850: { main: "#3bea7e", hover: "#2cb862", active: "#259e53" },
    925: { main: "#88fdaa", hover: "#3ee87e", active: "#36d070" },
    950: { main: "#b8fec9", hover: "#46fd89", active: "#34eb7b" },
    975: { main: "#dffee6", hover: "#8afcab", active: "#4efb8d" },
    525: { main: "#1f8d49", hover: "#2ec166", active: "#36db75" },
  },

  warning: {
    75: { main: "#2d1814", hover: "#5b352e", active: "#75473e" },
    100: { main: "#361e19", hover: "#663d35", active: "#824f44" },
    125: { main: "#3e231e", hover: "#70433b", active: "#8d564c" },
    200: { main: "#5d2c20", hover: "#9a4d3a", active: "#bc5f49" },
    425: { main: "#b34000", hover: "#ff6218", active: "#ff7a55" },
    625: { main: "#fc5d00", hover: "#ff8c73", active: "#ffa595" },
    850: { main: "#ffbeb4", hover: "#ff8e77", active: "#ff7550" },
    925: { main: "#ffded9", hover: "#ffb6a9", active: "#ff9f8b" },
    950: { main: "#ffe9e6", hover: "#ffc6bd", active: "#ffb0a2" },
    975: { main: "#fff4f3", hover: "#ffd7d3", active: "#ffc4bd" },
    525: { main: "#d64d00", hover: "#ff754e", active: "#ff8e76" },
  },

  error: {
    75: { main: "#301717", hover: "#603434", active: "#7c4444" },
    100: { main: "#391c1c", hover: "#6c3a3a", active: "#894b4b" },
    125: { main: "#412121", hover: "#764040", active: "#935252" },
    200: { main: "#642626", hover: "#a74545", active: "#cb5555" },
    425: { main: "#ce0500", hover: "#ff2725", active: "#ff4140" },
    625: { main: "#ff5655", hover: "#ff8c8c", active: "#ffa6a6" },
    850: { main: "#ffbdbd", hover: "#ff8c8c", active: "#ff7272" },
    925: { main: "#fdd", hover: "#ffb4b4", active: "#ff9c9c" },
    950: { main: "#ffe9e9", hover: "#ffc5c5", active: "#ffafaf" },
    975: { main: "#fff4f4", hover: "#ffd7d7", active: "#ffc3c3" },
    525: { main: "#f60700", hover: "#ff3634", active: "#ff5150" },
  },

  "green-tilleul-verveine": {
    75: { main: "#201e14", hover: "#433f2e", active: "#57533d" },
    100: { main: "#272419", hover: "#4c4734", active: "#615b44" },
    125: { main: "#2d2a1d", hover: "#534f39", active: "#696349" },
    200: { main: "#3f3a20", hover: "#6a6239", active: "#807747" },
    850: { main: "#e2cf58", hover: "#b7a846", active: "#a0923c" },
    925: { main: "#fbe769", hover: "#d7c655", active: "#c2b24c" },
    950: { main: "#fceeac", hover: "#e8d45c", active: "#d4c254" },
    975: { main: "#fef7da", hover: "#fce552", active: "#ebd54c" },
    418: { main: "#66673d", hover: "#929359", active: "#a7a967" },
    817: { main: "#d8c634", hover: "#fee943", active: "#fef1ab" },
    707: { main: "#b7a73f", hover: "#e3cf50", active: "#f6e157" },
  },

  "green-bourgeon": {
    75: { main: "#182014", hover: "#35432e", active: "#46573d" },
    100: { main: "#1e2719", hover: "#3d4c34", active: "#4e6144" },
    125: { main: "#232d1d", hover: "#435339", active: "#556949" },
    200: { main: "#2a401a", hover: "#496b30", active: "#5a833c" },
    850: { main: "#95e257", hover: "#77b645", active: "#679e3b" },
    925: { main: "#a9fb68", hover: "#8ed654", active: "#7fc04b" },
    950: { main: "#c9fcac", hover: "#9ae95d", active: "#8dd555" },
    975: { main: "#e6feda", hover: "#a7fc62", active: "#98ed4d" },
    425: { main: "#447049", hover: "#639f6a", active: "#72b77a" },
    759: { main: "#99c221", hover: "#baec2a", active: "#c9fd2e" },
    640: { main: "#68a532", hover: "#87d443", active: "#95e94a" },
  },

  "green-emeraude": {
    75: { main: "#142018", hover: "#2e4335", active: "#3d5846" },
    100: { main: "#19271e", hover: "#344c3d", active: "#44624f" },
    125: { main: "#1e2e23", hover: "#3b5543", active: "#4b6b55" },
    200: { main: "#21402c", hover: "#3b6c4c", active: "#49835e" },
    850: { main: "#6fe49d", hover: "#58b77d", active: "#4b9f6c" },
    925: { main: "#9ef9be", hover: "#69df97", active: "#5ec988" },
    950: { main: "#c3fad5", hover: "#77eda5", active: "#6dd897" },
    975: { main: "#e3fdeb", hover: "#94f9b9", active: "#6df1a3" },
    425: { main: "#297254", hover: "#3ea47a", active: "#49bc8d" },
    753: { main: "#34cb6a", hover: "#42fb84", active: "#80fda3" },
    632: { main: "#00a95f", hover: "#00e180", active: "#00fb90" },
  },

  "green-menthe": {
    75: { main: "#15201e", hover: "#30433f", active: "#3f5753" },
    100: { main: "#1a2624", hover: "#364b47", active: "#46605b" },
    125: { main: "#1f2d2a", hover: "#3c534e", active: "#4d6963" },
    200: { main: "#223f3a", hover: "#3d6a62", active: "#4b8178" },
    850: { main: "#73e0cf", hover: "#5bb5a7", active: "#4f9d91" },
    925: { main: "#8bf8e7", hover: "#6ed5c5", active: "#62bfb1" },
    950: { main: "#bafaee", hover: "#79e7d5", active: "#6fd3c3" },
    975: { main: "#dffdf7", hover: "#84f9e7", active: "#70ebd8" },
    373: { main: "#37635f", hover: "#53918c", active: "#62a9a2" },
    652: { main: "#21ab8e", hover: "#2eddb8", active: "#34f4cc" },
    548: { main: "#009081", hover: "#00c7b3", active: "#00e2cb" },
  },

  "green-archipel": {
    75: { main: "#152021", hover: "#2f4345", active: "#3f5759" },
    100: { main: "#1a2628", hover: "#364a4e", active: "#465f63" },
    125: { main: "#1f2c2e", hover: "#3c5255", active: "#4d676b" },
    200: { main: "#233e41", hover: "#3e686d", active: "#4d7f85" },
    850: { main: "#60e0eb", hover: "#4cb4bd", active: "#419ca4" },
    925: { main: "#a6f2fa", hover: "#62dbe5", active: "#58c5cf" },
    950: { main: "#c7f6fc", hover: "#64ecf8", active: "#5bd8e3" },
    975: { main: "#e5fbfd", hover: "#99f2f8", active: "#73e9f0" },
    391: { main: "#006a6f", hover: "#009fa7", active: "#00bbc3" },
    716: { main: "#34bab5", hover: "#43e9e2", active: "#4cfdf6" },
    557: { main: "#009099", hover: "#00c6d2", active: "#00e0ee" },
  },

  "blue-ecume": {
    75: { main: "#171d2f", hover: "#333e5e", active: "#445179" },
    100: { main: "#1d2437", hover: "#3b4767", active: "#4c5b83" },
    125: { main: "#222940", hover: "#424d73", active: "#536190" },
    200: { main: "#273962", hover: "#4561a1", active: "#5576c2" },
    850: { main: "#bfccfb", hover: "#8ba7f8", active: "#6b93f6" },
    925: { main: "#dee5fd", hover: "#b4c5fb", active: "#99b3f9" },
    950: { main: "#e9edfe", hover: "#c5d0fc", active: "#adbffc" },
    975: { main: "#f4f6fe", hover: "#d7dffb", active: "#c3cffa" },
    247: { main: "#2f4077", hover: "#4e68bb", active: "#667dcf" },
    675: { main: "#869ece", hover: "#b8c5e2", active: "#ced6ea" },
    400: { main: "#465f9d", hover: "#6f89d1", active: "#8b9eda" },
  },

  "blue-cumulus": {
    75: { main: "#171e2b", hover: "#333f56", active: "#43536f" },
    100: { main: "#1c2433", hover: "#3a4761", active: "#4a5b7b" },
    125: { main: "#212a3a", hover: "#404f69", active: "#516384" },
    200: { main: "#263b58", hover: "#436491", active: "#5279af" },
    850: { main: "#b6cffb", hover: "#76adf8", active: "#4a9df7" },
    925: { main: "#dae6fd", hover: "#a9c8fb", active: "#8ab8f9" },
    950: { main: "#e6eefe", hover: "#bcd3fc", active: "#9fc3fc" },
    975: { main: "#f3f6fe", hover: "#d3dffc", active: "#bed0fa" },
    368: { main: "#3558a2", hover: "#5982e0", active: "#7996e6" },
    732: { main: "#7ab1e8", hover: "#bad2f2", active: "#d2e2f6" },
    526: { main: "#417dc4", hover: "#74a5ec", active: "#96b8f0" },
  },

  "purple-glycine": {
    75: { main: "#251a24", hover: "#4c394a", active: "#634a60" },
    100: { main: "#2c202b", hover: "#554053", active: "#6c536a" },
    125: { main: "#332632", hover: "#5d485c", active: "#755b73" },
    200: { main: "#502e4d", hover: "#855080", active: "#a1629c" },
    850: { main: "#fbb8f6", hover: "#f983f1", active: "#f767ef" },
    925: { main: "#fddbfa", hover: "#fbaff5", active: "#fa96f2" },
    950: { main: "#fee7fc", hover: "#fdc0f8", active: "#fca8f6" },
    975: { main: "#fef3fd", hover: "#fcd4f8", active: "#fabff5" },
    319: { main: "#6e445a", hover: "#a66989", active: "#bb7f9e" },
    630: { main: "#ce70cc", hover: "#dfa4dd", active: "#e7bbe6" },
    494: { main: "#a558a0", hover: "#d282cd", active: "#db9cd6" },
  },

  "pink-macaron": {
    75: { main: "#261b19", hover: "#4e3a37", active: "#654c48" },
    100: { main: "#2e211f", hover: "#58423f", active: "#705551" },
    125: { main: "#352724", hover: "#614a45", active: "#795d57" },
    200: { main: "#52312a", hover: "#885449", active: "#a5675a" },
    850: { main: "#fcc0b4", hover: "#fb9175", active: "#fa794a" },
    925: { main: "#fddfda", hover: "#fbb8ab", active: "#faa18d" },
    950: { main: "#fee9e6", hover: "#fdc6bd", active: "#fcb0a2" },
    975: { main: "#fef4f2", hover: "#fcd8d0", active: "#fac5b8" },
    406: { main: "#8d533e", hover: "#ca795c", active: "#e08e73" },
    833: { main: "#ffb7ae", hover: "#ffe0dc", active: "#fff0ee" },
    689: { main: "#e18b76", hover: "#eabab1", active: "#f0cfc9" },
  },

  "pink-tuile": {
    75: { main: "#281b19", hover: "#513a37", active: "#694c48" },
    100: { main: "#2f211f", hover: "#5a423e", active: "#725550" },
    125: { main: "#372624", hover: "#644845", active: "#7d5b57" },
    200: { main: "#55302a", hover: "#8d5349", active: "#ab665a" },
    850: { main: "#fcbfb7", hover: "#fb907d", active: "#fa7659" },
    925: { main: "#fddfdb", hover: "#fbb8ad", active: "#faa191" },
    950: { main: "#fee9e7", hover: "#fdc6c0", active: "#fcb0a7" },
    975: { main: "#fef4f3", hover: "#fcd7d3", active: "#fac4be" },
    425: { main: "#a94645", hover: "#d5706f", active: "#da8a89" },
    750: { main: "#ff9575", hover: "#ffc4b7", active: "#ffd8d0" },
    556: { main: "#ce614a", hover: "#e89082", active: "#eba89f" },
  },

  "yellow-tournesol": {
    75: { main: "#221d11", hover: "#473e29", active: "#5c5136" },
    100: { main: "#292416", hover: "#4f472f", active: "#655b3d" },
    125: { main: "#302a1a", hover: "#584e34", active: "#6f6342" },
    200: { main: "#43391a", hover: "#706030", active: "#88753c" },
    850: { main: "#efcb3a", hover: "#c1a42d", active: "#a88e26" },
    925: { main: "#fde39c", hover: "#e9c53b", active: "#d3b235" },
    950: { main: "#feecc2", hover: "#fbd335", active: "#e6c130" },
    975: { main: "#fef6e3", hover: "#fce086", active: "#f5d24b" },
    407: { main: "#716043", hover: "#a28a62", active: "#ba9f72" },
    922: { main: "#ffe552", hover: "#e1c700", active: "#cab300" },
    731: { main: "#c8aa39", hover: "#967f29", active: "#7d6a20" },
  },

  "yellow-moutarde": {
    75: { main: "#231d14", hover: "#483e2e", active: "#5e513d" },
    100: { main: "#2a2319", hover: "#514534", active: "#685944" },
    125: { main: "#30291d", hover: "#584d39", active: "#6f6149" },
    200: { main: "#453820", hover: "#735f39", active: "#8c7447" },
    850: { main: "#fcc63a", hover: "#cb9f2d", active: "#b18a26" },
    925: { main: "#fde2b5", hover: "#f6c43c", active: "#dfb135" },
    950: { main: "#feebd0", hover: "#fdcd6d", active: "#f4be30" },
    975: { main: "#fef5e8", hover: "#fcdca3", active: "#fbcd64" },
    348: { main: "#695240", hover: "#9b7b61", active: "#b58f72" },
    860: { main: "#ffca00", hover: "#cda200", active: "#b28c00" },
    679: { main: "#c3992a", hover: "#f5c137", active: "#fcd17b" },
  },

  "orange-terre-battue": {
    75: { main: "#281a16", hover: "#513932", active: "#6a4b42" },
    100: { main: "#31201c", hover: "#5d403a", active: "#77534a" },
    125: { main: "#382621", hover: "#664840", active: "#7f5b51" },
    200: { main: "#543125", hover: "#8b5442", active: "#a96751" },
    850: { main: "#fcc0b0", hover: "#fb926b", active: "#fa7a35" },
    925: { main: "#fddfd8", hover: "#fbb8a5", active: "#faa184" },
    950: { main: "#fee9e5", hover: "#fdc6ba", active: "#fcb09e" },
    975: { main: "#fef4f2", hover: "#fcd8d0", active: "#fac5b8" },
    370: { main: "#755348", hover: "#ab7b6b", active: "#c68f7d" },
    672: { main: "#ff732c", hover: "#ffa48b", active: "#ffbbab" },
    645: { main: "#e4794a", hover: "#f1a892", active: "#f4bfb1" },
  },

  "brown-cafe-creme": {
    75: { main: "#211d16", hover: "#453e31", active: "#5a5141" },
    100: { main: "#28241c", hover: "#4e4739", active: "#635b4a" },
    125: { main: "#2e2a21", hover: "#554e3f", active: "#6b6351" },
    200: { main: "#423925", hover: "#6e6041", active: "#867550" },
    850: { main: "#e7ca8e", hover: "#bca473", active: "#a48f64" },
    925: { main: "#f4e3c7", hover: "#e1c386", active: "#ccb078" },
    950: { main: "#f7ecdb", hover: "#edce94", active: "#dabd84" },
    975: { main: "#fbf6ed", hover: "#f2deb6", active: "#eacf91" },
    383: { main: "#685c48", hover: "#97866a", active: "#ae9b7b" },
    885: { main: "#ecd7a2", hover: "#c5b386", active: "#af9f77" },
    782: { main: "#d1b781", hover: "#a38e63", active: "#8b7954" },
  },

  "brown-caramel": {
    75: { main: "#251c16", hover: "#4c3c31", active: "#624e41" },
    100: { main: "#2c221c", hover: "#554439", active: "#6c574a" },
    125: { main: "#332821", hover: "#5d4b40", active: "#755f51" },
    200: { main: "#4b3525", hover: "#7c5a41", active: "#976e51" },
    850: { main: "#eac7b2", hover: "#d69e75", active: "#bc8a66" },
    925: { main: "#f3e2d9", hover: "#e7bea6", active: "#e1a982" },
    950: { main: "#f7ebe5", hover: "#eccbb9", active: "#e6b79a" },
    975: { main: "#fbf5f2", hover: "#f1dbcf", active: "#ecc9b5" },
    425: { main: "#845d48", hover: "#bb8568", active: "#d69978" },
    901: { main: "#fbd8ab", hover: "#efb547", active: "#d6a23e" },
    648: { main: "#c08c65", hover: "#e6b594", active: "#eccab6" },
  },

  "brown-opera": {
    75: { main: "#241c17", hover: "#4a3c33", active: "#604f44" },
    100: { main: "#2b221c", hover: "#53443a", active: "#6a574a" },
    125: { main: "#322821", hover: "#5c4b40", active: "#735f51" },
    200: { main: "#493625", hover: "#795c41", active: "#937050" },
    850: { main: "#eac7ad", hover: "#d09f74", active: "#b68b65" },
    925: { main: "#f3e2d7", hover: "#e7bfa0", active: "#deaa7e" },
    950: { main: "#f7ece4", hover: "#eccdb3", active: "#e6ba90" },
    975: { main: "#fbf5f2", hover: "#f1dbcf", active: "#ecc9b5" },
    395: { main: "#745b47", hover: "#a78468", active: "#c09979" },
    820: { main: "#e6be92", hover: "#f2e2d3", active: "#f8f0e9" },
    680: { main: "#bd987a", hover: "#e1c0a8", active: "#e9d4c5" },
  },

  "beige-gris-galet": {
    75: { main: "#211d19", hover: "#453e37", active: "#595148" },
    100: { main: "#28231f", hover: "#4e453f", active: "#635950" },
    125: { main: "#2e2924", hover: "#554d45", active: "#6b6157" },
    200: { main: "#433829", hover: "#705f47", active: "#887358" },
    850: { main: "#e0cab0", hover: "#baa48a", active: "#a38f78" },
    925: { main: "#eee4d9", hover: "#dbc3a4", active: "#c6b094" },
    950: { main: "#f3ede5", hover: "#e1d0b5", active: "#d1bea2" },
    975: { main: "#f9f6f2", hover: "#eadecd", active: "#e1ceb1" },
    407: { main: "#6a6156", hover: "#988b7c", active: "#afa08f" },
    821: { main: "#d0c3b7", hover: "#eae5e1", active: "#f4f2f0" },
    702: { main: "#aea397", hover: "#d5cabd", active: "#e2dbd4" },
  },
}

module.exports = {
  plugins: [],
  darkMode: "class",
  content: ["./src/**/*.{js,jsx,ts,tsx,scss}"],
  theme: {
    extend: {
      colors: colors,
      textColor: colors,
      borderColor: colors,
      backgroundColor: colors,
      gradientColorStops: colors,
      flex: {
        2: "2 2 0%",
      },
      fontSize: {
        "5xl": ["3rem", "4rem"],
        "6xl": ["3.75rem", "5rem"],
      },
      fontFamily: {
        arial: ["arial", "sans-serif"],
        spectral: ["Spectral", "serif"],
        remix: ["remixicon", "sans-serif"],
        bold: ["Marianne", "arial", "sans-serif"],
        sans: ["Marianne", "arial", "sans-serif"],
      },
      boxShadow: {
        input: "inset 0 -2px 0 0 #6a6a6a",
        "input-dark": "inset 0 -2px 0 0 #e7e7e7",
        "input-error": "inset 0 -2px 0 0 #ce0500",
        "input-blue": "inset 0 -2px 0 0 #000091",
        "input-blue-dark": "inset 0 -2px 0 0 #9a9aff",
      },
    },
  },
}