-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvariables.css
More file actions
97 lines (92 loc) · 3.92 KB
/
Copy pathvariables.css
File metadata and controls
97 lines (92 loc) · 3.92 KB
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
:root {
color-scheme: light dark;
--g-font-family: system-ui, sans-serif;
--g-font-weight: 400;
--g-font-size: 1rem;
--g-line-height: 1.5;
--g-primary: light-dark(#171a18, #ff9a5f);
--g-primary-contrast: light-dark(#fff, #000);
--g-secondary: light-dark(#066, #1be4a4);
--g-secondary-contrast: light-dark(#fff, #000);
--g-success: light-dark(#176b3d, #47ce7f);
--g-success-contrast: light-dark(#fff, #1a1a1a);
--g-warning: light-dark(#d87400, #fea359);
--g-warning-contrast: #1a1a1a;
--g-danger: light-dark(#b32525, #ff9a9a);
--g-danger-contrast: light-dark(#fff, #1a1a1a);
--g-muted: light-dark(#5a635e, #b0b0b0);
--g-muted-contrast: light-dark(#fff, #1a1a1a);
--g-hover: var(--g-secondary);
--g-hover-contrast: var(--g-secondary-contrast);
--g-active: light-dark(#268055, #ffc499);
--g-active-contrast: light-dark(#fff, #1a1a1a);
--g-bg: light-dark(#fff, #171a18);
--g-bg-contrast: light-dark(#1a201c, #eee);
--g-border-color: light-dark(#b9d8cb, #3f8363);
--g-stripe: light-dark(#0441, #0ee1);
--g-fg: light-dark(#d0efe0, #30443d);
--g-fg-contrast: light-dark(#000, #eee);
--g-h-color: light-dark(#16211b, #f7fafc);
--g-a-color: light-dark(#0b6478, #8faaf9);
--g-button-bg: var(--g-primary);
--g-button-color: var(--g-primary-contrast);
--g-button-border-color: var(--g-primary);
--g-input-bg: light-dark(#fafffc, #40584d);
--g-input-color: light-dark(#050505, #fff);
--g-input-border-color: light-dark(#bdcbc3, #93b79f);
--g-border-radius: 12px;
--g-border-width: 1px;
--g-arrow-width: .6em;
--g-arrow-height: .36em;
--g-arrow-image-light: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%206%22%20fill%3D%22none%22%20stroke%3D%22%23050505%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%201%205%205%209%201%22%2F%3E%3C%2Fsvg%3E');
--g-arrow-image-dark: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%206%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%201%205%205%209%201%22%2F%3E%3C%2Fsvg%3E');
--g-arrow-image: var(--g-arrow-image-light);
--g-padding-t: 8px;
--g-padding-r: 8px;
--g-padding-b: 8px;
--g-padding-l: 8px;
--g-padding-ratio2: 1.5;
--g-padding-ratio3: 2.5;
--g-padding: var(--g-padding-t) var(--g-padding-r) var(--g-padding-b) var(--g-padding-l);
--g-padding-input: var(--g-padding-t) calc(var(--g-padding-r) * var(--g-padding-ratio2)) var(--g-padding-b) calc(var(--g-padding-l) * var(--g-padding-ratio2));
--g-margin-t: 12px;
--g-margin-r: 12px;
--g-margin-b: 12px;
--g-margin-l: 12px;
--g-margin-ratio2: 2.5;
--g-margin-ratio3: 4.25;
--g-grid-min-width: 250px;
--g-portrait-width: 800px;
--g-gap1: 1px;
--g-gap2: 8px;
--g-gap3: 12px;
--g-shadow-tint: color-mix(in oklab, var(--g-secondary) 45%, transparent);
--g-shadow-ambient: light-dark(#171a1826, #0009);
--g-shadow-highlight: light-dark(#fffffff2, #ffffff45);
--g-shadow:
0 1px 2px var(--g-shadow-ambient),
0 12px 28px -14px var(--g-shadow-ambient),
0 0 14px -4px var(--g-shadow-tint),
inset 0 0 0 var(--g-border-width) color-mix(in oklab, var(--g-shadow-highlight) 40%, transparent),
inset 0 1px 1px var(--g-shadow-highlight),
inset 0 -10px 18px -14px var(--g-shadow-tint);
--g-drawer-width: 300px;
--g-transition-duration: .3s;
--g-outline: 2px solid var(--g-active);
--g-nav-z: 100;
--g-dropdown-gap: .5em;
--g-dropdown-z: 1000;
--g-modal-z: 10000;
}
:root[data-theme="light"] {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--g-arrow-image: var(--g-arrow-image-dark);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--g-arrow-image: var(--g-arrow-image-dark);
}