@inglorious/ui 4.0.2 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -280,10 +280,10 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "7.0.2",
+    "@inglorious/charts": "8.0.0",
     "@inglorious/store": "11.0.0",
-    "@inglorious/web": "6.1.2",
-    "@inglorious/utils": "3.8.0"
+    "@inglorious/utils": "3.8.0",
+    "@inglorious/web": "6.2.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
@@ -298,10 +298,10 @@
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/store": "11.0.0",
     "@inglorious/vite-plugin-jsx": "2.0.0",
     "@inglorious/vite-plugin-vue": "1.0.1",
-    "@inglorious/web": "6.1.2"
+    "@inglorious/store": "11.0.0",
+    "@inglorious/web": "6.2.0"
   },
   "engines": {
     "node": ">= 22"

package/src/data-display/list/template.js

@@ -146,7 +146,7 @@ export const List = {
     } = meta
 
     if (meta.title) {
-      return html`<li class="iw-list-title">${meta.title}</li>`
+      return html`<li class="iw-list-title iw-typography">${meta.title}</li>`
     }
 
     const isClickable = !!props.onItemClick || !!onClick
@@ -156,6 +156,7 @@ export const List = {
 
     const listItemClassName = [
       "iw-list-item",
+      "iw-typography",
       isClickable && "iw-list-item-clickable",
       isExpandable && "iw-list-item-expandable",
       isDisabled && "iw-list-item-disabled",

package/src/examples/dashboard/app-drawer.js

@@ -44,7 +44,9 @@ export const AppDrawer = {
         className: "iw-dashboard-brand",
         children: [
           Avatar.render({ src: "/transparent.png", shape: "square" }),
-          html`<span class="iw-dashboard-brand-title">Inglorious UI</span>`,
+          html`<span class="iw-dashboard-brand-title iw-typography"
+            >Inglorious UI</span
+          >`,
         ],
       }),
       children: html`

package/src/examples/dashboard/dashboard.js

@@ -75,8 +75,12 @@ export const Dashboard = {
               padding: "md",
               className: "iw-dashboard-footer",
               children: [
-                html`<div>Admin dashboard example © 2026</div>`,
-                html`<div>Built with Inglorious UI primitives and charts</div>`,
+                html`<div class="iw-typography">
+                  Admin dashboard example © 2026
+                </div>`,
+                html`<div class="iw-typography">
+                  Built with Inglorious UI primitives and charts
+                </div>`,
               ],
             }),
           ],

package/src/examples/dashboard/social-card.js

@@ -50,12 +50,10 @@ export const SocialCard = {
   renderAreaSpark(entity, api) {
     return Chart.render(
       {
-        type: "area",
         data: entity.data.map((value, index) => ({ name: `${index}`, value })),
         width: 640,
         height: 200,
         padding: 0,
-        dataKeys: ["value"],
         children: [
           Chart.Area({
             dataKey: "value",

package/src/examples/dashboard/stat-card.js

@@ -55,30 +55,33 @@ export const StatCard = {
     }))
 
     const base = {
-      id: entity.id,
-      type: entity.chartType,
       data,
       width: 400,
       height: 80,
-      padding: { top: 0, right: 16, bottom: -16, left: 16 },
+      padding: { top: 0, right: 16, bottom: -8, left: 16 },
+      dataKeys: ["value"],
     }
 
     const children = []
+
+    if (entity.chartType === "area") {
+      children.push(
+        Chart.Area({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
+      )
+    } else if (entity.chartType === "bar") {
+      children.push(
+        Chart.Bar({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
+      )
+    } else if (entity.chartType === "line") {
+      children.push(Chart.Line({ dataKey: "value", stroke: "white" }))
+    }
+
     if (entity.hasDots) {
       children.push(
         Chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
       )
     }
 
-    if (entity.chartType === "area") {
-      children.push(Chart.Area({ fill: "rgba(255,255,255,0.3)" }))
-      return Chart.render({ ...base, children }, api)
-    }
-    if (entity.chartType === "bar") {
-      children.push(Chart.Bar({ fill: "rgba(255,255,255,0.3)" }))
-      return Chart.render({ ...base, children }, api)
-    }
-    children.push(Chart.Line({ stroke: "white" }))
     return Chart.render({ ...base, children }, api)
   },
 }

package/src/examples/dashboard/style.css

@@ -78,7 +78,6 @@
 
 .iw-dashboard-stat {
   overflow: hidden;
-  color: white;
 
   .iw-typography,
   .iw-material-icon,
@@ -88,16 +87,16 @@
   }
 }
 
-.iw-dashboard-stat-primary {
+.iw-card.iw-dashboard-stat-primary > .iw-card-body {
   background: #5856d6;
 }
-.iw-dashboard-stat-info {
+.iw-card.iw-dashboard-stat-info > .iw-card-body {
   background: #39a2f1;
 }
-.iw-dashboard-stat-warning {
+.iw-card.iw-dashboard-stat-warning > .iw-card-body {
   background: #f5a524;
 }
-.iw-dashboard-stat-danger {
+.iw-card.iw-dashboard-stat-danger > .iw-card-body {
   background: #e55353;
 }
 
@@ -149,6 +148,8 @@
 }
 
 .iw-dashboard-social-card {
+  background-color: var(--iw-card-border);
+
   .iw-dashboard-social-cap {
     position: relative;
     display: flex;
@@ -181,6 +182,10 @@
       height: 100%;
     }
   }
+
+  .iw-card-body {
+    background-color: var(--iw-card-bg);
+  }
 }
 
 .iw-dashboard-social-stats {

package/src/examples/dashboard/traffic-sales-card.js

@@ -62,7 +62,7 @@ export const TrafficSalesCard = {
                       align: "center",
                       className: "iw-dashboard-progress-row",
                       children: [
-                        html`<span>${day}</span>`,
+                        html`<span class="iw-typography">${day}</span>`,
                         Flex.render({
                           direction: "column",
                           gap: "sm",
@@ -127,7 +127,9 @@ export const TrafficSalesCard = {
                                   name: iconName,
                                   size: "lg",
                                 }),
-                                html`<span>${label}</span>`,
+                                html`<span class="iw-typography"
+                                  >${label}</span
+                                >`,
                               ],
                             }),
                             Flex.render({
@@ -136,10 +138,18 @@ export const TrafficSalesCard = {
                               className: "iw-dashboard-progress-meta",
                               children: metric
                                 ? [
-                                    html`<span>${metric}</span>`,
-                                    html`<span>${suffix}</span>`,
+                                    html`<span class="iw-typography"
+                                      >${metric}</span
+                                    >`,
+                                    html`<span class="iw-typography"
+                                      >${suffix}</span
+                                    >`,
                                   ]
-                                : [html`<span>${value}%</span>`],
+                                : [
+                                    html`<span class="iw-typography"
+                                      >${value}%</span
+                                    >`,
+                                  ],
                             }),
                           ],
                         })}
@@ -187,7 +197,7 @@ export const TrafficSalesCard = {
                       children: "",
                     })}
                   </span>`,
-                  html`<div>
+                  html`<div class="iw-typography">
                     <div>${row.name}</div>
                     <div class="iw-dashboard-user-subtitle">
                       ${row.subtitle}
@@ -208,8 +218,9 @@ export const TrafficSalesCard = {
                     justify: "between",
                     gap: "sm",
                     children: [
-                      html`<span>${row.usage}%</span>`,
-                      html`<span class="iw-dashboard-user-subtitle"
+                      html`<span class="iw-typography">${row.usage}%</span>`,
+                      html`<span
+                        class="iw-typography iw-dashboard-user-subtitle"
                         >${row.range}</span
                       >`,
                     ],
@@ -232,8 +243,10 @@ export const TrafficSalesCard = {
             </div>`,
             activity: html`
               <div>
-                <div class="iw-dashboard-user-subtitle">Last login</div>
-                <div>${row.activity}</div>
+                <div class="iw-typography iw-dashboard-user-subtitle">
+                  Last login
+                </div>
+                <div class="iw-typography">${row.activity}</div>
               </div>
             `,
             menu: html`

package/src/navigation/breadcrumbs/template.js

@@ -73,7 +73,7 @@ export const Breadcrumbs = {
   renderItem(item, index, props) {
     const isLast = index === props.items.length - 1
 
-    return html`<li class="iw-breadcrumbs-item">
+    return html`<li class="iw-breadcrumbs-item iw-typography">
       ${item.href && !isLast
         ? html`<a
             href=${item.href}

package/src/styles/themes/inglorious.css

@@ -1,5 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Oxanium:wght@200..800&display=swap");
+
+:root {
+  --iw-font-family: "Oxanium", var(--iw-font-family-sans);
+}
+
 .iw-theme-inglorious {
-  font-family: var(--iw-font-family-sans);
+  --iw-font-family-sans: var(--iw-font-family);
 
   /* ========================================
      INGLORIOUS THEME - Neon Videogame Aesthetic
@@ -128,3 +134,51 @@
     var(--iw-color-white)
   );
 }
+
+.iw-theme-inglorious {
+  .iw-typography {
+    font-family: var(--iw-font-family-sans);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  th {
+    font-family: "Orbitron", sans-serif;
+  }
+
+  .iw-card {
+    --cut: 20px;
+
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% calc(100% - var(--cut)),
+      calc(100% - var(--cut)) 100%,
+      0 100%
+    );
+
+    background-color: var(--iw-card-border);
+
+    .iw-card-header,
+    .iw-card-body,
+    .iw-card-footer {
+      background-color: var(--iw-card-bg);
+    }
+
+    > :last-child {
+      --cut: 20px;
+
+      clip-path: polygon(
+        0 0,
+        100% 0,
+        100% calc(100% - var(--cut)),
+        calc(100% - var(--cut)) 100%,
+        0 100%
+      );
+    }
+  }
+}