From 9efff5b52b6cae50a8b4954eec3269f6dc4b6883 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 18 Jan 2024 06:51:37 +0300 Subject: [PATCH] Make aura default --- README.md | 4 +- app.vue | 8 +- assets/styles/layout/_core.scss | 2 +- assets/styles/layout/_doc.scss | 2 +- .../layout/variables/landing/_dark.scss | 62 +- .../layout/variables/landing/_light.scss | 38 +- .../styles/layout/variables/main/_dark.scss | 2 +- components/landing/ThemeSection.vue | 2 +- doc/nuxt/StyleDoc.vue | 2 +- doc/nuxt/StyledModeDoc.vue | 8 +- doc/theming/BuiltInThemesDoc.vue | 20 + doc/theming/SwitchThemesDoc.vue | 4 +- doc/vite/StyledModeDoc.vue | 2 +- layouts/default.vue | 2 +- pages/index.vue | 8 +- plugins/app-state.js | 2 +- .../landing/themes/aura-dark-green/theme.css | 1228 +++++++++++++++++ .../landing/themes/aura-light-green/theme.css | 1227 ++++++++++++++++ 18 files changed, 2549 insertions(+), 74 deletions(-) create mode 100644 public/styles/landing/themes/aura-dark-green/theme.css create mode 100644 public/styles/landing/themes/aura-light-green/theme.css diff --git a/README.md b/README.md index 24ee434b7..fe8748f6c 100644 --- a/README.md +++ b/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'] }); ``` diff --git a/app.vue b/app.vue index 912a811fd..72a3b7717 100644 --- a/app.vue +++ b/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); diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index 29e10c83b..bf0056bca 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -64,7 +64,7 @@ h6 { } p { - line-height: 1.5; + line-height: 1.75; margin: 0 0 1rem 0; } diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 92fbef87f..7e0d278f7 100644 --- a/assets/styles/layout/_doc.scss +++ b/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); diff --git a/assets/styles/layout/variables/landing/_dark.scss b/assets/styles/layout/variables/landing/_dark.scss index 6b0579725..906049c9a 100644 --- a/assets/styles/layout/variables/landing/_dark.scss +++ b/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-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); } \ No newline at end of file diff --git a/assets/styles/layout/variables/landing/_light.scss b/assets/styles/layout/variables/landing/_light.scss index 8352457a4..740c8b690 100644 --- a/assets/styles/layout/variables/landing/_light.scss +++ b/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-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; diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index 22fddaaa1..10ff8d5e1 100644 --- a/assets/styles/layout/variables/main/_dark.scss +++ b/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); } \ No newline at end of file diff --git a/components/landing/ThemeSection.vue b/components/landing/ThemeSection.vue index 282836aa2..f5553de2d 100644 --- a/components/landing/ThemeSection.vue +++ b/components/landing/ThemeSection.vue @@ -3,7 +3,7 @@
Themes

Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.

- +
diff --git a/doc/nuxt/StyleDoc.vue b/doc/nuxt/StyleDoc.vue index c9360103b..ea959e1ae 100644 --- a/doc/nuxt/StyleDoc.vue +++ b/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'] }) ` } diff --git a/doc/nuxt/StyledModeDoc.vue b/doc/nuxt/StyledModeDoc.vue index 13d162ceb..d052bd93e 100644 --- a/doc/nuxt/StyledModeDoc.vue +++ b/doc/nuxt/StyledModeDoc.vue @@ -27,14 +27,14 @@ export default { code1: { basic: `