@harjs/react-ui 1.1.4 → 1.1.6

package/dist/assets/css/components/charts/gantt/styles.css

@@ -1,14 +1,14 @@
 .ar-gantt-chart {
-  border-radius: var(--border-radius-lg);
-  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  border-radius: var(--radius-4);
+  box-shadow: 0px 10px 15px -5px var(--black-10);
   overflow: hidden;
 
   .ar-gantt-chart-svg {
-    background-color: var(--white);
+    background-color: var(--white-100);
     font-family: var(--system);
 
     > .header {
-      fill: var(--white);
+      fill: var(--white-100);
       height: 75px;
 
       > .title-group {
@@ -35,7 +35,7 @@
       }
 
       > .left-axis {
-        fill: var(--white);
+        fill: var(--white-100);
 
         > .label-list {
           > .label-row {
@@ -56,7 +56,7 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    background-color: var(--white);
+    background-color: var(--white-100);
     padding: 1rem 1.5rem;
   }
 }

package/dist/assets/css/components/charts/pie/pie.css

@@ -15,7 +15,7 @@
       position: relative;
       width: 200px;
       height: 200px;
-      border-radius: var(--border-radius-pill);
+      border-radius: var(--radius-full);
       user-select: none;
 
       > article {
@@ -24,9 +24,9 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        background-color: var(--white);
-        border-radius: var(--border-radius-pill);
-        box-shadow: inset 0 0 0 5px rgba(var(--black-rgb), 0.1);
+        background-color: var(--white-100);
+        border-radius: var(--radius-full);
+        box-shadow: inset 0 0 0 5px var(--black-10);
         color: var(--gray-700);
       }
     }
@@ -53,8 +53,8 @@
           min-width: 1.75rem;
           min-height: 1rem;
           padding-left: 0.85rem;
-          border-radius: var(--border-radius-sm);
-          color: var(--white);
+          border-radius: var(--radius-4);
+          color: var(--white-100);
           font-size: 0.75rem;
           font-weight: bold;
           line-height: 1rem;
@@ -67,7 +67,7 @@
           top: 50%;
           transform: translateY(-50%);
           content: "%";
-          background-color: rgba(var(--black-rgb), 0.2);
+          background-color: var(--black-20);
           width: 0.75rem;
           font-size: 0.65rem;
           text-align: center;

package/dist/assets/css/components/data-display/calendar/styles.week-view.css

@@ -3,9 +3,9 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    background-color: var(--white);
+    background-color: var(--white-100);
     padding: 0.75rem 0.75rem 0.75rem 2rem;
-    border-radius: var(--border-radius-sm);
+    border-radius: var(--radius-4);
 
     > .head {
       display: flex;
@@ -116,7 +116,9 @@
       > .events-layer {
         position: absolute;
         right: 0;
-        width: calc(100% - 50px); /* Solda yer alan clocks'dan dolayı -50px yapıldı. */
+        width: calc(
+          100% - 50px
+        ); /* Solda yer alan clocks'dan dolayı -50px yapıldı. */
         height: calc(24 * 60px);
         z-index: 2;
 
@@ -124,7 +126,7 @@
           position: absolute;
           width: calc(100% / 7);
           padding: 0.5rem;
-          color: var(--white);
+          color: var(--white-100);
           font-size: 12px;
           overflow: hidden;
         }
@@ -137,8 +139,8 @@
   position: fixed;
   background-color: var(--black);
   padding: 1rem;
-  border-radius: var(--border-radius-sm);
-  color: var(--white);
+  border-radius: var(--radius-4);
+  color: var(--white-100);
   pointer-events: none;
   z-index: 200;
 }

package/dist/assets/css/components/data-display/card/css.cjs

@@ -0,0 +1,47 @@
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const colors = [
+  { name: "blue", scales: [] },
+  { name: "purple", scales: [] },
+  { name: "pink", scales: [] },
+  { name: "red", scales: [] },
+  { name: "orange", scales: [] },
+  { name: "yellow", scales: [] },
+  { name: "green", scales: [] },
+  { name: "teal", scales: [] },
+  { name: "cyan", scales: [] },
+  { name: "gray", scales: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] },
+];
+const radiuses = ["0", "2", "4", "6", "8", "12", "16", "20", "40", "full"];
+
+const statusTemplate = fs.readFileSync("templates/status.template.css", "utf-8");
+const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8");
+
+let statusOutput = `.har-card {
+${colors
+  .flatMap((color) => {
+    if (color.scales.length === 0) {
+      return statusTemplate.replace(/__COLOR__/g, color.name).replace(/__COLOR_SCALE__/g, "500");
+    }
+
+    return color.scales.map((scale) =>
+      statusTemplate.replace(/__COLOR__/g, `${color.name}-${scale}`).replace(/-__COLOR_SCALE__/g, ""),
+    );
+  })
+  .join("\n")}
+}`;
+let radiusOutput = `.har-card {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}`;
+
+fs.writeFileSync("status.css", statusOutput);
+fs.writeFileSync("radius.css", radiusOutput);
+
+try {
+  execSync(`npx prettier --write status.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write radius.css`, { stdio: "inherit" });
+
+  execSync("npm run no-css-build", { stdio: "inherit" });
+} catch (err) {
+  console.error("⚠️ Prettier çalıştırılamadı:", err.message);
+}

package/dist/assets/css/components/data-display/card/radius.css

@@ -0,0 +1,41 @@
+.har-card {
+  &.radius-0 {
+    border-radius: var(--radius-0);
+  }
+
+  &.radius-2 {
+    border-radius: var(--radius-2);
+  }
+
+  &.radius-4 {
+    border-radius: var(--radius-4);
+  }
+
+  &.radius-6 {
+    border-radius: var(--radius-6);
+  }
+
+  &.radius-8 {
+    border-radius: var(--radius-8);
+  }
+
+  &.radius-12 {
+    border-radius: var(--radius-12);
+  }
+
+  &.radius-16 {
+    border-radius: var(--radius-16);
+  }
+
+  &.radius-20 {
+    border-radius: var(--radius-20);
+  }
+
+  &.radius-40 {
+    border-radius: var(--radius-40);
+  }
+
+  &.radius-full {
+    border-radius: var(--radius-full);
+  }
+}