Skip to content

Commit

Permalink
Merge pull request #952 from tutors-sdk/development
Browse files Browse the repository at this point in the history 
force Valentines theme for this week
  • Loading branch information
@edeleastar
edeleastar authored Feb 10, 2025
2 parents 05f5052 + d9a1445 commit 6a92272
Show file tree
Hide file tree
Showing 7 changed files with 312 additions and 8 deletions.
2 changes: 1 addition & 1 deletion src/lib/services/themes/icons/fluent-icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const FluentIconLib: IconLib = {
listOnline: { type: "fluent:people-list-24-filled", color: "primary" },
edit: { type: "typcn:edit", color: "primary" },
info: { type: "fluent:info-28-regular", color: "primary" },
close: { type: "fluent:add-square-32-regular", color: "primary" },
close: { type: "carbon:close-outline", color: "primary" },
theme: { type: "fluent:color-fill-24-regular", color: "success" },
codeTheme: { type: "fluent:paint-brush-sparkle-20-regular", color: "primary" },
default: { type: "fluent:re-order-dots-vertical-24-filled", color: "error" }
Expand Down
71 changes: 71 additions & 0 deletions src/lib/services/themes/icons/valentine-icons.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import type { IconLib } from "../types";

export const ValentineIcons: IconLib = {
// Home Icon
programHome: { type: "fluent:home-heart-32-filled", color: "success" },

// companion Icons
slack: { type: "logos:slack-icon", color: "error" },
moodle: { type: "academicons:moodle", color: "warning" },
youtube: { type: "fa:youtube", color: "error" },
video: { type: "fluent:video-clip-24-filled", color: "error" },
zoom: { type: "fluent:video-24-filled", color: "primary" },
teams: { type: "logos:microsoft-teams", color: "bg-base-content" },

// LoTypes icons
course: { type: "fluent:board-heart-24-filled", color: "primary" },
topic: { type: "line-md:heart-twotone", color: "secondary" },
unit: { type: "mdi:puzzle-heart", color: "tertiary" },
side: { type: "mdi:puzzle-heart", color: "success" },
talk: { type: "fluent:presenter-24-filled", color: "warning" },
reference: { type: "fluent:document-copy-24-filled", color: "surface" },
lab: { type: "fluent:beaker-24-filled", color: "error" },
note: { type: "fluent:notepad-16-regular", color: "success" },
archive: { type: "mdi:folder-heart", color: "error" },
web: { type: "tabler:world-heart", color: "primary" },
github: { type: "mdi:github", color: "warning" },
panelvideo: { type: "fluent:video-clip-24-regular", color: "error" },
paneltalk: { type: "fluent:presenter-24-filled", color: "primary" },
panelnote: { type: "fluent:notepad-16-regular", color: "warning" },

// pdf reader icons
left: { type: "fluent:ios-arrow-left-24-filled", color: "success" },
right: { type: "fluent:ios-arrow-right-24-filled", color: "success" },
print: { type: "fluent:print-24-filled", color: "success" },
rotate: { type: "fluent:arrow-rotate-clockwise-24-filled", color: "success" },
download: { type: "fluent:arrow-download-24-filled", color: "success" },
fullScreen: { type: "fluent:arrow-expand-24-filled", color: "success" },

// tutors time icons
online: { type: "fluent:presence-available-24-filled", color: "success" },
offline: { type: "fluent:presence-available-24-regular", color: "error" },
tutorsTime: { type: "fluent:clock-alarm-24-filled", color: "primary" },
timeExport: { type: "fluent:save-arrow-right-24-filled", color: "success" },
live: { type: "fluent:people-community-24-filled", color: "success" },

// app icons
search: { type: "bi:search-heart", color: "primary" },
tutors: { type: "fa-solid:chalkboard-teacher", color: "bg-base-content" },
logout: { type: "fluent:sign-out-24-filled", color: "error" },
lightMode: { type: "fluent:paint-brush-24-filled", color: "warning" },
light: { type: "fluent:weather-sunny-32-filled", color: "warning" },
dark: { type: "fluent:weather-moon-48-filled", color: "warning" },
toc: { type: "fluent:line-horizontal-3-20-filled", color: "bg-base-content" },
compacted: { type: "fluent:re-order-dots-vertical-24-filled", color: "success" },
expanded: { type: "fluent:re-order-dots-horizontal-24-filled", color: "success" },
portrait: { type: "fluent:rectangle-portrait-location-target-20-regular", color: "primary" },
circular: { type: "fluent:circle-sparkle-28-regular", color: "warning" },
landscape: { type: "fluent:rectangle-landscape-sparkle-48-regular", color: "error" },

courseinfo: { type: "fluent:info-28-regular", color: "bg-base-content" },
llm: { type: "hugeicons:ai-innovation-01", color: "bg-base-content" },
calendar: { type: "hugeicons:calendar-love-02", color: "bg-base-content" },
appSettings: { type: "fluent:settings-24-filled", color: "primary" },
listOnline: { type: "fluent:people-list-24-filled", color: "primary" },
edit: { type: "tabler:pencil-heart", color: "primary" },
info: { type: "fluent:info-28-regular", color: "primary" },
close: { type: "carbon:close-outline", color: "primary" },
theme: { type: "fluent:color-fill-24-regular", color: "success" },
codeTheme: { type: "fluent:paint-brush-sparkle-20-regular", color: "primary" },
default: { type: "fluent:re-order-dots-vertical-24-filled", color: "error" }
};
10 changes: 6 additions & 4 deletions src/lib/services/themes/services/themes.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { FestiveIcons } from "../icons/festive-icons";
import { makeItSnow, makeItStopSnowing } from "../events/festive.svelte";

import { rune } from "$lib/runes.svelte";
import { ValentineIcons } from "../icons/valentine-icons";

/**
* Implementation of the ThemeService interface.
Expand All @@ -22,6 +23,7 @@ export const themeService: ThemeService = {
/** Available themes with their associated icon libraries */
themes: [
{ name: "tutors", icons: FluentIconLib },
{ name: "valentines", icons: ValentineIcons },
{ name: "classic", icons: FluentIconLib },
{ name: "dyslexia", icons: FluentIconLib },
{ name: "nouveau", icons: FluentIconLib },
Expand Down Expand Up @@ -51,16 +53,16 @@ export const themeService: ThemeService = {
* @param forceMode - Optional display mode to enforce
*/
initDisplay(forceTheme?: string, forceMode?: string): void {
if (forceTheme && forceMode && !localStorage.forceTheme) {
if (forceTheme && forceMode && !localStorage[forceTheme]) {
this.setDisplayMode(forceMode);
this.setTheme(forceTheme);
localStorage.forceTheme = true;
localStorage[forceTheme] = true;
} else {
this.setDisplayMode(localStorage.modeCurrent);
this.setTheme(localStorage.theme);
this.setLayout(localStorage.layout);
this.setCardStyle(localStorage.cardStyle);
}
this.setLayout(localStorage.layout);
this.setCardStyle(localStorage.cardStyle);
},

/**
Expand Down
229 changes: 229 additions & 0 deletions src/lib/services/themes/styles/valentines.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
import type { Theme } from '@skeletonlabs/skeleton/themes';

const valentines = {
"name": "valentines",
"properties": {
"--type-scale-factor": "1.067",
"--type-scale-1": "calc(0.75rem * var(--type-scale-factor))",
"--type-scale-2": "calc(0.875rem * var(--type-scale-factor))",
"--type-scale-3": "calc(1rem * var(--type-scale-factor))",
"--type-scale-4": "calc(1.125rem * var(--type-scale-factor))",
"--type-scale-5": "calc(1.25rem * var(--type-scale-factor))",
"--type-scale-6": "calc(1.5rem * var(--type-scale-factor))",
"--type-scale-7": "calc(1.875rem * var(--type-scale-factor))",
"--type-scale-8": "calc(2.25rem * var(--type-scale-factor))",
"--type-scale-9": "calc(3rem * var(--type-scale-factor))",
"--type-scale-10": "calc(3.75rem * var(--type-scale-factor))",
"--type-scale-11": "calc(4.5rem * var(--type-scale-factor))",
"--type-scale-12": "calc(6rem * var(--type-scale-factor))",
"--type-scale-13": "calc(8rem * var(--type-scale-factor))",
"--base-font-color": "var(--color-surface-950)",
"--base-font-color-dark": "var(--color-surface-50)",
"--base-font-family": "system-ui, sans-serif",
"--base-font-size": "inherit",
"--base-line-height": "inherit",
"--base-font-weight": "normal",
"--base-font-style": "normal",
"--base-letter-spacing": "0em",
"--heading-font-color": "inherit",
"--heading-font-color-dark": "inherit",
"--heading-font-family": "inherit",
"--heading-font-weight": "bold",
"--heading-font-style": "normal",
"--heading-letter-spacing": "inherit",
"--anchor-font-color": "var(--color-primary-500)",
"--anchor-font-color-dark": "var(--color-primary-500)",
"--anchor-font-family": "inherit",
"--anchor-font-size": "inherit",
"--anchor-line-height": "inherit",
"--anchor-font-weight": "inherit",
"--anchor-font-style": "inherit",
"--anchor-letter-spacing": "inherit",
"--anchor-text-decoration": "none",
"--anchor-text-decoration-hover": "underline",
"--anchor-text-decoration-active": "none",
"--anchor-text-decoration-focus": "none",
"--space-scale-factor": "1",
"--radii-default": "6px",
"--radii-container": "12px",
"--border-width-default": "1px",
"--divide-width-default": "1px",
"--outline-width-default": "1px",
"--ring-width-default": "1px",
"--body-background-color": "var(--color-surface-50)",
"--body-background-color-dark": "var(--color-surface-950)",
"--color-primary-50": "255 165 208",
"--color-primary-100": "254 241 246", //
"--color-primary-200": "255 255 255",
"--color-primary-300": "218 80 138",
"--color-primary-400": "206 52 114",
"--color-primary-500": "194 24 91",
"--color-primary-600": "168 19 73",
"--color-primary-700": "143 14 55",
"--color-primary-800": "9 10 12",
"--color-primary-900": "81 0 0", //
"--color-primary-950": "66 0 0",
"--color-primary-contrast-dark": "var(--color-primary-950)",
"--color-primary-contrast-light": "var(--color-primary-50)",
"--color-primary-contrast-50": "var(--color-primary-contrast-dark)",
"--color-primary-contrast-100": "var(--color-primary-contrast-dark)",
"--color-primary-contrast-200": "var(--color-primary-contrast-dark)",
"--color-primary-contrast-300": "var(--color-primary-contrast-dark)",
"--color-primary-contrast-400": "var(--color-primary-contrast-dark)",
"--color-primary-contrast-500": "var(--color-primary-contrast-light)",
"--color-primary-contrast-600": "var(--color-primary-contrast-light)",
"--color-primary-contrast-700": "var(--color-primary-contrast-light)",
"--color-primary-contrast-800": "var(--color-primary-contrast-light)",
"--color-primary-contrast-900": "var(--color-primary-contrast-light)",
"--color-primary-contrast-950": "var(--color-primary-contrast-light)",
"--color-secondary-50": "255 255 255",
"--color-secondary-100": "254 241 246", //
"--color-secondary-200": "252 228 236",
"--color-secondary-300": "251 214 227",
"--color-secondary-400": "249 201 217",
"--color-secondary-500": "209 0 60", //
"--color-secondary-600": "223 164 185",
"--color-secondary-700": "198 141 161",
"--color-secondary-800": "173 117 138",
"--color-secondary-900": "81 0 0", //
"--color-secondary-950": "123 71 91",
"--color-secondary-contrast-dark": "var(--color-secondary-950)",
"--color-secondary-contrast-light": "var(--color-secondary-50)",
"--color-secondary-contrast-50": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-100": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-200": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-300": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-400": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-500": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-600": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-700": "var(--color-secondary-contrast-dark)",
"--color-secondary-contrast-800": "var(--color-secondary-contrast-light)",
"--color-secondary-contrast-900": "var(--color-secondary-contrast-light)",
"--color-secondary-contrast-950": "var(--color-secondary-contrast-light)",
"--color-tertiary-50": "255 255 255", //
"--color-tertiary-100": "254 241 246", //
"--color-tertiary-200": "207 92 148",
"--color-tertiary-300": "184 66 125",
"--color-tertiary-400": "160 40 102",
"--color-tertiary-500": "136 14 79",
"--color-tertiary-600": "117 11 63",
"--color-tertiary-700": "98 8 47",
"--color-tertiary-800": "79 6 32",
"--color-tertiary-900": "60 3 16",
"--color-tertiary-950": "41 0 0",
"--color-tertiary-contrast-dark": "var(--color-tertiary-950)",
"--color-tertiary-contrast-light": "var(--color-tertiary-50)",
"--color-tertiary-contrast-50": "var(--color-tertiary-contrast-dark)",
"--color-tertiary-contrast-100": "var(--color-tertiary-contrast-dark)",
"--color-tertiary-contrast-200": "var(--color-tertiary-contrast-dark)",
"--color-tertiary-contrast-300": "var(--color-tertiary-contrast-dark)",
"--color-tertiary-contrast-400": "var(--color-tertiary-contrast-light)",
"--color-tertiary-contrast-500": "var(--color-tertiary-contrast-light)",
"--color-tertiary-contrast-600": "var(--color-tertiary-contrast-light)",
"--color-tertiary-contrast-700": "var(--color-tertiary-contrast-light)",
"--color-tertiary-contrast-800": "var(--color-tertiary-contrast-light)",
"--color-tertiary-contrast-900": "var(--color-tertiary-contrast-light)",
"--color-tertiary-contrast-950": "var(--color-tertiary-contrast-light)",
"--color-success-50": "255 255 255", //
"--color-success-100": "254 241 246", //
"--color-success-200": "222 102 157",
"--color-success-300": "206 75 133",
"--color-success-400": "189 47 110",
"--color-success-500": "227 0 107", //
"--color-success-600": "150 16 70",
"--color-success-700": "127 12 52",
"--color-success-800": "103 8 35",
"--color-success-900": "81 0 0", //
"--color-success-950": "57 0 0",
"--color-success-contrast-dark": "var(--color-success-950)",
"--color-success-contrast-light": "var(--color-success-50)",
"--color-success-contrast-50": "var(--color-success-contrast-dark)",
"--color-success-contrast-100": "var(--color-success-contrast-dark)",
"--color-success-contrast-200": "var(--color-success-contrast-dark)",
"--color-success-contrast-300": "var(--color-success-contrast-dark)",
"--color-success-contrast-400": "var(--color-success-contrast-light)",
"--color-success-contrast-500": "var(--color-success-contrast-light)",
"--color-success-contrast-600": "var(--color-success-contrast-light)",
"--color-success-contrast-700": "var(--color-success-contrast-light)",
"--color-success-contrast-800": "var(--color-success-contrast-light)",
"--color-success-contrast-900": "var(--color-success-contrast-light)",
"--color-success-contrast-950": "var(--color-success-contrast-light)",
"--color-warning-50": "255 255 255", //
"--color-warning-100": "254 241 246", //
"--color-warning-200": "245 190 188",
"--color-warning-300": "239 165 163",
"--color-warning-400": "234 140 139",
"--color-warning-500": "231 118 171", //
"--color-warning-600": "203 92 95",
"--color-warning-700": "176 69 74",
"--color-warning-800": "150 46 54",
"--color-warning-900": "81 0 0", //
"--color-warning-950": "97 0 13",
"--color-warning-contrast-dark": "var(--color-warning-950)",
"--color-warning-contrast-light": "var(--color-warning-50)",
"--color-warning-contrast-50": "var(--color-warning-contrast-dark)",
"--color-warning-contrast-100": "var(--color-warning-contrast-dark)",
"--color-warning-contrast-200": "var(--color-warning-contrast-dark)",
"--color-warning-contrast-300": "var(--color-warning-contrast-dark)",
"--color-warning-contrast-400": "var(--color-warning-contrast-dark)",
"--color-warning-contrast-500": "var(--color-warning-contrast-dark)",
"--color-warning-contrast-600": "var(--color-warning-contrast-light)",
"--color-warning-contrast-700": "var(--color-warning-contrast-light)",
"--color-warning-contrast-800": "var(--color-warning-contrast-light)",
"--color-warning-contrast-900": "var(--color-warning-contrast-light)",
"--color-warning-contrast-950": "var(--color-warning-contrast-light)",
"--color-error-50": "255 255 255", //
"--color-error-100": "254 241 246", //
"--color-error-200": "237 126 114",
"--color-error-300": "229 100 91",
"--color-error-400": "220 73 69",
"--color-error-500": "215 38 56", //
"--color-error-600": "185 38 38",
"--color-error-700": "158 28 28",
"--color-error-800": "132 19 19",
"--color-error-900": "81 0 0", //
"--color-error-950": "79 0 0",
"--color-error-contrast-dark": "var(--color-error-950)",
"--color-error-contrast-light": "var(--color-error-50)",
"--color-error-contrast-50": "var(--color-error-contrast-dark)",
"--color-error-contrast-100": "var(--color-error-contrast-dark)",
"--color-error-contrast-200": "var(--color-error-contrast-dark)",
"--color-error-contrast-300": "var(--color-error-contrast-dark)",
"--color-error-contrast-400": "var(--color-error-contrast-dark)",
"--color-error-contrast-500": "var(--color-error-contrast-dark)",
"--color-error-contrast-600": "var(--color-error-contrast-light)",
"--color-error-contrast-700": "var(--color-error-contrast-light)",
"--color-error-contrast-800": "var(--color-error-contrast-light)",
"--color-error-contrast-900": "var(--color-error-contrast-light)",
"--color-error-contrast-950": "var(--color-error-contrast-light)",
"--color-surface-50": "255 255 255",
"--color-surface-100": "255 255 255",
"--color-surface-200": "232 234 237",
"--color-surface-300": "162 169 184",
"--color-surface-400": "77 84 101",
"--color-surface-500": "42 46 55",
"--color-surface-600": "33 36 43",
"--color-surface-700": "9 10 12",
"--color-surface-800": "18 19 23",
"--color-surface-900": "9 10 12",
"--color-surface-950": "9 10 12",
"--color-surface-contrast-dark": "var(--color-surface-950)",
"--color-surface-contrast-light": "var(--color-surface-50)",
"--color-surface-contrast-50": "var(--color-surface-contrast-dark)",
"--color-surface-contrast-100": "var(--color-surface-contrast-dark)",
"--color-surface-contrast-200": "var(--color-surface-contrast-dark)",
"--color-surface-contrast-300": "var(--color-surface-contrast-dark)",
"--color-surface-contrast-400": "var(--color-surface-contrast-light)",
"--color-surface-contrast-500": "var(--color-surface-contrast-light)",
"--color-surface-contrast-600": "var(--color-surface-contrast-light)",
"--color-surface-contrast-700": "var(--color-surface-contrast-light)",
"--color-surface-contrast-800": "var(--color-surface-contrast-light)",
"--color-surface-contrast-900": "var(--color-surface-contrast-light)",
"--color-surface-contrast-950": "var(--color-surface-contrast-light)"
},
"metadata": {
"version": "3.0.0"
}
} satisfies Theme;

export default valentines;
3 changes: 2 additions & 1 deletion src/lib/ui/navigators/footers/TutorsMessage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
onMount(async () => {
contentHtml = convertMdToHtml(
"An [Open Learning Web Toolkit](/course/tutors-reference-manual): Explore the [Tutors Catalogue](/catalogue)"
// "An [Open Learning Web Toolkit](/course/tutors-reference-manual): Explore the [Tutors Catalogue](/catalogue)"
"An [Open Learning Web Toolkit](/course/tutors-reference-manual): Alternative themes available on the Layout menu 💕 "
);
});
</script>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}
if (browser) {
themeService.initDisplay();
themeService.initDisplay("valentines", "dark");
}
</script>

Expand Down
3 changes: 2 additions & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import typography from "@tailwindcss/typography";
import { skeleton, contentPath } from "@skeletonlabs/skeleton/plugin";
import { nouveau, rose, cerberus } from "@skeletonlabs/skeleton/themes";
import tutors from "./src/lib/services/themes/styles/tutors";
import valentines from "./src/lib/services/themes/styles/valentines";
import classic from "./src/lib/services/themes/styles/classic";
import dyslexia from "./src/lib/services/themes/styles/dyslexia";
import type { Config } from "tailwindcss";
Expand Down Expand Up @@ -32,7 +33,7 @@ export default {
typography,
forms,
skeleton({
themes: [tutors, classic, dyslexia, nouveau, rose, cerberus]
themes: [tutors, valentines, classic, dyslexia, nouveau, rose, cerberus]
})
]
} satisfies Config;

0 comments on commit 6a92272

Please sign in to comment.