Add viva theme

.gitignore

@@ -34,6 +34,8 @@ yarn-error.log*
 # Themes
 public/themes/soho-light/
 public/themes/soho-dark/
+public/themes/viva-light/
+public/themes/viva-dark/
 public/themes/mira/
 public/themes/nano/
 

gulpfile.js

@@ -20,7 +20,7 @@ gulp.task('build-css', function() {
 
 gulp.task('build-themes', function() {
     return gulp.src([
-        'public/themes/**/*','!public/themes/soho-*/**/*',
+        'public/themes/**/*','!public/themes/soho-*/**/*', '!public/themes/viva-*/**/*',
                         '!public/themes/mira/**/*', '!public/themes/nano/**/*'
     ])
     .pipe(gulp.dest('dist/resources/themes'));

public/demo/images/themes/viva-dark.svg

@@ -0,0 +1,4 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="600" height="600" fill="#0E1315"/>
+<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="#9EADE6" stroke-width="21"/>
+</svg>

public/demo/images/themes/viva-light.svg

@@ -0,0 +1,4 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="600" height="600" fill="#5472D4"/>
+<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="white" stroke-width="21"/>
+</svg>

src/AppConfigurator.vue

@@ -210,6 +210,18 @@
                             </button>
                             <span>Soho Dark</span>
                         </div>
+                        <div class="p-col-3">
+                            <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
+                                <img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
+                            </button>
+                            <span>Viva Light</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
+                                <img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
+                            </button>
+                            <span>Viva Dark</span>
+                        </div>
                         <div class="p-col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
                                 <img src="demo/images/themes/mira.jpg" alt="Mira" />

src/AppTopBar.vue

@@ -60,6 +60,8 @@
                         <li class="topbar-submenu-header">PREMIUM</li>
                         <li><a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
                         <li><a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'viva-light')"><img src="demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li>
+                        <li><a @click="changeTheme($event, 'viva-dark', true)"><img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
                         <li><a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
 
@@ -168,6 +170,8 @@ export default {
                 'fluent-light': 'fluent-light.png',
                 'soho-light': 'soho-light.png',
                 'soho-dark': 'soho-dark.png',
+                'viva-light': 'viva-light.svg',
+                'viva-dark': 'viva-dark.svg',
                 'mira': 'mira.jpg',
                 'nano': 'nano.jpg',
             }

src/views/theming/Theming.vue

@@ -22,7 +22,7 @@
 
             <p><a href="https://www.primefaces.org/designer/primevue">Designer</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine
                 with 500+ variables and a Visual Designer. PrimeVue only ships the generated CSS of <b>Material</b>, <b>Bootstrap</b>, <b>Saga</b>, <b>Vela</b>, <b>Arya</b> and legacy themes whereas Designer provides
-                full access to the whole SASS structure and the variables of these pre-built themes for easier customization.</p>
+                full access to the whole SASS structure and the variables of these pre-built themes for easier customization. In addition, designer provides exclusive premium themes to subscribers including Soho, Viva, Mira and Nano that are not available in core PrimeVue distribution.</p>
 
             <p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>