feat(atoms): added new components in the atom category

src/atoms/card.ts

@@ -0,0 +1,10 @@
+import { styled } from '../styles';
+
+export const Card = styled('div', {
+    display: 'flex',
+    w: '100%',
+    bg: 'white',
+    rounded: '20px',
+    justify: 'center',
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.25)',
+});

src/atoms/index.ts

@@ -1 +1,5 @@
 export * from './button';
+export * from './card';
+export * from './input';
+export * from './overlay';
+export * from './text';

src/atoms/input.ts

@@ -0,0 +1,20 @@
+import { styled } from '../styles';
+
+export const InputField = styled('input', {
+    boxShadow: 'none',
+    borderStyle: 'none',
+    border: '1px solid',
+    textColor: '#666666',
+    background: 'white',
+    p: ['12px 16px'],
+    h: '100%',
+    w: '100%',
+    text: ['16px'],
+    rounded: '10px',
+    '&::placeholder': {
+        textColor: '#666666',
+    },
+    '&:hover': {
+        outline: 'none',
+    },
+});

src/atoms/overlay.ts

@@ -0,0 +1,24 @@
+import { styled } from '../styles';
+
+export const Overlay = styled('div', {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100dvw',
+    height: '100dvh',
+    display: 'flex',
+    justify: 'center',
+    items: 'center',
+    backdropFilter: 'blur(3px)',
+    zIndex: 999,
+    color: 'white',
+});
+
+export const OverlayInteract = styled('div', {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    zIndex: -1,
+});

src/atoms/text.ts

@@ -0,0 +1,46 @@
+import { styled } from '../styles';
+
+export const Text = styled('div', {
+    my: 'auto',
+    textAlign: 'center',
+    fontFamily: '$primary',
+    whiteSpace: 'nowrap',
+
+    variants: {
+        responsive: {
+            welcome: {
+                text: ['24px', '24px', '40px', '64px'],
+                fontWeight: 700,
+            },
+            title: {
+                text: ['16px', '20px', '24px'],
+                fontWeight: 700,
+            },
+            description: {
+                text: ['12px', '12px', '14px', '18px'],
+            },
+        },
+        style: {
+            warning: {
+                text: ['14px'],
+                fontWeight: 400,
+                color: '#FF9800',
+            },
+            info: {
+                text: ['14px'],
+                fontWeight: 400,
+                color: '#2196F3',
+            },
+            danger: {
+                text: ['14px'],
+                fontWeight: 400,
+                color: '#F44336',
+            },
+            success: {
+                text: ['14px'],
+                fontWeight: 400,
+                color: '#04AA6D',
+            },
+        },
+    },
+});

src/styles/stitches.config.ts

@@ -17,8 +17,6 @@ import {
     zIndices,
 } from './tokens';
 
-export const NAVBAR_HEIGHT = '130px';
-export const NAVBAR_MOBILE_HEIGHT = '89px';
 export const {
     config,
     createTheme,