Merge pull request #137 from locness3/patch-1

Use a variable for foreground/text color
kazzkiq · Apr 16, 2020 · f306983 · f306983
2 parents 4373ec0 + 1deb823
commit f306983
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/balloon.css b/balloon.css
@@ -1,6 +1,7 @@
 :root {
   --balloon-border-radius: 2px;
   --balloon-color: rgba(16, 16, 16, 0.95);
+  --balloon-text-color: #fff;
   --balloon-font-size: 12px;
   --balloon-move: 4px; }
 
@@ -13,16 +14,16 @@ button[aria-label][data-balloon-pos] {
   [aria-label][data-balloon-pos]:after {
     opacity: 0;
     pointer-events: none;
-    transition: all .18s ease-out .18s;
+    transition: all 0.18s ease-out 0.18s;
     text-indent: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-weight: normal;
     font-style: normal;
     text-shadow: none;
     font-size: var(--balloon-font-size);
     background: var(--balloon-color);
     border-radius: var(--balloon-border-radius);
-    color: #fff;
+    color: var(--balloon-foreground-color);
     content: attr(aria-label);
     padding: .5em 1em;
     position: absolute;
@@ -35,7 +36,7 @@ button[aria-label][data-balloon-pos] {
     border-top-color: var(--balloon-color);
     opacity: 0;
     pointer-events: none;
-    transition: all .18s ease-out .18s;
+    transition: all 0.18s ease-out 0.18s;
     content: "";
     position: absolute;
     z-index: 10; }

diff --git a/balloon.min.css b/balloon.min.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/balloon.scss b/src/balloon.scss
@@ -18,6 +18,7 @@
 :root {
   --balloon-border-radius: 2px;
   --balloon-color: #{$balloon-bg};
+  --balloon-text-color: #fff;
   --balloon-font-size: #{$balloon-base-size};
   --balloon-move: #{$balloon-move};
 }
@@ -42,8 +43,10 @@ button[aria-label] {
       @include normalized-text();
 
       background: var(--balloon-color);
+      border-radius: 2px;
+      color: var(--balloon-foreground-color);
       border-radius: var(--balloon-border-radius);
-      color: #fff;
+      color: var(--balloon-foreground-color);
       content: attr(aria-label);
       padding: .5em 1em;
       position: absolute;