From a5cac45619e529cf9850f02f416b6bc7cba77f3f Mon Sep 17 00:00:00 2001
From: Shrinidhi Upadhyaya <shrinidhiupadhyaya1195@gmail.com>
Date: Mon, 4 Nov 2024 22:31:56 +0100
Subject: [PATCH] fix(theme): added stripe color gradients for progress (#3938)

* fix(breadcrumbs): added separator rotation for RTL #2486

* chore(changeset): added changeset

* fix(docs): removed unused Link import and merged classnames in dropdown

* fix(theme):added stripe color gradients for progress #1933

* refactor(theme): added stripe-size and createStripeGradient
---
 .changeset/poor-moose-double.md               |  5 +++
 .../core/theme/src/components/progress.ts     | 39 ++++++++++++++++++-
 packages/core/theme/src/plugin.ts             | 14 ++++++-
 .../core/theme/src/utils/tw-merge-config.ts   |  9 ++++-
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/poor-moose-double.md

diff --git a/.changeset/poor-moose-double.md b/.changeset/poor-moose-double.md
new file mode 100644
index 0000000000..90acf179ed
--- /dev/null
+++ b/.changeset/poor-moose-double.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+added stripe color gradients for progress (#1933)
diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts
index cef7fb35ff..2fb529909f 100644
--- a/packages/core/theme/src/components/progress.ts
+++ b/packages/core/theme/src/components/progress.ts
@@ -92,7 +92,7 @@ const progress = tv(
       },
       isStriped: {
         true: {
-          indicator: "bg-stripe-gradient bg-[length:1.25rem_1.25rem]",
+          indicator: "bg-stripe-gradient-default bg-stripe-size",
         },
       },
       isIndeterminate: {
@@ -129,6 +129,43 @@ const progress = tv(
           indicator: "!transition-none motion-reduce:transition-none",
         },
       },
+      {
+        color: "primary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-primary bg-stripe-size",
+        },
+      },
+      {
+        color: "secondary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-secondary bg-stripe-size",
+        },
+      },
+      {
+        color: "success",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-success bg-stripe-size",
+        },
+      },
+
+      {
+        color: "warning",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-warning bg-stripe-size",
+        },
+      },
+
+      {
+        color: "danger",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-danger bg-stripe-size",
+        },
+      },
     ],
   },
   {
diff --git a/packages/core/theme/src/plugin.ts b/packages/core/theme/src/plugin.ts
index c445ecaacd..a8788d3d79 100644
--- a/packages/core/theme/src/plugin.ts
+++ b/packages/core/theme/src/plugin.ts
@@ -148,6 +148,9 @@ const corePlugin = (
 ) => {
   const resolved = resolveConfig(themes, defaultTheme, prefix);
 
+  const createStripeGradient = (stripeColor: string, backgroundColor: string) =>
+    `linear-gradient(45deg,  hsl(var(--${prefix}-${stripeColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})))`;
+
   return plugin(
     ({addBase, addUtilities, addVariant}) => {
       // add base classNames
@@ -212,9 +215,16 @@ const corePlugin = (
             medium: `var(--${prefix}-box-shadow-medium)`,
             large: `var(--${prefix}-box-shadow-large)`,
           },
+          backgroundSize: {
+            "stripe-size": "1.25rem 1.25rem",
+          },
           backgroundImage: {
-            "stripe-gradient":
-              "linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)",
+            "stripe-gradient-default": createStripeGradient("default-200", "default-400"),
+            "stripe-gradient-primary": createStripeGradient("primary-200", "primary"),
+            "stripe-gradient-secondary": createStripeGradient("secondary-200", "secondary"),
+            "stripe-gradient-success": createStripeGradient("success-200", "success"),
+            "stripe-gradient-warning": createStripeGradient("warning-200", "warning"),
+            "stripe-gradient-danger": createStripeGradient("danger-200", "danger"),
           },
           transitionDuration: {
             0: "0ms",
diff --git a/packages/core/theme/src/utils/tw-merge-config.ts b/packages/core/theme/src/utils/tw-merge-config.ts
index 144cb81cf8..fcde3b2466 100644
--- a/packages/core/theme/src/utils/tw-merge-config.ts
+++ b/packages/core/theme/src/utils/tw-merge-config.ts
@@ -10,6 +10,13 @@ export const twMergeConfig = {
   classGroups: {
     shadow: [{shadow: COMMON_UNITS}],
     "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
-    "bg-image": ["bg-stripe-gradient"],
+    "bg-image": [
+      "bg-stripe-gradient-default",
+      "bg-stripe-gradient-primary",
+      "bg-stripe-gradient-secondary",
+      "bg-stripe-gradient-success",
+      "bg-stripe-gradient-warning",
+      "bg-stripe-gradient-danger",
+    ],
   },
 };