heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: move reaction chips and url-preview links onto the Dawn surface and accent palette

Browse source
This commit is contained in:
heaven 2026-06-03 12:01:08 +03:00
parent 06afe034c5
commit 5f2bac7ad6
3 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app/components/message/Reaction.css.ts
View file

@ -11,16 +11,21 @@ export const Reaction = style([
FocusOutline,
{
vars: {
[Container]: color.SurfaceVariant.Container,
[ContainerHover]: color.SurfaceVariant.ContainerHover,
[ContainerActive]: color.SurfaceVariant.ContainerActive,
// Resting chip sits on the raised surface tone (#21232b) so it reads
// distinct from the peer bubble (~#181a20) instead of blending in; hover/
// active step one tone lighter. The aria-pressed selector below swaps the
// whole set to the Primary (Fleet-violet) palette.
[Container]: color.SurfaceVariant.ContainerActive,
[ContainerHover]: color.SurfaceVariant.ContainerLine,
[ContainerActive]: color.SurfaceVariant.ContainerLine,
[ContainerLine]: color.SurfaceVariant.ContainerLine,
[OnContainer]: color.SurfaceVariant.OnContainer,
},
padding: `${toRem(2)} ${config.space.S200} ${toRem(2)} ${config.space.S100}`,
backgroundColor: Container,
border: `${config.borderWidth.B300} solid ${ContainerLine}`,
// Pill chip — matches stream-v2-dawn.jsx canon line 100 (`borderRadius: 99`).
// Borderless filled pill (canon stream-v2-dawn.jsx line 100); a transparent
// 1px keeps the aria-selected outline crisp without an outline at rest.
border: `${config.borderWidth.B300} solid transparent`,
borderRadius: toRem(9999),
selectors: {

2
src/app/components/message/Reaction.tsx
View file

@ -38,7 +38,7 @@ export const Reaction = as<
</Text>
)}
</Text>
<Text as="span" size="T300">
<Text as="span" size="T300" style={{ fontVariantNumeric: 'tabular-nums' }}>
{count}
</Text>
</Box>

4
src/app/components/url-preview/UrlPreviewCard.tsx
View file

@ -16,7 +16,9 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { ImageViewer } from '../image-viewer';
import { onEnterOrSpace } from '../../utils/keyboard';
const linkStyles = { color: color.Success.Main };
// Dawn brand accent for preview links (was stock-Cinny green). Green stays a
// pure status colour; links use the Fleet-violet accent.
const linkStyles = { color: color.Primary.Main };
export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
({ url, ts, ...props }, ref) => {