pixelize-design-library 2.4.2-beta.21 → 2.4.2-beta.23

package/dist/Components/Button/Button.styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 /**
  * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
@@ -30,9 +31,34 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
  * ~3.2 contrast.
  */
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const AA_NORMAL_TEXT = 4.5;
+// Semantic scales (red/green) carry no opacity ramp; brand scales do and keep their own [500].
+const solidRung = (theme, colorScheme) => {
+    const scale = theme.colors[colorScheme];
+    const white = theme.colors.white;
+    if ("opacity" in scale)
+        return 500;
+    if ((0, color_1.contrastRatio)(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
+};
+const steppedRung = (theme, base, step) => {
+    const dir = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    var _a;
+    const scale = theme.colors[colorScheme];
+    const base = solidRung(theme, colorScheme);
+    if (base === 500) {
+        const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
+        return scale[FILL_STEP_RUNGS[mode][step]];
+    }
+    return (_a = scale[steppedRung(theme, base, step === 0 ? 1 : 2)]) !== null && _a !== void 0 ? _a : scale[base];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, accentText_1.onFilled)(fill, theme.colors.white, theme.colors.black);
@@ -49,7 +75,7 @@ exports.Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
+            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);

package/dist/esm/Components/Button/Button.styles.js

@@ -1,4 +1,5 @@
 import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { contrastRatio } from "../../Theme/tokens/builders/color.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 /**
  * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
@@ -27,9 +28,34 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
  * ~3.2 contrast.
  */
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const AA_NORMAL_TEXT = 4.5;
+// Semantic scales (red/green) carry no opacity ramp; brand scales do and keep their own [500].
+const solidRung = (theme, colorScheme) => {
+    const scale = theme.colors[colorScheme];
+    const white = theme.colors.white;
+    if ("opacity" in scale)
+        return 500;
+    if (contrastRatio(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && contrastRatio(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => contrastRatio(scale[a], white) <= contrastRatio(scale[b], white) ? a : b);
+};
+const steppedRung = (theme, base, step) => {
+    const dir = isDarkCanvas(theme.colors.backgroundColor.main) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    var _a;
+    const scale = theme.colors[colorScheme];
+    const base = solidRung(theme, colorScheme);
+    if (base === 500) {
+        const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
+        return scale[FILL_STEP_RUNGS[mode][step]];
+    }
+    return (_a = scale[steppedRung(theme, base, step === 0 ? 1 : 2)]) !== null && _a !== void 0 ? _a : scale[base];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => onFilled(fill, theme.colors.white, theme.colors.black);
@@ -46,7 +72,7 @@ export const Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
+            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.21",
+  "version": "2.4.2-beta.23",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",
@@ -31,9 +31,13 @@
     "README.md"
   ],
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fontsource-variable/inter": "^5.2.8",
     "@hello-pangea/dnd": "^18.0.1",
     "date-fns": "^3.6.0",
+    "framer-motion": "^10.18.0",
     "jodit-react": "^5.2.38",
     "lucide-react": "^0.487.0",
     "react-apexcharts": "^1.4.1",
@@ -160,8 +164,6 @@
     "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },