jcicl 0.0.343 → 1.0.1

package/ThemeContext.d.ts

@@ -0,0 +1,3 @@
+import { CustomThemeProps } from '../../../../../../../src/components/theme';
+export declare const ThemeContext: import('react').Context<CustomThemeProps | null>;
+export declare const useThemeColors: () => CustomThemeProps;

package/ThemeContext.js

@@ -0,0 +1,10 @@
+import { createContext as t, useContext as o } from "react";
+const r = t(null), s = () => {
+  const e = o(r);
+  if (!e) throw new Error("useThemeColors must be used inside ThemeContext.Provider");
+  return e;
+};
+export {
+  r as ThemeContext,
+  s as useThemeColors
+};

package/index.js

@@ -6,8 +6,8 @@ import { Grid as l } from "./Grid/Grid.js";
 import { default as i } from "./Icon/Icon.js";
 import { Input as s } from "./Input/Input.js";
 import { LabeledValue as I } from "./LabeledValue/LabeledValue.js";
-import { default as c } from "./ListButton/ListButton.js";
-import { default as A } from "./Loading/Loading.js";
+import { default as b } from "./ListButton/ListButton.js";
+import { default as g } from "./Loading/Loading.js";
 import { default as h } from "./ScrollContainer/ScrollContainer.js";
 import { Accordion as B } from "./Accordion/Accordion.js";
 import { default as E } from "./ErrorBoundary/ErrorBoundary.js";
@@ -18,7 +18,7 @@ import { default as T } from "./LogoLoop/LogoLoop.js";
 import { Tooltip as j } from "./Tooltip/Tooltip.js";
 import { default as q } from "./WithLabel/WithLabel.js";
 import { default as z } from "./WithLoading/WithLoading.js";
-import { default as K } from "./AppHeader/AppHeader.js";
+import { A as K } from "./.chunks/AppHeader.js";
 import { EditableInfoCard as O } from "./EditableInfoCard/EditableInfoCard.js";
 import { Nav as Q } from "./Nav/Nav.js";
 import { default as U } from "./AppContainer/AppContainer.js";
