Fun site (#13)

* setup themes

* init site

* initial styling and getting started page

* update lock file

* cf test

* remove docs site

* copy current examples site

* add intro and header

* wrap evm and starknet connectors

* prefer published packages

* style cunnect button

* copy to clipboard

* Add connect dialog

* update dependencies

* minimum viable demo

* remove theme from examples page

* tab indicators

.gitignore

@@ -10,6 +10,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.astro/
 dist-ssr
 *.local
 .svelte-kit

.npmrc

@@ -1 +1 @@
-engine-strict=true
+ link-workspace-packages=false

examples/svelte/src/App.svelte

@@ -19,14 +19,13 @@
 </script>
 
 <header>
-	<fractl-modal {config} btnClass="button-85"/>
-
+	<fractl-modal {config} btnClass="button-85" />
 </header>
 <main>
 	<div class="hero">
 		<h1>
 			<!-- Fractl-ui -->
-			<img src={FractlSvg} alt="Fractl UI" />
+			<img src={FractlSvg} alt="Fractl" />
 		</h1>
 		<p>
 			modular dapp UI library for the EVM <span class="whisper">
@@ -36,6 +35,7 @@
 	</div>
 
 	<fractl-modal {config} btnClass="button-85" />
+
 	<!-- 
 	{#if connected}
 		<AccountDialog config={$config}></AccountDialog>

examples/svelte/src/app.css

@@ -1,50 +1,95 @@
+[data-theme='kandinsky'] {
+	--fore-1: hsl(0, 0%, 0%);
+	--fore-2: white;
+	--fore-3: white;
+
+	--back-1: hsl(0, 0%, 100%);
+	--back-2: black;
+	--back-3: black;
+}
+
+[data-theme='dark'] {
+	--fore-1: aliceblue;
+	--fore-2: white;
+	--fore-3: white;
+
+	--back-1: hsl(255, 72%, 3%);
+	--back-2: black;
+	--back-3: black;
+}
+
+[data-theme='deadpool'] {
+	--fore-1: hsl(9, 61%, 82%);
+	--fore-2: white;
+	--fore-3: white;
+
+	--back-1: hsl(0, 88%, 30%);
+	--back-2: black;
+	--back-3: black;
+}
+
+:root {
+	background: var(--back-1);
+	color: var(--fore-1);
+	transition: background-color 800ms ease-out;
+}
+
+/* 
 :root {
-	/* Primary button  
-	--fcl-btn-color: green;
-	--fcl-primary-btn-font-size: 1em;
 	--fcl-btn-border-radius: 0.5em;
-	--fcl-btn-background: red;
+	--fcl-btn-font-size: 1em;
+	--fcl-btn-color: var(--fore-1);
+	
+	--fcl-btn-background: var(--back-2);
 	--fcl-btn-box-shadow: ;
-	--fcl-btn-hover-color: orange;
+	
+	--fcl-btn-hover-color: var(--fore-2);
 	--fcl-btn-hover-background: ;
 	--fcl-btn-hover-box-shadow: ;
+	
 	--fcl-btn-active-color: blue;
 	--fcl-btn-active-background: ;
 	--fcl-btn-active-box-shadow: ;
-	*/
+	
+	
+	--fcl-text-btn-font-size: 1em; 
+	--fcl-text-btn-color: blue;	 
+	--fcl-text-btn-hover-color: cyan;
+	--fcl-text-btn-active-color: red;  
 
-	/* Text button  
-	 --fcl-text-btn-font-size: 1em; 
-	 --fcl-text-btn-color: blue;	 
-	 --fcl-text-btn-hover-color: cyan;
-	--fcl-text-btn-active-color: red; 
-	*/
+	 Text Variables
+	 --fcl-font-family: cursive;
+	 --fcl-modal-heading-font-weight: 600;
+	 --fcl-text-color-error: ;
+	
+	 --fcl-text-secondary-color: ;
+	 --fcl-text-color-success: ;
+	
+	 --fcl-body-background: red; 
+	
+	 Miscallenuous Variables
+	 --fcl-focus-color: tomato;
+	 --fcl-body-divider: ; var(--fcl-text-colo--fcl-border-color)
+	 --fcl-qr-foreground-color: ;
+	 --fcl-qr-background-color: ;
+	 --fcl-qr-border-color: ;
+	 --fcl-qr-border-radius: ;
+	 --fcl-spinner-color: ;
+	
+	 --fcl-border-radius: 1.8em;
+	 --fcl-modal-padding: 1.25em;
+	 --fcl-overlay-background: hsla(0, 93%, 11%, 0.477); 
+	 --fcl-overlay-backdrop-filter: blur(12px);
+	
+	 --fcl-body-background: var(--back-1); 
+	 --fcl-text-color: yellow;
+	 --fcl-font-family: cursive;
+	 --fcl-modal-box-shadow: ; 
+}*/
 
-	/* Text Variables
-	--fcl-font-family: cursive;
-	--fcl-modal-heading-font-weight: 600;
-	--fcl-text-color: ;
-	--fcl-text-color-error: ;
-	---
-	--fcl-text-secondary-color: ;
-	--fcl-text-color-success: ;
-	*/
-		/* --fcl-overlay-background: ; 
-	/* --fcl-overlay-backdrop-filter: ; 
-	/* --fcl-body-background: red; 
-	/* --fcl-modal-box-shadow: ; 
-
-	/* Miscallenuous Variables */
-	--fcl-focus-color: tomato;
-	--fcl-body-divider: ; /* var(--fcl-text-color, --fcl-border-color) */
-	--fcl-qr-foreground-color: ;
-	--fcl-qr-background-color: ;
-	--fcl-qr-border-color: ;
-	--fcl-qr-border-radius: ;
-	--fcl-spinner-color: ;
-
-	/* --fcl-border-radius: 1.8em; */
-	/* --fcl-modal-padding: 1.25em; */
+.fcl__btn-primary {
+	--fcl-primary-btn-font-size: 1em;
+	--fcl-btn-border-radius: 0.5em;
 }
 
 .button-85 {

package.json

@@ -9,7 +9,7 @@
 		"prepare": "husky install",
 		"build": "pnpm -F='./packages/*' --parallel build",
 		"check": "pnpm -r --no-bail check",
-		"dev:site": "pnpm -F x-svelte dev",
+		"dev:site": "pnpm -F site dev",
 		"dev:pkg": "pnpm -F='./packages/*' --parallel dev",
 		"build:site": "pnpm -F fractl-ui -F='@fractl-ui/*' -F x-svelte build",
 		"ci:publish": "pnpm build && pnpm publish -r --access=public"

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   - 'packages/*'
   - 'examples/*'
+  - 'site'

site/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Fractl UI</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

site/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "site",
+	"private": true,
+	"version": "0.3.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json"
+	},
+	"devDependencies": {
+		"@fractl-ui/evm": "0.3.4",
+		"@fractl-ui/starknet": "0.3.4",
+		"@fractl-ui/fuel": "0.3.4",
+		"fractl-ui": "0.3.4",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"@tsconfig/svelte": "^5.0.2",
+		"@wagmi/core": "^2.6.5",
+		"svelte": "^4.2.12",
+		"svelte-check": "^3.6.6",
+		"viem": "^2.7.16",
+		"@sveltejs/adapter-auto": "^3.2.0"
+	}
+}