I'm making a design system for our company using Styled Components. I can create a theme and use that theme for any component that needs to reuse padding, colors, etc.

export const Theme = (props) => (
  <ThemeProvider theme={{
    fontWeights: {
      bold: 700;
      normal: 400,
      light: 100
    },
    ...
  }}>{props.children}</ThemeProvider>
);

export const Button = styled.button(props => `
  font-weight: props.theme.fontWeight.normal,
  ...
`);

The problem I'm having is colors. I don't want to specify the same HTML color codes everywhere, so I want to have them in the theme. But how do I organize them?

If I try this solution, then when I find a new situation I need to amend the color object, and it grows out of control with duplicated values and inconsistent variable names:

theme = {
  colors: {
    success: {
      font: "#2dce89",
      disabledBackground: "#abebd0",
      glow: ...
      active: ...
      borderDisabled: ...
      ...
    }
  }
}

Design sites suggest using numbers. But if I have to style a button, how do I know which color weight to use? And where do greyed versions for disabled go? What about other variants?

success: {
  100: "#d5f5e7",
  200: "#abebd0",
  300: "#81e2b8",
  400: "#57d8a1",
  500: "#2dce89",
  600: "#24a56e",
  700: "#1b7c52",
  800: "#125237",
  900: "#09291b",
},

Is there a better way to organize my colors so it is easy to be consistent across multiple components without having an explosion of one-off variables or duplicated values?