Merge branch 'master' of https://github.com/primefaces/primeng

Author: cetincakiroglu

apps/showcase/components/doc/app.docsection-nav.ts

@@ -111,7 +111,7 @@ export class AppDocSectionNav implements OnInit {
             lightImage: 'https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/ads/themedesigner-menu-light.jpg',
             darkImage: 'https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/ads/themedesigner-menu-dark.jpg',
             title: 'Theme Designer',
-            details: 'Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.',
+            details: 'Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, Figma to theme code, cloud storage, and migration assistant.',
             routerLink: '/designer'
         }
     ];

apps/showcase/components/layout/designer/dashboard/designdashboard.ts

@@ -15,14 +15,14 @@ import { ToastModule } from 'primeng/toast';
     imports: [RouterModule, CommonModule, FormsModule, ToastModule, MenuModule, ConfirmPopupModule],
     template: `<div style="border-radius: 50px" class="overflow-hidden mb-8">
             <a routerLink="/designer">
-                <img src="https://primefaces.org/cdn/designer/{{ isDarkTheme() ? 'editor-intro-dark.png' : 'editor-intro.png' }}" />
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/{{ isDarkTheme() ? 'editor-intro-dark.png' : 'editor-intro.png' }}" />
             </a>
         </div>
 
         <div class="text-lg font-semibold mb-2">Authenticate</div>
         <div *ngIf="!verified()">
             <span class="block leading-6 mb-4"
-                >Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant. <a routerLink="/designer" class="doc-link">Discover</a> more about
+                >Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, Figma to theme code, cloud storage, and migration assistant. <a routerLink="/designer" class="doc-link">Discover</a> more about
                 the Theme Designer by visiting the detailed <a routerLink="/designer/guide" class="doc-link">documentation</a>.</span
             >
             <span class="block leading-6 mb-4"

apps/showcase/doc/designer/ci/figma-doc.ts

@@ -9,7 +9,7 @@ import { RouterModule } from '@angular/router';
     imports: [CommonModule, AppDocSectionText, RouterModule],
     template: `<app-docsectiontext>
         <p>
-            Token Studio in Figma is the starting point of a continuous integration pipeline. You can connect a remote repository to sync your tokens data so that changes are saved remotely instead of locally. Token Studio offers various remote
+            Tokens Studio in Figma is the starting point of a continuous integration pipeline. You can connect a remote repository to sync your tokens data so that changes are saved remotely instead of locally. Tokens Studio offers various remote
             storage options such as <a href="https://docs.tokens.studio/token-storage/remote/sync-git-github" target="_blank" rel="noopener noreferrer">GitHub</a>,
             <a href="https://docs.tokens.studio/token-storage/remote/sync-git-gitlab" target="_blank" rel="noopener noreferrer">GitLab</a> and
             <a href="https://docs.tokens.studio/token-storage/remote/sync-git-bitbucket" target="_blank" rel="noopener noreferrer">Bitbucket</a>. Refer to these documentations based on your environment before proceeding to the integrations in the

apps/showcase/doc/designer/ci/integration/bitbucket-doc.ts

@@ -29,9 +29,9 @@ import { AppCode } from '@/components/doc/app.code';
 
         <h4>3. Test Integration</h4>
         <p>
