cssforge/example/basic/cssforge.config.ts at main · Hebilicious/cssforge · 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
102
103
104
105
106
107
108
import { defineConfig } from "../../packages/cssforge/src/mod.ts";

export default defineConfig(
  {
    spacing: {
      fluid: {
        base: {
          value: {
            minSize: 4,
            maxSize: 24,
            minWidth: 320,
            maxWidth: 1280,
            positiveSteps: [1.5, 2, 3, 4, 6],
            negativeSteps: [0.75, 0.5, 0.25],
          },
        },
      },
      custom: {
        size: {
          value: {
            1: "0.25rem",
            2: "0.5rem",
            3: "0.75rem",
            4: "1rem",
          },
        },
      },
    },
    typography: {
      fluid: {
        base: {
          value: {
            minWidth: 320,
            minFontSize: 14,
            minTypeScale: 1.25,
            maxWidth: 1435,
            maxFontSize: 16,
            maxTypeScale: 1.25,
            positiveSteps: 5,
            negativeSteps: 3,
          },
        },
      },
    },
    colors: {
      palette: {
        value: {
          coral: {
            value: {
              100: { hex: "#FF7F50" },
            },
          },
          mint: {
            value: {
              100: { hex: "#4ADE80" },
            },
          },
          indigo: {
            value: {
              100: { hex: "#4F46E5" },
            },
          },
          // dark-mode overrides wrapped in a atRule
          coral_dark: {
            value: {
              100: { hex: "#FF6347" },
            },
            settings: {
              atRule: "@media (prefers-color-scheme: dark)",
            },
          },
          mint_dark: {
            value: {
              100: { hex: "#22C55E" },
            },
            settings: {
              atRule: "@media (prefers-color-scheme: dark)",
            },
          },
          indigo_dark: {
            value: {
              100: { hex: "#4338CA" },
            },
            settings: {
              atRule: "@media (prefers-color-scheme: dark)",
            },
          },
        },
      },
      theme: {
        main: {
          value: {
            background: {
              value: {
                primary: "var(--coral)",
                secondary: "var(--mint)",
              },
              variables: {
                coral: "palette.coral.100",
                mint: "palette.mint.100",
              },
            },
          },
        },
      },
    },
  },
);