[core] fix: refactor typography colors into mixins

packages/core/src/_typography.scss

@@ -1,11 +1,12 @@
-@charset "utf-8"; // foreign characters ahead (in KSS markup)
-
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
 @import "common/variables";
+@import "common/variables-extended";
 @import "common/mixins";
+@import "common/typography-colors";
 @import "components/icon/icon";
+@include pt-typography-colors();
 
 /*
 Headings
@@ -83,22 +84,6 @@ Styleguide ui-text
 
 // NOTE: .#{$ns}-text-large defined below after .#{$ns}-running-text
 
-.#{$ns}-text-muted {
-  color: $pt-text-color-muted;
-
-  .#{$ns}-dark & {
-    color: $pt-dark-text-color-muted;
-  }
-}
-
-.#{$ns}-text-disabled {
-  color: $pt-text-color-disabled;
-
-  .#{$ns}-dark & {
-    color: $pt-dark-text-color-disabled;
-  }
-}
-
 .#{$ns}-text-overflow-ellipsis {
   @include overflow-ellipsis();
 }
@@ -147,10 +132,6 @@ Styleguide running-text
     border: none;
     border-bottom: 1px solid $pt-divider-black;
     margin: ($pt-grid-size * 2) 0;
-
-    .#{$ns}-dark & {
-      border-color: $pt-dark-divider-white;
-    }
   }
 
   p {
@@ -207,32 +188,12 @@ Styleguide typography.links
 */
 
 a {
-  color: $pt-link-color;
   text-decoration: none;
 
   &:hover {
-    color: $pt-link-color;
     cursor: pointer;
     text-decoration: underline;
   }
-
-  #{$icon-classes} {
-    color: inherit;
-  }
-
-  code,
-  .#{$ns}-dark & code {
-    color: inherit;
-  }
-
-  .#{$ns}-dark &,
-  .#{$ns}-dark &:hover {
-    color: $pt-dark-link-color;
-
-    #{$icon-classes} {
-      color: inherit;
-    }
-  }
 }
 
 /*
@@ -259,37 +220,14 @@ Styleguide preformatted
 
 %code {
   @include monospace-typography();
-  background: $pt-code-background-color;
-
   border-radius: $pt-border-radius;
-  box-shadow: inset border-shadow(0.2);
-  color: $pt-code-text-color;
   font-size: smaller;
   padding: 2px 5px;
-
-  .#{$ns}-dark & {
-    background: $pt-dark-code-background-color;
-    box-shadow: inset border-shadow(0.4);
-    color: $pt-dark-code-text-color;
-  }
-
-  a > & {
-    // <code> in links. markdown: [`code`](http://url)
-    // $pt-link-color does not have good contrast with non-link <code>'s in light theme, so we use a brighter hue
-    color: $pt-intent-primary;
-
-    .#{$ns}-dark & {
-      color: inherit;
-    }
-  }
 }
 
 %code-block {
   @include monospace-typography();
-  background: $pt-code-background-color;
   border-radius: $pt-border-radius;
-  box-shadow: inset 0 0 0 1px $pt-divider-black;
-  color: $pt-text-color;
 
   display: block;
   font-size: $pt-font-size - 1px;
@@ -299,16 +237,7 @@ Styleguide preformatted
   word-break: break-all;
   word-wrap: break-word;
 
-  .#{$ns}-dark & {
-    background: $pt-dark-code-background-color;
-    box-shadow: inset 0 0 0 1px $pt-dark-divider-black;
-    color: $pt-dark-text-color;
-  }
-
   > code {
-    background: none;
-    box-shadow: none;
-    color: inherit;
     font-size: inherit;
     padding: 0;
   }
@@ -324,10 +253,7 @@ Styleguide preformatted
 
 %keyboard {
   align-items: center;
-  background: $white;
   border-radius: $pt-border-radius;
-  box-shadow: $pt-elevation-shadow-1;
-  color: $pt-text-color-muted;
   display: inline-flex;
   font-family: inherit;
   font-size: $pt-font-size-small;
@@ -341,12 +267,6 @@ Styleguide preformatted
   #{$icon-classes} {
     margin-right: $pt-grid-size * 0.5;
   }
-
-  .#{$ns}-dark & {
-    background: $dark-gray4;
-    box-shadow: $pt-dark-elevation-shadow-1;
-    color: $pt-dark-text-color-muted;
-  }
 }
 
 .#{$ns}-key {
@@ -454,6 +374,11 @@ Styleguide rtl
   text-align: right;
 }
 
+
+/*
+Dark theme
+*/
+
 .#{$ns}-dark {
-  color: $pt-dark-text-color;
+  @include pt-dark-typography-colors();
 }

packages/core/src/blueprint.scss

@@ -8,6 +8,7 @@ Licensed under the Apache License, Version 2.0.
 // Import files in the same order that they are documented in the docs
 @import "~@blueprintjs/colors/lib/scss/colors";
 @import "common/variables";
+@import "common/variables-extended";
 @import "common/mixins";
 
 @import "reset";

packages/core/src/common/_mixins.scss

@@ -5,12 +5,6 @@
 @import "~@blueprintjs/colors/lib/scss/colors";
 @import "flex";
 
-// Extended color pallete
-$blue6: #99c4ff;
-$green6: #7cd7a2;
-$orange6: #f5c186;
-$red6: #ffa1a4;
-
 $pt-intent-colors: (
   "primary": $pt-intent-primary,
   "success": $pt-intent-success,

packages/core/src/common/_typography-colors.scss

@@ -0,0 +1,155 @@
+// Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "variables";
+@import "variables-extended";
+@import "mixins";
+
+@mixin pt-typography-colors() {
+  // N.B. we can't declare any global colors here because this mixin is @included at
+  // the root, outside of any selector, but _reset.scss sets the body text color for us.
+
+  .#{$ns}-text-muted {
+    color: $pt-text-color-muted;
+  }
+
+  .#{$ns}-text-disabled {
+    color: $pt-text-color-disabled;
+  }
+
+  .#{$ns}-running-text {
+    hr {
+      border-color: $pt-divider-black;
+    }
+  }
+
+  a {
+    color: $pt-link-color;
+
+    &:hover {
+      color: $pt-link-color;
+    }
+
+    #{$icon-classes} {
+      color: inherit;
+    }
+
+    code {
+      color: inherit;
+    }
+  }
+
+  .#{$ns}-code,
+  .#{$ns}-running-text code {
+    background: $pt-code-background-color;
+    box-shadow: inset border-shadow(0.2);
+    color: $pt-code-text-color;
+
+    a > & {
+      // <code> in links. markdown: [`code`](http://url)
+      // $pt-link-color does not have good contrast with non-link <code>'s in light theme, so we use a brighter hue
+      color: $pt-intent-primary;
+    }
+  }
+
+  .#{$ns}-code-block,
+  .#{$ns}-running-text pre {
+    background: $pt-code-background-color;
+    box-shadow: inset 0 0 0 1px $pt-divider-black;
+    color: $pt-text-color;
+
+    > code {
+      background: none;
+      box-shadow: none;
+      color: inherit;
+    }
+  }
+
+  .#{$ns}-key,
+  .#{$ns}-running-text kbd {
+    background: $white;
+    box-shadow: $pt-elevation-shadow-1;
+    color: $pt-text-color-muted;
+  }
+
+  #{$icon-classes} {
+    @each $intent, $color in $pt-intent-text-colors {
+      &.#{$ns}-intent-#{$intent} {
+        color: $color;
+      }
+    }
+  }
+}
+
+@mixin pt-dark-typography-colors() {
+  color: $pt-dark-text-color;
+
+  .#{$ns}-text-muted {
+    color: $pt-dark-text-color-muted;
+  }
+
+  .#{$ns}-text-disabled {
+    color: $pt-dark-text-color-disabled;
+  }
+
+  .#{$ns}-running-text {
+    hr {
+      border-color: $pt-dark-divider-white;
+    }
+  }
+
+  a {
+    color: $pt-dark-link-color;
+
+    &:hover {
+      color: $pt-dark-link-color;
+    }
+
+    #{$icon-classes} {
+      color: inherit;
+    }
+
+    code {
+      color: inherit;
+    }
+  }
+
+  .#{$ns}-code,
+  .#{$ns}-running-text code {
+    background: $pt-dark-code-background-color;
+    box-shadow: inset border-shadow(0.4);
+    color: $pt-dark-code-text-color;
+
+    a > & {
+      color: inherit;
+    }
+  }
+
+  .#{$ns}-code-block,
+  .#{$ns}-running-text pre {
+    background: $pt-dark-code-background-color;
+    box-shadow: inset 0 0 0 1px $pt-dark-divider-black;
+    color: $pt-dark-text-color;
+
+    > code {
+      background: none;
+      box-shadow: none;
+      color: inherit;
+    }
+  }
+
+  .#{$ns}-key,
+  .#{$ns}-running-text kbd {
+    background: $dark-gray4;
+    box-shadow: $pt-dark-elevation-shadow-1;
+    color: $pt-dark-text-color-muted;
+  }
+
+  #{$icon-classes} {
+    @each $intent, $color in $pt-dark-intent-text-colors {
+      &.#{$ns}-intent-#{$intent} {
+        color: $color;
+      }
+    }
+  }
+}

packages/core/src/common/_variables-extended.scss

@@ -0,0 +1,23 @@
+// Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "variables";
+
+// This file contains additional common variables which we do not want to export
+// in public API via variables.scss, or they contain syntax which does not play
+// well with our generate-css-variables script and thus cannot be easily
+// exported.
+
+$half-grid-size: $pt-grid-size * 0.5 !default;
+
+// Extended color pallete
+$blue6: #99c4ff;
+$green6: #7cd7a2;
+$orange6: #f5c186;
+$red6: #ffa1a4;
+
+$icon-classes: (
+  ".#{$ns}-icon",
+  ".#{$ns}-icon-standard",
+  ".#{$ns}-icon-large"
+) !default;

packages/core/src/common/_variables.scss

@@ -7,7 +7,7 @@
 
 // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
 // N.B. No quotes around this string value, for Less syntax compatibility. Also, this cannot be overriden
-// (the JS components have this class prefix hard-coded), so it does not have the `! default` modifier.
+// (the JS components have this class prefix hard-coded), so it does not have the `!default` modifier.
 $ns: bp4;
 // Alias for BP users outside this repo
 $bp-ns: $ns;

packages/core/src/components/button/_button.scss

@@ -2,6 +2,7 @@
 // Licensed under the Apache License, Version 2.0.
 
 @import "../../common/variables";
+@import "../../common/variables-extended";
 @import "./common";
 
 /*

packages/core/src/components/button/_common.scss

@@ -3,6 +3,7 @@
 
 @import "../../common/mixins";
 @import "../../common/variables";
+@import "../../common/variables-extended";
 @import "../progress-bar/common";
 
 $button-border-width: 1px !default;