Theming

The Minerva theme object follows the Styled System spec, with some more specific objects added to create styles for specific components.

These specific styles allow you to control different components and their different states. In the future we plan to connect this config with other tools to easily generate themes from design systems.

Using a Theme#

Minerva comes with a default theme that you can use to show the styles shown here by default.

You can also extend these styles to customize them or provide your own style object:

Primary Button
const customTheme = {
  // spread the default theme if you want to extend them
  ...defaultTheme,
  colors: {
    // make sure to spread nested objects like this
    // unless you are trying to override the entire object
    ...defaultTheme.colors,
    primary: '#551A8B',
  },
};

render(
  <ThemeProvider theme={customTheme}>
    <Button bg="primary" color="white" _hover={{ bg: 'primary' }}>
      Primary Button
    </Button>
  </ThemeProvider>
);
const customTheme = {
  // spread the default theme if you want to extend them
  ...defaultTheme,
  colors: {
    // make sure to spread nested objects like this
    // unless you are trying to override the entire object
    ...defaultTheme.colors,
    primary: '#551A8B',
  },
};
render(
  <ThemeProvider theme={customTheme}>
    <Button bg="primary" color="white" _hover={{ bg: 'primary' }}>
      Primary Button
    </Button>
  </ThemeProvider>
);

You can also entirely remove the base styles

Primary Button
const customTheme = {
  Button: {},
};

render(
  <ThemeProvider theme={customTheme}>
    <Button>Primary Button</Button>
  </ThemeProvider>
);
const customTheme = {
  Button: {},
};
render(
  <ThemeProvider theme={customTheme}>
    <Button>Primary Button</Button>
  </ThemeProvider>
);

Component Theming#

Theme styles for specific components can be provided in your theme object:

Custom Button Styles
() => {
  const theme = {
    ...defaultTheme,
    Button: {
      ...defaultTheme.Button,
      backgroundColor: 'blue.700',
      color: '#fff',
      _hover: {
        backgroundColor: 'blue.800',
      },
    },
  };

  return (
    <ThemeProvider theme={theme}>
      <Button>Custom Button Styles</Button>
    </ThemeProvider>
  );
};
() => {
  const theme = {
    ...defaultTheme,
    Button: {
      ...defaultTheme.Button,
      backgroundColor: 'blue.700',
      color: '#fff',
      _hover: {
        backgroundColor: 'blue.800',
      },
    },
  };
  return (
    <ThemeProvider theme={theme}>
      <Button>Custom Button Styles</Button>
    </ThemeProvider>
  );
};

Component Variants#

For components like a <Button />, you'll often need to define more than one preset.

To account for this, you can modify a variants object in the theme for compatible components.

Copy
const theme = {
  ...defaultTheme,
  variants: {
    Button: {
      halloween: {
        bg: 'orange.500',
        borderColor: 'orange.500',
        color: 'black',
        _hover: {
          bg: 'orange.600',
        },
      },
    },
  },
};
render(
  <ThemeProvider theme={theme}>
    <Button variant="halloween">Halloween Button</Button>
  </ThemeProvider>
);

Currently only the <Button /> component can use variants, but this will soon be extended to all components

The defaultTheme also provides a primary, secondary and tertiary variant.

Primary ButtonSecondary ButtonTertiary Button
<Stack horizontal>
  <Button variant="primary">Primary Button</Button>
  <Button variant="secondary">Secondary Button</Button>
  <Button variant="tertiary">Tertiary Button</Button>
</Stack>
<Stack horizontal>
  <Button variant="primary">Primary Button</Button>
  <Button variant="secondary">Secondary Button</Button>
  <Button variant="tertiary">Tertiary Button</Button>
</Stack>

Copy
{
  "test:" "test"
}

Default Theme#

