feat(emerald): add new paper design system#167
Conversation
|
commit: |
johnleider
force-pushed
the
feat/emerald-paper-design-system
branch
from
db48422 to
dce42a8
Compare
J-Sek
left a comment
J-Sek
left a comment
There was a problem hiding this comment.
I have only focused about kitchen sink look&feel for now. Some small problems that should be easy to fix.
Other than mentioned in comments:
- lack of animations (dialog, autocomplete menu, accordion, tabs)
- carousel moves from slide 3 » 2 when clicked anywhere
- any plans to support light/dark mode?
| padding: 2px 10px 2px 6px; | ||
| font-size: 11px; | ||
| line-height: 18px; | ||
| letter-spacing: -0.02em; |
There was a problem hiding this comment.
IMO should be consistent with other variant. -0.02em is also a bit small for the chosen font face. rn looks like m, cl blends as well and might read as d.
| <style> | ||
| .emerald-card__title { | ||
| margin: 0; | ||
| font-family: Manrope, system-ui, -apple-system, sans-serif; |
There was a problem hiding this comment.
Would be nice to have those styles driven from a handful of centralized CSS properties (font face, semantic colors, spacing, rounding). Otherwise consumption depends on availability of cheap AI tools that can handle tedious replacements.
| border: 1px solid rgb(var(--emerald-neutral-channels) / 0.1); | ||
| border-radius: 8px; | ||
| overflow: hidden; | ||
| filter: blur(1px); |
There was a problem hiding this comment.
it looks like a bug with blur so small, especially when slides display text
| :step | ||
| > | ||
| <template #default="slotProps"> | ||
| <slot v-bind="slotProps" /> |
There was a problem hiding this comment.
For values near the edges (0-3 and 97-100) the thumb appears outside of the rounded track. The easiest fix that comes to mind would be just a div with padding around the thumb. Not sure if it can be done without introducing artificial EmSwitchThumbContainer. Ideally it would be solved on the lower level as it might be a typical scenario.
| .emerald-radio__indicator { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| line-height: 0; | ||
| } |
There was a problem hiding this comment.
Can be removed, as it takes the size from the dot inside and gets centered by styles from the __box
| > | ||
| <RadioIndicator class="emerald-radio__indicator"> | ||
| <template #default> | ||
| <span class="emerald-radio__dot" /> |
There was a problem hiding this comment.
HTML-based radio button gets misaligned when using browser zoom. It might be better to have svg/icon here like in the checkbox.
| background: var(--emerald-primary-100); | ||
| border-left-color: var(--emerald-primary-500); | ||
| color: var(--emerald-primary-500); | ||
| font-weight: 500; |
There was a problem hiding this comment.
It does not look right and some popular typefaces change visual letter height between 400 and 500 weight - so this might be distracting. I'd just drop it to keep it safe.
|
Tried to update this PR to latest master but the conflict surface is too broad (273+ files: docs pages, examples, component test suites, philosophy doc, skill rules, multiple plugin adapters, etc.). The branch's last merge from master was at |
Adds @paper/emerald — the first commercial design system built on the Paper layer. Includes 36 component families (EmButton, EmTextField, EmDialog, EmAutoComplete, EmAccordion, EmAvatar, EmBadge, EmBreadcrumb, EmCard, EmCarousel, EmCheckbox, EmContainer, EmDatePicker, EmDivider, EmFlex, EmForm, EmGrid, EmList, EmLoading, EmMenu, EmPagination, EmProgress, EmRadio, EmSelect, EmSlider, EmStepper, EmSwitch, EmTable, EmTabs, EmTag, EmTextarea, EmToast, EmTooltip, EmUpload), design tokens from the Figma spec, an EmeraldStyleSheetAdapter that extends v0's V0StyleSheetThemeAdapter, and a createEmeraldPlugin for one-line setup. Also adds .claude/rules/paper-components.md — the path-scoped rule doc that codifies the V0Paper-based component patterns design systems use. Pulls in @phosphor-icons/vue via the pnpm catalog (used by Em components for iconography) and registers packages/emerald in the knip workspace config.
Adds the EmeraldKitchenSink page that renders every component family at least once for visual verification. Registers a /emerald route in dev/src/main.ts, exposes the emerald components directory and @paper/ emerald alias in dev/vite.config.ts, and lists @paper/emerald + @phosphor-icons/vue as dev workspace deps. Auto-imports (components.d.ts, composables.d.ts) regenerated to capture the new Em* components and adapter exports surfaced by recent v0 changes.
johnleider
force-pushed
the
feat/emerald-paper-design-system
branch
from
a1e4119 to
7a69917
Compare
|
Force-pushed a clean reassembly of the emerald work on top of current master. The previous branch had drifted ~6 months behind master and accumulated unrelated changes via a stale Instead, this is a fresh branch from master with only the emerald-scoped work pulled forward:
Two commits:
Verified locally:
Original branch is preserved in the worktree at |
johnleider
changed the title
2 participants
Summary
.claude/rules/paper-components.mdcontract with 5 concrete patterns for building Paper DS componentsPaper Composable Rework
All 6 composables (
useBorder,useSpacing,useDimensions,useRounded,useElevation,useColor) now return utility class arrays. V0Paper applies via:classinstead of:style.Reference Components
Design Tokens
Complete Emerald token system: primary (purple), secondary (slate), success/warning/error/info semantics, Manrope typography (6 sizes), border radius/width scales, 6 shadow elevations.
Test plan
pnpm typecheck— all 3 packages passpnpm lint:fix— cleanpnpm test:run— 88 files, 3921 tests passingpnpm repo:check— knip + sherif clean