fix(ui): input styling

telekom · May 30, 2024 · abe3321 · abe3321
1 parent 57fb9ba
commit abe3321
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 5 deletions.
diff --git a/.changeset/fifty-lions-yawn.md b/.changeset/fifty-lions-yawn.md
@@ -0,0 +1,5 @@
+---
+"@pixelshades/styles": patch
+---
+
+fix: input styling
diff --git a/apps/docs/src/examples/checkbox/preview.tsx b/apps/docs/src/examples/checkbox/preview.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Form } from "@pixelshades/ui/components"
+import { Checkbox } from "@pixelshades/ui/components"
 
 export default function Example() {
 	return <Checkbox value="push" label="Label" description="Description" helperText="Helper Text" tooltip="Tooltip" />

diff --git a/apps/docs/src/examples/index.ts b/apps/docs/src/examples/index.ts
@@ -519,7 +519,7 @@ export function Example() {
   },
   "checkbox/preview": {
 	  component: lazy(() => import("~/examples/checkbox/preview.tsx")),
-	  code: `import { Button, Checkbox, Form } from "@pixelshades/ui/components"
+	  code: `import { Checkbox } from "@pixelshades/ui/components"
 
 export function Example() {
 	return <Checkbox value="push" label="Label" description="Description" helperText="Helper Text" tooltip="Tooltip" />

diff --git a/apps/docs/src/index.css b/apps/docs/src/index.css
@@ -6,6 +6,17 @@
 
 
 
+@layer base {
+    * {
+      @apply border-border ring-ring outline-ring;
+    }
+    body {
+      @apply bg-background text-foreground;
+      font-feature-settings: "rlig" 1, "calt" 1;
+    }
+}
+
+
 [data-rehype-pretty-code-figure] code {
   @apply text-sm !leading-loose md:text-base;
 }

diff --git a/packages/styles/src/components/checkbox/variants.ts b/packages/styles/src/components/checkbox/variants.ts
@@ -7,7 +7,7 @@ import { focusRing } from "../../utils"
 
 export const checkboxVariant = tv({
 	slots: {
-		root: "flex justify-start gap-md py-sm [&>div]:ring-focus [&>div]:ring-offset-2 [&>div]:ring-offset-ring [&>div]:data-[selected]:border-primary [&>div]:data-[selected]:bg-primary [&>div]:data-[focus-visible]:ring-2",
+		root: "flex justify-start gap-md py-sm [&>div]:ring-focus [&>div]:ring-offset-2 [&>div]:ring-offset-ring [&>div]:data-[selected]:border-primary [&>div]:data-[selected]:bg-primary [&>div]:data-[selected]:text-primary-foreground [&>div]:data-[focus-visible]:ring-2",
 		box: "flex items-center justify-center rounded-lg border border-border transition-all duration-200",
 	},
 	variants: {

diff --git a/packages/styles/src/components/input/variants.ts b/packages/styles/src/components/input/variants.ts
@@ -13,7 +13,7 @@ export const inputVariants = tv({
 		"file:border-0 file:bg-transparent file:text-sm file:font-medium",
 		"placeholder:text-subtle-foreground",
 		"disabled:cursor-not-allowed disabled:opacity-50",
-		"data-[invalid]:border-destructive data-[invalid]:text-destructive data-[invalid]:bg-destructive/10",
+		"data-[invalid]:border-destructive-border hover:data-[invalid]:border-destructive-border-hover data-[invalid]:text-destructive data-[invalid]:bg-destructive-subtle dark:data-[invalid]:bg-destructive-subtle/40",
 	],
 	defaultVariants: { size: "md", focusRing: true },
 	variants: {

diff --git a/packages/styles/src/components/tabs/variants.tsx b/packages/styles/src/components/tabs/variants.tsx
@@ -26,7 +26,9 @@ export const tabsVariants = tv({
 			line: {
 				root: "",
 				list: "",
-				tab: "box-border border-primary aria-selected:rounded-none outline-none aria-selected:border-b-2 aria-selected:hover:bg-transparent data-[hovered]:bg-subtle",
+				tab: [
+					"box-border border-primary-border px-xl pb-xl aria-selected:rounded-none outline-none aria-selected:border-b-2 aria-selected:hover:bg-transparent data-[hovered]:bg-subtle",
+				],
 			},
 			pill: {
 				root: "",