-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path_tokens.scss
More file actions
110 lines (99 loc) · 3.79 KB
/
Copy path_tokens.scss
File metadata and controls
110 lines (99 loc) · 3.79 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
98
99
100
101
102
103
104
105
106
107
108
109
110
// -----------------------------------------------------------------------------
// Design tokens. Everything visual is expressed as a custom property here, so a
// theme change means editing this file and nothing else.
//
// Both modes are first-class: every token is defined for light on :root and
// redefined for dark under [data-theme='dark']. Visual hierarchy must hold in
// both — if a token change looks right in one mode, check the other before
// keeping it.
//
// --fd-accent-light / --fd-accent-dark are written to :root at runtime by
// ThemeService, from feastdocs.config.mjs.
// -----------------------------------------------------------------------------
:root {
// Layout
--fd-navbar-height: 58px;
--fd-navbar-offset: var(--fd-navbar-height);
--fd-sidebar-width: 284px;
--fd-toc-width: 240px;
--fd-content-max: 1080px;
// Shape — one radius scale for the whole app.
--fd-radius-sm: 6px;
--fd-radius: 10px;
--fd-radius-lg: 14px;
// Type
--fd-font-sans:
system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--fd-font-mono:
ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'SFMono-Regular', 'JetBrains Mono', Consolas,
monospace;
// ---------------------------------------------------------------------------
// Light mode. Neutral zinc ramp — never pure white, never pure black.
// ---------------------------------------------------------------------------
--fd-bg: #fdfdfc;
--fd-surface: #fdfdfc;
--fd-surface-sunken: #f4f4f3;
--fd-surface-hover: #ebebe9;
--fd-surface-translucent: rgb(253 253 252 / 86%);
--fd-border: #e5e5e2;
--fd-border-strong: #cfcfcb;
--fd-text: #3f4349;
--fd-text-strong: #17191d;
--fd-text-muted: #5b6069;
--fd-text-subtle: #8a8f98;
--fd-code-bg: #f6f6f5;
--fd-mark-bg: #fdefb8;
--fd-mark-text: #4a3b00;
--fd-shadow-lg: 0 18px 48px rgb(23 25 29 / 14%);
--fd-accent: var(--fd-accent-light, #e26f1e);
// Fallback first, so a browser without color-mix still gets a usable value.
--fd-accent-strong: var(--fd-accent);
--fd-accent-strong: color-mix(in oklab, var(--fd-accent) 74%, #000);
--fd-accent-soft: rgb(226 111 30 / 11%);
--fd-accent-soft: color-mix(in oklab, var(--fd-accent) 12%, transparent);
// Admonition tones, light.
--fd-tone-note: #5b6b7f;
--fd-tone-info: #2f6fdb;
--fd-tone-tip: #12855c;
--fd-tone-success: #12855c;
--fd-tone-warning: #b46e00;
--fd-tone-caution: #b46e00;
--fd-tone-danger: #cc3f35;
color-scheme: light;
}
:root[data-theme='dark'] {
// ---------------------------------------------------------------------------
// Dark mode. Off-black base, slightly warm; text steps mirror the light ramp
// so hierarchy reads identically in both modes.
// ---------------------------------------------------------------------------
--fd-bg: #121417;
--fd-surface: #17191d;
--fd-surface-sunken: #1d2025;
--fd-surface-hover: #262a31;
--fd-surface-translucent: rgb(23 25 29 / 86%);
--fd-border: #282c33;
--fd-border-strong: #3b414b;
--fd-text: #c4c9d1;
--fd-text-strong: #f4f6f8;
--fd-text-muted: #9aa1ac;
--fd-text-subtle: #6f7681;
--fd-code-bg: #14161a;
--fd-mark-bg: #4d3f00;
--fd-mark-text: #ffe999;
--fd-shadow-lg: 0 18px 48px rgb(0 0 0 / 55%);
--fd-accent: var(--fd-accent-dark, #ff9d52);
--fd-accent-strong: var(--fd-accent);
--fd-accent-strong: color-mix(in oklab, var(--fd-accent) 86%, #fff);
--fd-accent-soft: rgb(255 157 82 / 15%);
--fd-accent-soft: color-mix(in oklab, var(--fd-accent) 17%, transparent);
// Tones brightened to hold WCAG contrast on the dark base.
--fd-tone-note: #93a5ba;
--fd-tone-info: #6ba1f4;
--fd-tone-tip: #3cc490;
--fd-tone-success: #3cc490;
--fd-tone-warning: #e5a43b;
--fd-tone-caution: #e5a43b;
--fd-tone-danger: #f07a71;
color-scheme: dark;
}