feat(website): use Starlight colors

biomejs · Dec 2, 2023 · e8bd7dc · e8bd7dc
1 parent bad33f4
commit e8bd7dc
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 74 deletions.
diff --git a/website/src/styles/_credits.scss b/website/src/styles/_credits.scss
@@ -32,8 +32,8 @@ ul.credits-people-list {
 		margin-bottom: $unit;
 		width: 220px;
 		list-style: none;
-		border: 1px solid var(--soft-border-color);
-		background-color: var(--container-color);
+		border: 1px solid var(--sl-border);
+		background-color: var(--sl-color-black);
 		text-decoration: none;
 		border-radius: 12px;
 		overflow: hidden;

diff --git a/website/src/styles/_global.scss b/website/src/styles/_global.scss
@@ -7,7 +7,7 @@ html {
 }
 
 html {
-	background: var(--background-color);
+	background: var(--sl-color-bg);
 }
 
 html.transition {
@@ -21,10 +21,9 @@ html.transition {
 
 body {
 	font-size: 16px;
-	font-family: $body-font;
 	text-rendering: optimizelegibility;
 	-webkit-font-smoothing: antialiased;
-	color: var(--font-color);
+	color: var(--sl-color-text);
 	line-height: 1.5;
 	margin: 0;
 }
@@ -72,21 +71,6 @@ h5 {
 	font-weight: bold;
 }
 
-a, .link {
-	color: var(--logo-font-color);
-	text-decoration: underline;
-	cursor: pointer;
-
-	&:hover {
-		text-decoration: none;
-		color: var(--link-hover-color);
-	}
-
-	&:active {
-		color: var(--primary-color);
-	}
-}
-
 .no-scroll {
 	overflow: hidden;
 }

diff --git a/website/src/styles/_mixins.scss b/website/src/styles/_mixins.scss
@@ -29,6 +29,8 @@
   border-radius: 40px;
   padding: 8px 21px;
   font-weight: 500;
+	font-size: 0.75rem;
+	line-height: 1rem;
 
   &:hover {
     background: #E9ECEF;

diff --git a/website/src/styles/_overrides.scss b/website/src/styles/_overrides.scss
@@ -17,8 +17,8 @@
 
 /* Dark mode colors. */
 :root {
-  --sl-color-accent-low: #131e4f;
-  --sl-color-accent: #3447ff;
+  --sl-color-accent-low: #302100;
+  --sl-color-accent: #876300;
   --sl-color-accent-high: #f7b911;
   --sl-color-white: #ffffff;
   --sl-color-gray-1: #eceef2;

diff --git a/website/src/styles/_variables.scss b/website/src/styles/_variables.scss
@@ -15,11 +15,23 @@ $gray-6: lighten(#27272A, 45%);
 $gray-7: lighten(#27272A, 70%);
 $gray-8: lighten(#27272A, 80%);
 
-$body-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $code-font: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 $body-line-height: 1.5em;
 
 $unit: 16px;
 $unit-border-radius: 4px;
 
 $mobile-breakpoint: 768px;
+
+
+// Starlight css variables
+
+:root,
+::backdrop {
+	--sl-border: var(--sl-color-gray-5);
+}
+
+:root[data-theme='light'],
+[data-theme='light'] ::backdrop {
+	--sl-border: var(--sl-color-gray-6);
+}
diff --git a/website/src/styles/blog/_blog.scss b/website/src/styles/blog/_blog.scss
@@ -1,5 +1,5 @@
 @import "../_variables";
-@import "../_card.scss";
+@import "../card";
 
 .blog {
 	margin: 0 auto;

diff --git a/website/src/styles/index.scss b/website/src/styles/index.scss
@@ -1,10 +1,7 @@
 @import "_overrides";
-@import "_fonts";
 @import "_variables";
 @import "_mixins";
 @import "_prism";
-@import "_footer";
 @import "_credits";
 @import "_pre";
-@import "_recommended";
 @import "_sponsors";
diff --git a/website/src/styles/playground/_diagnostics.scss b/website/src/styles/playground/_diagnostics.scss
@@ -3,7 +3,7 @@
 
 .diagnostics-pane {
   height: 200px;
-  border-top: 1px solid var(--playground-border);
+  border-top: 1px solid var(--sl-border);
 
   @include dark-mode {
     .empty-panel {

diff --git a/website/src/styles/playground/_results.scss b/website/src/styles/playground/_results.scss
@@ -2,7 +2,7 @@
 @import "../../styles/_mixins";
 
 .results-pane {
-  border-left: 1px solid var(--playground-border);
+  border-left: 1px solid var(--sl-border);
   display: flex;
   flex-direction: column;
   overflow: hidden;

diff --git a/website/src/styles/playground/_settings.scss b/website/src/styles/playground/_settings.scss
@@ -4,14 +4,10 @@
 .settings-panel {
   flex-shrink: 0;
   overflow: auto;
-  font-size: 14px;
+  font-size: 0.8125rem;
   display: flex;
-  border-right: 1px solid var(--playground-border);
-  background-color: var(--container-color);
-
-  @include dark-mode {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
+  border-right: 1px solid var(--sl-border);
+  background-color: var(--sl-color-bg-nav);
 
   .fields {
     width: 250px;
@@ -22,7 +18,7 @@
   .collapser {
     width: 5px;
     height: 100%;
-    background-color: var(--hard-border-color);
+    background-color: var(--sl-border);
     flex-shrink: 0;
     opacity: 0.5;
     cursor: w-resize;
@@ -70,7 +66,7 @@
   }
 
   select, input[type=number] {
-    width: 110px;
+    width: 120px;
   }
 
   select, input[type=number], .input-container {
@@ -86,13 +82,12 @@
 
   input[type=text], input[type=number] {
     border-radius: 6px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    padding: 2px 10px;
+    border: 1px solid var(--sl-color-gray-5);
+    padding: 0 10px;
 
     @include dark-mode {
       color: inherit;
-      background-color: rgba(255, 255, 255, 0.3);
-      border-color: rgba(0, 0, 0, 0.5);
+      background-color: transparent;
     }
   }
 
@@ -101,27 +96,23 @@
     border-radius: 6px;
     padding: 2px 6px;
     color: inherit;
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--sl-color-gray-5);
 
-    @include dark-mode {
-      border-color: rgba(255, 255, 255, 0.1);
-    }
+		@include dark-mode {
+			border: 1px solid var(--sl-color-gray-4);
+		}
   }
 
 
   button {
     @include button;
     border-radius: 0;
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--sl-color-gray-5);
     padding: 2px 6px;
     color: inherit;
     border-radius: 6px;
     cursor: pointer;
 
-    @include dark-mode {
-      border-color: rgba(255, 255, 255, 0.1);
-    }
-
     &:disabled {
       opacity: 0.5;
       font-weight: bold;
@@ -216,7 +207,12 @@
 
       &.active {
         font-weight: bold;
-        background: rgba(#000, 10%);
+
+				background-color: var(--sl-color-gray-6);
+
+				@include dark-mode {
+					background-color: var(--sl-color-gray-5);
+				}
       }
 
       button {

diff --git a/website/src/styles/playground/_tabs.scss b/website/src/styles/playground/_tabs.scss
@@ -16,6 +16,10 @@
     }
   }
 
+	@include mobile-only {
+		overflow: auto;
+	}
+
   > iframe {
     height: 100%;
   }
@@ -25,7 +29,7 @@
   display: flex;
   width: 100%;
   height: 100%;
-  background-color: var(--background-color);
+  background-color: var(--sl-color-bg);
   justify-content: center;
   align-items: center;
 }
@@ -41,15 +45,11 @@
   overflow-x: auto;
   overflow-y: hidden;
   font-size: 14px;
-  background-color: rgba(0, 0, 0, 0.1);
-
-  @include dark-mode {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
+  background-color: var(--sl-color-bg-nav);
 
   li {
     padding: 0 10px;
-    border-right: 1px solid var(--hard-border-color);
+    border-right: 1px solid var(--sl-border);
     flex-shrink: 0;
 
     &:hover {

diff --git a/website/src/styles/playground/index.scss b/website/src/styles/playground/index.scss
@@ -1,17 +1,10 @@
-@import "../_reset";
 @import "../_variables";
 @import "../_mixins";
-@import "../_fonts";
+@import "../_reset";
 @import "../_global";
-@import "../_variables";
 @import "../_mixins";
 @import "../_grid";
-@import "../_footer";
-@import "../_docs";
 @import "../_pre";
-@import "../_recommended";
-@import "../_content";
-@import "_props";
 @import "../_overrides";
 @import "_code";
 @import "_diagnostics";
@@ -40,7 +33,6 @@ body {
 	}
 
 	#root {
-		height: 100%;
 		display: flex;
 	}
 }
@@ -56,28 +48,27 @@ body {
 #root {
 	display: flex;
 	width: 100%;
-	height: calc(100vh - 80px);
 }
 
 h2 {
 	padding: 10px;
 	display: flex;
 	line-height: 18px;
 	font-size: 14px;
-	font-weight: normal;
+	font-weight: 500;
 	box-shadow: inset 0 1px 0 var(--hard-border-color), inset 0 -1px 0 var(--hard-border-color);
-	background-color: rgba(#000, 0.05);
+	background-color: var(--sl-color-gray-6);
 
 	@include dark-mode {
-		background-color: rgba(#fff, 0.15);
+		background-color: var(--sl-color-gray-5);
 	}
 
 	&.biome {
-		background-color: rgba($color-4, 30%);
+		background-color: rgba($color-4, 30%) !important;
 	}
 
 	&.prettier {
-		background-color: rgba(#355F75, 40%);
+		background-color: rgba(#355F75, 40%) !important;
 	}
 
 	img {