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
nextui-org · Nov 4, 2024 · a5cac45 · a5cac45
1 parent 2aebfcc
commit a5cac45
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 4 deletions.
diff --git a/.changeset/poor-moose-double.md 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
@@ -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
@@ -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
@@ -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",
+    ],
   },
 };