Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Nov 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7175643
fix(breadcrumbs): added separator rotation for RTL #2486
ShrinidhiUpadhyaya Oct 21, 2024
0372a10
chore(changeset): added changeset
ShrinidhiUpadhyaya Oct 22, 2024
ea726c7
fix(docs): removed unused Link import and merged classnames in dropdown
ShrinidhiUpadhyaya Oct 23, 2024
acb3c7a
chore: merge with canary
ShrinidhiUpadhyaya Oct 23, 2024
ce9f555
fix(theme):added stripe color gradients for progress #1933
ShrinidhiUpadhyaya Oct 24, 2024
781d13a
chore: merge canary
ShrinidhiUpadhyaya Oct 24, 2024
676e840
refactor(theme): added stripe-size and createStripeGradient
ShrinidhiUpadhyaya Oct 27, 2024
3775ca4
chore: merge with canary
ShrinidhiUpadhyaya Oct 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/poor-moose-double.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---

added stripe color gradients for progress (#1933)
39 changes: 38 additions & 1 deletion packages/core/theme/src/components/progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-[length:1.25rem_1.25rem]",
},
},
isIndeterminate: {
Expand Down Expand Up @@ -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-[length:1.25rem_1.25rem]",
},
},
{
color: "secondary",
isStriped: true,
class: {
indicator: "bg-stripe-gradient-secondary bg-[length:1.25rem_1.25rem]",
},
},
{
color: "success",
isStriped: true,
class: {
indicator: "bg-stripe-gradient-success bg-[length:1.25rem_1.25rem]",
},
},

{
color: "warning",
isStriped: true,
class: {
indicator: "bg-stripe-gradient-warning bg-[length:1.25rem_1.25rem]",
},
},

{
color: "danger",
isStriped: true,
class: {
indicator: "bg-stripe-gradient-danger bg-[length:1.25rem_1.25rem]",
},
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider extracting repeated background size to reduce duplication.

The bg-[length:1.25rem_1.25rem] is repeated across all color variants. Consider extracting this to a shared class in your Tailwind configuration to follow the DRY principle.

 compoundVariants: [
   {
     color: "primary",
     isStriped: true,
     class: {
-      indicator: "bg-stripe-gradient-primary bg-[length:1.25rem_1.25rem]",
+      indicator: "bg-stripe-gradient-primary stripe-bg-size",
     },
   },
   // ... repeat for other colors
 ],

Then define the shared class in your Tailwind configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      utilities: {
        '.stripe-bg-size': {
          'background-size': '1.25rem 1.25rem'
        }
      }
    }
  }
}

],
},
{
Expand Down
14 changes: 12 additions & 2 deletions packages/core/theme/src/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,8 +217,18 @@ const corePlugin = (
large: `var(--${prefix}-box-shadow-large)`,
},
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":
"linear-gradient(45deg, #3f3f46 25%, transparent 25%, transparent 50%, #3f3f46 50%, #3f3f46 75%, transparent 75%, transparent)",
"stripe-gradient-primary":
"linear-gradient(45deg, #004493 25%, #006FEE 25%, #006FEE 50%, #004493 50%, #004493 75%, #006FEE 75%, #006FEE)",
"stripe-gradient-secondary":
"linear-gradient(45deg, #6020A0 25%, #9353d3 25%, #9353d3 50%, #6020A0 50%, #6020A0 75%, #9353d3 75%, #9353d3)",
"stripe-gradient-success":
"linear-gradient(45deg, #0E793C 25%, #17c964 25%, #17c964 50%, #0E793C 50%, #0E793C 75%, #17c964 75%, #17c964)",
"stripe-gradient-warning":
"linear-gradient(45deg, #936316 25%, #f5a524 25%, #f5a524 50%, #936316 50%, #936316 75%, #f5a524 75%, #f5a524)",
"stripe-gradient-danger":
"linear-gradient(45deg, #920B3A 25%, #f31260 25%, #f31260 50%, #920B3A 50%, #920B3A 75%, #f31260 75%, #f31260)",
},
transitionDuration: {
0: "0ms",
Expand Down
9 changes: 8 additions & 1 deletion packages/core/theme/src/utils/tw-merge-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
],
},
};