feat(Themes): themes now available

feat: disabled prop and styling for all form inputs
N00nDay · Mar 14, 2023 · c77e8ec · c77e8ec · vercel · Mar 14, 2023
1 parent 72bfc5d
commit c77e8ec
Show file tree

Hide file tree

Showing 231 changed files with 2,050 additions and 1,303 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,10 @@
 	"type": "module",
 	"types": "index.d.ts",
 	"dependencies": {
+		"color": "^4.2.3",
 		"dayjs": "^1.11.7",
+		"nanoid": "^4.0.1",
+		"randomcolor": "^0.6.2",
 		"tailwind-merge": "^1.10.0",
 		"tippy.js": "^6.3.7"
 	},

diff --git a/src/app.css b/src/app.css
@@ -21,8 +21,7 @@ body {
 	@apply w-full;
 	@apply flex;
 	@apply flex-col;
-	@apply bg-light-surface;
-	@apply dark:bg-dark-surface;
+	@apply bg-background;
 	@apply overflow-hidden;
 	overscroll-behavior: none;
 }

diff --git a/src/docs/components/code-block/CodeBlock.svelte b/src/docs/components/code-block/CodeBlock.svelte
@@ -23,7 +23,7 @@
 		}
 	}
 
-	const defaultClass = 'overflow-hidden w-full shadow bg-[#141517] text-sm text-white rounded-md';
+	const defaultClass = 'overflow-hidden w-full shadow bg-black text-sm text-white rounded-md';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/docs/components/inline-code/InlineCode.svelte b/src/docs/components/inline-code/InlineCode.svelte
@@ -1,4 +1 @@
-<code
-	class="bg-light-icon-background dark:bg-dark-icon-background text-light-icon dark:text-dark-icon text-sm rounded-md px-2 py-1"
-	><slot /></code
->
+<code class="bg-default text-default-content text-sm rounded-md px-2 py-1"><slot /></code>
diff --git a/src/docs/components/kbd/Kbd.svelte b/src/docs/components/kbd/Kbd.svelte
@@ -2,7 +2,7 @@
 	import { twMerge } from 'tailwind-merge';
 
 	const defaultClass =
