chore: sidebar-surface (#30707)

RocketChat · Oct 26, 2023 · 5bf9ef7 · 5bf9ef7
1 parent db96219
commit 5bf9ef7
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 85 deletions.
diff --git a/apps/meteor/client/sidebar/Sidebar.tsx b/apps/meteor/client/sidebar/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Palette } from '@rocket.chat/fuselage';
+import { Box } from '@rocket.chat/fuselage';
 import { useSessionStorage } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
 import React, { memo } from 'react';
@@ -20,8 +20,7 @@ const Sidebar = () => {
 	const [bannerDismissed, setBannerDismissed] = useSessionStorage('presence_cap_notifier', false);
 	const presenceDisabled = useSetting<boolean>('Presence_broadcast_disabled');
 
-	const sideBarBackground = css`
-		background-color: ${Palette.surface['surface-tint']};
+	const sidebarLink = css`
 		a {
 			text-decoration: none;
 		}
@@ -38,7 +37,7 @@ const Sidebar = () => {
 					'rcx-sidebar--main',
 					`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
 					sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
-					sideBarBackground,
+					sidebarLink,
 				].filter(Boolean)}
 				role='navigation'
 				data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
@@ -236,7 +236,7 @@
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "^0.35.0",
+		"@rocket.chat/fuselage": "^0.36.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/fuselage-polyfills": "next",
 		"@rocket.chat/fuselage-toastbar": "next",

diff --git a/ee/packages/ui-theming/package.json b/ee/packages/ui-theming/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/css-in-js": "next",
-		"@rocket.chat/fuselage": "^0.35.0",
+		"@rocket.chat/fuselage": "^0.36.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/icons": "^0.32.0",
 		"@rocket.chat/ui-contexts": "workspace:~",

diff --git a/ee/packages/ui-theming/src/palette.ts b/ee/packages/ui-theming/src/palette.ts
@@ -29,6 +29,7 @@ export const palette = [
 			{ name: 'surface-featured', token: '', color: '#5F1477' },
 			{ name: 'surface-featured-hover', token: '', color: '#4A105D' },
 			{ name: 'surface-overlay', token: '', color: 'rgba(47, 52, 61, 0.5)' },
+			{ name: 'surface-sidebar', token: 'N400', color: '#E4E7EA' },
 		],
 	},
 	{

diff --git a/ee/packages/ui-theming/src/paletteDark.ts b/ee/packages/ui-theming/src/paletteDark.ts
@@ -29,6 +29,7 @@ export const palette = [
 			{ name: 'surface-featured', token: '', color: '#5F1477' },
 			{ name: 'surface-featured-hover', token: '', color: '#4A105D' },
 			{ name: 'surface-overlay', token: '', color: 'rgba(0, 0, 0, 0.6)' },
+			{ name: 'surface-sidebar', token: '', color: '#2F343D' },
 		],
 	},
 	{
@@ -89,7 +90,7 @@ export const palette = [
 		list: [
 			{ name: 'badge-background-level-0', token: '', color: '#404754' },
 			{ name: 'badge-background-level-1', token: '', color: '#484C51' },
-			{ name: 'badge-background-level-2', token: '', color: '#3070CF' },
+			{ name: 'badge-background-level-2', token: '', color: '#2C65BA' },
 			{ name: 'badge-background-level-3', token: '', color: '#A9642D' },
 			{ name: 'badge-background-level-4', token: '', color: '#BB3E4E' },
 		],

diff --git a/ee/packages/ui-theming/src/paletteHighContrast.ts b/ee/packages/ui-theming/src/paletteHighContrast.ts
@@ -29,6 +29,7 @@ export const palette = [
 			{ name: 'surface-featured', token: '', color: '#5F1477' },
 			{ name: 'surface-featured-hover', token: '', color: '#4A105D' },
 			{ name: 'surface-overlay', token: '', color: 'rgba(47, 52, 61, 0.5)' },
+			{ name: 'surface-sidebar', token: 'N400', color: '#E4E7EA' },
 		],
 	},
 	{

diff --git a/ee/packages/ui-theming/src/sidebarPalette.ts b/ee/packages/ui-theming/src/sidebarPalette.ts
@@ -1,13 +1,4 @@
 export const palette = [
-	{
-		category: 'Surface',
-		description: 'Use as a container on top of the background',
-		list: [
-			{ name: 'surface-tint', token: '', color: '#262931' },
-			{ name: 'surface-hover', token: '', color: '#1B1D22' },
-			{ name: 'surface-selected', token: 'N900', color: '#31363F' },
-		],
-	},
 	{
 		category: 'Font',
 		description: 'These should be applied according to surfaces',
@@ -16,57 +7,6 @@ export const palette = [
 			{ name: 'font-default', token: '', color: '#9EA2A8' },
 		],
 	},
-	{
-		category: 'Status Bullet',
-		description: 'Used to show user status',
-		list: [
-			{ name: 'status-bullet-online', token: '', color: '#1CBF89' },
-			{ name: 'status-bullet-away', token: '', color: '#B08C30' },
-			{ name: 'status-bullet-busy', token: '', color: '#C75765' },
-			{ name: 'status-bullet-disabled', token: '', color: '#CC7F42' },
-			{ name: 'status-bullet-offline', token: '', color: '#8B9098' },
-			{ name: 'status-bullet-loading', token: '', color: '#8B9098' },
-		],
-	},
-	{
-		category: 'Badge',
-		description: 'Badge Background',
-		list: [
-			{ name: 'badge-background-level-0', token: '', color: '#404754' },
-			{ name: 'badge-background-level-1', token: '', color: '#484C51' },
-			{ name: 'badge-background-level-2', token: '', color: '#2C65BA' },
-			{ name: 'badge-background-level-3', token: '', color: '#955828' },
-			{ name: 'badge-background-level-4', token: '', color: '#B43C4C' },
-		],
-	},
-	{
-		category: 'Stroke',
-		description: "Use as component's outline, stroke, dividers",
-		list: [
-			{ name: 'stroke-light', token: '', color: '#333842' },
-			{ name: 'stroke-medium', token: '', color: '#324677' },
-		],
-	},
-	{
-		category: 'Button',
-		description: 'Secondary Background',
-		list: [
-			{ name: 'button-background-secondary-default', token: '', color: '#0D0F11' },
-			{ name: 'button-background-secondary-hover', token: '', color: '#3A404B' },
-			{ name: 'button-background-secondary-press', token: '', color: '#4C5362' },
-			{ name: 'button-background-secondary-focus', token: '', color: '#0D0F11' },
-			{ name: 'button-background-secondary-keyfocus', token: '', color: '#2F343D' },
-			{ name: 'button-background-secondary-disabled', token: '', color: '#2F343D' },
-		],
-	},
-	{
-		description: 'Font',
-		list: [
-			{ name: 'button-font-on-secondary', token: '', color: '#E4E7EA' },
-			{ name: 'button-font-on-secondary-disabled', token: '', color: '#6C727A' },
-			{ name: 'button-icon-disabled-color', token: '', color: '#6C727A' },
-		],
-	},
 ];
 
 export const defaultSidebarPalette = {

diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@rocket.chat/apps-engine": "1.41.0-alpha.290",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.35.0",
+    "@rocket.chat/fuselage": "^0.36.0",
     "@rocket.chat/fuselage-hooks": "^0.32.1",
     "@rocket.chat/fuselage-polyfills": "next",
     "@rocket.chat/icons": "^0.32.0",

diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.9",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "next",
-		"@rocket.chat/fuselage": "^0.35.0",
+		"@rocket.chat/fuselage": "^0.36.0",
 		"@rocket.chat/fuselage-tokens": "^0.32.0",
 		"@rocket.chat/message-parser": "next",
 		"@rocket.chat/styled": "next",

diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
@@ -5,7 +5,7 @@
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
 		"@rocket.chat/css-in-js": "next",
-		"@rocket.chat/fuselage": "^0.35.0",
+		"@rocket.chat/fuselage": "^0.36.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/icons": "^0.32.0",
 		"@rocket.chat/mock-providers": "workspace:^",

diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json
@@ -5,7 +5,7 @@
   "devDependencies": {
     "@babel/core": "~7.22.9",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.35.0",
+    "@rocket.chat/fuselage": "^0.36.0",
     "@rocket.chat/icons": "^0.32.0",
     "@storybook/addon-actions": "~6.5.16",
     "@storybook/addon-docs": "~6.5.16",

diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.9",
 		"@rocket.chat/css-in-js": "next",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/fuselage": "^0.35.0",
+		"@rocket.chat/fuselage": "^0.36.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/icons": "^0.32.0",
 		"@rocket.chat/styled": "next",

diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
@@ -15,7 +15,7 @@
     "@codemirror/tooltip": "^0.19.16",
     "@lezer/highlight": "^1.1.6",
     "@rocket.chat/css-in-js": "next",
-    "@rocket.chat/fuselage": "^0.35.0",
+    "@rocket.chat/fuselage": "^0.36.0",
     "@rocket.chat/fuselage-hooks": "^0.32.1",
     "@rocket.chat/fuselage-polyfills": "next",
     "@rocket.chat/fuselage-tokens": "^0.32.0",

diff --git a/yarn.lock b/yarn.lock
@@ -8232,7 +8232,7 @@ __metadata:
   dependencies:
     "@rocket.chat/apps-engine": 1.41.0-alpha.290
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/fuselage-polyfills": next
     "@rocket.chat/gazzodown": "workspace:^"
@@ -8281,9 +8281,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/fuselage@npm:^0.35.0":
-  version: 0.35.0
-  resolution: "@rocket.chat/fuselage@npm:0.35.0"
+"@rocket.chat/fuselage@npm:^0.36.0":
+  version: 0.36.0
+  resolution: "@rocket.chat/fuselage@npm:0.36.0"
   dependencies:
     "@rocket.chat/css-in-js": ^0.31.25
     "@rocket.chat/css-supports": ^0.31.25
@@ -8301,7 +8301,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 46deea587a1ab4c80a25f4e93882905e2f24778c0e612b7cdd18bfb0c72b2c079d4eee6fe7ad4c52a62354197ebed0a62eaf939b5714859b7086c923668f3f05
+  checksum: 8554f90e1641e415a1fa4a30f72d05366cb986c1b2ab35e7143217bc017184567a04d947cc6c17be33320b1d1c922fbd1083c1c5f5ac880b15ae5beef01fdb6a
   languageName: node
   linkType: hard
 
@@ -8312,7 +8312,7 @@ __metadata:
     "@babel/core": ~7.22.9
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-tokens": ^0.32.0
     "@rocket.chat/message-parser": next
     "@rocket.chat/styled": next
@@ -8658,7 +8658,7 @@ __metadata:
     "@rocket.chat/favicon": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/fuselage-polyfills": next
     "@rocket.chat/fuselage-toastbar": next
@@ -9522,7 +9522,7 @@ __metadata:
   dependencies:
     "@babel/core": ~7.22.9
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/icons": ^0.32.0
     "@rocket.chat/mock-providers": "workspace:^"
@@ -9573,7 +9573,7 @@ __metadata:
   dependencies:
     "@babel/core": ~7.22.9
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/icons": ^0.32.0
     "@storybook/addon-actions": ~6.5.16
     "@storybook/addon-docs": ~6.5.16
@@ -9644,7 +9644,7 @@ __metadata:
   resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming"
   dependencies:
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/icons": ^0.32.0
     "@rocket.chat/ui-contexts": "workspace:~"
@@ -9687,7 +9687,7 @@ __metadata:
     "@rocket.chat/css-in-js": next
     "@rocket.chat/emitter": next
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/icons": ^0.32.0
     "@rocket.chat/styled": next
@@ -9730,7 +9730,7 @@ __metadata:
     "@codemirror/tooltip": ^0.19.16
     "@lezer/highlight": ^1.1.6
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.35.0
+    "@rocket.chat/fuselage": ^0.36.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/fuselage-polyfills": next
     "@rocket.chat/fuselage-tokens": ^0.32.0