twntyx-css 1.0.0

package/styles/table.css

@@ -0,0 +1,243 @@
+/*----------------------------*/
+/* TABLE */
+/*----------------------------*/
+
+@utility table-container {
+  @apply overflow-x-auto w-full;
+
+  /* Overflow handling */
+  &.table-overflow {
+    @apply overflow-x-auto;
+
+    /* Custom scrollbar styling */
+    &::-webkit-scrollbar {
+      @apply w-2 h-2;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply rounded-full bg-core-ui-100 dark:bg-core-ui-900;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply rounded-full transition-colors bg-core-ui-400 dark:bg-core-ui-600 hover:bg-text-tertiary;
+    }
+  }
+
+  /* Sticky first column */
+  &.table-sticky-first {
+    th:first-child,
+    td:first-child {
+      @apply sticky left-0 z-10 border-r bg-background-surface border-line-default;
+    }
+  }
+
+  /* Sticky two first columns */
+  &.table-sticky-two {
+    th:first-child,
+    td:first-child {
+      @apply sticky left-0 z-10 bg-background-surface;
+    }
+    th:nth-child(2),
+    td:nth-child(2) {
+      @apply sticky left-0 z-10 border-r bg-background-surface border-line-default;
+    }
+  }
+
+  /* Sticky last column */
+  &.table-sticky-last {
+    th:last-child,
+    td:last-child {
+      @apply sticky right-0 z-10 border-l bg-background-surface border-line-default;
+    }
+  }
+}
+
+/* Base table styles */
+@utility table {
+  @apply w-full text-sm border-separate border-spacing-0;
+
+  thead {
+    tr {
+      @apply border-b border-line-default;
+    }
+  }
+
+  th,
+  td {
+    @apply content-center px-4 py-2 align-middle min-h-8;
+
+    input {
+      @apply m-auto;
+
+      &:only-child {
+        @apply block;
+      }
+    }
+  }
+
+  :where(.table-pin-rows thead tr) {
+    @apply bg-background-surface sticky top-0 z-[1];
+  }
+  :where(.table-pin-rows tfoot tr) {
+    @apply bg-background-surface sticky bottom-0 z-[1];
+  }
+  :where(.table-pin-cols tr th) {
+    @apply sticky right-0 left-0 bg-background-surface;
+  }
+
+  &.table-sm {
+    th,
+    td {
+      @apply px-2 py-1 min-h-6;
+    }
+  }
+
+  &.table-lg {
+    th,
+    td {
+      @apply px-6 py-4 min-h-12;
+    }
+  }
+
+  th {
+    @apply font-medium text-left whitespace-nowrap text-text-secondary;
+  }
+
+  td {
+    @apply align-middle border-b border-line-default;
+  }
+
+  tbody {
+    tr {
+      @apply transition-colors include-transition;
+
+      &:last-child td {
+        @apply border-b-0;
+      }
+    }
+  }
+
+  /* Variants */
+
+  /* Striped rows */
+  &.table-striped-rows {
+    tbody tr:nth-child(even) {
+      @apply bg-core-black/5 dark:bg-core-white/5;
+    }
+  }
+
+  /* Striped columns */
+  &.table-striped-columns {
+    td:nth-child(even),
+    th:nth-child(even) {
+      @apply bg-core-ui-700/5 dark:bg-core-ui-300/5;
+    }
+  }
+
+  /* Hoverable rows */
+  &.table-hover {
+    tbody tr {
+      &:hover {
+        @apply bg-core-ui-700/5 dark:bg-core-ui-300/5;
+      }
+    }
+  }
+
+  /* Compact variant */
+  &.table-compact {
+    th,
+    td {
+      @apply p-2;
+    }
+  }
+
+  /* Checkbox styles */
+  .table-checkbox {
+    @apply w-4;
+  }
+
+  /* Row selection styles */
+  tr:has(input[type="checkbox"]:checked),
+  tr:has(input[type="radio"]:checked) {
+    @apply bg-background-brand/5;
+    .table-item-title {
+      @apply font-medium text-text-default;
+    }
+  }
+
+  /* Hidden actions */
+  .table-actions {
+    @apply invisible opacity-0 translate-y-1 include-transition;
+  }
+
+  tbody tr {
+    &:hover {
+      .table-actions {
+        @apply visible opacity-100 translate-y-0;
+      }
+    }
+  }
+}
+
+/* Table filters container */
+@utility table-filters {
+  @apply flex flex-col gap-4 mb-4 sm:flex-row sm:justify-between sm:items-center;
+
+  .table-search {
+    @apply w-full sm:max-w-xs;
+  }
+
+  .table-date-filter {
+    @apply w-full sm:w-auto;
+  }
+}
+
+@utility button-table-sort {
+  @apply cursor-pointer inline-flex relative justify-center items-center w-6 h-6 text-transparent rounded-full transition-transform duration-150 include-interactive ease-out-quint;
+
+  > span {
+    @apply opacity-0 pointer-events-none;
+  }
+
+  &::before,
+  &::after {
+    @apply content-['']
+      size-4
+      m-auto
+      aspect-square
+      bg-core-black/20
+      dark:bg-core-white/20
+      absolute
+      block
+      transform-gpu
+      mask
+      mask-triangle-filled-down
+      transition-transform;
+  }
+  &::before {
+    @apply top-0 rotate-180 translate-y-px;
+  }
+  &::after {
+    @apply bottom-0 -translate-y-px;
+  }
+
+  &:hover {
+    &::before {
+      @apply -translate-y-px;
+    }
+    &::after {
+      @apply translate-y-px;
+    }
+  }
+
+  &.is-active-down {
+    &::after {
+      @apply bg-core-black dark:bg-core-white;
+    }
+  }
+  &.is-active-up {
+    &::before {
+      @apply bg-core-black dark:bg-core-white;
+    }
+  }
+}

package/styles/theme.css

@@ -0,0 +1,126 @@
+/*----------------------------*/
+/* TAILWIND V4 THEME */
+/*----------------------------*/
+
+/* Configure dark mode to use .dark class instead of media query */
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Font Family */
+  --font-body: "Instrument Sans", Arial, sans-serif;
+  --font-heading: "Gazpacho", Georgia, serif;
+
+  /* Spacing */
+  /* --spacing-xxxs: 4px;
+  --spacing-xxs: 8px;
+  --spacing-xs: 12px;
+  --spacing-sm: 16px;
+  --spacing-md: 20px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 40px;
+  --spacing-3xl: 48px; */
+
+  /* Box Shadows */
+  --shadow-regular: 0px 2px 3px #5353534d;
+  --shadow-hover: 0px 2px 4px #53535366;
+  --shadow-drag: 0px 4px 6px #53535340;
+  --shadow-content: -2px 0px 3px #53535314;
+  --shadow-table-separator: inset 0px -1px 0px #e0e0e0;
+  --shadow-elevation-low: 0px 3px 8px #0000001a, 0px 1px 4px #00000014;
+  --shadow-elevation-medium: 0px 4px 8px #0000001a, 0px 3px 8px #0000001a, 0px 1px 4px #00000014;
+  --shadow-elevation-high: 0px 6px 16px #0000001f, 0px 3px 8px #0000001a, 0px 1px 4px #00000014;
+  --shadow-sm: 0px 0px 0px rgb(10 10 10 / 0.05), 0px 1px 1px rgb(10 10 10 / 0.04), 0px 1px 1px rgb(10 10 10 / 0.02), 0px 3px 3px rgb(10 10 10 / 0.01), 0px 4px 4px rgb(10 10 10 / 0.005);
+  --shadow-md: 0px 0px 0px rgb(10 10 10 / 0.05), 0px 1px 1px rgb(10 10 10 / 0.04), 0px 3px 3px rgb(10 10 10 / 0.02), 0px 5px 5px rgb(10 10 10 / 0.01), 0px 8px 8px rgb(10 10 10 / 0.005);
+  --shadow-lg: 0px 1px 1px rgb(10 10 10 / 0.05), 0px 3px 3px rgb(10 10 10 / 0.04), 0px 6px 6px rgb(10 10 10 / 0.02), 0px 10px 10px rgb(10 10 10 / 0.01), 0px 16px 16px rgb(10 10 10 / 0.005);
+  --shadow-xl: 0px 1px 1px rgb(10 10 10 / 0.05), 0px 5px 5px rgb(10 10 10 / 0.04), 0px 12px 12px rgb(10 10 10 / 0.02), 0px 20px 20px rgb(10 10 10 / 0.01), 0px 32px 32px rgb(10 10 10 / 0.005);
+  --shadow-dark-sm: 0px 0px 0px rgb(10 10 10 / 0.25), 0px 1px 1px rgb(10 10 10 / 0.20), 0px 1px 1px rgb(10 10 10 / 0.15), 0px 3px 3px rgb(10 10 10 / 0.10), 0px 4px 4px rgb(10 10 10 / 0.05);
+  --shadow-dark-md: 0px 0px 0px rgb(10 10 10 / 0.25), 0px 1px 1px rgb(10 10 10 / 0.20), 0px 3px 3px rgb(10 10 10 / 0.15), 0px 5px 5px rgb(10 10 10 / 0.10), 0px 8px 8px rgb(10 10 10 / 0.05);
+  --shadow-dark-lg: 0px 1px 1px rgb(10 10 10 / 0.25), 0px 3px 3px rgb(10 10 10 / 0.20), 0px 6px 6px rgb(10 10 10 / 0.15), 0px 10px 10px rgb(10 10 10 / 0.10), 0px 16px 16px rgb(10 10 10 / 0.05);
+  --shadow-dark-xl: 0px 1px 1px rgb(10 10 10 / 0.25), 0px 5px 5px rgb(10 10 10 / 0.20), 0px 12px 12px rgb(10 10 10 / 0.15), 0px 20px 20px rgb(10 10 10 / 0.10), 0px 32px 32px rgb(10 10 10 / 0.05);
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+
+  /* Line Heights */
+  --leading-compact: 130%;
+  --leading-default: 145%;
+
+  /* Transition Timing Functions */
+  --ease-anticipate: cubic-bezier(1, -0.4, 0.35, 0.95);
+  --ease-snappy-out: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --ease-overshoot: linear(0, 0.379 5.6%, 0.66 11.7%, 0.855 18.5%, 0.924 22.3%, 0.976 26.4%, 1.021 33%, 1.037 41.1%, 1.005 72.8%, 1);
+}
+
+/* Custom Flex Utilities - These need @utility since flex doesn't have a theme namespace in v4 */
+@utility flex-0 {
+  flex: 0 0 0%;
+}
+
+@utility flex-1 {
+  flex: 1 1 0%;
+}
+
+@utility flex-2 {
+  flex: 2 2 0%;
+}
+
+@utility flex-3 {
+  flex: 3 3 0%;
+}
+
+@utility flex-4 {
+  flex: 4 4 0%;
+}
+
+@utility flex-5 {
+  flex: 5 5 0%;
+}
+
+@utility flex-6 {
+  flex: 6 6 0%;
+}
+
+@utility flex-7 {
+  flex: 7 7 0%;
+}
+
+@utility flex-8 {
+  flex: 8 8 0%;
+}
+
+@utility flex-9 {
+  flex: 9 9 0%;
+}
+
+@utility flex-10 {
+  flex: 10 10 0%;
+}
+
+@utility flex-11 {
+  flex: 11 11 0%;
+}
+
+@utility flex-12 {
+  flex: 12 12 0%;
+}
+
+/* Gradient utilities */
+@utility bg-gradient-radial {
+  background-image: radial-gradient(var(--tw-gradient-stops));
+}
+
+@utility bg-gradient-conic {
+  background-image: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
+}

package/styles/timeline.css

@@ -0,0 +1,193 @@
+/*----------------------------*/
+/* TIMELINE */
+/*----------------------------*/
+
+@utility timeline {
+  --timeline-marker-size: 0.75rem;
+  --timeline-line-width: 2px;
+  --timeline-item-indent: 1.5rem;
+  @apply relative m-0 list-none p-0;
+}
+
+@utility timeline-item {
+  @apply relative;
+}
+
+@utility timeline-dot {
+  @apply
+  size-(--timeline-marker-size)
+  block
+  rounded-full
+  border
+  border-line-default
+  bg-background-surface-elevated;
+}
+
+@utility timeline-marker {
+  @apply
+  size-(--timeline-marker-size)
+  inline-flex
+  shrink-0
+  items-center
+  justify-center
+  rounded-full
+  border
+  border-line-default
+  bg-background-surface-elevated;
+  &::before {
+    @apply content-['']
+    absolute
+    -z-10
+    -inset-1.5
+    rounded-full;
+  }
+}
+
+@utility timeline-connector {
+  @apply
+  block
+  rounded-full
+  bg-line-default;
+}
+
+/* Shared vertical structure */
+.timeline-default,
+.timeline-vertical,
+.timeline-activity {
+  > :where(li, .timeline-item) {
+    @apply relative px-(--timeline-item-indent);
+  }
+
+  > :where(li, .timeline-item):not(:last-child)::before {
+    @apply content-[''] absolute rounded-full bg-line-default top-[calc(var(--timeline-marker-size)+0.25rem)] bottom-0;
+    inset-inline-start: calc(
+      (var(--timeline-marker-size) / 2) - (var(--timeline-line-width) / 2)
+    );
+    width: var(--timeline-line-width);
+    /* height: calc(100% - var(--timeline-marker-size) + 1.25rem); */
+  }
+
+  > :where(li, .timeline-item) > :where(.timeline-marker, .timeline-dot) {
+    @apply absolute inset-x-0 top-1;
+  }
+}
+
+@utility timeline-default {
+  --timeline-marker-size: 0.75rem;
+  --timeline-line-width: 1px;
+  --timeline-item-indent: 1.75rem;
+
+  > :where(li, .timeline-item):not(:last-child) {
+    @apply pb-10;
+  }
+
+  > :where(li, .timeline-item) > :where(.timeline-marker, .timeline-dot) {
+    @apply top-1.5;
+  }
+
+  > :where(li, .timeline-item) > :where(.timeline-marker, .timeline-dot) {
+    @apply border-line-highlight bg-background-surface-elevated;
+  }
+}
+
+@utility timeline-vertical {
+  --timeline-marker-size: 1.5rem;
+  --timeline-line-width: 1px;
+  --timeline-item-indent: 2.25rem;
+
+  > :where(li, .timeline-item):not(:last-child) {
+    @apply pb-10;
+  }
+
+  > :where(li, .timeline-item) > .timeline-marker {
+    @apply border-line-brand-active bg-background-brand-active text-text-brand ring-6 ring-background-page;
+  }
+}
+
+@utility timeline-stepper {
+  /* --timeline-marker-size: 1.5rem; */
+  --timeline-line-width: 1px;
+  @apply items-start sm:flex gap-4;
+
+  > :where(li, .timeline-item) {
+    @apply relative mb-6 sm:mb-0 sm:flex-1;
+  }
+
+  > :where(li, .timeline-item) .timeline-stepper-head {
+    @apply flex items-center;
+  }
+
+  > :where(li, .timeline-item) .timeline-marker {
+    @apply relative z-10 border-line-brand-active bg-background-brand-active text-text-brand ring-6 ring-background-page;
+  }
+
+  > :where(li, .timeline-item) .timeline-connector {
+    @apply hidden h-px flex-1 bg-line-default sm:block -mr-4;
+    min-width: 1.5rem;
+  }
+
+  > :where(li, .timeline-item):last-child .timeline-connector {
+    @apply hidden;
+  }
+
+  > :where(li, .timeline-item) .timeline-content {
+    @apply mt-3 sm:pe-8;
+  }
+}
+
+@utility timeline-activity {
+  --timeline-marker-size: 1.5rem;
+  --timeline-line-width: 1px;
+  --timeline-item-indent: 2.25rem;
+
+  > :where(li, .timeline-item):not(:last-child) {
+    @apply pb-10;
+  }
+
+  > :where(li, .timeline-item) > .timeline-marker {
+    @apply overflow-hidden border-background-page ring-6 ring-background-page;
+  }
+
+  > :where(li, .timeline-item) > .timeline-marker img {
+    @apply size-full object-cover;
+  }
+}
+
+/* Shared states */
+.timeline {
+  > :where(li, .timeline-item).is-current {
+    > :where(.timeline-dot, .timeline-marker):not(:has(img)),
+    :where(.timeline-dot, .timeline-marker):not(:has(img)) {
+      @apply border-line-brand bg-background-brand text-text-inverted;
+    }
+
+    .timeline-marker {
+      &::before {
+        @apply bg-background-brand animate-radar;
+      }
+    }
+
+    &::before {
+      @apply bg-line-brand;
+    }
+
+    .timeline-connector {
+      @apply bg-line-brand;
+    }
+  }
+
+  > :where(li, .timeline-item).is-complete {
+    > :where(.timeline-dot, .timeline-marker):not(:has(img)),
+    :where(.timeline-dot, .timeline-marker):not(:has(img)) {
+      @apply border-line-success bg-background-success text-text-success;
+    }
+
+    &::before {
+      @apply bg-line-success;
+    }
+
+    .timeline-connector {
+      @apply bg-line-success;
+    }
+  }
+}

package/styles/toast.css

@@ -0,0 +1,150 @@
+/*----------------------------*/
+/* TOAST */
+/*----------------------------*/
+
+@utility toast-container {
+  @apply fixed inset-x-4 bottom-4 z-50 mx-auto max-w-xl;
+  .toast-container-inner {
+    @apply flex flex-col gap-2 w-full;
+  }
+}
+
+@utility toast {
+  @apply relative pt-0.5 mx-auto w-full max-w-lg overflow-clip rounded border shadow-xl duration-300 text-text-default bg-background-surface ease-snappy-out border-line-default;
+
+  &::before {
+    @apply content-[''] absolute inset-x-0 top-0 h-0.5 rounded-t-xl duration-200 ease-in-out-cubic origin-center;
+  }
+
+  &:hover .toast-close {
+    @apply opacity-100 pointer-events-auto;
+  }
+
+  &:not(.is-active) {
+    @apply opacity-0 scale-95 translate-y-4 -skew-x-2;
+    &::before {
+      @apply rounded-sm opacity-0 scale-x-90;
+    }
+  }
+
+  &.is-active {
+    @apply opacity-100 scale-100 translate-y-0 skew-x-0;
+    &::before {
+      @apply rounded-none opacity-100 scale-x-100;
+    }
+  }
+
+  &.is-loading {
+    .toast-icon {
+      &:empty {
+        @apply !bg-transparent;
+        mask-image: none !important;
+      }
+      svg {
+        @apply opacity-0 scale-95;
+      }
+      &::before {
+        @apply content-[''] loader-base;
+      }
+    }
+  }
+}
+
+@utility toast-content {
+  @apply flex items-center px-4 py-2 text-left;
+}
+
+@utility toast-icon {
+  @apply flex flex-shrink-0 justify-center items-center mr-3;
+
+  &:empty {
+    @apply bg-black size-11;
+  }
+
+  > svg {
+    @apply transition-opacity duration-300 size-11 ease-snappy-out;
+  }
+}
+
+@utility toast-message {
+  @apply flex-1 grow text-sm;
+}
+
+@utility toast-action {
+  @apply
+  px-3
+  py-1
+  ml-3
+  rounded-2xl
+  ;
+}
+
+@utility toast-close {
+  @apply opacity-0 pointer-events-none mx-(--spacing-small) transition-opacity duration-300 ease-snappy-out;
+}
+
+/* Toast Variants */
+.toast-info {
+  @apply text-text-info [&_svg]:text-background-info-active;
+  &::before {
+    @apply bg-background-info-active;
+  }
+  .toast-icon {
+    &:empty {
+      @apply bg-text-info mask-info;
+    }
+  }
+}
+
+.toast-success {
+  @apply text-text-success [&_svg]:text-background-success-active;
+  &::before {
+    @apply bg-background-success-active;
+  }
+  .toast-icon {
+    &:empty {
+      @apply bg-text-success mask-check-circle;
+    }
+  }
+}
+
+.toast-warning {
+  @apply text-text-warning [&_svg]:text-background-warning-active;
+  &::before {
+    @apply bg-background-warning-active;
+  }
+  .toast-icon {
+    &:empty {
+      @apply bg-text-warning mask-warning;
+    }
+  }
+}
+
+.toast-error {
+  @apply text-text-error [&_svg]:text-background-error-active;
+  &::before {
+    @apply bg-background-error-active;
+  }
+  .toast-icon {
+    &:empty {
+      @apply bg-text-error mask-report;
+    }
+  }
+}
+
+/* Visibility transitions */
+.toast-enter {
+  @apply opacity-0 translate-y-full;
+}
+
+.toast-enter-active {
+  @apply opacity-100 translate-y-0;
+}
+
+.toast-exit {
+  @apply opacity-100 translate-y-0;
+}
+
+.toast-exit-active {
+  @apply opacity-0 translate-y-full;
+}

package/styles/tooltip.css

@@ -0,0 +1,8 @@
+@tailwind utilities;
+/*----------------------------*/
+/* TOOLTIP */
+/*----------------------------*/
+
+@utility tooltip {
+  @apply px-3 py-1 text-xs rounded-xl shadow-lg backdrop-blur bg-background-inverted text-text-inverted font-semibold *:text-base max-w-60;
+}