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, FocusOutline,
{ {
vars: { vars: {
[Container]: color.SurfaceVariant.Container, // Resting chip sits on the raised surface tone (#21232b) so it reads
[ContainerHover]: color.SurfaceVariant.ContainerHover, // distinct from the peer bubble (~#181a20) instead of blending in; hover/
[ContainerActive]: color.SurfaceVariant.ContainerActive, // 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, [ContainerLine]: color.SurfaceVariant.ContainerLine,
[OnContainer]: color.SurfaceVariant.OnContainer, [OnContainer]: color.SurfaceVariant.OnContainer,
}, },
padding: `${toRem(2)} ${config.space.S200} ${toRem(2)} ${config.space.S100}`, padding: `${toRem(2)} ${config.space.S200} ${toRem(2)} ${config.space.S100}`,
backgroundColor: Container, backgroundColor: Container,
border: `${config.borderWidth.B300} solid ${ContainerLine}`, // Borderless filled pill (canon stream-v2-dawn.jsx line 100); a transparent
// Pill chip — matches stream-v2-dawn.jsx canon line 100 (`borderRadius: 99`). // 1px keeps the aria-selected outline crisp without an outline at rest.
border: `${config.borderWidth.B300} solid transparent`,
borderRadius: toRem(9999), borderRadius: toRem(9999),
selectors: { selectors: {

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

@ -38,7 +38,7 @@ export const Reaction = as<
</Text> </Text>
)} )}
</Text> </Text>
<Text as="span" size="T300"> <Text as="span" size="T300" style={{ fontVariantNumeric: 'tabular-nums' }}>
{count} {count}
</Text> </Text>
</Box> </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 { ImageViewer } from '../image-viewer';
import { onEnterOrSpace } from '../../utils/keyboard'; 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 }>( export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
({ url, ts, ...props }, ref) => { ({ url, ts, ...props }, ref) => {