From be436bff553e5a26984f3bf57f2a54f932cb1b74 Mon Sep 17 00:00:00 2001 From: emmaroche <20088680@mail.wit.ie> Date: Mon, 3 Feb 2025 11:18:45 +0000 Subject: [PATCH] Add valentines day theme --- src/lib/services/themes/icons/fluent-icons.ts | 2 +- .../services/themes/icons/valentine-icons.ts | 71 ++++++ .../services/themes/services/themes.svelte.ts | 2 + src/lib/services/themes/styles/valentines.ts | 229 ++++++++++++++++++ tailwind.config.ts | 3 +- 5 files changed, 305 insertions(+), 2 deletions(-) create mode 100644 src/lib/services/themes/icons/valentine-icons.ts create mode 100644 src/lib/services/themes/styles/valentines.ts diff --git a/src/lib/services/themes/icons/fluent-icons.ts b/src/lib/services/themes/icons/fluent-icons.ts index 73bc4126..845d231b 100644 --- a/src/lib/services/themes/icons/fluent-icons.ts +++ b/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" } diff --git a/src/lib/services/themes/icons/valentine-icons.ts b/src/lib/services/themes/icons/valentine-icons.ts new file mode 100644 index 00000000..47ea6127 --- /dev/null +++ b/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" } +}; diff --git a/src/lib/services/themes/services/themes.svelte.ts b/src/lib/services/themes/services/themes.svelte.ts index 786fa470..5a40bb29 100644 --- a/src/lib/services/themes/services/themes.svelte.ts +++ b/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 }, diff --git a/src/lib/services/themes/styles/valentines.ts b/src/lib/services/themes/styles/valentines.ts new file mode 100644 index 00000000..06109e2f --- /dev/null +++ b/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; \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 33897ccf..8c3604bd 100644 --- a/tailwind.config.ts +++ b/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;