2022-03-15 13:50:42 +01:00
|
|
|
import { Meta } from "@storybook/addon-docs";
|
|
|
|
|
2022-10-18 16:54:27 +02:00
|
|
|
<Meta title="Documentation/Colors" />
|
2022-03-15 13:50:42 +01:00
|
|
|
|
|
|
|
export const Row = (name) => (
|
|
|
|
<tr class="tw-h-16">
|
|
|
|
<td class="!tw-border-none">{name}</td>
|
|
|
|
<td class={"tw-bg-" + name + " !tw-border-secondary-300"}></td>
|
|
|
|
</tr>
|
|
|
|
);
|
|
|
|
|
|
|
|
export const Table = (args) => (
|
2022-08-02 08:45:59 +02:00
|
|
|
<table class={"border tw-table-auto !tw-text-main " + args.class}>
|
2022-03-15 13:50:42 +01:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>General usage</th>
|
|
|
|
<th class="tw-w-20"></th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{Row("background")}
|
|
|
|
{Row("background-alt")}
|
|
|
|
{Row("background-alt2")}
|
2022-12-09 11:21:07 +01:00
|
|
|
{Row("background-alt3")}
|
|
|
|
{Row("background-alt4")}
|
2022-03-15 13:50:42 +01:00
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
{Row("primary-300")}
|
|
|
|
{Row("primary-500")}
|
|
|
|
{Row("primary-700")}
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
{Row("secondary-100")}
|
|
|
|
{Row("secondary-300")}
|
|
|
|
{Row("secondary-500")}
|
|
|
|
{Row("secondary-700")}
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
{Row("success-500")}
|
|
|
|
{Row("success-700")}
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
{Row("danger-500")}
|
|
|
|
{Row("danger-700")}
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
{Row("warning-500")}
|
|
|
|
{Row("warning-700")}
|
|
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
{Row("info-500")}
|
|
|
|
{Row("info-700")}
|
|
|
|
</tbody>
|
2022-10-07 18:24:49 +02:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th>Text</th>
|
|
|
|
<th class="tw-w-20"></th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
2022-03-15 13:50:42 +01:00
|
|
|
<tbody>
|
|
|
|
{Row("text-main")}
|
|
|
|
{Row("text-muted")}
|
|
|
|
{Row("text-contrast")}
|
2022-05-10 05:11:33 +02:00
|
|
|
{Row("text-alt2")}
|
2022-10-07 18:24:49 +02:00
|
|
|
{Row("text-code")}
|
2022-03-15 13:50:42 +01:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
);
|
|
|
|
|
|
|
|
<style>{`
|
|
|
|
table {
|
|
|
|
border-spacing: 0.5rem;
|
|
|
|
border-collapse: separate !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
tr {
|
|
|
|
background: none !important;
|
|
|
|
border: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
td, th {
|
|
|
|
color: inherit !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
th {
|
|
|
|
border: none !important;
|
|
|
|
}
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
# Colors
|
|
|
|
|
|
|
|
<div class="tw-flex tw-space-x-4">
|
|
|
|
<Table />
|
|
|
|
<Table class="theme_dark tw-bg-background" />
|
|
|
|
</div>
|