feat: design style guide + inline color swatches#37
Draft
Conversation
Contributor
Release Version Check
This version will be released automatically when this PR is merged to |
Contributor
Preview DeploymentThe web app for this PR has been deployed: Use this to verify the app works correctly, especially for dependency updates. |
Comprehensive design system documentation covering color palette (light and dark mode), typography scale, spacing/layout grid, shadows, icons, responsive breakpoints, and CSS architecture. Includes detailed sections on accessibility (WCAG 2.1 AA), platform adaptations (desktop/tablet/mobile), input mode differences (keyboard/ mouse vs touch), and power user vs guided experience patterns. https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic
Add the new design-style-guide page to the DOC_PAGES registry in docs/src/index.ts so it appears in programmatic navigation. https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic
Add the design style guide markdown content to docs-content.ts so it appears in the in-app documentation space. Includes page tree entry, content map, source path, and folder summary update. https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic
nsheaps
force-pushed
the
claude/add-design-style-guide-tOY63
branch
from
1158e25 to
3b820cf
Compare
nsheaps
changed the title
Add a TipTap extension that auto-detects CSS color values inside inline code and renders a small colored square swatch to the left — similar to Chrome DevTools. Supports hex (#rgb, #rrggbb, #rrggbbaa), rgb(), rgba(), hsl(), hsla(), oklch(), oklab(), lch(), lab(), hwb(), color(), and all 148 CSS named colors. Uses a ProseMirror decoration plugin so the underlying markdown is unchanged — no special authoring syntax needed. Swatch has a checkerboard background pattern to reveal transparency in alpha colors, with dark mode border adaptation. https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic
nsheaps
changed the title
The checkerboard pattern was rendered as background-image on the same element as the inline background-color, which meant it painted over the color. Move the checkerboard to a ::before pseudo-element with z-index -1 so it only shows through transparent/semi-transparent colors. https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic
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
2 participants
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.
Summary
Two features that complement each other: a comprehensive design style guide document, and an inline color swatch renderer that brings the color values in that document (and any other page) to life.
1. Design & Style Guide (
docs/content/reference/design-style-guide.md)A 386-line reference document for contributors covering:
--cept-prefixRegistered in:
docs/src/index.ts(metadata)docs/content/index.md(navigation link)packages/ui/src/components/docs/docs-content.ts(in-app docs space — visible in preview deployments)2. Inline Color Swatches (
CodeColorSwatchextension)A TipTap ProseMirror plugin that auto-detects CSS color values inside inline code and renders a small colored square swatch to the left — like Chrome DevTools.
Supported formats:
#rgb,#rgba,#rrggbb,#rrggbbaargb(),rgba(),hsl(),hsla(),oklch(),oklab(),lch(),lab(),hwb(),color()transparentHow it works:
<span>widget decoration withbackground-colorset to the detected valueFiles added:
extensions/color-utils.ts— Color detection with regex for all CSS color formatsextensions/code-color-swatch.ts— TipTap Extension with ProseMirror decoration pluginextensions/color-utils.test.ts— 20 tests covering all color formats + edge casesextensions/code-color-swatch.test.ts— 4 tests for extension structureChanges
docs/content/reference/design-style-guide.mddocs/content/index.mddocs/src/index.tspackages/ui/src/components/docs/docs-content.tspackages/ui/src/components/editor/extensions/color-utils.tspackages/ui/src/components/editor/extensions/code-color-swatch.tspackages/ui/src/components/editor/extensions/index.tspackages/ui/src/components/editor/CeptEditor.tsxpackages/ui/src/components/editor/editor-styles.cssTest plan
bun run validate)https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic