fix: missing primer color variables

3 files changed, 37 insertions, 107 deletions

diff --git a/assets/scss/_fuji-theme/_base.scss b/assets/scss/_fuji-theme/_base.scss
index 95c7709..a0033ab 100644
--- a/assets/scss/_fuji-theme/_base.scss
+++ b/assets/scss/_fuji-theme/_base.scss
@@ -8,6 +8,24 @@
   --color-divider: #{$light-color-divider};
   --color-bg: #{$light-color-bg};
   --color-codebg: #{$light-color-codebg};
+
+  // primer variable fix
+  --color-text-primary: #{$light-color-font};
+  --color-text-tertiary: #{$light-color-font};
+  --color-text-link: #{$light-color-primary};
+  --color-text-danger: #{$light-color-primary};
+  --color-bg-primary: #{$light-color-bg};
+  --color-bg-secondary: #{$light-color-codebg};
+  --color-bg-tertiary: #{$light-color-bg};
+  --color-bg-canvas: #{$light-color-bg};
+  --color-markdown-code-bg: #{$light-color-codebg};
+  --color-markdown-frame-border: #{$light-color-divider};
+  --color-markdown-blockquote-border: #{$light-color-divider};
+  --color-markdown-table-border: #{$light-color-divider};
+  --color-markdown-table-tr-border: #{$light-color-divider};
+  --color-border-primary: #{$light-color-divider};
+  --color-border-secondary: #{$light-color-divider};
+  --color-border-tertiary: #{$light-color-divider};
 }
 
 @mixin dark {
@@ -20,6 +38,24 @@
   --color-divider: #{$dark-color-divider};
   --color-bg: #{$dark-color-bg};
   --color-codebg: #{$dark-color-codebg};
+
+  // primer variable fix
+  --color-text-primary: #{$dark-color-font};
+  --color-text-tertiary: #{$dark-color-font};
+  --color-text-link: #{$dark-color-primary};
+  --color-text-danger: #{$dark-color-primary};
+  --color-bg-primary: #{$dark-color-bg};
+  --color-bg-secondary: #{$dark-color-codebg};
+  --color-bg-tertiary: #{$dark-color-bg};
+  --color-bg-canvas: #{$dark-color-bg};
+  --color-markdown-code-bg: #{$dark-color-codebg};
+  --color-markdown-frame-border: #{$dark-color-divider};
+  --color-markdown-blockquote-border: #{$dark-color-divider};
+  --color-markdown-table-border: #{$dark-color-divider};
+  --color-markdown-table-tr-border: #{$dark-color-divider};
+  --color-border-primary: #{$dark-color-divider};
+  --color-border-secondary: #{$dark-color-divider};
+  --color-border-tertiary: #{$dark-color-divider};
 }
 
 body[data-theme='auto'] {
diff --git a/assets/scss/_primer/support/index.scss b/assets/scss/_primer/support/index.scss
index 85a2c7c..9c0dd94 100644
--- a/assets/scss/_primer/support/index.scss
+++ b/assets/scss/_primer/support/index.scss
@@ -4,7 +4,7 @@
 @import "./variables/misc.scss";
 
 // mixins
-@import "./mixins/color-modes.scss";
+// @import "./mixins/color-modes.scss";
 @import "./mixins/typography.scss";
 @import "./mixins/layout.scss";
 @import "./mixins/misc.scss";
diff --git a/assets/scss/_primer/support/mixins/color-modes.scss b/assets/scss/_primer/support/mixins/color-modes.scss
deleted file mode 100644
index e4ad958..0000000
--- a/assets/scss/_primer/support/mixins/color-modes.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@mixin color-mode-theme($theme-name, $include-root: false) {
-  @if $include-root {
-    :root,
-    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
-    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
-
-      /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
-    }
-  }
-  @else {
-    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
-    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
-      @content;
-    }
-  }
-
-  @media (prefers-color-scheme: light) {
-    [data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
-      @content;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
-      @content;
-    }
-  }
-}
-
-@mixin color-mode($mode) {
-  @if $mode == light {
-    :root,
-    [data-color-mode="light"][data-light-theme*="#{$mode}"],
-    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
-      @content;
-    }
-  }
-  @else {
-    [data-color-mode="light"][data-light-theme*="#{$mode}"],
-    [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
-      @content;
-    }
-  }
-
-  @media (prefers-color-scheme: light) {
-    [data-color-mode="auto"][data-light-theme*="#{$mode}"] {
-      @content;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    [data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
-      @content;
-    }
-  }
-}
-
-// This mixin takes a map of color mode vars and splits them into dark and light mode
-// The goal is to reduce the amount of dark/light mode selectors compiled.
-//
-// Example input for $color-map
-//
-// @include color-variables(("custom-css-variable-1": (
-//     light: var(--color-scale-gray-3),
-//     dark: var(--color-scale-gray-5)
-//   ),
-//   "custom-css-variable-2": (
-//     light: var(--color-scale-gray-2),
-//     dark: var(--color-scale-gray-6)
-//   ),
-//   "custom-css-variable-3": (
-//     light: var(--color-scale-gray-2),
-//     dark: var(--color-scale-gray-6)
-//   )
-// ));
-@mixin color-variables($color-map) {
-  // Create map to store incoming variables
-  $dark-colors: ();
-  $light-colors: ();
-
-  @each $name, $value in $color-map {
-    @each $type, $color in $value {
-      @if $type == dark {
-        $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
-      }
-      @else {
-        $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
-      }
-    }
-  }
-
-  $mode-colors: (
-    dark: $dark-colors,
-    light: $light-colors
-  );
-
-  // Loop through sorted list
-  @each $mode, $variables in $mode-colors {
-    @include color-mode($mode) {
-      @each $prop, $val in $variables {
-        #{$prop}: $val;
-      }
-    }
-  }
-}