From 00649e3de077c1771b52612edd30fd79be5c5e31 Mon Sep 17 00:00:00 2001 From: Ana Margarida Date: Thu, 17 Aug 2023 18:49:06 +0100 Subject: [PATCH] [fix](@svelteui/core): add missing fontFamily to components --- .../Accordion/AccordionItem/AccordionItem.styles.ts | 1 + packages/svelteui-core/src/components/Alert/Alert.styles.ts | 1 + .../AppShell/HorizontalSection/HorizontalSection.styles.ts | 2 +- .../AppShell/VerticalSection/VerticalSection.styles.ts | 2 +- packages/svelteui-core/src/components/Badge/Badge.styles.ts | 1 + .../src/components/Blockquote/Blockquote.styles.ts | 1 + .../Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.styles.ts | 3 ++- .../svelteui-core/src/components/Button/Button.styles.ts | 2 +- .../Button/UnstyledButton/UnstyledButton.styles.ts | 1 + packages/svelteui-core/src/components/Chip/Chip.styles.ts | 1 + packages/svelteui-core/src/components/Image/Image.styles.ts | 5 +++-- packages/svelteui-core/src/components/Input/Input.styles.ts | 1 + .../src/components/InputWrapper/InputWrapper.styles.ts | 3 ++- packages/svelteui-core/src/components/Menu/Menu.styles.ts | 1 + .../src/components/Menu/MenuItem/MenuItem.styles.ts | 3 ++- packages/svelteui-core/src/components/Modal/Modal.styles.ts | 3 ++- .../src/components/Notification/Notification.styles.ts | 1 + packages/svelteui-core/src/components/Tabs/Tab/Tab.styles.ts | 1 + .../components/Timeline/TimelineItem/TimelineItem.styles.ts | 1 + .../svelteui-core/src/components/Tooltip/Tooltip.styles.ts | 1 + 20 files changed, 26 insertions(+), 9 deletions(-) diff --git a/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts index 30b69c5f8..4f8c3d8ab 100644 --- a/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts +++ b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts @@ -69,6 +69,7 @@ export default createStyles( } }, controlContent: { + fontFamily: theme.fonts.standard.value ?? 'sans-serif', color: 'inherit', fontWeight: 400, flex: 1, diff --git a/packages/svelteui-core/src/components/Alert/Alert.styles.ts b/packages/svelteui-core/src/components/Alert/Alert.styles.ts index 2edeb8b20..25a7f496b 100644 --- a/packages/svelteui-core/src/components/Alert/Alert.styles.ts +++ b/packages/svelteui-core/src/components/Alert/Alert.styles.ts @@ -11,6 +11,7 @@ export interface AlertStylesParams { export default createStyles((theme, { color, radius, variant }: AlertStylesParams, getRef) => { return { root: { + fontFamily: theme.fonts.standard.value ?? 'sans-serif', position: 'relative', overflow: 'hidden', padding: `${theme.space.sm.value}px ${theme.space.md.value}px`, diff --git a/packages/svelteui-core/src/components/AppShell/HorizontalSection/HorizontalSection.styles.ts b/packages/svelteui-core/src/components/AppShell/HorizontalSection/HorizontalSection.styles.ts index b3bb56e27..51957c27a 100644 --- a/packages/svelteui-core/src/components/AppShell/HorizontalSection/HorizontalSection.styles.ts +++ b/packages/svelteui-core/src/components/AppShell/HorizontalSection/HorizontalSection.styles.ts @@ -52,7 +52,7 @@ export default createStyles( 5 )}` }, - fontFamily: '$standard' || 'sans-serif', + fontFamily: theme.fonts.standard.value ?? 'sans-serif', ...position, top: position?.top || 'var(--svelteui-header-height)', zIndex, diff --git a/packages/svelteui-core/src/components/AppShell/VerticalSection/VerticalSection.styles.ts b/packages/svelteui-core/src/components/AppShell/VerticalSection/VerticalSection.styles.ts index a4714cb1c..d268fece6 100644 --- a/packages/svelteui-core/src/components/AppShell/VerticalSection/VerticalSection.styles.ts +++ b/packages/svelteui-core/src/components/AppShell/VerticalSection/VerticalSection.styles.ts @@ -23,7 +23,7 @@ export default createStyles( ...position, zIndex, height, - fontFamily: '$standard' || 'sans-serif', + fontFamily: theme.fonts.standard.value ?? 'sans-serif', maxHeight: height, position: fixed ? 'fixed' : 'static', boxSizing: 'border-box', diff --git a/packages/svelteui-core/src/components/Badge/Badge.styles.ts b/packages/svelteui-core/src/components/Badge/Badge.styles.ts index a882658c3..837f503f2 100644 --- a/packages/svelteui-core/src/components/Badge/Badge.styles.ts +++ b/packages/svelteui-core/src/components/Badge/Badge.styles.ts @@ -73,6 +73,7 @@ export default createStyles( width: fullWidth ? '100%' : 'auto', textTransform: 'uppercase', borderRadius: theme.fn.radius(radius), + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontWeight: 700, letterSpacing: 0.25, cursor: 'default', diff --git a/packages/svelteui-core/src/components/Blockquote/Blockquote.styles.ts b/packages/svelteui-core/src/components/Blockquote/Blockquote.styles.ts index b1c4d01f8..6ffa7ea1f 100644 --- a/packages/svelteui-core/src/components/Blockquote/Blockquote.styles.ts +++ b/packages/svelteui-core/src/components/Blockquote/Blockquote.styles.ts @@ -10,6 +10,7 @@ export default createStyles((theme, { color }: BlockquoteStylesParams) => { darkMode: { color: theme.fn.themeColor('dark', 0) }, + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontSize: theme.fontSizes.lg.value, lineHeight: theme.lineHeights.md.value, color: theme.fn.themeColor('black'), diff --git a/packages/svelteui-core/src/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.styles.ts b/packages/svelteui-core/src/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.styles.ts index ba8f4aea5..23b109aa6 100644 --- a/packages/svelteui-core/src/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.styles.ts +++ b/packages/svelteui-core/src/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.styles.ts @@ -16,7 +16,8 @@ export const fontSizes = { export default createStyles((theme, { color, size }: BreadcrumbItemStylesParams) => ({ root: { - position: 'relative' + position: 'relative', + fontFamily: theme.fonts.standard.value ?? 'sans-serif' }, wrapper: { display: 'flex', diff --git a/packages/svelteui-core/src/components/Button/Button.styles.ts b/packages/svelteui-core/src/components/Button/Button.styles.ts index 37b2c88e5..4b44cfb13 100644 --- a/packages/svelteui-core/src/components/Button/Button.styles.ts +++ b/packages/svelteui-core/src/components/Button/Button.styles.ts @@ -89,7 +89,7 @@ export default createStyles( typeof size === 'number' ? `0px ${size}px` : sizes[compact ? `compact-${size}` : size].padding, - fontFamily: '$standard', + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontWeight: '$semibold', fontSize: `$${size}`, lineHeight: 1, diff --git a/packages/svelteui-core/src/components/Button/UnstyledButton/UnstyledButton.styles.ts b/packages/svelteui-core/src/components/Button/UnstyledButton/UnstyledButton.styles.ts index ea905a8b6..adefeeb73 100644 --- a/packages/svelteui-core/src/components/Button/UnstyledButton/UnstyledButton.styles.ts +++ b/packages/svelteui-core/src/components/Button/UnstyledButton/UnstyledButton.styles.ts @@ -10,6 +10,7 @@ export default createStyles((theme) => ({ border: 0, padding: 0, appearance: 'none', + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontSize: theme.fontSizes.md.value, backgroundColor: 'transparent', textAlign: 'left', diff --git a/packages/svelteui-core/src/components/Chip/Chip.styles.ts b/packages/svelteui-core/src/components/Chip/Chip.styles.ts index a45ffcb77..a3802ef94 100644 --- a/packages/svelteui-core/src/components/Chip/Chip.styles.ts +++ b/packages/svelteui-core/src/components/Chip/Chip.styles.ts @@ -58,6 +58,7 @@ export default createStyles( border: '1px solid transparent', borderRadius: theme.fn.radius(radius), height: theme.fn.size({ size, sizes }), + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontSize: theme.fn.size({ size, sizes: theme.fontSizes }), lineHeight: `${theme.fn.size({ size, sizes }) - 2}px`, paddingLeft: theme.fn.size({ size, sizes: padding }), diff --git a/packages/svelteui-core/src/components/Image/Image.styles.ts b/packages/svelteui-core/src/components/Image/Image.styles.ts index 5a00ad4ca..574e7a5e4 100644 --- a/packages/svelteui-core/src/components/Image/Image.styles.ts +++ b/packages/svelteui-core/src/components/Image/Image.styles.ts @@ -11,7 +11,9 @@ export interface ImageStylesParams { export default createStyles((theme, { radius, height, width, fit }: ImageStylesParams) => { return { - root: {}, + root: { + fontFamily: theme.fonts.standard.value ?? 'sans-serif' + }, imageWrapper: { position: 'relative' }, @@ -23,7 +25,6 @@ export default createStyles((theme, { radius, height, width, fit }: ImageStylesP image: { width, height, - fontFamily: '$standard', display: 'block', border: 0, borderRadius: theme.fn.radius(radius), diff --git a/packages/svelteui-core/src/components/Input/Input.styles.ts b/packages/svelteui-core/src/components/Input/Input.styles.ts index 41bcaac17..19dd1a346 100644 --- a/packages/svelteui-core/src/components/Input/Input.styles.ts +++ b/packages/svelteui-core/src/components/Input/Input.styles.ts @@ -65,6 +65,7 @@ export default createStyles( appearance: 'none', resize, boxSizing: 'border-box', + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontSize: typeof size === 'number' ? `${size}px` : `${size}`, width: '100%', color: 'Black', diff --git a/packages/svelteui-core/src/components/InputWrapper/InputWrapper.styles.ts b/packages/svelteui-core/src/components/InputWrapper/InputWrapper.styles.ts index 36eb49d26..e997dc2e4 100644 --- a/packages/svelteui-core/src/components/InputWrapper/InputWrapper.styles.ts +++ b/packages/svelteui-core/src/components/InputWrapper/InputWrapper.styles.ts @@ -17,6 +17,7 @@ export default createStyles((theme, { size }: InputWrapperStyleParams) => { }, display: 'inline-block', marginBottom: 4, + fontFamily: theme.fonts.standard.value ?? 'sans-serif', fontSize: theme.fontSizes[size].value, fontWeight: 500, color: theme.fn.themeColor('gray', 9), @@ -48,7 +49,7 @@ export default createStyles((theme, { size }: InputWrapperStyleParams) => { required: { [`${theme.dark} &`]: { - color: '$red500' + color: theme.fn.themeColor('red', 5) }, color: theme.fn.themeColor('red', 7) } diff --git a/packages/svelteui-core/src/components/Menu/Menu.styles.ts b/packages/svelteui-core/src/components/Menu/Menu.styles.ts index ba2b2731b..441de0ead 100644 --- a/packages/svelteui-core/src/components/Menu/Menu.styles.ts +++ b/packages/svelteui-core/src/components/Menu/Menu.styles.ts @@ -92,6 +92,7 @@ export default createStyles((theme, { size }: MenuStyleParams) => ({ color: theme.fn.themeColor('gray', 2), fontWeight: 500, fontSize: theme.fontSizes.xs, + fontFamily: theme.fonts.standard.value, padding: `${parseInt(theme.space.xs.value) / 2}px ${parseInt(theme.space.sm.value)}px`, cursor: 'default' } diff --git a/packages/svelteui-core/src/components/Menu/MenuItem/MenuItem.styles.ts b/packages/svelteui-core/src/components/Menu/MenuItem/MenuItem.styles.ts index 3e1016da2..883a161a8 100644 --- a/packages/svelteui-core/src/components/Menu/MenuItem/MenuItem.styles.ts +++ b/packages/svelteui-core/src/components/Menu/MenuItem/MenuItem.styles.ts @@ -35,7 +35,8 @@ export default createStyles((theme, { color, radius }: MenuItemStylesParams) => } }, WebkitTapHighlightColor: 'transparent', - fontSize: theme.fontSizes.sm, + fontFamily: theme.fonts.standard.value, + fontSize: theme.fontSizes.sm.value, border: 0, backgroundColor: 'transparent', outline: 0, diff --git a/packages/svelteui-core/src/components/Modal/Modal.styles.ts b/packages/svelteui-core/src/components/Modal/Modal.styles.ts index b537a3ac7..c22c708fe 100644 --- a/packages/svelteui-core/src/components/Modal/Modal.styles.ts +++ b/packages/svelteui-core/src/components/Modal/Modal.styles.ts @@ -55,7 +55,8 @@ export default createStyles((theme, { centered, overflow, size, zIndex }: ModalS marginRight: +theme.space.md.value, textOverflow: 'ellipsis', display: 'block', - wordBreak: 'break-word' + wordBreak: 'break-word', + fontFamily: theme.fonts.standard.value }, modal: { diff --git a/packages/svelteui-core/src/components/Notification/Notification.styles.ts b/packages/svelteui-core/src/components/Notification/Notification.styles.ts index 558b8faf6..060fcd5c4 100644 --- a/packages/svelteui-core/src/components/Notification/Notification.styles.ts +++ b/packages/svelteui-core/src/components/Notification/Notification.styles.ts @@ -18,6 +18,7 @@ export default createStyles((theme, { color, radius }: NotificationStylesParams, backgroundColor: theme.fn.themeColor('dark', 6), border: `1px solid ${theme.fn.themeColor('dark', 6)}` }, + fontFamily: theme.fonts.standard.value, boxSizing: 'border-box', position: 'relative', display: 'flex', diff --git a/packages/svelteui-core/src/components/Tabs/Tab/Tab.styles.ts b/packages/svelteui-core/src/components/Tabs/Tab/Tab.styles.ts index d533fbd29..334393514 100644 --- a/packages/svelteui-core/src/components/Tabs/Tab/Tab.styles.ts +++ b/packages/svelteui-core/src/components/Tabs/Tab/Tab.styles.ts @@ -85,6 +85,7 @@ export default createStyles((theme, { color, orientation }: TabStyleParams) => { backgroundColor: 'transparent', border: 0, padding: `0 ${theme.space.mdPX}`, + fontFamily: theme.fonts.standard.value, fontSize: theme.fontSizes.sm, cursor: 'pointer', width: orientation === 'vertical' ? '100%' : 'auto', diff --git a/packages/svelteui-core/src/components/Timeline/TimelineItem/TimelineItem.styles.ts b/packages/svelteui-core/src/components/Timeline/TimelineItem/TimelineItem.styles.ts index d0461ce98..0120c6f8d 100644 --- a/packages/svelteui-core/src/components/Timeline/TimelineItem/TimelineItem.styles.ts +++ b/packages/svelteui-core/src/components/Timeline/TimelineItem/TimelineItem.styles.ts @@ -27,6 +27,7 @@ export default createStyles( paddingLeft: align === 'left' ? theme.space.xlPX.value : 0, paddingRight: align === 'right' ? theme.space.xlPX.value : 0, textAlign: align, + fontFamily: theme.fonts.standard.value, darkMode: { color: theme.fn.themeColor('dark', 0) }, diff --git a/packages/svelteui-core/src/components/Tooltip/Tooltip.styles.ts b/packages/svelteui-core/src/components/Tooltip/Tooltip.styles.ts index ed2c269b4..5136b8d07 100644 --- a/packages/svelteui-core/src/components/Tooltip/Tooltip.styles.ts +++ b/packages/svelteui-core/src/components/Tooltip/Tooltip.styles.ts @@ -20,6 +20,7 @@ export default createStyles((theme, { color, radius }: TooltipStyleParams) => { backgroundColor: theme.fn.themeColor(color, 9), lineHeight: theme.lineHeights.md, fontSize: theme.fontSizes.sm, + fontFamily: theme.fonts.standard.value, borderRadius: theme.radii[radius].value, padding: `${+theme.space.xs.value / 2}px ${theme.space.xs.value}px`, color: 'white',