@bodynarf/react.components 1.14.1 → 1.14.2

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

@@ -38,7 +38,7 @@
   transform: translateY(-50%);
   width: 1.25rem;
   height: 1.25rem;
-  border: 0.1rem solid hsl(0, 0%, 86%);
+  border: 0.1rem solid var(--bulma-grey-lighter, #dbdbdb);
   border-radius: 50%;
   background: transparent;
   content: "";
@@ -52,7 +52,7 @@
   width: 0.625rem;
   height: 0.625rem;
   border-radius: 50%;
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
   content: "";
   transition: transform 0.15s ease-out;
 }
@@ -60,14 +60,14 @@
   transform: translateY(-50%) scale(1);
 }
 .is-checkradio.bbr-radio[type=radio]:checked + label::before {
-  border-color: hsl(171, 100%, 41%);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .is-checkradio.bbr-radio[type=radio]:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio]:hover:not(:disabled) + label::before {
-  border-color: hsl(0, 0%, 71%);
+  border-color: var(--bulma-grey-light, #b5b5b5);
 }
 .is-checkradio.bbr-radio[type=radio]:disabled {
   cursor: not-allowed;
@@ -84,8 +84,8 @@
 }
 .is-checkradio.bbr-radio[type=radio].is-block + label {
   padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-  background: hsl(0, 0%, 98%);
-  border-radius: 4px;
+  background: var(--bulma-white-bis, #fafafa);
+  border-radius: var(--bulma-radius, 4px);
   width: 100%;
 }
 .is-checkradio.bbr-radio[type=radio].is-block + label::before {
@@ -95,24 +95,24 @@
   left: 0.8125rem;
 }
 .is-checkradio.bbr-radio[type=radio].is-block + label:hover {
-  background: hsl(0, 0%, 96%);
+  background: var(--bulma-white-ter, #f5f5f5);
 }
 .is-checkradio.bbr-radio[type=radio].is-block:checked + label {
-  background: rgba(0, 209.1, 177.735, 0.1);
+  background: rgba(var(--bulma-primary, #00d1b2), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].has-no-border + label::before {
   border: none;
-  background: hsl(0, 0%, 86%);
+  background: var(--bulma-grey-lighter, #dbdbdb);
 }
 .is-checkradio.bbr-radio[type=radio].has-no-border:checked + label::before {
-  background: rgba(0, 209.1, 177.735, 0.2);
+  background: rgba(var(--bulma-primary, #00d1b2), 0.2);
 }
 .is-checkradio.bbr-radio[type=radio].has-background-color + label::before {
-  background: hsl(0, 0%, 96%);
+  background: var(--bulma-white-ter, #f5f5f5);
 }
 .is-checkradio.bbr-radio[type=radio].has-background-color:checked + label::before {
-  background: rgba(0, 209.1, 177.735, 0.15);
-  border-color: hsl(171, 100%, 41%);
+  background: rgba(var(--bulma-primary, #00d1b2), 0.15);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .is-checkradio.bbr-radio[type=radio].is-small + label {
   font-size: 0.75rem;
@@ -180,203 +180,123 @@
 .is-checkradio.bbr-radio[type=radio].is-large.is-block + label::after {
   left: 0.9375rem;
 }
-.is-checkradio.bbr-radio[type=radio].is-white:checked + label::before {
-  border-color: hsl(0, 0%, 100%);
-}
-.is-checkradio.bbr-radio[type=radio].is-white:checked + label::after {
-  background: hsl(0, 0%, 100%);
-}
-.is-checkradio.bbr-radio[type=radio].is-white:focus + label::before {
-  border-color: hsl(0, 0%, 100%);
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
-}
-.is-checkradio.bbr-radio[type=radio].is-white.is-block:checked + label {
-  background: rgba(255, 255, 255, 0.1);
-}
-.is-checkradio.bbr-radio[type=radio].is-white.has-background-color:checked + label::before {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: hsl(0, 0%, 100%);
-}
-.is-checkradio.bbr-radio[type=radio].is-white.has-no-border:checked + label::before {
-  background: rgba(255, 255, 255, 0.2);
-}
-.is-checkradio.bbr-radio[type=radio].is-black:checked + label::before {
-  border-color: hsl(0, 0%, 4%);
-}
-.is-checkradio.bbr-radio[type=radio].is-black:checked + label::after {
-  background: hsl(0, 0%, 4%);
-}
-.is-checkradio.bbr-radio[type=radio].is-black:focus + label::before {
-  border-color: hsl(0, 0%, 4%);
-  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
-}
-.is-checkradio.bbr-radio[type=radio].is-black.is-block:checked + label {
-  background: rgba(10.2, 10.2, 10.2, 0.1);
-}
-.is-checkradio.bbr-radio[type=radio].is-black.has-background-color:checked + label::before {
-  background: rgba(10.2, 10.2, 10.2, 0.15);
-  border-color: hsl(0, 0%, 4%);
-}
-.is-checkradio.bbr-radio[type=radio].is-black.has-no-border:checked + label::before {
-  background: rgba(10.2, 10.2, 10.2, 0.2);
-}
-.is-checkradio.bbr-radio[type=radio].is-light:checked + label::before {
-  border-color: hsl(0, 0%, 96%);
-}
-.is-checkradio.bbr-radio[type=radio].is-light:checked + label::after {
-  background: hsl(0, 0%, 96%);
-}
-.is-checkradio.bbr-radio[type=radio].is-light:focus + label::before {
-  border-color: hsl(0, 0%, 96%);
-  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
-}
-.is-checkradio.bbr-radio[type=radio].is-light.is-block:checked + label {
-  background: rgba(244.8, 244.8, 244.8, 0.1);
-}
-.is-checkradio.bbr-radio[type=radio].is-light.has-background-color:checked + label::before {
-  background: rgba(244.8, 244.8, 244.8, 0.15);
-  border-color: hsl(0, 0%, 96%);
-}
-.is-checkradio.bbr-radio[type=radio].is-light.has-no-border:checked + label::before {
-  background: rgba(244.8, 244.8, 244.8, 0.2);
-}
-.is-checkradio.bbr-radio[type=radio].is-dark:checked + label::before {
-  border-color: hsl(0, 0%, 21%);
-}
-.is-checkradio.bbr-radio[type=radio].is-dark:checked + label::after {
-  background: hsl(0, 0%, 21%);
-}
-.is-checkradio.bbr-radio[type=radio].is-dark:focus + label::before {
-  border-color: hsl(0, 0%, 21%);
-  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
-}
-.is-checkradio.bbr-radio[type=radio].is-dark.is-block:checked + label {
-  background: rgba(53.55, 53.55, 53.55, 0.1);
-}
-.is-checkradio.bbr-radio[type=radio].is-dark.has-background-color:checked + label::before {
-  background: rgba(53.55, 53.55, 53.55, 0.15);
-  border-color: hsl(0, 0%, 21%);
-}
-.is-checkradio.bbr-radio[type=radio].is-dark.has-no-border:checked + label::before {
-  background: rgba(53.55, 53.55, 53.55, 0.2);
-}
 .is-checkradio.bbr-radio[type=radio].is-primary:checked + label::before {
-  border-color: hsl(171, 100%, 41%);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .is-checkradio.bbr-radio[type=radio].is-primary:checked + label::after {
-  background: hsl(171, 100%, 41%);
+  background: var(--bulma-primary, #00d1b2);
 }
 .is-checkradio.bbr-radio[type=radio].is-primary:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio].is-primary.is-block:checked + label {
-  background: rgba(0, 209.1, 177.735, 0.1);
+  background: rgba(var(--bulma-primary, #00d1b2), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].is-primary.has-background-color:checked + label::before {
-  background: rgba(0, 209.1, 177.735, 0.15);
-  border-color: hsl(171, 100%, 41%);
+  background: rgba(var(--bulma-primary, #00d1b2), 0.15);
+  border-color: var(--bulma-primary, #00d1b2);
 }
 .is-checkradio.bbr-radio[type=radio].is-primary.has-no-border:checked + label::before {
-  background: rgba(0, 209.1, 177.735, 0.2);
+  background: rgba(var(--bulma-primary, #00d1b2), 0.2);
 }
 .is-checkradio.bbr-radio[type=radio].is-link:checked + label::before {
-  border-color: hsl(229, 53%, 53%);
+  border-color: var(--bulma-link, #485fc7);
 }
 .is-checkradio.bbr-radio[type=radio].is-link:checked + label::after {
-  background: hsl(229, 53%, 53%);
+  background: var(--bulma-link, #485fc7);
 }
 .is-checkradio.bbr-radio[type=radio].is-link:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio].is-link.is-block:checked + label {
-  background: rgba(71.6295, 94.92035, 198.6705, 0.1);
+  background: rgba(var(--bulma-link, #485fc7), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].is-link.has-background-color:checked + label::before {
-  background: rgba(71.6295, 94.92035, 198.6705, 0.15);
-  border-color: hsl(229, 53%, 53%);
+  background: rgba(var(--bulma-link, #485fc7), 0.15);
+  border-color: var(--bulma-link, #485fc7);
 }
 .is-checkradio.bbr-radio[type=radio].is-link.has-no-border:checked + label::before {
-  background: rgba(71.6295, 94.92035, 198.6705, 0.2);
+  background: rgba(var(--bulma-link, #485fc7), 0.2);
 }
 .is-checkradio.bbr-radio[type=radio].is-info:checked + label::before {
-  border-color: hsl(207, 61%, 53%);
+  border-color: var(--bulma-info, #3e8ed0);
 }
 .is-checkradio.bbr-radio[type=radio].is-info:checked + label::after {
-  background: hsl(207, 61%, 53%);
+  background: var(--bulma-info, #3e8ed0);
 }
 .is-checkradio.bbr-radio[type=radio].is-info:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio].is-info.is-block:checked + label {
-  background: rgba(62.0415, 142.46085, 208.2585, 0.1);
+  background: rgba(var(--bulma-info, #3e8ed0), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].is-info.has-background-color:checked + label::before {
-  background: rgba(62.0415, 142.46085, 208.2585, 0.15);
-  border-color: hsl(207, 61%, 53%);
+  background: rgba(var(--bulma-info, #3e8ed0), 0.15);
+  border-color: var(--bulma-info, #3e8ed0);
 }
 .is-checkradio.bbr-radio[type=radio].is-info.has-no-border:checked + label::before {
-  background: rgba(62.0415, 142.46085, 208.2585, 0.2);
+  background: rgba(var(--bulma-info, #3e8ed0), 0.2);
 }
 .is-checkradio.bbr-radio[type=radio].is-success:checked + label::before {
-  border-color: hsl(153, 53%, 53%);
+  border-color: var(--bulma-success, #48c78e);
 }
 .is-checkradio.bbr-radio[type=radio].is-success:checked + label::after {
-  background: hsl(153, 53%, 53%);
+  background: var(--bulma-success, #48c78e);
 }
 .is-checkradio.bbr-radio[type=radio].is-success:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio].is-success.is-block:checked + label {
-  background: rgba(71.6295, 198.6705, 141.50205, 0.1);
+  background: rgba(var(--bulma-success, #48c78e), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].is-success.has-background-color:checked + label::before {
-  background: rgba(71.6295, 198.6705, 141.50205, 0.15);
-  border-color: hsl(153, 53%, 53%);
+  background: rgba(var(--bulma-success, #48c78e), 0.15);
+  border-color: var(--bulma-success, #48c78e);
 }
 .is-checkradio.bbr-radio[type=radio].is-success.has-no-border:checked + label::before {
-  background: rgba(71.6295, 198.6705, 141.50205, 0.2);
+  background: rgba(var(--bulma-success, #48c78e), 0.2);
 }
 .is-checkradio.bbr-radio[type=radio].is-warning:checked + label::before {
-  border-color: hsl(44, 100%, 77%);
+  border-color: var(--bulma-warning, #ffe08a);
 }
 .is-checkradio.bbr-radio[type=radio].is-warning:checked + label::after {
-  background: hsl(44, 100%, 77%);
+  background: var(--bulma-warning, #ffe08a);
 }
 .is-checkradio.bbr-radio[type=radio].is-warning:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio].is-warning.is-block:checked + label {
-  background: rgba(255, 223.72, 137.7, 0.1);
+  background: rgba(var(--bulma-warning, #ffe08a), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].is-warning.has-background-color:checked + label::before {
-  background: rgba(255, 223.72, 137.7, 0.15);
-  border-color: hsl(44, 100%, 77%);
+  background: rgba(var(--bulma-warning, #ffe08a), 0.15);
+  border-color: var(--bulma-warning, #ffe08a);
 }
 .is-checkradio.bbr-radio[type=radio].is-warning.has-no-border:checked + label::before {
-  background: rgba(255, 223.72, 137.7, 0.2);
+  background: rgba(var(--bulma-warning, #ffe08a), 0.2);
 }
 .is-checkradio.bbr-radio[type=radio].is-danger:checked + label::before {
-  border-color: hsl(348, 86%, 61%);
+  border-color: var(--bulma-danger, #f14668);
 }
 .is-checkradio.bbr-radio[type=radio].is-danger:checked + label::after {
-  background: hsl(348, 86%, 61%);
+  background: var(--bulma-danger, #f14668);
 }
 .is-checkradio.bbr-radio[type=radio].is-danger:focus + label::before {
-  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);
 }
 .is-checkradio.bbr-radio[type=radio].is-danger.is-block:checked + label {
-  background: rgba(241.077, 70.023, 104.2338, 0.1);
+  background: rgba(var(--bulma-danger, #f14668), 0.1);
 }
 .is-checkradio.bbr-radio[type=radio].is-danger.has-background-color:checked + label::before {
-  background: rgba(241.077, 70.023, 104.2338, 0.15);
-  border-color: hsl(348, 86%, 61%);
+  background: rgba(var(--bulma-danger, #f14668), 0.15);
+  border-color: var(--bulma-danger, #f14668);
 }
 .is-checkradio.bbr-radio[type=radio].is-danger.has-no-border:checked + label::before {
-  background: rgba(241.077, 70.023, 104.2338, 0.2);
+  background: rgba(var(--bulma-danger, #f14668), 0.2);
 }

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

@@ -1,4 +1,35 @@
-@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);
+$white-bis: var(--bulma-white-bis, #fafafa);
+$white-ter: var(--bulma-white-ter, #f5f5f5);
+$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)
+);
 
 .bbr-radio-group {
     display: flex;
@@ -238,7 +269,7 @@
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
+        $color: list.nth($pair, 1);
 
         &.is-#{$name} {
             &:checked + label::before {