From 8e4854474da763be098e7ff98070542ba676ee8c Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 2 Jan 2024 10:18:28 +0000 Subject: [PATCH] Init theme structure --- app.vue | 12 +- components/lib/base/style/BaseStyle.js | 3 + .../lib/basecomponent/BaseComponent.vue | 43 +++++++ .../basecomponent/style/BaseComponentStyle.js | 3 +- components/lib/config/PrimeVue.js | 32 +++-- components/lib/theme/index.d.ts | 13 ++ components/lib/theme/index.js | 1 + .../theme/lara/fonts/Inter-italic.var.woff2 | Bin 0 -> 245036 bytes .../theme/lara/fonts/Inter-roman.var.woff2 | Bin 0 -> 227180 bytes components/lib/theme/lara/global.js | 95 +++++++++++++++ components/lib/theme/lara/index.d.ts | 0 components/lib/theme/lara/index.js | 33 ++++++ components/lib/theme/lara/package.json | 6 + components/lib/theme/lara/panel/index.d.ts | 31 +++++ components/lib/theme/lara/panel/index.js | 89 ++++++++++++++ components/lib/theme/lara/panel/package.json | 6 + components/lib/theme/package.json | 6 + components/lib/theme/utils/color/index.js | 4 + components/lib/theme/utils/color/mix.js | 39 ++++++ components/lib/theme/utils/color/palette.js | 11 ++ components/lib/theme/utils/color/shade.js | 3 + components/lib/theme/utils/color/tint.js | 3 + components/lib/theme/utils/index.js | 3 + components/lib/theme/utils/sharedUtils.js | 112 ++++++++++++++++++ components/lib/theme/utils/toVariables.js | 35 ++++++ nuxt-vite.config.js | 83 +++++++++++++ 26 files changed, 649 insertions(+), 17 deletions(-) create mode 100644 components/lib/theme/index.d.ts create mode 100644 components/lib/theme/index.js create mode 100644 components/lib/theme/lara/fonts/Inter-italic.var.woff2 create mode 100644 components/lib/theme/lara/fonts/Inter-roman.var.woff2 create mode 100644 components/lib/theme/lara/global.js create mode 100644 components/lib/theme/lara/index.d.ts create mode 100644 components/lib/theme/lara/index.js create mode 100644 components/lib/theme/lara/package.json create mode 100644 components/lib/theme/lara/panel/index.d.ts create mode 100644 components/lib/theme/lara/panel/index.js create mode 100644 components/lib/theme/lara/panel/package.json create mode 100644 components/lib/theme/package.json create mode 100644 components/lib/theme/utils/color/index.js create mode 100644 components/lib/theme/utils/color/mix.js create mode 100644 components/lib/theme/utils/color/palette.js create mode 100644 components/lib/theme/utils/color/shade.js create mode 100644 components/lib/theme/utils/color/tint.js create mode 100644 components/lib/theme/utils/index.js create mode 100644 components/lib/theme/utils/sharedUtils.js create mode 100644 components/lib/theme/utils/toVariables.js diff --git a/app.vue b/app.vue index 912a811fd..10773055e 100644 --- a/app.vue +++ b/app.vue @@ -20,11 +20,11 @@ export default { created() { useServerHead({ link: [ - { + /*{ id: 'theme-link', rel: 'stylesheet', href: '/themes/lara-light-green/theme.css' - }, + }*/ { id: 'home-table-link', rel: 'stylesheet', @@ -57,12 +57,16 @@ export default { document.startViewTransition(() => this.applyTheme(event)); }, applyTheme(event) { - this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => { + /*this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => { this.$appState.theme = event.theme; this.$appState.darkTheme = event.dark; EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark }); - }); + });*/ + // @todo + this.$appState.theme = event.theme; + this.$appState.darkTheme = event.dark; + document.documentElement.className = this.$appState.darkTheme ? 'p-dark' : ''; } } }; diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js index a1e73d0db..88c5d327b 100644 --- a/components/lib/base/style/BaseStyle.js +++ b/components/lib/base/style/BaseStyle.js @@ -35,6 +35,9 @@ export default { loadStyle(options = {}) { return this.css ? useStyle(this.css, { name: this.name, ...options }) : {}; }, + loadTheme(theme, options = {}) { + return theme ? useStyle(theme, { name: `${this.name}-style`, ...options }) : {}; + }, getStyleSheet(extendedCSS = '', props = {}) { if (this.css) { const _props = Object.entries(props) diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index fa3b2267e..682381999 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -1,5 +1,6 @@