vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Make aura default

pull/5110/head
Cagatay Civici 2024-01-18 06:51:37 +03:00
parent 60193987ef
commit 9efff5b52b
18 changed files with 2549 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -46,7 +46,7 @@ Styled mode is based on pre-skinned components with opinionated themes like Mate
```javascript
// theme
import 'primevue/resources/themes/lara-light-green/theme.css';
import 'primevue/resources/themes/aura-light-green/theme.css';
```
**Unstyled Mode**
@ -138,7 +138,7 @@ In styled mode, the theme can be defined at Nuxt configuration with the css prop
```javascript
export default defineNuxtConfig({
css: ['primevue/resources/themes/lara-dark-green/theme.css']
css: ['primevue/resources/themes/aura-dark-green/theme.css']
});
```

8
app.vue
View File

@ -12,7 +12,7 @@ export default {
$route: {
handler(to) {
if (to.name === 'index') {
this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green', dark: this.$appState.darkTheme });
this.themeChangeListener({ theme: this.$appState.darkTheme ? 'aura-dark-green' : 'aura-light-green', dark: this.$appState.darkTheme });
}
}
}
@ -23,12 +23,12 @@ export default {
{
id: 'theme-link',
rel: 'stylesheet',
href: '/themes/lara-light-green/theme.css'
href: '/themes/aura-light-green/theme.css'
},
{
id: 'home-table-link',
rel: 'stylesheet',
href: '/styles/landing/themes/lara-light-green/theme.css'
href: '/styles/landing/themes/aura-light-green/theme.css'
}
]
});
@ -38,7 +38,7 @@ export default {
const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
this.applyTheme({ theme: 'lara-dark-green', dark: true });
this.applyTheme({ theme: 'aura-dark-green', dark: true });
}
EventBus.on('theme-change', this.themeChangeListener);

2
assets/styles/layout/_core.scss
View File

@ -64,7 +64,7 @@ h6 {
}
p {
line-height: 1.5;
line-height: 1.75;
margin: 0 0 1rem 0;
}

2
assets/styles/layout/_doc.scss
View File

@ -125,7 +125,7 @@
i {
border-radius: 6px;
padding: 2px 6px;
font-size: 1rem;
font-size: .875rem;
font-weight: 500;
font-style: normal;
background-color: var(--doc-highlight-text-bg);

62
assets/styles/layout/variables/landing/_dark.scss
View File

@ -1,53 +1,53 @@
.landing.layout-dark {
--home-highlight-color:#34d399;
--home-highlight-darker-color:#6ee7b7;
--home-highlight-fore-color:#030712;
--home-bg:#111827;
--home-border-color:#424b57;
--home-highlight-fore-color:#020617;
--home-bg:#09090b;
--home-border-color:#27272a;
--home-primary-text-color:#ffffff;
--home-secondary-text-color:rgba(255,255,255,.6);
--home-secondary-text-color:#a1a1aa;
--home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
--home-box-bg:#1f2937;
--home-box-bg:#18181b;
--home-linkbox-bg:rgba(255, 255, 255, .05);
--home-linkbox-border:1px solid rgba(255, 255, 255, .1);
--home-linkbox-text-color:#ffffff;
--home-linkbox-hover-bg:rgba(255, 255, 255, .1);
--home-blocks-bg:transparent;
--home-blocks-block-bg:#111827;
--home-blocks-block-bg:#09090b;
--home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
--home-blocks-border-left:5px solid #1f2937;
--home-blocks-border-bottom:7px solid #1f2937;
--home-blocks-border:1px solid #424b57;
--home-blocks-sidebar-bg:#1f2937;
--home-blocks-list-bg:#28323f;
--home-blocks-main-bg:#111827;
--home-blocks-main-border:1px solid #424b57;
--home-blocks-item-bg:#1f2937;
--home-blocks-image-bg:#28323f;
--home-blocks-text-color:#4b5563;
--home-blocks-border-left:5px solid #27272a;
--home-blocks-border-bottom:7px solid #27272a;
--home-blocks-border:1px solid #27272a;
--home-blocks-sidebar-bg:#18181b;
--home-blocks-list-bg:#27272a;
--home-blocks-main-bg:#09090b;
--home-blocks-main-border:1px solid #27272a;
--home-blocks-item-bg:#18181b;
--home-blocks-image-bg:#27272a;
--home-blocks-text-color:#52525b;
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25);
--home-blocks-active-border-top:1px solid #424b57;
--home-blocks-active-border-right:1px solid #424b57;
--home-blocks-active-border-bottom:6px solid #424b57;
--home-blocks-active-border-left:4px solid #424b57;
--home-blocks-active-border-top:1px solid #27272a;
--home-blocks-active-border-right:1px solid #27272a;
--home-blocks-active-border-bottom:6px solid #27272a;
--home-blocks-active-border-left:4px solid #27272a;
--home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
--home-blocks-tablebar-bg:#4b5563;
--home-blocks-bar-bg:#4b5563;
--home-blocks-bar-button-bg:#ffffff;
--home-blocks-circle-bg:#4b5563;
--home-blocks-tablebar-bg:#3f3f46;
--home-blocks-bar-bg:#3f3f46;
--home-blocks-bar-button-bg:#3f3f46;
--home-blocks-circle-bg:#27272a;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25);
--home-templates-block-border-left:5px solid #424b57;
--home-templates-block-border-bottom:7px solid #424b57;
--home-templates-block-border-left:5px solid #27272a;
--home-templates-block-border-bottom:7px solid #27272a;
--home-templates-line:rgba(255,255,255,.1);
--home-templates-block-hover-bg:rgba(255,255,255,.1);
--home-templates-btn-bg:#1f2937;
--home-templates-btn-bg:#18181b;
--home-templates-btn-text-color:#ffffff;
--home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25);
--home-templates-btn-border-top:1px solid #424b57;
--home-templates-btn-border-right:1px solid #424b57;
--home-templates-btn-border-bottom:4px solid #424b57;
--home-templates-btn-border-left:3px solid #424b57;
--home-templates-btn-border-top:1px solid #27272a;
--home-templates-btn-border-right:1px solid #27272a;
--home-templates-btn-border-bottom:4px solid #27272a;
--home-templates-btn-border-left:3px solid #27272a;
--home-features-card-shadow: none;
--home-box-ring-color: rgba(52, 211, 153, .3);
}

