@hummingbirdui/hummingbird/src/components/table.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility table {
  @layer base {
    --table-bg: initial;
    --table-color: var(--text-color-muted);
    --table-cell-padding-x: --spacing(4);
    --table-cell-padding-y: --spacing(4);
    --table-border-color: var(--border-color-light);
    --table-font-size: var(--text-sm);
    --table-head-bg: var(--background-color-subtle);
    --table-head-color: var(--text-color-default);
    --table-striped-bg: var(--background-color-muted);
    --table-striped-color: var(--text-color-muted);
    --table-active-bg: var(--background-color-highlight);
    --table-active-color: var(--text-color-default);
    --table-hover-bg: var(--background-color-highlight);
    --table-hover-color: var(--text-color-muted);

    @apply w-full text-left
    text-[length:var(--table-font-size)]
    leading-[1.3];

    th {
      @apply font-medium;
    }

    > :not(caption) > * > * {
      @apply align-middle
      py-[var(--table-cell-padding-y)]
      px-[var(--table-cell-padding-x)]
      text-[var(--table-color)]
      bg-[var(--table-bg)]
      border-b
      border-[var(--table-border-color)];
    }

    thead,
    tfoot {
      td,
      th {
        --table-cell-padding-y: --spacing(3);
      }
    }

    thead {
      td,
      th {
        @apply text-[var(--table-head-color)];
      }
    }
  }
}

@utility table-highlight {
  @layer base {
    thead,
    tfoot {
      td,
      th {
        @apply border-b-0 bg-[var(--table-head-bg)];
      }
    }
    &:has(tfoot) {
      tbody {
        tr:last-child {
          td,
          th {
            @apply border-b-0;
          }
        }
      }
    }
  }
}
@utility table-sm {
  @layer base {
    tbody {
      td,
      th {
        --table-cell-padding-y: --spacing(1.5);
      }
    }
  }
}

@utility table-sticky-header {
  @layer base {
    thead {
      tr,
      th {
        @apply sticky top-0;
      }
    }
  }
}

@utility table-striped {
  @layer base {
    > tbody > tr:nth-of-type(odd) > * {
      --table-bg: var(--table-striped-bg);
      --table-color: var(--table-striped-color);
    }
  }
}
@utility table-striped-columns {
  @layer base {
    > :not(caption) > tr > :nth-child(even) {
      --table-bg: var(--table-striped-bg);
      --table-color: var(--table-striped-color);
    }
  }
}

@utility table-bordered {
  @layer base {
    > :not(caption) > * {
      @apply border-y border-x-0 border-[var(--table-border-color)];
      > * {
        @apply border-y-0 border-x;
      }
    }
  }
}
@utility table-borderless {
  @layer base {
    > :not(caption) > * > * {
      @apply border-b-0;
    }
  }
}

@utility table-active {
  @layer base {
    --table-bg: var(--table-active-bg);
    --table-color: var(--table-active-color);
  }
}

@utility table-hover {
  @layer base {
    > tbody > tr:hover > * {
      @apply bg-[var(--table-hover-bg)] text-[var(--table-hover-color)];
    }
  }
}

@utility table-neutral {
  @layer base {
    --table-bg: var(--color-dark);
    --table-color: var(--color-white);
    --table-head-color: var(--color-white);
    --table-border-color: var(--border-color-light);
    --table-striped-bg: --alpha(var(--color-dark) / 90%);
    --table-striped-color: var(--color-white);
    --table-hover-bg: --alpha(var(--color-dark) / 80%);
    --table-hover-color: var(--color-white);
    --table-active-bg: --alpha(var(--color-dark) / 80%);
    --table-active-color: var(--color-white);
  }
}
@utility table-primary {
  @layer base {
    --table-bg: var(--color-primary-lighter);
    --table-striped-bg: --alpha(var(--color-primary-light) / 30%);
    --table-border-color: --alpha(var(--color-primary) / 20%);
    --table-hover-bg: --alpha(var(--color-primary-light) / 40%);
    --table-active-bg: --alpha(var(--color-primary-light) / 40%);
  }
}
@utility table-secondary {
  @layer base {
    --table-bg: var(--color-secondary-lighter);
    --table-striped-bg: --alpha(var(--color-secondary-light) / 30%);
    --table-border-color: --alpha(var(--color-secondary) / 20%);
    --table-hover-bg: --alpha(var(--color-secondary-light) / 40%);
    --table-active-bg: --alpha(var(--color-secondary-light) / 40%);
  }
}
@utility table-info {
  @layer base {
    --table-bg: var(--color-info-lighter);
    --table-striped-bg: --alpha(var(--color-info-light) / 30%);
    --table-border-color: --alpha(var(--color-info) / 20%);
    --table-hover-bg: --alpha(var(--color-info-light) / 40%);
    --table-active-bg: --alpha(var(--color-info-light) / 40%);
  }
}
@utility table-success {
  @layer base {
    --table-bg: var(--color-success-lighter);
    --table-striped-bg: --alpha(var(--color-success-light) / 30%);
    --table-border-color: --alpha(var(--color-success) / 20%);
    --table-hover-bg: --alpha(var(--color-success-light) / 40%);
    --table-active-bg: --alpha(var(--color-success-light) / 40%);
  }
}
@utility table-warning {
  @layer base {
    --table-bg: var(--color-warning-lighter);
    --table-striped-bg: --alpha(var(--color-warning-light) / 30%);
    --table-border-color: --alpha(var(--color-warning) / 20%);
    --table-hover-bg: --alpha(var(--color-warning-light) / 40%);
    --table-active-bg: --alpha(var(--color-warning-light) / 40%);
  }
}
@utility table-danger {
  @layer base {
    --table-bg: var(--color-danger-lighter);
    --table-striped-bg: --alpha(var(--color-danger-light) / 30%);
    --table-border-color: --alpha(var(--color-danger) / 20%);
    --table-hover-bg: --alpha(var(--color-danger-light) / 40%);
    --table-active-bg: --alpha(var(--color-danger-light) / 40%);
  }
}