From 4612e887c6816379a27e8be184ac547b05e8c6ed Mon Sep 17 00:00:00 2001 From: Su Li Date: Wed, 15 Jan 2025 17:27:03 -0800 Subject: [PATCH 1/2] add borders to makeSdsSemanticAppTheme util --- .../src/core/styles/common/SDSAppTheme.ts | 207 +++++++----------- 1 file changed, 84 insertions(+), 123 deletions(-) diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts index 35ecbecf..597f6450 100644 --- a/packages/components/src/core/styles/common/SDSAppTheme.ts +++ b/packages/components/src/core/styles/common/SDSAppTheme.ts @@ -729,20 +729,6 @@ const sharedAppTheme: Omit = { }, }; -/** - * Create a SDS App Theme with custom colors that follows the SDS color model. - */ -export const makeSdsSemanticAppTheme = (colors: Colors): AppTheme => ({ - ...sharedAppTheme, - colors, -}); - -export const SDSLightAppTheme: AppTheme = - makeSdsSemanticAppTheme(SDSLightThemeColors); - -export const SDSDarkAppTheme: AppTheme = - makeSdsSemanticAppTheme(SDSDarkThemeColors); - // (mlila) whenever our theme uses colors, we need to make sure we allow consuming // applications to override those colors using their own custom theme. // By defining borders using SDSAppTheme.colors instead of defaultThemeColors, @@ -752,118 +738,93 @@ export const SDSDarkAppTheme: AppTheme = // // (masoudmanson): We need to define borders separately for light and dark themes // because the border colors are different for each theme. -SDSLightAppTheme.borders = { - accent: { - default: `1px solid ${SDSLightThemeColors.blue[500]}`, - focused: `1px solid ${SDSLightThemeColors.blue[500]}`, - hover: `1px solid ${SDSLightThemeColors.blue[600]}`, - open: `1px solid ${SDSLightThemeColors.blue[500]}`, - pressed: `1px solid ${SDSLightThemeColors.blue[700]}`, - selected: `1px solid ${SDSLightThemeColors.blue[500]}`, - }, - base: { - default: `1px solid ${SDSLightThemeColors.gray[500]}`, - disabled: `1px solid ${SDSLightThemeColors.gray[300]}`, - divider: `1px solid ${SDSLightThemeColors.gray[200]}`, - dividerInverse: `1px solid ${SDSLightThemeColors.gray[600]}`, - hover: `1px solid ${SDSLightThemeColors.gray[900]}`, - inverse: `1px solid ${SDSLightThemeColors.gray[50]}`, - pressed: `1px solid ${SDSLightThemeColors.gray[900]}`, - table: `1px solid ${SDSLightThemeColors.gray[300]}`, - }, - beta: { - default: `1px solid ${SDSLightThemeColors.purple[600]}`, - extraThick: `4px solid ${SDSLightThemeColors.purple[600]}`, - thick: `2px solid ${SDSLightThemeColors.purple[600]}`, - }, - info: { - default: `1px solid ${SDSLightThemeColors.blue[600]}`, - extraThick: `4px solid ${SDSLightThemeColors.blue[600]}`, - thick: `2px solid ${SDSLightThemeColors.blue[600]}`, - }, - link: { - dashed: `1px dashed`, - solid: `1px solid`, - }, - negative: { - default: `1px solid ${SDSLightThemeColors.red[600]}`, - extraThick: `4px solid ${SDSLightThemeColors.red[600]}`, - thick: `2px solid ${SDSLightThemeColors.red[600]}`, - }, - neutral: { - default: `1px solid ${SDSLightThemeColors.gray[500]}`, - extraThick: `4px solid ${SDSLightThemeColors.gray[500]}`, - thick: `2px solid ${SDSLightThemeColors.gray[500]}`, - }, - none: "none", - notice: { - default: `1px solid ${SDSLightThemeColors.yellow[600]}`, - extraThick: `4px solid ${SDSLightThemeColors.yellow[600]}`, - thick: `2px solid ${SDSLightThemeColors.yellow[600]}`, - }, - positive: { - default: `1px solid ${SDSLightThemeColors.green[600]}`, - extraThick: `4px solid ${SDSLightThemeColors.green[600]}`, - thick: `2px solid ${SDSLightThemeColors.green[600]}`, - }, -}; +export const createAppThemeBorders = (colors: Colors, isDarkMode: boolean) => { + let borderStyles = { + accent: { + default: `1px solid ${colors.blue[500]}`, + focused: `1px solid ${colors.blue[500]}`, + hover: `1px solid ${colors.blue[600]}`, + open: `1px solid ${colors.blue[500]}`, + pressed: `1px solid ${colors.blue[700]}`, + selected: `1px solid ${colors.blue[500]}`, + }, + base: { + default: `1px solid ${colors.gray[500]}`, + disabled: `1px solid ${colors.gray[300]}`, + divider: `1px solid ${colors.gray[200]}`, + dividerInverse: `1px solid ${colors.gray[600]}`, + hover: `1px solid ${colors.gray[900]}`, + inverse: `1px solid ${colors.gray[50]}`, + pressed: `1px solid ${colors.gray[900]}`, + table: `1px solid ${colors.gray[300]}`, + }, + beta: { + default: `1px solid ${colors.purple[600]}`, + extraThick: `4px solid ${colors.purple[600]}`, + thick: `2px solid ${colors.purple[600]}`, + }, + info: { + default: `1px solid ${colors.blue[600]}`, + extraThick: `4px solid ${colors.blue[600]}`, + thick: `2px solid ${colors.blue[600]}`, + }, + link: { + dashed: `1px dashed`, + solid: `1px solid`, + }, + negative: { + default: `1px solid ${colors.red[600]}`, + extraThick: `4px solid ${colors.red[600]}`, + thick: `2px solid ${colors.red[600]}`, + }, + neutral: { + default: `1px solid ${colors.gray[500]}`, + extraThick: `4px solid ${colors.gray[500]}`, + thick: `2px solid ${colors.gray[500]}`, + }, + none: 'none', + notice: { + default: `1px solid ${colors.yellow[600]}`, + extraThick: `4px solid ${colors.yellow[600]}`, + thick: `2px solid ${colors.yellow[600]}`, + }, + positive: { + default: `1px solid ${colors.green[600]}`, + extraThick: `4px solid ${colors.green[600]}`, + thick: `2px solid ${colors.green[600]}`, + }, + }; + // Dark theme specific changes to border colors + if (isDarkMode) { + borderStyles.accent = { + default: `1px solid ${colors.blue[600]}`, + focused: `1px solid ${colors.blue[600]}`, + hover: `1px solid ${colors.blue[700]}`, + open: `1px solid ${colors.blue[600]}`, + pressed: `1px solid ${colors.blue[800]}`, + selected: `1px solid ${colors.blue[600]}`, + }; + } -SDSDarkAppTheme.borders = { - accent: { - default: `1px solid ${SDSDarkThemeColors.blue[600]}`, - focused: `1px solid ${SDSDarkThemeColors.blue[600]}`, - hover: `1px solid ${SDSDarkThemeColors.blue[700]}`, - open: `1px solid ${SDSDarkThemeColors.blue[600]}`, - pressed: `1px solid ${SDSDarkThemeColors.blue[800]}`, - selected: `1px solid ${SDSDarkThemeColors.blue[600]}`, - }, - base: { - default: `1px solid ${SDSDarkThemeColors.gray[500]}`, - disabled: `1px solid ${SDSDarkThemeColors.gray[300]}`, - divider: `1px solid ${SDSDarkThemeColors.gray[200]}`, - dividerInverse: `1px solid ${SDSDarkThemeColors.gray[600]}`, - hover: `1px solid ${SDSDarkThemeColors.gray[900]}`, - inverse: `1px solid ${SDSDarkThemeColors.gray[50]}`, - pressed: `1px solid ${SDSDarkThemeColors.gray[900]}`, - table: `1px solid ${SDSDarkThemeColors.gray[300]}`, - }, - beta: { - default: `1px solid ${SDSDarkThemeColors.purple[600]}`, - extraThick: `4px solid ${SDSDarkThemeColors.purple[600]}`, - thick: `2px solid ${SDSDarkThemeColors.purple[600]}`, - }, - info: { - default: `1px solid ${SDSDarkThemeColors.blue[600]}`, - extraThick: `4px solid ${SDSDarkThemeColors.blue[600]}`, - thick: `2px solid ${SDSDarkThemeColors.blue[600]}`, - }, - link: { - dashed: `1px dashed`, - solid: `1px solid`, - }, - negative: { - default: `1px solid ${SDSDarkThemeColors.red[600]}`, - extraThick: `4px solid ${SDSDarkThemeColors.red[600]}`, - thick: `2px solid ${SDSDarkThemeColors.red[600]}`, - }, - neutral: { - default: `1px solid ${SDSDarkThemeColors.gray[500]}`, - extraThick: `4px solid ${SDSDarkThemeColors.gray[500]}`, - thick: `2px solid ${SDSDarkThemeColors.gray[500]}`, - }, - none: "none", - notice: { - default: `1px solid ${SDSDarkThemeColors.yellow[600]}`, - extraThick: `4px solid ${SDSDarkThemeColors.yellow[600]}`, - thick: `2px solid ${SDSDarkThemeColors.yellow[600]}`, - }, - positive: { - default: `1px solid ${SDSDarkThemeColors.green[600]}`, - extraThick: `4px solid ${SDSDarkThemeColors.green[600]}`, - thick: `2px solid ${SDSDarkThemeColors.green[600]}`, - }, + return borderStyles; }; + +/** + * Create a SDS App Theme with custom colors that follows the SDS color model. + */ +export const makeSdsSemanticAppTheme = (colors: Colors, isDarkTheme = false): AppTheme => ({ + ...sharedAppTheme, + colors, + borders: createAppThemeBorders(colors, isDarkTheme), +}); + +export const SDSLightAppTheme: AppTheme = + makeSdsSemanticAppTheme(SDSLightThemeColors); + +export const SDSDarkAppTheme: AppTheme = + makeSdsSemanticAppTheme(SDSDarkThemeColors, true); + /** * Helper function to select the appropriate theme settings. * From b22644d5880dc933f0413e2fc5de65b3061db222 Mon Sep 17 00:00:00 2001 From: Su Li Date: Fri, 17 Jan 2025 10:18:42 -0800 Subject: [PATCH 2/2] consolidate the border styling into a function with decoupled configurations --- .../src/core/styles/common/SDSAppTheme.ts | 97 ++++++++++--------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts index 597f6450..1f5d54fe 100644 --- a/packages/components/src/core/styles/common/SDSAppTheme.ts +++ b/packages/components/src/core/styles/common/SDSAppTheme.ts @@ -738,75 +738,76 @@ const sharedAppTheme: Omit = { // // (masoudmanson): We need to define borders separately for light and dark themes // because the border colors are different for each theme. +const BorderThickness = { + default: 1, + thick: 2, + extraThick: 4, +} as const; + export const createAppThemeBorders = (colors: Colors, isDarkMode: boolean) => { - let borderStyles = { + const createSolidBorder = ( + color: keyof Colors, + level: keyof Colors[keyof Colors], + thickness: keyof typeof BorderThickness + ) => `${BorderThickness[thickness]}px solid ${colors[color][level]}`; + + const createDashedBorder = () => `1px dashed`; + + return { accent: { - default: `1px solid ${colors.blue[500]}`, - focused: `1px solid ${colors.blue[500]}`, - hover: `1px solid ${colors.blue[600]}`, - open: `1px solid ${colors.blue[500]}`, - pressed: `1px solid ${colors.blue[700]}`, - selected: `1px solid ${colors.blue[500]}`, + default: createSolidBorder('blue', isDarkMode ? 600 : 500, 'default'), + focused: createSolidBorder('blue', isDarkMode ? 600 : 500, 'default'), + hover: createSolidBorder('blue', isDarkMode ? 700 : 600, 'default'), + open: createSolidBorder('blue', isDarkMode ? 600 : 500, 'default'), + pressed: createSolidBorder('blue', isDarkMode ? 800 : 700, 'default'), + selected: createSolidBorder('blue', isDarkMode ? 600 : 500, 'default'), }, base: { - default: `1px solid ${colors.gray[500]}`, - disabled: `1px solid ${colors.gray[300]}`, - divider: `1px solid ${colors.gray[200]}`, - dividerInverse: `1px solid ${colors.gray[600]}`, - hover: `1px solid ${colors.gray[900]}`, - inverse: `1px solid ${colors.gray[50]}`, - pressed: `1px solid ${colors.gray[900]}`, - table: `1px solid ${colors.gray[300]}`, + default: createSolidBorder('gray', 500, 'default'), + disabled: createSolidBorder('gray', 300, 'default'), + divider: createSolidBorder('gray', 200, 'default'), + dividerInverse: createSolidBorder('gray', 600, 'default'), + hover: createSolidBorder('gray', 900, 'default'), + inverse: createSolidBorder('gray', 50, 'default'), + pressed: createSolidBorder('gray', 900, 'default'), + table: createSolidBorder('gray', 300, 'default'), }, beta: { - default: `1px solid ${colors.purple[600]}`, - extraThick: `4px solid ${colors.purple[600]}`, - thick: `2px solid ${colors.purple[600]}`, + default: createSolidBorder('purple', 600, 'default'), + extraThick: createSolidBorder('purple', 600, 'extraThick'), + thick: createSolidBorder('purple', 600, 'thick'), }, info: { - default: `1px solid ${colors.blue[600]}`, - extraThick: `4px solid ${colors.blue[600]}`, - thick: `2px solid ${colors.blue[600]}`, + default: createSolidBorder('blue', 600, 'default'), + extraThick: createSolidBorder('blue', 600, 'extraThick'), + thick: createSolidBorder('blue', 600, 'thick'), }, link: { - dashed: `1px dashed`, - solid: `1px solid`, + dashed: createDashedBorder(), + solid: createSolidBorder('blue', 500, 'default'), }, negative: { - default: `1px solid ${colors.red[600]}`, - extraThick: `4px solid ${colors.red[600]}`, - thick: `2px solid ${colors.red[600]}`, + default: createSolidBorder('red', 600, 'default'), + extraThick: createSolidBorder('red', 600, 'extraThick'), + thick: createSolidBorder('red', 600, 'thick'), }, neutral: { - default: `1px solid ${colors.gray[500]}`, - extraThick: `4px solid ${colors.gray[500]}`, - thick: `2px solid ${colors.gray[500]}`, + default: createSolidBorder('gray', 500, 'default'), + extraThick: createSolidBorder('gray', 500, 'extraThick'), + thick: createSolidBorder('gray', 500, 'thick'), }, none: 'none', notice: { - default: `1px solid ${colors.yellow[600]}`, - extraThick: `4px solid ${colors.yellow[600]}`, - thick: `2px solid ${colors.yellow[600]}`, + default: createSolidBorder('yellow', 600, 'default'), + extraThick: createSolidBorder('yellow', 600, 'extraThick'), + thick: createSolidBorder('yellow', 600, 'thick'), }, positive: { - default: `1px solid ${colors.green[600]}`, - extraThick: `4px solid ${colors.green[600]}`, - thick: `2px solid ${colors.green[600]}`, + default: createSolidBorder('green', 600, 'default'), + extraThick: createSolidBorder('green', 600, 'extraThick'), + thick: createSolidBorder('green', 600, 'thick'), }, }; - // Dark theme specific changes to border colors - if (isDarkMode) { - borderStyles.accent = { - default: `1px solid ${colors.blue[600]}`, - focused: `1px solid ${colors.blue[600]}`, - hover: `1px solid ${colors.blue[700]}`, - open: `1px solid ${colors.blue[600]}`, - pressed: `1px solid ${colors.blue[800]}`, - selected: `1px solid ${colors.blue[600]}`, - }; - } - - return borderStyles; };