Add more button variables

diff --git a/docs/.gitignore b/docs/.gitignore
index 14acf1d5a48fb724c05d30ad8d20170c48a502b5..5e5ff8f54ce00023dd409c5ac6c597d7d330ce46 100644 (file)
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -27,5 +27,6 @@ test.scss
 /dev
 /icons
 /styles/node_modules
+/test
 /versions
 _site

diff --git a/docs/bulma.scss b/docs/bulma.scss
index 9febe6a631da86e7086b5fea1abb6f788d14427c..43e0551797607b75554896dc97f8c383407ae5fb 100644 (file)
--- a/docs/bulma.scss
+++ b/docs/bulma.scss
@@ -1,3 +1,3 @@
 @charset "utf-8";
 @import "../bulma";
-// @import "../sass/themes/dark";
+@import "../sass/themes/dark";

diff --git a/docs/css/bulma.css b/docs/css/bulma.css
index 7eb81a30cfa22499711ce2b99e80cd2e266c0495..ef65ecedb2ce78607e5f4ff87ccb3fdc09e769bc 100644 (file)
--- a/docs/css/bulma.css
+++ b/docs/css/bulma.css
@@ -539,6 +539,7 @@ a.box:active {
   --bulma-button-color: var(--bulma-text-strong);
   --bulma-button-background-color: var(--bulma-scheme-main);
   --bulma-button-family: false;
+  --bulma-button-weight: var(--bulma-weight-medium);
   --bulma-button-border-color: var(--bulma-border);
   --bulma-button-border-width: var(--bulma-control-border-width);
   --bulma-button-padding-vertical: calc( 0.5em - var(--bulma-button-border-width));
@@ -586,6 +587,7 @@ a.box:active {
   border-width: var(--bulma-button-border-width);
   color: var(--bulma-button-color);
   cursor: pointer;
+  font-weight: var(--bulma-button-weight);
   justify-content: center;
   padding-bottom: var(--bulma-button-padding-vertical);
   padding-left: var(--bulma-button-padding-horizontal);
@@ -5651,6 +5653,9 @@ button.dropdown-item.is-active {
   --bulma-message-body-pre-background-color: var(--bulma-scheme-main);
   --bulma-message-body-pre-code-background-color: transparent;
   --bulma-message-header-body-border-width: 0;
+  --bulma-message-status-background-l: 8%;
+  --bulma-message-status-color-l: 70%;
+  --bulma-message-status-header-background-l: 20%;
 }
 
 .message {
@@ -5681,151 +5686,179 @@ button.dropdown-item.is-active {
 }
 
 .message.is-white {
-  background-color: white;
+  --base-s: var(--bulma-white-s);
+  --base-l: var(--bulma-white-l);
+  background: none;
 }
 
 .message.is-white .message-header {
-  background-color: white;
-  color: #0a0a0a;
+  background-color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-white-invert);
 }
 
 .message.is-white .message-body {
-  border-color: white;
+  background-color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-black {
-  background-color: #fafafa;
+  --base-s: var(--bulma-black-s);
+  --base-l: var(--bulma-black-l);
+  background: none;
 }
 
 .message.is-black .message-header {
-  background-color: #0a0a0a;
-  color: white;
+  background-color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-black-invert);
 }
 
 .message.is-black .message-body {
-  border-color: #0a0a0a;
+  background-color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-light {
-  background-color: #fafafa;
+  --base-s: var(--bulma-light-s);
+  --base-l: var(--bulma-light-l);
+  background: none;
 }
 
 .message.is-light .message-header {
-  background-color: whitesmoke;
-  color: rgba(0, 0, 0, 0.7);
+  background-color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-light-invert);
 }
 
 .message.is-light .message-body {
-  border-color: whitesmoke;
+  background-color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-dark {
-  background-color: #fafafa;
+  --base-s: var(--bulma-dark-s);
+  --base-l: var(--bulma-dark-l);
+  background: none;
 }
 
 .message.is-dark .message-header {
-  background-color: #363636;
-  color: #fff;
+  background-color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-dark-invert);
 }
 
 .message.is-dark .message-body {
-  border-color: #363636;
+  background-color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-primary {
-  background-color: #ebfffc;
+  --base-s: var(--bulma-primary-s);
+  --base-l: var(--bulma-primary-l);
+  background: none;
 }
 
 .message.is-primary .message-header {
-  background-color: #00d1b2;
-  color: #fff;
+  background-color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-primary-invert);
 }
 
 .message.is-primary .message-body {
-  border-color: #00d1b2;
-  color: #00947e;
+  background-color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-link {
-  background-color: #f7f8fd;
+  --base-s: var(--bulma-link-s);
+  --base-l: var(--bulma-link-l);
+  background: none;
 }
 
 .message.is-link .message-header {
-  background-color: #3c57d3;
-  color: #fff;
+  background-color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-link-invert);
 }
 
 .message.is-link .message-body {
-  border-color: #3c57d3;
+  background-color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-info {
-  background-color: #ebf9fe;
+  --base-s: var(--bulma-info-s);
+  --base-l: var(--bulma-info-l);
+  background: none;
 }
 
 .message.is-info .message-header {
-  background-color: #18b4f7;
-  color: #fff;
+  background-color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-info-invert);
 }
 
 .message.is-info .message-body {
-  border-color: #18b4f7;
-  color: #0677a7;
+  background-color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-success {
-  background-color: #effbf4;
+  --base-s: var(--bulma-success-s);
+  --base-l: var(--bulma-success-l);
+  background: none;
 }
 
 .message.is-success .message-header {
-  background-color: #3fcf82;
-  color: #fff;
+  background-color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-success-invert);
 }
 
 .message.is-success .message-body {
-  border-color: #3fcf82;
-  color: #1e7647;
+  background-color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-warning {
-  background-color: #fff9eb;
+  --base-s: var(--bulma-warning-s);
+  --base-l: var(--bulma-warning-l);
+  background: none;
 }
 
 .message.is-warning .message-header {
-  background-color: #ffb60a;
-  color: var(--bulma-white);
+  background-color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-warning-invert);
 }
 
 .message.is-warning .message-body {
-  border-color: #ffb60a;
-  color: #946800;
+  background-color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-danger {
-  background-color: #feedec;
+  --base-s: var(--bulma-danger-s);
+  --base-l: var(--bulma-danger-l);
+  background: none;
 }
 
 .message.is-danger .message-header {
-  background-color: #f15146;
-  color: #fff;
+  background-color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-danger-invert);
 }
 
 .message.is-danger .message-body {
-  border-color: #f15146;
-  color: #c71b0f;
+  background-color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message.is-text {
-  background-color: #f9fafb;
+  --base-s: var(--bulma-text-s);
+  --base-l: var(--bulma-text-l);
+  background: none;
 }
 
 .message.is-text .message-header {
-  background-color: #404654;
-  color: #fff;
+  background-color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-header-background-l));
+  color: var(--bulma-text-invert);
 }
 
 .message.is-text .message-body {
-  border-color: #404654;
+  background-color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-background-l));
+  color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-color-l));
 }
 
 .message-header {
@@ -13113,3 +13146,29 @@ a.has-text-text:hover, a.has-text-text:focus {
     )
   );*/
 }
