From f30a1e8a4b15c0818e1e691d64c88a3fd78a8eab Mon Sep 17 00:00:00 2001 From: ccconac Date: Sat, 16 May 2026 15:10:58 +0900 Subject: [PATCH 01/16] =?UTF-8?q?feat(jds):=20=ED=85=8D=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=86=A0=ED=81=B0=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=B0=A9=EC=8B=9D=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/tokens/Tokens.mdx | 51 +- packages/jds/src/tokens/globalStyles.ts | 20 +- packages/jds/src/tokens/input/textStyle.json | 1460 ----------------- packages/jds/src/tokens/input/textStyles.json | 292 ++++ packages/jds/src/tokens/textStyles.css.ts | 20 +- packages/jds/src/tokens/theme.ts | 20 +- packages/jds/src/tokens/tokens.ts | 20 +- packages/jds/src/tokens/tokensBuilder.ts | 200 ++- 8 files changed, 611 insertions(+), 1472 deletions(-) delete mode 100644 packages/jds/src/tokens/input/textStyle.json create mode 100644 packages/jds/src/tokens/input/textStyles.json diff --git a/packages/jds/src/tokens/Tokens.mdx b/packages/jds/src/tokens/Tokens.mdx index b7d35caf7..ae52ba130 100644 --- a/packages/jds/src/tokens/Tokens.mdx +++ b/packages/jds/src/tokens/Tokens.mdx @@ -168,11 +168,11 @@ theme.typo.primitive.lineHeight.body.md; ### theme.textStyle -모든 타이포그래피 속성이 통합된 토큰입니다.반응형 자동 대응됩니다. +모든 타이포그래피 속성이 통합된 토큰입니다. 반응형 자동 대응됩니다. ```typescript theme.textStyle["semantic-textStyle-body-md-normal"]; -theme.textStyle["semantic-textStyle-hero-4"]; +theme.textStyle["semantic-textStyle-title-4"]; ``` ### theme.environment @@ -276,13 +276,52 @@ theme.typo.primitive.fontWeight.body.bold; **textStyle** → `theme.textStyle['...']` -- textStyle이 적용된 Figma는 Typograhpy라는 속성명이 표시되고, `name` 이 존재합니다. 이 name을 적용하면 됩니다. +textStyle은 Figma variables가 아니라 별도 입력 파일인 `input/textStyles.json`을 통해 생성됩니다. + +`textStyles.json`에는 Figma export에서 필요한 text style 항목만 남기고, 각 항목은 `token`을 기준으로 관리합니다. + +```json +{ + "token": "semantic-textstyle-body-md-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "15px", + "lineHeight": "24px", + "letterSpacing": "0.04500000178813934px" +} +``` + +빌더는 `token`을 파싱해 category, size, weight를 계산하고, 생성 결과의 public key는 기존 코드와 호환되도록 `textstyle`을 `textStyle`로 정규화합니다. + +```text +input token: semantic-textstyle-body-md-normal +generated key: semantic-textStyle-body-md-normal +``` + +코드에서는 반드시 생성된 key인 `semantic-textStyle-*`를 사용합니다. ```typescript -// Figma: semantic-textStyle-body-md-normal +// input/textStyles.json: semantic-textstyle-body-md-normal theme.textStyle["semantic-textStyle-body-md-normal"]; +``` + +빌더는 가능한 경우 typography primitive 토큰을 CSS 변수로 연결합니다. -// ⚠️ textStyle의 경우 +```typescript +// generated textStyles.css.ts 예시 +fontSize: "var(--typo-primitive-fontSize-body-md)"; +lineHeight: "var(--typo-primitive-font-lineHeight-body-md)"; +fontFamily: "var(--typo-primitive-typeface-body)"; +fontWeight: "var(--typo-primitive-fontWeight-body-normal)"; +letterSpacing: "var(--typo-primitive-font-letterSpacing-body-md)"; +``` + +primitive 토큰이 없는 값은 `textStyles.json`의 값을 그대로 사용합니다. 예를 들어 syntax 계열의 `letterSpacing: "0%"`는 별도 primitive letterSpacing 토큰이 없으므로 literal 값으로 생성됩니다. + +```typescript +// generated textStyles.css.ts 예시 +letterSpacing: "0%"; ``` ## ⚠️ 중요한 주의사항 @@ -290,6 +329,8 @@ theme.textStyle["semantic-textStyle-body-md-normal"]; - **자동 생성**: 토큰 파일들은 Figma에서 자동 생성되므로 직접 수정하지 마세요 - **textStyle 권장**: 일관된 타이포그래피를 위해 textStyle 토큰을 사용하세요 - **CSS 변수**: 모든 토큰은 CSS 변수로 구현되어 반응형과 테마가 자동 처리됩니다 +- **textStyle 입력 관리**: `input/textStyles.json`은 `token`, `type`, `fontFamily`, `fontWeight`, `fontSize`, `lineHeight`, `letterSpacing`만 유지합니다 +- **textStyle 네이밍**: 입력 파일의 `token`은 `semantic-textstyle-*`, 코드에서 사용하는 key/className은 `semantic-textStyle-*`입니다 ## 📖 예시 diff --git a/packages/jds/src/tokens/globalStyles.ts b/packages/jds/src/tokens/globalStyles.ts index 03d45276f..8054a3d95 100644 --- a/packages/jds/src/tokens/globalStyles.ts +++ b/packages/jds/src/tokens/globalStyles.ts @@ -1,5 +1,5 @@ // 자동 생성된 globalStyles - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM export const globalStyles = { ":root": { @@ -1154,6 +1154,24 @@ export const globalStyles = { "--primitive-font-letter-spacing-title-5": "-0.9200000166893005px", "--primitive-font-letter-spacing-title-6": "-1.25px" }, + "semantic-textStyle-title-6": { + "fontSize": "var(--typo-primitive-fontSize-title-6)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-6)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-6)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + }, + "semantic-textStyle-title-5": { + "fontSize": "var(--typo-primitive-fontSize-title-5)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-5)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-5)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + }, "semantic-textStyle-title-4": { "fontSize": "var(--typo-primitive-fontSize-title-4)", "lineHeight": "var(--typo-primitive-font-lineHeight-title-4)", diff --git a/packages/jds/src/tokens/input/textStyle.json b/packages/jds/src/tokens/input/textStyle.json deleted file mode 100644 index f9adb847e..000000000 --- a/packages/jds/src/tokens/input/textStyle.json +++ /dev/null @@ -1,1460 +0,0 @@ -[ - { - "name": "semantic/textStyle/title/4", - "id": "S:bfe1a94f99852517afe437f9333c652184b7fe2f,", - "properties": { - "fontSize": { - "value": "32px", - "token": { - "name": "primitive/font/size/title/4", - "value": "32px" - } - }, - "lineHeight": { - "value": "41.599998474121094px", - "token": { - "name": "primitive/font/lineHeight/title/4", - "value": "41.599998474121094px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/title", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "SemiBold", - "token": { - "name": "primitive/font/weight/title/bold", - "value": 620 - } - }, - "letterSpacing": { - "value": "-0.64px", - "token": { - "name": "primitive/font/letterSpacing/title/4", - "value": "-0.64px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/title/3", - "id": "S:8e85b7dfbd7fe686fa254e4674ba91df77cc5020,", - "properties": { - "fontSize": { - "value": "28px", - "token": { - "name": "primitive/font/size/title/3", - "value": "28px" - } - }, - "lineHeight": { - "value": "36.400001525878906px", - "token": { - "name": "primitive/font/lineHeight/title/3", - "value": "36.400001525878906px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/title", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "SemiBold", - "token": { - "name": "primitive/font/weight/title/bold", - "value": 620 - } - }, - "letterSpacing": { - "value": "-0.48px", - "token": { - "name": "primitive/font/letterSpacing/title/3", - "value": "-0.48px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/title/2", - "id": "S:4cd4e6e41cf104e2aa1e0d19ec0e08834abfe70e,", - "properties": { - "fontSize": { - "value": "24px", - "token": { - "name": "primitive/font/size/title/2", - "value": "24px" - } - }, - "lineHeight": { - "value": "31.200000762939453px", - "token": { - "name": "primitive/font/lineHeight/title/2", - "value": "31.200000762939453px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/title", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "SemiBold", - "token": { - "name": "primitive/font/weight/title/normal", - "value": 570 - } - }, - "letterSpacing": { - "value": "-0.34px", - "token": { - "name": "primitive/font/letterSpacing/title/2", - "value": "-0.34px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/title/1", - "id": "S:2b7cdf313a09024e26181f7a605d8b0043249412,", - "properties": { - "fontSize": { - "value": "20px", - "token": { - "name": "primitive/font/size/title/1", - "value": "20px" - } - }, - "lineHeight": { - "value": "26px", - "token": { - "name": "primitive/font/lineHeight/title/1", - "value": "26px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/title", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "SemiBold", - "token": { - "name": "primitive/font/weight/title/normal", - "value": 570 - } - }, - "letterSpacing": { - "value": "-0.22px", - "token": { - "name": "primitive/font/letterSpacing/title/1", - "value": "-0.22px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/lg/bold", - "id": "S:0b8066904921c8f48f4dfdc80f8cca7610acce76,", - "properties": { - "fontSize": { - "value": "16px", - "token": { - "name": "primitive/font/size/label/lg", - "value": "16px" - } - }, - "lineHeight": { - "value": "24px", - "token": { - "name": "primitive/font/lineHeight/label/lg", - "value": "24px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/bold", - "value": 500 - } - }, - "letterSpacing": { - "value": "-0.16px", - "token": { - "name": "primitive/font/letterSpacing/label/lg", - "value": "-0.16px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/lg/normal", - "id": "S:a2a4b69f613a5a9c16779c14ac4f6a2b197f2764,", - "properties": { - "fontSize": { - "value": "16px", - "token": { - "name": "primitive/font/size/label/lg", - "value": "16px" - } - }, - "lineHeight": { - "value": "24px", - "token": { - "name": "primitive/font/lineHeight/label/lg", - "value": "24px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/normal", - "value": 450 - } - }, - "letterSpacing": { - "value": "-0.16px", - "token": { - "name": "primitive/font/letterSpacing/label/lg", - "value": "-0.16px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/lg/subtle", - "id": "S:a7cc2a5e51d41a8feef5a814625153ac7eb26199,", - "properties": { - "fontSize": { - "value": "16px", - "token": { - "name": "primitive/font/size/label/lg", - "value": "16px" - } - }, - "lineHeight": { - "value": "24px", - "token": { - "name": "primitive/font/lineHeight/label/lg", - "value": "24px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/label/subtle", - "value": 400 - } - }, - "letterSpacing": { - "value": "-0.16px", - "token": { - "name": "primitive/font/letterSpacing/label/lg", - "value": "-0.16px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/md/bold", - "id": "S:9924eb27b57cc85944f0c23348e01c9093c254df,", - "properties": { - "fontSize": { - "value": "15px", - "token": { - "name": "primitive/font/size/label/md", - "value": "15px" - } - }, - "lineHeight": { - "value": "22.5px", - "token": { - "name": "primitive/font/lineHeight/label/md", - "value": "22.5px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/bold", - "value": 500 - } - }, - "letterSpacing": { - "value": "-0.12px", - "token": { - "name": "primitive/font/letterSpacing/label/md", - "value": "-0.12px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/md/normal", - "id": "S:62770838a4d484b95971f97e6c70a802619c04ff,", - "properties": { - "fontSize": { - "value": "15px", - "token": { - "name": "primitive/font/size/label/md", - "value": "15px" - } - }, - "lineHeight": { - "value": "22.5px", - "token": { - "name": "primitive/font/lineHeight/label/md", - "value": "22.5px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/normal", - "value": 450 - } - }, - "letterSpacing": { - "value": "-0.12px", - "token": { - "name": "primitive/font/letterSpacing/label/md", - "value": "-0.12px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/md/subtle", - "id": "S:c4ec6ccca1f71cba0fc111bdf1fb613d52d0784a,", - "properties": { - "fontSize": { - "value": "15px", - "token": { - "name": "primitive/font/size/label/md", - "value": "15px" - } - }, - "lineHeight": { - "value": "22.5px", - "token": { - "name": "primitive/font/lineHeight/label/md", - "value": "22.5px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/label/subtle", - "value": 400 - } - }, - "letterSpacing": { - "value": "-0.12px", - "token": { - "name": "primitive/font/letterSpacing/label/md", - "value": "-0.12px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/sm/bold", - "id": "S:57a9c71efabdbe39164c02bd952740926e4c247c,", - "properties": { - "fontSize": { - "value": "13px", - "token": { - "name": "primitive/font/size/label/sm", - "value": "13px" - } - }, - "lineHeight": { - "value": "19.5px", - "token": { - "name": "primitive/font/lineHeight/label/sm", - "value": "19.5px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/bold", - "value": 500 - } - }, - "letterSpacing": { - "value": "-0.08px", - "token": { - "name": "primitive/font/letterSpacing/label/sm", - "value": "-0.08px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/sm/normal", - "id": "S:4b19b0d4acb9adf0a1e5818b2ea8802b76aa742f,", - "properties": { - "fontSize": { - "value": "13px", - "token": { - "name": "primitive/font/size/label/sm", - "value": "13px" - } - }, - "lineHeight": { - "value": "19.5px", - "token": { - "name": "primitive/font/lineHeight/label/sm", - "value": "19.5px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/normal", - "value": 450 - } - }, - "letterSpacing": { - "value": "-0.08px", - "token": { - "name": "primitive/font/letterSpacing/label/sm", - "value": "-0.08px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/sm/subtle", - "id": "S:1480c45945eda90d66439804057e2f1f461f2c11,", - "properties": { - "fontSize": { - "value": "13px", - "token": { - "name": "primitive/font/size/label/sm", - "value": "13px" - } - }, - "lineHeight": { - "value": "19.5px", - "token": { - "name": "primitive/font/lineHeight/label/sm", - "value": "19.5px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/label/subtle", - "value": 400 - } - }, - "letterSpacing": { - "value": "-0.08px", - "token": { - "name": "primitive/font/letterSpacing/label/sm", - "value": "-0.08px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/xs/bold", - "id": "S:a792a137071156baa50ea1f1c23d7e168f118f5c,", - "properties": { - "fontSize": { - "value": "12px", - "token": { - "name": "primitive/font/size/label/xs", - "value": "12px" - } - }, - "lineHeight": { - "value": "18px", - "token": { - "name": "primitive/font/lineHeight/label/xs", - "value": "18px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/bold", - "value": 500 - } - }, - "letterSpacing": { - "value": "-0.05px", - "token": { - "name": "primitive/font/letterSpacing/label/xs", - "value": "-0.05px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/xs/normal", - "id": "S:e9acc15c33685dfb25ef7f34cd919ed362591209,", - "properties": { - "fontSize": { - "value": "12px", - "token": { - "name": "primitive/font/size/label/xs", - "value": "12px" - } - }, - "lineHeight": { - "value": "18px", - "token": { - "name": "primitive/font/lineHeight/label/xs", - "value": "18px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Medium", - "token": { - "name": "primitive/font/weight/label/normal", - "value": 450 - } - }, - "letterSpacing": { - "value": "-0.05px", - "token": { - "name": "primitive/font/letterSpacing/label/xs", - "value": "-0.05px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/label/xs/subtle", - "id": "S:e511779702035288fb35f9b79d05c54e4de85a7d,", - "properties": { - "fontSize": { - "value": "12px", - "token": { - "name": "primitive/font/size/label/xs", - "value": "12px" - } - }, - "lineHeight": { - "value": "18px", - "token": { - "name": "primitive/font/lineHeight/label/xs", - "value": "18px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/label", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/label/subtle", - "value": 400 - } - }, - "letterSpacing": { - "value": "-0.05px", - "token": { - "name": "primitive/font/letterSpacing/label/xs", - "value": "-0.05px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/lg/bold", - "id": "S:1b20e82a627046b619b0d5387a1fd16573689608,", - "properties": { - "fontSize": { - "value": "17px", - "token": { - "name": "primitive/font/size/body/lg", - "value": "17px" - } - }, - "lineHeight": { - "value": "27.200000762939453px", - "token": { - "name": "primitive/font/lineHeight/body/lg", - "value": "27.200000762939453px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/bold", - "value": 430 - } - }, - "letterSpacing": { - "value": "0.02px", - "token": { - "name": "primitive/font/letterSpacing/body/lg", - "value": "0.02px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/lg/normal", - "id": "S:354c92389ba9a66d1bb1369d31f101d67c21e1ef,", - "properties": { - "fontSize": { - "value": "17px", - "token": { - "name": "primitive/font/size/body/lg", - "value": "17px" - } - }, - "lineHeight": { - "value": "27.200000762939453px", - "token": { - "name": "primitive/font/lineHeight/body/lg", - "value": "27.200000762939453px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0.02px", - "token": { - "name": "primitive/font/letterSpacing/body/lg", - "value": "0.02px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/md/bold", - "id": "S:537bc33e59f9365c9a4631ce22ef9f798d69e2e1,", - "properties": { - "fontSize": { - "value": "16px", - "token": { - "name": "primitive/font/size/body/md", - "value": "16px" - } - }, - "lineHeight": { - "value": "25.600000381469727px", - "token": { - "name": "primitive/font/lineHeight/body/md", - "value": "25.600000381469727px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/bold", - "value": 430 - } - }, - "letterSpacing": { - "value": "0.05px", - "token": { - "name": "primitive/font/letterSpacing/body/md", - "value": "0.05px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/md/normal", - "id": "S:f5c9012ddc32e90b42dc67a3e145d9a02fdfe507,", - "properties": { - "fontSize": { - "value": "16px", - "token": { - "name": "primitive/font/size/body/md", - "value": "16px" - } - }, - "lineHeight": { - "value": "25.600000381469727px", - "token": { - "name": "primitive/font/lineHeight/body/md", - "value": "25.600000381469727px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0.05px", - "token": { - "name": "primitive/font/letterSpacing/body/md", - "value": "0.05px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/sm/bold", - "id": "S:c76552b8f9d74550a130caaf2a265cd32e69f893,", - "properties": { - "fontSize": { - "value": "15px", - "token": { - "name": "primitive/font/size/body/sm", - "value": "15px" - } - }, - "lineHeight": { - "value": "24px", - "token": { - "name": "primitive/font/lineHeight/body/sm", - "value": "24px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/bold", - "value": 430 - } - }, - "letterSpacing": { - "value": "0.06px", - "token": { - "name": "primitive/font/letterSpacing/body/sm", - "value": "0.06px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/sm/normal", - "id": "S:e8fc7f40765b4771c21fc8a7b88489adb6eab2c3,", - "properties": { - "fontSize": { - "value": "15px", - "token": { - "name": "primitive/font/size/body/sm", - "value": "15px" - } - }, - "lineHeight": { - "value": "24px", - "token": { - "name": "primitive/font/lineHeight/body/sm", - "value": "24px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0.06px", - "token": { - "name": "primitive/font/letterSpacing/body/sm", - "value": "0.06px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/xs/bold", - "id": "S:5adfbdd1e5bf015e19ad15eec00fb6bd7aa88e20,", - "properties": { - "fontSize": { - "value": "14px", - "token": { - "name": "primitive/font/size/body/xs", - "value": "14px" - } - }, - "lineHeight": { - "value": "22.399999618530273px", - "token": { - "name": "primitive/font/lineHeight/body/xs", - "value": "22.399999618530273px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/bold", - "value": 430 - } - }, - "letterSpacing": { - "value": "0.07px", - "token": { - "name": "primitive/font/letterSpacing/body/xs", - "value": "0.07px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/xs/normal", - "id": "S:24e391de3d63c26e7533f06d23196ab7b30bcc79,", - "properties": { - "fontSize": { - "value": "14px", - "token": { - "name": "primitive/font/size/body/xs", - "value": "14px" - } - }, - "lineHeight": { - "value": "22.399999618530273px", - "token": { - "name": "primitive/font/lineHeight/body/xs", - "value": "22.399999618530273px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0.07px", - "token": { - "name": "primitive/font/letterSpacing/body/xs", - "value": "0.07px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/2xs/bold", - "id": "S:eb8e9a19dad33e28fa2faf4c68e08d47daf00606,", - "properties": { - "fontSize": { - "value": "13px", - "token": { - "name": "primitive/font/size/body/2xs", - "value": "13px" - } - }, - "lineHeight": { - "value": "20.799999237060547px", - "token": { - "name": "primitive/font/lineHeight/body/2xs", - "value": "20.799999237060547px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/bold", - "value": 430 - } - }, - "letterSpacing": { - "value": "0.08px", - "token": { - "name": "primitive/font/letterSpacing/body/2xs", - "value": "0.08px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/body/2xs/normal", - "id": "S:f34e63f6eace00c91c88ae38bb0fb9e34bc7f19e,", - "properties": { - "fontSize": { - "value": "13px", - "token": { - "name": "primitive/font/size/body/2xs", - "value": "13px" - } - }, - "lineHeight": { - "value": "20.799999237060547px", - "token": { - "name": "primitive/font/lineHeight/body/2xs", - "value": "20.799999237060547px" - } - }, - "fontFamily": { - "value": "Pretendard Variable", - "token": { - "name": "primitive/typeface/body", - "value": "Pretendard Variable" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/body/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0.08px", - "token": { - "name": "primitive/font/letterSpacing/body/2xs", - "value": "0.08px" - } - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/syntax/lg", - "id": "S:e96dcc42e3a8f8461ecf913dea8b836fbdfcf41c,", - "properties": { - "fontSize": { - "value": "16px", - "token": { - "name": "primitive/font/size/syntax/lg", - "value": "16px" - } - }, - "lineHeight": { - "value": "27.200000762939453px", - "token": { - "name": "primitive/font/lineHeight/syntax/lg", - "value": "27.200000762939453px" - } - }, - "fontFamily": { - "value": "D2Coding", - "token": { - "name": "primitive/typeface/syntax", - "value": "D2Coding" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/syntax/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0%", - "token": null - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/syntax/md", - "id": "S:75bd41bfb061824012c76fde30badee1e5546d99,", - "properties": { - "fontSize": { - "value": "15px", - "token": { - "name": "primitive/font/size/syntax/md", - "value": "15px" - } - }, - "lineHeight": { - "value": "25.5px", - "token": { - "name": "primitive/font/lineHeight/syntax/md", - "value": "25.5px" - } - }, - "fontFamily": { - "value": "D2Coding", - "token": { - "name": "primitive/typeface/syntax", - "value": "D2Coding" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/syntax/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0%", - "token": null - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/syntax/sm", - "id": "S:ac950268c9b9515118671dbea114f4d07f7139bd,", - "properties": { - "fontSize": { - "value": "13px", - "token": { - "name": "primitive/font/size/syntax/sm", - "value": "13px" - } - }, - "lineHeight": { - "value": "22.100000381469727px", - "token": { - "name": "primitive/font/lineHeight/syntax/sm", - "value": "22.100000381469727px" - } - }, - "fontFamily": { - "value": "D2Coding", - "token": { - "name": "primitive/typeface/syntax", - "value": "D2Coding" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/syntax/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0%", - "token": null - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - }, - { - "name": "semantic/textStyle/syntax/xs", - "id": "S:5cb0d39c9d586e15446716de358cad74e35844d3,", - "properties": { - "fontSize": { - "value": "12px", - "token": { - "name": "primitive/font/size/syntax/xs", - "value": "12px" - } - }, - "lineHeight": { - "value": "20.399999618530273px", - "token": { - "name": "primitive/font/lineHeight/syntax/xs", - "value": "20.399999618530273px" - } - }, - "fontFamily": { - "value": "D2Coding", - "token": { - "name": "primitive/typeface/syntax", - "value": "D2Coding" - } - }, - "fontWeight": { - "value": "Regular", - "token": { - "name": "primitive/font/weight/syntax/normal", - "value": 400 - } - }, - "letterSpacing": { - "value": "0%", - "token": null - }, - "paragraphSpacing": { - "value": 0, - "token": null - }, - "paragraphIndent": { - "value": 0, - "token": null - } - } - } -] \ No newline at end of file diff --git a/packages/jds/src/tokens/input/textStyles.json b/packages/jds/src/tokens/input/textStyles.json new file mode 100644 index 000000000..ef1e730c2 --- /dev/null +++ b/packages/jds/src/tokens/input/textStyles.json @@ -0,0 +1,292 @@ +{ + "textStyles": [ + { + "token": "semantic-textstyle-title-6", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "600", + "fontSize": "48px", + "lineHeight": "62px", + "letterSpacing": "-1.25px" + }, + { + "token": "semantic-textstyle-title-5", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "600", + "fontSize": "40px", + "lineHeight": "52px", + "letterSpacing": "-0.9200000166893005px" + }, + { + "token": "semantic-textstyle-title-4", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "700", + "fontSize": "32px", + "lineHeight": "42px", + "letterSpacing": "-0.6399999856948853px" + }, + { + "token": "semantic-textstyle-title-3", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "700", + "fontSize": "28px", + "lineHeight": "36px", + "letterSpacing": "-0.47999998927116394px" + }, + { + "token": "semantic-textstyle-title-2", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "600", + "fontSize": "24px", + "lineHeight": "32px", + "letterSpacing": "-0.3400000035762787px" + }, + { + "token": "semantic-textstyle-title-1", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "600", + "fontSize": "20px", + "lineHeight": "26px", + "letterSpacing": "-0.2199999988079071px" + }, + { + "token": "semantic-textstyle-label-lg-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "16px", + "lineHeight": "22px", + "letterSpacing": "-0.1599999964237213px" + }, + { + "token": "semantic-textstyle-label-lg-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "16px", + "lineHeight": "22px", + "letterSpacing": "-0.1599999964237213px" + }, + { + "token": "semantic-textstyle-label-lg-subtle", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "16px", + "lineHeight": "22px", + "letterSpacing": "-0.1599999964237213px" + }, + { + "token": "semantic-textstyle-label-md-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "14px", + "lineHeight": "20px", + "letterSpacing": "-0.10999999940395355px" + }, + { + "token": "semantic-textstyle-label-md-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "14px", + "lineHeight": "20px", + "letterSpacing": "-0.10999999940395355px" + }, + { + "token": "semantic-textstyle-label-md-subtle", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "14px", + "lineHeight": "20px", + "letterSpacing": "-0.10999999940395355px" + }, + { + "token": "semantic-textstyle-label-sm-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "12px", + "lineHeight": "18px", + "letterSpacing": "-0.07999999821186066px" + }, + { + "token": "semantic-textstyle-label-sm-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "12px", + "lineHeight": "18px", + "letterSpacing": "-0.07999999821186066px" + }, + { + "token": "semantic-textstyle-label-sm-subtle", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "12px", + "lineHeight": "18px", + "letterSpacing": "-0.07999999821186066px" + }, + { + "token": "semantic-textstyle-label-xs-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "11px", + "lineHeight": "16px", + "letterSpacing": "-0.05000000074505806px" + }, + { + "token": "semantic-textstyle-label-xs-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "500", + "fontSize": "11px", + "lineHeight": "16px", + "letterSpacing": "-0.05000000074505806px" + }, + { + "token": "semantic-textstyle-label-xs-subtle", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "11px", + "lineHeight": "16px", + "letterSpacing": "-0.05000000074505806px" + }, + { + "token": "semantic-textstyle-body-lg-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "16px", + "lineHeight": "26px", + "letterSpacing": "0.017000000923871994px" + }, + { + "token": "semantic-textstyle-body-lg-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "16px", + "lineHeight": "26px", + "letterSpacing": "0.017000000923871994px" + }, + { + "token": "semantic-textstyle-body-md-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "15px", + "lineHeight": "24px", + "letterSpacing": "0.04500000178813934px" + }, + { + "token": "semantic-textstyle-body-md-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "15px", + "lineHeight": "24px", + "letterSpacing": "0.04500000178813934px" + }, + { + "token": "semantic-textstyle-body-sm-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "14px", + "lineHeight": "22px", + "letterSpacing": "0.0560000017285347px" + }, + { + "token": "semantic-textstyle-body-sm-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "14px", + "lineHeight": "22px", + "letterSpacing": "0.0560000017285347px" + }, + { + "token": "semantic-textstyle-body-xs-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "13px", + "lineHeight": "21px", + "letterSpacing": "0.07000000029802322px" + }, + { + "token": "semantic-textstyle-body-xs-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "13px", + "lineHeight": "21px", + "letterSpacing": "0.07000000029802322px" + }, + { + "token": "semantic-textstyle-body-2xs-bold", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "12px", + "lineHeight": "19px", + "letterSpacing": "0.07999999821186066px" + }, + { + "token": "semantic-textstyle-body-2xs-normal", + "type": "text", + "fontFamily": "Pretendard Variable", + "fontWeight": "400", + "fontSize": "12px", + "lineHeight": "19px", + "letterSpacing": "0.07999999821186066px" + }, + { + "token": "semantic-textstyle-syntax-lg", + "type": "text", + "fontFamily": "D2Coding", + "fontWeight": "400", + "fontSize": "16px", + "lineHeight": "22px", + "letterSpacing": "0%" + }, + { + "token": "semantic-textstyle-syntax-md", + "type": "text", + "fontFamily": "D2Coding", + "fontWeight": "400", + "fontSize": "14px", + "lineHeight": "20px", + "letterSpacing": "0%" + }, + { + "token": "semantic-textstyle-syntax-sm", + "type": "text", + "fontFamily": "D2Coding", + "fontWeight": "400", + "fontSize": "13px", + "lineHeight": "18px", + "letterSpacing": "0%" + }, + { + "token": "semantic-textstyle-syntax-xs", + "type": "text", + "fontFamily": "D2Coding", + "fontWeight": "400", + "fontSize": "12px", + "lineHeight": "16px", + "letterSpacing": "0%" + } + ] +} diff --git a/packages/jds/src/tokens/textStyles.css.ts b/packages/jds/src/tokens/textStyles.css.ts index 2b0b69ded..f4b1cccb3 100644 --- a/packages/jds/src/tokens/textStyles.css.ts +++ b/packages/jds/src/tokens/textStyles.css.ts @@ -1,8 +1,10 @@ // 자동 생성된 VE textStyles - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM import { globalStyle } from "@vanilla-extract/css"; export const textStyleClassNames = [ + "semantic-textStyle-title-6", + "semantic-textStyle-title-5", "semantic-textStyle-title-4", "semantic-textStyle-title-3", "semantic-textStyle-title-2", @@ -35,6 +37,22 @@ export const textStyleClassNames = [ "semantic-textStyle-syntax-xs" ] as const; +globalStyle(".semantic-textStyle-title-6", { + "fontSize": "var(--typo-primitive-fontSize-title-6)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-6)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-6)" +}); + +globalStyle(".semantic-textStyle-title-5", { + "fontSize": "var(--typo-primitive-fontSize-title-5)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-5)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-5)" +}); + globalStyle(".semantic-textStyle-title-4", { "fontSize": "var(--typo-primitive-fontSize-title-4)", "lineHeight": "var(--typo-primitive-font-lineHeight-title-4)", diff --git a/packages/jds/src/tokens/theme.ts b/packages/jds/src/tokens/theme.ts index 9d3249c41..701e69d55 100644 --- a/packages/jds/src/tokens/theme.ts +++ b/packages/jds/src/tokens/theme.ts @@ -1,5 +1,5 @@ // 자동 생성된 theme - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM export const theme = { "colorPrimitive": { @@ -1433,6 +1433,24 @@ export const theme = { } }, "textStyle": { + "semantic-textStyle-title-6": { + "fontSize": "var(--typo-primitive-fontSize-title-6)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-6)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-6)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + }, + "semantic-textStyle-title-5": { + "fontSize": "var(--typo-primitive-fontSize-title-5)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-5)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-5)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + }, "semantic-textStyle-title-4": { "fontSize": "var(--typo-primitive-fontSize-title-4)", "lineHeight": "var(--typo-primitive-font-lineHeight-title-4)", diff --git a/packages/jds/src/tokens/tokens.ts b/packages/jds/src/tokens/tokens.ts index e5d2e8076..40242fd53 100644 --- a/packages/jds/src/tokens/tokens.ts +++ b/packages/jds/src/tokens/tokens.ts @@ -1,5 +1,5 @@ // 자동 생성된 디자인 토큰 - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM export const designTokens = { "colorPrimitive": { @@ -2475,6 +2475,24 @@ export const designTokens = { } }, "textStyle": { + "semantic-textStyle-title-6": { + "fontSize": "var(--typo-primitive-fontSize-title-6)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-6)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-6)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + }, + "semantic-textStyle-title-5": { + "fontSize": "var(--typo-primitive-fontSize-title-5)", + "lineHeight": "var(--typo-primitive-font-lineHeight-title-5)", + "fontFamily": "var(--typo-primitive-typeface-title)", + "fontWeight": "var(--typo-primitive-fontWeight-title-normal)", + "letterSpacing": "var(--typo-primitive-font-letterSpacing-title-5)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + }, "semantic-textStyle-title-4": { "fontSize": "var(--typo-primitive-fontSize-title-4)", "lineHeight": "var(--typo-primitive-font-lineHeight-title-4)", diff --git a/packages/jds/src/tokens/tokensBuilder.ts b/packages/jds/src/tokens/tokensBuilder.ts index 8b43eb803..668b490da 100644 --- a/packages/jds/src/tokens/tokensBuilder.ts +++ b/packages/jds/src/tokens/tokensBuilder.ts @@ -11,6 +11,49 @@ const __dirname = dirname(__filename); type ContractShape = { [key: string]: null | ContractShape }; type DeviceResponsiveCssVariables = Record>; +type TextStyleProperty = { + value: string | number; + token: { + name: string; + value: string | number; + } | null; +}; + +type CanonicalTextStyle = { + name: string; + id?: string; + properties: { + fontSize: TextStyleProperty; + lineHeight: TextStyleProperty; + fontFamily: TextStyleProperty; + fontWeight: TextStyleProperty; + letterSpacing: TextStyleProperty; + paragraphSpacing: TextStyleProperty; + paragraphIndent: TextStyleProperty; + }; +}; + +type ExtractedTextStyle = { + token: string; + fontFamily: string; + fontWeight: string; + fontSize: string | number; + lineHeight?: string | number; + letterSpacing?: + | string + | number + | { + unit: string; + value: number; + }; +}; + +type ParsedTextStyleToken = { + name: string; + category: string; + size: string; + weight?: string; +}; function toContractShape(nestedObject: NestedObject): ContractShape { const result: ContractShape = {}; @@ -33,6 +76,152 @@ function extractDeviceFlatMap( ); } +function hasTypographyToken( + tokens: Record, + tokenName: string, +): boolean { + const normalizedTokenName = tokenName + .replaceAll("/", "-") + .replaceAll("lineHeight", "line-height") + .replaceAll("letterSpacing", "letter-spacing"); + + return normalizedTokenName in tokens; +} + +function getTextStyleProperty( + tokens: Record, + tokenName: string, + fallbackValue: string | number, +): TextStyleProperty { + if (!hasTypographyToken(tokens, tokenName)) { + return { + value: fallbackValue, + token: null, + }; + } + + return { + value: fallbackValue, + token: { + name: tokenName, + value: fallbackValue, + }, + }; +} + +function getTextStyleWeightTokenPath( + category: string, + semanticWeight: string | undefined, + fontWeight: string, +): string { + if (category === "title") { + return fontWeight === "Bold" || fontWeight === "700" + ? "primitive/font/weight/title/bold" + : "primitive/font/weight/title/normal"; + } + + if (category === "label") { + return `primitive/font/weight/label/${semanticWeight}`; + } + + if (category === "body") { + return `primitive/font/weight/body/${semanticWeight}`; + } + + return "primitive/font/weight/syntax/normal"; +} + +function parseTextStyleToken(token: string): ParsedTextStyleToken { + const [, textStyleSegment, category, size, weight] = token.split("-"); + + if (textStyleSegment !== "textstyle" || !category || !size) { + throw new Error(`Invalid text style token: ${token}`); + } + + return { + name: token.replace("textstyle", "textStyle"), + category, + size, + weight, + }; +} + +function toCssLength(value: string | number, unit = "px"): string { + return typeof value === "number" ? `${value}${unit}` : value; +} + +function toLetterSpacingValue(letterSpacing: ExtractedTextStyle["letterSpacing"]): string { + if (letterSpacing === undefined) { + return "0px"; + } + + if (typeof letterSpacing === "string") { + return letterSpacing; + } + + if (typeof letterSpacing === "number") { + return `${letterSpacing}px`; + } + + return letterSpacing.unit === "PERCENT" ? `${letterSpacing.value}%` : `${letterSpacing.value}px`; +} + +function normalizeExtractedTextStyles( + textStyleData: unknown, + typographyTokens: Record, +): unknown { + if ( + !textStyleData || + typeof textStyleData !== "object" || + !("textStyles" in textStyleData) || + !Array.isArray(textStyleData.textStyles) + ) { + return textStyleData; + } + + return textStyleData.textStyles.map((textStyle: ExtractedTextStyle): CanonicalTextStyle => { + const { name, category, size, weight } = parseTextStyleToken(textStyle.token); + const fontSizeTokenName = `primitive/font/size/${category}/${size}`; + const lineHeightTokenName = `primitive/font/lineHeight/${category}/${size}`; + const typefaceTokenName = `primitive/typeface/${category}`; + const letterSpacingTokenName = `primitive/font/letterSpacing/${category}/${size}`; + const lineHeightValue = + textStyle.lineHeight === undefined ? "normal" : toCssLength(textStyle.lineHeight); + const letterSpacingValue = toLetterSpacingValue(textStyle.letterSpacing); + + return { + name, + properties: { + fontSize: getTextStyleProperty( + typographyTokens, + fontSizeTokenName, + toCssLength(textStyle.fontSize), + ), + lineHeight: getTextStyleProperty(typographyTokens, lineHeightTokenName, lineHeightValue), + fontFamily: getTextStyleProperty(typographyTokens, typefaceTokenName, textStyle.fontFamily), + fontWeight: getTextStyleProperty( + typographyTokens, + getTextStyleWeightTokenPath(category, weight, textStyle.fontWeight), + textStyle.fontWeight, + ), + letterSpacing: getTextStyleProperty( + typographyTokens, + letterSpacingTokenName, + letterSpacingValue, + ), + paragraphSpacing: { + value: 0, + token: null, + }, + paragraphIndent: { + value: 0, + token: null, + }, + }, + }; + }); +} + /** * NestedObject를 재귀 순회해 `[vars.path.to.leaf]: "actualValue"` 형식의 할당 라인을 lines 배열에 수집 * @@ -98,10 +287,15 @@ try { const parsedTokens = tokenSchema.parse(tokens); -// textStyle.json 읽기 및 처리 -const textStyleFilePath = join(__dirname, "input/textStyle.json"); +// textStyles.json 읽기 및 처리 +const textStyleFilePath = join(__dirname, "input/textStyles.json"); const textStyleData = JSON.parse(fs.readFileSync(textStyleFilePath, "utf8")); -const parsedTextStyle = textStyleSchema.parse(textStyleData); +const normalizedTextStyleData = normalizeExtractedTextStyles( + textStyleData, + parsedTokens.typography.tokens.desktop, +); + +const parsedTextStyle = textStyleSchema.parse(normalizedTextStyleData); const cssVariables = { colorPrimitive: parsedTokens["color-primitive"].cssVariables, From 5b04ff01acb3b49e6a6e2118d59059c28d3fdc1e Mon Sep 17 00:00:00 2001 From: ccconac Date: Sat, 16 May 2026 15:30:09 +0900 Subject: [PATCH 02/16] =?UTF-8?q?docs(typography):=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9C=A0=ED=8B=B8=20?= =?UTF-8?q?=EA=B0=80=EC=9D=B4=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/tokens/Tokens.mdx | 36 +++++++++++ packages/jds/src/utils/typography.ts | 91 ++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 packages/jds/src/utils/typography.ts diff --git a/packages/jds/src/tokens/Tokens.mdx b/packages/jds/src/tokens/Tokens.mdx index ae52ba130..6e39a4e3b 100644 --- a/packages/jds/src/tokens/Tokens.mdx +++ b/packages/jds/src/tokens/Tokens.mdx @@ -306,6 +306,42 @@ generated key: semantic-textStyle-body-md-normal theme.textStyle["semantic-textStyle-body-md-normal"]; ``` +#### typography 유틸 size API와 textStyle 토큰 + +Figma와 토큰 파일에서는 textStyle을 `semantic-textStyle-title-6`처럼 토큰명 그대로 관리합니다. 반면 typography 유틸에서는 사용성을 위해 `2xl`, `xl`, `lg`, `md`, `sm`, `xs` 같은 size 값을 사용합니다. + +예를 들어 Title 계열 유틸은 아래처럼 유틸 size를 Figma textStyle 토큰으로 매핑합니다. + +```typescript +const titleStylesMap = { + "2xl": "semantic-textStyle-title-6", + xl: "semantic-textStyle-title-5", + lg: "semantic-textStyle-title-4", + md: "semantic-textStyle-title-3", + sm: "semantic-textStyle-title-2", + xs: "semantic-textStyle-title-1", +} as const; +``` + +JDS 내부에서 제목 스타일을 조합할 때는 `getTitleStyles` 같은 typography 유틸의 size API를 사용합니다. + +```typescript +const DialogTitle = styled.h2(({ theme }) => ({ + alignSelf: "stretch", + ...getTitleStyles(theme, { size: "xs", textAlign: "left" }), +})); +``` + +스타일 파일에서 토큰을 직접 적용해야 할 때는 Figma와 동일한 `semantic-textStyle-*` key를 사용합니다. + +```typescript +const TitleText = styled.h1(({ theme }) => ({ + ...theme.textStyle["semantic-textStyle-title-6"], +})); +``` + +정리하면, typography 유틸을 사용하는 레이어에서는 `size: "2xl"` 같은 유틸 API를 사용하고, 토큰을 직접 다루는 스타일 레이어에서는 `theme.textStyle["semantic-textStyle-title-6"]`처럼 토큰명을 그대로 사용합니다. + 빌더는 가능한 경우 typography primitive 토큰을 CSS 변수로 연결합니다. ```typescript diff --git a/packages/jds/src/utils/typography.ts b/packages/jds/src/utils/typography.ts new file mode 100644 index 000000000..a6f3ad2c1 --- /dev/null +++ b/packages/jds/src/utils/typography.ts @@ -0,0 +1,91 @@ +import isPropValid from "@emotion/is-prop-valid"; +import type { CSSObject, Theme } from "@emotion/react"; +import styled from "@emotion/styled"; +import type { ElementType } from "react"; + +export const TEXT_ALIGN_MAPPING = { + center: "center", + left: "flex-start", + right: "flex-end", +} as const; + +export type LabelSize = "lg" | "md" | "sm" | "xs"; +export type LabelTextAlign = keyof typeof TEXT_ALIGN_MAPPING; +export type LabelWeight = "bold" | "normal" | "subtle"; +export type LabelCursor = "pointer" | "default"; +export type LabelOwnProps = { + as?: ElementType; + size?: LabelSize; + textAlign?: LabelTextAlign; + weight?: LabelWeight; + cursor?: LabelCursor; + color?: string; + htmlFor?: string; +}; + +export type TitleSize = "2xl" | "xl" | "lg" | "md" | "sm" | "xs"; +export type TitleTextAlign = keyof typeof TEXT_ALIGN_MAPPING; + +export interface TitleStyleOptions { + size?: TitleSize; + textAlign?: TitleTextAlign; + color?: string; +} + +const typographyProps = new Set(["size", "textAlign", "weight", "cursor", "color"]); + +export const shouldForwardTypographyProp = (prop: string) => { + return isPropValid(prop) && !prop.startsWith("$") && !typographyProps.has(prop); +}; + +export const titleStylesMap = { + "2xl": "semantic-textStyle-title-6", + xl: "semantic-textStyle-title-5", + lg: "semantic-textStyle-title-4", + md: "semantic-textStyle-title-3", + sm: "semantic-textStyle-title-2", + xs: "semantic-textStyle-title-1", +} as const satisfies Record; + +export const getLabelTokenKey = ( + size: LabelSize, + weight: LabelWeight, +): keyof Theme["textStyle"] => { + return `semantic-textStyle-label-${size}-${weight}` as keyof Theme["textStyle"]; +}; + +export const getLabelStyles = ( + theme: Theme, + { + size = "md", + textAlign = "left", + weight = "normal", + cursor = "default", + }: LabelOwnProps & Record, +): CSSObject => ({ + display: "flex", + justifyContent: TEXT_ALIGN_MAPPING[textAlign], + alignItems: "center", + color: theme.color.semantic.object.bold, + cursor, + ...theme.textStyle[getLabelTokenKey(size, weight)], +}); + +export const getTitleStyles = ( + theme: Theme, + { size = "md", textAlign = "left", color }: TitleStyleOptions, +): CSSObject => ({ + display: "flex", + justifyContent: TEXT_ALIGN_MAPPING[textAlign], + alignItems: "center", + color: color || theme.color.semantic.object.bolder, + cursor: "default", + ...theme.textStyle[titleStylesMap[size]], +}); + +export const TypographyLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, +})(({ theme, color, ...props }) => ({ + ...getLabelStyles(theme, props), + ...(color ? { color } : {}), +})); From d9d77a4370aa0cd3a823bf41840bde6dc188bd46 Mon Sep 17 00:00:00 2001 From: ccconac Date: Sat, 16 May 2026 15:32:38 +0900 Subject: [PATCH 03/16] =?UTF-8?q?refactor(hero):=20Hero=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jds/src/components/Hero/Hero.stories.tsx | 36 ------------------ .../jds/src/components/Hero/Hero.style.ts | 37 ------------------- packages/jds/src/components/Hero/Hero.tsx | 27 -------------- packages/jds/src/components/Hero/index.ts | 1 - packages/jds/src/components/index.ts | 1 - 5 files changed, 102 deletions(-) delete mode 100644 packages/jds/src/components/Hero/Hero.stories.tsx delete mode 100644 packages/jds/src/components/Hero/Hero.style.ts delete mode 100644 packages/jds/src/components/Hero/Hero.tsx delete mode 100644 packages/jds/src/components/Hero/index.ts diff --git a/packages/jds/src/components/Hero/Hero.stories.tsx b/packages/jds/src/components/Hero/Hero.stories.tsx deleted file mode 100644 index b1886e1ed..000000000 --- a/packages/jds/src/components/Hero/Hero.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react-vite"; - -import { Hero } from "./Hero"; - -const meta = { - title: "Components/Hero", - component: Hero, - argTypes: { - children: { - control: "text", - description: "버튼 내부 콘텐츠", - defaultValue: "Hero", - }, - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - size: "lg", - textAlign: "center", - children: "히어로", - }, -}; - -export const Test: Story = { - name: "With Wide Parent Element", - args: { - size: "lg", - textAlign: "left", - children: "히어로", - style: { width: "500px", border: "1px solid red" }, - }, -}; diff --git a/packages/jds/src/components/Hero/Hero.style.ts b/packages/jds/src/components/Hero/Hero.style.ts deleted file mode 100644 index 6c4f7891b..000000000 --- a/packages/jds/src/components/Hero/Hero.style.ts +++ /dev/null @@ -1,37 +0,0 @@ -import styled from "@emotion/styled"; - -export const SIZE_TO_TEXT_STYLE = { - xs: "semantic-textStyle-title-1", - sm: "semantic-textStyle-title-2", - md: "semantic-textStyle-title-3", - lg: "semantic-textStyle-title-4", -} as const; - -export const TEXT_ALIGN_MAPPING = { - center: "center", - left: "flex-start", - right: "flex-end", -} as const; - -export type HeroSize = keyof typeof SIZE_TO_TEXT_STYLE; -export type HeroTextAlign = keyof typeof TEXT_ALIGN_MAPPING; - -interface StyledHeroProps { - size: HeroSize; - textAlign: HeroTextAlign; - color: string; -} - -export const HeroDiv = styled.div(({ theme, size, textAlign, color }) => { - const textStyleKey = SIZE_TO_TEXT_STYLE[size]; - const justifyContent = TEXT_ALIGN_MAPPING[textAlign]; - - return { - display: "flex", - justifyContent, - alignItems: "center", - color, - cursor: "default", - ...theme.textStyle[textStyleKey], - }; -}); diff --git a/packages/jds/src/components/Hero/Hero.tsx b/packages/jds/src/components/Hero/Hero.tsx deleted file mode 100644 index f6530a49a..000000000 --- a/packages/jds/src/components/Hero/Hero.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useTheme } from "@emotion/react"; -import { forwardRef } from "react"; - -import type { HeroSize, HeroTextAlign } from "./Hero.style"; -import { HeroDiv } from "./Hero.style"; - -export interface HeroProps extends React.HTMLAttributes { - size?: HeroSize; - textAlign?: HeroTextAlign; - color?: string; - children: React.ReactNode; -} - -export const Hero = forwardRef( - ({ size = "lg", textAlign = "center", color, children, ...props }, ref) => { - const theme = useTheme(); - const BaseColor = color || theme.color.semantic.object.boldest; - - return ( - - {children} - - ); - }, -); - -Hero.displayName = "Hero"; diff --git a/packages/jds/src/components/Hero/index.ts b/packages/jds/src/components/Hero/index.ts deleted file mode 100644 index 4ce5c7eed..000000000 --- a/packages/jds/src/components/Hero/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Hero"; diff --git a/packages/jds/src/components/index.ts b/packages/jds/src/components/index.ts index 47a8ab962..5597a5a4e 100644 --- a/packages/jds/src/components/index.ts +++ b/packages/jds/src/components/index.ts @@ -13,7 +13,6 @@ export * from "./Divider"; export * from "./EmptyState"; export * from "./FileItem"; export * from "./Footer"; -export * from "./Hero"; export * from "./Icon"; export * from "./Image"; export * from "./Input"; From 32de6f7c26285f112d7832ebae8b1d84d5d8289a Mon Sep 17 00:00:00 2001 From: ccconac Date: Sat, 16 May 2026 15:34:50 +0900 Subject: [PATCH 04/16] =?UTF-8?q?refactor(title):=20Title=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Title/Title.stories.tsx | 58 ------------------- .../jds/src/components/Title/Title.style.ts | 34 ----------- packages/jds/src/components/Title/Title.tsx | 20 ------- packages/jds/src/components/Title/index.ts | 2 - packages/jds/src/components/index.ts | 1 - 5 files changed, 115 deletions(-) delete mode 100644 packages/jds/src/components/Title/Title.stories.tsx delete mode 100644 packages/jds/src/components/Title/Title.style.ts delete mode 100644 packages/jds/src/components/Title/Title.tsx delete mode 100644 packages/jds/src/components/Title/index.ts diff --git a/packages/jds/src/components/Title/Title.stories.tsx b/packages/jds/src/components/Title/Title.stories.tsx deleted file mode 100644 index 2bd75c05d..000000000 --- a/packages/jds/src/components/Title/Title.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useTheme } from "@emotion/react"; -import type { Meta, StoryObj } from "@storybook/react-vite"; - -import { Title } from "./Title"; - -const meta = { - title: "Components/Title", - component: Title, - parameters: { - layout: "centered", - }, - argTypes: { - children: { - control: "text", - description: "레이블 텍스트", - defaultValue: "Title", - }, - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - size: "md", - textAlign: "left", - children: "타이틀", - }, -}; - -export const WithWideParentElement: Story = { - args: { - size: "lg", - textAlign: "left", - children: "타이틀", - }, - render: args => ( -
- - {args.children} - -
- ), -}; - -export const WithColor: Story = { - args: { - size: "lg", - textAlign: "left", - children: "타이틀", - }, - render: args => { - const theme = useTheme(); - - return ; - }, -}; diff --git a/packages/jds/src/components/Title/Title.style.ts b/packages/jds/src/components/Title/Title.style.ts deleted file mode 100644 index af7c90267..000000000 --- a/packages/jds/src/components/Title/Title.style.ts +++ /dev/null @@ -1,34 +0,0 @@ -import styled from "@emotion/styled"; - -import { TEXT_ALIGN_MAPPING } from "../Hero/Hero.style"; - -export type TitleSize = "lg" | "md" | "sm" | "xs"; -export type TitleTextAlign = keyof typeof TEXT_ALIGN_MAPPING; - -interface StyledTitleProps { - size: TitleSize; - textAlign: TitleTextAlign; - color?: string; -} - -export const titleStylesMap = { - lg: "semantic-textStyle-title-4", - md: "semantic-textStyle-title-3", - sm: "semantic-textStyle-title-2", - xs: "semantic-textStyle-title-1", -} as const; - -export const StyledTitle = styled.div<StyledTitleProps>(({ theme, size, textAlign, color }) => { - const tokenKey = titleStylesMap[size]; - const justifyContent = TEXT_ALIGN_MAPPING[textAlign]; - const BaseColor = color || theme.color.semantic.object.bolder; - - return { - display: "flex", - justifyContent, - alignItems: "center", - color: BaseColor, - cursor: "default", - ...theme.textStyle[tokenKey], - }; -}); diff --git a/packages/jds/src/components/Title/Title.tsx b/packages/jds/src/components/Title/Title.tsx deleted file mode 100644 index b218c0fd0..000000000 --- a/packages/jds/src/components/Title/Title.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentProps, ElementRef, ReactNode } from "react"; -import { forwardRef } from "react"; - -import { StyledTitle } from "./Title.style"; - -export interface TitleProps extends ComponentProps<typeof StyledTitle> { - children: ReactNode; -} - -export const Title = forwardRef<ElementRef<typeof StyledTitle>, TitleProps>( - ({ as, size = "md", textAlign = "left", color, children, ...props }, ref) => { - return ( - <StyledTitle as={as} ref={ref} size={size} textAlign={textAlign} color={color} {...props}> - {children} - </StyledTitle> - ); - }, -); - -Title.displayName = "Title"; diff --git a/packages/jds/src/components/Title/index.ts b/packages/jds/src/components/Title/index.ts deleted file mode 100644 index a19d10630..000000000 --- a/packages/jds/src/components/Title/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./Title"; -export type { TitleProps } from "./Title"; diff --git a/packages/jds/src/components/index.ts b/packages/jds/src/components/index.ts index 5597a5a4e..ac8ebd658 100644 --- a/packages/jds/src/components/index.ts +++ b/packages/jds/src/components/index.ts @@ -31,7 +31,6 @@ export * from "./Snackbar"; export * from "./Step"; export * from "./Tab"; export * from "./Table"; -export * from "./Title"; export * from "./Toast"; export * from "./Tooltip"; export * from "./Uploader"; From 849f341dd44361f9d52b88148430d8a4d9fc3533 Mon Sep 17 00:00:00 2001 From: ccconac <qwerpoiu91@naver.com> Date: Sat, 16 May 2026 15:37:02 +0900 Subject: [PATCH 05/16] =?UTF-8?q?refactor(label):=20Label=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Label/Label.stories.tsx | 110 ------------------ .../jds/src/components/Label/Label.style.ts | 44 ------- packages/jds/src/components/Label/Label.tsx | 36 ------ packages/jds/src/components/Label/index.ts | 2 - .../jds/src/components/Label/label.types.ts | 14 --- packages/jds/src/components/index.ts | 1 - 6 files changed, 207 deletions(-) delete mode 100644 packages/jds/src/components/Label/Label.stories.tsx delete mode 100644 packages/jds/src/components/Label/Label.style.ts delete mode 100644 packages/jds/src/components/Label/Label.tsx delete mode 100644 packages/jds/src/components/Label/index.ts delete mode 100644 packages/jds/src/components/Label/label.types.ts diff --git a/packages/jds/src/components/Label/Label.stories.tsx b/packages/jds/src/components/Label/Label.stories.tsx deleted file mode 100644 index 10c45b583..000000000 --- a/packages/jds/src/components/Label/Label.stories.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import styled from "@emotion/styled"; -import type { Decorator, Meta, StoryObj } from "@storybook/react-vite"; - -import { Label } from "./Label"; - -const withWidthDecorator: Decorator = Story => ( - <div style={{ width: "500px" }}> - <Story /> - </div> -); - -const meta = { - title: "Components/Label", - component: Label, - decorators: [withWidthDecorator], - parameters: { - layout: "centered", - }, - argTypes: { - children: { - control: "text", - description: "레이블 텍스트", - defaultValue: "Label", - }, - }, -} satisfies Meta<typeof Label>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const Default: Story = { - args: { - size: "md", - textAlign: "left", - weight: "normal", - children: "레이블", - }, -}; - -export const WithParentElement: Story = { - args: { - size: "lg", - textAlign: "left", - weight: "bold", - children: "레이블", - }, - render: args => ( - <div style={{ width: "500px", border: "1px solid red" }}> - <Label size={args.size} textAlign={args.textAlign} weight={args.weight}> - {args.children} - </Label> - </div> - ), -}; - -const AccentLabel = styled(Label)(({ theme }) => ({ - color: theme.color.semantic.accent.neutral, -})); - -export const WithAccentColor: Story = { - name: "With Accent Color (styled pattern)", - args: { - size: "lg", - textAlign: "left", - weight: "bold", - children: "강조 레이블", - }, - render: args => <AccentLabel {...args} />, -}; - -interface VariantLabelProps { - variant?: "default" | "accent" | "muted" | "success" | "error"; -} - -const VariantLabel = styled(Label)<VariantLabelProps>(({ theme, variant = "default" }) => { - const colorMap = { - default: theme.color.semantic.object.bold, - accent: theme.color.semantic.accent.neutral, - muted: theme.color.semantic.object.subtle, - success: theme.color.semantic.feedback.positive.normal, - error: theme.color.semantic.feedback.destructive.normal, - }; - - return { - color: colorMap[variant], - }; -}); - -export const WithVariants: Story = { - name: "With Color Variants (styled pattern)", - render: () => ( - <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}> - <VariantLabel variant='default' size='md' weight='normal'> - 기본 레이블 - </VariantLabel> - <VariantLabel variant='accent' size='md' weight='bold'> - 강조 레이블 - </VariantLabel> - <VariantLabel variant='muted' size='md' weight='normal'> - 흐린 레이블 - </VariantLabel> - <VariantLabel variant='success' size='md' weight='normal'> - 성공 레이블 - </VariantLabel> - <VariantLabel variant='error' size='md' weight='normal'> - 에러 레이블 - </VariantLabel> - </div> - ), -}; diff --git a/packages/jds/src/components/Label/Label.style.ts b/packages/jds/src/components/Label/Label.style.ts deleted file mode 100644 index 1afc41636..000000000 --- a/packages/jds/src/components/Label/Label.style.ts +++ /dev/null @@ -1,44 +0,0 @@ -import isPropValid from "@emotion/is-prop-valid"; -import type { Theme } from "@emotion/react"; -import styled from "@emotion/styled"; - -export const TEXT_ALIGN_MAPPING = { - center: "center", - left: "flex-start", - right: "flex-end", -} as const; - -export type LabelSize = "lg" | "md" | "sm" | "xs"; -export type LabelTextAlign = keyof typeof TEXT_ALIGN_MAPPING; -export type LabelWeight = "bold" | "normal" | "subtle"; -export type LabelCursor = "pointer" | "default"; - -interface LabelStyledProps { - $size: LabelSize; - $textAlign: LabelTextAlign; - $weight: LabelWeight; - $cursor: LabelCursor; -} - -export const getLabelTokenKey = ( - size: LabelSize, - weight: LabelWeight, -): keyof Theme["textStyle"] => { - return `semantic-textStyle-label-${size}-${weight}` as keyof Theme["textStyle"]; -}; - -export const LabelStyled = styled("label", { - shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), -})<LabelStyledProps>(({ theme, $size, $textAlign, $weight, $cursor = "default" }) => { - const tokenKey = getLabelTokenKey($size, $weight); - const justifyContent = TEXT_ALIGN_MAPPING[$textAlign]; - - return { - display: "flex", - justifyContent, - alignItems: "center", - color: theme.color.semantic.object.bold, - cursor: $cursor, - ...theme.textStyle[tokenKey], - }; -}); diff --git a/packages/jds/src/components/Label/Label.tsx b/packages/jds/src/components/Label/Label.tsx deleted file mode 100644 index db33868e6..000000000 --- a/packages/jds/src/components/Label/Label.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { ElementType } from "react"; - -import { LabelStyled } from "./Label.style"; -import type { LabelOwnProps } from "./label.types"; - -import { PolymorphicForwardRef } from "@/utils/forwardRef"; - -/** - * Label - Polymorphic Label 컴포넌트 - * - * `as` prop을 통해 다양한 HTML 요소로 렌더링할 수 있습니다. - * TypeScript가 `as` prop에 따라 올바른 HTML 속성을 자동으로 추론합니다. - * - * - */ - -//ToDo: Label의 기본 속성을 span 태그로 변경 -export const Label = PolymorphicForwardRef<"label", LabelOwnProps>( - ({ as, size = "md", textAlign = "left", weight = "normal", cursor = 'default', children, ...restProps }, ref) => { - const Component = as || ("label" as ElementType); - - return ( - <LabelStyled - ref={ref} - as={Component} - $size={size} - $textAlign={textAlign} - $weight={weight} - $cursor={cursor} - {...restProps} - > - {children} - </LabelStyled> - ); - }, -); diff --git a/packages/jds/src/components/Label/index.ts b/packages/jds/src/components/Label/index.ts deleted file mode 100644 index 363cd001c..000000000 --- a/packages/jds/src/components/Label/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Label } from "./Label"; -export type { LabelOwnProps } from "./label.types"; diff --git a/packages/jds/src/components/Label/label.types.ts b/packages/jds/src/components/Label/label.types.ts deleted file mode 100644 index f70eaf851..000000000 --- a/packages/jds/src/components/Label/label.types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { LabelCursor, LabelSize, LabelTextAlign, LabelWeight } from "./Label.style"; - -/** - * @remarks - * - polymorphicForwardRef를 통해 `as` prop이 자동으로 추가됩니다 - * - 색상 커스터마이징이 필요한 경우 `styled(Label)` 패턴을 사용하면 됩니다. - */ - -export type LabelOwnProps = { - size?: LabelSize; - textAlign?: LabelTextAlign; - weight?: LabelWeight; - cursor?: LabelCursor; -}; diff --git a/packages/jds/src/components/index.ts b/packages/jds/src/components/index.ts index ac8ebd658..f6515dc00 100644 --- a/packages/jds/src/components/index.ts +++ b/packages/jds/src/components/index.ts @@ -17,7 +17,6 @@ export * from "./Icon"; export * from "./Image"; export * from "./Input"; export * from "./Kbd"; -export * from "./Label"; export * from "./Logo"; export * from "./Menu/MegaMenu"; export * from "./Menu/MenuItem"; From f4b22c6a271f9143a3391998c9b06dbc32e88586 Mon Sep 17 00:00:00 2001 From: ccconac <qwerpoiu91@naver.com> Date: Sat, 16 May 2026 15:40:52 +0900 Subject: [PATCH 06/16] =?UTF-8?q?chore(tokens):=20token=20build=EB=A1=9C?= =?UTF-8?q?=20=EC=9D=B8=ED=95=9C=20=EC=83=9D=EC=84=B1=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=A0=90=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/jds/src/tokens/breakpoints.ts | 2 +- packages/jds/src/tokens/globalTokens.css.ts | 2 +- packages/jds/src/tokens/input/token.json | 2 +- packages/jds/src/tokens/vars.css.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/jds/src/tokens/breakpoints.ts b/packages/jds/src/tokens/breakpoints.ts index 4c458ebbc..8c88632e2 100644 --- a/packages/jds/src/tokens/breakpoints.ts +++ b/packages/jds/src/tokens/breakpoints.ts @@ -1,5 +1,5 @@ // 자동 생성된 브레이크포인트 - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM export const breakpoints = { desktop: { min: 1200, max: 2560 }, diff --git a/packages/jds/src/tokens/globalTokens.css.ts b/packages/jds/src/tokens/globalTokens.css.ts index 44bbc2dee..74659f0f0 100644 --- a/packages/jds/src/tokens/globalTokens.css.ts +++ b/packages/jds/src/tokens/globalTokens.css.ts @@ -1,5 +1,5 @@ // 자동 생성된 VE 전역 토큰 스타일 - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM import { globalStyle } from "@vanilla-extract/css"; import { vars } from "./vars.css"; diff --git a/packages/jds/src/tokens/input/token.json b/packages/jds/src/tokens/input/token.json index 09eb47a5e..900730cf9 100644 --- a/packages/jds/src/tokens/input/token.json +++ b/packages/jds/src/tokens/input/token.json @@ -1 +1 @@ -"{\n\t\"color-primitive\": {\n\t\t\"value\": {\n\t\t\t\"primitive-flow-20\": \"#faf8ff\",\n\t\t\t\"primitive-flow-40\": \"#f2f3ff\",\n\t\t\t\"primitive-flow-80\": \"#e7e7f3\",\n\t\t\t\"primitive-flow-150\": \"#d3d4df\",\n\t\t\t\"primitive-flow-200\": \"#c5c6d1\",\n\t\t\t\"primitive-flow-250\": \"#b7b8c3\",\n\t\t\t\"primitive-flow-300\": \"#a9aab6\",\n\t\t\t\"primitive-flow-350\": \"#9c9da8\",\n\t\t\t\"primitive-flow-400\": \"#8f909b\",\n\t\t\t\"primitive-flow-500\": \"#757681\",\n\t\t\t\"primitive-flow-550\": \"#686a74\",\n\t\t\t\"primitive-red-20\": \"#fff8f7\",\n\t\t\t\"primitive-red-40\": \"#fff0ef\",\n\t\t\t\"primitive-red-80\": \"#ffe2df\",\n\t\t\t\"primitive-red-150\": \"#ffc7c2\",\n\t\t\t\"primitive-red-250\": \"#ff9f97\",\n\t\t\t\"primitive-red-350\": \"#ff7169\",\n\t\t\t\"primitive-red-450\": \"#ef4442\",\n\t\t\t\"primitive-red-550\": \"#cb292d\",\n\t\t\t\"primitive-red-650\": \"#a80618\",\n\t\t\t\"primitive-red-750\": \"#7d000d\",\n\t\t\t\"primitive-red-800\": \"#680009\",\n\t\t\t\"primitive-flow-650\": \"#50525c\",\n\t\t\t\"primitive-flow-450\": \"#81838e\",\n\t\t\t\"primitive-flow-750\": \"#393b44\",\n\t\t\t\"primitive-flow-60\": \"#ecedf9\",\n\t\t\t\"primitive-flow-100\": \"#e1e2ee\",\n\t\t\t\"primitive-shade-2\": \"#191b2405\",\n\t\t\t\"primitive-shade-4\": \"#191b240a\",\n\t\t\t\"primitive-shade-6\": \"#191b240f\",\n\t\t\t\"primitive-shade-8\": \"#191b2414\",\n\t\t\t\"primitive-shade-12\": \"#191b241e\",\n\t\t\t\"primitive-base-0\": \"#ffffff\",\n\t\t\t\"primitive-base-1000\": \"#000000\",\n\t\t\t\"primitive-flow-600\": \"#5c5e68\",\n\t\t\t\"primitive-flow-700\": \"#444650\",\n\t\t\t\"primitive-flow-800\": \"#2e3039\",\n\t\t\t\"primitive-red-60\": \"#ffe9e7\",\n\t\t\t\"primitive-red-100\": \"#ffdad6\",\n\t\t\t\"primitive-red-200\": \"#ffb3ad\",\n\t\t\t\"primitive-red-300\": \"#ff8981\",\n\t\t\t\"primitive-red-400\": \"#ff5450\",\n\t\t\t\"primitive-red-500\": \"#dd3737\",\n\t\t\t\"primitive-red-600\": \"#ba1a22\",\n\t\t\t\"primitive-red-700\": \"#930012\",\n\t\t\t\"primitive-flow-dark-alpha-20\": \"#fbf9ff\",\n\t\t\t\"primitive-flow-dark-alpha-40\": \"#f4f5ff\",\n\t\t\t\"primitive-flow-dark-alpha-400\": \"#f2f2fc8c\",\n\t\t\t\"primitive-flow-dark-alpha-450\": \"#edeffc7c\",\n\t\t\t\"primitive-flow-dark-alpha-500\": \"#ededfb6d\",\n\t\t\t\"primitive-flow-dark-alpha-550\": \"#edeffb5e\",\n\t\t\t\"primitive-flow-dark-alpha-600\": \"#ebedf851\",\n\t\t\t\"primitive-flow-dark-alpha-650\": \"#eef0fb42\",\n\t\t\t\"primitive-flow-dark-alpha-700\": \"#e4e6f535\",\n\t\t\t\"primitive-flow-dark-alpha-750\": \"#eff1f926\",\n\t\t\t\"primitive-flow-dark-alpha-800\": \"#e9ecf519\",\n\t\t\t\"primitive-flow-dark-alpha-60\": \"#f1f2fdf9\",\n\t\t\t\"primitive-flow-dark-alpha-80\": \"#f0f0fdf2\",\n\t\t\t\"primitive-flow-dark-alpha-100\": \"#f1f2fded\",\n\t\t\t\"primitive-flow-dark-alpha-150\": \"#f1f2fddb\",\n\t\t\t\"primitive-flow-dark-alpha-200\": \"#f4f4ffc9\",\n\t\t\t\"primitive-flow-dark-alpha-250\": \"#f0f1feba\",\n\t\t\t\"primitive-flow-dark-alpha-300\": \"#f0f0feaa\",\n\t\t\t\"primitive-flow-dark-alpha-350\": \"#f2f2fc9b\",\n\t\t\t\"primitive-flow-light-alpha-20\": \"#5614ff07\",\n\t\t\t\"primitive-flow-light-alpha-40\": \"#283aff0f\",\n\t\t\t\"primitive-flow-light-alpha-60\": \"#111cb414\",\n\t\t\t\"primitive-flow-light-alpha-80\": \"#0e0e8519\",\n\t\t\t\"primitive-flow-light-alpha-100\": \"#040b701e\",\n\t\t\t\"primitive-flow-light-alpha-150\": \"#0a104b2d\",\n\t\t\t\"primitive-flow-light-alpha-200\": \"#0207353a\",\n\t\t\t\"primitive-flow-light-alpha-250\": \"#07093149\",\n\t\t\t\"primitive-flow-light-alpha-300\": \"#01042656\",\n\t\t\t\"primitive-flow-light-alpha-350\": \"#01042263\",\n\t\t\t\"primitive-flow-light-alpha-400\": \"#00031e70\",\n\t\t\t\"primitive-flow-light-alpha-450\": \"#02061b7f\",\n\t\t\t\"primitive-flow-light-alpha-500\": \"#04051a8c\",\n\t\t\t\"primitive-flow-light-alpha-550\": \"#02061699\",\n\t\t\t\"primitive-flow-light-alpha-600\": \"#000314a3\",\n\t\t\t\"primitive-flow-light-alpha-650\": \"#010413af\",\n\t\t\t\"primitive-flow-light-alpha-700\": \"#010412bc\",\n\t\t\t\"primitive-flow-light-alpha-750\": \"#00030ec6\",\n\t\t\t\"primitive-flow-light-alpha-800\": \"#00030fd1\",\n\t\t\t\"primitive-orange-20\": \"#fff8f6\",\n\t\t\t\"primitive-orange-40\": \"#fff1eb\",\n\t\t\t\"primitive-orange-60\": \"#ffeae0\",\n\t\t\t\"primitive-orange-80\": \"#ffe2d6\",\n\t\t\t\"primitive-orange-100\": \"#ffdbcb\",\n\t\t\t\"primitive-orange-150\": \"#ffc9ae\",\n\t\t\t\"primitive-orange-200\": \"#ffb691\",\n\t\t\t\"primitive-orange-250\": \"#ffa271\",\n\t\t\t\"primitive-orange-300\": \"#ff8d4c\",\n\t\t\t\"primitive-orange-350\": \"#fe761c\",\n\t\t\t\"primitive-orange-400\": \"#ec690a\",\n\t\t\t\"primitive-orange-450\": \"#d95f00\",\n\t\t\t\"primitive-orange-500\": \"#c55500\",\n\t\t\t\"primitive-orange-550\": \"#b14c00\",\n\t\t\t\"primitive-orange-600\": \"#9e4300\",\n\t\t\t\"primitive-orange-650\": \"#8b3a00\",\n\t\t\t\"primitive-orange-700\": \"#783100\",\n\t\t\t\"primitive-orange-750\": \"#662900\",\n\t\t\t\"primitive-orange-800\": \"#552100\",\n\t\t\t\"primitive-yellow-20\": \"#fff8f2\",\n\t\t\t\"primitive-yellow-40\": \"#fff2dd\",\n\t\t\t\"primitive-yellow-60\": \"#ffecc8\",\n\t\t\t\"primitive-yellow-80\": \"#ffe5b2\",\n\t\t\t\"primitive-yellow-100\": \"#ffdf9b\",\n\t\t\t\"primitive-yellow-150\": \"#ffce58\",\n\t\t\t\"primitive-yellow-200\": \"#f7be20\",\n\t\t\t\"primitive-yellow-250\": \"#e7b007\",\n\t\t\t\"primitive-yellow-300\": \"#d7a300\",\n\t\t\t\"primitive-yellow-350\": \"#c69700\",\n\t\t\t\"primitive-yellow-400\": \"#b68a00\",\n\t\t\t\"primitive-yellow-450\": \"#a67e00\",\n\t\t\t\"primitive-yellow-500\": \"#967100\",\n\t\t\t\"primitive-yellow-550\": \"#876500\",\n\t\t\t\"primitive-yellow-600\": \"#785a00\",\n\t\t\t\"primitive-yellow-650\": \"#694e00\",\n\t\t\t\"primitive-yellow-700\": \"#5b4300\",\n\t\t\t\"primitive-yellow-750\": \"#4d3800\",\n\t\t\t\"primitive-yellow-800\": \"#3f2e00\",\n\t\t\t\"primitive-lime-20\": \"#f0ffd6\",\n\t\t\t\"primitive-lime-40\": \"#ddffae\",\n\t\t\t\"primitive-lime-60\": \"#c8ff7f\",\n\t\t\t\"primitive-lime-80\": \"#b2fe4a\",\n\t\t\t\"primitive-lime-100\": \"#adf844\",\n\t\t\t\"primitive-lime-150\": \"#a0e936\",\n\t\t\t\"primitive-lime-200\": \"#92da26\",\n\t\t\t\"primitive-lime-250\": \"#85cc10\",\n\t\t\t\"primitive-lime-300\": \"#7abd00\",\n\t\t\t\"primitive-lime-350\": \"#70af00\",\n\t\t\t\"primitive-lime-400\": \"#67a000\",\n\t\t\t\"primitive-lime-450\": \"#5d9200\",\n\t\t\t\"primitive-lime-500\": \"#548400\",\n\t\t\t\"primitive-lime-550\": \"#4b7600\",\n\t\t\t\"primitive-lime-600\": \"#426900\",\n\t\t\t\"primitive-lime-650\": \"#395c00\",\n\t\t\t\"primitive-lime-700\": \"#304f00\",\n\t\t\t\"primitive-lime-750\": \"#284300\",\n\t\t\t\"primitive-lime-800\": \"#203600\",\n\t\t\t\"primitive-green-20\": \"#ebffe8\",\n\t\t\t\"primitive-green-40\": \"#d2ffd3\",\n\t\t\t\"primitive-green-60\": \"#b7ffbe\",\n\t\t\t\"primitive-green-80\": \"#95ffa6\",\n\t\t\t\"primitive-green-100\": \"#6bff8f\",\n\t\t\t\"primitive-green-150\": \"#5bf082\",\n\t\t\t\"primitive-green-200\": \"#4ae176\",\n\t\t\t\"primitive-green-250\": \"#38d369\",\n\t\t\t\"primitive-green-300\": \"#21c45d\",\n\t\t\t\"primitive-green-350\": \"#00b652\",\n\t\t\t\"primitive-green-400\": \"#00a74b\",\n\t\t\t\"primitive-green-450\": \"#009843\",\n\t\t\t\"primitive-green-500\": \"#008a3c\",\n\t\t\t\"primitive-green-550\": \"#007b35\",\n\t\t\t\"primitive-green-600\": \"#006e2f\",\n\t\t\t\"primitive-green-650\": \"#006028\",\n\t\t\t\"primitive-green-700\": \"#005321\",\n\t\t\t\"primitive-green-750\": \"#00461b\",\n\t\t\t\"primitive-green-800\": \"#003915\",\n\t\t\t\"primitive-cyan-20\": \"#f0fbff\",\n\t\t\t\"primitive-cyan-40\": \"#e0f8ff\",\n\t\t\t\"primitive-cyan-60\": \"#d0f4ff\",\n\t\t\t\"primitive-cyan-80\": \"#bef0ff\",\n\t\t\t\"primitive-cyan-100\": \"#acedff\",\n\t\t\t\"primitive-cyan-150\": \"#74e3ff\",\n\t\t\t\"primitive-cyan-200\": \"#49d7f6\",\n\t\t\t\"primitive-cyan-250\": \"#34c9e8\",\n\t\t\t\"primitive-cyan-300\": \"#13bbda\",\n\t\t\t\"primitive-cyan-350\": \"#00adca\",\n\t\t\t\"primitive-cyan-400\": \"#009eb9\",\n\t\t\t\"primitive-cyan-450\": \"#0090a9\",\n\t\t\t\"primitive-cyan-500\": \"#008399\",\n\t\t\t\"primitive-cyan-550\": \"#007589\",\n\t\t\t\"primitive-cyan-600\": \"#00687a\",\n\t\t\t\"primitive-cyan-650\": \"#005b6b\",\n\t\t\t\"primitive-cyan-700\": \"#004e5c\",\n\t\t\t\"primitive-cyan-750\": \"#00424e\",\n\t\t\t\"primitive-cyan-800\": \"#003640\",\n\t\t\t\"primitive-sky-20\": \"#f6faff\",\n\t\t\t\"primitive-sky-40\": \"#ebf5ff\",\n\t\t\t\"primitive-sky-60\": \"#e0f0ff\",\n\t\t\t\"primitive-sky-80\": \"#d4ebff\",\n\t\t\t\"primitive-sky-100\": \"#c9e6ff\",\n\t\t\t\"primitive-sky-150\": \"#abdaff\",\n\t\t\t\"primitive-sky-200\": \"#8aceff\",\n\t\t\t\"primitive-sky-250\": \"#62c2ff\",\n\t\t\t\"primitive-sky-300\": \"#35b5fb\",\n\t\t\t\"primitive-sky-350\": \"#19a7ec\",\n\t\t\t\"primitive-sky-400\": \"#009adb\",\n\t\t\t\"primitive-sky-450\": \"#008cc8\",\n\t\t\t\"primitive-sky-500\": \"#007fb5\",\n\t\t\t\"primitive-sky-550\": \"#0071a3\",\n\t\t\t\"primitive-sky-600\": \"#006491\",\n\t\t\t\"primitive-sky-650\": \"#00587f\",\n\t\t\t\"primitive-sky-700\": \"#004c6e\",\n\t\t\t\"primitive-sky-750\": \"#00405e\",\n\t\t\t\"primitive-sky-800\": \"#00344d\",\n\t\t\t\"primitive-blue-20\": \"#f9f9ff\",\n\t\t\t\"primitive-blue-40\": \"#f1f3ff\",\n\t\t\t\"primitive-blue-60\": \"#e9edff\",\n\t\t\t\"primitive-blue-80\": \"#e0e8ff\",\n\t\t\t\"primitive-blue-100\": \"#d8e2ff\",\n\t\t\t\"primitive-blue-150\": \"#c3d4ff\",\n\t\t\t\"primitive-blue-200\": \"#adc6ff\",\n\t\t\t\"primitive-blue-250\": \"#97b8ff\",\n\t\t\t\"primitive-blue-300\": \"#80aaff\",\n\t\t\t\"primitive-blue-350\": \"#689cff\",\n\t\t\t\"primitive-blue-400\": \"#4c8eff\",\n\t\t\t\"primitive-blue-450\": \"#3881f4\",\n\t\t\t\"primitive-blue-500\": \"#2473e6\",\n\t\t\t\"primitive-blue-550\": \"#0166d8\",\n\t\t\t\"primitive-blue-600\": \"#005ac1\",\n\t\t\t\"primitive-blue-650\": \"#004faa\",\n\t\t\t\"primitive-blue-700\": \"#004494\",\n\t\t\t\"primitive-blue-750\": \"#00397e\",\n\t\t\t\"primitive-blue-800\": \"#002e69\",\n\t\t\t\"primitive-cerulean-blue-20\": \"#fbf8ff\",\n\t\t\t\"primitive-cerulean-blue-40\": \"#f4f2ff\",\n\t\t\t\"primitive-cerulean-blue-60\": \"#ececff\",\n\t\t\t\"primitive-cerulean-blue-80\": \"#e5e6ff\",\n\t\t\t\"primitive-cerulean-blue-100\": \"#dee1ff\",\n\t\t\t\"primitive-cerulean-blue-150\": \"#ccd2ff\",\n\t\t\t\"primitive-cerulean-blue-200\": \"#bac3ff\",\n\t\t\t\"primitive-cerulean-blue-250\": \"#a8b4ff\",\n\t\t\t\"primitive-cerulean-blue-300\": \"#95a6ff\",\n\t\t\t\"primitive-cerulean-blue-350\": \"#8397ff\",\n\t\t\t\"primitive-cerulean-blue-400\": \"#7087ff\",\n\t\t\t\"primitive-cerulean-blue-450\": \"#5d78ff\",\n\t\t\t\"primitive-cerulean-blue-500\": \"#4a68fc\",\n\t\t\t\"primitive-cerulean-blue-550\": \"#3b5aef\",\n\t\t\t\"primitive-cerulean-blue-600\": \"#2a4de2\",\n\t\t\t\"primitive-cerulean-blue-650\": \"#163ed6\",\n\t\t\t\"primitive-cerulean-blue-700\": \"#0031c5\",\n\t\t\t\"primitive-cerulean-blue-750\": \"#0029a9\",\n\t\t\t\"primitive-cerulean-blue-800\": \"#00208d\",\n\t\t\t\"primitive-violet-20\": \"#fef7ff\",\n\t\t\t\"primitive-violet-40\": \"#f8f1ff\",\n\t\t\t\"primitive-violet-60\": \"#f3eaff\",\n\t\t\t\"primitive-violet-80\": \"#eee4ff\",\n\t\t\t\"primitive-violet-100\": \"#e9ddff\",\n\t\t\t\"primitive-violet-150\": \"#ddcdff\",\n\t\t\t\"primitive-violet-200\": \"#d0bcff\",\n\t\t\t\"primitive-violet-250\": \"#c4acff\",\n\t\t\t\"primitive-violet-300\": \"#b89bff\",\n\t\t\t\"primitive-violet-350\": \"#ac8aff\",\n\t\t\t\"primitive-violet-400\": \"#a078ff\",\n\t\t\t\"primitive-violet-450\": \"#9466ff\",\n\t\t\t\"primitive-violet-500\": \"#8758f1\",\n\t\t\t\"primitive-violet-550\": \"#7a4ae3\",\n\t\t\t\"primitive-violet-600\": \"#6d3bd6\",\n\t\t\t\"primitive-violet-650\": \"#612bc9\",\n\t\t\t\"primitive-violet-700\": \"#5517bd\",\n\t\t\t\"primitive-violet-750\": \"#4900ad\",\n\t\t\t\"primitive-violet-800\": \"#3c0091\",\n\t\t\t\"primitive-purple-20\": \"#fff7fe\",\n\t\t\t\"primitive-purple-40\": \"#fcf0ff\",\n\t\t\t\"primitive-purple-60\": \"#f8e9ff\",\n\t\t\t\"primitive-purple-80\": \"#f4e2ff\",\n\t\t\t\"primitive-purple-100\": \"#f0dbff\",\n\t\t\t\"primitive-purple-150\": \"#e7c9ff\",\n\t\t\t\"primitive-purple-200\": \"#deb7ff\",\n\t\t\t\"primitive-purple-250\": \"#d4a5ff\",\n\t\t\t\"primitive-purple-300\": \"#cb93ff\",\n\t\t\t\"primitive-purple-350\": \"#c180ff\",\n\t\t\t\"primitive-purple-400\": \"#b76cff\",\n\t\t\t\"primitive-purple-450\": \"#ad59fb\",\n\t\t\t\"primitive-purple-500\": \"#9f4aed\",\n\t\t\t\"primitive-purple-550\": \"#923be0\",\n\t\t\t\"primitive-purple-600\": \"#842ad2\",\n\t\t\t\"primitive-purple-650\": \"#7714c5\",\n\t\t\t\"primitive-purple-700\": \"#6900b2\",\n\t\t\t\"primitive-purple-750\": \"#590099\",\n\t\t\t\"primitive-purple-800\": \"#4a0080\",\n\t\t\t\"primitive-fuchsia-20\": \"#fff7fa\",\n\t\t\t\"primitive-fuchsia-40\": \"#ffeffb\",\n\t\t\t\"primitive-fuchsia-60\": \"#ffe7fb\",\n\t\t\t\"primitive-fuchsia-80\": \"#ffdefc\",\n\t\t\t\"primitive-fuchsia-100\": \"#ffd6fd\",\n\t\t\t\"primitive-fuchsia-150\": \"#fec0ff\",\n\t\t\t\"primitive-fuchsia-200\": \"#faabff\",\n\t\t\t\"primitive-fuchsia-250\": \"#f695ff\",\n\t\t\t\"primitive-fuchsia-300\": \"#f17eff\",\n\t\t\t\"primitive-fuchsia-350\": \"#eb64ff\",\n\t\t\t\"primitive-fuchsia-400\": \"#e14ef8\",\n\t\t\t\"primitive-fuchsia-450\": \"#d13ee9\",\n\t\t\t\"primitive-fuchsia-500\": \"#c22cdb\",\n\t\t\t\"primitive-fuchsia-550\": \"#b315cd\",\n\t\t\t\"primitive-fuchsia-600\": \"#a200bb\",\n\t\t\t\"primitive-fuchsia-650\": \"#8f00a4\",\n\t\t\t\"primitive-fuchsia-700\": \"#7c008f\",\n\t\t\t\"primitive-fuchsia-750\": \"#69007a\",\n\t\t\t\"primitive-fuchsia-800\": \"#570065\",\n\t\t\t\"primitive-pink-20\": \"#fff8f8\",\n\t\t\t\"primitive-pink-40\": \"#fff0f3\",\n\t\t\t\"primitive-pink-60\": \"#ffe8ee\",\n\t\t\t\"primitive-pink-80\": \"#ffe0e9\",\n\t\t\t\"primitive-pink-100\": \"#ffd9e4\",\n\t\t\t\"primitive-pink-150\": \"#ffc5d9\",\n\t\t\t\"primitive-pink-200\": \"#ffb0cd\",\n\t\t\t\"primitive-pink-250\": \"#ff9ac2\",\n\t\t\t\"primitive-pink-300\": \"#ff82b7\",\n\t\t\t\"primitive-pink-350\": \"#ff67ad\",\n\t\t\t\"primitive-pink-400\": \"#f651a1\",\n\t\t\t\"primitive-pink-450\": \"#e64394\",\n\t\t\t\"primitive-pink-500\": \"#d53587\",\n\t\t\t\"primitive-pink-550\": \"#c4267a\",\n\t\t\t\"primitive-pink-600\": \"#b4146d\",\n\t\t\t\"primitive-pink-650\": \"#a20060\",\n\t\t\t\"primitive-pink-700\": \"#8c0053\",\n\t\t\t\"primitive-pink-750\": \"#780046\",\n\t\t\t\"primitive-pink-800\": \"#640039\",\n\t\t\t\"primitive-rose-20\": \"#fff8f7\",\n\t\t\t\"primitive-rose-40\": \"#fff0f0\",\n\t\t\t\"primitive-rose-60\": \"#ffe9e9\",\n\t\t\t\"primitive-rose-80\": \"#ffe1e2\",\n\t\t\t\"primitive-rose-100\": \"#ffdadb\",\n\t\t\t\"primitive-rose-150\": \"#ffc6c9\",\n\t\t\t\"primitive-rose-200\": \"#ffb2b7\",\n\t\t\t\"primitive-rose-250\": \"#ff9ea5\",\n\t\t\t\"primitive-rose-300\": \"#ff8792\",\n\t\t\t\"primitive-rose-350\": \"#ff6e7f\",\n\t\t\t\"primitive-rose-400\": \"#ff506b\",\n\t\t\t\"primitive-rose-450\": \"#f13d5d\",\n\t\t\t\"primitive-rose-500\": \"#e02f52\",\n\t\t\t\"primitive-rose-550\": \"#ce2046\",\n\t\t\t\"primitive-rose-600\": \"#bc0b3b\",\n\t\t\t\"primitive-rose-650\": \"#a70032\",\n\t\t\t\"primitive-rose-700\": \"#91002b\",\n\t\t\t\"primitive-rose-750\": \"#7c0023\",\n\t\t\t\"primitive-rose-800\": \"#67001c\",\n\t\t\t\"primitive-shade-16\": \"#191b2428\",\n\t\t\t\"primitive-engross-20\": \"#fbf8ff\",\n\t\t\t\"primitive-engross-40\": \"#f4f2ff\",\n\t\t\t\"primitive-engross-60\": \"#edecff\",\n\t\t\t\"primitive-engross-80\": \"#e6e6ff\",\n\t\t\t\"primitive-engross-100\": \"#dfe0ff\",\n\t\t\t\"primitive-engross-150\": \"#cfd2f7\",\n\t\t\t\"primitive-engross-200\": \"#c1c4e9\",\n\t\t\t\"primitive-engross-250\": \"#b3b6db\",\n\t\t\t\"primitive-engross-300\": \"#a6a9cd\",\n\t\t\t\"primitive-engross-350\": \"#989bbf\",\n\t\t\t\"primitive-engross-400\": \"#8b8eb1\",\n\t\t\t\"primitive-engross-450\": \"#7e81a3\",\n\t\t\t\"primitive-engross-500\": \"#717596\",\n\t\t\t\"primitive-engross-550\": \"#656889\",\n\t\t\t\"primitive-engross-600\": \"#595c7c\",\n\t\t\t\"primitive-engross-650\": \"#4d5070\",\n\t\t\t\"primitive-engross-700\": \"#414563\",\n\t\t\t\"primitive-engross-750\": \"#353957\",\n\t\t\t\"primitive-emerald-20\": \"#e8ffef\",\n\t\t\t\"primitive-emerald-40\": \"#cdffe2\",\n\t\t\t\"primitive-emerald-60\": \"#aeffd5\",\n\t\t\t\"primitive-emerald-80\": \"#86ffc7\",\n\t\t\t\"primitive-emerald-100\": \"#6dfcbe\",\n\t\t\t\"primitive-emerald-150\": \"#5dedb0\",\n\t\t\t\"primitive-emerald-200\": \"#4cdfa3\",\n\t\t\t\"primitive-emerald-250\": \"#39d096\",\n\t\t\t\"primitive-emerald-300\": \"#21c289\",\n\t\t\t\"primitive-emerald-350\": \"#00b47d\",\n\t\t\t\"primitive-emerald-400\": \"#00a572\",\n\t\t\t\"primitive-emerald-450\": \"#009668\",\n\t\t\t\"primitive-emerald-500\": \"#00885e\",\n\t\t\t\"primitive-emerald-550\": \"#007a54\",\n\t\t\t\"primitive-emerald-600\": \"#006c4a\",\n\t\t\t\"primitive-emerald-650\": \"#005f40\",\n\t\t\t\"primitive-emerald-700\": \"#005237\",\n\t\t\t\"primitive-emerald-750\": \"#00452d\",\n\t\t\t\"primitive-emerald-800\": \"#003824\",\n\t\t\t\"primitive-teal-20\": \"#e5fff9\",\n\t\t\t\"primitive-teal-40\": \"#c6fff4\",\n\t\t\t\"primitive-teal-60\": \"#a0ffef\",\n\t\t\t\"primitive-teal-80\": \"#76feea\",\n\t\t\t\"primitive-teal-100\": \"#70f8e5\",\n\t\t\t\"primitive-teal-150\": \"#5fead7\",\n\t\t\t\"primitive-teal-200\": \"#4edbc9\",\n\t\t\t\"primitive-teal-250\": \"#3bcdbb\",\n\t\t\t\"primitive-teal-300\": \"#23bfad\",\n\t\t\t\"primitive-teal-350\": \"#00b1a0\",\n\t\t\t\"primitive-teal-400\": \"#00a393\",\n\t\t\t\"primitive-teal-450\": \"#009486\",\n\t\t\t\"primitive-teal-500\": \"#008679\",\n\t\t\t\"primitive-teal-550\": \"#00786c\",\n\t\t\t\"primitive-teal-600\": \"#006a60\",\n\t\t\t\"primitive-teal-650\": \"#005d54\",\n\t\t\t\"primitive-teal-700\": \"#005048\",\n\t\t\t\"primitive-teal-750\": \"#00443c\",\n\t\t\t\"primitive-teal-800\": \"#003731\",\n\t\t\t\"primitive-amber-20\": \"#fff8f4\",\n\t\t\t\"primitive-amber-40\": \"#fff1e5\",\n\t\t\t\"primitive-amber-60\": \"#ffebd6\",\n\t\t\t\"primitive-amber-80\": \"#ffe4c7\",\n\t\t\t\"primitive-amber-100\": \"#ffddb7\",\n\t\t\t\"primitive-amber-150\": \"#ffcb8d\",\n\t\t\t\"primitive-amber-200\": \"#ffb95d\",\n\t\t\t\"primitive-amber-250\": \"#fda61a\",\n\t\t\t\"primitive-amber-300\": \"#ed9900\",\n\t\t\t\"primitive-amber-350\": \"#db8d00\",\n\t\t\t\"primitive-amber-400\": \"#c98100\",\n\t\t\t\"primitive-amber-450\": \"#b87500\",\n\t\t\t\"primitive-amber-500\": \"#a66a00\",\n\t\t\t\"primitive-amber-550\": \"#955f00\",\n\t\t\t\"primitive-amber-600\": \"#855400\",\n\t\t\t\"primitive-amber-650\": \"#754900\",\n\t\t\t\"primitive-amber-700\": \"#653e00\",\n\t\t\t\"primitive-amber-750\": \"#553400\",\n\t\t\t\"primitive-amber-800\": \"#462a00\",\n\t\t\t\"primitive-engross-800\": \"#2a2e4c\",\n\t\t\t\"primitive-engross-820\": \"#262a47\",\n\t\t\t\"primitive-flow-820\": \"#292c35\",\n\t\t\t\"primitive-flow-840\": \"#252830\",\n\t\t\t\"primitive-red-820\": \"#600008\",\n\t\t\t\"primitive-red-840\": \"#580006\",\n\t\t\t\"primitive-orange-820\": \"#4e1d00\",\n\t\t\t\"primitive-orange-840\": \"#471a00\",\n\t\t\t\"primitive-amber-820\": \"#412600\",\n\t\t\t\"primitive-amber-840\": \"#3b2300\",\n\t\t\t\"primitive-yellow-820\": \"#3a2a00\",\n\t\t\t\"primitive-yellow-840\": \"#342600\",\n\t\t\t\"primitive-lime-820\": \"#1d3200\",\n\t\t\t\"primitive-lime-840\": \"#1a2d00\",\n\t\t\t\"primitive-green-820\": \"#003412\",\n\t\t\t\"primitive-green-840\": \"#002f10\",\n\t\t\t\"primitive-emerald-820\": \"#003321\",\n\t\t\t\"primitive-emerald-840\": \"#002f1e\",\n\t\t\t\"primitive-teal-820\": \"#00332d\",\n\t\t\t\"primitive-teal-840\": \"#002e29\",\n\t\t\t\"primitive-cyan-820\": \"#00313b\",\n\t\t\t\"primitive-cyan-840\": \"#002c35\",\n\t\t\t\"primitive-sky-820\": \"#002f47\",\n\t\t\t\"primitive-sky-840\": \"#002b41\",\n\t\t\t\"primitive-blue-820\": \"#002a61\",\n\t\t\t\"primitive-blue-840\": \"#002659\",\n\t\t\t\"primitive-cerulean-blue-820\": \"#001d83\",\n\t\t\t\"primitive-cerulean-blue-840\": \"#001a78\",\n\t\t\t\"primitive-violet-820\": \"#370086\",\n\t\t\t\"primitive-violet-840\": \"#32007b\",\n\t\t\t\"primitive-purple-820\": \"#440076\",\n\t\t\t\"primitive-purple-840\": \"#3e006c\",\n\t\t\t\"primitive-fuchsia-820\": \"#50005d\",\n\t\t\t\"primitive-fuchsia-840\": \"#490056\",\n\t\t\t\"primitive-pink-820\": \"#5c0034\",\n\t\t\t\"primitive-pink-840\": \"#540030\",\n\t\t\t\"primitive-rose-820\": \"#5f0019\",\n\t\t\t\"primitive-rose-840\": \"#570016\",\n\t\t\t\"primitive-flow-light-alpha-820\": \"#00040fd6\",\n\t\t\t\"primitive-flow-light-alpha-840\": \"#01040ddb\",\n\t\t\t\"primitive-flow-dark-alpha-820\": \"#e2f0f814\",\n\t\t\t\"primitive-flow-dark-alpha-860\": \"#dfe1eb0a\",\n\t\t\t\"primitive-flow-860\": \"#21232c\",\n\t\t\t\"primitive-flow-light-alpha-860\": \"#030511e0\",\n\t\t\t\"primitive-flow-dark-alpha-880\": \"#dfe1eb05\",\n\t\t\t\"primitive-engross-840\": \"#222642\",\n\t\t\t\"primitive-red-860\": \"#500005\",\n\t\t\t\"primitive-orange-860\": \"#411700\",\n\t\t\t\"primitive-amber-860\": \"#351f00\",\n\t\t\t\"primitive-yellow-860\": \"#2f2200\",\n\t\t\t\"primitive-lime-860\": \"#172900\",\n\t\t\t\"primitive-green-860\": \"#002b0e\",\n\t\t\t\"primitive-emerald-860\": \"#002a1a\",\n\t\t\t\"primitive-teal-860\": \"#002924\",\n\t\t\t\"primitive-cyan-860\": \"#002830\",\n\t\t\t\"primitive-sky-860\": \"#00263b\",\n\t\t\t\"primitive-blue-860\": \"#002251\",\n\t\t\t\"primitive-cerulean-blue-860\": \"#00176e\",\n\t\t\t\"primitive-violet-860\": \"#2d0070\",\n\t\t\t\"primitive-purple-860\": \"#380063\",\n\t\t\t\"primitive-fuchsia-860\": \"#43004e\",\n\t\t\t\"primitive-pink-860\": \"#4c002b\",\n\t\t\t\"primitive-rose-860\": \"#4f0013\",\n\t\t\t\"primitive-engross-860\": \"#1e213e\",\n\t\t\t\"primitive-engross-880\": \"#191d3a\",\n\t\t\t\"primitive-engross-900\": \"#151935\",\n\t\t\t\"primitive-immerse-20\": \"#faf8ff\",\n\t\t\t\"primitive-immerse-40\": \"#f3f2ff\",\n\t\t\t\"primitive-immerse-60\": \"#ebedff\",\n\t\t\t\"primitive-immerse-80\": \"#e5e7fc\",\n\t\t\t\"primitive-immerse-100\": \"#dfe1f6\",\n\t\t\t\"primitive-immerse-150\": \"#d1d3e8\",\n\t\t\t\"primitive-immerse-200\": \"#c3c5d9\",\n\t\t\t\"primitive-immerse-250\": \"#b5b8cb\",\n\t\t\t\"primitive-immerse-300\": \"#a8aabe\",\n\t\t\t\"primitive-immerse-350\": \"#9a9db0\",\n\t\t\t\"primitive-immerse-400\": \"#8d90a2\",\n\t\t\t\"primitive-immerse-450\": \"#808395\",\n\t\t\t\"primitive-immerse-500\": \"#737688\",\n\t\t\t\"primitive-immerse-550\": \"#676a7b\",\n\t\t\t\"primitive-immerse-600\": \"#5a5e6f\",\n\t\t\t\"primitive-immerse-650\": \"#4e5262\",\n\t\t\t\"primitive-immerse-700\": \"#434656\",\n\t\t\t\"primitive-immerse-750\": \"#373b4b\",\n\t\t\t\"primitive-immerse-800\": \"#2c303f\",\n\t\t\t\"primitive-immerse-820\": \"#282b3b\",\n\t\t\t\"primitive-immerse-840\": \"#242736\",\n\t\t\t\"primitive-immerse-860\": \"#202332\",\n\t\t\t\"primitive-immerse-880\": \"#1b1f2e\",\n\t\t\t\"primitive-immerse-900\": \"#171b29\",\n\t\t\t\"primitive-flow-880\": \"#1d1f28\",\n\t\t\t\"primitive-flow-900\": \"#191b24\",\n\t\t\t\"primitive-flow-light-alpha-880\": \"#01030ee2\",\n\t\t\t\"primitive-flow-light-alpha-900\": \"#01030de8\",\n\t\t\t\"primitive-flow-dark-alpha-840\": \"#e1f3ec0f\",\n\t\t\t\"primitive-flow-dark-alpha-900\": \"#191b24\",\n\t\t\t\"primitive-red-880\": \"#480004\",\n\t\t\t\"primitive-red-900\": \"#410003\",\n\t\t\t\"primitive-orange-880\": \"#3a1400\",\n\t\t\t\"primitive-orange-900\": \"#341100\",\n\t\t\t\"primitive-amber-880\": \"#301b00\",\n\t\t\t\"primitive-amber-900\": \"#2a1700\",\n\t\t\t\"primitive-yellow-880\": \"#2a1e00\",\n\t\t\t\"primitive-yellow-900\": \"#251a00\",\n\t\t\t\"primitive-lime-880\": \"#142400\",\n\t\t\t\"primitive-lime-900\": \"#112000\",\n\t\t\t\"primitive-green-880\": \"#00260b\",\n\t\t\t\"primitive-green-900\": \"#002109\",\n\t\t\t\"primitive-emerald-880\": \"#002517\",\n\t\t\t\"primitive-emerald-900\": \"#002114\",\n\t\t\t\"primitive-teal-880\": \"#002520\",\n\t\t\t\"primitive-teal-900\": \"#00201c\",\n\t\t\t\"primitive-cyan-880\": \"#00232b\",\n\t\t\t\"primitive-cyan-900\": \"#001f26\",\n\t\t\t\"primitive-sky-880\": \"#002235\",\n\t\t\t\"primitive-sky-900\": \"#001e2f\",\n\t\t\t\"primitive-blue-880\": \"#001e49\",\n\t\t\t\"primitive-blue-900\": \"#001a41\",\n\t\t\t\"primitive-cerulean-blue-880\": \"#001463\",\n\t\t\t\"primitive-cerulean-blue-900\": \"#001159\",\n\t\t\t\"primitive-violet-880\": \"#280066\",\n\t\t\t\"primitive-violet-900\": \"#23005c\",\n\t\t\t\"primitive-purple-880\": \"#320059\",\n\t\t\t\"primitive-purple-900\": \"#2c0050\",\n\t\t\t\"primitive-fuchsia-880\": \"#3c0046\",\n\t\t\t\"primitive-fuchsia-900\": \"#35003f\",\n\t\t\t\"primitive-pink-880\": \"#450026\",\n\t\t\t\"primitive-pink-900\": \"#3e0022\",\n\t\t\t\"primitive-rose-880\": \"#480010\",\n\t\t\t\"primitive-rose-900\": \"#40000e\"\n\t\t}\n\t},\n\t\"scheme\": {\n\t\t\"desktop\": {\n\t\t\t\"semantic-spacing-1\": 1,\n\t\t\t\"semantic-spacing-2\": 2,\n\t\t\t\"semantic-spacing-4\": 4,\n\t\t\t\"semantic-spacing-6\": 6,\n\t\t\t\"semantic-spacing-8\": 8,\n\t\t\t\"semantic-spacing-10\": 10,\n\t\t\t\"semantic-spacing-12\": 12,\n\t\t\t\"semantic-spacing-16\": 16,\n\t\t\t\"semantic-spacing-20\": 20,\n\t\t\t\"semantic-spacing-24\": 24,\n\t\t\t\"semantic-spacing-32\": 32,\n\t\t\t\"semantic-spacing-40\": 40,\n\t\t\t\"semantic-spacing-48\": 48,\n\t\t\t\"semantic-spacing-56\": 56,\n\t\t\t\"semantic-radius-4\": 4,\n\t\t\t\"semantic-radius-8\": 8,\n\t\t\t\"semantic-radius-10\": 10,\n\t\t\t\"semantic-radius-16\": 16,\n\t\t\t\"semantic-radius-24\": 24,\n\t\t\t\"semantic-radius-max\": 9999,\n\t\t\t\"semantic-stroke-weight-1\": 1,\n\t\t\t\"semantic-stroke-weight-2\": 2,\n\t\t\t\"semantic-stroke-weight-4\": 4,\n\t\t\t\"semantic-stroke-weight-6\": 6,\n\t\t\t\"semantic-opacity-0\": 0,\n\t\t\t\"semantic-opacity-5\": 5,\n\t\t\t\"semantic-opacity-8\": 8,\n\t\t\t\"semantic-opacity-12\": 12,\n\t\t\t\"semantic-opacity-16\": 16,\n\t\t\t\"semantic-opacity-23\": 23,\n\t\t\t\"semantic-opacity-29\": 29,\n\t\t\t\"semantic-opacity-36\": 36,\n\t\t\t\"semantic-opacity-44\": 44,\n\t\t\t\"semantic-opacity-54\": 54,\n\t\t\t\"semantic-opacity-63\": 63,\n\t\t\t\"semantic-opacity-76\": 76,\n\t\t\t\"semantic-opacity-100\": 100,\n\t\t\t\"semantic-radius-6\": 6,\n\t\t\t\"semantic-spacing-0\": 0,\n\t\t\t\"semantic-radius-2\": 2,\n\t\t\t\"semantic-opacity-91\": 91,\n\t\t\t\"semantic-breakpoint-min\": 1200,\n\t\t\t\"semantic-breakpoint-max\": 2560,\n\t\t\t\"semantic-margin-lg\": 28,\n\t\t\t\"semantic-margin-md\": 24,\n\t\t\t\"semantic-radius-12\": 12,\n\t\t\t\"semantic-radius-0\": 0,\n\t\t\t\"semantic-margin-sm\": 20,\n\t\t\t\"semantic-margin-xl\": 32,\n\t\t\t\"semantic-spacing-64\": 64,\n\t\t\t\"semantic-spacing-72\": 72,\n\t\t\t\"semantic-margin-2xl\": 40,\n\t\t\t\"primitive-unit-16\": 16,\n\t\t\t\"primitive-unit-20\": 20,\n\t\t\t\"primitive-unit-12\": 12,\n\t\t\t\"primitive-unit-72\": 72,\n\t\t\t\"primitive-unit-6\": 6,\n\t\t\t\"primitive-unit-144\": 144,\n\t\t\t\"primitive-unit-112\": 112,\n\t\t\t\"primitive-unit-96\": 96,\n\t\t\t\"primitive-unit-128\": 128,\n\t\t\t\"primitive-unit-2\": 2,\n\t\t\t\"primitive-unit-4\": 4,\n\t\t\t\"primitive-unit-80\": 80,\n\t\t\t\"primitive-unit-64\": 64,\n\t\t\t\"primitive-unit-56\": 56,\n\t\t\t\"primitive-unit-48\": 48,\n\t\t\t\"primitive-unit-24\": 24,\n\t\t\t\"primitive-unit-40\": 40,\n\t\t\t\"primitive-unit-10\": 10,\n\t\t\t\"primitive-unit-32\": 32,\n\t\t\t\"primitive-unit-1\": 1,\n\t\t\t\"primitive-unit-8\": 8,\n\t\t\t\"primitive-unit-28\": 28,\n\t\t\t\"primitive-unit-0\": 0,\n\t\t\t\"semantic-spacing-80\": 80,\n\t\t\t\"semantic-spacing-96\": 96,\n\t\t\t\"semantic-spacing-112\": 112,\n\t\t\t\"semantic-spacing-128\": 128,\n\t\t\t\"semantic-spacing-144\": 144,\n\t\t\t\"semantic-margin-3xl\": 48,\n\t\t\t\"semantic-margin-xs\": 16,\n\t\t\t\"primitive-unit-3\": 3,\n\t\t\t\"semantic-spacing-3\": 3,\n\t\t\t\"semantic-stroke-weight-3\": 3,\n\t\t\t\"semantic-margin-2xs\": 12,\n\t\t\t\"semantic-spacing-28\": 28,\n\t\t\t\"semantic-position-24\": 24,\n\t\t\t\"semantic-position-16\": 16,\n\t\t\t\"semantic-position-8\": 8,\n\t\t\t\"semantic-position-4\": 4,\n\t\t\t\"semantic-position-0\": 0,\n\t\t\t\"semantic-position-6\": 6,\n\t\t\t\"semantic-position-2\": 2,\n\t\t\t\"semantic-position-1\": 1,\n\t\t\t\"semantic-position-3\": 3,\n\t\t\t\"semantic-position-12\": 12,\n\t\t\t\"primitive-unit-5\": 5,\n\t\t\t\"semantic-stroke-weight-5\": 5,\n\t\t\t\"semantic-margin-4xl\": 56,\n\t\t\t\"semantic-margin-5xl\": 64,\n\t\t\t\"semantic-margin-6xl\": 72\n\t\t},\n\t\t\"tablet\": {\n\t\t\t\"semantic-spacing-1\": 1,\n\t\t\t\"semantic-spacing-2\": 2,\n\t\t\t\"semantic-spacing-4\": 4,\n\t\t\t\"semantic-spacing-6\": 6,\n\t\t\t\"semantic-spacing-8\": 8,\n\t\t\t\"semantic-spacing-10\": 10,\n\t\t\t\"semantic-spacing-12\": 12,\n\t\t\t\"semantic-spacing-16\": 16,\n\t\t\t\"semantic-spacing-20\": 20,\n\t\t\t\"semantic-spacing-24\": 24,\n\t\t\t\"semantic-spacing-32\": 32,\n\t\t\t\"semantic-spacing-40\": 40,\n\t\t\t\"semantic-spacing-48\": 48,\n\t\t\t\"semantic-spacing-56\": 56,\n\t\t\t\"semantic-radius-4\": 4,\n\t\t\t\"semantic-radius-8\": 8,\n\t\t\t\"semantic-radius-10\": 10,\n\t\t\t\"semantic-radius-16\": 16,\n\t\t\t\"semantic-radius-24\": 24,\n\t\t\t\"semantic-radius-max\": 9999,\n\t\t\t\"semantic-stroke-weight-1\": 1,\n\t\t\t\"semantic-stroke-weight-2\": 2,\n\t\t\t\"semantic-stroke-weight-4\": 4,\n\t\t\t\"semantic-stroke-weight-6\": 6,\n\t\t\t\"semantic-opacity-0\": 0,\n\t\t\t\"semantic-opacity-5\": 5,\n\t\t\t\"semantic-opacity-8\": 8,\n\t\t\t\"semantic-opacity-12\": 12,\n\t\t\t\"semantic-opacity-16\": 16,\n\t\t\t\"semantic-opacity-23\": 23,\n\t\t\t\"semantic-opacity-29\": 29,\n\t\t\t\"semantic-opacity-36\": 36,\n\t\t\t\"semantic-opacity-44\": 44,\n\t\t\t\"semantic-opacity-54\": 54,\n\t\t\t\"semantic-opacity-63\": 63,\n\t\t\t\"semantic-opacity-76\": 76,\n\t\t\t\"semantic-opacity-100\": 100,\n\t\t\t\"semantic-radius-6\": 6,\n\t\t\t\"semantic-spacing-0\": 0,\n\t\t\t\"semantic-radius-2\": 2,\n\t\t\t\"semantic-opacity-91\": 91,\n\t\t\t\"semantic-breakpoint-min\": 768,\n\t\t\t\"semantic-breakpoint-max\": 1199,\n\t\t\t\"semantic-margin-lg\": 24,\n\t\t\t\"semantic-margin-md\": 20,\n\t\t\t\"semantic-radius-12\": 12,\n\t\t\t\"semantic-radius-0\": 0,\n\t\t\t\"semantic-margin-sm\": 16,\n\t\t\t\"semantic-margin-xl\": 28,\n\t\t\t\"semantic-spacing-64\": 64,\n\t\t\t\"semantic-spacing-72\": 72,\n\t\t\t\"semantic-margin-2xl\": 32,\n\t\t\t\"primitive-unit-16\": 16,\n\t\t\t\"primitive-unit-20\": 20,\n\t\t\t\"primitive-unit-12\": 12,\n\t\t\t\"primitive-unit-72\": 72,\n\t\t\t\"primitive-unit-6\": 6,\n\t\t\t\"primitive-unit-144\": 144,\n\t\t\t\"primitive-unit-112\": 112,\n\t\t\t\"primitive-unit-96\": 96,\n\t\t\t\"primitive-unit-128\": 128,\n\t\t\t\"primitive-unit-2\": 2,\n\t\t\t\"primitive-unit-4\": 4,\n\t\t\t\"primitive-unit-80\": 80,\n\t\t\t\"primitive-unit-64\": 64,\n\t\t\t\"primitive-unit-56\": 56,\n\t\t\t\"primitive-unit-48\": 48,\n\t\t\t\"primitive-unit-24\": 24,\n\t\t\t\"primitive-unit-40\": 40,\n\t\t\t\"primitive-unit-10\": 10,\n\t\t\t\"primitive-unit-32\": 32,\n\t\t\t\"primitive-unit-1\": 1,\n\t\t\t\"primitive-unit-8\": 8,\n\t\t\t\"primitive-unit-28\": 28,\n\t\t\t\"primitive-unit-0\": 0,\n\t\t\t\"semantic-spacing-80\": 80,\n\t\t\t\"semantic-spacing-96\": 96,\n\t\t\t\"semantic-spacing-112\": 112,\n\t\t\t\"semantic-spacing-128\": 128,\n\t\t\t\"semantic-spacing-144\": 144,\n\t\t\t\"semantic-margin-3xl\": 40,\n\t\t\t\"semantic-margin-xs\": 12,\n\t\t\t\"primitive-unit-3\": 3,\n\t\t\t\"semantic-spacing-3\": 3,\n\t\t\t\"semantic-stroke-weight-3\": 3,\n\t\t\t\"semantic-margin-2xs\": 10,\n\t\t\t\"semantic-spacing-28\": 28,\n\t\t\t\"semantic-position-24\": 24,\n\t\t\t\"semantic-position-16\": 16,\n\t\t\t\"semantic-position-8\": 8,\n\t\t\t\"semantic-position-4\": 4,\n\t\t\t\"semantic-position-0\": 0,\n\t\t\t\"semantic-position-6\": 6,\n\t\t\t\"semantic-position-2\": 2,\n\t\t\t\"semantic-position-1\": 1,\n\t\t\t\"semantic-position-3\": 3,\n\t\t\t\"semantic-position-12\": 12,\n\t\t\t\"primitive-unit-5\": 5,\n\t\t\t\"semantic-stroke-weight-5\": 5,\n\t\t\t\"semantic-margin-4xl\": 48,\n\t\t\t\"semantic-margin-5xl\": 56,\n\t\t\t\"semantic-margin-6xl\": 64\n\t\t},\n\t\t\"mobile\": {\n\t\t\t\"semantic-spacing-1\": 1,\n\t\t\t\"semantic-spacing-2\": 2,\n\t\t\t\"semantic-spacing-4\": 4,\n\t\t\t\"semantic-spacing-6\": 6,\n\t\t\t\"semantic-spacing-8\": 8,\n\t\t\t\"semantic-spacing-10\": 10,\n\t\t\t\"semantic-spacing-12\": 12,\n\t\t\t\"semantic-spacing-16\": 16,\n\t\t\t\"semantic-spacing-20\": 20,\n\t\t\t\"semantic-spacing-24\": 24,\n\t\t\t\"semantic-spacing-32\": 32,\n\t\t\t\"semantic-spacing-40\": 40,\n\t\t\t\"semantic-spacing-48\": 48,\n\t\t\t\"semantic-spacing-56\": 56,\n\t\t\t\"semantic-radius-4\": 4,\n\t\t\t\"semantic-radius-8\": 8,\n\t\t\t\"semantic-radius-10\": 10,\n\t\t\t\"semantic-radius-16\": 16,\n\t\t\t\"semantic-radius-24\": 24,\n\t\t\t\"semantic-radius-max\": 9999,\n\t\t\t\"semantic-stroke-weight-1\": 1,\n\t\t\t\"semantic-stroke-weight-2\": 2,\n\t\t\t\"semantic-stroke-weight-4\": 4,\n\t\t\t\"semantic-stroke-weight-6\": 6,\n\t\t\t\"semantic-opacity-0\": 0,\n\t\t\t\"semantic-opacity-5\": 5,\n\t\t\t\"semantic-opacity-8\": 8,\n\t\t\t\"semantic-opacity-12\": 12,\n\t\t\t\"semantic-opacity-16\": 16,\n\t\t\t\"semantic-opacity-23\": 23,\n\t\t\t\"semantic-opacity-29\": 29,\n\t\t\t\"semantic-opacity-36\": 36,\n\t\t\t\"semantic-opacity-44\": 44,\n\t\t\t\"semantic-opacity-54\": 54,\n\t\t\t\"semantic-opacity-63\": 63,\n\t\t\t\"semantic-opacity-76\": 76,\n\t\t\t\"semantic-opacity-100\": 100,\n\t\t\t\"semantic-radius-6\": 6,\n\t\t\t\"semantic-spacing-0\": 0,\n\t\t\t\"semantic-radius-2\": 2,\n\t\t\t\"semantic-opacity-91\": 91,\n\t\t\t\"semantic-breakpoint-min\": 320,\n\t\t\t\"semantic-breakpoint-max\": 767,\n\t\t\t\"semantic-margin-lg\": 20,\n\t\t\t\"semantic-margin-md\": 16,\n\t\t\t\"semantic-radius-12\": 12,\n\t\t\t\"semantic-radius-0\": 0,\n\t\t\t\"semantic-margin-sm\": 12,\n\t\t\t\"semantic-margin-xl\": 24,\n\t\t\t\"semantic-spacing-64\": 64,\n\t\t\t\"semantic-spacing-72\": 72,\n\t\t\t\"semantic-margin-2xl\": 28,\n\t\t\t\"primitive-unit-16\": 16,\n\t\t\t\"primitive-unit-20\": 20,\n\t\t\t\"primitive-unit-12\": 12,\n\t\t\t\"primitive-unit-72\": 72,\n\t\t\t\"primitive-unit-6\": 6,\n\t\t\t\"primitive-unit-144\": 144,\n\t\t\t\"primitive-unit-112\": 112,\n\t\t\t\"primitive-unit-96\": 96,\n\t\t\t\"primitive-unit-128\": 128,\n\t\t\t\"primitive-unit-2\": 2,\n\t\t\t\"primitive-unit-4\": 4,\n\t\t\t\"primitive-unit-80\": 80,\n\t\t\t\"primitive-unit-64\": 64,\n\t\t\t\"primitive-unit-56\": 56,\n\t\t\t\"primitive-unit-48\": 48,\n\t\t\t\"primitive-unit-24\": 24,\n\t\t\t\"primitive-unit-40\": 40,\n\t\t\t\"primitive-unit-10\": 10,\n\t\t\t\"primitive-unit-32\": 32,\n\t\t\t\"primitive-unit-1\": 1,\n\t\t\t\"primitive-unit-8\": 8,\n\t\t\t\"primitive-unit-28\": 28,\n\t\t\t\"primitive-unit-0\": 0,\n\t\t\t\"semantic-spacing-80\": 80,\n\t\t\t\"semantic-spacing-96\": 96,\n\t\t\t\"semantic-spacing-112\": 112,\n\t\t\t\"semantic-spacing-128\": 128,\n\t\t\t\"semantic-spacing-144\": 144,\n\t\t\t\"semantic-margin-3xl\": 32,\n\t\t\t\"semantic-margin-xs\": 10,\n\t\t\t\"primitive-unit-3\": 3,\n\t\t\t\"semantic-spacing-3\": 3,\n\t\t\t\"semantic-stroke-weight-3\": 3,\n\t\t\t\"semantic-margin-2xs\": 8,\n\t\t\t\"semantic-spacing-28\": 28,\n\t\t\t\"semantic-position-24\": 24,\n\t\t\t\"semantic-position-16\": 16,\n\t\t\t\"semantic-position-8\": 8,\n\t\t\t\"semantic-position-4\": 4,\n\t\t\t\"semantic-position-0\": 0,\n\t\t\t\"semantic-position-6\": 6,\n\t\t\t\"semantic-position-2\": 2,\n\t\t\t\"semantic-position-1\": 1,\n\t\t\t\"semantic-position-3\": 3,\n\t\t\t\"semantic-position-12\": 12,\n\t\t\t\"primitive-unit-5\": 5,\n\t\t\t\"semantic-stroke-weight-5\": 5,\n\t\t\t\"semantic-margin-4xl\": 40,\n\t\t\t\"semantic-margin-5xl\": 48,\n\t\t\t\"semantic-margin-6xl\": 56\n\t\t}\n\t},\n\t\"color-semantic\": {\n\t\t\"light\": {\n\t\t\t\"semantic-accent-alpha-assistive\": \"#3b5aef89\",\n\t\t\t\"semantic-object-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-subtle\": \"#0207353a\",\n\t\t\t\"semantic-object-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-accent-bold\": \"#0031c5\",\n\t\t\t\"semantic-accent-normal\": \"#2a4de2\",\n\t\t\t\"semantic-object-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-bold\": \"#444650\",\n\t\t\t\"semantic-object-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-surface-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-interaction-bold\": \"#191b24\",\n\t\t\t\"semantic-interaction-normal\": \"#50525c\",\n\t\t\t\"semantic-interaction-inverse-focus\": \"#4a68fc\",\n\t\t\t\"semantic-stroke-neutral\": \"#9c9da8\",\n\t\t\t\"semantic-stroke-alternative\": \"#b7b8c3\",\n\t\t\t\"semantic-stroke-assistive\": \"#d3d4df\",\n\t\t\t\"semantic-fill-boldest\": \"#191b24\",\n\t\t\t\"semantic-fill-bold\": \"#444650\",\n\t\t\t\"semantic-fill-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-fill-alternative\": \"#00031e70\",\n\t\t\t\"semantic-fill-assistive\": \"#01042656\",\n\t\t\t\"semantic-system-white\": \"#ffffff\",\n\t\t\t\"semantic-system-black\": \"#000000\",\n\t\t\t\"semantic-object-static-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-static-bold\": \"#444650\",\n\t\t\t\"semantic-object-static-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-static-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-static-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-static-subtle\": \"#0207353a\",\n\t\t\t\"semantic-object-static-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-static-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-object-static-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-static-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-static-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-static-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-interaction-inverse-bold\": \"#ffffff\",\n\t\t\t\"semantic-interaction-inverse-normal\": \"#a9aab6\",\n\t\t\t\"semantic-interaction-focus\": \"#7087ff\",\n\t\t\t\"semantic-stroke-normal\": \"#757681\",\n\t\t\t\"semantic-stroke-bold\": \"#50525c\",\n\t\t\t\"semantic-fill-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-fill-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-fill-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-fill-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-fill-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-accent-neutral\": \"#4a68fc\",\n\t\t\t\"semantic-accent-alpha-subtle\": \"#3b5aef5b\",\n\t\t\t\"semantic-fill-subtle\": \"#0207353a\",\n\t\t\t\"semantic-fill-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-stroke-alpha-bold\": \"#010413af\",\n\t\t\t\"semantic-stroke-alpha-normal\": \"#04051a8c\",\n\t\t\t\"semantic-stroke-alpha-neutral\": \"#01042263\",\n\t\t\t\"semantic-stroke-alpha-alternative\": \"#07093149\",\n\t\t\t\"semantic-stroke-alpha-assistive\": \"#0a104b2d\",\n\t\t\t\"semantic-accent-inverse-bold\": \"#bac3ff\",\n\t\t\t\"semantic-accent-inverse-normal\": \"#8397ff\",\n\t\t\t\"semantic-accent-inverse-neutral\": \"#5d78ff\",\n\t\t\t\"semantic-accent-alternative\": \"#7087ff\",\n\t\t\t\"semantic-accent-inverse-alternative\": \"#3b5aef\",\n\t\t\t\"semantic-accent-alpha-subtler\": \"#3b5aef28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtle\": \"#7087ff5b\",\n\t\t\t\"semantic-accent-alpha-inverse-subtler\": \"#7087ff28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtlest\": \"#7087ff0c\",\n\t\t\t\"semantic-stroke-subtle\": \"#e1e2ee\",\n\t\t\t\"semantic-stroke-alpha-subtle\": \"#040b701e\",\n\t\t\t\"semantic-stroke-inverse-bold\": \"#a9aab6\",\n\t\t\t\"semantic-stroke-inverse-normal\": \"#81838e\",\n\t\t\t\"semantic-stroke-inverse-neutral\": \"#5c5e68\",\n\t\t\t\"semantic-stroke-inverse-alternative\": \"#444650\",\n\t\t\t\"semantic-stroke-inverse-assistive\": \"#393b44\",\n\t\t\t\"semantic-stroke-inverse-subtle\": \"#2e3039\",\n\t\t\t\"semantic-stroke-alpha-inverse-bold\": \"#f0f0feaa\",\n\t\t\t\"semantic-stroke-alpha-inverse-normal\": \"#edeffc7c\",\n\t\t\t\"semantic-stroke-alpha-inverse-neutral\": \"#ebedf851\",\n\t\t\t\"semantic-stroke-alpha-inverse-alternative\": \"#e4e6f535\",\n\t\t\t\"semantic-stroke-alpha-inverse-assistive\": \"#eff1f926\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtle\": \"#e9ecf519\",\n\t\t\t\"semantic-theme-red-bold\": \"#930012\",\n\t\t\t\"semantic-theme-red-normal\": \"#ba1a22\",\n\t\t\t\"semantic-theme-red-neutral\": \"#dd3737\",\n\t\t\t\"semantic-theme-red-alternative\": \"#ff5450\",\n\t\t\t\"semantic-accent-assistive\": \"#95a6ff\",\n\t\t\t\"semantic-accent-inverse-assistive\": \"#163ed6\",\n\t\t\t\"semantic-accent-alpha-subtlest\": \"#3b5aef0c\",\n\t\t\t\"semantic-surface-inverse-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-inverse-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-inverse-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-inverse-deepest\": \"#252830\",\n\t\t\t\"semantic-curtain-static-bright\": \"#ffffff3a\",\n\t\t\t\"semantic-curtain-static-dim\": \"#00000070\",\n\t\t\t\"semantic-curtain-static-dimmer\": \"#000000a0\",\n\t\t\t\"semantic-fill-subtler\": \"#0e0e8519\",\n\t\t\t\"semantic-fill-inverse-subtler\": \"#e2f0f814\",\n\t\t\t\"semantic-fill-subtlest\": \"#5614ff07\",\n\t\t\t\"semantic-fill-inverse-subtlest\": \"#dfe1eb05\",\n\t\t\t\"semantic-theme-red-assistive\": \"#ff8981\",\n\t\t\t\"semantic-theme-red-subtle\": \"#ffb3ad\",\n\t\t\t\"semantic-theme-red-subtler\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-positive-alpha-subtle\": \"#007b355b\",\n\t\t\t\"semantic-feedback-positive-alpha-assistive\": \"#007b3589\",\n\t\t\t\"semantic-feedback-positive-normal\": \"#006e2f\",\n\t\t\t\"semantic-feedback-positive-alpha-subtler\": \"#007b3528\",\n\t\t\t\"semantic-feedback-positive-bold\": \"#005321\",\n\t\t\t\"semantic-accent-subtle\": \"#bac3ff\",\n\t\t\t\"semantic-accent-inverse-subtle\": \"#0031c5\",\n\t\t\t\"semantic-interaction-assistive\": \"#8f909b\",\n\t\t\t\"semantic-interaction-inverse-assistive\": \"#686a74\",\n\t\t\t\"semantic-feedback-positive-inverse-bold\": \"#4ae176\",\n\t\t\t\"semantic-feedback-positive-inverse-normal\": \"#00b652\",\n\t\t\t\"semantic-feedback-positive-inverse-neutral\": \"#009843\",\n\t\t\t\"semantic-feedback-positive-inverse-alternative\": \"#007b35\",\n\t\t\t\"semantic-feedback-positive-inverse-assistive\": \"#006028\",\n\t\t\t\"semantic-feedback-positive-inverse-subtle\": \"#005321\",\n\t\t\t\"semantic-feedback-positive-inverse-subtler\": \"#003412\",\n\t\t\t\"semantic-surface-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-inverse-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-shallowest\": \"#393b44\",\n\t\t\t\"semantic-accent-subtler\": \"#dee1ff\",\n\t\t\t\"semantic-accent-bolder\": \"#001d83\",\n\t\t\t\"semantic-accent-inverse-bolder\": \"#e5e6ff\",\n\t\t\t\"semantic-accent-inverse-subtler\": \"#00208d\",\n\t\t\t\"semantic-theme-red-alpha-assistive\": \"#cb292d89\",\n\t\t\t\"semantic-theme-red-alpha-subtle\": \"#cb292d5b\",\n\t\t\t\"semantic-theme-red-alpha-subtler\": \"#cb292d28\",\n\t\t\t\"semantic-theme-orange-bold\": \"#783100\",\n\t\t\t\"semantic-theme-orange-normal\": \"#9e4300\",\n\t\t\t\"semantic-theme-orange-neutral\": \"#c55500\",\n\t\t\t\"semantic-theme-orange-alternative\": \"#ec690a\",\n\t\t\t\"semantic-theme-orange-assistive\": \"#ff8d4c\",\n\t\t\t\"semantic-theme-orange-subtle\": \"#ffb691\",\n\t\t\t\"semantic-theme-orange-subtler\": \"#ffe2d6\",\n\t\t\t\"semantic-theme-orange-alpha-assistive\": \"#b14c0089\",\n\t\t\t\"semantic-theme-orange-alpha-subtle\": \"#b14c005b\",\n\t\t\t\"semantic-theme-orange-alpha-subtler\": \"#b14c0028\",\n\t\t\t\"semantic-theme-amber-bold\": \"#653e00\",\n\t\t\t\"semantic-theme-amber-normal\": \"#855400\",\n\t\t\t\"semantic-theme-amber-neutral\": \"#a66a00\",\n\t\t\t\"semantic-theme-amber-alternative\": \"#c98100\",\n\t\t\t\"semantic-theme-amber-assistive\": \"#ed9900\",\n\t\t\t\"semantic-theme-amber-subtle\": \"#ffb95d\",\n\t\t\t\"semantic-theme-amber-subtler\": \"#ffe4c7\",\n\t\t\t\"semantic-theme-amber-alpha-assistive\": \"#955f0089\",\n\t\t\t\"semantic-theme-amber-alpha-subtle\": \"#955f005b\",\n\t\t\t\"semantic-theme-amber-alpha-subtler\": \"#955f0028\",\n\t\t\t\"semantic-theme-yellow-bold\": \"#5b4300\",\n\t\t\t\"semantic-theme-yellow-normal\": \"#785a00\",\n\t\t\t\"semantic-theme-yellow-neutral\": \"#967100\",\n\t\t\t\"semantic-theme-yellow-alternative\": \"#b68a00\",\n\t\t\t\"semantic-theme-yellow-assistive\": \"#d7a300\",\n\t\t\t\"semantic-theme-yellow-subtle\": \"#f7be20\",\n\t\t\t\"semantic-theme-yellow-subtler\": \"#ffe5b2\",\n\t\t\t\"semantic-theme-yellow-alpha-assistive\": \"#87650089\",\n\t\t\t\"semantic-theme-yellow-alpha-subtle\": \"#8765005b\",\n\t\t\t\"semantic-theme-yellow-alpha-subtler\": \"#87650028\",\n\t\t\t\"semantic-theme-lime-bold\": \"#304f00\",\n\t\t\t\"semantic-theme-lime-normal\": \"#426900\",\n\t\t\t\"semantic-theme-lime-neutral\": \"#548400\",\n\t\t\t\"semantic-theme-lime-alternative\": \"#67a000\",\n\t\t\t\"semantic-theme-lime-assistive\": \"#7abd00\",\n\t\t\t\"semantic-theme-lime-subtle\": \"#92da26\",\n\t\t\t\"semantic-theme-lime-subtler\": \"#b2fe4a\",\n\t\t\t\"semantic-theme-lime-alpha-assistive\": \"#4b760089\",\n\t\t\t\"semantic-theme-lime-alpha-subtle\": \"#4b76005b\",\n\t\t\t\"semantic-theme-lime-alpha-subtler\": \"#4b760028\",\n\t\t\t\"semantic-theme-green-bold\": \"#005321\",\n\t\t\t\"semantic-theme-green-normal\": \"#006e2f\",\n\t\t\t\"semantic-theme-green-neutral\": \"#008a3c\",\n\t\t\t\"semantic-theme-green-alternative\": \"#00a74b\",\n\t\t\t\"semantic-theme-green-assistive\": \"#21c45d\",\n\t\t\t\"semantic-theme-green-subtle\": \"#4ae176\",\n\t\t\t\"semantic-theme-green-subtler\": \"#95ffa6\",\n\t\t\t\"semantic-theme-green-alpha-assistive\": \"#007b3589\",\n\t\t\t\"semantic-theme-green-alpha-subtle\": \"#007b355b\",\n\t\t\t\"semantic-theme-green-alpha-subtler\": \"#007b3528\",\n\t\t\t\"semantic-theme-emerald-bold\": \"#005237\",\n\t\t\t\"semantic-theme-emerald-normal\": \"#006c4a\",\n\t\t\t\"semantic-theme-emerald-neutral\": \"#00885e\",\n\t\t\t\"semantic-theme-emerald-alternative\": \"#00a572\",\n\t\t\t\"semantic-theme-emerald-assistive\": \"#21c289\",\n\t\t\t\"semantic-theme-emerald-subtle\": \"#4cdfa3\",\n\t\t\t\"semantic-theme-emerald-subtler\": \"#86ffc7\",\n\t\t\t\"semantic-theme-emerald-alpha-assistive\": \"#007a5489\",\n\t\t\t\"semantic-theme-emerald-alpha-subtle\": \"#007a545b\",\n\t\t\t\"semantic-theme-emerald-alpha-subtler\": \"#007a5428\",\n\t\t\t\"semantic-theme-teal-bold\": \"#005048\",\n\t\t\t\"semantic-theme-teal-normal\": \"#006a60\",\n\t\t\t\"semantic-theme-teal-neutral\": \"#008679\",\n\t\t\t\"semantic-theme-teal-alternative\": \"#00a393\",\n\t\t\t\"semantic-theme-teal-assistive\": \"#23bfad\",\n\t\t\t\"semantic-theme-teal-subtle\": \"#4edbc9\",\n\t\t\t\"semantic-theme-teal-subtler\": \"#76feea\",\n\t\t\t\"semantic-theme-teal-alpha-assistive\": \"#00786c89\",\n\t\t\t\"semantic-theme-teal-alpha-subtle\": \"#00786c5b\",\n\t\t\t\"semantic-theme-teal-alpha-subtler\": \"#00786c28\",\n\t\t\t\"semantic-theme-cyan-bold\": \"#004e5c\",\n\t\t\t\"semantic-theme-cyan-normal\": \"#00687a\",\n\t\t\t\"semantic-theme-cyan-neutral\": \"#008399\",\n\t\t\t\"semantic-theme-cyan-alternative\": \"#009eb9\",\n\t\t\t\"semantic-theme-cyan-assistive\": \"#13bbda\",\n\t\t\t\"semantic-theme-cyan-subtle\": \"#49d7f6\",\n\t\t\t\"semantic-theme-cyan-subtler\": \"#bef0ff\",\n\t\t\t\"semantic-theme-cyan-alpha-assistive\": \"#00758989\",\n\t\t\t\"semantic-theme-cyan-alpha-subtle\": \"#0075895b\",\n\t\t\t\"semantic-theme-cyan-alpha-subtler\": \"#00758928\",\n\t\t\t\"semantic-theme-sky-bold\": \"#004c6e\",\n\t\t\t\"semantic-theme-sky-normal\": \"#006491\",\n\t\t\t\"semantic-theme-sky-neutral\": \"#007fb5\",\n\t\t\t\"semantic-theme-sky-alternative\": \"#009adb\",\n\t\t\t\"semantic-theme-sky-assistive\": \"#35b5fb\",\n\t\t\t\"semantic-theme-sky-subtle\": \"#8aceff\",\n\t\t\t\"semantic-theme-sky-subtler\": \"#d4ebff\",\n\t\t\t\"semantic-theme-sky-alpha-assistive\": \"#0071a389\",\n\t\t\t\"semantic-theme-sky-alpha-subtle\": \"#0071a35b\",\n\t\t\t\"semantic-theme-sky-alpha-subtler\": \"#0071a328\",\n\t\t\t\"semantic-theme-blue-bold\": \"#004494\",\n\t\t\t\"semantic-theme-blue-normal\": \"#005ac1\",\n\t\t\t\"semantic-theme-blue-neutral\": \"#2473e6\",\n\t\t\t\"semantic-theme-blue-alternative\": \"#4c8eff\",\n\t\t\t\"semantic-theme-blue-assistive\": \"#80aaff\",\n\t\t\t\"semantic-theme-blue-subtle\": \"#adc6ff\",\n\t\t\t\"semantic-theme-blue-subtler\": \"#e0e8ff\",\n\t\t\t\"semantic-theme-blue-alpha-assistive\": \"#0166d889\",\n\t\t\t\"semantic-theme-blue-alpha-subtle\": \"#0166d85b\",\n\t\t\t\"semantic-theme-blue-alpha-subtler\": \"#0166d828\",\n\t\t\t\"semantic-theme-violet-bold\": \"#5517bd\",\n\t\t\t\"semantic-theme-violet-normal\": \"#6d3bd6\",\n\t\t\t\"semantic-theme-violet-neutral\": \"#8758f1\",\n\t\t\t\"semantic-theme-violet-alternative\": \"#a078ff\",\n\t\t\t\"semantic-theme-violet-assistive\": \"#b89bff\",\n\t\t\t\"semantic-theme-violet-subtle\": \"#d0bcff\",\n\t\t\t\"semantic-theme-violet-subtler\": \"#eee4ff\",\n\t\t\t\"semantic-theme-violet-alpha-assistive\": \"#7a4ae389\",\n\t\t\t\"semantic-theme-violet-alpha-subtle\": \"#7a4ae35b\",\n\t\t\t\"semantic-theme-violet-alpha-subtler\": \"#7a4ae328\",\n\t\t\t\"semantic-theme-purple-bold\": \"#6900b2\",\n\t\t\t\"semantic-theme-purple-normal\": \"#842ad2\",\n\t\t\t\"semantic-theme-purple-neutral\": \"#9f4aed\",\n\t\t\t\"semantic-theme-purple-alternative\": \"#b76cff\",\n\t\t\t\"semantic-theme-purple-assistive\": \"#cb93ff\",\n\t\t\t\"semantic-theme-purple-subtle\": \"#deb7ff\",\n\t\t\t\"semantic-theme-purple-subtler\": \"#f4e2ff\",\n\t\t\t\"semantic-theme-purple-alpha-assistive\": \"#923be089\",\n\t\t\t\"semantic-theme-purple-alpha-subtle\": \"#923be05b\",\n\t\t\t\"semantic-theme-purple-alpha-subtler\": \"#923be028\",\n\t\t\t\"semantic-theme-fuchsia-bold\": \"#7c008f\",\n\t\t\t\"semantic-theme-fuchsia-normal\": \"#a200bb\",\n\t\t\t\"semantic-theme-fuchsia-neutral\": \"#c22cdb\",\n\t\t\t\"semantic-theme-fuchsia-alternative\": \"#e14ef8\",\n\t\t\t\"semantic-theme-fuchsia-assistive\": \"#f17eff\",\n\t\t\t\"semantic-theme-fuchsia-subtle\": \"#faabff\",\n\t\t\t\"semantic-theme-fuchsia-subtler\": \"#ffdefc\",\n\t\t\t\"semantic-theme-fuchsia-alpha-assistive\": \"#b315cd89\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtle\": \"#b315cd5b\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtler\": \"#b315cd28\",\n\t\t\t\"semantic-theme-pink-bold\": \"#8c0053\",\n\t\t\t\"semantic-theme-pink-normal\": \"#b4146d\",\n\t\t\t\"semantic-theme-pink-neutral\": \"#d53587\",\n\t\t\t\"semantic-theme-pink-alternative\": \"#f651a1\",\n\t\t\t\"semantic-theme-pink-assistive\": \"#ff82b7\",\n\t\t\t\"semantic-theme-pink-subtle\": \"#ffb0cd\",\n\t\t\t\"semantic-theme-pink-subtler\": \"#ffe0e9\",\n\t\t\t\"semantic-theme-pink-alpha-assistive\": \"#c4267a89\",\n\t\t\t\"semantic-theme-pink-alpha-subtle\": \"#c4267a5b\",\n\t\t\t\"semantic-theme-pink-alpha-subtler\": \"#c4267a28\",\n\t\t\t\"semantic-theme-rose-bold\": \"#91002b\",\n\t\t\t\"semantic-theme-rose-normal\": \"#bc0b3b\",\n\t\t\t\"semantic-theme-rose-neutral\": \"#e02f52\",\n\t\t\t\"semantic-theme-rose-alternative\": \"#ff506b\",\n\t\t\t\"semantic-theme-rose-assistive\": \"#ff8792\",\n\t\t\t\"semantic-theme-rose-subtle\": \"#ffb2b7\",\n\t\t\t\"semantic-theme-rose-subtler\": \"#ffe1e2\",\n\t\t\t\"semantic-theme-rose-alpha-assistive\": \"#ce204689\",\n\t\t\t\"semantic-theme-rose-alpha-subtle\": \"#ce20465b\",\n\t\t\t\"semantic-theme-rose-alpha-subtler\": \"#ce204628\",\n\t\t\t\"semantic-feedback-positive-assistive\": \"#21c45d\",\n\t\t\t\"semantic-feedback-positive-subtler\": \"#95ffa6\",\n\t\t\t\"semantic-feedback-positive-neutral\": \"#008a3c\",\n\t\t\t\"semantic-feedback-positive-alternative\": \"#00a74b\",\n\t\t\t\"semantic-feedback-positive-subtle\": \"#4ae176\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-assistive\": \"#00a74b89\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtle\": \"#00a74b5b\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtler\": \"#00a74b28\",\n\t\t\t\"semantic-feedback-destructive-bold\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-inverse-bold\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-inverse-normal\": \"#ff7169\",\n\t\t\t\"semantic-feedback-destructive-inverse-neutral\": \"#ef4442\",\n\t\t\t\"semantic-feedback-destructive-inverse-alternative\": \"#cb292d\",\n\t\t\t\"semantic-feedback-destructive-inverse-assistive\": \"#a80618\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtle\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtler\": \"#600008\",\n\t\t\t\"semantic-feedback-destructive-normal\": \"#ba1a22\",\n\t\t\t\"semantic-feedback-destructive-alpha-assistive\": \"#cb292d89\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtle\": \"#cb292d5b\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtler\": \"#cb292d28\",\n\t\t\t\"semantic-feedback-destructive-neutral\": \"#dd3737\",\n\t\t\t\"semantic-feedback-destructive-alternative\": \"#ff5450\",\n\t\t\t\"semantic-feedback-destructive-assistive\": \"#ff8981\",\n\t\t\t\"semantic-feedback-destructive-subtle\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-subtler\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-assistive\": \"#ff545089\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtle\": \"#ff54505b\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtler\": \"#ff545028\",\n\t\t\t\"semantic-feedback-notifying-bold\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-normal\": \"#9e4300\",\n\t\t\t\"semantic-feedback-notifying-neutral\": \"#c55500\",\n\t\t\t\"semantic-feedback-notifying-alternative\": \"#ec690a\",\n\t\t\t\"semantic-feedback-notifying-assistive\": \"#ff8d4c\",\n\t\t\t\"semantic-feedback-notifying-subtle\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-subtler\": \"#ffe2d6\",\n\t\t\t\"semantic-feedback-notifying-inverse-bold\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-inverse-normal\": \"#fe761c\",\n\t\t\t\"semantic-feedback-notifying-inverse-neutral\": \"#d95f00\",\n\t\t\t\"semantic-feedback-notifying-inverse-alternative\": \"#b14c00\",\n\t\t\t\"semantic-feedback-notifying-inverse-assistive\": \"#8b3a00\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtle\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtler\": \"#4e1d00\",\n\t\t\t\"semantic-feedback-notifying-alpha-assistive\": \"#b14c0089\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtle\": \"#b14c005b\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtler\": \"#b14c0028\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-assistive\": \"#ec690a89\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtle\": \"#ec690a5b\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtler\": \"#ec690a28\",\n\t\t\t\"semantic-feedback-positive-alpha-subtlest\": \"#007b350c\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtlest\": \"#00a74b0c\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtlest\": \"#cb292d0c\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtlest\": \"#ff54500c\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtlest\": \"#b14c000c\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtlest\": \"#ec690a0c\",\n\t\t\t\"semantic-fill-bolder\": \"#292c35\",\n\t\t\t\"semantic-fill-normal\": \"#5c5e68\",\n\t\t\t\"semantic-fill-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-fill-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-inverse-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-inverse-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-object-static-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-static-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-static-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-static-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-static-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-static-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-static-inverse-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-static-inverse-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-surface-static-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-static-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-static-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-surface-static-inverse-shallowest\": \"#393b44\",\n\t\t\t\"semantic-surface-static-inverse-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-static-inverse-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-static-inverse-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-static-inverse-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-deepest\": \"#252830\",\n\t\t\t\"semantic-accent-alpha-inverse-assistive\": \"#7087ff89\",\n\t\t\t\"semantic-theme-red-alpha-subtlest\": \"#cb292d0c\",\n\t\t\t\"semantic-theme-red-bolder\": \"#600008\",\n\t\t\t\"semantic-theme-orange-bolder\": \"#4e1d00\",\n\t\t\t\"semantic-theme-orange-alpha-subtlest\": \"#b14c000c\",\n\t\t\t\"semantic-theme-amber-bolder\": \"#412600\",\n\t\t\t\"semantic-theme-amber-alpha-subtlest\": \"#955f000c\",\n\t\t\t\"semantic-theme-yellow-bolder\": \"#3a2a00\",\n\t\t\t\"semantic-theme-yellow-alpha-subtlest\": \"#8765000c\",\n\t\t\t\"semantic-theme-lime-bolder\": \"#1d3200\",\n\t\t\t\"semantic-theme-lime-alpha-subtlest\": \"#4b76000c\",\n\t\t\t\"semantic-theme-green-bolder\": \"#003412\",\n\t\t\t\"semantic-theme-green-alpha-subtlest\": \"#007b350c\",\n\t\t\t\"semantic-theme-emerald-bolder\": \"#003321\",\n\t\t\t\"semantic-theme-emerald-alpha-subtlest\": \"#007a540c\",\n\t\t\t\"semantic-theme-teal-bolder\": \"#00332d\",\n\t\t\t\"semantic-theme-teal-alpha-subtlest\": \"#00786c0c\",\n\t\t\t\"semantic-theme-cyan-alpha-subtlest\": \"#0075890c\",\n\t\t\t\"semantic-theme-cyan-bolder\": \"#00313b\",\n\t\t\t\"semantic-theme-sky-alpha-subtlest\": \"#0071a30c\",\n\t\t\t\"semantic-theme-sky-bolder\": \"#002f47\",\n\t\t\t\"semantic-theme-blue-bolder\": \"#002a61\",\n\t\t\t\"semantic-theme-blue-alpha-subtlest\": \"#0166d80c\",\n\t\t\t\"semantic-theme-violet-bolder\": \"#370086\",\n\t\t\t\"semantic-theme-violet-alpha-subtlest\": \"#7a4ae30c\",\n\t\t\t\"semantic-theme-purple-alpha-subtlest\": \"#923be00c\",\n\t\t\t\"semantic-theme-purple-bolder\": \"#440076\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtlest\": \"#b315cd0c\",\n\t\t\t\"semantic-theme-fuchsia-bolder\": \"#50005d\",\n\t\t\t\"semantic-theme-pink-bolder\": \"#5c0034\",\n\t\t\t\"semantic-theme-pink-alpha-subtlest\": \"#c4267a0c\",\n\t\t\t\"semantic-theme-rose-bolder\": \"#5f0019\",\n\t\t\t\"semantic-theme-rose-alpha-subtlest\": \"#ce20460c\",\n\t\t\t\"semantic-feedback-destructive-bolder\": \"#600008\",\n\t\t\t\"semantic-feedback-destructive-inverse-bolder\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-positive-bolder\": \"#003412\",\n\t\t\t\"semantic-feedback-positive-inverse-bolder\": \"#95ffa6\",\n\t\t\t\"semantic-feedback-notifying-bolder\": \"#4e1d00\",\n\t\t\t\"semantic-feedback-notifying-inverse-bolder\": \"#ffe2d6\",\n\t\t\t\"semantic-interaction-subtle\": \"#b7b8c3\",\n\t\t\t\"semantic-interaction-inverse-subtle\": \"#444650\",\n\t\t\t\"semantic-stroke-subtler\": \"#ecedf9\",\n\t\t\t\"semantic-stroke-inverse-subtler\": \"#252830\",\n\t\t\t\"semantic-stroke-alpha-subtler\": \"#111cb414\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtler\": \"#e1f3ec0f\",\n\t\t\t\"semantic-accent-subtlest\": \"#ececff\",\n\t\t\t\"semantic-accent-inverse-subtlest\": \"#001a78\",\n\t\t\t\"semantic-curtain-standard\": \"#ffffffa0\"\n\t\t},\n\t\t\"dark\": {\n\t\t\t\"semantic-accent-alpha-assistive\": \"#7087ff89\",\n\t\t\t\"semantic-object-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-object-inverse-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-inverse-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-inverse-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-inverse-subtle\": \"#0207353a\",\n\t\t\t\"semantic-accent-bold\": \"#bac3ff\",\n\t\t\t\"semantic-accent-normal\": \"#8397ff\",\n\t\t\t\"semantic-object-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-object-inverse-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-inverse-bold\": \"#444650\",\n\t\t\t\"semantic-surface-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-deepest\": \"#252830\",\n\t\t\t\"semantic-interaction-bold\": \"#ffffff\",\n\t\t\t\"semantic-interaction-normal\": \"#a9aab6\",\n\t\t\t\"semantic-interaction-inverse-focus\": \"#7087ff\",\n\t\t\t\"semantic-stroke-neutral\": \"#5c5e68\",\n\t\t\t\"semantic-stroke-alternative\": \"#444650\",\n\t\t\t\"semantic-stroke-assistive\": \"#393b44\",\n\t\t\t\"semantic-fill-boldest\": \"#ffffff\",\n\t\t\t\"semantic-fill-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-fill-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-fill-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-fill-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-system-white\": \"#ffffff\",\n\t\t\t\"semantic-system-black\": \"#000000\",\n\t\t\t\"semantic-object-static-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-static-bold\": \"#444650\",\n\t\t\t\"semantic-object-static-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-static-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-static-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-static-subtle\": \"#0207353a\",\n\t\t\t\"semantic-object-static-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-static-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-object-static-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-static-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-static-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-static-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-interaction-inverse-bold\": \"#191b24\",\n\t\t\t\"semantic-interaction-inverse-normal\": \"#50525c\",\n\t\t\t\"semantic-interaction-focus\": \"#4a68fc\",\n\t\t\t\"semantic-stroke-normal\": \"#81838e\",\n\t\t\t\"semantic-stroke-bold\": \"#a9aab6\",\n\t\t\t\"semantic-fill-inverse-boldest\": \"#191b24\",\n\t\t\t\"semantic-fill-inverse-bold\": \"#444650\",\n\t\t\t\"semantic-fill-inverse-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-fill-inverse-alternative\": \"#00031e70\",\n\t\t\t\"semantic-fill-inverse-assistive\": \"#01042656\",\n\t\t\t\"semantic-accent-neutral\": \"#5d78ff\",\n\t\t\t\"semantic-accent-alpha-subtle\": \"#7087ff5b\",\n\t\t\t\"semantic-fill-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-fill-inverse-subtle\": \"#0207353a\",\n\t\t\t\"semantic-stroke-alpha-bold\": \"#f0f0feaa\",\n\t\t\t\"semantic-stroke-alpha-normal\": \"#edeffc7c\",\n\t\t\t\"semantic-stroke-alpha-neutral\": \"#ebedf851\",\n\t\t\t\"semantic-stroke-alpha-alternative\": \"#e4e6f535\",\n\t\t\t\"semantic-stroke-alpha-assistive\": \"#eff1f926\",\n\t\t\t\"semantic-accent-inverse-bold\": \"#0031c5\",\n\t\t\t\"semantic-accent-inverse-normal\": \"#2a4de2\",\n\t\t\t\"semantic-accent-inverse-neutral\": \"#4a68fc\",\n\t\t\t\"semantic-accent-alternative\": \"#3b5aef\",\n\t\t\t\"semantic-accent-inverse-alternative\": \"#7087ff\",\n\t\t\t\"semantic-accent-alpha-subtler\": \"#7087ff28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtle\": \"#3b5aef5b\",\n\t\t\t\"semantic-accent-alpha-inverse-subtler\": \"#3b5aef28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtlest\": \"#3b5aef0c\",\n\t\t\t\"semantic-stroke-subtle\": \"#2e3039\",\n\t\t\t\"semantic-stroke-alpha-subtle\": \"#e9ecf519\",\n\t\t\t\"semantic-stroke-inverse-bold\": \"#50525c\",\n\t\t\t\"semantic-stroke-inverse-normal\": \"#757681\",\n\t\t\t\"semantic-stroke-inverse-neutral\": \"#9c9da8\",\n\t\t\t\"semantic-stroke-inverse-alternative\": \"#b7b8c3\",\n\t\t\t\"semantic-stroke-inverse-assistive\": \"#d3d4df\",\n\t\t\t\"semantic-stroke-inverse-subtle\": \"#e1e2ee\",\n\t\t\t\"semantic-stroke-alpha-inverse-bold\": \"#010413af\",\n\t\t\t\"semantic-stroke-alpha-inverse-normal\": \"#04051a8c\",\n\t\t\t\"semantic-stroke-alpha-inverse-neutral\": \"#01042263\",\n\t\t\t\"semantic-stroke-alpha-inverse-alternative\": \"#07093149\",\n\t\t\t\"semantic-stroke-alpha-inverse-assistive\": \"#0a104b2d\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtle\": \"#040b701e\",\n\t\t\t\"semantic-theme-red-bold\": \"#ffb3ad\",\n\t\t\t\"semantic-theme-red-normal\": \"#ff7169\",\n\t\t\t\"semantic-theme-red-neutral\": \"#ef4442\",\n\t\t\t\"semantic-theme-red-alternative\": \"#cb292d\",\n\t\t\t\"semantic-accent-assistive\": \"#163ed6\",\n\t\t\t\"semantic-accent-inverse-assistive\": \"#95a6ff\",\n\t\t\t\"semantic-accent-alpha-subtlest\": \"#7087ff0c\",\n\t\t\t\"semantic-surface-inverse-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-inverse-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-inverse-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-curtain-static-bright\": \"#ffffff3a\",\n\t\t\t\"semantic-curtain-static-dim\": \"#00000070\",\n\t\t\t\"semantic-curtain-static-dimmer\": \"#000000a0\",\n\t\t\t\"semantic-fill-subtler\": \"#e2f0f814\",\n\t\t\t\"semantic-fill-inverse-subtler\": \"#0e0e8519\",\n\t\t\t\"semantic-fill-subtlest\": \"#dfe1eb05\",\n\t\t\t\"semantic-fill-inverse-subtlest\": \"#5614ff07\",\n\t\t\t\"semantic-theme-red-assistive\": \"#a80618\",\n\t\t\t\"semantic-theme-red-subtle\": \"#930012\",\n\t\t\t\"semantic-theme-red-subtler\": \"#600008\",\n\t\t\t\"semantic-feedback-positive-alpha-subtle\": \"#00a74b5b\",\n\t\t\t\"semantic-feedback-positive-alpha-assistive\": \"#00a74b89\",\n\t\t\t\"semantic-feedback-positive-normal\": \"#00b652\",\n\t\t\t\"semantic-feedback-positive-alpha-subtler\": \"#00a74b28\",\n\t\t\t\"semantic-feedback-positive-bold\": \"#4ae176\",\n\t\t\t\"semantic-accent-subtle\": \"#0031c5\",\n\t\t\t\"semantic-accent-inverse-subtle\": \"#bac3ff\",\n\t\t\t\"semantic-interaction-assistive\": \"#686a74\",\n\t\t\t\"semantic-interaction-inverse-assistive\": \"#8f909b\",\n\t\t\t\"semantic-feedback-positive-inverse-bold\": \"#005321\",\n\t\t\t\"semantic-feedback-positive-inverse-normal\": \"#006e2f\",\n\t\t\t\"semantic-feedback-positive-inverse-neutral\": \"#008a3c\",\n\t\t\t\"semantic-feedback-positive-inverse-alternative\": \"#00a74b\",\n\t\t\t\"semantic-feedback-positive-inverse-assistive\": \"#21c45d\",\n\t\t\t\"semantic-feedback-positive-inverse-subtle\": \"#4ae176\",\n\t\t\t\"semantic-feedback-positive-inverse-subtler\": \"#95ffa6\",\n\t\t\t\"semantic-surface-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-inverse-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-shallowest\": \"#393b44\",\n\t\t\t\"semantic-surface-inverse-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-accent-subtler\": \"#00208d\",\n\t\t\t\"semantic-accent-bolder\": \"#e5e6ff\",\n\t\t\t\"semantic-accent-inverse-bolder\": \"#001d83\",\n\t\t\t\"semantic-accent-inverse-subtler\": \"#dee1ff\",\n\t\t\t\"semantic-theme-red-alpha-assistive\": \"#ff545089\",\n\t\t\t\"semantic-theme-red-alpha-subtle\": \"#ff54505b\",\n\t\t\t\"semantic-theme-red-alpha-subtler\": \"#ff545028\",\n\t\t\t\"semantic-theme-orange-bold\": \"#ffb691\",\n\t\t\t\"semantic-theme-orange-normal\": \"#fe761c\",\n\t\t\t\"semantic-theme-orange-neutral\": \"#d95f00\",\n\t\t\t\"semantic-theme-orange-alternative\": \"#b14c00\",\n\t\t\t\"semantic-theme-orange-assistive\": \"#8b3a00\",\n\t\t\t\"semantic-theme-orange-subtle\": \"#783100\",\n\t\t\t\"semantic-theme-orange-subtler\": \"#4e1d00\",\n\t\t\t\"semantic-theme-orange-alpha-assistive\": \"#ec690a89\",\n\t\t\t\"semantic-theme-orange-alpha-subtle\": \"#ec690a5b\",\n\t\t\t\"semantic-theme-orange-alpha-subtler\": \"#ec690a28\",\n\t\t\t\"semantic-theme-amber-bold\": \"#ffb95d\",\n\t\t\t\"semantic-theme-amber-normal\": \"#db8d00\",\n\t\t\t\"semantic-theme-amber-neutral\": \"#b87500\",\n\t\t\t\"semantic-theme-amber-alternative\": \"#955f00\",\n\t\t\t\"semantic-theme-amber-assistive\": \"#754900\",\n\t\t\t\"semantic-theme-amber-subtle\": \"#653e00\",\n\t\t\t\"semantic-theme-amber-subtler\": \"#412600\",\n\t\t\t\"semantic-theme-amber-alpha-assistive\": \"#c9810089\",\n\t\t\t\"semantic-theme-amber-alpha-subtle\": \"#c981005b\",\n\t\t\t\"semantic-theme-amber-alpha-subtler\": \"#c9810028\",\n\t\t\t\"semantic-theme-yellow-bold\": \"#f7be20\",\n\t\t\t\"semantic-theme-yellow-normal\": \"#c69700\",\n\t\t\t\"semantic-theme-yellow-neutral\": \"#a67e00\",\n\t\t\t\"semantic-theme-yellow-alternative\": \"#876500\",\n\t\t\t\"semantic-theme-yellow-assistive\": \"#694e00\",\n\t\t\t\"semantic-theme-yellow-subtle\": \"#5b4300\",\n\t\t\t\"semantic-theme-yellow-subtler\": \"#3a2a00\",\n\t\t\t\"semantic-theme-yellow-alpha-assistive\": \"#b68a0089\",\n\t\t\t\"semantic-theme-yellow-alpha-subtle\": \"#b68a005b\",\n\t\t\t\"semantic-theme-yellow-alpha-subtler\": \"#b68a0028\",\n\t\t\t\"semantic-theme-lime-bold\": \"#92da26\",\n\t\t\t\"semantic-theme-lime-normal\": \"#70af00\",\n\t\t\t\"semantic-theme-lime-neutral\": \"#5d9200\",\n\t\t\t\"semantic-theme-lime-alternative\": \"#4b7600\",\n\t\t\t\"semantic-theme-lime-assistive\": \"#395c00\",\n\t\t\t\"semantic-theme-lime-subtle\": \"#304f00\",\n\t\t\t\"semantic-theme-lime-subtler\": \"#1d3200\",\n\t\t\t\"semantic-theme-lime-alpha-assistive\": \"#67a00089\",\n\t\t\t\"semantic-theme-lime-alpha-subtle\": \"#67a0005b\",\n\t\t\t\"semantic-theme-lime-alpha-subtler\": \"#67a00028\",\n\t\t\t\"semantic-theme-green-bold\": \"#4ae176\",\n\t\t\t\"semantic-theme-green-normal\": \"#00b652\",\n\t\t\t\"semantic-theme-green-neutral\": \"#009843\",\n\t\t\t\"semantic-theme-green-alternative\": \"#007b35\",\n\t\t\t\"semantic-theme-green-assistive\": \"#006028\",\n\t\t\t\"semantic-theme-green-subtle\": \"#005321\",\n\t\t\t\"semantic-theme-green-subtler\": \"#003412\",\n\t\t\t\"semantic-theme-green-alpha-assistive\": \"#00a74b89\",\n\t\t\t\"semantic-theme-green-alpha-subtle\": \"#00a74b5b\",\n\t\t\t\"semantic-theme-green-alpha-subtler\": \"#00a74b28\",\n\t\t\t\"semantic-theme-emerald-bold\": \"#4cdfa3\",\n\t\t\t\"semantic-theme-emerald-normal\": \"#00b47d\",\n\t\t\t\"semantic-theme-emerald-neutral\": \"#009668\",\n\t\t\t\"semantic-theme-emerald-alternative\": \"#007a54\",\n\t\t\t\"semantic-theme-emerald-assistive\": \"#005f40\",\n\t\t\t\"semantic-theme-emerald-subtle\": \"#005237\",\n\t\t\t\"semantic-theme-emerald-subtler\": \"#003321\",\n\t\t\t\"semantic-theme-emerald-alpha-assistive\": \"#00a57289\",\n\t\t\t\"semantic-theme-emerald-alpha-subtle\": \"#00a5725b\",\n\t\t\t\"semantic-theme-emerald-alpha-subtler\": \"#00a57228\",\n\t\t\t\"semantic-theme-teal-bold\": \"#4edbc9\",\n\t\t\t\"semantic-theme-teal-normal\": \"#00b1a0\",\n\t\t\t\"semantic-theme-teal-neutral\": \"#009486\",\n\t\t\t\"semantic-theme-teal-alternative\": \"#00786c\",\n\t\t\t\"semantic-theme-teal-assistive\": \"#005d54\",\n\t\t\t\"semantic-theme-teal-subtle\": \"#005048\",\n\t\t\t\"semantic-theme-teal-subtler\": \"#00332d\",\n\t\t\t\"semantic-theme-teal-alpha-assistive\": \"#00a39389\",\n\t\t\t\"semantic-theme-teal-alpha-subtle\": \"#00a3935b\",\n\t\t\t\"semantic-theme-teal-alpha-subtler\": \"#00a39328\",\n\t\t\t\"semantic-theme-cyan-bold\": \"#49d7f6\",\n\t\t\t\"semantic-theme-cyan-normal\": \"#00adca\",\n\t\t\t\"semantic-theme-cyan-neutral\": \"#0090a9\",\n\t\t\t\"semantic-theme-cyan-alternative\": \"#007589\",\n\t\t\t\"semantic-theme-cyan-assistive\": \"#005b6b\",\n\t\t\t\"semantic-theme-cyan-subtle\": \"#004e5c\",\n\t\t\t\"semantic-theme-cyan-subtler\": \"#00313b\",\n\t\t\t\"semantic-theme-cyan-alpha-assistive\": \"#009eb989\",\n\t\t\t\"semantic-theme-cyan-alpha-subtle\": \"#009eb95b\",\n\t\t\t\"semantic-theme-cyan-alpha-subtler\": \"#009eb928\",\n\t\t\t\"semantic-theme-sky-bold\": \"#8aceff\",\n\t\t\t\"semantic-theme-sky-normal\": \"#19a7ec\",\n\t\t\t\"semantic-theme-sky-neutral\": \"#008cc8\",\n\t\t\t\"semantic-theme-sky-alternative\": \"#0071a3\",\n\t\t\t\"semantic-theme-sky-assistive\": \"#00587f\",\n\t\t\t\"semantic-theme-sky-subtle\": \"#004c6e\",\n\t\t\t\"semantic-theme-sky-subtler\": \"#002f47\",\n\t\t\t\"semantic-theme-sky-alpha-assistive\": \"#009adb89\",\n\t\t\t\"semantic-theme-sky-alpha-subtle\": \"#009adb5b\",\n\t\t\t\"semantic-theme-sky-alpha-subtler\": \"#009adb28\",\n\t\t\t\"semantic-theme-blue-bold\": \"#adc6ff\",\n\t\t\t\"semantic-theme-blue-normal\": \"#689cff\",\n\t\t\t\"semantic-theme-blue-neutral\": \"#3881f4\",\n\t\t\t\"semantic-theme-blue-alternative\": \"#0166d8\",\n\t\t\t\"semantic-theme-blue-assistive\": \"#004faa\",\n\t\t\t\"semantic-theme-blue-subtle\": \"#004494\",\n\t\t\t\"semantic-theme-blue-subtler\": \"#002a61\",\n\t\t\t\"semantic-theme-blue-alpha-assistive\": \"#4c8eff89\",\n\t\t\t\"semantic-theme-blue-alpha-subtle\": \"#4c8eff5b\",\n\t\t\t\"semantic-theme-blue-alpha-subtler\": \"#4c8eff28\",\n\t\t\t\"semantic-theme-violet-bold\": \"#d0bcff\",\n\t\t\t\"semantic-theme-violet-normal\": \"#ac8aff\",\n\t\t\t\"semantic-theme-violet-neutral\": \"#9466ff\",\n\t\t\t\"semantic-theme-violet-alternative\": \"#7a4ae3\",\n\t\t\t\"semantic-theme-violet-assistive\": \"#612bc9\",\n\t\t\t\"semantic-theme-violet-subtle\": \"#5517bd\",\n\t\t\t\"semantic-theme-violet-subtler\": \"#370086\",\n\t\t\t\"semantic-theme-violet-alpha-assistive\": \"#a078ff89\",\n\t\t\t\"semantic-theme-violet-alpha-subtle\": \"#a078ff5b\",\n\t\t\t\"semantic-theme-violet-alpha-subtler\": \"#a078ff28\",\n\t\t\t\"semantic-theme-purple-bold\": \"#deb7ff\",\n\t\t\t\"semantic-theme-purple-normal\": \"#c180ff\",\n\t\t\t\"semantic-theme-purple-neutral\": \"#ad59fb\",\n\t\t\t\"semantic-theme-purple-alternative\": \"#923be0\",\n\t\t\t\"semantic-theme-purple-assistive\": \"#7714c5\",\n\t\t\t\"semantic-theme-purple-subtle\": \"#6900b2\",\n\t\t\t\"semantic-theme-purple-subtler\": \"#440076\",\n\t\t\t\"semantic-theme-purple-alpha-assistive\": \"#b76cff89\",\n\t\t\t\"semantic-theme-purple-alpha-subtle\": \"#b76cff5b\",\n\t\t\t\"semantic-theme-purple-alpha-subtler\": \"#b76cff28\",\n\t\t\t\"semantic-theme-fuchsia-bold\": \"#faabff\",\n\t\t\t\"semantic-theme-fuchsia-normal\": \"#eb64ff\",\n\t\t\t\"semantic-theme-fuchsia-neutral\": \"#d13ee9\",\n\t\t\t\"semantic-theme-fuchsia-alternative\": \"#b315cd\",\n\t\t\t\"semantic-theme-fuchsia-assistive\": \"#8f00a4\",\n\t\t\t\"semantic-theme-fuchsia-subtle\": \"#7c008f\",\n\t\t\t\"semantic-theme-fuchsia-subtler\": \"#50005d\",\n\t\t\t\"semantic-theme-fuchsia-alpha-assistive\": \"#e14ef889\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtle\": \"#e14ef85b\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtler\": \"#e14ef828\",\n\t\t\t\"semantic-theme-pink-bold\": \"#ffb0cd\",\n\t\t\t\"semantic-theme-pink-normal\": \"#ff67ad\",\n\t\t\t\"semantic-theme-pink-neutral\": \"#e64394\",\n\t\t\t\"semantic-theme-pink-alternative\": \"#c4267a\",\n\t\t\t\"semantic-theme-pink-assistive\": \"#a20060\",\n\t\t\t\"semantic-theme-pink-subtle\": \"#8c0053\",\n\t\t\t\"semantic-theme-pink-subtler\": \"#5c0034\",\n\t\t\t\"semantic-theme-pink-alpha-assistive\": \"#f651a189\",\n\t\t\t\"semantic-theme-pink-alpha-subtle\": \"#f651a15b\",\n\t\t\t\"semantic-theme-pink-alpha-subtler\": \"#f651a128\",\n\t\t\t\"semantic-theme-rose-bold\": \"#ffb2b7\",\n\t\t\t\"semantic-theme-rose-normal\": \"#ff6e7f\",\n\t\t\t\"semantic-theme-rose-neutral\": \"#f13d5d\",\n\t\t\t\"semantic-theme-rose-alternative\": \"#ce2046\",\n\t\t\t\"semantic-theme-rose-assistive\": \"#a70032\",\n\t\t\t\"semantic-theme-rose-subtle\": \"#91002b\",\n\t\t\t\"semantic-theme-rose-subtler\": \"#5f0019\",\n\t\t\t\"semantic-theme-rose-alpha-assistive\": \"#ff506b89\",\n\t\t\t\"semantic-theme-rose-alpha-subtle\": \"#ff506b5b\",\n\t\t\t\"semantic-theme-rose-alpha-subtler\": \"#ff506b28\",\n\t\t\t\"semantic-feedback-positive-assistive\": \"#006028\",\n\t\t\t\"semantic-feedback-positive-subtler\": \"#003412\",\n\t\t\t\"semantic-feedback-positive-neutral\": \"#009843\",\n\t\t\t\"semantic-feedback-positive-alternative\": \"#007b35\",\n\t\t\t\"semantic-feedback-positive-subtle\": \"#005321\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-assistive\": \"#007b3589\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtle\": \"#007b355b\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtler\": \"#007b3528\",\n\t\t\t\"semantic-feedback-destructive-bold\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-inverse-bold\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-inverse-normal\": \"#ba1a22\",\n\t\t\t\"semantic-feedback-destructive-inverse-neutral\": \"#dd3737\",\n\t\t\t\"semantic-feedback-destructive-inverse-alternative\": \"#ff5450\",\n\t\t\t\"semantic-feedback-destructive-inverse-assistive\": \"#ff8981\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtle\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtler\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-destructive-normal\": \"#ff7169\",\n\t\t\t\"semantic-feedback-destructive-alpha-assistive\": \"#ff545089\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtle\": \"#ff54505b\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtler\": \"#ff545028\",\n\t\t\t\"semantic-feedback-destructive-neutral\": \"#ef4442\",\n\t\t\t\"semantic-feedback-destructive-alternative\": \"#cb292d\",\n\t\t\t\"semantic-feedback-destructive-assistive\": \"#a80618\",\n\t\t\t\"semantic-feedback-destructive-subtle\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-subtler\": \"#600008\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-assistive\": \"#cb292d89\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtle\": \"#cb292d5b\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtler\": \"#cb292d28\",\n\t\t\t\"semantic-feedback-notifying-bold\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-normal\": \"#fe761c\",\n\t\t\t\"semantic-feedback-notifying-neutral\": \"#d95f00\",\n\t\t\t\"semantic-feedback-notifying-alternative\": \"#b14c00\",\n\t\t\t\"semantic-feedback-notifying-assistive\": \"#8b3a00\",\n\t\t\t\"semantic-feedback-notifying-subtle\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-subtler\": \"#4e1d00\",\n\t\t\t\"semantic-feedback-notifying-inverse-bold\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-inverse-normal\": \"#9e4300\",\n\t\t\t\"semantic-feedback-notifying-inverse-neutral\": \"#c55500\",\n\t\t\t\"semantic-feedback-notifying-inverse-alternative\": \"#ec690a\",\n\t\t\t\"semantic-feedback-notifying-inverse-assistive\": \"#ff8d4c\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtle\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtler\": \"#ffe2d6\",\n\t\t\t\"semantic-feedback-notifying-alpha-assistive\": \"#ec690a89\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtle\": \"#ec690a5b\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtler\": \"#ec690a28\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-assistive\": \"#b14c0089\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtle\": \"#b14c005b\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtler\": \"#b14c0028\",\n\t\t\t\"semantic-feedback-positive-alpha-subtlest\": \"#00a74b0c\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtlest\": \"#007b350c\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtlest\": \"#ff54500c\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtlest\": \"#cb292d0c\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtlest\": \"#ec690a0c\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtlest\": \"#b14c000c\",\n\t\t\t\"semantic-fill-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-fill-normal\": \"#9c9da8\",\n\t\t\t\"semantic-fill-inverse-bolder\": \"#292c35\",\n\t\t\t\"semantic-fill-inverse-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-object-inverse-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-inverse-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-inverse-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-inverse-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-static-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-static-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-static-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-static-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-static-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-static-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-static-inverse-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-static-inverse-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-surface-static-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-static-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-static-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-surface-static-inverse-shallowest\": \"#393b44\",\n\t\t\t\"semantic-surface-static-inverse-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-static-inverse-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-static-inverse-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-static-inverse-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-deepest\": \"#252830\",\n\t\t\t\"semantic-accent-alpha-inverse-assistive\": \"#3b5aef89\",\n\t\t\t\"semantic-theme-red-alpha-subtlest\": \"#ff54500c\",\n\t\t\t\"semantic-theme-red-bolder\": \"#ffe2df\",\n\t\t\t\"semantic-theme-orange-bolder\": \"#ffe2d6\",\n\t\t\t\"semantic-theme-orange-alpha-subtlest\": \"#ec690a0c\",\n\t\t\t\"semantic-theme-amber-bolder\": \"#ffe4c7\",\n\t\t\t\"semantic-theme-amber-alpha-subtlest\": \"#c981000c\",\n\t\t\t\"semantic-theme-yellow-bolder\": \"#ffe5b2\",\n\t\t\t\"semantic-theme-yellow-alpha-subtlest\": \"#b68a000c\",\n\t\t\t\"semantic-theme-lime-bolder\": \"#b2fe4a\",\n\t\t\t\"semantic-theme-lime-alpha-subtlest\": \"#67a0000c\",\n\t\t\t\"semantic-theme-green-bolder\": \"#95ffa6\",\n\t\t\t\"semantic-theme-green-alpha-subtlest\": \"#00a74b0c\",\n\t\t\t\"semantic-theme-emerald-bolder\": \"#86ffc7\",\n\t\t\t\"semantic-theme-emerald-alpha-subtlest\": \"#00a5720c\",\n\t\t\t\"semantic-theme-teal-bolder\": \"#76feea\",\n\t\t\t\"semantic-theme-teal-alpha-subtlest\": \"#00a3930c\",\n\t\t\t\"semantic-theme-cyan-alpha-subtlest\": \"#009eb90c\",\n\t\t\t\"semantic-theme-cyan-bolder\": \"#bef0ff\",\n\t\t\t\"semantic-theme-sky-alpha-subtlest\": \"#009adb0c\",\n\t\t\t\"semantic-theme-sky-bolder\": \"#d4ebff\",\n\t\t\t\"semantic-theme-blue-bolder\": \"#e0e8ff\",\n\t\t\t\"semantic-theme-blue-alpha-subtlest\": \"#4c8eff0c\",\n\t\t\t\"semantic-theme-violet-bolder\": \"#eee4ff\",\n\t\t\t\"semantic-theme-violet-alpha-subtlest\": \"#a078ff0c\",\n\t\t\t\"semantic-theme-purple-alpha-subtlest\": \"#b76cff0c\",\n\t\t\t\"semantic-theme-purple-bolder\": \"#f4e2ff\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtlest\": \"#e14ef80c\",\n\t\t\t\"semantic-theme-fuchsia-bolder\": \"#ffdefc\",\n\t\t\t\"semantic-theme-pink-bolder\": \"#ffe0e9\",\n\t\t\t\"semantic-theme-pink-alpha-subtlest\": \"#f651a10c\",\n\t\t\t\"semantic-theme-rose-bolder\": \"#ffe1e2\",\n\t\t\t\"semantic-theme-rose-alpha-subtlest\": \"#ff506b0c\",\n\t\t\t\"semantic-feedback-destructive-bolder\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-destructive-inverse-bolder\": \"#600008\",\n\t\t\t\"semantic-feedback-positive-bolder\": \"#95ffa6\",\n\t\t\t\"semantic-feedback-positive-inverse-bolder\": \"#003412\",\n\t\t\t\"semantic-feedback-notifying-bolder\": \"#ffe2d6\",\n\t\t\t\"semantic-feedback-notifying-inverse-bolder\": \"#4e1d00\",\n\t\t\t\"semantic-interaction-subtle\": \"#444650\",\n\t\t\t\"semantic-interaction-inverse-subtle\": \"#b7b8c3\",\n\t\t\t\"semantic-stroke-subtler\": \"#252830\",\n\t\t\t\"semantic-stroke-inverse-subtler\": \"#ecedf9\",\n\t\t\t\"semantic-stroke-alpha-subtler\": \"#e1f3ec0f\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtler\": \"#111cb414\",\n\t\t\t\"semantic-accent-subtlest\": \"#001a78\",\n\t\t\t\"semantic-accent-inverse-subtlest\": \"#ececff\",\n\t\t\t\"semantic-curtain-standard\": \"#191b24a0\"\n\t\t}\n\t},\n\t\"typography\": {\n\t\t\"desktop\": {\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-title-6\": 48,\n\t\t\t\"primitive-font-size-title-5\": 40,\n\t\t\t\"primitive-font-size-title-3\": 28,\n\t\t\t\"primitive-font-size-title-2\": 24,\n\t\t\t\"primitive-font-size-title-1\": 20,\n\t\t\t\"primitive-font-size-title-4\": 32,\n\t\t\t\"primitive-font-size-body-lg\": 16,\n\t\t\t\"primitive-font-size-body-md\": 15,\n\t\t\t\"primitive-font-size-body-sm\": 14,\n\t\t\t\"primitive-font-size-body-xs\": 13,\n\t\t\t\"primitive-font-size-body-2xs\": 12,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 14,\n\t\t\t\"primitive-font-size-label-sm\": 12,\n\t\t\t\"primitive-font-line-height-title-6\": 62,\n\t\t\t\"primitive-font-line-height-title-5\": 52,\n\t\t\t\"primitive-font-line-height-title-4\": 42,\n\t\t\t\"primitive-font-line-height-title-3\": 36,\n\t\t\t\"primitive-font-line-height-title-2\": 32,\n\t\t\t\"primitive-font-line-height-title-1\": 26,\n\t\t\t\"primitive-font-line-height-label-lg\": 22,\n\t\t\t\"primitive-font-line-height-label-md\": 20,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 26,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22,\n\t\t\t\"primitive-font-line-height-body-xs\": 21,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19,\n\t\t\t\"primitive-font-letter-spacing-title-4\": -0.6399999856948853,\n\t\t\t\"primitive-font-letter-spacing-title-3\": -0.47999998927116394,\n\t\t\t\"primitive-font-letter-spacing-title-2\": -0.3400000035762787,\n\t\t\t\"primitive-font-letter-spacing-title-1\": -0.2199999988079071,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.1599999964237213,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07999999821186066,\n\t\t\t\"primitive-font-letter-spacing-body-lg\": 0.017000000923871994,\n\t\t\t\"primitive-font-letter-spacing-body-md\": 0.04500000178813934,\n\t\t\t\"primitive-font-letter-spacing-body-sm\": 0.0560000017285347,\n\t\t\t\"primitive-font-letter-spacing-body-xs\": 0.07000000029802322,\n\t\t\t\"primitive-font-letter-spacing-body-2xs\": 0.07999999821186066,\n\t\t\t\"primitive-font-weight-title-normal\": 620,\n\t\t\t\"primitive-font-weight-label-normal\": 480,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-title-bold\": 650,\n\t\t\t\"primitive-font-weight-label-bold\": 520,\n\t\t\t\"primitive-font-weight-label-subtle\": 440,\n\t\t\t\"primitive-font-weight-body-bold\": 440,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 14,\n\t\t\t\"primitive-font-size-syntax-sm\": 13,\n\t\t\t\"primitive-font-weight-syntax-normal\": 400,\n\t\t\t\"primitive-font-line-height-syntax-lg\": 22,\n\t\t\t\"primitive-font-line-height-syntax-md\": 20,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 18,\n\t\t\t\"primitive-typeface-title\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-label\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-body\": \"Pretendard Variable\",\n\t\t\t\"primitive-font-size-label-xs\": 11,\n\t\t\t\"primitive-font-line-height-label-xs\": 16,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.05000000074505806,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 16,\n\t\t\t\"primitive-font-weight-title-subtle\": 590,\n\t\t\t\"primitive-font-letter-spacing-title-5\": -0.9200000166893005,\n\t\t\t\"primitive-font-letter-spacing-title-6\": -1.25\n\t\t},\n\t\t\"tablet\": {\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-title-6\": 48,\n\t\t\t\"primitive-font-size-title-5\": 40,\n\t\t\t\"primitive-font-size-title-3\": 28,\n\t\t\t\"primitive-font-size-title-2\": 24,\n\t\t\t\"primitive-font-size-title-1\": 20,\n\t\t\t\"primitive-font-size-title-4\": 32,\n\t\t\t\"primitive-font-size-body-lg\": 16,\n\t\t\t\"primitive-font-size-body-md\": 15,\n\t\t\t\"primitive-font-size-body-sm\": 14,\n\t\t\t\"primitive-font-size-body-xs\": 13,\n\t\t\t\"primitive-font-size-body-2xs\": 12,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 14,\n\t\t\t\"primitive-font-size-label-sm\": 12,\n\t\t\t\"primitive-font-line-height-title-6\": 62,\n\t\t\t\"primitive-font-line-height-title-5\": 52,\n\t\t\t\"primitive-font-line-height-title-4\": 42,\n\t\t\t\"primitive-font-line-height-title-3\": 36,\n\t\t\t\"primitive-font-line-height-title-2\": 32,\n\t\t\t\"primitive-font-line-height-title-1\": 26,\n\t\t\t\"primitive-font-line-height-label-lg\": 22,\n\t\t\t\"primitive-font-line-height-label-md\": 20,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 26,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22,\n\t\t\t\"primitive-font-line-height-body-xs\": 21,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19,\n\t\t\t\"primitive-font-letter-spacing-title-4\": -0.6399999856948853,\n\t\t\t\"primitive-font-letter-spacing-title-3\": -0.47999998927116394,\n\t\t\t\"primitive-font-letter-spacing-title-2\": -0.3400000035762787,\n\t\t\t\"primitive-font-letter-spacing-title-1\": -0.2199999988079071,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.1599999964237213,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07999999821186066,\n\t\t\t\"primitive-font-letter-spacing-body-lg\": 0.017000000923871994,\n\t\t\t\"primitive-font-letter-spacing-body-md\": 0.04500000178813934,\n\t\t\t\"primitive-font-letter-spacing-body-sm\": 0.05999999865889549,\n\t\t\t\"primitive-font-letter-spacing-body-xs\": 0.07000000029802322,\n\t\t\t\"primitive-font-letter-spacing-body-2xs\": 0.07999999821186066,\n\t\t\t\"primitive-font-weight-title-normal\": 620,\n\t\t\t\"primitive-font-weight-label-normal\": 480,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-title-bold\": 650,\n\t\t\t\"primitive-font-weight-label-bold\": 520,\n\t\t\t\"primitive-font-weight-label-subtle\": 440,\n\t\t\t\"primitive-font-weight-body-bold\": 440,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 14,\n\t\t\t\"primitive-font-size-syntax-sm\": 13,\n\t\t\t\"primitive-font-weight-syntax-normal\": 400,\n\t\t\t\"primitive-font-line-height-syntax-lg\": 22,\n\t\t\t\"primitive-font-line-height-syntax-md\": 20,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 18,\n\t\t\t\"primitive-typeface-title\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-label\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-body\": \"Pretendard Variable\",\n\t\t\t\"primitive-font-size-label-xs\": 11,\n\t\t\t\"primitive-font-line-height-label-xs\": 16,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.05000000074505806,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 16,\n\t\t\t\"primitive-font-weight-title-subtle\": 590,\n\t\t\t\"primitive-font-letter-spacing-title-5\": -0.9200000166893005,\n\t\t\t\"primitive-font-letter-spacing-title-6\": -1.25\n\t\t},\n\t\t\"mobile\": {\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-title-6\": 40,\n\t\t\t\"primitive-font-size-title-5\": 32,\n\t\t\t\"primitive-font-size-title-3\": 24,\n\t\t\t\"primitive-font-size-title-2\": 20,\n\t\t\t\"primitive-font-size-title-1\": 18,\n\t\t\t\"primitive-font-size-title-4\": 28,\n\t\t\t\"primitive-font-size-body-lg\": 16,\n\t\t\t\"primitive-font-size-body-md\": 15,\n\t\t\t\"primitive-font-size-body-sm\": 14,\n\t\t\t\"primitive-font-size-body-xs\": 13,\n\t\t\t\"primitive-font-size-body-2xs\": 12,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 14,\n\t\t\t\"primitive-font-size-label-sm\": 12,\n\t\t\t\"primitive-font-line-height-title-6\": 52,\n\t\t\t\"primitive-font-line-height-title-5\": 42,\n\t\t\t\"primitive-font-line-height-title-4\": 36,\n\t\t\t\"primitive-font-line-height-title-3\": 32,\n\t\t\t\"primitive-font-line-height-title-2\": 26,\n\t\t\t\"primitive-font-line-height-title-1\": 24,\n\t\t\t\"primitive-font-line-height-label-lg\": 22,\n\t\t\t\"primitive-font-line-height-label-md\": 20,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 26,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22,\n\t\t\t\"primitive-font-line-height-body-xs\": 21,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19,\n\t\t\t\"primitive-font-letter-spacing-title-4\": -0.5600000023841858,\n\t\t\t\"primitive-font-letter-spacing-title-3\": -0.4099999964237213,\n\t\t\t\"primitive-font-letter-spacing-title-2\": -0.2800000011920929,\n\t\t\t\"primitive-font-letter-spacing-title-1\": -0.20000000298023224,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.1599999964237213,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07999999821186066,\n\t\t\t\"primitive-font-letter-spacing-body-lg\": 0.017000000923871994,\n\t\t\t\"primitive-font-letter-spacing-body-md\": 0.04500000178813934,\n\t\t\t\"primitive-font-letter-spacing-body-sm\": 0.05999999865889549,\n\t\t\t\"primitive-font-letter-spacing-body-xs\": 0.07000000029802322,\n\t\t\t\"primitive-font-letter-spacing-body-2xs\": 0.07999999821186066,\n\t\t\t\"primitive-font-weight-title-normal\": 620,\n\t\t\t\"primitive-font-weight-label-normal\": 480,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-title-bold\": 650,\n\t\t\t\"primitive-font-weight-label-bold\": 520,\n\t\t\t\"primitive-font-weight-label-subtle\": 440,\n\t\t\t\"primitive-font-weight-body-bold\": 440,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 14,\n\t\t\t\"primitive-font-size-syntax-sm\": 13,\n\t\t\t\"primitive-font-weight-syntax-normal\": 400,\n\t\t\t\"primitive-font-line-height-syntax-lg\": 22,\n\t\t\t\"primitive-font-line-height-syntax-md\": 20,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 18,\n\t\t\t\"primitive-typeface-title\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-label\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-body\": \"Pretendard Variable\",\n\t\t\t\"primitive-font-size-label-xs\": 11,\n\t\t\t\"primitive-font-line-height-label-xs\": 16,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.05000000074505806,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 16,\n\t\t\t\"primitive-font-weight-title-subtle\": 590,\n\t\t\t\"primitive-font-letter-spacing-title-5\": -0.7400000095367432,\n\t\t\t\"primitive-font-letter-spacing-title-6\": -1.0399999618530273\n\t\t}\n\t},\n\t\"environment\": {\n\t\t\"value\": {\n\t\t\t\"semantic-duration-200\": 200,\n\t\t\t\"semantic-duration-250\": 250,\n\t\t\t\"semantic-duration-300\": 300,\n\t\t\t\"semantic-duration-350\": 350,\n\t\t\t\"semantic-duration-150\": 150,\n\t\t\t\"semantic-duration-100\": 100,\n\t\t\t\"semantic-duration-50\": 50,\n\t\t\t\"semantic-motion-bouncy\": \"cubic-bezier(0.25, 1.57, 0.75, 0.9)\",\n\t\t\t\"semantic-motion-fluent\": \"cubic-bezier(0.25, 0.1, 0.25, 1)\",\n\t\t\t\"primitive-time-300\": 300,\n\t\t\t\"primitive-time-200\": 200,\n\t\t\t\"primitive-time-250\": 250,\n\t\t\t\"primitive-time-150\": 150,\n\t\t\t\"primitive-time-350\": 350,\n\t\t\t\"primitive-time-100\": 100,\n\t\t\t\"primitive-time-50\": 50,\n\t\t\t\"semantic-motion-leave\": \"cubic-bezier(0.42, 0, 0.1, 1)\\t\",\n\t\t\t\"semantic-motion-entrance\": \"cubic-bezier(0.19, 0.91, 0.38, 1)\\t\",\n\t\t\t\"primitive-time-400\": 400,\n\t\t\t\"primitive-time-450\": 450,\n\t\t\t\"primitive-time-500\": 500,\n\t\t\t\"semantic-duration-400\": 400,\n\t\t\t\"semantic-duration-450\": 450,\n\t\t\t\"semantic-duration-500\": 500\n\t\t}\n\t}\n}" \ No newline at end of file +"{\n\t\"color-primitive\": {\n\t\t\"value\": {\n\t\t\t\"primitive-flow-20\": \"#faf8ff\",\n\t\t\t\"primitive-flow-40\": \"#f2f3ff\",\n\t\t\t\"primitive-flow-80\": \"#e7e7f3\",\n\t\t\t\"primitive-flow-150\": \"#d3d4df\",\n\t\t\t\"primitive-flow-200\": \"#c5c6d1\",\n\t\t\t\"primitive-flow-250\": \"#b7b8c3\",\n\t\t\t\"primitive-flow-300\": \"#a9aab6\",\n\t\t\t\"primitive-flow-350\": \"#9c9da8\",\n\t\t\t\"primitive-flow-400\": \"#8f909b\",\n\t\t\t\"primitive-flow-500\": \"#757681\",\n\t\t\t\"primitive-flow-550\": \"#686a74\",\n\t\t\t\"primitive-red-20\": \"#fff8f7\",\n\t\t\t\"primitive-red-40\": \"#fff0ef\",\n\t\t\t\"primitive-red-80\": \"#ffe2df\",\n\t\t\t\"primitive-red-150\": \"#ffc7c2\",\n\t\t\t\"primitive-red-250\": \"#ff9f97\",\n\t\t\t\"primitive-red-350\": \"#ff7169\",\n\t\t\t\"primitive-red-450\": \"#ef4442\",\n\t\t\t\"primitive-red-550\": \"#cb292d\",\n\t\t\t\"primitive-red-650\": \"#a80618\",\n\t\t\t\"primitive-red-750\": \"#7d000d\",\n\t\t\t\"primitive-red-800\": \"#680009\",\n\t\t\t\"primitive-flow-650\": \"#50525c\",\n\t\t\t\"primitive-flow-450\": \"#81838e\",\n\t\t\t\"primitive-flow-750\": \"#393b44\",\n\t\t\t\"primitive-flow-60\": \"#ecedf9\",\n\t\t\t\"primitive-flow-100\": \"#e1e2ee\",\n\t\t\t\"primitive-shade-2\": \"#191b2405\",\n\t\t\t\"primitive-shade-4\": \"#191b240a\",\n\t\t\t\"primitive-shade-6\": \"#191b240f\",\n\t\t\t\"primitive-shade-8\": \"#191b2414\",\n\t\t\t\"primitive-shade-12\": \"#191b241e\",\n\t\t\t\"primitive-base-0\": \"#ffffff\",\n\t\t\t\"primitive-base-1000\": \"#000000\",\n\t\t\t\"primitive-flow-600\": \"#5c5e68\",\n\t\t\t\"primitive-flow-700\": \"#444650\",\n\t\t\t\"primitive-flow-800\": \"#2e3039\",\n\t\t\t\"primitive-red-60\": \"#ffe9e7\",\n\t\t\t\"primitive-red-100\": \"#ffdad6\",\n\t\t\t\"primitive-red-200\": \"#ffb3ad\",\n\t\t\t\"primitive-red-300\": \"#ff8981\",\n\t\t\t\"primitive-red-400\": \"#ff5450\",\n\t\t\t\"primitive-red-500\": \"#dd3737\",\n\t\t\t\"primitive-red-600\": \"#ba1a22\",\n\t\t\t\"primitive-red-700\": \"#930012\",\n\t\t\t\"primitive-flow-dark-alpha-20\": \"#fbf9ff\",\n\t\t\t\"primitive-flow-dark-alpha-40\": \"#f4f5ff\",\n\t\t\t\"primitive-flow-dark-alpha-400\": \"#f2f2fc8c\",\n\t\t\t\"primitive-flow-dark-alpha-450\": \"#edeffc7c\",\n\t\t\t\"primitive-flow-dark-alpha-500\": \"#ededfb6d\",\n\t\t\t\"primitive-flow-dark-alpha-550\": \"#edeffb5e\",\n\t\t\t\"primitive-flow-dark-alpha-600\": \"#ebedf851\",\n\t\t\t\"primitive-flow-dark-alpha-650\": \"#eef0fb42\",\n\t\t\t\"primitive-flow-dark-alpha-700\": \"#e4e6f535\",\n\t\t\t\"primitive-flow-dark-alpha-750\": \"#eff1f926\",\n\t\t\t\"primitive-flow-dark-alpha-800\": \"#e9ecf519\",\n\t\t\t\"primitive-flow-dark-alpha-60\": \"#f1f2fdf9\",\n\t\t\t\"primitive-flow-dark-alpha-80\": \"#f0f0fdf2\",\n\t\t\t\"primitive-flow-dark-alpha-100\": \"#f1f2fded\",\n\t\t\t\"primitive-flow-dark-alpha-150\": \"#f1f2fddb\",\n\t\t\t\"primitive-flow-dark-alpha-200\": \"#f4f4ffc9\",\n\t\t\t\"primitive-flow-dark-alpha-250\": \"#f0f1feba\",\n\t\t\t\"primitive-flow-dark-alpha-300\": \"#f0f0feaa\",\n\t\t\t\"primitive-flow-dark-alpha-350\": \"#f2f2fc9b\",\n\t\t\t\"primitive-flow-light-alpha-20\": \"#5614ff07\",\n\t\t\t\"primitive-flow-light-alpha-40\": \"#283aff0f\",\n\t\t\t\"primitive-flow-light-alpha-60\": \"#111cb414\",\n\t\t\t\"primitive-flow-light-alpha-80\": \"#0e0e8519\",\n\t\t\t\"primitive-flow-light-alpha-100\": \"#040b701e\",\n\t\t\t\"primitive-flow-light-alpha-150\": \"#0a104b2d\",\n\t\t\t\"primitive-flow-light-alpha-200\": \"#0207353a\",\n\t\t\t\"primitive-flow-light-alpha-250\": \"#07093149\",\n\t\t\t\"primitive-flow-light-alpha-300\": \"#01042656\",\n\t\t\t\"primitive-flow-light-alpha-350\": \"#01042263\",\n\t\t\t\"primitive-flow-light-alpha-400\": \"#00031e70\",\n\t\t\t\"primitive-flow-light-alpha-450\": \"#02061b7f\",\n\t\t\t\"primitive-flow-light-alpha-500\": \"#04051a8c\",\n\t\t\t\"primitive-flow-light-alpha-550\": \"#02061699\",\n\t\t\t\"primitive-flow-light-alpha-600\": \"#000314a3\",\n\t\t\t\"primitive-flow-light-alpha-650\": \"#010413af\",\n\t\t\t\"primitive-flow-light-alpha-700\": \"#010412bc\",\n\t\t\t\"primitive-flow-light-alpha-750\": \"#00030ec6\",\n\t\t\t\"primitive-flow-light-alpha-800\": \"#00030fd1\",\n\t\t\t\"primitive-orange-20\": \"#fff8f6\",\n\t\t\t\"primitive-orange-40\": \"#fff1eb\",\n\t\t\t\"primitive-orange-60\": \"#ffeae0\",\n\t\t\t\"primitive-orange-80\": \"#ffe2d6\",\n\t\t\t\"primitive-orange-100\": \"#ffdbcb\",\n\t\t\t\"primitive-orange-150\": \"#ffc9ae\",\n\t\t\t\"primitive-orange-200\": \"#ffb691\",\n\t\t\t\"primitive-orange-250\": \"#ffa271\",\n\t\t\t\"primitive-orange-300\": \"#ff8d4c\",\n\t\t\t\"primitive-orange-350\": \"#fe761c\",\n\t\t\t\"primitive-orange-400\": \"#ec690a\",\n\t\t\t\"primitive-orange-450\": \"#d95f00\",\n\t\t\t\"primitive-orange-500\": \"#c55500\",\n\t\t\t\"primitive-orange-550\": \"#b14c00\",\n\t\t\t\"primitive-orange-600\": \"#9e4300\",\n\t\t\t\"primitive-orange-650\": \"#8b3a00\",\n\t\t\t\"primitive-orange-700\": \"#783100\",\n\t\t\t\"primitive-orange-750\": \"#662900\",\n\t\t\t\"primitive-orange-800\": \"#552100\",\n\t\t\t\"primitive-yellow-20\": \"#fff8f2\",\n\t\t\t\"primitive-yellow-40\": \"#fff2dd\",\n\t\t\t\"primitive-yellow-60\": \"#ffecc8\",\n\t\t\t\"primitive-yellow-80\": \"#ffe5b2\",\n\t\t\t\"primitive-yellow-100\": \"#ffdf9b\",\n\t\t\t\"primitive-yellow-150\": \"#ffce58\",\n\t\t\t\"primitive-yellow-200\": \"#f7be20\",\n\t\t\t\"primitive-yellow-250\": \"#e7b007\",\n\t\t\t\"primitive-yellow-300\": \"#d7a300\",\n\t\t\t\"primitive-yellow-350\": \"#c69700\",\n\t\t\t\"primitive-yellow-400\": \"#b68a00\",\n\t\t\t\"primitive-yellow-450\": \"#a67e00\",\n\t\t\t\"primitive-yellow-500\": \"#967100\",\n\t\t\t\"primitive-yellow-550\": \"#876500\",\n\t\t\t\"primitive-yellow-600\": \"#785a00\",\n\t\t\t\"primitive-yellow-650\": \"#694e00\",\n\t\t\t\"primitive-yellow-700\": \"#5b4300\",\n\t\t\t\"primitive-yellow-750\": \"#4d3800\",\n\t\t\t\"primitive-yellow-800\": \"#3f2e00\",\n\t\t\t\"primitive-lime-20\": \"#f0ffd6\",\n\t\t\t\"primitive-lime-40\": \"#ddffae\",\n\t\t\t\"primitive-lime-60\": \"#c8ff7f\",\n\t\t\t\"primitive-lime-80\": \"#b2fe4a\",\n\t\t\t\"primitive-lime-100\": \"#adf844\",\n\t\t\t\"primitive-lime-150\": \"#a0e936\",\n\t\t\t\"primitive-lime-200\": \"#92da26\",\n\t\t\t\"primitive-lime-250\": \"#85cc10\",\n\t\t\t\"primitive-lime-300\": \"#7abd00\",\n\t\t\t\"primitive-lime-350\": \"#70af00\",\n\t\t\t\"primitive-lime-400\": \"#67a000\",\n\t\t\t\"primitive-lime-450\": \"#5d9200\",\n\t\t\t\"primitive-lime-500\": \"#548400\",\n\t\t\t\"primitive-lime-550\": \"#4b7600\",\n\t\t\t\"primitive-lime-600\": \"#426900\",\n\t\t\t\"primitive-lime-650\": \"#395c00\",\n\t\t\t\"primitive-lime-700\": \"#304f00\",\n\t\t\t\"primitive-lime-750\": \"#284300\",\n\t\t\t\"primitive-lime-800\": \"#203600\",\n\t\t\t\"primitive-green-20\": \"#ebffe8\",\n\t\t\t\"primitive-green-40\": \"#d2ffd3\",\n\t\t\t\"primitive-green-60\": \"#b7ffbe\",\n\t\t\t\"primitive-green-80\": \"#95ffa6\",\n\t\t\t\"primitive-green-100\": \"#6bff8f\",\n\t\t\t\"primitive-green-150\": \"#5bf082\",\n\t\t\t\"primitive-green-200\": \"#4ae176\",\n\t\t\t\"primitive-green-250\": \"#38d369\",\n\t\t\t\"primitive-green-300\": \"#21c45d\",\n\t\t\t\"primitive-green-350\": \"#00b652\",\n\t\t\t\"primitive-green-400\": \"#00a74b\",\n\t\t\t\"primitive-green-450\": \"#009843\",\n\t\t\t\"primitive-green-500\": \"#008a3c\",\n\t\t\t\"primitive-green-550\": \"#007b35\",\n\t\t\t\"primitive-green-600\": \"#006e2f\",\n\t\t\t\"primitive-green-650\": \"#006028\",\n\t\t\t\"primitive-green-700\": \"#005321\",\n\t\t\t\"primitive-green-750\": \"#00461b\",\n\t\t\t\"primitive-green-800\": \"#003915\",\n\t\t\t\"primitive-cyan-20\": \"#f0fbff\",\n\t\t\t\"primitive-cyan-40\": \"#e0f8ff\",\n\t\t\t\"primitive-cyan-60\": \"#d0f4ff\",\n\t\t\t\"primitive-cyan-80\": \"#bef0ff\",\n\t\t\t\"primitive-cyan-100\": \"#acedff\",\n\t\t\t\"primitive-cyan-150\": \"#74e3ff\",\n\t\t\t\"primitive-cyan-200\": \"#49d7f6\",\n\t\t\t\"primitive-cyan-250\": \"#34c9e8\",\n\t\t\t\"primitive-cyan-300\": \"#13bbda\",\n\t\t\t\"primitive-cyan-350\": \"#00adca\",\n\t\t\t\"primitive-cyan-400\": \"#009eb9\",\n\t\t\t\"primitive-cyan-450\": \"#0090a9\",\n\t\t\t\"primitive-cyan-500\": \"#008399\",\n\t\t\t\"primitive-cyan-550\": \"#007589\",\n\t\t\t\"primitive-cyan-600\": \"#00687a\",\n\t\t\t\"primitive-cyan-650\": \"#005b6b\",\n\t\t\t\"primitive-cyan-700\": \"#004e5c\",\n\t\t\t\"primitive-cyan-750\": \"#00424e\",\n\t\t\t\"primitive-cyan-800\": \"#003640\",\n\t\t\t\"primitive-sky-20\": \"#f6faff\",\n\t\t\t\"primitive-sky-40\": \"#ebf5ff\",\n\t\t\t\"primitive-sky-60\": \"#e0f0ff\",\n\t\t\t\"primitive-sky-80\": \"#d4ebff\",\n\t\t\t\"primitive-sky-100\": \"#c9e6ff\",\n\t\t\t\"primitive-sky-150\": \"#abdaff\",\n\t\t\t\"primitive-sky-200\": \"#8aceff\",\n\t\t\t\"primitive-sky-250\": \"#62c2ff\",\n\t\t\t\"primitive-sky-300\": \"#35b5fb\",\n\t\t\t\"primitive-sky-350\": \"#19a7ec\",\n\t\t\t\"primitive-sky-400\": \"#009adb\",\n\t\t\t\"primitive-sky-450\": \"#008cc8\",\n\t\t\t\"primitive-sky-500\": \"#007fb5\",\n\t\t\t\"primitive-sky-550\": \"#0071a3\",\n\t\t\t\"primitive-sky-600\": \"#006491\",\n\t\t\t\"primitive-sky-650\": \"#00587f\",\n\t\t\t\"primitive-sky-700\": \"#004c6e\",\n\t\t\t\"primitive-sky-750\": \"#00405e\",\n\t\t\t\"primitive-sky-800\": \"#00344d\",\n\t\t\t\"primitive-blue-20\": \"#f9f9ff\",\n\t\t\t\"primitive-blue-40\": \"#f1f3ff\",\n\t\t\t\"primitive-blue-60\": \"#e9edff\",\n\t\t\t\"primitive-blue-80\": \"#e0e8ff\",\n\t\t\t\"primitive-blue-100\": \"#d8e2ff\",\n\t\t\t\"primitive-blue-150\": \"#c3d4ff\",\n\t\t\t\"primitive-blue-200\": \"#adc6ff\",\n\t\t\t\"primitive-blue-250\": \"#97b8ff\",\n\t\t\t\"primitive-blue-300\": \"#80aaff\",\n\t\t\t\"primitive-blue-350\": \"#689cff\",\n\t\t\t\"primitive-blue-400\": \"#4c8eff\",\n\t\t\t\"primitive-blue-450\": \"#3881f4\",\n\t\t\t\"primitive-blue-500\": \"#2473e6\",\n\t\t\t\"primitive-blue-550\": \"#0166d8\",\n\t\t\t\"primitive-blue-600\": \"#005ac1\",\n\t\t\t\"primitive-blue-650\": \"#004faa\",\n\t\t\t\"primitive-blue-700\": \"#004494\",\n\t\t\t\"primitive-blue-750\": \"#00397e\",\n\t\t\t\"primitive-blue-800\": \"#002e69\",\n\t\t\t\"primitive-cerulean-blue-20\": \"#fbf8ff\",\n\t\t\t\"primitive-cerulean-blue-40\": \"#f4f2ff\",\n\t\t\t\"primitive-cerulean-blue-60\": \"#ececff\",\n\t\t\t\"primitive-cerulean-blue-80\": \"#e5e6ff\",\n\t\t\t\"primitive-cerulean-blue-100\": \"#dee1ff\",\n\t\t\t\"primitive-cerulean-blue-150\": \"#ccd2ff\",\n\t\t\t\"primitive-cerulean-blue-200\": \"#bac3ff\",\n\t\t\t\"primitive-cerulean-blue-250\": \"#a8b4ff\",\n\t\t\t\"primitive-cerulean-blue-300\": \"#95a6ff\",\n\t\t\t\"primitive-cerulean-blue-350\": \"#8397ff\",\n\t\t\t\"primitive-cerulean-blue-400\": \"#7087ff\",\n\t\t\t\"primitive-cerulean-blue-450\": \"#5d78ff\",\n\t\t\t\"primitive-cerulean-blue-500\": \"#4a68fc\",\n\t\t\t\"primitive-cerulean-blue-550\": \"#3b5aef\",\n\t\t\t\"primitive-cerulean-blue-600\": \"#2a4de2\",\n\t\t\t\"primitive-cerulean-blue-650\": \"#163ed6\",\n\t\t\t\"primitive-cerulean-blue-700\": \"#0031c5\",\n\t\t\t\"primitive-cerulean-blue-750\": \"#0029a9\",\n\t\t\t\"primitive-cerulean-blue-800\": \"#00208d\",\n\t\t\t\"primitive-violet-20\": \"#fef7ff\",\n\t\t\t\"primitive-violet-40\": \"#f8f1ff\",\n\t\t\t\"primitive-violet-60\": \"#f3eaff\",\n\t\t\t\"primitive-violet-80\": \"#eee4ff\",\n\t\t\t\"primitive-violet-100\": \"#e9ddff\",\n\t\t\t\"primitive-violet-150\": \"#ddcdff\",\n\t\t\t\"primitive-violet-200\": \"#d0bcff\",\n\t\t\t\"primitive-violet-250\": \"#c4acff\",\n\t\t\t\"primitive-violet-300\": \"#b89bff\",\n\t\t\t\"primitive-violet-350\": \"#ac8aff\",\n\t\t\t\"primitive-violet-400\": \"#a078ff\",\n\t\t\t\"primitive-violet-450\": \"#9466ff\",\n\t\t\t\"primitive-violet-500\": \"#8758f1\",\n\t\t\t\"primitive-violet-550\": \"#7a4ae3\",\n\t\t\t\"primitive-violet-600\": \"#6d3bd6\",\n\t\t\t\"primitive-violet-650\": \"#612bc9\",\n\t\t\t\"primitive-violet-700\": \"#5517bd\",\n\t\t\t\"primitive-violet-750\": \"#4900ad\",\n\t\t\t\"primitive-violet-800\": \"#3c0091\",\n\t\t\t\"primitive-purple-20\": \"#fff7fe\",\n\t\t\t\"primitive-purple-40\": \"#fcf0ff\",\n\t\t\t\"primitive-purple-60\": \"#f8e9ff\",\n\t\t\t\"primitive-purple-80\": \"#f4e2ff\",\n\t\t\t\"primitive-purple-100\": \"#f0dbff\",\n\t\t\t\"primitive-purple-150\": \"#e7c9ff\",\n\t\t\t\"primitive-purple-200\": \"#deb7ff\",\n\t\t\t\"primitive-purple-250\": \"#d4a5ff\",\n\t\t\t\"primitive-purple-300\": \"#cb93ff\",\n\t\t\t\"primitive-purple-350\": \"#c180ff\",\n\t\t\t\"primitive-purple-400\": \"#b76cff\",\n\t\t\t\"primitive-purple-450\": \"#ad59fb\",\n\t\t\t\"primitive-purple-500\": \"#9f4aed\",\n\t\t\t\"primitive-purple-550\": \"#923be0\",\n\t\t\t\"primitive-purple-600\": \"#842ad2\",\n\t\t\t\"primitive-purple-650\": \"#7714c5\",\n\t\t\t\"primitive-purple-700\": \"#6900b2\",\n\t\t\t\"primitive-purple-750\": \"#590099\",\n\t\t\t\"primitive-purple-800\": \"#4a0080\",\n\t\t\t\"primitive-fuchsia-20\": \"#fff7fa\",\n\t\t\t\"primitive-fuchsia-40\": \"#ffeffb\",\n\t\t\t\"primitive-fuchsia-60\": \"#ffe7fb\",\n\t\t\t\"primitive-fuchsia-80\": \"#ffdefc\",\n\t\t\t\"primitive-fuchsia-100\": \"#ffd6fd\",\n\t\t\t\"primitive-fuchsia-150\": \"#fec0ff\",\n\t\t\t\"primitive-fuchsia-200\": \"#faabff\",\n\t\t\t\"primitive-fuchsia-250\": \"#f695ff\",\n\t\t\t\"primitive-fuchsia-300\": \"#f17eff\",\n\t\t\t\"primitive-fuchsia-350\": \"#eb64ff\",\n\t\t\t\"primitive-fuchsia-400\": \"#e14ef8\",\n\t\t\t\"primitive-fuchsia-450\": \"#d13ee9\",\n\t\t\t\"primitive-fuchsia-500\": \"#c22cdb\",\n\t\t\t\"primitive-fuchsia-550\": \"#b315cd\",\n\t\t\t\"primitive-fuchsia-600\": \"#a200bb\",\n\t\t\t\"primitive-fuchsia-650\": \"#8f00a4\",\n\t\t\t\"primitive-fuchsia-700\": \"#7c008f\",\n\t\t\t\"primitive-fuchsia-750\": \"#69007a\",\n\t\t\t\"primitive-fuchsia-800\": \"#570065\",\n\t\t\t\"primitive-pink-20\": \"#fff8f8\",\n\t\t\t\"primitive-pink-40\": \"#fff0f3\",\n\t\t\t\"primitive-pink-60\": \"#ffe8ee\",\n\t\t\t\"primitive-pink-80\": \"#ffe0e9\",\n\t\t\t\"primitive-pink-100\": \"#ffd9e4\",\n\t\t\t\"primitive-pink-150\": \"#ffc5d9\",\n\t\t\t\"primitive-pink-200\": \"#ffb0cd\",\n\t\t\t\"primitive-pink-250\": \"#ff9ac2\",\n\t\t\t\"primitive-pink-300\": \"#ff82b7\",\n\t\t\t\"primitive-pink-350\": \"#ff67ad\",\n\t\t\t\"primitive-pink-400\": \"#f651a1\",\n\t\t\t\"primitive-pink-450\": \"#e64394\",\n\t\t\t\"primitive-pink-500\": \"#d53587\",\n\t\t\t\"primitive-pink-550\": \"#c4267a\",\n\t\t\t\"primitive-pink-600\": \"#b4146d\",\n\t\t\t\"primitive-pink-650\": \"#a20060\",\n\t\t\t\"primitive-pink-700\": \"#8c0053\",\n\t\t\t\"primitive-pink-750\": \"#780046\",\n\t\t\t\"primitive-pink-800\": \"#640039\",\n\t\t\t\"primitive-rose-20\": \"#fff8f7\",\n\t\t\t\"primitive-rose-40\": \"#fff0f0\",\n\t\t\t\"primitive-rose-60\": \"#ffe9e9\",\n\t\t\t\"primitive-rose-80\": \"#ffe1e2\",\n\t\t\t\"primitive-rose-100\": \"#ffdadb\",\n\t\t\t\"primitive-rose-150\": \"#ffc6c9\",\n\t\t\t\"primitive-rose-200\": \"#ffb2b7\",\n\t\t\t\"primitive-rose-250\": \"#ff9ea5\",\n\t\t\t\"primitive-rose-300\": \"#ff8792\",\n\t\t\t\"primitive-rose-350\": \"#ff6e7f\",\n\t\t\t\"primitive-rose-400\": \"#ff506b\",\n\t\t\t\"primitive-rose-450\": \"#f13d5d\",\n\t\t\t\"primitive-rose-500\": \"#e02f52\",\n\t\t\t\"primitive-rose-550\": \"#ce2046\",\n\t\t\t\"primitive-rose-600\": \"#bc0b3b\",\n\t\t\t\"primitive-rose-650\": \"#a70032\",\n\t\t\t\"primitive-rose-700\": \"#91002b\",\n\t\t\t\"primitive-rose-750\": \"#7c0023\",\n\t\t\t\"primitive-rose-800\": \"#67001c\",\n\t\t\t\"primitive-shade-16\": \"#191b2428\",\n\t\t\t\"primitive-engross-20\": \"#fbf8ff\",\n\t\t\t\"primitive-engross-40\": \"#f4f2ff\",\n\t\t\t\"primitive-engross-60\": \"#edecff\",\n\t\t\t\"primitive-engross-80\": \"#e6e6ff\",\n\t\t\t\"primitive-engross-100\": \"#dfe0ff\",\n\t\t\t\"primitive-engross-150\": \"#cfd2f7\",\n\t\t\t\"primitive-engross-200\": \"#c1c4e9\",\n\t\t\t\"primitive-engross-250\": \"#b3b6db\",\n\t\t\t\"primitive-engross-300\": \"#a6a9cd\",\n\t\t\t\"primitive-engross-350\": \"#989bbf\",\n\t\t\t\"primitive-engross-400\": \"#8b8eb1\",\n\t\t\t\"primitive-engross-450\": \"#7e81a3\",\n\t\t\t\"primitive-engross-500\": \"#717596\",\n\t\t\t\"primitive-engross-550\": \"#656889\",\n\t\t\t\"primitive-engross-600\": \"#595c7c\",\n\t\t\t\"primitive-engross-650\": \"#4d5070\",\n\t\t\t\"primitive-engross-700\": \"#414563\",\n\t\t\t\"primitive-engross-750\": \"#353957\",\n\t\t\t\"primitive-emerald-20\": \"#e8ffef\",\n\t\t\t\"primitive-emerald-40\": \"#cdffe2\",\n\t\t\t\"primitive-emerald-60\": \"#aeffd5\",\n\t\t\t\"primitive-emerald-80\": \"#86ffc7\",\n\t\t\t\"primitive-emerald-100\": \"#6dfcbe\",\n\t\t\t\"primitive-emerald-150\": \"#5dedb0\",\n\t\t\t\"primitive-emerald-200\": \"#4cdfa3\",\n\t\t\t\"primitive-emerald-250\": \"#39d096\",\n\t\t\t\"primitive-emerald-300\": \"#21c289\",\n\t\t\t\"primitive-emerald-350\": \"#00b47d\",\n\t\t\t\"primitive-emerald-400\": \"#00a572\",\n\t\t\t\"primitive-emerald-450\": \"#009668\",\n\t\t\t\"primitive-emerald-500\": \"#00885e\",\n\t\t\t\"primitive-emerald-550\": \"#007a54\",\n\t\t\t\"primitive-emerald-600\": \"#006c4a\",\n\t\t\t\"primitive-emerald-650\": \"#005f40\",\n\t\t\t\"primitive-emerald-700\": \"#005237\",\n\t\t\t\"primitive-emerald-750\": \"#00452d\",\n\t\t\t\"primitive-emerald-800\": \"#003824\",\n\t\t\t\"primitive-teal-20\": \"#e5fff9\",\n\t\t\t\"primitive-teal-40\": \"#c6fff4\",\n\t\t\t\"primitive-teal-60\": \"#a0ffef\",\n\t\t\t\"primitive-teal-80\": \"#76feea\",\n\t\t\t\"primitive-teal-100\": \"#70f8e5\",\n\t\t\t\"primitive-teal-150\": \"#5fead7\",\n\t\t\t\"primitive-teal-200\": \"#4edbc9\",\n\t\t\t\"primitive-teal-250\": \"#3bcdbb\",\n\t\t\t\"primitive-teal-300\": \"#23bfad\",\n\t\t\t\"primitive-teal-350\": \"#00b1a0\",\n\t\t\t\"primitive-teal-400\": \"#00a393\",\n\t\t\t\"primitive-teal-450\": \"#009486\",\n\t\t\t\"primitive-teal-500\": \"#008679\",\n\t\t\t\"primitive-teal-550\": \"#00786c\",\n\t\t\t\"primitive-teal-600\": \"#006a60\",\n\t\t\t\"primitive-teal-650\": \"#005d54\",\n\t\t\t\"primitive-teal-700\": \"#005048\",\n\t\t\t\"primitive-teal-750\": \"#00443c\",\n\t\t\t\"primitive-teal-800\": \"#003731\",\n\t\t\t\"primitive-amber-20\": \"#fff8f4\",\n\t\t\t\"primitive-amber-40\": \"#fff1e5\",\n\t\t\t\"primitive-amber-60\": \"#ffebd6\",\n\t\t\t\"primitive-amber-80\": \"#ffe4c7\",\n\t\t\t\"primitive-amber-100\": \"#ffddb7\",\n\t\t\t\"primitive-amber-150\": \"#ffcb8d\",\n\t\t\t\"primitive-amber-200\": \"#ffb95d\",\n\t\t\t\"primitive-amber-250\": \"#fda61a\",\n\t\t\t\"primitive-amber-300\": \"#ed9900\",\n\t\t\t\"primitive-amber-350\": \"#db8d00\",\n\t\t\t\"primitive-amber-400\": \"#c98100\",\n\t\t\t\"primitive-amber-450\": \"#b87500\",\n\t\t\t\"primitive-amber-500\": \"#a66a00\",\n\t\t\t\"primitive-amber-550\": \"#955f00\",\n\t\t\t\"primitive-amber-600\": \"#855400\",\n\t\t\t\"primitive-amber-650\": \"#754900\",\n\t\t\t\"primitive-amber-700\": \"#653e00\",\n\t\t\t\"primitive-amber-750\": \"#553400\",\n\t\t\t\"primitive-amber-800\": \"#462a00\",\n\t\t\t\"primitive-engross-800\": \"#2a2e4c\",\n\t\t\t\"primitive-engross-820\": \"#262a47\",\n\t\t\t\"primitive-flow-820\": \"#292c35\",\n\t\t\t\"primitive-flow-840\": \"#252830\",\n\t\t\t\"primitive-red-820\": \"#600008\",\n\t\t\t\"primitive-red-840\": \"#580006\",\n\t\t\t\"primitive-orange-820\": \"#4e1d00\",\n\t\t\t\"primitive-orange-840\": \"#471a00\",\n\t\t\t\"primitive-amber-820\": \"#412600\",\n\t\t\t\"primitive-amber-840\": \"#3b2300\",\n\t\t\t\"primitive-yellow-820\": \"#3a2a00\",\n\t\t\t\"primitive-yellow-840\": \"#342600\",\n\t\t\t\"primitive-lime-820\": \"#1d3200\",\n\t\t\t\"primitive-lime-840\": \"#1a2d00\",\n\t\t\t\"primitive-green-820\": \"#003412\",\n\t\t\t\"primitive-green-840\": \"#002f10\",\n\t\t\t\"primitive-emerald-820\": \"#003321\",\n\t\t\t\"primitive-emerald-840\": \"#002f1e\",\n\t\t\t\"primitive-teal-820\": \"#00332d\",\n\t\t\t\"primitive-teal-840\": \"#002e29\",\n\t\t\t\"primitive-cyan-820\": \"#00313b\",\n\t\t\t\"primitive-cyan-840\": \"#002c35\",\n\t\t\t\"primitive-sky-820\": \"#002f47\",\n\t\t\t\"primitive-sky-840\": \"#002b41\",\n\t\t\t\"primitive-blue-820\": \"#002a61\",\n\t\t\t\"primitive-blue-840\": \"#002659\",\n\t\t\t\"primitive-cerulean-blue-820\": \"#001d83\",\n\t\t\t\"primitive-cerulean-blue-840\": \"#001a78\",\n\t\t\t\"primitive-violet-820\": \"#370086\",\n\t\t\t\"primitive-violet-840\": \"#32007b\",\n\t\t\t\"primitive-purple-820\": \"#440076\",\n\t\t\t\"primitive-purple-840\": \"#3e006c\",\n\t\t\t\"primitive-fuchsia-820\": \"#50005d\",\n\t\t\t\"primitive-fuchsia-840\": \"#490056\",\n\t\t\t\"primitive-pink-820\": \"#5c0034\",\n\t\t\t\"primitive-pink-840\": \"#540030\",\n\t\t\t\"primitive-rose-820\": \"#5f0019\",\n\t\t\t\"primitive-rose-840\": \"#570016\",\n\t\t\t\"primitive-flow-light-alpha-820\": \"#00040fd6\",\n\t\t\t\"primitive-flow-light-alpha-840\": \"#01040ddb\",\n\t\t\t\"primitive-flow-dark-alpha-820\": \"#e2f0f814\",\n\t\t\t\"primitive-flow-dark-alpha-860\": \"#dfe1eb0a\",\n\t\t\t\"primitive-flow-860\": \"#21232c\",\n\t\t\t\"primitive-flow-light-alpha-860\": \"#030511e0\",\n\t\t\t\"primitive-flow-dark-alpha-880\": \"#dfe1eb05\",\n\t\t\t\"primitive-engross-840\": \"#222642\",\n\t\t\t\"primitive-red-860\": \"#500005\",\n\t\t\t\"primitive-orange-860\": \"#411700\",\n\t\t\t\"primitive-amber-860\": \"#351f00\",\n\t\t\t\"primitive-yellow-860\": \"#2f2200\",\n\t\t\t\"primitive-lime-860\": \"#172900\",\n\t\t\t\"primitive-green-860\": \"#002b0e\",\n\t\t\t\"primitive-emerald-860\": \"#002a1a\",\n\t\t\t\"primitive-teal-860\": \"#002924\",\n\t\t\t\"primitive-cyan-860\": \"#002830\",\n\t\t\t\"primitive-sky-860\": \"#00263b\",\n\t\t\t\"primitive-blue-860\": \"#002251\",\n\t\t\t\"primitive-cerulean-blue-860\": \"#00176e\",\n\t\t\t\"primitive-violet-860\": \"#2d0070\",\n\t\t\t\"primitive-purple-860\": \"#380063\",\n\t\t\t\"primitive-fuchsia-860\": \"#43004e\",\n\t\t\t\"primitive-pink-860\": \"#4c002b\",\n\t\t\t\"primitive-rose-860\": \"#4f0013\",\n\t\t\t\"primitive-engross-860\": \"#1e213e\",\n\t\t\t\"primitive-engross-880\": \"#191d3a\",\n\t\t\t\"primitive-engross-900\": \"#151935\",\n\t\t\t\"primitive-immerse-20\": \"#faf8ff\",\n\t\t\t\"primitive-immerse-40\": \"#f3f2ff\",\n\t\t\t\"primitive-immerse-60\": \"#ebedff\",\n\t\t\t\"primitive-immerse-80\": \"#e5e7fc\",\n\t\t\t\"primitive-immerse-100\": \"#dfe1f6\",\n\t\t\t\"primitive-immerse-150\": \"#d1d3e8\",\n\t\t\t\"primitive-immerse-200\": \"#c3c5d9\",\n\t\t\t\"primitive-immerse-250\": \"#b5b8cb\",\n\t\t\t\"primitive-immerse-300\": \"#a8aabe\",\n\t\t\t\"primitive-immerse-350\": \"#9a9db0\",\n\t\t\t\"primitive-immerse-400\": \"#8d90a2\",\n\t\t\t\"primitive-immerse-450\": \"#808395\",\n\t\t\t\"primitive-immerse-500\": \"#737688\",\n\t\t\t\"primitive-immerse-550\": \"#676a7b\",\n\t\t\t\"primitive-immerse-600\": \"#5a5e6f\",\n\t\t\t\"primitive-immerse-650\": \"#4e5262\",\n\t\t\t\"primitive-immerse-700\": \"#434656\",\n\t\t\t\"primitive-immerse-750\": \"#373b4b\",\n\t\t\t\"primitive-immerse-800\": \"#2c303f\",\n\t\t\t\"primitive-immerse-820\": \"#282b3b\",\n\t\t\t\"primitive-immerse-840\": \"#242736\",\n\t\t\t\"primitive-immerse-860\": \"#202332\",\n\t\t\t\"primitive-immerse-880\": \"#1b1f2e\",\n\t\t\t\"primitive-immerse-900\": \"#171b29\",\n\t\t\t\"primitive-flow-880\": \"#1d1f28\",\n\t\t\t\"primitive-flow-900\": \"#191b24\",\n\t\t\t\"primitive-flow-light-alpha-880\": \"#01030ee2\",\n\t\t\t\"primitive-flow-light-alpha-900\": \"#01030de8\",\n\t\t\t\"primitive-flow-dark-alpha-840\": \"#e1f3ec0f\",\n\t\t\t\"primitive-flow-dark-alpha-900\": \"#191b24\",\n\t\t\t\"primitive-red-880\": \"#480004\",\n\t\t\t\"primitive-red-900\": \"#410003\",\n\t\t\t\"primitive-orange-880\": \"#3a1400\",\n\t\t\t\"primitive-orange-900\": \"#341100\",\n\t\t\t\"primitive-amber-880\": \"#301b00\",\n\t\t\t\"primitive-amber-900\": \"#2a1700\",\n\t\t\t\"primitive-yellow-880\": \"#2a1e00\",\n\t\t\t\"primitive-yellow-900\": \"#251a00\",\n\t\t\t\"primitive-lime-880\": \"#142400\",\n\t\t\t\"primitive-lime-900\": \"#112000\",\n\t\t\t\"primitive-green-880\": \"#00260b\",\n\t\t\t\"primitive-green-900\": \"#002109\",\n\t\t\t\"primitive-emerald-880\": \"#002517\",\n\t\t\t\"primitive-emerald-900\": \"#002114\",\n\t\t\t\"primitive-teal-880\": \"#002520\",\n\t\t\t\"primitive-teal-900\": \"#00201c\",\n\t\t\t\"primitive-cyan-880\": \"#00232b\",\n\t\t\t\"primitive-cyan-900\": \"#001f26\",\n\t\t\t\"primitive-sky-880\": \"#002235\",\n\t\t\t\"primitive-sky-900\": \"#001e2f\",\n\t\t\t\"primitive-blue-880\": \"#001e49\",\n\t\t\t\"primitive-blue-900\": \"#001a41\",\n\t\t\t\"primitive-cerulean-blue-880\": \"#001463\",\n\t\t\t\"primitive-cerulean-blue-900\": \"#001159\",\n\t\t\t\"primitive-violet-880\": \"#280066\",\n\t\t\t\"primitive-violet-900\": \"#23005c\",\n\t\t\t\"primitive-purple-880\": \"#320059\",\n\t\t\t\"primitive-purple-900\": \"#2c0050\",\n\t\t\t\"primitive-fuchsia-880\": \"#3c0046\",\n\t\t\t\"primitive-fuchsia-900\": \"#35003f\",\n\t\t\t\"primitive-pink-880\": \"#450026\",\n\t\t\t\"primitive-pink-900\": \"#3e0022\",\n\t\t\t\"primitive-rose-880\": \"#480010\",\n\t\t\t\"primitive-rose-900\": \"#40000e\"\n\t\t}\n\t},\n\t\"scheme\": {\n\t\t\"desktop\": {\n\t\t\t\"semantic-spacing-1\": 1,\n\t\t\t\"semantic-spacing-2\": 2,\n\t\t\t\"semantic-spacing-4\": 4,\n\t\t\t\"semantic-spacing-6\": 6,\n\t\t\t\"semantic-spacing-8\": 8,\n\t\t\t\"semantic-spacing-10\": 10,\n\t\t\t\"semantic-spacing-12\": 12,\n\t\t\t\"semantic-spacing-16\": 16,\n\t\t\t\"semantic-spacing-20\": 20,\n\t\t\t\"semantic-spacing-24\": 24,\n\t\t\t\"semantic-spacing-32\": 32,\n\t\t\t\"semantic-spacing-40\": 40,\n\t\t\t\"semantic-spacing-48\": 48,\n\t\t\t\"semantic-spacing-56\": 56,\n\t\t\t\"semantic-radius-4\": 4,\n\t\t\t\"semantic-radius-8\": 8,\n\t\t\t\"semantic-radius-10\": 10,\n\t\t\t\"semantic-radius-16\": 16,\n\t\t\t\"semantic-radius-24\": 24,\n\t\t\t\"semantic-radius-max\": 9999,\n\t\t\t\"semantic-stroke-weight-1\": 1,\n\t\t\t\"semantic-stroke-weight-2\": 2,\n\t\t\t\"semantic-stroke-weight-4\": 4,\n\t\t\t\"semantic-stroke-weight-6\": 6,\n\t\t\t\"semantic-opacity-0\": 0,\n\t\t\t\"semantic-opacity-5\": 5,\n\t\t\t\"semantic-opacity-8\": 8,\n\t\t\t\"semantic-opacity-12\": 12,\n\t\t\t\"semantic-opacity-16\": 16,\n\t\t\t\"semantic-opacity-23\": 23,\n\t\t\t\"semantic-opacity-29\": 29,\n\t\t\t\"semantic-opacity-36\": 36,\n\t\t\t\"semantic-opacity-44\": 44,\n\t\t\t\"semantic-opacity-54\": 54,\n\t\t\t\"semantic-opacity-63\": 63,\n\t\t\t\"semantic-opacity-76\": 76,\n\t\t\t\"semantic-opacity-100\": 100,\n\t\t\t\"semantic-radius-6\": 6,\n\t\t\t\"semantic-spacing-0\": 0,\n\t\t\t\"semantic-radius-2\": 2,\n\t\t\t\"semantic-opacity-91\": 91,\n\t\t\t\"semantic-breakpoint-min\": 1200,\n\t\t\t\"semantic-breakpoint-max\": 2560,\n\t\t\t\"semantic-margin-lg\": 28,\n\t\t\t\"semantic-margin-md\": 24,\n\t\t\t\"semantic-radius-12\": 12,\n\t\t\t\"semantic-radius-0\": 0,\n\t\t\t\"semantic-margin-sm\": 20,\n\t\t\t\"semantic-margin-xl\": 32,\n\t\t\t\"semantic-spacing-64\": 64,\n\t\t\t\"semantic-spacing-72\": 72,\n\t\t\t\"semantic-margin-2xl\": 40,\n\t\t\t\"primitive-unit-16\": 16,\n\t\t\t\"primitive-unit-20\": 20,\n\t\t\t\"primitive-unit-12\": 12,\n\t\t\t\"primitive-unit-72\": 72,\n\t\t\t\"primitive-unit-6\": 6,\n\t\t\t\"primitive-unit-144\": 144,\n\t\t\t\"primitive-unit-112\": 112,\n\t\t\t\"primitive-unit-96\": 96,\n\t\t\t\"primitive-unit-128\": 128,\n\t\t\t\"primitive-unit-2\": 2,\n\t\t\t\"primitive-unit-4\": 4,\n\t\t\t\"primitive-unit-80\": 80,\n\t\t\t\"primitive-unit-64\": 64,\n\t\t\t\"primitive-unit-56\": 56,\n\t\t\t\"primitive-unit-48\": 48,\n\t\t\t\"primitive-unit-24\": 24,\n\t\t\t\"primitive-unit-40\": 40,\n\t\t\t\"primitive-unit-10\": 10,\n\t\t\t\"primitive-unit-32\": 32,\n\t\t\t\"primitive-unit-1\": 1,\n\t\t\t\"primitive-unit-8\": 8,\n\t\t\t\"primitive-unit-28\": 28,\n\t\t\t\"primitive-unit-0\": 0,\n\t\t\t\"semantic-spacing-80\": 80,\n\t\t\t\"semantic-spacing-96\": 96,\n\t\t\t\"semantic-spacing-112\": 112,\n\t\t\t\"semantic-spacing-128\": 128,\n\t\t\t\"semantic-spacing-144\": 144,\n\t\t\t\"semantic-margin-3xl\": 48,\n\t\t\t\"semantic-margin-xs\": 16,\n\t\t\t\"primitive-unit-3\": 3,\n\t\t\t\"semantic-spacing-3\": 3,\n\t\t\t\"semantic-stroke-weight-3\": 3,\n\t\t\t\"semantic-margin-2xs\": 12,\n\t\t\t\"semantic-spacing-28\": 28,\n\t\t\t\"semantic-position-24\": 24,\n\t\t\t\"semantic-position-16\": 16,\n\t\t\t\"semantic-position-8\": 8,\n\t\t\t\"semantic-position-4\": 4,\n\t\t\t\"semantic-position-0\": 0,\n\t\t\t\"semantic-position-6\": 6,\n\t\t\t\"semantic-position-2\": 2,\n\t\t\t\"semantic-position-1\": 1,\n\t\t\t\"semantic-position-3\": 3,\n\t\t\t\"semantic-position-12\": 12,\n\t\t\t\"primitive-unit-5\": 5,\n\t\t\t\"semantic-stroke-weight-5\": 5,\n\t\t\t\"semantic-margin-4xl\": 56,\n\t\t\t\"semantic-margin-5xl\": 64,\n\t\t\t\"semantic-margin-6xl\": 72\n\t\t},\n\t\t\"tablet\": {\n\t\t\t\"semantic-spacing-1\": 1,\n\t\t\t\"semantic-spacing-2\": 2,\n\t\t\t\"semantic-spacing-4\": 4,\n\t\t\t\"semantic-spacing-6\": 6,\n\t\t\t\"semantic-spacing-8\": 8,\n\t\t\t\"semantic-spacing-10\": 10,\n\t\t\t\"semantic-spacing-12\": 12,\n\t\t\t\"semantic-spacing-16\": 16,\n\t\t\t\"semantic-spacing-20\": 20,\n\t\t\t\"semantic-spacing-24\": 24,\n\t\t\t\"semantic-spacing-32\": 32,\n\t\t\t\"semantic-spacing-40\": 40,\n\t\t\t\"semantic-spacing-48\": 48,\n\t\t\t\"semantic-spacing-56\": 56,\n\t\t\t\"semantic-radius-4\": 4,\n\t\t\t\"semantic-radius-8\": 8,\n\t\t\t\"semantic-radius-10\": 10,\n\t\t\t\"semantic-radius-16\": 16,\n\t\t\t\"semantic-radius-24\": 24,\n\t\t\t\"semantic-radius-max\": 9999,\n\t\t\t\"semantic-stroke-weight-1\": 1,\n\t\t\t\"semantic-stroke-weight-2\": 2,\n\t\t\t\"semantic-stroke-weight-4\": 4,\n\t\t\t\"semantic-stroke-weight-6\": 6,\n\t\t\t\"semantic-opacity-0\": 0,\n\t\t\t\"semantic-opacity-5\": 5,\n\t\t\t\"semantic-opacity-8\": 8,\n\t\t\t\"semantic-opacity-12\": 12,\n\t\t\t\"semantic-opacity-16\": 16,\n\t\t\t\"semantic-opacity-23\": 23,\n\t\t\t\"semantic-opacity-29\": 29,\n\t\t\t\"semantic-opacity-36\": 36,\n\t\t\t\"semantic-opacity-44\": 44,\n\t\t\t\"semantic-opacity-54\": 54,\n\t\t\t\"semantic-opacity-63\": 63,\n\t\t\t\"semantic-opacity-76\": 76,\n\t\t\t\"semantic-opacity-100\": 100,\n\t\t\t\"semantic-radius-6\": 6,\n\t\t\t\"semantic-spacing-0\": 0,\n\t\t\t\"semantic-radius-2\": 2,\n\t\t\t\"semantic-opacity-91\": 91,\n\t\t\t\"semantic-breakpoint-min\": 768,\n\t\t\t\"semantic-breakpoint-max\": 1199,\n\t\t\t\"semantic-margin-lg\": 24,\n\t\t\t\"semantic-margin-md\": 20,\n\t\t\t\"semantic-radius-12\": 12,\n\t\t\t\"semantic-radius-0\": 0,\n\t\t\t\"semantic-margin-sm\": 16,\n\t\t\t\"semantic-margin-xl\": 28,\n\t\t\t\"semantic-spacing-64\": 64,\n\t\t\t\"semantic-spacing-72\": 72,\n\t\t\t\"semantic-margin-2xl\": 32,\n\t\t\t\"primitive-unit-16\": 16,\n\t\t\t\"primitive-unit-20\": 20,\n\t\t\t\"primitive-unit-12\": 12,\n\t\t\t\"primitive-unit-72\": 72,\n\t\t\t\"primitive-unit-6\": 6,\n\t\t\t\"primitive-unit-144\": 144,\n\t\t\t\"primitive-unit-112\": 112,\n\t\t\t\"primitive-unit-96\": 96,\n\t\t\t\"primitive-unit-128\": 128,\n\t\t\t\"primitive-unit-2\": 2,\n\t\t\t\"primitive-unit-4\": 4,\n\t\t\t\"primitive-unit-80\": 80,\n\t\t\t\"primitive-unit-64\": 64,\n\t\t\t\"primitive-unit-56\": 56,\n\t\t\t\"primitive-unit-48\": 48,\n\t\t\t\"primitive-unit-24\": 24,\n\t\t\t\"primitive-unit-40\": 40,\n\t\t\t\"primitive-unit-10\": 10,\n\t\t\t\"primitive-unit-32\": 32,\n\t\t\t\"primitive-unit-1\": 1,\n\t\t\t\"primitive-unit-8\": 8,\n\t\t\t\"primitive-unit-28\": 28,\n\t\t\t\"primitive-unit-0\": 0,\n\t\t\t\"semantic-spacing-80\": 80,\n\t\t\t\"semantic-spacing-96\": 96,\n\t\t\t\"semantic-spacing-112\": 112,\n\t\t\t\"semantic-spacing-128\": 128,\n\t\t\t\"semantic-spacing-144\": 144,\n\t\t\t\"semantic-margin-3xl\": 40,\n\t\t\t\"semantic-margin-xs\": 12,\n\t\t\t\"primitive-unit-3\": 3,\n\t\t\t\"semantic-spacing-3\": 3,\n\t\t\t\"semantic-stroke-weight-3\": 3,\n\t\t\t\"semantic-margin-2xs\": 10,\n\t\t\t\"semantic-spacing-28\": 28,\n\t\t\t\"semantic-position-24\": 24,\n\t\t\t\"semantic-position-16\": 16,\n\t\t\t\"semantic-position-8\": 8,\n\t\t\t\"semantic-position-4\": 4,\n\t\t\t\"semantic-position-0\": 0,\n\t\t\t\"semantic-position-6\": 6,\n\t\t\t\"semantic-position-2\": 2,\n\t\t\t\"semantic-position-1\": 1,\n\t\t\t\"semantic-position-3\": 3,\n\t\t\t\"semantic-position-12\": 12,\n\t\t\t\"primitive-unit-5\": 5,\n\t\t\t\"semantic-stroke-weight-5\": 5,\n\t\t\t\"semantic-margin-4xl\": 48,\n\t\t\t\"semantic-margin-5xl\": 56,\n\t\t\t\"semantic-margin-6xl\": 64\n\t\t},\n\t\t\"mobile\": {\n\t\t\t\"semantic-spacing-1\": 1,\n\t\t\t\"semantic-spacing-2\": 2,\n\t\t\t\"semantic-spacing-4\": 4,\n\t\t\t\"semantic-spacing-6\": 6,\n\t\t\t\"semantic-spacing-8\": 8,\n\t\t\t\"semantic-spacing-10\": 10,\n\t\t\t\"semantic-spacing-12\": 12,\n\t\t\t\"semantic-spacing-16\": 16,\n\t\t\t\"semantic-spacing-20\": 20,\n\t\t\t\"semantic-spacing-24\": 24,\n\t\t\t\"semantic-spacing-32\": 32,\n\t\t\t\"semantic-spacing-40\": 40,\n\t\t\t\"semantic-spacing-48\": 48,\n\t\t\t\"semantic-spacing-56\": 56,\n\t\t\t\"semantic-radius-4\": 4,\n\t\t\t\"semantic-radius-8\": 8,\n\t\t\t\"semantic-radius-10\": 10,\n\t\t\t\"semantic-radius-16\": 16,\n\t\t\t\"semantic-radius-24\": 24,\n\t\t\t\"semantic-radius-max\": 9999,\n\t\t\t\"semantic-stroke-weight-1\": 1,\n\t\t\t\"semantic-stroke-weight-2\": 2,\n\t\t\t\"semantic-stroke-weight-4\": 4,\n\t\t\t\"semantic-stroke-weight-6\": 6,\n\t\t\t\"semantic-opacity-0\": 0,\n\t\t\t\"semantic-opacity-5\": 5,\n\t\t\t\"semantic-opacity-8\": 8,\n\t\t\t\"semantic-opacity-12\": 12,\n\t\t\t\"semantic-opacity-16\": 16,\n\t\t\t\"semantic-opacity-23\": 23,\n\t\t\t\"semantic-opacity-29\": 29,\n\t\t\t\"semantic-opacity-36\": 36,\n\t\t\t\"semantic-opacity-44\": 44,\n\t\t\t\"semantic-opacity-54\": 54,\n\t\t\t\"semantic-opacity-63\": 63,\n\t\t\t\"semantic-opacity-76\": 76,\n\t\t\t\"semantic-opacity-100\": 100,\n\t\t\t\"semantic-radius-6\": 6,\n\t\t\t\"semantic-spacing-0\": 0,\n\t\t\t\"semantic-radius-2\": 2,\n\t\t\t\"semantic-opacity-91\": 91,\n\t\t\t\"semantic-breakpoint-min\": 320,\n\t\t\t\"semantic-breakpoint-max\": 767,\n\t\t\t\"semantic-margin-lg\": 20,\n\t\t\t\"semantic-margin-md\": 16,\n\t\t\t\"semantic-radius-12\": 12,\n\t\t\t\"semantic-radius-0\": 0,\n\t\t\t\"semantic-margin-sm\": 12,\n\t\t\t\"semantic-margin-xl\": 24,\n\t\t\t\"semantic-spacing-64\": 64,\n\t\t\t\"semantic-spacing-72\": 72,\n\t\t\t\"semantic-margin-2xl\": 28,\n\t\t\t\"primitive-unit-16\": 16,\n\t\t\t\"primitive-unit-20\": 20,\n\t\t\t\"primitive-unit-12\": 12,\n\t\t\t\"primitive-unit-72\": 72,\n\t\t\t\"primitive-unit-6\": 6,\n\t\t\t\"primitive-unit-144\": 144,\n\t\t\t\"primitive-unit-112\": 112,\n\t\t\t\"primitive-unit-96\": 96,\n\t\t\t\"primitive-unit-128\": 128,\n\t\t\t\"primitive-unit-2\": 2,\n\t\t\t\"primitive-unit-4\": 4,\n\t\t\t\"primitive-unit-80\": 80,\n\t\t\t\"primitive-unit-64\": 64,\n\t\t\t\"primitive-unit-56\": 56,\n\t\t\t\"primitive-unit-48\": 48,\n\t\t\t\"primitive-unit-24\": 24,\n\t\t\t\"primitive-unit-40\": 40,\n\t\t\t\"primitive-unit-10\": 10,\n\t\t\t\"primitive-unit-32\": 32,\n\t\t\t\"primitive-unit-1\": 1,\n\t\t\t\"primitive-unit-8\": 8,\n\t\t\t\"primitive-unit-28\": 28,\n\t\t\t\"primitive-unit-0\": 0,\n\t\t\t\"semantic-spacing-80\": 80,\n\t\t\t\"semantic-spacing-96\": 96,\n\t\t\t\"semantic-spacing-112\": 112,\n\t\t\t\"semantic-spacing-128\": 128,\n\t\t\t\"semantic-spacing-144\": 144,\n\t\t\t\"semantic-margin-3xl\": 32,\n\t\t\t\"semantic-margin-xs\": 10,\n\t\t\t\"primitive-unit-3\": 3,\n\t\t\t\"semantic-spacing-3\": 3,\n\t\t\t\"semantic-stroke-weight-3\": 3,\n\t\t\t\"semantic-margin-2xs\": 8,\n\t\t\t\"semantic-spacing-28\": 28,\n\t\t\t\"semantic-position-24\": 24,\n\t\t\t\"semantic-position-16\": 16,\n\t\t\t\"semantic-position-8\": 8,\n\t\t\t\"semantic-position-4\": 4,\n\t\t\t\"semantic-position-0\": 0,\n\t\t\t\"semantic-position-6\": 6,\n\t\t\t\"semantic-position-2\": 2,\n\t\t\t\"semantic-position-1\": 1,\n\t\t\t\"semantic-position-3\": 3,\n\t\t\t\"semantic-position-12\": 12,\n\t\t\t\"primitive-unit-5\": 5,\n\t\t\t\"semantic-stroke-weight-5\": 5,\n\t\t\t\"semantic-margin-4xl\": 40,\n\t\t\t\"semantic-margin-5xl\": 48,\n\t\t\t\"semantic-margin-6xl\": 56\n\t\t}\n\t},\n\t\"color-semantic\": {\n\t\t\"light\": {\n\t\t\t\"semantic-accent-alpha-assistive\": \"#3b5aef89\",\n\t\t\t\"semantic-object-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-subtle\": \"#0207353a\",\n\t\t\t\"semantic-object-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-accent-bold\": \"#0031c5\",\n\t\t\t\"semantic-accent-normal\": \"#2a4de2\",\n\t\t\t\"semantic-object-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-bold\": \"#444650\",\n\t\t\t\"semantic-object-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-surface-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-interaction-bold\": \"#191b24\",\n\t\t\t\"semantic-interaction-normal\": \"#50525c\",\n\t\t\t\"semantic-interaction-inverse-focus\": \"#4a68fc\",\n\t\t\t\"semantic-stroke-neutral\": \"#9c9da8\",\n\t\t\t\"semantic-stroke-alternative\": \"#b7b8c3\",\n\t\t\t\"semantic-stroke-assistive\": \"#d3d4df\",\n\t\t\t\"semantic-fill-boldest\": \"#191b24\",\n\t\t\t\"semantic-fill-bold\": \"#444650\",\n\t\t\t\"semantic-fill-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-fill-alternative\": \"#00031e70\",\n\t\t\t\"semantic-fill-assistive\": \"#01042656\",\n\t\t\t\"semantic-system-white\": \"#ffffff\",\n\t\t\t\"semantic-system-black\": \"#000000\",\n\t\t\t\"semantic-object-static-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-static-bold\": \"#444650\",\n\t\t\t\"semantic-object-static-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-static-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-static-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-static-subtle\": \"#0207353a\",\n\t\t\t\"semantic-object-static-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-static-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-object-static-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-static-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-static-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-static-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-interaction-inverse-bold\": \"#ffffff\",\n\t\t\t\"semantic-interaction-inverse-normal\": \"#a9aab6\",\n\t\t\t\"semantic-interaction-focus\": \"#7087ff\",\n\t\t\t\"semantic-stroke-normal\": \"#757681\",\n\t\t\t\"semantic-stroke-bold\": \"#50525c\",\n\t\t\t\"semantic-fill-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-fill-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-fill-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-fill-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-fill-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-accent-neutral\": \"#4a68fc\",\n\t\t\t\"semantic-accent-alpha-subtle\": \"#3b5aef5b\",\n\t\t\t\"semantic-fill-subtle\": \"#0207353a\",\n\t\t\t\"semantic-fill-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-stroke-alpha-bold\": \"#010413af\",\n\t\t\t\"semantic-stroke-alpha-normal\": \"#04051a8c\",\n\t\t\t\"semantic-stroke-alpha-neutral\": \"#01042263\",\n\t\t\t\"semantic-stroke-alpha-alternative\": \"#07093149\",\n\t\t\t\"semantic-stroke-alpha-assistive\": \"#0a104b2d\",\n\t\t\t\"semantic-accent-inverse-bold\": \"#bac3ff\",\n\t\t\t\"semantic-accent-inverse-normal\": \"#8397ff\",\n\t\t\t\"semantic-accent-inverse-neutral\": \"#5d78ff\",\n\t\t\t\"semantic-accent-alternative\": \"#7087ff\",\n\t\t\t\"semantic-accent-inverse-alternative\": \"#3b5aef\",\n\t\t\t\"semantic-accent-alpha-subtler\": \"#3b5aef28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtle\": \"#7087ff5b\",\n\t\t\t\"semantic-accent-alpha-inverse-subtler\": \"#7087ff28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtlest\": \"#7087ff0c\",\n\t\t\t\"semantic-stroke-subtle\": \"#e1e2ee\",\n\t\t\t\"semantic-stroke-alpha-subtle\": \"#040b701e\",\n\t\t\t\"semantic-stroke-inverse-bold\": \"#a9aab6\",\n\t\t\t\"semantic-stroke-inverse-normal\": \"#81838e\",\n\t\t\t\"semantic-stroke-inverse-neutral\": \"#5c5e68\",\n\t\t\t\"semantic-stroke-inverse-alternative\": \"#444650\",\n\t\t\t\"semantic-stroke-inverse-assistive\": \"#393b44\",\n\t\t\t\"semantic-stroke-inverse-subtle\": \"#2e3039\",\n\t\t\t\"semantic-stroke-alpha-inverse-bold\": \"#f0f0feaa\",\n\t\t\t\"semantic-stroke-alpha-inverse-normal\": \"#edeffc7c\",\n\t\t\t\"semantic-stroke-alpha-inverse-neutral\": \"#ebedf851\",\n\t\t\t\"semantic-stroke-alpha-inverse-alternative\": \"#e4e6f535\",\n\t\t\t\"semantic-stroke-alpha-inverse-assistive\": \"#eff1f926\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtle\": \"#e9ecf519\",\n\t\t\t\"semantic-theme-red-bold\": \"#930012\",\n\t\t\t\"semantic-theme-red-normal\": \"#ba1a22\",\n\t\t\t\"semantic-theme-red-neutral\": \"#dd3737\",\n\t\t\t\"semantic-theme-red-alternative\": \"#ff5450\",\n\t\t\t\"semantic-accent-assistive\": \"#95a6ff\",\n\t\t\t\"semantic-accent-inverse-assistive\": \"#163ed6\",\n\t\t\t\"semantic-accent-alpha-subtlest\": \"#3b5aef0c\",\n\t\t\t\"semantic-surface-inverse-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-inverse-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-inverse-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-inverse-deepest\": \"#252830\",\n\t\t\t\"semantic-curtain-static-bright\": \"#ffffff3a\",\n\t\t\t\"semantic-curtain-static-dim\": \"#00000070\",\n\t\t\t\"semantic-curtain-static-dimmer\": \"#000000a0\",\n\t\t\t\"semantic-fill-subtler\": \"#0e0e8519\",\n\t\t\t\"semantic-fill-inverse-subtler\": \"#e2f0f814\",\n\t\t\t\"semantic-fill-subtlest\": \"#5614ff07\",\n\t\t\t\"semantic-fill-inverse-subtlest\": \"#dfe1eb05\",\n\t\t\t\"semantic-theme-red-assistive\": \"#ff8981\",\n\t\t\t\"semantic-theme-red-subtle\": \"#ffb3ad\",\n\t\t\t\"semantic-theme-red-subtler\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-positive-alpha-subtle\": \"#007b355b\",\n\t\t\t\"semantic-feedback-positive-alpha-assistive\": \"#007b3589\",\n\t\t\t\"semantic-feedback-positive-normal\": \"#006e2f\",\n\t\t\t\"semantic-feedback-positive-alpha-subtler\": \"#007b3528\",\n\t\t\t\"semantic-feedback-positive-bold\": \"#005321\",\n\t\t\t\"semantic-accent-subtle\": \"#bac3ff\",\n\t\t\t\"semantic-accent-inverse-subtle\": \"#0031c5\",\n\t\t\t\"semantic-interaction-assistive\": \"#8f909b\",\n\t\t\t\"semantic-interaction-inverse-assistive\": \"#686a74\",\n\t\t\t\"semantic-feedback-positive-inverse-bold\": \"#4ae176\",\n\t\t\t\"semantic-feedback-positive-inverse-normal\": \"#00b652\",\n\t\t\t\"semantic-feedback-positive-inverse-neutral\": \"#009843\",\n\t\t\t\"semantic-feedback-positive-inverse-alternative\": \"#007b35\",\n\t\t\t\"semantic-feedback-positive-inverse-assistive\": \"#006028\",\n\t\t\t\"semantic-feedback-positive-inverse-subtle\": \"#005321\",\n\t\t\t\"semantic-feedback-positive-inverse-subtler\": \"#003412\",\n\t\t\t\"semantic-surface-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-inverse-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-shallowest\": \"#393b44\",\n\t\t\t\"semantic-accent-subtler\": \"#dee1ff\",\n\t\t\t\"semantic-accent-bolder\": \"#001d83\",\n\t\t\t\"semantic-accent-inverse-bolder\": \"#e5e6ff\",\n\t\t\t\"semantic-accent-inverse-subtler\": \"#00208d\",\n\t\t\t\"semantic-theme-red-alpha-assistive\": \"#cb292d89\",\n\t\t\t\"semantic-theme-red-alpha-subtle\": \"#cb292d5b\",\n\t\t\t\"semantic-theme-red-alpha-subtler\": \"#cb292d28\",\n\t\t\t\"semantic-theme-orange-bold\": \"#783100\",\n\t\t\t\"semantic-theme-orange-normal\": \"#9e4300\",\n\t\t\t\"semantic-theme-orange-neutral\": \"#c55500\",\n\t\t\t\"semantic-theme-orange-alternative\": \"#ec690a\",\n\t\t\t\"semantic-theme-orange-assistive\": \"#ff8d4c\",\n\t\t\t\"semantic-theme-orange-subtle\": \"#ffb691\",\n\t\t\t\"semantic-theme-orange-subtler\": \"#ffe2d6\",\n\t\t\t\"semantic-theme-orange-alpha-assistive\": \"#b14c0089\",\n\t\t\t\"semantic-theme-orange-alpha-subtle\": \"#b14c005b\",\n\t\t\t\"semantic-theme-orange-alpha-subtler\": \"#b14c0028\",\n\t\t\t\"semantic-theme-amber-bold\": \"#653e00\",\n\t\t\t\"semantic-theme-amber-normal\": \"#855400\",\n\t\t\t\"semantic-theme-amber-neutral\": \"#a66a00\",\n\t\t\t\"semantic-theme-amber-alternative\": \"#c98100\",\n\t\t\t\"semantic-theme-amber-assistive\": \"#ed9900\",\n\t\t\t\"semantic-theme-amber-subtle\": \"#ffb95d\",\n\t\t\t\"semantic-theme-amber-subtler\": \"#ffe4c7\",\n\t\t\t\"semantic-theme-amber-alpha-assistive\": \"#955f0089\",\n\t\t\t\"semantic-theme-amber-alpha-subtle\": \"#955f005b\",\n\t\t\t\"semantic-theme-amber-alpha-subtler\": \"#955f0028\",\n\t\t\t\"semantic-theme-yellow-bold\": \"#5b4300\",\n\t\t\t\"semantic-theme-yellow-normal\": \"#785a00\",\n\t\t\t\"semantic-theme-yellow-neutral\": \"#967100\",\n\t\t\t\"semantic-theme-yellow-alternative\": \"#b68a00\",\n\t\t\t\"semantic-theme-yellow-assistive\": \"#d7a300\",\n\t\t\t\"semantic-theme-yellow-subtle\": \"#f7be20\",\n\t\t\t\"semantic-theme-yellow-subtler\": \"#ffe5b2\",\n\t\t\t\"semantic-theme-yellow-alpha-assistive\": \"#87650089\",\n\t\t\t\"semantic-theme-yellow-alpha-subtle\": \"#8765005b\",\n\t\t\t\"semantic-theme-yellow-alpha-subtler\": \"#87650028\",\n\t\t\t\"semantic-theme-lime-bold\": \"#304f00\",\n\t\t\t\"semantic-theme-lime-normal\": \"#426900\",\n\t\t\t\"semantic-theme-lime-neutral\": \"#548400\",\n\t\t\t\"semantic-theme-lime-alternative\": \"#67a000\",\n\t\t\t\"semantic-theme-lime-assistive\": \"#7abd00\",\n\t\t\t\"semantic-theme-lime-subtle\": \"#92da26\",\n\t\t\t\"semantic-theme-lime-subtler\": \"#b2fe4a\",\n\t\t\t\"semantic-theme-lime-alpha-assistive\": \"#4b760089\",\n\t\t\t\"semantic-theme-lime-alpha-subtle\": \"#4b76005b\",\n\t\t\t\"semantic-theme-lime-alpha-subtler\": \"#4b760028\",\n\t\t\t\"semantic-theme-green-bold\": \"#005321\",\n\t\t\t\"semantic-theme-green-normal\": \"#006e2f\",\n\t\t\t\"semantic-theme-green-neutral\": \"#008a3c\",\n\t\t\t\"semantic-theme-green-alternative\": \"#00a74b\",\n\t\t\t\"semantic-theme-green-assistive\": \"#21c45d\",\n\t\t\t\"semantic-theme-green-subtle\": \"#4ae176\",\n\t\t\t\"semantic-theme-green-subtler\": \"#95ffa6\",\n\t\t\t\"semantic-theme-green-alpha-assistive\": \"#007b3589\",\n\t\t\t\"semantic-theme-green-alpha-subtle\": \"#007b355b\",\n\t\t\t\"semantic-theme-green-alpha-subtler\": \"#007b3528\",\n\t\t\t\"semantic-theme-emerald-bold\": \"#005237\",\n\t\t\t\"semantic-theme-emerald-normal\": \"#006c4a\",\n\t\t\t\"semantic-theme-emerald-neutral\": \"#00885e\",\n\t\t\t\"semantic-theme-emerald-alternative\": \"#00a572\",\n\t\t\t\"semantic-theme-emerald-assistive\": \"#21c289\",\n\t\t\t\"semantic-theme-emerald-subtle\": \"#4cdfa3\",\n\t\t\t\"semantic-theme-emerald-subtler\": \"#86ffc7\",\n\t\t\t\"semantic-theme-emerald-alpha-assistive\": \"#007a5489\",\n\t\t\t\"semantic-theme-emerald-alpha-subtle\": \"#007a545b\",\n\t\t\t\"semantic-theme-emerald-alpha-subtler\": \"#007a5428\",\n\t\t\t\"semantic-theme-teal-bold\": \"#005048\",\n\t\t\t\"semantic-theme-teal-normal\": \"#006a60\",\n\t\t\t\"semantic-theme-teal-neutral\": \"#008679\",\n\t\t\t\"semantic-theme-teal-alternative\": \"#00a393\",\n\t\t\t\"semantic-theme-teal-assistive\": \"#23bfad\",\n\t\t\t\"semantic-theme-teal-subtle\": \"#4edbc9\",\n\t\t\t\"semantic-theme-teal-subtler\": \"#76feea\",\n\t\t\t\"semantic-theme-teal-alpha-assistive\": \"#00786c89\",\n\t\t\t\"semantic-theme-teal-alpha-subtle\": \"#00786c5b\",\n\t\t\t\"semantic-theme-teal-alpha-subtler\": \"#00786c28\",\n\t\t\t\"semantic-theme-cyan-bold\": \"#004e5c\",\n\t\t\t\"semantic-theme-cyan-normal\": \"#00687a\",\n\t\t\t\"semantic-theme-cyan-neutral\": \"#008399\",\n\t\t\t\"semantic-theme-cyan-alternative\": \"#009eb9\",\n\t\t\t\"semantic-theme-cyan-assistive\": \"#13bbda\",\n\t\t\t\"semantic-theme-cyan-subtle\": \"#49d7f6\",\n\t\t\t\"semantic-theme-cyan-subtler\": \"#bef0ff\",\n\t\t\t\"semantic-theme-cyan-alpha-assistive\": \"#00758989\",\n\t\t\t\"semantic-theme-cyan-alpha-subtle\": \"#0075895b\",\n\t\t\t\"semantic-theme-cyan-alpha-subtler\": \"#00758928\",\n\t\t\t\"semantic-theme-sky-bold\": \"#004c6e\",\n\t\t\t\"semantic-theme-sky-normal\": \"#006491\",\n\t\t\t\"semantic-theme-sky-neutral\": \"#007fb5\",\n\t\t\t\"semantic-theme-sky-alternative\": \"#009adb\",\n\t\t\t\"semantic-theme-sky-assistive\": \"#35b5fb\",\n\t\t\t\"semantic-theme-sky-subtle\": \"#8aceff\",\n\t\t\t\"semantic-theme-sky-subtler\": \"#d4ebff\",\n\t\t\t\"semantic-theme-sky-alpha-assistive\": \"#0071a389\",\n\t\t\t\"semantic-theme-sky-alpha-subtle\": \"#0071a35b\",\n\t\t\t\"semantic-theme-sky-alpha-subtler\": \"#0071a328\",\n\t\t\t\"semantic-theme-blue-bold\": \"#004494\",\n\t\t\t\"semantic-theme-blue-normal\": \"#005ac1\",\n\t\t\t\"semantic-theme-blue-neutral\": \"#2473e6\",\n\t\t\t\"semantic-theme-blue-alternative\": \"#4c8eff\",\n\t\t\t\"semantic-theme-blue-assistive\": \"#80aaff\",\n\t\t\t\"semantic-theme-blue-subtle\": \"#adc6ff\",\n\t\t\t\"semantic-theme-blue-subtler\": \"#e0e8ff\",\n\t\t\t\"semantic-theme-blue-alpha-assistive\": \"#0166d889\",\n\t\t\t\"semantic-theme-blue-alpha-subtle\": \"#0166d85b\",\n\t\t\t\"semantic-theme-blue-alpha-subtler\": \"#0166d828\",\n\t\t\t\"semantic-theme-violet-bold\": \"#5517bd\",\n\t\t\t\"semantic-theme-violet-normal\": \"#6d3bd6\",\n\t\t\t\"semantic-theme-violet-neutral\": \"#8758f1\",\n\t\t\t\"semantic-theme-violet-alternative\": \"#a078ff\",\n\t\t\t\"semantic-theme-violet-assistive\": \"#b89bff\",\n\t\t\t\"semantic-theme-violet-subtle\": \"#d0bcff\",\n\t\t\t\"semantic-theme-violet-subtler\": \"#eee4ff\",\n\t\t\t\"semantic-theme-violet-alpha-assistive\": \"#7a4ae389\",\n\t\t\t\"semantic-theme-violet-alpha-subtle\": \"#7a4ae35b\",\n\t\t\t\"semantic-theme-violet-alpha-subtler\": \"#7a4ae328\",\n\t\t\t\"semantic-theme-purple-bold\": \"#6900b2\",\n\t\t\t\"semantic-theme-purple-normal\": \"#842ad2\",\n\t\t\t\"semantic-theme-purple-neutral\": \"#9f4aed\",\n\t\t\t\"semantic-theme-purple-alternative\": \"#b76cff\",\n\t\t\t\"semantic-theme-purple-assistive\": \"#cb93ff\",\n\t\t\t\"semantic-theme-purple-subtle\": \"#deb7ff\",\n\t\t\t\"semantic-theme-purple-subtler\": \"#f4e2ff\",\n\t\t\t\"semantic-theme-purple-alpha-assistive\": \"#923be089\",\n\t\t\t\"semantic-theme-purple-alpha-subtle\": \"#923be05b\",\n\t\t\t\"semantic-theme-purple-alpha-subtler\": \"#923be028\",\n\t\t\t\"semantic-theme-fuchsia-bold\": \"#7c008f\",\n\t\t\t\"semantic-theme-fuchsia-normal\": \"#a200bb\",\n\t\t\t\"semantic-theme-fuchsia-neutral\": \"#c22cdb\",\n\t\t\t\"semantic-theme-fuchsia-alternative\": \"#e14ef8\",\n\t\t\t\"semantic-theme-fuchsia-assistive\": \"#f17eff\",\n\t\t\t\"semantic-theme-fuchsia-subtle\": \"#faabff\",\n\t\t\t\"semantic-theme-fuchsia-subtler\": \"#ffdefc\",\n\t\t\t\"semantic-theme-fuchsia-alpha-assistive\": \"#b315cd89\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtle\": \"#b315cd5b\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtler\": \"#b315cd28\",\n\t\t\t\"semantic-theme-pink-bold\": \"#8c0053\",\n\t\t\t\"semantic-theme-pink-normal\": \"#b4146d\",\n\t\t\t\"semantic-theme-pink-neutral\": \"#d53587\",\n\t\t\t\"semantic-theme-pink-alternative\": \"#f651a1\",\n\t\t\t\"semantic-theme-pink-assistive\": \"#ff82b7\",\n\t\t\t\"semantic-theme-pink-subtle\": \"#ffb0cd\",\n\t\t\t\"semantic-theme-pink-subtler\": \"#ffe0e9\",\n\t\t\t\"semantic-theme-pink-alpha-assistive\": \"#c4267a89\",\n\t\t\t\"semantic-theme-pink-alpha-subtle\": \"#c4267a5b\",\n\t\t\t\"semantic-theme-pink-alpha-subtler\": \"#c4267a28\",\n\t\t\t\"semantic-theme-rose-bold\": \"#91002b\",\n\t\t\t\"semantic-theme-rose-normal\": \"#bc0b3b\",\n\t\t\t\"semantic-theme-rose-neutral\": \"#e02f52\",\n\t\t\t\"semantic-theme-rose-alternative\": \"#ff506b\",\n\t\t\t\"semantic-theme-rose-assistive\": \"#ff8792\",\n\t\t\t\"semantic-theme-rose-subtle\": \"#ffb2b7\",\n\t\t\t\"semantic-theme-rose-subtler\": \"#ffe1e2\",\n\t\t\t\"semantic-theme-rose-alpha-assistive\": \"#ce204689\",\n\t\t\t\"semantic-theme-rose-alpha-subtle\": \"#ce20465b\",\n\t\t\t\"semantic-theme-rose-alpha-subtler\": \"#ce204628\",\n\t\t\t\"semantic-feedback-positive-assistive\": \"#21c45d\",\n\t\t\t\"semantic-feedback-positive-subtler\": \"#95ffa6\",\n\t\t\t\"semantic-feedback-positive-neutral\": \"#008a3c\",\n\t\t\t\"semantic-feedback-positive-alternative\": \"#00a74b\",\n\t\t\t\"semantic-feedback-positive-subtle\": \"#4ae176\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-assistive\": \"#00a74b89\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtle\": \"#00a74b5b\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtler\": \"#00a74b28\",\n\t\t\t\"semantic-feedback-destructive-bold\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-inverse-bold\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-inverse-normal\": \"#ff7169\",\n\t\t\t\"semantic-feedback-destructive-inverse-neutral\": \"#ef4442\",\n\t\t\t\"semantic-feedback-destructive-inverse-alternative\": \"#cb292d\",\n\t\t\t\"semantic-feedback-destructive-inverse-assistive\": \"#a80618\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtle\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtler\": \"#600008\",\n\t\t\t\"semantic-feedback-destructive-normal\": \"#ba1a22\",\n\t\t\t\"semantic-feedback-destructive-alpha-assistive\": \"#cb292d89\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtle\": \"#cb292d5b\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtler\": \"#cb292d28\",\n\t\t\t\"semantic-feedback-destructive-neutral\": \"#dd3737\",\n\t\t\t\"semantic-feedback-destructive-alternative\": \"#ff5450\",\n\t\t\t\"semantic-feedback-destructive-assistive\": \"#ff8981\",\n\t\t\t\"semantic-feedback-destructive-subtle\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-subtler\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-assistive\": \"#ff545089\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtle\": \"#ff54505b\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtler\": \"#ff545028\",\n\t\t\t\"semantic-feedback-notifying-bold\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-normal\": \"#9e4300\",\n\t\t\t\"semantic-feedback-notifying-neutral\": \"#c55500\",\n\t\t\t\"semantic-feedback-notifying-alternative\": \"#ec690a\",\n\t\t\t\"semantic-feedback-notifying-assistive\": \"#ff8d4c\",\n\t\t\t\"semantic-feedback-notifying-subtle\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-subtler\": \"#ffe2d6\",\n\t\t\t\"semantic-feedback-notifying-inverse-bold\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-inverse-normal\": \"#fe761c\",\n\t\t\t\"semantic-feedback-notifying-inverse-neutral\": \"#d95f00\",\n\t\t\t\"semantic-feedback-notifying-inverse-alternative\": \"#b14c00\",\n\t\t\t\"semantic-feedback-notifying-inverse-assistive\": \"#8b3a00\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtle\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtler\": \"#4e1d00\",\n\t\t\t\"semantic-feedback-notifying-alpha-assistive\": \"#b14c0089\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtle\": \"#b14c005b\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtler\": \"#b14c0028\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-assistive\": \"#ec690a89\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtle\": \"#ec690a5b\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtler\": \"#ec690a28\",\n\t\t\t\"semantic-feedback-positive-alpha-subtlest\": \"#007b350c\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtlest\": \"#00a74b0c\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtlest\": \"#cb292d0c\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtlest\": \"#ff54500c\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtlest\": \"#b14c000c\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtlest\": \"#ec690a0c\",\n\t\t\t\"semantic-fill-bolder\": \"#292c35\",\n\t\t\t\"semantic-fill-normal\": \"#5c5e68\",\n\t\t\t\"semantic-fill-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-fill-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-inverse-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-inverse-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-object-static-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-static-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-static-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-static-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-static-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-static-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-static-inverse-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-static-inverse-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-surface-static-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-static-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-static-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-surface-static-inverse-shallowest\": \"#393b44\",\n\t\t\t\"semantic-surface-static-inverse-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-static-inverse-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-static-inverse-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-static-inverse-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-deepest\": \"#252830\",\n\t\t\t\"semantic-accent-alpha-inverse-assistive\": \"#7087ff89\",\n\t\t\t\"semantic-theme-red-alpha-subtlest\": \"#cb292d0c\",\n\t\t\t\"semantic-theme-red-bolder\": \"#600008\",\n\t\t\t\"semantic-theme-orange-bolder\": \"#4e1d00\",\n\t\t\t\"semantic-theme-orange-alpha-subtlest\": \"#b14c000c\",\n\t\t\t\"semantic-theme-amber-bolder\": \"#412600\",\n\t\t\t\"semantic-theme-amber-alpha-subtlest\": \"#955f000c\",\n\t\t\t\"semantic-theme-yellow-bolder\": \"#3a2a00\",\n\t\t\t\"semantic-theme-yellow-alpha-subtlest\": \"#8765000c\",\n\t\t\t\"semantic-theme-lime-bolder\": \"#1d3200\",\n\t\t\t\"semantic-theme-lime-alpha-subtlest\": \"#4b76000c\",\n\t\t\t\"semantic-theme-green-bolder\": \"#003412\",\n\t\t\t\"semantic-theme-green-alpha-subtlest\": \"#007b350c\",\n\t\t\t\"semantic-theme-emerald-bolder\": \"#003321\",\n\t\t\t\"semantic-theme-emerald-alpha-subtlest\": \"#007a540c\",\n\t\t\t\"semantic-theme-teal-bolder\": \"#00332d\",\n\t\t\t\"semantic-theme-teal-alpha-subtlest\": \"#00786c0c\",\n\t\t\t\"semantic-theme-cyan-alpha-subtlest\": \"#0075890c\",\n\t\t\t\"semantic-theme-cyan-bolder\": \"#00313b\",\n\t\t\t\"semantic-theme-sky-alpha-subtlest\": \"#0071a30c\",\n\t\t\t\"semantic-theme-sky-bolder\": \"#002f47\",\n\t\t\t\"semantic-theme-blue-bolder\": \"#002a61\",\n\t\t\t\"semantic-theme-blue-alpha-subtlest\": \"#0166d80c\",\n\t\t\t\"semantic-theme-violet-bolder\": \"#370086\",\n\t\t\t\"semantic-theme-violet-alpha-subtlest\": \"#7a4ae30c\",\n\t\t\t\"semantic-theme-purple-alpha-subtlest\": \"#923be00c\",\n\t\t\t\"semantic-theme-purple-bolder\": \"#440076\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtlest\": \"#b315cd0c\",\n\t\t\t\"semantic-theme-fuchsia-bolder\": \"#50005d\",\n\t\t\t\"semantic-theme-pink-bolder\": \"#5c0034\",\n\t\t\t\"semantic-theme-pink-alpha-subtlest\": \"#c4267a0c\",\n\t\t\t\"semantic-theme-rose-bolder\": \"#5f0019\",\n\t\t\t\"semantic-theme-rose-alpha-subtlest\": \"#ce20460c\",\n\t\t\t\"semantic-feedback-destructive-bolder\": \"#600008\",\n\t\t\t\"semantic-feedback-destructive-inverse-bolder\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-positive-bolder\": \"#003412\",\n\t\t\t\"semantic-feedback-positive-inverse-bolder\": \"#95ffa6\",\n\t\t\t\"semantic-feedback-notifying-bolder\": \"#4e1d00\",\n\t\t\t\"semantic-feedback-notifying-inverse-bolder\": \"#ffe2d6\",\n\t\t\t\"semantic-interaction-subtle\": \"#b7b8c3\",\n\t\t\t\"semantic-interaction-inverse-subtle\": \"#444650\",\n\t\t\t\"semantic-stroke-subtler\": \"#ecedf9\",\n\t\t\t\"semantic-stroke-inverse-subtler\": \"#252830\",\n\t\t\t\"semantic-stroke-alpha-subtler\": \"#111cb414\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtler\": \"#e1f3ec0f\",\n\t\t\t\"semantic-accent-subtlest\": \"#ececff\",\n\t\t\t\"semantic-accent-inverse-subtlest\": \"#001a78\",\n\t\t\t\"semantic-curtain-standard\": \"#ffffffa0\"\n\t\t},\n\t\t\"dark\": {\n\t\t\t\"semantic-accent-alpha-assistive\": \"#7087ff89\",\n\t\t\t\"semantic-object-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-object-inverse-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-inverse-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-inverse-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-inverse-subtle\": \"#0207353a\",\n\t\t\t\"semantic-accent-bold\": \"#bac3ff\",\n\t\t\t\"semantic-accent-normal\": \"#8397ff\",\n\t\t\t\"semantic-object-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-object-inverse-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-inverse-bold\": \"#444650\",\n\t\t\t\"semantic-surface-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-deepest\": \"#252830\",\n\t\t\t\"semantic-interaction-bold\": \"#ffffff\",\n\t\t\t\"semantic-interaction-normal\": \"#a9aab6\",\n\t\t\t\"semantic-interaction-inverse-focus\": \"#7087ff\",\n\t\t\t\"semantic-stroke-neutral\": \"#5c5e68\",\n\t\t\t\"semantic-stroke-alternative\": \"#444650\",\n\t\t\t\"semantic-stroke-assistive\": \"#393b44\",\n\t\t\t\"semantic-fill-boldest\": \"#ffffff\",\n\t\t\t\"semantic-fill-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-fill-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-fill-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-fill-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-system-white\": \"#ffffff\",\n\t\t\t\"semantic-system-black\": \"#000000\",\n\t\t\t\"semantic-object-static-boldest\": \"#191b24\",\n\t\t\t\"semantic-object-static-bold\": \"#444650\",\n\t\t\t\"semantic-object-static-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-object-static-alternative\": \"#00031e70\",\n\t\t\t\"semantic-object-static-assistive\": \"#01042656\",\n\t\t\t\"semantic-object-static-subtle\": \"#0207353a\",\n\t\t\t\"semantic-object-static-inverse-boldest\": \"#ffffff\",\n\t\t\t\"semantic-object-static-inverse-bold\": \"#c5c6d1\",\n\t\t\t\"semantic-object-static-inverse-neutral\": \"#edeffc7c\",\n\t\t\t\"semantic-object-static-inverse-alternative\": \"#edeffb5e\",\n\t\t\t\"semantic-object-static-inverse-assistive\": \"#eef0fb42\",\n\t\t\t\"semantic-object-static-inverse-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-interaction-inverse-bold\": \"#191b24\",\n\t\t\t\"semantic-interaction-inverse-normal\": \"#50525c\",\n\t\t\t\"semantic-interaction-focus\": \"#4a68fc\",\n\t\t\t\"semantic-stroke-normal\": \"#81838e\",\n\t\t\t\"semantic-stroke-bold\": \"#a9aab6\",\n\t\t\t\"semantic-fill-inverse-boldest\": \"#191b24\",\n\t\t\t\"semantic-fill-inverse-bold\": \"#444650\",\n\t\t\t\"semantic-fill-inverse-neutral\": \"#04051a8c\",\n\t\t\t\"semantic-fill-inverse-alternative\": \"#00031e70\",\n\t\t\t\"semantic-fill-inverse-assistive\": \"#01042656\",\n\t\t\t\"semantic-accent-neutral\": \"#5d78ff\",\n\t\t\t\"semantic-accent-alpha-subtle\": \"#7087ff5b\",\n\t\t\t\"semantic-fill-subtle\": \"#e4e6f535\",\n\t\t\t\"semantic-fill-inverse-subtle\": \"#0207353a\",\n\t\t\t\"semantic-stroke-alpha-bold\": \"#f0f0feaa\",\n\t\t\t\"semantic-stroke-alpha-normal\": \"#edeffc7c\",\n\t\t\t\"semantic-stroke-alpha-neutral\": \"#ebedf851\",\n\t\t\t\"semantic-stroke-alpha-alternative\": \"#e4e6f535\",\n\t\t\t\"semantic-stroke-alpha-assistive\": \"#eff1f926\",\n\t\t\t\"semantic-accent-inverse-bold\": \"#0031c5\",\n\t\t\t\"semantic-accent-inverse-normal\": \"#2a4de2\",\n\t\t\t\"semantic-accent-inverse-neutral\": \"#4a68fc\",\n\t\t\t\"semantic-accent-alternative\": \"#3b5aef\",\n\t\t\t\"semantic-accent-inverse-alternative\": \"#7087ff\",\n\t\t\t\"semantic-accent-alpha-subtler\": \"#7087ff28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtle\": \"#3b5aef5b\",\n\t\t\t\"semantic-accent-alpha-inverse-subtler\": \"#3b5aef28\",\n\t\t\t\"semantic-accent-alpha-inverse-subtlest\": \"#3b5aef0c\",\n\t\t\t\"semantic-stroke-subtle\": \"#2e3039\",\n\t\t\t\"semantic-stroke-alpha-subtle\": \"#e9ecf519\",\n\t\t\t\"semantic-stroke-inverse-bold\": \"#50525c\",\n\t\t\t\"semantic-stroke-inverse-normal\": \"#757681\",\n\t\t\t\"semantic-stroke-inverse-neutral\": \"#9c9da8\",\n\t\t\t\"semantic-stroke-inverse-alternative\": \"#b7b8c3\",\n\t\t\t\"semantic-stroke-inverse-assistive\": \"#d3d4df\",\n\t\t\t\"semantic-stroke-inverse-subtle\": \"#e1e2ee\",\n\t\t\t\"semantic-stroke-alpha-inverse-bold\": \"#010413af\",\n\t\t\t\"semantic-stroke-alpha-inverse-normal\": \"#04051a8c\",\n\t\t\t\"semantic-stroke-alpha-inverse-neutral\": \"#01042263\",\n\t\t\t\"semantic-stroke-alpha-inverse-alternative\": \"#07093149\",\n\t\t\t\"semantic-stroke-alpha-inverse-assistive\": \"#0a104b2d\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtle\": \"#040b701e\",\n\t\t\t\"semantic-theme-red-bold\": \"#ffb3ad\",\n\t\t\t\"semantic-theme-red-normal\": \"#ff7169\",\n\t\t\t\"semantic-theme-red-neutral\": \"#ef4442\",\n\t\t\t\"semantic-theme-red-alternative\": \"#cb292d\",\n\t\t\t\"semantic-accent-assistive\": \"#163ed6\",\n\t\t\t\"semantic-accent-inverse-assistive\": \"#95a6ff\",\n\t\t\t\"semantic-accent-alpha-subtlest\": \"#7087ff0c\",\n\t\t\t\"semantic-surface-inverse-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-inverse-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-inverse-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-curtain-static-bright\": \"#ffffff3a\",\n\t\t\t\"semantic-curtain-static-dim\": \"#00000070\",\n\t\t\t\"semantic-curtain-static-dimmer\": \"#000000a0\",\n\t\t\t\"semantic-fill-subtler\": \"#e2f0f814\",\n\t\t\t\"semantic-fill-inverse-subtler\": \"#0e0e8519\",\n\t\t\t\"semantic-fill-subtlest\": \"#dfe1eb05\",\n\t\t\t\"semantic-fill-inverse-subtlest\": \"#5614ff07\",\n\t\t\t\"semantic-theme-red-assistive\": \"#a80618\",\n\t\t\t\"semantic-theme-red-subtle\": \"#930012\",\n\t\t\t\"semantic-theme-red-subtler\": \"#600008\",\n\t\t\t\"semantic-feedback-positive-alpha-subtle\": \"#00a74b5b\",\n\t\t\t\"semantic-feedback-positive-alpha-assistive\": \"#00a74b89\",\n\t\t\t\"semantic-feedback-positive-normal\": \"#00b652\",\n\t\t\t\"semantic-feedback-positive-alpha-subtler\": \"#00a74b28\",\n\t\t\t\"semantic-feedback-positive-bold\": \"#4ae176\",\n\t\t\t\"semantic-accent-subtle\": \"#0031c5\",\n\t\t\t\"semantic-accent-inverse-subtle\": \"#bac3ff\",\n\t\t\t\"semantic-interaction-assistive\": \"#686a74\",\n\t\t\t\"semantic-interaction-inverse-assistive\": \"#8f909b\",\n\t\t\t\"semantic-feedback-positive-inverse-bold\": \"#005321\",\n\t\t\t\"semantic-feedback-positive-inverse-normal\": \"#006e2f\",\n\t\t\t\"semantic-feedback-positive-inverse-neutral\": \"#008a3c\",\n\t\t\t\"semantic-feedback-positive-inverse-alternative\": \"#00a74b\",\n\t\t\t\"semantic-feedback-positive-inverse-assistive\": \"#21c45d\",\n\t\t\t\"semantic-feedback-positive-inverse-subtle\": \"#4ae176\",\n\t\t\t\"semantic-feedback-positive-inverse-subtler\": \"#95ffa6\",\n\t\t\t\"semantic-surface-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-inverse-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-inverse-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-shallowest\": \"#393b44\",\n\t\t\t\"semantic-surface-inverse-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-accent-subtler\": \"#00208d\",\n\t\t\t\"semantic-accent-bolder\": \"#e5e6ff\",\n\t\t\t\"semantic-accent-inverse-bolder\": \"#001d83\",\n\t\t\t\"semantic-accent-inverse-subtler\": \"#dee1ff\",\n\t\t\t\"semantic-theme-red-alpha-assistive\": \"#ff545089\",\n\t\t\t\"semantic-theme-red-alpha-subtle\": \"#ff54505b\",\n\t\t\t\"semantic-theme-red-alpha-subtler\": \"#ff545028\",\n\t\t\t\"semantic-theme-orange-bold\": \"#ffb691\",\n\t\t\t\"semantic-theme-orange-normal\": \"#fe761c\",\n\t\t\t\"semantic-theme-orange-neutral\": \"#d95f00\",\n\t\t\t\"semantic-theme-orange-alternative\": \"#b14c00\",\n\t\t\t\"semantic-theme-orange-assistive\": \"#8b3a00\",\n\t\t\t\"semantic-theme-orange-subtle\": \"#783100\",\n\t\t\t\"semantic-theme-orange-subtler\": \"#4e1d00\",\n\t\t\t\"semantic-theme-orange-alpha-assistive\": \"#ec690a89\",\n\t\t\t\"semantic-theme-orange-alpha-subtle\": \"#ec690a5b\",\n\t\t\t\"semantic-theme-orange-alpha-subtler\": \"#ec690a28\",\n\t\t\t\"semantic-theme-amber-bold\": \"#ffb95d\",\n\t\t\t\"semantic-theme-amber-normal\": \"#db8d00\",\n\t\t\t\"semantic-theme-amber-neutral\": \"#b87500\",\n\t\t\t\"semantic-theme-amber-alternative\": \"#955f00\",\n\t\t\t\"semantic-theme-amber-assistive\": \"#754900\",\n\t\t\t\"semantic-theme-amber-subtle\": \"#653e00\",\n\t\t\t\"semantic-theme-amber-subtler\": \"#412600\",\n\t\t\t\"semantic-theme-amber-alpha-assistive\": \"#c9810089\",\n\t\t\t\"semantic-theme-amber-alpha-subtle\": \"#c981005b\",\n\t\t\t\"semantic-theme-amber-alpha-subtler\": \"#c9810028\",\n\t\t\t\"semantic-theme-yellow-bold\": \"#f7be20\",\n\t\t\t\"semantic-theme-yellow-normal\": \"#c69700\",\n\t\t\t\"semantic-theme-yellow-neutral\": \"#a67e00\",\n\t\t\t\"semantic-theme-yellow-alternative\": \"#876500\",\n\t\t\t\"semantic-theme-yellow-assistive\": \"#694e00\",\n\t\t\t\"semantic-theme-yellow-subtle\": \"#5b4300\",\n\t\t\t\"semantic-theme-yellow-subtler\": \"#3a2a00\",\n\t\t\t\"semantic-theme-yellow-alpha-assistive\": \"#b68a0089\",\n\t\t\t\"semantic-theme-yellow-alpha-subtle\": \"#b68a005b\",\n\t\t\t\"semantic-theme-yellow-alpha-subtler\": \"#b68a0028\",\n\t\t\t\"semantic-theme-lime-bold\": \"#92da26\",\n\t\t\t\"semantic-theme-lime-normal\": \"#70af00\",\n\t\t\t\"semantic-theme-lime-neutral\": \"#5d9200\",\n\t\t\t\"semantic-theme-lime-alternative\": \"#4b7600\",\n\t\t\t\"semantic-theme-lime-assistive\": \"#395c00\",\n\t\t\t\"semantic-theme-lime-subtle\": \"#304f00\",\n\t\t\t\"semantic-theme-lime-subtler\": \"#1d3200\",\n\t\t\t\"semantic-theme-lime-alpha-assistive\": \"#67a00089\",\n\t\t\t\"semantic-theme-lime-alpha-subtle\": \"#67a0005b\",\n\t\t\t\"semantic-theme-lime-alpha-subtler\": \"#67a00028\",\n\t\t\t\"semantic-theme-green-bold\": \"#4ae176\",\n\t\t\t\"semantic-theme-green-normal\": \"#00b652\",\n\t\t\t\"semantic-theme-green-neutral\": \"#009843\",\n\t\t\t\"semantic-theme-green-alternative\": \"#007b35\",\n\t\t\t\"semantic-theme-green-assistive\": \"#006028\",\n\t\t\t\"semantic-theme-green-subtle\": \"#005321\",\n\t\t\t\"semantic-theme-green-subtler\": \"#003412\",\n\t\t\t\"semantic-theme-green-alpha-assistive\": \"#00a74b89\",\n\t\t\t\"semantic-theme-green-alpha-subtle\": \"#00a74b5b\",\n\t\t\t\"semantic-theme-green-alpha-subtler\": \"#00a74b28\",\n\t\t\t\"semantic-theme-emerald-bold\": \"#4cdfa3\",\n\t\t\t\"semantic-theme-emerald-normal\": \"#00b47d\",\n\t\t\t\"semantic-theme-emerald-neutral\": \"#009668\",\n\t\t\t\"semantic-theme-emerald-alternative\": \"#007a54\",\n\t\t\t\"semantic-theme-emerald-assistive\": \"#005f40\",\n\t\t\t\"semantic-theme-emerald-subtle\": \"#005237\",\n\t\t\t\"semantic-theme-emerald-subtler\": \"#003321\",\n\t\t\t\"semantic-theme-emerald-alpha-assistive\": \"#00a57289\",\n\t\t\t\"semantic-theme-emerald-alpha-subtle\": \"#00a5725b\",\n\t\t\t\"semantic-theme-emerald-alpha-subtler\": \"#00a57228\",\n\t\t\t\"semantic-theme-teal-bold\": \"#4edbc9\",\n\t\t\t\"semantic-theme-teal-normal\": \"#00b1a0\",\n\t\t\t\"semantic-theme-teal-neutral\": \"#009486\",\n\t\t\t\"semantic-theme-teal-alternative\": \"#00786c\",\n\t\t\t\"semantic-theme-teal-assistive\": \"#005d54\",\n\t\t\t\"semantic-theme-teal-subtle\": \"#005048\",\n\t\t\t\"semantic-theme-teal-subtler\": \"#00332d\",\n\t\t\t\"semantic-theme-teal-alpha-assistive\": \"#00a39389\",\n\t\t\t\"semantic-theme-teal-alpha-subtle\": \"#00a3935b\",\n\t\t\t\"semantic-theme-teal-alpha-subtler\": \"#00a39328\",\n\t\t\t\"semantic-theme-cyan-bold\": \"#49d7f6\",\n\t\t\t\"semantic-theme-cyan-normal\": \"#00adca\",\n\t\t\t\"semantic-theme-cyan-neutral\": \"#0090a9\",\n\t\t\t\"semantic-theme-cyan-alternative\": \"#007589\",\n\t\t\t\"semantic-theme-cyan-assistive\": \"#005b6b\",\n\t\t\t\"semantic-theme-cyan-subtle\": \"#004e5c\",\n\t\t\t\"semantic-theme-cyan-subtler\": \"#00313b\",\n\t\t\t\"semantic-theme-cyan-alpha-assistive\": \"#009eb989\",\n\t\t\t\"semantic-theme-cyan-alpha-subtle\": \"#009eb95b\",\n\t\t\t\"semantic-theme-cyan-alpha-subtler\": \"#009eb928\",\n\t\t\t\"semantic-theme-sky-bold\": \"#8aceff\",\n\t\t\t\"semantic-theme-sky-normal\": \"#19a7ec\",\n\t\t\t\"semantic-theme-sky-neutral\": \"#008cc8\",\n\t\t\t\"semantic-theme-sky-alternative\": \"#0071a3\",\n\t\t\t\"semantic-theme-sky-assistive\": \"#00587f\",\n\t\t\t\"semantic-theme-sky-subtle\": \"#004c6e\",\n\t\t\t\"semantic-theme-sky-subtler\": \"#002f47\",\n\t\t\t\"semantic-theme-sky-alpha-assistive\": \"#009adb89\",\n\t\t\t\"semantic-theme-sky-alpha-subtle\": \"#009adb5b\",\n\t\t\t\"semantic-theme-sky-alpha-subtler\": \"#009adb28\",\n\t\t\t\"semantic-theme-blue-bold\": \"#adc6ff\",\n\t\t\t\"semantic-theme-blue-normal\": \"#689cff\",\n\t\t\t\"semantic-theme-blue-neutral\": \"#3881f4\",\n\t\t\t\"semantic-theme-blue-alternative\": \"#0166d8\",\n\t\t\t\"semantic-theme-blue-assistive\": \"#004faa\",\n\t\t\t\"semantic-theme-blue-subtle\": \"#004494\",\n\t\t\t\"semantic-theme-blue-subtler\": \"#002a61\",\n\t\t\t\"semantic-theme-blue-alpha-assistive\": \"#4c8eff89\",\n\t\t\t\"semantic-theme-blue-alpha-subtle\": \"#4c8eff5b\",\n\t\t\t\"semantic-theme-blue-alpha-subtler\": \"#4c8eff28\",\n\t\t\t\"semantic-theme-violet-bold\": \"#d0bcff\",\n\t\t\t\"semantic-theme-violet-normal\": \"#ac8aff\",\n\t\t\t\"semantic-theme-violet-neutral\": \"#9466ff\",\n\t\t\t\"semantic-theme-violet-alternative\": \"#7a4ae3\",\n\t\t\t\"semantic-theme-violet-assistive\": \"#612bc9\",\n\t\t\t\"semantic-theme-violet-subtle\": \"#5517bd\",\n\t\t\t\"semantic-theme-violet-subtler\": \"#370086\",\n\t\t\t\"semantic-theme-violet-alpha-assistive\": \"#a078ff89\",\n\t\t\t\"semantic-theme-violet-alpha-subtle\": \"#a078ff5b\",\n\t\t\t\"semantic-theme-violet-alpha-subtler\": \"#a078ff28\",\n\t\t\t\"semantic-theme-purple-bold\": \"#deb7ff\",\n\t\t\t\"semantic-theme-purple-normal\": \"#c180ff\",\n\t\t\t\"semantic-theme-purple-neutral\": \"#ad59fb\",\n\t\t\t\"semantic-theme-purple-alternative\": \"#923be0\",\n\t\t\t\"semantic-theme-purple-assistive\": \"#7714c5\",\n\t\t\t\"semantic-theme-purple-subtle\": \"#6900b2\",\n\t\t\t\"semantic-theme-purple-subtler\": \"#440076\",\n\t\t\t\"semantic-theme-purple-alpha-assistive\": \"#b76cff89\",\n\t\t\t\"semantic-theme-purple-alpha-subtle\": \"#b76cff5b\",\n\t\t\t\"semantic-theme-purple-alpha-subtler\": \"#b76cff28\",\n\t\t\t\"semantic-theme-fuchsia-bold\": \"#faabff\",\n\t\t\t\"semantic-theme-fuchsia-normal\": \"#eb64ff\",\n\t\t\t\"semantic-theme-fuchsia-neutral\": \"#d13ee9\",\n\t\t\t\"semantic-theme-fuchsia-alternative\": \"#b315cd\",\n\t\t\t\"semantic-theme-fuchsia-assistive\": \"#8f00a4\",\n\t\t\t\"semantic-theme-fuchsia-subtle\": \"#7c008f\",\n\t\t\t\"semantic-theme-fuchsia-subtler\": \"#50005d\",\n\t\t\t\"semantic-theme-fuchsia-alpha-assistive\": \"#e14ef889\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtle\": \"#e14ef85b\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtler\": \"#e14ef828\",\n\t\t\t\"semantic-theme-pink-bold\": \"#ffb0cd\",\n\t\t\t\"semantic-theme-pink-normal\": \"#ff67ad\",\n\t\t\t\"semantic-theme-pink-neutral\": \"#e64394\",\n\t\t\t\"semantic-theme-pink-alternative\": \"#c4267a\",\n\t\t\t\"semantic-theme-pink-assistive\": \"#a20060\",\n\t\t\t\"semantic-theme-pink-subtle\": \"#8c0053\",\n\t\t\t\"semantic-theme-pink-subtler\": \"#5c0034\",\n\t\t\t\"semantic-theme-pink-alpha-assistive\": \"#f651a189\",\n\t\t\t\"semantic-theme-pink-alpha-subtle\": \"#f651a15b\",\n\t\t\t\"semantic-theme-pink-alpha-subtler\": \"#f651a128\",\n\t\t\t\"semantic-theme-rose-bold\": \"#ffb2b7\",\n\t\t\t\"semantic-theme-rose-normal\": \"#ff6e7f\",\n\t\t\t\"semantic-theme-rose-neutral\": \"#f13d5d\",\n\t\t\t\"semantic-theme-rose-alternative\": \"#ce2046\",\n\t\t\t\"semantic-theme-rose-assistive\": \"#a70032\",\n\t\t\t\"semantic-theme-rose-subtle\": \"#91002b\",\n\t\t\t\"semantic-theme-rose-subtler\": \"#5f0019\",\n\t\t\t\"semantic-theme-rose-alpha-assistive\": \"#ff506b89\",\n\t\t\t\"semantic-theme-rose-alpha-subtle\": \"#ff506b5b\",\n\t\t\t\"semantic-theme-rose-alpha-subtler\": \"#ff506b28\",\n\t\t\t\"semantic-feedback-positive-assistive\": \"#006028\",\n\t\t\t\"semantic-feedback-positive-subtler\": \"#003412\",\n\t\t\t\"semantic-feedback-positive-neutral\": \"#009843\",\n\t\t\t\"semantic-feedback-positive-alternative\": \"#007b35\",\n\t\t\t\"semantic-feedback-positive-subtle\": \"#005321\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-assistive\": \"#007b3589\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtle\": \"#007b355b\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtler\": \"#007b3528\",\n\t\t\t\"semantic-feedback-destructive-bold\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-inverse-bold\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-inverse-normal\": \"#ba1a22\",\n\t\t\t\"semantic-feedback-destructive-inverse-neutral\": \"#dd3737\",\n\t\t\t\"semantic-feedback-destructive-inverse-alternative\": \"#ff5450\",\n\t\t\t\"semantic-feedback-destructive-inverse-assistive\": \"#ff8981\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtle\": \"#ffb3ad\",\n\t\t\t\"semantic-feedback-destructive-inverse-subtler\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-destructive-normal\": \"#ff7169\",\n\t\t\t\"semantic-feedback-destructive-alpha-assistive\": \"#ff545089\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtle\": \"#ff54505b\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtler\": \"#ff545028\",\n\t\t\t\"semantic-feedback-destructive-neutral\": \"#ef4442\",\n\t\t\t\"semantic-feedback-destructive-alternative\": \"#cb292d\",\n\t\t\t\"semantic-feedback-destructive-assistive\": \"#a80618\",\n\t\t\t\"semantic-feedback-destructive-subtle\": \"#930012\",\n\t\t\t\"semantic-feedback-destructive-subtler\": \"#600008\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-assistive\": \"#cb292d89\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtle\": \"#cb292d5b\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtler\": \"#cb292d28\",\n\t\t\t\"semantic-feedback-notifying-bold\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-normal\": \"#fe761c\",\n\t\t\t\"semantic-feedback-notifying-neutral\": \"#d95f00\",\n\t\t\t\"semantic-feedback-notifying-alternative\": \"#b14c00\",\n\t\t\t\"semantic-feedback-notifying-assistive\": \"#8b3a00\",\n\t\t\t\"semantic-feedback-notifying-subtle\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-subtler\": \"#4e1d00\",\n\t\t\t\"semantic-feedback-notifying-inverse-bold\": \"#783100\",\n\t\t\t\"semantic-feedback-notifying-inverse-normal\": \"#9e4300\",\n\t\t\t\"semantic-feedback-notifying-inverse-neutral\": \"#c55500\",\n\t\t\t\"semantic-feedback-notifying-inverse-alternative\": \"#ec690a\",\n\t\t\t\"semantic-feedback-notifying-inverse-assistive\": \"#ff8d4c\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtle\": \"#ffb691\",\n\t\t\t\"semantic-feedback-notifying-inverse-subtler\": \"#ffe2d6\",\n\t\t\t\"semantic-feedback-notifying-alpha-assistive\": \"#ec690a89\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtle\": \"#ec690a5b\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtler\": \"#ec690a28\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-assistive\": \"#b14c0089\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtle\": \"#b14c005b\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtler\": \"#b14c0028\",\n\t\t\t\"semantic-feedback-positive-alpha-subtlest\": \"#00a74b0c\",\n\t\t\t\"semantic-feedback-positive-alpha-inverse-subtlest\": \"#007b350c\",\n\t\t\t\"semantic-feedback-destructive-alpha-subtlest\": \"#ff54500c\",\n\t\t\t\"semantic-feedback-destructive-alpha-inverse-subtlest\": \"#cb292d0c\",\n\t\t\t\"semantic-feedback-notifying-alpha-subtlest\": \"#ec690a0c\",\n\t\t\t\"semantic-feedback-notifying-alpha-inverse-subtlest\": \"#b14c000c\",\n\t\t\t\"semantic-fill-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-fill-normal\": \"#9c9da8\",\n\t\t\t\"semantic-fill-inverse-bolder\": \"#292c35\",\n\t\t\t\"semantic-fill-inverse-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-object-inverse-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-inverse-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-inverse-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-inverse-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-static-bolder\": \"#292c35\",\n\t\t\t\"semantic-object-static-normal\": \"#5c5e68\",\n\t\t\t\"semantic-object-static-subtler\": \"#040b701e\",\n\t\t\t\"semantic-object-static-subtlest\": \"#111cb414\",\n\t\t\t\"semantic-object-static-inverse-bolder\": \"#e7e7f3\",\n\t\t\t\"semantic-object-static-inverse-normal\": \"#9c9da8\",\n\t\t\t\"semantic-object-static-inverse-subtler\": \"#e9ecf519\",\n\t\t\t\"semantic-object-static-inverse-subtlest\": \"#e1f3ec0f\",\n\t\t\t\"semantic-surface-static-shallowest\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallower\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-shallow\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-standard\": \"#ffffff\",\n\t\t\t\"semantic-surface-static-deep\": \"#faf8ff\",\n\t\t\t\"semantic-surface-static-deeper\": \"#f2f3ff\",\n\t\t\t\"semantic-surface-static-deepest\": \"#ecedf9\",\n\t\t\t\"semantic-surface-static-inverse-shallowest\": \"#393b44\",\n\t\t\t\"semantic-surface-static-inverse-shallower\": \"#292c35\",\n\t\t\t\"semantic-surface-static-inverse-shallow\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-standard\": \"#191b24\",\n\t\t\t\"semantic-surface-static-inverse-deep\": \"#1d1f28\",\n\t\t\t\"semantic-surface-static-inverse-deeper\": \"#21232c\",\n\t\t\t\"semantic-surface-static-inverse-deepest\": \"#252830\",\n\t\t\t\"semantic-accent-alpha-inverse-assistive\": \"#3b5aef89\",\n\t\t\t\"semantic-theme-red-alpha-subtlest\": \"#ff54500c\",\n\t\t\t\"semantic-theme-red-bolder\": \"#ffe2df\",\n\t\t\t\"semantic-theme-orange-bolder\": \"#ffe2d6\",\n\t\t\t\"semantic-theme-orange-alpha-subtlest\": \"#ec690a0c\",\n\t\t\t\"semantic-theme-amber-bolder\": \"#ffe4c7\",\n\t\t\t\"semantic-theme-amber-alpha-subtlest\": \"#c981000c\",\n\t\t\t\"semantic-theme-yellow-bolder\": \"#ffe5b2\",\n\t\t\t\"semantic-theme-yellow-alpha-subtlest\": \"#b68a000c\",\n\t\t\t\"semantic-theme-lime-bolder\": \"#b2fe4a\",\n\t\t\t\"semantic-theme-lime-alpha-subtlest\": \"#67a0000c\",\n\t\t\t\"semantic-theme-green-bolder\": \"#95ffa6\",\n\t\t\t\"semantic-theme-green-alpha-subtlest\": \"#00a74b0c\",\n\t\t\t\"semantic-theme-emerald-bolder\": \"#86ffc7\",\n\t\t\t\"semantic-theme-emerald-alpha-subtlest\": \"#00a5720c\",\n\t\t\t\"semantic-theme-teal-bolder\": \"#76feea\",\n\t\t\t\"semantic-theme-teal-alpha-subtlest\": \"#00a3930c\",\n\t\t\t\"semantic-theme-cyan-alpha-subtlest\": \"#009eb90c\",\n\t\t\t\"semantic-theme-cyan-bolder\": \"#bef0ff\",\n\t\t\t\"semantic-theme-sky-alpha-subtlest\": \"#009adb0c\",\n\t\t\t\"semantic-theme-sky-bolder\": \"#d4ebff\",\n\t\t\t\"semantic-theme-blue-bolder\": \"#e0e8ff\",\n\t\t\t\"semantic-theme-blue-alpha-subtlest\": \"#4c8eff0c\",\n\t\t\t\"semantic-theme-violet-bolder\": \"#eee4ff\",\n\t\t\t\"semantic-theme-violet-alpha-subtlest\": \"#a078ff0c\",\n\t\t\t\"semantic-theme-purple-alpha-subtlest\": \"#b76cff0c\",\n\t\t\t\"semantic-theme-purple-bolder\": \"#f4e2ff\",\n\t\t\t\"semantic-theme-fuchsia-alpha-subtlest\": \"#e14ef80c\",\n\t\t\t\"semantic-theme-fuchsia-bolder\": \"#ffdefc\",\n\t\t\t\"semantic-theme-pink-bolder\": \"#ffe0e9\",\n\t\t\t\"semantic-theme-pink-alpha-subtlest\": \"#f651a10c\",\n\t\t\t\"semantic-theme-rose-bolder\": \"#ffe1e2\",\n\t\t\t\"semantic-theme-rose-alpha-subtlest\": \"#ff506b0c\",\n\t\t\t\"semantic-feedback-destructive-bolder\": \"#ffe2df\",\n\t\t\t\"semantic-feedback-destructive-inverse-bolder\": \"#600008\",\n\t\t\t\"semantic-feedback-positive-bolder\": \"#95ffa6\",\n\t\t\t\"semantic-feedback-positive-inverse-bolder\": \"#003412\",\n\t\t\t\"semantic-feedback-notifying-bolder\": \"#ffe2d6\",\n\t\t\t\"semantic-feedback-notifying-inverse-bolder\": \"#4e1d00\",\n\t\t\t\"semantic-interaction-subtle\": \"#444650\",\n\t\t\t\"semantic-interaction-inverse-subtle\": \"#b7b8c3\",\n\t\t\t\"semantic-stroke-subtler\": \"#252830\",\n\t\t\t\"semantic-stroke-inverse-subtler\": \"#ecedf9\",\n\t\t\t\"semantic-stroke-alpha-subtler\": \"#e1f3ec0f\",\n\t\t\t\"semantic-stroke-alpha-inverse-subtler\": \"#111cb414\",\n\t\t\t\"semantic-accent-subtlest\": \"#001a78\",\n\t\t\t\"semantic-accent-inverse-subtlest\": \"#ececff\",\n\t\t\t\"semantic-curtain-standard\": \"#191b24a0\"\n\t\t}\n\t},\n\t\"typography\": {\n\t\t\"desktop\": {\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-title-6\": 48,\n\t\t\t\"primitive-font-size-title-5\": 40,\n\t\t\t\"primitive-font-size-title-3\": 28,\n\t\t\t\"primitive-font-size-title-2\": 24,\n\t\t\t\"primitive-font-size-title-1\": 20,\n\t\t\t\"primitive-font-size-title-4\": 32,\n\t\t\t\"primitive-font-size-body-lg\": 16,\n\t\t\t\"primitive-font-size-body-md\": 15,\n\t\t\t\"primitive-font-size-body-sm\": 14,\n\t\t\t\"primitive-font-size-body-xs\": 13,\n\t\t\t\"primitive-font-size-body-2xs\": 12,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 14,\n\t\t\t\"primitive-font-size-label-sm\": 12,\n\t\t\t\"primitive-font-line-height-title-6\": 62,\n\t\t\t\"primitive-font-line-height-title-5\": 52,\n\t\t\t\"primitive-font-line-height-title-4\": 42,\n\t\t\t\"primitive-font-line-height-title-3\": 36,\n\t\t\t\"primitive-font-line-height-title-2\": 32,\n\t\t\t\"primitive-font-line-height-title-1\": 26,\n\t\t\t\"primitive-font-line-height-label-lg\": 22,\n\t\t\t\"primitive-font-line-height-label-md\": 20,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 26,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22,\n\t\t\t\"primitive-font-line-height-body-xs\": 21,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19,\n\t\t\t\"primitive-font-letter-spacing-title-4\": -0.6399999856948853,\n\t\t\t\"primitive-font-letter-spacing-title-3\": -0.47999998927116394,\n\t\t\t\"primitive-font-letter-spacing-title-2\": -0.3400000035762787,\n\t\t\t\"primitive-font-letter-spacing-title-1\": -0.2199999988079071,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.1599999964237213,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07999999821186066,\n\t\t\t\"primitive-font-letter-spacing-body-lg\": 0.017000000923871994,\n\t\t\t\"primitive-font-letter-spacing-body-md\": 0.04500000178813934,\n\t\t\t\"primitive-font-letter-spacing-body-sm\": 0.0560000017285347,\n\t\t\t\"primitive-font-letter-spacing-body-xs\": 0.07000000029802322,\n\t\t\t\"primitive-font-letter-spacing-body-2xs\": 0.07999999821186066,\n\t\t\t\"primitive-font-weight-title-normal\": 620,\n\t\t\t\"primitive-font-weight-label-normal\": 480,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-title-bold\": 650,\n\t\t\t\"primitive-font-weight-label-bold\": 520,\n\t\t\t\"primitive-font-weight-label-subtle\": 440,\n\t\t\t\"primitive-font-weight-body-bold\": 440,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 14,\n\t\t\t\"primitive-font-size-syntax-sm\": 13,\n\t\t\t\"primitive-font-weight-syntax-normal\": 400,\n\t\t\t\"primitive-font-line-height-syntax-lg\": 22,\n\t\t\t\"primitive-font-line-height-syntax-md\": 20,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 18,\n\t\t\t\"primitive-typeface-title\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-label\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-body\": \"Pretendard Variable\",\n\t\t\t\"primitive-font-size-label-xs\": 11,\n\t\t\t\"primitive-font-line-height-label-xs\": 16,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.05000000074505806,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 16,\n\t\t\t\"primitive-font-weight-title-subtle\": 590,\n\t\t\t\"primitive-font-letter-spacing-title-5\": -0.9200000166893005,\n\t\t\t\"primitive-font-letter-spacing-title-6\": -1.25\n\t\t},\n\t\t\"tablet\": {\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-title-6\": 48,\n\t\t\t\"primitive-font-size-title-5\": 40,\n\t\t\t\"primitive-font-size-title-3\": 28,\n\t\t\t\"primitive-font-size-title-2\": 24,\n\t\t\t\"primitive-font-size-title-1\": 20,\n\t\t\t\"primitive-font-size-title-4\": 32,\n\t\t\t\"primitive-font-size-body-lg\": 16,\n\t\t\t\"primitive-font-size-body-md\": 15,\n\t\t\t\"primitive-font-size-body-sm\": 14,\n\t\t\t\"primitive-font-size-body-xs\": 13,\n\t\t\t\"primitive-font-size-body-2xs\": 12,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 14,\n\t\t\t\"primitive-font-size-label-sm\": 12,\n\t\t\t\"primitive-font-line-height-title-6\": 62,\n\t\t\t\"primitive-font-line-height-title-5\": 52,\n\t\t\t\"primitive-font-line-height-title-4\": 42,\n\t\t\t\"primitive-font-line-height-title-3\": 36,\n\t\t\t\"primitive-font-line-height-title-2\": 32,\n\t\t\t\"primitive-font-line-height-title-1\": 26,\n\t\t\t\"primitive-font-line-height-label-lg\": 22,\n\t\t\t\"primitive-font-line-height-label-md\": 20,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 26,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22,\n\t\t\t\"primitive-font-line-height-body-xs\": 21,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19,\n\t\t\t\"primitive-font-letter-spacing-title-4\": -0.6399999856948853,\n\t\t\t\"primitive-font-letter-spacing-title-3\": -0.47999998927116394,\n\t\t\t\"primitive-font-letter-spacing-title-2\": -0.3400000035762787,\n\t\t\t\"primitive-font-letter-spacing-title-1\": -0.2199999988079071,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.1599999964237213,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07999999821186066,\n\t\t\t\"primitive-font-letter-spacing-body-lg\": 0.017000000923871994,\n\t\t\t\"primitive-font-letter-spacing-body-md\": 0.04500000178813934,\n\t\t\t\"primitive-font-letter-spacing-body-sm\": 0.05999999865889549,\n\t\t\t\"primitive-font-letter-spacing-body-xs\": 0.07000000029802322,\n\t\t\t\"primitive-font-letter-spacing-body-2xs\": 0.07999999821186066,\n\t\t\t\"primitive-font-weight-title-normal\": 620,\n\t\t\t\"primitive-font-weight-label-normal\": 480,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-title-bold\": 650,\n\t\t\t\"primitive-font-weight-label-bold\": 520,\n\t\t\t\"primitive-font-weight-label-subtle\": 440,\n\t\t\t\"primitive-font-weight-body-bold\": 440,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 14,\n\t\t\t\"primitive-font-size-syntax-sm\": 13,\n\t\t\t\"primitive-font-weight-syntax-normal\": 400,\n\t\t\t\"primitive-font-line-height-syntax-lg\": 22,\n\t\t\t\"primitive-font-line-height-syntax-md\": 20,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 18,\n\t\t\t\"primitive-typeface-title\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-label\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-body\": \"Pretendard Variable\",\n\t\t\t\"primitive-font-size-label-xs\": 11,\n\t\t\t\"primitive-font-line-height-label-xs\": 16,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.05000000074505806,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 16,\n\t\t\t\"primitive-font-weight-title-subtle\": 590,\n\t\t\t\"primitive-font-letter-spacing-title-5\": -0.9200000166893005,\n\t\t\t\"primitive-font-letter-spacing-title-6\": -1.25\n\t\t},\n\t\t\"mobile\": {\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-title-6\": 40,\n\t\t\t\"primitive-font-size-title-5\": 32,\n\t\t\t\"primitive-font-size-title-3\": 24,\n\t\t\t\"primitive-font-size-title-2\": 20,\n\t\t\t\"primitive-font-size-title-1\": 18,\n\t\t\t\"primitive-font-size-title-4\": 28,\n\t\t\t\"primitive-font-size-body-lg\": 16,\n\t\t\t\"primitive-font-size-body-md\": 15,\n\t\t\t\"primitive-font-size-body-sm\": 14,\n\t\t\t\"primitive-font-size-body-xs\": 13,\n\t\t\t\"primitive-font-size-body-2xs\": 12,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 14,\n\t\t\t\"primitive-font-size-label-sm\": 12,\n\t\t\t\"primitive-font-line-height-title-6\": 52,\n\t\t\t\"primitive-font-line-height-title-5\": 42,\n\t\t\t\"primitive-font-line-height-title-4\": 36,\n\t\t\t\"primitive-font-line-height-title-3\": 32,\n\t\t\t\"primitive-font-line-height-title-2\": 26,\n\t\t\t\"primitive-font-line-height-title-1\": 24,\n\t\t\t\"primitive-font-line-height-label-lg\": 22,\n\t\t\t\"primitive-font-line-height-label-md\": 20,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 26,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22,\n\t\t\t\"primitive-font-line-height-body-xs\": 21,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19,\n\t\t\t\"primitive-font-letter-spacing-title-4\": -0.5600000023841858,\n\t\t\t\"primitive-font-letter-spacing-title-3\": -0.4099999964237213,\n\t\t\t\"primitive-font-letter-spacing-title-2\": -0.2800000011920929,\n\t\t\t\"primitive-font-letter-spacing-title-1\": -0.20000000298023224,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.1599999964237213,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07999999821186066,\n\t\t\t\"primitive-font-letter-spacing-body-lg\": 0.017000000923871994,\n\t\t\t\"primitive-font-letter-spacing-body-md\": 0.04500000178813934,\n\t\t\t\"primitive-font-letter-spacing-body-sm\": 0.05999999865889549,\n\t\t\t\"primitive-font-letter-spacing-body-xs\": 0.07000000029802322,\n\t\t\t\"primitive-font-letter-spacing-body-2xs\": 0.07999999821186066,\n\t\t\t\"primitive-font-weight-title-normal\": 620,\n\t\t\t\"primitive-font-weight-label-normal\": 480,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-title-bold\": 650,\n\t\t\t\"primitive-font-weight-label-bold\": 520,\n\t\t\t\"primitive-font-weight-label-subtle\": 440,\n\t\t\t\"primitive-font-weight-body-bold\": 440,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 14,\n\t\t\t\"primitive-font-size-syntax-sm\": 13,\n\t\t\t\"primitive-font-weight-syntax-normal\": 400,\n\t\t\t\"primitive-font-line-height-syntax-lg\": 22,\n\t\t\t\"primitive-font-line-height-syntax-md\": 20,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 18,\n\t\t\t\"primitive-typeface-title\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-label\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-body\": \"Pretendard Variable\",\n\t\t\t\"primitive-font-size-label-xs\": 11,\n\t\t\t\"primitive-font-line-height-label-xs\": 16,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.05000000074505806,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 16,\n\t\t\t\"primitive-font-weight-title-subtle\": 590,\n\t\t\t\"primitive-font-letter-spacing-title-5\": -0.7400000095367432,\n\t\t\t\"primitive-font-letter-spacing-title-6\": -1.0399999618530273\n\t\t}\n\t},\n\t\"environment\": {\n\t\t\"value\": {\n\t\t\t\"semantic-duration-200\": 200,\n\t\t\t\"semantic-duration-250\": 250,\n\t\t\t\"semantic-duration-300\": 300,\n\t\t\t\"semantic-duration-350\": 350,\n\t\t\t\"semantic-duration-150\": 150,\n\t\t\t\"semantic-duration-100\": 100,\n\t\t\t\"semantic-duration-50\": 50,\n\t\t\t\"semantic-motion-bouncy\": \"cubic-bezier(0.25, 1.57, 0.75, 0.9)\",\n\t\t\t\"semantic-motion-fluent\": \"cubic-bezier(0.25, 0.1, 0.25, 1)\",\n\t\t\t\"primitive-time-300\": 300,\n\t\t\t\"primitive-time-200\": 200,\n\t\t\t\"primitive-time-250\": 250,\n\t\t\t\"primitive-time-150\": 150,\n\t\t\t\"primitive-time-350\": 350,\n\t\t\t\"primitive-time-100\": 100,\n\t\t\t\"primitive-time-50\": 50,\n\t\t\t\"semantic-motion-leave\": \"cubic-bezier(0.42, 0, 0.1, 1)\\t\",\n\t\t\t\"semantic-motion-entrance\": \"cubic-bezier(0.19, 0.91, 0.38, 1)\\t\",\n\t\t\t\"primitive-time-400\": 400,\n\t\t\t\"primitive-time-450\": 450,\n\t\t\t\"primitive-time-500\": 500,\n\t\t\t\"semantic-duration-400\": 400,\n\t\t\t\"semantic-duration-450\": 450,\n\t\t\t\"semantic-duration-500\": 500\n\t\t}\n\t}\n}" diff --git a/packages/jds/src/tokens/vars.css.ts b/packages/jds/src/tokens/vars.css.ts index aec8b2210..0f9ac7b8b 100644 --- a/packages/jds/src/tokens/vars.css.ts +++ b/packages/jds/src/tokens/vars.css.ts @@ -1,5 +1,5 @@ // 자동 생성된 VE 토큰 계약 - 수정 금지 -// 생성 시간: 4/21/2026, 3:41:45 PM +// 생성 시간: 5/16/2026, 3:01:40 PM import { createGlobalThemeContract } from "@vanilla-extract/css"; export const vars = createGlobalThemeContract( From 7c01712e40aea72ae6a92744df35f2a8d7b79f4f Mon Sep 17 00:00:00 2001 From: ccconac <qwerpoiu91@naver.com> Date: Sat, 16 May 2026 16:22:17 +0900 Subject: [PATCH 07/16] =?UTF-8?q?chore(package):=20tailwind-merge=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/package.json | 1 + package-lock.json | 100 ++++++++++++++---------------------------- 2 files changed, 33 insertions(+), 68 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index cd9253667..f7522c579 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -38,6 +38,7 @@ "react-error-boundary": "6.0.0", "react-hook-form": "^7.54.2", "react-router-dom": "^7.1.5", + "tailwind-merge": "^3.6.0", "tailwindcss": "^4.0.0", "zod": "^3.24.2", "zustand": "^5.0.3" diff --git a/package-lock.json b/package-lock.json index 7714f58fc..51f48a6f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "react-error-boundary": "6.0.0", "react-hook-form": "^7.54.2", "react-router-dom": "^7.1.5", + "tailwind-merge": "^3.6.0", "tailwindcss": "^4.0.0", "zod": "^3.24.2", "zustand": "^5.0.3" @@ -1639,7 +1640,6 @@ "os": [ "aix" ], - "peer": true, "engines": { "node": ">=18" } @@ -1657,7 +1657,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -1675,7 +1674,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -1693,7 +1691,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -1711,7 +1708,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": ">=18" } @@ -1729,7 +1725,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": ">=18" } @@ -1747,7 +1742,6 @@ "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1765,7 +1759,6 @@ "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1783,7 +1776,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1801,7 +1793,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1819,7 +1810,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1837,7 +1827,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1855,7 +1844,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1873,7 +1861,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1891,7 +1878,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1909,7 +1895,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1927,7 +1912,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1945,7 +1929,6 @@ "os": [ "netbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1963,7 +1946,6 @@ "os": [ "netbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1981,7 +1963,6 @@ "os": [ "openbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1999,7 +1980,6 @@ "os": [ "openbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -2017,7 +1997,6 @@ "os": [ "openharmony" ], - "peer": true, "engines": { "node": ">=18" } @@ -2035,7 +2014,6 @@ "os": [ "sunos" ], - "peer": true, "engines": { "node": ">=18" } @@ -2053,7 +2031,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -2071,7 +2048,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -2089,7 +2065,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -5016,8 +4991,7 @@ "optional": true, "os": [ "android" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-android-arm64": { "version": "4.54.0", @@ -5030,8 +5004,7 @@ "optional": true, "os": [ "android" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.54.0", @@ -5057,8 +5030,7 @@ "optional": true, "os": [ "darwin" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-freebsd-arm64": { "version": "4.54.0", @@ -5071,8 +5043,7 @@ "optional": true, "os": [ "freebsd" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-freebsd-x64": { "version": "4.54.0", @@ -5085,8 +5056,7 @@ "optional": true, "os": [ "freebsd" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { "version": "4.54.0", @@ -5099,8 +5069,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { "version": "4.54.0", @@ -5113,8 +5082,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { "version": "4.54.0", @@ -5127,8 +5095,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { "version": "4.54.0", @@ -5141,8 +5108,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { "version": "4.54.0", @@ -5155,8 +5121,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { "version": "4.54.0", @@ -5169,8 +5134,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { "version": "4.54.0", @@ -5183,8 +5147,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { "version": "4.54.0", @@ -5197,8 +5160,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { "version": "4.54.0", @@ -5211,8 +5173,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { "version": "4.53.2", @@ -5238,8 +5199,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-openharmony-arm64": { "version": "4.54.0", @@ -5252,8 +5212,7 @@ "optional": true, "os": [ "openharmony" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { "version": "4.54.0", @@ -5266,8 +5225,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { "version": "4.54.0", @@ -5280,8 +5238,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { "version": "4.54.0", @@ -5294,8 +5251,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { "version": "4.54.0", @@ -5308,8 +5264,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rtsao/scc": { "version": "1.1.0", @@ -14820,8 +14775,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/run-applescript": { "version": "7.1.0", @@ -15664,6 +15618,16 @@ "node": ">= 10" } }, + "node_modules/tailwind-merge": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz", + "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.1.18", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", From c6248b094e2681f1e8cb337d2c9dd93ebe9ea589 Mon Sep 17 00:00:00 2001 From: ccconac <qwerpoiu91@naver.com> Date: Sat, 16 May 2026 16:22:54 +0900 Subject: [PATCH 08/16] =?UTF-8?q?feat(cn):=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=ED=81=B4=EB=9E=98=EC=8A=A4=20=EB=B3=91=ED=95=A9=EC=9D=84=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=9C=A0=ED=8B=B8=EB=A6=AC=ED=8B=B0=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/utils/cn.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 apps/web/src/utils/cn.ts diff --git a/apps/web/src/utils/cn.ts b/apps/web/src/utils/cn.ts new file mode 100644 index 000000000..a5ef19350 --- /dev/null +++ b/apps/web/src/utils/cn.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} From 7dcbc253767bd4e44d6edda3e678f0a902f3b0bb Mon Sep 17 00:00:00 2001 From: ccconac <qwerpoiu91@naver.com> Date: Sat, 16 May 2026 16:32:03 +0900 Subject: [PATCH 09/16] =?UTF-8?q?refactor(typography):=20Hero,=20Title,=20?= =?UTF-8?q?Label=20=EB=A1=9C=EC=BB=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @jects/jds의 Hero, Title, Label을 로컬 typography 컴포넌트로 대체하고, color prop을 className 기반 Tailwind 클래스로 변경 --- .../src/components/common/typography/Hero.tsx | 50 ++++ .../components/common/typography/Label.tsx | 78 ++++++ .../components/common/typography/Title.tsx | 50 ++++ .../src/components/common/typography/index.ts | 3 + .../sections/CurriculumTabSection.tsx | 9 +- apps/web/src/components/gnb/Sidebar.tsx | 3 +- .../components/main/sections/HeroSection.tsx | 7 +- .../components/main/sections/IntroSection.tsx | 24 +- .../components/main/sections/JoinSection.tsx | 7 +- .../vision/sections/GoalSection.tsx | 4 +- .../vision/sections/GrowthStorySection.tsx | 2 +- .../vision/sections/MemberSection.tsx | 5 +- .../vision/sections/ProjectStartSection.tsx | 4 +- .../vision/sections/VisionHeroSection.tsx | 5 +- .../src/features/apply/steps/CompleteStep.tsx | 3 +- .../applicationInfo/ApplicantInfoStep.tsx | 11 +- .../components/QuestionFieldWrapper.tsx | 3 +- .../shared/components/ApplyStepLayout.tsx | 3 +- apps/web/src/pages/ApplyGuidePage.tsx | 3 +- apps/web/src/pages/ApplyListPage.tsx | 3 +- apps/web/src/pages/Curriculum.tsx | 3 +- apps/web/src/pages/Faq.tsx | 191 ++++++------- apps/web/src/pages/LiveSession.tsx | 115 ++++---- apps/web/src/pages/Maintenance.tsx | 3 +- apps/web/src/pages/MiniStudy.tsx | 99 +++---- apps/web/src/pages/NonSpecificError.tsx | 3 +- apps/web/src/pages/NotFoundError.tsx | 5 +- apps/web/src/pages/TeamProject.tsx | 121 ++++---- apps/web/src/pages/TeamProjectDetail.tsx | 265 +++++++++--------- 29 files changed, 630 insertions(+), 452 deletions(-) create mode 100644 apps/web/src/components/common/typography/Hero.tsx create mode 100644 apps/web/src/components/common/typography/Label.tsx create mode 100644 apps/web/src/components/common/typography/Title.tsx create mode 100644 apps/web/src/components/common/typography/index.ts diff --git a/apps/web/src/components/common/typography/Hero.tsx b/apps/web/src/components/common/typography/Hero.tsx new file mode 100644 index 000000000..48c0f528d --- /dev/null +++ b/apps/web/src/components/common/typography/Hero.tsx @@ -0,0 +1,50 @@ +import type { HTMLAttributes, ReactNode } from "react"; + +import { cn } from "@/utils/cn"; + +type HeroSize = "lg" | "md" | "sm" | "xs"; +type HeroAlign = "center" | "left" | "right"; + +interface HeroProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> { + size?: HeroSize; + textAlign?: HeroAlign; + children: ReactNode; +} + +const sizeClassName: Record<HeroSize, string> = { + lg: "semantic-textStyle-title-4", + md: "semantic-textStyle-title-3", + sm: "semantic-textStyle-title-2", + xs: "semantic-textStyle-title-1", +}; + +const alignClassName: Record<HeroAlign, string> = { + center: "justify-center", + left: "justify-start", + right: "justify-end", +}; + +function Hero({ + size = "lg", + textAlign = "center", + className, + children, + ...props +}: HeroProps) { + return ( + <div + className={cn( + "flex cursor-default items-center", + sizeClassName[size], + alignClassName[textAlign], + "text-(--semantic-object-boldest)", + className, + )} + {...props} + > + {children} + </div> + ); +} + +export default Hero; diff --git a/apps/web/src/components/common/typography/Label.tsx b/apps/web/src/components/common/typography/Label.tsx new file mode 100644 index 000000000..ce960b799 --- /dev/null +++ b/apps/web/src/components/common/typography/Label.tsx @@ -0,0 +1,78 @@ +import type { ElementType, HTMLAttributes, ReactNode } from "react"; + +import { cn } from "@/utils/cn"; + +type LabelSize = "lg" | "md" | "sm" | "xs"; +type LabelAlign = "center" | "left" | "right"; +type LabelWeight = "bold" | "normal" | "subtle"; +type LabelCursor = "pointer" | "default"; + +interface LabelProps extends Omit<HTMLAttributes<HTMLElement>, "style"> { + as?: ElementType; + size?: LabelSize; + textAlign?: LabelAlign; + weight?: LabelWeight; + cursor?: LabelCursor; + htmlFor?: string; + children: ReactNode; +} + +const sizeWeightClassName: Record<LabelSize, Record<LabelWeight, string>> = { + lg: { + bold: "semantic-textStyle-label-lg-bold", + normal: "semantic-textStyle-label-lg-normal", + subtle: "semantic-textStyle-label-lg-subtle", + }, + md: { + bold: "semantic-textStyle-label-md-bold", + normal: "semantic-textStyle-label-md-normal", + subtle: "semantic-textStyle-label-md-subtle", + }, + sm: { + bold: "semantic-textStyle-label-sm-bold", + normal: "semantic-textStyle-label-sm-normal", + subtle: "semantic-textStyle-label-sm-subtle", + }, + xs: { + bold: "semantic-textStyle-label-xs-bold", + normal: "semantic-textStyle-label-xs-normal", + subtle: "semantic-textStyle-label-xs-subtle", + }, +}; + +const alignClassName: Record<LabelAlign, string> = { + center: "justify-center", + left: "justify-start", + right: "justify-end", +}; + +function Label({ + as, + size = "md", + textAlign = "left", + weight = "normal", + cursor = "default", + className, + children, + ...props +}: LabelProps) { + const Component = as ?? "label"; + + return ( + <Component + className={cn( + "flex items-center", + sizeWeightClassName[size][weight], + alignClassName[textAlign], + cursor === "pointer" ? "cursor-pointer" : "cursor-default", + "text-(--semantic-object-bold)", + className, + )} + {...props} + > + {children} + </Component> + ); +} + +export default Label; diff --git a/apps/web/src/components/common/typography/Title.tsx b/apps/web/src/components/common/typography/Title.tsx new file mode 100644 index 000000000..ad4261385 --- /dev/null +++ b/apps/web/src/components/common/typography/Title.tsx @@ -0,0 +1,50 @@ +import type { HTMLAttributes, ReactNode } from "react"; + +import { cn } from "@/utils/cn"; + +type TitleSize = "lg" | "md" | "sm" | "xs"; +type TitleTextAlign = "center" | "left" | "right"; + +interface TitleProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> { + size?: TitleSize; + textAlign?: TitleTextAlign; + children: ReactNode; +} + +const sizeClassName: Record<TitleSize, string> = { + lg: "semantic-textStyle-title-4", + md: "semantic-textStyle-title-3", + sm: "semantic-textStyle-title-2", + xs: "semantic-textStyle-title-1", +}; + +const alignClassName: Record<TitleTextAlign, string> = { + center: "justify-center", + left: "justify-start", + right: "justify-end", +}; + +function Title({ + size = "md", + textAlign = "left", + className, + children, + ...props +}: TitleProps) { + return ( + <div + className={cn( + "flex cursor-default items-center", + sizeClassName[size], + alignClassName[textAlign], + "text-(--semantic-object-bolder)", + className, + )} + {...props} + > + {children} + </div> + ); +} + +export default Title; diff --git a/apps/web/src/components/common/typography/index.ts b/apps/web/src/components/common/typography/index.ts new file mode 100644 index 000000000..b3485c14c --- /dev/null +++ b/apps/web/src/components/common/typography/index.ts @@ -0,0 +1,3 @@ +export { default as Hero } from "./Hero"; +export { default as Label } from "./Label"; +export { default as Title } from "./Title"; diff --git a/apps/web/src/components/curriculum/sections/CurriculumTabSection.tsx b/apps/web/src/components/curriculum/sections/CurriculumTabSection.tsx index e63ed0f4d..e63a474e6 100644 --- a/apps/web/src/components/curriculum/sections/CurriculumTabSection.tsx +++ b/apps/web/src/components/curriculum/sections/CurriculumTabSection.tsx @@ -1,5 +1,6 @@ -import { ContentBadge, EmptyState, Tab, Title } from "@jects/jds"; +import { ContentBadge, EmptyState, Tab } from "@jects/jds"; +import { Title } from "@/components/common/typography"; import { figmaGuideCurriculumData, teamProjectScheduleData } from "@/constants/curriculumData"; import type { FigmaGuideItem, TeamProjectItem } from "@/types/ui/curriculum"; @@ -63,11 +64,11 @@ const CurriculumTabSection = () => { </Tab.List> <Tab.Content value='team-project-schedule'> - <div className='grid w-full grid-cols-1 gap-(--semantic-spacing-16) pt-(--semantic-spacing-48) tablet:grid-cols-2'> + <div className='tablet:grid-cols-2 grid w-full grid-cols-1 gap-(--semantic-spacing-16) pt-(--semantic-spacing-48)'> {teamProjectScheduleData.map(item => ( <TeamProjectCard key={item.id} item={item} /> ))} - <div className='[&>div]:h-full [&>div]:min-w-0! [&>div]:max-w-full!'> + <div className='[&>div]:h-full [&>div]:max-w-full! [&>div]:min-w-0!'> <EmptyState variant='outlined' header='그 밖에 더 많은 활동들이 기다리고 있어요...' @@ -78,7 +79,7 @@ const CurriculumTabSection = () => { </Tab.Content> <Tab.Content value='figma-guide-curriculum'> - <div className='grid w-full grid-cols-1 gap-(--semantic-spacing-16) pt-(--semantic-spacing-48) tablet:grid-cols-2'> + <div className='tablet:grid-cols-2 grid w-full grid-cols-1 gap-(--semantic-spacing-16) pt-(--semantic-spacing-48)'> {figmaGuideCurriculumData.map(item => ( <FigmaGuideCard key={item.id} item={item} /> ))} diff --git a/apps/web/src/components/gnb/Sidebar.tsx b/apps/web/src/components/gnb/Sidebar.tsx index ba7d6c6e2..5da168052 100644 --- a/apps/web/src/components/gnb/Sidebar.tsx +++ b/apps/web/src/components/gnb/Sidebar.tsx @@ -1,9 +1,10 @@ -import { Divider, IconButton, Label, MenuItem } from "@jects/jds"; +import { Divider, IconButton, MenuItem } from "@jects/jds"; import type { Dispatch, MouseEvent, SetStateAction } from "react"; import { useEffect } from "react"; import { createPortal } from "react-dom"; import { useNavigate } from "react-router-dom"; +import { Label } from "@/components/common/typography"; import { PATH } from "@/constants/path"; interface SidebarMenusProps { diff --git a/apps/web/src/components/main/sections/HeroSection.tsx b/apps/web/src/components/main/sections/HeroSection.tsx index df9093d07..d4562e245 100644 --- a/apps/web/src/components/main/sections/HeroSection.tsx +++ b/apps/web/src/components/main/sections/HeroSection.tsx @@ -1,7 +1,8 @@ -import { Hero, Icon, Label } from "@jects/jds"; +import { Icon } from "@jects/jds"; import { useEffect, useState } from "react"; import heroBackground from "@/assets/images/hero-background.png"; +import { Hero, Label } from "@/components/common/typography"; const ANIMATION_DELAY_MS = 800; const ANIMATION_DURATION_MS = 500; @@ -100,7 +101,7 @@ const HeroSection = () => { background: "radial-gradient(33.77% 43.9% at 50% 50%, #191B2480 0%, #191B2400 100%)", }} > - <Hero size='xs' textAlign='center' color='white'> + <Hero size='xs' textAlign='center' className='text-white'> <span className='flex flex-col items-center'> <span>젝트에서</span> <RotatingText /> @@ -110,7 +111,7 @@ const HeroSection = () => { </div> <div className='absolute bottom-10 flex flex-col items-center gap-2'> - <Label as='span' size='md' weight='bold' className='text-white!'> + <Label as='span' size='md' weight='bold' className='text-white'> 아래로 스크롤해주세요 </Label> <Icon name='arrow-down-wide-line' size='md' color='white' /> diff --git a/apps/web/src/components/main/sections/IntroSection.tsx b/apps/web/src/components/main/sections/IntroSection.tsx index f0af78cd1..570a87351 100644 --- a/apps/web/src/components/main/sections/IntroSection.tsx +++ b/apps/web/src/components/main/sections/IntroSection.tsx @@ -1,17 +1,8 @@ -import { - Callout, - ContentBadge, - EmptyState, - Hero, - Icon, - Image, - Label, - LabelButton, - Title as JdsTitle, -} from "@jects/jds"; +import { Callout, ContentBadge, EmptyState, Icon, Image, LabelButton } from "@jects/jds"; import { useNavigate } from "react-router-dom"; import introTeamMeetingImage from "@/assets/images/intro-team-meeting.png"; +import { Hero, Label, Title } from "@/components/common/typography"; import { positionData, programData, statData } from "@/constants/mainPageData"; const wrapperClassName = @@ -77,7 +68,12 @@ const IntroSection = () => { </Callout.Basic> ))} </div> - <Label as='span' size='sm' weight='normal' color='var(--semantic-object-assistive)'> + <Label + as='span' + size='sm' + weight='normal' + className='text-(--semantic-object-assistive)' + > *현 4기 기준, 진행 완료 및 진행중 프로젝트 포함. </Label> </div> @@ -107,9 +103,9 @@ const IntroSection = () => { > <div className='flex items-center gap-(--semantic-spacing-8)'> <Icon name={icon} size='2xl' /> - <JdsTitle size='sm' textAlign='left'> + <Title size='sm' textAlign='left'> {title} - </JdsTitle> +

{description} diff --git a/apps/web/src/components/main/sections/JoinSection.tsx b/apps/web/src/components/main/sections/JoinSection.tsx index 7ec7f9d1c..2f753fc01 100644 --- a/apps/web/src/components/main/sections/JoinSection.tsx +++ b/apps/web/src/components/main/sections/JoinSection.tsx @@ -1,7 +1,8 @@ -import { BlockButton, Hero, Image, Label } from "@jects/jds"; +import { BlockButton, Image } from "@jects/jds"; import { useNavigate } from "react-router-dom"; import joinTeamMeetingImage from "@/assets/images/join-team-meeting.png"; +import { Hero, Label } from "@/components/common/typography"; import { PATH } from "@/constants/path"; import { trackApplyStart } from "@/utils/analytics"; @@ -20,7 +21,7 @@ const JoinSection = () => {

- + {"젝트의 구성원으로\n함께해주세요"}
@@ -28,7 +29,7 @@ const JoinSection = () => { size='lg' textAlign='left' weight='bold' - color='var(--semantic-object-static-inverse-normal)' + className='text-(--semantic-object-static-inverse-normal)' > 모든 구성원들의 몰입과 성장을 위해. diff --git a/apps/web/src/components/vision/sections/GoalSection.tsx b/apps/web/src/components/vision/sections/GoalSection.tsx index 744ba8b30..ad3bd65dc 100644 --- a/apps/web/src/components/vision/sections/GoalSection.tsx +++ b/apps/web/src/components/vision/sections/GoalSection.tsx @@ -1,4 +1,4 @@ -import { Title } from "@jects/jds"; +import { Title } from "@/components/common/typography"; const GoalSection = () => { return ( @@ -8,7 +8,7 @@ const GoalSection = () => { 젝트의 목표 - + <Title size='md' textAlign='left' className='text-(--semantic-object-boldest)'> 우리는 IT 생태계의 선순환을 목표로 활동하고 있습니다. diff --git a/apps/web/src/components/vision/sections/GrowthStorySection.tsx b/apps/web/src/components/vision/sections/GrowthStorySection.tsx index a1c28c34e..93f14b901 100644 --- a/apps/web/src/components/vision/sections/GrowthStorySection.tsx +++ b/apps/web/src/components/vision/sections/GrowthStorySection.tsx @@ -1,4 +1,4 @@ -import { Title } from "@jects/jds"; +import { Title } from "@/components/common/typography"; const GrowthStorySection = () => { return ( diff --git a/apps/web/src/components/vision/sections/MemberSection.tsx b/apps/web/src/components/vision/sections/MemberSection.tsx index 72d112327..6ff49125e 100644 --- a/apps/web/src/components/vision/sections/MemberSection.tsx +++ b/apps/web/src/components/vision/sections/MemberSection.tsx @@ -1,6 +1,7 @@ -import { ContentBadge, Icon, Image, Tab, Title } from "@jects/jds"; +import { ContentBadge, Icon, Image, Tab } from "@jects/jds"; import { useState } from "react"; +import { Title } from "@/components/common/typography"; import { roleBadgeVariantMap, roleIconMap, @@ -135,7 +136,7 @@ const MemberSection = () => { 젝트를 만드는 사람들 - + <Title size='md' textAlign='left' className='text-(--semantic-object-boldest)'> 열정 넘치는 구성원들이 젝트에 직접 기여하며 많은 가치를 창출하고 있습니다.
diff --git a/apps/web/src/components/vision/sections/ProjectStartSection.tsx b/apps/web/src/components/vision/sections/ProjectStartSection.tsx index 109204046..1ae463d72 100644 --- a/apps/web/src/components/vision/sections/ProjectStartSection.tsx +++ b/apps/web/src/components/vision/sections/ProjectStartSection.tsx @@ -1,4 +1,4 @@ -import { Title } from "@jects/jds"; +import { Title } from "@/components/common/typography"; const ProjectStartSection = () => { return ( @@ -8,7 +8,7 @@ const ProjectStartSection = () => { 프로젝트 시작 - + <Title size='md' textAlign='left' className='text-(--semantic-object-boldest)'> 젝트는 개발자들의 소규모 사이드 프로젝트 모임으로 시작했습니다. diff --git a/apps/web/src/components/vision/sections/VisionHeroSection.tsx b/apps/web/src/components/vision/sections/VisionHeroSection.tsx index 5d26e7037..6c21afe2a 100644 --- a/apps/web/src/components/vision/sections/VisionHeroSection.tsx +++ b/apps/web/src/components/vision/sections/VisionHeroSection.tsx @@ -1,12 +1,13 @@ -import { Hero, Image, Title } from "@jects/jds"; +import { Image } from "@jects/jds"; import visionBannerImage from "@/assets/images/vision-banner.png"; +import { Hero, Title } from "@/components/common/typography"; const VisionHeroSection = () => { return (
- + <Title size='xs' textAlign='left' className='text-(--semantic-object-neutral)'> IT 생태계의 선순환을 목표로 활동하는 diff --git a/apps/web/src/features/apply/steps/CompleteStep.tsx b/apps/web/src/features/apply/steps/CompleteStep.tsx index 95ea63bc3..accaccfee 100644 --- a/apps/web/src/features/apply/steps/CompleteStep.tsx +++ b/apps/web/src/features/apply/steps/CompleteStep.tsx @@ -1,8 +1,9 @@ -import { BlockButton, Image, LocalNavigation, Title } from "@jects/jds"; +import { BlockButton, Image, LocalNavigation } from "@jects/jds"; import { useNavigate } from "react-router-dom"; import type { JobFamily } from "@/apis/apply"; import completeImage from "@/assets/images/complete.png"; +import { Title } from "@/components/common/typography"; import { APPLY_TITLE, findJobFamilyOption } from "@/constants/applyPageData"; import { PATH } from "@/constants/path"; diff --git a/apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx b/apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx index c31a44451..70159a75c 100644 --- a/apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx +++ b/apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx @@ -1,16 +1,9 @@ -import { - BlockButton, - Checkbox, - Icon, - Label, - TextField, - toastController, - Tooltip, -} from "@jects/jds"; +import { BlockButton, Checkbox, Icon, TextField, toastController, Tooltip } from "@jects/jds"; import { Controller } from "react-hook-form"; import { SelectController } from "./components/SelectController"; +import { Label } from "@/components/common/typography"; import { APPLY_MESSAGE } from "@/constants/applyMessages"; import { APPLY_TITLE } from "@/constants/applyPageData"; import { ApplyStepLayout } from "@/features/shared/components"; diff --git a/apps/web/src/features/apply/steps/registration/components/QuestionFieldWrapper.tsx b/apps/web/src/features/apply/steps/registration/components/QuestionFieldWrapper.tsx index 719be2f9e..e3430a2f0 100644 --- a/apps/web/src/features/apply/steps/registration/components/QuestionFieldWrapper.tsx +++ b/apps/web/src/features/apply/steps/registration/components/QuestionFieldWrapper.tsx @@ -1,6 +1,7 @@ -import { Title } from "@jects/jds"; import type { ReactNode } from "react"; +import { Title } from "@/components/common/typography"; + interface QuestionFieldWrapperProps { title: string; subtitle?: string | null; diff --git a/apps/web/src/features/shared/components/ApplyStepLayout.tsx b/apps/web/src/features/shared/components/ApplyStepLayout.tsx index 2794ec0a2..41340d25c 100644 --- a/apps/web/src/features/shared/components/ApplyStepLayout.tsx +++ b/apps/web/src/features/shared/components/ApplyStepLayout.tsx @@ -1,7 +1,8 @@ -import { LocalNavigation, Step, Title } from "@jects/jds"; +import { LocalNavigation, Step } from "@jects/jds"; import type { ReactNode } from "react"; import type { JobFamily } from "@/apis/apply"; +import { Title } from "@/components/common/typography"; import { findJobFamilyOption } from "@/constants/applyPageData"; import { STEP_LABELS } from "@/types/funnel"; diff --git a/apps/web/src/pages/ApplyGuidePage.tsx b/apps/web/src/pages/ApplyGuidePage.tsx index 3c43a5f3c..c52d47ba2 100644 --- a/apps/web/src/pages/ApplyGuidePage.tsx +++ b/apps/web/src/pages/ApplyGuidePage.tsx @@ -4,18 +4,17 @@ import { Accordion, BlockButton, Divider, - Hero, IconButton, Label, LocalNavigation, Tab, - Title, toastController, } from "@jects/jds"; import { theme } from "@jects/jds/tokens"; import { useNavigate, useParams, useSearchParams, Navigate } from "react-router-dom"; import type { JobFamily } from "@/apis/apply"; +import { Hero, Title } from "@/components/common/typography"; import PageModule from "@/components/layout/PageModule"; import { findJobFamilyOption, diff --git a/apps/web/src/pages/ApplyListPage.tsx b/apps/web/src/pages/ApplyListPage.tsx index b8fe56fca..fdd5b243f 100644 --- a/apps/web/src/pages/ApplyListPage.tsx +++ b/apps/web/src/pages/ApplyListPage.tsx @@ -1,10 +1,11 @@ -import { Card, Divider, Hero, Select, SelectField, Title } from "@jects/jds"; +import { Card, Divider, Select, SelectField } from "@jects/jds"; import { Fragment, useState } from "react"; import backendImage from "@/assets/images/backend.png"; import frontendImage from "@/assets/images/frontend.png"; import productDesignerImage from "@/assets/images/product-designer.png"; import productManagerImage from "@/assets/images/product-manager.png"; +import { Hero, Title } from "@/components/common/typography"; import PageHeroContainer from "@/components/layout/PageHeroContainer"; import PageModule from "@/components/layout/PageModule"; import { PATH } from "@/constants/path"; diff --git a/apps/web/src/pages/Curriculum.tsx b/apps/web/src/pages/Curriculum.tsx index 55fd43bdd..80e60d13e 100644 --- a/apps/web/src/pages/Curriculum.tsx +++ b/apps/web/src/pages/Curriculum.tsx @@ -1,5 +1,4 @@ -import { Hero, Title } from "@jects/jds"; - +import { Hero, Title } from "@/components/common/typography"; import CurriculumTabSection from "@/components/curriculum/sections/CurriculumTabSection"; import PageModule from "@/components/layout/PageModule"; diff --git a/apps/web/src/pages/Faq.tsx b/apps/web/src/pages/Faq.tsx index 3298ceea1..3c7f8a119 100644 --- a/apps/web/src/pages/Faq.tsx +++ b/apps/web/src/pages/Faq.tsx @@ -1,6 +1,7 @@ -import { Accordion, Hero, Tab, Title } from "@jects/jds"; +import { Accordion, Tab } from "@jects/jds"; import { useMediaQueryFlags } from "@jects/jds/hooks"; +import { Hero, Title } from "@/components/common/typography"; import PageHeroContainer from "@/components/layout/PageHeroContainer"; import PageModule from "@/components/layout/PageModule"; import { faqActivity, faqApply, faqJect, faqProject } from "@/constants/faqPageData"; @@ -13,102 +14,102 @@ function Faq() { return ( - -
- - FAQ - - - 젝트에 대해 자주 묻는 질문들이 정리되어 있어요. - -
- + +
+ + FAQ + + + 젝트에 대해 자주 묻는 질문들이 정리되어 있어요. + +
+ -
- - - 지원 - 프로젝트 - 활동 - 젝트 - +
+ + + 지원 + 프로젝트 + 활동 + 젝트 + - -
- - {faqApply.map(({ id, title, content }) => ( - - {title} - {content} - - ))} - -
- - -
- - {faqProject.map(({ id, title, content }) => ( - - {title} - {content} - - ))} - -
- - -
- - {faqActivity.map(({ id, title, content }) => ( - - {title} - {content} - - ))} - -
- - -
- - {faqJect.map(({ id, title, content }) => ( - - {title} - {content} - - ))} - -
- - -
- + +
+ + {faqApply.map(({ id, title, content }) => ( + + {title} + {content} + + ))} + +
+ + +
+ + {faqProject.map(({ id, title, content }) => ( + + {title} + {content} + + ))} + +
+ + +
+ + {faqActivity.map(({ id, title, content }) => ( + + {title} + {content} + + ))} + +
+ + +
+ + {faqJect.map(({ id, title, content }) => ( + + {title} + {content} + + ))} + +
+ + +
+ ); } diff --git a/apps/web/src/pages/LiveSession.tsx b/apps/web/src/pages/LiveSession.tsx index af816f3a8..29578c5ae 100644 --- a/apps/web/src/pages/LiveSession.tsx +++ b/apps/web/src/pages/LiveSession.tsx @@ -1,7 +1,8 @@ -import { Card, Hero, Title } from "@jects/jds"; +import { Card } from "@jects/jds"; import EmptyData from "@/components/common/emptyState/EmptyData"; import Label from "@/components/common/label/Label"; +import { Hero, Title } from "@/components/common/typography"; import PageHeroContainer from "@/components/layout/PageHeroContainer"; import PageModule from "@/components/layout/PageModule"; import useJectalksQuery from "@/hooks/useJectalksQuery"; @@ -11,63 +12,63 @@ const LiveSession = () => { return ( - -
- - 라이브 세션 - - - 온/오프라인에서 구성원이 자신의 경험과 기술에 대해 발표하는 콘텐츠입니다. - -
- - -
- {isError ? ( - - ) : isPending ? ( -
- -
- ) : !jectalks || jectalks.length === 0 ? ( -
- -
- ) : ( -
- {jectalks.map(session => ( - - ))} -
- )} + +
+ + 라이브 세션 + + + 온/오프라인에서 구성원이 자신의 경험과 기술에 대해 발표하는 콘텐츠입니다. +
- + + +
+ {isError ? ( + + ) : isPending ? ( +
+ +
+ ) : !jectalks || jectalks.length === 0 ? ( +
+ +
+ ) : ( +
+ {jectalks.map(session => ( + + ))} +
+ )} +
+ ); }; diff --git a/apps/web/src/pages/Maintenance.tsx b/apps/web/src/pages/Maintenance.tsx index 32bd4477b..5a22706b0 100644 --- a/apps/web/src/pages/Maintenance.tsx +++ b/apps/web/src/pages/Maintenance.tsx @@ -1,6 +1,7 @@ -import { Icon, Title } from "@jects/jds"; +import { Icon } from "@jects/jds"; import Footer from "@/components/common/footer/Footer"; +import { Title } from "@/components/common/typography"; import PagesContainer from "@/components/layout/PagesContainer"; function Maintenance() { diff --git a/apps/web/src/pages/MiniStudy.tsx b/apps/web/src/pages/MiniStudy.tsx index 8d5b25ab7..cfa9b1532 100644 --- a/apps/web/src/pages/MiniStudy.tsx +++ b/apps/web/src/pages/MiniStudy.tsx @@ -1,7 +1,8 @@ -import { Card, Hero, Title } from "@jects/jds"; +import { Card } from "@jects/jds"; import EmptyData from "@/components/common/emptyState/EmptyData"; import Label from "@/components/common/label/Label"; +import { Hero, Title } from "@/components/common/typography"; import PageHeroContainer from "@/components/layout/PageHeroContainer"; import PageModule from "@/components/layout/PageModule"; import useMiniStudiesQuery from "@/hooks/useMiniStudiesQuery"; @@ -11,55 +12,55 @@ const MiniStudy = () => { return ( - -
- - 미니 스터디 - - - 활동 중 팀 프로젝트와 병행할 수 있는, 성장을 위한 스터디입니다. - -
- - -
- {isError ? ( - - ) : isPending ? ( -
- -
- ) : !miniStudies || miniStudies.length === 0 ? ( -
- -
- ) : ( -
- {miniStudies.map(study => ( - - ))} -
- )} + +
+ + 미니 스터디 + + + 활동 중 팀 프로젝트와 병행할 수 있는, 성장을 위한 스터디입니다. +
- + + +
+ {isError ? ( + + ) : isPending ? ( +
+ +
+ ) : !miniStudies || miniStudies.length === 0 ? ( +
+ +
+ ) : ( +
+ {miniStudies.map(study => ( + + ))} +
+ )} +
+ ); }; diff --git a/apps/web/src/pages/NonSpecificError.tsx b/apps/web/src/pages/NonSpecificError.tsx index 8f509df01..73f416e63 100644 --- a/apps/web/src/pages/NonSpecificError.tsx +++ b/apps/web/src/pages/NonSpecificError.tsx @@ -1,9 +1,10 @@ -import { BlockButton, Icon, Title } from "@jects/jds"; +import { BlockButton, Icon } from "@jects/jds"; import { captureException } from "@sentry/react"; import { useEffect } from "react"; import { useNavigate, useRouteError } from "react-router-dom"; import Footer from "@/components/common/footer/Footer"; +import { Title } from "@/components/common/typography"; import GlobalNavigationBar from "@/components/gnb/GlobalNavigationBar"; import PageBoard from "@/components/layout/PageBoard"; import PageModule from "@/components/layout/PageModule"; diff --git a/apps/web/src/pages/NotFoundError.tsx b/apps/web/src/pages/NotFoundError.tsx index 0e06dcb29..4ce40ceaf 100644 --- a/apps/web/src/pages/NotFoundError.tsx +++ b/apps/web/src/pages/NotFoundError.tsx @@ -1,7 +1,8 @@ -import { BlockButton, Hero, Title } from "@jects/jds"; +import { BlockButton } from "@jects/jds"; import { useNavigate } from "react-router-dom"; import Footer from "@/components/common/footer/Footer"; +import { Hero, Title } from "@/components/common/typography"; import GlobalNavigationBar from "@/components/gnb/GlobalNavigationBar"; import PageBoard from "@/components/layout/PageBoard"; import PageModule from "@/components/layout/PageModule"; @@ -17,7 +18,7 @@ function NotFoundError() {
- + 404
diff --git a/apps/web/src/pages/TeamProject.tsx b/apps/web/src/pages/TeamProject.tsx index 2c56c7644..5b2a929b0 100644 --- a/apps/web/src/pages/TeamProject.tsx +++ b/apps/web/src/pages/TeamProject.tsx @@ -1,8 +1,9 @@ -import { Card, Hero, Select, SelectField, Title } from "@jects/jds"; +import { Card, Select, SelectField } from "@jects/jds"; import Lottie from "lottie-react"; import { useState, useRef } from "react"; import loadingSpinner from "@/assets/lottie/ject-loadingSpinner.json"; +import { Hero, Title } from "@/components/common/typography"; import PageHeroContainer from "@/components/layout/PageHeroContainer"; import PageModule from "@/components/layout/PageModule"; import useCloseOutside from "@/hooks/useCloseOutside"; @@ -46,70 +47,70 @@ const TeamProject = () => { return ( - -
- - 팀 프로젝트 - - - 젝트에서 진행한 팀 프로젝트들을 소개합니다. - -
-
- setIsOpen(!isOpen)} /> - {isOpen && ( -
- -
- )} -
- - -
- {isLoading && ( -
- + +
+ + 팀 프로젝트 + + + 젝트에서 진행한 팀 프로젝트들을 소개합니다. + +
+
+ setIsOpen(!isOpen)} /> + {isOpen && ( +
+
)} +
+ - {!isLoading && ( - <> -
- {allProjects.map(project => ( -
- -
- ))} -
+
+ {isLoading && ( +
+ +
+ )} - {!isError && allProjects.length > 0 && ( -
- {isFetchingNextPage && } + {!isLoading && ( + <> +
+ {allProjects.map(project => ( +
+
- )} - - )} -
- + ))} +
+ + {!isError && allProjects.length > 0 && ( +
+ {isFetchingNextPage && } +
+ )} + + )} +
+ ); }; diff --git a/apps/web/src/pages/TeamProjectDetail.tsx b/apps/web/src/pages/TeamProjectDetail.tsx index f7660f435..1d789cc64 100644 --- a/apps/web/src/pages/TeamProjectDetail.tsx +++ b/apps/web/src/pages/TeamProjectDetail.tsx @@ -1,13 +1,5 @@ import type { ImgRatio } from "@jects/jds"; -import { - BlockButton, - ContentBadge, - Hero, - IconButton, - Image, - Label, - LocalNavigation, -} from "@jects/jds"; +import { BlockButton, ContentBadge, IconButton, Image, LocalNavigation } from "@jects/jds"; import { useEffect } from "react"; import { Navigate, useNavigate, useParams } from "react-router-dom"; @@ -15,6 +7,7 @@ import positionBe from "@/assets/images/position-be.png"; import positionFe from "@/assets/images/position-fe.png"; import positionPd from "@/assets/images/position-pd.png"; import positionPm from "@/assets/images/position-pm.png"; +import { Hero, Label } from "@/components/common/typography"; import PageModule from "@/components/layout/PageModule"; import { PATH } from "@/constants/path"; import { useProjectDetailQuery } from "@/hooks/useProjectDetailQuery"; @@ -128,149 +121,149 @@ const TeamProjectDetail = () => { return ( - - void navigate(PATH.teamProject)} /> - 팀 프로젝트 - + + void navigate(PATH.teamProject)} /> + 팀 프로젝트 + -
- {/* 썸네일 */} - {project.name +
+ {/* 썸네일 */} + {project.name - {/* 서비스 샘플 이미지 */} - {project.sampleImageUrls && ( -
- {project.sampleImageUrls.map(img => ( - {project.name + {/* 서비스 샘플 이미지 */} + {project.sampleImageUrls && ( +
+ {project.sampleImageUrls.map(img => ( + {project.name + ))} +
+ )} + + {/* 타이틀 정보 */} +
+
+
+ {project.badges.map(badge => ( + + {badge} + ))}
- )} - - {/* 타이틀 정보 */} -
-
-
- {project.badges.map(badge => ( - - {badge} - - ))} -
-
- - {project.name} - - - - -
- - {project.description} - +
+ + {project.name} + + + +
+ + {project.description} + +
- {/* 프로젝트 정보 - 진행 기간 및 사용 기술 */} -
-
-
-
- -
-
- - - -
+ {/* 프로젝트 정보 - 진행 기간 및 사용 기술 */} +
+
+
+
+
- -
-
- -
-
- {project.techStack.map(stack => ( - - ))} -
+
+ + +
- {/* 프로젝트 정보 - 팀원 */} -
- - - - +
+
+ +
+
+ {project.techStack.map(stack => ( + + ))} +
- {/* 버튼 */} - - - 서비스 바로가기 - - + {/* 프로젝트 정보 - 팀원 */} +
+ + + + +
-
- {/* 서비스 소개 */} -
- {project.descriptionImageUrls.map(img => ( - {project.name - ))} + {/* 버튼 */} + + + 서비스 바로가기 + +
- +
+ + {/* 서비스 소개 */} +
+ {project.descriptionImageUrls.map(img => ( + {project.name + ))} +
+ ); }; From 5240637e84e09816d45bf816419878a101521d97 Mon Sep 17 00:00:00 2001 From: ccconac Date: Mon, 18 May 2026 10:55:59 +0900 Subject: [PATCH 10/16] =?UTF-8?q?refactor:=20JDS=20=ED=83=80=EC=9D=B4?= =?UTF-8?q?=ED=8F=AC=EA=B7=B8=EB=9E=98=ED=94=BC=20=EC=9C=A0=ED=8B=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=82=B4=EB=B6=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=84=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Accordion/Accordion.tsx | 6 +- .../components/Accordion/accordion.styles.ts | 19 +-- .../Badge/contentBadge/ContentBadge.style.ts | 29 ++--- .../Badge/contentBadge/ContentBadge.tsx | 17 +-- .../Badge/numericBadge/NumericBadge.style.ts | 20 +-- .../Badge/numericBadge/NumericBadge.tsx | 12 +- .../jds/src/components/Checkbox/Checkbox.tsx | 10 +- .../components/Checkbox/checkbox.styles.ts | 16 ++- .../src/components/Dialog/Dialog.styles.ts | 4 +- packages/jds/src/components/Dialog/Dialog.tsx | 6 +- .../src/components/EmptyState/EmptyState.tsx | 4 +- .../EmptyState/emptyState.styles.ts | 13 +- .../jds/src/components/FileItem/FileItem.tsx | 18 +-- .../components/FileItem/fileItem.styles.ts | 15 ++- .../src/components/FileItem/fileItem.types.ts | 1 + .../jds/src/components/Image/Image.style.ts | 7 +- packages/jds/src/components/Image/Image.tsx | 3 +- .../components/Input/InputArea/InputArea.tsx | 15 ++- .../Input/InputArea/inputArea.styles.ts | 7 +- .../Input/SelectField/SelectFieldButton.tsx | 10 +- .../Input/TagField/TagFieldButton.tsx | 10 +- .../Input/TextField/TextFieldButton.tsx | 10 +- .../src/components/Input/shared/FormField.tsx | 10 +- .../components/Input/shared/field.styles.ts | 11 +- .../src/components/Menu/MegaMenu/MegaMenu.tsx | 6 +- .../Menu/MegaMenu/megaMenu.styles.ts | 10 +- .../src/components/Menu/Menu/Menu.stories.tsx | 6 +- .../src/components/Menu/Menu/Menu.styles.ts | 6 +- .../jds/src/components/Menu/Menu/Menu.tsx | 11 +- .../src/components/Menu/Menu/menu.types.ts | 2 +- .../src/components/Menu/Menu/menu.variants.ts | 2 +- .../src/components/Menu/MenuItem/MenuItem.tsx | 20 ++- .../Menu/MenuItem/menuItem.styles.ts | 11 +- .../jds/src/components/Radio/Radio.style.ts | 2 +- .../SegmentedControl/SegmentedControl.tsx | 7 +- packages/jds/src/components/Select/Select.tsx | 7 +- .../src/components/Select/SelectCheckbox.tsx | 12 +- .../jds/src/components/Select/SelectList.tsx | 10 +- .../jds/src/components/Select/SelectRadio.tsx | 12 +- .../src/components/Select/select.styles.ts | 12 +- .../jds/src/components/Snackbar/Snackbar.tsx | 6 +- .../components/Snackbar/snackbar.styles.ts | 10 +- packages/jds/src/components/Step/Step.tsx | 35 ++--- .../jds/src/components/Step/step.styles.ts | 15 ++- packages/jds/src/components/Tab/tab.styles.ts | 15 ++- packages/jds/src/components/Tab/tab.tsx | 10 +- .../components/Table/compound/Table.styles.ts | 10 +- .../Table/compound/TableHeaderItem.tsx | 4 +- .../Table/compound/TableRowItem.tsx | 16 ++- packages/jds/src/components/Toast/Toast.tsx | 6 +- .../jds/src/components/Toast/toast.styles.ts | 7 +- .../components/Tooltip/Tooltip.stories.tsx | 5 +- .../jds/src/components/Uploader/Uploader.tsx | 12 +- .../Uploader/UploaderFile.stories.tsx | 20 ++- .../components/Uploader/uploader.styles.ts | 11 +- packages/jds/src/utils/index.ts | 1 + packages/jds/src/utils/typography.css.ts | 121 ++++++++++++++++++ packages/jds/src/utils/typography.ts | 81 +++++------- 58 files changed, 462 insertions(+), 332 deletions(-) create mode 100644 packages/jds/src/utils/typography.css.ts diff --git a/packages/jds/src/components/Accordion/Accordion.tsx b/packages/jds/src/components/Accordion/Accordion.tsx index 1489db368..07abdb506 100644 --- a/packages/jds/src/components/Accordion/Accordion.tsx +++ b/packages/jds/src/components/Accordion/Accordion.tsx @@ -20,6 +20,8 @@ import type { } from "./accordion.types"; import { AccordionContext, useAccordionContext } from "./accordionContext"; +import { getLabelClassName } from "@/utils/typography"; + /** * Accordion.Root * - Radix UI Accordion의 루트 컨테이너입니다. @@ -70,9 +72,7 @@ const AccordionTrigger = forwardRef( {withPrefixIcon && } - - {children} - + {children} diff --git a/packages/jds/src/components/Accordion/accordion.styles.ts b/packages/jds/src/components/Accordion/accordion.styles.ts index f68ba4079..989a1153a 100644 --- a/packages/jds/src/components/Accordion/accordion.styles.ts +++ b/packages/jds/src/components/Accordion/accordion.styles.ts @@ -9,8 +9,9 @@ import type { StyledAccordionTriggerProps, } from "./accordion.types"; import type { IconSize } from "../Icon/Icon.types"; -import { Label } from "../Label"; -import type { LabelSize } from "../Label/Label.style"; + +import { shouldForwardTypographyProp } from "@/utils/typography"; +import type { LabelSize } from "@/utils/typography"; export const accordionSizeMap: Record< AccordionSize, @@ -121,12 +122,14 @@ export const StyledAccordionChevron = styled("div")(({ theme }) => ({ transition: `transform ${theme.environment.semantic.duration[300]} ${theme.environment.semantic.motion.fluent}`, })); -export const StyleLabel = styled(Label)(() => ({ - color: "inherit", - textAlign: "left" as const, - textWrap: "wrap" as const, - cursor: "pointer", -})); +export const StyleLabel = styled("span", { shouldForwardProp: shouldForwardTypographyProp })( + () => ({ + color: "inherit", + textAlign: "left" as const, + textWrap: "wrap" as const, + cursor: "pointer", + }), +); const slideUp = keyframes` from { height: var(--radix-accordion-content-height); } diff --git a/packages/jds/src/components/Badge/contentBadge/ContentBadge.style.ts b/packages/jds/src/components/Badge/contentBadge/ContentBadge.style.ts index 8295e59d6..a0c7b5646 100644 --- a/packages/jds/src/components/Badge/contentBadge/ContentBadge.style.ts +++ b/packages/jds/src/components/Badge/contentBadge/ContentBadge.style.ts @@ -20,7 +20,7 @@ import { } from "./contentBadge.variants"; import { Icon } from "@/components/Icon"; -import { Label } from "@/components/Label"; +import { shouldForwardTypographyProp } from "@/utils/typography"; interface ContentBasicBadgeDivProps { hierarchy: BasicHierarchy; @@ -59,12 +59,9 @@ interface ContentBadgeBasicLabelProps { isMuted: boolean; } -export const ContentBadgeBasicLabel = styled(Label)(({ - theme, - hierarchy, - badgeStyle, - isMuted, -}) => { +export const ContentBadgeBasicLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, +})(({ theme, hierarchy, badgeStyle, isMuted }) => { const color = isMuted ? contentBadgeBasicMutedStylesMap(theme)[badgeStyle].color : contentBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].color; @@ -131,12 +128,9 @@ interface ContentBadgeFeedbackLabelProps { isMuted: boolean; } -export const ContentBadgeFeedbackLabel = styled(Label)(({ - theme, - variant, - badgeStyle, - isMuted, -}) => { +export const ContentBadgeFeedbackLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, +})(({ theme, variant, badgeStyle, isMuted }) => { const color = isMuted ? contentBadgeFeedbackMutedStylesMap(theme)[badgeStyle][variant].color : contentBadgeFeedbackStylesMap(theme)[badgeStyle][variant].color; @@ -182,12 +176,9 @@ interface ContentBadgeThemeLabelProps { isMuted: boolean; } -export const ContentBadgeThemeLabel = styled(Label)(({ - theme, - variant, - badgeStyle, - isMuted, -}) => { +export const ContentBadgeThemeLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, +})(({ theme, variant, badgeStyle, isMuted }) => { const color = isMuted ? contentBadgeThemeMutedStylesMap(theme)[badgeStyle][variant].color : contentBadgeThemeStylesMap(theme)[badgeStyle][variant].color; diff --git a/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx b/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx index 87b84dfdd..f02646a75 100644 --- a/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx +++ b/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx @@ -18,6 +18,8 @@ import type { } from "../badge.types"; import { iconSizeMap } from "./contentBadge.variants"; +import { getLabelClassName } from "@/utils/typography"; + export interface ContentBadgeBasicProps { hierarchy?: BasicHierarchy; size?: BadgeSize; @@ -48,10 +50,7 @@ const ContentBadgeBasic = ({ withIcon={withIcon} > (({ - theme, - hierarchy, - badgeStyle, - isMuted, -}) => { +export const NumericBadgeBasicLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, +})(({ theme, hierarchy, badgeStyle, isMuted }) => { const color = isMuted ? numericBadgeBasicMutedStylesMap(theme)[badgeStyle].color : numericBadgeBasicStylesMap(theme)[badgeStyle][hierarchy].color; @@ -95,12 +92,9 @@ interface NumericBadgeFeedbackLabelProps { isMuted: boolean; } -export const NumericBadgeFeedbackLabel = styled(Label)(({ - theme, - variant, - badgeStyle, - isMuted, -}) => { +export const NumericBadgeFeedbackLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, +})(({ theme, variant, badgeStyle, isMuted }) => { const color = isMuted ? numericBadgeFeedbacksMutedStylesMap(theme)[badgeStyle][variant].color : numericBadgeFeedbackStylesMap(theme)[badgeStyle][variant].color; diff --git a/packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx b/packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx index 3ca5daafe..d39fbb07f 100644 --- a/packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx +++ b/packages/jds/src/components/Badge/numericBadge/NumericBadge.tsx @@ -8,6 +8,8 @@ import { NumericBadgeFeedbackLabel, } from "./NumericBadge.style"; +import { getLabelClassName } from "@/utils/typography"; + export interface NumericBadgeBasicProps { hierarchy?: BasicHierarchy; size?: BadgeSize; @@ -31,10 +33,7 @@ const NumericBadgeBasic = ({ isMuted={isMuted} > ( ( { @@ -176,9 +178,7 @@ const CheckboxContent = forwardRef( @@ -186,9 +186,7 @@ const CheckboxContent = forwardRef( {subLabel && ( diff --git a/packages/jds/src/components/Checkbox/checkbox.styles.ts b/packages/jds/src/components/Checkbox/checkbox.styles.ts index 1f27e4966..9f4f941c6 100644 --- a/packages/jds/src/components/Checkbox/checkbox.styles.ts +++ b/packages/jds/src/components/Checkbox/checkbox.styles.ts @@ -4,12 +4,14 @@ import styled from "@emotion/styled"; import type { CheckboxAlign, CheckboxSize, CheckboxVariant } from "./checkbox.types"; import type { IconSize } from "../Icon/Icon.types"; -import type { LabelOwnProps } from "../Label"; -import { Label } from "../Label/Label"; -import type { LabelSize } from "../Label/Label.style"; import type { Variant } from "@/types"; import { InteractionLayer, pxToRem } from "@/utils"; +import { + shouldForwardTypographyProp, + type LabelOwnProps, + type LabelSize, +} from "@/utils/typography"; const checkboxSizeMap: Record = { lg: 20, @@ -583,8 +585,8 @@ const labelColorParams = { }, }; -export const StyledMainLabel = styled(Label, { - shouldForwardProp: prop => !prop.startsWith("$"), +export const StyledMainLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, })< LabelOwnProps & { $disabled: boolean; @@ -599,8 +601,8 @@ export const StyledMainLabel = styled(Label, { }; }); -export const StyledSubLabel = styled(Label, { - shouldForwardProp: prop => !prop.startsWith("$"), +export const StyledSubLabel = styled("span", { + shouldForwardProp: shouldForwardTypographyProp, })< LabelOwnProps & { $disabled: boolean; diff --git a/packages/jds/src/components/Dialog/Dialog.styles.ts b/packages/jds/src/components/Dialog/Dialog.styles.ts index ce8714a7c..0865eb092 100644 --- a/packages/jds/src/components/Dialog/Dialog.styles.ts +++ b/packages/jds/src/components/Dialog/Dialog.styles.ts @@ -3,7 +3,7 @@ import styled from "@emotion/styled"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { pxToRem, shadow } from "utils"; -import { Title } from "../Title"; +import { shouldForwardTypographyProp } from "@/utils/typography"; const dialogOverlayFadeIn = keyframes` from { opacity: 0 } @@ -100,7 +100,7 @@ export const DialogContentDiv = styled.div(({ theme }) => ({ gap: theme.scheme.semantic.spacing[16], })); -export const DialogTitle = styled(Title)({ +export const DialogTitle = styled("h2", { shouldForwardProp: shouldForwardTypographyProp })({ alignSelf: "stretch", }); diff --git a/packages/jds/src/components/Dialog/Dialog.tsx b/packages/jds/src/components/Dialog/Dialog.tsx index 0fe6ff4bd..70e780db1 100644 --- a/packages/jds/src/components/Dialog/Dialog.tsx +++ b/packages/jds/src/components/Dialog/Dialog.tsx @@ -15,6 +15,8 @@ import type { DialogProps } from "./Dialog.types"; import { BlockButton } from "../Button/BlockButton"; import { Checkbox } from "../Checkbox"; +import { getTitleClassName } from "@/utils/typography"; + export const Dialog = forwardRef( ( { @@ -76,9 +78,7 @@ export const Dialog = forwardRef( - - {header} - + {header} {body} {checkboxAction && } diff --git a/packages/jds/src/components/EmptyState/EmptyState.tsx b/packages/jds/src/components/EmptyState/EmptyState.tsx index d1f15cb58..878c1a100 100644 --- a/packages/jds/src/components/EmptyState/EmptyState.tsx +++ b/packages/jds/src/components/EmptyState/EmptyState.tsx @@ -11,6 +11,8 @@ import type { EmptyStateProps } from "./emptyState.types"; import { BlockButton } from "../Button/BlockButton"; import { Icon } from "../Icon"; +import { getLabelClassName } from "@/utils/typography"; + export const EmptyState = forwardRef( ( { @@ -50,7 +52,7 @@ export const EmptyState = forwardRef( {icon &&