refactor: resturcture files so that lincensing info can be bundled properly

scss/components/actor/_actor_header.scss

@@ -0,0 +1,53 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+
+.ds4-actor-header {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    gap: 1em;
+
+    &__img {
+        border: none;
+        cursor: pointer;
+        height: 100px;
+        width: 100px;
+    }
+
+    &__data {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__data-row {
+        align-content: center;
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        gap: 0.5em;
+        > * {
+            flex: 1;
+        }
+    }
+
+    &__name {
+        display: flex;
+        align-items: center;
+        border-bottom: 0;
+        margin: 0;
+    }
+
+    &__name-input[type="text"] {
+        @include mixins.font-heading-upper;
+        background-color: transparent;
+        border: none;
+        flex: 1;
+        font-size: 1.25em;
+        height: auto;
+    }
+}

scss/components/actor/_actor_progression.scss

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/colors";
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-actor-progression {
+    @include mixins.mark-invalid-or-disabled-input;
+    display: flex;
+    gap: 0.5em;
+
+    &__entry {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        gap: 0.25em;
+        justify-content: flex-end;
+    }
+
+    &__label {
+        @include mixins.font-heading-upper;
+        border: none;
+        color: colors.$c-light-grey;
+        margin: 0;
+        padding: 0;
+        text-align: right;
+    }
+
+    &__input {
+        flex: 0 0 5ch;
+
+        &--slayer-points {
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                -webkit-appearance: auto;
+            }
+            &:hover,
+            &:focus {
+                -moz-appearance: auto;
+            }
+        }
+    }
+}

scss/components/actor/_actor_properties.scss

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-actor-properties {
+    @include mixins.mark-invalid-or-disabled-input;
+    display: flex;
+    gap: 0.25em;
+
+    &__property {
+        flex: 1;
+    }
+
+    &__property-label {
+        font-size: 0.9em;
+        font-weight: bold;
+        white-space: nowrap;
+    }
+
+    &__property-select {
+        width: 100%;
+        height: var(--form-field-height);
+    }
+
+    &__property-multi-input {
+        display: flex;
+        gap: 0.125em;
+    }
+}

scss/components/actor/_actor_sheet.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-actor-sheet {
+    min-height: 625px;
+    min-width: 650px;
+}

scss/components/actor/_biography.scss

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-biography-tab-content {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    column-gap: 1em;
+}

scss/components/actor/_check.scss

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+
+.ds4-check {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+
+    &:hover {
+        @include mixins.foundry-highlight-text-shadow;
+    }
+}

scss/components/actor/_checks.scss

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-checks {
+    column-gap: 2em;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
+    row-gap: 0.25em;
+    white-space: nowrap;
+}

scss/components/actor/_combat_value.scss

@@ -0,0 +1,73 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-combat-value {
+    $size: 3.75rem;
+
+    display: grid;
+    place-items: center;
+    row-gap: 0.125em;
+
+    &__value {
+        $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
+        @include mixins.centered-content;
+
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        font-size: 1.5em;
+        height: $size;
+        width: $size;
+
+        &--hitPoints {
+            background-image: url("#{$combat-values-icons-path}/hit-points.png");
+        }
+        &--defense {
+            background-image: url("#{$combat-values-icons-path}/defense.png");
+        }
+        &--initiative {
+            background-image: url("#{$combat-values-icons-path}/initiative.png");
+        }
+        &--movement {
+            background-image: url("#{$combat-values-icons-path}/movement-rate.png");
+        }
+        &--meleeAttack {
+            background-image: url("#{$combat-values-icons-path}/melee-attack.png");
+        }
+        &--rangedAttack {
+            background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
+        }
+        &--spellcasting {
+            background-image: url("#{$combat-values-icons-path}/spellcasting.png");
+        }
+        &--targetedSpellcasting {
+            background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
+        }
+    }
+
+    &__label {
+        @include mixins.font-heading-upper;
+        font-size: 1.2em;
+        white-space: nowrap;
+    }
+
+    &__formula {
+        align-items: center;
+        justify-content: space-between;
+        display: flex;
+        gap: 0.15em;
+        text-align: center;
+        width: $size;
+    }
+
+    &__formula-base,
+    &__formula-modifier {
+        flex: 1 1 4em;
+    }
+}

scss/components/actor/_combat_values.scss

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/variables";
+
+.ds4-combat-values {
+    border-bottom: variables.$border-groove;
+    display: flex;
+    margin: variables.$margin-sm 0;
+    padding-bottom: variables.$margin-sm;
+    justify-content: space-between;
+}

