Skip to content

N
nextjs-starter-template
Commit 2e928786 by Moorthy G
Options

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

parent c7363fb2
Showing with 622 additions and 59 deletions
.storybook/main.ts
...@@ -2,7 +2,10 @@ import type { StorybookConfig } from '@storybook/nextjs'; ...@@ -2,7 +2,10 @@ import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path'; import path from 'path';
const config: StorybookConfig = { 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: [ addons: [
'@storybook/addon-links', '@storybook/addon-links',
'@storybook/addon-essentials', '@storybook/addon-essentials',
......
.storybook/preview.tsx
...@@ -27,6 +27,12 @@ const decorators: Preview['decorators'] = [ ...@@ -27,6 +27,12 @@ const decorators: Preview['decorators'] = [
const parameters: Preview['parameters'] = { const parameters: Preview['parameters'] = {
actions: { argTypesRegex: '^on[A-Z].*' }, actions: { argTypesRegex: '^on[A-Z].*' },
options: {
storySort: {
method: 'alphabetical',
order: ['Foundations']
}
},
controls: { controls: {
matchers: { matchers: {
color: /(background|color)$/i, color: /(background|color)$/i,
......
components/types.d.ts deleted 100644 → 0
/** 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 @@ ...@@ -16,6 +16,7 @@
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"color2k": "^2.0.3",
"framer-motion": "^11.2.9", "framer-motion": "^11.2.9",
"next": "^14.2.3", "next": "^14.2.3",
"postcss": "^8.4.38", "postcss": "^8.4.38",
......
pnpm-lock.yaml
...@@ -23,6 +23,9 @@ importers: ...@@ -23,6 +23,9 @@ importers:
classnames: classnames:
specifier: ^2.5.1 specifier: ^2.5.1
version: 2.5.1 version: 2.5.1
color2k:
specifier: ^2.0.3
version: 2.0.3
framer-motion: framer-motion:
specifier: ^11.2.9 specifier: ^11.2.9
version: 11.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) 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'; import type { Config } from 'tailwindcss';
...@@ -6,47 +7,25 @@ const config: Config = { ...@@ -6,47 +7,25 @@ const config: Config = {
content: [ content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}',
'./theme/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}' './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
], ],
theme: { theme: {
extend: { extend: {
colors: { fontFamily: {
primary: { sans: ['Indivisible', 'sans-serif']
'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'
} }
} }
}, },
darkMode: 'class', darkMode: 'class',
plugins: [nextui()] plugins: [
nextui({
themes: {
light: colors.light,
dark: colors.dark
}
})
]
}; };
export default config; export default config;
theme/colors/colors.stories.tsx 0 → 100644
import React from 'react';
import { Meta } from '@storybook/react';
import { parseToRgba, readableColor } from 'color2k';
type ColorsItem = {
color: string;
className?: string;
textClassName?: string;
};
type SwatchColors = {
title: string;
items: ColorsItem[];
};
type SwatchSetProps = {
colors: SwatchColors[];
isSemantic?: boolean;
};
const Swatch = ({ color }: { color: string }) => {
const colorText = color
? `#${parseToRgba(color)
.slice(0, 3)
.map((x) => x.toString(16).padStart(2, '0'))
.join('')
.toUpperCase()}`
: 'N/A';
return (
<div
className="flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg"
style={{
backgroundColor: color
}}>
<span
style={{
color: readableColor(color)
}}>
{colorText}
</span>
</div>
);
};
const SemanticSwatch = ({
color,
className,
textClassName
}: {
color: string;
className?: string;
textClassName?: string;
}) => {
return (
<div
className={`${className} flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg`}>
<span className={`${textClassName} text-sm`}>{color}</span>
</div>
);
};
const SwatchSet = ({ colors, isSemantic = false }: SwatchSetProps) => (
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2">
{colors.map(({ title, items }) => (
<div key={title} className="flex flex-col items-start w-full h-full">
<h2 className="text-xl font-bold text-foreground">{title}</h2>
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
{items.map((c, index) =>
isSemantic ? (
<SemanticSwatch
key={`${c.color}-${index}`}
className={c.className}
color={c.color}
textClassName={c.textClassName}
/>
) : (
<Swatch key={`${c.color}-${index}`} color={c.color} />
)
)}
</div>
</div>
))}
</div>
);
export default {
title: 'Foundations/SemanticColors',
component: SwatchSet,
argTypes: {
isSemantic: {
control: false
}
}
} as Meta<typeof SwatchSet>;
export const SemanticColors = {
args: {
isSemantic: true,
colors: [
{
title: 'Layout',
items: [
{
color: 'background',
className: 'bg-background',
textClassName: 'text-foreground'
},
{
color: 'foreground',
className: 'bg-foreground',
textClassName: 'text-background'
},
{
color: 'divider',
className: 'bg-divider',
textClassName: 'text-foreground'
},
{
color: 'focus',
className: 'bg-focus',
textClassName: 'text-primary-foreground'
}
]
},
{
title: 'Content',
items: [
{
color: 'content1',
className: 'bg-content1',
textClassName: 'text-content1-foreground'
},
{
color: 'content2',
className: 'bg-content2',
textClassName: 'text-content2-foreground'
},
{
color: 'content3',
className: 'bg-content3',
textClassName: 'text-content3-foreground'
},
{
color: 'content4',
className: 'bg-content4',
textClassName: 'text-content4-foreground'
}
]
},
{
title: 'Base',
items: [
{
color: 'default',
className: 'bg-default',
textClassName: 'text-default-foreground'
},
{
color: 'primary',
className: 'bg-primary',
textClassName: 'text-primary-foreground'
},
{
color: 'secondary',
className: 'bg-secondary',
textClassName: 'text-secondary-foreground'
},
{
color: 'success',
className: 'bg-success',
textClassName: 'text-success-foreground'
},
{
color: 'warning',
className: 'bg-warning',
textClassName: 'text-warning-foreground'
},
{
color: 'danger',
className: 'bg-danger',
textClassName: 'text-danger-foreground'
}
]
},
{
title: 'Default',
items: [
{
color: 'default-50',
className: 'bg-default-50',
textClassName: 'text-default-900'
},
{
color: 'default-100',
className: 'bg-default-100',
textClassName: 'text-default-900'
},
{
color: 'default-200',
className: 'bg-default-200',
textClassName: 'text-default-800'
},
{
color: 'default-300',
className: 'bg-default-300',
textClassName: 'text-default-800'
},
{
color: 'default-400',
className: 'bg-default-400',
textClassName: 'text-default-800'
},
{
color: 'default-500',
className: 'bg-default-500',
textClassName: 'text-default-foreground'
},
{
color: 'default-600',
className: 'bg-default-600',
textClassName: 'text-default-50'
},
{
color: 'default-700',
className: 'bg-default-700',
textClassName: 'text-default-100'
},
{
color: 'default-800',
className: 'bg-default-800',
textClassName: 'text-default-100'
},
{
color: 'default-900',
className: 'bg-default-900',
textClassName: 'text-default-100'
}
]
},
{
title: 'Primary',
items: [
{
color: 'primary-50',
className: 'bg-primary-50',
textClassName: 'text-primary-900'
},
{
color: 'primary-100',
className: 'bg-primary-100',
textClassName: 'text-primary-900'
},
{
color: 'primary-200',
className: 'bg-primary-200',
textClassName: 'text-primary-800'
},
{
color: 'primary-300',
className: 'bg-primary-300',
textClassName: 'text-primary-800'
},
{
color: 'primary-400',
className: 'bg-primary-400',
textClassName: 'text-primary-800'
},
{
color: 'primary-500',
className: 'bg-primary-500',
textClassName: 'text-primary-foreground'
},
{
color: 'primary-600',
className: 'bg-primary-600',
textClassName: 'text-primary-50'
},
{
color: 'primary-700',
className: 'bg-primary-700',
textClassName: 'text-primary-100'
},
{
color: 'primary-800',
className: 'bg-primary-800',
textClassName: 'text-primary-100'
},
{
color: 'primary-900',
className: 'bg-primary-900',
textClassName: 'text-primary-100'
}
]
},
{
title: 'Secondary',
items: [
{
color: 'secondary-50',
className: 'bg-secondary-50',
textClassName: 'text-secondary-900'
},
{
color: 'secondary-100',
className: 'bg-secondary-100',
textClassName: 'text-secondary-900'
},
{
color: 'secondary-200',
className: 'bg-secondary-200',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-300',
className: 'bg-secondary-300',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-400',
className: 'bg-secondary-400',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-500',
className: 'bg-secondary-500',
textClassName: 'text-secondary-foreground'
},
{
color: 'secondary-600',
className: 'bg-secondary-600',
textClassName: 'text-secondary-50'
},
{
color: 'secondary-700',
className: 'bg-secondary-700',
textClassName: 'text-secondary-100'
},
{
color: 'secondary-800',
className: 'bg-secondary-800',
textClassName: 'text-secondary-100'
},
{
color: 'secondary-900',
className: 'bg-secondary-900',
textClassName: 'text-secondary-100'
}
]
},
{
title: 'Success',
items: [
{
color: 'success-50',
className: 'bg-success-50',
textClassName: 'text-success-900'
},
{
color: 'success-100',
className: 'bg-success-100',
textClassName: 'text-success-900'
},
{
color: 'success-200',
className: 'bg-success-200',
textClassName: 'text-success-800'
},
{
color: 'success-300',
className: 'bg-success-300',
textClassName: 'text-success-800'
},
{
color: 'success-400',
className: 'bg-success-400',
textClassName: 'text-success-800'
},
{
color: 'success-500',
className: 'bg-success-500',
textClassName: 'text-success-foreground'
},
{
color: 'success-600',
className: 'bg-success-600',
textClassName: 'text-success-50'
},
{
color: 'success-700',
className: 'bg-success-700',
textClassName: 'text-success-100'
},
{
color: 'success-800',
className: 'bg-success-800',
textClassName: 'text-success-100'
},
{
color: 'success-900',
className: 'bg-success-900',
textClassName: 'text-success-100'
}
]
},
{
title: 'Warning',
items: [
{
color: 'warning-50',
className: 'bg-warning-50',
textClassName: 'text-warning-900'
},
{
color: 'warning-100',
className: 'bg-warning-100',
textClassName: 'text-warning-900'
},
{
color: 'warning-200',
className: 'bg-warning-200',
textClassName: 'text-warning-800'
},
{
color: 'warning-300',
className: 'bg-warning-300',
textClassName: 'text-warning-800'
},
{
color: 'warning-400',
className: 'bg-warning-400',
textClassName: 'text-warning-800'
},
{
color: 'warning-500',
className: 'bg-warning-500',
textClassName: 'text-warning-foreground'
},
{
color: 'warning-600',
className: 'bg-warning-600',
textClassName: 'text-warning-50'
},
{
color: 'warning-700',
className: 'bg-warning-700',
textClassName: 'text-warning-100'
},
{
color: 'warning-800',
className: 'bg-warning-800',
textClassName: 'text-warning-100'
},
{
color: 'warning-900',
className: 'bg-warning-900',
textClassName: 'text-warning-100'
}
]
},
{
title: 'Danger',
items: [
{
color: 'danger-50',
className: 'bg-danger-50',
textClassName: 'text-danger-900'
},
{
color: 'danger-100',
className: 'bg-danger-100',
textClassName: 'text-danger-900'
},
{
color: 'danger-200',
className: 'bg-danger-200',
textClassName: 'text-danger-800'
},
{
color: 'danger-300',
className: 'bg-danger-300',
textClassName: 'text-danger-800'
},
{
color: 'danger-400',
className: 'bg-danger-400',
textClassName: 'text-danger-800'
},
{
color: 'danger-500',
className: 'bg-danger-500',
textClassName: 'text-danger-foreground'
},
{
color: 'danger-600',
className: 'bg-danger-600',
textClassName: 'text-danger-50'
},
{
color: 'danger-700',
className: 'bg-danger-700',
textClassName: 'text-danger-100'
},
{
color: 'danger-800',
className: 'bg-danger-800',
textClassName: 'text-danger-100'
},
{
color: 'danger-900',
className: 'bg-danger-900',
textClassName: 'text-danger-100'
}
]
}
]
}
};
theme/colors/index.ts 0 → 100644
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 { export default {
title: 'Basic/Typography' title: 'Foundations/Typography'
}; };
export const TitleAndParagraph = () => ( export const Typography = () => (
<div className="container"> <div className="container">
<div className="flex flex-col gap-4 mb-5"> <div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold uppercase">Heading</div> <div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold uppercase">Heading</div> <div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold uppercase">Heading</div> <div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold uppercase">Heading</div> <div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold uppercase">Heading</div> <div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold uppercase">Heading</div> <div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold uppercase">Heading</div> <div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold uppercase">Heading</div> <div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold uppercase">Heading</div> <div className="text-xl font-bold">Heading</div>
</div> </div>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment