feat: migrate css to scss

.github/workflows/ci_cd.yml

@@ -39,31 +39,19 @@ jobs:
 
   changelog-fragment:
     name: "Create changelog fragment"
-    needs: "labeler"
+    needs: [labeler]
     permissions:
       contents: write
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - name: "Setup python"
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ env.MAIN_PYTHON_VERSION }}
-
-      - name: "Checkout repo"
-        uses: actions/checkout@v4
-
-      - name: "Install dependencies"
-        run: |
-          python -m pip install --upgrade pip
-          pip install -e .[changelog]
-
-      - uses: ansys/actions/doc-changelog@v8
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          token: ${{ secrets.PYANSYS_CI_BOT_TOKEN }}
-          bot-user: ${{ secrets.PYANSYS_CI_BOT_USERNAME }}
-          bot-email: ${{ secrets.PYANSYS_CI_BOT_EMAIL }}
+    - uses: ansys/actions/doc-changelog@v8
+      with:
+        token: ${{ secrets.PYANSYS_CI_BOT_TOKEN }}
+        use-conventional-commits: true
+        use-default-towncrier-config: true
+        bot-user: ${{ secrets.PYANSYS_CI_BOT_USERNAME }}
+        bot-email: ${{ secrets.PYANSYS_CI_BOT_EMAIL }}
 
   code-style:
     name: Code style

doc/changelog.d/644.added.md

@@ -0,0 +1 @@
+migrate css to scss

package.json

@@ -1,11 +1,21 @@
 {
     "name": "ansys_sphinx_theme",
     "repository": "https://github.com/ansys/ansys-sphinx-theme",
-    "description": "",
-    "main": "",
     "scripts": {
-        "build": "echo 'No build step needed' "
+        "build:scss": "sass src/ansys_sphinx_theme/assets/styles/ansys-sphinx-theme.scss  src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/styles/ansys-sphinx-theme.css",
+        "build:postcss": "postcss src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/styles/ansys-sphinx-theme.css -o src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/styles/ansys-sphinx-theme.css",
+        "build": "npm run build:scss && npm run build:postcss"
     },
-    "dependencies": {},
-    "devDependencies": {}
+    "devDependencies": {
+        "autoprefixer": "^10.4.21",
+        "postcss": "^8.5.3",
+        "postcss-cli": "^11.0.0",
+        "postcss-import": "^16.1.0",
+        "postcss-minify": "^1.1.0",
+        "postcss-nested": "^7.0.2",
+        "sass": "^1.85.1"
+    },
+    "dependencies": {
+        "postcss-scss": "^4.0.9"
+    }
 }

postcss.config.js

@@ -0,0 +1,9 @@
+const config = {
+  plugins: [
+    require("autoprefixer"),
+    require("postcss-minify"),
+    require("postcss-nested"),
+  ],
+};
+
+module.exports = config;

pyproject.toml

@@ -5,7 +5,7 @@ requires = [
 build-backend = "sphinx_theme_builder"
 
 [tool.sphinx-theme-builder]
-node-version = "22.14.0"
+node-version = "23.9.0"
 theme-name = "ansys_sphinx_theme"
 
 [project]

src/ansys_sphinx_theme/__init__.py

@@ -58,9 +58,9 @@
 THIS_PATH = pathlib.Path(__file__).parent.resolve()
 THEME_PATH = THIS_PATH / "theme" / "ansys_sphinx_theme"
 STATIC_PATH = THEME_PATH / "static"
-STYLE_PATH = STATIC_PATH / "css"
+STYLE_PATH = STATIC_PATH / "styles"
 JS_PATH = STATIC_PATH / "js"
-CSS_PATH = STYLE_PATH / "ansys_sphinx_theme.css"
+CSS_PATH = STYLE_PATH / "ansys-sphinx-theme.css"
 TEMPLATES_PATH = THEME_PATH / "_templates"
 AUTOAPI_TEMPLATES_PATH = TEMPLATES_PATH / "autoapi"
 LOGOS_PATH = STATIC_PATH / "logos"
@@ -1141,8 +1141,6 @@ def setup(app: Sphinx) -> Dict:
     use_ansys_search = app.config.html_theme_options.get("use_ansys_search", True)
     if use_ansys_search:
         update_search_config(app)
-
-    # Verify that the main CSS file exists
     if not CSS_PATH.exists():
         raise FileNotFoundError(f"Unable to locate ansys-sphinx theme at {CSS_PATH.absolute()}")
     app.add_css_file(str(CSS_PATH.relative_to(STATIC_PATH)))

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys-sphinx-theme-variable.css → src/ansys_sphinx_theme/assets/styles/ansys-sphinx-theme-variable.scss

@@ -1,4 +1,4 @@
-/*Contains variables for colors and fonts used in the theme*/
+/* Contains variables for colors and fonts used in the theme */
 @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap");
 
 @font-face {

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ansys_sphinx_theme.css → src/ansys_sphinx_theme/assets/styles/ansys-sphinx-theme.scss

@@ -1,14 +1,13 @@
 /* Provided by the Sphinx base theme template at build time */
-
-@import "pydata-sphinx-theme-custom.css";
-@import "breadcrumbs.css";
-@import "ast-search.css";
-@import "sphinx-design.css";
-@import "table-custom.css";
-@import "sphinx-gallery.css";
-@import "whatsnew.css";
-@import "nbsphinx.css";
-@import "ansys-sphinx-theme-variable.css";
+@import "ansys-sphinx-theme-variable";
+@import "pydata-sphinx-theme-custom";
+@import "breadcrumbs";
+@import "ast-search";
+@import "sphinx-design";
+@import "table-custom";
+@import "sphinx-gallery";
+@import "whatsnew";
+@import "nbsphinx";
 
 /*
 * Code cell

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/ast-search.css → src/ansys_sphinx_theme/assets/styles/ast-search.scss

@@ -1,52 +1,58 @@
+/* Static Search Results Container */
 .static-search-results {
   display: flex;
   flex-direction: column;
   align-content: stretch;
   justify-content: flex-start;
   position: absolute;
   background-color: var(--ast-search-bar-enable-background);
-  width: 630px;
+  width: 39.375rem; /* 630px */
   padding: 1em;
   border: 1px solid var(--ast-search-bar-enable-border);
   box-shadow: var(--ast-box-shadow-active);
   overflow: auto;
-  max-height: 500px;
+  max-height: 31.25rem; /* 500px */
 }
 
+/* Individual Result Item */
 .result-item {
   cursor: pointer;
   transition: box-shadow 0.3s ease;
   border-bottom: thin solid var(--ast-search-bar-enable-border);
   padding-bottom: 0.5em;
   margin-bottom: 0.5em;
-}
 
-.result-item:last-child {
-  border-bottom: 0;
-  margin-bottom: 0;
+  &:last-child {
+    border-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  &.selected {
+    box-shadow: var(--ast-ring-shadow-focused);
+  }
 }
 
+/* Result Title */
 .result-title {
   font-size: 1em;
   font-weight: var(--ast-font-weight-bold);
   font-family: "Open Sans", sans-serif;
   color: var(--ast-catagory-header-text);
 }
 
+/* Result Text */
 .result-text {
-  font-size: 12px;
+  font-size: 0.75rem; /* 12px */
   font-family: "Open Sans", sans-serif;
   color: var(--ast-search-bar-enable-text);
 }
 
-.result-item.selected {
-  box-shadow: var(--ast-ring-shadow-focused);
-}
-
+/* Highlighted Text */
 html[data-theme="light"] .highlight {
   color: var(--ast-highlight-color);
 }
 
+/* Search Input Styles */
 .bd-search input.form-control,
 .bd-search input.form-control:focus,
 .bd-search input.form-control:focus-visible,
@@ -55,98 +61,108 @@ html[data-theme="light"] .highlight {
 .form-control {
   background-color: var(--ast-search-bar-enable-background);
   color: var(--ast-search-bar-enable-text);
-  font-size: 14px;
+  font-size: 0.875rem; /* 14px */
   outline-color: var(--ast-search-bar-enable-border);
-  border: 0px solid var(--ast-search-bar-enable-border);
-  width: 300px;
+  border: 0;
+  width: 18.75rem; /* 300px */
   transition: max-width 0.3s ease;
   max-width: 200%;
-  height: 40px;
+  height: 2.5rem; /* 40px */
 }
 
+/* Search Button Wrapper */
 .search-button__wrapper.show input,
 .search-button__wrapper.show svg {
-  font-size: 14px;
+  font-size: 0.875rem; /* 14px */
 }
 
+/* Search Button Keyboard Shortcut */
 .bd-search .search-button__kbd-shortcut {
   background-color: var(--ast-search-bar-enable-background) !important;
   box-shadow: none !important;
-  height: 36px;
+  height: 2.25rem; /* 36px */
   display: flex;
   flex-wrap: wrap;
   align-content: center;
 }
 
+/* Index Select Dropdown */
 .index-select {
   color: var(--ast-search-bar-enable-text);
   background: var(--ast-search-bar-enable-background);
-  height: 40px;
-  font-size: 14px;
+  height: 2.5rem; /* 40px */
+  font-size: 0.875rem; /* 14px */
   font-family: "Open Sans", sans-serif;
-  border: 0.5px solid var(--ast-search-bar-enable-border);
-  border-radius: 4px;
+  border: 0.03125rem solid var(--ast-search-bar-enable-border); /* 0.5px */
+  border-radius: 0.25rem; /* 4px */
   box-shadow: none;
-  padding: 0px 8px;
-  margin-left: 2px;
+  padding: 0 0.5rem; /* 0 8px */
+  margin-left: 0.125rem; /* 2px */
 }
+
+/* Focus Visible Outline */
 :focus-visible {
   outline: none;
 }
 
+/* Search Icon */
 #search-icon {
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
+  font-size: 1.5rem; /* 24px */
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
   color: var(--ast-search-bar-enable-text);
 }
 
+/* Form Control Focus Styles */
 .form-control:focus,
 .bd-search:focus-within {
   box-shadow: none;
 }
 
-/* Button Styling */
+/* Search Button Styling */
 .search-button__button {
   transition: width 0.3s ease;
-  width: 50px; /* Initial width */
+  width: 3.125rem; /* 50px */
 }
 
 /* Result Container Styling */
 .bd-search {
-  gap: 8px;
+  gap: 0.5rem; /* 8px */
   background-color: var(--ast-search-bar-enable-background);
-  border: 0px solid var(--ast-search-bar-enable-border);
-  margin-bottom: 0px;
-}
+  border: 0 solid var(--ast-search-bar-enable-border);
+  margin-bottom: 0;
 
-.bd-search input.form-control.expanded {
-  width: 600px;
+  input.form-control.expanded {
+    width: 37.5rem; /* 600px */
+  }
 }
 
+/* Search Icon Styling */
 .search-icon {
   cursor: pointer;
 }
 
+/* Blurred Main Content */
 .bd-main.blurred {
   opacity: 0.5;
   transition: opacity 0.3s ease;
 }
 
-@media (max-width: 768px) {
+/* Responsive Styles */
+@media (max-width: 48rem) { /* 768px */
   .bd-search input.expanded {
-    width: 100px;
+    width: 6.25rem; /* 100px */
   }
 
   .form-control {
-    width: 50px;
+    width: 3.125rem; /* 50px */
   }
 
   .result {
-    width: 100px;
+    width: 6.25rem; /* 100px */
   }
 
   .bd-search .search-button__kbd-shortcut {
     display: none;
   }
-}
+}