@kubex/zinc 1.0.115 → 1.0.117

package/docs/pages/components/well.md

@@ -72,12 +72,12 @@ Use the `action` slot to add interactive elements or additional information to t
 ```html:preview
 <zn-well icon="schedule">
   Triggers every <strong>5 minutes</strong>
-  <zn-button slot="action" color="transparent" size="small">Edit</zn-button>
+  <zn-button slot="action" color="transparent">Edit</zn-button>
 </zn-well>
 <br />
 <zn-well icon="cloud_sync">
   Last sync: 2 minutes ago
-  <zn-button slot="action" color="primary" size="small">Sync Now</zn-button>
+  <zn-button slot="action" color="primary">Sync Now</zn-button>
 </zn-well>
 ```
 
@@ -89,8 +89,8 @@ The action slot can contain multiple elements for more complex interactions.
 <zn-well icon="settings">
   Configuration status: Active
   <div slot="action" style="display: flex; gap: 8px;">
-    <zn-button color="transparent" size="small">Configure</zn-button>
-    <zn-button color="transparent" size="small">Disable</zn-button>
+    <zn-button color="transparent">Configure</zn-button>
+    <zn-button color="transparent">Disable</zn-button>
   </div>
 </zn-well>
 ```
@@ -105,7 +105,7 @@ Wells can contain rich HTML content including formatted text, links, and nested
     <strong>Document Type:</strong> Configuration File<br />
     <small style="color: var(--zn-color-text-muted);">Last modified: 01/23/26</small>
   </div>
-  <zn-button slot="action" color="transparent" size="small">View</zn-button>
+  <zn-button slot="action" color="transparent">View</zn-button>
 </zn-well>
 <br />
 <zn-well icon="folder_open">
@@ -115,7 +115,7 @@ Wells can contain rich HTML content including formatted text, links, and nested
       <small>Contains 24 files | 12.5 MB total</small>
     </p>
   </div>
-  <zn-button slot="action" color="primary" size="small">Open</zn-button>
+  <zn-button slot="action" color="primary">Open</zn-button>
 </zn-well>
 ```
 
@@ -138,7 +138,7 @@ Wells are perfect for displaying status information with icons and formatted con
 <br />
 <zn-well icon="error">
   <strong>Build failed</strong> - See logs for details
-  <zn-button slot="action" color="error" size="small">View Logs</zn-button>
+  <zn-button slot="action" color="error">View Logs</zn-button>
 </zn-well>
 ```
 
@@ -149,7 +149,7 @@ Use wells to display scheduling and timing details.
 ```html:preview
 <zn-well icon="schedule">
   Runs every <strong>Monday at 9:00 AM</strong>
-  <zn-button slot="action" color="transparent" size="small">Edit Schedule</zn-button>
+  <zn-button slot="action" color="transparent">Edit Schedule</zn-button>
 </zn-well>
 <br />
 <zn-well icon="timer">
@@ -171,7 +171,7 @@ Display configuration information in a clean, organized format.
     <strong>Database Connection</strong><br />
     <small>PostgreSQL • us-east-1 • Read/Write</small>
   </div>
-  <zn-button slot="action" color="transparent" size="small">Test Connection</zn-button>
+  <zn-button slot="action" color="transparent">Test Connection</zn-button>
 </zn-well>
 <br />
 <zn-well icon="storage">
@@ -179,7 +179,7 @@ Display configuration information in a clean, organized format.
     <strong>Cache Configuration</strong><br />
     <small>Redis • 500 MB limit • TTL: 3600s</small>
   </div>
-  <zn-button slot="action" color="transparent" size="small">Clear Cache</zn-button>
+  <zn-button slot="action" color="transparent">Clear Cache</zn-button>
 </zn-well>
 ```
 
@@ -192,7 +192,7 @@ Wells work perfectly fine without an icon for simpler, cleaner displays.
 <br />
 <zn-well>
   <strong>Important:</strong> Configuration changes require a restart
-  <zn-button slot="action" color="warning" size="small">Restart Now</zn-button>
+  <zn-button slot="action" color="warning">Restart Now</zn-button>
 </zn-well>
 ```
 
@@ -218,8 +218,8 @@ Combine inline wells with other content for compact information display.
     <strong>Daily Backup</strong><br />
     Triggers every day at <strong>2:00 AM UTC</strong>
     <div slot="action" style="display: flex; gap: 8px;">
