pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.2

package/dist/esm/Theme/tokens/builders/statusTone.js

@@ -16,8 +16,8 @@ export function resolveStatusTone(scale, mode) {
     const edgeSeed = mode === "dark" ? scale[400] : scale[300];
     return {
         bg,
-        fg: liftToContrast(inkSeed, bg, mode, AA_NORMAL_TEXT),
-        border: liftToContrast(edgeSeed, bg, mode, AA_NON_TEXT),
+        fg: liftToContrast(inkSeed, bg, AA_NORMAL_TEXT),
+        border: liftToContrast(edgeSeed, bg, AA_NON_TEXT),
     };
 }
 /**
@@ -26,8 +26,7 @@ export function resolveStatusTone(scale, mode) {
  * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
  */
 export function resolveAvatarFill(hex, target = AA_NORMAL_TEXT) {
-    // "light" walks downward in lightness — i.e. darken until white ink clears the bar.
-    return liftToContrast(hex, "#ffffff", "light", target);
+    return liftToContrast(hex, "#ffffff", target);
 }
 /**
  * Hue set for generated avatars. Values are seeds, not final fills — always pass them through

package/dist/esm/Theme/tokens/builders/surfaceRungs.js

@@ -0,0 +1,33 @@
+import { contrastRatio } from "./color.js";
+import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
+import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
+import { SEMANTIC_TONES } from "./semanticText.js";
+export const namedSurfaces = (palette) => [
+    ...Object.values(palette.backgroundColor),
+    palette.background[50],
+    palette.table.hover[500],
+];
+/** The surface an ink is closest to — clearing it clears every other one. */
+export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => contrastRatio(ink, s) < contrastRatio(ink, worst) ? s : worst);
+// Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
+export function withSurfaceRungs(palette) {
+    const surfaces = namedSurfaces(palette);
+    const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
+    const semanticText = SEMANTIC_TONES.reduce((acc, tone) => {
+        acc[tone] = lift(palette.semanticText[tone], AA_NORMAL_TEXT);
+        return acc;
+    }, {});
+    return {
+        ...palette,
+        textMuted: lift(palette.textMuted, AA_NORMAL_TEXT),
+        accentText: pickAccentText(palette.primary, hardestSurface(palette.accentText, surfaces)),
+        semanticText,
+        text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
+        header: { ...palette.header, 500: lift(palette.header[500], AA_NORMAL_TEXT) },
+        placeholder: {
+            ...palette.placeholder,
+            500: lift(palette.placeholder[500], AA_NORMAL_TEXT),
+        },
+        boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], AA_NON_TEXT) },
+    };
+}

package/dist/esm/Theme/useCustomTheme.js

@@ -1,4 +1,7 @@
 import { useTheme as useChakraTheme } from "@chakra-ui/react";
+import { assertPixelizePalette } from "./assertPalette.js";
 export const useCustomTheme = () => {
-    return useChakraTheme();
+    const theme = useChakraTheme();
+    assertPixelizePalette(theme);
+    return theme;
 };

package/dist/esm/Utils/table.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { onFilled } from "../Theme/tokens/builders/accentText.js";
+import { DEFAULT_BLACK, DEFAULT_WHITE, isDarkCanvas, onFilled, } from "../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../Theme/tokens/builders/statusTone.js";
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
 // collator is orders of magnitude dearer than using one.
 const COLLATOR = new Intl.Collator(undefined, {
@@ -53,33 +54,31 @@ export function SortMultiColumnData(data, sortConfig) {
     });
 }
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
-const FALLBACK_SOLID = "#8B3FC8";
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export function buildTablePalette(theme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
-    const white = c.white || "#FFFFFF";
-    const black = c.black || "#000000";
-    const bases = [
-        (_b = c.primary) === null || _b === void 0 ? void 0 : _b[500],
-        (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500],
-        (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.info) === null || _f === void 0 ? void 0 : _f[500],
-        (_h = (_g = c.semantic) === null || _g === void 0 ? void 0 : _g.warning) === null || _h === void 0 ? void 0 : _h[500],
-        (_j = c.teal) === null || _j === void 0 ? void 0 : _j[500],
-        (_k = c.blue) === null || _k === void 0 ? void 0 : _k[500],
-        (_l = c.pink) === null || _l === void 0 ? void 0 : _l[500],
-        (_o = (_m = c.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500],
-        (_p = c.orange) === null || _p === void 0 ? void 0 : _p[500],
-        (_q = c.purple) === null || _q === void 0 ? void 0 : _q[500],
+    const c = theme.colors;
+    const mode = isDarkCanvas(c.backgroundColor.main) ? "dark" : "light";
+    const scales = [
+        c.primary,
+        c.semantic.success,
+        c.semantic.info,
+        c.semantic.warning,
+        c.teal,
+        c.blue,
+        c.pink,
+        c.semantic.error,
+        c.orange,
+        c.purple,
     ];
-    const list = bases.filter(Boolean);
-    const fallback = [FALLBACK_SOLID];
-    return (list.length ? list : fallback).map((solid) => ({
-        solid,
-        soft: withAlpha(solid, "22"),
-        text: solid,
-        onSolid: onFilled(solid, white, black),
-    }));
+    return scales.map((scale) => {
+        const tone = resolveStatusTone(scale, mode);
+        return {
+            solid: scale[500],
+            soft: tone.bg,
+            text: tone.fg,
+            onSolid: onFilled(scale[500], c.white, c.black),
+        };
+    });
 }
 const hashKey = (value) => {
     const s = String(value);
@@ -88,22 +87,15 @@ const hashKey = (value) => {
         h = (h * 31 + s.charCodeAt(i)) >>> 0;
     return h;
 };
-/**
- * Pick a deterministic palette color for a value, with optional override hex.
- *
- * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
- * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
- * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
- */
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
 export function pickTableColor(value, palette, override, theme) {
-    var _a, _b;
-    const white = ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white) || "#FFFFFF";
-    const black = ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black) || "#000000";
+    const white = theme ? theme.colors.white : DEFAULT_WHITE;
+    const black = theme ? theme.colors.black : DEFAULT_BLACK;
     if (override) {
         return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: onFilled(override, white, black) };
     }
     if (!palette.length) {
-        return { solid: FALLBACK_SOLID, soft: withAlpha(FALLBACK_SOLID, "22"), text: FALLBACK_SOLID, onSolid: onFilled(FALLBACK_SOLID, white, black) };
+        throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
     }
     return palette[hashKey(value) % palette.length];
 }

package/dist/esm/index.js

@@ -128,6 +128,7 @@ export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveS
 // against any canvas/fill a palette produces. Pure and dependency-free — consumers building
 // custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
 // of re-deriving contrast math themselves.
+export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient.js";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText.js";
 // Pure color math backing the helpers above (and `buildDarkPalette`) — no Chakra/React/DOM
 // dependency, safe for the mobile port. `relativeLuminance`/`contrastRatio` are the WCAG 2.1

package/dist/index.d.ts

@@ -112,6 +112,7 @@ export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/bu
 export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone";
 export type { StatusTone } from "./Theme/tokens/builders/statusTone";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, } from "./Theme/tokens/types";
+export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color";
 export type { Rgb, Hsl } from "./Theme/tokens/builders/color";

package/dist/index.js

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
-exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = void 0;
-exports.contrastRatio = exports.relativeLuminance = void 0;
+exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = void 0;
+exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -292,6 +292,13 @@ Object.defineProperty(exports, "resolveStatusTone", { enumerable: true, get: fun
 // against any canvas/fill a palette produces. Pure and dependency-free — consumers building
 // custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
 // of re-deriving contrast math themselves.
+var planPillGradient_1 = require("./Components/PlanPill/planPillGradient");
+Object.defineProperty(exports, "statusGradient", { enumerable: true, get: function () { return planPillGradient_1.statusGradient; } });
+Object.defineProperty(exports, "inkSafeGradient", { enumerable: true, get: function () { return planPillGradient_1.inkSafeGradient; } });
+Object.defineProperty(exports, "chipFill", { enumerable: true, get: function () { return planPillGradient_1.chipFill; } });
+Object.defineProperty(exports, "chipBorder", { enumerable: true, get: function () { return planPillGradient_1.chipBorder; } });
+Object.defineProperty(exports, "ACCENT_GRADIENT", { enumerable: true, get: function () { return planPillGradient_1.ACCENT_GRADIENT; } });
+Object.defineProperty(exports, "STATUS_INK", { enumerable: true, get: function () { return planPillGradient_1.STATUS_INK; } });
 var accentText_1 = require("./Theme/tokens/builders/accentText");
 Object.defineProperty(exports, "isDarkCanvas", { enumerable: true, get: function () { return accentText_1.isDarkCanvas; } });
 Object.defineProperty(exports, "onFilled", { enumerable: true, get: function () { return accentText_1.onFilled; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.0",
+  "version": "2.4.2-beta.2",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",