Moving global listStyleType style to TabbedNav

0xsequence · Apr 10, 2024 · 1195106 · 1195106
1 parent 37ce528
commit 1195106
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/components/TabbedNav/TabbedNav.tsx b/src/components/TabbedNav/TabbedNav.tsx
@@ -5,7 +5,7 @@ import { Box, PolymorphicProps } from '~/components/Box'
 import { Button } from '~/components/Button'
 import { IconProps } from '~/icons/types'
 
-import { tabVariants, TabVariants } from './styles.css'
+import { tabList, tabVariants, TabVariants } from './styles.css'
 
 export type TabOption = {
   label: ReactNode
@@ -66,7 +66,7 @@ export const TabbedNav = (props: PolymorphicProps<TabbedNavProps, 'div'>) => {
 
   return (
     <Box as="nav" {...rest}>
-      <Box as="ul" gap="2">
+      <Box as="ul" gap="2" className={clsx(tabList)}>
         {tabs.map((option, tabIndex) => {
           const isActive = option.value === value
 

diff --git a/src/components/TabbedNav/styles.css.ts b/src/components/TabbedNav/styles.css.ts
@@ -1,7 +1,12 @@
+import { style } from '@vanilla-extract/css'
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
 
 import { atoms } from '~/css'
 
+export const tabList = style({
+  listStyleType: 'none',
+})
+
 export const tabVariants = recipe({
   variants: {
     variant: {

diff --git a/src/css/global.css.ts b/src/css/global.css.ts
@@ -11,7 +11,6 @@ globalStyle('*', {
   fontStyle: 'unset',
   fontVariant: 'unset',
   fontWeight: 'unset',
-  listStyleType: 'none',
   margin: 0,
   outline: 'unset',
   padding: 0,