{"version":3,"file":"element-theme-colors.mjs","sources":["../../../../packages/theme/document-head-contents/element-theme-colors.tsx"],"sourcesContent":["import { themeDark, themeLight } from '../themes.js'\nimport { generateCssColorVariables } from '../utils/generate-css-color-variables.js'\nimport { globalStyleDataAttribute, ThemeName } from '../constants.js'\nimport { VOID_FN } from '../../utils/index.js'\n\n/**\n * What is happening here:\n * We want to have React dehydrated HTML to be loaded after theme is initialized.\n * That means that we need to have some code executed BEFORE main react components code,\n * before even injected script itself, so we need to provide some CSS and JS in document head\n * to read the theme from cookie and make global CSS follow preferred palette.\n * This file is providing CSS themes that defines custom CSS variables with palette to\n * make HTML document styled even before any code is loaded\n * */\n\nconst darkThemeColors = generateCssColorVariables(themeDark.colors)\nconst lightThemeColors = generateCssColorVariables(themeLight.colors)\n\nexport let initGlobalColors = VOID_FN\nexport const themeCSSValueString = `\nhtml, [data-lido-theme='${ThemeName.light}'] {\ncolor-theme: light;\n${lightThemeColors}\n}\n@media (prefers-color-scheme: dark) {\nhtml:not([data-lido-theme='${ThemeName.light}']) { \ncolor-theme: dark;\n${darkThemeColors} \n}\n}\n[data-lido-theme='${ThemeName.dark}'] {\ncolor-theme: dark;\n${darkThemeColors}\n}`\n\nif (typeof window !== 'undefined') {\n  if (!document.querySelector(`style[${globalStyleDataAttribute}]`)) {\n    initGlobalColors = () => {\n      const style = document.createElement('style')\n      style.setAttribute(globalStyleDataAttribute, '')\n      style.innerHTML = themeCSSValueString\n\n      document.head.appendChild(style)\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      initGlobalColors = VOID_FN\n    }\n  }\n}\n\nexport const StyleThemeColors = () => (\n  <style\n    {...{ [globalStyleDataAttribute]: true }}\n    dangerouslySetInnerHTML={{ __html: themeCSSValueString }}\n  />\n)\n"],"names":["darkThemeColors","generateCssColorVariables","themeDark","colors","lightThemeColors","themeLight","initGlobalColors","VOID_FN","themeCSSValueString","ThemeName","light","dark","window","document","querySelector","globalStyleDataAttribute","style","createElement","setAttribute","innerHTML","head","appendChild","StyleThemeColors","_jsx","dangerouslySetInnerHTML","__html"],"mappings":";;;;;;AAeA,MAAMA,eAAe,GAAGC,yBAAyB,CAACC,SAAS,CAACC,MAAM,CAAC,CAAA;AACnE,MAAMC,gBAAgB,GAAGH,yBAAyB,CAACI,UAAU,CAACF,MAAM,CAAC,CAAA;AAE9D,IAAIG,gBAAgB,GAAGC,QAAO;AAC9B,MAAMC,mBAAmB,GAAG,CAAA;AACnC,wBAA0BC,EAAAA,SAAS,CAACC,KAAK,CAAA;AACzC;AACA,EAAEN,gBAAgB,CAAA;AAClB;AACA;AACA,2BAA6BK,EAAAA,SAAS,CAACC,KAAK,CAAA;AAC5C;AACA,EAAEV,eAAe,CAAA;AACjB;AACA;AACA,kBAAoBS,EAAAA,SAAS,CAACE,IAAI,CAAA;AAClC;AACA,EAAEX,eAAe,CAAA;AACjB,CAAE,EAAA;AAEF,IAAI,OAAOY,MAAM,KAAK,WAAW,EAAE;EACjC,IAAI,CAACC,QAAQ,CAACC,aAAa,CAAC,CAASC,MAAAA,EAAAA,wBAAwB,CAAG,CAAA,CAAA,CAAC,EAAE;IACjET,gBAAgB,GAAGA,MAAM;AACvB,MAAA,MAAMU,KAAK,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC,CAAA;AAC7CD,MAAAA,KAAK,CAACE,YAAY,CAACH,wBAAwB,EAAE,EAAE,CAAC,CAAA;MAChDC,KAAK,CAACG,SAAS,GAAGX,mBAAmB,CAAA;AAErCK,MAAAA,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC,CAAA;AAChC;AACAV,MAAAA,gBAAgB,GAAGC,OAAO,CAAA;KAC3B,CAAA;AACH,GAAA;AACF,CAAA;AAEae,MAAAA,gBAAgB,GAAGA,mBAC9BC,GAAA,CAAA,OAAA,EAAA;EACQ,CAACR,wBAAwB,GAAG,IAAI;AACtCS,EAAAA,uBAAuB,EAAE;AAAEC,IAAAA,MAAM,EAAEjB,mBAAAA;AAAoB,GAAA;AAAE,CAC1D;;;;"}