@cueplusplus/ui 0.16.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +901 -0
- package/README.md +1 -1
- package/dist/agent-runtime/tool-call-card.js +7 -3
- package/dist/brand/_chassis.d.ts +1 -1
- package/dist/brand/cue-mark.d.ts +1 -1
- package/dist/brand/cue-mark.js +1 -1
- package/dist/charts/ramps.js +1 -1
- package/dist/chat/agent-pile.js +2 -1
- package/dist/chat/ask-box.js +4 -3
- package/dist/chat/delegation-card.js +3 -2
- package/dist/chat/message-list.js +3 -2
- package/dist/chat/message.js +17 -7
- package/dist/chrome/_edge-scroller.js +2 -1
- package/dist/chrome/_status-bar.js +9 -3
- package/dist/chrome/_tabs-scroll.d.ts +1 -1
- package/dist/chrome/_tabs-scroll.js +1 -1
- package/dist/chrome/app-bar.js +9 -3
- package/dist/chrome/app-shell.js +2 -1
- package/dist/chrome/band.d.ts +18 -12
- package/dist/chrome/band.js +18 -32
- package/dist/chrome/empty-state.js +8 -4
- package/dist/chrome/eyebrow.d.ts +13 -5
- package/dist/chrome/eyebrow.js +18 -7
- package/dist/chrome/footer.d.ts +5 -0
- package/dist/chrome/footer.js +14 -3
- package/dist/chrome/navigation-menu.js +6 -3
- package/dist/chrome/page-shell.js +8 -5
- package/dist/chrome/panel.d.ts +5 -2
- package/dist/chrome/panel.js +10 -5
- package/dist/chrome/row.js +9 -5
- package/dist/chrome/scroll-area.js +6 -4
- package/dist/chrome/section-header.js +13 -4
- package/dist/chrome/segmented-control.js +14 -4
- package/dist/chrome/status-bar.js +2 -1
- package/dist/chrome/tabs.js +14 -3
- package/dist/chrome/toolbar.js +6 -3
- package/dist/chrome/tree.js +3 -2
- package/dist/color/_thumb.js +9 -3
- package/dist/color/color-area.js +1 -1
- package/dist/color/color-swatch.js +1 -1
- package/dist/configurator/_overrides.js +13 -4
- package/dist/configurator/configurator.js +4 -1
- package/dist/configurator/export-dialog.js +5 -2
- package/dist/configurator/panel-sections.js +6 -2
- package/dist/configurator/token-editor.js +4 -1
- package/dist/date/_trigger.js +4 -1
- package/dist/date/calendar.js +22 -12
- package/dist/dmx/channel-matrix.js +3 -2
- package/dist/dmx/dmx-bar.js +1 -1
- package/dist/dmx/dmx-strip.js +1 -1
- package/dist/dmx/universe-grid.js +3 -2
- package/dist/elements/activity-graph.js +3 -3
- package/dist/elements/agent-card.js +3 -3
- package/dist/elements/approval-card.js +3 -3
- package/dist/elements/artifact-card.js +2 -2
- package/dist/elements/background-inbox.js +2 -2
- package/dist/elements/canvas-split.js +2 -2
- package/dist/elements/chart.js +1 -1
- package/dist/elements/chat-panel.js +2 -2
- package/dist/elements/checkpoint-history.js +2 -2
- package/dist/elements/clamp.js +2 -1
- package/dist/elements/code-diff.js +1 -1
- package/dist/elements/code-runner.js +1 -1
- package/dist/elements/command-palette.js +6 -5
- package/dist/elements/comparison-card.js +2 -2
- package/dist/elements/composer.js +9 -8
- package/dist/elements/computer-use.js +1 -1
- package/dist/elements/confidence-marker.js +2 -1
- package/dist/elements/connection-state.js +1 -1
- package/dist/elements/context-breakdown.js +1 -1
- package/dist/elements/context-usage.js +1 -1
- package/dist/elements/conversation-search.js +4 -3
- package/dist/elements/cost-meter.js +1 -1
- package/dist/elements/data-table.js +2 -2
- package/dist/elements/day-separator.js +1 -1
- package/dist/elements/diagram.js +1 -1
- package/dist/elements/document-reference.js +3 -3
- package/dist/elements/draft-restore.js +1 -1
- package/dist/elements/edit-message.js +4 -3
- package/dist/elements/elements.css +26 -5
- package/dist/elements/elicitation-form.js +3 -3
- package/dist/elements/empty-state.js +2 -1
- package/dist/elements/error-state.js +1 -1
- package/dist/elements/feedback-dialog.js +4 -3
- package/dist/elements/file-tree.js +2 -2
- package/dist/elements/flow-graph.js +2 -2
- package/dist/elements/guardrail-notice.js +3 -3
- package/dist/elements/image-generation.js +1 -1
- package/dist/elements/inline-citation.js +3 -3
- package/dist/elements/job-progress.js +3 -3
- package/dist/elements/launcher-bubble.js +2 -2
- package/dist/elements/loading-state.js +1 -1
- package/dist/elements/map-answer.js +3 -2
- package/dist/elements/markdown.js +5 -4
- package/dist/elements/math-block.js +1 -1
- package/dist/elements/mcp-server-panel.js +3 -3
- package/dist/elements/message-attachment.js +4 -4
- package/dist/elements/message-pair.js +1 -1
- package/dist/elements/message-queue.js +2 -2
- package/dist/elements/mobile-composer.js +4 -3
- package/dist/elements/model-picker.js +3 -3
- package/dist/elements/onboarding.js +2 -2
- package/dist/elements/permission-grant.js +2 -2
- package/dist/elements/permission-scopes.js +5 -4
- package/dist/elements/prompt-library.js +7 -6
- package/dist/elements/queue-dock.js +4 -3
- package/dist/elements/quota-banner.js +1 -1
- package/dist/elements/quote-reply.js +1 -1
- package/dist/elements/read-aloud.js +2 -2
- package/dist/elements/reasoning-panel.js +2 -1
- package/dist/elements/recommendation-card.d.ts +1 -1
- package/dist/elements/recommendation-card.js +2 -2
- package/dist/elements/regenerate-menu.js +2 -2
- package/dist/elements/research-report.js +1 -1
- package/dist/elements/retrieval-chunks.js +1 -1
- package/dist/elements/revert-dock.js +5 -4
- package/dist/elements/reviewable-diff.js +1 -1
- package/dist/elements/schedule-card.js +3 -3
- package/dist/elements/score-breakdown.js +1 -1
- package/dist/elements/scroll-anchor.js +2 -2
- package/dist/elements/settings-panel.js +3 -2
- package/dist/elements/shared-conversation.js +2 -2
- package/dist/elements/sources.js +4 -3
- package/dist/elements/speaker-identity.js +1 -1
- package/dist/elements/spec-sheet.js +1 -1
- package/dist/elements/streaming-text.js +1 -1
- package/dist/elements/subagent-list.js +2 -2
- package/dist/elements/suggestions.js +1 -1
- package/dist/elements/surfaces.d.ts +1 -1
- package/dist/elements/surfaces.js +2 -1
- package/dist/elements/tail-status.js +1 -1
- package/dist/elements/terminal-block.js +1 -1
- package/dist/elements/thread-list.js +1 -1
- package/dist/elements/thread-search.js +5 -4
- package/dist/elements/timeline.js +1 -1
- package/dist/elements/todo-list.js +2 -2
- package/dist/elements/tool-call.js +4 -3
- package/dist/elements/tool-error.js +2 -2
- package/dist/elements/tool-group.js +1 -1
- package/dist/elements/tool-timeline.js +4 -3
- package/dist/elements/trace-waterfall.js +1 -1
- package/dist/elements/verdict-row.js +2 -2
- package/dist/elements/voice-conversation.js +3 -2
- package/dist/elements/web-preview.js +1 -1
- package/dist/elements/web-search.js +2 -2
- package/dist/elements/work-collapse.js +2 -1
- package/dist/flow/node-card.js +3 -2
- package/dist/flow/use-flow-theme.js +2 -1
- package/dist/forms/_chassis.d.ts +34 -6
- package/dist/forms/_chassis.js +44 -9
- package/dist/forms/_listbox.js +22 -14
- package/dist/forms/checkbox.js +13 -4
- package/dist/forms/env-var-input.js +3 -2
- package/dist/forms/field.d.ts +2 -1
- package/dist/forms/field.js +16 -5
- package/dist/forms/file-upload.js +3 -2
- package/dist/forms/input-group.js +11 -2
- package/dist/forms/multi-select.js +4 -3
- package/dist/forms/number-field.js +7 -3
- package/dist/forms/otp-field.js +15 -6
- package/dist/forms/password-input.js +4 -2
- package/dist/forms/radio-group.js +10 -4
- package/dist/forms/rating.js +2 -1
- package/dist/forms/scrub-input.js +2 -1
- package/dist/forms/search-input.js +2 -1
- package/dist/forms/select.js +10 -4
- package/dist/forms/slider.js +9 -3
- package/dist/forms/switch.js +9 -3
- package/dist/forms/tags-input.js +4 -3
- package/dist/forms/textarea.js +3 -1
- package/dist/forms/toggle-group.js +2 -1
- package/dist/forms/toggle.js +5 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/instruments/_data-row.js +2 -1
- package/dist/instruments/app-window-frame.js +1 -1
- package/dist/instruments/code-block.js +8 -2
- package/dist/instruments/group-bar.js +1 -1
- package/dist/instruments/ledger.js +6 -2
- package/dist/instruments/log-viewer.js +4 -3
- package/dist/instruments/meter.js +2 -1
- package/dist/instruments/progress.js +9 -3
- package/dist/instruments/seam-grid.js +5 -3
- package/dist/instruments/stat.js +13 -4
- package/dist/instruments/table.js +29 -10
- package/dist/instruments/terminal-frame.js +4 -2
- package/dist/instruments/usage-chart.js +1 -1
- package/dist/layout/_collapse.js +26 -5
- package/dist/layout/accordion.js +2 -1
- package/dist/layout/bento.js +7 -4
- package/dist/layout/breadcrumb.js +10 -5
- package/dist/layout/card.js +14 -7
- package/dist/layout/carousel.js +3 -2
- package/dist/layout/collapsible.js +6 -1
- package/dist/layout/container.js +2 -1
- package/dist/layout/description-list.js +4 -1
- package/dist/layout/frames.js +11 -5
- package/dist/layout/item.js +3 -2
- package/dist/layout/link.d.ts +30 -0
- package/dist/layout/link.js +22 -3
- package/dist/layout/pagination.js +8 -8
- package/dist/layout/preview.d.ts +32 -12
- package/dist/layout/preview.js +149 -40
- package/dist/layout/resizable.js +2 -1
- package/dist/layout/sidebar.js +11 -3
- package/dist/layout/stepper.js +6 -2
- package/dist/lib/cn.js +29 -2
- package/dist/midi/piano-keyboard.js +3 -2
- package/dist/midi/spectrum-visualizer.js +1 -1
- package/dist/midi/threshold-rail.js +2 -1
- package/dist/midi/timeline-ruler.js +1 -1
- package/dist/overlays/_surface.d.ts +74 -14
- package/dist/overlays/_surface.js +87 -14
- package/dist/overlays/alert-dialog.js +1 -1
- package/dist/overlays/command-palette.js +28 -9
- package/dist/overlays/dialog.d.ts +5 -0
- package/dist/overlays/dialog.js +6 -1
- package/dist/overlays/drawer.js +8 -1
- package/dist/overlays/hover-card.js +3 -1
- package/dist/overlays/info-tip.js +2 -1
- package/dist/overlays/menubar.js +3 -1
- package/dist/overlays/popover.js +3 -1
- package/dist/overlays/toast.js +14 -6
- package/dist/overlays/tooltip.js +3 -1
- package/dist/primitives/avatar.js +6 -2
- package/dist/primitives/button.d.ts +16 -1
- package/dist/primitives/button.js +44 -12
- package/dist/primitives/chip.d.ts +11 -29
- package/dist/primitives/chip.js +40 -50
- package/dist/primitives/icon-button.d.ts +1 -1
- package/dist/primitives/kbd.d.ts +6 -0
- package/dist/primitives/kbd.js +10 -1
- package/dist/primitives/skeleton.js +2 -1
- package/dist/system/_focus-ring-field.js +29 -0
- package/dist/system/_focus-ring.js +125 -0
- package/dist/system/_paint-glow.js +22 -3
- package/dist/system/_paint-rest-shade.js +32 -0
- package/dist/system/_paint-rim.js +22 -4
- package/dist/system/_paint-stroke-surface-1.js +1 -1
- package/dist/system/_paint-stroke-surface-2.js +14 -1
- package/dist/system/_paint-texture.js +5 -2
- package/dist/system/_style-accordion-rule.js +32 -0
- package/dist/system/_style-app-bar.js +65 -0
- package/dist/system/_style-avatar.js +20 -0
- package/dist/system/_style-band.js +57 -0
- package/dist/system/_style-body-leading.js +19 -0
- package/dist/system/_style-body-size.js +30 -0
- package/dist/system/_style-body-weight.js +24 -0
- package/dist/system/_style-body.js +32 -0
- package/dist/system/_style-caption-ink.js +17 -0
- package/dist/system/_style-caption-size.js +19 -0
- package/dist/system/_style-caption-weight.js +18 -0
- package/dist/system/_style-caption.js +19 -0
- package/dist/system/_style-card-gap.js +14 -0
- package/dist/system/_style-card-pad.js +43 -0
- package/dist/system/_style-cell.js +18 -0
- package/dist/system/_style-check-glyph.js +14 -0
- package/dist/system/_style-check.js +40 -0
- package/dist/system/_style-chip.js +143 -0
- package/dist/system/_style-choice-gap.js +15 -0
- package/dist/system/_style-code.js +13 -0
- package/dist/system/_style-collapse.js +94 -0
- package/dist/system/_style-control-face.js +29 -0
- package/dist/system/_style-control-gap.js +14 -0
- package/dist/system/_style-control-label.js +29 -0
- package/dist/system/_style-control-step.js +22 -0
- package/dist/system/_style-control.js +76 -0
- package/dist/system/_style-crumb.js +44 -0
- package/dist/system/_style-data-face.js +28 -0
- package/dist/system/_style-day.js +25 -0
- package/dist/system/_style-description.js +23 -0
- package/dist/system/_style-disabled.js +70 -0
- package/dist/system/_style-disclosure.js +21 -0
- package/dist/system/_style-empty-state.js +42 -0
- package/dist/system/_style-eyebrow.js +43 -0
- package/dist/system/_style-field-chassis.js +38 -0
- package/dist/system/_style-field-gap.js +12 -0
- package/dist/system/_style-footer-rule.js +47 -0
- package/dist/system/_style-glyph-ink.js +20 -0
- package/dist/system/_style-glyph-opacity.js +20 -0
- package/dist/system/_style-glyph-size.js +21 -0
- package/dist/system/_style-group-gap.js +15 -0
- package/dist/system/_style-group-label-pad.js +14 -0
- package/dist/system/_style-group-label.js +24 -0
- package/dist/system/_style-gutter.js +17 -0
- package/dist/system/_style-help-ink.js +14 -0
- package/dist/system/_style-help.js +38 -0
- package/dist/system/_style-hover-card-width.js +15 -0
- package/dist/system/_style-input-face.js +34 -0
- package/dist/system/_style-kbd.js +58 -0
- package/dist/system/_style-label-case.js +36 -0
- package/dist/system/_style-label-face.js +32 -0
- package/dist/system/_style-label-ink.js +29 -0
- package/dist/system/_style-label-leading.js +14 -0
- package/dist/system/_style-label-size.js +36 -0
- package/dist/system/_style-label-tracking.js +45 -0
- package/dist/system/_style-label-weight.js +40 -0
- package/dist/system/_style-lede.js +49 -0
- package/dist/system/_style-link.js +58 -0
- package/dist/system/_style-menu.js +43 -0
- package/dist/system/_style-meter.js +15 -0
- package/dist/system/_style-nav-item.js +41 -0
- package/dist/system/_style-nav-menu.js +48 -0
- package/dist/system/_style-nav-voice.js +43 -0
- package/dist/system/_style-option.js +99 -0
- package/dist/system/_style-otp.js +15 -0
- package/dist/system/_style-outline-hover.js +18 -0
- package/dist/system/_style-overlay-title.js +35 -0
- package/dist/system/_style-page-title.js +48 -0
- package/dist/system/_style-page.js +17 -0
- package/dist/system/_style-palette.js +18 -0
- package/dist/system/_style-panel.js +21 -0
- package/dist/system/_style-popover-pad.js +13 -0
- package/dist/system/_style-popover-width.js +15 -0
- package/dist/system/_style-quiet-ink.js +13 -0
- package/dist/system/_style-radio.js +19 -0
- package/dist/system/_style-row-disabled.js +17 -0
- package/dist/system/_style-row-pad.js +13 -0
- package/dist/system/_style-row.js +30 -0
- package/dist/system/_style-scrollbar.js +19 -0
- package/dist/system/_style-seam.js +43 -0
- package/dist/system/_style-section-rule.js +26 -0
- package/dist/system/_style-segment-pad.js +15 -0
- package/dist/system/_style-segment.js +30 -0
- package/dist/system/_style-segmented-control.js +86 -0
- package/dist/system/_style-selected.js +36 -0
- package/dist/system/_style-skeleton.js +15 -0
- package/dist/system/_style-slider.js +26 -0
- package/dist/system/_style-stage-marks.js +26 -0
- package/dist/system/_style-stat.js +31 -0
- package/dist/system/_style-stepper.js +16 -0
- package/dist/system/_style-switch.js +26 -0
- package/dist/system/_style-tab-hover.js +15 -0
- package/dist/system/_style-tab.js +71 -0
- package/dist/system/_style-text-focus.js +26 -0
- package/dist/system/_style-textarea.js +21 -0
- package/dist/system/_style-title.js +37 -0
- package/dist/system/_style-toast.js +22 -0
- package/dist/system/_style-toggle.js +50 -0
- package/dist/system/_style-toolbar.js +23 -0
- package/dist/system/_style-tooltip.js +46 -0
- package/dist/system/density.d.ts +15 -5
- package/dist/system/density.js +188 -25
- package/dist/system/index.d.ts +2 -2
- package/dist/system/index.js +2 -2
- package/dist/system/overrides.d.ts +1 -0
- package/dist/system/overrides.js +151 -3
- package/dist/system/portal.d.ts +3 -2
- package/dist/system/portal.js +22 -10
- package/dist/system/prepaint.d.ts +21 -5
- package/dist/system/prepaint.js +3 -1
- package/dist/system/published.d.ts +1 -0
- package/dist/system/published.js +131 -0
- package/dist/system/theme-provider.d.ts +118 -21
- package/dist/system/theme-provider.js +362 -73
- package/dist/system/theme-registry.d.ts +2 -1
- package/dist/system/theme-registry.js +27 -10
- package/dist/system/use-density.js +4 -3
- package/dist/system/use-theme.d.ts +5 -2
- package/dist/system/use-theme.js +7 -4
- package/dist/system/vocabulary.js +2 -2
- package/dist/theming/create-theme.js +12 -6
- package/dist/theming/serialize.d.ts +34 -2
- package/dist/theming/serialize.js +86 -4
- package/manifest/components/accordion.json +29 -2
- package/manifest/components/agent-pile.json +3 -0
- package/manifest/components/alert-dialog.json +36 -3
- package/manifest/components/app-bar.json +61 -2
- package/manifest/components/app-shell.json +5 -0
- package/manifest/components/ask-box.json +3 -1
- package/manifest/components/autocomplete.json +85 -1
- package/manifest/components/avatar-group.json +7 -0
- package/manifest/components/avatar.json +7 -0
- package/manifest/components/band.json +7 -3
- package/manifest/components/bento.json +12 -1
- package/manifest/components/breadcrumb.json +12 -0
- package/manifest/components/button.json +43 -4
- package/manifest/components/calendar.json +13 -0
- package/manifest/components/card.json +23 -1
- package/manifest/components/carousel.json +4 -1
- package/manifest/components/channel-matrix.json +37 -3
- package/manifest/components/chart-tooltip-content.json +35 -3
- package/manifest/components/chat-empty-state.json +3 -1
- package/manifest/components/checkbox-group.json +36 -1
- package/manifest/components/checkbox.json +36 -1
- package/manifest/components/chip.json +22 -1
- package/manifest/components/clamp.json +3 -1
- package/manifest/components/code-block.json +10 -1
- package/manifest/components/collapsible.json +35 -2
- package/manifest/components/color-area.json +4 -2
- package/manifest/components/color-field.json +29 -0
- package/manifest/components/color-picker.json +29 -0
- package/manifest/components/color-slider.json +3 -1
- package/manifest/components/colors-section.json +9 -1
- package/manifest/components/combobox.json +85 -1
- package/manifest/components/command-palette.json +39 -3
- package/manifest/components/composer-actions.json +3 -0
- package/manifest/components/composer-attach-button.json +3 -0
- package/manifest/components/composer-attachment-chip.json +3 -0
- package/manifest/components/composer-attachments.json +3 -0
- package/manifest/components/composer-bar.json +3 -0
- package/manifest/components/composer-command-item.json +3 -0
- package/manifest/components/composer-context.json +3 -0
- package/manifest/components/composer-input.json +3 -0
- package/manifest/components/composer-menu-item.json +3 -0
- package/manifest/components/composer-menu.json +3 -0
- package/manifest/components/composer-model-item.json +3 -0
- package/manifest/components/composer-model-trigger.json +3 -0
- package/manifest/components/composer-person-item.json +3 -0
- package/manifest/components/composer-send.json +3 -0
- package/manifest/components/composer-toolbar.json +3 -0
- package/manifest/components/composer-voice-button.json +3 -0
- package/manifest/components/composer-voice.json +3 -0
- package/manifest/components/composer.json +29 -0
- package/manifest/components/confidence-marker.json +3 -1
- package/manifest/components/container.json +2 -1
- package/manifest/components/context-menu.json +35 -3
- package/manifest/components/conversation-search.json +3 -1
- package/manifest/components/cue-mark.json +2 -2
- package/manifest/components/cue-portal-frame.json +1 -1
- package/manifest/components/data-row.json +3 -1
- package/manifest/components/data-tree.json +3 -1
- package/manifest/components/date-field.json +28 -0
- package/manifest/components/date-picker.json +32 -0
- package/manifest/components/date-range-picker.json +32 -0
- package/manifest/components/delegation-card.json +3 -1
- package/manifest/components/density.json +15 -7
- package/manifest/components/description-list.json +6 -1
- package/manifest/components/dialog.json +37 -3
- package/manifest/components/disclosure.json +35 -2
- package/manifest/components/dmx-bar.json +34 -3
- package/manifest/components/dmx-strip.json +34 -3
- package/manifest/components/drawer.json +36 -3
- package/manifest/components/dropdown-menu.json +35 -3
- package/manifest/components/edit-message.json +3 -1
- package/manifest/components/elements-command-palette.json +3 -1
- package/manifest/components/elements-composer.json +3 -0
- package/manifest/components/empty-state-composer.json +3 -1
- package/manifest/components/empty-state-greeting.json +3 -1
- package/manifest/components/empty-state-suggestion.json +3 -1
- package/manifest/components/empty-state-suggestions.json +3 -1
- package/manifest/components/empty-state.json +13 -0
- package/manifest/components/env-var-input.json +28 -0
- package/manifest/components/export-dialog.json +6 -1
- package/manifest/components/eyebrow.json +13 -2
- package/manifest/components/feedback-dialog.json +3 -0
- package/manifest/components/field-description.json +15 -0
- package/manifest/components/field-error.json +15 -0
- package/manifest/components/field-label.json +16 -1
- package/manifest/components/field.json +15 -0
- package/manifest/components/file-upload.json +3 -0
- package/manifest/components/footer.json +14 -1
- package/manifest/components/frames.json +14 -1
- package/manifest/components/hover-card.json +37 -3
- package/manifest/components/info-tip.json +3 -0
- package/manifest/components/input-group.json +31 -0
- package/manifest/components/input.json +29 -0
- package/manifest/components/item.json +3 -1
- package/manifest/components/kbd.json +12 -1
- package/manifest/components/ledger.json +9 -2
- package/manifest/components/link.json +33 -0
- package/manifest/components/log-viewer.json +3 -0
- package/manifest/components/map-answer.json +3 -1
- package/manifest/components/markdown-text.json +3 -0
- package/manifest/components/menubar.json +38 -4
- package/manifest/components/message-list.json +3 -0
- package/manifest/components/message.json +6 -1
- package/manifest/components/meter.json +1 -0
- package/manifest/components/mobile-composer.json +3 -1
- package/manifest/components/multi-select.json +86 -1
- package/manifest/components/musical-time-input.json +29 -0
- package/manifest/components/navigation-menu.json +48 -3
- package/manifest/components/node-card.json +3 -0
- package/manifest/components/number-field.json +30 -0
- package/manifest/components/otp-field.json +29 -0
- package/manifest/components/page-shell.json +14 -0
- package/manifest/components/pagination.json +22 -0
- package/manifest/components/panel-header.json +13 -0
- package/manifest/components/panel.json +14 -1
- package/manifest/components/password-input.json +28 -0
- package/manifest/components/permission-scopes.json +3 -1
- package/manifest/components/piano-keyboard.json +3 -0
- package/manifest/components/popover.json +37 -3
- package/manifest/components/preset-section.json +9 -1
- package/manifest/components/preview.json +24 -10
- package/manifest/components/progress.json +10 -1
- package/manifest/components/prompt-library.json +3 -1
- package/manifest/components/queue-dock.json +3 -1
- package/manifest/components/radio-group.json +14 -0
- package/manifest/components/radio.json +14 -0
- package/manifest/components/rating.json +4 -1
- package/manifest/components/reasoning-panel.json +3 -1
- package/manifest/components/recommendation-card.json +1 -1
- package/manifest/components/resizable.json +4 -1
- package/manifest/components/revert-dock.json +3 -1
- package/manifest/components/row.json +8 -1
- package/manifest/components/scroll-area.json +6 -2
- package/manifest/components/scrollable-tabs-list.json +21 -0
- package/manifest/components/scrub-input.json +28 -0
- package/manifest/components/seam-cell.json +1 -0
- package/manifest/components/seam-grid.json +1 -0
- package/manifest/components/seam-list.json +8 -1
- package/manifest/components/search-input.json +28 -0
- package/manifest/components/section-header.json +15 -2
- package/manifest/components/segmented-control.json +17 -0
- package/manifest/components/select.json +42 -0
- package/manifest/components/settings-panel.json +3 -0
- package/manifest/components/shape-section.json +9 -1
- package/manifest/components/sheet.json +35 -3
- package/manifest/components/shimmer-label.json +3 -0
- package/manifest/components/sidebar.json +19 -2
- package/manifest/components/skeleton.json +2 -0
- package/manifest/components/slider.json +16 -0
- package/manifest/components/sources.json +3 -1
- package/manifest/components/stat.json +17 -0
- package/manifest/components/status-bar.json +4 -0
- package/manifest/components/stepper.json +8 -0
- package/manifest/components/swap-label.json +3 -0
- package/manifest/components/switch.json +30 -0
- package/manifest/components/table-scroll-region.json +22 -2
- package/manifest/components/table.json +22 -2
- package/manifest/components/tabs.json +22 -1
- package/manifest/components/tags-input.json +86 -1
- package/manifest/components/terminal-frame.json +3 -0
- package/manifest/components/textarea.json +31 -0
- package/manifest/components/theme-configurator.json +35 -3
- package/manifest/components/theme-provider.json +31 -19
- package/manifest/components/thread-search.json +3 -1
- package/manifest/components/threshold-rail.json +3 -0
- package/manifest/components/time-field.json +28 -0
- package/manifest/components/toast.json +39 -2
- package/manifest/components/toggle-group.json +2 -1
- package/manifest/components/toggle.json +32 -0
- package/manifest/components/token-editor.json +6 -1
- package/manifest/components/tool-call-card.json +9 -2
- package/manifest/components/tool-call.json +3 -1
- package/manifest/components/tool-timeline.json +3 -1
- package/manifest/components/toolbar.json +22 -1
- package/manifest/components/tooltip.json +42 -3
- package/manifest/components/tree-visibility-toggle.json +3 -0
- package/manifest/components/tree.json +3 -0
- package/manifest/components/universe-grid.json +3 -0
- package/manifest/components/voice-conversation.json +3 -0
- package/manifest/components/work-collapse.json +3 -1
- package/manifest/fixtures.json +15 -0
- package/manifest/manifest.json +210 -190
- package/manifest/tokens.json +395 -4
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,906 @@
|
|
|
1
1
|
# @cueplusplus/ui
|
|
2
2
|
|
|
3
|
+
## 0.18.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- d1eef08: The style contract gains four optional names for the parts of agent-native.com's own components that no earlier round measured (looks-fidelity round 6, spec §11, Graphite's lane R6.G). Each is `initial` on the shared `[data-style]` reset, `console` declines it, and each reader falls back to exactly what its component drew, so under no set and under every set that does not name it nothing moves.
|
|
8
|
+
|
|
9
|
+
- `--cue-style-kbd-fill`: a `Kbd`'s fill, falling back to the `surface-2` it drew.
|
|
10
|
+
- `--cue-style-option-highlight-ink`: a highlighted option row's ink, falling back to `fg`.
|
|
11
|
+
- `--cue-style-secondary-hover-ground`: the secondary `Button`'s ground under the pointer, falling back to its resting ground, which it kept before.
|
|
12
|
+
- `--cue-style-option-selected-hover-ground`: a selected listbox row's ground under the pointer, falling back to the ground it paints selected and highlighted. A list opens with its selected row highlighted, so a set that grounds that row needs this for the pointer to paint its hover over it.
|
|
13
|
+
|
|
14
|
+
The `graphite` set declares the four, and eleven names earlier rounds added that it had left alone, each measured from agent-native.com: a 20px key on `surface-3`, 40.75px option rows with 4px list padding, half-radius menu rows, the highlighted and selected inks, the selected row on the raised `surface-1` (`surface-3` under the pointer), the secondary tone's hover edge, and table cells that clamp their padding from 12px at a phone to 16px at a desktop.
|
|
15
|
+
|
|
16
|
+
- d1eef08: The style contract gains thirteen optional names for the parts of replit.com's own components that no earlier round measured (looks-fidelity round 6, spec §11, Kiln's lane R6.K). Each is `initial` on the shared `[data-style]` reset, `console` declines it, and each reader falls back to exactly what its component drew, so under no set and under every set that does not name it nothing moves. The `kiln` set declares them.
|
|
17
|
+
|
|
18
|
+
- **Disclosures** (`Accordion`, `Collapsible`, `Disclosure`): `--cue-style-collapse-size`, `-collapse-leading`, `-collapse-hover-ground`, `-collapse-radius`, `-collapse-body-ink`, and `-accordion-rule-ink` for the rule between sections.
|
|
19
|
+
- **Toggles**: `--cue-style-toggle-pressed-ink` and `-toggle-hover-ground`.
|
|
20
|
+
- **Options and lists** (`Select`, `Combobox`, `Autocomplete`, `MultiSelect`): `--cue-style-option-selected-ground` and `-listbox-pad`. A selected row under the pointer, or the one a select opens on, keeps the highlight ground unless a set names a selected ground.
|
|
21
|
+
- **Chip, NavigationMenu, Dialog**: `--cue-style-chip-ink`, `-nav-caret-ink`, `-dialog-pad`.
|
|
22
|
+
|
|
23
|
+
The docs' `Link` tile now draws a link: `LinkProps` declares its `href` and `children`, which it took from the anchor's attributes without naming them, so the props table and a propSet could not.
|
|
24
|
+
|
|
25
|
+
- d1eef08: The style contract gains seventy-two optional names for the parts of coss.com/ui's own components that no earlier round measured (looks-fidelity round 6, spec §11: the coverage closure, Porcelain's lane R6.P, rows P140–P193). Each is `initial` on the shared `[data-style]` reset and `console` declines it. Each reader falls back to exactly what its component drew before, so under no set, and under every set that does not name it, nothing moves. The `porcelain` set declares all seventy-two.
|
|
26
|
+
|
|
27
|
+
- **Groups and choices**: `--cue-style-group-gap` (`ToggleGroup`, the `Tabs` list) and `-choice-gap` (`CheckboxGroup`, `RadioGroup`).
|
|
28
|
+
- **Captions and glyphs**: `--cue-style-caption-size`, `-caption-weight`, `-caption-ink` (an avatar's initials, a readout, a calendar's caption); `-glyph-ink`, `-glyph-size` and `-glyph-opacity` for a control's glyphs — the opacity only on the affordance ones: a select's and a filterable field's chevron, the date trigger's mark, a calendar's month arrows and an `InputGroup` gutter's glyphs.
|
|
29
|
+
- **Buttons and breadcrumbs**: `--cue-style-control-gap`, `-outline-hover-ground`, `-outline-hover-edge`, `-crumb-separator-opacity`.
|
|
30
|
+
- **Disclosures and cards**: `--cue-style-collapse-caret-opacity`, `-card-gap`, `-check-glyph-size`.
|
|
31
|
+
- **Menus and the palette**: `--cue-style-group-label-size`, `-group-label-ink`, `-group-label-pad`, `-row-disabled-opacity`, `-menu-min-width`, `-menu-separator-inset`, `-palette-rule`, `-palette-footer-pad`.
|
|
32
|
+
- **EmptyState**: `--cue-style-empty-title-face`, `-empty-title-size`, `-empty-title-weight`, `-empty-title-leading`, `-empty-icon-size`, `-empty-gap`, `-empty-pad`.
|
|
33
|
+
- **Panel, Kbd, Skeleton, ScrollArea, Meter**: `--cue-style-panel-pad-y`, `-panel-pad-x`, `-panel-rule`, `-kbd-leading`, `-skeleton-radius`, `-scrollbar-size`, `-scrollbar-thumb`, `-meter-radius`.
|
|
34
|
+
- **Slider, NumberField, OTPField, Pagination**: `--cue-style-slider-track-height` (the track falls back to `0.125rem`, which is half of Tailwind's default spacing step; a consumer who changed `--spacing` drew half of theirs, and draws 2px now), `-slider-track-ink`, `-slider-thumb-size`, `-slider-thumb-fill`, `-slider-thumb-rim`, `-slider-thumb-edge`, `-stepper-width`, `-otp-gap`, `-page-current-ground`, `-page-current-rim`, `-page-current-edge`.
|
|
35
|
+
- **Switch, Radio, Table, Toast**: `--cue-style-switch-edge`, `-radio-checked-ground`, `-radio-dot-ink`, `-radio-dot-size`, `-cell-pad`, `-cell-leading`, `-toast-pad-y`, `-toast-pad-x`, `-toast-width`.
|
|
36
|
+
- **Toolbar**: `--cue-style-toolbar-rim`, `-toolbar-edge`, `-toolbar-radius`, `-toolbar-pad`, `-toolbar-height`, `-toolbar-gap`, `-toolbar-separator-height`.
|
|
37
|
+
- **Chip, Calendar, Tabs, SegmentedControl, Popover, HoverCard**: `--cue-style-chip-gap`, `-day-size` (the days, the weekday heads, the month-nav buttons and the caption row), `-day-ink`, `-segment-pad`, `-tab-hover-ink`, `-popover-width`, `-hover-card-width`.
|
|
38
|
+
|
|
39
|
+
Three fixes reach every Look. `MultiSelect` and `TagsInput` set their typing input one line tall, so an `md` field is 32px beside a 32px `Input` rather than 38px, chips or none; a second row of chips still grows it. `OTPField`'s slots are square, one control rung wide, as its documentation always said: the `w-auto` beside the size class won the cascade, and every slot drew as wide as an empty input. An `InputGroup`'s gutters read `--cue-style-glyph-ink`, falling back to the `fg-subtle` they drew.
|
|
40
|
+
|
|
41
|
+
The `glaze` pack's stroke pairs (`stroke-from`, `stroke-to`, `stroke-overlay-from`, `stroke-overlay-to`) are opaque mixes now, measured from coss.com/ui's field and popup edges, which composite over their own grounds where the translucent border roles drew a step darker over a sunken stage in dark mode.
|
|
42
|
+
|
|
43
|
+
- d1eef08: The style contract gains forty-six optional names for the parts of a source's own components that no earlier round measured (looks-fidelity round 6, spec §11: the coverage closure, Tender's lane R6.T, rows T123–T157). Each is `initial` on the shared `[data-style]` reset and `console` declines it. Each reader falls back to exactly what its component drew before, so under no set, and under every set that does not name it, nothing moves.
|
|
44
|
+
|
|
45
|
+
- **Disclosures** (`Accordion`, `Collapsible`, `Disclosure`): `--cue-style-accordion-rule-style` (the rule between sections, `solid` or `dashed`, through Tailwind's `--tw-border-style` slot as the footer's rules are), `-collapse-pad`, `-collapse-gap`, `-collapse-hover-ink`, `-collapse-open-ink` and `-collapse-body-pad`.
|
|
46
|
+
- **Fields**: `--cue-style-field-pad` and `-field-gap` (multipliers), `-field-hover-edge`, `-help-leading`, and `-text-focus-offset` for a text control's, a link's and a disclosure trigger's focus ring. (A `-invalid-edge` came and went in the same release: Tender refuses stripe's pale-red invalid edge, so no set spent it.) The hover edge never paints over a focused field's edge: a grouped field's rim (`controlGroupFocusClasses`) now reads `has-focus:` rather than `focus-within:`, which Tailwind emits after the hover edge, so a focused `InputGroup`, `Combobox`, `MultiSelect`, `TagsInput` or `Autocomplete` keeps its `border-strong` rim under the pointer, and an invalid one keeps `danger`.
|
|
47
|
+
- **Options** (`Select`, `Combobox`, `Autocomplete`, `MultiSelect`): `--cue-style-option-pad`, `-option-leading`, `-option-height`.
|
|
48
|
+
- **Checkbox, Switch, Radio**: `--cue-style-control-label-leading`, `-check-hover-edge`, `-switch-thumb`, `-switch-disabled-thumb`.
|
|
49
|
+
- **Disabled controls**: `--cue-style-disabled-opacity` (replacing the fixed 40% fade), `-disabled-fill`, `-disabled-ink`, and `-disabled-edge` (the rim the two transparent button tones draw when disabled; they keep their ground).
|
|
50
|
+
- **Toggle** (and `ToggleGroup`'s items): `--cue-style-toggle-edge`, `-toggle-ink`, `-toggle-hover-ink`, `-toggle-hover-edge`, `-toggle-pressed-ground`, `-toggle-pressed-edge`.
|
|
51
|
+
- **Stat**: `--cue-style-stat-size` and `-stat-detail-size` (scaled with the type), `-stat-weight`, `-stat-leading`, `-stat-tracking`, `-stat-detail-leading`, `-stat-gap`.
|
|
52
|
+
- **Row**, in the rule idiom: `--cue-style-row-rule-style`, `-row-ink`, `-row-block-pad`.
|
|
53
|
+
- **Chip**: `--cue-style-chip-leading`, and the tag volume's `-tag-pad` and `-tag-edge`.
|
|
54
|
+
- **Tooltip**: `--cue-style-tooltip-tracking` and `-tooltip-radius` (stripe.com's overlays take three corners: its dialog, its popover and its tooltip).
|
|
55
|
+
- **Links and navigation**: `--cue-style-link-hover-ink` (apart from the header nav's hover), `-nav-height` and `-nav-open-ground` for `NavigationMenu`'s trigger. The trigger's height is an arbitrary value now, which `tailwind-merge` knows is a height, so a `className` height on a trigger (`h-auto`) takes effect where the control height used to win over it.
|
|
56
|
+
|
|
57
|
+
The Tender style set declares them, measured off stripe.com's own design system (the hds components its homepage loads, injected where it does not render them), alongside the existing names it now also declares: `-collapse-height`, `-tooltip-pad`, `-input-leading`, `-textarea-pad`, `-chip-height`, `-chip-size`, `-link-weight`, `-secondary-hover-ink`, `-secondary-hover-edge`, `-nav-ink`, `-nav-pad` and `-hover-ink`.
|
|
58
|
+
|
|
59
|
+
Two behaviours a consumer can see without any style set. A disabled `Button` paints its tone's disabled fill, ink and edge (`--cue-style-disabled-fill`, `-disabled-ink`, `-disabled-edge`), each falling back to the tone's own resting colour, so a `Button` draws what it drew — but a `className` that recolours a `Button` (`bg-danger`) no longer reaches it while it is disabled, where the tone's own colour does: recolour the disabled state too (`disabled:bg-danger`). And the `NavigationMenu` trigger's height above.
|
|
60
|
+
|
|
61
|
+
- d1eef08: The style contract gains nineteen optional names for the parts of greptile.com's own components that no earlier round measured (looks-fidelity round 6, spec §11, Zine's lane R6.Z). Each is `initial` on the shared `[data-style]` reset, `console` declines it, and each reader falls back to exactly what its component drew, so under no set and under every set that does not name it nothing moves. The `zine` set declares them.
|
|
62
|
+
|
|
63
|
+
- **Disclosures** (`Accordion`, `Collapsible`, `Disclosure`): `--cue-style-collapse-weight`, `-collapse-caret-size`, `-collapse-caret-ink`, `-collapse-body-size`, `-collapse-body-leading`, `-collapse-body-tracking`; and the inline disclosure's `--cue-style-disclosure-ink`, `-disclosure-hover-ink` and `-disclosure-weight`.
|
|
64
|
+
- **Tooltip**: `--cue-style-tooltip-face`, `-tooltip-ink`, `-tooltip-leading`.
|
|
65
|
+
- **Breadcrumb**: `--cue-style-crumb-face`, `-crumb-hover-ink`, `-crumb-gap`, `-crumb-ink`, `-crumb-size`.
|
|
66
|
+
- **Avatar**: `--cue-style-avatar-radius` and `-avatar-edge`.
|
|
67
|
+
|
|
68
|
+
Two names from the round's lanes are gone again before release: `--cue-style-invalid-edge` and `--cue-style-collapse-body-face`, which no set spent (spec §3.0 adds a name only when a set spends it). The chassis's invalid edge is `danger` again and a disclosure panel's body reads the body face.
|
|
69
|
+
|
|
70
|
+
### Patch Changes
|
|
71
|
+
|
|
72
|
+
- Updated dependencies [d1eef08]
|
|
73
|
+
- Updated dependencies [d1eef08]
|
|
74
|
+
- Updated dependencies [d1eef08]
|
|
75
|
+
- Updated dependencies [d1eef08]
|
|
76
|
+
- Updated dependencies [d1eef08]
|
|
77
|
+
- @cueplusplus/tokens@0.18.0
|
|
78
|
+
|
|
79
|
+
## 0.17.0
|
|
80
|
+
|
|
81
|
+
### Minor Changes
|
|
82
|
+
|
|
83
|
+
- a6afdd2: Graphite's round of the looks-fidelity work (spec §10.4, lane L5): ten more optional style names, and `band-y`'s rule admits a rem-plus-vw ramp.
|
|
84
|
+
|
|
85
|
+
**Ten optional names** join the style contract — `style-control-case` (a control's text-transform: `uppercase`, `none` or `capitalize`), `style-lede-ink` (a lede's ink apart from the prose ink), `style-band-title-size`, `-weight` and `-leading` (a band heading's own voice apart from the docs heading rung; the size scales with `--cue-font-scale` like every reading size), `style-subheading-leading`, `style-appbar-inset` (a proportion of `space-7`), `style-nav-active-ground` (the sidebar's active item, apart from a table's selected row), and `band-y-top` / `band-y-bottom` (the band rhythm's two halves, each falling back to `band-y` at its reader). Each is `initial` on the shared `[data-style]` reset, which grows from 99 lines to 109, and every set block is byte-identical apart from those ten lines. `console` declines all ten.
|
|
86
|
+
|
|
87
|
+
**`band-y`'s rule, widened once for it and both halves:** a `clamp()`'s middle term may now be a rem plus a vw expression (`3.8286rem + 6.8571vw`), the form a rung proportion already admits, as well as a bare vw term. The bounds are still `space-7` or a multiple of it, never `--cue-density`.
|
|
88
|
+
|
|
89
|
+
**The `graphite` style set, re-measured against agent-native.com** (spec §10.3–§10.4). Its reading measure is 53ch (the source's 633px lede column), its seam a 54% share of `--cue-border` in `srgb`, the share whose painted pixel lands inside ΔE00 3 of the source's subtle line in Chromium and WebKit (60% in `oklch` painted the light seam pink, and 55% painted #e0dedc in Chromium, 3.86), and its input face sans (the one field a visitor types into is sans). It now declares the round's type and control voice at the source's own pixels: a 46px/500/1.05 band title and display weight, a 32px/600 page title and 24px/600 heading at −0.02em, 18px (16px on a phone) card titles at 1.15, ledes at 16–18px in `fg-muted` with body prose in `fg`, 12px mono captions at 600 and 0.02em, 12px help, uppercase 600-weight buttons at 0.02em, a 2px focus offset, a `fg-subtle` outline edge, sans 15px/500 nav links that hover to `fg`, a transparent sidebar active ground at weight 500, dialogs on the page ground at a 12px corner, a 64px header with 40px (24px on a phone) of inline padding, and bands 160px above and 80px below (88/32 on a phone) through `band-y-top`/`band-y-bottom`. `band-y` itself is unchanged, so a `Footer` stays symmetric.
|
|
90
|
+
|
|
91
|
+
**The `bevel` paint pack draws one flat ink per surface kind** (F-19): recessed controls and cards are edged in `border-overlay` at both ends of the stroke, overlays in `border`, where it used to spend a 140° gradient on every surface. Its glass is `bg` at 90% in `srgb` (exactly the page colour), and its overlay shadow is the chassis stop at twice its geometry with a −12px spread, cast in 25% of the theme's `shade` role (F-24) — black under `theme-graphite`, which authors `shade: #000000`; under a theme that authors no `shade`, 25% of `fg`, where it used to be black at 40%. A consumer choosing `bevel` for its gradient now gets a flat edge.
|
|
92
|
+
|
|
93
|
+
These names are read by the `@cueplusplus/ui` components of the same release: `Button` takes its case from `style-control-case`, `PageShell`'s subtitle its ink from `style-lede-ink`, `AppBar` its inline padding from `style-appbar-inset` (40px, 24px on a phone, under `graphite`; `space-5` under every other set), the `Sidebar`'s active item its ground from `style-nav-active-ground` (transparent under `graphite`, so the item shows by its ink and weight alone; the selected ground under every other set), and `Band` its top and bottom padding from `band-y-top` and `band-y-bottom` (`Footer` keeps `band-y`); the band title and subheading leading are read by the docs site's own headings. Paired with an older `@cueplusplus/ui`, the graphite set's values for them are declared and inert. `@cueplusplus/ui`'s component manifest (`manifest/tokens.json`) lists the ten names beside the rest of the style vocabulary.
|
|
94
|
+
|
|
95
|
+
- d205951: The looks-fidelity round's four contract PRs (P0.4–P0.7): a theme may now author four derived colour roles, the style axis gains 95 optional names, the paint axis gains a scrim filter and three more inks, and a theme's density override is gated for monotonicity.
|
|
96
|
+
|
|
97
|
+
**Four derived colour roles a theme may author per mode (spec §3.9).** `accent-fill`, `accent-fill-fg` and `accent-fill-hover` let a theme give its primary button a fill distinct from `accent` itself (unauthored, each still resolves to its `accent`/`accent-fg`/`accent-hover` anchor); `shade` gives a theme a shadow ink independent of `fg`. `Button`'s primary tone now reads `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover` — a no-op everywhere, since none of the fifteen shipped presets authors the trio. `accent-fill-fg/accent-fill` is a new required contrast pair (4.5:1); `accent-fill/bg` is advisory (3:1). Four presets — `theme-hivehub`, `theme-luma`, `theme-signal`, `theme-venu` — already waive `accent-fg/accent` and now waive the identical, unauthored `accent-fill-fg/accent-fill` failure beside it, at the same ratio.
|
|
98
|
+
|
|
99
|
+
**The style axis's contract, round 2 (spec §3.0–§3.11): 95 more optional names**, covering display/title/heading voice, body/prose/label/eyebrow/chip/kbd voice, control/focus/link voice, navigation/selection/tab/menu voice, and surface proportions. Every one is optional and every one is declined by all eight shipped style sets today — no rendered change. The shared `[data-style]` reset now emits `initial` for all 99 optional names once, ahead of every specific `[data-style="x"]` block, replacing the per-block restatement each set used to carry; a set's own block now declares only what it authors.
|
|
100
|
+
|
|
101
|
+
**The paint axis, round 2 (spec §3.10): five more names on every pack.** `paint-scrim-filter` (a modal scrim's own backdrop-filter, distinct from `paint-glass-filter`), `paint-rest-shade` (a resting-surface shadow fragment, `system/_paint-rest-shade.ts`), `paint-stroke-overlay-from`/`-to` (an overlay's own stroke ink, read by `_paint-stroke-surface-2.ts` in place of the shared `paint-stroke-from`/`-to`), and `paint-danger-glow-ink` (the danger button's own glow, `GLOW_DANGER_CLASSES`). All ten packs declare all five; nine of them restate their own existing stroke pair for the new overlay ink (no rendered change). **`none` is the one deliberate change (F-10):** its overlay stroke pair is now `var(--cue-border-overlay)`, closing a gap where an overlay's edge under `none` differed from what a page with no pack at all draws — on the docs site, a Classic overlay's edge now reads `border-overlay` instead of `border`. The overlay's fill layer also gains `style-overlay-ground` as a reader (spec §3.11), falling back to the existing `--cue-surface-2`. **`paint-scrim-filter` lives on a `::before` pseudo-element of the scrim, never on the scrim's own `backdrop-filter`:** every overlay's `backdropClassName` prop feeds a consumer's own backdrop utility onto that same element, and a raw `backdrop-filter` declaration there made a consumer's `backdropClassName="backdrop-blur-sm"` compute `none` instead of a blur — a regression this release did not ship with, caught before publish.
|
|
102
|
+
|
|
103
|
+
**Density override gates (spec §4.2, F-7, F-8).** A theme's `densities.overrides` may now retune only `control-sm`/`-md`/`-lg`, `text-ui`, `text-body` and `radius-control`/`-surface`/`-overlay` — never `chrome-toolbar`, `text-label` or `space-*` — and must cover all five rungs, monotonically (strictly increasing, a constant `0` radius excepted) at both 390px and 1440px, with `control-sm <= control-md <= control-lg` holding within each rung. This is stricter than before: a single-rung override, or one of a token outside that list, built without complaint and now refuses at `buildTheme`. `@cueplusplus/theme-tools` exports `deriveRungs(normal, token)`, which derives the other four rungs' values from a theme's own `normal` value and the base ladder's own ratios, and a theme that overrides `control-sm`/`-md`/`-lg` at `ultra-compact` now gets its own coarse-pointer re-raise (`max(<the base compact floor>, <the theme's own value>)`) instead of falling back to the base ladder's. The re-raise is written under the same selectors as the theme's own `ultra-compact` rule, including the ones that reach an island still carrying `data-cue-follows` before it mounts, so under a coarse pointer such an island is held to the same floor as the settled one.
|
|
104
|
+
|
|
105
|
+
**`@cueplusplus/theme-base`'s `validateManifest` gained a real shape check on every geometry value (spec §4.2, F-8), where it previously accepted any non-empty string.** A value now has to be a unitless number, a `rem`/`px` length, the font-scale `calc()` a text rung carries, or a `clamp()`/`min()`/`max()` of `rem`/`px`/`vw` terms (plain, or wrapped in that same `calc()` for a `text-ui`/`text-body` override, per spec §4.3) — this is what makes the Zine and Porcelain Looks' clamp-shaped text rungs admissible at all. It also means a hand-written or foreign manifest (one built by something other than `@cueplusplus/theme-tools`) carrying a geometry value outside this shape — `0.625em`, `calc(1rem + 2px)` — now fails `validateManifest`, and `ThemeProvider` throws on it in development where it previously did not. No first- or third-party manifest this repository builds authors such a value.
|
|
106
|
+
|
|
107
|
+
None of the fifteen shipped theme packages (`cue`, `dusk`, `graphite`, `hivehub`, `kiln`, `luma`, `porcelain`, `quotamate`, `requestport`, `signal`, `snuffle`, `tender`, `terminal`, `venu`, `zine`) authors any of the new derived roles, style names or paint names, or overrides a density, so every one is unchanged but for the four derived-colour lines every `theme.css` block now carries.
|
|
108
|
+
|
|
109
|
+
**`@cueplusplus/studio-mcp`: a studio document may set the four derived colour roles.** The catalogue a document is validated against is the published `/r/tokens.json`, whose colour list is 48 names now (44 before `accent-fill`, `accent-fill-fg`, `accent-fill-hover` and `shade`).
|
|
110
|
+
|
|
111
|
+
- 7884cb4: The type voice reads the style set: a page title, a card, panel, bento or overlay title, body
|
|
112
|
+
copy, figures and field help text can each be restyled by a Look without a class at the call
|
|
113
|
+
site.
|
|
114
|
+
|
|
115
|
+
Every one of these sites now reads an optional `--cue-style-*` name through a `var()` whose
|
|
116
|
+
fallback is exactly what it rendered before. No shipped set (`console`, `editorial`,
|
|
117
|
+
`marketing`, `graphite`, `tender`, `zine`, `kiln`, `porcelain`) declares any of these 21 names
|
|
118
|
+
yet, and a set that does not declare one leaves its readers on their fallbacks, so the new names
|
|
119
|
+
change nothing under no style set or under any shipped set.
|
|
120
|
+
|
|
121
|
+
One change is visible under three shipped sets, and it is intended: **`FieldDescription` and
|
|
122
|
+
`FieldError` now take their label's face.** They read `--cue-style-label-face` like
|
|
123
|
+
`FieldLabel` above them, and that is a name every set declares. Under `tender`, `kiln` and
|
|
124
|
+
`porcelain` it is `var(--cue-font-sans)`, so a field's help text and its error move from mono to
|
|
125
|
+
the Look's sans, matching the label. Under no set and under `console`, `editorial`, `marketing`,
|
|
126
|
+
`graphite` and `zine` they stay mono.
|
|
127
|
+
|
|
128
|
+
- **`PageShell`'s title** reads `--cue-style-page-title-face`, `-size`, `-weight`, `-tracking`
|
|
129
|
+
and `-leading` (mono, `--cue-text-title`, 500, `normal`, inherited), plus
|
|
130
|
+
`--cue-style-display-variation` (`normal`) and `--cue-style-heading-ink` (`fg`).
|
|
131
|
+
- **`CardTitle`, `PanelHeader`'s title and `Bento.Tile`'s title** read the title voice:
|
|
132
|
+
`--cue-style-title-face`, `-size`, `-weight`, `-tracking` and `-leading` (mono,
|
|
133
|
+
`--cue-text-emphasis`, 500, `normal`, inherited), the variation and the heading ink.
|
|
134
|
+
- **`overlayTitleClasses`** (Dialog, AlertDialog, Drawer, Sheet and Popover titles) reads the
|
|
135
|
+
title face, weight, variation and heading ink at its own `--cue-style-overlay-title-size`
|
|
136
|
+
(`--cue-text-emphasis`).
|
|
137
|
+
- **`CardDescription`, `overlayTextClasses`, `overlayDescriptionClasses` and `PageShell`'s
|
|
138
|
+
subtitle** read `--cue-style-body-face` (mono) and `--cue-style-body-weight` (inherited). The
|
|
139
|
+
subtitle is a lede: it also reads `--cue-style-lede-size` (`--cue-text-ui`) and its ink as
|
|
140
|
+
`var(--cue-style-lede-ink, var(--cue-style-prose-ink, var(--cue-fg-muted)))`.
|
|
141
|
+
- **`Stat`'s value and detail, `Table`, `Row` (`rowVariants`), `Bento.Tile`'s eyebrow and
|
|
142
|
+
`SectionHeader`'s count** read `--cue-style-data-face` (mono). `tabular-nums` stays.
|
|
143
|
+
- **`FieldDescription` and `FieldError`** wear the label face (`--cue-style-label-face`: mono by
|
|
144
|
+
default, the sans under `tender`, `kiln` and `porcelain`, as above) and read
|
|
145
|
+
`--cue-style-help-size` (`--cue-text-micro`); the description's ink reads
|
|
146
|
+
`--cue-style-help-ink` (`fg-subtle`), and the error keeps `danger`.
|
|
147
|
+
- **The recessed control chassis** (`controlSurface`, `bareControlClasses`) reads
|
|
148
|
+
`--cue-style-body-weight` (inherited).
|
|
149
|
+
|
|
150
|
+
The public class constants `overlayTitleClasses`, `overlayTextClasses`,
|
|
151
|
+
`overlayDescriptionClasses`, `controlSurface`, `bareControlClasses` and `rowVariants` change
|
|
152
|
+
their strings accordingly. `className` still overrides as before: the weight readers are written
|
|
153
|
+
`font-[number:…]`, so a caller's `font-bold` or `font-semibold` replaces them through `cn()` as it
|
|
154
|
+
replaced `font-medium`.
|
|
155
|
+
|
|
156
|
+
- 5d75ae7: Captions, the eyebrow, chips and key caps read the style set's round-2 names (spec
|
|
157
|
+
2026-09-26-looks-fidelity §3.6, lane R2) — fifteen optional names, each falling back to exactly
|
|
158
|
+
what its reader rendered before. No shipped set declares any of the fifteen, so they move nothing
|
|
159
|
+
yet. What does move under shipped sets is a handful of readers that now read a face, case or
|
|
160
|
+
tracking name those sets already declare:
|
|
161
|
+
|
|
162
|
+
- **Under `tender`, `kiln` and `porcelain`** (a sans label face, no label case, `normal` label
|
|
163
|
+
tracking): a chip's face and case (sans, sentence case — F-15 below); the face of `StatusBar`,
|
|
164
|
+
its interactive items included, of `Table.Caption` and of the `Progress` header (sans); and the
|
|
165
|
+
`Progress` label's case (sentence case) and, under `tender` and `kiln`, its tracking (`normal`
|
|
166
|
+
in place of their caps rung; `porcelain`'s caps rung is already `normal`).
|
|
167
|
+
- **Under `tender`, `kiln`, `porcelain` and `zine`** (a sans control face): `Kbd`'s face (F-16
|
|
168
|
+
below).
|
|
169
|
+
|
|
170
|
+
Under no set, `console`, `graphite`, `editorial` and `marketing`, nothing renders differently —
|
|
171
|
+
except a `Table.GroupRow` given a weight in its `className`, whose name now takes it (below).
|
|
172
|
+
|
|
173
|
+
- **Label size, ink and weight.** `FieldLabel`, a `SectionHeader` label, a table head and group
|
|
174
|
+
row, a `Sidebar.Section` label, a `Stat` label and a menu group label read
|
|
175
|
+
`--cue-style-label-size`, `-ink` and `-weight`; the `Checkbox` and `Switch` labels read the ink
|
|
176
|
+
and the weight. Each keeps its own fallback: the label rung (the micro rung for `Stat`),
|
|
177
|
+
`fg-muted` or `fg-subtle`, and the inherited weight (`400` on a table head, whose `<th>` is bold
|
|
178
|
+
in the user-agent sheet). A caller's `className="font-medium"` still wins, as it did over
|
|
179
|
+
`font-normal`. A `Table.GroupRow`'s name now inherits its cell's weight instead of pinning
|
|
180
|
+
`font-normal`, so a set's label weight moves the whole row, and a weight in the row's
|
|
181
|
+
`className` (which lands on the cell) now reaches the name as well as the count.
|
|
182
|
+
- **The eyebrow** reads `--cue-style-eyebrow-face`, `-size`, `-ink` and `-weight`, falling back
|
|
183
|
+
through the label names to mono, the label rung, the accent and the inherited weight; and
|
|
184
|
+
`--cue-style-eyebrow-glyph: none` drops the `//` slashes (`inline` by default).
|
|
185
|
+
`slashes={false}` still removes them from the markup under any set.
|
|
186
|
+
- **Chips read the label face** (`--cue-style-label-face`) and **their case through
|
|
187
|
+
`--cue-style-chip-case`**, which falls back to the label case. This reverses the earlier "a
|
|
188
|
+
tag's text is the value being shown" ruling (F-15): under a sans, sentence-case Look a chip is
|
|
189
|
+
now sans and sentence case like the captions around it. Under no set and under `console`,
|
|
190
|
+
`editorial`, `marketing`, `graphite` and `zine` it is still mono and uppercase; pass
|
|
191
|
+
`className="font-mono uppercase"` to keep a chip mono under every set. Its tracking, size and
|
|
192
|
+
radius read `--cue-style-chip-tracking`, `-size` and `-radius`, and each tone's fill and rim are
|
|
193
|
+
a share a set can move: `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%),
|
|
194
|
+
transparent)` and the same at `--cue-style-chip-edge, 35%` — exactly `bg-<tone>/10` and
|
|
195
|
+
`border-<tone>/35` by default. `neutral` keeps its own inks.
|
|
196
|
+
- **`Kbd` wears the control face** (`--cue-style-control-face`, mono by default) rather than a
|
|
197
|
+
fixed mono (F-16) — so it is sans wherever controls are: under `tender`, `kiln`, `porcelain` and
|
|
198
|
+
`zine` — and reads `--cue-style-kbd-edge` for its rim, the chip's
|
|
199
|
+
`--cue-style-chip-size` and `--cue-style-label-weight`.
|
|
200
|
+
- **`StatusBar`, `Table.Caption` and the `Progress` header** read the label face, and the
|
|
201
|
+
`Progress` label the label case and tracking, instead of a fixed `font-mono`, `uppercase` and
|
|
202
|
+
caps tracking. An interactive `StatusBar.Item`, a `<button>` that restates the bar's face
|
|
203
|
+
because form controls inherit no type, restates the label face too, so one bar never mixes two
|
|
204
|
+
faces.
|
|
205
|
+
|
|
206
|
+
The shadcn registry's `@cue/eyebrow` ships the new label and eyebrow modules and `@cue/chip`
|
|
207
|
+
ships `_style-chip.ts`; `@cue/chip` now depends on `@cue/eyebrow`, which owns the label modules
|
|
208
|
+
it imports.
|
|
209
|
+
|
|
210
|
+
- 5d75ae7: Navigation, selection, segments, tabs, menus and section rules take their voice from the style
|
|
211
|
+
set, so a Look can restyle a header, a sidebar, a tab strip or a menu without a class at every
|
|
212
|
+
call site. Every reader falls back to exactly the class it replaced, and no shipped style set
|
|
213
|
+
declares any of the new names yet, so nothing renders differently under no style set, and under
|
|
214
|
+
the shipped sets one thing does: **`Footer`'s fine print** (`meta`) is now set in the label face
|
|
215
|
+
rather than always in mono, so under `tender`, `kiln` and `porcelain`, whose label face is sans,
|
|
216
|
+
it is sans; under every other set it is mono as before.
|
|
217
|
+
|
|
218
|
+
- **`AppBar`.** The bar reads `--cue-style-appbar-height`, `--cue-style-chrome-rule` (its bottom
|
|
219
|
+
rule's ink) and `--cue-style-appbar-inset` (its inline padding). `AppBar.Link` reads the
|
|
220
|
+
navigation voice — `--cue-style-nav-face`, `-case`, `-tracking`, `-size` and `-weight`, falling
|
|
221
|
+
back to mono at the UI size — plus `--cue-style-nav-pad`, `--cue-style-nav-hover-ground`,
|
|
222
|
+
`--cue-style-hover-ink`, and `--cue-style-quiet-ink` for the `muted` register.
|
|
223
|
+
- **`Footer`** sets its column in the same navigation voice, reads `--cue-style-footer-rule` for
|
|
224
|
+
its top rule's width and `--cue-style-section-rule` for the rule over its fine print, which is
|
|
225
|
+
set in the label face. **`SectionHeader`**'s hairline reads `--cue-style-section-rule`.
|
|
226
|
+
- **`Sidebar.Item`** reads `--cue-style-nav-ink` at rest; the current page reads
|
|
227
|
+
`--cue-style-nav-active-ground`, then `--cue-style-selected-ground`, for its ground, and
|
|
228
|
+
`--cue-style-selected-ink` and `--cue-style-selected-weight`. A selected **`Table.Row`** reads
|
|
229
|
+
`--cue-style-selected-ground` and `--cue-style-selected-ink`, so a Look that inverts a
|
|
230
|
+
selection inverts its ink with it.
|
|
231
|
+
- **`SegmentedControl`** and **`Tabs`** share the segment names: `--cue-style-segment-track` and
|
|
232
|
+
`--cue-style-segment-inset` on the track — `SegmentedControl`'s rounded frame, whose own
|
|
233
|
+
`surface-1` ground and `space-1` padding are the fallbacks, and the `Tabs` list, which has
|
|
234
|
+
neither — `--cue-style-segment-idle-ink` on an unpicked choice,
|
|
235
|
+
and `--cue-style-segment-ground`, `-ink`, `-edge` and `-weight` on the pressed segment and the
|
|
236
|
+
active tab, which also carry the paint axis's resting shade (`--cue-paint-rest-shade`). A
|
|
237
|
+
segment's corners nest inside the track's inset. `Tabs` reads `--cue-style-tab-rule` and
|
|
238
|
+
`--cue-style-tab-underline` for its rule and the active underline.
|
|
239
|
+
- **Menu rows** (`DropdownMenu`'s items, and anything built on the exported `menuItemClasses`)
|
|
240
|
+
read `--cue-style-quiet-ink` at rest and `--cue-style-menu-highlight` when highlighted. The
|
|
241
|
+
exported `menuItemClasses` string no longer contains `text-fg-muted` or
|
|
242
|
+
`data-[highlighted]:bg-accent-soft`: code that edits it with `.replace()` on either finds
|
|
243
|
+
nothing to replace. Override those through `className` (or append a class) instead.
|
|
244
|
+
- **A `className` still wins over each of them**, as it won over the class each replaced: a
|
|
245
|
+
caller's `font-medium` on an `AppBar.Link` or `Footer`'s `columnClassName`, and a caller's
|
|
246
|
+
weight, ground, shadow or ink on a `Sidebar.Item`, a `SegmentedControl` item, a `Tabs.Tab` or
|
|
247
|
+
a `Table.Row`, applies to the current, pressed, active or selected one too. The readers of
|
|
248
|
+
what those states never set before — their weight, the active tab's ground, the pressed
|
|
249
|
+
segment's and active tab's shadow, the selected row's ink and a link's hover ground — sit at
|
|
250
|
+
zero specificity (`:where()`), so any class beats them.
|
|
251
|
+
|
|
252
|
+
`--cue-style-appbar-inset` and `--cue-style-nav-active-ground` are read now and join the style
|
|
253
|
+
contract in a later release; until then no set declares them.
|
|
254
|
+
|
|
255
|
+
- 7884cb4: Surfaces and proportions read the style set (looks-fidelity round, lane R5). Every reader falls back to what the site drew before, so nothing changes under no style set or any shipped set until a Look declares a value.
|
|
256
|
+
|
|
257
|
+
- **`Card`**: every side of `Card.Header`, `Card.Content` and `Card.Footer` pads `--cue-space-5` times `--cue-style-card-pad` (1 by default), seamed or not.
|
|
258
|
+
- **`Dialog`**: the popup's corner reads `--cue-style-dialog-radius` over the overlay rung, times `--cue-radius-scale`. Every other overlay keeps `rounded-overlay`.
|
|
259
|
+
- **`Band`**: a `width="broad"` column reads `--cue-style-band-width` over `--cue-measure-broad`, and `Band` spends the rhythm's two halves, `--cue-band-y-top` and `--cue-band-y-bottom`, each falling back to `--cue-band-y`. `Footer` is unchanged and stays symmetric, `Container` keeps its broad rung, and a `className="py-0"` still zeroes a band.
|
|
260
|
+
- **`Preview`**: a frame's four registration marks read `--cue-style-stage-marks`, so a set that says `none` takes them away.
|
|
261
|
+
- **`Card` and `Panel`**: the paint axis's resting shade, `--cue-paint-rest-shade`, is now the second layer of their shadow, transparent under every shipped pack.
|
|
262
|
+
|
|
263
|
+
Rendered no-ops, measured: computed styles match the pre-change snapshot in both engines, and Card and Panel are pixel-identical under all ten paint packs. The one visible difference is in the markup. The longer class strings add about 2% to the HTML of pages that render many of these components.
|
|
264
|
+
|
|
265
|
+
- e56ebf3: Round 2 of the Looks fidelity work added the readers its five Looks' fix lanes asked for. Every new reader falls back to the class it replaced. No shipped style set declares any of the new names yet, so no set renders differently through a new name. A shipped set does render differently at the sites below, where an existing name is now read. Each change follows the set's own voice.
|
|
266
|
+
|
|
267
|
+
- **Label voice at four more captions.** These are `CodeBlock`'s label, `TerminalFrame`'s title, `Footer`'s meta row and a `Frames.Item` caption. They read `--cue-style-label-size` and `--cue-style-label-ink`. A frame's caption also reads the label face and tracking, and a new optional `--cue-style-caption-case`. Under `tender`, `zine`, `kiln`, `porcelain` and `graphite` they take each set's label size, and each set's label ink where it has one.
|
|
268
|
+
- **Body weight.** `--cue-style-body-weight` now also reaches `FieldDescription`, `FieldError`, an unselected `Select` or combobox row, and the label beside a `Switch`, a `Checkbox` or a `Radio`. The control label falls back to `--cue-style-label-weight`. Under `tender` these are 300.
|
|
269
|
+
- **`Radio`'s label** reads the label ink and weight as `Checkbox`'s does.
|
|
270
|
+
- **The disclosure trigger.** `Accordion`, `Collapsible` and `Disclosure` read the control face, the quiet ink and the label weight.
|
|
271
|
+
- **`Select` and the filterable lists.** Their rows read `--cue-style-menu-highlight` (kiln's is `transparent`). The select's popup now uses the overlay recipe that every other popup uses, `STROKE_SURFACE_2`, so it reads `--cue-style-overlay-ground` and the pack's overlay stroke. Under no pack this draws the same pixels as before.
|
|
272
|
+
- **Help ink and size.** `Table.Caption` and the breadcrumb separator read `--cue-style-help-ink`. `Tooltip` reads `--cue-style-help-size`.
|
|
273
|
+
- **Other existing names at new sites.**
|
|
274
|
+
- The `PageShell` subtitle reads `--cue-style-prose-tracking`, which `kiln` and `zine` declare.
|
|
275
|
+
- The underline's hover colour reads `--cue-style-hover-ink`.
|
|
276
|
+
- Idle tabs read `--cue-style-segment-weight`, which `porcelain` sets to 500.
|
|
277
|
+
|
|
278
|
+
New optional names, each read at the sites named and falling back to what the site drew:
|
|
279
|
+
|
|
280
|
+
- **Type**
|
|
281
|
+
- `--cue-style-body-size` and `--cue-style-body-leading`: descriptions, tables, the breadcrumb, field help and the tooltip.
|
|
282
|
+
- `--cue-style-description-leading` and `-tracking`: `Card.Description`.
|
|
283
|
+
- `--cue-style-lede-leading`: the `PageShell` subtitle.
|
|
284
|
+
- `--cue-style-overlay-title-leading`, `--cue-style-label-leading` and `--cue-style-input-leading`.
|
|
285
|
+
- `--cue-style-code-weight`: `CodeBlock`.
|
|
286
|
+
- `--cue-style-title-variation`: the card, panel and bento titles, ahead of the display variation.
|
|
287
|
+
- `--cue-style-control-step-size`: the `sm` and `lg` fields and the `lg` button.
|
|
288
|
+
- **Inks**
|
|
289
|
+
- `--cue-style-option-ink` and `-option-selected-ink`: select and list rows.
|
|
290
|
+
- `--cue-style-secondary-hover-ink` and `-hover-edge`: the secondary tone under the pointer.
|
|
291
|
+
- `--cue-style-segment-rim`: `SegmentedControl`'s frame.
|
|
292
|
+
- **Geometry**
|
|
293
|
+
- `--cue-style-field-focus-offset`: the field ring.
|
|
294
|
+
- `--cue-style-gutter`: a padded `Container`.
|
|
295
|
+
- `--cue-style-chip-height` and `-chip-pad`.
|
|
296
|
+
- `--cue-style-kbd-size`, `-kbd-height`, `-kbd-pad` and `-kbd-radius`.
|
|
297
|
+
- `--cue-style-check-radius` and `-check-size`.
|
|
298
|
+
- `--cue-style-menu-item-radius`: menu, select and list rows.
|
|
299
|
+
- `--cue-style-tab-radius`: pill tabs on a rounded track.
|
|
300
|
+
- `--cue-style-tooltip-pad`, `--cue-style-row-pad`, `--cue-style-collapse-height`, `--cue-style-popover-pad` and `--cue-style-textarea-pad`.
|
|
301
|
+
- **`Card`'s stroke** reads the new `--cue-paint-stroke-raised-from` and `-to` ahead of the shared pair.
|
|
302
|
+
|
|
303
|
+
Three changes have no new name:
|
|
304
|
+
|
|
305
|
+
- `PageShell`'s title wraps a word too long for its column (`overflow-wrap: anywhere`).
|
|
306
|
+
- A `Panel` header's title clips only on the inline axis, so a tight title leading no longer cuts its descenders.
|
|
307
|
+
- A ground `Band` masks its grain with its own ground, so a transparent ground no longer lays a second grain over the page's.
|
|
308
|
+
|
|
309
|
+
- f2c514d: The first frame of a page is the visitor's theme, mode, density and type size everywhere on it —
|
|
310
|
+
nested theme islands, `Preview` stages and density islands included — not the app's defaults.
|
|
311
|
+
|
|
312
|
+
Under a root `ThemeProvider` that persists (the default), `prepaintScript()` puts the visitor's
|
|
313
|
+
stored preferences on `<html>` before the page paints, and the root restates nothing of its own
|
|
314
|
+
until it has restored them. Three things still painted the app's defaults until they hydrated —
|
|
315
|
+
on a streamed page, for as long as their part of the page took to arrive:
|
|
316
|
+
|
|
317
|
+
- **A nested provider or stage that names one of theme and mode and not the other.** A theme's
|
|
318
|
+
light palette is keyed on `data-theme` and `data-mode` together, so such an island stamps the
|
|
319
|
+
other beside it, and in the server's HTML the only value it had was the root's prop. A visitor
|
|
320
|
+
who chose dark in an app whose default is light saw every `<ThemeProvider theme="…">` island and
|
|
321
|
+
every `<Preview theme="…">` stage light, at the default density; one whose stored theme was not
|
|
322
|
+
the default saw every `<ThemeProvider mode="…">` island in the default theme.
|
|
323
|
+
- **A density island's theme stamp.** A nested provider that names only a density, a `<Density>`
|
|
324
|
+
island and a `<Preview density="…">` stage stamp the theme around them as `data-cue-theme`, which
|
|
325
|
+
a theme's own density retunes are addressed through; the stamp was the root's default theme.
|
|
326
|
+
- **The type scale.** `fontScale` is published on the root's own element, but until the root has
|
|
327
|
+
restored, the text-size tokens the page reads are declared on `<html>`, which carried no scale:
|
|
328
|
+
every word set by a text token was drawn at 1× on the first frame and at the root's scale after.
|
|
329
|
+
|
|
330
|
+
What changes:
|
|
331
|
+
|
|
332
|
+
- **`@cueplusplus/ui`:** until it has mounted, an island leaves out any theme, mode or density it
|
|
333
|
+
would have copied from a persisting root (and the inline `color-scheme` that goes with them), and
|
|
334
|
+
carries `data-cue-follows` naming what it left out (`"mode density"`, `"theme"`, …). Its own
|
|
335
|
+
layout effect then stamps exactly the attributes it stamped before, ahead of the first paint once
|
|
336
|
+
it runs, and the marker goes. Anything the server does know is stamped from the first render as
|
|
337
|
+
before: an axis the island names itself, one named by a provider, `<Density>` island or stage
|
|
338
|
+
between it and the root, and everything under a root with `persistPreferences={false}`. If you
|
|
339
|
+
read these attributes off a nested provider's element before it hydrates, read `<html>`'s instead;
|
|
340
|
+
if you have written CSS of your own keyed on them, it will not reach such an island until it has
|
|
341
|
+
mounted (see **Migrating**). `overrides.colors` follows too: while the mode is `<html>`'s — a
|
|
342
|
+
persisting root before its restore, an island before its mount — the colour edit is a `<style>`
|
|
343
|
+
beside the element keyed on `<html>`'s mode (carrying `nonce`), not the inline block for the
|
|
344
|
+
root's default mode, so the first frame never pairs one mode's palette with the other mode's edit;
|
|
345
|
+
after the restore or the mount it is inline, as before. A nested provider with `asChild` over a
|
|
346
|
+
component, rather than a host element, follows nothing and stamps the root's values as before: the
|
|
347
|
+
re-render at its mount would render the component again, and a `<Suspense>` boundary it creates
|
|
348
|
+
would lose its streamed HTML.
|
|
349
|
+
- **`prepaintScript({ fontScale })`, new:** pass the same number as `<ThemeProvider fontScale>`, and
|
|
350
|
+
the script writes it on `<html>` as `--cue-font-scale`, where the first frame's text tokens are
|
|
351
|
+
declared; the root keeps it there after hydration, and takes it off when it unmounts. Omitted or
|
|
352
|
+
`1`, the script is exactly what it was. An app with a root `fontScale` other than `1` has to pass
|
|
353
|
+
it to get a first frame at that scale.
|
|
354
|
+
- **`createTheme()`, the `ThemeConfigurator`'s override stylesheet and `overrides.densities`** gain
|
|
355
|
+
the same selectors as a packaged theme (below), so a generated theme, a configured one and a
|
|
356
|
+
density override reach such an island too.
|
|
357
|
+
- **`themeSelector(name, { follows: true })`, new:** the same selectors for a theme assembled by
|
|
358
|
+
hand with `serializeThemeCss()`/`serializeThemeBlock()` — pass it for every block, or such an
|
|
359
|
+
island paints that theme's dark block for a light visitor until it mounts. `createTheme()` writes
|
|
360
|
+
exactly this. `mode` now also takes `"system"`, for the block inside each
|
|
361
|
+
`prefers-color-scheme` query; `follows` with both a light or system `mode` and a `density` throws.
|
|
362
|
+
- **`@cueplusplus/theme-tools`, and every theme package regenerated with it:** each `theme.css`
|
|
363
|
+
gains one selector line in front of each colour block — two in front of its light and system
|
|
364
|
+
blocks — and, for a theme that retunes or adds a density, in front of each density rule, that
|
|
365
|
+
matches such an island by `<html>`'s theme, mode or density and the island's marker, e.g.
|
|
366
|
+
`:where(:root[data-mode="light"]) [data-theme="x"][data-cue-follows~="mode"]`. No colour or
|
|
367
|
+
value moves, and each block keeps its specificity. A `data-theme` you stamp by hand, with no
|
|
368
|
+
mode beside it, is untouched: only the library's islands carry the marker. A theme with no light
|
|
369
|
+
palette (`supportsLight: false`, from theme-tools or `createTheme()`) now declares
|
|
370
|
+
`color-scheme: dark` in its two system blocks rather than `light dark`, as the pre-paint script
|
|
371
|
+
and the provider already said for it.
|
|
372
|
+
- **`@cueplusplus/tokens`:** each density rule in `axes.css`, and the coarse-pointer floor, gains the
|
|
373
|
+
same kind of line, so an island that is following the root's density declares that density
|
|
374
|
+
itself — its text tokens at its own `fontScale`, not the page's. The shadcn registry's
|
|
375
|
+
`registry/token-layer.json` keys its density rules the same way (the selector list `axes.css`
|
|
376
|
+
writes, `", "`-joined), so a registry install reaches such an island too.
|
|
377
|
+
- **`@cueplusplus/theme-base`:** `base.css`'s light and system blocks gain the line too, for the
|
|
378
|
+
tokens a `delta` theme's light palette leaves to the base.
|
|
379
|
+
|
|
380
|
+
## Migrating
|
|
381
|
+
|
|
382
|
+
The new runtime and the new stylesheets ship as one change, and nothing but you ties their versions
|
|
383
|
+
together: the theme packages version on their own and peer only on `@cueplusplus/theme-base`, so
|
|
384
|
+
`pnpm up @cueplusplus/ui` alone leaves every `theme.css` you have where it was. With an older
|
|
385
|
+
stylesheet, an island that follows `<html>`'s mode matches no light block until it mounts, and
|
|
386
|
+
paints its theme's dark block for every visitor whose mode is light — on a streamed page, for as
|
|
387
|
+
long as its part of the page takes to arrive. Before, it painted the app's default mode, which was
|
|
388
|
+
right for exactly those visitors. So, in the same change as this upgrade:
|
|
389
|
+
|
|
390
|
+
- **Upgrade every `@cueplusplus/theme-*` package you register, and `@cueplusplus/theme-base`,** to
|
|
391
|
+
the releases that ship with this one: `pnpm up "@cueplusplus/theme-*"`.
|
|
392
|
+
- **A theme package you built with `@cueplusplus/theme-tools`:** upgrade `theme-tools`, run the
|
|
393
|
+
package's `generate` again, and ship the `theme.css` it writes.
|
|
394
|
+
- **CSS you emitted from `createTheme()`, `serializeThemeCss()`/`serializeThemeBlock()` or the
|
|
395
|
+
`ThemeConfigurator`'s CSS export and committed:** emit it again with this release.
|
|
396
|
+
`createTheme()` and the configurator write the new selectors themselves; a block you assemble
|
|
397
|
+
with `themeSelector()` gets them from `follows: true`.
|
|
398
|
+
- **Overrides of your own keyed on `[data-theme]`, `[data-mode]` or `[data-density]`:** put the twin
|
|
399
|
+
line in front of each compound (`docs/CONSUMING.md` §4 has the three forms), or they reach such an
|
|
400
|
+
island only once it has mounted.
|
|
401
|
+
- **Snapshots of server-rendered markup:** a nested provider, a stage or a `<Density>` island under
|
|
402
|
+
a persisting root no longer carries the `data-mode`, `data-theme`, `data-density` or
|
|
403
|
+
`data-cue-theme` it follows until it mounts, and carries `data-cue-follows` instead; a provider
|
|
404
|
+
with `overrides.colors` there carries `data-cue-colors`, with a `<style data-cue-colors-for>`
|
|
405
|
+
beside it. The DOM after hydration is what it was. Re-record them, and read the document's axes
|
|
406
|
+
off `<html>` before hydration.
|
|
407
|
+
- **A root `fontScale` other than `1`:** pass the same number to `prepaintScript({ fontScale })`.
|
|
408
|
+
|
|
409
|
+
- 0d26a0c: Radii resolve at the element that draws them, a `Preview` stage that names a theme restates the
|
|
410
|
+
rung in force around it, and every focus ring library-wide reads the theme's contrast-gated
|
|
411
|
+
`focus` role instead of `accent`.
|
|
412
|
+
|
|
413
|
+
- **`rounded-(--radius-control|surface|overlay)` is gone; the library reads the compiled
|
|
414
|
+
`rounded-control` / `rounded-surface` / `rounded-overlay` utilities instead** (spec
|
|
415
|
+
2026-09-26-looks-fidelity §4.1.1, F-11). The old form named a Tailwind theme variable that
|
|
416
|
+
resolves once, at `:root`/`:host` — so a theme override or a `<Density>` island never reached a
|
|
417
|
+
radius, however deep inside it a card or a dialog sat. Measured: a `large` island computed
|
|
418
|
+
`--cue-radius-control: 5px` and still rendered a 4px radius. The new utilities inline the same
|
|
419
|
+
`calc(var(--cue-radius-*) * var(--cue-radius-scale))` at the element that draws it, so an
|
|
420
|
+
override or an island now reaches every radius in its subtree. No visual change under any
|
|
421
|
+
shipped preset today; this is what makes a theme's own radius override (a later release) work at
|
|
422
|
+
all. `cn()` is taught the three rungs (`extendTailwindMerge`), so a caller's own `rounded-*`
|
|
423
|
+
still overrides a component's default the way `className` always has — unextended,
|
|
424
|
+
`tailwind-merge` cannot see that `rounded-surface` and `rounded-full` are the same property, and
|
|
425
|
+
keeps both instead of the caller's winning. `Message`'s user and agent bubbles were the one
|
|
426
|
+
remaining `var(--radius-*)` reader (a four-value shorthand no plain utility could express, or so
|
|
427
|
+
it seemed); they now compose two ordinary bridge utilities instead — an all-corner rung and one
|
|
428
|
+
corner overridden — so no reader of the old, unreachable form is left in this package.
|
|
429
|
+
- **A `Preview` stage that names a theme (or a mode) now also carries `data-density` and
|
|
430
|
+
`data-cue-theme`, even when it names no density of its own.** A theme's rung retunes key on the
|
|
431
|
+
theme and the rung on one element, and `/looks` opens a stage with a theme and nothing else — so
|
|
432
|
+
before this, such a stage inherited the rung already resolved against the page's theme, and its
|
|
433
|
+
own theme's retune of that rung never applied. The stage now restates the rung in force around it
|
|
434
|
+
beside the theme it is naming, exactly as a nested `ThemeProvider` that names a theme already
|
|
435
|
+
does; outside every provider there is no rung in force, and nothing is restated. A stage that
|
|
436
|
+
names its own `density` is unaffected; a stage that names neither a theme nor a mode still stamps
|
|
437
|
+
nothing. Under a root that persists preferences, where that rung is the root's, the stage holds it
|
|
438
|
+
back until it mounts and names `density` in `data-cue-follows` instead — the same follower the
|
|
439
|
+
island first-frame fix introduced — so its first frame is the visitor's stored rung, and its own
|
|
440
|
+
theme's retune of it, rather than the app's default corrected a frame later.
|
|
441
|
+
- **Every `focus-visible` (and, for the one attribute-driven exception, `data-[focus-visible]`)
|
|
442
|
+
ring in this library now draws in the theme's `focus` role, never `accent`.** `forms/_chassis.ts`
|
|
443
|
+
was the only site that already made this distinction (its own comment has the long argument:
|
|
444
|
+
`focus` is contrast-gated at 3:1 against five grounds and `accent` is not); the other 81 sites —
|
|
445
|
+
every button, chip, tab, link, row, control and the colour picker's own draggable thumb — pointed
|
|
446
|
+
at the un-gated brand colour instead. A new shared module, `system/_focus-ring.ts`, draws the ring
|
|
447
|
+
everywhere now, and its width is a style-set knob (`--cue-style-focus-width`, falling back to the
|
|
448
|
+
existing 2px) that a Look may widen without a second module.
|
|
449
|
+
|
|
450
|
+
**This is a deliberate colour change, not a no-op.** The ring's colour moves wherever a theme's
|
|
451
|
+
`focus` differs from its `accent` — ten of the thirty shipped theme blocks:
|
|
452
|
+
|
|
453
|
+
- `graphite` light and dark
|
|
454
|
+
- `kiln` light and dark
|
|
455
|
+
- `porcelain` light and dark
|
|
456
|
+
- `tender` dark
|
|
457
|
+
- `hivehub` light
|
|
458
|
+
- `luma` light
|
|
459
|
+
- `venu` light
|
|
460
|
+
|
|
461
|
+
The other twenty blocks ship `focus` and `accent` at the same value, so nothing moves on screen
|
|
462
|
+
there. No component's public API changed.
|
|
463
|
+
|
|
464
|
+
`system/_focus-ring.ts`'s seven exports are each a complete literal string, not built from a
|
|
465
|
+
shared modifier-and-offset helper: Tailwind's compiler discovers a utility by scanning source
|
|
466
|
+
text for a whole candidate, never by evaluating the template literal that would assemble one
|
|
467
|
+
from parts, so a helper-built class rendered correctly everywhere and painted an `outline-offset`
|
|
468
|
+
of `0px` on every site in a real browser. `pnpm test:browser` (260/260) is green with the literal
|
|
469
|
+
form; nothing outside this one module needed a change.
|
|
470
|
+
|
|
471
|
+
`<AgentSurface skin="aui">`'s island re-points `--cue-focus` to its own ink alongside `--cue-accent`,
|
|
472
|
+
so an element inside it keeps drawing its ring in the island's palette rather than the outer
|
|
473
|
+
console theme's — the same ink it always drew, before this shared module gave the property a
|
|
474
|
+
name to read.
|
|
475
|
+
|
|
476
|
+
- 5d75ae7: `Button`, `IconButton`, the checkbox and `Link` take their voice, tones and ink from the style
|
|
477
|
+
set, and the outline button, every recessed input and the checkbox take the paint axis's resting
|
|
478
|
+
shade (spec 2026-09-26-looks-fidelity §3.7, §3.10 and §10.4, plan R3).
|
|
479
|
+
|
|
480
|
+
- **`Button` and `IconButton`.** The chassis reads `--cue-style-control-weight` (falling back to
|
|
481
|
+
500, `font-medium`'s weight), `--cue-style-control-tracking` (`normal`),
|
|
482
|
+
`--cue-style-control-trim` (a `text-box` of `normal`) and `--cue-style-control-case` (`none`).
|
|
483
|
+
Each size's inline padding is its old rung times `--cue-style-control-pad` (1). The secondary
|
|
484
|
+
tone reads `--cue-style-secondary-ink`, `-ground` and `-edge`; the ghost and outline tones read
|
|
485
|
+
`--cue-style-quiet-ink` over their own inks (`fg-muted` and `fg`), and the outline reads
|
|
486
|
+
`--cue-style-outline-edge`. Hover states keep their classes.
|
|
487
|
+
- **The checkbox's** resting edge reads `--cue-style-check-edge` (`border`).
|
|
488
|
+
- **`Link`** reads `--cue-style-link-ink` (`fg`), and its `underline` variant
|
|
489
|
+
`--cue-style-inline-link-ink`, which falls back through the link ink; the underline's colour and
|
|
490
|
+
offset read `--cue-style-link-rule` (`border`) and `--cue-style-link-offset` (4px), its weight
|
|
491
|
+
`--cue-style-link-weight` (its parent's), and its hover ink `--cue-style-hover-ink` (`accent`).
|
|
492
|
+
Each variant now carries its own ink and the base none, so `linkVariants()` spread without
|
|
493
|
+
`cn()` never carries two.
|
|
494
|
+
- **The resting shade.** The outline tone, the recessed control chassis (`Input`, `Textarea`,
|
|
495
|
+
`Select`'s trigger, `NumberField` and every other control on it) and the checkbox add
|
|
496
|
+
`REST_SHADE`, a one-stop shadow whose ink is `--cue-paint-rest-shade`.
|
|
497
|
+
- **A `className` still overrides each of them** the way it overrode the class it replaced: a
|
|
498
|
+
caller's `font-*` weight, `tracking-*`, `px-*`, text, background and border colour, or
|
|
499
|
+
`shadow-*` passed to `Button`, `IconButton`, `Checkbox`, `Link` or an input replaces the reader
|
|
500
|
+
through the component's own `tailwind-merge`, and a `shadow-<colour>` tints the resting shade.
|
|
501
|
+
A caller's `uppercase`, `normal-case` and the rest still win over the case reader, which
|
|
502
|
+
Tailwind emits before them.
|
|
503
|
+
- **Concatenated onto `buttonVariants()` or `linkVariants()` without a merge, a class no longer
|
|
504
|
+
always wins.** Both return their recipe unmerged, so a class appended by a template string, `clsx`
|
|
505
|
+
or their own `className` option competes with the recipe's by Tailwind's emission order. The
|
|
506
|
+
button's padding readers (`px-[calc(…)]`) are emitted after every numeric `px-*`, where the
|
|
507
|
+
`px-(--cue-space-*)` rungs they replace were emitted before them, so `` `${buttonVariants()} px-2` ``
|
|
508
|
+
now keeps the recipe's padding; the link's offset reader is likewise emitted after every numeric
|
|
509
|
+
`underline-offset-*`. Pass `className` to the component, or merge with `tailwind-merge`.
|
|
510
|
+
|
|
511
|
+
Every fallback is what the site drew before, and no shipped style set or paint pack declares any
|
|
512
|
+
of these names with another value yet, so nothing renders differently under any shipped Look: the
|
|
513
|
+
style names are declared only as the shared `[data-style]` reset's `initial`, and every pack's
|
|
514
|
+
rest shade is `transparent`. One inheritance edge moves: a button used to inherit a letter-spacing
|
|
515
|
+
or a case from an ancestor that set one, and now draws `normal` and `none` unless the style set
|
|
516
|
+
names others. Measured over seven of the documentation site's pages, the kitchen sink among
|
|
517
|
+
them, no button sits under such an ancestor.
|
|
518
|
+
`--cue-style-control-case` is not yet part of the style contract; a later release adds it.
|
|
519
|
+
|
|
520
|
+
- 3d481fc: `AppBar`'s bottom rule can be dashed. The style contract gains one optional name, `--cue-style-chrome-rule-style`, for the rule's line style, beside the `--cue-style-chrome-rule` that already sets its ink (looks-fidelity round 5, plan V.2: Z17). Its value rule is `solid` or `dashed`, the two that a measured row needs.
|
|
521
|
+
|
|
522
|
+
- **`AppBar.Root` reads it** through the slot its own `border-b` already reads, Tailwind's `--tw-border-style`, rather than through a second `border-bottom-style` declaration. A caller's own style class, such as `className="border-dotted"`, therefore still wins as it did: it writes `border-style` itself, and Tailwind emits it after `border-b`. A raw declaration would have been emitted after it and beaten it.
|
|
523
|
+
- **The fallback is `solid`.** That is the slot's own initial value, and the solid rule every bar drew before. The name is `initial` on the shared `[data-style]` reset and `console` declines it, so under no set, and under every set that does not name it, the bar draws exactly what it did.
|
|
524
|
+
|
|
525
|
+
- 3d481fc: `Footer`'s two rules can be dashed. The style contract gains one optional name, `--cue-style-footer-rule-style`, for the line style of both of the footer's rules: the one across its top and the one over its fine print (looks-fidelity round 5, plan V.2: T120, T121). Its value rule is `solid` or `dashed`, as for `--cue-style-chrome-rule-style`, the app bar's.
|
|
526
|
+
|
|
527
|
+
- **`Footer` reads it on both rules** through the slot their own `border-t` utilities already read, Tailwind's `--tw-border-style`, rather than through a second `border-top-style` declaration. The slot does not inherit, so the landmark and the fine-print row each fill it. A caller's own style class, such as `className="border-dotted"`, therefore still wins on the landmark as it did: it writes `border-style` itself, and Tailwind emits it after the width utilities. A raw declaration would have been emitted after it and beaten it.
|
|
528
|
+
- **The fallback is `solid`.** That is the slot's own initial value, and the solid rules every footer drew before. The name is `initial` on the shared `[data-style]` reset and `console` declines it, so under no set, and under every set that does not name it, the footer draws exactly what it did.
|
|
529
|
+
- **A name of its own, not the app bar's.** A source can style the two ends of a page apart: stripe.com draws the rule under its header solid and both of its footer's rules dashed. `Band`'s rule does not read it either.
|
|
530
|
+
|
|
531
|
+
- 88c6245: The package manifest names four more presets: `kiln`, `porcelain`, `tender` and `zine`.
|
|
532
|
+
|
|
533
|
+
`@cueplusplus/ui/manifest/manifest.json`'s `themes` now lists all four in their alphabetical slots — `kiln` between `hivehub` and `luma`, `porcelain` between `luma` and `quotamate`, `tender` between `snuffle` and `terminal`, `zine` after `venu` — and `manifest/tokens.json` carries each entry: the four `@cueplusplus/theme-*` packages, both modes, the five base density rungs. That list is what a tool or an agent reads to learn which palettes exist before it suggests one, so anything that reads it now offers all four too.
|
|
534
|
+
|
|
535
|
+
Nothing in the library changed to make room: a theme is still an application's choice, so to use one install its package beside `@cueplusplus/theme-base`, import its `theme.css` after `@cueplusplus/ui/styles.css`, and hand its manifest to `<ThemeProvider themes>`.
|
|
536
|
+
|
|
537
|
+
- 25945dd: The package manifest names an eleventh preset, `graphite`.
|
|
538
|
+
|
|
539
|
+
`@cueplusplus/ui/manifest/manifest.json`'s `themes` now lists `graphite` between `dusk` and `hivehub`, and `manifest/tokens.json` carries its entry — `@cueplusplus/theme-graphite`, both modes, the five base density rungs. That list is what a tool or an agent reads to learn which palettes exist before it suggests one, so anything that reads it now offers `graphite` too.
|
|
540
|
+
|
|
541
|
+
Nothing in the library changed to make room: a theme is still an application's choice, so to use it install `@cueplusplus/theme-graphite` beside `@cueplusplus/theme-base`, import its `theme.css` after `@cueplusplus/ui/styles.css`, and hand its manifest to `<ThemeProvider themes>`.
|
|
542
|
+
|
|
543
|
+
### Patch Changes
|
|
544
|
+
|
|
545
|
+
- a6afdd2: **`Band`'s `separation` table names every shipped style set** (`@cueplusplus/ui`, documentation only). Under `kiln`, `separation="ground"` paints the recessed `--cue-sunken` ground and `separation="rule"` draws nothing, because the set's `--cue-band-rule` is now `0px`; `Footer` keeps its own rule there through `--cue-style-footer-rule`. `tender`, `zine` and `porcelain` draw the 1px rule and paint no ground, as `console` does. No class changes: the table is what the token layer already emits, and `band.test.tsx` now holds all nine rows (`:root` and the eight sets) to it.
|
|
546
|
+
- 8970b22: A returning visitor's stored theme paints the first frame, nested providers follow the page's theme,
|
|
547
|
+
rung and mode live, and a `Preview` stage's font pairing reaches its overlays.
|
|
548
|
+
|
|
549
|
+
- **The root provider no longer restates its props on its own element before it has restored the
|
|
550
|
+
visitor's preferences.** `prepaintScript()` stamps the stored theme, rung, mode, style set and
|
|
551
|
+
pack on `<html>` before first paint, but the root `ThemeProvider` rendered its element — which
|
|
552
|
+
wraps every node of content — with `data-theme`, `data-density` and `data-mode` (and `data-style`
|
|
553
|
+
/ `data-paint` when named) taken from its props, plus the props' `color-scheme`. That shadowed the
|
|
554
|
+
pre-paint stamp for the whole page until hydration caught up, so everyone whose stored theme was
|
|
555
|
+
not the default saw one frame of the default. It was invisible while the default theme looked
|
|
556
|
+
like bare `:root`, and a full-page flash under any other. A root that persists (the default) now
|
|
557
|
+
renders `data-cue-root` and no axis attribute in its server markup and first client render, and
|
|
558
|
+
stamps what it restored — the same values as `<html>` — once the restore lands, before the first
|
|
559
|
+
paint. If you read `data-theme` off the provider's element before hydration, read it off `<html>`
|
|
560
|
+
instead. A root with `persistPreferences={false}` stamps its props from the first render, as
|
|
561
|
+
before.
|
|
562
|
+
- **A `Preview` stage's font pairing reaches what opens on it.** `<Preview font="plex">` stamped
|
|
563
|
+
`data-font` on its stage and told nothing else, so a select, menu or popover opened on the stage
|
|
564
|
+
came up in the page's pairing, and `useTheme().font` read on the stage reported the page's. The
|
|
565
|
+
stage now republishes its pairing the way it already republished its theme, mode, density, style
|
|
566
|
+
set and pack. A stage that names a pairing also takes `font-sans`, so its text with no font class
|
|
567
|
+
of its own follows the stage's pairing instead of keeping the family it inherited. A stage that
|
|
568
|
+
names no pairing renders exactly as before.
|
|
569
|
+
- **A nested `ThemeProvider` that names no theme, density or mode now follows the page's live.** It
|
|
570
|
+
used to copy the ambient theme once when it mounted, open on its theme's preferred density rather
|
|
571
|
+
than the page's, and open `dark` whatever the page was — and stamp all three on its own element
|
|
572
|
+
for good. So a theme, density or mode the root restored from storage after the page loaded, or a
|
|
573
|
+
picker changed later, stopped at every nested provider. Now such a provider stamps none of the
|
|
574
|
+
three: its region inherits the page's, and `useTheme()` inside it and the overlays it opens report
|
|
575
|
+
the page's, as they change. A nested provider that names a theme or a mode keeps it and stamps it
|
|
576
|
+
together with the density and mode (or theme) it follows, since a theme's light palette and its
|
|
577
|
+
density rules need them on one element; one that names only a density stamps it the way a
|
|
578
|
+
`<Density>` island does. If you relied on a nested provider with no `density` opening on its
|
|
579
|
+
theme's preferred rung, or with no `mode` opening `dark`, pass the prop.
|
|
580
|
+
|
|
581
|
+
- 69b6cbb: Three font pairings, four style sets and three new paint packs — the tokens for the four
|
|
582
|
+
remaining Looks (spec 2026-09-26 §8) — plus `grain` retuned to its own measurement.
|
|
583
|
+
|
|
584
|
+
Font pairings (`FONTS` now names twelve):
|
|
585
|
+
|
|
586
|
+
- `inter-source` — Inter over Source Code Pro, stripe.com's own recommendation once Söhne
|
|
587
|
+
is refused (Klim Type Foundry, licensee-only). Both faces are already delivered by every
|
|
588
|
+
app that ships `inter` or `source`.
|
|
589
|
+
- `dm` — DM Sans over Space Mono, with Anybody as the display face. The first pairing whose
|
|
590
|
+
`font-display` does not restate `font-sans`: reachable only because a style set can now
|
|
591
|
+
route `--cue-style-display-face` to `var(--cue-font-display)` (R-13).
|
|
592
|
+
- `calsans` — Cal Sans over Paper Mono, both self-hosted through `next/font/local` rather
|
|
593
|
+
than `next/font/google` (R-15), since Google Fonts serves neither in the cut this pairing
|
|
594
|
+
needs.
|
|
595
|
+
|
|
596
|
+
Style sets (`STYLE_SETS` now names eight): `tender` (stripe.com), `zine` (greptile.com),
|
|
597
|
+
`kiln` (replit.com) and `porcelain` (coss.com/ui). Each declares the full twelve-name
|
|
598
|
+
contract, including the three names every set has carried since `graphite` —
|
|
599
|
+
`style-control-face`, `style-display-face`, `style-seam-color`.
|
|
600
|
+
|
|
601
|
+
Paint packs (`PAINTS` now names ten): `plume` (stripe.com, a soft low-alpha bloom), `matte`
|
|
602
|
+
(replit.com, a flat shadow off the theme's own data-ground with the glass blur turned off)
|
|
603
|
+
and `glaze` (coss.com/ui, a light shadow ladder with a soft accent glow). Each declares all
|
|
604
|
+
thirty-one names. `grain` is retuned to its own measurement against greptile.com: its texture
|
|
605
|
+
now carries `stitchTiles='stitch'` (without it the tile seams every 200px, which the live
|
|
606
|
+
site never does), its screen moves from a 14px soft dot to the site's own 24px hard dot at
|
|
607
|
+
fg 15%, and its glass turns opaque to match the site's flat, unblurred header.
|
|
608
|
+
|
|
609
|
+
`@cueplusplus/theme-base`'s manifest schema recognises all three new pairings as base
|
|
610
|
+
pairings a theme package can override, the same as every pairing before them.
|
|
611
|
+
|
|
612
|
+
`@cueplusplus/ui`: the built-in paint devices now also cover a console shell's page ground,
|
|
613
|
+
not only `<Band separation="ground">` — `AppShell.Root` carries the same texture overlay
|
|
614
|
+
`Band` does (R-14), so a pack with a texture (today, only `grain`) reaches the whole page.
|
|
615
|
+
Every pack whose texture is `none` renders this as a no-op. The package manifest also picks
|
|
616
|
+
up the new pairings, sets and packs in its generated type unions and docs; nothing else in
|
|
617
|
+
the library's runtime code changes.
|
|
618
|
+
|
|
619
|
+
`@cueplusplus/studio-mcp` carries a comment fix only: `@repo/studio-core`'s catalogue
|
|
620
|
+
docblock named "nine fonts" among the closed lists it republishes, and that count is now
|
|
621
|
+
twelve. Nothing about the catalogue's shape or values moves.
|
|
622
|
+
|
|
623
|
+
- 2d8eff5: A ninth font pairing, `geist-mono`, and `bevel` now matches the site it is measured from.
|
|
624
|
+
|
|
625
|
+
`geist-mono` pairs Geist with Geist Mono — the first pairing here that holds its sans and its
|
|
626
|
+
mono to one type family. Every pairing before it reaches for a different family on its
|
|
627
|
+
monospace half, `geist` itself included (Geist over JetBrains Mono); this is the pairing that
|
|
628
|
+
matches agent-native.com, whose buttons, labels and kbd are set entirely in Geist Mono.
|
|
629
|
+
`data-font="geist-mono"` resolves to nothing until your app delivers `--cue-face-geist-mono`,
|
|
630
|
+
the same way it delivers any other webfont pairing's faces — see
|
|
631
|
+
`FONT_PAIRINGS["geist-mono"].faces`.
|
|
632
|
+
|
|
633
|
+
`bevel`'s stroke and glass are retuned against a proper measurement of the site, in both
|
|
634
|
+
modes, rather than the dark-mode-only pass they shipped with:
|
|
635
|
+
|
|
636
|
+
- `stroke-angle` is `140deg`, not `180`.
|
|
637
|
+
- `stroke-from` is `var(--cue-border-strong)` — an exact share of the theme's own
|
|
638
|
+
border-strong in both modes, where the fg-tint it replaces missed light mode by a wide
|
|
639
|
+
margin.
|
|
640
|
+
- `stroke-to` is `color-mix(in oklch, var(--cue-fg-subtle) 19%, transparent)`, closer to the
|
|
641
|
+
measured endpoint than the formula it replaces in both modes at once.
|
|
642
|
+
- `glass-ink` is the page background at 90% under `blur(12px)`, not a raised surface at 88%
|
|
643
|
+
under `blur(10px)` — the site's own header sits over the page, not over a card.
|
|
644
|
+
|
|
645
|
+
Nothing else about the pack moves. It still declares all thirty-one paint names, and
|
|
646
|
+
`packages/tokens/test/paint.test.mjs` still holds it to that contract.
|
|
647
|
+
|
|
648
|
+
`@cueplusplus/theme-base`'s manifest schema now recognises `geist-mono` as a base pairing
|
|
649
|
+
too, so a theme package can write `fontPairings.overrides["geist-mono"]` the way it already
|
|
650
|
+
can for every other base pairing; `adds` refuses the name, the same as it refuses `geist`.
|
|
651
|
+
|
|
652
|
+
`@cueplusplus/ui`'s manifest picks up the new pairing's type union and the retuned pack's
|
|
653
|
+
values in its generated docs; nothing in the library's own runtime code changes.
|
|
654
|
+
|
|
655
|
+
`@cueplusplus/studio-mcp` carries a comment fix only: `@repo/studio-core`'s catalogue
|
|
656
|
+
docblock named "eight fonts" among the closed lists it republishes, and that count is now
|
|
657
|
+
nine too. Nothing about the catalogue's shape or values moves.
|
|
658
|
+
|
|
659
|
+
- 8e23076: A theme island under a style set or a paint pack now paints its own borders, inks and band ground,
|
|
660
|
+
not the page's.
|
|
661
|
+
|
|
662
|
+
A pack's and a set's values read other axes — `bevel`'s stroke is the theme's border, every pack's
|
|
663
|
+
shade and rim inks are mixes of the theme's foreground, `marketing`'s band rule and ground are the
|
|
664
|
+
theme's border and surface — and CSS resolves a custom property where it is declared. With the set
|
|
665
|
+
or pack stamped only on the page, a region below it in another theme inherited values already
|
|
666
|
+
resolved against the page's theme: a `dusk` region inside a `cue` page under `bevel` drew `cue`'s
|
|
667
|
+
borders, and a light region inside a dark page kept the dark ones.
|
|
668
|
+
|
|
669
|
+
- **A nested `ThemeProvider` that names a `theme` or a `mode` now restates the style set and pack in
|
|
670
|
+
force** as `data-style` and `data-paint` on its own element, so they re-resolve against its theme.
|
|
671
|
+
It is still the page's set and pack, followed live: a picker that changes the page's pack moves
|
|
672
|
+
the region's with it, and `useTheme()`, storage and `<html>` are untouched. A nested provider that
|
|
673
|
+
names its own `styleSet` or `paint` keeps it, as before; one that names nothing, or only a
|
|
674
|
+
`density`, still stamps nothing.
|
|
675
|
+
- **A `Preview` stage with a `theme`, a `mode` or a `font` restates them the same way**, so a
|
|
676
|
+
specimen on a `dusk` stage draws `dusk`'s strokes under a `bevel` page. A stage that names only a
|
|
677
|
+
`density`, or nothing, is unchanged, and so is one that names its own `styleSet` or `paint`.
|
|
678
|
+
- Overlays were never affected: a portal already stamps every axis on its own container.
|
|
679
|
+
|
|
680
|
+
Under a root that persists, these islands restate nothing in their server markup or on their first
|
|
681
|
+
client render, so they inherit the visitor's stored set and pack from `<html>` rather than repeating
|
|
682
|
+
the app's defaults over them; each restates once it has mounted, before the first paint. The root's
|
|
683
|
+
restore itself changes nothing an island reads, so a streamed Suspense boundary full of stages
|
|
684
|
+
still hydrates in place instead of being rendered again on the client.
|
|
685
|
+
|
|
686
|
+
If you stamp `data-theme` on an element by hand inside a styled or painted page, restate
|
|
687
|
+
`data-style` and `data-paint` beside it yourself, or use a nested `ThemeProvider`, which does it for
|
|
688
|
+
you. `<Density>` still restates a set only when you pass `styleSet`: a rung changes no ink.
|
|
689
|
+
`@cueplusplus/tokens` emits the same stylesheet as before; the note in its build that described this
|
|
690
|
+
trade as yours to carry now says the library carries it for its own islands.
|
|
691
|
+
|
|
692
|
+
- 9275ffc: `FieldLabel`, `Eyebrow`, a table head, `Stat` labels, group and section headings and a dozen
|
|
693
|
+
more chassis captions take their face, case and tracking from the style set; the shared
|
|
694
|
+
recessed control chassis — every text field, textarea, number field, combobox and the rest of
|
|
695
|
+
what a person types into — takes its face from it too.
|
|
696
|
+
|
|
697
|
+
Twenty-five sites read the new `--cue-style-label-face` and `--cue-style-label-case`, falling
|
|
698
|
+
back to `font-mono` and `uppercase` — what they have always worn — so nothing changes under no
|
|
699
|
+
style set or under `console`, `editorial`, `marketing`, `graphite` or `zine`. Under `tender`,
|
|
700
|
+
`kiln` or `porcelain` they read sans and sentence case instead, matching the sites those Looks
|
|
701
|
+
are measured from. `--cue-style-label-tracking` follows the same rule but is optional: `FieldLabel`
|
|
702
|
+
falls back to its own tighter tracking, `Eyebrow` to its own wider one, and the rest to the plain
|
|
703
|
+
rung — each exactly what it rendered before — and only the three sans sets declare one shared
|
|
704
|
+
value, converging every label onto it. `forms/_chassis.ts`'s shared input chassis reads
|
|
705
|
+
`--cue-style-input-face`, falling back to `font-mono`, so the same set of Looks reads sans for
|
|
706
|
+
typed text too.
|
|
707
|
+
|
|
708
|
+
Two calls that already forced their own face are unchanged on purpose: `color-picker.tsx`'s hex
|
|
709
|
+
field keeps `font-mono` regardless of the set (a hex code is content, not voice), and
|
|
710
|
+
`primitives/avatar.tsx`, `primitives/chip.tsx` and `chat/agent-pile.tsx`'s avatar initials keep
|
|
711
|
+
`font-mono uppercase` too — a rendered initial or a tag's text is the value being shown, not a
|
|
712
|
+
chassis caption.
|
|
713
|
+
|
|
714
|
+
Inside a stamped style set, the four are resolved where the set is stamped, exactly as
|
|
715
|
+
`--cue-style-control-face` already is — an island in another theme, pairing or font has to
|
|
716
|
+
restate the set to get its own, and the library's islands do that for you.
|
|
717
|
+
|
|
718
|
+
**The rest of the chrome now reads `--cue-style-control-face` too**, the existing name #205
|
|
719
|
+
gave `Button`, `IconButton` and the `Tabs` trigger: a menu row, a select/combobox/autocomplete
|
|
720
|
+
option, a tooltip's popup, a checkbox/switch/radio's option text, a segmented control and toggle
|
|
721
|
+
item, the command palette's input and its rows, a breadcrumb link, `Link` and a nav-menu trigger
|
|
722
|
+
and link all fall back to `font-mono` — again, what every one of them has always worn — so under
|
|
723
|
+
no style set or under a mono-voiced one they are unchanged, and under `tender`, `kiln` or
|
|
724
|
+
`porcelain` they read sans like the buttons beside them. No new contract name: none of these
|
|
725
|
+
sites was uppercase-tracked, so none needed the label axis. Left mono on purpose: a value chip's
|
|
726
|
+
user-typed content (`forms/_listbox.ts`'s `valueChipClasses`) and the general-purpose `Item`
|
|
727
|
+
media-object row — both hold arbitrary caller content, the same category as a table cell.
|
|
728
|
+
|
|
729
|
+
`Preview`, `Density` and `ThemeProvider` already accept `styleSet="tender" | "kiln" | "porcelain"`.
|
|
730
|
+
|
|
731
|
+
- 07d8524: `PageShell`'s title no longer collapses to one word per line beside a wide `actions` slot.
|
|
732
|
+
|
|
733
|
+
The header row laid the title block (`min-w-0`) and the actions slot (`shrink-0`) out with
|
|
734
|
+
`flex` and no wrap, so an actions slot wider than the remaining row — the docs site's component
|
|
735
|
+
pages pass a peer-dependency chip row plus the markdown twin, copy button and two agent
|
|
736
|
+
hand-off buttons, together nearly 940px — squeezed the title down to whatever width was left,
|
|
737
|
+
sometimes under 30px, wrapping every word onto its own line. The header now wraps
|
|
738
|
+
(`flex-wrap`), the title block keeps a floor of `min-w-[min(100%,20rem)]` so it is never
|
|
739
|
+
squeezed below a readable width (or below its container's full width, on a narrower page), and
|
|
740
|
+
the actions slot trades its fixed `shrink-0` for `min-w-0` so it can shrink and wrap its own
|
|
741
|
+
children instead of forcing the title to give way. On a row with room for both, nothing
|
|
742
|
+
changes; when there is not enough room, the actions slot now drops to its own line under the
|
|
743
|
+
title and wraps there.
|
|
744
|
+
|
|
745
|
+
- 36dfdd0: A paint pack is called a paint pack now, not a "look pack".
|
|
746
|
+
|
|
747
|
+
A **Look** is now a named bundle — one theme, font pairing, style set and paint pack chosen
|
|
748
|
+
together — so the finish axis's values stopped borrowing the word. The prose moved and nothing
|
|
749
|
+
else did:
|
|
750
|
+
|
|
751
|
+
- **`@cueplusplus/tokens`:** every pack's `$description`, and the docblocks the build writes over
|
|
752
|
+
`PAINTS` and `PAINT_CONTRACT` in `tokens.js` and `tokens.d.ts`.
|
|
753
|
+
- **`@cueplusplus/ui`:** the JSDoc on the `paint` props of `ThemeProvider`, `Density` and `Preview`,
|
|
754
|
+
on `useTheme().paint` and `setPaint`, on `prepaintScript()`'s paint options and on `isPaint`, and
|
|
755
|
+
the component manifest generated from it.
|
|
756
|
+
|
|
757
|
+
`halo`'s and `hatch`'s descriptions stop counting the presets they read under: both packs'
|
|
758
|
+
inks are shares of the theme's own colours, so they read under every preset, not "all ten".
|
|
759
|
+
|
|
760
|
+
No identifier changes: `PAINTS`, `DEFAULT_PAINT`, `PAINT_CONTRACT`, the `Paint` type, the
|
|
761
|
+
`data-paint` attribute and every file name are exactly as they were.
|
|
762
|
+
|
|
763
|
+
- 080462c: A pack named on `ThemeProvider` now reaches the overlays it opens, and `setPaint` repaints the whole page.
|
|
764
|
+
|
|
765
|
+
Two things were wrong with the paint axis as 0.16.0 shipped it, and both showed in the surfaces a
|
|
766
|
+
pack moves most:
|
|
767
|
+
|
|
768
|
+
- **Overlays opened under a provider's pack carried none.** `<ThemeProvider paint="halo">` stamped
|
|
769
|
+
its own element and `<html>`, but a popover, menu, dialog or tooltip opened inside it got no
|
|
770
|
+
`data-paint` on its portal container. At the root nobody noticed, because an overlay mounted on
|
|
771
|
+
`<body>` inherits `<html data-paint>`. Under a nested provider — `<ThemeProvider paint="lift">`
|
|
772
|
+
around one region of a page — nothing covered for it, and that region's overlays opened in the
|
|
773
|
+
page's finish rather than the region's. A nested provider that names no pack also reported none
|
|
774
|
+
from `useTheme().paint` under a painted one; it now reports the pack in force, as `styleSet`
|
|
775
|
+
always has.
|
|
776
|
+
- **A nested provider that names no pack or style set now follows the outer one live.** It used to
|
|
777
|
+
copy the outer value once, when it mounted, and stamp that copy on its own element — so a pack or
|
|
778
|
+
set restored from storage after the page loaded, or changed later at the root, stopped at every
|
|
779
|
+
nested provider, which kept whatever the root held on its first render. The style set has had this
|
|
780
|
+
since it shipped. Now it stamps neither, and its region, `useTheme()` inside it and its overlays
|
|
781
|
+
all follow the outer value; a nested provider that names a pack or set keeps it, as before.
|
|
782
|
+
- **`setPaint` on its own left `<html>` behind.** It moved the provider's element and not the
|
|
783
|
+
document's, so the page ground and every overlay — a paint picker's own dropdown included — kept
|
|
784
|
+
the previous pack until some other setting changed. The whole page repaints at once now.
|
|
785
|
+
|
|
786
|
+
**`PAINTS`, `DEFAULT_PAINT` and the `Paint` type are exported from `@cueplusplus/ui/system`** and
|
|
787
|
+
the package root, beside `STYLE_SETS`. Five public signatures already named `Paint`, but the type
|
|
788
|
+
lived only in `@cueplusplus/tokens`, which pnpm does not let an app import unless the app installed
|
|
789
|
+
it too. You can now type a pack, and list the packs to build a picker, with no second dependency.
|
|
790
|
+
|
|
791
|
+
Nothing changes for an app that never names a pack: no `data-paint` is stamped anywhere, and the
|
|
792
|
+
stored preference is the same object it always was.
|
|
793
|
+
|
|
794
|
+
- 36dfdd0: Documentation that counted the presets stopped counting what no longer holds.
|
|
795
|
+
|
|
796
|
+
- **Every theme package's README** counted the presets beside it when it pointed at the theming
|
|
797
|
+
guide — "the other nine presets", "the other ten", or in `theme-base` and `theme-tools` "the ten
|
|
798
|
+
shipped presets" — and `theme-tools` opened by saying "the ten presets in this repository are
|
|
799
|
+
built by it too". Fifteen ship now, and the next one would make any count wrong again, so each
|
|
800
|
+
line reads "the other presets" (or "the shipped presets", or "the presets") — the wording the
|
|
801
|
+
newest presets already use.
|
|
802
|
+
- **`CueMark`, and its `BrandTone`,** said a single element "is correct in all ten presets"; it is
|
|
803
|
+
correct in every preset, and the docs and the component manifest now say so.
|
|
804
|
+
|
|
805
|
+
- **`theme-tools`' CSS emitter** said "all ten presets are `complete`" in the docblock on its
|
|
806
|
+
light-block rule; every preset here is `complete`, and it now says so without a count.
|
|
807
|
+
|
|
808
|
+
Nothing else changed: no token, no value, no export.
|
|
809
|
+
|
|
810
|
+
- 002f95a: Restoring a visitor's stored theme, pairing, style set or pack no longer throws away streamed
|
|
811
|
+
content that is still hydrating.
|
|
812
|
+
|
|
813
|
+
A `ThemeProvider` that persists renders its props on the server, then restores the visitor's stored
|
|
814
|
+
choice in its first commit. On a streamed page some Suspense boundaries are still server HTML at that
|
|
815
|
+
moment — waiting on a lazily loaded module, still streaming, or streamed and queued for React's
|
|
816
|
+
batched reveal — and React treats a boundary under a changed context as changed, whatever it reads.
|
|
817
|
+
One it cannot hydrate right then it renders again on the client, fallback first, and discards the
|
|
818
|
+
server HTML that arrives for it later; for a boundary still streaming or queued it does this on every
|
|
819
|
+
lane, so making the restore a transition does not help. Whenever the stored choice differed from the
|
|
820
|
+
page's default, that was a blank-and-redraw on every load.
|
|
821
|
+
|
|
822
|
+
The restore now moves no context value. Each provider still hands its values down through context,
|
|
823
|
+
and a setter or a changed prop moves them exactly as before — readers re-render in the same commit,
|
|
824
|
+
and a change made in a transition stays one. What the restore corrects is posted beside the context
|
|
825
|
+
instead: every reader inside the library picks it up by itself, hydrating first against what the
|
|
826
|
+
server rendered, and no boundary is told that anything changed. The same holds for the colour scheme
|
|
827
|
+
`mode="system"` reads from the OS.
|
|
828
|
+
|
|
829
|
+
`useTheme().font` now hydrates against the pairing the server rendered and catches up with the
|
|
830
|
+
restore, like every other axis: a component that rendered it into markup used to hydrate against HTML
|
|
831
|
+
naming the default, and React regenerated its whole boundary for the mismatch. Portal containers and
|
|
832
|
+
`<html>` still carry the stored pairing from the first commit, so no overlay makes the browser fetch
|
|
833
|
+
the default's webfont. A boundary that hydrates after a setter has run hydrates against what the
|
|
834
|
+
server rendered too, not against the setter's value.
|
|
835
|
+
|
|
836
|
+
A context now moves only when its own value does. A setter handed the value already in force does
|
|
837
|
+
nothing — no re-render and no write to storage — so an effect that re-asserts a preference on every
|
|
838
|
+
render stays one render. `setPaint` no longer re-renders a component that only lists the rungs on
|
|
839
|
+
offer. And a `themes` array built inline, equal to the last one, is treated as the same registry: a
|
|
840
|
+
parent re-rendering the provider while the page hydrates moves nothing. `useThemes()`,
|
|
841
|
+
`useDensities()` and `useFonts()` sit out a restore unless their own list changed.
|
|
842
|
+
|
|
843
|
+
- a6afdd2: A modal's scrim no longer fades by its own `opacity`. An element under opacity 1 is a backdrop root, so while the scrim faded in, the paint pack's `--cue-paint-scrim-filter` on its `::before` had nothing to blur: under `glaze` (`blur(8px)`) the page stayed sharp for the whole 150ms fade, snapped to the blur when it ended, and lost it on the first frame of the exit. `scrimClasses` — behind `Dialog`, `AlertDialog`, `Sheet`, `Drawer` and `CommandPalette` — now keeps the scrim at opacity 1 and fades its parts over the same 150ms: its background from `transparent`, the `::before` by its own opacity, and its own `backdrop-filter` from `none` on the entering and leaving frames, so a `backdropClassName="backdrop-blur-*"` still fades in rather than snapping. Under every other pack, and with no pack, the scrim renders as it did.
|
|
844
|
+
- c1f6b7c: `Button`, `IconButton` and the `Tabs` trigger take their face from the style set, and seam
|
|
845
|
+
grids take their hairline colour from it.
|
|
846
|
+
|
|
847
|
+
The three controls read `--cue-style-control-face`, falling back to `--cue-font-mono` — the
|
|
848
|
+
face they have always worn — so nothing changes under no style set or under any set that
|
|
849
|
+
ships today. `SeamGrid`, `SeamList` and `<Card seam>` read `--cue-style-seam-color` for the
|
|
850
|
+
gaps between their cells, and for their rim when they draw one, falling back to
|
|
851
|
+
`--cue-border`; under the new `graphite` set the seams draw lighter than the rules between
|
|
852
|
+
bands. A bordered seam container now clips its background to the padding box, which paints
|
|
853
|
+
nothing different under an opaque ink and keeps a translucent one from doubling under the
|
|
854
|
+
rim.
|
|
855
|
+
|
|
856
|
+
Inside a stamped style set, the face and the seam ink are resolved where the set is stamped,
|
|
857
|
+
so an island in another theme or pairing has to restate the set to get its own. The library's
|
|
858
|
+
islands do that for you: a nested `ThemeProvider` that names a `theme` or `mode`, and a
|
|
859
|
+
`Preview` stage that names a `theme`, `mode` or `font`, restate the set in force beside it, so a
|
|
860
|
+
`dusk` region under a `graphite` page draws `dusk`'s seams and a `plex` stage's buttons wear
|
|
861
|
+
Plex Mono. Only an element you stamp `data-theme` or `data-font` on by hand has to restate
|
|
862
|
+
`data-style` itself.
|
|
863
|
+
|
|
864
|
+
`Preview`, `Density` and `ThemeProvider` accept `styleSet="graphite"`.
|
|
865
|
+
|
|
866
|
+
- Updated dependencies [a6afdd2]
|
|
867
|
+
- Updated dependencies [a6afdd2]
|
|
868
|
+
- Updated dependencies [a6afdd2]
|
|
869
|
+
- Updated dependencies [a6afdd2]
|
|
870
|
+
- Updated dependencies [a6afdd2]
|
|
871
|
+
- Updated dependencies [a6afdd2]
|
|
872
|
+
- Updated dependencies [d205951]
|
|
873
|
+
- Updated dependencies [68e485b]
|
|
874
|
+
- Updated dependencies [af8b102]
|
|
875
|
+
- Updated dependencies [68e485b]
|
|
876
|
+
- Updated dependencies [e56ebf3]
|
|
877
|
+
- Updated dependencies [e56ebf3]
|
|
878
|
+
- Updated dependencies [e56ebf3]
|
|
879
|
+
- Updated dependencies [e56ebf3]
|
|
880
|
+
- Updated dependencies [e56ebf3]
|
|
881
|
+
- Updated dependencies [68e485b]
|
|
882
|
+
- Updated dependencies [68e485b]
|
|
883
|
+
- Updated dependencies [69b6cbb]
|
|
884
|
+
- Updated dependencies [2d8eff5]
|
|
885
|
+
- Updated dependencies [c1f6b7c]
|
|
886
|
+
- Updated dependencies [f2c514d]
|
|
887
|
+
- Updated dependencies [8e23076]
|
|
888
|
+
- Updated dependencies [9275ffc]
|
|
889
|
+
- Updated dependencies [36dfdd0]
|
|
890
|
+
- Updated dependencies [36dfdd0]
|
|
891
|
+
- Updated dependencies [e56ebf3]
|
|
892
|
+
- Updated dependencies [68e485b]
|
|
893
|
+
- Updated dependencies [3d481fc]
|
|
894
|
+
- Updated dependencies [3d481fc]
|
|
895
|
+
- Updated dependencies [3d481fc]
|
|
896
|
+
- Updated dependencies [3d481fc]
|
|
897
|
+
- Updated dependencies [3d481fc]
|
|
898
|
+
- Updated dependencies [3d481fc]
|
|
899
|
+
- Updated dependencies [3d481fc]
|
|
900
|
+
- Updated dependencies [3d481fc]
|
|
901
|
+
- @cueplusplus/tokens@0.17.0
|
|
902
|
+
- @cueplusplus/theme-base@1.1.0
|
|
903
|
+
|
|
3
904
|
## 0.16.0
|
|
4
905
|
|
|
5
906
|
### Minor Changes
|