amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-27 03:08:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

[beta] Update CodeStep colors (#5089)

Browse Source 
* [beta] Update CodeStep colors

* Add back green
This commit is contained in:
Ricky
2022-09-23 15:02:00 -04:00
committed by GitHub
parent 6329438fdd
commit e0720af286
3 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
beta/src/components/MDX/CodeBlock/CodeBlock.tsx
View File

@@ -49,10 +49,14 @@ const CodeBlock = function CodeBlock({
className: cn(
'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-1 py-[1.5px] border-b-[2px] border-opacity-60',
{
'bg-blue-40 border-blue-40': line.step === 1,
'bg-yellow-40 border-yellow-40': line.step === 2,
'bg-green-40 border-green-40': line.step === 3,
'bg-purple-40 border-purple-40': line.step === 4,
'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30 font-bold':
line.step === 1,
'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30 font-bold':
line.step === 2,
'bg-green-40 border-green-40 text-green-60 dark:text-green-30 font-bold':
line.step === 3,
'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30 font-bold':
line.step === 4,
}
),
})

12
beta/src/components/MDX/MDXComponents.tsx
View File

@@ -37,10 +37,14 @@ function CodeStep({children, step}: {children: any; step: number}) {
className={cn(
'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-[6px] py-[1.5px] border-b-[2px] border-opacity-60',
{
'bg-blue-40 border-blue-40': step === 1,
'bg-yellow-40 border-yellow-40': step === 2,
'bg-green-40 border-green-40': step === 3,
'bg-purple-40 border-purple-40': step === 4,
'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30':
step === 1,
'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30':
step === 2,
'bg-green-40 border-green-40 text-green-60 dark:text-green-30':
step === 3,
'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30':
step === 4,
}
)}>
{children}

5
beta/src/styles/index.css
View File

@@ -213,14 +213,15 @@
}
.code-step * {
color: black !important;
color: inherit !important;
}
.code-step code {
background: none !important;
padding: 2px !important;
}
html.dark .code-step * {
color: white !important;
color: inherit !important;
}
.mdx-heading {