Add a new theme: Raspberry Mint

.stylelintrc.yaml

@@ -1,5 +1,10 @@
 extends: stylelint-config-standard
 plugins:
   - stylelint-no-unsupported-browser-features
+  - stylelint-scss
 rules:
+  at-rule-no-unknown: null
+  function-no-unknown: null
+  import-notation: string
   no-descending-specificity: ~
+  scss/at-rule-no-unknown: true

bin/test-eslint

@@ -6,4 +6,4 @@ cd "$(dirname "$0")/.."
 
 echo 'Running ESLint...'
 
-./node_modules/.bin/eslint -c ./eslint.config.js ./betty ./playwright "$@"
+./node_modules/.bin/eslint -c ./eslint.config.js ./betty ./playwright ./raspberry-mint-dev "$@"

bin/test-stylelint

@@ -6,4 +6,4 @@ cd "$(dirname "$0")/.."
 
 echo 'Running Stylelint...'
 
-./node_modules/.bin/stylelint "./betty/**/*.css"
+./node_modules/.bin/stylelint "./betty/**/*.css" "./raspberry-mint-dev/**/*.css" "./raspberry-mint-dev/**/*.scss"

package.json

@@ -20,6 +20,7 @@
     "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
+    "stylelint-scss": "^6.8.1",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0"
   },

raspberry-mint-dev/.gitignore

@@ -0,0 +1,5 @@
+/build
+/cache
+/node_modules
+/package-lock.json
+

raspberry-mint-dev/package.json

@@ -0,0 +1,35 @@
+{
+  "engines": {
+    "node": ">= 20"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@popperjs/core": "^2.11.8",
+    "babel-loader": "^9.2.1",
+    "bootstrap": "^5.3.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "core-js": "^3.38.1",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss-loader": "^8.1.1",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.80.4",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
+    "html-webpack-plugin": "^5.6.3"
+  },
+  "scripts": {
+    "webpack": "webpack",
+    "serve": "webpack serve --mode development --open"
+  },
+  "type": "module"
+}

raspberry-mint-dev/src/css/components/button.scss

@@ -0,0 +1,9 @@
+.btn {
+  outline: 0;
+
+  &:focus {
+    background-color: $focus;
+    outline: 2px $black solid;
+    color: $black;
+  }
+}

raspberry-mint-dev/src/css/components/card.scss

@@ -0,0 +1,5 @@
+.card {
+  background-color: $gray-100;
+  border:none;
+  box-shadow: 1px 1px $gray-300;
+}

raspberry-mint-dev/src/css/components/footer.scss

@@ -0,0 +1,3 @@
+#footer {
+  background-color: $mint-900;
+}

raspberry-mint-dev/src/css/components/header.scss

@@ -0,0 +1,49 @@
+#header {
+  background-color: $mint-900;
+
+  .header-site-logo {
+    background-image: url("/betty-192x192.png");
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: 3rem;
+    box-shadow: none;
+    display: inline-block;
+    line-height: 3rem;
+    min-height: 3rem;
+    padding-left: 4rem;
+    padding-right: 1rem;
+  }
+
+  .header-btn-entry-point {
+    height: 3rem;
+    margin-right: 1rem;
+    width: 3rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    .nav-item {
+      margin-bottom: 5px;
+
+      .nav-link {
+        box-shadow: none;
+        color: $mint-200;
+
+        &:focus {
+          box-shadow: 0 0 $focus, 0 5px $black;
+        }
+
+        &:hover {
+          color: $mint-100;
+          box-shadow: 0 5px $mint-100;
+        }
+      }
+
+      &.active .nav-link {
+        box-shadow: 0 5px $black;
+        color: $black;
+
+      }
+
+    }
+  }
+}

raspberry-mint-dev/src/css/dev.scss

@@ -0,0 +1,113 @@
+/* @todo Do not migrate these to the final product! */
+code {
+  color: #000 !important;
+  background-color: #fff;
+}
+
+.bg-raspberry-100 {
+  background-color: $raspberry-100 !important;
+}
+
+.bg-raspberry-200 {
+  background-color: $raspberry-200 !important;
+}
+
+.bg-raspberry-300 {
+  background-color: $raspberry-300 !important;
+}
+
+.bg-raspberry-400 {
+  background-color: $raspberry-400 !important;
+}
+
+.bg-raspberry-500 {
+  background-color: $raspberry-500 !important;
+}
+
+.bg-raspberry-600 {
+  background-color: $raspberry-600 !important;
+}
+
+.bg-raspberry-700 {
+  background-color: $raspberry-700 !important;
+}
+
+.bg-raspberry-800 {
+  background-color: $raspberry-800 !important;
+}
+
+.bg-raspberry-900 {
+  background-color: $raspberry-900 !important;
+}
+
+.bg-mint-100 {
+  background-color: $mint-100 !important;
+}
+
+.bg-mint-200 {
+  background-color: $mint-200 !important;
+}
+
+.bg-mint-300 {
+  background-color: $mint-300 !important;
+}
+
+.bg-mint-400 {
+  background-color: $mint-400 !important;
+}
+
+.bg-mint-500 {
+  background-color: $mint-500 !important;
+}
+
+.bg-mint-600 {
+  background-color: $mint-600 !important;
+}
+
+.bg-mint-700 {
+  background-color: $mint-700 !important;
+}
+
+.bg-mint-800 {
+  background-color: $mint-800 !important;
+}
+
+.bg-mint-900 {
+  background-color: $mint-900 !important;
+}
+
+.bg-orange-100 {
+  background-color: $orange-100 !important;
+}
+
+.bg-orange-200 {
+  background-color: $orange-200 !important;
+}
+
+.bg-orange-300 {
+  background-color: $orange-300 !important;
+}
+
+.bg-orange-400 {
+  background-color: $orange-400 !important;
+}
+
+.bg-orange-500 {
+  background-color: $orange-500 !important;
+}
+
+.bg-orange-600 {
+  background-color: $orange-600 !important;
+}
+
+.bg-orange-700 {
+  background-color: $orange-700 !important;
+}
+
+.bg-orange-800 {
+  background-color: $orange-800 !important;
+}
+
+.bg-orange-900 {
+  background-color: $orange-900 !important;
+}

