twntyx-css 1.0.0

package/styles/button.css

@@ -0,0 +1,621 @@
+/*----------------------------*/
+/* BUTTON */
+/*----------------------------*/
+
+@utility button-base {
+  @apply include-interactive
+  relative
+  min-w-fit
+  min-h-11
+  inline-flex
+  items-center
+  leading-none
+  whitespace-nowrap
+  justify-center
+  font-semibold
+  gap-2
+  rounded-full
+  [&>span:not(.button-icon)]:gap-2
+  *:shrink-0
+  [&>span:not(.button-icon)]:flex
+  [&>span:not(.button-icon)]:items-center
+  [&_svg]:size-5
+  [&_svg]:aspect-square
+  [&_svg]:fill-current
+  [&_svg]:shrink-0
+  cursor-pointer
+  select-none
+  active:*:translate-y-0.5;
+
+  &:not(.button-sm) {
+    @apply text-sm 
+    h-11
+    min-w-11
+    min-h-11 
+    [&>span:not(.button-icon)]:gap-1.5 
+    px-4 
+    [&>.button-icon]:size-5 
+    [&_svg]:size-5 
+    [&.button-icon]:min-w-11
+    [&.button-icon]:px-0;
+  }
+
+  &:has(.avatar:first-child) {
+    @apply !pl-1;
+  }
+
+  &.is-loading,
+  &.is-charging {
+    &::after {
+      @apply content-[''] 
+      loader-base 
+      loader-xs 
+      absolute;
+    }
+    > span {
+      @apply opacity-0;
+    }
+  }
+
+  &.is-charging {
+    @apply !w-11 
+    !px-0
+    !max-w-11
+    !min-w-11
+    !ease-in-out 
+    hover:!transition-[border-color,background-color,width,min-width,max-width] 
+    !transition-[border-color,background-color,width,min-width,max-width];
+  }
+  &.is-charging-done {
+    @apply w-auto 
+    !duration-200 
+    !ease-in-out 
+    hover:!transition-[border-color,background-color,width] 
+    !transition-[border-color,background-color,width];
+    &::after {
+      @apply content-[''] 
+      absolute 
+      z-0 
+      size-16 
+      aspect-square 
+      rounded-full 
+      border 
+      border-line-default 
+      animate-ripple-out;
+    }
+  }
+
+  &.has-badge > span,
+  > span.has-badge {
+    @apply relative;
+    &::after {
+      @apply content-[''] absolute bg-background-brand -top-0.5 -right-1.5 rounded-full size-1.5 animate-scale-in;
+    }
+  }
+
+  &.is-disabled,
+  &.is-loading,
+  &.is-charging,
+  &[disabled] {
+    @apply cursor-not-allowed shadow-none! active:*:translate-y-0 *:drop-shadow-none!;
+    &,
+    &:hover,
+    &:active {
+      @apply outline-line-default/0 brightness-100! scale-100!;
+      &::after {
+        @apply dark:inverted;
+      }
+    }
+    &.button-primary {
+     &,
+      &:hover,
+      &:active {
+        @apply bg-none text-shadow-none bg-core-ui-100 dark:bg-core-ui-800 text-text-secondary/75 border-line-default;
+      }
+    }
+    &.button-secondary {
+      &,
+      &:hover,
+      &:active {
+        @apply bg-none text-shadow-none bg-core-ui-100 dark:bg-core-ui-800 text-text-secondary/75 border-line-default;
+      }
+    }
+    &.button-plain {
+      &,
+      &:hover,
+      &:active {
+        @apply underline bg-transparent text-text-secondary/75;
+      }
+    }
+    &.button-destructive {
+      &,
+      &:hover,
+      &:active {
+        @apply bg-none text-shadow-none bg-core-ui-100 dark:bg-core-ui-800 text-text-secondary/75 border-line-default;
+      }
+    }
+  }
+
+  > .avatar {
+    > div {
+      @apply size-9;
+    }
+  }
+}
+
+@utility button {
+  @apply button-base 
+  [&:has(>svg:only-child:last-child:first-child)]:px-0
+  [&:has(.button-icon:only-child:last-child:first-child)]:px-0;
+
+  /* VARIANTS */
+  &.button-primary {
+    @apply
+    surface-interactive-brand
+    ;
+
+    &.is-active {
+      @apply text-text-default bg-background-brand-active;
+    }
+  }
+
+  /* Text feedback */
+  &[data-feedback]:not([data-feedback=""]):not([data-feedback-icon]) {
+    @apply overflow-hidden;
+
+    &::before {
+      @apply content-[attr(data-feedback)] absolute inset-x-0 text-center;
+      animation: button-feedback-message 4s cubic-bezier(0.9, 0, 0, 1) forwards;
+    }
+
+    > * {
+      animation: button-feedback-label 4s cubic-bezier(1, 0, 0, 0.9) forwards;
+    }
+  }
+
+  /* Icon feedback */
+  &[data-feedback][data-feedback-icon]:not([data-feedback=""]) {
+    @apply relative;
+
+    &::before {
+      @apply content-[attr(data-feedback)] absolute text-center pointer-events-none leading-none max-w-[20rem] w-max tooltip;
+      inset-inline-start: 50%;
+      bottom: 100%;
+      transform: translate(-50%, 0.125rem);
+      animation: button-feedback-tooltip 4s cubic-bezier(0.9, 0, 0, 1) forwards;
+    }
+
+    &::after {
+      @apply content-[''] absolute size-6 aspect-square text-center bg-current mask-close;
+      animation: button-feedback-icon 4s cubic-bezier(0.9, 0, 0, 1) forwards;
+    }
+
+    > * {
+      animation: button-feedback-icon-label 4s cubic-bezier(1, 0, 0, 0.9) forwards;
+    }
+
+    /* Success variant */
+    &[data-feedback-icon="success"] {
+      &::after {
+        @apply mask-check;
+      }
+      &.button-secondary,
+      &.button-plain,
+      &.button-destructive {
+        &::after {
+          @apply text-text-success;
+        }
+      }
+    }
+
+    /* Error variant */
+    &[data-feedback-icon="error"] {
+      &::after {
+        @apply mask-close;
+      }
+      &.button-secondary,
+      &.button-plain,
+      &.button-destructive {
+        &::after {
+          @apply text-text-error;
+        }
+      }
+    }
+
+    /* Attention variant */
+    &[data-feedback-icon="attention"] {
+      &::after {
+        @apply mask-exclamation;
+      }
+      &.button-secondary,
+      &.button-plain,
+      &.button-destructive {
+        &::after {
+          @apply text-text-attention;
+        }
+      }
+    }
+  }
+
+  /* Hide feedback when empty */
+  &[data-feedback=""] {
+    &::before,
+    &::after {
+      @apply hidden;
+    }
+  }
+
+  /* Icon-only feedback */
+  &[data-feedback="."] {
+    &::before {
+      @apply hidden;
+    }
+  }
+}
+
+@utility button-secondary {
+  @apply include-border-secondary text-text-default bg-background-surface;
+  &.is-active {
+    @apply bg-core-black 
+    text-core-white 
+    border-core-black!
+    hover:bg-core-black 
+    active:bg-core-black 
+    hover:text-core-white 
+    active:text-core-white;
+  }
+}
+
+@utility button-tertiary {
+  @apply bg-text-default hover:bg-text-secondary active:bg-text-tertiary text-background-surface;
+
+  &.is-active {
+    @apply bg-text-tertiary;
+  }
+}
+
+@utility button-plain {
+  @apply underline text-text-brand;
+  /* > * {
+    @apply relative;
+    &::before {
+      @apply content-[''] h-px w-full absolute inset-x-0 bottom-0 bg-text-brand translate-y-1 opacity-0 pointer-events-none;
+    }
+  } */
+  &:hover {
+    @apply text-brand-strong;
+    /* > * {
+      &::before {
+        @apply bg-text-brand-hover;
+      }
+    } */
+  }
+  &.is-active,
+  &:active {
+    @apply no-underline bg-brand-default/10;
+    > * {
+      &::before {
+        @apply bg-text-brand-active;
+      }
+    }
+  }
+  &.is-active,
+  &:hover,
+  &:active {
+    > * {
+      &::before {
+        @apply opacity-100 translate-y-0;
+      }
+    }
+  }
+}
+
+@utility button-destructive {
+  @apply border backdrop-blur include-border-destructive bg-background-error border-line-error hover:border-line-error text-text-error active:bg-background-surface-elevated;
+
+  &.is-active {
+    @apply bg-background-surface-elevated;
+  }
+}
+
+@utility button-discreet {
+  @apply border text-text-tertiary border-line-default/0 disabled:border-line-default;
+
+  &.is-active,
+  &:hover,
+  &:active {
+    @apply border-line-strong text-text-default;
+  }
+}
+
+@utility button-menu {
+  @apply include-interactive text-text-default include-hover-primary;
+}
+
+/* Close */
+.button.button-close,
+.button-close {
+   --close-size: 2.75rem;
+  @apply size-(--close-size) min-w-(--close-size) min-h-(--close-size) p-0 text-transparent! rounded-full transition-transform duration-300 hover:rotate-90 ease-out-quint;
+
+  > span {
+    @apply opacity-0 pointer-events-none;
+  }
+
+  &::before {
+    @apply w-[calc(var(--close-size)-2px)] h-[calc(var(--close-size)-2px)];
+  }
+  
+  &.button-xs {
+    --close-size:1.25rem;
+  }
+  &.button-sm {
+    --close-size:1.75rem;
+  }
+  &.button-lg {
+    --close-size:3.5rem;
+  }
+
+  &.button-primary {
+    &::before {
+      @apply bg-text-inverted;
+    }
+  }
+  &.button-secondary {
+    &::before {
+      @apply bg-text-default;
+    }
+  }
+  &.button-plain {
+    &::before {
+      @apply bg-text-brand;
+    }
+    &:hover::before {
+      @apply bg-brand-strong;
+    }
+  }
+  &.button-destructive {
+    &::before {
+      @apply bg-text-error;
+    }
+  }
+
+  &::before {
+    @apply content-['']
+    absolute
+    block
+    left-1/2
+    top-1/2
+    -translate-x-1/2
+    -translate-y-1/2
+    transform-gpu
+    mask-close;
+  }
+
+  &:not([disabled]),
+  &:not(.is-disabled) {
+    &:hover,
+    &:focus-visible {
+      > .icon {
+        @apply scale-100;
+      }
+    }
+  }
+}
+
+
+  /* SIZES */
+.button-xs {
+  @apply text-xs
+  min-w-5
+  min-h-5
+  h-5
+  px-2
+  gap-1
+  [&>span:not(.button-icon)]:gap-1
+  [&>.button-icon]:size-4
+  [&:has(svg:only-child)]:px-0;
+}
+
+.button-sm {
+  @apply text-sm
+  min-w-8
+  min-h-8
+  h-8
+  px-3
+  gap-1
+  [&>span:not(.button-icon)]:gap-1
+  [&>.button-icon]:size-5
+  [&:has(svg:only-child)]:px-0;
+}
+
+.button-lg {
+  @apply text-base 
+  min-w-14 
+  min-h-14 
+  [&>span:not(.button-icon)]:gap-2 
+  [&>.button-icon]:size-6 
+  [&:has(svg:only-child)]:px-[15px];
+}
+
+/* WIDTH MODIFIERS */
+.button-wide {
+  @apply px-10;
+
+  &.button-sm {
+    @apply px-8;
+  }
+
+  &.button-lg {
+    @apply px-16;
+  }
+}
+
+.button-block {
+  @apply w-full;
+}
+
+.button-sso {
+  @apply include-border-secondary text-text-default bg-background-surface;
+
+  > span:not(.button-icon),
+  > span:not(.button-icon) > span {
+    @apply flex-1 justify-center text-center;
+  }
+
+  svg {
+    @apply size-5;
+  }
+}
+
+
+/* Button input */
+.button {
+  &:is(input[type="checkbox"]),
+  &:is(input[type="radio"]) {
+    @apply appearance-none;
+    &::after {
+      @apply content-[attr(aria-label)];
+    }
+
+    &.button-primary {
+      &:checked {
+        @apply bg-background-inverted border-background-inverted bg-none text-shadow-none shadow-none!;
+        
+        *, &::before, &::after {
+          @apply drop-shadow-none!;
+        }
+        &::after {
+          @apply text-text-inverted;
+        }
+      }
+    }
+
+    &.button-secondary {
+      &:checked {
+        @apply surface-brand;
+
+        *, &::before, &::after {
+          @apply drop-shadow-none!;
+        }
+      }
+    }
+  }
+}
+
+.join > .button.button-plain,
+.button.button-plain:is(input[type="checkbox"]),
+.button.button-plain:is(input[type="radio"]) {
+  @apply no-underline include-border-secondary text-text-default;
+  &:checked {
+     @apply bg-background-inverted border-background-inverted bg-none text-shadow-none;
+    &::after {
+      @apply text-text-inverted;
+    }
+  }
+}
+
+/* Animations */
+@keyframes button-feedback-message {
+  0% {
+    transform: translateY(3rem);
+    opacity: 0;
+  }
+  10% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  90% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(3rem);
+    opacity: 0;
+  }
+}
+
+@keyframes button-feedback-tooltip {
+  0% {
+    transform: translate(-50%, -0.1rem);
+    opacity: 0;
+  }
+  10% {
+    transform: translate(-50%, -0.35rem);
+    opacity: 1;
+  }
+  90% {
+    transform: translate(-50%, -0.35rem);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -0.1rem);
+    opacity: 0;
+  }
+}
+
+@keyframes button-feedback-label {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  10% {
+    transform: translateY(-3rem);
+    opacity: 0;
+  }
+  90% {
+    transform: translateY(-3rem);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes button-feedback-icon {
+  0% {
+    transform: scale(0) rotate(45deg);
+    opacity: 0;
+  }
+  10% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+  90% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(45deg);
+    opacity: 0;
+  }
+}
+
+@keyframes button-feedback-icon-label {
+  0% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+  10% {
+    transform: scale(0) rotate(-45deg);
+    opacity: 0;
+  }
+  90% {
+    transform: scale(0) rotate(-45deg);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+}
+
+@utility button-container {
+  @apply inline-flex
+  items-center
+  bg-[rgba(16,16,28,0.40)]
+  shadow-[0_0_1px_0_rgba(255,255,255,0.25)]
+  p-[3px]
+  rounded-[calc(1.5rem+3px)];
+}

package/styles/card.css

@@ -0,0 +1,27 @@
+/*----------------------------*/
+/* CARD */
+/*----------------------------*/
+
+@utility card {
+  &:not([class*="rounded"]) {
+    @apply rounded-3xl;
+  }
+
+  @apply border bg-background-surface border-line-default;
+
+   :where(figure:first-child) {
+    @apply overflow-hidden rounded-ss-[inherit] rounded-se-[inherit];
+  }
+}
+
+@utility card-body {
+  @apply flex flex-col flex-1 gap-4 p-4;
+}
+
+@utility card-actions {
+  @apply flex flex-wrap gap-4 items-start;
+}
+
+@utility card-interactive {
+  @apply [&:has(.button:hover)]:border-line-strong hover:transition-[border-color] transition-[border-color] include-transition;
+}

package/styles/chart-pie.css

@@ -0,0 +1,39 @@
+/*----------------------------*/
+/* PIE */
+/*----------------------------*/
+@property --pie-progress {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@utility chart-pie {
+  --width: 50;
+  @apply relative overflow-clip rounded-full aspect-square text-brand-default;
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--width) * 1%), #fff 0);
+  transform: rotate(calc(var(--start) * 3.6deg));
+
+  > span {
+    @apply absolute inset-0;
+    background: conic-gradient(currentColor calc(var(--progress) * 1%), transparent 0);
+  }
+  &::before {
+    @apply content-[''] absolute inset-0 rounded-full bg-line-default;
+  }
+
+  &.chart-animate {
+    > span {
+      animation: chart-pie-animate 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
+      background: conic-gradient(currentColor var(--pie-progress), transparent 0);
+    }
+  }
+}
+
+@keyframes chart-pie-animate {
+  from {
+    --pie-progress: 0%;
+  }
+  to {
+    --pie-progress: calc(var(--progress) * 1%);
+  }
+}