@aleph-alpha/config-css 0.18.117 → 0.18.118

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.18.118 (2025-12-03)
+
+### 🚀 Features
+
+- **AST-3525:** fixing sidebar icon resize issues in Windows
+
+### ❤️ Thank You
+
+- Vidhi Agarwal
+
 ## 0.18.117 (2025-12-02)
 
 ### 🧱 Updated Dependencies

package/dist/index.js

@@ -51,9 +51,9 @@ function K(r) {
     const a = this.__options?.sequence || [];
     this.__options.sequence = [];
     for (const n of a) {
-      const o = r[n](t);
-      if (o != null)
-        return o;
+      const l = r[n](t);
+      if (l != null)
+        return l;
     }
   };
   function e(t, a) {
@@ -244,7 +244,7 @@ const N = [
   "clip",
   "border-radius"
 ];
-function l(r) {
+function c(r) {
   return +r.toFixed(10);
 }
 function j(r) {
@@ -253,7 +253,7 @@ function j(r) {
     return;
   const [, e, t] = i, a = Number.parseFloat(e);
   if (t && !Number.isNaN(a))
-    return `${l(a)}${t}`;
+    return `${c(a)}${t}`;
 }
 function Y(r) {
   if (r === "auto" || r === "a")
@@ -269,7 +269,7 @@ function P(r) {
     return;
   const [, e, t] = i, a = Number.parseFloat(e);
   if (!Number.isNaN(a))
-    return a === 0 ? "0" : t ? `${l(a)}${t}` : `${l(a / 4)}rem`;
+    return a === 0 ? "0" : t ? `${c(a)}${t}` : `${c(a / 4)}rem`;
 }
 function D(r) {
   if (S.test(r))
@@ -279,21 +279,21 @@ function D(r) {
     return;
   const [, e, t] = i, a = Number.parseFloat(e);
   if (!Number.isNaN(a))
-    return t ? `${l(a)}${t}` : `${l(a)}px`;
+    return t ? `${c(a)}${t}` : `${c(a)}px`;
 }
 function H(r) {
   if (!h.test(r))
     return;
   const i = Number.parseFloat(r);
   if (!Number.isNaN(i))
-    return l(i);
+    return c(i);
 }
 function J(r) {
   if (r.endsWith("%") && (r = r.slice(0, -1)), !h.test(r))
     return;
   const i = Number.parseFloat(r);
   if (!Number.isNaN(i))
-    return `${l(i / 100)}`;
+    return `${c(i / 100)}`;
 }
 function L(r) {
   if (!r)
@@ -302,9 +302,9 @@ function L(r) {
     return "100%";
   const [i, e] = r.split("/"), t = Number.parseFloat(i) / Number.parseFloat(e);
   if (!Number.isNaN(t))
-    return t === 0 ? "0" : `${l(t * 100)}%`;
+    return t === 0 ? "0" : `${c(t * 100)}%`;
 }
-function b(r, i) {
+function f(r, i) {
   if (r && r.startsWith("[") && r.endsWith("]")) {
     let e, t;
     const a = r.match(T);
@@ -312,10 +312,10 @@ function b(r, i) {
       return;
     e.startsWith("--") && (e = `var(${e})`);
     let n = 0;
-    for (const o of e)
-      if (o === "[")
+    for (const l of e)
+      if (l === "[")
         n += 1;
-      else if (o === "]" && (n -= 1, n < 0))
+      else if (l === "]" && (n -= 1, n < 0))
         return;
     if (n)
       return;
@@ -325,23 +325,23 @@ function b(r, i) {
       case "quoted":
         return e.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(["\\])/g, "\\$1").replace(/^(.+)$/, '"$1"');
     }
-    return e.replace(/(url\(.*?\))/g, (o) => o.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (o) => {
+    return e.replace(/(url\(.*?\))/g, (l) => l.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (l) => {
       const m = [];
-      return o.replace(/var\((--.+?)[,)]/g, (F, y) => (m.push(y), F.replace(y, "--un-calc"))).replace(/(-?\d*\.?\d(?!-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(/--un-calc/g, () => m.shift());
+      return l.replace(/var\((--.+?)[,)]/g, (F, y) => (m.push(y), F.replace(y, "--un-calc"))).replace(/(-?\d*\.?\d(?!-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(/--un-calc/g, () => m.shift());
     });
   }
 }
 function $(r) {
-  return b(r);
+  return f(r);
 }
 function _(r) {
-  return b(r, "color");
+  return f(r, "color");
 }
 function rr(r) {
-  return b(r, "length");
+  return f(r, "length");
 }
 function tr(r) {
-  return b(r, "position");
+  return f(r, "position");
 }
 function er(r) {
   if (/^\$[^\s'"`;{}]/.test(r)) {
@@ -355,7 +355,7 @@ function ir(r) {
     return;
   const [, e, t] = i, a = Number.parseFloat(e);
   if (!Number.isNaN(a))
-    return a === 0 && !t ? "0s" : t ? `${l(a)}${t}` : `${l(a)}ms`;
+    return a === 0 && !t ? "0s" : t ? `${c(a)}${t}` : `${c(a)}ms`;
 }
 function ar(r) {
   const i = r.match(/^(-?[0-9.]+)(deg|rad|grad|turn)?$/i);
@@ -363,7 +363,7 @@ function ar(r) {
     return;
   const [, e, t] = i, a = Number.parseFloat(e);
   if (!Number.isNaN(a))
-    return a === 0 ? "0" : t ? `${l(a)}${t}` : `${l(a)}deg`;
+    return a === 0 ? "0" : t ? `${c(a)}${t}` : `${c(a)}deg`;
 }
 function Ar(r) {
   if (N.includes(r))
@@ -396,7 +396,7 @@ const lr = {
   px: D,
   rem: P,
   time: ir
-}, cr = K(lr), s = cr, A = "--una", f = "una-in", p = "una-out";
+}, cr = K(lr), s = cr, A = "--una", p = "una-in", u = "una-out";
 function sr(r) {
   return {
     t: "top",
@@ -522,9 +522,9 @@ function ur(r) {
     [
       /^animate-in$/,
       (t, { theme: a }) => [
-        `keyframes-${f}`,
+        `keyframes-${p}`,
         {
-          "animation-name": f,
+          "animation-name": p,
           ...e(a),
           [`${A}-enter-opacity`]: "initial",
           [`${A}-enter-scale`]: "initial",
@@ -538,9 +538,9 @@ function ur(r) {
     [
       /^animate-out$/,
       (t, { theme: a }) => [
-        `keyframes-${p}`,
+        `keyframes-${u}`,
         {
-          "animation-name": p,
+          "animation-name": u,
           ...e(a),
           [`${A}-exit-opacity`]: "initial",
           [`${A}-exit-scale`]: "initial",
@@ -556,8 +556,8 @@ function ur(r) {
 const Er = {
   animation: {
     keyframes: {
-      [f]: `{from{opacity:var(${A}-enter-opacity,1);transform:translate3d(var(${A}-enter-translate-x,0),var(${A}-enter-translate-y,0),0) scale3d(var(${A}-enter-scale,1),var(${A}-enter-scale,1),var(${A}-enter-scale,1)) rotate(var(${A}-enter-rotate,0))}}`,
-      [p]: `{to{opacity:var(${A}-exit-opacity,1);transform:translate3d(var(${A}-exit-translate-x,0),var(${A}-exit-translate-y,0),0) scale3d(var(${A}-exit-scale,1),var(${A}-exit-scale,1),var(${A}-exit-scale,1)) rotate(var(${A}-exit-rotate,0))}}`
+      [p]: `{from{opacity:var(${A}-enter-opacity,1);transform:translate3d(var(${A}-enter-translate-x,0),var(${A}-enter-translate-y,0),0) scale3d(var(${A}-enter-scale,1),var(${A}-enter-scale,1),var(${A}-enter-scale,1)) rotate(var(${A}-enter-rotate,0))}}`,
+      [u]: `{to{opacity:var(${A}-exit-opacity,1);transform:translate3d(var(${A}-exit-translate-x,0),var(${A}-exit-translate-y,0),0) scale3d(var(${A}-exit-scale,1),var(${A}-exit-scale,1),var(${A}-exit-scale,1)) rotate(var(${A}-exit-rotate,0))}}`
     }
   }
 }, yr = (r = {}) => (r.unit = r.unit ?? "ms", {
@@ -571,8 +571,8 @@ function Vr(r) {
   return r.replace(/((?:rgb|hsl)a?)\(([^)]+)\)/g, (i, e, t) => {
     const [a, n] = t.split(/\//g).map((m) => m.trim());
     n && !e.endsWith("a") && (e += "a");
-    const o = a.split(/,?\s+/).map((m) => m.trim());
-    return n && o.push(n), `${e}(${o.filter(Boolean).join(", ")})`;
+    const l = a.split(/,?\s+/).map((m) => m.trim());
+    return n && l.push(n), `${e}(${l.filter(Boolean).join(", ")})`;
   });
 }
 const Ir = (r = {}) => {
@@ -595,7 +595,7 @@ const Ir = (r = {}) => {
   "banner-and-snackbars": "0px 4px 24px 0px #00000033",
   "left-elevated-card": "5px 5px 6px 0px #0000001f",
   "right-elevated-card": "-5px 5px 6px 0px #0000001f"
-}, u = {
+}, d = {
   "core-content-primary": "rgb(242, 242, 248)",
   "core-content-secondary": "rgb(185, 185, 206)",
   "core-content-tertiary": "rgb(149, 149, 172)",
@@ -744,7 +744,7 @@ const Ir = (r = {}) => {
   "primitives-yellow-800": "rgb(133, 77, 14)",
   "primitives-yellow-900": "rgb(100, 55, 10)",
   "primitives-yellow-950": "rgb(66, 32, 6)"
-}, d = {
+}, b = {
   "core-content-primary": "rgb(30, 30, 35)",
   "core-content-secondary": "rgb(72, 72, 81)",
   "core-content-tertiary": "rgb(100, 100, 116)",
@@ -893,7 +893,7 @@ const Ir = (r = {}) => {
   "primitives-yellow-800": "rgb(133, 77, 14)",
   "primitives-yellow-900": "rgb(100, 55, 10)",
   "primitives-yellow-950": "rgb(66, 32, 6)"
-}, vr = "0rem", wr = "0.25rem", Ur = "0.5rem", Mr = "2.75rem", hr = "0.5rem", Sr = "0.75rem", Wr = "1rem", Fr = "1.25rem", Rr = "1.5rem", Cr = "0.25rem", Qr = "0.5rem", c = {
+}, vr = "0rem", wr = "0.25rem", Ur = "0.5rem", Mr = "2.75rem", hr = "0.5rem", Sr = "0.75rem", Wr = "1rem", Fr = "1.25rem", Rr = "1.5rem", Cr = "0.25rem", Qr = "0.5rem", o = {
   "LINEHEIGHT-XL": "1.75rem",
   "LINEHEIGHT-2-XL": "2.25rem",
   "LINEHEIGHT-M": "1.5rem",
@@ -1094,23 +1094,41 @@ const Ir = (r = {}) => {
           
           /* Scrollbar styles for webkit browsers */
           .scrollbar-thin::-webkit-scrollbar {
-            width: ${c.L};
-            height: ${c.L};
+            width: ${o.L};
+            height: ${o.L};
           }
           .scrollbar-thin::-webkit-scrollbar-track {
             background: transparent;
-            border-radius: ${c.XS};
+            border-radius: ${o.XS};
           }
           .scrollbar-thin::-webkit-scrollbar-thumb {
-            background: ${d["core-bg-skeleton"]};
-            border-radius: ${c.XS};
-            border: ${c.DEFAULT} solid transparent;
+            background: ${b["core-bg-skeleton"]};
+            border-radius: ${o.XS};
+            border: ${o.DEFAULT} solid transparent;
             background-clip: content-box;
           }
           
           /* Cross-browser scrollbar styles for non-webkit browsers */
           .scrollbar-thin {
-            scrollbar-color: ${d["core-bg-skeleton"]} transparent !important;
+            scrollbar-color: ${b["core-bg-skeleton"]} transparent !important;
+          }
+          
+          /* Extra small scrollbar (8px) for compact spaces */
+          .scrollbar-xs::-webkit-scrollbar {
+            width: ${o.S};
+            height: ${o.S};
+          }
+          .scrollbar-xs::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: ${o.XXS};
+          }
+          .scrollbar-xs::-webkit-scrollbar-thumb {
+            background: ${b["core-bg-skeleton"]};
+            border-radius: ${o.XXS};
+          }
+          .scrollbar-xs {
+            scrollbar-width: thin;
+            scrollbar-color: ${b["core-bg-skeleton"]} transparent !important;
           }
           
           .scrollbar-none {
@@ -1122,13 +1140,20 @@ const Ir = (r = {}) => {
           
           /* Dark theme overrides */
           html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
-            background: ${u["core-bg-skeleton"]};
-            border-radius: ${c.XS};
-            border: ${c.DEFAULT} solid transparent;
+            background: ${d["core-bg-skeleton"]};
+            border-radius: ${o.XS};
+            border: ${o.DEFAULT} solid transparent;
             background-clip: content-box;
           }
           html.dark .scrollbar-thin {
-            scrollbar-color: ${u["core-bg-skeleton"]} transparent !important;
+            scrollbar-color: ${d["core-bg-skeleton"]} transparent !important;
+          }
+          
+          html.dark .scrollbar-xs::-webkit-scrollbar-thumb {
+            background: ${d["core-bg-skeleton"]};
+          }
+          html.dark .scrollbar-xs {
+            scrollbar-color: ${d["core-bg-skeleton"]} transparent !important;
           }
           
           html.dark .scrollbar-none {
@@ -1143,9 +1168,9 @@ const Ir = (r = {}) => {
   ],
   rules: [...Object.entries(Xr), ["h-screen", { height: "100vh" }]],
   theme: {
-    colors: d,
-    spacing: c,
-    size: c,
+    colors: b,
+    spacing: o,
+    size: o,
     boxShadow: xr
   }
 }))(), Hr = () => {
@@ -1154,7 +1179,7 @@ const Ir = (r = {}) => {
     X({
       theme: {
         // clone the darkModeSet to avoid mutating the original object. the original object is currently being used in the getCSS function.
-        dark: { colors: structuredClone(u) }
+        dark: { colors: structuredClone(d) }
       }
     })
   ), r.push(

package/package.json

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

package/src/index.ts

@@ -53,6 +53,24 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
             scrollbar-color: ${lightModeSet['core-bg-skeleton']} transparent !important;
           }
           
+          /* Extra small scrollbar (8px) for compact spaces */
+          .scrollbar-xs::-webkit-scrollbar {
+            width: ${spacingsSet.S};
+            height: ${spacingsSet.S};
+          }
+          .scrollbar-xs::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: ${spacingsSet.XXS};
+          }
+          .scrollbar-xs::-webkit-scrollbar-thumb {
+            background: ${lightModeSet['core-bg-skeleton']};
+            border-radius: ${spacingsSet.XXS};
+          }
+          .scrollbar-xs {
+            scrollbar-width: thin;
+            scrollbar-color: ${lightModeSet['core-bg-skeleton']} transparent !important;
+          }
+          
           .scrollbar-none {
             scrollbar-width: none;
           }
@@ -71,6 +89,13 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
             scrollbar-color: ${darkModeSet['core-bg-skeleton']} transparent !important;
           }
           
+          html.dark .scrollbar-xs::-webkit-scrollbar-thumb {
+            background: ${darkModeSet['core-bg-skeleton']};
+          }
+          html.dark .scrollbar-xs {
+            scrollbar-color: ${darkModeSet['core-bg-skeleton']} transparent !important;
+          }
+          
           html.dark .scrollbar-none {
             scrollbar-width: none;
           }