[fix](@svelteui/core): add missing fontFamily to components

Author: BeeMargarida

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,

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`,

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,

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',

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',

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'),

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',

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,

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',

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 }),

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),

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',

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)
 		}

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'
 	}

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,

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: {

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',

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',

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)
 				},

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',