Repository navigation
Expand file tree
/
Copy path_tokens.css
More file actions
87 lines (77 loc) · 3.19 KB
/
Copy path_tokens.css
File metadata and controls
87 lines (77 loc) · 3.19 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
/* Design tokens — the entire theming API.
* Override any of these in your own (unlayered) CSS to retheme Marx.
* Colors declare a static light value first, then a `light-dark()` value;
* browsers without `light-dark()` keep the light fallback. */
:where(:root) {
/* Automatic dark mode. Force one scheme in your own CSS with
* `:root { color-scheme: light }` (or `dark`). */
color-scheme: light dark;
/* Rhythm */
--marx-leading: 1.5;
--marx-flow: 1.25rem;
--marx-measure: 42rem;
/* Shape */
--marx-radius: 0.5rem;
/* Spacing */
--marx-space-2xs: 0.25rem;
--marx-space-xs: 0.5rem;
--marx-space-sm: 0.75rem;
--marx-space-md: 1rem;
--marx-space-lg: 1.25rem;
--marx-space-xl: 2.5rem;
/* Type scale */
--marx-text-sm: 0.875rem;
--marx-text-base: 1rem;
--marx-text-h1: 2.5rem;
--marx-text-h2: 2rem;
--marx-text-h3: 1.6rem;
--marx-text-h4: 1.35rem;
--marx-text-h5: 1.15rem;
--marx-text-h6: 1rem;
/* Font stacks (platform fonts, per Tailwind Preflight 4.3.3 — explicit
* names so CJK text respects the page's `lang` on Windows) */
--marx-font-sans:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--marx-font-serif: Georgia, Times, "Times New Roman", serif;
--marx-font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--marx-font-body: var(--marx-font-sans);
/* Surfaces & text */
--marx-bg: oklch(100% 0 0);
--marx-bg: light-dark(oklch(100% 0 0), oklch(18% 0.01 260));
--marx-text: oklch(0% 0 0 / 80%);
--marx-text: light-dark(oklch(0% 0 0 / 80%), oklch(100% 0 0 / 87%));
--marx-muted: oklch(0% 0 0 / 54%);
--marx-muted: light-dark(oklch(0% 0 0 / 54%), oklch(100% 0 0 / 60%));
--marx-disabled: oklch(0% 0 0 / 38%);
--marx-disabled: light-dark(oklch(0% 0 0 / 38%), oklch(100% 0 0 / 42%));
--marx-border: oklch(0% 0 0 / 12%);
--marx-border: light-dark(oklch(0% 0 0 / 12%), oklch(100% 0 0 / 16%));
--marx-surface: oklch(97.5% 0.002 280);
--marx-surface: light-dark(oklch(97.5% 0.002 280), oklch(24% 0.01 260));
/* Brand (buttons keep a fixed blue with white text in both schemes) */
--marx-primary: oklch(54.6% 0.245 262.9);
--marx-primary-strong: oklch(48.8% 0.243 264.4);
--marx-on-primary: oklch(100% 0 0);
/* Links & focus */
--marx-link: oklch(54.6% 0.245 262.9);
--marx-link: light-dark(oklch(54.6% 0.245 262.9), oklch(70.7% 0.165 254.6));
--marx-link-hover: oklch(48.8% 0.243 264.4);
--marx-link-hover: light-dark(
oklch(48.8% 0.243 264.4),
oklch(80.9% 0.105 251.8)
);
--marx-ring: oklch(54.6% 0.245 262.9);
--marx-ring: light-dark(oklch(54.6% 0.245 262.9), oklch(70.7% 0.165 254.6));
/* Feedback */
--marx-danger: oklch(57.7% 0.245 27.3);
--marx-danger: light-dark(oklch(57.7% 0.245 27.3), oklch(70.4% 0.191 22.2));
--marx-success: oklch(60% 0.16 150);
--marx-success: light-dark(oklch(60% 0.16 150), oklch(72% 0.16 152));
--marx-warning: oklch(70% 0.16 75);
--marx-warning: light-dark(oklch(70% 0.16 75), oklch(80% 0.14 80));
--marx-mark: color-mix(in oklab, oklch(86% 0.17 95) 40%, transparent);
}