feat(theme/color): seperate out colors to a file with stories

.storybook/main.ts

@@ -2,7 +2,10 @@ import type { StorybookConfig } from '@storybook/nextjs';
 import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../components/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  stories: [
+    '../components/**/*.stories.@(ts|tsx|js|jsx|mdx)',
+    '../theme/**/*.stories.@(ts|tsx|js|jsx|mdx)'
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

.storybook/preview.tsx

@@ -27,6 +27,12 @@ const decorators: Preview['decorators'] = [
 
 const parameters: Preview['parameters'] = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Foundations']
+    }
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,

components/types.d.ts

-/** Commonly used types that are not
- * associated with specific component */
-
-export interface ILink {
-  label: string;
-  url: string;
-}
-
-export interface ISocialLink {
-  icon: string;
-  url: string;
-  label?: string;
-}

package.json

@@ -16,6 +16,7 @@
     "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.5.1",
+    "color2k": "^2.0.3",
     "framer-motion": "^11.2.9",
     "next": "^14.2.3",
     "postcss": "^8.4.38",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
+      color2k:
+        specifier: ^2.0.3
+        version: 2.0.3
       framer-motion:
         specifier: ^11.2.9
         version: 11.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)

tailwind.config.ts

-const { nextui } = require('@nextui-org/react');
+import { nextui } from '@nextui-org/react';
+import colors from './theme/colors';
 
 import type { Config } from 'tailwindcss';
 
@@ -6,47 +7,25 @@ const config: Config = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './theme/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
     './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
     extend: {
-      colors: {
-        primary: {
-          '50': '#fdf2f7',
-          '100': '#fde6f0',
-          '200': '#fccee3',
-          '300': '#fba6ca',
-          '400': '#f86ea6',
-          '500': '#f14385',
-          '600': '#d31d59',
-          '700': '#c31348',
-          '800': '#a1133c',
-          '900': '#861535',
-          foreground: '#ffffff',
-          DEFAULT: '#d31d59'
-        },
-        secondary: {
-          '50': '#f1f8fe',
-          '100': '#e2effc',
-          '200': '#bfdef8',
-          '300': '#86c4f3',
-          '400': '#46a6ea',
-          '500': '#1d87d3',
-          '600': '#106db9',
-          '700': '#0e5796',
-          '800': '#104a7c',
-          '900': '#133f67',
-          '950': '#0d2844',
-          foreground: '#ffffff',
-          DEFAULT: '#1d87d3'
-        },
-        light: '#f4f4f4',
-        dark: '#222222'
+      fontFamily: {
+        sans: ['Indivisible', 'sans-serif']
       }
     }
   },
   darkMode: 'class',
-  plugins: [nextui()]
+  plugins: [
+    nextui({
+      themes: {
+        light: colors.light,
+        dark: colors.dark
+      }
+    })
+  ]
 };
 export default config;

theme/colors/index.ts

+export default {
+  light: {
+    colors: {
+      primary: {
+        '50': '#fdf2f7',
+        '100': '#fde6f0',
+        '200': '#fccee3',
+        '300': '#fba6ca',
+        '400': '#f86ea6',
+        '500': '#f14385',
+        '600': '#d31d59',
+        '700': '#c31348',
+        '800': '#a1133c',
+        '900': '#861535',
+        foreground: '#ffffff',
+        DEFAULT: '#d31d59'
+      },
+      secondary: {
+        '50': '#f1f8fe',
+        '100': '#e2effc',
+        '200': '#bfdef8',
+        '300': '#86c4f3',
+        '400': '#46a6ea',
+        '500': '#1d87d3',
+        '600': '#106db9',
+        '700': '#0e5796',
+        '800': '#104a7c',
+        '900': '#133f67',
+        foreground: '#ffffff',
+        DEFAULT: '#1d87d3'
+      }
+    }
+  },
+  dark: {
+    colors: {
+      primary: {
+        '50': '#861535',
+        '100': '#a1133c',
+        '200': '#c31348',
+        '300': '#d31d59',
+        '400': '#f14385',
+        '500': '#f86ea6',
+        '600': '#fba6ca',
+        '700': '#fccee3',
+        '800': '#fde6f0',
+        '900': '#fdf2f7',
+        foreground: '#ffffff',
+        DEFAULT: '#d31d59'
+      },
+      secondary: {
+        '50': '#133f67',
+        '100': '#104a7c',
+        '200': '#0e5796',
+        '300': '#106db9',
+        '400': '#1d87d3',
+        '500': '#46a6ea',
+        '600': '#86c4f3',
+        '700': '#bfdef8',
+        '800': '#e2effc',
+        '900': '#f1f8fe',
+        foreground: '#ffffff',
+        DEFAULT: '#1d87d3'
+      }
+    }
+  }
+};

components/base/typography.stories.tsx → theme/typography.stories.tsx

 export default {
-  title: 'Basic/Typography'
+  title: 'Foundations/Typography'
 };
 
-export const TitleAndParagraph = () => (
+export const Typography = () => (
   <div className="container">
     <div className="flex flex-col gap-4 mb-5">
-      <div className="text-9xl font-bold uppercase">Heading</div>
-      <div className="text-8xl font-bold uppercase">Heading</div>
-      <div className="text-7xl font-bold uppercase">Heading</div>
-      <div className="text-6xl font-bold uppercase">Heading</div>
-      <div className="text-5xl font-bold uppercase">Heading</div>
-      <div className="text-4xl font-bold uppercase">Heading</div>
-      <div className="text-3xl font-bold uppercase">Heading</div>
-      <div className="text-2xl font-bold uppercase">Heading</div>
-      <div className="text-xl font-bold uppercase">Heading</div>
+      <div className="text-9xl font-bold">Heading</div>
+      <div className="text-8xl font-bold">Heading</div>
+      <div className="text-7xl font-bold">Heading</div>
+      <div className="text-6xl font-bold">Heading</div>
+      <div className="text-5xl font-bold">Heading</div>
+      <div className="text-4xl font-bold">Heading</div>
+      <div className="text-3xl font-bold">Heading</div>
+      <div className="text-2xl font-bold">Heading</div>
+      <div className="text-xl font-bold">Heading</div>
     </div>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae