include theme file

zumerlab · May 24, 2023 · 499feff · 499feff
1 parent e324f81
commit 499feff
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/src/_core-elements.scss b/src/_core-elements.scss
@@ -1,19 +1,20 @@
 @use "./mixins" as *;
 @use "./variables" as *;
+@use "./ui" as *;
 
 .z-container {
     display: grid;
     grid-template-columns: minmax(var(--radius), 1fr);
     grid-template-rows: minmax(var(--radius), 1fr);
-    border: 1px dashed black;
+    border: 1px dashed var(--dark);
     place-items: center;
     padding: 30px;
 }
 
 .item {
     display: grid;
-    background-color: rgb(255, 255, 255);
-    border: 1px solid black;
+    background-color: var(--light);
+    border: 1px solid var(--dark);
     grid-area: 1/1/1/1;
     place-items: center;
     //z-index: 1;
@@ -81,7 +82,7 @@
 div[class^="ring-"] {
     display: grid;
     border-radius: 50%;
-    border: 0.1px solid black;
+    border: 0.1px solid var(--dark);
     grid-area: 1/1/1/1;
     place-items: center;
     box-sizing: content-box;

diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -1,5 +1,6 @@
 @use "./mixins" as *;
 @use "./variables" as *;
+@use "./ui" as *;
 
  /* Initial Reset */
  * {
@@ -126,7 +127,7 @@
     --semi: calc(var(--angle) / 2 * 1deg);
     --arc-gap: 1px;
     --length-percent: calc(var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi)));
-    --color: orange;
+    --color: var(--accent2);
     --tickness: 49px;
     height: var(--length);
     width: var(--half);
@@ -144,7 +145,7 @@
     ); /* right to top ar decrease*/
   }
   .z-container>.ring-#{$i}>.arc:hover {
-    border-color: coral;
+    border-color: var(--accent3);
   }
 
  }

diff --git a/src/_shapes.scss b/src/_shapes.scss
@@ -1,3 +1,4 @@
+@use "./ui" as *;
 /* 
 * based on item element
 */
@@ -8,7 +9,7 @@
     width: calc(var(--radius-3));
     border-radius: 0%;
     border: none;
-    border-top: 1px dashed rgba(155, 155, 155, 0.5);
+    border-top: 1px dashed var(--dark);
 }
 
 .item.circle {

diff --git a/src/components/_label.scss b/src/components/_label.scss
@@ -1,9 +1,10 @@
 @use "../_variables.scss" as *;
 @use "../_mixins.scss" as *;
+@use "../ui" as *;
 
 .label {
    display: block;
-   border: 1px solid red;
+   border: 1px solid var(--info);
    border-radius: 50%;
    width: 4px;
    height: 4px;
@@ -12,7 +13,7 @@
  .label::before {
   content: "";
   display: block;
-  border-bottom: 1px solid red;
+  border-bottom: 1px solid var(--info);
   width: var(--connector-width);
   height: 1px;
 }
@@ -23,10 +24,10 @@
    grid-area: 1/1/1/1;
    background-color: white;
    border-radius: 4px;
-   border-color: red;
+   border-color: var(--info);
    width: var(--label-width);
    height: 20px;
-   color: red;
+   color: var(--info);
    @include alignment;
  }
 

diff --git a/src/components/_progress.scss b/src/components/_progress.scss
@@ -1,5 +1,6 @@
 @use "../_mixins.scss" as *;
 @use "../_variables.scss" as *;
+@use "../ui" as *;
 // Progress
 .z-progress {
   --percentage: calc(var(--progress) * 3.6);
@@ -12,8 +13,8 @@
   aspect-ratio: 1;
   //background-color: #bc26da;
   background-image: 
-  radial-gradient(circle, rgb(255, 255, 255) 63%, transparent 67%),
-  conic-gradient(red calc((var(--percentage) - 1) * 1deg), rgba(255, 0, 0, 0.443)  calc(var(--percentage) * 1deg));
+  radial-gradient(circle, var(--light) 63%, transparent 67%),
+  conic-gradient(var(--accent1) calc((var(--percentage) - 1) * 1deg), rgba(255, 0, 0, 0.443)  calc(var(--percentage) * 1deg));
 }
 .z-progress::after {
   // https://codepen.io/chandrashekhar/pen/RvMVey?editors=1100