[web] Update shell styles (#260)

* [web] Update shell styles

* Update theme

* Update themes

Author: paullewis

editor/theme/theme.ts

@@ -375,6 +375,8 @@ export const theme: v0_8.Types.Theme = {
     h1: h1Light,
     h2: h2Light,
     h3: h3Light,
+    h4: {},
+    h5: {},
     iframe,
     input: inputLight,
     p: pLight,
@@ -389,7 +391,6 @@ export const theme: v0_8.Types.Theme = {
     h3: [...Object.keys(h3Light)],
     h4: [],
     h5: [],
-    h6: [],
     ul: [...Object.keys(unorderedListLight)],
     ol: [...Object.keys(orderedListLight)],
     li: [...Object.keys(listItemLight)],

renderers/lit/src/0.8/styles/colors.ts

@@ -45,8 +45,8 @@ const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
             background-color: light-dark(oklch(from var(${toProp(
               key
             )}) l c h / calc(alpha * ${o.toFixed(1)})), oklch(from var(${toProp(
-              inverseKey
-            )}) l c h / calc(alpha * ${o.toFixed(1)})) );
+            inverseKey
+          )}) l c h / calc(alpha * ${o.toFixed(1)})) );
           }
         `);
         }
@@ -92,5 +92,9 @@ export const colors = [
     .color-bgc-transparent {
       background-color: transparent;
     }
+
+    :host {
+      color-scheme: var(--color-scheme);
+    }
   `,
 ];

renderers/lit/src/0.8/styles/type.ts

@@ -136,6 +136,14 @@ export const type = `
     white-space: pre-line;
   }
 
+  .typography-ws-nw {
+    white-space: nowrap;
+  }
+
+  .typography-td-none {
+    text-decoration: none;
+  }
+
   /** Weights **/
 
   ${new Array(9)

renderers/lit/src/0.8/types/types.ts

@@ -138,6 +138,8 @@ export type Theme = {
     h1: Record<string, boolean>;
     h2: Record<string, boolean>;
     h3: Record<string, boolean>;
+    h4: Record<string, boolean>;
+    h5: Record<string, boolean>;
     iframe: Record<string, boolean>;
     input: Record<string, boolean>;
     p: Record<string, boolean>;
@@ -152,7 +154,6 @@ export type Theme = {
     h3: string[];
     h4: string[];
     h5: string[];
-    h6: string[];
     ul: string[];
     ol: string[];
     li: string[];
@@ -177,7 +178,17 @@ export type Theme = {
     Row?: Record<string, string>;
     Slider?: Record<string, string>;
     Tabs?: Record<string, string>;
-    Text?: Record<string, string>;
+    Text?:
+      | Record<string, string>
+      | {
+          h1: Record<string, string>;
+          h2: Record<string, string>;
+          h3: Record<string, string>;
+          h4: Record<string, string>;
+          h5: Record<string, string>;
+          body: Record<string, string>;
+          caption: Record<string, string>;
+        };
     TextField?: Record<string, string>;
     Video?: Record<string, string>;
   };
@@ -274,7 +285,7 @@ export type ValueMap = DataObject & {
   valueNumber?: number;
   valueBoolean?: boolean;
   valueMap?: ValueMap[];
-}
+};
 
 export interface DeleteSurfaceMessage {
   surfaceId: string;

renderers/lit/src/0.8/ui/button.ts

@@ -35,7 +35,6 @@ export class Button extends Root {
         display: block;
         flex: var(--weight);
         min-height: 0;
-        overflow: auto;
       }
     `,
   ];

renderers/lit/src/0.8/ui/component-registry.ts

