diff --git a/testing/src/App.tsx b/testing/src/App.tsx
index b19193f..11b9beb 100644
--- a/testing/src/App.tsx
+++ b/testing/src/App.tsx
@@ -1,6 +1,7 @@
import { Box, ChakraBaseProvider, Heading } from '@chakra-ui/react'
import { theme } from '../../theme/src/main'
+import { Alerts } from '@/views/Alerts.tsx'
import { Buttons } from '@/views/Buttons'
import { Colors } from '@/views/Colors'
import { Headings } from '@/views/Headings'
@@ -10,29 +11,46 @@ import { SemanticColors } from '@/views/SemanticColors'
function App() {
return (
- Colors
-
-
-
-
- Semantic Colors
-
-
-
-
- Headings
-
-
-
-
- Buttons
-
-
-
-
- Links
-
-
+
+ Colors
+
+
+
+
+
+ Semantic Colors
+
+
+
+
+
+
+ Headings
+
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+ Links
+
+
+
+
+
+
+ Alerts
+
+
+
+
)
diff --git a/testing/src/views/Alerts.tsx b/testing/src/views/Alerts.tsx
new file mode 100644
index 0000000..b0696fc
--- /dev/null
+++ b/testing/src/views/Alerts.tsx
@@ -0,0 +1,43 @@
+import {
+ Alert,
+ AlertDescription,
+ AlertIcon,
+ AlertTitle,
+ Box,
+ HStack,
+ Heading,
+} from '@chakra-ui/react'
+
+export function Alerts() {
+ const variants: Array<'success' | 'error' | 'warning' | 'info'> = [
+ 'success',
+ 'error',
+ 'warning',
+ 'info',
+ ]
+
+ return (
+ <>
+
+ {variants.map((variant) => {
+ return (
+
+
+ {variant.charAt(0).toUpperCase() + variant.slice(1)}
+
+
+
+
+
+ {variant.charAt(0).toUpperCase() + variant.slice(1)} Alert
+
+ This is a {variant} alert.
+
+
+
+ )
+ })}
+
+ >
+ )
+}
diff --git a/testing/src/views/Buttons.tsx b/testing/src/views/Buttons.tsx
index d4f4bf9..1229753 100644
--- a/testing/src/views/Buttons.tsx
+++ b/testing/src/views/Buttons.tsx
@@ -11,7 +11,7 @@ export function Buttons() {
return (
- {variant}{' '}
+ {variant}
{sizes.map((size) => {
return (
diff --git a/theme/package.json b/theme/package.json
index c9eddbe..e1d6e2b 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -10,9 +10,7 @@
"module": "./dist/index.es.js",
"types": "./dist/index.es.d.ts"
},
- "files": [
- "dist"
- ],
+ "files": ["dist"],
"scripts": {
"build": "pnpm build:types && pnpm build:lib",
"build:lib": "vite build",
diff --git a/theme/src/components/alerts.ts b/theme/src/components/alerts.ts
new file mode 100644
index 0000000..14c83c5
--- /dev/null
+++ b/theme/src/components/alerts.ts
@@ -0,0 +1,156 @@
+import { alertAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+ alertAnatomy.keys,
+)
+
+const success = definePartsStyle({
+ container: {
+ background: 'background.bg-success.light',
+ borderColor: 'border.border-success-strong.light',
+ color: 'text.text-success.light',
+ _dark: {
+ background: 'background.bg-success.dark',
+ borderColor: 'border.border-success-strong.dark',
+ color: 'text.text-success.dark',
+ },
+ },
+ icon: {
+ color: 'icon.icon-success.light',
+ _dark: {
+ color: 'icon.icon-success.dark',
+ },
+ },
+ title: {
+ fontWeight: 'bold',
+ },
+ description: {
+ color: 'text.text-success.light',
+ _dark: {
+ color: 'text.text-success.dark',
+ },
+ },
+})
+
+const error = definePartsStyle({
+ container: {
+ background: 'background.bg-error.light',
+ borderColor: 'border.border-error-strong.light',
+ color: 'text.text-error.light',
+ _dark: {
+ background: 'background.bg-error.dark',
+ borderColor: 'border.border-error-strong.dark',
+ color: 'text.text-error.dark',
+ },
+ },
+ icon: {
+ color: 'icon.icon-error.light',
+ _dark: {
+ color: 'icon.icon-error.dark',
+ },
+ },
+ title: {
+ fontWeight: 'bold',
+ },
+ description: {
+ color: 'text.text-error.light',
+ _dark: {
+ color: 'text.text-error.dark',
+ },
+ },
+})
+
+const warning = definePartsStyle({
+ container: {
+ background: 'background.bg-warning.light',
+ borderColor: 'border.border-warning-strong.light',
+ color: 'text.text-warning.light',
+ _dark: {
+ background: 'background.bg-warning.dark',
+ borderColor: 'border.border-warning-strong.dark',
+ color: 'text.text-warning.dark',
+ },
+ },
+ icon: {
+ color: 'icon.icon-warning.light',
+ _dark: {
+ color: 'icon.icon-warning.dark',
+ },
+ },
+ title: {
+ fontWeight: 'bold',
+ },
+ description: {
+ color: 'text.text-warning.light',
+ _dark: {
+ color: 'text.text-warning.dark',
+ },
+ },
+})
+
+const info = definePartsStyle({
+ container: {
+ background: 'background.bg-info.light',
+ borderColor: 'border.border-info-strong.light',
+ color: 'text.text-info.light',
+ _dark: {
+ background: 'background.bg-info.dark',
+ borderColor: 'border.border-info-strong.dark',
+ color: 'text.text-info.dark',
+ },
+ },
+ icon: {
+ color: 'icon.icon-info.light',
+ _dark: {
+ color: 'icon.icon-info.dark',
+ },
+ },
+ title: {
+ fontWeight: 'bold',
+ },
+ description: {
+ color: 'text.text-info.light',
+ _dark: {
+ color: 'text.text-info.dark',
+ },
+ },
+})
+
+const variants = {
+ success,
+ error,
+ warning,
+ info,
+}
+
+const baseStyle = definePartsStyle({
+ container: {
+ borderRadius: 'md',
+ borderWidth: '1px',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.5rem',
+ padding: '1rem',
+ },
+ icon: {
+ marginRight: '0.5rem',
+ width: '24px',
+ },
+ title: {
+ marginRight: '0.5rem',
+ fontWeight: 'bold',
+ },
+ description: {
+ flex: 1,
+ },
+})
+
+export const alertTheme = defineMultiStyleConfig({
+ baseStyle,
+ variants,
+ defaultProps: {
+ variant: 'info',
+ size: 'md',
+ },
+})
diff --git a/theme/src/components/link.ts b/theme/src/components/link.ts
index fcae7da..cf07fda 100644
--- a/theme/src/components/link.ts
+++ b/theme/src/components/link.ts
@@ -18,7 +18,7 @@ export const linkTheme = defineStyleConfig({
_hover: {
cursor: 'pointer !important',
},
- color: 'blue.500',
+ color: 'text.text-accent-strong.light',
},
variants,
})
diff --git a/theme/src/main.ts b/theme/src/main.ts
index 8c98e37..631b815 100644
--- a/theme/src/main.ts
+++ b/theme/src/main.ts
@@ -1,9 +1,10 @@
-import { type StyleFunctionProps, extendBaseTheme } from '@chakra-ui/react'
import { mode } from '@chakra-ui/theme-tools'
+import { alertTheme } from './components/alerts'
import { buttonTheme } from './components/button'
import { headingTheme } from './components/headings'
import { linkTheme } from './components/link'
+import { type StyleFunctionProps, extendBaseTheme } from '@chakra-ui/react'
import * as colors from './foundations/colors'
import semanticColors from './style-guide/computedSemanticColors'
@@ -27,6 +28,7 @@ export const components = {
Button: buttonTheme,
Heading: headingTheme,
Link: linkTheme,
+ Alert: alertTheme,
} as const
export const theme = extendBaseTheme({