diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 3b3d170d2..b8c6ad46d 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -37,6 +37,7 @@ import panelmenu from 'primevue/theme/aura/panelmenu'; import picklist from 'primevue/theme/aura/picklist'; import progressbar from 'primevue/theme/aura/progressbar'; import progressspinner from 'primevue/theme/aura/progressspinner'; +import rating from 'primevue/theme/aura/rating'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; import scrolltop from 'primevue/theme/aura/scrolltop'; import sidebar from 'primevue/theme/aura/sidebar'; @@ -214,6 +215,7 @@ export default { picklist, progressbar, progressspinner, + rating, scrollpanel, scrolltop, skeleton, diff --git a/components/lib/theme/aura/rating/index.js b/components/lib/theme/aura/rating/index.js new file mode 100644 index 000000000..571394a56 --- /dev/null +++ b/components/lib/theme/aura/rating/index.js @@ -0,0 +1,58 @@ +export default { + variables: { + colorScheme: { + light: { + icon: { + color: '{surface.500}', + colorHover: '{primary.color}', + colorActive: '{primary.color}' + } + }, + dark: { + icon: { + color: '{surface.400}', + colorHover: '{primary.color}', + colorActive: '{primary.color}' + } + } + } + }, + css: ` +.p-rating { + position: relative; + display: flex; + align-items: center; + gap: 0.25rem; +} + +.p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + outline-color: transparent; + border-radius: 50%; + cursor: pointer; +} + +.p-rating-item.p-focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); +} + +.p-rating-icon { + color: var(--p-rating-icon-color); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration); + font-size: 1rem; + width: 1rem; + height: 1rem; +} + +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { + color: var(--p-rating-icon-color-hover); +} + +.p-rating-item-active .p-rating-icon { + color: var(--p-rating-icon-color-active); +} +` +}; diff --git a/components/lib/theme/aura/rating/package.json b/components/lib/theme/aura/rating/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/rating/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}