twntyx-css 1.0.0

package/styles/avatar.css

@@ -0,0 +1,101 @@
+/*----------------------------*/
+/* AVATAR */
+/*----------------------------*/
+
+@utility avatar {
+  --badge-size: 25%;
+  --badge-border-width: 10%;
+  --badge-offset: 1%;
+
+  @apply inline-flex relative rounded-full;
+
+  /* Online/Offline indicators */
+  &.online,
+  &.offline {
+    .avatar-inner::before {
+      @apply content-[''] absolute z-10 block rounded-full size-(--badge-size) border border-[var(--badge-border-width)] border-background-surface right-(--badge-offset) bottom-(--badge-offset);
+    }
+  }
+
+  &.online .avatar-inner::before {
+    @apply bg-background-success-active;
+  }
+
+  &.offline .avatar-inner::before {
+    @apply bg-background-error-active;
+  }
+
+  &.avatar-hover {
+    @apply cursor-pointer include-interactive;
+    .avatar-inner {
+      @apply transition-all duration-300 ease-in-out;
+      img {
+        @apply transition-[filter] duration-300 ease-in-out brightness-100;
+      }
+    }
+
+    &:hover,
+    &:focus-visible {
+      .avatar-inner {
+        @apply bg-background-neutral-active shadow-elevation-low;
+        img {
+          @apply brightness-110;
+        }
+      }
+    }
+    &:active {
+      .avatar-inner {
+        @apply bg-background-neutral-active shadow-elevation-low;
+        img {
+          @apply brightness-100 duration-0;
+        }
+      }
+    }
+  }
+
+  /* Placeholder styling */
+  /* Placeholder styling */
+  &.placeholder {
+    .avatar-inner {
+      @apply flex justify-center items-center bg-background-neutral;
+
+      span {
+        @apply text-text-secondary;
+      }
+    }
+
+    &.avatar-hover:hover .avatar-inner {
+      @apply bg-core-ui-400;
+    }
+
+    &.alt {
+      .avatar-inner {
+        @apply bg-core-green-100;
+      }
+      &.avatar-hover:hover .avatar-inner {
+        @apply bg-core-green-300;
+      }
+    }
+  }
+}
+
+/* Base avatar image container */
+@utility avatar-inner {
+  @apply flex relative rounded-full bg-background-surface-sunken;
+
+  /* Image styling */
+  img {
+    @apply object-cover rounded-full size-full;
+  }
+}
+
+/* Avatar group */
+@utility avatar-group {
+  @apply flex -space-x-4;
+
+  .avatar {
+    .avatar-inner {
+      @apply border-2 border-background-surface hover:z-10;
+    }
+  }
+}

package/styles/background-ai.css

