From 0afb8a63ec2b68ba93252e91f8bac8ba4b25383d Mon Sep 17 00:00:00 2001
From: Thomas Cardonne <thomas.cardonne@adevinta.com>
Date: Tue, 9 Dec 2025 15:26:40 +0100
Subject: [PATCH] fix(techdocs): correct colors calculation

Signed-off-by: Thomas Cardonne <thomas.cardonne@adevinta.com>
---
 .changeset/rude-moose-dig.md                             | 5 +++++
 .../src/reader/transformers/styles/rules/typeset.ts      | 4 ++--
 .../src/reader/transformers/styles/rules/variables.ts    | 9 +++------
 3 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/rude-moose-dig.md

diff --git a/.changeset/rude-moose-dig.md b/.changeset/rude-moose-dig.md
new file mode 100644
index 0000000000..722b847992
--- /dev/null
+++ b/.changeset/rude-moose-dig.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Corrected color of some elements such as Grid cards and Tables.
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts b/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts
index 680e58e182..f19c4ebdac 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/typeset.ts
@@ -110,7 +110,7 @@ ${headings.reduce<string>((style, heading) => {
 
 .md-typeset table:not([class]) {
   font-size: var(--md-typeset-font-size);
-  border: 1px solid var(--md-default-fg-color);
+  border: 1px solid var(--md-typeset-table-color);
   border-bottom: none;
   border-collapse: collapse;
   border-radius: ${theme.shape.borderRadius}px;
@@ -119,7 +119,7 @@ ${headings.reduce<string>((style, heading) => {
   font-weight: bold;
 }
 .md-typeset table:not([class]) td, .md-typeset table:not([class]) th {
-  border-bottom: 1px solid var(--md-default-fg-color);
+  border-bottom: 1px solid var(--md-typeset-table-color);
 }
 
 .md-typeset pre > code::-webkit-scrollbar-thumb {
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
index c419d5f71b..f6d9cd7ea7 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
@@ -28,11 +28,8 @@ export default ({ theme }: RuleOptions) => `
   /* FONT */
   --md-default-fg-color: ${theme.palette.text.primary};
   --md-default-fg-color--light: ${theme.palette.text.secondary};
-  --md-default-fg-color--lighter: ${lighten(theme.palette.text.secondary, 0.7)};
-  --md-default-fg-color--lightest: ${lighten(
-    theme.palette.text.secondary,
-    0.3,
-  )};
+  --md-default-fg-color--lighter: ${alpha(theme.palette.text.secondary, 0.3)};
+  --md-default-fg-color--lightest: ${alpha(theme.palette.text.secondary, 0.15)};
 
   /* BACKGROUND */
   --md-default-bg-color:${theme.palette.background.default};
@@ -146,7 +143,7 @@ export default ({ theme }: RuleOptions) => `
   --md-typeset-font-size: 1rem;
   --md-typeset-color: var(--md-default-fg-color);
   --md-typeset-a-color: ${theme.palette.link};
-  --md-typeset-table-color: ${theme.palette.text.primary};
+  --md-typeset-table-color: ${alpha(theme.palette.text.primary, 0.15)};
   --md-typeset-table-color--light: ${alpha(theme.palette.text.primary, 0.05)};
   --md-typeset-del-color: ${
     theme.palette.type === 'dark'