Merge pull request #554 from semaphore-protocol/chore/button-colors

New theme colors and button style

apps/website/src/app/build/page.tsx

@@ -9,7 +9,7 @@ import IconCli from "../../icons/IconCli"
 export default function Build() {
     const toolCardsInfo = [
         {
-            icon: <IconCli width={8} height={8} color="ceruleanBlue" />,
+            icon: <IconCli width={8} height={8} color="primary.600" />,
             title: "CLI",
             subtitle: "INTEGRATE TO YOUR PROJECT",
             url: "https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli#readme",
@@ -20,7 +20,7 @@ export default function Build() {
             ]
         },
         {
-            icon: <IconBook width={8} height={8} color="ceruleanBlue" />,
+            icon: <IconBook width={8} height={8} color="primary.600" />,
             title: "Boilerplate",
             subtitle: "START FROM TEMPLATE",
             url: "https://github.com/semaphore-protocol/boilerplate",
@@ -31,7 +31,7 @@ export default function Build() {
             ]
         },
         {
-            icon: <IconBox width={8} height={8} color="ceruleanBlue" />,
+            icon: <IconBox width={8} height={8} color="primary.600" />,
             title: "Packages",
             subtitle: "LEVERAGE DEVELOPED LIBRARIES",
             url: "https://github.com/semaphore-protocol/semaphore/tree/main/packages",
@@ -63,7 +63,7 @@ export default function Build() {
                 <Text textAlign="center" fontSize={{ base: "40px", md: "72px" }}>
                     Let’s build something new
                 </Text>
-                <Text textAlign="center" fontSize={{ base: "16px", md: "20px" }} color="alabaster.400" mt="14px">
+                <Text textAlign="center" fontSize={{ base: "16px", md: "20px" }} color="text.400" mt="14px">
                     Jumpstart your app development process with these building tools.
                 </Text>
                 <VStack mt="64px">
@@ -105,7 +105,7 @@ export default function Build() {
                         <Text fontSize={{ base: "30px", md: "44px" }} fontWeight="500">
                             Contribute to Semaphore
                         </Text>
-                        <Text fontSize={{ base: "16px", md: "18px" }} color="alabaster.300" mt="16px">
+                        <Text fontSize={{ base: "16px", md: "18px" }} color="text.300" mt="16px">
                             Semaphore is open source with dozens of community contributors. You can propose improvements
                             to the protocol or take good first issues to get started.
                         </Text>

apps/website/src/app/learn/page.tsx

@@ -93,17 +93,17 @@ const nullifier = identity.getNullifier()
 const commitment = identity.generateCommitment()`,
             itemList: [
                 {
-                    icon: <IconEyelash w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconEyelash w="24px" h="24px" color="primary.600" />,
                     heading: "Private values",
                     body: "Trapdoor and nullifier values are the private values of the Semaphore identity. To avoid fraud, the owner must keep both values secret."
                 },
                 {
-                    icon: <IconEye w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconEye w="24px" h="24px" color="primary.600" />,
                     heading: "Public values",
                     body: "Semaphore uses the Poseidon hash function to create the identity commitment from the identity private values. Identity commitments can be made public, similarly to Ethereum addresses."
                 },
                 {
-                    icon: <IconUser w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconUser w="24px" h="24px" color="primary.600" />,
                     heading: "Generate identities",
                     body: "Semaphore identities can be generated deterministically or randomly. Deterministic identities can be generated from the hash of a secret message."
                 }
@@ -122,17 +122,17 @@ const group = new Group(1)
 group.addMember(commitment)`,
             itemList: [
                 {
-                    icon: <IconTree w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconTree w="24px" h="24px" color="primary.600" />,
                     heading: "Merkle trees",
                     body: "Each leaf contains an identity commitment for a user. The identity commitment proves that the user is a group member without revealing the private identity of the user."
                 },
                 {
-                    icon: <IconGroup w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconGroup w="24px" h="24px" color="primary.600" />,
                     heading: "Types of groups",
                     body: "Groups can be created and managed in a decentralized fashion with Semaphore contracts or off-chain with our JavaScript libraries."
                 },
                 {
-                    icon: <IconManageUsers w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconManageUsers w="24px" h="24px" color="primary.600" />,
                     heading: "Group management",
                     body: "Users can join and leave groups by themselves, or an admin can add and remove them. Admins can be centralized authorities, Ethereum accounts, multi-sig wallets or smart contracts."
                 }
@@ -159,17 +159,17 @@ const verificationKey = JSON.parse(fs.readFileSync("./semaphore.json", "utf-8"))
 await verifyProof(verificationKey, fullProof)`,
             itemList: [
                 {
-                    icon: <IconBadge w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconBadge w="24px" h="24px" color="primary.600" />,
                     heading: "Membership",
                     body: "Only users who are part of a group can generate a valid proof for that group."
                 },
                 {
-                    icon: <IconFlag w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconFlag w="24px" h="24px" color="primary.600" />,
                     heading: "Signals",
                     body: "Group users can anonymously broadcast signals such as votes or endorsements without revealing their original identity."
                 },
                 {
-                    icon: <IconCheck w="24px" h="24px" color="ceruleanBlue" />,
+                    icon: <IconCheck w="24px" h="24px" color="primary.600" />,
                     heading: "Verifiers",
                     body: "Semaphore proofs can be verified with our contracts or off-chain with our JavaScript libraries."
                 }
@@ -318,7 +318,7 @@ await verifyProof(verificationKey, fullProof)`,
                             codeText={sectionBlockText.codeText}
                             itemList={sectionBlockText.itemList}
                         />
-                        {i !== sectionBlockTexts.length - 1 && <Divider my="68px" borderColor="alabaster.600" />}
+                        {i !== sectionBlockTexts.length - 1 && <Divider my="68px" borderColor="text.600" />}
                     </VStack>
                 ))}
             </VStack>

apps/website/src/app/page.tsx

@@ -116,7 +116,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Simplified privacy
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore streamlines privacy-centric app development. It empowers developers to
                                         effortlessly incorporate robust privacy features.
                                     </Text>
@@ -134,7 +134,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Universal integrations
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore is a protocol for Web2 and Web3. It integrates into any front-end
                                         framework or pure HTML/CSS/JS. It is cross-chain compatible with EVM, L2s, and
                                         alt-blockchains.
@@ -160,7 +160,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Leverage Zero Knowledge
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore leverages Zero Knowledge, allowing us to verify information without
                                         revealing any underlying data. This powerful primitive allows one to prove
                                         membership and signal anonymously.
@@ -179,7 +179,7 @@ export default function Home() {
                                     <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
                                         Free open source software
                                     </Text>
-                                    <Text color="alabaster.400" fontSize="14px">
+                                    <Text color="text.400" fontSize="14px">
                                         Semaphore is a Public Good. This means it will never seek to profit, it is owned
                                         by the community and will always remain open source.
                                     </Text>

apps/website/src/components/ActionCard.tsx

@@ -1,4 +1,4 @@
-import { Heading, Text, Card, CardBody, Stack, Flex, Link } from "@chakra-ui/react"
+import { Heading, Text, Card, CardBody, Stack, Flex, Link, Button } from "@chakra-ui/react"
 
 export type ActionCardProps = {
     title: string
@@ -38,25 +38,16 @@ export default function ActionCard({ title, description, buttonText, buttonUrl }
                             fontSize={{ base: "16px", md: "20px" }}
                             lineHeight={{ base: "25px", md: "32px" }}
                             fontWeight="normal"
-                            textColor="alabaster.400"
+                            textColor="text.400"
                         >
                             {description}
                         </Text>
                     </Stack>
                     <Stack width={{ base: "full", md: "auto" }}>
-                        <Link
-                            href={buttonUrl}
-                            isExternal
-                            variant="buttonlink"
-                            bgGradient="semaphore"
-                            w="fit-content"
-                            lineHeight="24px"
-                            fontSize={{ base: "14px", md: "18px", lg: "20px" }}
-                            textColor="white"
-                            padding="14px 16px"
-                            _hover={{ opacity: "85%" }}
-                        >
-                            {buttonText}
+                        <Link href={buttonUrl} isExternal>
+                            <Button colorScheme="primary" size={{ base: "md", md: "lg" }}>
+                                {buttonText}
+                            </Button>
                         </Link>
                     </Stack>
                 </Flex>

apps/website/src/components/NavbarLinks.tsx

@@ -19,7 +19,7 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
                 as={NextLink}
                 href="/projects"
                 variant="navlink"
-                borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/projects" ? "primary.600" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
                     Projects
@@ -30,7 +30,7 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
                 as={NextLink}
                 href="/build"
                 variant="navlink"
-                borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/build" ? "primary.600" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
                     Build
@@ -41,7 +41,7 @@ export default function NavbarLinks({ onClick }: NavbarProps) {
                 as={NextLink}
                 href="/learn"
                 variant="navlink"
-                borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
+                borderBottomColor={pathname === "/learn" ? "primary.600" : "transparent"}
             >
                 <Heading fontSize="18px" fontWeight="normal">
                     Learn

apps/website/src/components/ProjectCard.tsx

@@ -27,11 +27,11 @@ export default function ProjectCard({
             borderRadius="18px"
             color="white"
             border="1px"
-            borderColor="alabaster.950"
+            borderColor="text.950"
             padding="34px"
             w="full"
             h="full"
-            _hover={{ borderColor: "ceruleanBlue" }}
+            _hover={{ borderColor: "primary.600" }}
             {...props}
         >
             <HStack gap="8px" mb="2rem" wrap="wrap">

apps/website/src/components/SectionBlock.tsx

@@ -27,7 +27,7 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
                     <Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
                         {title}
                     </Text>
-                    <Text fontSize={{ base: "16px", md: "18px" }} textColor="alabaster.400">
+                    <Text fontSize={{ base: "16px", md: "18px" }} textColor="text.400">
                         {description}
                     </Text>
                     <Link display="flex" alignItems="center" gap="10px" justifyItems="center" href={linkUrl} isExternal>
@@ -51,7 +51,7 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
                     <VStack key={item.heading} alignItems="start">
                         <VStack>{item.icon}</VStack>
                         <Text fontSize="24px">{item.heading}</Text>
-                        <Text fontSize="16px" color="alabaster.400">
+                        <Text fontSize="16px" color="text.400">
                             {item.body}
                         </Text>
                     </VStack>

apps/website/src/components/ToolsCard.tsx

@@ -10,7 +10,8 @@ import {
     StackDivider,
     Box,
     Link,
-    Flex
+    Flex,
+    Button
 } from "@chakra-ui/react"
 import IconChevronRight from "@/icons/IconChevronRight"
 
@@ -29,34 +30,22 @@ export default function ToolsCard({ icon, title, subtitle, details, url }: Tools
             borderRadius="16px"
             color="white"
             border="1px"
-            borderColor="alabaster.950"
+            borderColor="text.950"
             padding="32px"
             width={{ base: "full", lg: "348px" }}
             height={{ base: "auto", lg: "501px" }}
         >
             <HStack mb="2rem">{icon}</HStack>
             <CardBody padding={0}>
-                <VStack divider={<StackDivider borderColor="alabaster.950" />} spacing="24px" align="stretch">
+                <VStack divider={<StackDivider borderColor="text.950" />} spacing="24px" align="stretch">
                     <Box>
                         <Heading fontSize="40px" fontWeight="normal">
                             {title}
                         </Heading>
-                        <Link
-                            display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            href={url}
-                            isExternal
-                            variant="buttonlink"
-                            py="10px"
-                            mt="24px"
-                            w="full"
-                            bgGradient="linear(to-r, primary.500, primary.800)"
-                            color="white"
-                            fontSize="18px"
-                            _hover={{ bgGradient: "linear(to-r, primary.500, primary.800)", opacity: "85%" }}
-                        >
-                            Select tool
+                        <Link href={url} isExternal>
+                            <Button w="full" colorScheme="primary" size={{ base: "md", md: "lg" }} mt="6">
+                                Select tool
+                            </Button>
                         </Link>
                     </Box>
                     <Box>
@@ -69,7 +58,7 @@ export default function ToolsCard({ icon, title, subtitle, details, url }: Tools
                                 <ListItem key={elem}>
                                     <Flex>
                                         <HStack alignItems="start" mt="8px">
-                                            <IconChevronRight height={2} width={2} color="ceruleanBlue" />
+                                            <IconChevronRight height={2} width={2} color="primary.600" />
                                         </HStack>
                                         <Text display="inline-block" ml="8px" fontSize="14px" lineHeight="22.4px">
                                             {elem}

apps/website/src/styles/colors.ts

@@ -1,15 +1,6 @@
 const colors = {
     darkBlue: "#0E101B",
     darkBlueBg: "#00020D",
-    ceruleanBlue: "#3555DF",
-    semaphore: "linear(to-r, primary.500, primary.800)",
-    alabaster: {
-        300: "#B8B9C1",
-        400: "#92939E",
-        600: "#5E5F6B",
-        800: "#42424A",
-        950: "#26262B"
-    },
     primary: {
         50: "#f0f4fe",
         100: "#dde6fc",