@liner-fe/design-token 2.0.51 → 2.0.53
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 +60 -0
- package/lib/hooks/useDarkTheme.d.ts +1 -0
- package/lib/index.cjs +3 -1
- package/lib/index.cjs.map +2 -2
- package/lib/index.mjs +4 -2
- package/lib/index.mjs.map +2 -2
- package/package.json +2 -1
- package/src/design/color/index.ts +1 -1
- package/src/hooks/useDarkTheme.ts +4 -1
package/global.css
CHANGED
|
@@ -136,6 +136,66 @@
|
|
|
136
136
|
--lp-pri-achromatic-white-alpha-4: rgba(255, 255, 255, 0.04);
|
|
137
137
|
--lp-pri-achromatic-white-alpha-1: rgba(255, 255, 255, 0.01);
|
|
138
138
|
--lp-pri-achromatic-white-alpha-0: rgba(255, 255, 255, 0);
|
|
139
|
+
--lp-pri-gray-cool-dark-alpha-80: rgba(109, 109, 112, 0.8);
|
|
140
|
+
--lp-pri-gray-cool-dark-alpha-72: rgba(109, 109, 112, 0.72);
|
|
141
|
+
--lp-pri-gray-cool-dark-alpha-64: rgba(109, 109, 112, 0.64);
|
|
142
|
+
--lp-pri-gray-cool-dark-alpha-56: rgba(109, 109, 112, 0.56);
|
|
143
|
+
--lp-pri-gray-cool-dark-alpha-50: rgba(109, 109, 112, 0.5);
|
|
144
|
+
--lp-pri-gray-cool-dark-alpha-48: rgba(109, 109, 112, 0.48);
|
|
145
|
+
--lp-pri-gray-cool-dark-alpha-44: rgba(109, 109, 112, 0.44);
|
|
146
|
+
--lp-pri-gray-cool-dark-alpha-40: rgba(109, 109, 112, 0.4);
|
|
147
|
+
--lp-pri-gray-cool-dark-alpha-36: rgba(109, 109, 112, 0.36);
|
|
148
|
+
--lp-pri-gray-cool-dark-alpha-32: rgba(109, 109, 112, 0.32);
|
|
149
|
+
--lp-pri-gray-cool-dark-alpha-28: rgba(109, 109, 112, 0.28);
|
|
150
|
+
--lp-pri-gray-cool-dark-alpha-24: rgba(109, 109, 112, 0.24);
|
|
151
|
+
--lp-pri-gray-cool-dark-alpha-20: rgba(109, 109, 112, 0.2);
|
|
152
|
+
--lp-pri-gray-cool-dark-alpha-16: rgba(109, 109, 112, 0.16);
|
|
153
|
+
--lp-pri-gray-cool-dark-alpha-12: rgba(109, 109, 112, 0.12);
|
|
154
|
+
--lp-pri-gray-cool-dark-alpha-8: rgba(109, 109, 112, 0.08);
|
|
155
|
+
--lp-pri-gray-cool-dark-alpha-6: rgba(109, 109, 112, 0.06);
|
|
156
|
+
--lp-pri-gray-cool-dark-alpha-4: rgba(109, 109, 112, 0.04);
|
|
157
|
+
--lp-pri-gray-cool-dark-alpha-1: rgba(109, 109, 112, 0.01);
|
|
158
|
+
--lp-pri-gray-cool-dark-alpha-0: rgba(109, 109, 112, 0);
|
|
159
|
+
--lp-pri-gray-cool-light-alpha-80: rgba(233, 233, 235, 0.8);
|
|
160
|
+
--lp-pri-gray-cool-light-alpha-72: rgba(233, 233, 235, 0.72);
|
|
161
|
+
--lp-pri-gray-cool-light-alpha-64: rgba(233, 233, 235, 0.64);
|
|
162
|
+
--lp-pri-gray-cool-light-alpha-56: rgba(233, 233, 235, 0.56);
|
|
163
|
+
--lp-pri-gray-cool-light-alpha-50: rgba(233, 233, 235, 0.5);
|
|
164
|
+
--lp-pri-gray-cool-light-alpha-48: rgba(233, 233, 235, 0.48);
|
|
165
|
+
--lp-pri-gray-cool-light-alpha-44: rgba(233, 233, 235, 0.44);
|
|
166
|
+
--lp-pri-gray-cool-light-alpha-40: rgba(233, 233, 235, 0.4);
|
|
167
|
+
--lp-pri-gray-cool-light-alpha-36: rgba(233, 233, 235, 0.36);
|
|
168
|
+
--lp-pri-gray-cool-light-alpha-32: rgba(233, 233, 235, 0.32);
|
|
169
|
+
--lp-pri-gray-cool-light-alpha-28: rgba(233, 233, 235, 0.28);
|
|
170
|
+
--lp-pri-gray-cool-light-alpha-24: rgba(233, 233, 235, 0.24);
|
|
171
|
+
--lp-pri-gray-cool-light-alpha-20: rgba(233, 233, 235, 0.2);
|
|
172
|
+
--lp-pri-gray-cool-light-alpha-16: rgba(233, 233, 235, 0.16);
|
|
173
|
+
--lp-pri-gray-cool-light-alpha-12: rgba(233, 233, 235, 0.12);
|
|
174
|
+
--lp-pri-gray-cool-light-alpha-8: rgba(233, 233, 235, 0.08);
|
|
175
|
+
--lp-pri-gray-cool-light-alpha-6: rgba(233, 233, 235, 0.06);
|
|
176
|
+
--lp-pri-gray-cool-light-alpha-4: rgba(233, 233, 235, 0.04);
|
|
177
|
+
--lp-pri-gray-cool-light-alpha-1: rgba(233, 233, 235, 0.01);
|
|
178
|
+
--lp-pri-gray-cool-light-alpha-0: rgba(233, 233, 235, 0);
|
|
179
|
+
--lp-pri-brand-original-alpha-80: rgba(4, 17, 102, 0.8);
|
|
180
|
+
--lp-pri-brand-original-alpha-72: rgba(4, 17, 102, 0.72);
|
|
181
|
+
--lp-pri-brand-original-alpha-64: rgba(4, 17, 102, 0.64);
|
|
182
|
+
--lp-pri-brand-original-alpha-56: rgba(4, 17, 102, 0.56);
|
|
183
|
+
--lp-pri-brand-original-alpha-50: rgba(4, 17, 102, 0.5);
|
|
184
|
+
--lp-pri-brand-original-alpha-48: rgba(4, 17, 102, 0.48);
|
|
185
|
+
--lp-pri-brand-original-alpha-44: rgba(4, 17, 102, 0.44);
|
|
186
|
+
--lp-pri-brand-original-alpha-40: rgba(4, 17, 102, 0.4);
|
|
187
|
+
--lp-pri-brand-original-alpha-36: rgba(4, 17, 102, 0.36);
|
|
188
|
+
--lp-pri-brand-original-alpha-32: rgba(4, 17, 102, 0.32);
|
|
189
|
+
--lp-pri-brand-original-alpha-28: rgba(4, 17, 102, 0.28);
|
|
190
|
+
--lp-pri-brand-original-alpha-24: rgba(4, 17, 102, 0.24);
|
|
191
|
+
--lp-pri-brand-original-alpha-20: rgba(4, 17, 102, 0.2);
|
|
192
|
+
--lp-pri-brand-original-alpha-16: rgba(4, 17, 102, 0.16);
|
|
193
|
+
--lp-pri-brand-original-alpha-12: rgba(4, 17, 102, 0.12);
|
|
194
|
+
--lp-pri-brand-original-alpha-8: rgba(4, 17, 102, 0.08);
|
|
195
|
+
--lp-pri-brand-original-alpha-6: rgba(4, 17, 102, 0.06);
|
|
196
|
+
--lp-pri-brand-original-alpha-4: rgba(4, 17, 102, 0.04);
|
|
197
|
+
--lp-pri-brand-original-alpha-1: rgba(4, 17, 102, 0.01);
|
|
198
|
+
--lp-pri-brand-original-alpha-0: rgba(4, 17, 102, 0);
|
|
139
199
|
--lp-pri-font-size-8: 8px;
|
|
140
200
|
--lp-pri-font-size-11: 11px;
|
|
141
201
|
--lp-pri-font-size-12: 12px;
|
package/lib/index.cjs
CHANGED
|
@@ -166,6 +166,7 @@ var Display1 = /* @__PURE__ */ __name((props) => {
|
|
|
166
166
|
var import_react3 = require("react");
|
|
167
167
|
var LOCAL_STORAGE_KEY = "theme";
|
|
168
168
|
var useDarkTheme = /* @__PURE__ */ __name(() => {
|
|
169
|
+
const [isDarkMode, setIsDarkMode] = (0, import_react3.useState)(false);
|
|
169
170
|
const isUserColorTheme = localStorage.getItem("color-theme");
|
|
170
171
|
const setDarkTheme = /* @__PURE__ */ __name(() => {
|
|
171
172
|
document.documentElement.setAttribute("color-theme", "dark");
|
|
@@ -193,7 +194,8 @@ var useDarkTheme = /* @__PURE__ */ __name(() => {
|
|
|
193
194
|
}, []);
|
|
194
195
|
return {
|
|
195
196
|
setDarkTheme,
|
|
196
|
-
toggleTheme
|
|
197
|
+
toggleTheme,
|
|
198
|
+
isDarkMode
|
|
197
199
|
};
|
|
198
200
|
}, "useDarkTheme");
|
|
199
201
|
|
package/lib/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/design/radius/index.ts", "../src/design/opacity/index.ts", "../src/design/size/index.ts", "../src/design/typography/primitive.ts", "../src/design/typography/usage/Heading.tsx", "../src/design/typography/usage/Display.tsx", "../src/hooks/useDarkTheme.ts", "../src/hooks/useLanguage.ts", "../src/components/Head.tsx", "../src/design/vars.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './design/radius';\nexport * from './design/opacity';\nexport * from './design/size';\nexport * from './design/typography';\n\nexport * from './hooks/useDarkTheme';\nexport * from './hooks/useLanguage';\nexport * from './components/Head';\nexport * from './design/vars';\n", "import { ISize } from '../size/type';\nimport { IRadius } from './type';\n\nexport const radius: IRadius = {\n 'lp-sys-xxs': ISize.lp_pri_2,\n 'lp-sys-xs': ISize.lp_pri_4,\n 'lp-sys-s': ISize.lp_pri_6,\n 'lp-sys-m': ISize.lp_pri_8,\n 'lp-sys-l': ISize.lp_pri_10,\n 'lp-sys-xl': ISize.lp_pri_12,\n 'lp-sys-xxl': ISize.lp_pri_200,\n} as const;\n", "export const opacity = {\n 'lp-pri-90': '90%',\n 'lp-pri-80': '80%',\n 'lp-pri-70': '70%',\n 'lp-pri-60': '60%',\n 'lp-pri-50': '50%',\n 'lp-pri-40': '40%',\n 'lp-pri-30': '30%',\n 'lp-pri-20': '20%',\n 'lp-pri-12': '12%',\n 'lp-pri-8': '8%',\n 'lp-pri-5': '5%',\n 'lp-pri-0': '0%',\n};\n", "import { ISize } from './type';\n\nexport const size: Record<keyof typeof ISize, ISize> = {\n lp_pri_0: ISize.lp_pri_0,\n lp_pri_1: ISize.lp_pri_1,\n lp_pri_2: ISize.lp_pri_2,\n lp_pri_3: ISize.lp_pri_3,\n lp_pri_4: ISize.lp_pri_4,\n lp_pri_6: ISize.lp_pri_6,\n lp_pri_8: ISize.lp_pri_8,\n lp_pri_10: ISize.lp_pri_10,\n lp_pri_12: ISize.lp_pri_12,\n lp_pri_14: ISize.lp_pri_14,\n lp_pri_16: ISize.lp_pri_16,\n lp_pri_18: ISize.lp_pri_18,\n lp_pri_20: ISize.lp_pri_20,\n lp_pri_24: ISize.lp_pri_24,\n lp_pri_32: ISize.lp_pri_32,\n lp_pri_40: ISize.lp_pri_40,\n lp_pri_48: ISize.lp_pri_48,\n lp_pri_56: ISize.lp_pri_56,\n lp_pri_64: ISize.lp_pri_64,\n lp_pri_80: ISize.lp_pri_80,\n lp_pri_100: ISize.lp_pri_100,\n lp_pri_120: ISize.lp_pri_120,\n lp_pri_140: ISize.lp_pri_140,\n lp_pri_160: ISize.lp_pri_160,\n lp_pri_180: ISize.lp_pri_180,\n lp_pri_200: ISize.lp_pri_200,\n};\n", "const lineHeight = {\n 'lp-pri-font-lineheight-120': '120%',\n 'lp-pri-font-lineheight-130': '130%',\n 'lp-pri-font-lineheight-150': '150%',\n 'lp-pri-font-lineheight-180': '180%',\n} as const;\n\nconst size = {\n 'lp-pri-font-size-8': 8,\n 'lp-pri-font-size-11': 11,\n 'lp-pri-font-size-12': 12,\n 'lp-pri-font-size-13': 13,\n 'lp-pri-font-size-14': 14,\n 'lp-pri-font-size-15': 15,\n 'lp-pri-font-size-16': 16,\n 'lp-pri-font-size-17': 17,\n 'lp-pri-font-size-20': 20,\n 'lp-pri-font-size-24': 24,\n 'lp-pri-font-size-28': 28,\n 'lp-pri-font-size-32': 32,\n 'lp-pri-font-size-40': 40,\n 'lp-pri-font-size-64': 64,\n 'lp-pri-font-size-72': 72,\n} as const;\n\nconst weight = {\n 'lp-pri-font-weight-300': 300,\n 'lp-pri-font-weight-350': 350,\n 'lp-pri-font-weight-400': 400,\n 'lp-pri-font-weight-420': 420,\n 'lp-pri-font-weight-450': 450,\n 'lp-pri-font-weight-500': 500,\n 'lp-pri-font-weight-600': 600,\n 'lp-pri-font-weight-650': 650,\n 'lp-pri-font-weight-700': 700,\n 'lp-pri-font-weight-800': 800,\n} as const;\n\nexport const font = { weight, lineHeight, size };\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\nimport { IDisplayProps, IHeadingProps } from './types';\n\nexport const Heading1 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n\nexport const Heading2 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\n\ninterface IProps extends HTMLAttributes<HTMLDivElement> {\n type: 'accent';\n weight: 'black';\n}\n\nexport const Display1 = (props: IProps) => {\n return (\n <div\n {...props}\n className={`lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ''}`}\n >\n {props.children}\n </div>\n );\n};\n", "import { useLayoutEffect } from 'react';\n\nconst LOCAL_STORAGE_KEY = 'theme';\n\nexport const useDarkTheme = () => {\n const isUserColorTheme = localStorage.getItem('color-theme');\n\n const setDarkTheme = () => {\n document.documentElement.setAttribute('color-theme', 'dark');\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\n return {\n setDarkTheme,\n toggleTheme,\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-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-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-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-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)\"}}"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGO,IAAM,SAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACXO,IAAM,UAAU;AAAA,EACrB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;;;ACXO,IAAM,OAA0C;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;AC7BA,IAAM,aAAa;AAAA,EACjB,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAChC;AAEA,IAAMA,QAAO;AAAA,EACX,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AACzB;AAEA,IAAM,SAAS;AAAA,EACb,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAC5B;AAEO,IAAM,OAAO,EAAE,QAAQ,YAAY,MAAAA,MAAK;;;ACtC/C,mBAAkB;AAIX,IAAM,WAAW,wBAAC,UAAyB;AAChD,SACE,6BAAAC,QAAA,cAAC,SAAK,GAAG,OAAO,WAAW,4BAA4B,MAAM,YAAY,IAAI,MAAM,cAAc,QAC9F,MAAM,QACT;AAEJ,GANwB;AAQjB,IAAM,WAAW,wBAAC,UAAyB;AAChD,SACE,6BAAAA,QAAA,cAAC,SAAK,GAAG,OAAO,WAAW,4BAA4B,MAAM,YAAY,IAAI,MAAM,cAAc,QAC9F,MAAM,QACT;AAEJ,GANwB;;;ACZxB,IAAAC,gBAAkB;AAQX,IAAM,WAAW,wBAAC,UAAkB;AACzC,SACE,8BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,wBAAwB,MAAM,QAAQ,MAAM,SAAS,MAAM,YAAY,IAAI,MAAM,cAAc;AAAA;AAAA,IAEzG,MAAM;AAAA,EACT;AAEJ,GATwB;;;ACRxB,IAAAC,
|
|
4
|
+
"sourcesContent": ["export * from './design/radius';\nexport * from './design/opacity';\nexport * from './design/size';\nexport * from './design/typography';\n\nexport * from './hooks/useDarkTheme';\nexport * from './hooks/useLanguage';\nexport * from './components/Head';\nexport * from './design/vars';\n", "import { ISize } from '../size/type';\nimport { IRadius } from './type';\n\nexport const radius: IRadius = {\n 'lp-sys-xxs': ISize.lp_pri_2,\n 'lp-sys-xs': ISize.lp_pri_4,\n 'lp-sys-s': ISize.lp_pri_6,\n 'lp-sys-m': ISize.lp_pri_8,\n 'lp-sys-l': ISize.lp_pri_10,\n 'lp-sys-xl': ISize.lp_pri_12,\n 'lp-sys-xxl': ISize.lp_pri_200,\n} as const;\n", "export const opacity = {\n 'lp-pri-90': '90%',\n 'lp-pri-80': '80%',\n 'lp-pri-70': '70%',\n 'lp-pri-60': '60%',\n 'lp-pri-50': '50%',\n 'lp-pri-40': '40%',\n 'lp-pri-30': '30%',\n 'lp-pri-20': '20%',\n 'lp-pri-12': '12%',\n 'lp-pri-8': '8%',\n 'lp-pri-5': '5%',\n 'lp-pri-0': '0%',\n};\n", "import { ISize } from './type';\n\nexport const size: Record<keyof typeof ISize, ISize> = {\n lp_pri_0: ISize.lp_pri_0,\n lp_pri_1: ISize.lp_pri_1,\n lp_pri_2: ISize.lp_pri_2,\n lp_pri_3: ISize.lp_pri_3,\n lp_pri_4: ISize.lp_pri_4,\n lp_pri_6: ISize.lp_pri_6,\n lp_pri_8: ISize.lp_pri_8,\n lp_pri_10: ISize.lp_pri_10,\n lp_pri_12: ISize.lp_pri_12,\n lp_pri_14: ISize.lp_pri_14,\n lp_pri_16: ISize.lp_pri_16,\n lp_pri_18: ISize.lp_pri_18,\n lp_pri_20: ISize.lp_pri_20,\n lp_pri_24: ISize.lp_pri_24,\n lp_pri_32: ISize.lp_pri_32,\n lp_pri_40: ISize.lp_pri_40,\n lp_pri_48: ISize.lp_pri_48,\n lp_pri_56: ISize.lp_pri_56,\n lp_pri_64: ISize.lp_pri_64,\n lp_pri_80: ISize.lp_pri_80,\n lp_pri_100: ISize.lp_pri_100,\n lp_pri_120: ISize.lp_pri_120,\n lp_pri_140: ISize.lp_pri_140,\n lp_pri_160: ISize.lp_pri_160,\n lp_pri_180: ISize.lp_pri_180,\n lp_pri_200: ISize.lp_pri_200,\n};\n", "const lineHeight = {\n 'lp-pri-font-lineheight-120': '120%',\n 'lp-pri-font-lineheight-130': '130%',\n 'lp-pri-font-lineheight-150': '150%',\n 'lp-pri-font-lineheight-180': '180%',\n} as const;\n\nconst size = {\n 'lp-pri-font-size-8': 8,\n 'lp-pri-font-size-11': 11,\n 'lp-pri-font-size-12': 12,\n 'lp-pri-font-size-13': 13,\n 'lp-pri-font-size-14': 14,\n 'lp-pri-font-size-15': 15,\n 'lp-pri-font-size-16': 16,\n 'lp-pri-font-size-17': 17,\n 'lp-pri-font-size-20': 20,\n 'lp-pri-font-size-24': 24,\n 'lp-pri-font-size-28': 28,\n 'lp-pri-font-size-32': 32,\n 'lp-pri-font-size-40': 40,\n 'lp-pri-font-size-64': 64,\n 'lp-pri-font-size-72': 72,\n} as const;\n\nconst weight = {\n 'lp-pri-font-weight-300': 300,\n 'lp-pri-font-weight-350': 350,\n 'lp-pri-font-weight-400': 400,\n 'lp-pri-font-weight-420': 420,\n 'lp-pri-font-weight-450': 450,\n 'lp-pri-font-weight-500': 500,\n 'lp-pri-font-weight-600': 600,\n 'lp-pri-font-weight-650': 650,\n 'lp-pri-font-weight-700': 700,\n 'lp-pri-font-weight-800': 800,\n} as const;\n\nexport const font = { weight, lineHeight, size };\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\nimport { IDisplayProps, IHeadingProps } from './types';\n\nexport const Heading1 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n\nexport const Heading2 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\n\ninterface IProps extends HTMLAttributes<HTMLDivElement> {\n type: 'accent';\n weight: 'black';\n}\n\nexport const Display1 = (props: IProps) => {\n return (\n <div\n {...props}\n className={`lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ''}`}\n >\n {props.children}\n </div>\n );\n};\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 };\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\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-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-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-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-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)\"}}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["size", "React", "import_react", "React", "import_react", "import_react", "React"]
|
|
7
7
|
}
|
package/lib/index.mjs
CHANGED
|
@@ -119,9 +119,10 @@ var Display1 = /* @__PURE__ */ __name((props) => {
|
|
|
119
119
|
}, "Display1");
|
|
120
120
|
|
|
121
121
|
// src/hooks/useDarkTheme.ts
|
|
122
|
-
import { useLayoutEffect } from "react";
|
|
122
|
+
import { useLayoutEffect, useState } from "react";
|
|
123
123
|
var LOCAL_STORAGE_KEY = "theme";
|
|
124
124
|
var useDarkTheme = /* @__PURE__ */ __name(() => {
|
|
125
|
+
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
125
126
|
const isUserColorTheme = localStorage.getItem("color-theme");
|
|
126
127
|
const setDarkTheme = /* @__PURE__ */ __name(() => {
|
|
127
128
|
document.documentElement.setAttribute("color-theme", "dark");
|
|
@@ -149,7 +150,8 @@ var useDarkTheme = /* @__PURE__ */ __name(() => {
|
|
|
149
150
|
}, []);
|
|
150
151
|
return {
|
|
151
152
|
setDarkTheme,
|
|
152
|
-
toggleTheme
|
|
153
|
+
toggleTheme,
|
|
154
|
+
isDarkMode
|
|
153
155
|
};
|
|
154
156
|
}, "useDarkTheme");
|
|
155
157
|
|
package/lib/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/design/radius/index.ts", "../src/design/opacity/index.ts", "../src/design/size/index.ts", "../src/design/typography/primitive.ts", "../src/design/typography/usage/Heading.tsx", "../src/design/typography/usage/Display.tsx", "../src/hooks/useDarkTheme.ts", "../src/hooks/useLanguage.ts", "../src/components/Head.tsx", "../src/design/vars.ts"],
|
|
4
|
-
"sourcesContent": ["import { ISize } from '../size/type';\nimport { IRadius } from './type';\n\nexport const radius: IRadius = {\n 'lp-sys-xxs': ISize.lp_pri_2,\n 'lp-sys-xs': ISize.lp_pri_4,\n 'lp-sys-s': ISize.lp_pri_6,\n 'lp-sys-m': ISize.lp_pri_8,\n 'lp-sys-l': ISize.lp_pri_10,\n 'lp-sys-xl': ISize.lp_pri_12,\n 'lp-sys-xxl': ISize.lp_pri_200,\n} as const;\n", "export const opacity = {\n 'lp-pri-90': '90%',\n 'lp-pri-80': '80%',\n 'lp-pri-70': '70%',\n 'lp-pri-60': '60%',\n 'lp-pri-50': '50%',\n 'lp-pri-40': '40%',\n 'lp-pri-30': '30%',\n 'lp-pri-20': '20%',\n 'lp-pri-12': '12%',\n 'lp-pri-8': '8%',\n 'lp-pri-5': '5%',\n 'lp-pri-0': '0%',\n};\n", "import { ISize } from './type';\n\nexport const size: Record<keyof typeof ISize, ISize> = {\n lp_pri_0: ISize.lp_pri_0,\n lp_pri_1: ISize.lp_pri_1,\n lp_pri_2: ISize.lp_pri_2,\n lp_pri_3: ISize.lp_pri_3,\n lp_pri_4: ISize.lp_pri_4,\n lp_pri_6: ISize.lp_pri_6,\n lp_pri_8: ISize.lp_pri_8,\n lp_pri_10: ISize.lp_pri_10,\n lp_pri_12: ISize.lp_pri_12,\n lp_pri_14: ISize.lp_pri_14,\n lp_pri_16: ISize.lp_pri_16,\n lp_pri_18: ISize.lp_pri_18,\n lp_pri_20: ISize.lp_pri_20,\n lp_pri_24: ISize.lp_pri_24,\n lp_pri_32: ISize.lp_pri_32,\n lp_pri_40: ISize.lp_pri_40,\n lp_pri_48: ISize.lp_pri_48,\n lp_pri_56: ISize.lp_pri_56,\n lp_pri_64: ISize.lp_pri_64,\n lp_pri_80: ISize.lp_pri_80,\n lp_pri_100: ISize.lp_pri_100,\n lp_pri_120: ISize.lp_pri_120,\n lp_pri_140: ISize.lp_pri_140,\n lp_pri_160: ISize.lp_pri_160,\n lp_pri_180: ISize.lp_pri_180,\n lp_pri_200: ISize.lp_pri_200,\n};\n", "const lineHeight = {\n 'lp-pri-font-lineheight-120': '120%',\n 'lp-pri-font-lineheight-130': '130%',\n 'lp-pri-font-lineheight-150': '150%',\n 'lp-pri-font-lineheight-180': '180%',\n} as const;\n\nconst size = {\n 'lp-pri-font-size-8': 8,\n 'lp-pri-font-size-11': 11,\n 'lp-pri-font-size-12': 12,\n 'lp-pri-font-size-13': 13,\n 'lp-pri-font-size-14': 14,\n 'lp-pri-font-size-15': 15,\n 'lp-pri-font-size-16': 16,\n 'lp-pri-font-size-17': 17,\n 'lp-pri-font-size-20': 20,\n 'lp-pri-font-size-24': 24,\n 'lp-pri-font-size-28': 28,\n 'lp-pri-font-size-32': 32,\n 'lp-pri-font-size-40': 40,\n 'lp-pri-font-size-64': 64,\n 'lp-pri-font-size-72': 72,\n} as const;\n\nconst weight = {\n 'lp-pri-font-weight-300': 300,\n 'lp-pri-font-weight-350': 350,\n 'lp-pri-font-weight-400': 400,\n 'lp-pri-font-weight-420': 420,\n 'lp-pri-font-weight-450': 450,\n 'lp-pri-font-weight-500': 500,\n 'lp-pri-font-weight-600': 600,\n 'lp-pri-font-weight-650': 650,\n 'lp-pri-font-weight-700': 700,\n 'lp-pri-font-weight-800': 800,\n} as const;\n\nexport const font = { weight, lineHeight, size };\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\nimport { IDisplayProps, IHeadingProps } from './types';\n\nexport const Heading1 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n\nexport const Heading2 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\n\ninterface IProps extends HTMLAttributes<HTMLDivElement> {\n type: 'accent';\n weight: 'black';\n}\n\nexport const Display1 = (props: IProps) => {\n return (\n <div\n {...props}\n className={`lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ''}`}\n >\n {props.children}\n </div>\n );\n};\n", "import { useLayoutEffect } from 'react';\n\nconst LOCAL_STORAGE_KEY = 'theme';\n\nexport const useDarkTheme = () => {\n const isUserColorTheme = localStorage.getItem('color-theme');\n\n const setDarkTheme = () => {\n document.documentElement.setAttribute('color-theme', 'dark');\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\n return {\n setDarkTheme,\n toggleTheme,\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-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-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-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-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)\"}}"],
|
|
5
|
-
"mappings": ";;;;AAGO,IAAM,SAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACXO,IAAM,UAAU;AAAA,EACrB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;;;ACXO,IAAM,OAA0C;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;AC7BA,IAAM,aAAa;AAAA,EACjB,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,8BAA8B;AAChC;AAEA,IAAMA,QAAO;AAAA,EACX,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AACzB;AAEA,IAAM,SAAS;AAAA,EACb,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAC5B;AAEO,IAAM,OAAO,EAAE,QAAQ,YAAY,MAAAA,MAAK;;;ACtC/C,OAAO,WAAW;AAIX,IAAM,WAAW,wBAAC,UAAyB;AAChD,SACE,oCAAC,SAAK,GAAG,OAAO,WAAW,4BAA4B,MAAM,YAAY,IAAI,MAAM,cAAc,QAC9F,MAAM,QACT;AAEJ,GANwB;AAQjB,IAAM,WAAW,wBAAC,UAAyB;AAChD,SACE,oCAAC,SAAK,GAAG,OAAO,WAAW,4BAA4B,MAAM,YAAY,IAAI,MAAM,cAAc,QAC9F,MAAM,QACT;AAEJ,GANwB;;;ACZxB,OAAOC,YAAW;AAQX,IAAM,WAAW,wBAAC,UAAkB;AACzC,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,wBAAwB,MAAM,QAAQ,MAAM,SAAS,MAAM,YAAY,IAAI,MAAM,cAAc;AAAA;AAAA,IAEzG,MAAM;AAAA,EACT;AAEJ,GATwB;;;ACRxB,SAAS,
|
|
4
|
+
"sourcesContent": ["import { ISize } from '../size/type';\nimport { IRadius } from './type';\n\nexport const radius: IRadius = {\n 'lp-sys-xxs': ISize.lp_pri_2,\n 'lp-sys-xs': ISize.lp_pri_4,\n 'lp-sys-s': ISize.lp_pri_6,\n 'lp-sys-m': ISize.lp_pri_8,\n 'lp-sys-l': ISize.lp_pri_10,\n 'lp-sys-xl': ISize.lp_pri_12,\n 'lp-sys-xxl': ISize.lp_pri_200,\n} as const;\n", "export const opacity = {\n 'lp-pri-90': '90%',\n 'lp-pri-80': '80%',\n 'lp-pri-70': '70%',\n 'lp-pri-60': '60%',\n 'lp-pri-50': '50%',\n 'lp-pri-40': '40%',\n 'lp-pri-30': '30%',\n 'lp-pri-20': '20%',\n 'lp-pri-12': '12%',\n 'lp-pri-8': '8%',\n 'lp-pri-5': '5%',\n 'lp-pri-0': '0%',\n};\n", "import { ISize } from './type';\n\nexport const size: Record<keyof typeof ISize, ISize> = {\n lp_pri_0: ISize.lp_pri_0,\n lp_pri_1: ISize.lp_pri_1,\n lp_pri_2: ISize.lp_pri_2,\n lp_pri_3: ISize.lp_pri_3,\n lp_pri_4: ISize.lp_pri_4,\n lp_pri_6: ISize.lp_pri_6,\n lp_pri_8: ISize.lp_pri_8,\n lp_pri_10: ISize.lp_pri_10,\n lp_pri_12: ISize.lp_pri_12,\n lp_pri_14: ISize.lp_pri_14,\n lp_pri_16: ISize.lp_pri_16,\n lp_pri_18: ISize.lp_pri_18,\n lp_pri_20: ISize.lp_pri_20,\n lp_pri_24: ISize.lp_pri_24,\n lp_pri_32: ISize.lp_pri_32,\n lp_pri_40: ISize.lp_pri_40,\n lp_pri_48: ISize.lp_pri_48,\n lp_pri_56: ISize.lp_pri_56,\n lp_pri_64: ISize.lp_pri_64,\n lp_pri_80: ISize.lp_pri_80,\n lp_pri_100: ISize.lp_pri_100,\n lp_pri_120: ISize.lp_pri_120,\n lp_pri_140: ISize.lp_pri_140,\n lp_pri_160: ISize.lp_pri_160,\n lp_pri_180: ISize.lp_pri_180,\n lp_pri_200: ISize.lp_pri_200,\n};\n", "const lineHeight = {\n 'lp-pri-font-lineheight-120': '120%',\n 'lp-pri-font-lineheight-130': '130%',\n 'lp-pri-font-lineheight-150': '150%',\n 'lp-pri-font-lineheight-180': '180%',\n} as const;\n\nconst size = {\n 'lp-pri-font-size-8': 8,\n 'lp-pri-font-size-11': 11,\n 'lp-pri-font-size-12': 12,\n 'lp-pri-font-size-13': 13,\n 'lp-pri-font-size-14': 14,\n 'lp-pri-font-size-15': 15,\n 'lp-pri-font-size-16': 16,\n 'lp-pri-font-size-17': 17,\n 'lp-pri-font-size-20': 20,\n 'lp-pri-font-size-24': 24,\n 'lp-pri-font-size-28': 28,\n 'lp-pri-font-size-32': 32,\n 'lp-pri-font-size-40': 40,\n 'lp-pri-font-size-64': 64,\n 'lp-pri-font-size-72': 72,\n} as const;\n\nconst weight = {\n 'lp-pri-font-weight-300': 300,\n 'lp-pri-font-weight-350': 350,\n 'lp-pri-font-weight-400': 400,\n 'lp-pri-font-weight-420': 420,\n 'lp-pri-font-weight-450': 450,\n 'lp-pri-font-weight-500': 500,\n 'lp-pri-font-weight-600': 600,\n 'lp-pri-font-weight-650': 650,\n 'lp-pri-font-weight-700': 700,\n 'lp-pri-font-weight-800': 800,\n} as const;\n\nexport const font = { weight, lineHeight, size };\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\nimport { IDisplayProps, IHeadingProps } from './types';\n\nexport const Heading1 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n\nexport const Heading2 = (props: IHeadingProps) => {\n return (\n <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>\n {props.children}\n </div>\n );\n};\n", "import React from 'react';\nimport { HTMLAttributes } from 'react';\n\ninterface IProps extends HTMLAttributes<HTMLDivElement> {\n type: 'accent';\n weight: 'black';\n}\n\nexport const Display1 = (props: IProps) => {\n return (\n <div\n {...props}\n className={`lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ''}`}\n >\n {props.children}\n </div>\n );\n};\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 };\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\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-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-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-overlay-normal\":\"var(--brand-border-overlay-normal)\",\"brand-border-opaque-normal\":\"var(--brand-border-opaque-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)\"}}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["size", "React", "React", "React", "React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liner-fe/design-token",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.53",
|
|
4
4
|
"packageManager": "yarn@3.6.0",
|
|
5
5
|
"devDependencies": {
|
|
6
6
|
"@types/react": "^18.2.48",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"require": "./lib/index.cjs"
|
|
31
31
|
},
|
|
32
32
|
"./global.css": "./global.css",
|
|
33
|
+
"./globalStorybook.css": "./globalStorybook.css",
|
|
33
34
|
"./package.json": "./package.json"
|
|
34
35
|
},
|
|
35
36
|
"maintainers": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const color = {"color":{"primitive":{"lp-pri-achromatic-white":"#ffffff","lp-pri-achromatic-black":"#000000","lp-pri-gray-cool-980":"#F9F9FA","lp-pri-gray-cool-970":"#F6F6F7","lp-pri-gray-cool-940":"#EDEEF0","lp-pri-gray-cool-920":"#E9E9EB","lp-pri-gray-cool-900":"#E3E3E6","lp-pri-gray-cool-850":"#D7D7D9","lp-pri-gray-cool-750":"#BEBFC2","lp-pri-gray-cool-600":"#939499","lp-pri-gray-cool-450":"#6D6D70","lp-pri-gray-cool-350":"#58595C","lp-pri-gray-cool-300":"#4A4A4D","lp-pri-gray-cool-250":"#3B3B3D","lp-pri-gray-cool-200":"#313133","lp-pri-gray-cool-100":"#1E1E1F","lp-pri-brand-original-950":"#FAFBFF","lp-pri-brand-original-900":"#F4F5FF","lp-pri-brand-original-800":"#D9DEFF","lp-pri-brand-original-700":"#B7C1FF","lp-pri-brand-original-600":"#6B7FFF","lp-pri-brand-original-500":"#4058FF","lp-pri-brand-original-400":"#273FD9","lp-pri-brand-original-200":"#152AB3","lp-pri-brand-original-100":"#071780","lp-pri-brand-original-50":"#041166","lp-pri-brand-variation-950":"#FAFBFF","lp-pri-brand-variation-900":"#F4F7FF","lp-pri-brand-variation-800":"#D9E4FF","lp-pri-brand-variation-700":"#B7CDFF","lp-pri-brand-variation-600":"#759EFF","lp-pri-brand-variation-500":"#5487FF","lp-pri-brand-variation-400":"#4E70BF","lp-pri-brand-variation-200":"#4A6299","lp-pri-brand-variation-100":"#384666","lp-pri-brand-variation-50":"#2C364D","lp-pri-rainbow-red-950":"#FFF5F5","lp-pri-rainbow-red-900":"#FFE7E7","lp-pri-rainbow-red-800":"#FFC3C3","lp-pri-rainbow-red-700":"#FF9090","lp-pri-rainbow-red-600":"#FF6060","lp-pri-rainbow-red-500":"#FF3333","lp-pri-rainbow-red-400":"#DB2323","lp-pri-rainbow-red-300":"#B81616","lp-pri-rainbow-red-200":"#710808","lp-pri-rainbow-red-100":"#410404","lp-pri-rainbow-orange-950":"#FFFBF4","lp-pri-rainbow-orange-900":"#FFF4E3","lp-pri-rainbow-orange-800":"#FFE1B4","lp-pri-rainbow-orange-700":"#FFC875","lp-pri-rainbow-orange-600":"#FFB039","lp-pri-rainbow-orange-500":"#FF9900","lp-pri-rainbow-orange-400":"#DB8503","lp-pri-rainbow-orange-300":"#B87005","lp-pri-rainbow-orange-200":"#714605","lp-pri-rainbow-orange-100":"#412803","lp-pri-rainbow-yellow-950":"#FFFDF4","lp-pri-rainbow-yellow-900":"#FFF9E3","lp-pri-rainbow-yellow-800":"#FFF0B4","lp-pri-rainbow-yellow-700":"#FFE375","lp-pri-rainbow-yellow-600":"#FFD739","lp-pri-rainbow-yellow-500":"#FFCC00","lp-pri-rainbow-yellow-400":"#DBB003","lp-pri-rainbow-yellow-300":"#B89405","lp-pri-rainbow-yellow-200":"#715B05","lp-pri-rainbow-yellow-100":"#413503","lp-pri-rainbow-green-950":"#F5FEF7","lp-pri-rainbow-green-900":"#E6FCEA","lp-pri-rainbow-green-800":"#BFF5C8","lp-pri-rainbow-green-700":"#8CEC9C","lp-pri-rainbow-green-600":"#5DDF73","lp-pri-rainbow-green-500":"#30BF48","lp-pri-rainbow-green-400":"#20A536","lp-pri-rainbow-green-300":"#148B28","lp-pri-rainbow-green-200":"#075714","lp-pri-rainbow-green-100":"#03350B","lp-pri-rainbow-mint-950":"#F3FEFE","lp-pri-rainbow-mint-900":"#AFF7F7","lp-pri-rainbow-mint-800":"#6EF0F0","lp-pri-rainbow-mint-700":"#33E6E6","lp-pri-rainbow-mint-600":"#00CCCC","lp-pri-rainbow-mint-500":"#02B0B0","lp-pri-rainbow-mint-400":"#02B0B0","lp-pri-rainbow-mint-300":"#049494","lp-pri-rainbow-mint-200":"#045C5C","lp-pri-rainbow-mint-100":"#033737","lp-pri-rainbow-cyan-950":"#F6FBFF","lp-pri-rainbow-cyan-900":"#E8F6FF","lp-pri-rainbow-cyan-800":"#C6E8FF","lp-pri-rainbow-cyan-700":"#97D5FF","lp-pri-rainbow-cyan-600":"#6AC4FF","lp-pri-rainbow-cyan-500":"#40B3FF","lp-pri-rainbow-cyan-400":"#2B95DB","lp-pri-rainbow-cyan-300":"#1A79B8","lp-pri-rainbow-cyan-200":"#094771","lp-pri-rainbow-cyan-100":"#042941","lp-pri-rainbow-purple-950":"#FCF6FF","lp-pri-rainbow-purple-900":"#F7EAFE","lp-pri-rainbow-purple-800":"#EBCAFB","lp-pri-rainbow-purple-700":"#DAA0F7","lp-pri-rainbow-purple-600":"#C978F2","lp-pri-rainbow-purple-500":"#B450E6","lp-pri-rainbow-purple-400":"#9535C6","lp-pri-rainbow-purple-300":"#7920A6","lp-pri-rainbow-purple-200":"#480A67","lp-pri-rainbow-purple-100":"#29043C","lp-pri-rainbow-pink-950":"#FFF5F8","lp-pri-rainbow-pink-900":"#FFE7EF","lp-pri-rainbow-pink-800":"#FFC3D7","lp-pri-rainbow-pink-700":"#FF90B5","lp-pri-rainbow-pink-600":"#FF6095","lp-pri-rainbow-pink-500":"#FF3377","lp-pri-rainbow-pink-400":"#DB2360","lp-pri-rainbow-pink-300":"#B8164C","lp-pri-rainbow-pink-200":"#71082B","lp-pri-rainbow-pink-100":"#120107","lp-pri-achromatic-white-alpha-80":"rgba(255, 255, 255, 0.8)","lp-pri-achromatic-white-alpha-72":"rgba(255, 255, 255, 0.72)","lp-pri-achromatic-white-alpha-64":"rgba(255, 255, 255, 0.64)","lp-pri-achromatic-white-alpha-56":"rgba(255, 255, 255, 0.56)","lp-pri-achromatic-white-alpha-50":"rgba(255, 255, 255, 0.5)","lp-pri-achromatic-white-alpha-48":"rgba(255, 255, 255, 0.48)","lp-pri-achromatic-white-alpha-44":"rgba(255, 255, 255, 0.44)","lp-pri-achromatic-white-alpha-40":"rgba(255, 255, 255, 0.4)","lp-pri-achromatic-white-alpha-36":"rgba(255, 255, 255, 0.36)","lp-pri-achromatic-white-alpha-32":"rgba(255, 255, 255, 0.32)","lp-pri-achromatic-white-alpha-28":"rgba(255, 255, 255, 0.28)","lp-pri-achromatic-white-alpha-24":"rgba(255, 255, 255, 0.24)","lp-pri-achromatic-white-alpha-20":"rgba(255, 255, 255, 0.2)","lp-pri-achromatic-white-alpha-16":"rgba(255, 255, 255, 0.16)","lp-pri-achromatic-white-alpha-12":"rgba(255, 255, 255, 0.12)","lp-pri-achromatic-white-alpha-8":"rgba(255, 255, 255, 0.08)","lp-pri-achromatic-white-alpha-6":"rgba(255, 255, 255, 0.06)","lp-pri-achromatic-white-alpha-4":"rgba(255, 255, 255, 0.04)","lp-pri-achromatic-white-alpha-1":"rgba(255, 255, 255, 0.01)","lp-pri-achromatic-white-alpha-0":"rgba(255, 255, 255, 0)"},"system":{"dark":{"neutral-container-lowest":"lp-pri-gray-cool-100","neutral-container-lowest-hover":"lp-pri-gray-cool-200","neutral-container-low":"lp-pri-gray-cool-200","neutral-container-low-hover":"lp-pri-gray-cool-250","neutral-container-mid":"lp-pri-gray-cool-200","neutral-container-mid-hover":"lp-pri-gray-cool-300","neutral-container-high":"lp-pri-gray-cool-250","neutral-container-high-hover":"lp-pri-gray-cool-300","neutral-container-highest":"lp-pri-gray-cool-300","neutral-container-static-lowest":"lp-pri-achromatic-white","neutral-container-static-lowest-hover":"lp-pri-gray-cool-900","neutral-fill-lowest":"lp-pri-gray-cool-dark-alpha-0","neutral-fill-lowest-hover":"lp-pri-gray-cool-dark-alpha-12","neutral-fill-low":"lp-pri-gray-cool-dark-alpha-20","neutral-fill-low-hover":"lp-pri-gray-cool-dark-alpha-8","neutral-fill-mid":"lp-pri-gray-cool-dark-alpha-16","neutral-fill-mid-hover":"lp-pri-gray-cool-dark-alpha-32","neutral-fill-high":"lp-pri-gray-cool-dark-alpha-32","neutral-fill-high-hover":"lp-pri-gray-cool-dark-alpha-44","neutral-label-primary":"lp-pri-achromatic-white","neutral-label-secondary":"lp-pri-gray-cool-light-alpha-64","neutral-label-tertiary":"lp-pri-gray-cool-light-alpha-32","neutral-label-quaternary":"lp-pri-gray-cool-light-alpha-20","neutral-label-static-primary":"lp-pri-gray-cool-100","neutral-label-static-secondary":"lp-pri-gray-cool-dark-alpha-80","neutral-border-overlay-strong":"lp-pri-gray-cool-light-alpha-64","neutral-border-overlay-normal":"lp-pri-gray-cool-light-alpha-28","neutral-border-overlay-subtle":"lp-pri-gray-cool-light-alpha-20","neutral-border-opaque-strong":"lp-pri-achromatic-white","neutral-border-opaque-normal":"lp-pri-gray-cool-350","neutral-border-opaque-subtle":"lp-pri-gray-cool-250","inverse-container-lowest":"lp-pri-achromatic-white","inverse-container-lowest-hover":"lp-pri-gray-cool-970","inverse-container-low":"lp-pri-gray-cool-980","inverse-container-low-hover":"lp-pri-gray-cool-970","inverse-container-mid":"lp-pri-gray-cool-970","inverse-container-mid-hover":"lp-pri-gray-cool-940","inverse-container-high":"lp-pri-gray-cool-940","inverse-container-high-hover":"lp-pri-gray-cool-900","inverse-container-static-high":"lp-pri-gray-cool-250","inverse-container-static-high-hover":"lp-pri-gray-cool-350","inverse-fill-mid":"lp-pri-gray-cool-light-alpha-24","inverse-fill-mid-hover":"lp-pri-gray-cool-light-alpha-0","inverse-label-primary":"lp-pri-gray-cool-100","inverse-label-secondary":"lp-pri-gray-cool-dark-alpha-80","inverse-label-tertiary":"lp-pri-gray-cool-dark-alpha-48","inverse-label-quaternary":"lp-pri-gray-cool-dark-alpha-24","inverse-label-static-primary":"lp-pri-achromatic-white","inverse-label-static-secondary":"lp-pri-gray-cool-light-alpha-64","inverse-border-overlay-strong":"lp-pri-gray-cool-dark-alpha-64","inverse-border-overlay-normal":"lp-pri-gray-cool-dark-alpha-24","inverse-border-overlay-subtle":"lp-pri-gray-cool-dark-alpha-16","inverse-border-opaque-strong":"lp-pri-gray-cool-100","inverse-border-opaque-normal":"lp-pri-gray-cool-850","inverse-border-opaque-subtle":"lp-pri-gray-cool-920","brand-container-mid":"lp-pri-brand-original-500","brand-container-mid-hover":"lp-pri-brand-original-600","brand-container-high":"lp-pri-brand-original-400","brand-label-primary":"lp-pri-brand-variation-500","brand-label-secondary":"lp-pri-brand-original-alpha-80","brand-border-overlay-normal":"lp-pri-brand-original-500","brand-border-opaque-normal":"lp-pri-brand-original-alpha-20","accent-container-yellow":"lp-pri-rainbow-yellow-600","accent-mint":"lp-pri-rainbow-mint-600","accent-cyan":"lp-pri-rainbow-cyan-600","accent-purple":"lp-pri-rainbow-purple-600","accent-pink":"lp-pri-rainbow-pink-600","function-container-positive":"lp-pri-rainbow-green-600","function-container-negative":"lp-pri-rainbow-red-500","function-container-negative-hover":"lp-pri-rainbow-red-600","function-container-caution":"lp-pri-rainbow-orange-500","function-label-positive":"lp-pri-rainbow-green-600","function-label-negative":"lp-pri-rainbow-red-500","function-label-caution":"lp-pri-rainbow-orange-500"},"light":{"neutral-container-lowest":"lp-pri-achromatic-white","neutral-container-lowest-hover":"lp-pri-gray-cool-970","neutral-container-low":"lp-pri-gray-cool-980","neutral-container-low-hover":"lp-pri-gray-cool-970","neutral-container-mid":"lp-pri-gray-cool-970","neutral-container-mid-hover":"lp-pri-gray-cool-940","neutral-container-high":"lp-pri-gray-cool-940","neutral-container-high-hover":"lp-pri-gray-cool-900","neutral-container-highest":"lp-pri-gray-cool-920","neutral-container-static-lowest":"lp-pri-achromatic-white","neutral-container-static-lowest-hover":"lp-pri-gray-cool-970","neutral-fill-lowest":"lp-pri-gray-cool-dark-alpha-0","neutral-fill-lowest-hover":"lp-pri-gray-cool-dark-alpha-6","neutral-fill-low":"lp-pri-gray-cool-dark-alpha-8","neutral-fill-low-hover":"lp-pri-gray-cool-dark-alpha-4","neutral-fill-mid":"lp-pri-gray-cool-dark-alpha-8","neutral-fill-mid-hover":"lp-pri-gray-cool-dark-alpha-16","neutral-fill-high":"lp-pri-gray-cool-dark-alpha-20","neutral-fill-high-hover":"lp-pri-gray-cool-dark-alpha-28","neutral-label-primary":"lp-pri-gray-cool-100","neutral-label-secondary":"lp-pri-gray-cool-dark-alpha-80","neutral-label-tertiary":"lp-pri-gray-cool-dark-alpha-48","neutral-label-quaternary":"lp-pri-gray-cool-dark-alpha-24","neutral-label-static-primary":"lp-pri-gray-cool-100","neutral-label-static-secondary":"lp-pri-gray-cool-dark-alpha-80","neutral-border-overlay-strong":"lp-pri-gray-cool-dark-alpha-64","neutral-border-overlay-normal":"lp-pri-gray-cool-dark-alpha-24","neutral-border-overlay-subtle":"lp-pri-gray-cool-dark-alpha-16","neutral-border-opaque-strong":"lp-pri-gray-cool-100","neutral-border-opaque-normal":"lp-pri-gray-cool-850","neutral-border-opaque-subtle":"lp-pri-gray-cool-920","inverse-container-lowest":"lp-pri-gray-cool-100","inverse-container-lowest-hover":"lp-pri-gray-cool-200","inverse-container-low":"lp-pri-gray-cool-200","inverse-container-low-hover":"lp-pri-gray-cool-250","inverse-container-mid":"lp-pri-gray-cool-200","inverse-container-mid-hover":"lp-pri-gray-cool-300","inverse-container-high":"lp-pri-gray-cool-250","inverse-container-high-hover":"lp-pri-gray-cool-300","inverse-container-static-high":"lp-pri-gray-cool-250","inverse-container-static-high-hover":"lp-pri-gray-cool-350","inverse-fill-mid":"lp-pri-achromatic-white","inverse-fill-mid-hover":"lp-pri-gray-cool-970","inverse-label-primary":"lp-pri-achromatic-white","inverse-label-secondary":"lp-pri-gray-cool-light-alpha-64","inverse-label-tertiary":"lp-pri-gray-cool-light-alpha-32","inverse-label-quaternary":"lp-pri-gray-cool-light-alpha-20","inverse-label-static-primary":"lp-pri-achromatic-white","inverse-label-static-secondary":"lp-pri-gray-cool-light-alpha-64","inverse-border-overlay-strong":"lp-pri-gray-cool-light-alpha-64","inverse-border-overlay-normal":"lp-pri-gray-cool-light-alpha-28","inverse-border-overlay-subtle":"lp-pri-gray-cool-light-alpha-20","inverse-border-opaque-strong":"lp-pri-achromatic-white","inverse-border-opaque-normal":"lp-pri-gray-cool-350","inverse-border-opaque-subtle":"lp-pri-gray-cool-250","brand-container-mid":"lp-pri-brand-original-500","brand-container-mid-hover":"lp-pri-brand-original-400","brand-container-high":"lp-pri-brand-original-400","brand-label-primary":"lp-pri-brand-original-500","brand-label-secondary":"lp-pri-brand-original-alpha-80","brand-border-overlay-normal":"lp-pri-brand-original-500","brand-border-opaque-normal":"lp-pri-brand-original-alpha-20","accent-container-yellow":"lp-pri-rainbow-yellow-500","accent-mint":"lp-pri-rainbow-mint-500","accent-cyan":"lp-pri-rainbow-cyan-500","accent-purple":"lp-pri-rainbow-purple-500","accent-pink":"lp-pri-rainbow-pink-500","function-container-positive":"lp-pri-rainbow-green-500","function-container-negative":"lp-pri-rainbow-red-500","function-container-negative-hover":"lp-pri-rainbow-red-400","function-container-caution":"lp-pri-rainbow-orange-500","function-label-positive":"lp-pri-rainbow-green-500","function-label-negative":"lp-pri-rainbow-red-500","function-label-caution":"lp-pri-rainbow-orange-500"}}}}
|
|
1
|
+
export const color = {"color":{"primitive":{"lp-pri-achromatic-white":"#ffffff","lp-pri-achromatic-black":"#000000","lp-pri-gray-cool-980":"#F9F9FA","lp-pri-gray-cool-970":"#F6F6F7","lp-pri-gray-cool-940":"#EDEEF0","lp-pri-gray-cool-920":"#E9E9EB","lp-pri-gray-cool-900":"#E3E3E6","lp-pri-gray-cool-850":"#D7D7D9","lp-pri-gray-cool-750":"#BEBFC2","lp-pri-gray-cool-600":"#939499","lp-pri-gray-cool-450":"#6D6D70","lp-pri-gray-cool-350":"#58595C","lp-pri-gray-cool-300":"#4A4A4D","lp-pri-gray-cool-250":"#3B3B3D","lp-pri-gray-cool-200":"#313133","lp-pri-gray-cool-100":"#1E1E1F","lp-pri-brand-original-950":"#FAFBFF","lp-pri-brand-original-900":"#F4F5FF","lp-pri-brand-original-800":"#D9DEFF","lp-pri-brand-original-700":"#B7C1FF","lp-pri-brand-original-600":"#6B7FFF","lp-pri-brand-original-500":"#4058FF","lp-pri-brand-original-400":"#273FD9","lp-pri-brand-original-200":"#152AB3","lp-pri-brand-original-100":"#071780","lp-pri-brand-original-50":"#041166","lp-pri-brand-variation-950":"#FAFBFF","lp-pri-brand-variation-900":"#F4F7FF","lp-pri-brand-variation-800":"#D9E4FF","lp-pri-brand-variation-700":"#B7CDFF","lp-pri-brand-variation-600":"#759EFF","lp-pri-brand-variation-500":"#5487FF","lp-pri-brand-variation-400":"#4E70BF","lp-pri-brand-variation-200":"#4A6299","lp-pri-brand-variation-100":"#384666","lp-pri-brand-variation-50":"#2C364D","lp-pri-rainbow-red-950":"#FFF5F5","lp-pri-rainbow-red-900":"#FFE7E7","lp-pri-rainbow-red-800":"#FFC3C3","lp-pri-rainbow-red-700":"#FF9090","lp-pri-rainbow-red-600":"#FF6060","lp-pri-rainbow-red-500":"#FF3333","lp-pri-rainbow-red-400":"#DB2323","lp-pri-rainbow-red-300":"#B81616","lp-pri-rainbow-red-200":"#710808","lp-pri-rainbow-red-100":"#410404","lp-pri-rainbow-orange-950":"#FFFBF4","lp-pri-rainbow-orange-900":"#FFF4E3","lp-pri-rainbow-orange-800":"#FFE1B4","lp-pri-rainbow-orange-700":"#FFC875","lp-pri-rainbow-orange-600":"#FFB039","lp-pri-rainbow-orange-500":"#FF9900","lp-pri-rainbow-orange-400":"#DB8503","lp-pri-rainbow-orange-300":"#B87005","lp-pri-rainbow-orange-200":"#714605","lp-pri-rainbow-orange-100":"#412803","lp-pri-rainbow-yellow-950":"#FFFDF4","lp-pri-rainbow-yellow-900":"#FFF9E3","lp-pri-rainbow-yellow-800":"#FFF0B4","lp-pri-rainbow-yellow-700":"#FFE375","lp-pri-rainbow-yellow-600":"#FFD739","lp-pri-rainbow-yellow-500":"#FFCC00","lp-pri-rainbow-yellow-400":"#DBB003","lp-pri-rainbow-yellow-300":"#B89405","lp-pri-rainbow-yellow-200":"#715B05","lp-pri-rainbow-yellow-100":"#413503","lp-pri-rainbow-green-950":"#F5FEF7","lp-pri-rainbow-green-900":"#E6FCEA","lp-pri-rainbow-green-800":"#BFF5C8","lp-pri-rainbow-green-700":"#8CEC9C","lp-pri-rainbow-green-600":"#5DDF73","lp-pri-rainbow-green-500":"#30BF48","lp-pri-rainbow-green-400":"#20A536","lp-pri-rainbow-green-300":"#148B28","lp-pri-rainbow-green-200":"#075714","lp-pri-rainbow-green-100":"#03350B","lp-pri-rainbow-mint-950":"#F3FEFE","lp-pri-rainbow-mint-900":"#AFF7F7","lp-pri-rainbow-mint-800":"#6EF0F0","lp-pri-rainbow-mint-700":"#33E6E6","lp-pri-rainbow-mint-600":"#00CCCC","lp-pri-rainbow-mint-500":"#02B0B0","lp-pri-rainbow-mint-400":"#02B0B0","lp-pri-rainbow-mint-300":"#049494","lp-pri-rainbow-mint-200":"#045C5C","lp-pri-rainbow-mint-100":"#033737","lp-pri-rainbow-cyan-950":"#F6FBFF","lp-pri-rainbow-cyan-900":"#E8F6FF","lp-pri-rainbow-cyan-800":"#C6E8FF","lp-pri-rainbow-cyan-700":"#97D5FF","lp-pri-rainbow-cyan-600":"#6AC4FF","lp-pri-rainbow-cyan-500":"#40B3FF","lp-pri-rainbow-cyan-400":"#2B95DB","lp-pri-rainbow-cyan-300":"#1A79B8","lp-pri-rainbow-cyan-200":"#094771","lp-pri-rainbow-cyan-100":"#042941","lp-pri-rainbow-purple-950":"#FCF6FF","lp-pri-rainbow-purple-900":"#F7EAFE","lp-pri-rainbow-purple-800":"#EBCAFB","lp-pri-rainbow-purple-700":"#DAA0F7","lp-pri-rainbow-purple-600":"#C978F2","lp-pri-rainbow-purple-500":"#B450E6","lp-pri-rainbow-purple-400":"#9535C6","lp-pri-rainbow-purple-300":"#7920A6","lp-pri-rainbow-purple-200":"#480A67","lp-pri-rainbow-purple-100":"#29043C","lp-pri-rainbow-pink-950":"#FFF5F8","lp-pri-rainbow-pink-900":"#FFE7EF","lp-pri-rainbow-pink-800":"#FFC3D7","lp-pri-rainbow-pink-700":"#FF90B5","lp-pri-rainbow-pink-600":"#FF6095","lp-pri-rainbow-pink-500":"#FF3377","lp-pri-rainbow-pink-400":"#DB2360","lp-pri-rainbow-pink-300":"#B8164C","lp-pri-rainbow-pink-200":"#71082B","lp-pri-rainbow-pink-100":"#120107","lp-pri-achromatic-white-alpha-80":"rgba(255, 255, 255, 0.8)","lp-pri-achromatic-white-alpha-72":"rgba(255, 255, 255, 0.72)","lp-pri-achromatic-white-alpha-64":"rgba(255, 255, 255, 0.64)","lp-pri-achromatic-white-alpha-56":"rgba(255, 255, 255, 0.56)","lp-pri-achromatic-white-alpha-50":"rgba(255, 255, 255, 0.5)","lp-pri-achromatic-white-alpha-48":"rgba(255, 255, 255, 0.48)","lp-pri-achromatic-white-alpha-44":"rgba(255, 255, 255, 0.44)","lp-pri-achromatic-white-alpha-40":"rgba(255, 255, 255, 0.4)","lp-pri-achromatic-white-alpha-36":"rgba(255, 255, 255, 0.36)","lp-pri-achromatic-white-alpha-32":"rgba(255, 255, 255, 0.32)","lp-pri-achromatic-white-alpha-28":"rgba(255, 255, 255, 0.28)","lp-pri-achromatic-white-alpha-24":"rgba(255, 255, 255, 0.24)","lp-pri-achromatic-white-alpha-20":"rgba(255, 255, 255, 0.2)","lp-pri-achromatic-white-alpha-16":"rgba(255, 255, 255, 0.16)","lp-pri-achromatic-white-alpha-12":"rgba(255, 255, 255, 0.12)","lp-pri-achromatic-white-alpha-8":"rgba(255, 255, 255, 0.08)","lp-pri-achromatic-white-alpha-6":"rgba(255, 255, 255, 0.06)","lp-pri-achromatic-white-alpha-4":"rgba(255, 255, 255, 0.04)","lp-pri-achromatic-white-alpha-1":"rgba(255, 255, 255, 0.01)","lp-pri-achromatic-white-alpha-0":"rgba(255, 255, 255, 0)","lp-pri-gray-cool-dark-alpha-80":"rgba(109, 109, 112, 0.8)","lp-pri-gray-cool-dark-alpha-72":"rgba(109, 109, 112, 0.72)","lp-pri-gray-cool-dark-alpha-64":"rgba(109, 109, 112, 0.64)","lp-pri-gray-cool-dark-alpha-56":"rgba(109, 109, 112, 0.56)","lp-pri-gray-cool-dark-alpha-50":"rgba(109, 109, 112, 0.5)","lp-pri-gray-cool-dark-alpha-48":"rgba(109, 109, 112, 0.48)","lp-pri-gray-cool-dark-alpha-44":"rgba(109, 109, 112, 0.44)","lp-pri-gray-cool-dark-alpha-40":"rgba(109, 109, 112, 0.4)","lp-pri-gray-cool-dark-alpha-36":"rgba(109, 109, 112, 0.36)","lp-pri-gray-cool-dark-alpha-32":"rgba(109, 109, 112, 0.32)","lp-pri-gray-cool-dark-alpha-28":"rgba(109, 109, 112, 0.28)","lp-pri-gray-cool-dark-alpha-24":"rgba(109, 109, 112, 0.24)","lp-pri-gray-cool-dark-alpha-20":"rgba(109, 109, 112, 0.2)","lp-pri-gray-cool-dark-alpha-16":"rgba(109, 109, 112, 0.16)","lp-pri-gray-cool-dark-alpha-12":"rgba(109, 109, 112, 0.12)","lp-pri-gray-cool-dark-alpha-8":"rgba(109, 109, 112, 0.08)","lp-pri-gray-cool-dark-alpha-6":"rgba(109, 109, 112, 0.06)","lp-pri-gray-cool-dark-alpha-4":"rgba(109, 109, 112, 0.04)","lp-pri-gray-cool-dark-alpha-1":"rgba(109, 109, 112, 0.01)","lp-pri-gray-cool-dark-alpha-0":"rgba(109, 109, 112, 0)","lp-pri-gray-cool-light-alpha-80":"rgba(233, 233, 235, 0.8)","lp-pri-gray-cool-light-alpha-72":"rgba(233, 233, 235, 0.72)","lp-pri-gray-cool-light-alpha-64":"rgba(233, 233, 235, 0.64)","lp-pri-gray-cool-light-alpha-56":"rgba(233, 233, 235, 0.56)","lp-pri-gray-cool-light-alpha-50":"rgba(233, 233, 235, 0.5)","lp-pri-gray-cool-light-alpha-48":"rgba(233, 233, 235, 0.48)","lp-pri-gray-cool-light-alpha-44":"rgba(233, 233, 235, 0.44)","lp-pri-gray-cool-light-alpha-40":"rgba(233, 233, 235, 0.4)","lp-pri-gray-cool-light-alpha-36":"rgba(233, 233, 235, 0.36)","lp-pri-gray-cool-light-alpha-32":"rgba(233, 233, 235, 0.32)","lp-pri-gray-cool-light-alpha-28":"rgba(233, 233, 235, 0.28)","lp-pri-gray-cool-light-alpha-24":"rgba(233, 233, 235, 0.24)","lp-pri-gray-cool-light-alpha-20":"rgba(233, 233, 235, 0.2)","lp-pri-gray-cool-light-alpha-16":"rgba(233, 233, 235, 0.16)","lp-pri-gray-cool-light-alpha-12":"rgba(233, 233, 235, 0.12)","lp-pri-gray-cool-light-alpha-8":"rgba(233, 233, 235, 0.08)","lp-pri-gray-cool-light-alpha-6":"rgba(233, 233, 235, 0.06)","lp-pri-gray-cool-light-alpha-4":"rgba(233, 233, 235, 0.04)","lp-pri-gray-cool-light-alpha-1":"rgba(233, 233, 235, 0.01)","lp-pri-gray-cool-light-alpha-0":"rgba(233, 233, 235, 0)","lp-pri-brand-original-alpha-80":"rgba(4, 17, 102, 0.8)","lp-pri-brand-original-alpha-72":"rgba(4, 17, 102, 0.72)","lp-pri-brand-original-alpha-64":"rgba(4, 17, 102, 0.64)","lp-pri-brand-original-alpha-56":"rgba(4, 17, 102, 0.56)","lp-pri-brand-original-alpha-50":"rgba(4, 17, 102, 0.5)","lp-pri-brand-original-alpha-48":"rgba(4, 17, 102, 0.48)","lp-pri-brand-original-alpha-44":"rgba(4, 17, 102, 0.44)","lp-pri-brand-original-alpha-40":"rgba(4, 17, 102, 0.4)","lp-pri-brand-original-alpha-36":"rgba(4, 17, 102, 0.36)","lp-pri-brand-original-alpha-32":"rgba(4, 17, 102, 0.32)","lp-pri-brand-original-alpha-28":"rgba(4, 17, 102, 0.28)","lp-pri-brand-original-alpha-24":"rgba(4, 17, 102, 0.24)","lp-pri-brand-original-alpha-20":"rgba(4, 17, 102, 0.2)","lp-pri-brand-original-alpha-16":"rgba(4, 17, 102, 0.16)","lp-pri-brand-original-alpha-12":"rgba(4, 17, 102, 0.12)","lp-pri-brand-original-alpha-8":"rgba(4, 17, 102, 0.08)","lp-pri-brand-original-alpha-6":"rgba(4, 17, 102, 0.06)","lp-pri-brand-original-alpha-4":"rgba(4, 17, 102, 0.04)","lp-pri-brand-original-alpha-1":"rgba(4, 17, 102, 0.01)","lp-pri-brand-original-alpha-0":"rgba(4, 17, 102, 0)"},"system":{"dark":{"neutral-container-lowest":"lp-pri-gray-cool-100","neutral-container-lowest-hover":"lp-pri-gray-cool-200","neutral-container-low":"lp-pri-gray-cool-200","neutral-container-low-hover":"lp-pri-gray-cool-250","neutral-container-mid":"lp-pri-gray-cool-200","neutral-container-mid-hover":"lp-pri-gray-cool-300","neutral-container-high":"lp-pri-gray-cool-250","neutral-container-high-hover":"lp-pri-gray-cool-300","neutral-container-highest":"lp-pri-gray-cool-300","neutral-container-static-lowest":"lp-pri-achromatic-white","neutral-container-static-lowest-hover":"lp-pri-gray-cool-900","neutral-fill-lowest":"lp-pri-gray-cool-dark-alpha-0","neutral-fill-lowest-hover":"lp-pri-gray-cool-dark-alpha-12","neutral-fill-low":"lp-pri-gray-cool-dark-alpha-20","neutral-fill-low-hover":"lp-pri-gray-cool-dark-alpha-8","neutral-fill-mid":"lp-pri-gray-cool-dark-alpha-16","neutral-fill-mid-hover":"lp-pri-gray-cool-dark-alpha-32","neutral-fill-high":"lp-pri-gray-cool-dark-alpha-32","neutral-fill-high-hover":"lp-pri-gray-cool-dark-alpha-44","neutral-label-primary":"lp-pri-achromatic-white","neutral-label-secondary":"lp-pri-gray-cool-light-alpha-64","neutral-label-tertiary":"lp-pri-gray-cool-light-alpha-32","neutral-label-quaternary":"lp-pri-gray-cool-light-alpha-20","neutral-label-static-primary":"lp-pri-gray-cool-100","neutral-label-static-secondary":"lp-pri-gray-cool-dark-alpha-80","neutral-border-overlay-strong":"lp-pri-gray-cool-light-alpha-64","neutral-border-overlay-normal":"lp-pri-gray-cool-light-alpha-28","neutral-border-overlay-subtle":"lp-pri-gray-cool-light-alpha-20","neutral-border-opaque-strong":"lp-pri-achromatic-white","neutral-border-opaque-normal":"lp-pri-gray-cool-350","neutral-border-opaque-subtle":"lp-pri-gray-cool-250","inverse-container-lowest":"lp-pri-achromatic-white","inverse-container-lowest-hover":"lp-pri-gray-cool-970","inverse-container-low":"lp-pri-gray-cool-980","inverse-container-low-hover":"lp-pri-gray-cool-970","inverse-container-mid":"lp-pri-gray-cool-970","inverse-container-mid-hover":"lp-pri-gray-cool-940","inverse-container-high":"lp-pri-gray-cool-940","inverse-container-high-hover":"lp-pri-gray-cool-900","inverse-container-static-high":"lp-pri-gray-cool-250","inverse-container-static-high-hover":"lp-pri-gray-cool-350","inverse-fill-mid":"lp-pri-gray-cool-light-alpha-24","inverse-fill-mid-hover":"lp-pri-gray-cool-light-alpha-0","inverse-label-primary":"lp-pri-gray-cool-100","inverse-label-secondary":"lp-pri-gray-cool-dark-alpha-80","inverse-label-tertiary":"lp-pri-gray-cool-dark-alpha-48","inverse-label-quaternary":"lp-pri-gray-cool-dark-alpha-24","inverse-label-static-primary":"lp-pri-achromatic-white","inverse-label-static-secondary":"lp-pri-gray-cool-light-alpha-64","inverse-border-overlay-strong":"lp-pri-gray-cool-dark-alpha-64","inverse-border-overlay-normal":"lp-pri-gray-cool-dark-alpha-24","inverse-border-overlay-subtle":"lp-pri-gray-cool-dark-alpha-16","inverse-border-opaque-strong":"lp-pri-gray-cool-100","inverse-border-opaque-normal":"lp-pri-gray-cool-850","inverse-border-opaque-subtle":"lp-pri-gray-cool-920","brand-container-mid":"lp-pri-brand-original-500","brand-container-mid-hover":"lp-pri-brand-original-600","brand-container-high":"lp-pri-brand-original-400","brand-label-primary":"lp-pri-brand-variation-500","brand-label-secondary":"lp-pri-brand-original-alpha-80","brand-border-overlay-normal":"lp-pri-brand-original-500","brand-border-opaque-normal":"lp-pri-brand-original-alpha-20","accent-container-yellow":"lp-pri-rainbow-yellow-600","accent-mint":"lp-pri-rainbow-mint-600","accent-cyan":"lp-pri-rainbow-cyan-600","accent-purple":"lp-pri-rainbow-purple-600","accent-pink":"lp-pri-rainbow-pink-600","function-container-positive":"lp-pri-rainbow-green-600","function-container-negative":"lp-pri-rainbow-red-500","function-container-negative-hover":"lp-pri-rainbow-red-600","function-container-caution":"lp-pri-rainbow-orange-500","function-label-positive":"lp-pri-rainbow-green-600","function-label-negative":"lp-pri-rainbow-red-500","function-label-caution":"lp-pri-rainbow-orange-500"},"light":{"neutral-container-lowest":"lp-pri-achromatic-white","neutral-container-lowest-hover":"lp-pri-gray-cool-970","neutral-container-low":"lp-pri-gray-cool-980","neutral-container-low-hover":"lp-pri-gray-cool-970","neutral-container-mid":"lp-pri-gray-cool-970","neutral-container-mid-hover":"lp-pri-gray-cool-940","neutral-container-high":"lp-pri-gray-cool-940","neutral-container-high-hover":"lp-pri-gray-cool-900","neutral-container-highest":"lp-pri-gray-cool-920","neutral-container-static-lowest":"lp-pri-achromatic-white","neutral-container-static-lowest-hover":"lp-pri-gray-cool-970","neutral-fill-lowest":"lp-pri-gray-cool-dark-alpha-0","neutral-fill-lowest-hover":"lp-pri-gray-cool-dark-alpha-6","neutral-fill-low":"lp-pri-gray-cool-dark-alpha-8","neutral-fill-low-hover":"lp-pri-gray-cool-dark-alpha-4","neutral-fill-mid":"lp-pri-gray-cool-dark-alpha-8","neutral-fill-mid-hover":"lp-pri-gray-cool-dark-alpha-16","neutral-fill-high":"lp-pri-gray-cool-dark-alpha-20","neutral-fill-high-hover":"lp-pri-gray-cool-dark-alpha-28","neutral-label-primary":"lp-pri-gray-cool-100","neutral-label-secondary":"lp-pri-gray-cool-dark-alpha-80","neutral-label-tertiary":"lp-pri-gray-cool-dark-alpha-48","neutral-label-quaternary":"lp-pri-gray-cool-dark-alpha-24","neutral-label-static-primary":"lp-pri-gray-cool-100","neutral-label-static-secondary":"lp-pri-gray-cool-dark-alpha-80","neutral-border-overlay-strong":"lp-pri-gray-cool-dark-alpha-64","neutral-border-overlay-normal":"lp-pri-gray-cool-dark-alpha-24","neutral-border-overlay-subtle":"lp-pri-gray-cool-dark-alpha-16","neutral-border-opaque-strong":"lp-pri-gray-cool-100","neutral-border-opaque-normal":"lp-pri-gray-cool-850","neutral-border-opaque-subtle":"lp-pri-gray-cool-920","inverse-container-lowest":"lp-pri-gray-cool-100","inverse-container-lowest-hover":"lp-pri-gray-cool-200","inverse-container-low":"lp-pri-gray-cool-200","inverse-container-low-hover":"lp-pri-gray-cool-250","inverse-container-mid":"lp-pri-gray-cool-200","inverse-container-mid-hover":"lp-pri-gray-cool-300","inverse-container-high":"lp-pri-gray-cool-250","inverse-container-high-hover":"lp-pri-gray-cool-300","inverse-container-static-high":"lp-pri-gray-cool-250","inverse-container-static-high-hover":"lp-pri-gray-cool-350","inverse-fill-mid":"lp-pri-achromatic-white","inverse-fill-mid-hover":"lp-pri-gray-cool-970","inverse-label-primary":"lp-pri-achromatic-white","inverse-label-secondary":"lp-pri-gray-cool-light-alpha-64","inverse-label-tertiary":"lp-pri-gray-cool-light-alpha-32","inverse-label-quaternary":"lp-pri-gray-cool-light-alpha-20","inverse-label-static-primary":"lp-pri-achromatic-white","inverse-label-static-secondary":"lp-pri-gray-cool-light-alpha-64","inverse-border-overlay-strong":"lp-pri-gray-cool-light-alpha-64","inverse-border-overlay-normal":"lp-pri-gray-cool-light-alpha-28","inverse-border-overlay-subtle":"lp-pri-gray-cool-light-alpha-20","inverse-border-opaque-strong":"lp-pri-achromatic-white","inverse-border-opaque-normal":"lp-pri-gray-cool-350","inverse-border-opaque-subtle":"lp-pri-gray-cool-250","brand-container-mid":"lp-pri-brand-original-500","brand-container-mid-hover":"lp-pri-brand-original-400","brand-container-high":"lp-pri-brand-original-400","brand-label-primary":"lp-pri-brand-original-500","brand-label-secondary":"lp-pri-brand-original-alpha-80","brand-border-overlay-normal":"lp-pri-brand-original-500","brand-border-opaque-normal":"lp-pri-brand-original-alpha-20","accent-container-yellow":"lp-pri-rainbow-yellow-500","accent-mint":"lp-pri-rainbow-mint-500","accent-cyan":"lp-pri-rainbow-cyan-500","accent-purple":"lp-pri-rainbow-purple-500","accent-pink":"lp-pri-rainbow-pink-500","function-container-positive":"lp-pri-rainbow-green-500","function-container-negative":"lp-pri-rainbow-red-500","function-container-negative-hover":"lp-pri-rainbow-red-400","function-container-caution":"lp-pri-rainbow-orange-500","function-label-positive":"lp-pri-rainbow-green-500","function-label-negative":"lp-pri-rainbow-red-500","function-label-caution":"lp-pri-rainbow-orange-500"}}}}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { useLayoutEffect } from 'react';
|
|
1
|
+
import { useLayoutEffect, useState } from 'react';
|
|
2
2
|
|
|
3
3
|
const LOCAL_STORAGE_KEY = 'theme';
|
|
4
4
|
|
|
5
5
|
export const useDarkTheme = () => {
|
|
6
|
+
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
7
|
+
|
|
6
8
|
const isUserColorTheme = localStorage.getItem('color-theme');
|
|
7
9
|
|
|
8
10
|
const setDarkTheme = () => {
|
|
@@ -38,5 +40,6 @@ export const useDarkTheme = () => {
|
|
|
38
40
|
return {
|
|
39
41
|
setDarkTheme,
|
|
40
42
|
toggleTheme,
|
|
43
|
+
isDarkMode
|
|
41
44
|
};
|
|
42
45
|
};
|