@@ -0,0 +1,118 @@
+/*----------------------------*/
+/* BACKGROUND AI */
+/*----------------------------*/
+
+:root {
+   --light-gradient: repeating-linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--color-core-white) 100%, transparent 0%) 0%,
+    color-mix(in srgb, var(--color-core-white) 20%, transparent 80%) 7%,
+    transparent 10%,
+    transparent 12%,
+    color-mix(in srgb, var(--color-core-white) 100%, transparent 0%) 16%
+  );
+  --light-borealis: repeating-linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--color-brand-moderate) 100%, transparent 0%) 10%,
+    color-mix(in srgb, var(--color-brand-soft) 100%, transparent 0%) 15%,
+    color-mix(in srgb, var(--color-brand-soft) 100%, transparent 0%) 20%,
+    transparent 25%,
+    color-mix(in srgb, var(--color-brand-moderate) 100%, transparent 0%) 30%
+  );
+ 
+}
+:root.dark {
+--light-gradient: repeating-linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--color-core-black) 100%, transparent 0%) 0%,
+    color-mix(in srgb, var(--color-core-black) 20%, transparent 80%) 7%,
+    transparent 10%,
+    transparent 12%,
+    color-mix(in srgb, var(--color-core-black) 100%, transparent 0%) 16%
+  );
+   --light-borealis: repeating-linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--color-brand-default) 100%, transparent 0%) 10%,
+    color-mix(in srgb, var(--color-brand-soft) 100%, transparent 0%) 15%,
+    color-mix(in srgb, var(--color-brand-soft) 100%, transparent 0%) 20%,
+    transparent 25%,
+    color-mix(in srgb, var(--color-brand-default) 100%, transparent 0%) 30%
+  );
+}
+
+@utility background-ai-silk{
+  @apply relative overflow-clip;
+  
+  &::before,
+  &::after {
+    @apply content-[''] absolute inset-0 pointer-events-none will-change-transform animate-[borealis_60s_linear_infinite] bg-[image:var(--light-gradient),var(--light-borealis)];
+    ;
+  }
+
+
+
+  &::before {
+    @apply z-0 -inset-[10px] opacity-20 mix-blend-darken;
+    mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
+    background-size:
+      300% 300%,
+      200% 200%;
+    background-position:
+      50% 50%,
+      50% 50%;
+    /* filter: blur(10px); */
+  }
+
+  &::after {
+    @apply z-10 opacity-25 mix-blend-hard-light bg-size-[200%_200%,100%_100%] bg-fixed;
+  }
+
+  > * {
+    @apply relative z-20;
+  }
+
+  &:not(.light) {
+    @apply dark:bg-brand-soft/45;
+    &::before,
+    &::after {
+      @apply dark:opacity-10 dark:mix-blend-overlay;
+    }
+  }
+}
+
+@keyframes borealis {
+  0% {
+    background-position:
+      0% 50%,
+      0% 50%;
+  }
+  50% {
+    background-position:
+      100% 50%,
+      100% 50%;
+  }
+  100% {
+    background-position:
+      0% 50%,
+      0% 50%;
+  }
+}
+
+
+
+@utility background-ai-circles {
+  @apply bg-core-white to-brand-light/50 from-brand-soft bg-size-[520px_100%] bg-repeat-x animate-[badge-ai-gradient_10s_linear_infinite] bg-[radial-gradient(520px_520px_at_50%_50%,_var(--tw-gradient-from)_0%,_var(--tw-gradient-to)_30%)];
+
+  &:not(.light) {
+    @apply dark:bg-core-black dark:to-brand-soft/50 dark:from-brand-moderate/40;
+  }
+}
+
+@keyframes badge-ai-gradient {
+  0% {
+    background-position: 520px 50%;
+  }
+  100% {
+    background-position: -520px 50%;
+  }
+}

package/styles/badge.css

