From e104e8cd17145b643c8ac01b41f9d34c15276a7d Mon Sep 17 00:00:00 2001 From: Daniel P H Fox Date: Wed, 28 Aug 2024 09:41:10 +0100 Subject: [PATCH] New light mode code boxes --- docs/assets/theme/code.css | 44 +++++++++++++++++++++------------ docs/assets/theme/paragraph.css | 8 ++++-- docs/index.md | 42 ++++++++++++++++--------------- 3 files changed, 56 insertions(+), 38 deletions(-) diff --git a/docs/assets/theme/code.css b/docs/assets/theme/code.css index 03e67daf7..3011f9c10 100644 --- 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 index a3937e819..caa9fe251 100644 --- 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 index 8184e570b..f9b881816 100644 --- a/docs/index.md +++ b/docs/index.md @@ -68,15 +68,21 @@ 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. @@ -84,7 +90,7 @@ 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) ``` -----