scss/components/actor/_core_value.scss

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/colors";
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-core-value {
+    align-items: center;
+    display: flex;
+
+    &__label {
+        @include mixins.font-heading-upper;
+        flex: 1;
+        font-size: 2em;
+        text-align: center;
+    }
+
+    &__value {
+        align-items: center;
+        display: flex;
+        flex: 1.1;
+        font-size: 1.2em;
+        gap: 0.15em;
+        text-align: center;
+    }
+
+    &__value-input,
+    &__value-total {
+        flex: 1 1 4em;
+    }
+
+    &--trait {
+        .ds4-core-value__label {
+            -webkit-text-stroke: 1px colors.$c-black;
+            color: transparent;
+        }
+    }
+}

scss/components/actor/_core_values.scss

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/colors";
+@use "../../utils/variables";
+
+.ds4-core-values {
+    column-gap: 0.5em;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 0.5em;
+}

scss/components/actor/_currency.scss

@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/variables";
+
+.ds4-currency {
+    align-items: center;
+    display: flex;
+    gap: 1em;
+    margin: 0.5em 0;
+}
+
+.ds4-currency-title {
+    border-bottom: variables.$border-groove;
+    font-weight: bold;
+    margin-bottom: 0;
+    margin-top: 1em;
+    padding-left: 1em;
+}

