Merge pull request #527 from cocopon/update-doc

Update appearance of document
cocopon · Mar 21, 2023 · 21f7b07 · 21f7b07
2 parents e949fde + 66b8be4
commit 21f7b07
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 26 deletions.
diff --git a/packages/tweakpane/src/doc/sass/_base.scss b/packages/tweakpane/src/doc/sass/_base.scss
@@ -4,7 +4,8 @@
 	--bg-color: white;
 	--bg-color-translucent: #{rgba(white, 0.9)};
 	--bg-color-secondary: #{hsl(defs.$base-hue, 7%, 95%)};
-	--bg-color-secondary-action: #{hsl(defs.$base-hue, 7%, 93%)};
+	--bg-color-action: #{hsl(defs.$base-hue, 7%, 95%)};
+	--bg-color-action-active: #{hsl(defs.$base-hue, 7%, 93%)};
 	--fg-color: #{hsl(defs.$base-hue, 5%, 35%)};
 	--fg-color-action: #{hsla(defs.$base-hue, 5%, 35%, 0.8)};
 	--fg-color-secondary: #{hsla(defs.$base-hue, 5%, 35%, 0.7)};
@@ -20,30 +21,35 @@
 	--hl-string: #{hsl(defs.$base-hue, 15%, 50%)};
 
 	@media (prefers-color-scheme: dark) {
-		--bg-color: #{hsl(defs.$base-hue, 5%, 10%)};
+		--bg-color: #{hsl(defs.$base-hue, 7%, 17%)};
 		--bg-color-translucent: #{rgba(black, 0.9)};
-		--bg-color-secondary: #{hsl(defs.$base-hue, 5%, 12%)};
-		--bg-color-secondary-action: #{hsl(defs.$base-hue, 5%, 14%)};
-		--fg-color: #{hsl(defs.$base-hue, 5%, 60%)};
-		--fg-color-action: #{hsl(defs.$base-hue, 5%, 65%)};
-		--fg-color-secondary: #{hsla(defs.$base-hue, 5%, 60%, 0.8)};
+		--bg-color-secondary: #{hsl(defs.$base-hue, 7%, 10%)};
+		--bg-color-action: #{hsl(defs.$base-hue, 7%, 22%)};
+		--bg-color-action-active: #{hsl(defs.$base-hue, 7%, 25%)};
+		--fg-color: #{hsl(defs.$base-hue, 7%, 75%)};
+		--fg-color-action: #{hsl(defs.$base-hue, 7%, 80%)};
+		--fg-color-secondary: #{hsla(defs.$base-hue, 7%, 75%, 0.8)};
 
-		--a-color: #{hsl(defs.$base-hue - 10, 25%, 55%)};
+		--a-color: #{hsl(defs.$base-hue - 10, 40%, 60%)};
 		--code-color: #{hsl(170, 20%, 55%)};
 		--guide-color-comps: #{defs.$base-hue, 5%, 80%};
-		--heading-color: #{hsl(defs.$base-hue, 5%, 70%)};
+		--heading-color: #{hsl(defs.$base-hue, 7%, 75%)};
 
 		--hl-comment: #{hsl(defs.$base-hue, 7%, 40%)};
-		--hl-keyword: #{hsl(220, 25%, 55%)};
-		--hl-constant: #{hsl(340, 15%, 55%)};
-		--hl-string: #{hsl(170, 12%, 50%)};
+		--hl-keyword: #{hsl(220, 35%, 65%)};
+		--hl-constant: #{hsl(340, 15%, 60%)};
+		--hl-string: #{hsl(170, 15%, 60%)};
 	}
 }
 
 html {
 	color: var(--fg-color);
 	font-family: defs.$font-family;
 	font-size: 16px;
+
+	@media (prefers-color-scheme: dark) {
+		color-scheme: dark;
+	}
 }
 body {
 	background-color: var(--bg-color);
@@ -108,7 +114,7 @@ strong {
 	filter: brightness(0.9) saturate(1.2);
 
 	@media (prefers-color-scheme: dark) {
-		filter: brightness(1.2) saturate(1.2);
+		filter: brightness(1.1) saturate(1.1);
 	}
 }
 

diff --git a/packages/tweakpane/src/doc/sass/_defs.scss b/packages/tweakpane/src/doc/sass/_defs.scss
@@ -14,7 +14,6 @@ $global-nav-width: 240px;
 
 // Colors
 $base-hue: 230;
-$pane-bg-color: hsl($base-hue, 7%, 17%);
 
 // Z-index
 $z-index-global-header: 1002;
@@ -114,7 +113,7 @@ $z-index-global-nav: 1003;
 	td,
 	li {
 		code {
-			background-color: var(--bg-color-secondary);
+			background-color: var(--bg-color-action);
 			border-radius: 2px;
 			color: var(--code-color);
 			font-weight: 500;

diff --git a/packages/tweakpane/src/doc/sass/components/_concept.scss b/packages/tweakpane/src/doc/sass/components/_concept.scss
@@ -16,7 +16,7 @@
 }
 
 .concept {
-	border: var(--bg-color-secondary) solid 2px;
+	border: var(--bg-color-action) solid 2px;
 	border-radius: 6px;
 	padding: 24px 32px;
 

diff --git a/packages/tweakpane/src/doc/sass/components/_global-nav.scss b/packages/tweakpane/src/doc/sass/components/_global-nav.scss
@@ -28,7 +28,7 @@
 	}
 
 	&_logo {
-		border-bottom: var(--bg-color-secondary) solid 2px;
+		border-bottom: var(--bg-color-action) solid 2px;
 		height: defs.$global-header-height;
 		line-height: defs.$global-header-height;
 		padding-left: 32px;
@@ -68,11 +68,11 @@
 		}
 
 		&#{&}-active {
-			background-color: var(--bg-color-secondary);
+			background-color: var(--bg-color-action);
 			color: var(--fg-color);
 		}
 		&:hover {
-			background-color: var(--bg-color-secondary);
+			background-color: var(--bg-color-action);
 		}
 
 		.material-icons {
@@ -108,10 +108,10 @@
 		}
 
 		&#{&}-active {
-			background-color: var(--bg-color-secondary);
+			background-color: var(--bg-color-action);
 		}
 		&:hover {
-			background-color: var(--bg-color-secondary);
+			background-color: var(--bg-color-action);
 			color: var(--fg-color);
 		}
 	}

