Add skeleton-5.css by MrVauxs · Pull Request #888 · techniq/layerchart

MrVauxs · 2026-07-20T13:03:14Z

Related to #887. I have updated --color-surface-content to match the new version.
Note that I also changed --color-surface-100 as the text is barely readable in dark mode with its default configuration. That may just be something I have to do on my own end though and could be excised from this PR.

Not included are the docs or additional example repos.

Before

After

Updated CSS variables for surface colors and content colors in dark mode.

changeset-bot · 2026-07-20T13:03:21Z

🦋 Changeset detected

Latest commit: 6effaad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
layerchart	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pkg-pr-new · 2026-07-20T13:04:21Z

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@888

commit: 6effaad

github-actions · 2026-07-20T13:06:39Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
layerchart	✅ Ready (View Log)	Visit Preview	`6effaad`

github-actions · 2026-07-20T13:10:34Z

Bundle Size Analysis

Use-Case Scenarios

Core (7 changed)

Scenario	Current	New	Change
🟡 `core-line`	220.05 KB _{57.29 gz}	219.10 KB _{57.11 gz}	-0.95 KB (-0.4%) _{-0.18 gz (-0.3%)}
🟡 `core-canvas`	219.35 KB _{57.95 gz}	218.40 KB _{57.81 gz}	-0.95 KB (-0.4%) _{-0.14 gz (-0.2%)}
🟡 `core-scatter`	217.29 KB _{56.16 gz}	216.34 KB _{56.01 gz}	-0.95 KB (-0.4%) _{-0.16 gz (-0.3%)}
🟡 `core-geo`	213.58 KB _{55.88 gz}	212.63 KB _{55.71 gz}	-0.95 KB (-0.4%) _{-0.16 gz (-0.3%)}
🟡 `core-html`	201.22 KB _{52.51 gz}	200.27 KB _{52.34 gz}	-0.95 KB (-0.5%) _{-0.17 gz (-0.3%)}
🟡 `core-svg`	199.35 KB _{52.06 gz}	198.40 KB _{51.90 gz}	-0.95 KB (-0.5%) _{-0.15 gz (-0.3%)}
🟡 `core`	199.34 KB _{52.10 gz}	198.39 KB _{51.93 gz}	-0.95 KB (-0.5%) _{-0.18 gz (-0.3%)}

Base (agnostic) (4 changed)

Scenario	Current	New	Change
🟡 `base-svg-agnostic`	356.30 KB _{83.36 gz}	355.36 KB _{83.21 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}
🟡 `base-canvas-agnostic`	356.30 KB _{83.35 gz}	355.36 KB _{83.22 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.2%)}
🟡 `base-html-agnostic`	356.30 KB _{83.35 gz}	355.36 KB _{83.22 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.2%)}
🟡 `base`	356.29 KB _{83.36 gz}	355.36 KB _{83.21 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}

Base (layer-specific) (3 changed)

Scenario	Current	New	Change
🟡 `base-canvas`	340.92 KB _{80.22 gz}	339.98 KB _{80.07 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `base-html`	336.72 KB _{79.19 gz}	335.78 KB _{79.05 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}
🟡 `base-svg`	334.84 KB _{78.74 gz}	333.90 KB _{78.60 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.2%)}

Cartesian charts (27 changed)

