@solostylist/ui-kit 1.0.117 → 1.0.119

package/dist/theme/theme-primitives.js

@@ -1,6 +1,6 @@
-import { a as b } from "../createTheme-3Wd3hHrj.js";
-import { a as l } from "../colorManipulator-ep5lERxB.js";
-const h = b(), e = {
+import { a as m } from "../createTheme-3Wd3hHrj.js";
+import { a as r } from "../colorManipulator-ep5lERxB.js";
+const l = m(), e = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -11,7 +11,7 @@ const h = b(), e = {
   700: "hsl(210, 100%, 35%)",
   800: "hsl(210, 100%, 16%)",
   900: "hsl(210, 100%, 21%)"
-}, s = {
+}, n = {
   50: "hsl(220, 60%, 98%)",
   100: "hsl(220, 55%, 95%)",
   200: "hsl(220, 50%, 88%)",
@@ -22,7 +22,7 @@ const h = b(), e = {
   700: "hsl(220, 95%, 31%)",
   800: "hsl(220, 100%, 24%)",
   900: "hsl(220, 100%, 18%)"
-}, r = {
+}, t = {
   50: "hsl(220, 35%, 97%)",
   100: "hsl(220, 30%, 94%)",
   200: "hsl(220, 20%, 88%)",
@@ -33,7 +33,7 @@ const h = b(), e = {
   700: "hsl(220, 20%, 25%)",
   800: "hsl(220, 30%, 6%)",
   900: "hsl(220, 35%, 3%)"
-}, T = {
+}, a = {
   50: "hsl(210, 20%, 98%)",
   100: "hsl(210, 15%, 95%)",
   200: "hsl(210, 12%, 89%)",
@@ -55,7 +55,7 @@ const h = b(), e = {
   700: "hsl(120, 75%, 16%)",
   800: "hsl(120, 84%, 10%)",
   900: "hsl(120, 87%, 6%)"
-}, n = {
+}, o = {
   50: "hsl(151, 60%, 98%)",
   100: "hsl(151, 55%, 95%)",
   200: "hsl(151, 50%, 88%)",
@@ -66,7 +66,7 @@ const h = b(), e = {
   700: "hsl(151, 90%, 30%)",
   800: "hsl(151, 95%, 23%)",
   900: "hsl(151, 100%, 17%)"
-}, o = {
+}, g = {
   50: "hsl(45, 100%, 97%)",
   100: "hsl(45, 92%, 90%)",
   200: "hsl(45, 94%, 80%)",
@@ -77,7 +77,7 @@ const h = b(), e = {
   700: "hsl(45, 94%, 20%)",
   800: "hsl(45, 95%, 16%)",
   900: "hsl(45, 93%, 12%)"
-}, g = {
+}, p = {
   50: "hsl(48, 100%, 98%)",
   100: "hsl(48, 95%, 94%)",
   200: "hsl(48, 90%, 86%)",
@@ -88,7 +88,7 @@ const h = b(), e = {
   700: "hsl(48, 100%, 35%)",
   800: "hsl(48, 100%, 28%)",
   900: "hsl(48, 100%, 22%)"
-}, p = {
+}, d = {
   50: "hsl(210, 100%, 98%)",
   100: "hsl(210, 95%, 94%)",
   200: "hsl(210, 90%, 87%)",
@@ -99,7 +99,7 @@ const h = b(), e = {
   700: "hsl(210, 95%, 25%)",
   800: "hsl(210, 100%, 15%)",
   900: "hsl(210, 100%, 10%)"
-}, d = {
+}, c = {
   50: "hsl(204, 100%, 98%)",
   100: "hsl(204, 95%, 94%)",
   200: "hsl(204, 90%, 86%)",
@@ -110,7 +110,7 @@ const h = b(), e = {
   700: "hsl(204, 100%, 32%)",
   800: "hsl(204, 100%, 25%)",
   900: "hsl(204, 100%, 19%)"
-}, c = {
+}, f = {
   50: "hsl(0, 100%, 97%)",
   100: "hsl(0, 92%, 90%)",
   200: "hsl(0, 94%, 80%)",
@@ -121,7 +121,7 @@ const h = b(), e = {
   700: "hsl(0, 94%, 18%)",
   800: "hsl(0, 95%, 12%)",
   900: "hsl(0, 93%, 6%)"
-}, f = {
+}, b = {
   50: "hsl(356, 100%, 98%)",
   100: "hsl(356, 95%, 94%)",
   200: "hsl(356, 90%, 87%)",
@@ -154,7 +154,7 @@ const h = b(), e = {
   700: "hsl(280, 90%, 34%)",
   800: "hsl(280, 95%, 27%)",
   900: "hsl(280, 100%, 21%)"
-}, a = {
+}, h = {
   0: "rgba(0,0,0,0)",
   10: "rgba(0,0,0,0.1)",
   20: "rgba(0,0,0,0.2)",
@@ -166,7 +166,7 @@ const h = b(), e = {
   80: "rgba(0,0,0,0.8)",
   90: "rgba(0,0,0,0.9)",
   100: "rgba(0,0,0,1)"
-}, t = {
+}, s = {
   0: "rgba(255,255,255,0)",
   10: "rgba(255,255,255,0.1)",
   20: "rgba(255,255,255,0.2)",
@@ -178,7 +178,7 @@ const h = b(), e = {
   80: "rgba(255,255,255,0.8)",
   90: "rgba(255,255,255,0.9)",
   100: "rgba(255,255,255,1)"
-}, m = {
+}, y = {
   palette: {
     gradient: {
       primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
@@ -187,36 +187,26 @@ const h = b(), e = {
       sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
     },
     blackAlpha: {
-      zero: a[0],
-      // không có
-      light: a[10],
-      // nhẹ, subtle
-      medium: a[50],
-      // vừa, balanced
-      dark: a[80],
-      // đậm, mạnh
-      full: a[100]
-      // đầy đủ
+      zero: h[0],
+      light: h[10],
+      medium: h[50],
+      dark: h[80],
+      full: h[100]
     },
     whiteAlpha: {
-      zero: t[0],
-      // không có
-      light: t[10],
-      // nhẹ, subtle
-      medium: t[50],
-      // vừa, balanced
-      dark: t[80],
-      // đậm, mạnh
-      full: t[100]
-      // đầy đủ
+      zero: s[0],
+      light: s[10],
+      medium: s[50],
+      dark: s[80],
+      full: s[100]
     },
     ui: {
       pulse: {
-        shadowLight: "rgba(255, 255, 255, 0.3)",
-        shadowMedium: "rgba(255, 255, 255, 0.6)",
-        ring: "rgba(255, 255, 255, 0.8)",
-        background: "rgba(255, 255, 255, 0.8)",
-        radialGradient: "radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%)"
+        shadowLight: s[30],
+        shadowMedium: s[60],
+        ring: s[80],
+        background: s[80],
+        radialGradient: `radial-gradient(circle, ${s[30]} 0%, ${s[10]} 50%, transparent 100%)`
       }
     },
     primary: {
@@ -228,22 +218,22 @@ const h = b(), e = {
       black: "#000000"
     },
     info: {
-      contrastText: p[50],
-      light: p[400],
-      main: p[500],
-      dark: p[700]
+      contrastText: d[50],
+      light: d[400],
+      main: d[500],
+      dark: d[700]
     },
     warning: {
-      contrastText: o[50],
-      light: o[400],
-      main: o[500],
-      dark: o[700]
+      contrastText: g[50],
+      light: g[400],
+      main: g[500],
+      dark: g[700]
     },
     error: {
-      contrastText: c[50],
-      light: c[400],
-      main: c[500],
-      dark: c[700]
+      contrastText: f[50],
+      light: f[400],
+      main: f[500],
+      dark: f[700]
     },
     success: {
       contrastText: i[50],
@@ -251,23 +241,23 @@ const h = b(), e = {
       main: i[500],
       dark: i[700]
     },
-    grey: r,
-    divider: l(r[700], 0.6),
+    grey: t,
+    divider: r(t[700], 0.6),
     background: {
-      default: r[900],
-      paper: "hsl(220, 30%, 7%)"
+      default: t[900],
+      paper: t[800]
     },
     text: {
       primary: "rgb(255, 255, 255)",
-      secondary: r[400]
+      secondary: t[400]
     },
     action: {
-      hover: l(r[600], 0.2),
-      selected: l(r[600], 0.3)
+      hover: r(t[600], 0.2),
+      selected: r(t[600], 0.3)
     },
     baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
   }
-}, y = {
+}, x = {
   palette: {
     gradient: {
       primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
@@ -276,193 +266,147 @@ const h = b(), e = {
       sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
     },
     blackAlpha: {
-      zero: a[0],
-      // transparent
-      light: a[10],
-      // very subtle overlay for light theme
-      medium: a[50],
-      // light overlay for light theme
-      dark: a[80],
-      // moderate overlay for light theme
-      full: a[100]
-      // opaque black
+      zero: h[0],
+      light: h[10],
+      medium: h[50],
+      dark: h[80],
+      full: h[100]
     },
     whiteAlpha: {
-      zero: t[0],
-      // transparent
-      light: t[10],
-      // strong white overlay for light theme
-      medium: t[50],
-      // stronger white overlay
-      dark: t[80],
-      // very strong white overlay
-      full: t[100]
-      // opaque white
+      zero: s[0],
+      light: s[10],
+      medium: s[50],
+      dark: s[80],
+      full: s[100]
     },
     ui: {
       pulse: {
-        shadowLight: `${l(s[500], 0.12)}`,
-        shadowMedium: `${l(s[500], 0.18)}`,
-        ring: `${l(s[500], 0.3)}`,
-        background: `${l(s[500], 0.05)}`,
-        radialGradient: `radial-gradient(circle, ${l(s[500], 0.08)} 0%, ${l(s[500], 0.03)} 50%, transparent 100%)`
+        shadowLight: h[30],
+        shadowMedium: h[60],
+        ring: h[80],
+        background: h[80],
+        radialGradient: `radial-gradient(circle, ${h[30]} 0%, ${h[10]} 50%, transparent 100%)`
       }
     },
     primary: {
-      contrastText: s[50],
-      light: s[200],
-      // Light brand color for light theme
-      main: s[500],
-      // Main brand color optimized for light backgrounds
-      dark: s[700],
-      // Dark brand color for strong contrast
+      contrastText: n[50],
+      light: n[200],
+      main: n[500],
+      dark: n[700],
       white: "#ffffff",
       black: "#000000"
     },
     info: {
-      contrastText: d[50],
-      light: d[200],
-      // Light blue for light theme
-      main: d[500],
-      // Main blue for light theme
-      dark: d[700]
-      // Dark blue for light theme
+      contrastText: c[50],
+      light: c[200],
+      main: c[500],
+      dark: c[700]
     },
     warning: {
-      contrastText: g[50],
-      light: g[200],
-      // Light orange for light theme
-      main: g[500],
-      // Main orange for light theme
-      dark: g[700]
-      // Dark orange for light theme
+      contrastText: p[50],
+      light: p[200],
+      main: p[500],
+      dark: p[700]
     },
     error: {
-      contrastText: f[50],
-      light: f[200],
-      // Light red for light theme
-      main: f[500],
-      // Main red for light theme
-      dark: f[700]
-      // Dark red for light theme
+      contrastText: b[50],
+      light: b[200],
+      main: b[500],
+      dark: b[700]
     },
     success: {
-      contrastText: n[50],
-      light: n[200],
-      // Light green for light theme
-      main: n[500],
-      // Main green for light theme
-      dark: n[700]
-      // Dark green for light theme
+      contrastText: o[50],
+      light: o[200],
+      main: o[500],
+      dark: o[700]
     },
-    grey: r,
-    divider: "hsl(214, 32%, 91%)",
-    // Sophisticated light dividers
+    grey: a,
+    divider: r(a[200], 0.6),
     background: {
-      default: "#f8fafc",
-      // Premium light background (slate-inspired)
-      paper: "#ffffff",
-      // Pure white for elevated surfaces
-      surface: s[50],
-      // Subtle brand-tinted surface
-      elevated: "#ffffff"
-      // Elevated surfaces (modals, dropdowns)
+      default: a[50],
+      paper: a[100]
     },
     text: {
-      primary: "hsl(222, 84%, 4.9%)",
-      // Premium dark text (almost black with subtle hue)
-      secondary: "hsl(215, 16%, 47%)",
-      // Balanced secondary text
-      tertiary: "hsl(215, 14%, 65%)",
-      // Light secondary text
-      disabled: "hsl(215, 14%, 75%)"
-      // Disabled text
+      primary: "rgb(0, 0, 0)",
+      secondary: a[500]
     },
     action: {
-      hover: l(s[500], 0.08),
-      // Brand-tinted hover
-      selected: l(s[500], 0.12),
-      // Brand-tinted selection
-      disabled: "hsl(215, 14%, 75%)",
-      // Disabled state
-      disabledBackground: "hsl(215, 20%, 95%)",
-      // Disabled background
-      focus: l(s[500], 0.16)
-      // Prominent focus state
+      hover: r(a[300], 0.2),
+      selected: r(a[300], 0.3)
     },
     baseShadow: "rgba(15, 23, 42, 0.08) 0px 2px 8px 0px, rgba(15, 23, 42, 0.04) 0px 1px 2px -1px"
     // Premium shadows with subtle slate tint
   }
-}, z = { light: y, dark: m }, R = {
+}, z = { light: x, dark: y }, R = {
   fontFamily: "Outfit, sans-serif",
   h1: {
-    fontSize: h.typography.pxToRem(48),
+    fontSize: l.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: h.typography.pxToRem(36),
+    fontSize: l.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: h.typography.pxToRem(30),
+    fontSize: l.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: h.typography.pxToRem(24),
+    fontSize: l.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: h.typography.pxToRem(20),
+    fontSize: l.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: h.typography.pxToRem(18),
+    fontSize: l.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: h.typography.pxToRem(18)
+    fontSize: l.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: h.typography.pxToRem(14),
+    fontSize: l.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: h.typography.pxToRem(14)
+    fontSize: l.typography.pxToRem(14)
   },
   body2: {
-    fontSize: h.typography.pxToRem(14),
+    fontSize: l.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: h.typography.pxToRem(12),
+    fontSize: l.typography.pxToRem(12),
     fontWeight: 400
   }
 }, W = {
   borderRadius: 8
-}, x = ["none", "var(--s-palette-baseShadow)", ...h.shadows.slice(2)], v = x;
+}, u = ["none", "var(--s-palette-baseShadow)", ...l.shadows.slice(2)], A = u;
 export {
-  a as blackAlpha,
-  p as blue,
+  h as blackAlpha,
+  d as blue,
   e as brand,
   z as colorSchemes,
-  r as gray,
+  t as gray,
   i as green,
-  d as lightBlue,
-  s as lightBrand,
-  T as lightGray,
-  n as lightGreen,
-  g as lightOrange,
+  c as lightBlue,
+  n as lightBrand,
+  a as lightGray,
+  o as lightGreen,
+  p as lightOrange,
   S as lightPurple,
-  f as lightRed,
-  o as orange,
+  b as lightRed,
+  g as orange,
   w as purple,
-  c as red,
-  v as shadows,
+  f as red,
+  A as shadows,
   W as shape,
   R as typography,
-  t as whiteAlpha
+  s as whiteAlpha
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.117",
+  "version": "1.0.119",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",