diff --git a/packages/tweakpane/src/doc/sass/components/_rel.scss b/packages/tweakpane/src/doc/sass/components/_rel.scss
@@ -20,7 +20,7 @@
 
 	a#{&}_anchor {
 		align-items: center;
-		background-color: var(--bg-color-secondary);
+		background-color: var(--bg-color-action);
 		border-radius: 6px;
 		color: var(--fg-color);
 		display: flex;
@@ -30,7 +30,7 @@
 
 		&:focus,
 		&:hover {
-			background-color: var(--bg-color-secondary-action);
+			background-color: var(--bg-color-action-active);
 		}
 	}
 	&_icon {

diff --git a/packages/tweakpane/src/doc/sass/components/_theme-builder.scss b/packages/tweakpane/src/doc/sass/components/_theme-builder.scss
@@ -6,14 +6,16 @@
 	overflow: hidden;
 
 	&_gui {
+		border-bottom: var(--bg-color) solid 2px;
+
 		@include defs.wide() {
 			display: flex;
 		}
 	}
 	&_controller {
 		--tp-base-border-radius: 0px;
 		--tp-base-shadow-color: transparent;
-		background-color: defs.$pane-bg-color;
+		background-color: var(--bg-color-secondary);
 
 		@include defs.nonwide() {
 			--tp-blade-value-width: 60vw;

diff --git a/packages/tweakpane/src/doc/ts/route/index.ts b/packages/tweakpane/src/doc/ts/route/index.ts
@@ -12,8 +12,8 @@ import {Environment} from '../sketch';
 import {selectContainer} from '../util';
 
 const COLORS = {
-	dark: 'hsl(200deg, 5%, 16%)',
-	light: 'hsl(200deg, 7%, 90%)',
+	dark: 'hsl(230deg, 7%, 10%)',
+	light: 'hsl(230deg, 7%, 90%)',
 };
 
 export function initIndex() {