Merge pull request #27 from bryan308:chore-guides

fix: update foreground color references and remove table border radius styles
bryan308 · Jan 7, 2025 · 1fe9904 · 1fe9904
2 parents 924b1cb + 546e0c2
commit 1fe9904
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 21 deletions.
diff --git a/components/shared/mdx-elements.tsx b/components/shared/mdx-elements.tsx
@@ -20,7 +20,7 @@ import {
 const BorderExample: React.FC<BorderProps> = ({
 	borderWidth = "3px",
 	borderStyle = "solid",
-	borderColor = "hsl(var(--foreground))",
+	borderColor = "hsl(var(--fd-foreground))",
 	text,
 }) => {
 	const style: React.CSSProperties = {
@@ -131,7 +131,7 @@ const OrderedList: React.FC<IListProps> = ({ listStyle, type, startVal, position
 	}
 	const li: React.CSSProperties = {
 		fontFamily: font,
-		color: "hsl(var(--foreground))",
+		color: "hsl(var(--fd-foreground))",
 		marginBottom: 0,
 		padding: 0,
 	}
@@ -208,7 +208,7 @@ const UnorderedList: React.FC<IListProps> = ({ type }) => {
 	const ul: React.CSSProperties = { listStyleType: type, margin: "1rem 0", paddingLeft: "2.5rem" }
 	const li: React.CSSProperties = {
 		fontFamily: "Times New Roman, serif",
-		color: "hsl(var(--foreground))",
+		color: "hsl(var(--fd-foreground))",
 		marginBottom: 0,
 	}
 

diff --git a/components/shared/styles.css b/components/shared/styles.css
@@ -2,11 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* disable fumadocs table styles */
-.prose table {
-	border-radius: 0 !important;
-}
-
 .data-table table,
 .table table {
 	@apply w-full border-separate border-spacing-0;
@@ -46,7 +41,7 @@
 
 /* TABLE1 */
 .table1 {
-	@apply bg-card mt-6 border border-collapse border-border;
+	@apply bg-card mt-6 border border-collapse border-border rounded-none;
 }
 
 .table1 tr {
@@ -68,7 +63,7 @@
 /* TABLE 2 */
 .table2 {
 	font-family: "Times New Roman", Times, serif;
-	@apply mt-4 border border-separate border-border bg-none;
+	@apply mt-4 border border-separate border-border bg-none rounded-none;
 }
 
 .table2 thead tr th,
@@ -92,7 +87,7 @@
 .table3 {
 	font-family: "Times New Roman", Times, serif;
 	border: thin solid;
-	@apply mt-4 border-separate border-border bg-none;
+	@apply mt-4 border-separate border-border bg-none rounded-none;
 }
 
 .table3 thead tr th,
@@ -116,7 +111,7 @@
 /* TABLE 4 */
 .table4 {
 	font-family: "Times New Roman", Times, serif;
-	@apply border mt-4 border-collapse border-border bg-none;
+	@apply border mt-4 border-collapse border-border bg-none rounded-none;
 }
 
 .table4 thead tr th,
@@ -138,9 +133,7 @@
 
 /* TABLE 5 */
 .table5 {
-	margin-top: 1.5rem;
-	margin-bottom: 1.5rem;
-	border-collapse: collapse;
+	@apply mt-6 mb-6 border-collapse rounded-none;
 }
 
 .table5,
@@ -149,8 +142,8 @@
 	@apply border border-solid border-neutral-950;
 }
 
-.table5 thead {
-	background-color: #191970;
+.table5 thead tr th {
+	background-color: #191970 !important;
 	color: #ededed !important;
 }
 
@@ -173,7 +166,7 @@
 
 /* TABLE 6 */
 .table6 {
-	@apply font-serif border border-border border-separate mt-4 bg-none;
+	@apply font-serif border border-border border-separate mt-4 bg-none rounded-none;
 }
 
 .table6 thead tr th,

diff --git a/content/guides/(html)/images/css-properties.mdx b/content/guides/(html)/images/css-properties.mdx
@@ -80,7 +80,7 @@ The width can be set as a **dotted**, **dashed**, **solid**, **double**, **groov
 <BorderExample borderStyle="outset" text="An outset border. The effect depends on the border-color value" />
 <BorderExample borderStyle="none" text="No border." />
 <BorderExample borderStyle="hidden" text="A hidden border." />
-<div style={{color: "hsl(var(--foreground))", textAlign: "center", margin: "8px 0", padding: "8px", border: "3px hsl(var(--foreground))", borderStyle: "dotted dashed solid double" }}>A mixed border.</div>
+<div style={{color: "hsl(var(--fd-foreground))", textAlign: "center", margin: "8px 0", padding: "8px", border: "3px hsl(var(--fd-foreground))", borderStyle: "dotted dashed solid double" }}>A mixed border.</div>
 
 </Callout>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -35,8 +35,8 @@ module.exports = {
 				sm: "calc(var(--radius) - 4px)",
 			},
 			colors: {
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
+				background: "hsl(var(--fd-background))",
+				foreground: "hsl(var(--fd-foreground))",
 				card: {
 					DEFAULT: "hsl(var(--card))",
 					foreground: "hsl(var(--card-foreground))",