Reflect color scheme based on design

apps/website/src/components/ActionCard.tsx

@@ -48,7 +48,7 @@ export default function ActionCard({ title, description, buttonText, buttonUrl }
                             href={buttonUrl}
                             isExternal
                             variant="buttonlink"
-                            bg="semaphore"
+                            bgGradient="semaphore"
                             w="fit-content"
                             lineHeight="24px"
                             fontSize={{ base: "14px", md: "18px", lg: "20px" }}

apps/website/src/components/CodeBlock.tsx

@@ -26,11 +26,8 @@ export default function CodekBlock({ text }: CodekBlockProps) {
         <Flex flex="1" overflow="auto" position="relative" borderRadius="8px" backgroundColor="darkBlue">
             <CodeBlock {...copyBlockProps} />
             <Button
-                textColor="alabaster.300"
+                variant="outline"
                 fontSize={{ base: "16px", md: "18px" }}
-                fontWeight="400"
-                borderColor="alabaster.800"
-                backgroundColor="darkBlue"
                 padding="5px 8px"
                 border="1px"
                 borderRadius="4px"

apps/website/src/components/ProjectsList.tsx

@@ -58,7 +58,6 @@ export default function ProjectsList(props: any) {
                         size="lg"
                         leftIcon={<IconPSE />}
                         variant={onlyPSE === true ? "solid" : "outline"}
-                        colorScheme={onlyPSE === true ? "primary" : "inherit"}
                         onClick={() => setOnlyPSE(onlyPSE === true ? null : true)}
                     >
                         PSE
@@ -67,7 +66,6 @@ export default function ProjectsList(props: any) {
                         size="lg"
                         leftIcon={<IconCommunity />}
                         variant={onlyPSE === false ? "solid" : "outline"}
-                        colorScheme={onlyPSE === false ? "primary" : "inherit"}
                         onClick={() => setOnlyPSE(onlyPSE === false ? null : false)}
                     >
                         Community
@@ -83,7 +81,6 @@ export default function ProjectsList(props: any) {
                             key={category}
                             size="sm"
                             variant={selectedCategories.includes(category) ? "solid" : "outline"}
-                            colorScheme={selectedCategories.includes(category) ? "primary" : "inherit"}
                             onClick={() => {
                                 const newCategories = selectedCategories.includes(category)
                                     ? selectedCategories.filter((c) => c !== category)

apps/website/src/components/ToolsCard.tsx

@@ -51,10 +51,10 @@ export default function ToolsCard({ icon, title, subtitle, details, url }: Tools
                             py="10px"
                             mt="24px"
                             w="full"
-                            bg="semaphore"
+                            bgGradient="semaphore"
                             color="white"
                             fontSize="18px"
-                            _hover={{ bg: "semaphore", opacity: "85%" }}
+                            _hover={{ bgGradient: "semaphore", opacity: "85%" }}
                         >
                             Select tool
                         </Link>

apps/website/src/styles/colors.ts

@@ -2,10 +2,7 @@ const colors = {
     darkBlue: "#0E101B",
     darkBlueBg: "#00020D",
     ceruleanBlue: "#3555DF",
-    // TODO: This can be replaced by using the 'bgGradient' Chakra property.
-    // and the existing primary color scheme.
-    // The value is: "linear(to-r, primary.500, primary.800)"
-    semaphore: "linear-gradient(92.32deg, #4771EA -33.31%, #2735A6 112.52%)",
+    semaphore: "linear(to-r, primary.500, primary.800)",
     alabaster: {
         300: "#B8B9C1",
         400: "#92939E",

apps/website/src/styles/components/Button.ts

@@ -1,5 +1,6 @@
 import { StyleFunctionProps, SystemStyleObject } from "@chakra-ui/theme-tools"
 import { font } from "../styles"
+import colors from "../colors"
 
 const Button = {
     baseStyle: {
@@ -13,42 +14,38 @@ const Button = {
         paddingRight: "18px !important"
     },
     defaultProps: {
-        colorScheme: "white"
+        colorScheme: "#FFFFFF"
     },
     variants: {
         solid: (props: StyleFunctionProps): SystemStyleObject => {
             const { colorScheme: c } = props
 
-            if (c === "primary") {
-                // const bgGradient = "linear(to-r, primary.500, primary.800)"
-                const bg = `${c}.500`
-                const color = "white"
-
-                return {
-                    bg,
-                    color,
-                    _hover: {
-                        bg: `${c}.800`,
-                        _disabled: {
-                            bg
-                        }
-                    },
-                    _active: { bg: `${c}.800` }
+            return {
+                bg: c,
+                color: colors.darkBlueBg,
+                _hover: {
+                    color: c,
+                    bgGradient: colors.semaphore,
+                    _disabled: {
+                        bg: c
+                    }
                 }
             }
-
-            const bg = c
+        },
+        outline: (props: StyleFunctionProps): SystemStyleObject => {
+            const { colorScheme: c } = props
 
             return {
-                bg,
-                color: `darkBlue`,
+                color: c,
+                border: `1.2px solid ${c}`,
                 _hover: {
-                    bg: `${c}.300`,
+                    bg: colors.darkBlueBg,
+                    color: c,
+                    border: `1.2px solid ${colors.primary["600"]}`,
                     _disabled: {
-                        bg
+                        bg: c
                     }
-                },
-                _active: { bg: `${c}.400` }
+                }
             }
         }
     }