stevensblueprint / inreach-website

https://inreach-website.vercel.app
6 stars 1 forks source link

Extend base tailwind colors #12

Closed j-ferber closed 3 months ago

j-ferber commented 4 months ago

InReach gave us some of the custom colors they use on their website here:

https://www.canva.com/design/DAFUSppq54o/nSGowZdNepyChJMPLhvuAg/view?utm_content=DAFUSppq54o&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink

In this link below, scroll down to Adding additional colors:

https://tailwindcss.com/docs/customizing-colors

On slides 14 and 15 of the canva, you can find their primary and secondary colors. Add them to the Tailwind config using the hex values under a suitable name. These names can be found on their Figma files here: https://www.figma.com/file/gl8ppgnhpSq1Dr7Daohk55/Design-System-(2023)?type=design&node-id=234-8266&mode=design&t=3cQdtDZ5bTur0Uol-0

When naming, use the word "InReach-{colorname}" to make sure the colors are not confused (example shown below).

In our case, we do not need the values 50-900 like the example, so it is okay to just have the format:

module.exports = {
  theme: {
    extend: {
      colors: {
        "InReach-Dark-Grey": "#65676B",
        ...rest of the colors
      }
    },
  },
}