Merge pull request #13 from hivemq/feature/add-link

Feature / Add link with default underline

testing/src/App.tsx

@@ -5,6 +5,7 @@ import { Buttons } from '@/views/Buttons'
 import { Headings } from '@/views/Headings'
 import { Colors } from '@/views/Colors'
 import { SemanticColors } from '@/views/SemanticColors'
+import {Links} from "@/views/Links.tsx";
 
 function App() {
   return (
@@ -29,6 +30,10 @@ function App() {
         <Buttons />
       </Box>
       <hr />
+      <Heading variant="h1"> Links</Heading>
+      <Box p={8}>
+        <Links />
+      </Box>
     </ChakraBaseProvider>
   )
 }

testing/src/views/Links.tsx

@@ -0,0 +1,9 @@
+import {Link} from '@chakra-ui/react'
+
+export function Links() {
+    return (
+        <>
+            <Link> DEFAULT </Link>
+        </>
+    )
+}

theme/src/components/link.ts

@@ -0,0 +1,29 @@
+import {defineStyle, defineStyleConfig} from "@chakra-ui/react";
+
+const base = defineStyle({
+
+})
+
+const external = defineStyle({
+
+})
+
+
+const variants = {
+    base,
+    external,
+}
+
+export const linkTheme = defineStyleConfig({
+    baseStyle: {
+        fontSize: '1rem',
+        textDecoration: 'underline',
+        fontWeight: 500,
+        cursor: 'pointer !important',
+        _hover: {
+            cursor: 'pointer !important',
+        },
+        color: "blue.500"
+    },
+    variants
+})

theme/src/main.ts

@@ -2,6 +2,7 @@ import { StyleFunctionProps, extendBaseTheme } from '@chakra-ui/react'
 import { mode } from '@chakra-ui/theme-tools'
 import { buttonTheme } from './components/button'
 import { headingTheme } from './components/headings'
+import { linkTheme } from "./components/link"
 
 import * as colors from './foundations/colors'
 import semanticColors from './style-guide/computedSemanticColors'
@@ -25,6 +26,7 @@ export const styles = {
 export const components = {
   Button: buttonTheme,
   Heading: headingTheme,
+  Link: linkTheme
 } as const
 
 export const theme = extendBaseTheme({