From d65823f9ed00dbc608db510419b8ac3f23c963c2 Mon Sep 17 00:00:00 2001 From: Yury Uvarov Date: Thu, 30 Nov 2023 14:30:22 +0300 Subject: [PATCH 1/2] add create general css --- config/assets.config.ts | 3 +- demo/main.ts | 6 - package/build/demo.html | 11 +- package/build/themes/dark.min.css | 2 +- package/build/themes/light.min.css | 2 +- package/build/vanilla-calendar.layout.min.css | 2 + package/build/vanilla-calendar.min.css | 2 +- package/public/demo.html | 11 +- package/src/styles/themes/dark.css | 4 + package/src/styles/themes/light.css | 4 + package/src/styles/vanilla-calendar.css | 265 +----------------- .../src/styles/vanilla-calendar.layout.css | 255 +++++++++++++++++ tailwind.config.js | 28 +- 13 files changed, 310 insertions(+), 285 deletions(-) create mode 100644 package/build/vanilla-calendar.layout.min.css create mode 100644 package/src/styles/vanilla-calendar.layout.css diff --git a/config/assets.config.ts b/config/assets.config.ts index 9e255087..59833359 100644 --- a/config/assets.config.ts +++ b/config/assets.config.ts @@ -23,9 +23,10 @@ export default defineConfig({ }, }, input: { + main: resolve(__dirname, '../package/src/styles/vanilla-calendar.css'), + layout: resolve(__dirname, '../package/src/styles/vanilla-calendar.layout.css'), light: resolve(__dirname, '../package/src/styles/themes/light.css'), dark: resolve(__dirname, '../package/src/styles/themes/dark.css'), - 'vanilla-calendar': resolve(__dirname, '../package/src/styles/vanilla-calendar.css'), }, }, }, diff --git a/demo/main.ts b/demo/main.ts index 44816a38..5ed1e3bc 100644 --- a/demo/main.ts +++ b/demo/main.ts @@ -1,16 +1,10 @@ // import { IOptions } from '@package/types'; // import VanillaCalendar from '@/package/build/vanilla-calendar.min'; - // import '@/package/build/vanilla-calendar.min.css'; -// import '@/package/build/themes/light.min.css'; -// import '@/package/build/themes/dark.min.css'; import { IOptions } from '@package/types'; import VanillaCalendar from '@src/vanilla-calendar'; - import '@src/styles/vanilla-calendar.css'; -import '@src/styles/themes/light.css'; -import '@src/styles/themes/dark.css'; const config: IOptions = { settings: { diff --git a/package/build/demo.html b/package/build/demo.html index 7a07b0ac..4b73eac3 100644 --- a/package/build/demo.html +++ b/package/build/demo.html @@ -1,15 +1,14 @@ - + + - + + + Demo VanillaCalendar - - -
-
- @@ -110,13 +104,24 @@ If you're not using a package manager and prefer manual installation or CDN usag ## CSS Themes +```js +// Only layout calendar +import '@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.layout.min.css'; + +// Themes +import '@uvarov.frontend/vanilla-calendar/build/themes/light.min.css'; +import '@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css'; +``` + VanillaCalendar includes two CSS themes: the **light theme** and the **dark theme**. -- The **vanilla-calendar.min.css** file contains the essential structural styles for the calendar. -- The **light.min.css** theme provides a light color scheme. -- The **dark.min.css** theme offers a dark color scheme. +- The **vanilla-calendar.min.css** file contains all styles with all themes. +- The **vanilla-calendar.layout.min.css** file contains the essential structural styles for the calendar. +- The **themes/light.min.css** theme provides a light color scheme. +- The **themes/dark.min.css** theme offers a dark color scheme. + -The calendar will automatically display the theme based on the user's system preferences. If you want to enforce a specific theme, you can do so manually without the need to import all themes separately. +The calendar will automatically display the theme according to the user's system preferences. If you want to apply a specific theme, it is recommended to import **«vanilla-calendar.layout.min.css»** along with the theme you prefer: **«light.min.css»** or **«dark.min.css»**, instead of **«vanilla-calendar.min.css»**. ## DOM Templates