From 90bdf5eb313a06660c0bbd4cf0adff5250e916cc Mon Sep 17 00:00:00 2001 From: Zishan Ahmad Date: Thu, 22 Aug 2024 23:31:36 +0530 Subject: [PATCH 01/14] separated commonColors, radius and contrastParams at root level --- .../SurfaceMenu/SurfaceMenu.styles.js | 2 +- .../src/hooks/useDisplayNameColor.js | 2 +- .../layout_editor/src/theme/DefaultTheme.js | 31 ++--- .../src/views/ChatHeader/ChatHeader.styles.js | 2 +- .../src/views/ChatInput/ChatInput.styles.js | 6 +- .../src/views/LayoutEditor.style.js | 2 +- .../Message/BubbleVariant/Bubble.styles.js | 28 ++--- .../src/views/Message/Message.styles.js | 6 +- .../react/src/hooks/useDisplayNameColor.js | 2 +- packages/react/src/theme/AzureSky.js | 18 +-- .../src/theme/CurveVariant/AquaBreeze.js | 47 ++++---- .../react/src/theme/CurveVariant/AzureSky.js | 49 ++++---- .../src/theme/CurveVariant/BlushCandy.js | 47 ++++---- .../src/theme/CurveVariant/PineWhisper.js | 48 ++++---- packages/react/src/theme/DefaultTheme.js | 20 +-- packages/react/src/theme/MintMeadow.js | 18 +-- .../src/theme/ModernVariant/StormySeas.js | 114 +++++++++--------- packages/react/src/theme/RoseEmber.js | 18 +-- .../AttachmentPreview/PreviewType/image.js | 2 +- .../views/ChannelState/ChannelState.styles.js | 2 +- .../src/views/ChatInput/ChatInput.styles.js | 4 +- .../react/src/views/EmbeddedChat.styles.js | 2 +- .../views/EmojiPicker/EmojiPicker.styles.js | 4 +- .../views/ImageGallery/ImageGallery.styles.js | 4 +- .../views/LinkPreview/LinkPreview.styles.js | 2 +- .../Message/BubbleVariant/Bubble.styles.js | 28 ++--- .../react/src/views/Message/Message.styles.js | 6 +- .../views/QuoteMessage/QuoteMessage.styles.js | 2 +- .../UserInformation/UserInformation.styles.js | 2 +- packages/react/tools/theme-generator.js | 17 +-- .../src/components/Avatar/Avatar.styles.js | 4 +- .../src/components/Button/Button.styles.js | 2 +- .../components/CheckBox/CheckBox.styles.js | 2 +- .../src/components/Divider/Divider.styles.js | 2 +- .../src/components/Input/Input.styles.js | 2 +- .../MessageGenericPreview.styles.js | 2 +- .../src/components/Modal/Modal.styles.js | 4 +- .../MultiSelect/MultiSelect.styles.js | 2 +- .../src/components/Popup/Popup.styles.js | 4 +- .../src/components/Sidebar/Sidebar.styles.js | 2 +- .../components/Skeleton/Skeleton.styles.js | 2 +- .../StaticSelect/StaticSelect.styles.js | 2 +- .../components/ToastBar/ToastBar.styles.js | 4 +- .../src/components/Tooltip/Tooltip.styles.js | 2 +- .../ui-elements/src/theme/DefaultTheme.js | 12 +- 45 files changed, 263 insertions(+), 320 deletions(-) diff --git a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js index 1d86eaf16..a3c858cce 100644 --- a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js +++ b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js @@ -6,7 +6,7 @@ export const getSurfaceItemStyles = ({ theme, colors }) => { width: 24px; height: 24px; border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `, itemContainer: css` diff --git a/packages/layout_editor/src/hooks/useDisplayNameColor.js b/packages/layout_editor/src/hooks/useDisplayNameColor.js index 043ca8a89..e5590898d 100644 --- a/packages/layout_editor/src/hooks/useDisplayNameColor.js +++ b/packages/layout_editor/src/hooks/useDisplayNameColor.js @@ -15,7 +15,7 @@ const useDisplayNameColor = () => { const getDisplayNameColor = (username) => { const hash = simpleHash(username); - const { saturation, luminance } = theme.schemes.contrastParams[mode]; + const { saturation, luminance } = theme.contrastParams[mode]; const hue = Math.abs(hash) % 360; return `hsl(${hue}, ${saturation}%, ${luminance}%)`; }; diff --git a/packages/layout_editor/src/theme/DefaultTheme.js b/packages/layout_editor/src/theme/DefaultTheme.js index 8752e2e4a..88d102103 100644 --- a/packages/layout_editor/src/theme/DefaultTheme.js +++ b/packages/layout_editor/src/theme/DefaultTheme.js @@ -1,20 +1,10 @@ const DefaultTheme = { + radius: '0.2rem', + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, schemes: { - radius: '0.2rem', - contrastParams: { - light: { - saturation: 70, - luminance: 19, - }, - dark: { - saturation: 88, - luminance: 77, - }, - }, - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(240, 10%, 3.9%)', @@ -71,6 +61,17 @@ const DefaultTheme = { }, }, + contrastParams: { + light: { + saturation: 70, + luminance: 19, + }, + dark: { + saturation: 88, + luminance: 77, + }, + }, + typography: { default: { fontFamily: "'Times New Roman', serif", diff --git a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js index 570a7e989..37b28b6b1 100644 --- a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js +++ b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js @@ -48,7 +48,7 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => { width: 24px; height: 24px; border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `, }; diff --git a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js index 92855c1b0..fc10cadb8 100644 --- a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js +++ b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js @@ -5,7 +5,7 @@ export const getChatInputStyles = ({ theme, colors }) => { const styles = { inputWithFormattingBox: css` border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; margin: 0.5rem 2rem 1rem 2rem; &.focused { border: ${`1.5px solid ${colors.ring}`}; @@ -61,7 +61,7 @@ export const getChatInputToolbarStyles = ({ theme, mode, colors }) => { position: relative; flex-direction: row; gap: 0.375rem; - border-radius: 0 0 ${theme.schemes.radius} ${theme.schemes.radius}; + border-radius: 0 0 ${theme.radius} ${theme.radius}; `, }; @@ -84,7 +84,7 @@ export const getFormatterStyles = ({ theme, colors }) => { box-shadow: 0 0 2px ${colors.foreground}; gap: 0.25rem; padding: 0.25rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `, }; diff --git a/packages/layout_editor/src/views/LayoutEditor.style.js b/packages/layout_editor/src/views/LayoutEditor.style.js index 61451c36b..184b9e65b 100644 --- a/packages/layout_editor/src/views/LayoutEditor.style.js +++ b/packages/layout_editor/src/views/LayoutEditor.style.js @@ -11,7 +11,7 @@ export const getEditorStyles = ({ theme, colors }) => { flex: 1; flex-direction: column; border: ${`1.5px solid ${theme.schemes.border}`}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; overflow: hidden; `, diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js index 0bc6c7ce0..37d4a9c32 100644 --- a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js +++ b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js @@ -36,8 +36,8 @@ export const bubbleStyles = ({ theme, colors }) => { width: fit-content; max-width: 80%; padding: 0.5rem 0.75rem; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} - ${theme.schemes.radius} 0.2rem; + border-radius: ${theme.radius} ${theme.radius} + ${theme.radius} 0.2rem; background: ${colors.primary}; color: ${colors.primaryForeground}; &:hover { @@ -49,16 +49,16 @@ export const bubbleStyles = ({ theme, colors }) => { position: relative; width: fit-content; max-width: 80%; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} - ${theme.schemes.radius} 0.2rem; + border-radius: ${theme.radius} ${theme.radius} + ${theme.radius} 0.2rem; `, sequential: css` - border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius} + border-radius: 0.2rem ${theme.radius} ${theme.radius} 0.2rem; `, lastSequential: css` - border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius}; + border-radius: 0.2rem ${theme.radius} ${theme.radius}; `, metricsContainer: css` @@ -141,25 +141,25 @@ export const bubbleStylesMe = (customTheme) => { messageBodyMe: css` background: ${colors.secondary}; color: ${colors.secondaryForeground}; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem + ${theme.radius}; &:hover { background: ${alpha(colors.secondary, 0.8)}; } `, attachmentBodyMe: css` - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem + ${theme.radius}; `, lastSequentialMe: css` - border-radius: ${theme.schemes.radius} 0.2rem ${theme.schemes.radius} - ${theme.schemes.radius}; + border-radius: ${theme.radius} 0.2rem ${theme.radius} + ${theme.radius}; `, sequentialMe: css` - border-radius: ${theme.schemes.radius} 0.2rem 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} 0.2rem 0.2rem + ${theme.radius}; `, metricsContainerMe: css` diff --git a/packages/layout_editor/src/views/Message/Message.styles.js b/packages/layout_editor/src/views/Message/Message.styles.js index 680062c99..eb5952176 100644 --- a/packages/layout_editor/src/views/Message/Message.styles.js +++ b/packages/layout_editor/src/views/Message/Message.styles.js @@ -103,7 +103,7 @@ export const getMessageDividerStyles = ({ theme, colors }) => { position: absolute; left: 50%; transform: translateX(-50%); - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `, bar: css` @@ -161,7 +161,7 @@ export const getMessageHeaderStyles = ({ theme, colors }) => { font-size: 0.75rem; padding: 0 0.25rem; margin: 0 0.1rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; font-weight: 700; line-height: 1rem; overflow: hidden; @@ -280,7 +280,7 @@ export const getMessageToolboxStyles = ({ theme, colors }) => { box-shadow: 0 0 2px ${colors.foreground}; gap: 0.25rem; padding: 0.25rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `, emojiPickerStyles: css` diff --git a/packages/react/src/hooks/useDisplayNameColor.js b/packages/react/src/hooks/useDisplayNameColor.js index 5e9c32c07..89880c434 100644 --- a/packages/react/src/hooks/useDisplayNameColor.js +++ b/packages/react/src/hooks/useDisplayNameColor.js @@ -16,7 +16,7 @@ const useDisplayNameColor = () => { const getDisplayNameColor = (username) => { const hash = simpleHash(username); - const { saturation, luminance } = theme.schemes.contrastParams[mode]; + const { saturation, luminance } = theme.contrastParams[mode]; const hue = Math.abs(hash) % 360; return `hsl(${hue}, ${saturation}%, ${luminance}%)`; }; diff --git a/packages/react/src/theme/AzureSky.js b/packages/react/src/theme/AzureSky.js index f0bee5f73..d60cbc7bd 100644 --- a/packages/react/src/theme/AzureSky.js +++ b/packages/react/src/theme/AzureSky.js @@ -1,10 +1,10 @@ const AzureSky = { + radius: '0.2rem', + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, schemes: { - radius: '0.2rem', - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(222.2, 84%, 4.9%)', @@ -60,14 +60,6 @@ const AzureSky = { infoForeground: 'hsl(214.4, 75.8%, 19.4%)', }, }, - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - components: {}, typography: { default: { diff --git a/packages/react/src/theme/CurveVariant/AquaBreeze.js b/packages/react/src/theme/CurveVariant/AquaBreeze.js index 63f6c4cf5..96b8007ef 100644 --- a/packages/react/src/theme/CurveVariant/AquaBreeze.js +++ b/packages/react/src/theme/CurveVariant/AquaBreeze.js @@ -1,4 +1,9 @@ const AquaBreeze = { + radius: '1.5rem', + commonColors: { + black: 'hsl(0, 0%, 0%)', + white: 'hsl(0, 0%, 100%)', + }, schemes: { light: { background: 'hsl(192, 52%, 96%)', @@ -54,34 +59,8 @@ const AquaBreeze = { info: 'hsl(214.3, 77.8%, 92.9%)', infoForeground: 'hsl(214.4, 75.8%, 19.4%)', }, - common: { - black: 'hsl(0, 0%, 0%)', - white: 'hsl(0, 0%, 100%)', - }, - radius: '1.5rem', }, - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - variants: { - Message: 'bubble', - }, - - components: { - MessageToolbox: { - configOverrides: { - optionConfig: { - surfaceItems: ['reaction', 'reply', 'quote', 'star'], - menuItems: ['pin', 'edit', 'delete', 'report'], - }, - }, - }, - }, typography: { default: { fontFamily: "'Times New Roman', serif", @@ -116,10 +95,26 @@ const AquaBreeze = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px', ], + + variants: { + Message: 'bubble', + }, + + components: { + MessageToolbox: { + configOverrides: { + optionConfig: { + surfaceItems: ['reaction', 'reply', 'quote', 'star'], + menuItems: ['pin', 'edit', 'delete', 'report'], + }, + }, + }, + }, }; export default AquaBreeze; diff --git a/packages/react/src/theme/CurveVariant/AzureSky.js b/packages/react/src/theme/CurveVariant/AzureSky.js index 618e8a353..5e6fe1626 100644 --- a/packages/react/src/theme/CurveVariant/AzureSky.js +++ b/packages/react/src/theme/CurveVariant/AzureSky.js @@ -1,10 +1,12 @@ const AzureSky = { + radius: '1.5rem', + + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, + schemes: { - radius: '1.5rem', - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(222.2, 84%, 4.9%)', @@ -60,27 +62,6 @@ const AzureSky = { infoForeground: 'hsl(214.4, 75.8%, 19.4%)', }, }, - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - variants: { - Message: 'bubble', - }, - - components: { - MessageToolbox: { - configOverrides: { - optionConfig: { - surfaceItems: ['reaction', 'reply', 'quote', 'star'], - menuItems: ['pin', 'edit', 'delete', 'report'], - }, - }, - }, - }, typography: { default: { @@ -116,10 +97,26 @@ const AzureSky = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px', ], + + variants: { + Message: 'bubble', + }, + + components: { + MessageToolbox: { + configOverrides: { + optionConfig: { + surfaceItems: ['reaction', 'reply', 'quote', 'star'], + menuItems: ['pin', 'edit', 'delete', 'report'], + }, + }, + }, + }, }; export default AzureSky; diff --git a/packages/react/src/theme/CurveVariant/BlushCandy.js b/packages/react/src/theme/CurveVariant/BlushCandy.js index a10e03762..61c1eaeb9 100644 --- a/packages/react/src/theme/CurveVariant/BlushCandy.js +++ b/packages/react/src/theme/CurveVariant/BlushCandy.js @@ -1,4 +1,9 @@ const BlushCandy = { + radius: '1.5rem', + commonColors: { + black: 'hsl(0, 0%, 0%)', + white: 'hsl(0, 0%, 100%)', + }, schemes: { light: { background: 'hsl(313, 52%, 96%)', @@ -54,32 +59,6 @@ const BlushCandy = { info: 'hsl(214.3, 77.8%, 92.9%)', infoForeground: 'hsl(214.4, 75.8%, 19.4%)', }, - common: { - black: 'hsl(0, 0%, 0%)', - white: 'hsl(0, 0%, 100%)', - }, - radius: '1.5rem', - }, - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - variants: { - Message: 'bubble', - }, - - components: { - MessageToolbox: { - configOverrides: { - optionConfig: { - surfaceItems: ['reaction', 'reply', 'quote', 'star'], - menuItems: ['pin', 'edit', 'delete', 'report'], - }, - }, - }, }, typography: { @@ -116,10 +95,26 @@ const BlushCandy = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px', ], + + variants: { + Message: 'bubble', + }, + + components: { + MessageToolbox: { + configOverrides: { + optionConfig: { + surfaceItems: ['reaction', 'reply', 'quote', 'star'], + menuItems: ['pin', 'edit', 'delete', 'report'], + }, + }, + }, + }, }; export default BlushCandy; diff --git a/packages/react/src/theme/CurveVariant/PineWhisper.js b/packages/react/src/theme/CurveVariant/PineWhisper.js index 5a6fc0a4b..885f9a647 100644 --- a/packages/react/src/theme/CurveVariant/PineWhisper.js +++ b/packages/react/src/theme/CurveVariant/PineWhisper.js @@ -1,4 +1,9 @@ const PineWhisper = { + radius: '1.5rem', + commonColors: { + black: 'hsl(0, 0%, 0%)', + white: 'hsl(0, 0%, 100%)', + }, schemes: { light: { background: 'hsl(0, 0%, 100%)', @@ -54,33 +59,6 @@ const PineWhisper = { info: 'hsl(214.3, 77.8%, 92.9%)', infoForeground: 'hsl(214.4, 75.8%, 19.4%)', }, - common: { - black: 'hsl(0, 0%, 0%)', - white: 'hsl(0, 0%, 100%)', - }, - radius: '1.5rem', - }, - - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - variants: { - Message: 'bubble', - }, - - components: { - MessageToolbox: { - configOverrides: { - optionConfig: { - surfaceItems: ['reaction', 'reply', 'quote', 'star'], - menuItems: ['pin', 'edit', 'delete', 'report'], - }, - }, - }, }, typography: { @@ -117,10 +95,26 @@ const PineWhisper = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px', ], + + variants: { + Message: 'bubble', + }, + + components: { + MessageToolbox: { + configOverrides: { + optionConfig: { + surfaceItems: ['reaction', 'reply', 'quote', 'star'], + menuItems: ['pin', 'edit', 'delete', 'report'], + }, + }, + }, + }, }; export default PineWhisper; diff --git a/packages/react/src/theme/DefaultTheme.js b/packages/react/src/theme/DefaultTheme.js index 6c3eeca9e..0a2fe776c 100644 --- a/packages/react/src/theme/DefaultTheme.js +++ b/packages/react/src/theme/DefaultTheme.js @@ -1,10 +1,10 @@ const DefaultTheme = { + radius: '0.2rem', + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, schemes: { - radius: '0.2rem', - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(240, 10%, 3.9%)', @@ -61,15 +61,6 @@ const DefaultTheme = { }, }, - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - components: {}, - typography: { default: { fontFamily: "'Times New Roman', serif", @@ -101,6 +92,7 @@ const DefaultTheme = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', diff --git a/packages/react/src/theme/MintMeadow.js b/packages/react/src/theme/MintMeadow.js index 4146c9c09..d0b97983e 100644 --- a/packages/react/src/theme/MintMeadow.js +++ b/packages/react/src/theme/MintMeadow.js @@ -1,19 +1,12 @@ const MintMeadow = { - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, + radius: '0.2rem', + + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', }, - components: {}, schemes: { - radius: '0.2rem', - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(98, 28%, 95%)', foreground: 'hsl(98, 5%, 8%)', @@ -104,6 +97,7 @@ const MintMeadow = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', diff --git a/packages/react/src/theme/ModernVariant/StormySeas.js b/packages/react/src/theme/ModernVariant/StormySeas.js index 67e1d864c..d59456cc6 100644 --- a/packages/react/src/theme/ModernVariant/StormySeas.js +++ b/packages/react/src/theme/ModernVariant/StormySeas.js @@ -1,20 +1,12 @@ const StormySeas = { + radius: '0.2rem', + + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, + schemes: { - radius: '0.2rem', - contrastParams: { - light: { - saturation: 70, - luminance: 19, - }, - dark: { - saturation: 88, - luminance: 77, - }, - }, - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(222.2, 84%, 4.9%)', @@ -71,51 +63,14 @@ const StormySeas = { }, }, - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, - }, - - variants: { - MessageHeader: 'colorize', - PinnedMessages: { - viewType: 'Popup', - }, - ThreadedMessages: { - viewType: 'Popup', - }, - - MentionedMessages: { - viewType: 'Popup', - }, - StarredMessages: { - viewType: 'Popup', - }, - - FileGallery: { - viewType: 'Popup', + contrastParams: { + light: { + saturation: 70, + luminance: 19, }, - }, - - components: { - ChatHeader: { - configOverrides: { - optionConfig: { - surfaceItems: [ - 'minmax', - 'close', - 'thread', - 'mentions', - 'starred', - 'pinned', - 'files', - ], - menuItems: ['members', 'search', 'rInfo', 'logout'], - }, - }, + dark: { + saturation: 88, + luminance: 77, }, }, @@ -153,10 +108,51 @@ const StormySeas = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px', ], + + variants: { + MessageHeader: 'colorize', + PinnedMessages: { + viewType: 'Popup', + }, + ThreadedMessages: { + viewType: 'Popup', + }, + + MentionedMessages: { + viewType: 'Popup', + }, + StarredMessages: { + viewType: 'Popup', + }, + + FileGallery: { + viewType: 'Popup', + }, + }, + + components: { + ChatHeader: { + configOverrides: { + optionConfig: { + surfaceItems: [ + 'minmax', + 'close', + 'thread', + 'mentions', + 'starred', + 'pinned', + 'files', + ], + menuItems: ['members', 'search', 'rInfo', 'logout'], + }, + }, + }, + }, }; export default StormySeas; diff --git a/packages/react/src/theme/RoseEmber.js b/packages/react/src/theme/RoseEmber.js index 69ced5bc4..197682c17 100644 --- a/packages/react/src/theme/RoseEmber.js +++ b/packages/react/src/theme/RoseEmber.js @@ -1,19 +1,12 @@ const RoseEmber = { - breakpoints: { - xs: 0, - sm: 600, - md: 900, - lg: 1200, - xl: 1536, + radius: '0.2rem', + + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', }, - components: {}, schemes: { - radius: '0.2rem', - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(343.4, 63%, 95%)', foreground: 'hsl(343.4, 5%, 10%)', @@ -104,6 +97,7 @@ const RoseEmber = { fontWeight: 500, }, }, + shadows: [ 'none', 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', diff --git a/packages/react/src/views/AttachmentPreview/PreviewType/image.js b/packages/react/src/views/AttachmentPreview/PreviewType/image.js index 7f27dc0e4..5c2d3b4d8 100644 --- a/packages/react/src/views/AttachmentPreview/PreviewType/image.js +++ b/packages/react/src/views/AttachmentPreview/PreviewType/image.js @@ -11,7 +11,7 @@ function PreviewImage({ previewURL }) { style={{ maxWidth: '90%', objectFit: 'contain', - borderRadius: theme.schemes.radius, + borderRadius: theme.radius, }} /> diff --git a/packages/react/src/views/ChannelState/ChannelState.styles.js b/packages/react/src/views/ChannelState/ChannelState.styles.js index b18a82c69..ddcfb7ecc 100644 --- a/packages/react/src/views/ChannelState/ChannelState.styles.js +++ b/packages/react/src/views/ChannelState/ChannelState.styles.js @@ -18,7 +18,7 @@ const useChannelStateStyles = () => { padding: 1.5px 5px; justify-content: center; align-items: center; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; color: ${colors.secondaryForeground}; `; diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js index cd20819cf..070295a47 100644 --- a/packages/react/src/views/ChatInput/ChatInput.styles.js +++ b/packages/react/src/views/ChatInput/ChatInput.styles.js @@ -5,7 +5,7 @@ export const useChatInputStyles = () => { const { theme, colors } = useTheme(); const inputWithFormattingBox = css` border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; margin: 0.5rem 2rem 1rem 2rem; &.focused { border: ${`1.5px solid ${colors.ring}`}; @@ -76,7 +76,7 @@ export const useChatInputFormattingToolbarStyles = () => { position: relative; flex-direction: row; gap: 0.375rem; - border-radius: 0 0 ${theme.schemes.radius} ${theme.schemes.radius}; + border-radius: 0 0 ${theme.radius} ${theme.radius}; `; return { chatFormat }; diff --git a/packages/react/src/views/EmbeddedChat.styles.js b/packages/react/src/views/EmbeddedChat.styles.js index 4297ef33e..88343d416 100644 --- a/packages/react/src/views/EmbeddedChat.styles.js +++ b/packages/react/src/views/EmbeddedChat.styles.js @@ -7,7 +7,7 @@ export const styles = { display: flex; flex-direction: column; border: ${`1.5px solid ${theme.schemes[dark ? 'dark' : 'light'].border}`}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; overflow: hidden; `, fullscreen: css` diff --git a/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js b/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js index e65bf7876..de4bc3314 100644 --- a/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js +++ b/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js @@ -23,14 +23,14 @@ const useEmojiPickerStyles = () => { --epr-highlight-color: ${calculatedColors}; --epr-focus-bg-color: ${calculatedColors}; --epr-horizontal-padding: 10px; - --epr-picker-border-radius: ${theme.schemes.radius}; + --epr-picker-border-radius: ${theme.radius}; --epr-search-border-color: var(--epr-highlight-color); --epr-header-padding: 15px var(--epr-horizontal-padding); --epr-active-skin-tone-indicator-border-color: var(--epr-highlight-color); --epr-active-skin-hover-color: var(--epr-hover-bg-color); --epr-search-input-bg-color-active: var(--epr-search-input-bg-color); --epr-search-input-padding: 0 30px; - --epr-search-input-border-radius: ${theme.schemes.radius}; + --epr-search-input-border-radius: ${theme.radius}; --epr-search-input-height: 40px; --epr-search-input-text-color: var(--epr-text-color); --epr-search-input-placeholder-color: var(--epr-text-color); diff --git a/packages/react/src/views/ImageGallery/ImageGallery.styles.js b/packages/react/src/views/ImageGallery/ImageGallery.styles.js index d2cd56485..b69f3dae2 100644 --- a/packages/react/src/views/ImageGallery/ImageGallery.styles.js +++ b/packages/react/src/views/ImageGallery/ImageGallery.styles.js @@ -11,7 +11,7 @@ const useImageGalleryStyles = () => { width: 100%; height: 100%; z-index: 1500; - background-color: ${alpha(theme.schemes.common.black, 0.5)}; + background-color: ${alpha(theme.commonColors.black, 0.5)}; `; const exit = css` @@ -21,7 +21,7 @@ const useImageGalleryStyles = () => { background: ${colors.primary}; color: ${colors.primaryForeground}; border: none; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; padding: 8px 16px; cursor: pointer; z-index: 1501; diff --git a/packages/react/src/views/LinkPreview/LinkPreview.styles.js b/packages/react/src/views/LinkPreview/LinkPreview.styles.js index bbc3e33cf..4fbc01306 100644 --- a/packages/react/src/views/LinkPreview/LinkPreview.styles.js +++ b/packages/react/src/views/LinkPreview/LinkPreview.styles.js @@ -12,7 +12,7 @@ const useLinkPreviewStyles = () => { const linkPreviewContainer = css` max-width: 16rem; border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; margin-bottom: 0.75rem; overflow: hidden; `; diff --git a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js index dcf49f821..b05ed1376 100644 --- a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js +++ b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js @@ -38,8 +38,8 @@ export const bubbleStyles = (customTheme) => { width: fit-content; max-width: 80%; padding: 0.5rem 0.75rem; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} - ${theme.schemes.radius} 0.2rem; + border-radius: ${theme.radius} ${theme.radius} + ${theme.radius} 0.2rem; background: ${colors.primary}; color: ${colors.primaryForeground}; &:hover { @@ -51,16 +51,16 @@ export const bubbleStyles = (customTheme) => { position: relative; width: fit-content; max-width: 80%; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} - ${theme.schemes.radius} 0.2rem; + border-radius: ${theme.radius} ${theme.radius} + ${theme.radius} 0.2rem; `, sequential: css` - border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius} + border-radius: 0.2rem ${theme.radius} ${theme.radius} 0.2rem; `, lastSequential: css` - border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius}; + border-radius: 0.2rem ${theme.radius} ${theme.radius}; `, metricsContainer: css` @@ -145,25 +145,25 @@ export const bubbleStylesMe = (customTheme) => { messageBodyMe: css` background: ${colors.secondary}; color: ${colors.secondaryForeground}; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem + ${theme.radius}; &:hover { background: ${alpha(colors.secondary, 0.8)}; } `, attachmentBodyMe: css` - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem + ${theme.radius}; `, lastSequentialMe: css` - border-radius: ${theme.schemes.radius} 0.2rem ${theme.schemes.radius} - ${theme.schemes.radius}; + border-radius: ${theme.radius} 0.2rem ${theme.radius} + ${theme.radius}; `, sequentialMe: css` - border-radius: ${theme.schemes.radius} 0.2rem 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} 0.2rem 0.2rem + ${theme.radius}; `, metricsContainerMe: css` diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index 80a7f1553..25b49130a 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/packages/react/src/views/Message/Message.styles.js @@ -94,7 +94,7 @@ export const useMessageDividerStyles = () => { position: absolute; left: 50%; transform: translateX(-50%); - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `; const bar = css` @@ -152,7 +152,7 @@ export const useMessageHeaderStyles = () => { font-size: 0.75rem; padding: 0 0.25rem; margin: 0 0.1rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; font-weight: 700; line-height: 1rem; overflow: hidden; @@ -273,7 +273,7 @@ export const useMessageToolboxStyles = () => { box-shadow: 0 0 2px ${colors.foreground}; gap: 0.25rem; padding: 0.25rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `; const emojiPickerStyles = css` diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js index 16a0bfc2e..b261b83a2 100644 --- a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js +++ b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js @@ -12,7 +12,7 @@ const useQuoteMessageStyles = () => { padding: 0.5rem; z-index: 1200; border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `; const avatarContainer = css` diff --git a/packages/react/src/views/UserInformation/UserInformation.styles.js b/packages/react/src/views/UserInformation/UserInformation.styles.js index 58e57699c..0e1eb86a9 100644 --- a/packages/react/src/views/UserInformation/UserInformation.styles.js +++ b/packages/react/src/views/UserInformation/UserInformation.styles.js @@ -21,7 +21,7 @@ const useUserInformationStyles = () => { font-size: 0.75rem; padding: 0 0.25rem; margin: 0 0.1rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; font-weight: 700; line-height: 1rem; overflow: hidden; diff --git a/packages/react/tools/theme-generator.js b/packages/react/tools/theme-generator.js index 428ae0f31..c862991eb 100644 --- a/packages/react/tools/theme-generator.js +++ b/packages/react/tools/theme-generator.js @@ -98,7 +98,8 @@ const cssString = ` // Add hardcoded colors and other properties const otherProps = { - common: { + radius: '0.2rem', + commonColors: { black: 'hsl(0, 0%, 0%)', white: 'hsl(0, 0%, 100%)', }, @@ -118,7 +119,6 @@ const otherProps = { info: 'hsl(214.3, 77.8%, 92.9%)', infoForeground: 'hsl(214.4, 75.8%, 19.4%)', }, - radius: '0.2rem', typography: { default: { fontFamily: "'Times New Roman', serif", @@ -158,19 +158,10 @@ const otherProps = { 'rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px', 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px', ], - zIndex: { - divider: 1000, - body: 1100, - general: 1200, - menu: 1300, - tooltip: 1400, - modal: 1500, - toastbar: 1600, - }, }; const themeObject = parseCSS(cssString); -themeObject.schemes.common = otherProps.common; +themeObject.commonColors = otherProps.commonColors; themeObject.schemes.light = { ...themeObject.schemes.light, ...otherProps.light, @@ -179,7 +170,7 @@ themeObject.schemes.dark = { ...themeObject.schemes.dark, ...otherProps.dark, }; -themeObject.schemes.radius = otherProps.radius; +themeObject.radius = otherProps.radius; themeObject.typography = otherProps.typography; themeObject.shadows = otherProps.shadows; themeObject.zIndex = otherProps.zIndex; diff --git a/packages/ui-elements/src/components/Avatar/Avatar.styles.js b/packages/ui-elements/src/components/Avatar/Avatar.styles.js index 3a9983282..481c919a3 100644 --- a/packages/ui-elements/src/components/Avatar/Avatar.styles.js +++ b/packages/ui-elements/src/components/Avatar/Avatar.styles.js @@ -4,7 +4,7 @@ import useTheme from '../../hooks/useTheme'; export const useAvatarStyles = () => { const { theme, colors } = useTheme(); const imageAvatar = (size) => css` - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; height: ${size}; width: ${size}; `; @@ -15,7 +15,7 @@ export const useAvatarStyles = () => { align-items: center; background-color: ${colors.primary}; color: ${colors.primaryForeground}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; height: ${size}; width: ${size}; `; diff --git a/packages/ui-elements/src/components/Button/Button.styles.js b/packages/ui-elements/src/components/Button/Button.styles.js index 25e1d05ed..1afab3b3f 100644 --- a/packages/ui-elements/src/components/Button/Button.styles.js +++ b/packages/ui-elements/src/components/Button/Button.styles.js @@ -35,7 +35,7 @@ const useButtonStyles = (type, size) => { text-overflow: ellipsis; white-space: nowrap; align-self: flex-start; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; &.ec-button--small { font-size: 0.75rem; font-weight: 700; diff --git a/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js b/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js index e197a2839..d3ce08f22 100644 --- a/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js +++ b/packages/ui-elements/src/components/CheckBox/CheckBox.styles.js @@ -12,7 +12,7 @@ const useCheckBoxStyles = (checked) => { width: 1rem; box-sizing: border-box; border: ${!checked ? `2px solid ${colors.border}` : `none`}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; cursor: pointer; outline: none; &:active { diff --git a/packages/ui-elements/src/components/Divider/Divider.styles.js b/packages/ui-elements/src/components/Divider/Divider.styles.js index 629eda4b7..54322f5b0 100644 --- a/packages/ui-elements/src/components/Divider/Divider.styles.js +++ b/packages/ui-elements/src/components/Divider/Divider.styles.js @@ -7,7 +7,7 @@ const useDividerStyles = () => { height: 2px; margin: 0 8px 8px; border: 0; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; background-color: ${colors.secondary}; `; diff --git a/packages/ui-elements/src/components/Input/Input.styles.js b/packages/ui-elements/src/components/Input/Input.styles.js index 132912f80..33971760b 100644 --- a/packages/ui-elements/src/components/Input/Input.styles.js +++ b/packages/ui-elements/src/components/Input/Input.styles.js @@ -25,7 +25,7 @@ const useInputStyles = () => { line-height: 1.25rem; overflow: hidden; text-overflow: ellipsis; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; box-shadow: none; border: 1px solid ${colors.border}; outline: none; diff --git a/packages/ui-elements/src/components/MessageGenericPreview/MessageGenericPreview.styles.js b/packages/ui-elements/src/components/MessageGenericPreview/MessageGenericPreview.styles.js index 0916ff840..a6faa0d15 100644 --- a/packages/ui-elements/src/components/MessageGenericPreview/MessageGenericPreview.styles.js +++ b/packages/ui-elements/src/components/MessageGenericPreview/MessageGenericPreview.styles.js @@ -10,7 +10,7 @@ export const useMessageGenericPreviewStyles = () => { flex-direction: column; padding: 0.75rem; border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; background-color: ${colors.background}; `; diff --git a/packages/ui-elements/src/components/Modal/Modal.styles.js b/packages/ui-elements/src/components/Modal/Modal.styles.js index 8ef5b11c1..71f93e1bd 100644 --- a/packages/ui-elements/src/components/Modal/Modal.styles.js +++ b/packages/ui-elements/src/components/Modal/Modal.styles.js @@ -17,7 +17,7 @@ export const useModalstyles = () => { padding: 0.5rem; color: ${colors.foreground}; background: ${colors.background}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -41,7 +41,7 @@ export const useModalBackdropStyles = () => { top: 0; right: 0; z-index: ${theme.zIndex?.modal || 1500}; - background: ${alpha(theme.schemes.common.black, 0.5)}; + background: ${alpha(theme.commonColors.black, 0.5)}; width: 100%; height: 100%; `; diff --git a/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js b/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js index bc72d9704..6ff6ec4e1 100644 --- a/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js +++ b/packages/ui-elements/src/components/MultiSelect/MultiSelect.styles.js @@ -28,7 +28,7 @@ const useMultiSelectStyles = () => { border-width: 1px; border-color: ${colors.border}; border-style: solid; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; background-color: ${colors.background}; `, diff --git a/packages/ui-elements/src/components/Popup/Popup.styles.js b/packages/ui-elements/src/components/Popup/Popup.styles.js index 0f3eaf840..fa956fa71 100644 --- a/packages/ui-elements/src/components/Popup/Popup.styles.js +++ b/packages/ui-elements/src/components/Popup/Popup.styles.js @@ -11,7 +11,7 @@ export const usePopupStyles = () => { flex-direction: column; z-index: ${theme.zIndex?.modal || 1500}; box-shadow: ${theme.shadows[2]}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; background: ${colors.background}; border: 1px solid ${colors.border}; width: ${width}; @@ -56,7 +56,7 @@ export const usePopupHeaderStyles = () => { align-items: center; justify-content: space-around; border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; position: relative; margin: 0 1rem; &.focused { diff --git a/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js b/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js index 84617a076..1f55f3bcb 100644 --- a/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js +++ b/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js @@ -48,7 +48,7 @@ const useSidebarStyles = () => { justify-content: space-between; border: 1px solid ${colors.border}; padding: 0 0.5rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; position: relative; margin: 0 1rem 1rem; &.focused { diff --git a/packages/ui-elements/src/components/Skeleton/Skeleton.styles.js b/packages/ui-elements/src/components/Skeleton/Skeleton.styles.js index 09cb136f8..43f87c2de 100644 --- a/packages/ui-elements/src/components/Skeleton/Skeleton.styles.js +++ b/packages/ui-elements/src/components/Skeleton/Skeleton.styles.js @@ -22,7 +22,7 @@ const useSkeletonStyles = () => { height: 1.2em; animation: ${animation} 1s linear 0s infinite running; border-radius: 0.25rem; - background: ${lighten(theme.schemes.common.black, 2)}; + background: ${lighten(theme.commonColors.black, 2)}; &.text { height: auto; diff --git a/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js b/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js index f0767930c..f1f1129fc 100644 --- a/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js +++ b/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js @@ -28,7 +28,7 @@ const useStaticSelectStyles = () => { border-width: 1px; border-color: ${colors.border}; border-style: solid; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; background-color: ${colors.background}; `, diff --git a/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js b/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js index 731ea006b..e2b139ca7 100644 --- a/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js +++ b/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js @@ -26,7 +26,7 @@ export const toastbarStyles = { max-width: 20rem; color: ${color}; background-color: ${bgColor}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; padding: 0.75em 1em; z-index: ${theme.zIndex?.toastbar || 1600}; animation: ${animation} ${time}ms ease-in-out forwards; @@ -37,7 +37,7 @@ export const toastBarContainerStyles = { container: (theme) => css` position: absolute; z-index: ${theme.zIndex?.toastbar || 1600}; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; animation: ${animation} ${2000}ms ease-in-out forwards; `, }; diff --git a/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js b/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js index 8ca69fbf0..31bed3482 100644 --- a/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js +++ b/packages/ui-elements/src/components/Tooltip/Tooltip.styles.js @@ -10,7 +10,7 @@ const useTooltipStyles = (position) => { background-color: ${invertedColors.secondary}; color: ${invertedColors.secondaryForeground}; padding: 8.5px; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: ${theme.zIndex?.tooltip || 1400}; font-size: 12.5px; diff --git a/packages/ui-elements/src/theme/DefaultTheme.js b/packages/ui-elements/src/theme/DefaultTheme.js index 5fa9eb270..2859cd048 100644 --- a/packages/ui-elements/src/theme/DefaultTheme.js +++ b/packages/ui-elements/src/theme/DefaultTheme.js @@ -1,10 +1,12 @@ const DefaultTheme = { + radius: '0.2rem', + + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, + schemes: { - radius: '0.2rem', - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(240, 10%, 3.9%)', From 322e5b2bd5040a176b45c021c681ea7028543a75 Mon Sep 17 00:00:00 2001 From: Zishan Ahmad Date: Fri, 23 Aug 2024 00:10:12 +0530 Subject: [PATCH 02/14] changed theme structure --- .../src/context/ThemeContextProvider.js | 15 +++++++++++---- packages/ui-elements/src/hooks/useTheme.js | 16 ++++++++++------ 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/ui-elements/src/context/ThemeContextProvider.js b/packages/ui-elements/src/context/ThemeContextProvider.js index 084a1a9e4..30d4f129b 100644 --- a/packages/ui-elements/src/context/ThemeContextProvider.js +++ b/packages/ui-elements/src/context/ThemeContextProvider.js @@ -17,6 +17,15 @@ export const ThemeProvider = ({ const colors = theme.schemes?.[mode]; const invertedColors = theme.schemes?.[invertMode(mode)]; + const modifiedTheme = useMemo(() => { + const { schemes, ...restParams } = theme; + return { + ...restParams, + colors, + invertedColors, + }; + }, [theme, colors, invertedColors]); + useEffect(() => { if (initialTheme) { setTheme(initialTheme); @@ -31,14 +40,12 @@ export const ThemeProvider = ({ const value = useMemo( () => ({ - theme, + theme: modifiedTheme, mode, - colors, - invertedColors, setMode, setTheme, }), - [theme, mode, colors, invertedColors] + [modifiedTheme, mode] ); return ( diff --git a/packages/ui-elements/src/hooks/useTheme.js b/packages/ui-elements/src/hooks/useTheme.js index 79233dd30..b3dfe3ba0 100644 --- a/packages/ui-elements/src/hooks/useTheme.js +++ b/packages/ui-elements/src/hooks/useTheme.js @@ -9,15 +9,19 @@ const useTheme = () => { if (!context) { const defaultMode = 'light'; - const defaultTheme = DefaultTheme; - const colors = defaultTheme.schemes?.[defaultMode]; - const invertedColors = defaultTheme.schemes?.[invertMode(defaultMode)]; + const { schemes, ...restParams } = DefaultTheme; + const colors = schemes?.[defaultMode]; + const invertedColors = schemes?.[invertMode(defaultMode)]; - return { - theme: defaultTheme, - mode: defaultMode, + const theme = { + ...restParams, colors, invertedColors, + }; + + return { + theme: theme, + mode: defaultMode, setMode: () => {}, setTheme: () => {}, }; From 8a0650e954b1976d949e192d8b7b5892ec241550 Mon Sep 17 00:00:00 2001 From: Zishan Ahmad Date: Fri, 23 Aug 2024 01:39:50 +0530 Subject: [PATCH 03/14] adjusted theme.colors --- .../components/SortableMenu/Menu.styles.js | 18 +++--- .../SurfaceMenu/SurfaceMenu.styles.js | 10 ++-- .../src/views/ChatHeader/ChatHeader.styles.js | 8 +-- .../src/views/ChatInput/ChatInput.styles.js | 18 +++--- .../src/views/ChatLayout/ChatLayout.jsx | 5 +- .../src/views/ChatLayout/ChatLayout.styles.js | 2 +- .../layout_editor/src/views/GlobalStyles.jsx | 8 +-- .../layout_editor/src/views/LayoutEditor.jsx | 4 +- .../src/views/LayoutEditor.style.js | 12 ++-- .../Message/BubbleVariant/Bubble.styles.js | 55 ++++++++--------- .../Message/BubbleVariant/BubbleThreadBtn.js | 4 +- .../src/views/Message/Message.styles.js | 60 +++++++++---------- .../src/views/Message/MessageHeader.jsx | 4 +- .../src/views/ThemeLab/ThemeLab.styles.js | 18 +++--- .../markups/src/elements/elements.styles.js | 14 ++--- .../views/AttachmentHandler/TextAttachment.js | 6 +- .../views/ChannelState/ChannelState.styles.js | 6 +- .../src/views/ChatHeader/ChatHeader.styles.js | 6 +- .../src/views/ChatInput/ChatInput.styles.js | 18 +++--- .../views/CommandList/CommandList.style.js | 8 +-- .../src/views/CommandList/CommandsList.js | 6 +- .../views/EmojiPicker/EmojiPicker.styles.js | 20 +++---- packages/react/src/views/GlobalStyles.js | 12 ++-- .../src/views/ImageGallery/ImageGallery.js | 6 +- .../views/ImageGallery/ImageGallery.styles.js | 8 +-- .../src/views/LinkPreview/LinkPreview.js | 6 +- .../views/LinkPreview/LinkPreview.styles.js | 4 +- .../react/src/views/LoginForm/LoginForm.js | 6 +- .../react/src/views/Mentions/MembersList.js | 15 ++--- .../src/views/Mentions/MembersList.styles.js | 8 +-- .../Message/BubbleVariant/Bubble.styles.js | 55 ++++++++--------- .../Message/BubbleVariant/BubbleThreadBtn.js | 4 +- .../react/src/views/Message/Message.styles.js | 44 +++++++------- .../react/src/views/Message/MessageHeader.js | 8 +-- .../views/QuoteMessage/QuoteMessage.styles.js | 8 +-- .../UserInformation/UserInformation.styles.js | 4 +- .../src/components/Avatar/Avatar.styles.js | 6 +- .../src/components/Button/Button.styles.js | 16 ++--- .../components/CheckBox/CheckBox.styles.js | 10 ++-- .../src/components/Divider/Divider.styles.js | 4 +- .../src/components/Input/Input.styles.js | 12 ++-- .../src/components/ListBox/ListBox.js | 6 +- .../src/components/ListBox/ListBox.styles.js | 10 ++-- .../src/components/Menu/Menu.styles.js | 14 ++--- .../MessageGenericPreview.styles.js | 6 +- .../src/components/Modal/Modal.styles.js | 6 +- .../MultiSelect/MultiSelect.styles.js | 14 ++--- .../src/components/Popup/Popup.styles.js | 18 +++--- .../src/components/Sidebar/Sidebar.styles.js | 6 +- .../StaticSelect/StaticSelect.styles.js | 14 ++--- .../components/Throbber/Throbber.styles.js | 6 +- .../src/components/ToastBar/ToastBar.js | 11 ++-- .../src/components/Tooltip/Tooltip.styles.js | 8 +-- .../src/context/ThemeContextProvider.js | 13 ++-- packages/ui-elements/src/hooks/useTheme.js | 12 ++-- 55 files changed, 339 insertions(+), 351 deletions(-) diff --git a/packages/layout_editor/src/components/SortableMenu/Menu.styles.js b/packages/layout_editor/src/components/SortableMenu/Menu.styles.js index 6b16dd691..ef4ecf571 100644 --- a/packages/layout_editor/src/components/SortableMenu/Menu.styles.js +++ b/packages/layout_editor/src/components/SortableMenu/Menu.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { lighten, darken } from '@embeddedchat/ui-elements'; -export const getMenuStyles = ({ theme, colors }) => { +export const getMenuStyles = ({ theme }) => { const styles = { wrapper: css` position: relative; @@ -18,7 +18,7 @@ export const getMenuStyles = ({ theme, colors }) => { border-radius: 0.2em; padding: 0.5rem 0; box-shadow: ${theme.shadows[1]}; - background-color: ${colors.background}; + background-color: ${theme.background}; `, }; @@ -26,7 +26,7 @@ export const getMenuStyles = ({ theme, colors }) => { }; export const getMenuItemStyles = (customTheme) => { - const { mode, colors } = customTheme; + const { theme, mode } = customTheme; const styles = { item: css` @@ -38,11 +38,11 @@ export const getMenuItemStyles = (customTheme) => { padding: 0.25em 0.75em; white-space: nowrap; gap: 0.2rem; - color: ${colors.foreground}; + color: ${theme.foreground}; &:hover { background-color: ${mode === 'light' - ? darken(colors.background, 0.05) - : lighten(colors.background, 2)}; + ? darken(theme.background, 0.05) + : lighten(theme.background, 2)}; cursor: pointer; } `, @@ -55,13 +55,13 @@ export const getMenuItemStyles = (customTheme) => { disabled: css` cursor: not-allowed !important; - color: ${colors.mutedForeground}; + color: ${theme.mutedForeground}; `, icon: css` visibility: hidden; &:hover { - fill: ${colors.destructive}; + fill: ${theme.destructive}; } `, @@ -74,7 +74,7 @@ export const getMenuItemStyles = (customTheme) => { dragOverlay: css` padding: 0.5rem 0.75em; - border: 1px solid ${colors.border}; + border: 1px solid ${theme.border}; border-right: none; border-left: none; `, diff --git a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js index a3c858cce..a62e50291 100644 --- a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js +++ b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js @@ -1,11 +1,11 @@ import { css } from '@emotion/react'; -export const getSurfaceItemStyles = ({ theme, colors }) => { +export const getSurfaceItemStyles = ({ theme }) => { const styles = { overlayBox: css` width: 24px; height: 24px; - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; `, @@ -16,8 +16,8 @@ export const getSurfaceItemStyles = ({ theme, colors }) => { width: 14px; height: 14px; border-radius: 50%; - background: ${colors.secondary}; - border: 1px solid ${colors.border}; + background: ${theme.colors.secondary}; + border: 1px solid ${theme.colors.border}; } `, @@ -30,7 +30,7 @@ export const getSurfaceItemStyles = ({ theme, colors }) => { icon: css` &:hover { - fill: ${colors.destructive}; + fill: ${theme.colors.destructive}; } `, }; diff --git a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js index 37b28b6b1..372fc77c2 100644 --- a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js +++ b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { darken, lighten } from '@embeddedchat/ui-elements'; -export const getChatHeaderStyles = ({ theme, mode, colors }) => { +export const getChatHeaderStyles = ({ theme, mode }) => { const styles = { clearSpacing: css` margin: 0; @@ -19,8 +19,8 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => { chatHeaderParent: css` background-color: ${mode === 'light' - ? darken(colors.background, 0.03) - : lighten(colors.background, 1)}; + ? darken(theme.colors.background, 0.03) + : lighten(theme.colors.background, 1)}; width: 100%; z-index: 1200; display: flex; @@ -47,7 +47,7 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => { overlayBox: css` width: 24px; height: 24px; - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; `, }; diff --git a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js index fc10cadb8..dfa592877 100644 --- a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js +++ b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js @@ -1,14 +1,14 @@ import { css } from '@emotion/react'; import { darken, lighten } from '@embeddedchat/ui-elements'; -export const getChatInputStyles = ({ theme, colors }) => { +export const getChatInputStyles = ({ theme }) => { const styles = { inputWithFormattingBox: css` - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: ${theme.radius}; margin: 0.5rem 2rem 1rem 2rem; &.focused { - border: ${`1.5px solid ${colors.ring}`}; + border: ${`1.5px solid ${theme.colors.ring}`}; } `, @@ -48,15 +48,15 @@ export const getChatInputStyles = ({ theme, colors }) => { return styles; }; -export const getChatInputToolbarStyles = ({ theme, mode, colors }) => { +export const getChatInputToolbarStyles = ({ theme, mode }) => { const styles = { chatFormat: css` bottom: 0; padding: 0.2rem; align-items: center; background-color: ${mode === 'light' - ? darken(colors.background, 0.03) - : lighten(colors.background, 1)}; + ? darken(theme.colors.background, 0.03) + : lighten(theme.colors.background, 1)}; display: flex; position: relative; flex-direction: row; @@ -68,7 +68,7 @@ export const getChatInputToolbarStyles = ({ theme, mode, colors }) => { return styles; }; -export const getFormatterStyles = ({ theme, colors }) => { +export const getFormatterStyles = ({ theme }) => { const styles = { toolboxContainer: css` display: flex; @@ -80,8 +80,8 @@ export const getFormatterStyles = ({ theme, colors }) => { toolbox: css` display: flex; - background-color: ${colors.background}; - box-shadow: 0 0 2px ${colors.foreground}; + background-color: ${theme.colors.background}; + box-shadow: 0 0 2px ${theme.colors.foreground}; gap: 0.25rem; padding: 0.25rem; border-radius: ${theme.radius}; diff --git a/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx b/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx index 0f745e9da..62d953210 100644 --- a/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx +++ b/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx @@ -10,9 +10,8 @@ import members from '../../data/members.json'; import useLayoutStore from '../../store/layoutStore'; const ChatLayout = () => { - const theme = useTheme(); + const { theme } = useTheme(); const styles = getChatLayoutStyles(theme); - const { colors } = theme; const { setSidebarWidth } = useLayoutStore((state) => ({ setSidebarWidth: state.setSidebarWidth, @@ -44,7 +43,7 @@ const ChatLayout = () => { diff --git a/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js b/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js index 6d5b481a1..3c8efa634 100644 --- a/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js +++ b/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -export const getChatLayoutStyles = ({ colors }) => { +export const getChatLayoutStyles = ({ theme }) => { const styles = { layout: css` height: 100%; diff --git a/packages/layout_editor/src/views/GlobalStyles.jsx b/packages/layout_editor/src/views/GlobalStyles.jsx index 2b6bd97e9..f6bd268d9 100644 --- a/packages/layout_editor/src/views/GlobalStyles.jsx +++ b/packages/layout_editor/src/views/GlobalStyles.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { css, Global } from '@emotion/react'; import { useTheme, alpha } from '@embeddedchat/ui-elements'; -const useStyles = ({ colors, theme }) => css` +const useStyles = ({ theme }) => css` * { box-sizing: border-box; margin: 0; @@ -16,7 +16,7 @@ const useStyles = ({ colors, theme }) => css` } a { - color: ${colors.foreground}; + color: ${theme.colors.foreground}; } ::-webkit-scrollbar { @@ -25,12 +25,12 @@ const useStyles = ({ colors, theme }) => css` } ::-webkit-scrollbar-thumb { - background: ${alpha(colors.primary, 0.5)}; + background: ${alpha(theme.colors.primary, 0.5)}; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: ${colors.primary}; + background: ${theme.colors.primary}; } ::-webkit-scrollbar-button { diff --git a/packages/layout_editor/src/views/LayoutEditor.jsx b/packages/layout_editor/src/views/LayoutEditor.jsx index 106095f90..2fd75ae27 100644 --- a/packages/layout_editor/src/views/LayoutEditor.jsx +++ b/packages/layout_editor/src/views/LayoutEditor.jsx @@ -9,7 +9,9 @@ import { getEditorStyles } from './LayoutEditor.style'; const LayoutEditor = () => { const themeLabOpen = useLayoutStore((state) => state.themeLabOpen); - const styles = getEditorStyles(useTheme()); + const { theme } = useTheme(); + console.log(theme); + const styles = getEditorStyles(theme); return ( diff --git a/packages/layout_editor/src/views/LayoutEditor.style.js b/packages/layout_editor/src/views/LayoutEditor.style.js index 184b9e65b..c6afbd7e7 100644 --- a/packages/layout_editor/src/views/LayoutEditor.style.js +++ b/packages/layout_editor/src/views/LayoutEditor.style.js @@ -1,23 +1,23 @@ import { css } from '@emotion/react'; -export const getEditorStyles = ({ theme, colors }) => { +export const getEditorStyles = (theme) => { const styles = { embeddedchat: css` width: 75%; position: relative; - background: ${colors.background}; - color: ${colors.foreground}; + background: ${theme.colors.background}; + color: ${theme.colors.foreground}; display: flex; flex: 1; flex-direction: column; - border: ${`1.5px solid ${theme.schemes.border}`}; + border: ${`1.5px solid ${theme.colors.border}`}; border-radius: ${theme.radius}; overflow: hidden; `, layoutEditor: css` - background: ${colors.background}; - color: ${colors.foreground}; + background: ${theme.colors.background}; + color: ${theme.colors.foreground}; height: 100vh; display: flex; gap: 0.25rem; diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js index 37d4a9c32..7f4af28b1 100644 --- a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js +++ b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { alpha } from '@embeddedchat/ui-elements'; -export const bubbleStyles = ({ theme, colors }) => { +export const bubbleStyles = ({ theme }) => { const styles = { name: 'bubble', messageParent: css` @@ -11,7 +11,7 @@ export const bubbleStyles = ({ theme, colors }) => { align-items: flex-start; padding: 0 2.25rem 0.25rem 2.25rem; a { - color: ${colors.primaryForeground}; + color: ${theme.colors.primaryForeground}; } `, @@ -36,12 +36,11 @@ export const bubbleStyles = ({ theme, colors }) => { width: fit-content; max-width: 80%; padding: 0.5rem 0.75rem; - border-radius: ${theme.radius} ${theme.radius} - ${theme.radius} 0.2rem; - background: ${colors.primary}; - color: ${colors.primaryForeground}; + border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem; + background: ${theme.colors.primary}; + color: ${theme.colors.primaryForeground}; &:hover { - background: ${alpha(colors.primary, 0.8)}; + background: ${alpha(theme.colors.primary, 0.8)}; } `, @@ -49,13 +48,11 @@ export const bubbleStyles = ({ theme, colors }) => { position: relative; width: fit-content; max-width: 80%; - border-radius: ${theme.radius} ${theme.radius} - ${theme.radius} 0.2rem; + border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem; `, sequential: css` - border-radius: 0.2rem ${theme.radius} ${theme.radius} - 0.2rem; + border-radius: 0.2rem ${theme.radius} ${theme.radius} 0.2rem; `, lastSequential: css` border-radius: 0.2rem ${theme.radius} ${theme.radius}; @@ -67,8 +64,8 @@ export const bubbleStyles = ({ theme, colors }) => { `, threadReplyButton: css` - background-color: ${colors.accent}; - color: ${colors.accentForeground}; + background-color: ${theme.colors.accent}; + color: ${theme.colors.accentForeground}; border-radius: 0.2rem; `, @@ -86,11 +83,11 @@ export const bubbleStyles = ({ theme, colors }) => { `, videoAttachmentContainer: css` - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: inherit; `, imageAttachmentContainer: css` - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: inherit; overflow: hidden; `, @@ -99,12 +96,12 @@ export const bubbleStyles = ({ theme, colors }) => { `, quoteContainer: css` - background-color: ${colors.background}; - color: ${colors.foreground}; + background-color: ${theme.colors.background}; + color: ${theme.colors.foreground}; flex: 1; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; - border: 2px solid ${colors.border}; + border: 2px solid ${theme.colors.border}; margin: 0.2rem -0.75rem -0.5rem; `, @@ -127,7 +124,7 @@ export const bubbleStyles = ({ theme, colors }) => { }; export const bubbleStylesMe = (customTheme) => { - const { theme, colors } = customTheme; + const { theme } = customTheme; const styles = { messageParentMe: css` @@ -139,27 +136,23 @@ export const bubbleStylesMe = (customTheme) => { `, messageBodyMe: css` - background: ${colors.secondary}; - color: ${colors.secondaryForeground}; - border-radius: ${theme.radius} ${theme.radius} 0.2rem - ${theme.radius}; + background: ${theme.colors.secondary}; + color: ${theme.colors.secondaryForeground}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius}; &:hover { - background: ${alpha(colors.secondary, 0.8)}; + background: ${alpha(theme.colors.secondary, 0.8)}; } `, attachmentBodyMe: css` - border-radius: ${theme.radius} ${theme.radius} 0.2rem - ${theme.radius}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius}; `, lastSequentialMe: css` - border-radius: ${theme.radius} 0.2rem ${theme.radius} - ${theme.radius}; + border-radius: ${theme.radius} 0.2rem ${theme.radius} ${theme.radius}; `, sequentialMe: css` - border-radius: ${theme.radius} 0.2rem 0.2rem - ${theme.radius}; + border-radius: ${theme.radius} 0.2rem 0.2rem ${theme.radius}; `, metricsContainerMe: css` @@ -177,7 +170,7 @@ export const bubbleStylesMe = (customTheme) => { pinnedContainerMe: css` border-inline-start: none; - border-inline-end: 3px solid ${colors.border}; + border-inline-end: 3px solid ${theme.colors.border}; `, textUserInfoMe: css` diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js b/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js index fd966423e..cc8f301f3 100644 --- a/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js +++ b/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js @@ -3,7 +3,7 @@ import { format } from 'date-fns'; import { Button, Icon, useTheme } from '@embeddedchat/ui-elements'; const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => { - const { colors } = useTheme(); + const { theme } = useTheme(); return ( <> @@ -11,7 +11,7 @@ const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => { name="arc" size="30" fill="none" - color={`${colors.accent}`} + color={`${theme.colors.accent}`} css={styles.arcIcon} />