twntyx-css 1.0.0

package/styles/empty-state.css

@@ -0,0 +1,48 @@
+/*----------------------------*/
+/* EMPTY STATE */
+/*----------------------------*/
+
+@utility empty-state {
+  @apply p-8 rounded-3xl border bg-background-surface border-line-default text-center;
+
+  > :where(.empty-state-icon) {
+    @apply inline-flex justify-center items-center mx-auto mb-4 rounded-full size-14 surface-elevated text-text-tertiary;
+
+    > svg {
+      @apply size-7 fill-current;
+    }
+  }
+
+  > :where(h1, h2, h3, h4, h5, h6, .empty-state-title) {
+    @apply mb-2 h4;
+  }
+
+  > :where(p, .empty-state-description) {
+    @apply p2 text-text-secondary;
+  }
+
+  > :where(:last-child, .empty-state-actions) {
+    @apply flex flex-wrap gap-2 justify-center mt-4;
+  }
+}
+
+/* Compatibility aliases */
+@utility empty-state-icon {
+  @apply inline-flex justify-center items-center mx-auto mb-4 rounded-full size-14 surface-elevated text-text-tertiary;
+
+  > svg {
+    @apply size-7 fill-current;
+  }
+}
+
+@utility empty-state-title {
+  @apply mb-2 h4;
+}
+
+@utility empty-state-description {
+  @apply p2 text-text-secondary;
+}
+
+@utility empty-state-actions {
+  @apply flex flex-wrap gap-2 justify-center mt-4;
+}

package/styles/field.css

@@ -0,0 +1,47 @@
+/*----------------------------*/
+/* FIELD */
+/*----------------------------*/
+
+@utility field {
+  @apply space-y-1.5;
+
+  > label,
+  > .field-label {
+    @apply text-sm font-medium text-text-default;
+  }
+
+  :where(.field-required, .required) {
+    @apply ml-1 text-text-error;
+  }
+
+  > :where(.field-description, p) {
+    @apply text-sm text-text-tertiary;
+  }
+
+  &.has-error {
+    > :where(.input-control) {
+      @apply border-line-error bg-background-error/25 text-text-error;
+    }
+
+    > :where(.field-error, p) {
+      @apply text-sm text-text-error;
+    }
+  }
+}
+
+/* Compatibility aliases */
+@utility field-label {
+  @apply text-sm font-medium text-text-default;
+}
+
+@utility field-required {
+  @apply ml-1 text-text-error;
+}
+
+@utility field-description {
+  @apply text-sm text-text-tertiary;
+}
+
+@utility field-error {
+  @apply text-sm text-text-error;
+}

package/styles/fieldset.css

@@ -0,0 +1,24 @@
+/*----------------------------*/
+/* FIELDSET */
+/*----------------------------*/
+
+@utility fieldset {
+  @apply p-4 rounded-2xl border surface;
+
+  > :where(legend, .fieldset-legend) {
+    @apply px-1 text-sm font-medium text-text-default;
+  }
+
+  > :where(:last-child, .fieldset-content) {
+    @apply mt-3 space-y-3;
+  }
+}
+
+/* Compatibility aliases */
+@utility fieldset-legend {
+  @apply px-1 text-sm font-medium text-text-default;
+}
+
+@utility fieldset-content {
+  @apply space-y-3;
+}

package/styles/form-checkbox-radio-toggle.css

