refactor: website components (#8600)

packages/website/unocss.config.ts

@@ -1,10 +1,20 @@
-import presetWebFonts from '@unocss/preset-web-fonts';
-import { defineConfig, presetUno } from 'unocss';
+import { defineConfig, presetTypography, presetUno, presetWebFonts } from 'unocss';
 
 export default defineConfig({
 	theme: {
 		colors: {
-			blurple: '#5865F2',
+			blurple: {
+				50: '#e0e3ff',
+				100: '#cdd2ff',
+				200: '#9ea7ff',
+				300: '#7782fa',
+				DEFAULT: '#5865F2',
+				500: '#3d48c3',
+				600: '#293294',
+				700: '#1a2165',
+				800: '#0e1137',
+				900: '#020208',
+			},
 		},
 	},
 	presets: [
@@ -12,7 +22,43 @@ export default defineConfig({
 		presetWebFonts({
 			provider: 'google',
 			fonts: {
-				mono: ['JetBrains Mono', 'JetBrains Mono:400,600'],
+				mono: ['JetBrains Mono', 'JetBrains Mono:400,600,700'],
+			},
+		}),
+		presetTypography({
+			cssExtend: {
+				pre: {
+					padding: '1em',
+					'line-height': '1.5',
+					'border-radius': '4px',
+				},
+				code: {
+					'font-size': '1em',
+					'font-weight': 'unset',
+				},
+				':where(:not(pre) > code)::before': {
+					content: '""',
+				},
+				':where(:not(pre) > code)::after': {
+					content: '""',
+				},
+				a: {
+					color: '#5865F2',
+					'text-decoration': 'none',
+				},
+				'a > img': {
+					display: 'inline-block',
+				},
+				h2: {
+					'margin-top': '1.25em',
+				},
+				h3: {
+					'margin-top': '0.75em',
+				},
+				// eslint-disable-next-line id-length
+				p: {
+					margin: '.5em 0',
+				},
 			},
 		}),
 	],