From 4ce30c7fd21c23f8141cbb0f882a547b46d96ee9 Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 25 Jan 2026 15:45:10 +0100
Subject: [PATCH 1/2] Fix SCSS deprecations in docs

---
 docs/app/styles/_base.scss                    | 10 +++--
 docs/app/styles/_brandification.scss          | 44 ++++++++++---------
 docs/app/styles/_utilities.scss               |  6 ++-
 docs/app/styles/_variables.scss               |  3 +-
 docs/app/styles/app.scss                      | 42 +++++++++---------
 docs/app/styles/components/cookbook.scss      |  2 +
 docs/app/styles/components/docs.scss          |  5 ++-
 docs/app/styles/components/index.scss         | 13 +++---
 docs/app/styles/components/main-footer.scss   | 11 +++--
 docs/app/styles/components/main-header.scss   | 10 ++---
 docs/app/styles/components/side-nav.scss      |  6 ++-
 .../demos/content-mouse-enter-leave.scss      |  2 +
 .../styles/demos/scrollable-container.scss    |  4 +-
 docs/app/styles/look-and-feels/bootstrap.scss |  3 +-
 14 files changed, 94 insertions(+), 67 deletions(-)

diff --git a/docs/app/styles/_base.scss b/docs/app/styles/_base.scss
index 760ef795..19222e56 100644
--- a/docs/app/styles/_base.scss
+++ b/docs/app/styles/_base.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 * {
   box-sizing: border-box;
 }
@@ -16,7 +18,7 @@ html {
 }
 
 body {
-  color: $text-color;
+  color: variables.$text-color;
   // position: relative; Styles to demo non 0,0 positioned container
   // margin-top: 60px;
 }
@@ -41,7 +43,7 @@ h6 {
   margin-bottom: 0.5rem;
   font-weight: bold;
   line-height: 1.25;
-  color: $headings-text-color;
+  color: variables.$headings-text-color;
   text-rendering: optimizeLegibility;
 }
 h1 {
@@ -109,7 +111,7 @@ pre {
   font-family: Menlo, Monaco, 'Courier New', monospace;
 }
 code {
-  color: $code-text-color;
+  color: variables.$code-text-color;
   padding: 0.2em 0;
   margin: 0;
   font-size: 75%;
@@ -123,7 +125,7 @@ code {
   }
 }
 pre {
-  max-width: calc(100vw - #{2 * $wrapper-padding});
+  max-width: calc(100vw - #{2 * variables.$wrapper-padding});
   display: block;
   margin-top: 0;
   margin-bottom: 1rem;
diff --git a/docs/app/styles/_brandification.scss b/docs/app/styles/_brandification.scss
index 91b28878..15e7b6fa 100644
--- a/docs/app/styles/_brandification.scss
+++ b/docs/app/styles/_brandification.scss
@@ -1,9 +1,13 @@
+@use "sass:color";
+@use "docs/code-example";
+@use "variables";
+
 /* more styles in brandification */
 @mixin brandify($brand-color, $brand-color-brighter) {
   a {
     color: $brand-color;
   }
-  @include ember-code-example($brand-color);
+  @include code-example.ember-code-example($brand-color);
 
   .doc-page-nav-link-next,
   .doc-page-nav-link-prev {
@@ -21,10 +25,10 @@
 
   .contribute-call-to-action a {
     background-color: $brand-color;
-    border: 1px solid darken($brand-color, 12%);
-    box-shadow: 0 2px darken($brand-color, 18%);
+    border: 1px solid color.adjust($brand-color, $lightness: -12%);
+    box-shadow: 0 2px color.adjust($brand-color, $lightness: -18%);
     &:hover {
-      background-color: darken($brand-color, 5%);
+      background-color: color.adjust($brand-color, $lightness: -5%);
     }
   }
   .main-header {
@@ -34,13 +38,13 @@
   .logo-dropdown-button {
     background: $brand-color;
     &:hover {
-      background-color: lighten($brand-color, 3%);
+      background-color: color.adjust($brand-color, $lightness: 3%);
     }
   }
   .main-header-nav-link {
     color: inherit;
   }
-  @media only screen and (min-width: $small-breakpoint) {
+  @media only screen and (min-width: variables.$small-breakpoint) {
     .main-header-nav-link.active {
       color: $brand-color;
     }
@@ -57,46 +61,46 @@
 }
 
 .logo-dropdown-content-pantone-entry.brown {
-  background-color: $brown-color;
+  background-color: variables.$brown-color;
 }
 .logo-dropdown-content-pantone-entry.orange {
-  background-color: $orange-color;
+  background-color: variables.$orange-color;
 }
 .logo-dropdown-content-pantone-entry.blue {
-  background-color: $blue-color;
+  background-color: variables.$blue-color;
 }
 .logo-dropdown-content-pantone-entry.purple {
-  background-color: $purple-color;
+  background-color: variables.$purple-color;
 }
 .logo-dropdown-content-pantone-entry.line {
-  background-color: $line-color;
+  background-color: variables.$line-color;
 }
 .logo-dropdown-content-pantone-entry.pink {
-  background-color: $pink-color;
+  background-color: variables.$pink-color;
 }
 .logo-dropdown-content-pantone-entry.red {
-  background-color: $red-color;
+  background-color: variables.$red-color;
 }
 
-@include brandify($brown-color, $brown-color-brighter);
+@include brandify(variables.$brown-color, variables.$brown-color-brighter);
 
 .orange-brand {
-  @include brandify($orange-color, $orange-color-brighter);
+  @include brandify(variables.$orange-color, variables.$orange-color-brighter);
 }
 .blue-brand {
-  @include brandify($blue-color, $blue-color-brighter);
+  @include brandify(variables.$blue-color, variables.$blue-color-brighter);
 }
 .purple-brand {
-  @include brandify($purple-color, $purple-color-brighter);
+  @include brandify(variables.$purple-color, variables.$purple-color-brighter);
 }
 .line-brand {
-  @include brandify($line-color, $line-color-brighter);
+  @include brandify(variables.$line-color, variables.$line-color-brighter);
 }
 .pink-brand {
-  @include brandify($pink-color, $pink-color-brighter);
+  @include brandify(variables.$pink-color, variables.$pink-color-brighter);
 }
 .red-brand {
-  @include brandify($red-color, $red-color-brighter);
+  @include brandify(variables.$red-color, variables.$red-color-brighter);
 }
 .brown-brand {
   // @include brandify($brown-color, $brown-color-brighter);
diff --git a/docs/app/styles/_utilities.scss b/docs/app/styles/_utilities.scss
index 02dea6ea..2cb3d67a 100644
--- a/docs/app/styles/_utilities.scss
+++ b/docs/app/styles/_utilities.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 // Utility classes
 .text-center {
   text-align: center;
@@ -22,8 +24,8 @@
 %wrapper {
   max-width: 1024px;
   width: 100%;
-  padding-left: $wrapper-padding;
-  padding-right: $wrapper-padding;
+  padding-left: variables.$wrapper-padding;
+  padding-right: variables.$wrapper-padding;
   margin-left: auto;
   margin-right: auto;
 }
diff --git a/docs/app/styles/_variables.scss b/docs/app/styles/_variables.scss
index 65a14f17..37864e3f 100644
--- a/docs/app/styles/_variables.scss
+++ b/docs/app/styles/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 // Colors
 $text-color: #333;
 $headings-text-color: #313131;
@@ -33,7 +34,7 @@ $red-color-brighter: #f77f7f;
 
 // Brown-ish theme
 $brown-color: #d27303;
-$brown-color-brighter: lighten($brown-color, 10%);
+$brown-color-brighter: color.adjust($brown-color, $lightness: 10%);
 
 // // Red
 // $brand-color: $brown-color;
diff --git a/docs/app/styles/app.scss b/docs/app/styles/app.scss
index 5104ff9b..02b932b1 100644
--- a/docs/app/styles/app.scss
+++ b/docs/app/styles/app.scss
@@ -1,34 +1,34 @@
 // Basic dropdown
 @use 'ember-basic-dropdown';
 
-@import 'variables';
-@import 'base';
-@import 'utilities';
-@import 'layout';
+@use 'variables';
+@use 'base';
+@use 'utilities';
+@use 'layout';
 
 // Components
-@import 'components/main-header';
-@import 'components/link-to-other-version';
-@import 'components/main-footer';
-@import 'components/index';
-@import 'components/side-nav';
-@import 'components/docs';
-@import 'components/cookbook';
-@import 'components/spinners';
-@import 'components/code-block';
+@use 'components/main-header';
+@use 'components/link-to-other-version';
+@use 'components/main-footer';
+@use 'components/index';
+@use 'components/side-nav';
+@use 'components/docs';
+@use 'components/cookbook';
+@use 'components/spinners';
+@use 'components/code-block';
 
 // Looks and feels for examples
-@import 'look-and-feels/animations';
-@import 'look-and-feels/bootstrap';
-@import 'look-and-feels/material';
+@use 'look-and-feels/animations';
+@use 'look-and-feels/bootstrap';
+@use 'look-and-feels/material';
 
 // Demos
-@import 'demos/content-mouse-enter-leave';
-@import 'demos/position';
-@import 'demos/scrollable-container';
+@use 'demos/content-mouse-enter-leave';
+@use 'demos/position';
+@use 'demos/scrollable-container';
 
 // Docs
-@import 'docs/code-example';
+@use 'docs/code-example';
 
 // Easter egg
-@import 'brandification';
+@use 'brandification';
diff --git a/docs/app/styles/components/cookbook.scss b/docs/app/styles/components/cookbook.scss
index e30c1c21..2e177b06 100644
--- a/docs/app/styles/components/cookbook.scss
+++ b/docs/app/styles/components/cookbook.scss
@@ -1,3 +1,5 @@
+@use "../utilities";
+
 // Cookbook
 .cookbook {
   @extend %wrapper;
diff --git a/docs/app/styles/components/docs.scss b/docs/app/styles/components/docs.scss
index 63a1204b..7d9fb6dd 100644
--- a/docs/app/styles/components/docs.scss
+++ b/docs/app/styles/components/docs.scss
@@ -1,3 +1,6 @@
+@use "../variables";
+@use "../utilities";
+
 // Docs
 .docs {
   @extend %wrapper;
@@ -32,7 +35,7 @@
 }
 .section-selector {
   margin-bottom: 1rem;
-  @media only screen and (min-width: $medium-breakpoint) {
+  @media only screen and (min-width: variables.$medium-breakpoint) {
     display: none;
   }
 }
diff --git a/docs/app/styles/components/index.scss b/docs/app/styles/components/index.scss
index c71193cd..a9b7d42e 100644
--- a/docs/app/styles/components/index.scss
+++ b/docs/app/styles/components/index.scss
@@ -1,3 +1,6 @@
+@use "../variables";
+@use "../utilities";
+
 // Headline
 .main-page-headline {
   /* more styles in brandification */
@@ -6,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  @media only screen and (max-width: $medium-breakpoint) {
+  @media only screen and (max-width: variables.$medium-breakpoint) {
     height: 200px;
   }
 }
@@ -19,13 +22,13 @@
   img {
     vertical-align: top;
   }
-  @media only screen and (max-width: $small-breakpoint) {
+  @media only screen and (max-width: variables.$small-breakpoint) {
     font-size: 34px;
     img {
       height: 40px;
     }
   }
-  @media only screen and (min-width: $small-breakpoint) {
+  @media only screen and (min-width: variables.$small-breakpoint) {
     font-size: 42px;
     img {
       height: 48px;
@@ -36,7 +39,7 @@
 .selling-points {
   @extend %wrapper;
   display: flex;
-  @media only screen and (max-width: $small-breakpoint) {
+  @media only screen and (max-width: variables.$small-breakpoint) {
     flex-direction: column;
   }
 }
@@ -66,7 +69,7 @@
   }
 }
 .selling-point-text {
-  color: $gray;
+  color: variables.$gray;
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/docs/app/styles/components/main-footer.scss b/docs/app/styles/components/main-footer.scss
index 0aa6371e..2b7c8a2c 100644
--- a/docs/app/styles/components/main-footer.scss
+++ b/docs/app/styles/components/main-footer.scss
@@ -1,7 +1,10 @@
+@use "../variables";
+@use "../utilities";
+
 // Main footer
 .main-footer {
-  color: $gray;
-  background-color: $light-gray;
+  color: variables.$gray;
+  background-color: variables.$light-gray;
   border-top: 1px solid #bbb;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -10,7 +13,7 @@
   @extend %wrapper;
   padding: 1rem 0;
 }
-@media only screen and (min-width: $medium-breakpoint) {
+@media only screen and (min-width: variables.$medium-breakpoint) {
   .icons-attributions {
     float: right;
   }
@@ -23,7 +26,7 @@ body .contribute-call-to-action a {
   color: white;
   /* more styles in brandification */
 }
-@media only screen and (min-width: $small-breakpoint) {
+@media only screen and (min-width: variables.$small-breakpoint) {
   .contribute-call-to-action {
     float: right;
   }
diff --git a/docs/app/styles/components/main-header.scss b/docs/app/styles/components/main-header.scss
index ee13b8fe..e41673fe 100644
--- a/docs/app/styles/components/main-header.scss
+++ b/docs/app/styles/components/main-header.scss
@@ -1,3 +1,6 @@
+@use "../variables";
+@use "../utilities";
+
 // main header
 .main-header {
   /* more styles in brandification */
@@ -34,9 +37,6 @@
   text-align: center;
   border: 1px solid #f9efe4;
   box-shadow: 0 3px #f9efe4;
-  &:hover {
-    /* more styles in brandification */
-  }
   &[aria-expanded='true'] {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     transform: translateY(3px);
@@ -72,7 +72,7 @@
   padding-left: 1rem;
   padding-right: 1rem;
 }
-@media only screen and (max-width: $small-breakpoint) {
+@media only screen and (max-width: variables.$small-breakpoint) {
   .main-header {
     line-height: 44px;
   }
@@ -86,7 +86,7 @@
     overflow-x: auto;
   }
 }
-@media only screen and (min-width: $small-breakpoint) {
+@media only screen and (min-width: variables.$small-breakpoint) {
   .main-header {
     line-height: 66px;
   }
diff --git a/docs/app/styles/components/side-nav.scss b/docs/app/styles/components/side-nav.scss
index 6203a4d5..320e2675 100644
--- a/docs/app/styles/components/side-nav.scss
+++ b/docs/app/styles/components/side-nav.scss
@@ -1,10 +1,12 @@
+@use "../variables";
+
 $side-nav-color: #777;
 .side-nav {
   width: 200px;
   color: $side-nav-color;
   flex: 0 0 25%;
   margin-right: 2rem;
-  @media only screen and (max-width: $medium-breakpoint) {
+  @media only screen and (max-width: variables.$medium-breakpoint) {
     display: none;
   }
 }
@@ -35,7 +37,7 @@ $side-nav-color: #777;
   height: 30px;
   font-size: 16px;
 }
-@media only screen and (min-width: $medium-breakpoint) {
+@media only screen and (min-width: variables.$medium-breakpoint) {
   .section-selector {
     display: none;
   }
diff --git a/docs/app/styles/demos/content-mouse-enter-leave.scss b/docs/app/styles/demos/content-mouse-enter-leave.scss
index 6ba5ef03..3b60082e 100644
--- a/docs/app/styles/demos/content-mouse-enter-leave.scss
+++ b/docs/app/styles/demos/content-mouse-enter-leave.scss
@@ -1,3 +1,5 @@
+@use '../look-and-feels/animations.scss';
+
 .demo-fake-body {
   background: white;
   height: 150px;
diff --git a/docs/app/styles/demos/scrollable-container.scss b/docs/app/styles/demos/scrollable-container.scss
index aa519040..4e12c8d2 100644
--- a/docs/app/styles/demos/scrollable-container.scss
+++ b/docs/app/styles/demos/scrollable-container.scss
@@ -1,3 +1,5 @@
+@use "../variables";
+
 .scrolling-container-temporal-demo {
   padding: 100px;
 }
@@ -17,7 +19,7 @@
   &__filler {
     width: 100%;
     height: 200px;
-    background-color: $blue-color;
+    background-color: variables.$blue-color;
   }
 
   &__content-container {
diff --git a/docs/app/styles/look-and-feels/bootstrap.scss b/docs/app/styles/look-and-feels/bootstrap.scss
index 9626b337..839f6758 100644
--- a/docs/app/styles/look-and-feels/bootstrap.scss
+++ b/docs/app/styles/look-and-feels/bootstrap.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 .trigger-bootstrap-feel {
   display: inline-block;
   text-align: center;
@@ -115,7 +116,7 @@
   outline: none;
   color: #444;
   &:focus {
-    background-color: lighten(#66afe9, 25%);
+    background-color: color.adjust(#66afe9, $lightness: 25%);
   }
 }
 

From a98eda13f13cf87ff4a2d087ff49a2af5ae17ada Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Sun, 25 Jan 2026 15:46:53 +0100
Subject: [PATCH 2/2] Fix lint

---
 docs/app/styles/_base.scss                      | 2 +-
 docs/app/styles/_brandification.scss            | 6 +++---
 docs/app/styles/_utilities.scss                 | 2 +-
 docs/app/styles/_variables.scss                 | 2 +-
 docs/app/styles/components/cookbook.scss        | 2 +-
 docs/app/styles/components/docs.scss            | 4 ++--
 docs/app/styles/components/index.scss           | 4 ++--
 docs/app/styles/components/main-footer.scss     | 4 ++--
 docs/app/styles/components/main-header.scss     | 4 ++--
 docs/app/styles/components/side-nav.scss        | 2 +-
 docs/app/styles/demos/scrollable-container.scss | 2 +-
 docs/app/styles/look-and-feels/bootstrap.scss   | 2 +-
 12 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/app/styles/_base.scss b/docs/app/styles/_base.scss
index 19222e56..d7e66491 100644
--- a/docs/app/styles/_base.scss
+++ b/docs/app/styles/_base.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 * {
   box-sizing: border-box;
diff --git a/docs/app/styles/_brandification.scss b/docs/app/styles/_brandification.scss
index 15e7b6fa..3ff7f79a 100644
--- a/docs/app/styles/_brandification.scss
+++ b/docs/app/styles/_brandification.scss
@@ -1,6 +1,6 @@
-@use "sass:color";
-@use "docs/code-example";
-@use "variables";
+@use 'sass:color';
+@use 'docs/code-example';
+@use 'variables';
 
 /* more styles in brandification */
 @mixin brandify($brand-color, $brand-color-brighter) {
diff --git a/docs/app/styles/_utilities.scss b/docs/app/styles/_utilities.scss
index 2cb3d67a..d6e196ff 100644
--- a/docs/app/styles/_utilities.scss
+++ b/docs/app/styles/_utilities.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use 'variables';
 
 // Utility classes
 .text-center {
diff --git a/docs/app/styles/_variables.scss b/docs/app/styles/_variables.scss
index 37864e3f..7bda9369 100644
--- a/docs/app/styles/_variables.scss
+++ b/docs/app/styles/_variables.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 // Colors
 $text-color: #333;
 $headings-text-color: #313131;
diff --git a/docs/app/styles/components/cookbook.scss b/docs/app/styles/components/cookbook.scss
index 2e177b06..98ad6e0f 100644
--- a/docs/app/styles/components/cookbook.scss
+++ b/docs/app/styles/components/cookbook.scss
@@ -1,4 +1,4 @@
-@use "../utilities";
+@use '../utilities';
 
 // Cookbook
 .cookbook {
diff --git a/docs/app/styles/components/docs.scss b/docs/app/styles/components/docs.scss
index 7d9fb6dd..6a174cda 100644
--- a/docs/app/styles/components/docs.scss
+++ b/docs/app/styles/components/docs.scss
@@ -1,5 +1,5 @@
-@use "../variables";
-@use "../utilities";
+@use '../variables';
+@use '../utilities';
 
 // Docs
 .docs {
diff --git a/docs/app/styles/components/index.scss b/docs/app/styles/components/index.scss
index a9b7d42e..c3786b32 100644
--- a/docs/app/styles/components/index.scss
+++ b/docs/app/styles/components/index.scss
@@ -1,5 +1,5 @@
-@use "../variables";
-@use "../utilities";
+@use '../variables';
+@use '../utilities';
 
 // Headline
 .main-page-headline {
diff --git a/docs/app/styles/components/main-footer.scss b/docs/app/styles/components/main-footer.scss
index 2b7c8a2c..18d21e43 100644
--- a/docs/app/styles/components/main-footer.scss
+++ b/docs/app/styles/components/main-footer.scss
@@ -1,5 +1,5 @@
-@use "../variables";
-@use "../utilities";
+@use '../variables';
+@use '../utilities';
 
 // Main footer
 .main-footer {
diff --git a/docs/app/styles/components/main-header.scss b/docs/app/styles/components/main-header.scss
index e41673fe..91062b22 100644
--- a/docs/app/styles/components/main-header.scss
+++ b/docs/app/styles/components/main-header.scss
@@ -1,5 +1,5 @@
-@use "../variables";
-@use "../utilities";
+@use '../variables';
+@use '../utilities';
 
 // main header
 .main-header {
diff --git a/docs/app/styles/components/side-nav.scss b/docs/app/styles/components/side-nav.scss
index 320e2675..0bb3896e 100644
--- a/docs/app/styles/components/side-nav.scss
+++ b/docs/app/styles/components/side-nav.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use '../variables';
 
 $side-nav-color: #777;
 .side-nav {
diff --git a/docs/app/styles/demos/scrollable-container.scss b/docs/app/styles/demos/scrollable-container.scss
index 4e12c8d2..eca78829 100644
--- a/docs/app/styles/demos/scrollable-container.scss
+++ b/docs/app/styles/demos/scrollable-container.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use '../variables';
 
 .scrolling-container-temporal-demo {
   padding: 100px;
diff --git a/docs/app/styles/look-and-feels/bootstrap.scss b/docs/app/styles/look-and-feels/bootstrap.scss
index 839f6758..52630f6b 100644
--- a/docs/app/styles/look-and-feels/bootstrap.scss
+++ b/docs/app/styles/look-and-feels/bootstrap.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 .trigger-bootstrap-feel {
   display: inline-block;
   text-align: center;