twntyx-css 1.0.0

package/styles/menu.css

@@ -0,0 +1,317 @@
+/*----------------------------*/
+/* MENU */
+/*----------------------------*/
+
+/* Base Menu */
+@utility menu {
+  @apply flex flex-col gap-1 text-sm;
+
+  /* Menu Items */
+
+  > li {
+    > * {
+      @apply font-medium text-left select-none;
+    }
+    ul {
+      @apply font-normal;
+    }
+  }
+
+  li {
+    @apply flex relative flex-col flex-wrap items-stretch shrink-0;
+
+    /* Default Link/Button Style */
+    > *:not(ul, details, .menu-title) {
+      @apply flex gap-2 items-center px-4 py-2 w-full max-w-full text-sm rounded cursor-pointer include-hover-primary include-interactive text-text-tertiary hover:text-text-default disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent;
+    
+      &:active {
+        > * {
+          @apply translate-y-px duration-0;
+        }
+      }
+    }
+
+    span {
+      @apply truncate min-w-fit;
+    }
+
+    > * {
+      &:has(svg:only-child) {
+        @apply px-2;
+      }
+      > *:not(svg, .avatar) {
+        @apply w-full;
+      }
+      svg {
+        @apply fill-current size-5;
+      }
+    }
+
+    :where(a, button) {
+      @apply include-interactive;
+    }
+
+    &.is-selected {
+      > *:not(ul, details, .menu-title) {
+        @apply include-hover-primary-hover;
+      }
+    }
+
+    /* Nested menus */
+    ul {
+      @apply relative pl-4;
+
+      /* Add vertical line for nested menus */
+      &:before {
+        @apply content-[''] absolute inset-y-3 left-3 w-px bg-line-default;
+      }
+    }
+
+    /* Details element for collapsible menu */
+    > details {
+      @apply w-full;
+
+      summary {
+        @apply flex gap-2 items-center px-4 py-2 text-sm list-none rounded cursor-pointer include-interactive text-text-default include-hover-primary;
+
+        &::after {
+          @apply shrink-0 content-[''] ml-auto opacity-50 transition-transform duration-150 ease-anticipate include-transition bg-text-secondary mask-carat text-text-secondary size-5 rotate-0;
+        }
+
+        > span {
+          @apply truncate;
+        }
+      }
+
+      &[open] > summary::after {
+        @apply rotate-180;
+      }
+    }
+
+    &.is-disabled > * {
+      @apply cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled active:outline-transparent;
+      &::before {
+        @apply hidden;
+      }
+    }
+
+    &.is-active > * {
+      @apply font-medium include-hover-primary-active text-text-brand hover:text-text-brand;
+    }
+
+    &:has(:focus-visible) > * {
+      @apply outline-line-brand;
+    }
+  }
+
+  li.menu-divider {
+    @apply w-full h-px bg-line-default;
+  }
+
+  summary {
+    &::marker,
+    &::-webkit-details-marker {
+      @apply hidden;
+    }
+  }
+
+  svg {
+    @apply shrink-0;
+  }
+}
+
+/* Menu Title */
+@utility menu-title {
+  @apply px-4 py-2 font-body font-medium text-text-secondary;
+}
+
+@utility menu-noline {
+  li {
+    > ul {
+      &:before {
+        @apply hidden;
+      }
+    }
+  }
+}
+
+/* Horizontal Menu */
+@utility menu-horizontal {
+  @apply flex-row items-center;
+
+  li {
+    @apply flex-row;
+
+    /* Adjust dropdown positioning for horizontal menu */
+    > details > ul {
+      @apply absolute left-0 top-full py-2 pr-2 pl-0 mt-4 rounded-2xl border min-w-48 bg-background-surface border-line-default shadow-elevation-low;
+
+      &:before {
+        content: none;
+      }
+    }
+  }
+}
+
+/* Sizes */
+@utility menu-xs {
+  @apply text-xs;
+  li {
+    > * {
+      &:not(ul, details, .menu-title),
+      details > summary {
+        @apply gap-1 px-2 py-1 text-xs;
+      }
+      &:has(svg:only-child) {
+        @apply px-1;
+      }
+      > svg {
+        @apply size-3.5;
+      }
+    }
+  }
+  .menu-title {
+    @apply px-2 py-1;
+  }
+  &.menu-check {
+    li.is-active > *::after {
+      @apply size-3;
+    }
+  }
+}
+
+@utility menu-sm {
+  @apply text-xs;
+  li {
+    > * {
+      &:not(ul, details, .menu-title),
+      details > summary {
+        @apply gap-1.5 px-3 py-1.5 text-xs;
+      }
+      &:has(svg:only-child) {
+        @apply px-1.5;
+      }
+      > svg {
+        @apply size-[18px];
+      }
+    }
+  }
+  .menu-title {
+    @apply px-3 py-1.5;
+  }
+  &.menu-check {
+    li.is-active > *::after {
+      @apply size-4;
+    }
+  }
+}
+
+@utility menu-lg {
+  @apply text-xs;
+  li {
+    > * {
+      &:not(ul, details, .menu-title),
+      details > summary {
+        @apply gap-3 px-5 py-3 text-xs;
+      }
+      &:has(svg:only-child) {
+        @apply px-3;
+      }
+      > svg {
+        @apply size-6;
+      }
+    }
+  }
+  .menu-title {
+    @apply px-5 py-3;
+  }
+  &.menu-check {
+    li.is-active > *::after {
+      @apply size-6;
+    }
+  }
+}
+
+/* Roundness modifiers */
+@utility menu-rounded-none {
+  li {
+    > *:not(ul, details, .menu-title),
+    details > summary {
+      &,
+      &::before {
+        @apply rounded-none;
+      }
+    }
+  }
+}
+
+@utility menu-rounded-sm {
+  li {
+    > *:not(ul, details, .menu-title),
+    details > summary {
+      &,
+      &::before {
+        @apply rounded-sm;
+      }
+    }
+  }
+}
+
+@utility menu-rounded-lg {
+  li {
+    > *:not(ul, details, .menu-title),
+    details > summary {
+      &,
+      &::before {
+        @apply rounded-lg;
+      }
+    }
+  }
+}
+
+@utility menu-rounded-full {
+  li {
+    > *:not(ul, details, .menu-title),
+    details > summary {
+      &,
+      &::before {
+        @apply rounded-full;
+      }
+    }
+  }
+}
+
+@utility menu-check {
+  li.is-active {
+    > * {
+      &::after {
+        @apply content-[''] bg-background-brand size-5 aspect-square mask-check mask;
+      }
+    }
+  }
+}
+/* 
+summary + div {
+  @apply
+  grid
+  overflow-hidden
+  transition-[grid-template-rows]
+  duration-500
+  ease-[cubic-bezier(.55,0,.15,1)]
+  
+  ;
+  @starting-style {
+    @apply
+    grid-rows-[0fr]
+    ;
+  }
+}
+
+
+details[open] summary + div {
+  @apply   
+  !grid-rows-[1fr]
+  [&>*>*>*]:scale-100
+  [&>*>*>*]:translate-y-0
+  ;
+} */

