style(storybook): refine form component stories

src/components/input.stories.tsx

@@ -9,8 +9,9 @@ import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-pag
 // separate Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts).
 //
 // Label, Required star and Helper/Error message are not part of the Input component. Specimen below composes them with
-// plain elements and shadcn Token utilities, the way a consumer would: Label 14/20/500 and Helper 12/18/400 in the
-// secondary text color, Error message 11/18 in the destructive color, field gap 8.
+// plain elements and shadcn Token utilities, the way a consumer would: Label 14/20/500 in the default text color
+// (Disabled keeps the secondary color at 0.6) and Helper 12/18/400 in the secondary text color, Error message 11/18
+// in the destructive color, field gap 8.
 
 function Specimen({
   label = "Project name",
@@ -25,7 +26,7 @@ function Specimen({
   const messageId = `${fieldId}-message`
   return (
     <div className="grid gap-2">
-      <label htmlFor={fieldId} className={`justify-self-start text-sm font-medium text-muted-foreground${input.disabled ? " opacity-60" : ""}`}>
+      <label htmlFor={fieldId} className={`justify-self-start text-sm font-medium ${input.disabled ? "text-muted-foreground opacity-60" : "text-foreground"}`}>
         {label}
         {required ? (
           <span aria-hidden="true" className="text-destructive">