@alphacifer/slidev-core-theme 0.0.0-stage → 0.0.1
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/README.md +67 -2
- package/lib/uno.d.mts +20 -0
- package/lib/uno.mjs +42 -0
- package/package.json +34 -3
- package/style.css +218 -0
package/README.md
CHANGED
|
@@ -1,3 +1,68 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @alphacifer/slidev-core-theme
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Shared color tokens, typography defaults, and UnoCSS utilities for Alpha's
|
|
4
|
+
Slidev packages. Core is a library dependency; it does not need to appear in a
|
|
5
|
+
deck's `addons` list.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
The `@alphacifer/slidev-academic-theme` and `@alphacifer/slidev-addon-theme`
|
|
10
|
+
packages install Core automatically. To use Core in another Slidev theme or
|
|
11
|
+
addon, add it as a regular dependency:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
pnpm add @alphacifer/slidev-core-theme
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
Import the shared stylesheet from your theme or addon's `style.css`:
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
@import '@alphacifer/slidev-core-theme/style.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Re-export the UnoCSS configuration from `uno.config.ts` when Core supplies all
|
|
26
|
+
the theme values you need:
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
export { default } from '@alphacifer/slidev-core-theme/uno';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Color tokens
|
|
33
|
+
|
|
34
|
+
Core defines these CSS custom properties for light and dark mode:
|
|
35
|
+
|
|
36
|
+
| Token | Light | Dark |
|
|
37
|
+
| ------------------------------ | --------- | --------- |
|
|
38
|
+
| `--alpha-primary` | `#f8fafc` | `#0f172a` |
|
|
39
|
+
| `--alpha-foreground-primary` | `#0f172a` | `#f1f5f9` |
|
|
40
|
+
| `--alpha-foreground-secondary` | `#475569` | `#94a3b8` |
|
|
41
|
+
| `--alpha-foreground-accent` | `#0284c7` | `#38bdf8` |
|
|
42
|
+
| `--alpha-stroke-primary` | `#cbd5e1` | `#475569` |
|
|
43
|
+
|
|
44
|
+
The defaults sit in the `alpha-theme-tokens` cascade layer, so themes and decks
|
|
45
|
+
can override them in their own stylesheets. Core's UnoCSS configuration maps
|
|
46
|
+
them to `bg-primary`, `text-foreground-primary`, `text-foreground-secondary`,
|
|
47
|
+
`text-foreground-accent`,
|
|
48
|
+
`border-stroke-primary`, `fill-primary`, and `stroke-stroke-primary`.
|
|
49
|
+
|
|
50
|
+
## Typography
|
|
51
|
+
|
|
52
|
+
Core sets the base size on Slidev layouts and sizes headings without a `class`
|
|
53
|
+
attribute. Those `h1` through `h6` headings use bold weight.
|
|
54
|
+
|
|
55
|
+
| Content | Size |
|
|
56
|
+
| ------------ | ---------- |
|
|
57
|
+
| Cover `h1` | `3.75rem` |
|
|
58
|
+
| `h1` | `2.5rem` |
|
|
59
|
+
| `h2` | `2rem` |
|
|
60
|
+
| `h3` | `1.625rem` |
|
|
61
|
+
| `h4` | `1.25rem` |
|
|
62
|
+
| `h5` | `1rem` |
|
|
63
|
+
| `h6` | `0.875rem` |
|
|
64
|
+
| Base content | `1rem` |
|
|
65
|
+
| `small` | `0.875rem` |
|
|
66
|
+
|
|
67
|
+
The `text-base` and `text-sm` UnoCSS utilities use the same base and small size
|
|
68
|
+
tokens.
|
package/lib/uno.d.mts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
//#region src/uno.d.ts
|
|
2
|
+
type TCanonicalRule = [RegExp, (match: RegExpMatchArray) => Record<string, string>];
|
|
3
|
+
declare const unoConfig: {
|
|
4
|
+
readonly rules: TCanonicalRule[];
|
|
5
|
+
readonly theme: {
|
|
6
|
+
readonly colors: {
|
|
7
|
+
readonly primary: "var(--alpha-primary, #f8fafc)";
|
|
8
|
+
readonly 'foreground-primary': "var(--alpha-foreground-primary, #0f172a)";
|
|
9
|
+
readonly 'foreground-secondary': "var(--alpha-foreground-secondary, #475569)";
|
|
10
|
+
readonly 'foreground-accent': "var(--alpha-foreground-accent, #0284c7)";
|
|
11
|
+
readonly 'stroke-primary': "var(--alpha-stroke-primary, #cbd5e1)";
|
|
12
|
+
};
|
|
13
|
+
readonly fontSize: {
|
|
14
|
+
readonly base: readonly ["var(--alpha-font-size-base, 1rem)", "1.5rem"];
|
|
15
|
+
readonly sm: readonly ["var(--alpha-font-size-small, 0.875rem)", "1.25rem"];
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
//#endregion
|
|
20
|
+
export { unoConfig as default };
|
package/lib/uno.mjs
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
//#region src/uno.ts
|
|
2
|
+
const unoConfig = {
|
|
3
|
+
rules: [
|
|
4
|
+
[/^text-\((--[^)]+)\)$/, ([, value]) => {
|
|
5
|
+
return { color: `var(${value})` };
|
|
6
|
+
}],
|
|
7
|
+
[/^bg-\((--[^)]+)\)$/, ([, value]) => {
|
|
8
|
+
return { "background-color": `var(${value})` };
|
|
9
|
+
}],
|
|
10
|
+
[/^border-\((--[^)]+)\)$/, ([, value]) => {
|
|
11
|
+
return { "border-color": `var(${value})` };
|
|
12
|
+
}],
|
|
13
|
+
[/^ring-\((--[^)]+)\)$/, ([, value]) => {
|
|
14
|
+
return { "--un-ring-color": `var(${value})` };
|
|
15
|
+
}],
|
|
16
|
+
[/^wrap-break-word$/, () => {
|
|
17
|
+
return { "overflow-wrap": "break-word" };
|
|
18
|
+
}],
|
|
19
|
+
[/^bg-linear-to-br$/, () => {
|
|
20
|
+
return {
|
|
21
|
+
"--un-gradient-shape": "to bottom right in oklch",
|
|
22
|
+
"--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)",
|
|
23
|
+
"background-image": "linear-gradient(var(--un-gradient))"
|
|
24
|
+
};
|
|
25
|
+
}]
|
|
26
|
+
],
|
|
27
|
+
theme: {
|
|
28
|
+
colors: {
|
|
29
|
+
primary: "var(--alpha-primary, #f8fafc)",
|
|
30
|
+
"foreground-primary": "var(--alpha-foreground-primary, #0f172a)",
|
|
31
|
+
"foreground-secondary": "var(--alpha-foreground-secondary, #475569)",
|
|
32
|
+
"foreground-accent": "var(--alpha-foreground-accent, #0284c7)",
|
|
33
|
+
"stroke-primary": "var(--alpha-stroke-primary, #cbd5e1)"
|
|
34
|
+
},
|
|
35
|
+
fontSize: {
|
|
36
|
+
base: ["var(--alpha-font-size-base, 1rem)", "1.5rem"],
|
|
37
|
+
sm: ["var(--alpha-font-size-small, 0.875rem)", "1.25rem"]
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
//#endregion
|
|
42
|
+
export { unoConfig as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alphacifer/slidev-core-theme",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Shared color tokens and typography for Alpha Slidev themes",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
"./style.css": "./style.css",
|
|
8
|
+
"./uno": {
|
|
9
|
+
"types": "./lib/uno.d.mts",
|
|
10
|
+
"import": "./lib/uno.mjs"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"lib",
|
|
15
|
+
"style.css",
|
|
16
|
+
"README.md"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public",
|
|
20
|
+
"registry": "https://registry.npmjs.org/"
|
|
21
|
+
},
|
|
22
|
+
"author": "Alpha",
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "git+https://github.com/zgid123/alpha-dx.git",
|
|
26
|
+
"directory": "packages/slidev/core-theme"
|
|
27
|
+
},
|
|
28
|
+
"license": "MIT",
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/node": "25.9.0"
|
|
31
|
+
},
|
|
32
|
+
"scripts": {
|
|
33
|
+
"build": "tsdown",
|
|
34
|
+
"pretest": "pnpm build",
|
|
35
|
+
"test": "vitest run --globals"
|
|
36
|
+
}
|
|
6
37
|
}
|
package/style.css
ADDED
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
@layer alpha-theme-tokens {
|
|
2
|
+
:root {
|
|
3
|
+
--alpha-primary: #f8fafc;
|
|
4
|
+
|
|
5
|
+
--alpha-foreground-primary: #0f172a;
|
|
6
|
+
--alpha-foreground-secondary: #475569;
|
|
7
|
+
--alpha-foreground-accent: #0284c7;
|
|
8
|
+
|
|
9
|
+
--alpha-stroke-primary: #cbd5e1;
|
|
10
|
+
|
|
11
|
+
--alpha-font-size-cover: 3.75rem;
|
|
12
|
+
|
|
13
|
+
--alpha-font-size-h1: 2.5rem;
|
|
14
|
+
--alpha-font-size-h2: 2rem;
|
|
15
|
+
--alpha-font-size-h3: 1.625rem;
|
|
16
|
+
--alpha-font-size-h4: 1.25rem;
|
|
17
|
+
--alpha-font-size-h5: 1rem;
|
|
18
|
+
--alpha-font-size-h6: 0.875rem;
|
|
19
|
+
--alpha-font-size-base: 1rem;
|
|
20
|
+
--alpha-font-size-small: 0.875rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.dark,
|
|
24
|
+
html.dark {
|
|
25
|
+
--alpha-primary: #0f172a;
|
|
26
|
+
|
|
27
|
+
--alpha-foreground-primary: #f1f5f9;
|
|
28
|
+
--alpha-foreground-secondary: #94a3b8;
|
|
29
|
+
--alpha-foreground-accent: #38bdf8;
|
|
30
|
+
|
|
31
|
+
--alpha-stroke-primary: #475569;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.slidev-page .slidev-layout {
|
|
36
|
+
font-size: var(--alpha-font-size-base, 1rem);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.slidev-page .slidev-layout h1,
|
|
40
|
+
.slidev-page .slidev-layout h2,
|
|
41
|
+
.slidev-page .slidev-layout h3,
|
|
42
|
+
.slidev-page .slidev-layout h4,
|
|
43
|
+
.slidev-page .slidev-layout h5,
|
|
44
|
+
.slidev-page .slidev-layout h6 {
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.slidev-page
|
|
49
|
+
.slidev-layout
|
|
50
|
+
h1:not(
|
|
51
|
+
[class*='text-xs'],
|
|
52
|
+
[class*='text-sm'],
|
|
53
|
+
[class*='text-base'],
|
|
54
|
+
[class*='text-lg'],
|
|
55
|
+
[class*='text-xl'],
|
|
56
|
+
[class*='text-2xl'],
|
|
57
|
+
[class*='text-3xl'],
|
|
58
|
+
[class*='text-4xl'],
|
|
59
|
+
[class*='text-5xl'],
|
|
60
|
+
[class*='text-6xl'],
|
|
61
|
+
[class*='text-7xl'],
|
|
62
|
+
[class*='text-8xl'],
|
|
63
|
+
[class*='text-9xl'],
|
|
64
|
+
[class*='text-['][class*='px]'],
|
|
65
|
+
[class*='text-['][class*='rem]'],
|
|
66
|
+
[class*='text-['][class*='em]'],
|
|
67
|
+
[class*='text-['][class*='%]']
|
|
68
|
+
) {
|
|
69
|
+
font-size: var(--alpha-font-size-h1, 2.5rem);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.slidev-page
|
|
73
|
+
.slidev-layout.cover
|
|
74
|
+
h1:not(
|
|
75
|
+
[class*='text-xs'],
|
|
76
|
+
[class*='text-sm'],
|
|
77
|
+
[class*='text-base'],
|
|
78
|
+
[class*='text-lg'],
|
|
79
|
+
[class*='text-xl'],
|
|
80
|
+
[class*='text-2xl'],
|
|
81
|
+
[class*='text-3xl'],
|
|
82
|
+
[class*='text-4xl'],
|
|
83
|
+
[class*='text-5xl'],
|
|
84
|
+
[class*='text-6xl'],
|
|
85
|
+
[class*='text-7xl'],
|
|
86
|
+
[class*='text-8xl'],
|
|
87
|
+
[class*='text-9xl'],
|
|
88
|
+
[class*='text-['][class*='px]'],
|
|
89
|
+
[class*='text-['][class*='rem]'],
|
|
90
|
+
[class*='text-['][class*='em]'],
|
|
91
|
+
[class*='text-['][class*='%]']
|
|
92
|
+
) {
|
|
93
|
+
font-size: var(--alpha-font-size-cover, 3.75rem);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.slidev-page
|
|
97
|
+
.slidev-layout
|
|
98
|
+
h2:not(
|
|
99
|
+
[class*='text-xs'],
|
|
100
|
+
[class*='text-sm'],
|
|
101
|
+
[class*='text-base'],
|
|
102
|
+
[class*='text-lg'],
|
|
103
|
+
[class*='text-xl'],
|
|
104
|
+
[class*='text-2xl'],
|
|
105
|
+
[class*='text-3xl'],
|
|
106
|
+
[class*='text-4xl'],
|
|
107
|
+
[class*='text-5xl'],
|
|
108
|
+
[class*='text-6xl'],
|
|
109
|
+
[class*='text-7xl'],
|
|
110
|
+
[class*='text-8xl'],
|
|
111
|
+
[class*='text-9xl'],
|
|
112
|
+
[class*='text-['][class*='px]'],
|
|
113
|
+
[class*='text-['][class*='rem]'],
|
|
114
|
+
[class*='text-['][class*='em]'],
|
|
115
|
+
[class*='text-['][class*='%]']
|
|
116
|
+
) {
|
|
117
|
+
font-size: var(--alpha-font-size-h2, 2rem);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.slidev-page
|
|
121
|
+
.slidev-layout
|
|
122
|
+
h3:not(
|
|
123
|
+
[class*='text-xs'],
|
|
124
|
+
[class*='text-sm'],
|
|
125
|
+
[class*='text-base'],
|
|
126
|
+
[class*='text-lg'],
|
|
127
|
+
[class*='text-xl'],
|
|
128
|
+
[class*='text-2xl'],
|
|
129
|
+
[class*='text-3xl'],
|
|
130
|
+
[class*='text-4xl'],
|
|
131
|
+
[class*='text-5xl'],
|
|
132
|
+
[class*='text-6xl'],
|
|
133
|
+
[class*='text-7xl'],
|
|
134
|
+
[class*='text-8xl'],
|
|
135
|
+
[class*='text-9xl'],
|
|
136
|
+
[class*='text-['][class*='px]'],
|
|
137
|
+
[class*='text-['][class*='rem]'],
|
|
138
|
+
[class*='text-['][class*='em]'],
|
|
139
|
+
[class*='text-['][class*='%]']
|
|
140
|
+
) {
|
|
141
|
+
font-size: var(--alpha-font-size-h3, 1.625rem);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.slidev-page
|
|
145
|
+
.slidev-layout
|
|
146
|
+
h4:not(
|
|
147
|
+
[class*='text-xs'],
|
|
148
|
+
[class*='text-sm'],
|
|
149
|
+
[class*='text-base'],
|
|
150
|
+
[class*='text-lg'],
|
|
151
|
+
[class*='text-xl'],
|
|
152
|
+
[class*='text-2xl'],
|
|
153
|
+
[class*='text-3xl'],
|
|
154
|
+
[class*='text-4xl'],
|
|
155
|
+
[class*='text-5xl'],
|
|
156
|
+
[class*='text-6xl'],
|
|
157
|
+
[class*='text-7xl'],
|
|
158
|
+
[class*='text-8xl'],
|
|
159
|
+
[class*='text-9xl'],
|
|
160
|
+
[class*='text-['][class*='px]'],
|
|
161
|
+
[class*='text-['][class*='rem]'],
|
|
162
|
+
[class*='text-['][class*='em]'],
|
|
163
|
+
[class*='text-['][class*='%]']
|
|
164
|
+
) {
|
|
165
|
+
font-size: var(--alpha-font-size-h4, 1.25rem);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.slidev-page
|
|
169
|
+
.slidev-layout
|
|
170
|
+
h5:not(
|
|
171
|
+
[class*='text-xs'],
|
|
172
|
+
[class*='text-sm'],
|
|
173
|
+
[class*='text-base'],
|
|
174
|
+
[class*='text-lg'],
|
|
175
|
+
[class*='text-xl'],
|
|
176
|
+
[class*='text-2xl'],
|
|
177
|
+
[class*='text-3xl'],
|
|
178
|
+
[class*='text-4xl'],
|
|
179
|
+
[class*='text-5xl'],
|
|
180
|
+
[class*='text-6xl'],
|
|
181
|
+
[class*='text-7xl'],
|
|
182
|
+
[class*='text-8xl'],
|
|
183
|
+
[class*='text-9xl'],
|
|
184
|
+
[class*='text-['][class*='px]'],
|
|
185
|
+
[class*='text-['][class*='rem]'],
|
|
186
|
+
[class*='text-['][class*='em]'],
|
|
187
|
+
[class*='text-['][class*='%]']
|
|
188
|
+
) {
|
|
189
|
+
font-size: var(--alpha-font-size-h5, 1rem);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.slidev-page
|
|
193
|
+
.slidev-layout
|
|
194
|
+
h6:not(
|
|
195
|
+
[class*='text-xs'],
|
|
196
|
+
[class*='text-sm'],
|
|
197
|
+
[class*='text-base'],
|
|
198
|
+
[class*='text-lg'],
|
|
199
|
+
[class*='text-xl'],
|
|
200
|
+
[class*='text-2xl'],
|
|
201
|
+
[class*='text-3xl'],
|
|
202
|
+
[class*='text-4xl'],
|
|
203
|
+
[class*='text-5xl'],
|
|
204
|
+
[class*='text-6xl'],
|
|
205
|
+
[class*='text-7xl'],
|
|
206
|
+
[class*='text-8xl'],
|
|
207
|
+
[class*='text-9xl'],
|
|
208
|
+
[class*='text-['][class*='px]'],
|
|
209
|
+
[class*='text-['][class*='rem]'],
|
|
210
|
+
[class*='text-['][class*='em]'],
|
|
211
|
+
[class*='text-['][class*='%]']
|
|
212
|
+
) {
|
|
213
|
+
font-size: var(--alpha-font-size-h6, 0.875rem);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.slidev-page .slidev-layout small {
|
|
217
|
+
font-size: var(--alpha-font-size-small, 0.875rem);
|
|
218
|
+
}
|