feat(highlight): Switched theming to custom properties.

apps/dev/src/highlight/highlight-demo.component.html

@@ -1,6 +1,6 @@
-<dt-highlight term=">"
-  >&lt;&gt;&quot;&amp;&mdash;&nbsp;&apos;&cent;&pound;&yen;&euro;&copy;&reg;&forall;&empty;&exist;&nabla;&isin;&notin;&ni;&prod;&sum;</dt-highlight
->
+<dt-highlight term=">">
+  &lt;&gt;&quot;&amp;&mdash;&nbsp;&apos;&cent;&pound;&yen;&euro;&copy;&reg;&forall;&empty;&exist;&nabla;&isin;&notin;&ni;&prod;&sum;
+</dt-highlight>
 <hr />
 
 <p dt-highlight term="s">
@@ -90,7 +90,7 @@
 
 <dt-highlight term="Jane">We welcome {{ name }} to this event.</dt-highlight>
 
-<div dtTheme=":dark" class="dark">
+<div dtTheme=":dark" class="dt-example-dark">
   <p dt-highlight term="s">
     Some
     <b>text where</b>

apps/dev/src/main.scss

@@ -35,4 +35,5 @@ body {
 .dt-example-dark {
   background-color: #2d2d2d;
   padding: 16px;
+  color: #fff;
 }

libs/barista-components/highlight/BUILD.bazel

@@ -1,4 +1,4 @@
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("//tools/bazel_rules:index.bzl", "jest", "ng_module_view_engine", "stylelint")
 
@@ -42,17 +42,10 @@ ng_module_view_engine(
     ],
 )
 
-sass_library(
-    name = "theme",
-    srcs = glob(
-        ["src/**/_*.scss"],
-    ),
-)
-
 sass_binary(
     name = "styles",
     src = "src/highlight.scss",
-    deps = [":theme"],
+    deps = [],
 )
 
 stylelint(

libs/barista-components/highlight/src/highlight.scss

@@ -1,19 +1,23 @@
 @import '../../core/src/style/variables';
-@import 'highlight-theme';
 
 :host {
   // width and height have to be at least 1px for it to work properly
   min-height: 1px;
   min-width: 1px;
   display: inline-block;
+  --dt-highlight-color: #{$turquoise-100};
+}
+
+:host-context(.dt-theme-dark) {
+  --dt-highlight-color: #{$gray-700};
 }
 
 .dt-highlight-source {
   display: none;
 }
 
 ::ng-deep .dt-highlight-mark {
-  background-color: $turquoise-100;
+  background-color: var(--dt-highlight-color);
   text-decoration: underline;
   color: currentColor;
 
@@ -33,8 +37,3 @@
     content: ' [highlight end] ';
   }
 }
-
-// Apply the highlight theme to all theme definitions
-@include dt-apply-theme() {
-  @include dt-theme-highlight($dt-current-theme);
-}