@@ -17,15 +17,18 @@
 import { CustomElementConstructorOf } from "./ui.js";
 
 export class ComponentRegistry {
-  private registry: Map<string, CustomElementConstructorOf<HTMLElement>> = new Map();
+  private registry: Map<string, CustomElementConstructorOf<HTMLElement>> =
+    new Map();
 
   register(
     typeName: string,
     constructor: CustomElementConstructorOf<HTMLElement>,
     tagName?: string
   ) {
     if (!/^[a-zA-Z0-9]+$/.test(typeName)) {
-      throw new Error(`[Registry] Invalid typeName '${typeName}'. Must be alphanumeric.`);
+      throw new Error(
+        `[Registry] Invalid typeName '${typeName}'. Must be alphanumeric.`
+      );
     }
 
     this.registry.set(typeName, constructor);
@@ -35,7 +38,9 @@ export class ComponentRegistry {
     if (existingName) {
       // Constructor is already registered.
       if (existingName !== actualTagName) {
-        throw new Error(`Component ${typeName} is already registered as ${existingName}, but requested as ${actualTagName}.`);
+        throw new Error(
+          `Component ${typeName} is already registered as ${existingName}, but requested as ${actualTagName}.`
+        );
       }
       return;
     }
@@ -50,4 +55,4 @@ export class ComponentRegistry {
   }
 }
 
-export const REGISTRY = new ComponentRegistry();
+export const componentRegistry = new ComponentRegistry();

renderers/lit/src/0.8/ui/directives/markdown.ts

@@ -61,7 +61,7 @@ class MarkdownDirective extends Directive {
 
   #originalClassMap = new Map<string, RenderRule | undefined>();
   #applyTagClassMap(tagClassMap: Record<string, string[]>) {
-    Object.entries(tagClassMap).forEach(([tag, classes]) => {
+    Object.entries(tagClassMap).forEach(([tag]) => {
       let tokenName;
       switch (tag) {
         case "p":
@@ -100,34 +100,27 @@ class MarkdownDirective extends Directive {
       }
 
       const key = `${tokenName}_open`;
-      const original: RenderRule | undefined =
-        this.#markdownIt.renderer.rules[key];
-      this.#originalClassMap.set(key, original);
-
       this.#markdownIt.renderer.rules[key] = (
         tokens,
         idx,
         options,
-        env,
+        _env,
         self
       ) => {
         const token = tokens[idx];
-        for (const clazz of classes) {
+        const tokenClasses = tagClassMap[token.tag] ?? [];
+        for (const clazz of tokenClasses) {
           token.attrJoin("class", clazz);
         }
 
-        if (original) {
-          return original.call(this, tokens, idx, options, env, self);
-        } else {
-          return self.renderToken(tokens, idx, options);
-        }
+        return self.renderToken(tokens, idx, options);
       };
     });
   }
 
   #unapplyTagClassMap() {
-    for (const [key, original] of this.#originalClassMap) {
-      this.#markdownIt.renderer.rules[key] = original;
+    for (const [key] of this.#originalClassMap) {
+      delete this.#markdownIt.renderer.rules[key];
     }
 
     this.#originalClassMap.clear();

renderers/lit/src/0.8/ui/root.ts

@@ -33,8 +33,7 @@ import { StringValue } from "../types/primitives.js";
 import { Theme, AnyComponentNode, SurfaceID } from "../types/types.js";
 import { themeContext } from "./context/theme.js";
 import { structuralStyles } from "./styles.js";
-import { ComponentRegistry, REGISTRY } from './component-registry.js';
-import { ThemeManager } from "./theme/manager.js";
+import { componentRegistry } from "./component-registry.js";
 
 type NodeOfType<T extends AnyComponentNode["type"]> = Extract<
   AnyComponentNode,
@@ -82,6 +81,7 @@ export class Root extends SignalWatcher(LitElement) {
     css`
       :host {
         display: flex;
+        flex-direction: column;
         gap: 8px;
         max-height: 80%;
       }
@@ -94,23 +94,6 @@ export class Root extends SignalWatcher(LitElement) {
    */
   #lightDomEffectDisposer: null | (() => void) = null;
 
-  #themeUnsubscribe: null | (() => void) = null;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.#themeUnsubscribe = ThemeManager.subscribe((sheets) => {
-      if (this.shadowRoot) {
-        const elementStyles = (this.constructor as typeof LitElement).elementStyles;
-        const baseStyles = elementStyles.map(s => {
-          if (s instanceof CSSStyleSheet) return s;
-          return s.styleSheet;
-        }).filter((s): s is CSSStyleSheet => !!s);
-
-        this.shadowRoot.adoptedStyleSheets = [...baseStyles, ...sheets];
-      }
-    });
-  }
-
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("childComponents")) {
       if (this.#lightDomEffectDisposer) {
@@ -140,10 +123,6 @@ export class Root extends SignalWatcher(LitElement) {
     if (this.#lightDomEffectDisposer) {
       this.#lightDomEffectDisposer();
     }
-
-    if (this.#themeUnsubscribe) {
-      this.#themeUnsubscribe();
-    }
   }
 
   /**
@@ -163,7 +142,7 @@ export class Root extends SignalWatcher(LitElement) {
     return html` ${map(components, (component) => {
       // 1. Check if there is a registered custom component or override.
       if (this.enableCustomElements) {
-        const registeredCtor = REGISTRY.get(component.type);
+        const registeredCtor = componentRegistry.get(component.type);
         // We also check customElements.get for non-registered but defined elements
         const elCtor = registeredCtor || customElements.get(component.type);
 
@@ -522,7 +501,7 @@ export class Root extends SignalWatcher(LitElement) {
     }
 
     const node = component as AnyComponentNode;
-    const registeredCtor = REGISTRY.get(component.type);
+    const registeredCtor = componentRegistry.get(component.type);
     const elCtor = registeredCtor || customElements.get(component.type);
 
     if (!elCtor) {

renderers/lit/src/0.8/ui/surface.ts

@@ -37,7 +37,6 @@ export class Surface extends Root {
       :host {
         display: flex;
         min-height: 0;
-        overflow: auto;
         max-height: 100%;
         flex-direction: column;
         gap: 16px;
@@ -75,17 +74,19 @@ export class Surface extends Root {
       for (const [key, value] of Object.entries(this.surface.styles)) {
         switch (key) {
           case "primaryColor": {
-            for (let i = 0; i <= 100; i++) {
-              styles[`--p-${i}`] = `color-mix(in srgb, ${value} ${
-                100 - i
-              }%, #fff ${i}%)`;
-            }
+            // Ignored for now.
+            // for (let i = 0; i <= 100; i++) {
+            //   styles[`--p-${i}`] = `color-mix(in srgb, ${value} ${
+            //     100 - i
+            //   }%, #fff ${i}%)`;
+            // }
             break;
           }
 
           case "font": {
-            styles["--font-family"] = value;
-            styles["--font-family-flex"] = value;
+            // Ignored for now.
+            // styles["--font-family"] = value;
+            // styles["--font-family-flex"] = value;
             break;
           }
         }

renderers/lit/src/0.8/ui/text.ts

@@ -41,6 +41,15 @@ export class Text extends Root {
         display: block;
         flex: var(--weight);
       }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5 {
+        line-height: inherit;
+        font: inherit;
+      }
     `,
   ];
 
@@ -109,10 +118,21 @@ export class Text extends Root {
       this.usageHint ? this.theme.components.Text[this.usageHint] : {}
     );
 
+    let additionalStyles: Record<string, string> = {};
+    const styles = this.theme.additionalStyles?.Text;
+    if (styles) {
+      if ("h1" in styles) {
+        const hint = this.usageHint ?? "body";
+        additionalStyles = styles[hint] as Record<string, string>;
+      } else {
+        additionalStyles = styles;
+      }
+    }
+
     return html`<section
       class=${classMap(classes)}
       style=${this.theme.additionalStyles?.Text
-        ? styleMap(this.theme.additionalStyles?.Text)
+        ? styleMap(additionalStyles)
         : nothing}
     >
       ${this.#renderText()}