@harjs/react-ui 1.1.10 → 1.1.12

package/dist/assets/css/components/form/input/color.addon.css

@@ -0,0 +1,711 @@
+.har-input-wrapper {
+  &.blue {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--blue-100);
+          border: var(--stroke-1) solid var(--blue-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--blue-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--blue-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--blue-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.purple {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--purple-100);
+          border: var(--stroke-1) solid var(--purple-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--purple-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--purple-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--purple-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.pink {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--pink-100);
+          border: var(--stroke-1) solid var(--pink-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--pink-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--pink-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--pink-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.red {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--red-100);
+          border: var(--stroke-1) solid var(--red-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--red-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--red-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--red-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.orange {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--orange-100);
+          border: var(--stroke-1) solid var(--orange-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--orange-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--orange-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--orange-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.yellow {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--yellow-100);
+          border: var(--stroke-1) solid var(--yellow-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--yellow-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--yellow-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--yellow-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.green {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--green-100);
+          border: var(--stroke-1) solid var(--green-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--green-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--green-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--green-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.teal {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--teal-100);
+          border: var(--stroke-1) solid var(--teal-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--teal-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--teal-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--teal-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.cyan {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--cyan-100);
+          border: var(--stroke-1) solid var(--cyan-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--cyan-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--cyan-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--cyan-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  &.gray {
+    &.filled {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--gray-100);
+          border: var(--stroke-1) solid var(--gray-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.surface-borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: var(--gray-100);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.outlined {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid var(--gray-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.dashed {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) dashed var(--gray-300);
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+
+    &.borderless {
+      > .addon-before,
+      > .addon-after {
+        &:has(input, select, button, textarea) {
+          background-color: transparent;
+          border: var(--stroke-1) solid transparent;
+        }
+
+        &:has(.har-select, .har-input) {
+          border: none !important;
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/input/css.cjs

@@ -14,10 +14,12 @@ const sizes = [
 ];
 
 const colorTemplate = fs.readFileSync("templates/color.template.css", "utf-8");
+const colorAddonTemplate = fs.readFileSync("templates/color.addon.template.css", "utf-8");
 const radiusTemplate = fs.readFileSync("templates/radius.template.css", "utf-8");
 const sizeTemplate = fs.readFileSync("templates/size.template.css", "utf-8");
 
 let colorOutput = `.har-input-wrapper {${colors.map((color) => colorTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
+let colorAddonOutput = `.har-input-wrapper {${colors.map((color) => colorAddonTemplate.replace(/__COLOR__/g, color)).join("\n")}}`;
 let radiusOutput = `.har-input-wrapper {${radiuses.map((radius) => radiusTemplate.replace(/__RADIUS__/g, radius)).join("\n")}}`;
 let sizeOutput = `.har-input-wrapper {${sizes
   .map((size) =>
@@ -29,11 +31,13 @@ let sizeOutput = `.har-input-wrapper {${sizes
   .join("\n")}}`;
 
 fs.writeFileSync("color.css", colorOutput);
+fs.writeFileSync("color.addon.css", colorAddonOutput);
 fs.writeFileSync("radius.css", radiusOutput);
 fs.writeFileSync("size.css", sizeOutput);
 
 try {
   execSync(`npx prettier --write color.css`, { stdio: "inherit" });
+  execSync(`npx prettier --write color.addon.css`, { stdio: "inherit" });
   execSync(`npx prettier --write radius.css`, { stdio: "inherit" });
   execSync(`npx prettier --write size.css`, { stdio: "inherit" });