jcicl 1.0.5 → 1.0.7

package/WithLoading/WithLoading.js

@@ -1,17 +1,22 @@
-import { jsx as r, Fragment as e } from "react/jsx-runtime";
-import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as r, Fragment as m } from "react/jsx-runtime";
+import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as i } from "../.chunks/emotion-react.browser.esm.js";
-import a from "../theme.js";
-import { C as c } from "../.chunks/CircularProgress.js";
-const n = m(c)({
+import { useThemeColors as a } from "../ThemeContext.js";
+import { C as n } from "../.chunks/CircularProgress.js";
+const u = c(n, {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ customTheme: o }) => ({
   ...i`
-    color: ${a.colors.green};
+    color: ${o.themeIconBackgroundA};
   `
-}), d = ({
+})), g = ({
   loading: o,
-  children: t,
-  ...s
-}) => o ? /* @__PURE__ */ r(n, { size: 47, ...s }) : /* @__PURE__ */ r(e, { children: t });
+  children: s,
+  ...e
+}) => {
+  const t = a();
+  return o ? /* @__PURE__ */ r(u, { size: 47, ...e, customTheme: t }) : /* @__PURE__ */ r(m, { children: s });
+};
 export {
-  d as default
+  g as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/theme.d.ts

@@ -104,6 +104,15 @@ export interface TemplateThemeProps {
         backgroundColor: string;
     };
 }
