@alphacifer/slidev-academic-theme 0.0.2 → 0.0.3
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 +22 -17
- package/layouts/blank.vue +1 -4
- package/layouts/cover.vue +2 -2
- package/layouts/section.vue +1 -4
- package/package.json +8 -3
- package/slide-bottom.vue +1 -5
- package/style.css +62 -80
- package/uno.config.ts +1 -0
- package/layouts/end.vue +0 -11
package/README.md
CHANGED
|
@@ -6,14 +6,18 @@ reports, and thesis defenses.
|
|
|
6
6
|
## Installation
|
|
7
7
|
|
|
8
8
|
```bash
|
|
9
|
-
pnpm add -D @alphacifer/slidev-theme
|
|
9
|
+
pnpm add -D @alphacifer/slidev-academic-theme
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
+
The theme installs `@alphacifer/slidev-core-theme` automatically for its shared
|
|
13
|
+
color tokens, typography, and UnoCSS utilities. You do not need to register it
|
|
14
|
+
as an addon.
|
|
15
|
+
|
|
12
16
|
## Usage
|
|
13
17
|
|
|
14
18
|
```yaml
|
|
15
19
|
---
|
|
16
|
-
theme: '@alphacifer/slidev-theme
|
|
20
|
+
theme: '@alphacifer/slidev-academic-theme'
|
|
17
21
|
---
|
|
18
22
|
```
|
|
19
23
|
|
|
@@ -21,7 +25,7 @@ Combine it with Alpha's reusable Slidev addon when needed:
|
|
|
21
25
|
|
|
22
26
|
```yaml
|
|
23
27
|
---
|
|
24
|
-
theme: '@alphacifer/slidev-theme
|
|
28
|
+
theme: '@alphacifer/slidev-academic-theme'
|
|
25
29
|
addons:
|
|
26
30
|
- '@alphacifer/slidev-addon-theme'
|
|
27
31
|
---
|
|
@@ -31,40 +35,41 @@ addons:
|
|
|
31
35
|
|
|
32
36
|
- `cover`: title slide with a restrained academic accent.
|
|
33
37
|
- `default`: standard content slide.
|
|
38
|
+
- `blank`: unconstrained canvas slide.
|
|
34
39
|
- `section`: centered section divider.
|
|
35
|
-
- `end`: closing slide.
|
|
36
40
|
|
|
37
|
-
##
|
|
41
|
+
## Color tokens
|
|
38
42
|
|
|
39
43
|
Override the CSS custom properties in a deck-level `style.css` to customize the
|
|
40
44
|
theme without replacing its layouts:
|
|
41
45
|
|
|
42
46
|
```css
|
|
43
47
|
:root {
|
|
44
|
-
|
|
45
|
-
--alpha-
|
|
46
|
-
|
|
47
|
-
--alpha-
|
|
48
|
-
/* Accent Highlight (e.g. Cover / Badge) */
|
|
49
|
-
--alpha-academic-accent: #0ea5e9;
|
|
50
|
-
/* Accent Foreground (e.g. highlighted terms / marks) */
|
|
51
|
-
--alpha-academic-accent-foreground: #0284c7;
|
|
48
|
+
--alpha-primary: #f8fafc;
|
|
49
|
+
--alpha-foreground-primary: #0f172a;
|
|
50
|
+
--alpha-foreground-accent: #0284c7;
|
|
51
|
+
--alpha-stroke-primary: #cbd5e1;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.dark {
|
|
55
|
-
--alpha-
|
|
56
|
-
--alpha-academic-accent-foreground: #34d399;
|
|
55
|
+
--alpha-foreground-accent: #34d399;
|
|
57
56
|
}
|
|
58
57
|
```
|
|
59
58
|
|
|
59
|
+
Core provides these tokens and UnoCSS color utilities through the theme:
|
|
60
|
+
`bg-primary`, `text-foreground-primary`,
|
|
61
|
+
`text-foreground-accent`, `border-stroke-primary`, `fill-primary`, and
|
|
62
|
+
`stroke-stroke-primary`. The optional `@alphacifer/slidev-addon-theme` package
|
|
63
|
+
adds reusable components and layouts; the academic theme does not require it.
|
|
64
|
+
|
|
60
65
|
## Preview
|
|
61
66
|
|
|
62
67
|
```bash
|
|
63
|
-
pnpm --filter @alphacifer/slidev-theme
|
|
68
|
+
pnpm --filter @alphacifer/slidev-academic-theme dev
|
|
64
69
|
```
|
|
65
70
|
|
|
66
71
|
Build the preview without opening a browser:
|
|
67
72
|
|
|
68
73
|
```bash
|
|
69
|
-
pnpm --filter @alphacifer/slidev-theme
|
|
74
|
+
pnpm --filter @alphacifer/slidev-academic-theme preview:build
|
|
70
75
|
```
|
package/layouts/blank.vue
CHANGED
|
@@ -12,10 +12,7 @@ const style = computed(() => handleBackground(background));
|
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<template>
|
|
15
|
-
<main
|
|
16
|
-
class="slidev-layout alpha-academic-blank"
|
|
17
|
-
:style="style"
|
|
18
|
-
>
|
|
15
|
+
<main class="slidev-layout alpha-academic-blank" :style="style">
|
|
19
16
|
<slot />
|
|
20
17
|
</main>
|
|
21
18
|
</template>
|
package/layouts/cover.vue
CHANGED
|
@@ -13,10 +13,10 @@ const style = computed(() => handleBackground(background));
|
|
|
13
13
|
|
|
14
14
|
<template>
|
|
15
15
|
<main
|
|
16
|
-
class="slidev-layout alpha-academic-cover"
|
|
16
|
+
class="slidev-layout alpha-academic-cover grid place-items-center text-center h-full w-full"
|
|
17
17
|
:style="style"
|
|
18
18
|
>
|
|
19
|
-
<div class="alpha-academic-cover__content">
|
|
19
|
+
<div class="alpha-academic-cover__content w-full">
|
|
20
20
|
<slot />
|
|
21
21
|
</div>
|
|
22
22
|
</main>
|
package/layouts/section.vue
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alphacifer/slidev-academic-theme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Alpha's light-only academic theme for Slidev",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"setup",
|
|
14
14
|
"slide-bottom.vue",
|
|
15
15
|
"style.css",
|
|
16
|
+
"uno.config.ts",
|
|
16
17
|
"README.md"
|
|
17
18
|
],
|
|
18
19
|
"publishConfig": {
|
|
@@ -44,12 +45,16 @@
|
|
|
44
45
|
"@slidev/client": ">=52.18.0",
|
|
45
46
|
"vue": "^3.5.40"
|
|
46
47
|
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@alphacifer/slidev-core-theme": "^0.0.1"
|
|
50
|
+
},
|
|
47
51
|
"devDependencies": {
|
|
48
|
-
"@slidev/client": "52.19.0",
|
|
49
52
|
"@slidev/cli": "52.19.0",
|
|
50
|
-
"
|
|
53
|
+
"@slidev/client": "52.19.0",
|
|
54
|
+
"@types/node": "25.9.0"
|
|
51
55
|
},
|
|
52
56
|
"scripts": {
|
|
57
|
+
"test": "vitest run --globals",
|
|
53
58
|
"dev": "slidev slides.md --open",
|
|
54
59
|
"preview:build": "slidev build slides.md"
|
|
55
60
|
}
|
package/slide-bottom.vue
CHANGED
|
@@ -8,11 +8,7 @@ const isVisible = computed(() => !$frontmatter.hidePagy);
|
|
|
8
8
|
</script>
|
|
9
9
|
|
|
10
10
|
<template>
|
|
11
|
-
<div
|
|
12
|
-
v-if="isVisible"
|
|
13
|
-
aria-label="Slide pagination"
|
|
14
|
-
class="alpha-academic-pagy"
|
|
15
|
-
>
|
|
11
|
+
<div v-if="isVisible" class="alpha-academic-pagy">
|
|
16
12
|
<SlideCurrentNo />
|
|
17
13
|
<span aria-hidden="true">/</span>
|
|
18
14
|
<SlidesTotal />
|
package/style.css
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
/* --alpha-academic-primary: #0369a1; */
|
|
3
|
-
--alpha-academic-primary: #0f172a;
|
|
4
|
-
--alpha-academic-bg: #f8fafc;
|
|
5
|
-
--alpha-academic-accent: #0ea5e9;
|
|
6
|
-
--alpha-academic-accent-foreground: #0284c7;
|
|
7
|
-
}
|
|
1
|
+
@import '@alphacifer/slidev-core-theme/style.css';
|
|
8
2
|
|
|
9
3
|
.dark,
|
|
10
4
|
html.dark {
|
|
11
|
-
--alpha-
|
|
12
|
-
--alpha-academic-accent-foreground: #34d399;
|
|
5
|
+
--alpha-foreground-accent: #34d399;
|
|
13
6
|
--slidev-code-background: #f5f5f5;
|
|
14
7
|
--slidev-code-foreground: #1b1b1b;
|
|
15
8
|
--slidev-code-tab-divider: #e5e5e5;
|
|
@@ -27,60 +20,25 @@ html.dark pre.shiki span {
|
|
|
27
20
|
color: var(--shiki-light, inherit);
|
|
28
21
|
}
|
|
29
22
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
html.dark .slidev-page .alpha-arc-orbit-content,
|
|
37
|
-
html.dark .slidev-page .alpha-horiz-card-content,
|
|
38
|
-
html.dark .slidev-page .alpha-vert-card-content {
|
|
39
|
-
color: var(--alpha-academic-primary);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.dark .slidev-page .alpha-arc-comparison__divider,
|
|
43
|
-
html.dark .slidev-page .alpha-arc-comparison__divider {
|
|
44
|
-
stroke: #cbd5e1;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.dark .slidev-page .alpha-arc-comparison__hub path,
|
|
48
|
-
html.dark .slidev-page .alpha-arc-comparison__hub path,
|
|
49
|
-
.dark .slidev-page .alpha-arc-orbit__hub path,
|
|
50
|
-
html.dark .slidev-page .alpha-arc-orbit__hub path {
|
|
51
|
-
fill: #f1f3f6;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.dark .slidev-page .alpha-arc-comparison__arc path,
|
|
55
|
-
html.dark .slidev-page .alpha-arc-comparison__arc path,
|
|
56
|
-
.dark .slidev-page .alpha-arc-orbit__arc path,
|
|
57
|
-
html.dark .slidev-page .alpha-arc-orbit__arc path {
|
|
58
|
-
stroke: #cbd5e1;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.dark .slidev-page .alpha-arc-comparison__arc circle,
|
|
62
|
-
html.dark .slidev-page .alpha-arc-comparison__arc circle,
|
|
63
|
-
.dark .slidev-page .alpha-arc-orbit__arc circle,
|
|
64
|
-
html.dark .slidev-page .alpha-arc-orbit__arc circle {
|
|
65
|
-
fill: #94a3b8;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.dark .slidev-page .alpha-arc-comparison__vs circle,
|
|
69
|
-
html.dark .slidev-page .alpha-arc-comparison__vs circle {
|
|
70
|
-
fill: #ffffff;
|
|
71
|
-
stroke: #cbd5e1;
|
|
72
|
-
}
|
|
23
|
+
.slidev-page {
|
|
24
|
+
--alpha-arc-comparison-hub-fill: #f1f3f6;
|
|
25
|
+
--alpha-arc-comparison-guide-stroke: #cbd5e1;
|
|
26
|
+
--alpha-arc-comparison-guide-dot: #94a3b8;
|
|
27
|
+
--alpha-arc-comparison-vs-bg: #ffffff;
|
|
28
|
+
--alpha-arc-comparison-vs: var(--alpha-foreground-primary);
|
|
73
29
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
30
|
+
--alpha-arc-orbit-hub-fill: #f1f3f6;
|
|
31
|
+
--alpha-arc-orbit-guide-stroke: #cbd5e1;
|
|
32
|
+
--alpha-arc-orbit-guide-dot: #94a3b8;
|
|
77
33
|
}
|
|
78
34
|
|
|
79
35
|
.slidev-page {
|
|
80
|
-
background-color: var(--alpha-academic-
|
|
36
|
+
background-color: var(--alpha-academic-page-background, var(--alpha-primary));
|
|
81
37
|
}
|
|
82
38
|
|
|
83
|
-
.
|
|
39
|
+
/* Keep Addon component colors legible on the Academic dark canvas. */
|
|
40
|
+
.dark .slidev-page,
|
|
41
|
+
html.dark .alpha-bg-center {
|
|
84
42
|
/* Neutralise the dark gradient overlay injected by handleBackground(bg, true).
|
|
85
43
|
screen(black, X) = X, so the background image renders at its original brightness. */
|
|
86
44
|
background-blend-mode: screen;
|
|
@@ -89,20 +47,17 @@ html.dark .slidev-page .alpha-arc-comparison__vs text {
|
|
|
89
47
|
.slidev-layout {
|
|
90
48
|
height: 100%;
|
|
91
49
|
padding: 2.5rem 3rem;
|
|
92
|
-
color: var(--alpha-academic-primary);
|
|
50
|
+
color: var(--alpha-academic-layout-text, var(--alpha-foreground-primary));
|
|
93
51
|
}
|
|
94
52
|
|
|
95
53
|
.slidev-layout mark {
|
|
96
54
|
font-weight: bold;
|
|
97
|
-
color: var(--alpha-academic-
|
|
55
|
+
color: var(--alpha-academic-mark-text, var(--alpha-foreground-accent));
|
|
98
56
|
background-color: transparent;
|
|
99
57
|
}
|
|
100
58
|
|
|
101
|
-
.
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.alpha-academic-cover {
|
|
59
|
+
.alpha-academic-cover,
|
|
60
|
+
.slidev-page .slidev-layout.alpha-academic-cover {
|
|
106
61
|
display: grid;
|
|
107
62
|
place-items: center;
|
|
108
63
|
width: 100%;
|
|
@@ -110,8 +65,15 @@ html.dark .slidev-page .alpha-arc-comparison__vs text {
|
|
|
110
65
|
text-align: center;
|
|
111
66
|
}
|
|
112
67
|
|
|
113
|
-
.alpha-academic-cover__content
|
|
68
|
+
.alpha-academic-cover__content,
|
|
69
|
+
.slidev-page .slidev-layout.alpha-academic-cover .alpha-academic-cover__content {
|
|
114
70
|
width: 100%;
|
|
71
|
+
text-align: center;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.slidev-page .slidev-layout.alpha-academic-cover h1,
|
|
75
|
+
.slidev-page .slidev-layout.alpha-academic-cover h2 {
|
|
76
|
+
text-align: center;
|
|
115
77
|
}
|
|
116
78
|
|
|
117
79
|
.alpha-academic-blank {
|
|
@@ -119,35 +81,59 @@ html.dark .slidev-page .alpha-arc-comparison__vs text {
|
|
|
119
81
|
height: 100%;
|
|
120
82
|
}
|
|
121
83
|
|
|
122
|
-
.slidev-layout h1 {
|
|
84
|
+
.slidev-page .slidev-layout h1:not([class]) {
|
|
123
85
|
margin-bottom: 0.5rem;
|
|
124
|
-
font-size: 2.5rem;
|
|
125
86
|
font-weight: bold;
|
|
126
|
-
color: var(--alpha-academic-primary);
|
|
87
|
+
color: var(--alpha-academic-heading-text, var(--alpha-foreground-primary));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.slidev-page .slidev-layout h4:not([class]) {
|
|
91
|
+
font-size: var(--alpha-font-size-h4, 1.25rem);
|
|
92
|
+
font-weight: 500;
|
|
93
|
+
color: var(--alpha-foreground-secondary, #475569);
|
|
127
94
|
}
|
|
128
95
|
|
|
129
|
-
.alpha-academic-cover
|
|
96
|
+
.slidev-page .slidev-layout.alpha-academic-cover h1:not([class]) {
|
|
130
97
|
margin: 0;
|
|
131
|
-
font-size: 3.75rem;
|
|
98
|
+
font-size: var(--alpha-font-size-cover, 3.75rem);
|
|
132
99
|
font-weight: bold;
|
|
133
|
-
color: var(--alpha-academic-accent);
|
|
100
|
+
color: var(--alpha-academic-cover-title, var(--alpha-foreground-accent));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.slidev-page .slidev-layout.alpha-academic-cover h2:not([class]) {
|
|
104
|
+
margin-top: 0.75rem;
|
|
105
|
+
margin-bottom: 2rem;
|
|
106
|
+
font-size: var(--alpha-font-size-h2, 2rem);
|
|
107
|
+
font-weight: 500;
|
|
108
|
+
color: var(--alpha-foreground-secondary, #475569);
|
|
134
109
|
}
|
|
135
110
|
|
|
136
|
-
.alpha-
|
|
137
|
-
|
|
111
|
+
.slidev-page .slidev-layout.alpha-academic-cover h4:not([class]) {
|
|
112
|
+
margin-top: 0.75rem;
|
|
113
|
+
margin-bottom: 2rem;
|
|
114
|
+
font-size: var(--alpha-font-size-h4, 1.25rem);
|
|
115
|
+
font-weight: 500;
|
|
116
|
+
color: var(--alpha-foreground-secondary, #475569);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.slidev-page .slidev-layout.alpha-academic-section h4:not([class]) {
|
|
120
|
+
margin-top: 0.5rem;
|
|
121
|
+
font-size: var(--alpha-font-size-h4, 1.25rem);
|
|
122
|
+
font-weight: 500;
|
|
123
|
+
color: var(--alpha-foreground-secondary, #475569);
|
|
138
124
|
}
|
|
139
125
|
|
|
140
126
|
.alpha-academic-pagy {
|
|
141
127
|
position: absolute;
|
|
142
128
|
right: 3rem;
|
|
143
|
-
bottom:
|
|
129
|
+
bottom: 0.75rem;
|
|
144
130
|
z-index: 50;
|
|
145
131
|
display: flex;
|
|
146
132
|
gap: 0.4rem;
|
|
147
133
|
font-size: 1.2rem;
|
|
148
134
|
font-weight: bold;
|
|
149
135
|
font-variant-numeric: tabular-nums;
|
|
150
|
-
color: var(--alpha-academic-primary);
|
|
136
|
+
color: var(--alpha-academic-page-number-text, var(--alpha-foreground-primary));
|
|
151
137
|
}
|
|
152
138
|
|
|
153
139
|
.slidev-page:has(.alpha-academic-cover) .alpha-academic-pagy,
|
|
@@ -158,13 +144,9 @@ html.dark .slidev-page .alpha-arc-comparison__vs text {
|
|
|
158
144
|
|
|
159
145
|
.alpha-arc-toc.slidev-layout .alpha-arc-toc__heading,
|
|
160
146
|
.alpha-arc-toc.slidev-layout .alpha-arc-toc__heading h1 {
|
|
161
|
-
font-size: 2.5rem;
|
|
147
|
+
font-size: var(--alpha-font-size-h1, 2.5rem);
|
|
162
148
|
}
|
|
163
149
|
|
|
164
150
|
.slidev-page .alpha-arc-toc.slidev-layout .alpha-arc-toc__item > a {
|
|
165
151
|
font-size: 1.25rem;
|
|
166
152
|
}
|
|
167
|
-
|
|
168
|
-
.alpha-bg-center .alpha-bg-center__index {
|
|
169
|
-
color: var(--alpha-academic-accent-foreground);
|
|
170
|
-
}
|
package/uno.config.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@alphacifer/slidev-core-theme/uno';
|