Merge pull request #4 from Polyfrost/website/icon-fix

4 files changed, 30 insertions, 34 deletions

diff --git a/packages/ui/style/index.js b/packages/ui/style/index.ts
index 423b033..423b033 100644
--- a/packages/ui/style/index.js
+++ b/packages/ui/style/index.ts
diff --git a/packages/ui/style/postcss.config.js b/packages/ui/style/postcss.config.js
deleted file mode 100644
index 0b6eba2..0000000
--- a/packages/ui/style/postcss.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../postcss.config');
diff --git a/packages/ui/style/postcss.ts b/packages/ui/style/postcss.ts
new file mode 100644
index 0000000..60d0ac7
--- /dev/null
+++ b/packages/ui/style/postcss.ts
@@ -0,0 +1 @@
+export { default } from '../postcss.config';
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.ts
index fc05bd9..73c8fc7 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.ts
@@ -1,21 +1,20 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import type { Config } from 'tailwindcss';
 
-/** @type {(varName: string) => string} */
-const alpha = (varName) => `hsla(var(${varName}), <alpha-value>)`;
-const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
+import headlessui from '@headlessui/tailwindcss';
+import animate from 'tailwindcss-animate';
+import radix from 'tailwindcss-radix';
 
-/**
- * @param {string} app
- * @param {import('tailwindcss').Config} options
- * @returns {import('tailwindcss').Config}
- */
-module.exports = (app, options) => {
-	/** @type {import('tailwindcss').Config} */
-	let config = {
+export const alpha = (varName: string) => `hsla(var(${varName}), <alpha-value>)`;
+export const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
+
+export default async (app: string, options?: Config): Promise<Config> => {
+	const config: Config = {
 		content: [
 			`../../apps/${app}/src/**/*.${contentExts}`,
 			`../../packages/*/src/**/*.${contentExts}`,
-			`../../interface/**/*.${contentExts}`
+			`../../interface/**/*.${contentExts}`,
 		],
 		darkMode: 'class',
 		theme: {
@@ -25,7 +24,6 @@ module.exports = (app, options) => {
 				md: '868px',
 				lg: '1024px',
 				xl: '1280px',
-				...defaultTheme.screens
 			},
 			fontSize: {
 				'xs': '12px',
@@ -37,7 +35,7 @@ module.exports = (app, options) => {
 				'header-lg': '32px',
 				'body-sm': '15px',
 				'body': '16px',
-				'body-lg': '17px'
+				'body-lg': '17px',
 			},
 			borderRadius: {
 				none: '0',
@@ -45,31 +43,31 @@ module.exports = (app, options) => {
 				md: '5px',
 				lg: '8px',
 				xl: '12px',
-				full: '100vw'
+				full: '100vw',
 			},
 			extend: {
 				colors: {
 					blue: {
-						500: 'rgba(31, 101, 214, 1)'
+						500: 'rgba(31, 101, 214, 1)',
 					},
 					gray: {
 						50: 'rgba(240, 242, 244, 1)',
 						400: 'rgba(138, 150, 168, 1)',
 						700: 'rgba(65, 74, 88, 1)',
-						800: 'rgba(42, 47, 55, 1)'
+						800: 'rgba(42, 47, 55, 1)',
 					},
 					white: {
 						DEFAULT: 'rgba(255, 255, 255, 1)',
 						secondary: 'rgba(238, 241, 254, 1)',
-						hover: 'rgba(231, 235, 252, 1)'
+						hover: 'rgba(231, 235, 252, 1)',
 					},
 					black: {
-						DEFAULT: 'rgba(0, 0, 0, 1)'
+						DEFAULT: 'rgba(0, 0, 0, 1)',
 					},
 					text: {
 						DEFAULT: 'rgba(2, 3, 7, 1)',
-						primary: 'rgba(2, 3, 7, 1)'
-					}
+						primary: 'rgba(2, 3, 7, 1)',
+					},
 				},
 				extend: {
 					transitionTimingFunction: {
@@ -100,20 +98,18 @@ module.exports = (app, options) => {
 						'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)',
 						'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
 						'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-						'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'
-					}
-				}
-			}
+						'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',
+					},
+				},
+			},
 		},
-		plugins: [
-			require('@tailwindcss/forms'),
-			require('tailwindcss-animate'),
-			require('@headlessui/tailwindcss'),
-			require('tailwindcss-radix')()
-		]
+		plugins: [forms, animate, headlessui, radix],
+
+		...options,
 	};
 
-	if (app === 'website') config.plugins.push(require('@tailwindcss/typography'));
+	if (app === 'website')
+		config.plugins!.push(typography);
 
 	return config;
 };