@harjs/react-ui 1.1.5 → 1.1.6

package/dist/assets/css/components/data-display/table/styles.css

@@ -5,12 +5,13 @@
 .ar-table {
   display: flex;
   flex-direction: column;
-  background-color: var(--white);
+  background-color: var(--white-100);
   max-width: 100%;
   min-width: 100%;
   width: 1px;
-  border-radius: var(--border-radius-lg);
-  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  border: solid var(--stroke-1) var(--gray-200);
+  border-radius: var(--radius-12);
+  box-shadow: 0px 10px 15px -5px var(--black-10);
   font-family: var(--system);
   overflow: hidden;
 
@@ -30,13 +31,13 @@
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: flex-start;
-    gap: 3.75rem;
-    padding: 1rem 1.5rem;
+    gap: var(--space-30);
+    padding: var(--space-16) var(--space-20);
 
     > .title {
       display: flex;
       flex-direction: column;
-      row-gap: 0.5rem;
+      row-gap: var(--space-8);
 
       > h4 {
         color: var(--gray-700);
@@ -51,7 +52,7 @@
     > .actions {
       display: flex;
       flex-direction: row;
-      column-gap: 0.5rem;
+      column-gap: var(--space-8);
       margin-left: auto;
     }
   }
@@ -62,8 +63,8 @@
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1.5rem;
-    border-top: solid 1px var(--gray-200);
+    padding: var(--space-16) var(--space-20);
+    border-top: solid var(--stroke-1) var(--gray-200);
   }
 
   > .content {
@@ -94,7 +95,7 @@
           > th {
             position: relative;
             height: 2.5rem;
-            padding: 0 1rem;
+            padding: 0 var(--space-16);
             color: var(--gray-700);
             text-align: left;
             text-wrap: nowrap;
@@ -151,15 +152,15 @@
               display: flex;
               justify-content: space-between;
               align-items: center;
-              gap: 1rem;
+              gap: var(--space-16);
               width: 100%;
 
               > span {
                 position: sticky;
-                left: 0.5rem;
+                left: var(--space-8);
                 display: flex;
                 align-items: center;
-                gap: 0.5rem;
+                gap: var(--space-8);
 
                 > span {
                   position: relative;
@@ -169,7 +170,7 @@
             }
 
             > .table-cell {
-              padding: 0 1rem;
+              padding: 0 var(--space-16);
             }
 
             > .filter-field {
@@ -177,7 +178,7 @@
               flex-direction: row;
               justify-content: space-between;
               align-items: center;
-              gap: 0.5rem;
+              gap: var(--space-8);
               min-width: 100%;
 
               > .ar-date-picker {
@@ -212,14 +213,14 @@
             > td {
               &:first-child {
                 position: relative;
-                padding-left: 20px;
+                padding-left: var(--space-20);
               }
 
               &:first-child {
                 ::before {
                   content: "⋮⋮";
                   position: absolute;
-                  left: 8px;
+                  left: var(--space-8);
                   top: 50%;
                   transform: translateY(-50%);
                   color: var(--gray-400);
@@ -258,7 +259,7 @@
                       background-color: var(--gray-600);
                       width: 5px;
                       height: 5px;
-                      border-radius: var(--border-radius-pill);
+                      border-radius: var(--radius-full);
                     }
                   }
                 }
@@ -279,7 +280,7 @@
                   ) !important;
                   width: 2px;
                   height: 100%;
-                  margin-left: -17.5px;
+                  margin-left: -(var(--space-20));
                 }
 
                 > .last-before {
@@ -348,7 +349,7 @@
               display: flex;
               align-items: center;
               height: 100%;
-              padding: 0 1rem;
+              padding: 0 var(--space-16);
 
               > .before {
                 position: absolute;
@@ -357,7 +358,7 @@
                 background: linear-gradient(0deg, var(--gray-200) 0%, var(--primary) 50%, var(--gray-200) 100%);
                 width: 2px;
                 height: 100%;
-                margin-left: -17.5px;
+                margin-left: -(var(--space-20));
               }
 
               > .after {
@@ -368,7 +369,7 @@
                 background-color: var(--primary);
                 width: 15px;
                 height: 2px;
-                margin-left: -17.5px;
+                margin-left: -(var(--space-20));
 
                 > .circle {
                   position: absolute;
@@ -379,18 +380,18 @@
                   background-color: var(--primary);
                   width: 5px;
                   height: 5px;
-                  border-radius: var(--border-radius-pill);
+                  border-radius: var(--radius-full);
                 }
               }
 
               > span {
                 /* position: sticky; */
-                left: 0.5rem;
+                left: var(--space-8);
               }
             }
 
             > .subitem-open-button-wrapper {
-              padding: 0 1rem;
+              padding: 0 var(--space-16);
             }
 
             > .subitem-open-button-wrapper {
@@ -398,9 +399,9 @@
                 display: inline-block;
                 width: 0.75rem;
                 height: 0.75rem;
-                border: solid 2px transparent;
-                border-top-color: var(--primary);
-                border-right-color: var(--primary);
+                border: solid var(--stroke-2) transparent;
+                border-top-color: var(--blue-500);
+                border-right-color: var(--blue-500);
                 transform: rotate(45deg);
                 cursor: pointer;
                 transition: transform 100ms ease-in-out;
@@ -430,7 +431,7 @@
                 position: absolute;
                 left: 50%;
                 transform: translateX(-50%);
-                bottom: 82px;
+                bottom: var(--space-80);
                 content: "";
                 background-color: var(--gray-100);
                 width: 70px;
@@ -503,8 +504,8 @@
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;
-      padding: 1rem 1.5rem;
-      border-top: solid 1px var(--gray-200);
+      padding: var(--space-16) var(--space-20);
+      border-top: solid var(--stroke-1) var(--gray-200);
     }
 
     > .content {
@@ -515,7 +516,7 @@
 
         > thead {
           background-color: var(--gray-100);
-          border: solid 1px var(--gray-100);
+          border: solid var(--stroke-1) var(--gray-100);
           border-top-color: var(--gray-200);
           border-bottom-color: var(--gray-200);
 
@@ -596,7 +597,7 @@
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
-                gap: 0.5rem;
+                gap: var(--space-8);
                 min-width: 100%;
               }
             }
@@ -627,7 +628,7 @@
               > td {
                 &:first-child {
                   position: relative;
-                  padding-left: 20px;
+                  padding-left: var(--space-20);
                 }
 
                 &:first-child {
@@ -662,7 +663,7 @@
                       background-color: var(--gray-600);
                       width: 15px;
                       height: 2px;
-                      margin-left: -17.5px;
+                      margin-left: -(var(--space-20));
 
                       > .circle {
                         position: absolute;
@@ -673,7 +674,7 @@
                         background-color: var(--gray-600);
                         width: 5px;
                         height: 5px;
-                        border-radius: var(--border-radius-pill);
+                        border-radius: var(--radius-full);
                       }
                     }
                   }
@@ -714,7 +715,7 @@
                       background: linear-gradient(
                         0deg,
                         var(--gray-200) 0%,
-                        var(--primary) 50%,
+                        var(--blue-500) 50%,
                         var(--gray-200) 100%
                       ) !important;
                     }
@@ -769,10 +770,10 @@
                   position: absolute;
                   top: 0px;
                   content: "";
-                  background: linear-gradient(0deg, var(--gray-200) 0%, var(--primary) 50%, var(--gray-200) 100%);
+                  background: linear-gradient(0deg, var(--gray-200) 0%, var(--blue-500) 50%, var(--gray-200) 100%);
                   width: 2px;
                   height: 100%;
-                  margin-left: -17.5px;
+                  margin-left: -(var(--space-20));
                 }
 
                 > .after {
@@ -780,10 +781,10 @@
                   top: 50%;
                   transform: translateY(-50%);
                   content: "";
-                  background-color: var(--primary);
+                  background-color: var(--blue-500);
                   width: 15px;
                   height: 2px;
-                  margin-left: -17.5px;
+                  margin-left: -(var(--space-20));
 
                   > .circle {
                     position: absolute;
@@ -791,16 +792,16 @@
                     transform: translateY(-50%);
                     right: 0;
                     content: "";
-                    background-color: var(--primary);
+                    background-color: var(--blue-500);
                     width: 5px;
                     height: 5px;
-                    border-radius: var(--border-radius-pill);
+                    border-radius: var(--radius-full);
                   }
                 }
               }
 
               > .subitem-open-button-wrapper {
-                padding: 0 1rem;
+                padding: 0 var(--space-16);
               }
 
               > .subitem-open-button-wrapper {
@@ -809,8 +810,8 @@
                   width: 0.75rem;
                   height: 0.75rem;
                   border: solid 2px transparent;
-                  border-top-color: var(--primary);
-                  border-right-color: var(--primary);
+                  border-top-color: var(--blue-500);
+                  border-right-color: var(--blue-500);
                   transform: rotate(45deg);
                   cursor: pointer;
                   transition: transform 100ms ease-in-out;

package/dist/assets/css/components/data-display/tabs/tabs.css

@@ -41,7 +41,7 @@
             background-color: var(--gray-200);
             width: 2px;
             height: 12.5px;
-            border-radius: var(--border-radius-pill);
+            border-radius: var(--radius-full);
           }
         }
 
@@ -54,9 +54,9 @@
             right: 0;
             bottom: 0;
             content: "";
-            background-color: var(--primary);
+            background-color: var(--blue-500);
             height: 2px;
-            border-radius: var(--border-radius-pill);
+            border-radius: var(--radius-full);
           }
         }
 
@@ -67,7 +67,7 @@
           background-color: rgba(var(--danger-rgb), 0.25);
           width: 1rem;
           height: 1rem;
-          border-radius: var(--border-radius-pill);
+          border-radius: var(--radius-full);
           color: rgba(var(--danger-rgb), 0.5);
           font-size: 0.75rem;
         }
@@ -81,11 +81,11 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: rgba(var(--black-rgb), 0.1);
+      background-color: var(--black-10);
       backdrop-filter: blur(5px);
       width: 2rem;
       height: 2rem;
-      border-radius: var(--border-radius-sm);
+      border-radius: var(--radius-4);
       cursor: pointer;
       transition:
         visibility 0.25s,
@@ -122,7 +122,7 @@
           background-color: var(--gray-200);
           width: 100%;
           height: 15px;
-          border-radius: var(--border-radius-pill);
+          border-radius: var(--radius-full);
           animation: shimmer 2.5s infinite;
         }
       }
@@ -139,7 +139,7 @@
       > div {
         background-color: var(--gray-200);
         height: 15px;
-        border-radius: var(--border-radius-pill);
+        border-radius: var(--radius-full);
         animation: shimmer 2.5s infinite;
 
         &:nth-child(1) {

package/dist/assets/css/components/data-display/typography/paragraph/color.css

@@ -1,51 +1,77 @@
-.ar-typography-paragraph.gray-100 {
-  color: var(--gray-100);
-}
-.ar-typography-paragraph.gray-200 {
-  color: var(--gray-200);
-}
-.ar-typography-paragraph.gray-300 {
-  color: var(--gray-300);
-}
-.ar-typography-paragraph.gray-400 {
-  color: var(--gray-400);
-}
-.ar-typography-paragraph.gray-500 {
-  color: var(--gray-500);
-}
-.ar-typography-paragraph.gray-600 {
-  color: var(--gray-600);
-}
-.ar-typography-paragraph.gray-700 {
-  color: var(--gray-700);
-}
-.ar-typography-paragraph.gray-800 {
-  color: var(--gray-800);
-}
-.ar-typography-paragraph.gray-900 {
-  color: var(--gray-900);
-}
-.ar-typography-paragraph.primary {
-  color: var(--primary);
-}
-.ar-typography-paragraph.secondary {
-  color: var(--secondary);
-}
-.ar-typography-paragraph.success {
-  color: var(--success);
-}
-.ar-typography-paragraph.danger {
-  color: var(--danger);
-}
-.ar-typography-paragraph.warning {
-  color: var(--warning);
-}
-.ar-typography-paragraph.information {
-  color: var(--information);
-}
-.ar-typography-paragraph.dark {
-  color: var(--dark);
-}
-.ar-typography-paragraph.light {
-  color: var(--light);
+.har-typography-paragraph {
+  &.blue {
+    color: var(--blue-500);
+  }
+
+  &.purple {
+    color: var(--purple-500);
+  }
+
+  &.pink {
+    color: var(--pink-500);
+  }
+
+  &.red {
+    color: var(--red-500);
+  }
+
+  &.orange {
+    color: var(--orange-500);
+  }
+
+  &.yellow {
+    color: var(--yellow-500);
+  }
+
+  &.green {
+    color: var(--green-500);
+  }
+
+  &.teal {
+    color: var(--teal-500);
+  }
+
+  &.cyan {
+    color: var(--cyan-500);
+  }
+
+  &.gray-50 {
+    color: var(--gray-50);
+  }
+
+  &.gray-100 {
+    color: var(--gray-100);
+  }
+
+  &.gray-200 {
+    color: var(--gray-200);
+  }
+
+  &.gray-300 {
+    color: var(--gray-300);
+  }
+
+  &.gray-400 {
+    color: var(--gray-400);
+  }
+
+  &.gray-500 {
+    color: var(--gray-500);
+  }
+
+  &.gray-600 {
+    color: var(--gray-600);
+  }
+
+  &.gray-700 {
+    color: var(--gray-700);
+  }
+
+  &.gray-800 {
+    color: var(--gray-800);
+  }
+
+  &.gray-900 {
+    color: var(--gray-900);
+  }
 }

package/dist/assets/css/components/data-display/typography/paragraph/css.cjs

@@ -0,0 +1,61 @@
+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 sizes = [
+  { name: "xs", fontSize: "12px", lineHeight: "18px" },
+  { name: "sm", fontSize: "14px", lineHeight: "20px" },
+  { name: "md", fontSize: "16px", lineHeight: "24px" },
+  { name: "lg", fontSize: "18px", lineHeight: "28px" },
+  { name: "xl", fontSize: "20px", lineHeight: "30px" },
+  { name: "xxl", fontSize: "24px", lineHeight: "36px" },
+];
+
+const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
+const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
+
+let colorOutput = `.har-typography-paragraph {
+${colors
+  .flatMap((color) => {
+    if (color.scales.length === 0) {
+      return colorTemplate.replace(/__COLOR__/g, color.name).replace(/__COLOR_SCALE__/g, "500");
+    }
+
+    return color.scales.map((scale) =>
+      colorTemplate.replace(/__COLOR__/g, `${color.name}-${scale}`).replace(/-__COLOR_SCALE__/g, ""),
+    );
+  })
+  .join("\n")}
+}`;
+let sizeOutput = `.har-typography-paragraph {${sizes
+  .map((size) =>
+    sizeTemplate
+      .replace(/__SIZE__/g, size.name)
+      .replace(/__FONT_SIZE__/g, size.fontSize)
+      .replace(/__LINE_HEIGHT__/g, size.lineHeight),
+  )
+  .join("\n")}}`;
+
+fs.writeFileSync("color.css", colorOutput);
+fs.writeFileSync("size.css", sizeOutput);
+
+try {
+  execSync(`npx prettier --write color.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write size.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/typography/paragraph/size.css

@@ -1,13 +1,31 @@
-.ar-typography-paragraph {
-  &.large {
-    font-size: 1.25rem;
+.har-typography-paragraph {
+  &.xs {
+    font-size: 12px;
+    line-height: 18px;
   }
 
-  &.normal {
-    font-size: 1rem;
+  &.sm {
+    font-size: 14px;
+    line-height: 20px;
   }
 
-  &.small {
-    font-size: 0.75rem;
+  &.md {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &.lg {
+    font-size: 18px;
+    line-height: 28px;
+  }
+
+  &.xl {
+    font-size: 20px;
+    line-height: 30px;
+  }
+
+  &.xxl {
+    font-size: 24px;
+    line-height: 36px;
   }
 }

package/dist/assets/css/components/data-display/typography/paragraph/templates/color.template.css

@@ -0,0 +1,3 @@
+&.__COLOR__ {
+  color: var(--__COLOR__-__COLOR_SCALE__);
+}

package/dist/assets/css/components/data-display/typography/paragraph/templates/size.template.css

@@ -0,0 +1,4 @@
+&.__SIZE__ {
+  font-size: __FONT_SIZE__;
+  line-height: __LINE_HEIGHT__;
+}

package/dist/assets/css/components/data-display/typography/title/core.css

@@ -1,5 +1,4 @@
 .ar-typography-title {
-  color: var(--gray-700);
   font-family: var(--system);
   font-weight: 400;
 }

package/dist/assets/css/components/feedback/alert/styles.css

@@ -2,7 +2,7 @@
 
 .ar-alert {
   padding: 1rem;
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--radius-4);
   border: solid 1px transparent;
   font-family: var(--system);
   font-weight: 400;
@@ -12,7 +12,7 @@
   background-color: var(--gray-100);
   padding: 0 0.25rem;
   border: solid 1px var(--gray-400);
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--radius-4);
 }
 
 .ar-alert ul {
@@ -33,11 +33,11 @@
   top: 6px;
   left: 0;
   content: "";
-  background-color: rgba(var(--black-rgb), 0.1);
+  background-color: var(--black-10);
   width: 0.5rem;
   height: 0.5rem;
   border: solid 1px transparent;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--radius-4);
 }
 .ar-alert ul li:is(.sub-message):not(:has(> ul))::before {
   position: absolute;
@@ -47,14 +47,14 @@
   width: 0.75rem;
   height: 1rem;
   border: solid 1px transparent;
-  border-left-color: rgba(var(--black-rgb), 0.25);
-  border-bottom-color: rgba(var(--black-rgb), 0.25);
+  border-left-color: var(--black-30);
+  border-bottom-color: var(--black-30);
 }
 .ar-alert ul li .ar-alert-tag {
-  background-color: var(--white);
+  background-color: var(--white-100);
   padding: 0 0.25rem;
   border: solid 1px var(--gray-400);
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--radius-4);
 }
 .ar-alert ul li ul {
   margin-left: 0.1rem;