3DInsights/scrollbarPlugin.js at main · erasmusedwardobeth/3DInsights · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// scrollbarPlugin.js

const scrollbarPlugin = ({ addComponents, e, theme }) => {
  const scrollbarVariants = ["horizontal", "vertical"];

  scrollbarVariants.forEach((variant) => {
    const orientation = variant === "horizontal" ? "x" : "y";

    // Base scrollbar classes
    const scrollbarBase = {
      [`.${e(`${variant}-scrollbar`)}`]: {
        [`overflow-${orientation}`]: "scroll",
        [`overflow-${orientation === "x" ? "y" : "x"}`]: "hidden",
      },
      [`.${e(`${variant}-no-scrollbar`)}`]: {
        [`overflow-${orientation}`]: "scroll",
        [`overflow-${orientation === "x" ? "y" : "x"}`]: "hidden",
        "-ms-overflow-style": "none", // IE 10+
        "scrollbar-width": "none", // Firefox
      },
      [`.${e(`${variant}-no-scrollbar::-webkit-scrollbar`)}`]: {
        display: "none",
      },
    };

    // Scrollbar color classes for track and thumb
    const colors = theme("colors");
    Object.keys(colors).forEach((color) => {
      const colorValues =
        typeof colors[color] === "object"
          ? colors[color]
          : { DEFAULT: colors[color] };

      Object.keys(colorValues).forEach((shade) => {
        const className = shade === "DEFAULT" ? color : `${color}-${shade}`;
        const colorValue = colorValues[shade];

        // Thumb background color
        scrollbarBase[
          `.${e(`${variant}-thumb-bg-${className}`)}::-webkit-scrollbar-thumb`
        ] = {
          "background-color": colorValue,
        };

        // Track background color
        scrollbarBase[
          `.${e(`${variant}-track-bg-${className}`)}::-webkit-scrollbar-track`
        ] = {
          "background-color": colorValue,
        };
      });
    });

    // Scrollbar width classes
    const sizes = theme("spacing");
    Object.keys(sizes).forEach((size) => {
      scrollbarBase[
        `.${e(`${variant}-scrollbar-width-${size}`)}::-webkit-scrollbar`
      ] = {
        [variant === "horizontal" ? "height" : "width"]: sizes[size],
      };
    });

    // Thumb border classes
    Object.keys(colors).forEach((color) => {
      const colorValues =
        typeof colors[color] === "object"
          ? colors[color]
          : { DEFAULT: colors[color] };

      Object.keys(colorValues).forEach((shade) => {
        const className = shade === "DEFAULT" ? color : `${color}-${shade}`;
        const colorValue = colorValues[shade];

        scrollbarBase[
          `.${e(
            `${variant}-thumb-border-${className}`
          )}::-webkit-scrollbar-thumb`
        ] = {
          "border-color": colorValue,
          "border-width": "2px",
          "border-style": "solid",
        };
      });
    });

    addComponents(scrollbarBase);
  });
};

module.exports = scrollbarPlugin;