added familiar theme

README.md

@@ -18,6 +18,7 @@ This client is a fork of [Cinny](https://github.com/cinnyapp/cinny).
 - Add presence badge in member list
 - Branding changes
 - Various small fixes
+- Added theme: 'Familiar'
 
 A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
 - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)

src/app/features/room/RoomTimeline.tsx

@@ -1621,8 +1621,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     const newDividerJSX =
       newDivider && eventJSX && eventSender !== mx.getUserId() ? (
         <MessageBase space={messageSpacing}>
-          <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
+          <TimelineDivider style={{ color: color.Critical.Main }} variant="Inherit">
-            <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
+            <Badge as="span" size="500" variant="Critical" fill="Solid" radii="300">
               <Text size="L400">New Messages</Text>
             </Badge>
           </TimelineDivider>
@@ -1696,8 +1696,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           {!canPaginateBack && rangeAtStart && getItems().length > 0 && (
             <div
               style={{
-                padding: `${config.space.S700} ${config.space.S400} ${config.space.S600} ${
+                padding: `${config.space.S700} ${config.space.S400} ${config.space.S600} ${messageLayout === MessageLayout.Compact ? config.space.S400 : toRem(64)
-                  messageLayout === MessageLayout.Compact ? config.space.S400 : toRem(64)
                   }`,
               }}
             >

src/app/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { butterTheme, darkTheme, familiarTheme, silverTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -37,9 +37,14 @@ export const ButterTheme: Theme = {
   kind: ThemeKind.Dark,
   classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
+export const FamiliarTheme: Theme = {
+  id: 'familiar-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['dark-theme', familiarTheme, onDarkFontWeight, 'prism-dark'],
+};
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, FamiliarTheme], []);
 
   return themes;
 };
@@ -51,6 +56,7 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [FamiliarTheme.id]: 'Familiar'
     }),
     []
   );

src/app/styles/CustomHtml.css.ts

@@ -148,7 +148,7 @@ export const Mention = recipe({
     DefaultReset,
     {
       backgroundColor: color.Warning.Container,
-      color: color.Warning.Container,
+      color: color.Primary.OnContainer,
       boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.Warning.ContainerLine}`,
       padding: `0 ${toRem(2)}`,
       borderRadius: config.radii.R300,

src/colors.css.ts

@@ -236,3 +236,101 @@ export const butterTheme = createTheme(color, {
     OnContainer: '#F2EED3',
   },
 });
+
+export const familiarTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: '#1a1a1e',
+    ContainerHover: '#262626',
+    ContainerActive: '#333333',
+    ContainerLine: '#34343a',
+    OnContainer: '#F2F2F2',
+  },
+
+  Surface: {
+    Container: '#1a1a1e',
+    ContainerHover: '#333333',
+    ContainerActive: '#404040',
+    ContainerLine: '#2d2d32',
+    OnContainer: '#F2F2F2',
+  },
+
+  SurfaceVariant: {
+    Container: '#222327',
+    ContainerHover: '#404040',
+    ContainerActive: '#4D4D4D',
+    ContainerLine: '#252529',
+    OnContainer: '#F2F2F2',
+  },
+
+  Primary: {
+    Main: '#BDB6EC',
+    MainHover: '#B2AAE9',
+    MainActive: '#ADA3E8',
+    MainLine: '#A79DE6',
+    OnMain: '#2C2843',
+    Container: '#413C65',
+    ContainerHover: '#494370',
+    ContainerActive: '#50497B',
+    ContainerLine: '#575086',
+    OnContainer: '#E3E1F7',
+  },
+
+  Secondary: {
+    Main: '#FFFFFF',
+    MainHover: '#E5E5E5',
+    MainActive: '#D9D9D9',
+    MainLine: '#CCCCCC',
+    OnMain: '#1A1A1A',
+    Container: '#404040',
+    ContainerHover: '#4D4D4D',
+    ContainerActive: '#595959',
+    ContainerLine: '#666666',
+    OnContainer: '#F2F2F2',
+  },
+
+  Success: {
+    Main: '#85E0BA',
+    MainHover: '#70DBAF',
+    MainActive: '#66D9A9',
+    MainLine: '#5CD6A3',
+    OnMain: '#0F3D2A',
+    Container: '#175C3F',
+    ContainerHover: '#1A6646',
+    ContainerActive: '#1C704D',
+    ContainerLine: '#1F7A54',
+    OnContainer: '#CCF2E2',
+  },
+
+  Warning: {
+    Main: '#E3BA91',
+    MainHover: '#DFAF7E',
+    MainActive: '#DDA975',
+    MainLine: '#DAA36C',
+    OnMain: '#3F2A15',
+    Container: '#5E3F20',
+    ContainerHover: '#694624',
+    ContainerActive: '#734D27',
+    ContainerLine: '#7D542B',
+    OnContainer: '#F3E2D1',
+  },
+
+  Critical: {
+    Main: '#E69D9D',
+    MainHover: '#E28D8D',
+    MainActive: '#E08585',
+    MainLine: '#DE7D7D',
+    OnMain: '#401C1C',
+    Container: '#602929',
+    ContainerHover: '#6B2E2E',
+    ContainerActive: '#763333',
+    ContainerLine: '#803737',
+    OnContainer: '#F5D6D6',
+  },
+
+  Other: {
+    FocusRing: 'rgba(255, 255, 255, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(0, 0, 0, 0.8)',
+  },
+});