-            Edit a token in Token Studio in Figma and click <b>Push to BitBucket</b> button to update the tokens file in your Git repository, triggering the configured BitBucket Pipe. The pipe then sends the updated file content to the Theme Designer
-            API, receives the generated theme code, and commits the resulting changes back to your repository. An <a href="https://bitbucket.org/cagataycivici/theme-designer-ci-test" target="_blank" rel="noopener noreferrer">example repository</a> is
-            available at BitBucket that you may use as a starter.
+            Edit a token in Tokens Studio in Figma and click <b>Push to BitBucket</b> button to update the tokens file in your Git repository, triggering the configured BitBucket Pipe. The pipe then sends the updated file content to the Theme
+            Designer API, receives the generated theme code, and commits the resulting changes back to your repository. An
+            <a href="https://bitbucket.org/cagataycivici/theme-designer-ci-test" target="_blank" rel="noopener noreferrer">example repository</a> is available at BitBucket that you may use as a starter.
         </p>
     </app-docsectiontext>`
 })

apps/showcase/doc/designer/ci/integration/github-doc.ts

@@ -29,7 +29,7 @@ import { RouterModule } from '@angular/router';
 
         <h4>3. Test Integration</h4>
         <p>
-            Edit a token in Token Studio in Figma and click <b>Push to GitHub</b> button to update the tokens file in your Git repository, triggering the configured GitHub Action. The GitHub Action then sends the updated file content to the Theme
+            Edit a token in Tokens Studio in Figma and click <b>Push to GitHub</b> button to update the tokens file in your Git repository, triggering the configured GitHub Action. The GitHub Action then sends the updated file content to the Theme
             Designer API, receives the generated theme code, and commits the resulting changes back to your repository. An
             <a href="https://github.com/primefaces/theme-designer-ci-test" target="_blank" rel="noopener noreferrer">example repository</a> is available at GitHub that you may use as a starter.
         </p>

apps/showcase/doc/designer/ci/integration/gitlab-doc.ts

@@ -32,7 +32,7 @@ import { RouterModule } from '@angular/router';
 
         <h4>4. Test Integration</h4>
         <p>
-            Edit a token in Token Studio in Figma and click <b>Push to GitLab</b> button to update the tokens file in your Git repository, triggering the configured GitLab Action. The GitLab Action then sends the updated file content to the Theme
+            Edit a token in Tokens Studio in Figma and click <b>Push to GitLab</b> button to update the tokens file in your Git repository, triggering the configured GitLab Action. The GitLab Action then sends the updated file content to the Theme
             Designer API, receives the generated theme code, and commits the resulting changes back to your repository. An
             <a href="https://gitlab.com/cagataycivici/theme-designer-ci-test" target="_blank" rel="noopener noreferrer">example repository</a> is available at GitLab that you may use as a starter.
         </p>

apps/showcase/doc/designer/ci/overview-doc.ts

@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
     template: `<app-docsectiontext>
         <p>
             The Figma UI Kit and the theming api is fully synchorized, meaning the design tokens in Figma map to the corresponding properties in a theme preset. The Theme Designer offers a feature to create a theme by uploading a tokens.json file
-            that is exported from the Token Studio plugin in Figma. Once the theme is converted, it can either be edited further in the visual editor or downloaded as a zip file to access the full code. Visit the
+            that is exported from the Tokens Studio plugin in Figma. Once the theme is converted, it can either be edited further in the visual editor or downloaded as a zip file to access the full code. Visit the
             <a routerLink="/designer/guide#figma">Figma</a>
             section at the designer documentation for more information.
         </p>

apps/showcase/doc/designer/createtheme/figma-doc.ts

@@ -9,44 +9,51 @@ import { RouterModule } from '@angular/router';
     imports: [CommonModule, AppDocSectionText, RouterModule],
     template: `<app-docsectiontext>
         <p>
-            The <a routerLink="/uikit">Figma UI Kit</a> and the theming api is fully synchorized, meaning the design tokens in Figma map to the CSS variables in the code. The mapping is created via the
-            <a href="https://tokens.studio/" target="_blank" rel="noopener noreferrer">Token Studio</a> at Figma which allows exporting a single json file. The Designer is able to interpret this file and transform it to an actual theme. In case your
-            UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant.
+            For teams with UI designers, we recommend using PrimeOne Figma UI Kit for the design phase and utilizing the Theme Designer service to automate code generation during handoff. This workflow eliminates manual design-to-code translation,
+            reducing implementation time and ensuring consistency between design and production.
         </p>
+        <h4>UI Kit v4</h4>
+        <b class="mb-4 block">Automated Flow</b>
         <p>
-            This is an automated workflow and eliminates the manual design to code during the handoff process. If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for
-            transformation, preview and download purposes.
-        </p>
-        <b class="mb-4 block">CI Pipeline</b>
-        <p>
-            Recommended approach is setting up the CI Pipeline flow as manually exporting the tokens file from Figma and uploading it to the online designer tool may quickly become tedious in active development cycles. As a solution, theme designer
-            provides a remote API that can be integrated into your flow. Visit the <a routerLink="/designer/ci">CI Pipeline</a> documentation for comprehensive information and examples for GitHub, GitLab and BitBucket.
+            Recommended approach is using the PrimeUI Theme Generator Figma plugin which provides built-in synchronization capabilities that automate the theme generation process. Visit
+            <a href="https://www.figma.com/community/plugin/1592914021886732603" target="_blank" rel="noopener noreferrer">the plugin website</a> to learn more about this workflow.
         </p>
         <b class="mb-4 block">Manual Flow</b>
         <p>
-            Instead of setting a CI pipeline, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the designer. Note that, this flow would get tedious and repetitive in active
-            development cycles when compared to an automated CI pipeline.
+            Instead of generating themes directly from Figma using the plugin, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the Theme Designer. Note that, this flow would get
+            tedious and repetitive in active development cycles when compared to an automated flow.
         </p>
         <p>
             Open the <a routerLink="/uikit">PrimeOne UI Kit</a> in which you've modified tokens. In the Tokens Studio plugin, navigate to the <i>Tools</i> menu and select <i>Export to file/folder.</i> When the Export tokens modal appears, make sure
             the <i>Single file</i> tab is selected. Check the <i>All tokens sets</i> option, then click <i>Export</i>.
         </p>
         <p>In case you utilize custom tokens, create a new token set named <i>custom</i> and define your tokens under this set to make sure they are also exported to the theme code.</p>
         <div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
-            <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/tokens-studio.png" class="w-full" />
+            <img alt="Designer Dashboard" src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/figma-plugin.png" class="w-full" />
         </div>
         <p>When creating a new theme at Theme Designer, choose the <i>Import Figma Tokens</i> option and import the json file.</p>
         <div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
-            <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
+            <img alt="Designer Dashboard" src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/guide-create.png" class="w-full" />
         </div>
-        <!-- <b class="mb-4 block">Video Tutorial</b>
+        <h4>UI Kit v3 (Deprecated)</h4>
+        <b class="mb-4 block">CI Pipeline</b>
         <p>
-            A tutorial is available demonstrating how the handoff process can be automated between the design team and the development team. The video demonstrates the feature from the PrimeVue version, which is exactly same as the PrimeNG
-            implementation.
+            Recommended approach is setting up the CI Pipeline flow as manually exporting the tokens file from Figma and uploading it to the online designer tool may quickly become tedious in active development cycles. As a solution, theme designer
+            provides a remote API that can be integrated into your flow. Visit the CI Pipeline documentation for comprehensive information and examples for GitHub, GitLab and BitBucket.
         </p>
-        <div class="video-container">
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ktocmi2dLLM?si=lG7JwkUfLTQFlfeX" frameborder="0" allowfullscreen></iframe>
-        </div> -->
+
+        <b class="mb-4 block">Manual Flow</b>
+        <p>
+            Instead of setting a CI pipeline, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the designer. Note that, this flow would get tedious and repetitive in active
+            development cycles when compared to an automated CI pipeline.
+        </p>
+        <p>
+            Open the PrimeOne UI Kit in which you've modified tokens. In the Tokens Studio plugin, navigate to the <i>Tools</i> menu and select <i>Export to file/folder.</i> When the Export tokens modal appears, make sure the <i>Single file</i> tab
+            is selected. Check the <i>All tokens sets</i> option, then click <i>Export</i>.
+        </p>
+        <p>In case you utilize custom tokens, create a new token set named <i>custom</i> and define your tokens under this set to make sure they are also exported to the theme code.</p>
+        <img alt="Tokens Studio export" src="https://primefaces.org/cdn/designer/tokens-studio.png" class="mb-4" />
+        <p>When creating a new theme at Theme Designer, choose the <i>Import Figma Variables</i> option and import the json file.</p>
     </app-docsectiontext>`
 })
 export class FigmaDoc {}

apps/showcase/doc/designer/dashboard-doc.ts

@@ -13,7 +13,7 @@ import { AppDocSectionText } from '@/components/doc/app.docsectiontext';
             </p>
         </app-docsectiontext>
         <div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
-            <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-dashboard.png" class="w-full" />
+            <img alt="Designer Dashboard" src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/guide-dashboard.png" class="w-full" />
         </div>`
 })
 export class DashboardDoc {}

apps/showcase/doc/designer/editor/intelligentcompletion-doc.ts

@@ -12,6 +12,9 @@ import { AppDocSectionText } from '@/components/doc/app.docsectiontext';
             feature to list the available tokens to choose from. The <i>pi-sort-alt</i> symbol over the input, transfers the token between the common tokens and color scheme specific tokens so that you are able to define tokens based on light and
             dark mode as well.
         </p>
+        <div class="px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface" style="max-width: 48rem">
+            <img alt="Designer Dashboard" src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/guide-editor.png" class="w-full" />
+        </div>
     </app-docsectiontext>`
 })
 export class IntelligentCompletionDoc {}