Merge pull request #89 from aversini/fix-CSS-variables-should-allow-s…

…imple-HEX-value fix: CSS variables should allow simple HEX value
versini-org · Nov 26, 2023 · 48d8870 · 48d8870
2 parents 0263924 + 88a49f5
commit 48d8870
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/packages/ui-components/lib/twPlugin.js b/packages/ui-components/lib/twPlugin.js
@@ -9,7 +9,7 @@ const parse = converter("rgb");
  * exposed in our tokens. It creates an entry for each color
  * in the tokens, with the following format:
  *
- * rgb(var(--av-<color-name>, <fallback-value>) / <alpha-value>)
+ * var(--av-<color-name>, rgb(<fallback-value>) / <alpha-value>))
  */
 export const dynamicColors = () => {
 	const result = {};
@@ -18,7 +18,7 @@ export const dynamicColors = () => {
 		const variable = `--av-${name}`;
 		const fallbackValue = `${rgb.r * 255} ${rgb.g * 255} ${rgb.b * 255}`;
 
-		result[name] = `rgb(var(${variable}, ${fallbackValue}) / <alpha-value>)`;
+		result[name] = `var(${variable}, rgb(${fallbackValue} / <alpha-value>))`;
 	});
 
 	return result;
@@ -52,8 +52,6 @@ export const dynamicColorsClasses = () => {
 		}
 		if (name.startsWith("border-")) {
 			result.push(`border-${name}`);
-			result.push(`border-${name}/0`);
-			result.push(`border-${name}/100`);
 		}
 		if (name.startsWith("focus-")) {
 			result.push(`ring-${name}`);

diff --git a/packages/ui-components/src/components/Button/__tests__/Button.test.tsx b/packages/ui-components/src/components/Button/__tests__/Button.test.tsx
@@ -33,7 +33,7 @@ describe("Button modifiers", () => {
 			"focus:ring-focus-light",
 			"focus:ring-offset-0",
 			"border-2",
-			"border-border-dark/100",
+			"border-border-dark",
 		]);
 	});
 
@@ -112,7 +112,8 @@ describe("Button modifiers", () => {
 	it("should render a button with no borders", async () => {
 		render(<Button noBorder>hello</Button>);
 		const button = await screen.findByRole("button");
-		expect(button.className).toContain("border-border-dark/0");
+		expect(button.className).not.toContain("border-border-dark");
+		expect(button.className).toContain("border-transparent");
 	});
 
 	it("should render a raw button with no styling", async () => {

diff --git a/packages/ui-components/src/components/Button/utilities.ts b/packages/ui-components/src/components/Button/utilities.ts
@@ -89,8 +89,10 @@ const getButtonBorderClasses = ({
 	kind: string;
 	noBorder: boolean;
 }) => {
-	const borderOpacity = noBorder ? "0" : "100";
-	return `border-2 border-border-${kind}/${borderOpacity}`;
+	return clsx("border-2", {
+		[`border-border-${kind}`]: !noBorder,
+		"border-transparent": noBorder,
+	});
 };
 
 const getButtonFocusClasses = ({ focus }: { focus: string }) => {