Merge aura branch, adds new theme and minor showcase cosmetics

assets/styles/layout/_config.scss

@@ -5,16 +5,6 @@
     .p-selectbutton {
         .p-button {
             padding: 0.5rem 1rem;
-
-            &:first-child {
-                border-top-left-radius: 30px;
-                border-bottom-left-radius: 30px;
-            }
-    
-            &:last-child {
-                border-top-right-radius: 30px;
-                border-bottom-right-radius: 30px;
-            }
         }
     }
 

assets/styles/layout/_core.scss

@@ -40,31 +40,31 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: 2rem;
+    font-size: 1.75rem;
 }
 
 h2 {
-    font-size: 1.5rem;
-}
-
-h3 {
     font-size: 1.25rem;
 }
 
-h4 {
+h3 {
     font-size: 1.125rem;
 }
 
-h5 {
+h4 {
     font-size: 1rem;
 }
 
-h6 {
+h5 {
     font-size: .875rem;
 }
 
+h6 {
+    font-size: .75rem;
+}
+
 p {
-    line-height: 1.75;
+    line-height: 1.5;
     margin: 0 0 1rem 0;
 }
 

assets/styles/layout/_doc.scss

@@ -78,7 +78,7 @@
 
     p {
         font-size: 1.125rem;
-        color: var(--surface-900);
+        color: var(--text-color);
         margin: 0;
 
         a {
@@ -119,8 +119,8 @@
 
 .doc-section-description {
     > p {
-        font-size: 1.125rem;
+        font-size: 1rem;
-        color: var(--surface-900);
+        color: var(--text-color);
 
         i {
             border-radius: 6px;

assets/styles/layout/variables/main/_dark.scss

@@ -12,6 +12,6 @@
     --demo-code-button-color: var(--surface-500);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
     --demo-code-button-hover-color: var(--surface-700);
-    --doc-highlight-text-bg: var(--highlight-bg);
+    --doc-highlight-text-bg: var(--surface-800);
-    --doc-highlight-text-color: var(--highlight-text-color);
+    --doc-highlight-text-color: var(--surface-400);
 }

assets/styles/layout/variables/main/_light.scss

@@ -4,7 +4,7 @@
     --topbar-sticky-bg:rgba(255,255,255,.7);
     --card-border: 1px solid var(--surface-border);
     --card-bg: var(--surface-card);
-    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
     --glow-blend: hard-light, multiply;
     --topbar-border: rgba(0,0,0,.05);
     --mobile-menu-bg: var(--surface-overlay);
@@ -12,6 +12,6 @@
     --demo-code-button-color: var(--surface-300);
     --demo-code-button-hover-bg: rgba(255,255,255,.1);
     --demo-code-button-hover-color: var(--surface-100);
-    --doc-highlight-text-bg: var(--primary-100);
+    --doc-highlight-text-bg: var(--surface-200);
-    --doc-highlight-text-color: var(--primary-900);
+    --doc-highlight-text-color: var(--surface-700);
 }

components/lib/utils/DomHandler.js

@@ -310,6 +310,7 @@ export default {
             if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
                 top = targetOffset.top + windowScrollTop - elementOuterHeight;
                 element.style.transformOrigin = 'bottom';
+                element.style.marginTop = 'calc(var(--p-anchor-gutter) * -1)';
 
                 if (top < 0) {
                     top = windowScrollTop;
@@ -317,6 +318,7 @@ export default {
             } else {
                 top = targetOuterHeight + targetOffset.top + windowScrollTop;
                 element.style.transformOrigin = 'top';
+                element.style.marginTop = 'calc(var(--p-anchor-gutter))';
             }
 
             if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
@@ -395,7 +397,7 @@ export default {
     getParentNode(element) {
         let parent = element?.parentNode;
 
-        if (parent && parent instanceof ShadowRoot && parent.host) {
+        if (parent && parent.host) {
             parent = parent.host;
         }
 

doc/carousel/VerticalDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
 
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
@@ -35,7 +35,7 @@ export default {
             products: null,
             code: {
                 basic: `
-<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
+<Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
@@ -57,7 +57,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
@@ -113,7 +113,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="360px" contentClass="flex align-items-center">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">

layouts/AppConfigurator.vue

@@ -4,10 +4,10 @@
             <section class="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
                 <span class="text-xl font-semibold">Scale</span>
                 <div class="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style="border-radius: 30px">
-                    <Button icon="pi pi-minus" @click="decrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[0]" />
+                    <Button icon="pi pi-minus" @click="decrementScale" text rounded :disabled="scale === scales[0]" />
                     <i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === scale }]" />
 
-                    <Button icon="pi pi-plus" @click="incrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" />
+                    <Button icon="pi pi-plus" @click="incrementScale" text rounded :disabled="scale === scales[scales.length - 1]" />
                 </div>
             </section>
 
@@ -28,6 +28,126 @@
 
             <section class="py-4 border-bottom-1 surface-border">
                 <div class="text-xl font-semibold mb-3">Themes</div>
+                <div class="flex align-items-center gap-2 mb-3">
+                    <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="aura Light Teal" class="border-circle" style="width: 1.5rem" />
+                    <span class="font-medium">Aura</span>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3 mb-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'green')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'cyan')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'blue')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'indigo')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
+                    </button>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3 mb-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'purple')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'amber')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'teal'), 'hover:border-500 surface-border': !isThemeActive('aura', 'teal') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'teal')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'pink')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
+                    </button>
+                </div>
+                <div class="flex align-items-center justify-content-between gap-3">
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'noir')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
+                    </button>
+                    <button
+                        :class="[
+                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
+                            { 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }
+                        ]"
+                        style="border-radius: 30px"
+                        @click="changeTheme('aura', 'lime')"
+                    >
+                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
+                    </button>
+                    <span class="w-3"></span>
+                    <span class="w-3"></span>
+                </div>
+
+                <section class="pt-4 flex align-items-center justify-content-between">
+                    <span class="text-sm">Focus Ring Color</span>
+                    <SelectButton v-model="focusRingColor" :options="focusRingColors" @change="onFocusRingColorChange" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                </section>
+            </section>
+
+            <section class="py-4 border-bottom-1 surface-border">
                 <div class="flex align-items-center gap-2 mb-3">
                     <img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="border-circle" style="width: 1.5rem" />
                     <span class="font-medium">Lara</span>
@@ -296,6 +416,11 @@ export default {
                 { label: 'Outlined', value: 'outlined' },
                 { label: 'Filled', value: 'filled' }
             ],
+            focusRingColor: 'current',
+            focusRingColors: [
+                { label: 'Current', value: 'current' },
+                { label: 'Primary', value: 'primary' }
+            ],
             compactMaterial: false,
             lightOnlyThemes: ['fluent-light', 'mira', 'nano']
         };
@@ -391,6 +516,22 @@ export default {
             }
 
             return this.$appState.theme === themeName;
+        },
+        onFocusRingColorChange(event) {
+            let root = document.documentElement;
+
+            if (event.value === 'current') {
+                if (this.$appState.darkTheme)
+                    root.style.setProperty('--p-focus-ring-color', 'var(--surface-500)');
+                else
+                    root.style.setProperty('--p-focus-ring-color', 'var(--surface-400)');
+            }
+            else if (event.value === 'primary') {
+                if (this.$appState.darkTheme)
+                    root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
+                else
+                    root.style.setProperty('--p-focus-ring-color', 'var(--primary-500)');
+            }
         }
     },
     computed: {