twntyx-css 1.0.0

package/styles/stepper.css

@@ -0,0 +1,72 @@
+/*----------------------------*/
+/* STEPPER */
+/*----------------------------*/
+
+.stepper {
+  @apply
+  leading-[0]
+  inline-flex
+  items-baseline
+  ;
+  > span {
+    @apply
+    h-4
+    leading-none
+    inline-block
+    overflow-y-hidden
+    mx-auto
+    ;
+    &::before {
+      @apply
+      relative
+      content-["1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a_0\a_1\a_2\a_3\a_4\a_5\a_6\a_7\a_8\a_9\a"]
+      whitespace-pre
+      text-center
+      transition-all
+      duration-1000
+      top-0
+      ease-[cubic-bezier(0.9,0,0.1,1)]
+      animate-[stepper_5s_cubic-bezier(0.9,0,0.1,1)_both]
+      block
+      ;
+    }
+    &:nth-last-child(1)::before {
+      animation-duration: 2s;
+    }
+    &:nth-last-child(2)::before {
+      animation-duration: 2.5s;
+    }
+    &:nth-last-child(3)::before {
+      animation-duration: 3s;
+    }
+    &:nth-last-child(4)::before {
+      animation-duration: 3.5s;
+    }
+    &:nth-last-child(5)::before {
+      animation-duration: 4s;
+    }
+    &:nth-last-child(6)::before {
+      animation-duration: 4.5s;
+    }
+    &:nth-last-child(7)::before {
+      animation-duration: 5s;
+    }
+    &:nth-last-child(8)::before {
+      animation-duration: 5.5s;
+    }
+    &:nth-last-child(9)::before {
+      animation-duration: 6s;
+    }
+    &:nth-last-child(10)::before {
+      animation-duration: 6.5s;
+    }
+  }
+}
+@keyframes stepper {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(calc(-8.95em + (var(--value) * -1em)));
+  }
+}

package/styles/steps.css

@@ -0,0 +1,98 @@
+/*----------------------------*/
+/* STEPS */
+/*----------------------------*/
+
+@utility steps {
+  --size: 2.5rem;
+  --width: 2px;
+  @apply inline-grid overflow-hidden overflow-x-auto grid-flow-col;
+  counter-reset: step;
+  grid-auto-columns: 1fr;
+
+  li {
+    @apply grid grid-cols-1 grid-rows-2 place-items-center text-center gap-2 min-w-[4rem] relative text-text-default text-sm;
+
+    &,
+    &::before,
+    &::after {
+      @apply transition-colors include-transition;
+    }
+
+    /* Step number */
+    &::before {
+      @apply content-[counter(step)] surface-brand grid place-content-center size-(--size) font-bold rounded-full border text-text-inverted text-shadow-xs text-shadow-brand-strong/50;
+      counter-increment: step;
+    }
+
+    /* Connector line */
+    &:not(:last-child)::after {
+      @apply content-[''] absolute top-[calc((var(--size)/2)+(var(--width)))] md:top-[calc((var(--size)/2)-(var(--width)/2))] left-[calc(50%+(var(--size)/2))] w-full h-(--width) bg-brand-default;
+    }
+
+    > span {
+      @apply block w-full text-center text-balance;
+    }
+  }
+
+  li.is-active {
+    @apply font-medium text-text-default;
+
+    &::after {
+      @apply bg-line-default;
+    }
+
+    ~ li {
+      @apply text-text-tertiary;
+      &::before {
+        @apply bg-line-default from-line-default to-line-default shadow-none border-line-default text-text-tertiary;
+      }
+      &::after {
+        @apply bg-line-default;
+      }
+    }
+  }
+
+  &:not(:has(.is-active)) {
+    @apply text-text-tertiary;
+    li {
+      @apply text-text-tertiary;
+
+      &::before {
+        @apply bg-line-default from-line-default to-line-default shadow-none border-line-default text-text-tertiary;
+      }
+      &::after {
+        @apply bg-line-default;
+      }
+    }
+  }
+}
+
+/* Vertical variant */
+@utility steps-vertical {
+  @apply grid-flow-row gap-8 justify-start;
+  grid-auto-rows: auto;
+
+  li {
+    @apply grid-cols-[auto,1fr] grid-rows-1 text-left;
+
+    &:not(:last-child)::after {
+      @apply absolute left-[calc((var(--size)/2)-var(--width)/2)] top-[150%] h-full w-(--width) -translate-y-1/2;
+    }
+
+    > span {
+      @apply text-left;
+    }
+  }
+}
+
+/* Size variants */
+@utility steps-sm {
+  --size: 2rem;
+  --width: 2px;
+  @apply text-sm;
+}
+
+@utility steps-lg {
+  --size: 4rem;
+  --width: 2px;
+}

package/styles/surface.css

@@ -0,0 +1,252 @@
+/*----------------------------*/
+/* SURFACE */
+/*----------------------------*/
+
+/* Base Surface */
+@utility surface {
+  @apply
+  border
+  bg-background-surface
+  border-line-default;
+}
+
+/* Surface Variants */
+@utility surface-placeholder {
+  @apply
+  border
+  border-dashed
+  bg-background-page
+  border-line-highlight
+  text-text-tertiary;
+}
+
+@utility surface-elevated {
+  @apply
+  border
+  bg-background-surface-elevated
+  border-line-hover/30
+  shadow-[inset_0_-2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_-4px_4px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
+  inset-shadow-white/80
+  dark:inset-shadow-white/5;
+}
+
+@utility surface-sunken {
+  @apply border
+  bg-background-surface-sunken
+  border-line-strong/35
+  shadow-[inset_0_2px_2px_color-mix(in_srgb,var(--tw-inset-shadow-color)_100%,transparent),inset_0_4px_4px_color-mix(in_srgb,var(--tw-inset-shadow-color)_25%,transparent)]
+  inset-shadow-black/5
+  dark:inset-shadow-black/40
+  ;
+}
+
+@utility surface-highlighted {
+  @apply border bg-background-surface border-line-strong;
+}
+
+/* Brand Surfaces */
+@utility surface-brand {
+  @apply 
+  text-text-inverted
+  bg-linear-to-b
+  via-75%
+  from-[0.5rem]
+  to-[calc(100%-0.5rem)]
+  from-brand-default
+  to-brand-moderate
+  dark:from-brand-moderate
+  dark:to-brand-default
+  /* dark:from-brand-default
+  dark:via-brand-moderate
+  dark:to-brand-default */
+  border
+  border-brand-default
+  /* bg-size-[100%_calc(100%+0.5rem)]
+  bg-repeat
+  bg-position-[50%_calc(50%-0.5rem)] */
+  
+  /* dark:*:drop-shadow-[0_-1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_-1px_1px_var(--tw-drop-shadow-color),0_-1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)] */
+  
+  /* text-shadow-2xs
+  text-shadow-brand-strong/50 */
+  transition-[background-position,brightness]
+  shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)]
+  dark:shadow-[inset_0_1px_0.5px_0_color-mix(in_srgb,var(--color-brand-soft)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-white)_50%,transparent)]
+  /* dark:shadow-[inset_0_-1px_0.5px_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0.5px_0_color-mix(in_srgb,var(--color-brand-default)_50%,transparent)] */
+  duration-75
+  ease-out-cubic
+    ;
+
+    > *, &::before, &::after {
+      @apply
+      drop-shadow-[0_1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),0_1px_1px_color-mix(in_srgb,var(--tw-drop-shadow-color)_100%,transparent),0_1px_2px_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent)]
+      dark:drop-shadow-[0_-1px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_10%,transparent)]
+      drop-shadow-brand-strong/50
+      ;
+    }
+}
+
+/* Status Surfaces */
+@utility surface-success {
+  @apply border bg-background-success border-line-success text-text-success;
+}
+
+@utility surface-error {
+  @apply border bg-background-error border-line-error text-text-error;
+}
+
+@utility surface-warning {
+  @apply border bg-background-warning border-line-warning text-text-warning;
+}
+
+@utility surface-attention {
+  @apply border bg-background-attention border-line-attention text-text-attention;
+}
+
+@utility surface-info {
+  @apply border bg-background-info border-line-info text-text-info;
+}
+
+@utility surface-interactive-neutral {
+  @apply hover:bg-core-ui-200 dark:hover:bg-core-ui-600 hover:border-line-focus active:bg-background-surface active:border-line-strong;
+}
+
+@utility surface-interactive-placeholder {
+  @apply hover:bg-background-page hover:border-line-focus active:bg-background-page active:border-line-strong text-text-default;
+}
+
+@utility surface-interactive-success {
+  @apply hover:bg-background-success-active/20 hover:border-background-success-active/50 active:bg-background-success-active/10 active:border-line-success;
+}
+
+@utility surface-interactive-error {
+  @apply hover:bg-background-error-active/20 hover:border-background-error-active/50 active:bg-background-error-active/10 active:border-line-error;
+}
+
+@utility surface-interactive-warning {
+  @apply hover:bg-background-warning-active/20 hover:border-background-warning-active/50 active:bg-background-warning-active/10 active:border-line-warning;
+}
+
+@utility surface-interactive-attention {
+  @apply hover:bg-background-attention-active/20 hover:border-background-attention-active/50 active:bg-background-attention-active/10 active:border-line-attention;
+}
+
+@utility surface-interactive-info {
+  @apply hover:bg-background-info-active/20 hover:border-background-info-active/50 active:bg-background-info-active/10 active:border-line-info;
+}
+
+@utility surface-interactive-brand {
+  @apply 
+  surface-brand
+  hover:brightness-105
+  hover:border-brand-strong
+  active:border-brand-default
+  ;
+}
+
+@utility surface-interactive {
+    @apply cursor-pointer hover:transition-colors include-interactive;
+
+    /* Interactive states for base surface */
+    &.surface {
+      @apply surface-interactive-neutral;
+    }
+
+    /* Interactive states for placeholder surface */
+    &.surface-placeholder {
+      @apply surface-interactive-placeholder;
+    }
+
+    /* Interactive states for elevated surface */
+    &.surface-elevated {
+      @apply hover:bg-background-surface-elevated/90 hover:border-line-hover active:bg-background-surface-elevated/75 active:border-line-strong;
+    }
+
+    /* Interactive states for sunken surface */
+    &.surface-sunken {
+      @apply hover:bg-background-surface hover:border-line-hover active:bg-background-page active:border-line-strong;
+    }
+
+    /* Interactive states for brand surface */
+    &.surface-brand {
+      @apply surface-interactive-brand;
+    }
+
+    /* Interactive states for success surface */
+    &.surface-success {
+      @apply surface-interactive-success;
+    }
+
+    /* Interactive states for error surface */
+    &.surface-error {
+      @apply surface-interactive-error;
+    }
+
+    /* Interactive states for warning surface */
+    &.surface-warning {
+      @apply surface-interactive-warning;
+    }
+
+    /* Interactive states for attention surface */
+    &.surface-attention {
+      @apply surface-interactive-attention;
+    }
+
+  /* Interactive states for info surface */
+  &.surface-info {
+    @apply surface-interactive-info;
+  }
+}
+
+@utility surface-claim {
+  @apply
+  relative
+  overflow-clip
+  rounded-full
+  bg-brand-moderate! 
+  shadow-[inset_0_0_0_1px_var(--color-line-default)];
+
+  > *:not(.surface-claim_effect) {
+    @apply relative z-10;
+  }
+}
+
+@utility surface-claim_effect {
+  --claim-color-1: var(--color-brand-strong);
+  --claim-color-2: var(--color-brand-strong);
+  --claim-color-3: var(--color-text-inverted);
+  --claim-color-4: var(--color-text-inverted);
+
+  @apply 
+  absolute
+  z-0
+  -inset-1.5
+  rounded-full
+  bg-white/10
+  text-white
+  overflow-clip
+  pointer-events-none;
+
+  &::before {
+    @apply content-['']
+    absolute
+    -inset-4
+    rounded-full
+    blur-[2px]
+    opacity-80
+    animate-rotate;
+    animation-duration: 4s;
+    background: conic-gradient(
+      from 0deg,
+      var(--claim-color-1) 0%,
+      var(--claim-color-2) 12.5%,
+      var(--claim-color-3) 25%,
+      var(--claim-color-4) 37.5%,
+      var(--claim-color-3) 50%,
+      var(--claim-color-2) 62.5%,
+      var(--claim-color-1) 75%,
+      transparent 75%,
+      transparent 100%
+    );
+  }
+}

