create-socket-app/templates/react-ts/src/index.css at 3ccf2e4cd9bd5e985e12cb95ff36b1ba03a29681 · socketsupply/create-socket-app · 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
109
110
111
112
113
114
115
116
117
118
119
120
/* Minimal Reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Tonic theme */

body {
  --tonic-body: 'Inter', sans-serif;
  --tonic-header: 'Inter Black', sans-serif;
  --tonic-subheader: 'Inter Medium', sans-serif;
  --tonic-monospace: 'FiraMono', monospace;
}

@media (prefers-color-scheme: light) {
  body, *[theme="light"] {
    --tonic-background: rgba(245, 245, 245, 1);
    --tonic-background-dark: rgba(238, 238, 238, 1);
    --tonic-window: rgba(255, 255, 255, 1);
    --tonic-accent: rgba(56, 185, 255, 1);
    --tonic-primary: rgba(54, 57, 61, 1);
    --tonic-secondary: rgba(160, 160, 160, 1);
    --tonic-light: rgba(153, 157, 160, 1);
    --tonic-medium: rgba(153, 157, 160, 1);
    --tonic-shadow: rgba(150, 150, 150, 0.25);
    --tonic-dark: rgba(54, 57, 61, 1);
    --tonic-disabled: rgba(152, 161, 175, 1);
    --tonic-button-text: rgba(54, 57, 61, 1);
    --tonic-button-shadow: rgba(0, 0, 0, 33%);
    --tonic-button-background: rgba(245, 245, 245, 1);
    --tonic-button-background-hover: rgba(230, 230, 230, 1);
    --tonic-button-background-focus: rgba(237, 237, 237, 1);
    --tonic-input-text: rgba(54, 57, 61, 1);
    --tonic-input-text-hover: rgba(228, 228, 228, 1);
    --tonic-input-border: rgba(201, 201, 201, 1);
    --tonic-input-border-hover: rgba(54, 57, 61, 1);
    --tonic-input-background: rgba(248, 248, 248, 1);
    --tonic-input-background-focus: rgba(238, 238, 238, 1);
    --tonic-border: rgba(224, 224, 224, 1);
    --tonic-border-accent: rgba(206, 206, 206, 1);
    --tonic-error: rgba(240, 102, 83, 1);
    --tonic-notification: rgba(240, 102, 83, 1);
    --tonic-danger: rgba(240, 102, 83, 1);
    --tonic-success: rgba(133, 178, 116, 1);
    --tonic-warning: rgba(249, 169, 103, 1);
    --tonic-info: rgba(153, 157, 160, 1);
    --tonic-overlay: rgba(255, 255, 255, 0.75);
  }
}

@media (prefers-color-scheme: dark) {
  body, *[theme="dark"] {
    --tonic-background: rgba(0, 0, 0, 1);
    --tonic-background-dark: rgba(26, 26, 26, 1);
    --tonic-window: rgba(32, 32, 32, 1);
    --tonic-accent: rgba(56, 185, 255, 1);
    --tonic-primary: rgba(242, 242, 242, 1);
    --tonic-secondary: rgba(195, 195, 195, 1);
    --tonic-medium: rgba(153, 157, 160, 1);
    --tonic-dark: rgba(41, 41, 41, 1);
    --tonic-shadow: rgba(0, 0, 0, 0.3);
    --tonic-disabled: rgba(170, 170, 170, 1);
    --tonic-button-text: rgba(255, 255, 255, 1);
    --tonic-button-shadow: rgba(0, 0, 0, 1);
    --tonic-button-background: rgba(74, 74, 74, 1);
    --tonic-button-background-hover: rgba(94, 94, 94, 1);
    --tonic-button-background-focus: rgba(84, 84, 84, 1);
    --tonic-input-text: rgba(255, 255, 255, 1);
    --tonic-input-text-hover: rgba(255, 255, 255, 1);
    --tonic-input-background: rgba(12, 12, 12, 1);
    --tonic-input-background-focus: rgba(18, 18, 18, 1);
    --tonic-input-border: rgba(80, 80, 80, 1);
    --tonic-input-border-hover: rgba(105, 105, 105, 1);
    --tonic-border: rgba(72, 72, 72, 1);
    --tonic-border-accent: rgba(90, 90, 90, 1);
    --tonic-error: rgba(240, 102, 83, 1);
    --tonic-notification: rgba(240, 102, 83, 1);
    --tonic-caution: rgba(240, 102, 83, 1);
    --tonic-success: rgba(133, 178, 116, 1);
    --tonic-warn: rgba(249, 169, 103, 1);
    --tonic-overlay: rgba(0, 0, 0, 0.40);
  }
}

/* Placeholder Styles */
body {
  height: 100vh;
  font: -apple-system-body;
  background-color: var(--tonic-window);
  color: var(--tonic-primary);
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: -apple-system-title0;
  font-size: 2.5em;
}