From a13573194a2eaabc73e366bc5200ee3f5537a637 Mon Sep 17 00:00:00 2001
From: Jorge Mendez Ortega <jorge.mendez.ortega@gmail.com>
Date: Mon, 24 Aug 2026 09:44:12 -0600
Subject: [PATCH] feat(app): pr-005 usando variables en el CSS

---
 src/components/index.js      |  1 +
 src/components/pr5/Button.js | 45 ++++++++++++++++++++++++++++++++++++
 src/index.html               |  3 +++
 3 files changed, 49 insertions(+)
 create mode 100644 src/components/pr5/Button.js

diff --git a/src/components/index.js b/src/components/index.js
index 48ce98b..1bc2c4d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
 import "./pr1/Badge.js";
 import "./pr2/Card.js";
 import "./pr3/Dynamic.js";
+import "./pr5/Button.js";
diff --git a/src/components/pr5/Button.js b/src/components/pr5/Button.js
new file mode 100644
index 0000000..2c469eb
--- /dev/null
+++ b/src/components/pr5/Button.js
@@ -0,0 +1,45 @@
+class Button extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    padding: 5px;
+                    transition: all 0.3s ease;
+                }
+                :host button {
+                    padding: 5px;
+                    border-radius: 5px;
+                    border: 2px solid;
+                    cursor: pointer;
+                    background-color: var(--bkg-default,#f3f3f1);
+                    border-color: vr(--border-default ,#929583);
+                    color: var(--color-default,#515346);
+                }
+                :host([type="primary"]) button {
+                    background-color: var(--bkg-primary,#e6f5ff);
+                    border-color: vr(--border-primary ,#1aa3ff);
+                    color: var(--color-primary,#005c99);
+                }
+                :host([type="danger"]) button {
+                    background-color: var(--bkg-danger,#ffe6e6);
+                    border-color: vr(--border-danger ,#ff1a1a);
+                    color: var(--color-danger,#990000);
+                }
+            </style>
+            <button>
+                <slot></slot>
+            </button>
+        `;
+    }
+}
+
+window.customElements.define("wc-button", Button);
diff --git a/src/index.html b/src/index.html
index 1ea55b5..f9b8077 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,9 @@
     <wc-card></wc-card>
     <wc-dynamic role="JMZ" active></wc-dynamic>
     <wc-dynamic role="JMZ"></wc-dynamic>
+    <wc-button type="danger">Danger gakusei</wc-button>
+    <wc-button type="primary">Primary gakusei</wc-button>
+    <wc-button>Default gakusei</wc-button>
     <script type="module" src="./components/index.js"></script>
 </body>
 </html>