Merge pull request #3 from internshipsamyrai44/add-pallete-and-typography

feat: tailwind pallete and typography, fix: button styles

Author: fanur56

src/components/button/button.module.css

@@ -7,17 +7,17 @@
 }
 
 .root.primary {
-  @apply text-white bg-blue-300;
+  @apply text-light-100 bg-accent-700;
 }
 
 .root.secondary {
-  @apply text-blue-400 bg-gray-400;
+  @apply text-accent-700 bg-light-500;
 }
 
 .root:focus-visible {
-  @apply outline outline-2 outline-blue-400;
+  @apply outline outline-2 outline-accent-100;
 }
 
-.root.fullwidth {
+.root.full-width {
   @apply justify-center w-1;
 }

src/components/button/button.stories.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import React, { useRef } from 'react'
 
 import { Meta, StoryObj } from '@storybook/react'
 

src/components/button/button.tsx

@@ -7,18 +7,18 @@ import s from './button.module.css'
 
 type Props = {
   asChild?: boolean
-  fullwidth?: boolean
+  fullWidth?: boolean
   variant?: 'ghost' | 'outlined' | 'primary' | 'secondary'
 } & ComponentPropsWithoutRef<'button'>
 
 export const Button = forwardRef<ElementRef<'button'>, Props>(
-  ({ asChild, className, fullwidth, variant = 'primary', ...props }, ref) => {
+  ({ asChild, className, fullWidth, variant = 'primary', ...props }, ref) => {
     const Comp = asChild ? Slot : 'button'
 
     return (
       <Comp
         {...props}
-        className={clsx(s.root, s[variant], fullwidth && s.fullwidth, className)}
+        className={clsx(s.root, s[variant], fullWidth && s.fullWidth, className)}
         ref={ref}
       />
     )

src/index.css

@@ -1,3 +1,6 @@
+@import 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+

tailwind.config.js

@@ -1,8 +1,146 @@
 /** @type {import('tailwindcss').Config} */
+
+const plugin = require('tailwindcss/plugin')
+
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  plugins: [],
+  plugins: [
+    plugin(({ addBase, theme }) => {
+      addBase({
+        a: { color: theme('colors.accent.500') },
+        html: { color: theme('colors.dark.900') },
+      })
+    }),
+  ],
   theme: {
+    colors: {
+      accent: {
+        100: '#73A5FF',
+        300: '#4C8DFF',
+        500: '#397DF6',
+        700: '#2F68CC',
+        900: '#234E99',
+      },
+      current: 'currentColor',
+      danger: {
+        100: '#FF8099',
+        300: '#F23D61',
+        500: '#CC1439',
+        700: '#990F2B',
+        900: '#660A1D',
+      },
+      dark: {
+        100: '#4C4C4C',
+        300: '#333333',
+        500: '#171717',
+        700: '#0D0D0D',
+        900: '#000000',
+      },
+      light: {
+        100: '#FFFFFF',
+        300: '#F7FBFF',
+        500: '#EDF3FA',
+        700: '#D5DAE0',
+        900: '#8D9094',
+      },
+      success: {
+        100: '#80FFBF',
+        300: '#22E584',
+        500: '#14CC70',
+        700: '#0F9954',
+        900: '#0A6638',
+      },
+      transparent: 'transparent',
+      warning: {
+        100: '#FFD073',
+        300: '#E5AC39',
+        500: '#D99000',
+        700: '#996600',
+        900: '#664400',
+      },
+    },
     extend: {},
+    fontFamily: {
+      sans: ['Inter', 'sans-serif'],
+    },
+    fontSize: {
+      bold_14: [
+        '0.875rem',
+        {
+          fontWeight: '700',
+          lineHeight: '1.5rem',
+        },
+      ],
+      bold_16: [
+        '1rem',
+        {
+          fontWeight: '700',
+          lineHeight: '1.5rem',
+        },
+      ],
+      h1: [
+        '1.25rem',
+        {
+          fontWeight: '700',
+          lineHeight: '2.25rem',
+        },
+      ],
+      h2: [
+        '1.125rem',
+        {
+          fontWeight: '700',
+          lineHeight: '1.5rem',
+        },
+      ],
+      h3: [
+        '1rem',
+        {
+          fontWeight: '600',
+          lineHeight: '1.5rem',
+        },
+      ],
+      large: [
+        '1.625rem',
+        {
+          fontWeight: '600',
+          lineHeight: '2.25rem',
+        },
+      ],
+      medium_14: [
+        '0.875rem',
+        {
+          fontWeight: '500',
+          lineHeight: '1.5rem',
+        },
+      ],
+      regular_14: [
+        '0.875rem',
+        {
+          fontWeight: '400',
+          lineHeight: '1.5rem',
+        },
+      ],
+      regular_16: [
+        '1rem',
+        {
+          fontWeight: '400',
+          lineHeight: '1.5rem',
+        },
+      ],
+      'semi-bold_small': [
+        '0.75rem',
+        {
+          fontWeight: '600',
+          lineHeight: '1rem',
+        },
+      ],
+      small: [
+        '0.75rem',
+        {
+          fontWeight: '400',
+          lineHeight: '1rem',
+        },
+      ],
+    },
   },
 }