From bb3e083faeb9d0b84f8696eb83f97b717d53e5d9 Mon Sep 17 00:00:00 2001
From: Mikolaj Smolenski <smolenski.mikolaj@gmail.com>
Date: Wed, 15 Mar 2023 09:43:10 +0100
Subject: [PATCH 1/5] Add range customization

---
 demo/sites/forms/range.html |  11 +-
 src/js/plugin.js            | 738 +++++++++++++++++++-----------------
 2 files changed, 403 insertions(+), 346 deletions(-)

diff --git a/demo/sites/forms/range.html b/demo/sites/forms/range.html
index 546f42ab3..6c7e3f630 100644
--- a/demo/sites/forms/range.html
+++ b/demo/sites/forms/range.html
@@ -39,7 +39,7 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           id="customRange1" />
       </div>
 
@@ -55,7 +55,8 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-1.5 w-full appearance-none
+        rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           id="disabledRange"
           disabled />
       </div>
@@ -72,7 +73,8 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-1.5 w-full cursor-pointer
+        appearance-none rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           min="0"
           max="5"
           id="customRange2" />
@@ -90,7 +92,8 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-1.5 w-full cursor-pointer
+        appearance-none rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           min="0"
           max="5"
           step="0.5"
diff --git a/src/js/plugin.js b/src/js/plugin.js
index 3f2bdf447..0929b7e58 100644
--- a/src/js/plugin.js
+++ b/src/js/plugin.js
@@ -10,353 +10,407 @@ This program is distributed in the hope that it will be useful, but WITHOUT ANY
 */
 
 const plugin = require("tailwindcss/plugin");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const { spacing, borderRadius } = defaultTheme;
 
