diff --git a/README.md b/README.md index 7d025d423..19feaee53 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,28 @@ -FusionFusionDocsDownload +FusionFusionDocsDownload -Fusion is a modern reactive UI library, built specifically for [Roblox](https://developer.roblox.com/) and [Luau](https://luau-lang.org/). +**Rediscover the joy of coding.** -Build your UI with a declarative syntax that's easy to read and write.
-Plug in live data with simple, flexible, truly reactive state management.
-Deliver a fast, smooth experience to everyone - on mobile, console, PC or in VR.
+Code is more dynamic, complex and intertwined than ever before. Errors cascade +out of control, things update in the wrong order, and it's all connected by +difficult, unreadable spaghetti. - -Visit the Fusion documentation to learn more (external link) - +No longer. Fusion introduces modern 'reactive' concepts for managing code, so +you can spend more time getting your logic right, and less time implementing +buggy boilerplate code connections. ------ +Starting from simple roots, concepts neatly combine and build up with very little +learning curve. At every stage, you can robustly guarantee what your code will +do, and when you come back in six months, your code is easy to pick back up. -## Contributing +Piqued your interest? [Get going in minutes with our on-rails tutorial.](https://elttob.uk/Fusion/latest/tutorials) -Please read [our contribution policies](/CONTRIBUTING.md) before opening an issue or pull request. +## Issues & contributions + +Have you read [our contribution guide](/CONTRIBUTING.md)? It's a real page turner! + +We highly recommend reading it before opening an issue or pull request. + +## License + +Fusion is licensed freely under MIT. Go do cool stuff with it, and if you feel +like it, give us a shoutout! \ No newline at end of file diff --git a/SECURITY.md b/SECURITY.md deleted file mode 100644 index b2eb9d0da..000000000 --- a/SECURITY.md +++ /dev/null @@ -1,17 +0,0 @@ -# How To Report A Vulnerability - -If you find any security issues or vulnerabilities in Fusion, please get in -contact with Elttob privately - make sure to include details about what the -specific issue is. You should expect to get a response back as soon as possible, -but allow up to 2 days. - -If, once the issue is looked into, it is approved, a fix will be worked on and -rolled out with high priority. In most cases, this should be relatively quick, -but unless otherwise specified, allow at least 2 weeks for us to announce a fix -or, failing that, update you on the status of the fix. We make sure to give -attribution to all people who submit approved security issue reports. - -If an issue is not approved, then this means it's either 1) been investigated -and determined not to be an issue, or 2) is a duplicate of a report we're -already looking into. In these cases, you will be notified when your issue is -rejected. \ No newline at end of file diff --git a/docs/assets/logo-dark.svg b/docs/assets/logo-dark.svg index 788cf3731..fb65f0fb9 100644 --- a/docs/assets/logo-dark.svg +++ b/docs/assets/logo-dark.svg @@ -1,9 +1,9 @@ - - - + + + - - + + diff --git a/docs/assets/logo-light.svg b/docs/assets/logo-light.svg index b27e92200..ec0bbc164 100644 --- a/docs/assets/logo-light.svg +++ b/docs/assets/logo-light.svg @@ -1,9 +1,9 @@ - - - + + + - - + + diff --git a/docs/assets/theme/admonition.css b/docs/assets/theme/admonition.css index 423e799d2..7a89c03f1 100644 --- a/docs/assets/theme/admonition.css +++ b/docs/assets/theme/admonition.css @@ -1,4 +1,13 @@ .md-typeset .admonition-title, .md-typeset summary { background: none !important; +} + +[dir="ltr"] .md-typeset :is(.admonition, details) { + border-radius: 0.25rem; + border-width: 0.1rem; +} + +[data-md-color-scheme="fusiondoc-dark"] .md-typeset :is(.admonition, details) { + --md-code-bg-color: var(--fusiondoc-grey-1); } \ No newline at end of file diff --git a/docs/assets/theme/api-reference.css b/docs/assets/theme/api-reference.css index 24138e3f3..a1667c190 100644 --- a/docs/assets/theme/api-reference.css +++ b/docs/assets/theme/api-reference.css @@ -49,19 +49,19 @@ .fusiondoc-api-pills > * { padding: 0.25em 0.75em; - border-radius: 1em; + border-radius: 0.25rem; height: 2em; flex-shrink: 0; } .fusiondoc-api-pills .fusiondoc-api-pill-type { - background-color: var(--fusiondoc-accent-a20); + background-color: var(--fusiondoc-orange-a20); color: var(--fusiondoc-accent-text); } .fusiondoc-api-pills .fusiondoc-api-pill-since { - background-color: var(--fusiondoc-accent-hover-a20); - color: var(--fusiondoc-accent-hover-text); + background-color: var(--fusiondoc-grey-a20); + color: var(--fusiondoc-fg-1); } .fusiondoc-api-breadcrumbs { diff --git a/docs/assets/theme/code.css b/docs/assets/theme/code.css index bd9fa3737..03e67daf7 100644 --- a/docs/assets/theme/code.css +++ b/docs/assets/theme/code.css @@ -19,7 +19,7 @@ [data-md-color-scheme="fusiondoc-dark"] { --md-code-fg-color: var(--fusiondoc-grey-8); - --md-code-bg-color: var(--fusiondoc-grey-0); + --md-code-bg-color: var(--fusiondoc-grey-2); --md-code-hl-color: var(--fusiondoc-accent-a20); --md-code-hl-number-color: hsl(290, 60%, 70%); @@ -36,6 +36,15 @@ --md-code-hl-variable-color: var(--fusiondoc-grey-6); } +.md-typeset code { + border-radius: 0.25rem; +} + +.highlighttable .linenos { + border-bottom-left-radius: 0.25rem; + border-top-left-radius: 0.25rem; + } + .highlighttable .linenodiv { box-shadow: none; } @@ -47,8 +56,8 @@ .highlight .hll { box-shadow: inset 0.125rem 0 var(--fusiondoc-accent), - 320px 0 var(--md-code-hl-color); - + 320px 0 var(--md-code-hl-color); + background: linear-gradient(to left, var(--fusiondoc-accent-a20) 0%, var(--fusiondoc-accent-a10) 100%); } .highlighttable .linenodiv pre { diff --git a/docs/assets/theme/fusiondoc.css b/docs/assets/theme/fusiondoc.css index ba535f4d8..7e0729d26 100644 --- a/docs/assets/theme/fusiondoc.css +++ b/docs/assets/theme/fusiondoc.css @@ -1,19 +1,20 @@ :root { - --fusiondoc-grey-0: hsl(240, 5%, 2.5%); - --fusiondoc-grey-1: hsl(240, 5%, 5%); - --fusiondoc-grey-2: hsl(240, 5%, 10%); - --fusiondoc-grey-3: hsl(240, 5%, 20%); - --fusiondoc-grey-4: hsl(240, 5%, 30%); - --fusiondoc-grey-5: hsl(240, 5%, 50%); - --fusiondoc-grey-6: hsl(240, 5%, 60%); - --fusiondoc-grey-7: hsl(240, 5%, 80%); - --fusiondoc-grey-8: hsl(240, 5%, 90%); - --fusiondoc-grey-9: hsl(240, 5%, 92%); - --fusiondoc-grey-10: hsl(240, 5%, 95%); - - --fusiondoc-grey-1-a80: hsl(240, 5%, 5%, 80%); - --fusiondoc-grey-2-a80: hsl(240, 5%, 10%, 80%); - --fusiondoc-grey-8-a80: hsl(240, 5%, 90%, 80%); + --fusiondoc-grey-0: #000000; + --fusiondoc-grey-1: #08001B; + --fusiondoc-grey-2: #201432; + --fusiondoc-grey-3: #36304f; + --fusiondoc-grey-4: #544c68; + --fusiondoc-grey-5: #716a87; + --fusiondoc-grey-6: #9189a7; + --fusiondoc-grey-7: #aeacc3; + --fusiondoc-grey-8: #d2cede; + --fusiondoc-grey-9: #F5F1FF; + --fusiondoc-grey-10: #ffffff; + + --fusiondoc-grey-1-a80: #08001Bcc; + --fusiondoc-grey-2-a80: #201432cc; + --fusiondoc-grey-8-a80: #d2cedecc; + --fusiondoc-grey-9-a80: #F5F1FFcc; --fusiondoc-orange: hsl(40, 100%, 50%); --fusiondoc-orange-p1: hsl(40, 100%, 60%); @@ -44,9 +45,10 @@ } [data-md-color-scheme="fusiondoc-light"] { - --fusiondoc-bg-1: var(--fusiondoc-grey-8); - --fusiondoc-bg-1-a80: var(--fusiondoc-grey-8-a80); - --fusiondoc-bg-2: var(--fusiondoc-grey-9); + --fusiondoc-bg-0: var(--fusiondoc-grey-8); + --fusiondoc-bg-1: var(--fusiondoc-grey-9); + --fusiondoc-bg-1-a80: var(--fusiondoc-grey-9-a80); + --fusiondoc-bg-2: var(--fusiondoc-grey-10); --fusiondoc-bg-3: var(--fusiondoc-grey-10); --fusiondoc-fg-1: var(--fusiondoc-grey-2); @@ -66,18 +68,19 @@ --fusiondoc-accent-hover-a20: var(--fusiondoc-grey-a20); --fusiondoc-stroke: hsla(240, 5%, 0%, 15%); - --fusiondoc-smoke: hsla(240, 5%, 85%, 90%); + --fusiondoc-smoke: var(--fusiondoc-grey-9-a80); } [data-md-color-scheme="fusiondoc-dark"] { - --fusiondoc-bg-1: var(--fusiondoc-grey-2); - --fusiondoc-bg-1-a80: var(--fusiondoc-grey-2-a80); - --fusiondoc-bg-2: var(--fusiondoc-grey-3); - --fusiondoc-bg-3: var(--fusiondoc-grey-4); + --fusiondoc-bg-0: var(--fusiondoc-grey-2); + --fusiondoc-bg-1: var(--fusiondoc-grey-1); + --fusiondoc-bg-1-a80: var(--fusiondoc-grey-1-a80); + --fusiondoc-bg-2: var(--fusiondoc-grey-2); + --fusiondoc-bg-3: var(--fusiondoc-grey-3); --fusiondoc-fg-1: var(--fusiondoc-grey-9); - --fusiondoc-fg-2: var(--fusiondoc-grey-8); - --fusiondoc-fg-3: var(--fusiondoc-grey-7); + --fusiondoc-fg-2: var(--fusiondoc-grey-9); + --fusiondoc-fg-3: var(--fusiondoc-grey-10); --fusiondoc-accent: var(--fusiondoc-orange); --fusiondoc-accent-light: var(--fusiondoc-orange-p2); @@ -92,7 +95,7 @@ --fusiondoc-accent-hover-a20: var(--fusiondoc-grey-a20); --fusiondoc-stroke: hsla(240, 5%, 100%, 15%); - --fusiondoc-smoke: hsla(240, 5%, 0%, 90%); + --fusiondoc-smoke: var(--fusiondoc-grey-1-a80); } [data-md-color-scheme="fusiondoc-light"] .fusiondoc-dark-theme-only, diff --git a/docs/assets/theme/home.css b/docs/assets/theme/home.css index e0706398b..8d6d417c0 100644 --- a/docs/assets/theme/home.css +++ b/docs/assets/theme/home.css @@ -38,34 +38,35 @@ #fusiondoc-home-main-inner { max-width: 50rem; - background-color: var(--fusiondoc-bg-1-a80); - border: 1em solid transparent; + translate: calc(min(0px, 25rem - 50vw) * 0.75) 0; + background-color: var(--fusiondoc-bg-1); + border: 0.5em solid transparent; + border-radius: 0.75rem; } #fusiondoc-home-main-inner > h1 { margin-bottom: 1rem; } +#fusiondoc-home-main-inner > nav{ + display: flex; + gap: 0.5em; +} + #fusiondoc-home-main-inner > nav > a { - display: inline-flex; - min-width: 15em; - padding: 0.75em 1em; + display: flex; + padding: 0.25rem 0.75rem; background-color: var(--fusiondoc-fg-1); color: var(--fusiondoc-bg-1); font-weight: 600; - font-size: 0.8em; + font-size: 0.75rem; transition: color 0s; + border-radius: 0.25rem; + transition: background-color 125ms; } -#fusiondoc-home-main-inner > nav > a::after { - content: "→"; - margin-left: auto; - margin-right: 0.2em; - transition: transform 0.2s ease; -} - -#fusiondoc-home-main-inner > nav > a:hover::after { - transform: translateX(0.5em); +#fusiondoc-home-main-inner > nav > a:is(:hover, :focus) { + background-color: var(--fusiondoc-accent); } #fusiondoc-home-scroll { @@ -143,4 +144,11 @@ transform: translateY(0rem); opacity: 1; } +} + +@media screen and (min-width: 160rem) { + .md-header[data-md-state=shadow] { + box-shadow: 0 1rem 1rem var(--fusiondoc-bg-1) !important; + background-color: var(--fusiondoc-bg-1); + } } \ No newline at end of file diff --git a/docs/assets/theme/page.css b/docs/assets/theme/page.css index fef2b11d3..dfc358546 100644 --- a/docs/assets/theme/page.css +++ b/docs/assets/theme/page.css @@ -8,10 +8,6 @@ } } -body { - letter-spacing: -0.02em; -} - .md-header, .md-tabs { color: var(--md-default-fg-color); @@ -19,15 +15,19 @@ body { } .md-header[data-md-state=shadow] { - box-shadow: none !important; - background-color: var(--fusiondoc-bg-1-a80); - border-bottom: 1px solid var(--fusiondoc-stroke); - backdrop-filter: saturate(200%) blur(1rem); - transform: translateY(0.00000001px); /* fix weird blur darkening issue */ + box-shadow: 0 1rem 1rem var(--fusiondoc-bg-1) !important; + background-color: var(--fusiondoc-bg-1); +} + +@media screen and (min-width: 160rem) { + .md-header[data-md-state=shadow] { + box-shadow: none !important; + background-color: transparent; + } } .md-tabs .md-tabs__link--active { - font-weight: 600; + font-weight: 700; } @media screen and (min-width: 80rem) { @@ -60,13 +60,16 @@ body { .md-top { box-shadow: none !important; - background-color: var(--fusiondoc-bg-1-a80); - border: 1px solid var(--fusiondoc-stroke); - backdrop-filter: saturate(200%) blur(1rem); + background-color: var(--fusiondoc-fg-1); + color: var(--fusiondoc-bg-1); + z-index: 1000; + border-radius: 0.25rem; + padding: 0.25rem 0.75rem; + font-weight: 600; } .md-top[data-md-state=hidden] { - transform: translate(-50%,-.2rem); + transform: translate(-50%,-1rem); transition-duration: 125ms; } @@ -75,9 +78,14 @@ body { margin-left: -0.25rem; } +.md-top:is(:focus, :hover) { + background-color: var(--fusiondoc-accent); + color: var(--fusiondoc-bg-1); +} + .md-banner { - background-color: var(--fusiondoc-accent-a20); + background-color: var(--fusiondoc-bg-0); text-align: center; } @@ -111,8 +119,13 @@ body { .md-search__form { background-color: transparent; + border-radius: 0.25rem; } +.md-search__form:hover { + background-color: var(--fusiondoc-bg-2); + } + .md-search__input::placeholder, .md-search__input+.md-search__icon { color: var(--md-default-fg-color); @@ -136,16 +149,60 @@ body { margin-right: 0rem; } +.md-header__title .md-header__topic:first-child { + font-size: 0; +} + +.md-header__title .md-header__topic:first-child::after { + content: ""; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + width: 2.4rem; + height: 0.8rem; + margin: auto 0; +} + + +[data-md-color-scheme="fusiondoc-light"] .md-header__title .md-header__topic:first-child::after { + background-image: url(../wordmark-tiny-light.svg); +} + +[data-md-color-scheme="fusiondoc-dark"] .md-header__title .md-header__topic:first-child::after { + background-image: url(../wordmark-tiny-dark.svg); +} + .md-header__title[data-md-state=active] .md-header__topic { - transform: translateY(0.5rem); + transform: translateY(-0.5rem); } .md-header__title .md-header__topic+.md-header__topic { - transform: translateY(-0.5rem); + transform: translateY(0.5rem); +} + +.md-tabs[data-md-state="hidden"] .md-tabs__link { + transform: translateY(-50%); } +.md-search__scrollwrap { + background-color: var(--fusiondoc-bg-2); +} + +.md-search__output, +.md-search__scrollwrap { + border-bottom-left-radius: 0.25rem !important; + border-bottom-right-radius: 0.25rem !important; +} + +[data-md-toggle="search"]:checked ~ .md-header .md-search__form { + background-color: var(--fusiondoc-bg-2); + border-radius: 0.25rem 0.25rem 0 0; + box-shadow: none; + color: var(--md-default-fg-color); + } + .md-search-result__meta { - background-color: var(--fusiondoc-bg-1); + background-color: transparent; } .md-search-result__item { diff --git a/docs/assets/theme/paragraph.css b/docs/assets/theme/paragraph.css index d72e3a551..38ddf3eec 100644 --- a/docs/assets/theme/paragraph.css +++ b/docs/assets/theme/paragraph.css @@ -1,36 +1,44 @@ .md-typeset h1 { - font-weight: 600; - letter-spacing: -0.04em; + font-weight: 700; + letter-spacing: -0.02em; } .md-typeset h2 { - font-weight: 600; - letter-spacing: -0.03em; + font-weight: 700; + letter-spacing: -0.02em; } .md-typeset h3 { font-weight: 600; - letter-spacing: -0.02em; + letter-spacing: -0.01em; } .md-typeset hr { border-bottom-color: var(--fusiondoc-stroke) !important; } +.md-typeset img { + border-radius: 0.25rem; +} + .js .md-typeset .tabbed-labels::before { - background-color: var(--fusiondoc-grey-a10); + background-color: transparent; height: 100%; - box-shadow: 0 2px var(--fusiondoc-fg-1) inset; + box-shadow: 0 -0.325rem var(--md-code-bg-color) inset, 0 -0.4rem var(--fusiondoc-orange) inset; } .md-typeset .tabbed-labels>label { - color: var(--fusiondoc-fg-3); + color: var(--md-code-fg-color); font-weight: 500; + padding: 0; + margin: .78125em 1.25em .625em; } .md-typeset .tabbed-labels { - background-color: var(--fusiondoc-bg-2); + background-color: var(--md-code-bg-color); box-shadow: none; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; } h1 > .twemoji:first-child, @@ -64,8 +72,8 @@ 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-fg-1); - font-weight: 600; + color: var(--fusiondoc-orange); + font-weight: 700; } .fusiondoc-yt-embed { diff --git a/docs/assets/wordmark-tiny-dark.svg b/docs/assets/wordmark-tiny-dark.svg new file mode 100644 index 000000000..20c6a14aa --- /dev/null +++ b/docs/assets/wordmark-tiny-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/assets/wordmark-tiny-light.svg b/docs/assets/wordmark-tiny-light.svg new file mode 100644 index 000000000..5e47f22a2 --- /dev/null +++ b/docs/assets/wordmark-tiny-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/index.md b/docs/index.md index 6f043df97..2bb56874f 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,24 +5,34 @@ - navigation --- + + + + + +
-

Rediscover the joy of UI.

+

Rediscover the joy of coding.

+

+Code is more dynamic, complex and intertwined than ever before. Errors cascade +out of control, things update in the wrong order, and it's all connected by +difficult, unreadable spaghetti. +

-Fusion is a UI, state management and animation library for Roblox. With Fusion, -you define declaratively what you want to see, rather than the steps the -computer should take to get there. +No longer. Fusion introduces modern 'reactive' concepts for managing code, so +you can spend more time getting your logic right, and less time implementing +buggy boilerplate code connections.

-Starting from simple roots, concepts neatly combine and build up, so there’s -very little learning curve. At every stage, you can robustly guarantee what your -code will do - and when you come back in six months, Fusion code is designed to -be easy to pick back up. +Starting from simple roots, concepts neatly combine and build up with very little +learning curve. At every stage, you can robustly guarantee what your code will +do, and when you come back in six months, your code is easy to pick back up.

diff --git a/docs/tutorials/index.md b/docs/tutorials/index.md index 46d2f4555..49df9e6ff 100644 --- a/docs/tutorials/index.md +++ b/docs/tutorials/index.md @@ -1,5 +1,5 @@ Welcome to the Fusion tutorial section! Here, you'll learn how to build great -interfaces with Fusion, even if you're a complete newcomer to the library. +things with Fusion, even if you're a complete newcomer to the library. !!! caution "But first, something important..." ** @@ -7,7 +7,7 @@ interfaces with Fusion, even if you're a complete newcomer to the library. willing and able to withstand large breaking changes. ** - Fusion is in very early beta right now! You *will* encounter: + Fusion is in beta right now! You *will* encounter: - bugs in core features - updates that completely remove existing features diff --git a/gh-assets/icon-link-extern.svg b/gh-assets/icon-link-extern.svg deleted file mode 100644 index b1395615b..000000000 --- a/gh-assets/icon-link-extern.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/gh-assets/link-docs.svg b/gh-assets/link-docs.svg index 791149f91..bd2274e8a 100644 --- a/gh-assets/link-docs.svg +++ b/gh-assets/link-docs.svg @@ -1,8 +1,4 @@ - - - - - - - + + + diff --git a/gh-assets/link-download.svg b/gh-assets/link-download.svg index 2d86ca30c..c1970f253 100644 --- a/gh-assets/link-download.svg +++ b/gh-assets/link-download.svg @@ -1,12 +1,4 @@ - - - - - - - - - - - + + + diff --git a/gh-assets/logo-dark-theme.svg b/gh-assets/logo-dark-theme.svg index 99e601b25..d0d41c2ca 100644 --- a/gh-assets/logo-dark-theme.svg +++ b/gh-assets/logo-dark-theme.svg @@ -1,17 +1,23 @@ - - - - - - - - - - + + + + + + + + + + + + + - - + + + + + diff --git a/gh-assets/logo-light-theme.svg b/gh-assets/logo-light-theme.svg index 510973b48..638677ce0 100644 --- a/gh-assets/logo-light-theme.svg +++ b/gh-assets/logo-light-theme.svg @@ -1,17 +1,23 @@ - - - - - - - - - - + + + + + + + + + + + + + - - + + + + + diff --git a/mkdocs.yml b/mkdocs.yml index dfd47e1cf..685d4b9f9 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -24,7 +24,7 @@ theme: icon: octicons/moon-24 title: Switch to dark theme font: - text: Inter + text: Plus Jakarta Sans code: JetBrains Mono features: - navigation.tabs