package/styles/tab.css

@@ -0,0 +1,286 @@
+/*----------------------------*/
+/* TAB */
+/*----------------------------*/
+
+/* Tab list container */
+@utility tab-list {
+  @apply flex gap-1 items-center;
+
+  /* Boxed variant needs a background */
+  &.tab-list-boxed {
+    @apply inline-flex rounded-xl;
+  }
+}
+
+/* Individual tab item */
+@utility tab-item {
+  @apply font-semibold inline-flex relative gap-2 justify-center items-center px-4 py-2 text-sm whitespace-nowrap rounded-lg cursor-pointer select-none hover:transition-colors text-text-tertiary include-focus-visible;
+
+  > span {
+    @apply flex;
+  }
+
+  /* Icon styling */
+  > svg {
+    @apply size-5 shrink-0;
+  }
+
+  /* Active state */
+  &.is-active {
+    @apply font-semibold text-text-brand;
+  }
+
+  &:not(.is-disabled),
+  &:not([disabled]) {
+    &:active {
+      > span {
+        @apply translate-y-0.5;
+      }
+    }
+  }
+
+  /* Disabled state */
+  &.is-disabled {
+    @apply opacity-50 cursor-not-allowed active:outline-transparent;
+  }
+
+  /* Default underline variant */
+  &:not(.tab-boxed) {
+    @apply rounded-lg;
+    /* Underline indicator */
+    &::after {
+      @apply content-['']
+      absolute
+      bottom-0
+      inset-x-0
+      h-0.5
+      bg-brand-default
+      rounded-full
+      transition-transform
+      include-transition
+      scale-x-0 
+      /* origin-right */;
+    }
+
+    &.is-active ~ .tab-item::after {
+      @apply origin-left;
+    }
+
+    &.is-active::after {
+      @apply scale-x-100;
+    }
+  }
+}
+
+/* Boxed variant */
+.tab-list-boxed > .tab-item,
+.tab-item.tab-boxed {
+  @apply rounded-full include-hover-primary;
+
+  &::after {
+    @apply hidden;
+  }
+
+  &.is-disabled,
+  &[disabled] {
+    &::before {
+      @apply hidden;
+    }
+  }
+
+  &.is-active {
+    @apply font-semibold include-hover-primary-active bg-background-surface text-text-brand;
+  }
+}
+
+/* Toggle variant */
+
+@utility tab-list-toggle {
+  @apply relative gap-0 w-full;
+
+  &:not([class*="rounded-"]) {
+    @apply rounded-md;
+  }
+
+  & > .tab-item,
+  &::after {
+    @apply rounded-[inherit];
+  }
+
+  & > .tab-item {
+    @apply relative z-10 flex-1 px-0 py-2;
+    &::after {
+      @apply hidden;
+    }
+  }
+
+  &::after {
+    @apply content-[''] absolute z-0 surface inset-y-0 transition-[left] duration-300 ease-out-quart shadow-sm;
+    width: calc(100% / var(--tab-count));
+    left: var(--tab-distance);
+  }
+
+  /* Count number of direct tab-item children using :has */
+  &:has(> .tab-item:first-child:nth-last-child(1)) {
+    --tab-count: 1;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(2)) {
+    --tab-count: 2;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(3)) {
+    --tab-count: 3;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(4)) {
+    --tab-count: 4;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(5)) {
+    --tab-count: 5;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(6)) {
+    --tab-count: 6;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(7)) {
+    --tab-count: 7;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(8)) {
+    --tab-count: 8;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(9)) {
+    --tab-count: 9;
+  }
+  &:has(> .tab-item:first-child:nth-last-child(10)) {
+    --tab-count: 10;
+  }
+
+  &:has(> .tab-item:nth-child(1).is-active) {
+    --tab-distance: 0;
+  }
+  &:has(> .tab-item:nth-child(2).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)));
+  }
+  &:has(> .tab-item:nth-child(3).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 2);
+  }
+  &:has(> .tab-item:nth-child(4).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 3);
+  }
+  &:has(> .tab-item:nth-child(5).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 4);
+  }
+  &:has(> .tab-item:nth-child(6).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 5);
+  }
+  &:has(> .tab-item:nth-child(7).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 6);
+  }
+  &:has(> .tab-item:nth-child(8).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 7);
+  }
+  &:has(> .tab-item:nth-child(9).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 8);
+  }
+  &:has(> .tab-item:nth-child(10).is-active) {
+    --tab-distance: calc((100% / var(--tab-count)) * 9);
+  }
+}
+
+/* Size variants */
+@utility tab-xs {
+  @apply gap-1 px-2 py-1 text-xs;
+  > svg {
+    @apply size-4;
+  }
+}
+
+@utility tab-sm {
+  @apply gap-1.5 px-3 py-1.5 text-sm;
+  > svg {
+    @apply size-[18px];
+  }
+}
+
+@utility tab-lg {
+  @apply gap-2 px-5 py-2.5 text-base;
+  > svg {
+    @apply size-6;
+  }
+}
+
+/* Roundness variants */
+@utility tab-rounded-none {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-none;
+    }
+  }
+}
+
+@utility tab-rounded-sm {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-sm;
+    }
+  }
+}
+
+@utility tab-rounded-md {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-md;
+    }
+  }
+}
+
+@utility tab-rounded-lg {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-lg;
+    }
+  }
+}
+
+@utility tab-rounded-xl {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-xl;
+    }
+  }
+}
+
+@utility tab-rounded-2xl {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-2xl;
+    }
+  }
+}
+
+@utility tab-rounded-full {
+  &,
+  & .tab-item {
+    &,
+    &::before {
+      @apply rounded-full;
+    }
+  }
+}
+
+/* Full width tabs */
+@utility tab-list-full {
+  @apply w-full;
+  .tab-item {
+    @apply flex-1;
+  }
+}