align tutorial modal styles (#630)

* add primary button styles

* improve tutorial modal

Author: Rich-Harris

apps/svelte.dev/src/lib/components/Modal.svelte

@@ -74,4 +74,24 @@
 		filter: drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.1));
 		z-index: 99999;
 	}
+
+	.modal :global {
+		h2 {
+			font: var(--sk-font-ui-large);
+			margin: 0 0 0.5em 0;
+		}
+
+		p {
+			font: var(--sk-font-ui-medium);
+		}
+
+		button {
+			display: block;
+			padding: 1rem;
+			width: 10rem;
+			margin: 1em 0 0 0;
+			line-height: 1;
+			font: var(--sk-font-ui-small);
+		}
+	}
 </style>

apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte

@@ -99,7 +99,7 @@
 				enable copy-and-paste for the duration of this session
 			</label>
 
-			<button on:click={() => (show_modal = false)}>OK</button>
+			<button class="raised primary" on:click={() => (show_modal = false)}>OK</button>
 		</div>
 	</Modal>
 {/if}
@@ -153,30 +153,12 @@
 	}
 
 	.modal-contents {
-		h2 {
-			font: var(--sk-font-ui-large);
-			margin: 0 0 0.5em 0;
-		}
-
-		p {
-			font: var(--sk-font-ui-medium);
-		}
-
 		label {
 			user-select: none;
 			font: var(--sk-font-ui-medium);
-		}
-
-		button {
-			display: block;
-			background-color: var(--sk-theme-1);
-			color: white;
-			padding: 1rem;
-			width: 10em;
-			margin: 1em 0 0 0;
-			border-radius: var(--sk-border-radius);
-			line-height: 1;
-			font: var(--sk-font-ui-small);
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
 		}
 	}
 

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte

@@ -145,7 +145,7 @@
 		<div class="modal-contents">
 			<h2>This action is not allowed</h2>
 			<p>{modal_text}</p>
-			<button onclick={() => (modal_text = '')}>OK</button>
+			<button class="raised primary" onclick={() => (modal_text = '')}>OK</button>
 		</div>
 	</Modal>
 {/if}
@@ -169,15 +169,4 @@
 	.modal-contents p {
 		white-space: pre-line;
 	}
-
-	.modal-contents button {
-		display: block;
-		background: var(--sk-theme-1);
-		color: white;
-		padding: 1rem;
-		width: 10em;
-		margin: 1em 0 0 0;
-		border-radius: var(--sk-border-radius);
-		line-height: 1;
-	}
 </style>

packages/site-kit/src/lib/styles/utils/buttons.css

@@ -4,6 +4,16 @@
 	border-color: var(--sk-raised-color);
 	border-width: var(--sk-raised-width);
 
+	&.primary {
+		--sk-raised-color: hsla(12, 93%, 60%) hsla(12, 93%, 35%) hsla(12, 93%, 35%) hsla(12, 93%, 60%);
+		--sk-raised-hover-color: hsla(12, 93%, 70%) hsla(12, 93%, 30%) hsla(12, 93%, 30%)
+			hsla(12, 93%, 70%);
+		--sk-raised-active-color: hsla(12, 93%, 30%) hsla(12, 93%, 70%) hsla(12, 93%, 70%)
+			hsla(12, 93%, 30%);
+		background: var(--sk-theme-1);
+		color: white;
+	}
+
 	&:hover {
 		border-color: var(--sk-raised-hover-color);
 	}