fix: Helper color

shinokada · shinokada · commit 4bcf3008f821 · 2024-08-17T16:47:18.000+02:00
diff --git a/.changeset/brown-dancers-walk.md b/.changeset/brown-dancers-walk.md
@@ -0,0 +1,5 @@
+---
+'svelte-5-ui-lib': patch
+---
+
+fix: Helper update
diff --git a/.changeset/honest-ladybugs-lie.md b/.changeset/honest-ladybugs-lie.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.8
+
+### Patch Changes
+
+- feat: variants to Label and Helper ([`e9a9d03d673c7611863f4cce0cfeb1391de3b550`](https://github.com/shinokada/svelte-5-ui-lib/commit/e9a9d03d673c7611863f4cce0cfeb1391de3b550))
+
 ## 0.8.7
 
 ### Patch Changes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-5-ui-lib",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "A UI library for Svelte 5.",
   "license": "MIT",
   "main": "dist/index.js",
diff --git a/src/lib/forms/floating-label-input/FloatingLabelInput.svelte b/src/lib/forms/floating-label-input/FloatingLabelInput.svelte
@@ -9,7 +9,7 @@
     aria_describedby,
     style = 'standard',
     size = 'default',
-    color = 'gray',
+    color = 'default',
     divClass,
     inputClass,
     labelClass,
diff --git a/src/lib/forms/floating-label-input/index.ts b/src/lib/forms/floating-label-input/index.ts
@@ -10,7 +10,7 @@ interface FloatingLabelInputProps extends Omit<HTMLInputAttributes, 'size'> {
   aria_describedby?: string | undefined | null;
   style?: 'filled' | 'outlined' | 'standard';
   size?: 'small' | 'default';
-  color?: ColorName;
+  color?: ColorName | 'default';
   divClass?: string | undefined | null;
   inputClass?: string | undefined | null;
   labelClass?: string | undefined | null;
diff --git a/src/lib/forms/floating-label-input/theme.ts b/src/lib/forms/floating-label-input/theme.ts
@@ -34,106 +34,111 @@ export const floatingLabelInput = tv({
       default: {}
     },
     color: {
+      default: {
+        input:
+          'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600',
+        label: 'text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500'
+      },
       primary: {
         input:
-          'border-primary-600 dark:border-primary-500 dark:focus:border-primary-500 focus:border-primary-600',
-        label: 'text-primary-600 dark:text-primary-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600',
+        label: 'text-primary-500 dark:text-primary-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500'
       },
       secondary: {
         input:
-          'border-secondary-600 dark:border-secondary-500 dark:focus:border-secondary-500 focus:border-secondary-600',
-        label: 'text-secondary-600 dark:text-secondary-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-secondary-500 focus:border-secondary-600',
+        label: 'text-secondary-500 dark:text-secondary-400 peer-focus:text-secondary-600 peer-focus:dark:text-secondary-500'
       },
       gray: {
         input:
-          'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600',
+          'border-gray-300 dark:border-gray-600 dark:focus:border-gray-500 focus:border-gray-600',
         label:
-          'text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500'
+          'text-gray-500 dark:text-gray-400 peer-focus:text-gray-600 peer-focus:dark:text-gray-500'
       },
       red: {
         input:
-          'border-red-600 dark:border-red-500 dark:focus:border-red-500 focus:border-red-600',
-        label: 'text-red-600 dark:text-red-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-red-500 focus:border-red-600',
+        label: 'text-red-500 dark:text-red-400 peer-focus:text-red-600 peer-focus:dark:text-red-500'
       },
       orange: {
         input:
-          'border-orange-600 dark:border-orange-500 dark:focus:border-orange-500 focus:border-orange-600',
-        label: 'text-orange-600 dark:text-orange-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-orange-500 focus:border-orange-600',
+        label: 'text-orange-500 dark:text-orange-400 peer-focus:text-orange-600 peer-focus:dark:text-orange-500'
       },
       amber: {
         input:
-          'border-amber-600 dark:border-amber-500 dark:focus:border-amber-500 focus:border-amber-600',
-        label: 'text-amber-600 dark:text-amber-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-amber-500 focus:border-amber-600',
+        label: 'text-amber-500 dark:text-amber-400 peer-focus:text-amber-600 peer-focus:dark:text-amber-500'
       },
       yellow: {
         input:
-          'border-yellow-600 dark:border-yellow-500 dark:focus:border-yellow-500 focus:border-yellow-600',
-        label: 'text-yellow-600 dark:text-yellow-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-yellow-500 focus:border-yellow-600',
+        label: 'text-yellow-500 dark:text-yellow-400 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500'
       },
       lime: {
         input:
-          'border-lime-600 dark:border-lime-500 dark:focus:border-lime-500 focus:border-lime-600',
-        label: 'text-lime-600 dark:text-lime-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-lime-500 focus:border-lime-600',
+        label: 'text-lime-500 dark:text-lime-400 peer-focus:text-lime-600 peer-focus:dark:text-lime-500'
       },
       green: {
         input:
-          'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
-        label: 'text-green-600 dark:text-green-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-green-500 focus:border-green-600',
+        label: 'text-green-500 dark:text-green-400 peer-focus:text-green-600 peer-focus:dark:text-green-500'
       },
       emerald: {
         input:
-          'border-emerald-600 dark:border-emerald-500 dark:focus:border-emerald-500 focus:border-emerald-600',
-        label: 'text-emerald-600 dark:text-emerald-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-emerald-500 focus:border-emerald-600',
+        label: 'text-emerald-500 dark:text-emerald-400 peer-focus:text-emerald-600 peer-focus:dark:text-emerald-500'
       },
       teal: {
         input:
-          'border-teal-600 dark:border-teal-500 dark:focus:border-teal-500 focus:border-teal-600',
-        label: 'text-teal-600 dark:text-teal-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-teal-500 focus:border-teal-600',
+        label: 'text-teal-500 dark:text-teal-400 peer-focus:text-teal-600 peer-focus:dark:text-teal-500'
       },
       cyan: {
         input:
-          'border-cyan-600 dark:border-cyan-500 dark:focus:border-cyan-500 focus:border-cyan-600',
-        label: 'text-cyan-600 dark:text-cyan-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-cyan-500 focus:border-cyan-600',
+        label: 'text-cyan-500 dark:text-cyan-400 peer-focus:text-cyan-600 peer-focus:dark:text-cyan-500'
       },
       sky: {
         input:
-          'border-sky-600 dark:border-sky-500 dark:focus:border-sky-500 focus:border-sky-600',
-        label: 'text-sky-600 dark:text-sky-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-sky-500 focus:border-sky-600',
+        label: 'text-sky-500 dark:text-sky-400 peer-focus:text-sky-600 peer-focus:dark:text-sky-500'
       },
       blue: {
         input:
-          'border-blue-600 dark:border-blue-500 dark:focus:border-blue-500 focus:border-blue-600',
-        label: 'text-blue-600 dark:text-blue-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
+        label: 'text-blue-500 dark:text-blue-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500'
       },
       indigo: {
         input:
-          'border-indigo-600 dark:border-indigo-500 dark:focus:border-indigo-500 focus:border-indigo-600',
-        label: 'text-indigo-600 dark:text-indigo-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-indigo-500 focus:border-indigo-600',
+        label: 'text-indigo-500 dark:text-indigo-400 peer-focus:text-indigo-600 peer-focus:dark:text-indigo-500'
       },
       violet: {
         input:
-          'border-violet-600 dark:border-violet-500 dark:focus:border-violet-500 focus:border-violet-600',
-        label: 'text-violet-600 dark:text-violet-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-violet-500 focus:border-violet-600',
+        label: 'text-violet-600 dark:text-violet-500 peer-focus:text-violet-600 peer-focus:dark:text-violet-500'
       },
       purple: {
         input:
-          'border-purple-600 dark:border-purple-500 dark:focus:border-purple-500 focus:border-purple-600',
-        label: 'text-purple-600 dark:text-purple-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-purple-500 focus:border-purple-600',
+        label: 'text-purple-600 dark:text-purple-500 peer-focus:text-purple-600 peer-focus:dark:text-purple-500'
       },
       fuchsia: {
         input:
-          'border-fuchsia-600 dark:border-fuchsia-500 dark:focus:border-fuchsia-500 focus:border-fuchsia-600',
-        label: 'text-fuchsia-600 dark:text-fuchsia-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-fuchsia-500 focus:border-fuchsia-600',
+        label: 'text-fuchsia-600 dark:text-fuchsia-500 peer-focus:text-fuchsia-600 peer-focus:dark:text-fuchsia-500'
       },
       pink: {
         input:
-          'border-pink-600 dark:border-pink-500 dark:focus:border-pink-500 focus:border-pink-600',
-        label: 'text-pink-600 dark:text-pink-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-pink-500 focus:border-pink-600',
+        label: 'text-pink-600 dark:text-pink-500 peer-focus:text-pink-600 peer-focus:dark:text-pink-500'
       },
       rose: {
         input:
-          'border-rose-600 dark:border-rose-500 dark:focus:border-rose-500 focus:border-rose-600',
-        label: 'text-rose-600 dark:text-rose-500'
+          'border-gray-300 dark:border-gray-600 dark:focus:border-rose-500 focus:border-rose-600',
+        label: 'text-rose-600 dark:text-rose-500 peer-focus:text-rose-600 peer-focus:dark:text-rose-500'
       }
     }
   },
diff --git a/src/lib/forms/helper/Helper.svelte b/src/lib/forms/helper/Helper.svelte
@@ -11,10 +11,7 @@
   const base = $derived(helper({ color, className }));
 </script>
 
-<p
-  {...attributes}
-  class={base}
->
+<p {...attributes} class={base}>
   {@render children()}
 </p>
 
diff --git a/src/lib/forms/helper/theme.ts b/src/lib/forms/helper/theme.ts
@@ -5,26 +5,26 @@ export const helper = tv({
   variants: {
     color: {
       disabled: 'text-gray-400 dark:text-gray-500',
-      primary: 'text-primary-700 dark:text-primary-500',
-      secondary: 'text-secondary-700 dark:text-secondary-500',
-      green: 'text-green-700 dark:text-green-500',
-      emerald: 'text-emerald-700 dark:text-emerald-500',
-      red: 'text-red-700 dark:text-red-500',
-      blue: 'text-blue-700 dark:text-blue-500',
-      yellow: 'text-yellow-700 dark:text-yellow-500',
-      orange: 'text-orange-700 dark:text-orange-500',
-      gray: 'text-gray-700 dark:text-gray-500',
-      teal: 'text-teal-700 dark:text-teal-500',
-      cyan: 'text-cyan-700 dark:text-cyan-500',
-      sky: 'text-sky-700 dark:text-sky-500',
-      indigo: 'text-indigo-700 dark:text-indigo-500',
-      lime: 'text-lime-700 dark:text-lime-500',
-      amber: 'text-amber-700 dark:text-amber-500',
-      violet: 'text-violet-700 dark:text-violet-500',
-      purple: 'text-purple-700 dark:text-purple-500',
-      fuchsia: 'text-fuchsia-700 dark:text-fuchsia-500',
-      pink: 'text-pink-700 dark:text-pink-500',
-      rose: 'text-rose-700 dark:text-rose-500'
+      primary: 'text-primary-500 dark:text-primary-400',
+      secondary: 'text-secondary-500 dark:text-secondary-400',
+      green: 'text-green-500 dark:text-green-400',
+      emerald: 'text-emerald-500 dark:text-emerald-400',
+      red: 'text-red-500 dark:text-red-400',
+      blue: 'text-blue-500 dark:text-blue-400',
+      yellow: 'text-yellow-500 dark:text-yellow-400',
+      orange: 'text-orange-500 dark:text-orange-400',
+      gray: 'text-gray-500 dark:text-gray-400',
+      teal: 'text-teal-500 dark:text-teal-400',
+      cyan: 'text-cyan-500 dark:text-cyan-400',
+      sky: 'text-sky-500 dark:text-sky-400',
+      indigo: 'text-indigo-500 dark:text-indigo-400',
+      lime: 'text-lime-500 dark:text-lime-400',
+      amber: 'text-amber-500 dark:text-amber-400',
+      violet: 'text-violet-500 dark:text-violet-400',
+      purple: 'text-purple-500 dark:text-purple-400',
+      fuchsia: 'text-fuchsia-500 dark:text-fuchsia-400',
+      pink: 'text-pink-500 dark:text-pink-400',
+      rose: 'text-rose-500 dark:text-rose-400'
     }
   }
-})
+});
diff --git a/src/lib/forms/input/Input.svelte b/src/lib/forms/input/Input.svelte
@@ -76,9 +76,9 @@
 @prop right
 @prop value = $bindable()
 @prop size
-@prop defaultClass = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right'
-@prop color = 'base'
-@prop floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400'
+@prop defaultClass
+@prop color = 'default'
+@prop floatClass
 @prop class: className
 @prop classLeft
 @prop classRight
diff --git a/src/lib/forms/input/theme.ts b/src/lib/forms/input/theme.ts
@@ -102,7 +102,7 @@ export const input = tv({
       rose: {
         input:
           'border border-rose-500 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-500 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-gray-700'
-      },
+      }
     },
     group: {
       false: { input: 'rounded-lg' },
diff --git a/src/lib/forms/label/theme.ts b/src/lib/forms/label/theme.ts
@@ -27,4 +27,4 @@ export const label = tv({
       rose: 'text-rose-700 dark:text-rose-500'
     }
   }
-})
+});
diff --git a/src/routes/forms/floating-label/+page.svelte b/src/routes/forms/floating-label/+page.svelte
@@ -21,6 +21,7 @@
 
   const styles = ['filled', 'outlined', 'standard'];
   let style: FloatingLabelInput['style'] = $state('standard');
