Skip to content

feat: add static css file for github pages analytics dashboards (#873)#874

Open
frano-m wants to merge 10 commits into
mainfrom
fran/873-static-css
Open

feat: add static css file for github pages analytics dashboards (#873)#874
frano-m wants to merge 10 commits into
mainfrom
fran/873-static-css

Conversation

@frano-m
Copy link
Copy Markdown
Contributor

@frano-m frano-m commented Apr 16, 2026

Summary

  • Add self-contained static CSS file (static/analytics.css) for GitHub Pages analytics dashboards
  • CSS matches the findable-ui design system (colors, spacing, typography, components)
  • All values extracted from the MUI theme and component configuration
  • Includes preview HTML file for visual testing (static/analytics-preview.html, excluded from npm package)

Closes #873

What's included

  • Custom properties — colors, spacing, shadows, border-radius, typography font shorthands (all overridable per-consumer)
  • Typography — all 16 theme variants as classes and CSS variables
  • Layout — page container, 12-column grid with span utilities, responsive 2-column grid
  • Components — header (3-area grid: left/center/right), cards, buttons (primary/secondary), divider, links, code
  • Content — scoped element styles for h1-h4, p, ul/ol, li, img (opt-in via .fui-content)
  • Color utilities — ink, primary, alert, info, success, warning
  • Responsive — 768px and 1440px breakpoints matching the theme

Test plan

  • Open static/analytics-preview.html in browser and verify visual match with findable-ui design system
  • Verify responsive behavior at 768px and 1440px breakpoints
  • Verify npm pack --dry-run includes static/analytics.css but excludes analytics-preview.html
  • Verify CSS custom property overrides work (e.g. changing --fui-primary)

🤖 Generated with Claude Code

image image image image

Copilot AI review requested due to automatic review settings April 16, 2026 06:18
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.css with design-system-aligned tokens (CSS custom properties) and component/layout utility classes.
  • Adds static/analytics-preview.html for manual visual verification of the CSS in a browser.
  • Updates package.json publish config to include static/**/*.css in 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.

Comment thread static/analytics.css
Comment thread static/analytics.css
Comment thread static/analytics.css
Comment thread static/analytics.css
Copilot AI review requested due to automatic review settings April 16, 2026 06:30
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

Comment thread static/analytics.css
Comment thread static/analytics.css
Comment thread static/analytics.css
@frano-m frano-m marked this pull request as ready for review April 16, 2026 06:39
Copilot AI review requested due to automatic review settings April 16, 2026 06:39
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

Comment thread static/analytics.css Outdated
Comment thread static/analytics.css
Comment thread static/analytics.css
Copilot AI review requested due to automatic review settings April 16, 2026 06:49
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

Comment thread static/analytics.css
Comment thread static/analytics.css
Comment thread static/analytics.css Outdated
@frano-m
Copy link
Copy Markdown
Contributor Author

frano-m commented Apr 16, 2026

@MillenniumFalconMechanic the header doesn't have a menu for mobile...

Copilot AI review requested due to automatic review settings April 16, 2026 20:03
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comment thread static/analytics.css

.fui-code {
font-family: "Roboto Mono", monospace;
font-size: 12px;
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.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.

Suggested change
font-size: 12px;
font-size: 12px;
font-style: normal;
font-weight: 400;

Copilot uses AI. Check for mistakes.
Comment thread static/analytics.css
Comment on lines +152 to +171
/* 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);
}
Copy link

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
frano-m and others added 10 commits May 13, 2026 12:47
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>
@frano-m frano-m force-pushed the fran/873-static-css branch from c32bfe5 to de62fa8 Compare May 13, 2026 02:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add static CSS file for GitHub Pages analytics dashboards

3 participants