Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: dark mode support #991

Merged
merged 3 commits into from
Aug 7, 2024
Merged

docs: dark mode support #991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
99630c9
update styles for light mode
kyhyco Aug 6, 2024
c63d97b
update ock to 0.28.3
kyhyco Aug 7, 2024
70527f8
update landing page
kyhyco Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions site/docs/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { OnchainKitProvider } from '@coinbase/onchainkit';
import { Address, Avatar, Badge, EthBalance, Name, Identity } from '@coinbase/onchainkit/identity';
import { Swap, SwapAmountInput, SwapButton, SwapMessage, SwapToggleButton } from '@coinbase/onchainkit/swap';
import { color } from '@coinbase/onchainkit/theme';
import {
import {
ConnectWallet,
Wallet,
WalletDropdown,
Expand All @@ -25,8 +25,8 @@ import SwapWrapper from '../components/SwapWrapper';
import TokenSelector from '../components/TokenSelector';
import WalletComponents from '../components/WalletComponents';
import TransactionWrapper from '../components/TransactionWrapper';
import {
Transaction,
import {
Transaction,
TransactionButton,
TransactionSponsor,
TransactionStatus,
Expand Down Expand Up @@ -68,8 +68,8 @@ import {
<div className="max-w-[1225px] mx-auto vp-doc relative px-[24px] mb-[26px] mt-0 md:px-0 md:mb-[64px]">
<div className="mx-auto max-w-2xl">
<div className="md:text-center flex flex-col gap-8 pt-[100px] pb-16">
<h1 className="text-center text-6xl md:text-9xl font-medium no-underline dark:text-white tracking-[-0.1rem]">OnchainKit</h1>
<div className="landing-page-hero text-center text-xl md:text-3xl dark:text-white">
<h1 className="text-center text-6xl md:text-9xl font-medium no-underline text-black dark:text-white tracking-[-0.1rem]">OnchainKit</h1>
<div className="landing-page-hero text-center text-xl md:text-3xl text-black dark:text-white">
<p>
Build your onchain apps with ready-to-use React components and Typescript utilities.
</p>
Expand Down Expand Up @@ -235,7 +235,7 @@ bun add @coinbase/onchainkit
<h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Tokens</h3>
</a>
</main>

<aside className="pb-6">
<p className="text-base md:text-base pb-[24px] md:text-left text-center">
Search [Tokens](/token/types#token) using [getTokens](/token/get-tokens) and display them with [TokenSearch](/token/token-search), [TokenChip](/token/token-chip), and [TokenRow](/token/token-row).
Expand Down Expand Up @@ -505,8 +505,8 @@ setFilteredTokens(filteredTokens);
<p className="w-[450px] max-w-full text-[#8A919E] text-[28px] font-light leading-9 md:text-[28px] text-center md:text-left">Take ownership over design or collaborate efficiently with designers</p>
</div>
<aside className="mx-auto md:mx-0">
<a
href="https://www.figma.com/community/file/1370194397345450683/onchainkit"
<a
href="https://www.figma.com/community/file/1370194397345450683/onchainkit"
className="flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]"
target="_blank"
rel="noopener noreferrer"
Expand Down Expand Up @@ -554,7 +554,7 @@ setFilteredTokens(filteredTokens);
<div className="flex flex-col md:flex-row md:items-end justify-between">
<div className="flex flex-col justify-between xl:flex-row xl:space-x-[25px]">
<div className="pt-[20px] xl:pt-[40px]">
<h2 className="dark:text-white text-4xl md:text-9xl text-center md:text-left font-medium tracking-[-0.1rem]">OnchainKit</h2>
<h2 className="text-black dark:text-white text-4xl md:text-9xl text-center md:text-left font-medium tracking-[-0.1rem]">OnchainKit</h2>
<p className="leading-7 text-xl text-gray-400 px-0 py-6 max-w-[500px] md:text-left text-center">
Build your onchain apps with ready-to-use React components and Typescript utilities.
</p>
Expand Down Expand Up @@ -585,7 +585,7 @@ setFilteredTokens(filteredTokens);
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5224 4.63938C17.534 4.80622 17.534 4.97306 17.534 5.14144C17.534 10.2719 13.6282 16.1889 6.48649 16.1889V16.1858C4.37679 16.1889 2.31092 15.5846 0.534897 14.4452C0.841664 14.4821 1.14997 14.5005 1.45904 14.5013C3.20739 14.5028 4.90575 13.9162 6.28121 12.836C4.61974 12.8045 3.16279 11.7212 2.65382 10.1397C3.23583 10.2519 3.83553 10.2289 4.40678 10.0728C2.59539 9.70681 1.2922 8.11531 1.2922 6.26702V6.21781C1.83193 6.51843 2.43624 6.68527 3.05439 6.70372C1.34833 5.56353 0.822443 3.29391 1.85269 1.51943C3.82399 3.94512 6.73252 5.41976 9.85478 5.57583C9.54186 4.22729 9.96933 2.81416 10.9781 1.86618C12.5419 0.396155 15.0014 0.471501 16.4714 2.03455C17.341 1.8631 18.1744 1.54403 18.9371 1.09196C18.6472 1.99073 18.0406 2.75419 17.2303 3.23933C17.9999 3.1486 18.7518 2.94255 19.4599 2.6281C18.9386 3.40924 18.282 4.08966 17.5224 4.63938Z" fill="#F9FAFB"/>
</svg>
</a>
</a>
<a href="https://warpcast.com/~/channel/onchainkit" title="View OnchainKit Warpcast page" target="_blank">
<img src="/assets/warpcast-logo.png" />
</a>
Expand All @@ -596,4 +596,4 @@ setFilteredTokens(filteredTokens);
This project is licensed under the [MIT License](https://github.com/coinbase/onchainkit/blob/main/LICENSE.md) · [Terms of Service](https://www.coinbase.com/legal/cloud/terms-of-service).
</p>
</footer>
</main>
</main>
49 changes: 31 additions & 18 deletions site/docs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,23 @@
}
}

.vocs_CodeGroup,
.vocs_Tabs_list,
.vocs_Tabs_content,
.vocs_CodeBlock,
.vocs_CodeTitle,
.vocs_Pre_wrapper,
.vocs_Heading::before,
.vocs_Code {
background-color: #1F2937 !important;
border-color: #1F2937 !important;
}
.dark {
.vocs_CodeGroup,
.vocs_Tabs_list,
.vocs_Tabs_content,
.vocs_CodeBlock,
.vocs_CodeTitle,
.vocs_Pre_wrapper,
.vocs_Heading::before,
.vocs_Code {
background-color: #1F2937 !important;
border-color: #1F2937 !important;
}

.vocs_Tabs_trigger {
background-color: #1F2937;
.vocs_Tabs_trigger {
background-color: #1F2937;
color: #F9FAFB;
}
}

.vocs_CodeGroup {
Expand All @@ -46,7 +49,6 @@
}

.vocs_Tabs_trigger {
color: #F9FAFB;
padding: 8px 16px;
border: none;
cursor: pointer;
Expand Down Expand Up @@ -120,18 +122,21 @@

.vocs_Content:has(#blobs) {
padding: 60px 0px 0px 0px;
background-color: #f9fafb;
}

.dark .vocs_Content:has(#blobs) {
padding: 60px 0px 0px 0px;
background-color: #030713;
.dark {
.vocs_Content:has(#blobs) {
padding: 60px 0px 0px 0px;
background-color: #030713;
}
}

.vocs_Content:has(#blobs) + .vocs_Footer {
display: none;
}

.dark .css-main-container {
.css-main-container {
background-color: #111827;
}

Expand All @@ -158,6 +163,14 @@
font-weight: 300;
letter-spacing: -1.6px;
line-height: 48px;
color: red;
}

.dark {
.landing-page .vocs_Header,
.landing-page .vocs_H1.vocs_Heading {
color: white;
}
}

.landing-page a.vocs_Anchor {
Expand Down
2 changes: 1 addition & 1 deletion site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"preview": "vocs preview"
},
"dependencies": {
"@coinbase/onchainkit": "0.28.0",
"@coinbase/onchainkit": "0.28.3",
"@types/react": "latest",
"@vercel/edge": "^1.1.1",
"permissionless": "^0.1.29",
Expand Down
16 changes: 12 additions & 4 deletions site/vocs.config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,20 @@ export default defineConfig({
],
theme: {
accentColor: '#73F7FF',
colorScheme: 'dark',
variables: {
color: {
background: '#151A26',
backgroundDark: '#0F131E',
textAccent: 'white',
background: {
dark: '#151A26',
light: 'white',
},
backgroundDark: {
dark: '#0F131E',
light: '#F3F4F6',
},
textAccent: {
dark: 'white',
light: '#030712',
},
},
},
},
Expand Down
10 changes: 5 additions & 5 deletions site/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,9 +479,9 @@ __metadata:
languageName: node
linkType: hard

"@coinbase/onchainkit@npm:0.28.0":
version: 0.28.0
resolution: "@coinbase/onchainkit@npm:0.28.0"
"@coinbase/onchainkit@npm:0.28.3":
version: 0.28.3
resolution: "@coinbase/onchainkit@npm:0.28.3"
dependencies:
"@rainbow-me/rainbowkit": "npm:^2.1.3"
"@tanstack/react-query": "npm:^5"
Expand All @@ -496,7 +496,7 @@ __metadata:
"@xmtp/frames-validator": ^0.6.0
react: ^18
react-dom: ^18
checksum: fea3d02c47d3e2ae7b2e743cadac97f3f0caef60cb482e6a6b186edbf5e1f75dfa17650e9628e2f0c383cdc34535db0f97fff32d44f42ba7f27bd68535a13583
checksum: 97fba7bb1a282aec36c4fd90ce8de8c47c2bc7c5304353c5a31644903ed71ab49275fc82b65e9f545e927a3837e2e63177f0ac9b8adf4af936bba911e2acb6c7
languageName: node
linkType: hard

Expand Down Expand Up @@ -7836,7 +7836,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "onchainkit@workspace:."
dependencies:
"@coinbase/onchainkit": "npm:0.28.0"
"@coinbase/onchainkit": "npm:0.28.3"
"@types/react": "npm:latest"
"@vercel/edge": "npm:^1.1.1"
permissionless: "npm:^0.1.29"
Expand Down