Modify to use semantic color name

yorkie-team · Aug 6, 2024 · efce2dc · efce2dc
1 parent bcb4af5
commit efce2dc
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 21 deletions.
diff --git a/components/CodeBlock/CodeBlock.tsx b/components/CodeBlock/CodeBlock.tsx
@@ -28,7 +28,7 @@ function CopyButtonBox({ value, timeout = 1000 }: { value: string; timeout?: num
       <CopyButton value={value} timeout={timeout}>
         {({ copied, copy }) => (
           <>
-            <Button size="sm" variant="outline" colorPalette="white" onClick={copy} title="Copy to clipboard">
+            <Button size="sm" variant="outline" colorPalette="neutral" onClick={copy} title="Copy to clipboard">
               <Icon type="copy" />
             </Button>
             {copied && (

diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
@@ -54,12 +54,12 @@ export function Header(): ReactElement {
         <div className="header_util">
           <Flex gap="200" hideBelow="md">
             {!!isLoggedIn ? (
-              <Button asChild variant="outline" colorPalette="gray">
+              <Button asChild variant="outline" colorPalette="neutral">
                 <Link href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`}>Dashboard</Link>
               </Button>
             ) : (
               <>
-                <Button asChild variant="outline" colorPalette="gray">
+                <Button asChild variant="outline" colorPalette="neutral">
                   <Link href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`}>Sign in</Link>
                 </Button>
                 <Button asChild>

diff --git a/components/exampleView/Sidebar/Sidebar.tsx b/components/exampleView/Sidebar/Sidebar.tsx
@@ -66,13 +66,13 @@ function SidebarBottom({
   return (
     <div className="sidebar_bottom">
       <Flex gap="200" mt="400">
-        <Button asChild colorPalette="gray" flex="1">
+        <Button asChild colorPalette="neutral" flex="1">
           <Link href={codeURL} target="_blank" rel="noreferrer">
             GitHub
           </Link>
         </Button>
         {shareButton && (
-          <Button asChild colorPalette="gray" flex="2">
+          <Button asChild colorPalette="neutral" flex="2">
             <Link href="#">Share to invite other</Link>
           </Button>
         )}

diff --git a/docs/sample.mdx b/docs/sample.mdx
@@ -218,7 +218,7 @@ main();`} language="javascript" withCopyButton/>
 </div>
 </CodeBlock.ContentWrapper>
 
-<Button colorPalette="gray">
+<Button colorPalette="neutral">
   <Icon type="book" />
   <span>Learn more about the [SUBSUBSECTION]</span>
 </Button>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,6 @@
     "eslint-config-next": "13.0.0",
     "postcss-path-replace": "^1.0.4",
     "typescript": "4.8.4",
-    "yorkie-ui-test": "^0.0.13"
+    "yorkie-ui-test": "^0.0.15"
   }
 }
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -31,13 +31,13 @@ const Custom404: NextPage = () => {
               Back to home
             </Link>
           </Button>
-          <Button asChild variant="outline" size="lg" colorPalette="gray" flex={{ base: '1', md: 'none' }}>
+          <Button asChild variant="outline" size="lg" colorPalette="neutral" flex={{ base: '1', md: 'none' }}>
             <Link href="https://discord.gg/MVEAwz9sBy" target="_blank" rel="noreferrer">
               <Icon type="discord" />
               Discord
             </Link>
           </Button>
-          <Button asChild variant="outline" size="lg" colorPalette="gray" flex={{ base: '1', md: 'none' }}>
+          <Button asChild variant="outline" size="lg" colorPalette="neutral" flex={{ base: '1', md: 'none' }}>
             <Link href="https://github.com/yorkie-team/dashboard/issues" target="_blank" rel="noreferrer">
               <Icon type="github" />
               GitHub

diff --git a/pages/community.tsx b/pages/community.tsx
@@ -28,13 +28,13 @@ const Community: NextPage = () => {
           <br className="br_tablet" /> discussions.
         </p>
         <Flex order="4" gap="600" mt="800" width="full">
-          <Button asChild variant="outline" size="lg" colorPalette="gray" flex={{ base: '1', md: 'none' }}>
+          <Button asChild variant="outline" size="lg" colorPalette="neutral" flex={{ base: '1', md: 'none' }}>
             <Link href="https://discord.gg/MVEAwz9sBy" target="_blank" rel="noreferrer">
               <Icon type="discord" />
               Discord
             </Link>
           </Button>
-          <Button asChild variant="outline" size="lg" colorPalette="gray" flex={{ base: '1', md: 'none' }}>
+          <Button asChild variant="outline" size="lg" colorPalette="neutral" flex={{ base: '1', md: 'none' }}>
             <Link href="https://github.com/yorkie-team/dashboard/issues" target="_blank" rel="noreferrer">
               <Icon type="github" />
               GitHub

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -104,7 +104,7 @@ const Home: NextPage = () => {
                     Getting Started
                   </Link>
                 </Button>
-                <Button asChild size="lg" variant="outline" colorPalette="white" width={{ base: 'full', sm: 'fit' }}>
+                <Button asChild size="lg" variant="outline" colorPalette="neutral" width={{ base: 'full', sm: 'fit' }}>
                   <Link href="/docs">
                     <Icon type="book" />
                     Read documentation
@@ -271,7 +271,7 @@ const Home: NextPage = () => {
                     peer&apos;s awareness of the data being edited. It is used to track which users are currently
                     editing the document.
                   </p>
-                  <Button asChild mt="600" width={{ base: 'full', sm: 'fit' }} colorPalette="gray">
+                  <Button asChild mt="600" width={{ base: 'full', sm: 'fit' }} colorPalette="neutral">
                     <Link href="/products#document-and-presence">
                       <Icon type="book" />
                       Learn more about Document and Presence
@@ -290,7 +290,7 @@ const Home: NextPage = () => {
                     real-time. With Dashboard, users can quickly and easily supervise the data warehouse and ensure that
                     it is functioning properly.
                   </p>
-                  <Button asChild mt="600" width={{ base: 'full', sm: 'fit' }} colorPalette="gray">
+                  <Button asChild mt="600" width={{ base: 'full', sm: 'fit' }} colorPalette="neutral">
                     <Link href="/products#dashboard">
                       <Icon type="book" />
                       Learn more about Dashboard
@@ -309,7 +309,7 @@ const Home: NextPage = () => {
                     own premises. Whether you want the convenience of cloud or the control of a self-hosted server,
                     Yorkie has you covered.
                   </p>
-                  <Button asChild mt="600" width={{ base: 'full', sm: 'fit' }} colorPalette="gray">
+                  <Button asChild mt="600" width={{ base: 'full', sm: 'fit' }} colorPalette="neutral">
                     <Link href="/products#self-hosted-server">
                       <Icon type="book" />
                       Learn more about Self-Hosted Server
@@ -382,7 +382,7 @@ const Home: NextPage = () => {
             zIndex="float"
             wrap="wrap"
           >
-            <Button asChild size="lg" width={{ base: 'full', sm: 'fit' }} colorPalette="white" variant="outline">
+            <Button asChild size="lg" width={{ base: 'full', sm: 'fit' }} colorPalette="neutral" variant="outline">
               <Link href="https://discord.gg/MVEAwz9sBy" target="_blank" rel="noreferrer">
                 <Icon type="smile" />
                 Contact

diff --git a/pages/products.tsx b/pages/products.tsx
@@ -260,7 +260,7 @@ const Products: NextPage = () => {
               asChild
               mt={{ base: '800', md: '0' }}
               width={{ base: 'full', md: 'fit' }}
-              colorPalette="gray"
+              colorPalette="neutral"
               position={{ base: 'static', md: 'absolute' }}
               top={0}
               right={0}