From 4272e3068bc54851011a34d3fefc05fdc32a9bae Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Thu, 16 Jan 2025 20:46:47 -0500 Subject: [PATCH] Remove vanilla-extract styles.css.ts --- src/components/Badge/styles.css.ts | 49 ------ src/components/Button/styles.css.ts | 185 -------------------- src/components/Card/styles.css.ts | 40 ----- src/components/Checkbox/styles.css.ts | 46 ----- src/components/Collapsible/styles.css.ts | 46 ----- src/components/DropdownMenu/styles.css.ts | 62 ------- src/components/Field/styles.css.ts | 40 ----- src/components/FileInput/styles.css.ts | 66 ------- src/components/GradientAvatar/styles.css.ts | 30 ---- src/components/Modal/styles.css.ts | 107 ----------- src/components/NetworkImage/styles.css.ts | 84 --------- src/components/PINCodeInput/styles.css.ts | 56 ------ src/components/RadioGroup/styles.css.ts | 65 ------- src/components/Scroll/styles.css.ts | 97 ---------- src/components/Select/styles.css.ts | 121 ------------- src/components/Skeleton/styles.css.ts | 52 ------ src/components/Spinner/styles.css.ts | 34 ---- src/components/Switch/styles.css.ts | 55 ------ src/components/TabbedNav/styles.css.ts | 48 ----- src/components/Tabs/styles.css.ts | 68 ------- src/components/Text/styles.css.ts | 142 --------------- src/components/TextArea/styles.css.ts | 44 ----- src/components/TextInput/styles.css.ts | 78 --------- src/components/Toast/styles.css.ts | 72 -------- src/components/TokenImage/styles.css.ts | 107 ----------- src/components/Tooltip/styles.css.ts | 18 -- src/icons/styles.css.ts | 36 ---- 27 files changed, 1848 deletions(-) delete mode 100644 src/components/Badge/styles.css.ts delete mode 100644 src/components/Button/styles.css.ts delete mode 100644 src/components/Card/styles.css.ts delete mode 100644 src/components/Checkbox/styles.css.ts delete mode 100644 src/components/Collapsible/styles.css.ts delete mode 100644 src/components/DropdownMenu/styles.css.ts delete mode 100644 src/components/Field/styles.css.ts delete mode 100644 src/components/FileInput/styles.css.ts delete mode 100644 src/components/GradientAvatar/styles.css.ts delete mode 100644 src/components/Modal/styles.css.ts delete mode 100644 src/components/NetworkImage/styles.css.ts delete mode 100644 src/components/PINCodeInput/styles.css.ts delete mode 100644 src/components/RadioGroup/styles.css.ts delete mode 100644 src/components/Scroll/styles.css.ts delete mode 100644 src/components/Select/styles.css.ts delete mode 100644 src/components/Skeleton/styles.css.ts delete mode 100644 src/components/Spinner/styles.css.ts delete mode 100644 src/components/Switch/styles.css.ts delete mode 100644 src/components/TabbedNav/styles.css.ts delete mode 100644 src/components/Tabs/styles.css.ts delete mode 100644 src/components/Text/styles.css.ts delete mode 100644 src/components/TextArea/styles.css.ts delete mode 100644 src/components/TextInput/styles.css.ts delete mode 100644 src/components/Toast/styles.css.ts delete mode 100644 src/components/TokenImage/styles.css.ts delete mode 100644 src/components/Tooltip/styles.css.ts delete mode 100644 src/icons/styles.css.ts diff --git a/src/components/Badge/styles.css.ts b/src/components/Badge/styles.css.ts deleted file mode 100644 index 7880ec775..000000000 --- a/src/components/Badge/styles.css.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, vars } from '~/css' - -import { textVariants } from '../Text/styles.css' - -export const badgeVariants = recipe({ - base: { - fontWeight: vars.fontWeights.normal, - }, - - variants: { - variant: { - info: atoms({ background: 'info' }), - warning: atoms({ background: 'warning' }), - success: atoms({ background: 'positive' }), - error: atoms({ background: 'negative' }), - }, - - size: { - sm: [ - textVariants({ variant: 'small' }), - atoms({ - height: '4', - minWidth: '4', - paddingX: '2', - }), - ], - md: [ - textVariants({ variant: 'normal' }), - atoms({ - height: '5', - minWidth: '5', - paddingX: '3', - }), - ], - lg: [ - textVariants({ variant: 'medium' }), - atoms({ - height: '6', - minWidth: '6', - paddingX: '4', - }), - ], - }, - }, -}) - -export type BadgeVariants = RecipeVariants diff --git a/src/components/Button/styles.css.ts b/src/components/Button/styles.css.ts deleted file mode 100644 index fff197ce5..000000000 --- a/src/components/Button/styles.css.ts +++ /dev/null @@ -1,185 +0,0 @@ -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, focusRing, vars } from '~/css' - -import { textVariants } from '../Text/styles.css' - -const outlineStyle = { - outlineStyle: 'solid', - outlineOffset: `calc(${vars.borderWidths.thick} * -1)`, - outlineWidth: vars.borderWidths.thick, - borderColor: 'transparent', -} as const - -export const buttonVariants = recipe({ - base: [ - atoms({ - overflow: 'hidden', - whiteSpace: 'nowrap', - alignItems: 'center', - border: 'none', - textDecoration: 'none', - }), - focusRing, - ], - - variants: { - variant: { - base: atoms({ - background: 'transparent', - color: 'text100', - }), - - ghost: atoms({ - background: 'transparent', - color: 'text100', - }), - - feature: [ - atoms({ - background: 'gradientSecondary', - color: 'white', - }), - { - outline: '2px solid rgba(255, 255, 255, 0.1)', - outlineOffset: '-2px', - }, - ], - primary: atoms({ - background: 'gradientPrimary', - color: 'white', - }), - glass: atoms({ - background: 'buttonGlass', - color: 'text100', - }), - emphasis: atoms({ - background: 'buttonEmphasis', - color: 'text100', - }), - raised: atoms({ - background: 'backgroundRaised', - color: 'text100', - }), - danger: atoms({ - background: 'negative', - color: 'white', - }), - - text: [ - textVariants({ variant: 'small' }), - atoms({ - background: 'transparent', - color: 'text50', - borderRadius: 'xs', - }), - { - outlineOffset: '1px', - }, - ], - }, - - shape: { - circle: atoms({ borderRadius: 'circle' }), - square: atoms({ borderRadius: 'sm' }), - }, - - disabled: { - true: atoms({ cursor: 'default', opacity: '50' }), - false: atoms({ - cursor: 'pointer', - opacity: { base: '100', hover: '80' }, - }), - }, - - size: { - xs: [ - textVariants({ variant: 'xsmall' }), - atoms({ paddingX: '3' }), - { height: '28px' }, - ], - sm: [ - textVariants({ variant: 'normal' }), - atoms({ paddingX: '4' }), - { height: '36px' }, - ], - md: [ - textVariants({ variant: 'normal' }), - atoms({ paddingX: '5' }), - { height: '44px' }, - ], - lg: [ - textVariants({ variant: 'normal' }), - atoms({ paddingX: '5' }), - { height: '52px' }, - ], - }, - - iconOnly: { - true: { - padding: 0, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - }, - hasLeftIcon: { true: {} }, - hasRightIcon: { true: {} }, - - activeOutline: { - light: { - outlineColor: vars.colors.backgroundSecondary, - ...outlineStyle, - }, - bold: { - outlineColor: vars.colors.borderNormal, - ...outlineStyle, - }, - }, - }, - - compoundVariants: [ - { - variants: { iconOnly: true, size: 'xs' }, - style: { width: '28px' }, - }, - { - variants: { iconOnly: true, size: 'sm' }, - style: { width: '36px' }, - }, - { - variants: { iconOnly: true, size: 'md' }, - style: { width: '44px' }, - }, - { - variants: { iconOnly: true, size: 'lg' }, - style: { width: '52px' }, - }, - { - variants: { iconOnly: false, hasLeftIcon: true, size: 'xs' }, - style: { paddingLeft: vars.space['2'] }, - }, - { - variants: { iconOnly: false, hasLeftIcon: true, size: 'sm' }, - style: { paddingLeft: vars.space['2'] }, - }, - { - variants: { iconOnly: false, hasLeftIcon: true, size: 'md' }, - style: { paddingLeft: vars.space['4'] }, - }, - { - variants: { iconOnly: false, hasRightIcon: true, size: 'xs' }, - style: { paddingRight: vars.space['2'] }, - }, - { - variants: { iconOnly: false, hasRightIcon: true, size: 'sm' }, - style: { paddingRight: vars.space['2'] }, - }, - { - variants: { iconOnly: false, hasRightIcon: true, size: 'md' }, - style: { paddingRight: vars.space['4'] }, - }, - ], -}) - -export type ButtonVariants = RecipeVariants diff --git a/src/components/Card/styles.css.ts b/src/components/Card/styles.css.ts deleted file mode 100644 index 0d2cd8991..000000000 --- a/src/components/Card/styles.css.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { recipe, RecipeVariants } from '@vanilla-extract/recipes' - -import { atoms, focusRing } from '~/css' - -export const cardVariants = recipe({ - variants: { - clickable: { - true: [ - atoms({ - borderWidth: 'none', - opacity: { - hover: '80', - }, - cursor: 'pointer', - }), - focusRing, - ], - }, - - disabled: { - true: { opacity: 0.5, cursor: 'default', pointerEvents: 'none' }, - }, - - outlined: { - true: atoms({ - borderStyle: 'solid', - borderWidth: 'thin', - borderColor: 'borderNormal', - }), - }, - - blur: { - true: atoms({ - backdropFilter: 'blur', - }), - }, - }, -}) - -export type CardVariants = RecipeVariants diff --git a/src/components/Checkbox/styles.css.ts b/src/components/Checkbox/styles.css.ts deleted file mode 100644 index 1d80a9971..000000000 --- a/src/components/Checkbox/styles.css.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, focusRing } from '~/css' - -export const checkboxVariants = recipe({ - base: [ - atoms({ - borderRadius: 'xs', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - borderWidth: 'thin', - borderStyle: 'solid', - borderColor: 'borderFocus', - background: 'transparent', - opacity: { - base: '100', - hover: '80', - disabled: '50', - }, - cursor: { - base: 'pointer', - disabled: 'default', - }, - }), - focusRing, - ], - - variants: { - size: { - sm: [{ height: 20, width: 20 }], - lg: [{ height: 28, width: 28 }], - }, - }, -}) - -export type CheckboxVariants = RecipeVariants - -export const indicator = atoms({ - color: 'text100', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 'full', - height: 'full', -}) diff --git a/src/components/Collapsible/styles.css.ts b/src/components/Collapsible/styles.css.ts deleted file mode 100644 index 2e319676d..000000000 --- a/src/components/Collapsible/styles.css.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { atoms, focusRing } from '~/css' - -export const COLLAPSED_HEIGHT = '64px' - -export const root = style({ - minHeight: COLLAPSED_HEIGHT, -}) - -export const trigger = style([ - atoms({ - display: 'flex', - alignItems: 'center', - background: 'transparent', - padding: '4', - width: 'full', - cursor: 'pointer', - userSelect: 'none', - borderRadius: 'md', - }), - { - border: 'none', - appearance: 'none', - height: COLLAPSED_HEIGHT, - }, - focusRing, -]) - -export const content = style([ - atoms({ - paddingTop: '0', - paddingX: '4', - paddingBottom: '4', - width: 'full', - }), - { - transformOrigin: 'top', - }, -]) - -export const icon = style({ - height: '1.25rem', - width: '1.25rem', - display: 'block', -}) diff --git a/src/components/DropdownMenu/styles.css.ts b/src/components/DropdownMenu/styles.css.ts deleted file mode 100644 index 74dbc72f2..000000000 --- a/src/components/DropdownMenu/styles.css.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { atoms, vars } from '~/css' - -export const content = style([ - atoms({ - backdropFilter: 'blur', - background: 'backgroundRaised', - padding: '2', - borderRadius: 'sm', - }), - { - width: 160, - }, -]) - -export const arrow = style({ - fill: vars.colors.backgroundRaised, -}) - -export const item = style([ - atoms({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - borderRadius: 'xs', - paddingX: '2', - paddingY: '1', - cursor: 'pointer', - focusRing: { focus: 'none' }, - userSelect: 'none', - paddingLeft: '6', - position: 'relative', - color: 'text80', - }), - { - selectors: { - '&[data-disabled]': { - opacity: '0.8', - cursor: 'default', - pointerEvents: 'none', - color: vars.colors.text50, - }, - - '&[data-highlighted]': { - background: vars.colors.backgroundContrast, - // color: vars.colors.text100, - }, - }, - }, -]) - -export const indicator = style({ - position: 'absolute', - left: 0, - width: vars.space[6], - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', -}) - -export const separator = style({}) diff --git a/src/components/Field/styles.css.ts b/src/components/Field/styles.css.ts deleted file mode 100644 index 0f0e1a807..000000000 --- a/src/components/Field/styles.css.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms } from '~/css' - -export const labelVariants = recipe({ - variants: { - labelLocation: { - top: atoms({ - alignItems: 'stretch', - flexDirection: 'column', - gap: '3', - }), - left: [ - atoms({ - alignItems: 'center', - flexDirection: 'row', - gap: '3', - }), - { - gridTemplateColumns: '1fr 2fr', - }, - ], - right: [ - atoms({ - alignItems: 'center', - flexDirection: 'row', - gap: '3', - }), - { - gridTemplateColumns: '2fr 1fr', - }, - ], - hidden: atoms({ - gap: '0', - }), - }, - }, -}) - -export type LabelVariants = RecipeVariants diff --git a/src/components/FileInput/styles.css.ts b/src/components/FileInput/styles.css.ts deleted file mode 100644 index f2292560d..000000000 --- a/src/components/FileInput/styles.css.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { textVariants } from '~/components/Text/styles.css' -import { atoms, vars } from '~/css' - -export const wrap = style([ - textVariants({ variant: 'normal' }), - atoms({ - alignItems: 'center', - borderColor: 'borderNormal', - borderStyle: 'dashed', - borderWidth: 'thin', - display: 'inline-flex', - flexDirection: 'row', - justifyContent: 'flex-start', - minWidth: 'full', - padding: '4', - position: 'relative', - }), - { - height: 52, - - selectors: { - '&:has(:disabled), &:has(:disabled):hover': { - cursor: 'default', - opacity: 0.5, - }, - - '&:focus-within': { - opacity: '1 !important', - // outlineColor: vars.colors.borderFocus, - // outlineStyle: 'solid', - // outlineOffset: `calc(${vars.borderWidths.thick} * -1)`, - // outlineWidth: vars.borderWidths.thick, - - boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`, - borderColor: 'transparent', - }, - }, - }, -]) - -export const wrapVariants = recipe({ - variants: { - borderRadius: { - xs: atoms({ borderRadius: 'xs' }), - sm: atoms({ borderRadius: 'sm' }), - md: atoms({ borderRadius: 'md' }), - }, - }, -}) - -export type WrapVariants = RecipeVariants - -export const input = style([ - atoms({ - position: 'absolute', - opacity: '0', - top: '0', - left: '0', - bottom: '0', - right: '0', - focusRing: 'none', - }), -]) diff --git a/src/components/GradientAvatar/styles.css.ts b/src/components/GradientAvatar/styles.css.ts deleted file mode 100644 index d8f796161..000000000 --- a/src/components/GradientAvatar/styles.css.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { recipe, RecipeVariants } from '@vanilla-extract/recipes' - -export const avatar = recipe({ - variants: { - size: { - xs: { - width: '12px', - height: '12px', - }, - sm: { - width: '20px', - height: '20px', - }, - md: { - width: '32px', - height: '32px', - }, - lg: { - width: '40px', - height: '40px', - }, - xl: { - width: '52px', - height: '52px', - }, - }, - }, -}) - -export type AvatarVariants = RecipeVariants diff --git a/src/components/Modal/styles.css.ts b/src/components/Modal/styles.css.ts deleted file mode 100644 index 98f6c9646..000000000 --- a/src/components/Modal/styles.css.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, responsiveStyle } from '~/css' - -export const root = style([ - atoms({ - display: 'flex', - position: 'fixed', - zIndex: '20', - placeItems: 'center', - top: '0', - left: '0', - right: '0', - bottom: '0', - }), -]) - -export const overlay = style([ - atoms({ - position: 'fixed', - top: '0', - left: '0', - right: '0', - bottom: '0', - }), -]) - -export const contentVariants = recipe({ - base: [ - atoms({ - display: 'flex', - flexDirection: 'column', - position: 'fixed', - overflow: 'hidden', - background: 'backgroundPrimary', - bottom: { sm: '0', lg: 'auto' }, - borderTopRadius: 'lg', - borderBottomRadius: { sm: 'none', lg: 'lg' }, - focusRing: { - focus: 'none', - }, - }), - { - '::-webkit-scrollbar': { - display: 'none', - }, - msOverflowStyle: 'none', - scrollbarWidth: 'none', - }, - ], - variants: { - size: { - sm: { - width: '100vw', - minHeight: 100, - maxHeight: ['calc(100vh - 80px)', 'calc(100dvh - 80px)'], - - '@media': responsiveStyle({ - lg: { - width: '540px', - maxHeight: [ - 'min(800px, calc(100vh - 80px))', - 'min(800px, calc(100dvh - 80px))', - ], - }, - }), - }, - lg: { - width: '100vw', - height: ['calc(100vh - 70px)', 'calc(100dvh - 70px)'], - - '@media': responsiveStyle({ - lg: { - width: '720px', - maxHeight: [ - 'min(800px, calc(100vh - 80px))', - 'min(800px, calc(100dvh - 80px))', - ], - height: '800px', - }, - }), - }, - }, - - autoHeight: { true: {} }, - }, - - compoundVariants: [ - { - variants: { autoHeight: true, size: 'lg' }, - style: { height: 'auto !important' }, - }, - ], -}) - -export type ContentVariants = RecipeVariants - -export const close = style([ - atoms({ - margin: '4', - position: 'absolute', - right: '0', - top: '0', - zIndex: '20', - }), -]) diff --git a/src/components/NetworkImage/styles.css.ts b/src/components/NetworkImage/styles.css.ts deleted file mode 100644 index 567bc6545..000000000 --- a/src/components/NetworkImage/styles.css.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, selectorize } from '~/css' - -export const root = recipe({ - base: atoms({ - display: 'flex', - placeItems: 'center', - overflow: 'hidden', - }), - - variants: { - size: { - xs: { - width: '12px', - height: '12px', - }, - - sm: { - width: '20px', - height: '20px', - }, - - md: { - width: '32px', - height: '32px', - }, - - lg: { - width: '40px', - height: '40px', - }, - - xl: { - width: '64px', - height: '64px', - }, - }, - - borderRadius: { - circle: atoms({ borderRadius: 'circle' }), - lg: atoms({ borderRadius: 'lg' }), - md: atoms({ borderRadius: 'md' }), - sm: atoms({ borderRadius: 'sm' }), - }, - }, -}) - -export type RootVariants = RecipeVariants - -export const img = style({ - maxWidth: '100%', - maxHeight: '100%', - objectFit: 'cover', - width: '100%', - - selectors: { - [`${selectorize(root({ size: 'xs' }))} &`]: { - maxWidth: '16px', - maxHeight: '16px', - }, - - [`${selectorize(root({ size: 'sm' }))} &`]: { - maxWidth: '20px', - maxHeight: '20px', - }, - - [`${selectorize(root({ size: 'md' }))} &`]: { - maxWidth: '32px', - maxHeight: '32px', - }, - - [`${selectorize(root({ size: 'lg' }))} &`]: { - maxWidth: '40px', - maxHeight: '40px', - }, - - [`${selectorize(root({ size: 'xl' }))} &`]: { - maxWidth: '64px', - maxHeight: '64px', - }, - }, -}) diff --git a/src/components/PINCodeInput/styles.css.ts b/src/components/PINCodeInput/styles.css.ts deleted file mode 100644 index f62aa3c8e..000000000 --- a/src/components/PINCodeInput/styles.css.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { focusRing, vars } from '~/css' - -import { textVariants } from '../Text' - -export const digitText = style([ - textVariants({ variant: 'large' }), - { - width: '40px', - height: '48px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '10px', - background: vars.colors.backgroundSecondary, - borderRadius: vars.radii.sm, - color: vars.colors.text100, - }, -]) - -export const digitInput = style([ - textVariants({ variant: 'large' }), - { - height: '48px', - width: '40px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '10px', - border: 'none', - borderRadius: vars.radii.sm, - color: vars.colors.text100, - background: 'transparent', - textAlign: 'center', - caretColor: 'transparent', - - ':disabled': { - cursor: 'default', - opacity: '0.5', - }, - - '::selection': { - background: 'transparent', - }, - - boxShadow: `0 0 0 ${vars.borderWidths.thin} ${vars.colors.borderNormal} inset`, - - selectors: { - '&:hover:not(&:disabled)': { - borderColor: vars.colors.borderFocus, - }, - }, - }, - focusRing, -]) diff --git a/src/components/RadioGroup/styles.css.ts b/src/components/RadioGroup/styles.css.ts deleted file mode 100644 index f14397820..000000000 --- a/src/components/RadioGroup/styles.css.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, focusRing } from '~/css' - -export const radioItemVariants = recipe({ - base: [ - atoms({ - background: 'transparent', - borderRadius: 'circle', - borderStyle: 'solid', - borderColor: 'borderFocus', - padding: '0', - cursor: { - base: 'pointer', - disabled: 'default', - }, - opacity: { - hover: '80', - disabled: '50', - }, - }), - focusRing, - ], - - variants: { - size: { - sm: [atoms({ borderWidth: 'thin' }), { height: 20, width: 20 }], - lg: [atoms({ borderWidth: 'thick' }), { height: 28, width: 28 }], - }, - }, -}) - -export type RadioItemVariants = RecipeVariants - -export const indicatorVariants = recipe({ - base: style([ - atoms({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - position: 'relative', - width: 'full', - height: 'full', - color: 'text100', - }), - { - selectors: { - '&::after': { - content: '""', - display: 'block', - borderRadius: 999, - background: 'currentColor', - }, - }, - }, - ]), - - variants: { - size: { - sm: [{ selectors: { '&::after': { width: 14, height: 14 } } }], - lg: [{ selectors: { '&::after': { width: 18, height: 18 } } }], - }, - }, -}) diff --git a/src/components/Scroll/styles.css.ts b/src/components/Scroll/styles.css.ts deleted file mode 100644 index 10b5ea369..000000000 --- a/src/components/Scroll/styles.css.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { recipe } from '@vanilla-extract/recipes' - -import { atoms, vars } from '~/css' - -const SHADOW_WIDTH = vars.space[4] - -export const scroll = recipe({ - base: atoms({ - width: 'full', - height: 'full', - }), - - variants: { - direction: { - vertical: { - height: '100%', - overflowY: 'auto', - overscrollBehaviorY: 'contain', - }, - - horizontal: { - overflowX: 'auto', - overscrollBehaviorX: 'contain', - width: '100%', - }, - }, - }, -}) - -export const overlay = recipe({ - variants: { - shadows: { - true: { - '::before': { - content: '', - position: 'absolute', - zIndex: 1, - pointerEvents: 'none', - }, - - '::after': { - content: '', - position: 'absolute', - zIndex: 1, - pointerEvents: 'none', - }, - }, - - false: { - '::before': { - display: 'none', - }, - '::after': { - display: 'none', - }, - }, - }, - - direction: { - vertical: { - '::before': { - background: `linear-gradient(to top, transparent 0%, ${vars.colors.backgroundPrimary} 100%)`, - left: 0, - top: 0, - width: '100%', - height: SHADOW_WIDTH, - }, - - '::after': { - background: `linear-gradient(to bottom, transparent 0%, ${vars.colors.backgroundPrimary} 100%)`, - left: 0, - bottom: 0, - width: '100%', - height: SHADOW_WIDTH, - }, - }, - - horizontal: { - '::before': { - background: `linear-gradient(to left, transparent 0%, ${vars.colors.backgroundPrimary} 100%)`, - left: 0, - top: 0, - height: '100%', - width: SHADOW_WIDTH, - }, - - '::after': { - background: `linear-gradient(to right, transparent 0%, ${vars.colors.backgroundPrimary} 100%)`, - right: 0, - top: 0, - height: '100%', - width: SHADOW_WIDTH, - }, - }, - }, - }, -}) diff --git a/src/components/Select/styles.css.ts b/src/components/Select/styles.css.ts deleted file mode 100644 index 6bab28e18..000000000 --- a/src/components/Select/styles.css.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { textVariants } from '~/components/Text/styles.css' -import { atoms, vars } from '~/css' - -export const triggerStyle = style([ - textVariants({ variant: 'normal' }), - atoms({ - alignItems: 'center', - background: 'transparent', - display: 'inline-flex', - fontWeight: 'medium', - color: 'text100', - gap: '1', - justifyContent: 'space-between', - padding: '4', - userSelect: 'none', - cursor: 'pointer', - border: 'none', - }), - { - height: 52, - - boxShadow: `0 0 0 ${vars.borderWidths.thin} ${vars.colors.borderNormal} inset`, - - selectors: { - '&:has(:disabled), &:has(:disabled):hover': { - cursor: 'default', - opacity: 0.5, - }, - - '&:focus': { - outline: 'none', - }, - - '&:focus-within': { - outline: 'none', - opacity: '1 !important', - boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`, - borderColor: 'transparent', - }, - }, - }, -]) - -export const triggerVariants = recipe({ - variants: { - borderRadius: { - xs: atoms({ borderRadius: 'xs' }), - sm: atoms({ borderRadius: 'sm' }), - md: atoms({ borderRadius: 'md' }), - }, - }, -}) - -export type TriggerVariants = RecipeVariants - -export const contentStyle = style([ - atoms({ - backdropFilter: 'blur', - background: 'buttonGlass', - borderRadius: 'sm', - // borderColor: 'borderNormal', - // borderStyle: 'solid', - // borderWidth: 'thin', - color: 'text100', - overflow: 'hidden', - zIndex: '30', - }), - - { - boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`, - }, -]) - -export const groupLabelStyle = style([ - atoms({ - display: 'flex', - justifyContent: 'space-between', - paddingX: '4', - paddingY: '3', - color: 'text50', - }), -]) - -export const optionStyle = style([ - textVariants({ variant: 'normal' }), - atoms({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - cursor: { - base: 'pointer', - disabled: 'default', - }, - paddingX: '4', - paddingY: '3', - focusRing: { - focus: 'none', - hover: 'none', - }, - color: 'text100', - opacity: { - base: '100', - disabled: '50', - }, - }), - { - height: 52, - - selectors: { - '&[data-highlighted]': { - background: vars.colors.backgroundSecondary, - }, - '&[data-state="checked"]': { - background: vars.colors.backgroundControl, - }, - }, - }, -]) diff --git a/src/components/Skeleton/styles.css.ts b/src/components/Skeleton/styles.css.ts deleted file mode 100644 index 49ec5ae66..000000000 --- a/src/components/Skeleton/styles.css.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { keyframes } from '@vanilla-extract/css' -import { recipe, RecipeVariants } from '@vanilla-extract/recipes' - -import { vars } from '~/css' - -const skeletonAnimation = keyframes({ - '0%': { - backgroundPosition: '0% 50%', - }, - '50%': { - backgroundPosition: '100% 50%', - }, - '100%': { - backgroundPosition: '0% 50%', - }, -}) - -export const skeleton = recipe({ - base: { - backgroundImage: `linear-gradient(-45deg, transparent, ${vars.colors.backgroundSecondary}, transparent)`, - backgroundSize: '400% 400%', - backgroundRepeat: 'no-repeat', - animation: `${skeletonAnimation} 1s ease infinite`, - }, - - variants: { - size: { - sm: { - width: '96px', - height: vars.lineHeights[4], - }, - normal: { - width: '100px', - height: vars.lineHeights[5], - }, - md: { - width: '124px', - height: vars.lineHeights[6], - }, - lg: { - width: '124px', - height: vars.lineHeights[7], - }, - xl: { - width: '148px', - height: vars.lineHeights[9], - }, - }, - }, -}) - -export type SkeletonVariants = RecipeVariants diff --git a/src/components/Spinner/styles.css.ts b/src/components/Spinner/styles.css.ts deleted file mode 100644 index 82d4a5c0d..000000000 --- a/src/components/Spinner/styles.css.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { keyframes } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -const rotateAnimation = keyframes({ - '100%': { transform: 'rotate(1turn)' }, -}) - -export const variants = recipe({ - base: { - animation: `${rotateAnimation} 2s linear infinite`, - }, - - variants: { - size: { - sm: { - width: '16px', - height: '16px', - strokeWidth: 'calc(24 / 16 * 2px)', - }, - md: { - width: '24px', - height: '24px', - strokeWidth: '2px', - }, - lg: { - width: '32px', - height: '32px', - strokeWidth: 'calc(24 / 32 * 2px)', - }, - }, - }, -}) - -export type Variants = RecipeVariants diff --git a/src/components/Switch/styles.css.ts b/src/components/Switch/styles.css.ts deleted file mode 100644 index ad561db0a..000000000 --- a/src/components/Switch/styles.css.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { atoms, focusRing, vars } from '~/css' - -export const root = style([ - atoms({ - background: 'backgroundControl', - borderRadius: 'circle', - padding: '1', - position: 'relative', - cursor: 'pointer', - border: 'none', - }), - { - width: '48px', - height: '28px', - - selectors: { - '&[data-state="checked"]': { - background: vars.colors.gradientPrimary, - }, - - '&:disabled': { - cursor: 'default', - opacity: '0.5', - }, - }, - }, - focusRing, -]) - -export const thumb = style([ - atoms({ - position: 'absolute', - top: '0', - left: '0', - width: '5', - height: '5', - background: 'white', - borderRadius: 'circle', - }), - { - transition: 'transform 100ms ease-out, background 100ms ease-out', - transform: 'translateX(0)', - willChange: 'transform', - - selectors: { - '&[data-state="checked"]': { - transform: `translateX(${vars.space[5]})`, - }, - - [`${root}:hover:not([data-state="checked"]) &`]: {}, - }, - }, -]) diff --git a/src/components/TabbedNav/styles.css.ts b/src/components/TabbedNav/styles.css.ts deleted file mode 100644 index d7cbc87fa..000000000 --- a/src/components/TabbedNav/styles.css.ts +++ /dev/null @@ -1,48 +0,0 @@ -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: { - pill: {}, - line: [ - atoms({ lineHeight: '5' }), - { fontSize: '0.625rem', letterSpacing: '0.8px' }, - ], - }, - - active: { - true: atoms({ opacity: { hover: '100' } }), - false: {}, - }, - - disabled: { true: atoms({ opacity: '50' }) }, - }, - - compoundVariants: [ - { - variants: { active: true, variant: 'pill' }, - style: atoms({ background: 'buttonInverse', color: 'textInverse100' }), - }, - { - variants: { active: false, variant: 'pill' }, - style: atoms({ background: 'transparent', color: 'text80' }), - }, - { - variants: { active: true, variant: 'line' }, - style: atoms({ color: 'text100' }), - }, - { - variants: { active: false, variant: 'line' }, - style: atoms({ color: 'text80' }), - }, - ], -}) - -export type TabVariants = RecipeVariants diff --git a/src/components/Tabs/styles.css.ts b/src/components/Tabs/styles.css.ts deleted file mode 100644 index 046de0b72..000000000 --- a/src/components/Tabs/styles.css.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { atoms, vars } from '~/css' - -export const list = style([ - atoms({ - display: 'flex', - position: 'relative', - width: 'full', - borderRadius: 'md', - background: 'backgroundSecondary', - height: '12', - }), - { - selectors: { - '&:has(:focus-visible)': { - outline: 'none', - boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`, - }, - }, - }, -]) - -export const trigger = style([ - atoms({ - width: 'full', - height: 'full', - borderRadius: 'sm', - cursor: 'pointer', - position: 'relative', - background: 'transparent', - userSelect: 'none', - color: 'text80', - focusRing: 'none', - }), - { - appearance: 'none', - border: 'none', - zIndex: '2', - - selectors: { - '&[data-state="active"]': { - color: vars.colors.text100, - }, - '&[disabled]': { - opacity: 0.5, - // pointerEvents: 'none', - }, - }, - }, -]) - -export const selector = style([ - atoms({ - position: 'absolute', - borderRadius: 'sm', - top: '0', - left: '0', - height: '8', - background: 'buttonGlass', - pointerEvents: 'none', - }), - { - transition: 'transform 200ms ease-out', - }, -]) - -export const content = atoms({ focusRing: 'none' }) diff --git a/src/components/Text/styles.css.ts b/src/components/Text/styles.css.ts deleted file mode 100644 index fa283261e..000000000 --- a/src/components/Text/styles.css.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { Atoms, atoms } from '~/css' - -type TextVariant = - | 'inherit' - | 'xlarge' - | 'large' - | 'medium' - | 'normal' - | 'small' - | 'xsmall' - | 'code' - -interface TextVariantAtoms { - fontFamily: Atoms['fontFamily'] - fontSize: Atoms['fontSize'] - lineHeight: Atoms['lineHeight'] - letterSpacing: Atoms['letterSpacing'] - fontWeight: Atoms['fontWeight'] -} - -export const rawTextVariants: Record = { - inherit: { - fontFamily: 'inherit', - fontSize: 'inherit', - lineHeight: 'inherit', - letterSpacing: 'inherit', - fontWeight: 'inherit', - }, - - // Size variants - xlarge: { - fontFamily: 'body', - fontSize: 'xlarge', - lineHeight: '9', - letterSpacing: 'none', - fontWeight: 'bold', - }, - large: { - fontFamily: 'body', - fontSize: 'large', - lineHeight: '7', - letterSpacing: 'normal', - fontWeight: 'semibold', - }, - medium: { - fontFamily: 'body', - fontSize: 'medium', - lineHeight: '6', - letterSpacing: 'normal', - fontWeight: 'bold', - }, - normal: { - fontFamily: 'body', - fontSize: 'normal', - lineHeight: '5', - letterSpacing: 'wide', - fontWeight: 'normal', - }, - small: { - fontFamily: 'body', - fontSize: 'small', - lineHeight: '4', - letterSpacing: 'wide', - fontWeight: 'medium', - }, - xsmall: { - fontFamily: 'body', - fontSize: 'xsmall', - lineHeight: '4', - letterSpacing: 'wide', - fontWeight: 'bold', - }, - - // Semantic variants - code: { - fontFamily: 'mono', - fontSize: 'normal', - lineHeight: '5', - letterSpacing: 'none', - fontWeight: 'normal', - }, -} - -const toAtoms = (obj: T) => - Object.fromEntries( - Object.entries(obj).map(([key, value]) => [key, atoms(value)]) - ) as { [K in keyof T]: string } - -export const textVariants = recipe({ - variants: { - variant: toAtoms(rawTextVariants), - - ellipsis: { - true: atoms({ - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - }), - }, - - italic: { - true: { - fontStyle: 'italic', - }, - }, - - underline: { - true: { - textDecoration: 'underline', - }, - }, - - uppercase: { - true: { - textTransform: 'uppercase', - }, - }, - - capitalize: { - true: { - textTransform: 'capitalize', - }, - }, - - hidden: { - true: { - border: 0, - clip: 'rect(0 0 0 0)', - height: 1, - margin: '-1px', - overflow: 'hidden', - padding: 0, - position: 'absolute', - width: '1px', - }, - }, - }, -}) - -export type TextVariants = RecipeVariants diff --git a/src/components/TextArea/styles.css.ts b/src/components/TextArea/styles.css.ts deleted file mode 100644 index 9f762ac67..000000000 --- a/src/components/TextArea/styles.css.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { textVariants } from '~/components/Text/styles.css' -import { atoms, vars } from '~/css' - -export const textarea = style([ - textVariants({ variant: 'normal' }), - atoms({ - alignItems: 'center', - background: 'transparent', - color: 'text100', - borderRadius: 'md', - border: 'none', - outline: 'none', - width: 'full', - padding: '4', - }), - { - resize: 'none', - cursor: 'text', - boxShadow: `0 0 0 ${vars.borderWidths.thin} ${vars.colors.borderNormal} inset`, - - selectors: { - '&:disabled, &:disabled:hover': { - cursor: 'default', - opacity: 0.5, - }, - - '&:focus': { - opacity: '1 !important', - // outlineColor: vars.colors.borderFocus, - // outlineStyle: 'solid', - // outlineOffset: `calc(${vars.borderWidths.thick} * -1)`, - // outlineWidth: vars.borderWidths.thick, - boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`, - borderColor: 'transparent', - }, - }, - }, -]) - -export const resize = style({ - resize: 'vertical', -}) diff --git a/src/components/TextInput/styles.css.ts b/src/components/TextInput/styles.css.ts deleted file mode 100644 index c16954d58..000000000 --- a/src/components/TextInput/styles.css.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { textVariants } from '~/components/Text/styles.css' -import { atoms, vars } from '~/css' - -export const wrap = style([ - atoms({ - display: 'inline-flex', - alignItems: 'center', - background: 'transparent', - color: 'text100', - borderRadius: 'md', - // borderColor: 'borderNormal', - // borderStyle: 'solid', - // borderWidth: 'thin', - minWidth: 'full', - paddingX: '4', - gap: '2', - }), - { - cursor: 'text', - height: '52px', - - boxShadow: `0 0 0 ${vars.borderWidths.thin} ${vars.colors.borderNormal} inset`, - - selectors: { - '&:has(:disabled), &:has(:disabled):hover': { - cursor: 'default', - opacity: 0.5, - }, - - '&:focus-within': { - opacity: '1 !important', - // outlineColor: vars.colors.borderFocus, - // outlineStyle: 'solid', - // outlineOffset: `calc(${vars.borderWidths.thick} * -1)`, - // outlineWidth: vars.borderWidths.thick, - - boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`, - borderColor: 'transparent', - }, - }, - }, -]) - -export const wrapVariants = recipe({ - variants: { - borderRadius: { - xs: atoms({ borderRadius: 'xs' }), - sm: atoms({ borderRadius: 'sm' }), - md: atoms({ borderRadius: 'md' }), - }, - }, -}) - -export type WrapVariants = RecipeVariants - -export const input = recipe({ - base: atoms({ - display: 'block', - background: 'transparent', - color: 'text100', - border: 'none', - paddingX: '0', - paddingY: '4', - width: 'full', - height: 'full', - focusRing: 'none', - }), - - variants: { - numeric: { - false: textVariants({ variant: 'normal' }), - true: textVariants({ variant: 'large' }), - }, - }, -}) diff --git a/src/components/Toast/styles.css.ts b/src/components/Toast/styles.css.ts deleted file mode 100644 index 2de373491..000000000 --- a/src/components/Toast/styles.css.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { keyframes, style } from '@vanilla-extract/css' -import { recipe, RecipeVariants } from '@vanilla-extract/recipes' - -import { atoms, vars } from '~/css' - -export const viewport = style([ - atoms({ - position: 'fixed', - right: '0', - bottom: '0', - focusRing: 'none', - width: 'full', - gap: '2', - flexDirection: 'column', - }), - { - padding: vars.space[4], - paddingTop: 0, - zIndex: '1000', - listStyle: 'none', - maxWidth: '532px', - }, -]) - -export const swipeOut = keyframes({ - from: { - transform: `translateX(var(--radix-toast-swipe-end-x))`, - }, - to: { - transform: `translateX(100%)`, - }, -}) - -export const toast = recipe({ - base: { - willChange: 'transform, opacity', - - selectors: { - // '&[data-state="open"]': { - // }, - - // '&[data-state="closed"]': { - // }, - - '&[data-swipe="move"]': { - transform: `translateX(var(--radix-toast-swipe-move-x)) !important`, - }, - - '&[data-swipe="cancel"]': { - transition: `transform 200ms ease-out`, - transform: `translateX(0)`, - }, - - '&[data-swipe="end"]': { - animation: `${swipeOut} 200ms ease-out`, - }, - }, - }, - variants: { - variant: { - normal: {}, - success: { - color: 'positive', - }, - error: { - color: 'negative', - }, - }, - }, -}) - -export type ToastVariants = RecipeVariants diff --git a/src/components/TokenImage/styles.css.ts b/src/components/TokenImage/styles.css.ts deleted file mode 100644 index afe85b180..000000000 --- a/src/components/TokenImage/styles.css.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { style } from '@vanilla-extract/css' -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { atoms, selectorize } from '~/css' - -export const root = recipe({ - base: atoms({ - position: 'relative', - display: 'flex', - placeItems: 'center', - }), - - variants: { - size: { - xs: { - width: '12px', - height: '12px', - fontSize: '4px', - }, - - sm: { - width: '20px', - height: '20px', - fontSize: '8px', - }, - - md: { - width: '32px', - height: '32px', - fontSize: '9px', - }, - - lg: { - width: '40px', - height: '40px', - fontSize: '11px', - }, - - xl: { - width: '64px', - height: '64px', - fontSize: '16px', - }, - }, - }, -}) - -export type RootVariants = RecipeVariants - -export const img = style({ - maxWidth: '100%', - maxHeight: '100%', - objectFit: 'cover', - width: '100%', - - selectors: { - [`${selectorize(root({ size: 'xs' }))} &`]: { - maxWidth: '12px', - maxHeight: '12px', - }, - - [`${selectorize(root({ size: 'sm' }))} &`]: { - maxWidth: '20px', - maxHeight: '20px', - }, - - [`${selectorize(root({ size: 'md' }))} &`]: { - maxWidth: '32px', - maxHeight: '32px', - }, - - [`${selectorize(root({ size: 'lg' }))} &`]: { - maxWidth: '40px', - maxHeight: '40px', - }, - - [`${selectorize(root({ size: 'xl' }))} &`]: { - maxWidth: '64px', - maxHeight: '64px', - }, - }, -}) - -export const fallback = style([ - atoms({ - background: 'backgroundSecondary', - borderRadius: 'circle', - width: 'full', - height: 'full', - display: 'flex', - placeItems: 'center', - overflow: 'hidden', - }), - { - fontSize: 'inherit', - }, -]) - -// When using `withNetwork` prop we need to cut out the bottom right corner so the network image can be displayed -// with a cutout effect showing the background behind the token image -export const cutout = style({ - maskImage: `radial-gradient( - circle at 82% 82%, - transparent 22%, - black 0 - )`, -}) diff --git a/src/components/Tooltip/styles.css.ts b/src/components/Tooltip/styles.css.ts deleted file mode 100644 index 0ceb23efa..000000000 --- a/src/components/Tooltip/styles.css.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { style } from '@vanilla-extract/css' - -import { atoms, vars } from '~/css' - -export const content = style([ - atoms({ - backdropFilter: 'blur', - background: 'backgroundRaised', - borderRadius: 'sm', - paddingX: '4', - paddingBottom: '3', - paddingTop: '2', - }), - { - fill: vars.colors.backgroundRaised, - boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)', - }, -]) diff --git a/src/icons/styles.css.ts b/src/icons/styles.css.ts deleted file mode 100644 index d64a0abd8..000000000 --- a/src/icons/styles.css.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { RecipeVariants, recipe } from '@vanilla-extract/recipes' - -import { vars } from '~/css' - -export const iconVariants = recipe({ - base: { - flexShrink: 0, - }, - - variants: { - size: { - xs: { - height: vars.lineHeights[4], - width: vars.lineHeights[4], - }, - sm: { - height: vars.lineHeights[5], - width: vars.lineHeights[5], - }, - md: { - height: vars.lineHeights[6], - width: vars.lineHeights[6], - }, - lg: { - height: vars.lineHeights[7], - width: vars.lineHeights[7], - }, - xl: { - height: vars.lineHeights[9], - width: vars.lineHeights[9], - }, - }, - }, -}) - -export type IconVariants = RecipeVariants