fix(techdocs): correct colors calculation

Signed-off-by: Thomas Cardonne <thomas.cardonne@adevinta.com>

Author: tcardonne

.changeset/rude-moose-dig.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Corrected color of some elements such as Grid cards and Tables.

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 {

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'