import { Meta } from "@storybook/addon-docs";
export const Row = (name) => (
{name} |
|
);
export const Table = (args) => (
General usage |
|
{Row("background")}
{Row("background-alt")}
{Row("background-alt2")}
{Row("background-alt3")}
{Row("background-alt4")}
{Row("primary-300")}
{Row("primary-500")}
{Row("primary-700")}
{Row("secondary-100")}
{Row("secondary-300")}
{Row("secondary-500")}
{Row("secondary-700")}
{Row("success-500")}
{Row("success-700")}
{Row("danger-500")}
{Row("danger-700")}
{Row("warning-500")}
{Row("warning-700")}
{Row("info-500")}
{Row("info-700")}
Text |
|
{Row("text-main")}
{Row("text-muted")}
{Row("text-contrast")}
{Row("text-alt2")}
{Row("text-code")}
);
# Colors
Tailwind traditionally has a very large color palette. Bitwarden has their own more limited color
palette instead.
This has a couple of advantages:
- Promotes consistency across the application.
- Easier to maintain and make adjustments.
- Allows us to support more than two themes light & dark, should it be needed.
Below are all the permited colors. Please consult design before considering adding a new color.