Overhaul tokens (#735)

* get rid of some unused junk

* modularise tokens

* unused

* tidy up

* tidy up

* group colours by purpose

* organise tokens

* consolidate

* revert

* separate background colors from borders

* more border stuff

* move --sk-raised tokens into buttons.css

Author: Rich-Harris

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

@@ -66,8 +66,8 @@
 		transform: translate(-50%, -50%);
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
-		background: var(--sk-back-2);
-		color: var(--sk-text-2);
+		background: var(--sk-bg-2);
+		color: var(--sk-fg-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;

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

@@ -61,7 +61,7 @@
 
 	.controls {
 		max-width: calc(var(--sk-page-content-width) + 1rem);
-		border-top: 1px solid var(--sk-back-4);
+		border-top: 1px solid var(--sk-border-medium);
 		padding: 1rem 0 0 0;
 		margin: 1rem 0 0 0;
 		text-wrap: balance;
@@ -83,7 +83,7 @@
 		span {
 			font: var(--sk-font-ui-medium);
 			text-transform: uppercase;
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 
 			&.faded {
 				opacity: 0.4;

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

@@ -42,7 +42,7 @@
 		left: 0;
 		top: 0;
 		height: 100%;
-		background-color: var(--sk-theme-1);
+		background-color: var(--sk-fg-accent);
 		transition: width 0.4s;
 	}
 

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

@@ -16,8 +16,8 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-back-2);
-		color: var(--sk-text-1);
+		background-color: var(--sk-bg-2);
+		color: var(--sk-fg-1);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;

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

@@ -20,7 +20,7 @@
 		position: relative;
 
 		&:has(select:focus-visible) .raised.icon {
-			outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
+			outline: 2px solid var(--sk-fg-accent);
 			border-radius: var(--sk-border-radius);
 		}
 
@@ -47,7 +47,7 @@
 
 	.icon {
 		position: relative;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
 		z-index: 999;

apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts

@@ -10,7 +10,7 @@ import type { Adapter } from '$lib/tutorial';
 import type { Item, File } from 'editor';
 
 const converter = new AnsiToHtml({
-	fg: 'var(--sk-text-3)'
+	fg: 'var(--sk-fg-3)'
 });
 
 /** Web container singleton */

apps/svelte.dev/src/routes/(authed)/apps/+page.svelte

@@ -156,7 +156,7 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {
@@ -181,7 +181,7 @@
 		font: var(--sk-font-ui-medium);
 		z-index: 2;
 		justify-content: space-between;
-		outline: 1rem solid var(--sk-back-1);
+		outline: 1rem solid var(--sk-bg-1);
 	}
 
 	.controls::after {
@@ -190,7 +190,7 @@
 		width: 100%;
 		bottom: -2rem;
 		height: 2rem;
-		background: linear-gradient(to bottom, var(--sk-back-1) 0%, var(--sk-back-1) 50%, transparent);
+		background: linear-gradient(to bottom, var(--sk-bg-1) 0%, var(--sk-bg-1) 50%, transparent);
 	}
 
 	.controls form {
@@ -209,7 +209,7 @@
 		padding: 0.5rem 1rem;
 		line-height: 1;
 		display: flex;
-		border: 1px solid var(--sk-back-5);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
 		font: var(--sk-font-ui-large);
@@ -241,15 +241,15 @@
 	}
 
 	h2 {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	li a {
 		display: block;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 1rem 3rem 1rem 1rem;
 		height: 100%;
 		line-height: 1;
@@ -259,7 +259,7 @@
 
 	li span {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	li label {
@@ -275,7 +275,7 @@
 	}
 
 	ul:not(.selecting) li:hover a {
-		background-color: var(--sk-back-4);
+		background-color: var(--sk-bg-4);
 	}
 
 	ul:not(.selecting) li:hover input {

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -215,7 +215,7 @@
 		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
 		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
 		overflow: hidden;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -262,7 +262,7 @@
 
 	.icon {
 		position: relative;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
 		z-index: 999;
@@ -303,7 +303,7 @@
 
 	input {
 		background: transparent;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
 		width: 0;
@@ -315,7 +315,7 @@
 
 	.badge {
 		position: absolute;
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 		border-radius: 50%;
 		width: 1rem;
 		height: 1rem;

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -65,7 +65,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		overflow: hidden;
 		box-sizing: border-box;
 		display: flex;