New light mode code boxes

dphfox · Aug 28, 2024 · e104e8c · e104e8c
1 parent ad2490a
commit e104e8c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 38 deletions.
diff --git a/docs/assets/theme/code.css b/docs/assets/theme/code.css
@@ -1,25 +1,29 @@
 [data-md-color-scheme="fusiondoc-light"] {
-	--md-code-fg-color:                var(--fusiondoc-grey-9);
-	--md-code-bg-color:                var(--fusiondoc-grey-2);
+	--md-code-fg-color:                var(--fusiondoc-grey-2);
+	--md-code-bg-color:                var(--fusiondoc-grey-10);
+	--fusiondoc-code-separator:        var(--fusiondoc-grey-9);
+	--fusiondoc-line-numbers:        var(--fusiondoc-grey-4);
 
 	--md-code-hl-color:                var(--fusiondoc-accent-a20);
-	--md-code-hl-number-color:         hsl(290, 60%, 70%);
-	--md-code-hl-special-color:        var(--fusiondoc-grey-7);
-	--md-code-hl-function-color:       var(--fusiondoc-grey-7);
-	--md-code-hl-constant-color:       var(--fusiondoc-grey-7);
-	--md-code-hl-keyword-color:        hsl(40, 75%, 60%);
-	--md-code-hl-string-color:         hsl(330, 80%, 70%);
-	--md-code-hl-name-color:           var(--fusiondoc-grey-8);
-	--md-code-hl-operator-color:       var(--fusiondoc-grey-6);
-	--md-code-hl-punctuation-color:    var(--fusiondoc-grey-6);
-	--md-code-hl-comment-color:        var(--fusiondoc-grey-6);
-	--md-code-hl-generic-color:        var(--fusiondoc-grey-6);
-	--md-code-hl-variable-color:       var(--fusiondoc-grey-6);
+	--md-code-hl-number-color:         hsl(290, 60%, 40%);
+	--md-code-hl-special-color:        var(--fusiondoc-grey-4);
+	--md-code-hl-function-color:       var(--fusiondoc-grey-4);
+	--md-code-hl-constant-color:       var(--fusiondoc-grey-4);
+	--md-code-hl-keyword-color:        hsl(40, 75%, 30%);
+	--md-code-hl-string-color:         hsl(330, 80%, 40%);
+	--md-code-hl-name-color:           var(--fusiondoc-grey-3);
+	--md-code-hl-operator-color:       var(--fusiondoc-grey-5);
+	--md-code-hl-punctuation-color:    var(--fusiondoc-grey-5);
+	--md-code-hl-comment-color:        var(--fusiondoc-grey-5);
+	--md-code-hl-generic-color:        var(--fusiondoc-grey-5);
+	--md-code-hl-variable-color:       var(--fusiondoc-grey-5);
 }
 
 [data-md-color-scheme="fusiondoc-dark"] {
 	--md-code-fg-color:                var(--fusiondoc-grey-8);
 	--md-code-bg-color:                var(--fusiondoc-grey-2);
+	--fusiondoc-code-separator:        var(--fusiondoc-grey-3);
+	--fusiondoc-line-numbers:        var(--fusiondoc-grey-6);
 
 	--md-code-hl-color:                var(--fusiondoc-accent-a20);
 	--md-code-hl-number-color:         hsl(290, 60%, 70%);
@@ -50,7 +54,7 @@
 }
 
 .highlighttable .linenos {
-	box-shadow: inset -.05rem 0 var(--fusiondoc-grey-3);
+	box-shadow: inset -.05rem 0 var(--fusiondoc-code-separator);
 }
 
 .highlight .hll {
@@ -61,7 +65,7 @@
 }
 
 .highlighttable .linenodiv pre {
-	color: var(--fusiondoc-grey-6);
+	color: var(--fusiondoc-line-numbers);
 }
 
 .highlight .md-clipboard {
@@ -76,6 +80,14 @@
 	color: var(--fusiondoc-grey-10);
 }
 
+pre {
+	box-shadow: var(--md-shadow-z1);
+}
+
+.tabbed-set pre {
+	box-shadow: none;
+}
+
 code:not(pre code, .highlight) {
 	background-color: var(--fusiondoc-bg-2) !important;
 	color: inherit !important;

diff --git a/docs/assets/theme/paragraph.css b/docs/assets/theme/paragraph.css
@@ -24,7 +24,7 @@
 .js .md-typeset .tabbed-labels::before {
 	background-color: transparent;
 	height: 100%;
-	box-shadow: 0 -0.325rem var(--md-code-bg-color) inset, 0 -0.4rem var(--fusiondoc-orange) inset;
+	box-shadow: 0 -0.325rem var(--md-code-bg-color) inset, 0 -0.4rem var(--fusiondoc-accent) inset;
 }
 
 .md-typeset .tabbed-labels>label {
@@ -41,6 +41,10 @@
 	border-top-right-radius: 0.25rem;
 }
 
+.md-typeset .tabbed-set {
+	box-shadow: var(--md-shadow-z1);
+}
+
 h1 > .twemoji:first-child,
 h2 > .twemoji:first-child,
 h3 > .twemoji:first-child,
@@ -72,7 +76,7 @@ h6 > .twemoji:first-child {
 .md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),
 .md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),
 .md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) {
-	color: var(--fusiondoc-orange);
+	color: var(--fusiondoc-accent);
 	font-weight: 700;
 }
 