@@ -0,0 +1,233 @@
+/*----------------------------*/
+/* CHECKBOX RADIO */
+/*----------------------------*/
+
+@utility checkboxradio {
+  @apply bg-no-repeat
+  flex-shrink-0
+  h-5
+  w-5
+  appearance-none
+  border
+  border-line-highlight
+  checked:border-current
+  bg-core-ui-50
+  dark:bg-core-ui-900
+  bg-size-[150%_auto]
+  bg-center
+  cursor-pointer
+  transition-[background]
+  include-focus-visible;
+  &.input-sm {
+    @apply w-4 h-4 translate-y-0.5;
+    + label {
+      @apply text-xs;
+    }
+  }
+  &.input-lg {
+    @apply w-6 h-6 -translate-y-0.5;
+  }
+
+  &:active {
+    ~ div label {
+      @apply opacity-75;
+    }
+  }
+
+  &:disabled,
+  &.is-disabled {
+    @apply bg-core-ui-300 dark:bg-core-ui-700;
+    &,
+    & ~ div label {
+      @apply opacity-60 cursor-not-allowed;
+    }
+  }
+}
+
+@utility input-wrapper {
+  @apply flex relative flex-row gap-2 text-sm;
+
+  &.input-card {
+    @apply w-full hover:border-line-strong include-interactive;
+    &,
+    * {
+      @apply cursor-pointer;
+    }
+    /* CHECKBOX */
+    input.checkbox,
+    input.radio,
+    input.toggle {
+      @apply absolute inset-0 z-10 m-0 w-full h-full opacity-0 appearance-none;
+
+      ~ div {
+        @apply flex-1;
+      }
+    }
+
+    > *:not(input.checkbox, input.radio, input.toggle) {
+      @apply z-0;
+    }
+  }
+  &.input-line-through {
+    &:has(input:checked) {
+      .input-label {
+        @apply line-through opacity-50;
+      }
+    }
+  }
+  &.input-custom {
+    @apply relative p-0 surface hover:border-line-strong include-interactive;
+    input.checkbox,
+    input.radio {
+      @apply absolute inset-0 z-10 m-0 w-full h-full rounded-full opacity-0 appearance-none;
+
+      label {
+        @apply rounded-[inherit] overflow-hidden;
+      }
+
+      &:checked {
+        ~ label {
+          .input-content.is-checked {
+            @apply block;
+          }
+          .input-content.is-unchecked {
+            @apply hidden;
+          }
+        }
+      }
+      &:not(:checked) {
+        ~ label {
+          .input-content.is-checked {
+            @apply hidden;
+          }
+          .input-content.is-unchecked {
+            @apply block;
+          }
+        }
+      }
+    }
+  }
+}
+
+@utility checkbox {
+  @apply rounded-md checkboxradio text-brand-default;
+
+  &:checked,
+  &:checked ~ .checkbox {
+    @apply border-current
+    bg-[length:100%_auto]
+    bg-[linear-gradient(-45deg,transparent_65%,currentColor_65.99%),linear-gradient(45deg,transparent_75%,currentColor_75.99%),linear-gradient(-45deg,currentColor_40%,transparent_40.99%),linear-gradient(45deg,currentColor_30%,var(--color-core-white)_30.99%,var(--color-core-white)_40%,transparent_40.99%),linear-gradient(-45deg,var(--color-core-white)_50%,currentColor_50.99%)]
+    dark:bg-[linear-gradient(-45deg,transparent_65%,currentColor_65.99%),linear-gradient(45deg,transparent_75%,currentColor_75.99%),linear-gradient(-45deg,currentColor_40%,transparent_40.99%),linear-gradient(45deg,currentColor_30%,var(--color-core-black)_30.99%,var(--color-core-black)_40%,transparent_40.99%),linear-gradient(-45deg,var(--color-core-black)_50%,currentColor_50.99%)];
+  }
+
+  &:indeterminate,
+  &:indeterminate ~ .checkbox {
+    @apply border-current
+    bg-[length:100%_auto]
+    bg-[radial-gradient(circle_at_center,var(--color-core-white)_0%,var(--color-core-white)_17%,currentColor_17.5%,currentColor_100%)]
+    dark:bg-[radial-gradient(circle_at_center,var(--color-core-black)_0%,var(--color-core-black)_17%,currentColor_17.5%,currentColor_100%)];
+  }
+
+  /* GREEN VARIANT */
+  &.checkbox-green {
+    @apply rounded-full checked:border-text-success;
+
+    &:checked,
+    &:checked ~ .checkbox {
+      @apply bg-[length:100%_auto]
+        bg-[linear-gradient(-45deg,transparent_65%,var(--color-text-success)_65.99%),linear-gradient(45deg,transparent_75%,var(--color-text-success)_75.99%),linear-gradient(-45deg,var(--color-text-success)_40%,transparent_40.99%),linear-gradient(45deg,var(--color-text-success)_30%,var(--color-core-white)_30.99%,var(--color-core-white)_40%,transparent_40.99%),linear-gradient(-45deg,var(--color-core-white)_50%,var(--color-text-success)_50.99%)];
+    }
+
+    &:indeterminate,
+    &:indeterminate ~ .checkbox {
+      @apply bg-[radial-gradient(circle_at_center,var(--color-core-white)_0%,var(--color-core-white)_17%,var(--color-text-success)_17.01%,var(--color-text-success)_100%)];
+    }
+  }
+}
+
+@utility radio {
+  @apply rounded-full checkboxradio text-brand-default;
+
+  &:checked,
+  &:checked ~ .radio {
+    @apply border-current
+    bg-[length:100%_auto] 
+    bg-[radial-gradient(circle_at_center,var(--color-core-white)_0%,var(--color-core-white)_40%,currentColor_40.5%,currentColor_100%)]
+    dark:bg-[radial-gradient(circle_at_center,var(--color-core-black)_0%,var(--color-core-black)_40%,currentColor_40.5%,currentColor_100%)];
+  }
+
+  /* &:indeterminate,
+  &:indeterminate ~ .radio {
+  } */
+}
+
+@utility toggle {
+  --toggle-size: 20px;
+  --toggle-size-minus: -20px;
+  --toggle-color-unchecked: var(--color-core-ui-400);
+  --toggle-color-unchecked-dark: var(--color-core-ui-500);
+  @apply flex-shrink-0
+  h-(--toggle-size)
+  w-[calc(var(--toggle-size)*2)]
+  appearance-none
+  bg-core-white
+  dark:bg-core-black
+  shadow-[inset_var(--toggle-size-minus)_0_0_2px_var(--toggle-color-unchecked),_inset_0_0_0_2px_var(--toggle-color-unchecked)]
+  dark:shadow-[inset_var(--toggle-size-minus)_0_0_2px_var(--toggle-color-unchecked-dark),_inset_0_0_0_2px_var(--toggle-color-unchecked-dark)]
+  rounded-full
+  transition-[box-shadow,background]
+  duration-200
+  ease-out-quint
+  cursor-pointer
+  include-focus-visible
+  text-brand-default;
+
+  &:disabled,
+  &.is-disabled {
+    @apply bg-core-ui-300 dark:bg-core-ui-700;
+    &,
+    & ~ div label {
+      @apply opacity-60 cursor-not-allowed;
+    }
+  }
+
+  &.input-sm {
+    --toggle-size: 14px;
+    --toggle-size-minus: -14px;
+  }
+
+  &.input-lg {
+    --toggle-size: 26px;
+    --toggle-size-minus: -26px;
+  }
+
+  &:checked,
+  &:checked ~ .toggle {
+    @apply dark:shadow-[inset_var(--toggle-size)_0_0_2px_currentColor,_inset_0_0_0_2px_currentColor]
+    dark:hover:shadow-[inset_var(--toggle-size)_0_0_2px_currentColor,_inset_0_0_0_2px_currentColor]
+    shadow-[inset_var(--toggle-size)_0_0_2px_currentColor,_inset_0_0_0_2px_currentColor]
+    hover:shadow-[inset_var(--toggle-size)_0_0_2px_currentColor,_inset_0_0_0_2px_currentColor];
+  }
+}
+
+@utility input-card {
+  @apply relative gap-3 p-3 rounded-lg surface;
+
+  &:has(input.checkbox:checked, input.radio:checked, input.toggle:checked) {
+    @apply border-brand-default;
+    .input-label {
+      @apply text-brand-default;
+    }
+    .surface-elevated {
+      @apply bg-brand-default border-brand-default text-core-white dark:text-core-black;
+    }
+  }
+
+  > .input-wrapper {
+    @apply w-auto;
+  }
+}
+
+@utility input-content {
+  @apply flex flex-col;
+}