@@ -39,8 +39,8 @@ export {
   G as LabeledInput,
   I as LabeledValue,
   N as List,
-  c as ListButton,
-  A as Loading,
+  b as ListButton,
+  g as Loading,
   T as LogoLoop,
   Q as Nav,
   h as ScrollContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.343",
+  "version": "1.0.1",
   "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",
@@ -20,6 +20,7 @@
     "@mui/icons-material": "^6.1.3",
     "@mui/material": "^6.1.1",
     "@react-hook/resize-observer": "^2.0.2",
+    "@uiw/react-color": "^2.9.2",
     "lucide-react": "^0.525.0",
     "overlayscrollbars-react": "^0.5.6",
     "react-device-detect": "^2.2.3"

package/theme.d.ts

@@ -17,7 +17,6 @@ export interface ThemeColors {
     darkGreenO99: string;
     darkRed: string;
     emerald: string;
-    formBorder: string;
     gold: string;
     goldBrown: string;
     goldHover: string;
@@ -83,6 +82,7 @@ export interface Theme {
     constants: ThemeConstants;
     fonts: ThemeFonts;
     screenSizes: ThemeScreenSizes;
+    themeOptions: ThemeOptions;
 }
 export interface TemplateThemeProps {
     backgroundPrimary: string;
@@ -98,6 +98,84 @@ export interface TemplateThemeProps {
     shadowPrimary: string;
     shadowSecondary: string;
     shadowTertiary: string;
+    loadingColor: string;
+    iconColors?: {
+        iconColor: string;
+        backgroundColor: string;
+    };
+}
+export interface CustomThemeProps {
+    themeColor: string;
+    themeDark: string;
+    themeMediumA: string;
+    themeMediumB: string;
+    themeMediumC: string;
+    themeLight: string;
+    themeLightA: string;
+    themeLightB: string;
+    themeLightC: string;
+    themeLightD: string;
+    themeShadowA: string;
+    themeShadowB: string;
+    themeShadowC: string;
+    highlightPrimary: string;
+    highlightSecondary: string;
+    highlightTertiary: string;
+    white: string;
+    lightGray1: string;
+    lightGray33: string;
+    lightGray2: string;
+    lightGray3: string;
+    lightGray4: string;
+    lightGray5: string;
+    gray1: string;
+    gray44: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    darkGray99: string;
+    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;
+    themeMediumA: string;
+    themeMediumB: string;
+    themeMediumC: string;
+    themeLight: string;
+    themeLightA: string;
+    themeLightB: string;
+    themeLightC: string;
+    themeLightD: string;
+    themeShadowA: string;
+    themeShadowB: string;
+    themeShadowC: string;
+    highlightPrimary: string;
+    highlightSecondary: string;
+    highlightTertiary: string;
+    white: string;
+    lightGray1: string;
+    lightGray33: string;
+    lightGray2: string;
+    lightGray3: string;
+    lightGray4: string;
+    lightGray5: string;
+    gray1: string;
+    gray44: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    darkGray99: string;
+    darkGray1: string;
+    black: string;
+};

package/theme.js

@@ -1,4 +1,4 @@
-const a = {
+const e = {
   fonts: {
     roboto: "Roboto, sans-serif"
   },
@@ -22,7 +22,7 @@ const a = {
     darkGreenO99: "#005c0099",
     darkRed: "#800000",
     emerald: "#004d24",
-    formBorder: "rgb(114,114,114)",
+    // formBorder: 'rgb(114,114,114)', // shouldn't need this anymore, same as gray: '#727272'
     gold: "#fab62d",
     goldBrown: "#85611b",
     goldHover: "#e0a022",
@@ -72,24 +72,66 @@ const a = {
     mobile: "533px",
     // Testing range for tablets: 533px - 1080px
     tablet: "1080px"
+  },
+  themeOptions: {
+    green: "#009200",
+    blue: "#000092",
+    red: "#920000",
+    grayscale: "#000000",
+    custom: ""
   }
 };
-a.boxShadows = {
+e.boxShadows = {
   ...Object.fromEntries(
-    Object.keys(a.colors).map((e) => [
-      e,
-      `0 0 8px -2px ${a.colors[e]}`
+    Object.keys(e.colors).map((r) => [
+      r,
+      `0 0 8px -2px ${e.colors[r]}`
     ])
   ),
   ...Object.fromEntries(
-    Object.keys(a.colors).map((e) => [
-      `${e}Thick`,
-      `0 0 2px 1px ${a.colors[e]}`
+    Object.keys(e.colors).map((r) => [
+      `${r}Thick`,
+      `0 0 2px 1px ${e.colors[r]}`
     ])
   ),
   black63: "0px 0px 2px 1px rgba(0, 0, 0, 0.63)",
   gray63: "0px 0px 2px 1px rgba(100, 100, 100, 0.63)"
 };
+const o = {
+  themeColor: e.colors.green,
+  themeDark: e.colors.darkGreen,
+  themeMediumA: e.colors.mint,
+  themeMediumB: e.colors.moss,
+  themeMediumC: e.colors.sage,
+  themeLight: e.colors.whiteGreen,
+  themeLightA: e.colors.whiteGreenA,
+  themeLightB: e.colors.whiteGreenB,
+  themeLightC: e.colors.whiteGreenC,
+  themeLightD: e.colors.whiteGreenD,
+  themeShadowA: e.colors.darkGreenO99,
+  themeShadowB: e.boxShadows.darkGreen,
+  themeShadowC: e.boxShadows.darkGreenThick,
+  // These colors always stay the same, no custom theme updating
+  highlightPrimary: e.colors.sunlight,
+  highlightSecondary: e.colors.dandelion,
+  highlightTertiary: `${e.colors.dandelion}99`,
+  white: e.colors.white,
+  lightGray1: e.colors.veryLightGray,
+  lightGray33: e.colors.veryLightGrayO33,
+  lightGray2: e.colors.whiteBlue,
+  lightGray3: e.colors.almostWhite,
+  lightGray4: e.colors.gray4,
+  lightGray5: e.colors.gray2,
+  gray1: e.colors.gray,
+  gray44: e.colors.grayO44,
+  gray2: e.colors.gray3,
+  gray3: e.colors.charcoal,
+  gray4: e.colors.slate,
+  darkGray99: e.colors.modalBackdrop,
+  darkGray1: e.colors.midnight,
+  black: e.colors.black
+};
 export {
-  a as default
+  e as default,
+  o as defaultTheme
 };

package/themeUtils.d.ts

@@ -0,0 +1,35 @@
+export declare const getHueFromHex: (hex: string) => number;
+export declare const substituteHue: (themeColor: string, hue: number) => string;
+export declare const updateTheme: (newHue?: number) => {
+    themeColor: string;
+    themeDark: string;
+    themeMediumA: string;
+    themeMediumB: string;
+    themeMediumC: string;
+    themeLight: string;
+    themeLightA: string;
+    themeLightB: string;
+    themeLightC: string;
+    themeLightD: string;
+    themeShadowA: string;
+    themeShadowB: string;
+    themeShadowC: string;
+    highlightPrimary: string;
+    highlightSecondary: string;
+    highlightTertiary: string;
+    white: string;
+    lightGray1: string;
+    lightGray33: string;
+    lightGray2: string;
+    lightGray3: string;
+    lightGray4: string;
+    lightGray5: string;
+    gray1: string;
+    gray44: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    darkGray99: string;
+    darkGray1: string;
+    black: string;
+};

package/themeUtils.js

@@ -0,0 +1,88 @@
+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];
+}
+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 M(o, r, e) {
+  let t, n, m;
+  if (r === 0)
+    t = n = m = e;
+  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);
+  }
+  return [Math.round(t * 255), Math.round(n * 255), Math.round(m * 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 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;
+}
+const B = (o) => {
+  const [r, e, t] = T(o), [n, m, h] = w(r, e, t);
+  return n;
+}, 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 {
+    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;
+  return {
+    themeColor: s(i.colors.green, t),
+    themeDark: s(i.colors.darkGreen, t),
+    themeMediumA: s(i.colors.whiteGreenB, t),
+    // mint
+    themeMediumB: s(i.colors.moss, t),
+    themeMediumC: s(i.colors.sage, t),
+    themeLight: s(i.colors.whiteGreenB, t),
+    // whiteGreen
+    themeLightA: s(i.colors.moss, t),
+    // 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
+  };
+};
+export {
+  B as getHueFromHex,
+  s as substituteHue,
+  A as updateTheme
+};