Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

926228: Update the documentation page for tailwind 3.4 theme in react #587

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

926228: Update the documentation page for tailwind 3.4 theme in react #587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e115f98
926228: Update the documentation page for tailwind 3.4 theme in react
JosephHerson Dec 9, 2024
ba95975
926228: Update the documentation page for tailwind 3.4 theme in react
JosephHerson Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 55 additions & 4 deletions ej2-react/appearance/css-variables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 React 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" %}
Expand All @@ -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 ts tabtitle="tailwind3.4.css" %}
{% include code-snippet/common/css-value-cs1/tailwind3.4.css %}
{% endhighlight %}
{% endtabs %}

### How to get these themes?
Expand All @@ -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

Expand Down Expand Up @@ -134,11 +142,35 @@ 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 js tabtitle="index.jsx" %}
{% include code-snippet/common/tailwind3.4-cs2/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/common/tailwind3.4-cs2/app/index.tsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.css" %}
{% include code-snippet/common/tailwind3.4-cs2/index.css %}
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/code-snippet/common/tailwind3.4-cs2" %}

**Default Tailwind 3.4 primary value**

![default primary value](images/tailwind3-default.png)

**Customized Tailwind 3.4 primary value**

![customized primary value](images/tailwind3-customize.png)

With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion React 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 js tabtitle="index.jsx" %}
Expand Down Expand Up @@ -181,9 +213,24 @@ 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 Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/common/tailwind3.4-cs1/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
{% include code-snippet/common/tailwind3.4-cs1/app/index.tsx %}
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/code-snippet/common/tailwind3.4-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

Expand All @@ -197,6 +244,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 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
Expand Down
4 changes: 4 additions & 0 deletions ej2-react/appearance/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding

<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/tailwind/demo.html" style="height:1000px;width:100%;"></iframe>

### Tailwind 3.4

<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/tailwind3/demo.html" style="height:1000px;width:100%;"></iframe>

### Fluent 2

<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/fluent2/demo.html" style="height:1000px;width:100%;"></iframe>
Expand Down
Binary file added ej2-react/appearance/images/tailwind3-customize.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-react/appearance/images/tailwind3-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-react/appearance/images/tailwind3-default.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
213 changes: 213 additions & 0 deletions ej2-react/appearance/theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ The Syncfusion React UI can allow you to apply styles for the components. The fo

|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 |
Expand Down Expand Up @@ -191,6 +193,8 @@ To refer to optimized CSS files, use the following syntax:

| Theme Name | CDN Reference |
|--- | --- |
| Tailwind 3.4 | [https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css](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](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) |
| Bootstrap 5.3 | [https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css](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](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) |
| Fluent 2 | [https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) |
Expand Down Expand Up @@ -218,6 +222,215 @@ The following list of common variables are used in the Syncfusion JavaScript lib

<!-- markdownlint-disable MD033 -->

### Syncfusion Tailwind 3.4 theme

