diff --git a/src/identity/components/Badge.test.tsx b/src/identity/components/Badge.test.tsx index 004c1d594b..c6c3e867b0 100644 --- a/src/identity/components/Badge.test.tsx +++ b/src/identity/components/Badge.test.tsx @@ -21,7 +21,7 @@ describe('Badge Component', () => { expect(badge).toHaveStyle(badgeStyle); expect(badge).toHaveClass('bg-ock-primary'); const ticker = screen.queryByTestId('ockBadgeTicker'); - expect(ticker).toHaveClass('fill-inverse'); + expect(ticker).toHaveClass('fill-ock-inverse'); }); }); }); diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx index 7268ae92ad..b9a2ff0c3f 100644 --- a/src/internal/svg/baseNameSvg.tsx +++ b/src/internal/svg/baseNameSvg.tsx @@ -1,3 +1,5 @@ +import { fill } from '../../styles/theme'; + export const baseNameSvg = ( ); diff --git a/src/internal/svg/closeSvg.tsx b/src/internal/svg/closeSvg.tsx index 6f7c8844b7..29d3cce10b 100644 --- a/src/internal/svg/closeSvg.tsx +++ b/src/internal/svg/closeSvg.tsx @@ -1,3 +1,5 @@ +import { fill } from '../../styles/theme'; + export const closeSvg = ( Close SVG ); diff --git a/src/internal/svg/defaultAvatarSVG.tsx b/src/internal/svg/defaultAvatarSVG.tsx index 9368202dbc..05a4ef09dd 100644 --- a/src/internal/svg/defaultAvatarSVG.tsx +++ b/src/internal/svg/defaultAvatarSVG.tsx @@ -1,3 +1,5 @@ +import { fill } from '../../styles/theme'; + export const defaultAvatarSVG = ( ); diff --git a/src/internal/svg/disconnectSvg.tsx b/src/internal/svg/disconnectSvg.tsx index 49d2c7ce96..9899ba7532 100644 --- a/src/internal/svg/disconnectSvg.tsx +++ b/src/internal/svg/disconnectSvg.tsx @@ -1,3 +1,5 @@ +import { fill } from '../../styles/theme'; + export const disconnectSvg = ( ); diff --git a/src/internal/svg/walletSvg.tsx b/src/internal/svg/walletSvg.tsx index 20610b095e..5852e05ec4 100644 --- a/src/internal/svg/walletSvg.tsx +++ b/src/internal/svg/walletSvg.tsx @@ -1,3 +1,5 @@ +import { fill } from '../../styles/theme'; + export const walletSvg = ( ); diff --git a/src/styles/index.css b/src/styles/index.css index 32b754eca4..1044e0bbdc 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1 +1,113 @@ -@import url("../token/components/TokenSelectDropdown.css"); +/* Border */ +.border-ock-default { + border-color: var(--bg-ock-default); +} + +/* Fill */ +.fill-ock-default-reverse { + fill: var(--bg-ock-default-reverse); +} + +/* Placeholder */ +.placeholder-ock-default::placeholder { + color: var(--text-ock-foreground-muted); +} + +/* Scrollbar */ +.ock-scrollbar { + scrollbar-width: thin; + scrollbar-color: #d1d5db #ffffff; +} + +/* Shadow */ +.shadow-ock-default { + box-shadow: 0px 8px 12px 0px #5B616E1F; +} + +.dark .shadow-ock-default { + box-shadow: 0px 8px 12px 0px #5B616E1F; +} + +/* Text */ +.text-ock-inverse { + color: var(--text-ock-inverse); +} +.text-ock-foreground { + color: var(--text-ock-foreground); +} +.text-ock-foreground-muted { + color: var(--text-ock-foreground-muted); +} +.text-ock-error { + color: var(--text-ock-error); +} +.text-ock-primary { + color: var(--text-ock-primary); +} +.text-ock-success { + color: var(--text-ock-success); +} +.text-ock-warning { + color: var(--text-ock-warning); +} +.text-ock-disabled { + color: var(--text-ock-disabled); +} +/* Background */ +.bg-ock-default { + background-color: var(--bg-ock-default); +} +.bg-ock-default-hover { + background-color: var(--bg-ock-default-hover); +} +.bg-ock-default-active { + background-color: var(--bg-ock-default-active); +} +.bg-ock-alternate { + background-color: var(--bg-ock-alternate); +} +.bg-ock-alternate-hover { + background-color: var(--bg-ock-alternate-hover); +} +.bg-ock-alternate-active { + background-color: var(--bg-ock-alternate-active); +} +.bg-ock-inverse { + background-color: var(--bg-ock-inverse); +} +.bg-ock-inverse-hover { + background-color: var(--bg-ock-inverse-hover); +} +.bg-ock-inverse-active { + background-color: var(--bg-ock-inverse-active); +} +.bg-ock-primary { + background-color: var(--bg-ock-primary); +} +.bg-ock-primary-hover { + background-color: var(--bg-ock-primary-hover); +} +.bg-ock-primary-active { + background-color: var(--bg-ock-primary-active); +} +.bg-ock-secondary { + background-color: var(--bg-ock-secondary); +} +.bg-ock-secondary-hover { + background-color: var(--bg-ock-secondary-hover); +} +.bg-ock-secondary-active { + background-color: var(--bg-ock-secondary-active); +} +.bg-ock-error { + background-color: var(--bg-ock-error); +} +.bg-ock-warning { + background-color: var(--bg-ock-warning); +} +.bg-ock-success { + background-color: var(--bg-ock-success); +} +.bg-ock-default-reverse { + background-color: var(--bg-ock-default-reverse); +} diff --git a/src/styles/tailwind-base.css b/src/styles/tailwind-base.css index 52d6f62f92..df34d5041d 100644 --- a/src/styles/tailwind-base.css +++ b/src/styles/tailwind-base.css @@ -29,86 +29,37 @@ --bg-ock-error: theme(colors.rose.600); --bg-ock-warning: theme(colors.orange.600); --bg-ock-success: theme(colors.lime.300); + --bg-ock-default-reverse: theme(colors.gray.950); } - /* Text */ - .text-ock-inverse { - color: var(--text-ock-inverse); - } - .text-ock-foreground { - color: var(--text-ock-foreground); - } - .text-ock-foreground-muted { - color: var(--text-ock-foreground-muted); - } - .text-ock-error { - color: var(--text-ock-error); - } - .text-ock-primary { - color: var(--text-ock-primary); - } - .text-ock-success { - color: var(--text-ock-success); - } - .text-ock-warning { - color: var(--text-ock-warning); - } - .text-ock-disabled { - color: var(--text-ock-disabled); - } - /* Background */ - .bg-ock-default { - background-color: var(--bg-ock-default); - } - .bg-ock-default-hover { - background-color: var(--bg-ock-default-hover); - } - .bg-ock-default-active { - background-color: var(--bg-ock-default-active); - } - .bg-ock-alternate { - background-color: var(--bg-ock-alternate); - } - .bg-ock-alternate-hover { - background-color: var(--bg-ock-alternate-hover); - } - .bg-ock-alternate-active { - background-color: var(--bg-ock-alternate-active); - } - .bg-ock-inverse { - background-color: var(--bg-ock-inverse); - } - .bg-ock-inverse-hover { - background-color: var(--bg-ock-inverse-hover); - } - .bg-ock-inverse-active { - background-color: var(--bg-ock-inverse-active); - } - .bg-ock-primary { - background-color: var(--bg-ock-primary); - } - .bg-ock-primary-hover { - background-color: var(--bg-ock-primary-hover); - } - .bg-ock-primary-active { - background-color: var(--bg-ock-primary-active); - } - .bg-ock-secondary { - background-color: var(--bg-ock-secondary); - } - .bg-ock-secondary-hover { - background-color: var(--bg-ock-secondary-hover); - } - .bg-ock-secondary-active { - background-color: var(--bg-ock-secondary-active); - } - .bg-ock-error { - background-color: var(--bg-ock-error); - } - .bg-ock-warning { - background-color: var(--bg-ock-warning); - } - .bg-ock-success { - background-color: var(--bg-ock-success); + + .dark { + --text-ock-inverse: theme(colors.gray.950); + --text-ock-foreground: theme(colors.gray.50); + --text-ock-foreground-muted: theme(colors.gray.400); + --text-ock-error: theme(colors.rose.400); + --text-ock-primary: theme(colors.indigo.400); + --text-ock-success: theme(colors.lime.400); + --text-ock-warning: theme(colors.orange.400); + --text-ock-disabled: theme(colors.gray.600); + --bg-ock-default: theme(colors.gray.950); + --bg-ock-default-hover: theme(colors.gray.800); + --bg-ock-default-active: theme(colors.gray.700); + --bg-ock-alternate: theme(colors.gray.800); + --bg-ock-alternate-hover: theme(colors.gray.700); + --bg-ock-alternate-active: theme(colors.gray.600); + --bg-ock-inverse: theme(colors.gray.900); + --bg-ock-inverse-hover: theme(colors.gray.800); + --bg-ock-inverse-active: theme(colors.gray.700); + --bg-ock-primary: theme(colors.indigo.400); + --bg-ock-primary-hover: theme(colors.indigo.300); + --bg-ock-primary-active: theme(colors.indigo.200); + --bg-ock-secondary: theme(colors.slate.800); + --bg-ock-secondary-hover: theme(colors.slate.700); + --bg-ock-secondary-active: theme(colors.slate.600); + --bg-ock-error: theme(colors.rose.400); + --bg-ock-warning: theme(colors.orange.400); + --bg-ock-success: theme(colors.lime.700); + --bg-ock-default-reverse: theme(colors.gray.50); } } diff --git a/src/styles/theme.ts b/src/styles/theme.ts index b02920b707..440ceb13a5 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -27,7 +27,7 @@ export const pressable = { 'cursor-pointer bg-ock-primary active:bg-ock-primary-active hover:bg-ock-primary-hover', secondary: 'cursor-pointer bg-ock-secondary active:bg-ock-secondary-active hover:bg-ock-secondary-hover', - shadow: 'shadow-[0px_8px_12px_0px_#5B616E1F]', + shadow: 'shadow-ock-default', disabled: 'opacity-[0.38]', } as const; @@ -54,12 +54,14 @@ export const color = { } as const; export const fill = { - inverse: 'fill-inverse', - foreground: 'fill-foreground', - foregroundMuted: 'fill-foreground-muted', - error: 'fill-error', - primary: 'fill-primary', - success: 'fill-success', - warning: 'fill-warning', - disabled: 'fill-disabled', + defaultReverse: 'fill-ock-default-reverse', + inverse: 'fill-ock-inverse', +} as const; + +export const border = { + default: 'border-ock-default', +} as const; + +export const placeholder = { + default: 'placeholder-ock-default', } as const; diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index ac50c10e4d..50a09c5a22 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -74,15 +74,13 @@ export function SwapAmountInput({ className={cn( background.alternate, 'box-border flex w-full flex-col items-start', - 'rounded-md border-b border-solid p-4', + 'rounded-md p-4', className, )} data-testid="ockSwapAmountInput_Container" >
- - {label} - + {label}
- {''} + {''}
{source.balance && ( {`Balance: ${getRoundedAmount(source.balance, 8)}`} )} {type === 'from' && ( diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx index 7552b7a9ae..b6c9ef8334 100644 --- a/src/swap/components/SwapButton.tsx +++ b/src/swap/components/SwapButton.tsx @@ -30,7 +30,7 @@ export function SwapButton({ className={cn( background.primary, 'w-full rounded-xl', - 'mt-4 px-4 py-3 font-medium text-base text-white leading-6', + 'mt-4 px-4 py-3', isDisabled && pressable.disabled, text.headline, className, diff --git a/src/swap/components/SwapToggleButton.tsx b/src/swap/components/SwapToggleButton.tsx index 0ea2ed4132..d85d38ede1 100644 --- a/src/swap/components/SwapToggleButton.tsx +++ b/src/swap/components/SwapToggleButton.tsx @@ -1,4 +1,4 @@ -import { cn, pressable } from '../../styles/theme'; +import { border, cn, fill, pressable } from '../../styles/theme'; import type { SwapToggleButtonReact } from '../types'; import { useSwapContext } from './SwapProvider'; @@ -16,7 +16,7 @@ const toggleIcon = ( @@ -40,9 +40,10 @@ export function SwapToggleButton({ className }: SwapToggleButtonReact) { type="button" className={cn( pressable.alternate, + border.default, '-translate-x-2/4 -translate-y-2/4 absolute top-2/4 left-2/4', 'flex h-12 w-12 items-center justify-center', - 'rounded-lg border-4 border-gray-100 border-solid', + 'rounded-lg border-4 border-solid', className, )} data-testid="SwapTokensButton" diff --git a/src/token/components/SearchIcon.tsx b/src/token/components/SearchIcon.tsx index 9c0d23eb44..189b074a63 100644 --- a/src/token/components/SearchIcon.tsx +++ b/src/token/components/SearchIcon.tsx @@ -1,3 +1,5 @@ +import { fill } from '../../styles/theme'; + export function SearchIcon() { return ( ); diff --git a/src/token/components/TokenRow.tsx b/src/token/components/TokenRow.tsx index 1f28a64bd4..d8b443d7c4 100644 --- a/src/token/components/TokenRow.tsx +++ b/src/token/components/TokenRow.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { cn, pressable, text } from '../../styles/theme'; +import { cn, color, pressable, text } from '../../styles/theme'; import type { TokenRowReact } from '../types'; import { formatAmount } from '../utils/formatAmount'; import { TokenImage } from './TokenImage'; @@ -28,7 +28,7 @@ export const TokenRow = memo(function TokenRow({ {token.name} {!hideSymbol && ( - + {token.symbol} )} @@ -36,7 +36,7 @@ export const TokenRow = memo(function TokenRow({ {formatAmount(amount, { minimumFractionDigits: 2, diff --git a/src/token/components/TokenSearch.tsx b/src/token/components/TokenSearch.tsx index 8bdb8fcd97..645ee00b1d 100644 --- a/src/token/components/TokenSearch.tsx +++ b/src/token/components/TokenSearch.tsx @@ -1,6 +1,7 @@ import { useCallback, useState } from 'react'; import { TextInput } from '../../internal/components/TextInput'; -import { cn, color, pressable } from '../../styles/theme'; +import { closeSvg } from '../../internal/svg/closeSvg'; +import { cn, color, placeholder, pressable } from '../../styles/theme'; import type { TokenSearchReact } from '../types'; import { SearchIcon } from './SearchIcon'; @@ -25,7 +26,8 @@ export function TokenSearch({ className={cn( pressable.alternate, color.foreground, - 'w-full rounded-xl py-2 pr-5 pl-12 placeholder-[#5B616E] outline-none', + placeholder.default, + 'w-full rounded-xl py-2 pr-5 pl-12 outline-none', className, )} placeholder="Search for a token" @@ -41,20 +43,7 @@ export function TokenSearch({ className="-translate-y-1/2 absolute top-1/2 right-4" onClick={handleClear} > - - - + {closeSvg} )}
diff --git a/src/token/components/TokenSelectButton.tsx b/src/token/components/TokenSelectButton.tsx index 5b85ef177c..5e87903d05 100644 --- a/src/token/components/TokenSelectButton.tsx +++ b/src/token/components/TokenSelectButton.tsx @@ -1,5 +1,5 @@ import { type ForwardedRef, forwardRef } from 'react'; -import { cn, pressable, text } from '../../styles/theme'; +import { cn, fill, pressable, text } from '../../styles/theme'; import type { TokenSelectButtonReact } from '../types'; import { TokenImage } from './TokenImage'; @@ -17,7 +17,7 @@ function CaretUp() { > ); @@ -37,7 +37,7 @@ function CaretDown() { > ); diff --git a/src/token/components/TokenSelectDropdown.css b/src/token/components/TokenSelectDropdown.css deleted file mode 100644 index f1f8a88275..0000000000 --- a/src/token/components/TokenSelectDropdown.css +++ /dev/null @@ -1,4 +0,0 @@ -.ock-scrollbar { - scrollbar-width: thin; - scrollbar-color: #d1d5db #ffffff; -} diff --git a/src/transaction/components/TransactionButton.tsx b/src/transaction/components/TransactionButton.tsx index 2f71579de1..0ea65b44b4 100644 --- a/src/transaction/components/TransactionButton.tsx +++ b/src/transaction/components/TransactionButton.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { Spinner } from '../../internal/components/Spinner'; import { checkmarkSvg } from '../../internal/svg/checkmarkSvg'; -import { background, cn, pressable, text } from '../../styles/theme'; +import { background, cn, color, pressable, text } from '../../styles/theme'; import type { TransactionButtonReact } from '../types'; import { isSpinnerDisplayed } from '../utils'; import { useTransactionContext } from './TransactionProvider'; @@ -72,7 +72,9 @@ export function TransactionButton({ {displaySpinner ? ( ) : ( - + {buttonContent} )} diff --git a/src/transaction/components/TransactionStatusLabel.test.tsx b/src/transaction/components/TransactionStatusLabel.test.tsx index cea2d4188c..3e42d3f641 100644 --- a/src/transaction/components/TransactionStatusLabel.test.tsx +++ b/src/transaction/components/TransactionStatusLabel.test.tsx @@ -11,13 +11,13 @@ describe('TransactionStatusLabel', () => { it('renders transaction status label', () => { (useGetTransactionStatus as vi.Mock).mockReturnValue({ label: 'Successful!', - labelClassName: 'text-foreground-muted', + labelClassName: 'text-ock-foreground-muted', }); render(); const label = screen.getByText('Successful!'); expect(label).toBeInTheDocument(); - expect(label).toHaveClass('text-foreground-muted'); + expect(label).toHaveClass('text-ock-foreground-muted'); }); }); diff --git a/tailwind.config.js b/tailwind.config.js index a7457e153c..3762c3625e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,7 @@ /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{ts,tsx}'], + safelist: ['dark'], theme: { fontFamily: { sans: ['Inter', 'sans-serif'], @@ -9,46 +10,6 @@ export default { fontFamily: { display: 'DM Sans, sans-serif', }, - fill: { - default: 'var(--bg-default)', - alternate: 'var(--bg-alternate)', - inverse: 'var(--bg-inverse)', - primary: 'var(--bg-primary)', - secondary: 'var(--bg-secondary)', - error: 'var(--bg-error)', - warning: 'var(--bg-warning)', - success: 'var(--bg-success)', - }, - textColor: { - inverse: 'var(--text-inverse)', - foreground: 'var(--text-foreground)', - 'foreground-muted': 'var(--text-foreground-muted)', - error: 'var(--text-error)', - primary: 'var(--text-primary)', - success: 'var(--text-success)', - warning: 'var(--text-warning)', - disabled: 'var(--text-disabled)', - }, - backgroundColor: { - default: 'var(--bg-default)', - 'default-hover': 'var(--bg-default-hover)', - 'default-active': 'var(--bg-default-active)', - alternate: 'var(--bg-alternate)', - 'alternate-hover': 'var(--bg-alternate-hover)', - 'alternate-active': 'var(--bg-alternate-active)', - inverse: 'var(--bg-inverse)', - 'inverse-hover': 'var(--bg-inverse-hover)', - 'inverse-active': 'var(--bg-inverse-active)', - primary: 'var(--bg-primary)', - 'primary-hover': 'var(--bg-primary-hover)', - 'primary-active': 'var(--bg-primary-active)', - secondary: 'var(--bg-secondary)', - 'secondary-hover': 'var(--bg-secondary-hover)', - 'secondary-active': 'var(--bg-secondary-active)', - error: 'var(--bg-error)', - warning: 'var(--bg-warning)', - success: 'var(--bg-success)', - }, keyframes: { fadeInRight: { '0%': {