-module.exports = plugin(() => {}, {
-  theme: {
-    extend: {
-      screens: {
-        xs: "320px",
+module.exports = plugin(
+  ({ addBase, theme }) => {
+    addBase({
+      [['input[type="range"]::-webkit-slider-thumb']]: {
+        height: spacing[4],
+        width: spacing[4],
+        background: theme("colors.primary.600"),
+        "border-radius": borderRadius.full,
+        border: 0,
+        appearance: "none",
+        "-moz-appearance": "none",
+        "-webkit-appearance": "none",
+        cursor: "pointer",
       },
-      fontFamily: {
-        sans: ["Roboto", "sans-serif"],
-        body: ["Roboto", "sans-serif"],
-        mono: ["ui-monospace", "monospace"],
+      [['input[type="range"]:disabled::-webkit-slider-thumb']]: {
+        background: theme("colors.neutral.400"),
       },
-      boxShadow: {
-        "te-primary": "0 0 0 1px rgb(59, 113, 202)",
+      [['.dark input[type="range"]:disabled::-webkit-slider-thumb']]: {
+        background: theme("colors.neutral.500"),
       },
-      keyframes: {
-        "fade-in": {
-          "0%": { opacity: 0 },
-          "100%": { opacity: 1 },
-        },
-        "fade-out": {
-          "0%": { opacity: 1 },
-          "100%": { opacity: 0 },
-        },
-        "fade-in-down": {
-          "0%": {
-            opacity: 0,
-            transform: "translate3d(0, -100%, 0)",
-          },
-          "100%": {
-            opacity: 1,
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "fade-in-left": {
-          "0%": {
-            opacity: 0,
-            transform: "translate3d(-100%, 0, 0)",
-          },
-          "100%": {
-            opacity: 1,
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "fade-in-right": {
-          "0%": {
-            opacity: 0,
-            transform: "translate3d(100%, 0, 0)",
-          },
-          "100%": {
-            opacity: 1,
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "fade-in-up": {
-          "0%": {
-            opacity: 0,
-            transform: "translate3d(0, 100%, 0)",
-          },
-          "100%": {
-            opacity: 1,
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "fade-out-down": {
-          "0%": {
-            opacity: 1,
-          },
-          "100%": {
-            opacity: 0,
-            transform: "translate3d(0, 100%, 0)",
-          },
-        },
-        "fade-out-left": {
-          "0%": {
-            opacity: 1,
-          },
-          "100%": {
-            opacity: 0,
-            transform: "translate3d(-100%, 0, 0)",
-          },
-        },
-        "fade-out-right": {
-          "0%": {
-            opacity: 1,
-          },
-          "100%": {
-            opacity: 0,
-            transform: "translate3d(100%, 0, 0)",
-          },
-        },
-        "fade-out-up": {
-          "0%": {
-            opacity: 1,
-          },
-          "100%": {
-            opacity: 0,
-            transform: "translate3d(0, -100%, 0)",
-          },
-        },
-        "slide-in-down": {
-          "0%": {
-            visibility: "visible",
-            transform: "translate3d(0, -100%, 0)",
-          },
-          "100%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "slide-in-left": {
-          "0%": {
-            visibility: "visible",
-            transform: "translate3d(-100%, 0, 0)",
-          },
-          "100%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "slide-in-right": {
-          "0%": {
-            visibility: "visible",
-            transform: "translate3d(100%, 0, 0)",
-          },
-          "100%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "slide-in-up": {
-          "0%": {
-            visibility: "visible",
-            transform: "translate3d(0, 100%, 0)",
-          },
-          "100%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-        },
-        "slide-out-down": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            visibility: "hidden",
-            transform: "translate3d(0, 100%, 0)",
-          },
-        },
-        "slide-out-left": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            visibility: "hidden",
-            transform: "translate3d(-100%, 0, 0)",
-          },
-        },
-        "slide-out-right": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            visibility: "hidden",
-            transform: "translate3d(100%, 0, 0)",
-          },
-        },
-        "slide-out-up": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            visibility: "hidden",
-            transform: "translate3d(0, -100%, 0)",
-          },
-        },
-        "slide-down": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            transform: "translate3d(0, 100%, 0)",
-          },
-        },
-        "slide-left": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            transform: "translate3d(-100%, 0, 0)",
-          },
-        },
-        "slide-right": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            transform: "translate3d(100%, 0, 0)",
-          },
-        },
-        "slide-up": {
-          "0%": {
-            transform: "translate3d(0, 0, 0)",
-          },
-          "100%": {
-            transform: "translate3d(0, -100%, 0)",
-          },
-        },
-        "zoom-in": {
-          "0%": {
-            opacity: 0,
-            transform: "scale3d(0.3, 0.3, 0.3)",
-          },
-          "50%": {
-            opacity: 1,
-          },
-        },
-        "zoom-out": {
-          "0%": {
-            opacity: 1,
-          },
-          "50%": {
-            opacity: 0,
-            transform: "scale3d(0.3, 0.3, 0.3)",
-          },
-          "100%": {
-            opacity: 0,
-          },
-        },
-        tada: {
-          "0%": {
-            transform: "scale3d(1, 1, 1)",
-          },
-          "10%, 20%": {
-            transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
-          },
-          "30%, 50%, 70%, 90%": {
-            transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
-          },
-          "40%, 60%, 80%": {
-            transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
-          },
-          "100%": {
-            transform: "scale3d(1, 1, 1)",
-          },
-        },
-        "spinner-grow": {
-          "0%": {
-            transform: "scale(0)",
-          },
-          "50%": {
-            transform: "none",
-            opacity: "1",
-          },
-        },
-        "placeholder-wave": {
-          "100%": { maskPosition: "-200% 0%" },
-        },
-        "show-up-clock": {
-          "0%": {
-            opacity: "0",
-            transform: "scale(0.7)",
-          },
-          "100%": {
-            opacity: "1",
-            transform: "scale(1)",
-          },
-        },
+      [['input[type="range"]::-moz-range-thumb']]: {
+        height: spacing[4],
+        width: spacing[4],
+        background: theme("colors.primary.600"),
+        "border-radius": borderRadius.full,
+        border: 0,
+        appearance: "none",
+        "-moz-appearance": "none",
+        "-webkit-appearance": "none",
+        cursor: "pointer",
       },
-      colors: {
-        primary: {
-          DEFAULT: "#3B71CA",
-          50: "#F1F5FB",
-          100: "#E3EBF7",
-          200: "#C7D7F0",
-          300: "#ABC2E8",
-          400: "#8FAEE0",
-          500: "#6590D5",
-          600: "#3061AF",
-          700: "#285192",
-          800: "#204075",
-          900: "#183058",
-          "accent-100": "#d9e4f3",
-          "accent-200": "#cedbee",
-        },
-        secondary: {
-          DEFAULT: "#9FA6B2",
-          50: "#F8F9F9",
-          100: "#F1F2F4",
-          200: "#E4E6E9",
-          300: "#D6D9DE",
-          400: "#C8CCD3",
-          500: "#B3B9C2",
-          600: "#848D9C",
-          700: "#6B7585",
-          800: "#565D6B",
-          900: "#404650",
-        },
-        success: {
-          DEFAULT: "#14A44D",
-          50: "#EAFCF2",
-          100: "#D6FAE4",
-          200: "#ACF5C9",
-          300: "#83F0AE",
-          400: "#59EA93",
-          500: "#1CE26B",
-          600: "#118C42",
-          700: "#0E7537",
-          800: "#0C5D2C",
-          900: "#094621",
-        },
-        danger: {
-          DEFAULT: "#DC4C64",
-          50: "#FCF2F4",
-          100: "#FAE5E9",
-          200: "#F5CCD3",
-          300: "#F0B2BD",
-          400: "#EB99A6",
-          500: "#E37285",
-          600: "#D42A46",
-          700: "#B0233A",
-          800: "#8D1C2F",
-          900: "#6A1523",
-        },
-        warning: {
-          DEFAULT: "#E4A11B",
-          50: "#FDF8EF",
-          100: "#FBF2DE",
-          200: "#F7E4BE",
-          300: "#F4D79D",
-          400: "#F0C97D",
-          500: "#EAB54C",
-          600: "#C48A17",
-          700: "#A37313",
-          800: "#825C0F",
-          900: "#62450B",
-        },
-        info: {
-          DEFAULT: "#54B4D3",
-          50: "#F3FAFC",
-          100: "#E7F4F9",
-          200: "#CEE9F2",
-          300: "#B6DFEC",
-          400: "#9ED4E6",
-          500: "#79C4DC",
-          600: "#34A4CA",
-          700: "#2B89A8",
-          800: "#236D86",
-          900: "#1A5265",
+      [['input[type="range"]:disabled::-moz-range-thumb']]: {
+        background: theme("colors.neutral.400"),
+      },
+      [['.dark input[type="range"]:disabled::-moz-range-thumb']]: {
+        background: theme("colors.neutral.500"),
+      },
+      [['input[type="range"]::-moz-range-progress']]: {
+        background: theme("colors.primary.500"),
+      },
+      [['input[type="range"]::-ms-fill-lower']]: {
+        background: theme("colors.primary.500"),
+      },
+      [['input[type="range"]:focus']]: {
+        outline: "none",
+      },
+      [['input[type="range"]:focus::-webkit-slider-thumb']]: {
+        background: theme("colors.primary.500"),
+      },
+    });
+  },
+  {
+    theme: {
+      extend: {
+        screens: {
+          xs: "320px",
+        },
+        fontFamily: {
+          sans: ["Roboto", "sans-serif"],
+          body: ["Roboto", "sans-serif"],
+          mono: ["ui-monospace", "monospace"],
+        },
+        boxShadow: {
+          "te-primary": "0 0 0 1px rgb(59, 113, 202)",
+        },
+        keyframes: {
+          "fade-in": {
+            "0%": { opacity: 0 },
+            "100%": { opacity: 1 },
+          },
+          "fade-out": {
+            "0%": { opacity: 1 },
+            "100%": { opacity: 0 },
+          },
+          "fade-in-down": {
+            "0%": {
+              opacity: 0,
+              transform: "translate3d(0, -100%, 0)",
+            },
+            "100%": {
+              opacity: 1,
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "fade-in-left": {
+            "0%": {
+              opacity: 0,
+              transform: "translate3d(-100%, 0, 0)",
+            },
+            "100%": {
+              opacity: 1,
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "fade-in-right": {
+            "0%": {
+              opacity: 0,
+              transform: "translate3d(100%, 0, 0)",
+            },
+            "100%": {
+              opacity: 1,
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "fade-in-up": {
+            "0%": {
+              opacity: 0,
+              transform: "translate3d(0, 100%, 0)",
+            },
+            "100%": {
+              opacity: 1,
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "fade-out-down": {
+            "0%": {
+              opacity: 1,
+            },
+            "100%": {
+              opacity: 0,
+              transform: "translate3d(0, 100%, 0)",
+            },
+          },
+          "fade-out-left": {
+            "0%": {
+              opacity: 1,
+            },
+            "100%": {
+              opacity: 0,
+              transform: "translate3d(-100%, 0, 0)",
+            },
+          },
+          "fade-out-right": {
+            "0%": {
+              opacity: 1,
+            },
+            "100%": {
+              opacity: 0,
+              transform: "translate3d(100%, 0, 0)",
+            },
+          },
+          "fade-out-up": {
+            "0%": {
+              opacity: 1,
+            },
+            "100%": {
+              opacity: 0,
+              transform: "translate3d(0, -100%, 0)",
+            },
+          },
+          "slide-in-down": {
+            "0%": {
+              visibility: "visible",
+              transform: "translate3d(0, -100%, 0)",
+            },
+            "100%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "slide-in-left": {
+            "0%": {
+              visibility: "visible",
+              transform: "translate3d(-100%, 0, 0)",
+            },
+            "100%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "slide-in-right": {
+            "0%": {
+              visibility: "visible",
+              transform: "translate3d(100%, 0, 0)",
+            },
+            "100%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "slide-in-up": {
+            "0%": {
+              visibility: "visible",
+              transform: "translate3d(0, 100%, 0)",
+            },
+            "100%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+          },
+          "slide-out-down": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              visibility: "hidden",
+              transform: "translate3d(0, 100%, 0)",
+            },
+          },
+          "slide-out-left": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              visibility: "hidden",
+              transform: "translate3d(-100%, 0, 0)",
+            },
+          },
+          "slide-out-right": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              visibility: "hidden",
+              transform: "translate3d(100%, 0, 0)",
+            },
+          },
+          "slide-out-up": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              visibility: "hidden",
+              transform: "translate3d(0, -100%, 0)",
+            },
+          },
+          "slide-down": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              transform: "translate3d(0, 100%, 0)",
+            },
+          },
+          "slide-left": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              transform: "translate3d(-100%, 0, 0)",
+            },
+          },
+          "slide-right": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              transform: "translate3d(100%, 0, 0)",
+            },
+          },
+          "slide-up": {
+            "0%": {
+              transform: "translate3d(0, 0, 0)",
+            },
+            "100%": {
+              transform: "translate3d(0, -100%, 0)",
+            },
+          },
+          "zoom-in": {
+            "0%": {
+              opacity: 0,
+              transform: "scale3d(0.3, 0.3, 0.3)",
+            },
+            "50%": {
+              opacity: 1,
+            },
+          },
+          "zoom-out": {
+            "0%": {
+              opacity: 1,
+            },
+            "50%": {
+              opacity: 0,
+              transform: "scale3d(0.3, 0.3, 0.3)",
+            },
+            "100%": {
+              opacity: 0,
+            },
+          },
+          tada: {
+            "0%": {
+              transform: "scale3d(1, 1, 1)",
+            },
+            "10%, 20%": {
+              transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
+            },
+            "30%, 50%, 70%, 90%": {
+              transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
+            },
+            "40%, 60%, 80%": {
+              transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
+            },
+            "100%": {
+              transform: "scale3d(1, 1, 1)",
+            },
+          },
+          "spinner-grow": {
+            "0%": {
+              transform: "scale(0)",
+            },
+            "50%": {
+              transform: "none",
+              opacity: "1",
+            },
+          },
+          "placeholder-wave": {
+            "100%": { maskPosition: "-200% 0%" },
+          },
+          "show-up-clock": {
+            "0%": {
+              opacity: "0",
+              transform: "scale(0.7)",
+            },
+            "100%": {
+              opacity: "1",
+              transform: "scale(1)",
+            },
+          },
+        },
+        colors: {
+          primary: {
+            DEFAULT: "#3B71CA",
+            50: "#F1F5FB",
+            100: "#E3EBF7",
+            200: "#C7D7F0",
+            300: "#ABC2E8",
+            400: "#8FAEE0",
+            500: "#6590D5",
+            600: "#3061AF",
+            700: "#285192",
+            800: "#204075",
+            900: "#183058",
+            "accent-100": "#d9e4f3",
+            "accent-200": "#cedbee",
+          },
+          secondary: {
+            DEFAULT: "#9FA6B2",
+            50: "#F8F9F9",
+            100: "#F1F2F4",
+            200: "#E4E6E9",
+            300: "#D6D9DE",
+            400: "#C8CCD3",
+            500: "#B3B9C2",
+            600: "#848D9C",
+            700: "#6B7585",
+            800: "#565D6B",
+            900: "#404650",
+          },
+          success: {
+            DEFAULT: "#14A44D",
+            50: "#EAFCF2",
+            100: "#D6FAE4",
+            200: "#ACF5C9",
+            300: "#83F0AE",
+            400: "#59EA93",
+            500: "#1CE26B",
+            600: "#118C42",
+            700: "#0E7537",
+            800: "#0C5D2C",
+            900: "#094621",
+          },
+          danger: {
+            DEFAULT: "#DC4C64",
+            50: "#FCF2F4",
+            100: "#FAE5E9",
+            200: "#F5CCD3",
+            300: "#F0B2BD",
+            400: "#EB99A6",
+            500: "#E37285",
+            600: "#D42A46",
+            700: "#B0233A",
+            800: "#8D1C2F",
+            900: "#6A1523",
+          },
+          warning: {
+            DEFAULT: "#E4A11B",
+            50: "#FDF8EF",
+            100: "#FBF2DE",
+            200: "#F7E4BE",
+            300: "#F4D79D",
+            400: "#F0C97D",
+            500: "#EAB54C",
+            600: "#C48A17",
+            700: "#A37313",
+            800: "#825C0F",
+            900: "#62450B",
+          },
+          info: {
+            DEFAULT: "#54B4D3",
+            50: "#F3FAFC",
+            100: "#E7F4F9",
+            200: "#CEE9F2",
+            300: "#B6DFEC",
+            400: "#9ED4E6",
+            500: "#79C4DC",
+            600: "#34A4CA",
+            700: "#2B89A8",
+            800: "#236D86",
+            900: "#1A5265",
+          },
         },
       },
     },
-  },
-});
+  }
+);

