add background variant

shervinchen · Jan 5, 2023 · 3068040 · 3068040
1 parent db5a34e
commit 3068040
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/core/src/components/Paper/Paper.style.ts b/packages/core/src/components/Paper/Paper.style.ts
@@ -5,7 +5,7 @@ import { BaseContainer } from '../BaseContainer'
 
 interface PaperContainerProps {
   $variant: 'flat' | 'elevated' | 'outlined'
-  $surfaceColor: 'base' | 'variant'
+  $surfaceColor: 'background' | 'base' | 'variant'
   $tint: ColorToken
   $elevation: number
   $padding: SizeValue | SizeValue[]
@@ -18,7 +18,11 @@ export const PaperContainer = styled(BaseContainer)<PaperContainerProps>(
     zIndex: 0,
     boxSizing: 'border-box',
     overflow: 'hidden',
-    background: theme.fn.getMixedColor(`surface.${$surfaceColor}`, $tint, 'surfaceTint'),
+    background: theme.fn.getMixedColor(
+      $surfaceColor === 'background' ? 'background' : `surface.${$surfaceColor}`,
+      $tint,
+      'surfaceTint'
+    ),
     color: theme.fn.getOnColor(`surface.${$surfaceColor}`),
     border: '0.1rem solid transparent',
     borderRadius: theme.fn.getSize($radius, theme.radius),

diff --git a/packages/core/src/components/Paper/Paper.tsx b/packages/core/src/components/Paper/Paper.tsx
@@ -7,7 +7,7 @@ import { PaperContainer } from './Paper.style'
 export interface Props extends DefaultProps<HTMLDivElement> {
   variant?: 'flat' | 'elevated' | 'outlined'
   elevation?: number
-  surfaceColor?: 'base' | 'variant'
+  surfaceColor?: 'background' | 'base' | 'variant'
   tint?: ColorToken
   padding?: SizeValue | SizeValue[]
   radius?: SizeValue

diff --git a/packages/core/src/components/TextInput/TextInput.stories.tsx b/packages/core/src/components/TextInput/TextInput.stories.tsx
@@ -1,6 +1,8 @@
 import { useArgs } from '@storybook/client-api'
 import type { Meta, StoryFn } from '@storybook/react'
 
+import { Paper } from '../Paper'
+
 import { type Props, TextInput } from './TextInput'
 
 export default {
@@ -15,12 +17,14 @@ export default {
 export const Default: StoryFn<Props> = args => {
   const [, updateArgs] = useArgs()
   return (
-    <TextInput
-      {...args}
-      onChange={event => {
-        args.onChange?.(event)
-        updateArgs({ value: event.target.value })
-      }}
-    />
+    <Paper>
+      <TextInput
+        {...args}
+        onChange={event => {
+          args.onChange?.(event)
+          updateArgs({ value: event.target.value })
+        }}
+      />
+    </Paper>
   )
 }