bugfix

.gitea/workflows/deploy.yaml

@@ -203,46 +203,23 @@ jobs:
             volumes:
                 - /data:/data
 
-        services:
-            mongo:
-                image: mongo:4.2
-                ports:
-                    - 27017:27017
-
-            maildev:
-                image: gitbase.de/robin/maildev:latest
-                ports:
-                    - 80:80
-                    - 25:25
-
-            tibi-server:
-                image: gitbase.de/cms/tibi-server
-                ports:
-                    - 8080:8080
-                env:
-                    DB_DIAL: mongodb://mongo
-                    API_PORT: 8080
-                    MAIL_HOST: maildev:25
-                    SECURITY_ALLOWABSOLUTEPATHS: "true"
-                    SECURITY_ALLOWUPPERPATHS: "true"
-                    SECURITY_ALLOWRELATIVEPATHS: "true"
-
-            live-server:
-                image: gitbase.de/robin/live-server:latest
-                ports:
-                    - 8081:8081
-
         steps:
             - uses: actions/checkout@v3
               with:
                   fetch-depth: 0
+                  lfs: true
+                  submodules: true
 
-            - name: setup node 18
+            - run: |
+                  git fetch --force --tags
+
+            # setup node 20
+            - name: setup node 20
               uses: actions/setup-node@v3
+              with:
+                  node-version: 20
 
             - name: install dependencies
-              env:
-                  FORCE_COLOR: "true"
               run: |
                   npm install -g yarn
                   yarn install
@@ -251,13 +228,16 @@ jobs:
               run: |
                   sed -i 's#\(sentryEnvironment.*\)".*"#\1"${GITHUB_REF_NAME}"#g' frontend/src/config.ts
                   sed -i 's#//\( sentry\\.init.*\)#\1#g' frontend/src/config.ts
-                  export $(cat .env | xargs)
-                  echo "PROJECT_RELEASE=${RELEASE_PROJECT_SLUG}.r`git rev-list HEAD --count`-`git describe --all --long | sed 's+/+-+'`" >> .env
-                  export $(cat .env | xargs)
+                  set -o allexport
+                  . ./.env
+                  echo "PROJECT_RELEASE=${SENTRY_PROJECT}.r`git rev-list HEAD --count`-`git describe --all --long | sed 's+/+-+'`" >> .env
+                  . ./.env
+                  set +o allexport
                   echo ______ .env ______
                   cat .env
                   echo
                   sed -i 's#\(const release = \).*#\1"'${PROJECT_RELEASE}'"#g' api/hooks/config-client.js
+                  sed -i 's#\(const originURL = \).*#\1"'${LIVE_URL}'"#g' api/hooks/config-client.js
 
                   # bash scripts/preload-meta.sh frontend/spa.html
                   # bash scripts/preload-meta.sh frontend/spa.html > frontend/_spa.html
@@ -267,11 +247,15 @@ jobs:
                   sed -i s/__TIMESTAMP__/$stamp/g frontend/spa.html
                   # sed -i s/__TIMESTAMP__/$stamp/g frontend/serviceworker.js
                   # cat frontend/serviceworker.js
-                  # rm api/templates/spa.html
-                  # cp frontend/spa.html api/templates/spa.html
+                  rm api/templates/spa.html
+                  cp frontend/spa.html api/templates/spa.html
                   echo ______ frontend/spa.html ______
                   cat frontend/spa.html
 
+                  # sed -i 's#\(PREVIEW_URL=\).*#\1'${LIVE_URL}/preview'#g' api/config.yml.env
+                  echo ______ api/config.yml.env ______
+                  cat api/config.yml.env
+
             - name: build
               env:
                   FORCE_COLOR: "true"

README.md

