@pega/cosmos-react-core 7.0.0-build.8.0 → 7.0.0-build.9.0

package/lib/styles/utils.d.ts

@@ -1,5 +1,11 @@
 import type { StyledConfig } from 'styled-components';
 import type { ContrastScores } from 'polished/lib/types/color';
+declare const wcagContrast: Record<keyof ContrastScores | 'AANonText', number>;
+interface ContrastOptions {
+    mode?: 'light' | 'dark' | 'both';
+    level?: keyof typeof wcagContrast | number;
+}
+export declare const readableColor: (color: string, { mode, level }?: ContrastOptions) => string;
 export declare const getHoverColors: (color: string) => {
     background: string | undefined;
     foreground: string | undefined;
@@ -8,11 +14,7 @@ export declare const getActiveColors: (color: string) => {
     background: string | undefined;
     foreground: string | undefined;
 };
-declare const wcagContrast: Record<keyof ContrastScores | 'AANonText', number>;
-export declare const readableHue: (color1: string, color2: string, { mode, level }?: {
-    mode?: "both" | "dark" | "light" | undefined;
-    level?: number | keyof ContrastScores | "AANonText" | undefined;
-}) => string;
+export declare const readableHue: (color1: string, color2: string, { mode, level }?: ContrastOptions) => string;
 export declare const omitProps: <O extends object = Record<PropertyKey, unknown>>(prop: keyof O, ...props: (keyof O)[]) => StyledConfig<O>;
 export type FontSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 export declare const calculateFontSize: (baseFontSize: string, baseFontScale: string | number) => Record<FontSize, string>;

package/lib/styles/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAoB/D,eAAO,MAAM,cAAc,UAAW,MAAM;;;CAE3C,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,MAAM;;;CAE5C,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,EAAE,MAAM,CASpE,CAAC;AAEF,eAAO,MAAM,WAAW,WACd,MAAM,UACN,MAAM;;;MAKb,MAqDF,CAAC;AAEF,eAAO,MAAM,SAAS,4GAIpB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AAWrE,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,iBAAiB,MAAM,GAAG,MAAM,6BAkBrF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK/D,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,EAAE,MAAM,CASpE,CAAC;AAEF,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,OAAO,YAAY,GAAG,MAAM,CAAC;CAC5C;AAED,eAAO,MAAM,aAAa,UACjB,MAAM,oBACqB,eAAe,KAChD,MAYF,CAAC;AAiBF,eAAO,MAAM,cAAc,UAAW,MAAM;;;CAE3C,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,MAAM;;;CAE5C,CAAC;AAEF,eAAO,MAAM,WAAW,WACd,MAAM,UACN,MAAM,oBACmB,eAAe,KAC/C,MAqDF,CAAC;AAEF,eAAO,MAAM,SAAS,4GAIpB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AAWrE,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,iBAAiB,MAAM,GAAG,MAAM,6BAkBrF,CAAC"}

package/lib/styles/utils.js

@@ -1,5 +1,25 @@
-import { parseToHsl, lighten, readableColor, darken, getContrast, hsl, modularScale, stripUnit, math } from 'polished';
+import { parseToHsl, lighten, readableColor as polishedReadableColor, darken, getContrast, hsl, modularScale, stripUnit, math } from 'polished';
 import { tryCatch } from '../utils';
+const wcagContrast = {
+    // https://www.w3.org/TR/WCAG21/#contrast-minimum
+    AA: 4.5,
+    AALarge: 3,
+    // https://www.w3.org/TR/WCAG21/#contrast-enhanced
+    AAA: 7,
+    AAALarge: 4.5,
+    // https://www.w3.org/TR/WCAG21/#non-text-contrast
+    AANonText: 3
+};
+export const readableColor = (color, { mode = 'light', level = 'AA' } = {}) => {
+    const minContrast = typeof level === 'string' ? wcagContrast[level] : level;
+    if (mode === 'light' && getContrast('#fff', color) >= minContrast) {
+        return '#fff';
+    }
+    if (mode === 'dark' && getContrast('#000', color) >= minContrast) {
+        return '#000';
+    }
+    return polishedReadableColor(color);
+};
 const getBackgroundForegroundColors = (color, delta) => {
     const backgroundLightness = tryCatch(() => parseToHsl(color).lightness, () => 1);
     let background = tryCatch(() => lighten(delta, color));
@@ -16,16 +36,6 @@ export const getHoverColors = (color) => {
 export const getActiveColors = (color) => {
     return getBackgroundForegroundColors(color, 0.2);
 };
-const wcagContrast = {
-    // https://www.w3.org/TR/WCAG21/#contrast-minimum
-    AA: 4.5,
-    AALarge: 3,
-    // https://www.w3.org/TR/WCAG21/#contrast-enhanced
-    AAA: 7,
-    AAALarge: 4.5,
-    // https://www.w3.org/TR/WCAG21/#non-text-contrast
-    AANonText: 3
-};
 export const readableHue = (color1, color2, { mode = 'both', level = 'AA' } = {}) => {
     const minContrast = typeof level === 'string' ? wcagContrast[level] : level;
     if (getContrast(color1, color2) >= minContrast)
@@ -71,7 +81,7 @@ export const readableHue = (color1, color2, { mode = 'both', level = 'AA' } = {}
         return lightEnough;
     if (darkEnough)
         return darkEnough;
-    return readableColor(color2);
+    return readableColor(color2, { mode, level });
 };
 export const omitProps = (...props) => ({
     shouldForwardProp: (prop, defaultValidatorFn) => !props.includes(prop) && defaultValidatorFn(prop)

package/lib/styles/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type { StyledConfig } from 'styled-components';\nimport {\n  parseToHsl,\n  lighten,\n  readableColor,\n  darken,\n  getContrast,\n  hsl,\n  modularScale,\n  stripUnit,\n  math\n} from 'polished';\nimport type { ContrastScores } from 'polished/lib/types/color';\nimport type { ModularScaleRatio } from 'polished/lib/types/modularScaleRatio';\n\nimport { tryCatch } from '../utils';\n\nconst getBackgroundForegroundColors = (color: string, delta: number) => {\n  const backgroundLightness = tryCatch(\n    () => parseToHsl(color).lightness,\n    () => 1\n  );\n  let background = tryCatch(() => lighten(delta, color));\n  let foreground = tryCatch(() => readableColor(lighten(delta, color)));\n  if (backgroundLightness > 0.35) {\n    background = tryCatch(() => darken(delta, color));\n    foreground = tryCatch(() => readableColor(darken(delta, color)));\n  }\n\n  return { background, foreground };\n};\n\nexport const getHoverColors = (color: string) => {\n  return getBackgroundForegroundColors(color, 0.1);\n};\n\nexport const getActiveColors = (color: string) => {\n  return getBackgroundForegroundColors(color, 0.2);\n};\n\nconst wcagContrast: Record<keyof ContrastScores | 'AANonText', number> = {\n  // https://www.w3.org/TR/WCAG21/#contrast-minimum\n  AA: 4.5,\n  AALarge: 3,\n  // https://www.w3.org/TR/WCAG21/#contrast-enhanced\n  AAA: 7,\n  AAALarge: 4.5,\n  // https://www.w3.org/TR/WCAG21/#non-text-contrast\n  AANonText: 3\n};\n\nexport const readableHue = (\n  color1: string,\n  color2: string,\n  {\n    mode = 'both',\n    level = 'AA'\n  }: { mode?: 'light' | 'dark' | 'both'; level?: keyof typeof wcagContrast | number } = {}\n): string => {\n  const minContrast = typeof level === 'string' ? wcagContrast[level] : level;\n\n  if (getContrast(color1, color2) >= minContrast) return color1;\n\n  const { lightness, ...hueSaturation } = parseToHsl(color1);\n\n  let shouldLighten = true;\n  let shouldDarken = true;\n\n  let lightEnough = '';\n  let darkEnough = '';\n\n  for (let i = 0; i <= 1; i += 0.01) {\n    if (shouldLighten) {\n      const lightented = hsl({\n        ...hueSaturation,\n        lightness: Math.min(lightness + i, 1)\n      });\n\n      if (getContrast(lightented, color2) >= minContrast) {\n        if (mode !== 'dark') return lightented;\n\n        shouldLighten = false;\n        lightEnough = lightented;\n      }\n\n      if (lightness + i >= 1) shouldLighten = false;\n    }\n\n    if (shouldDarken) {\n      const darkened = hsl({\n        ...hueSaturation,\n        lightness: Math.max(lightness - i, 0)\n      });\n\n      if (getContrast(darkened, color2) >= minContrast) {\n        if (mode !== 'light') return darkened;\n\n        shouldDarken = false;\n        darkEnough = darkened;\n      }\n\n      if (lightness - i <= 0) shouldDarken = false;\n    }\n\n    if (!shouldLighten && !shouldDarken) break;\n  }\n\n  if (lightEnough) return lightEnough;\n  if (darkEnough) return darkEnough;\n\n  return readableColor(color2);\n};\n\nexport const omitProps = <O extends object = Record<PropertyKey, unknown>>(\n  ...props: [prop: keyof O, ...props: (keyof O)[]]\n): StyledConfig<O> => ({\n  shouldForwardProp: (prop, defaultValidatorFn) => !props.includes(prop) && defaultValidatorFn(prop)\n});\n\nexport type FontSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\nconst stepsMap = {\n  xxs: -2,\n  xs: -1,\n  s: 0,\n  m: 1,\n  l: 2,\n  xl: 3,\n  xxl: 4\n};\n\nexport const calculateFontSize = (baseFontSize: string, baseFontScale: string | number) => {\n  return Object.fromEntries(\n    Object.entries(stepsMap).map(([size, steps]) => {\n      const calculation = tryCatch(\n        () =>\n          baseFontScale === 'linear'\n            ? math(`${baseFontSize} + (${steps} * 0.0625rem)`)\n            : modularScale(steps, baseFontSize, baseFontScale as ModularScaleRatio),\n        () => baseFontSize\n      );\n\n      if (size === 'xs' && Number.parseFloat(`${stripUnit(calculation)}`) < 0.75) {\n        return [size, `max(calc((${baseFontSize} + 12px) / 2), 12px)`];\n      }\n\n      return [size, `max(${calculation}, 12px)`];\n    })\n  ) as Record<FontSize, string>;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type { StyledConfig } from 'styled-components';\nimport {\n  parseToHsl,\n  lighten,\n  readableColor as polishedReadableColor,\n  darken,\n  getContrast,\n  hsl,\n  modularScale,\n  stripUnit,\n  math\n} from 'polished';\nimport type { ContrastScores } from 'polished/lib/types/color';\nimport type { ModularScaleRatio } from 'polished/lib/types/modularScaleRatio';\n\nimport { tryCatch } from '../utils';\n\nconst wcagContrast: Record<keyof ContrastScores | 'AANonText', number> = {\n  // https://www.w3.org/TR/WCAG21/#contrast-minimum\n  AA: 4.5,\n  AALarge: 3,\n  // https://www.w3.org/TR/WCAG21/#contrast-enhanced\n  AAA: 7,\n  AAALarge: 4.5,\n  // https://www.w3.org/TR/WCAG21/#non-text-contrast\n  AANonText: 3\n};\n\ninterface ContrastOptions {\n  mode?: 'light' | 'dark' | 'both';\n  level?: keyof typeof wcagContrast | number;\n}\n\nexport const readableColor = (\n  color: string,\n  { mode = 'light', level = 'AA' }: ContrastOptions = {}\n): string => {\n  const minContrast = typeof level === 'string' ? wcagContrast[level] : level;\n\n  if (mode === 'light' && getContrast('#fff', color) >= minContrast) {\n    return '#fff';\n  }\n\n  if (mode === 'dark' && getContrast('#000', color) >= minContrast) {\n    return '#000';\n  }\n\n  return polishedReadableColor(color);\n};\n\nconst getBackgroundForegroundColors = (color: string, delta: number) => {\n  const backgroundLightness = tryCatch(\n    () => parseToHsl(color).lightness,\n    () => 1\n  );\n  let background = tryCatch(() => lighten(delta, color));\n  let foreground = tryCatch(() => readableColor(lighten(delta, color)));\n  if (backgroundLightness > 0.35) {\n    background = tryCatch(() => darken(delta, color));\n    foreground = tryCatch(() => readableColor(darken(delta, color)));\n  }\n\n  return { background, foreground };\n};\n\nexport const getHoverColors = (color: string) => {\n  return getBackgroundForegroundColors(color, 0.1);\n};\n\nexport const getActiveColors = (color: string) => {\n  return getBackgroundForegroundColors(color, 0.2);\n};\n\nexport const readableHue = (\n  color1: string,\n  color2: string,\n  { mode = 'both', level = 'AA' }: ContrastOptions = {}\n): string => {\n  const minContrast = typeof level === 'string' ? wcagContrast[level] : level;\n\n  if (getContrast(color1, color2) >= minContrast) return color1;\n\n  const { lightness, ...hueSaturation } = parseToHsl(color1);\n\n  let shouldLighten = true;\n  let shouldDarken = true;\n\n  let lightEnough = '';\n  let darkEnough = '';\n\n  for (let i = 0; i <= 1; i += 0.01) {\n    if (shouldLighten) {\n      const lightented = hsl({\n        ...hueSaturation,\n        lightness: Math.min(lightness + i, 1)\n      });\n\n      if (getContrast(lightented, color2) >= minContrast) {\n        if (mode !== 'dark') return lightented;\n\n        shouldLighten = false;\n        lightEnough = lightented;\n      }\n\n      if (lightness + i >= 1) shouldLighten = false;\n    }\n\n    if (shouldDarken) {\n      const darkened = hsl({\n        ...hueSaturation,\n        lightness: Math.max(lightness - i, 0)\n      });\n\n      if (getContrast(darkened, color2) >= minContrast) {\n        if (mode !== 'light') return darkened;\n\n        shouldDarken = false;\n        darkEnough = darkened;\n      }\n\n      if (lightness - i <= 0) shouldDarken = false;\n    }\n\n    if (!shouldLighten && !shouldDarken) break;\n  }\n\n  if (lightEnough) return lightEnough;\n  if (darkEnough) return darkEnough;\n\n  return readableColor(color2, { mode, level });\n};\n\nexport const omitProps = <O extends object = Record<PropertyKey, unknown>>(\n  ...props: [prop: keyof O, ...props: (keyof O)[]]\n): StyledConfig<O> => ({\n  shouldForwardProp: (prop, defaultValidatorFn) => !props.includes(prop) && defaultValidatorFn(prop)\n});\n\nexport type FontSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\nconst stepsMap = {\n  xxs: -2,\n  xs: -1,\n  s: 0,\n  m: 1,\n  l: 2,\n  xl: 3,\n  xxl: 4\n};\n\nexport const calculateFontSize = (baseFontSize: string, baseFontScale: string | number) => {\n  return Object.fromEntries(\n    Object.entries(stepsMap).map(([size, steps]) => {\n      const calculation = tryCatch(\n        () =>\n          baseFontScale === 'linear'\n            ? math(`${baseFontSize} + (${steps} * 0.0625rem)`)\n            : modularScale(steps, baseFontSize, baseFontScale as ModularScaleRatio),\n        () => baseFontSize\n      );\n\n      if (size === 'xs' && Number.parseFloat(`${stripUnit(calculation)}`) < 0.75) {\n        return [size, `max(calc((${baseFontSize} + 12px) / 2), 12px)`];\n      }\n\n      return [size, `max(${calculation}, 12px)`];\n    })\n  ) as Record<FontSize, string>;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "7.0.0-build.8.0",
+  "version": "7.0.0-build.9.0",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "repository": {
     "type": "git",