final update before going public

src/js/orbit-label.js

@@ -26,17 +26,15 @@ export class OrbitLabel extends HTMLElement {
         svg * {
           pointer-events: stroke;
         }
-        text {
-          font-size: inherit;
-        }
+        
         path {
           fill: transparent;
-          stroke: var(--color, transparent);
+          stroke: var(--o-label-color);
           transition: stroke 0.3s;
         }
        
         :host(:hover) path {
-          stroke: var(--hover-color, var(--color));
+          stroke: var(--o-hover-label-color, var(--o-label-color));
           
         }
       

src/js/orbit-progress.js

@@ -21,14 +21,14 @@ export class OrbitProgress extends HTMLElement {
         }
         .progress-bar {
           fill: transparent;
-          stroke: var(--color, var(--o-cyan-light));
+          stroke: var(--o-progress-color);
           transition: stroke 0.3s;
         }
         .progress-bg {
-          stroke: var(--bgcolor, transparent);
+          stroke: var(--o-bg-color, transparent);
         }
         :host(:hover) .progress-bar {
-          stroke: var(--hover-color, var(--color));
+          stroke: var(--o-hover-progress-color, var(--o-progress-color));
           
         }
       </style>
@@ -122,7 +122,7 @@ export class OrbitProgress extends HTMLElement {
       0
     );
     const shape = this.getAttribute('shape') || 'none';
-    const progressBarColor = this.getAttribute('bar-color') || 'var(--o-cyan-light)';
+    const progressBarColor = this.getAttribute('bar-color');
     const progressBgColor = this.getAttribute('bgcolor')  || 'transparent';
     const strokeWidth = parseFloat(
       getComputedStyle(this).getPropertyValue('stroke-width') || 1

src/js/orbit-sector.js

@@ -14,12 +14,12 @@
           pointer-events: stroke;
         }
        .sector {
-          stroke: var(--color, var(--o-cyan-light));
+          stroke: var(--o-sector-color, var(--o-cyan-light));
           transition: stroke 0.3s;
         }
         
         :host(:hover) .sector {
-          stroke: var(--hover-color, var(--color));
+          stroke: var(--o-hover-sector-color, var(--o-sector-color));
           
         }
    </style>
@@ -76,7 +76,7 @@
      const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue('r') || 0);
      const gap = parseFloat(getComputedStyle(this).getPropertyValue('--o-gap') || 0.001);
      const shape = this.getAttribute('shape') || 'none';
-     const sectorColor = this.getAttribute('sector-color') || '#00ff00';
+     const sectorColor = this.getAttribute('sector-color');
      const rawAngle = getComputedStyle(this).getPropertyValue('--o-angle');
      const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue('stroke-width') || 1);
      const strokeWithPercentage = ((strokeWidth / 2) * 100) / orbitRadius / 2;

src/orbit.scss

@@ -23,11 +23,4 @@
     ORBIT THEME
 ===================*/
 @import './scss/_color-theme.scss';
-@import './scss/_orbit-zone_theme.scss';
-@import './scss/_orbit-class_theme.scss';
-@import './scss/_satellite_theme.scss';
-@import './scss/_sector_theme.scss';
-@import './scss/_progress_theme.scss';
-@import './scss/_spoke_theme.scss';
-@import './scss/_segment_theme.scss';
-@import './scss/_label_theme.scss';
+@import './scss/_themes.scss';

src/scss/_orbit-zone.scss

@@ -19,9 +19,10 @@
   border: none; 
 }
 
+/* Disabled nested adjusment size. When nested orbit-zone takes its length from the diameter of satellite's orbit 
 .satellite > .orbit-zone {
-   /* Disabled nested adjusment size. When nested orbit-zone takes its length from the diameter of satellite's orbit 
   --o-length: var(--o-diameter);
   width: var(--o-length);
-  height: auto;*/
+  height: auto;
 }
+*/

src/scss/_support.scss

@@ -48,7 +48,7 @@
 
 /* orbit-zone checks */
 .orbit-zone:has(>*:not(.orbit, [class*='orbit-'])) {
-  border: 3px dotted red!important;
+  border: 2px dotted red!important;
 }
 .orbit-zone:has(>*:not(.orbit, [class*='orbit-'])) > * {
   filter:grayscale(1) opacity(0.2)

src/scss/_themes.scss

@@ -0,0 +1,141 @@
+/* default theme */
+
+.orbit-zone {
+  background: none;
+  border: none; 
+}
+
+.orbit, [class*='orbit-']:not(.orbit-zone) {
+  border: 1px solid transparent;
+}
+
+.satellite {
+  background-color: transparent;
+  border: 1px solid currentcolor;
+}
+
+.spoke {
+  border: none;
+  background: currentcolor;
+}
+
+.segment {
+  border: none;
+  background: currentcolor;
+}
+
+o-progress {
+  --o-progress-color: currentcolor;
+  --o-hover-progress-color: currentcolor;
+  --o-bg-color: transparent;
+}
+
+o-sector {
+  --o-sector-color: currentcolor;
+  --o-hover-sector-color: currentcolor;
+}
+
+o-label {
+  --o-label-color: transparent;
+  --o-hover-label-color: transparent;
+  color: currentColor;
+}
+
+/* Dev theme based on default*/
+.dev-orbit.orbit-zone {
+    background: none;
+    border: 0.2px dashed var(--o-red-light); 
+  }
+
+.dev-orbit {
+  .orbit-zone {
+    background: none;
+    border: 0.2px dashed var(--o-red-light); 
+  }
+
+  .orbit, [class*='orbit-']:not(.orbit-zone) {
+    border: 0.2px solid var(--o-red-light);
+  }
+
+  .satellite {
+    background-color: transparent;
+    border: 1px solid currentColor;
+  }
+
+  .spoke {
+    border: none;
+    background: currentColor;
+  }
+
+  .segment {
+    border: none;
+    background: currentColor;
+  }
+
+  o-progress {
+    --o-progress-color: currentColor;
+    --o-hover-progress-color: currentColor;
+    --o-bg-color: transparent;
+  }
+
+  o-sector {
+    --o-sector-color: currentColor;
+    --o-hover-sector-color: currentColor;
+  }
+
+  o-label {
+    --o-label-color: transparent;
+    --o-hover-label-color: transparent;
+    color: currentcolor;
+  }
+}
+
+/* cyan theme based on default*/
+
+.theme-cyan {
+.orbit-zone {
+  background: none;
+  border: none; 
+}
+
+.orbit, [class*='orbit-']:not(.orbit-zone) {
+  border: 1px solid transparent;
+}
+
+.satellite {
+  background-color: transparent;
+  border: 1px solid var(--o-cyan);
+}
+
+.spoke {
+  border: none;
+  background: var(--o-cyan);
+}
+
+.segment {
+  border: none;
+  background: var(--o-cyan);
+}
+
+o-progress {
+  --o-progress-color: var(--o-cyan);
+  --o-hover-progress-color: var(--o-cyan);
+  --o-bg-color: transparent;
+}
+
+o-sector {
+  --o-sector-color: var(--o-cyan);
+  --o-hover-sector-color: var(--o-cyan);
+}
+
+o-label {
+  --o-label-color: transparent;
+  --o-hover-label-color: transparent;
+  color: var(--o-cyan);
+}
+}
+
+
+
+
+

src/scss/_utilities.scss

@@ -218,7 +218,3 @@ o-progress.rounded,o-label.rounded {
   </filter>\
   </svg>#fancy-goo');
 }
-
-.dev-orbit * {
-  border: 0.2px solid var(--o-cyan) !important;
-}