-      <zn-button color="transparent" size="small">Edit</zn-button>
-      <zn-button color="transparent" size="small">Run Now</zn-button>
+      <zn-button color="transparent">Edit</zn-button>
+      <zn-button color="transparent">Run Now</zn-button>
     </div>
   </zn-well>
 
@@ -227,8 +227,8 @@ Combine inline wells with other content for compact information display.
     <strong>Weekly Reports</strong><br />
     Triggers every <strong>Monday at 9:00 AM</strong>
     <div slot="action" style="display: flex; gap: 8px;">
-      <zn-button color="transparent" size="small">Edit</zn-button>
-      <zn-button color="primary" size="small">View Reports</zn-button>
+      <zn-button color="transparent">Edit</zn-button>
+      <zn-button color="primary">View Reports</zn-button>
     </div>
   </zn-well>
 </div>
@@ -250,7 +250,7 @@ Combine inline wells with other content for compact information display.
       <strong>Disk Space</strong><br />
       <small>45.2 GB / 100 GB (45%)</small>
     </div>
-    <zn-button slot="action" color="transparent" size="small">Details</zn-button>
+    <zn-button slot="action" color="transparent">Details</zn-button>
   </zn-well>
 
   <zn-well icon="speed">
@@ -268,17 +268,17 @@ Combine inline wells with other content for compact information display.
 <div style="display: flex; flex-direction: column; gap: 12px;">
   <zn-well icon="cloud_done">
     <strong>AWS S3</strong> - Connected
-    <zn-button slot="action" color="transparent" size="small">Configure</zn-button>
+    <zn-button slot="action" color="transparent">Configure</zn-button>
   </zn-well>
 
   <zn-well icon="sync">
     <strong>GitHub</strong> - Syncing
-    <zn-button slot="action" color="transparent" size="small">View Status</zn-button>
+    <zn-button slot="action" color="transparent">View Status</zn-button>
   </zn-well>
 
   <zn-well icon="check_circle">
     <strong>Stripe</strong> - Active • Webhook configured
-    <zn-button slot="action" color="transparent" size="small">Settings</zn-button>
+    <zn-button slot="action" color="transparent">Settings</zn-button>
   </zn-well>
 </div>
 ```

package/docs/pages/getting-started/example-layout.md

@@ -26,11 +26,11 @@ component you are using already includes padding or margin it will not be double
           </zn-item>
           <zn-item label="Full name">
             Something
-            <zn-button icon="add" color="secondary" size="x-small" slot="actions" icon-size="20"></zn-button>
+            <zn-button icon="add" color="secondary" slot="actions" icon-size="20"></zn-button>
           </zn-item>
           <zn-item label="Full name">
             Something
-            <zn-button color="transparent" size="x-small" slot="actions">Update</zn-button>
+            <zn-button color="transparent" slot="actions">Update</zn-button>
           </zn-item>
           <zn-item label="Selet Option">
             <zn-inline-edit name="name" value="1"
@@ -41,10 +41,10 @@ component you are using already includes padding or margin it will not be double
 
       <zn-panel caption="Some Panel">
         <zn-sp divide>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1"
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 1"
                           value="This is awesome">
           </zn-inline-edit>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2"
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 2"
                           value="This is awesome">
           </zn-inline-edit>
         </zn-sp>
@@ -59,17 +59,17 @@ component you are using already includes padding or margin it will not be double
         </zn-navbar>
 
         <zn-sp id="" divide>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1"
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 1"
                           value="This is awesome"></zn-inline-edit>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2"
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 2"
                           value="This is awesome"></zn-inline-edit>
         </zn-sp>
 
         <zn-sp id="something-else" divide>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 3"
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 3"
                           value="This is not awesome">
           </zn-inline-edit>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 4"
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 4"
                           value="This is not awesome">
           </zn-inline-edit>
         </zn-sp>
@@ -78,9 +78,9 @@ component you are using already includes padding or margin it will not be double
 
     <zn-panel caption="Some Panel">
       <zn-sp divide>
-        <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1"
+        <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 1"
                         value="This is awesome"></zn-inline-edit>
-        <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2"
+        <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 2"
                         value="This is awesome"></zn-inline-edit>
       </zn-sp>
     </zn-panel>
@@ -99,8 +99,8 @@ to be full width.
   <zn-sp>
     <zn-panel caption="Some Panel" flush>
       <zn-sp divide flush>
-        <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1" value=This is awesome></zn-inline-edit>
-        <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2" value=This is awesome></zn-inline-edit>
+        <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 1" value=This is awesome></zn-inline-edit>
+        <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 2" value=This is awesome></zn-inline-edit>
       </zn-sp>
     </zn-panel>
   </zn-sp>
@@ -118,9 +118,9 @@ This is the standard way of scaffolding pages with a sidebar
 
   <div slot="side">
     <zn-sp divide flush>
-      <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1" value="This is awesome">
+      <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 1" value="This is awesome">
       </zn-inline-edit>
-      <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2" value="This is awesome">
+      <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 2" value="This is awesome">
       </zn-inline-edit>
     </zn-sp>
   </div>
@@ -129,9 +129,9 @@ This is the standard way of scaffolding pages with a sidebar
     <zn-sp>
       <zn-panel caption="Some Panel" flush>
         <zn-sp divide flush>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 1" value="This is awesome">
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 1" value="This is awesome">
           </zn-inline-edit>
-          <zn-inline-edit padded inline style="background: var(--zn-color-red-100);" caption="Label 2" value="This is awesome">
+          <zn-inline-edit padded inline style="background: rgb(var(--zn-red));" caption="Label 2" value="This is awesome">
           </zn-inline-edit>
         </zn-sp>
       </zn-panel>

package/docs/pages/getting-started/example-page.md

@@ -41,7 +41,6 @@ for SEO purposes. We should be slotting everything in as children of the compone
     <!-- This is the Navigation/Header for the Inner set of tabs -->
     <zn-header slot="top"
                caption="Customer"
-               description="My Awesome Customer"
                navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
     </zn-header>
 
@@ -68,7 +67,6 @@ for SEO purposes. We should be slotting everything in as children of the compone
     <zn-pane>
       <zn-header slot="top"
                  caption="Customer"
-                 description="My Awesome Customer"
                  navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
       </zn-header>
       <!-- This is where your page content would be defined -->
@@ -80,4 +78,4 @@ for SEO purposes. We should be slotting everything in as children of the compone
 
 </zn-tabs>
 
-```
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.115",
+  "version": "1.0.117",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",
@@ -53,6 +53,7 @@
     "echarts": "^6.0.0",
     "emoji-mart": "^5.6.0",
     "lit": "^3.3.3",
+    "lucide": "^1.17.0",
     "marked": "^18.0.2",
     "quill": "^2.0.3"
   },

package/scss/_root.scss

@@ -4,6 +4,80 @@
 @use "variables";
 
 :root {
+  --zn-base-px: 8px;
+  --zn-base-gap: calc(var(--zn-base-px) * 2);
+  --zn-gutter: 2px;
+  --zn-default-margin: 0 auto 0 0;
+  --zn-icon-size: 20px;
+  --zn-button-gutter: 2px;
+
+  --zn-font-family-sans: 'Inter', sans-serif;
+  --zn-font-family-serif: 'Roboto Slab', serif;
+  --zn-font-family-mono: 'Roboto Mono', monospace;
+}
+
+:root, [t="light"], .theme-light {
+  --zn-backdrop-color: rgba(0, 0, 0, 0.5);
+
+  --zn-color-text: 33, 33, 33;
+  --zn-color-muted-text: 125, 119, 146;
+
+  --zn-color-base: 255, 255, 255;
+  --zn-color-body: 248, 247, 252;
+  --zn-color-navigation: var(--zn-color-base);
+  --zn-color-navigation-hightlight: 248, 249, 252;
+  --zn-color-border: 219, 217, 236;
+  --zn-color-border-active: 209, 207, 226;
+  --zn-color-tab: 236, 235, 249;
+  --zn-color-panel: 255, 255, 255;
+
+  --zn-color-primary: 105, 54, 245;
+  --zn-color-info: 53, 104, 195;
+  --zn-color-success: 98, 177, 121;
+  --zn-color-warning: 241, 168, 80;
+  --zn-color-error: 236, 68, 91;
+  --zn-color-disabled: 181, 181, 181;
+}
+
+[t="dark"], .theme-dark {
+  --zn-backdrop-color: rgba(0, 0, 0, 0.85);
+
+  --zn-color-text: 215, 215, 215;
+  --zn-color-muted-text: 145, 145, 145;
+
+  --zn-color-base: 0, 0, 0;
+  --zn-color-body: 23, 23, 23;
+  --zn-color-navigation: var(--zn-color-base);
+  --zn-color-navigation-hightlight: 10, 10, 10;
+  --zn-color-border: 38, 38, 38;
+  --zn-color-border-active: 80, 80, 80;
+  --zn-color-tab: 5, 5, 5;
+  --zn-color-panel: 30, 30, 30;
+
+  --zn-color-primary: 105, 54, 245;
+  --zn-color-info: 53, 104, 195;
+  --zn-color-success: 98, 177, 121;
+  --zn-color-warning: 241, 168, 80;
+  --zn-color-error: 236, 68, 91;
+  --zn-color-disabled: 181, 181, 181;
+}
+
+@media (min-width: 1200px) {
+  :root {
+    --zn-base-gap: calc(var(--zn-base-px) * 3);
+  }
+}
+
+@media (min-width: 2500px) {
+  :root {
+    --zn-default-margin: 0 auto;
+  }
+}
+
+
+:root {
+  --zn-primary: var(--zn-color-primary);
+
   // Brand Colors
   --zn-red: 237, 84, 109;
   --zn-blue: 100, 117, 242;
@@ -14,16 +88,8 @@
   --zn-violet: 156, 39, 176;
   --zn-pink: 255, 108, 156;
   --zn-grey: 158, 158, 158;
-  --zn-primary: 104, 54, 245;
   --zn-accent: 71, 214, 214;
 
-  // Theme Colors
-  --zn-color-info: 100, 117, 242;
-  --zn-color-warning: 255, 136, 0;
-  --zn-color-error: 237, 84, 109;
-  --zn-color-success: 43, 192, 145;
-  --zn-color-disabled: 181, 181, 181;
-
   // Common Sizes
   --zn-size-bar: 60px;
   --zn-size-tile: 80px;
@@ -33,70 +99,39 @@
   --zn-size-panel: 360px;
   --zn-size-lside: 460px;
 
-  // Font Families
-  --zn-font-family-sans: 'Inter', sans-serif;
-  --zn-font-family-serif: 'Roboto Slab', serif;
-  --zn-font-family-mono: 'Roboto Mono', monospace;
-
   // Default Opacities
   --zn-bg-opacity: 1;
   --zn-text-opacity: 1;
 
   --base: 255, 255, 255;
   --inverse-base: 0, 0, 0;
-
-  --zn-base-gap: 12px;
-  --zn-gutter: 4px;
-  --zn-default-margin: 0 auto 0 0;
-}
-
-@media (min-width: 1024px) {
-  :root {
-    --zn-base-gap: 16px;
-    --zn-gutter: 6px;
-  }
 }
 