+
+[data-theme="dark"],
+.theme-dark {
+  --bulma-scheme-main: #121212;
+  --bulma-scheme-main-bis: #242424;
+  --bulma-scheme-main-ter: #363636;
+  --bulma-scheme-invert: white;
+  --bulma-scheme-invert-bis: #fafafa;
+  --bulma-scheme-invert-ter: whitesmoke;
+  --bulma-background: #242424;
+  --bulma-border: #363636;
+  --bulma-border-hover: #4a4a4a;
+  --bulma-border-light: #363636;
+  --bulma-border-light-hover: #4a4a4a;
+  --bulma-text: #b5b5b5;
+  --bulma-text-invert: #363636;
+  --bulma-text-light: #7a7a7a;
+  --bulma-text-strong: white;
+  --bulma-link-hover: white;
+  --bulma-link-hover-border: #4a4a4a;
+  --bulma-link-focus: white;
+  --bulma-link-focus-border: #3c57d3;
+  --bulma-link-active: white;
+  --bulma-link-active-border: #b5b5b5;
+  --bulma-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.2), 0 0px 0 1px rgba(255, 255, 255, 0.04);
+}

diff --git a/sass/components/message.scss b/sass/components/message.scss
index 968d2cb9d6c0c1db4c1b3af935629b07250d0e90..d595059ae39a133183e7daf6113651b625ec159c 100644 (file)
--- a/sass/components/message.scss
+++ b/sass/components/message.scss
@@ -39,6 +39,9 @@ $message-colors: $colors !default;
       message-body-pre-background-color: #{$message-body-pre-background-color},
       message-body-pre-code-background-color: #{$message-body-pre-code-background-color},
       message-header-body-border-width: #{$message-header-body-border-width},
+      message-status-background-l: 8%,
+      message-status-color-l: 70%,
+      message-status-header-background-l: 20%,
     )
   );
 }
@@ -75,44 +78,76 @@ $message-colors: $colors !default;
   // Colors
   // TODO
   @each $name, $components in $message-colors {
-    $color: nth($components, 1);
-    $color-invert: nth($components, 2);
-    $color-light: null;
-    $color-dark: null;
-
-    @if length($components) >= 3 {
-      $color-light: nth($components, 3);
-
-      @if length($components) >= 4 {
-        $color-dark: nth($components, 4);
-      } @else {
-        $color-luminance: colorLuminance($color);
-        $darken-percentage: $color-luminance * 70%;
-        $desaturate-percentage: $color-luminance * 30%;
-        $color-dark: desaturate(
-          darken($color, $darken-percentage),
-          $desaturate-percentage
-        );
-      }
-    } @else {
-      $color-lightning: max(100% - lightness($color) - 2%, 0%);
-      $color-light: lighten($color, $color-lightning);
-    }
+    $base-h: getVar($name, "", "-h");
+    $base-s: getVar($name, "", "-s");
+    $base-l: getVar($name, "", "-l");
+    $invert: getVar($name, "", "-invert");
+    $base: hsl($base-h, var(--s), var(--l));
 
     &.is-#{$name} {
-      background-color: $color-light;
+      --base-s: #{$base-s};
+      --base-l: #{$base-l};
+      background: none;
 
       .#{$class-prefix}message-header {
-        background-color: $color;
-        color: $color-invert;
+        background-color: hsl(
+          $base-h,
+          var(--base-s),
+          var(--bulma-message-status-header-background-l)
+        );
+        color: $invert;
       }
 
       .#{$class-prefix}message-body {
-        border-color: $color;
-        color: $color-dark;
+        background-color: hsl(
+          $base-h,
+          var(--base-s),
+          var(--bulma-message-status-background-l)
+        );
+        color: hsl($base-h, var(--base-s), var(--bulma-message-status-color-l));
       }
     }
   }
+
+  // @each $name, $components in $message-colors {
+  //   $color: nth($components, 1);
+  //   $color-invert: nth($components, 2);
+  //   $color-light: null;
+  //   $color-dark: null;
+
+  //   @if length($components) >= 3 {
+  //     $color-light: nth($components, 3);
+
+  //     @if length($components) >= 4 {
+  //       $color-dark: nth($components, 4);
+  //     } @else {
+  //       $color-luminance: colorLuminance($color);
+  //       $darken-percentage: $color-luminance * 70%;
+  //       $desaturate-percentage: $color-luminance * 30%;
+  //       $color-dark: desaturate(
+  //         darken($color, $darken-percentage),
+  //         $desaturate-percentage
+  //       );
+  //     }
+  //   } @else {
+  //     $color-lightning: max(100% - lightness($color) - 2%, 0%);
+  //     $color-light: lighten($color, $color-lightning);
+  //   }
+
+  //   &.is-#{$name} {
+  //     background-color: $color-light;
+
+  //     .#{$class-prefix}message-header {
+  //       background-color: $color;
+  //       color: $color-invert;
+  //     }
+
+  //     .#{$class-prefix}message-body {
+  //       border-color: $color;
+  //       color: $color-dark;
+  //     }
+  //   }
+  // }
 }
 
 .#{$class-prefix}message-header {

diff --git a/sass/elements/button.scss b/sass/elements/button.scss
index a52b44d4e8da05099c0cd9c3cf845ed25295d590..24404950fd68e8ecace2d3ef66368a23fbbd05b1 100644 (file)
--- a/sass/elements/button.scss
+++ b/sass/elements/button.scss
@@ -4,6 +4,7 @@
 $button-color: getVar("text-strong") !default;
 $button-background-color: getVar("scheme-main") !default;
 $button-family: false !default;
+$button-weight: getVar("weight-medium") !default;
 
 $button-border-color: getVar("border") !default;
 $button-border-width: getVar("control-border-width") !default;
@@ -101,6 +102,7 @@ $button-responsive-sizes: (
       button-color: #{$button-color},
       button-background-color: #{$button-background-color},
       button-family: #{$button-family},
+      button-weight: #{$button-weight},
       button-border-color: #{$button-border-color},
       button-border-width: #{$button-border-width},
       button-padding-vertical: #{$button-padding-vertical},
@@ -153,11 +155,7 @@ $button-responsive-sizes: (
   border-width: getVar("button-border-width");
   color: getVar("button-color");
   cursor: pointer;
-
-  @if $button-family {
-    font-family: getVar("button-family");
-  }
-
+  font-weight: getVar("button-weight");
   justify-content: center;
   padding-bottom: getVar("button-padding-vertical");
   padding-left: getVar("button-padding-horizontal");
@@ -166,6 +164,10 @@ $button-responsive-sizes: (
   text-align: center;
   white-space: nowrap;
 
+  @if $button-family {
+    font-family: getVar("button-family");
+  }
+
   strong {
     color: inherit;
   }