Skip to content

N
nextjs-starter-template
Commit 968d9eb9 by Moorthy G
Options

feat: upgrade to tailwind v4

parent a642a4f7
Showing with 654 additions and 794 deletions
.storybook/main.ts
...@@ -4,14 +4,15 @@ import path from 'path'; ...@@ -4,14 +4,15 @@ import path from 'path';
const config: StorybookConfig = { const config: StorybookConfig = {
stories: [ stories: [
'../components/**/*.stories.@(ts|tsx|js|jsx|mdx)', '../components/**/*.stories.@(ts|tsx|js|jsx|mdx)',
'../theme/**/*.stories.@(ts|tsx|js|jsx|mdx)' '../styles/**/*.stories.@(ts|tsx|js|jsx|mdx)'
], ],
addons: [ addons: [
'@storybook/addon-links', '@storybook/addon-links',
'@storybook/addon-essentials', '@storybook/addon-essentials',
'@storybook/addon-onboarding', '@storybook/addon-onboarding',
'@storybook/addon-interactions', '@storybook/addon-interactions',
'storybook-dark-mode' 'storybook-dark-mode',
'@storybook/addon-themes'
], ],
webpackFinal: async (config) => { webpackFinal: async (config) => {
if (config.resolve) { if (config.resolve) {
......
.storybook/preview.tsx
import React from 'react'; import React from 'react';
import { themes } from '@storybook/theming'; import { withThemeByClassName } from '@storybook/addon-themes';
import { HeroUIProvider } from "@heroui/react"; import { HeroUIProvider } from '@heroui/react';
import type { Preview, ReactRenderer } from '@storybook/react';
import './style.css';
import '@/styles/globals.css'; import '@/styles/global.css';
import type { Preview } from '@storybook/react'; const decorators: Preview['decorators'] = [
(Story, { globals: { locale, disableAnimation } }) => {
const decorators: Preview['decorators'] = [ const direction =
(Story, { globals: { locale, disableAnimation } }) => { // @ts-ignore
const direction = locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
// @ts-ignore ? 'rtl'
locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl' : undefined;
? 'rtl'
: undefined; return (
<HeroUIProvider locale={locale} disableAnimation={disableAnimation}>
return ( <div className="bg-dark" lang={locale} dir={direction}>
<HeroUIProvider locale={locale} disableAnimation={disableAnimation}> <Story />
<div className="bg-dark" lang={locale} dir={direction}> </div>
<Story /> </HeroUIProvider>
</div> );
</HeroUIProvider> },
); withThemeByClassName<ReactRenderer>({
} themes: {
]; light: '',
dark: 'dark'
const parameters: Preview['parameters'] = { },
actions: { argTypesRegex: '^on[A-Z].*' }, defaultTheme: 'light'
options: { })
storySort: { ];
method: 'alphabetical',
order: ['Foundations'] const parameters: Preview['parameters'] = {
} actions: { argTypesRegex: '^on[A-Z].*' },
}, options: {
controls: { storySort: {
matchers: { method: 'alphabetical',
color: /(background|color)$/i, order: ['Foundations']
date: /Date$/i }
} },
}, controls: {
darkMode: { matchers: {
current: 'dark', color: /(background|color)$/i,
stylePreview: true, date: /Date$/i
darkClass: 'dark', }
lightClass: 'light', }
classTarget: 'html', };
dark: {
...themes.dark, const globalTypes: Preview['globalTypes'] = {
appBg: '#161616', locale: {
barBg: 'black', toolbar: {
background: 'black', icon: 'globe',
appContentBg: 'black', items: ['en', 'ar'].map((locale) => ({
appBorderRadius: 14 value: locale,
}, title: new Intl.DisplayNames(undefined, { type: 'language' }).of(
light: { locale
...themes.light ),
} right:
} // @ts-ignore
}; new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'Right to Left'
const globalTypes: Preview['globalTypes'] = { : undefined
locale: { }))
toolbar: { }
icon: 'globe', },
items: ['en', 'ar'].map((locale) => ({ disableAnimation: {
value: locale, name: 'Disable Animation',
title: new Intl.DisplayNames(undefined, { type: 'language' }).of( description: 'Disable all animations in the stories',
locale toolbar: {
), icon: 'photodrag',
right: items: [
// @ts-ignore { value: true, title: 'True' },
new Intl.Locale(locale)?.textInfo?.direction === 'rtl' { value: false, title: 'False' }
? 'Right to Left' ]
: undefined }
})) }
} };
},
disableAnimation: { const preview: Preview = {
name: 'Disable Animation', decorators,
description: 'Disable all animations in the stories', parameters,
toolbar: { globalTypes
icon: 'photodrag', };
items: [
{ value: true, title: 'True' }, export default preview;
{ value: false, title: 'False' }
]
}
}
};
const preview: Preview = {
decorators,
parameters,
globalTypes
};
export default preview;
.storybook/style.css deleted 100644 → 0
@tailwind base;
@tailwind components;
@tailwind utilities;
h1 {
@apply text-4xl font-bold !text-foreground;
}
h2 {
@apply text-2xl font-bold !text-foreground !border-none;
}
h3 {
@apply text-xl font-bold !text-neutral-600;
}
.dark .sbdocs-wrapper,
.dark .sbdocs-preview {
background-color: #000000;
color: #fff;
}
.dark .sbdocs-preview {
border: 1px solid #292929;
}
.dark .docblock-code-toggle {
background: transparent;
color: #d4d4d4;
}
.dark div:has(.docblock-code-toggle) {
background: transparent;
}
.dark .os-theme-dark {
background: #161616;
color: #fff;
}
.dark .sbdocs-title {
color: #fff;
}
.dark .docblock-argstable-head {
background: #161616;
}
.dark .docblock-argstable-head th {
color: #bcbcbc;
border-bottom: 1px solid #292929 !important;
}
.dark .docblock-argstable-head th span {
color: #bcbcbc;
}
.dark #docs-root tbody td {
background: #161616 !important;
color: #bcbcbc !important;
}
.dark #docs-root tbody tr:first-child td:first-child {
border-top-left-radius: 0 !important;
}
.dark #docs-root tbody tr:first-child td:last-child {
border-top-right-radius: 0 !important;
}
.dark #docs-root tbody tr:not(:first-child) {
border-top: 1px solid #292929 !important;
}
app/layout.tsx
import Providers from '@/components/layout/Providers'; import Providers from '@/components/layout/Providers';
import '@/styles/globals.css'; import '@/styles/global.css';
interface LayoutProps { interface LayoutProps {
children: React.ReactNode; children: React.ReactNode;
......
components/layout/PageNotFound/styles.module.scss deleted 100644 → 0
@use '@styles/vars.scss';
.notFound {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10vh 1em;
box-sizing: border-box;
h2 {
font-size: 10em;
font-weight: 100;
line-height: 0.8;
margin: 0;
color: #1ea7fd;
}
a {
margin-top: 2em;
}
}
@include vars.mQuery(xl) {
.notFound {
font-size: 0.9em;
}
}
components/shared/ResponsiveImage/ResponsiveImage.tsx
...@@ -58,7 +58,7 @@ export const ResponsiveImage: React.FC<ResponsiveImageProps> & { ...@@ -58,7 +58,7 @@ export const ResponsiveImage: React.FC<ResponsiveImageProps> & {
return ( return (
<picture> <picture>
{children} {children}
<img alt="" {...props} {...rest} /> <img {...props} {...rest} />
</picture> </picture>
); );
} }
......
lib/merge-clsx.ts
...@@ -11,12 +11,7 @@ const COMMON_UNITS = ['small', 'medium', 'large']; ...@@ -11,12 +11,7 @@ const COMMON_UNITS = ['small', 'medium', 'large'];
*/ */
const twMerge = extendTailwindMerge({ const twMerge = extendTailwindMerge({
extend: { extend: {
theme: { theme: {},
opacity: ['disabled'],
spacing: ['divider'],
borderWidth: COMMON_UNITS,
borderRadius: COMMON_UNITS
},
classGroups: { classGroups: {
shadow: [{ shadow: COMMON_UNITS }], shadow: [{ shadow: COMMON_UNITS }],
'font-size': [{ text: ['tiny', ...COMMON_UNITS] }], 'font-size': [{ text: ['tiny', ...COMMON_UNITS] }],
......
package.json
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
"analyze": "cross-env ANALYZE=true next build" "analyze": "cross-env ANALYZE=true next build"
}, },
"dependencies": { "dependencies": {
"@heroui/react": "2.7.6", "@heroui/react": "2.8.0-beta.4",
"@tailwindcss/postcss": "^4.1.6",
"@types/node": "^22.15.17", "@types/node": "^22.15.17",
"@types/react": "^19.1.3", "@types/react": "^19.1.3",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
...@@ -24,8 +25,8 @@ ...@@ -24,8 +25,8 @@
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"sharp": "^0.34.1", "sharp": "^0.34.1",
"tailwind-merge": "^2.6.0", "tailwind-merge": "^3.3.0",
"tailwindcss": "^3.4.1", "tailwindcss": "^4.1.6",
"typescript": "^5.8.3" "typescript": "^5.8.3"
}, },
"devDependencies": { "devDependencies": {
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
"@storybook/addon-interactions": "8.6.12", "@storybook/addon-interactions": "8.6.12",
"@storybook/addon-links": "^8.6.12", "@storybook/addon-links": "^8.6.12",
"@storybook/addon-onboarding": "8.6.12", "@storybook/addon-onboarding": "8.6.12",
"@storybook/addon-themes": "^8.6.12",
"@storybook/blocks": "8.6.12", "@storybook/blocks": "8.6.12",
"@storybook/nextjs": "^8.6.12", "@storybook/nextjs": "^8.6.12",
"@storybook/react": "8.6.12", "@storybook/react": "8.6.12",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
postcss.config.js → postcss.config.mjs
module.exports = { export default {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {}
autoprefixer: {}
} }
}; };
styles/global.css 0 → 100644
@import 'tailwindcss';
@plugin './hero.ts';
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
styles/globals.css deleted 100644 → 0
@tailwind base;
@tailwind components;
@tailwind utilities;
styles/hero.ts 0 → 100644
import { heroui } from '@heroui/react';
import themes from './themes';
export default heroui({ themes });
theme/colors/colors.stories.tsx → styles/stories/colors.stories.tsx
import React from 'react'; import React from 'react';
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/react';
import { parseToRgba, readableColor } from 'color2k'; import { parseToRgba, readableColor } from 'color2k';
type ColorsItem = { type ColorsItem = {
color: string; color: string;
className?: string; className?: string;
textClassName?: string; textClassName?: string;
}; };
type SwatchColors = { type SwatchColors = {
title: string; title: string;
items: ColorsItem[]; items: ColorsItem[];
}; };
type SwatchSetProps = { type SwatchSetProps = {
colors: SwatchColors[]; colors: SwatchColors[];
isSemantic?: boolean; isSemantic?: boolean;
}; };
const Swatch = ({ color }: { color: string }) => { const Swatch = ({ color }: { color: string }) => {
const colorText = color const colorText = color
? `#${parseToRgba(color) ? `#${parseToRgba(color)
.slice(0, 3) .slice(0, 3)
.map((x) => x.toString(16).padStart(2, '0')) .map((x) => x.toString(16).padStart(2, '0'))
.join('') .join('')
.toUpperCase()}` .toUpperCase()}`
: 'N/A'; : 'N/A';
return ( return (
<div <div
className="flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg" className="flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg"
style={{ style={{
backgroundColor: color backgroundColor: color
}}> }}>
<span <span
style={{ style={{
color: readableColor(color) color: readableColor(color)
}}> }}>
{colorText} {colorText}
</span> </span>
</div> </div>
); );
}; };
const SemanticSwatch = ({ const SemanticSwatch = ({
color, color,
className, className,
textClassName textClassName
}: { }: {
color: string; color: string;
className?: string; className?: string;
textClassName?: string; textClassName?: string;
}) => { }) => {
return ( return (
<div <div
className={`${className} flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg`}> 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> <span className={`${textClassName} text-sm`}>{color}</span>
</div> </div>
); );
}; };
const SwatchSet = ({ colors, isSemantic = false }: SwatchSetProps) => ( const SwatchSet = ({ colors, isSemantic = false }: SwatchSetProps) => (
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2"> <div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2">
{colors.map(({ title, items }) => ( {colors.map(({ title, items }) => (
<div key={title} className="flex flex-col items-start w-full h-full"> <div key={title} className="flex flex-col items-start w-full h-full">
<h2 className="text-xl font-bold text-foreground">{title}</h2> <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"> <div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
{items.map((c, index) => {items.map((c, index) =>
isSemantic ? ( isSemantic ? (
<SemanticSwatch <SemanticSwatch
key={`${c.color}-${index}`} key={`${c.color}-${index}`}
className={c.className} className={c.className}
color={c.color} color={c.color}
textClassName={c.textClassName} textClassName={c.textClassName}
/> />
) : ( ) : (
<Swatch key={`${c.color}-${index}`} color={c.color} /> <Swatch key={`${c.color}-${index}`} color={c.color} />
) )
)} )}
</div> </div>
</div> </div>
))} ))}
</div> </div>
); );
export default { export default {
title: 'Foundations/SemanticColors', title: 'Foundations/SemanticColors',
component: SwatchSet, component: SwatchSet,
argTypes: { argTypes: {
isSemantic: { isSemantic: {
control: false control: false
} }
} }
} as Meta<typeof SwatchSet>; } as Meta<typeof SwatchSet>;
export const SemanticColors = { export const SemanticColors = {
args: { args: {
isSemantic: true, isSemantic: true,
colors: [ colors: [
{ {
title: 'Layout', title: 'Layout',
items: [ items: [
{ {
color: 'background', color: 'background',
className: 'bg-background', className: 'bg-background',
textClassName: 'text-foreground' textClassName: 'text-foreground'
}, },
{ {
color: 'foreground', color: 'foreground',
className: 'bg-foreground', className: 'bg-foreground',
textClassName: 'text-background' textClassName: 'text-background'
}, },
{ {
color: 'divider', color: 'divider',
className: 'bg-divider', className: 'bg-divider',
textClassName: 'text-foreground' textClassName: 'text-foreground'
}, },
{ {
color: 'focus', color: 'focus',
className: 'bg-focus', className: 'bg-focus',
textClassName: 'text-primary-foreground' textClassName: 'text-primary-foreground'
} }
] ]
}, },
{ {
title: 'Content', title: 'Content',
items: [ items: [
{ {
color: 'content1', color: 'content1',
className: 'bg-content1', className: 'bg-content1',
textClassName: 'text-content1-foreground' textClassName: 'text-content1-foreground'
}, },
{ {
color: 'content2', color: 'content2',
className: 'bg-content2', className: 'bg-content2',
textClassName: 'text-content2-foreground' textClassName: 'text-content2-foreground'
}, },
{ {
color: 'content3', color: 'content3',
className: 'bg-content3', className: 'bg-content3',
textClassName: 'text-content3-foreground' textClassName: 'text-content3-foreground'
}, },
{ {
color: 'content4', color: 'content4',
className: 'bg-content4', className: 'bg-content4',
textClassName: 'text-content4-foreground' textClassName: 'text-content4-foreground'
} }
] ]
}, },
{ {
title: 'Base', title: 'Base',
items: [ items: [
{ {
color: 'default', color: 'default',
className: 'bg-default', className: 'bg-default',
textClassName: 'text-default-foreground' textClassName: 'text-default-foreground'
}, },
{ {
color: 'primary', color: 'primary',
className: 'bg-primary', className: 'bg-primary',
textClassName: 'text-primary-foreground' textClassName: 'text-primary-foreground'
}, },
{ {
color: 'secondary', color: 'secondary',
className: 'bg-secondary', className: 'bg-secondary',
textClassName: 'text-secondary-foreground' textClassName: 'text-secondary-foreground'
}, },
{ {
color: 'success', color: 'success',
className: 'bg-success', className: 'bg-success',
textClassName: 'text-success-foreground' textClassName: 'text-success-foreground'
}, },
{ {
color: 'warning', color: 'warning',
className: 'bg-warning', className: 'bg-warning',
textClassName: 'text-warning-foreground' textClassName: 'text-warning-foreground'
}, },
{ {
color: 'danger', color: 'danger',
className: 'bg-danger', className: 'bg-danger',
textClassName: 'text-danger-foreground' textClassName: 'text-danger-foreground'
} }
] ]
}, },
{ {
title: 'Default', title: 'Default',
items: [ items: [
{ {
color: 'default-50', color: 'default-50',
className: 'bg-default-50', className: 'bg-default-50',
textClassName: 'text-default-900' textClassName: 'text-default-900'
}, },
{ {
color: 'default-100', color: 'default-100',
className: 'bg-default-100', className: 'bg-default-100',
textClassName: 'text-default-900' textClassName: 'text-default-900'
}, },
{ {
color: 'default-200', color: 'default-200',
className: 'bg-default-200', className: 'bg-default-200',
textClassName: 'text-default-800' textClassName: 'text-default-800'
}, },
{ {
color: 'default-300', color: 'default-300',
className: 'bg-default-300', className: 'bg-default-300',
textClassName: 'text-default-800' textClassName: 'text-default-800'
}, },
{ {
color: 'default-400', color: 'default-400',
className: 'bg-default-400', className: 'bg-default-400',
textClassName: 'text-default-800' textClassName: 'text-default-800'
}, },
{ {
color: 'default-500', color: 'default-500',
className: 'bg-default-500', className: 'bg-default-500',
textClassName: 'text-default-foreground' textClassName: 'text-default-foreground'
}, },
{ {
color: 'default-600', color: 'default-600',
className: 'bg-default-600', className: 'bg-default-600',
textClassName: 'text-default-50' textClassName: 'text-default-50'
}, },
{ {
color: 'default-700', color: 'default-700',
className: 'bg-default-700', className: 'bg-default-700',
textClassName: 'text-default-100' textClassName: 'text-default-100'
}, },
{ {
color: 'default-800', color: 'default-800',
className: 'bg-default-800', className: 'bg-default-800',
textClassName: 'text-default-100' textClassName: 'text-default-100'
}, },
{ {
color: 'default-900', color: 'default-900',
className: 'bg-default-900', className: 'bg-default-900',
textClassName: 'text-default-100' textClassName: 'text-default-100'
} }
] ]
}, },
{ {
title: 'Primary', title: 'Primary',
items: [ items: [
{ {
color: 'primary-50', color: 'primary-50',
className: 'bg-primary-50', className: 'bg-primary-50',
textClassName: 'text-primary-900' textClassName: 'text-primary-900'
}, },
{ {
color: 'primary-100', color: 'primary-100',
className: 'bg-primary-100', className: 'bg-primary-100',
textClassName: 'text-primary-900' textClassName: 'text-primary-900'
}, },
{ {
color: 'primary-200', color: 'primary-200',
className: 'bg-primary-200', className: 'bg-primary-200',
textClassName: 'text-primary-800' textClassName: 'text-primary-800'
}, },
{ {
color: 'primary-300', color: 'primary-300',
className: 'bg-primary-300', className: 'bg-primary-300',
textClassName: 'text-primary-800' textClassName: 'text-primary-800'
}, },
{ {
color: 'primary-400', color: 'primary-400',
className: 'bg-primary-400', className: 'bg-primary-400',
textClassName: 'text-primary-800' textClassName: 'text-primary-800'
}, },
{ {
color: 'primary-500', color: 'primary-500',
className: 'bg-primary-500', className: 'bg-primary-500',
textClassName: 'text-primary-foreground' textClassName: 'text-primary-foreground'
}, },
{ {
color: 'primary-600', color: 'primary-600',
className: 'bg-primary-600', className: 'bg-primary-600',
textClassName: 'text-primary-50' textClassName: 'text-primary-50'
}, },
{ {
color: 'primary-700', color: 'primary-700',
className: 'bg-primary-700', className: 'bg-primary-700',
textClassName: 'text-primary-100' textClassName: 'text-primary-100'
}, },
{ {
color: 'primary-800', color: 'primary-800',
className: 'bg-primary-800', className: 'bg-primary-800',
textClassName: 'text-primary-100' textClassName: 'text-primary-100'
}, },
{ {
color: 'primary-900', color: 'primary-900',
className: 'bg-primary-900', className: 'bg-primary-900',
textClassName: 'text-primary-100' textClassName: 'text-primary-100'
} }
] ]
}, },
{ {
title: 'Secondary', title: 'Secondary',
items: [ items: [
{ {
color: 'secondary-50', color: 'secondary-50',
className: 'bg-secondary-50', className: 'bg-secondary-50',
textClassName: 'text-secondary-900' textClassName: 'text-secondary-900'
}, },
{ {
color: 'secondary-100', color: 'secondary-100',
className: 'bg-secondary-100', className: 'bg-secondary-100',
textClassName: 'text-secondary-900' textClassName: 'text-secondary-900'
}, },
{ {
color: 'secondary-200', color: 'secondary-200',
className: 'bg-secondary-200', className: 'bg-secondary-200',
textClassName: 'text-secondary-800' textClassName: 'text-secondary-800'
}, },
{ {
color: 'secondary-300', color: 'secondary-300',
className: 'bg-secondary-300', className: 'bg-secondary-300',
textClassName: 'text-secondary-800' textClassName: 'text-secondary-800'
}, },
{ {
color: 'secondary-400', color: 'secondary-400',
className: 'bg-secondary-400', className: 'bg-secondary-400',
textClassName: 'text-secondary-800' textClassName: 'text-secondary-800'
}, },
{ {
color: 'secondary-500', color: 'secondary-500',
className: 'bg-secondary-500', className: 'bg-secondary-500',
textClassName: 'text-secondary-foreground' textClassName: 'text-secondary-foreground'
}, },
{ {
color: 'secondary-600', color: 'secondary-600',
className: 'bg-secondary-600', className: 'bg-secondary-600',
textClassName: 'text-secondary-50' textClassName: 'text-secondary-50'
}, },
{ {
color: 'secondary-700', color: 'secondary-700',
className: 'bg-secondary-700', className: 'bg-secondary-700',
textClassName: 'text-secondary-100' textClassName: 'text-secondary-100'
}, },
{ {
color: 'secondary-800', color: 'secondary-800',
className: 'bg-secondary-800', className: 'bg-secondary-800',
textClassName: 'text-secondary-100' textClassName: 'text-secondary-100'
}, },
{ {
color: 'secondary-900', color: 'secondary-900',
className: 'bg-secondary-900', className: 'bg-secondary-900',
textClassName: 'text-secondary-100' textClassName: 'text-secondary-100'
} }
] ]
}, },
{ {
title: 'Success', title: 'Success',
items: [ items: [
{ {
color: 'success-50', color: 'success-50',
className: 'bg-success-50', className: 'bg-success-50',
textClassName: 'text-success-900' textClassName: 'text-success-900'
}, },
{ {
color: 'success-100', color: 'success-100',
className: 'bg-success-100', className: 'bg-success-100',
textClassName: 'text-success-900' textClassName: 'text-success-900'
}, },
{ {
color: 'success-200', color: 'success-200',
className: 'bg-success-200', className: 'bg-success-200',
textClassName: 'text-success-800' textClassName: 'text-success-800'
}, },
{ {
color: 'success-300', color: 'success-300',
className: 'bg-success-300', className: 'bg-success-300',
textClassName: 'text-success-800' textClassName: 'text-success-800'
}, },
{ {
color: 'success-400', color: 'success-400',
className: 'bg-success-400', className: 'bg-success-400',
textClassName: 'text-success-800' textClassName: 'text-success-800'
}, },
{ {
color: 'success-500', color: 'success-500',
className: 'bg-success-500', className: 'bg-success-500',
textClassName: 'text-success-foreground' textClassName: 'text-success-foreground'
}, },
{ {
color: 'success-600', color: 'success-600',
className: 'bg-success-600', className: 'bg-success-600',
textClassName: 'text-success-50' textClassName: 'text-success-50'
}, },
{ {
color: 'success-700', color: 'success-700',
className: 'bg-success-700', className: 'bg-success-700',
textClassName: 'text-success-100' textClassName: 'text-success-100'
}, },
{ {
color: 'success-800', color: 'success-800',
className: 'bg-success-800', className: 'bg-success-800',
textClassName: 'text-success-100' textClassName: 'text-success-100'
}, },
{ {
color: 'success-900', color: 'success-900',
className: 'bg-success-900', className: 'bg-success-900',
textClassName: 'text-success-100' textClassName: 'text-success-100'
} }
] ]
}, },
{ {
title: 'Warning', title: 'Warning',
items: [ items: [
{ {
color: 'warning-50', color: 'warning-50',
className: 'bg-warning-50', className: 'bg-warning-50',
textClassName: 'text-warning-900' textClassName: 'text-warning-900'
}, },
{ {
color: 'warning-100', color: 'warning-100',
className: 'bg-warning-100', className: 'bg-warning-100',
textClassName: 'text-warning-900' textClassName: 'text-warning-900'
}, },
{ {
color: 'warning-200', color: 'warning-200',
className: 'bg-warning-200', className: 'bg-warning-200',
textClassName: 'text-warning-800' textClassName: 'text-warning-800'
}, },
{ {
color: 'warning-300', color: 'warning-300',
className: 'bg-warning-300', className: 'bg-warning-300',
textClassName: 'text-warning-800' textClassName: 'text-warning-800'
}, },
{ {
color: 'warning-400', color: 'warning-400',
className: 'bg-warning-400', className: 'bg-warning-400',
textClassName: 'text-warning-800' textClassName: 'text-warning-800'
}, },
{ {
color: 'warning-500', color: 'warning-500',
className: 'bg-warning-500', className: 'bg-warning-500',
textClassName: 'text-warning-foreground' textClassName: 'text-warning-foreground'
}, },
{ {
color: 'warning-600', color: 'warning-600',
className: 'bg-warning-600', className: 'bg-warning-600',
textClassName: 'text-warning-50' textClassName: 'text-warning-50'
}, },
{ {
color: 'warning-700', color: 'warning-700',
className: 'bg-warning-700', className: 'bg-warning-700',
textClassName: 'text-warning-100' textClassName: 'text-warning-100'
}, },
{ {
color: 'warning-800', color: 'warning-800',
className: 'bg-warning-800', className: 'bg-warning-800',
textClassName: 'text-warning-100' textClassName: 'text-warning-100'
}, },
{ {
color: 'warning-900', color: 'warning-900',
className: 'bg-warning-900', className: 'bg-warning-900',
textClassName: 'text-warning-100' textClassName: 'text-warning-100'
} }
] ]
}, },
{ {
title: 'Danger', title: 'Danger',
items: [ items: [
{ {
color: 'danger-50', color: 'danger-50',
className: 'bg-danger-50', className: 'bg-danger-50',
textClassName: 'text-danger-900' textClassName: 'text-danger-900'
}, },
{ {
color: 'danger-100', color: 'danger-100',
className: 'bg-danger-100', className: 'bg-danger-100',
textClassName: 'text-danger-900' textClassName: 'text-danger-900'
}, },
{ {
color: 'danger-200', color: 'danger-200',
className: 'bg-danger-200', className: 'bg-danger-200',
textClassName: 'text-danger-800' textClassName: 'text-danger-800'
}, },
{ {
color: 'danger-300', color: 'danger-300',
className: 'bg-danger-300', className: 'bg-danger-300',
textClassName: 'text-danger-800' textClassName: 'text-danger-800'
}, },
{ {
color: 'danger-400', color: 'danger-400',
className: 'bg-danger-400', className: 'bg-danger-400',
textClassName: 'text-danger-800' textClassName: 'text-danger-800'
}, },
{ {
color: 'danger-500', color: 'danger-500',
className: 'bg-danger-500', className: 'bg-danger-500',
textClassName: 'text-danger-foreground' textClassName: 'text-danger-foreground'
}, },
{ {
color: 'danger-600', color: 'danger-600',
className: 'bg-danger-600', className: 'bg-danger-600',
textClassName: 'text-danger-50' textClassName: 'text-danger-50'
}, },
{ {
color: 'danger-700', color: 'danger-700',
className: 'bg-danger-700', className: 'bg-danger-700',
textClassName: 'text-danger-100' textClassName: 'text-danger-100'
}, },
{ {
color: 'danger-800', color: 'danger-800',
className: 'bg-danger-800', className: 'bg-danger-800',
textClassName: 'text-danger-100' textClassName: 'text-danger-100'
}, },
{ {
color: 'danger-900', color: 'danger-900',
className: 'bg-danger-900', className: 'bg-danger-900',
textClassName: 'text-danger-100' textClassName: 'text-danger-100'
} }
] ]
} }
] ]
} }
}; };
theme/typography.stories.tsx → styles/stories/typography.stories.tsx
export default { export default {
title: 'Foundations/Typography' title: 'Foundations/Typography'
}; };
export const Typography = () => ( 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">Heading</div> <div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold">Heading</div> <div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold">Heading</div> <div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold">Heading</div> <div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold">Heading</div> <div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold">Heading</div> <div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold">Heading</div> <div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold">Heading</div> <div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold">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
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p> </p>
<p> <p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima! architecto, possimus minima!
</p> </p>
</div> </div>
); );
tailwind.config.ts deleted 100644 → 0
import { heroui } from '@heroui/react';
import colors from './theme/colors';
import type { Config } from 'tailwindcss';
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/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {
fontFamily: {
sans: ['Indivisible', 'sans-serif']
}
}
},
darkMode: 'class',
plugins: [
heroui({
themes: {
light: colors.light,
dark: colors.dark
}
})
]
};
export default config;
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