@schlenkr/quassel 0.5.6 → 0.6.0

package/README.md

@@ -49,7 +49,7 @@ variables too.
   actions are announced once, with the host in control of the wording.
 - Complete English and German UI labels through `englishTexts` / `germanTexts`; `texts` can override any label (English by default).
 - Grouped steps show their error count even while collapsed.
-- Text size follows the host: no overrides needed to fit in (see below).
+- One text size per host, a fixed small size and shared Markdown typography (see below).
 
 ## Install
 
@@ -93,28 +93,26 @@ Any backend that emits the `@schlenkr/quassel/events` stream works with the same
 
 ## Text size
 
-quassel starts at 13px with a line height of 1.5, a 10px message gap and a 3px dense
-step gap. Tool rows and timestamps use 88% of the text size. Expanded tool groups have a
-1px gap between rows; tool rows have 1px of vertical padding on each side.
+quassel defaults to 13px. Set `--qsl-font-size` on a wrapper, or `1em` to inherit the host's
+font size. Messages, the composer, action cards and text buttons use that base with line height
+1.5. All small UI text, including tools and timestamps, uses 85% with line height 1.4.
+`--qsl-font` and `--qsl-mono` select the font families. There are no other typography inputs.
+Sizes derive from an absolute base, so nested small elements never compound.
 
-Every size derives from one base, so nested elements never compound. Set `--qsl-font-size`
-on a wrapper, or `appearance.fontSize`, to change it. Use `1em` to follow the host's font size.
-`appearance` also offers `toolFontScale`, `toolGroupGap` and `toolRowPadding`.
-
-User message backgrounds fill the available row by default while text keeps its width and
-alignment. `bubbleOptions={{ userBackgroundFullWidth: false }}` restores a fitted background.
-Timestamps sit beside messages by default; their size follows the tool text unless overridden:
+`Markdown` uses the same typography in answers and standalone documents:
 
 ```tsx
-<ChatMessages
-    messages={messages}
-    showTimestamps
-    timestampOptions={{ position: "above", fontScale: 0.88 }}
-/>
+<Markdown text={documentText} />
 ```
 
-`--qsl-text-trace`, `--qsl-timestamp-font-size` and the other `--qsl-text-*` variables override
-individual sizes. The [guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#text-size) lists the full API.
+User message backgrounds fill the available row by default while text keeps its width and
+alignment. `bubbleOptions={{ userBackgroundFullWidth: false }}` restores a fitted background.
+Timestamps sit beside messages by default; `timestampOptions={{ position: "above" }}` moves
+them above. Message gaps and tool row spacing remain configurable through `appearance`.
+
+For 0.6, replace separate size and line-height overrides with `--qsl-font-size` and remove
+all typography fields from `appearance` and timestamp options. The [migration guide](https://github.com/SchlenkR/quassel/blob/main/docs/guide.md#migration-to-06)
+lists the removed variables and options.
 
 ## Development
 

package/chat.css

@@ -8,8 +8,6 @@
     --qsl-spacing: 0.235rem;
     --qsl-font-weight-medium: 500;
     --qsl-font-weight-semibold: 600;
-    --qsl-leading-normal: 1.5;
-    --qsl-leading-relaxed: 1.625;
     --qsl-animate-spin: qsl-spin 1s linear infinite;
     --qsl-default-transition-duration: 150ms;
     --qsl-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -97,15 +95,6 @@
   .qsl\:mx-auto {
     margin-inline: auto;
   }
-  .qsl\:my-1 {
-    margin-block: var(--qsl-spacing);
-  }
-  .qsl\:my-2 {
-    margin-block: calc(var(--qsl-spacing) * 2);
-  }
-  .qsl\:my-3 {
-    margin-block: calc(var(--qsl-spacing) * 3);
-  }
   .qsl\:mt-0 {
     margin-top: 0px;
   }
@@ -121,9 +110,6 @@
   .qsl\:mt-2\.5 {
     margin-top: calc(var(--qsl-spacing) * 2.5);
   }
-  .qsl\:mt-3 {
-    margin-top: calc(var(--qsl-spacing) * 3);
-  }
   .qsl\:mt-4 {
     margin-top: calc(var(--qsl-spacing) * 4);
   }
@@ -136,9 +122,6 @@
   .qsl\:mb-0\.5 {
     margin-bottom: calc(var(--qsl-spacing) * 0.5);
   }
-  .qsl\:mb-1 {
-    margin-bottom: var(--qsl-spacing);
-  }
   .qsl\:mb-1\.5 {
     margin-bottom: calc(var(--qsl-spacing) * 1.5);
   }
@@ -265,9 +248,6 @@
   .qsl\:w-max {
     width: max-content;
   }
-  .qsl\:max-w-\[44ch\] {
-    max-width: 44ch;
-  }
   .qsl\:max-w-\[86\%\] {
     max-width: 86%;
   }
@@ -354,12 +334,6 @@
   .qsl\:\[scrollbar-width\:thin\] {
     scrollbar-width: thin;
   }
-  .qsl\:list-decimal {
-    list-style-type: decimal;
-  }
-  .qsl\:list-disc {
-    list-style-type: disc;
-  }
   .qsl\:flex-col {
     flex-direction: column;
   }
@@ -426,11 +400,6 @@
   .qsl\:gap-\[var\(--qsl-tool-group-gap\,1px\)\] {
     gap: var(--qsl-tool-group-gap,1px);
   }
-  :where(.qsl\:space-y-0 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
   .qsl\:gap-x-1\.5 {
     column-gap: calc(var(--qsl-spacing) * 1.5);
   }
@@ -488,9 +457,6 @@
   .qsl\:rounded-panel {
     border-radius: var(--qsl-radius-panel);
   }
-  .qsl\:rounded-sm {
-    border-radius: var(--qsl-radius-sm, calc(var(--qsl-radius) * 0.6));
-  }
   .qsl\:border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -617,9 +583,6 @@
   .qsl\:p-4 {
     padding: calc(var(--qsl-spacing) * 4);
   }
-  .qsl\:px-1 {
-    padding-inline: var(--qsl-spacing);
-  }
   .qsl\:px-2 {
     padding-inline: calc(var(--qsl-spacing) * 2);
   }
@@ -650,9 +613,6 @@
   .qsl\:py-0\.5 {
     padding-block: calc(var(--qsl-spacing) * 0.5);
   }
-  .qsl\:py-1 {
-    padding-block: var(--qsl-spacing);
-  }
   .qsl\:py-1\.5 {
     padding-block: calc(var(--qsl-spacing) * 1.5);
   }
@@ -716,79 +676,19 @@
   .qsl\:text-left {
     text-align: left;
   }
-  .qsl\:align-top {
-    vertical-align: top;
-  }
   .qsl\:font-mono {
     font-family: var(--qsl-mono);
   }
-  .qsl\:text-base {
-    font-size: var(--qsl-text-base, var(--qsl-base));
-    line-height: var(--tw-leading, var(--qsl-text-base--line-height, 1.5));
-  }
-  .qsl\:text-sm {
-    font-size: var(--qsl-text-sm, calc(var(--qsl-base) * 0.9));
-    line-height: var(--tw-leading, var(--qsl-text-sm--line-height, 1.45));
-  }
-  .qsl\:text-xs {
-    font-size: var(--qsl-text-xs, calc(var(--qsl-base) * 0.8));
-    line-height: var(--tw-leading, var(--qsl-text-xs--line-height, 1.45));
-  }
-  .qsl\:text-\[length\:1\.1em\] {
-    font-size: 1.1em;
-  }
-  .qsl\:text-\[length\:1\.2em\] {
-    font-size: 1.2em;
-  }
-  .qsl\:text-\[length\:1em\] {
-    font-size: 1em;
-  }
-  .qsl\:text-chat {
-    font-size: var(--qsl-chat-font-size, var(--qsl-base));
-  }
-  .qsl\:text-label {
-    font-size: var(--qsl-text-label, calc(var(--qsl-base) * 0.85));
-  }
-  .qsl\:text-meta {
-    font-size: var(--qsl-text-meta, calc(var(--qsl-base) * 0.8));
-  }
-  .qsl\:text-timestamp {
-    font-size: var(--qsl-timestamp-font-size, var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88))));
-  }
-  .qsl\:text-trace {
-    font-size: var(--qsl-text-trace, calc(var(--qsl-base) * var(--qsl-tool-font-scale, 0.88)));
-  }
-  .qsl\:leading-\[1\.3\] {
-    --tw-leading: 1.3;
-    line-height: 1.3;
-  }
-  .qsl\:leading-\[1\.6\] {
-    --tw-leading: 1.6;
-    line-height: 1.6;
-  }
-  .qsl\:leading-\[1\.45\] {
-    --tw-leading: 1.45;
-    line-height: 1.45;
-  }
-  .qsl\:leading-\[1\.375\] {
-    --tw-leading: 1.375;
-    line-height: 1.375;
-  }
-  .qsl\:leading-\[1\.625\] {
-    --tw-leading: 1.625;
-    line-height: 1.625;
-  }
-  .qsl\:leading-\[var\(--qsl-chat-line-height\,1\.65\)\] {
-    --tw-leading: var(--qsl-chat-line-height,1.65);
-    line-height: var(--qsl-chat-line-height,1.65);
-  }
-  .qsl\:leading-normal {
-    --tw-leading: var(--qsl-leading-normal);
-    line-height: var(--qsl-leading-normal);
+  .qsl\:text-body {
+    font-size: var(--qsl-base);
+    line-height: 1.5;
+    &:where([data-quassel]:not([data-quassel] *)) {
+      font-size: var(--qsl-font-size, 13px);
+    }
   }
-  .qsl\:leading-relaxed {
-    --tw-leading: var(--qsl-leading-relaxed);
-    line-height: var(--qsl-leading-relaxed);
+  .qsl\:text-small {
+    font-size: calc(var(--qsl-base) * 0.85);
+    line-height: 1.4;
   }
   .qsl\:font-medium {
     --tw-font-weight: var(--qsl-font-weight-medium);
@@ -815,9 +715,6 @@
   .qsl\:text-ellipsis {
     text-overflow: ellipsis;
   }
-  .qsl\:whitespace-normal {
-    white-space: normal;
-  }
   .qsl\:whitespace-nowrap {
     white-space: nowrap;
   }
@@ -873,9 +770,6 @@
   .qsl\:underline {
     text-decoration-line: underline;
   }
-  .qsl\:\[text-underline-offset\:2px\] {
-    text-underline-offset: 2px;
-  }
   .qsl\:underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -1015,18 +909,6 @@
       opacity: 100%;
     }
   }
-  .qsl\:marker\:text-muted-foreground ::marker {
-    color: var(--qsl-muted-foreground);
-  }
-  .qsl\:marker\:text-muted-foreground::marker {
-    color: var(--qsl-muted-foreground);
-  }
-  .qsl\:marker\:text-muted-foreground ::-webkit-details-marker {
-    color: var(--qsl-muted-foreground);
-  }
-  .qsl\:marker\:text-muted-foreground::-webkit-details-marker {
-    color: var(--qsl-muted-foreground);
-  }
   .qsl\:placeholder\:text-muted-foreground::placeholder {
     color: var(--qsl-muted-foreground);
   }
@@ -1189,54 +1071,6 @@
   :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:p-0 {
     padding: 0px;
   }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:border-white\/35 {
-    border-color: var(--qsl-color-white);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--qsl-color-white) 35%, transparent);
-    }
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:border-white\/50 {
-    border-color: var(--qsl-color-white);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--qsl-color-white) 50%, transparent);
-    }
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:bg-black\/30 {
-    background-color: var(--qsl-color-black);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--qsl-color-black) 30%, transparent);
-    }
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:bg-white\/15 {
-    background-color: var(--qsl-color-white);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--qsl-color-white) 15%, transparent);
-    }
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:bg-white\/20 {
-    background-color: var(--qsl-color-white);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--qsl-color-white) 20%, transparent);
-    }
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:text-inherit {
-    color: inherit;
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:underline {
-    text-decoration-line: underline;
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit ::marker {
-    color: inherit;
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit::marker {
-    color: inherit;
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit ::-webkit-details-marker {
-    color: inherit;
-  }
-  :where([data-tone="on-color"]) .qsl\:in-data-\[tone\=on-color\]\:marker\:text-inherit::-webkit-details-marker {
-    color: inherit;
-  }
   :where([data-tone="overseer-details"]) .qsl\:in-data-\[tone\=overseer-details\]\:max-h-40 {
     max-height: calc(var(--qsl-spacing) * 40);
   }
@@ -1608,9 +1442,6 @@
   :where([data-tone="material"]) .qsl\:in-data-\[tone\=material\]\:\[\&\>\*\:first-child\]\:mt-0 > :first-child {
     margin-top: 0px;
   }
-  .qsl\:\[\&\>\*\:last-child\]\:mb-0 > :last-child {
-    margin-bottom: 0px;
-  }
   @media (hover:none) {
     .qsl\:\[\@media\(hover\:none\)\]\:pointer-events-auto {
       pointer-events: auto;
@@ -1622,21 +1453,6 @@
       opacity: 100%;
     }
   }
-  li + .qsl\:\[li\+\&\]\:mt-1 {
-    margin-top: var(--qsl-spacing);
-  }
-  li > .qsl\:\[li\>\&\]\:my-0 {
-    margin-block: 0px;
-  }
-  p + .qsl\:\[p\+\&\]\:mt-3 {
-    margin-top: calc(var(--qsl-spacing) * 3);
-  }
-  pre > .qsl\:\[pre\>\&\]\:bg-transparent {
-    background-color: transparent;
-  }
-  pre > .qsl\:\[pre\>\&\]\:p-0 {
-    padding: 0px;
-  }
 }
 @property --tw-animation-delay {
   syntax: "*";
@@ -1727,6 +1543,139 @@
   inherits: true;
   initial-value: 13px;
 }
+@layer components {
+  [data-quassel-markdown] {
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+  [data-quassel-markdown] :where(strong, b) {
+    font-weight: 700;
+  }
+  [data-quassel-markdown] em {
+    font-style: italic;
+  }
+  [data-quassel-markdown] :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 700;
+    color: inherit;
+  }
+  [data-quassel-markdown] h1 {
+    margin: 1.5em 0 0.5em;
+    font-size: calc(var(--qsl-base) * 1.3);
+    line-height: 1.25;
+  }
+  [data-quassel-markdown] h2 {
+    margin: 1.5em 0 0.45em;
+    font-size: calc(var(--qsl-base) * 1.15);
+    line-height: 1.3;
+  }
+  [data-quassel-markdown] h3 {
+    margin: 1.35em 0 0.4em;
+    font-size: calc(var(--qsl-base) * 1.05);
+    line-height: 1.35;
+  }
+  [data-quassel-markdown] :where(h4, h5, h6) {
+    margin: 1.2em 0 0.3em;
+    font-size: var(--qsl-base);
+    line-height: 1.4;
+    color: var(--qsl-muted-foreground);
+  }
+  [data-quassel-markdown] :where(p, ul, ol, blockquote, [data-quassel-table]) {
+    margin-block: 0.75em;
+  }
+  [data-quassel-markdown] :where(ul, ol) {
+    padding-left: 1.5em;
+  }
+  [data-quassel-markdown] ul {
+    list-style: disc;
+  }
+  [data-quassel-markdown] ol {
+    list-style: decimal;
+  }
+  [data-quassel-markdown] li {
+    margin-block: 0.3em;
+  }
+  [data-quassel-markdown] li :where(ul, ol) {
+    margin-block: 0.25em 0;
+  }
+  [data-quassel-markdown] li > p {
+    margin: 0;
+  }
+  [data-quassel-markdown] code {
+    padding: 0.12em 0.4em;
+    border-radius: 0.38em;
+    background: var(--qsl-inline-code-background, var(--qsl-secondary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background: var(--qsl-inline-code-background, color-mix(in srgb, var(--qsl-secondary) 70%, transparent));
+    }
+    box-shadow: inset 0 0 0 1px var(--qsl-inline-code-edge, transparent);
+    color: var(--qsl-inline-code-foreground, inherit);
+    font-size: 0.9em;
+  }
+  [data-quassel-markdown] pre {
+    margin-block: 0.9em;
+    padding: 0.85em 1.05em;
+    border: 1px solid var(--qsl-code-border, var(--qsl-border));
+    border-radius: 0.7em;
+    background: var(--qsl-code-background, var(--qsl-secondary));
+    font-size: 0.9em;
+  }
+  [data-quassel-markdown] pre code {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font-size: inherit;
+  }
+  [data-quassel-markdown] a {
+    color: var(--qsl-primary);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+  }
+  [data-quassel-markdown] a:hover {
+    text-decoration-thickness: 2px;
+  }
+  [data-quassel-markdown] blockquote {
+    padding: 0.25em 1em;
+    border-left: 3px solid var(--qsl-primary);
+    background: var(--qsl-blockquote-background, var(--qsl-primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background: var(--qsl-blockquote-background, color-mix(in srgb, var(--qsl-primary) 6%, transparent));
+    }
+    color: var(--qsl-muted-foreground);
+  }
+  [data-quassel-markdown] :where(th, td) {
+    max-width: 44ch;
+    padding: 0.5em 0.85em;
+    border: 1px solid var(--qsl-border);
+    text-align: left;
+    vertical-align: top;
+  }
+  [data-quassel-markdown] th {
+    background: var(--qsl-secondary);
+    font-weight: 700;
+  }
+  [data-quassel-markdown] tbody tr:nth-child(even) {
+    background: var(--qsl-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--qsl-secondary) 35%, transparent);
+    }
+  }
+  [data-quassel-markdown] hr {
+    margin-block: 1.6em;
+    border-color: var(--qsl-border);
+  }
+  [data-quassel-markdown] > div > :first-child {
+    margin-top: 0;
+  }
+  [data-quassel-markdown] > div > :last-child {
+    margin-bottom: 0;
+  }
+  :where([data-tone="on-color"]) [data-quassel-markdown] :where(a, blockquote, h4, h5, h6) {
+    color: inherit;
+  }
+}
 @layer theme {
   :where(:root, :host, [data-theme="light"], [data-theme="system"]) {
     --qsl-color-scheme: light;
@@ -1838,14 +1787,17 @@
     font-family: var(--qsl-mono);
     font-feature-settings: normal;
     font-variation-settings: normal;
-    font-size: 1em;
+    font-size: 0.9em;
+    line-height: inherit;
   }
-  :where([data-quassel], [data-quassel] *):where(small) {
-    font-size: var(--qsl-text-small, 80%);
+  :where([data-quassel], [data-quassel] *):where(pre, pre code) {
+    font-size: inherit;
+  }
+  :where([data-quassel], [data-quassel] *):where(small, sub, sup) {
+    font-size: calc(var(--qsl-base) * 0.85);
+    line-height: 1.4;
   }
   :where([data-quassel], [data-quassel] *):where(sub, sup) {
-    font-size: 75%;
-    line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
@@ -1938,20 +1890,11 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -2097,9 +2040,7 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
-      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-ordinal: initial;