From bb1cc04f172c253f5a44ea0b1ead282d9650afb4 Mon Sep 17 00:00:00 2001
From: Marta Szymanska <m.szymanska@mdbootstrap.com>
Date: Sat, 18 Mar 2023 00:02:20 +0100
Subject: [PATCH 2/5] Add fixes to range input

---
 demo/sites/forms/range.html                   | 14 ++++++------
 .../docs/standard/forms/range/index.html      | 22 ++++++++++++-------
 src/js/plugin.js                              | 10 ++++-----
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/demo/sites/forms/range.html b/demo/sites/forms/range.html
index 6c7e3f630..5363946f8 100644
--- a/demo/sites/forms/range.html
+++ b/demo/sites/forms/range.html
@@ -39,7 +39,7 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           id="customRange1" />
       </div>
 
@@ -55,8 +55,8 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full appearance-none
-        rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+          class="transparent h-[4px] w-full appearance-none
+        border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           id="disabledRange"
           disabled />
       </div>
@@ -73,8 +73,8 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer
-        appearance-none rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+          class="transparent h-[4px] w-full cursor-pointer
+        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           min="0"
           max="5"
           id="customRange2" />
@@ -92,8 +92,8 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer
-        appearance-none rounded-lg border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+          class="transparent h-[4px] w-full cursor-pointer
+        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           min="0"
           max="5"
           step="0.5"
