@serenity-ui/styles - npm Package Compare versions

Comparing version 0.1.12 to 0.1.13

dist/functions/colors.d.ts

 import type { Color } from "../types/theme";
 import type { Tuple } from "@serenity-ui/utils";
 /**
+ * Retrieves the rgb values from a rgb or rgba color
+ * @param rgb
+ * @return number[]
+ */
+export declare function getRGBValues(rgb: string): number[];
+/**
+ * Retrieves the hsl values from a hsl or hsla color
+ * @param hsl
+ * @returns
+ */
+export declare function getHSLValues(hsl: string): number[];
+/**
+ * Converts a hex color to rgb
+ * @param hex
+ * @return number[]
+ */
+export declare function convertHexToRGB(hex: string): number[];
+/**
+ * Converts a rgb color to hex color
+ * @param hsl
+ */
+export declare function convertHSLToRGB(hsl: string): number[];
+/**
+ * Converts a hex color to hsl
+ * @param r
+ * @param g
+ * @param b
+ * @returns
+ */
+export declare function buildHexFromRGB(r: number, g: number, b: number): string;
+/**
  * darkens a hex color supporting 3 and 6 digit hex values
@@ -106,2 +137,9 @@ *
 export declare function getThemeColor(name: string, shade?: number): string;
+/**
+ * Returns if the color is a light color or not.
+ * @param input
+ * @param shade
+ * @returns boolean
+ */
+export declare function isColorLight(color: string): boolean;
 //# sourceMappingURL=colors.d.ts.map

dist/functions/resolvers.d.ts

@@ -45,3 +45,3 @@ import { Tuple } from "@serenity-ui/utils";
  */
-export declare function resolveColor(input?: string, defaultShade?: number): string | undefined;
+export declare function resolveColor(input: string, defaultShade?: number): string;
 //# sourceMappingURL=resolvers.d.ts.map

dist/functions/theme/css.d.ts

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

dist/functions/values.d.ts

@@ -0,2 +1,6 @@
+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/functions/variants.d.ts

 export declare const resolveWhiteVariant: (color: string, defaultShade?: number) => {
-    "text-color": string | undefined;
+    "text-color": string;
     "background-color": string;
 };
 export declare const resolveTransparentVariant: (color: string, defaultShade?: number) => {
-    "text-color": string | undefined;
+    "text-color": string;
 };
@@ -14,22 +14,6 @@ /**
  */
-export declare const resolveLightVariant: (color: string, defaultShade?: number) => {
-    "text-color": string | undefined;
-    "background-color": string | undefined;
-    "hover-color": string | undefined;
-};
-export declare const resolveOutlineVariant: (color: string, defaultShade?: number) => {
-    "text-color": string | undefined;
-    "border-color": string | undefined;
-    "hover-color": string | undefined;
-};
-export declare const resolveFilledVariant: (color: string, defaultShade?: number) => {
-    "text-color": string;
-    "background-color": string | undefined;
-    "hover-color": string | undefined;
-    "active-color": string | undefined;
-};
-export declare const resolveSubtleVariant: (color: string, defaultShade?: number) => {
-    "text-color": string | undefined;
-    "hover-color": string | undefined;
-};
+export declare const resolveLightVariant: (color: string, defaultShade?: number, interactive?: boolean) => Record<string, string | undefined>;
+export declare const resolveOutlineVariant: (color: string, defaultShade?: number, interactive?: boolean) => Record<string, string | undefined>;
+export declare const resolveFilledVariant: (color: string, defaultShade?: number, interactive?: boolean) => Record<string, string | undefined>;
+export declare const resolveSubtleVariant: (color: string, defaultShade?: number, interactive?: boolean) => Record<string, string | undefined>;
 //# sourceMappingURL=variants.d.ts.map

dist/serenity-styles.js

@@ -1,2 +0,2 @@
-const a = {
+const c = {
   dark: [
@@ -171,14 +171,12 @@ "#C1C2C5",
 };
-function v(e, t = "serenity") {
+function W(e, t = "serenity") {
   return `var(--${t}-${e})`;
 }
-function O(...e) {
+function j(...e) {
   return e.filter(Boolean).join(" ");
 }
-function T(e) {
+function E(e) {
   return e ? "" : void 0;
 }
-function V(e) {
-  if (!e)
-    return {};
+function z(e) {
   const t = {};
@@ -191,3 +189,3 @@ for (const r in e) {
 }
-const x = [
+const k = [
   "xl",
@@ -199,26 +197,26 @@ "lg",
 ];
-function y(e) {
-  return x.includes(e);
+function w(e) {
+  return k.includes(e);
 }
-function u(e, t, r = "rem") {
+function v(e, t, r = "rem") {
   if (t != null)
-    return typeof t == "number" ? t + r : y(t) ? g(e, t) : t;
+    return typeof t == "number" ? t + r : w(t) ? m(e, t) : t;
 }
-function g(e, t) {
-  return v(`${e}-${t}`);
+function m(e, t) {
+  return W(`${e}-${t}`);
 }
-function B(e) {
+function F(e) {
   if (e)
-    return g("shadow", e);
+    return m("shadow", e);
 }
-function E(e, t, r) {
+function _(e, t, r) {
   if (typeof e == "number")
     return e + r;
   if (Array.isArray(e)) {
-    const n = u(t, e[0], r), f = u(t, e[1], r);
+    const n = v(t, e[0], r), f = v(t, e[1], r);
     return `${n} ${f}`;
   }
-  return g(t, e);
+  return m(t, e);
 }
-function H(e) {
+function U(e) {
   const t = {};
@@ -231,15 +229,20 @@ for (const r in e) {
 }
-function l(e, t = 6) {
-  if (!e || e.startsWith("#") || e.startsWith("hsl") || e.startsWith("rgb"))
+function b(e, t = 6) {
+  if (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;
+  const [r, n] = e.split("."), f = c[r];
+  if (f) {
+    if (!n)
+      return f[t];
+  } else
+    return e;
+  return f[+n];
 }
-function o(e) {
-  return u("spacing", e);
+function s(e) {
+  return v("spacing", e);
 }
-function h(e) {
-  return l(e);
+function x(e) {
+  return b(e);
 }
-const R = [
+const Y = [
   "m",
@@ -277,36 +280,36 @@ "my",
   "z"
-], S = {
-  m: o,
-  mt: o,
-  mb: o,
-  ml: o,
-  mr: o,
-  mx: o,
-  my: o,
-  p: o,
-  pt: o,
-  pb: o,
-  pl: o,
-  pr: o,
-  px: o,
-  py: o,
-  w: o,
-  miw: o,
-  maw: o,
-  h: o,
-  mih: o,
-  mah: o,
-  top: o,
-  left: o,
-  bottom: o,
-  right: o,
-  inset: o,
-  bg: h,
-  tc: h
+], C = {
+  m: s,
+  mt: s,
+  mb: s,
+  ml: s,
+  mr: s,
+  mx: s,
+  my: s,
+  p: s,
+  pt: s,
+  pb: s,
+  pl: s,
+  pr: s,
+  px: s,
+  py: s,
+  w: s,
+  miw: s,
+  maw: s,
+  h: s,
+  mih: s,
+  mah: s,
+  top: s,
+  left: s,
+  bottom: s,
+  right: s,
+  inset: s,
+  bg: x,
+  tc: x
 };
-function j(e, ...t) {
+function Z(e, ...t) {
   const r = {}, n = [];
   for (const f in e) {
-    const s = e[f], c = S[f];
-    r[`--serenity-util-${f}`] = c ? c(s) : s, n.push(f);
+    const i = e[f], a = C[f];
+    r[`--serenity-util-${f}`] = a ? a(i) : i, n.push(f);
   }
@@ -318,167 +321,194 @@ return {
 }
-function i(e, t, r) {
-  return e < t ? t : e > r ? r : e;
+function g(e) {
+  return e.replace(/(rgb|rgba)|\(|\)/g, "").split(",").map(parseFloat);
 }
-function G(e) {
-  return e.length === 1 ? `0${e}` : e;
+function p(e) {
+  return e.replace(/(hsl|hsla)|\(|\)/g, "").split(",").map(parseFloat);
 }
-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 d(e) {
+  let t = e.slice(1);
+  t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]);
+  const r = parseInt(t, 16), n = r >> 16 & 255, f = r >> 8 & 255, i = r & 255;
+  return [n, f, i];
 }
-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 B(e) {
+  const [t, r, n] = p(e), f = (1 - Math.abs(2 * n - 1)) * r, i = t / 60, a = f * (1 - Math.abs(i % 2 - 1)), $ = n - f / 2;
+  let o = 0, u = 0, l = 0;
+  return 0 <= i && i < 1 ? (o = f, u = a) : 1 <= i && i < 2 ? (o = a, u = f) : 2 <= i && i < 3 ? (u = f, l = a) : 3 <= i && i < 4 ? (u = a, l = f) : 4 <= i && i < 5 ? (o = a, l = f) : (o = f, l = a), o = Math.round((o + $) * 255), u = Math.round((u + $) * 255), l = Math.round((l + $) * 255), [o, u, l];
 }
-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 S(e, t, r) {
+  return "#" + (e << 16 | t << 8 | r).toString(16).padStart(6, "0");
 }
-function $(e, t) {
-  return e && (e.startsWith("#") ? w(e, t) : e.startsWith("rgb") ? W(e, t) : e.startsWith("hsl") ? k(e, t) : e);
+function H(e, t) {
+  let [r, n, f] = d(e);
+  return r = Math.max(0, r - t), n = Math.max(0, n - t), f = Math.max(0, f - t), S(r, n, f);
 }
-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 G(e, t) {
+  let [r, n, f] = g(e);
+  return r = Math.max(0, r - t), n = Math.max(0, n - t), f = Math.max(0, f - t), `rgb(${r}, ${n}, ${f})`;
 }
-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 V(e, t) {
+  const [r, n, f] = p(e), i = Math.max(0, f - t);
+  return `hsl(${r}, ${n}%, ${i}%)`;
 }
+function y(e, t) {
+  if (e) {
+    if (e.startsWith("#"))
+      return H(e, t);
+    if (e.startsWith("rgb"))
+      return G(e, t);
+    if (e.startsWith("hsl"))
+      return V(e, t);
+  } else
+    return e;
+  return e;
+}
 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}%)`;
+  let [r, n, f] = d(e);
+  return r = Math.min(255, r + t), n = Math.min(255, n + t), f = Math.min(255, f + t), S(r, n, f);
 }
-function _(e, t) {
-  return e.startsWith("#") ? m(e, t) : e.startsWith("rgb") ? C(e, t) : e.startsWith("hsl") ? A(e, t) : e;
+function L(e, t) {
+  let [r, n, f] = g(e);
+  return r = Math.min(255, r + t), n = Math.min(255, n + t), f = Math.min(255, f + t), `rgb(${r}, ${n}, ${f})`;
 }
-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 R(e, t) {
+  let [r, n, f] = p(e);
+  const i = Math.min(255, f + t);
+  return `hsl(${r}, ${n}%, ${i}%)`;
 }
+function q(e, t) {
+  return e.startsWith("#") ? A(e, t) : e.startsWith("rgb") ? L(e, t) : e.startsWith("hsl") ? R(e, t) : e;
+}
+function M(e, t) {
+  const [r, n, f] = d(e);
+  return `rgba(${r}, ${n}, ${f}, ${t})`;
+}
+function T(e, t) {
+  const [r, n, f] = g(e);
+  return `rgba(${r}, ${n}, ${f}, ${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})`;
+  const [r, n, f] = p(e);
+  return `hsla(${r}, ${n}%, ${f}%, ${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)
+function h(e, t, r) {
+  if (e) {
+    if (e.startsWith("#"))
+      return M(e, t);
+    if (e.startsWith("rgb"))
+      return T(e, t);
+    if (e.startsWith("hsl"))
+      return I(e, t);
+    if (e.includes(".")) {
+      const [n, f] = e.split("."), i = r[n][+f];
+      return M(i, t);
+    }
+  } else
     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) {
+function P(e, t = 6) {
+  var f;
   if (e.includes("."))
-    return a[e][t];
+    return (f = c == null ? void 0 : c[e]) == null ? void 0 : f[t];
   const [r, n] = e.split(".");
-  return a[r][+n];
+  return c[r][+n];
 }
-const z = (e, t) => ({
-  "text-color": l(e, t),
+function O(e) {
+  let t, r, n;
+  if (e.startsWith("#"))
+    [t, r, n] = d(e);
+  else if (e.startsWith("rgb"))
+    [t, r, n] = g(e);
+  else if (e.startsWith("hsl"))
+    [t, r, n] = B(e);
+  else if (e.includes(".")) {
+    const [i, a] = e.split(".");
+    [t, r, n] = d(c[i][+a]);
+  } else
+    return console.warn("invalid color", e), !1;
+  return Math.sqrt(
+    0.299 * (t * t) + 0.587 * (r * r) + 0.114 * (n * n)
+  ) > 130;
+}
+function J(e, t, r) {
+  return e < t ? t : e > r ? r : e;
+}
+function K(e) {
+  return e.length === 1 ? `0${e}` : e;
+}
+const N = (e, t) => ({
+  "text-color": b(e, t),
   "background-color": "#ffffff"
-}), F = (e, t) => ({
-  "text-color": l(e, t)
-}), Y = (e, t) => {
-  const r = l(e, t);
-  return {
-    "text-color": r,
-    "background-color": b(r, 0.1, a),
-    "hover-color": b(r, 0.12, a)
+}), Q = (e, t) => ({
+  "text-color": b(e, t)
+}), X = (e, t, r = !0) => {
+  const n = b(e, t), f = {
+    "text-color": n,
+    "background-color": h(n, 0.1, c)
   };
-}, Z = (e, t) => {
-  const r = l(e, t);
-  return {
-    "text-color": r,
-    "border-color": r,
-    "hover-color": b(r, 0.12, a)
+  return r && (f["hover-color"] = h(n, 0.12, c)), f;
+}, D = (e, t, r = !0) => {
+  const n = b(e, t), f = {
+    "text-color": n,
+    "border-color": n
   };
-}, D = (e, t) => {
-  const r = l(e, t);
-  return {
-    "text-color": "#ffffff",
-    "background-color": r,
-    "hover-color": $(r, 12),
-    "active-color": $(r, 15)
+  return r && (f["hover-color"] = h(n, 0.12, c)), f;
+}, ee = (e, t, r = !0) => {
+  const n = b(e, t), f = {
+    "text-color": O(n) ? "#000" : "#fff",
+    "background-color": n
   };
-}, M = (e, t) => {
-  const r = l(e, t);
-  return {
-    "text-color": r,
-    "hover-color": b(r, 0.12, a)
+  return r && Object.assign(f, {
+    "hover-color": y(n, 12),
+    "active-color": y(n, 15)
+  }), f;
+}, te = (e, t, r = !0) => {
+  const n = b(e, t), f = {
+    "text-color": n
   };
+  return r && (f["hover-color"] = h(n, 0.12, c)), f;
 };
 export {
-  R as UTILITY_NAMES,
-  S as UTILITY_PARSERS,
-  T as b,
-  j as buildStyles,
-  O as c,
-  i as clamp,
-  $ 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,
-  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,
-  z as resolveWhiteVariant,
-  b as setColorOpacity,
-  L as setHSLOpacity,
-  p as setHexOpacity,
-  I as setRGBOpacity,
-  v
+  Y as UTILITY_NAMES,
+  C as UTILITY_PARSERS,
+  E as b,
+  S as buildHexFromRGB,
+  Z as buildStyles,
+  j as c,
+  J as clamp,
+  B as convertHSLToRGB,
+  d as convertHexToRGB,
+  y as darkenColor,
+  V as darkenHSL,
+  H as darkenHex,
+  G as darkenRGB,
+  p as getHSLValues,
+  g as getRGBValues,
+  P as getThemeColor,
+  O as isColorLight,
+  w as isSize,
+  q as lightenColor,
+  R as lightenHSL,
+  A as lightenHex,
+  L as lightenRGB,
+  z as localVars,
+  K as padZero,
+  b as resolveColor,
+  ee as resolveFilledVariant,
+  U as resolveGridCols,
+  _ as resolveGridSpacing,
+  v as resolveLength,
+  X as resolveLightVariant,
+  D as resolveOutlineVariant,
+  F as resolveShadow,
+  m as resolveSize,
+  te as resolveSubtleVariant,
+  Q as resolveTransparentVariant,
+  N as resolveWhiteVariant,
+  h as setColorOpacity,
+  I as setHSLOpacity,
+  M as setHexOpacity,
+  T as setRGBOpacity,
+  W as v
 };

package.json

 {
   "name": "@serenity-ui/styles",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "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

70703

increased by3.39%

Number of package files

56

increased by3.7%

Worsened metrics

Lines of code

1253

decreased by-1.26%

No dependency changes