@@ -0,0 +1,274 @@
+/*----------------------------*/
+/* BADGE */
+/*----------------------------*/
+
+@utility badge {
+  @apply font-body inline-flex gap-1 justify-center items-center font-semibold rounded-full border cursor-default shrink-0;
+
+  &[role="status"] {
+    @apply cursor-default;
+  }
+
+  &:empty {
+    @apply px-0 min-w-0! min-h-0! rounded-full aspect-square;
+
+    &.badge-sm {
+      @apply px-0 size-2;
+    }
+
+    &.badge-md {
+      @apply px-0 size-3;
+    }
+
+    &.badge-lg {
+      @apply px-0 size-4;
+    }
+  }
+
+  /* Icon styles */
+  & > svg {
+    @apply fill-current;
+  }
+
+  .button.button-close {
+    @apply p-0 text-current!;
+  }
+
+  > * {
+    @apply whitespace-nowrap;
+  }
+
+  .button-close.button {
+    @apply border-none;
+  }
+
+  /* SIZES */
+
+  & {
+    @apply px-2 py-1 text-xs [&>svg]:size-4 min-h-[26px] min-w-[26px];
+    &:has(svg:first-child) {
+      @apply pl-1.5;
+    }
+    &:has(.button-close:last-child) {
+      @apply pr-1;
+    }
+    .button.button-close,
+    .button-close {
+      --close-size: calc(26px - 0.5rem - 2px) !important;
+    }
+  }
+
+  &.badge-sm {
+    @apply gap-0.5 px-1.5 py-0.5 text-[10px] [&>svg]:size-3 min-h-[22px] min-w-[22px];
+    &:has(svg:first-child) {
+      @apply pl-1;
+    }
+    &:has(.button-close:last-child) {
+      @apply pr-1;
+    }
+    .button.button-close,
+    .button-close {
+      --close-size: calc(22px - 0.25rem - 6px) !important;
+    }
+  }
+
+  &.badge-lg {
+    @apply gap-2 px-3 py-1 text-sm [&>svg]:size-5 min-h-[30px] min-w-[30px];
+    &:has(svg:first-child) {
+      @apply pl-2;
+    }
+    &:has(.button-close:last-child) {
+      @apply pr-1;
+    }
+    .button.button-close,
+    .button-close {
+      --close-size: calc(30px - 0.5rem - 2px) !important;
+    }
+  }
+
+  /* VARIANTS */
+
+  & {
+    @apply border-line-neutral bg-background-neutral text-text-neutral;
+    .button-close {
+      @apply text-current;
+      &::before {
+        @apply bg-current;
+      }
+    }
+
+    &[button],
+    &.badge-interactive {
+      @apply cursor-pointer surface-interactive-neutral;
+    }
+    &.badge-filled {
+      @apply bg-text-default border-text-default text-core-white dark:text-core-black;
+      .button-close.button::before {
+        @apply bg-core-white dark:bg-core-black;
+      }
+      &.badge-interactive {
+        @apply hover:bg-text-default/75 hover:border-text-default/90;
+      }
+    }
+  }
+
+  &.badge-placeholder {
+    @apply surface-placeholder;
+    &.badge-interactive {
+      @apply surface-interactive-placeholder;
+    }
+    &.badge-filled {
+      @apply bg-text-default/75 border-text-default text-core-white dark:text-core-black;
+      &.badge-interactive {
+        @apply hover:bg-text-default/60 hover:border-text-default/90;
+      }
+    }
+  }
+
+  &.badge-success {
+    @apply surface-success;
+    &.badge-interactive {
+      @apply surface-interactive-success;
+    }
+    &:empty {
+      @apply bg-text-success from-text-success to-text-success border-text-success text-core-white dark:text-core-black;
+    }
+    &.badge-filled {
+      @apply bg-text-success border-text-success text-core-white dark:text-core-black;
+      &.badge-interactive {
+        &:hover {
+          @apply from-text-success/75 to-text-success/75 border-text-success;
+        }
+      }
+    }
+  }
+
+  &.badge-error {
+    @apply surface-error;
+    &.badge-interactive {
+      @apply surface-interactive-error;
+    }
+    &:empty {
+      @apply bg-text-error from-text-error to-text-error border-text-error text-core-white dark:text-core-black;
+    }
+    &.badge-filled {
+      @apply bg-text-error border-text-error text-core-white dark:text-core-black;
+      &.badge-interactive {
+        &:hover {
+          @apply from-text-error/75 to-text-error/75 border-text-error;
+        }
+      }
+    }
+  }
+
+  &.badge-warning {
+    @apply surface-warning;
+    &.badge-interactive {
+      @apply surface-interactive-warning;
+    }
+    &:empty {
+      @apply bg-text-warning from-text-warning to-text-warning border-text-warning text-core-white dark:text-core-black;
+    }
+    &.badge-filled {
+      @apply bg-text-warning border-text-warning text-core-white dark:text-core-black;
+      &.badge-interactive {
+        &:hover {
+          @apply from-text-warning/75 to-text-warning/75 border-text-warning;
+        }
+      }
+    }
+  }
+
+  &.badge-info {
+    @apply surface-info;
+    &.badge-interactive {
+      @apply surface-interactive-info;
+    }
+    &:empty {
+      @apply bg-text-info from-text-info to-text-info border-text-info text-text-inverted;
+    }
+    &.badge-filled {
+      @apply bg-text-info border-text-info text-text-inverted;
+      &.badge-interactive {
+        &:hover {
+          @apply from-text-info/75 to-text-info/75 border-text-info;
+        }
+      }
+    }
+  }
+
+  &.badge-attention {
+    @apply surface-attention;
+    &.badge-interactive {
+      @apply surface-interactive-attention;
+    }
+    &:empty {
+      @apply bg-transparent from-background-attention-active to-background-attention-active border-background-attention-active;
+    }
+    &.badge-filled {
+      @apply bg-text-attention border-text-attention text-text-inverted;
+      &.badge-interactive {
+        &:hover {
+          @apply from-text-attention/75 to-text-attention/75 border-text-attention;
+        }
+      }
+    }
+  }
+
+  &.badge-brand {
+    @apply border-line-brand bg-background-brand/20 text-brand-default;
+    &.badge-interactive {
+      @apply surface-interactive-brand;
+    }
+    &.badge-filled,
+    &:empty {
+      @apply text-text-inverted surface-brand;
+      &.badge-interactive {
+        @apply hover:bg-background-brand/75 hover:border-background-brand/90 hover:!text-text-default;
+      }
+    }
+  }
+
+  &.badge-ai {
+    @apply border-none text-brand-default background-ai-circles;
+    &.badge-filled,
+    &:empty {
+      @apply text-text-inverted from-brand-moderate to-brand-default;
+    }
+    &.badge-interactive {
+      @apply surface-interactive-brand;
+    }
+  }
+
+  &.badge-interactive {
+    @apply include-interactive;
+  }
+
+  /* Role fit badges */
+
+  &[class*="-status-"].badge {
+    @apply font-medium rounded border-none;
+  }
+
+  &.badge-status-undefined {
+    @apply bg-core-ui-200 dark:bg-core-ui-700 text-core-ui-600 dark:text-core-ui-300;
+  }
+  &.badge-status-verylow {
+    @apply bg-core-red-100 text-core-red-700;
+  }
+  &.badge-status-low {
+    @apply bg-core-orange-100 text-core-orange-700;
+  }
+  &.badge-status-medium {
+    @apply bg-core-green-50 text-core-green-700;
+  }
+  &.badge-status-high {
+    @apply bg-core-green-100 text-core-green-800;
+  }
+  &.badge-status-veryhigh {
+    @apply relative bg-core-green-200 text-core-green-900;
+    &::after {
+      @apply content-[''] overflow-hidden rounded-[inherit] block absolute z-0 inset-0 bg-blend-color-dodge opacity-50 animate-shine bg-[linear-gradient(30deg,_rgba(255,255,255,0)_35%,_rgba(255,255,255,1)_50%,_rgba(255,255,255,0)_60%)] dark:opacity-20 bg-no-repeat pointer-events-none;
+    }
+  }
+}

