chore(release): v4.11.1 [skip ci] (#2765)

* chore(release): 4.11.0 [skip ci]

* chore(release): 4.11.1 [skip ci]

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.11.0",
+      "version": "4.11.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -59,10 +59,10 @@
         "react-range": "1.8.14",
         "react-router-dom": "6.30.3",
         "sanitize-html": "2.12.1",
-        "slate": "0.112.0",
-        "slate-dom": "0.112.2",
-        "slate-history": "0.110.3",
-        "slate-react": "0.112.1",
+        "slate": "0.123.0",
+        "slate-dom": "0.123.0",
+        "slate-history": "0.113.1",
+        "slate-react": "0.123.0",
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
@@ -10291,20 +10291,15 @@
       }
     },
     "node_modules/slate": {
-      "version": "0.112.0",
-      "resolved": "https://registry.npmjs.org/slate/-/slate-0.112.0.tgz",
-      "integrity": "sha512-PRnfFgDA3tSop4OH47zu4M1R4Uuhm/AmASu29Qp7sGghVFb713kPBKEnSf1op7Lx/nCHkRlCa3ThfHtCBy+5Yw==",
-      "license": "MIT",
-      "dependencies": {
-        "immer": "^10.0.3",
-        "is-plain-object": "^5.0.0",
-        "tiny-warning": "^1.0.3"
-      }
+      "version": "0.123.0",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.123.0.tgz",
+      "integrity": "sha512-Oon3HR/QzJQBjuOUJT1jGGlp8Ff7t3Bkr/rJ2lDqxNT4H+cBnXpEVQ/si6hn1ZCHhD2xY/2N91PQoH/rD7kxTg==",
+      "license": "MIT"
     },
     "node_modules/slate-dom": {
-      "version": "0.112.2",
-      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
-      "integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
+      "version": "0.123.0",
+      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.123.0.tgz",
+      "integrity": "sha512-OUinp4tvSrAlt64JL9y20Xin08jgnnj1gJmIuPdGvU5MELKXRNZh17a7EKKNOS6OZPAE8Dk9NI1MAIS/Qz0YBw==",
       "license": "MIT",
       "dependencies": {
         "@juggle/resize-observer": "^3.4.0",
@@ -10316,13 +10311,13 @@
         "tiny-invariant": "1.3.1"
       },
       "peerDependencies": {
-        "slate": ">=0.99.0"
+        "slate": ">=0.121.0"
       }
     },
     "node_modules/slate-history": {
-      "version": "0.110.3",
-      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
-      "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
+      "version": "0.113.1",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.113.1.tgz",
+      "integrity": "sha512-J9NSJ+UG2GxoW0lw5mloaKcN0JI0x2IA5M5FxyGiInpn+QEutxT1WK7S/JneZCMFJBoHs1uu7S7e6pxQjubHmQ==",
       "license": "MIT",
       "dependencies": {
         "is-plain-object": "^5.0.0"
@@ -10332,15 +10327,14 @@
       }
     },
     "node_modules/slate-react": {
-      "version": "0.112.1",
-      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
-      "integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
+      "version": "0.123.0",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.123.0.tgz",
+      "integrity": "sha512-nQwXL1FEacrY9ZFmatRhoBnsySNUX2x6qB77V3oNHd7wWxBJWuzz4GMrBXcVoRE8Gac7Angf8xaNGzb6zcPlHg==",
       "license": "MIT",
       "dependencies": {
         "@juggle/resize-observer": "^3.4.0",
         "direction": "^1.0.4",
         "is-hotkey": "^0.2.0",
-        "is-plain-object": "^5.0.0",
         "lodash": "^4.17.21",
         "scroll-into-view-if-needed": "^3.1.0",
         "tiny-invariant": "1.3.1"
@@ -10348,18 +10342,8 @@
       "peerDependencies": {
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0",
-        "slate": ">=0.99.0",
-        "slate-dom": ">=0.110.2"
-      }
-    },
-    "node_modules/slate/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
+        "slate": ">=0.121.0",
+        "slate-dom": ">=0.119.1"
       }
     },
     "node_modules/smob": {
@@ -10729,11 +10713,6 @@
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
       "license": "MIT"
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.10",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -71,10 +71,10 @@
     "react-range": "1.8.14",
     "react-router-dom": "6.30.3",
     "sanitize-html": "2.12.1",
-    "slate": "0.112.0",
-    "slate-dom": "0.112.2",
-    "slate-history": "0.110.3",
-    "slate-react": "0.112.1",
+    "slate": "0.123.0",
+    "slate-dom": "0.123.0",
+    "slate-history": "0.113.1",
+    "slate-react": "0.123.0",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {

src/app/components/nav/styles.css.ts

@@ -49,6 +49,7 @@ const NavItemBase = style({
   display: 'flex',
   justifyContent: 'start',
   cursor: 'pointer',
+  backgroundColor: Container,
   color: OnContainer,
   outline: 'none',
   minHeight: toRem(36),

src/app/components/page/Page.tsx

@@ -14,7 +14,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
 
   return (
-    <Box grow="Yes">
+    <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
       {nav}
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
@@ -79,11 +79,11 @@ export function PageNavContent({
   );
 }
 
-export const Page = as<'div', css.PageVariants>(({ className, transparent, ...props }, ref) => (
+export const Page = as<'div'>(({ className, ...props }, ref) => (
   <Box
     grow="Yes"
     direction="Column"
-    className={classNames(css.Page({ transparent }), className)}
+    className={classNames(ContainerColor({ variant: 'Surface' }), className)}
     {...props}
     ref={ref}
   />

src/app/components/page/style.css.ts

@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 
 export const PageNav = recipe({
   variants: {
@@ -60,19 +59,6 @@ export const PageNavContent = style({
   paddingBottom: config.space.S700,
 });
 
-export const Page = recipe({
-  base: [ContainerColor({ variant: 'Surface' })],
-  variants: {
-    transparent: {
-      true: {
-        background: 'transparent',
-      },
-    },
-  },
-});
-
-export type PageVariants = RecipeVariants<typeof Page>;
-
 export const PageHeader = recipe({
   base: {
     paddingLeft: config.space.S400,

src/app/components/sidebar/Sidebar.css.ts

@@ -1,11 +1,13 @@
 import { createVar, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 
 export const Sidebar = style([
   DefaultReset,
   {
     width: toRem(66),
+    backgroundColor: color.Background.Container,
     borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
 
     display: 'flex',
@@ -185,6 +187,7 @@ export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
 
 export const SidebarFolder = recipe({
   base: [
+    ContainerColor({ variant: 'Background' }),
     {
       padding: config.space.S100,
       width: toRem(42),

src/app/components/splash-screen/SplashScreen.css.ts

@@ -3,6 +3,7 @@ import { color, config } from 'folds';
 
 export const SplashScreen = style({
   minHeight: '100%',
+  backgroundColor: color.Background.Container,
   color: color.Background.OnContainer,
 });
 

src/app/features/call-status/CallRoomName.tsx

@@ -36,7 +36,6 @@ export function CallRoomName({ room }: CallRoomNameProps) {
   return (
     <Chip
       variant="Background"
-      fill="None"
       radii="Pill"
       before={
         <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />

src/app/features/call-status/CallStatus.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Box, Spinner } from 'folds';
+import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
 import * as css from './styles.css';
 import { CallRoomName } from './CallRoomName';
 import { CallControl } from './CallControl';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
 import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { MemberGlance } from './MemberGlance';
@@ -31,7 +33,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
 
   return (
     <Box
-      className={css.CallStatus}
+      className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
       shrink="No"
       gap="400"
       alignItems={compact ? undefined : 'Center'}

src/app/features/call/CallView.tsx

@@ -1,6 +1,7 @@
 import React, { RefObject, useRef } from 'react';
 import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
 import { useCallEmbed, useCallJoined, useCallEmbedPlacementSync } from '../../hooks/useCallEmbed';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 import { PrescreenControls } from './PrescreenControls';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
@@ -137,7 +138,11 @@ export function CallView() {
   const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
 
   return (
-    <Box style={{ minWidth: toRem(280) }} grow="Yes">
+    <Box
+      className={ContainerColor({ variant: 'Surface' })}
+      style={{ minWidth: toRem(280) }}
+      grow="Yes"
+    >
       {!currentJoined && <CallPrescreen />}
       <CallJoined joined={currentJoined} containerRef={callContainerRef} />
     </Box>

src/app/features/create-room/CreateRoom.tsx

@@ -213,7 +213,6 @@ export function CreateRoomForm({
           <Text size="L400">Options</Text>
           <Box grow="Yes" justifyContent="End">
             <Chip
-              fill="None"
               radii="Pill"
               before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
               onClick={() => setAdvance(!advance)}

src/app/features/create-space/CreateSpace.tsx

@@ -180,7 +180,6 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
           <Box grow="Yes" justifyContent="End">
             <Chip
               radii="Pill"
-              fill="None"
               before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
               onClick={() => setAdvance(!advance)}
               type="button"

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -10,7 +10,6 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
-import { useTheme } from '../../hooks/useTheme';
 
 type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
 export function JoinBeforeNavigate({
@@ -22,7 +21,6 @@ export function JoinBeforeNavigate({
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
-  const theme = useTheme();
 
   const handleView = (roomId: string) => {
     if (mx.getRoom(roomId)?.isSpaceRoom()) {
@@ -33,7 +31,7 @@ export function JoinBeforeNavigate({
   };
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box shrink="No">

src/app/features/lobby/Lobby.tsx

@@ -56,7 +56,6 @@ import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
-import { useTheme } from '../../hooks/useTheme';
 
 const useCanDropLobbyItem = (
   space: Room,
@@ -152,7 +151,6 @@ const useCanDropLobbyItem = (
 export function Lobby() {
   const navigate = useNavigate();
   const mx = useMatrixClient();
-  const theme = useTheme();
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
@@ -432,7 +430,7 @@ export function Lobby() {
   return (
     <PowerLevelsContextProvider value={spacePowerLevels}>
       <Box grow="Yes">
-        <Page transparent={theme.flat}>
+        <Page>
           <LobbyHeader
             showProfile={!onTop}
             powerLevels={roomsPowerLevels.get(space.roomId) ?? {}}

src/app/features/lobby/SpaceItem.tsx

@@ -64,7 +64,6 @@ function InaccessibleSpaceProfile({ roomId, suggested }: InaccessibleSpaceProfil
       as="span"
       className={css.HeaderChip}
       variant="Surface"
-      fill="None"
       size="500"
       before={
         <Avatar size="200" radii="300">
@@ -122,7 +121,6 @@ function UnjoinedSpaceProfile({
     <Chip
       className={css.HeaderChip}
       variant="Surface"
-      fill="None"
       size="500"
       onClick={join}
       disabled={!canJoin}
@@ -189,7 +187,6 @@ function SpaceProfile({
       onClick={handleClose}
       className={css.HeaderChip}
       variant="Surface"
-      fill="None"
       size="500"
       before={
         <Avatar size="200" radii="300">
@@ -233,7 +230,6 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
       onClick={handleClose}
       className={css.HeaderChip}
       variant="Surface"
-      fill="None"
       size="500"
       after={<Icon src={closed ? Icons.ChevronRight : Icons.ChevronBottom} size="50" />}
     >

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -9,7 +9,6 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
       className={classNames(css.CategoryButton, className)}
       variant="Background"
       radii="Pill"
-      fill="None"
       before={
         <Icon
           className={css.CategoryButtonIcon}

src/app/features/room/CallChatView.tsx

@@ -6,11 +6,9 @@ import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';
 import { RoomView } from './RoomView';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { useTheme } from '../../hooks/useTheme';
 
 export function CallChatView() {
   const { eventId } = useParams();
-  const theme = useTheme();
   const setChat = useSetAtom(callChatAtom);
   const screenSize = useScreenSizeContext();
 
@@ -18,7 +16,6 @@ export function CallChatView() {
 
   return (
     <Page
-      transparent={theme.flat}
       style={{
         width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
         flexShrink: 0,
@@ -44,7 +41,7 @@ export function CallChatView() {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} variant="Surface" fill="None" onClick={handleClose}>
+                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
                   <Icon src={Icons.Cross} />
                 </IconButton>
               )}

src/app/features/room/MembersDrawer.tsx

@@ -56,6 +56,7 @@ import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
 import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 
@@ -88,7 +89,6 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
               <IconButton
                 ref={triggerRef}
                 variant="Background"
-                fill="None"
                 onClick={() => setPeopleDrawer(false)}
               >
                 <Icon src={Icons.Cross} />
@@ -132,7 +132,6 @@ function MemberItem({
       aria-pressed={pressed}
       data-user-id={member.userId}
       variant="Background"
-      fill="None"
       radii="400"
       onClick={onClick}
       before={
@@ -246,7 +245,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   };
 
   return (
-    <Box className={classNames(css.MembersDrawer)} shrink="No" direction="Column">
+    <Box
+      className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
+      shrink="No"
+      direction="Column"
+    >
       <MemberDrawerHeader room={room} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
@@ -276,7 +279,6 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
-                        fill="None"
                         size="400"
                         radii="300"
                         before={<Icon src={Icons.Filter} size="50" />}
@@ -309,7 +311,6 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
-                        fill="None"
                         size="400"
                         radii="300"
                         after={<Icon src={Icons.Sort} size="50" />}

src/app/features/room/Room.tsx

@@ -18,14 +18,11 @@ import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
 import { callChatAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';
-import { Page } from '../../components/page';
-import { useTheme } from '../../hooks/useTheme';
 
 export function Room() {
   const { eventId } = useParams();
   const room = useRoom();
   const mx = useMatrixClient();
-  const theme = useTheme();
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -52,20 +49,20 @@ export function Room() {
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
         {callView && (screenSize === ScreenSize.Desktop || !chat) && (
-          <Page transparent={theme.flat}>
+          <Box grow="Yes" direction="Column">
             <RoomViewHeader callView />
             <Box grow="Yes">
               <CallView />
             </Box>
-          </Page>
+          </Box>
         )}
         {!callView && (
-          <Page transparent={theme.flat}>
+          <Box grow="Yes" direction="Column">
             <RoomViewHeader />
             <Box grow="Yes">
               <RoomView eventId={eventId} />
             </Box>
-          </Page>
+          </Box>
         )}
 
         {callView && chat && (

src/app/features/room/RoomView.tsx

@@ -14,6 +14,7 @@ import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
+import { Page } from '../../components/page';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
@@ -90,7 +91,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Box grow="Yes" direction="Column" ref={roomViewRef}>
+    <Page ref={roomViewRef}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}
@@ -134,6 +135,6 @@ export function RoomView({ eventId }: { eventId?: string }) {
         </div>
         {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
-    </Box>
+    </Page>
   );
 }

src/app/features/room/RoomViewFollowing.css.ts

@@ -16,6 +16,8 @@ export const RoomViewFollowing = recipe({
       minHeight: toRem(28),
       padding: `0 ${config.space.S400}`,
       width: '100%',
+      backgroundColor: color.Surface.Container,
+      color: color.Surface.OnContainer,
       outline: 'none',
     },
   ],

src/app/features/room/RoomViewHeader.tsx

@@ -66,6 +66,7 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 import { RoomSettingsPage } from '../../state/roomSettings';
 
 type RoomMenuProps = {
@@ -304,7 +305,10 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   };
 
   return (
-    <PageHeader balance={screenSize === ScreenSize.Mobile}>
+    <PageHeader
+      className={ContainerColor({ variant: 'Surface' })}
+      balance={screenSize === ScreenSize.Mobile}
+    >
       <Box grow="Yes" gap="300">
         {screenSize === ScreenSize.Mobile && (
           <BackRouteHandler>

src/app/features/settings/about/About.tsx

@@ -46,7 +46,7 @@ export function About({ requestClose }: AboutProps) {
                   <Box direction="Column" gap="100">
                     <Box gap="100" alignItems="End">
                       <Text size="H3">Cinny</Text>
-                      <Text size="T200">v4.11.0</Text>
+                      <Text size="T200">v4.11.1</Text>
                     </Box>
                     <Text>Yet another matrix client.</Text>
                   </Box>

src/app/hooks/useTheme.ts

@@ -1,6 +1,7 @@
+import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { lightTheme, butterTheme, darkTheme, silverTheme, moonlightTheme } from '../../colors.css';
+import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -13,8 +14,6 @@ export type Theme = {
   id: string;
   kind: ThemeKind;
   classNames: string[];
-  flat?: boolean;
-  gradient?: string;
 };
 
 export const LightTheme: Theme = {
@@ -26,31 +25,21 @@ export const LightTheme: Theme = {
 export const SilverTheme: Theme = {
   id: 'silver-theme',
   kind: ThemeKind.Light,
-  classNames: [silverTheme, onLightFontWeight, 'prism-light'],
+  classNames: ['silver-theme', silverTheme, onLightFontWeight, 'prism-light'],
 };
-
 export const DarkTheme: Theme = {
   id: 'dark-theme',
   kind: ThemeKind.Dark,
-  classNames: ['global-dark', darkTheme, onDarkFontWeight, 'prism-dark'],
+  classNames: ['dark-theme', darkTheme, onDarkFontWeight, 'prism-dark'],
 };
 export const ButterTheme: Theme = {
   id: 'butter-theme',
   kind: ThemeKind.Dark,
-  classNames: ['global-dark', butterTheme, onDarkFontWeight, 'prism-dark'],
-};
-export const MoonlightTheme: Theme = {
-  id: 'moonlight-theme',
-  kind: ThemeKind.Dark,
-  classNames: ['global-dark', moonlightTheme, onDarkFontWeight, 'prism-dark'],
-  flat: true,
+  classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(
-    () => [LightTheme, SilverTheme, DarkTheme, ButterTheme, MoonlightTheme],
-    []
-  );
+  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
 
   return themes;
 };
@@ -62,7 +51,6 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
-      [MoonlightTheme.id]: 'Moonlight',
     }),
     []
   );

src/app/pages/ThemeManager.tsx

@@ -39,9 +39,9 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
     document.body.classList.add(...activeTheme.classNames);
 
     if (monochromeMode) {
-      document.body.style.setProperty('filter', 'grayscale(1)');
+      document.body.style.filter = 'grayscale(1)';
     } else {
-      document.body.style.removeProperty('filter');
+      document.body.style.filter = '';
     }
   }, [activeTheme, monochromeMode]);
 

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.11.0
+        v4.11.1
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter

src/app/pages/client/WelcomePage.tsx

@@ -2,12 +2,10 @@ import React from 'react';
 import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
 import { Page, PageHero, PageHeroSection } from '../../components/page';
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
-import { useTheme } from '../../hooks/useTheme';
 
 export function WelcomePage() {
-  const theme = useTheme();
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <Box
         grow="Yes"
         style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}
@@ -26,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.11.0
+                  v4.11.1
                 </a>
               </span>
             }

src/app/pages/client/create/Create.tsx

@@ -9,14 +9,12 @@ import {
 } from '../../../components/page';
 import { CreateSpaceForm } from '../../../features/create-space';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-import { useTheme } from '../../../hooks/useTheme';
 
 export function Create() {
   const { navigateSpace } = useRoomNavigate();
-  const theme = useTheme();
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent>

src/app/pages/client/direct/Direct.tsx

@@ -107,12 +107,7 @@ function DirectHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton
-              aria-pressed={!!menuAnchor}
-              variant="Background"
-              fill="None"
-              onClick={handleOpenMenu}
-            >
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/pages/client/direct/DirectCreate.tsx

@@ -17,12 +17,10 @@ import {
 } from '../../../components/page';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateChat } from '../../../features/create-chat';
-import { useTheme } from '../../../hooks/useTheme';
 
 export function DirectCreate() {
   const mx = useMatrixClient();
   const screenSize = useScreenSizeContext();
-  const theme = useTheme();
 
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -40,7 +38,7 @@ export function DirectCreate() {
   }, [mx, navigate, directs, userId]);
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader balance outlined={false}>
           <Box grow="Yes" alignItems="Center" gap="200">

src/app/pages/client/explore/Featured.tsx

@@ -18,10 +18,8 @@ import * as css from './style.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { useTheme } from '../../../hooks/useTheme';
 
 export function FeaturedRooms() {
-  const theme = useTheme();
   const { featuredCommunities } = useClientConfig();
   const { rooms, spaces } = featuredCommunities ?? {};
   const allRooms = useAtomValue(allRoomsAtom);
@@ -29,7 +27,7 @@ export function FeaturedRooms() {
   const { navigateSpace, navigateRoom } = useRoomNavigate();
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader>
           <Box shrink="No">

src/app/pages/client/explore/Server.tsx

@@ -45,7 +45,6 @@ import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { useTheme } from '../../../hooks/useTheme';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -344,7 +343,6 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
 export function PublicRooms() {
   const { server } = useParams();
   const mx = useMatrixClient();
-  const theme = useTheme();
   const userId = mx.getUserId();
   const userServer = userId && getMxIdServer(userId);
   const allRooms = useAtomValue(allRoomsAtom);
@@ -471,7 +469,7 @@ export function PublicRooms() {
   };
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <PageHeader balance>
         {isSearch ? (
           <>

src/app/pages/client/home/CreateRoom.tsx

@@ -12,16 +12,14 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateRoomForm } from '../../../features/create-room';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-import { useTheme } from '../../../hooks/useTheme';
 
 export function HomeCreateRoom() {
   const screenSize = useScreenSizeContext();
-  const theme = useTheme();
 
   const { navigateRoom } = useRoomNavigate();
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader balance outlined={false}>
           <Box grow="Yes" alignItems="Center" gap="200">

src/app/pages/client/home/Home.tsx

@@ -121,12 +121,7 @@ function HomeHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton
-              aria-pressed={!!menuAnchor}
-              variant="Background"
-              fill="None"
-              onClick={handleOpenMenu}
-            >
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/pages/client/home/Search.tsx

@@ -5,16 +5,14 @@ import { MessageSearch } from '../../../features/message-search';
 import { useHomeRooms } from './useHomeRooms';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { useTheme } from '../../../hooks/useTheme';
 
 export function HomeSearch() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
   const screenSize = useScreenSizeContext();
-  const theme = useTheme();
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <PageHeader balance>
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/inbox/Invites.tsx

@@ -67,7 +67,6 @@ import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
-import { useTheme } from '../../../hooks/useTheme';
 
 const COMPACT_CARD_WIDTH = 548;
 
@@ -694,7 +693,6 @@ function SpamInvites({
 
 export function Invites() {
   const mx = useMatrixClient();
-  const theme = useTheme();
   const useAuthentication = useMediaAuthentication();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const allRooms = useAtomValue(allRoomsAtom);
@@ -748,7 +746,7 @@ export function Invites() {
   };
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/inbox/Notifications.tsx

@@ -563,7 +563,6 @@ const DEFAULT_REFRESH_MS = 7000;
 
 export function Notifications() {
   const mx = useMatrixClient();
-  const theme = useTheme();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
@@ -636,7 +635,7 @@ export function Notifications() {
   }, [timelineState, notificationTimeline, lastVItemIndex, loadTimeline]);
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/space/Search.tsx

@@ -11,11 +11,9 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { useTheme } from '../../../hooks/useTheme';
 
 export function SpaceSearch() {
   const mx = useMatrixClient();
-  const theme = useTheme();
   const scrollRef = useRef<HTMLDivElement>(null);
   const space = useSpace();
   const screenSize = useScreenSizeContext();
@@ -29,7 +27,7 @@ export function SpaceSearch() {
   );
 
   return (
-    <Page transparent={theme.flat}>
+    <Page>
       <PageHeader balance>
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/space/Space.tsx

@@ -273,12 +273,7 @@ function SpaceHeader() {
             {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
           </Box>
           <Box shrink="No">
-            <IconButton
-              aria-pressed={!!menuAnchor}
-              variant="Background"
-              fill="None"
-              onClick={handleOpenMenu}
-            >
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/styles/Patterns.css.ts

@@ -2,8 +2,8 @@ import { style } from '@vanilla-extract/css';
 import { color, toRem } from 'folds';
 
 export const BackgroundDotPattern = style({
-  backgroundImage: `radial-gradient(${color.Background.ContainerActive} ${toRem(
-    2
-  )}, transparent ${toRem(2)})`,
+  backgroundImage: `radial-gradient(${color.Background.ContainerActive} ${toRem(2)}, ${
+    color.Background.Container
+  } ${toRem(2)})`,
   backgroundSize: `${toRem(40)} ${toRem(40)}`,
 });

src/colors.css.ts

@@ -1,115 +1,7 @@
-import { createTheme, createThemeContract } from '@vanilla-extract/css';
+import { createTheme } from '@vanilla-extract/css';
 import { color } from 'folds';
 
-export const extendedColor = createThemeContract({
-  background: '',
-});
-
-const ThemeContract = {
-  ...extendedColor,
-  ...color,
-};
-
-export const lightTheme = createTheme(ThemeContract, {
-  background: '#F2F2F2',
-  Background: {
-    Container: '#F2F2F2',
-    ContainerHover: '#E5E5E5',
-    ContainerActive: '#D9D9D9',
-    ContainerLine: '#CCCCCC',
-    OnContainer: '#000000',
-  },
-
-  Surface: {
-    Container: '#FFFFFF',
-    ContainerHover: '#F2F2F2',
-    ContainerActive: '#E5E5E5',
-    ContainerLine: '#D9D9D9',
-    OnContainer: '#000000',
-  },
-
-  SurfaceVariant: {
-    Container: '#F2F2F2',
-    ContainerHover: '#E5E5E5',
-    ContainerActive: '#D9D9D9',
-    ContainerLine: '#CCCCCC',
-    OnContainer: '#000000',
-  },
-
-  Primary: {
-    Main: '#1858D5',
-    MainHover: '#164FC0',
-    MainActive: '#144BB5',
-    MainLine: '#1346AA',
-    OnMain: '#FFFFFF',
-    Container: '#E8EEFB',
-    ContainerHover: '#DCE6F9',
-    ContainerActive: '#D1DEF7',
-    ContainerLine: '#C5D5F5',
-    OnContainer: '#113E95',
-  },
-
-  Secondary: {
-    Main: '#000000',
-    MainHover: '#1A1A1A',
-    MainActive: '#262626',
-    MainLine: '#333333',
-    OnMain: '#FFFFFF',
-    Container: '#D9D9D9',
-    ContainerHover: '#CCCCCC',
-    ContainerActive: '#BFBFBF',
-    ContainerLine: '#B2B2B2',
-    OnContainer: '#0D0D0D',
-  },
-
-  Success: {
-    Main: '#00844C',
-    MainHover: '#007744',
-    MainActive: '#007041',
-    MainLine: '#006A3D',
-    OnMain: '#FFFFFF',
-    Container: '#E5F3ED',
-    ContainerHover: '#D9EDE4',
-    ContainerActive: '#CCE6DB',
-    ContainerLine: '#BFE0D2',
-    OnContainer: '#005C35',
-  },
-
-  Warning: {
-    Main: '#A85400',
-    MainHover: '#974C00',
-    MainActive: '#8F4700',
-    MainLine: '#864300',
-    OnMain: '#FFFFFF',
-    Container: '#F6EEE5',
-    ContainerHover: '#F2E5D9',
-    ContainerActive: '#EEDDCC',
-    ContainerLine: '#E9D4BF',
-    OnContainer: '#763B00',
-  },
-
-  Critical: {
-    Main: '#C40E0E',
-    MainHover: '#AC0909',
-    MainActive: '#A60C0C',
-    MainLine: '#9C0B0B',
-    OnMain: '#FFFFFF',
-    Container: '#F9E7E7',
-    ContainerHover: '#F6DBDB',
-    ContainerActive: '#F3CFCF',
-    ContainerLine: '#F0C3C3',
-    OnContainer: '#890A0A',
-  },
-
-  Other: {
-    FocusRing: 'rgba(0 0 0 / 50%)',
-    Shadow: 'rgba(0 0 0 / 20%)',
-    Overlay: 'rgba(0 0 0 / 50%)',
-  },
-});
-
-export const silverTheme = createTheme(ThemeContract, {
-  background: '#DEDEDE',
+export const silverTheme = createTheme(color, {
   Background: {
     Container: '#DEDEDE',
     ContainerHover: '#D3D3D3',
@@ -207,7 +99,6 @@ export const silverTheme = createTheme(ThemeContract, {
 });
 
 const darkThemeData = {
-  background: color.Background.Container,
   Background: {
     Container: '#1A1A1A',
     ContainerHover: '#262626',
@@ -304,9 +195,9 @@ const darkThemeData = {
   },
 };
 
-export const darkTheme = createTheme(ThemeContract, darkThemeData);
+export const darkTheme = createTheme(color, darkThemeData);
 
-export const butterTheme = createTheme(ThemeContract, {
+export const butterTheme = createTheme(color, {
   ...darkThemeData,
   Background: {
     Container: '#1A1916',
@@ -345,107 +236,3 @@ export const butterTheme = createTheme(ThemeContract, {
     OnContainer: '#F2EED3',
   },
 });
-
-export const moonlightTheme = createTheme(ThemeContract, {
-  background: 'linear-gradient(to top right, #000546, #000)',
-
-  Background: {
-    Container: '#000000',
-    ContainerHover: '#01032B',
-    ContainerActive: '#020546',
-    ContainerLine: '#030977',
-    OnContainer: '#EAEBFF',
-  },
-
-  Surface: {
-    Container: '#01032B',
-    ContainerHover: '#020546',
-    ContainerActive: '#03075E',
-    ContainerLine: '#030977',
-    OnContainer: '#EAEBFF',
-  },
-
-  SurfaceVariant: {
-    Container: '#020546',
-    ContainerHover: '#03075E',
-    ContainerActive: '#030977',
-    ContainerLine: '#030977',
-    OnContainer: '#EAEBFF',
-  },
-
-  Primary: {
-    Main: '#0043FF',
-    MainHover: '#1A56FF',
-    MainActive: '#3369FF',
-    MainLine: '#4D7BFF',
-    OnMain: '#FFFFFF',
-
-    Container: '#00144D',
-    ContainerHover: '#001B66',
-    ContainerActive: '#002180',
-    ContainerLine: '#002899',
-    OnContainer: '#FFFFFF',
-  },
-
-  Secondary: {
-    Main: '#E5E7FF',
-    MainHover: '#CCCFFF',
-    MainActive: '#B2B6FF',
-    MainLine: '#999EFF',
-    OnMain: '#000000',
-
-    Container: '#030763',
-    ContainerHover: '#04097C',
-    ContainerActive: '#050B94',
-    ContainerLine: '#050CAD',
-    OnContainer: '#FFFFFF',
-  },
-
-  Success: {
-    Main: '#00FF95',
-    MainHover: '#00E586',
-    MainActive: '#00CC77',
-    MainLine: '#4DFFB5',
-    OnMain: '#0B2E22',
-
-    Container: '#004D3B',
-    ContainerHover: '#00664F',
-    ContainerActive: '#008062',
-    ContainerLine: '#008062',
-    OnContainer: '#CCF2E2',
-  },
-
-  Warning: {
-    Main: '#FF9933',
-    MainHover: '#FFA64D',
-    MainActive: '#FFB266',
-    MainLine: '#FFBF80',
-    OnMain: '#000000',
-
-    Container: '#4D2600',
-    ContainerHover: '#663200',
-    ContainerActive: '#803F00',
-    ContainerLine: '#994C00',
-    OnContainer: '#F3E2D1',
-  },
-
-  Critical: {
-    Main: '#FF0000',
-    MainHover: '#E50000',
-    MainActive: '#CC0000',
-    MainLine: '#FF4D4D',
-    OnMain: '#ffffff',
-
-    Container: '#4D0000',
-    ContainerHover: '#660000',
-    ContainerActive: '#800000',
-    ContainerLine: '#990000',
-    OnContainer: '#F5D6D6',
-  },
-
-  Other: {
-    FocusRing: 'hsla(237, 100%, 70%, 0.6)',
-    Shadow: 'rgba(0, 0, 0, 0.9)',
-    Overlay: 'rgba(0, 0, 0, 0.8)',
-  },
-});

src/index.css

@@ -22,7 +22,8 @@
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
 }
 
-.global-dark {
+.dark-theme,
+.butter-theme {
   --tc-link: hsl(213deg 100% 80%);
 
   --mx-uc-1: hsl(208, 100%, 75%);

src/index.css.ts

@@ -1,10 +0,0 @@
-import { globalStyle } from '@vanilla-extract/css';
-import { color } from 'folds';
-import { extendedColor } from './colors.css';
-
-globalStyle('body', {
-  background: extendedColor.background,
-  borderColor: color.Background.ContainerLine,
-  outlineColor: color.Background.ContainerLine,
-  color: color.Background.OnContainer,
-});

src/index.tsx

@@ -5,7 +5,6 @@ import { enableMapSet } from 'immer';
 import '@fontsource/inter/variable.css';
 import 'folds/dist/style.css';
 import { configClass, varsClass } from 'folds';
-import './index.css.ts';
 
 enableMapSet();