[BSv5] Drop bg-gradient-variant() mixin (#1455)

google · Mar 2, 2023 · df71c19 · df71c19
1 parent c3df161
commit df71c19
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,23 +14,24 @@ For a list of issues targeted for the next release, see the [23Q1][] milestone.
 
 **Breaking changes**:
 
-- **[Upgraded Bootstrap (#470)][470]** to v5. For a list of Bootstrap breaking
+- **[Upgraded Bootstrap ([#470][])** to v5. For a list of Bootstrap breaking
   changes, see the [Bootstrap migration guide][bsv5mig]. Other, Docsy-specific
   changes are listed below:
   - Clean up of unused, or rarely used, variables and functions:
     - Dropped `$primary-light`.
     - Dropped `color-diff()`.
   - BSv4 RTL support, being incompatible with BSv5, has been removed. For
-    progress in RTL support, see [#1442][1442].
-
-[1442]: https://github.com/google/docsy/issues/1442
+    progress in RTL support, see [#1442][].
+  - Dropped the `bg-gradient-variant()` mixin. [#1369][].
 
 **Other changes**:
 
 - Non-breaking changes that result from the Bootstrap v5 upgrade:
   - Draw.io diagram edit button: replace custom colors by BS's outline primary.
 
-[470]: https://github.com/google/docsy/issues/470
+[#470]: https://github.com/google/docsy/issues/470
+[#1369]: https://github.com/google/docsy/issues/1369
+[#1442]: https://github.com/google/docsy/issues/1442
 [bsv5mig]: https://getbootstrap.com/docs/5.2/migration/
 
 ## [0.6.0][]

diff --git a/assets/scss/_boxes.scss b/assets/scss/_boxes.scss
@@ -1,8 +1,6 @@
-// Boxes on the home page and similar.
-.td-box {
-}
+// Boxes on the home page and similar: .td-box
 
-// box-variant creates the main style for a colored section used on the site.
+// box-variant creates the main style for a colored section
 @mixin box-variant($parent, $color-name, $color-value) {
   $text-color: color-contrast($color-value);
   $link-color: mix($blue, $text-color, lightness($color-value));
@@ -38,22 +36,11 @@
     $link-hover-color,
     false
   );
-
-  @if $enable-gradients {
-    @include bg-gradient-variant(
-      "#{$parent}--1#{$color-name}#{$parent}--gradient",
-      $color-value,
-      true
-    );
-  }
 }
 
 // Common min-height modifiers used for boxes.
 @mixin td-box-height-modifiers($parent) {
   #{$parent} {
-    &--height-auto {
-    }
-
     &--height-min {
       min-height: 300px;
     }

diff --git a/assets/scss/support/_mixins.scss b/assets/scss/support/_mixins.scss
@@ -1,12 +1,5 @@
 // Some simple mixins.
 
-@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-    background: $color
-      linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
-  }
-}
-
 @mixin link-variant($parent, $color, $hover-color, $underline: false) {
   #{$parent} {
     color: $color;

diff --git a/layouts/community/list.html b/layouts/community/list.html
@@ -1,7 +1,7 @@
 {{ define "main" -}}
 
 <a class="td-offset-anchor"></a>
-<section class="row td-box td-box--primary position-relative td-box--gradient td-box--height-auto">
+<section class="row td-box td-box--primary position-relative td-box--height-auto">
     <div class="container text-center td-arrow-down">
         <span class="h4 mb-0">
             <h1>{{ T "community_join" . }}</h1>

diff --git a/layouts/partials/community_links.html b/layouts/partials/community_links.html
@@ -1,6 +1,6 @@
 {{ $links := .Site.Params.links -}}
 
-<section class="row td-box td-box--white td-box--gradient td-box--height-auto linkbox">
+<section class="row td-box td-box--white td-box--height-auto linkbox">
   <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <h2>{{ T "community_learn" }}</h2>
     <p>{{ T "community_using" . }}</p>

diff --git a/layouts/shortcodes/blocks/lead.html b/layouts/shortcodes/blocks/lead.html
@@ -1,16 +1,16 @@
-{{ $_hugo_config := `{ "version": 1 }` }}
-{{ $col_id := .Get "color" | default .Ordinal }}
-{{ $height := .Get "height" | default "auto"  }}
-{{/* Height can be one of: auto, min, med, max, full. */}}
+{{ $_hugo_config := `{ "version": 1 }` -}}
+{{ $col_id := .Get "color" | default .Ordinal -}}
+{{ $height := .Get "height" | default "auto" -}}
+{{/* Height can be one of: auto, min, med, max, full. */ -}}
 <a id="td-block-{{ .Ordinal }}" class="td-offset-anchor"></a>
-<section class="row td-box td-box--{{ $col_id }} position-relative td-box--gradient td-box--height-{{ $height }}">
+<section class="row td-box td-box--{{ $col_id }} position-relative td-box--height-{{ $height }}">
 	<div class="container text-center td-arrow-down">
 		<div class="h4 mb-0">
-			{{ if eq .Page.File.Ext "md" }}
-				{{ .Inner | markdownify }}
-			{{ else }}
-				{{ .Inner | htmlUnescape | safeHTML }}
-			{{ end }}
+			{{ if eq .Page.File.Ext "md" -}}
+				{{ .Inner | markdownify -}}
+			{{ else -}}
+				{{ .Inner | htmlUnescape | safeHTML -}}
+			{{ end -}}
 		</div>
 	</div>
 </section>
diff --git a/layouts/shortcodes/blocks/section.html b/layouts/shortcodes/blocks/section.html
@@ -1,16 +1,16 @@
-{{ $_hugo_config := `{ "version": 1 }` }}
-{{ $col_id := .Get "color" | default .Ordinal }}
-{{ $height := .Get "height" | default "auto"  }}
-{{ $type   := .Get "type" | default "" }} 
+{{ $_hugo_config := `{ "version": 1 }` -}}
+{{ $col_id := .Get "color" | default .Ordinal -}}
+{{ $height := .Get "height" | default "auto"  -}}
+{{ $type   := .Get "type" | default "" -}}
 <a id="td-block-{{ .Ordinal }}" class="td-offset-anchor"></a>
-<section class="row td-box td-box--{{ $col_id }} td-box--gradient td-box--height-{{ $height }}">
+<section class="row td-box td-box--{{ $col_id }} td-box--height-{{ $height }}">
 	<div class="col">
 		<div class="row {{ $type }}">
-			{{ if eq .Page.File.Ext "md" }}
-				{{ .Inner | markdownify }}
-			{{ else }}
-				{{ .Inner | htmlUnescape | safeHTML }}
-			{{ end }}
+			{{ if eq .Page.File.Ext "md" -}}
+				{{ .Inner | markdownify -}}
+			{{ else -}}
+				{{ .Inner | htmlUnescape | safeHTML -}}
+			{{ end -}}
 		</div>
 	</div>
 </section>
diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md
@@ -39,12 +39,9 @@ $primary: #390040;
 $secondary: #A23B72;
 ```
 
-The theme has features such as rounded corners and gradient backgrounds enabled by default. These can also be toggled in your project variables file:
-
-```scss
-$enable-gradients: true;
-$enable-shadows: true;
-```
+The theme has features such as gradient backgrounds (`$enable-gradients`) and
+shadows (`$enable-shadows`) enabled by default. These can also be toggled in
+your project variables file by setting the variables to `false`.
 
 ## Fonts