Copy
{
  "Button": {
    "backgroundColor": "#fff",
    "borderWidth": "1px",
    "color": "#374151",
    "fontWeight": 500,
    "display": "inline-flex",
    "WebkitAppearance": "none",
    "WebkitBoxAlign": "center",
    "alignItems": "center",
    "WebkitBoxPack": "center",
    "justifyContent": "center",
    "userSelect": "none",
    "position": "relative",
    "whiteSpace": "nowrap",
    "verticalAlign": "middle",
    "fontSize": "14px",
    "lineHeight": "20px",
    "paddingTop": "8px",
    "paddingBottom": "8px",
    "paddingLeft": "16px",
    "paddingRight": "16px",
    "borderRadius": "5px",
    "borderStyle": "solid",
    "borderColor": "#d2d6dc"
  },
  "Checkbox": {},
  "Drawer": {},
  "Heading": {
    "fontWeight": "bold"
  },
  "Image": {},
  "Input": {
    "appearance": "none",
    "fontSize": "16px",
    "borderStyle": "solid",
    "borderColor": "#d2d6dc",
    "paddingTop": "8px",
    "paddingBottom": "8px",
    "paddingLeft": "12px",
    "paddingRight": "32px",
    "borderWidth": "1px",
    "borderRadius": "4px",
    "transition": "all 250ms ease 0s",
    "outline": "none",
    "width": "100%",
    "_focus": {
      "borderColor": "#a4cafe",
      "boxShadow": "0 0 0 3px rgba(164,202,254,.45)"
    },
    "_disabled": {
      "backgroundColor": "#EAEAEA",
      "color": "#8F8F8F",
      "cursor": "not-allowed"
    }
  },
  "InputField": {},
  "Link": {},
  "Tabs": {},
  "Modal": {},
  "ModalHeader": {},
  "ModalBody": {},
  "ModalFooter": {},
  "ModalContent": {},
  "Tag": {},
  "Text": {},
  "Tooltip": {},
  "Select": {},
  "Skeleton": {},
  "Switch": {},
  "defaultBorderColor": "#d2d6dc",
  "icons": {},
  "colors": {
    "primary": "#525252",
    "logoColor": "#551A8B",
    "transparent": "transparent",
    "black": "#000",
    "white": "#fff",
    "gray": {
      "50": "#f9fafb",
      "100": "#f4f5f7",
      "200": "#e5e7eb",
      "300": "#d2d6dc",
      "400": "#9fa6b2",
      "500": "#6b7280",
      "600": "#4b5563",
      "700": "#374151",
      "800": "#252f3f",
      "900": "#161e2e"
    },
    "cool-gray": {
      "50": "#fbfdfe",
      "100": "#f1f5f9",
      "200": "#e2e8f0",
      "300": "#cfd8e3",
      "400": "#97a6ba",
      "500": "#64748b",
      "600": "#475569",
      "700": "#364152",
      "800": "#27303f",
      "900": "#1a202e"
    },
    "red": {
      "50": "#fdf2f2",
      "100": "#fde8e8",
      "200": "#fbd5d5",
      "300": "#f8b4b4",
      "400": "#f98080",
      "500": "#f05252",
      "600": "#e02424",
      "700": "#c81e1e",
      "800": "#9b1c1c",
      "900": "#771d1d"
    },
    "orange": {
      "50": "#fff8f1",
      "100": "#feecdc",
      "200": "#fcd9bd",
      "300": "#fdba8c",
      "400": "#ff8a4c",
      "500": "#ff5a1f",
      "600": "#d03801",
      "700": "#b43403",
      "800": "#8a2c0d",
      "900": "#771d1d"
    },
    "yellow": {
      "50": "#fdfdea",
      "100": "#fdf6b2",
      "200": "#fce96a",
      "300": "#faca15",
      "400": "#e3a008",
      "500": "#c27803",
      "600": "#9f580a",
      "700": "#8e4b10",
      "800": "#723b13",
      "900": "#633112"
    },
    "green": {
      "50": "#f3faf7",
      "100": "#def7ec",
      "200": "#bcf0da",
      "300": "#84e1bc",
      "400": "#31c48d",
      "500": "#0e9f6e",
      "600": "#057a55",
      "700": "#046c4e",
      "800": "#03543f",
      "900": "#014737"
    },
    "teal": {
      "50": "#edfafa",
      "100": "#d5f5f6",
      "200": "#afecef",
      "300": "#7edce2",
      "400": "#16bdca",
      "500": "#0694a2",
      "600": "#047481",
      "700": "#036672",
      "800": "#05505c",
      "900": "#014451"
    },
    "blue": {
      "50": "#ebf5ff",
      "100": "#e1effe",
      "200": "#c3ddfd",
      "300": "#a4cafe",
      "400": "#76a9fa",
      "500": "#3f83f8",
      "600": "#1c64f2",
      "700": "#1a56db",
      "800": "#1e429f",
      "900": "#233876"
    },
    "indigo": {
      "50": "#f0f5ff",
      "100": "#e5edff",
      "200": "#cddbfe",
      "300": "#b4c6fc",
      "400": "#8da2fb",
      "500": "#6875f5",
      "600": "#5850ec",
      "700": "#5145cd",
      "800": "#42389d",
      "900": "#362f78"
    },
    "purple": {
      "50": "#f6f5ff",
      "100": "#edebfe",
      "200": "#dcd7fe",
      "300": "#cabffd",
      "400": "#ac94fa",
      "500": "#9061f9",
      "600": "#7e3af2",
      "700": "#6c2bd9",
      "800": "#5521b5",
      "900": "#4a1d96"
    },
    "pink": {
      "50": "#fdf2f8",
      "100": "#fce8f3",
      "200": "#fad1e8",
      "300": "#f8b4d9",
      "400": "#f17eb8",
      "500": "#e74694",
      "600": "#d61f69",
      "700": "#bf125d",
      "800": "#99154b",
      "900": "#751a3d"
    }
  },
  "fontSizes": {
    "xs": "0.75rem",
    "sm": "0.875rem",
    "base": "1rem",
    "lg": "1.125rem",
    "xl": "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "4rem"
  },
  "breakpoints": [
    "640px",
    "768px",
    "1024px",
    "1280px"
  ],
  "fonts": {
    "sans": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
    "serif": "Georgia,Cambria,\"Times New Roman\",Times,serif",
    "mono": "Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
    "body": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
    "heading": "inherit",
    "monospace": "Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
  },
  "shadows": {
    "base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
    "sm": "0 1px 2px 0 rgba(0,0,0,.05)",
    "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
    "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
    "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
    "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
    "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
    "outline": "0 0 0 3px rgba(66, 153, 225, 0.5)",
    "none": "none"
  },
  "radii": {
    "none": "0",
    "sm": "0.125rem",
    "default": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem",
    "full": "9999px"
  },
  "space": {
    "0": "0",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "7": "1.75rem",
    "8": "2rem",
    "9": "2.25rem",
    "10": "2.5rem",
    "11": "2.75rem",
    "12": "3rem",
    "13": "3.25rem",
    "14": "3.5rem",
    "15": "3.75rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "28": "7rem",
    "32": "8rem",
    "36": "9rem",
    "40": "10rem",
    "48": "12rem",
    "56": "14rem",
    "60": "15rem",
    "64": "16rem",
    "72": "18rem",
    "80": "20rem",
    "96": "24rem",
    "px": "1px",
    "0.5": "0.125rem",
    "1.5": "0.375rem",
    "2.5": "0.625rem",
    "3.5": "0.875rem",
    "1/2": "50%",
    "1/3": "33.333333%",
    "2/3": "66.666667%",
    "1/4": "25%",
    "2/4": "50%",
    "3/4": "75%",
    "1/5": "20%",
    "2/5": "40%",
    "3/5": "60%",
    "4/5": "80%",
    "1/6": "16.666667%",
    "2/6": "33.333333%",
    "3/6": "50%",
    "4/6": "66.666667%",
    "5/6": "83.333333%",
    "1/12": "8.333333%",
    "2/12": "16.666667%",
    "3/12": "25%",
    "4/12": "33.333333%",
    "5/12": "41.666667%",
    "6/12": "50%",
    "7/12": "58.333333%",
    "8/12": "66.666667%",
    "9/12": "75%",
    "10/12": "83.333333%",
    "11/12": "91.666667%",
    "full": "100%"
  },
  "sizes": {
    "0": "0",
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem",
    "6": "1.5rem",
    "8": "2rem",
    "10": "2.5rem",
    "12": "3rem",
    "16": "4rem",
    "20": "5rem",
    "24": "6rem",
    "32": "8rem",
    "40": "10rem",
    "48": "12rem",
    "56": "14rem",
    "64": "16rem",
    "px": "1px"
  },
  "lineHeights": {
    "none": "1",
    "tight": "1.25",
    "snug": "1.375",
    "normal": "1.5",
    "relaxed": "1.625",
    "loose": "2"
  },
  "variants": {
    "Button": {
      "primary": {
        "bg": "indigo.800",
        "borderColor": "indigo.800",
        "color": "white",
        "_hover": {
          "bg": "indigo.900",
          "borderColor": "indigo.900"
        }
      },
      "secondary": {
        "bg": "white",
        "borderColor": "indigo.800",
        "color": "indigo.800",
        "_hover": {
          "bg": "indigo.800",
          "color": "white"
        }
      },
      "tertiary": {
        "bg": "white",
        "borderColor": "transparent",
        "color": "indigo.800",
        "_hover": {
          "textDecoration": "underline"
        }
      }
    }
  }
}