tutorial: fix custombutton colors for a11y contrast (#6212)

sveltejs · Apr 21, 2021 · 2723427 · 2723427
1 parent 10e3e3d
commit 2723427
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
@@ -2,18 +2,18 @@
 	button {
 		height: 4rem;
 		width: 8rem;
-		background-color: #aaa;
-		border-color: #f1c40f;
-		color: #f1c40f;
+		background-color: #ddd;
+		border-color: #ff3e00;
+		color: #ff3e00;
 		font-size: 1.25rem;
-		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
 		background-position: 100%;
 		background-size: 400%;
 		transition: background 300ms ease-in-out;
 	}
 	button:hover {
 		background-position: 0;
-		color: #aaa;
+		color: #ddd;
 	}
 </style>
 

diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
@@ -2,18 +2,18 @@
 	button {
 		height: 4rem;
 		width: 8rem;
-		background-color: #aaa;
-		border-color: #f1c40f;
-		color: #f1c40f;
+		background-color: #ddd;
+		border-color: #ff3e00;
+		color: #ff3e00;
 		font-size: 1.25rem;
-		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
 		background-position: 100%;
 		background-size: 400%;
 		transition: background 300ms ease-in-out;
 	}
 	button:hover {
 		background-position: 0;
-		color: #aaa;
+		color: #ddd;
 	}
 </style>