From 1938448dc6a2adbf4a5c42e1067bf4b35ed289ec Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Thu, 25 Dec 2025 12:10:05 +0100
Subject: [PATCH 1/2] Add css variables support

---
 docs/app/components/snippets/styles-0.css       |  6 ++++++
 docs/app/templates/public-pages/docs/styles.gts | 12 +++---------
 ember-basic-dropdown-for-css-generate.scss      |  8 ++++++++
 rollup.config.mjs                               |  4 ++--
 4 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 docs/app/components/snippets/styles-0.css
 create mode 100644 ember-basic-dropdown-for-css-generate.scss

diff --git a/docs/app/components/snippets/styles-0.css b/docs/app/components/snippets/styles-0.css
new file mode 100644
index 00000000..5f3170d4
--- /dev/null
+++ b/docs/app/components/snippets/styles-0.css
@@ -0,0 +1,6 @@
+:root, :host {
+  --ember-basic-dropdown-content-background-color: #fff;
+  --ember-basic-dropdown-content-z-index: 1000;
+  --ember-basic-dropdown-overlay-background: rgb(0 0 0 / 50%);
+  --ember-basic-dropdown-overlay-pointer-events: none;
+}
diff --git a/docs/app/templates/public-pages/docs/styles.gts b/docs/app/templates/public-pages/docs/styles.gts
index 86d7bb5f..4428d20d 100644
--- a/docs/app/templates/public-pages/docs/styles.gts
+++ b/docs/app/templates/public-pages/docs/styles.gts
@@ -6,20 +6,14 @@ import CodeExample from '../../../components/code-example';
 
   <p>
     Since this component doesn't any visual theme, you can apply styles to it
-    just with plain CSS or even adding the classes your favourite CSS framework
+    just with CSS variables, plain CSS or even adding the classes your favorite CSS framework
     gives you.
   </p>
 
-  <p>
-    If don't use any css pre-processor this is all. If you do use SASS, the
-    addon will know it and will have to
-    <code>@use</code>
-    the styles explicitly. This gives you the chance to set a few variables that
-    Ember Basic Dropdown will use.
-  </p>
+  <CodeExample @css="styles-0.css" @showResult={{false}} @activeTab="css" />
 
   <p>
-    There is only four variables you can tweak (Sass syntax)
+    If you use SASS you can override the default values by using the SASS syntax
   </p>
 
   <CodeExample @scss="styles-1.scss" @showResult={{false}} @activeTab="scss" />
diff --git a/ember-basic-dropdown-for-css-generate.scss b/ember-basic-dropdown-for-css-generate.scss
new file mode 100644
index 00000000..bda6e2e8
--- /dev/null
+++ b/ember-basic-dropdown-for-css-generate.scss
@@ -0,0 +1,8 @@
+@use 'scss/variables.scss' with (
+  $ember-basic-dropdown-content-background-color: var(--ember-basic-dropdown-content-background-color, #fff),
+  $ember-basic-dropdown-content-z-index: var(--ember-basic-dropdown-content-z-index, 1000),
+  $ember-basic-dropdown-overlay-background: var(--ember-basic-dropdown-overlay-background, rgba(0, 0, 0, 0.5)),
+  $ember-basic-dropdown-overlay-pointer-events: var(--ember-basic-dropdown-overlay-pointer-events, none)
+);
+
+@use "scss/base.scss";
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 4c4cd7ff..18180ff1 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -16,7 +16,7 @@ const tsConfig = resolve(rootDirectory, './tsconfig.publish.json');
 
 export default [
   {
-    input: './_index.scss',
+    input: './ember-basic-dropdown-for-css-generate.scss',
     output: {
       file: './src/vendor/ember-basic-dropdown.js',
       assetFileNames: '[name][extname]',
@@ -29,7 +29,7 @@ export default [
     ],
   },
   {
-    input: './_index.scss',
+    input: './ember-basic-dropdown-for-css-generate.scss',
     output: {
       file: './src/vendor/ember-basic-dropdown.js',
       assetFileNames: '[name][extname]',

From 0ff51caaf607325d74026d1f2dee0d01f9d9c774 Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Thu, 25 Dec 2025 12:14:26 +0100
Subject: [PATCH 2/2] Fix lint

---
 docs/app/components/snippets/styles-0.css     |  3 ++-
 .../templates/public-pages/docs/styles.gts    |  4 ++--
 ember-basic-dropdown-for-css-generate.scss    | 22 ++++++++++++++-----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/docs/app/components/snippets/styles-0.css b/docs/app/components/snippets/styles-0.css
index 5f3170d4..c7b8ce6e 100644
--- a/docs/app/components/snippets/styles-0.css
+++ b/docs/app/components/snippets/styles-0.css
@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --ember-basic-dropdown-content-background-color: #fff;
   --ember-basic-dropdown-content-z-index: 1000;
   --ember-basic-dropdown-overlay-background: rgb(0 0 0 / 50%);
diff --git a/docs/app/templates/public-pages/docs/styles.gts b/docs/app/templates/public-pages/docs/styles.gts
index 4428d20d..d442a04c 100644
--- a/docs/app/templates/public-pages/docs/styles.gts
+++ b/docs/app/templates/public-pages/docs/styles.gts
@@ -6,8 +6,8 @@ import CodeExample from '../../../components/code-example';
 
   <p>
     Since this component doesn't any visual theme, you can apply styles to it
-    just with CSS variables, plain CSS or even adding the classes your favorite CSS framework
-    gives you.
+    just with CSS variables, plain CSS or even adding the classes your favorite
+    CSS framework gives you.
   </p>
 
   <CodeExample @css="styles-0.css" @showResult={{false}} @activeTab="css" />
diff --git a/ember-basic-dropdown-for-css-generate.scss b/ember-basic-dropdown-for-css-generate.scss
index bda6e2e8..cbf39efe 100644
--- a/ember-basic-dropdown-for-css-generate.scss
+++ b/ember-basic-dropdown-for-css-generate.scss
@@ -1,8 +1,20 @@
-@use 'scss/variables.scss' with (
-  $ember-basic-dropdown-content-background-color: var(--ember-basic-dropdown-content-background-color, #fff),
-  $ember-basic-dropdown-content-z-index: var(--ember-basic-dropdown-content-z-index, 1000),
-  $ember-basic-dropdown-overlay-background: var(--ember-basic-dropdown-overlay-background, rgba(0, 0, 0, 0.5)),
-  $ember-basic-dropdown-overlay-pointer-events: var(--ember-basic-dropdown-overlay-pointer-events, none)
+@use "scss/variables.scss" with (
+  $ember-basic-dropdown-content-background-color: var(
+      --ember-basic-dropdown-content-background-color,
+      #fff
+    ),
+  $ember-basic-dropdown-content-z-index: var(
+      --ember-basic-dropdown-content-z-index,
+      1000
+    ),
+  $ember-basic-dropdown-overlay-background: var(
+      --ember-basic-dropdown-overlay-background,
+      rgba(0, 0, 0, 0.5)
+    ),
+  $ember-basic-dropdown-overlay-pointer-events: var(
+      --ember-basic-dropdown-overlay-pointer-events,
+      none
+    )
 );
 
 @use "scss/base.scss";