<table>
<style>
.circle-color-indicator {
width: 1.5em;
height: 1.5em;
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(0, 0, 0, .08);
vertical-align: middle;
}
th, td {
text-align: left;
padding: 5px 15px;
vertical-align: top;
}
</style>
<thead>
<tr>
<th>Name</th>
<th>Value (Default Theme) </th>
<th>Value (Dark Theme) </th>
</tr>
</thead>
<tbody>
<tr>
<td>--color-sf-black</td>
<td>
<span class="circle-color-indicator" style="background: rgb(0,0,0)"></span> rgb(0,0,0)
</td>
<td>
<span class="circle-color-indicator" style="background: rgb(0,0,0)"></span> rgb(0,0,0)
</td>
</tr>
<tr>
<td>--color-sf-white</td>
<td>
<span class="circle-color-indicator" style="background: rgb(255,255,255)"></span> rgb(255,255,255)
</td>
<td>
<span class="circle-color-indicator" style="background: rgb(255,255,255)"></span> rgb(255,255,255)
</td>
</tr>
<tr>
<td>--color-sf-primary</td>
<td>
<span class="circle-color-indicator" style="background: rgba(79, 70, 229)"></span> rgba(79, 70, 229)
</td>
<td>
<span class="circle-color-indicator" style="background: rgba(99, 102, 241)"></span> rgba(99, 102, 241)
</td>
</tr>
<tr>
<td>--color-sf-primary-text-color</td>
<td>
<span class="circle-color-indicator" style="background: #fff"></span> #fff
</td>
<td>
<span class="circle-color-indicator" style="background: #fff"></span> #fff
</td>
</tr>
<tr>
<td>--color-sf-primary-light</td>
<td>
<span class="circle-color-indicator" style="background: #3730a3"></span> #3730a3
</td>
<td>
<span class="circle-color-indicator" style="background: #3730a3"></span> #3730a3
</td>
</tr>
<tr>
<td>--color-sf-primary-lighter</td>
<td>
<span class="circle-color-indicator" style="background: #e0e7ff"></span> #e0e7ff
</td>
<td>
<span class="circle-color-indicator" style="background: #1e1b4b"></span> #1e1b4b
</td>
</tr>
<tr>
<td>--color-sf-primary-dark</td>
<td>
<span class="circle-color-indicator" style="background: #4338ca"></span> #4338ca
</td>
<td>
<span class="circle-color-indicator" style="background: #818cf8"></span> #818cf8
</td>
</tr>
<tr>
<td>--color-sf-primary-darker</td>
<td>
<span class="circle-color-indicator" style="background: #3730a3"></span> #3730a3
</td>
<td>
<span class="circle-color-indicator" style="background: #4f46e5"></span> #4f46e5
</td>
</tr>
<tr>
<td>--color-sf-success</td>
<td>
<span class="circle-color-indicator" style="background: #15803d"></span> #15803d
</td>
<td>
<span class="circle-color-indicator" style="background: #22c55e"></span> #22c55e
</td>
</tr>
<tr>
<td>--color-sf-info</td>
<td>
<span class="circle-color-indicator" style="background: #0e7490"></span> #0e7490
</td>
<td>
<span class="circle-color-indicator" style="background: #38bdf8"></span> #38bdf8
</td>
</tr>
<tr>
<td>--color-sf-warning</td>
<td>
<span class="circle-color-indicator" style="background: #c2410c"></span> #c2410c
</td>
<td>
<span class="circle-color-indicator" style="background: #f97316"></span> #f97316
</td>
</tr>
<tr>
<td>--color-sf-danger</td>
<td>
<span class="circle-color-indicator" style="background: #dc2626"></span> #dc2626
</td>
<td>
<span class="circle-color-indicator" style="background: #f87171"></span> #f87171
</td>
</tr>
<tr>
<td>--color-sf-success-light</td>
<td>
<span class="circle-color-indicator" style="background: #dcfce7"></span> #dcfce7
</td>
<td>
<span class="circle-color-indicator" style="background: #164c37"></span> #164c37
</td>
</tr>
<tr>
<td>--color-sf-info-light</td>
<td>
<span class="circle-color-indicator" style="background: #cffafe"></span> #cffafe
</td>
<td>
<span class="circle-color-indicator" style="background: #0e485b"></span> #0e485b
</td>
</tr>
<tr>
<td>--color-sf-warning-light</td>
<td>
<span class="circle-color-indicator" style="background: #ffedd5"></span> #ffedd5
</td>
<td>
<span class="circle-color-indicator" style="background: #573422"></span> #573422
</td>
</tr>
<tr>
<td>--color-sf-danger-light</td>
<td>
<span class="circle-color-indicator" style="background: #fee2e2"></span> #fee2e2
</td>
<td>
<span class="circle-color-indicator" style="background: #54252f"></span> #54252f
</td>
</tr>
<tr>
<td>--color-sf-success-dark</td>
<td>
<span class="circle-color-indicator" style="background: #166534"></span> #166534
</td>
<td>
<span class="circle-color-indicator" style="background: #4ade80"></span> #4ade80
</td>
</tr>
<tr>
<td>--color-sf-info-dark</td>
<td>
<span class="circle-color-indicator" style="background: #155e75"></span> #155e75
</td>
<td>
<span class="circle-color-indicator" style="background: #38bdf8"></span> #38bdf8
</td>
</tr>
<tr>
<td>--color-sf-warning-dark</td>
<td>
<span class="circle-color-indicator" style="background: #9a3412"></span> #9a3412
</td>
<td>
<span class="circle-color-indicator" style="background: #fb923c"></span> #fb923c
</td>
</tr>
<tr>
<td>--color-sf-danger-dark</td>
<td>
<span class="circle-color-indicator" style="background: #b91c1c"></span> #b91c1c
</td>
<td>
<span class="circle-color-indicator" style="background: #ef4444"></span> #ef4444
</td>
</tr>
</tbody>
</table>

### Syncfusion Bootstrap 5.3 theme

<table>
Expand Down
26 changes: 26 additions & 0 deletions ej2-react/code-snippet/common/css-value-cs1/tailwind3.4.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading