CSS: New var proposal + init `headings-color` (#37904)

* Proposal

* Revert opacity changes

---------

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 305740587b4d927bb197b958a2bd81f4bdf82284..4226ab894a6079642e6ecb949735e4209a28b1a1 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -87,7 +87,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: var(--#{$prefix}heading-color, inherit);
+  color: var(--#{$prefix}heading-color);
 }
 
 h1 {

diff --git a/scss/_root.scss b/scss/_root.scss
index e7cff705618d54891d4538c9c55740884846c10c..ab720a38e40390e461c46798b08fa86fa5ec5d0f 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -77,9 +77,7 @@
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   // scss-docs-end root-body-variables
 
-  @if $headings-color != null {
-    --#{$prefix}heading-color: #{$headings-color};
-  }
+  --#{$prefix}heading-color: #{$headings-color};
 
   --#{$prefix}link-color: #{$link-color};
   --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
@@ -165,9 +163,7 @@
       --#{$prefix}#{$color}-border-subtle: #{$value};
     }
 
-    @if $headings-color-dark != null {
-      --#{$prefix}heading-color: #{$headings-color-dark};
-    }
+    --#{$prefix}heading-color: #{$headings-color-dark};
 
     --#{$prefix}link-color: #{$link-color-dark};
     --#{$prefix}link-hover-color: #{$link-hover-color-dark};

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index ddc8ba31da3b608c2baf0f3b1c035af1cdbf0125..494eefac23edeed2fb0d7b8639681c9d85551643 100644 (file)
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -49,7 +49,7 @@ $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
-$headings-color-dark:               null !default;
+$headings-color-dark:               inherit !default;
 $link-color-dark:                   tint-color($primary, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e311bb0ef2bc887c6f634d7a46cf0a994b71a225..b1fe4ba5a04d2669daaad0d870b0e291bffd8791 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -655,7 +655,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
-$headings-color:              null !default;
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings