@bodynarf/react.components 1.14.1 → 1.14.3

package/components/primitives/switch/component/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { emptyFn, generateGuid, getClassName, isNotNullish, isNullish } from "@bodynarf/utils";
-import { ElementSize } from "../../../../types";
+import { ElementColor, ElementSize } from "../../../../types";
 import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../../utils";
 import ComponentWithLabel from "../../internal/componentWithLabel";
 import "./style.scss";
 /** Switch/Toggle input component */
-const Switch = ({ onValueChange = emptyFn, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, rounded = false, outlined = false, thin = false, rtl = false, isFormLabel = false, className, data, title }) => {
+const Switch = ({ onValueChange = emptyFn, defaultValue, label, name = generateGuid(), size = ElementSize.Normal, style = ElementColor.Primary, disabled = false, rounded = false, outlined = false, thin = false, rtl = false, isFormLabel = false, className, data, title }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
     const elClassName = getClassName([
         "switch",

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

@@ -6,7 +6,7 @@
   opacity: 0;
 }
 .switch[type=checkbox].bbr-switch:focus + label::before {
-  outline: 1px dotted hsl(0, 0%, 71%);
+  outline: 1px dotted var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch[disabled] {
   cursor: not-allowed;
@@ -23,9 +23,6 @@
 .switch[type=checkbox].bbr-switch[disabled] + label:hover {
   cursor: not-allowed;
 }
-.switch[type=checkbox].bbr-switch:checked + label::before {
-  background: hsl(171, 100%, 41%);
-}
 .switch[type=checkbox].bbr-switch + label {
   position: relative;
   display: initial;
@@ -43,8 +40,8 @@
   width: 3rem;
   height: 1.5rem;
   border: 0.1rem solid transparent;
-  border-radius: 4px;
-  background: hsl(0, 0%, 71%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
   content: "";
 }
 .switch[type=checkbox].bbr-switch + label::after {
@@ -55,8 +52,8 @@
   width: 1rem;
   height: 1rem;
   transform: translate3d(0, 0, 0);
-  border-radius: 4px;
-  background: hsl(0, 0%, 100%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
   transition: all 0.25s ease-out;
   content: "";
 }
@@ -76,6 +73,9 @@
   left: auto;
   right: 1.625rem;
 }
+.switch[type=checkbox].bbr-switch:checked + label::before {
+  background: var(--bulma-primary, #00d1b2);
+}
 .switch[type=checkbox].bbr-switch:checked + label::after {
   left: 1.625rem;
 }
@@ -85,17 +85,17 @@
 }
 .switch[type=checkbox].bbr-switch.is-outlined + label::before {
   background-color: transparent;
-  border-color: hsl(0, 0%, 71%);
+  border-color: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-outlined + label::after {
-  background: hsl(0, 0%, 71%);
+  background: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(171, 100%, 41%);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-outlined:checked + label::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-thin + label::before {
   top: 0.375rem;
@@ -124,8 +124,8 @@
   width: 2.25rem;
   height: 1.125rem;
   border: 0.1rem solid transparent;
-  border-radius: 4px;
-  background: hsl(0, 0%, 71%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
   content: "";
 }
 .switch[type=checkbox].bbr-switch.is-small + label::after {
@@ -136,8 +136,8 @@
   width: 0.625rem;
   height: 0.625rem;
   transform: translate3d(0, 0, 0);
-  border-radius: 4px;
-  background: hsl(0, 0%, 100%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
   transition: all 0.25s ease-out;
   content: "";
 }
@@ -157,6 +157,9 @@
   left: auto;
   right: 1.25rem;
 }
+.switch[type=checkbox].bbr-switch.is-small:checked + label::before {
+  background: var(--bulma-primary, #00d1b2);
+}
 .switch[type=checkbox].bbr-switch.is-small:checked + label::after {
   left: 1.25rem;
 }
@@ -166,17 +169,17 @@
 }
 .switch[type=checkbox].bbr-switch.is-small.is-outlined + label::before {
   background-color: transparent;
-  border-color: hsl(0, 0%, 71%);
+  border-color: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-small.is-outlined + label::after {
-  background: hsl(0, 0%, 71%);
+  background: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(171, 100%, 41%);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-small.is-thin + label::before {
   top: 0.28125rem;
@@ -205,8 +208,8 @@
   width: 3.75rem;
   height: 1.875rem;
   border: 0.1rem solid transparent;
-  border-radius: 4px;
-  background: hsl(0, 0%, 71%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
   content: "";
 }
 .switch[type=checkbox].bbr-switch.is-medium + label::after {
@@ -217,8 +220,8 @@
   width: 1.375rem;
   height: 1.375rem;
   transform: translate3d(0, 0, 0);
-  border-radius: 4px;
-  background: hsl(0, 0%, 100%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
   transition: all 0.25s ease-out;
   content: "";
 }
@@ -238,6 +241,9 @@
   left: auto;
   right: 2rem;
 }
+.switch[type=checkbox].bbr-switch.is-medium:checked + label::before {
+  background: var(--bulma-primary, #00d1b2);
+}
 .switch[type=checkbox].bbr-switch.is-medium:checked + label::after {
   left: 2rem;
 }
@@ -247,17 +253,17 @@
 }
 .switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::before {
   background-color: transparent;
-  border-color: hsl(0, 0%, 71%);
+  border-color: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::after {
-  background: hsl(0, 0%, 71%);
+  background: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(171, 100%, 41%);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-medium.is-thin + label::before {
   top: 0.46875rem;
@@ -286,8 +292,8 @@
   width: 4.5rem;
   height: 2.25rem;
   border: 0.1rem solid transparent;
-  border-radius: 4px;
-  background: hsl(0, 0%, 71%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
   content: "";
 }
 .switch[type=checkbox].bbr-switch.is-large + label::after {
@@ -298,8 +304,8 @@
   width: 1.75rem;
   height: 1.75rem;
   transform: translate3d(0, 0, 0);
-  border-radius: 4px;
-  background: hsl(0, 0%, 100%);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
   transition: all 0.25s ease-out;
   content: "";
 }
@@ -319,6 +325,9 @@
   left: auto;
   right: 2.375rem;
 }
+.switch[type=checkbox].bbr-switch.is-large:checked + label::before {
+  background: var(--bulma-primary, #00d1b2);
+}
 .switch[type=checkbox].bbr-switch.is-large:checked + label::after {
   left: 2.375rem;
 }
@@ -328,17 +337,17 @@
 }
 .switch[type=checkbox].bbr-switch.is-large.is-outlined + label::before {
   background-color: transparent;
-  border-color: hsl(0, 0%, 71%);
+  border-color: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-large.is-outlined + label::after {
-  background: hsl(0, 0%, 71%);
+  background: var(--bulma-grey-light, #b5b5b5);
 }
 .switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(171, 100%, 41%);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-large.is-thin + label::before {
   top: 0.5625rem;
@@ -350,132 +359,80 @@
 .switch[type=checkbox].bbr-switch.is-large.is-rounded + label::after {
   border-radius: 50%;
 }
-.switch[type=checkbox].bbr-switch.is-white:checked + label::before {
-  background: hsl(0, 0%, 100%);
-}
-.switch[type=checkbox].bbr-switch.is-white.is-outlined:checked + label::before {
-  background-color: transparent;
-  border-color: hsl(0, 0%, 100%) !important;
-}
-.switch[type=checkbox].bbr-switch.is-white.is-outlined:checked + label::after {
-  background: hsl(0, 0%, 100%);
-}
-.switch[type=checkbox].bbr-switch.is-white.is-thin.is-outlined:checked + label::after {
-  box-shadow: none;
-}
-.switch[type=checkbox].bbr-switch.is-black:checked + label::before {
-  background: hsl(0, 0%, 4%);
-}
-.switch[type=checkbox].bbr-switch.is-black.is-outlined:checked + label::before {
-  background-color: transparent;
-  border-color: hsl(0, 0%, 4%) !important;
-}
-.switch[type=checkbox].bbr-switch.is-black.is-outlined:checked + label::after {
-  background: hsl(0, 0%, 4%);
-}
-.switch[type=checkbox].bbr-switch.is-black.is-thin.is-outlined:checked + label::after {
-  box-shadow: none;
-}
-.switch[type=checkbox].bbr-switch.is-light:checked + label::before {
-  background: hsl(0, 0%, 96%);
-}
-.switch[type=checkbox].bbr-switch.is-light.is-outlined:checked + label::before {
-  background-color: transparent;
-  border-color: hsl(0, 0%, 96%) !important;
-}
-.switch[type=checkbox].bbr-switch.is-light.is-outlined:checked + label::after {
-  background: hsl(0, 0%, 96%);
-}
-.switch[type=checkbox].bbr-switch.is-light.is-thin.is-outlined:checked + label::after {
-  box-shadow: none;
-}
-.switch[type=checkbox].bbr-switch.is-dark:checked + label::before {
-  background: hsl(0, 0%, 21%);
-}
-.switch[type=checkbox].bbr-switch.is-dark.is-outlined:checked + label::before {
-  background-color: transparent;
-  border-color: hsl(0, 0%, 21%) !important;
-}
-.switch[type=checkbox].bbr-switch.is-dark.is-outlined:checked + label::after {
-  background: hsl(0, 0%, 21%);
-}
-.switch[type=checkbox].bbr-switch.is-dark.is-thin.is-outlined:checked + label::after {
-  box-shadow: none;
-}
 .switch[type=checkbox].bbr-switch.is-primary:checked + label::before {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(171, 100%, 41%) !important;
+  border-color: var(--bulma-primary, #00d1b2) !important;
 }
 .switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch.is-primary.is-thin.is-outlined:checked + label::after {
   box-shadow: none;
 }
 .switch[type=checkbox].bbr-switch.is-link:checked + label::before {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 .switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(229, 53%, 53%) !important;
+  border-color: var(--bulma-link, #485fc7) !important;
 }
 .switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::after {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 .switch[type=checkbox].bbr-switch.is-link.is-thin.is-outlined:checked + label::after {
   box-shadow: none;
 }
 .switch[type=checkbox].bbr-switch.is-info:checked + label::before {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 .switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(207, 61%, 53%) !important;
+  border-color: var(--bulma-info, #3e8ed0) !important;
 }
 .switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::after {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 .switch[type=checkbox].bbr-switch.is-info.is-thin.is-outlined:checked + label::after {
   box-shadow: none;
 }
 .switch[type=checkbox].bbr-switch.is-success:checked + label::before {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 .switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(153, 53%, 53%) !important;
+  border-color: var(--bulma-success, #48c78e) !important;
 }
 .switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::after {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 .switch[type=checkbox].bbr-switch.is-success.is-thin.is-outlined:checked + label::after {
   box-shadow: none;
 }
 .switch[type=checkbox].bbr-switch.is-warning:checked + label::before {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 .switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(44, 100%, 77%) !important;
+  border-color: var(--bulma-warning, #ffe08a) !important;
 }
 .switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::after {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 .switch[type=checkbox].bbr-switch.is-warning.is-thin.is-outlined:checked + label::after {
   box-shadow: none;
 }
 .switch[type=checkbox].bbr-switch.is-danger:checked + label::before {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 .switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::before {
   background-color: transparent;
-  border-color: hsl(348, 86%, 61%) !important;
+  border-color: var(--bulma-danger, #f14668) !important;
 }
 .switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::after {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 .switch[type=checkbox].bbr-switch.is-danger.is-thin.is-outlined:checked + label::after {
   box-shadow: none;

package/components/primitives/switch/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)
+);
 
 $switch-background: $grey-light !default;
 $switch-border: 0.1rem solid transparent !default;
@@ -15,7 +44,7 @@ $switch-focus: 1px dotted $grey-light !default;
     $switch-width: $switch-height * 2;
     $paddle-height: $switch-height - ($switch-paddle-offset * 2);
     $paddle-width: $switch-height - ($switch-paddle-offset * 2);
-    $paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5);
+    $paddle-active-offset: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5);
 
     + label {
         position: relative;
@@ -70,12 +99,16 @@ $switch-focus: 1px dotted $grey-light !default;
 
         &::after {
             left: auto;
-            right: $paddle-active-offest;
+            right: $paddle-active-offset;
         }
     }
 
+    &:checked + label::before {
+        background: $switch-background-active;
+    }
+
     &:checked + label::after {
-        left: $paddle-active-offest;
+        left: $paddle-active-offset;
     }
 
     &.is-rtl:checked + label::after {
@@ -160,10 +193,6 @@ $switch-focus: 1px dotted $grey-light !default;
         }
     }
 
-    &:checked + label::before {
-        background: $switch-background-active;
-    }
-
     // Size variations
     @include switch-size($size-normal);
 
@@ -181,8 +210,8 @@ $switch-focus: 1px dotted $grey-light !default;
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
-        $color-invert: nth($pair, 2);
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
 
         &.is-#{$name} {
             &:checked + label::before {

package/components/progress/component/style.css

@@ -3,58 +3,58 @@
   appearance: none;
   height: 1rem;
   border: none;
-  border-radius: 4px;
-  background-color: #f5f5f5;
+  border-radius: var(--bulma-radius, 4px);
+  background-color: var(--bulma-background, #f5f5f5);
   overflow: hidden;
 }
 .bbr-progress.bbr-progress--animated {
   position: relative;
-  background-color: #f5f5f5;
+  background-color: var(--bulma-background, #f5f5f5);
 }
 .bbr-progress.bbr-progress--animated .bbr-progress-fill {
   height: 100%;
-  background-color: #485fc7;
-  border-radius: 4px;
-  transition: width 0.25s;
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+  transition: width var(--bulma-speed, 0.25s);
   animation: bbr-progress-animated 1s linear infinite;
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
   background-size: 1rem 1rem;
 }
 .bbr-progress.bbr-progress--animated.is-primary .bbr-progress-fill {
-  background-color: #485fc7;
+  background-color: var(--bulma-primary, #00d1b2);
 }
 .bbr-progress.bbr-progress--animated.is-link .bbr-progress-fill {
-  background-color: #485fc7;
+  background-color: var(--bulma-link, #485fc7);
 }
 .bbr-progress.bbr-progress--animated.is-info .bbr-progress-fill {
-  background-color: #3e8ed0;
+  background-color: var(--bulma-info, #3e8ed0);
 }
 .bbr-progress.bbr-progress--animated.is-success .bbr-progress-fill {
-  background-color: #48c78e;
+  background-color: var(--bulma-success, #48c78e);
 }
 .bbr-progress.bbr-progress--animated.is-warning .bbr-progress-fill {
-  background-color: #ffe08a;
+  background-color: var(--bulma-warning, #ffe08a);
 }
 .bbr-progress.bbr-progress--animated.is-danger .bbr-progress-fill {
-  background-color: #f14668;
+  background-color: var(--bulma-danger, #f14668);
 }
 .bbr-progress::-webkit-progress-bar {
-  background-color: #f5f5f5;
-  border-radius: 4px;
+  background-color: var(--bulma-background, #f5f5f5);
+  border-radius: var(--bulma-radius, 4px);
 }
 .bbr-progress::-webkit-progress-value {
-  background-color: #485fc7;
-  border-radius: 4px;
-  transition: width 0.25s;
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+  transition: width var(--bulma-speed, 0.25s);
 }
 .bbr-progress::-moz-progress-bar {
-  background-color: #485fc7;
-  border-radius: 4px;
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
 }
 .bbr-progress-value {
   margin-top: 0.25rem;
   font-size: 0.75rem;
-  color: #4a4a4a;
+  color: var(--bulma-text, #4a4a4a);
   text-align: center;
 }
 .bbr-progress.is-small {
@@ -70,40 +70,40 @@
   height: 1.5rem;
 }
 .bbr-progress.is-primary::-webkit-progress-value {
-  background-color: #485fc7;
+  background-color: var(--bulma-primary, #00d1b2);
 }
 .bbr-progress.is-primary::-moz-progress-bar {
-  background-color: #485fc7;
+  background-color: var(--bulma-primary, #00d1b2);
 }
 .bbr-progress.is-link::-webkit-progress-value {
-  background-color: #485fc7;
+  background-color: var(--bulma-link, #485fc7);
 }
 .bbr-progress.is-link::-moz-progress-bar {
-  background-color: #485fc7;
+  background-color: var(--bulma-link, #485fc7);
 }
 .bbr-progress.is-info::-webkit-progress-value {
-  background-color: #3e8ed0;
+  background-color: var(--bulma-info, #3e8ed0);
 }
 .bbr-progress.is-info::-moz-progress-bar {
-  background-color: #3e8ed0;
+  background-color: var(--bulma-info, #3e8ed0);
 }
 .bbr-progress.is-success::-webkit-progress-value {
-  background-color: #48c78e;
+  background-color: var(--bulma-success, #48c78e);
 }
 .bbr-progress.is-success::-moz-progress-bar {
-  background-color: #48c78e;
+  background-color: var(--bulma-success, #48c78e);
 }
 .bbr-progress.is-warning::-webkit-progress-value {
-  background-color: #ffe08a;
+  background-color: var(--bulma-warning, #ffe08a);
 }
 .bbr-progress.is-warning::-moz-progress-bar {
-  background-color: #ffe08a;
+  background-color: var(--bulma-warning, #ffe08a);
 }
 .bbr-progress.is-danger::-webkit-progress-value {
-  background-color: #f14668;
+  background-color: var(--bulma-danger, #f14668);
 }
 .bbr-progress.is-danger::-moz-progress-bar {
-  background-color: #f14668;
+  background-color: var(--bulma-danger, #f14668);
 }
 .bbr-progress--animated::-webkit-progress-value {
   animation: bbr-progress-animated 2s linear infinite;
@@ -117,7 +117,7 @@
 }
 .bbr-progress--indeterminate {
   position: relative;
-  background-color: #f5f5f5;
+  background-color: var(--bulma-background, #f5f5f5);
 }
 .bbr-progress--indeterminate::after {
   content: "";
@@ -126,27 +126,27 @@
   left: 0;
   bottom: 0;
   width: 50%;
-  background-color: #485fc7;
-  border-radius: 4px;
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
   animation: bbr-progress-indeterminate 1.5s ease-in-out infinite;
 }
 .bbr-progress--indeterminate.is-primary::after {
-  background-color: #485fc7;
+  background-color: var(--bulma-primary, #00d1b2);
 }
 .bbr-progress--indeterminate.is-link::after {
-  background-color: #485fc7;
+  background-color: var(--bulma-link, #485fc7);
 }
 .bbr-progress--indeterminate.is-info::after {
-  background-color: #3e8ed0;
+  background-color: var(--bulma-info, #3e8ed0);
 }
 .bbr-progress--indeterminate.is-success::after {
-  background-color: #48c78e;
+  background-color: var(--bulma-success, #48c78e);
 }
 .bbr-progress--indeterminate.is-warning::after {
-  background-color: #ffe08a;
+  background-color: var(--bulma-warning, #ffe08a);
 }
 .bbr-progress--indeterminate.is-danger::after {
-  background-color: #f14668;
+  background-color: var(--bulma-danger, #f14668);
 }
 
 @keyframes bbr-progress-animated {