Make aura default

README.md

@@ -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']
 });
 ```
 

app.vue

@@ -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);

assets/styles/layout/_core.scss

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

assets/styles/layout/_doc.scss

@@ -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);

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

@@ -1,53 +1,53 @@
 .landing.layout-dark {
     --home-highlight-color:#34d399;
     --home-highlight-darker-color:#6ee7b7;
-    --home-highlight-fore-color:#030712;
+    --home-highlight-fore-color:#020617;
-    --home-bg:#111827;
+    --home-bg:#09090b;
-    --home-border-color:#424b57;
+    --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-left:5px solid #27272a;
-    --home-blocks-border-bottom:7px solid #1f2937;
+    --home-blocks-border-bottom:7px solid #27272a;
-    --home-blocks-border:1px solid #424b57;
+    --home-blocks-border:1px solid #27272a;
-    --home-blocks-sidebar-bg:#1f2937;
+    --home-blocks-sidebar-bg:#18181b;
-    --home-blocks-list-bg:#28323f;
+    --home-blocks-list-bg:#27272a;
-    --home-blocks-main-bg:#111827;
+    --home-blocks-main-bg:#09090b;
-    --home-blocks-main-border:1px solid #424b57;
+    --home-blocks-main-border:1px solid #27272a;
-    --home-blocks-item-bg:#1f2937;
+    --home-blocks-item-bg:#18181b;
-    --home-blocks-image-bg:#28323f;
+    --home-blocks-image-bg:#27272a;
-    --home-blocks-text-color:#4b5563;
+    --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-top:1px solid #27272a;
-    --home-blocks-active-border-right:1px solid #424b57;
+    --home-blocks-active-border-right:1px solid #27272a;
-    --home-blocks-active-border-bottom:6px solid #424b57;
+    --home-blocks-active-border-bottom:6px solid #27272a;
-    --home-blocks-active-border-left:4px solid #424b57;
+    --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-tablebar-bg:#3f3f46;
-    --home-blocks-bar-bg:#4b5563;
+    --home-blocks-bar-bg:#3f3f46;
-    --home-blocks-bar-button-bg:#ffffff;
+    --home-blocks-bar-button-bg:#3f3f46;
-    --home-blocks-circle-bg:#4b5563;
+    --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-left:5px solid #27272a;
-    --home-templates-block-border-bottom:7px solid #424b57;
+    --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-top:1px solid #27272a;
-    --home-templates-btn-border-right:1px solid #424b57;
+    --home-templates-btn-border-right:1px solid #27272a;
-    --home-templates-btn-border-bottom:4px solid #424b57;
+    --home-templates-btn-border-bottom:4px solid #27272a;
-    --home-templates-btn-border-left:3px solid #424b57;
+    --home-templates-btn-border-left:3px solid #27272a;
     --home-features-card-shadow: none;
     --home-box-ring-color: rgba(52, 211, 153, .3);
 }

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

@@ -2,39 +2,39 @@
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;
-    --home-bg:#F9FAFB;
+    --home-bg:#f8fafc;
-    --home-border-color:rgba(0,0,0,.1);
+    --home-border-color:#e2e8f0;
-    --home-primary-text-color:#030712;
+    --home-primary-text-color:#334155;
-    --home-secondary-text-color:#6b7280;
+    --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-border:1px solid #e2e8f0;
-    --home-linkbox-text-color:#030712;
+    --home-linkbox-text-color:#334155;
-    --home-linkbox-hover-bg:#e5e7eb;
+    --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-left:5px solid #e2e8f0;
-    --home-blocks-border-bottom:7px solid rgba(0,0,0,.1);
+    --home-blocks-border-bottom:7px solid #e2e8f0;
-    --home-blocks-border:1px solid rgba(0,0,0,.1);
+    --home-blocks-border:1px solid #e2e8f0;
-    --home-blocks-sidebar-bg:#f3f4f6;
+    --home-blocks-sidebar-bg:#f1f5f9;
-    --home-blocks-list-bg:#f9fafb;
+    --home-blocks-list-bg:#f8fafc;
     --home-blocks-main-bg:#ffffff;
-    --home-blocks-main-border:1px solid rgba(0,0,0,.1);
+    --home-blocks-main-border:1px solid #e2e8f0;
-    --home-blocks-item-bg:#f4f5f7;
+    --home-blocks-item-bg:#f1f5f9;
-    --home-blocks-image-bg:#e5e7eb;
+    --home-blocks-image-bg:#e2e8f0;
-    --home-blocks-text-color:#d1d5db;
+    --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-tablebar-bg:#cbd5e1;
-    --home-blocks-bar-bg:#d1d5db;
+    --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;

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

components/landing/ThemeSection.vue

@@ -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>

doc/nuxt/StyleDoc.vue

@@ -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']
 })
 `
             }

doc/nuxt/StyledModeDoc.vue

@@ -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']
 })
 `
             }

doc/theming/BuiltInThemesDoc.vue

@@ -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

doc/theming/SwitchThemesDoc.vue

@@ -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'
                 }
             ]
         }

doc/vite/StyledModeDoc.vue

@@ -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: {

layouts/default.vue

@@ -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');
             }

pages/index.vue

@@ -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');

plugins/app-state.js

@@ -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',