# Design Tokens

## Base Colours

Base level solid state colours

nrma: {
    breakpoints: {
        sm: '480px',
        md: '768px',
        lg: '976px',
        xl: '1440px',
    },
    colors: {
        primary: {
            ...
        },
        secondary: {
            ...
        },
        tertiary: {
            ...
        },
        interactive: {
            ...
        },
        action: {
            ...
        },
        decorative: {
            ...
        },
        grey: {
            ...
        }
        status: {
            success: {
            ...
            },
            warning: {
                ...
            },
            error: {
                ...
            },
            information: {
                ...
            },
        },
        link: {
            ...
        }
    },
    typography: {
        body: {
            fontFamily: "",
            url: ""
        },
        heading: {
            fontFamily: "",
            url: ""
        }
    },
    borderRadius: {
        ...
    },
    dropshadow: {
        ...
    }
}

## Base Colours States

theme: {
    colors: {
        [base]: {
          DEFAULT: "#",  // [base]
          subdued: "#",  // [state]
          hovered: "#",
          focused: "#",
          active: "#",
          visited: "#",
          disabled: "#"
        }
    }        
}

#### Generated classes

.bg-[base]
.text-[base]
.border-[base]
.divide-[base]
.bg-[base]-[state]
.text-[base]-[state]
.border-[base]-[state]
.divide-[base]-[state]

## Interactive / Active

By default will reference the primary colour states.

theme: {
    [interactive / active]: {
        [base]: {
          DEFAULT: theme('colors.primary'),
          subdued: theme('colors.subdued'),
          hovered: theme('colors.hovered'),
          focused: theme('colors.focused'),
          active: theme('colors.active'),
          visited: theme('colors.visited'),
          disabled: theme('colors.disabled')
        }
    }
}

## Recommendations

### On Surface
Is this needed?

### Icon
Could use `text` colours and states instead?

#### `Action`
Is there a need for `secondary` and `tertiary` colours for this? Could this not reference the `secondary` and `decorative` colour states?

#### `Decorative`
Move the `action - tertiary` states into the `decorative` section.

#### `Surface`
Is there a need for `secondary` and `tertiary` colours for this? Could this not reference the `secondary` and `tertiary` colour states? Also seems surface colours are primarily greys, could this be mapped to a grey palette?

#### `Interactive`
Is the `interactive` error state needed? Could the `warning` colour states be used instead?

## Full Config

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#000E82",
          subdued: "#666EB4",
          hovered: "#191F4D",
          focused: "#000000",
          active: "#333E9B",
          visited: "#6571CC",
          disabled: "#B2B8E6"
        },
        secondary: {
          DEFAULT: "#141437",
          subdued: "#727287",
          hovered: "#191F4D",
          focused: "#010101",
          active: "#000E82",
          visited: "#666EB4",
          disabled: "#E6E7F3"
        },
        surface: {
          DEFAULT: "#FFFFFF",
          subdued: "#FAFBFB",
          hovered: "#F6F6F7",
          neutral: {
            DEFAULT: "#F0F2F7",
            subdued: "#DDE4EA",
            hovered: "#C7CED4"
          }
        },
        interactive: {
          DEFAULT: "#333E9B",
          subdued: "#6671CC",
          hovered: "#191F4D",
          focused: "#000000",
          active: "#333E9B",
          visited: "#6571CC",
          disabled: "#B2B8E6",
        },
        action: {
          DEFAULT: "#000E82",
          subdued: "#666EB4",
          hovered: "#333E9B",
          focused: "#010101",
          active: "#FFFFFF",
          visited: "#E5E7F3",
          disabled: "#999FCD",
        },
        success: {
          DEFAULT: "#47800E",
          subdued: "#94C95E",
          hovered: "#2E5309",
          focused: "#0A1202",
          disabled: "#C7E3AB"
        },
        warning: {
          DEFAULT: "#E96A20",
          subdued: "#EE894F",
          hovered: "#C35413"
        },
        error: {
          DEFAULT: "#DA0000",
          subdued: "#FF7575",
          hovered: "#A80000",
          focused: "#420000",
          active: "#DA0000",
          visited: "#FF7575",
          disabled: "#FFDBDB"
        },
        information: {
          DEFAULT: "#2D799F",
          subdued: "#60ACD2",
          hovered: "#225B77"
        },
        decorative: {
          DEFAULT: "#28F0B4",
          subdued: "#7EF6D2",
          hovered: "#20C090",
          focused: "#14785A",
          active: "#FFFFFF",
          visited: "#7EF6D2",
          disabled: "#E9FDF7"
        },
        grey: {
          DEFAULT: '#F0F2F7',
          50: "#EAEDF3",
          100: "#DDE4EA",
          150: "#D2D9DF",
          200: "#C7CED4",
          250: "#BCC3C9",
          300: "#B1B8BE",
          350: "#A6ADB3",
          400: "#9BA2A8",
          450: "#90979D",
          500: "#848B91",
          550: "#7A8187",
          600: "#6F767C",
          650: "#646B71",
          700: "#595F65",
          750: "#4D545A",
          800: "#43494F",
          850: "#383E44",
          900: "#2D3439"
        },
      },
    }
  },
  variants: {
    extend: {
      backgroundColor: ['checked', 'disabled', 'active'],
      borderColor: ['checked', 'disabled'],
      textColor: ['disabled']
    }
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}