diff --git a/components/lib/theme/aura/carousel/index.js b/components/lib/theme/aura/carousel/index.js new file mode 100644 index 000000000..627fa5432 --- /dev/null +++ b/components/lib/theme/aura/carousel/index.js @@ -0,0 +1,142 @@ +export default { + variables: { + colorScheme: { + light: { + navigator: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + }, + indicator: { + background: '{surface.200}', + backgroundHover: '{surface.300}', + backgroundActive: '{primary.color}' + } + }, + dark: { + navigator: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' + }, + indicator: { + background: '{surface.700}', + backgroundHover: '{surface.600}', + backgroundActive: '{primary.color}' + } + } + } + }, + css: ` +.p-carousel { + display: flex; + flex-direction: column; +} + +.p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; +} + +.p-carousel-container { + display: flex; + flex-direction: row; +} + +.p-carousel-items-content { + overflow: hidden; + width: 100%; +} + +.p-carousel-items-container { + display: flex; + flex-direction: row; +} + +.p-carousel-prev, +.p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + width: 1.75rem; + height: 1.75rem; + color: var(--p-carousel-navigator-color); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration),outline-color var(--p-transition-duration); + outline-color: transparent; + margin: 0.5rem; +} + +.p-carousel-prev:enabled:hover, +.p-carousel-next:enabled:hover { + color: var(--p-carousel-navigator-color-hover); + background: var(--p-carousel-navigator-background-hover); +} + +.p-carousel-prev:focus-visible, +.p-carousel-next: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-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + padding: 1rem; + gap: 0.5rem; +} + +.p-carousel-indicator button { + display: flex; + align-items: center; + justify-content: center; + background: var(--p-carousel-indicator-background); + width: 2rem; + height: 0.5rem; + border: 0 none; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; + border-radius: var(--p-rounded-base); +} + +.p-carousel-indicator button: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-carousel-indicator button:hover { + background: var(--p-carousel-indicator-background-hover); +} + +.p-carousel-indicator.p-highlight button { + background: var(--p-carousel-indicator-background-active); +} + +.p-carousel-vertical .p-carousel-container { + flex-direction: column; +} + +.p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; +} + +.p-items-hidden .p-carousel-item { + visibility: hidden; +} + +.p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; +} +` +}; diff --git a/components/lib/theme/aura/carousel/package.json b/components/lib/theme/aura/carousel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/carousel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/galleria/index.js b/components/lib/theme/aura/galleria/index.js new file mode 100644 index 000000000..0341ab694 --- /dev/null +++ b/components/lib/theme/aura/galleria/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {} + } + }, + css: ` + +` +}; diff --git a/components/lib/theme/aura/galleria/package.json b/components/lib/theme/aura/galleria/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/galleria/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 2f8ea6af6..4c017906b 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -3,12 +3,14 @@ import avatar from 'primevue/theme/aura/avatar'; import badge from 'primevue/theme/aura/badge'; import blockui from 'primevue/theme/aura/blockui'; import card from 'primevue/theme/aura/card'; +import carousel from 'primevue/theme/aura/carousel'; import chip from 'primevue/theme/aura/chip'; import confirmdialog from 'primevue/theme/aura/confirmdialog'; import confirmpopup from 'primevue/theme/aura/confirmpopup'; import dialog from 'primevue/theme/aura/dialog'; import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; +import galleria from 'primevue/theme/aura/galleria'; import global from 'primevue/theme/aura/global'; import image from 'primevue/theme/aura/image'; import inlinemessage from 'primevue/theme/aura/inlinemessage'; @@ -146,12 +148,14 @@ export default { badge, blockui, card, + carousel, chip, confirmdialog, confirmpopup, dialog, divider, fieldset, + galleria, message, metergroup, image,