38
assets/styles/layout/variables/landing/_light.scss
View File

@ -2,39 +2,39 @@
--home-highlight-color:#10b981;
--home-highlight-darker-color:#059669;
--home-highlight-fore-color:#ffffff;
--home-bg:#F9FAFB;
--home-border-color:rgba(0,0,0,.1);
--home-primary-text-color:#030712;
--home-secondary-text-color:#6b7280;
--home-bg:#f8fafc;
--home-border-color:#e2e8f0;
--home-primary-text-color:#334155;
--home-secondary-text-color:#64748b;
--home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
--home-box-bg:#ffffff;
--home-linkbox-bg:#ffffff;
--home-linkbox-border:1px solid rgba(0,0,0,.1);
--home-linkbox-text-color:#030712;
--home-linkbox-hover-bg:#e5e7eb;
--home-linkbox-border:1px solid #e2e8f0;
--home-linkbox-text-color:#334155;
--home-linkbox-hover-bg:#f1f5f9;
--home-blocks-bg:transparent;
--home-blocks-block-bg:#ffffff;
--home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
--home-blocks-border-left:5px solid rgba(0,0,0,.1);
--home-blocks-border-bottom:7px solid rgba(0,0,0,.1);
--home-blocks-border:1px solid rgba(0,0,0,.1);
--home-blocks-sidebar-bg:#f3f4f6;
--home-blocks-list-bg:#f9fafb;
--home-blocks-border-left:5px solid #e2e8f0;
--home-blocks-border-bottom:7px solid #e2e8f0;
--home-blocks-border:1px solid #e2e8f0;
--home-blocks-sidebar-bg:#f1f5f9;
--home-blocks-list-bg:#f8fafc;
--home-blocks-main-bg:#ffffff;
--home-blocks-main-border:1px solid rgba(0,0,0,.1);
--home-blocks-item-bg:#f4f5f7;
--home-blocks-image-bg:#e5e7eb;
--home-blocks-text-color:#d1d5db;
--home-blocks-main-border:1px solid #e2e8f0;
--home-blocks-item-bg:#f1f5f9;
--home-blocks-image-bg:#e2e8f0;
--home-blocks-text-color:#cbd5e1;
--home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
--home-blocks-active-border-top:1px solid rgba(0,0,0,.07);
--home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
--home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
--home-blocks-active-border-left:4px solid rgba(0,0,0,.07);
--home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
--home-blocks-tablebar-bg:#d1d5db;
--home-blocks-bar-bg:#d1d5db;
--home-blocks-tablebar-bg:#cbd5e1;
--home-blocks-bar-bg:#cbd5e1;
--home-blocks-bar-button-bg:#ffffff;
--home-blocks-circle-bg:#c7cad0;
--home-blocks-circle-bg:#cbd5e1;
--home-templates-bg:transparent;
--home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
--home-templates-block-border-left:5px solid #d1d5db;

2
assets/styles/layout/variables/main/_dark.scss
View File

@ -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(--surface-800);
--doc-highlight-text-bg: var(--surface-50);
--doc-highlight-text-color: var(--surface-400);
}

2
components/landing/ThemeSection.vue
View File

@ -3,7 +3,7 @@
<div class="section-header">Themes</div>
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
<div class="flex flex-wrap justify-content-center px-5">
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'green')">PrimeOne</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('aura') }]" @click="changeTheme('aura', 'green')">PrimeOne</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
</div>

2
doc/nuxt/StyleDoc.vue
View File