package/styles/form-fileupload.css

@@ -0,0 +1,146 @@
+@import "tailwindcss";
+
+/*----------------------------*/
+/* FILE UPLOAD */
+/*----------------------------*/
+
+@utility file-upload {
+  @apply w-full;
+
+  /* Dropzone */
+  .file-upload-dropzone {
+    @apply relative flex flex-col items-center min-h-56 justify-center rounded-2xl p-4 gap-2 text-center cursor-pointer transition-colors duration-200 surface-placeholder surface-interactive-placeholder;
+
+    /* States */
+    &.is-drag-accept {
+      @apply border-line-brand bg-background-brand;
+    }
+
+    &.is-drag-reject {
+      @apply border-line-error bg-background-error;
+    }
+
+    &.is-drag-active {
+      @apply border-line-default bg-background-surface;
+    }
+
+    /* Uploaded state */
+    &.is-uploaded {
+      @apply surface-success;
+
+      .file-upload-icon-idle {
+        @apply -translate-y-full;
+      }
+
+      .file-upload-icon-success {
+        @apply translate-y-0;
+      }
+    }
+
+    /* Error state */
+    &.has-error {
+      @apply surface-error;
+      .file-upload-icon-idle {
+        @apply -translate-y-full;
+      }
+
+      .file-upload-icon-error {
+        @apply translate-y-0;
+      }
+
+      .file-upload-text {
+        @apply text-text-error;
+      }
+    }
+
+    /* Uploading state */
+    &.is-uploading {
+      .file-upload-progress {
+        @apply h-12 opacity-100 translate-y-0;
+      }
+    }
+  }
+
+  /* Icon container */
+  .file-upload-icon {
+    @apply flex overflow-hidden relative justify-center items-center mx-auto w-12 h-12 text-text-disabled;
+
+    svg {
+      @apply size-12;
+    }
+
+    .file-upload-icon-idle {
+      @apply text-text-disabled translate-y-0;
+    }
+
+    .file-upload-icon-success {
+      @apply text-background-success-active translate-y-full;
+    }
+
+    .file-upload-icon-error {
+      @apply text-background-error-active translate-y-full;
+    }
+
+    > * {
+      @apply transition-transform duration-1000 ease-in-out-quart absolute;
+    }
+  }
+
+  /* Text content */
+  .file-upload-text {
+    @apply mt-2 p2 text-text-secondary;
+  }
+
+  .file-upload-hint {
+    @apply mt-1 text-xs text-text-secondary;
+  }
+
+  /* Progress bar container */
+  .file-upload-progress {
+    @apply flex flex-col gap-2 justify-end items-stretch w-full h-0 transition-all duration-1000 ease-in-out-quart opacity-0 translate-y-full;
+    @apply mb-1 text-xs text-center text-text-secondary;
+  }
+
+  /* File list */
+  .file-upload-list {
+    @apply space-y-2 text-left mt-4;
+
+    .file-item {
+      @apply flex gap-2 items-center p-2 rounded-lg surface;
+
+      .file-info {
+        @apply flex-1 min-w-0;
+
+        .file-name {
+          @apply truncate text-sm font-medium;
+        }
+
+        .file-size {
+          @apply text-xs text-text-tertiary;
+        }
+      }
+    }
+  }
+
+  /* Image preview */
+  .file-upload-preview {
+    @apply relative w-full h-full min-h-56 rounded-xl overflow-hidden;
+
+    img {
+      @apply w-full h-full object-cover;
+    }
+  }
+
+  .file-upload-preview-overlay {
+    @apply absolute inset-0 bg-black/50 flex items-center justify-center p-4;
+  }
+
+  /* Adjust dropzone when preview is shown */
+  .file-upload-dropzone.has-preview {
+    @apply p-0 border-0;
+
+    .file-upload-progress {
+      @apply opacity-100 h-auto;
+    }
+  }
+}

package/styles/form-rangeslider.css

@@ -0,0 +1,106 @@
+@import "tailwindcss";
+
+/*----------------------------*/
+/* RANGE SLIDER */
+/*----------------------------*/
+
+@utility include-range-slider-track {
+  @apply w-full bg-line-highlight dark:bg-line-strong rounded-full h-[calc(var(--size))];
+}
+
+@utility include-range-slider-thumb {
+  @apply -mt-[calc(var(--size)/2)] appearance-none bg-background-brand rounded-full w-[calc(var(--size)*2)] h-[calc(var(--size)*2)];
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  box-shadow:
+    inset 0 0 0 calc(var(--size) / 2) var(--color-bar),
+    inset 0 0 0 calc(var(--size)) var(--color-thumb),
+    inset 0 0 0 1000rem var(--color-bar),
+    calc(100rem * -1 - calc(var(--size))) 0 0 100rem var(--color-bar);
+}
+
+@utility range-slider {
+  --color-bar: currentColor;
+  --color-thumb: light-dark(var(--color-core-white), var(--color-core-black));
+  --size: 8px;
+  @apply block
+  w-full
+  appearance-none
+  bg-transparent
+  overflow-hidden
+  disabled:opacity-50
+  disabled:pointer-events-none
+  text-brand-default
+  h-[calc(var(--size)*2)]
+  outline-offset-4
+  rounded-full
+  cursor-pointer;
+  &:focus-visible {
+    @apply outline-1 outline-line-focus outline-dashed;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @apply include-range-slider-track;
+  }
+  &::-moz-range-track {
+    @apply include-range-slider-track;
+  }
+
+  &::-webkit-slider-thumb {
+    @apply include-range-slider-thumb;
+  }
+  &::-moz-range-thumb {
+    @apply include-range-slider-thumb;
+  }
+
+  ~ .range-slider-ticks {
+    @apply mt-2;
+  }
+
+  &.range-xs {
+    --size: 4px;
+    ~ .range-slider-ticks > i {
+      @apply h-1;
+    }
+  }
+
+  &.range-sm {
+    --size: 6px;
+    ~ .range-slider-ticks > i {
+      @apply h-1.5;
+    }
+  }
+
+  &.range-md {
+    --size: 8px;
+    ~ .range-slider-ticks > i {
+      @apply h-2;
+    }
+  }
+
+  &.range-lg {
+    --size: 10px;
+    ~ .range-slider-ticks > i {
+      @apply h-2.5;
+    }
+  }
+
+  &.range-xl {
+    --size: 12px;
+    ~ .range-slider-ticks > i {
+      @apply h-3;
+    }
+  }
+}
+
+input[type="range"] {
+  @apply range-slider;
+}
+
+@utility range-slider-ticks {
+  @apply flex justify-between items-stretch;
+  > i {
+    @apply w-px h-4 bg-line-highlight;
+  }
+}

package/styles/form-shared.css

@@ -0,0 +1,41 @@
+@import "tailwindcss";
+
+/*----------------------------*/
+/* FORM */
+/*----------------------------*/
+
+@utility input-label {
+  @apply text-sm font-normal select-none;
+
+  &:is(label) {
+    @apply cursor-pointer;
+  }
+
+  small {
+    @apply text-xs font-light;
+  }
+}
+
+@utility input-state {
+  @apply inline-block px-2 py-1 text-xs rounded;
+}
+
+@utility input-error {
+  @apply my-1 input-state surface-error;
+}
+
+@utility input-success {
+  @apply input-state surface-success;
+}
+
+@utility input-info {
+  @apply input-state surface-info;
+}
+
+@utility input-warning {
+  @apply input-state surface-warning;
+}
+
+@utility input-attention {
+  @apply input-state surface-attention;
+}