@rokkit/themes 1.0.0-next.56 → 1.0.0-next.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/themes",
3
- "version": "1.0.0-next.56",
3
+ "version": "1.0.0-next.57",
4
4
  "description": "Themes for use with rokkit components.",
5
5
  "author": "Jerry Thomas <me@jerrythomas.name>",
6
6
  "license": "MIT",
@@ -20,8 +20,8 @@
20
20
  "typescript": "^5.2.2",
21
21
  "vite": "^4.5.0",
22
22
  "vitest": "~0.34.6",
23
- "@rokkit/core": "1.0.0-next.56",
24
- "shared-config": "1.0.0-next.56"
23
+ "@rokkit/core": "1.0.0-next.57",
24
+ "shared-config": "1.0.0-next.57"
25
25
  },
26
26
  "files": [
27
27
  "src"
package/src/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { iconShortcuts, themeColors } from '@rokkit/core'
1
+ export { iconShortcuts, themeColors, themeRules } from '@rokkit/core'
2
2
  export * from './constants'
@@ -72,8 +72,8 @@
72
72
  --code-string: hsl(41, 37%, 45%); /*#183691 */
73
73
  --code-number: hsl(102, 27%, 50%); /* #0086b3;*/
74
74
  --code-atrule: var(--code-string);
75
- --code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
76
- --code-comment: #969896; /*hsl(210, 25%, 60%)*/
75
+ --code-keyword: hsl(204, 58%, 45%); /* */
76
+ --code-comment: #969896;
77
77
  --code-property: #63a35c;
78
78
  --code-selector: var(--code-keyword);
79
79
  --code-operator: hsl(19, 67%, 45%);
package/src/palette.css CHANGED
@@ -1,288 +1,27 @@
1
1
  @layer base {
2
2
  :root {
3
- --primary-hue: 25;
4
- --primary-saturation: 95%;
5
- --secondary-hue: 329;
6
- --secondary-saturation: 80%;
7
- --accent-hue: 329;
8
- --accent-saturation: 80%;
9
- --neutral-hue: 223;
10
- --neutral-saturation: 11.5%;
11
3
  --scroll-width: 0.5rem;
12
4
  }
13
5
  /* light theme colors */
14
6
  .light {
15
- --text-white: var(--neutral-hue), var(--neutral-saturation), 100%;
16
- --text-black: var(--neutral-hue), var(--neutral-saturation), 20%;
17
-
18
- --primary-50: var(--primary-hue), var(--primary-saturation), 95%;
19
- --primary-100: var(--primary-hue), var(--primary-saturation), 90%;
20
- --primary-200: var(--primary-hue), var(--primary-saturation), 85%;
21
- --primary-300: var(--primary-hue), var(--primary-saturation), 80%;
22
- --primary-400: var(--primary-hue), var(--primary-saturation), 70%;
23
- --primary-500: var(--primary-hue), var(--primary-saturation), 60%;
24
- --primary-600: var(--primary-hue), var(--primary-saturation), 50%;
25
- --primary-700: var(--primary-hue), var(--primary-saturation), 40%;
26
- --primary-800: var(--primary-hue), var(--primary-saturation), 30%;
27
- --primary-900: var(--primary-hue), var(--primary-saturation), 20%;
28
-
29
- --secondary-50: var(--secondary-hue), var(--secondary-saturation), 95%;
30
- --secondary-100: var(--secondary-hue), var(--secondary-saturation), 90%;
31
- --secondary-200: var(--secondary-hue), var(--secondary-saturation), 85%;
32
- --secondary-300: var(--secondary-hue), var(--secondary-saturation), 80%;
33
- --secondary-400: var(--secondary-hue), var(--secondary-saturation), 70%;
34
- --secondary-500: var(--secondary-hue), var(--secondary-saturation), 60%;
35
- --secondary-600: var(--secondary-hue), var(--secondary-saturation), 50%;
36
- --secondary-700: var(--secondary-hue), var(--secondary-saturation), 40%;
37
- --secondary-800: var(--secondary-hue), var(--secondary-saturation), 30%;
38
- --secondary-900: var(--secondary-hue), var(--secondary-saturation), 20%;
39
-
40
- --accent-50: var(--accent-hue), var(--accent-saturation), 95%;
41
- --accent-100: var(--accent-hue), var(--accent-saturation), 90%;
42
- --accent-200: var(--accent-hue), var(--accent-saturation), 85%;
43
- --accent-300: var(--accent-hue), var(--accent-saturation), 80%;
44
- --accent-400: var(--accent-hue), var(--accent-saturation), 70%;
45
- --accent-500: var(--accent-hue), var(--accent-saturation), 60%;
46
- --accent-600: var(--accent-hue), var(--accent-saturation), 50%;
47
- --accent-700: var(--accent-hue), var(--accent-saturation), 40%;
48
- --accent-800: var(--accent-hue), var(--accent-saturation), 30%;
49
- --accent-900: var(--accent-hue), var(--accent-saturation), 20%;
50
-
51
- --neutral-50: var(--neutral-hue), var(--neutral-saturation), 100%;
52
- --neutral-100: var(--neutral-hue), var(--neutral-saturation), 95%;
53
- --neutral-200: var(--neutral-hue), var(--neutral-saturation), 90%;
54
- --neutral-300: var(--neutral-hue), var(--neutral-saturation), 80%;
55
- --neutral-400: var(--neutral-hue), var(--neutral-saturation), 70%;
56
- --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
57
- --neutral-600: var(--neutral-hue), var(--neutral-saturation), 50%;
58
- --neutral-700: var(--neutral-hue), var(--neutral-saturation), 40%;
59
- --neutral-800: var(--neutral-hue), var(--neutral-saturation), 30%;
60
- --neutral-900: var(--neutral-hue), var(--neutral-saturation), 20%;
61
- --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 98%;
62
-
63
- /* light theme syntax colors */
64
- --tab-size: 2;
65
- --code-bg: #f3f4f6;
66
- --code-fill: #f3f4f6;
67
- --code-normal: #333333; /*hsl(45, 7%, 45%)*/
68
- --code-string: hsl(41, 37%, 45%); /*#183691 */
69
- --code-number: hsl(102, 27%, 50%); /* #0086b3;*/
70
- --code-atrule: var(--code-string);
71
- --code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
72
- --code-comment: #969896; /*hsl(210, 25%, 60%)*/
73
- --code-property: #63a35c;
74
- --code-selector: var(--code-keyword);
75
- --code-operator: hsl(19, 67%, 45%);
76
- --code-function: hsl(19, 67%, 45%); /* #a71d5d; */
77
-
78
- --code-gutter-marker: black;
79
- --code-gutter-subtle: #999;
80
- --code-cursor: #24292e;
81
- --code-cursor-block: rgba(20, 255, 20, 0.5);
82
- --code-linenumbers: rgba(27, 31, 35, 0.3);
7
+ @apply rokkit-mode-light;
8
+ }
9
+ @media (prefers-color-scheme: dark) {
10
+ body:not(.light) {
11
+ @apply rokkit-mode-dark;
12
+ }
83
13
  }
84
14
 
85
15
  /* dark theme colors */
86
16
  .dark {
87
- --text-white: var(--neutral-hue), var(--neutral-saturation), 20%;
88
- --text-black: var(--neutral-hue), var(--neutral-saturation), 100%;
89
-
90
- --primary-50: var(--primary-hue), var(--primary-saturation), 20%;
91
- --primary-100: var(--primary-hue), var(--primary-saturation), 30%;
92
- --primary-200: var(--primary-hue), var(--primary-saturation), 40%;
93
- --primary-300: var(--primary-hue), var(--primary-saturation), 50%;
94
- --primary-400: var(--primary-hue), var(--primary-saturation), 60%;
95
- --primary-500: var(--primary-hue), var(--primary-saturation), 70%;
96
- --primary-600: var(--primary-hue), var(--primary-saturation), 80%;
97
- --primary-700: var(--primary-hue), var(--primary-saturation), 85%;
98
- --primary-800: var(--primary-hue), var(--primary-saturation), 90%;
99
- --primary-300: var(--primary-hue), var(--primary-saturation), 95%;
100
-
101
- --secondary-50: var(--secondary-hue), var(--secondary-saturation), 20%;
102
- --secondary-100: var(--secondary-hue), var(--secondary-saturation), 30%;
103
- --secondary-200: var(--secondary-hue), var(--secondary-saturation), 40%;
104
- --secondary-300: var(--secondary-hue), var(--secondary-saturation), 50%;
105
- --secondary-400: var(--secondary-hue), var(--secondary-saturation), 60%;
106
- --secondary-500: var(--secondary-hue), var(--secondary-saturation), 70%;
107
- --secondary-600: var(--secondary-hue), var(--secondary-saturation), 80%;
108
- --secondary-700: var(--secondary-hue), var(--secondary-saturation), 85%;
109
- --secondary-800: var(--secondary-hue), var(--secondary-saturation), 90%;
110
- --secondary-900: var(--secondary-hue), var(--secondary-saturation), 95%;
111
-
112
- --accent-50: var(--accent-hue), var(--accent-saturation), 20%;
113
- --accent-100: var(--accent-hue), var(--accent-saturation), 30%;
114
- --accent-200: var(--accent-hue), var(--accent-saturation), 40%;
115
- --accent-300: var(--accent-hue), var(--accent-saturation), 50%;
116
- --accent-400: var(--accent-hue), var(--accent-saturation), 60%;
117
- --accent-500: var(--accent-hue), var(--accent-saturation), 70%;
118
- --accent-600: var(--accent-hue), var(--accent-saturation), 80%;
119
- --accent-700: var(--accent-hue), var(--accent-saturation), 85%;
120
- --accent-800: var(--accent-hue), var(--accent-saturation), 90%;
121
- --accent-900: var(--accent-hue), var(--accent-saturation), 95%;
122
-
123
- --neutral-50: var(--neutral-hue), var(--neutral-saturation), 20%;
124
- --neutral-100: var(--neutral-hue), var(--neutral-saturation), 25%;
125
- --neutral-200: var(--neutral-hue), var(--neutral-saturation), 30%;
126
- --neutral-300: var(--neutral-hue), var(--neutral-saturation), 40%;
127
- --neutral-400: var(--neutral-hue), var(--neutral-saturation), 50%;
128
- --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
129
- --neutral-600: var(--neutral-hue), var(--neutral-saturation), 70%;
130
- --neutral-700: var(--neutral-hue), var(--neutral-saturation), 80%;
131
- --neutral-800: var(--neutral-hue), var(--neutral-saturation), 90%;
132
- --neutral-900: var(--neutral-hue), var(--neutral-saturation), 100%;
133
- --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 22%;
134
-
135
- /* dark theme syntax colors */
136
- --code-bg: #282c34;
137
- --code-fill: #282c34;
138
- --code-normal: #e06c75; /*#ABB2BF;*/
139
- --code-string: #98c379;
140
- --code-number: #d19a66;
141
- --code-atrule: #61afef;
142
- --code-keyword: #c678dd;
143
- --code-comment: #5c6370;
144
- --code-property: #d19a66;
145
- --code-selector: #e06c75;
146
- --code-operator: #56b6c2;
147
- --code-function: #61afef;
17
+ @apply rokkit-mode-dark;
148
18
  }
149
19
 
150
20
  @media (prefers-color-scheme: light) {
151
21
  body:not(.dark) {
152
- --text-white: var(--neutral-hue), var(--neutral-saturation), 100%;
153
- --text-black: var(--neutral-hue), var(--neutral-saturation), 20%;
154
-
155
- --primary-50: var(--primary-hue), var(--primary-saturation), 95%;
156
- --primary-100: var(--primary-hue), var(--primary-saturation), 90%;
157
- --primary-200: var(--primary-hue), var(--primary-saturation), 85%;
158
- --primary-300: var(--primary-hue), var(--primary-saturation), 80%;
159
- --primary-400: var(--primary-hue), var(--primary-saturation), 70%;
160
- --primary-500: var(--primary-hue), var(--primary-saturation), 60%;
161
- --primary-600: var(--primary-hue), var(--primary-saturation), 50%;
162
- --primary-700: var(--primary-hue), var(--primary-saturation), 40%;
163
- --primary-800: var(--primary-hue), var(--primary-saturation), 30%;
164
- --primary-900: var(--primary-hue), var(--primary-saturation), 20%;
165
-
166
- --secondary-50: var(--secondary-hue), var(--secondary-saturation), 95%;
167
- --secondary-100: var(--secondary-hue), var(--secondary-saturation), 90%;
168
- --secondary-200: var(--secondary-hue), var(--secondary-saturation), 85%;
169
- --secondary-300: var(--secondary-hue), var(--secondary-saturation), 80%;
170
- --secondary-400: var(--secondary-hue), var(--secondary-saturation), 70%;
171
- --secondary-500: var(--secondary-hue), var(--secondary-saturation), 60%;
172
- --secondary-600: var(--secondary-hue), var(--secondary-saturation), 50%;
173
- --secondary-700: var(--secondary-hue), var(--secondary-saturation), 40%;
174
- --secondary-800: var(--secondary-hue), var(--secondary-saturation), 30%;
175
- --secondary-900: var(--secondary-hue), var(--secondary-saturation), 20%;
176
-
177
- --accent-50: var(--accent-hue), var(--accent-saturation), 95%;
178
- --accent-100: var(--accent-hue), var(--accent-saturation), 90%;
179
- --accent-200: var(--accent-hue), var(--accent-saturation), 85%;
180
- --accent-300: var(--accent-hue), var(--accent-saturation), 80%;
181
- --accent-400: var(--accent-hue), var(--accent-saturation), 70%;
182
- --accent-500: var(--accent-hue), var(--accent-saturation), 60%;
183
- --accent-600: var(--accent-hue), var(--accent-saturation), 50%;
184
- --accent-700: var(--accent-hue), var(--accent-saturation), 40%;
185
- --accent-800: var(--accent-hue), var(--accent-saturation), 30%;
186
- --accent-900: var(--accent-hue), var(--accent-saturation), 20%;
187
-
188
- --neutral-50: var(--neutral-hue), var(--neutral-saturation), 100%;
189
- --neutral-100: var(--neutral-hue), var(--neutral-saturation), 95%;
190
- --neutral-200: var(--neutral-hue), var(--neutral-saturation), 90%;
191
- --neutral-300: var(--neutral-hue), var(--neutral-saturation), 80%;
192
- --neutral-400: var(--neutral-hue), var(--neutral-saturation), 70%;
193
- --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
194
- --neutral-600: var(--neutral-hue), var(--neutral-saturation), 50%;
195
- --neutral-700: var(--neutral-hue), var(--neutral-saturation), 40%;
196
- --neutral-800: var(--neutral-hue), var(--neutral-saturation), 30%;
197
- --neutral-900: var(--neutral-hue), var(--neutral-saturation), 20%;
198
- --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 98%;
199
-
200
- /* light theme syntax colors */
201
- --tab-size: 2;
202
- --code-bg: #f3f4f6;
203
- --code-fill: #f3f4f6;
204
- --code-normal: #333333; /*hsl(45, 7%, 45%)*/
205
- --code-string: hsl(41, 37%, 45%); /*#183691 */
206
- --code-number: hsl(102, 27%, 50%); /* #0086b3;*/
207
- --code-atrule: var(--code-string);
208
- --code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
209
- --code-comment: #969896; /*hsl(210, 25%, 60%)*/
210
- --code-property: #63a35c;
211
- --code-selector: var(--code-keyword);
212
- --code-operator: hsl(19, 67%, 45%);
213
- --code-function: hsl(19, 67%, 45%); /* #a71d5d; */
214
-
215
- --code-gutter-marker: black;
216
- --code-gutter-subtle: #999;
217
- --code-cursor: #24292e;
218
- --code-cursor-block: rgba(20, 255, 20, 0.5);
219
- --code-linenumbers: rgba(27, 31, 35, 0.3);
22
+ @apply rokkit-mode-light;
220
23
  }
221
24
  }
222
25
 
223
- @media (prefers-color-scheme: dark) {
224
- body:not(.light) {
225
- --text-white: var(--neutral-hue), var(--neutral-saturation), 20%;
226
- --text-black: var(--neutral-hue), var(--neutral-saturation), 100%;
227
-
228
- --primary-50: var(--primary-hue), var(--primary-saturation), 20%;
229
- --primary-100: var(--primary-hue), var(--primary-saturation), 30%;
230
- --primary-200: var(--primary-hue), var(--primary-saturation), 40%;
231
- --primary-300: var(--primary-hue), var(--primary-saturation), 50%;
232
- --primary-400: var(--primary-hue), var(--primary-saturation), 60%;
233
- --primary-500: var(--primary-hue), var(--primary-saturation), 70%;
234
- --primary-600: var(--primary-hue), var(--primary-saturation), 80%;
235
- --primary-700: var(--primary-hue), var(--primary-saturation), 85%;
236
- --primary-800: var(--primary-hue), var(--primary-saturation), 90%;
237
- --primary-300: var(--primary-hue), var(--primary-saturation), 95%;
238
-
239
- --secondary-50: var(--secondary-hue), var(--secondary-saturation), 20%;
240
- --secondary-100: var(--secondary-hue), var(--secondary-saturation), 30%;
241
- --secondary-200: var(--secondary-hue), var(--secondary-saturation), 40%;
242
- --secondary-300: var(--secondary-hue), var(--secondary-saturation), 50%;
243
- --secondary-400: var(--secondary-hue), var(--secondary-saturation), 60%;
244
- --secondary-500: var(--secondary-hue), var(--secondary-saturation), 70%;
245
- --secondary-600: var(--secondary-hue), var(--secondary-saturation), 80%;
246
- --secondary-700: var(--secondary-hue), var(--secondary-saturation), 85%;
247
- --secondary-800: var(--secondary-hue), var(--secondary-saturation), 90%;
248
- --secondary-900: var(--secondary-hue), var(--secondary-saturation), 95%;
249
-
250
- --accent-50: var(--accent-hue), var(--accent-saturation), 20%;
251
- --accent-100: var(--accent-hue), var(--accent-saturation), 30%;
252
- --accent-200: var(--accent-hue), var(--accent-saturation), 40%;
253
- --accent-300: var(--accent-hue), var(--accent-saturation), 50%;
254
- --accent-400: var(--accent-hue), var(--accent-saturation), 60%;
255
- --accent-500: var(--accent-hue), var(--accent-saturation), 70%;
256
- --accent-600: var(--accent-hue), var(--accent-saturation), 80%;
257
- --accent-700: var(--accent-hue), var(--accent-saturation), 85%;
258
- --accent-800: var(--accent-hue), var(--accent-saturation), 90%;
259
- --accent-900: var(--accent-hue), var(--accent-saturation), 95%;
260
26
 
261
- --neutral-50: var(--neutral-hue), var(--neutral-saturation), 20%;
262
- --neutral-100: var(--neutral-hue), var(--neutral-saturation), 25%;
263
- --neutral-200: var(--neutral-hue), var(--neutral-saturation), 30%;
264
- --neutral-300: var(--neutral-hue), var(--neutral-saturation), 40%;
265
- --neutral-400: var(--neutral-hue), var(--neutral-saturation), 50%;
266
- --neutral-500: var(--neutral-hue), var(--neutral-saturation), 60%;
267
- --neutral-600: var(--neutral-hue), var(--neutral-saturation), 70%;
268
- --neutral-700: var(--neutral-hue), var(--neutral-saturation), 80%;
269
- --neutral-800: var(--neutral-hue), var(--neutral-saturation), 90%;
270
- --neutral-900: var(--neutral-hue), var(--neutral-saturation), 100%;
271
- --neutral-zebra: var(--neutral-hue), var(--neutral-saturation), 22%;
272
-
273
- /* one dark theme syntax colors */
274
- --code-bg: #282c34;
275
- --code-fill: #282c34;
276
- --code-normal: #e06c75; /*#ABB2BF;*/
277
- --code-string: #98c379;
278
- --code-number: #d19a66;
279
- --code-atrule: #61afef;
280
- --code-keyword: #c678dd;
281
- --code-comment: #5c6370;
282
- --code-property: #d19a66;
283
- --code-selector: #e06c75;
284
- --code-operator: #56b6c2;
285
- --code-function: #61afef;
286
- }
287
- }
288
27
  }
package/src/prism.css CHANGED
@@ -44,7 +44,7 @@ code,
44
44
  :not(pre) > code[class*='language-'],
45
45
  pre[class*='language-'] {
46
46
  /* background: var(--code-bg); */
47
- @apply bg-neutral-inset;
47
+ @apply bg-neutral-base;
48
48
  }
49
49
 
50
50
  :not(pre) > code[class*='language-'] {