[Toolkit][Shadcn] Fix text color in dark mode for AlertDialog/Dialog components

Cherry-picked from symfony#3299

Author: Kocal

src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Content.html.twig

@@ -1,7 +1,7 @@
 {# @block content The default block #}
 <dialog
     id="{{ _alert_dialog_id }}"
-    class="{{ 'bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
+    class="{{ 'text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
     data-alert-dialog-target="dialog"
     data-action="keydown.esc->alert-dialog#close:prevent"
     {{ attributes.without('id') }}

src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig

@@ -4,7 +4,7 @@
 
 <dialog
     id="{{ _dialog_id }}"
-    class="{{ 'bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
+    class="{{ 'text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
     data-dialog-target="dialog"
     data-action="keydown.esc->dialog#close:prevent click->dialog#closeOnClickOutside"
 >

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component alert-dialog, code 1__1.html

@@ -25,7 +25,7 @@
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div data-controller="alert-dialog" aria-labelledby="alert-dialog-delete_account-title" aria-describedby="alert-dialog-delete_account-description">
     <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;alert-dialog#open" data-alert-dialog-target="trigger" aria-haspopup="dialog" aria-expanded="false">Open</button>
-        <dialog id="alert-dialog-delete_account" class="bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 " data-alert-dialog-target="dialog" data-action="keydown.esc-&gt;alert-dialog#close:prevent"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="alert-dialog-delete_account-title" class="text-lg font-semibold ">Are you absolutely sure?</h2>
+        <dialog id="alert-dialog-delete_account" class="text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 " data-alert-dialog-target="dialog" data-action="keydown.esc-&gt;alert-dialog#close:prevent"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="alert-dialog-delete_account-title" class="text-lg font-semibold ">Are you absolutely sure?</h2>
             <p id="alert-dialog-delete_account-description" class="text-muted-foreground text-sm ">This action cannot be undone. This will permanently delete your account
                 and remove your data from our servers.
             </p>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code 1__1.html

@@ -21,7 +21,7 @@
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div data-controller="dialog" aria-labelledby="dialog-delete_account-title" aria-describedby="dialog-delete_account-description">
     <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;dialog#open" data-dialog-target="trigger" aria-haspopup="dialog">Open</button>
-        <dialog id="dialog-delete_account" class="bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 " data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-delete_account-title" class="text-lg leading-none font-semibold ">Are you absolutely sure?</h2>
+        <dialog id="dialog-delete_account" class="text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 " data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-delete_account-title" class="text-lg leading-none font-semibold ">Are you absolutely sure?</h2>
             <p id="dialog-delete_account-description" class="text-muted-foreground text-sm ">This action cannot be undone. This will permanently delete your account
                 and remove your data from our servers.
             </p>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code 2__1.html

@@ -33,7 +33,7 @@
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div data-controller="dialog" aria-labelledby="dialog-share_link-title" aria-describedby="dialog-share_link-description">
     <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;dialog#open" data-dialog-target="trigger" aria-haspopup="dialog">Share</button>
-        <dialog id="dialog-share_link" class="bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 sm:max-w-md" data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-share_link-title" class="text-lg leading-none font-semibold ">Share link</h2>
+        <dialog id="dialog-share_link" class="text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 sm:max-w-md" data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-share_link-title" class="text-lg leading-none font-semibold ">Share link</h2>
             <p id="dialog-share_link-description" class="text-muted-foreground text-sm ">Anyone who has this link will be able to view this.
             </p>
         </header>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component dialog, code 3__1.html

@@ -36,7 +36,7 @@
 - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
 <div data-controller="dialog" aria-labelledby="dialog-edit_profile-title" aria-describedby="dialog-edit_profile-description">
     <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[&gt;svg]:px-3" data-action="click-&gt;dialog#open" data-dialog-target="trigger" aria-haspopup="dialog">Open Dialog</button>
-        <dialog id="dialog-edit_profile" class="bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 sm:max-w-[425px]" data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-edit_profile-title" class="text-lg leading-none font-semibold ">Edit profile</h2>
+        <dialog id="dialog-edit_profile" class="text-foreground bg-background fixed top-[50%] left-[50%] z-50 max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 sm:max-w-[425px]" data-dialog-target="dialog" data-action="keydown.esc-&gt;dialog#close:prevent click-&gt;dialog#closeOnClickOutside"><header class="flex flex-col gap-2 text-center sm:text-left "><h2 id="dialog-edit_profile-title" class="text-lg leading-none font-semibold ">Edit profile</h2>
             <p id="dialog-edit_profile-description" class="text-muted-foreground text-sm ">Make changes to your profile here. Click save when you're done.
             </p>
         </header>