@ -19,7 +19,7 @@ export default {
code1: {
basic: `
export default defineNuxtConfig({
css: ['primevue/resources/themes/lara-dark-green/theme.css']
css: ['primevue/resources/themes/aura-dark-green/theme.css']
})
`
}

8
doc/nuxt/StyledModeDoc.vue
View File

@ -27,14 +27,14 @@ export default {
code1: {
basic: `
<script>
import 'primevue/resources/themes/lara-light-green/theme.css'
import 'primevue/resources/themes/aura-light-green/theme.css'
<\/script>
`
},
code2: {
basic: `
<style>
@import url("primevue/resources/themes/lara-light-green/theme.css");
@import url("primevue/resources/themes/aura-light-green/theme.css");
<\/style>
`
},
@ -47,7 +47,7 @@ export default defineNuxtConfig({
primevue: {
/* Options */
},
css: ['primevue/resources/themes/lara-light-green/theme.css']
css: ['primevue/resources/themes/aura-light-green/theme.css']
})
`
},
@ -71,7 +71,7 @@ export default defineNuxtConfig({
primevue: {
cssLayerOrder: 'reset,primevue'
},
css: ['primevue/resources/themes/lara-light-green/theme.css']
css: ['primevue/resources/themes/aura-light-green/theme.css']
})
`
}

20
doc/theming/BuiltInThemesDoc.vue
View File

@ -27,6 +27,26 @@ primevue/resources/themes/mdc-light-deeppurple/theme.css
primevue/resources/themes/mdc-dark-indigo/theme.css
primevue/resources/themes/mdc-dark-deeppurple/theme.css
primevue/resources/themes/fluent-light/theme.css
primevue/resources/themes/aura-light-blue/theme.css
primevue/resources/themes/aura-light-indigo/theme.css
primevue/resources/themes/aura-light-purple/theme.css
primevue/resources/themes/aura-light-teal/theme.css
primevue/resources/themes/aura-light-green/theme.css
primevue/resources/themes/aura-light-amber/theme.css
primevue/resources/themes/aura-light-cyan/theme.css
primevue/resources/themes/aura-light-pink/theme.css
primevue/resources/themes/aura-light-lime/theme.css
primevue/resources/themes/aura-light-noir/theme.css
primevue/resources/themes/aura-dark-blue/theme.css
primevue/resources/themes/aura-dark-indigo/theme.css
primevue/resources/themes/aura-dark-purple/theme.css
primevue/resources/themes/aura-dark-teal/theme.css
primevue/resources/themes/aura-dark-green/theme.css
primevue/resources/themes/aura-dark-amber/theme.css
primevue/resources/themes/aura-dark-cyan/theme.css
primevue/resources/themes/aura-dark-pink/theme.css
primevue/resources/themes/aura-dark-lime/theme.css
primevue/resources/themes/aura-dark-noir/theme.css
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-light-indigo/theme.css
primevue/resources/themes/lara-light-purple/theme.css

4
doc/theming/SwitchThemesDoc.vue
View File

@ -47,7 +47,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
},
code4: {
basic: `
<link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css">
<link id="theme-link" rel="stylesheet" href="/themes/aura-light-green/theme.css">
`
},
code5: {
@ -59,7 +59,7 @@ export default defineNuxtConfig({
{
id: 'theme-link',
rel: 'stylesheet',
href: baseUrl + 'themes/lara-light-green/theme.css'
href: baseUrl + 'themes/aura-light-green/theme.css'
}
]
}

2
doc/vite/StyledModeDoc.vue
View File

@ -21,7 +21,7 @@ export default {
code1: {
basic: `
//in main.js
import 'primevue/resources/themes/lara-light-green/theme.css'
import 'primevue/resources/themes/aura-light-green/theme.css'
`
},
code2: {

2
layouts/default.vue
View File

@ -95,7 +95,7 @@ export default {
localStorage.setItem(this.$appState.colorSchemeKey, 'light');
} else {
if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark');
else newTheme = 'lara-dark-green'; //fallback
else newTheme = 'aura-dark-green'; //fallback
localStorage.setItem(this.$appState.colorSchemeKey, 'dark');
}

8
pages/index.vue
View File

@ -38,7 +38,7 @@ export default {
},
data() {
return {
tableTheme: 'lara-light-green'
tableTheme: 'aura-light-green'
};
},
themeChangeListener: null,
@ -57,14 +57,14 @@ export default {
const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
this.replaceTableTheme('lara-dark-green');
this.replaceTableTheme('aura-dark-green');
} else {
this.replaceTableTheme('lara-light-green');
this.replaceTableTheme('aura-light-green');
}
},
methods: {
onDarkModeToggle() {
const newTheme = this.$appState.darkTheme ? 'lara-light-green' : 'lara-dark-green';
const newTheme = this.$appState.darkTheme ? 'aura-light-green' : 'aura-dark-green';
const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
localStorage.setItem(this.$appState.colorSchemeKey, this.$appState.darkTheme ? 'light' : 'dark');

2
plugins/app-state.js
View File

@ -1,7 +1,7 @@
const $appState = {
install: (Vue, options) => {
Vue.config.globalProperties.$appState = reactive({
theme: 'lara-light-green',
theme: 'aura-light-green',
darkTheme: false,
codeSandbox: false,
sourceType: 'options-api',

1228
public/styles/landing/themes/aura-dark-green/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

1227
public/styles/landing/themes/aura-light-green/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff