Skip to content

Commit

Permalink
feat: dark mode (#977)
Browse files Browse the repository at this point in the history
  • Loading branch information
kyhyco authored Aug 6, 2024
1 parent 84cfdd2 commit a0124f3
Show file tree
Hide file tree
Showing 20 changed files with 202 additions and 178 deletions.
2 changes: 1 addition & 1 deletion src/identity/components/Badge.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
6 changes: 4 additions & 2 deletions src/internal/svg/baseNameSvg.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { fill } from '../../styles/theme';

export const baseNameSvg = (
<svg
data-testid="ockbaseNameSvg"
Expand All @@ -12,11 +14,11 @@ export const baseNameSvg = (
>
<path
d="M11.75 3.75C11.75 5.82107 10.0711 7.5 8 7.5C5.92893 7.5 4.25 5.82107 4.25 3.75C4.25 1.67893 5.92893 0 8 0C10.0711 0 11.75 1.67893 11.75 3.75Z"
fill="#0A0B0D"
className={fill.defaultReverse}
/>
<path
d="M10.99 8.01001C12.21 8.04001 13.3 8.80001 13.73 9.95001L16 16H0L2.27 9.95001C2.7 8.80001 3.79 8.03001 5.01 8.01001C5.05 8.04001 6.37 9.00001 8 9.00001C9.63 9.00001 10.95 8.04001 10.99 8.01001Z"
fill="#0A0B0D"
className={fill.defaultReverse}
/>
</svg>
);
4 changes: 3 additions & 1 deletion src/internal/svg/closeSvg.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { fill } from '../../styles/theme';

export const closeSvg = (
<svg
width="16"
Expand All @@ -9,7 +11,7 @@ export const closeSvg = (
<title>Close SVG</title>
<path
d="M2.14921 1L1 2.1492L6.8508 8L1 13.8508L2.1492 15L8 9.1492L13.8508 15L15 13.8508L9.14921 8L15 2.1492L13.8508 1L8 6.8508L2.14921 1Z"
fill="#030712"
className={fill.defaultReverse}
/>
</svg>
);
4 changes: 3 additions & 1 deletion src/internal/svg/defaultAvatarSVG.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { fill } from '../../styles/theme';

export const defaultAvatarSVG = (
<svg
data-testid="ockAvatarDefaultSvg"
Expand All @@ -12,7 +14,7 @@ export const defaultAvatarSVG = (
>
<path
d="M20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40ZM25.6641 13.9974C25.6641 10.8692 23.1282 8.33333 20.0001 8.33333C16.8719 8.33333 14.336 10.8692 14.336 13.9974C14.336 17.1256 16.8719 19.6615 20.0001 19.6615C23.1282 19.6615 25.6641 17.1256 25.6641 13.9974ZM11.3453 23.362L9.53476 28.1875C12.2141 30.8475 15.9019 32.493 19.974 32.5H20.026C24.0981 32.493 27.7859 30.8475 30.4653 28.1874L28.6547 23.362C28.0052 21.625 26.3589 20.4771 24.5162 20.4318C24.4557 20.4771 22.462 21.9271 20 21.9271C17.538 21.9271 15.5443 20.4771 15.4839 20.4318C13.6412 20.462 11.9948 21.625 11.3453 23.362Z"
fill="#0A0B0D"
className={fill.defaultReverse}
/>
</svg>
);
6 changes: 4 additions & 2 deletions src/internal/svg/disconnectSvg.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { fill } from '../../styles/theme';

export const disconnectSvg = (
<svg
role="img"
Expand All @@ -10,11 +12,11 @@ export const disconnectSvg = (
>
<path
d="M10.9735 2.69696L10.9735 4.52272L5.49622 4.52272L5.49622 15.4773L10.9735 15.4773L10.9735 17.303L3.67046 17.303L3.67046 2.69696L10.9735 2.69696Z"
fill="#0A0B0D"
className={fill.defaultReverse}
/>
<path
d="M13.4614 13.5207L16.7804 10.0235L13.4783 6.34848L12.1202 7.56872L13.4931 9.09667L7.32216 9.09667L7.32216 10.9224L13.4102 10.9224L12.1371 12.2639L13.4614 13.5207Z"
fill="#0A0B0D"
className={fill.defaultReverse}
/>
</svg>
);
4 changes: 3 additions & 1 deletion src/internal/svg/walletSvg.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { fill } from '../../styles/theme';

export const walletSvg = (
<svg
role="img"
Expand All @@ -12,7 +14,7 @@ export const walletSvg = (
fillRule="evenodd"
clipRule="evenodd"
d="M0 10C0 15.5222 4.47778 20 10 20C15.5222 20 20 15.5222 20 10C20 4.47778 15.5222 0 10 0C4.47778 0 0 4.47778 0 10ZM7.44444 6.77778C7.075 6.77778 6.77778 7.075 6.77778 7.44444V12.5556C6.77778 12.925 7.075 13.2222 7.44444 13.2222H12.5556C12.925 13.2222 13.2222 12.925 13.2222 12.5556V7.44444C13.2222 7.075 12.925 6.77778 12.5556 6.77778H7.44444Z"
fill="#030712"
className={fill.defaultReverse}
/>
</svg>
);
114 changes: 113 additions & 1 deletion src/styles/index.css
Original file line number Diff line number Diff line change
@@ -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);
}
109 changes: 30 additions & 79 deletions src/styles/tailwind-base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
20 changes: 11 additions & 9 deletions src/styles/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
10 changes: 4 additions & 6 deletions src/swap/components/SwapAmountInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<div className="flex w-full items-center justify-between">
<span className={cn(text.label2, 'text-foreground-muted')}>
{label}
</span>
<span className={cn(text.label2, color.foregroundMuted)}>{label}</span>
</div>
<div className="flex w-full items-center justify-between">
<TextInput
Expand Down Expand Up @@ -112,11 +110,11 @@ export function SwapAmountInput({
)}
</div>
<div className="mt-4 flex w-full justify-between">
<span className={cn(text.label2, 'text-foregroune-muted')}>{''}</span>
<span className={cn(text.label2, color.foregroundMuted)}>{''}</span>
<div className="flex items-center">
{source.balance && (
<span
className={cn(text.label2, 'text-foreground-muted')}
className={cn(text.label2, color.foregroundMuted)}
>{`Balance: ${getRoundedAmount(source.balance, 8)}`}</span>
)}
{type === 'from' && (
Expand Down
2 changes: 1 addition & 1 deletion src/swap/components/SwapButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit a0124f3

Please sign in to comment.