From 4023548c5f9b12fd59aad4deaac6d122bb9c2313 Mon Sep 17 00:00:00 2001 From: Dan Popescu Date: Tue, 6 Jan 2026 00:13:50 +0200 Subject: [PATCH 1/3] feat(rating): make rating size modifiers responsive - simplify the CSS code to be based on size variables - all sizes are based on --size-selector - added rating-full (to override rating-half) example: https://play.tailwindcss.com/GOQFYBDAnI?file=css close #4367 --- packages/daisyui/src/components/rating.css | 117 ++++++++---------- .../(routes)/components/rating/+page.md | 4 +- .../routes/(routes)/docs/utilities/+page.md | 1 + 3 files changed, 54 insertions(+), 68 deletions(-) diff --git a/packages/daisyui/src/components/rating.css b/packages/daisyui/src/components/rating.css index 94c5ba18004..410d4c7ecde 100644 --- a/packages/daisyui/src/components/rating.css +++ b/packages/daisyui/src/components/rating.css @@ -2,106 +2,89 @@ @layer daisyui.l1.l2.l3 { @apply relative inline-flex align-middle; - & input { - border: none; - @apply appearance-none; + --size: var(--size-selector, 0.25rem) * var(--size-mul); + + input { + @apply appearance-none cursor-pointer; } - :where(*) { - @apply bg-base-content h-6 w-6 rounded-none opacity-20; + * { + @apply bg-base-content rounded-none opacity-20; + + width: calc(var(--size) * var(--size-w-mul)); + height: calc(var(--size)); + @media (prefers-reduced-motion: no-preference) { animation: rating 0.25s ease-out; } - &:is(input) { - @apply cursor-pointer; - } } - & .rating-hidden { + .rating-hidden { @apply w-2 bg-transparent; } - input[type="radio"]:checked { - background-image: none; + :checked, + [aria-checked="true"], + [aria-current="true"], + :has(~ :checked, ~ [aria-checked="true"], ~ [aria-current="true"]) { + @apply opacity-100; } - * { - &:checked, - &[aria-checked="true"], - &[aria-current="true"], - &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) { - @apply opacity-100; - } - - &:focus-visible { - scale: 1.1; - @media (prefers-reduced-motion: no-preference) { - transition: scale 0.2s ease-out; - } + :focus-visible { + scale: 1.1; + @media (prefers-reduced-motion: no-preference) { + transition: scale 0.2s ease-out; } } - & *:active:focus { + :active:focus { animation: none; - } - - & *:active:focus { scale: 1.1; } } +} +.rating-half { @layer daisyui.l1.l2 { - &.rating-xs :where(*:not(.rating-hidden)) { - @apply size-4; - } - - &.rating-sm :where(*:not(.rating-hidden)) { - @apply size-5; - } - - &.rating-md :where(*:not(.rating-hidden)) { - @apply size-6; - } - - &.rating-lg :where(*:not(.rating-hidden)) { - @apply size-7; - } - - &.rating-xl :where(*:not(.rating-hidden)) { - @apply size-8; - } + --size-w-mul: 0.5; } } -.rating-half { +.rating, +.rating-full { @layer daisyui.l1.l2 { - :where(*:not(.rating-hidden)) { - @apply w-3; - } + --size-w-mul: 1; } } -.rating-half { +.rating-xs { @layer daisyui.l1.l2 { - &.rating-xs *:not(.rating-hidden) { - @apply w-2; - } + --size-mul: 4; + } +} - &.rating-sm *:not(.rating-hidden) { - @apply w-2.5; - } +.rating-sm { + @layer daisyui.l1.l2 { + --size-mul: 5; + } +} - &.rating-md *:not(.rating-hidden) { - @apply w-3; - } +.rating, +.rating-md { + @layer daisyui.l1.l2 { + --size-mul: 6; + } +} - &.rating-lg *:not(.rating-hidden) { - @apply w-[.875rem]; - } +.rating-lg { + @layer daisyui.l1.l2 { + --size-mul: 7; + } +} - &.rating-xl *:not(.rating-hidden) { - @apply w-4; - } +.rating-xl { + @layer daisyui.l1.l2 { + --size-mul: 8; } } diff --git a/packages/docs/src/routes/(routes)/components/rating/+page.md b/packages/docs/src/routes/(routes)/components/rating/+page.md index 70113df8211..fea8e686b40 100644 --- a/packages/docs/src/routes/(routes)/components/rating/+page.md +++ b/packages/docs/src/routes/(routes)/components/rating/+page.md @@ -10,6 +10,8 @@ classnames: modifier: - class: rating-half desc: To shows half of the shapes. Useful for half star ratings + - class: rating-full + desc: To shows full shapes. Useful to override half star ratings - class: rating-hidden desc: For the first radio to make it hidden so user can clear the rating size: @@ -38,7 +40,7 @@ classnames: ### ~Rating
- + diff --git a/packages/docs/src/routes/(routes)/docs/utilities/+page.md b/packages/docs/src/routes/(routes)/docs/utilities/+page.md index 8f3cc4ce89a..0d1e58493c8 100644 --- a/packages/docs/src/routes/(routes)/docs/utilities/+page.md +++ b/packages/docs/src/routes/(routes)/docs/utilities/+page.md @@ -178,6 +178,7 @@ If you are using a prefix for daisyUI, these CSS variables will be prefixed with | | `--range-fill` | binary, whether to fill the range slider progress or not | | | `--range-p` | padding of the range slider thumb | | | `--size` | size of the range slider | +| Rating | `--size` | size of the rating element | | Select | `--input-color` | color of the input | | | `--size` | size of the select | | Tab | `--tabs-height` | height of the tabs | From 3249a4b8adc89e809a418874ebb6054f2280fd33 Mon Sep 17 00:00:00 2001 From: Dan Popescu Date: Wed, 7 Jan 2026 15:05:31 +0200 Subject: [PATCH 2/3] chore: prefix `--size-` variables with `rt-` to avoid prefix replacement exclude for `--size-` --- packages/daisyui/src/components/rating.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/daisyui/src/components/rating.css b/packages/daisyui/src/components/rating.css index 410d4c7ecde..d3925ed576d 100644 --- a/packages/daisyui/src/components/rating.css +++ b/packages/daisyui/src/components/rating.css @@ -2,7 +2,7 @@ @layer daisyui.l1.l2.l3 { @apply relative inline-flex align-middle; - --size: var(--size-selector, 0.25rem) * var(--size-mul); + --size: var(--size-selector, 0.25rem) * var(--rt-size-mul); input { @apply appearance-none cursor-pointer; @@ -11,7 +11,7 @@ * { @apply bg-base-content rounded-none opacity-20; - width: calc(var(--size) * var(--size-w-mul)); + width: calc(var(--size) * var(--rt-size-w-mul)); height: calc(var(--size)); @media (prefers-reduced-motion: no-preference) { @@ -46,45 +46,45 @@ .rating-half { @layer daisyui.l1.l2 { - --size-w-mul: 0.5; + --rt-size-w-mul: 0.5; } } .rating, .rating-full { @layer daisyui.l1.l2 { - --size-w-mul: 1; + --rt-size-w-mul: 1; } } .rating-xs { @layer daisyui.l1.l2 { - --size-mul: 4; + --rt-size-mul: 4; } } .rating-sm { @layer daisyui.l1.l2 { - --size-mul: 5; + --rt-size-mul: 5; } } .rating, .rating-md { @layer daisyui.l1.l2 { - --size-mul: 6; + --rt-size-mul: 6; } } .rating-lg { @layer daisyui.l1.l2 { - --size-mul: 7; + --rt-size-mul: 7; } } .rating-xl { @layer daisyui.l1.l2 { - --size-mul: 8; + --rt-size-mul: 8; } } From fe837657362e255aa8a4ce410c651721dc32d3ed Mon Sep 17 00:00:00 2001 From: Dan Popescu Date: Sat, 10 Jan 2026 04:59:25 +0200 Subject: [PATCH 3/3] chore: formatting --- packages/daisyui/src/components/rating.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/daisyui/src/components/rating.css b/packages/daisyui/src/components/rating.css index d3925ed576d..c2245273841 100644 --- a/packages/daisyui/src/components/rating.css +++ b/packages/daisyui/src/components/rating.css @@ -5,7 +5,7 @@ --size: var(--size-selector, 0.25rem) * var(--rt-size-mul); input { - @apply appearance-none cursor-pointer; + @apply cursor-pointer appearance-none; } * {