twntyx-css 1.0.7 → 1.0.8

package/styles/colors.css

@@ -105,10 +105,10 @@
   --raw-color-core-green-50: rgb(242 250 247);
   --raw-color-core-green-100: rgb(230 246 239);
   --raw-color-core-green-200: rgb(205 239 225);
-  --raw-color-core-green-300: rgb(169 231 205);
+  --raw-color-core-green-300: hsl(155, 56%, 65%);
   --raw-color-core-green-400: rgb(126 223 182);
   --raw-color-core-green-500: rgb(79 216 159);
-  --raw-color-core-green-600: rgb(38 198 131);
+  --raw-color-core-green-600: #26c683;
   --raw-color-core-green-700: rgb(27 164 107);
   --raw-color-core-green-800: rgb(20 135 87);
   --raw-color-core-green-900: rgb(14 104 66);
@@ -131,7 +131,7 @@
   --raw-color-core-red-50: rgb(250 242 244);
   --raw-color-core-red-100: rgb(246 230 232);
   --raw-color-core-red-200: rgb(239 205 210);
-  --raw-color-core-red-300: rgb(231 169 178);
+  --raw-color-core-red-300: hsl(351, 56%, 80%);
   --raw-color-core-red-400: rgb(223 126 141);
   --raw-color-core-red-500: rgb(216 79 99);
   --raw-color-core-red-600: rgb(198 38 62);
@@ -243,6 +243,7 @@
   --raw-color-background-surface: var(--raw-color-core-white);
   --raw-color-background-surface-elevated: var(--raw-color-core-ui-50);
   --raw-color-background-surface-sunken: var(--raw-color-core-ui-200);