package/styles/banner.css

@@ -0,0 +1,98 @@
+/*----------------------------*/
+/* BANNER */
+/*----------------------------*/
+
+@utility banner {
+  @apply flex gap-4 items-start p-4 text-sm rounded-xl;
+
+  /* Icon container */
+  .banner-icon {
+    @apply flex-shrink-0;
+
+    &:empty {
+      @apply bg-core-black/10 dark:bg-core-white/10 size-6;
+    }
+
+    > svg {
+      @apply size-6;
+    }
+  }
+
+  /* Content area */
+  .banner-content {
+    @apply flex-1 py-0.5 min-w-0;
+
+    /* Title */
+    .banner-title {
+      @apply font-medium;
+    }
+
+    /* Description */
+    .banner-description {
+      @apply mt-1 text-text-secondary;
+    }
+  }
+
+  /* Actions container */
+  .banner-actions {
+    @apply flex flex-wrap gap-2 mt-3;
+  }
+
+  /* Variants */
+  &.banner-info {
+    @apply surface-info;
+    .banner-icon {
+      &:empty {
+        @apply bg-text-info mask-info;
+      }
+    }
+  }
+
+  &.banner-success {
+    @apply surface-success;
+    .banner-icon {
+      &:empty {
+        @apply bg-text-success mask-check-circle;
+      }
+    }
+  }
+
+  &.banner-error {
+    @apply surface-error;
+    .banner-icon {
+      &:empty {
+        @apply bg-text-error mask-report;
+      }
+    }
+  }
+
+  &.banner-warning {
+    @apply surface-warning;
+    .banner-icon {
+      &:empty {
+        @apply bg-text-warning mask-warning;
+      }
+    }
+  }
+
+  &.banner-attention {
+    @apply surface-attention;
+    .banner-icon {
+      &:empty {
+        @apply bg-text-attention mask-warning;
+      }
+    }
+  }
+
+  /* Without icon */
+  &:not(:has(.banner-icon)) {
+    @apply pl-4;
+  }
+
+  /* Without title */
+  &:not(:has(.banner-title)) {
+    .banner-description {
+      @apply mt-0;
+    }
+  }
+}