scss/components/actor/_profile.scss

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-profile {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    &__entry {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    &__entry-input {
+        &--multiline {
+            resize: none;
+        }
+    }
+
+    &__entry-label {
+        font-size: 0.8em;
+        font-weight: bold;
+    }
+}

scss/components/actor/_talent_rank_equation.scss

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-talent-rank-equation {
+    display: flex;
+    gap: 0.5em;
+
+    &__value {
+        &[type="number"] {
+            background-color: transparent;
+            border: 0;
+            height: auto;
+            padding: 0;
+            text-align: center;
+        }
+    }
+}

scss/components/dice/_dice_total.scss

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/colors";
+
+// Needs to be nested in .dice-roll to win against foundry's style.css with respect to specificity
+.dice-roll .ds4-dice-total {
+    @mixin color-filter($rotation) {
+        filter: sepia(0.5) hue-rotate($rotation);
+    }
+
+    &--coup {
+        @include color-filter(60deg);
+        background-color: colors.$c-coup-bg;
+        color: colors.$c-coup;
+    }
+
+    &--fumble {
+        @include color-filter(-60deg);
+        background-color: colors.$c-fumble-bg;
+        color: colors.$c-fumble;
+    }
+}

scss/components/item/_item_header.scss

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/colors";
+@use "../../utils/mixins";
+
+.ds4-item-header {
+    align-items: center;
+    display: flex;
+    gap: 1em;
+
+    &__img {
+        border: none;
+        cursor: pointer;
+        height: 100px;
+        width: 100px;
+    }
+
+    &__data {
+        flex: 1;
+    }
+
+    &__type {
+        @include mixins.font-heading-upper;
+        border: none;
+        color: colors.$c-light-grey;
+        margin-bottom: 0;
+    }
+
+    &__name {
+        border: none;
+        margin: 0;
+    }
+
+    &__name-label {
+        display: none;
+    }
+
+    &__name-input[type="text"] {
+        @include mixins.font-heading-upper;
+        background-color: transparent;
+        border: none;
+        font-size: 1.25em;
+        height: auto;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

scss/components/item/_item_properties.scss

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-item-properties {
+    @include mixins.mark-invalid-or-disabled-input;
+
+    &__title {
+        border-bottom: variables.$border-groove;
+        font-weight: bold;
+        margin-bottom: 0;
+        margin-top: 1em;
+        padding-left: 1em;
+    }
+}

scss/components/item/_item_sheet.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-item-sheet {
+    min-height: 400px;
+    min-width: 540px;
+}

scss/components/shared/_control_button_group.scss

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-control-button-group {
+    display: flex;
+    text-align: center;
+    width: 100%;
+    padding: 0 calc(1em / 3);
+
+    &__button {
+        flex: 1;
+    }
+}

scss/components/shared/_editor.scss

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-form {
+    .editor {
+        height: 100%;
+
+        .tox {
+            .tox-toolbar-overlord,
+            .tox-toolbar__primary {
+                background: transparent;
+            }
+        }
+    }
+}

scss/components/shared/_embedded_document_list.scss

@@ -0,0 +1,155 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/mixins";
+@use "../../utils/variables";
+
+.ds4-embedded-document-list {
+    @include mixins.mark-invalid-or-disabled-input;
+
+    $row-height: 1.75em;
+
+    align-items: center;
+    display: grid;
+    grid-column-gap: 0.5em;
+    grid-row-gap: 0.2em;
+    margin: 0;
+    overflow-y: auto;
+    padding: 0.5em 0;
+
+    &--weapon {
+        grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 5ch;
+        :nth-child(9n + 1),
+        :nth-child(9n + 5),
+        :nth-child(9n + 6),
+        :nth-child(9n + 7) {
+            justify-self: center;
+        }
+    }
+    &--armor {
+        grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 5ch;
+        :nth-child(9n + 1),
+        :nth-child(9n + 7) {
+            justify-self: center;
+        }
+    }
+    &--shield {
+        grid-template-columns: $row-height $row-height 3ch 1fr 3ch 3fr 5ch;
+        :nth-child(7n + 1),
+        :nth-child(7n + 5) {
+            justify-self: center;
+        }
+    }
+    &--equipment {
+        grid-template-columns: $row-height $row-height 3ch 1fr 10ch 3fr 5ch;
+        :nth-child(7n + 1) {
+            justify-self: center;
+        }
+    }
+    &--loot {
+        grid-template-columns: $row-height 3ch 1fr 10ch 3fr 5ch;
+    }
+    &--spell {
+        grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 5ch;
+        :nth-child(9n + 1),
+        :nth-child(9n + 4),
+        :nth-child(9n + 6),
+        :nth-child(9n + 7),
+        :nth-child(9n + 8) {
+            justify-self: center;
+        }
+    }
+    &--talent {
+        grid-template-columns: $row-height 1fr 21ch 3fr 5ch;
+        :nth-child(9n + 3) {
+            justify-self: center;
+        }
+    }
+    &--racial-ability,
+    &--language,
+    &--alphabet,
+    &--special-creature-ability {
+        grid-template-columns: $row-height 1fr 3fr 5ch;
+    }
+
+    &--effect {
+        grid-template-columns: $row-height $row-height $row-height 3fr 2fr $row-height 5ch;
+        :nth-child(7n + 1),
+        :nth-child(7n + 2),
+        :nth-child(7n + 6) {
+            justify-self: center;
+        }
+    }
+
+    &--item-effect {
+        grid-template-columns: $row-height 1fr 5ch;
+    }
+
+    &__row {
+        display: contents; // TODO: Once chromium supports `grid-template-columns: subgrid` (https://bugs.chromium.org/p/chromium/issues/detail?id=618969), switch to `display: grid; grid: 1/-1; grid-template-columns: subgrid`
+
+        &--header {
+            font-weight: bold;
+        }
+
+        > * {
+            height: $row-height;
+            line-height: $row-height;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &__image {
+        border: none;
+    }
+
+    &__editable {
+        &[type="text"],
+        &[type="number"] {
+            background-color: transparent;
+            border: 0;
+            padding: 0;
+        }
+
+        &--checkbox {
+            &[type="checkbox"] {
+                width: 100%;
+                height: 100%;
+                margin: 0px;
+            }
+        }
+    }
+
+    &__description {
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        :not(:first-child) {
+            display: none;
+        }
+
+        > * {
+            font-size: 0.75em;
+            margin: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    &__clickable {
+        cursor: pointer;
+    }
+}
+
+.ds4-embedded-document-list-title {
+    border-bottom: variables.$border-groove;
+    font-weight: bold;
+    margin-bottom: 0;
+    margin-top: 1em;
+    padding-left: 1em;
+}

scss/components/shared/_rollable_image.scss

@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-rollable-image {
+    position: relative;
+
+    &--rollable {
+        cursor: pointer;
+
+        &:hover {
+            .ds4-rollable-image__image {
+                opacity: 0.25;
+            }
+
+            .ds4-rollable-image__overlay {
+                opacity: 1;
+            }
+        }
+    }
+
+    &__image {
+        border: none;
+        transition: 0.1s ease;
+    }
+
+    &__overlay {
+        border: none;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: 0.1s ease;
+    }
+}

scss/components/shared/_sheet_body.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-body {
+    height: 100%;
+    overflow-y: auto;
+}

scss/components/shared/_sheet_form.scss

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-form {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    font-family: var(--ds4-font-primary);
+    height: 100%;
+}

scss/components/shared/_sheet_tab.scss

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-sheet-tab {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 100%;
+
+    &[data-tab].active {
+        display: flex;
+    }
+
+    > * {
+        flex-shrink: 0;
+    }
+}

scss/components/shared/_sheet_tab_nav.scss

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "../../utils/variables";
+
+.ds4-sheet-tab-nav {
+    border-bottom: variables.$border-groove;
+    border-top: variables.$border-groove;
+    display: flex;
+    flex-wrap: nowrap;
+    height: calc(2 * var(--line-height-16));
+    justify-content: space-around;
+    line-height: calc(2 * var(--line-height-16));
+    margin: variables.$margin-sm 0;
+
+    &__item {
+        flex: 0 1 auto !important; // necessary to override the styling from lang-de, see https://gitlab.com/henry4k/foundryvtt-lang-de/-/issues/9
+        font-weight: bold;
+        white-space: nowrap;
+
+        &.active {
+            text-shadow: 0 0 variables.$padding-md var(--color-shadow-primary);
+        }
+    }
+}

scss/ds4.scss

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+// global
+@use "global/accessibility";
+@use "global/fonts";
+
+// shared
+@use "components/shared/control_button_group";
+@use "components/shared/editor";
+@use "components/shared/embedded_document_list";
+@use "components/shared/rollable_image";
+@use "components/shared/sheet_body";
+@use "components/shared/sheet_form";
+@use "components/shared/sheet_tab_nav";
+@use "components/shared/sheet_tab";
+
+// actor
+@use "components/actor/actor_header";
+@use "components/actor/actor_progression";
+@use "components/actor/actor_properties";
+@use "components/actor/actor_sheet";
+@use "components/actor/biography";
+@use "components/actor/check";
+@use "components/actor/checks";
+@use "components/actor/combat_value";
+@use "components/actor/combat_values";
+@use "components/actor/core_value";
+@use "components/actor/core_values";
+@use "components/actor/currency";
+@use "components/actor/profile";
+@use "components/actor/talent_rank_equation";
+
+// item
+@use "components/item/item_header";
+@use "components/item/item_properties";
+@use "components/item/item_sheet";
+
+// dice
+@use "components/dice/dice_total";

scss/global/_accessibility.scss

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Oliver Rümpelein
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.ds4-hidden {
+    display: none;
+}

scss/global/_fonts.scss

@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@font-face {
+    font-display: swap;
+    font-family: "Lora";
+    font-style: normal;
+    font-weight: normal;
+    src: local("Lora"), url("../fonts/Lora/Lora.woff") format("woff");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Lora";
+    font-style: normal;
+    font-weight: bold;
+    src: local("Lora"), url("../fonts/Lora/Lora-Bold.woff") format("woff");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Lora";
+    font-style: italic;
+    font-weight: normal;
+    src: local("Lora"), url("../fonts/Lora/Lora-Italic.woff") format("woff");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Lora";
+    font-style: italic;
+    font-weight: bold;
+    src: local("Lora"), url("../fonts/Lora/Lora-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "Wood Stamp";
+    font-style: normal;
+    font-weight: normal;
+    src: local("Wood Stamp"), url("../fonts/Woodstamp/Woodstamp.woff") format("woff");
+}
+
+:root {
+    --ds4-font-primary: Lora, serif;
+    --ds4-font-heading: "Wood Stamp", sans-serif;
+}

scss/utils/_colors.scss

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+$c-white: #fff;
+$c-black: #000;
+$c-light-grey: #777;
+$c-border-groove: #eeede0;
+$c-invalid-input: rgba(lightcoral, 50%);
+$c-coup: #18520b;
+$c-coup-bg: #acc2a7;
+$c-fumble: #aa0200;
+$c-fumble-bg: #d8b5ba;

scss/utils/_mixins.scss

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ * SPDX-FileCopyrightText: 2021 Gesina Schwalbe
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "./colors";
+
+@mixin centered-content {
+    display: grid;
+    place-items: center;
+}
+
+@mixin mark-invalid-or-disabled-input {
+    input:invalid {
+        background-color: colors.$c-invalid-input;
+    }
+    input:disabled {
+        background-color: transparent;
+    }
+}
+
+@mixin foundry-highlight-text-shadow {
+    text-shadow: 0 0 10px var(--color-shadow-primary);
+}
+
+@mixin font-heading-upper {
+    font-family: var(--ds4-font-heading);
+    text-transform: uppercase;
+}

scss/utils/_variables.scss

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Johannes Loher
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@use "./colors";
+
+$padding-sm: 5px;
+$padding-md: 10px;
+$padding-lg: 20px;
+$margin-sm: $padding-sm;
+$margin-md: $padding-md;
+$margin-lg: $padding-lg;
+
+$official-icons-path: "../assets/icons/official";
+
+$border-groove: 2px groove colors.$c-border-groove;