diff --git a/docs/index.md b/docs/index.md
@@ -68,23 +68,29 @@ You can write out your logic using Fusion's built-in state objects.
 Here's the two basic ones, Value and Computed:
 
 ```Lua
+-- Start tracking some new objects.
+local scope = Fusion:scoped()
+
 -- This creates a state object that you can set manually.
 -- You can change its value using myName:set().
-local myName = Value("Daniel")
+local myName = scope:Value("Daniel")
 
 -- This creates a state object from a calculation.
 -- It determines its own value automatically.
 local myGreeting = scope:Computed(function(use)
 	return "Hello! My name is " .. use(myName)
 end)
+
+-- Discard all the objects.
+scope:doCleanup()
 ```
 
 To watch what a state object does, you can use an Observer.
 For example, you can run some code when an object changes value.
 
 ```Lua
 -- This observer watches for when the greeting changes.
-local myObserver = Observer(myGreeting)
+local myObserver = scope:Observer(myGreeting)
 
 -- Let’s print out the greeting when there’s a new one.
 local disconnect = myObserver:onChange(function()
@@ -107,21 +113,15 @@ you can easily integrate with your game scripts.
 
 -----
 
-Fusion provides dedicated functions to create and modify instances. They allow
-you to easily configure your instance in one place.
+Fusion provides dedicated functions to create instances. They allow you to
+easily configure your instance in one place.
 
 ```Lua
 -- This will create a red part in the workspace.
-local myPart = New "Part" {
+local myPart = scope:New "Part" {
 	Parent = workspace,
 	BrickColor = BrickColor.Red()
 }
-
--- This adds on some extras after.
-Hydrate(myPart) {
-	Material = "Wood",
-	Transparency = 0.5
-}
 ```
 
 They offer powerful features to keep all your instance code close together. For
@@ -130,12 +130,14 @@ example, you can listen for events or add children.
 ```Lua
 -- This will create a rounded button.
 -- When you click it, it’ll greet you.
-local myButton = New "TextButton" {
+local myButton = scope:New "TextButton" {
 	Text = "Click me",
+
 	[OnEvent "Activated"] = function()
 		print("Hello! I’m a button.")
 	end,
-	[Children] = New "UICorner" {
+
+	[Children] = scope:New "UICorner" {
 		CornerRadius = UDim.new(1, 0)
 	}
 }
@@ -146,10 +148,10 @@ object changes value.
 
 ```Lua
 -- Creating a state object you can control...
-local message = Value("Hello!")
+local message = scope:Value("Hello!")
 
 -- Now you can plug that state object into the Text property.
-local myLabel = New "TextLabel" {
+local myLabel = scope:New "TextLabel" {
 	Text = message
 }
 print(myLabel.Text) --> Hello!
@@ -176,14 +178,14 @@ want - not just instance properties.
 
 ```Lua
 -- This could be anything you want, as long as it's a state object.
-local health = Value(100)
+local health = scope:Value(100)
 
 -- Easily make it tween between values...
 local style = TweenInfo.new(0.5, Enum.EasingStyle.Quad)
-local tweenHealth = Tween(health, style)
+local tweenHealth = scope:Tween(health, style)
 
 -- ...or use spring physics for extra responsiveness.
-local springHealth = Spring(health, 30, 0.9)
+local springHealth = scope:Spring(health, 30, 0.9)
 ```
 
 Tween and Spring are state objects, just like anything else that changes in
@@ -196,7 +198,7 @@ local wholeHealth = scope:Computed(function(use)
 end)
 
 -- You can format it as text and put it in some UI, too.
-local myText = New "TextLabel" {
+local myText = scope:New "TextLabel" {
 	Text = scope:Computed(function(use)
 		return "Health: " .. use(wholeHealth)
 	end)
@@ -217,7 +219,7 @@ local style = scope:Computed(function(use)
 end)
 
 -- Plug it right into your animation!
-local tweenHealth = Tween(health, style)
+local tweenHealth = scope:Tween(health, style)
 ```
 
 -----