Merge pull request #3598 from primefaces/issue-3597

New 6 Free Themes
pull/3610/head
Tuğçe Küçükoğlu 2023-01-30 11:13:28 +03:00 committed by GitHub
commit 3d159503f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 35677 additions and 75 deletions

8
.gitignore vendored
View File

@ -9,11 +9,3 @@ coverage
dist
.DS_Store
.vscode
# Themes
public/themes/soho-light/
public/themes/soho-dark/
public/themes/viva-light/
public/themes/viva-dark/
public/themes/mira/
public/themes/nano/

View File

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

View File

@ -129,7 +129,7 @@
</div>
</div>
<h5 class="flex align-items-center">PrimeOne Design <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></h5>
<h5 class="flex align-items-center">PrimeOne Design</h5>
<div class="grid free-themes">
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
@ -181,6 +181,46 @@
</div>
</div>
<h5 class="flex align-items-center">Misc</h5>
<div class="grid free-themes">
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
</button>
<span>Soho Light</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button>
<span>Soho Dark</span>
</div>
<div class="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="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="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="/demo/images/themes/mira.jpg" alt="Mira" />
</button>
<span>Mira</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="/demo/images/themes/nano.jpg" alt="Mira" />
</button>
<span>Nano</span>
</div>
</div>
<h5>PrimeOne Design - Legacy</h5>
<div class="grid free-themes">
<div class="col-3">
@ -257,47 +297,6 @@
</div>
</div>
<h4>Premium Themes</h4>
<p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
<div class="grid free-themes">
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
</button>
<span>Soho Light</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button>
<span>Soho Dark</span>
</div>
<div class="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="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="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="/demo/images/themes/mira.jpg" alt="Mira" />
</button>
<span>Mira</span>
</div>
<div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="/demo/images/themes/nano.jpg" alt="Mira" />
</button>
<span>Nano</span>
</div>
</div>
<h4>Admin Templates</h4>
<p>Beautifully crafted application templates by PrimeTek.</p>
<div class="grid premium-themes">

View File

@ -82,7 +82,7 @@
<a @click="changeTheme($event, 'fluent-light')"><img :src="$config.public.contextPath + 'demo/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
</li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE</li>
<li>
<a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
</li>
@ -108,7 +108,27 @@
<a @click="changeTheme($event, 'lara-dark-teal')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
</li>
<li class="topbar-submenu-header">PRIMEONE 2021</li>
<li class="topbar-submenu-header">MISC</li>
<li>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li>
<li>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li>
<li class="topbar-submenu-header">PRIMEONE - LEGACY</li>
<li>
<a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
</li>
@ -145,26 +165,6 @@
<li>
<a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
</li>
<li class="topbar-submenu-header">PREMIUM</li>
<li>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li>
<li>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li>
</ul>
</transition>
</li>

View File

@ -154,6 +154,12 @@ primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
primevue/resources/themes/lara-light-teal/theme.css
primevue/resources/themes/lara-dark-teal/theme.css
primevue/resources/themes/soho-light/theme.css
primevue/resources/themes/soho-dark/theme.css
primevue/resources/themes/viva-light/theme.css
primevue/resources/themes/viva-dark/theme.css
primevue/resources/themes/mira/theme.css
primevue/resources/themes/nano/theme.css
primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-orange/theme.css

View File

@ -32,8 +32,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>Tailwind</b>, <b>FluentUI</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. In addition, designer provides exclusive premium themes to subscribers including Soho, Viva, Mira and Nano that are not available in core PrimeVue distribution.
generated CSS of the themes whereas Designer provides full access to the whole SASS structure and the variables of these pre-built themes for easier customization.
</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>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

6066
public/themes/mira/theme.css Normal file

File diff suppressed because it is too large Load Diff

5838
public/themes/nano/theme.css Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff