NotionKit/theme-override.css at main · JUNGHERZ/NotionKit · GitHub

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* ============================================================
   NOTIONKIT – THEME OVERRIDE TEMPLATE

   Load AFTER the library:
     <link rel="stylesheet" href="notionkit.css">
     <link rel="stylesheet" href="theme-override.css">

   Override only what differs. Everything else is inherited from
   the library's own token blocks.
   ============================================================ */


/* ============================================================
   BRAND COLOUR — one line is enough

   Focus rings, checked states, the selected model card, the
   primary button and the danger hover are all color-mix()ed from
   --nk-accent, so a green accent gets a green focus ring, a green
   check mark and a green tint on the selected card.

   Important: declare on :root. A custom property is replaced where
   it is declared — set on a subtree, the brand never reaches the
   tokens inherited from :root.
   ============================================================ */

/* Forest */
/*
:root {
  --nk-accent: #2f8f5b;
}
[data-theme="dark"] {
  --nk-accent: #5cbf87;
}
*/

/* Slate — cool, muted, for internal tools */
/*
:root {
  --nk-accent: #4b6b8a;
  --nk-decor-purple: #6b7d94;
  --nk-decor-blue:   #4b6b8a;
  --nk-decor-orange: #8a7a5b;
}
[data-theme="dark"] {
  --nk-accent: #7fa3c4;
}
*/

/* Sunset — warm accent, warm avatars */
/*
:root {
  --nk-accent: #d9730d;
  --nk-danger: #c93c3c;
  --nk-decor-purple: #c2552a;
  --nk-decor-blue:   #e0a53c;
}
[data-theme="dark"] {
  --nk-accent: #ffa344;
}
*/


/* ============================================================
   HIGH CONTRAST — every measured pair at ≥ 4.5:1 (WCAG AA)

   The default palette keeps Notion's own 2025 values. Body text,
   sidebar text, the danger colour and all nine tag pairs pass AA
   already; secondary text (4.27:1), tertiary text, white on the
   accent and the dark yellow tag sit below 4.5:1. Uncomment this
   block to lift them. Values were found by searching for the
   nearest colour that clears 4.5:1 against the surface each pair
   actually sits on (tools/contrast.mjs), plus a small margin.

   Light: text-secondary #7d7a75 → #767370, text-tertiary #91918e →
          #6f6f6c, accent #2383e2 → #1e72c6.
   Dark:  text-tertiary 0.32 → 0.48, on-accent white → near-black
          (5.8:1 on the unchanged accent), yellow tag text → white.
   ============================================================ */
/*
:root {
  --nk-text-secondary: #767370;
  --nk-text-tertiary:  #6f6f6c;
  --nk-accent:         #1e72c6;
}
[data-theme="dark"] {
  --nk-text-tertiary:   rgba(255,255,255,0.48);
  --nk-on-accent:       #191919;
  --nk-tag-yellow-text: #ffffff;
}
*/


/* ============================================================
   EXAMPLE: bend a single derived value

   Derivations are ordinary declarations and lose to a later one.
   Set only what really has to differ.
   ============================================================ */
/*
:root {
  --nk-radius: 4px;
  --nk-sidebar-width: 300px;
  --nk-shadow-menu: 0 0 0 1px rgba(15,15,15,0.08), 0 8px 24px rgba(15,15,15,0.16);
}
*/


/* ============================================================
   EXAMPLE: different typography
   ============================================================ */
/*
:root {
  --nk-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --nk-font-mono: "JetBrains Mono", ui-monospace, monospace;
}
.nk-page-title { font-size: 36px; letter-spacing: -0.02em; }
*/


/* ============================================================
   EXAMPLE: darker dark mode
   ============================================================ */
/*
[data-theme="dark"] {
  --nk-bg:         #0f0f0f;
  --nk-bg-sidebar: #161616;
  --nk-bg-callout: #1c1c1c;
  --nk-bg-code:    #161616;
  --nk-bg-card:    #161616;
}
*/


/* ============================================================
   YOUR THEME — uncomment and fill in
   ============================================================ */
/*
:root {

}
[data-theme="dark"] {

}
*/