@serenity-ui/styles
Advanced tools
Comparing version 0.1.6 to 0.1.7
@@ -1,2 +0,4 @@ | ||
export declare const DEFAULT_COLORS: Record<string, [string, string, string, string, string, string, string, string, string, string]>; | ||
import { Tuple } from "@serenity-ui/utils"; | ||
import { ColorNames } from "../types/values"; | ||
export declare const DEFAULT_COLORS: Record<ColorNames, Tuple<string, 10>>; | ||
//# sourceMappingURL=color.d.ts.map |
import { Tuple } from "@serenity-ui/utils"; | ||
import { Size, UnitType } from "../../types/theme"; | ||
import { Size, UnitType } from "../../types/values"; | ||
import { JSX } from "solid-js/jsx-runtime"; | ||
/** | ||
@@ -20,3 +21,3 @@ * Returns a namespaced CSS variable | ||
*/ | ||
export declare function cssvars<T extends Record<string, string | undefined | null>>(map: T): T; | ||
export declare function cssvars<T extends Record<string, string | undefined | number | null>>(map: T): JSX.CSSProperties; | ||
/** | ||
@@ -54,3 +55,3 @@ * resolves the size input dynamically or as constant and returns a string. | ||
*/ | ||
export declare function resolveGridCols(breakpoints: Record<Size, number>): Record<string, any>; | ||
export declare function resolveGridCols(breakpoints: Record<Size, number>): JSX.CSSProperties; | ||
//# sourceMappingURL=css.d.ts.map |
@@ -1,2 +0,5 @@ | ||
export * from "./types/theme/index"; | ||
export * from "./utilities"; | ||
export * from "./types/theme"; | ||
export * from "./types/values"; | ||
export * from "./types/props"; | ||
export * from "./functions/theme/css"; | ||
@@ -3,0 +6,0 @@ export * from "./functions/theme/color"; |
@@ -1,45 +0,8 @@ | ||
function $(e, t = "serenity") { | ||
return `var(--${t}-${e})`; | ||
} | ||
function w(...e) { | ||
return e.filter(Boolean).join(" "); | ||
} | ||
function O(e) { | ||
if (!e) | ||
return {}; | ||
const t = {}, r = Object.keys(e), f = r.length; | ||
for (let n = 0; n < f; n++) { | ||
const s = r[n], c = e[s]; | ||
c && (t[`--${s}`] = c); | ||
} | ||
return t; | ||
} | ||
function g(e, t, r) { | ||
return typeof t == "number" ? `${t}${r}` : b(e, t); | ||
} | ||
function b(e, t) { | ||
return $(`${e}-${t}`); | ||
} | ||
function A(e) { | ||
if (e) | ||
return b("shadow", e); | ||
} | ||
function B(e, t, r) { | ||
if (typeof e == "number") | ||
return `${e}${r}`; | ||
if (Array.isArray(e)) { | ||
const f = g(t, e[0], r), n = g(t, e[1], r); | ||
return `${f} ${n}`; | ||
} | ||
return b(t, e); | ||
} | ||
function H(e) { | ||
const t = Object.keys(e), r = {}; | ||
for (let f = 0; f < t.length; f++) { | ||
const n = t[f], s = e[n]; | ||
s && (r[`--cols-${n}`] = s); | ||
} | ||
return r; | ||
} | ||
const o = (e, t, r) => e < t ? t : e > r ? r : e, L = (e) => e.length === 1 ? `0${e}` : e, a = { | ||
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 = { | ||
dark: [ | ||
@@ -213,56 +176,56 @@ "#C1C2C5", | ||
] | ||
}, v = (e, t) => { | ||
}, 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 f = parseInt(r, 16); | ||
let n = f >> 16 & 255, s = f >> 8 & 255, c = f & 255; | ||
return n = o(n - t, 0, 255), s = o(s - t, 0, 255), c = o(c - t, 0, 255), `#${(n << 16 | s << 8 | c).toString(16).padStart(6, "0")}`; | ||
}, x = (e, t) => { | ||
const f = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e); | ||
if (!f) | ||
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 n = o(+f[1] - t, 0, 255), s = o(+f[2] - t, 0, 255), c = o(+f[3] - t, 0, 255); | ||
return `rgb(${n}, ${s}, ${c})`; | ||
}, y = (e, t) => { | ||
const f = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e); | ||
if (!f) | ||
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 n = f[1], s = f[2], c = o(+f[3] - t, 0, 100); | ||
return `hsl(${n}, ${s}%, ${c}%)`; | ||
}, u = (e, t) => e && (e.startsWith("#") ? v(e, t) : e.startsWith("rgb") ? x(e, t) : e.startsWith("hsl") ? y(e, t) : e), k = (e, t) => { | ||
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 f = parseInt(r, 16); | ||
let n = f >> 16 & 255, s = f >> 8 & 255, c = f & 255; | ||
return n = o(n + t, 0, 255), s = o(s + t, 0, 255), c = o(c + t, 0, 255), `#${(n << 16 | s << 8 | c).toString(16).padStart(6, "0")}`; | ||
r.startsWith("#") && (r = r.slice(1)), r.length === 3 && (r = r.split("").map((b) => b + b).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 f = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e); | ||
if (!f) | ||
const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e); | ||
if (!n) | ||
return console.warn("invalid rgb color", e), e; | ||
const n = o(+f[1] + t, 0, 255), s = o(+f[2] + t, 0, 255), c = o(+f[3] + t, 0, 255); | ||
return `rgb(${n}, ${s}, ${c})`; | ||
}, S = (e, t) => { | ||
const f = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e); | ||
if (!f) | ||
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 n = f[1], s = f[2], c = o(Number(f[3]) + t, 0, 100); | ||
return `hsl(${n}, ${s}%, ${c}%)`; | ||
}, V = (e, t) => e.startsWith("#") ? k(e, t) : e.startsWith("rgb") ? W(e, t) : e.startsWith("hsl") ? S(e, t) : e, h = (e, t) => { | ||
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 f = parseInt(r, 16), n = f >> 16 & 255, s = f >> 8 & 255, c = f & 255; | ||
return `rgba(${n}, ${s}, ${c}, ${t})`; | ||
r[0] === "#" && (r = r.slice(1)), r.length === 3 && (r = r.split("").map((b) => b + b).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 f = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e); | ||
if (!f) | ||
const n = /rgba?\((\d+),\s*(\d+),\s*(\d+)/g.exec(e); | ||
if (!n) | ||
return console.warn("invalid rgb color", e), e; | ||
const n = +f[1], s = +f[2], c = +f[3]; | ||
return `rgba(${n}, ${s}, ${c}, ${t})`; | ||
}, p = (e, t) => { | ||
const f = /hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(e); | ||
if (!f) | ||
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 n = +f[1], s = +f[2], c = +f[3]; | ||
return `hsla(${n}, ${s}%, ${c}%, ${t})`; | ||
}, l = (e, t, r) => { | ||
const s = +n[1], f = +n[2], c = +n[3]; | ||
return `hsla(${s}, ${f}%, ${c}%, ${t})`; | ||
}, d = (e, t, r) => { | ||
if (!e) | ||
@@ -275,5 +238,5 @@ return e; | ||
if (e.startsWith("hsl")) | ||
return p(e, t); | ||
return A(e, t); | ||
if (e.includes(".")) { | ||
const f = e.split("."), n = f[0], s = f[1], c = r[n][+s]; | ||
const n = e.split("."), s = n[0], f = n[1], c = r[s][+f]; | ||
return h(c, t); | ||
@@ -283,78 +246,207 @@ } | ||
}; | ||
function i(e, t = 6) { | ||
function l(e, t = 6) { | ||
if (!e || e.startsWith("#") || e.startsWith("hsl") || e.startsWith("rgb")) | ||
return e; | ||
const r = e.split("."), f = r[0], n = r[1], s = a[f]; | ||
return s ? n ? s[+n] : s[t] : e; | ||
const r = e.split("."), n = r[0], s = r[1], f = a[n]; | ||
return f ? s ? f[+s] : f[t] : e; | ||
} | ||
const j = (e, t = 6) => { | ||
const B = (e, t = 6) => { | ||
if (e.includes(".")) | ||
return a[e][t]; | ||
const [r, f] = e.split("."); | ||
return a[r][+f]; | ||
}, G = (e, t) => ({ | ||
"text-color": i(e, t), | ||
const [r, n] = e.split("."); | ||
return a[r][+n]; | ||
}; | ||
function p(e, t = "serenity") { | ||
return `var(--${t}-${e})`; | ||
} | ||
function E(...e) { | ||
return e.filter(Boolean).join(" "); | ||
} | ||
function H(e) { | ||
if (!e) | ||
return {}; | ||
const t = {}; | ||
for (const r in e) { | ||
const n = e[r]; | ||
n && (t["--" + r] = n); | ||
} | ||
return t; | ||
} | ||
function $(e, t, r) { | ||
return typeof t == "number" ? t + r : u(e, t); | ||
} | ||
function u(e, t) { | ||
return p(`${e}-${t}`); | ||
} | ||
function R(e) { | ||
if (e) | ||
return u("shadow", e); | ||
} | ||
function V(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}`; | ||
} | ||
return u(t, e); | ||
} | ||
function j(e) { | ||
const t = {}; | ||
for (const r in e) { | ||
const n = e[r]; | ||
n && (t["--cols-" + r] = n); | ||
} | ||
return t; | ||
} | ||
function I(e) { | ||
return `${e}rem`; | ||
} | ||
function o(e) { | ||
return typeof e == "number" ? I(e) : v.includes(e) ? p(`size-${e}`) : e; | ||
} | ||
function x(e) { | ||
return l(e); | ||
} | ||
const G = [ | ||
"m", | ||
"my", | ||
"mx", | ||
"mt", | ||
"mb", | ||
"mr", | ||
"ml", | ||
"p", | ||
"py", | ||
"px", | ||
"pt", | ||
"pb", | ||
"pl", | ||
"pr", | ||
"bg", | ||
"tc", | ||
"w", | ||
"miw", | ||
"maw", | ||
"h", | ||
"mih", | ||
"mah", | ||
"pos", | ||
"top", | ||
"left", | ||
"bottom", | ||
"right", | ||
"inset", | ||
"flex", | ||
"display", | ||
"cursor", | ||
"z" | ||
], L = { | ||
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: x, | ||
tc: x | ||
}; | ||
function _(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); | ||
} | ||
return { | ||
style: Object.assign(r, ...t), | ||
"data-style": n.length > 0 ? `-${n.join("-")}-` : void 0 | ||
}; | ||
} | ||
const U = (e, t) => ({ | ||
"text-color": l(e, t), | ||
"background-color": "#ffffff" | ||
}), I = (e, t) => ({ | ||
"text-color": i(e, t) | ||
}), R = (e, t) => { | ||
const r = i(e, t); | ||
}), F = (e, t) => ({ | ||
"text-color": l(e, t) | ||
}), M = (e, t) => { | ||
const r = l(e, t); | ||
return { | ||
"text-color": r, | ||
"background-color": l(r, 0.1, a), | ||
"hover-color": l(r, 0.12, a) | ||
"background-color": d(r, 0.1, a), | ||
"hover-color": d(r, 0.12, a) | ||
}; | ||
}, E = (e, t) => { | ||
const r = i(e, t); | ||
}, Y = (e, t) => { | ||
const r = l(e, t); | ||
return { | ||
"text-color": r, | ||
"border-color": r, | ||
"hover-color": l(r, 0.12, a) | ||
"hover-color": d(r, 0.12, a) | ||
}; | ||
}, T = (e, t) => { | ||
const r = i(e, t); | ||
}, Z = (e, t) => { | ||
const r = l(e, t); | ||
return { | ||
"text-color": "#ffffff", | ||
"background-color": r, | ||
"hover-color": u(r, 12), | ||
"active-color": u(r, 15) | ||
"hover-color": g(r, 12), | ||
"active-color": g(r, 15) | ||
}; | ||
}, F = (e, t) => { | ||
const r = i(e, t); | ||
}, z = (e, t) => { | ||
const r = l(e, t); | ||
return { | ||
"text-color": r, | ||
"hover-color": l(r, 0.12, a) | ||
"hover-color": d(r, 0.12, a) | ||
}; | ||
}; | ||
export { | ||
$ as $var, | ||
o as clamp, | ||
O as cssvars, | ||
w as cx, | ||
u as darkenColor, | ||
y as darkenHSL, | ||
v as darkenHex, | ||
x as darkenRGB, | ||
j as getThemeColor, | ||
V as lightenColor, | ||
S as lightenHSL, | ||
k as lightenHex, | ||
p as $var, | ||
G as UTILITY_NAMES, | ||
L as UTILITY_PARSERS, | ||
_ as buildStyles, | ||
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, | ||
m as lightenHex, | ||
W as lightenRGB, | ||
L as padZero, | ||
i as resolveColorInput, | ||
T as resolveFilledVariant, | ||
H as resolveGridCols, | ||
B as resolveGridSpacing, | ||
R as resolveLightVariant, | ||
b as resolveModifier, | ||
E as resolveOutlineVariant, | ||
A as resolveShadow, | ||
g as resolveSize, | ||
F as resolveSubtleVariant, | ||
I as resolveTransparentVariant, | ||
G as resolveWhiteVariant, | ||
l as setColorOpacity, | ||
p as setHSLOpacity, | ||
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, | ||
z as resolveSubtleVariant, | ||
F as resolveTransparentVariant, | ||
U as resolveWhiteVariant, | ||
d as setColorOpacity, | ||
A as setHSLOpacity, | ||
h as setHexOpacity, | ||
C as setRGBOpacity | ||
}; |
import { Tuple } from "@serenity-ui/utils"; | ||
import { ColorNames, ColorValue, ThemeNames } from "./values"; | ||
export * from "./values"; | ||
import { ColorNames, ColorValue, ThemeNames } from "./theme/values"; | ||
export * from "./theme/values"; | ||
export type DefaultThemeColor = ColorNames | (string & {}); | ||
@@ -5,0 +5,0 @@ export type ColorPaletteOverride = {}; |
{ | ||
"name": "@serenity-ui/styles", | ||
"version": "0.1.6", | ||
"version": "0.1.7", | ||
"type": "module", | ||
@@ -5,0 +5,0 @@ "main": "./dist/serenity-styles.umd.cjs", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
55509
40
912