1-adjusting the "unimportant color" from a shade of foregroundColor t…

…o a shade of mutedColor for all components 2-adding the tabs component 3-adding a theme store to adjust external styles like code component theme
EMPTYVOID-DEV · Feb 29, 2024 · 87f3c6a · 87f3c6a
1 parent eb3e575
commit 87f3c6a
Show file tree

Hide file tree

Showing 31 changed files with 288 additions and 59 deletions.
diff --git a/apps/docs/src/app.css b/apps/docs/src/app.css
@@ -11,7 +11,7 @@
 	--lh3: 1.4;
 	--lh4: 1.5;
 	--lhbody: 1.6;
-	--border-radius: 0.54rem;
+	--border-radius: 0.42rem;
 	--bodyFont: Arial, Helvetica, sans-serif;
 	--headerFont: 'Playfair Display', serif;
 	--zeroFont: 'Notable', sans-serif;

diff --git a/apps/docs/src/lib/components/icons/brain.svelte b/apps/docs/src/lib/components/icons/brain.svelte
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M21.33 12.91c.09 1.55-.62 3.04-1.89 3.95l.77 1.49c.23.45.26.98.06 1.45c-.19.47-.58.84-1.06 1l-.79.25a1.687 1.687 0 0 1-1.86-.55L14.44 18c-.89-.15-1.73-.53-2.44-1.1c-.5.15-1 .23-1.5.23c-.88 0-1.76-.27-2.5-.79c-.53.16-1.07.23-1.62.22c-.79.01-1.57-.15-2.3-.45a4.105 4.105 0 0 1-2.43-3.61c-.08-.72.04-1.45.35-2.11c-.29-.75-.32-1.57-.07-2.33C2.3 7.11 3 6.32 3.87 5.82c.58-1.69 2.21-2.82 4-2.7c1.6-1.5 4.05-1.66 5.83-.37c.42-.11.86-.17 1.3-.17c1.36-.03 2.65.57 3.5 1.64c2.04.53 3.5 2.35 3.58 4.47c.05 1.11-.25 2.2-.86 3.13c.07.36.11.72.11 1.09m-5-1.41c.57.07 1.02.5 1.02 1.07a1 1 0 0 1-1 1h-.63c-.32.9-.88 1.69-1.62 2.29c.25.09.51.14.77.21c5.13-.07 4.53-3.2 4.53-3.25a2.592 2.592 0 0 0-2.69-2.49a1 1 0 0 1-1-1a1 1 0 0 1 1-1c1.23.03 2.41.49 3.33 1.3c.05-.29.08-.59.08-.89c-.06-1.24-.62-2.32-2.87-2.53c-1.25-2.96-4.4-1.32-4.4-.4c-.03.23.21.72.25.75a1 1 0 0 1 1 1c0 .55-.45 1-1 1c-.53-.02-1.03-.22-1.43-.56c-.48.31-1.03.5-1.6.56c-.57.05-1.04-.35-1.07-.9a.968.968 0 0 1 .88-1.1c.16-.02.94-.14.94-.77c0-.66.25-1.29.68-1.79c-.92-.25-1.91.08-2.91 1.29C6.75 5 6 5.25 5.45 7.2C4.5 7.67 4 8 3.78 9c1.08-.22 2.19-.13 3.22.25c.5.19.78.75.59 1.29c-.19.52-.77.78-1.29.59c-.73-.32-1.55-.34-2.3-.06c-.32.27-.32.83-.32 1.27c0 .74.37 1.43 1 1.83c.53.27 1.12.41 1.71.4c-.15-.26-.28-.53-.39-.81a1.038 1.038 0 0 1 1.96-.68c.4 1.14 1.42 1.92 2.62 2.05c1.37-.07 2.59-.88 3.19-2.13c.23-1.38 1.34-1.5 2.56-1.5m2 7.47l-.62-1.3l-.71.16l1 1.25zm-4.65-8.61a1 1 0 0 0-.91-1.03c-.71-.04-1.4.2-1.93.67c-.57.58-.87 1.38-.84 2.19a1 1 0 0 0 1 1c.57 0 1-.45 1-1c0-.27.07-.54.23-.76c.12-.1.27-.15.43-.15c.55.03 1.02-.38 1.02-.92"
+	/></svg
+>
+
+<style>
+	svg path {
+		fill: var(--icon, --primaryColor);
+	}
+</style>
diff --git a/apps/docs/src/lib/components/icons/development.svelte b/apps/docs/src/lib/components/icons/development.svelte
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
+	><g
+		fill="none"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		><path
+			d="M6.818 22v-2.857C6.662 17.592 5.633 16.416 4.682 15m9.772 7v-1.714c4.91 0 4.364-5.714 4.364-5.714s2.182 0 2.182-2.286l-2.182-3.428c0-4.572-3.709-6.816-7.636-6.857c-2.2-.023-3.957.53-5.27 1.499"
+		/><path d="m13 7l2 2.5l-2 2.5M5 7L3 9.5L5 12m5-6l-2 7" /></g
+	></svg
+>
+
+<style>
+	svg g {
+		stroke: var(--icon, --primaryColor);
+	}
+</style>
diff --git a/apps/docs/src/lib/components/icons/modeling.svelte b/apps/docs/src/lib/components/icons/modeling.svelte
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 32 32"
+	><path
+		fill="currentColor"
+		d="M28.447 16.106L23 13.381V7a1 1 0 0 0-.553-.894l-6-3a1 1 0 0 0-.894 0l-6 3A1 1 0 0 0 9 7v6.382l-5.447 2.723A1 1 0 0 0 3 17v7a1 1 0 0 0 .553.895l6 3a1.001 1.001 0 0 0 .894 0L16 25.118l5.553 2.777a1.001 1.001 0 0 0 .894 0l6-3A1 1 0 0 0 29 24v-7a1 1 0 0 0-.553-.895M21 13.381l-4 2v-4.764l4-2Zm-5-8.264L19.764 7L16 8.882L12.236 7Zm-5 3.5l4 2v4.764l-4-2ZM9 25.382l-4-2v-4.764l4 2Zm1-6.5L6.236 17L10 15.118L13.764 17Zm1 1.736l4-2v4.764l-4 2Zm10 4.764l-4-2v-4.764l4 2Zm1-6.5L18.236 17L22 15.118L25.764 17Zm5 4.5l-4 2v-4.764l4-2Z"
+	/></svg
+>
+
+<style>
+	svg path {
+		fill: var(--icon, --primaryColor);
+	}
+</style>
diff --git a/apps/docs/src/lib/components/icons/test.svelte b/apps/docs/src/lib/components/icons/test.svelte
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
+	><path
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		d="M9 1v7L2 20v3h20v-3L15 8V1m0 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2Zm-6 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2Zm9-7c-7-3-6 4-12 1M6 1h12"
+	/></svg
+>
+
+<style>
+	svg path {
+		stroke: var(--icon, var(--primaryColor));
+	}
+</style>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultPagination.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultPagination.svelte
@@ -2,4 +2,4 @@
 	import { DefaultPagination as Pagination } from 'zero-ui-registry';
 </script>
 