-@media (min-width: 1600px) {
-  :root {
-    --zn-base-gap: 20px;
-    --zn-gutter: 8px;
-  }
-}
-
-@media (min-width: 2000px) {
-  :root {
-    --zn-base-gap: 24px;
-    --zn-gutter: 10px;
-  }
+.zn-mono {
+  font-family: var(--zn-font-family-mono, "monospace");
 }
 
-@media (min-width: 2400px) {
-  :root {
-    --zn-default-margin: 0 auto;
-  }
-}
+:root, [t="light"], .theme-light, [t="dark"], .theme-dark {
+  --zn-body: var(--zn-color-body);
 
+  --zn-text: var(--zn-color-text);
+  --zn-text-heading: var(--zn-color-text);
+  --zn-text-page-title: var(--zn-color-text);
+  --zn-text-panel-title: var(--zn-color-text);
+  --zn-panel: var(--zn-color-panel);
 
-.zn-mono {
-  font-family: var(--zn-font-family-mono);
+  --zn-border-color: var(--zn-color-border);
+  --zn-input-bg: var(--zn-color-body);
 }
 
 [t="light"], .theme-light {
   // Theme Light
   --zn-panel-opacity: 1;
-  --zn-text: 123, 112, 151;
-  --zn-text-heading: 56, 39, 104;
-  --zn-text-page-title: 52, 52, 52;
-  --zn-text-panel-title: 56, 39, 104;
-  --zn-body: 248, 247, 251;
   --zn-shadow: 236, 233, 241;
-  --zn-panel: 255, 255, 255;
+
   --zn-panel-secondary: 246 246 246;
   --zn-panel-highlight: 248, 249, 252;
   --zn-panel-highlight-opacity: 1;
-  --zn-border-color: 224, 221, 233;
-  --zn-input-bg: 248, 247, 251;
   --zn-input-bg-accent: 237, 235, 245;
   --zn-bright-bg: 255, 255, 255;
   --zn-light-text: 123, 112, 151;
@@ -104,25 +139,17 @@
   --zn-purple-text: 104, 54, 245;
 
   .zn-primary {
-    color: #6836F5;
+    color: rgb(var(--zn-color-primary));
   }
 }
 
 [t="dark"], .theme-dark {
   // Theme Dark
-  --zn-body: 20, 22, 27;
-  --zn-panel: 33, 34, 41;
   --zn-shadow: 10, 10, 10;
   --zn-panel-secondary: 27, 27, 30;
   --zn-panel-opacity: 1;
-  --zn-text: 159, 173, 194;
-  --zn-text-heading: 241, 245, 249;
-  --zn-text-page-title: 225, 225, 225;
-  --zn-text-panel-title: 181, 158, 255;
   --zn-panel-highlight: 25, 27, 32;
   --zn-panel-highlight-opacity: 0.1;
-  --zn-border-color: 50, 50, 60;
-  --zn-input-bg: 28, 28, 32;
   --zn-input-bg-accent: 72, 84, 102;
   --zn-bright-bg: 225, 225, 225;
   --zn-light-text: 173, 163, 192;

package/scss/shared/_button.scss

@@ -6,7 +6,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 6px 15px;
+  padding: var(--zn-base-px);// calc(var(--zn-base-px) + var(--zn-button-gutter));
   margin: auto;
   width: fit-content;
   background-color: rgb(var(--zn-primary));
@@ -16,6 +16,11 @@
   vertical-align: middle;
   border-color: transparent;
   white-space: nowrap;
+  line-height: 20px;
+
+  max-height: 36px;
+  height: 36px;
+  min-height: 36px;
 
   &:hover:not([disabled]) {
     background-color: rgba(var(--zn-primary), 0.8);

package/scss/shared/_form-elements.scss

@@ -46,6 +46,7 @@ select {
 label {
   font-weight: 600;
   font-size: rgb(var(--zn-font-size-medium));
+  line-height: var(--zn-spacing-medium);
   color: rgb(var(--zn-text-heading));
   display: block;
   margin-bottom: mixins.spacing(xs);

package/scss/shared/_table.scss

@@ -1,7 +1,7 @@
 @use "../variables" as v;
 @use "../mixins" as m;
 
-table {
+table:not(.remarkd-table) {
   border-collapse: separate !important;
   border-spacing: 0;
   width: 100%;

package/scss/shared/layout.scss

@@ -287,8 +287,8 @@
 .zn-panel-bar {
   border-bottom: 1px solid rgb(var(--zn-border-color));
   background-color: rgba(var(--zn-panel), 0.9);
-  padding: 4px;
-  gap: 4px;
+  padding: var(--zn-base-px);
+  gap: var(--zn-base-px);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -301,8 +301,9 @@
 }
 
 .zn-panel-bar--large {
-  padding: 6px;
-  gap: 6px;
+  padding: var(--zn-base-px) calc(var(--zn-base-gap) + var(--zn-gutter));
+  gap: var(--zn-base-px);
+  height: 50px;
 }
 
 .scroll-container {

package/scss/themes/_dark.scss

@@ -253,13 +253,13 @@
   --zn-shadow-x-large: 0 6px 20px rgba(0, 0, 0, 0.34);
 
   /* Inputs */
-  --zn-input-background-color: hsl(223, 14%, 10%);
-  --zn-input-background-color-hover: hsl(252, 15%, 13%);
+  --zn-input-background-color: rgb(var(--zn-color-body));
+  --zn-input-background-color-hover: rgb(var(--zn-color-body));
   --zn-input-background-color-focus: hsl(252, 15%, 13%);
   --zn-input-background-color-disabled: hsl(280, 6%, 9%);
 
-  --zn-input-border-color: hsl(240, 8%, 21%);
-  --zn-input-border-color-hover: hsl(255, 16%, 15%);
+  --zn-input-border-color: rgb(var(--zn-color-border));
+  --zn-input-border-color-hover: rgb(var(--zn-color-border-active));
   --zn-input-border-color-focus: var(--zn-color-primary-500);
   --zn-input-border-color-disabled: hsl(280, 6%, 9%);