From ec7e49c8bbc62ae81a2fb5183e690e88e8f10457 Mon Sep 17 00:00:00 2001 From: Balaji Krishnamurthy <107975017+BKM14@users.noreply.github.com> Date: Thu, 13 Nov 2025 15:30:28 +0530 Subject: [PATCH] fix: minor color changes (#15616) Closes #15597 The `color` of `OnBoardingModalCircularIcon` was set to `gray`. Now it is set to `inverted` and it is displayed properly. I couldn't figure out how to reach the onboarding screen, so I created a temporary path and rendered the element there to verify the changes. Attaching screenshots of the same. Screenshot from 2025-11-05 00-11-05 Screenshot from 2025-11-05 00-10-32 Additionally, a border has been added to the color picker icons. Screenshot from 2025-11-05 00-12-23 I noticed that the dropdown after clicking on the icon also renders a bunch of colors. Do let me know if these need the same border as well. Screenshot from 2025-11-05 00-12-37 --------- Co-authored-by: bosiraphael --- .../ChartColorGradientOption.tsx | 4 +- .../ChartColorPaletteOption.tsx | 9 +++- .../OnboardingModalCircularIcon.tsx | 2 +- ...tingsDataModelFieldSelectFormOptionRow.tsx | 1 - .../display/color/components/ColorSample.tsx | 17 ++++--- ...tMainColorNameFromPaletteColorName.test.ts | 48 +++++++++++++++++++ .../getMainColorNameFromPaletteColorName.ts | 7 +++ packages/twenty-ui/src/utilities/index.ts | 1 + 8 files changed, 78 insertions(+), 11 deletions(-) create mode 100644 packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts create mode 100644 packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx index 2b9aa6b8b1..8a17ab0318 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx @@ -46,7 +46,9 @@ export const ChartColorGradientOption = ({ groupIndex: reversedIndex, totalGroups: COLOR_GROUP_COUNT, }); - return ; + return ( + + ); })} ); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx index f4f66c77a6..94b6e58ed9 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import { ColorSample } from 'twenty-ui/display'; import { MenuItemSelect } from 'twenty-ui/navigation'; import { type ThemeColor } from 'twenty-ui/theme'; +import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities'; type ChartColorPaletteOptionProps = { selectedItemId: string | null; @@ -36,7 +37,13 @@ export const ChartColorPaletteOption = ({ {paletteColors.map((paletteColorName) => { const baseColor = theme.color[paletteColorName] as string; - return ; + return ( + + ); })} ); diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx index 61e378e6f1..8b8af0cdf4 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx @@ -21,7 +21,7 @@ export const OnboardingModalCircularIcon = ({ Icon, }: OnboardingModalCircularIconProps) => { const theme = useTheme(); - const color = theme.grayScale.gray2; + const color = theme.background.invertedPrimary; return ( diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx index 8fe56568f9..8ca14e602a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx @@ -78,7 +78,6 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ isNewRow, }: SettingsDataModelFieldSelectFormOptionRowProps) => { const theme = useTheme(); - const SELECT_COLOR_DROPDOWN_ID = `select-color-dropdown-${option.id}`; const SELECT_ACTIONS_DROPDOWN_ID = `select-actions-dropdown-${option.id}`; diff --git a/packages/twenty-ui/src/display/color/components/ColorSample.tsx b/packages/twenty-ui/src/display/color/components/ColorSample.tsx index e693f19b33..9ec4eb063f 100644 --- a/packages/twenty-ui/src/display/color/components/ColorSample.tsx +++ b/packages/twenty-ui/src/display/color/components/ColorSample.tsx @@ -7,25 +7,28 @@ import { isDefined } from 'twenty-shared/utils'; export type ColorSampleVariant = 'default' | 'pipeline'; export type ColorSampleProps = { - colorName?: ThemeColor; + colorName: ThemeColor; color?: string; variant?: ColorSampleVariant; }; -const getColor = (theme: ThemeType, colorName?: ThemeColor, color?: string) => { +const getColor = (theme: ThemeType, colorName: ThemeColor, color?: string) => { if (isDefined(color)) { return color; } - if (isDefined(colorName)) { - return theme.tag.background[colorName]; - } - return 'transparent'; + + return theme.tag.background[colorName]; +}; + +const getBorderColor = (theme: ThemeType, colorName: ThemeColor) => { + return theme.tag.text[colorName]; }; const StyledColorSample = styled.div` background-color: ${({ theme, colorName, color }) => getColor(theme, colorName, color)}; - border: 1px solid ${({ theme }) => theme.border.color.transparentStrong}; + border: 1px solid + ${({ theme, colorName }) => getBorderColor(theme, colorName)}; border-radius: 60px; height: ${({ theme }) => theme.spacing(4)}; width: ${({ theme }) => theme.spacing(3)}; diff --git a/packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts b/packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts new file mode 100644 index 0000000000..85c2766454 --- /dev/null +++ b/packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts @@ -0,0 +1,48 @@ +import { getMainColorNameFromPaletteColorName } from '../getMainColorNameFromPaletteColorName'; + +describe('getMainColorNameFromPaletteColorName', () => { + it('should extract main color name from palette color names', () => { + expect(getMainColorNameFromPaletteColorName('purple5')).toBe('purple'); + expect(getMainColorNameFromPaletteColorName('blue8')).toBe('blue'); + expect(getMainColorNameFromPaletteColorName('red3')).toBe('red'); + expect(getMainColorNameFromPaletteColorName('orange12')).toBe('orange'); + expect(getMainColorNameFromPaletteColorName('yellow1')).toBe('yellow'); + expect(getMainColorNameFromPaletteColorName('crimson9')).toBe('crimson'); + expect(getMainColorNameFromPaletteColorName('violet7')).toBe('violet'); + expect(getMainColorNameFromPaletteColorName('iris4')).toBe('iris'); + expect(getMainColorNameFromPaletteColorName('grass6')).toBe('grass'); + expect(getMainColorNameFromPaletteColorName('mint5')).toBe('mint'); + expect(getMainColorNameFromPaletteColorName('lime3')).toBe('lime'); + expect(getMainColorNameFromPaletteColorName('bronze8')).toBe('bronze'); + expect(getMainColorNameFromPaletteColorName('gold2')).toBe('gold'); + expect(getMainColorNameFromPaletteColorName('pink1')).toBe('pink'); + expect(getMainColorNameFromPaletteColorName('turquoise2')).toBe( + 'turquoise', + ); + expect(getMainColorNameFromPaletteColorName('green10')).toBe('green'); + expect(getMainColorNameFromPaletteColorName('cyan11')).toBe('cyan'); + expect(getMainColorNameFromPaletteColorName('jade12')).toBe('jade'); + }); + + it('should handle color names without numbers', () => { + expect(getMainColorNameFromPaletteColorName('purple')).toBe('purple'); + expect(getMainColorNameFromPaletteColorName('blue')).toBe('blue'); + expect(getMainColorNameFromPaletteColorName('red')).toBe('red'); + expect(getMainColorNameFromPaletteColorName('orange')).toBe('orange'); + expect(getMainColorNameFromPaletteColorName('yellow')).toBe('yellow'); + expect(getMainColorNameFromPaletteColorName('crimson')).toBe('crimson'); + expect(getMainColorNameFromPaletteColorName('violet')).toBe('violet'); + expect(getMainColorNameFromPaletteColorName('iris')).toBe('iris'); + expect(getMainColorNameFromPaletteColorName('grass')).toBe('grass'); + expect(getMainColorNameFromPaletteColorName('mint')).toBe('mint'); + expect(getMainColorNameFromPaletteColorName('lime')).toBe('lime'); + expect(getMainColorNameFromPaletteColorName('bronze')).toBe('bronze'); + expect(getMainColorNameFromPaletteColorName('gold')).toBe('gold'); + expect(getMainColorNameFromPaletteColorName('pink')).toBe('pink'); + expect(getMainColorNameFromPaletteColorName('turquoise')).toBe('turquoise'); + expect(getMainColorNameFromPaletteColorName('green')).toBe('green'); + expect(getMainColorNameFromPaletteColorName('cyan')).toBe('cyan'); + expect(getMainColorNameFromPaletteColorName('jade')).toBe('jade'); + expect(getMainColorNameFromPaletteColorName('gray')).toBe('gray'); + }); +}); diff --git a/packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts b/packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts new file mode 100644 index 0000000000..9d5694028c --- /dev/null +++ b/packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts @@ -0,0 +1,7 @@ +import { type ThemeColor } from '@ui/theme'; + +export const getMainColorNameFromPaletteColorName = ( + paletteColorName: string, +): ThemeColor => { + return paletteColorName.replace(/\d+$/, '') as ThemeColor; +}; diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts index 83581fdc85..9513838988 100644 --- a/packages/twenty-ui/src/utilities/index.ts +++ b/packages/twenty-ui/src/utilities/index.ts @@ -15,6 +15,7 @@ export { AnimatedFadeOut } from './animation/components/AnimatedFadeOut'; export { AnimatedRotate } from './animation/components/AnimatedRotate'; export { AnimatedTextWord } from './animation/components/AnimatedTextWord'; export { AnimatedTranslation } from './animation/components/AnimatedTranslation'; +export { getMainColorNameFromPaletteColorName } from './color/utils/getMainColorNameFromPaletteColorName'; export { stringToThemeColor, stringToThemeColorP3String,