Repository navigation
feat(tuffex): lay overlays and CoreBox on refraction and align docs with components - #2120
Open
TalexDreamSoul wants to merge 12 commits into
Open
TalexDreamSoul wants to merge 12 commits into
TalexDreamSoul wants to merge 12 commits into
Conversation
…dows A transparent Electron window shows the desktop through its own system material (vibrancy on macOS, Mica on Windows), which lies under the page where no backdrop-filter can reach it. A filter there samples only the surface's own veil and lays that copy back over it, so a 75% veil turns nearly opaque and the desktop stops showing through. With systemBackdrop the surface runs no backdrop filter: the glass layer is not rendered and the filter layer keeps only its tint, leaving the blur to the system. The veil, mask, flow light and rim draw as before. As the surface no longer samples the page, moving and autoDetect have nothing to guard and are ignored.
Both panels now draw their background with TxBaseSurface (card preset, fake veil) and take the refraction default, with surface, surfaceColor and surfaceOpacity to choose another material. The veil sits at 0.96 under mask and 0.5 otherwise; TxDrawer's panelTransparent thins it to 0.78 and 0.3 instead of adding a blur of its own. An element that fades through opacity, or carries a filter or a backdrop filter, is the backdrop root of every backdrop filter inside it. So the modal's dim and frost move from the overlay to its ::before, and the panel no longer fades as a whole: it scales while its header, body, footer, shadow and each layer of the material fade on their own, and the material samples the page from the first frame to the last. High contrast and materials without a backdrop filter fade whole. Reduced motion keeps the fades and drops the travel, which the modal did not handle before. The drawer counts its panel's transform transitions and holds the surface in its motion fallback while one runs, as a sliding backdrop filter samples where the panel was a frame ago.
The smart-wrapping guide promised text-wrap: pretty for .tx-help-text and for finished streaming text, and the styles had neither. A finished TxStreamText or TxStreamElement paragraph now breaks with text-wrap-style: pretty, while the one still being written keeps auto, so each arriving word does not rerun its line breaking. The longhand leaves a host's nowrap alone.
…aterial CoreBox's backing was a plain div at 75% of the fill colour, outside the refraction default every other surface follows. It is now TxBaseSurface with systemBackdrop: CoreBox is a transparent window whose blur is the system's (vibrancy on macOS, Mica on Windows), and a backdrop filter in it would only re-sample its own veil and turn it opaque over that material. The surface lays the same 75% veil with its tint and rim, and the system blurs.
The home menus, the shell conversation list, the plugin log and runtime cards and the language setup named blur, mask or pure explicitly. They now take the default refraction surface, as surfaces in the app are to unless a material is confirmed for them.
The site's pages and component demos named mask (121 times), glass (34) or pure (4) on cards, select panels and anchors, the admin analytics page alone on 50 cards. They now take the default refraction surface. Demos whose subject is the material keep choosing it: the surface modes, fallback and motion comparisons, the card backgrounds and the anchor surface playground.
Where a concept article described a recommendation or an app excerpt, it now describes what TuffEx ships: type scale points at the style entry's .tx-prose and .tx-inline-code, smart wrapping at .tx-heading, .tx-description and .tx-help-text, and irradiation tuning at the dark theme's 460/560/660 weight tokens, with its demo set at those weights. The surface taxonomy and deduction articles match the eight materials, the power-saving transitions and the components that default to refraction, CoreBox's system backdrop among them. Component pages follow the code: base-surface documents every mode, the environment-sensing API and systemBackdrop, and its demo shows all the modes; modal and drawer document surface, surfaceColor and surfaceOpacity and how their panels move; the anchor family's panelBackground and flip-overlay's surface list every material; and card, foundations, theming, tooltip and the stream pages match what ships.
Manual 02 lists the eight materials and the surfaces that default to refraction, CoreBox's included, and describes the deduction autoDetect actually runs (pointer speed, window drags, frame-budget probes, power saving), the 120Hz drag fallback with its 140ms hysteresis, acrylic alongside blur and glass, and the card's specular light. 03 gives the dark theme's 460/560/660 weight tokens and their static-font guard; 04 the inline code style and text utilities in the style entry and the streaming exception to pretty wrapping. The CoreBox overlay contract describes its refraction surface over the system material.
Contributor
|
Important Review skippedToo many files! This PR contains 163 files, which is 63 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configuration
📒 Files selected for processing: 163
You can disable this status message by setting the
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying tuff with
|
| Latest commit: |
2c9ffa6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://115fd2b3.tuff-dso.pages.dev |
| Branch Preview URL: | https://task-feat-refraction-surface.tuff-dso.pages.dev |
9a8d8d7 added apps/nexus/.nuxt, a worktree's symlink to a local checkout's build directory; `.nuxt/` in .gitignore matches directories only. On CI it dangles, `nuxt prepare` cannot create the directory, and every job that installs dependencies failed in that step.
…s fade Under high contrast a host fades its surface whole, yet the fade it hands the fake backdrop of a glass or filter surface still applied, so the two opacities multiplied: at a frame where the content stood at 0.88, the solid base under it stood at 0.77. The backdrop is solid at full strength there and now takes no animation of its own, which is what TxModal's changelog entry already describes.
TxCommandPalette, TxPopperDialog, TxBlowDialog, TxBottomDialog and TxTouchTip draw their panels with TxBaseSurface, refraction by default, and take TxModal's surface, surfaceColor and surfaceOpacity; the dialogs' set is exported as DialogSurfaceProps. The panels' own blur and solid backgrounds go. Dims and rims move to pseudo-elements, and the panels only move while their parts fade, so no ancestor becomes the material's backdrop root and refraction samples the page through every transition. Reduced motion keeps the fades and drops the travel, and TxTouchTip's close, which had no transition, grows and fades over 220ms. Nexus's GlobalSearch follows the palette onto the material and fades its parts the same way. The dialog and command-palette pages, the material lists in foundations, theming, the surface taxonomy and design manual 02, and the changelog describe the change.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Lays the overlay surfaces on
refraction(琉光), the default material, and makes the concept and component docs describe what the components actually do.TxBaseSurfacegainssystemBackdropfor surfaces over a window's own material (vibrancy, Mica). No layer runs a backdrop filter there: in a transparent window it would sample only the surface's own veil and pile it up until the desktop no longer showed through. The system blurs; the surface paints its colour, light and rim.TxModalandTxDrawerpaint their panels withTxBaseSurface(surface,surfaceColor,surfaceOpacity; defaultrefraction).movingwhile it slides.panelTransparentthins the colour under the material instead of adding an 18px blur.TxCommandPaletteand the dialogsTxPopperDialog,TxBlowDialog,TxBottomDialogandTxTouchTippaint their panels withTxBaseSurfaceas well, with the modal's three props (exported for the dialogs asDialogSurfaceProps).TxTouchTip's close had no transition and vanished after 60ms; it now grows and fades over 220ms.GlobalSearchfollows the palette onto the material and fades its parts the same way.TxStreamText/TxStreamElementtext and.tx-help-textwrappretty; the paragraph still being written staysauto.refractionsurface withsystemBackdropover the window material.mask, 34glass, 4pure). Material comparison demos keep their materials.modevalues, whatautoDetectsenses, the 140ms settle, dark weights 460/560/660 undertx-dark-weight,.tx-inline-code, the text utilities, and the streaming exception to pretty wrapping. The dialog and command-palette pages document the new props and motion, and the material lists in foundations, theming, the surface taxonomy and manual 02 include them.apps/nexus/.nuxt, a worktree symlink committed by mistake in 9a8d8d7. Dangling on CI, it failed the install step of every job in the previous run.PR Type
Quality Checklist
strength, voice-beam organic signals) were timeouts under the full run's load and pass on their own. After the last change: dialog, command palette, modal and base-surface 54/54; the core-app suites that mount these components 102/102.Testing
maskandmask+ high contrast: content opacity 1.000 on every frame, and no backdrop root outside high contrast.GlobalSearch's motion and styles, frame by frame in a browser while entering and closing: panel opacity 1 and no backdrop root on every frame, with the blur layers live mid-fade. Under reduced motion the panels hold still while their parts fade; under high contrast (the attribute andprefers-contrast: more) the surface fades whole with its layers hidden and its backdrop solid. At rest in light and dark.systemBackdropthe desktop does not show through; with it, the surface is as translucent as the old mask.panelTransparent,mask).audit:sizepasses with no budget changes (button 56.2/58, form 84.5/85, admin list 132.2/135, chat 154.8/155 KiB; full CSS 828.2/835 KiB).Not yet verified
admin/analytics.vue: its 50 cards are nowrefraction, andTxCardhas noautoDetect, so they never degrade.GlobalSearchon the running Nexus site: checked through a copy of its motion and styles in a Vite harness.Known, not changed here
TxBlowDialogstill zooms and dims#appwhen it opens (its own inline transition).TxBottomDialogunmounts 150ms into its close, as before, which cuts its fade short.tabindex="-1", which shows a focus ring.TxBaseSurface.