Merge pull request #6 from dscnitrourkela/typography-colors

feat: add typographies and colours

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
+}

src/components/shared/index.js

@@ -0,0 +1 @@
+export * from './typography';

src/components/shared/typography/Heading.jsx

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+
+const headingVariants = cva(['font-syne', 'font-bold', 'text-left', 'leading-7.5'], {
+	variants: {
+		variant: {
+			h1: ['text-10xl', 'leading-15'],
+			h2: ['text-3.5xl'],
+			h3: ['text-2xl'],
+		},
+	},
+});
+
+export default function Heading({ variant = 'h1', className, children, ...props }) {
+	const Tag = variant;
+	return (
+		<Tag className={cn(headingVariants({ variant, className }))} {...props}>
+			{children}
+		</Tag>
+	);
+}

src/components/shared/typography/Paragraph.jsx

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+
+const paragraphVariants = cva(['font-syne', 'text-left', 'leading-7.5', 'font-medium'], {
+	variants: {
+		variant: {
+			body1: ['text-3.5xl', 'leading-9', 'font-semibold'],
+			body2: ['text-2xl'],
+			body3: ['text-lg'],
+		},
+	},
+	defaultVariants: ['text-2xl'],
+});
+
+export default function Paragraph({ variant = 'body2', className, children, ...props }) {
+	return (
+		<p className={cn(paragraphVariants({ variant, className }))} {...props}>
+			{children}
+		</p>
+	);
+}

src/components/shared/typography/Text.jsx

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+
+const textVariants = cva(['font-syne', 'text-left', 'font-medium'], {
+	variants: {
+		variant: {
+			button: ['font-semibold', 'text-xl', 'leading-6'],
+			nav: ['text-lg', 'leading-6'],
+			navButton: ['text-xl', 'leading-6', 'font-bold'],
+			footer: ['text-xl', 'leading-5', 'font-prompt'],
+		},
+	},
+});
+
+export default function Text({ variant, className, children, ...props }) {
+	return (
+		<p className={cn(textVariants({ variant, className }))} {...props}>
+			{children}
+		</p>
+	);
+}

src/components/shared/typography/index.jsx

@@ -0,0 +1,21 @@
+import { cn } from '../../../lib/utils';
+
+export { default as Heading } from './Heading';
+export { default as Paragraph } from './Paragraph';
+export { default as Text } from './Text';
+
+export const HeroText = ({ children, className, ...props }) => {
+	return (
+		<h1 className={cn('text-12.5xl leading-16 font-semibold font-agoka text-left', className)} {...props}>
+			{children}
+		</h1>
+	);
+};
+
+export const PersonalizedText = ({ children, className, ...props }) => {
+	return (
+		<p className={cn('text-base leading-4 font-semibol font-cassandra text-left', className)} {...props}>
+			{children}
+		</p>
+	);
+};

src/pages/playground.jsx

@@ -1,7 +1,31 @@
+import { Heading, HeroText, Paragraph, PersonalizedText, Text } from '../components/shared';
+
 export default function Playground() {
 	return (
 		<div className='container py-6'>
-			<h1 className='text-3xl font-bold'>Playground</h1>
+			<HeroText>Hero Text</HeroText>
+			<PersonalizedText>Personalized Text</PersonalizedText>
+			<Heading variant='h1'>Heading 1</Heading>
+			<Heading variant='h2'>Heading 2</Heading>
+			<Heading variant='h3'>Heading 3</Heading>
+			<Paragraph variant='body1'>Paragraph body1</Paragraph>
+			<Paragraph variant='body2'>Paragraph body2</Paragraph>
+			<Paragraph variant='body3'>Paragraph body3</Paragraph>
+			<Text variant='button'>Text button</Text>
+			<Text variant='nav'>Text nav</Text>
+			<Text variant='navButton'>Text navButton</Text>
+			<Text variant='footer'>Text footer</Text>
+
+			<Heading variant='h1' className='mt-6'>
+				Colors
+			</Heading>
+			<ul>
+				<li className='text-primary'>Primary</li>
+				<li className='text-primary-foreground'>Primary Foreground</li>
+				<li className='text-primary-yellow'>Primary Yellow</li>
+				<li className='text-black'>Black</li>
+				<li className='text-black-foreground'>Black Foreground</li>
+			</ul>
 		</div>
 	);
 }

