Admin Styles
Admin pages on Clubs allows plugins to use default style sheets to provide a standardized console UX for users.
Colors
The UI colors of the admin pages will automatically switch between light/dark mode depending on the user's preferred color scheme.
The following words can be used as values for Tailwind's utilities such as bg-, border-, and text-.
| Token | Light mode | Dark mode | Main uses | Example |
|---|---|---|---|---|
surface-200 | Backgrounds | bg-surface-200 | ||
surface-300 | Backgrounds | bg-surface-300 | ||
surface-400 | Backgrounds | bg-surface-400 | ||
surface-600 | Backgrounds | bg-surface-600 | ||
surface-ink | Texts/borders on surface | text-surface-ink | ||
error-200 | Backgrounds | bg-error-200 | ||
error-300 | Backgrounds | bg-error-300 | ||
error-400 | Backgrounds | bg-error-400 | ||
error-600 | Backgrounds | bg-error-600 | ||
error-ink | Texts/borders on error | text-error-ink |
You can also use the following words as pure color tokens with no semantics:
| Token | Light mode | Dark mode |
|---|---|---|
primary-200 | ||
primary-300 | ||
primary-400 | ||
primary-600 | ||
primary-ink | ||
accent-200 | ||
accent-300 | ||
accent-400 | ||
accent-600 | ||
accent-ink |