@zvoove/unity-ui 2.25.0 → 2.26.0

package/dist/theme.css

@@ -358,6 +358,11 @@
   --color-steel-blue-container: var(--color-steel-blue-90);
   --color-on-steel-blue-container: var(--color-steel-blue-10);
 
+  --color-code-surface: var(--color-neutral-15);
+  --color-code-surface-variant: var(--color-neutral-20);
+  --color-code-on-surface: var(--color-neutral-variant-90);
+  --color-code-outline: var(--color-neutral-30);
+
   --shadow-elevation1: 0px 1px 3px 1px rgba(107, 112, 153, 0.15);
   --shadow-elevation2: 0px 2px 6px 2px rgba(107, 112, 153, 0.15);
   --shadow-elevation3: 0px 1px 3px rgba(107, 112, 153, 0.15);
@@ -391,8 +396,7 @@
   --container-laptop: 80rem; /* 1280px */
   --container-desktop: 96rem; /* 1536px */
 
-  --chat-shell-max-width: 54rem; /* 864px — centered conversation container */
-  --chat-content-measure: 72ch; /* max inline-size for bubbles & cards */
+  --chat-content-measure: 60%; /* max inline-size for bubbles & cards */
 
   @keyframes ripple {
     0% {
@@ -583,6 +587,10 @@
     --color-on-dark-steel-blue: var(--color-steel-blue-20);
     --color-steel-blue-container: var(--color-steel-blue-30);
     --color-on-steel-blue-container: var(--color-steel-blue-90);
+    --color-code-surface: var(--color-neutral-15);
+    --color-code-surface-variant: var(--color-neutral-20);
+    --color-code-on-surface: var(--color-neutral-variant-90);
+    --color-code-outline: var(--color-neutral-30);
   }
 }
 
@@ -732,6 +740,139 @@
   .remove-margin-block-end {
     margin-block-end: 0 !important;
   }
+
+  .content-block {
+    @apply text-on-surface text-body-medium font-body;
+
+    & > :first-child {
+      @apply mt-none!;
+    }
+
+    & > :first-child > :first-child {
+      @apply mt-none!;
+    }
+
+    & > :last-child {
+      @apply mb-none!;
+    }
+
+    & > :last-child > :last-child {
+      @apply mb-none!;
+    }
+
+    & h1 {
+      @apply text-headline-large text-on-surface mt-xl mb-sm;
+    }
+
+    & h2 {
+      @apply text-headline-medium text-on-surface mt-xl mb-sm;
+    }
+
+    & h3 {
+      @apply text-headline-small text-on-surface mt-lg mb-sm;
+    }
+
+    & h4 {
+      @apply text-title-large text-on-surface mt-lg mb-xs;
+    }
+
+    & h5 {
+      @apply text-title-medium text-on-surface mt-md mb-xs;
+    }
+
+    & h6 {
+      @apply text-title-small text-on-surface mt-md mb-xs;
+    }
+
+    & p {
+      @apply text-body-medium mb-md;
+    }
+
+    & ul {
+      @apply list-disc pl-xl mb-md;
+    }
+
+    & ol {
+      @apply list-decimal pl-xl mb-md;
+    }
+
+    & li {
+      @apply mb-xs2;
+    }
+
+    & table {
+      @apply w-full table-auto;
+    }
+
+    & thead tr {
+      @apply border-b border-outline-variant;
+    }
+
+    & th {
+      @apply p-sm bg-surface-container-low text-label-large text-on-surface text-left relative;
+
+      &:not(:last-child)::after {
+        content: '';
+        @apply absolute right-[0px] top-1/2 -translate-y-1/2 w-px h-sm bg-outline-variant;
+      }
+    }
+
+    & tbody tr {
+      @apply transition-colors;
+
+      &:not(:last-child) {
+        @apply border-b border-outline-variant;
+      }
+
+      &:hover {
+        @apply bg-surface-container-lowest;
+      }
+    }
+
+    & td {
+      @apply p-sm text-body-medium;
+    }
+
+    & a {
+      @apply text-primary underline;
+
+      &:hover {
+        @apply text-primary-hover;
+      }
+    }
+
+    & code {
+      @apply text-body-small! bg-surface-container rounded-xs px-xs2 py-xs2;
+    }
+
+    & blockquote {
+      @apply border-l-4 border-outline-variant pl-md mb-md italic text-on-surface-variant;
+    }
+
+    & hr {
+      @apply border-outline-variant my-md;
+    }
+
+    & img {
+      @apply max-w-full rounded-sm;
+    }
+
+    & strong {
+      @apply font-semibold;
+    }
+
+    & b {
+      @apply font-semibold;
+    }
+
+    & em {
+      @apply italic;
+    }
+
+    & i {
+      @apply italic;
+    }
+  }
 }
 
 @layer base {