docs(docs-infra): Fix toggle button in dark mode

Fix visibility toggle button in dark mode

Fix angular#66049

Author: aparzi

adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css

@@ -26,3 +26,12 @@
     transform: translateY(0);
   }
 }
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}

adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.html

@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2><code>animate.enter</code> Binding Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Element</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 
 @if (isShown()) {
   <div class="enter-container" [animate.enter]="enterClass()">

adev/src/content/examples/animations/src/app/enter-and-leave/enter.css

@@ -26,3 +26,12 @@
     transform: translateY(0);
   }
 }
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+}

adev/src/content/examples/animations/src/app/enter-and-leave/enter.html

@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2><code>animate.enter</code> Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Element</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 
 @if (isShown()) {
   <div class="enter-container" animate.enter="enter-animation">

adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css

@@ -20,5 +20,16 @@
 .leaving {
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 500ms ease-out, transform 500ms ease-out;
+  transition:
+    opacity 500ms ease-out,
+    transform 500ms ease-out;
+}
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
 }

adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.html

@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2><code>animate.leave</code> Binding Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Element</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 
 @if (isShown()) {
   <div class="leave-container" [animate.leave]="farewell()">

adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css

@@ -20,5 +20,16 @@
 .leaving {
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 500ms ease-out, transform 500ms ease-out;
+  transition:
+    opacity 500ms ease-out,
+    transform 500ms ease-out;
+}
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
 }

adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.html

@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2><code>animate.leave</code> Function Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Element</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 
 @if (isShown()) {
   <div class="leave-container" (animate.leave)="leavingFn($event)">

adev/src/content/examples/animations/src/app/enter-and-leave/leave.css

@@ -20,5 +20,16 @@
 .leaving {
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 500ms ease-out, transform 500ms ease-out;
+  transition:
+    opacity 500ms ease-out,
+    transform 500ms ease-out;
+}
+
+.toggle-btn {
+  background: transparent;
+  border: 1px solid var(--primary-contrast, black);
+  color: var(--primary-contrast, black);
+  padding: 10px 24px;
+  border-radius: 8px;
+  cursor: pointer;
 }

adev/src/content/examples/animations/src/app/enter-and-leave/leave.html

@@ -1,7 +1,7 @@
 <!-- #docplaster -->
 <h2><code>animate.leave</code> Example</h2>
 
-<button type="button" (click)="toggle()">Toggle Element</button>
+<button type="button" class="toggle-btn" (click)="toggle()">Toggle Element</button>
 
 @if (isShown()) {
   <div class="leave-container" animate.leave="leaving">