@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/tokens.css

@@ -1,7 +1,353 @@
-@import './tokens/_palette.css';
-@import './tokens/_typography.css';
-@import './tokens/_spacing.css';
-@import './tokens/_motion.css';
-@import './tokens/_state.css';
-@import './tokens/_semantic.css';
-@import './tokens/_effects.css';
+:host, :root {
+  /* --- WASHI: Tonos de papel neutros --- */
+  --color-washi-50:  oklch(97.77% 0.003 68.35deg);  /* #FAF7F4 */
+  --color-washi-100: oklch(94.29% 0.007 72.91deg);  /* #F2EDE6 */
+  --color-washi-200: oklch(88.59% 0.008 72.93deg);  /* #E5DDD3 */
+  --color-washi-300: oklch(81.39% 0.01  74.43deg);  /* #D3C8BC */
+  --color-washi-400: oklch(71.05% 0.013 74.74deg);  /* #B8A99A */
+  --color-washi-500: oklch(59.45% 0.015 75.31deg);  /* #9A8878 */
+  --color-washi-600: oklch(48.51% 0.014 76.22deg);  /* #7A6A5C */
+  --color-washi-700: oklch(37.66% 0.013 77.58deg);  /* #5C4E42 */
+  --color-washi-800: oklch(26.83% 0.012 79.82deg);  /* #3D332A */
+  --color-washi-900: oklch(17.39% 0.01  83.02deg);  /* #221C16 */
+  --color-washi-950: oklch(11.39% 0.009 84.7deg);   /* #120E0A */
+
+  /* --- INK: Transparencias de Sumi --- */
+  --color-ink-0:   oklch(11.39% 0.009 84.7deg / 0);    /* #1A140E al   0% */
+  --color-ink-10:  oklch(11.39% 0.009 84.7deg / 0.06); /* #1A140E al   6% */
+  --color-ink-20:  oklch(11.39% 0.009 84.7deg / 0.12); /* #1A140E al  12% */
+  --color-ink-40:  oklch(11.39% 0.009 84.7deg / 0.25); /* #1A140E al  25% */
+  --color-ink-60:  oklch(11.39% 0.009 84.7deg / 0.5);  /* #1A140E al  50% */
+  --color-ink-80:  oklch(11.39% 0.009 84.7deg / 0.75); /* #1A140E al  75% */
+  --color-ink-100: oklch(11.39% 0.009 84.7deg / 1);    /* #1A140E al 100% */
+
+  /* --- KAKI: Acento caqui/persimón --- */
+  --color-kaki-50:  oklch(96.88% 0.012 55.48deg); /* #FDF3EC */
+  --color-kaki-100: oklch(91.31% 0.038 65.52deg); /* #FAE2CC */
+  --color-kaki-200: oklch(81.87% 0.076 60.59deg); /* #F4C099 */
+  --color-kaki-300: oklch(70.92% 0.125 52.88deg); /* #EB9660 */
+  --color-kaki-400: oklch(61.85% 0.149 48.72deg); /* #D97234 */
+  --color-kaki-500: oklch(51.65% 0.134 46.13deg); /* #B85A1E */
+  --color-kaki-600: oklch(40.5%  0.108 44.59deg); /* #8C4115 */
+  --color-kaki-700: oklch(29.17% 0.08  44.25deg); /* #602C0E */
+
+  /* --- CELADÓN: Acento jade --- */
+  --color-celadon-50:  oklch(96.39% 0.007 172.9deg);   /* #EFF5F3 */
+  --color-celadon-100: oklch(90.69% 0.021 169.15deg);  /* #D3E8E1 */
+  --color-celadon-200: oklch(81.25% 0.039 171.18deg);  /* #A8D0C4 */
+  --color-celadon-300: oklch(70.21% 0.057 167.31deg);  /* #79B5A3 */
+  --color-celadon-400: oklch(58.33% 0.068 171.21deg);  /* #4E9482 */
+  --color-celadon-500: oklch(45.54% 0.059 173.23deg);  /* #357164 */
+  --color-celadon-600: oklch(33.72% 0.046 173.86deg);  /* #245249 */
+
+  /* --- BASE --- */
+  --color-white: oklch(100% 0 0deg); /* #FFFFFF */
+}
+
+:host, :root {
+  /* --- Escala de tamaños --- */
+  --text-xs:   0.6875rem; /*  11px */
+  --text-sm:   0.8125rem; /*  13px */
+  --text-base: 0.9375rem; /*  15px */
+  --text-md:   1.0625rem; /*  17px */
+  --text-lg:   1.25rem;   /*  20px */
+  --text-xl:   1.5rem;    /*  24px */
+  --text-2xl:  2rem;      /*  32px */
+  --text-3xl:  2.75rem;   /*  44px */
+  --text-4xl:  3.75rem;   /*  60px */
+  --text-5xl:  5rem;      /*  80px */
+
+  /* --- Pesos --- */
+  --weight-light:    300;
+  --weight-regular:  400;
+  --weight-medium:   500;
+  --weight-semibold: 600;
+  --weight-bold:     700;
+
+  /* --- Familias tipográficas --- */
+  --lib-font-display:     "Cormorant Garamond", serif;
+  --lib-font-body:        "Shippori Mincho", serif;
+  --lib-font-mono:        "DM Mono", monospace;
+  --lib-font-family-base: var(--lib-font-body);
+
+  /* --- Interlineado --- */
+  --leading-tight:   1.2;
+  --leading-snug:    1.4;
+  --leading-normal:  1.6;
+  --leading-relaxed: 1.8;
+  --leading-loose:   2.2;
+
+  /* --- Tracking editorial --- */
+  --tracking-tight:   -0.02em;
+  --tracking-normal:   0em;
+  --tracking-wide:     0.08em;
+  --tracking-wider:    0.15em;
+  --tracking-widest:   0.25em;
+
+  /* --- Tokens lib de tipografía --- */
+  --lib-tracking-elegant: 0.15em;
+  --lib-font-size-base:   14px;
+  --lib-text-transform:   uppercase;
+  --lib-border-width:     1.5px;
+}
+
+:host, :root {
+  /* --- Escala de aire (armonía 4px) --- */
+  --lib-spacing-unit: 0.25rem;
+  --lib-space-xs:  var(--lib-spacing-unit);             /*  4px */
+  --lib-space-sm:  calc(var(--lib-spacing-unit) * 2);   /*  8px */
+  --lib-space-md:  calc(var(--lib-spacing-unit) * 4);   /* 16px */
+  --lib-space-lg:  calc(var(--lib-spacing-unit) * 6);   /* 24px */
+  --lib-space-xl:  calc(var(--lib-spacing-unit) * 8);   /* 32px */
+  --lib-space-2xl: calc(var(--lib-spacing-unit) * 12);  /* 48px */
+  --lib-space-3xl: calc(var(--lib-spacing-unit) * 16);  /* 64px */
+
+  /* --- Z-index (profundidad) --- */
+  --z-base:    0;
+  --z-raised:  10;
+  --z-overlay: 100;
+  --z-modal:   200;
+  --z-toast:   300;
+  --z-tooltip: 400;
+
+  /* --- Radios estándar --- */
+  --radius-none: 0;
+  --radius-sm:   2px;
+  --radius-md:   4px;
+  --radius-lg:   8px;
+  --radius-xl:   16px;
+  --radius-full: 9999px;
+
+  /* --- Radios brutalistas --- */
+  --lib-radius-xs: 0px;
+  --lib-radius-sm: 0px;
+  --lib-radius-md: 1px;
+  --lib-radius-lg: 2px;
+}
+
+:host, :root {
+  /* --- Duraciones --- */
+  --duration-fast:   100ms;
+  --duration-base:   200ms;
+  --duration-slow:   350ms;
+  --duration-slower: 600ms;
+
+  /* --- Curvas de Bezier --- */
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
+  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
+  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Transiciones compuestas --- */
+  --transition-fast: var(--duration-fast) var(--ease-default);
+  --transition-base: var(--duration-base) var(--ease-default);
+  --transition-slow: var(--duration-slow) var(--ease-default);
+}
+
+:host, :root {
+  /* --- Colores semánticos de estado --- */
+  --color-error:   oklch(36.16% 0.106 28.52deg);  /* #8C2A1A */
+  --color-warning: oklch(47.53% 0.088 77.58deg);  /* #8C6A1A */
+  --color-success: oklch(38.41% 0.063 147.16deg); /* #2A5C3A */
+  --color-info:    oklch(58.33% 0.068 171.21deg); /* #4E9482 */
+
+  /* --- Fondos y bordes sutiles --- */
+  --color-error-subtle:    #FFF0EE;
+  --color-error-border:    #F5C4BC;
+  --color-warning-subtle:  #FDF8EE;
+  --color-warning-border:  #F5E0A0;
+  --color-success-subtle:  #EFF5F1;
+  --color-success-border:  #BDD8C5;
+  --color-info-subtle:     #EFF5F3;
+  --color-info-border:     #A8D0C4;
+
+  /* --- Textos de estado --- */
+  --text-error:   var(--color-error);
+  --text-warning: var(--color-warning);
+  --text-success: var(--color-success);
+  --text-info:    var(--color-info);
+
+  /* --- Estado deshabilitado --- */
+  --color-disabled-bg:     var(--color-washi-100);
+  --color-disabled-text:   var(--color-washi-400);
+  --color-disabled-border: var(--color-washi-200);
+}
+
+:host, :root {
+  /* --- Identidad Shibui --- */
+  --lib-shibui-water: var(--color-celadon-500);
+  --lib-shibui-kaki:  var(--color-kaki-500);
+  --lib-shibui-paper: var(--color-washi-100);
+  --lib-shibui-ink:   var(--color-ink-100);
+
+  /* --- Mapeado semántico base --- */
+  --lib-color-primary: var(--lib-shibui-water);
+  --lib-color-bg:      var(--lib-shibui-paper);
+  --lib-color-text:    var(--lib-shibui-ink);
+
+  /* --- Fondos semánticos --- */
+  --bg-base:     var(--color-washi-50);
+  --bg-surface:  var(--color-washi-100);
+  --bg-elevated: var(--color-white);
+  --bg-inverse:  var(--color-washi-900);
+  --bg-overlay:  var(--color-ink-60);
+
+  /* --- Textos semánticos --- */
+  --text-primary:    var(--color-washi-900);
+  --text-secondary:  var(--color-washi-600);
+  --text-muted:      var(--color-washi-400);
+  --text-inverse:    var(--color-washi-50);
+  --text-accent:     var(--color-kaki-500);
+  --text-link:       var(--color-celadon-500);
+  --text-link-hover: var(--color-celadon-400);
+
+  /* --- Bordes semánticos --- */
+  --border-subtle:  var(--color-washi-200);
+  --border-default: var(--color-washi-300);
+  --border-strong:  var(--color-washi-500);
+  --border-focus:   var(--color-celadon-400);
+
+  /* --- Sombras --- */
+  --shadow-sm: 0 1px 2px var(--color-ink-10);
+  --shadow-md: 0 2px 8px var(--color-ink-10), 0 1px 2px var(--color-ink-10);
+  --shadow-lg: 0 8px 24px var(--color-ink-10), 0 2px 4px var(--color-ink-10);
+  --shadow-xl: 0 20px 48px var(--color-ink-20);
+
+  --lib-shadow-brutal: 4px 4px 0px 0px var(--lib-shibui-ink);
+  --lib-shadow-glass:  0 8px 32px 0 oklch(25% 0.02 45deg / 0.2);
+}
+
+/* --- Dark mode overrides --- */
+:host([data-theme="dark"]) {
+  --bg-base:     var(--color-washi-950);
+  --bg-surface:  var(--color-washi-900);
+  --bg-elevated: var(--color-washi-800);
+  --bg-inverse:  var(--color-washi-50);
+  --bg-overlay:  oklch(0% 0 0deg / 0.7);
+
+  --text-primary:    var(--color-washi-50);
+  --text-secondary:  var(--color-washi-400);
+  --text-muted:      var(--color-washi-600);
+  --text-inverse:    var(--color-washi-900);
+  --text-accent:     var(--color-kaki-300);
+  --text-link:       var(--color-celadon-300);
+  --text-link-hover: var(--color-celadon-200);
+
+  --border-subtle:  var(--color-washi-800);
+  --border-default: var(--color-washi-700);
+  --border-strong:  var(--color-washi-500);
+
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
+  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.2);
+  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.2);
+  --shadow-xl: 0 20px 48px rgb(0 0 0 / 0.5);
+}
+
+:host, :root {
+  /* ======================================================
+     GLASS SYSTEM (Efecto Enso)
+     ====================================================== */
+
+  /* --- Primitivos Glass --- */
+  --lib-glass-blur-amount:     12px;
+  --lib-glass-saturate-amount: 120%;
+  --lib-glass-bg-opacity:      0.15;
+  --lib-glass-border-opacity:  0.20;
+  --lib-glass-shadow-opacity:  0.37;
+  --lib-glass-shine-start:     0.35;
+  --lib-glass-shine-end:       0.05;
+
+  /* --- Intensidades Glass --- */
+  --lib-glass-blur-low:  4px;
+  --lib-glass-blur-md:   12px;
+  --lib-glass-blur-high: 25px;
+
+  --lib-glass-opacity-low:  0.10;
+  --lib-glass-opacity-md:   0.15;
+  --lib-glass-opacity-high: 0.25;
+
+  /* --- Tokens compuestos Glass --- */
+  --lib-glass-bg:
+    oklch(98% 0.01 60deg / var(--lib-glass-bg-opacity));
+
+  --lib-glass-bg-water:
+    oklch(55% 0.06 210deg / var(--lib-glass-bg-opacity));
+
+  --lib-glass-bg-kaki:
+    oklch(45% 0.05 45deg / var(--lib-glass-bg-opacity));
+
+  --lib-glass-filter:
+    blur(var(--lib-glass-blur-amount))
+    saturate(var(--lib-glass-saturate-amount));
+
+  --lib-glass-border:
+    1px solid oklch(100% 0 0deg / var(--lib-glass-border-opacity));
+
+  --lib-glass-shadow:
+    0 8px 32px oklch(0% 0 0deg / var(--lib-glass-shadow-opacity));
+
+  --lib-glass-shadow-hover:
+    0 20px 45px oklch(0% 0 0deg / 0.5);
+
+  --lib-glass-shine:
+    linear-gradient(
+      135deg,
+      oklch(100% 0 0deg / var(--lib-glass-shine-start)) 0%,
+      oklch(100% 0 0deg / var(--lib-glass-shine-end))   50%,
+      oklch(100% 0 0deg / 0)                            100%
+    );
+
+  --lib-glass-text:        var(--lib-shibui-paper);
+  --lib-glass-text-shadow: 0 1px 3px oklch(0% 0 0deg / 0.3);
+
+  /* ======================================================
+     SPOTLIGHT SYSTEM (Kintsugi Digital)
+     ====================================================== */
+
+  /* --- Primitivos Spotlight --- */
+  --lib-spotlight-opacity:    0.12;
+  --lib-spotlight-feather:    60%;
+  --lib-spotlight-x:          50%;
+  --lib-spotlight-y:          50%;
+  --lib-spotlight-transition: background 0.15s ease-out;
+
+  /* --- Gradientes Spotlight --- */
+  --lib-spotlight-gradient:
+    radial-gradient(
+      circle at var(--lib-spotlight-x) var(--lib-spotlight-y),
+      oklch(45% 0.05 45deg / var(--lib-spotlight-opacity)) 0%,
+      oklch(45% 0.05 45deg / 0)                            var(--lib-spotlight-feather)
+    );
+
+  --lib-spotlight-gradient-water:
+    radial-gradient(
+      circle at var(--lib-spotlight-x) var(--lib-spotlight-y),
+      oklch(55% 0.06 210deg / var(--lib-spotlight-opacity)) 0%,
+      oklch(55% 0.06 210deg / 0)                            var(--lib-spotlight-feather)
+    );
+
+  --lib-spotlight-gradient-white:
+    radial-gradient(
+      circle at var(--lib-spotlight-x) var(--lib-spotlight-y),
+      oklch(100% 0 0deg / 0.10) 0%,
+      oklch(100% 0 0deg / 0)    var(--lib-spotlight-feather)
+    );
+
+  /* ======================================================
+     TEXTURAS Y EFECTOS DECORATIVOS
+     ====================================================== */
+
+  /* --- Textura de ruido (metal/seda) --- */
+  --lib-metal-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  --lib-metal-texture-opacity: 0.03;
+
+  /* --- Borde kintsugi (hilo de oro en las grietas) --- */
+  --lib-kintsugi-border:
+    linear-gradient(
+      135deg,
+      oklch(45% 0.05 45deg / 0.6) 0%,
+      oklch(45% 0.05 45deg / 0)   40%,
+      oklch(45% 0.05 45deg / 0)   60%,
+      oklch(45% 0.05 45deg / 0.3) 100%
+    );
+}

package/dist/vite.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;;AAyGpE,wBAAoC"}
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;;AA0GpE,wBAAoC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shibui-ui/ui",
-  "version": "1.24.1",
+  "version": "1.25.1",
   "private": false,
   "repository": {
     "type": "git",
@@ -81,10 +81,10 @@
     "@types/react": "^18.0.0",
     "@axe-core/playwright": "^4.10.0",
     "@chromatic-com/storybook": "^5.0.0",
-    "@commitlint/cli": "^20.4.1",
-    "@commitlint/config-conventional": "^20.4.1",
+    "@commitlint/cli": "^21.0.1",
+    "@commitlint/config-conventional": "^21.0.1",
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.55.1",
     "@storybook/addon-a11y": "^10.2.6",
     "@storybook/addon-docs": "^10.2.6",
     "@storybook/addon-vitest": "^10.2.6",