@serenity-ui/styles - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

dist/functions/theme/css.d.ts

 import { Tuple } from "@serenity-ui/utils";
-import { Size, UnitType } from "../../types/values";
+import { Length, Size, UnitType } from "../../types/values";
 import { JSX } from "solid-js/jsx-runtime";
@@ -23,8 +23,9 @@ /**
 /**
- * resolves the size input dynamically or as constant and returns a string.
+ * Resolve the input as a length value
  *
- * @param size Size | number | undefined
- * @return string | undefined
+ * @param varName The variable name to use for Size values
+ * @param length The size value
+ * @param unit The unit type
  */
-export declare function resolveSize(varName: string, size: Size | number | undefined, unit: UnitType): string | undefined;
+export declare function resolveLength(varName: string, length: Length | undefined, unit?: UnitType): string | undefined;
 /**
@@ -31,0 +32,0 @@ * Returns a modifier variable with a name and value

dist/functions/values.d.ts

@@ -1,6 +0,2 @@
-import { Color } from "../types/theme";
-import { Length } from "../types/values";
 export declare function rem(value: number): string;
-export declare function parseLength(value: Length): string;
-export declare function parseColor(value: Color): string | undefined;
 //# sourceMappingURL=values.d.ts.map

dist/index.d.ts

@@ -5,6 +5,8 @@ export * from "./utilities";
 export * from "./types/props";
-export * from "./functions/theme/css";
-export * from "./functions/theme/color";
-export * from "./functions/theme/variants";
-export * from "./functions/utils/number";
+export * from "./functions/colors";
+export * from "./functions/css";
+export * from "./functions/helpers";
+export * from "./functions/math";
+export * from "./functions/resolvers";
+export * from "./functions/variants";
 //# sourceMappingURL=index.d.ts.map

dist/serenity-styles.js

@@ -1,8 +0,2 @@
-const v = [
-  "xl",
-  "lg",
-  "md",
-  "sm",
-  "xs"
-], i = (e, t, r) => e < t ? t : e > r ? r : e, O = (e) => e.length === 1 ? `0${e}` : e, a = {
+const a = {
   dark: [
@@ -176,89 +170,13 @@ "#C1C2C5",
   ]
-}, y = (e, t) => {
-  let r = e.slice(1);
-  r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]);
-  const n = parseInt(r, 16);
-  let s = n >> 16 & 255, f = n >> 8 & 255, c = n & 255;
-  return s = i(s - t, 0, 255), f = i(f - t, 0, 255), c = i(c - t, 0, 255), `#${(s << 16 | f << 8 | c).toString(16).padStart(6, "0")}`;
-}, S = (e, t) => {
-  const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e);
-  if (!n)
-    return console.warn("invalid rgb color", e), e;
-  const s = i(+n[1] - t, 0, 255), f = i(+n[2] - t, 0, 255), c = i(+n[3] - t, 0, 255);
-  return `rgb(${s}, ${f}, ${c})`;
-}, w = (e, t) => {
-  const n = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e);
-  if (!n)
-    return console.warn("invalid hsl color", e), e;
-  const s = n[1], f = n[2], c = i(+n[3] - t, 0, 100);
-  return `hsl(${s}, ${f}%, ${c}%)`;
-}, g = (e, t) => e && (e.startsWith("#") ? y(e, t) : e.startsWith("rgb") ? S(e, t) : e.startsWith("hsl") ? w(e, t) : e), m = (e, t) => {
-  let r = e;
-  r.startsWith("#") && (r = r.slice(1)), r.length === 3 && (r = r.split("").map((d) => d + d).join(""));
-  const n = parseInt(r, 16);
-  let s = n >> 16 & 255, f = n >> 8 & 255, c = n & 255;
-  return s = i(s + t, 0, 255), f = i(f + t, 0, 255), c = i(c + t, 0, 255), `#${(s << 16 | f << 8 | c).toString(16).padStart(6, "0")}`;
-}, W = (e, t) => {
-  const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e);
-  if (!n)
-    return console.warn("invalid rgb color", e), e;
-  const s = i(+n[1] + t, 0, 255), f = i(+n[2] + t, 0, 255), c = i(+n[3] + t, 0, 255);
-  return `rgb(${s}, ${f}, ${c})`;
-}, k = (e, t) => {
-  const n = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e);
-  if (!n)
-    return console.warn("invalid hsl color", e), e;
-  const s = n[1], f = n[2], c = i(Number(n[3]) + t, 0, 100);
-  return `hsl(${s}, ${f}%, ${c}%)`;
-}, T = (e, t) => e.startsWith("#") ? m(e, t) : e.startsWith("rgb") ? W(e, t) : e.startsWith("hsl") ? k(e, t) : e, h = (e, t) => {
-  let r = e;
-  r[0] === "#" && (r = r.slice(1)), r.length === 3 && (r = r.split("").map((d) => d + d).join(""));
-  const n = parseInt(r, 16), s = n >> 16 & 255, f = n >> 8 & 255, c = n & 255;
-  return `rgba(${s}, ${f}, ${c}, ${t})`;
-}, C = (e, t) => {
-  const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e);
-  if (!n)
-    return console.warn("invalid rgb color", e), e;
-  const s = +n[1], f = +n[2], c = +n[3];
-  return `rgba(${s}, ${f}, ${c}, ${t})`;
-}, A = (e, t) => {
-  const n = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e);
-  if (!n)
-    return console.warn("invalid hsl color", e), e;
-  const s = +n[1], f = +n[2], c = +n[3];
-  return `hsla(${s}, ${f}%, ${c}%, ${t})`;
-}, b = (e, t, r) => {
-  if (!e)
-    return e;
-  if (e.startsWith("#"))
-    return h(e, t);
-  if (e.startsWith("rgb"))
-    return C(e, t);
-  if (e.startsWith("hsl"))
-    return A(e, t);
-  if (e.includes(".")) {
-    const n = e.split("."), s = n[0], f = n[1], c = r[s][+f];
-    return h(c, t);
-  }
-  return console.warn("invalid color", e), e;
 };
-function l(e, t = 6) {
-  if (!e || e.startsWith("#") || e.startsWith("hsl") || e.startsWith("rgb"))
-    return e;
-  const r = e.split("."), n = r[0], s = r[1], f = a[n];
-  return f ? s ? f[+s] : f[t] : e;
-}
-const B = (e, t = 6) => {
-  if (e.includes("."))
-    return a[e][t];
-  const [r, n] = e.split(".");
-  return a[r][+n];
-};
-function p(e, t = "serenity") {
+function v(e, t = "serenity") {
   return `var(--${t}-${e})`;
 }
-function E(...e) {
+function O(...e) {
   return e.filter(Boolean).join(" ");
 }
-function H(e) {
+function T(e) {
+  return e ? "" : void 0;
+}
+function V(e) {
   if (!e)
@@ -269,44 +187,57 @@ return {};
     const n = e[r];
-    n && (t["--" + r] = n);
+    n && (t[`--${r}`] = n);
   }
   return t;
 }
-function $(e, t, r) {
+const x = [
+  "xl",
+  "lg",
+  "md",
+  "sm",
+  "xs"
+];
+function y(e) {
+  return x.includes(e);
+}
+function u(e, t, r = "rem") {
   if (t != null)
-    return typeof t == "number" ? t + r : u(e, t);
+    return typeof t == "number" ? t + r : y(t) ? g(e, t) : t;
 }
-function u(e, t) {
-  return p(`${e}-${t}`);
+function g(e, t) {
+  return v(`${e}-${t}`);
 }
-function R(e) {
+function B(e) {
   if (e)
-    return u("shadow", e);
+    return g("shadow", e);
 }
-function V(e, t, r) {
+function E(e, t, r) {
   if (typeof e == "number")
     return e + r;
   if (Array.isArray(e)) {
-    const n = $(t, e[0], r), s = $(t, e[1], r);
-    return `${n} ${s}`;
+    const n = u(t, e[0], r), f = u(t, e[1], r);
+    return `${n} ${f}`;
   }
-  return u(t, e);
+  return g(t, e);
 }
-function j(e) {
+function H(e) {
   const t = {};
   for (const r in e) {
     const n = e[r];
-    n && (t["--cols-" + r] = n);
+    n && (t[`--cols-${r}`] = n);
   }
   return t;
 }
-function I(e) {
-  return `${e}rem`;
+function l(e, t = 6) {
+  if (!e || e.startsWith("#") || e.startsWith("hsl") || e.startsWith("rgb"))
+    return e;
+  const r = e.split("."), n = r[0], f = r[1], s = a[n];
+  return s ? f ? s[+f] : s[t] : e;
 }
 function o(e) {
-  return typeof e == "number" ? I(e) : v.includes(e) ? p(`size-${e}`) : e;
+  return u("spacing", e);
 }
-function x(e) {
+function h(e) {
   return l(e);
 }
-const G = [
+const R = [
   "m",
@@ -344,3 +275,3 @@ "my",
   "z"
-], L = {
+], S = {
   m: o,
@@ -371,10 +302,10 @@ mt: o,
   inset: o,
-  bg: x,
-  tc: x
+  bg: h,
+  tc: h
 };
-function _(e, ...t) {
+function j(e, ...t) {
   const r = {}, n = [];
-  for (const s in e) {
-    const f = e[s], c = L[s];
-    r[`--serenity-util-${s}`] = c ? c(f) : f, n.push(s);
+  for (const f in e) {
+    const s = e[f], c = S[f];
+    r[`--serenity-util-${f}`] = c ? c(s) : s, n.push(f);
   }
@@ -386,3 +317,98 @@ return {
 }
-const U = (e, t) => ({
+function i(e, t, r) {
+  return e < t ? t : e > r ? r : e;
+}
+function G(e) {
+  return e.length === 1 ? `0${e}` : e;
+}
+function w(e, t) {
+  let r = e.slice(1);
+  r.length === 3 && (r = r[0] + r[0] + r[1] + r[1] + r[2] + r[2]);
+  const n = parseInt(r, 16);
+  let f = n >> 16 & 255, s = n >> 8 & 255, c = n & 255;
+  return f = i(f - t, 0, 255), s = i(s - t, 0, 255), c = i(c - t, 0, 255), `#${(f << 16 | s << 8 | c).toString(16).padStart(6, "0")}`;
+}
+function W(e, t) {
+  const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e);
+  if (!n)
+    return console.warn("invalid rgb color", e), e;
+  const f = i(+n[1] - t, 0, 255), s = i(+n[2] - t, 0, 255), c = i(+n[3] - t, 0, 255);
+  return `rgb(${f}, ${s}, ${c})`;
+}
+function k(e, t) {
+  const n = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e);
+  if (!n)
+    return console.warn("invalid hsl color", e), e;
+  const f = n[1], s = n[2], c = i(+n[3] - t, 0, 100);
+  return `hsl(${f}, ${s}%, ${c}%)`;
+}
+function $(e, t) {
+  return e && (e.startsWith("#") ? w(e, t) : e.startsWith("rgb") ? W(e, t) : e.startsWith("hsl") ? k(e, t) : e);
+}
+function m(e, t) {
+  let r = e;
+  r.startsWith("#") && (r = r.slice(1)), r.length === 3 && (r = r.split("").map((d) => d + d).join(""));
+  const n = parseInt(r, 16);
+  let f = n >> 16 & 255, s = n >> 8 & 255, c = n & 255;
+  return f = i(f + t, 0, 255), s = i(s + t, 0, 255), c = i(c + t, 0, 255), `#${(f << 16 | s << 8 | c).toString(16).padStart(6, "0")}`;
+}
+function C(e, t) {
+  const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e);
+  if (!n)
+    return console.warn("invalid rgb color", e), e;
+  const f = i(+n[1] + t, 0, 255), s = i(+n[2] + t, 0, 255), c = i(+n[3] + t, 0, 255);
+  return `rgb(${f}, ${s}, ${c})`;
+}
+function A(e, t) {
+  const n = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e);
+  if (!n)
+    return console.warn("invalid hsl color", e), e;
+  const f = n[1], s = n[2], c = i(Number(n[3]) + t, 0, 100);
+  return `hsl(${f}, ${s}%, ${c}%)`;
+}
+function _(e, t) {
+  return e.startsWith("#") ? m(e, t) : e.startsWith("rgb") ? C(e, t) : e.startsWith("hsl") ? A(e, t) : e;
+}
+function p(e, t) {
+  let r = e;
+  r[0] === "#" && (r = r.slice(1)), r.length === 3 && (r = r.split("").map((d) => d + d).join(""));
+  const n = parseInt(r, 16), f = n >> 16 & 255, s = n >> 8 & 255, c = n & 255;
+  return `rgba(${f}, ${s}, ${c}, ${t})`;
+}
+function I(e, t) {
+  const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e);
+  if (!n)
+    return console.warn("invalid rgb color", e), e;
+  const f = +n[1], s = +n[2], c = +n[3];
+  return `rgba(${f}, ${s}, ${c}, ${t})`;
+}
+function L(e, t) {
+  const n = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e);
+  if (!n)
+    return console.warn("invalid hsl color", e), e;
+  const f = +n[1], s = +n[2], c = +n[3];
+  return `hsla(${f}, ${s}%, ${c}%, ${t})`;
+}
+function b(e, t, r) {
+  if (!e)
+    return e;
+  if (e.startsWith("#"))
+    return p(e, t);
+  if (e.startsWith("rgb"))
+    return I(e, t);
+  if (e.startsWith("hsl"))
+    return L(e, t);
+  if (e.includes(".")) {
+    const n = e.split("."), f = n[0], s = n[1], c = r[f][+s];
+    return p(c, t);
+  }
+  return console.warn("invalid color", e), e;
+}
+function U(e, t = 6) {
+  if (e.includes("."))
+    return a[e][t];
+  const [r, n] = e.split(".");
+  return a[r][+n];
+}
+const z = (e, t) => ({
   "text-color": l(e, t),
@@ -392,3 +418,3 @@ "background-color": "#ffffff"
   "text-color": l(e, t)
-}), M = (e, t) => {
+}), Y = (e, t) => {
   const r = l(e, t);
@@ -400,3 +426,3 @@ return {
   };
-}, Y = (e, t) => {
+}, Z = (e, t) => {
   const r = l(e, t);
@@ -408,3 +434,3 @@ return {
   };
-}, Z = (e, t) => {
+}, D = (e, t) => {
   const r = l(e, t);
@@ -414,6 +440,6 @@ return {
     "background-color": r,
-    "hover-color": g(r, 12),
-    "active-color": g(r, 15)
+    "hover-color": $(r, 12),
+    "active-color": $(r, 15)
   };
-}, D = (e, t) => {
+}, M = (e, t) => {
   const r = l(e, t);
@@ -426,35 +452,37 @@ return {
 export {
-  p as $var,
-  G as UTILITY_NAMES,
-  L as UTILITY_PARSERS,
-  _ as buildStyles,
+  R as UTILITY_NAMES,
+  S as UTILITY_PARSERS,
+  T as b,
+  j as buildStyles,
+  O as c,
   i as clamp,
-  H as cssvars,
-  E as cx,
-  g as darkenColor,
-  w as darkenHSL,
-  y as darkenHex,
-  S as darkenRGB,
-  B as getThemeColor,
-  T as lightenColor,
-  k as lightenHSL,
+  $ as darkenColor,
+  k as darkenHSL,
+  w as darkenHex,
+  W as darkenRGB,
+  U as getThemeColor,
+  y as isSize,
+  _ as lightenColor,
+  A as lightenHSL,
   m as lightenHex,
-  W as lightenRGB,
-  O as padZero,
-  l as resolveColorInput,
-  Z as resolveFilledVariant,
-  j as resolveGridCols,
-  V as resolveGridSpacing,
-  M as resolveLightVariant,
-  u as resolveModifier,
-  Y as resolveOutlineVariant,
-  R as resolveShadow,
-  $ as resolveSize,
-  D as resolveSubtleVariant,
+  C as lightenRGB,
+  V as localVars,
+  G as padZero,
+  l as resolveColor,
+  D as resolveFilledVariant,
+  H as resolveGridCols,
+  E as resolveGridSpacing,
+  u as resolveLength,
+  Y as resolveLightVariant,
+  Z as resolveOutlineVariant,
+  B as resolveShadow,
+  g as resolveSize,
+  M as resolveSubtleVariant,
   F as resolveTransparentVariant,
-  U as resolveWhiteVariant,
+  z as resolveWhiteVariant,
   b as setColorOpacity,
-  A as setHSLOpacity,
-  h as setHexOpacity,
-  C as setRGBOpacity
+  L as setHSLOpacity,
+  p as setHexOpacity,
+  I as setRGBOpacity,
+  v
 };

dist/types/values.d.ts

@@ -30,3 +30,3 @@ /**
 /**
- * A length value used in the styling system. Numbers will default to `rem` units
+ * A length value used in the styling system. Numbers will usually default to `rem` units
  */
@@ -33,0 +33,0 @@ export type Length = (number & {}) | (string & {}) | Size;

package.json

 {
   "name": "@serenity-ui/styles",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "./dist/serenity-styles.umd.cjs",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68384

increased by40.21%

Number of package files

54

increased by80%

Lines of code

1269

increased by49.82%

No dependency changes