Add valentines day theme

src/lib/services/themes/icons/fluent-icons.ts

@@ -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" }

src/lib/services/themes/icons/valentine-icons.ts

@@ -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" }
+};

src/lib/services/themes/services/themes.svelte.ts

@@ -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.
@@ -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 },

src/lib/services/themes/styles/valentines.ts

@@ -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;

tailwind.config.ts

@@ -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";
@@ -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;