@cfx-dev/ui-components 4.3.8 → 4.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Combination-BGYCZNoJ.js → Combination-DFb92tMK.js} +658 -655
- package/dist/assets/general/global.css +1 -1
- package/dist/assets/general/themes.css +1 -1
- package/dist/components/Accordion/AccordionShowcase.js +21 -9
- package/dist/components/Button/ButtonBar.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.js +2 -2
- package/dist/components/Dot/Dot.js +6 -4
- package/dist/components/DropdownSelect/DropdownSelect.js +4 -4
- package/dist/components/Link/LinkShowcase.js +8 -4
- package/dist/components/Modal/ModalShowcase.js +2 -1
- package/dist/components/Prose/Prose.d.ts +1 -2
- package/dist/components/RSC/Box/Box.js +48 -48
- package/dist/components/Select/Select.js +3 -3
- package/dist/components/Skeleton/SkeletonShowcase.js +3 -2
- package/dist/components/Slider/Slider.js +2 -2
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Text/Text.types.d.ts +1 -0
- package/dist/components/Text/TextShowcase.js +1 -1
- package/dist/components/Title/Title.js +9 -4
- package/dist/{index-DlJ4qUbZ.js → index-BMU9X4M-.js} +1 -1
- package/dist/index-DCuJlMqr.js +239 -0
- package/dist/{index-CriGVLlo.js → index-DWzyrn_L.js} +1 -1
- package/dist/styles-scss/_colors.scss +50 -51
- package/dist/styles-scss/_typography.scss +25 -20
- package/dist/styles-scss/_ui.scss +115 -98
- package/dist/styles-scss/global.scss +13 -8
- package/dist/styles-scss/themes/theme_cfx.scss +15 -15
- package/dist/styles-scss/themes/theme_fivem.scss +12 -12
- package/dist/styles-scss/themes/theme_redm.scss +12 -12
- package/dist/styles-scss/themes/theme_wireframe.scss +12 -12
- package/dist/styles-scss/themes.scss +4 -4
- package/dist/styles-scss/tokens.scss +117 -118
- package/dist/utils/hooks/useClipboardComponent.d.ts +4 -1
- package/dist/utils/ui/ui.d.ts +2 -1
- package/package.json +10 -15
- package/dist/index-ByKwkZKY.js +0 -239
|
@@ -3,9 +3,9 @@ import * as l from "react";
|
|
|
3
3
|
import q from "react";
|
|
4
4
|
import { R as ft, r as De } from "../../index-Cl_RnsqN.js";
|
|
5
5
|
import { c as Ee } from "../../index-rKs9bXHr.js";
|
|
6
|
-
import { a as K, P as N, d as Oe, c as mt, u as B, e as P, b as ht } from "../../index-
|
|
7
|
-
import { u as gt, c as vt } from "../../index-
|
|
8
|
-
import { c as Le, R as _t, u as Ne, A as St, a as wt, h as xt, b as yt, d as Ct, F as It, D as Tt, C as bt, e as Pt } from "../../Combination-
|
|
6
|
+
import { a as K, P as N, d as Oe, c as mt, u as B, e as P, b as ht } from "../../index-DCuJlMqr.js";
|
|
7
|
+
import { u as gt, c as vt } from "../../index-BMU9X4M-.js";
|
|
8
|
+
import { c as Le, R as _t, u as Ne, A as St, a as wt, h as xt, b as yt, d as Ct, F as It, D as Tt, C as bt, e as Pt } from "../../Combination-DFb92tMK.js";
|
|
9
9
|
import { u as Nt } from "../../index-BZPx6jYI.js";
|
|
10
10
|
import { Icon as Rt } from "../Icon/Icon.js";
|
|
11
11
|
import { clsx as xe } from "../../utils/clsx.js";
|
|
@@ -42,9 +42,10 @@ function S() {
|
|
|
42
42
|
) }) }),
|
|
43
43
|
/* @__PURE__ */ e(r, { children: "Skeleton in Text" }),
|
|
44
44
|
/* @__PURE__ */ i(r, { children: [
|
|
45
|
-
"This is a
|
|
45
|
+
"This is a",
|
|
46
46
|
/* @__PURE__ */ e(c, { width: "200px", height: "normal" }),
|
|
47
|
-
"
|
|
47
|
+
" ",
|
|
48
|
+
"in Text"
|
|
48
49
|
] }),
|
|
49
50
|
/* @__PURE__ */ e(p, { theme: "secondary", onClick: o, text: "Restart Timer" })
|
|
50
51
|
] });
|
|
@@ -2,8 +2,8 @@ import { jsx as m, jsxs as K } from "react/jsx-runtime";
|
|
|
2
2
|
import * as u from "react";
|
|
3
3
|
import O from "react";
|
|
4
4
|
import { c as W } from "../../index-rKs9bXHr.js";
|
|
5
|
-
import { d as fe, c as me, e as M, P as k, u as V, f as he } from "../../index-
|
|
6
|
-
import { c as pe, u as Se } from "../../index-
|
|
5
|
+
import { d as fe, c as me, e as M, P as k, u as V, f as he } from "../../index-DCuJlMqr.js";
|
|
6
|
+
import { c as pe, u as Se } from "../../index-BMU9X4M-.js";
|
|
7
7
|
import { u as be } from "../../index-BZPx6jYI.js";
|
|
8
8
|
import { clsx as G } from "../../utils/clsx.js";
|
|
9
9
|
var q = ["PageUp", "PageDown"], J = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], Q = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as I, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import * as r from "react";
|
|
3
3
|
import M from "react";
|
|
4
|
-
import { u as k, d as H, c as j, P as x, e as A, f as q } from "../../index-
|
|
4
|
+
import { u as k, d as H, c as j, P as x, e as A, f as q } from "../../index-DCuJlMqr.js";
|
|
5
5
|
import { u as z } from "../../index-BZPx6jYI.js";
|
|
6
6
|
import { clsx as P } from "../../utils/clsx.js";
|
|
7
7
|
var m = "Switch", [L, et] = j(m), [O, $] = L(m), y = r.forwardRef(
|
|
@@ -34,7 +34,7 @@ function g(p) {
|
|
|
34
34
|
Object.entries(r.textProps).map(([e, n], i) => /* @__PURE__ */ t(s.Fragment, { children: [
|
|
35
35
|
r.descriptions.length > 0 && i === 0 && /* @__PURE__ */ o(l, { content: "props", offset: "large" }),
|
|
36
36
|
e,
|
|
37
|
-
":
|
|
37
|
+
":",
|
|
38
38
|
n.toString(),
|
|
39
39
|
i < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
|
|
40
40
|
] }, `prop_${e}`))
|
|
@@ -102,11 +102,16 @@ function H(l) {
|
|
|
102
102
|
},
|
|
103
103
|
i
|
|
104
104
|
);
|
|
105
|
-
return /* @__PURE__ */ h(T, { children: /* @__PURE__ */ h(
|
|
105
|
+
return /* @__PURE__ */ h(T, { children: /* @__PURE__ */ h(
|
|
106
|
+
"div",
|
|
107
|
+
{
|
|
108
|
+
className: c,
|
|
109
|
+
style: D(!!r, n, d.current),
|
|
110
|
+
children: /* @__PURE__ */ h("div", { className: O(p.root, v), children: f })
|
|
111
|
+
}
|
|
112
|
+
) });
|
|
106
113
|
}, [E, f, r, o, T, n, i, v]), k = s.useMemo(
|
|
107
|
-
() => typeof e == "function" ? e(a) : s.cloneElement(e, {
|
|
108
|
-
ref: N(a, e.props.ref)
|
|
109
|
-
}),
|
|
114
|
+
() => typeof e == "function" ? e(a) : s.cloneElement(e, { ref: N(a, e.props.ref) }),
|
|
110
115
|
[e, a]
|
|
111
116
|
);
|
|
112
117
|
return /* @__PURE__ */ C(M, { children: [
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as A from "react";
|
|
2
2
|
import r from "react";
|
|
3
|
-
import { c as D, u as S, b as M } from "./index-
|
|
3
|
+
import { c as D, u as S, b as M } from "./index-DCuJlMqr.js";
|
|
4
4
|
import { jsx as d } from "react/jsx-runtime";
|
|
5
5
|
function g(l) {
|
|
6
6
|
const i = l + "CollectionProvider", [N, _] = D(i), [v, f] = N(
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
import * as c from "react";
|
|
2
|
+
import { jsx as y } from "react/jsx-runtime";
|
|
3
|
+
import { r as w } from "./index-Cl_RnsqN.js";
|
|
4
|
+
function v(t, n) {
|
|
5
|
+
if (typeof t == "function")
|
|
6
|
+
return t(n);
|
|
7
|
+
t != null && (t.current = n);
|
|
8
|
+
}
|
|
9
|
+
function C(...t) {
|
|
10
|
+
return (n) => {
|
|
11
|
+
let o = !1;
|
|
12
|
+
const r = t.map((e) => {
|
|
13
|
+
const s = v(e, n);
|
|
14
|
+
return !o && typeof s == "function" && (o = !0), s;
|
|
15
|
+
});
|
|
16
|
+
if (o)
|
|
17
|
+
return () => {
|
|
18
|
+
for (let e = 0; e < r.length; e++) {
|
|
19
|
+
const s = r[e];
|
|
20
|
+
typeof s == "function" ? s() : v(t[e], null);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
function j(...t) {
|
|
26
|
+
return c.useCallback(C(...t), t);
|
|
27
|
+
}
|
|
28
|
+
function B(t, n = []) {
|
|
29
|
+
let o = [];
|
|
30
|
+
function r(s, u) {
|
|
31
|
+
const i = c.createContext(u), l = o.length;
|
|
32
|
+
o = [...o, u];
|
|
33
|
+
const f = (a) => {
|
|
34
|
+
var b;
|
|
35
|
+
const { scope: p, children: h, ...m } = a, S = ((b = p == null ? void 0 : p[t]) == null ? void 0 : b[l]) || i, g = c.useMemo(() => m, Object.values(m));
|
|
36
|
+
return /* @__PURE__ */ y(S.Provider, { value: g, children: h });
|
|
37
|
+
};
|
|
38
|
+
f.displayName = s + "Provider";
|
|
39
|
+
function d(a, p) {
|
|
40
|
+
var S;
|
|
41
|
+
const h = ((S = p == null ? void 0 : p[t]) == null ? void 0 : S[l]) || i, m = c.useContext(h);
|
|
42
|
+
if (m) return m;
|
|
43
|
+
if (u !== void 0) return u;
|
|
44
|
+
throw new Error(`\`${a}\` must be used within \`${s}\``);
|
|
45
|
+
}
|
|
46
|
+
return [f, d];
|
|
47
|
+
}
|
|
48
|
+
const e = () => {
|
|
49
|
+
const s = o.map((u) => c.createContext(u));
|
|
50
|
+
return function(i) {
|
|
51
|
+
const l = (i == null ? void 0 : i[t]) || s;
|
|
52
|
+
return c.useMemo(
|
|
53
|
+
() => ({ [`__scope${t}`]: { ...i, [t]: l } }),
|
|
54
|
+
[i, l]
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
return e.scopeName = t, [r, P(e, ...n)];
|
|
59
|
+
}
|
|
60
|
+
function P(...t) {
|
|
61
|
+
const n = t[0];
|
|
62
|
+
if (t.length === 1) return n;
|
|
63
|
+
const o = () => {
|
|
64
|
+
const r = t.map((e) => ({
|
|
65
|
+
useScope: e(),
|
|
66
|
+
scopeName: e.scopeName
|
|
67
|
+
}));
|
|
68
|
+
return function(s) {
|
|
69
|
+
const u = r.reduce((i, { useScope: l, scopeName: f }) => {
|
|
70
|
+
const a = l(s)[`__scope${f}`];
|
|
71
|
+
return { ...i, ...a };
|
|
72
|
+
}, {});
|
|
73
|
+
return c.useMemo(() => ({ [`__scope${n.scopeName}`]: u }), [u]);
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
return o.scopeName = n.scopeName, o;
|
|
77
|
+
}
|
|
78
|
+
function k(t, n, { checkForDefaultPrevented: o = !0 } = {}) {
|
|
79
|
+
return function(e) {
|
|
80
|
+
if (t == null || t(e), o === !1 || !e.defaultPrevented)
|
|
81
|
+
return n == null ? void 0 : n(e);
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
var x = globalThis != null && globalThis.document ? c.useLayoutEffect : () => {
|
|
85
|
+
}, E = c[" useInsertionEffect ".trim().toString()] || x;
|
|
86
|
+
function L({
|
|
87
|
+
prop: t,
|
|
88
|
+
defaultProp: n,
|
|
89
|
+
onChange: o = () => {
|
|
90
|
+
},
|
|
91
|
+
caller: r
|
|
92
|
+
}) {
|
|
93
|
+
const [e, s, u] = R({
|
|
94
|
+
defaultProp: n,
|
|
95
|
+
onChange: o
|
|
96
|
+
}), i = t !== void 0, l = i ? t : e;
|
|
97
|
+
{
|
|
98
|
+
const d = c.useRef(t !== void 0);
|
|
99
|
+
c.useEffect(() => {
|
|
100
|
+
const a = d.current;
|
|
101
|
+
a !== i && console.warn(
|
|
102
|
+
`${r} is changing from ${a ? "controlled" : "uncontrolled"} to ${i ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
103
|
+
), d.current = i;
|
|
104
|
+
}, [i, r]);
|
|
105
|
+
}
|
|
106
|
+
const f = c.useCallback(
|
|
107
|
+
(d) => {
|
|
108
|
+
var a;
|
|
109
|
+
if (i) {
|
|
110
|
+
const p = $(d) ? d(t) : d;
|
|
111
|
+
p !== t && ((a = u.current) == null || a.call(u, p));
|
|
112
|
+
} else
|
|
113
|
+
s(d);
|
|
114
|
+
},
|
|
115
|
+
[i, t, s, u]
|
|
116
|
+
);
|
|
117
|
+
return [l, f];
|
|
118
|
+
}
|
|
119
|
+
function R({
|
|
120
|
+
defaultProp: t,
|
|
121
|
+
onChange: n
|
|
122
|
+
}) {
|
|
123
|
+
const [o, r] = c.useState(t), e = c.useRef(o), s = c.useRef(n);
|
|
124
|
+
return E(() => {
|
|
125
|
+
s.current = n;
|
|
126
|
+
}, [n]), c.useEffect(() => {
|
|
127
|
+
var u;
|
|
128
|
+
e.current !== o && ((u = s.current) == null || u.call(s, o), e.current = o);
|
|
129
|
+
}, [o, e]), [o, r, s];
|
|
130
|
+
}
|
|
131
|
+
function $(t) {
|
|
132
|
+
return typeof t == "function";
|
|
133
|
+
}
|
|
134
|
+
function T(t) {
|
|
135
|
+
const [n, o] = c.useState(void 0);
|
|
136
|
+
return x(() => {
|
|
137
|
+
if (t) {
|
|
138
|
+
o({ width: t.offsetWidth, height: t.offsetHeight });
|
|
139
|
+
const r = new ResizeObserver((e) => {
|
|
140
|
+
if (!Array.isArray(e) || !e.length)
|
|
141
|
+
return;
|
|
142
|
+
const s = e[0];
|
|
143
|
+
let u, i;
|
|
144
|
+
if ("borderBoxSize" in s) {
|
|
145
|
+
const l = s.borderBoxSize, f = Array.isArray(l) ? l[0] : l;
|
|
146
|
+
u = f.inlineSize, i = f.blockSize;
|
|
147
|
+
} else
|
|
148
|
+
u = t.offsetWidth, i = t.offsetHeight;
|
|
149
|
+
o({ width: u, height: i });
|
|
150
|
+
});
|
|
151
|
+
return r.observe(t, { box: "border-box" }), () => r.unobserve(t);
|
|
152
|
+
} else
|
|
153
|
+
o(void 0);
|
|
154
|
+
}, [t]), n;
|
|
155
|
+
}
|
|
156
|
+
// @__NO_SIDE_EFFECTS__
|
|
157
|
+
function z(t) {
|
|
158
|
+
const n = /* @__PURE__ */ _(t), o = c.forwardRef((r, e) => {
|
|
159
|
+
const { children: s, ...u } = r, i = c.Children.toArray(s), l = i.find(A);
|
|
160
|
+
if (l) {
|
|
161
|
+
const f = l.props.children, d = i.map((a) => a === l ? c.Children.count(f) > 1 ? c.Children.only(null) : c.isValidElement(f) ? f.props.children : null : a);
|
|
162
|
+
return /* @__PURE__ */ y(n, { ...u, ref: e, children: c.isValidElement(f) ? c.cloneElement(f, void 0, d) : null });
|
|
163
|
+
}
|
|
164
|
+
return /* @__PURE__ */ y(n, { ...u, ref: e, children: s });
|
|
165
|
+
});
|
|
166
|
+
return o.displayName = `${t}.Slot`, o;
|
|
167
|
+
}
|
|
168
|
+
// @__NO_SIDE_EFFECTS__
|
|
169
|
+
function _(t) {
|
|
170
|
+
const n = c.forwardRef((o, r) => {
|
|
171
|
+
const { children: e, ...s } = o;
|
|
172
|
+
if (c.isValidElement(e)) {
|
|
173
|
+
const u = D(e), i = N(s, e.props);
|
|
174
|
+
return e.type !== c.Fragment && (i.ref = r ? C(r, u) : u), c.cloneElement(e, i);
|
|
175
|
+
}
|
|
176
|
+
return c.Children.count(e) > 1 ? c.Children.only(null) : null;
|
|
177
|
+
});
|
|
178
|
+
return n.displayName = `${t}.SlotClone`, n;
|
|
179
|
+
}
|
|
180
|
+
var O = Symbol("radix.slottable");
|
|
181
|
+
function A(t) {
|
|
182
|
+
return c.isValidElement(t) && typeof t.type == "function" && "__radixId" in t.type && t.type.__radixId === O;
|
|
183
|
+
}
|
|
184
|
+
function N(t, n) {
|
|
185
|
+
const o = { ...n };
|
|
186
|
+
for (const r in n) {
|
|
187
|
+
const e = t[r], s = n[r];
|
|
188
|
+
/^on[A-Z]/.test(r) ? e && s ? o[r] = (...i) => {
|
|
189
|
+
const l = s(...i);
|
|
190
|
+
return e(...i), l;
|
|
191
|
+
} : e && (o[r] = e) : r === "style" ? o[r] = { ...e, ...s } : r === "className" && (o[r] = [e, s].filter(Boolean).join(" "));
|
|
192
|
+
}
|
|
193
|
+
return { ...t, ...o };
|
|
194
|
+
}
|
|
195
|
+
function D(t) {
|
|
196
|
+
var r, e;
|
|
197
|
+
let n = (r = Object.getOwnPropertyDescriptor(t.props, "ref")) == null ? void 0 : r.get, o = n && "isReactWarning" in n && n.isReactWarning;
|
|
198
|
+
return o ? t.ref : (n = (e = Object.getOwnPropertyDescriptor(t, "ref")) == null ? void 0 : e.get, o = n && "isReactWarning" in n && n.isReactWarning, o ? t.props.ref : t.props.ref || t.ref);
|
|
199
|
+
}
|
|
200
|
+
var I = [
|
|
201
|
+
"a",
|
|
202
|
+
"button",
|
|
203
|
+
"div",
|
|
204
|
+
"form",
|
|
205
|
+
"h2",
|
|
206
|
+
"h3",
|
|
207
|
+
"img",
|
|
208
|
+
"input",
|
|
209
|
+
"label",
|
|
210
|
+
"li",
|
|
211
|
+
"nav",
|
|
212
|
+
"ol",
|
|
213
|
+
"p",
|
|
214
|
+
"select",
|
|
215
|
+
"span",
|
|
216
|
+
"svg",
|
|
217
|
+
"ul"
|
|
218
|
+
], F = I.reduce((t, n) => {
|
|
219
|
+
const o = /* @__PURE__ */ z(`Primitive.${n}`), r = c.forwardRef((e, s) => {
|
|
220
|
+
const { asChild: u, ...i } = e, l = u ? o : n;
|
|
221
|
+
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ y(l, { ...i, ref: s });
|
|
222
|
+
});
|
|
223
|
+
return r.displayName = `Primitive.${n}`, { ...t, [n]: r };
|
|
224
|
+
}, {});
|
|
225
|
+
function M(t, n) {
|
|
226
|
+
t && w.flushSync(() => t.dispatchEvent(n));
|
|
227
|
+
}
|
|
228
|
+
export {
|
|
229
|
+
F as P,
|
|
230
|
+
x as a,
|
|
231
|
+
z as b,
|
|
232
|
+
B as c,
|
|
233
|
+
L as d,
|
|
234
|
+
k as e,
|
|
235
|
+
T as f,
|
|
236
|
+
M as g,
|
|
237
|
+
C as h,
|
|
238
|
+
j as u
|
|
239
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
@use
|
|
3
|
-
@use
|
|
4
|
-
@use
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use 'sass:list';
|
|
3
|
+
@use 'sass:map';
|
|
4
|
+
@use 'sass:color';
|
|
5
5
|
|
|
6
6
|
@function get-channel($color, $channel) {
|
|
7
7
|
@return color.channel($color, $channel, $space: rgb);
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
|
|
10
10
|
@function get-luminance($color) {
|
|
11
11
|
$colors: (
|
|
12
|
-
'red': get-channel($color,
|
|
13
|
-
'green': get-channel($color,
|
|
14
|
-
'blue': get-channel($color,
|
|
12
|
+
'red': get-channel($color, 'red'),
|
|
13
|
+
'green': get-channel($color, 'green'),
|
|
14
|
+
'blue': get-channel($color, 'blue'),
|
|
15
15
|
);
|
|
16
16
|
|
|
17
17
|
@each $name, $value in $colors {
|
|
@@ -21,29 +21,32 @@
|
|
|
21
21
|
@if $value < 0.03928 {
|
|
22
22
|
$value: math.div($value, 12.92);
|
|
23
23
|
} @else {
|
|
24
|
-
$value: math.div($value + .055, 1.055);
|
|
24
|
+
$value: math.div($value + 0.055, 1.055);
|
|
25
25
|
$value: math.pow($value, 2.4);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
$colors: map.merge(
|
|
28
|
+
$colors: map.merge(
|
|
29
|
+
$colors,
|
|
30
|
+
(
|
|
31
|
+
$name: $value,
|
|
32
|
+
)
|
|
33
|
+
);
|
|
29
34
|
}
|
|
30
35
|
|
|
31
|
-
@return (
|
|
36
|
+
@return (
|
|
37
|
+
(map.get($colors, 'red') * 0.2126) + (map.get($colors, 'green') * 0.7152) + (map.get($colors, 'blue') * 0.0722)
|
|
38
|
+
);
|
|
32
39
|
}
|
|
33
40
|
|
|
34
41
|
@function interpolate($c1, $c2, $f) {
|
|
35
|
-
$c1r: get-channel($c1,
|
|
36
|
-
$c1g: get-channel($c1,
|
|
37
|
-
$c1b: get-channel($c1,
|
|
38
|
-
$c2r: get-channel($c2,
|
|
39
|
-
$c2g: get-channel($c2,
|
|
40
|
-
$c2b: get-channel($c2,
|
|
41
|
-
|
|
42
|
-
@return rgb(
|
|
43
|
-
$c1r + $f * ($c2r - $c1r),
|
|
44
|
-
$c1g + $f * ($c2g - $c1g),
|
|
45
|
-
$c1b + $f * ($c2b - $c1b),
|
|
46
|
-
);
|
|
42
|
+
$c1r: get-channel($c1, 'red');
|
|
43
|
+
$c1g: get-channel($c1, 'green');
|
|
44
|
+
$c1b: get-channel($c1, 'blue');
|
|
45
|
+
$c2r: get-channel($c2, 'red');
|
|
46
|
+
$c2g: get-channel($c2, 'green');
|
|
47
|
+
$c2b: get-channel($c2, 'blue');
|
|
48
|
+
|
|
49
|
+
@return rgb($c1r + $f * ($c2r - $c1r), $c1g + $f * ($c2g - $c1g), $c1b + $f * ($c2b - $c1b));
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
@function set-luminance($color, $lum) {
|
|
@@ -57,12 +60,12 @@
|
|
|
57
60
|
$low: $color;
|
|
58
61
|
}
|
|
59
62
|
|
|
60
|
-
$mid: interpolate($low, $high, .5);
|
|
63
|
+
$mid: interpolate($low, $high, 0.5);
|
|
61
64
|
$lm: get-luminance($mid);
|
|
62
65
|
|
|
63
66
|
@while math.abs($lum - $lm) >= 1e - 7 and $itersLeft > 0 {
|
|
64
67
|
$itersLeft: $itersLeft - 1;
|
|
65
|
-
$mid: interpolate($low, $high, .5);
|
|
68
|
+
$mid: interpolate($low, $high, 0.5);
|
|
66
69
|
$lm: get-luminance($mid);
|
|
67
70
|
|
|
68
71
|
@if $lm > $lum {
|
|
@@ -76,19 +79,18 @@
|
|
|
76
79
|
}
|
|
77
80
|
|
|
78
81
|
@function color-triplet($color) {
|
|
79
|
-
@return #{get-channel($color,
|
|
82
|
+
@return #{get-channel($color, 'red')}, #{get-channel($color, 'green')}, #{get-channel($color, 'blue')};
|
|
80
83
|
}
|
|
81
84
|
|
|
82
|
-
|
|
83
85
|
// LAB <-> RGB
|
|
84
86
|
$oneThird: math.div(1, 3);
|
|
85
87
|
$_16OVER116: math.div(16, 116);
|
|
86
88
|
$_1OVER2P4: math.div(1, 2.4);
|
|
87
89
|
|
|
88
90
|
@function rgb2lab($color) {
|
|
89
|
-
$r: math.div(get-channel($color,
|
|
90
|
-
$g: math.div(get-channel($color,
|
|
91
|
-
$b: math.div(get-channel($color,
|
|
91
|
+
$r: math.div(get-channel($color, 'red'), 255);
|
|
92
|
+
$g: math.div(get-channel($color, 'green'), 255);
|
|
93
|
+
$b: math.div(get-channel($color, 'blue'), 255);
|
|
92
94
|
|
|
93
95
|
@if $r > 0.04045 {
|
|
94
96
|
$r: math.pow(math.div($r + 0.055, 1.055), 2.4);
|
|
@@ -109,7 +111,7 @@ $_1OVER2P4: math.div(1, 2.4);
|
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
$x: math.div($r * 0.4124 + $g * 0.3576 + $b * 0.1805, 0.95047);
|
|
112
|
-
$y: math.div($r * 0.2126 + $g * 0.7152 + $b * 0.0722, 1
|
|
114
|
+
$y: math.div($r * 0.2126 + $g * 0.7152 + $b * 0.0722, 1);
|
|
113
115
|
$z: math.div($r * 0.0193 + $g * 0.1192 + $b * 0.9505, 1.08883);
|
|
114
116
|
|
|
115
117
|
@if $x > 0.008856 {
|
|
@@ -130,11 +132,11 @@ $_1OVER2P4: math.div(1, 2.4);
|
|
|
130
132
|
$z: (7.787 * $z) + $_16OVER116;
|
|
131
133
|
}
|
|
132
134
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
);
|
|
135
|
+
$b: 200 * $y - $z;
|
|
136
|
+
$a: 500 * ($x - $y);
|
|
137
|
+
$l: 116 * $y - 16;
|
|
138
|
+
|
|
139
|
+
@return ('L': $l, 'a': $a, 'b': $b);
|
|
138
140
|
}
|
|
139
141
|
|
|
140
142
|
@function lab2rgb($lab) {
|
|
@@ -148,27 +150,27 @@ $_1OVER2P4: math.div(1, 2.4);
|
|
|
148
150
|
@if $x3 > 0.008856 {
|
|
149
151
|
$x: $x3;
|
|
150
152
|
} @else {
|
|
151
|
-
$x: math.div($x - $_16OVER116
|
|
153
|
+
$x: math.div($x - $_16OVER116, 7.787);
|
|
152
154
|
}
|
|
153
155
|
|
|
154
156
|
@if $y3 > 0.008856 {
|
|
155
157
|
$y: $y3;
|
|
156
158
|
} @else {
|
|
157
|
-
$y: math.div($y - $_16OVER116
|
|
159
|
+
$y: math.div($y - $_16OVER116, 7.787);
|
|
158
160
|
}
|
|
159
161
|
|
|
160
162
|
@if $z3 > 0.008856 {
|
|
161
163
|
$z: $z3;
|
|
162
164
|
} @else {
|
|
163
|
-
$z: math.div($z - $_16OVER116
|
|
165
|
+
$z: math.div($z - $_16OVER116, 7.787);
|
|
164
166
|
}
|
|
165
167
|
|
|
166
168
|
$x: $x * 0.95047;
|
|
167
|
-
$y: $y * 1
|
|
169
|
+
$y: $y * 1;
|
|
168
170
|
$z: $z * 1.08883;
|
|
169
171
|
$r: $x * 3.2406 + $y * -1.5372 + $z * -0.4986;
|
|
170
172
|
$g: $x * -0.9689 + $y * 1.8758 + $z * 0.0415;
|
|
171
|
-
$b: $x * 0.0557 + $y * -0.
|
|
173
|
+
$b: $x * 0.0557 + $y * -0.204 + $z * 1.057;
|
|
172
174
|
|
|
173
175
|
@if $r > 0.0031308 {
|
|
174
176
|
$r: 1.055 * math.pow($r, $_1OVER2P4) - 0.055;
|
|
@@ -188,11 +190,7 @@ $_1OVER2P4: math.div(1, 2.4);
|
|
|
188
190
|
$b: 12.92 * $b;
|
|
189
191
|
}
|
|
190
192
|
|
|
191
|
-
@return rgb(
|
|
192
|
-
math.clamp(0, $r, 1) * 255,
|
|
193
|
-
math.clamp(0, $g, 1) * 255,
|
|
194
|
-
math.clamp(0, $b, 1) * 255,
|
|
195
|
-
);
|
|
193
|
+
@return rgb(math.clamp(0, $r, 1) * 255, math.clamp(0, $g, 1) * 255, math.clamp(0, $b, 1) * 255);
|
|
196
194
|
}
|
|
197
195
|
|
|
198
196
|
@function lab-gradient($s, $e, $start, $stop) {
|
|
@@ -211,10 +209,11 @@ $_1OVER2P4: math.div(1, 2.4);
|
|
|
211
209
|
$a: math.div($i, $stop - 1);
|
|
212
210
|
$ia: 1 - $a;
|
|
213
211
|
|
|
214
|
-
@return lab2rgb(
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
212
|
+
@return lab2rgb(
|
|
213
|
+
(
|
|
214
|
+
'L': $ia * map.get($s, 'L') + $a * map.get($e, 'L'),
|
|
215
|
+
'a': $ia * map.get($s, 'a') + $a * map.get($e, 'a'),
|
|
216
|
+
'b': $ia * map.get($s, 'b') + $a * map.get($e, 'b'),
|
|
217
|
+
)
|
|
218
|
+
);
|
|
219
219
|
}
|
|
220
|
-
|
|
@@ -9,44 +9,49 @@
|
|
|
9
9
|
font-style: normal;
|
|
10
10
|
font-weight: 400;
|
|
11
11
|
font-family: HelveticaNowDisplay;
|
|
12
|
-
src:
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
src:
|
|
13
|
+
url('assets/fonts/HelveticaNow/HelveticaNowDisplay.woff2') format('woff2'),
|
|
14
|
+
url('assets/fonts/HelveticaNow/HelveticaNowDisplay.woff') format('woff'),
|
|
15
|
+
url('assets/fonts/HelveticaNow/HelveticaNowDisplay.ttf') format('truetype');
|
|
15
16
|
}
|
|
16
|
-
|
|
17
|
+
|
|
17
18
|
@font-face {
|
|
18
19
|
font-style: normal;
|
|
19
20
|
font-weight: 700;
|
|
20
21
|
font-family: HelveticaNowDisplay;
|
|
21
|
-
src:
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
src:
|
|
23
|
+
url('assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff2') format('woff2'),
|
|
24
|
+
url('assets/fonts/HelveticaNow/HelveticaNowDisplayBold.woff') format('woff'),
|
|
25
|
+
url('assets/fonts/HelveticaNow/HelveticaNowDisplayBold.ttf') format('truetype');
|
|
24
26
|
}
|
|
25
|
-
|
|
27
|
+
|
|
26
28
|
@font-face {
|
|
27
29
|
font-style: normal;
|
|
28
30
|
font-weight: 400;
|
|
29
31
|
font-family: HelveticaNowText;
|
|
30
|
-
src:
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
src:
|
|
33
|
+
url('assets/fonts/HelveticaNow/HelveticaNowText.woff2') format('woff2'),
|
|
34
|
+
url('assets/fonts/HelveticaNow/HelveticaNowText.woff') format('woff'),
|
|
35
|
+
url('assets/fonts/HelveticaNow/HelveticaNowText.ttf') format('truetype');
|
|
33
36
|
}
|
|
34
|
-
|
|
37
|
+
|
|
35
38
|
@font-face {
|
|
36
39
|
font-style: normal;
|
|
37
40
|
font-weight: 700;
|
|
38
41
|
font-family: HelveticaNowText;
|
|
39
|
-
src:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
src:
|
|
43
|
+
url('assets/fonts/HelveticaNow/HelveticaNowTextBold.woff2') format('woff2'),
|
|
44
|
+
url('assets/fonts/HelveticaNow/HelveticaNowTextBold.woff') format('woff'),
|
|
45
|
+
url('assets/fonts/HelveticaNow/HelveticaNowTextBold.ttf') format('truetype');
|
|
42
46
|
}
|
|
43
|
-
|
|
47
|
+
|
|
44
48
|
@font-face {
|
|
45
49
|
font-style: italic;
|
|
46
50
|
font-weight: 400;
|
|
47
51
|
font-family: HelveticaNowText;
|
|
48
|
-
src:
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
src:
|
|
53
|
+
url('assets/fonts/HelveticaNow/HelveticaNowTextIt.woff2') format('woff2'),
|
|
54
|
+
url('assets/fonts/HelveticaNow/HelveticaNowTextIt.woff') format('woff'),
|
|
55
|
+
url('assets/fonts/HelveticaNow/HelveticaNowTextIt.ttf') format('truetype');
|
|
51
56
|
}
|
|
52
|
-
}
|
|
57
|
+
}
|