1  // Used in layout
 2  $padding-1: 1px !default;
 3  $padding-4: 0.25rem !default;
 4  $padding-8: 0.5rem !default;
 5  $padding-16: 1rem !default;
 6  
 7  $font-size-base: 16px !default;
 8  $font-size-12: 0.75rem !default;
 9  $font-size-14: 0.875rem !default;
10  $font-size-16: 1rem !default;
11  
12  $border-radius: $padding-4 !default;
13  
14  $body-font-weight: normal !default;
15  
16  $body-min-width: 20rem !default;
17  $container-max-width: 80rem !default;
18  
19  $menu-width: 16rem !default;
20  $toc-width: 16rem !default;
21  
22  $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
23  
24  $hint-colors: (
25    info: #6bf,
26    warning: #fd6,
27    danger: #f66,
28  ) !default;
29  
30  // Themes
31  @mixin theme-light {
32    --gray-100: #f8f9fa;
33    --gray-200: #e9ecef;
34    --gray-500: #adb5bd;
35  
36    --color-link: #0055bb;
37    --color-visited-link: #8440f1;
38  
39    --body-background: white;
40    --body-font-color: black;
41  
42    --icon-filter: none;
43  
44    --hint-color-info: #6bf;
45    --hint-color-warning: #fd6;
46    --hint-color-danger: #f66;
47  }
48  
49  @mixin theme-dark {
50    --gray-100: #494e54;
51    --gray-200: #5c6165;
52    --gray-500: #999d9f;
53  
54    --color-link: #84b2ff;
55    --color-visited-link: #b88dff;
56  
57    --body-background: #343a40;
58    --body-font-color: #e9ecef;
59  
60    --icon-filter: brightness(0) invert(1);
61  
62    --hint-color-info: #6bf;
63    --hint-color-warning: #fd6;
64    --hint-color-danger: #f66;
65  }