cmat 0.0.21 → 0.0.23

package/styles/user-themes.scss

@@ -1 +1 @@
-$user-themes: (default: (selector: ".theme-default", primary: (50: #eef2ff, 100: #e0e7ff, 200: #c7d2fe, 300: #a5b4fc, 400: #818cf8, 500: #6366f1, 600: #4f46e5, 700: #4338ca, 800: #3730a3, 900: #312e81, 950: #1e1b4b, DEFAULT: #4f46e5, contrast: (50: #1e1b4b, 100: #1e1b4b, 200: #1e1b4b, 300: #1e1b4b, 400: #1e1b4b, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), accent: (50: #fdf2f8, 100: #fce7f3, 200: #fbcfe8, 300: #f9a8d4, 400: #f472b6, 500: #ec4899, 600: #db2777, 700: #be185d, 800: #9d174d, 900: #831843, 950: #500724, DEFAULT: #db2777, contrast: (50: #500724, 100: #500724, 200: #500724, 300: #500724, 400: #500724, 500: #500724, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), sky: (selector: ".theme-sky", primary: (50: #f0f9ff, 100: #e0f2fe, 200: #bae6fd, 300: #7dd3fc, 400: #38bdf8, 500: #0ea5e9, 600: #0284c7, 700: #0369a1, 800: #075985, 900: #0c4a6e, 950: #082f49, DEFAULT: #0ea5e9, contrast: (50: #082f49, 100: #082f49, 200: #082f49, 300: #082f49, 400: #082f49, 500: #082f49, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #082f49)), accent: (50: #f8fafc, 100: #f1f5f9, 200: #e2e8f0, 300: #cbd5e1, 400: #94a3b8, 500: #64748b, 600: #475569, 700: #334155, 800: #1e293b, 900: #0f172a, 950: #020617, DEFAULT: #475569, contrast: (50: #020617, 100: #020617, 200: #020617, 300: #020617, 400: #020617, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), teal: (selector: ".theme-teal", primary: (50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf, 500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e, DEFAULT: #0d9488, contrast: (50: #042f2e, 100: #042f2e, 200: #042f2e, 300: #042f2e, 400: #042f2e, 500: #042f2e, 600: #042f2e, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #042f2e)), accent: (50: #fff7ed, 100: #ffedd5, 200: #fed7aa, 300: #fdba74, 400: #fb923c, 500: #f97316, 600: #ea580c, 700: #c2410c, 800: #9a3412, 900: #7c2d12, 950: #431407, DEFAULT: #ea580c, contrast: (50: #431407, 100: #431407, 200: #431407, 300: #431407, 400: #431407, 500: #431407, 600: #431407, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #431407)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), rose: (selector: ".theme-rose", primary: (50: #fff1f2, 100: #ffe4e6, 200: #fecdd3, 300: #fda4af, 400: #fb7185, 500: #f43f5e, 600: #e11d48, 700: #be123c, 800: #9f1239, 900: #881337, 950: #4c0519, DEFAULT: #f43f5e, contrast: (50: #4c0519, 100: #4c0519, 200: #4c0519, 300: #4c0519, 400: #4c0519, 500: #4c0519, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #4c0519)), accent: (50: #eef2ff, 100: #e0e7ff, 200: #c7d2fe, 300: #a5b4fc, 400: #818cf8, 500: #6366f1, 600: #4f46e5, 700: #4338ca, 800: #3730a3, 900: #312e81, 950: #1e1b4b, DEFAULT: #6366f1, contrast: (50: #1e1b4b, 100: #1e1b4b, 200: #1e1b4b, 300: #1e1b4b, 400: #1e1b4b, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), violet: (selector: ".theme-violet", primary: (50: #f5f3ff, 100: #ede9fe, 200: #ddd6fe, 300: #c4b5fd, 400: #a78bfa, 500: #8b5cf6, 600: #7c3aed, 700: #6d28d9, 800: #5b21b6, 900: #4c1d95, 950: #2e1065, DEFAULT: #7c3aed, contrast: (50: #2e1065, 100: #2e1065, 200: #2e1065, 300: #2e1065, 400: #2e1065, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), accent: (50: #ecfdf5, 100: #d1fae5, 200: #a7f3d0, 300: #6ee7b7, 400: #34d399, 500: #10b981, 600: #059669, 700: #047857, 800: #065f46, 900: #064e3b, 950: #022c22, DEFAULT: #059669, contrast: (50: #022c22, 100: #022c22, 200: #022c22, 300: #022c22, 400: #022c22, 500: #022c22, 600: #022c22, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #022c22)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))), amber: (selector: ".theme-amber", primary: (50: #fffbeb, 100: #fef3c7, 200: #fde68a, 300: #fcd34d, 400: #fbbf24, 500: #f59e0b, 600: #d97706, 700: #b45309, 800: #92400e, 900: #78350f, 950: #451a03, DEFAULT: #f59e0b, contrast: (50: #451a03, 100: #451a03, 200: #451a03, 300: #451a03, 400: #451a03, 500: #451a03, 600: #451a03, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #451a03)), accent: (50: #f5f3ff, 100: #ede9fe, 200: #ddd6fe, 300: #c4b5fd, 400: #a78bfa, 500: #8b5cf6, 600: #7c3aed, 700: #6d28d9, 800: #5b21b6, 900: #4c1d95, 950: #2e1065, DEFAULT: #8b5cf6, contrast: (50: #2e1065, 100: #2e1065, 200: #2e1065, 300: #2e1065, 400: #2e1065, 500: #FFFFFF, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF)), warn: (50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171, 500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a, DEFAULT: #dc2626, contrast: (50: #450a0a, 100: #450a0a, 200: #450a0a, 300: #450a0a, 400: #450a0a, 500: #fef2f2, 600: #FFFFFF, 700: #FFFFFF, 800: #FFFFFF, 900: #FFFFFF, 950: #FFFFFF, DEFAULT: #FFFFFF))));
+$user-themes: (default: (selector: ".theme-default", primary: (50: #eef2ff, 100: #e0e7ff, 200: #c6d2ff, 300: #a3b3ff, 400: #7c86ff, 500: #615fff, 600: #4f39f6, 700: #432dd7, 800: #372aac, 900: #312c85, 950: #1e1a4d, DEFAULT: #4f39f6, contrast: (50: #1e1a4d, 100: #1e1a4d, 200: #1e1a4d, 300: #1e1a4d, 400: #1e1a4d, 500: #fff, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff)), accent: (50: #fdf2f8, 100: #fce7f3, 200: #fccee8, 300: #fda5d5, 400: #fb64b6, 500: #f6339a, 600: #e60076, 700: #c6005c, 800: #a3004c, 900: #861043, 950: #510424, DEFAULT: #e60076, contrast: (50: #510424, 100: #510424, 200: #510424, 300: #510424, 400: #510424, 500: #510424, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff)), warn: (50: #fef2f2, 100: #ffe2e2, 200: #ffc9c9, 300: #ffa2a2, 400: #ff6467, 500: #fb2c36, 600: #e7000b, 700: #c10007, 800: #9f0712, 900: #82181a, 950: #460809, DEFAULT: #e7000b, contrast: (50: #460809, 100: #460809, 200: #460809, 300: #460809, 400: #460809, 500: #fef2f2, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff))), sky: (selector: ".theme-sky", primary: (50: #f0f9ff, 100: #dff2fe, 200: #b8e6fe, 300: #74d4ff, 400: #00bcff, 500: #00a6f4, 600: #0084d1, 700: #0069a8, 800: #00598a, 900: #024a70, 950: #052f4a, DEFAULT: #00a6f4, contrast: (50: #052f4a, 100: #052f4a, 200: #052f4a, 300: #052f4a, 400: #052f4a, 500: #052f4a, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #052f4a)), accent: (50: #f8fafc, 100: #f1f5f9, 200: #e2e8f0, 300: #cad5e2, 400: #90a1b9, 500: #62748e, 600: #45556c, 700: #314158, 800: #1d293d, 900: #0f172b, 950: #020618, DEFAULT: #45556c, contrast: (50: #020618, 100: #020618, 200: #020618, 300: #020618, 400: #020618, 500: #fff, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff)), warn: (50: #fef2f2, 100: #ffe2e2, 200: #ffc9c9, 300: #ffa2a2, 400: #ff6467, 500: #fb2c36, 600: #e7000b, 700: #c10007, 800: #9f0712, 900: #82181a, 950: #460809, DEFAULT: #e7000b, contrast: (50: #460809, 100: #460809, 200: #460809, 300: #460809, 400: #460809, 500: #fef2f2, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff))), teal: (selector: ".theme-teal", primary: (50: #f0fdfa, 100: #cbfbf1, 200: #96f7e4, 300: #46ecd5, 400: #00d5be, 500: #00bba7, 600: #009689, 700: #00786f, 800: #005f5a, 900: #0b4f4a, 950: #022f2e, DEFAULT: #009689, contrast: (50: #022f2e, 100: #022f2e, 200: #022f2e, 300: #022f2e, 400: #022f2e, 500: #022f2e, 600: #022f2e, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #022f2e)), accent: (50: #fff7ed, 100: #ffedd4, 200: #ffd6a7, 300: #ffb86a, 400: #ff8904, 500: #ff6900, 600: #f54900, 700: #ca3500, 800: #9f2d00, 900: #7e2a0c, 950: #441306, DEFAULT: #f54900, contrast: (50: #441306, 100: #441306, 200: #441306, 300: #441306, 400: #441306, 500: #441306, 600: #441306, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #441306)), warn: (50: #fef2f2, 100: #ffe2e2, 200: #ffc9c9, 300: #ffa2a2, 400: #ff6467, 500: #fb2c36, 600: #e7000b, 700: #c10007, 800: #9f0712, 900: #82181a, 950: #460809, DEFAULT: #e7000b, contrast: (50: #460809, 100: #460809, 200: #460809, 300: #460809, 400: #460809, 500: #fef2f2, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff))), rose: (selector: ".theme-rose", primary: (50: #fff1f2, 100: #ffe4e6, 200: #ffccd3, 300: #ffa1ad, 400: #ff637e, 500: #ff2056, 600: #ec003f, 700: #c70036, 800: #a50036, 900: #8b0836, 950: #4d0218, DEFAULT: #ff2056, contrast: (50: #4d0218, 100: #4d0218, 200: #4d0218, 300: #4d0218, 400: #4d0218, 500: #4d0218, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #4d0218)), accent: (50: #eef2ff, 100: #e0e7ff, 200: #c6d2ff, 300: #a3b3ff, 400: #7c86ff, 500: #615fff, 600: #4f39f6, 700: #432dd7, 800: #372aac, 900: #312c85, 950: #1e1a4d, DEFAULT: #615fff, contrast: (50: #1e1a4d, 100: #1e1a4d, 200: #1e1a4d, 300: #1e1a4d, 400: #1e1a4d, 500: #fff, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff)), warn: (50: #fef2f2, 100: #ffe2e2, 200: #ffc9c9, 300: #ffa2a2, 400: #ff6467, 500: #fb2c36, 600: #e7000b, 700: #c10007, 800: #9f0712, 900: #82181a, 950: #460809, DEFAULT: #e7000b, contrast: (50: #460809, 100: #460809, 200: #460809, 300: #460809, 400: #460809, 500: #fef2f2, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff))), violet: (selector: ".theme-violet", primary: (50: #f5f3ff, 100: #ede9fe, 200: #ddd6ff, 300: #c4b4ff, 400: #a684ff, 500: #8e51ff, 600: #7f22fe, 700: #7008e7, 800: #5d0ec0, 900: #4d179a, 950: #2f0d68, DEFAULT: #7f22fe, contrast: (50: #2f0d68, 100: #2f0d68, 200: #2f0d68, 300: #2f0d68, 400: #2f0d68, 500: #fff, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff)), accent: (50: #ecfdf5, 100: #d0fae5, 200: #a4f4cf, 300: #5ee9b5, 400: #00d492, 500: #00bc7d, 600: #096, 700: #007a55, 800: #006045, 900: #004f3b, 950: #002c22, DEFAULT: #096, contrast: (50: #002c22, 100: #002c22, 200: #002c22, 300: #002c22, 400: #002c22, 500: #002c22, 600: #002c22, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #002c22)), warn: (50: #fef2f2, 100: #ffe2e2, 200: #ffc9c9, 300: #ffa2a2, 400: #ff6467, 500: #fb2c36, 600: #e7000b, 700: #c10007, 800: #9f0712, 900: #82181a, 950: #460809, DEFAULT: #e7000b, contrast: (50: #460809, 100: #460809, 200: #460809, 300: #460809, 400: #460809, 500: #fef2f2, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff))), amber: (selector: ".theme-amber", primary: (50: #fffbeb, 100: #fef3c6, 200: #fee685, 300: #ffd230, 400: #ffba00, 500: #fd9a00, 600: #e17100, 700: #bb4d00, 800: #973c00, 900: #7b3306, 950: #461901, DEFAULT: #fd9a00, contrast: (50: #461901, 100: #461901, 200: #461901, 300: #461901, 400: #461901, 500: #461901, 600: #461901, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #461901)), accent: (50: #f5f3ff, 100: #ede9fe, 200: #ddd6ff, 300: #c4b4ff, 400: #a684ff, 500: #8e51ff, 600: #7f22fe, 700: #7008e7, 800: #5d0ec0, 900: #4d179a, 950: #2f0d68, DEFAULT: #8e51ff, contrast: (50: #2f0d68, 100: #2f0d68, 200: #2f0d68, 300: #2f0d68, 400: #2f0d68, 500: #fff, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff)), warn: (50: #fef2f2, 100: #ffe2e2, 200: #ffc9c9, 300: #ffa2a2, 400: #ff6467, 500: #fb2c36, 600: #e7000b, 700: #c10007, 800: #9f0712, 900: #82181a, 950: #460809, DEFAULT: #e7000b, contrast: (50: #460809, 100: #460809, 200: #460809, 300: #460809, 400: #460809, 500: #fef2f2, 600: #fff, 700: #fff, 800: #fff, 900: #fff, 950: #fff, DEFAULT: #fff))));

package/tailwind/plugins/helpers.js

@@ -0,0 +1,16 @@
+/**
+ * Gets the underlying default import of a module.
+ *
+ * This is used to handle internal imoprts from Tailwind, since Tailwind Play
+ * handles these imports differently.
+ *
+ * @template T
+ * @param {T | { __esModule: unknown, default: T }} mod The module
+ * @returns {T} The bare export
+ */
+// eslint-disable-next-line no-underscore-dangle
+const importDefault = mod => (mod && mod.__esModule ? mod.default : mod);
+
+module.exports = {
+  importDefault
+};

package/tailwind/plugins/scrollbar/index.js

@@ -0,0 +1,31 @@
+// TODO: Figure out why the linter is unhappy with this import
+// eslint-disable-next-line import/no-unresolved
+const plugin = require('tailwindcss/plugin');
+const {
+  addBaseStyles,
+  addBaseSizeUtilities,
+  addColorUtilities,
+  addRoundedUtilities,
+  addSizeUtilities
+} = require('./utilities');
+const { addVariants } = require('./variants');
+
+module.exports = plugin.withOptions((options = {}) => tailwind => {
+  let preferredStrategy = options.preferredStrategy ?? 'standard';
+
+  if (preferredStrategy !== 'standard' && preferredStrategy !== 'pseudoelements') {
+    // eslint-disable-next-line no-console
+    console.warn('WARNING: tailwind-scrollbar preferredStrategy should be \'standard\' or \'pseudoelements\'');
+    preferredStrategy = 'standard';
+  }
+
+  addBaseStyles(tailwind, preferredStrategy);
+  addBaseSizeUtilities(tailwind, preferredStrategy);
+  addColorUtilities(tailwind);
+  addVariants(tailwind);
+
+  if (options.nocompatible) {
+    addRoundedUtilities(tailwind);
+    addSizeUtilities(tailwind);
+  }
+});

package/tailwind/plugins/scrollbar/typedefs.js

@@ -0,0 +1,9 @@
+/**
+ * @typedef {object} TailwindPlugin
+ * @property {Function} matchUtilities - Adds utilities to tailwind
+ * @property {Function} theme - Accesses tailwind's theme
+ * @property {Function} addVariant - Adds a variant to tailwind
+ * @property {Function} config - Accesses tailwind's configuration
+ */
+
+exports.unused = {};

package/tailwind/plugins/scrollbar/utilities.js

@@ -0,0 +1,201 @@
+const path = require('path');
+const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
+const typedefs = require(path.resolve(__dirname, ('./typedefs')));
+const { importDefault } = require(path.resolve(__dirname, ('../helpers')));
+
+// Tailwind Play will import these internal imports as ES6 imports, while most
+// other workflows will import them as CommonJS imports.
+const flattenColorPalette = importDefault(flattenColorPaletteImport);
+
+const COMPONENTS = ['track', 'thumb', 'corner'];
+
+/**
+ * @param {Record<never, unknown>} properties - The properties to assign
+ * @param {boolean} preferPseudoElements - If true, only browsers that cannot
+ *    use pseudoelements will specify scrollbar properties
+ * @returns {Record<string, unknown>} - The generated CSS rules
+ */
+const scrollbarProperties = (properties, preferPseudoElements) => {
+  if (preferPseudoElements) {
+    return {
+      '@supports (-moz-appearance:none)': properties
+    };
+  }
+
+  return properties;
+};
+
+/**
+ * Base resets to make the plugin's utilities work
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ * @param {'standard' | 'peseudoelements'} preferredStrategy - The preferred
+ *    scrollbar styling strategy: standards track or pseudoelements
+ */
+const addBaseStyles = ({ addBase }, preferredStrategy) => {
+  addBase({
+    '*': scrollbarProperties({
+      'scrollbar-color': 'initial',
+      'scrollbar-width': 'initial'
+    }, preferredStrategy === 'pseudoelements')
+  });
+};
+
+/**
+ * Generates utilties that tell an element what to do with
+ * --scrollbar-track and --scrollbar-thumb custom properties
+ *
+ * @returns {Record<string, unknown>} - The generated CSS
+ */
+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())
+});
+
+/**
+ * Utilities for initializing a custom styled scrollbar, which implicitly set
+ * the scrollbar's size
+ *
+ * @param {object} options - Options
+ * @param {boolean} options.preferPseudoElements - If true, only browsers that
+ *    cannot use pseudoelements will specify scrollbar-width
+ * @returns {Record<string, unknown>} - Base size utilities for scrollbars
+ */
+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'
+    }
+  }
+});
+
+/**
+ * Converts a color value or function to a color value
+ *
+ * @param {string | Function} maybeFunction - The color value or function
+ * @returns {string} - The color value
+ */
+const toColorValue = maybeFunction => (typeof maybeFunction === 'function' ? maybeFunction({}) : maybeFunction);
+
+/**
+ * Adds scrollbar-COMPONENT-COLOR utilities for every scrollbar component.
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+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).replace(/<alpha-value>/g, '1')
+        })
+      },
+      {
+        values: colors,
+        type: 'color'
+      }
+    );
+  });
+};
+
+/**
+ * Adds scrollbar-COMPONENT-rounded-VALUE utilities for every scrollbar
+ * component.
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+const addRoundedUtilities = ({ theme, matchUtilities }) => {
+  COMPONENTS.forEach(component => {
+    matchUtilities(
+      {
+        [`scrollbar-${component}-rounded`]: value => ({
+          [`--scrollbar-${component}-radius`]: value
+        })
+      },
+      {
+        values: theme('borderRadius')
+      }
+    );
+  });
+};
+
+/**
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ * @param {'standard' | 'peseudoelements'} preferredStrategy - The preferred
+ *    scrollbar styling strategy: standards track or pseudoelements
+ */
+const addBaseSizeUtilities = ({ addUtilities }, preferredStrategy) => {
+  addUtilities(generateScrollbarSizeUtilities({
+    preferPseudoElements: preferredStrategy === 'pseudoelements'
+  }));
+};
+
+/**
+ * Adds scrollbar-w-* and scrollbar-h-* utilities
+ *
+ * @param {typedefs.TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+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/tailwind/plugins/scrollbar/variants.js

@@ -0,0 +1,30 @@
+/** @typedef {import('./typedefs').TailwindPlugin} TailwindPlugin */
+
+/**
+ * Adds scrollbar variants for styling webkit scrollbars' hover and active
+ * states.
+ *
+ * Earlier iterations of this plugin hijacked the hover: and active: variants
+ * directly to create a cleaner syntax, but there are several issues with that
+ * approach:
+ *     - It made the plugin prone to breaking other unrelated styles
+ *     - It made logic like "make an element's scrollbar green when the
+ *       _element_ is hovered impossible. (This is unusual, but should still
+ *       be possible.)
+ *     - It straight up does not work in Tailwind v4.
+ *
+ * @param {TailwindPlugin} tailwind - Tailwind's plugin object
+ */
+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');
+    // Corners can't be active, so they don't get their own active variant.
+  };
+  
+  module.exports = {
+    addVariants
+  };