new_portfolio/uno.config.ts at main · boomNDS/new_portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import presetIcons from "@unocss/preset-icons";
import presetTypography from "@unocss/preset-typography";
import presetUno from "@unocss/preset-uno";
import presetWebFonts from "@unocss/preset-web-fonts";
import { defineConfig } from "unocss";

const isTest = process.env.NODE_ENV === "test";
const disableWebFonts = process.env.CI === "true" || process.env.DISABLE_WEBFONTS === "true";

export default defineConfig({
  preflights: [],
  presets: [
    presetUno({}),
    presetIcons({
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
      },
    }),
    presetTypography(),
    ...(!isTest && !disableWebFonts
      ? [
          presetWebFonts({
            provider: "google",
            inlineImports: false,
            fonts: {
              athiti: {
                name: "Athiti",
                weights: ["200", "300", "400", "500", "600", "700"],
              },
            },
          }),
        ]
      : []),
  ],
  theme: {
    colors: {
      // Brand colors
      primary: "#7D26CD",
      accent: "#f5c243",

      // Semantic colors
      dark: "#111111",
      light: "#f4f4f4",
      card: "#ffffff",
      border: "#111111",
      text: "#1f2937",
      "text-muted": "#6b7280",
      background: "#f4f4f4",

      // Legacy colors (for backward compatibility)
      blue: "#1fb6ff",
      purple: "#7e5bef",
      pink: "#ff49db",
      orange: "#ff7849",
      green: "#13ce66",
      yellow: "#ffc82c",
      "gray-dark": "#273444",
      gray: "#8492a6",
      "gray-light": "#d3dce6",
      black: "#333333",
      white: "#f2f2f2",
    },
    breakpoints: {
      xs: "320px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
  },
  shortcuts: {
    // Layout shortcuts
    container: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
    "container-narrow": "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8",

    // Component shortcuts
    btn: "inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200 focus-visible:ring-2 focus-visible:ring-offset-2",
    "btn-primary": "btn bg-primary text-white shadow-md hover:shadow-lg hover:-translate-y-0.5",
    "btn-secondary":
      "btn bg-card border-2 border-border text-dark shadow-sm hover:shadow-md hover:-translate-y-0.5",

    card: "rounded-2xl border-2 sm:border-4 border-border bg-card shadow-soft transition-all duration-300",
    "card-hover": "card hover:shadow-mid hover:-translate-y-1",

    // Typography shortcuts
    title: "text-2xl sm:text-3xl lg:text-4xl font-bold text-dark",
    subtitle: "text-lg sm:text-xl text-text",
    "text-muted": "text-text-muted text-sm",
  },
  rules: [
    // Custom shadow utilities
    [
      /^shadow-(soft|mid|strong)$/,
      ([, name]) => ({
        "box-shadow": `var(--shadow-${name})`,
      }),
    ],
  ],
});