refactor(ui-lib): color export simplification (taikoxyz#17287)

Co-authored-by: bearni95 <[email protected]>
kervsalz · May 22, 2024 · a551de1 · a551de1
1 parent 5c7a122
commit a551de1
Show file tree

Hide file tree

Showing 11 changed files with 403 additions and 254 deletions.
diff --git a/packages/ui-lib/.storybook/main.ts b/packages/ui-lib/.storybook/main.ts
@@ -7,15 +7,10 @@ export const framework = {
 
 export const docs = { autodocs: false };
 export const addons = [
-	'@storybook/addon-links',
-	'@storybook/addon-essentials',
-	'@chromatic-com/storybook',
-	'@storybook/addon-interactions',
-	'@storybook/addon-themes'
+	'@storybook/addon-essentials'
 ];
 
 const config: StorybookConfig = {
-	//framework: '@taiko/ui-lib',
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 	staticDirs: ['../static'],
 	framework: {

diff --git a/packages/ui-lib/src/lib/components/Footer/Footer.svelte b/packages/ui-lib/src/lib/components/Footer/Footer.svelte
@@ -110,7 +110,7 @@
 		'flex flex-col',
 		'items-center',
 		'justify-center',
-		'bg-tko-background-elevated',
+		'bg-background-elevated',
 		//'bg-primary',
 		'mt-5',
 		'p-5',
@@ -129,7 +129,7 @@
 		'text-xs',
 		'font-bold',
 		'font-sans',
-		'text-tko-content-primary'
+		'text-content-primary'
 	);
 	const socialLinksWrapperClasses = classNames(
 		'w-full',
@@ -145,12 +145,12 @@
 		'flex flex-row',
 		'items-center',
 		'justify-center',
-		'bg-tko-background-neutral',
+		'bg-background-neutral',
 		'lg:p-5',
 		'p-3',
 		'gap-3',
 		'rounded-xl',
-		'text-tko-content-primary',
+		'text-content-primary',
 		'font-medium',
 		'lg:text-2xl',
 		'md:text-base',
@@ -187,14 +187,14 @@
 		'text-4xl',
 		'font-clash-grotesk',
 		'font-medium',
-		'text-tko-content-primary',
+		'text-content-primary',
 		'md:text-left',
 		'text-center',
 		'w-full'
 	);
 
 	const bottomContentClasses = classNames(
-		'text-tko-content-secondary',
+		'text-content-secondary',
 		'font-sans',
 		'text-base',
 		'font-normal',
@@ -213,7 +213,7 @@
 		'pt-6',
 		'font-sans',
 		'text-base',
-		'text-tko-content-secondary',
+		'text-content-secondary',
 		'font-normal'
 	);
 
@@ -222,7 +222,7 @@
 		'flex flex-col',
 		'items-center',
 		'justify-center',
-		'bg-tko-background-neutral',
+		'bg-background-neutral',
 		'rounded-3xl',
 		'p-7'
 	);
@@ -253,14 +253,14 @@
 
 	const textLinkTitleClasses = classNames(
 		'font-bold',
-		'text-tko-content-primary',
+		'text-content-primary',
 		'text-base',
 		'uppercase'
 	);
 
 	const textLinkContentClasses = classNames(
 		'hover:text-primary',
-		'text-tko-content-secondary',
+		'text-content-secondary',
 		'text-base',
 		'cursor-pointer'
 	);
@@ -275,9 +275,11 @@
 		'py-3',
 		'font-sans',
 		'text-base',
-		'text-tko-content-secondary',
+		'text-content-secondary',
 		'font-normal'
 	);
+
+	$: hoveredIcon, console.log({ hoveredIcon });
 </script>
 
 <div class={sectionClasses}>
@@ -299,22 +301,22 @@
 						size="28"
 						class={classNames(
 							'transition-colors',
-							//'text-primary'
+
 							hoveredIcon === link.label && hoveredIcon === 'youtube'
-								? 'text-tko-red-500'
-								: 'text-tko-content-tertiary',
+								? 'text-red-500'
+								: 'text-content-tertiary',
 							hoveredIcon === link.label && hoveredIcon === 'forum'
-								? 'text-tko-primary'
-								: 'text-tko-content-tertiary',
+								? 'text-primary'
+								: 'text-content-tertiary',
 							hoveredIcon === link.label && hoveredIcon === 'discord'
-								? 'text-tko-discord'
-								: 'text-tko-content-tertiary',
+								? 'text-discord-purple'
+								: 'text-content-tertiary',
 							hoveredIcon === link.label && hoveredIcon === 'twitter'
-								? 'text-tko-icon-primary'
-								: 'text-tko-content-tertiary',
+								? 'text-icon-primary'
+								: 'text-content-tertiary',
 							hoveredIcon === link.label && hoveredIcon === 'mirror'
-								? 'text-tko-icon-primary'
-								: 'text-tko-content-tertiary'
+								? 'text-icon-primary'
+								: 'text-content-tertiary'
 						)}
 					/>
 					{#if windowSize !== 'sm'}

diff --git a/packages/ui-lib/src/lib/components/ResponsiveController/ResponsiveController.svelte b/packages/ui-lib/src/lib/components/ResponsiveController/ResponsiveController.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-
+	import { browser } from '$app/environment';
 	// This component will help us to programmatically do the same as
 	// CSS media queries. We can use it to show/hide elements or render
 	// different components based on whether or not the size is desktop
 	// or larger
-	const isDesktopMediaQuery = window.matchMedia('(min-width: 1024px)');
-	const isMobileMediaQuery = window.matchMedia('(max-width: 640px)');
+	let isDesktopMediaQuery: MediaQueryList;
+	let isMobileMediaQuery: MediaQueryList;
 
 	let isDesktop: boolean;
 	let isMobile: boolean;
 
+	if (browser) {
+		isDesktopMediaQuery = window.matchMedia('(min-width: 1024px)');
+		isMobileMediaQuery = window.matchMedia('(max-width: 640px)');
+	}
+
 	export let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
 	function isDesktopQueryHandler(event: MediaQueryListEvent) {
@@ -24,6 +29,7 @@
 	}
 
 	onMount(() => {
+		if (!browser) return;
 		isDesktop = isDesktopMediaQuery.matches;
 		isMobile = isMobileMediaQuery.matches;
 		isDesktopMediaQuery.addEventListener('change', isDesktopQueryHandler);
@@ -33,6 +39,7 @@
 	});
 
 	onDestroy(() => {
+		if (!browser) return;
 		isDesktopMediaQuery.removeEventListener('change', isDesktopQueryHandler);
 		isMobileMediaQuery.removeEventListener('change', isMobileQueryHandler);
 	});

diff --git a/packages/ui-lib/src/lib/theme/colors.js b/packages/ui-lib/src/lib/theme/colors.js
diff --git a/packages/ui-lib/src/lib/theme/dark-mode.js b/packages/ui-lib/src/lib/theme/dark-mode.js
diff --git a/packages/ui-lib/src/lib/theme/light-mode.js b/packages/ui-lib/src/lib/theme/light-mode.js
diff --git a/packages/ui-lib/src/routes/+layout.ts b/packages/ui-lib/src/routes/+layout.ts
@@ -0,0 +1,5 @@
+// When setting this to false your entire app will only be rendered on the client,
+// which essentially means you turn your app into an SPA.
+// See https://kit.svelte.dev/docs/page-options#ssr
+
+export const ssr = true;
diff --git a/packages/ui-lib/src/routes/+page.svelte b/packages/ui-lib/src/routes/+page.svelte
@@ -1,6 +1,29 @@
 <script lang="ts">
 </script>
 
-<h1>Welcome to your library project</h1>
+<div class="text-legacy">Purple?</div>
+<div class="text-3xl">Welcome to your library project</div>
 <p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<label class="swap swap-rotate">
+	<!-- this hidden checkbox controls the state -->
+	<input type="checkbox" class="theme-controller" value="synthwave" />
+
+	<!-- sun icon -->
+	<svg
+		class="swap-off fill-current w-10 h-10"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		><path
+			d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+		/></svg
+	>
+
+	<!-- moon icon -->
+	<svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+		><path
+			d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+		/></svg
+	>
+</label>