reverse toggles (#718)

Rich-Harris · web-flow · commit a0e3813a5868 · 2024-10-30T12:34:51.000-04:00
* reverse toggles

* take it down a notch
diff --git a/apps/svelte.dev/src/lib/icons/theme-dark.svg b/apps/svelte.dev/src/lib/icons/theme-dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#d4d4d4" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#666" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/apps/svelte.dev/src/lib/icons/theme-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#666" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#d4d4d4" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></svg>
diff --git a/packages/site-kit/src/lib/components/FontToggle.svelte b/packages/site-kit/src/lib/components/FontToggle.svelte
@@ -30,18 +30,18 @@
 	}
 
 	button[aria-pressed='true'] {
-		background-image: url(../icons/font-boring-light.svg);
+		background-image: url(../icons/font-elegant-light.svg);
 
 		:global(.dark) & {
-			background-image: url(../icons/font-boring-dark.svg);
+			background-image: url(../icons/font-elegant-dark.svg);
 		}
 	}
 
 	button[aria-pressed='false'] {
-		background-image: url(../icons/font-elegant-light.svg);
+		background-image: url(../icons/font-boring-light.svg);
 
 		:global(.dark) & {
-			background-image: url(../icons/font-elegant-dark.svg);
+			background-image: url(../icons/font-boring-dark.svg);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -31,10 +31,11 @@
 
 <style>
 	button {
-		background-image: url($lib/icons/theme-light.svg);
+		background-image: url($lib/icons/theme-dark.svg);
+		background-size: 2rem;
 
 		:global(.dark) & {
-			background-image: url($lib/icons/theme-dark.svg);
+			background-image: url($lib/icons/theme-light.svg);
 		}
 	}
 </style>

Original file line number	Diff line number	Diff line change
`@@ -30,18 +30,18 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`button[aria-pressed='true'] {`
`33`		`- background-image: url(../icons/font-boring-light.svg);`
	`33`	`+ background-image: url(../icons/font-elegant-light.svg);`
`34`	`34`
`35`	`35`	`:global(.dark) & {`
`36`		`- background-image: url(../icons/font-boring-dark.svg);`
	`36`	`+ background-image: url(../icons/font-elegant-dark.svg);`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`button[aria-pressed='false'] {`
`41`		`- background-image: url(../icons/font-elegant-light.svg);`
	`41`	`+ background-image: url(../icons/font-boring-light.svg);`
`42`	`42`
`43`	`43`	`:global(.dark) & {`
`44`		`- background-image: url(../icons/font-elegant-dark.svg);`
	`44`	`+ background-image: url(../icons/font-boring-dark.svg);`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -31,10 +31,11 @@`
`31`	`31`
`32`	`32`	`<style>`
`33`	`33`	`button {`
`34`		`- background-image: url($lib/icons/theme-light.svg);`
	`34`	`+ background-image: url($lib/icons/theme-dark.svg);`
	`35`	`+ background-size: 2rem;`
`35`	`36`
`36`	`37`	`:global(.dark) & {`
`37`		`- background-image: url($lib/icons/theme-dark.svg);`
	`38`	`+ background-image: url($lib/icons/theme-light.svg);`
`38`	`39`	`}`
`39`	`40`	`}`
`40`	`41`	`</style>`