@solostylist/ui-kit 1.0.103 → 1.0.105

package/dist/theme/theme-primitives.js

@@ -1,6 +1,6 @@
-import { a as n } from "../createTheme-YLBX8GSj.js";
-import { a as e } from "../colorManipulator-ep5lERxB.js";
-const t = n(), h = {
+import { a as i } from "../createTheme-YLBX8GSj.js";
+import { a as s } from "../colorManipulator-ep5lERxB.js";
+const a = i(), r = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -11,7 +11,7 @@ const t = n(), h = {
   700: "hsl(210, 100%, 35%)",
   800: "hsl(210, 100%, 16%)",
   900: "hsl(210, 100%, 21%)"
-}, s = {
+}, h = {
   50: "rgb(243, 246, 250)",
   // hsl(220, 35%, 97%)
   100: "rgb(235, 238, 244)",
@@ -32,7 +32,7 @@ const t = n(), h = {
   // hsl(220, 30%, 6%)
   900: "rgb(5, 7, 10)"
   // hsl(220, 35%, 3%)
-}, a = {
+}, l = {
   50: "hsl(120, 80%, 98%)",
   100: "hsl(120, 75%, 94%)",
   200: "hsl(120, 75%, 87%)",
@@ -43,7 +43,7 @@ const t = n(), h = {
   700: "hsl(120, 75%, 16%)",
   800: "hsl(120, 84%, 10%)",
   900: "hsl(120, 87%, 6%)"
-}, r = {
+}, o = {
   50: "hsl(45, 100%, 97%)",
   100: "hsl(45, 92%, 90%)",
   200: "hsl(45, 94%, 80%)",
@@ -65,7 +65,7 @@ const t = n(), h = {
   700: "hsl(210, 95%, 25%)",
   800: "hsl(210, 100%, 15%)",
   900: "hsl(210, 100%, 10%)"
-}, l = {
+}, g = {
   50: "hsl(0, 100%, 97%)",
   100: "hsl(0, 92%, 90%)",
   200: "hsl(0, 94%, 80%)",
@@ -76,7 +76,7 @@ const t = n(), h = {
   700: "hsl(0, 94%, 18%)",
   800: "hsl(0, 95%, 12%)",
   900: "hsl(0, 93%, 6%)"
-}, c = {
+}, y = {
   50: "hsl(270, 100%, 98%)",
   100: "hsl(270, 95%, 94%)",
   200: "hsl(270, 90%, 87%)",
@@ -87,7 +87,31 @@ const t = n(), h = {
   700: "hsl(270, 75%, 25%)",
   800: "hsl(270, 80%, 15%)",
   900: "hsl(270, 85%, 10%)"
-}, o = {
+}, t = {
+  0: "rgba(0,0,0,0)",
+  10: "rgba(0,0,0,0.1)",
+  20: "rgba(0,0,0,0.2)",
+  30: "rgba(0,0,0,0.3)",
+  40: "rgba(0,0,0,0.4)",
+  50: "rgba(0,0,0,0.5)",
+  60: "rgba(0,0,0,0.6)",
+  70: "rgba(0,0,0,0.7)",
+  80: "rgba(0,0,0,0.8)",
+  90: "rgba(0,0,0,0.9)",
+  100: "rgba(0,0,0,1)"
+}, e = {
+  0: "rgba(255,255,255,0)",
+  10: "rgba(255,255,255,0.1)",
+  20: "rgba(255,255,255,0.2)",
+  30: "rgba(255,255,255,0.3)",
+  40: "rgba(255,255,255,0.4)",
+  50: "rgba(255,255,255,0.5)",
+  60: "rgba(255,255,255,0.6)",
+  70: "rgba(255,255,255,0.7)",
+  80: "rgba(255,255,255,0.8)",
+  90: "rgba(255,255,255,0.9)",
+  100: "rgba(255,255,255,1)"
+}, n = {
   palette: {
     gradient: {
       primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
@@ -95,6 +119,30 @@ const t = n(), h = {
       indigo: "linear-gradient(to right, transparent, #6366f1, transparent)",
       sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
     },
+    blackAlpha: {
+      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 đủ
+    },
+    whiteAlpha: {
+      zero: e[0],
+      // không có
+      light: e[10],
+      // nhẹ, subtle
+      medium: e[50],
+      // vừa, balanced
+      dark: e[80],
+      // đậm, mạnh
+      full: e[100]
+      // đầy đủ
+    },
     ui: {
       pulse: {
         shadowLight: "rgba(255, 255, 255, 0.3)",
@@ -105,111 +153,113 @@ const t = n(), h = {
       }
     },
     primary: {
-      contrastText: h[50],
-      light: h[300],
-      main: h[400],
-      dark: h[700],
+      contrastText: r[50],
+      light: r[300],
+      main: r[400],
+      dark: r[700],
       white: "#ffffff",
       black: "#000000"
     },
     info: {
-      contrastText: h[300],
-      light: h[500],
-      main: h[700],
-      dark: h[900]
+      contrastText: r[300],
+      light: r[500],
+      main: r[700],
+      dark: r[900]
     },
     warning: {
-      light: r[400],
-      main: r[500],
-      dark: r[700]
+      light: o[400],
+      main: o[500],
+      dark: o[700]
     },
     error: {
+      light: g[400],
+      main: g[500],
+      dark: g[700]
+    },
+    success: {
       light: l[400],
       main: l[500],
       dark: l[700]
     },
-    success: {
-      light: a[400],
-      main: a[500],
-      dark: a[700]
-    },
-    grey: s,
-    divider: e(s[700], 0.6),
+    grey: h,
+    divider: s(h[700], 0.6),
     background: {
-      default: s[900],
+      default: h[900],
       paper: "hsl(220, 30%, 7%)"
     },
     text: {
       primary: "rgb(255, 255, 255)",
-      secondary: s[400]
+      secondary: h[400]
     },
     action: {
-      hover: e(s[600], 0.2),
-      selected: e(s[600], 0.3)
+      hover: s(h[600], 0.2),
+      selected: s(h[600], 0.3)
     },
     baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
   }
-}, i = o, y = { light: i, dark: o }, b = {
+}, p = n, m = { light: p, dark: n }, x = {
   fontFamily: "Outfit, sans-serif",
   h1: {
-    fontSize: t.typography.pxToRem(48),
+    fontSize: a.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: t.typography.pxToRem(36),
+    fontSize: a.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: t.typography.pxToRem(30),
+    fontSize: a.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: t.typography.pxToRem(24),
+    fontSize: a.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: t.typography.pxToRem(20),
+    fontSize: a.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: t.typography.pxToRem(18),
+    fontSize: a.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: t.typography.pxToRem(18)
+    fontSize: a.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: t.typography.pxToRem(14),
+    fontSize: a.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: t.typography.pxToRem(14)
+    fontSize: a.typography.pxToRem(14)
   },
   body2: {
-    fontSize: t.typography.pxToRem(14),
+    fontSize: a.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: t.typography.pxToRem(12),
+    fontSize: a.typography.pxToRem(12),
     fontWeight: 400
   }
-}, m = {
+}, u = {
   borderRadius: 8
-}, g = ["none", "var(--s-palette-baseShadow)", ...t.shadows.slice(2)], x = g;
+}, b = ["none", "var(--s-palette-baseShadow)", ...a.shadows.slice(2)], S = b;
 export {
+  t as blackAlpha,
   f as blue,
-  h as brand,
-  y as colorSchemes,
-  s as gray,
-  a as green,
-  r as orange,
-  c as purple,
-  l as red,
-  x as shadows,
-  m as shape,
-  b as typography
+  r as brand,
+  m as colorSchemes,
+  h as gray,
+  l as green,
+  o as orange,
+  y as purple,
+  g as red,
+  S as shadows,
+  u as shape,
+  x as typography,
+  e as whiteAlpha
 };

package/package.json

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