@frontify/guideline-blocks-settings 2.0.0 → 2.0.2

package/dist/utilities/color/getReadableColor.es.js

@@ -1,14 +1,14 @@
-import { TinyColor as n, readability as c } from "@ctrl/tinycolor";
+import { TinyColor as n, readability as d } from "@ctrl/tinycolor";
 import { toShortRgba as i } from "./toShortRgba.es.js";
-const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((t) => r == null ? void 0 : r.hasOwnProperty(t)), a = (r, e) => {
-  const t = s(r) ? i(r) : r, p = s(e) ? i(e) : e;
+const s = (e) => typeof e == "object" && ["red", "green", "blue"].every((t) => e?.hasOwnProperty(t)), y = (e, r) => {
+  const t = s(e) ? i(e) : e, a = s(r) ? i(r) : r;
   let o = new n(t);
-  const d = new n(p);
-  for (; c(o, d) < 4.5; )
+  const p = new n(a);
+  for (; d(o, p) < 4.5; )
     o = o.darken(1);
   return o.toRgbString();
 };
 export {
-  a as getReadableColor
+  y as getReadableColor
 };
 //# sourceMappingURL=getReadableColor.es.js.map

package/dist/utilities/color/getReadableColor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n        ? toShortRgba(backgroundColor)\n        : (backgroundColor as ColorInput);\n    let parsedTextColor = new TinyColor(inputTextColor);\n    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);\n\n    // darken the text color until readability is good\n    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n        parsedTextColor = parsedTextColor.darken(1);\n    }\n\n    return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","TinyColor","parsedBackgroundColor","readability"],"mappings":";;AAeA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACP,MAAII,IAAkB,IAAIC,EAAUJ,CAAc;AAClD,QAAMK,IAAwB,IAAID,EAAUF,CAAoB;AAGhE,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACzD,IAAAF,IAAkBA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB,YAAA;AAC3B;"}
+{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n    const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n    const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n        ? toShortRgba(backgroundColor)\n        : (backgroundColor as ColorInput);\n    let parsedTextColor = new TinyColor(inputTextColor);\n    const parsedBackgroundColor = new TinyColor(inputBackgroundColor);\n\n    // darken the text color until readability is good\n    while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n        parsedTextColor = parsedTextColor.darken(1);\n    }\n\n    return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","TinyColor","parsedBackgroundColor","readability"],"mappings":";;AAeA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,GAAO,eAAeC,CAAC,CAAC,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACP,MAAII,IAAkB,IAAIC,EAAUJ,CAAc;AAClD,QAAMK,IAAwB,IAAID,EAAUF,CAAoB;AAGhE,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACzD,IAAAF,IAAkBA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB,YAAA;AAC3B;"}

package/dist/utilities/color/isDark.es.js

@@ -1,10 +1,10 @@
 import { TinyColor as n } from "@ctrl/tinycolor";
 import { toShortRgba as s } from "./toShortRgba.es.js";
-const i = (r) => typeof r == "object" && ["red", "green", "blue"].every((o) => r == null ? void 0 : r.hasOwnProperty(o)), y = (r, e) => {
-  const o = i(r) ? s(r) : r, t = new n(o);
-  return e ? t.getBrightness() < e : t.isDark() || t.getAlpha() > 0.25 && t.getAlpha() < 1;
+const i = (r) => typeof r == "object" && ["red", "green", "blue"].every((o) => r?.hasOwnProperty(o)), g = (r, t) => {
+  const o = i(r) ? s(r) : r, e = new n(o);
+  return t ? e.getBrightness() < t : e.isDark() || e.getAlpha() > 0.25 && e.getAlpha() < 1;
 };
 export {
-  y as isDark
+  g as isDark
 };
 //# sourceMappingURL=isDark.es.js.map

package/dist/utilities/color/isDark.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n    const parsedColor = new TinyColor(inputColor);\n\n    if (threshold) {\n        return parsedColor.getBrightness() < threshold;\n    }\n\n    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","TinyColor"],"mappings":";;AAeA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAc,IAAIC,EAAUH,CAAU;AAE5C,SAAID,IACOG,EAAY,kBAAkBH,IAGlCG,EAAY,YAAaA,EAAY,aAAa,QAAQA,EAAY,SAAA,IAAa;AAC9F;"}
+{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { type Color } from '@frontify/sidebar-settings';\n\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n    const requiredKeys = ['red', 'green', 'blue'];\n    return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n    const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n    const parsedColor = new TinyColor(inputColor);\n\n    if (threshold) {\n        return parsedColor.getBrightness() < threshold;\n    }\n\n    return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","TinyColor"],"mappings":";;AAeA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,GAAO,eAAeC,CAAC,CAAC,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAc,IAAIC,EAAUH,CAAU;AAE5C,SAAID,IACOG,EAAY,kBAAkBH,IAGlCG,EAAY,YAAaA,EAAY,aAAa,QAAQA,EAAY,SAAA,IAAa;AAC9F;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/guideline-blocks-settings",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Provides types and helpers for the guideline block development",
   "author": "Frontify Developers <developers@frontify.com>",
   "repository": {
@@ -42,41 +42,41 @@
     "@react-aria/focus": "^3.21.3",
     "@react-stately/overlays": "^3.6.21",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@frontify/sidebar-settings": "^0.10.8"
+    "@frontify/sidebar-settings": "^0.10.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
+    "@babel/core": "^7.29.0",
     "@frontify/eslint-config-react": "1.0.8",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@types/sinon": "^21.0.0",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/ui": "^3.2.4",
-    "autoprefixer": "^10.4.22",
-    "cypress": "^15.7.1",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/ui": "^4.0.18",
+    "autoprefixer": "^10.4.24",
+    "cypress": "^15.10.0",
     "cypress-real-events": "^1.15.0",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-notice": "^1.0.0",
-    "happy-dom": "^20.0.11",
+    "happy-dom": "^20.5.0",
     "mitt": "^3.0.1",
-    "msw": "^1.3.5",
+    "msw": "^2.12.7",
     "postcss": "^8.5.6",
     "prettier": "^3.7.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.53.3",
-    "sinon": "21.0.0",
+    "rollup": "^4.57.1",
+    "sinon": "21.0.1",
     "tailwindcss": "^3.4.18",
     "typescript": "^5.9.3",
-    "vite": "^5.4.21",
-    "vite-plugin-dts": "^3.9.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-externalize-deps": "^0.10.0",
     "vite-plugin-externals": "^0.6.2",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "build": "vite build",