forked from pydata/pydata-sphinx-theme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_color.scss
322 lines (310 loc) · 9.36 KB
/
_color.scss
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
/*******************************************************************************
* master color map. Only the colors that actually differ between light and dark
* themes are specified separately.
*
* To see the full list of colors see https://www.figma.com/file/rUrrHGhUBBIAAjQ82x6pz9/PyData-Design-system---proposal-for-implementation-(2)?node-id=1234%3A765&t=ifcFT1JtnrSshGfi-1
*/
/**
* Function to get items from nested maps
*/
// @param {Map} $map - Map
// @param {Arglist} $keys - Keys to fetch
// @return {*}
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
/* Assign base colors for the PyData theme */
$color-palette: (
// Primary color
"teal":
(
"50": #f4fbfc,
"100": #e9f6f8,
"200": #d0ecf1,
"300": #abdde6,
"400": #3fb1c5,
"500": #0a7d91,
"600": #085d6c,
"700": #064752,
"800": #042c33,
"900": #021b1f,
),
// Secondary color
"violet":
(
"50": #f4eefb,
"100": #e0c7ff,
"200": #d5b4fd,
"300": #b780ff,
"400": #9c5ffd,
"500": #8045e5,
"600": #6432bd,
"700": #4b258f,
"800": #341a61,
"900": #1e0e39,
),
// Neutrals
"gray":
(
"50": #f9f9fa,
"100": #f3f4f5,
"200": #e5e7ea,
"300": #d1d5da,
"400": #9ca4af,
"500": #677384,
"600": #48566b,
"700": #29313d,
"800": #222832,
"900": #14181e,
),
// Accent color
"pink":
(
"50": #fcf8fd,
"100": #fcf0fa,
"200": #f8dff5,
"300": #f3c7ee,
"400": #e47fd7,
"500": #c132af,
"600": #912583,
"700": #6e1c64,
"800": #46123f,
"900": #2b0b27,
),
"foundation": (
"white": #ffffff,
// gray-900
"black": #14181e,
)
);
:root {
// Add theme colours to the html root element
@each $group-color, $color in $color-palette {
@each $color-name, $definition in $color {
--pst-#{$group-color}-#{$color-name}: #{$definition};
}
}
}
// Static SCSS variables used thoroughout the theme
// Minimum contrast ratio used for the theme.
// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
// 4.5 - is for text that is 14pt or less
$min-contrast-ratio-4: 4.5;
// 3 is for text that is 18pt or bold, or for non-text elements
$min-contrast-ratio-3: 3;
// Customize the light and dark text colors for use in our color contrast function.
$foundation-black: #14181e;
$foundation-white: #ffffff;
// This is a custom - calculated color between gray 100 and 200 - to reduce
// the contrast ratio (avoid a jarring effect)
$base-light-text: #ced6dd;
// used in sphinx_design - gray 100
$foundation-light-gray: #f3f4f5;
// used in sphinx_design - gray 700
$foundation-muted-gray: #29313d;
// used in sphinx_design - gray 800
$foundation-dark-gray: #222832;
$pst-semantic-colors: (
"primary": (
"light": #{map-deep-get($color-palette, "teal", "500")},
"bg-light": #{map-deep-get($color-palette, "teal", "200")},
"dark": #{map-deep-get($color-palette, "teal", "400")},
"bg-dark": #{map-deep-get($color-palette, "teal", "800")},
),
"secondary": (
"light": #{map-deep-get($color-palette, "violet", "500")},
"bg-light": #{map-deep-get($color-palette, "violet", "100")},
"dark": #{map-deep-get($color-palette, "violet", "400")},
"bg-dark": #{map-deep-get($color-palette, "violet", "800")},
),
"accent": (
"light": #{map-deep-get($color-palette, "pink", "500")},
"bg-light": #{map-deep-get($color-palette, "pink", "200")},
"dark": #{map-deep-get($color-palette, "pink", "400")},
"bg-dark": #{map-deep-get($color-palette, "pink", "800")},
),
"info": (
"light": #276be9,
"bg-light": #dce7fc,
"dark": #79a3f2,
"bg-dark": #06245d,
),
"warning": (
"light": #f66a0a,
"bg-light": #f8e3d0,
"dark": #ff9245,
"bg-dark": #652a02,
),
"success": (
"light": #00843f,
"bg-light": #d6ece1,
"dark": #5fb488,
"bg-dark": #002f17,
),
// This is is based on the warning color
"attention":
(
"light": var(--pst-color-warning),
"bg-light": var(--pst-color-warning-bg),
"dark": var(--pst-color-warning),
"bg-dark": var(--pst-color-warning-bg),
),
"danger": (
"light": #d72d47,
"bg-light": #f9e1e4,
"dark": #e78894,
"bg-dark": #4e111b,
),
"text-base": (
"light": #{map-deep-get($color-palette, "gray", "800")},
"dark": $base-light-text,
),
"text-muted": (
"light": #{map-deep-get($color-palette, "gray", "600")},
"dark": #{map-deep-get($color-palette, "gray", "400")},
),
"heading-color": (
"light": #{$foundation-white},
"dark": #{$foundation-black},
),
"shadow": (
"light": rgba(0, 0, 0, 0.1),
"dark": rgba(0, 0, 0, 0.2),
),
"border": (
"light": #{map-deep-get($color-palette, "gray", "300")},
"dark": #{map-deep-get($color-palette, "gray", "600")},
),
"border-muted": (
"light": rgba(23, 23, 26, 0.2),
"dark": #{map-deep-get($color-palette, "gray", "700")},
),
"inline-code": (
"light": #{map-deep-get($color-palette, "pink", "600")},
"dark": #{map-deep-get($color-palette, "pink", "300")},
),
"inline-code-links": (
// need to make sure there is enough contrast against the code bg
"light": #{map-deep-get($color-palette, "teal", "600")},
// keep primary color for dark mode
"dark": #{map-deep-get($color-palette, "teal", "400")},
),
"target": (
"light": #f3cf95,
"dark": #675c04,
),
// DEPTH COLORS - you can see the elevation colours and shades
// in the Figma file https://www.figma.com/file/rUrrHGhUBBIAAjQ82x6pz9/PyData-Design-system---proposal-for-implementation-(2)?node-id=1492%3A922&t=sQeQZehkOzposYEg-1
// background: color of the canvas / the furthest back layer
"background":
(
"light": #{map-deep-get($color-palette, "foundation", "white")},
"dark": #{map-deep-get($color-palette, "foundation", "black")},
),
// on-background: provides slight contrast against background
// (by use of shadows in light theme)
"on-background":
(
"light": #{map-deep-get($color-palette, "foundation", "white")},
"dark": #{map-deep-get($color-palette, "gray", "800")},
),
"surface": (
"light": #{map-deep-get($color-palette, "gray", "100")},
"dark": #{map-deep-get($color-palette, "gray", "700")},
),
// on_surface: object on top of surface object (without shadows)
"on-surface":
(
"light": #{map-deep-get($color-palette, "gray", "800")},
"dark": $foundation-light-gray,
),
);
/*******************************************************************************
* write the color rules for each theme (light/dark)
*/
/* NOTE:
* Mixins enable us to reuse the same definitions for the different modes
* https://sass-lang.com/documentation/at-rules/mixin
* #{something} inserts a variable into a CSS selector or property name
* https://sass-lang.com/documentation/interpolation
*/
@mixin theme-colors($mode) {
// check if this color is defined differently for light/dark
@each $col-name, $definition in $pst-semantic-colors {
@if type-of($definition) == map {
@each $key, $val in $definition {
@if str-index($key, $mode) != null {
// since now we define the bg colours in the semantic colours and not
// by changing opacity, we need to check if the key contains bg and the
// correct mode (light/dark)
@if str-index($key, "bg") != null {
--pst-color-#{$col-name}-bg: #{$val};
} @else {
--pst-color-#{$col-name}: #{$val};
}
}
}
} @else {
--pst-color-#{$col-name}: #{$definition};
}
}
// assign the "duplicate" colors (ones that just reference other variables)
& {
--pst-color-link: var(--pst-color-primary);
--pst-color-link-hover: var(--pst-color-secondary);
}
// adapt to light/dark-specific content
@if $mode == "light" {
.only-dark,
.only-dark ~ figcaption {
display: none !important;
}
} @else {
.only-light,
.only-light ~ figcaption {
display: none !important;
}
/* Adjust images in dark mode (unless they have class .only-dark or
* .dark-light, in which case assume they're already optimized for dark
* mode).
*/
img:not(.only-dark):not(.dark-light) {
filter: brightness(0.8) contrast(1.2);
}
/* Give images a light background in dark mode in case they have
* transparency and black text (unless they have class .only-dark or .dark-light, in
* which case assume they're already optimized for dark mode).
*/
.bd-content img:not(.only-dark):not(.dark-light) {
background: rgb(255, 255, 255);
border-radius: 0.25rem;
}
// MathJax SVG outputs should be filled to same color as text.
.MathJax_SVG * {
fill: var(--pst-color-text-base);
}
}
}
/* Defaults to light mode if data-theme is not set */
html:not([data-theme]) {
@include theme-colors("light");
}
/* NOTE: @each {...} is like a for-loop
* https://sass-lang.com/documentation/at-rules/control/each
*/
@each $mode in (light, dark) {
html[data-theme="#{$mode}"] {
@include theme-colors($mode);
color-scheme: $mode;
}
}
// assign classes too, for runtime use of theme colors
@each $col-name, $definition in $pst-semantic-colors {
.pst-color-#{$col-name} {
color: var(--pst-color-#{$col-name});
}
}