@@ -15,7 +15,7 @@ git filter-branch -f --index-filter 'git rm -rf --cached --ignore-unmatch .yarn/
 git filter-branch -f --index-filter 'git rm -rf --cached --ignore-unmatch docs' HEAD
 git push --force
 ```
-
+jbfdbcvjslksfdlkrljhfgdsnfhn
 - [ ] anpassen
 
   - `.env`

api/collections/fields/pagebuilder.yml

@@ -7,6 +7,11 @@ meta:
     folding:
         previewFolded: titleForWork
         previewUnfolded: titleForWork
+    metaElements:
+        - maxWidth
+        - iconBackgroundImage
+        - iconBackgroundTitle
+        - noGap
 subFields:
     - name: title
       type: string
@@ -42,6 +47,8 @@ subFields:
               previewFolded: contentType
               previewUnfolded: contentType
           direction: horizontal
+          metaElements:
+
       subFields:
           - name: contentType
             type: string
@@ -76,6 +83,7 @@ subFields:
             type: object
             meta:
                 label: Boxenliste
+                widget: containerLessObject
                 dependsOn:
                     eval: $parent.contentType == 'boxlist'
             subFields:
@@ -93,6 +101,7 @@ subFields:
             type: object
             meta:
                 label: Icon Informationsbrett
+                widget: containerLessObject
                 dependsOn:
                     eval: $parent.contentType == 'iconInfoBoard'
             subFields:

api/hooks/forms/post_return.js

@@ -67,8 +67,8 @@
     // @ts-ignore
     delete tempForm[undefined]
     context.smtp.sendMail({
-        to: "allkids.erfurt@gmail.com",
-        from: "mail@webmakers.de",
+        to: "info@allkids-erfurt.de",
+        from: "info@allkids-erfurt.de",
         subject: "AllKids " + formTitle,
         html: context.tpl.execute(context.fs.readFile("templates/form_mail.html"), {
             context: context,

api/hooks/lib/ssr.js

@@ -3,6 +3,7 @@ const { apiClientBaseURL } = require("../config-client")
 /**
  * convert object to string
  * @param {any} obj object
+ * @returns {Object | undefined}
  */
 function obj2str(obj) {
     if (Array.isArray(obj)) {

api/hooks/lib/utils.js

@@ -9,6 +9,7 @@ function log(str) {
 /**
  * convert object to string
  * @param {any} obj object
+ * @returns {Object | undefined}
  */
 function obj2str(obj) {
     if (Array.isArray(obj)) {
@@ -46,16 +47,22 @@ function clearSSRCache() {
     var info = context.db.deleteMany("ssr", {})
     context.response.header("X-SSR-Cleared", info.removed)
 }
-
+/**
+ * @param {{ [x: string]: any; }[]} dbObjs
+ */
 function calculateAverageDynamically(dbObjs) {
     const sumObj = {}
     let count = 0
 
-    dbObjs.forEach((obj) => {
+    dbObjs.forEach((/** @type {{ [x: string]: any; }} */ obj) => {
         accumulate(obj, sumObj)
         count++
     })
 
+    /**
+     * @param {{ [x: string]: any; }} sourceObj
+     * @param {{ [x: string]: any; }} targetObj
+     */
     function accumulate(sourceObj, targetObj) {
         for (const key in sourceObj) {
             if (typeof sourceObj[key] === "number") {
@@ -67,6 +74,9 @@ function calculateAverageDynamically(dbObjs) {
         }
     }
 
+    /**
+     * @param {{ [x: string]: any; }} targetObj
+     */
     function average(targetObj) {
         for (const key in targetObj) {
             if (typeof targetObj[key] === "number") {
@@ -81,6 +91,9 @@ function calculateAverageDynamically(dbObjs) {
     return sumObj
 }
 
+/**
+ * @param {string} url
+ */
 function run(url) {
     const response = context.http
         .fetch(url, {
@@ -133,6 +146,7 @@ function setUpQuery(subPath = "/") {
 
     let query = `${api}?`
     for (let key in parameters) {
+        // @ts-ignore
         query += `${key}=${parameters[key]}&`
     }
     query += params // Append other parameters without URL encoding

api/hooks/lighthouse/post_create.js

@@ -7,6 +7,7 @@ var { setUpQuery, calculateAverageDynamically, run } = require("../lib/utils")
     }
     let dbObjs = []
     urls.forEach((url) => {
+        console.log("URL:", url)
         dbObjs.push(run(url))
     })
     let dbObject = calculateAverageDynamically(dbObjs)

esbuild.config.admin.js

@@ -0,0 +1,22 @@
+const config = require("./esbuild.config.js")
+const svelteConfig = require("./svelte.config.js")
+
+config.options.minify = false
+config.options.entryPoints = ["./frontend/src/admin.ts"]
+config.options.outfile = "./" + config.distDir + "/admin.mjs"
+delete config.options.outdir
+config.options.splitting = false
+config.options.plugins = [
+    config.sveltePlugin({
+        compilerOptions: {
+            css: false,
+            hydratable: false,
+            dev: (process.argv?.length > 2 ? process.argv[2] : "build") !== "build",
+        },
+        preprocess: svelteConfig.preprocess,
+        cache: true,
+    }),
+    config.resolvePlugin,
+]
+
+module.exports = config

frontend/src/lib/components/Footer.svelte

@@ -16,8 +16,7 @@
                 </div>
                 <div class="lower">
                     <p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
-                    <p>Email: <a href="mailto:allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p>
-                    <p>Erstellt von: Robin Grenzdörfer</p>
+                    <p>Email: <a href="mailto:info@allkids-erfurt.de">info@allkids-erfurt.de</a></p>
                 </div>
             </div>
             <div class="social">
@@ -32,9 +31,8 @@
                     class="darklight"
                     on:click="{() => {
                         const body = document.querySelector('body')
-                        if (body) {
-                            body.classList.toggle('darkTheme')
-                        }
+                        if (body) body.classList.toggle('darkTheme')
+
                         $darkMode = !$darkMode
                     }}"
                 >

frontend/src/lib/components/header/mobile.svelte

@@ -104,16 +104,16 @@
             }}"
         >
              
-            <button class="img-logo-container">
+            <div class="img-logo-container">
                 <img src="/media/MädchenmitBlume.svg" alt="logo" />
-            </button>
+            </div>
             <div class="logo-text" id="logo-container">
                 <div id="upper">all kids</div>
                 <div id="lower">SO GÜNSTIG WIE NACHHALTIG</div>
             </div>
-            <button class="img-logo-container">
+            <div class="img-logo-container">
                 <img src="/media/Radfahrer.svg" alt="logo" />
-            </button>
+            </div>
         </button>
         <button
             class="button-three"

frontend/src/lib/components/pagebuilder/form/datepicker.svelte

@@ -2,7 +2,6 @@
     import { CalendarView } from "fluent-svelte"
     import type { Writable } from "svelte/store"
 
-
     export let groupTitle: string
     export let datePickerProps: DatePickerProps
     export let formValues: Writable<FormValues>
@@ -112,7 +111,395 @@
 </div>
 
 <style lang="less">
-    @import url("https://unpkg.com/fluent-svelte/theme.css");
+    /* Global Variables */
+    :root {
+        /* Accent Colors */
+        --fds-accent-light-3: 191, 98%, 80%;
+        --fds-accent-light-2: 199, 99%, 69%;
+        --fds-accent-light-1: 205, 100%, 49%;
+        --fds-accent-base: 206, 100%, 42%;
+        --fds-accent-dark-1: 209, 100%, 36%;
+        --fds-accent-dark-2: 215, 100%, 29%;
+        --fds-accent-dark-3: 226, 100%, 20%;
+
+        /* Font Families */
+        --fds-font-family-fallback: "Segoe UI", -apple-system, ui-sans-serif, system-ui, BlinkMacSystemFont, Helvetica,
+            Arial, sans-serif;
+        --fds-font-family-text: "Segoe UI Variable Text", "Seoge UI Variable Static Text",
+            var(--fds-font-family-fallback);
+        --fds-font-family-small: "Segoe UI Variable Small", "Seoge UI Variable Static Small",
+            var(--fds-font-family-fallback);
+        --fds-font-family-display: "Segoe UI Variable Display", "Seoge UI Variable Static Display",
+            var(--fds-font-family-fallback);
+
+        /* Font Size */
+        --fds-caption-font-size: 12px;
+        --fds-body-font-size: 14px;
+        --fds-body-large-font-size: 18px;
+        --fds-subtitle-font-size: 20px;
+        --fds-title-font-size: 28px;
+        --fds-title-large-font-size: 40px;
+        --fds-display-font-size: 68px;
+
+        /* Roundness */
+        --fds-control-corner-radius: 4px;
+        --fds-overlay-corner-radius: 8px;
+
+        /* Duration */
+        --fds-control-slow-duration: 333ms;
+        --fds-control-normal-duration: 250ms;
+        --fds-control-fast-duration: 167ms;
+        /* --fds-control-fast-after-duration: 168ms; */
+        --fds-control-faster-duration: 83ms;
+
+        /* Easing */
+        --fds-control-fast-out-slow-in-easing: cubic-bezier(0, 0, 0, 1);
+
+        /* Focus Stroke */
+        --fds-focus-stroke: 0 0 0 1px var(--fds-focus-stroke-inner), 0 0 0 3px var(--fds-focus-stroke-outer);
+
+        /* Acrylic */
+        --fds-acrylic-noise-asset: url("data:image/png;base64,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");
+        --fds-acrylic-blur-factor: blur(60px);
+    }
+
+    /* Reduced Motion Support */
+    @media (prefers-reduced-motion: reduce) {
+        :root {
+            --fds-control-slow-duration: 0ms;
+            --fds-control-normal-duration: 0ms;
+            --fds-control-fast-duration: 0ms;
+            /* --fds-control-fast-after-duration: 0ms; */
+            --fds-control-faster-duration: 0ms;
+        }
+    }
+
+    /* Light Theme Colors */
+    @media (prefers-color-scheme: light) {
+        :root {
+            /* Text */
+            --fds-text-primary: hsla(0, 0%, 0%, 89.56%);
+            --fds-text-secondary: hsla(0, 0%, 0%, 60.63%);
+            --fds-text-tertiary: hsla(0, 0%, 0%, 44.58%);
+            --fds-text-disabled: hsla(0, 0%, 0%, 36.14%);
+
+            /* Accent */
+            --fds-accent-default: hsl(var(--fds-accent-dark-1));
+            --fds-accent-secondary: hsla(var(--fds-accent-dark-1), 90%);
+            --fds-accent-tertiary: hsla(var(--fds-accent-dark-1), 80%);
+            --fds-accent-disabled: hsla(0, 0%, 0%, 21.69%);
+
+            /* Accent Text */
+            --fds-accent-text-primary: hsl(var(--fds-accent-dark-2));
+            --fds-accent-text-secondary: hsl(var(--fds-accent-dark-3));
+            --fds-accent-text-tertiary: hsl(var(--fds-accent-dark-1));
+            --fds-accent-text-disabled: hsla(0, 0%, 0%, 36.14%);
+
+            /* Text on Accent */
+            --fds-text-on-accent-primary: hsl(0, 0%, 100%);
+            --fds-text-on-accent-secondary: hsla(0, 0%, 100%, 70%);
+            --fds-text-on-accent-disabled: var(--fds-text-on-accent-secondary);
+            --fds-text-on-accent-selected: var(--fds-text-on-accent-primary);
+
+            /* Control Fill */
+            --fds-control-fill-transparent: transparent;
+            --fds-control-fill-default: hsla(0, 0%, 100%, 70%);
+            --fds-control-fill-secondary: hsla(0, 0%, 98%, 50%);
+            --fds-control-fill-tertiary: hsla(0, 0%, 98%, 30%);
+            --fds-control-fill-disabled: var(--fds-control-fill-tertiary);
+            --fds-control-fill-input-active: hsl(0, 0%, 100%);
+
+            /* Control Strong Fill */
+            --fds-control-strong-fill-default: hsla(0, 0%, 0%, 44.58%);
+            --fds-control-strong-fill-disabled: hsla(0, 0%, 0%, 31.73%);
+
+            /* Control Solid Fill */
+            --fds-control-solid-fill-default: hsl(0, 0%, 100%);
+
+            /* Control Alt Fill */
+            --fds-control-alt-fill-transparent: transparent;
+            --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 2.41%);
+            --fds-control-alt-fill-tertiary: hsla(0, 0%, 0%, 5.78%);
+            --fds-control-alt-fill-quarternary: hsla(0, 0%, 0%, 9.24%);
+            --fds-control-alt-fill-disabled: var(--fds-control-alt-fill-transparent);
+
+            /* Control on Image Fill */
+            --fds-control-on-image-fill-default: hsla(0, 0%, 100%, 79%);
+            --fds-control-on-image-fill-secondary: hsl(0, 0%, 95%);
+            --fds-control-on-image-fill-tertiary: hsl(0, 0%, 92%);
+            --fds-control-on-image-fill-disabled: transparent;
+
+            /* Subtle Fill */
+            --fds-subtle-fill-transparent: transparent;
+            --fds-subtle-fill-secondary: hsla(0, 0%, 0%, 3.73%);
+            --fds-subtle-fill-tertiary: hsla(0, 0%, 0%, 2.41%);
+            --fds-subtle-fill-disabled: var(--fds-subtle-fill-transparent);
+
+            /* Control Stroke */
+            --fds-control-stroke-default: hsla(0, 0%, 0%, 5.78%);
+            --fds-control-stroke-secondary: hsla(0, 0%, 0%, 16.22%);
+
+            /* Control Strong Stroke */
+            --fds-control-strong-stroke-default: hsla(0, 0%, 0%, 44.58%);
+            --fds-control-strong-stroke-disabled: hsla(0, 0%, 0%, 21.69%);
+
+            /* Control Stroke on Accent */
+            --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
+            --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 40%);
+            --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
+            --fds-control-stroke-on-accent-disabled: var(--fds-control-stroke-on-accent-default);
+
+            /* Control Strong Stroke on Image */
+            --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 100%, 35%);
+
+            /* Card Stroke */
+            --fds-card-stroke-default: hsla(0, 0%, 0%, 5.78%);
+            --fds-card-stroke-default-solid: hsl(0, 0%, 92%);
+
+            /* Surface Stroke */
+            --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
+            --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 5.78%);
+
+            /* Divider Stroke */
+            --fds-divider-stroke-default: hsla(0, 0%, 0%, 8.03%);
+
+            /* Focus Stroke */
+            --fds-focus-stroke-outer: hsla(0, 0%, 0%, 89.56%);
+            --fds-focus-stroke-inner: hsl(0, 0%, 100%);
+
+            /* Card Background */
+            --fds-card-background-default: hsla(0, 0%, 100%, 70%);
+            --fds-card-background-secondary: hsla(0, 0%, 96%, 50%);
+            /* --fds-card-background-tertiary: hsl(0, 0%, 100%); */
+
+            /* Smoke Background */
+            --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
+
+            /* Layer */
+            --fds-layer-background-default: hsla(0, 0%, 100%, 50%);
+            --fds-layer-background-alt: hsl(0, 0%, 100%);
+
+            /* Layer on Acrylic */
+            --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 25%);
+            --fds-layer-on-accent-acrylic-background-default: var(--fds-layer-on-acrylic-background-default);
+
+            /* Solid Background */
+            --fds-solid-background-base: hsl(0, 0%, 95%);
+            --fds-solid-background-secondary: hsl(0, 0%, 93%);
+            --fds-solid-background-tertiary: hsl(0, 0%, 98%);
+            --fds-solid-background-quarternary: hsl(0, 0%, 100%);
+
+            /* Mica Background */
+            /* --fds-mica-background-base: linear-gradient(0deg, hsla(0, 0%, 95%, 0.5), hsla(0, 0%, 95%, 0.5)), hsl(0, 0%, 95%); */
+
+            /* Acrylic Background */
+            --fds-acrylic-background-default: transparent, rgba(252, 252, 252, 85%);
+            --fds-acrylic-background-base: transparent, rgba(243, 243, 243, 90%);
+
+            /* Accent Acrylic Background */
+            /* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(153, 235, 255, 80%), rgba(153, 235, 255, 80%)), rgba(153, 235, 255, 90%); */
+            /* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(153, 235, 255, 80%), rgba(153, 235, 255, 80%)), rgba(153, 235, 255, 90%); */
+
+            /* System */
+            --fds-system-attention: hsl(209, 100%, 36%);
+            --fds-system-success: hsl(120, 78%, 27%);
+            --fds-system-caution: hsl(36, 100%, 31%);
+            --fds-system-critical: hsl(5, 75%, 44%);
+            --fds-system-neutral: hsla(0, 0%, 0%, 44.58%);
+
+            /* System Solid */
+            --fds-system-solid-neutral: hsl(0, 0%, 54%);
+
+            /* System Background */
+            --fds-system-background-attention: hsla(0, 0%, 96%, 50%);
+            --fds-system-background-success: hsl(115, 58%, 92%);
+            --fds-system-background-caution: hsl(47, 100%, 90%);
+            --fds-system-background-critical: hsl(355, 85%, 95%);
+
+            /* System Background Solid */
+            --fds-system-background-solid-attention: hsl(0, 0%, 97%);
+            --fds-system-background-solid-neutral: hsl(0, 0%, 95%);
+
+            /* Borders */
+            --fds-control-border-default: var(--fds-control-stroke-default) var(--fds-control-stroke-default)
+                var(--fds-control-stroke-secondary) var(--fds-control-stroke-default);
+
+            /* Shadows */
+            --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 4%);
+            --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 14%);
+            --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 14%);
+            --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 18.76%), 0px 2px 21px hsl(0, 0%, 0%, 14.74%);
+
+            /* Shell Shadows */
+            --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 18%), 0px 2px 10.67px hsla(0, 0%, 0%, 0.1474);
+            --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 28%), 0px 2px 21px hsla(0, 0%, 0%, 22%);
+        }
+    }
+
+    /* Dark Theme Colors */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            /* Text */
+            --fds-text-primary: hsla(0, 0%, 100%, 100%);
+            --fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
+            --fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
+            --fds-text-disabled: hsla(0, 0%, 100%, 36.28%);
+
+            /* Accent */
+            --fds-accent-default: hsla(var(--fds-accent-light-2));
+            --fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
+            --fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
+            --fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);
+
+            /* Accent Text */
+            --fds-accent-text-primary: hsl(var(--fds-accent-light-3));
+            --fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
+            --fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
+            --fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);
+
+            /* Text on Accent */
+            --fds-text-on-accent-primary: hsl(0, 0%, 0%);
+            --fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
+            --fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
+            --fds-text-on-accent-selected: hsl(0, 0%, 100%);
+
+            /* Control Fill */
+            --fds-control-fill-transparent: transparent;
+            --fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
+            --fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
+            --fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
+            --fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
+            --fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);
+
+            /* Control Strong Fill */
+            --fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
+            --fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);
+
+            /* Control Solid Fill */
+            --fds-control-solid-fill-default: hsl(0, 0%, 27%);
+
+            /* Control Alt Fill */
+            --fds-control-alt-fill-transparent: transparent;
+            --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
+            --fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
+            --fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
+            --fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);
+
+            /* Control on Image Fill */
+            --fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
+            --fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
+            --fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
+            --fds-control-on-image-fill-disabled: transparent;
+
+            /* Subtle Fill */
+            --fds-subtle-fill-transparent: transparent;
+            --fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
+            --fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
+            --fds-subtle-fill-disabled: transparent;
+
+            /* Control Stroke */
+            --fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
+            --fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);
+
+            /* Control Strong Stroke */
+            --fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
+            --fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);
+
+            /* Control Stroke on Accent */
+            --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
+            --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
+            --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
+            --fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);
+
+            /* Control Strong Stroke on Image */
+            --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);
+
+            /* Card Stroke */
+            --fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
+            --fds-card-stroke-default-solid: hsl(0, 0%, 11%);
+
+            /* Surface Stroke */
+            --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
+            --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);
+
+            /* Divider Stroke */
+            --fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);
+
+            /* Focus Stroke */
+            --fds-focus-stroke-outer: hsl(0, 0%, 100%);
+            --fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);
+
+            /* Card Background */
+            --fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
+            --fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
+            /* --fds-card-background-tertiary: unset; */
+
+            /* Smoke Background */
+            --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
+
+            /* Layer */
+            --fds-layer-background-default: hsla(0, 0%, 23%, 30%);
+            --fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
+
+            /* Layer on Acrylic */
+            --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
+            --fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
+
+            /* Solid Background */
+            --fds-solid-background-base: hsl(0, 0%, 13%);
+            --fds-solid-background-secondary: hsl(0, 0%, 11%);
+            --fds-solid-background-tertiary: hsl(0, 0%, 16%);
+            --fds-solid-background-quarternary: hsl(0, 0%, 17%);
+
+            /* Mica Background */
+            /* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
+
+            /* Acrylic Background */
+            --fds-acrylic-background-default: linear-gradient(0deg, rgb(44, 44, 44, 15%), rgb(44, 44, 44, 15%)),
+                rgba(44, 44, 44, 96%);
+            --fds-acrylic-background-base: linear-gradient(0deg, rgb(32, 32, 32, 50%), rgb(32, 32, 32, 50%)),
+                rgba(32, 32, 32, 96%);
+
+            /* Accent Acrylic Background */
+            /* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
+            /* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */
+
+            /* System */
+            --fds-system-attention: hsl(199, 100%, 69%);
+            --fds-system-success: hsl(113, 51%, 58%);
+            --fds-system-caution: hsl(54, 100%, 49%);
+            --fds-system-critical: hsl(354, 100%, 80%);
+            --fds-system-neutral: hsla(0, 0%, 100%, 54.42%);
+
+            /* System Solid */
+            --fds-system-solid-neutral: hsl(0, 0%, 62%);
+
+            /* System Background */
+            --fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
+            --fds-system-background-success: hsl(67, 39%, 17%);
+            --fds-system-background-caution: hsl(40, 46%, 18%);
+            --fds-system-background-critical: hsl(2, 28%, 21%);
+
+            /* System Background Solid */
+            --fds-system-background-solid-attention: hsl(0, 0%, 18%);
+            --fds-system-background-solid-neutral: hsl(0, 0%, 62%);
+
+            /* Borders */
+            --fds-control-border-default: var(--fds-control-stroke-secondary) var(--fds-control-stroke-default)
+                var(--fds-control-stroke-default) var(--fds-control-stroke-default);
+
+            /* Shadows */
+            --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
+            --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
+            --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
+            --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);
+
+            /* Shell Shadows */
+            --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37), 0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
+            --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56), 0px 2px 21px hsla(0, 0%, 0%, 0.55);
+        }
+    }
+
     .container {
         width: 100%;
         display: flex;

frontend/src/lib/components/pagebuilder/iconInfoBoard.svelte

@@ -21,10 +21,7 @@
     >
         <div class="header">
             <div class="icon">
-                <svg
-                    id="mySvgObject{i}"
-                    fill="var(--link-font-color)"
-                    data-src="{`${apiBaseURL}content/${pageId}/${col.iconInfoBoard.icon?.src}`}"></svg>
+                <img id="mySvgObject{i}" src="{`${apiBaseURL}content/${pageId}/${col.iconInfoBoard.icon?.src}`}" />
             </div>
             <div class="title">
                 {col.iconInfoBoard.title}
@@ -49,9 +46,9 @@
             align-items: center;
             gap: 20px;
             .icon {
-                width: 64px;
-                height: 64px;
-                svg {
+                width: 48px;
+                height: 48px;
+                img {
                     width: 100%;
                     height: 100%;
                     object-fit: contain;