Repository navigation
Conversation
The square colours, the board border and the frame label size now read custom properties (--chess-board-light, --chess-board-dark, --chess-board-border, --chess-board-frame-font-size) with the previous hard-coded values as defaults, so a page can match the board to its own palette without forking the component. Every cell carries part="square <name> <shade>", the 8x8 table is part="board" and the file and rank labels are part="frame", so a page can highlight the last move with chess-board::part(e2), chess-board::part(e4). Closes #21 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VxKhiVNXdQ8Z1grVs38gY6
|
Preview for 81d2b3c: https://0d31b68a.chess-board-4mh.pages.dev Branch alias (always the latest push): https://claude-github-issues-triage-3zsy.chess-board-4mh.pages.dev |
laat
changed the base branch from
master
to
claude/web-component-demo-site-u51bei
September 6, 2026 07:58
Two examples on the demo page: one board in green with no border through the custom properties, and one with the last move marked through ::part(). The source block under an example now includes the CSS from a <style> in the example, since these need it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VxKhiVNXdQ8Z1grVs38gY6
laat
force-pushed
the
claude/github-issues-triage-4rzmzx-styling-hooks
branch
from
September 6, 2026 08:12
81d2b3c to
a3ef296
Compare
laat
changed the base branch from
claude/web-component-demo-site-u51bei
to
master
September 6, 2026 08:12
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #21.
Both shapes proposed in the issue, since they cost nothing together and neither touches the JavaScript API.
Custom properties
The shadow stylesheet now reads these, with the previous hard-coded values as defaults, so nothing changes for existing pages:
--chess-board-light#FFCE9E--chess-board-dark#D18B47--chess-board-border1px solid black--chess-board-frame-font-size40%The frame label size is included because the issue lists it among the values a page could not reach.
Parts
part="square <name> <shade>", e.g.square e4 light, sochess-board::part(e2), chess-board::part(e4) { box-shadow: inset 0 0 0 0.15em #f0d13a }marks a last move.part="board".part="frame".The
highlightattribute alternative is left out: parts cover it with no JS, and an attribute can be layered on top later if it turns out to be wanted for discoverability.Demo
Two examples added to
index.html, in the page's existing style: a green board with no border through the custom properties, and a board with the last move (e2, e4) marked through::part(). The source block under an example now includes the CSS from a<style>inside the example, since these two need it.Verification
a8,d4,e4andh1, on all 64 cells and all frame cells, and that the stylesheet reads each custom property with the original default.::part(e4)overrides the square colour, the custom colours and border apply, neighbouring squares are untouched, and the generated source block shows the CSS.pnpm typecheck,pnpm test(30 tests),pnpm buildandpnpm build:pagespass.Docs
readme.mdgains a Styling section with both tables and examples.changelog.mdgets an Unreleased entry.Note: this PR and #24 both change the table builder in
src/chess-board.tsand add anUnreleasedheading tochangelog.md, so whichever merges second needs a conflict resolution.🤖 Generated with Claude Code
https://claude.ai/code/session_01VxKhiVNXdQ8Z1grVs38gY6