fix(theme): added stripe color gradients for progress

.changeset/poor-moose-double.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+added stripe color gradients for progress (#1933)

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",
+        },
+      },
     ],
   },
   {

packages/core/theme/src/plugin.ts

@@ -152,6 +152,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
@@ -216,9 +219,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",

packages/core/theme/src/utils/tw-merge-config.ts

@@ -11,6 +11,13 @@ export const twMergeConfig: Partial<Config> = {
   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",
+    ],
   },
 };