Improve button colors

diff --git a/docs/css/bulma.css b/docs/css/bulma.css
index f16f57cad9c588c468b79441dd25de63fea32f19..7eb81a30cfa22499711ce2b99e80cd2e266c0495 100644 (file)
--- a/docs/css/bulma.css
+++ b/docs/css/bulma.css
@@ -572,6 +572,8 @@ a.box:active {
   --bulma-button-hover-l: -10%;
   --bulma-button-active-s: 20%;
   --bulma-button-active-l: -20%;
+  --bulma-button-light-l: 95%;
+  --bulma-button-light-text-l: 33%;
   --bulma-dark-shade: 20;
   --bulma-dark-invert-shade: 90;
   --bulma-light-shade: 90;
@@ -780,8 +782,9 @@ fieldset[disabled] .button.is-white.is-inverted.is-outlined {
 }
 
 .button.is-white.is-light {
-  background-color: var(--bulma-white-90);
-  color: hsla(var(--bulma-white-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-white-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-white.is-light:hover, .button.is-white.is-light.is-hovered {
@@ -903,8 +906,9 @@ fieldset[disabled] .button.is-black.is-inverted.is-outlined {
 }
 
 .button.is-black.is-light {
-  background-color: var(--bulma-black-90);
-  color: hsla(var(--bulma-black-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-black-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-black.is-light:hover, .button.is-black.is-light.is-hovered {
@@ -1026,8 +1030,9 @@ fieldset[disabled] .button.is-light.is-inverted.is-outlined {
 }
 
 .button.is-light.is-light {
-  background-color: var(--bulma-light-90);
-  color: hsla(var(--bulma-light-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-light-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-light.is-light:hover, .button.is-light.is-light.is-hovered {
@@ -1149,8 +1154,9 @@ fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
 }
 
 .button.is-dark.is-light {
-  background-color: var(--bulma-dark-90);
-  color: hsla(var(--bulma-dark-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-dark-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-dark.is-light:hover, .button.is-dark.is-light.is-hovered {
@@ -1272,8 +1278,9 @@ fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
 }
 
 .button.is-primary.is-light {
-  background-color: var(--bulma-primary-90);
-  color: hsla(var(--bulma-primary-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-primary-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered {
@@ -1395,8 +1402,9 @@ fieldset[disabled] .button.is-link.is-inverted.is-outlined {
 }
 
 .button.is-link.is-light {
-  background-color: var(--bulma-link-90);
-  color: hsla(var(--bulma-link-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-link-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-link.is-light:hover, .button.is-link.is-light.is-hovered {
@@ -1518,8 +1526,9 @@ fieldset[disabled] .button.is-info.is-inverted.is-outlined {
 }
 
 .button.is-info.is-light {
-  background-color: var(--bulma-info-90);
-  color: hsla(var(--bulma-info-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-info-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-info.is-light:hover, .button.is-info.is-light.is-hovered {
@@ -1641,8 +1650,9 @@ fieldset[disabled] .button.is-success.is-inverted.is-outlined {
 }
 
 .button.is-success.is-light {
-  background-color: var(--bulma-success-90);
-  color: hsla(var(--bulma-success-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-success-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-success.is-light:hover, .button.is-success.is-light.is-hovered {
@@ -1764,8 +1774,9 @@ fieldset[disabled] .button.is-warning.is-inverted.is-outlined {
 }
 
 .button.is-warning.is-light {
-  background-color: var(--bulma-warning-90);
-  color: hsla(var(--bulma-warning-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-warning-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered {
@@ -1887,8 +1898,9 @@ fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
 }
 
 .button.is-danger.is-light {
-  background-color: var(--bulma-danger-90);
-  color: hsla(var(--bulma-danger-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-danger-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered {
@@ -2010,8 +2022,9 @@ fieldset[disabled] .button.is-text.is-inverted.is-outlined {
 }
 
 .button.is-text.is-light {
-  background-color: var(--bulma-text-90);
-  color: hsla(var(--bulma-text-h), var(--s), var(--l), 1);
+  --l: var(--bulma-button-light-l);
+  --text-l: var(--bulma-button-light-text-l);
+  color: hsla(var(--bulma-text-h), var(--s), var(--text-l), 1);
 }
 
 .button.is-text.is-light:hover, .button.is-text.is-light.is-hovered {

diff --git a/sass/elements/button.scss b/sass/elements/button.scss
index 7420074df5663c010f2e76d1915f4c18258fb9ea..a52b44d4e8da05099c0cd9c3cf845ed25295d590 100644 (file)
--- a/sass/elements/button.scss
+++ b/sass/elements/button.scss
@@ -53,6 +53,10 @@ $button-hover-s: 10% !default;
 $button-hover-l: -10% !default;
 $button-active-s: 20% !default;
 $button-active-l: -20% !default;
+$button-light-l: 95% !default;
+$button-light-text-l: 33% !default;
+$button-light-hover-l: 93% !default;
+$button-light-active-l: 91% !default;
 
 $button-colors: $colors !default;
 $button-responsive-sizes: (
@@ -130,6 +134,8 @@ $button-responsive-sizes: (
       button-hover-l: #{$button-hover-l},
       button-active-s: #{$button-active-s},
       button-active-l: #{$button-active-l},
+      button-light-l: #{$button-light-l},
+      button-light-text-l: #{$button-light-text-l},
       dark-shade: #{$dark-shade},
       dark-invert-shade: #{$dark-invert-shade},
       light-shade: #{$light-shade},
@@ -431,9 +437,12 @@ $button-responsive-sizes: (
       }
 
       &.is-light {
+        --l: var(--bulma-button-light-l);
+        --text-l: var(--bulma-button-light-text-l);
         // --l: var(--bulma-dark-shade);
-        background-color: getVar($name, "", "-#{$light-shade}");
-        color: $base;
+        // background-color: getVar($name, "", "-#{$light-shade}");
+        // color: $base;
+        color: hsla($base-h, var(--s), var(--text-l), 1);
 
         &:hover,
         &.is-hovered {