DOCINFRA-2341_merged_using_automation

ej2-asp-core-mvc/EJ2_ASP.MVC/appearance/figma.md

@@ -10,7 +10,7 @@ documentation: ug
 
 # Figma UI Kits for Syncfusion<sup>&reg;</sup> Controls
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion<sup style="font-size:70%">&reg;</sup> controls.
+Syncfusion<sup style="font-size:70%">&reg;</sup> offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1454123774600129202/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion<sup style="font-size:70%">&reg;</sup> controls.
 
 The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion<sup style="font-size:70%">&reg;</sup> controls.
 
@@ -28,7 +28,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Figma UI kit offers the fol
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion<sup style="font-size:70%">&reg;</sup> theme-specific Figma UI kits from the following links:
 
-- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
+- [Material 3](https://www.figma.com/community/file/1454123774600129202/syncfusion-ui-kit-material-3-theme)
 - [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
 - [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
 - [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
@@ -65,6 +65,31 @@ In addition to changing the button color, you can also customize other aspects l
 
 Feel free to experiment with these customization options to create a design that perfectly matches your requirements.
 
+## Downloading the customized styles
+
+Effortlessly download customized style changes as tokens and CSS variables using the `Syncfusion Design Tokens` plugin. This plugin bridges the gap between design and development by converting Figma design variables into Syncfusion tokens for direct use in your applications to ensure a smooth transition from design to implementation.
+
+### Exporting design tokens
+
+Follow these steps to download the customized styles from the Figma UI Kit:
+
+- First, open a [Syncfusion Figma UI Kit](https://www.figma.com/@syncfusion).
+- Navigate to the `Plugins & widgets` section in Figma and search for the `Syncfusion Design Tokens`.
+- Once found, run the plugin. A popup will appear with an `Export` button.
+- Click the `Export` button. This action will generate a zip file containing your design tokens.
+- Select a directory to save the exported files.
+- Extract the downloaded zip file to access its contents.
+
+![export-design-tokens](./images/syncfusion-design-tokens.png)
+
+### Utilizing design tokens
+
+The exported zip file includes the following files:
+  - `css-variables.css`: The css-variables.css file contains CSS variables for both light and dark themes, directly derived from your Figma designs. You can easily import this file into your application alongside the component styles to reflect your custom designs. For more detailed usage instructions, consult the [CSS variables](./css-variables) documentation.
+  - `<theme-name>-tokens.json`: This file (e.g., material3-tokens.json) contains style variables and values in a JSON format compatible with [Theme Studio](./theme-studio). This file, prefixed with the corresponding theme name, can be [imported](./theme-studio#import-previously-changed-settings-into-the-theme-studio) into [Theme Studio](./theme-studio) for further customization. After processing in [Theme Studio](./theme-studio), you can [download](./theme-studio#download-the-customized-theme) the updated styles file and integrate it into your application, bringing your custom themes to life.
+
+This streamlined process ensures that your unique design vision, crafted in Figma, is accurately translated into your final application, maintaining consistency between design and implementation.
+
 ## Upgrading the UI kits
 
 To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process:

ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/figma.md

@@ -10,7 +10,7 @@ documentation: ug
 
 # Figma UI Kits for Syncfusion<sup style="font-size:70%">&reg;</sup> Controls
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion<sup style="font-size:70%">&reg;</sup> controls.
+Syncfusion<sup style="font-size:70%">&reg;</sup> offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1454123774600129202/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion<sup style="font-size:70%">&reg;</sup> controls.
 
 The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion<sup style="font-size:70%">&reg;</sup> controls.
 
@@ -28,7 +28,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Figma UI kit offers the fol
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion<sup style="font-size:70%">&reg;</sup> theme-specific Figma UI kits from the following links:
 
-- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
+- [Material 3](https://www.figma.com/community/file/1454123774600129202/syncfusion-ui-kit-material-3-theme)
 - [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
 - [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
 - [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
@@ -65,6 +65,31 @@ In addition to changing the button color, you can also customize other aspects l
 
 Feel free to experiment with these customization options to create a design that perfectly matches your requirements.
 
+## Downloading the customized styles
+
+Effortlessly download customized style changes as tokens and CSS variables using the `Syncfusion Design Tokens` plugin. This plugin bridges the gap between design and development by converting Figma design variables into Syncfusion tokens for direct use in your applications to ensure a smooth transition from design to implementation.
+
+### Exporting design tokens
+
+Follow these steps to download the customized styles from the Figma UI Kit:
+
+- First, open a [Syncfusion Figma UI Kit](https://www.figma.com/@syncfusion).
+- Navigate to the `Plugins & widgets` section in Figma and search for the `Syncfusion Design Tokens`.
+- Once found, run the plugin. A popup will appear with an `Export` button.
+- Click the `Export` button. This action will generate a zip file containing your design tokens.
+- Select a directory to save the exported files.
+- Extract the downloaded zip file to access its contents.
+
+![export-design-tokens](./images/syncfusion-design-tokens.png)
+
+### Utilizing design tokens
+
+The exported zip file includes the following files:
+  - `css-variables.css`: The css-variables.css file contains CSS variables for both light and dark themes, directly derived from your Figma designs. You can easily import this file into your application alongside the component styles to reflect your custom designs. For more detailed usage instructions, consult the [CSS variables](./css-variables) documentation.
+  - `<theme-name>-tokens.json`: This file (e.g., material3-tokens.json) contains style variables and values in a JSON format compatible with [Theme Studio](./theme-studio). This file, prefixed with the corresponding theme name, can be [imported](./theme-studio#import-previously-changed-settings-into-the-theme-studio) into [Theme Studio](./theme-studio) for further customization. After processing in [Theme Studio](./theme-studio), you can [download](./theme-studio#download-the-customized-theme) the updated styles file and integrate it into your application, bringing your custom themes to life.
+
+This streamlined process ensures that your unique design vision, crafted in Figma, is accurately translated into your final application, maintaining consistency between design and implementation.
+
 ## Upgrading the UI kits
 
 To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process:

ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/razor

@@ -1,28 +1,34 @@
 @using Syncfusion.EJ2
+@using Syncfusion.EJ2.Lists
 @using Syncfusion.EJ2.Popups
 
-    <div id='container'>
-        <h4 class="list-header">National Sports</h4>
-        <!-- Tooltip element rendering for AjaxContent loading -->
-        @Html.EJS().Tooltip("Tooltip").Content("Loading...").Target("#countrylist [title]").Position(Syncfusion.EJ2.Popups.Position.RightCenter).BeforeRender("onBeforeRender").ContentTemplate(@<div>
-            @Html.EJS().ListView("countrylist").Enable(true).DataSource((IEnumerable<object>)ViewBag.data).Fields(new ListViewFieldSettings { Text = "text", Tooltip = "id" }).Render()
-        </div>).Render()
-    </div>
+<div id='container'>
+    <h4 class="list-header">National Sports</h4>
+    @Html.EJS().Tooltip("Tooltip")
+        .Content("Loading...")
+        .Target("#countrylist [title]")
+        .Position(Syncfusion.EJ2.Popups.Position.RightCenter)
+        .BeforeRender("onBeforeRender")
+        .ContentTemplate(@<div>
+            @Html.EJS().ListView("countrylist")
+                .Enable(true)
+                .DataSource((IEnumerable<object>)ViewBag.data)
+                .Fields(new ListViewFieldSettings { Text = "text", Tooltip = "id" })
+                .Render()
+        </div>)
+        .Render()
+</div>
 
 
 <script>
-        /**
-         * Process tooltip ajax content.
-         */
   function onBeforeRender(args) {
             var _this = this;
-            this.content = 'Loading...';
             this.dataBind();
             var fetchApi = new ej.base.Fetch("@Url.Content("~/Scripts/tooltip/tooltipdata.json")", 'GET');
             fetchApi.send().then(function (result) {
             for (var i = 0; i < result.length; i++) {
                 if (result[i].Id === args.target.getAttribute('data-content')) {
-                    _this.content = "<div class='contentWrap'><span class=" + result[i].Class + "></span><div class='def'>" + result[i].Sports + "</div></div>";
+                    _this.content = "<div class='contentWrap'><div class='def'>" + result[i].Sports + "</div></div>";
                 }
             }
             _this.dataBind();
@@ -32,55 +38,13 @@
         });
     }
 </script>
-<link href="../Content/tooltip/icons.css" rel="stylesheet" />
+
 <style>
- .contentWrap {
+    .contentWrap {
         padding: 3px 0;
         line-height: 16px;
     }
-
-    .e-bigger [class^="sports-icon-"],
-    .e-bigger [class*=" sports-icon-"] {
-        font-size: 18px;
-    }
-
-    [class^="sports-icon-"],
-    [class*=" sports-icon-"] {
-        font-family: 'sportsicons';
-        speak: none;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: normal;
-        font-variant: normal;
-        text-transform: none;
-        padding-right: 6px;
-        vertical-align: middle;
-    }
-
-    .sports-icon-cricket:before {
-        content: "\e703";
-    }
-
-    .sports-icon-archery:before {
-        content: "\e705";
-    }
-
-    .sports-icon-table-tennis:before {
-        content: "\e702";
-    }
-
-    .sports-icon-baseball:before {
-        content: "\e706";
-    }
-
-    .sports-icon-hockey:before {
-        content: "\e701";
-    }
-
-    .sports-icon-shooting:before {
-        content: "\e700";
-    }
-
+
     .def {
         float: right;
     }
@@ -107,4 +71,4 @@
             text-align: left;
         }
     }
-</style>
+</style>

ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tagHelper

@@ -1,10 +1,8 @@
 
 <div id='container'>
     <h4 class="list-header">National Sports</h4>
-    <!-- Tooltip element rendering for AjaxContent loading -->
     <ejs-tooltip id="Tooltip" content="Loading..." beforeRender="onBeforeRender" target="#countrylist [title]" showTipPointer="true" position="RightCenter">
         <e-content-template>
-            <!-- ListView element -->
             <ejs-listview id="countrylist" dataSource="ViewBag.data" enable="true">
                 <e-listview-fieldsettings text="text" tooltip="id"></e-listview-fieldsettings>
             </ejs-listview>
@@ -14,9 +12,6 @@
 
 
 <script>
-    /**
-     * Process tooltip ajax content.
-     */
     function onBeforeRender(args) {
         var _this = this;
         this.content = 'Loading...';

ej2-asp-core-mvc/code-snippet/tooltip/animation-default/razor

@@ -1,11 +1,15 @@
 @using Syncfusion.EJ2
 @using Syncfusion.EJ2.Popups
-     @Html.EJS().Tooltip("tooltip").Content("Tooltip content").Animation(new {
-    open = new { effect = "ZoomIn", duration = 1000, delay = 0 },
-    close = new { effect = "ZoomOut", duration = 500, delay = 0 }
-}).ContentTemplate(@<div id="target">
-        Show tooltip
-    </div>).Render()
+
+@Html.EJS().Tooltip("tooltip")
+    .Position(Syncfusion.EJ2.Popups.Position.TopCenter)
+    .Content("Tooltip content").Animation(new
+        {
+            open = new { effect = "ZoomIn", duration = 1000, delay = 0 },
+            close = new { effect = "ZoomOut", duration = 500, delay = 0 }
+        })
+    .ContentTemplate(@<div id="target">Show tooltip</div>)
+    .Render()
 
 <style>
     #target {
@@ -16,4 +20,4 @@
         padding: 10px;
         width: 100px;
     }
-</style>
+</style>

ej2-asp-core-mvc/code-snippet/tooltip/animation-openclose/razor

@@ -1,8 +1,12 @@
 @using Syncfusion.EJ2
 @using Syncfusion.EJ2.Popups
-     @Html.EJS().Tooltip("tooltip").Content("Tooltip content").OpensOn("Custom").ContentTemplate(@<div id="target">
-        Show tooltip
-    </div>).Created("created").Render()
+
+@Html.EJS().Tooltip("tooltip")
+    .Content("Tooltip content")
+    .OpensOn("Custom")
+    .ContentTemplate(@<div id="target">Show tooltip</div>)
+    .Created("created")
+    .Render()
 
 <style>
     #target {

ej2-asp-core-mvc/code-snippet/tooltip/animation-transition/razor

@@ -1,9 +1,16 @@
 @using Syncfusion.EJ2
 @using Syncfusion.EJ2.Popups
-     @Html.EJS().Tooltip("tooltip").Target(".circletool").BeforeRender("onBeforeRender").AfterClose("onAfterClose").CloseDelay(1000).Animation(new {
-   open = new { effect = "ZoomIn", duration = 500 },
-   close = new { effect = "ZoomOut", duration = 500 }
-}).ContentTemplate(@<div>
+
+@Html.EJS().Tooltip("tooltip")
+    .Target(".circletool")
+    .BeforeRender("onBeforeRender")
+    .AfterClose("onAfterClose")
+    .CloseDelay(1000)
+    .Animation(new {
+        open = new { effect = "ZoomIn", duration = 500 },
+        close = new { effect = "ZoomOut", duration = 500 }
+    })
+    .ContentTemplate(@<div>
         <h3> Transition effect </h3>
         <div id="box" class="e-prevent-select">
             <div class="circletool" style="top:18%;left:5%" title="This is Turtle !!!"></div>
@@ -13,7 +20,8 @@
             <div class="circletool" style="top:75%;left:15%" title="This is Blob Fish !!!"></div>
             <div class="circletool" style="top:30%;left:70%" title="This is Mammoth !!!"></div>
         </div>
-    </div>).Render()
+    </div>)
+    .Render()
 
 <style>
     #box {

ej2-asp-core-mvc/code-snippet/tooltip/custom-mode/razor

@@ -1,8 +1,13 @@
 @using Syncfusion.EJ2
 @using Syncfusion.EJ2.Popups
-      @Html.EJS().Tooltip("tooltip").OpensOn("Custom").Content("Tooltip from custom mode").ContentTemplate(@<div id="box">
-        Double-click to open Tooltip.
-    </div>).Created("created").Render()
+
+@Html.EJS().Tooltip("tooltip")
+    .Position(Syncfusion.EJ2.Popups.Position.TopCenter)
+    .OpensOn("Custom")
+    .Content("Tooltip from custom mode")
+    .ContentTemplate(@<div id="box">Double-click to open Tooltip.</div>)
+    .Created("created")
+    .Render()
 
 <style>
     #box {