~james/core

core/ogre/src/components/shared/constants.ts -rw-r--r-- 2.1 KiB
452f17b7 — james chore(import): snapshot james.dad.town/core at f70c71c7696a 16 hours ago 
                                                                                
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

export const CARD = { width: 1200, height: 630, padding: 48 } as const;

export const FOOTER_HEIGHT = 148;

export const CHIP = { height: 64, radius: 20, border: 2, inset: 8 } as const;

export const COLORS = {
  background: "#fbfafa",
  surface: "#edecea",
  text: "#414349",
  textSecondary: "#676f7a",
  textLabel: "#555b64",
  textMuted: "#8a8f96",
  icon: "#676f7a",
  rule: "rgba(96, 96, 96, 0.16)",
  avatarRing: "rgba(65, 67, 73, 0.1)",
  avatarRingShadow: "rgba(144, 144, 144, 0.4)",
  headingShadow: "rgba(65, 67, 73, 0.12)",
  status: {
    text: "#ffffff",
    open: { bg: "#16a34a" },
    closed: { bg: "#0a0a0a" },
    merged: { bg: "#5750f1" },
    success: { bg: "#16a34a" },
    failed: { bg: "#b82d2d" },
    running: { bg: "#5750f1" },
    pending: { bg: "#8a8f96" },
    timeout: { bg: "#0a0a0a" },
    cancelled: { bg: "#0a0a0a" },
  },
  chip: {
    background: "#ffffff",
    stroke:
      "linear-gradient(to top left, rgba(64, 64, 64, 0.22), rgba(163, 163, 163, 0.22))",
    shadow: "0 2px 4px rgba(65, 67, 73, 0.04)",
    innerShadow: "inset 0 4px 2px rgba(245, 245, 245, 0.12)",
  },
  diff: {
    additions: { bg: "rgba(0, 140, 61, 0.12)", text: "#007a35" },
    deletions: { bg: "rgba(200, 49, 49, 0.12)", text: "#b82d2d" },
  },
} as const;

export const heading = (fontSize: number, lineHeight: number, fontWeight = 400) => ({
  fontFamily: "Timeless Grotesk",
  fontSize,
  fontWeight,
  lineHeight,
  letterSpacing: -0.04 * fontSize,
  textShadow: `0 ${Math.round(fontSize * 0.0227 * 10) / 10}px 0 ${COLORS.headingShadow}`,
});

const inter = (fontSize: number) => ({
  fontFamily: "Inter",
  fontSize,
  fontWeight: 500,
  letterSpacing: -0.01 * fontSize,
});

export const TYPOGRAPHY = {
  repoName: heading(144, 1, 500),
  title: heading(64, 1.1, 500),
  ownerHandle: heading(48, 1.1),
  metricValue: heading(56, 1),
  metricLabel: {
    fontFamily: "Timeless Grotesk",
    fontSize: 26,
    fontWeight: 400,
    lineHeight: 1.2,
    letterSpacing: -0.01 * 26,
    textTransform: "capitalize",
  },
  cardHeader: inter(36),
  status: inter(34),
  body: inter(32),
} as const;