From 957e70c7e092e845908f540c23d91cbc693e52aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?= <60678893+juliajforesti@users.noreply.github.com> Date: Tue, 28 Nov 2023 19:30:51 -0300 Subject: [PATCH] chore: remove sidebar palette in favor of dark palette (#30920) --- .../ui-theming/src/SidebarPaletteStyleTag.tsx | 11 +-- ee/packages/ui-theming/src/paletteDark.ts | 4 +- ee/packages/ui-theming/src/sidebarPalette.ts | 26 ------ .../ui-theming/src/sidebarPaletteDark.ts | 88 ------------------- 4 files changed, 3 insertions(+), 126 deletions(-) delete mode 100644 ee/packages/ui-theming/src/sidebarPalette.ts delete mode 100644 ee/packages/ui-theming/src/sidebarPaletteDark.ts diff --git a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx index 593f8ab2cdf..3b1ab550096 100644 --- a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx @@ -5,18 +5,9 @@ import { createPortal } from 'react-dom'; import { convertToCss } from './helpers/convertToCss'; import { useCreateStyleContainer } from './hooks/useCreateStyleContainer'; import { darkPalette } from './paletteDark'; -import { defaultSidebarPalette } from './sidebarPalette'; export const SidebarPaletteStyleTag = memo(function SidebarPaletteStyleTag(): ReactElement | null { - // Commented code below: sidebar palette currently the same in both themes. - - // const [, , theme] = useThemeMode(); - // const palette = convertToCss( - // theme === 'dark' ? filterOnlyChangedColors(darkPalette, sidebarPaletteDark) : { ...darkPalette, ...defaultSidebarPalette }, - // '.rcx-sidebar--main', - // ); - - const palette = convertToCss({ ...darkPalette, ...defaultSidebarPalette }, '.rcx-sidebar--main'); + const palette = convertToCss({ ...darkPalette }, '.rcx-sidebar--main'); return <>{createPortal(palette, useCreateStyleContainer('sidebar-palette'))}; }); diff --git a/ee/packages/ui-theming/src/paletteDark.ts b/ee/packages/ui-theming/src/paletteDark.ts index f8db2983def..e36133650a6 100644 --- a/ee/packages/ui-theming/src/paletteDark.ts +++ b/ee/packages/ui-theming/src/paletteDark.ts @@ -24,7 +24,7 @@ export const palette = [ { name: 'surface-neutral', token: '', color: '#2D3039' }, { name: 'surface-disabled', token: 'N800', color: '#24272E' }, { name: 'surface-hover', token: '', color: '#1A1E23' }, - { name: 'surface-selected', token: 'N700', color: '#3C3F44' }, + { name: 'surface-selected', token: '', color: '#4C5362' }, { name: 'surface-dark', token: 'N400', color: '#E4E7EA' }, { name: 'surface-featured', token: '', color: '#5F1477' }, { name: 'surface-featured-hover', token: '', color: '#4A105D' }, @@ -49,7 +49,7 @@ export const palette = [ { name: 'font-annotation', token: 'N600', color: '#9EA2A8' }, { name: 'font-hint', token: 'N600', color: '#9EA2A8' }, { name: 'font-secondary-info', token: '', color: '#9EA2A8' }, - { name: 'font-default', token: 'N400', color: '#E4E7EA' }, + { name: 'font-default', token: 'N400', color: '#C1C7D0' }, { name: 'font-titles-labels', token: '', color: '#F2F3F5' }, { name: 'font-info', token: '', color: '#739EDE' }, { name: 'font-danger', token: '', color: '#D88892' }, diff --git a/ee/packages/ui-theming/src/sidebarPalette.ts b/ee/packages/ui-theming/src/sidebarPalette.ts deleted file mode 100644 index 4fb673383b3..00000000000 --- a/ee/packages/ui-theming/src/sidebarPalette.ts +++ /dev/null @@ -1,26 +0,0 @@ -export const palette = [ - { - category: 'Font', - description: 'These should be applied according to surfaces', - list: [ - { name: 'font-titles-labels', token: '', color: '#E4E7EA' }, - { name: 'font-default', token: '', color: '#9EA2A8' }, - ], - }, -]; - -export const defaultSidebarPalette = { - ...palette.reduce( - (rec, group) => ({ - ...rec, - ...group.list.reduce( - (rec, item) => ({ - ...rec, - [item.name]: item.color, - }), - {} as Record, - ), - }), - {} as Record, - ), -}; diff --git a/ee/packages/ui-theming/src/sidebarPaletteDark.ts b/ee/packages/ui-theming/src/sidebarPaletteDark.ts deleted file mode 100644 index 2b7801f118f..00000000000 --- a/ee/packages/ui-theming/src/sidebarPaletteDark.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { darkPalette } from './paletteDark'; - -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', - list: [ - { name: 'font-titles-labels', token: '', color: '#E4E7EA' }, - { 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 sidebarPaletteDark = { - ...palette.reduce( - (rec, group) => ({ - ...rec, - ...group.list.reduce( - (rec, item) => ({ - ...rec, - [item.name]: item.color, - }), - {} as Record, - ), - }), - { ...darkPalette } as Record, - ), -};