Scenario	Current	New	Change
🟡 `PieChart`	395.48 KB _{91.76 gz}	394.54 KB _{91.60 gz}	-0.94 KB (-0.2%) _{-0.16 gz (-0.2%)}
🟡 `ArcChart`	388.74 KB _{90.59 gz}	387.79 KB _{90.44 gz}	-0.94 KB (-0.2%) _{-0.15 gz (-0.2%)}
🟡 `LineChart`	380.33 KB _{89.10 gz}	379.39 KB _{88.93 gz}	-0.94 KB (-0.2%) _{-0.17 gz (-0.2%)}
🟡 `PieChart-canvas`	378.08 KB _{88.22 gz}	377.14 KB _{88.09 gz}	-0.94 KB (-0.2%) _{-0.13 gz (-0.1%)}
🟡 `AreaChart`	374.29 KB _{87.32 gz}	373.35 KB _{87.17 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `PieChart-svg`	372.02 KB _{86.65 gz}	371.08 KB _{86.53 gz}	-0.94 KB (-0.3%) _{-0.11 gz (-0.1%)}
🟡 `ArcChart-canvas`	371.92 KB _{87.15 gz}	370.98 KB _{87.01 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}
🟡 `line-chart-interactive`	371.31 KB _{86.66 gz}	370.38 KB _{86.52 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}
🟡 `area-chart`	370.00 KB _{86.34 gz}	369.06 KB _{86.19 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `pie-chart`	368.59 KB _{85.84 gz}	367.65 KB _{85.68 gz}	-0.94 KB (-0.3%) _{-0.16 gz (-0.2%)}
🟡 `BarChart`	366.75 KB _{85.37 gz}	365.80 KB _{85.26 gz}	-0.94 KB (-0.3%) _{-0.11 gz (-0.1%)}
🟡 `ArcChart-svg`	365.85 KB _{85.60 gz}	364.90 KB _{85.46 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `bar-chart`	360.89 KB _{84.18 gz}	359.95 KB _{84.03 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `ScatterChart`	360.84 KB _{84.30 gz}	359.90 KB _{84.17 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.2%)}
🟡 `AreaChart-canvas`	358.10 KB _{84.02 gz}	357.16 KB _{83.91 gz}	-0.94 KB (-0.3%) _{-0.12 gz (-0.1%)}
🟡 `scatter-chart`	357.38 KB _{83.61 gz}	356.45 KB _{83.46 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `line-chart`	356.80 KB _{83.39 gz}	355.86 KB _{83.25 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}
🟡 `AreaChart-svg`	352.04 KB _{82.52 gz}	351.10 KB _{82.37 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `BarChart-canvas`	350.25 KB _{82.11 gz}	349.31 KB _{82.00 gz}	-0.94 KB (-0.3%) _{-0.11 gz (-0.1%)}
🟡 `LineChart-canvas`	347.92 KB _{81.90 gz}	346.98 KB _{81.78 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.2%)}
🟡 `ScatterChart-canvas`	344.57 KB _{80.96 gz}	343.63 KB _{80.84 gz}	-0.94 KB (-0.3%) _{-0.12 gz (-0.1%)}
🟡 `BarChart-svg`	344.19 KB _{80.60 gz}	343.25 KB _{80.49 gz}	-0.94 KB (-0.3%) _{-0.11 gz (-0.1%)}
🟡 `LineChart-svg`	341.86 KB _{80.40 gz}	340.92 KB _{80.25 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}
🟡 `line-chart-canvas`	340.95 KB _{80.22 gz}	340.01 KB _{80.09 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.2%)}
🟡 `ScatterChart-svg`	338.51 KB _{79.48 gz}	337.57 KB _{79.33 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `line-chart-html`	336.75 KB _{79.20 gz}	335.80 KB _{79.04 gz}	-0.94 KB (-0.3%) _{-0.15 gz (-0.2%)}
🟡 `line-chart-svg`	334.87 KB _{78.74 gz}	333.92 KB _{78.61 gz}	-0.94 KB (-0.3%) _{-0.12 gz (-0.2%)}

Geo (3 changed)

Scenario	Current	New	Change
🟡 `geo-full`	430.86 KB _{102.65 gz}	429.92 KB _{102.50 gz}	-0.94 KB (-0.2%) _{-0.15 gz (-0.1%)}
🟡 `geo-tiles`	378.43 KB _{88.87 gz}	377.49 KB _{88.71 gz}	-0.94 KB (-0.2%) _{-0.16 gz (-0.2%)}
🟡 `geo`	373.32 KB _{87.24 gz}	372.38 KB _{87.09 gz}	-0.94 KB (-0.3%) _{-0.14 gz (-0.2%)}

Hierarchy (4 changed)

Scenario	Current	New	Change
🟡 `hierarchy-tree`	398.11 KB _{93.50 gz}	397.17 KB _{93.38 gz}	-0.94 KB (-0.2%) _{-0.12 gz (-0.1%)}
🟡 `hierarchy-treemap`	377.63 KB _{88.60 gz}	376.69 KB _{88.46 gz}	-0.94 KB (-0.2%) _{-0.13 gz (-0.2%)}
🟡 `hierarchy-pack`	377.35 KB _{88.69 gz}	376.42 KB _{88.55 gz}	-0.94 KB (-0.2%) _{-0.14 gz (-0.2%)}
🟡 `dodge`	374.99 KB _{87.89 gz}	374.05 KB _{87.76 gz}	-0.94 KB (-0.3%) _{-0.13 gz (-0.1%)}

Graph / network (4 changed)

Scenario	Current	New	Change
🟡 `dagre`	456.68 KB _{109.51 gz}	455.75 KB _{109.38 gz}	-0.93 KB (-0.2%) _{-0.14 gz (-0.1%)}
🟡 `force`	400.52 KB _{94.34 gz}	399.58 KB _{94.20 gz}	-0.94 KB (-0.2%) _{-0.14 gz (-0.2%)}
🟡 `sankey`	400.25 KB _{93.73 gz}	399.30 KB _{93.60 gz}	-0.95 KB (-0.2%) _{-0.13 gz (-0.1%)}
🟡 `chord`	366.02 KB _{85.52 gz}	365.09 KB _{85.41 gz}	-0.94 KB (-0.3%) _{-0.11 gz (-0.1%)}

Worst case (1 changed)

Scenario	Current	New	Change
🟡 `all`	1013.72 KB _{238.24 gz}	1012.80 KB _{238.08 gz}	-0.92 KB (-0.1%) _{-0.15 gz (-0.1%)}

Understanding this report

Use-case scenarios measure the bundle cost of common chart configurations (e.g. a line chart with axes)
Individual components measure each component imported in isolation
Svelte runtime is excluded; sizes reflect layerchart + its dependencies (d3, etc.)
When multiple components share dependencies (e.g. d3-scale), the real-world cost is lower than the sum of individual sizes
Changes smaller than 10 bytes or 0.1% are considered insignificant

techniq · 2026-07-20T13:27:12Z

+  --color-surface-content: light-dark(
+    var(--typo-base--color-light),
+    var(--typo-base--color-dark)
+  );


haven't typically used light-dark() for light/default color and typically just set to light mode by default.

shouldn't technically matter and has descent browser support (2 years+, Safari 17.5+)

The problem is that Tailwind uses prefers-color-scheme by default which makes picking one break the other. And Skeleton 5 does not have one variable for color anymore, it has to be explicitly light or dark.

yeah, I think Skeleton hasn't had a single variable for color since at least 3.x (the main reason we use html.dark to swap variables, unlike the other integrations like shadcn-svelte, daisy-ui, etc which are much simplier).

Using light-dark() will make font color work, but in that vein we'd probably want to do the same for the surface colors (as if you're not using <html class="dark"> you could get --typo-base--color-dark for text in dark mode but also the light surface-* colors.

https://www.skeleton.dev/docs/svelte/guides/mode

Will take a little experimentation to make sure prefers-color-scheme and html.dark works if we go down this path. I've always preferred using html.dark since typically a user with light/dark modes for their site also have an explicit toggle (see also: https://www.skeleton.dev/docs/svelte/guides/cookbook/light-switch).

Regardless, we can iterate on this. Also the integration styles (skeleton-5.css, etc) are provided to streamline setup but also are more a reference if you handle things differently (such as using another strategy like <html data-mode="dark">)

techniq · 2026-07-20T13:29:32Z

also if you could add a changeset (pnpm changeset, patch) this will allow a release to be deployed and update CHANGELOG

Refactor color variables in skeleton-5.css

e852dba

Updated CSS variables for surface colors and content colors in dark mode.

Make the surface-content work on default dark mode

b4a4555

github-actions Bot deployed to Preview July 20, 2026 13:06 View deployment

Add changeset

b2702fa

MrVauxs changed the title ~~Fix #887~~ Add skeleton-5.css Jul 20, 2026

github-actions Bot deployed to Preview July 20, 2026 13:17 View deployment

techniq reviewed Jul 20, 2026

View reviewed changes

Comment thread packages/layerchart/src/lib/styles/skeleton-5.css Outdated

techniq reviewed Jul 20, 2026

View reviewed changes

Update skeleton-5.css

6effaad

github-actions Bot deployed to Preview July 20, 2026 13:51 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add skeleton-5.css#888

Add skeleton-5.css#888
MrVauxs wants to merge 4 commits into
techniq:mainfrom
MrVauxs:skeleton-5

MrVauxs commented Jul 20, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 20, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jul 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 20, 2026

Uh oh!

Uh oh!

techniq Jul 20, 2026

Uh oh!

MrVauxs Jul 20, 2026 •

edited

Loading

Uh oh!

techniq Jul 20, 2026

Uh oh!

techniq commented Jul 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

MrVauxs commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Uh oh!

github-actions Bot commented Jul 20, 2026

Bundle Size Analysis

Use-Case Scenarios

Uh oh!

Uh oh!

techniq Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

MrVauxs Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

techniq Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

techniq commented Jul 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MrVauxs commented Jul 20, 2026 •

edited

Loading

changeset-bot Bot commented Jul 20, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 20, 2026 •

edited

Loading

github-actions Bot commented Jul 20, 2026 •

edited

Loading

MrVauxs Jul 20, 2026 •

edited

Loading