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

feat(chat): invert canvas/bubble tones and darken timeline rail and media frames

Browse source
This commit is contained in:
heaven 2026-05-11 15:16:53 +03:00
parent ab6c65a4e0
commit 2337b05140
7 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/message/attachment/Attachment.css.ts
View file

@ -14,7 +14,7 @@ export const Attachment = recipe({
variants: { variants: {
outlined: { outlined: {
true: { true: {
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`, boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.Surface.Container}`,
}, },
}, },
}, },

4
src/app/components/message/attachment/StreamMedia.css.ts
View file

@ -26,7 +26,7 @@ export const StreamMediaBubble = recipe({
content: '""', content: '""',
position: 'absolute', position: 'absolute',
inset: 0, inset: 0,
border: `1px solid ${color.SurfaceVariant.ContainerLine}`, border: `1.2px solid ${color.Surface.Container}`,
borderRadius: 'inherit', borderRadius: 'inherit',
pointerEvents: 'none', pointerEvents: 'none',
zIndex: 1, zIndex: 1,
@ -96,7 +96,7 @@ export const StreamMediaCaption = style({
marginTop: toRem(4), marginTop: toRem(4),
backgroundColor: color.SurfaceVariant.Container, backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer, color: color.SurfaceVariant.OnContainer,
border: `1px solid ${color.SurfaceVariant.ContainerLine}`, border: `1px solid ${color.Surface.Container}`,
borderRadius: StreamMediaCornerRound, borderRadius: StreamMediaCornerRound,
paddingLeft: config.space.S300, paddingLeft: config.space.S300,
paddingRight: config.space.S300, paddingRight: config.space.S300,

14
src/app/components/message/layout/layout.css.ts
View file

@ -283,7 +283,7 @@ export const StreamRail = style({
left: '50%', left: '50%',
transform: 'translateX(-50%)', transform: 'translateX(-50%)',
width: StreamRailLineWidth, width: StreamRailLineWidth,
background: color.Surface.ContainerLine, background: color.Surface.Container,
pointerEvents: 'none', pointerEvents: 'none',
zIndex: 0, zIndex: 0,
}); });
@ -325,8 +325,8 @@ export const StreamDotHalo = style({
width: StreamDotSize, width: StreamDotSize,
height: StreamDotSize, height: StreamDotSize,
borderRadius: '50%', borderRadius: '50%',
background: color.Surface.Container, background: color.SurfaceVariant.Container,
boxShadow: `0 0 0 3px ${color.Surface.Container}`, boxShadow: `0 0 0 3px ${color.SurfaceVariant.Container}`,
pointerEvents: 'none', pointerEvents: 'none',
position: 'relative', position: 'relative',
zIndex: 2, zIndex: 2,
@ -413,9 +413,9 @@ export const StreamThreadSummary = style({
export const StreamBubble = recipe({ export const StreamBubble = recipe({
base: { base: {
backgroundColor: color.SurfaceVariant.Container, backgroundColor: color.Surface.Container,
color: color.SurfaceVariant.OnContainer, color: color.SurfaceVariant.OnContainer,
border: `${StreamBubbleBorderWidth} solid ${color.SurfaceVariant.ContainerLine}`, border: `${StreamBubbleBorderWidth} solid ${color.Surface.ContainerLine}`,
paddingTop: config.space.S200, paddingTop: config.space.S200,
paddingBottom: config.space.S200, paddingBottom: config.space.S200,
minWidth: 0, minWidth: 0,
@ -613,7 +613,7 @@ export const StreamDayDot = style({
height: StreamDayDotSize, height: StreamDayDotSize,
borderRadius: '50%', borderRadius: '50%',
background: color.Primary.MainHover, background: color.Primary.MainHover,
boxShadow: `0 0 0 4px ${color.Surface.Container}`, boxShadow: `0 0 0 4px ${color.SurfaceVariant.Container}`,
pointerEvents: 'none', pointerEvents: 'none',
zIndex: 2, zIndex: 2,
}); });
@ -631,7 +631,7 @@ export const StreamDayLineWrap = style({
export const StreamDayLineSegment = style({ export const StreamDayLineSegment = style({
flex: 1, flex: 1,
height: 1, height: 1,
background: color.Surface.ContainerLine, background: color.Surface.Container,
minWidth: toRem(8), minWidth: toRem(8),
}); });

2
src/app/components/url-preview/UrlPreview.css.tsx
View file

@ -8,7 +8,7 @@ export const UrlPreview = style([
minHeight: toRem(102), minHeight: toRem(102),
backgroundColor: color.SurfaceVariant.Container, backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer, color: color.SurfaceVariant.OnContainer,
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`, border: `${config.borderWidth.B300} solid ${color.Surface.Container}`,
borderRadius: config.radii.R300, borderRadius: config.radii.R300,
overflow: 'hidden', overflow: 'hidden',
}, },

4
src/app/features/room/RoomView.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback, useRef } from 'react'; import React, { useCallback, useRef } from 'react';
import { Box, Text, config } from 'folds'; import { Box, Text, color, config } from 'folds';
import { EventType } from 'matrix-js-sdk'; import { EventType } from 'matrix-js-sdk';
import { ReactEditor } from 'slate-react'; import { ReactEditor } from 'slate-react';
import { isKeyHotkey } from 'is-hotkey'; import { isKeyHotkey } from 'is-hotkey';
@ -103,7 +103,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
); );
return ( return (
<Page ref={roomViewRef}> <Page ref={roomViewRef} style={{ backgroundColor: color.SurfaceVariant.Container }}>
<Box grow="Yes" direction="Column"> <Box grow="Yes" direction="Column">
<RoomTimeline <RoomTimeline
key={roomId} key={roomId}

2
src/app/features/room/RoomViewHeaderDm.tsx
View file

@ -632,7 +632,7 @@ export function RoomViewHeaderDm({ callView }: { callView?: boolean }) {
return ( return (
<PageHeader <PageHeader
className={`${ContainerColor({ variant: 'Surface' })} ${css.HeaderShell}`} className={`${ContainerColor({ variant: 'SurfaceVariant' })} ${css.HeaderShell}`}
balance={isMobile} balance={isMobile}
> >
{/* `gap="200"` (= S200 = 8px) keeps the avatar's right side flush with {/* `gap="200"` (= S200 = 8px) keeps the avatar's right side flush with

2
src/app/features/room/RoomViewTyping.css.ts
View file

@ -15,7 +15,7 @@ export const RoomViewTyping = style([
{ {
padding: `0 ${config.space.S500}`, padding: `0 ${config.space.S500}`,
width: '100%', width: '100%',
backgroundColor: color.Surface.Container, backgroundColor: color.SurfaceVariant.Container,
color: color.Surface.OnContainer, color: color.Surface.OnContainer,
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,