+  let style2: FloatingLabelInput['style'] = $state('standard');
 
   const sizes = ['small', 'default'];
   let floatingSize: FloatingLabelInput['size'] = $state('default');
@@ -30,7 +31,8 @@
   };
   // const colors = [ 'green', 'red']
   const colors = Object.keys(floatingLabelInput.variants.color);
-  let floatingColor: FloatingLabelInput['color'] = $state('primary');
+  let floatingColor: FloatingLabelInput['color'] = $state('default');
+  let helperColor: FloatingLabelInput['color'] = $state('default');
 </script>
 
 <H1>Floating label</H1>
@@ -49,7 +51,7 @@
     {#each styles as option}
       <Radio
         labelClass="w-24 my-1"
-        name="style"
+        name="style1"
         bind:group={style}
         value={option}>{option}</Radio
       >
@@ -61,7 +63,7 @@
 <H2>Disabled state</H2>
 <CodeWrapper>
   <div class="h-16">
-    <FloatingLabelInput disabled {style} id="floating_filled" type="text"
+    <FloatingLabelInput disabled style={style2} id="floating_filled" type="text"
       >Floating {style}</FloatingLabelInput
     >
   </div>
@@ -71,7 +73,7 @@
       <Radio
         labelClass="w-24 my-1"
         name="disabled_style"
-        bind:group={style}
+        bind:group={style2}
         value={option}>{option}</Radio
       >
     {/each}
@@ -160,17 +162,26 @@
 <CodeWrapper>
   <FloatingLabelInput
     style="filled"
+    color={helperColor}
     id="floating_helper"
     aria_describedby="floating_helper_text"
     type="text">Floating helper</FloatingLabelInput
   >
-  <Helper class="pt-2">
-    Remember, contributions to this topic should follow our <a
-      href="/"
-      class="text-primary-600 hover:underline dark:text-primary-500"
-    >
+  <Helper class="pt-2" color={helperColor}>
+    Remember, contributions to this topic should follow our <a href="/">
       Community Guidelines
     </a>.
   </Helper>
+  <div class="flex flex-wrap space-x-4">
+    <Label class="mb-4 w-full font-bold">Color</Label>
+    {#each colors as colorOption}
+      <Radio
+        labelClass="w-24 my-1"
+        name="floating_color"
+        bind:group={helperColor}
+        value={colorOption}>{colorOption}</Radio
+      >
+    {/each}
+  </div>
 </CodeWrapper>
 <HighlightCompo code={modules['./md/helper-text.md'] as string} />
diff --git a/src/routes/forms/input-field/+page.svelte b/src/routes/forms/input-field/+page.svelte
@@ -11,7 +11,8 @@
   });
 
   import {
-    Input, input,
+    Input,
+    input,
     Radio,
     Label,
     Helper,
@@ -181,7 +182,9 @@
 
 <CodeWrapper>
   <div class="mb-6">
-    <Label for="color-example" color={inputColor} class="mb-2 block">Your name</Label>
+    <Label for="color-example" color={inputColor} class="mb-2 block"
+      >Your name</Label
+    >
     <Input id="color-example" color={inputColor} placeholder="Input" />
     <Helper class="mt-2" color={inputColor}>
       <span class="font-medium">Well done!</span>
@@ -201,8 +204,6 @@
   </div>
 </CodeWrapper>
 
-
-
 <H2>Input with icon</H2>
 
 <CodeWrapper class="space-y-6">

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte-5-ui-lib': patch
 +---
++
 +fix: Helper update
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "svelte-5-ui-lib",`
`3`		`- "version": "0.8.7",`
	`3`	`+ "version": "0.8.8",`
`4`	`4`	`"description": "A UI library for Svelte 5.",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"main": "dist/index.js",`