support dark-mode

2023-04-25 19:24:20 +10:00
parent bc2a25346b
commit 2168e693d8
39 changed files with 464 additions and 625 deletions
--- a/public/assets/hamburger.svg
+++ b/public/assets/hamburger.svg
@@ -10,6 +10,6 @@
 </rdf:RDF>
 </metadata>
 <g transform="translate(0,-290.65)">
-<path transform="matrix(.26458 0 0 .26458 0 290.65)" d="m4 3c-1.108 0-2 0.89201-2 2s0.89201 2 2 2h16c1.108 0 2-0.89201 2-2s-0.89202-2-2-2h-16zm0 6.7773c-1.108 0-2 0.94178-2 2.1113s0.89201 2.1113 2 2.1113h16c1.108 0 2-0.94178 2-2.1113s-0.89201-2.1113-2-2.1113h-16zm0 7c-1.108 0-2 0.94178-2 2.1113s0.89203 2.1113 2 2.1113h16c1.108 0 2-0.94178 2-2.1113s-0.89203-2.1113-2-2.1113h-16z" fill="#333"/>
+<path transform="matrix(.26458 0 0 .26458 0 290.65)" d="m4 3c-1.108 0-2 0.89201-2 2s0.89201 2 2 2h16c1.108 0 2-0.89201 2-2s-0.89202-2-2-2h-16zm0 6.7773c-1.108 0-2 0.94178-2 2.1113s0.89201 2.1113 2 2.1113h16c1.108 0 2-0.94178 2-2.1113s-0.89201-2.1113-2-2.1113h-16zm0 7c-1.108 0-2 0.94178-2 2.1113s0.89203 2.1113 2 2.1113h16c1.108 0 2-0.94178 2-2.1113s-0.89203-2.1113-2-2.1113h-16z" fill="color"/>
 </g>
 </svg>
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -43,33 +43,20 @@ h4,
 h5,
 h6 {
    font-family: var(--header-font-family);
-    font-weight: 800;
-    margin-bottom: 0;
+    font-weight: var(--header-font-weight);
+    color: var(--header-color-text);
 }

-h1 {
-    font-size: 42px;
-}
-
-h2 {
-    font-size: 36px;
-}
-
-h3 {
-    font-size: 28px;
-}
-
-h4 {
-    font-size: 20px;
-}
-
-h5 {
-    font-size: 16px;
+@for $i from 1 through 6 {
+    h#{$i} {
+        font-size: var(--header-font-size-#{$i});
+        margin-bottom: #{calc(var(--header-font-size-#{$i}) / 2)};
+    }
 }

 a,
 a:visited {
-    color: var(--primary-color);
+    color: var(--link-color);
    text-decoration-thickness: 0.1em;
    text-decoration-color: var(--primary-color-light);

@@ -86,61 +73,28 @@ li,
 }

 p {
-    margin: 1rem 0;
+    margin: #{map-get($spacing, 5)} 0;
 }

 li {
-    margin-bottom: 16px;
+    margin-bottom: #{map-get($spacing, 1)};

    & + ul {
-        margin-top: -16px;
+        margin-top: -#{map-get($spacing, 1)};
    }
 }

-// Who knows why ion-icon randomally sets this to hidden.....
-// ion-icon {
-//     visibility: visible;
-// }
-
-// #app {
-//     display: flex;
-//     flex-direction: column;
-//     min-height: 100vh;
-// }
-
-// a,
-// a:visited {
-//     color: $primary-color;
-//     text-decoration: none;
-//     transition: color 0.1s, underline 0.1s;
-
-//     &:hover {
-//         color: $primary-color-dark;
-//         text-decoration: underline;
-//     }
-// }
-
-// h1 {
-//     text-align: left;
-//     font-weight: 800;
-// }
-
-// p {
-//     line-height: 1.5rem;
-//     margin-top: 0;
-// }
-
-// code {
-//     display: block;
-//     font-size: 0.8rem;
-//     background-color: #eee;
-//     padding: 1rem;
-//     border: 1px solid #ddd;
-//     white-space: pre-wrap;
-//     overflow-x: auto;
-//     max-height: 30rem;
-//     margin-bottom: 1rem;
-// }
+code {
+    display: block;
+    font-size: 80%;
+    background-color: var(--base-color);
+    padding: #{map-get($spacing, 3)};
+    border: 1px solid var(--base-color-border);
+    white-space: pre-wrap;
+    overflow-x: auto;
+    max-height: #{calc(map-get($spacing, 7) * 12)};
+    margin-bottom: #{map-get($spacing, 3)};
+}

 /* SM Dialog */
 .dialog-outer {
@@ -154,7 +108,7 @@ li {
    align-items: center;
    justify-content: center;
    z-index: 1000;
-    padding: 1rem;
+    padding: #{map-get($spacing, 2)};
 }

 .dialog-outer:last-of-type {
--- a/resources/css/utils.scss
+++ b/resources/css/utils.scss
@@ -15,17 +15,17 @@
    display: none;
 }

-// @media (prefers-color-scheme: dark) {
-//     .dark\:d-none {
-//         display: none !important;
-//     }
-// }
-
-// @media (prefers-color-scheme: light) {
-.light\:d-none {
-    display: none !important;
+@media (prefers-color-scheme: dark) {
+    .dark\:d-none {
+        display: none !important;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .light\:d-none {
+        display: none !important;
+    }
 }
-// }

 /* Width */
 .w-100 {
@@ -134,7 +134,7 @@
 }

 /* Padding */
-@each $index, $size in $spacer {
+@each $index, $size in $spacing {
    .p-#{$index} {
        padding: #{$size} !important;
    }
@@ -167,7 +167,7 @@
 }

 /* Margin */
-@each $index, $size in $spacer {
+@each $index, $size in $spacing {
    .m-#{$index} {
        margin: #{$size} !important;
    }
@@ -258,7 +258,6 @@
 small,
 .small {
    font-size: 70%;
-    line-height: 150%;
 }

 .italic {
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -1,55 +1,144 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Nunito:wght@400;700;800;1000&display=swap");

 :root {
-    // yes
-    --default-font-size: 18px;
+    --default-size: 1rem;
+    --default-font-size: var(--default-size);
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    // --default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
-    //     sans-serif;
+}

-    // yes
+/**
+* 0:    0       0px
+* 1:    0.25    4px
+* 2:    0.5     8px
+* 3:    1       16px
+* 4:    1.25    20px
+* 5:    1.5     24px
+* 6:    2       32px
+* 7:    2.5     40px
+*/
+$spacing: (
+    0: 0,
+    1: #{calc(var(--default-size) / 4)},
+    2: #{calc(var(--default-size) / 2)},
+    3: var(--default-size),
+    4: #{calc(var(--default-size) * 1.2)},
+    5: #{calc(var(--default-size) * 1.5)},
+    6: #{calc(var(--default-size) * 2)},
+    7: #{calc(var(--default-size) * 2.5)},
+);
+
+:root {
+    // Base
    --base-color: #eee;
    --base-color-text: #456;
+    --base-color-background: #fff;
    --base-color-border: #999;
    --base-color-light: #fff;
-
+    --base-color-lighter: #fff;
    --base-color-dark: #ddd;
    --base-color-darker: #999;

-    // yes
    --base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

    --link-color: var(--primary-color);

-    --primary-color-lighter: #cce8fb;
-    --primary-color-light: #67bbf4;
-
-    // yes
+    // Primary
    --primary-color: #35a5f1;
-    --primary-color-hover: #f1fdff;
-
+    --primary-color-light: #67bbf4;
+    --primary-color-lighter: #cce8fb;
    --primary-color-dark: #0e80ce;
    --primary-color-darker: #095589;

-    --danger-color-lighter: #f3c8c8;
-    --danger-color-light: #db5c5a;
-
-    // yes
+    // Danger
    --danger-color: #c82e2b;
-
+    --danger-color-light: #db5c5a;
+    --danger-color-lighter: #f3c8c8;
    --danger-color-dark: #952220;
    --danger-color-darker: #641715;

-    // yes
+    // Success
    --success-color: #198754;
+    --success-color-light: #26d081;
+    --success-color-lighter: #b5f1d5;
+    --success-color-dark: #12653e;
+    --success-color-darker: #0c4329;

-    // yes
-    --warning-color: #fff3cd;
+    // Warning
+    --warning-color: #ffecb5;
+    --warning-color-light: #fff3cd;
+    --warning-color-lighter: #fff8e2;
+    --warning-color-dark: #856404;
+    --warning-color-darker: #664d03;

+    // Header
    --header-font-family: "Montserrat", "Montserrat override", "Arial",
        "Helvetica", sans-serif;
+    --header-font-weight: 800;
+    --header-font-size-1: #{map-get($spacing, 7)};
+    --header-font-size-2: #{map-get($spacing, 6)};
+    --header-font-size-3: #{map-get($spacing, 5)};
+    --header-font-size-4: #{map-get($spacing, 4)};
+    --header-font-size-5: #{map-get($spacing, 3)};
+    --header-color-text: var(--base-color-text);

+    // Buttons
+    --button-font-family: var(--header-font-family);
+    --button-font-weight: 600;
+    --button-color: var(--base-color-light);
+    --button-color-text: var(--base-color-text);
+    --button-disabled-color: var(--base-color-dark);
+    --button-disabled-color-text: var(--base-color-light);
+    --button-dropdown-color-border: var(--base-color-border);
+    --button-dropdown-color: var(--base-color-background);
+    --button-dropdown-color-hover: var(--primary-color-lighter);
+    --button-primary-color: var(--primary-color);
+    --button-primary-color-text: var(--base-color-light);
+    --button-secondary-color: var(--base-color-darker);
+    --button-secondary-color-text: var(--base-color-light);
+    --button-danger-color: var(--danger-color);
+    --button-danger-color-text: var(--base-color-light);
+
+    // Card
+    --card-color: var(--base-color);
+    --card-color-text: var(--base-color-text);
+
+    // Hero
+    --hero-color-text: #fff;
+    --hero-caption-color: rgba(0, 0, 0, 0.5);
+    --hero-caption-color-text: #ddd;
+    --hero-caption-color-link: #eee;
+    --hero-shadow: 0 0 8px #000;
+
+    // Input
+    --input-clear-icon-color: var(--base-color-dark);
+    --input-clear-icon-color-hover: var(--base-color-light);
+
+    // Pagination
+    --pagination-color: var(--base-color-light);
+    --pagination-color-active: var(--primary-color);
+    --pagination-color-hover: var(--primary-color);
+    --pagination-color-disabled: var(--base-color);
+    --pagination-color-disabled-text: var(--base-color-darker);
+
+    // Tab
+    --tab-color: var(--base-color-light);
+    --tab-color-text: var(--base-color-text);
+    --tab-color-border: var(--base-color-border);
+
+    // Table
+    --table-color: var(--base-color-light);
+    --table-color-even: #f8f8f8;
+    --table-color-border: var(--base-color-border);
+    --table-color-hover: var(--table-color);
+
+    // Accents
+    --accent-1-color: #3d4e5d;
+    --accent-1-color-text: #e6f5eb;
+    --accent-2-color: #cce8fb;
+    --accent-2-color-text: #063954;
+
+    // SKIP BELOW
    --navbar-color: var(--base-color-light);
    --navbar-color-dropdown: var(--base-color-light);

@@ -59,14 +148,6 @@
    --footer-color-text: #888;
    --footer-color-border: rgba(0, 0, 0, 0.1);

-    // yes
-    --accent-1-color: #3d4e5d;
-    --accent-1-color-text: #e6f5eb;
-
-    // yes
-    --accent-2-color: #cce8fb;
-    --accent-2-color-text: #063954;
-
    // yes
    --banner-yellow-color: #ffd75a;
    --banner-yellow-color-text: #333;
@@ -78,90 +159,30 @@
    --banner-purple-color-text: #fff;
 }

-// @media (prefers-color-scheme: dark) {
-//     :root {
-//         // yes
-//         --base-color: #222;
-//         --base-color-text: rgba(255, 255, 255, 0.9);
-//         --base-color-border: #000;
-//         --base-color-light: #333;
+// --primary-color-hover: #f1fdff;

-//         // no
-//         --base-color-dark: #444;
-//         --base-color-darker: #999;
+@media (prefers-color-scheme: dark) {
+    :root {
+        // Base
+        --base-color: #222;
+        --base-color-text: #ccc;
+        --base-color-background: #eee;
+        --base-color-border: #999;
+        --base-color-light: #333;
+        --base-color-lighter: #444;
+        --base-color-dark: #666;
+        --base-color-darker: #999;

-//         --footer-color-text: #999;
-//         --footer-color-border: rgba(255, 255, 255, 0.1);
+        --button-color: var(--base-color-lighter);
+        --button-color-text: var(--base-color-background);
+        --button-primary-color-text: var(--base-color-background);
+        --button-secondary-color-text: var(--base-color-background);
+        --button-danger-color-text: var(--base-color-background);

-//         --primary-color-lighter: #095589;
-//         --primary-color-light: #0e80ce;
+        --footer-color-border: rgba(255, 255, 255, 0.1);

-//         // yes
-//         --primary-color: #35a5f1;
-
-//         --primary-color-dark: #67bbf4;
-//         --primary-color-darker: #cce8fb;
-
-//         --danger-color-lighter: #f3c8c8;
-//         --danger-color-light: #db5c5a;
-
-//         --danger-color: #db5c5a;
-//         --danger-color-dark: #952220;
-//         --danger-color-darker: #641715;
-
-//         // yes
-//         --accent-2-color: #063954;
-//         --accent-2-color-text: #cce8fb;
-//     }
-// }
-
-/* interim */
-$font-size: var(--default-font-size);
-
-/* old variables */
-
-$font-color: rgba(255, 255, 255, 1);
-$background-color: rgba(40, 44, 48, 1);
-
-$primary-color-lighter: #cce8fb;
-$primary-color-light: #67bbf4;
-$primary-color: #35a5f1;
-$primary-color-dark: #0e80ce;
-$primary-color-darker: #095589;
-
-$secondary-color: #9ca8b0;
-$secondary-color-dark: #6e7f8a;
-$secondary-color-darker: #49545c;
-
-$danger-color-lighter: #f3c8c8;
-$danger-color-light: #db5c5a;
-$danger-color: #c82e2b;
-$danger-color-dark: #952220;
-$danger-color-darker: #641715;
-
-$success-color-lighter: #b5f1d5;
-$success-color-light: #26d081;
-$success-color: #198754;
-$success-color-dark: #12653e;
-$success-color-darker: #0c4329;
-
-$warning-color-lighter: #fff8e2;
-$warning-color-light: #fff6d9;
-$warning-color: #fff3cd;
-$warning-color-dark: #ffd75a;
-$warning-color-darker: #ffc203;
-
-$border-color: #dddddd;
-$secondary-background-color: #efefef;
-
-$outline-color: rgba(0, 0, 0, 0.5);
-$outline-hover-color: #fff;
-
-$spacer: (
-    0: 0,
-    1: 0.5rem,
-    2: 0.75rem,
-    3: 1rem,
-    4: 1.5rem,
-    5: 3rem,
-);
+        // Accents
+        --accent-2-color: #063954;
+        --accent-2-color-text: #cce8fb;
+    }
+}
--- a/resources/js/components/SMAttachments.vue
+++ b/resources/js/components/SMAttachments.vue
@@ -62,7 +62,7 @@ const props = defineProps({

 <style lang="scss">
 .attachment-list {
-    border: 1px solid $secondary-color;
+    border: 1px solid var(--base-color);
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
@@ -109,11 +109,11 @@ const props = defineProps({

            a {
                display: block;
-                color: $secondary-color-dark;
+                color: var(--base-color-dark);
                transition: color 0.2s ease-in-out;

                &:hover {
-                    color: $primary-color-dark;
+                    color: var(--primary-color);
                }

                svg {
@@ -127,7 +127,7 @@ const props = defineProps({
        .attachment-file-size {
            width: 80px;
            font-size: 75%;
-            color: $secondary-color-dark;
+            color: var(--base-color-dark);
            white-space: nowrap;
            text-align: right;
            padding-right: 8px;
@@ -143,7 +143,7 @@ const props = defineProps({

        .attachment-download a,
        .attachment-file-size {
-            padding-left: 0.25rem;
+            padding-left: 8px;
        }
    }
 }
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -196,13 +196,14 @@ const handleClickItem = (item: string) => {
 <style lang="scss">
 .button {
    display: inline-block;
-    font-family: var(--header-font-family);
-    font-weight: 600;
+    font-family: var(--button-font-family);
+    font-weight: var(--button-font-weight);
    padding: 12px 32px 12px 32px;
    border: 0;
-    background-color: var(--base-color-light);
+    color: var(--button-color-text);
+    background-color: var(--button-color);
    text-decoration: none;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--base-shadow);
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
@@ -251,16 +252,16 @@ const handleClickItem = (item: string) => {
            margin: 0;
            padding: 0;
            background-color: inherit;
-            border-color: #999;
-            box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+            border-color: var(--button-dropdown-color-border);
+            box-shadow: var(--base-shadow);

            li {
                margin: 0;
                padding: 16px 24px;
-                background-color: #fff;
+                background-color: var(--button-dropdown-color);

                &:hover {
-                    background-color: var(--primary-color-hover);
+                    background-color: var(--button-dropdown-color-hover);
                }
            }
        }
@@ -280,7 +281,8 @@ const handleClickItem = (item: string) => {

    &:disabled,
    &.primary:disabled {
-        background-color: var(--base-color-dark) !important;
+        color: var(--button-disabled-color-text) !important;
+        background-color: var(--button-disabled-color) !important;
        box-shadow: none;
    }

@@ -296,24 +298,19 @@ const handleClickItem = (item: string) => {
        font-weight: 600;
    }

-    &.light {
-        background-color: #eee;
-        // color: #095589;
-        color: #333;
-    }
-
    &.primary {
-        background-color: var(--primary-color);
-        color: var(--base-color);
+        background-color: var(--button-primary-color);
+        color: var(--button-primary-color-text);
    }

    &.secondary {
-        background-color: #ccc;
+        background-color: var(--button-secondary-color);
+        color: var(--button-secondary-color-text);
    }

    &.danger {
-        background-color: var(--danger-color-light);
-        color: var(--base-color);
+        background-color: var(--button-danger-color);
+        color: var(--button-danger-color-text);
    }
 }

--- a/resources/js/components/SMCaptchaNotice.vue
+++ b/resources/js/components/SMCaptchaNotice.vue
@@ -8,9 +8,8 @@

 <style lang="scss">
 .captcha-notice {
-    color: $secondary-color;
+    color: var(base-color-text);
    font-size: 65%;
-    line-height: 1.2rem;
-    margin-bottom: map-get($spacer, 4);
+    margin-bottom: 16px;
 }
 </style>
--- a/resources/js/components/SMEditor.vue
+++ b/resources/js/components/SMEditor.vue
@@ -106,11 +106,11 @@ tinymce.PluginManager.add("gallery", function (editor) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
-            background-color: #fff;
+            background-color: var(--base-color-light);
            display: flex;
            justify-content: center;
            align-items: center;
-            font-size: 2rem;
+            font-size: 150%;
            color: black;
            padding: .25rem 1.5rem;
            border-radius: 12px;
@@ -877,20 +877,19 @@ const imageBrowser = (callback, value, meta, gallery = false) => {
            padding: 4px 8px;
            font-size: 90%;
            min-height: auto;
-            line-height: normal;
        }

        #image-library-search-button {
            border-width: 1px 1px 1px 0;
            border-style: solid;
-            border-color: #eee;
+            border-color: var(--base-color-border);
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            padding: 0 8px;
-            background-color: #eee;
+            background-color: var(--base-color);

            &:hover {
-                background-color: #ddd;
+                background-color: var(--base-color-dark);
            }
        }
    }
@@ -907,12 +906,12 @@ const imageBrowser = (callback, value, meta, gallery = false) => {
        button {
            display: flex;
            cursor: pointer;
-            background-color: #eee;
+            background-color: var(--base-color);
            border-radius: 6px;
            padding: 2px;

            &:hover {
-                background-color: #ddd;
+                background-color: var(--base-color-dark);
            }
        }
    }
@@ -960,11 +959,11 @@ const imageBrowser = (callback, value, meta, gallery = false) => {
            align-items: center;
            justify-content: center;
            border-radius: 50%;
-            color: #fff;
+            color: var(--base-color-light);
            box-shadow: 0 0 0 2px #fff;
            background-repeat: no-repeat;
            background-position: center;
-            background-color: #0060ce;
+            background-color: var(--primary-color);
        }

        .image-gallery-content-item-remove {
@@ -979,12 +978,12 @@ const imageBrowser = (callback, value, meta, gallery = false) => {
            align-items: center;
            justify-content: center;
            border-radius: 50%;
-            color: #fff;
-            box-shadow: 0 0 0 2px #fff;
+            color: var(--base-color-light);
+            box-shadow: var(--base-shadow);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50%;
-            background-color: #ce0000;
+            background-color: var(--danger-color);
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill:white"><path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z" /></svg>');
        }

@@ -1001,7 +1000,7 @@ const imageBrowser = (callback, value, meta, gallery = false) => {
            justify-content: center;
            border-radius: 50%;
            color: #fff;
-            box-shadow: 0 0 0 2px #fff;
+            box-shadow: var(--base-shadow);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 50%;
@@ -1108,7 +1107,6 @@ const imageBrowser = (callback, value, meta, gallery = false) => {
    justify-content: center;
    align-items: center;
    text-align: center;
-    line-height: 2rem;
 }

@keyframes spin {
--- a/resources/js/components/SMForm.vue
+++ b/resources/js/components/SMForm.vue
@@ -1,10 +1,10 @@
 <template>
    <form class="SMForm" @submit.prevent="handleSubmit">
-        <SMMessage
+        <!-- <SMMessage
            v-if="props.modelValue._message.length > 0"
            :message="props.modelValue._message"
            :type="props.modelValue._messageType"
-            :icon="props.modelValue._messageIcon" />
+            :icon="props.modelValue._messageIcon" /> -->

        <slot></slot>
    </form>
@@ -12,7 +12,6 @@

 <script setup lang="ts">
 import { provide } from "vue";
-import SMMessage from "./SMMessage.vue";

 const props = defineProps({
    modelValue: {
--- a/resources/js/components/SMHero.vue
+++ b/resources/js/components/SMHero.vue
@@ -133,16 +133,16 @@ handleLoad();
            font-size: 300%;
            margin-bottom: 20px;
            max-width: 550px;
-            color: #fff;
+            color: var(--hero-color-text);
            text-align: left;
-            text-shadow: 0 0 8px #000;
+            text-shadow: var(--hero-shadow);
        }

        p {
            max-width: 550px;
-            color: #fff;
+            color: var(--hero-color-text);
            text-align: left;
-            text-shadow: 0 0 8px #000;
+            text-shadow: var(--hero-shadow);
        }
    }

@@ -150,10 +150,10 @@ handleLoad();
        position: absolute;
        bottom: 14px;
        right: 30px;
-        color: #ccc;
+        color: var(--hero-caption-color-text);
        font-size: 80%;
        padding: 6px 12px;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--hero-caption-color);

        a {
            color: inherit;
@@ -162,7 +162,7 @@ handleLoad();

            &:hover {
                text-decoration: none;
-                color: #eee;
+                color: var(--hero-caption-color-link);
            }
        }
    }
--- a/resources/js/components/SMImageGallery.vue
+++ b/resources/js/components/SMImageGallery.vue
@@ -349,7 +349,7 @@ const hideNextArrow = computed(() => {
    display: block;
    justify-content: center;
    align-items: center;
-    font-size: 30px;
+    font-size: 150%;
    font-weight: bold;
    color: white;
    cursor: pointer;
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -494,20 +494,20 @@ const handleMediaSelect = async () => {
                right: 10px;
                top: 14px;
                color: var(--danger-color);
-                font-size: 28px;
+                font-size: 150%;
            }

            .clear-icon {
                position: absolute;
                right: 12px;
                top: 18px;
-                background-color: #ccc;
+                background-color: var(--input-clear-icon-color);
                border-radius: 50%;
                font-size: 80%;
                padding: 1px 1px 1px 0px;

                &:hover {
-                    color: #fff;
+                    color: var(--input-clear-icon-color-hover);
                }
            }

--- a/resources/js/components/SMInputAttachments.vue
+++ b/resources/js/components/SMInputAttachments.vue
@@ -143,10 +143,8 @@ handleLoad();
    label {
        position: relative;
        display: block;
-        padding: map-get($spacer, 2) map-get($spacer, 3) map-get($spacer, 0)
-            map-get($spacer, 3);
-        line-height: 1.5;
-        color: $secondary-color-dark;
+        padding: 8px 16px 0 16px;
+        color: var(--base-color);
    }

    a.button {
@@ -156,24 +154,24 @@ handleLoad();
    ul {
        list-style-type: none;
        padding: 0;
-        border: 1px solid $border-color;
+        border: 1px solid var(--base-color-border);

        li {
-            background-color: #fff;
+            background-color: var(--base-color-light);
            display: flex;
            align-items: center;
-            padding: map-get($spacer, 2);
+            padding: 16px;

            &.attachments-none {
                justify-content: center;

                ion-icon {
-                    font-size: 1.5rem;
+                    font-size: 115%;
                }

                p {
                    margin: 0;
-                    padding-left: 0.5rem;
+                    padding-left: #{map-get($spacing, 2)};
                }
            }

@@ -189,19 +187,19 @@ handleLoad();

            .attachment-media-size {
                font-size: 75%;
-                padding-left: 0.75rem;
-                color: $secondary-color-dark;
+                padding-left: #{map-get($spacing, 2)};
+                color: var(--base-color-dark);
            }

            .attachment-media-remove {
-                font-size: 1.5rem;
-                padding-top: 0.2rem;
-                margin-left: 1rem;
-                color: $font-color;
+                font-size: 115%;
+                padding-top: #{map-get($spacing, 1)};
+                margin-left: #{map-get($spacing, 3)};
+                color: var(--base-color-text);
                cursor: pointer;

                &:hover {
-                    color: $danger-color;
+                    color: var(--danger-color);
                }
            }
        }
--- a/resources/js/components/SMMastHead.vue
+++ b/resources/js/components/SMMastHead.vue
@@ -140,7 +140,6 @@ const tabs = () => {
            color: rgba(255, 255, 255, 0.8);
            font-family: var(--header-font-family);
            font-weight: 800;
-            font-size: 18px;
            text-decoration: none;
            padding: 16px 24px;
            white-space: nowrap;
@@ -174,14 +173,4 @@ const tabs = () => {
        }
    }
 }
-
-// @media (prefers-color-scheme: dark) {
-//     .masthead {
-//         background-color: var(--primary-color-light);
-
-//         .tabs .tab-item.active {
-//             color: var(--primary-color-light);
-//         }
-//     }
-// }
 </style>
--- a/resources/js/components/SMMessage.vue
+++ b/resources/js/components/SMMessage.vue
@@ -1,76 +0,0 @@
-<template>
-    <div class="message-container">
-        <div :class="['message', type]">
-            <ion-icon v-if="icon" :name="icon"></ion-icon>
-            <p>{{ message }}</p>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-    message: {
-        type: String,
-        default: "",
-    },
-    type: {
-        type: String,
-        default: "primary",
-    },
-    icon: {
-        type: String,
-        default: "",
-    },
-});
-</script>
-
-<style lang="scss">
-.message-container {
-    justify-content: center;
-    align-self: center;
-
-    .message {
-        display: flex;
-        padding: map-get($spacer, 2) map-get($spacer, 3);
-        margin-bottom: map-get($spacer, 4);
-        text-align: center;
-        font-size: 90%;
-        word-break: break-word;
-
-        &.primary {
-            background-color: $primary-color-lighter;
-            color: $primary-color-darker;
-            border: 1px solid $primary-color-lighter;
-            border-radius: 12px;
-        }
-
-        &.success {
-            background-color: $success-color-lighter;
-            color: $success-color-darker;
-            border: 1px solid $success-color-lighter;
-            border-radius: 12px;
-        }
-
-        &.error {
-            background-color: $danger-color-lighter;
-            color: $danger-color-darker;
-            border: 1px solid $danger-color-lighter;
-            border-radius: 12px;
-        }
-
-        ion-icon {
-            height: 1.3em;
-            width: 1.3em;
-            margin-right: map-get($spacer, 1);
-        }
-
-        p {
-            margin-bottom: 0;
-            justify-content: center;
-            align-self: center;
-            white-space: pre-wrap;
-            flex: 1;
-        }
-    }
-}
-</style>
--- a/resources/js/components/SMNavbar.vue
+++ b/resources/js/components/SMNavbar.vue
@@ -225,10 +225,6 @@ onUnmounted(() => {
            gap: 20px;
        }

-        .button {
-            color: #fff;
-        }
-
        #nav-toggle {
            padding: 24px;
            cursor: pointer;
@@ -276,11 +272,11 @@ onUnmounted(() => {
    }
 }

-// @media (prefers-color-scheme: dark) {
-//     .navbar #nav-head #nav-toggle {
-//         filter: invert(100%) saturate(0%) brightness(120%);
-//     }
-// }
+@media (prefers-color-scheme: dark) {
+    .navbar #nav-head #nav-toggle {
+        filter: invert(100%) saturate(0%) brightness(120%);
+    }
+}

@media only screen and (max-width: 768px) {
    #nav-toggle {
--- a/resources/js/components/SMPage.vue
+++ b/resources/js/components/SMPage.vue
@@ -117,11 +117,11 @@ if (
        align-items: center;
        font-size: 30vw;
        font-weight: 600;
-        color: #295b7e;
+        color: var(--primary-color);

        img {
            height: 25vw;
-            margin: 0 0.5rem 0 1rem;
+            margin: 0 #{map-get($spacing, 2)} 0 #{map-get($spacing, 3)};
        }
    }

@@ -131,7 +131,7 @@ if (

        h2 {
            margin-top: 0;
-            margin-bottom: 0.5rem;
+            margin-bottom: #{map-get($spacing, 2)};
        }
    }
 }
--- a/resources/js/components/SMPageFooter.vue
+++ b/resources/js/components/SMPageFooter.vue
@@ -124,25 +124,26 @@ import SMSocialIcons from "../components/SMSocialIcons.vue";
        filter: none;
    }

-    ul {
+    .footer-links ul {
        display: flex;
        flex-direction: row;
        padding: 0;
        list-style-type: none;
+        flex-wrap: wrap;
+        gap: 15px 30px;
+        justify-content: center;

        li {
-            padding: 0;
-            margin-left: 1rem;
-            margin-right: 1rem;
-            margin-bottom: 0;
+            margin: 0;
            text-align: center;
+            white-space: nowrap;
        }
    }

    .footer-text {
        p {
            padding: 0;
-            margin: 0 0 0.5rem 0;
+            margin: 0 0 #{map-get($spacing, 2)} 0;
        }

        p:last-of-type {
@@ -179,14 +180,14 @@ import SMSocialIcons from "../components/SMSocialIcons.vue";
@media only screen and (max-width: 864px) {
    .footer {
        .footer-text {
-            padding: 0 1rem;
+            padding: 0 #{map-get($spacing, 3)};
        }
        .footer-links ul {
            flex-direction: column;

            li {
                text-align: center;
-                margin-bottom: 0.5rem;
+                margin-bottom: #{map-get($spacing, 2)};
            }
        }
    }
@@ -198,8 +199,8 @@ import SMSocialIcons from "../components/SMSocialIcons.vue";
        margin-top: 0;

        li {
-            margin-top: 0.25rem;
-            margin-bottom: 0.25rem;
+            margin-top: #{map-get($spacing, 1)};
+            margin-bottom: #{map-get($spacing, 1)};
        }
    }
 }
--- a/resources/js/components/SMPagination.vue
+++ b/resources/js/components/SMPagination.vue
@@ -169,9 +169,9 @@ if (props.modelValue < 1 || totalPages < 1) {
    .item {
        display: flex;
        cursor: pointer;
-        background-color: var(--base-color-light);
+        background-color: var(--pagination-color);
        padding: 12px 16px;
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        // border-right: 1px solid rgba(0, 0, 0, 0.1);

        &.page {
            width: 44px;
@@ -179,7 +179,7 @@ if (props.modelValue < 1 || totalPages < 1) {
        }

        &.active {
-            background-color: var(--primary-color);
+            background-color: var(--pagination-color-active);
        }

        &:first-of-type {
@@ -199,13 +199,13 @@ if (props.modelValue < 1 || totalPages < 1) {
        }

        &:hover:not(.active):not(.disabled) {
-            background-color: var(--primary-color-hover);
+            background-color: var(--pagination-color-hover);
        }

        &.disabled {
            cursor: not-allowed;
-            color: var(--base-color-darker);
-            background-color: var(--base-color);
+            color: var(--pagination-color-disabled-text);
+            background-color: var(--pagination-color-disabled);
        }
    }
 }
@@ -226,10 +226,4 @@ if (props.modelValue < 1 || totalPages < 1) {
        }
    }
 }
-
-// @media (prefers-color-scheme: dark) {
-//     .pagination .item.active {
-//         background-color: var(--primary-color-light);
-//     }
-// }
 </style>
--- a/resources/js/components/SMTab.vue
+++ b/resources/js/components/SMTab.vue
@@ -19,8 +19,8 @@ const selectedLabel = inject("selectedLabel");

 <style lang="scss">
 .tab-content {
-    padding: map-get($spacer, 3);
-    background-color: #fff;
-    border: 1px solid $border-color;
+    padding: 32px;
+    background-color: var(--tab-color);
+    border: 1px solid var(--tab-color-border);
 }
 </style>
--- a/resources/js/components/SMTabGroup.vue
+++ b/resources/js/components/SMTabGroup.vue
@@ -25,10 +25,9 @@ provide("selectedLabel", selectedLabel);

 <style lang="scss">
 .tab-group {
-    margin-bottom: map-get($spacer, 4);
+    margin-bottom: 32px;

    .tab-header {
-        // border-bottom: 1px solid $border-color;
        list-style-type: none;
        margin: 0;
        padding: 0;
@@ -36,29 +35,29 @@ provide("selectedLabel", selectedLabel);

    .tab-item {
        display: inline-block;
-        padding: map-get($spacer, 2) map-get($spacer, 3);
+        padding: 16px 24px;
        border: 1px solid transparent;
        margin-bottom: -1px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
-        color: $primary-color;
+        color: var(--primary-color);
        transition: 0.2s all ease-out;

        &.selected {
-            color: $font-color;
-            background-color: #fff;
-            border-top: 1px solid $border-color;
-            border-left: 1px solid $border-color;
-            border-bottom: 1px solid #fff;
-            border-right: 1px solid $border-color;
+            color: var(--tab-color-text);
+            background-color: var(--tab-color);
+            border-top: 1px solid var(--tab-color-border);
+            border-left: 1px solid var(--tab-color-border);
+            border-bottom: 1px solid var(--tab-color);
+            border-right: 1px solid var(--tab-color-border);
        }

        &:hover:not(.selected) {
-            color: $primary-color-dark;
-            border-top: 1px solid $border-color;
-            border-left: 1px solid $border-color;
-            border-bottom: 1px solid #fff;
-            border-right: 1px solid $border-color;
+            color: var(--primary-color);
+            border-top: 1px solid var(--tab-color-border);
+            border-left: 1px solid var(--tab-color-border);
+            border-bottom: 1px solid var(--tab-color);
+            border-right: 1px solid var(--tab-color-border);
        }
    }
 }
--- a/resources/js/components/SMTable.vue
+++ b/resources/js/components/SMTable.vue
@@ -71,7 +71,7 @@ const hasClassLong = (text: unknown): boolean => {

 <style lang="scss">
 .table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--table-color-border);
    border-collapse: collapse;
    margin-bottom: 32px;
    width: 100%;
@@ -80,7 +80,7 @@ const hasClassLong = (text: unknown): boolean => {
    th {
        padding: 24px 16px;
        text-align: left;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid var(--table-color-border);
    }

    th {
@@ -90,7 +90,7 @@ const hasClassLong = (text: unknown): boolean => {

    td {
        font-size: 85%;
-        background-color: #fff;
+        background-color: var(--table-color);

        &.long {
            font-size: 75%;
@@ -101,7 +101,7 @@ const hasClassLong = (text: unknown): boolean => {
        tr {
            &:hover {
                td {
-                    background-color: var(--primary-color-hover);
+                    background-color: var(--table-color-hover);
                    cursor: pointer;
                }
            }
@@ -135,11 +135,11 @@ const hasClassLong = (text: unknown): boolean => {
    }

    .table tbody tr {
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid var(--table-color-border);

        td {
            border: none;
-            border-bottom: 1px solid #eee;
+            border-bottom: 1px solid var(--table-color-border);
            position: relative;
            padding: 8px 12px 8px 40%;
            white-space: normal;
@@ -168,7 +168,7 @@ const hasClassLong = (text: unknown): boolean => {
        }

        &:nth-child(even) td {
-            background-color: #f8f8f8;
+            background-color: var(--table-color-even);
        }
    }
 }
--- a/resources/js/components/SMToast.vue
+++ b/resources/js/components/SMToast.vue
@@ -104,7 +104,6 @@ onMounted(() => {

    p {
        margin-bottom: 0;
-        line-height: 1rem;
        word-wrap: break-word;
    }

--- a/resources/js/components/dialogs/SMDialogMedia.vue
+++ b/resources/js/components/dialogs/SMDialogMedia.vue
@@ -497,8 +497,8 @@ handleLoad();
        .media-browser-content {
            display: flex;
            height: 40vh;
-            border: 1px solid $border-color;
-            background-color: #fff;
+            border: 1px solid var(--base-color-border);
+            background-color: var(--base-color-light);
            justify-content: center;
            align-items: center;
            margin: 0 0 16px 0;
@@ -533,7 +533,7 @@ handleLoad();

                    &.selected,
                    &:hover {
-                        border-color: $primary-color-dark;
+                        border-color: var(--primary-color);
                    }

                    .media-image {
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -5,6 +5,11 @@ import { useApplicationStore } from "../store/ApplicationStore";
 import { updateSEOTags } from "../helpers/seo";

 export const routes = [
+    {
+        path: "/elements",
+        name: "elements",
+        component: () => import("@/views/Elements.vue"),
+    },
    {
        path: "/",
        name: "home",
--- a/resources/js/views/Article.vue
+++ b/resources/js/views/Article.vue
@@ -141,7 +141,7 @@ handleLoad();

@media only screen and (max-width: 768px) {
    .page-post-view .heading-image {
-        height: 10rem;
+        height: #{map-get($spacing, 3) * 10};
    }
 }
 </style>
--- a/resources/js/views/Blog.vue
+++ b/resources/js/views/Blog.vue
@@ -150,7 +150,8 @@ handleLoad();

        .article-card {
            text-decoration: none;
-            color: var(--base-color-text);
+            color: var(--card-color-text);
+            margin-bottom: 48px;

            &:hover {
                filter: none;
@@ -165,7 +166,7 @@ handleLoad();
                border-radius: 7px;
                background-position: center;
                background-size: cover;
-                background-color: var(--card-background-color);
+                background-color: var(--card-color);
                box-shadow: var(--base-shadow);
                margin-bottom: 24px;
            }
--- a/resources/js/views/Contact.vue
+++ b/resources/js/views/Contact.vue
@@ -55,7 +55,6 @@ import SMHeader from "../components/SMHeader.vue";
 .container-text {
    max-width: 800px;
    margin: 0 auto;
-    line-height: 1.4em;

    h3 {
        margin-top: 60px;
--- a/resources/js/views/Elements.vue
+++ b/resources/js/views/Elements.vue
@@ -0,0 +1,22 @@
+<template>
+    <SMRow>
+        <SMColumn style="gap: 15px">
+            <SMButton label="Button" />
+            <SMButton type="primary" label="Primary Button" />
+            <SMButton type="submit" label="Submit Button" />
+            <SMButton type="secondary" label="Secondary Button" />
+            <SMButton type="danger" label="Danger Button" />
+        </SMColumn>
+        <SMColumn style="gap: 15px">
+            <SMButton label="Button" disabled />
+            <SMButton type="primary" label="Primary Button" disabled />
+            <SMButton type="submit" label="Submit Button" disabled />
+            <SMButton type="secondary" label="Secondary Button" disabled />
+            <SMButton type="danger" label="Danger Button" disabled />
+        </SMColumn>
+    </SMRow>
+</template>
+
+<script setup lang="ts">
+import SMButton from "../components/SMButton.vue";
+</script>
--- a/resources/js/views/Event.vue
+++ b/resources/js/views/Event.vue
@@ -6,12 +6,6 @@
                backgroundImage: `url('${mediaGetVariantUrl(event.hero)}')`,
            }"></div>
        <SMContainer>
-            <SMMessage
-                v-if="formMessage"
-                icon="alert-circle-outline"
-                type="error"
-                :message="formMessage"
-                class="mt-5" />
            <SMContainer class="workshop-page">
                <div class="workshop-body">
                    <h2 class="workshop-title">{{ event.title }}</h2>
@@ -117,7 +111,6 @@ import { computed, Ref, ref } from "vue";
 import { useRoute } from "vue-router";
 import SMButton from "../components/SMButton.vue";
 import SMHTML from "../components/SMHTML.vue";
-import SMMessage from "../components/SMMessage.vue";
 import SMAttachments from "../components/SMAttachments.vue";
 import { api } from "../helpers/api";
 import { Event, EventResponse } from "../helpers/api.types";
@@ -137,11 +130,6 @@ const event: Ref<Event | null> = ref(null);
 const route = useRoute();
 const pageLoading = ref(true);

-/**
- * Page message.
- */
-const formMessage = ref("");
-
 /**
 * Page error.
 */
@@ -256,8 +244,6 @@ const computedAgeNotice = computed(() => {
 * Load the page data.
 */
 const handleLoad = async () => {
-    formMessage.value = "";
-
    try {
        let result = await api.get({
            url: "/events/{event}",
@@ -284,13 +270,7 @@ const handleLoad = async () => {
            pageError.value = 404;
        }
    } catch (error) {
-        if (error.status == 404) {
-            pageError.value = 404;
-        } else {
-            formMessage.value =
-                error.data?.message ||
-                "Could not load event information from the server.";
-        }
+        pageError.value = error.status;
    } finally {
        pageLoading.value = false;
    }
@@ -304,17 +284,17 @@ handleLoad();
    display: flex;
    justify-content: center;
    align-items: center;
-    min-height: map-get($spacer, 5) * 4;
+    min-height: 256px;
    height: 20vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
-    background-color: #eee;
+    background-color: var(--base-color);
    transition: background-image 0.2s;

    .workshop-image-loader {
-        font-size: 5rem;
-        color: $secondary-color;
+        font-size: 350%;
+        color: var(--base-color);
    }
 }

@@ -322,85 +302,75 @@ handleLoad();
    display: flex;
    flex-direction: row;

-    .workshop-body,
-    .workshop-info {
-        line-height: 1.5rem;
-    }
-
    .workshop-body {
        flex: 1;
        text-align: left;
    }

    .workshop-title {
-        line-height: 1.15em;
        margin-bottom: 32px;
    }

    .workshop-info {
-        width: 18rem;
-        margin-left: 2rem;
+        width: 288px;
+        margin-left: 32px;

        h4 {
-            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
-            height: 1rem;

            .icon {
                display: inline-block;
-                width: 1rem;
-                margin-right: 0.5rem;
+                font-size: 20px;
+                margin-right: 8px;
                text-align: center;
            }
        }

        p {
            margin: 0;
-            padding-left: 1.5rem;
+            padding-left: 28px;
            font-size: 90%;
        }

        .workshop-registration {
-            margin-top: 1.5rem;
-            line-height: 1.25rem;
+            margin-top: 32px;
        }

        .workshop-registration-none,
        .workshop-registration-soon,
        .workshop-registration-message {
-            border: 1px solid #ffeeba;
-            background-color: #fff3cd;
-            color: #856404;
+            border: 1px solid var(--warning-color-light);
+            background-color: var(--warning-color-lighter);
+            color: var(--warning-color-dark);
            text-align: center;
            font-size: 80%;
-            padding: 0.5rem;
+            padding: 8px;
        }

        .workshop-registration-closed,
        .workshop-registration-cancelled {
-            border: 1px solid #f5c2c7;
-            background-color: #f8d7da;
-            color: #842029;
+            border: 1px solid var(--danger-color-light);
+            background-color: var(--danger-color-lighter);
+            color: var(--danger-color-dark);
            text-align: center;
            font-size: 80%;
-            padding: 0.5rem;
+            padding: 8px;
        }

        .workshop-date,
        .workshop-location,
        .workshop-price,
        .workshop-ages {
-            padding: 0 1rem;
+            padding: 0 16px;
        }

        .workshop-ages p {
-            margin-top: 0.5rem;
-            margin-left: 1rem;
-            padding: 0 0 0 0.5rem;
+            margin-top: 8px;
+            margin-left: 16px;
+            padding: 0 0 0 8px;
            font-size: 80%;
-            border-left: 4px solid $warning-color;
-            line-height: 1.2rem;
+            border-left: 4px solid var(--warning-color-darker);
        }
    }
 }
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -131,11 +131,11 @@ import SMHero from "../components/SMHero.vue";
        h2 {
            font-size: 400%;
            text-align: center;
+            color: var(--accent-1-color-text);
        }

        p {
            font-size: 125%;
-            line-height: 150%;
        }
    }

@@ -150,15 +150,14 @@ import SMHero from "../components/SMHero.vue";

        p {
            font-size: 125%;
-            line-height: 150%;
-            max-width: 32rem;
+            max-width: #{calc(map-get($spacing, 6) * 16)};
            margin: 16px auto 32px auto;
        }

        img {
-            border-radius: 50rem;
-            height: 360px;
-            width: 360px;
+            border-radius: 50%;
+            height: #{calc(map-get($spacing, 5) * 15)};
+            width: #{calc(map-get($spacing, 5) * 15)};
        }

        .button {
@@ -179,11 +178,11 @@ import SMHero from "../components/SMHero.vue";
        h2 {
            font-size: 300%;
            text-align: center;
+            color: #f8f8f8;
        }

        p {
            font-size: 125%;
-            line-height: 150%;
            text-align: center;
            margin: 24px auto;
        }
@@ -231,11 +230,11 @@ import SMHero from "../components/SMHero.vue";
            font-size: 300%;
            text-align: center;
            margin-bottom: 16px;
+            color: var(--accent-2-color-text);
        }

        p {
            font-size: 125%;
-            line-height: 1.5em;
        }

        .button-row {
@@ -280,7 +279,7 @@ import SMHero from "../components/SMHero.vue";
                .minecraft-image {
                    float: none;
                    display: block;
-                    margin: 0 auto 1rem auto;
+                    margin: 0 auto #{map-get($spacing, 3)} auto;
                }
            }
        }
--- a/resources/js/views/Minecraft.vue
+++ b/resources/js/views/Minecraft.vue
@@ -106,10 +106,10 @@ const downloads = [
 <style lang="scss">
 .page-minecraft {
    h3 {
-        margin-bottom: 0.5rem;
+        margin-bottom: #{map-get($spacing, 2)};
    }
    li {
-        margin-bottom: 0.5rem;
+        margin-bottom: #{map-get($spacing, 2)};
    }
 }
 </style>
--- a/resources/js/views/Workshops.vue
+++ b/resources/js/views/Workshops.vue
@@ -1,95 +1,98 @@
 <template>
-    <SMMastHead title="Workshops" />
-    <SMContainer class="flex-grow-1">
-        <SMToolbar class="align-items-start">
-            <SMInput
-                v-model="filterKeywords"
-                label="Keywords"
-                @blur="handleFilter"
-                @keyup.enter="handleFilter" />
-            <SMInput
-                v-model="filterLocation"
-                label="Location"
-                @blur="handleFilter"
-                @keyup.enter="handleFilter" />
-            <SMInput
-                v-model="filterDateRange"
-                type="daterange"
-                label="Date Range"
-                :feedback-invalid="dateRangeError"
-                @blur="handleFilter"
-                @keyup.enter="handleFilter" />
-        </SMToolbar>
-        <SMPagination
-            v-if="postsTotal > postsPerPage"
-            v-model="postsPage"
-            :total="postsTotal"
-            :per-page="postsPerPage" />
-        <SMMessage
-            v-if="formMessage"
-            icon="alert-circle-outline"
-            type="error"
-            :message="formMessage"
-            class="mt-5" />
-
-        <SMLoading v-if="pageLoading" large />
-        <SMNoItems v-else-if="events.length == 0" text="No Workshops Found" />
-        <div v-else class="events">
-            <router-link
-                class="event-card"
-                v-for="event in events"
-                :key="event.id"
-                :to="{ name: 'event', params: { id: event.id } }">
-                <div
-                    class="thumbnail"
-                    :style="{
-                        backgroundImage: `url('${mediaGetVariantUrl(
-                            event.hero,
-                            'medium'
-                        )}')`,
-                    }">
-                    <div :class="['banner', event['bannerType']]">
-                        {{ event["banner"] }}
-                    </div>
-                    <div class="date">
-                        <div class="day">
-                            {{ formatDateDay(event.start_at) }}
+    <SMPage :error="pageError">
+        <SMMastHead title="Workshops" />
+        <SMContainer class="flex-grow-1">
+            <SMToolbar class="align-items-start">
+                <SMInput
+                    v-model="filterKeywords"
+                    label="Keywords"
+                    @blur="handleFilter"
+                    @keyup.enter="handleFilter" />
+                <SMInput
+                    v-model="filterLocation"
+                    label="Location"
+                    @blur="handleFilter"
+                    @keyup.enter="handleFilter" />
+                <SMInput
+                    v-model="filterDateRange"
+                    type="daterange"
+                    label="Date Range"
+                    :feedback-invalid="dateRangeError"
+                    @blur="handleFilter"
+                    @keyup.enter="handleFilter" />
+            </SMToolbar>
+            <SMPagination
+                v-if="postsTotal > postsPerPage"
+                v-model="postsPage"
+                :total="postsTotal"
+                :per-page="postsPerPage" />
+            <SMLoading v-if="pageLoading" large />
+            <SMNoItems
+                v-else-if="events.length == 0"
+                text="No Workshops Found" />
+            <div v-else class="events">
+                <router-link
+                    class="event-card"
+                    v-for="event in events"
+                    :key="event.id"
+                    :to="{ name: 'event', params: { id: event.id } }">
+                    <div
+                        class="thumbnail"
+                        :style="{
+                            backgroundImage: `url('${mediaGetVariantUrl(
+                                event.hero,
+                                'medium'
+                            )}')`,
+                        }">
+                        <div :class="['banner', event['bannerType']]">
+                            {{ event["banner"] }}
                        </div>
-                        <div class="month">
-                            {{ formatDateMonth(event.start_at) }}
+                        <div class="date">
+                            <div class="day">
+                                {{ formatDateDay(event.start_at) }}
+                            </div>
+                            <div class="month">
+                                {{ formatDateMonth(event.start_at) }}
+                            </div>
                        </div>
                    </div>
-                </div>
-                <div class="content">
-                    <h3 class="title">{{ event.title }}</h3>
-                    <SMRow class="date" no-responsive>
-                        <ion-icon name="calendar-outline" class="icon" />
-                        <div class="text">{{ computedDate(event) }}</div>
-                    </SMRow>
-                    <SMRow class="location" no-responsive>
-                        <ion-icon name="location-outline" class="icon" />
-                        <div class="text">{{ computedLocation(event) }}</div>
-                    </SMRow>
-                    <SMRow class="ages" no-responsive>
-                        <ion-icon name="body-outline" class="icon" />
-                        <div class="text">{{ computedAges(event.ages) }}</div>
-                    </SMRow>
-                    <SMRow class="price" no-responsive>
-                        <div class="icon">$</div>
-                        <div class="text">{{ computedPrice(event.price) }}</div>
-                    </SMRow>
-                </div>
-            </router-link>
-        </div>
-    </SMContainer>
+                    <div class="content">
+                        <h3 class="title">{{ event.title }}</h3>
+                        <SMRow class="date" no-responsive>
+                            <ion-icon name="calendar-outline" class="icon" />
+                            <div class="text">{{ computedDate(event) }}</div>
+                        </SMRow>
+                        <SMRow class="location" no-responsive>
+                            <ion-icon name="location-outline" class="icon" />
+                            <div class="text">
+                                {{ computedLocation(event) }}
+                            </div>
+                        </SMRow>
+                        <SMRow class="ages" no-responsive>
+                            <ion-icon name="body-outline" class="icon" />
+                            <div class="text">
+                                {{ computedAges(event.ages) }}
+                            </div>
+                        </SMRow>
+                        <SMRow class="price" no-responsive>
+                            <div class="icon">$</div>
+                            <div class="text">
+                                {{ computedPrice(event.price) }}
+                            </div>
+                        </SMRow>
+                    </div>
+                </router-link>
+            </div>
+        </SMContainer>
+    </SMPage>
 </template>

 <script setup lang="ts">
 import { reactive, ref, watch } from "vue";
 import SMInput from "../components/SMInput.vue";
-import SMMessage from "../components/SMMessage.vue";
 import SMPagination from "../components/SMPagination.vue";
 import SMToolbar from "../components/SMToolbar.vue";
+import SMPage from "../components/SMPage.vue";
 import { api } from "../helpers/api";
 import { Event, EventCollection } from "../helpers/api.types";
 import { SMDate } from "../helpers/datetime";
@@ -103,8 +106,6 @@ const pageLoading = ref(true);
 let events: Event[] = reactive([]);
 const dateRangeError = ref("");

-const formMessage = ref("123");
-
 const filterKeywords = ref("");
 const filterLocation = ref("");
 const filterDateRange = ref("");
@@ -112,6 +113,7 @@ const filterDateRange = ref("");
 const postsPerPage = 24;
 let postsPage = ref(1);
 let postsTotal = ref(0);
+const pageError = ref(0);

 /**
 * Load page data.
@@ -170,7 +172,6 @@ const handleLoad = async () => {
        }

        pageLoading.value = true;
-        formMessage.value = "";
        events = [];

        if (query["filter"].length > 0) {
@@ -248,11 +249,7 @@ const handleLoad = async () => {
            });
        }
    } catch (error) {
-        if (error.status != 404) {
-            formMessage.value =
-                error.response?.data?.message ||
-                "Could not load any events from the server.";
-        }
+        pageError.value = error.status;
    } finally {
        pageLoading.value = false;
    }
--- a/resources/js/views/dashboard/Dashboard.vue
+++ b/resources/js/views/dashboard/Dashboard.vue
@@ -98,7 +98,7 @@ const courseBoxTitle = computed(() => {
            padding: 32px;

            ion-icon {
-                font-size: 64px;
+                font-size: 350%;
            }

            img {
--- a/resources/js/views/dashboard/DiscordBotLogs.vue
+++ b/resources/js/views/dashboard/DiscordBotLogs.vue
@@ -2,8 +2,7 @@
    <SMPage :loading="formLoading" permission="logs/discord">
        <template #container>
            <h1>Discord Bot Logs</h1>
-            <SMMessage v-if="message" type="error" :message="message" />
-            <SMTabGroup v-if="!message">
+            <SMTabGroup>
                <SMTab label="Output">
                    <code v-if="logOutputContent.length > 0">{{
                        logOutputContent
@@ -15,7 +14,7 @@
                    }}</code>
                </SMTab>
            </SMTabGroup>
-            <SMButton v-if="!message" label="Reload Logs" @click="loadData" />
+            <SMButton label="Reload Logs" @click="loadData" />
        </template>
    </SMPage>
 </template>
@@ -23,20 +22,17 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import SMButton from "../../components/SMButton.vue";
-import SMMessage from "../../components/SMMessage.vue";
 import SMTab from "../../components/SMTab.vue";
 import SMTabGroup from "../../components/SMTabGroup.vue";
 import { api } from "../../helpers/api";
 import { LogsDiscordResponse } from "../../helpers/api.types";
+import { useToastStore } from "../../store/ToastStore";

 let formLoading = ref(false);
 let logOutputContent = ref("");
 let logErrorContent = ref("");
-let message = ref("");

 const loadData = async () => {
-    message.value = "";
-
    try {
        formLoading.value = true;
        const result = await api.get({ url: "/logs/discord" });
@@ -54,7 +50,11 @@ const loadData = async () => {
            }
        }
    } catch (error) {
-        message.value = "Could not load logs from server";
+        useToastStore().addToast({
+            title: "Server Error",
+            content: "Could not load logs from server",
+            type: "danger",
+        });
    } finally {
        formLoading.value = false;
    }
--- a/resources/js/views/dashboard/EventEdit.vue
+++ b/resources/js/views/dashboard/EventEdit.vue
@@ -407,8 +407,4 @@ const handleFailValidation = () => {
 loadData();
 </script>

-<style lang="scss">
-.page-event-edit {
-    background-color: #f8f8f8;
-}
-</style>
+<style lang="scss"></style>
--- a/resources/js/views/dashboard/PostEdit.vue
+++ b/resources/js/views/dashboard/PostEdit.vue
@@ -325,8 +325,4 @@ loadOptionsAuthors();
 loadData();
 </script>

-<style lang="scss">
-.page-post-edit {
-    background-color: #f8f8f8;
-}
-</style>
+<style lang="scss"></style>
--- a/resources/js/views/dashboard/PostList.vue
+++ b/resources/js/views/dashboard/PostList.vue
@@ -1,7 +1,6 @@
 <template>
-    <SMPage permission="admin/posts" class="page-post-list">
+    <SMPage permission="admin/posts" :page-error="pageError">
        <template #container>
-            <SMMessage v-if="formMessage" type="error" :message="formMessage" />
            <SMToolbar>
                <template #left>
                    <SMButton
@@ -63,7 +62,6 @@ import SMDialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMButton from "../../components/SMButton.vue";
 import SMInput from "../../components/SMInput.vue";
 import SMLoadingIcon from "../../components/SMLoadingIcon.vue";
-import SMMessage from "../../components/SMMessage.vue";
 import SMToolbar from "../../components/SMToolbar.vue";
 import { api } from "../../helpers/api";
 import { PostCollection, PostResponse } from "../../helpers/api.types";
@@ -83,7 +81,7 @@ const headers = [
 ];

 const items = ref([]);
-const formMessage = ref("");
+const pageError = ref(0);

 const formLoading = ref(false);
 const serverItemsLength = ref(0);
@@ -165,7 +163,7 @@ const loadFromServer = async () => {

        serverItemsLength.value = data.total;
    } catch (error) {
-        formMessage.value = error.data.message || "An unknown error occurred";
+        pageError.value = error.status;
    } finally {
        formLoading.value = false;
    }
@@ -302,8 +300,4 @@ const handleDelete = async (item) => {
 };
 </script>

-<style lang="scss">
-.page-post-list {
-    background-color: #f8f8f8;
-}
-</style>
+<style lang="scss"></style>
--- a/resources/js/views/dashboard/UserList.vue
+++ b/resources/js/views/dashboard/UserList.vue
@@ -1,15 +1,9 @@
 <template>
-    <SMPage permission="admin/users">
+    <SMPage permission="admin/users" :page-error="pageError">
        <SMMastHead
            title="Users"
            :back-link="{ name: 'dashboard' }"
            back-title="Return to Dashboard" />
-        <SMMessage
-            v-if="formMessage.message"
-            :icon="formMessage.icon"
-            :type="formMessage.type"
-            :message="formMessage.message" />
-
        <SMContainer>
            <SMTable
                :headers="headers"
@@ -34,14 +28,15 @@ import { reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { openDialog } from "../../components/SMDialog";
 import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
-import SMMessage from "../../components/SMMessage.vue";
 import { api } from "../../helpers/api";
 import { SMDate } from "../../helpers/datetime";
 import SMTable from "../../components/SMTable.vue";
 import SMMastHead from "../../components/SMMastHead.vue";
+import { useToastStore } from "../../store/ToastStore";

 const router = useRouter();
 const searchValue = ref("");
+const pageError = ref(0);

 const headers = [
    { text: "Username", value: "username", sortable: true },
@@ -55,12 +50,6 @@ const headers = [
 ];

 const items = ref([]);
-const formMessage = reactive({
-    icon: "",
-    type: "",
-    message: "",
-});
-
 const formLoading = ref(false);
 const serverItemsLength = ref(0);
 const serverOptions = ref({
@@ -76,9 +65,6 @@ const handleRowClick = (item) => {

 const loadFromServer = async () => {
    formLoading.value = true;
-    formMessage.type = "error";
-    formMessage.icon = "alert-circle-outline";
-    formMessage.message = "";

    try {
        let params = {};
@@ -163,10 +149,17 @@ const handleDelete = async (user) => {
            await api.delete(`users${user.id}`);
            loadFromServer();

-            formMessage.message = "User deleted successfully";
-            formMessage.type = "success";
+            useToastStore().addToast({
+                title: "User Deleted",
+                content: "User deleted successfully.",
+                type: "success",
+            });
        } catch (err) {
-            formMessage.message = err.response?.data?.message;
+            useToastStore().addToast({
+                title: "Server Error",
+                content: "User could not be deleted because an error occurred.",
+                type: "danger",
+            });
        }
    }
 };