src/styles/index.css

@@ -1,21 +1,35 @@
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+	font-family: 'Agoka';
+	src: url('/fonts/agoka.otf') format('opentype');
+}
+
+@font-face {
+	font-family: 'Cassandra';
+	src: url('/fonts/cassandra.ttf') format('truetype');
+}
+
 @layer base {
 	:root {
-		--background: 0 0% 100%;
-		--foreground: 0 0% 3.9%;
+		/* Design system */
+		--background: #f9f5f2;
+		--primary: #ff4409;
+		--primary-foreground: #ff4409;
+		--primary-yellow: #f2da05;
+		--black: #000000;
+		--black-foreground: #252525;
 
 		--card: 0 0% 100%;
 		--card-foreground: 0 0% 3.9%;
 
 		--popover: 0 0% 100%;
 		--popover-foreground: 0 0% 3.9%;
 
-		--primary: 0 0% 9%;
-		--primary-foreground: 0 0% 98%;
-
 		--secondary: 0 0% 96.1%;
 		--secondary-foreground: 0 0% 9%;
 
@@ -71,7 +85,7 @@
 		@apply border-border;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background;
 	}
 }
 

tailwind.config.js

@@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+
+import defaultTheme from 'tailwindcss/defaultTheme';
+
 export default {
 	darkMode: ['class'],
 	content: ['./src/pages/**/*.{js,jsx}', './src/components/**/*.{js,jsx}', './src/app/**/*.{js,jsx}'],
@@ -11,17 +14,73 @@ export default {
 				'2xl': '1400px',
 			},
 		},
+
+		fontSize: {
+			xm: ['10px', '12px'],
+			xs: '12px',
+			sm: '14px',
+			base: '16px',
+			lg: '18px',
+			xl: '20px',
+			'2xl': '24px',
+			'3xl': '30px',
+			'3.5xl': '32px',
+			'4xl': '36px',
+			'4.5xl': '40px',
+			'10xl': '48px',
+			'11xl': '64px',
+			'12xl': '72px',
+			'12.5xl': '75px',
+			'13xl': '80px',
+			'14xl': '96px',
+		},
+
+		lineHeight: {
+			3: '12px',
+			3.5: '14px',
+			4: '16px',
+			4.5: '18px',
+			5: '20px',
+			5.5: '22px',
+			6: '24px',
+			7: '28px',
+			7.5: '30px',
+			9: '36px',
+			9.5: '38.4',
+			10: '40px',
+			11: '48px',
+			12: '56px',
+			13: '64px',
+			14: '72px',
+			15: '96px',
+			16: '105px',
+		},
+		fontFamily: {
+			// use in tailwind as font-syne
+			syne: ['Syne', ...defaultTheme.fontFamily.sans],
+			prompt: ['Prompt', ...defaultTheme.fontFamily.sans],
+			agoka: ['Agoka', ...defaultTheme.fontFamily.sans],
+			cassandra: ['Cassandra', ...defaultTheme.fontFamily.sans],
+		},
 		extend: {
 			colors: {
+				/** Design System Starts */
+				primary: {
+					DEFAULT: 'var(--primary)',
+					foreground: 'var(--primary-foreground)',
+					yellow: 'var(--primary-yellow)',
+				},
+				background: 'var(--background)',
+				black: {
+					DEFAULT: 'var(--black)',
+					foreground: 'var(--black-foreground)',
+				},
+
+				/** Design System Ends */
+
 				border: 'hsl(var(--border))',
 				input: 'hsl(var(--input))',
 				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))',
-				},
 				secondary: {
 					DEFAULT: 'hsl(var(--secondary))',
 					foreground: 'hsl(var(--secondary-foreground))',

vercel.json

@@ -0,0 +1,8 @@
+{
+	"rewrites": [
+		{
+			"source": "/(.*)",
+			"destination": "/index.html"
+		}
+	]
+}