@nmorph/nmorph-ui-kit 2.2.41 → 2.2.43

package/dist/hooks/use-common-styles.js

@@ -1,18 +1,18 @@
-import { nmorphCombined as i, nmorphInset as s, nmorphOutset as h, title1 as d, title2 as l, title3 as p, title4 as c, body1 as e, body2 as b, body3 as r, body4 as m } from "../utils/theme-style.js";
-const v = {
+import { nmorphCombined as s, nmorphInset as t, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as a, body2 as p, body3 as e, body4 as m } from "../utils/theme-style.js";
+const u = {
   "nmorph-body-4": m,
-  "nmorph-body-3": r,
-  "nmorph-body-2": b,
-  "nmorph-body-1": e,
-  "nmorph-title-4": c,
-  "nmorph-title-3": p,
-  "nmorph-title-2": l,
-  "nmorph-title-1": d,
+  "nmorph-body-3": e,
+  "nmorph-body-2": p,
+  "nmorph-body-1": a,
+  "nmorph-title-4": b,
+  "nmorph-title-3": c,
+  "nmorph-title-2": d,
+  "nmorph-title-1": l,
   "nmorph--shadow-outset": h,
-  "nmorph--shadow-inset": s,
-  "nmorph--shadow-combined": i
-}, u = () => {
-  let t = `
+  "nmorph--shadow-inset": t,
+  "nmorph--shadow-combined": s
+}, w = () => {
+  let r = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -112,7 +112,7 @@ const v = {
       width: auto;
       font-family: Helvetica, Roboto, Arial, sans-serif;
 
-      ${e()}
+      ${a()}
     }
 
     h1 {
@@ -259,6 +259,57 @@ const v = {
       --nmorph-scroll-color-scheme: dark;
     }
 
+    .nmorph-scroll {
+      --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
+
+      color-scheme: var(--nmorph-scroll-color-scheme, light);
+      scrollbar-color: var(--thumb-color) transparent;
+      scrollbar-width: thin;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar {
+      width: var(--bar-width);
+      height: var(--bar-height);
+      background-color: transparent;
+      cursor: pointer;
+      transition: width ease-in-out 0.2s;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-button,
+    .nmorph-scroll::-webkit-scrollbar-button:single-button,
+    .nmorph-scroll::-webkit-scrollbar-button:double-button,
+    .nmorph-scroll::-webkit-scrollbar-button:vertical:start:decrement,
+    .nmorph-scroll::-webkit-scrollbar-button:vertical:end:increment,
+    .nmorph-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
+    .nmorph-scroll::-webkit-scrollbar-button:horizontal:end:increment {
+      display: none !important;
+      width: 0 !important;
+      min-width: 0 !important;
+      max-width: 0 !important;
+      height: 0 !important;
+      min-height: 0 !important;
+      max-height: 0 !important;
+      border: 0 !important;
+      background: transparent !important;
+      background-image: none !important;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-track {
+      border-radius: var(--border-radius-40);
+      ${t()}
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-thumb {
+      background-color: var(--thumb-color);
+      border-radius: var(--border-radius-40);
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+
     .nmorph--basic-component {
       --height: var(--default-thickness-component);
 
@@ -284,7 +335,7 @@ const v = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${r()}
+      ${e()}
     }
 
     .nmorph-native-input:focus {
@@ -358,19 +409,19 @@ const v = {
     }
 
   `;
-  for (const [a, n] of Object.entries(v))
-    t += `
-.${a} {
-  ${n()}
+  for (const [n, i] of Object.entries(u))
+    r += `
+.${n} {
+  ${i()}
 }
 `;
-  return t;
+  return r;
 }, g = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
   const o = document.createElement("style");
-  o.id = "nmorph-common-styles", o.innerHTML = u(), document.head.appendChild(o);
+  o.id = "nmorph-common-styles", o.innerHTML = w(), document.head.appendChild(o);
 };
 export {
-  u as getCommonStyles,
+  w as getCommonStyles,
   g as useCommonStyles
 };