schoolbox web extension :)
refactor: update to tailwind v4 (#229)
* do stuff
Co-authored-by: Creator344 <noahstephenjohnson@gmail.com>
* fix: minor styling issues
* fix: tailwind not picking up classes
* fix: popup theme changing
* chore: delete old config file
* chore: update lockfile
* refactor: clean up
---------
Co-authored-by: Creator344 <noahstephenjohnson@gmail.com>
authored by
willow
Creator344
and committed by
GitHub
53b6b268
ac65db76
+161
-174
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+3
-3
package.json
+3
-3
package.json
···
5
5
"homepage": "https://schooltape.github.io",
6
6
"devDependencies": {
7
7
"@catppuccin/palette": "^1.7.1",
8
-
"@catppuccin/tailwindcss": "^0.1.6",
8
+
"@catppuccin/tailwindcss": "1.0.0-beta.2",
9
9
"@eslint/compat": "^1.2.9",
10
10
"@eslint/js": "^9.27.0",
11
11
"@sveltejs/vite-plugin-svelte": "^5.0.3",
12
+
"@tailwindcss/vite": "^4.1.7",
12
13
"@tsconfig/svelte": "^5.0.4",
13
14
"@wxt-dev/module-svelte": "^2.0.3",
14
-
"autoprefixer": "^10.4.21",
15
15
"eslint": "^9.27.0",
16
16
"eslint-plugin-svelte": "^3.9.0",
17
17
"globals": "^16.1.0",
···
24
24
"svelte": "^5.33.1",
25
25
"svelte-check": "^4.2.1",
26
26
"svelte-spa-router": "^4.0.1",
27
-
"tailwindcss": "^3.4.17",
27
+
"tailwindcss": "^4.1.7",
28
28
"typescript": "^5.8.3",
29
29
"typescript-eslint": "^8.32.1",
30
30
"wxt": "^0.20.6"
-6
postcss.config.js
-6
postcss.config.js
+9
-11
src/entrypoints/popup/App.svelte
+9
-11
src/entrypoints/popup/App.svelte
···
19
19
};
20
20
let flavour = $state("");
21
21
let accent = "";
22
-
let accentHex = "";
22
+
let accentRgb = "";
23
23
let settings = globalSettings.fallback;
24
24
let refresh = $state(needsRefresh.fallback);
25
25
···
38
38
refreshSchoolboxURLs();
39
39
}
40
40
41
-
function getAccentHex(accent: string, flavour: string) {
42
-
// console.log(accent, flavour);
43
-
// console.log(flavors);
44
-
// console.log(flavors[flavour].colors[accent].hex);
41
+
function getAccentRgb(accent: string, flavour: string) {
42
+
console.log(accent, flavour);
43
+
console.log(flavors);
44
+
console.log(flavors[flavour].colors);
45
45
let x = (flavors as any)[flavour].colors[accent].rgb;
46
-
return `${x.r}, ${x.g}, ${x.b}`;
46
+
return `rgb(${x.r}, ${x.g}, ${x.b})`;
47
47
}
48
48
49
49
let settingsUnwatch: () => void;
···
54
54
refresh = await needsRefresh.getValue();
55
55
accent = settings.themeAccent;
56
56
flavour = settings.themeFlavour;
57
-
accentHex = getAccentHex(accent, flavour);
58
-
document.documentElement.style.setProperty("--ctp-accent", accentHex);
57
+
document.documentElement.style.setProperty("--ctp-accent", getAccentRgb(accent, flavour));
59
58
60
59
settingsUnwatch = globalSettings.watch((newValue) => {
61
60
settings = newValue;
62
61
flavour = newValue.themeFlavour;
63
62
accent = newValue.themeAccent;
64
-
accentHex = getAccentHex(accent, flavour);
65
63
66
-
document.documentElement.style.setProperty("--ctp-accent", accentHex);
64
+
document.documentElement.style.setProperty("--ctp-accent", getAccentRgb(accent, flavour));
67
65
refresh = true;
68
66
needsRefresh.setValue(refresh);
69
67
});
···
78
76
});
79
77
</script>
80
78
81
-
<main class="flex flex-col items-center bg-ctp-base p-6 ctp-{flavour}">
79
+
<main class="flex flex-col items-center bg-ctp-base p-6 {flavour}">
82
80
<nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar">
83
81
<a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a>
84
82
<a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a>
+116
-97
src/entrypoints/popup/app.css
+116
-97
src/entrypoints/popup/app.css
···
1
-
@tailwind base;
2
-
@tailwind components;
3
-
@tailwind utilities;
1
+
@import "tailwindcss";
2
+
@import "@catppuccin/tailwindcss/mocha.css";
3
+
4
+
/*
5
+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
6
+
so we've added these compatibility styles to make sure everything still
7
+
looks the same as it did with Tailwind CSS v3.
8
+
9
+
If we ever want to remove these styles, we need to add an explicit border
10
+
color utility to any element that depends on these defaults.
11
+
*/
12
+
@layer base {
13
+
*,
14
+
::after,
15
+
::before,
16
+
::backdrop,
17
+
::file-selector-button {
18
+
border-color: var(--color-gray-200, currentcolor);
19
+
}
20
+
}
4
21
5
22
body {
6
23
width: 450px; /* max: 1000px */
7
-
@apply bg-ctp-base text-base text-ctp-text;
24
+
@apply bg-ctp-base text-ctp-text text-base;
8
25
}
9
26
10
-
.logo-picker {
11
-
mask: var(--icon) no-repeat;
12
-
mask-size: 100% 100%;
13
-
background-color: currentColor;
14
-
@apply h-16 w-20 text-ctp-accent;
15
-
}
27
+
@layer components {
28
+
.logo-picker {
29
+
mask: var(--icon) no-repeat;
30
+
mask-size: 100% 100%;
31
+
background-color: currentColor;
32
+
@apply h-16 w-20 text-(--ctp-accent);
33
+
}
16
34
17
-
.slider {
18
-
@apply ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg bg-ctp-surface1 p-1 duration-500 ease-in-out after:rounded-lg after:bg-ctp-text after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:bg-ctp-accent peer-checked:after:translate-x-6 peer-checked:after:bg-ctp-mantle;
19
-
}
35
+
.slider {
36
+
@apply bg-ctp-surface1 after:bg-ctp-text peer-checked:after:bg-ctp-mantle ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg p-1 duration-500 ease-in-out peer-checked:bg-(--ctp-accent) after:rounded-lg after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6;
37
+
}
20
38
21
-
.slider.big {
22
-
@apply h-8 w-14 after:h-6 after:w-6;
23
-
}
39
+
.slider.big {
40
+
@apply h-8 w-14 after:h-6 after:w-6;
41
+
}
24
42
25
-
.slider.small {
26
-
@apply after:h-3 after:w-3;
27
-
}
43
+
.slider.small {
44
+
@apply after:h-3 after:w-3;
45
+
}
28
46
29
-
.slider-input {
30
-
@apply absolute left-1/2 h-full w-full -translate-x-1/2 appearance-none rounded-md;
31
-
}
47
+
.slider-input {
48
+
@apply absolute left-1/2 h-full w-full -translate-x-1/2 appearance-none rounded-md;
49
+
}
32
50
33
-
.slider-label {
34
-
@apply relative flex items-center justify-between py-2 text-xl text-ctp-text;
35
-
}
51
+
.slider-label {
52
+
@apply text-ctp-text relative flex items-center justify-between py-2 text-xl;
53
+
}
36
54
37
-
.slider-description {
38
-
@apply text-ctp-overlay1 transition-colors duration-500 ease-in-out group-hover:text-ctp-subtext0;
39
-
}
55
+
.slider-description {
56
+
@apply text-ctp-overlay1 group-hover:text-ctp-subtext0 transition-colors duration-500 ease-in-out;
57
+
}
40
58
41
-
#flavours button {
42
-
@apply bg-ctp-surface0;
43
-
}
59
+
#flavours button {
60
+
@apply bg-ctp-surface0;
61
+
}
44
62
45
-
#flavours button.active {
46
-
@apply bg-ctp-accent/50;
47
-
}
63
+
#flavours button.active {
64
+
@apply bg-(--ctp-accent)/50;
65
+
}
48
66
49
-
#navbar a.active {
50
-
@apply bg-ctp-accent/50;
51
-
}
67
+
#navbar a.active {
68
+
@apply bg-(--ctp-accent)/50;
69
+
}
52
70
53
-
#navbar a {
54
-
@apply bg-ctp-overlay0/50;
55
-
}
71
+
#navbar a {
72
+
@apply bg-ctp-overlay0/50;
73
+
}
56
74
57
-
#card {
58
-
@apply flex w-full flex-col items-center justify-center rounded-3xl bg-gradient-to-b p-6 shadow-xl outline outline-2 outline-ctp-accent;
59
-
}
75
+
#card {
76
+
@apply flex w-full flex-col items-center justify-center rounded-3xl bg-linear-to-b p-6 shadow-xl outline-2 outline-(--ctp-accent) outline-solid;
77
+
}
60
78
61
-
#card h1 {
62
-
@apply bg-gradient-to-r from-ctp-blue to-ctp-teal bg-clip-text text-5xl font-black text-transparent;
63
-
}
79
+
#card h1 {
80
+
@apply from-ctp-blue to-ctp-teal bg-linear-to-r bg-clip-text text-5xl font-black text-transparent;
81
+
}
64
82
65
-
#card h2 {
66
-
@apply bg-gradient-to-r from-ctp-blue to-ctp-teal bg-clip-text text-4xl font-black text-transparent;
67
-
}
83
+
#card h2 {
84
+
@apply from-ctp-blue to-ctp-teal bg-linear-to-r bg-clip-text text-4xl font-black text-transparent;
85
+
}
68
86
69
-
#card h3 {
70
-
@apply text-2xl font-black;
71
-
}
87
+
#card h3 {
88
+
@apply text-2xl font-black;
89
+
}
72
90
73
-
#card p {
74
-
@apply font-bold;
75
-
}
91
+
#card p {
92
+
@apply font-bold;
93
+
}
76
94
77
-
.highlight {
78
-
@apply bg-ctp-surface2;
79
-
}
95
+
.highlight {
96
+
@apply bg-ctp-surface2;
97
+
}
80
98
81
-
button#toggle {
82
-
@apply rounded-xl px-4 py-2 text-xl font-bold text-ctp-base;
83
-
}
99
+
button#toggle {
100
+
@apply text-ctp-base rounded-xl px-4 py-2 text-xl font-bold;
101
+
}
84
102
85
-
button.small {
86
-
@apply rounded-lg px-2 py-1 text-sm font-bold;
87
-
}
103
+
button.small {
104
+
@apply rounded-lg px-2 py-1 text-sm font-bold;
105
+
}
88
106
89
-
button.xsmall {
90
-
@apply rounded-md px-1 py-0.5 text-xs;
91
-
}
107
+
button.xsmall {
108
+
@apply rounded-md px-1 py-0.5 text-xs;
109
+
}
92
110
93
-
button {
94
-
@apply bg-ctp-surface0 text-ctp-text transition duration-500 ease-in-out;
95
-
}
111
+
button {
112
+
@apply bg-ctp-surface0 text-ctp-text transition duration-500 ease-in-out;
113
+
}
96
114
97
-
#palette {
98
-
@apply mb-8 grid auto-rows-auto grid-cols-7 justify-items-center gap-4;
99
-
}
115
+
#palette {
116
+
@apply mb-8 grid auto-rows-auto grid-cols-7 justify-items-center gap-4;
117
+
}
100
118
101
-
#palette > * {
102
-
@apply h-6 w-6 rounded-full;
103
-
}
119
+
#palette > * {
120
+
@apply h-6 w-6 rounded-full;
121
+
}
104
122
105
-
.current {
106
-
@apply outline outline-ctp-overlay0;
107
-
}
123
+
.current {
124
+
@apply outline-ctp-overlay0 outline-solid;
125
+
}
108
126
109
-
.navbutton-left {
110
-
@apply rounded-l-xl py-2 pl-4 pr-2 outline outline-1 outline-ctp-overlay2/10 hover:bg-ctp-accent/50 active:bg-ctp-accent/80;
111
-
}
127
+
.navbutton-left {
128
+
@apply outline-ctp-overlay2/10 rounded-l-xl py-2 pr-2 pl-4 outline-1 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
129
+
}
112
130
113
-
.navbutton-center {
114
-
@apply p-2 outline outline-1 outline-ctp-overlay2/10 hover:bg-ctp-accent/50 active:bg-ctp-accent/80;
115
-
}
131
+
.navbutton-center {
132
+
@apply outline-ctp-overlay2/10 p-2 outline-1 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
133
+
}
116
134
117
-
.navbutton-right {
118
-
@apply rounded-r-xl py-2 pl-2 pr-4 outline outline-1 outline-ctp-overlay2/10 hover:bg-ctp-accent/50 active:bg-ctp-accent/80;
119
-
}
135
+
.navbutton-right {
136
+
@apply outline-ctp-overlay2/10 rounded-r-xl py-2 pr-4 pl-2 outline-1 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
137
+
}
120
138
121
-
div[title] {
122
-
@apply relative;
123
-
}
139
+
div[title] {
140
+
@apply relative;
141
+
}
124
142
125
-
div[title]:hover::after {
126
-
@apply absolute bottom-full left-1/2 whitespace-nowrap bg-ctp-surface0 text-ctp-text;
127
-
content: attr(title);
128
-
transform: translateX(-50%);
129
-
padding: 0.5rem;
130
-
border-radius: 0.25rem;
143
+
div[title]:hover::after {
144
+
@apply bg-ctp-surface0 text-ctp-text absolute bottom-full left-1/2 whitespace-nowrap;
145
+
content: attr(title);
146
+
transform: translateX(-50%);
147
+
padding: 0.5rem;
148
+
border-radius: 0.25rem;
149
+
}
131
150
}
+2
-8
src/entrypoints/popup/components/inputs/TextInput.svelte
+2
-8
src/entrypoints/popup/components/inputs/TextInput.svelte
···
7
7
label: string;
8
8
}
9
9
10
-
let {
11
-
id,
12
-
placeholder,
13
-
value = $bindable(),
14
-
onClick,
15
-
label
16
-
}: Props = $props();
10
+
let { id, placeholder, value = $bindable(), onClick, label }: Props = $props();
17
11
</script>
18
12
19
13
<div class="flex justify-center items-center w-full">
20
14
<input {id} class="w-full p-2 rounded-l-xl bg-ctp-surface0 text-ctp-text" bind:value {placeholder} type="text" />
21
-
<button class="p-2 rounded-r-xl bg-ctp-accent text-ctp-crust" type="submit" onclick={onClick}>{label}</button>
15
+
<button class="p-2 rounded-r-xl bg-(--ctp-accent) text-ctp-crust" type="submit" onclick={onClick}>{label}</button>
22
16
</div>
+2
-2
src/entrypoints/popup/routes/Home.svelte
+2
-2
src/entrypoints/popup/routes/Home.svelte
···
21
21
22
22
<button
23
23
class={settings.global
24
-
? "bg-ctp-green hover:bg-ctp-accent active:bg-ctp-red/75"
25
-
: "bg-ctp-red hover:bg-ctp-accent active:bg-ctp-green/75"}
24
+
? "bg-ctp-green hover:bg-(--ctp-accent) active:bg-ctp-red/75"
25
+
: "bg-ctp-red hover:bg-(--ctp-accent) active:bg-ctp-green/75"}
26
26
id="toggle"
27
27
onclick={globalToggle}
28
28
>{settings.global ? "enabled" : "disabled"}
+1
-1
src/entrypoints/popup/routes/Snippets.svelte
+1
-1
src/entrypoints/popup/routes/Snippets.svelte
···
108
108
removeUserSnippet(key);
109
109
}}>Remove</button>
110
110
<a href={snippet.url} target="_blank"
111
-
><button class="xsmall hover:bg-ctp-accent hover:text-ctp-mantle">Gist</button></a>
111
+
><button class="xsmall hover:bg-(--ctp-accent) hover:text-ctp-mantle">Gist</button></a>
112
112
</div>
113
113
{/each}
114
114
</div>
+24
-20
src/entrypoints/popup/routes/Themes.svelte
+24
-20
src/entrypoints/popup/routes/Themes.svelte
···
7
7
8
8
const flavours = ["latte", "frappe", "macchiato", "mocha"];
9
9
const accents = [
10
-
"rosewater",
11
-
"flamingo",
12
-
"pink",
13
-
"mauve",
14
-
"red",
15
-
"maroon",
16
-
"peach",
17
-
"yellow",
18
-
"green",
19
-
"teal",
20
-
"sky",
21
-
"sapphire",
22
-
"blue",
23
-
"lavender",
10
+
"bg-ctp-rosewater",
11
+
"bg-ctp-flamingo",
12
+
"bg-ctp-pink",
13
+
"bg-ctp-mauve",
14
+
"bg-ctp-red",
15
+
"bg-ctp-maroon",
16
+
"bg-ctp-peach",
17
+
"bg-ctp-yellow",
18
+
"bg-ctp-green",
19
+
"bg-ctp-teal",
20
+
"bg-ctp-sky",
21
+
"bg-ctp-sapphire",
22
+
"bg-ctp-blue",
23
+
"bg-ctp-lavender",
24
24
];
25
25
26
26
const logos = LOGO_INFO;
···
36
36
await globalSettings.setValue(settings);
37
37
}
38
38
39
+
function cleanAccent(accent: string) {
40
+
return accent.replace("bg-ctp-", "");
41
+
}
42
+
39
43
async function accentClicked(accent: string) {
40
-
settings.themeAccent = accent;
44
+
settings.themeAccent = cleanAccent(accent);
41
45
await globalSettings.setValue(settings);
42
46
}
43
47
···
63
67
<button
64
68
onclick={() => logoClicked(logoId)}
65
69
class:highlight={settings.themeLogo === logoId}
66
-
class="border border-ctp-accent p-2 flex flex-col items-center justify-between rounded-lg">
70
+
class="border border-(--ctp-accent) p-2 flex flex-col items-center justify-between rounded-lg">
67
71
<span>{logo.name}</span>
68
72
{#if logo.disable !== true}
69
73
{#if logo.adaptive}
···
94
98
<div id="palette">
95
99
{#each accents as accent (accent)}
96
100
<button
97
-
class="bg-ctp-{accent}"
98
-
class:current={settings.themeAccent === accent}
99
-
title={accent}
100
-
aria-label={accent}
101
+
class={accent}
102
+
class:current={settings.themeAccent === cleanAccent(accent)}
103
+
aria-label={cleanAccent(accent)}
104
+
title={cleanAccent(accent)}
101
105
onclick={() => accentClicked(accent)}></button>
102
106
{/each}
103
107
</div>
-26
tailwind.config.js
-26
tailwind.config.js
···
1
-
/** @type {import('tailwindcss').Config} */
2
-
module.exports = {
3
-
content: ["./src/**/*.{svelte,js,ts,jsx,tsx,html}"],
4
-
safelist: [
5
-
{
6
-
pattern: /bg-ctp-.+/,
7
-
},
8
-
"ctp-mocha",
9
-
"ctp-macchiato",
10
-
"ctp-frappe",
11
-
"ctp-latte",
12
-
],
13
-
theme: {
14
-
extend: {
15
-
colors: {
16
-
"ctp-accent": "rgba(var(--ctp-accent) , <alpha-value>)",
17
-
},
18
-
},
19
-
},
20
-
plugins: [
21
-
require("@catppuccin/tailwindcss")({
22
-
prefix: "ctp",
23
-
defaultFlavour: "mocha",
24
-
}),
25
-
],
26
-
};
+4
wxt.config.ts
+4
wxt.config.ts
···
1
1
import { defineConfig } from "wxt";
2
+
import tailwindcss from "@tailwindcss/vite";
2
3
3
4
// See https://wxt.dev/api/config.html
4
5
export default defineConfig({
···
17
18
srcDir: "src",
18
19
outDir: "dist",
19
20
modules: ["@wxt-dev/module-svelte"],
21
+
vite: () => ({
22
+
plugins: [tailwindcss()],
23
+
}),
20
24
});