-		'mx-1 bg-light-background dark:bg-dark-background rounded-md px-1.5 py-[0.0625] border border-light-border-base dark:border-dark-border shadow-sm';
+		'mx-1 bg-background rounded-md px-1.5 py-[0.0625] border border-border shadow-sm';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/docs/components/navigation/Navigation.svelte b/src/docs/components/navigation/Navigation.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Badge, Menu, Divider } from '../../../lib';
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte/internal';
 
 	interface Item {
 		title: string;
@@ -182,7 +181,7 @@
 		},
 		{
 			title: 'Table',
-			href: '/table?orderBy=created_at&order=asc&page=1'
+			href: '/table'
 		},
 		{
 			title: 'Tabs',
@@ -206,66 +205,40 @@
 
 	export let handleClose: (() => void) | undefined = undefined;
 
-	let active = '';
+	$: active =
+		$page.url.pathname.substring(0, $page.url.pathname.indexOf('?')) || $page.url.pathname;
 
-	function handleClick(item: string) {
-		active = item;
+	$: console.log('active', active);
+
+	function handleClick() {
 		if (handleClose) {
 			handleClose();
 		}
 	}
 
 	const menuTitleClass = 'text-xs font-bold text-primary py-2 px-3 h-10';
-
-	onMount(() => {
-		active = $page.url.pathname;
-	});
 </script>
 
 <h3 class={menuTitleClass}>GET STARTED</h3>
 <Menu {active}>
-	<Menu.Item
-		key="/installation"
-		label="Installation"
-		href="/installation"
-		on:click={() => handleClick('/installation')}
-	/>
-	<Menu.Item
-		key="/typography"
-		label="Typography"
-		href="/typography"
-		on:click={() => handleClick('/typography')}
-	/>
+	<Menu.Item key="/installation" label="Installation" href="/installation" on:click={handleClick} />
+	<Menu.Item key="/typography" label="Typography" href="/typography" on:click={handleClick} />
+	<Menu.Item key="/themes" label="Themes" href="/themes" on:click={handleClick} />
 </Menu>
 <Divider />
 <h3 class={menuTitleClass}>COMPONENTS</h3>
 <Menu {active}>
 	{#each sidebarItems as item}
 		{#if item.beta}
-			<Menu.Item
-				key={item.href}
-				label={item.title}
-				href={item.href}
-				on:click={() => handleClick(item.href)}
-			>
+			<Menu.Item key={item.href} label={item.title} href={item.href} on:click={handleClick}>
 				<Badge slot="extra" type="error">BETA</Badge>
 			</Menu.Item>
 		{:else if item.updated}
-			<Menu.Item
-				key={item.href}
-				label={item.title}
-				href={item.href}
-				on:click={() => handleClick(item.href)}
-			>
+			<Menu.Item key={item.href} label={item.title} href={item.href} on:click={handleClick}>
 				<Badge slot="extra" type="success">UPDATED</Badge>
 			</Menu.Item>
 		{:else}
-			<Menu.Item
-				key={item.href}
-				label={item.title}
-				href={item.href}
-				on:click={() => handleClick(item.href)}
-			/>
+			<Menu.Item key={item.href} label={item.title} href={item.href} on:click={handleClick} />
 		{/if}
 	{/each}
 </Menu>
@@ -276,20 +249,10 @@
 		key="/click-outside"
 		label="clickOutside"
 		href="/click-outside"
-		on:click={() => handleClick('/click-outside')}
-	/>
-	<Menu.Item
-		key="/clipboard"
-		label="clipboard"
-		href="/clipboard"
-		on:click={() => handleClick('/clipboard')}
-	/>
-	<Menu.Item
-		key="/tooltip"
-		label="tooltip"
-		href="/tooltip"
-		on:click={() => handleClick('/tooltip')}
+		on:click={handleClick}
 	/>
+	<Menu.Item key="/clipboard" label="clipboard" href="/clipboard" on:click={handleClick} />
+	<Menu.Item key="/tooltip" label="tooltip" href="/tooltip" on:click={handleClick} />
 </Menu>
 <Divider />
 <h3 class={menuTitleClass}>UTILITIES</h3>
@@ -298,53 +261,48 @@
 		key="/compute-progress"
 		label="computeProgress"
 		href="/compute-progress"
-		on:click={() => handleClick('/compute-progress')}
+		on:click={handleClick}
 	/>
 	<Menu.Item
 		key="/compute-trend-percent"
 		label="computeTrendPercent"
 		href="/compute-trend-percent"
-		on:click={() => handleClick('/compute-trend-percent')}
+		on:click={handleClick}
 	/>
 	<Menu.Item
 		key="/compute-trend-value"
 		label="computeTrendValue"
 		href="/compute-trend-value"
-		on:click={() => handleClick('/compute-trend-value')}
+		on:click={handleClick}
 	/>
 	<Menu.Item
 		key="/copy-to-clipboard"
 		label="copyToClipboard"
 		href="/copy-to-clipboard"
-		on:click={() => handleClick('/copy-to-clipboard')}
+		on:click={handleClick}
 	/>
 	<Menu.Item
 		key="/encode-search-params"
 		label="encodeSearchParams"
 		href="/encode-search-params"
-		on:click={() => handleClick('/encode-search-params')}
-	/>
-	<Menu.Item
-		key="/format-date"
-		label="formatDate"
-		href="/format-date"
-		on:click={() => handleClick('/format-date')}
+		on:click={handleClick}
 	/>
+	<Menu.Item key="/format-date" label="formatDate" href="/format-date" on:click={handleClick} />
 	<Menu.Item
 		key="/format-file-size"
 		label="formatFileSize"
 		href="/format-file-size"
-		on:click={() => handleClick('/format-file-size')}
+		on:click={handleClick}
 	/>
 	<Menu.Item
 		key="/format-number"
 		label="formatNumber"
 		href="/format-number"
-		on:click={() => handleClick('/format-number')}
+		on:click={handleClick}
 	/>
 </Menu>
 <Divider />
 <h3 class={menuTitleClass}>TYPES</h3>
 <Menu {active}>
-	<Menu.Item key="/types" label="Types" href="/types" on:click={() => handleClick('/types')} />
+	<Menu.Item key="/types" label="Types" href="/types" on:click={handleClick} />
 </Menu>
diff --git a/src/docs/components/props-table/PropsTable.svelte b/src/docs/components/props-table/PropsTable.svelte
@@ -25,18 +25,15 @@
 	];
 </script>
 
-<h1 class="mb-4 mt-8 text-xl font-semibold text-light-content dark:text-dark-content">
+<h1 class="mb-4 mt-8 text-xl font-semibold text-content">
 	{component} Props
 </h1>
 <Card bordered={false}>
 	<Table class="rounded-md overflow-hidden h-full" {columns}>
 		<Table.Header slot="header" sortable={false} />
 		<Table.Body slot="body">
 			{#each props as prop}
-				<Table.Body.Row
-					id={prop.id}
-					class="cursor-default hover:bg-light-surface dark:hover:bg-dark-surface"
-				>
+				<Table.Body.Row id={prop.id} class="cursor-default hover:bg-surface">
 					<Table.Body.Row.Cell column={0}>{prop.prop}</Table.Body.Row.Cell>
 					<Table.Body.Row.Cell column={1}>{@html prop.type}</Table.Body.Row.Cell>
 					<Table.Body.Row.Cell column={2}>{prop.default}</Table.Body.Row.Cell>