[fix](@svelteui/core): card dark mode background color and Paper bord…

…er class ISSUES CLOSED: #396
svelteuidev · Jun 12, 2023 · aa35158 · aa35158
1 parent bb4eacf
commit aa35158
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 14 deletions.
diff --git a/packages/svelteui-core/src/components/Card/Card.stories.svelte b/packages/svelteui-core/src/components/Card/Card.stories.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Button } from '../Button';
+	import { Group } from '../Group';
+	import { Image } from '../Image';
+	import { Text } from '../Text';
+	import { Card } from './index';
+</script>
+
+<Meta title="Components/Card" component={Card} />
+
+<Template let:args>
+	<Card shadow="sm" padding="lg" {...args}>
+		<Card.Section padding="lg">
+			<Image
+				src="https://images.unsplash.com/photo-1555881400-74d7acaacd8b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80"
+				height={160}
+				alt="Portugal"
+			/>
+		</Card.Section>
+
+		<Group position="apart" override={{ marginBottom: '5px', marginTop: '$smPX' }}>
+			<Text weight={500}>Portugal Porto Adventures</Text>
+		</Group>
+
+		<Text size="sm" override={{ lineHeight: 1.5 }}>
+			With Portugal Porto Adventures you can explore more of the beautiful portuguese cities, by
+			walking on food, meeting the locals and eat excellent food and wine
+		</Text>
+
+		<Button variant="light" color="blue" fullSize override={{ marginTop: '14px' }}>
+			Book classic tour now
+		</Button>
+	</Card>
+</Template>
+
+<Story name="Card" id="cardStory" args={{ withBorder: true, radius: "md", shadow: "sm", padding: "lg" }} />
diff --git a/packages/svelteui-core/src/components/Card/Card.styles.ts b/packages/svelteui-core/src/components/Card/Card.styles.ts
@@ -3,12 +3,9 @@ import { createStyles } from '$lib/styles';
 export default createStyles((theme) => {
 	return {
 		root: {
-			[`${theme.dark} &`]: {
-				backgroundColor: theme.fn.themeColor('dark', 6)
-			},
 			position: 'relative',
 			overflow: 'hidden',
-			backgroundColor: 'white'
+			backgroundColor: theme.colors.white.value
 		}
 	};
 });
diff --git a/packages/svelteui-core/src/components/Card/Card.svelte b/packages/svelteui-core/src/components/Card/Card.svelte
@@ -28,12 +28,18 @@
 		}
 	});
 
-	$: ({ cx, classes, getStyles, theme } = useStyles(null, { name: 'Card' }));
+	$: ({ cx, classes, theme } = useStyles(null, { name: 'Card' }));
 </script>
 
 <Paper
 	bind:element
-	class={cx(className, classes.root, getStyles({ css: override }))}
+	class={cx(className, classes.root)}
+  override={{
+    [`${theme.dark} &`]: {
+      backgroundColor: theme.fn.themeColor('dark', 6)
+    },
+    ...override
+  }}
 	{padding}
 	{use}
 	{...$$restProps}

diff --git a/packages/svelteui-core/src/components/Paper/Paper.stories.svelte b/packages/svelteui-core/src/components/Paper/Paper.stories.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Paper } from './index';
+</script>
+
+<Meta title="Components/Paper" component={Paper} />
+
+<Template let:args>
+  <Paper>
+    Paper is the most basic UI component. Use it to create cards, dropdowns, modals and other components that require background with shadow
+  </Paper>
+</Template>
+
+<Story name="Paper" id="paperStory" />
diff --git a/packages/svelteui-core/src/components/Paper/Paper.styles.ts b/packages/svelteui-core/src/components/Paper/Paper.styles.ts
@@ -11,22 +11,27 @@ export interface PaperStyleParams {
 export default createStyles((theme, { radius, shadow, withBorder, padding }: PaperStyleParams) => {
 	return {
 		root: {
-			[`${theme.dark} &`]: {
-				bc: theme.colors['dark700'].value,
-				color: theme.colors['dark50'].value,
-				border: withBorder ? `1px solid ${theme.colors['dark600'].value}` : undefined
+			darkMode: {
+				backgroundColor: theme.fn.themeColor('dark', 7),
+				color: theme.fn.themeColor('dark')
 			},
 			padding: theme.fn.size({ size: padding, sizes: theme.space }),
 			outline: 0,
 			display: 'block',
 			textDecoration: 'none',
-			color: 'black',
-			backgroundColor: 'white',
+			color: theme.colors.black.value,
+			backgroundColor: theme.colors.white.value,
 			boxSizing: 'border-box',
 			borderRadius: `$${radius}`,
 			WebkitTapHighlightColor: 'transparent',
 			boxShadow: theme.shadows[shadow].value || shadow || 'none',
-			border: withBorder ? `1px solid ${theme.colors['gray200'].value}` : undefined
+			border: undefined
+		},
+		withBorder: {
+			darkMode: {
+				border: `1px solid ${theme.fn.themeColor('dark', 4)}`
+			},
+			border: `1px solid ${theme.fn.themeColor('gray', 3)}`
 		}
 	};
 });
diff --git a/packages/svelteui-core/src/components/Paper/Paper.svelte b/packages/svelteui-core/src/components/Paper/Paper.svelte
@@ -23,7 +23,7 @@
 
 <Box
 	bind:element
-	class={cx(className, classes.root, getStyles({ css: override }))}
+	class={cx(classes.root, className, withBorder && classes.withBorder,  getStyles({ css: override }))}
 	{use}
 	{...$$restProps}
 >