diff options
Diffstat (limited to 'language-web/src/main/css')
-rw-r--r-- | language-web/src/main/css/index.scss | 105 | ||||
-rw-r--r-- | language-web/src/main/css/themeVariables.module.scss | 9 | ||||
-rw-r--r-- | language-web/src/main/css/themes.scss | 36 |
3 files changed, 124 insertions, 26 deletions
diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss index 3ed91824..21a9c05b 100644 --- a/language-web/src/main/css/index.scss +++ b/language-web/src/main/css/index.scss | |||
@@ -1,3 +1,4 @@ | |||
1 | @use 'sass:map'; | ||
1 | @use '@fontsource/roboto/scss/mixins' as Roboto; | 2 | @use '@fontsource/roboto/scss/mixins' as Roboto; |
2 | @use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono; | 3 | @use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono; |
3 | 4 | ||
@@ -5,14 +6,16 @@ | |||
5 | @import 'codemirror/addon/hint/show-hint'; | 6 | @import 'codemirror/addon/hint/show-hint'; |
6 | @import 'codemirror/theme/material-darker'; | 7 | @import 'codemirror/theme/material-darker'; |
7 | 8 | ||
8 | $robotoWeights: 300, 400, 500, 700; | 9 | @import './themes'; |
9 | @each $weight in $robotoWeights { | 10 | |
11 | $fontWeights: 300, 400, 500, 700; | ||
12 | @each $weight in $fontWeights { | ||
10 | @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight); | 13 | @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight); |
11 | @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight, $style: italic); | 14 | @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight, $style: italic); |
12 | } | 15 | } |
13 | 16 | ||
14 | $jetbrainsMonoWeights: 400, 700; | 17 | $monoFontWeights: 400, 700; |
15 | @each $weight in $jetbrainsMonoWeights { | 18 | @each $weight in $monoFontWeights { |
16 | @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight); | 19 | @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight); |
17 | @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight, $style: italic); | 20 | @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight, $style: italic); |
18 | } | 21 | } |
@@ -35,8 +38,78 @@ body { | |||
35 | text-rendering: optimizeLegibility; | 38 | text-rendering: optimizeLegibility; |
36 | } | 39 | } |
37 | 40 | ||
41 | @each $themeName, $theme in $themes { | ||
42 | .cm-s-problem-#{$themeName} { | ||
43 | &.CodeMirror { | ||
44 | background: map.get($theme, 'background'); | ||
45 | color: map.get($theme, 'foreground'); | ||
46 | } | ||
47 | |||
48 | .CodeMirror-gutters { | ||
49 | background: map.get($theme, 'background'); | ||
50 | border: none; | ||
51 | } | ||
52 | |||
53 | .CodeMirror-cursor { | ||
54 | border-left: 1px solid map.get($theme, 'cursor'); | ||
55 | } | ||
56 | |||
57 | div.CodeMirror-selected, | ||
58 | &.CodeMirror-focused div.CodeMirror-selected, | ||
59 | .CodeMirror-line::selection, | ||
60 | .CodeMirror-line > span::selection, | ||
61 | .CodeMirror-line > span > span::selection { | ||
62 | background: map.get($theme, 'selection'); | ||
63 | } | ||
64 | |||
65 | .CodeMirror-guttermarker, | ||
66 | .CodeMirror-guttermarker-subtle, | ||
67 | .CodeMirror-linenumber { | ||
68 | color: map.get($theme, 'lineNumber'); | ||
69 | } | ||
70 | |||
71 | .CodeMirror-activeline-background { | ||
72 | background: map.get($theme, 'currentLine'); | ||
73 | } | ||
74 | |||
75 | .CodeMirror-activeline-gutter { | ||
76 | background: map.get($theme, 'currentLine'); | ||
77 | |||
78 | .CodeMirror-guttermarker, | ||
79 | .CodeMirror-guttermarker-subtle, | ||
80 | .CodeMirror-linenumber { | ||
81 | color: map.get($theme, 'foreground'); | ||
82 | } | ||
83 | } | ||
84 | |||
85 | .cm-keyword { | ||
86 | color: map.get($theme, 'keyword'); | ||
87 | } | ||
88 | |||
89 | .cm-number { | ||
90 | color: map.get($theme, 'number'); | ||
91 | } | ||
92 | |||
93 | .cm-lparen, .cm-rparen { | ||
94 | color: map.get($theme, 'delimiter'); | ||
95 | } | ||
96 | |||
97 | .problem-predicate, .problem-class, .problem-reference, .problem-enum { | ||
98 | color: map.get($theme, 'predicate'); | ||
99 | } | ||
100 | |||
101 | .problem-unique-node { | ||
102 | color: map.get($theme, 'uniqueNode'); | ||
103 | } | ||
104 | |||
105 | .problem-variable { | ||
106 | color: map.get($theme, 'variable'); | ||
107 | } | ||
108 | } | ||
109 | } | ||
110 | |||
38 | .CodeMirror-hints { | 111 | .CodeMirror-hints { |
39 | background: #333333; | 112 | background: #333; |
40 | border: 0; | 113 | border: 0; |
41 | border-radius: 4px; | 114 | border-radius: 4px; |
42 | box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), | 115 | box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), |
@@ -107,38 +180,18 @@ li.CodeMirror-hint-active { | |||
107 | background: rgba(128, 203, 196, 0.2); | 180 | background: rgba(128, 203, 196, 0.2); |
108 | } | 181 | } |
109 | 182 | ||
183 | |||
110 | .xtext-marker_write { | 184 | .xtext-marker_write { |
111 | background: rgba(255, 229, 100, 0.2); | 185 | background: rgba(255, 229, 100, 0.2); |
112 | } | 186 | } |
113 | 187 | ||
114 | .problem-class, .problem-enum { | ||
115 | @extend .cm-type; | ||
116 | } | ||
117 | |||
118 | .problem-abstract { | 188 | .problem-abstract { |
119 | font-style: italic; | 189 | font-style: italic; |
120 | } | 190 | } |
121 | 191 | ||
122 | .problem-reference { | ||
123 | @extend .cm-def; | ||
124 | } | ||
125 | |||
126 | .problem-containment { | 192 | .problem-containment { |
127 | font-weight: 700; | 193 | font-weight: 700; |
128 | } | 194 | } |
129 | |||
130 | .cm-quoted-name, .problem-enum-node { | ||
131 | @extend .cm-atom; | ||
132 | } | ||
133 | |||
134 | .problem-new-node { | 195 | .problem-new-node { |
135 | font-style: italic; | 196 | font-style: italic; |
136 | } | 197 | } |
137 | |||
138 | .problem-variable { | ||
139 | @extend .cm-variable; | ||
140 | } | ||
141 | |||
142 | .problem-singleton-variable { | ||
143 | opacity: 0.6; | ||
144 | } | ||
diff --git a/language-web/src/main/css/themeVariables.module.scss b/language-web/src/main/css/themeVariables.module.scss new file mode 100644 index 00000000..85af4219 --- /dev/null +++ b/language-web/src/main/css/themeVariables.module.scss | |||
@@ -0,0 +1,9 @@ | |||
1 | @import './themes'; | ||
2 | |||
3 | :export { | ||
4 | @each $themeName, $theme in $themes { | ||
5 | @each $variable, $value in $theme { | ||
6 | #{$themeName}--#{$variable}: $value, | ||
7 | } | ||
8 | } | ||
9 | } | ||
diff --git a/language-web/src/main/css/themes.scss b/language-web/src/main/css/themes.scss new file mode 100644 index 00000000..0118290d --- /dev/null +++ b/language-web/src/main/css/themes.scss | |||
@@ -0,0 +1,36 @@ | |||
1 | $themes: ( | ||
2 | 'dark': ( | ||
3 | 'foreground': #abb2bf, | ||
4 | 'background': #282c34, | ||
5 | 'paper': #21252b, | ||
6 | 'primary': #56b6c2, | ||
7 | 'secondary': #ff5370, | ||
8 | 'keyword': #56b6c2, | ||
9 | 'predicate': #d6e9ff, | ||
10 | 'variable': #c8ae9d, | ||
11 | 'uniqueNode': #d6e9ff, | ||
12 | 'number': #6e88a6, | ||
13 | 'delimiter': #6f7682, | ||
14 | 'cursor': #56b6c2, | ||
15 | 'selection': #3e4452, | ||
16 | 'currentLine': #2c323c, | ||
17 | 'lineNumber': #5c6340, | ||
18 | ), | ||
19 | 'light': ( | ||
20 | 'foreground': #abb2bf, | ||
21 | 'background': #282c34, | ||
22 | 'paper': #21252b, | ||
23 | 'primary': #56b6c2, | ||
24 | 'secondary': #ff5370, | ||
25 | 'keyword': #56b6c2, | ||
26 | 'predicate': #d6e9ff, | ||
27 | 'variable': #c8ae9d, | ||
28 | 'uniqueNode': #d6e9ff, | ||
29 | 'number': #6e88a6, | ||
30 | 'delimiter': #6f7682, | ||
31 | 'cursor': #f3efe7, | ||
32 | 'selection': #3e4452, | ||
33 | 'currentLine': #2c323c, | ||
34 | 'lineNumber': #5c6340, | ||
35 | ), | ||
36 | ); | ||