diff --git a/site/content/docs/standard/forms/range/index.html b/site/content/docs/standard/forms/range/index.html
index 85590fa8a..be0f9f46f 100644
--- a/site/content/docs/standard/forms/range/index.html
+++ b/site/content/docs/standard/forms/range/index.html
@@ -40,7 +40,7 @@
     >
     <input
       type="range"
-      class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+      class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
       id="customRange1" />
   </div>
   {{< /twsnippet/demo >}}
@@ -58,7 +58,7 @@
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           id="customRange1" />
       </div>
       {{< /twsnippet/code >}}
@@ -180,7 +180,8 @@
     >
     <input
       type="range"
-      class="transparent h-1.5 w-full appearance-none rounded-lg border-transparent bg-neutral-200"
+      class="transparent h-[4px] w-full appearance-none
+  border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
       id="disabledRange"
       disabled />
   </div>
@@ -199,7 +200,8 @@
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-[4px] w-full appearance-none
+        border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           id="disabledRange"
           disabled />
       </div>
@@ -235,7 +237,8 @@
     >
     <input
       type="range"
-      class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+      class="transparent h-[4px] w-full cursor-pointer
+  appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
       min="0"
       max="5"
       id="customRange2" />
@@ -256,7 +259,8 @@
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-[4px] w-full cursor-pointer
+        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           min="0"
           max="5"
           id="customRange2" />