raspberry-mint-dev/src/css/main.scss

@@ -0,0 +1,56 @@
+/* @todo Finetune the imports and remove unneeded comments */
+
+/* 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) */
+@import "bootstrap/scss/functions";
+
+/* 2. Include any default variable overrides here */
+@import "./variables/colors";
+@import "./variables/focus";
+@import "./variables/font";
+@import "./variables/border";
+
+/* 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) */
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+/* 4. Include any default map overrides here */
+$theme-colors: (
+        "primary": $raspberry,
+        "secondary": $mint,
+        "danger": $orange,
+);
+
+/* 5. Include remainder of required parts */
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+/* 6. Optionally include any other parts as needed */
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/helpers";
+
+/* Components */
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/transitions";
+
+/* 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` */
+@import "bootstrap/scss/utilities/api";
+
+/* 8. Add additional custom code here */
+@import "./text";
+@import "./components/button";
+@import "./components/card";
+@import "./components/header";
+@import "./components/footer";
+
+/* @todo Do not migrate this to the final product! */
+@import "./dev";

raspberry-mint-dev/src/css/text.scss

@@ -0,0 +1,23 @@
+a {
+  color: $mint-200;
+  box-shadow: 0 2px $mint-300;
+  text-decoration: none;
+
+  &:focus {
+    background-color: $focus;
+    box-shadow: 0 0 $focus, 0 2px $black;
+    color: $black;
+    text-decoration-color: $black;
+    outline: none;
+  }
+
+  &:hover {
+    color: $mint-100;
+    box-shadow: 0 2px $mint-100;
+  }
+}
+
+::selection {
+  background-color: $orange-900;
+  color: $black;
+}

raspberry-mint-dev/src/css/variables/border.scss

@@ -0,0 +1,6 @@
+$border-radius:0;
+$border-radius-sm:0;
+$border-radius-lg:0;
+$border-radius-xl:0;
+$border-radius-xxl:0;
+$border-radius-pill:0;

raspberry-mint-dev/src/css/variables/colors.scss

@@ -0,0 +1,33 @@
+$mint: #3eb489;
+$raspberry: #b3446c;
+$orange: #ffbd22;
+
+$mint-100: mix(black, $mint, 80%);
+$mint-200: mix(black, $mint, 60%);
+$mint-300: mix(black, $mint, 40%);
+$mint-400: mix(black, $mint, 20%);
+$mint-500: $mint;
+$mint-600: mix(white, $mint, 20%);
+$mint-700: mix(white, $mint, 40%);
+$mint-800: mix(white, $mint, 60%);
+$mint-900: mix(white, $mint, 80%);
+
+$raspberry-100: mix(black, $raspberry, 80%);
+$raspberry-200: mix(black, $raspberry, 60%);
+$raspberry-300: mix(black, $raspberry, 40%);
+$raspberry-400: mix(black, $raspberry, 20%);
+$raspberry-500: $raspberry;
+$raspberry-600: mix(white, $raspberry, 20%);
+$raspberry-700: mix(white, $raspberry, 40%);
+$raspberry-800: mix(white, $raspberry, 60%);
+$raspberry-900: mix(white, $raspberry, 80%);
+
+$orange-100: mix(black, $orange, 80%);
+$orange-200: mix(black, $orange, 60%);
+$orange-300: mix(black, $orange, 40%);
+$orange-400: mix(black, $orange, 20%);
+$orange-500: $orange;
+$orange-600: mix(white, $orange, 20%);
+$orange-700: mix(white, $orange, 40%);
+$orange-800: mix(white, $orange, 60%);
+$orange-900: mix(white, $orange, 80%);

raspberry-mint-dev/src/css/variables/focus.scss

@@ -0,0 +1,7 @@
+$focus: $orange-700;
+
+$focus-ring-width: 0;
+$focus-ring-opacity: 1;
+$focus-ring-color: red;
+$focus-ring-blur:       0;
+$focus-ring-box-shadow: 0;

raspberry-mint-dev/src/css/variables/font.scss

@@ -0,0 +1,2 @@
+$font-family-base: "Noto Sans", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-size-base: 1.3rem;

raspberry-mint-dev/src/js/main.ts

@@ -0,0 +1,2 @@
+import '../css/main.scss'
+import "bootstrap/js/dist/collapse"