blob: 007c653409100b564ced38ff5f3326f4bf677f9b (
plain)
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
|
@import "tailwindcss";
@import "./tokens.css";
@theme {
/* Surfaces */
--color-ink-0: var(--ink-0);
--color-ink-1: var(--ink-1);
--color-ink-2: var(--ink-2);
--color-ink-3: var(--ink-3);
--color-ink-4: var(--ink-4);
/* Foreground */
--color-fg-1: var(--fg-1);
--color-fg-2: var(--fg-2);
--color-fg-3: var(--fg-3);
--color-fg-4: var(--fg-4);
/* Lines */
--color-line-1: var(--line-1);
--color-line-2: var(--line-2);
--color-line-3: var(--line-3);
/* Brand accents */
--color-brass: var(--brass);
--color-brass-bright: var(--brass-bright);
--color-brass-deep: var(--brass-deep);
--color-brass-ink: var(--brass-ink);
/* Secondary */
--color-oxford: var(--oxford);
--color-oxford-light: var(--oxford-light);
--color-burgundy: var(--burgundy);
--color-burgundy-light: var(--burgundy-light);
/* Semantic */
--color-positive: var(--positive);
--color-positive-bg: var(--positive-bg);
--color-negative: var(--negative);
--color-negative-bg: var(--negative-bg);
--color-warning: var(--warning);
--color-warning-bg: var(--warning-bg);
--color-info: var(--info);
--color-info-bg: var(--info-bg);
/* Fonts */
--font-display: var(--font-display);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
/* Radii */
--radius-r1: var(--r-1);
--radius-r2: var(--r-2);
--radius-r3: var(--r-3);
--radius-r4: var(--r-4);
--radius-full: var(--r-full);
/* Shadows */
--shadow-1: var(--shadow-1);
--shadow-2: var(--shadow-2);
--shadow-3: var(--shadow-3);
--shadow-brass: var(--shadow-brass);
}
@layer base {
html, body {
background: var(--ink-0);
color: var(--fg-2);
font-family: var(--font-sans);
font-size: var(--fs-16);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#root {
min-height: 100vh;
}
button,
input,
select {
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: none;
border-color: var(--brass);
box-shadow: var(--shadow-brass);
}
button:disabled,
input:disabled,
select:disabled {
cursor: not-allowed;
}
}
|
