Make shared-components tiles render identically outside Element Web - # 1 (#33418)

* Apply event presentation attributes to timeline previews and errors * Make TextualEventView render the same in web and storybook * Make TileErrorView render the same in app/web and storybook * Updated snapshots * Make it possible to view shared components with default app/web base styling. * Adjust styling and add underline to pass tests * Fix Sonar issue * Rename base css to root css * Handle font styling correctly
2026-05-11 11:06:11 +00:00
parent 82fef06895
commit eb08257b77
24 changed files with 302 additions and 122 deletions
@@ -0,0 +1,71 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/*
+ * Match the app/web shell baseline without importing app/web component styles.
+ * Shared component stories should inherit the same root typography and font
+ * feature settings as the real app, while still owning their component styling.
+ */
+@layer app-web {
+    :root[data-storybook-root-css="app-web"] {
+        [class^="cpd-theme"][class^="cpd-theme"] {
+            --cpd-font-family-sans:
+                "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
+                "Noto Color Emoji";
+        }
+
+        body {
+            font: var(--cpd-font-body-md-regular) !important;
+            letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
+            font-feature-settings:
+                "kern" 1,
+                "liga" 1,
+                "calt" 1 !important;
+
+            background-color: var(--cpd-color-bg-canvas-default);
+            color: var(--cpd-color-text-primary);
+            border: 0;
+            margin: 0;
+
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        pre,
+        code {
+            font-family:
+                "Fira Code", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji";
+            font-size: 100% !important;
+        }
+    }
+
+    /* Username color classes - these are defined in the main app's _common.pcss
+   but need to be available in Storybook for components that use colorClass */
+    .mx_Username_color1 {
+        color: var(--cpd-color-text-decorative-1);
+    }
+
+    .mx_Username_color2 {
+        color: var(--cpd-color-text-decorative-2);
+    }
+
+    .mx_Username_color3 {
+        color: var(--cpd-color-text-decorative-3);
+    }
+
+    .mx_Username_color4 {
+        color: var(--cpd-color-text-decorative-4);
+    }
+
+    .mx_Username_color5 {
+        color: var(--cpd-color-text-decorative-5);
+    }
+
+    .mx_Username_color6 {
+        color: var(--cpd-color-text-decorative-6);
+    }
+}