@liner-fe/design-token 2.0.56 → 2.0.58

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.
Files changed (20) hide show
  1. package/global.css +8 -0
  2. package/lib/design/typography/index.d.ts +0 -1
  3. package/lib/design/vars.d.ts +1 -0
  4. package/lib/hooks/useDarkTheme.d.ts +0 -1
  5. package/lib/index.cjs +11 -37
  6. package/lib/index.cjs.map +4 -4
  7. package/lib/index.mjs +10 -36
  8. package/lib/index.mjs.map +4 -4
  9. package/package.json +1 -1
  10. package/src/design/color/index.ts +1 -1
  11. package/src/design/typography/index.ts +0 -1
  12. package/src/design/vars.ts +1 -1
  13. package/src/hooks/useDarkTheme.ts +21 -19
  14. package/src/design/typography/usage/Caption.tsx +0 -0
  15. package/src/design/typography/usage/Display.tsx +0 -18
  16. package/src/design/typography/usage/Heading.tsx +0 -19
  17. package/src/design/typography/usage/Paragraph.tsx +0 -47
  18. package/src/design/typography/usage/Title.tsx +0 -23
  19. package/src/design/typography/usage/index.ts +0 -2
  20. package/src/design/typography/usage/types.ts +0 -29
package/global.css CHANGED
@@ -550,6 +550,12 @@
550
550
  font-weight: var(--lp-pri-font-weight-600);
551
551
  line-height: var(--lp-pri-font-lineheight-130);
552
552
  }
553
+ :root .lp-sys-typo-caption1-normal-medium {
554
+ font-family: "Pretendard Variable";
555
+ font-size: var(--lp-pri-font-size-13);
556
+ font-weight: var(--lp-pri-font-weight-420);
557
+ line-height: var(--lp-pri-font-lineheight-130);
558
+ }
553
559
  :root .lp-sys-typo-caption1-normal-regular {
554
560
  font-family: "Pretendard Variable";
555
561
  font-size: var(--lp-pri-font-size-13);
@@ -610,6 +616,7 @@
610
616
  --inverse-container-high-hover: var(--lp-pri-gray-cool-900);
611
617
  --inverse-container-static-high: var(--lp-pri-gray-cool-250);
612
618
  --inverse-container-static-high-hover: var(--lp-pri-gray-cool-350);
619
+ --inverse-container-highest: var(--lp-pri-gray-cool-920);
613
620
  --inverse-fill-mid: var(--lp-pri-gray-cool-light-alpha-24);
614
621
  --inverse-fill-mid-hover: var(--lp-pri-gray-cool-light-alpha-0);
615
622
  --inverse-label-primary: var(--lp-pri-gray-cool-100);
@@ -686,6 +693,7 @@
686
693
  --inverse-container-high-hover: var(--lp-pri-gray-cool-300);
687
694
  --inverse-container-static-high: var(--lp-pri-gray-cool-250);
688
695
  --inverse-container-static-high-hover: var(--lp-pri-gray-cool-350);
696
+ --inverse-container-highest: var(--lp-pri-gray-cool-300);
689
697
  --inverse-fill-mid: var(--lp-pri-achromatic-white);
690
698
  --inverse-fill-mid-hover: var(--lp-pri-gray-cool-970);
691
699
  --inverse-label-primary: var(--lp-pri-achromatic-white);
package/lib/design/typography/index.d.ts CHANGED
@@ -1,2 +1 @@
1
1
  export * from './primitive';
2
- export * from './usage';
package/lib/design/vars.d.ts CHANGED
@@ -41,6 +41,7 @@ export declare const vars: {
41
41
  "inverse-container-high-hover": string;
42
42
  "inverse-container-static-high": string;
43
43
  "inverse-container-static-high-hover": string;
44
+ "inverse-container-highest": string;
44
45
  "inverse-fill-mid": string;
45
46
  "inverse-fill-mid-hover": string;
46
47
  "inverse-label-primary": string;
package/lib/hooks/useDarkTheme.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  export declare const useDarkTheme: () => {
2
- setDarkTheme: () => void;
3
2
  isDarkMode: boolean;
4
3
  };
package/lib/index.cjs CHANGED
@@ -32,9 +32,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
32
32
  var src_exports = {};
33
33
  __export(src_exports, {
34
34
  DesignSystemHead: () => DesignSystemHead,
35
- Display1: () => Display1,
36
- Heading1: () => Heading1,
37
- Heading2: () => Heading2,
38
35
  font: () => font,
39
36
  opacity: () => opacity,
40
37
  radius: () => radius,
@@ -140,38 +137,15 @@ var weight = {
140
137
  };
141
138
  var font = { weight, lineHeight, size: size2 };
142
139
 
143
- // src/design/typography/usage/Heading.tsx
144
- var import_react = __toESM(require("react"));
145
- var Heading1 = /* @__PURE__ */ __name((props) => {
146
- return /* @__PURE__ */ import_react.default.createElement("div", { ...props, className: `lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ""}` }, props.children);
147
- }, "Heading1");
148
- var Heading2 = /* @__PURE__ */ __name((props) => {
149
- return /* @__PURE__ */ import_react.default.createElement("div", { ...props, className: `lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ""}` }, props.children);
150
- }, "Heading2");
151
-
152
- // src/design/typography/usage/Display.tsx
153
- var import_react2 = __toESM(require("react"));
154
- var Display1 = /* @__PURE__ */ __name((props) => {
155
- return /* @__PURE__ */ import_react2.default.createElement(
156
- "div",
157
- {
158
- ...props,
159
- className: `lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ""}`
160
- },
161
- props.children
162
- );
163
- }, "Display1");
164
-
165
140
  // src/hooks/useDarkTheme.ts
166
- var import_react3 = require("react");
141
+ var import_react = require("react");
167
142
  var useDarkTheme = /* @__PURE__ */ __name(() => {
168
- const [isDarkMode, setIsDarkMode] = (0, import_react3.useState)(false);
169
- const setDarkTheme = /* @__PURE__ */ __name(() => {
170
- document.documentElement.setAttribute("color-theme", "dark");
171
- setIsDarkMode(true);
172
- }, "setDarkTheme");
143
+ const [isDarkMode, setIsDarkMode] = (0, import_react.useState)(false);
144
+ (0, import_react.useLayoutEffect)(() => {
145
+ setIsDarkMode(document.documentElement.getAttribute("color-theme") === "dark");
146
+ }, []);
173
147
  return {
174
- setDarkTheme,
148
+ // setDarkTheme,
175
149
  // toggleTheme,
176
150
  isDarkMode
177
151
  };
@@ -182,9 +156,9 @@ var useLanguage = /* @__PURE__ */ __name(() => {
182
156
  }, "useLanguage");
183
157
 
184
158
  // src/components/Head.tsx
185
- var import_react4 = __toESM(require("react"));
159
+ var import_react2 = __toESM(require("react"));
186
160
  var DesignSystemHead = /* @__PURE__ */ __name(() => {
187
- return /* @__PURE__ */ import_react4.default.createElement(Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
161
+ return /* @__PURE__ */ import_react2.default.createElement(Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
188
162
  "link",
189
163
  {
190
164
  rel: "stylesheet",
@@ -192,7 +166,7 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
192
166
  crossOrigin: "anonymous",
193
167
  href: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css"
194
168
  }
195
- ), /* @__PURE__ */ import_react4.default.createElement(
169
+ ), /* @__PURE__ */ import_react2.default.createElement(
196
170
  "link",
197
171
  {
198
172
  rel: "stylesheet",
@@ -200,7 +174,7 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
200
174
  crossOrigin: "anonymous",
201
175
  href: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
202
176
  }
203
- ), /* @__PURE__ */ import_react4.default.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), /* @__PURE__ */ import_react4.default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), /* @__PURE__ */ import_react4.default.createElement(
177
+ ), /* @__PURE__ */ import_react2.default.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), /* @__PURE__ */ import_react2.default.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), /* @__PURE__ */ import_react2.default.createElement(
204
178
  "link",
205
179
  {
206
180
  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",
@@ -210,6 +184,6 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
210
184
  }, "DesignSystemHead");
211
185
 
212
186
  // src/design/vars.ts
213
- var 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-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)" } };
187
+ var 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-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)" } };
214
188
  /*! For license information please see index.cjs.LEGAL.txt */
215
189
  //# sourceMappingURL=index.cjs.map
package/lib/index.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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, 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\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-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)\"}}"],
5
- "mappings": "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",
6
- "names": ["size", "React", "import_react", "React", "import_react", "import_react", "React"]
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/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 { 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-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)\"}}"],
5
+ "mappings": "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",
6
+ "names": ["size", "import_react", "React"]
7
7
  }
