feat: add panel is-dark, is-light, is-soft, is-bold

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Bulma Changelog
 
+## 1.0.3
+
+### Improvements
+
+- Add `is-dark`, `is-light`, `is-soft` and `is-bold` modifiers to the panel component
+
 ## 1.0.2
 
 ### Improvements

docs/documentation/components/panel.html

@@ -164,3 +164,32 @@
 </article>
 {% endcapture %} {% include docs/elements/snippet.html content=foobar more=true
 %} {% endfor %}
+
+<div class="content">
+  <p>
+    You can also use the <strong>dark, light, soft and bold shades</strong>. 
+    Simply append one of the color shade modifiers.
+  </p>
+  <p>
+    For example, to use a darker shade of your primary color, use
+    <code>"is-dark"</code> as a class.
+  </p>
+</div>
+
+{% assign shades =  "dark, light, soft, bold" | split: ", " %}
+{% for variant in shades %} {% capture panel_shades %}
+<article class="panel is-medium is-primary is-{{ variant }}">
+  <p class="panel-heading mb-0">
+    <span class="icon is-small">
+      <i class="fas fa-chevron-up" aria-hidden="true"></i>
+    </span>
+    &nbsp;&nbsp;{{ variant | capitalize }}
+  </p>
+  <div class="panel-block content is-medium">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+    Molestias, quod quidem animi dignissimos incidunt magni accusantium saepe, 
+    nobis ipsam amet facere error commodi mollitia rem ipsum in ipsa illum nesciunt!
+  </div>
+</article>
+{% endcapture %} {% include docs/elements/snippet.html content=panel_shades more=true
+%} {% endfor %}

sass/components/panel.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/css-variables" as cv;
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/derived-variables" as dv;
@@ -33,6 +35,8 @@ $panel-block-active-icon-color: cv.getVar("link") !default;
 $panel-icon-color: cv.getVar("text-weak") !default;
 $panel-colors: dv.$colors !default;
 
+$panel-no-palette: ("white", "black", "light", "dark");
+
 .#{iv.$class-prefix}panel {
   @include cv.register-vars(
     (
@@ -93,6 +97,48 @@ $panel-colors: dv.$colors !default;
           "panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")},
         )
       );
+
+      @if not list.index($panel-no-palette, $name) {
+        &.#{iv.$class-prefix}is-light {
+          @include cv.register-vars(
+            (
+              "panel-color-l": #{cv.getVar($name, "", "-light-l")},
+              "panel-heading-background-l": #{cv.getVar("light-l")},
+              "panel-heading-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+            )
+          );
+        }
+
+        &.#{iv.$class-prefix}is-dark {
+          @include cv.register-vars(
+            (
+              "panel-color-l": #{cv.getVar($name, "", "-dark-l")},
+              "panel-heading-background-l": #{cv.getVar("dark-l")},
+              "panel-heading-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+            )
+          );
+        }
+      }
+
+      &.#{iv.$class-prefix}is-soft {
+        @include cv.register-vars(
+          (
+            "panel-color-l": #{cv.getVar("soft-l")},
+            "panel-heading-background-l": #{cv.getVar("soft-l")},
+            "panel-heading-color-l": #{cv.getVar("soft-invert-l")},
+          )
+        );
+      }
+
+      &.#{iv.$class-prefix}is-bold {
+        @include cv.register-vars(
+          (
+            "panel-color-l": #{cv.getVar("bold-l")},
+            "panel-heading-background-l": #{cv.getVar("bold-l")},
+            "panel-heading-color-l": #{cv.getVar("bold-invert-l")},
+          )
+        );
+      }
     }
   }
 }

sass/elements/button.scss

@@ -84,7 +84,7 @@ $button-responsive-sizes: (
   ),
 ) !default;
 
-$no-palette: ("white", "black", "light", "dark");
+$button-no-palette: ("white", "black", "light", "dark");
 
 .#{iv.$class-prefix}button {
   @include cv.register-vars(
@@ -331,7 +331,7 @@ $no-palette: ("white", "black", "light", "dark");
         @include cv.register-var("button-border-width", 1px);
       }
 
-      @if not list.index($no-palette, $name) {
+      @if not list.index($button-no-palette, $name) {
         &.#{iv.$class-prefix}is-light {
           @include cv.register-vars(
             (