Update color theme to match with new design (#1821)

* update silver theme

* update unread badge style to look more slim

* update nav item style to look less sharp

* fix type focus message input typo

* decrease navigation drawer width to bring main chat layout to little more center

* increase sidebar width to make it less congested

* fix sidebar item style

* decrease dark theme contrast

* improve dark theme

* revert sidebar width change

* add join with address option in home context menu

* match legacy theme with latest themes

src/app/atoms/button/Toggle.scss

@@ -22,8 +22,7 @@
     height: 16px;
     background-color: var(--tc-surface-low);
     border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out,
+    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
-      opacity 200ms ease-in-out;
     opacity: 0.6;
   }
 
@@ -36,8 +35,8 @@
       @include dir.prop(transform, var(--ltr), var(--rtl));
 
       transform: translateX(calc(125%));
-      background-color: white;
+      background-color: var(--bg-surface);
       opacity: 1;
     }
   }
-}
+}

src/app/components/nav/NavItemContent.tsx

@@ -5,6 +5,6 @@ import * as css from './styles.css';
 
 export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
   ({ className, ...props }, ref) => (
-    <Text className={classNames(css.NavItemContent, className)} size="T400" {...props} ref={ref} />
+    <Text className={classNames(css.NavItemContent, className)} size="T300" {...props} ref={ref} />
   )
 );

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

