Merge pull request #87 from fold-dev/fold-0.12

refactor: update Fold to v0.12.0
fold-dev · Jun 24, 2024 · 096312c · 096312c
2 parents 88c19c8 + e5c0492
commit 096312c
Show file tree

Hide file tree

Showing 40 changed files with 1,267 additions and 1,133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fold-dev/docs",
-  "version": "24.6.14.0",
+  "version": "24.6.24.0",
   "description": "UI components for product teams.",
   "scripts": {
     "prepare": "husky install",
@@ -11,9 +11,9 @@
     "prettier": "prettier --write 'src/**/*.{ts,tsx}' --print-width 120"
   },
   "dependencies": {
-    "@fold-dev/core": "^0.11.8",
-    "@fold-dev/design": "^0.11.8",
-    "@fold-pro/react": "^0.1.1",
+    "@fold-dev/core": "^0.12.0",
+    "@fold-dev/design": "^0.12.0",
+    "@fold-pro/react": "^0.1.2",
     "@heroicons/react": "^2.0.18",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",

diff --git a/src/components/core.component.tsx b/src/components/core.component.tsx
@@ -1133,7 +1133,7 @@ const All = () => {
                             p="0.5rem 0.5rem">
                             <Palette
                                 justifyContent="center"
-                                gap={0}
+                                gap={8}
                                 color={color}
                                 colors={[
                                     Token.ColorPurple400,
@@ -1172,7 +1172,6 @@ const All = () => {
 
                         <View
                             row
-                            justifyContent="flex-start"
                             gap={5}
                             width="100%">
                             <Pill
@@ -1416,7 +1415,7 @@ export const CoreComponent = () => {
                         fontWeight={400}
                         width="80%">
                         Leverage Fold Core's 85+ components to power your next project. 
-                        Fold Core is completely Open Source (MIT), and will always remain that way.
+                        Fold Core is completely free (MIT), and will always remain that way.
                     </Heading>
                     <Code snippet="npm i --save @fold-dev/core @fold-dev/design" />
                     {/* 

diff --git a/src/components/graphic.component.tsx b/src/components/graphic.component.tsx
@@ -1,5 +1,5 @@
 export const GraphicRight = (props: any) => {
-    const { style = {}, color = 'white', ...rest } = props
+    const { style = {}, color = 'var(--f-color-accent-weak)', ...rest } = props
     return (
         <svg
             width="100%"
@@ -123,7 +123,7 @@ export const GraphicRight = (props: any) => {
 }
 
 export const GraphicLeft = (props: any) => {
-    const { style = {}, color = 'white', ...rest } = props
+    const { style = {}, color = 'var(--f-color-accent-weak', ...rest } = props
     return (
         <svg
             width="100%"

diff --git a/src/components/header.component.tsx b/src/components/header.component.tsx
@@ -6,62 +6,41 @@ import * as Token from '@fold-dev/design/tokens'
 export const HeaderComponent = ({ title, subtitle = null, description = null }) => {
     return  (
         <>
-        <View
-            width="100%"
-            p="50px 0 0 0"
-            m="-100px 0 0 0"
-            position="relative"
-            style={{ overflow: 'hidden' }}
-            height={100}
-            bg="linear-gradient(175deg, var(--f-color-accent-500), var(--f-color-accent-600))">
-            <GraphicRight
-                style={{ position: 'absolute', top: -100, right: -100, opacity: 0.2 }}
-                height={882 / 2}
-                width={1456 / 2}
-            />
-
-            <GraphicLeft
-                style={{ position: 'absolute', top: 400, left: -200, opacity: 0.2 }}
-                width={1107 / 2}
-                height={559 / 2}
-            />
-        </View>
-
-        <View
-            column
-            id="home"
-            gap="1.5rem"
-            flex={1}
-            width="100%"
-            p="5rem 0"
-            justifyContent="stretch">
-            {!!subtitle && (
-                <Text
-                    textAlign="center"
-                    style={{ textTransform: 'uppercase' }}
-                    letterSpacing={5}
-                    colorToken="text-weakest">
-                    {subtitle}
-                </Text>
-            )}
-            <Heading
-                huge
-                textAlign="center">
-                {title}
-            </Heading>
-
-            {!!description && (
+            <View
+                column
+                id="home"
+                gap="1.5rem"
+                flex={1}
+                width="100%"
+                p="5rem 0"
+                justifyContent="stretch">
+                {!!subtitle && (
+                    <Text
+                        textAlign="center"
+                        style={{ textTransform: 'uppercase' }}
+                        letterSpacing={5}
+                        colorToken="text-weakest">
+                        {subtitle}
+                    </Text>
+                )}
                 <Heading
-                    as="h3"
-                    textAlign="center"
-                    colorToken="text-weaker"
-                    width="80%">
-                    {description}
+                    huge
+                    textAlign="center">
+                    {title}
                 </Heading>
-            )}
-        </View>
 
-        <Divider />
-    </>
+                {!!description && (
+                    <Heading
+                        as="h3"
+                        textAlign="center"
+                        colorToken="text-weaker"
+                        width="80%">
+                        {description}
+                    </Heading>
+                )}
+            </View>
+
+            <Divider />
+        </>
     )
 }
diff --git a/src/components/hero.component.tsx b/src/components/hero.component.tsx
@@ -9,10 +9,10 @@ export const HeroComponent = () => {
             p="111px 0 0 0"
             m="-111px 0 0 0"
             position="relative"
-            style={{ overflow: 'hidden' }}
-            bg="linear-gradient(175deg, var(--f-color-accent-500), var(--f-color-accent-600))">
+            style={{  overflow: 'hidden' }}
+            className="hero-background">
             <GraphicRight
-                style={{ position: 'absolute', top: -100, right: -100, opacity: 0.2 }}
+                style={{ position: 'absolute', top: -100, right: -100, opacity: 0.5 }}
                 height={882 / 2}
                 width={1456 / 2}
             />
@@ -34,15 +34,15 @@ export const HeroComponent = () => {
                     position="relative">
                     <Text
                         textAlign="center"
-                        style={{ textTransform: 'uppercase' }}
+                        style={{ textTransform: 'uppercase', opacity: 0.5 }}
                         letterSpacing={5}
-                        colorToken="accent-300">
+                        colorToken="accent">
                         Introducing
                     </Text>
 
                     <Heading
                         textAlign="center"
-                        colorToken="white"
+                        colorToken="accent"
                         fontWeight={700}
                         fontSize="6rem"
                         letterSpacing={-5}
@@ -55,7 +55,7 @@ export const HeroComponent = () => {
                     <Heading
                         as="h3"
                         textAlign="center"
-                        colorToken="accent-50"
+                        colorToken="accent"
                         fontWeight={400}
                         width="90%">
                         Powerful, fully customizable React components for scaling your project to the next level. 
@@ -70,10 +70,9 @@ export const HeroComponent = () => {
                             outline
                             as="a"
                             href="#pro"
-                            border="0.15rem solid var(--f-color-white)"
+                            border="0.15rem solid var(--f-color-accent)"
                             style={{
-                                '--f-button-color': 'var(--f-color-white)',
-                                '--f-color-text-on-color': 'var(--f-color-accent-400)',
+                                '--f-button-color': 'var(--f-color-accent)',
                             }}>
                             Buy Now
                         </Button>
@@ -83,28 +82,28 @@ export const HeroComponent = () => {
                             textDecoration="none"
                             className="f-underline"
                             m="0 -1rem 0 0"
-                            colorToken="white">
+                            colorToken="accent">
                             Read Documentation ↗
                         </Link>
                     </View>
 
                     <Text
                         size="sm"
-                        colorToken="accent-200">
+                        colorToken="accent">
                         <Link
                             style={{ '--f-underline-size': '1.5px' }}
                             size="sm"
                             target="_blank"
                             textDecoration="none"
                             className="f-underline"
-                            colorToken="accent-100"
+                            colorToken="accent"
                             href="https://61fb81a2.sibforms.com/serve/MUIFAIdcVTZB8JLOGmoTu48YYshDwC7Uinyzu3h4sQKqJioZOki2cl7S5BCY9S_sw31Joe2i5fz6RGJfuKXy641YsGYsxkJLqlrTpZXa7H5tzVKRVbkDZvBCKpluQAp4hLkdoWVl7WsceXoIa6GPGRfxYe4tOM8IGmYO-1GfJ-DqScQ1p65akSfLMCl-fGu0sgUUYYnMUlZPn-CW">
                             Subscribe to the newsletter
                         </Link> & get notified of any updates.
                     </Text>
 
                     <GraphicLeft
-                        style={{ position: 'absolute', top: 400, left: -200, opacity: 0.2 }}
+                        style={{ position: 'absolute', top: 400, left: -200, opacity: 0.5 }}
                         width={1107 / 2}
                         height={559 / 2}
                     />