pixelize-design-library 2.4.2-beta.32 → 2.4.2-beta.34

package/dist/esm/Theme/chakra/componentStyles.js

@@ -9,9 +9,9 @@ import { Tag } from "../../Components/Tag/Tag.styles.js";
 import { Textarea } from "../../Components/InputTextArea/InputTextArea.style.js";
 import { NumberInput } from "../../Components/NumberInput/NumberInput.styles.js";
 import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../tokens/builders/filledSurface.js";
 import { contrastRatio } from "../tokens/builders/color.js";
 import { resolveHoverTint } from "../tokens/builders/outlineRung.js";
-import { solidRung } from "../tokens/builders/solidFillRung.js";
 import { Drawer } from "./Drawer.styles.js";
 import { Menu } from "./Menu.styles.js";
 import { Modal } from "./Modal.styles.js";
@@ -25,6 +25,14 @@ import { Avatar } from "./Avatar.styles.js";
 // math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
 // Chakra's own original fixed rung instead of computing contrast on a color it can't parse.
 const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
+const solidFillStyle = (palette, swatch) => {
+    const rung = solidFillRung(swatch, palette.white);
+    const bg = swatch[rung];
+    return {
+        bg,
+        color: isHexColor(bg) ? labelOnFill(bg, palette.white, palette.black) : swatch[800],
+    };
+};
 // Badge isn't its own component family (no Components/Badge/), so its style config lives here —
 // Chakra's stock `solid` variant hardcodes a white label on a variable fill, same AA gap Tag had.
 const Badge = {
@@ -32,10 +40,7 @@ const Badge = {
         solid: ({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
             const swatch = scaleFor(palette, colorScheme);
-            if (!isHexColor(swatch[500]))
-                return { bg: swatch[500], color: swatch[800] };
-            const bg = swatch[solidRung(swatch, palette.white)];
-            return { bg, color: onFilled(bg, palette.white, palette.black) };
+            return solidFillStyle(palette, swatch);
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
         // colorMode — which this app never toggles (dark mode swaps the palette object instead), so
@@ -87,13 +92,14 @@ const Alert = defineAlertStyles({
     variants: {
         solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
             const palette = paletteOf(theme);
-            const bg = scaleFor(palette, colorScheme)[500];
+            const swatch = scaleFor(palette, colorScheme);
+            const { bg, color } = solidFillStyle(palette, swatch);
             if (!isHexColor(bg))
                 return { container: {} };
             return {
                 container: {
                     [$alertBg.variable]: bg,
-                    [$alertFg.variable]: onFilled(bg, palette.white, palette.black),
+                    [$alertFg.variable]: color,
                 },
             };
         }),
@@ -151,8 +157,9 @@ const Skeleton = {
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
         const palette = paletteOf(theme);
-        const fill = scaleFor(palette, colorScheme)[500];
-        const dot = onFilled(fill, palette.white, palette.black);
+        const swatch = scaleFor(palette, colorScheme);
+        const fill = swatch[solidFillRung(swatch, palette.white)];
+        const dot = labelOnFill(fill, palette.white, palette.black);
         // A browser probe found the checked radio's hover repeating its own resting `fill` —
         // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
         // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;

package/dist/esm/Theme/chakra/createBrandTheme.js

@@ -2,7 +2,7 @@ import { extendTheme } from "@chakra-ui/react";
 import common from "./common.web.js";
 import fonts from "./fonts.web.js";
 import { componentStyles } from "./componentStyles.js";
-import { onFilled } from "../tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../tokens/builders/filledSurface.js";
 import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
 import { focusRingShadow } from "./focusRing.styles.js";
 /**
@@ -82,14 +82,20 @@ export const createBrandTheme = (palette, options = {}) => {
                         // selecting text anywhere (e.g. a table cell) shows a stray white/lavender patch on
                         // the dark canvas. Brand it instead, with WCAG-safe ink via the same `onFilled` math
                         // used for buttons/badges.
-                        "::selection": {
-                            background: palette.primary[500],
-                            color: onFilled(palette.primary[500], palette.white, palette.black),
-                        },
-                        "::-moz-selection": {
-                            background: palette.primary[500],
-                            color: onFilled(palette.primary[500], palette.white, palette.black),
-                        },
+                        "::selection": (() => {
+                            const solid = resolveFilledSurface(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
+                        "::-moz-selection": (() => {
+                            const solid = resolveFilledSurface(palette.primary, palette);
+                            return {
+                                background: solid.fill,
+                                color: solid.color,
+                            };
+                        })(),
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
                         // OS's generic dark gray, not brand-aware.
                         ...globalScrollbarStyles(palette),

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

@@ -0,0 +1,67 @@
+import { contrastRatio } from "./color.js";
+import { AA_NORMAL_TEXT, isDarkCanvas, onFilled } from "./accentText.js";
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
+ * white label stays legible.
+ *
+ * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
+ * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
+ * [400]/[300] in dark.
+ */
+const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+/**
+ * Lightest rung on `scale` that still carries `white` at WCAG AA. Prefers [500] when it already
+ * passes; otherwise walks toward darker rungs. Used for solid fills on buttons, tags, badges and
+ * table status pills so consumers never get black ink on a saturated fill when white is achievable.
+ */
+export const solidFillRung = (scale, white) => {
+    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 = (base, canvas, step) => {
+    const dir = isDarkCanvas(canvas) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
+/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+export const darkerFillRung = (scale, canvas, white, step) => {
+    const base = solidFillRung(scale, white);
+    if (base === 500) {
+        const mode = isDarkCanvas(canvas) ? "dark" : "light";
+        return FILL_STEP_RUNGS[mode][step];
+    }
+    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    return stepped;
+};
+/** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
+export const labelOnFill = (fill, white, black) => onFilled(fill, white, black);
+/**
+ * Consumer-facing helper: given any `ColorScale` (primary, red, semantic.error, …), return the
+ * fill rung and matching ink for solid / hover / active states. Use this whenever you paint a
+ * `bg` from a scale — never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+ */
+export const resolveFilledSurface = (scale, colors) => {
+    const { white, black, backgroundColor } = colors;
+    const canvas = backgroundColor.main;
+    const rung = solidFillRung(scale, white);
+    const fill = scale[rung];
+    const hoverRung = darkerFillRung(scale, canvas, white, 0);
+    const hoverFill = scale[hoverRung];
+    const activeRung = darkerFillRung(scale, canvas, white, 1);
+    const activeFill = scale[activeRung];
+    return {
+        rung,
+        fill,
+        color: labelOnFill(fill, white, black),
+        hoverRung,
+        hoverFill,
+        hoverColor: labelOnFill(hoverFill, white, black),
+        activeRung,
+        activeFill,
+        activeColor: labelOnFill(activeFill, white, black),
+    };
+};

package/dist/esm/Utils/table.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef } from "react";
 import { DEFAULT_BLACK, DEFAULT_WHITE, isDarkCanvas, onFilled, } from "../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../Theme/tokens/builders/filledSurface.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.
@@ -72,11 +73,13 @@ export function buildTablePalette(theme) {
     ];
     return scales.map((scale) => {
         const tone = resolveStatusTone(scale, mode);
+        const solidRung = solidFillRung(scale, c.white);
+        const solid = scale[solidRung];
         return {
-            solid: scale[500],
+            solid,
             soft: tone.bg,
             text: tone.fg,
-            onSolid: onFilled(scale[500], c.white, c.black),
+            onSolid: labelOnFill(solid, c.white, c.black),
         };
     });
 }

package/dist/esm/index.js

@@ -143,6 +143,9 @@ export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveS
 // 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";
+// Filled-surface helpers — use whenever you paint a `bg` from a ColorScale (buttons, badges,
+// chips, alerts). Never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+export { solidFillRung, darkerFillRung, labelOnFill, resolveFilledSurface, } from "./Theme/tokens/builders/filledSurface.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
 // primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha

package/dist/index.d.ts

@@ -123,6 +123,8 @@ export type { StatusTone } from "./Theme/tokens/builders/statusTone";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, FocusRingTokens, } 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 { solidFillRung, darkerFillRung, labelOnFill, resolveFilledSurface, } from "./Theme/tokens/builders/filledSurface";
+export type { FilledSurface } from "./Theme/tokens/builders/filledSurface";
 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";
 export type { SelectV2Props, SelectV2Size, OptionProp as SelectV2Option } from "./Components/SelectV2/SelectV2Props";

package/dist/index.js

@@ -43,7 +43,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.AppSwitcher = 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.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = exports.Switch = exports.Skeletons = exports.ScrollbarBox = 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 = exports.UserDetails = void 0;
 exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = exports.listRowBackgrounds = 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 = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
-exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = 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.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = void 0;
+exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = 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 = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -337,6 +337,13 @@ Object.defineProperty(exports, "accentTextOnCanvas", { enumerable: true, get: fu
 Object.defineProperty(exports, "pickAccentText", { enumerable: true, get: function () { return accentText_1.pickAccentText; } });
 Object.defineProperty(exports, "AA_NORMAL_TEXT", { enumerable: true, get: function () { return accentText_1.AA_NORMAL_TEXT; } });
 Object.defineProperty(exports, "DARK_CANVAS_LUMINANCE", { enumerable: true, get: function () { return accentText_1.DARK_CANVAS_LUMINANCE; } });
+// Filled-surface helpers — use whenever you paint a `bg` from a ColorScale (buttons, badges,
+// chips, alerts). Never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+var filledSurface_1 = require("./Theme/tokens/builders/filledSurface");
+Object.defineProperty(exports, "solidFillRung", { enumerable: true, get: function () { return filledSurface_1.solidFillRung; } });
+Object.defineProperty(exports, "darkerFillRung", { enumerable: true, get: function () { return filledSurface_1.darkerFillRung; } });
+Object.defineProperty(exports, "labelOnFill", { enumerable: true, get: function () { return filledSurface_1.labelOnFill; } });
+Object.defineProperty(exports, "resolveFilledSurface", { enumerable: true, get: function () { return filledSurface_1.resolveFilledSurface; } });
 // 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
 // primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha

package/package.json

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

package/dist/Theme/tokens/builders/solidFillRung.d.ts

@@ -1,4 +0,0 @@
-import type { ColorScale, BrandScale } from "../types";
-export type Rung = keyof ColorScale;
-export declare const solidRung: (scale: ColorScale | BrandScale, white: string) => Rung;
-export declare const darkerFillRung: (scale: ColorScale | BrandScale, white: string, isDark: boolean, step: 0 | 1) => Rung;

package/dist/Theme/tokens/builders/solidFillRung.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkerFillRung = exports.solidRung = void 0;
-const color_1 = require("./color");
-const AA_NORMAL_TEXT = 4.5;
-const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
-const hasOpacity = (scale) => "opacity" in scale;
-// Brand scales keep [500]; utility scales (red, green, …) step to the closest passing rung.
-const solidRung = (scale, white) => {
-    if (hasOpacity(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);
-};
-exports.solidRung = solidRung;
-const steppedRung = (base, step, isDark) => {
-    const dir = isDark ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
-};
-const darkerFillRung = (scale, white, isDark, step) => {
-    const base = (0, exports.solidRung)(scale, white);
-    if (base === 500) {
-        const mode = isDark ? "dark" : "light";
-        return FILL_STEP_RUNGS[mode][step];
-    }
-    return steppedRung(base, step === 0 ? 1 : 2, isDark);
-};
-exports.darkerFillRung = darkerFillRung;

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

@@ -1,28 +0,0 @@
-import { contrastRatio } from "./color.js";
-const AA_NORMAL_TEXT = 4.5;
-const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
-const hasOpacity = (scale) => "opacity" in scale;
-// Brand scales keep [500]; utility scales (red, green, …) step to the closest passing rung.
-export const solidRung = (scale, white) => {
-    if (hasOpacity(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 = (base, step, isDark) => {
-    const dir = isDark ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
-};
-export const darkerFillRung = (scale, white, isDark, step) => {
-    const base = solidRung(scale, white);
-    if (base === 500) {
-        const mode = isDark ? "dark" : "light";
-        return FILL_STEP_RUNGS[mode][step];
-    }
-    return steppedRung(base, step === 0 ? 1 : 2, isDark);
-};