FlowLight
A fixed brand-colour light laid over a panel.
Installation
pnpm add @talex-touch/tuffex
import { TxFlowLight } from '@talex-touch/tuffex/flow-light'
import '@talex-touch/tuffex/flow-light/style.css'
import '@talex-touch/tuffex/base.css' // Design tokens and reset; import once per app
Usage
Three variants
variant picks corner glows, a rim band or an aurora wash; dark backgrounds get a stronger light.
Loading demo...
On a menu
Anchored panels turn it on through panelCard; a submenu that names none uses the root menu's.
Loading demo...
Intensity
intensity multiplies the theme opacity; 0 turns the light off.
Loading demo...
Custom colours
colors replaces the blue, purple, red and orange stops in order; any not given keep their default.
Loading demo...
Best Practices
- Put it in a positioned, rounded box with
overflow: hidden; it fills the box, inherits the radius and takes no pointer events. - On a panel, prefer the host's
flowLight(TxBaseSurface, TxCard,panelCard): the layer then sits over the veil and under the edge. - Give a menu, its submenus and sibling popovers the same variant; submenus need not repeat it.
- On text-heavy panels use
rimor a lowerintensityso the light stays at the edges.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'corners' | 'rim' | 'aurora' | 'corners' | How the light is drawn: corner glows, a rim band, an aurora wash. |
intensity | number | 1 | Multiplies the theme opacity; below 0 counts as 0. |
colors | readonly string[] | - | Replaces the blue, purple, red and orange stops in order, up to four. |
Turning it on in other components
| Component | Prop | Description |
|---|---|---|
| TxBaseSurface | flowLight / flowLightIntensity | Works with any mode; absent or false is off. |
| TxCard | flowLight / flowLightIntensity | Passed to the card's surface, whatever its background. |
| Popover, DropdownMenu and other anchored panels | panelCard.flowLight / panelCard.flowLightIntensity | Passed to the panel card. |
| TxDropdownSubmenu | panelCard.flowLight / panelCard.flowLightIntensity | When absent, each falls back to the root menu's value; flowLight: false turns it off. |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--tx-flow-light-color-1 … -4 | #0894ff, #c959dd, #ff2e54, #ff9004 | The four stops; colors writes these. |
--tx-flow-light-opacity | Per variant and theme | Overrides the theme opacity: light corners 0.2, rim 0.55, aurora 0.14; dark 0.34, 0.75, 0.26. |
--tx-flow-light-intensity | 1 | Opacity multiplier; intensity writes this. |
- The variables are read where they are used, so they work on the component or any ancestor.
Overview
- One decorative layer filling its box:
aria-hidden, no pointer events, the box's own radius. - The colours are the Tuff brand stops (shared with the composer's live rim) and do not depend on what is behind the panel; refraction's dispersion can only tint with colours already behind it, so over an empty dark page it shows none.
- Under a
[data-theme='dark']or.darkancestor each variant is brighter. - Hidden under high contrast (
html[data-tx-contrast='high'],html.contrast) so it never lowers text contrast. - Static: no animation, so reduced motion needs no fallback.
Technologies
- Plain CSS:
cornersandauroraare layeredradial-gradients (auroraadds a 14px blur);rimis one horizontal gradient, shaped by a verticalmask-imageinto a 1px rim and a glow over the top third. - In TxBaseSurface it renders as
.tx-base-surface__layer--flow-light:z-index: 3like the veil and after it in the DOM, under the edge (4) and the content (5). - Source:
packages/tuffex/packages/components/src/flow-light/.
查看源码
packages/tuffex/packages/components/src/flow-light/index.ts
Related components
- BaseSurface: the material layer that carries the light.
- Card: the floating panels' card;
flowLightreaches it. - DropdownMenu: submenus take the root menu's flow light.
- BorderBeam: a light that travels along the border; FlowLight is a fixed light on the panel's face.