import { Meta } from "@storybook/addon-docs";

<Meta title="Common/Colors" />

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) => (
  <table class={"tw-table-auto border !tw-text-main " + args.class}>
    <thead>
      <tr>
        <th>General usage</th>
        <th class="tw-w-20"></th>
      </tr>
    </thead>
    <tbody>
      {Row("background")}
      {Row("background-alt")}
      {Row("background-alt2")}
    </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>
    <tbody>
      {Row("text-main")}
      {Row("text-muted")}
      {Row("text-contrast")}
      {Row("text-alt2")}
    </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>