Refined the tailwind configuration (#60)

@kanta1207 Thank you for approving!
nishiki-tech · Dec 6, 2023 · cf5a5ce · cf5a5ce
1 parent e6021f5
commit cf5a5ce
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 166 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -31,9 +31,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       {/* Reducing hydration error. Reference : https://nextjs.org/docs/messages/react-hydration-error */}
       <html lang="en" suppressHydrationWarning>
         <head />
-        <body
-          className={cn('min-h-screen bg-background font-sans antialiased', fontInter.variable)}
-        >
+        <body className={cn('min-h-screen bg-primary-lightest antialiased', fontInter.variable)}>
           <MobileLayout>{children}</MobileLayout>
         </body>
       </html>

diff --git a/src/components/base/parts/mobile/BottomTab.tsx b/src/components/base/parts/mobile/BottomTab.tsx
@@ -9,7 +9,7 @@ export const BottomTab = () => {
   const pathName = usePathname();
 
   return (
-    <div className="fixed bottom-0 left-0 z-50 w-full h-16 bg-popover border-t border-border">
+    <div className="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-light">
       <div className="grid h-full max-w-lg grid-cols-3 mx-auto font-medium">
         <BottomTabIconLink name="groups" isSelected={pathName === mainRouteConfig['groups'].path} />
         <BottomTabIconLink name="foods" isSelected={pathName === mainRouteConfig['foods'].path} />

diff --git a/src/components/base/parts/mobile/MobileHeader.tsx b/src/components/base/parts/mobile/MobileHeader.tsx
@@ -1,20 +1,32 @@
 'use client';
 
-import { Button, Icon } from '@/components/ui';
+import { Icon } from '@/components/ui';
 
 import React from 'react';
 
 export const MobileHeader = () => {
   return (
-    <header className="bg-popover sticky top-0 z-40 w-full">
-      <div className="flex h-16 items-center justify-between px-5">
-        <Button variant="ghost" size="icon" onClick={() => {}} className="hover:bg-popover">
-          <Icon iconName="arrowLeft" color="popover-foreground" />
+    <header className="bg-white sticky top-0 z-40 w-full">
+      <div className="flex px-2 h-12 items-center justify-between">
+        <Button>
+          <Icon iconName="arrowLeft" color="black" />
         </Button>
-        <Button variant="ghost" size="icon" onClick={() => {}} className="hover:bg-popover">
-          <Icon iconName="menuCircle" color="popover-foreground" />
+        <Button>
+          <Icon iconName="menuCircle" color="black" />
         </Button>
       </div>
     </header>
   );
 };
+
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+const Button: React.FC<IButtonProps> = ({ children, ...props }) => {
+  return (
+    <button className="h-full aspect-square flex items-center justify-center" {...props}>
+      {children}
+    </button>
+  );
+};
diff --git a/src/components/ui/BottomTabIconLink.tsx b/src/components/ui/BottomTabIconLink.tsx
@@ -34,7 +34,7 @@ export const BottomTabIconLink: React.FC<Props> = ({ name, isSelected }) => {
   // const fillStyle = isSelected ? 'primary' : 'secondary';
 
   // text color based on "isSelected" variable
-  const color = isSelected ? 'primary' : 'secondary';
+  const color = isSelected ? 'primary' : 'gray-dark';
   const textColorStyle = `text-${color}`;
 
   return (

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,86 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: #abd4cf33;
-    --foreground: #222222;
-
-    --card: #ffffff;
-    --card-foreground: #222222;
-
-    --popover: #ffffff;
-    --popover-foreground: #222222;
-
-    --primary: #6ab3ab;
-    --primary-foreground: #ffffff;
-
-    /* TODO : make it sure this is the right secondary color  */
-    --secondary: #777777;
-    --secondary-foreground: #222222;
-
-    --muted: #7bb6ad;
-    --muted-foreground: #ffffff;
-
-    --accent: #fcd884;
-    --accent-foreground: #222222;
-
-    --successful: #6ab3ab;
-    --successful-foreground: #ffffff;
-
-    --destructive: #c44141;
-    --destructive-foreground: #ffffff;
-
-    --border: #d9d9d9;
-    --input: #d9d9d9;
-    --ring: #7bb6ad;
-
-    --radius: 3.125rem;
-  }
-
-  .dark {
-    --background: #abd4cf33;
-    --foreground: #222222;
-
-    --card: #ffffff;
-    --card-foreground: #222222;
-
-    --popover: #ffffff;
-    --popover-foreground: #222222;
-
-    --primary: #6ab3ab;
-    --primary-foreground: #ffffff;
-
-    /* TODO : make it sure this is the right secondary color  */
-    --secondary: #777777;
-    --secondary-foreground: #222222;
-
-    --muted: #7bb6ad;
-    --muted-foreground: #ffffff;
-
-    --accent: #fcd884;
-    --accent-foreground: #222222;
-
-    --successful: #6ab3ab;
-    --successful-foreground: #ffffff;
-
-    --destructive: #c44141;
-    --destructive-foreground: #ffffff;
-
-    --border: #d9d9d9;
-    --input: #d9d9d9;
-    --ring: #7bb6ad;
-
-    --radius: 3.125rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,82 +1,28 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
-  darkMode: ['class'],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-  ],
+  content: ['./src/**/*.{ts,tsx}'],
   theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-      fontSize: {
-        sm: ['0.75rem', '1rem'],
-        md: ['1rem', '1.5rem'],
-        lg: ['1.125rem', '1.75rem'],
-      },
-    },
     extend: {
-      flexGrow: {
-        4: '0.4',
-      },
-
       colors: {
-        border: 'var(--border)',
-        input: 'var(--input)',
-        ring: 'var(--ring)',
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
-        primary: {
-          DEFAULT: 'var(--primary)',
-          foreground: 'var(--primary-foreground)',
-        },
-        secondary: {
-          DEFAULT: 'var(--secondary)',
-          foreground: 'var(--secondary-foreground)',
-        },
-        tertiary: {
-          DEFAULT: 'var(--tertiary)',
-          foreground: 'var(--tertiary-foreground)',
-        },
-        quaternary: {
-          DEFAULT: 'var(--quaternary)',
-          foreground: 'var(--quaternary-foreground)',
-        },
-        successful: {
-          DEFAULT: 'var(--successful)',
-          foreground: 'var(--successful-foreground)',
-        },
-        destructive: {
-          DEFAULT: 'var(--destructive)',
-          foreground: 'var(--destructive-foreground)',
-        },
-        muted: {
-          DEFAULT: 'var(--muted)',
-          foreground: 'var(--muted-foreground)',
-        },
-        accent: {
-          DEFAULT: 'var(--accent)',
-          foreground: 'var(--accent-foreground)',
-        },
-        popover: {
-          DEFAULT: 'var(--popover)',
-          foreground: 'var(--popover-foreground)',
-        },
-        card: {
-          DEFAULT: 'var(--card)',
-          foreground: 'var(--card-foreground)',
-        },
+        'primary-lightest': '#e6f2f1',
+        'primary-light': '#abd4cf',
+        primary: '#6ab3ab',
+        'primary-dark': '#5fa19a',
+        accent: '#fcd884',
+        danger: '#cd5a5a',
+        'danger-dark': '#b95151',
+        'gray-lightest': '#f8f8f8',
+        'gray-light': '#eeeeee',
+        gray: '#bdbdbd',
+        'gray-dark': '#777777',
+        white: '#ffffff',
+        black: '#222222',
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 30px)',
-        sm: 'calc(var(--radius) - 40px)',
+        xs: '0.125rem', // 2px
+        sm: '0.25rem', // 4px
+        DEFAULT: '0.625rem', // 10px
       },
       keyframes: {
         'accordion-down': {