fix: neutral color mappings

telekom · May 30, 2024 · 11edbff · 11edbff
1 parent b9df520
commit 11edbff
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 25 deletions.
diff --git a/.changeset/smart-dolls-matter.md b/.changeset/smart-dolls-matter.md
@@ -0,0 +1,6 @@
+---
+"@pixelshades/styles": minor
+"@pixelshades/ui": minor
+---
+
+fix: neutral colors
diff --git a/apps/docs/src/lib/colors/tailwind-themes.ts b/apps/docs/src/lib/colors/tailwind-themes.ts
@@ -33,7 +33,7 @@ export function generateScale(baseColor: string, shades: number[]): ColorScale {
 	const newShades: ColorScale = {}
 	for (const shade of shades) {
 		const tempColor = new Color(baseColorObj)
-		const adjustedColor = new Color(tempColor.darken((shade - 500) / 700))
+		const adjustedColor = new Color(tempColor.darken((shade - 500) / 1000))
 		newShades[shade] = adjustedColor.to("hsl").toString({ format: "hsl" })
 	}
 

diff --git a/apps/docs/src/routes/themes.tsx b/apps/docs/src/routes/themes.tsx
@@ -86,11 +86,13 @@ function Index() {
 		neutral: neutralColor.value,
 	})
 
-	const scale = generateScale(indigo[800], [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950])
-	// console.info(invertValues(extendColorScale(neutral, [850, 1000])))
-	// console.info(transformTailwindColor("neutral", invertValues(extendColorScale(neutral, [850, 1000]))), "DARK")
+	const extendedBlue = extendColorScale(blue, [850, 1000])
+	const scale = invertValues(extendColorScale(rose, [850, 1000]))
+	const scale2 = rose
 
-	// console.log(exportTheme(theme))
+	// console.info(transformTailwindColor("", invertValues(extendColorScale(neutral, [850, 1000]))), "DARK")
+
+	console.log(transformTailwindColor("warning", scale))
 
 	navigator.clipboard.writeText(exportTheme(theme))
 
@@ -100,6 +102,26 @@ function Index() {
 
 			<div>
 				{Object.entries(scale).map(([key, value]) => (
+					<div key={key} className="flex items-center gap-md px-md py-sm" style={{ backgroundColor: value }}>
+						<div className="w-[100px]">{key}</div>
+						<div className="w-[200px]">{value}</div>
+						<div>{new Color("hsl(0 0% 3.9216%)").contrastWCAG21(new Color(value).lighten(0.0))}</div>
+					</div>
+				))}
+			</div>
+
+			<div>
+				{Object.entries(scale2).map(([key, value]) => (
+					<div key={key} className="flex items-center gap-md px-md py-sm" style={{ backgroundColor: value }}>
+						<div className="w-[100px]">{key}</div>
+						<div className="w-[200px]">{value}</div>
+						<div>{new Color("hsl(0 0% 100%)").contrastWCAG21(new Color(value))}</div>
+					</div>
+				))}
+			</div>
+
+			<div>
+				{Object.entries(extendedBlue).map(([key, value]) => (
 					<div key={key} className="flex items-center gap-md" style={{ backgroundColor: value }}>
 						<div className="w-[100px]">{key}</div>
 						<div className="w-[200px]">{value}</div>

diff --git a/packages/styles/src/components/button/variants.ts b/packages/styles/src/components/button/variants.ts
@@ -71,23 +71,23 @@ export const buttonVariants = tv({
 			variant: "outline",
 			color: "primary",
 			className: [
-				"border-primary-border text-primary",
+				"border-primary-border text-primary-background-foreground",
 				"hover:bg-primary-background-hover hover:text-primary-background-foreground-hover hover:border-primary-border-hover",
 			],
 		},
 		{
 			variant: "outline",
 			color: "destructive",
 			className: [
-				"border-destructive-border text-destructive",
+				"border-destructive-border text-destructive-background-foreground",
 				"hover:bg-destructive-background-hover hover:text-destructive-background-foreground-hover hover:border-destructive-border-hover",
 			],
 		},
 		{
 			variant: "outline",
 			color: "warning",
 			className: [
-				"border-warning-border text-warning",
+				"border-warning-border text-info-background-foreground",
 				"hover:bg-warning-background-hover hover:text-warning-background-foreground-hover hover:border-warning-border-hover",
 			],
 		},

diff --git a/packages/ui/src/tw-plugin/base.ts b/packages/ui/src/tw-plugin/base.ts
@@ -24,6 +24,7 @@ const getLayoutTokens = () => {
 }
 
 const getColorTokens = (color: string) => {
+	const isNeutral = color === "neutral"
 	return {
 		[`--${color}-solid`]: `var(--${color}-scale-600)`,
 		[`--${color}-solid-hover`]: `var(--${color}-scale-700)`,
@@ -50,14 +51,14 @@ const getColorTokens = (color: string) => {
 		[`--${color}-subtle-active`]: `var(--${color}-scale-200)`,
 		[`--${color}-subtle-disabled`]: "var(--neutral-scale-50)",
 
-		[`--${color}-subtle-foreground`]: `var(--${color}-scale-700)`,
-		[`--${color}-subtle-foreground-hover`]: `var(--${color}-scale-800)`,
-		[`--${color}-subtle-foreground-active`]: `var(--${color}-scale-800)`,
+		[`--${color}-subtle-foreground`]: `var(--${color}-scale-${isNeutral ? "900" : "700"})`,
+		[`--${color}-subtle-foreground-hover`]: `var(--${color}-scale-${isNeutral ? "950" : "900"})`,
+		[`--${color}-subtle-foreground-active`]: `var(--${color}-scale-${isNeutral ? "900" : "700"})`,
 		[`--${color}-subtle-foreground-disabled`]: "var(--neutral-scale-400)",
 
-		[`--${color}-border`]: `var(--${color}-scale-600)`,
-		[`--${color}-border-hover`]: `var(--${color}-scale-800)`,
-		[`--${color}-border-active`]: `var(--${color}-scale-900)`,
+		[`--${color}-border`]: `var(--${color}-scale-${isNeutral ? "300" : "600"})`,
+		[`--${color}-border-hover`]: `var(--${color}-scale-${isNeutral ? "500" : "800"})`,
+		[`--${color}-border-active`]: `var(--${color}-scale-${isNeutral ? "500" : "800"})`,
 		[`--${color}-border-disabled`]: "var(--neutral-scale-300)",
 	}
 }

diff --git a/packages/ui/src/tw-plugin/const.ts b/packages/ui/src/tw-plugin/const.ts
@@ -146,16 +146,16 @@ export const defaultDarkModeColorTokens = {
 	"--warning-scale-50": "20.909 91.667% 14.118%",
 	"--warning-contrast": "0 0 100%",
 
-	"--destructive-scale-950": "355.71 100% 97.255%",
-	"--destructive-scale-900": "355.56 100% 94.706%",
-	"--destructive-scale-800": "352.65 96.078% 90%",
-	"--destructive-scale-700": "352.58 95.699% 81.765%",
-	"--destructive-scale-600": "351.3 94.521% 71.373%",
-	"--destructive-scale-500": "349.72 89.163% 60.196%",
-	"--destructive-scale-400": "346.84 77.165% 49.804%",
-	"--destructive-scale-300": "345.35 82.692% 40.784%",
-	"--destructive-scale-200": "343.4 79.661% 34.706%",
-	"--destructive-scale-100": "341.54 75.484% 30.392%",
-	"--destructive-scale-50": "343.1 87.654% 15.882%",
+	"--destructive-scale-50": "356.36 100% 6.4706%",
+	"--destructive-scale-100": "347.1 100% 20.98%",
+	"--destructive-scale-200": "343.1 87.654% 15.882%",
+	"--destructive-scale-300": "341.54 75.484% 30.392%",
+	"--destructive-scale-400": "343.4 79.661% 34.706%",
+	"--destructive-scale-500": "345.35 82.692% 40.784%",
+	"--destructive-scale-600": "346.84 77.165% 49.804%",
+	"--destructive-scale-700": "349.72 89.163% 60.196%",
+	"--destructive-scale-800": "351.3 94.521% 71.373%",
+	"--destructive-scale-900": "352.58 95.699% 81.765%",
+	"--destructive-scale-950": "352.65 96.078% 90%",
 	"--destructive-contrast": "0 0 100%",
 }