@lidofinance/lido-ui 3.0.0-next.3 → 3.0.0-next.6

package/dist/cjs/cookie-theme-toggler/src/cookie-theme-provider.js

@@ -12,19 +12,18 @@ _export(exports, {
     ThemeToggleContext: ()=>ThemeToggleContext,
     CookieThemeProvider: ()=>CookieThemeProvider
 });
-const _react = require("react");
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _theme = require("../../theme/src/index");
 const _utils = require("./utils");
 const _elementThemeScript = require("../../theme/src/document-head-contents/element-theme-script");
-const themeMap = {
-    light: _theme.themeLight,
-    dark: _theme.themeDark
-};
 const ThemeToggleContext = /*#__PURE__*/ (0, _react.createContext)({});
 const CookieThemeProvider = (param)=>{
     let { children , initialTheme , // overrideTheme is mainly used for storybook
     overrideTheme ,  } = param;
     const [themeName, setThemeName] = (0, _react.useState)(initialTheme || _theme.DEFAULT_THEME_NAME);
+    const [isAutoDetectedTheme, setIsAutoDetectedTheme] = (0, _react.useState)(true);
+    console.log('using theme', themeName);
     // Noticing browser preferences on hydration
     // Reacting to changing preferences
     (0, _react.useEffect)(()=>{
@@ -37,6 +36,7 @@ const CookieThemeProvider = (param)=>{
             const systemThemeName = mql.matches ? _theme.DARK : _theme.LIGHT;
             const themeNameCookie = (0, _utils.getThemeNameFromCookies)();
             setThemeName(overrideTheme || themeNameCookie || initialTheme || systemThemeName || _theme.DEFAULT_THEME_NAME);
+            setIsAutoDetectedTheme(overrideTheme !== undefined || themeNameCookie !== undefined);
         };
         mql.addEventListener('change', setTheme);
         setTheme();
@@ -56,10 +56,14 @@ const CookieThemeProvider = (param)=>{
         }), [
         themeName
     ]);
-    return /*#__PURE__*/ React.createElement(ThemeToggleContext.Provider, {
+    return /*#__PURE__*/ _react.default.createElement(ThemeToggleContext.Provider, {
         value: value
-    }, /*#__PURE__*/ React.createElement(_theme.ThemeProvider, {
-        theme: themeMap[themeName]
+    }, /*#__PURE__*/ _react.default.createElement(_theme.ThemeProvider, {
+        isAutoDetectedTheme: isAutoDetectedTheme,
+        theme: {
+            light: _theme.themeLight,
+            dark: _theme.themeDark
+        }[themeName]
     }, children));
 };
 

package/dist/cjs/cookie-theme-toggler/src/cookie-theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DARK,\n  DEFAULT_THEME_NAME,\n  LIGHT,\n  Theme,\n  THEME,\n  themeDark,\n  themeLight,\n  ThemeProvider,\n} from '@lidofinance/theme'\nimport { getThemeNameFromCookies } from './utils'\nimport { initColors } from '@lidofinance/theme'\nimport { updateGlobalTheme } from '../../theme/src/document-head-contents/element-theme-script'\n\nconst themeMap: Record<THEME, Theme> = {\n  light: themeLight,\n  dark: themeDark,\n}\n\nexport type ThemeContext = {\n  toggleTheme: () => void\n  themeName: THEME\n}\n\nexport const ThemeToggleContext = createContext({} as ThemeContext)\n\nexport type ThemeProviderProps = {\n  // Use themeNameParent if you need get cookie in SSR\n  initialTheme?: THEME\n  overrideTheme?: THEME\n}\n\nexport const CookieThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  initialTheme,\n  // overrideTheme is mainly used for storybook\n  overrideTheme,\n}) => {\n  const [themeName, setThemeName] = useState<THEME>(\n    initialTheme || DEFAULT_THEME_NAME\n  )\n\n  // Noticing browser preferences on hydration\n  // Reacting to changing preferences\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    initColors()\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n    const setTheme = () => {\n      const systemThemeName = mql.matches ? (DARK as THEME) : (LIGHT as THEME)\n      const themeNameCookie = getThemeNameFromCookies()\n      setThemeName(\n        overrideTheme ||\n          themeNameCookie ||\n          initialTheme ||\n          systemThemeName ||\n          DEFAULT_THEME_NAME\n      )\n    }\n    mql.addEventListener('change', setTheme)\n    setTheme()\n  }, [initialTheme, overrideTheme])\n\n  const value = useMemo(\n    () => ({\n      themeName,\n      toggleTheme() {\n        setThemeName((themeName) => {\n          const newThemeName =\n            themeName === THEME.light ? THEME.dark : THEME.light\n          updateGlobalTheme(newThemeName)\n          return newThemeName\n        })\n      },\n    }),\n    [themeName]\n  )\n\n  return (\n    <ThemeToggleContext.Provider value={value}>\n      <ThemeProvider theme={themeMap[themeName]}>{children}</ThemeProvider>\n    </ThemeToggleContext.Provider>\n  )\n}\n"],"names":["ThemeToggleContext","CookieThemeProvider","themeMap","light","themeLight","dark","themeDark","createContext","children","initialTheme","overrideTheme","themeName","setThemeName","useState","DEFAULT_THEME_NAME","useEffect","window","initColors","mql","matchMedia","setTheme","systemThemeName","matches","DARK","LIGHT","themeNameCookie","getThemeNameFromCookies","addEventListener","value","useMemo","toggleTheme","newThemeName","THEME","updateGlobalTheme","Provider","ThemeProvider","theme"],"mappings":"AAAA;;;;;;;;;;;IAgCaA,kBAAkB,MAAlBA,kBAAkB;IAQlBC,mBAAmB,MAAnBA,mBAAmB;;uBAjCzB,OAAO;uBAUP,uBAAoB;uBACa,SAAS;oCAEf,6DAA6D;AAE/F,MAAMC,QAAQ,GAAyB;IACrCC,KAAK,EAAEC,MAAU,WAAA;IACjBC,IAAI,EAAEC,MAAS,UAAA;CAChB;AAOM,MAAMN,kBAAkB,iBAAGO,IAAAA,MAAa,cAAA,EAAC,EAAE,CAAiB;AAQ5D,MAAMN,mBAAmB,GAA8C,SAKxE;QALyE,EAC7EO,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZ,6CAA6C;IAC7CC,aAAa,CAAA,IACd;IACC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,IAAAA,MAAQ,SAAA,EACxCJ,YAAY,IAAIK,MAAkB,mBAAA,CACnC;IAED,4CAA4C;IAC5C,mCAAmC;IACnCC,IAAAA,MAAS,UAAA,EAAC,IAAM;QACd,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;YACjC,OAAM;QACR,CAAC;QACDC,IAAAA,MAAU,WAAA,GAAE;QACZ,MAAMC,GAAG,GAAGF,MAAM,CAACG,UAAU,CAAC,8BAA8B,CAAC;QAC7D,MAAMC,QAAQ,GAAG,IAAM;YACrB,MAAMC,eAAe,GAAGH,GAAG,CAACI,OAAO,GAAIC,MAAI,KAAA,GAAcC,MAAK,MAAA,AAAU;YACxE,MAAMC,eAAe,GAAGC,IAAAA,MAAuB,wBAAA,GAAE;YACjDd,YAAY,CACVF,aAAa,IACXe,eAAe,IACfhB,YAAY,IACZY,eAAe,IACfP,MAAkB,mBAAA,CACrB;QACH,CAAC;QACDI,GAAG,CAACS,gBAAgB,CAAC,QAAQ,EAAEP,QAAQ,CAAC;QACxCA,QAAQ,EAAE;IACZ,CAAC,EAAE;QAACX,YAAY;QAAEC,aAAa;KAAC,CAAC;IAEjC,MAAMkB,KAAK,GAAGC,IAAAA,MAAO,QAAA,EACnB,IAAM,CAAC;YACLlB,SAAS;YACTmB,WAAW,IAAG;gBACZlB,YAAY,CAAC,CAACD,SAAS,GAAK;oBAC1B,MAAMoB,YAAY,GAChBpB,SAAS,KAAKqB,MAAK,MAAA,CAAC7B,KAAK,GAAG6B,MAAK,MAAA,CAAC3B,IAAI,GAAG2B,MAAK,MAAA,CAAC7B,KAAK;oBACtD8B,IAAAA,mBAAiB,kBAAA,EAACF,YAAY,CAAC;oBAC/B,OAAOA,YAAY,CAAA;gBACrB,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,EACF;QAACpB,SAAS;KAAC,CACZ;IAED,qBACE,oBAACX,kBAAkB,CAACkC,QAAQ;QAACN,KAAK,EAAEA,KAAK;qBACvC,oBAACO,MAAa,cAAA;QAACC,KAAK,EAAElC,QAAQ,CAACS,SAAS,CAAC;OAAGH,QAAQ,CAAiB,CACzC,CAC/B;AACH,CAAC"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DARK,\n  DEFAULT_THEME_NAME,\n  LIGHT,\n  THEME,\n  themeDark,\n  themeLight,\n  ThemeProvider,\n} from '@lidofinance/theme'\nimport { getThemeNameFromCookies } from './utils'\nimport { initColors } from '@lidofinance/theme'\nimport { updateGlobalTheme } from '../../theme/src/document-head-contents/element-theme-script'\n\nexport type ThemeContext = {\n  toggleTheme: () => void\n  themeName: THEME\n}\n\nexport const ThemeToggleContext = createContext({} as ThemeContext)\n\nexport type ThemeProviderProps = {\n  // Use themeNameParent if you need get cookie in SSR\n  initialTheme?: THEME\n  overrideTheme?: THEME\n}\n\nexport const CookieThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  initialTheme,\n  // overrideTheme is mainly used for storybook\n  overrideTheme,\n}) => {\n  const [themeName, setThemeName] = useState<THEME>(\n    initialTheme || DEFAULT_THEME_NAME\n  )\n  const [isAutoDetectedTheme, setIsAutoDetectedTheme] = useState(true)\n\n  console.log('using theme', themeName)\n\n  // Noticing browser preferences on hydration\n  // Reacting to changing preferences\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    initColors()\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n    const setTheme = () => {\n      const systemThemeName = mql.matches ? (DARK as THEME) : (LIGHT as THEME)\n      const themeNameCookie = getThemeNameFromCookies()\n      setThemeName(\n        overrideTheme ||\n          themeNameCookie ||\n          initialTheme ||\n          systemThemeName ||\n          DEFAULT_THEME_NAME\n      )\n      setIsAutoDetectedTheme(\n        overrideTheme !== undefined || themeNameCookie !== undefined\n      )\n    }\n    mql.addEventListener('change', setTheme)\n    setTheme()\n  }, [initialTheme, overrideTheme])\n\n  const value = useMemo(\n    () => ({\n      themeName,\n      toggleTheme() {\n        setThemeName((themeName) => {\n          const newThemeName =\n            themeName === THEME.light ? THEME.dark : THEME.light\n          updateGlobalTheme(newThemeName)\n          return newThemeName\n        })\n      },\n    }),\n    [themeName]\n  )\n\n  return (\n    <ThemeToggleContext.Provider value={value}>\n      <ThemeProvider\n        isAutoDetectedTheme={isAutoDetectedTheme}\n        theme={\n          {\n            light: themeLight,\n            dark: themeDark,\n          }[themeName]\n        }\n      >\n        {children}\n      </ThemeProvider>\n    </ThemeToggleContext.Provider>\n  )\n}\n"],"names":["ThemeToggleContext","CookieThemeProvider","createContext","children","initialTheme","overrideTheme","themeName","setThemeName","useState","DEFAULT_THEME_NAME","isAutoDetectedTheme","setIsAutoDetectedTheme","console","log","useEffect","window","initColors","mql","matchMedia","setTheme","systemThemeName","matches","DARK","LIGHT","themeNameCookie","getThemeNameFromCookies","undefined","addEventListener","value","useMemo","toggleTheme","newThemeName","THEME","light","dark","updateGlobalTheme","Provider","ThemeProvider","theme","themeLight","themeDark"],"mappings":"AAAA;;;;;;;;;;;IA0BaA,kBAAkB,MAAlBA,kBAAkB;IAQlBC,mBAAmB,MAAnBA,mBAAmB;;;6DA3BzB,OAAO;uBASP,uBAAoB;uBACa,SAAS;oCAEf,6DAA6D;AAOxF,MAAMD,kBAAkB,iBAAGE,IAAAA,MAAa,cAAA,EAAC,EAAE,CAAiB;AAQ5D,MAAMD,mBAAmB,GAA8C,SAKxE;QALyE,EAC7EE,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZ,6CAA6C;IAC7CC,aAAa,CAAA,IACd;IACC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,IAAAA,MAAQ,SAAA,EACxCJ,YAAY,IAAIK,MAAkB,mBAAA,CACnC;IACD,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGH,IAAAA,MAAQ,SAAA,EAAC,IAAI,CAAC;IAEpEI,OAAO,CAACC,GAAG,CAAC,aAAa,EAAEP,SAAS,CAAC;IAErC,4CAA4C;IAC5C,mCAAmC;IACnCQ,IAAAA,MAAS,UAAA,EAAC,IAAM;QACd,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;YACjC,OAAM;QACR,CAAC;QACDC,IAAAA,MAAU,WAAA,GAAE;QACZ,MAAMC,GAAG,GAAGF,MAAM,CAACG,UAAU,CAAC,8BAA8B,CAAC;QAC7D,MAAMC,QAAQ,GAAG,IAAM;YACrB,MAAMC,eAAe,GAAGH,GAAG,CAACI,OAAO,GAAIC,MAAI,KAAA,GAAcC,MAAK,MAAA,AAAU;YACxE,MAAMC,eAAe,GAAGC,IAAAA,MAAuB,wBAAA,GAAE;YACjDlB,YAAY,CACVF,aAAa,IACXmB,eAAe,IACfpB,YAAY,IACZgB,eAAe,IACfX,MAAkB,mBAAA,CACrB;YACDE,sBAAsB,CACpBN,aAAa,KAAKqB,SAAS,IAAIF,eAAe,KAAKE,SAAS,CAC7D;QACH,CAAC;QACDT,GAAG,CAACU,gBAAgB,CAAC,QAAQ,EAAER,QAAQ,CAAC;QACxCA,QAAQ,EAAE;IACZ,CAAC,EAAE;QAACf,YAAY;QAAEC,aAAa;KAAC,CAAC;IAEjC,MAAMuB,KAAK,GAAGC,IAAAA,MAAO,QAAA,EACnB,IAAM,CAAC;YACLvB,SAAS;YACTwB,WAAW,IAAG;gBACZvB,YAAY,CAAC,CAACD,SAAS,GAAK;oBAC1B,MAAMyB,YAAY,GAChBzB,SAAS,KAAK0B,MAAK,MAAA,CAACC,KAAK,GAAGD,MAAK,MAAA,CAACE,IAAI,GAAGF,MAAK,MAAA,CAACC,KAAK;oBACtDE,IAAAA,mBAAiB,kBAAA,EAACJ,YAAY,CAAC;oBAC/B,OAAOA,YAAY,CAAA;gBACrB,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,EACF;QAACzB,SAAS;KAAC,CACZ;IAED,qBACE,6BAACN,kBAAkB,CAACoC,QAAQ;QAACR,KAAK,EAAEA,KAAK;qBACvC,6BAACS,MAAa,cAAA;QACZ3B,mBAAmB,EAAEA,mBAAmB;QACxC4B,KAAK,EACH;YACEL,KAAK,EAAEM,MAAU,WAAA;YACjBL,IAAI,EAAEM,MAAS,UAAA;SAChB,CAAClC,SAAS,CAAC;OAGbH,QAAQ,CACK,CACY,CAC/B;AACH,CAAC"}

package/dist/cjs/cookie-theme-toggler/src/cookie-theme-toggler.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "ThemeToggler", {
     enumerable: true,
     get: ()=>ThemeToggler
 });
-const _icons = require("../../icons/src/index");
 const _styles = require("./styles");
+const _icons = require("../../icons/src/index");
 const _hooks = require("./hooks");
 const ThemeToggler = ()=>{
-    const { toggleTheme , themeName  } = (0, _hooks.useThemeToggle)();
+    const { toggleTheme  } = (0, _hooks.useThemeToggle)();
     return /*#__PURE__*/ React.createElement(_styles.CookieThemeTogglerStyle, {
         color: "secondary",
         onClick: toggleTheme
-    }, themeName === 'dark' ? /*#__PURE__*/ React.createElement(_icons.Light, null) : /*#__PURE__*/ React.createElement(_icons.Dark, null));
+    }, /*#__PURE__*/ React.createElement(_styles.DarkWrapper, null, /*#__PURE__*/ React.createElement(_icons.Dark, null)), /*#__PURE__*/ React.createElement(_styles.LightWrapper, null, /*#__PURE__*/ React.createElement(_icons.Light, null)));
 };
 
 //# sourceMappingURL=cookie-theme-toggler.js.map

package/dist/cjs/cookie-theme-toggler/src/cookie-theme-toggler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-toggler.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { Dark, Light } from '@lidofinance/icons'\nimport { CookieThemeTogglerStyle } from './styles'\nimport { useThemeToggle } from './hooks'\n\nexport const ThemeToggler: FC = () => {\n  const { toggleTheme, themeName } = useThemeToggle()\n\n  return (\n    <CookieThemeTogglerStyle color='secondary' onClick={toggleTheme}>\n      {themeName === 'dark' ? <Light /> : <Dark />}\n    </CookieThemeTogglerStyle>\n  )\n}\n"],"names":["ThemeToggler","toggleTheme","themeName","useThemeToggle","CookieThemeTogglerStyle","color","onClick","Light","Dark"],"mappings":"AAAA;;;;+BAKaA,cAAY;;aAAZA,YAAY;;uBAJG,uBAAoB;wBACR,UAAU;uBACnB,SAAS;AAEjC,MAAMA,YAAY,GAAO,IAAM;IACpC,MAAM,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGC,IAAAA,MAAc,eAAA,GAAE;IAEnD,qBACE,oBAACC,OAAuB,wBAAA;QAACC,KAAK,EAAC,WAAW;QAACC,OAAO,EAAEL,WAAW;OAC5DC,SAAS,KAAK,MAAM,iBAAG,oBAACK,MAAK,MAAA,OAAG,iBAAG,oBAACC,MAAI,KAAA,OAAG,CACpB,CAC3B;AACH,CAAC"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-toggler.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { CookieThemeTogglerStyle, DarkWrapper, LightWrapper } from './styles'\nimport { Dark, Light } from '@lidofinance/icons'\nimport { useThemeToggle } from './hooks'\n\nexport const ThemeToggler: FC = () => {\n  const { toggleTheme } = useThemeToggle()\n\n  return (\n    <CookieThemeTogglerStyle color='secondary' onClick={toggleTheme}>\n      <DarkWrapper>\n        <Dark />\n      </DarkWrapper>\n      <LightWrapper>\n        <Light />\n      </LightWrapper>\n    </CookieThemeTogglerStyle>\n  )\n}\n"],"names":["ThemeToggler","toggleTheme","useThemeToggle","CookieThemeTogglerStyle","color","onClick","DarkWrapper","Dark","LightWrapper","Light"],"mappings":"AAAA;;;;+BAKaA,cAAY;;aAAZA,YAAY;;wBAJ0C,UAAU;uBACjD,uBAAoB;uBACjB,SAAS;AAEjC,MAAMA,YAAY,GAAO,IAAM;IACpC,MAAM,EAAEC,WAAW,CAAA,EAAE,GAAGC,IAAAA,MAAc,eAAA,GAAE;IAExC,qBACE,oBAACC,OAAuB,wBAAA;QAACC,KAAK,EAAC,WAAW;QAACC,OAAO,EAAEJ,WAAW;qBAC7D,oBAACK,OAAW,YAAA,sBACV,oBAACC,MAAI,KAAA,OAAG,CACI,gBACd,oBAACC,OAAY,aAAA,sBACX,oBAACC,MAAK,MAAA,OAAG,CACI,CACS,CAC3B;AACH,CAAC"}

package/dist/cjs/cookie-theme-toggler/src/styles.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "CookieThemeTogglerStyle", {
-    enumerable: true,
-    get: ()=>CookieThemeTogglerStyle
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CookieThemeTogglerStyle: ()=>CookieThemeTogglerStyle,
+    IconWrapper: ()=>IconWrapper,
+    LightWrapper: ()=>LightWrapper,
+    DarkWrapper: ()=>DarkWrapper
 });
 const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
@@ -22,6 +30,20 @@ const CookieThemeTogglerStyle = (0, _styledComponents.default)(_button.Button).a
   padding-right: 10px;
   line-height: 0;
   font-size: 0;
+
+  width: 44px;
+  height: 44px;
+`;
+const IconWrapper = _styledComponents.default.span`
+  position: absolute;
+  top: -12px;
+  left: -12px;
+`;
+const LightWrapper = (0, _styledComponents.default)(IconWrapper)`
+  visibility: var(--lido-color-lightModeVisibility);
+`;
+const DarkWrapper = (0, _styledComponents.default)(IconWrapper)`
+  visibility: var(--lido-color-darkModeVisibility);
 `;
 
 //# sourceMappingURL=styles.js.map

package/dist/cjs/cookie-theme-toggler/src/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/styles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '@lidofinance/button'\n\nexport const CookieThemeTogglerStyle = styled(Button).attrs({\n  variant: 'text',\n  size: 'xs',\n})`\n  min-width: 0;\n  margin-left: ${({ theme }) => theme.spaceMap.sm}px;\n  padding-left: 10px;\n  padding-right: 10px;\n  line-height: 0;\n  font-size: 0;\n`\n"],"names":["CookieThemeTogglerStyle","styled","Button","attrs","variant","size","theme","spaceMap","sm"],"mappings":"AAAA;;;;+BAGaA,yBAAuB;;aAAvBA,uBAAuB;;;uEAHjB,mBAAmB;wBACf,wBAAqB;AAErC,MAAMA,uBAAuB,GAAGC,IAAAA,iBAAM,QAAA,EAACC,OAAM,OAAA,CAAC,CAACC,KAAK,CAAC;IAC1DC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,IAAI;CACX,CAAC,CAAC;;eAEY,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;;AAKlD,CAAC"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/styles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '@lidofinance/button'\n\nexport const CookieThemeTogglerStyle = styled(Button).attrs({\n  variant: 'text',\n  size: 'xs',\n})`\n  min-width: 0;\n  margin-left: ${({ theme }) => theme.spaceMap.sm}px;\n  padding-left: 10px;\n  padding-right: 10px;\n  line-height: 0;\n  font-size: 0;\n\n  width: 44px;\n  height: 44px;\n`\n\nexport const IconWrapper = styled.span`\n  position: absolute;\n  top: -12px;\n  left: -12px;\n`\n\nexport const LightWrapper = styled(IconWrapper)`\n  visibility: var(--lido-color-lightModeVisibility);\n`\n\nexport const DarkWrapper = styled(IconWrapper)`\n  visibility: var(--lido-color-darkModeVisibility);\n`\n"],"names":["CookieThemeTogglerStyle","IconWrapper","LightWrapper","DarkWrapper","styled","Button","attrs","variant","size","theme","spaceMap","sm","span"],"mappings":"AAAA;;;;;;;;;;;IAGaA,uBAAuB,MAAvBA,uBAAuB;IAevBC,WAAW,MAAXA,WAAW;IAMXC,YAAY,MAAZA,YAAY;IAIZC,WAAW,MAAXA,WAAW;;;uEA5BL,mBAAmB;wBACf,wBAAqB;AAErC,MAAMH,uBAAuB,GAAGI,IAAAA,iBAAM,QAAA,EAACC,OAAM,OAAA,CAAC,CAACC,KAAK,CAAC;IAC1DC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,IAAI;CACX,CAAC,CAAC;;eAEY,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;;;;;AAQlD,CAAC;AAEM,MAAMV,WAAW,GAAGG,iBAAM,QAAA,CAACQ,IAAI,CAAC;;;;AAIvC,CAAC;AAEM,MAAMV,YAAY,GAAGE,IAAAA,iBAAM,QAAA,EAACH,WAAW,CAAC,CAAC;;AAEhD,CAAC;AAEM,MAAME,WAAW,GAAGC,IAAAA,iBAAM,QAAA,EAACH,WAAW,CAAC,CAAC;;AAE/C,CAAC"}

package/dist/cjs/theme/src/base/colors.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "default", {
     get: ()=>_default
 });
 const colors = {
+    darkThemeOpacity: '0',
+    lightThemeOpacity: '1',
     primary: '#00a3ff',
     primaryHover: '#009bf2',
     primaryContrast: '#fff',

package/dist/cjs/theme/src/base/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/base/colors.ts"],"sourcesContent":["const colors = {\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA;;;;+BA2BA,SAAyB;;aAAzB,QAAyB;;AA3BzB,MAAMA,MAAM,GAAG;IACbC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;MAEV,QAAyB,GAAV;IAAEpB,MAAM;CAAE"}
+{"version":3,"sources":["../../../../../packages/theme/src/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA;;;;+BA6BA,SAAyB;;aAAzB,QAAyB;;AA7BzB,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IACtBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;MAEV,QAAyB,GAAV;IAAEtB,MAAM;CAAE"}

package/dist/cjs/theme/src/document-head-contents/element-theme-colors.js

@@ -23,17 +23,17 @@ const darkThemeColors = (0, _generateCssColorVariables.generateCssColorVariables
 const lightThemeColors = (0, _generateCssColorVariables.generateCssColorVariables)(_themes.themeLight.colors);
 let initGlobalColors = _globals.VOID_FN;
 const themeCSSValueString = `
