diff --git a/ej2-vue/appearance/css-variables.md b/ej2-vue/appearance/css-variables.md index 6467c2985..3927c7dc8 100644 --- a/ej2-vue/appearance/css-variables.md +++ b/ej2-vue/appearance/css-variables.md @@ -17,16 +17,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS * Material 3 Theme * Fluent 2 Theme * Bootstrap 5.3 Theme +* Tailwind 3.4 Theme ## CSS themes - Syncfusion Vue components -[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) and [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. +[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. > Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;. ### Utilization of CSS variables in modern themes -Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support with CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors while `Fluent 2` uses `hex` values for color customization. `Bootstrap 5.3` allows color customization with both `rgb()` and `hex` values. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes. The examples below shows CSS variables with their values used for the respective themes. +Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it's important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application. + +Below are examples of how CSS variables can be defined for these themes: {% tabs %} {% highlight ts tabtitle="material3.css" %} @@ -38,6 +41,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support wi {% highlight ts tabtitle="bootstrap5.3.css" %} {% include code-snippet/common/css-value-cs1/bootstrap5.3.css %} {% endhighlight %} +{% highlight css tabtitle="tailwind3.4.css" %} +{% include code-snippet/common/css-value-cs1/tailwind3.css %} +{% endhighlight %} {% endtabs %} ### How to get these themes? @@ -52,9 +58,11 @@ To access themes provided by Syncfusion, you have two primary options, |Package | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) | | | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) | | | [Bootstrap 5.3 Light](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [Bootstrap 5.3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) | +| | [Tailwind 3.4 Light](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [Tailwind 3.4 Dark](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) | | CDN | [Material 3 Light](https://cdn.syncfusion.com/ej2/27.1.48/material3.css) | [Material 3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/material3-dark.css) | | | [Fluent 2 light](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) | [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/27.1.48/fluent2-dark.css) | | | [Bootstrap5.3 light](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css) | [Bootstrap 5.3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) | +| | [Tailwind 3.4 Light](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css) | [Tailwind 3.4 Dark](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) | ### Color Customization in themes @@ -116,11 +124,29 @@ Example for `Bootstrap 5.3` customization using CSS class. ![customized primary value](images/bootstrap5.3-customize.png) +Example for `Tailwind 3.4` customization using CSS class. + +{% tabs %} +{% highlight html tabtitle="app.vue" %} +{% include code-snippet/common/tailwind3-cs2/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs2" %} + +**Default primary value** + +![default primary value](images/tailwind3-default.png) + +**Customized primary value** + +![customized primary value](images/tailwind3-customize.png) + With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components. ### Switching Light and Dark mode with CSS variables -Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application. +Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In all themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application. {% tabs %} {% highlight html tabtitle="app.vue" %} @@ -154,9 +180,21 @@ Similar to `Fluent 2`, we offer both Light and Dark variants with `Bootstrap 5.3 {% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs1" %} +### Mode switching in Tailwind 3.4 theme + +Similar to `Fluent 2`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Tailwind 3.4 theme, there are distinct class variables for light and dark modes, as shown in the preview below. + +{% tabs %} +{% highlight html tabtitle="app.vue" %} +{% include code-snippet/common/tailwind3-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs1" %} + ### How to switch dark mode? -To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2` and `Bootstrap 5.3` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance. +To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2`, `Bootstrap 5.3` and `Tailwind 3.4` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance. `Material 3` dark mode @@ -170,6 +208,10 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o ![dark mode](images/bootstrap5.3-dark.png) +`Tailwind 3.4` dark mode + +![dark mode](images/tailwind3-dark.png) + ### ThemeStudio Application The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2 and Bootstrap 5.3 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes. diff --git a/ej2-vue/appearance/icons.md b/ej2-vue/appearance/icons.md index 08529e6b9..e42c32744 100644 --- a/ej2-vue/appearance/icons.md +++ b/ej2-vue/appearance/icons.md @@ -193,6 +193,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding +### Tailwind 3.4 + + + ### Fluent 2 diff --git a/ej2-vue/appearance/images/tailwind3-customize.png b/ej2-vue/appearance/images/tailwind3-customize.png new file mode 100644 index 000000000..837249c88 Binary files /dev/null and b/ej2-vue/appearance/images/tailwind3-customize.png differ diff --git a/ej2-vue/appearance/images/tailwind3-dark.png b/ej2-vue/appearance/images/tailwind3-dark.png new file mode 100644 index 000000000..14160b09a Binary files /dev/null and b/ej2-vue/appearance/images/tailwind3-dark.png differ diff --git a/ej2-vue/appearance/images/tailwind3-default.png b/ej2-vue/appearance/images/tailwind3-default.png new file mode 100644 index 000000000..9c0ad784a Binary files /dev/null and b/ej2-vue/appearance/images/tailwind3-default.png differ diff --git a/ej2-vue/appearance/theme.md b/ej2-vue/appearance/theme.md index 5ed0b23a7..47b9388b2 100644 --- a/ej2-vue/appearance/theme.md +++ b/ej2-vue/appearance/theme.md @@ -14,6 +14,8 @@ The Syncfusion Vue library has provided the below list of in-built themes, |Theme |Style Sheet Name| |--------|--------| +|Tailwind 3.4 | tailwind3.css | +|Tailwind 3.4 Dark | tailwind3-dark.css | |Bootstrap 5.3 | bootstrap5.3.css | |Bootstrap 5.3 Dark | bootstrap5.3-dark.css | |Fluent 2 | fluent2.css | @@ -148,6 +150,215 @@ To refer to individual component's optimized CSS files from an individual packag The below list of common variables used in the Syncfusion Vue library themes for all components. You can change these variables to customize the corresponding theme. +### Syncfusion Tailwind 3.4 theme + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue (Default Theme) Value (Dark Theme)
--color-sf-black + rgb(0,0,0) + + rgb(0,0,0) +
--color-sf-white + rgb(255,255,255) + + rgb(255,255,255) +
--color-sf-primary + rgba(79, 70, 229) + + rgba(99, 102, 241) +
--color-sf-primary-text-color + #fff + + #fff +
--color-sf-primary-light + #3730a3 + + #3730a3 +
--color-sf-primary-lighter + #e0e7ff + + #1e1b4b +
--color-sf-primary-dark + #4338ca + + #818cf8 +
--color-sf-primary-darker + #3730a3 + + #4f46e5 +
--color-sf-success + #15803d + + #22c55e +
--color-sf-info + #0e7490 + + #38bdf8 +
--color-sf-warning + #c2410c + + #f97316 +
--color-sf-danger + #dc2626 + + #f87171 +
--color-sf-success-light + #dcfce7 + + #164c37 +
--color-sf-info-light + #cffafe + + #0e485b +
--color-sf-warning-light + #ffedd5 + + #573422 +
--color-sf-danger-light + #fee2e2 + + #54252f +
--color-sf-success-dark + #166534 + + #4ade80 +
--color-sf-info-dark + #155e75 + + #38bdf8 +
--color-sf-warning-dark + #9a3412 + + #fb923c +
--color-sf-danger-dark + #b91c1c + + #ef4444 +
+ ### Syncfusion Bootstrap 5.3 theme diff --git a/ej2-vue/code-snippet/common/css-value-cs1/tailwind3.css b/ej2-vue/code-snippet/common/css-value-cs1/tailwind3.css new file mode 100644 index 000000000..b49de4d6e --- /dev/null +++ b/ej2-vue/code-snippet/common/css-value-cs1/tailwind3.css @@ -0,0 +1,26 @@ +:root{ + --color-sf-content-bg-color: rgba(255, 255, 255); + --color-sf-content-bg-color-alt1: #f9fafb; + --color-sf-content-bg-color-alt2: #f3f4f6; + --color-sf-content-bg-color-alt3: #e5e7eb; + --color-sf-content-bg-color-alt4: #9ca3af; + --color-sf-content-bg-color-alt5: #6b7280; + --color-sf-content-bg-color-hover: #f9fafb; + --color-sf-content-bg-color-pressed: #f3f4f6; + --color-sf-content-bg-color-focus: #f9fafb; + --color-sf-content-bg-color-selected: #e5e7eb; + --color-sf-content-bg-color-dragged: #f3f4f6; + --color-sf-content-bg-color-disabled: #ffffff; + --color-sf-flyout-bg-color: #ffffff; + --color-sf-flyout-bg-color-hover: #f3f4f6; + --color-sf-flyout-bg-color-pressed: #e5e7eb; + --color-sf-flyout-bg-color-focus: #f3f4f6; + --color-sf-flyout-bg-color-selected: #e5e7eb; + --color-sf-flyout-bg-color-disabled: #fff; + --color-sf-overlay-bg-color: rgba(107, 114, 128, 74.9); + --color-sf-table-bg-color-hover: #f9fafb; + --color-sf-table-bg-color-pressed: #f3f4f6; + --color-sf-table-bg-color-selected: #e5e7eb; + --color-sf-text-input-bg-color: #ffffff; + --color-sf-treeview-item-active-hover-bg: #e5e7eb; +} \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs1/app.vue b/ej2-vue/code-snippet/common/tailwind3-cs1/app.vue new file mode 100644 index 000000000..4dbd26c58 --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs1/app.vue @@ -0,0 +1,63 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs1/index.css b/ej2-vue/code-snippet/common/tailwind3-cs1/index.css new file mode 100644 index 000000000..49739ab9f --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs1/index.css @@ -0,0 +1,11 @@ +button { + margin: 25px 5px 20px 20px; +} + +.e-checkbox-wrapper { + margin-top: 18px; +} + +.dark { + background-color: black; +} \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs1/index.html b/ej2-vue/code-snippet/common/tailwind3-cs1/index.html new file mode 100644 index 000000000..64d3be2b0 --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + + diff --git a/ej2-vue/code-snippet/common/tailwind3-cs1/index.js b/ej2-vue/code-snippet/common/tailwind3-cs1/index.js new file mode 100644 index 000000000..111ece594 --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs1/index.js @@ -0,0 +1,37 @@ + +import Vue from 'vue'; +import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; +import { enableRipple } from '@syncfusion/ej2-base'; +import { CheckBoxPlugin } from '@syncfusion/ej2-vue-buttons'; + +enableRipple(true); +Vue.use(ButtonPlugin); +Vue.use(CheckBoxPlugin); + +new Vue({ + el: '#app', + data() { + return { + isCheckboxChecked: false, + }; + }, + methods: { + toggleBodyClass() { + if (this.isCheckboxChecked) { + document.body.classList.add('e-dark-mode', 'dark'); // Add your desired classes here + } else { + document.body.classList.remove('e-dark-mode', 'dark'); // Remove your desired classes here + } + }, + }, + template: ` +
+
+ Button + Button + Button + Button + Button +
+ `, + }); \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs1/systemjs.config.js b/ej2-vue/code-snippet/common/tailwind3-cs1/systemjs.config.js new file mode 100644 index 000000000..da5b29b9b --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs1/systemjs.config.js @@ -0,0 +1,25 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs2/app.vue b/ej2-vue/code-snippet/common/tailwind3-cs2/app.vue new file mode 100644 index 000000000..0782ef55f --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs2/app.vue @@ -0,0 +1,32 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs2/index.css b/ej2-vue/code-snippet/common/tailwind3-cs2/index.css new file mode 100644 index 000000000..9f06f8abd --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs2/index.css @@ -0,0 +1,7 @@ +button { + margin: 25px 5px 20px 20px; +} + +:root { + --color-sf-primary: 104, 134, 164; +} \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs2/index.html b/ej2-vue/code-snippet/common/tailwind3-cs2/index.html new file mode 100644 index 000000000..64d3be2b0 --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs2/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + + diff --git a/ej2-vue/code-snippet/common/tailwind3-cs2/index.js b/ej2-vue/code-snippet/common/tailwind3-cs2/index.js new file mode 100644 index 000000000..f633506a9 --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs2/index.js @@ -0,0 +1,20 @@ + +import Vue from 'vue'; +import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; +import { enableRipple } from '@syncfusion/ej2-base'; + +enableRipple(true); +Vue.use(ButtonPlugin); + +new Vue({ + el: '#app', + data() { + return { + }; + }, + template: ` +
+ Button +
+ `, + }); \ No newline at end of file diff --git a/ej2-vue/code-snippet/common/tailwind3-cs2/systemjs.config.js b/ej2-vue/code-snippet/common/tailwind3-cs2/systemjs.config.js new file mode 100644 index 000000000..da5b29b9b --- /dev/null +++ b/ej2-vue/code-snippet/common/tailwind3-cs2/systemjs.config.js @@ -0,0 +1,25 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file