+  --raw-color-background-surface-sunken-darker: var(--raw-color-core-ui-300);
   --raw-color-background-overlay: color-mix(
     in srgb,
     var(--raw-color-core-ui-900) 95%,
@@ -255,6 +256,9 @@
   --raw-color-background-surface-dark: var(--raw-color-core-ui-800);
   --raw-color-background-surface-elevated-dark: var(--raw-color-core-ui-700);
   --raw-color-background-surface-sunken-dark: var(--raw-color-core-ui-900);
+  --raw-color-background-surface-sunken-darker-dark: var(
+    --raw-color-core-ui-800
+  );
   --raw-color-background-overlay-dark: color-mix(
     in srgb,
     var(--raw-color-core-ui-900) 95%,
@@ -275,11 +279,11 @@
   --raw-color-background-brand-disabled-dark: var(--raw-color-brand-light-dark);
 
   /* Status Backgrounds - Light */
-  --raw-color-background-neutral: var(--raw-color-core-ui-200);
+  --raw-color-background-neutral: var(--raw-color-core-ui-100);
   --raw-color-background-neutral-hover: var(--raw-color-core-ui-300);
   --raw-color-background-neutral-active: var(--raw-color-core-ui-600);
   --raw-color-background-success: var(--raw-color-core-green-100);
-  --raw-color-background-success-hover: var(--raw-color-core-green-200);
+  --raw-color-background-success-hover: var(--raw-color-core-green-300);
   --raw-color-background-success-active: var(--raw-color-core-green-600);
   --raw-color-background-error: var(--raw-color-core-red-100);
   --raw-color-background-error-hover: var(--raw-color-core-red-200);
@@ -291,14 +295,14 @@
   --raw-color-background-attention-hover: var(--raw-color-core-yellow-200);
   --raw-color-background-attention-active: var(--raw-color-core-yellow-600);
   --raw-color-background-info: var(--raw-color-core-blue-100);
-  --raw-color-background-info-hover: var(--raw-color-core-blue-200);
+  --raw-color-background-info-hover: var(--raw-color-core-blue-300);
   --raw-color-background-info-active: var(--raw-color-core-blue-600);
 
   /* Status Backgrounds - Dark */
   --raw-color-background-neutral-dark: var(--raw-color-core-ui-600);
   --raw-color-background-neutral-hover-dark: var(--raw-color-core-ui-800);
   --raw-color-background-neutral-active-dark: var(--raw-color-core-ui-600);
-  --raw-color-background-success-dark: var(--raw-color-core-green-900);
+  --raw-color-background-success-dark: var(--raw-color-core-green-950);
   --raw-color-background-success-hover-dark: var(--raw-color-core-green-700);
   --raw-color-background-success-active-dark: var(--raw-color-core-green-400);
   --raw-color-background-error-dark: var(--raw-color-core-red-950);
@@ -362,19 +366,19 @@
 
   /* Status Borders - Light */
   --raw-color-border-neutral: var(--raw-color-core-ui-300);
-  --raw-color-border-success: var(--raw-color-core-green-200);
-  --raw-color-border-error: var(--raw-color-core-red-200);
-  --raw-color-border-warning: var(--raw-color-core-orange-200);
-  --raw-color-border-attention: var(--raw-color-core-yellow-200);
-  --raw-color-border-info: var(--raw-color-core-blue-200);
+  --raw-color-border-success: var(--raw-color-core-green-300);
+  --raw-color-border-error: var(--raw-color-core-red-300);
+  --raw-color-border-warning: var(--raw-color-core-orange-300);
+  --raw-color-border-attention: var(--raw-color-core-yellow-300);
+  --raw-color-border-info: var(--raw-color-core-blue-300);
 
   /* Status Borders - Dark */
   --raw-color-border-neutral-dark: var(--raw-color-core-ui-500);
-  --raw-color-border-success-dark: var(--raw-color-core-green-700);
-  --raw-color-border-error-dark: var(--raw-color-core-red-800);
-  --raw-color-border-warning-dark: var(--raw-color-core-orange-800);
-  --raw-color-border-attention-dark: var(--raw-color-core-yellow-950);
-  --raw-color-border-info-dark: var(--raw-color-core-blue-700);
+  --raw-color-border-success-dark: var(--raw-color-core-green-900);
+  --raw-color-border-error-dark: var(--raw-color-core-red-900);
+  --raw-color-border-warning-dark: var(--raw-color-core-orange-900);
+  --raw-color-border-attention-dark: var(--raw-color-core-yellow-900);
+  --raw-color-border-info-dark: var(--raw-color-core-blue-900);
 }
 
 @theme {
@@ -476,6 +480,10 @@
     var(--raw-color-background-surface-sunken),
     var(--raw-color-background-surface-sunken-dark)
   );
+  --color-background-surface-sunken-darker: light-dark(
+    var(--raw-color-background-surface-sunken-darker),
+    var(--raw-color-background-surface-sunken-darker-dark)
+  );
   --color-background-overlay: light-dark(
     var(--raw-color-background-overlay),
     var(--raw-color-background-overlay-dark)

package/styles/join.css

@@ -2,12 +2,22 @@
 /* JOIN */
 /*----------------------------*/
 
-.join {
-  &:not([class*="rounded"]) {
+.join-item:focus {
+  @apply isolate;
+}
+
+.join-item:hover {
+  @apply z-10;
+}
+
+@utility join {
+  @apply inline-flex items-stretch;
+
+  &:not([class*='rounded']) {
     @apply rounded-3xl;
   }
 
-  &:not(.join-vertical) {
+  &:not([class*='join-vertical']) {
     & > :where(*:not(:first-child)) {
       @apply my-0;
       &:is(.button) {
@@ -15,7 +25,8 @@
       }
     }
   }
-  &.join-vertical {
+
+  &[class*='join-vertical'] {
     & > :where(*:not(:first-child)) {
       @apply my-0;
       &:is(.button) {
@@ -23,18 +34,7 @@
       }
     }
   }
-}
 
-.join-item:focus {
-  @apply isolate;
-}
-
-.join-item:hover {
-  @apply z-10;
-}
-
-.join {
-  @apply inline-flex items-stretch;
   & :where(.join-item) {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
@@ -78,53 +78,54 @@
     border-start-end-radius: inherit;
     border-end-end-radius: inherit;
   }
+}
 
-  &.join-vertical {
-    @apply flex-col;
-    & .join-item:first-child:not(:last-child),
-    & *:first-child:not(:last-child) .join-item {
-      border-end-start-radius: 0;
-      border-end-end-radius: 0;
-    }
-    & .join-item:first-child:not(:last-child),
-    & *:first-child:not(:last-child) .join-item {
-      border-start-start-radius: inherit;
-      border-start-end-radius: inherit;
-    }
-    & .join-item:last-child:not(:first-child),
-    & *:last-child:not(:first-child) .join-item {
-      border-start-start-radius: 0;
-      border-start-end-radius: 0;
-    }
-    & .join-item:last-child:not(:first-child),
-    & *:last-child:not(:first-child) .join-item {
-      border-end-start-radius: inherit;
-      border-end-end-radius: inherit;
-    }
+@utility join-vertical {
+  @apply flex-col;
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
   }
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+}
 
-  &.join-horizontal {
-    @apply flex-row;
-    & .join-item:first-child:not(:last-child),
-    & *:first-child:not(:last-child) .join-item {
-      border-end-end-radius: 0;
-      border-start-end-radius: 0;
-    }
-    & .join-item:first-child:not(:last-child),
-    & *:first-child:not(:last-child) .join-item {
-      border-end-start-radius: inherit;
-      border-start-start-radius: inherit;
-    }
-    & .join-item:last-child:not(:first-child),
-    & *:last-child:not(:first-child) .join-item {
-      border-end-start-radius: 0;
-      border-start-start-radius: 0;
-    }
-    & .join-item:last-child:not(:first-child),
-    & *:last-child:not(:first-child) .join-item {
-      border-end-end-radius: inherit;
-      border-start-end-radius: inherit;
-    }
+@utility join-horizontal {
+  @apply flex-row;
+
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+  }
+  & .join-item:first-child:not(:last-child),
+  & *:first-child:not(:last-child) .join-item {
+    border-end-start-radius: inherit;
+    border-start-start-radius: inherit;
+  }
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+  }
+  & .join-item:last-child:not(:first-child),
+  & *:last-child:not(:first-child) .join-item {
+    border-end-end-radius: inherit;
+    border-start-end-radius: inherit;
   }
 }
 

package/styles/menu.css

@@ -23,7 +23,7 @@
     /* 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;
@@ -96,7 +96,7 @@
     }
 
     &.is-active > * {
-      @apply font-medium include-hover-primary-active text-text-brand hover:text-text-brand;
+      @apply font-medium include-hover-primary-active text-text-brand-active hover:text-text-brand-active;
     }
 
     &:has(:focus-visible) > * {

package/styles/modal.css

@@ -63,7 +63,7 @@ dialog {
 
 /* 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;
+  @apply flex flex-col flex-1 justify-center items-stretch min-h-dvh p-2 m-auto w-full md:p-4 overflow-y-auto overflow-x-clip;
 
   /* Width variants */
   &.modal-sm {

package/styles/scrollbar.css

@@ -15,3 +15,21 @@
   [&::-webkit-scrollbar-track]:rounded-full
   [&::-webkit-scrollbar-thumb]:rounded-full;
 }
+
+@utility scrollbar-brand-light {
+  @apply [&::-webkit-scrollbar]:w-1.5
+  [&::-webkit-scrollbar]:h-1.5
+  [&::-webkit-scrollbar-track]:bg-background-brand/15
+  dark:[&::-webkit-scrollbar-track]:bg-background-brand/70
+  [&::-webkit-scrollbar-thumb]:bg-background-brand/30
+  [&::-webkit-scrollbar-thumb]:transition-colors
+  [&::-webkit-scrollbar-thumb:hover]:bg-background-brand/40
+  dark:[&::-webkit-scrollbar-thumb]:bg-background-brand/50
+  dark:[&::-webkit-scrollbar-thumb:hover]:bg-background-brand/60
+  [&::-webkit-scrollbar-track]:rounded-full
+  [&::-webkit-scrollbar-thumb]:rounded-full;
+}
+
+@utility scrollbar-hidden {
+  @apply [&::-webkit-scrollbar]:hidden;
+}

package/styles/shared.css

@@ -1,6 +1,6 @@
 html,
 body {
-  @apply w-full min-h-screen;
+  @apply w-full min-h-dvh;
 }
 
 /* Interactive states */

package/styles/surface.css

@@ -42,20 +42,17 @@
 
 /* Brand Surfaces */
 @utility surface-brand {
-  @apply text-text-inverted
+  /* @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 */
   border
   border-brand-default
   transition-[background-position,brightness]
   shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_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)] */
   duration-75
   ease-out-cubic;
 
@@ -65,6 +62,27 @@
     @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;
+  } */
+  @apply text-text-inverted
+  bg-radial-[at_50%_25%]
+  via-75%
+  from-[0.5rem]
+  to-[calc(100%-0.5rem)]
+  to-brand-default
+  from-brand-moderate
+  border
+  border-brand-default
+  transition-[background-position,brightness]
+  shadow-[inset_0_1px_0_0_color-mix(in_srgb,var(--color-brand-moderate)_100%,transparent),inset_0_-2px_0_0_color-mix(in_srgb,var(--color-brand-strong)_20%,transparent)]
+  duration-75
+  ease-out-cubic;
+
+  > *,
+  &::before,
+  &::after {
+    @apply drop-shadow-[0_0.5px_0_color-mix(in_srgb,var(--tw-drop-shadow-color)_20%,transparent),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;
   }
 }
 

package/styles/toast.css

@@ -3,7 +3,7 @@
 /*----------------------------*/
 
 @utility toast-container {
-  @apply fixed inset-x-4 bottom-4 z-50 mx-auto max-w-xl;
+  @apply fixed inset-x-4 bottom-4 z-[70] mx-auto max-w-xl;
   .toast-container-inner {
     @apply flex flex-col gap-2 w-full;
   }

package/styles/typography.css

@@ -2,6 +2,11 @@
 /* TYPOGRAPHY */
 /*----------------------------*/
 
+@theme {
+  --text-xxxs: 9px;
+  --text-xxs: 11px;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;
@@ -12,7 +17,6 @@ body {
   @apply bg-brand-default text-text-inverted;
 }
 
-
 /* Typography utilities */
 @utility h1 {
   @apply text-4xl font-heading font-medium;
@@ -27,11 +31,11 @@ body {
 }
 
 @utility h4 {
-  @apply text-xl font-medium;
+  @apply text-base font-semibold text-text-default font-heading;
 }
 
 @utility h5 {
-  @apply text-lg font-normal font-body;
+  @apply text-sm font-semibold font-body;
 }
 
 @utility s1 {
@@ -60,45 +64,45 @@ body {
 
 /* Base layer styles for elements */
 @layer base {
-hr,
-.separator {
-  @apply h-px border-t border-line-default;
-}
+  hr,
+  .separator {
+    @apply h-px border-t border-line-default;
+  }
 
-b,
-strong {
-  @apply font-medium;
-}
+  b,
+  strong {
+    @apply font-medium;
+  }
 
-h1,
-h2 {
-  @apply font-heading;
-}
+  h1,
+  h2 {
+    @apply font-heading;
+  }
 
-/* h3,
+  /* h3,
 h4,
 h5,
 h6 {
   @apply font-normal;
 } */
 
-.prose {
-  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply font-medium;
-  }
-
-  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply text-text-default;
-  }
-
-  &,
-  :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)),
-  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)),
-  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)),
-  :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)),
-  :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)),
-  :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    @apply text-text-default;
+  .prose {
+    :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+      @apply font-medium;
+    }
+
+    :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+      @apply text-text-default;
+    }
+
+    &,
+    :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)),
+    :where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)),
+    :where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)),
+    :where(h4):not(:where([class~='not-prose'], [class~='not-prose'] *)),
+    :where(h5):not(:where([class~='not-prose'], [class~='not-prose'] *)),
+    :where(h6):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+      @apply text-text-default;
+    }
   }
 }
-}

package/styles/utility.css

@@ -2,13 +2,12 @@
 /* Utility */
 /*----------------------------*/
 
-
 body:has(.translation-key:hover) .translation-key:not(:hover) {
   @apply z-50 opacity-30;
 }
 
 body:has(.translation-key:hover) .translation-key:hover {
-  @apply opacity-100 z-[60];
+  @apply opacity-100 z-60;
 }
 
 .translation-key {