@bodynarf/react.components 1.14.1 → 1.14.2

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;
@@ -24,7 +24,7 @@
   cursor: not-allowed;
 }
 .switch[type=checkbox].bbr-switch:checked + label::before {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .switch[type=checkbox].bbr-switch + label {
   position: relative;
@@ -43,8 +43,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 +55,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: "";
 }
@@ -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: "";
 }
@@ -166,17 +166,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 +205,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 +217,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: "";
 }
@@ -247,17 +247,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 +286,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 +298,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: "";
 }
@@ -328,17 +328,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 +350,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;
@@ -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 {

package/components/progress/component/style.scss

@@ -1,18 +1,23 @@
-// Bulma variables
-$black: #0a0a0a !default;
-$white: #fff !default;
-$light: #f5f5f5 !default;
-$dark: #363636 !default;
-$primary: #485fc7 !default;
-$link: #485fc7 !default;
-$info: #3e8ed0 !default;
-$success: #48c78e !default;
-$warning: #ffe08a !default;
-$danger: #f14668 !default;
-$text: #4a4a4a !default;
-$background: #f5f5f5 !default;
-$radius: 4px !default;
-$speed: 0.25s !default;
+// 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
+$black: var(--bulma-black, #0a0a0a);
+$white: var(--bulma-white, #fff);
+$light: var(--bulma-light, #f5f5f5);
+$dark: var(--bulma-dark, #363636);
+$primary: var(--bulma-primary, #00d1b2);
+$link: var(--bulma-link, #485fc7);
+$info: var(--bulma-info, #3e8ed0);
+$success: var(--bulma-success, #48c78e);
+$warning: var(--bulma-warning, #ffe08a);
+$danger: var(--bulma-danger, #f14668);
+$text: var(--bulma-text, #4a4a4a);
+$background: var(--bulma-background, #f5f5f5);
+$radius: var(--bulma-radius, 4px);
+$speed: var(--bulma-speed, 0.25s);
 
 $size-small: 0.75rem !default;
 $size-normal: 1rem !default;