package/lib/index.mjs CHANGED
@@ -96,38 +96,15 @@ var weight = {
96
96
  };
97
97
  var font = { weight, lineHeight, size: size2 };
98
98
 
99
- // src/design/typography/usage/Heading.tsx
100
- import React from "react";
101
- var Heading1 = /* @__PURE__ */ __name((props) => {
102
- return /* @__PURE__ */ React.createElement("div", { ...props, className: `lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ""}` }, props.children);
103
- }, "Heading1");
104
- var Heading2 = /* @__PURE__ */ __name((props) => {
105
- return /* @__PURE__ */ React.createElement("div", { ...props, className: `lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ""}` }, props.children);
106
- }, "Heading2");
107
-
108
- // src/design/typography/usage/Display.tsx
109
- import React2 from "react";
110
- var Display1 = /* @__PURE__ */ __name((props) => {
111
- return /* @__PURE__ */ React2.createElement(
112
- "div",
113
- {
114
- ...props,
115
- className: `lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ""}`
116
- },
117
- props.children
118
- );
119
- }, "Display1");
120
-
121
99
  // src/hooks/useDarkTheme.ts
122
- import { useState } from "react";
100
+ import { useLayoutEffect, useState } from "react";
123
101
  var useDarkTheme = /* @__PURE__ */ __name(() => {
124
102
  const [isDarkMode, setIsDarkMode] = useState(false);
125
- const setDarkTheme = /* @__PURE__ */ __name(() => {
126
- document.documentElement.setAttribute("color-theme", "dark");
127
- setIsDarkMode(true);
128
- }, "setDarkTheme");
103
+ useLayoutEffect(() => {
104
+ setIsDarkMode(document.documentElement.getAttribute("color-theme") === "dark");
105
+ }, []);
129
106
  return {
130
- setDarkTheme,
107
+ // setDarkTheme,
131
108
  // toggleTheme,
132
109
  isDarkMode
133
110
  };
@@ -138,9 +115,9 @@ var useLanguage = /* @__PURE__ */ __name(() => {
138
115
  }, "useLanguage");
139
116
 
140
117
  // src/components/Head.tsx
141
- import React3 from "react";
118
+ import React from "react";
142
119
  var DesignSystemHead = /* @__PURE__ */ __name(() => {
143
- return /* @__PURE__ */ React3.createElement(Fragment, null, /* @__PURE__ */ React3.createElement(
120
+ return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
144
121
  "link",
145
122
  {
146
123
  rel: "stylesheet",
@@ -148,7 +125,7 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
148
125
  crossOrigin: "anonymous",
149
126
  href: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css"
150
127
  }
151
- ), /* @__PURE__ */ React3.createElement(
128
+ ), /* @__PURE__ */ React.createElement(
152
129
  "link",
153
130
  {
154
131
  rel: "stylesheet",
@@ -156,7 +133,7 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
156
133
  crossOrigin: "anonymous",
157
134
  href: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
158
135
  }
159
- ), /* @__PURE__ */ React3.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), /* @__PURE__ */ React3.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), /* @__PURE__ */ React3.createElement(
136
+ ), /* @__PURE__ */ React.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), /* @__PURE__ */ React.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), /* @__PURE__ */ React.createElement(
160
137
  "link",
161
138
  {
162
139
  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",
@@ -166,12 +143,9 @@ var DesignSystemHead = /* @__PURE__ */ __name(() => {
166
143
  }, "DesignSystemHead");
167
144
 
168
145
  // src/design/vars.ts
169
- var 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-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)" } };
146
+ var 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-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)" } };
170
147
  export {
171
148
  DesignSystemHead,
172
- Display1,
173
- Heading1,
174
- Heading2,
175
149
  font,
176
150
  opacity,
177
151
  radius,
package/lib/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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, 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\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-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)\"}}"],
5
- "mappings": "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",
6
- "names": ["size", "React", "React", "React", "React"]
3
+ "sources": ["../src/design/radius/index.ts", "../src/design/opacity/index.ts", "../src/design/size/index.ts", "../src/design/typography/primitive.ts", "../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 { 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-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)\"}}"],
5
+ "mappings": "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",
6
+ "names": ["size"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liner-fe/design-token",
3
- "version": "2.0.56",
3
+ "version": "2.0.58",
4
4
  "packageManager": "yarn@3.6.0",
5
5
  "devDependencies": {
6
6
  "@types/react": "^18.2.48",
package/src/design/color/index.ts CHANGED
@@ -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)","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-opaque-normal":"lp-pri-brand-original-500","brand-border-overlay-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-opaque-normal":"lp-pri-brand-original-500","brand-border-overlay-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-container-highest":"lp-pri-gray-cool-920","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-opaque-normal":"lp-pri-brand-original-500","brand-border-overlay-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-container-highest":"lp-pri-gray-cool-300","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-opaque-normal":"lp-pri-brand-original-500","brand-border-overlay-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"}}}}
package/src/design/typography/index.ts CHANGED
@@ -1,2 +1 @@
1
1
  export * from './primitive';
2
- export * from './usage';
package/src/design/vars.ts CHANGED
@@ -1 +1 @@
1
- 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-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)"}}
1
+ 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-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)"}}
package/src/hooks/useDarkTheme.ts CHANGED
@@ -7,10 +7,10 @@ export const useDarkTheme = () => {
7
7
 
8
8
  // const isUserColorTheme = localStorage.getItem('color-theme');
9
9
 
10
- const setDarkTheme = () => {
11
- document.documentElement.setAttribute('color-theme', 'dark');
12
- setIsDarkMode(true);
13
- };
10
+ // const setDarkTheme = () => {
11
+ // document.documentElement.setAttribute('color-theme', 'dark');
12
+ // setIsDarkMode(true);
13
+ // };
14
14
 
15
15
  // const setLightTheme = () => {
16
16
  // document.documentElement.setAttribute('color-theme', 'light');
@@ -23,23 +23,25 @@ export const useDarkTheme = () => {
23
23
  // localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);
24
24
  // };
25
25
 
26
- // useLayoutEffect(() => {
27
- // const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
28
- // if (prevTheme) {
29
- // if (prevTheme === 'dark') {
30
- // setDarkTheme();
31
- // } else {
32
- // setLightTheme();
33
- // }
34
- // } else {
35
- // const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
36
-
37
- // document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');
38
- // }
39
- // }, []);
26
+ useLayoutEffect(() => {
27
+ // const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
28
+ // if (prevTheme) {
29
+ // if (prevTheme === 'dark') {
30
+ // setDarkTheme();
31
+ // } else {
32
+ // setLightTheme();
33
+ // }
34
+ // } else {
35
+ // const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
36
+
37
+ // document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');
38
+ // }
39
+
40
+ setIsDarkMode(document.documentElement.getAttribute('color-theme') === 'dark');
41
+ }, []);
40
42
 
41
43
  return {
42
- setDarkTheme,
44
+ // setDarkTheme,
43
45
  // toggleTheme,
44
46
  isDarkMode,
45
47
  };
package/src/design/typography/usage/Caption.tsx DELETED
File without changes
package/src/design/typography/usage/Display.tsx DELETED
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { HTMLAttributes } from 'react';
3
-
4
- interface IProps extends HTMLAttributes<HTMLDivElement> {
5
- type: 'accent';
6
- weight: 'black';
7
- }
8
-
9
- export const Display1 = (props: IProps) => {
10
- return (
11
- <div
12
- {...props}
13
- className={`lp-sys-typo-display1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ''}`}
14
- >
15
- {props.children}
16
- </div>
17
- );
18
- };
package/src/design/typography/usage/Heading.tsx DELETED
@@ -1,19 +0,0 @@
1
- import React from 'react';
2
- import { HTMLAttributes } from 'react';
3
- import { IDisplayProps, IHeadingProps } from './types';
4
-
5
- export const Heading1 = (props: IHeadingProps) => {
6
- return (
7
- <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
8
- {props.children}
9
- </div>
10
- );
11
- };
12
-
13
- export const Heading2 = (props: IHeadingProps) => {
14
- return (
15
- <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
16
- {props.children}
17
- </div>
18
- );
19
- };
package/src/design/typography/usage/Paragraph.tsx DELETED
@@ -1,47 +0,0 @@
1
- import React from 'react';
2
- import { HTMLAttributes } from 'react';
3
- import { TypographySubType, TypographySubWeight } from './types';
4
-
5
- export type ParagraphType = IParagraphAnswer | IParagraphNormal;
6
-
7
- export interface IParagraphNormal extends HTMLAttributes<HTMLDivElement> {
8
- type: TypographySubType.normal;
9
- weight: TypographySubWeight.bold | TypographySubWeight.medium | TypographySubWeight.regular;
10
- }
11
-
12
- export interface IParagraphAnswer extends HTMLAttributes<HTMLDivElement> {
13
- type: TypographySubType.answer;
14
- weight: TypographySubWeight.bold | TypographySubWeight.regular;
15
- }
16
-
17
- export interface IParagraphAccent extends HTMLAttributes<HTMLDivElement> {
18
- type: TypographySubType.accent;
19
- weight: TypographySubWeight.bold | TypographySubWeight.medium | TypographySubWeight.regular;
20
- }
21
-
22
- export const Paragraph1 = (props: ParagraphType) => {
23
- return (
24
- <div
25
- {...props}
26
- className={`lp-sys-typo-paragraph1-${props.type}-${props.weight}${props.className ? ` ${props.className}` : ''}`}
27
- >
28
- {props.children}
29
- </div>
30
- );
31
- };
32
-
33
- export const Paragraph2 = (props: ParagraphType) => {
34
- return (
35
- <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
36
- {props.children}
37
- </div>
38
- );
39
- };
40
-
41
- export const Paragraph3 = (props: ParagraphType) => {
42
- return (
43
- <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
44
- {props.children}
45
- </div>
46
- );
47
- };
package/src/design/typography/usage/Title.tsx DELETED
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- import { HTMLAttributes } from 'react';
3
- import { TypographySubType, TypographySubWeight } from './types';
4
-
5
- export type TitleType = ITitleAccent | ITitleNormal;
6
-
7
- interface ITitleAccent extends HTMLAttributes<HTMLDivElement> {
8
- type: TypographySubType.accent;
9
- weight: TypographySubWeight.bold | TypographySubWeight.medium;
10
- }
11
-
12
- interface ITitleNormal extends HTMLAttributes<HTMLDivElement> {
13
- type: TypographySubType.normal;
14
- weight: TypographySubWeight.bold | TypographySubWeight.medium;
15
- }
16
-
17
- export const Title1 = (props: TitleType) => {
18
- return (
19
- <div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
20
- {props.children}
21
- </div>
22
- );
23
- };
package/src/design/typography/usage/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './Heading';
2
- export * from './Display';
package/src/design/typography/usage/types.ts DELETED
@@ -1,29 +0,0 @@
1
- import { HTMLAttributes } from 'react';
2
-
3
- export enum TypographySubType {
4
- answer = 'answer',
5
- accent = 'accent',
6
- normal = 'normal',
7
- }
8
-
9
- export enum TypographySubWeight {
10
- black = 'black',
11
- bold = 'bold',
12
- medium = 'medium',
13
- regular = 'regular',
14
- }
15
-
16
- export interface IDisplayProps extends HTMLAttributes<HTMLDivElement> {
17
- type: TypographySubType.accent | TypographySubType.normal;
18
- weight: TypographySubWeight.black;
19
- }
20
-
21
- export interface IHeadingProps extends HTMLAttributes<HTMLDivElement> {
22
- type: TypographySubType.answer;
23
- weight: TypographySubWeight.bold;
24
- }
25
-
26
- export interface ICaptionProps extends HTMLAttributes<HTMLDivElement> {
27
- type: TypographySubType.normal;
28
- weight: TypographySubWeight.regular | TypographySubWeight.bold;
29
- }