feat(theme): add support for setting text and code colors in callouts (#96)

Author: SamVerschueren

packages/astro/src/default/styles/markdown.css

@@ -137,37 +137,52 @@
 
 .markdown-content .callout-tip {
   --tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-tip-backgroundColor);
+  --tk-elements-markdown-callouts-textColor: var(--tk-elements-callouts-tip-textColor);
   --tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-tip-borderColor);
   --tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-tip-titleTextColor);
   --tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-tip-iconColor);
+  --code-background-color: var(--tk-elements-callouts-tip-codeBackgroundColor);
+  --code-color: var(--tk-elements-callouts-tip-codeColor);
 }
 
 .markdown-content .callout-info {
   --tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-info-backgroundColor);
+  --tk-elements-markdown-callouts-textColor: var(--tk-elements-callouts-info-textColor);
   --tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-info-borderColor);
   --tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-info-titleTextColor);
   --tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-info-iconColor);
+  --code-background-color: var(--tk-elements-callouts-info-codeBackgroundColor);
+  --code-color: var(--tk-elements-callouts-info-codeColor);
 }
 
 .markdown-content .callout-warn {
   --tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-warning-backgroundColor);
+  --tk-elements-markdown-callouts-textColor: var(--tk-elements-callouts-warning-textColor);
   --tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-warning-borderColor);
   --tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-warning-titleTextColor);
   --tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-warning-iconColor);
+  --code-background-color: var(--tk-elements-callouts-warning-codeBackgroundColor);
+  --code-color: var(--tk-elements-callouts-warning-codeColor);
 }
 
 .markdown-content .callout-danger {
   --tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-danger-backgroundColor);
+  --tk-elements-markdown-callouts-textColor: var(--tk-elements-callouts-danger-textColor);
   --tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-danger-borderColor);
   --tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-danger-titleTextColor);
   --tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-danger-iconColor);
+  --code-background-color: var(--tk-elements-callouts-danger-codeBackgroundColor);
+  --code-color: var(--tk-elements-callouts-danger-codeColor);
 }
 
 .markdown-content .callout-success {
   --tk-elements-markdown-callouts-backgroundColor: var(--tk-elements-callouts-success-backgroundColor);
+  --tk-elements-markdown-callouts-textColor: var(--tk-elements-callouts-success-textColor);
   --tk-elements-markdown-callouts-borderColor: var(--tk-elements-callouts-success-borderColor);
   --tk-elements-markdown-callouts-titleTextColor: var(--tk-elements-callouts-success-titleTextColor);
   --tk-elements-markdown-callouts-iconColor: var(--tk-elements-callouts-success-iconColor);
+  --code-background-color: var(--tk-elements-callouts-success-codeBackgroundColor);
+  --code-color: var(--tk-elements-callouts-success-codeColor);
 }
 
 .markdown-content .callout a:has(> code):not(:hover) {

packages/astro/src/default/styles/variables.css

@@ -333,31 +333,46 @@
 
   /* Callouts > Tip */
   --tk-elements-callouts-tip-backgroundColor: var(--tk-background-tip);
+  --tk-elements-callouts-tip-textColor: var(--tk-elements-content-textColor);
   --tk-elements-callouts-tip-borderColor: var(--tk-border-tip);
   --tk-elements-callouts-tip-titleTextColor: var(--tk-text-tip);
   --tk-elements-callouts-tip-iconColor: var(--tk-elements-callouts-tip-titleTextColor);
+  --tk-elements-callouts-tip-codeColor: var(--tk-text-primary);
+  --tk-elements-callouts-tip-codeBackgroundColor: var(--tk-background-secondary);
 
   /* Callouts > Info */
   --tk-elements-callouts-info-backgroundColor: var(--tk-background-info);
+  --tk-elements-callouts-info-textColor: var(--tk-elements-content-textColor);
   --tk-elements-callouts-info-borderColor: var(--tk-border-info);
   --tk-elements-callouts-info-titleTextColor: var(--tk-text-info);
   --tk-elements-callouts-info-iconColor: var(--tk-elements-callouts-info-titleTextColor);
+  --tk-elements-callouts-info-codeColor: var(--tk-text-primary);
+  --tk-elements-callouts-info-codeBackgroundColor: var(--tk-background-secondary);
 
   /* Callouts > Warning */
   --tk-elements-callouts-warning-backgroundColor: var(--tk-background-warning);
+  --tk-elements-callouts-warning-textColor: var(--tk-elements-content-textColor);
   --tk-elements-callouts-warning-borderColor: var(--tk-border-warning);
   --tk-elements-callouts-warning-titleTextColor: var(--tk-text-warning);
   --tk-elements-callouts-warning-iconColor: var(--tk-elements-callouts-warning-titleTextColor);
+  --tk-elements-callouts-warning-codeColor: var(--tk-text-primary);
+  --tk-elements-callouts-warning-codeBackgroundColor: var(--tk-background-secondary);
 
   /* Callouts > Danger */
   --tk-elements-callouts-danger-backgroundColor: var(--tk-background-negative);
+  --tk-elements-callouts-danger-textColor: var(--tk-elements-content-textColor);
   --tk-elements-callouts-danger-borderColor: var(--tk-border-negative);
   --tk-elements-callouts-danger-titleTextColor: var(--tk-text-negative);
   --tk-elements-callouts-danger-iconColor: var(--tk-elements-callouts-danger-titleTextColor);
+  --tk-elements-callouts-danger-codeColor: var(--tk-text-primary);
+  --tk-elements-callouts-danger-codeBackgroundColor: var(--tk-background-secondary);
 
   /* Callouts > Success */
   --tk-elements-callouts-success-backgroundColor: var(--tk-background-positive);
+  --tk-elements-callouts-success-textColor: var(--tk-elements-content-textColor);
   --tk-elements-callouts-success-borderColor: var(--tk-border-positive);
   --tk-elements-callouts-success-titleTextColor: var(--tk-text-positive);
   --tk-elements-callouts-success-iconColor: var(--tk-elements-callouts-success-titleTextColor);
+  --tk-elements-callouts-success-codeColor: var(--tk-text-primary);
+  --tk-elements-callouts-success-codeBackgroundColor: var(--tk-background-secondary);
 }

packages/astro/src/remark/callouts.ts

@@ -106,7 +106,7 @@ export function remarkCalloutsPlugin() {
           const hideIcon = attributes.hideIcon === 'true';
 
           const classes = [
-            `callout callout-${variant} my-4 flex flex-col p-3 bg-tk-elements-markdown-callouts-backgroundColor`,
+            `callout callout-${variant} my-4 flex flex-col p-3 bg-tk-elements-markdown-callouts-backgroundColor text-tk-elements-markdown-callouts-textColor`,
             attributes.class ?? '',
             ...(noBorder ? [] : ['border-l-3', 'border-tk-elements-markdown-callouts-borderColor']),
           ];

packages/astro/src/theme.ts

@@ -312,6 +312,7 @@ export const theme: ConfigBase['theme'] = {
         markdown: {
           callouts: {
             backgroundColor: 'var(--tk-elements-markdown-callouts-backgroundColor)',
+            textColor: 'var(--tk-elements-markdown-callouts-textColor)',
             borderColor: 'var(--tk-elements-markdown-callouts-borderColor)',
             titleTextColor: 'var(--tk-elements-markdown-callouts-titleTextColor)',
             iconColor: 'var(--tk-elements-markdown-callouts-iconColor)',