Guidelines for modifying theme

[LanceALaughlin]

Hey all, I'm setting up RNR in a project for the first time and I've started to update the theme to match our color variables. I wondered if there are any guidelines or best practices for doing this? More specifically, is it important to keep all the existing color variables defined in global.css and tailwind.config.js? I'm assuming the answer is yes, as I suspect RNR components rely on these in some capacity.

Should I just be changing the variable values in global.css? Any general advice would be really appreciated!

[LanceALaughlin]

In case it helps any else, this is the approach I took.

In global.css I added color variables from our library with custom variable names

@layer base {
  :root {
    /* Primary */
    --evergreen: 185.8, 86.7%, 11.8%; /* #043338 */
    --seafoam: 191, 34.7%, 49.2%; /* #2D6670 */
    --marigold: 49.3, 92.5%, 58.2%; /* #F7D432 */
    --robin: 217.5, 100%, 93.1%; /* #DCE7FF */

    /* Secondary */
    --aqua: 193.6, 39.1%, 49.2%; /* #5299A9 */
    --blue-grey: 207.9, 16.9%, 52.4%; /* #718F9A */

    /* Neutrals */
    --feather: 203.6, 33.3%, 94.9%; /* #EEF4F6 */
    --cloud: 0, 0%, 90.6%; /* #E7E7E7 */
    --steel: 210, 20.9%, 73.7%; /* #BCC7D7 */
    --mint: 195, 33.3%, 92.9%; /* #DEF2F2 */

    /* Error */
    --squash: 17.9, 91.9%, 60.8%; /* #F8623F */
    --blush: 6, 100%, 94.9%; /* #FFF2F0 */

    /* Background Tones */
    --ivory: 48.8, 85%, 94.5%; /* #F7F5ED */
    --canvas: 0, 0%, 100%; /* #FFFFFF */

    /* Scores */
    --shortbread: 46.7, 95%, 70.2%; /* #FFDA67 */
    --orange: 39.3, 100%, 54.5%; /* #FEB117 */
    --scrubs: 184.7, 45.8%, 60%; /* #6CCCC6 */
  }
 }

And in tailwind.config.js I updated all of the classNames to point to my new color variables:

const { hairlineWidth } = require("nativewind/theme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--cloud))",
        input: "hsl(var(--cloud))",
        ring: "hsl(var(--cloud))",
        background: "hsl(var(--canvas))",
        foreground: "hsl(var(--evergreen))",
        primary: {
          DEFAULT: "hsl(var(--evergreen))",
          foreground: "hsl(var(--canvas))",
        },
        secondary: {
          DEFAULT: "hsl(var(--aqua))",
          foreground: "hsl(var(--canvas))",
        },
        destructive: {
          DEFAULT: "hsl(var(--squash))",
          foreground: "hsl(var(--canvas))",
        },
        muted: {
          DEFAULT: "hsl(var(--steel))",
          foreground: "hsl(var(--canvas))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--canvas))",
          foreground: "hsl(var(--evergreen))",
        },
        card: {
          DEFAULT: "hsl(var(--canvas))",
          foreground: "hsl(var(--evergreen))",
        },
      },
      borderWidth: {
        hairline: hairlineWidth(),
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

[mrzachnugent]

Hey @LanceALaughlin, there are 2 places that need to be updated for modifying colors.

1. The ~/global.css file:
   Here live the css variables used by the tailwind classNames. For example, updating the background values with update everywhere that uses *-background like bg-background.
2. The ~/lib/constants.ts file:
   Here live the javascript variables used for the Navigation Theme. The css variable name is commented beside each value. To keep both in sync, when changing a variable in the ~/global.css file, you will need to update the value with the same commented out variable name in the ~/lib/constants.ts file. For example, if you update the destructive variable in ~/global.css, then you will need to update the notification variables in ~/lib/constants.ts.

For the tailwind.config.js file, it is important to pass the css variable names. For example, the border: 'hsl(var(--border))', key pair value, passes the --border css variable to the theme's border color. Doing it this way allows for tailwind modifiers to work with the color like bg-border/50 will add an opacity of 50% to the background color of border.

[LanceALaughlin]

Thanks @mrzachnugent - I didn't realize constants.ts also needed to be updated