@liner-fe/design-token 2.1.2 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/global.css +12 -0
- package/lib/index.cjs +1 -1
- package/lib/index.cjs.map +2 -2
- package/lib/index.d.ts +1 -0
- package/lib/index.mjs +2 -2
- package/lib/index.mjs.map +2 -2
- package/lib/types/color.d.ts +1 -0
- package/package.json +2 -5
- package/src/hooks/useDarkTheme.ts +2 -2
- package/src/index.ts +3 -0
- package/src/types/color.ts +78 -0
package/global.css
CHANGED
|
@@ -632,6 +632,18 @@
|
|
|
632
632
|
font-weight: var(--lp-pri-font-weight-350);
|
|
633
633
|
line-height: var(--lp-pri-font-lineheight-130);
|
|
634
634
|
}
|
|
635
|
+
:root .lp-sys-typo-paragraph1-post-regular {
|
|
636
|
+
font-family: "Pretendard Variable";
|
|
637
|
+
font-size: var(--lp-pri-font-size-17);
|
|
638
|
+
font-weight: var(--lp-pri-font-weight-350);
|
|
639
|
+
line-height: var(--lp-pri-font-lineheight-150);
|
|
640
|
+
}
|
|
641
|
+
:root .lp-sys-typo-paragraph3-post-regular {
|
|
642
|
+
font-family: "Pretendard Variable";
|
|
643
|
+
font-size: var(--lp-pri-font-size-15);
|
|
644
|
+
font-weight: var(--lp-pri-font-weight-350);
|
|
645
|
+
line-height: var(--lp-pri-font-lineheight-150);
|
|
646
|
+
}
|
|
635
647
|
:root .lp-sys-typo-paragraph1-answer-bold {
|
|
636
648
|
font-family: "Pretendard Variable";
|
|
637
649
|
font-size: var(--lp-pri-font-size-17);
|
package/lib/index.cjs
CHANGED
|
@@ -42,7 +42,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
42
42
|
var import_react = require("react");
|
|
43
43
|
var useDarkTheme = /* @__PURE__ */ __name(() => {
|
|
44
44
|
const [isDarkMode, setIsDarkMode] = (0, import_react.useState)(false);
|
|
45
|
-
(0, import_react.
|
|
45
|
+
(0, import_react.useEffect)(() => {
|
|
46
46
|
setIsDarkMode(document.documentElement.getAttribute("color-theme") === "dark");
|
|
47
47
|
}, []);
|
|
48
48
|
return {
|
package/lib/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/hooks/useDarkTheme.ts", "../src/hooks/useLanguage.ts", "../src/components/Head.tsx", "../src/generated/vars.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './hooks/useDarkTheme';\nexport * from './hooks/useLanguage';\nexport * from './components/Head';\nexport * from './generated/vars';\n", "import { useLayoutEffect, useState } from 'react';\n\nconst LOCAL_STORAGE_KEY = 'theme';\n\nexport const useDarkTheme = () => {\n const [isDarkMode, setIsDarkMode] = useState(false);\n\n // const isUserColorTheme = localStorage.getItem('color-theme');\n\n // const setDarkTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'dark');\n // setIsDarkMode(true);\n // };\n\n // const setLightTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'light');\n // };\n\n // const toggleTheme = () => {\n // const willChangeTheme = document.documentElement.getAttribute('color-theme') === 'light' ? 'dark' : 'light';\n\n // document.documentElement.setAttribute('color-theme', willChangeTheme);\n // localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);\n // };\n\n useLayoutEffect(() => {\n // const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);\n // if (prevTheme) {\n // if (prevTheme === 'dark') {\n // setDarkTheme();\n // } else {\n // setLightTheme();\n // }\n // } else {\n // const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n // document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');\n // }\n\n setIsDarkMode(document.documentElement.getAttribute('color-theme') === 'dark');\n }, []);\n\n return {\n // setDarkTheme,\n // toggleTheme,\n isDarkMode,\n };\n};\n", "export const useLanguage = () => {};\n", "import React from 'react';\n\nexport const DesignSystemHead = () => {\n return (\n <>\n {/* Pretendard JP Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css\"\n />\n {/* Pretendard Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css\"\n />\n {/* \"Poppins\", sans-serif; */}\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin={'anonymous'} />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n rel=\"stylesheet\"\n />\n </>\n );\n};\n", "export const vars = {\"color\":{\"neutral-container-lowest\":\"var(--neutral-container-lowest)\",\"neutral-container-lowest-hover\":\"var(--neutral-container-lowest-hover)\",\"neutral-container-low\":\"var(--neutral-container-low)\",\"neutral-container-low-hover\":\"var(--neutral-container-low-hover)\",\"neutral-container-mid\":\"var(--neutral-container-mid)\",\"neutral-container-mid-hover\":\"var(--neutral-container-mid-hover)\",\"neutral-container-high\":\"var(--neutral-container-high)\",\"neutral-container-high-hover\":\"var(--neutral-container-high-hover)\",\"neutral-container-highest\":\"var(--neutral-container-highest)\",\"neutral-container-static-lowest\":\"var(--neutral-container-static-lowest)\",\"neutral-container-static-lowest-hover\":\"var(--neutral-container-static-lowest-hover)\",\"neutral-fill-lowest\":\"var(--neutral-fill-lowest)\",\"neutral-fill-lowest-hover\":\"var(--neutral-fill-lowest-hover)\",\"neutral-fill-low\":\"var(--neutral-fill-low)\",\"neutral-fill-low-hover\":\"var(--neutral-fill-low-hover)\",\"neutral-fill-mid\":\"var(--neutral-fill-mid)\",\"neutral-fill-mid-hover\":\"var(--neutral-fill-mid-hover)\",\"neutral-fill-high\":\"var(--neutral-fill-high)\",\"neutral-fill-high-hover\":\"var(--neutral-fill-high-hover)\",\"neutral-fill-highest\":\"var(--neutral-fill-highest)\",\"neutral-label-primary\":\"var(--neutral-label-primary)\",\"neutral-label-secondary\":\"var(--neutral-label-secondary)\",\"neutral-label-tertiary\":\"var(--neutral-label-tertiary)\",\"neutral-label-quaternary\":\"var(--neutral-label-quaternary)\",\"neutral-label-static-primary\":\"var(--neutral-label-static-primary)\",\"neutral-label-static-secondary\":\"var(--neutral-label-static-secondary)\",\"neutral-border-overlay-strong\":\"var(--neutral-border-overlay-strong)\",\"neutral-border-overlay-normal\":\"var(--neutral-border-overlay-normal)\",\"neutral-border-overlay-subtle\":\"var(--neutral-border-overlay-subtle)\",\"neutral-border-opaque-strong\":\"var(--neutral-border-opaque-strong)\",\"neutral-border-opaque-normal\":\"var(--neutral-border-opaque-normal)\",\"neutral-border-opaque-subtle\":\"var(--neutral-border-opaque-subtle)\",\"inverse-container-lowest\":\"var(--inverse-container-lowest)\",\"inverse-container-lowest-hover\":\"var(--inverse-container-lowest-hover)\",\"inverse-container-low\":\"var(--inverse-container-low)\",\"inverse-container-low-hover\":\"var(--inverse-container-low-hover)\",\"inverse-container-mid\":\"var(--inverse-container-mid)\",\"inverse-container-mid-hover\":\"var(--inverse-container-mid-hover)\",\"inverse-container-high\":\"var(--inverse-container-high)\",\"inverse-container-high-hover\":\"var(--inverse-container-high-hover)\",\"inverse-container-static-high\":\"var(--inverse-container-static-high)\",\"inverse-container-static-high-hover\":\"var(--inverse-container-static-high-hover)\",\"inverse-container-highest\":\"var(--inverse-container-highest)\",\"inverse-fill-mid\":\"var(--inverse-fill-mid)\",\"inverse-fill-mid-hover\":\"var(--inverse-fill-mid-hover)\",\"inverse-label-primary\":\"var(--inverse-label-primary)\",\"inverse-label-secondary\":\"var(--inverse-label-secondary)\",\"inverse-label-tertiary\":\"var(--inverse-label-tertiary)\",\"inverse-label-quaternary\":\"var(--inverse-label-quaternary)\",\"inverse-label-static-primary\":\"var(--inverse-label-static-primary)\",\"inverse-label-static-secondary\":\"var(--inverse-label-static-secondary)\",\"inverse-border-overlay-strong\":\"var(--inverse-border-overlay-strong)\",\"inverse-border-overlay-normal\":\"var(--inverse-border-overlay-normal)\",\"inverse-border-overlay-subtle\":\"var(--inverse-border-overlay-subtle)\",\"inverse-border-opaque-strong\":\"var(--inverse-border-opaque-strong)\",\"inverse-border-opaque-normal\":\"var(--inverse-border-opaque-normal)\",\"inverse-border-opaque-subtle\":\"var(--inverse-border-opaque-subtle)\",\"brand-container-mid\":\"var(--brand-container-mid)\",\"brand-container-mid-hover\":\"var(--brand-container-mid-hover)\",\"brand-container-high\":\"var(--brand-container-high)\",\"brand-label-primary\":\"var(--brand-label-primary)\",\"brand-label-secondary\":\"var(--brand-label-secondary)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-normal)\",\"brand-border-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"accent-container-yellow\":\"var(--accent-container-yellow)\",\"accent-mint\":\"var(--accent-mint)\",\"accent-cyan\":\"var(--accent-cyan)\",\"accent-purple\":\"var(--accent-purple)\",\"accent-pink\":\"var(--accent-pink)\",\"function-container-positive\":\"var(--function-container-positive)\",\"function-container-negative\":\"var(--function-container-negative)\",\"function-container-negative-hover\":\"var(--function-container-negative-hover)\",\"function-container-caution\":\"var(--function-container-caution)\",\"function-label-positive\":\"var(--function-label-positive)\",\"function-label-negative\":\"var(--function-label-negative)\",\"function-label-caution\":\"var(--function-label-caution)\",\"cover-dim-page\":\"var(--cover-dim-page)\"},\"radius\":{\"lp-sys-radius-xxs\":\"var(--lp-sys-radius-xxs)\",\"lp-sys-radius-xs\":\"var(--lp-sys-radius-xs)\",\"lp-sys-radius-s\":\"var(--lp-sys-radius-s)\",\"lp-sys-radius-m\":\"var(--lp-sys-radius-m)\",\"lp-sys-radius-l\":\"var(--lp-sys-radius-l)\",\"lp-sys-radius-xl\":\"var(--lp-sys-radius-xl)\",\"lp-sys-radius-xxl\":\"var(--lp-sys-radius-xxl)\"},\"opacity\":{\"lp-pri-color-opacity-80\":\"var(--lp-pri-color-opacity-80)\",\"lp-pri-color-opacity-72\":\"var(--lp-pri-color-opacity-72)\",\"lp-pri-color-opacity-64\":\"var(--lp-pri-color-opacity-64)\",\"lp-pri-color-opacity-56\":\"var(--lp-pri-color-opacity-56)\",\"lp-pri-color-opacity-50\":\"var(--lp-pri-color-opacity-50)\",\"lp-pri-color-opacity-48\":\"var(--lp-pri-color-opacity-48)\",\"lp-pri-color-opacity-44\":\"var(--lp-pri-color-opacity-44)\",\"lp-pri-color-opacity-40\":\"var(--lp-pri-color-opacity-40)\",\"lp-pri-color-opacity-36\":\"var(--lp-pri-color-opacity-36)\",\"lp-pri-color-opacity-32\":\"var(--lp-pri-color-opacity-32)\",\"lp-pri-color-opacity-28\":\"var(--lp-pri-color-opacity-28)\",\"lp-pri-color-opacity-24\":\"var(--lp-pri-color-opacity-24)\",\"lp-pri-color-opacity-20\":\"var(--lp-pri-color-opacity-20)\",\"lp-pri-color-opacity-16\":\"var(--lp-pri-color-opacity-16)\",\"lp-pri-color-opacity-12\":\"var(--lp-pri-color-opacity-12)\",\"lp-pri-color-opacity-8\":\"var(--lp-pri-color-opacity-8)\",\"lp-pri-color-opacity-4\":\"var(--lp-pri-color-opacity-4)\",\"lp-pri-color-opacity-1\":\"var(--lp-pri-color-opacity-1)\",\"lp-pri-color-opacity-0\":\"var(--lp-pri-color-opacity-0)\"},\"padding\":{\"lp-sys-padding-component-100\":\"var(--lp-sys-padding-component-100)\",\"lp-sys-padding-component-200\":\"var(--lp-sys-padding-component-200)\",\"lp-sys-padding-component-300\":\"var(--lp-sys-padding-component-300)\",\"lp-sys-padding-component-400\":\"var(--lp-sys-padding-component-400)\",\"lp-sys-padding-component-500\":\"var(--lp-sys-padding-component-500)\",\"lp-sys-padding-component-600\":\"var(--lp-sys-padding-component-600)\",\"lp-sys-padding-component-700\":\"var(--lp-sys-padding-component-700)\",\"lp-sys-padding-component-800\":\"var(--lp-sys-padding-component-800)\",\"lp-sys-padding-component-900\":\"var(--lp-sys-padding-component-900)\",\"lp-sys-padding-section-100\":\"var(--lp-sys-padding-section-100)\",\"lp-sys-padding-section-200\":\"var(--lp-sys-padding-section-200)\",\"lp-sys-padding-section-300\":\"var(--lp-sys-padding-section-300)\",\"lp-sys-padding-section-400\":\"var(--lp-sys-padding-section-400)\",\"lp-sys-padding-section-500\":\"var(--lp-sys-padding-section-500)\",\"lp-sys-padding-section-600\":\"var(--lp-sys-padding-section-600)\",\"lp-sys-padding-section-700\":\"var(--lp-sys-padding-section-700)\",\"lp-sys-padding-section-800\":\"var(--lp-sys-padding-section-800)\",\"lp-sys-padding-section-900\":\"var(--lp-sys-padding-section-900)\"},\"size\":{\"lp-pri-size-minus6\":\"var(--lp-pri-size-minus6)\",\"lp-pri-size-minus4\":\"var(--lp-pri-size-minus4)\",\"lp-pri-size-minus2\":\"var(--lp-pri-size-minus2)\",\"lp-pri-size-0\":\"var(--lp-pri-size-0)\",\"lp-pri-size-1\":\"var(--lp-pri-size-1)\",\"lp-pri-size-2\":\"var(--lp-pri-size-2)\",\"lp-pri-size-3\":\"var(--lp-pri-size-3)\",\"lp-pri-size-4\":\"var(--lp-pri-size-4)\",\"lp-pri-size-6\":\"var(--lp-pri-size-6)\",\"lp-pri-size-8\":\"var(--lp-pri-size-8)\",\"lp-pri-size-10\":\"var(--lp-pri-size-10)\",\"lp-pri-size-12\":\"var(--lp-pri-size-12)\",\"lp-pri-size-14\":\"var(--lp-pri-size-14)\",\"lp-pri-size-16\":\"var(--lp-pri-size-16)\",\"lp-pri-size-18\":\"var(--lp-pri-size-18)\",\"lp-pri-size-20\":\"var(--lp-pri-size-20)\",\"lp-pri-size-24\":\"var(--lp-pri-size-24)\",\"lp-pri-size-32\":\"var(--lp-pri-size-32)\",\"lp-pri-size-40\":\"var(--lp-pri-size-40)\",\"lp-pri-size-48\":\"var(--lp-pri-size-48)\",\"lp-pri-size-56\":\"var(--lp-pri-size-56)\",\"lp-pri-size-64\":\"var(--lp-pri-size-64)\",\"lp-pri-size-80\":\"var(--lp-pri-size-80)\",\"lp-pri-size-100\":\"var(--lp-pri-size-100)\",\"lp-pri-size-120\":\"var(--lp-pri-size-120)\",\"lp-pri-size-140\":\"var(--lp-pri-size-140)\",\"lp-pri-size-160\":\"var(--lp-pri-size-160)\",\"lp-pri-size-180\":\"var(--lp-pri-size-180)\",\"lp-pri-size-200\":\"var(--lp-pri-size-200)\"},\"gap\":{\"lp-sys-gap-positive-50\":\"var(--lp-sys-gap-positive-50)\",\"lp-sys-gap-positive-100\":\"var(--lp-sys-gap-positive-100)\",\"lp-sys-gap-positive-150\":\"var(--lp-sys-gap-positive-150)\",\"lp-sys-gap-positive-200\":\"var(--lp-sys-gap-positive-200)\",\"lp-sys-gap-positive-300\":\"var(--lp-sys-gap-positive-300)\",\"lp-sys-gap-positive-400\":\"var(--lp-sys-gap-positive-400)\",\"lp-sys-gap-positive-500\":\"var(--lp-sys-gap-positive-500)\",\"lp-sys-gap-positive-600\":\"var(--lp-sys-gap-positive-600)\",\"lp-sys-gap-positive-700\":\"var(--lp-sys-gap-positive-700)\",\"lp-sys-gap-positive-800\":\"var(--lp-sys-gap-positive-800)\",\"lp-sys-gap-positive-900\":\"var(--lp-sys-gap-positive-900)\",\"lp-sys-gap-negative-700\":\"var(--lp-sys-gap-negative-700)\",\"lp-sys-gap-negative-800\":\"var(--lp-sys-gap-negative-800)\",\"lp-sys-gap-negative-900\":\"var(--lp-sys-gap-negative-900)\"},\"shadow\":{\"lp-sys-shadow-normal\":\"var(--lp-sys-shadow-normal)\",\"lp-sys-shadow-strong\":\"var(--lp-sys-shadow-strong)\",\"lp-sys-shadow-heavy\":\"var(--lp-sys-shadow-heavy)\"},\"iconSize\":{\"lp-sys-icon-size-xs\":\"var(--lp-sys-icon-size-xs)\",\"lp-sys-icon-size-s\":\"var(--lp-sys-icon-size-s)\",\"lp-sys-icon-size-m\":\"var(--lp-sys-icon-size-m)\",\"lp-sys-icon-size-l\":\"var(--lp-sys-icon-size-l)\",\"lp-sys-icon-size-xl\":\"var(--lp-sys-icon-size-xl)\"}}"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,
|
|
4
|
+
"sourcesContent": ["export * from './hooks/useDarkTheme';\nexport * from './hooks/useLanguage';\nexport * from './components/Head';\nexport * from './generated/vars';\n\n// \uC218\uC815 \uD544\uC694\nexport * from './types/color';\n", "import { useEffect, useLayoutEffect, useState } from 'react';\n\nconst LOCAL_STORAGE_KEY = 'theme';\n\nexport const useDarkTheme = () => {\n const [isDarkMode, setIsDarkMode] = useState(false);\n\n // const isUserColorTheme = localStorage.getItem('color-theme');\n\n // const setDarkTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'dark');\n // setIsDarkMode(true);\n // };\n\n // const setLightTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'light');\n // };\n\n // const toggleTheme = () => {\n // const willChangeTheme = document.documentElement.getAttribute('color-theme') === 'light' ? 'dark' : 'light';\n\n // document.documentElement.setAttribute('color-theme', willChangeTheme);\n // localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);\n // };\n\n useEffect(() => {\n // const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);\n // if (prevTheme) {\n // if (prevTheme === 'dark') {\n // setDarkTheme();\n // } else {\n // setLightTheme();\n // }\n // } else {\n // const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n // document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');\n // }\n\n setIsDarkMode(document.documentElement.getAttribute('color-theme') === 'dark');\n }, []);\n\n return {\n // setDarkTheme,\n // toggleTheme,\n isDarkMode,\n };\n};\n", "export const useLanguage = () => {};\n", "import React from 'react';\n\nexport const DesignSystemHead = () => {\n return (\n <>\n {/* Pretendard JP Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css\"\n />\n {/* Pretendard Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css\"\n />\n {/* \"Poppins\", sans-serif; */}\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin={'anonymous'} />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n rel=\"stylesheet\"\n />\n </>\n );\n};\n", "export const vars = {\"color\":{\"neutral-container-lowest\":\"var(--neutral-container-lowest)\",\"neutral-container-lowest-hover\":\"var(--neutral-container-lowest-hover)\",\"neutral-container-low\":\"var(--neutral-container-low)\",\"neutral-container-low-hover\":\"var(--neutral-container-low-hover)\",\"neutral-container-mid\":\"var(--neutral-container-mid)\",\"neutral-container-mid-hover\":\"var(--neutral-container-mid-hover)\",\"neutral-container-high\":\"var(--neutral-container-high)\",\"neutral-container-high-hover\":\"var(--neutral-container-high-hover)\",\"neutral-container-highest\":\"var(--neutral-container-highest)\",\"neutral-container-static-lowest\":\"var(--neutral-container-static-lowest)\",\"neutral-container-static-lowest-hover\":\"var(--neutral-container-static-lowest-hover)\",\"neutral-fill-lowest\":\"var(--neutral-fill-lowest)\",\"neutral-fill-lowest-hover\":\"var(--neutral-fill-lowest-hover)\",\"neutral-fill-low\":\"var(--neutral-fill-low)\",\"neutral-fill-low-hover\":\"var(--neutral-fill-low-hover)\",\"neutral-fill-mid\":\"var(--neutral-fill-mid)\",\"neutral-fill-mid-hover\":\"var(--neutral-fill-mid-hover)\",\"neutral-fill-high\":\"var(--neutral-fill-high)\",\"neutral-fill-high-hover\":\"var(--neutral-fill-high-hover)\",\"neutral-fill-highest\":\"var(--neutral-fill-highest)\",\"neutral-label-primary\":\"var(--neutral-label-primary)\",\"neutral-label-secondary\":\"var(--neutral-label-secondary)\",\"neutral-label-tertiary\":\"var(--neutral-label-tertiary)\",\"neutral-label-quaternary\":\"var(--neutral-label-quaternary)\",\"neutral-label-static-primary\":\"var(--neutral-label-static-primary)\",\"neutral-label-static-secondary\":\"var(--neutral-label-static-secondary)\",\"neutral-border-overlay-strong\":\"var(--neutral-border-overlay-strong)\",\"neutral-border-overlay-normal\":\"var(--neutral-border-overlay-normal)\",\"neutral-border-overlay-subtle\":\"var(--neutral-border-overlay-subtle)\",\"neutral-border-opaque-strong\":\"var(--neutral-border-opaque-strong)\",\"neutral-border-opaque-normal\":\"var(--neutral-border-opaque-normal)\",\"neutral-border-opaque-subtle\":\"var(--neutral-border-opaque-subtle)\",\"inverse-container-lowest\":\"var(--inverse-container-lowest)\",\"inverse-container-lowest-hover\":\"var(--inverse-container-lowest-hover)\",\"inverse-container-low\":\"var(--inverse-container-low)\",\"inverse-container-low-hover\":\"var(--inverse-container-low-hover)\",\"inverse-container-mid\":\"var(--inverse-container-mid)\",\"inverse-container-mid-hover\":\"var(--inverse-container-mid-hover)\",\"inverse-container-high\":\"var(--inverse-container-high)\",\"inverse-container-high-hover\":\"var(--inverse-container-high-hover)\",\"inverse-container-static-high\":\"var(--inverse-container-static-high)\",\"inverse-container-static-high-hover\":\"var(--inverse-container-static-high-hover)\",\"inverse-container-highest\":\"var(--inverse-container-highest)\",\"inverse-fill-mid\":\"var(--inverse-fill-mid)\",\"inverse-fill-mid-hover\":\"var(--inverse-fill-mid-hover)\",\"inverse-label-primary\":\"var(--inverse-label-primary)\",\"inverse-label-secondary\":\"var(--inverse-label-secondary)\",\"inverse-label-tertiary\":\"var(--inverse-label-tertiary)\",\"inverse-label-quaternary\":\"var(--inverse-label-quaternary)\",\"inverse-label-static-primary\":\"var(--inverse-label-static-primary)\",\"inverse-label-static-secondary\":\"var(--inverse-label-static-secondary)\",\"inverse-border-overlay-strong\":\"var(--inverse-border-overlay-strong)\",\"inverse-border-overlay-normal\":\"var(--inverse-border-overlay-normal)\",\"inverse-border-overlay-subtle\":\"var(--inverse-border-overlay-subtle)\",\"inverse-border-opaque-strong\":\"var(--inverse-border-opaque-strong)\",\"inverse-border-opaque-normal\":\"var(--inverse-border-opaque-normal)\",\"inverse-border-opaque-subtle\":\"var(--inverse-border-opaque-subtle)\",\"brand-container-mid\":\"var(--brand-container-mid)\",\"brand-container-mid-hover\":\"var(--brand-container-mid-hover)\",\"brand-container-high\":\"var(--brand-container-high)\",\"brand-label-primary\":\"var(--brand-label-primary)\",\"brand-label-secondary\":\"var(--brand-label-secondary)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-normal)\",\"brand-border-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"accent-container-yellow\":\"var(--accent-container-yellow)\",\"accent-mint\":\"var(--accent-mint)\",\"accent-cyan\":\"var(--accent-cyan)\",\"accent-purple\":\"var(--accent-purple)\",\"accent-pink\":\"var(--accent-pink)\",\"function-container-positive\":\"var(--function-container-positive)\",\"function-container-negative\":\"var(--function-container-negative)\",\"function-container-negative-hover\":\"var(--function-container-negative-hover)\",\"function-container-caution\":\"var(--function-container-caution)\",\"function-label-positive\":\"var(--function-label-positive)\",\"function-label-negative\":\"var(--function-label-negative)\",\"function-label-caution\":\"var(--function-label-caution)\",\"cover-dim-page\":\"var(--cover-dim-page)\"},\"radius\":{\"lp-sys-radius-xxs\":\"var(--lp-sys-radius-xxs)\",\"lp-sys-radius-xs\":\"var(--lp-sys-radius-xs)\",\"lp-sys-radius-s\":\"var(--lp-sys-radius-s)\",\"lp-sys-radius-m\":\"var(--lp-sys-radius-m)\",\"lp-sys-radius-l\":\"var(--lp-sys-radius-l)\",\"lp-sys-radius-xl\":\"var(--lp-sys-radius-xl)\",\"lp-sys-radius-xxl\":\"var(--lp-sys-radius-xxl)\"},\"opacity\":{\"lp-pri-color-opacity-80\":\"var(--lp-pri-color-opacity-80)\",\"lp-pri-color-opacity-72\":\"var(--lp-pri-color-opacity-72)\",\"lp-pri-color-opacity-64\":\"var(--lp-pri-color-opacity-64)\",\"lp-pri-color-opacity-56\":\"var(--lp-pri-color-opacity-56)\",\"lp-pri-color-opacity-50\":\"var(--lp-pri-color-opacity-50)\",\"lp-pri-color-opacity-48\":\"var(--lp-pri-color-opacity-48)\",\"lp-pri-color-opacity-44\":\"var(--lp-pri-color-opacity-44)\",\"lp-pri-color-opacity-40\":\"var(--lp-pri-color-opacity-40)\",\"lp-pri-color-opacity-36\":\"var(--lp-pri-color-opacity-36)\",\"lp-pri-color-opacity-32\":\"var(--lp-pri-color-opacity-32)\",\"lp-pri-color-opacity-28\":\"var(--lp-pri-color-opacity-28)\",\"lp-pri-color-opacity-24\":\"var(--lp-pri-color-opacity-24)\",\"lp-pri-color-opacity-20\":\"var(--lp-pri-color-opacity-20)\",\"lp-pri-color-opacity-16\":\"var(--lp-pri-color-opacity-16)\",\"lp-pri-color-opacity-12\":\"var(--lp-pri-color-opacity-12)\",\"lp-pri-color-opacity-8\":\"var(--lp-pri-color-opacity-8)\",\"lp-pri-color-opacity-4\":\"var(--lp-pri-color-opacity-4)\",\"lp-pri-color-opacity-1\":\"var(--lp-pri-color-opacity-1)\",\"lp-pri-color-opacity-0\":\"var(--lp-pri-color-opacity-0)\"},\"padding\":{\"lp-sys-padding-component-100\":\"var(--lp-sys-padding-component-100)\",\"lp-sys-padding-component-200\":\"var(--lp-sys-padding-component-200)\",\"lp-sys-padding-component-300\":\"var(--lp-sys-padding-component-300)\",\"lp-sys-padding-component-400\":\"var(--lp-sys-padding-component-400)\",\"lp-sys-padding-component-500\":\"var(--lp-sys-padding-component-500)\",\"lp-sys-padding-component-600\":\"var(--lp-sys-padding-component-600)\",\"lp-sys-padding-component-700\":\"var(--lp-sys-padding-component-700)\",\"lp-sys-padding-component-800\":\"var(--lp-sys-padding-component-800)\",\"lp-sys-padding-component-900\":\"var(--lp-sys-padding-component-900)\",\"lp-sys-padding-section-100\":\"var(--lp-sys-padding-section-100)\",\"lp-sys-padding-section-200\":\"var(--lp-sys-padding-section-200)\",\"lp-sys-padding-section-300\":\"var(--lp-sys-padding-section-300)\",\"lp-sys-padding-section-400\":\"var(--lp-sys-padding-section-400)\",\"lp-sys-padding-section-500\":\"var(--lp-sys-padding-section-500)\",\"lp-sys-padding-section-600\":\"var(--lp-sys-padding-section-600)\",\"lp-sys-padding-section-700\":\"var(--lp-sys-padding-section-700)\",\"lp-sys-padding-section-800\":\"var(--lp-sys-padding-section-800)\",\"lp-sys-padding-section-900\":\"var(--lp-sys-padding-section-900)\"},\"size\":{\"lp-pri-size-minus6\":\"var(--lp-pri-size-minus6)\",\"lp-pri-size-minus4\":\"var(--lp-pri-size-minus4)\",\"lp-pri-size-minus2\":\"var(--lp-pri-size-minus2)\",\"lp-pri-size-0\":\"var(--lp-pri-size-0)\",\"lp-pri-size-1\":\"var(--lp-pri-size-1)\",\"lp-pri-size-2\":\"var(--lp-pri-size-2)\",\"lp-pri-size-3\":\"var(--lp-pri-size-3)\",\"lp-pri-size-4\":\"var(--lp-pri-size-4)\",\"lp-pri-size-6\":\"var(--lp-pri-size-6)\",\"lp-pri-size-8\":\"var(--lp-pri-size-8)\",\"lp-pri-size-10\":\"var(--lp-pri-size-10)\",\"lp-pri-size-12\":\"var(--lp-pri-size-12)\",\"lp-pri-size-14\":\"var(--lp-pri-size-14)\",\"lp-pri-size-16\":\"var(--lp-pri-size-16)\",\"lp-pri-size-18\":\"var(--lp-pri-size-18)\",\"lp-pri-size-20\":\"var(--lp-pri-size-20)\",\"lp-pri-size-24\":\"var(--lp-pri-size-24)\",\"lp-pri-size-32\":\"var(--lp-pri-size-32)\",\"lp-pri-size-40\":\"var(--lp-pri-size-40)\",\"lp-pri-size-48\":\"var(--lp-pri-size-48)\",\"lp-pri-size-56\":\"var(--lp-pri-size-56)\",\"lp-pri-size-64\":\"var(--lp-pri-size-64)\",\"lp-pri-size-80\":\"var(--lp-pri-size-80)\",\"lp-pri-size-100\":\"var(--lp-pri-size-100)\",\"lp-pri-size-120\":\"var(--lp-pri-size-120)\",\"lp-pri-size-140\":\"var(--lp-pri-size-140)\",\"lp-pri-size-160\":\"var(--lp-pri-size-160)\",\"lp-pri-size-180\":\"var(--lp-pri-size-180)\",\"lp-pri-size-200\":\"var(--lp-pri-size-200)\"},\"gap\":{\"lp-sys-gap-positive-50\":\"var(--lp-sys-gap-positive-50)\",\"lp-sys-gap-positive-100\":\"var(--lp-sys-gap-positive-100)\",\"lp-sys-gap-positive-150\":\"var(--lp-sys-gap-positive-150)\",\"lp-sys-gap-positive-200\":\"var(--lp-sys-gap-positive-200)\",\"lp-sys-gap-positive-300\":\"var(--lp-sys-gap-positive-300)\",\"lp-sys-gap-positive-400\":\"var(--lp-sys-gap-positive-400)\",\"lp-sys-gap-positive-500\":\"var(--lp-sys-gap-positive-500)\",\"lp-sys-gap-positive-600\":\"var(--lp-sys-gap-positive-600)\",\"lp-sys-gap-positive-700\":\"var(--lp-sys-gap-positive-700)\",\"lp-sys-gap-positive-800\":\"var(--lp-sys-gap-positive-800)\",\"lp-sys-gap-positive-900\":\"var(--lp-sys-gap-positive-900)\",\"lp-sys-gap-negative-700\":\"var(--lp-sys-gap-negative-700)\",\"lp-sys-gap-negative-800\":\"var(--lp-sys-gap-negative-800)\",\"lp-sys-gap-negative-900\":\"var(--lp-sys-gap-negative-900)\"},\"shadow\":{\"lp-sys-shadow-normal\":\"var(--lp-sys-shadow-normal)\",\"lp-sys-shadow-strong\":\"var(--lp-sys-shadow-strong)\",\"lp-sys-shadow-heavy\":\"var(--lp-sys-shadow-heavy)\"},\"iconSize\":{\"lp-sys-icon-size-xs\":\"var(--lp-sys-icon-size-xs)\",\"lp-sys-icon-size-s\":\"var(--lp-sys-icon-size-s)\",\"lp-sys-icon-size-m\":\"var(--lp-sys-icon-size-m)\",\"lp-sys-icon-size-l\":\"var(--lp-sys-icon-size-l)\",\"lp-sys-icon-size-xl\":\"var(--lp-sys-icon-size-xl)\"}}"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAqD;AAI9C,IAAM,eAAe,6BAAM;AAChC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAoBlD,8BAAU,MAAM;AAcd,kBAAc,SAAS,gBAAgB,aAAa,aAAa,MAAM,MAAM;AAAA,EAC/E,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA;AAAA;AAAA,IAGL;AAAA,EACF;AACF,GA3C4B;;;ACJrB,IAAM,cAAc,6BAAM;AAAC,GAAP;;;ACA3B,IAAAA,gBAAkB;AAEX,IAAM,mBAAmB,6BAAM;AACpC,SACE,8BAAAC,QAAA,8BAEE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,IAAG;AAAA,MACH,aAAa;AAAA,MACb,MAAK;AAAA;AAAA,EACP,GAEA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,IAAG;AAAA,MACH,aAAa;AAAA,MACb,MAAK;AAAA;AAAA,EACP,GAEA,8BAAAA,QAAA,cAAC,UAAK,KAAI,cAAa,MAAK,gCAA+B,GAC3D,8BAAAA,QAAA,cAAC,UAAK,KAAI,cAAa,MAAK,6BAA4B,aAAa,aAAa,GAClF,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAI;AAAA;AAAA,EACN,CACF;AAEJ,GA1BgC;;;ACFzB,IAAM,OAAO,EAAC,SAAQ,EAAC,4BAA2B,mCAAkC,kCAAiC,yCAAwC,yBAAwB,gCAA+B,+BAA8B,sCAAqC,yBAAwB,gCAA+B,+BAA8B,sCAAqC,0BAAyB,iCAAgC,gCAA+B,uCAAsC,6BAA4B,oCAAmC,mCAAkC,0CAAyC,yCAAwC,gDAA+C,uBAAsB,8BAA6B,6BAA4B,oCAAmC,oBAAmB,2BAA0B,0BAAyB,iCAAgC,oBAAmB,2BAA0B,0BAAyB,iCAAgC,qBAAoB,4BAA2B,2BAA0B,kCAAiC,wBAAuB,+BAA8B,yBAAwB,gCAA+B,2BAA0B,kCAAiC,0BAAyB,iCAAgC,4BAA2B,mCAAkC,gCAA+B,uCAAsC,kCAAiC,yCAAwC,iCAAgC,wCAAuC,iCAAgC,wCAAuC,iCAAgC,wCAAuC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,4BAA2B,mCAAkC,kCAAiC,yCAAwC,yBAAwB,gCAA+B,+BAA8B,sCAAqC,yBAAwB,gCAA+B,+BAA8B,sCAAqC,0BAAyB,iCAAgC,gCAA+B,uCAAsC,iCAAgC,wCAAuC,uCAAsC,8CAA6C,6BAA4B,oCAAmC,oBAAmB,2BAA0B,0BAAyB,iCAAgC,yBAAwB,gCAA+B,2BAA0B,kCAAiC,0BAAyB,iCAAgC,4BAA2B,mCAAkC,gCAA+B,uCAAsC,kCAAiC,yCAAwC,iCAAgC,wCAAuC,iCAAgC,wCAAuC,iCAAgC,wCAAuC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,uBAAsB,8BAA6B,6BAA4B,oCAAmC,wBAAuB,+BAA8B,uBAAsB,8BAA6B,yBAAwB,gCAA+B,8BAA6B,qCAAoC,+BAA8B,sCAAqC,2BAA0B,kCAAiC,eAAc,sBAAqB,eAAc,sBAAqB,iBAAgB,wBAAuB,eAAc,sBAAqB,+BAA8B,sCAAqC,+BAA8B,sCAAqC,qCAAoC,4CAA2C,8BAA6B,qCAAoC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,0BAAyB,iCAAgC,kBAAiB,wBAAuB,GAAE,UAAS,EAAC,qBAAoB,4BAA2B,oBAAmB,2BAA0B,mBAAkB,0BAAyB,mBAAkB,0BAAyB,mBAAkB,0BAAyB,oBAAmB,2BAA0B,qBAAoB,2BAA0B,GAAE,WAAU,EAAC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,gCAA+B,GAAE,WAAU,EAAC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,gCAA+B,uCAAsC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,qCAAoC,8BAA6B,oCAAmC,GAAE,QAAO,EAAC,sBAAqB,6BAA4B,sBAAqB,6BAA4B,sBAAqB,6BAA4B,iBAAgB,wBAAuB,iBAAgB,wBAAuB,iBAAgB,wBAAuB,iBAAgB,wBAAuB,iBAAgB,wBAAuB,iBAAgB,wBAAuB,iBAAgB,wBAAuB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,kBAAiB,yBAAwB,mBAAkB,0BAAyB,mBAAkB,0BAAyB,mBAAkB,0BAAyB,mBAAkB,0BAAyB,mBAAkB,0BAAyB,mBAAkB,yBAAwB,GAAE,OAAM,EAAC,0BAAyB,iCAAgC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,kCAAiC,2BAA0B,iCAAgC,GAAE,UAAS,EAAC,wBAAuB,+BAA8B,wBAAuB,+BAA8B,uBAAsB,6BAA4B,GAAE,YAAW,EAAC,uBAAsB,8BAA6B,sBAAqB,6BAA4B,sBAAqB,6BAA4B,sBAAqB,6BAA4B,uBAAsB,6BAA4B,EAAC;",
|
|
6
6
|
"names": ["import_react", "React"]
|
|
7
7
|
}
|
package/lib/index.d.ts
CHANGED
package/lib/index.mjs
CHANGED
|
@@ -2,10 +2,10 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
|
|
4
4
|
// src/hooks/useDarkTheme.ts
|
|
5
|
-
import {
|
|
5
|
+
import { useEffect, useState } from "react";
|
|
6
6
|
var useDarkTheme = /* @__PURE__ */ __name(() => {
|
|
7
7
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
8
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
9
|
setIsDarkMode(document.documentElement.getAttribute("color-theme") === "dark");
|
|
10
10
|
}, []);
|
|
11
11
|
return {
|
package/lib/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/hooks/useDarkTheme.ts", "../src/hooks/useLanguage.ts", "../src/components/Head.tsx", "../src/generated/vars.ts"],
|
|
4
|
-
"sourcesContent": ["import { useLayoutEffect, useState } from 'react';\n\nconst LOCAL_STORAGE_KEY = 'theme';\n\nexport const useDarkTheme = () => {\n const [isDarkMode, setIsDarkMode] = useState(false);\n\n // const isUserColorTheme = localStorage.getItem('color-theme');\n\n // const setDarkTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'dark');\n // setIsDarkMode(true);\n // };\n\n // const setLightTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'light');\n // };\n\n // const toggleTheme = () => {\n // const willChangeTheme = document.documentElement.getAttribute('color-theme') === 'light' ? 'dark' : 'light';\n\n // document.documentElement.setAttribute('color-theme', willChangeTheme);\n // localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);\n // };\n\n useLayoutEffect(() => {\n // const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);\n // if (prevTheme) {\n // if (prevTheme === 'dark') {\n // setDarkTheme();\n // } else {\n // setLightTheme();\n // }\n // } else {\n // const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n // document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');\n // }\n\n setIsDarkMode(document.documentElement.getAttribute('color-theme') === 'dark');\n }, []);\n\n return {\n // setDarkTheme,\n // toggleTheme,\n isDarkMode,\n };\n};\n", "export const useLanguage = () => {};\n", "import React from 'react';\n\nexport const DesignSystemHead = () => {\n return (\n <>\n {/* Pretendard JP Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css\"\n />\n {/* Pretendard Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css\"\n />\n {/* \"Poppins\", sans-serif; */}\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin={'anonymous'} />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n rel=\"stylesheet\"\n />\n </>\n );\n};\n", "export const vars = {\"color\":{\"neutral-container-lowest\":\"var(--neutral-container-lowest)\",\"neutral-container-lowest-hover\":\"var(--neutral-container-lowest-hover)\",\"neutral-container-low\":\"var(--neutral-container-low)\",\"neutral-container-low-hover\":\"var(--neutral-container-low-hover)\",\"neutral-container-mid\":\"var(--neutral-container-mid)\",\"neutral-container-mid-hover\":\"var(--neutral-container-mid-hover)\",\"neutral-container-high\":\"var(--neutral-container-high)\",\"neutral-container-high-hover\":\"var(--neutral-container-high-hover)\",\"neutral-container-highest\":\"var(--neutral-container-highest)\",\"neutral-container-static-lowest\":\"var(--neutral-container-static-lowest)\",\"neutral-container-static-lowest-hover\":\"var(--neutral-container-static-lowest-hover)\",\"neutral-fill-lowest\":\"var(--neutral-fill-lowest)\",\"neutral-fill-lowest-hover\":\"var(--neutral-fill-lowest-hover)\",\"neutral-fill-low\":\"var(--neutral-fill-low)\",\"neutral-fill-low-hover\":\"var(--neutral-fill-low-hover)\",\"neutral-fill-mid\":\"var(--neutral-fill-mid)\",\"neutral-fill-mid-hover\":\"var(--neutral-fill-mid-hover)\",\"neutral-fill-high\":\"var(--neutral-fill-high)\",\"neutral-fill-high-hover\":\"var(--neutral-fill-high-hover)\",\"neutral-fill-highest\":\"var(--neutral-fill-highest)\",\"neutral-label-primary\":\"var(--neutral-label-primary)\",\"neutral-label-secondary\":\"var(--neutral-label-secondary)\",\"neutral-label-tertiary\":\"var(--neutral-label-tertiary)\",\"neutral-label-quaternary\":\"var(--neutral-label-quaternary)\",\"neutral-label-static-primary\":\"var(--neutral-label-static-primary)\",\"neutral-label-static-secondary\":\"var(--neutral-label-static-secondary)\",\"neutral-border-overlay-strong\":\"var(--neutral-border-overlay-strong)\",\"neutral-border-overlay-normal\":\"var(--neutral-border-overlay-normal)\",\"neutral-border-overlay-subtle\":\"var(--neutral-border-overlay-subtle)\",\"neutral-border-opaque-strong\":\"var(--neutral-border-opaque-strong)\",\"neutral-border-opaque-normal\":\"var(--neutral-border-opaque-normal)\",\"neutral-border-opaque-subtle\":\"var(--neutral-border-opaque-subtle)\",\"inverse-container-lowest\":\"var(--inverse-container-lowest)\",\"inverse-container-lowest-hover\":\"var(--inverse-container-lowest-hover)\",\"inverse-container-low\":\"var(--inverse-container-low)\",\"inverse-container-low-hover\":\"var(--inverse-container-low-hover)\",\"inverse-container-mid\":\"var(--inverse-container-mid)\",\"inverse-container-mid-hover\":\"var(--inverse-container-mid-hover)\",\"inverse-container-high\":\"var(--inverse-container-high)\",\"inverse-container-high-hover\":\"var(--inverse-container-high-hover)\",\"inverse-container-static-high\":\"var(--inverse-container-static-high)\",\"inverse-container-static-high-hover\":\"var(--inverse-container-static-high-hover)\",\"inverse-container-highest\":\"var(--inverse-container-highest)\",\"inverse-fill-mid\":\"var(--inverse-fill-mid)\",\"inverse-fill-mid-hover\":\"var(--inverse-fill-mid-hover)\",\"inverse-label-primary\":\"var(--inverse-label-primary)\",\"inverse-label-secondary\":\"var(--inverse-label-secondary)\",\"inverse-label-tertiary\":\"var(--inverse-label-tertiary)\",\"inverse-label-quaternary\":\"var(--inverse-label-quaternary)\",\"inverse-label-static-primary\":\"var(--inverse-label-static-primary)\",\"inverse-label-static-secondary\":\"var(--inverse-label-static-secondary)\",\"inverse-border-overlay-strong\":\"var(--inverse-border-overlay-strong)\",\"inverse-border-overlay-normal\":\"var(--inverse-border-overlay-normal)\",\"inverse-border-overlay-subtle\":\"var(--inverse-border-overlay-subtle)\",\"inverse-border-opaque-strong\":\"var(--inverse-border-opaque-strong)\",\"inverse-border-opaque-normal\":\"var(--inverse-border-opaque-normal)\",\"inverse-border-opaque-subtle\":\"var(--inverse-border-opaque-subtle)\",\"brand-container-mid\":\"var(--brand-container-mid)\",\"brand-container-mid-hover\":\"var(--brand-container-mid-hover)\",\"brand-container-high\":\"var(--brand-container-high)\",\"brand-label-primary\":\"var(--brand-label-primary)\",\"brand-label-secondary\":\"var(--brand-label-secondary)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-normal)\",\"brand-border-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"accent-container-yellow\":\"var(--accent-container-yellow)\",\"accent-mint\":\"var(--accent-mint)\",\"accent-cyan\":\"var(--accent-cyan)\",\"accent-purple\":\"var(--accent-purple)\",\"accent-pink\":\"var(--accent-pink)\",\"function-container-positive\":\"var(--function-container-positive)\",\"function-container-negative\":\"var(--function-container-negative)\",\"function-container-negative-hover\":\"var(--function-container-negative-hover)\",\"function-container-caution\":\"var(--function-container-caution)\",\"function-label-positive\":\"var(--function-label-positive)\",\"function-label-negative\":\"var(--function-label-negative)\",\"function-label-caution\":\"var(--function-label-caution)\",\"cover-dim-page\":\"var(--cover-dim-page)\"},\"radius\":{\"lp-sys-radius-xxs\":\"var(--lp-sys-radius-xxs)\",\"lp-sys-radius-xs\":\"var(--lp-sys-radius-xs)\",\"lp-sys-radius-s\":\"var(--lp-sys-radius-s)\",\"lp-sys-radius-m\":\"var(--lp-sys-radius-m)\",\"lp-sys-radius-l\":\"var(--lp-sys-radius-l)\",\"lp-sys-radius-xl\":\"var(--lp-sys-radius-xl)\",\"lp-sys-radius-xxl\":\"var(--lp-sys-radius-xxl)\"},\"opacity\":{\"lp-pri-color-opacity-80\":\"var(--lp-pri-color-opacity-80)\",\"lp-pri-color-opacity-72\":\"var(--lp-pri-color-opacity-72)\",\"lp-pri-color-opacity-64\":\"var(--lp-pri-color-opacity-64)\",\"lp-pri-color-opacity-56\":\"var(--lp-pri-color-opacity-56)\",\"lp-pri-color-opacity-50\":\"var(--lp-pri-color-opacity-50)\",\"lp-pri-color-opacity-48\":\"var(--lp-pri-color-opacity-48)\",\"lp-pri-color-opacity-44\":\"var(--lp-pri-color-opacity-44)\",\"lp-pri-color-opacity-40\":\"var(--lp-pri-color-opacity-40)\",\"lp-pri-color-opacity-36\":\"var(--lp-pri-color-opacity-36)\",\"lp-pri-color-opacity-32\":\"var(--lp-pri-color-opacity-32)\",\"lp-pri-color-opacity-28\":\"var(--lp-pri-color-opacity-28)\",\"lp-pri-color-opacity-24\":\"var(--lp-pri-color-opacity-24)\",\"lp-pri-color-opacity-20\":\"var(--lp-pri-color-opacity-20)\",\"lp-pri-color-opacity-16\":\"var(--lp-pri-color-opacity-16)\",\"lp-pri-color-opacity-12\":\"var(--lp-pri-color-opacity-12)\",\"lp-pri-color-opacity-8\":\"var(--lp-pri-color-opacity-8)\",\"lp-pri-color-opacity-4\":\"var(--lp-pri-color-opacity-4)\",\"lp-pri-color-opacity-1\":\"var(--lp-pri-color-opacity-1)\",\"lp-pri-color-opacity-0\":\"var(--lp-pri-color-opacity-0)\"},\"padding\":{\"lp-sys-padding-component-100\":\"var(--lp-sys-padding-component-100)\",\"lp-sys-padding-component-200\":\"var(--lp-sys-padding-component-200)\",\"lp-sys-padding-component-300\":\"var(--lp-sys-padding-component-300)\",\"lp-sys-padding-component-400\":\"var(--lp-sys-padding-component-400)\",\"lp-sys-padding-component-500\":\"var(--lp-sys-padding-component-500)\",\"lp-sys-padding-component-600\":\"var(--lp-sys-padding-component-600)\",\"lp-sys-padding-component-700\":\"var(--lp-sys-padding-component-700)\",\"lp-sys-padding-component-800\":\"var(--lp-sys-padding-component-800)\",\"lp-sys-padding-component-900\":\"var(--lp-sys-padding-component-900)\",\"lp-sys-padding-section-100\":\"var(--lp-sys-padding-section-100)\",\"lp-sys-padding-section-200\":\"var(--lp-sys-padding-section-200)\",\"lp-sys-padding-section-300\":\"var(--lp-sys-padding-section-300)\",\"lp-sys-padding-section-400\":\"var(--lp-sys-padding-section-400)\",\"lp-sys-padding-section-500\":\"var(--lp-sys-padding-section-500)\",\"lp-sys-padding-section-600\":\"var(--lp-sys-padding-section-600)\",\"lp-sys-padding-section-700\":\"var(--lp-sys-padding-section-700)\",\"lp-sys-padding-section-800\":\"var(--lp-sys-padding-section-800)\",\"lp-sys-padding-section-900\":\"var(--lp-sys-padding-section-900)\"},\"size\":{\"lp-pri-size-minus6\":\"var(--lp-pri-size-minus6)\",\"lp-pri-size-minus4\":\"var(--lp-pri-size-minus4)\",\"lp-pri-size-minus2\":\"var(--lp-pri-size-minus2)\",\"lp-pri-size-0\":\"var(--lp-pri-size-0)\",\"lp-pri-size-1\":\"var(--lp-pri-size-1)\",\"lp-pri-size-2\":\"var(--lp-pri-size-2)\",\"lp-pri-size-3\":\"var(--lp-pri-size-3)\",\"lp-pri-size-4\":\"var(--lp-pri-size-4)\",\"lp-pri-size-6\":\"var(--lp-pri-size-6)\",\"lp-pri-size-8\":\"var(--lp-pri-size-8)\",\"lp-pri-size-10\":\"var(--lp-pri-size-10)\",\"lp-pri-size-12\":\"var(--lp-pri-size-12)\",\"lp-pri-size-14\":\"var(--lp-pri-size-14)\",\"lp-pri-size-16\":\"var(--lp-pri-size-16)\",\"lp-pri-size-18\":\"var(--lp-pri-size-18)\",\"lp-pri-size-20\":\"var(--lp-pri-size-20)\",\"lp-pri-size-24\":\"var(--lp-pri-size-24)\",\"lp-pri-size-32\":\"var(--lp-pri-size-32)\",\"lp-pri-size-40\":\"var(--lp-pri-size-40)\",\"lp-pri-size-48\":\"var(--lp-pri-size-48)\",\"lp-pri-size-56\":\"var(--lp-pri-size-56)\",\"lp-pri-size-64\":\"var(--lp-pri-size-64)\",\"lp-pri-size-80\":\"var(--lp-pri-size-80)\",\"lp-pri-size-100\":\"var(--lp-pri-size-100)\",\"lp-pri-size-120\":\"var(--lp-pri-size-120)\",\"lp-pri-size-140\":\"var(--lp-pri-size-140)\",\"lp-pri-size-160\":\"var(--lp-pri-size-160)\",\"lp-pri-size-180\":\"var(--lp-pri-size-180)\",\"lp-pri-size-200\":\"var(--lp-pri-size-200)\"},\"gap\":{\"lp-sys-gap-positive-50\":\"var(--lp-sys-gap-positive-50)\",\"lp-sys-gap-positive-100\":\"var(--lp-sys-gap-positive-100)\",\"lp-sys-gap-positive-150\":\"var(--lp-sys-gap-positive-150)\",\"lp-sys-gap-positive-200\":\"var(--lp-sys-gap-positive-200)\",\"lp-sys-gap-positive-300\":\"var(--lp-sys-gap-positive-300)\",\"lp-sys-gap-positive-400\":\"var(--lp-sys-gap-positive-400)\",\"lp-sys-gap-positive-500\":\"var(--lp-sys-gap-positive-500)\",\"lp-sys-gap-positive-600\":\"var(--lp-sys-gap-positive-600)\",\"lp-sys-gap-positive-700\":\"var(--lp-sys-gap-positive-700)\",\"lp-sys-gap-positive-800\":\"var(--lp-sys-gap-positive-800)\",\"lp-sys-gap-positive-900\":\"var(--lp-sys-gap-positive-900)\",\"lp-sys-gap-negative-700\":\"var(--lp-sys-gap-negative-700)\",\"lp-sys-gap-negative-800\":\"var(--lp-sys-gap-negative-800)\",\"lp-sys-gap-negative-900\":\"var(--lp-sys-gap-negative-900)\"},\"shadow\":{\"lp-sys-shadow-normal\":\"var(--lp-sys-shadow-normal)\",\"lp-sys-shadow-strong\":\"var(--lp-sys-shadow-strong)\",\"lp-sys-shadow-heavy\":\"var(--lp-sys-shadow-heavy)\"},\"iconSize\":{\"lp-sys-icon-size-xs\":\"var(--lp-sys-icon-size-xs)\",\"lp-sys-icon-size-s\":\"var(--lp-sys-icon-size-s)\",\"lp-sys-icon-size-m\":\"var(--lp-sys-icon-size-m)\",\"lp-sys-icon-size-l\":\"var(--lp-sys-icon-size-l)\",\"lp-sys-icon-size-xl\":\"var(--lp-sys-icon-size-xl)\"}}"],
|
|
5
|
-
"mappings": ";;;;AAAA,SAAS,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useLayoutEffect, useState } from 'react';\n\nconst LOCAL_STORAGE_KEY = 'theme';\n\nexport const useDarkTheme = () => {\n const [isDarkMode, setIsDarkMode] = useState(false);\n\n // const isUserColorTheme = localStorage.getItem('color-theme');\n\n // const setDarkTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'dark');\n // setIsDarkMode(true);\n // };\n\n // const setLightTheme = () => {\n // document.documentElement.setAttribute('color-theme', 'light');\n // };\n\n // const toggleTheme = () => {\n // const willChangeTheme = document.documentElement.getAttribute('color-theme') === 'light' ? 'dark' : 'light';\n\n // document.documentElement.setAttribute('color-theme', willChangeTheme);\n // localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);\n // };\n\n useEffect(() => {\n // const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);\n // if (prevTheme) {\n // if (prevTheme === 'dark') {\n // setDarkTheme();\n // } else {\n // setLightTheme();\n // }\n // } else {\n // const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n // document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');\n // }\n\n setIsDarkMode(document.documentElement.getAttribute('color-theme') === 'dark');\n }, []);\n\n return {\n // setDarkTheme,\n // toggleTheme,\n isDarkMode,\n };\n};\n", "export const useLanguage = () => {};\n", "import React from 'react';\n\nexport const DesignSystemHead = () => {\n return (\n <>\n {/* Pretendard JP Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css\"\n />\n {/* Pretendard Variable */}\n <link\n rel=\"stylesheet\"\n as=\"style\"\n crossOrigin={'anonymous'}\n href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css\"\n />\n {/* \"Poppins\", sans-serif; */}\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin={'anonymous'} />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n rel=\"stylesheet\"\n />\n </>\n );\n};\n", "export const vars = {\"color\":{\"neutral-container-lowest\":\"var(--neutral-container-lowest)\",\"neutral-container-lowest-hover\":\"var(--neutral-container-lowest-hover)\",\"neutral-container-low\":\"var(--neutral-container-low)\",\"neutral-container-low-hover\":\"var(--neutral-container-low-hover)\",\"neutral-container-mid\":\"var(--neutral-container-mid)\",\"neutral-container-mid-hover\":\"var(--neutral-container-mid-hover)\",\"neutral-container-high\":\"var(--neutral-container-high)\",\"neutral-container-high-hover\":\"var(--neutral-container-high-hover)\",\"neutral-container-highest\":\"var(--neutral-container-highest)\",\"neutral-container-static-lowest\":\"var(--neutral-container-static-lowest)\",\"neutral-container-static-lowest-hover\":\"var(--neutral-container-static-lowest-hover)\",\"neutral-fill-lowest\":\"var(--neutral-fill-lowest)\",\"neutral-fill-lowest-hover\":\"var(--neutral-fill-lowest-hover)\",\"neutral-fill-low\":\"var(--neutral-fill-low)\",\"neutral-fill-low-hover\":\"var(--neutral-fill-low-hover)\",\"neutral-fill-mid\":\"var(--neutral-fill-mid)\",\"neutral-fill-mid-hover\":\"var(--neutral-fill-mid-hover)\",\"neutral-fill-high\":\"var(--neutral-fill-high)\",\"neutral-fill-high-hover\":\"var(--neutral-fill-high-hover)\",\"neutral-fill-highest\":\"var(--neutral-fill-highest)\",\"neutral-label-primary\":\"var(--neutral-label-primary)\",\"neutral-label-secondary\":\"var(--neutral-label-secondary)\",\"neutral-label-tertiary\":\"var(--neutral-label-tertiary)\",\"neutral-label-quaternary\":\"var(--neutral-label-quaternary)\",\"neutral-label-static-primary\":\"var(--neutral-label-static-primary)\",\"neutral-label-static-secondary\":\"var(--neutral-label-static-secondary)\",\"neutral-border-overlay-strong\":\"var(--neutral-border-overlay-strong)\",\"neutral-border-overlay-normal\":\"var(--neutral-border-overlay-normal)\",\"neutral-border-overlay-subtle\":\"var(--neutral-border-overlay-subtle)\",\"neutral-border-opaque-strong\":\"var(--neutral-border-opaque-strong)\",\"neutral-border-opaque-normal\":\"var(--neutral-border-opaque-normal)\",\"neutral-border-opaque-subtle\":\"var(--neutral-border-opaque-subtle)\",\"inverse-container-lowest\":\"var(--inverse-container-lowest)\",\"inverse-container-lowest-hover\":\"var(--inverse-container-lowest-hover)\",\"inverse-container-low\":\"var(--inverse-container-low)\",\"inverse-container-low-hover\":\"var(--inverse-container-low-hover)\",\"inverse-container-mid\":\"var(--inverse-container-mid)\",\"inverse-container-mid-hover\":\"var(--inverse-container-mid-hover)\",\"inverse-container-high\":\"var(--inverse-container-high)\",\"inverse-container-high-hover\":\"var(--inverse-container-high-hover)\",\"inverse-container-static-high\":\"var(--inverse-container-static-high)\",\"inverse-container-static-high-hover\":\"var(--inverse-container-static-high-hover)\",\"inverse-container-highest\":\"var(--inverse-container-highest)\",\"inverse-fill-mid\":\"var(--inverse-fill-mid)\",\"inverse-fill-mid-hover\":\"var(--inverse-fill-mid-hover)\",\"inverse-label-primary\":\"var(--inverse-label-primary)\",\"inverse-label-secondary\":\"var(--inverse-label-secondary)\",\"inverse-label-tertiary\":\"var(--inverse-label-tertiary)\",\"inverse-label-quaternary\":\"var(--inverse-label-quaternary)\",\"inverse-label-static-primary\":\"var(--inverse-label-static-primary)\",\"inverse-label-static-secondary\":\"var(--inverse-label-static-secondary)\",\"inverse-border-overlay-strong\":\"var(--inverse-border-overlay-strong)\",\"inverse-border-overlay-normal\":\"var(--inverse-border-overlay-normal)\",\"inverse-border-overlay-subtle\":\"var(--inverse-border-overlay-subtle)\",\"inverse-border-opaque-strong\":\"var(--inverse-border-opaque-strong)\",\"inverse-border-opaque-normal\":\"var(--inverse-border-opaque-normal)\",\"inverse-border-opaque-subtle\":\"var(--inverse-border-opaque-subtle)\",\"brand-container-mid\":\"var(--brand-container-mid)\",\"brand-container-mid-hover\":\"var(--brand-container-mid-hover)\",\"brand-container-high\":\"var(--brand-container-high)\",\"brand-label-primary\":\"var(--brand-label-primary)\",\"brand-label-secondary\":\"var(--brand-label-secondary)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-normal)\",\"brand-border-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"accent-container-yellow\":\"var(--accent-container-yellow)\",\"accent-mint\":\"var(--accent-mint)\",\"accent-cyan\":\"var(--accent-cyan)\",\"accent-purple\":\"var(--accent-purple)\",\"accent-pink\":\"var(--accent-pink)\",\"function-container-positive\":\"var(--function-container-positive)\",\"function-container-negative\":\"var(--function-container-negative)\",\"function-container-negative-hover\":\"var(--function-container-negative-hover)\",\"function-container-caution\":\"var(--function-container-caution)\",\"function-label-positive\":\"var(--function-label-positive)\",\"function-label-negative\":\"var(--function-label-negative)\",\"function-label-caution\":\"var(--function-label-caution)\",\"cover-dim-page\":\"var(--cover-dim-page)\"},\"radius\":{\"lp-sys-radius-xxs\":\"var(--lp-sys-radius-xxs)\",\"lp-sys-radius-xs\":\"var(--lp-sys-radius-xs)\",\"lp-sys-radius-s\":\"var(--lp-sys-radius-s)\",\"lp-sys-radius-m\":\"var(--lp-sys-radius-m)\",\"lp-sys-radius-l\":\"var(--lp-sys-radius-l)\",\"lp-sys-radius-xl\":\"var(--lp-sys-radius-xl)\",\"lp-sys-radius-xxl\":\"var(--lp-sys-radius-xxl)\"},\"opacity\":{\"lp-pri-color-opacity-80\":\"var(--lp-pri-color-opacity-80)\",\"lp-pri-color-opacity-72\":\"var(--lp-pri-color-opacity-72)\",\"lp-pri-color-opacity-64\":\"var(--lp-pri-color-opacity-64)\",\"lp-pri-color-opacity-56\":\"var(--lp-pri-color-opacity-56)\",\"lp-pri-color-opacity-50\":\"var(--lp-pri-color-opacity-50)\",\"lp-pri-color-opacity-48\":\"var(--lp-pri-color-opacity-48)\",\"lp-pri-color-opacity-44\":\"var(--lp-pri-color-opacity-44)\",\"lp-pri-color-opacity-40\":\"var(--lp-pri-color-opacity-40)\",\"lp-pri-color-opacity-36\":\"var(--lp-pri-color-opacity-36)\",\"lp-pri-color-opacity-32\":\"var(--lp-pri-color-opacity-32)\",\"lp-pri-color-opacity-28\":\"var(--lp-pri-color-opacity-28)\",\"lp-pri-color-opacity-24\":\"var(--lp-pri-color-opacity-24)\",\"lp-pri-color-opacity-20\":\"var(--lp-pri-color-opacity-20)\",\"lp-pri-color-opacity-16\":\"var(--lp-pri-color-opacity-16)\",\"lp-pri-color-opacity-12\":\"var(--lp-pri-color-opacity-12)\",\"lp-pri-color-opacity-8\":\"var(--lp-pri-color-opacity-8)\",\"lp-pri-color-opacity-4\":\"var(--lp-pri-color-opacity-4)\",\"lp-pri-color-opacity-1\":\"var(--lp-pri-color-opacity-1)\",\"lp-pri-color-opacity-0\":\"var(--lp-pri-color-opacity-0)\"},\"padding\":{\"lp-sys-padding-component-100\":\"var(--lp-sys-padding-component-100)\",\"lp-sys-padding-component-200\":\"var(--lp-sys-padding-component-200)\",\"lp-sys-padding-component-300\":\"var(--lp-sys-padding-component-300)\",\"lp-sys-padding-component-400\":\"var(--lp-sys-padding-component-400)\",\"lp-sys-padding-component-500\":\"var(--lp-sys-padding-component-500)\",\"lp-sys-padding-component-600\":\"var(--lp-sys-padding-component-600)\",\"lp-sys-padding-component-700\":\"var(--lp-sys-padding-component-700)\",\"lp-sys-padding-component-800\":\"var(--lp-sys-padding-component-800)\",\"lp-sys-padding-component-900\":\"var(--lp-sys-padding-component-900)\",\"lp-sys-padding-section-100\":\"var(--lp-sys-padding-section-100)\",\"lp-sys-padding-section-200\":\"var(--lp-sys-padding-section-200)\",\"lp-sys-padding-section-300\":\"var(--lp-sys-padding-section-300)\",\"lp-sys-padding-section-400\":\"var(--lp-sys-padding-section-400)\",\"lp-sys-padding-section-500\":\"var(--lp-sys-padding-section-500)\",\"lp-sys-padding-section-600\":\"var(--lp-sys-padding-section-600)\",\"lp-sys-padding-section-700\":\"var(--lp-sys-padding-section-700)\",\"lp-sys-padding-section-800\":\"var(--lp-sys-padding-section-800)\",\"lp-sys-padding-section-900\":\"var(--lp-sys-padding-section-900)\"},\"size\":{\"lp-pri-size-minus6\":\"var(--lp-pri-size-minus6)\",\"lp-pri-size-minus4\":\"var(--lp-pri-size-minus4)\",\"lp-pri-size-minus2\":\"var(--lp-pri-size-minus2)\",\"lp-pri-size-0\":\"var(--lp-pri-size-0)\",\"lp-pri-size-1\":\"var(--lp-pri-size-1)\",\"lp-pri-size-2\":\"var(--lp-pri-size-2)\",\"lp-pri-size-3\":\"var(--lp-pri-size-3)\",\"lp-pri-size-4\":\"var(--lp-pri-size-4)\",\"lp-pri-size-6\":\"var(--lp-pri-size-6)\",\"lp-pri-size-8\":\"var(--lp-pri-size-8)\",\"lp-pri-size-10\":\"var(--lp-pri-size-10)\",\"lp-pri-size-12\":\"var(--lp-pri-size-12)\",\"lp-pri-size-14\":\"var(--lp-pri-size-14)\",\"lp-pri-size-16\":\"var(--lp-pri-size-16)\",\"lp-pri-size-18\":\"var(--lp-pri-size-18)\",\"lp-pri-size-20\":\"var(--lp-pri-size-20)\",\"lp-pri-size-24\":\"var(--lp-pri-size-24)\",\"lp-pri-size-32\":\"var(--lp-pri-size-32)\",\"lp-pri-size-40\":\"var(--lp-pri-size-40)\",\"lp-pri-size-48\":\"var(--lp-pri-size-48)\",\"lp-pri-size-56\":\"var(--lp-pri-size-56)\",\"lp-pri-size-64\":\"var(--lp-pri-size-64)\",\"lp-pri-size-80\":\"var(--lp-pri-size-80)\",\"lp-pri-size-100\":\"var(--lp-pri-size-100)\",\"lp-pri-size-120\":\"var(--lp-pri-size-120)\",\"lp-pri-size-140\":\"var(--lp-pri-size-140)\",\"lp-pri-size-160\":\"var(--lp-pri-size-160)\",\"lp-pri-size-180\":\"var(--lp-pri-size-180)\",\"lp-pri-size-200\":\"var(--lp-pri-size-200)\"},\"gap\":{\"lp-sys-gap-positive-50\":\"var(--lp-sys-gap-positive-50)\",\"lp-sys-gap-positive-100\":\"var(--lp-sys-gap-positive-100)\",\"lp-sys-gap-positive-150\":\"var(--lp-sys-gap-positive-150)\",\"lp-sys-gap-positive-200\":\"var(--lp-sys-gap-positive-200)\",\"lp-sys-gap-positive-300\":\"var(--lp-sys-gap-positive-300)\",\"lp-sys-gap-positive-400\":\"var(--lp-sys-gap-positive-400)\",\"lp-sys-gap-positive-500\":\"var(--lp-sys-gap-positive-500)\",\"lp-sys-gap-positive-600\":\"var(--lp-sys-gap-positive-600)\",\"lp-sys-gap-positive-700\":\"var(--lp-sys-gap-positive-700)\",\"lp-sys-gap-positive-800\":\"var(--lp-sys-gap-positive-800)\",\"lp-sys-gap-positive-900\":\"var(--lp-sys-gap-positive-900)\",\"lp-sys-gap-negative-700\":\"var(--lp-sys-gap-negative-700)\",\"lp-sys-gap-negative-800\":\"var(--lp-sys-gap-negative-800)\",\"lp-sys-gap-negative-900\":\"var(--lp-sys-gap-negative-900)\"},\"shadow\":{\"lp-sys-shadow-normal\":\"var(--lp-sys-shadow-normal)\",\"lp-sys-shadow-strong\":\"var(--lp-sys-shadow-strong)\",\"lp-sys-shadow-heavy\":\"var(--lp-sys-shadow-heavy)\"},\"iconSize\":{\"lp-sys-icon-size-xs\":\"var(--lp-sys-icon-size-xs)\",\"lp-sys-icon-size-s\":\"var(--lp-sys-icon-size-s)\",\"lp-sys-icon-size-m\":\"var(--lp-sys-icon-size-m)\",\"lp-sys-icon-size-l\":\"var(--lp-sys-icon-size-l)\",\"lp-sys-icon-size-xl\":\"var(--lp-sys-icon-size-xl)\"}}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type SystemKeys = 'neutral-container-lowest-hover' | 'neutral-container-lowest' | 'neutral-container-low' | 'neutral-container-low-hover' | 'neutral-container-mid' | 'neutral-container-mid-hover' | 'neutral-container-high' | 'neutral-container-high-hover' | 'neutral-container-highest' | 'neutral-container-static-lowest' | 'neutral-container-static-lowest-hover' | 'neutral-fill-lowest' | 'neutral-fill-lowest-hover' | 'neutral-fill-low' | 'neutral-fill-low-hover' | 'neutral-fill-mid' | 'neutral-fill-mid-hover' | 'neutral-fill-high' | 'neutral-fill-high-hover' | 'neutral-fill-highest' | 'neutral-label-primary' | 'neutral-label-secondary' | 'neutral-label-tertiary' | 'neutral-label-quaternary' | 'neutral-label-static-primary' | 'neutral-label-static-secondary' | 'neutral-border-overlay-strong' | 'neutral-border-overlay-normal' | 'neutral-border-overlay-subtle' | 'neutral-border-opaque-strong' | 'neutral-border-opaque-normal' | 'neutral-border-opaque-subtle' | 'inverse-container-lowest' | 'inverse-container-lowest-hover' | 'inverse-container-low' | 'inverse-container-low-hover' | 'inverse-container-mid' | 'inverse-container-mid-hover' | 'inverse-container-high' | 'inverse-container-high-hover' | 'inverse-container-static-high' | 'inverse-container-static-high-hover' | 'inverse-fill-mid' | 'inverse-fill-mid-hover' | 'inverse-label-primary' | 'inverse-label-static-primary' | 'inverse-label-static-secondary' | 'inverse-label-secondary' | 'inverse-label-tertiary' | 'inverse-label-quaternary' | 'inverse-border-overlay-strong' | 'inverse-border-overlay-normal' | 'inverse-border-overlay-subtle' | 'inverse-border-opaque-strong' | 'inverse-border-opaque-normal' | 'inverse-border-opaque-subtle' | 'brand-container-mid' | 'brand-container-mid-hover' | 'brand-container-high' | 'brand-label-primary' | 'brand-label-secondary' | 'brand-border-overlay-normal' | 'brand-border-opaque-normal' | 'accent-container-yellow' | 'accent-mint' | 'accent-cyan' | 'accent-purple' | 'accent-pink' | 'function-container-positive' | 'function-container-negative' | 'function-container-negative-hover' | 'function-container-caution' | 'function-label-positive' | 'function-label-negative' | 'function-label-caution' | 'inverse-container-highest' | 'cover-dim-page';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liner-fe/design-token",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.4",
|
|
4
4
|
"packageManager": "yarn@3.6.0",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@types/react": "^18.2.48",
|
|
@@ -46,8 +46,5 @@
|
|
|
46
46
|
"lib",
|
|
47
47
|
"src",
|
|
48
48
|
"global.css"
|
|
49
|
-
]
|
|
50
|
-
"dependencies": {
|
|
51
|
-
"@liner-fe/bundler": "workspace:^"
|
|
52
|
-
}
|
|
49
|
+
]
|
|
53
50
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useLayoutEffect, useState } from 'react';
|
|
1
|
+
import { useEffect, useLayoutEffect, useState } from 'react';
|
|
2
2
|
|
|
3
3
|
const LOCAL_STORAGE_KEY = 'theme';
|
|
4
4
|
|
|
@@ -23,7 +23,7 @@ export const useDarkTheme = () => {
|
|
|
23
23
|
// localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);
|
|
24
24
|
// };
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
useEffect(() => {
|
|
27
27
|
// const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
|
|
28
28
|
// if (prevTheme) {
|
|
29
29
|
// if (prevTheme === 'dark') {
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
export type SystemKeys =
|
|
2
|
+
| 'neutral-container-lowest-hover'
|
|
3
|
+
| 'neutral-container-lowest'
|
|
4
|
+
| 'neutral-container-low'
|
|
5
|
+
| 'neutral-container-low-hover'
|
|
6
|
+
| 'neutral-container-mid'
|
|
7
|
+
| 'neutral-container-mid-hover'
|
|
8
|
+
| 'neutral-container-high'
|
|
9
|
+
| 'neutral-container-high-hover'
|
|
10
|
+
| 'neutral-container-highest'
|
|
11
|
+
| 'neutral-container-static-lowest'
|
|
12
|
+
| 'neutral-container-static-lowest-hover'
|
|
13
|
+
| 'neutral-fill-lowest'
|
|
14
|
+
| 'neutral-fill-lowest-hover'
|
|
15
|
+
| 'neutral-fill-low'
|
|
16
|
+
| 'neutral-fill-low-hover'
|
|
17
|
+
| 'neutral-fill-mid'
|
|
18
|
+
| 'neutral-fill-mid-hover'
|
|
19
|
+
| 'neutral-fill-high'
|
|
20
|
+
| 'neutral-fill-high-hover'
|
|
21
|
+
| 'neutral-fill-highest'
|
|
22
|
+
| 'neutral-label-primary'
|
|
23
|
+
| 'neutral-label-secondary'
|
|
24
|
+
| 'neutral-label-tertiary'
|
|
25
|
+
| 'neutral-label-quaternary'
|
|
26
|
+
| 'neutral-label-static-primary'
|
|
27
|
+
| 'neutral-label-static-secondary'
|
|
28
|
+
| 'neutral-border-overlay-strong'
|
|
29
|
+
| 'neutral-border-overlay-normal'
|
|
30
|
+
| 'neutral-border-overlay-subtle'
|
|
31
|
+
| 'neutral-border-opaque-strong'
|
|
32
|
+
| 'neutral-border-opaque-normal'
|
|
33
|
+
| 'neutral-border-opaque-subtle'
|
|
34
|
+
| 'inverse-container-lowest'
|
|
35
|
+
| 'inverse-container-lowest-hover'
|
|
36
|
+
| 'inverse-container-low'
|
|
37
|
+
| 'inverse-container-low-hover'
|
|
38
|
+
| 'inverse-container-mid'
|
|
39
|
+
| 'inverse-container-mid-hover'
|
|
40
|
+
| 'inverse-container-high'
|
|
41
|
+
| 'inverse-container-high-hover'
|
|
42
|
+
| 'inverse-container-static-high'
|
|
43
|
+
| 'inverse-container-static-high-hover'
|
|
44
|
+
| 'inverse-fill-mid'
|
|
45
|
+
| 'inverse-fill-mid-hover'
|
|
46
|
+
| 'inverse-label-primary'
|
|
47
|
+
| 'inverse-label-static-primary'
|
|
48
|
+
| 'inverse-label-static-secondary'
|
|
49
|
+
| 'inverse-label-secondary'
|
|
50
|
+
| 'inverse-label-tertiary'
|
|
51
|
+
| 'inverse-label-quaternary'
|
|
52
|
+
| 'inverse-border-overlay-strong'
|
|
53
|
+
| 'inverse-border-overlay-normal'
|
|
54
|
+
| 'inverse-border-overlay-subtle'
|
|
55
|
+
| 'inverse-border-opaque-strong'
|
|
56
|
+
| 'inverse-border-opaque-normal'
|
|
57
|
+
| 'inverse-border-opaque-subtle'
|
|
58
|
+
| 'brand-container-mid'
|
|
59
|
+
| 'brand-container-mid-hover'
|
|
60
|
+
| 'brand-container-high'
|
|
61
|
+
| 'brand-label-primary'
|
|
62
|
+
| 'brand-label-secondary'
|
|
63
|
+
| 'brand-border-overlay-normal'
|
|
64
|
+
| 'brand-border-opaque-normal'
|
|
65
|
+
| 'accent-container-yellow'
|
|
66
|
+
| 'accent-mint'
|
|
67
|
+
| 'accent-cyan'
|
|
68
|
+
| 'accent-purple'
|
|
69
|
+
| 'accent-pink'
|
|
70
|
+
| 'function-container-positive'
|
|
71
|
+
| 'function-container-negative'
|
|
72
|
+
| 'function-container-negative-hover'
|
|
73
|
+
| 'function-container-caution'
|
|
74
|
+
| 'function-label-positive'
|
|
75
|
+
| 'function-label-negative'
|
|
76
|
+
| 'function-label-caution'
|
|
77
|
+
| 'inverse-container-highest'
|
|
78
|
+
| 'cover-dim-page';
|