feat: add static css file for github pages analytics dashboards (#873)#874
feat: add static css file for github pages analytics dashboards (#873)#874frano-m wants to merge 10 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a self-contained static stylesheet to let GitHub Pages analytics dashboards adopt the findable-ui design system without bundling the full React/MUI library.
Changes:
- Introduces
static/analytics.csswith design-system-aligned tokens (CSS custom properties) and component/layout utility classes. - Adds
static/analytics-preview.htmlfor manual visual verification of the CSS in a browser. - Updates
package.jsonpublish config to includestatic/**/*.cssin the npm package while excluding the preview HTML.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| static/analytics.css | New standalone CSS variables + utility/component styles for dashboards. |
| static/analytics-preview.html | New preview page to manually validate styles and responsiveness. |
| package.json | Publishes static CSS assets via the files allowlist. |
|
@MillenniumFalconMechanic the header doesn't have a menu for mobile... |
|
|
||
| .fui-code { | ||
| font-family: "Roboto Mono", monospace; | ||
| font-size: 12px; |
There was a problem hiding this comment.
.fui-code sets font family/size/line-height but doesn’t reset font-weight, so code text will inherit weight from its parent (e.g., 500 inside headings), which diverges from the design system baseline where code uses the body-400-2lines font (weight 400) plus mono family. Consider explicitly setting a normal font weight (and style) for .fui-code to keep code styling consistent regardless of where it’s used.
| font-size: 12px; | |
| font-size: 12px; | |
| font-style: normal; | |
| font-weight: 400; |
| /* Typography */ | ||
| --fui-font-family: | ||
| "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, | ||
| Arial, sans-serif; | ||
| --fui-font-body-400: 400 14px/20px var(--fui-font-family); | ||
| --fui-font-body-400-2lines: 400 14px/24px var(--fui-font-family); | ||
| --fui-font-body-500: 500 14px/20px var(--fui-font-family); | ||
| --fui-font-body-large-400: 400 16px/24px var(--fui-font-family); | ||
| --fui-font-body-large-400-2lines: 400 16px/28px var(--fui-font-family); | ||
| --fui-font-body-large-500: 500 16px/24px var(--fui-font-family); | ||
| --fui-font-body-small-400: 400 13px/16px var(--fui-font-family); | ||
| --fui-font-body-small-400-2lines: 400 13px/20px var(--fui-font-family); | ||
| --fui-font-body-small-500: 500 13px/16px var(--fui-font-family); | ||
| --fui-font-heading: 500 20px/28px var(--fui-font-family); | ||
| --fui-font-heading-large: 500 24px/32px var(--fui-font-family); | ||
| --fui-font-heading-small: 500 18px/26px var(--fui-font-family); | ||
| --fui-font-heading-xlarge: 500 30px/40px var(--fui-font-family); | ||
| --fui-font-heading-xsmall: 500 16px/24px var(--fui-font-family); | ||
| --fui-font-uppercase-500: 500 12px/16px var(--fui-font-family); | ||
| } |
There was a problem hiding this comment.
The PR description states “Typography — all 16 theme variants as classes and CSS variables”, but this stylesheet defines 15 typography shorthands/classes (matching src/theme/common/typography.ts). Please either add the missing variant (if one is intended) or update the documentation/claims to avoid confusion for consumers.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
#873) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…reset (#873) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…block on images (#873) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
c32bfe5 to
de62fa8
Compare
Summary
static/analytics.css) for GitHub Pages analytics dashboardsstatic/analytics-preview.html, excluded from npm package)Closes #873
What's included
.fui-content)Test plan
static/analytics-preview.htmlin browser and verify visual match with findable-ui design systemnpm pack --dry-runincludesstatic/analytics.cssbut excludesanalytics-preview.html--fui-primary)🤖 Generated with Claude Code