From 717564354364d65854b2d60c59362b4d1a62c4aa Mon Sep 17 00:00:00 2001 From: Shrinidhi Upadhyaya Date: Mon, 21 Oct 2024 20:06:00 +0200 Subject: [PATCH 1/5] fix(breadcrumbs): added separator rotation for RTL #2486 --- packages/core/theme/src/components/breadcrumbs.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/theme/src/components/breadcrumbs.ts b/packages/core/theme/src/components/breadcrumbs.ts index b5b2e902b1..ca1ac08b6c 100644 --- a/packages/core/theme/src/components/breadcrumbs.ts +++ b/packages/core/theme/src/components/breadcrumbs.ts @@ -23,7 +23,7 @@ const breadcrumbItem = tv({ // focus ring ...dataFocusVisibleClasses, ], - separator: "text-default-400 px-1", + separator: "text-default-400 px-1 rtl:rotate-180", }, variants: { color: { From 0372a10de97c0dbea153a334ef8a55dfd92866ab Mon Sep 17 00:00:00 2001 From: Shrinidhi Upadhyaya Date: Tue, 22 Oct 2024 10:59:43 +0200 Subject: [PATCH 2/5] chore(changeset): added changeset --- .changeset/quick-geckos-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quick-geckos-punch.md diff --git a/.changeset/quick-geckos-punch.md b/.changeset/quick-geckos-punch.md new file mode 100644 index 0000000000..d858b07d93 --- /dev/null +++ b/.changeset/quick-geckos-punch.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +separator icon RTL support in Breadcrumbs component (#2486) From ea726c71c9a8eca0c1e279c289fce842f2ce8f95 Mon Sep 17 00:00:00 2001 From: Shrinidhi Upadhyaya Date: Wed, 23 Oct 2024 22:24:39 +0200 Subject: [PATCH 3/5] fix(docs): removed unused Link import and merged classnames in dropdown --- apps/docs/content/components/dropdown/backdrop.ts | 2 +- apps/docs/content/components/dropdown/custom-items-styles.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/docs/content/components/dropdown/backdrop.ts b/apps/docs/content/components/dropdown/backdrop.ts index 797fee6953..e5acaa6714 100644 --- a/apps/docs/content/components/dropdown/backdrop.ts +++ b/apps/docs/content/components/dropdown/backdrop.ts @@ -1,4 +1,4 @@ -const App = `import {Dropdown, Link, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; +const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; export default function App() { return ( diff --git a/apps/docs/content/components/dropdown/custom-items-styles.ts b/apps/docs/content/components/dropdown/custom-items-styles.ts index fde0ff2fa7..15127eb7cd 100644 --- a/apps/docs/content/components/dropdown/custom-items-styles.ts +++ b/apps/docs/content/components/dropdown/custom-items-styles.ts @@ -59,8 +59,7 @@ export default function App() { Date: Thu, 24 Oct 2024 16:13:21 +0200 Subject: [PATCH 4/5] fix(theme):added stripe color gradients for progress #1933 --- .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..3cd8160909 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-[length:1.25rem_1.25rem]", }, }, 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-[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]", + }, + }, ], }, { diff --git a/packages/core/theme/src/plugin.ts b/packages/core/theme/src/plugin.ts index c3bcbdfd91..adb395a66e 100644 --- a/packages/core/theme/src/plugin.ts +++ b/packages/core/theme/src/plugin.ts @@ -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", diff --git a/packages/core/theme/src/utils/tw-merge-config.ts b/packages/core/theme/src/utils/tw-merge-config.ts index bd5776fe0f..3226ce18aa 100644 --- a/packages/core/theme/src/utils/tw-merge-config.ts +++ b/packages/core/theme/src/utils/tw-merge-config.ts @@ -11,6 +11,13 @@ export const twMergeConfig: Partial = { 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", + ], }, }; From 676e840c08c6331b4c6042d82fe269aa6b7415b3 Mon Sep 17 00:00:00 2001 From: Shrinidhi Upadhyaya Date: Sun, 27 Oct 2024 11:44:14 +0100 Subject: [PATCH 5/5] refactor(theme): added stripe-size and createStripeGradient --- .../core/theme/src/components/progress.ts | 12 +++++----- packages/core/theme/src/plugin.ts | 24 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts index 3cd8160909..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-default bg-[length:1.25rem_1.25rem]", + indicator: "bg-stripe-gradient-default bg-stripe-size", }, }, isIndeterminate: { @@ -133,21 +133,21 @@ const progress = tv( color: "primary", isStriped: true, class: { - indicator: "bg-stripe-gradient-primary bg-[length:1.25rem_1.25rem]", + indicator: "bg-stripe-gradient-primary bg-stripe-size", }, }, { color: "secondary", isStriped: true, class: { - indicator: "bg-stripe-gradient-secondary bg-[length:1.25rem_1.25rem]", + indicator: "bg-stripe-gradient-secondary bg-stripe-size", }, }, { color: "success", isStriped: true, class: { - indicator: "bg-stripe-gradient-success bg-[length:1.25rem_1.25rem]", + indicator: "bg-stripe-gradient-success bg-stripe-size", }, }, @@ -155,7 +155,7 @@ const progress = tv( color: "warning", isStriped: true, class: { - indicator: "bg-stripe-gradient-warning bg-[length:1.25rem_1.25rem]", + indicator: "bg-stripe-gradient-warning bg-stripe-size", }, }, @@ -163,7 +163,7 @@ const progress = tv( color: "danger", isStriped: true, class: { - indicator: "bg-stripe-gradient-danger bg-[length:1.25rem_1.25rem]", + 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 adb395a66e..4aca14fc53 100644 --- a/packages/core/theme/src/plugin.ts +++ b/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,19 +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-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)", + "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",