cssforge/example/vanilla-react-css/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
import { defineConfig } from "@hebilicious/cssforge";

export default defineConfig({
  colors: {
    palette: {
      value: {
        brand: {
          value: {
            primary: "#1d4ed8",
            accent: "#f97316",
            surface: "#0f172a",
          },
        },
        another: {
          value: {
            yellow: "#FFFF00",
            cyan: "#00FFFF",
          },
          settings: {
            // Declared on the root element so the theme aliases below, which are
            // computed on :root, can substitute these tokens.
            selector: ":root.Another",
          },
        },
      },
    },
    theme: {
      light: {
        value: {
          background: {
            value: {
              primary: "var(--1)",
            },
            variables: {
              1: "palette.brand.primary",
            },
            settings: {
              variantNameOnly: true,
            },
          },
        },
      },
      dark: {
        value: {
          background: {
            value: {
              primary: "var(--1)",
            },
            variables: {
              1: "palette.another.yellow",
            },
            settings: {
              variantNameOnly: true,
            },
          },
        },
        settings: {
          atRule: "@media (prefers-color-scheme: dark)",
        },
      },
    },
  },
  spacing: {
    custom: {
      size: {
        value: {
          1: "4px",
          2: "8px",
          3: "12px",
          4: "16px",
        },
      },
    },
  },
  typography: {
    fluid: {
      base: {
        value: {
          minWidth: 320,
          minFontSize: 16,
          minTypeScale: 1.2,
          maxWidth: 1280,
          maxFontSize: 18,
          maxTypeScale: 1.25,
          negativeSteps: 1,
          positiveSteps: 2,
          prefix: "text",
        },
      },
    },
  },
});