@aleph-alpha/config-css 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.17.0 (2025-07-14)
+
+### 🚀 Features
+
+- **DS-81:** fix dark mode issues
+
+### ❤️ Thank You
+
+- Joel Alenchery
+
 ## 0.16.0 (2025-07-14)
 
 ### 🚀 Features

package/dist/index.js

@@ -997,10 +997,20 @@ const dr = (r = {}) => {
           /* Dark theme overrides */
           html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
             background: ${d["core-bg-skeleton"]};
+            border-radius: ${m.XS};
+            border: ${m.DEFAULT} solid transparent;
+            background-clip: content-box;
           }
           html.dark .scrollbar-thin {
             scrollbar-color: ${d["core-bg-skeleton"]} transparent !important;
           }
+          
+          html.dark .scrollbar-none {
+            scrollbar-width: none;
+          }
+          html.dark .scrollbar-none::-webkit-scrollbar {
+            display: none;
+          }
         `;
       }
     }
@@ -1017,7 +1027,8 @@ const dr = (r = {}) => {
   return r.push(Mr), r.push(
     X({
       theme: {
-        dark: { colors: d }
+        // clone the darkModeSet to avoid mutating the original object. the original object is currently being used in the getCSS function.
+        dark: { colors: structuredClone(d) }
       }
     })
   ), r.push(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aleph-alpha/config-css",
   "license": "Apache-2.0",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "prettier": "@aleph-alpha/prettier-config-frontend",

package/src/index.ts

@@ -63,10 +63,20 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
           /* Dark theme overrides */
           html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
             background: ${darkModeSet['core-bg-skeleton']};
+            border-radius: ${spacingsSet.XS};
+            border: ${spacingsSet.DEFAULT} solid transparent;
+            background-clip: content-box;
           }
           html.dark .scrollbar-thin {
             scrollbar-color: ${darkModeSet['core-bg-skeleton']} transparent !important;
           }
+          
+          html.dark .scrollbar-none {
+            scrollbar-width: none;
+          }
+          html.dark .scrollbar-none::-webkit-scrollbar {
+            display: none;
+          }
         `;
         },
       },
@@ -89,7 +99,8 @@ const createPresets = (): Preset<Theme>[] => {
   presets.push(
     presetTheme({
       theme: {
-        dark: { colors: darkModeSet },
+        // clone the darkModeSet to avoid mutating the original object. the original object is currently being used in the getCSS function.
+        dark: { colors: structuredClone(darkModeSet) },
       },
     }) as unknown as Preset<Theme>
   );