@@ -293,7 +297,8 @@
     >
     <input
       type="range"
-      class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+      class="transparent h-[4px] w-full cursor-pointer
+  appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
       min="0"
       max="5"
       step="0.5"
@@ -315,7 +320,8 @@
         >
         <input
           type="range"
-          class="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
+          class="transparent h-[4px] w-full cursor-pointer
+        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
           min="0"
           max="5"
           step="0.5"
diff --git a/src/js/plugin.js b/src/js/plugin.js
index 0929b7e58..41410d81c 100644
--- a/src/js/plugin.js
+++ b/src/js/plugin.js
@@ -19,7 +19,7 @@ module.exports = plugin(
       [['input[type="range"]::-webkit-slider-thumb']]: {
         height: spacing[4],
         width: spacing[4],
-        background: theme("colors.primary.600"),
+        background: theme("colors.primary.DEFAULT"),
         "border-radius": borderRadius.full,
         border: 0,
         appearance: "none",
@@ -36,7 +36,7 @@ module.exports = plugin(
       [['input[type="range"]::-moz-range-thumb']]: {
         height: spacing[4],
         width: spacing[4],
-        background: theme("colors.primary.600"),
+        background: theme("colors.primary.DEFAULT"),
         "border-radius": borderRadius.full,
         border: 0,
         appearance: "none",
@@ -51,16 +51,16 @@ module.exports = plugin(
         background: theme("colors.neutral.500"),
       },
       [['input[type="range"]::-moz-range-progress']]: {
-        background: theme("colors.primary.500"),
+        background: theme("colors.primary.400"),
       },
       [['input[type="range"]::-ms-fill-lower']]: {
-        background: theme("colors.primary.500"),
+        background: theme("colors.primary.400"),
       },
       [['input[type="range"]:focus']]: {
         outline: "none",
       },
       [['input[type="range"]:focus::-webkit-slider-thumb']]: {
-        background: theme("colors.primary.500"),
+        background: theme("colors.primary.400"),
       },
     });
   },

From 7563813a707ebd14ea5bf0bfe976f7a0f6d55ef8 Mon Sep 17 00:00:00 2001
From: Marta Wierzbicka <martussky@MacBook-Pro-Marta.local>
Date: Fri, 14 Apr 2023 20:38:20 +0200
Subject: [PATCH 3/5] Add small fixes to the range input

---
 demo/sites/forms/range.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/sites/forms/range.html b/demo/sites/forms/range.html
index 5363946f8..dd5b8805b 100644
--- a/demo/sites/forms/range.html
+++ b/demo/sites/forms/range.html
@@ -39,7 +39,7 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         >
         <input
           type="range"
-          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
           id="customRange1" />
       </div>
 
@@ -56,7 +56,7 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         <input
           type="range"
           class="transparent h-[4px] w-full appearance-none
-        border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+        border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600"
           id="disabledRange"
           disabled />
       </div>
@@ -74,7 +74,7 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         <input
           type="range"
           class="transparent h-[4px] w-full cursor-pointer
-        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600"
           min="0"
           max="5"
           id="customRange2" />
@@ -93,7 +93,7 @@ <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
         <input
           type="range"
           class="transparent h-[4px] w-full cursor-pointer
-        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600"
           min="0"
           max="5"
           step="0.5"

From 0590998c0a0908e3069340fc1c88715c8384c800 Mon Sep 17 00:00:00 2001
From: Marta Wierzbicka <martussky@MacBook-Pro-Marta.local>
Date: Fri, 21 Apr 2023 22:05:19 +0200
Subject: [PATCH 4/5] Fix custom range colors

---
 .../docs/standard/forms/range/index.html      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/content/docs/standard/forms/range/index.html b/site/content/docs/standard/forms/range/index.html
index 5310622f9..2a11db5ee 100644
--- a/site/content/docs/standard/forms/range/index.html
+++ b/site/content/docs/standard/forms/range/index.html
@@ -40,7 +40,7 @@
     >
     <input
       type="range"
-      class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+      class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
       id="customRange1" />
   </div>
   {{< /twsnippet/demo >}}
@@ -58,7 +58,7 @@
         >
         <input
           type="range"
-          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
           id="customRange1" />
       </div>
       {{< /twsnippet/code >}}
@@ -363,7 +363,7 @@
     <input
       type="range"
       class="transparent h-[4px] w-full appearance-none
-  border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+  border-transparent bg-neutral-200 dark:bg-neutral-600"
       id="disabledRange"
       disabled />
   </div>
@@ -383,7 +383,7 @@
         <input
           type="range"
           class="transparent h-[4px] w-full appearance-none
-        border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+        border-transparent bg-neutral-200 dark:bg-neutral-600"
           id="disabledRange"
           disabled />
       </div>
@@ -420,7 +420,7 @@
     <input
       type="range"
       class="transparent h-[4px] w-full cursor-pointer
-  appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+  appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
       min="0"
       max="5"
       id="customRange2" />
@@ -442,7 +442,7 @@
         <input
           type="range"
           class="transparent h-[4px] w-full cursor-pointer
-        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+        appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
           min="0"
           max="5"
           id="customRange2" />
@@ -480,7 +480,7 @@
     <input
       type="range"
       class="transparent h-[4px] w-full cursor-pointer
-  appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+  appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
       min="0"
       max="5"
       step="0.5"
@@ -503,7 +503,7 @@
         <input
           type="range"
           class="transparent h-[4px] w-full cursor-pointer
-        appearance-none border-transparent bg-neutral-200 focus:bg-neutral-300 dark:bg-neutral-600 dark:focus:bg-neutral-500"
+        appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
           min="0"
           max="5"
           step="0.5"
@@ -529,14 +529,14 @@ <h2 class="mb-5 mt-0 text-3xl font-semibold leading-normal" data-te-spy-item>
       href="https://tailwind-elements.com/docs/standard/components/progress/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:active:bg-neutral-400"
       >Progress</a
     >
     <a
       href="https://tailwind-elements.com/docs/standard/components/stepper/"
       type="button"
       data-te-ripple-init
-      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500 dark:active:bg-neutral-400"
+      class="my-2 inline-block rounded-full bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg dark:bg-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-500 dark:active:bg-neutral-400"
       >Stepper</a
     >
   </div>

From 1507d2402fafd7d8e97a725943c4617eda5b6636 Mon Sep 17 00:00:00 2001
From: Marta Wierzbicka <martussky@MacBook-Pro-Marta.local>
Date: Fri, 21 Apr 2023 22:05:44 +0200
Subject: [PATCH 5/5] Fix custom range colors

---
 src/js/plugin.cjs | 39 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/js/plugin.cjs b/src/js/plugin.cjs
index 41410d81c..576616f5f 100644
--- a/src/js/plugin.cjs
+++ b/src/js/plugin.cjs
@@ -27,12 +27,27 @@ module.exports = plugin(
         "-webkit-appearance": "none",
         cursor: "pointer",
       },
+      [['.dark input[type="range"]::-webkit-slider-thumb']]: {
+        background: theme("colors.primary.400"),
+      },
       [['input[type="range"]:disabled::-webkit-slider-thumb']]: {
         background: theme("colors.neutral.400"),
       },
+      [['input[type="range"]:disabled:focus::-webkit-slider-thumb']]: {
+        background: theme("colors.neutral.400"),
+      },
+      [['input[type="range"]:disabled:active::-webkit-slider-thumb']]: {
+        background: theme("colors.neutral.400"),
+      },
       [['.dark input[type="range"]:disabled::-webkit-slider-thumb']]: {
         background: theme("colors.neutral.500"),
       },
+      [['.dark input[type="range"]:disabled:focus::-webkit-slider-thumb']]: {
+        background: theme("colors.neutral.500"),
+      },
+      [['.dark input[type="range"]:disabled:active::-webkit-slider-thumb']]: {
+        background: theme("colors.neutral.500"),
+      },
       [['input[type="range"]::-moz-range-thumb']]: {
         height: spacing[4],
         width: spacing[4],
@@ -44,6 +59,9 @@ module.exports = plugin(
         "-webkit-appearance": "none",
         cursor: "pointer",
       },
+      [['.dark input[type="range"]::-moz-range-thumb']]: {
+        background: theme("colors.primary.400"),
+      },
       [['input[type="range"]:disabled::-moz-range-thumb']]: {
         background: theme("colors.neutral.400"),
       },
@@ -51,16 +69,31 @@ module.exports = plugin(
         background: theme("colors.neutral.500"),
       },
       [['input[type="range"]::-moz-range-progress']]: {
-        background: theme("colors.primary.400"),
+        background: theme("colors.primary.600"),
       },
       [['input[type="range"]::-ms-fill-lower']]: {
-        background: theme("colors.primary.400"),
+        background: theme("colors.primary.600"),
+      },
+      [['.dark input[type="range"]::-moz-range-progress']]: {
+        background: theme("colors.primary.500"),
+      },
+      [['.dark input[type="range"]::-ms-fill-lower']]: {
+        background: theme("colors.primary.500"),
       },
       [['input[type="range"]:focus']]: {
         outline: "none",
       },
       [['input[type="range"]:focus::-webkit-slider-thumb']]: {
-        background: theme("colors.primary.400"),
+        background: theme("colors.primary.600"),
+      },
+      [['input[type="range"]:active::-webkit-slider-thumb']]: {
+        background: theme("colors.primary.700"),
+      },
+      [['.dark input[type="range"]:focus::-webkit-slider-thumb']]: {
+        background: theme("colors.primary.500"),
+      },
+      [['.dark input[type="range"]:active::-webkit-slider-thumb']]: {
+        background: theme("colors.primary.600"),
       },
     });
   },