Added CSS variables for better customization. Fixes #8

Author: edvilme

components/alt-bits-carrousel.js

@@ -4,10 +4,10 @@ BitsCarrouselTemplate.innerHTML = `
         :host{
             display: inline-flex;
             align-items: center;
-            column-gap: 1em;
+            column-gap: var(--bits-carrousel_column-gap);
         }
         :host>*:hover{
-            transform: scale(1.04)
+            transform: var(--bits-carrousel_circle-hover-transform);
         }
     </style>
 `;

components/alt-bits-circle.js

@@ -8,18 +8,18 @@ BitsCircleTemplate.innerHTML = `
             align-items: center;
         }
         :host .circle{
-            background: black;
-            color: white;
+            background: var(--bits-circle_background);
+            color: var(--bits-circle_color);
             border-radius: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         :host .badge{
-            width: 200px;
+            width: var(--bits-circle_badge-width);
             padding: 4px;
-            font-weight: 600;
-            font-size: 1.1rem;
+            font-weight: var(--bits-circle_badge-weight);
+            font-size: var(--bits-circle_badge-font-size);
             text-align: center;
         }
         :host .badge:empty{

components/alt-bits-participant-detail.js

@@ -3,13 +3,13 @@ BitsParticipantDetailTemplate.innerHTML = `
     <style>
         :host{
             padding: 16px;
-            background: rgba(255,255,255,0.9);
+            background: var(--bits-participation-detail_background);
             display: block; 
             position: relative;
         }
         :host alt-bits-participation:hover{
             border-radius: 8px;
-            background: whitesmoke;
+            background: var(--bits-participation-detail_participation-background-hover);
         }
     </style>
     <header>

components/alt-bits-participant.js

@@ -34,8 +34,8 @@ BitsParticipantTemplate.innerHTML = `
             height: 32px;
             width: 32px;
             border-radius: 16px;
-            background: black;
-            color: white;
+            background: var(--bits-participant_score-background);
+            color: var(--bits-participant_score-color);
             font-size: 0.8rem;
             line-height: 32px;
             text-align: center;

components/alt-bits-participation.js

@@ -22,10 +22,10 @@ BitsParticipationTemplate.innerHTML = `
         :host .participation-category{
             font-size: 1rem; 
             font-weight: 600;
-            background-color: grey;
+            background-color: var(--bits-participation_badge-background);
             padding: 2px 8px;
             border-radius: 16px;
-            color: white;
+            color: var(--bits-participation_badge-color);
             margin-left: -2px
         }
         :host .participation-date{
@@ -40,8 +40,8 @@ BitsParticipationTemplate.innerHTML = `
             height: 32px;
             width: 32px;
             border-radius: 16px;
-            background-color: black;
-            color: white;
+            background-color: var(--bits-participation_score-background);
+            color: var(--bits-participation_score-color);
             line-height: 32px;
             text-align: center;
         }

components/ui-modal.js

@@ -4,18 +4,18 @@ ModalWindowTemplate.innerHTML = `
         :host>div{
             position: fixed;
             top: 0; bottom: 0; left: 0; right: 0;
-            background-color: rgba(240,240,240,0.6);
-            backdrop-filter: blur(16px);
+            background-color: var(--ui-modal_background);
+            backdrop-filter: var(--ui-modal_backdrop-filter);
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 8px
         }
         :host modal{
             margin-top: 8px;
-            max-width: 600px;
+            max-width: var(--ui-modal_max-width);
             width: 100%;
-            max-height: 90vh;
+            max-height: var(--ui-modal_max-height);
             overflow: auto        
         }
     </style>

style.css

@@ -1,4 +1,29 @@
 :root{
+    --bits-carrousel_circle-hover-transform: scale(1.05);
+    --bits-carrousel_column-gap: 1em;
+
+    --bits-circle_background: black;
+    --bits-circle_color: white;
+    --bits-circle_badge-width: 200px;
+    --bits-circle_badge-weight: 600;
+    --bits-circle_badge-font-size: 1.1rem;
+
+    --bits-participation-detail_background: rgba(255,255,255,0.8);
+    --bits-participation-detail_participation-background-hover: whitesmoke;
+
+    --bits-participant_score-background: black;
+    --bits-participant_score-color: white;
+
+    --bits-participation_badge-background: grey;
+    --bits-participation_badge-color: white;
+
+    --bits-participation_score-background: black;
+    --bits-participation_score-color: white;
+
+    --ui-modal_background: rgba(240,240,240,0.6);
+    --ui-modal_backdrop-filter: blur(16px);
+    --ui-modal_max-width: 600px;
+    --ui-modal_max-height: 90vh;
 
 }
 body{