+export interface ThemeOptions {
+    green: string;
+    blue: string;
+    red: string;
+    grayscale: string;
+    custom: string;
+}
+declare const theme: Theme;
+export default theme;
 export interface CustomThemeProps {
     themeColor: string;
     themeDark: string;
@@ -118,6 +127,10 @@ export interface CustomThemeProps {
     themeShadowA: string;
     themeShadowB: string;
     themeShadowC: string;
+    themeIconBackgroundA: string;
+    themeIconBackgroundB: string;
+    themeIconColorA: string;
+    themeIconColorB: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: string;
@@ -137,15 +150,6 @@ export interface CustomThemeProps {
     darkGray1: string;
     black: string;
 }
-export interface ThemeOptions {
-    green: string;
-    blue: string;
-    red: string;
-    grayscale: string;
-    custom: string;
-}
-declare const theme: Theme;
-export default theme;
 export declare const defaultTheme: {
     themeColor: string;
     themeDark: string;
@@ -160,6 +164,10 @@ export declare const defaultTheme: {
     themeShadowA: string;
     themeShadowB: string;
     themeShadowC: string;
+    themeIconBackgroundA: string;
+    themeIconBackgroundB: string;
+    themeIconColorA: string;
+    themeIconColorB: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: string;

package/theme.js

@@ -111,6 +111,10 @@ const o = {
   themeShadowA: e.colors.darkGreenO99,
   themeShadowB: e.boxShadows.darkGreen,
   themeShadowC: e.boxShadows.darkGreenThick,
+  themeIconBackgroundA: e.colors.green,
+  themeIconBackgroundB: e.colors.whiteGreenA,
+  themeIconColorA: e.colors.white,
+  themeIconColorB: e.colors.darkGreen,
   // These colors always stay the same, no custom theme updating
   highlightPrimary: e.colors.sunlight,
   highlightSecondary: e.colors.dandelion,

package/themeUtils.d.ts

@@ -1,4 +1,5 @@
 export declare const getHueFromHex: (hex: string) => number;
+export declare const getSaturationFromHex: (hex: string) => number;
 export declare const substituteHue: (themeColor: string, hue: number) => string;
 export declare const updateTheme: (newHue?: number) => {
     themeColor: string;
@@ -14,6 +15,10 @@ export declare const updateTheme: (newHue?: number) => {
     themeShadowA: string;
     themeShadowB: string;
     themeShadowC: string;
+    themeIconBackgroundA: string;
+    themeIconBackgroundB: string;
+    themeIconColorA: string;
+    themeIconColorB: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: string;

package/themeUtils.js

@@ -1,88 +1,100 @@
-import i, { defaultTheme as S } from "./theme.js";
-function T(o) {
-  const r = parseInt(o.substring(1, 3), 16), e = parseInt(o.substring(3, 5), 16), t = parseInt(o.substring(5, 7), 16);
-  return [r, e, t];
+import n, { defaultTheme as C } from "./theme.js";
+function a(o) {
+  const r = parseInt(o.substring(1, 3), 16), t = parseInt(o.substring(3, 5), 16), e = parseInt(o.substring(5, 7), 16);
+  return [r, t, e];
 }
-function w(o, r, e) {
-  o /= 255, r /= 255, e /= 255;
-  const t = Math.max(o, r, e), n = Math.min(o, r, e), m = (t + n) / 2;
-  if (t === n)
-    return [0, 0, m];
-  const h = t - n;
-  let u = m > 0.5 ? h / (2 - t - n) : h / (t + n), c;
-  return t === o ? c = (r - e) / h + (r < e ? 6 : 0) : t === r ? c = (e - o) / h + 2 : c = (o - r) / h + 4, c /= 6, [c, u, m];
+function d(o, r, t) {
+  o /= 255, r /= 255, t /= 255;
+  const e = Math.max(o, r, t), h = Math.min(o, r, t), c = (e + h) / 2;
+  if (e === h)
+    return [0, 0, c];
+  const i = e - h;
+  let l = c > 0.5 ? i / (2 - e - h) : i / (e + h), m;
+  return e === o ? m = (r - t) / i + (r < t ? 6 : 0) : e === r ? m = (t - o) / i + 2 : m = (o - r) / i + 4, m /= 6, [m, l, c];
 }
-function M(o, r, e) {
-  let t, n, m;
+function I(o, r, t) {
+  let e, h, c;
   if (r === 0)
-    t = n = m = e;
+    e = h = c = t;
   else {
-    const h = e < 0.5 ? e * (1 + r) : e + r - e * r, u = 2 * e - h;
-    t = a(u, h, o + 1 / 3), n = a(u, h, o), m = a(u, h, o - 1 / 3);
+    const i = t < 0.5 ? t * (1 + r) : t + r - t * r, l = 2 * t - i;
+    e = g(l, i, o + 1 / 3), h = g(l, i, o), c = g(l, i, o - 1 / 3);
   }
-  return [Math.round(t * 255), Math.round(n * 255), Math.round(m * 255)];
+  return [Math.round(e * 255), Math.round(h * 255), Math.round(c * 255)];
 }
-function a(o, r, e) {
-  return e < 0 && (e += 1), e > 1 && (e -= 1), e < 1 / 6 ? o + (r - o) * 6 * e : e < 1 / 2 ? r : e < 2 / 3 ? o + (r - o) * (2 / 3 - e) * 6 : o;
+function g(o, r, t) {
+  return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? o + (r - o) * 6 * t : t < 1 / 2 ? r : t < 2 / 3 ? o + (r - o) * (2 / 3 - t) * 6 : o;
 }
-function L(o, r, e) {
-  var t = o.toString(16).length == 1 ? "0" + o.toString(16) : o.toString(16), n = r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16), m = e.toString(16).length == 1 ? "0" + e.toString(16) : e.toString(16);
-  return "#" + t + n + m;
+function T(o, r, t) {
+  var e = o.toString(16).length == 1 ? "0" + o.toString(16) : o.toString(16), h = r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16), c = t.toString(16).length == 1 ? "0" + t.toString(16) : t.toString(16);
+  return "#" + e + h + c;
 }
-const B = (o) => {
-  const [r, e, t] = T(o), [n, m, h] = w(r, e, t);
-  return n;
+const k = (o) => {
+  const [r, t, e] = a(o), [h, c, i] = d(r, t, e);
+  return h;
+}, _ = (o) => {
+  const [r, t, e] = a(o), [h, c, i] = d(r, t, e);
+  return c;
 }, s = (o, r) => {
-  const [e, t, n] = T(o), [m, h, u] = w(e, t, n);
-  let c = h + 0.1;
-  c >= 1 && (c = 0.99);
-  let g = u;
-  g > 0.5 && (g -= 0.08), g > 0.8 && (c = 1, g += 0.03), r < 0 && (c = 0);
-  const [l, d, f] = M(r, c, g);
-  return L(l, d, f);
-}, A = (o) => {
-  const r = localStorage.getItem("theme") || "green", e = localStorage.getItem("hue") || B(i.themeOptions.green).toString();
-  if (r == "green") return S;
-  var t = parseFloat(e);
-  o != null && (t = o);
+  const [t, e, h] = a(o), [c, i, l] = d(t, e, h);
+  let m = i + 0.1;
+  m >= 1 && (m = 0.99);
+  let u = l;
+  u > 0.5 && (u -= 0.08), u > 0.8 && (m = 1, u += 0.03), r < 0 && (m = 0);
+  const [f, S, B] = I(r, m, u);
+  return T(f, S, B);
+}, F = (o) => {
+  const r = localStorage.getItem("theme") || "green", t = localStorage.getItem("hue") || k(n.themeOptions.green).toString();
+  if (r == "green") return C;
+  var e = parseFloat(t);
+  o != null && (e = o);
   const {
-    themeColor: n,
-    themeDark: m,
-    themeMediumA: h,
-    themeMediumB: u,
-    themeMediumC: c,
-    themeLight: g,
-    themeLightA: l,
-    themeLightB: d,
-    themeLightC: f,
-    themeLightD: C,
-    themeShadowA: G,
-    themeShadowB: b,
-    themeShadowC: x,
-    ...p
-  } = S;
+    themeColor: h,
+    themeDark: c,
+    themeMediumA: i,
+    themeMediumB: l,
+    themeMediumC: m,
+    themeLight: u,
+    themeLightA: f,
+    themeLightB: S,
+    themeLightC: B,
+    themeLightD: w,
+    themeShadowA: A,
+    themeShadowB: p,
+    themeShadowC: M,
+    themeIconBackgroundA: L,
+    themeIconBackgroundB: b,
+    themeIconColorA: x,
+    themeIconColorB: v,
+    ...G
+  } = C;
   return {
-    themeColor: s(i.colors.green, t),
-    themeDark: s(i.colors.darkGreen, t),
-    themeMediumA: s(i.colors.whiteGreenB, t),
+    themeColor: s(n.colors.green, e),
+    themeDark: s(n.colors.darkGreen, e),
+    themeMediumA: s(n.colors.whiteGreenB, e),
     // mint
-    themeMediumB: s(i.colors.moss, t),
-    themeMediumC: s(i.colors.sage, t),
-    themeLight: s(i.colors.whiteGreenB, t),
+    themeMediumB: s(n.colors.moss, e),
+    themeMediumC: s(n.colors.sage, e),
+    themeLight: s(n.colors.whiteGreenB, e),
     // whiteGreen
-    themeLightA: s(i.colors.moss, t),
+    themeLightA: s(n.colors.moss, e),
     // whiteGreenA
-    themeLightB: s(i.colors.whiteGreenB, t),
-    themeLightC: s(i.colors.whiteGreenC, t),
-    themeLightD: s(i.colors.whiteGreenD, t),
-    themeShadowA: s(i.colors.darkGreenO99, t) + "99",
-    themeShadowB: "0 0 8px -2px " + s(i.colors.darkGreen, t),
-    themeShadowC: "0 0 2px 1px " + s(i.colors.darkGreen, t),
-    ...p
+    themeLightB: s(n.colors.whiteGreenB, e),
+    themeLightC: s(n.colors.whiteGreenC, e),
+    themeLightD: s(n.colors.whiteGreenD, e),
+    themeShadowA: s(n.colors.darkGreenO99, e) + "99",
+    themeShadowB: "0 0 8px -2px " + s(n.colors.darkGreen, e),
+    themeShadowC: "0 0 2px 1px " + s(n.colors.darkGreen, e),
+    themeIconBackgroundA: e < 0 ? n.colors.green : s(n.colors.green, e),
+    themeIconBackgroundB: e < 0 ? n.colors.whiteGreenA : s(n.colors.whiteGreenA, e),
+    themeIconColorA: n.colors.white,
+    themeIconColorB: e < 0 ? n.colors.darkGreen : s(n.colors.darkGreen, e),
+    ...G
   };
 };
 export {
-  B as getHueFromHex,
+  k as getHueFromHex,
+  _ as getSaturationFromHex,
   s as substituteHue,
-  A as updateTheme
+  F as updateTheme
 };