@bodynarf/react.components 1.14.1 → 1.14.2

package/components/primitives/slider/component/style.css

@@ -21,9 +21,9 @@
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   text-align: center;
-  color: hsl(0, 0%, 100%);
-  background-color: hsl(171, 100%, 41%);
-  border-radius: 4px;
+  color: var(--bulma-white, #fff);
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
   pointer-events: none;
 }
 .bbr-slider-output::after {
@@ -34,7 +34,7 @@
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: hsl(171, 100%, 41%) transparent transparent transparent;
+  border-color: var(--bulma-primary, #00d1b2) transparent transparent transparent;
 }
 
 .bbr-slider-labels {
@@ -42,7 +42,7 @@
   justify-content: space-between;
   margin-top: 0.25rem;
   font-size: 0.75rem;
-  color: hsl(0, 0%, 48%);
+  color: var(--bulma-grey, #7a7a7a);
 }
 
 input[type=range].slider.bbr-slider {
@@ -58,24 +58,24 @@ input[type=range].slider.bbr-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
   height: 0.5rem;
-  background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-  border: 0px solid hsl(0, 0%, 48%);
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
+  background: linear-gradient(to right, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+  border: 0px solid var(--bulma-grey, #7a7a7a);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: 0px 0px 0px var(--bulma-grey, #7a7a7a);
 }
 input[type=range].slider.bbr-slider::-moz-range-track {
   box-sizing: border-box;
   width: 100%;
   height: 0.5rem;
-  background: hsl(0, 0%, 86%);
-  border: 0px solid hsl(0, 0%, 48%);
-  border-radius: 4px;
-  box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  border: 0px solid var(--bulma-grey, #7a7a7a);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: 0px 0px 0px var(--bulma-grey, #7a7a7a);
 }
 input[type=range].slider.bbr-slider::-moz-range-progress {
   height: 0.5rem;
-  background: hsl(171, 100%, 41%);
-  border-radius: 4px;
+  background: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
 }
 input[type=range].slider.bbr-slider::-ms-track {
   box-sizing: border-box;
@@ -86,21 +86,21 @@ input[type=range].slider.bbr-slider::-ms-track {
   color: transparent;
 }
 input[type=range].slider.bbr-slider::-ms-fill-lower {
-  background: hsl(171, 100%, 41%);
-  border-radius: 4px;
+  background: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
 }
 input[type=range].slider.bbr-slider::-ms-fill-upper {
-  background: hsl(0, 0%, 86%);
-  border-radius: 4px;
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  border-radius: var(--bulma-radius, 4px);
 }
 input[type=range].slider.bbr-slider::-webkit-slider-thumb {
   appearance: none;
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 71%);
-  border-radius: 4px;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
   box-shadow: none;
   transition: transform 0.2s ease;
 }
@@ -110,9 +110,9 @@ input[type=range].slider.bbr-slider::-webkit-slider-thumb:hover {
 input[type=range].slider.bbr-slider::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 71%);
-  border-radius: 4px;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
   box-shadow: none;
   transition: transform 0.2s ease;
 }
@@ -122,21 +122,21 @@ input[type=range].slider.bbr-slider::-moz-range-thumb:hover {
 input[type=range].slider.bbr-slider::-ms-thumb {
   width: 1rem;
   height: 1rem;
-  background: hsl(0, 0%, 100%);
-  border: 1px solid hsl(0, 0%, 71%);
-  border-radius: 4px;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
   box-shadow: none;
 }
 input[type=range].slider.bbr-slider:focus {
   outline: none;
 }
 input[type=range].slider.bbr-slider:focus::-webkit-slider-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider:focus::-moz-range-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider:disabled {
   cursor: not-allowed;
@@ -220,175 +220,107 @@ input[type=range].slider.bbr-slider.is-large::-ms-thumb {
   width: 1.5rem;
   margin-top: 0;
 }
-input[type=range].slider.bbr-slider.is-white::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-white::-moz-range-progress {
-  background: hsl(0, 0%, 100%);
-}
-input[type=range].slider.bbr-slider.is-white::-ms-fill-lower {
-  background: hsl(0, 0%, 100%);
-}
-input[type=range].slider.bbr-slider.is-white:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 100%);
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
-}
-input[type=range].slider.bbr-slider.is-white:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 100%);
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
-}
-input[type=range].slider.bbr-slider.is-black::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-black::-moz-range-progress {
-  background: hsl(0, 0%, 4%);
-}
-input[type=range].slider.bbr-slider.is-black::-ms-fill-lower {
-  background: hsl(0, 0%, 4%);
-}
-input[type=range].slider.bbr-slider.is-black:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 4%);
-  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
-}
-input[type=range].slider.bbr-slider.is-black:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 4%);
-  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
-}
-input[type=range].slider.bbr-slider.is-light::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-light::-moz-range-progress {
-  background: hsl(0, 0%, 96%);
-}
-input[type=range].slider.bbr-slider.is-light::-ms-fill-lower {
-  background: hsl(0, 0%, 96%);
-}
-input[type=range].slider.bbr-slider.is-light:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 96%);
-  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
-}
-input[type=range].slider.bbr-slider.is-light:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 96%);
-  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
-}
-input[type=range].slider.bbr-slider.is-dark::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-dark::-moz-range-progress {
-  background: hsl(0, 0%, 21%);
-}
-input[type=range].slider.bbr-slider.is-dark::-ms-fill-lower {
-  background: hsl(0, 0%, 21%);
-}
-input[type=range].slider.bbr-slider.is-dark:focus::-webkit-slider-thumb {
-  border-color: hsl(0, 0%, 21%);
-  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
-}
-input[type=range].slider.bbr-slider.is-dark:focus::-moz-range-thumb {
-  border-color: hsl(0, 0%, 21%);
-  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
-}
 input[type=range].slider.bbr-slider.is-primary::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-primary::-moz-range-progress {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 input[type=range].slider.bbr-slider.is-primary::-ms-fill-lower {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 input[type=range].slider.bbr-slider.is-primary:focus::-webkit-slider-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider.is-primary:focus::-moz-range-thumb {
-  border-color: hsl(171, 100%, 41%);
-  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
 }
 input[type=range].slider.bbr-slider.is-link::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-link, #485fc7) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-link::-moz-range-progress {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 input[type=range].slider.bbr-slider.is-link::-ms-fill-lower {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 input[type=range].slider.bbr-slider.is-link:focus::-webkit-slider-thumb {
-  border-color: hsl(229, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
 }
 input[type=range].slider.bbr-slider.is-link:focus::-moz-range-thumb {
-  border-color: hsl(229, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
 }
 input[type=range].slider.bbr-slider.is-info::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-info, #3e8ed0) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-info::-moz-range-progress {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 input[type=range].slider.bbr-slider.is-info::-ms-fill-lower {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 input[type=range].slider.bbr-slider.is-info:focus::-webkit-slider-thumb {
-  border-color: hsl(207, 61%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
 }
 input[type=range].slider.bbr-slider.is-info:focus::-moz-range-thumb {
-  border-color: hsl(207, 61%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
 }
 input[type=range].slider.bbr-slider.is-success::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-success, #48c78e) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-success::-moz-range-progress {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 input[type=range].slider.bbr-slider.is-success::-ms-fill-lower {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 input[type=range].slider.bbr-slider.is-success:focus::-webkit-slider-thumb {
-  border-color: hsl(153, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
 }
 input[type=range].slider.bbr-slider.is-success:focus::-moz-range-thumb {
-  border-color: hsl(153, 53%, 53%);
-  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
 }
 input[type=range].slider.bbr-slider.is-warning::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-warning, #ffe08a) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-warning::-moz-range-progress {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 input[type=range].slider.bbr-slider.is-warning::-ms-fill-lower {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 input[type=range].slider.bbr-slider.is-warning:focus::-webkit-slider-thumb {
-  border-color: hsl(44, 100%, 77%);
-  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
 }
 input[type=range].slider.bbr-slider.is-warning:focus::-moz-range-thumb {
-  border-color: hsl(44, 100%, 77%);
-  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
 }
 input[type=range].slider.bbr-slider.is-danger::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to right, var(--bulma-danger, #f14668) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-danger::-moz-range-progress {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 input[type=range].slider.bbr-slider.is-danger::-ms-fill-lower {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 input[type=range].slider.bbr-slider.is-danger:focus::-webkit-slider-thumb {
-  border-color: hsl(348, 86%, 61%);
-  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
 }
 input[type=range].slider.bbr-slider.is-danger:focus::-moz-range-thumb {
-  border-color: hsl(348, 86%, 61%);
-  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
 }
 input[type=range].slider.bbr-slider.is-vertical {
   writing-mode: vertical-lr;
@@ -400,39 +332,27 @@ input[type=range].slider.bbr-slider.is-vertical {
 input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-runnable-track {
   width: 0.5rem;
   height: 100%;
-  background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-thumb {
   margin-top: 0;
   margin-left: -0.25rem;
 }
-input[type=range].slider.bbr-slider.is-vertical.is-white::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-vertical.is-black::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-vertical.is-light::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
-input[type=range].slider.bbr-slider.is-vertical.is-dark::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
-}
 input[type=range].slider.bbr-slider.is-vertical.is-primary::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-link::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-link, #485fc7) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-info::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-info, #3e8ed0) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-success::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-success, #48c78e) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-warning::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-warning, #ffe08a) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }
 input[type=range].slider.bbr-slider.is-vertical.is-danger::-webkit-slider-runnable-track {
-  background: linear-gradient(to top, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  background: linear-gradient(to top, var(--bulma-danger, #f14668) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
 }

package/components/primitives/slider/component/style.scss

@@ -1,4 +1,33 @@
-@import "bulma/sass/utilities/derived-variables";
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$radius: var(--bulma-radius, 4px);
+
+// Sizes - Sass variables for calculations
+$size-small: 0.75rem;
+$size-normal: 1rem;
+$size-medium: 1.25rem;
+$size-large: 1.5rem;
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
 
 $slider-radius: $radius !default;
 $slider-track-background: $grey-lighter !default;
@@ -248,7 +277,7 @@ input[type="range"].slider.bbr-slider {
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
+        $color: list.nth($pair, 1);
 
         &.is-#{$name} {
             &::-webkit-slider-runnable-track {
@@ -305,7 +334,7 @@ input[type="range"].slider.bbr-slider {
         }
 
         @each $name, $pair in $colors {
-            $color: nth($pair, 1);
+            $color: list.nth($pair, 1);
 
             &.is-#{$name} {
                 &::-webkit-slider-runnable-track {