WIP PWA for Grain
feat: add CSS design tokens
+48
+48
src/styles/variables.css
+48
src/styles/variables.css
···
1
+
:root {
2
+
/* Colors - Instagram-inspired dark palette */
3
+
--color-bg-primary: #000000;
4
+
--color-bg-secondary: #121212;
5
+
--color-bg-elevated: #262626;
6
+
--color-text-primary: #fafafa;
7
+
--color-text-secondary: #a8a8a8;
8
+
--color-border: #363636;
9
+
--color-accent: #0095f6;
10
+
--color-error: #ed4956;
11
+
--color-heart: #ff3040;
12
+
13
+
/* Typography */
14
+
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
15
+
--font-size-xs: 0.75rem;
16
+
--font-size-sm: 0.875rem;
17
+
--font-size-base: 1rem;
18
+
--font-weight-normal: 400;
19
+
--font-weight-semibold: 600;
20
+
21
+
/* Spacing */
22
+
--space-xs: 0.25rem;
23
+
--space-sm: 0.5rem;
24
+
--space-md: 1rem;
25
+
--space-lg: 1.5rem;
26
+
--space-xl: 2rem;
27
+
28
+
/* Layout */
29
+
--feed-max-width: 470px;
30
+
--border-radius: 8px;
31
+
--avatar-size-sm: 32px;
32
+
--avatar-size-md: 44px;
33
+
}
34
+
35
+
/* Global resets */
36
+
*, *::before, *::after {
37
+
box-sizing: border-box;
38
+
margin: 0;
39
+
padding: 0;
40
+
}
41
+
42
+
body {
43
+
font-family: var(--font-family);
44
+
background: var(--color-bg-primary);
45
+
color: var(--color-text-primary);
46
+
line-height: 1.5;
47
+
-webkit-font-smoothing: antialiased;
48
+
}