mincho/examples/react-swc/src/index.css.ts at 90cde801cc0133649869bfed9c2e053aa600f6db · mincho-js/mincho · 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
import { globalCss } from "@mincho-js/css"

globalCss(":root", {
  fontFamily: "Inter , system-ui , Avenir , Helvetica , Arial , sans-serif",
  lineHeight: "1.5",
  fontWeight: "400",

  colorScheme: "light dark",
  color: "rgba(255,255,255,0.87)",
  backgroundColor: "#242424",

  fontSynthesis: "none",
  textRendering: "optimizeLegibility",
  WebkitFontSmoothing: "antialiased",
  MozOsxFontSmoothing: "grayscale",

  "@media (prefers-color-scheme: light)": {
    color: "#213547",
    backgroundColor: "#ffffff",
  },
});

globalCss("a", {
  fontWeight: "500",
  color: "#646cff",
  textDecoration: "inherit",
});
globalCss("a:hover", {
  color: "#535bf2",
  "@media (prefers-color-scheme: light)": {
    color: "#747bff",
  },
});

globalCss("body", {
  margin: "0",
  display: "flex",
  placeItems: "center",
  minWidth: "320px",
  minHeight: "100vh",
});

globalCss("h1", {
  fontSize: "3.2em",
  lineHeight: "1.1",
});

globalCss("button", {
  borderRadius: "8px",
  border: "1px solid transparent",
  padding: "0.6em 1.2em",
  fontSize: "1em",
  fontWeight: "500",
  fontFamily: "inherit",
  backgroundColor: "#1a1a1a",
  cursor: "pointer",
  transition: "border-color 0.25s",
  "@media (prefers-color-scheme: light)": {
    backgroundColor: "#f9f9f9",
  },
});

globalCss("button:hover", {
  borderColor: "#646cff",
});

globalCss("button:focus, button:focus-visible", {
  outline: "4px auto -webkit-focus-ring-color",
});