@@ -52,7 +52,7 @@ const NavItemBase = style({
   backgroundColor: Container,
   color: OnContainer,
   outline: 'none',
-  minHeight: toRem(38),
+  minHeight: toRem(36),
 
   selectors: {
     '&:hover, &:focus-visible': {
@@ -111,6 +111,7 @@ export const NavItemContent = style({
   flexGrow: 1,
   display: 'flex',
   alignItems: 'center',
+  fontWeight: config.fontWeight.W500,
 
   selectors: {
     '&:hover': {

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

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 import { DefaultReset, color, config, toRem } from 'folds';
 
 export const PageNav = style({
-  width: toRem(280),
+  width: toRem(256),
 });
 
 export const PageNavHeader = style({

src/app/components/unread-badge/UnreadBadge.tsx

@@ -22,9 +22,9 @@ export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
     <Badge
       variant={highlight ? 'Success' : 'Secondary'}
       size={count > 0 ? '400' : '200'}
-      fill={count > 0 ? 'Solid' : 'Soft'}
+      fill="Solid"
       radii="Pill"
-      outlined
+      outlined={false}
     >
       {count > 0 && (
         <Text as="span" size="L400">

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

@@ -19,7 +19,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
       {...props}
       ref={ref}
     >
-      <Text size="O400" priority="400" truncate>
+      <Text size="O400" priority="300" truncate>
         {children}
       </Text>
     </Chip>

src/app/features/room/RoomView.tsx

@@ -22,7 +22,6 @@ import navigation from '../../../client/state/navigation';
 
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   const { code } = evt;
-  console.log(code);
   if (evt.metaKey || evt.altKey || evt.ctrlKey) {
     return false;
   }
@@ -77,7 +76,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         ) {
           return;
         }
-        if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v')) {
+        if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
           ReactEditor.focus(editor);
         }
       },

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

@@ -62,6 +62,11 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
     requestClose();
   };
 
+  const handleJoinAddress = () => {
+    openJoinAlias();
+    requestClose();
+  };
+
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -76,6 +81,16 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
             Mark as Read
           </Text>
         </MenuItem>
+        <MenuItem
+          onClick={handleJoinAddress}
+          size="300"
+          radii="300"
+          after={<Icon size="100" src={Icons.Link} />}
+        >
+          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+            Join with Address
+          </Text>
+        </MenuItem>
       </Box>
     </Menu>
   );

src/colors.css.ts

@@ -3,92 +3,92 @@ import { color } from 'folds';
 
 export const silverTheme = createTheme(color, {
   Background: {
-    Container: '#E6E6E6',
+    Container: '#DEDEDE',
-    ContainerHover: '#DADADA',
+    ContainerHover: '#D3D3D3',
-    ContainerActive: '#CECECE',
+    ContainerActive: '#C7C7C7',
-    ContainerLine: '#C2C2C2',
+    ContainerLine: '#BBBBBB',
     OnContainer: '#000000',
   },
 
   Surface: {
-    Container: '#F2F2F2',
+    Container: '#EAEAEA',
-    ContainerHover: '#E6E6E6',
+    ContainerHover: '#DEDEDE',
-    ContainerActive: '#DADADA',
+    ContainerActive: '#D3D3D3',
-    ContainerLine: '#CECECE',
+    ContainerLine: '#C7C7C7',
     OnContainer: '#000000',
   },
 
   SurfaceVariant: {
-    Container: '#E6E6E6',
+    Container: '#DEDEDE',
-    ContainerHover: '#DADADA',
+    ContainerHover: '#D3D3D3',
-    ContainerActive: '#CECECE',
+    ContainerActive: '#C7C7C7',
-    ContainerLine: '#C2C2C2',
+    ContainerLine: '#BBBBBB',
     OnContainer: '#000000',
   },
 
   Primary: {
-    Main: '#1858D5',
+    Main: '#1245A8',
-    MainHover: '#164FC0',
+    MainHover: '#103E97',
-    MainActive: '#144BB5',
+    MainActive: '#0F3B8F',
-    MainLine: '#1346AA',
+    MainLine: '#0E3786',
     OnMain: '#FFFFFF',
-    Container: '#E8EEFB',
+    Container: '#C4D0E9',
-    ContainerHover: '#DCE6F9',
+    ContainerHover: '#B8C7E5',
-    ContainerActive: '#D1DEF7',
+    ContainerActive: '#ACBEE1',
-    ContainerLine: '#C5D5F5',
+    ContainerLine: '#A0B5DC',
-    OnContainer: '#113E95',
+    OnContainer: '#0D3076',
   },
 
   Secondary: {
     Main: '#000000',
-    MainHover: '#0C0C0C',
+    MainHover: '#171717',
-    MainActive: '#181818',
+    MainActive: '#232323',
-    MainLine: '#303030',
+    MainLine: '#2F2F2F',
-    OnMain: '#F2F2F2',
+    OnMain: '#EAEAEA',
-    Container: '#CECECE',
+    Container: '#C7C7C7',
-    ContainerHover: '#C2C2C2',
+    ContainerHover: '#BBBBBB',
-    ContainerActive: '#B5B5B5',
+    ContainerActive: '#AFAFAF',
-    ContainerLine: '#A9A9A9',
+    ContainerLine: '#A4A4A4',
     OnContainer: '#0C0C0C',
   },
 
   Success: {
-    Main: '#00844C',
+    Main: '#017343',
-    MainHover: '#007744',
+    MainHover: '#01683C',
-    MainActive: '#007041',
+    MainActive: '#016239',
-    MainLine: '#006A3D',
+    MainLine: '#015C36',
     OnMain: '#FFFFFF',
-    Container: '#E5F3ED',
+    Container: '#BFDCD0',
-    ContainerHover: '#D9EDE4',
+    ContainerHover: '#B3D5C7',
-    ContainerActive: '#CCE6DB',
+    ContainerActive: '#A6CEBD',
-    ContainerLine: '#BFE0D2',
+    ContainerLine: '#99C7B4',
-    OnContainer: '#005C35',
+    OnContainer: '#01512F',
   },
 
   Warning: {
-    Main: '#A85400',
+    Main: '#864300',
-    MainHover: '#974C00',
+    MainHover: '#793C00',
-    MainActive: '#8F4700',
+    MainActive: '#723900',
-    MainLine: '#864300',
+    MainLine: '#6B3600',
     OnMain: '#FFFFFF',
-    Container: '#F6EEE5',
+    Container: '#E1D0BF',
-    ContainerHover: '#F2E5D9',
+    ContainerHover: '#DBC7B2',
-    ContainerActive: '#EEDDCC',
+    ContainerActive: '#D5BDA6',
-    ContainerLine: '#E9D4BF',
+    ContainerLine: '#CFB499',
-    OnContainer: '#763B00',
+    OnContainer: '#5E2F00',
   },
 
   Critical: {
-    Main: '#C40E0E',
+    Main: '#9D0F0F',
-    MainHover: '#AC0909',
+    MainHover: '#8D0E0E',
-    MainActive: '#A60C0C',
+    MainActive: '#850D0D',
-    MainLine: '#9C0B0B',
+    MainLine: '#7E0C0C',
     OnMain: '#FFFFFF',
-    Container: '#F9E7E7',
+    Container: '#E7C3C3',
-    ContainerHover: '#F6DBDB',
+    ContainerHover: '#E2B7B7',
-    ContainerActive: '#F3CFCF',
+    ContainerActive: '#DDABAB',
-    ContainerLine: '#F0C3C3',
+    ContainerLine: '#D89F9F',
-    OnContainer: '#890A0A',
+    OnContainer: '#6E0B0B',
   },
 
   Other: {
@@ -100,27 +100,27 @@ export const silverTheme = createTheme(color, {
 
 const darkThemeData = {
   Background: {
-    Container: '#15171A',
+    Container: '#1A1A1A',
-    ContainerHover: '#1F2326',
+    ContainerHover: '#262626',
-    ContainerActive: '#2A2E33',
+    ContainerActive: '#333333',
-    ContainerLine: '#343A40',
+    ContainerLine: '#404040',
-    OnContainer: '#ffffff',
+    OnContainer: '#F2F2F2',
   },
 
   Surface: {
-    Container: '#1F2326',
+    Container: '#262626',
-    ContainerHover: '#2A2E33',
+    ContainerHover: '#333333',
-    ContainerActive: '#343A40',
+    ContainerActive: '#404040',
-    ContainerLine: '#3F464D',
+    ContainerLine: '#4D4D4D',
-    OnContainer: '#ffffff',
+    OnContainer: '#F2F2F2',
   },
 
   SurfaceVariant: {
-    Container: '#2A2E33',
+    Container: '#333333',
-    ContainerHover: '#343A40',
+    ContainerHover: '#404040',
-    ContainerActive: '#3F464D',
+    ContainerActive: '#4D4D4D',
-    ContainerLine: '#495159',
+    ContainerLine: '#595959',
-    OnContainer: '#ffffff',
+    OnContainer: '#F2F2F2',
   },
 
   Primary: {
@@ -137,16 +137,16 @@ const darkThemeData = {
   },
 
   Secondary: {
-    Main: '#D1E8FF',
+    Main: '#FFFFFF',
-    MainHover: '#BCD1E5',
+    MainHover: '#E5E5E5',
-    MainActive: '#B2C5D9',
+    MainActive: '#D9D9D9',
-    MainLine: '#A7BACC',
+    MainLine: '#CCCCCC',
-    OnMain: '#15171A',
+    OnMain: '#1A1A1A',
-    Container: '#343A40',
+    Container: '#404040',
-    ContainerHover: '#3F464D',
+    ContainerHover: '#4D4D4D',
-    ContainerActive: '#495159',
+    ContainerActive: '#595959',
-    ContainerLine: '#545D66',
+    ContainerLine: '#666666',
-    OnContainer: '#C7DCF2',
+    OnContainer: '#F2F2F2',
   },
 
   Success: {

src/index.scss

@@ -19,25 +19,25 @@
   --bg-surface-active: rgba(0, 0, 0, 5%);
   --bg-surface-border: rgba(0, 0, 0, 6%);
 
-  --bg-primary: rgb(83, 110, 234);
+  --bg-primary: rgb(18, 69, 168);
-  --bg-primary-hover: rgba(83, 110, 234, 80%);
+  --bg-primary-hover: rgba(18, 69, 168, 80%);
-  --bg-primary-active: rgba(83, 110, 234, 70%);
+  --bg-primary-active: rgba(18, 69, 168, 70%);
-  --bg-primary-border: rgba(83, 110, 234, 38%);
+  --bg-primary-border: rgba(18, 69, 168, 38%);
 
-  --bg-positive: rgb(69, 184, 59);
+  --bg-positive: rgb(1, 115, 67);
-  --bg-positive-hover: rgba(69, 184, 59, 8%);
+  --bg-positive-hover: rgba(1, 115, 67, 8%);
-  --bg-positive-active: rgba(69, 184, 59, 15%);
+  --bg-positive-active: rgba(1, 115, 67, 15%);
-  --bg-positive-border: rgba(69, 184, 59, 40%);
+  --bg-positive-border: rgba(1, 115, 67, 40%);
 
-  --bg-caution: rgb(255, 179, 0);
+  --bg-caution: rgb(134, 67, 0);
-  --bg-caution-hover: rgba(255, 179, 0, 8%);
+  --bg-caution-hover: rgba(134, 67, 0, 8%);
-  --bg-caution-active: rgba(255, 179, 0, 15%);
+  --bg-caution-active: rgba(134, 67, 0, 15%);
-  --bg-caution-border: rgba(255, 179, 0, 40%);
+  --bg-caution-border: rgba(134, 67, 0, 40%);
 
-  --bg-danger: rgb(240, 71, 71);
+  --bg-danger: rgb(157, 15, 15);
-  --bg-danger-hover: rgba(240, 71, 71, 5%);
+  --bg-danger-hover: rgba(157, 15, 15, 5%);
-  --bg-danger-active: rgba(240, 71, 71, 10%);
+  --bg-danger-active: rgba(157, 15, 15, 10%);
-  --bg-danger-border: rgba(240, 71, 71, 20%);
+  --bg-danger-border: rgba(157, 15, 15, 20%);
 
   --bg-tooltip: #353535;
   --bg-badge: #989898;
@@ -56,16 +56,16 @@
   --tc-primary-low: rgba(255, 255, 255, 40%);
 
   --tc-positive-high: var(--bg-positive);
-  --tc-positive-normal: rgb(69, 184, 59, 80%);
+  --tc-positive-normal: rgb(1, 115, 67, 80%);
-  --tc-positive-low: rgb(69, 184, 59, 60%);
+  --tc-positive-low: rgb(1, 115, 67, 60%);
 
   --tc-caution-high: var(--bg-caution);
-  --tc-caution-normal: rgb(255, 179, 0, 80%);
+  --tc-caution-normal: rgb(134, 67, 0, 80%);
-  --tc-caution-low: rgb(255, 179, 0, 60%);
+  --tc-caution-low: rgb(134, 67, 0, 60%);
 
   --tc-danger-high: var(--bg-danger);
-  --tc-danger-normal: rgba(240, 71, 71, 88%);
+  --tc-danger-normal: rgba(157, 15, 15, 88%);
-  --tc-danger-low: rgba(240, 71, 71, 60%);
+  --tc-danger-low: rgba(157, 15, 15, 60%);
 
   --tc-code: #e62498;
   --tc-link: hsl(213deg 100% 45%);
@@ -78,12 +78,12 @@
   --ic-surface-low: #7c7c7c;
   --ic-primary-high: #ffffff;
   --ic-primary-normal: #ffffff;
-  --ic-positive-high: rgba(69, 184, 59);
+  --ic-positive-high: rgba(1, 115, 67);
-  --ic-positive-normal: rgba(69, 184, 59, 80%);
+  --ic-positive-normal: rgba(1, 115, 67, 80%);
-  --ic-caution-high: rgba(255, 179, 0);
+  --ic-caution-high: rgba(134, 67, 0);
-  --ic-caution-normal: rgba(255, 179, 0, 80%);
+  --ic-caution-normal: rgba(134, 67, 0, 80%);
-  --ic-danger-high: rgba(240, 71, 71);
+  --ic-danger-high: rgba(157, 15, 15);
-  --ic-danger-normal: rgba(240, 71, 71, 0.7);
+  --ic-danger-normal: rgba(157, 15, 15, 0.7);
 
   /* user mxid colors */
   --mx-uc-1: hsl(208, 100%, 45%);
@@ -210,20 +210,35 @@
 .dark-theme,
 .butter-theme {
   /* background color | --bg-[background type]: value */
-  --bg-surface: #1f2326;
+  --bg-surface: #262626;
-  --bg-surface-transparent: #1f232600;
+  --bg-surface-transparent: #26262600;
-  --bg-surface-low: #15171a;
+  --bg-surface-low: #1a1a1a;
-  --bg-surface-low-transparent: #15171a00;
+  --bg-surface-low-transparent: #1a1a1a00;
-  --bg-surface-extra-low: #15171a;
+  --bg-surface-extra-low: #1a1a1a;
-  --bg-surface-extra-low-transparent: #15171a00;
+  --bg-surface-extra-low-transparent: #1a1a1a00;
-  --bg-surface-hover: #1f2326;
+  --bg-surface-hover: #333333;
-  --bg-surface-active: #2a2e33;
+  --bg-surface-active: #404040;
-  --bg-surface-border: rgba(0, 0, 0, 20%);
+  --bg-surface-border: #404040;
 
-  --bg-primary: rgb(42, 98, 166);
+  --bg-primary: rgb(189, 182, 236);
-  --bg-primary-hover: rgba(42, 98, 166, 80%);
+  --bg-primary-hover: rgba(189, 182, 236, 0.8);
-  --bg-primary-active: rgba(42, 98, 166, 70%);
+  --bg-primary-active: rgba(189, 182, 236, 70%);
-  --bg-primary-border: rgba(42, 98, 166, 38%);
+  --bg-primary-border: rgba(189, 182, 236, 38%);
+
+  --bg-positive: rgb(133, 224, 186);
+  --bg-positive-hover: rgba(133, 224, 186, 8%);
+  --bg-positive-active: rgba(133, 224, 186, 15%);
+  --bg-positive-border: rgba(133, 224, 186, 40%);
+
+  --bg-caution: rgb(227, 186, 145);
+  --bg-caution-hover: rgba(227, 186, 145, 8%);
+  --bg-caution-active: rgba(227, 186, 145, 15%);
+  --bg-caution-border: rgba(227, 186, 145, 40%);
+
+  --bg-danger: rgb(230, 157, 157);
+  --bg-danger-hover: rgba(230, 157, 157, 5%);
+  --bg-danger-active: rgba(230, 157, 157, 10%);
+  --bg-danger-border: rgba(230, 157, 157, 20%);
 
   --bg-tooltip: #000;
   --bg-badge: hsl(0, 0%, 75%);
@@ -237,9 +252,21 @@
   --tc-surface-normal-low: rgba(255, 255, 255, 60%);
   --tc-surface-low: rgba(255, 255, 255, 58%);
 
-  --tc-primary-high: #ffffff;
+  --tc-primary-high: rgb(44, 40, 67);
-  --tc-primary-normal: rgba(255, 255, 255, 0.68);
+  --tc-primary-normal: rgba(44, 40, 67, 0.68);
-  --tc-primary-low: rgba(255, 255, 255, 0.4);
+  --tc-primary-low: rgba(44, 40, 67, 0.4);
+
+  --tc-positive-high: var(--bg-positive);
+  --tc-positive-normal: rgb(133, 224, 186, 80%);
+  --tc-positive-low: rgb(133, 224, 186, 60%);
+
+  --tc-caution-high: var(--bg-caution);
+  --tc-caution-normal: rgb(227, 186, 145, 80%);
+  --tc-caution-low: rgb(227, 186, 145, 60%);
+
+  --tc-danger-high: var(--bg-danger);
+  --tc-danger-normal: rgba(230, 157, 157, 88%);
+  --tc-danger-low: rgba(230, 157, 157, 60%);
 
   --tc-code: #e565b1;
   --tc-link: hsl(213deg 100% 80%);
@@ -249,7 +276,15 @@
   --ic-surface-high: rgb(255, 255, 255);
   --ic-surface-normal: rgba(255, 255, 255, 84%);
   --ic-surface-low: rgba(255, 255, 255, 64%);
-  --ic-primary-normal: #ffffff;
+  --ic-primary-high: var(--tc-primary-high);
+  --ic-primary-normal: var(--tc-primary-high);
+  --ic-primary-low: var(--tc-primary-high);
+  --ic-positive-high: rgba(133, 224, 186);
+  --ic-positive-normal: rgba(133, 224, 186, 80%);
+  --ic-caution-high: rgba(227, 186, 145);
+  --ic-caution-normal: rgba(227, 186, 145, 80%);
+  --ic-danger-high: rgba(230, 157, 157);
+  --ic-danger-normal: rgba(230, 157, 157, 0.7);
 
   --mx-uc-1: hsl(208, 100%, 75%);
   --mx-uc-2: hsl(301, 100%, 80%);
@@ -296,17 +331,20 @@
 
 .butter-theme {
   /* background color | --bg-[background type]: value */
-  --bg-surface: hsl(64, 6%, 14%);
+  --bg-surface: #262621;
-  --bg-surface-transparent: hsla(64, 6%, 14%, 0);
+  --bg-surface-transparent: #26262100;
-  --bg-surface-low: hsl(64, 6%, 10%);
+  --bg-surface-low: #1a1916;
-  --bg-surface-low-transparent: hsla(64, 6%, 10%, 0);
+  --bg-surface-low-transparent: #1a191600;
-  --bg-surface-extra-low: hsl(64, 6%, 8%);
+  --bg-surface-extra-low: #1a1916;
-  --bg-surface-extra-low-transparent: hsla(64, 6%, 8%, 0);
+  --bg-surface-extra-low-transparent: #1a1916;
+  --bg-surface-hover: #33322c;
+  --bg-surface-active: #403f38;
+  --bg-surface-border: #403f38;
 
   --bg-badge: #c4c1ab;
 
   /* text color | --tc-[background type]-[priority]: value */
-  --tc-surface-high: rgb(255, 251, 222, 94%);
+  --tc-surface-high: rgb(255, 251, 222);
   --tc-surface-normal: rgba(255, 251, 222, 94%);
   --tc-surface-normal-low: rgba(255, 251, 222, 60%);
   --tc-surface-low: rgba(255, 251, 222, 58%);