@erplora/outfitkit - npm Package Compare versions

Comparing version 0.1.24 to 0.1.25

dist/erplora.css

@@ -75,2 +75,29 @@ /* Tema CANÓNICO de marca ERPlora — fuente única de verdad de los tokens compartidos por
   --ok-font: var(--ion-font-family);
+  --ok-font-display: var(--font-display, var(--ok-font));
+
+  /* ── Escala tipográfica semántica ──
+   * Los componentes consumen estos niveles en lugar de inventar tamaños
+   * propios. Los clamp mantienen la jerarquía entre móvil y escritorio. */
+  --ok-type-display-size: clamp(3rem, 2.25rem + 3vw, 4.5rem);
+  --ok-type-display-weight: 650;
+  --ok-type-display-leading: 1;
+  --ok-type-page-title-size: clamp(2.35rem, 1.75rem + 2.6vw, 4rem);
+  --ok-type-page-title-compact-size: clamp(2rem, 1.55rem + 2vw, 3.25rem);
+  --ok-type-page-title-weight: 650;
+  --ok-type-page-title-leading: 1.04;
+  --ok-type-section-title-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
+  --ok-type-section-title-weight: 650;
+  --ok-type-section-title-leading: 1.06;
+  --ok-type-card-title-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
+  --ok-type-card-title-weight: 620;
+  --ok-type-card-title-leading: 1.25;
+  --ok-type-intro-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --ok-type-intro-leading: 1.6;
+  --ok-type-body-size: 1rem;
+  --ok-type-body-leading: 1.6;
+  --ok-type-card-body-size: 0.92rem;
+  --ok-type-card-body-leading: 1.55;
+  --ok-type-eyebrow-size: 0.72rem;
+  --ok-type-eyebrow-weight: 600;
+  --ok-type-eyebrow-leading: 1.2;
 }
@@ -77,0 +104,0 @@

dist/layout.css

