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

add tertiary variable

Browse Source
This commit is contained in:
Dan Lebo
2023-02-05 12:21:25 -08:00
parent aa18b07b1e
commit 1cd340d7c8
5 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
beta/colors.js
View File

@@ -8,6 +8,8 @@ module.exports = {
'primary-dark': '#F6F7F9', // gray-5
secondary: '#404756', // gray-70
'secondary-dark': '#EBECF0', // gray-10
tertiary: '#5E687E', // gray-50
'tertiary-dark': '#99A1B3', // gray-30
link: '#087EA4', // blue-50
'link-dark': '#149ECA', // blue-40
syntax: '#EBECF0', // gray-10
@@ -28,7 +30,7 @@ module.exports = {
'gray-80': '#343A46',
'gray-70': '#404756',
'gray-60': '#4E5769',
'gray-50': '#5E687E', // unused
'gray-50': '#5E687E',
'gray-40': '#78839B',
'gray-30': '#99A1B3',
'gray-20': '#BCC1CD',

2
beta/src/components/DocsFooter.tsx
View File

@@ -75,7 +75,7 @@ function FooterLink({
}
)}>
<IconNavArrow
className="text-gray-30 dark:text-gray-50 inline group-focus:text-link dark:group-focus:text-link-dark"
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
displayDirection={type === 'Previous' ? 'left' : 'right'}
/>
<span>

8
beta/src/components/Layout/HomeContent.js
View File

@@ -344,7 +344,7 @@ function Example1() {
<div className="flex-col-reverse gap-0 lg:gap-5 lg:rounded-xl bg-gray-10 dark:bg-gray-70 shadow-inner lg:flex-row flex grow w-full mx-auto items-center">
<div className="lg:-m-5 h-full shadow-xl lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col border-t lg:border border-border dark:border-border-dark">
<div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-border dark:border-border-dark">
<h3 className="text-sm my-1 mx-5 text-gray-50 dark:text-gray-30 select-none">
<h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
Comment.js
</h3>
</div>
@@ -431,7 +431,7 @@ function Example2() {
<div className="flex-col-reverse gap-0 lg:gap-5 bg-gray-05 dark:gray-95 shadow-inner lg:rounded-xl lg:flex-row flex grow w-full mx-auto items-center">
<div className="lg:-m-5 h-full shadow-xl lg:rounded-xl bg-wash dark:bg-gray-95 w-full flex grow flex-col border-t lg:border border-border dark:border-border-dark">
<div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-xl border-b border-border dark:border-border-dark">
<h3 className="text-sm my-1 mx-5 text-gray-50 dark:text-gray-30 select-none">
<h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
CommentList.js
</h3>
</div>
@@ -564,7 +564,7 @@ function Example3() {
<div className="flex-col-reverse gap-0 lg:gap-5 lg:rounded-xl bg-gray-10 dark:bg-gray-70 shadow-inner lg:flex-row flex grow w-full mx-auto items-center">
<div className="lg:-m-5 h-full shadow-xl lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col border-t lg:border border-border dark:border-border-dark">
<div className="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-border dark:border-border-dark">
<h3 className="text-sm my-1 mx-5 text-gray-50 dark:text-gray-30 select-none">
<h3 className="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none">
PostPage.js
</h3>
</div>
@@ -671,7 +671,7 @@ function BrowserChrome({children, setPostPromise, setCommentsPromise}) {
return (
<div className="bg-wash dark:bg-gray-95 shadow-xl relative overflow-hidden w-full border border-border dark:border-opacity-10 rounded-2xl">
<div className="w-full h-16 border-b border-border backdrop-filter rounded-t-2xl overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 py-4 px-4 gap-2 flex flex-row items-center">
<div className="bg-gray-10 text-sm text-gray-50 text-center rounded-full p-1 w-full flex-row flex space-between items-center">
<div className="bg-gray-10 text-sm text-tertiary text-center rounded-full p-1 w-full flex-row flex space-between items-center">
<div className="h-6 w-6" />
<div className="w-full leading-snug">
<span className="text-gray-30">example.com</span>

4
beta/src/components/Layout/Sidebar/SidebarLink.tsx
View File

@@ -88,8 +88,8 @@ export function SidebarLink({
{isExpanded != null && !heading && !hideArrow && (
<span
className={cn('pr-1', {
'text-link': isExpanded,
'text-gray-30': !isExpanded,
'text-link dark:text-link-dark': isExpanded,
'text-tertiary dark:text-tertiary-dark': !isExpanded,
})}>
<IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
</span>

2
beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx
View File

@@ -153,7 +153,7 @@ export function SidebarRouteTree({
)}
<h3
className={cn(
'mb-1 text-sm font-bold ml-5 text-gray-400 dark:text-gray-500',
'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
index !== 0 && 'mt-2'
)}>
{sectionHeader}