{"version":3,"file":"createContrastColors.cjs","names":["_hexToRgb","require","LUMINANCE_THRESHOLD","LUMINANCE_EDGE_MIN","LUMINANCE_EDGE_MAX","BLACK_FONT_COLOR","WHITE_FONT_COLOR","generateContrastColors","backgroundColor","backgroundContrastColor","odysseyDesignTokens","rgbFromHex","isValidHexString","hexToRgb","HueNeutralWhite","red","green","blue","luminance","luminanceValueInEdgeRange","isLight","fontColor","TypographyColorBody","calculatedFontColorInRgb","lightFontColorInRgb","darkFontColorInRgb","calculatedFontRgbComponentsString","rgbComponentsToString","lightFontRgbComponentsString","darkFontRgbComponentsString","getHighlightColor","focusRingColor","itemDisabledFontColor","itemHoverBackgroundColor","itemSelectedBackgroundColor","exports"],"sources":["../../src/createContrastColors.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  hexToRgb,\n  isValidHexString,\n  rgbComponentsToString,\n} from \"./hexToRgb.js\";\nimport { DesignTokens } from \"./OdysseyDesignTokensContext.js\";\n\nexport type ContrastColors = {\n  focusRingColor: string | undefined;\n  fontColor: string | undefined;\n  itemDisabledFontColor: string | undefined;\n  itemHoverBackgroundColor: string | undefined;\n  itemSelectedBackgroundColor: string | undefined;\n};\n\n// 128 is a magic number. This feels like roughly where we should switch from dark to light.\nconst LUMINANCE_THRESHOLD = 128;\nconst LUMINANCE_EDGE_MIN = 108;\nconst LUMINANCE_EDGE_MAX = 142;\n\nconst BLACK_FONT_COLOR = \"#000000\";\nconst WHITE_FONT_COLOR = \"#FFFFFF\";\n\nexport const generateContrastColors = ({\n  backgroundColor,\n  backgroundContrastColor,\n  odysseyDesignTokens,\n}: {\n  backgroundColor: string;\n  backgroundContrastColor?: string;\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  // Convert hex to RGB\n  const rgbFromHex = isValidHexString(backgroundColor)\n    ? hexToRgb(backgroundColor)\n    : hexToRgb(odysseyDesignTokens.HueNeutralWhite);\n\n  const { red, green, blue } = rgbFromHex;\n\n  // Calculate relative luminance\n  // @see https://contrastchecker.online/color-relative-luminance-calculator#:~:text=For%20the%20sRGB%20colorspace%2C%20the,%2B0.055)%2F1.055)%20%5E%202.4\n  // returns a number between 0(black) and 255(white)\n  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n\n  // Luminance values between LUMINANCE_EDGE_MIN-LUMINANCE_EDGE_MAX can cause contrast ration issues Using #000000 helps in these cases\n  const luminanceValueInEdgeRange =\n    luminance > LUMINANCE_EDGE_MIN && luminance < LUMINANCE_EDGE_MAX;\n\n  // Determine if the color is light or dark.\n  const isLight = luminance > LUMINANCE_THRESHOLD;\n\n  const fontColor =\n    backgroundContrastColor ||\n    (luminanceValueInEdgeRange\n      ? BLACK_FONT_COLOR\n      : isLight\n        ? odysseyDesignTokens.TypographyColorBody\n        : WHITE_FONT_COLOR);\n\n  const calculatedFontColorInRgb = hexToRgb(fontColor);\n  const lightFontColorInRgb = hexToRgb(WHITE_FONT_COLOR);\n  const darkFontColorInRgb = hexToRgb(\n    luminanceValueInEdgeRange\n      ? BLACK_FONT_COLOR\n      : odysseyDesignTokens.TypographyColorBody,\n  );\n\n  const calculatedFontRgbComponentsString = rgbComponentsToString({\n    red: calculatedFontColorInRgb?.red,\n    green: calculatedFontColorInRgb?.green,\n    blue: calculatedFontColorInRgb?.blue,\n  });\n\n  const lightFontRgbComponentsString = rgbComponentsToString({\n    red: lightFontColorInRgb?.red,\n    green: lightFontColorInRgb?.green,\n    blue: lightFontColorInRgb?.blue,\n  });\n\n  const darkFontRgbComponentsString = rgbComponentsToString({\n    red: darkFontColorInRgb?.red,\n    green: darkFontColorInRgb?.green,\n    blue: darkFontColorInRgb?.blue,\n  });\n\n  const getHighlightColor: (\n    luminanceValueInEdgeRange: boolean,\n    isLight: boolean,\n  ) => string = (luminanceValueInEdgeRange, isLight) => {\n    if (luminanceValueInEdgeRange) {\n      return isLight\n        ? darkFontRgbComponentsString\n        : lightFontRgbComponentsString;\n    }\n\n    return calculatedFontRgbComponentsString;\n  };\n\n  return {\n    fontColor,\n    focusRingColor: `rgba(${calculatedFontRgbComponentsString}, .8)`,\n    itemDisabledFontColor: `rgba(${calculatedFontRgbComponentsString}, .4)`,\n    itemHoverBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .1)`,\n    itemSelectedBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .15)`,\n  };\n};\n"],"mappings":";;;;;;AAYA,IAAAA,SAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAkBA,MAAMC,mBAAmB,GAAG,GAAG;AAC/B,MAAMC,kBAAkB,GAAG,GAAG;AAC9B,MAAMC,kBAAkB,GAAG,GAAG;AAE9B,MAAMC,gBAAgB,GAAG,SAAS;AAClC,MAAMC,gBAAgB,GAAG,SAAS;AAE3B,MAAMC,sBAAsB,GAAGA,CAAC;EACrCC,eAAe;EACfC,uBAAuB;EACvBC;AAKF,CAAC,KAAK;EAEJ,MAAMC,UAAU,GAAG,IAAAC,0BAAgB,EAACJ,eAAe,CAAC,GAChD,IAAAK,kBAAQ,EAACL,eAAe,CAAC,GACzB,IAAAK,kBAAQ,EAACH,mBAAmB,CAACI,eAAe,CAAC;EAEjD,MAAM;IAAEC,GAAG;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGN,UAAU;EAKvC,MAAMO,SAAS,GAAG,MAAM,GAAGH,GAAG,GAAG,MAAM,GAAGC,KAAK,GAAG,MAAM,GAAGC,IAAI;EAG/D,MAAME,yBAAyB,GAC7BD,SAAS,GAAGf,kBAAkB,IAAIe,SAAS,GAAGd,kBAAkB;EAGlE,MAAMgB,OAAO,GAAGF,SAAS,GAAGhB,mBAAmB;EAE/C,MAAMmB,SAAS,GACbZ,uBAAuB,KACtBU,yBAAyB,GACtBd,gBAAgB,GAChBe,OAAO,GACLV,mBAAmB,CAACY,mBAAmB,GACvChB,gBAAgB,CAAC;EAEzB,MAAMiB,wBAAwB,GAAG,IAAAV,kBAAQ,EAACQ,SAAS,CAAC;EACpD,MAAMG,mBAAmB,GAAG,IAAAX,kBAAQ,EAACP,gBAAgB,CAAC;EACtD,MAAMmB,kBAAkB,GAAG,IAAAZ,kBAAQ,EACjCM,yBAAyB,GACrBd,gBAAgB,GAChBK,mBAAmB,CAACY,mBAC1B,CAAC;EAED,MAAMI,iCAAiC,GAAG,IAAAC,+BAAqB,EAAC;IAC9DZ,GAAG,EAAEQ,wBAAwB,EAAER,GAAG;IAClCC,KAAK,EAAEO,wBAAwB,EAAEP,KAAK;IACtCC,IAAI,EAAEM,wBAAwB,EAAEN;EAClC,CAAC,CAAC;EAEF,MAAMW,4BAA4B,GAAG,IAAAD,+BAAqB,EAAC;IACzDZ,GAAG,EAAES,mBAAmB,EAAET,GAAG;IAC7BC,KAAK,EAAEQ,mBAAmB,EAAER,KAAK;IACjCC,IAAI,EAAEO,mBAAmB,EAAEP;EAC7B,CAAC,CAAC;EAEF,MAAMY,2BAA2B,GAAG,IAAAF,+BAAqB,EAAC;IACxDZ,GAAG,EAAEU,kBAAkB,EAAEV,GAAG;IAC5BC,KAAK,EAAES,kBAAkB,EAAET,KAAK;IAChCC,IAAI,EAAEQ,kBAAkB,EAAER;EAC5B,CAAC,CAAC;EAEF,MAAMa,iBAGK,GAAGA,CAACX,yBAAyB,EAAEC,OAAO,KAAK;IACpD,IAAID,yBAAyB,EAAE;MAC7B,OAAOC,OAAO,GACVS,2BAA2B,GAC3BD,4BAA4B;IAClC;IAEA,OAAOF,iCAAiC;EAC1C,CAAC;EAED,OAAO;IACLL,SAAS;IACTU,cAAc,EAAE,QAAQL,iCAAiC,OAAO;IAChEM,qBAAqB,EAAE,QAAQN,iCAAiC,OAAO;IACvEO,wBAAwB,EAAE,QAAQH,iBAAiB,CAACX,yBAAyB,EAAEC,OAAO,CAAC,OAAO;IAC9Fc,2BAA2B,EAAE,QAAQJ,iBAAiB,CAACX,yBAAyB,EAAEC,OAAO,CAAC;EAC5F,CAAC;AACH,CAAC;AAACe,OAAA,CAAA5B,sBAAA,GAAAA,sBAAA","ignoreList":[]}