fix: font importing

bun.lock

@@ -6,7 +6,7 @@
       "name": "ezpplauncher",
       "dependencies": {
         "@better-fetch/fetch": "^1.1.21",
-        "@fontsource/sora": "^5.2.8",
+        "@fontsource-variable/sora": "^5.2.8",
         "@fontsource/space-mono": "^5.2.9",
         "@number-flow/svelte": "^0.4.0",
         "@tailwindcss/typography": "^0.5.19",
@@ -104,7 +104,7 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
-    "@fontsource/sora": ["@fontsource/sora@5.2.8", "", {}, "sha512-1G6iTXUx8rcCKzi3mjaTQ1DE8PQz0OmW3Qnku+64S+bqRr1o/gGeiw8fxIQhhBU9ZP8ZofIqai7o00DNOPnlDw=="],
+    "@fontsource-variable/sora": ["@fontsource-variable/sora@5.2.8", "", {}, "sha512-sP+ILTfi5r3cqmMBntI4ooQNxFI+LyHyD5hcPbWwwL4uh4kKFAkOz0w2veCXjz18fKRdva6OG0dY+5yQ02f30w=="],
 
     "@fontsource/space-mono": ["@fontsource/space-mono@5.2.9", "", {}, "sha512-b61faFOHEISQ/pD25G+cfGY9o/WW6lRv6hBQQfpWvEJ4y1V+S4gmth95EVyBE2VL3qDYHeVQ8nBzrplzdXTDDg=="],
 

package.json

@@ -19,7 +19,7 @@
   "license": "GPL-3.0-only",
   "dependencies": {
     "@better-fetch/fetch": "^1.1.21",
-    "@fontsource/sora": "^5.2.8",
+    "@fontsource-variable/sora": "^5.2.8",
     "@fontsource/space-mono": "^5.2.9",
     "@number-flow/svelte": "^0.4.0",
     "@tailwindcss/typography": "^0.5.19",

src/app.css

@@ -4,6 +4,9 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@import "@fontsource-variable/sora";
+@import "@fontsource/space-mono";
+
 :root {
   --radius: 0.625rem;
   --background: oklch(95.36% 0.017 256.57);
@@ -41,7 +44,7 @@
   --sidebar-ring: oklch(60.7% 0.226 299.68);
 
   --font-sans:
-    "Sora", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Sora Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
   --font-mono:
     "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",

src/routes/+layout.svelte

@@ -35,9 +35,6 @@
   import Button from '@/components/ui/button/button.svelte';
   import * as presence from '@/presence';
   import { fade } from 'svelte/transition';
-
-  import '@fontsource/sora';
-  import '@fontsource/space-mono';
   import { getDownloadableThemes, getThemes, loadTheme } from '@/themes';
   import { sileo } from 'sileo';
   import AnimatedBg from '@/components/ui/animated-bg/AnimatedBg.svelte';

tailwind.config.ts

@@ -1,122 +0,0 @@
-import { fontFamily } from 'tailwindcss/defaultTheme';
-import type { Config } from 'tailwindcss';
-import tailwindcssAnimate from 'tailwindcss-animate';
-
-const config: Config = {
-  darkMode: 'class',
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  safelist: ['dark'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    extend: {
-      colors: {
-        theme: {
-          DEFAULT: '#181825',
-          50: '#E9E9F1',
-          100: '#DBDBE8',
-          200: '#BFBFD6',
-          300: '#A4A4C4',
-          400: '#8888B2',
-          500: '#6C6CA0',
-          600: '#575786',
-          700: '#45456B',
-          800: '#33334F',
-          900: '#212133',
-          950: '#181825',
-        },
-        border: 'hsl(var(--border) / <alpha-value>)',
-        input: 'hsl(var(--input) / <alpha-value>)',
-        ring: 'hsl(var(--ring) / <alpha-value>)',
-        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: 'hsl(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          50: '#FEFDFF',
-          100: '#FAF6FE',
-          200: '#F2E9FC',
-          300: '#E9DBFA',
-          400: '#E1CEF9',
-          500: '#D9C0F7',
-          600: '#C6A0F3',
-          700: '#B381EF',
-          800: '#A061EB',
-          900: '#8D41E7',
-          950: '#8331E5',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        xl: 'calc(var(--radius) + 4px)',
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      fontFamily: {
-        sans: ['"Sora"', ...fontFamily.sans],
-        mono: ['"Space Mono"', ...fontFamily.mono],
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--bits-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--bits-accordion-content-height)' },
-          to: { height: '0' },
-        },
-        'caret-blink': {
-          '0%,70%,100%': { opacity: '1' },
-          '20%,50%': { opacity: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'caret-blink': 'caret-blink 1.25s ease-out infinite',
-      },
-    },
-  },
-  plugins: [tailwindcssAnimate],
-};
-
-export default config;