aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles/base/_colors.scss
blob: eed7a9a2b8b29f917513b30f618572482824d86f (plain)
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
@use "../abstracts/variables" as var;

:root {
  --color-bg: #{var.$light-theme_white};
  --color-bg-opacity: #{var.$light-theme_white-o90};
  --color-bg-secondary: #{var.$light-theme_white-dark};
  --color-bg-tertiary: #{var.$light-theme_grey-bright};
  --color-bg-code: #{var.$light-theme_grey-brighter};
  --color-fg: #{var.$light-theme_black};
  --color-fg-light: #{var.$light-theme_grey-dark};
  --color-fg-inverted: #{var.$light-theme_white};
  --color-primary: #{var.$light-theme_blue};
  --color-primary-opacity: #{var.$light-theme_blue-o30};
  --color-primary-light: #{var.$light-theme_blue-bright};
  --color-primary-lighter: #{var.$light-theme_blue-brighter};
  --color-primary-dark: #{var.$light-theme_blue-dark};
  --color-primary-darker: #{var.$light-theme_blue-darker};
  --color-secondary: #{var.$light-theme_orange};
  --color-border: #{var.$light-theme_grey};
  --color-border-dark: #{var.$light-theme_grey-dark};
  --color-border-light: #{var.$light-theme_grey-bright};
  --color-shadow: #{var.$light-theme_grey-darker-o40};
  --color-shadow-dark: #{var.$light-theme_grey-darker-o70};
  --color-shadow-darker: #{var.$light-theme_grey-darker};
  --color-shadow-light: #{var.$light-theme_grey-darker-o20};
  --color-token-red: #{var.$light-theme_red};
  --color-token-green: #{var.$light-theme_green};
  --color-token-purple: #{var.$light-theme_purple};
  --color-token-magenta: #{var.$light-theme_magenta};
  --color-token-cyan: #{var.$light-theme_cyan};
  --color-token-blue: #{var.$light-theme_blue};
  --color-token-yellow: #{var.$light-theme_yellow};
  --color-token-orange: #{var.$light-theme_orange};
}

[data-theme="dark"] {
  --color-bg: #{var.$dark-theme_black};
  --color-bg-opacity: #{var.$dark-theme_black-o90};
  --color-bg-light: #{var.$dark-theme_grey};
  --color-bg-secondary: #{var.$dark-theme_black-bright};
  --color-bg-tertiary: #{var.$dark-theme_grey-darker};
  --color-bg-code: #{var.$dark-theme_black-brighter};
  --color-fg: #{var.$dark-theme_white};
  --color-fg-light: #{var.$dark-theme_grey};
  --color-fg-inverted: #{var.$dark-theme_black};
  --color-primary: #{var.$dark-theme_blue};
  --color-primary-opacity: #{var.$dark-theme_blue-o30};
  --color-primary-light: #{var.$dark-theme_blue-bright};
  --color-primary-lighter: #{var.$dark-theme_blue-brighter};
  --color-primary-dark: #{var.$dark-theme_blue-dark};
  --color-primary-darker: #{var.$dark-theme_blue-darker};
  --color-secondary: #{var.$dark-theme_orange};
  --color-border: #{var.$dark-theme_grey-dark};
  --color-border-dark: #{var.$dark-theme_grey};
  --color-border-light: #{var.$dark-theme_black-brighter};
  --color-shadow: #{var.$dark-theme_grey-dark-o40};
  --color-shadow-dark: #{var.$dark-theme_grey-dark-o70};
  --color-shadow-darker: #{var.$dark-theme_grey-dark};
  --color-shadow-light: #{var.$dark-theme_grey-dark-o20};
  --color-token-red: #{var.$dark-theme_red};
  --color-token-green: #{var.$dark-theme_green};
  --color-token-purple: #{var.$dark-theme_purple};
  --color-token-magenta: #{var.$dark-theme_magenta};
  --color-token-cyan: #{var.$dark-theme_cyan};
  --color-token-blue: #{var.$dark-theme_blue};
  --color-token-yellow: #{var.$dark-theme_yellow};
  --color-token-orange: #{var.$dark-theme_orange};
}

pre[data-prismjs-color-scheme-current="light"] {
  --color-bg: #{var.$light-theme_white};
  --color-bg-secondary: #{var.$light-theme_white-dark};
  --color-bg-tertiary: #{var.$light-theme_grey-bright};
  --color-fg: #{var.$light-theme_black};
  --color-fg-light: #{var.$light-theme_grey-dark};
  --color-primary: #{var.$light-theme_blue};
  --color-primary-darker: #{var.$light-theme_blue-darker};
  --color-border: #{var.$light-theme_grey};
  --color-border-dark: #{var.$light-theme_grey-dark};
  --color-token-red: #{var.$light-theme_red};
  --color-token-green: #{var.$light-theme_green};
  --color-token-purple: #{var.$light-theme_purple};
  --color-token-magenta: #{var.$light-theme_magenta};
  --color-token-cyan: #{var.$light-theme_cyan};
  --color-token-blue: #{var.$light-theme_blue};
  --color-token-yellow: #{var.$light-theme_yellow};
  --color-token-orange: #{var.$light-theme_orange};
}

pre[data-prismjs-color-scheme-current="dark"] {
  --color-bg: #{var.$dark-theme_black};
  --color-bg-secondary: #{var.$dark-theme_black-bright};
  --color-bg-tertiary: #{var.$dark-theme_grey-darker};
  --color-fg: #{var.$dark-theme_white};
  --color-fg-light: #{var.$dark-theme_grey};
  --color-primary: #{var.$dark-theme_blue};
  --color-primary-darker: #{var.$dark-theme_blue-darker};
  --color-border: #{var.$dark-theme_grey-dark};
  --color-border-dark: #{var.$dark-theme_grey};
  --color-token-red: #{var.$dark-theme_red};
  --color-token-green: #{var.$dark-theme_green};
  --color-token-purple: #{var.$dark-theme_purple};
  --color-token-magenta: #{var.$dark-theme_magenta};
  --color-token-cyan: #{var.$dark-theme_cyan};
  --color-token-blue: #{var.$dark-theme_blue};
  --color-token-yellow: #{var.$dark-theme_yellow};
  --color-token-orange: #{var.$dark-theme_orange};
}