@arcanejs/toolkit-frontend 0.4.0 → 0.5.0

package/dist/{chunk-XEIKOLS2.js → chunk-7VTNOX5O.js}

@@ -1,5 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/util/touch.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/util/index.ts
 var _react = require('react');
+
+// src/util/touch.ts
+
 function switchToMouseMode(ev) {
   if (ev.movementX === 0 && ev.movementY === 0) return;
   document.body.classList.remove("touch-mode");
@@ -64,6 +73,25 @@ function trackTouch(touch, move, end) {
 
 // src/util/index.ts
 var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
+var usePreferredColorScheme = () => {
+  const [theme, setTheme] = _react.useState.call(void 0, "light");
+  _react.useEffect.call(void 0, () => {
+    if (typeof window !== "undefined") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setTheme(mediaQuery.matches ? "dark" : "light");
+      const handleChange = (event) => {
+        setTheme(event.matches ? "dark" : "light");
+      };
+      mediaQuery.addEventListener("change", handleChange);
+      return () => {
+        mediaQuery.removeEventListener("change", handleChange);
+      };
+    }
+  }, []);
+  return theme;
+};
+
+
 
 
 
@@ -72,4 +100,4 @@ var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
 
 
 
-exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass;
+exports.__export = __export; exports.switchToMouseMode = switchToMouseMode; exports.switchToTouchMode = switchToTouchMode; exports.initialiseListeners = initialiseListeners; exports.usePressable = usePressable; exports.trackTouch = trackTouch; exports.calculateClass = calculateClass; exports.usePreferredColorScheme = usePreferredColorScheme;

package/dist/{chunk-6Z2ACPNM.mjs → chunk-BQS6YM6U.mjs}

@@ -1,5 +1,14 @@
-// src/styling.ts
-import { createGlobalStyle, css } from "styled-components";
+import {
+  usePreferredColorScheme
+} from "./chunk-E7JSREGM.mjs";
+
+// src/styling.tsx
+import {
+  createGlobalStyle,
+  css,
+  ThemeProvider
+} from "styled-components";
+import { jsx } from "react/jsx-runtime";
 var GlobalStyle = createGlobalStyle`
 body {
   &.touch-mode * {
@@ -7,7 +16,8 @@ body {
   }
 }
 `;
-var THEME = {
+var DARK_THEME = {
+  pageBg: "#333",
   colorGreen: "#98c379",
   colorRed: "#e06c75",
   colorAmber: "#d19a66",
@@ -22,19 +32,64 @@ var THEME = {
   hintRGB: "66, 134, 244",
   hintDark1: "#2a77f3",
   textNormal: "#F3F3F5",
+  textActive: "#ffffff",
   textMuted: "#777777",
+  shadows: {
+    boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3)",
+    textShadow: "0 -1px rgba(0, 0, 0, 0.7)",
+    textShadowActive: "0 -1px rgba(0, 0, 0, 0.4)"
+  },
+  gradients: {
+    button: "linear-gradient(to bottom, #4f5053, #343436)",
+    buttonHover: "linear-gradient(to bottom, #5e6064, #393a3b)",
+    buttonActive: "linear-gradient(to bottom, #242525, #37383a)",
+    buttonPressedHover: "linear-gradient(to bottom, #282929, #414243)",
+    hintPressed: "linear-gradient(to bottom,#2a77f3,#4286f4)"
+  },
   sizingPx: {
     spacing: 15,
     unitHeight: 40
   }
 };
+var LIGHT_THEME = {
+  pageBg: "#f8f9fa",
+  colorGreen: "#22863a",
+  colorRed: "#d73a49",
+  colorAmber: "#b08800",
+  bgDark1: "#e9ecef",
+  bg: "#ffffff",
+  bgLight1: "#f5f5f5",
+  borderDark: "#c7c7c7",
+  borderLight: "#d7d7d7",
+  borderLighter: "#eaecef",
+  borderLighterer: "#f6f8fa",
+  hint: "#4286f4",
+  hintRGB: "0, 92, 197",
+  hintDark1: "#2a77f3",
+  textNormal: "#24292e",
+  textActive: "#202020",
+  textMuted: "#6a737d",
+  shadows: {
+    boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05)",
+    textShadow: "0 1px rgba(255, 255, 255, 0.7)",
+    textShadowActive: "0 1px rgba(255, 255, 255, 0.4)"
+  },
+  gradients: {
+    button: "linear-gradient(to bottom, #e1e4e8, #d1d5da)",
+    buttonHover: "linear-gradient(to bottom, #d1d5da, #c1c6cc)",
+    buttonActive: "linear-gradient(to bottom, #b1b6bc, #d2d6da)",
+    buttonPressedHover: "linear-gradient(to bottom, #a1a6ac, #91969c)",
+    hintPressed: "linear-gradient(to bottom, #438bff, #85b3ff)"
+  },
+  sizingPx: DARK_THEME.sizingPx
+};
 var BaseStyle = createGlobalStyle`
 * {
   box-sizing: border-box;
 }
 
 body {
-  background: #333;
+  background: ${(p) => p.theme.pageBg};
   margin: 0;
   padding: 0;
   font-size: 14px;
@@ -43,8 +98,8 @@ body {
 `;
 var buttonStateNormal = css`
   color: ${(p) => p.theme.textNormal};
-  background: linear-gradient(to bottom, #4f5053, #343436);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  background: ${(p) => p.theme.gradients.button};
+  text-shadow: ${(p) => p.theme.shadows.textShadow};
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.15),
     0 1px 0 0 rgba(0, 0, 0, 0.25);
@@ -52,14 +107,14 @@ var buttonStateNormal = css`
 var buttonStateNormalHover = css`
   color: ${(p) => p.theme.textNormal};
   outline-color: rgba(243, 243, 245, 0.3);
-  background: linear-gradient(to bottom, #5e6064, #393a3b);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  background: ${(p) => p.theme.gradients.buttonHover};
+  text-shadow: ${(p) => p.theme.shadows.textShadow};
 `;
 var buttonStateNormalActive = css`
-  color: #ffffff;
+  color: ${(p) => p.theme.textNormal};
   outline-color: rgba(255, 255, 255, 0.3);
-  background: linear-gradient(to bottom, #242525, #37383a);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+  background: ${(p) => p.theme.gradients.buttonActive};
+  text-shadow: ${(p) => p.theme.shadows.textShadowActive};
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.2),
     0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -72,7 +127,7 @@ var buttonStatePressed = css`
 var buttonStatePressedHover = css`
   ${buttonStateNormalActive}
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
-  background: linear-gradient(to bottom, #282929, #414243);
+  background: ${(p) => p.theme.gradients.buttonPressedHover};
 `;
 var buttonStatePressedActive = buttonStateNormalActive;
 var buttonStateDisabled = css`
@@ -139,10 +194,15 @@ var touchIndicatorTouching = css`
   background-color: rgba(${(p) => p.theme.hintRGB}, 0.2);
   transition: border-color 0s;
 `;
+var PreferredThemeProvider = ({ dark, light, children }) => {
+  const theme = usePreferredColorScheme();
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: theme === "dark" ? dark : light, children });
+};
 
 export {
   GlobalStyle,
-  THEME,
+  DARK_THEME,
+  LIGHT_THEME,
   BaseStyle,
   buttonStateNormal,
   buttonStateNormalHover,
@@ -151,5 +211,6 @@ export {
   buttonDisabled,
   rectButton,
   touchIndicatorNormal,
-  touchIndicatorTouching
+  touchIndicatorTouching,
+  PreferredThemeProvider
 };

package/dist/{chunk-35U577MM.mjs → chunk-E7JSREGM.mjs}

@@ -1,3 +1,12 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/util/index.ts
+import { useEffect, useState as useState2 } from "react";
+
 // src/util/touch.ts
 import { useState } from "react";
 function switchToMouseMode(ev) {
@@ -64,12 +73,31 @@ function trackTouch(touch, move, end) {
 
 // src/util/index.ts
 var calculateClass = (...args) => args.filter((a) => !!a).join(" ");
+var usePreferredColorScheme = () => {
+  const [theme, setTheme] = useState2("light");
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setTheme(mediaQuery.matches ? "dark" : "light");
+      const handleChange = (event) => {
+        setTheme(event.matches ? "dark" : "light");
+      };
+      mediaQuery.addEventListener("change", handleChange);
+      return () => {
+        mediaQuery.removeEventListener("change", handleChange);
+      };
+    }
+  }, []);
+  return theme;
+};
 
 export {
+  __export,
   switchToMouseMode,
   switchToTouchMode,
   initialiseListeners,
   usePressable,
   trackTouch,
-  calculateClass
+  calculateClass,
+  usePreferredColorScheme
 };

package/dist/{chunk-UJVH3PQF.mjs → chunk-MESQQRK3.mjs}

@@ -1,9 +1,7 @@
 import {
+  __export,
   calculateClass
-} from "./chunk-35U577MM.mjs";
-import {
-  __export
-} from "./chunk-7P6ASYW6.mjs";
+} from "./chunk-E7JSREGM.mjs";
 
 // src/components/core/index.ts
 var core_exports = {};

package/dist/{chunk-KNYDA6D6.js → chunk-T3QSZARM.js}

@@ -1,13 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkXEIKOLS2js = require('./chunk-XEIKOLS2.js');
 
-
-var _chunkMLKGABMKjs = require('./chunk-MLKGABMK.js');
+var _chunk7VTNOX5Ojs = require('./chunk-7VTNOX5O.js');
 
 // src/components/core/index.ts
 var core_exports = {};
-_chunkMLKGABMKjs.__export.call(void 0, core_exports, {
+_chunk7VTNOX5Ojs.__export.call(void 0, core_exports, {
   Icon: () => Icon,
   TRANSPARENCY_SVG: () => TRANSPARENCY_SVG,
   TRANSPARENCY_SVG_URI: () => TRANSPARENCY_SVG_URI
@@ -33,7 +31,7 @@ var Span = _styledcomponents.styled.span`
     'wght' 300,
     'GRAD' -25;
 `;
-var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunkXEIKOLS2js.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
+var Icon = ({ icon, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Span, { className: _chunk7VTNOX5Ojs.calculateClass.call(void 0, props.className, ICON_CLASS), ...props, children: icon });
 
 // src/components/core/index.ts
 var TRANSPARENCY_SVG = `

package/dist/{chunk-Y5UYS6EX.js → chunk-WVMAJYGI.js}

@@ -1,5 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/styling.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk7VTNOX5Ojs = require('./chunk-7VTNOX5O.js');
+
+// src/styling.tsx
+
+
+
+
 var _styledcomponents = require('styled-components');
+var _jsxruntime = require('react/jsx-runtime');
 var GlobalStyle = _styledcomponents.createGlobalStyle`
 body {
   &.touch-mode * {
@@ -7,7 +16,8 @@ body {
   }
 }
 `;
-var THEME = {
+var DARK_THEME = {
+  pageBg: "#333",
   colorGreen: "#98c379",
   colorRed: "#e06c75",
   colorAmber: "#d19a66",
@@ -22,19 +32,64 @@ var THEME = {
   hintRGB: "66, 134, 244",
   hintDark1: "#2a77f3",
   textNormal: "#F3F3F5",
+  textActive: "#ffffff",
   textMuted: "#777777",
+  shadows: {
+    boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3)",
+    textShadow: "0 -1px rgba(0, 0, 0, 0.7)",
+    textShadowActive: "0 -1px rgba(0, 0, 0, 0.4)"
+  },
+  gradients: {
+    button: "linear-gradient(to bottom, #4f5053, #343436)",
+    buttonHover: "linear-gradient(to bottom, #5e6064, #393a3b)",
+    buttonActive: "linear-gradient(to bottom, #242525, #37383a)",
+    buttonPressedHover: "linear-gradient(to bottom, #282929, #414243)",
+    hintPressed: "linear-gradient(to bottom,#2a77f3,#4286f4)"
+  },
   sizingPx: {
     spacing: 15,
     unitHeight: 40
   }
 };
+var LIGHT_THEME = {
+  pageBg: "#f8f9fa",
+  colorGreen: "#22863a",
+  colorRed: "#d73a49",
+  colorAmber: "#b08800",
+  bgDark1: "#e9ecef",
+  bg: "#ffffff",
+  bgLight1: "#f5f5f5",
+  borderDark: "#c7c7c7",
+  borderLight: "#d7d7d7",
+  borderLighter: "#eaecef",
+  borderLighterer: "#f6f8fa",
+  hint: "#4286f4",
+  hintRGB: "0, 92, 197",
+  hintDark1: "#2a77f3",
+  textNormal: "#24292e",
+  textActive: "#202020",
+  textMuted: "#6a737d",
+  shadows: {
+    boxShadowInset: "inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05)",
+    textShadow: "0 1px rgba(255, 255, 255, 0.7)",
+    textShadowActive: "0 1px rgba(255, 255, 255, 0.4)"
+  },
+  gradients: {
+    button: "linear-gradient(to bottom, #e1e4e8, #d1d5da)",
+    buttonHover: "linear-gradient(to bottom, #d1d5da, #c1c6cc)",
+    buttonActive: "linear-gradient(to bottom, #b1b6bc, #d2d6da)",
+    buttonPressedHover: "linear-gradient(to bottom, #a1a6ac, #91969c)",
+    hintPressed: "linear-gradient(to bottom, #438bff, #85b3ff)"
+  },
+  sizingPx: DARK_THEME.sizingPx
+};
 var BaseStyle = _styledcomponents.createGlobalStyle`
 * {
   box-sizing: border-box;
 }
 
 body {
-  background: #333;
+  background: ${(p) => p.theme.pageBg};
   margin: 0;
   padding: 0;
   font-size: 14px;
@@ -43,8 +98,8 @@ body {
 `;
 var buttonStateNormal = _styledcomponents.css`
   color: ${(p) => p.theme.textNormal};
-  background: linear-gradient(to bottom, #4f5053, #343436);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  background: ${(p) => p.theme.gradients.button};
+  text-shadow: ${(p) => p.theme.shadows.textShadow};
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.15),
     0 1px 0 0 rgba(0, 0, 0, 0.25);
@@ -52,14 +107,14 @@ var buttonStateNormal = _styledcomponents.css`
 var buttonStateNormalHover = _styledcomponents.css`
   color: ${(p) => p.theme.textNormal};
   outline-color: rgba(243, 243, 245, 0.3);
-  background: linear-gradient(to bottom, #5e6064, #393a3b);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  background: ${(p) => p.theme.gradients.buttonHover};
+  text-shadow: ${(p) => p.theme.shadows.textShadow};
 `;
 var buttonStateNormalActive = _styledcomponents.css`
-  color: #ffffff;
+  color: ${(p) => p.theme.textNormal};
   outline-color: rgba(255, 255, 255, 0.3);
-  background: linear-gradient(to bottom, #242525, #37383a);
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+  background: ${(p) => p.theme.gradients.buttonActive};
+  text-shadow: ${(p) => p.theme.shadows.textShadowActive};
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.2),
     0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -72,7 +127,7 @@ var buttonStatePressed = _styledcomponents.css`
 var buttonStatePressedHover = _styledcomponents.css`
   ${buttonStateNormalActive}
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255,255,255,0.15);
-  background: linear-gradient(to bottom, #282929, #414243);
+  background: ${(p) => p.theme.gradients.buttonPressedHover};
 `;
 var buttonStatePressedActive = buttonStateNormalActive;
 var buttonStateDisabled = _styledcomponents.css`
@@ -139,6 +194,12 @@ var touchIndicatorTouching = _styledcomponents.css`
   background-color: rgba(${(p) => p.theme.hintRGB}, 0.2);
   transition: border-color 0s;
 `;
+var PreferredThemeProvider = ({ dark, light, children }) => {
+  const theme = _chunk7VTNOX5Ojs.usePreferredColorScheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styledcomponents.ThemeProvider, { theme: theme === "dark" ? dark : light, children });
+};
+
+
 
 
 
@@ -152,4 +213,4 @@ var touchIndicatorTouching = _styledcomponents.css`
 
 
 
-exports.GlobalStyle = GlobalStyle; exports.THEME = THEME; exports.BaseStyle = BaseStyle; exports.buttonStateNormal = buttonStateNormal; exports.buttonStateNormalHover = buttonStateNormalHover; exports.buttonStateNormalActive = buttonStateNormalActive; exports.buttonPressed = buttonPressed; exports.buttonDisabled = buttonDisabled; exports.rectButton = rectButton; exports.touchIndicatorNormal = touchIndicatorNormal; exports.touchIndicatorTouching = touchIndicatorTouching;
+exports.GlobalStyle = GlobalStyle; exports.DARK_THEME = DARK_THEME; exports.LIGHT_THEME = LIGHT_THEME; exports.BaseStyle = BaseStyle; exports.buttonStateNormal = buttonStateNormal; exports.buttonStateNormalHover = buttonStateNormalHover; exports.buttonStateNormalActive = buttonStateNormalActive; exports.buttonPressed = buttonPressed; exports.buttonDisabled = buttonDisabled; exports.rectButton = rectButton; exports.touchIndicatorNormal = touchIndicatorNormal; exports.touchIndicatorTouching = touchIndicatorTouching; exports.PreferredThemeProvider = PreferredThemeProvider;

package/dist/components/core/index.js

@@ -2,11 +2,10 @@
 
 
 
-var _chunkKNYDA6D6js = require('../../chunk-KNYDA6D6.js');
-require('../../chunk-XEIKOLS2.js');
-require('../../chunk-MLKGABMK.js');
+var _chunkT3QSZARMjs = require('../../chunk-T3QSZARM.js');
+require('../../chunk-7VTNOX5O.js');
 
 
 
 
-exports.Icon = _chunkKNYDA6D6js.Icon; exports.TRANSPARENCY_SVG = _chunkKNYDA6D6js.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkKNYDA6D6js.TRANSPARENCY_SVG_URI;
+exports.Icon = _chunkT3QSZARMjs.Icon; exports.TRANSPARENCY_SVG = _chunkT3QSZARMjs.TRANSPARENCY_SVG; exports.TRANSPARENCY_SVG_URI = _chunkT3QSZARMjs.TRANSPARENCY_SVG_URI;

package/dist/components/core/index.mjs

@@ -2,9 +2,8 @@ import {
   Icon,
   TRANSPARENCY_SVG,
   TRANSPARENCY_SVG_URI
-} from "../../chunk-UJVH3PQF.mjs";
-import "../../chunk-35U577MM.mjs";
-import "../../chunk-7P6ASYW6.mjs";
+} from "../../chunk-MESQQRK3.mjs";
+import "../../chunk-E7JSREGM.mjs";
 export {
   Icon,
   TRANSPARENCY_SVG,