feat(dees-table): add opt-in flash highlighting for updated table cells
This commit is contained in:
@@ -373,6 +373,72 @@ export const tableStyles: CSSResult[] = [
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* ---- Cell flash highlighting (opt-in via highlight-updates="flash") ----
|
||||
Bloomberg/TradingView-style: the text itself briefly takes an accent
|
||||
color then fades back to the default. No background tint, no layout
|
||||
shift, no weight change. Readable, modern, subtle.
|
||||
Consumers can override per instance:
|
||||
dees-table#myTable { --dees-table-flash-color: hsl(142 76% 40%); }
|
||||
*/
|
||||
:host {
|
||||
--dees-table-flash-color: ${cssManager.bdTheme(
|
||||
'hsl(32 95% 44%)',
|
||||
'hsl(45 93% 62%)'
|
||||
)};
|
||||
--dees-table-flash-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
}
|
||||
|
||||
.innerCellContainer.flashing {
|
||||
animation: dees-table-cell-flash
|
||||
var(--dees-table-flash-duration, 900ms)
|
||||
var(--dees-table-flash-easing);
|
||||
}
|
||||
|
||||
/* Hold the accent color briefly, then fade back to the theme's default
|
||||
text color. Inherits to child text and to SVG icons that use
|
||||
currentColor. Cells with explicit color overrides in renderers are
|
||||
intentionally unaffected. */
|
||||
@keyframes dees-table-cell-flash {
|
||||
0%,
|
||||
35% { color: var(--dees-table-flash-color); }
|
||||
100% { color: var(--dees-color-text-primary); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.innerCellContainer.flashing {
|
||||
animation: none;
|
||||
color: var(--dees-table-flash-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dev-time warning banner shown when highlight-updates="flash" but
|
||||
rowKey is missing. Consumers should never ship this to production. */
|
||||
.flashConfigWarning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 8px 16px 0;
|
||||
padding: 8px 12px;
|
||||
border-left: 3px solid ${cssManager.bdTheme('hsl(38 92% 50%)', 'hsl(48 96% 63%)')};
|
||||
background: ${cssManager.bdTheme('hsl(48 96% 89% / 0.6)', 'hsl(48 96% 30% / 0.15)')};
|
||||
color: ${cssManager.bdTheme('hsl(32 81% 29%)', 'hsl(48 96% 80%)')};
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.flashConfigWarning dees-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.flashConfigWarning code {
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.6)', 'hsl(0 0% 0% / 0.3)')};
|
||||
font-family: ${cssGeistFontFamily};
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Editable cell affordances */
|
||||
td.editable {
|
||||
cursor: text;
|
||||
|
||||
Reference in New Issue
Block a user