@alphacifer/slidev-academic-theme 0.0.1 → 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 +18 -0
- 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 +70 -34
- 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
|
```
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { handleBackground } from '@slidev/client';
|
|
3
|
+
import { computed } from 'vue';
|
|
4
|
+
|
|
5
|
+
const { background } = defineProps({
|
|
6
|
+
background: {
|
|
7
|
+
default: '',
|
|
8
|
+
},
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
const style = computed(() => handleBackground(background));
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<template>
|
|
15
|
+
<main class="slidev-layout alpha-academic-blank" :style="style">
|
|
16
|
+
<slot />
|
|
17
|
+
</main>
|
|
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;
|
|
@@ -28,10 +21,24 @@ html.dark pre.shiki span {
|
|
|
28
21
|
}
|
|
29
22
|
|
|
30
23
|
.slidev-page {
|
|
31
|
-
|
|
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);
|
|
29
|
+
|
|
30
|
+
--alpha-arc-orbit-hub-fill: #f1f3f6;
|
|
31
|
+
--alpha-arc-orbit-guide-stroke: #cbd5e1;
|
|
32
|
+
--alpha-arc-orbit-guide-dot: #94a3b8;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.slidev-page {
|
|
36
|
+
background-color: var(--alpha-academic-page-background, var(--alpha-primary));
|
|
32
37
|
}
|
|
33
38
|
|
|
34
|
-
.
|
|
39
|
+
/* Keep Addon component colors legible on the Academic dark canvas. */
|
|
40
|
+
.dark .slidev-page,
|
|
41
|
+
html.dark .alpha-bg-center {
|
|
35
42
|
/* Neutralise the dark gradient overlay injected by handleBackground(bg, true).
|
|
36
43
|
screen(black, X) = X, so the background image renders at its original brightness. */
|
|
37
44
|
background-blend-mode: screen;
|
|
@@ -40,20 +47,17 @@ html.dark pre.shiki span {
|
|
|
40
47
|
.slidev-layout {
|
|
41
48
|
height: 100%;
|
|
42
49
|
padding: 2.5rem 3rem;
|
|
43
|
-
color: var(--alpha-academic-primary);
|
|
50
|
+
color: var(--alpha-academic-layout-text, var(--alpha-foreground-primary));
|
|
44
51
|
}
|
|
45
52
|
|
|
46
53
|
.slidev-layout mark {
|
|
47
54
|
font-weight: bold;
|
|
48
|
-
color: var(--alpha-academic-
|
|
55
|
+
color: var(--alpha-academic-mark-text, var(--alpha-foreground-accent));
|
|
49
56
|
background-color: transparent;
|
|
50
57
|
}
|
|
51
58
|
|
|
52
|
-
.
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.alpha-academic-cover {
|
|
59
|
+
.alpha-academic-cover,
|
|
60
|
+
.slidev-page .slidev-layout.alpha-academic-cover {
|
|
57
61
|
display: grid;
|
|
58
62
|
place-items: center;
|
|
59
63
|
width: 100%;
|
|
@@ -61,39 +65,75 @@ html.dark pre.shiki span {
|
|
|
61
65
|
text-align: center;
|
|
62
66
|
}
|
|
63
67
|
|
|
64
|
-
.alpha-academic-cover__content
|
|
68
|
+
.alpha-academic-cover__content,
|
|
69
|
+
.slidev-page .slidev-layout.alpha-academic-cover .alpha-academic-cover__content {
|
|
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;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.alpha-academic-blank {
|
|
65
80
|
width: 100%;
|
|
81
|
+
height: 100%;
|
|
66
82
|
}
|
|
67
83
|
|
|
68
|
-
.slidev-layout h1 {
|
|
84
|
+
.slidev-page .slidev-layout h1:not([class]) {
|
|
69
85
|
margin-bottom: 0.5rem;
|
|
70
|
-
font-size: 2.5rem;
|
|
71
86
|
font-weight: bold;
|
|
72
|
-
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);
|
|
73
94
|
}
|
|
74
95
|
|
|
75
|
-
.alpha-academic-cover
|
|
96
|
+
.slidev-page .slidev-layout.alpha-academic-cover h1:not([class]) {
|
|
76
97
|
margin: 0;
|
|
77
|
-
font-size: 3.75rem;
|
|
98
|
+
font-size: var(--alpha-font-size-cover, 3.75rem);
|
|
78
99
|
font-weight: bold;
|
|
79
|
-
color: var(--alpha-academic-accent);
|
|
100
|
+
color: var(--alpha-academic-cover-title, var(--alpha-foreground-accent));
|
|
80
101
|
}
|
|
81
102
|
|
|
82
|
-
.alpha-
|
|
83
|
-
|
|
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);
|
|
109
|
+
}
|
|
110
|
+
|
|
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);
|
|
84
124
|
}
|
|
85
125
|
|
|
86
126
|
.alpha-academic-pagy {
|
|
87
127
|
position: absolute;
|
|
88
128
|
right: 3rem;
|
|
89
|
-
bottom:
|
|
129
|
+
bottom: 0.75rem;
|
|
90
130
|
z-index: 50;
|
|
91
131
|
display: flex;
|
|
92
132
|
gap: 0.4rem;
|
|
93
133
|
font-size: 1.2rem;
|
|
94
134
|
font-weight: bold;
|
|
95
135
|
font-variant-numeric: tabular-nums;
|
|
96
|
-
color: var(--alpha-academic-primary);
|
|
136
|
+
color: var(--alpha-academic-page-number-text, var(--alpha-foreground-primary));
|
|
97
137
|
}
|
|
98
138
|
|
|
99
139
|
.slidev-page:has(.alpha-academic-cover) .alpha-academic-pagy,
|
|
@@ -104,13 +144,9 @@ html.dark pre.shiki span {
|
|
|
104
144
|
|
|
105
145
|
.alpha-arc-toc.slidev-layout .alpha-arc-toc__heading,
|
|
106
146
|
.alpha-arc-toc.slidev-layout .alpha-arc-toc__heading h1 {
|
|
107
|
-
font-size: 2.5rem;
|
|
147
|
+
font-size: var(--alpha-font-size-h1, 2.5rem);
|
|
108
148
|
}
|
|
109
149
|
|
|
110
150
|
.slidev-page .alpha-arc-toc.slidev-layout .alpha-arc-toc__item > a {
|
|
111
151
|
font-size: 1.25rem;
|
|
112
152
|
}
|
|
113
|
-
|
|
114
|
-
.alpha-bg-center .alpha-bg-center__index {
|
|
115
|
-
color: var(--alpha-academic-accent-foreground);
|
|
116
|
-
}
|
package/uno.config.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@alphacifer/slidev-core-theme/uno';
|