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

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

Browse source
This commit is contained in:
v.lagerev 2026-05-11 15:16:53 +03:00
parent 31a4e4240c
commit 212a6084c5
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: {
outlined: {
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: '""',
position: 'absolute',
inset: 0,
border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
border: `1.2px solid ${color.Surface.Container}`,
borderRadius: 'inherit',
pointerEvents: 'none',
zIndex: 1,
@ -96,7 +96,7 @@ export const StreamMediaCaption = style({
marginTop: toRem(4),
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
border: `1px solid ${color.Surface.Container}`,
borderRadius: StreamMediaCornerRound,
paddingLeft: 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%',
transform: 'translateX(-50%)',
width: StreamRailLineWidth,
background: color.Surface.ContainerLine,
background: color.Surface.Container,
pointerEvents: 'none',
zIndex: 0,
});
@ -325,8 +325,8 @@ export const StreamDotHalo = style({
width: StreamDotSize,
height: StreamDotSize,
borderRadius: '50%',
background: color.Surface.Container,
boxShadow: `0 0 0 3px ${color.Surface.Container}`,
background: color.SurfaceVariant.Container,
boxShadow: `0 0 0 3px ${color.SurfaceVariant.Container}`,
pointerEvents: 'none',
position: 'relative',
zIndex: 2,
@ -413,9 +413,9 @@ export const StreamThreadSummary = style({
export const StreamBubble = recipe({
base: {
backgroundColor: color.SurfaceVariant.Container,
backgroundColor: color.Surface.Container,
color: color.SurfaceVariant.OnContainer,
border: `${StreamBubbleBorderWidth} solid ${color.SurfaceVariant.ContainerLine}`,
border: `${StreamBubbleBorderWidth} solid ${color.Surface.ContainerLine}`,
paddingTop: config.space.S200,
paddingBottom: config.space.S200,
minWidth: 0,
@ -613,7 +613,7 @@ export const StreamDayDot = style({
height: StreamDayDotSize,
borderRadius: '50%',
background: color.Primary.MainHover,
boxShadow: `0 0 0 4px ${color.Surface.Container}`,
boxShadow: `0 0 0 4px ${color.SurfaceVariant.Container}`,
pointerEvents: 'none',
zIndex: 2,
});
@ -631,7 +631,7 @@ export const StreamDayLineWrap = style({
export const StreamDayLineSegment = style({
flex: 1,
height: 1,
background: color.Surface.ContainerLine,
background: color.Surface.Container,
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),
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
border: `${config.borderWidth.B300} solid ${color.Surface.Container}`,
borderRadius: config.radii.R300,
overflow: 'hidden',
},

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

@ -1,5 +1,5 @@
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 { ReactEditor } from 'slate-react';
import { isKeyHotkey } from 'is-hotkey';
@ -103,7 +103,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
);
return (
<Page ref={roomViewRef}>
<Page ref={roomViewRef} style={{ backgroundColor: color.SurfaceVariant.Container }}>
<Box grow="Yes" direction="Column">
<RoomTimeline
key={roomId}

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

@ -632,7 +632,7 @@ export function RoomViewHeaderDm({ callView }: { callView?: boolean }) {
return (
<PageHeader
className={`${ContainerColor({ variant: 'Surface' })} ${css.HeaderShell}`}
className={`${ContainerColor({ variant: 'SurfaceVariant' })} ${css.HeaderShell}`}
balance={isMobile}
>
{/* `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}`,
width: '100%',
backgroundColor: color.Surface.Container,
backgroundColor: color.SurfaceVariant.Container,
color: color.Surface.OnContainer,
position: 'absolute',
bottom: 0,