package/styles/modal.css

@@ -0,0 +1,172 @@
+/*----------------------------*/
+/* MODAL */
+/*----------------------------*/
+
+/* Prevent body scroll when modal is open */
+body {
+  &:has(dialog[open]) {
+    @apply overflow-hidden;
+  }
+
+  &:has(.demo dialog[open]) {
+    @apply overflow-visible;
+  }
+}
+
+/* Base dialog styles */
+dialog {
+  --transition-easing: cubic-bezier(0.7, 0, 0.1, 1);
+  --transition-duration: 0.25s;
+  overscroll-behavior: contain;
+
+  @apply fixed
+  inset-0
+  w-full
+  min-w-full
+  h-full
+  max-h-[100dvh]
+  m-0
+  p-0
+  border-0
+  bg-transparent
+  overflow-y-auto;
+
+  /* Animation properties */
+  display: none;
+  opacity: 0;
+  transform: scale(1);
+  transition-property: overlay display opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+  transition-behavior: allow-discrete;
+
+  /* Open state */
+  &[open] {
+    @apply block opacity-100;
+    transform: scale(1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  /* Backdrop styles */
+  &::backdrop {
+    @apply backdrop-blur-2xl bg-background-overlay;
+    transition-property: overlay display opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    transition-behavior: allow-discrete;
+  }
+}
+
+/* Modal container */
+.modal-container {
+  @apply flex flex-col flex-1 justify-center items-stretch p-2 m-auto w-full h-full md:p-4;
+
+  /* Width variants */
+  &.modal-sm {
+    > * {
+      @apply max-w-md md:w-full;
+    }
+  }
+
+  &.modal-md {
+    > * {
+      @apply max-w-xl xl:w-full;
+    }
+  }
+
+  &.modal-lg {
+    > * {
+      @apply max-w-3xl xl:w-full;
+    }
+  }
+
+  &.modal-xl {
+    > * {
+      @apply max-w-4xl xl:w-full;
+    }
+  }
+
+  &.modal-full {
+    > * {
+      @apply w-full max-w-full h-screen;
+    }
+    .modal-body.modal-body {
+      @apply p-0 pt-0;
+    }
+  }
+}
+
+/* Modal content wrapper */
+.modal {
+  @apply flex overflow-x-hidden relative z-50 flex-col items-stretch mx-auto w-full max-w-xl rounded-3xl border xl:w-full shadow-dark-xl bg-background-surface border-line-default;
+
+  /* Title section */
+  .modal-title {
+    @apply relative px-4 pt-2 bg-background-surface;
+
+    &:not(:has(~ .modal-stepper)) {
+      @apply pb-2 border-b border-line-default;
+    }
+
+    .modal-title-content {
+      @apply flex gap-2 justify-center items-center min-h-11;
+
+      h2 {
+        @apply flex-1 font-medium font-body text-left md:text-center;
+      }
+    }
+
+    .modal-close {
+      @apply float-right;
+      /* @apply md:absolute md:right-4; */
+    }
+  }
+
+  /* Stepper section */
+  .modal-stepper {
+    @apply px-4;
+  }
+
+  /* Body section */
+  .modal-body {
+    @apply relative z-10 grow px-4 pb-4;
+
+    &:not(:has(~ .modal-stepper)) {
+      @apply pt-4;
+    }
+    &:has(~ .modal-stepper) {
+      @apply pt-2;
+    }
+  }
+
+  /* Footer section */
+  .modal-footer {
+    @apply flex relative z-0 justify-end items-center px-4 pb-4 gap-4 bg-background-surface;
+
+    &:not(.no-border) {
+      @apply pt-4 border-t border-line-default;
+    }
+  }
+
+  &.modal-sticky-header {
+    .modal-title {
+      @apply sticky top-0 z-50;
+    }
+  }
+
+  &.modal-sticky-footer {
+    .modal-footer {
+      @apply sticky bottom-0 z-50;
+    }
+  }
+}
+
+.demo {
+  dialog {
+    @apply block relative opacity-100;
+  }
+}

package/styles/navbar.css

@@ -0,0 +1,48 @@
+/*----------------------------*/
+/* NAVBAR */
+/*----------------------------*/
+
+@utility navbar {
+  @apply w-full flex gap-3 items-center p-2 rounded-2xl border bg-background-surface border-line-default;
+
+  > :where(:first-child, .navbar-start) {
+    @apply flex flex-1 gap-2 items-center min-w-0;
+  }
+
+  > :where(:nth-child(2), .navbar-center) {
+    @apply flex gap-2 justify-center items-center;
+  }
+
+  > :where(:last-child, .navbar-end) {
+    @apply flex flex-1 gap-2 justify-end items-center min-w-0;
+  }
+
+  :where(a, button, .navbar-item) {
+    @apply inline-flex gap-2 items-center px-3 py-1.5 rounded-full text-sm include-interactive include-hover-primary text-text-secondary hover:text-text-default;
+
+    &.is-active {
+      @apply include-hover-primary-active text-text-brand;
+    }
+  }
+}
+
+/* Compatibility aliases */
+@utility navbar-start {
+  @apply flex flex-1 gap-2 items-center min-w-0;
+}
+
+@utility navbar-center {
+  @apply flex gap-2 justify-center items-center;
+}
+
+@utility navbar-end {
+  @apply flex flex-1 gap-2 justify-end items-center min-w-0;
+}
+
+@utility navbar-item {
+  @apply inline-flex gap-2 items-center px-3 py-1.5 rounded-full text-sm include-interactive include-hover-primary text-text-secondary hover:text-text-default;
+
+  &.is-active {
+    @apply include-hover-primary-active text-text-brand;
+  }
+}