sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-04-16 15:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

code boxes light

Browse Source
This commit is contained in:
Pascal Fischer
2023-05-26 17:35:12 +02:00
parent 6b45ae79b4
commit 7a08442e73
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Code.jsx
View File

@@ -64,7 +64,7 @@ function CopyButton({ code }) {
'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
copied
? 'bg-orange-400/10 ring-1 ring-inset ring-orange-400/20'
: 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
: 'bg-black/5 dark:bg-white/5 hover:bg-black/7.5 dark:hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
)}
onClick={() => {
window.navigator.clipboard.writeText(code).then(() => {
@@ -101,7 +101,7 @@ function CodePanelHeader({ tag, label }) {
}
return (
<div className="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
<div className="flex h-9 items-center gap-2 border-y border-b-black/7.5 border-t-transparent bg-white/2.5 bg-zinc-100 px-4 dark:border-b-white/5 dark:bg-white/1">
{tag && (
<div className="dark flex">
<Tag variant="small">{tag}</Tag>
@@ -142,9 +142,9 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
}
return (
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-300 dark:border-zinc-800 bg-stone-100 dark:bg-zinc-900 px-4 dark:border-zinc-800 dark:bg-transparent">
{title && (
<h3 className="mr-auto pt-3 text-xs font-semibold text-white">
<h3 className="mr-auto pt-3 text-xs font-semibold text-black dark:text-white">
{title}
</h3>
)}
@@ -156,7 +156,7 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
childIndex === selectedIndex
? 'border-orange-500 text-orange-400'
: 'border-transparent text-zinc-400 hover:text-zinc-300'
: 'border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300'
)}
>
{getPanelTitle(child.props)}
@@ -266,7 +266,7 @@ export function CodeGroup({ children, title, ...props }) {
<CodeGroupContext.Provider value={true}>
<Container
{...containerProps}
className="not-prose my-6 overflow-hidden rounded-l bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
className="not-prose my-6 overflow-hidden rounded-md bg-zinc-50 ring-1 ring-black/10 dark:bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
>
<CodeGroupHeader title={title} {...headerProps}>
{children}

13
src/styles/tailwind.css
View File

@@ -1,4 +1,17 @@
:root {
--shiki-color-text: theme('colors.black');
--shiki-token-constant: theme('colors.orange.600');
--shiki-token-string: theme('colors.orange.600');
--shiki-token-comment: theme('colors.zinc.500');
--shiki-token-keyword: theme('colors.sky.600');
--shiki-token-parameter: theme('colors.pink.600');
--shiki-token-function: theme('colors.violet.600');
--shiki-token-string-expression: theme('colors.orange.600');
--shiki-token-punctuation: theme('colors.zinc.800');
}
/* Dark mode styles */
:root.dark {
--shiki-color-text: theme('colors.white');
--shiki-token-constant: theme('colors.orange.300');
--shiki-token-string: theme('colors.orange.300');