updating constants and updating components to use css constants

ui/src/components/radio-group/style.css

@@ -1,19 +1,30 @@
+~boxes: "../../shared/constants.js";
+~colors: "../../shared/constants.js";
+
+:root {
+   --border-checked: ~boxes.border.checked;
+   --border-unchecked: ~boxes.border.unchecked;
+   --border-radius: ~boxes.borderRadius;
+   --bottom-shaddow: ~boxes.bottomShaddow;
+}
+
 .group {
   & .item {
     cursor: pointer;
     background: #FFFFFF;
-    border: 1px solid #D8D8D8;
+    border: var(--border-unchecked);
-    box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.05);
+    box-shadow: var(--bottom-shaddow);
-    border-radius: 4px;
+    border-radius: 4pxvar(--border-radius);
-    margin-bottom: 15px;
+    margin-bottom: remCalc(15);
-    padding: 25px;
+    padding: remCalc(25);
 
     &:last-child {
       margin-bottom: initial;
     }
 
     &.checked {
-      border: 1px solid #1D35BC;
+      border: var(--border-checked);
+      box-shadow: var(--bottom-shaddow);
     }
 
     &.disabled {

ui/src/components/tab/style.css

@@ -1,11 +1,20 @@
 @import '../../shared/mixins.css';
 
+~boxes: "../../shared/constants.js";
+~colors: "../../shared/constants.js";
+
+:root {
+   --border-unchecked: ~boxes.border.unchecked;
+   --border-radius: ~boxes.borderRadius;
+   --bottom-shaddow: ~boxes.bottomShaddow;
+}
+
 .tab {
   display: inline;
 
   & .label {
     background: #F2F2F2;
-    border: 1px solid #D8D8D8;
+    border: var(--border-unchecked);
     color: #646464;
     display: inline-block;
     font-size: remCalc(20);
@@ -38,7 +47,7 @@
     display: block;
     background: white;
     padding: remCalc(0 20);
-    border: 1px solid #D8D8D8;
+    border: var(--border-unchecked);
     background: #FAFAFA;
     float: left;
     font-size: remCalc(16);

ui/src/components/toggle/style.css

@@ -4,6 +4,17 @@
  * - We shouldn't use #FFFFFF but a variation of it to have less contrast
  */
 
+~boxes: "../../shared/constants.js";
+~colors: "../../shared/constants.js";
+
+:root {
+   --background-confirmed: ~colors.confirmation;
+   --border-confirmed: ~boxes.border.confirmed;
+   --border-unchecked: ~boxes.border.unchecked;
+   --border-radius: ~boxes.borderRadius;
+   --bottom-shaddow: ~boxes.bottomShaddow;
+}
+
 .toggle {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: #464646;
@@ -25,13 +36,13 @@
 
   & .btn {
     background: #FFFFFF;
-    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05);
+    box-shadow: var(--bottom-shaddow);
-    border-radius: 3px;
+    border-radius: var(--border-radius);
   }
 
   &.on {
-    background: #38C647;
+    background: var(--background-confirmed);
-    border: 1px solid #23AC32;
+    border: var(--border-confirmed);
 
     & .label {
       float: right;
@@ -45,7 +56,7 @@
 
   &.off {
     background: #E6E6E6;
-    border: 1px solid #D8D8D8;
+    border: var(--border-unchecked);
 
     & .label {
       float: left;

ui/src/components/widget/style.css

@@ -1,7 +1,14 @@
+~boxes: "../../shared/constants.js";
+
+:root {
+  --border-checked: ~boxes.border.checked;
+  --border-unchecked: ~boxes.border.unchecked;
+}
+
 .content {
   cursor: pointer;
   border-radius: 4px;
-  border: 1px solid #d8d8d8;
+  border: var(--border-uncheckedx);
   padding: remCalc(36);
   & img {
     max-width: 100%;
@@ -14,7 +21,7 @@
 
   &:checked {
     & ~ .content {
-      border: 1px solid #2532bb;
+      border: var(--border-checked);
     }
   }
 

ui/src/shared/constants.js

@@ -70,6 +70,11 @@ const boxes = {
   borderRadius: 4,
   bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
   insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)'
+  border: {
+    checked: '1px solid #2532bb',
+    unchecked: '1px solid #d8d8d8',
+    confirmed: '1px solid #23AC32'
+  }
 };
 
 const forms = {