-html, [data-theme='${_globals.ThemeName.light}'] { 
+html, [data-lido-theme='${_globals.ThemeName.light}'] {
     color-theme: light;
     ${lightThemeColors}
 }
 @media (prefers-color-scheme: dark) {
-    html:not([data-theme='${_globals.ThemeName.light}']) { 
+    html:not([data-lido-theme='${_globals.ThemeName.light}']) { 
         color-theme: dark;
         ${darkThemeColors} 
     }
 }
-[data-theme='${_globals.ThemeName.dark}'] {
+[data-lido-theme='${_globals.ThemeName.dark}'] {
     color-theme: dark;
     ${darkThemeColors}
 }`;
@@ -51,6 +51,10 @@ if (typeof window !== 'undefined') {
 }
 const StyleThemeColors = ()=>/*#__PURE__*/ _react.default.createElement("style", _extends({}, {
         [_globals.globalStyleDataAttribute]: true
-    }), "`$", themeCSSValueString, "`");
+    }, {
+        dangerouslySetInnerHTML: {
+            __html: themeCSSValueString
+        }
+    }));
 
 //# sourceMappingURL=element-theme-colors.js.map

package/dist/cjs/theme/src/document-head-contents/element-theme-colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-colors.tsx"],"sourcesContent":["import React from 'react'\nimport { themeDark, themeLight } from '../themes'\nimport { globalStyleDataAttribute, ThemeName, VOID_FN } from '../globals'\nimport { generateCssColorVariables } from './utils/generate-css-color-variables'\n\nconst darkThemeColors = generateCssColorVariables(themeDark.colors)\nconst lightThemeColors = generateCssColorVariables(themeLight.colors)\n\nexport let initGlobalColors = VOID_FN\nexport const themeCSSValueString = `\nhtml, [data-theme='${ThemeName.light}'] { \n    color-theme: light;\n    ${lightThemeColors}\n}\n@media (prefers-color-scheme: dark) {\n    html:not([data-theme='${ThemeName.light}']) { \n        color-theme: dark;\n        ${darkThemeColors} \n    }\n}\n[data-theme='${ThemeName.dark}'] {\n    color-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.innerText = 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 {...{ [globalStyleDataAttribute]: true }}>\n    `${themeCSSValueString}`\n  </style>\n)\n"],"names":["initGlobalColors","themeCSSValueString","StyleThemeColors","darkThemeColors","generateCssColorVariables","themeDark","colors","lightThemeColors","themeLight","VOID_FN","ThemeName","light","dark","window","document","querySelector","globalStyleDataAttribute","style","createElement","setAttribute","innerText","head","appendChild"],"mappings":"AAAA;;;;;;;;;;;IAQWA,gBAAgB,MAAhBA,gBAAgB;IACdC,mBAAmB,MAAnBA,mBAAmB;IA8BnBC,gBAAgB,MAAhBA,gBAAgB;;;;4DAvCX,OAAO;wBACa,WAAW;yBACY,YAAY;2CAC/B,sCAAsC;AAEhF,MAAMC,eAAe,GAAGC,IAAAA,0BAAyB,0BAAA,EAACC,OAAS,UAAA,CAACC,MAAM,CAAC;AACnE,MAAMC,gBAAgB,GAAGH,IAAAA,0BAAyB,0BAAA,EAACI,OAAU,WAAA,CAACF,MAAM,CAAC;AAE9D,IAAIN,gBAAgB,GAAGS,QAAO,QAAA;AAC9B,MAAMR,mBAAmB,GAAG,CAAC;mBACjB,EAAES,QAAS,UAAA,CAACC,KAAK,CAAC;;IAEjC,EAAEJ,gBAAgB,CAAC;;;0BAGG,EAAEG,QAAS,UAAA,CAACC,KAAK,CAAC;;QAEpC,EAAER,eAAe,CAAC;;;aAGb,EAAEO,QAAS,UAAA,CAACE,IAAI,CAAC;;IAE1B,EAAET,eAAe,CAAC;CACrB,CAAC;AAEF,IAAI,OAAOU,MAAM,KAAK,WAAW,EAAE;IACjC,IAAI,CAACC,QAAQ,CAACC,aAAa,CAAC,CAAC,MAAM,EAAEC,QAAwB,yBAAA,CAAC,CAAC,CAAC,CAAC,EAAE;QACjEhB,gBAAgB,GAAG,IAAM;YACvB,MAAMiB,KAAK,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC;YAC7CD,KAAK,CAACE,YAAY,CAACH,QAAwB,yBAAA,EAAE,EAAE,CAAC;YAChDC,KAAK,CAACG,SAAS,GAAGnB,mBAAmB;YAErCa,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;YAChC,gEAAgE;YAChEjB,gBAAgB,GAAGS,QAAO,QAAA;QAC5B,CAAC;IACH,CAAC;AACH,CAAC;AAEM,MAAMP,gBAAgB,GAAG,kBAC9B,6BAACe,OAAK,eAAK;QAAE,CAACD,QAAwB,yBAAA,CAAC,EAAE,IAAI;KAAE,GAAE,IAC7C,EAACf,mBAAmB,EAAC,GACzB,CAAQ,AACT"}
+{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-colors.tsx"],"sourcesContent":["import React from 'react'\nimport { themeDark, themeLight } from '../themes'\nimport { globalStyleDataAttribute, ThemeName, VOID_FN } from '../globals'\nimport { generateCssColorVariables } from './utils/generate-css-color-variables'\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}'] {\n    color-theme: light;\n    ${lightThemeColors}\n}\n@media (prefers-color-scheme: dark) {\n    html:not([data-lido-theme='${ThemeName.light}']) { \n        color-theme: dark;\n        ${darkThemeColors} \n    }\n}\n[data-lido-theme='${ThemeName.dark}'] {\n    color-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.innerText = 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":["initGlobalColors","themeCSSValueString","StyleThemeColors","darkThemeColors","generateCssColorVariables","themeDark","colors","lightThemeColors","themeLight","VOID_FN","ThemeName","light","dark","window","document","querySelector","globalStyleDataAttribute","style","createElement","setAttribute","innerText","head","appendChild","dangerouslySetInnerHTML","__html"],"mappings":"AAAA;;;;;;;;;;;IAQWA,gBAAgB,MAAhBA,gBAAgB;IACdC,mBAAmB,MAAnBA,mBAAmB;IA8BnBC,gBAAgB,MAAhBA,gBAAgB;;;;4DAvCX,OAAO;wBACa,WAAW;yBACY,YAAY;2CAC/B,sCAAsC;AAEhF,MAAMC,eAAe,GAAGC,IAAAA,0BAAyB,0BAAA,EAACC,OAAS,UAAA,CAACC,MAAM,CAAC;AACnE,MAAMC,gBAAgB,GAAGH,IAAAA,0BAAyB,0BAAA,EAACI,OAAU,WAAA,CAACF,MAAM,CAAC;AAE9D,IAAIN,gBAAgB,GAAGS,QAAO,QAAA;AAC9B,MAAMR,mBAAmB,GAAG,CAAC;wBACZ,EAAES,QAAS,UAAA,CAACC,KAAK,CAAC;;IAEtC,EAAEJ,gBAAgB,CAAC;;;+BAGQ,EAAEG,QAAS,UAAA,CAACC,KAAK,CAAC;;QAEzC,EAAER,eAAe,CAAC;;;kBAGR,EAAEO,QAAS,UAAA,CAACE,IAAI,CAAC;;IAE/B,EAAET,eAAe,CAAC;CACrB,CAAC;AAEF,IAAI,OAAOU,MAAM,KAAK,WAAW,EAAE;IACjC,IAAI,CAACC,QAAQ,CAACC,aAAa,CAAC,CAAC,MAAM,EAAEC,QAAwB,yBAAA,CAAC,CAAC,CAAC,CAAC,EAAE;QACjEhB,gBAAgB,GAAG,IAAM;YACvB,MAAMiB,KAAK,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC;YAC7CD,KAAK,CAACE,YAAY,CAACH,QAAwB,yBAAA,EAAE,EAAE,CAAC;YAChDC,KAAK,CAACG,SAAS,GAAGnB,mBAAmB;YAErCa,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;YAChC,gEAAgE;YAChEjB,gBAAgB,GAAGS,QAAO,QAAA;QAC5B,CAAC;IACH,CAAC;AACH,CAAC;AAEM,MAAMP,gBAAgB,GAAG,kBAC9B,6BAACe,OAAK,eACA;QAAE,CAACD,QAAwB,yBAAA,CAAC,EAAE,IAAI;KAAE;QACxCO,uBAAuB,EAAE;YAAEC,MAAM,EAAEvB,mBAAmB;SAAE;OACxD,AACH"}

package/dist/cjs/theme/src/document-head-contents/element-theme-script.js

@@ -17,8 +17,8 @@ _export(exports, {
 const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _globals = require("../globals");
-const _constants = require("../../../cookie-theme-toggler/src/constants");
 const _utils = require("../../../utils/src/index");
+const _constants = require("../../../cookie-theme-toggler/src/constants");
 /**
  *  this FN should be hermetic and has zero external items - it is inlined via .toString()
  * */ /*#__PURE__*/ const themeScriptValueString = function(key) {
@@ -30,9 +30,9 @@ const _utils = require("../../../utils/src/index");
     const setTheme = ()=>{
         const themeCookie = document.cookie.split(';').find((cookie)=>cookie.trim().startsWith(key + '='));
         if (themeCookie) {
-            document.documentElement.dataset.theme = themeCookie.split('=')[1];
+            document.documentElement.dataset.lidoTheme = themeCookie.split('=')[1];
         } else {
-            delete document.documentElement.dataset.theme;
+            delete document.documentElement.dataset.lidoTheme;
         }
     };
     setTheme();
@@ -50,6 +50,10 @@ let initGlobalCookieTheme = typeof window === 'undefined' ? _globals.VOID_FN : (
         setTheme();
     };
 };
-const ScriptThemeValue = ()=>/*#__PURE__*/ _react.default.createElement("script", null, "`($", themeScriptValueString.toString(), ")($", _globals.STORAGE_THEME_MANUAL_KEY, ")`");
+const ScriptThemeValue = ()=>/*#__PURE__*/ _react.default.createElement("script", {
+        dangerouslySetInnerHTML: {
+            __html: `(${themeScriptValueString.toString()})("${_globals.STORAGE_THEME_MANUAL_KEY}")`
+        }
+    });
 
 //# sourceMappingURL=element-theme-script.js.map

package/dist/cjs/theme/src/document-head-contents/element-theme-script.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-script.tsx"],"sourcesContent":["import React from 'react'\nimport { STORAGE_THEME_MANUAL_KEY, ThemeName, VOID_FN } from '../globals'\nimport {\n  COOKIE_THEME_MANUAL_KEY,\n  COOKIES_THEME_EXPIRES_DAYS,\n} from '../../../cookie-theme-toggler/src/constants'\nimport { getTopLevelDomain } from '@lidofinance/utils'\n\n/**\n *  this FN should be hermetic and has zero external items - it is inlined via .toString()\n * */\n/*#__PURE__*/\nconst themeScriptValueString = function (key: string) {\n  if (!window.matchMedia) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {}\n  }\n  const match = window.matchMedia('(prefers-color-scheme: dark)')\n  const setTheme = () => {\n    const themeCookie = document.cookie\n      .split(';')\n      .find((cookie) => cookie.trim().startsWith(key + '='))\n    if (themeCookie) {\n      document.documentElement.dataset.theme = themeCookie.split('=')[1]\n    } else {\n      delete document.documentElement.dataset.theme\n    }\n  }\n  setTheme()\n  match.addEventListener('change', setTheme)\n  return setTheme\n}\n\nexport const themeScriptValue =\n  typeof window !== 'undefined' ? themeScriptValueString : () => VOID_FN\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nexport let updateGlobalTheme: (theme: string) => void = VOID_FN\n\nexport let initGlobalCookieTheme =\n  typeof window === 'undefined'\n    ? VOID_FN\n    : () => {\n        const setTheme = themeScriptValueString(STORAGE_THEME_MANUAL_KEY)\n        initGlobalCookieTheme = VOID_FN\n        const topLevelDomain = getTopLevelDomain()\n        updateGlobalTheme = (theme: ThemeName) => {\n          document.cookie = `${COOKIE_THEME_MANUAL_KEY}=${theme};expires=${COOKIES_THEME_EXPIRES_DAYS};path=/;domain=${topLevelDomain};samesite=None;secure;`\n          setTheme()\n        }\n      }\n\nexport const ScriptThemeValue = () => (\n  <script>\n    `(${themeScriptValueString.toString()})(${STORAGE_THEME_MANUAL_KEY})`\n  </script>\n)\n"],"names":["themeScriptValue","updateGlobalTheme","initGlobalCookieTheme","ScriptThemeValue","themeScriptValueString","key","window","matchMedia","match","setTheme","themeCookie","document","cookie","split","find","trim","startsWith","documentElement","dataset","theme","addEventListener","VOID_FN","STORAGE_THEME_MANUAL_KEY","topLevelDomain","getTopLevelDomain","COOKIE_THEME_MANUAL_KEY","COOKIES_THEME_EXPIRES_DAYS","script","toString"],"mappings":"AAAA;;;;;;;;;;;IAiCaA,gBAAgB,MAAhBA,gBAAgB;IAGlBC,iBAAiB,MAAjBA,iBAAiB;IAEjBC,qBAAqB,MAArBA,qBAAqB;IAanBC,gBAAgB,MAAhBA,gBAAgB;;;4DAnDX,OAAO;yBACoC,YAAY;2BAIlE,6CAA6C;uBAClB,0BAAoB;AAEtD;;GAEG,GACH,WAAW,GACX,MAAMC,sBAAsB,GAAG,SAAUC,GAAW,EAAE;IACpD,IAAI,CAACC,MAAM,CAACC,UAAU,EAAE;QACtB,gEAAgE;QAChE,OAAO,IAAM,CAAC,CAAC,CAAA;IACjB,CAAC;IACD,MAAMC,KAAK,GAAGF,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;IAC/D,MAAME,QAAQ,GAAG,IAAM;QACrB,MAAMC,WAAW,GAAGC,QAAQ,CAACC,MAAM,CAChCC,KAAK,CAAC,GAAG,CAAC,CACVC,IAAI,CAAC,CAACF,MAAM,GAAKA,MAAM,CAACG,IAAI,EAAE,CAACC,UAAU,CAACX,GAAG,GAAG,GAAG,CAAC,CAAC;QACxD,IAAIK,WAAW,EAAE;YACfC,QAAQ,CAACM,eAAe,CAACC,OAAO,CAACC,KAAK,GAAGT,WAAW,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACpE,OAAO;YACL,OAAOF,QAAQ,CAACM,eAAe,CAACC,OAAO,CAACC,KAAK;QAC/C,CAAC;IACH,CAAC;IACDV,QAAQ,EAAE;IACVD,KAAK,CAACY,gBAAgB,CAAC,QAAQ,EAAEX,QAAQ,CAAC;IAC1C,OAAOA,QAAQ,CAAA;AACjB,CAAC;AAEM,MAAMT,gBAAgB,GAC3B,OAAOM,MAAM,KAAK,WAAW,GAAGF,sBAAsB,GAAG,IAAMiB,QAAO,QAAA;AAEjE,IAAIpB,iBAAiB,GAA4BoB,QAAO,QAAA;AAExD,IAAInB,qBAAqB,GAC9B,OAAOI,MAAM,KAAK,WAAW,GACzBe,QAAO,QAAA,GACP,IAAM;IACJ,MAAMZ,QAAQ,GAAGL,sBAAsB,CAACkB,QAAwB,yBAAA,CAAC;IACjEpB,qBAAqB,GAAGmB,QAAO,QAAA;IAC/B,MAAME,cAAc,GAAGC,IAAAA,MAAiB,kBAAA,GAAE;IAC1CvB,iBAAiB,GAAG,CAACkB,KAAgB,GAAK;QACxCR,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAEa,UAAuB,wBAAA,CAAC,CAAC,EAAEN,KAAK,CAAC,SAAS,EAAEO,UAA0B,2BAAA,CAAC,eAAe,EAAEH,cAAc,CAAC,sBAAsB,CAAC;QACnJd,QAAQ,EAAE;IACZ,CAAC;AACH,CAAC;AAEA,MAAMN,gBAAgB,GAAG,kBAC9B,6BAACwB,QAAM,QAAC,KACH,EAACvB,sBAAsB,CAACwB,QAAQ,EAAE,EAAC,KAAG,EAACN,QAAwB,yBAAA,EAAC,IACrE,CAAS,AACV"}
+{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-script.tsx"],"sourcesContent":["import React from 'react'\nimport { STORAGE_THEME_MANUAL_KEY, ThemeName, VOID_FN } from '../globals'\nimport { getTopLevelDomain } from '@lidofinance/utils'\nimport {COOKIE_THEME_MANUAL_KEY, COOKIES_THEME_EXPIRES_DAYS} from \"../../../cookie-theme-toggler/src/constants\";\n\n/**\n *  this FN should be hermetic and has zero external items - it is inlined via .toString()\n * */\n/*#__PURE__*/\nconst themeScriptValueString = function (key: string) {\n  if (!window.matchMedia) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {}\n  }\n  const match = window.matchMedia('(prefers-color-scheme: dark)')\n  const setTheme = () => {\n    const themeCookie = document.cookie\n      .split(';')\n      .find((cookie) => cookie.trim().startsWith(key + '='))\n    if (themeCookie) {\n      document.documentElement.dataset.lidoTheme = themeCookie.split('=')[1]\n    } else {\n      delete document.documentElement.dataset.lidoTheme\n    }\n  }\n  setTheme()\n  match.addEventListener('change', setTheme)\n  return setTheme\n}\n\nexport const themeScriptValue =\n  typeof window !== 'undefined' ? themeScriptValueString : () => VOID_FN\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nexport let updateGlobalTheme: (theme: string) => void = VOID_FN\n\nexport let initGlobalCookieTheme =\n  typeof window === 'undefined'\n    ? VOID_FN\n    : () => {\n        const setTheme = themeScriptValueString(STORAGE_THEME_MANUAL_KEY)\n        initGlobalCookieTheme = VOID_FN\n        const topLevelDomain = getTopLevelDomain()\n        updateGlobalTheme = (theme: ThemeName) => {\n          document.cookie = `${COOKIE_THEME_MANUAL_KEY}=${theme};expires=${COOKIES_THEME_EXPIRES_DAYS};path=/;domain=${topLevelDomain};samesite=None;secure;`\n          setTheme()\n        }\n      }\n\nexport const ScriptThemeValue = () => (\n  <script\n    dangerouslySetInnerHTML={{\n      __html: `(${themeScriptValueString.toString()})(\"${STORAGE_THEME_MANUAL_KEY}\")`,\n    }}\n  />\n)\n"],"names":["themeScriptValue","updateGlobalTheme","initGlobalCookieTheme","ScriptThemeValue","themeScriptValueString","key","window","matchMedia","match","setTheme","themeCookie","document","cookie","split","find","trim","startsWith","documentElement","dataset","lidoTheme","addEventListener","VOID_FN","STORAGE_THEME_MANUAL_KEY","topLevelDomain","getTopLevelDomain","theme","COOKIE_THEME_MANUAL_KEY","COOKIES_THEME_EXPIRES_DAYS","script","dangerouslySetInnerHTML","__html","toString"],"mappings":"AAAA;;;;;;;;;;;IA8BaA,gBAAgB,MAAhBA,gBAAgB;IAGlBC,iBAAiB,MAAjBA,iBAAiB;IAEjBC,qBAAqB,MAArBA,qBAAqB;IAanBC,gBAAgB,MAAhBA,gBAAgB;;;4DAhDX,OAAO;yBACoC,YAAY;uBACvC,0BAAoB;2BACY,6CAA6C;AAE/G;;GAEG,GACH,WAAW,GACX,MAAMC,sBAAsB,GAAG,SAAUC,GAAW,EAAE;IACpD,IAAI,CAACC,MAAM,CAACC,UAAU,EAAE;QACtB,gEAAgE;QAChE,OAAO,IAAM,CAAC,CAAC,CAAA;IACjB,CAAC;IACD,MAAMC,KAAK,GAAGF,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;IAC/D,MAAME,QAAQ,GAAG,IAAM;QACrB,MAAMC,WAAW,GAAGC,QAAQ,CAACC,MAAM,CAChCC,KAAK,CAAC,GAAG,CAAC,CACVC,IAAI,CAAC,CAACF,MAAM,GAAKA,MAAM,CAACG,IAAI,EAAE,CAACC,UAAU,CAACX,GAAG,GAAG,GAAG,CAAC,CAAC;QACxD,IAAIK,WAAW,EAAE;YACfC,QAAQ,CAACM,eAAe,CAACC,OAAO,CAACC,SAAS,GAAGT,WAAW,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACxE,OAAO;YACL,OAAOF,QAAQ,CAACM,eAAe,CAACC,OAAO,CAACC,SAAS;QACnD,CAAC;IACH,CAAC;IACDV,QAAQ,EAAE;IACVD,KAAK,CAACY,gBAAgB,CAAC,QAAQ,EAAEX,QAAQ,CAAC;IAC1C,OAAOA,QAAQ,CAAA;AACjB,CAAC;AAEM,MAAMT,gBAAgB,GAC3B,OAAOM,MAAM,KAAK,WAAW,GAAGF,sBAAsB,GAAG,IAAMiB,QAAO,QAAA;AAEjE,IAAIpB,iBAAiB,GAA4BoB,QAAO,QAAA;AAExD,IAAInB,qBAAqB,GAC9B,OAAOI,MAAM,KAAK,WAAW,GACzBe,QAAO,QAAA,GACP,IAAM;IACJ,MAAMZ,QAAQ,GAAGL,sBAAsB,CAACkB,QAAwB,yBAAA,CAAC;IACjEpB,qBAAqB,GAAGmB,QAAO,QAAA;IAC/B,MAAME,cAAc,GAAGC,IAAAA,MAAiB,kBAAA,GAAE;IAC1CvB,iBAAiB,GAAG,CAACwB,KAAgB,GAAK;QACxCd,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAEc,UAAuB,wBAAA,CAAC,CAAC,EAAED,KAAK,CAAC,SAAS,EAAEE,UAA0B,2BAAA,CAAC,eAAe,EAAEJ,cAAc,CAAC,sBAAsB,CAAC;QACnJd,QAAQ,EAAE;IACZ,CAAC;AACH,CAAC;AAEA,MAAMN,gBAAgB,GAAG,kBAC9B,6BAACyB,QAAM;QACLC,uBAAuB,EAAE;YACvBC,MAAM,EAAE,CAAC,CAAC,EAAE1B,sBAAsB,CAAC2B,QAAQ,EAAE,CAAC,GAAG,EAAET,QAAwB,yBAAA,CAAC,EAAE,CAAC;SAChF;MACD,AACH"}

package/dist/cjs/theme/src/provider.js

@@ -14,13 +14,13 @@ _export(exports, {
     DarkThemeProvider: ()=>DarkThemeProvider
 });
 const _extends = require("@swc/helpers/lib/_extends.js").default;
-const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _styledComponents = /*#__PURE__*/ _interopRequireWildcard(require("styled-components"));
 const _themes = require("./themes");
 const _documentHeadContents = require("./document-head-contents/index");
 const _generateCssColorVariables = require("./document-head-contents/utils/generate-css-color-variables");
+const _cookieThemeToggler = require("../../cookie-theme-toggler/src");
 // you need this if you're using themes, so we initiate this automatically
 (0, _documentHeadContents.initColors)();
 const StyledWrapper = _styledComponents.default.div`
@@ -30,12 +30,30 @@ const StyledWrapper = _styledComponents.default.div`
     return colors ? (0, _generateCssColorVariables.generateCssColorVariables)(colors) : null;
 }}
 `;
-const ThemeProvider = (param)=>/*#__PURE__*/ {
-    let { theme =_themes.themeDefault , children , ...rest } = param;
-    return _react.default.createElement(StyledWrapper, {
-        colors: theme.colors,
-        "data-lido-theme": theme.name
-    }, /*#__PURE__*/ _react.default.createElement(_styledComponents.ThemeProvider, _extends({
+const ThemeProvider = (param)=>{
+    let { theme =_themes.themeDefault , children , isAutoDetectedTheme =false , ...rest } = param;
+    const parentTheme = (0, _cookieThemeToggler.useThemeToggle)();
+    (0, _react.useEffect)(()=>{
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (isAutoDetectedTheme) {
+            return;
+        }
+        if (!parentTheme.themeName) {
+            return;
+        }
+        document.documentElement.dataset.lidoTheme = theme.name;
+    }, [
+        isAutoDetectedTheme,
+        parentTheme.themeName,
+        theme.name
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(StyledWrapper, _extends({
+        colors: isAutoDetectedTheme ? undefined : theme.colors
+    }, isAutoDetectedTheme ? {} : {
+        'data-lido-theme': theme.name
+    }), /*#__PURE__*/ _react.default.createElement(_styledComponents.ThemeProvider, _extends({
         theme: theme
     }, rest), children));
 };

package/dist/cjs/theme/src/provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/theme/src/provider.tsx"],"sourcesContent":["import React, { FC, PropsWithChildren } from 'react'\nimport styled, {\n  ThemeProvider as StyledThemeProvider,\n  ThemeProviderProps,\n} from 'styled-components'\nimport { themeDark, themeDefault, themeLight } from './themes'\nimport { Theme } from './types'\nimport { initColors } from './document-head-contents'\nimport { generateCssColorVariables } from './document-head-contents/utils/generate-css-color-variables'\n\n// you need this if you're using themes, so we initiate this automatically\ninitColors()\n\nconst StyledWrapper = styled.div<{ colors?: Record<string, string> }>`\n  display: contents;\n  ${({ colors }) => (colors ? generateCssColorVariables(colors) : null)}\n`\nexport const ThemeProvider: FC<PropsWithChildren<{ theme: Theme }>> = ({\n  theme = themeDefault,\n  children,\n  ...rest\n}) => (\n  <StyledWrapper colors={theme.colors} data-lido-theme={theme.name}>\n    <StyledThemeProvider theme={theme} {...rest}>\n      {children}\n    </StyledThemeProvider>\n  </StyledWrapper>\n)\n\ntype BoundThemeProvider = FC<Omit<ThemeProviderProps<Theme>, 'theme'>>\n\nexport const LightThemeProvider: BoundThemeProvider = (props) => (\n  <ThemeProvider {...props} theme={themeLight} />\n)\n\nexport const DarkThemeProvider: BoundThemeProvider = (props) => (\n  <ThemeProvider {...props} theme={themeDark} />\n)\n"],"names":["ThemeProvider","LightThemeProvider","DarkThemeProvider","initColors","StyledWrapper","styled","div","colors","generateCssColorVariables","theme","themeDefault","children","rest","data-lido-theme","name","StyledThemeProvider","props","themeLight","themeDark"],"mappings":"AAAA;;;;;;;;;;;IAiBaA,aAAa,MAAbA,aAAa;IAcbC,kBAAkB,MAAlBA,kBAAkB;IAIlBC,iBAAiB,MAAjBA,iBAAiB;;;;;4DAnCe,OAAO;wEAI7C,mBAAmB;wBAC0B,UAAU;sCAEnC,gCAA0B;2CACX,6DAA6D;AAEvG,0EAA0E;AAC1EC,IAAAA,qBAAU,WAAA,GAAE;AAEZ,MAAMC,aAAa,GAAGC,iBAAM,QAAA,CAACC,GAAG,AAAqC,CAAC;;EAEpE,EAAE,SAAgB;QAAf,EAAEC,MAAM,CAAA,EAAE;WAAMA,MAAM,GAAGC,IAAAA,0BAAyB,0BAAA,EAACD,MAAM,CAAC,GAAG,IAAI;AAAA,CAAC,CAAC;AACxE,CAAC;AACM,MAAMP,aAAa,GAA4C,uBAKpE;QALqE,EACrES,KAAK,EAAGC,OAAY,aAAA,CAAA,EACpBC,QAAQ,CAAA,EACR,GAAGC,IAAI,EACR;WACC,6BAACR,aAAa;QAACG,MAAM,EAAEE,KAAK,CAACF,MAAM;QAAEM,iBAAe,EAAEJ,KAAK,CAACK,IAAI;qBAC9D,6BAACC,iBAAmB,cAAA;QAACN,KAAK,EAAEA,KAAK;OAAMG,IAAI,GACxCD,QAAQ,CACW,CACR;AAAD,CAChB;AAIM,MAAMV,kBAAkB,GAAuB,CAACe,KAAK,iBAC1D,6BAAChB,aAAa,eAAKgB,KAAK;QAAEP,KAAK,EAAEQ,OAAU,WAAA;OAAI,AAChD;AAEM,MAAMf,iBAAiB,GAAuB,CAACc,KAAK,iBACzD,6BAAChB,aAAa,eAAKgB,KAAK;QAAEP,KAAK,EAAES,OAAS,UAAA;OAAI,AAC/C"}
+{"version":3,"sources":["../../../../packages/theme/src/provider.tsx"],"sourcesContent":["import React, { FC, PropsWithChildren, useEffect } from 'react'\nimport styled, {\n  ThemeProvider as StyledThemeProvider,\n  ThemeProviderProps,\n} from 'styled-components'\nimport { themeDark, themeDefault, themeLight } from './themes'\nimport { Theme } from './types'\nimport { initColors } from './document-head-contents'\nimport { generateCssColorVariables } from './document-head-contents/utils/generate-css-color-variables'\nimport { useThemeToggle } from '@lidofinance/cookie-theme-toggler'\n\n// you need this if you're using themes, so we initiate this automatically\ninitColors()\n\nconst StyledWrapper = styled.div<{ colors?: Record<string, string> }>`\n  display: contents;\n  ${({ colors }) => (colors ? generateCssColorVariables(colors) : null)}\n`\nexport const ThemeProvider: FC<\n  PropsWithChildren<{ theme: Theme; isAutoDetectedTheme?: boolean }>\n> = ({\n  theme = themeDefault,\n  children,\n  isAutoDetectedTheme = false,\n  ...rest\n}) => {\n  const parentTheme = useThemeToggle()\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    if (isAutoDetectedTheme) {\n      return\n    }\n    if (!parentTheme.themeName) {\n      return\n    }\n    document.documentElement.dataset.lidoTheme = theme.name\n  }, [isAutoDetectedTheme, parentTheme.themeName, theme.name])\n  return (\n    <StyledWrapper\n      colors={isAutoDetectedTheme ? undefined : theme.colors}\n      {...(isAutoDetectedTheme ? {} : { 'data-lido-theme': theme.name })}\n    >\n      <StyledThemeProvider theme={theme} {...rest}>\n        {children}\n      </StyledThemeProvider>\n    </StyledWrapper>\n  )\n}\n\ntype BoundThemeProvider = FC<Omit<ThemeProviderProps<Theme>, 'theme'>>\n\nexport const LightThemeProvider: BoundThemeProvider = (props) => (\n  <ThemeProvider {...props} theme={themeLight} />\n)\n\nexport const DarkThemeProvider: BoundThemeProvider = (props) => (\n  <ThemeProvider {...props} theme={themeDark} />\n)\n"],"names":["ThemeProvider","LightThemeProvider","DarkThemeProvider","initColors","StyledWrapper","styled","div","colors","generateCssColorVariables","theme","themeDefault","children","isAutoDetectedTheme","rest","parentTheme","useThemeToggle","useEffect","window","themeName","document","documentElement","dataset","lidoTheme","name","undefined","StyledThemeProvider","props","themeLight","themeDark"],"mappings":"AAAA;;;;;;;;;;;IAkBaA,aAAa,MAAbA,aAAa;IAmCbC,kBAAkB,MAAlBA,kBAAkB;IAIlBC,iBAAiB,MAAjBA,iBAAiB;;;;6DAzD0B,OAAO;wEAIxD,mBAAmB;wBAC0B,UAAU;sCAEnC,gCAA0B;2CACX,6DAA6D;oCACxE,gCAAmC;AAElE,0EAA0E;AAC1EC,IAAAA,qBAAU,WAAA,GAAE;AAEZ,MAAMC,aAAa,GAAGC,iBAAM,QAAA,CAACC,GAAG,AAAqC,CAAC;;EAEpE,EAAE,SAAgB;QAAf,EAAEC,MAAM,CAAA,EAAE;WAAMA,MAAM,GAAGC,IAAAA,0BAAyB,0BAAA,EAACD,MAAM,CAAC,GAAG,IAAI;AAAA,CAAC,CAAC;AACxE,CAAC;AACM,MAAMP,aAAa,GAEtB,SAKE;QALD,EACHS,KAAK,EAAGC,OAAY,aAAA,CAAA,EACpBC,QAAQ,CAAA,EACRC,mBAAmB,EAAG,KAAK,CAAA,EAC3B,GAAGC,IAAI,EACR;IACC,MAAMC,WAAW,GAAGC,IAAAA,mBAAc,eAAA,GAAE;IACpCC,IAAAA,MAAS,UAAA,EAAC,IAAM;QACd,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;YACjC,OAAM;QACR,CAAC;QACD,IAAIL,mBAAmB,EAAE;YACvB,OAAM;QACR,CAAC;QACD,IAAI,CAACE,WAAW,CAACI,SAAS,EAAE;YAC1B,OAAM;QACR,CAAC;QACDC,QAAQ,CAACC,eAAe,CAACC,OAAO,CAACC,SAAS,GAAGb,KAAK,CAACc,IAAI;IACzD,CAAC,EAAE;QAACX,mBAAmB;QAAEE,WAAW,CAACI,SAAS;QAAET,KAAK,CAACc,IAAI;KAAC,CAAC;IAC5D,qBACE,6BAACnB,aAAa;QACZG,MAAM,EAAEK,mBAAmB,GAAGY,SAAS,GAAGf,KAAK,CAACF,MAAM;OACjDK,mBAAmB,GAAG,EAAE,GAAG;QAAE,iBAAiB,EAAEH,KAAK,CAACc,IAAI;KAAE,iBAEjE,6BAACE,iBAAmB,cAAA;QAAChB,KAAK,EAAEA,KAAK;OAAMI,IAAI,GACxCF,QAAQ,CACW,CACR,CACjB;AACH,CAAC;AAIM,MAAMV,kBAAkB,GAAuB,CAACyB,KAAK,iBAC1D,6BAAC1B,aAAa,eAAK0B,KAAK;QAAEjB,KAAK,EAAEkB,OAAU,WAAA;OAAI,AAChD;AAEM,MAAMzB,iBAAiB,GAAuB,CAACwB,KAAK,iBACzD,6BAAC1B,aAAa,eAAK0B,KAAK;QAAEjB,KAAK,EAAEmB,OAAS,UAAA;OAAI,AAC/C"}

package/dist/cjs/theme/src/themes.js

@@ -21,6 +21,10 @@ const themeLight = {
     name: _globals.ThemeName.light,
     colors: {
         ..._base.default.colors,
+        darkThemeOpacity: '0',
+        lightThemeOpacity: '1',
+        lightModeVisibility: 'visible',
+        darkModeVisibility: 'hidden',
         secondary: '#273852',
         secondaryHover: '#212f45',
         secondaryContrast: '#fff',
@@ -49,6 +53,10 @@ const themeDark = {
     name: _globals.ThemeName.dark,
     colors: {
         ..._base.default.colors,
+        darkThemeOpacity: '1',
+        lightThemeOpacity: '0',
+        lightModeVisibility: 'hidden',
+        darkModeVisibility: 'visible',
         secondary: 'rgba(255, 255, 255, .8)',
         secondaryHover: '#fff',
         secondaryContrast: '#273852',

package/dist/cjs/theme/src/themes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/theme/src/themes.ts"],"sourcesContent":["import themeBase from './base'\nimport { ThemeName } from './globals'\n\nexport const themeLight = {\n  ...themeBase,\n  name: ThemeName.light,\n  colors: {\n    ...themeBase.colors,\n\n    secondary: '#273852',\n    secondaryHover: '#212f45',\n    secondaryContrast: '#fff',\n\n    background: '#f2f4f6',\n    backgroundDarken: '#dae0e5',\n\n    foreground: '#fff',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(39, 56, 82, 0.08)',\n    shadowDark: 'rgba(0, 0, 0, .25)',\n\n    text: '#273852',\n    textSecondary: '#7a8aa0',\n    accentText: '#273852',\n\n    border: 'rgba(0, 10, 61, 0.12)',\n    borderActive: 'rgba(0, 10, 61, 0.48)',\n    borderHover: 'rgba(0, 10, 61, 0.24)',\n    borderLight: '#dfe5eb',\n    accentBorder: 'rgba(0, 10, 61, 0.12)',\n    accentBorderHover: 'rgba(0, 10, 61, 0.24)',\n\n    controlBg: '#fff',\n    accentControlBg: 'rgba(239, 242, 246, 0.56)',\n\n    popupMenuItemBgActiveHover: '#000a3d',\n  },\n}\n\nexport const themeDark = {\n  ...themeBase,\n  name: ThemeName.dark,\n  colors: {\n    ...themeBase.colors,\n\n    secondary: 'rgba(255, 255, 255, .8)',\n    secondaryHover: '#fff',\n    secondaryContrast: '#273852',\n\n    background: '#1c1c21',\n    backgroundDarken: '#131317',\n\n    foreground: '#34343d',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(0, 0, 0, .25)',\n    shadowDark: 'rgba(0, 0, 0, .5)',\n\n    text: '#fff',\n    textSecondary: 'rgba(255, 255, 255, .8)',\n    accentText: '#fff',\n\n    border: 'rgba(255, 255, 255, 0.12)',\n    borderActive: 'rgba(255, 255, 255, 0.48)',\n    borderHover: 'rgba(255, 255, 255, 0.24)',\n    borderLight: '#484855',\n    accentBorder: 'rgba(255, 255, 255, 0.12)',\n    accentBorderHover: 'rgba(255, 255, 255, 0.24)',\n\n    controlBg: '#2f2f37',\n    accentControlBg: 'rgba(39, 39, 46, 0.56)',\n\n    popupMenuItemBgActiveHover: '#fff',\n  },\n}\n\nexport const themeDefault = themeLight\n"],"names":["themeLight","themeDark","themeDefault","themeBase","name","ThemeName","light","colors","secondary","secondaryHover","secondaryContrast","background","backgroundDarken","foreground","overlay","shadowLight","shadowDark","text","textSecondary","accentText","border","borderActive","borderHover","borderLight","accentBorder","accentBorderHover","controlBg","accentControlBg","popupMenuItemBgActiveHover","dark"],"mappings":"AAAA;;;;;;;;;;;IAGaA,UAAU,MAAVA,UAAU;IAsCVC,SAAS,MAATA,SAAS;IAsCTC,YAAY,MAAZA,YAAY;;;2DA/EH,cAAQ;yBACJ,WAAW;AAE9B,MAAMF,UAAU,GAAG;IACxB,GAAGG,KAAS,QAAA;IACZC,IAAI,EAAEC,QAAS,UAAA,CAACC,KAAK;IACrBC,MAAM,EAAE;QACN,GAAGJ,KAAS,QAAA,CAACI,MAAM;QAEnBC,SAAS,EAAE,SAAS;QACpBC,cAAc,EAAE,SAAS;QACzBC,iBAAiB,EAAE,MAAM;QAEzBC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAE3BC,UAAU,EAAE,MAAM;QAElBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,wBAAwB;QACrCC,UAAU,EAAE,oBAAoB;QAEhCC,IAAI,EAAE,SAAS;QACfC,aAAa,EAAE,SAAS;QACxBC,UAAU,EAAE,SAAS;QAErBC,MAAM,EAAE,uBAAuB;QAC/BC,YAAY,EAAE,uBAAuB;QACrCC,WAAW,EAAE,uBAAuB;QACpCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,uBAAuB;QACrCC,iBAAiB,EAAE,uBAAuB;QAE1CC,SAAS,EAAE,MAAM;QACjBC,eAAe,EAAE,2BAA2B;QAE5CC,0BAA0B,EAAE,SAAS;KACtC;CACF;AAEM,MAAM3B,SAAS,GAAG;IACvB,GAAGE,KAAS,QAAA;IACZC,IAAI,EAAEC,QAAS,UAAA,CAACwB,IAAI;IACpBtB,MAAM,EAAE;QACN,GAAGJ,KAAS,QAAA,CAACI,MAAM;QAEnBC,SAAS,EAAE,yBAAyB;QACpCC,cAAc,EAAE,MAAM;QACtBC,iBAAiB,EAAE,SAAS;QAE5BC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAE3BC,UAAU,EAAE,SAAS;QAErBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,oBAAoB;QACjCC,UAAU,EAAE,mBAAmB;QAE/BC,IAAI,EAAE,MAAM;QACZC,aAAa,EAAE,yBAAyB;QACxCC,UAAU,EAAE,MAAM;QAElBC,MAAM,EAAE,2BAA2B;QACnCC,YAAY,EAAE,2BAA2B;QACzCC,WAAW,EAAE,2BAA2B;QACxCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,2BAA2B;QACzCC,iBAAiB,EAAE,2BAA2B;QAE9CC,SAAS,EAAE,SAAS;QACpBC,eAAe,EAAE,wBAAwB;QAEzCC,0BAA0B,EAAE,MAAM;KACnC;CACF;AAEM,MAAM1B,YAAY,GAAGF,UAAU"}
+{"version":3,"sources":["../../../../packages/theme/src/themes.ts"],"sourcesContent":["import themeBase from './base'\nimport { ThemeName } from './globals'\n\nexport const themeLight = {\n  ...themeBase,\n  name: ThemeName.light,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '0',\n    lightThemeOpacity: '1',\n\n    lightModeVisibility: 'visible',\n    darkModeVisibility: 'hidden',\n\n    secondary: '#273852',\n    secondaryHover: '#212f45',\n    secondaryContrast: '#fff',\n\n    background: '#f2f4f6',\n    backgroundDarken: '#dae0e5',\n\n    foreground: '#fff',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(39, 56, 82, 0.08)',\n    shadowDark: 'rgba(0, 0, 0, .25)',\n\n    text: '#273852',\n    textSecondary: '#7a8aa0',\n    accentText: '#273852',\n\n    border: 'rgba(0, 10, 61, 0.12)',\n    borderActive: 'rgba(0, 10, 61, 0.48)',\n    borderHover: 'rgba(0, 10, 61, 0.24)',\n    borderLight: '#dfe5eb',\n    accentBorder: 'rgba(0, 10, 61, 0.12)',\n    accentBorderHover: 'rgba(0, 10, 61, 0.24)',\n\n    controlBg: '#fff',\n    accentControlBg: 'rgba(239, 242, 246, 0.56)',\n\n    popupMenuItemBgActiveHover: '#000a3d',\n  },\n}\n\nexport const themeDark = {\n  ...themeBase,\n  name: ThemeName.dark,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '1',\n    lightThemeOpacity: '0',\n\n    lightModeVisibility: 'hidden',\n    darkModeVisibility: 'visible',\n\n    secondary: 'rgba(255, 255, 255, .8)',\n    secondaryHover: '#fff',\n    secondaryContrast: '#273852',\n\n    background: '#1c1c21',\n    backgroundDarken: '#131317',\n\n    foreground: '#34343d',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(0, 0, 0, .25)',\n    shadowDark: 'rgba(0, 0, 0, .5)',\n\n    text: '#fff',\n    textSecondary: 'rgba(255, 255, 255, .8)',\n    accentText: '#fff',\n\n    border: 'rgba(255, 255, 255, 0.12)',\n    borderActive: 'rgba(255, 255, 255, 0.48)',\n    borderHover: 'rgba(255, 255, 255, 0.24)',\n    borderLight: '#484855',\n    accentBorder: 'rgba(255, 255, 255, 0.12)',\n    accentBorderHover: 'rgba(255, 255, 255, 0.24)',\n\n    controlBg: '#2f2f37',\n    accentControlBg: 'rgba(39, 39, 46, 0.56)',\n\n    popupMenuItemBgActiveHover: '#fff',\n  },\n}\n\nexport const themeDefault = themeLight\n"],"names":["themeLight","themeDark","themeDefault","themeBase","name","ThemeName","light","colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","secondary","secondaryHover","secondaryContrast","background","backgroundDarken","foreground","overlay","shadowLight","shadowDark","text","textSecondary","accentText","border","borderActive","borderHover","borderLight","accentBorder","accentBorderHover","controlBg","accentControlBg","popupMenuItemBgActiveHover","dark"],"mappings":"AAAA;;;;;;;;;;;IAGaA,UAAU,MAAVA,UAAU;IA2CVC,SAAS,MAATA,SAAS;IA2CTC,YAAY,MAAZA,YAAY;;;2DAzFH,cAAQ;yBACJ,WAAW;AAE9B,MAAMF,UAAU,GAAG;IACxB,GAAGG,KAAS,QAAA;IACZC,IAAI,EAAEC,QAAS,UAAA,CAACC,KAAK;IACrBC,MAAM,EAAE;QACN,GAAGJ,KAAS,QAAA,CAACI,MAAM;QACnBC,gBAAgB,EAAE,GAAG;QACrBC,iBAAiB,EAAE,GAAG;QAEtBC,mBAAmB,EAAE,SAAS;QAC9BC,kBAAkB,EAAE,QAAQ;QAE5BC,SAAS,EAAE,SAAS;QACpBC,cAAc,EAAE,SAAS;QACzBC,iBAAiB,EAAE,MAAM;QAEzBC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAE3BC,UAAU,EAAE,MAAM;QAElBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,wBAAwB;QACrCC,UAAU,EAAE,oBAAoB;QAEhCC,IAAI,EAAE,SAAS;QACfC,aAAa,EAAE,SAAS;QACxBC,UAAU,EAAE,SAAS;QAErBC,MAAM,EAAE,uBAAuB;QAC/BC,YAAY,EAAE,uBAAuB;QACrCC,WAAW,EAAE,uBAAuB;QACpCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,uBAAuB;QACrCC,iBAAiB,EAAE,uBAAuB;QAE1CC,SAAS,EAAE,MAAM;QACjBC,eAAe,EAAE,2BAA2B;QAE5CC,0BAA0B,EAAE,SAAS;KACtC;CACF;AAEM,MAAM/B,SAAS,GAAG;IACvB,GAAGE,KAAS,QAAA;IACZC,IAAI,EAAEC,QAAS,UAAA,CAAC4B,IAAI;IACpB1B,MAAM,EAAE;QACN,GAAGJ,KAAS,QAAA,CAACI,MAAM;QACnBC,gBAAgB,EAAE,GAAG;QACrBC,iBAAiB,EAAE,GAAG;QAEtBC,mBAAmB,EAAE,QAAQ;QAC7BC,kBAAkB,EAAE,SAAS;QAE7BC,SAAS,EAAE,yBAAyB;QACpCC,cAAc,EAAE,MAAM;QACtBC,iBAAiB,EAAE,SAAS;QAE5BC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAE3BC,UAAU,EAAE,SAAS;QAErBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,oBAAoB;QACjCC,UAAU,EAAE,mBAAmB;QAE/BC,IAAI,EAAE,MAAM;QACZC,aAAa,EAAE,yBAAyB;QACxCC,UAAU,EAAE,MAAM;QAElBC,MAAM,EAAE,2BAA2B;QACnCC,YAAY,EAAE,2BAA2B;QACzCC,WAAW,EAAE,2BAA2B;QACxCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,2BAA2B;QACzCC,iBAAiB,EAAE,2BAA2B;QAE9CC,SAAS,EAAE,SAAS;QACpBC,eAAe,EAAE,wBAAwB;QAEzCC,0BAA0B,EAAE,MAAM;KACnC;CACF;AAEM,MAAM9B,YAAY,GAAGF,UAAU"}

package/dist/esm/cookie-theme-toggler/src/cookie-theme-provider.js

@@ -1,17 +1,15 @@
-import { createContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, useEffect, useMemo, useState } from "react";
 import { DARK, DEFAULT_THEME_NAME, LIGHT, THEME, themeDark, themeLight, ThemeProvider } from "../../theme/src/index";
 import { getThemeNameFromCookies } from "./utils";
 import { initColors } from "../../theme/src/index";
 import { updateGlobalTheme } from "../../theme/src/document-head-contents/element-theme-script";
-const themeMap = {
-    light: themeLight,
-    dark: themeDark
-};
 export const ThemeToggleContext = /*#__PURE__*/ createContext({});
 export const CookieThemeProvider = (param)=>{
     let { children , initialTheme , // overrideTheme is mainly used for storybook
     overrideTheme ,  } = param;
     const [themeName, setThemeName] = useState(initialTheme || DEFAULT_THEME_NAME);
+    const [isAutoDetectedTheme, setIsAutoDetectedTheme] = useState(true);
+    console.log('using theme', themeName);
     // Noticing browser preferences on hydration
     // Reacting to changing preferences
     useEffect(()=>{
@@ -24,6 +22,7 @@ export const CookieThemeProvider = (param)=>{
             const systemThemeName = mql.matches ? DARK : LIGHT;
             const themeNameCookie = getThemeNameFromCookies();
             setThemeName(overrideTheme || themeNameCookie || initialTheme || systemThemeName || DEFAULT_THEME_NAME);
+            setIsAutoDetectedTheme(overrideTheme !== undefined || themeNameCookie !== undefined);
         };
         mql.addEventListener('change', setTheme);
         setTheme();
@@ -46,7 +45,11 @@ export const CookieThemeProvider = (param)=>{
     return /*#__PURE__*/ React.createElement(ThemeToggleContext.Provider, {
         value: value
     }, /*#__PURE__*/ React.createElement(ThemeProvider, {
-        theme: themeMap[themeName]
+        isAutoDetectedTheme: isAutoDetectedTheme,
+        theme: {
+            light: themeLight,
+            dark: themeDark
+        }[themeName]
     }, children));
 };
 

package/dist/esm/cookie-theme-toggler/src/cookie-theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DARK,\n  DEFAULT_THEME_NAME,\n  LIGHT,\n  Theme,\n  THEME,\n  themeDark,\n  themeLight,\n  ThemeProvider,\n} from '@lidofinance/theme'\nimport { getThemeNameFromCookies } from './utils'\nimport { initColors } from '@lidofinance/theme'\nimport { updateGlobalTheme } from '../../theme/src/document-head-contents/element-theme-script'\n\nconst themeMap: Record<THEME, Theme> = {\n  light: themeLight,\n  dark: themeDark,\n}\n\nexport type ThemeContext = {\n  toggleTheme: () => void\n  themeName: THEME\n}\n\nexport const ThemeToggleContext = createContext({} as ThemeContext)\n\nexport type ThemeProviderProps = {\n  // Use themeNameParent if you need get cookie in SSR\n  initialTheme?: THEME\n  overrideTheme?: THEME\n}\n\nexport const CookieThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  initialTheme,\n  // overrideTheme is mainly used for storybook\n  overrideTheme,\n}) => {\n  const [themeName, setThemeName] = useState<THEME>(\n    initialTheme || DEFAULT_THEME_NAME\n  )\n\n  // Noticing browser preferences on hydration\n  // Reacting to changing preferences\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    initColors()\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n    const setTheme = () => {\n      const systemThemeName = mql.matches ? (DARK as THEME) : (LIGHT as THEME)\n      const themeNameCookie = getThemeNameFromCookies()\n      setThemeName(\n        overrideTheme ||\n          themeNameCookie ||\n          initialTheme ||\n          systemThemeName ||\n          DEFAULT_THEME_NAME\n      )\n    }\n    mql.addEventListener('change', setTheme)\n    setTheme()\n  }, [initialTheme, overrideTheme])\n\n  const value = useMemo(\n    () => ({\n      themeName,\n      toggleTheme() {\n        setThemeName((themeName) => {\n          const newThemeName =\n            themeName === THEME.light ? THEME.dark : THEME.light\n          updateGlobalTheme(newThemeName)\n          return newThemeName\n        })\n      },\n    }),\n    [themeName]\n  )\n\n  return (\n    <ThemeToggleContext.Provider value={value}>\n      <ThemeProvider theme={themeMap[themeName]}>{children}</ThemeProvider>\n    </ThemeToggleContext.Provider>\n  )\n}\n"],"names":["createContext","useEffect","useMemo","useState","DARK","DEFAULT_THEME_NAME","LIGHT","THEME","themeDark","themeLight","ThemeProvider","getThemeNameFromCookies","initColors","updateGlobalTheme","themeMap","light","dark","ThemeToggleContext","CookieThemeProvider","children","initialTheme","overrideTheme","themeName","setThemeName","window","mql","matchMedia","setTheme","systemThemeName","matches","themeNameCookie","addEventListener","value","toggleTheme","newThemeName","Provider","theme"],"mappings":"AAAA,SACEA,aAAa,EAGbC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,OAAO,CAAA;AACd,SACEC,IAAI,EACJC,kBAAkB,EAClBC,KAAK,EAELC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,aAAa,QACR,uBAAoB,CAAA;AAC3B,SAASC,uBAAuB,QAAQ,SAAS,CAAA;AACjD,SAASC,UAAU,QAAQ,uBAAoB,CAAA;AAC/C,SAASC,iBAAiB,QAAQ,6DAA6D,CAAA;AAE/F,MAAMC,QAAQ,GAAyB;IACrCC,KAAK,EAAEN,UAAU;IACjBO,IAAI,EAAER,SAAS;CAChB;AAOD,OAAO,MAAMS,kBAAkB,iBAAGjB,aAAa,CAAC,EAAE,CAAiB,CAAA;AAQnE,OAAO,MAAMkB,mBAAmB,GAA8C,SAKxE;QALyE,EAC7EC,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZ,6CAA6C;IAC7CC,aAAa,CAAA,IACd;IACC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGpB,QAAQ,CACxCiB,YAAY,IAAIf,kBAAkB,CACnC;IAED,4CAA4C;IAC5C,mCAAmC;IACnCJ,SAAS,CAAC,IAAM;QACd,IAAI,OAAOuB,MAAM,KAAK,WAAW,EAAE;YACjC,OAAM;QACR,CAAC;QACDZ,UAAU,EAAE;QACZ,MAAMa,GAAG,GAAGD,MAAM,CAACE,UAAU,CAAC,8BAA8B,CAAC;QAC7D,MAAMC,QAAQ,GAAG,IAAM;YACrB,MAAMC,eAAe,GAAGH,GAAG,CAACI,OAAO,GAAIzB,IAAI,GAAcE,KAAK,AAAU;YACxE,MAAMwB,eAAe,GAAGnB,uBAAuB,EAAE;YACjDY,YAAY,CACVF,aAAa,IACXS,eAAe,IACfV,YAAY,IACZQ,eAAe,IACfvB,kBAAkB,CACrB;QACH,CAAC;QACDoB,GAAG,CAACM,gBAAgB,CAAC,QAAQ,EAAEJ,QAAQ,CAAC;QACxCA,QAAQ,EAAE;IACZ,CAAC,EAAE;QAACP,YAAY;QAAEC,aAAa;KAAC,CAAC;IAEjC,MAAMW,KAAK,GAAG9B,OAAO,CACnB,IAAM,CAAC;YACLoB,SAAS;YACTW,WAAW,IAAG;gBACZV,YAAY,CAAC,CAACD,SAAS,GAAK;oBAC1B,MAAMY,YAAY,GAChBZ,SAAS,KAAKf,KAAK,CAACQ,KAAK,GAAGR,KAAK,CAACS,IAAI,GAAGT,KAAK,CAACQ,KAAK;oBACtDF,iBAAiB,CAACqB,YAAY,CAAC;oBAC/B,OAAOA,YAAY,CAAA;gBACrB,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,EACF;QAACZ,SAAS;KAAC,CACZ;IAED,qBACE,oBAACL,kBAAkB,CAACkB,QAAQ;QAACH,KAAK,EAAEA,KAAK;qBACvC,oBAACtB,aAAa;QAAC0B,KAAK,EAAEtB,QAAQ,CAACQ,SAAS,CAAC;OAAGH,QAAQ,CAAiB,CACzC,CAC/B;AACH,CAAC,CAAA"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DARK,\n  DEFAULT_THEME_NAME,\n  LIGHT,\n  THEME,\n  themeDark,\n  themeLight,\n  ThemeProvider,\n} from '@lidofinance/theme'\nimport { getThemeNameFromCookies } from './utils'\nimport { initColors } from '@lidofinance/theme'\nimport { updateGlobalTheme } from '../../theme/src/document-head-contents/element-theme-script'\n\nexport type ThemeContext = {\n  toggleTheme: () => void\n  themeName: THEME\n}\n\nexport const ThemeToggleContext = createContext({} as ThemeContext)\n\nexport type ThemeProviderProps = {\n  // Use themeNameParent if you need get cookie in SSR\n  initialTheme?: THEME\n  overrideTheme?: THEME\n}\n\nexport const CookieThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({\n  children,\n  initialTheme,\n  // overrideTheme is mainly used for storybook\n  overrideTheme,\n}) => {\n  const [themeName, setThemeName] = useState<THEME>(\n    initialTheme || DEFAULT_THEME_NAME\n  )\n  const [isAutoDetectedTheme, setIsAutoDetectedTheme] = useState(true)\n\n  console.log('using theme', themeName)\n\n  // Noticing browser preferences on hydration\n  // Reacting to changing preferences\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    initColors()\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n    const setTheme = () => {\n      const systemThemeName = mql.matches ? (DARK as THEME) : (LIGHT as THEME)\n      const themeNameCookie = getThemeNameFromCookies()\n      setThemeName(\n        overrideTheme ||\n          themeNameCookie ||\n          initialTheme ||\n          systemThemeName ||\n          DEFAULT_THEME_NAME\n      )\n      setIsAutoDetectedTheme(\n        overrideTheme !== undefined || themeNameCookie !== undefined\n      )\n    }\n    mql.addEventListener('change', setTheme)\n    setTheme()\n  }, [initialTheme, overrideTheme])\n\n  const value = useMemo(\n    () => ({\n      themeName,\n      toggleTheme() {\n        setThemeName((themeName) => {\n          const newThemeName =\n            themeName === THEME.light ? THEME.dark : THEME.light\n          updateGlobalTheme(newThemeName)\n          return newThemeName\n        })\n      },\n    }),\n    [themeName]\n  )\n\n  return (\n    <ThemeToggleContext.Provider value={value}>\n      <ThemeProvider\n        isAutoDetectedTheme={isAutoDetectedTheme}\n        theme={\n          {\n            light: themeLight,\n            dark: themeDark,\n          }[themeName]\n        }\n      >\n        {children}\n      </ThemeProvider>\n    </ThemeToggleContext.Provider>\n  )\n}\n"],"names":["React","createContext","useEffect","useMemo","useState","DARK","DEFAULT_THEME_NAME","LIGHT","THEME","themeDark","themeLight","ThemeProvider","getThemeNameFromCookies","initColors","updateGlobalTheme","ThemeToggleContext","CookieThemeProvider","children","initialTheme","overrideTheme","themeName","setThemeName","isAutoDetectedTheme","setIsAutoDetectedTheme","console","log","window","mql","matchMedia","setTheme","systemThemeName","matches","themeNameCookie","undefined","addEventListener","value","toggleTheme","newThemeName","light","dark","Provider","theme"],"mappings":"AAAA,OAAOA,KAAK,IACVC,aAAa,EAGbC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,OAAO,CAAA;AACd,SACEC,IAAI,EACJC,kBAAkB,EAClBC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,aAAa,QACR,uBAAoB,CAAA;AAC3B,SAASC,uBAAuB,QAAQ,SAAS,CAAA;AACjD,SAASC,UAAU,QAAQ,uBAAoB,CAAA;AAC/C,SAASC,iBAAiB,QAAQ,6DAA6D,CAAA;AAO/F,OAAO,MAAMC,kBAAkB,iBAAGd,aAAa,CAAC,EAAE,CAAiB,CAAA;AAQnE,OAAO,MAAMe,mBAAmB,GAA8C,SAKxE;QALyE,EAC7EC,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZ,6CAA6C;IAC7CC,aAAa,CAAA,IACd;IACC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGjB,QAAQ,CACxCc,YAAY,IAAIZ,kBAAkB,CACnC;IACD,MAAM,CAACgB,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGnB,QAAQ,CAAC,IAAI,CAAC;IAEpEoB,OAAO,CAACC,GAAG,CAAC,aAAa,EAAEL,SAAS,CAAC;IAErC,4CAA4C;IAC5C,mCAAmC;IACnClB,SAAS,CAAC,IAAM;QACd,IAAI,OAAOwB,MAAM,KAAK,WAAW,EAAE;YACjC,OAAM;QACR,CAAC;QACDb,UAAU,EAAE;QACZ,MAAMc,GAAG,GAAGD,MAAM,CAACE,UAAU,CAAC,8BAA8B,CAAC;QAC7D,MAAMC,QAAQ,GAAG,IAAM;YACrB,MAAMC,eAAe,GAAGH,GAAG,CAACI,OAAO,GAAI1B,IAAI,GAAcE,KAAK,AAAU;YACxE,MAAMyB,eAAe,GAAGpB,uBAAuB,EAAE;YACjDS,YAAY,CACVF,aAAa,IACXa,eAAe,IACfd,YAAY,IACZY,eAAe,IACfxB,kBAAkB,CACrB;YACDiB,sBAAsB,CACpBJ,aAAa,KAAKc,SAAS,IAAID,eAAe,KAAKC,SAAS,CAC7D;QACH,CAAC;QACDN,GAAG,CAACO,gBAAgB,CAAC,QAAQ,EAAEL,QAAQ,CAAC;QACxCA,QAAQ,EAAE;IACZ,CAAC,EAAE;QAACX,YAAY;QAAEC,aAAa;KAAC,CAAC;IAEjC,MAAMgB,KAAK,GAAGhC,OAAO,CACnB,IAAM,CAAC;YACLiB,SAAS;YACTgB,WAAW,IAAG;gBACZf,YAAY,CAAC,CAACD,SAAS,GAAK;oBAC1B,MAAMiB,YAAY,GAChBjB,SAAS,KAAKZ,KAAK,CAAC8B,KAAK,GAAG9B,KAAK,CAAC+B,IAAI,GAAG/B,KAAK,CAAC8B,KAAK;oBACtDxB,iBAAiB,CAACuB,YAAY,CAAC;oBAC/B,OAAOA,YAAY,CAAA;gBACrB,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,EACF;QAACjB,SAAS;KAAC,CACZ;IAED,qBACE,oBAACL,kBAAkB,CAACyB,QAAQ;QAACL,KAAK,EAAEA,KAAK;qBACvC,oBAACxB,aAAa;QACZW,mBAAmB,EAAEA,mBAAmB;QACxCmB,KAAK,EACH;YACEH,KAAK,EAAE5B,UAAU;YACjB6B,IAAI,EAAE9B,SAAS;SAChB,CAACW,SAAS,CAAC;OAGbH,QAAQ,CACK,CACY,CAC/B;AACH,CAAC,CAAA"}

package/dist/esm/cookie-theme-toggler/src/cookie-theme-toggler.js

@@ -1,12 +1,12 @@
+import { CookieThemeTogglerStyle, DarkWrapper, LightWrapper } from "./styles";
 import { Dark, Light } from "../../icons/src/index";
-import { CookieThemeTogglerStyle } from "./styles";
 import { useThemeToggle } from "./hooks";
 export const ThemeToggler = ()=>{
-    const { toggleTheme , themeName  } = useThemeToggle();
+    const { toggleTheme  } = useThemeToggle();
     return /*#__PURE__*/ React.createElement(CookieThemeTogglerStyle, {
         color: "secondary",
         onClick: toggleTheme
-    }, themeName === 'dark' ? /*#__PURE__*/ React.createElement(Light, null) : /*#__PURE__*/ React.createElement(Dark, null));
+    }, /*#__PURE__*/ React.createElement(DarkWrapper, null, /*#__PURE__*/ React.createElement(Dark, null)), /*#__PURE__*/ React.createElement(LightWrapper, null, /*#__PURE__*/ React.createElement(Light, null)));
 };
 
 //# sourceMappingURL=cookie-theme-toggler.js.map

package/dist/esm/cookie-theme-toggler/src/cookie-theme-toggler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-toggler.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { Dark, Light } from '@lidofinance/icons'\nimport { CookieThemeTogglerStyle } from './styles'\nimport { useThemeToggle } from './hooks'\n\nexport const ThemeToggler: FC = () => {\n  const { toggleTheme, themeName } = useThemeToggle()\n\n  return (\n    <CookieThemeTogglerStyle color='secondary' onClick={toggleTheme}>\n      {themeName === 'dark' ? <Light /> : <Dark />}\n    </CookieThemeTogglerStyle>\n  )\n}\n"],"names":["Dark","Light","CookieThemeTogglerStyle","useThemeToggle","ThemeToggler","toggleTheme","themeName","color","onClick"],"mappings":"AACA,SAASA,IAAI,EAAEC,KAAK,QAAQ,uBAAoB,CAAA;AAChD,SAASC,uBAAuB,QAAQ,UAAU,CAAA;AAClD,SAASC,cAAc,QAAQ,SAAS,CAAA;AAExC,OAAO,MAAMC,YAAY,GAAO,IAAM;IACpC,MAAM,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGH,cAAc,EAAE;IAEnD,qBACE,oBAACD,uBAAuB;QAACK,KAAK,EAAC,WAAW;QAACC,OAAO,EAAEH,WAAW;OAC5DC,SAAS,KAAK,MAAM,iBAAG,oBAACL,KAAK,OAAG,iBAAG,oBAACD,IAAI,OAAG,CACpB,CAC3B;AACH,CAAC,CAAA"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-toggler.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { CookieThemeTogglerStyle, DarkWrapper, LightWrapper } from './styles'\nimport { Dark, Light } from '@lidofinance/icons'\nimport { useThemeToggle } from './hooks'\n\nexport const ThemeToggler: FC = () => {\n  const { toggleTheme } = useThemeToggle()\n\n  return (\n    <CookieThemeTogglerStyle color='secondary' onClick={toggleTheme}>\n      <DarkWrapper>\n        <Dark />\n      </DarkWrapper>\n      <LightWrapper>\n        <Light />\n      </LightWrapper>\n    </CookieThemeTogglerStyle>\n  )\n}\n"],"names":["CookieThemeTogglerStyle","DarkWrapper","LightWrapper","Dark","Light","useThemeToggle","ThemeToggler","toggleTheme","color","onClick"],"mappings":"AACA,SAASA,uBAAuB,EAAEC,WAAW,EAAEC,YAAY,QAAQ,UAAU,CAAA;AAC7E,SAASC,IAAI,EAAEC,KAAK,QAAQ,uBAAoB,CAAA;AAChD,SAASC,cAAc,QAAQ,SAAS,CAAA;AAExC,OAAO,MAAMC,YAAY,GAAO,IAAM;IACpC,MAAM,EAAEC,WAAW,CAAA,EAAE,GAAGF,cAAc,EAAE;IAExC,qBACE,oBAACL,uBAAuB;QAACQ,KAAK,EAAC,WAAW;QAACC,OAAO,EAAEF,WAAW;qBAC7D,oBAACN,WAAW,sBACV,oBAACE,IAAI,OAAG,CACI,gBACd,oBAACD,YAAY,sBACX,oBAACE,KAAK,OAAG,CACI,CACS,CAC3B;AACH,CAAC,CAAA"}

package/dist/esm/cookie-theme-toggler/src/styles.js

@@ -13,6 +13,20 @@ export const CookieThemeTogglerStyle = styled(Button).attrs({
   padding-right: 10px;
   line-height: 0;
   font-size: 0;
+
+  width: 44px;
+  height: 44px;
+`;
+export const IconWrapper = styled.span`
+  position: absolute;
+  top: -12px;
+  left: -12px;
+`;
+export const LightWrapper = styled(IconWrapper)`
+  visibility: var(--lido-color-lightModeVisibility);
+`;
+export const DarkWrapper = styled(IconWrapper)`
+  visibility: var(--lido-color-darkModeVisibility);
 `;
 
 //# sourceMappingURL=styles.js.map

package/dist/esm/cookie-theme-toggler/src/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/styles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '@lidofinance/button'\n\nexport const CookieThemeTogglerStyle = styled(Button).attrs({\n  variant: 'text',\n  size: 'xs',\n})`\n  min-width: 0;\n  margin-left: ${({ theme }) => theme.spaceMap.sm}px;\n  padding-left: 10px;\n  padding-right: 10px;\n  line-height: 0;\n  font-size: 0;\n`\n"],"names":["styled","Button","CookieThemeTogglerStyle","attrs","variant","size","theme","spaceMap","sm"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AACtC,SAASC,MAAM,QAAQ,wBAAqB,CAAA;AAE5C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACC,MAAM,CAAC,CAACE,KAAK,CAAC;IAC1DC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,IAAI;CACX,CAAC,CAAC;;eAEY,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;;AAKlD,CAAC,CAAA"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/styles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '@lidofinance/button'\n\nexport const CookieThemeTogglerStyle = styled(Button).attrs({\n  variant: 'text',\n  size: 'xs',\n})`\n  min-width: 0;\n  margin-left: ${({ theme }) => theme.spaceMap.sm}px;\n  padding-left: 10px;\n  padding-right: 10px;\n  line-height: 0;\n  font-size: 0;\n\n  width: 44px;\n  height: 44px;\n`\n\nexport const IconWrapper = styled.span`\n  position: absolute;\n  top: -12px;\n  left: -12px;\n`\n\nexport const LightWrapper = styled(IconWrapper)`\n  visibility: var(--lido-color-lightModeVisibility);\n`\n\nexport const DarkWrapper = styled(IconWrapper)`\n  visibility: var(--lido-color-darkModeVisibility);\n`\n"],"names":["styled","Button","CookieThemeTogglerStyle","attrs","variant","size","theme","spaceMap","sm","IconWrapper","span","LightWrapper","DarkWrapper"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AACtC,SAASC,MAAM,QAAQ,wBAAqB,CAAA;AAE5C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACC,MAAM,CAAC,CAACE,KAAK,CAAC;IAC1DC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,IAAI;CACX,CAAC,CAAC;;eAEY,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;;;;;AAQlD,CAAC,CAAA;AAED,OAAO,MAAMC,WAAW,GAAGT,MAAM,CAACU,IAAI,CAAC;;;;AAIvC,CAAC,CAAA;AAED,OAAO,MAAMC,YAAY,GAAGX,MAAM,CAACS,WAAW,CAAC,CAAC;;AAEhD,CAAC,CAAA;AAED,OAAO,MAAMG,WAAW,GAAGZ,MAAM,CAACS,WAAW,CAAC,CAAC;;AAE/C,CAAC,CAAA"}

package/dist/esm/theme/src/base/colors.js

@@ -1,4 +1,6 @@
 const colors = {
+    darkThemeOpacity: '0',
+    lightThemeOpacity: '1',
     primary: '#00a3ff',
     primaryHover: '#009bf2',
     primaryContrast: '#fff',

package/dist/esm/theme/src/base/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/base/colors.ts"],"sourcesContent":["const colors = {\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA,MAAMA,MAAM,GAAG;IACbC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;AAEV,eAAe;IAAEpB,MAAM;CAAE,CAAA"}
+{"version":3,"sources":["../../../../../packages/theme/src/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IACtBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;AAEV,eAAe;IAAEtB,MAAM;CAAE,CAAA"}