@badcss/core - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

lib/components/Alert.js

 import { generateUUID } from "../utils/generateUUID.js";
 
 export function AlertComponent(tag) {
-  // Replace tag with a button
+  // Replace tag with a Div
   const div = document.createElement("div");
@@ -6,0 +6,0 @@ div.innerHTML = tag.innerHTML;

lib/components/Button.js

@@ -12,2 +12,3 @@ import { generateUUID } from "../utils/generateUUID.js";
   const buttonSize = tag.getAttribute("size");
+  const withRing = tag.getAttribute("withRing");
 
@@ -32,9 +33,17 @@ // Allowed variants
     primary: "var(--primary)",
+    primaryLight: "var(--primary-light)",
     secondary: "var(--secondary)",
+    secondaryLight: "var(--secondary-light)",
     danger: "var(--danger)",
+    dangerLight: "var(--danger-light)",
     success: "var(--success)",
+    successLight: "var(--success-light)",
     warning: "var(--warning)",
+    warningLight: "var(--warning-light)",
     info: "var(--info)",
+    infoLight: "var(--info-light)",
     dark: "var(--dark)",
+    darkLight: "var(--dark-light)",
     light: "var(--light)",
+    lightLight: "var(--light-light)",
     // Add more colors for other variants if needed
@@ -74,3 +83,3 @@ };
 
-          .button-${buttonType} {
+          .button-${buttonType}${withRing === "true" ? "-ring" : ""} {
               color:  ${
@@ -102,3 +111,3 @@ buttonType === "light" ? "var(--dark)" : "var(--light)"
           /* Hover */
-          .button-${buttonType}:hover {
+          .button-${buttonType}${withRing === "true" ? "-ring" : ""}:hover {
               opacity: 0.9;
@@ -108,5 +117,12 @@ }
           /* Focus */
-          .button-${buttonType}:focus {
+          .button-${buttonType}${withRing === "true" ? "-ring" : ""}:focus {
               outline: none;
+              ${
+                withRing === "true" &&
+                ` box-shadow: 0 0 0 3px ${colors[buttonType + "Light"]};`
+              }
+             
           }
+
+          
       `;
@@ -118,3 +134,5 @@
   // Add the class to the button
-  button.classList.add(`button-${buttonType}`);
+  button.classList.add(
+    `button-${buttonType}${withRing === "true" ? "-ring" : ""}`
+  );
 
@@ -121,0 +139,0 @@ // Copy standard HTML attributes from <themostbad> to the generated <button>

lib/index.js

 import { ButtonComponent } from "./components/Button.js";
 import { AlertComponent } from "./components/Alert.js";
+// import { SpinnerComponent } from "./components/Spinner.js";
 
@@ -11,33 +12,5 @@ const validComponents = ["button", "alert"];
 
-// Create a style with global colors
-const styles = document.createElement("style");
-styles.setAttribute("themostbad-css-framework", ":root");
-
-styles.innerHTML = `
-  :root {
-    --primary: #2563eb;
-    --primary-light: #60a5fa;
-    --secondary: #475569;
-    --secondary-light: #94a3b8;
-    --danger: #dc2626;
-    --danger-light: #f87171;
-    --success: #16a34a;
-    --success-light: #4ade80; 
-    --warning: #eab308;
-    --warning-light: #fde047;
-    --info: #06b6d4;
-    --info-light: #67e8f9;
-    --dark: #19191a;
-    --dark-light: #6b7280;
-    --light: #f2f2f2;
-    --light-light: #f7f7f7;
-  }
-`;
-
-// Append the styles to the head
-document.head.appendChild(styles);
-
 // Get the "themostbad" from the body tag. To get config
 const body = document.getElementsByTagName("body")[0];
-const config = body.getAttribute("themostbad");
+const config = body.getAttribute("badcss-config");
 // Check if the config is valid
@@ -54,2 +27,4 @@ if (!config) {
 
+console.log(configObj);
+
 // Allowed plugins
@@ -70,4 +45,37 @@ const dataPlugins = {
 // Remove the "themostbad" from the body tag
-body.removeAttribute("themostbad");
+body.removeAttribute("badcss-config");
 
+// Create a style with global colors
+const styles = document.createElement("style");
+styles.setAttribute("badcss", ":root");
+
+styles.innerHTML = `
+  :root {
+    --primary: #2563eb;
+    --primary-light: #60a5fa;
+    --secondary: #475569;
+    --secondary-light: #94a3b8;
+    --danger: #dc2626;
+    --danger-light: #f87171;
+    --success: #16a34a;
+    --success-light: #4ade80; 
+    --warning: #eab308;
+    --warning-light: #fde047;
+    --info: #06b6d4;
+    --info-light: #67e8f9;
+    --dark: #19191a;
+    --dark-light: #6b7280;
+    --light: #f2f2f2;
+    --light-light: #f7f7f7;
+    ${
+      configObj?.theme?.colors?.map(
+        (color) => `--${color.name}: ${color.value};`
+      ) || ""
+    }
+  }
+`;
+
+// Append the styles to the head
+document.head.appendChild(styles);
+
 // Wait for the DOMContentLoaded event before running the mapping loop
@@ -77,3 +85,3 @@ document.addEventListener("DOMContentLoaded", async () => {
     // map for the findTags
-    const findTag = document.getElementsByTagName("themostbad");
+    const findTag = document.getElementsByTagName("badcss");
     for (let i = 0; i < findTag.length; i++) {
@@ -80,0 +88,0 @@ const tag = findTag[i];

package.json

 {
   "name": "@badcss/core",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A lightweight and customizable framework designed to simplify web development and enhance the styling capabilities of your projects.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

40369

decreased by-6.64%

Number of package files

18

decreased by-14.29%

Lines of code

831

decreased by-3.37%

No dependency changes