@@ -178,4 +178,5 @@ /* OutfitKit — layout.css
   border-radius: 999px;
-  font-size: 0.72rem;
-  font-weight: 600;
+  font-size: var(--ok-type-eyebrow-size, 0.72rem);
+  font-weight: var(--ok-type-eyebrow-weight, 600);
+  line-height: var(--ok-type-eyebrow-leading, 1.2);
   letter-spacing: 0.04em;
@@ -194,6 +195,7 @@ text-transform: uppercase;
   margin: 0;
-  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
-  line-height: 1.06;
+  font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+  font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
+  line-height: var(--ok-type-section-title-leading, 1.06);
   letter-spacing: -0.025em;
-  font-weight: 650;
+  font-weight: var(--ok-type-section-title-weight, 650);
 }
@@ -203,7 +205,47 @@
   margin: 0;
-  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
-  line-height: 1.55;
+  font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+  line-height: var(--ok-type-intro-leading, 1.6);
   color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
 }
 
+/* Tipografía editorial reutilizable fuera de los componentes. El display se
+ * reserva para el hero principal; page-title para cabeceras interiores e
+ * intro/body para el texto que las acompaña. */
+.ok-display-title,
+.ok-page-title {
+  margin: 0;
+  font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+  letter-spacing: -0.045em;
+}
+
+.ok-display-title {
+  font-size: var(--ok-type-display-size, clamp(3rem, 2.25rem + 3vw, 4.5rem));
+  font-weight: var(--ok-type-display-weight, 650);
+  line-height: var(--ok-type-display-leading, 1);
+}
+
+.ok-page-title {
+  font-size: var(--ok-type-page-title-size, clamp(2.35rem, 1.75rem + 2.6vw, 4rem));
+  font-weight: var(--ok-type-page-title-weight, 650);
+  line-height: var(--ok-type-page-title-leading, 1.04);
+  text-wrap: balance;
+}
+
+.ok-intro,
+.ok-body {
+  margin: 0;
+  color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
+  text-wrap: pretty;
+}
+
+.ok-intro {
+  font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+  line-height: var(--ok-type-intro-leading, 1.6);
+}
+
+.ok-body {
+  font-size: var(--ok-type-body-size, 1rem);
+  line-height: var(--ok-type-body-leading, 1.6);
+}
+
 /* ===== Tabla apilable (.ok-table-stack) — patrón «no more tables» =====
@@ -210,0 +252,0 @@ *

dist/ok-bento-item.js

@@ -99,4 +99,5 @@ import { LitElement, css, html } from "lit";
     .eyebrow {
-      font-size: 0.7rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.05em;
@@ -108,8 +109,13 @@ text-transform: uppercase;
       margin: 0;
-      font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
-      font-weight: 620;
+      font-size: var(--ok-type-card-title-size, 1.15rem);
+      font-weight: var(--ok-type-card-title-weight, 620);
       letter-spacing: -0.015em;
-      line-height: 1.2;
+      line-height: var(--ok-type-card-title-leading, 1.25);
     }
-    ::slotted(p) { margin: 0; color: var(--muted); line-height: 1.55; }
+    ::slotted(p) {
+      margin: 0;
+      color: var(--muted);
+      font-size: var(--ok-type-card-body-size, 0.92rem);
+      line-height: var(--ok-type-card-body-leading, 1.55);
+    }
   `;
@@ -116,0 +122,0 @@ }

dist/ok-cta-band.js

@@ -71,4 +71,5 @@ import { LitElement, css, html } from "lit";
     .eyebrow {
-      font-size: 0.74rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.06em;
@@ -80,6 +81,7 @@ text-transform: uppercase;
       margin: 0;
-      font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
-      line-height: 1.08;
+      font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+      font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
+      line-height: var(--ok-type-section-title-leading, 1.06);
       letter-spacing: -0.03em;
-      font-weight: 680;
+      font-weight: var(--ok-type-section-title-weight, 650);
       max-width: 22ch;
@@ -89,11 +91,12 @@ }
       margin: 0;
-      font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
-      line-height: 1.08;
+      font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+      font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
+      line-height: var(--ok-type-section-title-leading, 1.06);
       letter-spacing: -0.03em;
-      font-weight: 680;
+      font-weight: var(--ok-type-section-title-weight, 650);
     }
     .sub {
       margin: 0;
-      font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
-      line-height: 1.5;
+      font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+      line-height: var(--ok-type-intro-leading, 1.6);
       color: var(--muted);
@@ -100,0 +103,0 @@ max-width: 50ch;

dist/ok-feature-card.js

@@ -94,4 +94,5 @@ import { LitElement, css, html } from "lit";
     .eyebrow {
-      font-size: 0.7rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.05em;
@@ -103,11 +104,11 @@ text-transform: uppercase;
       margin: 0;
-      font-size: 1.15rem;
-      font-weight: 620;
+      font-size: var(--ok-type-card-title-size, 1.15rem);
+      font-weight: var(--ok-type-card-title-weight, 620);
       letter-spacing: -0.015em;
-      line-height: 1.25;
+      line-height: var(--ok-type-card-title-leading, 1.25);
     }
     .desc {
       color: var(--muted);
-      font-size: 0.92rem;
-      line-height: 1.55;
+      font-size: var(--ok-type-card-body-size, 0.92rem);
+      line-height: var(--ok-type-card-body-leading, 1.55);
     }
@@ -114,0 +115,0 @@ ::slotted(*) { margin: 0; }

dist/ok-hero.js

@@ -89,5 +89,5 @@ import { LitElement, css, html } from "lit";
       background: color-mix(in oklab, var(--primary) 12%, transparent);
-      font-size: 0.72rem;
-      font-weight: 600;
-      line-height: 1.2;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.04em;
@@ -115,5 +115,5 @@ text-transform: uppercase;
       font-family: var(--font-display);
-      font-size: clamp(2.35rem, 1.75rem + 2.6vw, 4rem);
-      font-weight: 650;
-      line-height: 1.04;
+      font-size: var(--ok-type-page-title-size, clamp(2.35rem, 1.75rem + 2.6vw, 4rem));
+      font-weight: var(--ok-type-page-title-weight, 650);
+      line-height: var(--ok-type-page-title-leading, 1.04);
       letter-spacing: -0.045em;
@@ -123,3 +123,3 @@ text-wrap: balance;
     :host([compact]) .title {
-      font-size: clamp(2rem, 1.55rem + 2vw, 3.25rem);
+      font-size: var(--ok-type-page-title-compact-size, clamp(2rem, 1.55rem + 2vw, 3.25rem));
     }
@@ -141,4 +141,4 @@ .title ::slotted([slot='title']) {
       color: var(--color-muted);
-      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
-      line-height: 1.6;
+      font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+      line-height: var(--ok-type-intro-leading, 1.6);
       text-wrap: pretty;
@@ -145,0 +145,0 @@ }

dist/ok-product-card.js

@@ -81,4 +81,5 @@ import { LitElement, css, html } from "lit";
     .cat {
-      font-size: 0.68rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.05em;
@@ -101,11 +102,11 @@ text-transform: uppercase;
       margin: 0.3rem 0 0;
-      font-size: 1.05rem;
-      font-weight: 620;
+      font-size: var(--ok-type-card-title-size, 1.15rem);
+      font-weight: var(--ok-type-card-title-weight, 620);
       letter-spacing: -0.01em;
-      line-height: 1.25;
+      line-height: var(--ok-type-card-title-leading, 1.25);
     }
     .desc {
       color: var(--muted);
-      font-size: 0.88rem;
-      line-height: 1.5;
+      font-size: var(--ok-type-card-body-size, 0.92rem);
+      line-height: var(--ok-type-card-body-leading, 1.55);
       flex: 1;
@@ -112,0 +113,0 @@ }

package.json

 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "OutfitKit — librería de Web Components (Lit) que CONSTRUYE lo que Ionic no tiene (tree, data-table rica, inline-feedback, kpi/stat, stepper/wizard, calendar, kanban…) sobre primitivos de Ionic. Ionic es la base; OutfitKit cubre los huecos. npm + CDN, imports individuales, CSP-safe. Tema vía tokens --ok-* (fallback a --ion-*).",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Improved metrics

Total package byte prevSize

2073333

0.31%

Lines of code

60119

0.14%

No dependency changes