-<Pagination numberOfPages={10} activePage={2} />
+<Pagination numberOfPages={40} activePage={2} />
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultTabs.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultTabs.svelte
@@ -0,0 +1,55 @@
+<script>
+	import { DefaultTabs } from 'zero-ui-registry';
+	import BrainStorming from '$lib/components/icons/brain.svelte';
+	import Modeling from '$lib/components/icons/modeling.svelte';
+	import Development from '$lib/components/icons/development.svelte';
+	import Testing from '$lib/components/icons/test.svelte';
+	let activeTab = 0;
+	const tabs = [
+		'Generate ideas and concepts for the project.',
+		"Create models and representations of the project's architecture, design, and data structures.",
+		'Write and implement the actual code based on the approved models.',
+		'Verify and validate the software to ensure it meets requirements and functions correctly.'
+	];
+</script>
+
+<div class="tabsWrapper">
+	<DefaultTabs
+		bind:activeTab
+		tabs={[
+			{
+				title: 'Brainstorming',
+				icon: BrainStorming
+			},
+			{
+				title: 'Modeling',
+				icon: Modeling
+			},
+			{
+				title: 'Development',
+				icon: Development
+			},
+			{
+				title: 'Testing',
+				icon: Testing
+			}
+		]}
+		on:change={(e) => console.log(e.detail.activeTab)}
+	/>
+	<p>{tabs[activeTab]}</p>
+</div>
+
+<style>
+	.tabsWrapper {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+	.tabsWrapper p {
+		color: var(--foregroundColor);
+		font-size: var(--body);
+		font-family: var(--bodyFont);
+		font-weight: 600;
+	}
+</style>
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/multiPageCode.svelte b/apps/docs/src/lib/components/zeroUIWrappers/multiPageCode.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { codePages } from '$lib/utils/const';
+	import { themeStore } from '$lib/utils/stores';
 	import { MultiPageCode } from 'zero-ui-registry';
+	$: darkMode = $themeStore == 'dark';
 </script>
 
-<MultiPageCode {codePages} --max-height="400px" on:change />
+<MultiPageCode {codePages} {darkMode} --max-height="400px" on:change />
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/singlePageCode.svelte b/apps/docs/src/lib/components/zeroUIWrappers/singlePageCode.svelte
@@ -1,6 +1,7 @@
 <script>
-	import { onMount } from 'svelte';
 	import { SinglePageCode } from 'zero-ui-registry';
+	import { themeStore } from '$lib/utils/stores';
+	$: darkMode = $themeStore == 'dark';
 </script>
 
-<SinglePageCode code="console.log(12)" />
+<SinglePageCode {darkMode} code="console.log(12)" />
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/syncButton.svelte b/apps/docs/src/lib/components/zeroUIWrappers/syncButton.svelte
@@ -2,4 +2,4 @@
 	import { SyncButton } from 'zero-ui-registry';
 </script>
 
-<SyncButton --padding-inline="24px" --padding-block="12px" />
+<SyncButton />
diff --git a/apps/docs/src/lib/utils/client.js b/apps/docs/src/lib/utils/client.js
@@ -1,4 +1,5 @@
 import { cookieMaxAge } from './const';
+import { themeStore } from './stores';
 
 /**
  *@function changeTheme will persist the the theme to local storage and set css variables
@@ -7,6 +8,7 @@ import { cookieMaxAge } from './const';
 export function changeTheme(theme) {
 	const actualTheme = theme == 'system' ? detectSystemTheme() : theme;
 	createCookie('theme', actualTheme, cookieMaxAge);
+	themeStore.set(actualTheme);
 	const html = document.querySelector('html');
 	const dataset = html?.dataset;
 	if (dataset) dataset.theme = actualTheme;

diff --git a/apps/docs/src/lib/utils/stores.js b/apps/docs/src/lib/utils/stores.js
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+/**@type {import("svelte/store").Writable<"light"|"dark">}*/
+export const themeStore = writable('dark');
diff --git a/md/defaultTabs.md b/md/defaultTabs.md
@@ -0,0 +1 @@
+### TODO
diff --git a/packages/ui/registry.json b/packages/ui/registry.json
@@ -173,5 +173,11 @@
       "variants": ["dialog/default", "button/sync"],
       "entry": ["dialogAlert.svelte"]
     }
+  },
+  "tabs": {
+    "default": {
+      "files": ["defaultTabs.svelte"],
+      "entry": "defaultTabs.svelte"
+    }
   }
 }
diff --git a/packages/ui/registry/components/button/asyncButton.svelte b/packages/ui/registry/components/button/asyncButton.svelte
@@ -11,7 +11,7 @@
   /**@type {import("../../types").asyncButtonAction} This needs to be an async function that handles the button click*/
   export let action;
 
-  /**@type {"passive"|"primary"|"secondary"|"danger"}  Dictates the color based on the type*/
+  /**@type {"disabled"|"passive"|"primary"|"secondary"|"danger"}  Dictates the color based on the type*/
   export let type = "primary";
 
   const dispatcher = createEventDispatcher();
@@ -37,7 +37,12 @@
   }
 </script>
 
-<button class:loading={state == "loading"} class={type} on:click={handleClick}>
+<button
+  disabled={type == "disabled"}
+  class:loading={state == "loading"}
+  class={type}
+  on:click={handleClick}
+>
   {#if state == "loading"}
     <LoadingIcon />
   {:else}
@@ -47,13 +52,17 @@
 </button>
 
 <style>
-  .passive {
-    --bg: var(--foregroundColor);
-  }
-  :is(.primary, .secondary, .danger, .secondary, .passive) {
+  :is(.disabled, .primary, .secondary, .danger, .secondary, .passive) {
     --text: var(--backgroundColor);
     --icon: var(--backgroundColor);
   }
+  .disabled {
+    --bg: var(--mutedColor);
+    cursor: not-allowed;
+  }
+  .passive {
+    --bg: var(--foregroundColor);
+  }
   .primary {
     --bg: var(--primaryColor);
   }
@@ -70,8 +79,8 @@
     justify-content: center;
     gap: 0.25rem;
     width: fit-content;
-    padding-inline: var(--padding-inline, 1.5rem);
-    padding-block: var(--padding-block, 0.75rem);
+    padding-inline: var(--padding-inline, 1rem);
+    padding-block: var(--padding-block, 0.5rem);
     cursor: pointer;
     outline: none;
     border: none;

diff --git a/packages/ui/registry/components/button/syncButton.svelte b/packages/ui/registry/components/button/syncButton.svelte
@@ -3,23 +3,27 @@
   export let text = "button";
   /**@type {import("../../types").iconComponent|null} icon is optional for the button */
   export let icon = null;
-  /**@type {"passive"|"primary"|"secondary"|"danger"}  Dictates the color based on the type*/
+  /**@type {"disabled"|"passive"|"primary"|"secondary"|"danger"}  Dictates the color based on the type*/
   export let type = "primary";
 </script>
 
-<button on:click class={type}>
+<button on:click class={type} disabled={type == "disabled"}>
   <svelte:component this={icon} />
   <span>{text}</span>
 </button>
 
 <style>
-  .passive {
-    --bg: var(--foregroundColor);
-  }
-  :is(.primary, .secondary, .danger, .secondary, .passive) {
+  :is(.disabled, .primary, .secondary, .danger, .secondary, .passive) {
     --text: var(--backgroundColor);
     --icon: var(--backgroundColor);
   }
+  .disabled {
+    --bg: var(--mutedColor);
+    cursor: not-allowed;
+  }
+  .passive {
+    --bg: var(--foregroundColor);
+  }
   .primary {
     --bg: var(--primaryColor);
   }
@@ -36,8 +40,8 @@
     justify-content: center;
     gap: 0.25rem;
     width: fit-content;
-    padding-inline: var(--padding-inline, 1.5rem);
-    padding-block: var(--padding-block, 0.75rem);
+    padding-inline: var(--padding-inline, 1rem);
+    padding-block: var(--padding-block, 0.5rem);
     cursor: pointer;
     outline: none;
     border: none;

diff --git a/packages/ui/registry/components/code/code.svelte b/packages/ui/registry/components/code/code.svelte
@@ -81,7 +81,7 @@
   }
   .code :global(::-webkit-scrollbar-track) {
     border-radius: 0;
-    background: color-mix(in srgb, var(--foregroundColor) 40%, transparent 60%);
+    background: color-mix(in srgb, var(--mutedColor) 40%, transparent 60%);
   }
 
   .code :global(::-webkit-scrollbar-thumb) {

diff --git a/packages/ui/registry/components/input/reactiveInput.svelte b/packages/ui/registry/components/input/reactiveInput.svelte
@@ -19,7 +19,7 @@
   };
 </script>
 
-<div class="input-container {status.state}">
+<div class="input-container {status.state}" class:disabled>
   <label for="input">{label}</label>
   <input
     id="input"
@@ -96,8 +96,11 @@
   .input::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
-  .input:disabled {
-    border-color: (--mutedColor);
+  .disabled .input {
+    border-color: var(--mutedColor);
+    color: var(--mutedColor);
+  }
+  .disabled label {
     color: var(--mutedColor);
   }
 

diff --git a/packages/ui/registry/components/input/staticInput.svelte b/packages/ui/registry/components/input/staticInput.svelte
@@ -22,7 +22,7 @@
   }
 </script>
 
-<div class="input-container">
+<div class="input-container" class:disabled>
   <label for="input">{label}</label>
   <input
     id="input"
@@ -79,8 +79,11 @@
   .input::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
-  .input:disabled {
+  .disabled .input {
     border-color: var(--mutedColor);
     color: var(--mutedColor);
   }
+  .disabled label {
+    color: var(--mutedColor);
+  }
 </style>
diff --git a/packages/ui/registry/components/loading/skeletonLoading.svelte b/packages/ui/registry/components/loading/skeletonLoading.svelte
@@ -5,13 +5,16 @@
     width: var(--width, 3rem);
     height: var(--height, 3rem);
     border-radius: var(--border-radius);
-    background-color: var(--mutedColor);
+    background-color: color-mix(
+      in srgb,
+      var(--mutedColor) 70%,
+      transparent 30%
+    );
     animation: fade 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    opacity: 0.8;
   }
   @keyframes fade {
     50% {
-      opacity: 0.45;
+      opacity: 0.38;
     }
   }
 </style>