package/styles/breadcrumb.css

@@ -0,0 +1,72 @@
+/*----------------------------*/
+/* BREADCRUMB */
+/*----------------------------*/
+
+@utility breadcrumb {
+  @apply flex flex-wrap gap-1 items-center text-sm;
+
+  > :where(li, .breadcrumb-item) {
+    @apply inline-flex gap-1.5 items-center;
+
+    &.is-active {
+      @apply text-text-brand;
+    }
+
+    &.is-current {
+      @apply text-text-default;
+    }
+
+    &:where(.is-current, .breadcrumb-ellipsis)
+      :where(a, button, .breadcrumb-link) {
+      @apply pointer-events-none cursor-default hover:text-inherit active:text-inherit;
+    }
+  }
+
+  :where(a, button, .breadcrumb-link) {
+    @apply inline-flex gap-1 items-center rounded include-interactive include-hover-primary text-text-link hover:text-text-link-hover active:text-text-link-active;
+  }
+
+  :where(svg, .breadcrumb-icon) {
+    @apply inline-flex shrink-0 size-4 fill-current;
+  }
+
+  :where(.breadcrumb-separator) {
+    @apply inline-flex opacity-70 select-none text-text-tertiary;
+  }
+
+  :where(.breadcrumb-ellipsis) {
+    @apply text-text-tertiary select-none pointer-events-none;
+  }
+
+  &:not(:has(.breadcrumb-separator)) {
+    > :where(li, .breadcrumb-item):not(:last-child)::after {
+      content: "/";
+      @apply inline-flex opacity-70 ml-1 text-text-tertiary select-none;
+    }
+  }
+}
+
+/* Compatibility aliases */
+@utility breadcrumb-item {
+  @apply inline-flex gap-1.5 items-center;
+}
+
+@utility breadcrumb-link {
+  @apply inline-flex gap-1 items-center rounded include-interactive include-hover-primary text-text-link hover:text-text-link-hover active:text-text-link-active;
+}
+
+@utility breadcrumb-separator {
+  @apply inline-flex opacity-70 select-none text-text-tertiary;
+}
+
+@utility breadcrumb-icon {
+  @apply inline-flex shrink-0 size-4 fill-current;
+}
+
+@utility breadcrumb-ellipsis {
+  @apply text-text-tertiary select-none pointer-events-none;
+
+  .breadcrumb-link {
+    @apply pointer-events-none cursor-default text-text-tertiary;
+  }
+}