@alsha-research/picaso-ui 0.0.1 → 0.0.12
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/index.cjs +20 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +23 -23
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +20 -10
- package/dist/index.js.map +1 -1
- package/package.json +3 -6
package/dist/index.d.cts
CHANGED
|
@@ -1260,7 +1260,7 @@ interface ThemeProviderProps {
|
|
|
1260
1260
|
defaultColor?: string;
|
|
1261
1261
|
/**
|
|
1262
1262
|
* localStorage key used to remember the user's choice. Pass `null` to turn
|
|
1263
|
-
* persistence off. Defaults to "
|
|
1263
|
+
* persistence off. Defaults to "picaso-ui-theme".
|
|
1264
1264
|
*/
|
|
1265
1265
|
storageKey?: string | null;
|
|
1266
1266
|
/** CSP nonce for the injected <style> element. */
|
|
@@ -1330,7 +1330,7 @@ declare const ThemeModeSwitch: {
|
|
|
1330
1330
|
interface ThemeScriptProps {
|
|
1331
1331
|
/** Must match `ThemeProvider`'s `defaultMode`. Defaults to "system". */
|
|
1332
1332
|
defaultMode?: ThemeMode;
|
|
1333
|
-
/** Must match `ThemeProvider`'s `storageKey`. Defaults to "
|
|
1333
|
+
/** Must match `ThemeProvider`'s `storageKey`. Defaults to "picaso-ui-theme". Pass `null` if persistence is off. */
|
|
1334
1334
|
storageKey?: string | null;
|
|
1335
1335
|
/** CSP nonce for the inline script. */
|
|
1336
1336
|
nonce?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1260,7 +1260,7 @@ interface ThemeProviderProps {
|
|
|
1260
1260
|
defaultColor?: string;
|
|
1261
1261
|
/**
|
|
1262
1262
|
* localStorage key used to remember the user's choice. Pass `null` to turn
|
|
1263
|
-
* persistence off. Defaults to "
|
|
1263
|
+
* persistence off. Defaults to "picaso-ui-theme".
|
|
1264
1264
|
*/
|
|
1265
1265
|
storageKey?: string | null;
|
|
1266
1266
|
/** CSP nonce for the injected <style> element. */
|
|
@@ -1330,7 +1330,7 @@ declare const ThemeModeSwitch: {
|
|
|
1330
1330
|
interface ThemeScriptProps {
|
|
1331
1331
|
/** Must match `ThemeProvider`'s `defaultMode`. Defaults to "system". */
|
|
1332
1332
|
defaultMode?: ThemeMode;
|
|
1333
|
-
/** Must match `ThemeProvider`'s `storageKey`. Defaults to "
|
|
1333
|
+
/** Must match `ThemeProvider`'s `storageKey`. Defaults to "picaso-ui-theme". Pass `null` if persistence is off. */
|
|
1334
1334
|
storageKey?: string | null;
|
|
1335
1335
|
/** CSP nonce for the inline script. */
|
|
1336
1336
|
nonce?: string;
|
package/dist/index.js
CHANGED
|
@@ -7855,7 +7855,7 @@ var THEME_SHADES = [
|
|
|
7855
7855
|
900
|
|
7856
7856
|
];
|
|
7857
7857
|
var THEME_ANCHOR_SHADE = 600;
|
|
7858
|
-
var THEME_MODE_ATTRIBUTE = "data-
|
|
7858
|
+
var THEME_MODE_ATTRIBUTE = "data-picaso-ui-mode";
|
|
7859
7859
|
var isThemeMode = (value) => value === "light" || value === "dark" || value === "system";
|
|
7860
7860
|
var themeModeStorageKey = (storageKey) => `${storageKey}-mode`;
|
|
7861
7861
|
var HEX_RE2 = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
@@ -7873,7 +7873,9 @@ var hexToRgb = (hex) => {
|
|
|
7873
7873
|
const n = parseInt(hex.slice(1), 16);
|
|
7874
7874
|
return [n >> 16 & 255, n >> 8 & 255, n & 255];
|
|
7875
7875
|
};
|
|
7876
|
-
var rgbToHex = ([r, g, b]) => `#${[r, g, b].map(
|
|
7876
|
+
var rgbToHex = ([r, g, b]) => `#${[r, g, b].map(
|
|
7877
|
+
(v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")
|
|
7878
|
+
).join("")}`;
|
|
7877
7879
|
var mix = (from, to, amount) => [
|
|
7878
7880
|
from[0] + (to[0] - from[0]) * amount,
|
|
7879
7881
|
from[1] + (to[1] - from[1]) * amount,
|
|
@@ -7897,7 +7899,8 @@ var SHADE_AMOUNT = {
|
|
|
7897
7899
|
};
|
|
7898
7900
|
var generateScale = (hex) => {
|
|
7899
7901
|
const base = normalizeHex2(hex);
|
|
7900
|
-
if (!base)
|
|
7902
|
+
if (!base)
|
|
7903
|
+
throw new Error(`generateScale: "${hex}" is not a valid hex colour`);
|
|
7901
7904
|
const rgb = hexToRgb(base);
|
|
7902
7905
|
const scale = {};
|
|
7903
7906
|
for (const shade of THEME_SHADES) {
|
|
@@ -7950,8 +7953,10 @@ var generateDarkScale = (scale) => {
|
|
|
7950
7953
|
for (const shade of THEME_SHADES) {
|
|
7951
7954
|
const keep = DARK_TINT_KEEP[shade];
|
|
7952
7955
|
const lighten = DARK_LIGHTEN[shade];
|
|
7953
|
-
if (keep !== void 0)
|
|
7954
|
-
|
|
7956
|
+
if (keep !== void 0)
|
|
7957
|
+
out[shade] = rgbToHex(mix(DARK_SURFACE, brand, keep));
|
|
7958
|
+
else if (lighten !== void 0)
|
|
7959
|
+
out[shade] = rgbToHex(mix(brand, WHITE, lighten));
|
|
7955
7960
|
else out[shade] = scale[shade];
|
|
7956
7961
|
}
|
|
7957
7962
|
return out;
|
|
@@ -7977,7 +7982,10 @@ var readStored = (key2) => {
|
|
|
7977
7982
|
const parsed = JSON.parse(raw);
|
|
7978
7983
|
const color = typeof parsed.color === "string" ? normalizeHex2(parsed.color) : null;
|
|
7979
7984
|
if (!color) return null;
|
|
7980
|
-
return {
|
|
7985
|
+
return {
|
|
7986
|
+
color,
|
|
7987
|
+
scale: isThemeScale(parsed.scale) ? parsed.scale : generateScale(color)
|
|
7988
|
+
};
|
|
7981
7989
|
} catch {
|
|
7982
7990
|
return null;
|
|
7983
7991
|
}
|
|
@@ -7992,7 +8000,7 @@ var writeStored = (key2, state) => {
|
|
|
7992
8000
|
var ThemeProvider = ({
|
|
7993
8001
|
children,
|
|
7994
8002
|
defaultColor,
|
|
7995
|
-
storageKey = "
|
|
8003
|
+
storageKey = "picaso-ui-theme",
|
|
7996
8004
|
nonce,
|
|
7997
8005
|
defaultMode = "system"
|
|
7998
8006
|
}) => {
|
|
@@ -8023,7 +8031,9 @@ var ThemeProvider = ({
|
|
|
8023
8031
|
useIsomorphicLayoutEffect(() => {
|
|
8024
8032
|
if (!storageKey) return;
|
|
8025
8033
|
try {
|
|
8026
|
-
const saved = window.localStorage.getItem(
|
|
8034
|
+
const saved = window.localStorage.getItem(
|
|
8035
|
+
themeModeStorageKey(storageKey)
|
|
8036
|
+
);
|
|
8027
8037
|
if (isThemeMode(saved)) setModeState(saved);
|
|
8028
8038
|
} catch {
|
|
8029
8039
|
}
|
|
@@ -8072,7 +8082,7 @@ var ThemeProvider = ({
|
|
|
8072
8082
|
return /* @__PURE__ */ React53.createElement(ThemeContext.Provider, { value }, state && /* @__PURE__ */ React53.createElement(
|
|
8073
8083
|
"style",
|
|
8074
8084
|
{
|
|
8075
|
-
"data-
|
|
8085
|
+
"data-picaso-ui-theme": "",
|
|
8076
8086
|
nonce,
|
|
8077
8087
|
dangerouslySetInnerHTML: { __html: themeToCss(state.scale) }
|
|
8078
8088
|
}
|
|
@@ -8252,7 +8262,7 @@ var ThemeModeSwitch_default = ThemeModeSwitch;
|
|
|
8252
8262
|
import React56 from "react";
|
|
8253
8263
|
var ThemeScript = ({
|
|
8254
8264
|
defaultMode = "system",
|
|
8255
|
-
storageKey = "
|
|
8265
|
+
storageKey = "picaso-ui-theme",
|
|
8256
8266
|
nonce
|
|
8257
8267
|
}) => {
|
|
8258
8268
|
const read = storageKey ? `var s=localStorage.getItem(${JSON.stringify(themeModeStorageKey(storageKey))});if(s==="light"||s==="dark"||s==="system")m=s;` : "";
|