tailwind-softpop-plugin 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-softpop-plugin",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Tailwind CSS plugin for softpop design system",
   "style": "./src/index.css",
   "exports": {

package/src/index.css

@@ -1,6 +1,8 @@
 @import "./fonts/nunito/index.css";
 @import "./fonts/mulish/index.css";
 
+@plugin "./scrollbar/index.js";
+
 @theme {
   --font-heading: "Nunito", sans-serif;
   --font-body: "Mulish", sans-serif;
@@ -122,6 +124,9 @@
 }
 
 @layer base {
+  html {
+    @apply scrollbar-thin scrollbar-thumb-primary-500 scrollbar-track-primary-100 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scroll-smooth;
+  }
   body {
     background-color: var(--color-base-50);
     color: var(--color-neutral-700);

package/src/index.js

@@ -58,6 +58,16 @@ module.exports = plugin(function ({ addComponents }) {
         transform: "none",
         boxShadow: "none",
       },
+      "&:focus-visible": {
+        "--tw-outline-style": "none",
+        outlineStyle: "none",
+        "--tw-ring-shadow":
+          "var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor)",
+        boxShadow:
+          "var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+        "--tw-ring-color":
+          "color-mix(in oklab, var(--color-primary-500) 60%, transparent)",
+      },
     },
     ".btn-sm": {
       padding: "0.5rem 1rem",

package/src/scrollbar/index.js

@@ -0,0 +1,19 @@
+const plugin = require("tailwindcss/plugin");
+const {
+  addBaseStyles,
+  addBaseSizeUtilities,
+  addColorUtilities,
+  addRoundedUtilities,
+  addSizeUtilities,
+} = require("./utilities");
+const { addVariants } = require("./variants");
+
+module.exports = plugin((tailwind) => {
+  addBaseStyles(tailwind, "standard");
+  addBaseSizeUtilities(tailwind, "standard");
+  addColorUtilities(tailwind);
+  addVariants(tailwind);
+
+  addRoundedUtilities(tailwind);
+  addSizeUtilities(tailwind);
+});

package/src/scrollbar/utilities.js

@@ -0,0 +1,168 @@
+const flattenColorPaletteImport = require("tailwindcss/lib/util/flattenColorPalette");
+
+const importDefault = (mod) => (mod && mod.__esModule ? mod.default : mod);
+
+const flattenColorPalette = importDefault(flattenColorPaletteImport);
+
+const COMPONENTS = ["track", "thumb", "corner"];
+
+const scrollbarProperties = (properties, preferPseudoElements) => {
+  if (preferPseudoElements) {
+    return {
+      "@supports (-moz-appearance:none)": properties,
+    };
+  }
+
+  return properties;
+};
+
+const addBaseStyles = ({ addBase }, preferredStrategy) => {
+  addBase({
+    "*": scrollbarProperties(
+      {
+        "scrollbar-color": "initial",
+        "scrollbar-width": "initial",
+      },
+      preferredStrategy === "pseudoelements",
+    ),
+  });
+};
+
+const generateBaseUtilities = () => ({
+  ...Object.fromEntries(
+    COMPONENTS.map((component) => {
+      const base = `&::-webkit-scrollbar-${component}`;
+
+      return [
+        [
+          base,
+          {
+            "background-color": `var(--scrollbar-${component})`,
+            "border-radius": `var(--scrollbar-${component}-radius)`,
+          },
+        ],
+      ];
+    }).flat(),
+  ),
+});
+
+const generateScrollbarSizeUtilities = ({ preferPseudoElements }) => ({
+  ".scrollbar": {
+    ...generateBaseUtilities(),
+    ...scrollbarProperties(
+      {
+        "scrollbar-width": "auto",
+        "scrollbar-color":
+          "var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)",
+      },
+      preferPseudoElements,
+    ),
+
+    "&::-webkit-scrollbar": {
+      display: "block",
+      width: "var(--scrollbar-width, 16px)",
+      height: "var(--scrollbar-height, 16px)",
+    },
+  },
+
+  ".scrollbar-thin": {
+    ...generateBaseUtilities(),
+    ...scrollbarProperties(
+      {
+        "scrollbar-width": "thin",
+        "scrollbar-color":
+          "var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)",
+      },
+      preferPseudoElements,
+    ),
+
+    "&::-webkit-scrollbar": {
+      display: "block",
+      width: "8px",
+      height: "8px",
+    },
+  },
+
+  ".scrollbar-none": {
+    ...scrollbarProperties(
+      {
+        "scrollbar-width": "none",
+      },
+      preferPseudoElements,
+    ),
+
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+});
+
+const toColorValue = (maybeFunction) =>
+  typeof maybeFunction === "function" ? maybeFunction({}) : maybeFunction;
+
+const addColorUtilities = ({ matchUtilities, theme }) => {
+  const themeColors = flattenColorPalette(theme("colors"));
+  const colors = Object.fromEntries(
+    Object.entries(themeColors).map(([k, v]) => [k, toColorValue(v)]),
+  );
+
+  COMPONENTS.forEach((component) => {
+    matchUtilities(
+      {
+        [`scrollbar-${component}`]: (value) => ({
+          [`--scrollbar-${component}`]: toColorValue(value),
+        }),
+      },
+      {
+        values: colors,
+        type: "color",
+      },
+    );
+  });
+};
+
+const addRoundedUtilities = ({ theme, matchUtilities }) => {
+  COMPONENTS.forEach((component) => {
+    matchUtilities(
+      {
+        [`scrollbar-${component}-rounded`]: (value) => ({
+          [`--scrollbar-${component}-radius`]: value,
+        }),
+      },
+      {
+        values: theme("borderRadius"),
+      },
+    );
+  });
+};
+
+const addBaseSizeUtilities = ({ addUtilities }, preferredStrategy) => {
+  addUtilities(
+    generateScrollbarSizeUtilities({
+      preferPseudoElements: preferredStrategy === "pseudoelements",
+    }),
+  );
+};
+
+const addSizeUtilities = ({ matchUtilities, theme }) => {
+  ["width", "height"].forEach((dimension) => {
+    matchUtilities(
+      {
+        [`scrollbar-${dimension[0]}`]: (value) => ({
+          [`--scrollbar-${dimension}`]: value,
+        }),
+      },
+      {
+        values: theme(dimension),
+      },
+    );
+  });
+};
+
+module.exports = {
+  addBaseStyles,
+  addBaseSizeUtilities,
+  addColorUtilities,
+  addRoundedUtilities,
+  addSizeUtilities,
+};

package/src/scrollbar/variants.js

@@ -0,0 +1,12 @@
+const addVariants = ({ addVariant }) => {
+  addVariant("scrollbar-hover", "&::-webkit-scrollbar-thumb:hover");
+  addVariant("scrollbar-track-hover", "&::-webkit-scrollbar-track:hover");
+  addVariant("scrollbar-corner-hover", "&::-webkit-scrollbar-corner:hover");
+
+  addVariant("scrollbar-active", "&::-webkit-scrollbar-thumb:active");
+  addVariant("scrollbar-track-active", "&::-webkit-scrollbar-track:active");
+};
+
+module.exports = {
+  addVariants,
+};