diff --git a/.changeset/README.md b/.changeset/README.md new file mode 100644 index 000000000..e5b6d8d6a --- /dev/null +++ b/.changeset/README.md @@ -0,0 +1,8 @@ +# Changesets + +Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works +with multi-package repos, or single-package repos to help you version and publish your code. You can +find the full documentation for it [in our repository](https://github.com/changesets/changesets) + +We have a quick list of common questions to get you started engaging with this project in +[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) diff --git a/.changeset/config.json b/.changeset/config.json new file mode 100644 index 000000000..3902777f7 --- /dev/null +++ b/.changeset/config.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@3.1.2/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "restricted", + "baseBranch": "dev", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/.github/workflows/jds.yml b/.github/workflows/jds.yml new file mode 100644 index 000000000..387c84510 --- /dev/null +++ b/.github/workflows/jds.yml @@ -0,0 +1,47 @@ +name: Release JDS Package + +on: + push: + branches: + - dev + - 'refactor/jds' + paths: + - 'packages/jds/**' + - '.changeset/**' + +concurrency: ${{ github.workflow }}-${{ github.ref }} + +jobs: + release: + name: Release JDS + runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write + + steps: + - name: Checkout Repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + + - name: Install Dependencies + run: npm ci + + - name: Build JDS Only + run: npm run build --workspace=@jects/jds + + - name: Publish to NPM + id: changesets + uses: changesets/action@v1 + with: + publish: npx changeset publish + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/apps/web/CHANGELOG.md b/apps/web/CHANGELOG.md new file mode 100644 index 000000000..f423b048d --- /dev/null +++ b/apps/web/CHANGELOG.md @@ -0,0 +1,15 @@ +# ject-official-website-client + +## 0.0.1 + +### Patch Changes + +- Updated dependencies [050b727] + - @jects/jds@0.0.1 + +## 0.0.1-next.0 + +### Patch Changes + +- Updated dependencies [050b727] + - @ject/jds@1.0.0-next.0 diff --git a/apps/web/package.json b/apps/web/package.json index 391823517..cd9253667 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -1,7 +1,7 @@ { "name": "ject-official-website-client", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "scripts": { "dev": "vite", @@ -20,7 +20,7 @@ "@emotion/react": "^11", "@emotion/styled": "^11", "@hookform/resolvers": "^4.1.3", - "@ject/jds": "*", + "@jects/jds": "0.0.1", "@sentry/react": "^9.12.0", "@sentry/vite-plugin": "^3.3.1", "@tailwindcss/vite": "^4.0.0", @@ -35,7 +35,7 @@ "react": "^18.3.1", "react-device-detect": "^2.2.3", "react-dom": "^18.3.1", - "react-error-boundary": "^6.0.0", + "react-error-boundary": "6.0.0", "react-hook-form": "^7.54.2", "react-router-dom": "^7.1.5", "tailwindcss": "^4.0.0", diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index cecca03f4..280d947b4 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -1,7 +1,7 @@ import "./instrument"; -import { ToastProvider } from "@ject/jds"; -import { JDSThemeProvider } from "@ject/jds/theme"; +import { ToastProvider } from "@jects/jds"; +import { JDSThemeProvider } from "@jects/jds/theme"; import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { Suspense, useState } from "react"; diff --git a/apps/web/src/apis/apply/schemas.ts b/apps/web/src/apis/apply/schemas.ts index 2a4d7c4c7..37dcb3d94 100644 --- a/apps/web/src/apis/apply/schemas.ts +++ b/apps/web/src/apis/apply/schemas.ts @@ -85,6 +85,7 @@ export const questionSchema = z.object({ inputType: questionInputTypeSchema, isRequired: z.boolean(), title: z.string(), + subtitle: z.string().nullable(), label: z.string(), selectOptions: z.array(z.string()).nullable(), inputHint: z.string(), diff --git a/apps/web/src/components/common/footer/Footer.tsx b/apps/web/src/components/common/footer/Footer.tsx index 61c772cfb..655f1fac5 100644 --- a/apps/web/src/components/common/footer/Footer.tsx +++ b/apps/web/src/components/common/footer/Footer.tsx @@ -1,4 +1,4 @@ -import { Footer as FooterJds, Logo } from "@ject/jds"; +import { Footer as FooterJds, Logo } from "@jects/jds"; function Footer() { return ( diff --git a/apps/web/src/components/gnb/GlobalNavigationBar.tsx b/apps/web/src/components/gnb/GlobalNavigationBar.tsx index f0d0775b2..43a23815a 100644 --- a/apps/web/src/components/gnb/GlobalNavigationBar.tsx +++ b/apps/web/src/components/gnb/GlobalNavigationBar.tsx @@ -5,8 +5,8 @@ import { Logo, SegmentedControl, useGlobalNavigationVariant, -} from "@ject/jds"; -import { useMediaQueryFlags } from "@ject/jds/hooks"; +} from "@jects/jds"; +import { useMediaQueryFlags } from "@jects/jds/hooks"; import type { MouseEvent } from "react"; import { useState } from "react"; import { useNavigate, useLocation } from "react-router-dom"; diff --git a/apps/web/src/components/gnb/Menus.tsx b/apps/web/src/components/gnb/Menus.tsx index 4dd08a97e..51ee8743c 100644 --- a/apps/web/src/components/gnb/Menus.tsx +++ b/apps/web/src/components/gnb/Menus.tsx @@ -1,4 +1,4 @@ -import { MegaMenu, MenuItem } from "@ject/jds"; +import { MegaMenu, MenuItem } from "@jects/jds"; import type { MouseEvent } from "react"; import { useNavigate } from "react-router-dom"; diff --git a/apps/web/src/components/gnb/Sidebar.tsx b/apps/web/src/components/gnb/Sidebar.tsx index aa4d19572..4182256c1 100644 --- a/apps/web/src/components/gnb/Sidebar.tsx +++ b/apps/web/src/components/gnb/Sidebar.tsx @@ -1,4 +1,4 @@ -import { Divider, IconButton, Label, MenuItem } from "@ject/jds"; +import { Divider, IconButton, Label, MenuItem } from "@jects/jds"; import type { Dispatch, MouseEvent, SetStateAction } from "react"; import { useEffect } from "react"; import { createPortal } from "react-dom"; diff --git a/apps/web/src/components/layout/ApplyLayout.tsx b/apps/web/src/components/layout/ApplyLayout.tsx index 70ac2d1c2..f3723a380 100644 --- a/apps/web/src/components/layout/ApplyLayout.tsx +++ b/apps/web/src/components/layout/ApplyLayout.tsx @@ -1,4 +1,4 @@ -import { BlockButton, LabelButton } from "@ject/jds"; +import { BlockButton, LabelButton } from "@jects/jds"; import type { FallbackProps } from "react-error-boundary"; import { Outlet, useNavigate } from "react-router-dom"; diff --git a/apps/web/src/components/main/sections/CycleSection.tsx b/apps/web/src/components/main/sections/CycleSection.tsx index 7435e317e..f93594970 100644 --- a/apps/web/src/components/main/sections/CycleSection.tsx +++ b/apps/web/src/components/main/sections/CycleSection.tsx @@ -1,4 +1,4 @@ -import { Banner } from "@ject/jds"; +import { Banner } from "@jects/jds"; import cycleVisionBannerImage from "@/assets/images/cycle-vision-banner.png"; @@ -9,7 +9,9 @@ const CycleSection = () => { src={cycleVisionBannerImage} isReadonly title={"IT 생태계의\n선순환을 목표로 하는 젝트"} - subtitle={"사적인 이윤을 추구하지 않고,\n발생한 수익은 운영과 구성원을 위한 인프라에 재투자합니다."} + subtitle={ + "사적인 이윤을 추구하지 않고,\n발생한 수익은 운영과 구성원을 위한 인프라에 재투자합니다." + } /> ); diff --git a/apps/web/src/components/main/sections/HeroSection.tsx b/apps/web/src/components/main/sections/HeroSection.tsx index 8063297c9..df9093d07 100644 --- a/apps/web/src/components/main/sections/HeroSection.tsx +++ b/apps/web/src/components/main/sections/HeroSection.tsx @@ -1,4 +1,4 @@ -import { Hero, Icon, Label } from "@ject/jds"; +import { Hero, Icon, Label } from "@jects/jds"; import { useEffect, useState } from "react"; import heroBackground from "@/assets/images/hero-background.png"; @@ -23,7 +23,7 @@ const RotatingText = () => { useEffect(() => { const interval = setInterval(() => { - setCurrentIndex((prev) => prev + 1); + setCurrentIndex(prev => prev + 1); }, ANIMATION_CYCLE_MS); return () => clearInterval(interval); }, []); @@ -49,17 +49,17 @@ const RotatingText = () => { }, [currentIndex, isTransitioning]); return ( - + {extendedItems.map((item, index) => ( - - + + {item.text} ))} @@ -89,19 +89,19 @@ const HeroSection = () => {
- + 젝트에서 경험해보세요. diff --git a/apps/web/src/components/main/sections/IntroSection.tsx b/apps/web/src/components/main/sections/IntroSection.tsx index b78632081..f0af78cd1 100644 --- a/apps/web/src/components/main/sections/IntroSection.tsx +++ b/apps/web/src/components/main/sections/IntroSection.tsx @@ -1,16 +1,30 @@ -import { Callout, ContentBadge, EmptyState, Hero, Icon, Image, Label, LabelButton, Title as JdsTitle } from "@ject/jds"; +import { + Callout, + ContentBadge, + EmptyState, + Hero, + Icon, + Image, + Label, + LabelButton, + Title as JdsTitle, +} from "@jects/jds"; import { useNavigate } from "react-router-dom"; import introTeamMeetingImage from "@/assets/images/intro-team-meeting.png"; import { positionData, programData, statData } from "@/constants/mainPageData"; -const wrapperClassName = "gap-(--semantic-spacing-48) flex w-full max-w-[922px] flex-col items-start"; +const wrapperClassName = + "gap-(--semantic-spacing-48) flex w-full max-w-[922px] flex-col items-start"; const positionCardStyles = { - green: "bg-[var(--semantic-theme-green-alpha-subtlest)] border-[var(--semantic-theme-green-alpha-subtler)]", + green: + "bg-[var(--semantic-theme-green-alpha-subtlest)] border-[var(--semantic-theme-green-alpha-subtler)]", sky: "bg-[var(--semantic-theme-sky-alpha-subtlest)] border-[var(--semantic-theme-sky-alpha-subtler)]", - orange: "bg-[var(--semantic-theme-orange-alpha-subtlest)] border-[var(--semantic-theme-orange-alpha-subtler)]", - purple: "bg-[var(--semantic-theme-purple-alpha-subtlest)] border-[var(--semantic-theme-purple-alpha-subtler)]", + orange: + "bg-[var(--semantic-theme-orange-alpha-subtlest)] border-[var(--semantic-theme-orange-alpha-subtler)]", + purple: + "bg-[var(--semantic-theme-purple-alpha-subtlest)] border-[var(--semantic-theme-purple-alpha-subtler)]", } as const; const IntroSection = () => { @@ -33,7 +47,9 @@ const IntroSection = () => {
- IT 동아리 젝트 + + IT 동아리 젝트 +

젝트는 개발, 기획(매니지먼트), 디자인 관련 포지션의 팀원들이 한 팀이 되어 실제 @@ -47,7 +63,7 @@ const IntroSection = () => {

-
+
{statData.map(({ id, title, description, isFullWidth }) => ( { variant='hint' size='lg' title={title} - className={isFullWidth ? 'tablet:col-span-2 desktop:col-span-1' : undefined} + className={isFullWidth ? "tablet:col-span-2 desktop:col-span-1" : undefined} > {description} ))}
@@ -79,13 +95,15 @@ const IntroSection = () => { {/* 다양한 포지션들이 젝트와 함께합니다 */}
- 다양한 포지션들이 젝트와 함께합니다 + + 다양한 포지션들이 젝트와 함께합니다 + -
+
{positionData.map(({ id, title, icon, description, tags, themeColor }) => (
@@ -97,7 +115,7 @@ const IntroSection = () => { {description}

- {tags.map((tag) => ( + {tags.map(tag => ( { {/* 프로그램들 */}
- 구성원들의 성장을 돕는 프로그램들을 운영합니다 + + 구성원들의 성장을 돕는 프로그램들을 운영합니다 + -
+
{programData.map(({ id, title, description }) => ( { {description} ))} -
+
{ return (
-
+
@@ -24,7 +24,12 @@ const JoinSection = () => { {"젝트의 구성원으로\n함께해주세요"}
-
@@ -40,7 +45,15 @@ const JoinSection = () => {
- 젝트 구성원들 + 젝트 구성원들
diff --git a/apps/web/src/components/vision/sections/GoalSection.tsx b/apps/web/src/components/vision/sections/GoalSection.tsx index 999ce0166..744ba8b30 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 "@ject/jds"; +import { Title } from "@jects/jds"; const GoalSection = () => { return ( @@ -12,12 +12,13 @@ const GoalSection = () => { 우리는 IT 생태계의 선순환을 목표로 활동하고 있습니다. -
+

젝트는 협업 경험과 피드백을 통한 학습, 인적 네트워크를 구성원들에게 제공합니다.

- 이를 통해 성장한 구성원은 곧 IT 생태계의 인적 자원으로서 전문성을 발휘하며 활동을 이어나가고, + 이를 통해 성장한 구성원은 곧 IT 생태계의 인적 자원으로서 전문성을 발휘하며 활동을 + 이어나가고,

구성원들이 자연스레 젝트가 추구하는 가치를 전파하고, 다른 이들과 경험을 나누는 선순환이 diff --git a/apps/web/src/components/vision/sections/GrowthStorySection.tsx b/apps/web/src/components/vision/sections/GrowthStorySection.tsx index 18a3a5bdd..a1c28c34e 100644 --- a/apps/web/src/components/vision/sections/GrowthStorySection.tsx +++ b/apps/web/src/components/vision/sections/GrowthStorySection.tsx @@ -1,8 +1,11 @@ -import { Title } from "@ject/jds"; +import { Title } from "@jects/jds"; const GrowthStorySection = () => { return ( -

+
@@ -13,19 +16,14 @@ const GrowthStorySection = () => { 젝트는 약 1년 6개월만에 11배 성장을 이뤄냈어요. -
+
+

우리는 구성원 9명의 소규모 그룹에서 시작해 누적 구성원 100명 이상을 달성했습니다.

- 우리는 구성원 9명의 소규모 그룹에서 시작해 누적 구성원 100명 이상을 달성했습니다. -

-

- 더 많은 사람들과 경험을 나누고, 함께 몰입하고, 성장하기 위해 이 성장세를 유지하고자 해요. -

-

- 우리는 100개의 팀 프로젝트 완성을 다음 목표로 설정했으며, -

-

- 정기 밋업과 해커톤을 포함해 지속적인 네트워킹을 이어갈 계획입니다. + 더 많은 사람들과 경험을 나누고, 함께 몰입하고, 성장하기 위해 이 성장세를 유지하고자 + 해요.

+

우리는 100개의 팀 프로젝트 완성을 다음 목표로 설정했으며,

+

정기 밋업과 해커톤을 포함해 지속적인 네트워킹을 이어갈 계획입니다.

diff --git a/apps/web/src/components/vision/sections/MemberSection.tsx b/apps/web/src/components/vision/sections/MemberSection.tsx index b24dbdd63..fc826bddd 100644 --- a/apps/web/src/components/vision/sections/MemberSection.tsx +++ b/apps/web/src/components/vision/sections/MemberSection.tsx @@ -1,5 +1,5 @@ -import { ContentBadge, Icon, Image, Tab, Title } from "@ject/jds"; -import type { IconName, ThemeVariant } from "@ject/jds"; +import { ContentBadge, Icon, Image, Tab, Title } from "@jects/jds"; +import type { IconName, ThemeVariant } from "@jects/jds"; import { useState } from "react"; import { @@ -275,15 +275,13 @@ const memberTabs: MemberTabItem[] = [ value: "makers1", label: "메이커스 1팀", gridClassName: "tablet:grid-cols-2 grid-cols-1", - renderCards: () => - makers1Data.map(member => <MakersCard key={member.id} member={member} />), + renderCards: () => makers1Data.map(member => <MakersCard key={member.id} member={member} />), }, { value: "makers2", label: "메이커스 2팀", gridClassName: "tablet:grid-cols-2 grid-cols-1", - renderCards: () => - makers2Data.map(member => <MakersCard key={member.id} member={member} />), + renderCards: () => makers2Data.map(member => <MakersCard key={member.id} member={member} />), }, ]; diff --git a/apps/web/src/components/vision/sections/ProjectStartSection.tsx b/apps/web/src/components/vision/sections/ProjectStartSection.tsx index bbb5e33de..109204046 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 "@ject/jds"; +import { Title } from "@jects/jds"; const ProjectStartSection = () => { return ( @@ -12,17 +12,17 @@ const ProjectStartSection = () => { 젝트는 개발자들의 소규모 사이드 프로젝트 모임으로 시작했습니다. -
+

- 프로젝트를 진행하면서, 개발자뿐만 아니라 여러 다양한 포지션들과의 협업을 경험하는 것이 더 - 입체적으로 성장할 수 있다고 판단했어요. + 프로젝트를 진행하면서, 개발자뿐만 아니라 여러 다양한 포지션들과의 협업을 경험하는 것이 + 더 입체적으로 성장할 수 있다고 판단했어요.

뒤이어 IT 관련 다양한 포지션들을 구성원으로 영입하며 동아리 규모를 확대하고 있습니다.

- 지금에 이르러 젝트는 구성원들이 팀 프로젝트 활동과 학습을 통해 함께 성장하는 커뮤니티 허브가 - 되었습니다. + 지금에 이르러 젝트는 구성원들이 팀 프로젝트 활동과 학습을 통해 함께 성장하는 커뮤니티 + 허브가 되었습니다.

diff --git a/apps/web/src/components/vision/sections/VisionHeroSection.tsx b/apps/web/src/components/vision/sections/VisionHeroSection.tsx index 7e5810072..5d26e7037 100644 --- a/apps/web/src/components/vision/sections/VisionHeroSection.tsx +++ b/apps/web/src/components/vision/sections/VisionHeroSection.tsx @@ -1,10 +1,10 @@ -import { Hero, Image, Title } from "@ject/jds"; +import { Hero, Image, Title } from "@jects/jds"; import visionBannerImage from "@/assets/images/vision-banner.png"; const VisionHeroSection = () => { return ( -
+
IT 생태계의 선순환을 목표로 활동하는 diff --git a/apps/web/src/constants/mainPageData.tsx b/apps/web/src/constants/mainPageData.tsx index 4477d8fa8..f5b435dab 100644 --- a/apps/web/src/constants/mainPageData.tsx +++ b/apps/web/src/constants/mainPageData.tsx @@ -1,4 +1,4 @@ -import type { IconName } from "@ject/jds"; +import type { IconName } from "@jects/jds"; interface StatItem { id: number; @@ -10,12 +10,12 @@ interface StatItem { export const statData: StatItem[] = [ { id: 1, - title: "102", + title: "163", description: "누적 동아리원", }, { id: 2, - title: "12", + title: "18", description: "진행한 프로젝트", }, { @@ -42,15 +42,7 @@ export const positionData: PositionItem[] = [ icon: "frontend", description: "사용자와 직접 상호작용하는 기능과 화면을 개발합니다. 서비스에 적합한 기술을 활용하고 성능을 최적화해서 사용 경험을 더욱 긍정적으로 만들어요.", - tags: [ - "JavaScript", - "TypeScript", - "HTML", - "CSS", - "React.js", - "상태 관리", - "성능 최적화", - ], + tags: ["JavaScript", "TypeScript", "HTML", "CSS", "React.js", "상태 관리", "성능 최적화"], themeColor: "green", }, { @@ -59,16 +51,7 @@ export const positionData: PositionItem[] = [ icon: "backend", description: "서비스를 더욱 안정적으로 사용할 수 있도록 서버 로직을 개발합니다. 비즈니스 요구사항을 분석하고, API 설계부터 데이터베이스 연동, 보안과 배포까지 전 과정을 책임집니다.", - tags: [ - "Java", - "Spring Boot", - "Restful API", - "DB", - "CI/CD", - "API 설계", - "DB 설계", - "서버 운영", - ], + tags: ["Java", "Spring Boot", "Restful API", "DB", "CI/CD", "API 설계", "DB 설계", "서버 운영"], themeColor: "sky", }, { diff --git a/apps/web/src/emotion.d.ts b/apps/web/src/emotion.d.ts index ae71b8664..f3bcda2fd 100644 --- a/apps/web/src/emotion.d.ts +++ b/apps/web/src/emotion.d.ts @@ -1,5 +1,5 @@ import "@emotion/react"; -import type { theme } from "@ject/jds/tokens"; +import type { theme } from "@jects/jds/tokens"; type DesignToken = typeof theme; diff --git a/apps/web/src/features/apply/ApplyFunnel.tsx b/apps/web/src/features/apply/ApplyFunnel.tsx index b035eec71..6c85c68ce 100644 --- a/apps/web/src/features/apply/ApplyFunnel.tsx +++ b/apps/web/src/features/apply/ApplyFunnel.tsx @@ -1,4 +1,4 @@ -import { Dialog } from "@ject/jds"; +import { Dialog } from "@jects/jds"; import { useFunnel } from "@use-funnel/react-router-dom"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; @@ -15,7 +15,12 @@ import type { JobFamily } from "@/apis/apply"; import { PATH } from "@/constants/path"; import { useNavigationBlock } from "@/hooks/useNavigationBlock"; import type { ApplyFunnelSteps } from "@/types/funnel"; -import { trackApplyStepView, trackApplyStepComplete, trackApplyComplete, APPLY_STEPS } from "@/utils/analytics"; +import { + trackApplyStepView, + trackApplyStepComplete, + trackApplyComplete, + APPLY_STEPS, +} from "@/utils/analytics"; interface ApplyFunnelProps { jobFamily: JobFamily; @@ -23,11 +28,7 @@ interface ApplyFunnelProps { export function ApplyFunnel({ jobFamily }: ApplyFunnelProps) { const navigate = useNavigate(); - const { - isDialogOpen, - handleConfirm, - handleCancel, - } = useNavigationBlock(); + const { isDialogOpen, handleConfirm, handleCancel } = useNavigationBlock(); const funnel = useFunnel<ApplyFunnelSteps>({ id: "apply-funnel", @@ -49,85 +50,85 @@ export function ApplyFunnel({ jobFamily }: ApplyFunnelProps) { return ( <> - <funnel.Render - 이메일인증={funnel.Render.with({ - events: { - onVerified: (payload: { email: string; authCode: string }, { context, history }) => { - // 신규 회원: 인증 성공 → PIN 설정으로 - trackApplyStepComplete(APPLY_STEPS.EMAIL_VERIFICATION, context.jobFamily); - void history.push("PIN설정", { - ...context, - ...payload, - }); - }, - goToContinueWriting: () => { - // 기존 회원: 이어서 작성하기로 이동 - void navigate(`${PATH.applyContinue}/${jobFamily}`); + <funnel.Render + 이메일인증={funnel.Render.with({ + events: { + onVerified: (payload: { email: string; authCode: string }, { context, history }) => { + // 신규 회원: 인증 성공 → PIN 설정으로 + trackApplyStepComplete(APPLY_STEPS.EMAIL_VERIFICATION, context.jobFamily); + void history.push("PIN설정", { + ...context, + ...payload, + }); + }, + goToContinueWriting: () => { + // 기존 회원: 이어서 작성하기로 이동 + void navigate(`${PATH.applyContinue}/${jobFamily}`); + }, + goBack: () => { + handleBack(); + }, }, - goBack: () => { - handleBack(); + render({ context, dispatch }) { + return <EmailVerificationStep context={context} dispatch={dispatch} />; }, - }, - render({ context, dispatch }) { - return <EmailVerificationStep context={context} dispatch={dispatch} />; - }, - })} - PIN설정={({ context, history }) => ( - <PinSetupStep - context={context} - onNext={() => { - // 회원가입 성공 → 지원자 정보 입력으로 - trackApplyStepComplete(APPLY_STEPS.PIN_SETUP, context.jobFamily); - void history.push("지원자정보", { - ...context, - }); - }} - onBack={handleBack} - /> - )} - 지원자정보={({ context, history }) => ( - <ApplicantInfoStep - context={context} - onNext={() => { - // 프로필 저장 성공 → 지원서 작성으로 - trackApplyStepComplete(APPLY_STEPS.APPLICANT_INFO, context.jobFamily); - void history.push("지원서작성", { - ...context, - }); - }} - onBack={handleBack} - /> - )} - 지원서작성={({ context, history }) => ( - <RegistrationStep - context={context} - onNext={() => { - // 제출 성공 → 완료 - trackApplyStepComplete(APPLY_STEPS.REGISTRATION, context.jobFamily); - trackApplyComplete(context.jobFamily); - void history.push("완료", { - ...context, - }); - }} - onBack={handleBack} - /> - )} - 완료={({ context }) => <CompleteStep jobFamily={context.jobFamily} />} - /> - <Dialog - open={isDialogOpen} - onOpenChange={open => !open && handleCancel()} - header='작성된 내용이 모두 사라집니다' - body='작성을 그만두고 페이지에서 나가시겠어요?' - primaryAction={{ - children: "페이지 나가기", - onClick: handleConfirm, - }} - secondaryAction={{ - children: "취소", - onClick: handleCancel, - }} - /> - </> + })} + PIN설정={({ context, history }) => ( + <PinSetupStep + context={context} + onNext={() => { + // 회원가입 성공 → 지원자 정보 입력으로 + trackApplyStepComplete(APPLY_STEPS.PIN_SETUP, context.jobFamily); + void history.push("지원자정보", { + ...context, + }); + }} + onBack={handleBack} + /> + )} + 지원자정보={({ context, history }) => ( + <ApplicantInfoStep + context={context} + onNext={() => { + // 프로필 저장 성공 → 지원서 작성으로 + trackApplyStepComplete(APPLY_STEPS.APPLICANT_INFO, context.jobFamily); + void history.push("지원서작성", { + ...context, + }); + }} + onBack={handleBack} + /> + )} + 지원서작성={({ context, history }) => ( + <RegistrationStep + context={context} + onNext={() => { + // 제출 성공 → 완료 + trackApplyStepComplete(APPLY_STEPS.REGISTRATION, context.jobFamily); + trackApplyComplete(context.jobFamily); + void history.push("완료", { + ...context, + }); + }} + onBack={handleBack} + /> + )} + 완료={({ context }) => <CompleteStep jobFamily={context.jobFamily} />} + /> + <Dialog + open={isDialogOpen} + onOpenChange={open => !open && handleCancel()} + header='작성된 내용이 모두 사라집니다' + body='작성을 그만두고 페이지에서 나가시겠어요?' + primaryAction={{ + children: "페이지 나가기", + onClick: handleConfirm, + }} + secondaryAction={{ + children: "취소", + onClick: handleCancel, + }} + /> + </> ); } diff --git a/apps/web/src/features/apply/ContinueWritingFunnel.tsx b/apps/web/src/features/apply/ContinueWritingFunnel.tsx index dc3c5e239..373c62d20 100644 --- a/apps/web/src/features/apply/ContinueWritingFunnel.tsx +++ b/apps/web/src/features/apply/ContinueWritingFunnel.tsx @@ -1,4 +1,4 @@ -import { Dialog } from "@ject/jds"; +import { Dialog } from "@jects/jds"; import { useFunnel } from "@use-funnel/react-router-dom"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; @@ -13,7 +13,12 @@ import { import type { JobFamily } from "@/apis/apply"; import { useNavigationBlock } from "@/hooks/useNavigationBlock"; import type { ContinueWritingFunnelSteps } from "@/types/funnel"; -import { trackApplyStepView, trackApplyStepComplete, trackApplyComplete, APPLY_STEPS } from "@/utils/analytics"; +import { + trackApplyStepView, + trackApplyStepComplete, + trackApplyComplete, + APPLY_STEPS, +} from "@/utils/analytics"; interface ContinueWritingFunnelProps { jobFamily: JobFamily; @@ -21,11 +26,7 @@ interface ContinueWritingFunnelProps { export function ContinueWritingFunnel({ jobFamily }: ContinueWritingFunnelProps) { const navigate = useNavigate(); - const { - isDialogOpen, - handleConfirm, - handleCancel, - } = useNavigationBlock(); + const { isDialogOpen, handleConfirm, handleCancel } = useNavigationBlock(); const funnel = useFunnel<ContinueWritingFunnelSteps>({ id: "continue-writing-funnel", @@ -46,72 +47,72 @@ export function ContinueWritingFunnel({ jobFamily }: ContinueWritingFunnelProps) return ( <> - <funnel.Render - 본인확인={funnel.Render.with({ - events: { - goToProfile: (email: string, { context, history }) => { - void history.push("지원자정보", { - ...context, - email, - tempSavedStep: "PROFILE" as const, - }); - }, - goToApply: (email: string, { context, history }) => { - void history.push("지원서작성", { - ...context, - email, - tempSavedStep: "APPLY" as const, - }); + <funnel.Render + 본인확인={funnel.Render.with({ + events: { + goToProfile: (email: string, { context, history }) => { + void history.push("지원자정보", { + ...context, + email, + tempSavedStep: "PROFILE" as const, + }); + }, + goToApply: (email: string, { context, history }) => { + void history.push("지원서작성", { + ...context, + email, + tempSavedStep: "APPLY" as const, + }); + }, + goBack: () => { + void navigate(-1); + }, }, - goBack: () => { - void navigate(-1); + render({ context, dispatch }) { + return <IdentityVerificationStep context={context} dispatch={dispatch} />; }, - }, - render({ context, dispatch }) { - return <IdentityVerificationStep context={context} dispatch={dispatch} />; - }, - })} - 지원자정보={({ context, history }) => ( - <ApplicantInfoStep - context={context} - onNext={() => { - trackApplyStepComplete(APPLY_STEPS.APPLICANT_INFO, context.jobFamily); - void history.push("지원서작성", { - jobFamily: context.jobFamily, - email: context.email, - tempSavedStep: "APPLY", - }); - }} - onBack={handleBackToFirst} - /> - )} - 지원서작성={({ context, history }) => ( - <RegistrationStep - context={context} - onNext={() => { - trackApplyStepComplete(APPLY_STEPS.REGISTRATION, context.jobFamily); - trackApplyComplete(context.jobFamily); - void history.push("완료", { ...context }); - }} - onBack={handleBackToFirst} - /> - )} - 완료={({ context }) => <CompleteStep jobFamily={context.jobFamily} />} - /> - <Dialog - open={isDialogOpen} - onOpenChange={open => !open && handleCancel()} - header='작성된 내용이 모두 사라집니다' - body='작성을 그만두고 페이지에서 나가시겠어요?' - primaryAction={{ - children: "페이지 나가기", - onClick: handleConfirm, - }} - secondaryAction={{ - children: "취소", - onClick: handleCancel, - }} - /> + })} + 지원자정보={({ context, history }) => ( + <ApplicantInfoStep + context={context} + onNext={() => { + trackApplyStepComplete(APPLY_STEPS.APPLICANT_INFO, context.jobFamily); + void history.push("지원서작성", { + jobFamily: context.jobFamily, + email: context.email, + tempSavedStep: "APPLY", + }); + }} + onBack={handleBackToFirst} + /> + )} + 지원서작성={({ context, history }) => ( + <RegistrationStep + context={context} + onNext={() => { + trackApplyStepComplete(APPLY_STEPS.REGISTRATION, context.jobFamily); + trackApplyComplete(context.jobFamily); + void history.push("완료", { ...context }); + }} + onBack={handleBackToFirst} + /> + )} + 완료={({ context }) => <CompleteStep jobFamily={context.jobFamily} />} + /> + <Dialog + open={isDialogOpen} + onOpenChange={open => !open && handleCancel()} + header='작성된 내용이 모두 사라집니다' + body='작성을 그만두고 페이지에서 나가시겠어요?' + primaryAction={{ + children: "페이지 나가기", + onClick: handleConfirm, + }} + secondaryAction={{ + children: "취소", + onClick: handleCancel, + }} + /> </> ); } diff --git a/apps/web/src/features/apply/steps/CompleteStep.tsx b/apps/web/src/features/apply/steps/CompleteStep.tsx index 67bbaff0b..95ea63bc3 100644 --- a/apps/web/src/features/apply/steps/CompleteStep.tsx +++ b/apps/web/src/features/apply/steps/CompleteStep.tsx @@ -1,4 +1,4 @@ -import { BlockButton, Image, LocalNavigation, Title } from "@ject/jds"; +import { BlockButton, Image, LocalNavigation, Title } from "@jects/jds"; import { useNavigate } from "react-router-dom"; import type { JobFamily } from "@/apis/apply"; diff --git a/apps/web/src/features/apply/steps/EmailVerificationStep.tsx b/apps/web/src/features/apply/steps/EmailVerificationStep.tsx index 96fa59b2d..4b31db970 100644 --- a/apps/web/src/features/apply/steps/EmailVerificationStep.tsx +++ b/apps/web/src/features/apply/steps/EmailVerificationStep.tsx @@ -1,4 +1,4 @@ -import { BlockButton, Dialog } from "@ject/jds"; +import { BlockButton, Dialog } from "@jects/jds"; import { useState } from "react"; import { APPLY_DIALOG } from "@/constants/applyMessages.tsx"; @@ -22,10 +22,7 @@ interface EmailVerificationStepProps { ) => void; } -export function EmailVerificationStep({ - context, - dispatch, -}: EmailVerificationStepProps) { +export function EmailVerificationStep({ context, dispatch }: EmailVerificationStepProps) { const [isExistingMemberDialogOpen, setIsExistingMemberDialogOpen] = useState(false); const handleBack = () => dispatch("goBack"); diff --git a/apps/web/src/features/apply/steps/IdentityVerificationStep.tsx b/apps/web/src/features/apply/steps/IdentityVerificationStep.tsx index fa0869a00..2509bc84e 100644 --- a/apps/web/src/features/apply/steps/IdentityVerificationStep.tsx +++ b/apps/web/src/features/apply/steps/IdentityVerificationStep.tsx @@ -1,4 +1,4 @@ -import { BlockButton, Dialog, LabelButton, TextField, toastController } from "@ject/jds"; +import { BlockButton, Dialog, LabelButton, TextField, toastController } from "@jects/jds"; import { useEffect, useState } from "react"; import { Controller } from "react-hook-form"; import { useLocation, useNavigate, useSearchParams } from "react-router-dom"; diff --git a/apps/web/src/features/apply/steps/PinSetupStep.tsx b/apps/web/src/features/apply/steps/PinSetupStep.tsx index b8b6d69a7..6a5e1dec4 100644 --- a/apps/web/src/features/apply/steps/PinSetupStep.tsx +++ b/apps/web/src/features/apply/steps/PinSetupStep.tsx @@ -1,4 +1,4 @@ -import { BlockButton } from "@ject/jds"; +import { BlockButton } from "@jects/jds"; import type { FormEventHandler } from "react"; import { useState } from "react"; import { Controller } from "react-hook-form"; diff --git a/apps/web/src/features/apply/steps/ApplicantInfoStep.tsx b/apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx similarity index 53% rename from apps/web/src/features/apply/steps/ApplicantInfoStep.tsx rename to apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx index 9d28c4128..c31a44451 100644 --- a/apps/web/src/features/apply/steps/ApplicantInfoStep.tsx +++ b/apps/web/src/features/apply/steps/applicationInfo/ApplicantInfoStep.tsx @@ -3,36 +3,30 @@ import { Checkbox, Icon, Label, - Select, - SelectField, TextField, toastController, Tooltip, -} from "@ject/jds"; -import { useState } from "react"; +} from "@jects/jds"; import { Controller } from "react-hook-form"; +import { SelectController } from "./components/SelectController"; + import { APPLY_MESSAGE } from "@/constants/applyMessages"; import { APPLY_TITLE } from "@/constants/applyPageData"; import { ApplyStepLayout } from "@/features/shared/components"; import { useMemberProfileMutation } from "@/hooks/apply"; import { useApplyApplicantInfoForm } from "@/hooks/useApplyApplicantInfoForm"; +import { phoneNumberCompleteSchema } from "@/schema/applySchema"; import type { ApplicantInfoContext, ProfileData } from "@/types/funnel"; import { CAREER_DETAILS_OPTIONS, EXPERIENCE_PERIOD_OPTIONS, INTERESTED_DOMAIN_OPTIONS, REGION_OPTIONS, - findLabelByValue, - type CareerDetails, - type ExperiencePeriod, type InterestedDomain, - type Region, } from "@/types/funnel"; import { deriveInputValidation } from "@/utils/validationHelpers"; -type SelectFieldName = "careerDetails" | "region" | "experiencePeriod"; - const MAX_SELECTABLE_DOMAINS = 3; interface ApplicantInfoStepProps { @@ -42,9 +36,7 @@ interface ApplicantInfoStepProps { } export function ApplicantInfoStep({ context, onNext, onBack }: ApplicantInfoStepProps) { - const { control, handleSubmit, formState } = useApplyApplicantInfoForm(); - - const [openSelect, setOpenSelect] = useState<SelectFieldName | null>(null); + const { control, handleSubmit, formState, setError } = useApplyApplicantInfoForm(); const { mutate: saveProfile } = useMemberProfileMutation({ onSuccess: () => { @@ -59,14 +51,6 @@ export function ApplicantInfoStep({ context, onNext, onBack }: ApplicantInfoStep saveProfile({ ...data, jobFamily: context.jobFamily }); }; - const toggleSelect = (name: SelectFieldName) => { - setOpenSelect(prev => (prev === name ? null : name)); - }; - - const closeSelect = () => { - setOpenSelect(null); - }; - return ( <ApplyStepLayout variant='apply' @@ -127,7 +111,21 @@ export function ApplicantInfoStep({ context, onNext, onBack }: ApplicantInfoStep placeholder='01012345678' helperText={fieldState.error?.message ?? ""} value={field.value ?? ""} - onChange={field.onChange} + onChange={e => { + const filtered = e.target.value.replace(/[^0-9-]/g, ""); + field.onChange(filtered); + }} + onBlur={() => { + field.onBlur(); + + const result = phoneNumberCompleteSchema.safeParse(field.value); + + if (!result.success) { + setError("phoneNumber", { + message: result.error.issues[0].message, + }); + } + }} /> )} /> @@ -135,39 +133,18 @@ export function ApplicantInfoStep({ context, onNext, onBack }: ApplicantInfoStep name='careerDetails' control={control} render={({ field }) => ( - <div className='relative flex flex-col'> - <SelectField - label={ - <> - 지원자 신분 - <span className='text-feedback-notifying-neutral-light dark:text-feedback-notifying-neutral-dark'> - * - </span> - </> - } - placeholder='현재 신분을 선택해주세요' - value={findLabelByValue(CAREER_DETAILS_OPTIONS, field.value)} - isOpen={openSelect === "careerDetails"} - onClick={() => toggleSelect("careerDetails")} - /> - {openSelect === "careerDetails" && ( - <div className='absolute top-[calc(100%+8px)] right-0 left-0 z-10'> - <Select - value={field.value} - onChange={value => { - field.onChange(value as CareerDetails); - closeSelect(); - }} - > - {CAREER_DETAILS_OPTIONS.map(option => ( - <Select.Label key={option.value} value={option.value}> - {option.label} - </Select.Label> - ))} - </Select> - </div> - )} - </div> + <SelectController + label={ + <> + 지원자 신분 + <span className='text-feedback-notifying-neutral-light'>*</span> + </> + } + placeholder='현재 신분을 선택해주세요' + value={field.value} + options={CAREER_DETAILS_OPTIONS} + onChange={value => field.onChange(value)} + /> )} /> @@ -175,39 +152,20 @@ export function ApplicantInfoStep({ context, onNext, onBack }: ApplicantInfoStep name='region' control={control} render={({ field }) => ( - <div className='relative flex flex-col'> - <SelectField - label={ - <> - 거주 지역 - <span className='text-feedback-notifying-neutral-light dark:text-feedback-notifying-neutral-dark'> - * - </span> - </> - } - placeholder='현재 거주하는 지역을 선택해주세요' - value={field.value ? findLabelByValue(REGION_OPTIONS, field.value) : ""} - isOpen={openSelect === "region"} - onClick={() => toggleSelect("region")} - /> - {openSelect === "region" && ( - <div className='absolute top-[calc(100%+8px)] right-0 left-0 z-10'> - <Select - value={field.value ?? ""} - onChange={value => { - field.onChange(value as Region); - closeSelect(); - }} - > - {REGION_OPTIONS.map(option => ( - <Select.Label key={option.value} value={option.value}> - {option.label} - </Select.Label> - ))} - </Select> - </div> - )} - </div> + <SelectController + label={ + <> + 거주 지역 + <span className='text-feedback-notifying-neutral-light dark:text-feedback-notifying-neutral-dark'> + * + </span> + </> + } + placeholder='현재 신분을 선택해주세요' + value={field.value} + options={REGION_OPTIONS} + onChange={value => field.onChange(value)} + /> )} /> @@ -215,46 +173,25 @@ export function ApplicantInfoStep({ context, onNext, onBack }: ApplicantInfoStep name='experiencePeriod' control={control} render={({ field }) => ( - <div className='relative flex flex-col'> - <SelectField - label={ - <div className='flex items-center gap-(--semantic-spacing-4) text-(--semantic-object-normal)'> - 직무 관련 경험 기간 - <Tooltip.Provider> - <Tooltip.Root> - <Tooltip.Trigger className='text-(--semantic-object-alternative)'> - <Icon name='information-fill' size='2xs' color='inherit' /> - </Tooltip.Trigger> - <Tooltip.Content>학습과 경력을 모두 포함한 기간</Tooltip.Content> - </Tooltip.Root> - </Tooltip.Provider> - </div> - } - placeholder='직무 관련 경험 기간을 선택해주세요' - value={ - field.value ? findLabelByValue(EXPERIENCE_PERIOD_OPTIONS, field.value) : "" - } - isOpen={openSelect === "experiencePeriod"} - onClick={() => toggleSelect("experiencePeriod")} - /> - {openSelect === "experiencePeriod" && ( - <div className='absolute top-[calc(100%+8px)] right-0 left-0 z-10'> - <Select - value={field.value ?? ""} - onChange={value => { - field.onChange(value as ExperiencePeriod); - closeSelect(); - }} - > - {EXPERIENCE_PERIOD_OPTIONS.map(option => ( - <Select.Label key={option.value} value={option.value}> - {option.label} - </Select.Label> - ))} - </Select> + <SelectController + label={ + <div className='flex items-center gap-(--semantic-spacing-4) text-(--semantic-object-normal)'> + 직무 관련 경험 기간 + <Tooltip.Provider> + <Tooltip.Root> + <Tooltip.Trigger className='text-(--semantic-object-alternative)'> + <Icon name='information-fill' size='2xs' color='inherit' /> + </Tooltip.Trigger> + <Tooltip.Content>학습과 경력을 모두 포함한 기간</Tooltip.Content> + </Tooltip.Root> + </Tooltip.Provider> </div> - )} - </div> + } + placeholder='현재 신분을 선택해주세요' + value={field.value} + options={EXPERIENCE_PERIOD_OPTIONS} + onChange={value => field.onChange(value)} + /> )} /> diff --git a/apps/web/src/features/apply/steps/applicationInfo/components/SelectController.tsx b/apps/web/src/features/apply/steps/applicationInfo/components/SelectController.tsx new file mode 100644 index 000000000..520d6291c --- /dev/null +++ b/apps/web/src/features/apply/steps/applicationInfo/components/SelectController.tsx @@ -0,0 +1,64 @@ +import { Select, SelectField } from "@jects/jds"; +import type { ReactNode } from "react"; +import { useRef } from "react"; + +import useCloseOutside from "@/hooks/useCloseOutside"; +import { findLabelByValue } from "@/types/profile"; + +type SelectOption = { + value: string; + label: string; +}; + +interface SelectControllerProps<TOptions extends readonly SelectOption[]> { + label: ReactNode; + placeholder: string; + options: TOptions; + value?: TOptions[number]["value"]; + onChange: (value: TOptions[number]["value"]) => void; +} +// TODO: Select 키보드 접근성 +export function SelectController<TOptions extends readonly SelectOption[]>({ + label, + placeholder, + options, + value, + onChange, +}: SelectControllerProps<TOptions>) { + const inputRef = useRef<HTMLDivElement>(null); + const dropdownRef = useRef<HTMLDivElement>(null); + + const { isOpen, onToggle, onClose } = useCloseOutside([inputRef, dropdownRef]); + + return ( + <div className='relative flex flex-col'> + <SelectField + ref={inputRef} + label={label} + placeholder={placeholder} + value={value ? findLabelByValue(options, value) : ""} + isOpen={isOpen} + onClick={onToggle} + /> + + {isOpen && ( + <div className='absolute top-[calc(100%+8px)] right-0 left-0 z-10'> + <Select + ref={dropdownRef} + value={value ?? ""} + onChange={v => { + onChange(v as TOptions[number]["value"]); + onClose(); + }} + > + {options.map(option => ( + <Select.Label key={option.value} value={option.value}> + {option.label} + </Select.Label> + ))} + </Select> + </div> + )} + </div> + ); +} diff --git a/apps/web/src/features/apply/steps/applicationInfo/index.ts b/apps/web/src/features/apply/steps/applicationInfo/index.ts new file mode 100644 index 000000000..593781546 --- /dev/null +++ b/apps/web/src/features/apply/steps/applicationInfo/index.ts @@ -0,0 +1 @@ +export { ApplicantInfoStep } from "./ApplicantInfoStep"; diff --git a/apps/web/src/features/apply/steps/index.ts b/apps/web/src/features/apply/steps/index.ts index 9ebed595d..c9a7ea2a8 100644 --- a/apps/web/src/features/apply/steps/index.ts +++ b/apps/web/src/features/apply/steps/index.ts @@ -1,8 +1,5 @@ // ApplyFunnel (신규 유저) -export { - EmailVerificationStep, - type EmailVerificationEvents, -} from "./EmailVerificationStep"; +export { EmailVerificationStep, type EmailVerificationEvents } from "./EmailVerificationStep"; export { PinSetupStep } from "./PinSetupStep"; // ContinueWritingFunnel (이어쓰기) @@ -12,6 +9,6 @@ export { } from "./IdentityVerificationStep"; // 공통 (두 Funnel에서 공유) -export { ApplicantInfoStep } from "./ApplicantInfoStep"; +export { ApplicantInfoStep } from "./applicationInfo"; export { RegistrationStep } from "./registration"; export { CompleteStep } from "./CompleteStep"; diff --git a/apps/web/src/features/apply/steps/registration/RegistrationStep.tsx b/apps/web/src/features/apply/steps/registration/RegistrationStep.tsx index 66aeaa14d..c8ffc7c68 100644 --- a/apps/web/src/features/apply/steps/registration/RegistrationStep.tsx +++ b/apps/web/src/features/apply/steps/registration/RegistrationStep.tsx @@ -1,4 +1,4 @@ -import { BlockButton, Dialog } from "@ject/jds"; +import { BlockButton, Dialog } from "@jects/jds"; import { type ReactNode, useCallback, useMemo, useState } from "react"; import { FileQuestionField, TextQuestionField, UrlQuestionField } from "./components"; diff --git a/apps/web/src/features/apply/steps/registration/components/FileQuestionField.tsx b/apps/web/src/features/apply/steps/registration/components/FileQuestionField.tsx index e25a5a551..19a79d0d0 100644 --- a/apps/web/src/features/apply/steps/registration/components/FileQuestionField.tsx +++ b/apps/web/src/features/apply/steps/registration/components/FileQuestionField.tsx @@ -1,4 +1,4 @@ -import { BlockButton, toastController, Uploader } from "@ject/jds"; +import { BlockButton, toastController, Uploader } from "@jects/jds"; import { useCallback, useMemo } from "react"; type UploadErrorType = "FILE_TOO_LARGE" | "INVALID_TYPE" | "TOTAL_SIZE_EXCEEDED"; @@ -119,7 +119,11 @@ export function FileQuestionField({ }; return ( - <QuestionFieldWrapper title={question.title} isRequired={question.isRequired}> + <QuestionFieldWrapper + title={question.title} + subtitle={question.subtitle} + isRequired={question.isRequired} + > <div className='flex flex-col items-start gap-(--semantic-spacing-16) self-stretch rounded-(--semantic-radius-6) border border-(--semantic-stroke-alpha-subtle) bg-(--semantic-surface-standard) p-(--semantic-spacing-12)'> {portfolios.length > 0 && ( <div className='flex flex-col gap-(--semantic-spacing-8) self-stretch'> diff --git a/apps/web/src/features/apply/steps/registration/components/PortfolioFileItem.tsx b/apps/web/src/features/apply/steps/registration/components/PortfolioFileItem.tsx index c4b711f81..f293c24be 100644 --- a/apps/web/src/features/apply/steps/registration/components/PortfolioFileItem.tsx +++ b/apps/web/src/features/apply/steps/registration/components/PortfolioFileItem.tsx @@ -1,5 +1,4 @@ -import { FileItem, IconButton } from "@ject/jds"; -import type { MouseEvent } from "react"; +import { FileItem, IconButton } from "@jects/jds"; import type { PortfolioFile } from "@/types/apis/application"; import { changeFileSizeUnit } from "@/utils/changeFileSizeUnit"; @@ -14,8 +13,7 @@ export function PortfolioFileItem({ portfolio, onDelete }: PortfolioFileItemProp window.open(portfolio.fileUrl, "_blank", "noopener,noreferrer"); }; - const handleDelete = (e: MouseEvent) => { - e.stopPropagation(); + const handleDelete = () => { onDelete(portfolio.id); }; 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 cc844235d..719be2f9e 100644 --- a/apps/web/src/features/apply/steps/registration/components/QuestionFieldWrapper.tsx +++ b/apps/web/src/features/apply/steps/registration/components/QuestionFieldWrapper.tsx @@ -1,23 +1,36 @@ -import { Title } from "@ject/jds"; +import { Title } from "@jects/jds"; import type { ReactNode } from "react"; interface QuestionFieldWrapperProps { title: string; + subtitle?: string | null; isRequired?: boolean; children: ReactNode; } -export function QuestionFieldWrapper({ title, isRequired, children }: QuestionFieldWrapperProps) { +export function QuestionFieldWrapper({ + title, + subtitle, + isRequired, + children, +}: QuestionFieldWrapperProps) { return ( <fieldset className='flex flex-col gap-(--semantic-spacing-16) self-stretch'> - <Title size='xs' textAlign='left'> - {title} - {isRequired && ( - <span className='text-feedback-notifying-neutral-light dark:text-feedback-notifying-neutral-dark'> - * - </span> + <div className='flex flex-col items-start gap-(--semantic-spacing-8) self-stretch'> + <Title size='xs' textAlign='left'> + {title} + {isRequired && ( + <span className='text-feedback-notifying-neutral-light dark:text-feedback-notifying-neutral-dark'> + * + </span> + )} + + {subtitle && ( +

+ {subtitle} +

)} - +
{children} ); diff --git a/apps/web/src/features/apply/steps/registration/components/TextQuestionField.tsx b/apps/web/src/features/apply/steps/registration/components/TextQuestionField.tsx index db652158c..11657b00e 100644 --- a/apps/web/src/features/apply/steps/registration/components/TextQuestionField.tsx +++ b/apps/web/src/features/apply/steps/registration/components/TextQuestionField.tsx @@ -1,4 +1,4 @@ -import { InputArea } from "@ject/jds"; +import { InputArea } from "@jects/jds"; import type { ChangeEvent } from "react"; import { QuestionFieldWrapper } from "./QuestionFieldWrapper"; @@ -22,7 +22,11 @@ export function TextQuestionField({ question, value, onChange }: TextQuestionFie const helperText = hasError ? APPLY_MESSAGE.invalid.exceedText : ""; return ( - + + { @@ -76,9 +77,18 @@ export function AuthCodeForm({ timer.start(180); } }, - onError: () => { + onError: error => { + const errorStatus = error.response?.data.status; + + if (errorStatus === "TOO_MANY_EMAIL_REQUESTS") { + handleError(error, "인증번호 발송 제한"); + toastController.destructive("인증번호 발송 제한", "잠시 후 다시 시도해주세요."); + return; + } + + handleError(error, "인증 시도 실패"); toastController.destructive( - "인증번호 발송 실패", + "인증 시도 실패", "일시적 오류일 수 있으니 다시 시도해주세요.", ); }, diff --git a/apps/web/src/features/shared/components/EmailInputForm.tsx b/apps/web/src/features/shared/components/EmailInputForm.tsx index 1f7f5e59c..b3bcca0cd 100644 --- a/apps/web/src/features/shared/components/EmailInputForm.tsx +++ b/apps/web/src/features/shared/components/EmailInputForm.tsx @@ -1,4 +1,4 @@ -import { BlockButton, TextField } from "@ject/jds"; +import { BlockButton, TextField } from "@jects/jds"; import type { FormEventHandler } from "react"; import { Controller } from "react-hook-form"; diff --git a/apps/web/src/features/shared/components/PinInputField.tsx b/apps/web/src/features/shared/components/PinInputField.tsx index 2349b8f5b..f301db88e 100644 --- a/apps/web/src/features/shared/components/PinInputField.tsx +++ b/apps/web/src/features/shared/components/PinInputField.tsx @@ -1,4 +1,4 @@ -import { LabelButton, TextField, type InputValidation } from "@ject/jds"; +import { LabelButton, TextField, type InputValidation } from "@jects/jds"; import type { ChangeEvent } from "react"; import { useState } from "react"; diff --git a/apps/web/src/features/shared/components/TermsCheckboxGroup.tsx b/apps/web/src/features/shared/components/TermsCheckboxGroup.tsx index 6bc325fbd..0c705b22b 100644 --- a/apps/web/src/features/shared/components/TermsCheckboxGroup.tsx +++ b/apps/web/src/features/shared/components/TermsCheckboxGroup.tsx @@ -1,4 +1,4 @@ -import { Checkbox } from "@ject/jds"; +import { Checkbox } from "@jects/jds"; const TERMS = { privacy: { diff --git a/apps/web/src/features/shared/components/VerifiedEmailDisplay.tsx b/apps/web/src/features/shared/components/VerifiedEmailDisplay.tsx index 71a99c198..31a41e85b 100644 --- a/apps/web/src/features/shared/components/VerifiedEmailDisplay.tsx +++ b/apps/web/src/features/shared/components/VerifiedEmailDisplay.tsx @@ -1,4 +1,4 @@ -import { BlockButton, TextField } from "@ject/jds"; +import { BlockButton, TextField } from "@jects/jds"; interface VerifiedEmailDisplayProps { email: string; diff --git a/apps/web/src/hooks/apply/useSaveDraftMutation.ts b/apps/web/src/hooks/apply/useSaveDraftMutation.ts index b7c6cb3fe..313198115 100644 --- a/apps/web/src/hooks/apply/useSaveDraftMutation.ts +++ b/apps/web/src/hooks/apply/useSaveDraftMutation.ts @@ -1,4 +1,4 @@ -import { toastController } from "@ject/jds"; +import { toastController } from "@jects/jds"; import { captureException } from "@sentry/react"; import { useMutation, useQueryClient, type UseMutationOptions } from "@tanstack/react-query"; diff --git a/apps/web/src/hooks/apply/useSendAuthCodeMutation.ts b/apps/web/src/hooks/apply/useSendAuthCodeMutation.ts index 47955f0dc..76ce6c77e 100644 --- a/apps/web/src/hooks/apply/useSendAuthCodeMutation.ts +++ b/apps/web/src/hooks/apply/useSendAuthCodeMutation.ts @@ -1,11 +1,13 @@ -import { toastController } from "@ject/jds"; +import { toastController } from "@jects/jds"; import { useMutation, type UseMutationOptions } from "@tanstack/react-query"; +import type { AxiosError } from "axios"; import { applyApi, applyMutationKeys } from "@/apis/apply"; import type { EmailAuthPayload } from "@/types/apis/apply"; +import type { ApiResponse } from "@/types/apis/response"; type UseSendAuthCodeMutationOptions = Omit< - UseMutationOptions, + UseMutationOptions>, EmailAuthPayload, unknown>, "mutationKey" | "mutationFn" >; diff --git a/apps/web/src/hooks/apply/useUploadFileToS3Mutation.ts b/apps/web/src/hooks/apply/useUploadFileToS3Mutation.ts index fe8e8689f..d884cbdb4 100644 --- a/apps/web/src/hooks/apply/useUploadFileToS3Mutation.ts +++ b/apps/web/src/hooks/apply/useUploadFileToS3Mutation.ts @@ -1,4 +1,4 @@ -import { toastController } from "@ject/jds"; +import { toastController } from "@jects/jds"; import { captureException } from "@sentry/react"; import { useMutation, type UseMutationOptions } from "@tanstack/react-query"; import type { AxiosResponse } from "axios"; @@ -21,7 +21,13 @@ type UseUploadFileToS3MutationOptions = Omit< }; export function useUploadFileToS3Mutation(options?: UseUploadFileToS3MutationOptions) { - const { isSuccessToastEnabled = true, isErrorToastEnabled = true, onSuccess, onError, ...restOptions } = options ?? {}; + const { + isSuccessToastEnabled = true, + isErrorToastEnabled = true, + onSuccess, + onError, + ...restOptions + } = options ?? {}; return useMutation({ mutationKey: applyMutationKeys.upload.s3, diff --git a/apps/web/src/hooks/useCloseOutside.ts b/apps/web/src/hooks/useCloseOutside.ts index 9a4f22fe4..396d1f169 100644 --- a/apps/web/src/hooks/useCloseOutside.ts +++ b/apps/web/src/hooks/useCloseOutside.ts @@ -4,6 +4,14 @@ import { useEffect, useState } from "react"; const useCloseOutside = (refs: RefObject[] | RefObject) => { const [isOpen, setIsOpen] = useState(false); + const onClose = () => { + setIsOpen(false); + }; + + const onToggle = () => { + setIsOpen(prev => !prev); + }; + useEffect(() => { if (!isOpen) return; @@ -26,7 +34,7 @@ const useCloseOutside = (refs: RefObject[] | RefObject return () => document.removeEventListener("mousedown", outsideClick); }, [refs, isOpen]); - return { isOpen, setIsOpen }; + return { isOpen, setIsOpen, onClose, onToggle }; }; export default useCloseOutside; diff --git a/apps/web/src/hooks/useCountdownTimer.ts b/apps/web/src/hooks/useCountdownTimer.ts index dbf678b90..fa6950c27 100644 --- a/apps/web/src/hooks/useCountdownTimer.ts +++ b/apps/web/src/hooks/useCountdownTimer.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; interface UseCountdownTimerReturn { seconds: number; @@ -8,18 +8,24 @@ interface UseCountdownTimerReturn { export function useCountdownTimer(): UseCountdownTimerReturn { const [seconds, setSeconds] = useState(0); + const endTimeRef = useRef(null); useEffect(() => { - if (seconds <= 0) return; + if (!endTimeRef.current) return; const timer = setTimeout(() => { - setSeconds(prev => prev - 1); + const remainingSeconds = Math.max(0, Math.ceil((endTimeRef.current! - Date.now()) / 1000)); + + setSeconds(remainingSeconds); }, 1000); return () => clearTimeout(timer); }, [seconds]); - const start = (s: number) => setSeconds(s); + const start = (s: number) => { + endTimeRef.current = Date.now() + s * 1000; + setSeconds(s); + }; return { seconds, isActive: seconds > 0, start }; } diff --git a/apps/web/src/hooks/useGlobalErrorHandler.ts b/apps/web/src/hooks/useGlobalErrorHandler.ts index 93acd4b04..9c5243103 100644 --- a/apps/web/src/hooks/useGlobalErrorHandler.ts +++ b/apps/web/src/hooks/useGlobalErrorHandler.ts @@ -1,4 +1,4 @@ -import { toastController } from "@ject/jds"; +import { toastController } from "@jects/jds"; import { captureException } from "@sentry/react"; import { AxiosError } from "axios"; import { ZodError } from "zod"; diff --git a/apps/web/src/pages/ApplyGuidePage.tsx b/apps/web/src/pages/ApplyGuidePage.tsx index d8468844c..992ee08f4 100644 --- a/apps/web/src/pages/ApplyGuidePage.tsx +++ b/apps/web/src/pages/ApplyGuidePage.tsx @@ -11,8 +11,8 @@ import { Tab, Title, toastController, -} from "@ject/jds"; -import { theme } from "@ject/jds/tokens"; +} from "@jects/jds"; +import { theme } from "@jects/jds/tokens"; import { useNavigate, useParams, useSearchParams, Navigate } from "react-router-dom"; import type { JobFamily } from "@/apis/apply"; @@ -161,7 +161,7 @@ function ApplyGuidePage() { 지원 안내 -
+
@@ -189,17 +189,11 @@ function ApplyGuidePage() {
-
- - 모집이 마감되었습니다 + + + 5기 모집 알림 신청하기 -
+
-
+
-
+
-
-
-
- -
-
- - 현재 페이지를 불러오는 중 <br className='desktop:hidden tablet:hidden' /> 문제가 - 생겼습니다 - +
+
+
+
+ +
+
+ + 현재 페이지를 불러오는 중 <br className='desktop:hidden tablet:hidden' />{" "} + 문제가 생겼습니다 + +
+ + 일시적인 오류일 수 있으니, 잠시 후 다시 시도해주세요. +
+ 문제가 지속된다면 jectofficial@ject.kr 로 문의해주세요. +
- - 일시적인 오류일 수 있으니, 잠시 후 다시 시도해주세요. -
- 문제가 지속된다면 jectofficial@ject.kr 로 문의해주세요. - + void navigate("/")} + > + 메인 페이지로 +
- void navigate("/")} - > - 메인 페이지로 -
diff --git a/apps/web/src/pages/NotFoundError.tsx b/apps/web/src/pages/NotFoundError.tsx index b2263e6c9..3c1152fce 100644 --- a/apps/web/src/pages/NotFoundError.tsx +++ b/apps/web/src/pages/NotFoundError.tsx @@ -1,4 +1,4 @@ -import { BlockButton, Hero, Title } from "@ject/jds"; +import { BlockButton, Hero, Title } from "@jects/jds"; import { useNavigate } from "react-router-dom"; import Footer from "@/components/common/footer/Footer"; @@ -11,32 +11,34 @@ function NotFoundError() {
-
-
-
-
- - 404 - -
-
-
- - 페이지를 찾을 수 없습니다 - +
+
+
+
+
+ + 404 + +
+
+
+ + 페이지를 찾을 수 없습니다 + +
+ + 잘못된 주소를 입력했거나, 삭제된 페이지예요. +
- - 잘못된 주소를 입력했거나, 삭제된 페이지예요. - + void navigate("/")} + > + 메인 페이지로 +
- void navigate("/")} - > - 메인 페이지로 -
diff --git a/apps/web/src/pages/TeamProject.tsx b/apps/web/src/pages/TeamProject.tsx index 7c3a8a21d..0e09bb2d7 100644 --- a/apps/web/src/pages/TeamProject.tsx +++ b/apps/web/src/pages/TeamProject.tsx @@ -1,4 +1,4 @@ -import { Card, Hero, Select, SelectField, Title } from "@ject/jds"; +import { Card, Hero, Select, SelectField, Title } from "@jects/jds"; import Lottie from "lottie-react"; import { useState, useRef } from "react"; diff --git a/apps/web/src/pages/TeamProjectDetail.tsx b/apps/web/src/pages/TeamProjectDetail.tsx index 5c569bc9e..655d250d9 100644 --- a/apps/web/src/pages/TeamProjectDetail.tsx +++ b/apps/web/src/pages/TeamProjectDetail.tsx @@ -1,4 +1,4 @@ -import type { ImgRatio } from "@ject/jds"; +import type { ImgRatio } from "@jects/jds"; import { BlockButton, ContentBadge, @@ -7,7 +7,7 @@ import { Image, Label, LocalNavigation, -} from "@ject/jds"; +} from "@jects/jds"; import { useEffect } from "react"; import { Navigate, useNavigate, useParams } from "react-router-dom"; diff --git a/apps/web/src/pages/Vision.tsx b/apps/web/src/pages/Vision.tsx index d50b2cefc..b315dbce0 100644 --- a/apps/web/src/pages/Vision.tsx +++ b/apps/web/src/pages/Vision.tsx @@ -1,4 +1,4 @@ -import { Divider } from "@ject/jds"; +import { Divider } from "@jects/jds"; import GoalSection from "@/components/vision/sections/GoalSection"; import GrowthStorySection from "@/components/vision/sections/GrowthStorySection"; diff --git a/apps/web/src/schema/applySchema.ts b/apps/web/src/schema/applySchema.ts index 768d965b9..3e6a3e9bb 100644 --- a/apps/web/src/schema/applySchema.ts +++ b/apps/web/src/schema/applySchema.ts @@ -74,6 +74,21 @@ const interestedDomainEnum = z.enum([ "HR", ]); +export const phoneNumberSchema = z + .string() + .min(1, "휴대폰 번호를 입력해주세요.") + .transform(val => val.replace(/[\s-]/g, "")) + .refine(val => val.length <= 2 || val.startsWith("010"), { + message: '"010"으로 시작하는 휴대폰 번호를 입력해주세요.', + }) + .refine(val => val.length <= 11, { + message: '"010"을 포함해 총 11자리까지만 입력해주세요.', + }); + +export const phoneNumberCompleteSchema = phoneNumberSchema.refine(val => val.length === 11, { + message: "휴대폰 번호를 끝까지 입력해주세요.", +}); + export const applyApplicantInfoSchema = z.object({ name: z .string() @@ -81,19 +96,7 @@ export const applyApplicantInfoSchema = z.object({ .max(5, "이름은 5자 이내로 작성해주세요.") .regex(/^[가-힣ㄱ-ㅎㅏ-ㅣ]+$/, "이름은 한글로 작성해주세요."), - phoneNumber: z - .string() - .min(1, "휴대폰 번호를 입력해주세요.") - .transform(val => val.replace(/[\s-]/g, "")) - .refine(val => /^\d+$/.test(val), { - message: "휴대폰 번호는 숫자만 입력해주세요.", - }) - .refine(val => val.length <= 2 || val.startsWith("010"), { - message: '"010"으로 시작하는 휴대폰 번호를 입력해주세요.', - }) - .refine(val => val.length <= 11, { - message: '"010"을 포함해 총 11자리까지만 입력해주세요.', - }), + phoneNumber: phoneNumberSchema, careerDetails: careerDetailsEnum, diff --git a/apps/web/src/types/apis/response.ts b/apps/web/src/types/apis/response.ts index 6dc82c650..48793e556 100644 --- a/apps/web/src/types/apis/response.ts +++ b/apps/web/src/types/apis/response.ts @@ -26,7 +26,8 @@ export type Status = | "RECRUIT_NOT_FOUND" | "TEMP_APPLICATION_NOT_FOUND" | "INVALID_CREDENTIALS" - | "VALIDATION_ERROR"; + | "VALIDATION_ERROR" + | "TOO_MANY_EMAIL_REQUESTS"; export interface ApiResponse { status: Status; diff --git a/apps/web/src/utils/validationHelpers.ts b/apps/web/src/utils/validationHelpers.ts index 5d11bf854..a680385cd 100644 --- a/apps/web/src/utils/validationHelpers.ts +++ b/apps/web/src/utils/validationHelpers.ts @@ -1,4 +1,4 @@ -import type { InputValidation } from "@ject/jds"; +import type { InputValidation } from "@jects/jds"; /** * Validation 상태를 도출하는 유틸리티 함수 diff --git a/package-lock.json b/package-lock.json index 0fb7f6d59..48acb6b1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "config/*" ], "devDependencies": { + "@changesets/cli": "^2.29.8", "@vercel/node": "^5.5.16", "prettier": "^3.4.2", "turbo": "^2.5.5", @@ -26,14 +27,14 @@ }, "apps/web": { "name": "ject-official-website-client", - "version": "0.0.0", + "version": "0.0.1", "dependencies": { "@amplitude/analytics-browser": "^2.17.2", "@amplitude/plugin-session-replay-browser": "^1.16.4", "@emotion/react": "^11", "@emotion/styled": "^11", "@hookform/resolvers": "^4.1.3", - "@ject/jds": "*", + "@jects/jds": "0.0.1", "@sentry/react": "^9.12.0", "@sentry/vite-plugin": "^3.3.1", "@tailwindcss/vite": "^4.0.0", @@ -48,7 +49,7 @@ "react": "^18.3.1", "react-device-detect": "^2.2.3", "react-dom": "^18.3.1", - "react-error-boundary": "^6.0.0", + "react-error-boundary": "6.0.0", "react-hook-form": "^7.54.2", "react-router-dom": "^7.1.5", "tailwindcss": "^4.0.0", @@ -80,6 +81,40 @@ "vitest": "^4.0.13" } }, + "apps/web/node_modules/@jects/jds": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@jects/jds/-/jds-0.0.1.tgz", + "integrity": "sha512-W9hNJmZbkuDzsMDuG5Q1quMfWY5gJIkJx7TEI20C4g+RxB79VSjKS3NhWUZCQv7B/AQjdYiuDuf4rc10gHFy9A==", + "license": "MIT", + "dependencies": { + "radix-ui": "^1.4.3" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=10.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-linux-x64-gnu": "4.53.2" + }, + "peerDependencies": { + "@emotion/react": ">=11", + "@emotion/styled": ">=11", + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, + "apps/web/node_modules/react-error-boundary": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.0.tgz", + "integrity": "sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "config/eslint": { "name": "@ject/eslint-config", "version": "0.0.1", @@ -670,37 +705,610 @@ "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, - "bin": { - "glob": "dist/esm/bin.mjs" + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/@bundled-es-modules/memfs": { + "version": "4.17.0", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz", + "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "assert": "^2.1.0", + "buffer": "^6.0.3", + "events": "^3.3.0", + "memfs": "^4.17.0", + "path": "^0.12.7", + "stream": "^0.0.3", + "util": "^0.12.5" + } + }, + "node_modules/@changesets/apply-release-plan": { + "version": "7.0.14", + "resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-7.0.14.tgz", + "integrity": "sha512-ddBvf9PHdy2YY0OUiEl3TV78mH9sckndJR14QAt87KLEbIov81XO0q0QAmvooBxXlqRRP8I9B7XOzZwQG7JkWA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/config": "^3.1.2", + "@changesets/get-version-range-type": "^0.4.0", + "@changesets/git": "^3.0.4", + "@changesets/should-skip-package": "^0.1.2", + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3", + "detect-indent": "^6.0.0", + "fs-extra": "^7.0.1", + "lodash.startcase": "^4.4.0", + "outdent": "^0.5.0", + "prettier": "^2.7.1", + "resolve-from": "^5.0.0", + "semver": "^7.5.3" + } + }, + "node_modules/@changesets/apply-release-plan/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@changesets/apply-release-plan/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@changesets/apply-release-plan/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/@changesets/apply-release-plan/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@changesets/apply-release-plan/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@changesets/apply-release-plan/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@changesets/assemble-release-plan": { + "version": "6.0.9", + "resolved": "https://registry.npmjs.org/@changesets/assemble-release-plan/-/assemble-release-plan-6.0.9.tgz", + "integrity": "sha512-tPgeeqCHIwNo8sypKlS3gOPmsS3wP0zHt67JDuL20P4QcXiw/O4Hl7oXiuLnP9yg+rXLQ2sScdV1Kkzde61iSQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/errors": "^0.2.0", + "@changesets/get-dependents-graph": "^2.1.3", + "@changesets/should-skip-package": "^0.1.2", + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3", + "semver": "^7.5.3" + } + }, + "node_modules/@changesets/assemble-release-plan/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@changesets/changelog-git": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@changesets/changelog-git/-/changelog-git-0.2.1.tgz", + "integrity": "sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/types": "^6.1.0" + } + }, + "node_modules/@changesets/cli": { + "version": "2.29.8", + "resolved": "https://registry.npmjs.org/@changesets/cli/-/cli-2.29.8.tgz", + "integrity": "sha512-1weuGZpP63YWUYjay/E84qqwcnt5yJMM0tep10Up7Q5cS/DGe2IZ0Uj3HNMxGhCINZuR7aO9WBMdKnPit5ZDPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/apply-release-plan": "^7.0.14", + "@changesets/assemble-release-plan": "^6.0.9", + "@changesets/changelog-git": "^0.2.1", + "@changesets/config": "^3.1.2", + "@changesets/errors": "^0.2.0", + "@changesets/get-dependents-graph": "^2.1.3", + "@changesets/get-release-plan": "^4.0.14", + "@changesets/git": "^3.0.4", + "@changesets/logger": "^0.1.1", + "@changesets/pre": "^2.0.2", + "@changesets/read": "^0.6.6", + "@changesets/should-skip-package": "^0.1.2", + "@changesets/types": "^6.1.0", + "@changesets/write": "^0.4.0", + "@inquirer/external-editor": "^1.0.2", + "@manypkg/get-packages": "^1.1.3", + "ansi-colors": "^4.1.3", + "ci-info": "^3.7.0", + "enquirer": "^2.4.1", + "fs-extra": "^7.0.1", + "mri": "^1.2.0", + "p-limit": "^2.2.0", + "package-manager-detector": "^0.2.0", + "picocolors": "^1.1.0", + "resolve-from": "^5.0.0", + "semver": "^7.5.3", + "spawndamnit": "^3.0.1", + "term-size": "^2.1.0" + }, + "bin": { + "changeset": "bin.js" + } + }, + "node_modules/@changesets/cli/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@changesets/cli/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@changesets/cli/node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@changesets/cli/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@changesets/cli/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@changesets/cli/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@changesets/config": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@changesets/config/-/config-3.1.2.tgz", + "integrity": "sha512-CYiRhA4bWKemdYi/uwImjPxqWNpqGPNbEBdX1BdONALFIDK7MCUj6FPkzD+z9gJcvDFUQJn9aDVf4UG7OT6Kog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/errors": "^0.2.0", + "@changesets/get-dependents-graph": "^2.1.3", + "@changesets/logger": "^0.1.1", + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3", + "fs-extra": "^7.0.1", + "micromatch": "^4.0.8" + } + }, + "node_modules/@changesets/config/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@changesets/config/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@changesets/config/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@changesets/errors": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@changesets/errors/-/errors-0.2.0.tgz", + "integrity": "sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==", + "dev": true, + "license": "MIT", + "dependencies": { + "extendable-error": "^0.1.5" + } + }, + "node_modules/@changesets/get-dependents-graph": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@changesets/get-dependents-graph/-/get-dependents-graph-2.1.3.tgz", + "integrity": "sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3", + "picocolors": "^1.1.0", + "semver": "^7.5.3" + } + }, + "node_modules/@changesets/get-dependents-graph/node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@changesets/get-release-plan": { + "version": "4.0.14", + "resolved": "https://registry.npmjs.org/@changesets/get-release-plan/-/get-release-plan-4.0.14.tgz", + "integrity": "sha512-yjZMHpUHgl4Xl5gRlolVuxDkm4HgSJqT93Ri1Uz8kGrQb+5iJ8dkXJ20M2j/Y4iV5QzS2c5SeTxVSKX+2eMI0g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/assemble-release-plan": "^6.0.9", + "@changesets/config": "^3.1.2", + "@changesets/pre": "^2.0.2", + "@changesets/read": "^0.6.6", + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3" + } + }, + "node_modules/@changesets/get-version-range-type": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@changesets/get-version-range-type/-/get-version-range-type-0.4.0.tgz", + "integrity": "sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@changesets/git": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@changesets/git/-/git-3.0.4.tgz", + "integrity": "sha512-BXANzRFkX+XcC1q/d27NKvlJ1yf7PSAgi8JG6dt8EfbHFHi4neau7mufcSca5zRhwOL8j9s6EqsxmT+s+/E6Sw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/errors": "^0.2.0", + "@manypkg/get-packages": "^1.1.3", + "is-subdir": "^1.1.1", + "micromatch": "^4.0.8", + "spawndamnit": "^3.0.1" + } + }, + "node_modules/@changesets/logger": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@changesets/logger/-/logger-0.1.1.tgz", + "integrity": "sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==", + "dev": true, + "license": "MIT", + "dependencies": { + "picocolors": "^1.1.0" + } + }, + "node_modules/@changesets/parse": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@changesets/parse/-/parse-0.4.2.tgz", + "integrity": "sha512-Uo5MC5mfg4OM0jU3up66fmSn6/NE9INK+8/Vn/7sMVcdWg46zfbvvUSjD9EMonVqPi9fbrJH9SXHn48Tr1f2yA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/types": "^6.1.0", + "js-yaml": "^4.1.1" + } + }, + "node_modules/@changesets/pre": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@changesets/pre/-/pre-2.0.2.tgz", + "integrity": "sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/errors": "^0.2.0", + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3", + "fs-extra": "^7.0.1" + } + }, + "node_modules/@changesets/pre/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@changesets/pre/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@changesets/pre/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@changesets/read": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@changesets/read/-/read-0.6.6.tgz", + "integrity": "sha512-P5QaN9hJSQQKJShzzpBT13FzOSPyHbqdoIBUd2DJdgvnECCyO6LmAOWSV+O8se2TaZJVwSXjL+v9yhb+a9JeJg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/git": "^3.0.4", + "@changesets/logger": "^0.1.1", + "@changesets/parse": "^0.4.2", + "@changesets/types": "^6.1.0", + "fs-extra": "^7.0.1", + "p-filter": "^2.1.0", + "picocolors": "^1.1.0" + } + }, + "node_modules/@changesets/read/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@changesets/read/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@changesets/read/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@changesets/should-skip-package": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@changesets/should-skip-package/-/should-skip-package-0.1.2.tgz", + "integrity": "sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/types": "^6.1.0", + "@manypkg/get-packages": "^1.1.3" + } + }, + "node_modules/@changesets/types": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@changesets/types/-/types-6.1.0.tgz", + "integrity": "sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@changesets/write": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@changesets/write/-/write-0.4.0.tgz", + "integrity": "sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@changesets/types": "^6.1.0", + "fs-extra": "^7.0.1", + "human-id": "^4.1.1", + "prettier": "^2.7.1" + } + }, + "node_modules/@changesets/write/node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@changesets/write/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@changesets/write/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" }, "funding": { - "url": "https://github.com/sponsors/isaacs" + "url": "https://github.com/prettier/prettier?sponsor=1" } }, - "node_modules/@bundled-es-modules/glob/node_modules/minipass": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", - "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "node_modules/@changesets/write/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", "dev": true, - "license": "ISC", + "license": "MIT", "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/@bundled-es-modules/memfs": { - "version": "4.17.0", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz", - "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "assert": "^2.1.0", - "buffer": "^6.0.3", - "events": "^3.3.0", - "memfs": "^4.17.0", - "path": "^0.12.7", - "stream": "^0.0.3", - "util": "^0.12.5" + "node": ">= 4.0.0" } }, "node_modules/@chromatic-com/storybook": { @@ -984,7 +1592,6 @@ "os": [ "aix" ], - "peer": true, "engines": { "node": ">=18" } @@ -1002,7 +1609,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -1020,7 +1626,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -1038,7 +1643,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -1056,7 +1660,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": ">=18" } @@ -1074,7 +1677,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": ">=18" } @@ -1092,7 +1694,6 @@ "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1110,7 +1711,6 @@ "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1128,7 +1728,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1146,7 +1745,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1164,7 +1762,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1182,7 +1779,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1200,7 +1796,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1218,7 +1813,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1236,7 +1830,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1254,7 +1847,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1272,7 +1864,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -1290,7 +1881,6 @@ "os": [ "netbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1308,7 +1898,6 @@ "os": [ "netbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1326,7 +1915,6 @@ "os": [ "openbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1344,7 +1932,6 @@ "os": [ "openbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -1362,7 +1949,6 @@ "os": [ "openharmony" ], - "peer": true, "engines": { "node": ">=18" } @@ -1380,7 +1966,6 @@ "os": [ "sunos" ], - "peer": true, "engines": { "node": ">=18" } @@ -1398,7 +1983,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -1416,7 +2000,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -1434,7 +2017,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -1743,6 +2325,28 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@inquirer/external-editor": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz", + "integrity": "sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==", + "dev": true, + "license": "MIT", + "dependencies": { + "chardet": "^2.1.1", + "iconv-lite": "^0.7.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, "node_modules/@isaacs/balanced-match": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz", @@ -1811,7 +2415,7 @@ "resolved": "config/eslint", "link": true }, - "node_modules/@ject/jds": { + "node_modules/@jects/jds": { "resolved": "packages/jds", "link": true }, @@ -2093,6 +2697,174 @@ "tslib": "2" } }, + "node_modules/@manypkg/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@types/node": "^12.7.1", + "find-up": "^4.1.0", + "fs-extra": "^8.1.0" + } + }, + "node_modules/@manypkg/find-root/node_modules/@types/node": { + "version": "12.20.55", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.55.tgz", + "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/@manypkg/find-root/node_modules/find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "license": "MIT", + "dependencies": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@manypkg/find-root/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@manypkg/find-root/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@manypkg/find-root/node_modules/locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-locate": "^4.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@manypkg/find-root/node_modules/p-limit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", + "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-try": "^2.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@manypkg/find-root/node_modules/p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-limit": "^2.2.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@manypkg/find-root/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/@manypkg/get-packages": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@manypkg/get-packages/-/get-packages-1.1.3.tgz", + "integrity": "sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.5.5", + "@changesets/types": "^4.0.1", + "@manypkg/find-root": "^1.1.0", + "fs-extra": "^8.1.0", + "globby": "^11.0.0", + "read-yaml-file": "^1.1.0" + } + }, + "node_modules/@manypkg/get-packages/node_modules/@changesets/types": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@changesets/types/-/types-4.1.0.tgz", + "integrity": "sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@manypkg/get-packages/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/@manypkg/get-packages/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/@manypkg/get-packages/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/@mapbox/node-pre-gyp": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.3.tgz", @@ -3792,8 +4564,7 @@ "optional": true, "os": [ "android" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-android-arm64": { "version": "4.54.0", @@ -3806,8 +4577,7 @@ "optional": true, "os": [ "android" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.54.0", @@ -3833,8 +4603,7 @@ "optional": true, "os": [ "darwin" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-freebsd-arm64": { "version": "4.54.0", @@ -3847,8 +4616,7 @@ "optional": true, "os": [ "freebsd" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-freebsd-x64": { "version": "4.54.0", @@ -3861,8 +4629,7 @@ "optional": true, "os": [ "freebsd" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { "version": "4.54.0", @@ -3875,8 +4642,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { "version": "4.54.0", @@ -3889,8 +4655,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { "version": "4.54.0", @@ -3903,8 +4668,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { "version": "4.54.0", @@ -3917,8 +4681,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { "version": "4.54.0", @@ -3931,8 +4694,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { "version": "4.54.0", @@ -3945,8 +4707,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { "version": "4.54.0", @@ -3959,8 +4720,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { "version": "4.54.0", @@ -3973,8 +4733,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { "version": "4.54.0", @@ -3987,8 +4746,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { "version": "4.53.2", @@ -4014,8 +4772,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-openharmony-arm64": { "version": "4.54.0", @@ -4028,8 +4785,7 @@ "optional": true, "os": [ "openharmony" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { "version": "4.54.0", @@ -4042,8 +4798,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { "version": "4.54.0", @@ -4056,8 +4811,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { "version": "4.54.0", @@ -4070,8 +4824,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { "version": "4.54.0", @@ -4084,8 +4837,7 @@ "optional": true, "os": [ "win32" - ], - "peer": true + ] }, "node_modules/@rtsao/scc": { "version": "1.1.0", @@ -6680,6 +7432,16 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -6814,6 +7576,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/array.prototype.findlastindex": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz", @@ -7117,6 +7889,19 @@ "baseline-browser-mapping": "dist/cli.js" } }, + "node_modules/better-path-resolve": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/better-path-resolve/-/better-path-resolve-1.0.0.tgz", + "integrity": "sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-windows": "^1.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/binary-extensions": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", @@ -7399,6 +8184,13 @@ "dev": true, "license": "MIT" }, + "node_modules/chardet": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.1.tgz", + "integrity": "sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==", + "dev": true, + "license": "MIT" + }, "node_modules/check-error": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz", @@ -7980,6 +8772,16 @@ "node": ">=6" } }, + "node_modules/detect-indent": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz", + "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", @@ -8005,6 +8807,19 @@ "node": ">=0.3.1" } }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -8219,6 +9034,33 @@ "node": ">=10.13.0" } }, + "node_modules/enquirer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", + "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-colors": "^4.1.1", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/enquirer/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -9247,6 +10089,13 @@ "node": ">=12.0.0" } }, + "node_modules/extendable-error": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/extendable-error/-/extendable-error-0.1.7.tgz", + "integrity": "sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==", + "dev": true, + "license": "MIT" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -9758,6 +10607,37 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/globby/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -9902,6 +10782,16 @@ "node": ">= 6" } }, + "node_modules/human-id": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/human-id/-/human-id-4.1.3.tgz", + "integrity": "sha512-tsYlhAYpjCKa//8rXZ9DqKEawhPoSytweBC2eNvcaDK+57RZLHGqNs3PZTQO6yekLFSuvA6AlnAfrw1uBvtb+Q==", + "dev": true, + "license": "MIT", + "bin": { + "human-id": "dist/cli.js" + } + }, "node_modules/hyperdyperid": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz", @@ -9912,6 +10802,23 @@ "node": ">=10.18" } }, + "node_modules/iconv-lite": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz", + "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/idb": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz", @@ -10443,6 +11350,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-subdir": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/is-subdir/-/is-subdir-1.2.0.tgz", + "integrity": "sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==", + "dev": true, + "license": "MIT", + "dependencies": { + "better-path-resolve": "1.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/is-symbol": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz", @@ -10523,6 +11443,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-windows": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", + "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-wsl": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz", @@ -11109,6 +12039,13 @@ "dev": true, "license": "MIT" }, + "node_modules/lodash.startcase": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.startcase/-/lodash.startcase-4.4.0.tgz", + "integrity": "sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==", + "dev": true, + "license": "MIT" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -11759,6 +12696,13 @@ "node": ">= 0.8.0" } }, + "node_modules/outdent": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.5.0.tgz", + "integrity": "sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==", + "dev": true, + "license": "MIT" + }, "node_modules/own-keys": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz", @@ -11777,6 +12721,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/p-filter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/p-filter/-/p-filter-2.1.0.tgz", + "integrity": "sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-map": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", @@ -11807,6 +12764,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/p-map": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz", + "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/package-json-from-dist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", @@ -11814,6 +12791,16 @@ "dev": true, "license": "BlueOak-1.0.0" }, + "node_modules/package-manager-detector": { + "version": "0.2.11", + "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz", + "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "quansync": "^0.2.7" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -12100,6 +13087,16 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/pirates": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", @@ -12476,6 +13473,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/quansync": { + "version": "0.2.11", + "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz", + "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/antfu" + }, + { + "type": "individual", + "url": "https://github.com/sponsors/sxzz" + } + ], + "license": "MIT" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -12657,16 +13671,6 @@ "react": "^18.3.1" } }, - "node_modules/react-error-boundary": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.1.tgz", - "integrity": "sha512-zArgQpjJUN1ZLMEKWtifxQweW3yfvwL5j2nh3Pesze1qG6r5oCDMy/TA97bUF01wy4xCeeL4/pd8GHmvEsP3Bg==", - "license": "MIT", - "peerDependencies": { - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" - } - }, "node_modules/react-hook-form": { "version": "7.70.0", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.70.0.tgz", @@ -12806,6 +13810,46 @@ } } }, + "node_modules/read-yaml-file": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/read-yaml-file/-/read-yaml-file-1.1.0.tgz", + "integrity": "sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.5", + "js-yaml": "^3.6.1", + "pify": "^4.0.1", + "strip-bom": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/read-yaml-file/node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "license": "MIT", + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, + "node_modules/read-yaml-file/node_modules/js-yaml": { + "version": "3.14.2", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz", + "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, "node_modules/readdirp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", @@ -13020,8 +14064,7 @@ "optional": true, "os": [ "linux" - ], - "peer": true + ] }, "node_modules/run-applescript": { "version": "7.1.0", @@ -13145,6 +14188,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true, + "license": "MIT" + }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -13391,6 +14441,24 @@ "node": ">=0.10.0" } }, + "node_modules/spawndamnit": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spawndamnit/-/spawndamnit-3.0.1.tgz", + "integrity": "sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==", + "dev": true, + "license": "SEE LICENSE IN LICENSE", + "dependencies": { + "cross-spawn": "^7.0.5", + "signal-exit": "^4.0.1" + } + }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "dev": true, + "license": "BSD-3-Clause" + }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", @@ -13895,6 +14963,19 @@ "node": ">=18" } }, + "node_modules/term-size": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz", + "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/thenify": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", @@ -14901,7 +15982,6 @@ "os": [ "aix" ], - "peer": true, "engines": { "node": ">=18" } @@ -14918,7 +15998,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -14935,7 +16014,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -14952,7 +16030,6 @@ "os": [ "android" ], - "peer": true, "engines": { "node": ">=18" } @@ -14969,7 +16046,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": ">=18" } @@ -14986,7 +16062,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": ">=18" } @@ -15003,7 +16078,6 @@ "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -15020,7 +16094,6 @@ "os": [ "freebsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -15037,7 +16110,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15054,7 +16126,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15071,7 +16142,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15088,7 +16158,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15105,7 +16174,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15122,7 +16190,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15139,7 +16206,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15156,7 +16222,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15173,7 +16238,6 @@ "os": [ "linux" ], - "peer": true, "engines": { "node": ">=18" } @@ -15190,7 +16254,6 @@ "os": [ "netbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -15207,7 +16270,6 @@ "os": [ "netbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -15224,7 +16286,6 @@ "os": [ "openbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -15241,7 +16302,6 @@ "os": [ "openbsd" ], - "peer": true, "engines": { "node": ">=18" } @@ -15258,7 +16318,6 @@ "os": [ "openharmony" ], - "peer": true, "engines": { "node": ">=18" } @@ -15275,7 +16334,6 @@ "os": [ "sunos" ], - "peer": true, "engines": { "node": ">=18" } @@ -15292,7 +16350,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -15309,7 +16366,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -15326,7 +16382,6 @@ "os": [ "win32" ], - "peer": true, "engines": { "node": ">=18" } @@ -15382,7 +16437,6 @@ "os": [ "darwin" ], - "peer": true, "engines": { "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } @@ -15947,8 +17001,8 @@ } }, "packages/jds": { - "name": "@ject/jds", - "version": "0.0.1", + "name": "@jects/jds", + "version": "0.2.0", "license": "MIT", "dependencies": { "radix-ui": "^1.4.3" @@ -15959,23 +17013,27 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@ject/eslint-config": "*", - "@storybook/addon-docs": "10.1.0", + "@storybook/addon-docs": "^10.1.0", "@storybook/addon-onboarding": "^10.1.0", - "@storybook/react-vite": "10.1.0", + "@storybook/react-vite": "^10.1.0", "@svgr/cli": "^8.1.0", "@svgr/core": "^8.1.0", "@types/node": "^22.19.1", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", "chromatic": "^11.25.2", - "eslint-plugin-storybook": "10.1.0", + "eslint-plugin-storybook": "^10.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "storybook": "10.1.0", + "storybook": "^10.1.0", "style-dictionary": "^4.3.2", "tsup": "^8.5.0", "zod": "^3.25.76" }, + "engines": { + "node": ">=18.0.0", + "npm": ">=10.0.0" + }, "optionalDependencies": { "@rollup/rollup-linux-x64-gnu": "4.53.2" }, @@ -15988,6 +17046,8 @@ }, "packages/jds/node_modules/@storybook/addon-docs": { "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.1.0.tgz", + "integrity": "sha512-CVW2pc9iAfz1A6/L9S0z8XqKUON+u92xaOTC1x6d3WS8cyOT94nD7tfohT8aWydwvvmtwRHZJzl0aWnKUNgSJw==", "dev": true, "license": "MIT", "dependencies": { @@ -16054,8 +17114,24 @@ "storybook": "^10.1.0" } }, + "packages/jds/node_modules/@storybook/addon-onboarding": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-10.1.0.tgz", + "integrity": "sha512-1ejlsj3gb2f2mVgTbLJyQbnF7e3iT5xUwIyFnynHIbdw8HkcQtF+Kt56HOkP27llGv2zAvpmXZ4tu1y461hzzA==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^10.1.0" + } + }, "packages/jds/node_modules/@storybook/react-vite": { "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-10.1.0.tgz", + "integrity": "sha512-gFLTU92QQ69saFzQGeIRysQ1G2o3DSWWuG07JRj03493H9USKhvzHo88utKZ2BQP/H93UgcEwy6Ms5psIS3AUA==", "dev": true, "license": "MIT", "dependencies": { @@ -16191,6 +17267,8 @@ }, "packages/jds/node_modules/eslint-plugin-storybook": { "version": "10.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.1.0.tgz", + "integrity": "sha512-5s/Hi9bKl6xSChPOlHwLrQDW+Nj6OXnl9nnQmbKtEQoCdEuSDbAEDc8zZ9NLAyD2rljE2N6Jhe9iP9+2lm43tQ==", "dev": true, "license": "MIT", "dependencies": { @@ -16241,6 +17319,8 @@ }, "packages/jds/node_modules/storybook": { "version": "10.1.0", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-10.1.0.tgz", + "integrity": "sha512-RCTybwtyQaKRoU1Z8rWGv5h6ZN3+HelSM0WMMWKBsKgXZkpQ00vro1kd/tWILawxNiU2YS9Zo+4On5hx2Rm+8w==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 950273c02..b383dfab0 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "type-check": "turbo type-check" }, "devDependencies": { + "@changesets/cli": "^2.29.8", "@vercel/node": "^5.5.16", "prettier": "^3.4.2", "turbo": "^2.5.5", diff --git a/packages/jds/CHANGELOG.md b/packages/jds/CHANGELOG.md new file mode 100644 index 000000000..2fbfa6d69 --- /dev/null +++ b/packages/jds/CHANGELOG.md @@ -0,0 +1,19 @@ +# @jects/jds + +## 0.2.1 + +### Patch Changes + +- 72ccd58: 2차 QA 대응 + +## 0.2.0 + +### Minor Changes + +- 9a1c7a3: refactor design systems and add code/table design system + +## 0.0.1 + +### Patch Changes + +- 050b727: 리팩토링 이전 디자인 시스템 배포 테스트 diff --git a/packages/jds/package.json b/packages/jds/package.json index 379e76af4..53c9d8b33 100644 --- a/packages/jds/package.json +++ b/packages/jds/package.json @@ -1,9 +1,19 @@ { - "name": "@ject/jds", - "version": "0.0.1", + "name": "@jects/jds", + "version": "0.2.1", "description": "Ject Design System", "author": "Ject Team", "license": "MIT", + "type": "module", + "engines": { + "node": ">=18.0.0", + "npm": ">=10.0.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/JECT-Study/JECT-Official-WebSite-Client.git", + "directory": "packages/jds" + }, "main": "./dist/index.js", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -42,13 +52,13 @@ }, "scripts": { "dev": "tsup --watch", - "build": "tsup", + "build": "tsc --noEmit && tsup", "lint": "eslint --fix --max-warnings 0", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "chromatic": "npx chromatic --project-token=$CHROMATIC_TOKEN", - "build:tokens": "npx tsx tokensBuilder.ts", - "clean": "rm -rf dist node_modules .turbo storybook-static", + "build:tokens": "npx tsx src/tokens/tokensBuilder.ts", + "clean": "rimraf dist node_modules .turbo storybook-static", "build:icons": "svgr src/assets/icons --out-dir src/components/Icon/generated --typescript --ext tsx", "type-check": "tsc -b --noEmit", "format": "prettier --write ." @@ -62,19 +72,19 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@ject/eslint-config": "*", - "@storybook/addon-docs": "10.1.0", + "@storybook/addon-docs": "^10.1.0", "@storybook/addon-onboarding": "^10.1.0", - "@storybook/react-vite": "10.1.0", + "@storybook/react-vite": "^10.1.0", "@svgr/cli": "^8.1.0", "@svgr/core": "^8.1.0", "@types/node": "^22.19.1", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", "chromatic": "^11.25.2", - "eslint-plugin-storybook": "10.1.0", + "eslint-plugin-storybook": "^10.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "storybook": "10.1.0", + "storybook": "^10.1.0", "style-dictionary": "^4.3.2", "tsup": "^8.5.0", "zod": "^3.25.76" @@ -91,6 +101,5 @@ }, "optionalDependencies": { "@rollup/rollup-linux-x64-gnu": "4.53.2" - }, - "type": "module" + } } diff --git a/packages/jds/src/components/Accordion/Accordion.stories.tsx b/packages/jds/src/components/Accordion/Accordion.stories.tsx index d337f183f..1bef9d0e7 100644 --- a/packages/jds/src/components/Accordion/Accordion.stories.tsx +++ b/packages/jds/src/components/Accordion/Accordion.stories.tsx @@ -1,6 +1,13 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { Accordion } from "./Accordion"; +import type { AccordionRootProps } from "./accordion.types"; +import type { IconName } from "../Icon"; + +type AccordionStoryArgs = AccordionRootProps & { + withPrefixIcon?: IconName; + collapsible?: boolean; +}; const meta = { title: "Components/Accordion", @@ -38,10 +45,7 @@ const meta = { }, defaultValue: { control: "text", - description: "기본적으로 펼쳐져있는 아코디언아이템", - table: { - defaultValue: { summary: "false" }, - }, + description: "기본적으로 펼쳐져있는 아코디언 아이템 (multiple 모드 전용)", }, collapsible: { control: "boolean", @@ -50,15 +54,61 @@ const meta = { defaultValue: { summary: "false" }, }, }, + withPrefixIcon: { + control: "text", + description: "아이콘", + }, + size: { + control: "radio", + description: "아코디언 사이즈", + }, }, args: { type: "multiple", isStretched: false, + collapsible: true, + withPrefixIcon: "vector", + size: "lg", }, -} satisfies Meta; +} satisfies Meta; export default meta; -type Story = StoryObj; + +type Story = StoryObj; + +export const Default: Story = { + render: (args: AccordionStoryArgs) => ( +
+ + + 타이틀 + + 아코디언 콘텐츠 내용은 타이틀에 대한 상세 내용 및 설명을 포함합니다. + + + + + 타이틀 + + 아코디언 콘텐츠 내용은 타이틀에 대한 상세 내용 및 설명을 포함합니다. + + + + + 타이틀 + + 아코디언 콘텐츠 내용은 타이틀에 대한 상세 내용 및 설명을 포함합니다. + + + +
+ ), +}; export const Single: Story = { name: "Single 모드", @@ -69,25 +119,25 @@ export const Single: Story = { }, }, }, - render: args => ( + render: (args: AccordionStoryArgs) => (
- + - 타이틀 + 타이틀 아코디언 콘텐츠 내용은 타이틀에 대한 상세 내용 및 설명을 포함합니다. - 타이틀 + 타이틀 아코디언 콘텐츠 내용은 타이틀에 대한 상세 내용 및 설명을 포함합니다. - 타이틀 + 타이틀 아코디언 콘텐츠 내용은 타이틀에 대한 상세 내용 및 설명을 포함합니다. @@ -106,7 +156,7 @@ export const Multiple: Story = { }, }, }, - render: args => ( + render: (args: AccordionStoryArgs) => (
@@ -136,7 +186,6 @@ export const Multiple: Story = { export const WithoutDefaultValue: Story = { name: "with Default Value", - args: {}, parameters: { docs: { description: { @@ -144,7 +193,7 @@ export const WithoutDefaultValue: Story = { }, }, }, - render: args => ( + render: (args: AccordionStoryArgs) => (
( + render: (args: AccordionStoryArgs) => (
{ - return ( - - - {children} - - - ); -}; +/** + * Accordion.Root + * - Radix UI Accordion의 루트 컨테이너입니다. + * - Context를 통해 내부 컴포넌트들에게 size와 isStretched 상태를 공유합니다. + */ +const AccordionRoot = forwardRef( + ({ children, isStretched = true, size = "lg", ...props }, ref) => { + const contextValue = useMemo(() => ({ isStretched, size }), [isStretched, size]); + + return ( + + + {children} + + + ); + }, +); AccordionRoot.displayName = "Accordion.Root"; +/** + * Accordion.Item + * - 개별 아코디언 항목을 감싸는 래퍼입니다. + */ const AccordionItem = forwardRef( ({ children, ...props }, ref) => ( @@ -42,22 +55,28 @@ const AccordionItem = forwardRef( AccordionItem.displayName = "Accordion.Item"; +/** + * Accordion.Trigger + * - 아코디언을 열고 닫는 헤더/버튼 영역입니다. + * - Context에서 주입된 size에 따라 스타일(아이콘 크기, 폰트 크기)이 결정됩니다. + */ const AccordionTrigger = forwardRef( ({ children, withPrefixIcon, ...props }, ref) => { const { isStretched, size } = useAccordionContext(); - const sizeConfig = accordionSizeMap[size]; + const { iconSize, labelSize } = accordionSizeMap[size]; return ( - {withPrefixIcon && } - + {withPrefixIcon && } + {children} + - + @@ -67,12 +86,16 @@ const AccordionTrigger = forwardRef( AccordionTrigger.displayName = "Accordion.Trigger"; +/** + * Accordion.Content + * - 아코디언이 열렸을 때 보여지는 상세 내용 영역입니다. + */ const AccordionContent = forwardRef( ({ children, ...props }, ref) => { - const { isStretched } = useAccordionContext(); + const { isStretched, size } = useAccordionContext(); return ( - + {children} diff --git a/packages/jds/src/components/Accordion/accordion.styles.ts b/packages/jds/src/components/Accordion/accordion.styles.ts index 7434b97d8..f68ba4079 100644 --- a/packages/jds/src/components/Accordion/accordion.styles.ts +++ b/packages/jds/src/components/Accordion/accordion.styles.ts @@ -17,16 +17,17 @@ export const accordionSizeMap: Record< { iconSize: IconSize; labelSize: LabelSize; + contentTextStyle: keyof Theme["textStyle"]; } > = { - lg: { iconSize: "sm", labelSize: "lg" }, - md: { iconSize: "xs", labelSize: "md" }, - sm: { iconSize: "xs", labelSize: "sm" }, + lg: { iconSize: "sm", labelSize: "lg", contentTextStyle: "semantic-textStyle-body-lg-normal" }, + md: { iconSize: "xs", labelSize: "md", contentTextStyle: "semantic-textStyle-body-md-normal" }, + sm: { iconSize: "xs", labelSize: "sm", contentTextStyle: "semantic-textStyle-body-xs-normal" }, }; -const createInteractionStyles = (theme: Theme, isStretched: boolean, isReadonly: boolean) => { +const createInteractionStyles = (theme: Theme, isReadonly: boolean) => { const borderRadius = 4; - const offset = isStretched ? { vertical: 0, horizontal: 0 } : { vertical: 4, horizontal: 6 }; + const offset = { vertical: 4, horizontal: 6 }; const makeLayer = (state: "rest" | "hover" | "active" | "focus") => InteractionLayer({ @@ -59,8 +60,8 @@ export const StyledAccordionRoot = styled("div")(({ theme }) => ({ export const StyledAccordionTrigger = styled( AccordionPrimitive.Trigger, )(({ theme, $isStretched }) => { - const interactionStyles = createInteractionStyles(theme, $isStretched, false); - const disabledInteractionStyles = createInteractionStyles(theme, $isStretched, true); + const interactionStyles = createInteractionStyles(theme, false); + const disabledInteractionStyles = createInteractionStyles(theme, true); return { display: "flex", @@ -74,6 +75,10 @@ export const StyledAccordionTrigger = styled( color: theme.color.semantic.object.bolder, ...interactionStyles.restStyle, + "&:hover": { + ...interactionStyles.hoverStyle, + }, + "&:active": { ...interactionStyles.activeStyle, "::after": { @@ -87,25 +92,10 @@ export const StyledAccordionTrigger = styled( }, "&[data-disabled]": { + pointerEvents: "none", color: theme.color.semantic.object.subtle, ...disabledInteractionStyles.restStyle, - "&:hover": { - ...disabledInteractionStyles.hoverStyle, - "::after": { - ...interactionStyles.hoverStyle["::after"], - transition: `opacity ${theme.environment.semantic.duration[100]} ${theme.environment.semantic.motion.fluent}`, - }, - }, - - "&:active": { - ...disabledInteractionStyles.activeStyle, - "::after": { - ...disabledInteractionStyles.activeStyle["::after"], - transition: "none", - }, - }, - "&:focus-visible": { ...disabledInteractionStyles.focusStyle, }, @@ -126,6 +116,8 @@ export const StyledAccordionLabelContainer = styled("div")(({ theme }) => ({ })); export const StyledAccordionChevron = styled("div")(({ theme }) => ({ + display: "flex", + alignItems: "center", transition: `transform ${theme.environment.semantic.duration[300]} ${theme.environment.semantic.motion.fluent}`, })); @@ -133,6 +125,7 @@ export const StyleLabel = styled(Label)(() => ({ color: "inherit", textAlign: "left" as const, textWrap: "wrap" as const, + cursor: "pointer", })); const slideUp = keyframes` @@ -145,11 +138,13 @@ const slideDown = keyframes` to { height: var(--radix-accordion-content-height); } `; -export const StyledAccordionContent = styled(AccordionPrimitive.Content)(({ theme }) => { +export const StyledAccordionContent = styled(AccordionPrimitive.Content)< + Pick +>(({ theme, $size }) => { return { overflow: "hidden", - ...theme.textStyle["semantic-textStyle-body-sm-normal"], color: theme.color.semantic.object.bold, + willChange: "height", "&[data-disabled]": { color: theme.color.semantic.object.subtle, @@ -162,12 +157,14 @@ export const StyledAccordionContent = styled(AccordionPrimitive.Content)(({ them '&[data-state="closed"]': { animation: `${slideUp} ${theme.environment.semantic.duration[300]} ${theme.environment.semantic.motion.fluent}`, }, + + ...theme.textStyle[accordionSizeMap[$size].contentTextStyle], }; }); -export const StyledAccordionContentText = styled("div")( - ({ theme, $isStretched }) => ({ - marginTop: theme.scheme.semantic.spacing[12], - padding: $isStretched ? 0 : `0 ${theme.scheme.semantic.spacing[16]}`, - }), -); +export const StyledAccordionContentText = styled("div")< + Pick +>(({ theme, $isStretched }) => ({ + marginTop: theme.scheme.semantic.spacing[12], + padding: $isStretched ? 0 : `0 ${theme.scheme.semantic.spacing[16]}`, +})); diff --git a/packages/jds/src/components/Accordion/accordion.types.ts b/packages/jds/src/components/Accordion/accordion.types.ts index 8b40e3279..c4794c803 100644 --- a/packages/jds/src/components/Accordion/accordion.types.ts +++ b/packages/jds/src/components/Accordion/accordion.types.ts @@ -1,24 +1,27 @@ import type * as AccordionPrimitive from "@radix-ui/react-accordion"; -import type { ComponentPropsWithoutRef } from "react"; import type { IconName } from "../Icon"; export type AccordionSize = "lg" | "md" | "sm"; -export type AccordionRootProps = ComponentPropsWithoutRef & { +export interface AccordionRootBaseProps { isStretched?: boolean; - withPrefixIcon?: boolean; size?: AccordionSize; -}; +} -export type AccordionItemProps = ComponentPropsWithoutRef; +export type AccordionPrimitiveProps = + | AccordionPrimitive.AccordionSingleProps + | AccordionPrimitive.AccordionMultipleProps; -export type AccordionTriggerProps = ComponentPropsWithoutRef & { - isStretched?: boolean; - withPrefixIcon?: IconName | null; +export type AccordionRootProps = AccordionRootBaseProps & AccordionPrimitiveProps; + +export type AccordionItemProps = AccordionPrimitive.AccordionItemProps; + +export type AccordionTriggerProps = AccordionPrimitive.AccordionTriggerProps & { + withPrefixIcon?: IconName; }; -export type AccordionContentProps = ComponentPropsWithoutRef; +export type AccordionContentProps = AccordionPrimitive.AccordionContentProps; export interface StyledAccordionTriggerProps { $isStretched: boolean; @@ -26,4 +29,5 @@ export interface StyledAccordionTriggerProps { export interface StyledAccordionContentProps { $isStretched: boolean; + $size: AccordionSize; } diff --git a/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx b/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx index d22c0fd39..87b84dfdd 100644 --- a/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx +++ b/packages/jds/src/components/Badge/contentBadge/ContentBadge.tsx @@ -1,4 +1,4 @@ -import type { ReactNode } from "react"; +import type { MouseEvent, ReactNode } from "react"; import { BadgeIcon, @@ -24,6 +24,7 @@ export interface ContentBadgeBasicProps { badgeStyle?: ContentBadgeStyle; isMuted?: boolean; withIcon?: boolean; + onIconClick?: (e: MouseEvent) => void; children: ReactNode; } @@ -33,6 +34,7 @@ const ContentBadgeBasic = ({ badgeStyle = "solid", isMuted = false, withIcon = false, + onIconClick, children, }: ContentBadgeBasicProps) => { const iconSize = iconSizeMap[size]; @@ -63,6 +65,7 @@ const ContentBadgeBasic = ({ hierarchy={hierarchy} badgeStyle={badgeStyle} isMuted={isMuted} + onClick={onIconClick} /> )} diff --git a/packages/jds/src/components/Callout/Callout.stories.tsx b/packages/jds/src/components/Callout/Callout.stories.tsx index b4e6fddc6..7dcedbc29 100644 --- a/packages/jds/src/components/Callout/Callout.stories.tsx +++ b/packages/jds/src/components/Callout/Callout.stories.tsx @@ -4,81 +4,121 @@ import { Callout } from "./Callout"; const meta = { title: "Components/Callout", - component: Callout.Basic, + component: Callout, parameters: { layout: "centered", + docs: { + description: { + component: + "Callout 컴포넌트는 Basic 모드(hierarchy)와 Feedback 모드(feedback)를 지원합니다. 두 속성은 동시에 사용할 수 없습니다.", + }, + }, }, argTypes: { - variant: { control: "radio", options: ["hero", "hint"] }, - hierarchy: { control: "radio", options: ["accent", "primary", "secondary"] }, - size: { control: "radio", options: ["lg", "md", "sm", "xs", "2xs"] }, - title: { control: "text" }, - children: { control: "text" }, + size: { + control: "radio", + options: ["lg", "md", "sm", "xs"], + description: "Callout의 크기", + table: { + defaultValue: { summary: "md" }, + }, + }, + title: { + control: "text", + description: "Callout 타이틀", + }, + children: { + control: "text", + description: "Callout 본문 내용", + }, + labelButtonProps: { + control: "object", + description: "우측 버튼 설정 (옵션)", + }, + hierarchy: { + control: "radio", + options: ["primary", "secondary"], + description: "중요도 단계", + table: { + defaultValue: { summary: "secondary" }, + }, + }, + feedback: { + control: "radio", + options: ["positive", "destructive", "notifying"], + description: "피드백 상태", + }, }, -} satisfies Meta; +} satisfies Meta; export default meta; +type Story = StoryObj; -export const CalloutBasic: StoryObj = { - name: "Basic", - argTypes: { - hierarchy: { control: "radio", options: ["accent", "primary", "secondary"] }, +export const Basic: Story = { + name: "Basic Mode", + parameters: { + docs: { + description: { + story: "**Basic Mode**는 `hierarchy` prop을 사용하여 일반적인 정보를 전달할 때 사용합니다.", + }, + }, }, args: { - hierarchy: "accent", - variant: "hero", + hierarchy: "primary", size: "lg", title: "베이직 콜아웃 타이틀", - blockButtonProps: { + children: + "콜아웃 텍스트의 최대 입력 글자수 제한은 없지만, 너무 많은 글자수는 핵심적인 내용을 효과적으로 전달하는 데에 적절치 않다는 점을 유의합니다.", + labelButtonProps: { children: "레이블", disabled: false, prefixIcon: "blank", suffixIcon: "blank", }, - children: - "콜아웃 텍스트의 최대 입력 글자수 제한은 없지만, 너무 많은 글자수는 핵심적인 내용을 효과적으로 전달하는 데에 적절치 않다는 점을 유의합니다.", }, - render: args => ( - - {args.children} - - ), }; -export const CalloutFeedback: StoryObj = { - name: "Feedback", - argTypes: { - feedback: { control: "radio", options: ["positive", "destructive", "notifying"] }, +export const Feedback: Story = { + name: "Feedback Mode", + parameters: { + docs: { + description: { + story: + "**Feedback Mode**는 `feedback` prop을 사용하여 상태(긍정, 부정, 알림)를 전달할 때 사용합니다.", + }, + }, }, args: { - feedback: "positive", - variant: "hero", - size: "lg", title: "피드백 콜아웃 타이틀", - blockButtonProps: { - children: "레이블", - disabled: false, - prefixIcon: "blank", - suffixIcon: "blank", - }, children: "콜아웃 텍스트의 최대 입력 글자수 제한은 없지만, 너무 많은 글자수는 핵심적인 내용을 효과적으로 전달하는 데에 적절치 않다는 점을 유의합니다.", }, render: args => ( - - {args.children} - +
+ + {args.children} + + + {args.children} + + + {args.children} + +
), }; diff --git a/packages/jds/src/components/Callout/Callout.style.ts b/packages/jds/src/components/Callout/Callout.style.ts index a96ac2e54..fd5f2b0dd 100644 --- a/packages/jds/src/components/Callout/Callout.style.ts +++ b/packages/jds/src/components/Callout/Callout.style.ts @@ -1,67 +1,54 @@ import styled from "@emotion/styled"; import { pxToRem } from "utils"; -import type { CalloutBasicDivProps, CalloutFeedbackDivProps, CalloutPProps } from "./Callout.types"; -import { - calloutBasicStylesMap, - calloutFeedbackStylesMap, - calloutSizeMap, -} from "./Callout.variants"; +import type { CalloutContainerProps, CalloutTextProps } from "./Callout.types"; +import { calloutContentSizeMap, calloutSizeMap } from "./Callout.variants"; -export const CalloutBasicDiv = styled.div( - ({ theme, hierarchy, variant, size }) => { - const style = calloutBasicStylesMap(theme)[variant][hierarchy]; - const border = variant === "hero" ? "none" : `1px solid ${style.border}`; - const borderLeft = - variant === "hero" ? `6px solid ${style.border}` : `1px solid ${style.border}`; - const borderRadius = variant === "hero" ? "none" : theme.scheme.semantic.radius[6]; +export const CalloutContainer = styled.div( + ({ theme, $size, $styleToken }) => { + const sizeVar = calloutSizeMap[$size]; return { width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", - padding: `${pxToRem(calloutSizeMap[size].paddingTopBottom)} ${pxToRem(calloutSizeMap[size].paddingLeftRight)}`, - gap: pxToRem(calloutSizeMap[size].gap), - border, - borderLeft, - borderRadius, - backgroundColor: style.bg, - color: style.color, + padding: `${pxToRem(sizeVar.paddingY)} ${pxToRem(sizeVar.paddingX)}`, + gap: pxToRem(sizeVar.gap), + borderRadius: theme.scheme.semantic.radius[6], + backgroundColor: $styleToken.bg, + color: $styleToken.color, + border: `1px solid ${$styleToken.border}`, + borderLeft: `1px solid ${$styleToken.border}`, }; }, ); -export const CalloutFeedbackDiv = styled.div( - ({ theme, hierarchy, variant, size }) => { - const style = calloutFeedbackStylesMap(theme)[variant][hierarchy]; - const border = variant === "hero" ? "none" : `1px solid ${style.border}`; - const borderLeft = - variant === "hero" ? `6px solid ${style.border}` : `1px solid ${style.border}`; - const borderRadius = variant === "hero" ? "none" : theme.scheme.semantic.radius[6]; +export const CalloutContentDiv = styled.div(({ $size }) => { + return { + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + gap: calloutContentSizeMap[$size].gap, + }; +}); - return { - width: "100%", - display: "flex", - flexDirection: "column", - alignItems: "flex-start", - padding: `${pxToRem(calloutSizeMap[size].paddingTopBottom)} ${pxToRem(calloutSizeMap[size].paddingLeftRight)}`, - gap: pxToRem(calloutSizeMap[size].gap), - border, - borderLeft, - borderRadius, - backgroundColor: style.bg, - color: style.color, - }; - }, -); +export const CalloutTitleP = styled.p(({ theme, $size }) => { + const tokenKey = calloutContentSizeMap[$size].title; + const textStyle = theme.textStyle[tokenKey as keyof typeof theme.textStyle]; -export const CalloutTitleP = styled.p(({ theme, size }) => { - const tokenKey = calloutSizeMap[size].title; - return theme.textStyle[tokenKey]; + return { + margin: 0, + ...textStyle, + }; }); -export const CalloutContentP = styled.p(({ theme, size }) => { - const tokenKey = calloutSizeMap[size].content; - return theme.textStyle[tokenKey]; +export const CalloutContentP = styled.p(({ theme, $size }) => { + const tokenKey = calloutContentSizeMap[$size].content; + const textStyle = theme.textStyle[tokenKey as keyof typeof theme.textStyle]; + + return { + margin: 0, + ...textStyle, + }; }); diff --git a/packages/jds/src/components/Callout/Callout.tsx b/packages/jds/src/components/Callout/Callout.tsx index deb552553..187a18b9f 100644 --- a/packages/jds/src/components/Callout/Callout.tsx +++ b/packages/jds/src/components/Callout/Callout.tsx @@ -1,65 +1,49 @@ +import { useTheme } from "@emotion/react"; + import { - CalloutBasicDiv, - CalloutContentP, + CalloutContainer, + CalloutContentDiv, CalloutTitleP, - CalloutFeedbackDiv, + CalloutContentP, } from "./Callout.style"; -import type { BasicCalloutProps, FeedbackCalloutProps } from "./Callout.types"; -import { - calloutBasicButtonStyleMap, - calloutButtonSizeMap, - calloutFeedbackButtonStyleMap, -} from "./Callout.variants"; +import type { CalloutProps } from "./Callout.types"; +import { getCalloutStyleToken } from "./Callout.variants"; +import { LabelButton } from "../Button/LabelButton"; -const CalloutBasic = ({ - variant = "hero", - hierarchy, +export const Callout = ({ size = "md", title, - blockButtonProps, + labelButtonProps, children, className, -}: BasicCalloutProps) => { - const buttonSize = calloutButtonSizeMap[size]; - const button = - blockButtonProps && calloutBasicButtonStyleMap(buttonSize, blockButtonProps)[hierarchy]; + ...props +}: CalloutProps) => { + const theme = useTheme(); + const styleToken = getCalloutStyleToken(theme, props); - return ( - - {title && {title}} - {children} - {button} - - ); -}; + const renderButton = () => { + if (!labelButtonProps) return null; -CalloutBasic.displayName = "Callout.Basic"; + if (props.feedback) { + return ; + } -const CalloutFeedback = ({ - variant = "hero", - feedback, - size = "md", - title, - blockButtonProps, - children, - className, -}: FeedbackCalloutProps) => { - const buttonSize = calloutButtonSizeMap[size]; - const button = - blockButtonProps && calloutFeedbackButtonStyleMap(buttonSize, blockButtonProps)[feedback]; + return ( + + ); + }; return ( - - {title && {title}} - {children} - {button} - + + + {title && {title}} + {children} + + {renderButton()} + ); }; - -CalloutFeedback.displayName = "Callout.Feedback"; - -export const Callout = { - Basic: CalloutBasic, - Feedback: CalloutFeedback, -}; diff --git a/packages/jds/src/components/Callout/Callout.types.ts b/packages/jds/src/components/Callout/Callout.types.ts index 2336bc121..12e63bc61 100644 --- a/packages/jds/src/components/Callout/Callout.types.ts +++ b/packages/jds/src/components/Callout/Callout.types.ts @@ -1,43 +1,42 @@ import type { ReactNode } from "react"; -import type { BaseBlockButtonProps } from "../Button/BlockButton/blockButton.types"; +import type { LabelButtonBasicProps } from "../Button/LabelButton"; -export type BasicHierarchy = "accent" | "primary" | "secondary"; +export type BasicHierarchy = "primary" | "secondary"; export type FeedbackHierarchy = "positive" | "destructive" | "notifying"; -export type CalloutVariant = "hero" | "hint"; -export type CalloutSize = "lg" | "md" | "sm" | "xs" | "2xs"; +export type CalloutSize = "lg" | "md" | "sm" | "xs"; export interface BaseCalloutProps { - variant?: CalloutVariant; size?: CalloutSize; - titleVisible?: boolean; - extraButtonVisible?: boolean; title?: string; - blockButtonProps?: Omit; - children: ReactNode; className?: string; + labelButtonProps?: Omit; + children: ReactNode; } -export interface BasicCalloutProps extends BaseCalloutProps { - hierarchy: BasicHierarchy; +export interface BasicCalloutModeProps extends BaseCalloutProps { + hierarchy?: BasicHierarchy; + feedback?: never; } -export interface FeedbackCalloutProps extends BaseCalloutProps { +export interface FeedbackCalloutModeProps extends BaseCalloutProps { feedback: FeedbackHierarchy; + hierarchy?: never; } -export interface CalloutBasicDivProps { - hierarchy: BasicHierarchy; - variant: CalloutVariant; - size: CalloutSize; +export type CalloutProps = BasicCalloutModeProps | FeedbackCalloutModeProps; + +export interface CalloutStyleToken { + bg: string; + border: string; + color: string; } -export interface CalloutFeedbackDivProps { - hierarchy: FeedbackHierarchy; - variant: CalloutVariant; - size: CalloutSize; +export interface CalloutContainerProps { + $size: CalloutSize; + $styleToken: CalloutStyleToken; } -export interface CalloutPProps { - size: CalloutSize; +export interface CalloutTextProps { + $size: CalloutSize; } diff --git a/packages/jds/src/components/Callout/Callout.variants.tsx b/packages/jds/src/components/Callout/Callout.variants.tsx index 5dc95a0a1..cf9acf932 100644 --- a/packages/jds/src/components/Callout/Callout.variants.tsx +++ b/packages/jds/src/components/Callout/Callout.variants.tsx @@ -1,184 +1,74 @@ import type { Theme } from "@emotion/react"; -import type { - BasicHierarchy, - CalloutSize, - CalloutVariant, - FeedbackHierarchy, -} from "./Callout.types"; -import type { BlockButtonSize } from "../Button/BlockButton"; -import { BlockButton } from "../Button/BlockButton"; -import type { BaseBlockButtonProps } from "../Button/BlockButton/blockButton.types"; +import type { BasicHierarchy, CalloutStyleToken, FeedbackHierarchy } from "./Callout.types"; -export const calloutButtonSizeMap: Record = { - lg: "sm", - md: "sm", - sm: "sm", - xs: "xs", - "2xs": "xs", +const basicStyles: Record CalloutStyleToken> = { + primary: theme => ({ + bg: theme.color.semantic.fill.subtler, + border: theme.color.semantic.stroke.alpha.assistive, + color: theme.color.semantic.object.bold, + }), + secondary: theme => ({ + bg: theme.color.semantic.fill.subtlest, + border: theme.color.semantic.stroke.alpha.subtle, + color: theme.color.semantic.object.bold, + }), }; -type BasicStyle = Record< - CalloutVariant, - Record ->; - -export const calloutBasicStylesMap = (theme: Theme): BasicStyle => ({ - hero: { - accent: { - bg: theme.color.semantic.accent.alpha.subtler, - border: theme.color.semantic.accent.neutral, - color: theme.color.semantic.accent.bold, - }, - primary: { - bg: theme.color.semantic.fill.subtler, - border: theme.color.semantic.stroke.bold, - color: theme.color.semantic.object.bolder, - }, - secondary: { - bg: theme.color.semantic.fill.subtlest, - border: theme.color.semantic.stroke.neutral, - color: theme.color.semantic.object.bold, - }, - }, - hint: { - accent: { - bg: theme.color.semantic.accent.alpha.inverse.subtlest, - border: theme.color.semantic.accent.alpha.subtle, - color: theme.color.semantic.accent.normal, - }, - primary: { - bg: theme.color.semantic.surface.deep, - border: theme.color.semantic.stroke.alpha.assistive, - color: theme.color.semantic.object.bold, - }, - secondary: { - bg: theme.color.semantic.surface.deep, - border: theme.color.semantic.stroke.alpha.subtler, - color: theme.color.semantic.object.normal, - }, - }, -}); +const feedbackStyles: Record CalloutStyleToken> = { + positive: theme => ({ + bg: theme.color.semantic.feedback.positive.alpha.subtlest, + border: theme.color.semantic.feedback.positive.alpha.assistive, + color: theme.color.semantic.feedback.positive.normal, + }), + destructive: theme => ({ + bg: theme.color.semantic.feedback.destructive.alpha.subtlest, + border: theme.color.semantic.feedback.destructive.alpha.assistive, + color: theme.color.semantic.feedback.destructive.normal, + }), + notifying: theme => ({ + bg: theme.color.semantic.feedback.notifying.alpha.subtlest, + border: theme.color.semantic.feedback.notifying.alpha.assistive, + color: theme.color.semantic.feedback.notifying.normal, + }), +}; -type FeedbackStyle = Record< - CalloutVariant, - Record ->; +export const getCalloutStyleToken = ( + theme: Theme, + props: { hierarchy?: BasicHierarchy; feedback?: FeedbackHierarchy }, +): CalloutStyleToken => { + if (props.feedback) return feedbackStyles[props.feedback](theme); -export const calloutFeedbackStylesMap = (theme: Theme): FeedbackStyle => ({ - hero: { - positive: { - bg: theme.color.semantic.feedback.positive.alpha.subtler, - border: theme.color.semantic.feedback.positive.neutral, - color: theme.color.semantic.feedback.positive.bold, - }, - destructive: { - bg: theme.color.semantic.feedback.destructive.alpha.subtler, - border: theme.color.semantic.feedback.destructive.neutral, - color: theme.color.semantic.feedback.destructive.bold, - }, - notifying: { - bg: theme.color.semantic.feedback.notifying.alpha.subtler, - border: theme.color.semantic.feedback.notifying.neutral, - color: theme.color.semantic.feedback.notifying.bold, - }, - }, - hint: { - positive: { - bg: theme.color.semantic.feedback.positive.alpha.subtlest, - border: theme.color.semantic.feedback.positive.alpha.subtler, - color: theme.color.semantic.feedback.positive.normal, - }, - destructive: { - bg: theme.color.semantic.feedback.destructive.alpha.subtlest, - border: theme.color.semantic.feedback.destructive.alpha.subtler, - color: theme.color.semantic.feedback.destructive.normal, - }, - notifying: { - bg: theme.color.semantic.feedback.notifying.alpha.subtlest, - border: theme.color.semantic.feedback.notifying.alpha.subtler, - color: theme.color.semantic.feedback.notifying.normal, - }, - }, -}); + const hierarchy = props.hierarchy || "secondary"; + return basicStyles[hierarchy](theme); +}; export const calloutSizeMap = { + lg: { paddingY: 16, paddingX: 20, gap: 16 }, + md: { paddingY: 16, paddingX: 20, gap: 16 }, + sm: { paddingY: 16, paddingX: 20, gap: 16 }, + xs: { paddingY: 12, paddingX: 16, gap: 12 }, +} as const; + +export const calloutContentSizeMap = { lg: { - paddingTopBottom: 16, - paddingLeftRight: 24, - gap: 16, - title: "semantic-textStyle-title-2", - content: "semantic-textStyle-body-lg-bold", - }, - md: { - paddingTopBottom: 16, - paddingLeftRight: 24, - gap: 16, + gap: 10, title: "semantic-textStyle-title-1", - content: "semantic-textStyle-body-md-bold", + content: "semantic-textStyle-body-lg-normal", }, - sm: { - paddingTopBottom: 16, - paddingLeftRight: 24, - gap: 16, + md: { + gap: 10, title: "semantic-textStyle-label-lg-bold", - content: "semantic-textStyle-body-sm-bold", + content: "semantic-textStyle-body-md-normal", }, - xs: { - paddingTopBottom: 12, - paddingLeftRight: 20, - gap: 12, + sm: { + gap: 6, title: "semantic-textStyle-label-md-bold", - content: "semantic-textStyle-body-xs-bold", + content: "semantic-textStyle-body-sm-normal", }, - "2xs": { - paddingTopBottom: 12, - paddingLeftRight: 20, - gap: 12, + xs: { + gap: 6, title: "semantic-textStyle-label-sm-bold", - content: "semantic-textStyle-body-2xs-bold", + content: "semantic-textStyle-body-2xs-normal", }, } as const; - -export const calloutBasicButtonStyleMap = ( - buttonSize: BlockButtonSize, - blockButtonProps: Omit, -) => ({ - accent: ( - - ), - primary: ( - - ), - secondary: ( - - ), -}); - -export const calloutFeedbackButtonStyleMap = ( - buttonSize: BlockButtonSize, - blockButtonProps: Omit, -) => ({ - notifying: ( - - ), - positive: , - destructive: ( - - ), -}); diff --git a/packages/jds/src/components/Callout/index.ts b/packages/jds/src/components/Callout/index.ts index 7aca9b740..dbd381392 100644 --- a/packages/jds/src/components/Callout/index.ts +++ b/packages/jds/src/components/Callout/index.ts @@ -1,2 +1 @@ export * from "./Callout"; -export type { BasicCalloutProps, FeedbackCalloutProps } from "./Callout.types"; diff --git a/packages/jds/src/components/Card/Card.stories.tsx b/packages/jds/src/components/Card/Card.stories.tsx index 7d6d9a793..644a8a391 100644 --- a/packages/jds/src/components/Card/Card.stories.tsx +++ b/packages/jds/src/components/Card/Card.stories.tsx @@ -68,10 +68,15 @@ type Story = StoryObj; export const CompoundBasic: Story = { name: "Basic 형태의 Compound 사용", - args: {}, - render: () => ( -
- + args: { + layout: "vertical", + variant: "plate", + interactive: false, + isDisabled: false, + }, + render: args => ( +
+ 타이틀 레이블 @@ -81,6 +86,7 @@ export const CompoundBasic: Story = { 캡션 레이블입니다. + {args.interactive && }
), diff --git a/packages/jds/src/components/Card/compound/CardContent.tsx b/packages/jds/src/components/Card/compound/CardContent.tsx index 82bef814d..6876aa7fe 100644 --- a/packages/jds/src/components/Card/compound/CardContent.tsx +++ b/packages/jds/src/components/Card/compound/CardContent.tsx @@ -1,16 +1,41 @@ -import { forwardRef } from "react"; +import { Children, forwardRef, isValidElement, type ReactNode } from "react"; import { useCardContext } from "../Card.context"; import type { CardContentProps } from "../Card.types"; -import { StyledCardContent } from "./compound.styles"; +import { StyledCardContent, StyledContentMain } from "./compound.styles"; + +interface ComponentWithDisplayName { + displayName?: string; +} + +const isTargetComponent = (child: ReactNode, targetNames: string[]): boolean => { + if (!isValidElement(child)) return false; + + const type = child.type; + const componentType = type as ComponentWithDisplayName; + + if (typeof type === "string") return false; + + return targetNames.includes(componentType.displayName || ""); +}; export const CardContent = forwardRef( ({ children, ...restProps }, ref) => { const { variant, layout } = useCardContext(); + const childrenArray = Children.toArray(children); + + const mainContentNodes: ReactNode[] = []; + const metaNodes: ReactNode[] = []; + + childrenArray.forEach(child => { + if (isTargetComponent(child, ["Card.Caption", "Card.Meta"])) metaNodes.push(child); + else mainContentNodes.push(child); + }); return ( - {children} + {mainContentNodes.length > 0 && {mainContentNodes}} + {metaNodes.length > 0 && {metaNodes}} ); }, diff --git a/packages/jds/src/components/Card/compound/CardMetaNudgeItem.tsx b/packages/jds/src/components/Card/compound/CardMetaNudgeItem.tsx deleted file mode 100644 index 22eb9f565..000000000 --- a/packages/jds/src/components/Card/compound/CardMetaNudgeItem.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { forwardRef } from "react"; - -import type { CardMetaNudgeItemProps } from "../Card.types"; -import { StyledCardMetaNudgeItem, StyledCardMetaNudgeItemLabel } from "./compound.styles"; - -export const CardMetaNudgeItem = forwardRef( - ({ label, children, ...restProps }, ref) => { - return ( - - {label && {label}} - {children} - - ); - }, -); - -CardMetaNudgeItem.displayName = "Card.MetaNudgeItem"; diff --git a/packages/jds/src/components/Card/compound/compound.styles.ts b/packages/jds/src/components/Card/compound/compound.styles.ts index efb05b282..3410278d0 100644 --- a/packages/jds/src/components/Card/compound/compound.styles.ts +++ b/packages/jds/src/components/Card/compound/compound.styles.ts @@ -240,16 +240,10 @@ const getOverlayPositionStyles = ( }; const getFocusVisibleStyles = ( - theme: Theme, - isEmptyPost: boolean, hasOffset: boolean, // eslint-disable-next-line @typescript-eslint/no-explicit-any interactionParams: Record, ): CSSObject => { - if (isEmptyPost) { - return shadow(theme, "raised"); - } - if (!hasOffset && interactionParams.focus.boxShadow) { return { boxShadow: interactionParams.focus.boxShadow }; } @@ -321,12 +315,22 @@ export const StyledCardContent = styled.div<{ ...getContentStyles(theme, $variant, $layout), })); +export const StyledContentMain = styled.div(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + alignSelf: "stretch", + width: "100%", + gap: theme.scheme.semantic.spacing[8], +})); + export const StyledCardMeta = styled.div(({ theme }) => ({ display: "flex", - alignItems: "center", + flexDirection: "column", + justifyContent: "center", padding: 0, alignSelf: "stretch", - gap: theme.scheme.semantic.spacing[16], + gap: theme.scheme.semantic.spacing[8], })); export const StyledCardMetaItem = styled("span", { @@ -415,9 +419,6 @@ export const StyledCardOverlay = styled("a", { borderRadius: borderRadius > 0 ? `${borderRadius}px` : 0, outline: "none", pointerEvents: $isDisabled ? "none" : "auto", - transition: isEmptyPost - ? `box-shadow ${theme.environment.semantic.duration[150]} ${theme.environment.semantic.motion.fluent}` - : undefined, "::before": { ...interactionParams.rest["::before"], transition: `opacity ${theme.environment.semantic.duration[150]} ${theme.environment.semantic.motion.fluent}`, @@ -428,7 +429,6 @@ export const StyledCardOverlay = styled("a", { }, ...(!$isDisabled && { "&:hover": { - ...(isEmptyPost && shadow(theme, "raised")), "::after": { ...interactionParams.hover["::after"], transition: `opacity ${theme.environment.semantic.duration[100]} ${theme.environment.semantic.motion.fluent}`, @@ -441,7 +441,7 @@ export const StyledCardOverlay = styled("a", { }, }, "&:focus-visible": { - ...getFocusVisibleStyles(theme, isEmptyPost, hasOffset, interactionParams), + ...getFocusVisibleStyles(hasOffset, interactionParams), "::before": { ...interactionParams.focus["::before"], ...(hasOffset && { opacity: 1 }), @@ -457,7 +457,7 @@ export const StyledHorizontalPostContentWrap = styled("div", { display: "flex", flexDirection: "column", flex: "1 0 0", - gap: theme.scheme.semantic.spacing[8], + gap: theme.scheme.semantic.spacing[16], })); export const StyledHorizontalCardPostLayout = styled("div", { diff --git a/packages/jds/src/components/Card/presets/Post.tsx b/packages/jds/src/components/Card/presets/Post.tsx index 10d75d39c..6c5186fa7 100644 --- a/packages/jds/src/components/Card/presets/Post.tsx +++ b/packages/jds/src/components/Card/presets/Post.tsx @@ -13,6 +13,7 @@ import { } from "../compound"; import { StyledCardOverlay, + StyledContentMain, StyledHorizontalCardPostLayout, StyledHorizontalPostContentWrap, } from "../compound/compound.styles"; @@ -51,8 +52,10 @@ const PostContent = ({ layout, image, title, body, author, date }: PostContentPr - {title} - {body} + + {title} + {body} + {author} {date} diff --git a/packages/jds/src/components/Code/Code.stories.tsx b/packages/jds/src/components/Code/Code.stories.tsx new file mode 100644 index 000000000..cb7298514 --- /dev/null +++ b/packages/jds/src/components/Code/Code.stories.tsx @@ -0,0 +1,68 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { FlexColumn, FlexRow } from "@storybook-utils/layout"; + +import { Code } from "./Code"; + +const CODE_TEXT = "inline code syntax"; + +const meta: Meta = { + title: "Components/Code", + component: Code, + parameters: { + layout: "centered", + docs: { + description: { + component: + "인라인 코드는 문장 흐름 안에서 특정 키워드, 값, 명령어, 짧은 코드 조각을 시각적으로 구분하기 위한 텍스트 컴포넌트입니다. 주요 내용의 이해를 보조하는 용도로, 문장을 끊지 않고 맥락 속에서 코드를 인지할 수 있도록 합니다.", + }, + }, + }, + tags: ["autodocs"], + argTypes: { + size: { + control: "radio", + options: ["lg", "md", "sm", "xs"], + description: "컴포넌트의 시각적 크기입니다.", + table: { + defaultValue: { summary: "md" }, + }, + }, + children: { + control: "text", + description: "코드 구문 표시 역할의 텍스트 내용입니다.", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: CODE_TEXT, + size: "md", + }, +}; + +export const AllSizes: Story = { + render: () => ( + + + xs + {CODE_TEXT} + + + sm + {CODE_TEXT} + + + md + {CODE_TEXT} + + + lg + {CODE_TEXT} + + + ), +}; diff --git a/packages/jds/src/components/Code/Code.styles.ts b/packages/jds/src/components/Code/Code.styles.ts new file mode 100644 index 000000000..1443725f7 --- /dev/null +++ b/packages/jds/src/components/Code/Code.styles.ts @@ -0,0 +1,44 @@ +import isPropValid from "@emotion/is-prop-valid"; +import type { Theme } from "@emotion/react"; +import styled from "@emotion/styled"; + +import type { CodeSize, CodeStyleProps } from "./Code.types"; + +export const codeTypographyMap: Record = { + lg: "semantic-textStyle-syntax-lg", + md: "semantic-textStyle-syntax-md", + sm: "semantic-textStyle-syntax-sm", + xs: "semantic-textStyle-syntax-xs", +}; + +export const getCodeColors = (theme: Theme) => { + return { + bg: theme.color.semantic.fill.subtlest, + border: theme.color.semantic.stroke.alpha.assistive, + color: theme.color.semantic.object.bold, + }; +}; + +export const StyledCode = styled("code", { + shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), +})(({ theme, $size }) => { + const codeTypographyKey = codeTypographyMap[$size]; + const codeColors = getCodeColors(theme); + const textStyle = theme.textStyle[codeTypographyKey as keyof typeof theme.textStyle]; + + return { + display: "inline-flex", + alignItems: "center", + + padding: `${theme.scheme.semantic.spacing[0]} ${theme.scheme.semantic.spacing[6]}`, + + borderRadius: theme.scheme.semantic.radius[4], + background: codeColors.bg, + + border: `1px solid ${codeColors.border}`, + color: codeColors.color, + + cursor: "text", + ...textStyle, + }; +}); diff --git a/packages/jds/src/components/Code/Code.tsx b/packages/jds/src/components/Code/Code.tsx new file mode 100644 index 000000000..25f2f9c5e --- /dev/null +++ b/packages/jds/src/components/Code/Code.tsx @@ -0,0 +1,12 @@ +import { StyledCode } from "./Code.styles"; +import type { CodeProps } from "./Code.types"; + +export const Code = ({ children, size = "md", className, ...restProps }: CodeProps) => { + return ( + + {children} + + ); +}; + +Code.displayName = "Code"; diff --git a/packages/jds/src/components/Code/Code.types.ts b/packages/jds/src/components/Code/Code.types.ts new file mode 100644 index 000000000..a6fbf06a1 --- /dev/null +++ b/packages/jds/src/components/Code/Code.types.ts @@ -0,0 +1,12 @@ +import type { HTMLAttributes, ReactNode } from "react"; + +export type CodeSize = "lg" | "md" | "sm" | "xs"; + +export interface CodeProps extends HTMLAttributes { + children: ReactNode; + size?: CodeSize; +} + +export interface CodeStyleProps { + $size: CodeSize; +} diff --git a/packages/jds/src/components/Dialog/Dialog.styles.ts b/packages/jds/src/components/Dialog/Dialog.styles.ts index e6d30a314..ce8714a7c 100644 --- a/packages/jds/src/components/Dialog/Dialog.styles.ts +++ b/packages/jds/src/components/Dialog/Dialog.styles.ts @@ -42,7 +42,7 @@ export const DialogOverlay = styled(DialogPrimitive.Overlay)(({ theme }) => { return { position: "fixed", inset: 0, - backgroundColor: theme.color.semantic.curtain.dim, + backgroundColor: theme.color.semantic.curtain.static.dim, '&[data-state="open"]': { animation: `${dialogOverlayFadeIn} ${theme.environment.semantic.duration[200]} ${theme.environment.semantic.motion.entrance}`, }, diff --git a/packages/jds/src/components/EmptyState/EmptyState.stories.tsx b/packages/jds/src/components/EmptyState/EmptyState.stories.tsx index 169c88768..c9070bc44 100644 --- a/packages/jds/src/components/EmptyState/EmptyState.stories.tsx +++ b/packages/jds/src/components/EmptyState/EmptyState.stories.tsx @@ -4,7 +4,7 @@ import { FlexColumn } from "@storybook-utils/layout"; import { EmptyState } from "./EmptyState"; const SAMPLE_BUTTON = "레이블"; -const SAMPLE_LABEL = "멀티 스테이트 레이블"; +const SAMPLE_LABEL = "엠티 스테이트 레이블"; const SAMPLE_BODY = "해당 엠티 스테이트에 대해 설명하거나 제안하는 콘텐츠 내용을 최대 세 줄 까지 입력할 수 있습니다."; @@ -43,6 +43,15 @@ const meta: Meta = { control: "text", description: "엠티 스테이트에 표시되는 아이콘 이름 (Icon 컴포넌트)", }, + primaryAction: { + control: "object", + description: "primary 버튼 설정 (children, onClick, disabled)", + }, + secondaryAction: { + control: "object", + description: + "secondary 버튼 설정 (children, onClick, disabled). primaryAction이 있을 때만 유효", + }, }, } satisfies Meta; diff --git a/packages/jds/src/components/EmptyState/emptyState.styles.ts b/packages/jds/src/components/EmptyState/emptyState.styles.ts index 5feb70f50..2faee3f9c 100644 --- a/packages/jds/src/components/EmptyState/emptyState.styles.ts +++ b/packages/jds/src/components/EmptyState/emptyState.styles.ts @@ -8,6 +8,7 @@ import { Label } from "../Label"; const variantStylesMap = { outlined: (theme: Theme): CSSObject => ({ + backgroundColor: "transparent", border: `1px dashed ${theme.color.semantic.stroke.alpha.assistive}`, }), alpha: (theme: Theme): CSSObject => ({ @@ -71,6 +72,7 @@ export const EmptyStateBodyTextP = styled("p", { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: 3, + margin: theme.scheme.semantic.spacing[0], overflow: "hidden", color: theme.color.semantic.object.assistive, textAlign: $layout === "vertical" ? "center" : "left", diff --git a/packages/jds/src/components/EmptyState/emptyState.types.ts b/packages/jds/src/components/EmptyState/emptyState.types.ts index 6e75e7a30..db2f7348c 100644 --- a/packages/jds/src/components/EmptyState/emptyState.types.ts +++ b/packages/jds/src/components/EmptyState/emptyState.types.ts @@ -5,7 +5,6 @@ import type { BlockButtonBasicProps } from "../Button/BlockButton"; type EmptyStateStyleVariant = { variant?: "empty" | "outlined" | "alpha"; layout?: "vertical" | "horizontal"; - button?: "primary" | "both"; }; type BlockButtonActionProps = Pick; diff --git a/packages/jds/src/components/FileItem/FileItem.stories.tsx b/packages/jds/src/components/FileItem/FileItem.stories.tsx index 444837f05..47f17d12d 100644 --- a/packages/jds/src/components/FileItem/FileItem.stories.tsx +++ b/packages/jds/src/components/FileItem/FileItem.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { FileItem } from "./FileItem"; -import { IconButton } from "../Button/IconButton"; const meta: Meta = { title: "Components/FileItem", @@ -35,7 +34,7 @@ const meta: Meta = { control: "text", description: "에러 메시지", }, - suffixButton: { + removeable: { description: "removable 파일에 대한 버튼 아이콘 컴포넌트", }, }, @@ -53,6 +52,7 @@ export const Default: Story = { hasError: false, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: false, }, render: args => (
@@ -63,6 +63,7 @@ export const Default: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} + removeable={args.removeable} />
), @@ -84,6 +85,7 @@ export const NonRemovable: Story = { hasError: false, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: false, }, render: args => (
@@ -94,6 +96,7 @@ export const NonRemovable: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} + removeable={args.removeable} />
), @@ -115,6 +118,7 @@ export const Removable: Story = { hasError: false, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: true, }, render: args => (
@@ -125,14 +129,7 @@ export const Removable: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} - suffixButton={ - alert("클릭")} - /> - } + removeable={args.removeable} />
), @@ -155,6 +152,7 @@ export const Readonly: Story = { hasError: false, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: true, }, render: args => (
@@ -165,14 +163,7 @@ export const Readonly: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} - suffixButton={ - alert("클릭")} - /> - } + removeable={args.removeable} />
), @@ -195,6 +186,7 @@ export const DisabledAndRemovable: Story = { hasError: false, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: true, }, render: args => (
@@ -205,14 +197,7 @@ export const DisabledAndRemovable: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} - suffixButton={ - alert("클릭")} - /> - } + removeable={args.removeable} />
), @@ -235,6 +220,7 @@ export const DisabledAndNonRemovable: Story = { hasError: false, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: false, }, render: args => (
@@ -245,15 +231,7 @@ export const DisabledAndNonRemovable: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} - suffixButton={ - alert("클릭")} - disabled - /> - } + removeable={args.removeable} />
), @@ -276,6 +254,7 @@ export const ErrorFile: Story = { hasError: true, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다.", + removeable: true, }, render: args => (
@@ -286,14 +265,7 @@ export const ErrorFile: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} - suffixButton={ - alert("클릭")} - /> - } + removeable={args.removeable} />
), @@ -315,6 +287,7 @@ export const OverflowTwoLines: Story = { hasError: true, errorMessage: "파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다. 파일 업로드 시 에러 메시지에 대해 작성합니다. 최대 두 줄 까지 작성할 수 있고, 초과할 시 말줄임(...) 표시합니다. ", + removeable: true, }, render: args => (
@@ -325,14 +298,7 @@ export const OverflowTwoLines: Story = { disabled={args.disabled} hasError={args.hasError} errorMessage={args.errorMessage} - suffixButton={ - alert("클릭")} - /> - } + removeable={args.removeable} />
), diff --git a/packages/jds/src/components/FileItem/FileItem.tsx b/packages/jds/src/components/FileItem/FileItem.tsx index 2891a5f46..424cc1979 100644 --- a/packages/jds/src/components/FileItem/FileItem.tsx +++ b/packages/jds/src/components/FileItem/FileItem.tsx @@ -10,6 +10,7 @@ import { FileSizeLabel, } from "./fileItem.styles"; import type { FileItemProps } from "./fileItem.types"; +import { IconButton } from "../Button/IconButton"; export const FileItem = forwardRef( ( @@ -20,7 +21,8 @@ export const FileItem = forwardRef( disabled = false, hasError = false, errorMessage, - suffixButton, + removeable = false, + onRemove, ...buttonRest }, ref, @@ -44,6 +46,8 @@ export const FileItem = forwardRef( textAlign='left' weight='subtle' $disabled={disabled} + $readonly={readonly} + $hasError={hasError} className='file-name' > {fileName} @@ -57,7 +61,14 @@ export const FileItem = forwardRef( > {fileSize} - {suffixButton} + {!readonly && removeable && ( + + )} {hasError && errorMessage && {errorMessage}} diff --git a/packages/jds/src/components/FileItem/fileItem.styles.ts b/packages/jds/src/components/FileItem/fileItem.styles.ts index 945128380..d8159180d 100644 --- a/packages/jds/src/components/FileItem/fileItem.styles.ts +++ b/packages/jds/src/components/FileItem/fileItem.styles.ts @@ -17,10 +17,10 @@ const interactionStyles = (theme: Theme, disabled: boolean, readonly: boolean): InteractionLayer({ theme, state, - variant: "accent", + variant: "normal", density: "assistive", fillColor: "default", - isReadonly: disabled, + isReadonly: disabled || readonly, offsetVertical: offset.vertical, offsetHorizontal: offset.horizontal, borderRadius, @@ -95,7 +95,7 @@ export const FileItemWrapButton = styled.button( flexDirection: "column", gap: theme.scheme.semantic.spacing[8], ...interaction, - cursor: $disabled ? "default" : "pointer", + cursor: $disabled || $readonly || $hasError ? "default" : "pointer", color: $hasError ? theme.color.semantic.object.bold : $disabled @@ -129,10 +129,14 @@ export const FileItemIcon = styled(Icon)(() => { }; }); -export const FileItemLabel = styled(Label)(({ $disabled }) => { +export const FileItemLabel = styled(Label)(({ + $disabled, + $readonly, + $hasError, +}) => { return { flex: "1", - cursor: $disabled ? "default" : "pointer", + cursor: $disabled || $readonly || $hasError ? "default" : "pointer", color: "inherit", }; }); diff --git a/packages/jds/src/components/FileItem/fileItem.types.ts b/packages/jds/src/components/FileItem/fileItem.types.ts index fe444ce81..3766076bb 100644 --- a/packages/jds/src/components/FileItem/fileItem.types.ts +++ b/packages/jds/src/components/FileItem/fileItem.types.ts @@ -1,4 +1,4 @@ -import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react"; export interface FileItemWrapButtonProps { $disabled: boolean; @@ -8,6 +8,7 @@ export interface FileItemWrapButtonProps { export interface FileItemLabelProps { $disabled: boolean; + $readonly: boolean; } export interface FileSizeProps { @@ -22,5 +23,6 @@ export interface FileItemProps extends ComponentPropsWithoutRef<"button"> { disabled?: boolean; hasError?: boolean; errorMessage?: ReactNode; - suffixButton?: ReactNode; + removeable?: boolean; + onRemove?: (e: MouseEvent) => void; } diff --git a/packages/jds/src/components/Hero/Hero.stories.tsx b/packages/jds/src/components/Hero/Hero.stories.tsx index ba28809b9..b1886e1ed 100644 --- a/packages/jds/src/components/Hero/Hero.stories.tsx +++ b/packages/jds/src/components/Hero/Hero.stories.tsx @@ -5,9 +5,6 @@ import { Hero } from "./Hero"; const meta = { title: "Components/Hero", component: Hero, - parameters: { - layout: "centered", - }, argTypes: { children: { control: "text", @@ -34,12 +31,6 @@ export const Test: Story = { size: "lg", textAlign: "left", children: "히어로", + style: { width: "500px", border: "1px solid red" }, }, - render: args => ( -
- - {args.children} - -
- ), }; diff --git a/packages/jds/src/components/Hero/Hero.tsx b/packages/jds/src/components/Hero/Hero.tsx index b8dec3a47..f6530a49a 100644 --- a/packages/jds/src/components/Hero/Hero.tsx +++ b/packages/jds/src/components/Hero/Hero.tsx @@ -4,7 +4,7 @@ import { forwardRef } from "react"; import type { HeroSize, HeroTextAlign } from "./Hero.style"; import { HeroDiv } from "./Hero.style"; -export interface HeroProps { +export interface HeroProps extends React.HTMLAttributes { size?: HeroSize; textAlign?: HeroTextAlign; color?: string; diff --git a/packages/jds/src/components/Image/Image.style.ts b/packages/jds/src/components/Image/Image.style.ts index 72ffc441a..995e6c798 100644 --- a/packages/jds/src/components/Image/Image.style.ts +++ b/packages/jds/src/components/Image/Image.style.ts @@ -59,7 +59,7 @@ export const ImageButton = styled("button", { }, "&:hover::after": { - backgroundColor: theme.color.semantic.curtain.dimmer, + backgroundColor: theme.color.semantic.curtain.static.dimmer, opacity: isReadonly ? 0 : 1, cursor: isReadonly ? "default" : "pointer", }, diff --git a/packages/jds/src/components/Input/InputArea/InputArea.stories.tsx b/packages/jds/src/components/Input/InputArea/InputArea.stories.tsx index fa90e869f..f34a26425 100644 --- a/packages/jds/src/components/Input/InputArea/InputArea.stories.tsx +++ b/packages/jds/src/components/Input/InputArea/InputArea.stories.tsx @@ -18,14 +18,6 @@ const meta = { defaultValue: { summary: "outlined" }, }, }, - layout: { - control: "select", - options: ["vertical", "horizontal"], - description: "레이블과 필드의 레이아웃 관계", - table: { - defaultValue: { summary: "vertical" }, - }, - }, validation: { control: "select", options: ["none", "error"], @@ -306,29 +298,6 @@ export const EmptyStyle: Story = { }, }; -export const HorizontalLayout: Story = { - args: { - label: "가로 레이아웃", - layout: "horizontal", - helperText: "레이블이 왼쪽에 위치합니다", - value: "", - onChange: () => {}, - }, - render: function Render(args) { - const [value, setValue] = useState(""); - return ( -
- setValue(e.target.value)} - placeholder='가로 레이아웃' - /> -
- ); - }, -}; - export const WithLabelIcon: Story = { args: { label: "추가 정보", diff --git a/packages/jds/src/components/Input/InputArea/InputArea.tsx b/packages/jds/src/components/Input/InputArea/InputArea.tsx index 3506747bb..ac35e4d9d 100644 --- a/packages/jds/src/components/Input/InputArea/InputArea.tsx +++ b/packages/jds/src/components/Input/InputArea/InputArea.tsx @@ -19,7 +19,6 @@ export const InputArea = forwardRef( ( { style = "outlined", - layout = "vertical", validation = "none", interaction = "enabled", label, @@ -42,9 +41,9 @@ export const InputArea = forwardRef( const hasHelperContainer = Boolean(helperText) || Boolean(maxLength); return ( - + {label && labelVisible && ( - + ( weight='normal' $disabled={isDisabled} $readOnly={isReadOnly} - $layout={layout} > {label} - {labelIcon && ( - - )} + {labelIcon && } )} diff --git a/packages/jds/src/components/Input/InputArea/inputArea.types.ts b/packages/jds/src/components/Input/InputArea/inputArea.types.ts index 03d8315ea..668b65833 100644 --- a/packages/jds/src/components/Input/InputArea/inputArea.types.ts +++ b/packages/jds/src/components/Input/InputArea/inputArea.types.ts @@ -11,7 +11,6 @@ export type InputAreaStatus = "placeholder" | "filled"; export interface InputAreaPublicProps extends Omit, "style"> { style?: InputAreaStyle; - layout?: InputAreaLayout; validation?: InputAreaValidation; interaction?: InputInteraction; label?: ReactNode; diff --git a/packages/jds/src/components/Input/SelectField/SelectField.stories.tsx b/packages/jds/src/components/Input/SelectField/SelectField.stories.tsx index 31623c228..fa6bc3d50 100644 --- a/packages/jds/src/components/Input/SelectField/SelectField.stories.tsx +++ b/packages/jds/src/components/Input/SelectField/SelectField.stories.tsx @@ -1,9 +1,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { FlexColumn, FlexRow, Label } from "@storybook-utils/layout"; import { BlockButton } from "components"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { SelectField } from "./index"; +import type { SelectFieldPublicProps } from "./selectField.types"; const meta = { title: "Components/Input/SelectField", @@ -20,14 +21,6 @@ const meta = { defaultValue: { summary: "outlined" }, }, }, - layout: { - control: "select", - options: ["vertical", "horizontal"], - description: "레이아웃 방향", - table: { - defaultValue: { summary: "vertical" }, - }, - }, validation: { control: "select", options: ["none", "error", "success"], @@ -48,9 +41,9 @@ const meta = { control: "text", description: "레이블 텍스트", }, - labelIcon: { - control: "text", - description: "레이블 옆에 표시할 아이콘 (IconName)", + isWithInfoIcon: { + control: "boolean", + description: "info 아이콘 표시 여부", }, helperText: { control: "text", @@ -81,30 +74,47 @@ const meta = { } satisfies Meta; export default meta; + type Story = StoryObj; +const Template = (args: SelectFieldPublicProps) => { + const [isOpen, setIsOpen] = useState(args.isOpen ?? false); + const [value, setValue] = useState(args.value ?? ""); + + useEffect(() => { + setIsOpen(args.isOpen!); + }, [args.isOpen]); + + useEffect(() => { + setValue(args.value); + }, [args.value]); + + const handleClick = () => { + const isNewState = !isOpen; + setIsOpen(isNewState); + args.onClick?.(); + }; + + return ( +
+ +
+ ); +}; + export const Default: Story = { args: { + label: "지역 선택", + placeholder: "거주 지역을 선택하세요", + helperText: "현재 거주하시는 지역을 선택해주세요", + isWithInfoIcon: true, value: "", + isOpen: false, + validation: "none", + interaction: "enabled", + style: "outlined", }, - render: function Render() { - const [isOpen, setIsOpen] = useState(false); - const [value] = useState(""); - - return ( -
- setIsOpen(!isOpen)} - button={확인} - /> -
- ); - }, + render: Template, parameters: { docs: { description: { @@ -179,38 +189,6 @@ export const WithValue: Story = { }, }; -export const WithLabelIcon: Story = { - args: { - value: "", - }, - render: function Render() { - const [isOpen, setIsOpen] = useState(false); - const [value] = useState(""); - - return ( -
- setIsOpen(!isOpen)} - /> -
- ); - }, - parameters: { - docs: { - description: { - story: - "**Label Icon 포함**\n\n레이블 옆에 아이콘을 추가할 수 있습니다. 어떤 IconName이든 사용 가능합니다.", - }, - }, - }, -}; - export const WithValidation: Story = { args: { value: "", @@ -484,57 +462,6 @@ export const AllStyles: Story = { }, }; -export const Layouts: Story = { - args: { - value: "", - }, - render: function Render() { - const [isOpen1, setIsOpen1] = useState(false); - const [isOpen2, setIsOpen2] = useState(false); - const [value1] = useState(""); - const [value2] = useState(""); - - return ( - -
- - setIsOpen1(!isOpen1)} - /> -
-
- - setIsOpen2(!isOpen2)} - /> -
- - ); - }, - parameters: { - docs: { - description: { - story: - "**레이아웃 방향**\n\n" + - "- `vertical`: 세로 방향 (기본값)\n" + - "- `horizontal`: 가로 방향", - }, - }, - }, -}; - export const AllVariants: Story = { args: { value: "", @@ -590,7 +517,7 @@ export const AllVariants: Story = { "- SelectField.Button의 button prop에는 BlockButton.Basic 사용을 권장합니다.\n" + '- size는 "md"로 고정하여 일관성을 유지합니다.\n\n' + "```tsx\n" + - 'import { SelectField, BlockButton } from "@ject/jds";\n' + + 'import { SelectField, BlockButton } from "@jects/jds";\n' + 'import { useState } from "react";\n\n' + "const [isOpen, setIsOpen] = useState(false);\n" + 'const [value, setValue] = useState("");\n\n' + diff --git a/packages/jds/src/components/Input/SelectField/SelectField.tsx b/packages/jds/src/components/Input/SelectField/SelectField.tsx index 58da06c3b..cbaf3fea8 100644 --- a/packages/jds/src/components/Input/SelectField/SelectField.tsx +++ b/packages/jds/src/components/Input/SelectField/SelectField.tsx @@ -85,11 +85,10 @@ export const SelectField = forwardRef( ( { style = "outlined", - layout = "vertical", validation = "none", interaction = "enabled", + isWithInfoIcon = false, label, - labelIcon, helperText, ...restProps }, @@ -98,14 +97,13 @@ export const SelectField = forwardRef( return ( - + diff --git a/packages/jds/src/components/Input/SelectField/SelectFieldButton.tsx b/packages/jds/src/components/Input/SelectField/SelectFieldButton.tsx index 6489e2e2d..2f9561482 100644 --- a/packages/jds/src/components/Input/SelectField/SelectFieldButton.tsx +++ b/packages/jds/src/components/Input/SelectField/SelectFieldButton.tsx @@ -19,7 +19,6 @@ export const SelectFieldButton = forwardRef + {label && ( - + {label} @@ -67,7 +65,7 @@ export const SelectFieldButton = forwardRef - + ; +const Template = (args: TagFieldPublicProps) => { + const [tags, setTags] = useState(args.tags || []); + + useEffect(() => { + setTags(args.tags || []); + }, [args.tags]); + + const handleTagsChange = (newTags: Tag[]) => { + setTags(newTags); + args.onTagsChange?.(newTags); + }; + + return ( +
+ +
+ ); +}; + export const Default: Story = { args: { - tags: [], - onTagsChange: () => {}, - }, - render: function Render() { - const [tags, setTags] = useState([ + label: "관심 기술 스택", + placeholder: "태그를 입력하고 Enter를 누르세요", + helperText: "Enter로 추가, Backspace로 삭제", + tags: [ { id: "1", label: "React" }, { id: "2", label: "TypeScript" }, - ]); - - return ( -
- 저장} - /> -
- ); + { id: "3", label: "Design System" }, + ], + validation: "none", + interaction: "enabled", + style: "outlined", + isWithInfoIcon: false, + onTagsChange: () => {}, }, + render: Template, parameters: { docs: { description: { @@ -119,7 +123,7 @@ export const Default: Story = { export const BasicTagField: Story = { args: { tags: [], - onTagsChange: () => {}, + onTagsChange: () => { }, }, render: function Render() { const [tags, setTags] = useState([ @@ -152,44 +156,10 @@ export const BasicTagField: Story = { }, }; -export const WithLabelIcon: Story = { - args: { - tags: [], - onTagsChange: () => {}, - }, - render: function Render() { - const [tags, setTags] = useState([ - { id: "1", label: "Frontend" }, - { id: "2", label: "Backend" }, - ]); - - return ( -
- -
- ); - }, - parameters: { - docs: { - description: { - story: - "**Label Icon 포함**\n\n레이블 옆에 아이콘을 추가할 수 있습니다. 어떤 IconName이든 사용 가능합니다.", - }, - }, - }, -}; - export const WithValidation: Story = { args: { tags: [], - onTagsChange: () => {}, + onTagsChange: () => { }, }, render: function Render() { const [tags1, setTags1] = useState([{ id: "1", label: "React" }]); @@ -253,7 +223,7 @@ export const WithValidation: Story = { export const States: Story = { args: { tags: [], - onTagsChange: () => {}, + onTagsChange: () => { }, }, render: function Render() { const [tags1, setTags1] = useState([ @@ -286,7 +256,7 @@ export const States: Story = { helperText='이 필드는 비활성화되어 있습니다' interaction='disabled' tags={tags2} - onTagsChange={() => {}} + onTagsChange={() => { }} /> {}} + onTagsChange={() => { }} /> ); @@ -315,7 +285,7 @@ export const States: Story = { export const ButtonWithValidation: Story = { args: { tags: [], - onTagsChange: () => {}, + onTagsChange: () => { }, }, render: function Render() { const [tags1, setTags1] = useState([{ id: "1", label: "React" }]); @@ -378,7 +348,7 @@ export const ButtonWithValidation: Story = { export const AllStyles: Story = { args: { tags: [], - onTagsChange: () => {}, + onTagsChange: () => { }, }, render: function Render() { const [tags1, setTags1] = useState([ @@ -482,64 +452,10 @@ export const AllStyles: Story = { }, }; -export const Layouts: Story = { - args: { - tags: [], - onTagsChange: () => {}, - }, - render: function Render() { - const [tags1, setTags1] = useState([ - { id: "1", label: "React" }, - { id: "2", label: "Vue" }, - ]); - const [tags2, setTags2] = useState([ - { id: "1", label: "Angular" }, - { id: "2", label: "Svelte" }, - ]); - - return ( - -
- - -
-
- - -
- - ); - }, - parameters: { - docs: { - description: { - story: - "**레이아웃 방향**\n\n" + - "- `vertical`: 세로 방향 (기본값)\n" + - "- `horizontal`: 가로 방향", - }, - }, - }, -}; - export const AllVariants: Story = { args: { tags: [], - onTagsChange: () => {}, + onTagsChange: () => { }, }, render: function Render() { const [basicTags, setBasicTags] = useState([ @@ -594,7 +510,7 @@ export const AllVariants: Story = { "- TagField.Button의 button prop에는 BlockButton.Basic 사용을 권장합니다.\n" + '- size는 "md"로 고정하여 일관성을 유지합니다.\n\n' + "```tsx\n" + - 'import { TagField, BlockButton } from "@ject/jds";\n' + + 'import { TagField, BlockButton } from "@jects/jds";\n' + 'import { useState } from "react";\n\n' + "const [tags, setTags] = useState([]);\n\n" + "// 기본\n" + diff --git a/packages/jds/src/components/Input/TagField/TagField.tsx b/packages/jds/src/components/Input/TagField/TagField.tsx index d1d5c239b..0a8e507c0 100644 --- a/packages/jds/src/components/Input/TagField/TagField.tsx +++ b/packages/jds/src/components/Input/TagField/TagField.tsx @@ -70,21 +70,27 @@ const TagFieldInput = forwardRef( clearInput(); clearSelection(); } + return; } if (e.key === "Backspace") { + if (inputValue.length > 0) return; + e.preventDefault(); + const action = TagFieldUtils.getBackspaceAction(inputValue, tags, selectedTagId); if (action === "remove") { const lastTagId = TagFieldUtils.getLastTagId(tags); + if (lastTagId) { onTagsChange(TagFieldUtils.removeTag(tags, lastTagId)); clearSelection(); } } else if (action === "select") { const lastTagId = TagFieldUtils.getLastTagId(tags); + if (lastTagId) { setSelectedTagId(lastTagId); } @@ -92,9 +98,7 @@ const TagFieldInput = forwardRef( return; } - if (selectedTagId) { - clearSelection(); - } + if (selectedTagId) clearSelection(); }, [ isComposing, @@ -126,14 +130,23 @@ const TagFieldInput = forwardRef( } }, [ref]); - const handleTagClick = useCallback( - (e: MouseEvent, tagId: string) => { - e.stopPropagation(); + const handleTagRemove = useCallback( + (tagId: string) => { onTagsChange(TagFieldUtils.removeTag(tags, tagId)); + if (ref && typeof ref !== "function" && ref.current) { + ref.current.focus(); + } }, - [tags, onTagsChange], + [tags, onTagsChange, ref], ); + const handleTagSelect = useCallback( + (e: MouseEvent, tagId: string) => { + e.stopPropagation(); + setSelectedTagId(tagId); + }, + [setSelectedTagId], + ); return ( ( tags={tags} hasTag={hasTag} selectedTagId={selectedTagId} - onTagClick={handleTagClick} + onTagSelect={handleTagSelect} + onTagRemove={handleTagRemove} /> ( ( { style = "outlined", - layout = "vertical", validation = "none", interaction = "enabled", + isWithInfoIcon = false, label, - labelIcon, helperText, ...restProps }, @@ -187,14 +200,13 @@ export const TagField = forwardRef( return ( - + diff --git a/packages/jds/src/components/Input/TagField/TagFieldButton.tsx b/packages/jds/src/components/Input/TagField/TagFieldButton.tsx index c9777b5c4..53507bcbd 100644 --- a/packages/jds/src/components/Input/TagField/TagFieldButton.tsx +++ b/packages/jds/src/components/Input/TagField/TagFieldButton.tsx @@ -30,7 +30,6 @@ export const TagFieldButton = forwardRef( ( { style = "outlined", - layout = "vertical", validation = "none", interaction = "enabled", label, @@ -142,9 +141,9 @@ export const TagFieldButton = forwardRef( ); return ( - + {label && ( - + ( weight='normal' $disabled={isDisabled} $readOnly={isReadOnly} - $layout={layout} > {label} @@ -161,7 +159,7 @@ export const TagFieldButton = forwardRef( )} - + ( size='xs' hierarchy='secondary' badgeStyle='alpha' + isMuted={isDisabled} withIcon={isInteractive} > {tag.label} diff --git a/packages/jds/src/components/Input/TagField/TagItem.tsx b/packages/jds/src/components/Input/TagField/TagItem.tsx index e9516a24e..3a6a5dd19 100644 --- a/packages/jds/src/components/Input/TagField/TagItem.tsx +++ b/packages/jds/src/components/Input/TagField/TagItem.tsx @@ -8,24 +8,39 @@ import { useFormField } from "../shared/FormFieldContext"; export interface TagItemProps { tag: Tag; isSelected: boolean; - onClick?: (e: MouseEvent, tagId: string) => void; + onSelect?: (e: MouseEvent, tagId: string) => void; + onRemove?: (tagId: string) => void; } -export const TagItem = ({ tag, isSelected, onClick }: TagItemProps) => { - const { isInteractive } = useFormField(); +export const TagItem = ({ tag, isSelected, onSelect, onRemove }: TagItemProps) => { + const { isInteractive, isDisabled } = useFormField(); + + const handleRemoveIconClick = (e: MouseEvent) => { + e.stopPropagation(); + + if (onRemove) onRemove(tag.id); + }; + + const handleBodyClick = (e: MouseEvent) => { + e.stopPropagation(); + + if (onSelect) onSelect(e, tag.id); + }; return ( onClick(e, tag.id) : undefined} + onClick={isInteractive ? handleBodyClick : undefined} + onMouseDown={e => e.preventDefault()} > {tag.label} diff --git a/packages/jds/src/components/Input/TagField/TagList.tsx b/packages/jds/src/components/Input/TagField/TagList.tsx index 4f67b24c9..0f5deba41 100644 --- a/packages/jds/src/components/Input/TagField/TagList.tsx +++ b/packages/jds/src/components/Input/TagField/TagList.tsx @@ -8,10 +8,17 @@ export interface TagListProps { tags: Tag[]; hasTag: boolean; selectedTagId: string | null; - onTagClick?: (e: MouseEvent, tagId: string) => void; + onTagSelect?: (e: MouseEvent, tagId: string) => void; + onTagRemove?: (tagId: string) => void; } -export const TagList = ({ tags, hasTag, selectedTagId, onTagClick }: TagListProps) => { +export const TagList = ({ + tags, + hasTag, + selectedTagId, + onTagSelect, + onTagRemove, +}: TagListProps) => { return ( {tags.map(tag => ( @@ -19,7 +26,8 @@ export const TagList = ({ tags, hasTag, selectedTagId, onTagClick }: TagListProp key={tag.id} tag={tag} isSelected={selectedTagId === tag.id} - onClick={onTagClick} + onSelect={onTagSelect} + onRemove={onTagRemove} /> ))} diff --git a/packages/jds/src/components/Input/TagField/tagField.types.ts b/packages/jds/src/components/Input/TagField/tagField.types.ts index b86ac2dbb..c16880956 100644 --- a/packages/jds/src/components/Input/TagField/tagField.types.ts +++ b/packages/jds/src/components/Input/TagField/tagField.types.ts @@ -10,13 +10,13 @@ export interface Tag { export interface TagFieldPublicProps extends - FieldPublicProps, + Omit, Omit< ComponentPropsWithoutRef<"input">, "value" | "onChange" | "defaultValue" | "style" | "type" > { label?: string; - labelIcon?: IconName; + isWithInfoIcon?: boolean; helperText?: string; tags: Tag[]; onTagsChange: (tags: Tag[]) => void; @@ -28,5 +28,6 @@ export interface TagFieldPublicProps export type TagFieldProps = TagFieldPublicProps; export interface TagFieldButtonProps extends TagFieldPublicProps { + labelIcon?: IconName; button: ReactNode; } diff --git a/packages/jds/src/components/Input/TextField/TextField.stories.tsx b/packages/jds/src/components/Input/TextField/TextField.stories.tsx index 905ca2012..f4d3b2294 100644 --- a/packages/jds/src/components/Input/TextField/TextField.stories.tsx +++ b/packages/jds/src/components/Input/TextField/TextField.stories.tsx @@ -1,8 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { FlexColumn, FlexRow, Label } from "@storybook-utils/layout"; import { BlockButton } from "components"; -import { useState } from "react"; +import { useEffect, useState } from "react"; +import type { TextFieldPublicProps } from "./index"; import { TextField } from "./index"; const meta = { @@ -20,14 +21,6 @@ const meta = { defaultValue: { summary: "outlined" }, }, }, - layout: { - control: "select", - options: ["vertical", "horizontal"], - description: "레이아웃 방향", - table: { - defaultValue: { summary: "vertical" }, - }, - }, validation: { control: "select", options: ["none", "error", "success"], @@ -48,9 +41,9 @@ const meta = { control: "text", description: "레이블 텍스트", }, - labelIcon: { - control: "text", - description: "레이블 옆에 표시할 아이콘 (IconName)", + isWithInfoIcon: { + control: "boolean", + description: "레이블 옆 Info 아이콘 표시 여부", }, helperText: { control: "text", @@ -66,26 +59,36 @@ const meta = { export default meta; type Story = StoryObj; +const Template = (args: TextFieldPublicProps) => { + const [value, setValue] = useState(args.value ?? ""); + + useEffect(() => { + setValue(args.value); + }, [args.value]); + + const handleChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + args.onChange?.(e); + }; + + return ( +
+ +
+ ); +}; + export const Default: Story = { args: { + label: "레이블", + placeholder: "플레이스 홀더 텍스트", + helperText: "헬퍼 메시지 레이블", + validation: "none", value: "", + isWithInfoIcon: false, onChange: () => {}, }, - render: function Render() { - const [value, setValue] = useState(""); - return ( -
- setValue(e.target.value)} - button={인증} - /> -
- ); - }, + render: Template, parameters: { docs: { description: { @@ -98,37 +101,10 @@ export const Default: Story = { }, }; -export const WithLabelIcon: Story = { - args: { - label: "이메일", - labelIcon: "information-line", - placeholder: "example@ject.com", - helperText: "유효한 이메일 주소를 입력해주세요", - value: "", - onChange: () => {}, - }, - render: function Render(args) { - const [value, setValue] = useState(""); - return ( -
- setValue(e.target.value)} /> -
- ); - }, - parameters: { - docs: { - description: { - story: - "**Label Icon 포함**\n\n레이블 옆에 아이콘을 추가할 수 있습니다. 어떤 IconName이든 사용 가능합니다.", - }, - }, - }, -}; - export const WithValidation: Story = { args: { value: "", - onChange: () => {}, + onChange: () => { }, }, render: function Render() { const [value1, setValue1] = useState(""); @@ -178,7 +154,7 @@ export const WithValidation: Story = { export const States: Story = { args: { value: "", - onChange: () => {}, + onChange: () => { }, }, render: function Render() { const [value1, setValue1] = useState(""); @@ -232,7 +208,7 @@ export const BasicTextField: Story = { placeholder: "이메일을 입력하세요", helperText: "유효한 이메일 주소를 입력해주세요", value: "", - onChange: () => {}, + onChange: () => { }, }, render: function Render(args) { const [value, setValue] = useState(""); @@ -257,7 +233,7 @@ export const BasicTextField: Story = { export const ButtonWithValidation: Story = { args: { value: "", - onChange: () => {}, + onChange: () => { }, }, render: function Render() { const [value1, setValue1] = useState(""); @@ -310,7 +286,7 @@ export const ButtonWithValidation: Story = { export const AllStyles: Story = { args: { value: "", - onChange: () => {}, + onChange: () => { }, }, render: function Render() { const [value1, setValue1] = useState(""); @@ -396,58 +372,10 @@ export const AllStyles: Story = { }, }; -export const Layouts: Story = { - args: { - value: "", - onChange: () => {}, - }, - render: function Render() { - const [value1, setValue1] = useState(""); - const [value2, setValue2] = useState(""); - - return ( - -
- - setValue1(e.target.value)} - /> -
-
- - setValue2(e.target.value)} - /> -
- - ); - }, - parameters: { - docs: { - description: { - story: - "**레이아웃 방향**\n\n" + - "- `vertical`: 세로 방향 (기본값)\n" + - "- `horizontal`: 가로 방향", - }, - }, - }, -}; - export const AllVariants: Story = { args: { value: "", - onChange: () => {}, + onChange: () => { }, }, render: function Render() { const [basicValue, setBasicValue] = useState(""); @@ -496,7 +424,7 @@ export const AllVariants: Story = { "- TextField.Button의 button prop에는 BlockButton.Basic 사용을 권장합니다.\n" + '- size는 "md"로 고정하여 일관성을 유지합니다.\n\n' + "```tsx\n" + - 'import { TextField, BlockButton } from "@ject/jds";\n' + + 'import { TextField, BlockButton } from "@jects/jds";\n' + 'import { useState } from "react";\n\n' + 'const [value, setValue] = useState("");\n\n' + "// 기본\n" + diff --git a/packages/jds/src/components/Input/TextField/TextField.tsx b/packages/jds/src/components/Input/TextField/TextField.tsx index 0ca5a1e1f..fafc8fd85 100644 --- a/packages/jds/src/components/Input/TextField/TextField.tsx +++ b/packages/jds/src/components/Input/TextField/TextField.tsx @@ -47,11 +47,10 @@ export const TextField = forwardRef( ( { style = "outlined", - layout = "vertical", validation = "none", interaction = "enabled", + isWithInfoIcon = false, label, - labelIcon, helperText, ...restProps }, @@ -60,14 +59,13 @@ export const TextField = forwardRef( return ( - + diff --git a/packages/jds/src/components/Input/TextField/TextFieldButton.tsx b/packages/jds/src/components/Input/TextField/TextFieldButton.tsx index 824961d1c..d24e55d82 100644 --- a/packages/jds/src/components/Input/TextField/TextFieldButton.tsx +++ b/packages/jds/src/components/Input/TextField/TextFieldButton.tsx @@ -17,7 +17,6 @@ export const TextFieldButton = forwardRef + {label && ( - + {label} @@ -53,7 +51,7 @@ export const TextFieldButton = forwardRef - + { label?: ReactNode; - labelIcon?: IconName; + isWithInfoIcon?: boolean; helperText?: string; value: string; onChange: (e: ChangeEvent) => void; @@ -15,5 +15,6 @@ export interface TextFieldPublicProps export type TextFieldProps = TextFieldPublicProps; export interface TextFieldButtonProps extends TextFieldPublicProps { + labelIcon?: IconName; button: ReactNode; } diff --git a/packages/jds/src/components/Input/index.ts b/packages/jds/src/components/Input/index.ts index 8bb49e555..427aa08d4 100644 --- a/packages/jds/src/components/Input/index.ts +++ b/packages/jds/src/components/Input/index.ts @@ -5,7 +5,6 @@ import { TextField } from "./TextField"; export type { InputStyle, - InputLayout, InputValidation, FieldPublicProps, FieldInputPublicProps, diff --git a/packages/jds/src/components/Input/input.types.ts b/packages/jds/src/components/Input/input.types.ts index 2639aa150..c5441aa74 100644 --- a/packages/jds/src/components/Input/input.types.ts +++ b/packages/jds/src/components/Input/input.types.ts @@ -2,15 +2,12 @@ import type { ComponentPropsWithoutRef } from "react"; export type InputStyle = "outlined" | "empty"; -export type InputLayout = "vertical" | "horizontal"; - export type InputValidation = "none" | "error" | "success"; export type InputInteraction = "enabled" | "disabled" | "readOnly"; export interface FieldPublicProps { style?: InputStyle; - layout?: InputLayout; validation?: InputValidation; interaction?: InputInteraction; } diff --git a/packages/jds/src/components/Input/shared/FormField.tsx b/packages/jds/src/components/Input/shared/FormField.tsx index 2b3f2cdcf..cc017a79d 100644 --- a/packages/jds/src/components/Input/shared/FormField.tsx +++ b/packages/jds/src/components/Input/shared/FormField.tsx @@ -15,14 +15,14 @@ interface FormFieldLabelProps { } export const FormFieldLabel = ({ children }: FormFieldLabelProps) => { - const { fieldId, label, labelIcon, layout, isDisabled, isReadOnly } = useFormField(); + const { fieldId, label, isWithInfoIcon, isDisabled, isReadOnly } = useFormField(); if (!label && !children) { return null; } return ( - + { weight='normal' $disabled={isDisabled} $readOnly={isReadOnly} - $layout={layout} > {children || label} - {labelIcon && ( - - )} + {isWithInfoIcon && } ); }; @@ -85,22 +77,20 @@ interface FormFieldProps extends Omit { export const FormField = ({ style, - layout, validation, interaction, label, - labelIcon, + isWithInfoIcon, helperText, children, }: FormFieldProps) => { return ( {children} diff --git a/packages/jds/src/components/Input/shared/FormFieldContext.tsx b/packages/jds/src/components/Input/shared/FormFieldContext.tsx index 2356202ae..56482fd27 100644 --- a/packages/jds/src/components/Input/shared/FormFieldContext.tsx +++ b/packages/jds/src/components/Input/shared/FormFieldContext.tsx @@ -1,20 +1,18 @@ import { createContext, useContext, useId, type ReactNode } from "react"; -import type { IconName } from "../../Icon/Icon.types"; -import type { InputStyle, InputLayout, InputValidation, InputInteraction } from "../input.types"; +import type { InputStyle, InputValidation, InputInteraction } from "../input.types"; import { getInteractionStates } from "../input.types"; export interface FormFieldContextValue { fieldId: string; style: InputStyle; - layout: InputLayout; validation: InputValidation; interaction: InputInteraction; isDisabled: boolean; isReadOnly: boolean; isInteractive: boolean; label?: ReactNode; - labelIcon?: IconName; + isWithInfoIcon?: boolean; helperText?: string; } @@ -30,22 +28,20 @@ export const useFormField = (): FormFieldContextValue => { export interface FormFieldProviderProps { style?: InputStyle; - layout?: InputLayout; validation?: InputValidation; interaction?: InputInteraction; label?: ReactNode; - labelIcon?: IconName; + isWithInfoIcon?: boolean; helperText?: string; children: ReactNode; } export const FormFieldProvider = ({ style = "outlined", - layout = "vertical", validation = "none", interaction = "enabled", label, - labelIcon, + isWithInfoIcon, helperText, children, }: FormFieldProviderProps) => { @@ -55,14 +51,13 @@ export const FormFieldProvider = ({ const value: FormFieldContextValue = { fieldId, style, - layout, validation, interaction, isDisabled, isReadOnly, isInteractive, label, - labelIcon, + isWithInfoIcon, helperText, }; diff --git a/packages/jds/src/components/Input/shared/field.styles.ts b/packages/jds/src/components/Input/shared/field.styles.ts index 480d7916c..edcf7a8dc 100644 --- a/packages/jds/src/components/Input/shared/field.styles.ts +++ b/packages/jds/src/components/Input/shared/field.styles.ts @@ -1,11 +1,10 @@ import isPropValid from "@emotion/is-prop-valid"; import type { Theme } from "@emotion/react"; import styled from "@emotion/styled"; -import { pxToRem } from "utils"; import { Icon } from "../../Icon"; import { Label } from "../../Label"; -import type { InputLayout, InputStyle, InputValidation } from "../input.types"; +import type { InputStyle, InputValidation } from "../input.types"; export const getLabelColor = (theme: Theme, disabled: boolean, readOnly: boolean): string => { if (disabled) { @@ -21,14 +20,14 @@ export const getLabelColor = (theme: Theme, disabled: boolean, readOnly: boolean export const getLabelIconColor = (theme: Theme, disabled: boolean, readOnly: boolean): string => { if (disabled) { - return theme.color.semantic.object.assistive; + return theme.color.semantic.object.neutral; } if (readOnly) { - return theme.color.semantic.object.alternative; + return theme.color.semantic.object.neutral; } - return theme.color.semantic.object.alternative; + return theme.color.semantic.accent.neutral; }; export const getHelperTextColor = ( @@ -66,24 +65,23 @@ export const getHelperTextColor = ( export const StyledFieldContainer = styled("div", { shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), -})<{ $layout: InputLayout }>(({ theme, $layout }) => ({ +})(({ theme }) => ({ display: "flex", padding: 0, width: "100%", - flexDirection: $layout === "vertical" ? "column" : "row", - justifyContent: $layout === "vertical" ? "center" : undefined, + flexDirection: "column", + justifyContent: "center", alignItems: "flex-start", - gap: - $layout === "vertical" ? theme.scheme.semantic.spacing[6] : theme.scheme.semantic.spacing[16], + gap: theme.scheme.semantic.spacing[6], })); export const StyledLabelContainer = styled("div", { shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), -})<{ $layout?: InputLayout; $disabled?: boolean; $readOnly?: boolean }>( - ({ theme, $layout, $disabled = false, $readOnly = false }) => ({ +})<{ $disabled?: boolean; $readOnly?: boolean }>( + ({ theme, $disabled = false, $readOnly = false }) => ({ display: "flex", padding: 0, - alignItems: $layout === "horizontal" ? "flex-start" : "center", + alignItems: "center", alignSelf: "stretch", gap: theme.scheme.semantic.spacing[4], color: getLabelColor(theme, $disabled, $readOnly), @@ -92,24 +90,15 @@ export const StyledLabelContainer = styled("div", { export const StyledLabelIcon = styled(Icon, { shouldForwardProp: prop => !prop.startsWith("$"), -})<{ $disabled?: boolean; $readOnly?: boolean }>( - ({ theme, $disabled = false, $readOnly = false }) => ({ - color: getLabelIconColor(theme, $disabled, $readOnly), - }), -); +})(({ theme }) => ({ + color: theme.color.semantic.accent.neutral, +})); export const StyledFieldLabel = styled(Label, { shouldForwardProp: prop => !prop.startsWith("$"), -})<{ $disabled: boolean; $readOnly: boolean; $layout?: InputLayout }>( - ({ theme, $disabled, $readOnly, $layout }) => ({ - color: getLabelColor(theme, $disabled, $readOnly), - ...($layout === "horizontal" && { - height: pxToRem(40), - minWidth: pxToRem(80), - maxWidth: pxToRem(120), - }), - }), -); +})<{ $disabled: boolean; $readOnly: boolean }>(({ theme, $disabled, $readOnly }) => ({ + color: getLabelColor(theme, $disabled, $readOnly), +})); export const StyledHelperText = styled(Label, { shouldForwardProp: prop => !prop.startsWith("$"), @@ -134,10 +123,8 @@ export const StyledInputRow = styled("div", { shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), })<{ $style?: InputStyle; - $layout?: InputLayout; -}>(({ theme, $style, $layout }) => { - const isEmptyVertical = $style === "empty" && $layout === "vertical"; - const gapValue = isEmptyVertical ? 20 : 12; +}>(({ theme, $style }) => { + const gapValue = $style === "empty" ? 20 : 12; return { display: "flex", diff --git a/packages/jds/src/components/Kbd/Kbd.stories.tsx b/packages/jds/src/components/Kbd/Kbd.stories.tsx new file mode 100644 index 000000000..13024c20f --- /dev/null +++ b/packages/jds/src/components/Kbd/Kbd.stories.tsx @@ -0,0 +1,104 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { FlexRow, FlexColumn } from "@storybook-utils/layout"; + +import { Kbd } from "./Kbd"; + +const meta = { + title: "Components/Kbd", + component: Kbd, + parameters: { + layout: "centered", + docs: { + description: { + component: + "키보드 키는 키보드 입력이나 단축키를 시각적으로 표현하기 위한 컴포넌트입니다. 특정 키 또는 키 조합을 명확히 인지할 수 있도록 표시하여, 사용자가 수행해야 할 입력 행동을 보조적으로 안내합니다.", + }, + }, + }, + tags: ["autodocs"], + argTypes: { + size: { + control: "radio", + options: ["lg", "md", "sm", "xs"], + description: "컴포넌트의 시각적 크기입니다.", + table: { + defaultValue: { summary: "md" }, + }, + }, + type: { + control: "radio", + options: ["key", "text", "function"], + description: "역할이나 유형에 대한 구분입니다.", + table: { + defaultValue: { summary: "key" }, + }, + }, + muted: { + control: "boolean", + description: "시각적으로 강조도가 낮춰졌는지의 여부입니다.", + table: { + defaultValue: { summary: "false" }, + }, + }, + children: { + control: "text", + description: "키에 들어갈 텍스트 또는 아이콘입니다.", + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "K", + size: "md", + type: "key", + muted: false, + }, +}; + +export const Types: Story = { + args: { + children: "kbd", + }, + render: () => ( + + + key + A + / + \ + + + text + ctrl + alt + tab + esc + + + function + ⌘ + ⌥ + ⇧ + ⌃ + ⌫ + ⏎ + + + ), +}; + +export const isMuted: Story = { + args: { + children: "kbd", + }, + render: () => ( + + A + / + + ), +}; diff --git a/packages/jds/src/components/Kbd/Kbd.style.ts b/packages/jds/src/components/Kbd/Kbd.style.ts new file mode 100644 index 000000000..85968c411 --- /dev/null +++ b/packages/jds/src/components/Kbd/Kbd.style.ts @@ -0,0 +1,57 @@ +import isPropValid from "@emotion/is-prop-valid"; +import type { Theme } from "@emotion/react"; +import styled from "@emotion/styled"; +import { pxToRem } from "utils"; + +import type { KbdSize, KbdStyleProps, KbdType } from "./Kbd.types"; +import { kbdSizeMap, typographyMap } from "./Kbd.variants"; + +export const getKbdTypography = (type: KbdType, size: KbdSize) => { + return typographyMap[type][size]; +}; + +export const getKbdStyles = (theme: Theme, isMuted: boolean) => { + if (isMuted) { + return { + border: theme.color.semantic.stroke.alpha.subtler, + color: theme.color.semantic.object.subtle, + }; + } + + return { + border: theme.color.semantic.stroke.alpha.subtle, + color: theme.color.semantic.object.alternative, + }; +}; + +export const StyledKbd = styled("kbd", { + shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), +})(({ theme, $size, $type, $isMuted }) => { + const kbdSize = kbdSizeMap[$size]; + const kbdStyles = getKbdStyles(theme, $isMuted); + const kbdTypography = getKbdTypography($type, $size); + + const textStyle = theme.textStyle[kbdTypography as keyof typeof theme.textStyle]; + + return { + boxSizing: "initial", + + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + + height: pxToRem(kbdSize.height), + minWidth: pxToRem(kbdSize.minWidth), + + padding: `0 ${pxToRem(kbdSize.paddingX)}`, + paddingTop: theme.scheme.semantic.spacing[1], + + borderRadius: theme.scheme.semantic.radius[4], + backgroundColor: theme.color.semantic.fill.subtlest, + + color: kbdStyles.color, + border: `1px solid ${kbdStyles.border}`, + + ...textStyle, + }; +}); diff --git a/packages/jds/src/components/Kbd/Kbd.tsx b/packages/jds/src/components/Kbd/Kbd.tsx new file mode 100644 index 000000000..f528d2d96 --- /dev/null +++ b/packages/jds/src/components/Kbd/Kbd.tsx @@ -0,0 +1,19 @@ +import { StyledKbd } from "./Kbd.style"; +import type { KbdProps } from "./Kbd.types"; + +export const Kbd = ({ + children, + size = "md", + type = "key", + muted = false, + className, + ...restProps +}: KbdProps) => { + return ( + + {children} + + ); +}; + +Kbd.displayName = "Kbd"; diff --git a/packages/jds/src/components/Kbd/Kbd.types.ts b/packages/jds/src/components/Kbd/Kbd.types.ts new file mode 100644 index 000000000..06cb779d4 --- /dev/null +++ b/packages/jds/src/components/Kbd/Kbd.types.ts @@ -0,0 +1,18 @@ +import type { HTMLAttributes, ReactNode } from "react"; + +export type KbdSize = "lg" | "md" | "sm" | "xs"; +export type KbdType = "key" | "text" | "function"; + +export interface KbdProps extends HTMLAttributes { + children: ReactNode; + size?: KbdSize; + type?: KbdType; + muted?: boolean; + "aria-label"?: string; +} + +export interface KbdStyleProps { + $size: KbdSize; + $type: KbdType; + $isMuted: boolean; +} diff --git a/packages/jds/src/components/Kbd/Kbd.variants.ts b/packages/jds/src/components/Kbd/Kbd.variants.ts new file mode 100644 index 000000000..5ff064567 --- /dev/null +++ b/packages/jds/src/components/Kbd/Kbd.variants.ts @@ -0,0 +1,35 @@ +import type { KbdSize, KbdType } from "./Kbd.types"; + +interface KbdSizeConfig { + height: number; + minWidth: number; + paddingX: number; +} + +export const kbdSizeMap: Record = { + lg: { height: 26, minWidth: 16, paddingX: 6 }, + md: { height: 24, minWidth: 14, paddingX: 6 }, + sm: { height: 22, minWidth: 11, paddingX: 6 }, + xs: { height: 20, minWidth: 9, paddingX: 6 }, +}; + +export const typographyMap: Record> = { + function: { + lg: "semantic-textStyle-label-lg-normal", + md: "semantic-textStyle-label-md-normal", + sm: "semantic-textStyle-label-sm-normal", + xs: "semantic-textStyle-label-xs-normal", + }, + key: { + lg: "semantic-textStyle-syntax-lg", + md: "semantic-textStyle-syntax-md", + sm: "semantic-textStyle-syntax-sm", + xs: "semantic-textStyle-syntax-xs", + }, + text: { + lg: "semantic-textStyle-syntax-lg", + md: "semantic-textStyle-syntax-md", + sm: "semantic-textStyle-syntax-sm", + xs: "semantic-textStyle-syntax-xs", + }, +}; diff --git a/packages/jds/src/components/Label/Label.stories.tsx b/packages/jds/src/components/Label/Label.stories.tsx index c82d8e25b..10c45b583 100644 --- a/packages/jds/src/components/Label/Label.stories.tsx +++ b/packages/jds/src/components/Label/Label.stories.tsx @@ -1,11 +1,18 @@ import styled from "@emotion/styled"; -import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Decorator, Meta, StoryObj } from "@storybook/react-vite"; import { Label } from "./Label"; +const withWidthDecorator: Decorator = Story => ( +
+ +
+); + const meta = { title: "Components/Label", component: Label, + decorators: [withWidthDecorator], parameters: { layout: "centered", }, diff --git a/packages/jds/src/components/Label/Label.style.ts b/packages/jds/src/components/Label/Label.style.ts index 7357077eb..1afc41636 100644 --- a/packages/jds/src/components/Label/Label.style.ts +++ b/packages/jds/src/components/Label/Label.style.ts @@ -11,11 +11,13 @@ export const TEXT_ALIGN_MAPPING = { 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 = ( @@ -27,7 +29,7 @@ export const getLabelTokenKey = ( export const LabelStyled = styled("label", { shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), -})(({ theme, $size, $textAlign, $weight }) => { +})(({ theme, $size, $textAlign, $weight, $cursor = "default" }) => { const tokenKey = getLabelTokenKey($size, $weight); const justifyContent = TEXT_ALIGN_MAPPING[$textAlign]; @@ -36,7 +38,7 @@ export const LabelStyled = styled("label", { justifyContent, alignItems: "center", color: theme.color.semantic.object.bold, - cursor: "default", + cursor: $cursor, ...theme.textStyle[tokenKey], }; }); diff --git a/packages/jds/src/components/Label/Label.tsx b/packages/jds/src/components/Label/Label.tsx index 5ac6e820f..db33868e6 100644 --- a/packages/jds/src/components/Label/Label.tsx +++ b/packages/jds/src/components/Label/Label.tsx @@ -16,7 +16,7 @@ import { PolymorphicForwardRef } from "@/utils/forwardRef"; //ToDo: Label의 기본 속성을 span 태그로 변경 export const Label = PolymorphicForwardRef<"label", LabelOwnProps>( - ({ as, size = "md", textAlign = "left", weight = "normal", children, ...restProps }, ref) => { + ({ as, size = "md", textAlign = "left", weight = "normal", cursor = 'default', children, ...restProps }, ref) => { const Component = as || ("label" as ElementType); return ( @@ -26,6 +26,7 @@ export const Label = PolymorphicForwardRef<"label", LabelOwnProps>( $size={size} $textAlign={textAlign} $weight={weight} + $cursor={cursor} {...restProps} > {children} diff --git a/packages/jds/src/components/Label/label.types.ts b/packages/jds/src/components/Label/label.types.ts index df004a555..f70eaf851 100644 --- a/packages/jds/src/components/Label/label.types.ts +++ b/packages/jds/src/components/Label/label.types.ts @@ -1,4 +1,4 @@ -import type { LabelSize, LabelTextAlign, LabelWeight } from "./Label.style"; +import type { LabelCursor, LabelSize, LabelTextAlign, LabelWeight } from "./Label.style"; /** * @remarks @@ -10,4 +10,5 @@ export type LabelOwnProps = { size?: LabelSize; textAlign?: LabelTextAlign; weight?: LabelWeight; + cursor?: LabelCursor; }; diff --git a/packages/jds/src/components/Menu/MenuItem/MenuItem.tsx b/packages/jds/src/components/Menu/MenuItem/MenuItem.tsx index bb3e32c50..cfe504ae0 100644 --- a/packages/jds/src/components/Menu/MenuItem/MenuItem.tsx +++ b/packages/jds/src/components/Menu/MenuItem/MenuItem.tsx @@ -1,9 +1,8 @@ import { forwardRef } from "react"; -import { StyledImage, StyledMenuItemAnchor, StyledMenuItemButton } from "./menuItem.styles"; +import { StyledImage, StyledMenuItemAnchor, StyledMenuItemButton, MenuItemLabel } from "./menuItem.styles"; import type { MenuItemAnchorProps, MenuItemButtonProps } from "./menuItem.types"; import { Icon } from "../../Icon"; -import { Label } from "../../Label"; const MenuItemButton = forwardRef( ( @@ -44,9 +43,9 @@ const MenuItemButton = forwardRef( $size={size} /> )} - + {suffixIconVisible && } ); @@ -93,9 +92,9 @@ const MenuItemAnchor = forwardRef( $size={size} /> )} - + {suffixIconVisible && } ); diff --git a/packages/jds/src/components/Menu/MenuItem/menuItem.styles.ts b/packages/jds/src/components/Menu/MenuItem/menuItem.styles.ts index 123c9ae3c..18accbed9 100644 --- a/packages/jds/src/components/Menu/MenuItem/menuItem.styles.ts +++ b/packages/jds/src/components/Menu/MenuItem/menuItem.styles.ts @@ -6,6 +6,7 @@ import { InteractionLayer } from "utils"; import type { StyledImageProps, StyledMenuItemProps } from "./menuItem.types"; import { menuItemColorMap, menuItemImageSizeMap } from "./menuItem.variants"; import { Image } from "../../Image"; +import { Label } from "../../Label"; const createInteractionStyles = ( theme: Theme, @@ -121,3 +122,7 @@ export const StyledImage = styled(Image)(({ $size }) => { width, }; }); + +export const MenuItemLabel = styled(Label)(() => ({ + color: "inherit", +})); diff --git a/packages/jds/src/components/Radio/Radio.stories.tsx b/packages/jds/src/components/Radio/Radio.stories.tsx new file mode 100644 index 000000000..b841ebf1a --- /dev/null +++ b/packages/jds/src/components/Radio/Radio.stories.tsx @@ -0,0 +1,188 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { FlexColumn, FlexRow } from "@storybook-utils/layout"; + +import { Radio } from "./Radio"; + +const meta: Meta = { + title: "Components/Radio", + component: Radio.Item, + parameters: { + layout: "centered", + }, + argTypes: { + radioSize: { + control: { type: "radio" }, + options: ["lg", "md", "sm", "xs"], + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const RadioBasicChecked: Story = { + render: () => ( + + + + + ), +}; + +export const RadioBasicDisabled: Story = { + render: () => ( + + RadioBasic을 비활성화합니다. + + + + + Radio.Root를 통해 그룹 전체를 비활성화합니다. + + + + + 레이블 + + + + 레이블 + + + + Radio.Item을 통해 아이템을 개별적으로 비활성화합니다. + + + + + 레이블 + + + + 레이블 + + + + 비활성화X + + + + + ), +}; + +export const RadioBasicSizes: Story = { + render: () => { + return ( + + + + + + + ); + }, +}; + +export const RadioStyle: Story = { + render: () => ( + + + + + + 레이블 + + + + 레이블 + + + + 레이블 + 서브레이블 + + + + 레이블 + 서브레이블 + + + + + + + + 레이블 + + + + 레이블 + + + + 레이블 + 서브레이블 + + + + 레이블 + 서브레이블 + + + + + ), +}; + +export const RadioAlign: Story = { + render: () => ( + + + + + 레이블 + + + + 레이블 + + + + 레이블 + + 서브레이블 + + + 레이블 + + 서브레이블 + + + + + + + 레이블 + + + + 레이블 + + + + 레이블 + + 서브레이블 + + + 레이블 + + 서브레이블 + + + + + ), +}; diff --git a/packages/jds/src/components/Radio/Radio.style.ts b/packages/jds/src/components/Radio/Radio.style.ts new file mode 100644 index 000000000..fafc60b5a --- /dev/null +++ b/packages/jds/src/components/Radio/Radio.style.ts @@ -0,0 +1,262 @@ +import styled from "@emotion/styled"; +import { Interaction, pxToRem } from "utils"; + +import type { RadioSize, RadioStyledProps, StyledLabelProps } from "./radio.types"; + +const RADIO_SIZE: Record< + RadioSize, + { + radioSize: number; + border: string; + } +> = { + lg: { + radioSize: 20, + border: "6", + }, + md: { + radioSize: 18, + border: "5", + }, + sm: { + radioSize: 16, + border: "5", + }, + xs: { + radioSize: 14, + border: "4", + }, +}; + +export const StyledRadioRootLabel = styled.label(({ theme, radioSize }) => { + const borderSize = RADIO_SIZE[radioSize] + .border as keyof typeof theme.scheme.semantic.strokeWeight; + + return { + display: "inline-flex", + position: "relative", + + [`input[type="radio"]:not(:disabled):checked + .visual`]: { + backgroundColor: theme.color.semantic.surface.static.standard, + border: `${theme.scheme.semantic.strokeWeight[borderSize]} solid ${theme.color.semantic.accent.neutral}`, + }, + + [`input[type="radio"]:not(:checked):disabled + .visual`]: { + backgroundColor: theme.color.semantic.surface.standard, + borderColor: theme.color.semantic.stroke.alpha.subtler, + cursor: "default", + ...Interaction(theme, "normal", "normal", "default", "disabled"), + }, + + [`input[type="radio"]:checked:disabled + .visual`]: { + backgroundColor: theme.color.semantic.fill.subtle, + border: `${theme.scheme.semantic.strokeWeight[borderSize]} solid ${theme.color.semantic.stroke.subtler}`, + cursor: "default", + ...Interaction(theme, "normal", "normal", "default", "disabled"), + }, + + [`input[type="radio"]:focus-visible + .visual`]: { + boxShadow: `0 0 0 3px ${theme.color.semantic.interaction.focus}`, + }, + }; +}); + +export const StyledRadioRootInput = styled.input({ + position: "absolute", + width: 1, + height: 1, + padding: 0, + margin: -1, + border: 0, + overflow: "hidden", + clipPath: "inset(50%)", + whiteSpace: "nowrap", +}); + +export const StyledRadioRootSpan = styled.span(({ theme, radioSize }) => { + const sizeValue = pxToRem(RADIO_SIZE[radioSize].radioSize); + + return { + borderRadius: theme.scheme.semantic.radius.max, + width: sizeValue, + height: sizeValue, + border: `1px solid ${theme.color.semantic.stroke.alpha.assistive}`, + backgroundColor: theme.color.semantic.surface.shallow, + cursor: "pointer", + ...Interaction(theme, "normal", "normal", "default"), + }; +}); + +import type { LabelSize } from "@/components/Label/Label.style"; + +interface RadioContainerProps { + radioSize: RadioSize; + isDisabled: boolean; + isAlignRight: boolean; + isStyleOutline: boolean; +} + +export const radioContainerSizeMap: Record< + RadioSize, + { + width: number; + height: number; + gap: string; + padding: string; + borderRadius: string; + } +> = { + lg: { + width: 13, + height: 8, + gap: "12", + padding: "12", + borderRadius: "6", + }, + md: { + width: 13, + height: 8, + gap: "10", + padding: "10", + borderRadius: "6", + }, + sm: { + width: 11, + height: 6, + gap: "8", + padding: "8", + borderRadius: "4", + }, + xs: { + width: 9, + height: 6, + gap: "8", + padding: "6", + borderRadius: "4", + }, +}; + +export const subLabelSizeMap: Record = { + lg: "md", + md: "sm", + sm: "xs", + xs: "xs", +}; + +export const StyledRadioItem = styled.div( + ({ theme, radioSize, isDisabled, isAlignRight, isStyleOutline }) => { + const rowGap = radioContainerSizeMap[radioSize] + .gap as keyof typeof theme.scheme.semantic.spacing; + const padding = radioContainerSizeMap[radioSize] + .padding as keyof typeof theme.scheme.semantic.spacing; + const borderRadius = radioContainerSizeMap[radioSize] + .borderRadius as keyof typeof theme.scheme.semantic.radius; + const interactionWidth = radioContainerSizeMap[radioSize].width; + const interactionHeight = radioContainerSizeMap[radioSize].height; + const borderColor = isDisabled + ? theme.color.semantic.stroke.alpha.subtler + : theme.color.semantic.stroke.alpha.subtle; + const checkedInteraction = Interaction( + theme, + "accent", + "assistive", + "default", + isDisabled ? "readonly" : "default", + ); + const nonCheckedInteraction = Interaction( + theme, + "normal", + "normal", + "default", + isDisabled ? "readonly" : "default", + ); + const addonInteraction = isStyleOutline + ? { + border: "inherit", + } + : { + width: `calc(100% + ${interactionWidth}px)`, + height: `calc(100% + ${interactionHeight}px)`, + transform: `translate(-${Math.floor(interactionWidth / 2) + 1}px , -${Math.floor(interactionHeight / 2)}px)`, + }; + + return { + display: "inline-grid", + gridTemplateColumns: "auto 1fr", + alignItems: "center", + "& > :nth-child(1)": { + gridColumn: 1, + gridRow: 1, + display: "flex", + alignItems: "center", + }, + "& > :nth-child(2)": { + gridColumn: 2, + gridRow: 1, + display: "flex", + alignItems: "center", + }, + "& > :nth-child(3)": { + gridColumn: isAlignRight ? "1 / span 2" : 2, + gridRow: 2, + }, + + gap: `${theme.scheme.semantic.spacing[6]} ${theme.scheme.semantic.spacing[rowGap]} `, + border: isStyleOutline ? `1px solid ${borderColor}` : "none", + borderRadius: theme.scheme.semantic.radius[borderRadius], + padding: isStyleOutline ? theme.scheme.semantic.spacing[padding] : "0", + ...nonCheckedInteraction, + + "::after": { + ...nonCheckedInteraction["::after"], + ...addonInteraction, + transition: `all ${theme.environment.semantic.duration[100]}ms ${theme.environment.semantic.motion.fluent}`, + pointerEvents: "none" as const, + }, + + "&:active::after": { + transition: "none", + }, + + '&:has(input[type="radio"]:checked)': { + ...checkedInteraction, + "::after": { + ...checkedInteraction["::after"], + ...addonInteraction, + pointerEvents: "none" as const, + }, + }, + + '&:has(input[type="radio"]:focus-visible)::before': { + ...addonInteraction, + boxShadow: `0 0 0 3px ${theme.color.semantic.interaction.focus}`, + content: '""', + position: "absolute", + inset: 0, + borderRadius: theme.scheme.semantic.radius[borderRadius], + }, + + 'input[type="radio"]:focus-visible + .visual': { + boxShadow: "none !important", + }, + }; + }, +); + +export const StyledLabel = styled("div")(({ theme, $size, $isDisabled }) => { + return { + ...theme.textStyle[`semantic-textStyle-label-${$size}-subtle`], + color: $isDisabled ? theme.color.semantic.object.subtle : theme.color.semantic.object.bold, + whiteSpace: "nowrap", + }; +}); + +export const StyledSubLabel = styled("div")(({ theme, $size, $isDisabled }) => { + return { + ...theme.textStyle[`semantic-textStyle-label-${subLabelSizeMap[$size]}-subtle`], + color: $isDisabled ? theme.color.semantic.object.subtle : theme.color.semantic.object.assistive, + position: "relative", + zIndex: 10, + whiteSpace: "nowrap", + }; +}); diff --git a/packages/jds/src/components/Radio/Radio.tsx b/packages/jds/src/components/Radio/Radio.tsx new file mode 100644 index 000000000..2ade400f6 --- /dev/null +++ b/packages/jds/src/components/Radio/Radio.tsx @@ -0,0 +1,148 @@ +import type { ChangeEvent } from "react"; +import { forwardRef } from "react"; + +import { + StyledRadioRootInput, + StyledRadioRootLabel, + StyledRadioRootSpan, + StyledLabel, + StyledSubLabel, + StyledRadioItem, +} from "./Radio.style"; +import type { + RadioBasicProps, + RadioItemProps, + RadioLabelProps, + RadioRootProps, + RadioSubLabelProps, +} from "./radio.types"; +import { RadioProvider, useRadioContext } from "./RadioContext"; +import { RadioGroupProvider, useRadioGroupContext } from "./RadioGroupContext"; + +const RadioRoot = ({ + radioSize = "md", + radioStyle = "empty", + radioAlign = "left", + disabled = false, + value, + onChange, + name, + children, +}: RadioRootProps) => { + return ( + + {children} + + ); +}; + +RadioRoot.displayName = "Radio.Root"; + +const RadioItem = forwardRef( + ( + { radioSize = "md", radioStyle = "empty", radioAlign = "left", disabled = false, children }, + ref, + ) => { + const groupContext = useRadioGroupContext(); + const size = groupContext?.radioSize || radioSize; + const isDisabled = groupContext?.isDisabled || disabled; + const isAlignRight = groupContext?.radioAlign + ? groupContext.radioAlign === "right" + : radioAlign === "right"; + const isStyleOutline = groupContext?.radioStyle + ? groupContext?.radioStyle === "outline" + : radioStyle === "outline"; + + return ( + + + {children} + + + ); + }, +); + +RadioItem.displayName = "Radio.Item"; + +const RadioBasic = forwardRef( + ({ radioSize = "md", value, checked, disabled, onChange, ...props }, ref) => { + const groupContext = useRadioGroupContext(); + const radioContext = useRadioContext(); + + const isChecked = groupContext?.value ? groupContext.value === value : checked; + const isBasicDisabled = radioContext?.isDisabled ? radioContext.isDisabled : disabled; + const groupName = groupContext?.name; + + const handleChange = (e: ChangeEvent) => { + if (groupContext?.onChange && value !== undefined) { + groupContext.onChange(String(value)); + } + onChange?.(e); + }; + + return ( + + + + ); + }, +); + +RadioBasic.displayName = "Radio.Basic"; + +const RadioLabel = forwardRef(({ children }, ref) => { + const rootContext = useRadioContext(); + return ( + + {children} + + ); +}); + +RadioLabel.displayName = "Radio.Label"; + +const RadioSubLabel = forwardRef(({ children }, ref) => { + const rootContext = useRadioContext(); + return ( + + {children} + + ); +}); + +RadioSubLabel.displayName = "Radio.SubLabel"; + +export const Radio = { + Root: RadioRoot, + Item: RadioItem, + Basic: RadioBasic, + Label: RadioLabel, + SubLabel: RadioSubLabel, +}; diff --git a/packages/jds/src/components/Radio/RadioContext.tsx b/packages/jds/src/components/Radio/RadioContext.tsx new file mode 100644 index 000000000..4ab891f6a --- /dev/null +++ b/packages/jds/src/components/Radio/RadioContext.tsx @@ -0,0 +1,18 @@ +import { createContext, useContext } from "react"; + +import type { RadioSize } from "./radio.types"; + +interface RadioContextValue { + radioSize?: RadioSize; + isDisabled?: boolean; +} + +const RadioContext = createContext(null); + +export const RadioProvider = RadioContext.Provider; + +export const useRadioContext = () => { + const context = useContext(RadioContext); + + return context; +}; diff --git a/packages/jds/src/components/Radio/RadioGroupContext.tsx b/packages/jds/src/components/Radio/RadioGroupContext.tsx new file mode 100644 index 000000000..f51290b93 --- /dev/null +++ b/packages/jds/src/components/Radio/RadioGroupContext.tsx @@ -0,0 +1,22 @@ +import { createContext, useContext } from "react"; + +import type { RadioAlign, RadioSize, RadioStyle } from "./radio.types"; + +interface RadioGroupContextValue { + radioSize?: RadioSize; + radioStyle?: RadioStyle; + radioAlign?: RadioAlign; + isDisabled?: boolean; + value?: string; + onChange?: (value: string) => void; + name?: string; +} + +const RadioGroupContext = createContext(null); + +export const RadioGroupProvider = RadioGroupContext.Provider; + +export const useRadioGroupContext = () => { + const context = useContext(RadioGroupContext); + return context; +}; diff --git a/packages/jds/src/components/Radio/index.ts b/packages/jds/src/components/Radio/index.ts new file mode 100644 index 000000000..5c21d1563 --- /dev/null +++ b/packages/jds/src/components/Radio/index.ts @@ -0,0 +1 @@ +export * from "./Radio"; diff --git a/packages/jds/src/components/Radio/preset/RadioContent.stories.tsx b/packages/jds/src/components/Radio/preset/RadioContent.stories.tsx new file mode 100644 index 000000000..cb17df0c2 --- /dev/null +++ b/packages/jds/src/components/Radio/preset/RadioContent.stories.tsx @@ -0,0 +1,190 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { FlexColumn, FlexRow } from "@storybook-utils/layout"; +import type { FormEvent } from "react"; +import { useState } from "react"; + +import { Radio } from "../Radio"; +import { RadioContent } from "./RadioContent"; + +const meta: Meta = { + title: "Components/RadioContent", + component: RadioContent.Left, + parameters: { + layout: "centered", + }, + argTypes: { + radioSize: { + control: { type: "radio" }, + options: ["lg", "md", "sm", "xs"], + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const RadioContentLeftStyles: Story = { + render: () => ( + + + + 레이블 + + + 레이블 + + + 레이블 + + + 레이블 + + + + + 레이블 + + + 레이블 + + + 레이블 + + + 레이블 + + + + ), +}; + +export const RadioContentLeftSubLabel: Story = { + render: () => ( + + + 레이블 + + + 레이블 + + + ), +}; + +export const RadioContentRightStyles: Story = { + render: () => ( + + + + 레이블 + + + 레이블 + + + 레이블 + + + 레이블 + + + + + 레이블 + + + 레이블 + + + 레이블 + + + 레이블 + + + + ), +}; + +export const RadioContentRightSubLabel: Story = { + render: () => ( + + + 레이블 + + + 레이블 + + + ), +}; + +export const SubLabelWithHyperlink: Story = { + render: () => ( + + 하이퍼링크  + + (네이버 바로가기) + + + } + > + 레이블 + + ), +}; + +export const ControlledRadio: Story = { + render: () => { + const [selected, setSelected] = useState("korea"); + + const items = ["korea", "japan", "us", "uk"]; + + return ( +
+ + {items.map(item => ( + + {item} + + ))} + +

결과: {selected}

+
+ ); + }, +}; + +export const UncontrolledRadio: Story = { + render: () => ( +
+
) => { + e.preventDefault(); + const form = e.currentTarget; + const formData = new FormData(form); + const value = formData.get("groupName") as string; + alert(`${value} 확인!`); + }} + > + + apple + + + banana + + + orange + + +
+
+ ), +}; diff --git a/packages/jds/src/components/Radio/preset/RadioContent.tsx b/packages/jds/src/components/Radio/preset/RadioContent.tsx new file mode 100644 index 000000000..dd0bb459b --- /dev/null +++ b/packages/jds/src/components/Radio/preset/RadioContent.tsx @@ -0,0 +1,69 @@ +import { forwardRef } from "react"; + +import { Radio } from "../Radio"; +import type { RadioContentProps } from "./radioContent.types"; + +const RadioContentLeft = forwardRef( + ( + { + radioSize = "md", + radioStyle = "empty", + disabled = false, + subLabelVisible = false, + subLabel = "", + children, + ...props + }, + ref, + ) => { + return ( + + + {children} + {subLabelVisible && {subLabel}} + + ); + }, +); + +RadioContentLeft.displayName = "RadioContent.Left"; + +const RadioContentRight = forwardRef( + ( + { + radioSize = "md", + radioStyle = "empty", + disabled = false, + subLabelVisible = false, + subLabel = "", + children, + ...props + }, + ref, + ) => { + return ( + + {children} + + {subLabelVisible && {subLabel}} + + ); + }, +); + +RadioContentRight.displayName = "RadioContent.Right"; + +export const RadioContent = { + Left: RadioContentLeft, + Right: RadioContentRight, +}; diff --git a/packages/jds/src/components/Radio/preset/radioContent.types.ts b/packages/jds/src/components/Radio/preset/radioContent.types.ts new file mode 100644 index 000000000..8aa89bd3f --- /dev/null +++ b/packages/jds/src/components/Radio/preset/radioContent.types.ts @@ -0,0 +1,15 @@ +import type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from "react"; + +import type { RadioSize } from "../radio.types"; + +export interface RadioContentProps extends Omit, "size"> { + radioSize?: RadioSize; + radioStyle?: "empty" | "outline"; + disabled?: boolean; + subLabelVisible?: boolean; + subLabel?: ReactNode; + children: ReactNode; + checked?: boolean; + onChange?: ChangeEventHandler; + defaultChecked?: boolean; +} diff --git a/packages/jds/src/components/Radio/radio.types.ts b/packages/jds/src/components/Radio/radio.types.ts new file mode 100644 index 000000000..d1139bc31 --- /dev/null +++ b/packages/jds/src/components/Radio/radio.types.ts @@ -0,0 +1,45 @@ +import type { ComponentPropsWithoutRef, ReactNode } from "react"; + +export type RadioSize = "lg" | "md" | "sm" | "xs"; +export type RadioStyle = "empty" | "outline"; +export type RadioAlign = "left" | "right"; + +export interface RadioRootProps { + radioSize?: RadioSize; + radioStyle?: RadioStyle; + radioAlign?: RadioAlign; + disabled?: boolean; + value?: string; + onChange?: (value: string) => void; + name?: string; + children: ReactNode; +} + +export interface RadioBasicProps extends ComponentPropsWithoutRef<"input"> { + radioSize?: RadioSize; +} + +export interface RadioStyledProps { + radioSize: RadioSize; +} + +export interface RadioItemProps extends ComponentPropsWithoutRef<"div"> { + radioSize?: RadioSize; + radioStyle?: RadioStyle; + radioAlign?: RadioAlign; + disabled?: boolean; + children: ReactNode; +} + +export interface StyledLabelProps { + $size: RadioSize; + $isDisabled: boolean; +} + +export interface RadioLabelProps { + children: ReactNode; +} + +export interface RadioSubLabelProps { + children: ReactNode; +} diff --git a/packages/jds/src/components/Select/Select.stories.tsx b/packages/jds/src/components/Select/Select.stories.tsx index 0886232c3..4479727c9 100644 --- a/packages/jds/src/components/Select/Select.stories.tsx +++ b/packages/jds/src/components/Select/Select.stories.tsx @@ -10,6 +10,14 @@ const meta = { layout: "centered", }, argTypes: { + variant: { + control: "radio", + options: ["list", "checkbox", "radio"], + description: "Select의 변형 (list, checkbox, radio)", + table: { + defaultValue: { summary: "list" }, + }, + }, size: { control: "select", options: ["md", "sm"], @@ -32,23 +40,31 @@ export const Default: Story = { args: { variant: "list", value: "seoul", - onChange: () => {}, + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("seoul"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("seoul"); + const [multiValue, setMultiValue] = useState(["seoul"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + 서울특별시 + 경기도 + 인천광역시 + 부산광역시 + 대구광역시
- 선택된 값: {value} + 선택된 값: {Array.isArray(currentValue) ? currentValue.join(", ") : currentValue}
); @@ -59,19 +75,27 @@ export const WithLabel: Story = { args: { variant: "list", value: "seoul", - onChange: () => {}, label: "지역 선택", + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("seoul"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("seoul"); + const [multiValue, setMultiValue] = useState(["seoul"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + 서울특별시 + 경기도 + 인천광역시 + 부산광역시
); @@ -82,18 +106,26 @@ export const SmallSize: Story = { args: { variant: "list", value: "option1", - onChange: () => {}, size: "sm", + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("option1"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("option1"); + const [multiValue, setMultiValue] = useState(["option1"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + Option 1 + Option 2 + Option 3
); @@ -104,27 +136,35 @@ export const WithCaption: Story = { args: { variant: "list", value: "pro", - onChange: () => {}, label: "요금제 선택", + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("pro"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("pro"); + const [multiValue, setMultiValue] = useState(["pro"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + Free - - + + Pro - - + + Team - - + + Enterprise - +
); @@ -135,24 +175,32 @@ export const WithBadge: Story = { args: { variant: "list", value: "pro", - onChange: () => {}, label: "요금제 선택", + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("pro"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("pro"); + const [multiValue, setMultiValue] = useState(["pro"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + Free Plan - - + + Pro Plan - - + + Team Plan - +
); @@ -163,23 +211,31 @@ export const WithDisabled: Story = { args: { variant: "list", value: "available1", - onChange: () => {}, label: "옵션 선택", + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("available1"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("available1"); + const [multiValue, setMultiValue] = useState(["available1"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + 사용 가능 1 + 비활성화됨 1 - - 사용 가능 2 - + + 사용 가능 2 + 비활성화됨 2 - +
); @@ -190,32 +246,40 @@ export const AllFeatures: Story = { args: { variant: "list", value: "standard", - onChange: () => {}, label: "서비스 플랜 선택", size: "md", + onChange: () => { }, }, - render: function Render() { - const [value, setValue] = useState("standard"); + render: function Render(args) { + const isMulti = args.variant === "checkbox"; + const [singleValue, setSingleValue] = useState("standard"); + const [multiValue, setMultiValue] = useState(["standard"]); + + const currentValue = isMulti ? multiValue : singleValue; + const handleChange = isMulti ? setMultiValue : setSingleValue; + + const Item = args.variant === "checkbox" ? Select.Checkbox : args.variant === "radio" ? Select.Radio : Select.List; return (
- + Free - - + + Standard - - + + Premium - - + + Enterprise (준비중) - +
- 선택된 플랜: {value} + 선택된 플랜: {Array.isArray(currentValue) ? currentValue.join(", ") : currentValue}
); diff --git a/packages/jds/src/components/Select/SelectCheckbox.tsx b/packages/jds/src/components/Select/SelectCheckbox.tsx index 528a4dea6..ebd01da9c 100644 --- a/packages/jds/src/components/Select/SelectCheckbox.tsx +++ b/packages/jds/src/components/Select/SelectCheckbox.tsx @@ -10,6 +10,7 @@ import { StyledSelectItemInputWrapper, } from "./select.styles"; import type { SelectCheckboxProps } from "./select.types"; +import { Checkbox } from "../Checkbox"; export const SelectCheckbox = forwardRef( ({ value, isDisabled = false, caption, children, ...restProps }, ref) => { @@ -37,17 +38,13 @@ export const SelectCheckbox = forwardRef( {...restProps} > - {/* TODO: Checkbox 컴포넌트가 구현되면 여기에 추가 */} - - ( +export const SelectList = forwardRef( ({ value, isDisabled = false, caption, badge, children, ...restProps }, ref) => { const { size, isSelected, onChange } = useSelectContext(); @@ -72,4 +72,4 @@ export const SelectLabel = forwardRef( }, ); -SelectLabel.displayName = "Select.Label"; +SelectList.displayName = "Select.List"; diff --git a/packages/jds/src/components/Select/SelectRadio.tsx b/packages/jds/src/components/Select/SelectRadio.tsx index bda20349f..2a4a00746 100644 --- a/packages/jds/src/components/Select/SelectRadio.tsx +++ b/packages/jds/src/components/Select/SelectRadio.tsx @@ -10,6 +10,7 @@ import { StyledSelectItemInputWrapper, } from "./select.styles"; import type { SelectRadioProps } from "./select.types"; +import { Radio } from "../Radio"; export const SelectRadio = forwardRef( ({ value, isDisabled = false, caption, children, ...restProps }, ref) => { @@ -37,14 +38,11 @@ export const SelectRadio = forwardRef( {...restProps} > - {/* TODO: Radio 컴포넌트가 구현되면 여기에 추가 */} - diff --git a/packages/jds/src/components/Select/index.ts b/packages/jds/src/components/Select/index.ts index 05152cac5..fa6365302 100644 --- a/packages/jds/src/components/Select/index.ts +++ b/packages/jds/src/components/Select/index.ts @@ -1,17 +1,17 @@ import { Select as SelectBase } from "./Select"; import { SelectCheckbox } from "./SelectCheckbox"; -import { SelectLabel } from "./SelectLabel"; +import { SelectList } from "./SelectList"; import { SelectRadio } from "./SelectRadio"; export const Select = Object.assign(SelectBase, { - Label: SelectLabel, + List: SelectList, Radio: SelectRadio, Checkbox: SelectCheckbox, }); export type { SelectProps, - SelectLabelProps, + SelectListProps, SelectRadioProps, SelectCheckboxProps, SelectVariant, diff --git a/packages/jds/src/components/Select/select.styles.ts b/packages/jds/src/components/Select/select.styles.ts index 0f4fcfa4c..cd58d9a3b 100644 --- a/packages/jds/src/components/Select/select.styles.ts +++ b/packages/jds/src/components/Select/select.styles.ts @@ -103,10 +103,10 @@ export const StyledSelectItem = styled("div", { const baseStyles: CSSObject = { ...restInteractionStyle, display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "flex-start", - gap: 0, + flexDirection: "row", + justifyContent: "flex-start", + alignItems: "center", + gap: theme.scheme.semantic.spacing[8], padding: getItemPaddingBySize(theme, $size), backgroundColor: "transparent", borderBottom: `1px solid ${theme.color.semantic.stroke.subtler}`, @@ -189,6 +189,7 @@ export const StyledSelectItemText = styled(Label, { return { color: getColor(), + cursor: "inherit", }; }); @@ -196,11 +197,13 @@ export const StyledSelectItemCaption = styled(Label, { shouldForwardProp: prop => !prop.startsWith("$"), })<{ $isDisabled: boolean }>(({ theme, $isDisabled }) => ({ color: $isDisabled ? theme.color.semantic.object.subtle : theme.color.semantic.object.assistive, + cursor: "inherit", })); export const StyledSelectItemBadge = styled(ContentBadge.Basic)({ position: "relative", zIndex: 1, + cursor: "inherit", }); //ToDo: CheckBox, Radio를 감싸는 임시 div이므로 직접 스타일링 수정 필요 diff --git a/packages/jds/src/components/Select/select.types.ts b/packages/jds/src/components/Select/select.types.ts index 9dbddef96..cfebfa6f8 100644 --- a/packages/jds/src/components/Select/select.types.ts +++ b/packages/jds/src/components/Select/select.types.ts @@ -19,7 +19,7 @@ export interface BaseSelectProps { children?: ReactNode; } -export interface SelectListProps +export interface SelectListVariantProps extends BaseSelectProps, Omit, "size" | "onChange"> { variant?: "list"; value: string; @@ -40,7 +40,10 @@ export interface SelectCheckboxVariantProps onChange: (value: string[]) => void; } -export type SelectProps = SelectListProps | SelectRadioVariantProps | SelectCheckboxVariantProps; +export type SelectProps = + | SelectListVariantProps + | SelectRadioVariantProps + | SelectCheckboxVariantProps; export interface BaseSelectItemProps { value: string; @@ -49,7 +52,7 @@ export interface BaseSelectItemProps { children?: ReactNode; } -export interface SelectLabelProps +export interface SelectListProps extends BaseSelectItemProps, Omit, "onClick"> { badge?: ReactNode; } diff --git a/packages/jds/src/components/Tab/tab.stories.tsx b/packages/jds/src/components/Tab/tab.stories.tsx index 61f637d1d..49b4c17d2 100644 --- a/packages/jds/src/components/Tab/tab.stories.tsx +++ b/packages/jds/src/components/Tab/tab.stories.tsx @@ -23,14 +23,6 @@ const meta = { control: "text", description: "초기 활성 탭의 value를 설정합니다.", }, - orientation: { - control: "radio", - options: ["horizontal", "vertical"], - description: "탭의 방향을 설정합니다.", - table: { - defaultValue: { summary: "horizontal" }, - }, - }, activationMode: { control: "radio", options: ["automatic", "manual"], @@ -49,6 +41,11 @@ const meta = { control: "boolean", description: "탭 항목이 늘려져있는지 여부 ", }, + asChild: { + table: { + disable: true + } + } }, args: { variant: "header", diff --git a/packages/jds/src/components/Tab/tab.styles.ts b/packages/jds/src/components/Tab/tab.styles.ts index 89bdda98c..d3664d2d6 100644 --- a/packages/jds/src/components/Tab/tab.styles.ts +++ b/packages/jds/src/components/Tab/tab.styles.ts @@ -79,6 +79,10 @@ export const StyledTabPrimitiveTrigger = styled( }, }, + "&:hover": { + ...interactionStyles.hoverStyle, + }, + "&:focus-visible": { ...interactionStyles.focusStyle, }, diff --git a/packages/jds/src/components/Table/ColorChip/ColorChip.styles.ts b/packages/jds/src/components/Table/ColorChip/ColorChip.styles.ts new file mode 100644 index 000000000..26f311a99 --- /dev/null +++ b/packages/jds/src/components/Table/ColorChip/ColorChip.styles.ts @@ -0,0 +1,14 @@ +import isPropValid from "@emotion/is-prop-valid"; +import styled from "@emotion/styled"; + +export const StyledColorChip = styled("div", { + shouldForwardProp: prop => isPropValid(prop) && !prop.startsWith("$"), +})<{ $color: string }>(({ theme, $color }) => { + return { + flexShrink: 0, + width: "1rem", + height: "1rem", + backgroundColor: $color, + border: `1px solid ${theme.color.semantic.stroke.subtle}`, + }; +}); diff --git a/packages/jds/src/components/Table/ColorChip/ColorChip.tsx b/packages/jds/src/components/Table/ColorChip/ColorChip.tsx new file mode 100644 index 000000000..c52cd135f --- /dev/null +++ b/packages/jds/src/components/Table/ColorChip/ColorChip.tsx @@ -0,0 +1,8 @@ +import { StyledColorChip } from "./ColorChip.styles"; +import type { ColorChipProps } from "./ColorChip.types"; + +export const ColorChip = ({ color, className, ...restProps }: ColorChipProps) => { + return ; +}; + +ColorChip.displayName = "ColorChip"; diff --git a/packages/jds/src/components/Table/ColorChip/ColorChip.types.ts b/packages/jds/src/components/Table/ColorChip/ColorChip.types.ts new file mode 100644 index 000000000..4b49960a5 --- /dev/null +++ b/packages/jds/src/components/Table/ColorChip/ColorChip.types.ts @@ -0,0 +1,5 @@ +import type { HTMLAttributes } from "react"; + +export interface ColorChipProps extends HTMLAttributes { + color: string; +} diff --git a/packages/jds/src/components/Table/Table.stories.tsx b/packages/jds/src/components/Table/Table.stories.tsx new file mode 100644 index 000000000..7862ef0c8 --- /dev/null +++ b/packages/jds/src/components/Table/Table.stories.tsx @@ -0,0 +1,179 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; + +import { Table } from "."; +import type { TableRowItemProps } from "./Table.types"; + +const meta: Meta = { + title: "Components/Table", + component: Table.RowItem, + parameters: { + layout: "padded", + docs: { + description: { + component: ` +테이블은 행과 열 구조를 통해 여러 항목의 정보를 체계적으로 비교·정리해 보여주는 데이터 표현 컴포넌트입니다. 값 간의 관계를 한눈에 파악할 수 있도록 하며, 목록, 비교, 상태 확인처럼 구조화된 정보를 전달하는 데 사용합니다.\n +Compound Component 패턴 기반으로 구현되었으며, \`Table.RowItem\`의 \`variant\` 속성을 통해 다양한 형태의 데이터를 표현합니다. + `, + }, + }, + }, + argTypes: { + variant: { + control: "radio", + options: ["label", "code", "badge"], + description: "셀의 렌더링 타입", + }, + children: { + control: "text", + description: "셀 내용 (텍스트)", + }, + description: { + control: "text", + description: "하단 부가 설명 (label, code 타입 전용)", + }, + color: { + control: "color", + description: "좌측 컬러 칩 색상 (label 타입 전용)", + }, + prefixIcon: { + control: "select", + description: "좌측 아이콘 (label 타입 전용)", + }, + hasDivider: { + control: "boolean", + description: "우측 구분선 표시 여부", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Basic: StoryObj = { + args: { + variant: "label", + children: "레이블", + description: "설명", + hasDivider: true, + }, + render: (args: TableRowItemProps) => ( + + + 레이블 (상태 확인 가능) + 레이블 + 레이블 + 레이블 + + + + {args.children} + 레이블 + 레이블 + 레이블 + + + + ), +}; + +export const VariantLabel: Story = { + render: () => ( + + + 기본 + 아이콘 표시 + 설명 & 컬러 칩 표시 + + + + 레이블 + + 레이블 + + + #FF5733 + + + + + ), +}; + +export const VariantCode: Story = { + render: () => ( + + + 단일 + 다수 + + + + + npm install react + + + {["react", "react-dom", "vite"]} + + + + + ), +}; + +export const VariantBadge: Story = { + render: () => ( + + + 상태 + 태그 + + + + Active + {["Design", "Develop", "QA"]} + + + + ), +}; + +export const ComplexTable: Story = { + render: () => ( + + + 레이블 + 레이블 + 레이블 + 레이블 + + + + + variant + + {["code", "code", "code"]} + + Variant Type + + 레이블 + + + + color + + code + + #21a2ff + + + {["레이블", "레이블", "레이블", "레이블", "레이블"]} + + + + + ), +}; diff --git a/packages/jds/src/components/Table/Table.types.ts b/packages/jds/src/components/Table/Table.types.ts new file mode 100644 index 000000000..2bb4bee12 --- /dev/null +++ b/packages/jds/src/components/Table/Table.types.ts @@ -0,0 +1,44 @@ +import type { HTMLAttributes, ReactNode } from "react"; + +import type { IconName } from "../Icon"; + +export type TableRowItemVariant = "label" | "code" | "badge"; + +export interface TableRowItemBaseProps extends HTMLAttributes { + hasDivider?: boolean; + children: ReactNode; +} + +export interface TableHeaderProps extends HTMLAttributes { + children: ReactNode; + width?: string | number; +} + +export interface TableRowProps extends HTMLAttributes { + children: ReactNode; +} + +export interface TableProps extends HTMLAttributes { + children: ReactNode; +} + +export interface TableRowItemLabelProps extends TableRowItemBaseProps { + variant: "label"; + description?: string; + prefixIcon?: IconName; + color?: string; +} + +export interface TableRowItemCodeProps extends TableRowItemBaseProps { + variant: "code"; + description?: string; +} + +export interface TableRowItemBadgeProps extends TableRowItemBaseProps { + variant: "badge"; +} + +export type TableRowItemProps = + | TableRowItemLabelProps + | TableRowItemCodeProps + | TableRowItemBadgeProps; diff --git a/packages/jds/src/components/Table/compound/Table.styles.ts b/packages/jds/src/components/Table/compound/Table.styles.ts new file mode 100644 index 000000000..a55383525 --- /dev/null +++ b/packages/jds/src/components/Table/compound/Table.styles.ts @@ -0,0 +1,84 @@ +import styled from "@emotion/styled"; + +import type { TableRowItemProps } from "../Table.types"; + +import { Label } from "@/components/Label"; + +export const StyledTableRoot = styled.table(({ theme }) => ({ + width: "100%", + + tableLayout: "fixed", + borderSpacing: 0, + + borderRadius: theme.scheme.semantic.radius[6], + border: `1px solid ${theme.color.semantic.stroke.subtle}`, + + background: theme.color.semantic.surface.standard, +})); + +export const StyledTableHeader = styled.thead(({ theme }) => ({ + background: theme.color.semantic.fill.subtlest, +})); + +export const StyledTableHeaderItem = styled.th(({ theme }) => ({ + padding: theme.scheme.semantic.spacing[12], + + borderBottom: `1px solid ${theme.color.semantic.stroke.subtle}`, + borderRight: `1px solid ${theme.color.semantic.stroke.subtle}`, + + "&:last-child": { + borderRight: "none", + }, +})); + +export const StyledTableRow = styled.tr(({ theme }) => ({ + background: theme.color.semantic.surface.standard, + + "&:last-of-type td": { + borderBottom: "none", + }, +})); + +export const StyledTableRowItem = styled.td>( + ({ theme, hasDivider }) => ({ + padding: `${theme.scheme.semantic.spacing[10]} ${theme.scheme.semantic.spacing[12]}`, + verticalAlign: "middle", + + borderBottom: `1px solid ${theme.color.semantic.stroke.subtle}`, + borderRight: hasDivider ? `1px solid ${theme.color.semantic.stroke.subtle}` : "none", + + "&:last-child": { + borderRight: "none", + }, + }), +); + +export const StyledTableItemContent = styled.div(({ theme }) => ({ + display: "flex", + flexDirection: "column", + justifyContent: "center", + gap: theme.scheme.semantic.spacing[6], +})); + +export const StyledTableItemTitle = styled.div(({ theme }) => ({ + display: "flex", + alignItems: "center", + gap: theme.scheme.semantic.spacing[6], +})); + +export const StyledDescription = styled(Label)(({ theme }) => ({ + color: theme.color.semantic.object.alternative, +})); + +export const StyledCodeWrapper = styled.div(({ theme }) => ({ + display: "flex", + alignItems: "center", + flexWrap: "wrap", + gap: theme.scheme.semantic.spacing[4], +})); + +export const StyledBadgeWrapper = styled.div(({ theme }) => ({ + display: "flex", + flexWrap: "wrap", + gap: theme.scheme.semantic.spacing[6], +})); diff --git a/packages/jds/src/components/Table/compound/TableBody.tsx b/packages/jds/src/components/Table/compound/TableBody.tsx new file mode 100644 index 000000000..813c417a9 --- /dev/null +++ b/packages/jds/src/components/Table/compound/TableBody.tsx @@ -0,0 +1,7 @@ +import type { TableRowProps } from "../Table.types"; + +export const TableBody = ({ children }: TableRowProps) => { + return {children}; +}; + +TableBody.displayName = "TableBody"; diff --git a/packages/jds/src/components/Table/compound/TableHeader.tsx b/packages/jds/src/components/Table/compound/TableHeader.tsx new file mode 100644 index 000000000..adbd64ea1 --- /dev/null +++ b/packages/jds/src/components/Table/compound/TableHeader.tsx @@ -0,0 +1,8 @@ +import type { TableHeaderProps } from "../Table.types"; +import { StyledTableHeader } from "./Table.styles"; + +export const TableHeader = ({ children }: Pick) => ( + {children} +); + +TableHeader.displayName = "TableHeader"; diff --git a/packages/jds/src/components/Table/compound/TableHeaderItem.tsx b/packages/jds/src/components/Table/compound/TableHeaderItem.tsx new file mode 100644 index 000000000..6a5f4fbf0 --- /dev/null +++ b/packages/jds/src/components/Table/compound/TableHeaderItem.tsx @@ -0,0 +1,12 @@ +import { StyledTableHeaderItem } from "./Table.styles"; +import type { TableHeaderProps } from "../Table.types"; + +import { Label } from "@/components/Label"; + +export const TableHeaderItem = ({ children }: TableHeaderProps) => ( + + + +); + +TableHeaderItem.displayName = "TableHeaderItem"; diff --git a/packages/jds/src/components/Table/compound/TableRoot.tsx b/packages/jds/src/components/Table/compound/TableRoot.tsx new file mode 100644 index 000000000..10f675a26 --- /dev/null +++ b/packages/jds/src/components/Table/compound/TableRoot.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from "react"; + +import { StyledTableRoot } from "./Table.styles"; +import type { TableProps } from "../Table.types"; + +export const TableRoot = forwardRef( + ({ children, ...restProps }, ref) => { + return ( + + {children} + + ); + }, +); + +TableRoot.displayName = "TableRoot"; diff --git a/packages/jds/src/components/Table/compound/TableRow.tsx b/packages/jds/src/components/Table/compound/TableRow.tsx new file mode 100644 index 000000000..be16700d5 --- /dev/null +++ b/packages/jds/src/components/Table/compound/TableRow.tsx @@ -0,0 +1,8 @@ +import { StyledTableRow } from "./Table.styles"; +import type { TableRowProps } from "../Table.types"; + +export const TableRow = ({ children, ...restProps }: TableRowProps) => { + return {children}; +}; + +TableRow.displayName = "TableRow"; diff --git a/packages/jds/src/components/Table/compound/TableRowItem.tsx b/packages/jds/src/components/Table/compound/TableRowItem.tsx new file mode 100644 index 000000000..a53cb496b --- /dev/null +++ b/packages/jds/src/components/Table/compound/TableRowItem.tsx @@ -0,0 +1,88 @@ +import { Children } from "react"; + +import type { + TableRowItemProps, + TableRowItemCodeProps, + TableRowItemLabelProps, + TableRowItemBaseProps, + TableRowItemBadgeProps, +} from "../Table.types"; +import { + StyledTableRowItem, + StyledTableItemContent, + StyledTableItemTitle, + StyledDescription, + StyledCodeWrapper, + StyledBadgeWrapper, +} from "./Table.styles"; +import { ColorChip } from "../ColorChip/ColorChip"; + +import { ContentBadge } from "@/components/Badge"; +import { Code } from "@/components/Code/Code"; +import { Icon } from "@/components/Icon"; +import { Label } from "@/components/Label"; + +const BadgeContent = ({ children }: Pick) => ( + + {Children.map(children, child => ( + + {child} + + ))} + +); + +const CodeContent = ({ children }: Pick) => ( + + {Children.map(children, child => ( + {child} + ))} + +); + +const LabelContent = ({ children, prefixIcon, color }: Omit) => ( + + {prefixIcon && +); + +const BadgeRowItem = ({ children }: TableRowItemBadgeProps) => ( + {children} +); + +const CodeRowItem = ({ children, description }: TableRowItemCodeProps) => ( + <> + {children} + {description && {description}} + +); + +const LabelRowItem = ({ children, description, prefixIcon, color }: TableRowItemLabelProps) => ( + <> + + {children} + + {description && {description}} + +); + +export const TableRowItem = (props: TableRowItemProps) => { + const { variant = "label", hasDivider = true, ...rest } = props; + + const renderContent = () => { + if (props.variant === "badge") return ; + if (props.variant === "code") return ; + + return ; + }; + + return ( + + {renderContent()} + + ); +}; + +TableRowItem.displayName = "TableRowItem"; diff --git a/packages/jds/src/components/Table/compound/index.ts b/packages/jds/src/components/Table/compound/index.ts new file mode 100644 index 000000000..8760cea58 --- /dev/null +++ b/packages/jds/src/components/Table/compound/index.ts @@ -0,0 +1,6 @@ +export { TableRoot } from "./TableRoot"; +export { TableHeader } from "./TableHeader"; +export { TableHeaderItem } from "./TableHeaderItem"; +export { TableBody } from "./TableBody"; +export { TableRow } from "./TableRow"; +export { TableRowItem } from "./TableRowItem"; diff --git a/packages/jds/src/components/Table/index.ts b/packages/jds/src/components/Table/index.ts new file mode 100644 index 000000000..06b485463 --- /dev/null +++ b/packages/jds/src/components/Table/index.ts @@ -0,0 +1,17 @@ +import { + TableRoot, + TableHeader, + TableHeaderItem, + TableBody, + TableRow, + TableRowItem, +} from "./compound"; + +export const Table = { + Root: TableRoot, + Header: TableHeader, + HeaderItem: TableHeaderItem, + Body: TableBody, + Row: TableRow, + RowItem: TableRowItem, +}; diff --git a/packages/jds/src/tokens/Tokens.stories.tsx b/packages/jds/src/tokens/Tokens.stories.tsx index 34a6366e0..275f2d5dd 100644 --- a/packages/jds/src/tokens/Tokens.stories.tsx +++ b/packages/jds/src/tokens/Tokens.stories.tsx @@ -313,23 +313,23 @@ export const Typography: Story = { >
- Hero 4 Typography (individual properties) + Hero 1 Typography (individual properties)
- Hero 3 Typography (individual properties) + Hero 2 Typography (individual properties)
diff --git a/packages/jds/src/tokens/globalStyles.ts b/packages/jds/src/tokens/globalStyles.ts index 6209c33a5..0045bde2b 100644 --- a/packages/jds/src/tokens/globalStyles.ts +++ b/packages/jds/src/tokens/globalStyles.ts @@ -1,5 +1,5 @@ // 자동 생성된 globalStyles - 수정 금지 -// 생성 시간: 11/21/2025, 5:05:04 PM +// 생성 시간: 2026. 3. 17. 오후 9:51:04 export const globalStyles = { ":root": { @@ -660,9 +660,9 @@ export const globalStyles = { "--semantic-surface-inverse-deep": "#1d1f28", "--semantic-surface-inverse-deeper": "#21232c", "--semantic-surface-inverse-deepest": "#252830", - "--semantic-curtain-bright": "#ffffff3a", - "--semantic-curtain-dim": "#191b243a", - "--semantic-curtain-dimmer": "#191b2470", + "--semantic-curtain-static-bright": "#ffffff3a", + "--semantic-curtain-static-dim": "#00000070", + "--semantic-curtain-static-dimmer": "#000000a0", "--semantic-fill-subtler": "#0e0e8519", "--semantic-fill-inverse-subtler": "#e2f0f814", "--semantic-fill-subtlest": "#5614ff07", @@ -692,10 +692,10 @@ export const globalStyles = { "--semantic-surface-shallower": "#ffffff", "--semantic-surface-shallowest": "#ffffff", "--semantic-surface-inverse-shallowest": "#393b44", - "--semantic-accent-subtler": "#e5e6ff", + "--semantic-accent-subtler": "#dee1ff", "--semantic-accent-bolder": "#001d83", "--semantic-accent-inverse-bolder": "#e5e6ff", - "--semantic-accent-inverse-subtler": "#001d83", + "--semantic-accent-inverse-subtler": "#00208d", "--semantic-theme-red-alpha-assistive": "#cb292d89", "--semantic-theme-red-alpha-subtle": "#cb292d5b", "--semantic-theme-red-alpha-subtler": "#cb292d28", @@ -909,20 +909,20 @@ export const globalStyles = { "--semantic-fill-inverse-normal": "#9c9da8", "--semantic-object-bolder": "#292c35", "--semantic-object-normal": "#5c5e68", - "--semantic-object-subtler": "#0e0e8519", - "--semantic-object-subtlest": "#5614ff07", + "--semantic-object-subtler": "#040b701e", + "--semantic-object-subtlest": "#111cb414", "--semantic-object-inverse-bolder": "#e7e7f3", "--semantic-object-inverse-normal": "#9c9da8", - "--semantic-object-inverse-subtler": "#e2f0f814", - "--semantic-object-inverse-subtlest": "#dfe1eb05", + "--semantic-object-inverse-subtler": "#e9ecf519", + "--semantic-object-inverse-subtlest": "#e1f3ec0f", "--semantic-object-static-bolder": "#292c35", "--semantic-object-static-normal": "#5c5e68", - "--semantic-object-static-subtler": "#0e0e8519", - "--semantic-object-static-subtlest": "#5614ff07", + "--semantic-object-static-subtler": "#040b701e", + "--semantic-object-static-subtlest": "#111cb414", "--semantic-object-static-inverse-bolder": "#e7e7f3", "--semantic-object-static-inverse-normal": "#9c9da8", - "--semantic-object-static-inverse-subtler": "#e2f0f814", - "--semantic-object-static-inverse-subtlest": "#dfe1eb05", + "--semantic-object-static-inverse-subtler": "#e9ecf519", + "--semantic-object-static-inverse-subtlest": "#e1f3ec0f", "--semantic-surface-static-shallowest": "#ffffff", "--semantic-surface-static-shallower": "#ffffff", "--semantic-surface-static-shallow": "#ffffff", @@ -982,8 +982,9 @@ export const globalStyles = { "--semantic-stroke-inverse-subtler": "#252830", "--semantic-stroke-alpha-subtler": "#111cb414", "--semantic-stroke-alpha-inverse-subtler": "#e1f3ec0f", - "--semantic-accent-subtlest": "#fbf8ff", - "--semantic-accent-inverse-subtlest": "#001463", + "--semantic-accent-subtlest": "#ececff", + "--semantic-accent-inverse-subtlest": "#001a78", + "--semantic-curtain-standard": "#ffffffa0", "--semantic-spacing-1": "1px", "--semantic-spacing-2": "2px", "--semantic-spacing-4": "4px", @@ -1065,7 +1066,6 @@ export const globalStyles = { "--semantic-spacing-128": "128px", "--semantic-spacing-144": "144px", "--semantic-margin-3xl": "48px", - "--semantic-margin-5xl": "72px", "--semantic-margin-xs": "16px", "--primitive-unit-3": "3", "--semantic-spacing-3": "3px", @@ -1084,42 +1084,41 @@ export const globalStyles = { "--semantic-position-12": "12", "--primitive-unit-5": "5", "--semantic-stroke-weight-5": "5px", + "--semantic-breakpoint-grid-container-min": "540", + "--semantic-breakpoint-grid-container-max": "556", + "--semantic-margin-4xl": "56px", + "--semantic-margin-5xl": "64px", + "--semantic-margin-6xl": "72px", "--primitive-typeface-hero": "Pretendard Variable", "--primitive-typeface-syntax": "D2Coding", - "--primitive-font-size-hero-4": "64px", - "--primitive-font-size-hero-3": "56px", "--primitive-font-size-hero-2": "48px", "--primitive-font-size-hero-1": "40px", "--primitive-font-size-title-3": "28px", "--primitive-font-size-title-2": "24px", "--primitive-font-size-title-1": "20px", "--primitive-font-size-title-4": "32px", - "--primitive-font-size-body-lg": "17px", - "--primitive-font-size-body-md": "16px", - "--primitive-font-size-body-sm": "15px", - "--primitive-font-size-body-xs": "14px", - "--primitive-font-size-body-2xs": "13px", + "--primitive-font-size-body-lg": "16px", + "--primitive-font-size-body-md": "15px", + "--primitive-font-size-body-sm": "14px", + "--primitive-font-size-body-xs": "13px", + "--primitive-font-size-body-2xs": "12px", "--primitive-font-size-label-lg": "16px", - "--primitive-font-size-label-md": "15px", - "--primitive-font-size-label-sm": "13px", - "--primitive-font-line-height-hero-4": "80px", - "--primitive-font-line-height-hero-3": "70px", + "--primitive-font-size-label-md": "14px", + "--primitive-font-size-label-sm": "12px", "--primitive-font-line-height-hero-2": "60px", "--primitive-font-line-height-hero-1": "50px", - "--primitive-font-line-height-title-4": "41.599998474121094px", - "--primitive-font-line-height-title-3": "36.400001525878906px", - "--primitive-font-line-height-title-2": "31.200000762939453px", + "--primitive-font-line-height-title-4": "42px", + "--primitive-font-line-height-title-3": "36px", + "--primitive-font-line-height-title-2": "31px", "--primitive-font-line-height-title-1": "26px", - "--primitive-font-line-height-label-lg": "24px", - "--primitive-font-line-height-label-md": "22.5px", - "--primitive-font-line-height-label-sm": "19.5px", - "--primitive-font-line-height-body-lg": "27.200000762939453px", - "--primitive-font-line-height-body-md": "25.600000381469727px", - "--primitive-font-line-height-body-sm": "24px", - "--primitive-font-line-height-body-xs": "22.399999618530273px", - "--primitive-font-line-height-body-2xs": "20.799999237060547px", - "--primitive-font-letter-spacing-hero-4": "-1.9800000190734863px", - "--primitive-font-letter-spacing-hero-3": "-1.5700000524520874px", + "--primitive-font-line-height-label-lg": "22px", + "--primitive-font-line-height-label-md": "20px", + "--primitive-font-line-height-label-sm": "18px", + "--primitive-font-line-height-body-lg": "26px", + "--primitive-font-line-height-body-md": "24px", + "--primitive-font-line-height-body-sm": "22px", + "--primitive-font-line-height-body-xs": "21px", + "--primitive-font-line-height-body-2xs": "19px", "--primitive-font-letter-spacing-hero-2": "-1.2000000476837158px", "--primitive-font-letter-spacing-hero-1": "-0.8799999952316284px", "--primitive-font-letter-spacing-title-4": "-0.6399999856948853px", @@ -1127,345 +1126,345 @@ export const globalStyles = { "--primitive-font-letter-spacing-title-2": "-0.3400000035762787px", "--primitive-font-letter-spacing-title-1": "-0.2199999988079071px", "--primitive-font-letter-spacing-label-lg": "-0.1599999964237213px", - "--primitive-font-letter-spacing-label-md": "-0.11999999731779099px", + "--primitive-font-letter-spacing-label-md": "-0.10999999940395355px", "--primitive-font-letter-spacing-label-sm": "-0.07999999821186066px", "--primitive-font-letter-spacing-body-lg": "0.017000000923871994px", "--primitive-font-letter-spacing-body-md": "0.04500000178813934px", "--primitive-font-letter-spacing-body-sm": "0.0560000017285347px", "--primitive-font-letter-spacing-body-xs": "0.07000000029802322px", "--primitive-font-letter-spacing-body-2xs": "0.07999999821186066px", - "--primitive-font-weight-hero-normal": "660", - "--primitive-font-weight-title-normal": "570", - "--primitive-font-weight-label-normal": "450", + "--primitive-font-weight-hero-normal": "645", + "--primitive-font-weight-title-normal": "575", + "--primitive-font-weight-label-normal": "480", "--primitive-font-weight-body-normal": "400", - "--primitive-font-weight-hero-bold": "700", - "--primitive-font-weight-title-bold": "620", - "--primitive-font-weight-label-bold": "500", - "--primitive-font-weight-label-subtle": "400", - "--primitive-font-weight-body-bold": "430", + "--primitive-font-weight-hero-bold": "680", + "--primitive-font-weight-title-bold": "610", + "--primitive-font-weight-label-bold": "520", + "--primitive-font-weight-label-subtle": "440", + "--primitive-font-weight-body-bold": "440", "--primitive-font-size-syntax-lg": "16px", - "--primitive-font-size-syntax-md": "15px", + "--primitive-font-size-syntax-md": "14px", "--primitive-font-size-syntax-sm": "13px", "--primitive-font-weight-syntax-normal": "400", - "--primitive-font-line-height-syntax-lg": "27.200000762939453px", - "--primitive-font-line-height-syntax-md": "25.5px", - "--primitive-font-line-height-syntax-sm": "22.100000381469727px", + "--primitive-font-line-height-syntax-lg": "22px", + "--primitive-font-line-height-syntax-md": "20px", + "--primitive-font-line-height-syntax-sm": "18px", "--primitive-typeface-title": "Pretendard Variable", "--primitive-typeface-label": "Pretendard Variable", "--primitive-typeface-body": "Pretendard Variable", - "--primitive-font-size-label-xs": "12px", - "--primitive-font-line-height-label-xs": "18px", + "--primitive-font-size-label-xs": "11px", + "--primitive-font-line-height-label-xs": "16px", "--primitive-font-letter-spacing-label-xs": "-0.05000000074505806px", "--primitive-font-size-syntax-xs": "12px", - "--primitive-font-line-height-syntax-xs": "20.399999618530273px", + "--primitive-font-line-height-syntax-xs": "16px" }, "semantic-textStyle-hero-4": { - fontSize: "var(--primitive-font-size-hero-4)", - lineHeight: "var(--primitive-font-line-height-hero-4)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-4)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-4)", + "lineHeight": "var(--primitive-font-line-height-hero-4)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-4)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-3": { - fontSize: "var(--primitive-font-size-hero-3)", - lineHeight: "var(--primitive-font-line-height-hero-3)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-3)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-3)", + "lineHeight": "var(--primitive-font-line-height-hero-3)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-3)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-2": { - fontSize: "var(--primitive-font-size-hero-2)", - lineHeight: "var(--primitive-font-line-height-hero-2)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-2)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-2)", + "lineHeight": "var(--primitive-font-line-height-hero-2)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-2)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-1": { - fontSize: "var(--primitive-font-size-hero-1)", - lineHeight: "var(--primitive-font-line-height-hero-1)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-1)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-1)", + "lineHeight": "var(--primitive-font-line-height-hero-1)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-1)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-4": { - fontSize: "var(--primitive-font-size-title-4)", - lineHeight: "var(--primitive-font-line-height-title-4)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-title-4)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-4)", + "lineHeight": "var(--primitive-font-line-height-title-4)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-4)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-3": { - fontSize: "var(--primitive-font-size-title-3)", - lineHeight: "var(--primitive-font-line-height-title-3)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-title-3)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-3)", + "lineHeight": "var(--primitive-font-line-height-title-3)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-3)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-2": { - fontSize: "var(--primitive-font-size-title-2)", - lineHeight: "var(--primitive-font-line-height-title-2)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-title-2)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-2)", + "lineHeight": "var(--primitive-font-line-height-title-2)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-2)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-1": { - fontSize: "var(--primitive-font-size-title-1)", - lineHeight: "var(--primitive-font-line-height-title-1)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-title-1)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-1)", + "lineHeight": "var(--primitive-font-line-height-title-1)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-1)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-bold": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-normal": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-subtle": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-bold": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-normal": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-subtle": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-bold": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-normal": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-subtle": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-bold": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-normal": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-subtle": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-lg-bold": { - fontSize: "var(--primitive-font-size-body-lg)", - lineHeight: "var(--primitive-font-line-height-body-lg)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-lg)", + "lineHeight": "var(--primitive-font-line-height-body-lg)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-lg-normal": { - fontSize: "var(--primitive-font-size-body-lg)", - lineHeight: "var(--primitive-font-line-height-body-lg)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-lg)", + "lineHeight": "var(--primitive-font-line-height-body-lg)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-md-bold": { - fontSize: "var(--primitive-font-size-body-md)", - lineHeight: "var(--primitive-font-line-height-body-md)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-md)", + "lineHeight": "var(--primitive-font-line-height-body-md)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-md-normal": { - fontSize: "var(--primitive-font-size-body-md)", - lineHeight: "var(--primitive-font-line-height-body-md)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-md)", + "lineHeight": "var(--primitive-font-line-height-body-md)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-sm-bold": { - fontSize: "var(--primitive-font-size-body-sm)", - lineHeight: "var(--primitive-font-line-height-body-sm)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-sm)", + "lineHeight": "var(--primitive-font-line-height-body-sm)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-sm-normal": { - fontSize: "var(--primitive-font-size-body-sm)", - lineHeight: "var(--primitive-font-line-height-body-sm)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-sm)", + "lineHeight": "var(--primitive-font-line-height-body-sm)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-xs-bold": { - fontSize: "var(--primitive-font-size-body-xs)", - lineHeight: "var(--primitive-font-line-height-body-xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-xs)", + "lineHeight": "var(--primitive-font-line-height-body-xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-xs-normal": { - fontSize: "var(--primitive-font-size-body-xs)", - lineHeight: "var(--primitive-font-line-height-body-xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-xs)", + "lineHeight": "var(--primitive-font-line-height-body-xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-2xs-bold": { - fontSize: "var(--primitive-font-size-body-2xs)", - lineHeight: "var(--primitive-font-line-height-body-2xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-2xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-2xs)", + "lineHeight": "var(--primitive-font-line-height-body-2xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-2xs-normal": { - fontSize: "var(--primitive-font-size-body-2xs)", - lineHeight: "var(--primitive-font-line-height-body-2xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-2xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-2xs)", + "lineHeight": "var(--primitive-font-line-height-body-2xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-lg": { - fontSize: "var(--primitive-font-size-syntax-lg)", - lineHeight: "var(--primitive-font-line-height-syntax-lg)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-lg)", + "lineHeight": "var(--primitive-font-line-height-syntax-lg)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-md": { - fontSize: "var(--primitive-font-size-syntax-md)", - lineHeight: "var(--primitive-font-line-height-syntax-md)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-md)", + "lineHeight": "var(--primitive-font-line-height-syntax-md)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-sm": { - fontSize: "var(--primitive-font-size-syntax-sm)", - lineHeight: "var(--primitive-font-line-height-syntax-sm)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-sm)", + "lineHeight": "var(--primitive-font-line-height-syntax-sm)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-xs": { - fontSize: "var(--primitive-font-size-syntax-xs)", - lineHeight: "var(--primitive-font-line-height-syntax-xs)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-xs)", + "lineHeight": "var(--primitive-font-line-height-syntax-xs)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, - '[data-theme="dark"]': { + "[data-theme=\"dark\"]": { "--semantic-accent-alpha-assistive": "#7087ff89", "--semantic-object-neutral": "#edeffc7c", "--semantic-object-alternative": "#edeffb5e", @@ -1563,9 +1562,9 @@ export const globalStyles = { "--semantic-surface-inverse-deep": "#faf8ff", "--semantic-surface-inverse-deeper": "#f2f3ff", "--semantic-surface-inverse-deepest": "#ecedf9", - "--semantic-curtain-bright": "#ffffff3a", - "--semantic-curtain-dim": "#191b24a0", - "--semantic-curtain-dimmer": "#191b24c1", + "--semantic-curtain-static-bright": "#ffffff3a", + "--semantic-curtain-static-dim": "#00000070", + "--semantic-curtain-static-dimmer": "#000000a0", "--semantic-fill-subtler": "#e2f0f814", "--semantic-fill-inverse-subtler": "#0e0e8519", "--semantic-fill-subtlest": "#dfe1eb05", @@ -1595,10 +1594,10 @@ export const globalStyles = { "--semantic-surface-shallower": "#292c35", "--semantic-surface-shallowest": "#393b44", "--semantic-surface-inverse-shallowest": "#ffffff", - "--semantic-accent-subtler": "#001d83", + "--semantic-accent-subtler": "#00208d", "--semantic-accent-bolder": "#e5e6ff", "--semantic-accent-inverse-bolder": "#001d83", - "--semantic-accent-inverse-subtler": "#e5e6ff", + "--semantic-accent-inverse-subtler": "#dee1ff", "--semantic-theme-red-alpha-assistive": "#ff545089", "--semantic-theme-red-alpha-subtle": "#ff54505b", "--semantic-theme-red-alpha-subtler": "#ff545028", @@ -1812,20 +1811,20 @@ export const globalStyles = { "--semantic-fill-inverse-normal": "#5c5e68", "--semantic-object-bolder": "#e7e7f3", "--semantic-object-normal": "#9c9da8", - "--semantic-object-subtler": "#e2f0f814", - "--semantic-object-subtlest": "#dfe1eb05", + "--semantic-object-subtler": "#e9ecf519", + "--semantic-object-subtlest": "#e1f3ec0f", "--semantic-object-inverse-bolder": "#292c35", "--semantic-object-inverse-normal": "#5c5e68", - "--semantic-object-inverse-subtler": "#0e0e8519", - "--semantic-object-inverse-subtlest": "#5614ff07", + "--semantic-object-inverse-subtler": "#040b701e", + "--semantic-object-inverse-subtlest": "#111cb414", "--semantic-object-static-bolder": "#292c35", "--semantic-object-static-normal": "#5c5e68", - "--semantic-object-static-subtler": "#0e0e8519", - "--semantic-object-static-subtlest": "#5614ff07", + "--semantic-object-static-subtler": "#040b701e", + "--semantic-object-static-subtlest": "#111cb414", "--semantic-object-static-inverse-bolder": "#e7e7f3", "--semantic-object-static-inverse-normal": "#9c9da8", - "--semantic-object-static-inverse-subtler": "#e2f0f814", - "--semantic-object-static-inverse-subtlest": "#dfe1eb05", + "--semantic-object-static-inverse-subtler": "#e9ecf519", + "--semantic-object-static-inverse-subtlest": "#e1f3ec0f", "--semantic-surface-static-shallowest": "#ffffff", "--semantic-surface-static-shallower": "#ffffff", "--semantic-surface-static-shallow": "#ffffff", @@ -1885,8 +1884,9 @@ export const globalStyles = { "--semantic-stroke-inverse-subtler": "#ecedf9", "--semantic-stroke-alpha-subtler": "#e1f3ec0f", "--semantic-stroke-alpha-inverse-subtler": "#111cb414", - "--semantic-accent-subtlest": "#001463", - "--semantic-accent-inverse-subtlest": "#fbf8ff", + "--semantic-accent-subtlest": "#001a78", + "--semantic-accent-inverse-subtlest": "#ececff", + "--semantic-curtain-standard": "#191b24a0" }, "@media (min-width: 768px) and (max-width: 1199px)": { ":root": { @@ -1971,12 +1971,11 @@ export const globalStyles = { "--semantic-spacing-128": "128px", "--semantic-spacing-144": "144px", "--semantic-margin-3xl": "40px", - "--semantic-margin-5xl": "60px", "--semantic-margin-xs": "12px", "--primitive-unit-3": "3", "--semantic-spacing-3": "3px", "--semantic-stroke-weight-3": "3px", - "--semantic-margin-2xs": "8px", + "--semantic-margin-2xs": "10px", "--semantic-spacing-28": "28px", "--semantic-position-24": "24", "--semantic-position-16": "16", @@ -1990,42 +1989,41 @@ export const globalStyles = { "--semantic-position-12": "12", "--primitive-unit-5": "5", "--semantic-stroke-weight-5": "5px", + "--semantic-breakpoint-grid-container-min": "400", + "--semantic-breakpoint-grid-container-max": "831", + "--semantic-margin-4xl": "48px", + "--semantic-margin-5xl": "56px", + "--semantic-margin-6xl": "64px", "--primitive-typeface-hero": "Pretendard Variable", "--primitive-typeface-syntax": "D2Coding", - "--primitive-font-size-hero-4": "64px", - "--primitive-font-size-hero-3": "56px", "--primitive-font-size-hero-2": "48px", "--primitive-font-size-hero-1": "40px", "--primitive-font-size-title-3": "28px", "--primitive-font-size-title-2": "24px", "--primitive-font-size-title-1": "20px", "--primitive-font-size-title-4": "32px", - "--primitive-font-size-body-lg": "17px", - "--primitive-font-size-body-md": "16px", - "--primitive-font-size-body-sm": "15px", - "--primitive-font-size-body-xs": "14px", - "--primitive-font-size-body-2xs": "13px", + "--primitive-font-size-body-lg": "16px", + "--primitive-font-size-body-md": "15px", + "--primitive-font-size-body-sm": "14px", + "--primitive-font-size-body-xs": "13px", + "--primitive-font-size-body-2xs": "12px", "--primitive-font-size-label-lg": "16px", - "--primitive-font-size-label-md": "15px", - "--primitive-font-size-label-sm": "13px", - "--primitive-font-line-height-hero-4": "80px", - "--primitive-font-line-height-hero-3": "70px", + "--primitive-font-size-label-md": "14px", + "--primitive-font-size-label-sm": "12px", "--primitive-font-line-height-hero-2": "60px", "--primitive-font-line-height-hero-1": "50px", - "--primitive-font-line-height-title-4": "41.599998474121094px", - "--primitive-font-line-height-title-3": "36.400001525878906px", - "--primitive-font-line-height-title-2": "31.200000762939453px", + "--primitive-font-line-height-title-4": "42px", + "--primitive-font-line-height-title-3": "36px", + "--primitive-font-line-height-title-2": "31px", "--primitive-font-line-height-title-1": "26px", - "--primitive-font-line-height-label-lg": "24px", - "--primitive-font-line-height-label-md": "22.5px", - "--primitive-font-line-height-label-sm": "19.5px", - "--primitive-font-line-height-body-lg": "27.200000762939453px", - "--primitive-font-line-height-body-md": "25.600000381469727px", - "--primitive-font-line-height-body-sm": "24px", - "--primitive-font-line-height-body-xs": "22.399999618530273px", - "--primitive-font-line-height-body-2xs": "20.799999237060547px", - "--primitive-font-letter-spacing-hero-4": "-1.9800000190734863px", - "--primitive-font-letter-spacing-hero-3": "-1.5700000524520874px", + "--primitive-font-line-height-label-lg": "22px", + "--primitive-font-line-height-label-md": "20px", + "--primitive-font-line-height-label-sm": "18px", + "--primitive-font-line-height-body-lg": "26px", + "--primitive-font-line-height-body-md": "24px", + "--primitive-font-line-height-body-sm": "22px", + "--primitive-font-line-height-body-xs": "21px", + "--primitive-font-line-height-body-2xs": "19px", "--primitive-font-letter-spacing-hero-2": "-1.2000000476837158px", "--primitive-font-letter-spacing-hero-1": "-0.8799999952316284px", "--primitive-font-letter-spacing-title-4": "-0.6399999856948853px", @@ -2033,38 +2031,38 @@ export const globalStyles = { "--primitive-font-letter-spacing-title-2": "-0.3400000035762787px", "--primitive-font-letter-spacing-title-1": "-0.2199999988079071px", "--primitive-font-letter-spacing-label-lg": "-0.1599999964237213px", - "--primitive-font-letter-spacing-label-md": "-0.11999999731779099px", + "--primitive-font-letter-spacing-label-md": "-0.10999999940395355px", "--primitive-font-letter-spacing-label-sm": "-0.07999999821186066px", "--primitive-font-letter-spacing-body-lg": "0.017000000923871994px", "--primitive-font-letter-spacing-body-md": "0.04500000178813934px", "--primitive-font-letter-spacing-body-sm": "0.05999999865889549px", "--primitive-font-letter-spacing-body-xs": "0.07000000029802322px", "--primitive-font-letter-spacing-body-2xs": "0.07999999821186066px", - "--primitive-font-weight-hero-normal": "630", - "--primitive-font-weight-title-normal": "550", - "--primitive-font-weight-label-normal": "450", + "--primitive-font-weight-hero-normal": "645", + "--primitive-font-weight-title-normal": "575", + "--primitive-font-weight-label-normal": "480", "--primitive-font-weight-body-normal": "400", - "--primitive-font-weight-hero-bold": "670", - "--primitive-font-weight-title-bold": "600", - "--primitive-font-weight-label-bold": "500", - "--primitive-font-weight-label-subtle": "400", - "--primitive-font-weight-body-bold": "430", + "--primitive-font-weight-hero-bold": "680", + "--primitive-font-weight-title-bold": "610", + "--primitive-font-weight-label-bold": "520", + "--primitive-font-weight-label-subtle": "440", + "--primitive-font-weight-body-bold": "440", "--primitive-font-size-syntax-lg": "16px", - "--primitive-font-size-syntax-md": "15px", + "--primitive-font-size-syntax-md": "14px", "--primitive-font-size-syntax-sm": "13px", "--primitive-font-weight-syntax-normal": "400", - "--primitive-font-line-height-syntax-lg": "27.200000762939453px", - "--primitive-font-line-height-syntax-md": "25.5px", - "--primitive-font-line-height-syntax-sm": "22.100000381469727px", + "--primitive-font-line-height-syntax-lg": "22px", + "--primitive-font-line-height-syntax-md": "20px", + "--primitive-font-line-height-syntax-sm": "18px", "--primitive-typeface-title": "Pretendard Variable", "--primitive-typeface-label": "Pretendard Variable", "--primitive-typeface-body": "Pretendard Variable", - "--primitive-font-size-label-xs": "12px", - "--primitive-font-line-height-label-xs": "18px", + "--primitive-font-size-label-xs": "11px", + "--primitive-font-line-height-label-xs": "16px", "--primitive-font-letter-spacing-label-xs": "-0.05000000074505806px", "--primitive-font-size-syntax-xs": "12px", - "--primitive-font-line-height-syntax-xs": "20.399999618530273px", - }, + "--primitive-font-line-height-syntax-xs": "16px" + } }, "@media (min-width: 320px) and (max-width: 767px)": { ":root": { @@ -2149,12 +2147,11 @@ export const globalStyles = { "--semantic-spacing-128": "128px", "--semantic-spacing-144": "144px", "--semantic-margin-3xl": "32px", - "--semantic-margin-5xl": "48px", - "--semantic-margin-xs": "8px", + "--semantic-margin-xs": "10px", "--primitive-unit-3": "3", "--semantic-spacing-3": "3px", "--semantic-stroke-weight-3": "3px", - "--semantic-margin-2xs": "4px", + "--semantic-margin-2xs": "8px", "--semantic-spacing-28": "28px", "--semantic-position-24": "24", "--semantic-position-16": "16", @@ -2168,80 +2165,79 @@ export const globalStyles = { "--semantic-position-12": "12", "--primitive-unit-5": "5", "--semantic-stroke-weight-5": "5px", + "--semantic-breakpoint-grid-container-min": "280", + "--semantic-breakpoint-grid-container-max": "727", + "--semantic-margin-4xl": "40px", + "--semantic-margin-5xl": "48px", + "--semantic-margin-6xl": "56px", "--primitive-typeface-hero": "Pretendard Variable", "--primitive-typeface-syntax": "D2Coding", - "--primitive-font-size-hero-4": "56px", - "--primitive-font-size-hero-3": "48px", "--primitive-font-size-hero-2": "40px", "--primitive-font-size-hero-1": "32px", "--primitive-font-size-title-3": "24px", "--primitive-font-size-title-2": "20px", - "--primitive-font-size-title-1": "17px", + "--primitive-font-size-title-1": "18px", "--primitive-font-size-title-4": "28px", "--primitive-font-size-body-lg": "16px", "--primitive-font-size-body-md": "15px", "--primitive-font-size-body-sm": "14px", "--primitive-font-size-body-xs": "13px", "--primitive-font-size-body-2xs": "12px", - "--primitive-font-size-label-lg": "15px", + "--primitive-font-size-label-lg": "16px", "--primitive-font-size-label-md": "14px", "--primitive-font-size-label-sm": "12px", - "--primitive-font-line-height-hero-4": "70px", - "--primitive-font-line-height-hero-3": "60px", "--primitive-font-line-height-hero-2": "50px", "--primitive-font-line-height-hero-1": "40px", - "--primitive-font-line-height-title-4": "36.400001525878906px", - "--primitive-font-line-height-title-3": "31.200000762939453px", + "--primitive-font-line-height-title-4": "36px", + "--primitive-font-line-height-title-3": "31px", "--primitive-font-line-height-title-2": "26px", - "--primitive-font-line-height-title-1": "22.100000381469727px", - "--primitive-font-line-height-label-lg": "22.5px", - "--primitive-font-line-height-label-md": "21px", + "--primitive-font-line-height-title-1": "23px", + "--primitive-font-line-height-label-lg": "22px", + "--primitive-font-line-height-label-md": "20px", "--primitive-font-line-height-label-sm": "18px", - "--primitive-font-line-height-body-lg": "25.600000381469727px", + "--primitive-font-line-height-body-lg": "26px", "--primitive-font-line-height-body-md": "24px", - "--primitive-font-line-height-body-sm": "22.399999618530273px", - "--primitive-font-line-height-body-xs": "20.799999237060547px", - "--primitive-font-line-height-body-2xs": "19.200000762939453px", - "--primitive-font-letter-spacing-hero-4": "-1.7400000095367432px", - "--primitive-font-letter-spacing-hero-3": "-1.340000033378601px", + "--primitive-font-line-height-body-sm": "22px", + "--primitive-font-line-height-body-xs": "21px", + "--primitive-font-line-height-body-2xs": "19px", "--primitive-font-letter-spacing-hero-2": "-1px", "--primitive-font-letter-spacing-hero-1": "-0.699999988079071px", "--primitive-font-letter-spacing-title-4": "-0.5600000023841858px", "--primitive-font-letter-spacing-title-3": "-0.4099999964237213px", "--primitive-font-letter-spacing-title-2": "-0.2800000011920929px", - "--primitive-font-letter-spacing-title-1": "-0.1899999976158142px", - "--primitive-font-letter-spacing-label-lg": "-0.15000000596046448px", + "--primitive-font-letter-spacing-title-1": "-0.20000000298023224px", + "--primitive-font-letter-spacing-label-lg": "-0.1599999964237213px", "--primitive-font-letter-spacing-label-md": "-0.10999999940395355px", - "--primitive-font-letter-spacing-label-sm": "-0.07000000029802322px", + "--primitive-font-letter-spacing-label-sm": "-0.07999999821186066px", "--primitive-font-letter-spacing-body-lg": "0.017000000923871994px", "--primitive-font-letter-spacing-body-md": "0.04500000178813934px", "--primitive-font-letter-spacing-body-sm": "0.05999999865889549px", "--primitive-font-letter-spacing-body-xs": "0.07000000029802322px", - "--primitive-font-letter-spacing-body-2xs": "0.07000000029802322px", - "--primitive-font-weight-hero-normal": "600", - "--primitive-font-weight-title-normal": "530", - "--primitive-font-weight-label-normal": "450", + "--primitive-font-letter-spacing-body-2xs": "0.07999999821186066px", + "--primitive-font-weight-hero-normal": "645", + "--primitive-font-weight-title-normal": "575", + "--primitive-font-weight-label-normal": "480", "--primitive-font-weight-body-normal": "400", - "--primitive-font-weight-hero-bold": "640", - "--primitive-font-weight-title-bold": "580", - "--primitive-font-weight-label-bold": "500", - "--primitive-font-weight-label-subtle": "400", - "--primitive-font-weight-body-bold": "430", + "--primitive-font-weight-hero-bold": "680", + "--primitive-font-weight-title-bold": "610", + "--primitive-font-weight-label-bold": "520", + "--primitive-font-weight-label-subtle": "440", + "--primitive-font-weight-body-bold": "440", "--primitive-font-size-syntax-lg": "16px", - "--primitive-font-size-syntax-md": "15px", + "--primitive-font-size-syntax-md": "14px", "--primitive-font-size-syntax-sm": "13px", "--primitive-font-weight-syntax-normal": "400", - "--primitive-font-line-height-syntax-lg": "27.200000762939453px", - "--primitive-font-line-height-syntax-md": "25.5px", - "--primitive-font-line-height-syntax-sm": "22.100000381469727px", + "--primitive-font-line-height-syntax-lg": "22px", + "--primitive-font-line-height-syntax-md": "20px", + "--primitive-font-line-height-syntax-sm": "18px", "--primitive-typeface-title": "Pretendard Variable", "--primitive-typeface-label": "Pretendard Variable", "--primitive-typeface-body": "Pretendard Variable", "--primitive-font-size-label-xs": "11px", - "--primitive-font-line-height-label-xs": "16.5px", - "--primitive-font-letter-spacing-label-xs": "-0.03999999910593033px", + "--primitive-font-line-height-label-xs": "16px", + "--primitive-font-letter-spacing-label-xs": "-0.05000000074505806px", "--primitive-font-size-syntax-xs": "12px", - "--primitive-font-line-height-syntax-xs": "20.399999618530273px", - }, - }, + "--primitive-font-line-height-syntax-xs": "16px" + } + } } as const; diff --git a/packages/jds/src/tokens/input/token.json b/packages/jds/src/tokens/input/token.json index 8edacad7e..e52c67764 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},\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\": 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},\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\": 8,\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\": 4,\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}\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-bright\": \"#ffffff3a\",\n\t\t\t\"semantic-curtain-dim\": \"#191b243a\",\n\t\t\t\"semantic-curtain-dimmer\": \"#191b2470\",\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\": \"#e5e6ff\",\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\": \"#001d83\",\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\": \"#0e0e8519\",\n\t\t\t\"semantic-object-subtlest\": \"#5614ff07\",\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\": \"#e2f0f814\",\n\t\t\t\"semantic-object-inverse-subtlest\": \"#dfe1eb05\",\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\": \"#0e0e8519\",\n\t\t\t\"semantic-object-static-subtlest\": \"#5614ff07\",\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\": \"#e2f0f814\",\n\t\t\t\"semantic-object-static-inverse-subtlest\": \"#dfe1eb05\",\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\": \"#fbf8ff\",\n\t\t\t\"semantic-accent-inverse-subtlest\": \"#001463\"\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-bright\": \"#ffffff3a\",\n\t\t\t\"semantic-curtain-dim\": \"#191b24a0\",\n\t\t\t\"semantic-curtain-dimmer\": \"#191b24c1\",\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\": \"#001d83\",\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\": \"#e5e6ff\",\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\": \"#e2f0f814\",\n\t\t\t\"semantic-object-subtlest\": \"#dfe1eb05\",\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\": \"#0e0e8519\",\n\t\t\t\"semantic-object-inverse-subtlest\": \"#5614ff07\",\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\": \"#0e0e8519\",\n\t\t\t\"semantic-object-static-subtlest\": \"#5614ff07\",\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\": \"#e2f0f814\",\n\t\t\t\"semantic-object-static-inverse-subtlest\": \"#dfe1eb05\",\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\": \"#001463\",\n\t\t\t\"semantic-accent-inverse-subtlest\": \"#fbf8ff\"\n\t\t}\n\t},\n\t\"typography\": {\n\t\t\"desktop\": {\n\t\t\t\"primitive-typeface-hero\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-hero-4\": 64,\n\t\t\t\"primitive-font-size-hero-3\": 56,\n\t\t\t\"primitive-font-size-hero-2\": 48,\n\t\t\t\"primitive-font-size-hero-1\": 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\": 17,\n\t\t\t\"primitive-font-size-body-md\": 16,\n\t\t\t\"primitive-font-size-body-sm\": 15,\n\t\t\t\"primitive-font-size-body-xs\": 14,\n\t\t\t\"primitive-font-size-body-2xs\": 13,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 15,\n\t\t\t\"primitive-font-size-label-sm\": 13,\n\t\t\t\"primitive-font-line-height-hero-4\": 80,\n\t\t\t\"primitive-font-line-height-hero-3\": 70,\n\t\t\t\"primitive-font-line-height-hero-2\": 60,\n\t\t\t\"primitive-font-line-height-hero-1\": 50,\n\t\t\t\"primitive-font-line-height-title-4\": 41.599998474121094,\n\t\t\t\"primitive-font-line-height-title-3\": 36.400001525878906,\n\t\t\t\"primitive-font-line-height-title-2\": 31.200000762939453,\n\t\t\t\"primitive-font-line-height-title-1\": 26,\n\t\t\t\"primitive-font-line-height-label-lg\": 24,\n\t\t\t\"primitive-font-line-height-label-md\": 22.5,\n\t\t\t\"primitive-font-line-height-label-sm\": 19.5,\n\t\t\t\"primitive-font-line-height-body-lg\": 27.200000762939453,\n\t\t\t\"primitive-font-line-height-body-md\": 25.600000381469727,\n\t\t\t\"primitive-font-line-height-body-sm\": 24,\n\t\t\t\"primitive-font-line-height-body-xs\": 22.399999618530273,\n\t\t\t\"primitive-font-line-height-body-2xs\": 20.799999237060547,\n\t\t\t\"primitive-font-letter-spacing-hero-4\": -1.9800000190734863,\n\t\t\t\"primitive-font-letter-spacing-hero-3\": -1.5700000524520874,\n\t\t\t\"primitive-font-letter-spacing-hero-2\": -1.2000000476837158,\n\t\t\t\"primitive-font-letter-spacing-hero-1\": -0.8799999952316284,\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.11999999731779099,\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-hero-normal\": 660,\n\t\t\t\"primitive-font-weight-title-normal\": 570,\n\t\t\t\"primitive-font-weight-label-normal\": 450,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-hero-bold\": 700,\n\t\t\t\"primitive-font-weight-title-bold\": 620,\n\t\t\t\"primitive-font-weight-label-bold\": 500,\n\t\t\t\"primitive-font-weight-label-subtle\": 400,\n\t\t\t\"primitive-font-weight-body-bold\": 430,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 15,\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\": 27.200000762939453,\n\t\t\t\"primitive-font-line-height-syntax-md\": 25.5,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 22.100000381469727,\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\": 12,\n\t\t\t\"primitive-font-line-height-label-xs\": 18,\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\": 20.399999618530273\n\t\t},\n\t\t\"tablet\": {\n\t\t\t\"primitive-typeface-hero\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-hero-4\": 64,\n\t\t\t\"primitive-font-size-hero-3\": 56,\n\t\t\t\"primitive-font-size-hero-2\": 48,\n\t\t\t\"primitive-font-size-hero-1\": 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\": 17,\n\t\t\t\"primitive-font-size-body-md\": 16,\n\t\t\t\"primitive-font-size-body-sm\": 15,\n\t\t\t\"primitive-font-size-body-xs\": 14,\n\t\t\t\"primitive-font-size-body-2xs\": 13,\n\t\t\t\"primitive-font-size-label-lg\": 16,\n\t\t\t\"primitive-font-size-label-md\": 15,\n\t\t\t\"primitive-font-size-label-sm\": 13,\n\t\t\t\"primitive-font-line-height-hero-4\": 80,\n\t\t\t\"primitive-font-line-height-hero-3\": 70,\n\t\t\t\"primitive-font-line-height-hero-2\": 60,\n\t\t\t\"primitive-font-line-height-hero-1\": 50,\n\t\t\t\"primitive-font-line-height-title-4\": 41.599998474121094,\n\t\t\t\"primitive-font-line-height-title-3\": 36.400001525878906,\n\t\t\t\"primitive-font-line-height-title-2\": 31.200000762939453,\n\t\t\t\"primitive-font-line-height-title-1\": 26,\n\t\t\t\"primitive-font-line-height-label-lg\": 24,\n\t\t\t\"primitive-font-line-height-label-md\": 22.5,\n\t\t\t\"primitive-font-line-height-label-sm\": 19.5,\n\t\t\t\"primitive-font-line-height-body-lg\": 27.200000762939453,\n\t\t\t\"primitive-font-line-height-body-md\": 25.600000381469727,\n\t\t\t\"primitive-font-line-height-body-sm\": 24,\n\t\t\t\"primitive-font-line-height-body-xs\": 22.399999618530273,\n\t\t\t\"primitive-font-line-height-body-2xs\": 20.799999237060547,\n\t\t\t\"primitive-font-letter-spacing-hero-4\": -1.9800000190734863,\n\t\t\t\"primitive-font-letter-spacing-hero-3\": -1.5700000524520874,\n\t\t\t\"primitive-font-letter-spacing-hero-2\": -1.2000000476837158,\n\t\t\t\"primitive-font-letter-spacing-hero-1\": -0.8799999952316284,\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.11999999731779099,\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-hero-normal\": 630,\n\t\t\t\"primitive-font-weight-title-normal\": 550,\n\t\t\t\"primitive-font-weight-label-normal\": 450,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-hero-bold\": 670,\n\t\t\t\"primitive-font-weight-title-bold\": 600,\n\t\t\t\"primitive-font-weight-label-bold\": 500,\n\t\t\t\"primitive-font-weight-label-subtle\": 400,\n\t\t\t\"primitive-font-weight-body-bold\": 430,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 15,\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\": 27.200000762939453,\n\t\t\t\"primitive-font-line-height-syntax-md\": 25.5,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 22.100000381469727,\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\": 12,\n\t\t\t\"primitive-font-line-height-label-xs\": 18,\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\": 20.399999618530273\n\t\t},\n\t\t\"mobile\": {\n\t\t\t\"primitive-typeface-hero\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-hero-4\": 56,\n\t\t\t\"primitive-font-size-hero-3\": 48,\n\t\t\t\"primitive-font-size-hero-2\": 40,\n\t\t\t\"primitive-font-size-hero-1\": 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\": 17,\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\": 15,\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-hero-4\": 70,\n\t\t\t\"primitive-font-line-height-hero-3\": 60,\n\t\t\t\"primitive-font-line-height-hero-2\": 50,\n\t\t\t\"primitive-font-line-height-hero-1\": 40,\n\t\t\t\"primitive-font-line-height-title-4\": 36.400001525878906,\n\t\t\t\"primitive-font-line-height-title-3\": 31.200000762939453,\n\t\t\t\"primitive-font-line-height-title-2\": 26,\n\t\t\t\"primitive-font-line-height-title-1\": 22.100000381469727,\n\t\t\t\"primitive-font-line-height-label-lg\": 22.5,\n\t\t\t\"primitive-font-line-height-label-md\": 21,\n\t\t\t\"primitive-font-line-height-label-sm\": 18,\n\t\t\t\"primitive-font-line-height-body-lg\": 25.600000381469727,\n\t\t\t\"primitive-font-line-height-body-md\": 24,\n\t\t\t\"primitive-font-line-height-body-sm\": 22.399999618530273,\n\t\t\t\"primitive-font-line-height-body-xs\": 20.799999237060547,\n\t\t\t\"primitive-font-line-height-body-2xs\": 19.200000762939453,\n\t\t\t\"primitive-font-letter-spacing-hero-4\": -1.7400000095367432,\n\t\t\t\"primitive-font-letter-spacing-hero-3\": -1.340000033378601,\n\t\t\t\"primitive-font-letter-spacing-hero-2\": -1,\n\t\t\t\"primitive-font-letter-spacing-hero-1\": -0.699999988079071,\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.1899999976158142,\n\t\t\t\"primitive-font-letter-spacing-label-lg\": -0.15000000596046448,\n\t\t\t\"primitive-font-letter-spacing-label-md\": -0.10999999940395355,\n\t\t\t\"primitive-font-letter-spacing-label-sm\": -0.07000000029802322,\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.07000000029802322,\n\t\t\t\"primitive-font-weight-hero-normal\": 600,\n\t\t\t\"primitive-font-weight-title-normal\": 530,\n\t\t\t\"primitive-font-weight-label-normal\": 450,\n\t\t\t\"primitive-font-weight-body-normal\": 400,\n\t\t\t\"primitive-font-weight-hero-bold\": 640,\n\t\t\t\"primitive-font-weight-title-bold\": 580,\n\t\t\t\"primitive-font-weight-label-bold\": 500,\n\t\t\t\"primitive-font-weight-label-subtle\": 400,\n\t\t\t\"primitive-font-weight-body-bold\": 430,\n\t\t\t\"primitive-font-size-syntax-lg\": 16,\n\t\t\t\"primitive-font-size-syntax-md\": 15,\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\": 27.200000762939453,\n\t\t\t\"primitive-font-line-height-syntax-md\": 25.5,\n\t\t\t\"primitive-font-line-height-syntax-sm\": 22.100000381469727,\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.5,\n\t\t\t\"primitive-font-letter-spacing-label-xs\": -0.03999999910593033,\n\t\t\t\"primitive-font-size-syntax-xs\": 12,\n\t\t\t\"primitive-font-line-height-syntax-xs\": 20.399999618530273\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}" +"{\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-breakpoint-grid-container-min\": 540,\n\t\t\t\"semantic-breakpoint-grid-container-max\": 556,\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-breakpoint-grid-container-min\": 400,\n\t\t\t\"semantic-breakpoint-grid-container-max\": 831,\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-breakpoint-grid-container-min\": 280,\n\t\t\t\"semantic-breakpoint-grid-container-max\": 727,\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-hero\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-hero-2\": 48,\n\t\t\t\"primitive-font-size-hero-1\": 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-hero-2\": 60,\n\t\t\t\"primitive-font-line-height-hero-1\": 50,\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\": 31,\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-hero-2\": -1.2000000476837158,\n\t\t\t\"primitive-font-letter-spacing-hero-1\": -0.8799999952316284,\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-hero-normal\": 645,\n\t\t\t\"primitive-font-weight-title-normal\": 575,\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-hero-bold\": 680,\n\t\t\t\"primitive-font-weight-title-bold\": 610,\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},\n\t\t\"tablet\": {\n\t\t\t\"primitive-typeface-hero\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-hero-2\": 48,\n\t\t\t\"primitive-font-size-hero-1\": 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-hero-2\": 60,\n\t\t\t\"primitive-font-line-height-hero-1\": 50,\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\": 31,\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-hero-2\": -1.2000000476837158,\n\t\t\t\"primitive-font-letter-spacing-hero-1\": -0.8799999952316284,\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-hero-normal\": 645,\n\t\t\t\"primitive-font-weight-title-normal\": 575,\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-hero-bold\": 680,\n\t\t\t\"primitive-font-weight-title-bold\": 610,\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},\n\t\t\"mobile\": {\n\t\t\t\"primitive-typeface-hero\": \"Pretendard Variable\",\n\t\t\t\"primitive-typeface-syntax\": \"D2Coding\",\n\t\t\t\"primitive-font-size-hero-2\": 40,\n\t\t\t\"primitive-font-size-hero-1\": 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-hero-2\": 50,\n\t\t\t\"primitive-font-line-height-hero-1\": 40,\n\t\t\t\"primitive-font-line-height-title-4\": 36,\n\t\t\t\"primitive-font-line-height-title-3\": 31,\n\t\t\t\"primitive-font-line-height-title-2\": 26,\n\t\t\t\"primitive-font-line-height-title-1\": 23,\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-hero-2\": -1,\n\t\t\t\"primitive-font-letter-spacing-hero-1\": -0.699999988079071,\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-hero-normal\": 645,\n\t\t\t\"primitive-font-weight-title-normal\": 575,\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-hero-bold\": 680,\n\t\t\t\"primitive-font-weight-title-bold\": 610,\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}\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/theme.ts b/packages/jds/src/tokens/theme.ts index c15d83983..38d5a4849 100644 --- a/packages/jds/src/tokens/theme.ts +++ b/packages/jds/src/tokens/theme.ts @@ -1,10 +1,10 @@ // 자동 생성된 theme - 수정 금지 -// 생성 시간: 11/21/2025, 5:05:04 PM +// 생성 시간: 2026. 3. 17. 오후 9:51:04 export const theme = { - colorPrimitive: { - primitive: { - flow: { + "colorPrimitive": { + "primitive": { + "flow": { "20": "var(--primitive-flow-20)", "40": "var(--primitive-flow-40)", "60": "var(--primitive-flow-60)", @@ -29,8 +29,8 @@ export const theme = { "860": "var(--primitive-flow-860)", "880": "var(--primitive-flow-880)", "900": "var(--primitive-flow-900)", - dark: { - alpha: { + "dark": { + "alpha": { "20": "var(--primitive-flow-dark-alpha-20)", "40": "var(--primitive-flow-dark-alpha-40)", "60": "var(--primitive-flow-dark-alpha-60)", @@ -54,11 +54,11 @@ export const theme = { "840": "var(--primitive-flow-dark-alpha-840)", "860": "var(--primitive-flow-dark-alpha-860)", "880": "var(--primitive-flow-dark-alpha-880)", - "900": "var(--primitive-flow-dark-alpha-900)", - }, + "900": "var(--primitive-flow-dark-alpha-900)" + } }, - light: { - alpha: { + "light": { + "alpha": { "20": "var(--primitive-flow-light-alpha-20)", "40": "var(--primitive-flow-light-alpha-40)", "60": "var(--primitive-flow-light-alpha-60)", @@ -82,11 +82,11 @@ export const theme = { "840": "var(--primitive-flow-light-alpha-840)", "860": "var(--primitive-flow-light-alpha-860)", "880": "var(--primitive-flow-light-alpha-880)", - "900": "var(--primitive-flow-light-alpha-900)", - }, - }, + "900": "var(--primitive-flow-light-alpha-900)" + } + } }, - red: { + "red": { "20": "var(--primitive-red-20)", "40": "var(--primitive-red-40)", "60": "var(--primitive-red-60)", @@ -110,21 +110,21 @@ export const theme = { "840": "var(--primitive-red-840)", "860": "var(--primitive-red-860)", "880": "var(--primitive-red-880)", - "900": "var(--primitive-red-900)", + "900": "var(--primitive-red-900)" }, - shade: { + "shade": { "2": "var(--primitive-shade-2)", "4": "var(--primitive-shade-4)", "6": "var(--primitive-shade-6)", "8": "var(--primitive-shade-8)", "12": "var(--primitive-shade-12)", - "16": "var(--primitive-shade-16)", + "16": "var(--primitive-shade-16)" }, - base: { + "base": { "0": "var(--primitive-base-0)", - "1000": "var(--primitive-base-1000)", + "1000": "var(--primitive-base-1000)" }, - orange: { + "orange": { "20": "var(--primitive-orange-20)", "40": "var(--primitive-orange-40)", "60": "var(--primitive-orange-60)", @@ -148,9 +148,9 @@ export const theme = { "840": "var(--primitive-orange-840)", "860": "var(--primitive-orange-860)", "880": "var(--primitive-orange-880)", - "900": "var(--primitive-orange-900)", + "900": "var(--primitive-orange-900)" }, - yellow: { + "yellow": { "20": "var(--primitive-yellow-20)", "40": "var(--primitive-yellow-40)", "60": "var(--primitive-yellow-60)", @@ -174,9 +174,9 @@ export const theme = { "840": "var(--primitive-yellow-840)", "860": "var(--primitive-yellow-860)", "880": "var(--primitive-yellow-880)", - "900": "var(--primitive-yellow-900)", + "900": "var(--primitive-yellow-900)" }, - lime: { + "lime": { "20": "var(--primitive-lime-20)", "40": "var(--primitive-lime-40)", "60": "var(--primitive-lime-60)", @@ -200,9 +200,9 @@ export const theme = { "840": "var(--primitive-lime-840)", "860": "var(--primitive-lime-860)", "880": "var(--primitive-lime-880)", - "900": "var(--primitive-lime-900)", + "900": "var(--primitive-lime-900)" }, - green: { + "green": { "20": "var(--primitive-green-20)", "40": "var(--primitive-green-40)", "60": "var(--primitive-green-60)", @@ -226,9 +226,9 @@ export const theme = { "840": "var(--primitive-green-840)", "860": "var(--primitive-green-860)", "880": "var(--primitive-green-880)", - "900": "var(--primitive-green-900)", + "900": "var(--primitive-green-900)" }, - cyan: { + "cyan": { "20": "var(--primitive-cyan-20)", "40": "var(--primitive-cyan-40)", "60": "var(--primitive-cyan-60)", @@ -252,9 +252,9 @@ export const theme = { "840": "var(--primitive-cyan-840)", "860": "var(--primitive-cyan-860)", "880": "var(--primitive-cyan-880)", - "900": "var(--primitive-cyan-900)", + "900": "var(--primitive-cyan-900)" }, - sky: { + "sky": { "20": "var(--primitive-sky-20)", "40": "var(--primitive-sky-40)", "60": "var(--primitive-sky-60)", @@ -278,9 +278,9 @@ export const theme = { "840": "var(--primitive-sky-840)", "860": "var(--primitive-sky-860)", "880": "var(--primitive-sky-880)", - "900": "var(--primitive-sky-900)", + "900": "var(--primitive-sky-900)" }, - blue: { + "blue": { "20": "var(--primitive-blue-20)", "40": "var(--primitive-blue-40)", "60": "var(--primitive-blue-60)", @@ -304,10 +304,10 @@ export const theme = { "840": "var(--primitive-blue-840)", "860": "var(--primitive-blue-860)", "880": "var(--primitive-blue-880)", - "900": "var(--primitive-blue-900)", + "900": "var(--primitive-blue-900)" }, - cerulean: { - blue: { + "cerulean": { + "blue": { "20": "var(--primitive-cerulean-blue-20)", "40": "var(--primitive-cerulean-blue-40)", "60": "var(--primitive-cerulean-blue-60)", @@ -331,10 +331,10 @@ export const theme = { "840": "var(--primitive-cerulean-blue-840)", "860": "var(--primitive-cerulean-blue-860)", "880": "var(--primitive-cerulean-blue-880)", - "900": "var(--primitive-cerulean-blue-900)", - }, + "900": "var(--primitive-cerulean-blue-900)" + } }, - violet: { + "violet": { "20": "var(--primitive-violet-20)", "40": "var(--primitive-violet-40)", "60": "var(--primitive-violet-60)", @@ -358,9 +358,9 @@ export const theme = { "840": "var(--primitive-violet-840)", "860": "var(--primitive-violet-860)", "880": "var(--primitive-violet-880)", - "900": "var(--primitive-violet-900)", + "900": "var(--primitive-violet-900)" }, - purple: { + "purple": { "20": "var(--primitive-purple-20)", "40": "var(--primitive-purple-40)", "60": "var(--primitive-purple-60)", @@ -384,9 +384,9 @@ export const theme = { "840": "var(--primitive-purple-840)", "860": "var(--primitive-purple-860)", "880": "var(--primitive-purple-880)", - "900": "var(--primitive-purple-900)", + "900": "var(--primitive-purple-900)" }, - fuchsia: { + "fuchsia": { "20": "var(--primitive-fuchsia-20)", "40": "var(--primitive-fuchsia-40)", "60": "var(--primitive-fuchsia-60)", @@ -410,9 +410,9 @@ export const theme = { "840": "var(--primitive-fuchsia-840)", "860": "var(--primitive-fuchsia-860)", "880": "var(--primitive-fuchsia-880)", - "900": "var(--primitive-fuchsia-900)", + "900": "var(--primitive-fuchsia-900)" }, - pink: { + "pink": { "20": "var(--primitive-pink-20)", "40": "var(--primitive-pink-40)", "60": "var(--primitive-pink-60)", @@ -436,9 +436,9 @@ export const theme = { "840": "var(--primitive-pink-840)", "860": "var(--primitive-pink-860)", "880": "var(--primitive-pink-880)", - "900": "var(--primitive-pink-900)", + "900": "var(--primitive-pink-900)" }, - rose: { + "rose": { "20": "var(--primitive-rose-20)", "40": "var(--primitive-rose-40)", "60": "var(--primitive-rose-60)", @@ -462,9 +462,9 @@ export const theme = { "840": "var(--primitive-rose-840)", "860": "var(--primitive-rose-860)", "880": "var(--primitive-rose-880)", - "900": "var(--primitive-rose-900)", + "900": "var(--primitive-rose-900)" }, - engross: { + "engross": { "20": "var(--primitive-engross-20)", "40": "var(--primitive-engross-40)", "60": "var(--primitive-engross-60)", @@ -488,9 +488,9 @@ export const theme = { "840": "var(--primitive-engross-840)", "860": "var(--primitive-engross-860)", "880": "var(--primitive-engross-880)", - "900": "var(--primitive-engross-900)", + "900": "var(--primitive-engross-900)" }, - emerald: { + "emerald": { "20": "var(--primitive-emerald-20)", "40": "var(--primitive-emerald-40)", "60": "var(--primitive-emerald-60)", @@ -514,9 +514,9 @@ export const theme = { "840": "var(--primitive-emerald-840)", "860": "var(--primitive-emerald-860)", "880": "var(--primitive-emerald-880)", - "900": "var(--primitive-emerald-900)", + "900": "var(--primitive-emerald-900)" }, - teal: { + "teal": { "20": "var(--primitive-teal-20)", "40": "var(--primitive-teal-40)", "60": "var(--primitive-teal-60)", @@ -540,9 +540,9 @@ export const theme = { "840": "var(--primitive-teal-840)", "860": "var(--primitive-teal-860)", "880": "var(--primitive-teal-880)", - "900": "var(--primitive-teal-900)", + "900": "var(--primitive-teal-900)" }, - amber: { + "amber": { "20": "var(--primitive-amber-20)", "40": "var(--primitive-amber-40)", "60": "var(--primitive-amber-60)", @@ -566,9 +566,9 @@ export const theme = { "840": "var(--primitive-amber-840)", "860": "var(--primitive-amber-860)", "880": "var(--primitive-amber-880)", - "900": "var(--primitive-amber-900)", + "900": "var(--primitive-amber-900)" }, - immerse: { + "immerse": { "20": "var(--primitive-immerse-20)", "40": "var(--primitive-immerse-40)", "60": "var(--primitive-immerse-60)", @@ -592,574 +592,577 @@ export const theme = { "840": "var(--primitive-immerse-840)", "860": "var(--primitive-immerse-860)", "880": "var(--primitive-immerse-880)", - "900": "var(--primitive-immerse-900)", - }, - }, + "900": "var(--primitive-immerse-900)" + } + } }, - color: { - semantic: { - accent: { - alpha: { - assistive: "var(--semantic-accent-alpha-assistive)", - subtle: "var(--semantic-accent-alpha-subtle)", - subtler: "var(--semantic-accent-alpha-subtler)", - inverse: { - subtle: "var(--semantic-accent-alpha-inverse-subtle)", - subtler: "var(--semantic-accent-alpha-inverse-subtler)", - subtlest: "var(--semantic-accent-alpha-inverse-subtlest)", - assistive: "var(--semantic-accent-alpha-inverse-assistive)", + "color": { + "semantic": { + "accent": { + "alpha": { + "assistive": "var(--semantic-accent-alpha-assistive)", + "subtle": "var(--semantic-accent-alpha-subtle)", + "subtler": "var(--semantic-accent-alpha-subtler)", + "inverse": { + "subtle": "var(--semantic-accent-alpha-inverse-subtle)", + "subtler": "var(--semantic-accent-alpha-inverse-subtler)", + "subtlest": "var(--semantic-accent-alpha-inverse-subtlest)", + "assistive": "var(--semantic-accent-alpha-inverse-assistive)" }, - subtlest: "var(--semantic-accent-alpha-subtlest)", + "subtlest": "var(--semantic-accent-alpha-subtlest)" }, - bold: "var(--semantic-accent-bold)", - normal: "var(--semantic-accent-normal)", - neutral: "var(--semantic-accent-neutral)", - inverse: { - bold: "var(--semantic-accent-inverse-bold)", - normal: "var(--semantic-accent-inverse-normal)", - neutral: "var(--semantic-accent-inverse-neutral)", - alternative: "var(--semantic-accent-inverse-alternative)", - assistive: "var(--semantic-accent-inverse-assistive)", - subtle: "var(--semantic-accent-inverse-subtle)", - bolder: "var(--semantic-accent-inverse-bolder)", - subtler: "var(--semantic-accent-inverse-subtler)", - subtlest: "var(--semantic-accent-inverse-subtlest)", + "bold": "var(--semantic-accent-bold)", + "normal": "var(--semantic-accent-normal)", + "neutral": "var(--semantic-accent-neutral)", + "inverse": { + "bold": "var(--semantic-accent-inverse-bold)", + "normal": "var(--semantic-accent-inverse-normal)", + "neutral": "var(--semantic-accent-inverse-neutral)", + "alternative": "var(--semantic-accent-inverse-alternative)", + "assistive": "var(--semantic-accent-inverse-assistive)", + "subtle": "var(--semantic-accent-inverse-subtle)", + "bolder": "var(--semantic-accent-inverse-bolder)", + "subtler": "var(--semantic-accent-inverse-subtler)", + "subtlest": "var(--semantic-accent-inverse-subtlest)" }, - alternative: "var(--semantic-accent-alternative)", - assistive: "var(--semantic-accent-assistive)", - subtle: "var(--semantic-accent-subtle)", - subtler: "var(--semantic-accent-subtler)", - bolder: "var(--semantic-accent-bolder)", - subtlest: "var(--semantic-accent-subtlest)", + "alternative": "var(--semantic-accent-alternative)", + "assistive": "var(--semantic-accent-assistive)", + "subtle": "var(--semantic-accent-subtle)", + "subtler": "var(--semantic-accent-subtler)", + "bolder": "var(--semantic-accent-bolder)", + "subtlest": "var(--semantic-accent-subtlest)" }, - object: { - neutral: "var(--semantic-object-neutral)", - alternative: "var(--semantic-object-alternative)", - assistive: "var(--semantic-object-assistive)", - subtle: "var(--semantic-object-subtle)", - inverse: { - neutral: "var(--semantic-object-inverse-neutral)", - alternative: "var(--semantic-object-inverse-alternative)", - assistive: "var(--semantic-object-inverse-assistive)", - subtle: "var(--semantic-object-inverse-subtle)", - boldest: "var(--semantic-object-inverse-boldest)", - bold: "var(--semantic-object-inverse-bold)", - bolder: "var(--semantic-object-inverse-bolder)", - normal: "var(--semantic-object-inverse-normal)", - subtler: "var(--semantic-object-inverse-subtler)", - subtlest: "var(--semantic-object-inverse-subtlest)", + "object": { + "neutral": "var(--semantic-object-neutral)", + "alternative": "var(--semantic-object-alternative)", + "assistive": "var(--semantic-object-assistive)", + "subtle": "var(--semantic-object-subtle)", + "inverse": { + "neutral": "var(--semantic-object-inverse-neutral)", + "alternative": "var(--semantic-object-inverse-alternative)", + "assistive": "var(--semantic-object-inverse-assistive)", + "subtle": "var(--semantic-object-inverse-subtle)", + "boldest": "var(--semantic-object-inverse-boldest)", + "bold": "var(--semantic-object-inverse-bold)", + "bolder": "var(--semantic-object-inverse-bolder)", + "normal": "var(--semantic-object-inverse-normal)", + "subtler": "var(--semantic-object-inverse-subtler)", + "subtlest": "var(--semantic-object-inverse-subtlest)" }, - boldest: "var(--semantic-object-boldest)", - bold: "var(--semantic-object-bold)", - static: { - boldest: "var(--semantic-object-static-boldest)", - bold: "var(--semantic-object-static-bold)", - neutral: "var(--semantic-object-static-neutral)", - alternative: "var(--semantic-object-static-alternative)", - assistive: "var(--semantic-object-static-assistive)", - subtle: "var(--semantic-object-static-subtle)", - inverse: { - boldest: "var(--semantic-object-static-inverse-boldest)", - bold: "var(--semantic-object-static-inverse-bold)", - neutral: "var(--semantic-object-static-inverse-neutral)", - alternative: "var(--semantic-object-static-inverse-alternative)", - assistive: "var(--semantic-object-static-inverse-assistive)", - subtle: "var(--semantic-object-static-inverse-subtle)", - bolder: "var(--semantic-object-static-inverse-bolder)", - normal: "var(--semantic-object-static-inverse-normal)", - subtler: "var(--semantic-object-static-inverse-subtler)", - subtlest: "var(--semantic-object-static-inverse-subtlest)", + "boldest": "var(--semantic-object-boldest)", + "bold": "var(--semantic-object-bold)", + "static": { + "boldest": "var(--semantic-object-static-boldest)", + "bold": "var(--semantic-object-static-bold)", + "neutral": "var(--semantic-object-static-neutral)", + "alternative": "var(--semantic-object-static-alternative)", + "assistive": "var(--semantic-object-static-assistive)", + "subtle": "var(--semantic-object-static-subtle)", + "inverse": { + "boldest": "var(--semantic-object-static-inverse-boldest)", + "bold": "var(--semantic-object-static-inverse-bold)", + "neutral": "var(--semantic-object-static-inverse-neutral)", + "alternative": "var(--semantic-object-static-inverse-alternative)", + "assistive": "var(--semantic-object-static-inverse-assistive)", + "subtle": "var(--semantic-object-static-inverse-subtle)", + "bolder": "var(--semantic-object-static-inverse-bolder)", + "normal": "var(--semantic-object-static-inverse-normal)", + "subtler": "var(--semantic-object-static-inverse-subtler)", + "subtlest": "var(--semantic-object-static-inverse-subtlest)" }, - bolder: "var(--semantic-object-static-bolder)", - normal: "var(--semantic-object-static-normal)", - subtler: "var(--semantic-object-static-subtler)", - subtlest: "var(--semantic-object-static-subtlest)", + "bolder": "var(--semantic-object-static-bolder)", + "normal": "var(--semantic-object-static-normal)", + "subtler": "var(--semantic-object-static-subtler)", + "subtlest": "var(--semantic-object-static-subtlest)" }, - bolder: "var(--semantic-object-bolder)", - normal: "var(--semantic-object-normal)", - subtler: "var(--semantic-object-subtler)", - subtlest: "var(--semantic-object-subtlest)", + "bolder": "var(--semantic-object-bolder)", + "normal": "var(--semantic-object-normal)", + "subtler": "var(--semantic-object-subtler)", + "subtlest": "var(--semantic-object-subtlest)" }, - surface: { - standard: "var(--semantic-surface-standard)", - deep: "var(--semantic-surface-deep)", - deeper: "var(--semantic-surface-deeper)", - deepest: "var(--semantic-surface-deepest)", - inverse: { - standard: "var(--semantic-surface-inverse-standard)", - deep: "var(--semantic-surface-inverse-deep)", - deeper: "var(--semantic-surface-inverse-deeper)", - deepest: "var(--semantic-surface-inverse-deepest)", - shallow: "var(--semantic-surface-inverse-shallow)", - shallower: "var(--semantic-surface-inverse-shallower)", - shallowest: "var(--semantic-surface-inverse-shallowest)", - }, - shallow: "var(--semantic-surface-shallow)", - shallower: "var(--semantic-surface-shallower)", - shallowest: "var(--semantic-surface-shallowest)", - static: { - shallowest: "var(--semantic-surface-static-shallowest)", - shallower: "var(--semantic-surface-static-shallower)", - shallow: "var(--semantic-surface-static-shallow)", - standard: "var(--semantic-surface-static-standard)", - deep: "var(--semantic-surface-static-deep)", - deeper: "var(--semantic-surface-static-deeper)", - deepest: "var(--semantic-surface-static-deepest)", - inverse: { - shallowest: "var(--semantic-surface-static-inverse-shallowest)", - shallower: "var(--semantic-surface-static-inverse-shallower)", - shallow: "var(--semantic-surface-static-inverse-shallow)", - standard: "var(--semantic-surface-static-inverse-standard)", - deep: "var(--semantic-surface-static-inverse-deep)", - deeper: "var(--semantic-surface-static-inverse-deeper)", - deepest: "var(--semantic-surface-static-inverse-deepest)", - }, + "surface": { + "standard": "var(--semantic-surface-standard)", + "deep": "var(--semantic-surface-deep)", + "deeper": "var(--semantic-surface-deeper)", + "deepest": "var(--semantic-surface-deepest)", + "inverse": { + "standard": "var(--semantic-surface-inverse-standard)", + "deep": "var(--semantic-surface-inverse-deep)", + "deeper": "var(--semantic-surface-inverse-deeper)", + "deepest": "var(--semantic-surface-inverse-deepest)", + "shallow": "var(--semantic-surface-inverse-shallow)", + "shallower": "var(--semantic-surface-inverse-shallower)", + "shallowest": "var(--semantic-surface-inverse-shallowest)" }, + "shallow": "var(--semantic-surface-shallow)", + "shallower": "var(--semantic-surface-shallower)", + "shallowest": "var(--semantic-surface-shallowest)", + "static": { + "shallowest": "var(--semantic-surface-static-shallowest)", + "shallower": "var(--semantic-surface-static-shallower)", + "shallow": "var(--semantic-surface-static-shallow)", + "standard": "var(--semantic-surface-static-standard)", + "deep": "var(--semantic-surface-static-deep)", + "deeper": "var(--semantic-surface-static-deeper)", + "deepest": "var(--semantic-surface-static-deepest)", + "inverse": { + "shallowest": "var(--semantic-surface-static-inverse-shallowest)", + "shallower": "var(--semantic-surface-static-inverse-shallower)", + "shallow": "var(--semantic-surface-static-inverse-shallow)", + "standard": "var(--semantic-surface-static-inverse-standard)", + "deep": "var(--semantic-surface-static-inverse-deep)", + "deeper": "var(--semantic-surface-static-inverse-deeper)", + "deepest": "var(--semantic-surface-static-inverse-deepest)" + } + } }, - interaction: { - bold: "var(--semantic-interaction-bold)", - normal: "var(--semantic-interaction-normal)", - inverse: { - focus: "var(--semantic-interaction-inverse-focus)", - bold: "var(--semantic-interaction-inverse-bold)", - normal: "var(--semantic-interaction-inverse-normal)", - assistive: "var(--semantic-interaction-inverse-assistive)", - subtle: "var(--semantic-interaction-inverse-subtle)", + "interaction": { + "bold": "var(--semantic-interaction-bold)", + "normal": "var(--semantic-interaction-normal)", + "inverse": { + "focus": "var(--semantic-interaction-inverse-focus)", + "bold": "var(--semantic-interaction-inverse-bold)", + "normal": "var(--semantic-interaction-inverse-normal)", + "assistive": "var(--semantic-interaction-inverse-assistive)", + "subtle": "var(--semantic-interaction-inverse-subtle)" }, - focus: "var(--semantic-interaction-focus)", - assistive: "var(--semantic-interaction-assistive)", - subtle: "var(--semantic-interaction-subtle)", + "focus": "var(--semantic-interaction-focus)", + "assistive": "var(--semantic-interaction-assistive)", + "subtle": "var(--semantic-interaction-subtle)" }, - stroke: { - neutral: "var(--semantic-stroke-neutral)", - alternative: "var(--semantic-stroke-alternative)", - assistive: "var(--semantic-stroke-assistive)", - normal: "var(--semantic-stroke-normal)", - bold: "var(--semantic-stroke-bold)", - alpha: { - bold: "var(--semantic-stroke-alpha-bold)", - normal: "var(--semantic-stroke-alpha-normal)", - neutral: "var(--semantic-stroke-alpha-neutral)", - alternative: "var(--semantic-stroke-alpha-alternative)", - assistive: "var(--semantic-stroke-alpha-assistive)", - subtle: "var(--semantic-stroke-alpha-subtle)", - inverse: { - bold: "var(--semantic-stroke-alpha-inverse-bold)", - normal: "var(--semantic-stroke-alpha-inverse-normal)", - neutral: "var(--semantic-stroke-alpha-inverse-neutral)", - alternative: "var(--semantic-stroke-alpha-inverse-alternative)", - assistive: "var(--semantic-stroke-alpha-inverse-assistive)", - subtle: "var(--semantic-stroke-alpha-inverse-subtle)", - subtler: "var(--semantic-stroke-alpha-inverse-subtler)", + "stroke": { + "neutral": "var(--semantic-stroke-neutral)", + "alternative": "var(--semantic-stroke-alternative)", + "assistive": "var(--semantic-stroke-assistive)", + "normal": "var(--semantic-stroke-normal)", + "bold": "var(--semantic-stroke-bold)", + "alpha": { + "bold": "var(--semantic-stroke-alpha-bold)", + "normal": "var(--semantic-stroke-alpha-normal)", + "neutral": "var(--semantic-stroke-alpha-neutral)", + "alternative": "var(--semantic-stroke-alpha-alternative)", + "assistive": "var(--semantic-stroke-alpha-assistive)", + "subtle": "var(--semantic-stroke-alpha-subtle)", + "inverse": { + "bold": "var(--semantic-stroke-alpha-inverse-bold)", + "normal": "var(--semantic-stroke-alpha-inverse-normal)", + "neutral": "var(--semantic-stroke-alpha-inverse-neutral)", + "alternative": "var(--semantic-stroke-alpha-inverse-alternative)", + "assistive": "var(--semantic-stroke-alpha-inverse-assistive)", + "subtle": "var(--semantic-stroke-alpha-inverse-subtle)", + "subtler": "var(--semantic-stroke-alpha-inverse-subtler)" }, - subtler: "var(--semantic-stroke-alpha-subtler)", + "subtler": "var(--semantic-stroke-alpha-subtler)" }, - subtle: "var(--semantic-stroke-subtle)", - inverse: { - bold: "var(--semantic-stroke-inverse-bold)", - normal: "var(--semantic-stroke-inverse-normal)", - neutral: "var(--semantic-stroke-inverse-neutral)", - alternative: "var(--semantic-stroke-inverse-alternative)", - assistive: "var(--semantic-stroke-inverse-assistive)", - subtle: "var(--semantic-stroke-inverse-subtle)", - subtler: "var(--semantic-stroke-inverse-subtler)", + "subtle": "var(--semantic-stroke-subtle)", + "inverse": { + "bold": "var(--semantic-stroke-inverse-bold)", + "normal": "var(--semantic-stroke-inverse-normal)", + "neutral": "var(--semantic-stroke-inverse-neutral)", + "alternative": "var(--semantic-stroke-inverse-alternative)", + "assistive": "var(--semantic-stroke-inverse-assistive)", + "subtle": "var(--semantic-stroke-inverse-subtle)", + "subtler": "var(--semantic-stroke-inverse-subtler)" }, - subtler: "var(--semantic-stroke-subtler)", + "subtler": "var(--semantic-stroke-subtler)" }, - fill: { - boldest: "var(--semantic-fill-boldest)", - bold: "var(--semantic-fill-bold)", - neutral: "var(--semantic-fill-neutral)", - alternative: "var(--semantic-fill-alternative)", - assistive: "var(--semantic-fill-assistive)", - inverse: { - boldest: "var(--semantic-fill-inverse-boldest)", - bold: "var(--semantic-fill-inverse-bold)", - neutral: "var(--semantic-fill-inverse-neutral)", - alternative: "var(--semantic-fill-inverse-alternative)", - assistive: "var(--semantic-fill-inverse-assistive)", - subtle: "var(--semantic-fill-inverse-subtle)", - subtler: "var(--semantic-fill-inverse-subtler)", - subtlest: "var(--semantic-fill-inverse-subtlest)", - bolder: "var(--semantic-fill-inverse-bolder)", - normal: "var(--semantic-fill-inverse-normal)", + "fill": { + "boldest": "var(--semantic-fill-boldest)", + "bold": "var(--semantic-fill-bold)", + "neutral": "var(--semantic-fill-neutral)", + "alternative": "var(--semantic-fill-alternative)", + "assistive": "var(--semantic-fill-assistive)", + "inverse": { + "boldest": "var(--semantic-fill-inverse-boldest)", + "bold": "var(--semantic-fill-inverse-bold)", + "neutral": "var(--semantic-fill-inverse-neutral)", + "alternative": "var(--semantic-fill-inverse-alternative)", + "assistive": "var(--semantic-fill-inverse-assistive)", + "subtle": "var(--semantic-fill-inverse-subtle)", + "subtler": "var(--semantic-fill-inverse-subtler)", + "subtlest": "var(--semantic-fill-inverse-subtlest)", + "bolder": "var(--semantic-fill-inverse-bolder)", + "normal": "var(--semantic-fill-inverse-normal)" }, - subtle: "var(--semantic-fill-subtle)", - subtler: "var(--semantic-fill-subtler)", - subtlest: "var(--semantic-fill-subtlest)", - bolder: "var(--semantic-fill-bolder)", - normal: "var(--semantic-fill-normal)", + "subtle": "var(--semantic-fill-subtle)", + "subtler": "var(--semantic-fill-subtler)", + "subtlest": "var(--semantic-fill-subtlest)", + "bolder": "var(--semantic-fill-bolder)", + "normal": "var(--semantic-fill-normal)" }, - system: { - white: "var(--semantic-system-white)", - black: "var(--semantic-system-black)", + "system": { + "white": "var(--semantic-system-white)", + "black": "var(--semantic-system-black)" }, - theme: { - red: { - bold: "var(--semantic-theme-red-bold)", - normal: "var(--semantic-theme-red-normal)", - neutral: "var(--semantic-theme-red-neutral)", - alternative: "var(--semantic-theme-red-alternative)", - assistive: "var(--semantic-theme-red-assistive)", - subtle: "var(--semantic-theme-red-subtle)", - subtler: "var(--semantic-theme-red-subtler)", - alpha: { - assistive: "var(--semantic-theme-red-alpha-assistive)", - subtle: "var(--semantic-theme-red-alpha-subtle)", - subtler: "var(--semantic-theme-red-alpha-subtler)", - subtlest: "var(--semantic-theme-red-alpha-subtlest)", + "theme": { + "red": { + "bold": "var(--semantic-theme-red-bold)", + "normal": "var(--semantic-theme-red-normal)", + "neutral": "var(--semantic-theme-red-neutral)", + "alternative": "var(--semantic-theme-red-alternative)", + "assistive": "var(--semantic-theme-red-assistive)", + "subtle": "var(--semantic-theme-red-subtle)", + "subtler": "var(--semantic-theme-red-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-red-alpha-assistive)", + "subtle": "var(--semantic-theme-red-alpha-subtle)", + "subtler": "var(--semantic-theme-red-alpha-subtler)", + "subtlest": "var(--semantic-theme-red-alpha-subtlest)" }, - bolder: "var(--semantic-theme-red-bolder)", + "bolder": "var(--semantic-theme-red-bolder)" }, - orange: { - bold: "var(--semantic-theme-orange-bold)", - normal: "var(--semantic-theme-orange-normal)", - neutral: "var(--semantic-theme-orange-neutral)", - alternative: "var(--semantic-theme-orange-alternative)", - assistive: "var(--semantic-theme-orange-assistive)", - subtle: "var(--semantic-theme-orange-subtle)", - subtler: "var(--semantic-theme-orange-subtler)", - alpha: { - assistive: "var(--semantic-theme-orange-alpha-assistive)", - subtle: "var(--semantic-theme-orange-alpha-subtle)", - subtler: "var(--semantic-theme-orange-alpha-subtler)", - subtlest: "var(--semantic-theme-orange-alpha-subtlest)", + "orange": { + "bold": "var(--semantic-theme-orange-bold)", + "normal": "var(--semantic-theme-orange-normal)", + "neutral": "var(--semantic-theme-orange-neutral)", + "alternative": "var(--semantic-theme-orange-alternative)", + "assistive": "var(--semantic-theme-orange-assistive)", + "subtle": "var(--semantic-theme-orange-subtle)", + "subtler": "var(--semantic-theme-orange-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-orange-alpha-assistive)", + "subtle": "var(--semantic-theme-orange-alpha-subtle)", + "subtler": "var(--semantic-theme-orange-alpha-subtler)", + "subtlest": "var(--semantic-theme-orange-alpha-subtlest)" }, - bolder: "var(--semantic-theme-orange-bolder)", + "bolder": "var(--semantic-theme-orange-bolder)" }, - amber: { - bold: "var(--semantic-theme-amber-bold)", - normal: "var(--semantic-theme-amber-normal)", - neutral: "var(--semantic-theme-amber-neutral)", - alternative: "var(--semantic-theme-amber-alternative)", - assistive: "var(--semantic-theme-amber-assistive)", - subtle: "var(--semantic-theme-amber-subtle)", - subtler: "var(--semantic-theme-amber-subtler)", - alpha: { - assistive: "var(--semantic-theme-amber-alpha-assistive)", - subtle: "var(--semantic-theme-amber-alpha-subtle)", - subtler: "var(--semantic-theme-amber-alpha-subtler)", - subtlest: "var(--semantic-theme-amber-alpha-subtlest)", + "amber": { + "bold": "var(--semantic-theme-amber-bold)", + "normal": "var(--semantic-theme-amber-normal)", + "neutral": "var(--semantic-theme-amber-neutral)", + "alternative": "var(--semantic-theme-amber-alternative)", + "assistive": "var(--semantic-theme-amber-assistive)", + "subtle": "var(--semantic-theme-amber-subtle)", + "subtler": "var(--semantic-theme-amber-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-amber-alpha-assistive)", + "subtle": "var(--semantic-theme-amber-alpha-subtle)", + "subtler": "var(--semantic-theme-amber-alpha-subtler)", + "subtlest": "var(--semantic-theme-amber-alpha-subtlest)" }, - bolder: "var(--semantic-theme-amber-bolder)", + "bolder": "var(--semantic-theme-amber-bolder)" }, - yellow: { - bold: "var(--semantic-theme-yellow-bold)", - normal: "var(--semantic-theme-yellow-normal)", - neutral: "var(--semantic-theme-yellow-neutral)", - alternative: "var(--semantic-theme-yellow-alternative)", - assistive: "var(--semantic-theme-yellow-assistive)", - subtle: "var(--semantic-theme-yellow-subtle)", - subtler: "var(--semantic-theme-yellow-subtler)", - alpha: { - assistive: "var(--semantic-theme-yellow-alpha-assistive)", - subtle: "var(--semantic-theme-yellow-alpha-subtle)", - subtler: "var(--semantic-theme-yellow-alpha-subtler)", - subtlest: "var(--semantic-theme-yellow-alpha-subtlest)", + "yellow": { + "bold": "var(--semantic-theme-yellow-bold)", + "normal": "var(--semantic-theme-yellow-normal)", + "neutral": "var(--semantic-theme-yellow-neutral)", + "alternative": "var(--semantic-theme-yellow-alternative)", + "assistive": "var(--semantic-theme-yellow-assistive)", + "subtle": "var(--semantic-theme-yellow-subtle)", + "subtler": "var(--semantic-theme-yellow-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-yellow-alpha-assistive)", + "subtle": "var(--semantic-theme-yellow-alpha-subtle)", + "subtler": "var(--semantic-theme-yellow-alpha-subtler)", + "subtlest": "var(--semantic-theme-yellow-alpha-subtlest)" }, - bolder: "var(--semantic-theme-yellow-bolder)", + "bolder": "var(--semantic-theme-yellow-bolder)" }, - lime: { - bold: "var(--semantic-theme-lime-bold)", - normal: "var(--semantic-theme-lime-normal)", - neutral: "var(--semantic-theme-lime-neutral)", - alternative: "var(--semantic-theme-lime-alternative)", - assistive: "var(--semantic-theme-lime-assistive)", - subtle: "var(--semantic-theme-lime-subtle)", - subtler: "var(--semantic-theme-lime-subtler)", - alpha: { - assistive: "var(--semantic-theme-lime-alpha-assistive)", - subtle: "var(--semantic-theme-lime-alpha-subtle)", - subtler: "var(--semantic-theme-lime-alpha-subtler)", - subtlest: "var(--semantic-theme-lime-alpha-subtlest)", + "lime": { + "bold": "var(--semantic-theme-lime-bold)", + "normal": "var(--semantic-theme-lime-normal)", + "neutral": "var(--semantic-theme-lime-neutral)", + "alternative": "var(--semantic-theme-lime-alternative)", + "assistive": "var(--semantic-theme-lime-assistive)", + "subtle": "var(--semantic-theme-lime-subtle)", + "subtler": "var(--semantic-theme-lime-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-lime-alpha-assistive)", + "subtle": "var(--semantic-theme-lime-alpha-subtle)", + "subtler": "var(--semantic-theme-lime-alpha-subtler)", + "subtlest": "var(--semantic-theme-lime-alpha-subtlest)" }, - bolder: "var(--semantic-theme-lime-bolder)", + "bolder": "var(--semantic-theme-lime-bolder)" }, - green: { - bold: "var(--semantic-theme-green-bold)", - normal: "var(--semantic-theme-green-normal)", - neutral: "var(--semantic-theme-green-neutral)", - alternative: "var(--semantic-theme-green-alternative)", - assistive: "var(--semantic-theme-green-assistive)", - subtle: "var(--semantic-theme-green-subtle)", - subtler: "var(--semantic-theme-green-subtler)", - alpha: { - assistive: "var(--semantic-theme-green-alpha-assistive)", - subtle: "var(--semantic-theme-green-alpha-subtle)", - subtler: "var(--semantic-theme-green-alpha-subtler)", - subtlest: "var(--semantic-theme-green-alpha-subtlest)", + "green": { + "bold": "var(--semantic-theme-green-bold)", + "normal": "var(--semantic-theme-green-normal)", + "neutral": "var(--semantic-theme-green-neutral)", + "alternative": "var(--semantic-theme-green-alternative)", + "assistive": "var(--semantic-theme-green-assistive)", + "subtle": "var(--semantic-theme-green-subtle)", + "subtler": "var(--semantic-theme-green-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-green-alpha-assistive)", + "subtle": "var(--semantic-theme-green-alpha-subtle)", + "subtler": "var(--semantic-theme-green-alpha-subtler)", + "subtlest": "var(--semantic-theme-green-alpha-subtlest)" }, - bolder: "var(--semantic-theme-green-bolder)", + "bolder": "var(--semantic-theme-green-bolder)" }, - emerald: { - bold: "var(--semantic-theme-emerald-bold)", - normal: "var(--semantic-theme-emerald-normal)", - neutral: "var(--semantic-theme-emerald-neutral)", - alternative: "var(--semantic-theme-emerald-alternative)", - assistive: "var(--semantic-theme-emerald-assistive)", - subtle: "var(--semantic-theme-emerald-subtle)", - subtler: "var(--semantic-theme-emerald-subtler)", - alpha: { - assistive: "var(--semantic-theme-emerald-alpha-assistive)", - subtle: "var(--semantic-theme-emerald-alpha-subtle)", - subtler: "var(--semantic-theme-emerald-alpha-subtler)", - subtlest: "var(--semantic-theme-emerald-alpha-subtlest)", + "emerald": { + "bold": "var(--semantic-theme-emerald-bold)", + "normal": "var(--semantic-theme-emerald-normal)", + "neutral": "var(--semantic-theme-emerald-neutral)", + "alternative": "var(--semantic-theme-emerald-alternative)", + "assistive": "var(--semantic-theme-emerald-assistive)", + "subtle": "var(--semantic-theme-emerald-subtle)", + "subtler": "var(--semantic-theme-emerald-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-emerald-alpha-assistive)", + "subtle": "var(--semantic-theme-emerald-alpha-subtle)", + "subtler": "var(--semantic-theme-emerald-alpha-subtler)", + "subtlest": "var(--semantic-theme-emerald-alpha-subtlest)" }, - bolder: "var(--semantic-theme-emerald-bolder)", + "bolder": "var(--semantic-theme-emerald-bolder)" }, - teal: { - bold: "var(--semantic-theme-teal-bold)", - normal: "var(--semantic-theme-teal-normal)", - neutral: "var(--semantic-theme-teal-neutral)", - alternative: "var(--semantic-theme-teal-alternative)", - assistive: "var(--semantic-theme-teal-assistive)", - subtle: "var(--semantic-theme-teal-subtle)", - subtler: "var(--semantic-theme-teal-subtler)", - alpha: { - assistive: "var(--semantic-theme-teal-alpha-assistive)", - subtle: "var(--semantic-theme-teal-alpha-subtle)", - subtler: "var(--semantic-theme-teal-alpha-subtler)", - subtlest: "var(--semantic-theme-teal-alpha-subtlest)", + "teal": { + "bold": "var(--semantic-theme-teal-bold)", + "normal": "var(--semantic-theme-teal-normal)", + "neutral": "var(--semantic-theme-teal-neutral)", + "alternative": "var(--semantic-theme-teal-alternative)", + "assistive": "var(--semantic-theme-teal-assistive)", + "subtle": "var(--semantic-theme-teal-subtle)", + "subtler": "var(--semantic-theme-teal-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-teal-alpha-assistive)", + "subtle": "var(--semantic-theme-teal-alpha-subtle)", + "subtler": "var(--semantic-theme-teal-alpha-subtler)", + "subtlest": "var(--semantic-theme-teal-alpha-subtlest)" }, - bolder: "var(--semantic-theme-teal-bolder)", + "bolder": "var(--semantic-theme-teal-bolder)" }, - cyan: { - bold: "var(--semantic-theme-cyan-bold)", - normal: "var(--semantic-theme-cyan-normal)", - neutral: "var(--semantic-theme-cyan-neutral)", - alternative: "var(--semantic-theme-cyan-alternative)", - assistive: "var(--semantic-theme-cyan-assistive)", - subtle: "var(--semantic-theme-cyan-subtle)", - subtler: "var(--semantic-theme-cyan-subtler)", - alpha: { - assistive: "var(--semantic-theme-cyan-alpha-assistive)", - subtle: "var(--semantic-theme-cyan-alpha-subtle)", - subtler: "var(--semantic-theme-cyan-alpha-subtler)", - subtlest: "var(--semantic-theme-cyan-alpha-subtlest)", + "cyan": { + "bold": "var(--semantic-theme-cyan-bold)", + "normal": "var(--semantic-theme-cyan-normal)", + "neutral": "var(--semantic-theme-cyan-neutral)", + "alternative": "var(--semantic-theme-cyan-alternative)", + "assistive": "var(--semantic-theme-cyan-assistive)", + "subtle": "var(--semantic-theme-cyan-subtle)", + "subtler": "var(--semantic-theme-cyan-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-cyan-alpha-assistive)", + "subtle": "var(--semantic-theme-cyan-alpha-subtle)", + "subtler": "var(--semantic-theme-cyan-alpha-subtler)", + "subtlest": "var(--semantic-theme-cyan-alpha-subtlest)" }, - bolder: "var(--semantic-theme-cyan-bolder)", + "bolder": "var(--semantic-theme-cyan-bolder)" }, - sky: { - bold: "var(--semantic-theme-sky-bold)", - normal: "var(--semantic-theme-sky-normal)", - neutral: "var(--semantic-theme-sky-neutral)", - alternative: "var(--semantic-theme-sky-alternative)", - assistive: "var(--semantic-theme-sky-assistive)", - subtle: "var(--semantic-theme-sky-subtle)", - subtler: "var(--semantic-theme-sky-subtler)", - alpha: { - assistive: "var(--semantic-theme-sky-alpha-assistive)", - subtle: "var(--semantic-theme-sky-alpha-subtle)", - subtler: "var(--semantic-theme-sky-alpha-subtler)", - subtlest: "var(--semantic-theme-sky-alpha-subtlest)", + "sky": { + "bold": "var(--semantic-theme-sky-bold)", + "normal": "var(--semantic-theme-sky-normal)", + "neutral": "var(--semantic-theme-sky-neutral)", + "alternative": "var(--semantic-theme-sky-alternative)", + "assistive": "var(--semantic-theme-sky-assistive)", + "subtle": "var(--semantic-theme-sky-subtle)", + "subtler": "var(--semantic-theme-sky-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-sky-alpha-assistive)", + "subtle": "var(--semantic-theme-sky-alpha-subtle)", + "subtler": "var(--semantic-theme-sky-alpha-subtler)", + "subtlest": "var(--semantic-theme-sky-alpha-subtlest)" }, - bolder: "var(--semantic-theme-sky-bolder)", + "bolder": "var(--semantic-theme-sky-bolder)" }, - blue: { - bold: "var(--semantic-theme-blue-bold)", - normal: "var(--semantic-theme-blue-normal)", - neutral: "var(--semantic-theme-blue-neutral)", - alternative: "var(--semantic-theme-blue-alternative)", - assistive: "var(--semantic-theme-blue-assistive)", - subtle: "var(--semantic-theme-blue-subtle)", - subtler: "var(--semantic-theme-blue-subtler)", - alpha: { - assistive: "var(--semantic-theme-blue-alpha-assistive)", - subtle: "var(--semantic-theme-blue-alpha-subtle)", - subtler: "var(--semantic-theme-blue-alpha-subtler)", - subtlest: "var(--semantic-theme-blue-alpha-subtlest)", + "blue": { + "bold": "var(--semantic-theme-blue-bold)", + "normal": "var(--semantic-theme-blue-normal)", + "neutral": "var(--semantic-theme-blue-neutral)", + "alternative": "var(--semantic-theme-blue-alternative)", + "assistive": "var(--semantic-theme-blue-assistive)", + "subtle": "var(--semantic-theme-blue-subtle)", + "subtler": "var(--semantic-theme-blue-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-blue-alpha-assistive)", + "subtle": "var(--semantic-theme-blue-alpha-subtle)", + "subtler": "var(--semantic-theme-blue-alpha-subtler)", + "subtlest": "var(--semantic-theme-blue-alpha-subtlest)" }, - bolder: "var(--semantic-theme-blue-bolder)", + "bolder": "var(--semantic-theme-blue-bolder)" }, - violet: { - bold: "var(--semantic-theme-violet-bold)", - normal: "var(--semantic-theme-violet-normal)", - neutral: "var(--semantic-theme-violet-neutral)", - alternative: "var(--semantic-theme-violet-alternative)", - assistive: "var(--semantic-theme-violet-assistive)", - subtle: "var(--semantic-theme-violet-subtle)", - subtler: "var(--semantic-theme-violet-subtler)", - alpha: { - assistive: "var(--semantic-theme-violet-alpha-assistive)", - subtle: "var(--semantic-theme-violet-alpha-subtle)", - subtler: "var(--semantic-theme-violet-alpha-subtler)", - subtlest: "var(--semantic-theme-violet-alpha-subtlest)", + "violet": { + "bold": "var(--semantic-theme-violet-bold)", + "normal": "var(--semantic-theme-violet-normal)", + "neutral": "var(--semantic-theme-violet-neutral)", + "alternative": "var(--semantic-theme-violet-alternative)", + "assistive": "var(--semantic-theme-violet-assistive)", + "subtle": "var(--semantic-theme-violet-subtle)", + "subtler": "var(--semantic-theme-violet-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-violet-alpha-assistive)", + "subtle": "var(--semantic-theme-violet-alpha-subtle)", + "subtler": "var(--semantic-theme-violet-alpha-subtler)", + "subtlest": "var(--semantic-theme-violet-alpha-subtlest)" }, - bolder: "var(--semantic-theme-violet-bolder)", + "bolder": "var(--semantic-theme-violet-bolder)" }, - purple: { - bold: "var(--semantic-theme-purple-bold)", - normal: "var(--semantic-theme-purple-normal)", - neutral: "var(--semantic-theme-purple-neutral)", - alternative: "var(--semantic-theme-purple-alternative)", - assistive: "var(--semantic-theme-purple-assistive)", - subtle: "var(--semantic-theme-purple-subtle)", - subtler: "var(--semantic-theme-purple-subtler)", - alpha: { - assistive: "var(--semantic-theme-purple-alpha-assistive)", - subtle: "var(--semantic-theme-purple-alpha-subtle)", - subtler: "var(--semantic-theme-purple-alpha-subtler)", - subtlest: "var(--semantic-theme-purple-alpha-subtlest)", + "purple": { + "bold": "var(--semantic-theme-purple-bold)", + "normal": "var(--semantic-theme-purple-normal)", + "neutral": "var(--semantic-theme-purple-neutral)", + "alternative": "var(--semantic-theme-purple-alternative)", + "assistive": "var(--semantic-theme-purple-assistive)", + "subtle": "var(--semantic-theme-purple-subtle)", + "subtler": "var(--semantic-theme-purple-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-purple-alpha-assistive)", + "subtle": "var(--semantic-theme-purple-alpha-subtle)", + "subtler": "var(--semantic-theme-purple-alpha-subtler)", + "subtlest": "var(--semantic-theme-purple-alpha-subtlest)" }, - bolder: "var(--semantic-theme-purple-bolder)", + "bolder": "var(--semantic-theme-purple-bolder)" }, - fuchsia: { - bold: "var(--semantic-theme-fuchsia-bold)", - normal: "var(--semantic-theme-fuchsia-normal)", - neutral: "var(--semantic-theme-fuchsia-neutral)", - alternative: "var(--semantic-theme-fuchsia-alternative)", - assistive: "var(--semantic-theme-fuchsia-assistive)", - subtle: "var(--semantic-theme-fuchsia-subtle)", - subtler: "var(--semantic-theme-fuchsia-subtler)", - alpha: { - assistive: "var(--semantic-theme-fuchsia-alpha-assistive)", - subtle: "var(--semantic-theme-fuchsia-alpha-subtle)", - subtler: "var(--semantic-theme-fuchsia-alpha-subtler)", - subtlest: "var(--semantic-theme-fuchsia-alpha-subtlest)", + "fuchsia": { + "bold": "var(--semantic-theme-fuchsia-bold)", + "normal": "var(--semantic-theme-fuchsia-normal)", + "neutral": "var(--semantic-theme-fuchsia-neutral)", + "alternative": "var(--semantic-theme-fuchsia-alternative)", + "assistive": "var(--semantic-theme-fuchsia-assistive)", + "subtle": "var(--semantic-theme-fuchsia-subtle)", + "subtler": "var(--semantic-theme-fuchsia-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-fuchsia-alpha-assistive)", + "subtle": "var(--semantic-theme-fuchsia-alpha-subtle)", + "subtler": "var(--semantic-theme-fuchsia-alpha-subtler)", + "subtlest": "var(--semantic-theme-fuchsia-alpha-subtlest)" }, - bolder: "var(--semantic-theme-fuchsia-bolder)", + "bolder": "var(--semantic-theme-fuchsia-bolder)" }, - pink: { - bold: "var(--semantic-theme-pink-bold)", - normal: "var(--semantic-theme-pink-normal)", - neutral: "var(--semantic-theme-pink-neutral)", - alternative: "var(--semantic-theme-pink-alternative)", - assistive: "var(--semantic-theme-pink-assistive)", - subtle: "var(--semantic-theme-pink-subtle)", - subtler: "var(--semantic-theme-pink-subtler)", - alpha: { - assistive: "var(--semantic-theme-pink-alpha-assistive)", - subtle: "var(--semantic-theme-pink-alpha-subtle)", - subtler: "var(--semantic-theme-pink-alpha-subtler)", - subtlest: "var(--semantic-theme-pink-alpha-subtlest)", + "pink": { + "bold": "var(--semantic-theme-pink-bold)", + "normal": "var(--semantic-theme-pink-normal)", + "neutral": "var(--semantic-theme-pink-neutral)", + "alternative": "var(--semantic-theme-pink-alternative)", + "assistive": "var(--semantic-theme-pink-assistive)", + "subtle": "var(--semantic-theme-pink-subtle)", + "subtler": "var(--semantic-theme-pink-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-pink-alpha-assistive)", + "subtle": "var(--semantic-theme-pink-alpha-subtle)", + "subtler": "var(--semantic-theme-pink-alpha-subtler)", + "subtlest": "var(--semantic-theme-pink-alpha-subtlest)" }, - bolder: "var(--semantic-theme-pink-bolder)", + "bolder": "var(--semantic-theme-pink-bolder)" }, - rose: { - bold: "var(--semantic-theme-rose-bold)", - normal: "var(--semantic-theme-rose-normal)", - neutral: "var(--semantic-theme-rose-neutral)", - alternative: "var(--semantic-theme-rose-alternative)", - assistive: "var(--semantic-theme-rose-assistive)", - subtle: "var(--semantic-theme-rose-subtle)", - subtler: "var(--semantic-theme-rose-subtler)", - alpha: { - assistive: "var(--semantic-theme-rose-alpha-assistive)", - subtle: "var(--semantic-theme-rose-alpha-subtle)", - subtler: "var(--semantic-theme-rose-alpha-subtler)", - subtlest: "var(--semantic-theme-rose-alpha-subtlest)", + "rose": { + "bold": "var(--semantic-theme-rose-bold)", + "normal": "var(--semantic-theme-rose-normal)", + "neutral": "var(--semantic-theme-rose-neutral)", + "alternative": "var(--semantic-theme-rose-alternative)", + "assistive": "var(--semantic-theme-rose-assistive)", + "subtle": "var(--semantic-theme-rose-subtle)", + "subtler": "var(--semantic-theme-rose-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-rose-alpha-assistive)", + "subtle": "var(--semantic-theme-rose-alpha-subtle)", + "subtler": "var(--semantic-theme-rose-alpha-subtler)", + "subtlest": "var(--semantic-theme-rose-alpha-subtlest)" }, - bolder: "var(--semantic-theme-rose-bolder)", - }, + "bolder": "var(--semantic-theme-rose-bolder)" + } }, - curtain: { - bright: "var(--semantic-curtain-bright)", - dim: "var(--semantic-curtain-dim)", - dimmer: "var(--semantic-curtain-dimmer)", + "curtain": { + "static": { + "bright": "var(--semantic-curtain-static-bright)", + "dim": "var(--semantic-curtain-static-dim)", + "dimmer": "var(--semantic-curtain-static-dimmer)" + }, + "standard": "var(--semantic-curtain-standard)" }, - feedback: { - positive: { - alpha: { - subtle: "var(--semantic-feedback-positive-alpha-subtle)", - assistive: "var(--semantic-feedback-positive-alpha-assistive)", - subtler: "var(--semantic-feedback-positive-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-positive-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-positive-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-positive-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-positive-alpha-inverse-subtlest)", + "feedback": { + "positive": { + "alpha": { + "subtle": "var(--semantic-feedback-positive-alpha-subtle)", + "assistive": "var(--semantic-feedback-positive-alpha-assistive)", + "subtler": "var(--semantic-feedback-positive-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-positive-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-positive-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-positive-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-positive-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-positive-alpha-subtlest)", + "subtlest": "var(--semantic-feedback-positive-alpha-subtlest)" }, - normal: "var(--semantic-feedback-positive-normal)", - bold: "var(--semantic-feedback-positive-bold)", - inverse: { - bold: "var(--semantic-feedback-positive-inverse-bold)", - normal: "var(--semantic-feedback-positive-inverse-normal)", - neutral: "var(--semantic-feedback-positive-inverse-neutral)", - alternative: "var(--semantic-feedback-positive-inverse-alternative)", - assistive: "var(--semantic-feedback-positive-inverse-assistive)", - subtle: "var(--semantic-feedback-positive-inverse-subtle)", - subtler: "var(--semantic-feedback-positive-inverse-subtler)", - bolder: "var(--semantic-feedback-positive-inverse-bolder)", + "normal": "var(--semantic-feedback-positive-normal)", + "bold": "var(--semantic-feedback-positive-bold)", + "inverse": { + "bold": "var(--semantic-feedback-positive-inverse-bold)", + "normal": "var(--semantic-feedback-positive-inverse-normal)", + "neutral": "var(--semantic-feedback-positive-inverse-neutral)", + "alternative": "var(--semantic-feedback-positive-inverse-alternative)", + "assistive": "var(--semantic-feedback-positive-inverse-assistive)", + "subtle": "var(--semantic-feedback-positive-inverse-subtle)", + "subtler": "var(--semantic-feedback-positive-inverse-subtler)", + "bolder": "var(--semantic-feedback-positive-inverse-bolder)" }, - assistive: "var(--semantic-feedback-positive-assistive)", - subtler: "var(--semantic-feedback-positive-subtler)", - neutral: "var(--semantic-feedback-positive-neutral)", - alternative: "var(--semantic-feedback-positive-alternative)", - subtle: "var(--semantic-feedback-positive-subtle)", - bolder: "var(--semantic-feedback-positive-bolder)", + "assistive": "var(--semantic-feedback-positive-assistive)", + "subtler": "var(--semantic-feedback-positive-subtler)", + "neutral": "var(--semantic-feedback-positive-neutral)", + "alternative": "var(--semantic-feedback-positive-alternative)", + "subtle": "var(--semantic-feedback-positive-subtle)", + "bolder": "var(--semantic-feedback-positive-bolder)" }, - destructive: { - bold: "var(--semantic-feedback-destructive-bold)", - inverse: { - bold: "var(--semantic-feedback-destructive-inverse-bold)", - normal: "var(--semantic-feedback-destructive-inverse-normal)", - neutral: "var(--semantic-feedback-destructive-inverse-neutral)", - alternative: "var(--semantic-feedback-destructive-inverse-alternative)", - assistive: "var(--semantic-feedback-destructive-inverse-assistive)", - subtle: "var(--semantic-feedback-destructive-inverse-subtle)", - subtler: "var(--semantic-feedback-destructive-inverse-subtler)", - bolder: "var(--semantic-feedback-destructive-inverse-bolder)", + "destructive": { + "bold": "var(--semantic-feedback-destructive-bold)", + "inverse": { + "bold": "var(--semantic-feedback-destructive-inverse-bold)", + "normal": "var(--semantic-feedback-destructive-inverse-normal)", + "neutral": "var(--semantic-feedback-destructive-inverse-neutral)", + "alternative": "var(--semantic-feedback-destructive-inverse-alternative)", + "assistive": "var(--semantic-feedback-destructive-inverse-assistive)", + "subtle": "var(--semantic-feedback-destructive-inverse-subtle)", + "subtler": "var(--semantic-feedback-destructive-inverse-subtler)", + "bolder": "var(--semantic-feedback-destructive-inverse-bolder)" }, - normal: "var(--semantic-feedback-destructive-normal)", - alpha: { - assistive: "var(--semantic-feedback-destructive-alpha-assistive)", - subtle: "var(--semantic-feedback-destructive-alpha-subtle)", - subtler: "var(--semantic-feedback-destructive-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-destructive-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-destructive-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-destructive-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-destructive-alpha-inverse-subtlest)", + "normal": "var(--semantic-feedback-destructive-normal)", + "alpha": { + "assistive": "var(--semantic-feedback-destructive-alpha-assistive)", + "subtle": "var(--semantic-feedback-destructive-alpha-subtle)", + "subtler": "var(--semantic-feedback-destructive-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-destructive-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-destructive-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-destructive-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-destructive-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-destructive-alpha-subtlest)", + "subtlest": "var(--semantic-feedback-destructive-alpha-subtlest)" }, - neutral: "var(--semantic-feedback-destructive-neutral)", - alternative: "var(--semantic-feedback-destructive-alternative)", - assistive: "var(--semantic-feedback-destructive-assistive)", - subtle: "var(--semantic-feedback-destructive-subtle)", - subtler: "var(--semantic-feedback-destructive-subtler)", - bolder: "var(--semantic-feedback-destructive-bolder)", + "neutral": "var(--semantic-feedback-destructive-neutral)", + "alternative": "var(--semantic-feedback-destructive-alternative)", + "assistive": "var(--semantic-feedback-destructive-assistive)", + "subtle": "var(--semantic-feedback-destructive-subtle)", + "subtler": "var(--semantic-feedback-destructive-subtler)", + "bolder": "var(--semantic-feedback-destructive-bolder)" }, - notifying: { - bold: "var(--semantic-feedback-notifying-bold)", - normal: "var(--semantic-feedback-notifying-normal)", - neutral: "var(--semantic-feedback-notifying-neutral)", - alternative: "var(--semantic-feedback-notifying-alternative)", - assistive: "var(--semantic-feedback-notifying-assistive)", - subtle: "var(--semantic-feedback-notifying-subtle)", - subtler: "var(--semantic-feedback-notifying-subtler)", - inverse: { - bold: "var(--semantic-feedback-notifying-inverse-bold)", - normal: "var(--semantic-feedback-notifying-inverse-normal)", - neutral: "var(--semantic-feedback-notifying-inverse-neutral)", - alternative: "var(--semantic-feedback-notifying-inverse-alternative)", - assistive: "var(--semantic-feedback-notifying-inverse-assistive)", - subtle: "var(--semantic-feedback-notifying-inverse-subtle)", - subtler: "var(--semantic-feedback-notifying-inverse-subtler)", - bolder: "var(--semantic-feedback-notifying-inverse-bolder)", + "notifying": { + "bold": "var(--semantic-feedback-notifying-bold)", + "normal": "var(--semantic-feedback-notifying-normal)", + "neutral": "var(--semantic-feedback-notifying-neutral)", + "alternative": "var(--semantic-feedback-notifying-alternative)", + "assistive": "var(--semantic-feedback-notifying-assistive)", + "subtle": "var(--semantic-feedback-notifying-subtle)", + "subtler": "var(--semantic-feedback-notifying-subtler)", + "inverse": { + "bold": "var(--semantic-feedback-notifying-inverse-bold)", + "normal": "var(--semantic-feedback-notifying-inverse-normal)", + "neutral": "var(--semantic-feedback-notifying-inverse-neutral)", + "alternative": "var(--semantic-feedback-notifying-inverse-alternative)", + "assistive": "var(--semantic-feedback-notifying-inverse-assistive)", + "subtle": "var(--semantic-feedback-notifying-inverse-subtle)", + "subtler": "var(--semantic-feedback-notifying-inverse-subtler)", + "bolder": "var(--semantic-feedback-notifying-inverse-bolder)" }, - alpha: { - assistive: "var(--semantic-feedback-notifying-alpha-assistive)", - subtle: "var(--semantic-feedback-notifying-alpha-subtle)", - subtler: "var(--semantic-feedback-notifying-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-notifying-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-notifying-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-notifying-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-notifying-alpha-inverse-subtlest)", + "alpha": { + "assistive": "var(--semantic-feedback-notifying-alpha-assistive)", + "subtle": "var(--semantic-feedback-notifying-alpha-subtle)", + "subtler": "var(--semantic-feedback-notifying-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-notifying-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-notifying-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-notifying-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-notifying-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-notifying-alpha-subtlest)", + "subtlest": "var(--semantic-feedback-notifying-alpha-subtlest)" }, - bolder: "var(--semantic-feedback-notifying-bolder)", - }, - }, - }, + "bolder": "var(--semantic-feedback-notifying-bolder)" + } + } + } }, - scheme: { - semantic: { - spacing: { + "scheme": { + "semantic": { + "spacing": { "0": "var(--semantic-spacing-0)", "1": "var(--semantic-spacing-1)", "2": "var(--semantic-spacing-2)", @@ -1183,9 +1186,9 @@ export const theme = { "96": "var(--semantic-spacing-96)", "112": "var(--semantic-spacing-112)", "128": "var(--semantic-spacing-128)", - "144": "var(--semantic-spacing-144)", + "144": "var(--semantic-spacing-144)" }, - radius: { + "radius": { "0": "var(--semantic-radius-0)", "2": "var(--semantic-radius-2)", "4": "var(--semantic-radius-4)", @@ -1195,17 +1198,17 @@ export const theme = { "12": "var(--semantic-radius-12)", "16": "var(--semantic-radius-16)", "24": "var(--semantic-radius-24)", - max: "var(--semantic-radius-max)", + "max": "var(--semantic-radius-max)" }, - strokeWeight: { + "strokeWeight": { "1": "var(--semantic-stroke-weight-1)", "2": "var(--semantic-stroke-weight-2)", "3": "var(--semantic-stroke-weight-3)", "4": "var(--semantic-stroke-weight-4)", "5": "var(--semantic-stroke-weight-5)", - "6": "var(--semantic-stroke-weight-6)", + "6": "var(--semantic-stroke-weight-6)" }, - opacity: { + "opacity": { "0": "var(--semantic-opacity-0)", "5": "var(--semantic-opacity-5)", "8": "var(--semantic-opacity-8)", @@ -1219,23 +1222,32 @@ export const theme = { "63": "var(--semantic-opacity-63)", "76": "var(--semantic-opacity-76)", "91": "var(--semantic-opacity-91)", - "100": "var(--semantic-opacity-100)", + "100": "var(--semantic-opacity-100)" }, - breakpoint: { - min: "var(--semantic-breakpoint-min)", - max: "var(--semantic-breakpoint-max)", + "breakpoint": { + "min": "var(--semantic-breakpoint-min)", + "max": "var(--semantic-breakpoint-max)", + "grid": { + "container": { + "min": "var(--semantic-breakpoint-grid-container-min)", + "max": "var(--semantic-breakpoint-grid-container-max)" + } + } }, - margin: { - lg: "var(--semantic-margin-lg)", - md: "var(--semantic-margin-md)", - sm: "var(--semantic-margin-sm)", - xl: "var(--semantic-margin-xl)", + "margin": { + "lg": "var(--semantic-margin-lg)", + "md": "var(--semantic-margin-md)", + "sm": "var(--semantic-margin-sm)", + "xl": "var(--semantic-margin-xl)", "2xl": "var(--semantic-margin-2xl)", "3xl": "var(--semantic-margin-3xl)", - xs: "var(--semantic-margin-xs)", + "xs": "var(--semantic-margin-xs)", "2xs": "var(--semantic-margin-2xs)", + "4xl": "var(--semantic-margin-4xl)", + "5xl": "var(--semantic-margin-5xl)", + "6xl": "var(--semantic-margin-6xl)" }, - position: { + "position": { "0": "var(--semantic-position-0)", "1": "var(--semantic-position-1)", "2": "var(--semantic-position-2)", @@ -1245,11 +1257,11 @@ export const theme = { "8": "var(--semantic-position-8)", "12": "var(--semantic-position-12)", "16": "var(--semantic-position-16)", - "24": "var(--semantic-position-24)", - }, + "24": "var(--semantic-position-24)" + } }, - primitive: { - unit: { + "primitive": { + "unit": { "0": "var(--primitive-unit-0)", "1": "var(--primitive-unit-1)", "2": "var(--primitive-unit-2)", @@ -1274,13 +1286,13 @@ export const theme = { "96": "var(--primitive-unit-96)", "112": "var(--primitive-unit-112)", "128": "var(--primitive-unit-128)", - "144": "var(--primitive-unit-144)", - }, - }, + "144": "var(--primitive-unit-144)" + } + } }, - environment: { - semantic: { - duration: { + "environment": { + "semantic": { + "duration": { "50": "var(--semantic-duration-50)", "100": "var(--semantic-duration-100)", "150": "var(--semantic-duration-150)", @@ -1290,17 +1302,17 @@ export const theme = { "350": "var(--semantic-duration-350)", "400": "var(--semantic-duration-400)", "450": "var(--semantic-duration-450)", - "500": "var(--semantic-duration-500)", - }, - motion: { - bouncy: "var(--semantic-motion-bouncy)", - fluent: "var(--semantic-motion-fluent)", - leave: "var(--semantic-motion-leave)", - entrance: "var(--semantic-motion-entrance)", + "500": "var(--semantic-duration-500)" }, + "motion": { + "bouncy": "var(--semantic-motion-bouncy)", + "fluent": "var(--semantic-motion-fluent)", + "leave": "var(--semantic-motion-leave)", + "entrance": "var(--semantic-motion-entrance)" + } }, - primitive: { - time: { + "primitive": { + "time": { "50": "var(--primitive-time-50)", "100": "var(--primitive-time-100)", "150": "var(--primitive-time-150)", @@ -1310,449 +1322,443 @@ export const theme = { "350": "var(--primitive-time-350)", "400": "var(--primitive-time-400)", "450": "var(--primitive-time-450)", - "500": "var(--primitive-time-500)", - }, - }, + "500": "var(--primitive-time-500)" + } + } }, - typo: { - primitive: { - typeface: { - hero: "var(--primitive-typeface-hero)", - syntax: "var(--primitive-typeface-syntax)", - title: "var(--primitive-typeface-title)", - label: "var(--primitive-typeface-label)", - body: "var(--primitive-typeface-body)", + "typo": { + "primitive": { + "typeface": { + "hero": "var(--primitive-typeface-hero)", + "syntax": "var(--primitive-typeface-syntax)", + "title": "var(--primitive-typeface-title)", + "label": "var(--primitive-typeface-label)", + "body": "var(--primitive-typeface-body)" }, - fontSize: { - hero: { + "fontSize": { + "hero": { "1": "var(--primitive-font-size-hero-1)", - "2": "var(--primitive-font-size-hero-2)", - "3": "var(--primitive-font-size-hero-3)", - "4": "var(--primitive-font-size-hero-4)", + "2": "var(--primitive-font-size-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-size-title-1)", "2": "var(--primitive-font-size-title-2)", "3": "var(--primitive-font-size-title-3)", - "4": "var(--primitive-font-size-title-4)", - }, - body: { - lg: "var(--primitive-font-size-body-lg)", - md: "var(--primitive-font-size-body-md)", - sm: "var(--primitive-font-size-body-sm)", - xs: "var(--primitive-font-size-body-xs)", - "2xs": "var(--primitive-font-size-body-2xs)", + "4": "var(--primitive-font-size-title-4)" }, - label: { - lg: "var(--primitive-font-size-label-lg)", - md: "var(--primitive-font-size-label-md)", - sm: "var(--primitive-font-size-label-sm)", - xs: "var(--primitive-font-size-label-xs)", + "body": { + "lg": "var(--primitive-font-size-body-lg)", + "md": "var(--primitive-font-size-body-md)", + "sm": "var(--primitive-font-size-body-sm)", + "xs": "var(--primitive-font-size-body-xs)", + "2xs": "var(--primitive-font-size-body-2xs)" }, - syntax: { - lg: "var(--primitive-font-size-syntax-lg)", - md: "var(--primitive-font-size-syntax-md)", - sm: "var(--primitive-font-size-syntax-sm)", - xs: "var(--primitive-font-size-syntax-xs)", + "label": { + "lg": "var(--primitive-font-size-label-lg)", + "md": "var(--primitive-font-size-label-md)", + "sm": "var(--primitive-font-size-label-sm)", + "xs": "var(--primitive-font-size-label-xs)" }, + "syntax": { + "lg": "var(--primitive-font-size-syntax-lg)", + "md": "var(--primitive-font-size-syntax-md)", + "sm": "var(--primitive-font-size-syntax-sm)", + "xs": "var(--primitive-font-size-syntax-xs)" + } }, - font: { - lineHeight: { - hero: { + "font": { + "lineHeight": { + "hero": { "1": "var(--primitive-font-line-height-hero-1)", - "2": "var(--primitive-font-line-height-hero-2)", - "3": "var(--primitive-font-line-height-hero-3)", - "4": "var(--primitive-font-line-height-hero-4)", + "2": "var(--primitive-font-line-height-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-line-height-title-1)", "2": "var(--primitive-font-line-height-title-2)", "3": "var(--primitive-font-line-height-title-3)", - "4": "var(--primitive-font-line-height-title-4)", - }, - label: { - lg: "var(--primitive-font-line-height-label-lg)", - md: "var(--primitive-font-line-height-label-md)", - sm: "var(--primitive-font-line-height-label-sm)", - xs: "var(--primitive-font-line-height-label-xs)", + "4": "var(--primitive-font-line-height-title-4)" }, - body: { - lg: "var(--primitive-font-line-height-body-lg)", - md: "var(--primitive-font-line-height-body-md)", - sm: "var(--primitive-font-line-height-body-sm)", - xs: "var(--primitive-font-line-height-body-xs)", - "2xs": "var(--primitive-font-line-height-body-2xs)", + "label": { + "lg": "var(--primitive-font-line-height-label-lg)", + "md": "var(--primitive-font-line-height-label-md)", + "sm": "var(--primitive-font-line-height-label-sm)", + "xs": "var(--primitive-font-line-height-label-xs)" }, - syntax: { - lg: "var(--primitive-font-line-height-syntax-lg)", - md: "var(--primitive-font-line-height-syntax-md)", - sm: "var(--primitive-font-line-height-syntax-sm)", - xs: "var(--primitive-font-line-height-syntax-xs)", + "body": { + "lg": "var(--primitive-font-line-height-body-lg)", + "md": "var(--primitive-font-line-height-body-md)", + "sm": "var(--primitive-font-line-height-body-sm)", + "xs": "var(--primitive-font-line-height-body-xs)", + "2xs": "var(--primitive-font-line-height-body-2xs)" }, + "syntax": { + "lg": "var(--primitive-font-line-height-syntax-lg)", + "md": "var(--primitive-font-line-height-syntax-md)", + "sm": "var(--primitive-font-line-height-syntax-sm)", + "xs": "var(--primitive-font-line-height-syntax-xs)" + } }, - letterSpacing: { - hero: { + "letterSpacing": { + "hero": { "1": "var(--primitive-font-letter-spacing-hero-1)", - "2": "var(--primitive-font-letter-spacing-hero-2)", - "3": "var(--primitive-font-letter-spacing-hero-3)", - "4": "var(--primitive-font-letter-spacing-hero-4)", + "2": "var(--primitive-font-letter-spacing-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-letter-spacing-title-1)", "2": "var(--primitive-font-letter-spacing-title-2)", "3": "var(--primitive-font-letter-spacing-title-3)", - "4": "var(--primitive-font-letter-spacing-title-4)", + "4": "var(--primitive-font-letter-spacing-title-4)" }, - label: { - lg: "var(--primitive-font-letter-spacing-label-lg)", - md: "var(--primitive-font-letter-spacing-label-md)", - sm: "var(--primitive-font-letter-spacing-label-sm)", - xs: "var(--primitive-font-letter-spacing-label-xs)", + "label": { + "lg": "var(--primitive-font-letter-spacing-label-lg)", + "md": "var(--primitive-font-letter-spacing-label-md)", + "sm": "var(--primitive-font-letter-spacing-label-sm)", + "xs": "var(--primitive-font-letter-spacing-label-xs)" }, - body: { - lg: "var(--primitive-font-letter-spacing-body-lg)", - md: "var(--primitive-font-letter-spacing-body-md)", - sm: "var(--primitive-font-letter-spacing-body-sm)", - xs: "var(--primitive-font-letter-spacing-body-xs)", - "2xs": "var(--primitive-font-letter-spacing-body-2xs)", - }, - }, + "body": { + "lg": "var(--primitive-font-letter-spacing-body-lg)", + "md": "var(--primitive-font-letter-spacing-body-md)", + "sm": "var(--primitive-font-letter-spacing-body-sm)", + "xs": "var(--primitive-font-letter-spacing-body-xs)", + "2xs": "var(--primitive-font-letter-spacing-body-2xs)" + } + } }, - fontWeight: { - hero: { - normal: "var(--primitive-font-weight-hero-normal)", - bold: "var(--primitive-font-weight-hero-bold)", + "fontWeight": { + "hero": { + "normal": "var(--primitive-font-weight-hero-normal)", + "bold": "var(--primitive-font-weight-hero-bold)" }, - title: { - normal: "var(--primitive-font-weight-title-normal)", - bold: "var(--primitive-font-weight-title-bold)", + "title": { + "normal": "var(--primitive-font-weight-title-normal)", + "bold": "var(--primitive-font-weight-title-bold)" }, - label: { - normal: "var(--primitive-font-weight-label-normal)", - bold: "var(--primitive-font-weight-label-bold)", - subtle: "var(--primitive-font-weight-label-subtle)", + "label": { + "normal": "var(--primitive-font-weight-label-normal)", + "bold": "var(--primitive-font-weight-label-bold)", + "subtle": "var(--primitive-font-weight-label-subtle)" }, - body: { - normal: "var(--primitive-font-weight-body-normal)", - bold: "var(--primitive-font-weight-body-bold)", + "body": { + "normal": "var(--primitive-font-weight-body-normal)", + "bold": "var(--primitive-font-weight-body-bold)" }, - syntax: { - normal: "var(--primitive-font-weight-syntax-normal)", - }, - }, - }, + "syntax": { + "normal": "var(--primitive-font-weight-syntax-normal)" + } + } + } }, - textStyle: { + "textStyle": { "semantic-textStyle-hero-4": { - fontSize: "var(--primitive-font-size-hero-4)", - lineHeight: "var(--primitive-font-line-height-hero-4)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-4)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-4)", + "lineHeight": "var(--primitive-font-line-height-hero-4)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-4)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-3": { - fontSize: "var(--primitive-font-size-hero-3)", - lineHeight: "var(--primitive-font-line-height-hero-3)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-3)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-3)", + "lineHeight": "var(--primitive-font-line-height-hero-3)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-3)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-2": { - fontSize: "var(--primitive-font-size-hero-2)", - lineHeight: "var(--primitive-font-line-height-hero-2)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-2)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-2)", + "lineHeight": "var(--primitive-font-line-height-hero-2)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-2)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-1": { - fontSize: "var(--primitive-font-size-hero-1)", - lineHeight: "var(--primitive-font-line-height-hero-1)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-1)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-1)", + "lineHeight": "var(--primitive-font-line-height-hero-1)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-1)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-4": { - fontSize: "var(--primitive-font-size-title-4)", - lineHeight: "var(--primitive-font-line-height-title-4)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-title-4)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-4)", + "lineHeight": "var(--primitive-font-line-height-title-4)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-4)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-3": { - fontSize: "var(--primitive-font-size-title-3)", - lineHeight: "var(--primitive-font-line-height-title-3)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-title-3)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-3)", + "lineHeight": "var(--primitive-font-line-height-title-3)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-3)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-2": { - fontSize: "var(--primitive-font-size-title-2)", - lineHeight: "var(--primitive-font-line-height-title-2)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-title-2)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-2)", + "lineHeight": "var(--primitive-font-line-height-title-2)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-2)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-1": { - fontSize: "var(--primitive-font-size-title-1)", - lineHeight: "var(--primitive-font-line-height-title-1)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-title-1)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-1)", + "lineHeight": "var(--primitive-font-line-height-title-1)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-1)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-bold": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-normal": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-subtle": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-bold": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-normal": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-subtle": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-bold": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-normal": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-subtle": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-bold": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-normal": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-subtle": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-lg-bold": { - fontSize: "var(--primitive-font-size-body-lg)", - lineHeight: "var(--primitive-font-line-height-body-lg)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-lg)", + "lineHeight": "var(--primitive-font-line-height-body-lg)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-lg-normal": { - fontSize: "var(--primitive-font-size-body-lg)", - lineHeight: "var(--primitive-font-line-height-body-lg)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-lg)", + "lineHeight": "var(--primitive-font-line-height-body-lg)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-md-bold": { - fontSize: "var(--primitive-font-size-body-md)", - lineHeight: "var(--primitive-font-line-height-body-md)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-md)", + "lineHeight": "var(--primitive-font-line-height-body-md)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-md-normal": { - fontSize: "var(--primitive-font-size-body-md)", - lineHeight: "var(--primitive-font-line-height-body-md)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-md)", + "lineHeight": "var(--primitive-font-line-height-body-md)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-sm-bold": { - fontSize: "var(--primitive-font-size-body-sm)", - lineHeight: "var(--primitive-font-line-height-body-sm)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-sm)", + "lineHeight": "var(--primitive-font-line-height-body-sm)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-sm-normal": { - fontSize: "var(--primitive-font-size-body-sm)", - lineHeight: "var(--primitive-font-line-height-body-sm)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-sm)", + "lineHeight": "var(--primitive-font-line-height-body-sm)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-xs-bold": { - fontSize: "var(--primitive-font-size-body-xs)", - lineHeight: "var(--primitive-font-line-height-body-xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-xs)", + "lineHeight": "var(--primitive-font-line-height-body-xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-xs-normal": { - fontSize: "var(--primitive-font-size-body-xs)", - lineHeight: "var(--primitive-font-line-height-body-xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-xs)", + "lineHeight": "var(--primitive-font-line-height-body-xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-2xs-bold": { - fontSize: "var(--primitive-font-size-body-2xs)", - lineHeight: "var(--primitive-font-line-height-body-2xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-2xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-2xs)", + "lineHeight": "var(--primitive-font-line-height-body-2xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-2xs-normal": { - fontSize: "var(--primitive-font-size-body-2xs)", - lineHeight: "var(--primitive-font-line-height-body-2xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-2xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-2xs)", + "lineHeight": "var(--primitive-font-line-height-body-2xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-lg": { - fontSize: "var(--primitive-font-size-syntax-lg)", - lineHeight: "var(--primitive-font-line-height-syntax-lg)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-lg)", + "lineHeight": "var(--primitive-font-line-height-syntax-lg)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-md": { - fontSize: "var(--primitive-font-size-syntax-md)", - lineHeight: "var(--primitive-font-line-height-syntax-md)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-md)", + "lineHeight": "var(--primitive-font-line-height-syntax-md)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-sm": { - fontSize: "var(--primitive-font-size-syntax-sm)", - lineHeight: "var(--primitive-font-line-height-syntax-sm)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-sm)", + "lineHeight": "var(--primitive-font-line-height-syntax-sm)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-xs": { - fontSize: "var(--primitive-font-size-syntax-xs)", - lineHeight: "var(--primitive-font-line-height-syntax-xs)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", - }, - }, - breakPoint: { - desktop: "@media (min-width: 1200px) and (max-width: 2560px)", - tablet: "@media (min-width: 768px) and (max-width: 1199px)", - mobile: "@media (min-width: 320px) and (max-width: 767px)", + "fontSize": "var(--primitive-font-size-syntax-xs)", + "lineHeight": "var(--primitive-font-line-height-syntax-xs)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + } }, + "breakPoint": { + "desktop": "@media (min-width: 1200px) and (max-width: 2560px)", + "tablet": "@media (min-width: 768px) and (max-width: 1199px)", + "mobile": "@media (min-width: 320px) and (max-width: 767px)" + } } as const; diff --git a/packages/jds/src/tokens/tokens.ts b/packages/jds/src/tokens/tokens.ts index e9ed5c64d..14da04d4f 100644 --- a/packages/jds/src/tokens/tokens.ts +++ b/packages/jds/src/tokens/tokens.ts @@ -1,10 +1,10 @@ // 자동 생성된 디자인 토큰 - 수정 금지 -// 생성 시간: 11/21/2025, 5:05:04 PM +// 생성 시간: 2026. 3. 17. 오후 9:51:04 export const designTokens = { - colorPrimitive: { - primitive: { - flow: { + "colorPrimitive": { + "primitive": { + "flow": { "20": "var(--primitive-flow-20)", "40": "var(--primitive-flow-40)", "60": "var(--primitive-flow-60)", @@ -29,8 +29,8 @@ export const designTokens = { "860": "var(--primitive-flow-860)", "880": "var(--primitive-flow-880)", "900": "var(--primitive-flow-900)", - dark: { - alpha: { + "dark": { + "alpha": { "20": "var(--primitive-flow-dark-alpha-20)", "40": "var(--primitive-flow-dark-alpha-40)", "60": "var(--primitive-flow-dark-alpha-60)", @@ -54,11 +54,11 @@ export const designTokens = { "840": "var(--primitive-flow-dark-alpha-840)", "860": "var(--primitive-flow-dark-alpha-860)", "880": "var(--primitive-flow-dark-alpha-880)", - "900": "var(--primitive-flow-dark-alpha-900)", - }, + "900": "var(--primitive-flow-dark-alpha-900)" + } }, - light: { - alpha: { + "light": { + "alpha": { "20": "var(--primitive-flow-light-alpha-20)", "40": "var(--primitive-flow-light-alpha-40)", "60": "var(--primitive-flow-light-alpha-60)", @@ -82,11 +82,11 @@ export const designTokens = { "840": "var(--primitive-flow-light-alpha-840)", "860": "var(--primitive-flow-light-alpha-860)", "880": "var(--primitive-flow-light-alpha-880)", - "900": "var(--primitive-flow-light-alpha-900)", - }, - }, + "900": "var(--primitive-flow-light-alpha-900)" + } + } }, - red: { + "red": { "20": "var(--primitive-red-20)", "40": "var(--primitive-red-40)", "60": "var(--primitive-red-60)", @@ -110,21 +110,21 @@ export const designTokens = { "840": "var(--primitive-red-840)", "860": "var(--primitive-red-860)", "880": "var(--primitive-red-880)", - "900": "var(--primitive-red-900)", + "900": "var(--primitive-red-900)" }, - shade: { + "shade": { "2": "var(--primitive-shade-2)", "4": "var(--primitive-shade-4)", "6": "var(--primitive-shade-6)", "8": "var(--primitive-shade-8)", "12": "var(--primitive-shade-12)", - "16": "var(--primitive-shade-16)", + "16": "var(--primitive-shade-16)" }, - base: { + "base": { "0": "var(--primitive-base-0)", - "1000": "var(--primitive-base-1000)", + "1000": "var(--primitive-base-1000)" }, - orange: { + "orange": { "20": "var(--primitive-orange-20)", "40": "var(--primitive-orange-40)", "60": "var(--primitive-orange-60)", @@ -148,9 +148,9 @@ export const designTokens = { "840": "var(--primitive-orange-840)", "860": "var(--primitive-orange-860)", "880": "var(--primitive-orange-880)", - "900": "var(--primitive-orange-900)", + "900": "var(--primitive-orange-900)" }, - yellow: { + "yellow": { "20": "var(--primitive-yellow-20)", "40": "var(--primitive-yellow-40)", "60": "var(--primitive-yellow-60)", @@ -174,9 +174,9 @@ export const designTokens = { "840": "var(--primitive-yellow-840)", "860": "var(--primitive-yellow-860)", "880": "var(--primitive-yellow-880)", - "900": "var(--primitive-yellow-900)", + "900": "var(--primitive-yellow-900)" }, - lime: { + "lime": { "20": "var(--primitive-lime-20)", "40": "var(--primitive-lime-40)", "60": "var(--primitive-lime-60)", @@ -200,9 +200,9 @@ export const designTokens = { "840": "var(--primitive-lime-840)", "860": "var(--primitive-lime-860)", "880": "var(--primitive-lime-880)", - "900": "var(--primitive-lime-900)", + "900": "var(--primitive-lime-900)" }, - green: { + "green": { "20": "var(--primitive-green-20)", "40": "var(--primitive-green-40)", "60": "var(--primitive-green-60)", @@ -226,9 +226,9 @@ export const designTokens = { "840": "var(--primitive-green-840)", "860": "var(--primitive-green-860)", "880": "var(--primitive-green-880)", - "900": "var(--primitive-green-900)", + "900": "var(--primitive-green-900)" }, - cyan: { + "cyan": { "20": "var(--primitive-cyan-20)", "40": "var(--primitive-cyan-40)", "60": "var(--primitive-cyan-60)", @@ -252,9 +252,9 @@ export const designTokens = { "840": "var(--primitive-cyan-840)", "860": "var(--primitive-cyan-860)", "880": "var(--primitive-cyan-880)", - "900": "var(--primitive-cyan-900)", + "900": "var(--primitive-cyan-900)" }, - sky: { + "sky": { "20": "var(--primitive-sky-20)", "40": "var(--primitive-sky-40)", "60": "var(--primitive-sky-60)", @@ -278,9 +278,9 @@ export const designTokens = { "840": "var(--primitive-sky-840)", "860": "var(--primitive-sky-860)", "880": "var(--primitive-sky-880)", - "900": "var(--primitive-sky-900)", + "900": "var(--primitive-sky-900)" }, - blue: { + "blue": { "20": "var(--primitive-blue-20)", "40": "var(--primitive-blue-40)", "60": "var(--primitive-blue-60)", @@ -304,10 +304,10 @@ export const designTokens = { "840": "var(--primitive-blue-840)", "860": "var(--primitive-blue-860)", "880": "var(--primitive-blue-880)", - "900": "var(--primitive-blue-900)", + "900": "var(--primitive-blue-900)" }, - cerulean: { - blue: { + "cerulean": { + "blue": { "20": "var(--primitive-cerulean-blue-20)", "40": "var(--primitive-cerulean-blue-40)", "60": "var(--primitive-cerulean-blue-60)", @@ -331,10 +331,10 @@ export const designTokens = { "840": "var(--primitive-cerulean-blue-840)", "860": "var(--primitive-cerulean-blue-860)", "880": "var(--primitive-cerulean-blue-880)", - "900": "var(--primitive-cerulean-blue-900)", - }, + "900": "var(--primitive-cerulean-blue-900)" + } }, - violet: { + "violet": { "20": "var(--primitive-violet-20)", "40": "var(--primitive-violet-40)", "60": "var(--primitive-violet-60)", @@ -358,9 +358,9 @@ export const designTokens = { "840": "var(--primitive-violet-840)", "860": "var(--primitive-violet-860)", "880": "var(--primitive-violet-880)", - "900": "var(--primitive-violet-900)", + "900": "var(--primitive-violet-900)" }, - purple: { + "purple": { "20": "var(--primitive-purple-20)", "40": "var(--primitive-purple-40)", "60": "var(--primitive-purple-60)", @@ -384,9 +384,9 @@ export const designTokens = { "840": "var(--primitive-purple-840)", "860": "var(--primitive-purple-860)", "880": "var(--primitive-purple-880)", - "900": "var(--primitive-purple-900)", + "900": "var(--primitive-purple-900)" }, - fuchsia: { + "fuchsia": { "20": "var(--primitive-fuchsia-20)", "40": "var(--primitive-fuchsia-40)", "60": "var(--primitive-fuchsia-60)", @@ -410,9 +410,9 @@ export const designTokens = { "840": "var(--primitive-fuchsia-840)", "860": "var(--primitive-fuchsia-860)", "880": "var(--primitive-fuchsia-880)", - "900": "var(--primitive-fuchsia-900)", + "900": "var(--primitive-fuchsia-900)" }, - pink: { + "pink": { "20": "var(--primitive-pink-20)", "40": "var(--primitive-pink-40)", "60": "var(--primitive-pink-60)", @@ -436,9 +436,9 @@ export const designTokens = { "840": "var(--primitive-pink-840)", "860": "var(--primitive-pink-860)", "880": "var(--primitive-pink-880)", - "900": "var(--primitive-pink-900)", + "900": "var(--primitive-pink-900)" }, - rose: { + "rose": { "20": "var(--primitive-rose-20)", "40": "var(--primitive-rose-40)", "60": "var(--primitive-rose-60)", @@ -462,9 +462,9 @@ export const designTokens = { "840": "var(--primitive-rose-840)", "860": "var(--primitive-rose-860)", "880": "var(--primitive-rose-880)", - "900": "var(--primitive-rose-900)", + "900": "var(--primitive-rose-900)" }, - engross: { + "engross": { "20": "var(--primitive-engross-20)", "40": "var(--primitive-engross-40)", "60": "var(--primitive-engross-60)", @@ -488,9 +488,9 @@ export const designTokens = { "840": "var(--primitive-engross-840)", "860": "var(--primitive-engross-860)", "880": "var(--primitive-engross-880)", - "900": "var(--primitive-engross-900)", + "900": "var(--primitive-engross-900)" }, - emerald: { + "emerald": { "20": "var(--primitive-emerald-20)", "40": "var(--primitive-emerald-40)", "60": "var(--primitive-emerald-60)", @@ -514,9 +514,9 @@ export const designTokens = { "840": "var(--primitive-emerald-840)", "860": "var(--primitive-emerald-860)", "880": "var(--primitive-emerald-880)", - "900": "var(--primitive-emerald-900)", + "900": "var(--primitive-emerald-900)" }, - teal: { + "teal": { "20": "var(--primitive-teal-20)", "40": "var(--primitive-teal-40)", "60": "var(--primitive-teal-60)", @@ -540,9 +540,9 @@ export const designTokens = { "840": "var(--primitive-teal-840)", "860": "var(--primitive-teal-860)", "880": "var(--primitive-teal-880)", - "900": "var(--primitive-teal-900)", + "900": "var(--primitive-teal-900)" }, - amber: { + "amber": { "20": "var(--primitive-amber-20)", "40": "var(--primitive-amber-40)", "60": "var(--primitive-amber-60)", @@ -566,9 +566,9 @@ export const designTokens = { "840": "var(--primitive-amber-840)", "860": "var(--primitive-amber-860)", "880": "var(--primitive-amber-880)", - "900": "var(--primitive-amber-900)", + "900": "var(--primitive-amber-900)" }, - immerse: { + "immerse": { "20": "var(--primitive-immerse-20)", "40": "var(--primitive-immerse-40)", "60": "var(--primitive-immerse-60)", @@ -592,1138 +592,1144 @@ export const designTokens = { "840": "var(--primitive-immerse-840)", "860": "var(--primitive-immerse-860)", "880": "var(--primitive-immerse-880)", - "900": "var(--primitive-immerse-900)", - }, - }, + "900": "var(--primitive-immerse-900)" + } + } }, - colorSemantic: { - light: { - semantic: { - accent: { - alpha: { - assistive: "var(--semantic-accent-alpha-assistive)", - subtle: "var(--semantic-accent-alpha-subtle)", - subtler: "var(--semantic-accent-alpha-subtler)", - inverse: { - subtle: "var(--semantic-accent-alpha-inverse-subtle)", - subtler: "var(--semantic-accent-alpha-inverse-subtler)", - subtlest: "var(--semantic-accent-alpha-inverse-subtlest)", - assistive: "var(--semantic-accent-alpha-inverse-assistive)", - }, - subtlest: "var(--semantic-accent-alpha-subtlest)", - }, - bold: "var(--semantic-accent-bold)", - normal: "var(--semantic-accent-normal)", - neutral: "var(--semantic-accent-neutral)", - inverse: { - bold: "var(--semantic-accent-inverse-bold)", - normal: "var(--semantic-accent-inverse-normal)", - neutral: "var(--semantic-accent-inverse-neutral)", - alternative: "var(--semantic-accent-inverse-alternative)", - assistive: "var(--semantic-accent-inverse-assistive)", - subtle: "var(--semantic-accent-inverse-subtle)", - bolder: "var(--semantic-accent-inverse-bolder)", - subtler: "var(--semantic-accent-inverse-subtler)", - subtlest: "var(--semantic-accent-inverse-subtlest)", - }, - alternative: "var(--semantic-accent-alternative)", - assistive: "var(--semantic-accent-assistive)", - subtle: "var(--semantic-accent-subtle)", - subtler: "var(--semantic-accent-subtler)", - bolder: "var(--semantic-accent-bolder)", - subtlest: "var(--semantic-accent-subtlest)", + "colorSemantic": { + "light": { + "semantic": { + "accent": { + "alpha": { + "assistive": "var(--semantic-accent-alpha-assistive)", + "subtle": "var(--semantic-accent-alpha-subtle)", + "subtler": "var(--semantic-accent-alpha-subtler)", + "inverse": { + "subtle": "var(--semantic-accent-alpha-inverse-subtle)", + "subtler": "var(--semantic-accent-alpha-inverse-subtler)", + "subtlest": "var(--semantic-accent-alpha-inverse-subtlest)", + "assistive": "var(--semantic-accent-alpha-inverse-assistive)" + }, + "subtlest": "var(--semantic-accent-alpha-subtlest)" + }, + "bold": "var(--semantic-accent-bold)", + "normal": "var(--semantic-accent-normal)", + "neutral": "var(--semantic-accent-neutral)", + "inverse": { + "bold": "var(--semantic-accent-inverse-bold)", + "normal": "var(--semantic-accent-inverse-normal)", + "neutral": "var(--semantic-accent-inverse-neutral)", + "alternative": "var(--semantic-accent-inverse-alternative)", + "assistive": "var(--semantic-accent-inverse-assistive)", + "subtle": "var(--semantic-accent-inverse-subtle)", + "bolder": "var(--semantic-accent-inverse-bolder)", + "subtler": "var(--semantic-accent-inverse-subtler)", + "subtlest": "var(--semantic-accent-inverse-subtlest)" + }, + "alternative": "var(--semantic-accent-alternative)", + "assistive": "var(--semantic-accent-assistive)", + "subtle": "var(--semantic-accent-subtle)", + "subtler": "var(--semantic-accent-subtler)", + "bolder": "var(--semantic-accent-bolder)", + "subtlest": "var(--semantic-accent-subtlest)" }, - object: { - neutral: "var(--semantic-object-neutral)", - alternative: "var(--semantic-object-alternative)", - assistive: "var(--semantic-object-assistive)", - subtle: "var(--semantic-object-subtle)", - inverse: { - neutral: "var(--semantic-object-inverse-neutral)", - alternative: "var(--semantic-object-inverse-alternative)", - assistive: "var(--semantic-object-inverse-assistive)", - subtle: "var(--semantic-object-inverse-subtle)", - boldest: "var(--semantic-object-inverse-boldest)", - bold: "var(--semantic-object-inverse-bold)", - bolder: "var(--semantic-object-inverse-bolder)", - normal: "var(--semantic-object-inverse-normal)", - subtler: "var(--semantic-object-inverse-subtler)", - subtlest: "var(--semantic-object-inverse-subtlest)", - }, - boldest: "var(--semantic-object-boldest)", - bold: "var(--semantic-object-bold)", - static: { - boldest: "var(--semantic-object-static-boldest)", - bold: "var(--semantic-object-static-bold)", - neutral: "var(--semantic-object-static-neutral)", - alternative: "var(--semantic-object-static-alternative)", - assistive: "var(--semantic-object-static-assistive)", - subtle: "var(--semantic-object-static-subtle)", - inverse: { - boldest: "var(--semantic-object-static-inverse-boldest)", - bold: "var(--semantic-object-static-inverse-bold)", - neutral: "var(--semantic-object-static-inverse-neutral)", - alternative: "var(--semantic-object-static-inverse-alternative)", - assistive: "var(--semantic-object-static-inverse-assistive)", - subtle: "var(--semantic-object-static-inverse-subtle)", - bolder: "var(--semantic-object-static-inverse-bolder)", - normal: "var(--semantic-object-static-inverse-normal)", - subtler: "var(--semantic-object-static-inverse-subtler)", - subtlest: "var(--semantic-object-static-inverse-subtlest)", - }, - bolder: "var(--semantic-object-static-bolder)", - normal: "var(--semantic-object-static-normal)", - subtler: "var(--semantic-object-static-subtler)", - subtlest: "var(--semantic-object-static-subtlest)", - }, - bolder: "var(--semantic-object-bolder)", - normal: "var(--semantic-object-normal)", - subtler: "var(--semantic-object-subtler)", - subtlest: "var(--semantic-object-subtlest)", + "object": { + "neutral": "var(--semantic-object-neutral)", + "alternative": "var(--semantic-object-alternative)", + "assistive": "var(--semantic-object-assistive)", + "subtle": "var(--semantic-object-subtle)", + "inverse": { + "neutral": "var(--semantic-object-inverse-neutral)", + "alternative": "var(--semantic-object-inverse-alternative)", + "assistive": "var(--semantic-object-inverse-assistive)", + "subtle": "var(--semantic-object-inverse-subtle)", + "boldest": "var(--semantic-object-inverse-boldest)", + "bold": "var(--semantic-object-inverse-bold)", + "bolder": "var(--semantic-object-inverse-bolder)", + "normal": "var(--semantic-object-inverse-normal)", + "subtler": "var(--semantic-object-inverse-subtler)", + "subtlest": "var(--semantic-object-inverse-subtlest)" + }, + "boldest": "var(--semantic-object-boldest)", + "bold": "var(--semantic-object-bold)", + "static": { + "boldest": "var(--semantic-object-static-boldest)", + "bold": "var(--semantic-object-static-bold)", + "neutral": "var(--semantic-object-static-neutral)", + "alternative": "var(--semantic-object-static-alternative)", + "assistive": "var(--semantic-object-static-assistive)", + "subtle": "var(--semantic-object-static-subtle)", + "inverse": { + "boldest": "var(--semantic-object-static-inverse-boldest)", + "bold": "var(--semantic-object-static-inverse-bold)", + "neutral": "var(--semantic-object-static-inverse-neutral)", + "alternative": "var(--semantic-object-static-inverse-alternative)", + "assistive": "var(--semantic-object-static-inverse-assistive)", + "subtle": "var(--semantic-object-static-inverse-subtle)", + "bolder": "var(--semantic-object-static-inverse-bolder)", + "normal": "var(--semantic-object-static-inverse-normal)", + "subtler": "var(--semantic-object-static-inverse-subtler)", + "subtlest": "var(--semantic-object-static-inverse-subtlest)" + }, + "bolder": "var(--semantic-object-static-bolder)", + "normal": "var(--semantic-object-static-normal)", + "subtler": "var(--semantic-object-static-subtler)", + "subtlest": "var(--semantic-object-static-subtlest)" + }, + "bolder": "var(--semantic-object-bolder)", + "normal": "var(--semantic-object-normal)", + "subtler": "var(--semantic-object-subtler)", + "subtlest": "var(--semantic-object-subtlest)" }, - surface: { - standard: "var(--semantic-surface-standard)", - deep: "var(--semantic-surface-deep)", - deeper: "var(--semantic-surface-deeper)", - deepest: "var(--semantic-surface-deepest)", - inverse: { - standard: "var(--semantic-surface-inverse-standard)", - deep: "var(--semantic-surface-inverse-deep)", - deeper: "var(--semantic-surface-inverse-deeper)", - deepest: "var(--semantic-surface-inverse-deepest)", - shallow: "var(--semantic-surface-inverse-shallow)", - shallower: "var(--semantic-surface-inverse-shallower)", - shallowest: "var(--semantic-surface-inverse-shallowest)", - }, - shallow: "var(--semantic-surface-shallow)", - shallower: "var(--semantic-surface-shallower)", - shallowest: "var(--semantic-surface-shallowest)", - static: { - shallowest: "var(--semantic-surface-static-shallowest)", - shallower: "var(--semantic-surface-static-shallower)", - shallow: "var(--semantic-surface-static-shallow)", - standard: "var(--semantic-surface-static-standard)", - deep: "var(--semantic-surface-static-deep)", - deeper: "var(--semantic-surface-static-deeper)", - deepest: "var(--semantic-surface-static-deepest)", - inverse: { - shallowest: "var(--semantic-surface-static-inverse-shallowest)", - shallower: "var(--semantic-surface-static-inverse-shallower)", - shallow: "var(--semantic-surface-static-inverse-shallow)", - standard: "var(--semantic-surface-static-inverse-standard)", - deep: "var(--semantic-surface-static-inverse-deep)", - deeper: "var(--semantic-surface-static-inverse-deeper)", - deepest: "var(--semantic-surface-static-inverse-deepest)", - }, - }, + "surface": { + "standard": "var(--semantic-surface-standard)", + "deep": "var(--semantic-surface-deep)", + "deeper": "var(--semantic-surface-deeper)", + "deepest": "var(--semantic-surface-deepest)", + "inverse": { + "standard": "var(--semantic-surface-inverse-standard)", + "deep": "var(--semantic-surface-inverse-deep)", + "deeper": "var(--semantic-surface-inverse-deeper)", + "deepest": "var(--semantic-surface-inverse-deepest)", + "shallow": "var(--semantic-surface-inverse-shallow)", + "shallower": "var(--semantic-surface-inverse-shallower)", + "shallowest": "var(--semantic-surface-inverse-shallowest)" + }, + "shallow": "var(--semantic-surface-shallow)", + "shallower": "var(--semantic-surface-shallower)", + "shallowest": "var(--semantic-surface-shallowest)", + "static": { + "shallowest": "var(--semantic-surface-static-shallowest)", + "shallower": "var(--semantic-surface-static-shallower)", + "shallow": "var(--semantic-surface-static-shallow)", + "standard": "var(--semantic-surface-static-standard)", + "deep": "var(--semantic-surface-static-deep)", + "deeper": "var(--semantic-surface-static-deeper)", + "deepest": "var(--semantic-surface-static-deepest)", + "inverse": { + "shallowest": "var(--semantic-surface-static-inverse-shallowest)", + "shallower": "var(--semantic-surface-static-inverse-shallower)", + "shallow": "var(--semantic-surface-static-inverse-shallow)", + "standard": "var(--semantic-surface-static-inverse-standard)", + "deep": "var(--semantic-surface-static-inverse-deep)", + "deeper": "var(--semantic-surface-static-inverse-deeper)", + "deepest": "var(--semantic-surface-static-inverse-deepest)" + } + } }, - interaction: { - bold: "var(--semantic-interaction-bold)", - normal: "var(--semantic-interaction-normal)", - inverse: { - focus: "var(--semantic-interaction-inverse-focus)", - bold: "var(--semantic-interaction-inverse-bold)", - normal: "var(--semantic-interaction-inverse-normal)", - assistive: "var(--semantic-interaction-inverse-assistive)", - subtle: "var(--semantic-interaction-inverse-subtle)", - }, - focus: "var(--semantic-interaction-focus)", - assistive: "var(--semantic-interaction-assistive)", - subtle: "var(--semantic-interaction-subtle)", + "interaction": { + "bold": "var(--semantic-interaction-bold)", + "normal": "var(--semantic-interaction-normal)", + "inverse": { + "focus": "var(--semantic-interaction-inverse-focus)", + "bold": "var(--semantic-interaction-inverse-bold)", + "normal": "var(--semantic-interaction-inverse-normal)", + "assistive": "var(--semantic-interaction-inverse-assistive)", + "subtle": "var(--semantic-interaction-inverse-subtle)" + }, + "focus": "var(--semantic-interaction-focus)", + "assistive": "var(--semantic-interaction-assistive)", + "subtle": "var(--semantic-interaction-subtle)" }, - stroke: { - neutral: "var(--semantic-stroke-neutral)", - alternative: "var(--semantic-stroke-alternative)", - assistive: "var(--semantic-stroke-assistive)", - normal: "var(--semantic-stroke-normal)", - bold: "var(--semantic-stroke-bold)", - alpha: { - bold: "var(--semantic-stroke-alpha-bold)", - normal: "var(--semantic-stroke-alpha-normal)", - neutral: "var(--semantic-stroke-alpha-neutral)", - alternative: "var(--semantic-stroke-alpha-alternative)", - assistive: "var(--semantic-stroke-alpha-assistive)", - subtle: "var(--semantic-stroke-alpha-subtle)", - inverse: { - bold: "var(--semantic-stroke-alpha-inverse-bold)", - normal: "var(--semantic-stroke-alpha-inverse-normal)", - neutral: "var(--semantic-stroke-alpha-inverse-neutral)", - alternative: "var(--semantic-stroke-alpha-inverse-alternative)", - assistive: "var(--semantic-stroke-alpha-inverse-assistive)", - subtle: "var(--semantic-stroke-alpha-inverse-subtle)", - subtler: "var(--semantic-stroke-alpha-inverse-subtler)", - }, - subtler: "var(--semantic-stroke-alpha-subtler)", - }, - subtle: "var(--semantic-stroke-subtle)", - inverse: { - bold: "var(--semantic-stroke-inverse-bold)", - normal: "var(--semantic-stroke-inverse-normal)", - neutral: "var(--semantic-stroke-inverse-neutral)", - alternative: "var(--semantic-stroke-inverse-alternative)", - assistive: "var(--semantic-stroke-inverse-assistive)", - subtle: "var(--semantic-stroke-inverse-subtle)", - subtler: "var(--semantic-stroke-inverse-subtler)", - }, - subtler: "var(--semantic-stroke-subtler)", + "stroke": { + "neutral": "var(--semantic-stroke-neutral)", + "alternative": "var(--semantic-stroke-alternative)", + "assistive": "var(--semantic-stroke-assistive)", + "normal": "var(--semantic-stroke-normal)", + "bold": "var(--semantic-stroke-bold)", + "alpha": { + "bold": "var(--semantic-stroke-alpha-bold)", + "normal": "var(--semantic-stroke-alpha-normal)", + "neutral": "var(--semantic-stroke-alpha-neutral)", + "alternative": "var(--semantic-stroke-alpha-alternative)", + "assistive": "var(--semantic-stroke-alpha-assistive)", + "subtle": "var(--semantic-stroke-alpha-subtle)", + "inverse": { + "bold": "var(--semantic-stroke-alpha-inverse-bold)", + "normal": "var(--semantic-stroke-alpha-inverse-normal)", + "neutral": "var(--semantic-stroke-alpha-inverse-neutral)", + "alternative": "var(--semantic-stroke-alpha-inverse-alternative)", + "assistive": "var(--semantic-stroke-alpha-inverse-assistive)", + "subtle": "var(--semantic-stroke-alpha-inverse-subtle)", + "subtler": "var(--semantic-stroke-alpha-inverse-subtler)" + }, + "subtler": "var(--semantic-stroke-alpha-subtler)" + }, + "subtle": "var(--semantic-stroke-subtle)", + "inverse": { + "bold": "var(--semantic-stroke-inverse-bold)", + "normal": "var(--semantic-stroke-inverse-normal)", + "neutral": "var(--semantic-stroke-inverse-neutral)", + "alternative": "var(--semantic-stroke-inverse-alternative)", + "assistive": "var(--semantic-stroke-inverse-assistive)", + "subtle": "var(--semantic-stroke-inverse-subtle)", + "subtler": "var(--semantic-stroke-inverse-subtler)" + }, + "subtler": "var(--semantic-stroke-subtler)" }, - fill: { - boldest: "var(--semantic-fill-boldest)", - bold: "var(--semantic-fill-bold)", - neutral: "var(--semantic-fill-neutral)", - alternative: "var(--semantic-fill-alternative)", - assistive: "var(--semantic-fill-assistive)", - inverse: { - boldest: "var(--semantic-fill-inverse-boldest)", - bold: "var(--semantic-fill-inverse-bold)", - neutral: "var(--semantic-fill-inverse-neutral)", - alternative: "var(--semantic-fill-inverse-alternative)", - assistive: "var(--semantic-fill-inverse-assistive)", - subtle: "var(--semantic-fill-inverse-subtle)", - subtler: "var(--semantic-fill-inverse-subtler)", - subtlest: "var(--semantic-fill-inverse-subtlest)", - bolder: "var(--semantic-fill-inverse-bolder)", - normal: "var(--semantic-fill-inverse-normal)", - }, - subtle: "var(--semantic-fill-subtle)", - subtler: "var(--semantic-fill-subtler)", - subtlest: "var(--semantic-fill-subtlest)", - bolder: "var(--semantic-fill-bolder)", - normal: "var(--semantic-fill-normal)", + "fill": { + "boldest": "var(--semantic-fill-boldest)", + "bold": "var(--semantic-fill-bold)", + "neutral": "var(--semantic-fill-neutral)", + "alternative": "var(--semantic-fill-alternative)", + "assistive": "var(--semantic-fill-assistive)", + "inverse": { + "boldest": "var(--semantic-fill-inverse-boldest)", + "bold": "var(--semantic-fill-inverse-bold)", + "neutral": "var(--semantic-fill-inverse-neutral)", + "alternative": "var(--semantic-fill-inverse-alternative)", + "assistive": "var(--semantic-fill-inverse-assistive)", + "subtle": "var(--semantic-fill-inverse-subtle)", + "subtler": "var(--semantic-fill-inverse-subtler)", + "subtlest": "var(--semantic-fill-inverse-subtlest)", + "bolder": "var(--semantic-fill-inverse-bolder)", + "normal": "var(--semantic-fill-inverse-normal)" + }, + "subtle": "var(--semantic-fill-subtle)", + "subtler": "var(--semantic-fill-subtler)", + "subtlest": "var(--semantic-fill-subtlest)", + "bolder": "var(--semantic-fill-bolder)", + "normal": "var(--semantic-fill-normal)" }, - system: { - white: "var(--semantic-system-white)", - black: "var(--semantic-system-black)", + "system": { + "white": "var(--semantic-system-white)", + "black": "var(--semantic-system-black)" }, - theme: { - red: { - bold: "var(--semantic-theme-red-bold)", - normal: "var(--semantic-theme-red-normal)", - neutral: "var(--semantic-theme-red-neutral)", - alternative: "var(--semantic-theme-red-alternative)", - assistive: "var(--semantic-theme-red-assistive)", - subtle: "var(--semantic-theme-red-subtle)", - subtler: "var(--semantic-theme-red-subtler)", - alpha: { - assistive: "var(--semantic-theme-red-alpha-assistive)", - subtle: "var(--semantic-theme-red-alpha-subtle)", - subtler: "var(--semantic-theme-red-alpha-subtler)", - subtlest: "var(--semantic-theme-red-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-red-bolder)", - }, - orange: { - bold: "var(--semantic-theme-orange-bold)", - normal: "var(--semantic-theme-orange-normal)", - neutral: "var(--semantic-theme-orange-neutral)", - alternative: "var(--semantic-theme-orange-alternative)", - assistive: "var(--semantic-theme-orange-assistive)", - subtle: "var(--semantic-theme-orange-subtle)", - subtler: "var(--semantic-theme-orange-subtler)", - alpha: { - assistive: "var(--semantic-theme-orange-alpha-assistive)", - subtle: "var(--semantic-theme-orange-alpha-subtle)", - subtler: "var(--semantic-theme-orange-alpha-subtler)", - subtlest: "var(--semantic-theme-orange-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-orange-bolder)", - }, - amber: { - bold: "var(--semantic-theme-amber-bold)", - normal: "var(--semantic-theme-amber-normal)", - neutral: "var(--semantic-theme-amber-neutral)", - alternative: "var(--semantic-theme-amber-alternative)", - assistive: "var(--semantic-theme-amber-assistive)", - subtle: "var(--semantic-theme-amber-subtle)", - subtler: "var(--semantic-theme-amber-subtler)", - alpha: { - assistive: "var(--semantic-theme-amber-alpha-assistive)", - subtle: "var(--semantic-theme-amber-alpha-subtle)", - subtler: "var(--semantic-theme-amber-alpha-subtler)", - subtlest: "var(--semantic-theme-amber-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-amber-bolder)", - }, - yellow: { - bold: "var(--semantic-theme-yellow-bold)", - normal: "var(--semantic-theme-yellow-normal)", - neutral: "var(--semantic-theme-yellow-neutral)", - alternative: "var(--semantic-theme-yellow-alternative)", - assistive: "var(--semantic-theme-yellow-assistive)", - subtle: "var(--semantic-theme-yellow-subtle)", - subtler: "var(--semantic-theme-yellow-subtler)", - alpha: { - assistive: "var(--semantic-theme-yellow-alpha-assistive)", - subtle: "var(--semantic-theme-yellow-alpha-subtle)", - subtler: "var(--semantic-theme-yellow-alpha-subtler)", - subtlest: "var(--semantic-theme-yellow-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-yellow-bolder)", - }, - lime: { - bold: "var(--semantic-theme-lime-bold)", - normal: "var(--semantic-theme-lime-normal)", - neutral: "var(--semantic-theme-lime-neutral)", - alternative: "var(--semantic-theme-lime-alternative)", - assistive: "var(--semantic-theme-lime-assistive)", - subtle: "var(--semantic-theme-lime-subtle)", - subtler: "var(--semantic-theme-lime-subtler)", - alpha: { - assistive: "var(--semantic-theme-lime-alpha-assistive)", - subtle: "var(--semantic-theme-lime-alpha-subtle)", - subtler: "var(--semantic-theme-lime-alpha-subtler)", - subtlest: "var(--semantic-theme-lime-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-lime-bolder)", - }, - green: { - bold: "var(--semantic-theme-green-bold)", - normal: "var(--semantic-theme-green-normal)", - neutral: "var(--semantic-theme-green-neutral)", - alternative: "var(--semantic-theme-green-alternative)", - assistive: "var(--semantic-theme-green-assistive)", - subtle: "var(--semantic-theme-green-subtle)", - subtler: "var(--semantic-theme-green-subtler)", - alpha: { - assistive: "var(--semantic-theme-green-alpha-assistive)", - subtle: "var(--semantic-theme-green-alpha-subtle)", - subtler: "var(--semantic-theme-green-alpha-subtler)", - subtlest: "var(--semantic-theme-green-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-green-bolder)", - }, - emerald: { - bold: "var(--semantic-theme-emerald-bold)", - normal: "var(--semantic-theme-emerald-normal)", - neutral: "var(--semantic-theme-emerald-neutral)", - alternative: "var(--semantic-theme-emerald-alternative)", - assistive: "var(--semantic-theme-emerald-assistive)", - subtle: "var(--semantic-theme-emerald-subtle)", - subtler: "var(--semantic-theme-emerald-subtler)", - alpha: { - assistive: "var(--semantic-theme-emerald-alpha-assistive)", - subtle: "var(--semantic-theme-emerald-alpha-subtle)", - subtler: "var(--semantic-theme-emerald-alpha-subtler)", - subtlest: "var(--semantic-theme-emerald-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-emerald-bolder)", - }, - teal: { - bold: "var(--semantic-theme-teal-bold)", - normal: "var(--semantic-theme-teal-normal)", - neutral: "var(--semantic-theme-teal-neutral)", - alternative: "var(--semantic-theme-teal-alternative)", - assistive: "var(--semantic-theme-teal-assistive)", - subtle: "var(--semantic-theme-teal-subtle)", - subtler: "var(--semantic-theme-teal-subtler)", - alpha: { - assistive: "var(--semantic-theme-teal-alpha-assistive)", - subtle: "var(--semantic-theme-teal-alpha-subtle)", - subtler: "var(--semantic-theme-teal-alpha-subtler)", - subtlest: "var(--semantic-theme-teal-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-teal-bolder)", - }, - cyan: { - bold: "var(--semantic-theme-cyan-bold)", - normal: "var(--semantic-theme-cyan-normal)", - neutral: "var(--semantic-theme-cyan-neutral)", - alternative: "var(--semantic-theme-cyan-alternative)", - assistive: "var(--semantic-theme-cyan-assistive)", - subtle: "var(--semantic-theme-cyan-subtle)", - subtler: "var(--semantic-theme-cyan-subtler)", - alpha: { - assistive: "var(--semantic-theme-cyan-alpha-assistive)", - subtle: "var(--semantic-theme-cyan-alpha-subtle)", - subtler: "var(--semantic-theme-cyan-alpha-subtler)", - subtlest: "var(--semantic-theme-cyan-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-cyan-bolder)", - }, - sky: { - bold: "var(--semantic-theme-sky-bold)", - normal: "var(--semantic-theme-sky-normal)", - neutral: "var(--semantic-theme-sky-neutral)", - alternative: "var(--semantic-theme-sky-alternative)", - assistive: "var(--semantic-theme-sky-assistive)", - subtle: "var(--semantic-theme-sky-subtle)", - subtler: "var(--semantic-theme-sky-subtler)", - alpha: { - assistive: "var(--semantic-theme-sky-alpha-assistive)", - subtle: "var(--semantic-theme-sky-alpha-subtle)", - subtler: "var(--semantic-theme-sky-alpha-subtler)", - subtlest: "var(--semantic-theme-sky-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-sky-bolder)", - }, - blue: { - bold: "var(--semantic-theme-blue-bold)", - normal: "var(--semantic-theme-blue-normal)", - neutral: "var(--semantic-theme-blue-neutral)", - alternative: "var(--semantic-theme-blue-alternative)", - assistive: "var(--semantic-theme-blue-assistive)", - subtle: "var(--semantic-theme-blue-subtle)", - subtler: "var(--semantic-theme-blue-subtler)", - alpha: { - assistive: "var(--semantic-theme-blue-alpha-assistive)", - subtle: "var(--semantic-theme-blue-alpha-subtle)", - subtler: "var(--semantic-theme-blue-alpha-subtler)", - subtlest: "var(--semantic-theme-blue-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-blue-bolder)", - }, - violet: { - bold: "var(--semantic-theme-violet-bold)", - normal: "var(--semantic-theme-violet-normal)", - neutral: "var(--semantic-theme-violet-neutral)", - alternative: "var(--semantic-theme-violet-alternative)", - assistive: "var(--semantic-theme-violet-assistive)", - subtle: "var(--semantic-theme-violet-subtle)", - subtler: "var(--semantic-theme-violet-subtler)", - alpha: { - assistive: "var(--semantic-theme-violet-alpha-assistive)", - subtle: "var(--semantic-theme-violet-alpha-subtle)", - subtler: "var(--semantic-theme-violet-alpha-subtler)", - subtlest: "var(--semantic-theme-violet-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-violet-bolder)", - }, - purple: { - bold: "var(--semantic-theme-purple-bold)", - normal: "var(--semantic-theme-purple-normal)", - neutral: "var(--semantic-theme-purple-neutral)", - alternative: "var(--semantic-theme-purple-alternative)", - assistive: "var(--semantic-theme-purple-assistive)", - subtle: "var(--semantic-theme-purple-subtle)", - subtler: "var(--semantic-theme-purple-subtler)", - alpha: { - assistive: "var(--semantic-theme-purple-alpha-assistive)", - subtle: "var(--semantic-theme-purple-alpha-subtle)", - subtler: "var(--semantic-theme-purple-alpha-subtler)", - subtlest: "var(--semantic-theme-purple-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-purple-bolder)", - }, - fuchsia: { - bold: "var(--semantic-theme-fuchsia-bold)", - normal: "var(--semantic-theme-fuchsia-normal)", - neutral: "var(--semantic-theme-fuchsia-neutral)", - alternative: "var(--semantic-theme-fuchsia-alternative)", - assistive: "var(--semantic-theme-fuchsia-assistive)", - subtle: "var(--semantic-theme-fuchsia-subtle)", - subtler: "var(--semantic-theme-fuchsia-subtler)", - alpha: { - assistive: "var(--semantic-theme-fuchsia-alpha-assistive)", - subtle: "var(--semantic-theme-fuchsia-alpha-subtle)", - subtler: "var(--semantic-theme-fuchsia-alpha-subtler)", - subtlest: "var(--semantic-theme-fuchsia-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-fuchsia-bolder)", - }, - pink: { - bold: "var(--semantic-theme-pink-bold)", - normal: "var(--semantic-theme-pink-normal)", - neutral: "var(--semantic-theme-pink-neutral)", - alternative: "var(--semantic-theme-pink-alternative)", - assistive: "var(--semantic-theme-pink-assistive)", - subtle: "var(--semantic-theme-pink-subtle)", - subtler: "var(--semantic-theme-pink-subtler)", - alpha: { - assistive: "var(--semantic-theme-pink-alpha-assistive)", - subtle: "var(--semantic-theme-pink-alpha-subtle)", - subtler: "var(--semantic-theme-pink-alpha-subtler)", - subtlest: "var(--semantic-theme-pink-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-pink-bolder)", - }, - rose: { - bold: "var(--semantic-theme-rose-bold)", - normal: "var(--semantic-theme-rose-normal)", - neutral: "var(--semantic-theme-rose-neutral)", - alternative: "var(--semantic-theme-rose-alternative)", - assistive: "var(--semantic-theme-rose-assistive)", - subtle: "var(--semantic-theme-rose-subtle)", - subtler: "var(--semantic-theme-rose-subtler)", - alpha: { - assistive: "var(--semantic-theme-rose-alpha-assistive)", - subtle: "var(--semantic-theme-rose-alpha-subtle)", - subtler: "var(--semantic-theme-rose-alpha-subtler)", - subtlest: "var(--semantic-theme-rose-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-rose-bolder)", - }, + "theme": { + "red": { + "bold": "var(--semantic-theme-red-bold)", + "normal": "var(--semantic-theme-red-normal)", + "neutral": "var(--semantic-theme-red-neutral)", + "alternative": "var(--semantic-theme-red-alternative)", + "assistive": "var(--semantic-theme-red-assistive)", + "subtle": "var(--semantic-theme-red-subtle)", + "subtler": "var(--semantic-theme-red-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-red-alpha-assistive)", + "subtle": "var(--semantic-theme-red-alpha-subtle)", + "subtler": "var(--semantic-theme-red-alpha-subtler)", + "subtlest": "var(--semantic-theme-red-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-red-bolder)" + }, + "orange": { + "bold": "var(--semantic-theme-orange-bold)", + "normal": "var(--semantic-theme-orange-normal)", + "neutral": "var(--semantic-theme-orange-neutral)", + "alternative": "var(--semantic-theme-orange-alternative)", + "assistive": "var(--semantic-theme-orange-assistive)", + "subtle": "var(--semantic-theme-orange-subtle)", + "subtler": "var(--semantic-theme-orange-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-orange-alpha-assistive)", + "subtle": "var(--semantic-theme-orange-alpha-subtle)", + "subtler": "var(--semantic-theme-orange-alpha-subtler)", + "subtlest": "var(--semantic-theme-orange-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-orange-bolder)" + }, + "amber": { + "bold": "var(--semantic-theme-amber-bold)", + "normal": "var(--semantic-theme-amber-normal)", + "neutral": "var(--semantic-theme-amber-neutral)", + "alternative": "var(--semantic-theme-amber-alternative)", + "assistive": "var(--semantic-theme-amber-assistive)", + "subtle": "var(--semantic-theme-amber-subtle)", + "subtler": "var(--semantic-theme-amber-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-amber-alpha-assistive)", + "subtle": "var(--semantic-theme-amber-alpha-subtle)", + "subtler": "var(--semantic-theme-amber-alpha-subtler)", + "subtlest": "var(--semantic-theme-amber-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-amber-bolder)" + }, + "yellow": { + "bold": "var(--semantic-theme-yellow-bold)", + "normal": "var(--semantic-theme-yellow-normal)", + "neutral": "var(--semantic-theme-yellow-neutral)", + "alternative": "var(--semantic-theme-yellow-alternative)", + "assistive": "var(--semantic-theme-yellow-assistive)", + "subtle": "var(--semantic-theme-yellow-subtle)", + "subtler": "var(--semantic-theme-yellow-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-yellow-alpha-assistive)", + "subtle": "var(--semantic-theme-yellow-alpha-subtle)", + "subtler": "var(--semantic-theme-yellow-alpha-subtler)", + "subtlest": "var(--semantic-theme-yellow-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-yellow-bolder)" + }, + "lime": { + "bold": "var(--semantic-theme-lime-bold)", + "normal": "var(--semantic-theme-lime-normal)", + "neutral": "var(--semantic-theme-lime-neutral)", + "alternative": "var(--semantic-theme-lime-alternative)", + "assistive": "var(--semantic-theme-lime-assistive)", + "subtle": "var(--semantic-theme-lime-subtle)", + "subtler": "var(--semantic-theme-lime-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-lime-alpha-assistive)", + "subtle": "var(--semantic-theme-lime-alpha-subtle)", + "subtler": "var(--semantic-theme-lime-alpha-subtler)", + "subtlest": "var(--semantic-theme-lime-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-lime-bolder)" + }, + "green": { + "bold": "var(--semantic-theme-green-bold)", + "normal": "var(--semantic-theme-green-normal)", + "neutral": "var(--semantic-theme-green-neutral)", + "alternative": "var(--semantic-theme-green-alternative)", + "assistive": "var(--semantic-theme-green-assistive)", + "subtle": "var(--semantic-theme-green-subtle)", + "subtler": "var(--semantic-theme-green-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-green-alpha-assistive)", + "subtle": "var(--semantic-theme-green-alpha-subtle)", + "subtler": "var(--semantic-theme-green-alpha-subtler)", + "subtlest": "var(--semantic-theme-green-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-green-bolder)" + }, + "emerald": { + "bold": "var(--semantic-theme-emerald-bold)", + "normal": "var(--semantic-theme-emerald-normal)", + "neutral": "var(--semantic-theme-emerald-neutral)", + "alternative": "var(--semantic-theme-emerald-alternative)", + "assistive": "var(--semantic-theme-emerald-assistive)", + "subtle": "var(--semantic-theme-emerald-subtle)", + "subtler": "var(--semantic-theme-emerald-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-emerald-alpha-assistive)", + "subtle": "var(--semantic-theme-emerald-alpha-subtle)", + "subtler": "var(--semantic-theme-emerald-alpha-subtler)", + "subtlest": "var(--semantic-theme-emerald-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-emerald-bolder)" + }, + "teal": { + "bold": "var(--semantic-theme-teal-bold)", + "normal": "var(--semantic-theme-teal-normal)", + "neutral": "var(--semantic-theme-teal-neutral)", + "alternative": "var(--semantic-theme-teal-alternative)", + "assistive": "var(--semantic-theme-teal-assistive)", + "subtle": "var(--semantic-theme-teal-subtle)", + "subtler": "var(--semantic-theme-teal-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-teal-alpha-assistive)", + "subtle": "var(--semantic-theme-teal-alpha-subtle)", + "subtler": "var(--semantic-theme-teal-alpha-subtler)", + "subtlest": "var(--semantic-theme-teal-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-teal-bolder)" + }, + "cyan": { + "bold": "var(--semantic-theme-cyan-bold)", + "normal": "var(--semantic-theme-cyan-normal)", + "neutral": "var(--semantic-theme-cyan-neutral)", + "alternative": "var(--semantic-theme-cyan-alternative)", + "assistive": "var(--semantic-theme-cyan-assistive)", + "subtle": "var(--semantic-theme-cyan-subtle)", + "subtler": "var(--semantic-theme-cyan-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-cyan-alpha-assistive)", + "subtle": "var(--semantic-theme-cyan-alpha-subtle)", + "subtler": "var(--semantic-theme-cyan-alpha-subtler)", + "subtlest": "var(--semantic-theme-cyan-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-cyan-bolder)" + }, + "sky": { + "bold": "var(--semantic-theme-sky-bold)", + "normal": "var(--semantic-theme-sky-normal)", + "neutral": "var(--semantic-theme-sky-neutral)", + "alternative": "var(--semantic-theme-sky-alternative)", + "assistive": "var(--semantic-theme-sky-assistive)", + "subtle": "var(--semantic-theme-sky-subtle)", + "subtler": "var(--semantic-theme-sky-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-sky-alpha-assistive)", + "subtle": "var(--semantic-theme-sky-alpha-subtle)", + "subtler": "var(--semantic-theme-sky-alpha-subtler)", + "subtlest": "var(--semantic-theme-sky-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-sky-bolder)" + }, + "blue": { + "bold": "var(--semantic-theme-blue-bold)", + "normal": "var(--semantic-theme-blue-normal)", + "neutral": "var(--semantic-theme-blue-neutral)", + "alternative": "var(--semantic-theme-blue-alternative)", + "assistive": "var(--semantic-theme-blue-assistive)", + "subtle": "var(--semantic-theme-blue-subtle)", + "subtler": "var(--semantic-theme-blue-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-blue-alpha-assistive)", + "subtle": "var(--semantic-theme-blue-alpha-subtle)", + "subtler": "var(--semantic-theme-blue-alpha-subtler)", + "subtlest": "var(--semantic-theme-blue-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-blue-bolder)" + }, + "violet": { + "bold": "var(--semantic-theme-violet-bold)", + "normal": "var(--semantic-theme-violet-normal)", + "neutral": "var(--semantic-theme-violet-neutral)", + "alternative": "var(--semantic-theme-violet-alternative)", + "assistive": "var(--semantic-theme-violet-assistive)", + "subtle": "var(--semantic-theme-violet-subtle)", + "subtler": "var(--semantic-theme-violet-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-violet-alpha-assistive)", + "subtle": "var(--semantic-theme-violet-alpha-subtle)", + "subtler": "var(--semantic-theme-violet-alpha-subtler)", + "subtlest": "var(--semantic-theme-violet-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-violet-bolder)" + }, + "purple": { + "bold": "var(--semantic-theme-purple-bold)", + "normal": "var(--semantic-theme-purple-normal)", + "neutral": "var(--semantic-theme-purple-neutral)", + "alternative": "var(--semantic-theme-purple-alternative)", + "assistive": "var(--semantic-theme-purple-assistive)", + "subtle": "var(--semantic-theme-purple-subtle)", + "subtler": "var(--semantic-theme-purple-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-purple-alpha-assistive)", + "subtle": "var(--semantic-theme-purple-alpha-subtle)", + "subtler": "var(--semantic-theme-purple-alpha-subtler)", + "subtlest": "var(--semantic-theme-purple-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-purple-bolder)" + }, + "fuchsia": { + "bold": "var(--semantic-theme-fuchsia-bold)", + "normal": "var(--semantic-theme-fuchsia-normal)", + "neutral": "var(--semantic-theme-fuchsia-neutral)", + "alternative": "var(--semantic-theme-fuchsia-alternative)", + "assistive": "var(--semantic-theme-fuchsia-assistive)", + "subtle": "var(--semantic-theme-fuchsia-subtle)", + "subtler": "var(--semantic-theme-fuchsia-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-fuchsia-alpha-assistive)", + "subtle": "var(--semantic-theme-fuchsia-alpha-subtle)", + "subtler": "var(--semantic-theme-fuchsia-alpha-subtler)", + "subtlest": "var(--semantic-theme-fuchsia-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-fuchsia-bolder)" + }, + "pink": { + "bold": "var(--semantic-theme-pink-bold)", + "normal": "var(--semantic-theme-pink-normal)", + "neutral": "var(--semantic-theme-pink-neutral)", + "alternative": "var(--semantic-theme-pink-alternative)", + "assistive": "var(--semantic-theme-pink-assistive)", + "subtle": "var(--semantic-theme-pink-subtle)", + "subtler": "var(--semantic-theme-pink-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-pink-alpha-assistive)", + "subtle": "var(--semantic-theme-pink-alpha-subtle)", + "subtler": "var(--semantic-theme-pink-alpha-subtler)", + "subtlest": "var(--semantic-theme-pink-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-pink-bolder)" + }, + "rose": { + "bold": "var(--semantic-theme-rose-bold)", + "normal": "var(--semantic-theme-rose-normal)", + "neutral": "var(--semantic-theme-rose-neutral)", + "alternative": "var(--semantic-theme-rose-alternative)", + "assistive": "var(--semantic-theme-rose-assistive)", + "subtle": "var(--semantic-theme-rose-subtle)", + "subtler": "var(--semantic-theme-rose-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-rose-alpha-assistive)", + "subtle": "var(--semantic-theme-rose-alpha-subtle)", + "subtler": "var(--semantic-theme-rose-alpha-subtler)", + "subtlest": "var(--semantic-theme-rose-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-rose-bolder)" + } }, - curtain: { - bright: "var(--semantic-curtain-bright)", - dim: "var(--semantic-curtain-dim)", - dimmer: "var(--semantic-curtain-dimmer)", + "curtain": { + "static": { + "bright": "var(--semantic-curtain-static-bright)", + "dim": "var(--semantic-curtain-static-dim)", + "dimmer": "var(--semantic-curtain-static-dimmer)" + }, + "standard": "var(--semantic-curtain-standard)" }, - feedback: { - positive: { - alpha: { - subtle: "var(--semantic-feedback-positive-alpha-subtle)", - assistive: "var(--semantic-feedback-positive-alpha-assistive)", - subtler: "var(--semantic-feedback-positive-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-positive-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-positive-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-positive-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-positive-alpha-inverse-subtlest)", + "feedback": { + "positive": { + "alpha": { + "subtle": "var(--semantic-feedback-positive-alpha-subtle)", + "assistive": "var(--semantic-feedback-positive-alpha-assistive)", + "subtler": "var(--semantic-feedback-positive-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-positive-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-positive-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-positive-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-positive-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-positive-alpha-subtlest)", - }, - normal: "var(--semantic-feedback-positive-normal)", - bold: "var(--semantic-feedback-positive-bold)", - inverse: { - bold: "var(--semantic-feedback-positive-inverse-bold)", - normal: "var(--semantic-feedback-positive-inverse-normal)", - neutral: "var(--semantic-feedback-positive-inverse-neutral)", - alternative: "var(--semantic-feedback-positive-inverse-alternative)", - assistive: "var(--semantic-feedback-positive-inverse-assistive)", - subtle: "var(--semantic-feedback-positive-inverse-subtle)", - subtler: "var(--semantic-feedback-positive-inverse-subtler)", - bolder: "var(--semantic-feedback-positive-inverse-bolder)", - }, - assistive: "var(--semantic-feedback-positive-assistive)", - subtler: "var(--semantic-feedback-positive-subtler)", - neutral: "var(--semantic-feedback-positive-neutral)", - alternative: "var(--semantic-feedback-positive-alternative)", - subtle: "var(--semantic-feedback-positive-subtle)", - bolder: "var(--semantic-feedback-positive-bolder)", - }, - destructive: { - bold: "var(--semantic-feedback-destructive-bold)", - inverse: { - bold: "var(--semantic-feedback-destructive-inverse-bold)", - normal: "var(--semantic-feedback-destructive-inverse-normal)", - neutral: "var(--semantic-feedback-destructive-inverse-neutral)", - alternative: "var(--semantic-feedback-destructive-inverse-alternative)", - assistive: "var(--semantic-feedback-destructive-inverse-assistive)", - subtle: "var(--semantic-feedback-destructive-inverse-subtle)", - subtler: "var(--semantic-feedback-destructive-inverse-subtler)", - bolder: "var(--semantic-feedback-destructive-inverse-bolder)", - }, - normal: "var(--semantic-feedback-destructive-normal)", - alpha: { - assistive: "var(--semantic-feedback-destructive-alpha-assistive)", - subtle: "var(--semantic-feedback-destructive-alpha-subtle)", - subtler: "var(--semantic-feedback-destructive-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-destructive-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-destructive-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-destructive-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-destructive-alpha-inverse-subtlest)", + "subtlest": "var(--semantic-feedback-positive-alpha-subtlest)" + }, + "normal": "var(--semantic-feedback-positive-normal)", + "bold": "var(--semantic-feedback-positive-bold)", + "inverse": { + "bold": "var(--semantic-feedback-positive-inverse-bold)", + "normal": "var(--semantic-feedback-positive-inverse-normal)", + "neutral": "var(--semantic-feedback-positive-inverse-neutral)", + "alternative": "var(--semantic-feedback-positive-inverse-alternative)", + "assistive": "var(--semantic-feedback-positive-inverse-assistive)", + "subtle": "var(--semantic-feedback-positive-inverse-subtle)", + "subtler": "var(--semantic-feedback-positive-inverse-subtler)", + "bolder": "var(--semantic-feedback-positive-inverse-bolder)" + }, + "assistive": "var(--semantic-feedback-positive-assistive)", + "subtler": "var(--semantic-feedback-positive-subtler)", + "neutral": "var(--semantic-feedback-positive-neutral)", + "alternative": "var(--semantic-feedback-positive-alternative)", + "subtle": "var(--semantic-feedback-positive-subtle)", + "bolder": "var(--semantic-feedback-positive-bolder)" + }, + "destructive": { + "bold": "var(--semantic-feedback-destructive-bold)", + "inverse": { + "bold": "var(--semantic-feedback-destructive-inverse-bold)", + "normal": "var(--semantic-feedback-destructive-inverse-normal)", + "neutral": "var(--semantic-feedback-destructive-inverse-neutral)", + "alternative": "var(--semantic-feedback-destructive-inverse-alternative)", + "assistive": "var(--semantic-feedback-destructive-inverse-assistive)", + "subtle": "var(--semantic-feedback-destructive-inverse-subtle)", + "subtler": "var(--semantic-feedback-destructive-inverse-subtler)", + "bolder": "var(--semantic-feedback-destructive-inverse-bolder)" + }, + "normal": "var(--semantic-feedback-destructive-normal)", + "alpha": { + "assistive": "var(--semantic-feedback-destructive-alpha-assistive)", + "subtle": "var(--semantic-feedback-destructive-alpha-subtle)", + "subtler": "var(--semantic-feedback-destructive-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-destructive-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-destructive-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-destructive-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-destructive-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-destructive-alpha-subtlest)", - }, - neutral: "var(--semantic-feedback-destructive-neutral)", - alternative: "var(--semantic-feedback-destructive-alternative)", - assistive: "var(--semantic-feedback-destructive-assistive)", - subtle: "var(--semantic-feedback-destructive-subtle)", - subtler: "var(--semantic-feedback-destructive-subtler)", - bolder: "var(--semantic-feedback-destructive-bolder)", - }, - notifying: { - bold: "var(--semantic-feedback-notifying-bold)", - normal: "var(--semantic-feedback-notifying-normal)", - neutral: "var(--semantic-feedback-notifying-neutral)", - alternative: "var(--semantic-feedback-notifying-alternative)", - assistive: "var(--semantic-feedback-notifying-assistive)", - subtle: "var(--semantic-feedback-notifying-subtle)", - subtler: "var(--semantic-feedback-notifying-subtler)", - inverse: { - bold: "var(--semantic-feedback-notifying-inverse-bold)", - normal: "var(--semantic-feedback-notifying-inverse-normal)", - neutral: "var(--semantic-feedback-notifying-inverse-neutral)", - alternative: "var(--semantic-feedback-notifying-inverse-alternative)", - assistive: "var(--semantic-feedback-notifying-inverse-assistive)", - subtle: "var(--semantic-feedback-notifying-inverse-subtle)", - subtler: "var(--semantic-feedback-notifying-inverse-subtler)", - bolder: "var(--semantic-feedback-notifying-inverse-bolder)", - }, - alpha: { - assistive: "var(--semantic-feedback-notifying-alpha-assistive)", - subtle: "var(--semantic-feedback-notifying-alpha-subtle)", - subtler: "var(--semantic-feedback-notifying-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-notifying-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-notifying-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-notifying-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-notifying-alpha-inverse-subtlest)", + "subtlest": "var(--semantic-feedback-destructive-alpha-subtlest)" + }, + "neutral": "var(--semantic-feedback-destructive-neutral)", + "alternative": "var(--semantic-feedback-destructive-alternative)", + "assistive": "var(--semantic-feedback-destructive-assistive)", + "subtle": "var(--semantic-feedback-destructive-subtle)", + "subtler": "var(--semantic-feedback-destructive-subtler)", + "bolder": "var(--semantic-feedback-destructive-bolder)" + }, + "notifying": { + "bold": "var(--semantic-feedback-notifying-bold)", + "normal": "var(--semantic-feedback-notifying-normal)", + "neutral": "var(--semantic-feedback-notifying-neutral)", + "alternative": "var(--semantic-feedback-notifying-alternative)", + "assistive": "var(--semantic-feedback-notifying-assistive)", + "subtle": "var(--semantic-feedback-notifying-subtle)", + "subtler": "var(--semantic-feedback-notifying-subtler)", + "inverse": { + "bold": "var(--semantic-feedback-notifying-inverse-bold)", + "normal": "var(--semantic-feedback-notifying-inverse-normal)", + "neutral": "var(--semantic-feedback-notifying-inverse-neutral)", + "alternative": "var(--semantic-feedback-notifying-inverse-alternative)", + "assistive": "var(--semantic-feedback-notifying-inverse-assistive)", + "subtle": "var(--semantic-feedback-notifying-inverse-subtle)", + "subtler": "var(--semantic-feedback-notifying-inverse-subtler)", + "bolder": "var(--semantic-feedback-notifying-inverse-bolder)" + }, + "alpha": { + "assistive": "var(--semantic-feedback-notifying-alpha-assistive)", + "subtle": "var(--semantic-feedback-notifying-alpha-subtle)", + "subtler": "var(--semantic-feedback-notifying-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-notifying-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-notifying-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-notifying-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-notifying-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-notifying-alpha-subtlest)", + "subtlest": "var(--semantic-feedback-notifying-alpha-subtlest)" }, - bolder: "var(--semantic-feedback-notifying-bolder)", - }, - }, - }, + "bolder": "var(--semantic-feedback-notifying-bolder)" + } + } + } }, - dark: { - semantic: { - accent: { - alpha: { - assistive: "var(--semantic-accent-alpha-assistive)", - subtle: "var(--semantic-accent-alpha-subtle)", - subtler: "var(--semantic-accent-alpha-subtler)", - inverse: { - subtle: "var(--semantic-accent-alpha-inverse-subtle)", - subtler: "var(--semantic-accent-alpha-inverse-subtler)", - subtlest: "var(--semantic-accent-alpha-inverse-subtlest)", - assistive: "var(--semantic-accent-alpha-inverse-assistive)", - }, - subtlest: "var(--semantic-accent-alpha-subtlest)", - }, - bold: "var(--semantic-accent-bold)", - normal: "var(--semantic-accent-normal)", - neutral: "var(--semantic-accent-neutral)", - inverse: { - bold: "var(--semantic-accent-inverse-bold)", - normal: "var(--semantic-accent-inverse-normal)", - neutral: "var(--semantic-accent-inverse-neutral)", - alternative: "var(--semantic-accent-inverse-alternative)", - assistive: "var(--semantic-accent-inverse-assistive)", - subtle: "var(--semantic-accent-inverse-subtle)", - bolder: "var(--semantic-accent-inverse-bolder)", - subtler: "var(--semantic-accent-inverse-subtler)", - subtlest: "var(--semantic-accent-inverse-subtlest)", - }, - alternative: "var(--semantic-accent-alternative)", - assistive: "var(--semantic-accent-assistive)", - subtle: "var(--semantic-accent-subtle)", - subtler: "var(--semantic-accent-subtler)", - bolder: "var(--semantic-accent-bolder)", - subtlest: "var(--semantic-accent-subtlest)", + "dark": { + "semantic": { + "accent": { + "alpha": { + "assistive": "var(--semantic-accent-alpha-assistive)", + "subtle": "var(--semantic-accent-alpha-subtle)", + "subtler": "var(--semantic-accent-alpha-subtler)", + "inverse": { + "subtle": "var(--semantic-accent-alpha-inverse-subtle)", + "subtler": "var(--semantic-accent-alpha-inverse-subtler)", + "subtlest": "var(--semantic-accent-alpha-inverse-subtlest)", + "assistive": "var(--semantic-accent-alpha-inverse-assistive)" + }, + "subtlest": "var(--semantic-accent-alpha-subtlest)" + }, + "bold": "var(--semantic-accent-bold)", + "normal": "var(--semantic-accent-normal)", + "neutral": "var(--semantic-accent-neutral)", + "inverse": { + "bold": "var(--semantic-accent-inverse-bold)", + "normal": "var(--semantic-accent-inverse-normal)", + "neutral": "var(--semantic-accent-inverse-neutral)", + "alternative": "var(--semantic-accent-inverse-alternative)", + "assistive": "var(--semantic-accent-inverse-assistive)", + "subtle": "var(--semantic-accent-inverse-subtle)", + "bolder": "var(--semantic-accent-inverse-bolder)", + "subtler": "var(--semantic-accent-inverse-subtler)", + "subtlest": "var(--semantic-accent-inverse-subtlest)" + }, + "alternative": "var(--semantic-accent-alternative)", + "assistive": "var(--semantic-accent-assistive)", + "subtle": "var(--semantic-accent-subtle)", + "subtler": "var(--semantic-accent-subtler)", + "bolder": "var(--semantic-accent-bolder)", + "subtlest": "var(--semantic-accent-subtlest)" }, - object: { - neutral: "var(--semantic-object-neutral)", - alternative: "var(--semantic-object-alternative)", - assistive: "var(--semantic-object-assistive)", - subtle: "var(--semantic-object-subtle)", - inverse: { - neutral: "var(--semantic-object-inverse-neutral)", - alternative: "var(--semantic-object-inverse-alternative)", - assistive: "var(--semantic-object-inverse-assistive)", - subtle: "var(--semantic-object-inverse-subtle)", - boldest: "var(--semantic-object-inverse-boldest)", - bold: "var(--semantic-object-inverse-bold)", - bolder: "var(--semantic-object-inverse-bolder)", - normal: "var(--semantic-object-inverse-normal)", - subtler: "var(--semantic-object-inverse-subtler)", - subtlest: "var(--semantic-object-inverse-subtlest)", - }, - boldest: "var(--semantic-object-boldest)", - bold: "var(--semantic-object-bold)", - static: { - boldest: "var(--semantic-object-static-boldest)", - bold: "var(--semantic-object-static-bold)", - neutral: "var(--semantic-object-static-neutral)", - alternative: "var(--semantic-object-static-alternative)", - assistive: "var(--semantic-object-static-assistive)", - subtle: "var(--semantic-object-static-subtle)", - inverse: { - boldest: "var(--semantic-object-static-inverse-boldest)", - bold: "var(--semantic-object-static-inverse-bold)", - neutral: "var(--semantic-object-static-inverse-neutral)", - alternative: "var(--semantic-object-static-inverse-alternative)", - assistive: "var(--semantic-object-static-inverse-assistive)", - subtle: "var(--semantic-object-static-inverse-subtle)", - bolder: "var(--semantic-object-static-inverse-bolder)", - normal: "var(--semantic-object-static-inverse-normal)", - subtler: "var(--semantic-object-static-inverse-subtler)", - subtlest: "var(--semantic-object-static-inverse-subtlest)", - }, - bolder: "var(--semantic-object-static-bolder)", - normal: "var(--semantic-object-static-normal)", - subtler: "var(--semantic-object-static-subtler)", - subtlest: "var(--semantic-object-static-subtlest)", - }, - bolder: "var(--semantic-object-bolder)", - normal: "var(--semantic-object-normal)", - subtler: "var(--semantic-object-subtler)", - subtlest: "var(--semantic-object-subtlest)", + "object": { + "neutral": "var(--semantic-object-neutral)", + "alternative": "var(--semantic-object-alternative)", + "assistive": "var(--semantic-object-assistive)", + "subtle": "var(--semantic-object-subtle)", + "inverse": { + "neutral": "var(--semantic-object-inverse-neutral)", + "alternative": "var(--semantic-object-inverse-alternative)", + "assistive": "var(--semantic-object-inverse-assistive)", + "subtle": "var(--semantic-object-inverse-subtle)", + "boldest": "var(--semantic-object-inverse-boldest)", + "bold": "var(--semantic-object-inverse-bold)", + "bolder": "var(--semantic-object-inverse-bolder)", + "normal": "var(--semantic-object-inverse-normal)", + "subtler": "var(--semantic-object-inverse-subtler)", + "subtlest": "var(--semantic-object-inverse-subtlest)" + }, + "boldest": "var(--semantic-object-boldest)", + "bold": "var(--semantic-object-bold)", + "static": { + "boldest": "var(--semantic-object-static-boldest)", + "bold": "var(--semantic-object-static-bold)", + "neutral": "var(--semantic-object-static-neutral)", + "alternative": "var(--semantic-object-static-alternative)", + "assistive": "var(--semantic-object-static-assistive)", + "subtle": "var(--semantic-object-static-subtle)", + "inverse": { + "boldest": "var(--semantic-object-static-inverse-boldest)", + "bold": "var(--semantic-object-static-inverse-bold)", + "neutral": "var(--semantic-object-static-inverse-neutral)", + "alternative": "var(--semantic-object-static-inverse-alternative)", + "assistive": "var(--semantic-object-static-inverse-assistive)", + "subtle": "var(--semantic-object-static-inverse-subtle)", + "bolder": "var(--semantic-object-static-inverse-bolder)", + "normal": "var(--semantic-object-static-inverse-normal)", + "subtler": "var(--semantic-object-static-inverse-subtler)", + "subtlest": "var(--semantic-object-static-inverse-subtlest)" + }, + "bolder": "var(--semantic-object-static-bolder)", + "normal": "var(--semantic-object-static-normal)", + "subtler": "var(--semantic-object-static-subtler)", + "subtlest": "var(--semantic-object-static-subtlest)" + }, + "bolder": "var(--semantic-object-bolder)", + "normal": "var(--semantic-object-normal)", + "subtler": "var(--semantic-object-subtler)", + "subtlest": "var(--semantic-object-subtlest)" }, - surface: { - standard: "var(--semantic-surface-standard)", - deep: "var(--semantic-surface-deep)", - deeper: "var(--semantic-surface-deeper)", - deepest: "var(--semantic-surface-deepest)", - inverse: { - standard: "var(--semantic-surface-inverse-standard)", - deep: "var(--semantic-surface-inverse-deep)", - deeper: "var(--semantic-surface-inverse-deeper)", - deepest: "var(--semantic-surface-inverse-deepest)", - shallow: "var(--semantic-surface-inverse-shallow)", - shallower: "var(--semantic-surface-inverse-shallower)", - shallowest: "var(--semantic-surface-inverse-shallowest)", - }, - shallow: "var(--semantic-surface-shallow)", - shallower: "var(--semantic-surface-shallower)", - shallowest: "var(--semantic-surface-shallowest)", - static: { - shallowest: "var(--semantic-surface-static-shallowest)", - shallower: "var(--semantic-surface-static-shallower)", - shallow: "var(--semantic-surface-static-shallow)", - standard: "var(--semantic-surface-static-standard)", - deep: "var(--semantic-surface-static-deep)", - deeper: "var(--semantic-surface-static-deeper)", - deepest: "var(--semantic-surface-static-deepest)", - inverse: { - shallowest: "var(--semantic-surface-static-inverse-shallowest)", - shallower: "var(--semantic-surface-static-inverse-shallower)", - shallow: "var(--semantic-surface-static-inverse-shallow)", - standard: "var(--semantic-surface-static-inverse-standard)", - deep: "var(--semantic-surface-static-inverse-deep)", - deeper: "var(--semantic-surface-static-inverse-deeper)", - deepest: "var(--semantic-surface-static-inverse-deepest)", - }, - }, + "surface": { + "standard": "var(--semantic-surface-standard)", + "deep": "var(--semantic-surface-deep)", + "deeper": "var(--semantic-surface-deeper)", + "deepest": "var(--semantic-surface-deepest)", + "inverse": { + "standard": "var(--semantic-surface-inverse-standard)", + "deep": "var(--semantic-surface-inverse-deep)", + "deeper": "var(--semantic-surface-inverse-deeper)", + "deepest": "var(--semantic-surface-inverse-deepest)", + "shallow": "var(--semantic-surface-inverse-shallow)", + "shallower": "var(--semantic-surface-inverse-shallower)", + "shallowest": "var(--semantic-surface-inverse-shallowest)" + }, + "shallow": "var(--semantic-surface-shallow)", + "shallower": "var(--semantic-surface-shallower)", + "shallowest": "var(--semantic-surface-shallowest)", + "static": { + "shallowest": "var(--semantic-surface-static-shallowest)", + "shallower": "var(--semantic-surface-static-shallower)", + "shallow": "var(--semantic-surface-static-shallow)", + "standard": "var(--semantic-surface-static-standard)", + "deep": "var(--semantic-surface-static-deep)", + "deeper": "var(--semantic-surface-static-deeper)", + "deepest": "var(--semantic-surface-static-deepest)", + "inverse": { + "shallowest": "var(--semantic-surface-static-inverse-shallowest)", + "shallower": "var(--semantic-surface-static-inverse-shallower)", + "shallow": "var(--semantic-surface-static-inverse-shallow)", + "standard": "var(--semantic-surface-static-inverse-standard)", + "deep": "var(--semantic-surface-static-inverse-deep)", + "deeper": "var(--semantic-surface-static-inverse-deeper)", + "deepest": "var(--semantic-surface-static-inverse-deepest)" + } + } }, - interaction: { - bold: "var(--semantic-interaction-bold)", - normal: "var(--semantic-interaction-normal)", - inverse: { - focus: "var(--semantic-interaction-inverse-focus)", - bold: "var(--semantic-interaction-inverse-bold)", - normal: "var(--semantic-interaction-inverse-normal)", - assistive: "var(--semantic-interaction-inverse-assistive)", - subtle: "var(--semantic-interaction-inverse-subtle)", - }, - focus: "var(--semantic-interaction-focus)", - assistive: "var(--semantic-interaction-assistive)", - subtle: "var(--semantic-interaction-subtle)", + "interaction": { + "bold": "var(--semantic-interaction-bold)", + "normal": "var(--semantic-interaction-normal)", + "inverse": { + "focus": "var(--semantic-interaction-inverse-focus)", + "bold": "var(--semantic-interaction-inverse-bold)", + "normal": "var(--semantic-interaction-inverse-normal)", + "assistive": "var(--semantic-interaction-inverse-assistive)", + "subtle": "var(--semantic-interaction-inverse-subtle)" + }, + "focus": "var(--semantic-interaction-focus)", + "assistive": "var(--semantic-interaction-assistive)", + "subtle": "var(--semantic-interaction-subtle)" }, - stroke: { - neutral: "var(--semantic-stroke-neutral)", - alternative: "var(--semantic-stroke-alternative)", - assistive: "var(--semantic-stroke-assistive)", - normal: "var(--semantic-stroke-normal)", - bold: "var(--semantic-stroke-bold)", - alpha: { - bold: "var(--semantic-stroke-alpha-bold)", - normal: "var(--semantic-stroke-alpha-normal)", - neutral: "var(--semantic-stroke-alpha-neutral)", - alternative: "var(--semantic-stroke-alpha-alternative)", - assistive: "var(--semantic-stroke-alpha-assistive)", - subtle: "var(--semantic-stroke-alpha-subtle)", - inverse: { - bold: "var(--semantic-stroke-alpha-inverse-bold)", - normal: "var(--semantic-stroke-alpha-inverse-normal)", - neutral: "var(--semantic-stroke-alpha-inverse-neutral)", - alternative: "var(--semantic-stroke-alpha-inverse-alternative)", - assistive: "var(--semantic-stroke-alpha-inverse-assistive)", - subtle: "var(--semantic-stroke-alpha-inverse-subtle)", - subtler: "var(--semantic-stroke-alpha-inverse-subtler)", - }, - subtler: "var(--semantic-stroke-alpha-subtler)", - }, - subtle: "var(--semantic-stroke-subtle)", - inverse: { - bold: "var(--semantic-stroke-inverse-bold)", - normal: "var(--semantic-stroke-inverse-normal)", - neutral: "var(--semantic-stroke-inverse-neutral)", - alternative: "var(--semantic-stroke-inverse-alternative)", - assistive: "var(--semantic-stroke-inverse-assistive)", - subtle: "var(--semantic-stroke-inverse-subtle)", - subtler: "var(--semantic-stroke-inverse-subtler)", - }, - subtler: "var(--semantic-stroke-subtler)", + "stroke": { + "neutral": "var(--semantic-stroke-neutral)", + "alternative": "var(--semantic-stroke-alternative)", + "assistive": "var(--semantic-stroke-assistive)", + "normal": "var(--semantic-stroke-normal)", + "bold": "var(--semantic-stroke-bold)", + "alpha": { + "bold": "var(--semantic-stroke-alpha-bold)", + "normal": "var(--semantic-stroke-alpha-normal)", + "neutral": "var(--semantic-stroke-alpha-neutral)", + "alternative": "var(--semantic-stroke-alpha-alternative)", + "assistive": "var(--semantic-stroke-alpha-assistive)", + "subtle": "var(--semantic-stroke-alpha-subtle)", + "inverse": { + "bold": "var(--semantic-stroke-alpha-inverse-bold)", + "normal": "var(--semantic-stroke-alpha-inverse-normal)", + "neutral": "var(--semantic-stroke-alpha-inverse-neutral)", + "alternative": "var(--semantic-stroke-alpha-inverse-alternative)", + "assistive": "var(--semantic-stroke-alpha-inverse-assistive)", + "subtle": "var(--semantic-stroke-alpha-inverse-subtle)", + "subtler": "var(--semantic-stroke-alpha-inverse-subtler)" + }, + "subtler": "var(--semantic-stroke-alpha-subtler)" + }, + "subtle": "var(--semantic-stroke-subtle)", + "inverse": { + "bold": "var(--semantic-stroke-inverse-bold)", + "normal": "var(--semantic-stroke-inverse-normal)", + "neutral": "var(--semantic-stroke-inverse-neutral)", + "alternative": "var(--semantic-stroke-inverse-alternative)", + "assistive": "var(--semantic-stroke-inverse-assistive)", + "subtle": "var(--semantic-stroke-inverse-subtle)", + "subtler": "var(--semantic-stroke-inverse-subtler)" + }, + "subtler": "var(--semantic-stroke-subtler)" }, - fill: { - boldest: "var(--semantic-fill-boldest)", - bold: "var(--semantic-fill-bold)", - neutral: "var(--semantic-fill-neutral)", - alternative: "var(--semantic-fill-alternative)", - assistive: "var(--semantic-fill-assistive)", - inverse: { - boldest: "var(--semantic-fill-inverse-boldest)", - bold: "var(--semantic-fill-inverse-bold)", - neutral: "var(--semantic-fill-inverse-neutral)", - alternative: "var(--semantic-fill-inverse-alternative)", - assistive: "var(--semantic-fill-inverse-assistive)", - subtle: "var(--semantic-fill-inverse-subtle)", - subtler: "var(--semantic-fill-inverse-subtler)", - subtlest: "var(--semantic-fill-inverse-subtlest)", - bolder: "var(--semantic-fill-inverse-bolder)", - normal: "var(--semantic-fill-inverse-normal)", - }, - subtle: "var(--semantic-fill-subtle)", - subtler: "var(--semantic-fill-subtler)", - subtlest: "var(--semantic-fill-subtlest)", - bolder: "var(--semantic-fill-bolder)", - normal: "var(--semantic-fill-normal)", + "fill": { + "boldest": "var(--semantic-fill-boldest)", + "bold": "var(--semantic-fill-bold)", + "neutral": "var(--semantic-fill-neutral)", + "alternative": "var(--semantic-fill-alternative)", + "assistive": "var(--semantic-fill-assistive)", + "inverse": { + "boldest": "var(--semantic-fill-inverse-boldest)", + "bold": "var(--semantic-fill-inverse-bold)", + "neutral": "var(--semantic-fill-inverse-neutral)", + "alternative": "var(--semantic-fill-inverse-alternative)", + "assistive": "var(--semantic-fill-inverse-assistive)", + "subtle": "var(--semantic-fill-inverse-subtle)", + "subtler": "var(--semantic-fill-inverse-subtler)", + "subtlest": "var(--semantic-fill-inverse-subtlest)", + "bolder": "var(--semantic-fill-inverse-bolder)", + "normal": "var(--semantic-fill-inverse-normal)" + }, + "subtle": "var(--semantic-fill-subtle)", + "subtler": "var(--semantic-fill-subtler)", + "subtlest": "var(--semantic-fill-subtlest)", + "bolder": "var(--semantic-fill-bolder)", + "normal": "var(--semantic-fill-normal)" }, - system: { - white: "var(--semantic-system-white)", - black: "var(--semantic-system-black)", + "system": { + "white": "var(--semantic-system-white)", + "black": "var(--semantic-system-black)" }, - theme: { - red: { - bold: "var(--semantic-theme-red-bold)", - normal: "var(--semantic-theme-red-normal)", - neutral: "var(--semantic-theme-red-neutral)", - alternative: "var(--semantic-theme-red-alternative)", - assistive: "var(--semantic-theme-red-assistive)", - subtle: "var(--semantic-theme-red-subtle)", - subtler: "var(--semantic-theme-red-subtler)", - alpha: { - assistive: "var(--semantic-theme-red-alpha-assistive)", - subtle: "var(--semantic-theme-red-alpha-subtle)", - subtler: "var(--semantic-theme-red-alpha-subtler)", - subtlest: "var(--semantic-theme-red-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-red-bolder)", - }, - orange: { - bold: "var(--semantic-theme-orange-bold)", - normal: "var(--semantic-theme-orange-normal)", - neutral: "var(--semantic-theme-orange-neutral)", - alternative: "var(--semantic-theme-orange-alternative)", - assistive: "var(--semantic-theme-orange-assistive)", - subtle: "var(--semantic-theme-orange-subtle)", - subtler: "var(--semantic-theme-orange-subtler)", - alpha: { - assistive: "var(--semantic-theme-orange-alpha-assistive)", - subtle: "var(--semantic-theme-orange-alpha-subtle)", - subtler: "var(--semantic-theme-orange-alpha-subtler)", - subtlest: "var(--semantic-theme-orange-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-orange-bolder)", - }, - amber: { - bold: "var(--semantic-theme-amber-bold)", - normal: "var(--semantic-theme-amber-normal)", - neutral: "var(--semantic-theme-amber-neutral)", - alternative: "var(--semantic-theme-amber-alternative)", - assistive: "var(--semantic-theme-amber-assistive)", - subtle: "var(--semantic-theme-amber-subtle)", - subtler: "var(--semantic-theme-amber-subtler)", - alpha: { - assistive: "var(--semantic-theme-amber-alpha-assistive)", - subtle: "var(--semantic-theme-amber-alpha-subtle)", - subtler: "var(--semantic-theme-amber-alpha-subtler)", - subtlest: "var(--semantic-theme-amber-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-amber-bolder)", - }, - yellow: { - bold: "var(--semantic-theme-yellow-bold)", - normal: "var(--semantic-theme-yellow-normal)", - neutral: "var(--semantic-theme-yellow-neutral)", - alternative: "var(--semantic-theme-yellow-alternative)", - assistive: "var(--semantic-theme-yellow-assistive)", - subtle: "var(--semantic-theme-yellow-subtle)", - subtler: "var(--semantic-theme-yellow-subtler)", - alpha: { - assistive: "var(--semantic-theme-yellow-alpha-assistive)", - subtle: "var(--semantic-theme-yellow-alpha-subtle)", - subtler: "var(--semantic-theme-yellow-alpha-subtler)", - subtlest: "var(--semantic-theme-yellow-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-yellow-bolder)", - }, - lime: { - bold: "var(--semantic-theme-lime-bold)", - normal: "var(--semantic-theme-lime-normal)", - neutral: "var(--semantic-theme-lime-neutral)", - alternative: "var(--semantic-theme-lime-alternative)", - assistive: "var(--semantic-theme-lime-assistive)", - subtle: "var(--semantic-theme-lime-subtle)", - subtler: "var(--semantic-theme-lime-subtler)", - alpha: { - assistive: "var(--semantic-theme-lime-alpha-assistive)", - subtle: "var(--semantic-theme-lime-alpha-subtle)", - subtler: "var(--semantic-theme-lime-alpha-subtler)", - subtlest: "var(--semantic-theme-lime-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-lime-bolder)", - }, - green: { - bold: "var(--semantic-theme-green-bold)", - normal: "var(--semantic-theme-green-normal)", - neutral: "var(--semantic-theme-green-neutral)", - alternative: "var(--semantic-theme-green-alternative)", - assistive: "var(--semantic-theme-green-assistive)", - subtle: "var(--semantic-theme-green-subtle)", - subtler: "var(--semantic-theme-green-subtler)", - alpha: { - assistive: "var(--semantic-theme-green-alpha-assistive)", - subtle: "var(--semantic-theme-green-alpha-subtle)", - subtler: "var(--semantic-theme-green-alpha-subtler)", - subtlest: "var(--semantic-theme-green-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-green-bolder)", - }, - emerald: { - bold: "var(--semantic-theme-emerald-bold)", - normal: "var(--semantic-theme-emerald-normal)", - neutral: "var(--semantic-theme-emerald-neutral)", - alternative: "var(--semantic-theme-emerald-alternative)", - assistive: "var(--semantic-theme-emerald-assistive)", - subtle: "var(--semantic-theme-emerald-subtle)", - subtler: "var(--semantic-theme-emerald-subtler)", - alpha: { - assistive: "var(--semantic-theme-emerald-alpha-assistive)", - subtle: "var(--semantic-theme-emerald-alpha-subtle)", - subtler: "var(--semantic-theme-emerald-alpha-subtler)", - subtlest: "var(--semantic-theme-emerald-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-emerald-bolder)", - }, - teal: { - bold: "var(--semantic-theme-teal-bold)", - normal: "var(--semantic-theme-teal-normal)", - neutral: "var(--semantic-theme-teal-neutral)", - alternative: "var(--semantic-theme-teal-alternative)", - assistive: "var(--semantic-theme-teal-assistive)", - subtle: "var(--semantic-theme-teal-subtle)", - subtler: "var(--semantic-theme-teal-subtler)", - alpha: { - assistive: "var(--semantic-theme-teal-alpha-assistive)", - subtle: "var(--semantic-theme-teal-alpha-subtle)", - subtler: "var(--semantic-theme-teal-alpha-subtler)", - subtlest: "var(--semantic-theme-teal-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-teal-bolder)", - }, - cyan: { - bold: "var(--semantic-theme-cyan-bold)", - normal: "var(--semantic-theme-cyan-normal)", - neutral: "var(--semantic-theme-cyan-neutral)", - alternative: "var(--semantic-theme-cyan-alternative)", - assistive: "var(--semantic-theme-cyan-assistive)", - subtle: "var(--semantic-theme-cyan-subtle)", - subtler: "var(--semantic-theme-cyan-subtler)", - alpha: { - assistive: "var(--semantic-theme-cyan-alpha-assistive)", - subtle: "var(--semantic-theme-cyan-alpha-subtle)", - subtler: "var(--semantic-theme-cyan-alpha-subtler)", - subtlest: "var(--semantic-theme-cyan-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-cyan-bolder)", - }, - sky: { - bold: "var(--semantic-theme-sky-bold)", - normal: "var(--semantic-theme-sky-normal)", - neutral: "var(--semantic-theme-sky-neutral)", - alternative: "var(--semantic-theme-sky-alternative)", - assistive: "var(--semantic-theme-sky-assistive)", - subtle: "var(--semantic-theme-sky-subtle)", - subtler: "var(--semantic-theme-sky-subtler)", - alpha: { - assistive: "var(--semantic-theme-sky-alpha-assistive)", - subtle: "var(--semantic-theme-sky-alpha-subtle)", - subtler: "var(--semantic-theme-sky-alpha-subtler)", - subtlest: "var(--semantic-theme-sky-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-sky-bolder)", - }, - blue: { - bold: "var(--semantic-theme-blue-bold)", - normal: "var(--semantic-theme-blue-normal)", - neutral: "var(--semantic-theme-blue-neutral)", - alternative: "var(--semantic-theme-blue-alternative)", - assistive: "var(--semantic-theme-blue-assistive)", - subtle: "var(--semantic-theme-blue-subtle)", - subtler: "var(--semantic-theme-blue-subtler)", - alpha: { - assistive: "var(--semantic-theme-blue-alpha-assistive)", - subtle: "var(--semantic-theme-blue-alpha-subtle)", - subtler: "var(--semantic-theme-blue-alpha-subtler)", - subtlest: "var(--semantic-theme-blue-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-blue-bolder)", - }, - violet: { - bold: "var(--semantic-theme-violet-bold)", - normal: "var(--semantic-theme-violet-normal)", - neutral: "var(--semantic-theme-violet-neutral)", - alternative: "var(--semantic-theme-violet-alternative)", - assistive: "var(--semantic-theme-violet-assistive)", - subtle: "var(--semantic-theme-violet-subtle)", - subtler: "var(--semantic-theme-violet-subtler)", - alpha: { - assistive: "var(--semantic-theme-violet-alpha-assistive)", - subtle: "var(--semantic-theme-violet-alpha-subtle)", - subtler: "var(--semantic-theme-violet-alpha-subtler)", - subtlest: "var(--semantic-theme-violet-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-violet-bolder)", - }, - purple: { - bold: "var(--semantic-theme-purple-bold)", - normal: "var(--semantic-theme-purple-normal)", - neutral: "var(--semantic-theme-purple-neutral)", - alternative: "var(--semantic-theme-purple-alternative)", - assistive: "var(--semantic-theme-purple-assistive)", - subtle: "var(--semantic-theme-purple-subtle)", - subtler: "var(--semantic-theme-purple-subtler)", - alpha: { - assistive: "var(--semantic-theme-purple-alpha-assistive)", - subtle: "var(--semantic-theme-purple-alpha-subtle)", - subtler: "var(--semantic-theme-purple-alpha-subtler)", - subtlest: "var(--semantic-theme-purple-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-purple-bolder)", - }, - fuchsia: { - bold: "var(--semantic-theme-fuchsia-bold)", - normal: "var(--semantic-theme-fuchsia-normal)", - neutral: "var(--semantic-theme-fuchsia-neutral)", - alternative: "var(--semantic-theme-fuchsia-alternative)", - assistive: "var(--semantic-theme-fuchsia-assistive)", - subtle: "var(--semantic-theme-fuchsia-subtle)", - subtler: "var(--semantic-theme-fuchsia-subtler)", - alpha: { - assistive: "var(--semantic-theme-fuchsia-alpha-assistive)", - subtle: "var(--semantic-theme-fuchsia-alpha-subtle)", - subtler: "var(--semantic-theme-fuchsia-alpha-subtler)", - subtlest: "var(--semantic-theme-fuchsia-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-fuchsia-bolder)", - }, - pink: { - bold: "var(--semantic-theme-pink-bold)", - normal: "var(--semantic-theme-pink-normal)", - neutral: "var(--semantic-theme-pink-neutral)", - alternative: "var(--semantic-theme-pink-alternative)", - assistive: "var(--semantic-theme-pink-assistive)", - subtle: "var(--semantic-theme-pink-subtle)", - subtler: "var(--semantic-theme-pink-subtler)", - alpha: { - assistive: "var(--semantic-theme-pink-alpha-assistive)", - subtle: "var(--semantic-theme-pink-alpha-subtle)", - subtler: "var(--semantic-theme-pink-alpha-subtler)", - subtlest: "var(--semantic-theme-pink-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-pink-bolder)", - }, - rose: { - bold: "var(--semantic-theme-rose-bold)", - normal: "var(--semantic-theme-rose-normal)", - neutral: "var(--semantic-theme-rose-neutral)", - alternative: "var(--semantic-theme-rose-alternative)", - assistive: "var(--semantic-theme-rose-assistive)", - subtle: "var(--semantic-theme-rose-subtle)", - subtler: "var(--semantic-theme-rose-subtler)", - alpha: { - assistive: "var(--semantic-theme-rose-alpha-assistive)", - subtle: "var(--semantic-theme-rose-alpha-subtle)", - subtler: "var(--semantic-theme-rose-alpha-subtler)", - subtlest: "var(--semantic-theme-rose-alpha-subtlest)", - }, - bolder: "var(--semantic-theme-rose-bolder)", - }, + "theme": { + "red": { + "bold": "var(--semantic-theme-red-bold)", + "normal": "var(--semantic-theme-red-normal)", + "neutral": "var(--semantic-theme-red-neutral)", + "alternative": "var(--semantic-theme-red-alternative)", + "assistive": "var(--semantic-theme-red-assistive)", + "subtle": "var(--semantic-theme-red-subtle)", + "subtler": "var(--semantic-theme-red-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-red-alpha-assistive)", + "subtle": "var(--semantic-theme-red-alpha-subtle)", + "subtler": "var(--semantic-theme-red-alpha-subtler)", + "subtlest": "var(--semantic-theme-red-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-red-bolder)" + }, + "orange": { + "bold": "var(--semantic-theme-orange-bold)", + "normal": "var(--semantic-theme-orange-normal)", + "neutral": "var(--semantic-theme-orange-neutral)", + "alternative": "var(--semantic-theme-orange-alternative)", + "assistive": "var(--semantic-theme-orange-assistive)", + "subtle": "var(--semantic-theme-orange-subtle)", + "subtler": "var(--semantic-theme-orange-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-orange-alpha-assistive)", + "subtle": "var(--semantic-theme-orange-alpha-subtle)", + "subtler": "var(--semantic-theme-orange-alpha-subtler)", + "subtlest": "var(--semantic-theme-orange-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-orange-bolder)" + }, + "amber": { + "bold": "var(--semantic-theme-amber-bold)", + "normal": "var(--semantic-theme-amber-normal)", + "neutral": "var(--semantic-theme-amber-neutral)", + "alternative": "var(--semantic-theme-amber-alternative)", + "assistive": "var(--semantic-theme-amber-assistive)", + "subtle": "var(--semantic-theme-amber-subtle)", + "subtler": "var(--semantic-theme-amber-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-amber-alpha-assistive)", + "subtle": "var(--semantic-theme-amber-alpha-subtle)", + "subtler": "var(--semantic-theme-amber-alpha-subtler)", + "subtlest": "var(--semantic-theme-amber-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-amber-bolder)" + }, + "yellow": { + "bold": "var(--semantic-theme-yellow-bold)", + "normal": "var(--semantic-theme-yellow-normal)", + "neutral": "var(--semantic-theme-yellow-neutral)", + "alternative": "var(--semantic-theme-yellow-alternative)", + "assistive": "var(--semantic-theme-yellow-assistive)", + "subtle": "var(--semantic-theme-yellow-subtle)", + "subtler": "var(--semantic-theme-yellow-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-yellow-alpha-assistive)", + "subtle": "var(--semantic-theme-yellow-alpha-subtle)", + "subtler": "var(--semantic-theme-yellow-alpha-subtler)", + "subtlest": "var(--semantic-theme-yellow-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-yellow-bolder)" + }, + "lime": { + "bold": "var(--semantic-theme-lime-bold)", + "normal": "var(--semantic-theme-lime-normal)", + "neutral": "var(--semantic-theme-lime-neutral)", + "alternative": "var(--semantic-theme-lime-alternative)", + "assistive": "var(--semantic-theme-lime-assistive)", + "subtle": "var(--semantic-theme-lime-subtle)", + "subtler": "var(--semantic-theme-lime-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-lime-alpha-assistive)", + "subtle": "var(--semantic-theme-lime-alpha-subtle)", + "subtler": "var(--semantic-theme-lime-alpha-subtler)", + "subtlest": "var(--semantic-theme-lime-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-lime-bolder)" + }, + "green": { + "bold": "var(--semantic-theme-green-bold)", + "normal": "var(--semantic-theme-green-normal)", + "neutral": "var(--semantic-theme-green-neutral)", + "alternative": "var(--semantic-theme-green-alternative)", + "assistive": "var(--semantic-theme-green-assistive)", + "subtle": "var(--semantic-theme-green-subtle)", + "subtler": "var(--semantic-theme-green-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-green-alpha-assistive)", + "subtle": "var(--semantic-theme-green-alpha-subtle)", + "subtler": "var(--semantic-theme-green-alpha-subtler)", + "subtlest": "var(--semantic-theme-green-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-green-bolder)" + }, + "emerald": { + "bold": "var(--semantic-theme-emerald-bold)", + "normal": "var(--semantic-theme-emerald-normal)", + "neutral": "var(--semantic-theme-emerald-neutral)", + "alternative": "var(--semantic-theme-emerald-alternative)", + "assistive": "var(--semantic-theme-emerald-assistive)", + "subtle": "var(--semantic-theme-emerald-subtle)", + "subtler": "var(--semantic-theme-emerald-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-emerald-alpha-assistive)", + "subtle": "var(--semantic-theme-emerald-alpha-subtle)", + "subtler": "var(--semantic-theme-emerald-alpha-subtler)", + "subtlest": "var(--semantic-theme-emerald-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-emerald-bolder)" + }, + "teal": { + "bold": "var(--semantic-theme-teal-bold)", + "normal": "var(--semantic-theme-teal-normal)", + "neutral": "var(--semantic-theme-teal-neutral)", + "alternative": "var(--semantic-theme-teal-alternative)", + "assistive": "var(--semantic-theme-teal-assistive)", + "subtle": "var(--semantic-theme-teal-subtle)", + "subtler": "var(--semantic-theme-teal-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-teal-alpha-assistive)", + "subtle": "var(--semantic-theme-teal-alpha-subtle)", + "subtler": "var(--semantic-theme-teal-alpha-subtler)", + "subtlest": "var(--semantic-theme-teal-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-teal-bolder)" + }, + "cyan": { + "bold": "var(--semantic-theme-cyan-bold)", + "normal": "var(--semantic-theme-cyan-normal)", + "neutral": "var(--semantic-theme-cyan-neutral)", + "alternative": "var(--semantic-theme-cyan-alternative)", + "assistive": "var(--semantic-theme-cyan-assistive)", + "subtle": "var(--semantic-theme-cyan-subtle)", + "subtler": "var(--semantic-theme-cyan-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-cyan-alpha-assistive)", + "subtle": "var(--semantic-theme-cyan-alpha-subtle)", + "subtler": "var(--semantic-theme-cyan-alpha-subtler)", + "subtlest": "var(--semantic-theme-cyan-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-cyan-bolder)" + }, + "sky": { + "bold": "var(--semantic-theme-sky-bold)", + "normal": "var(--semantic-theme-sky-normal)", + "neutral": "var(--semantic-theme-sky-neutral)", + "alternative": "var(--semantic-theme-sky-alternative)", + "assistive": "var(--semantic-theme-sky-assistive)", + "subtle": "var(--semantic-theme-sky-subtle)", + "subtler": "var(--semantic-theme-sky-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-sky-alpha-assistive)", + "subtle": "var(--semantic-theme-sky-alpha-subtle)", + "subtler": "var(--semantic-theme-sky-alpha-subtler)", + "subtlest": "var(--semantic-theme-sky-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-sky-bolder)" + }, + "blue": { + "bold": "var(--semantic-theme-blue-bold)", + "normal": "var(--semantic-theme-blue-normal)", + "neutral": "var(--semantic-theme-blue-neutral)", + "alternative": "var(--semantic-theme-blue-alternative)", + "assistive": "var(--semantic-theme-blue-assistive)", + "subtle": "var(--semantic-theme-blue-subtle)", + "subtler": "var(--semantic-theme-blue-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-blue-alpha-assistive)", + "subtle": "var(--semantic-theme-blue-alpha-subtle)", + "subtler": "var(--semantic-theme-blue-alpha-subtler)", + "subtlest": "var(--semantic-theme-blue-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-blue-bolder)" + }, + "violet": { + "bold": "var(--semantic-theme-violet-bold)", + "normal": "var(--semantic-theme-violet-normal)", + "neutral": "var(--semantic-theme-violet-neutral)", + "alternative": "var(--semantic-theme-violet-alternative)", + "assistive": "var(--semantic-theme-violet-assistive)", + "subtle": "var(--semantic-theme-violet-subtle)", + "subtler": "var(--semantic-theme-violet-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-violet-alpha-assistive)", + "subtle": "var(--semantic-theme-violet-alpha-subtle)", + "subtler": "var(--semantic-theme-violet-alpha-subtler)", + "subtlest": "var(--semantic-theme-violet-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-violet-bolder)" + }, + "purple": { + "bold": "var(--semantic-theme-purple-bold)", + "normal": "var(--semantic-theme-purple-normal)", + "neutral": "var(--semantic-theme-purple-neutral)", + "alternative": "var(--semantic-theme-purple-alternative)", + "assistive": "var(--semantic-theme-purple-assistive)", + "subtle": "var(--semantic-theme-purple-subtle)", + "subtler": "var(--semantic-theme-purple-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-purple-alpha-assistive)", + "subtle": "var(--semantic-theme-purple-alpha-subtle)", + "subtler": "var(--semantic-theme-purple-alpha-subtler)", + "subtlest": "var(--semantic-theme-purple-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-purple-bolder)" + }, + "fuchsia": { + "bold": "var(--semantic-theme-fuchsia-bold)", + "normal": "var(--semantic-theme-fuchsia-normal)", + "neutral": "var(--semantic-theme-fuchsia-neutral)", + "alternative": "var(--semantic-theme-fuchsia-alternative)", + "assistive": "var(--semantic-theme-fuchsia-assistive)", + "subtle": "var(--semantic-theme-fuchsia-subtle)", + "subtler": "var(--semantic-theme-fuchsia-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-fuchsia-alpha-assistive)", + "subtle": "var(--semantic-theme-fuchsia-alpha-subtle)", + "subtler": "var(--semantic-theme-fuchsia-alpha-subtler)", + "subtlest": "var(--semantic-theme-fuchsia-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-fuchsia-bolder)" + }, + "pink": { + "bold": "var(--semantic-theme-pink-bold)", + "normal": "var(--semantic-theme-pink-normal)", + "neutral": "var(--semantic-theme-pink-neutral)", + "alternative": "var(--semantic-theme-pink-alternative)", + "assistive": "var(--semantic-theme-pink-assistive)", + "subtle": "var(--semantic-theme-pink-subtle)", + "subtler": "var(--semantic-theme-pink-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-pink-alpha-assistive)", + "subtle": "var(--semantic-theme-pink-alpha-subtle)", + "subtler": "var(--semantic-theme-pink-alpha-subtler)", + "subtlest": "var(--semantic-theme-pink-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-pink-bolder)" + }, + "rose": { + "bold": "var(--semantic-theme-rose-bold)", + "normal": "var(--semantic-theme-rose-normal)", + "neutral": "var(--semantic-theme-rose-neutral)", + "alternative": "var(--semantic-theme-rose-alternative)", + "assistive": "var(--semantic-theme-rose-assistive)", + "subtle": "var(--semantic-theme-rose-subtle)", + "subtler": "var(--semantic-theme-rose-subtler)", + "alpha": { + "assistive": "var(--semantic-theme-rose-alpha-assistive)", + "subtle": "var(--semantic-theme-rose-alpha-subtle)", + "subtler": "var(--semantic-theme-rose-alpha-subtler)", + "subtlest": "var(--semantic-theme-rose-alpha-subtlest)" + }, + "bolder": "var(--semantic-theme-rose-bolder)" + } }, - curtain: { - bright: "var(--semantic-curtain-bright)", - dim: "var(--semantic-curtain-dim)", - dimmer: "var(--semantic-curtain-dimmer)", + "curtain": { + "static": { + "bright": "var(--semantic-curtain-static-bright)", + "dim": "var(--semantic-curtain-static-dim)", + "dimmer": "var(--semantic-curtain-static-dimmer)" + }, + "standard": "var(--semantic-curtain-standard)" }, - feedback: { - positive: { - alpha: { - subtle: "var(--semantic-feedback-positive-alpha-subtle)", - assistive: "var(--semantic-feedback-positive-alpha-assistive)", - subtler: "var(--semantic-feedback-positive-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-positive-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-positive-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-positive-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-positive-alpha-inverse-subtlest)", + "feedback": { + "positive": { + "alpha": { + "subtle": "var(--semantic-feedback-positive-alpha-subtle)", + "assistive": "var(--semantic-feedback-positive-alpha-assistive)", + "subtler": "var(--semantic-feedback-positive-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-positive-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-positive-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-positive-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-positive-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-positive-alpha-subtlest)", - }, - normal: "var(--semantic-feedback-positive-normal)", - bold: "var(--semantic-feedback-positive-bold)", - inverse: { - bold: "var(--semantic-feedback-positive-inverse-bold)", - normal: "var(--semantic-feedback-positive-inverse-normal)", - neutral: "var(--semantic-feedback-positive-inverse-neutral)", - alternative: "var(--semantic-feedback-positive-inverse-alternative)", - assistive: "var(--semantic-feedback-positive-inverse-assistive)", - subtle: "var(--semantic-feedback-positive-inverse-subtle)", - subtler: "var(--semantic-feedback-positive-inverse-subtler)", - bolder: "var(--semantic-feedback-positive-inverse-bolder)", - }, - assistive: "var(--semantic-feedback-positive-assistive)", - subtler: "var(--semantic-feedback-positive-subtler)", - neutral: "var(--semantic-feedback-positive-neutral)", - alternative: "var(--semantic-feedback-positive-alternative)", - subtle: "var(--semantic-feedback-positive-subtle)", - bolder: "var(--semantic-feedback-positive-bolder)", - }, - destructive: { - bold: "var(--semantic-feedback-destructive-bold)", - inverse: { - bold: "var(--semantic-feedback-destructive-inverse-bold)", - normal: "var(--semantic-feedback-destructive-inverse-normal)", - neutral: "var(--semantic-feedback-destructive-inverse-neutral)", - alternative: "var(--semantic-feedback-destructive-inverse-alternative)", - assistive: "var(--semantic-feedback-destructive-inverse-assistive)", - subtle: "var(--semantic-feedback-destructive-inverse-subtle)", - subtler: "var(--semantic-feedback-destructive-inverse-subtler)", - bolder: "var(--semantic-feedback-destructive-inverse-bolder)", - }, - normal: "var(--semantic-feedback-destructive-normal)", - alpha: { - assistive: "var(--semantic-feedback-destructive-alpha-assistive)", - subtle: "var(--semantic-feedback-destructive-alpha-subtle)", - subtler: "var(--semantic-feedback-destructive-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-destructive-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-destructive-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-destructive-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-destructive-alpha-inverse-subtlest)", + "subtlest": "var(--semantic-feedback-positive-alpha-subtlest)" + }, + "normal": "var(--semantic-feedback-positive-normal)", + "bold": "var(--semantic-feedback-positive-bold)", + "inverse": { + "bold": "var(--semantic-feedback-positive-inverse-bold)", + "normal": "var(--semantic-feedback-positive-inverse-normal)", + "neutral": "var(--semantic-feedback-positive-inverse-neutral)", + "alternative": "var(--semantic-feedback-positive-inverse-alternative)", + "assistive": "var(--semantic-feedback-positive-inverse-assistive)", + "subtle": "var(--semantic-feedback-positive-inverse-subtle)", + "subtler": "var(--semantic-feedback-positive-inverse-subtler)", + "bolder": "var(--semantic-feedback-positive-inverse-bolder)" + }, + "assistive": "var(--semantic-feedback-positive-assistive)", + "subtler": "var(--semantic-feedback-positive-subtler)", + "neutral": "var(--semantic-feedback-positive-neutral)", + "alternative": "var(--semantic-feedback-positive-alternative)", + "subtle": "var(--semantic-feedback-positive-subtle)", + "bolder": "var(--semantic-feedback-positive-bolder)" + }, + "destructive": { + "bold": "var(--semantic-feedback-destructive-bold)", + "inverse": { + "bold": "var(--semantic-feedback-destructive-inverse-bold)", + "normal": "var(--semantic-feedback-destructive-inverse-normal)", + "neutral": "var(--semantic-feedback-destructive-inverse-neutral)", + "alternative": "var(--semantic-feedback-destructive-inverse-alternative)", + "assistive": "var(--semantic-feedback-destructive-inverse-assistive)", + "subtle": "var(--semantic-feedback-destructive-inverse-subtle)", + "subtler": "var(--semantic-feedback-destructive-inverse-subtler)", + "bolder": "var(--semantic-feedback-destructive-inverse-bolder)" + }, + "normal": "var(--semantic-feedback-destructive-normal)", + "alpha": { + "assistive": "var(--semantic-feedback-destructive-alpha-assistive)", + "subtle": "var(--semantic-feedback-destructive-alpha-subtle)", + "subtler": "var(--semantic-feedback-destructive-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-destructive-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-destructive-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-destructive-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-destructive-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-destructive-alpha-subtlest)", - }, - neutral: "var(--semantic-feedback-destructive-neutral)", - alternative: "var(--semantic-feedback-destructive-alternative)", - assistive: "var(--semantic-feedback-destructive-assistive)", - subtle: "var(--semantic-feedback-destructive-subtle)", - subtler: "var(--semantic-feedback-destructive-subtler)", - bolder: "var(--semantic-feedback-destructive-bolder)", - }, - notifying: { - bold: "var(--semantic-feedback-notifying-bold)", - normal: "var(--semantic-feedback-notifying-normal)", - neutral: "var(--semantic-feedback-notifying-neutral)", - alternative: "var(--semantic-feedback-notifying-alternative)", - assistive: "var(--semantic-feedback-notifying-assistive)", - subtle: "var(--semantic-feedback-notifying-subtle)", - subtler: "var(--semantic-feedback-notifying-subtler)", - inverse: { - bold: "var(--semantic-feedback-notifying-inverse-bold)", - normal: "var(--semantic-feedback-notifying-inverse-normal)", - neutral: "var(--semantic-feedback-notifying-inverse-neutral)", - alternative: "var(--semantic-feedback-notifying-inverse-alternative)", - assistive: "var(--semantic-feedback-notifying-inverse-assistive)", - subtle: "var(--semantic-feedback-notifying-inverse-subtle)", - subtler: "var(--semantic-feedback-notifying-inverse-subtler)", - bolder: "var(--semantic-feedback-notifying-inverse-bolder)", - }, - alpha: { - assistive: "var(--semantic-feedback-notifying-alpha-assistive)", - subtle: "var(--semantic-feedback-notifying-alpha-subtle)", - subtler: "var(--semantic-feedback-notifying-alpha-subtler)", - inverse: { - assistive: "var(--semantic-feedback-notifying-alpha-inverse-assistive)", - subtle: "var(--semantic-feedback-notifying-alpha-inverse-subtle)", - subtler: "var(--semantic-feedback-notifying-alpha-inverse-subtler)", - subtlest: "var(--semantic-feedback-notifying-alpha-inverse-subtlest)", + "subtlest": "var(--semantic-feedback-destructive-alpha-subtlest)" + }, + "neutral": "var(--semantic-feedback-destructive-neutral)", + "alternative": "var(--semantic-feedback-destructive-alternative)", + "assistive": "var(--semantic-feedback-destructive-assistive)", + "subtle": "var(--semantic-feedback-destructive-subtle)", + "subtler": "var(--semantic-feedback-destructive-subtler)", + "bolder": "var(--semantic-feedback-destructive-bolder)" + }, + "notifying": { + "bold": "var(--semantic-feedback-notifying-bold)", + "normal": "var(--semantic-feedback-notifying-normal)", + "neutral": "var(--semantic-feedback-notifying-neutral)", + "alternative": "var(--semantic-feedback-notifying-alternative)", + "assistive": "var(--semantic-feedback-notifying-assistive)", + "subtle": "var(--semantic-feedback-notifying-subtle)", + "subtler": "var(--semantic-feedback-notifying-subtler)", + "inverse": { + "bold": "var(--semantic-feedback-notifying-inverse-bold)", + "normal": "var(--semantic-feedback-notifying-inverse-normal)", + "neutral": "var(--semantic-feedback-notifying-inverse-neutral)", + "alternative": "var(--semantic-feedback-notifying-inverse-alternative)", + "assistive": "var(--semantic-feedback-notifying-inverse-assistive)", + "subtle": "var(--semantic-feedback-notifying-inverse-subtle)", + "subtler": "var(--semantic-feedback-notifying-inverse-subtler)", + "bolder": "var(--semantic-feedback-notifying-inverse-bolder)" + }, + "alpha": { + "assistive": "var(--semantic-feedback-notifying-alpha-assistive)", + "subtle": "var(--semantic-feedback-notifying-alpha-subtle)", + "subtler": "var(--semantic-feedback-notifying-alpha-subtler)", + "inverse": { + "assistive": "var(--semantic-feedback-notifying-alpha-inverse-assistive)", + "subtle": "var(--semantic-feedback-notifying-alpha-inverse-subtle)", + "subtler": "var(--semantic-feedback-notifying-alpha-inverse-subtler)", + "subtlest": "var(--semantic-feedback-notifying-alpha-inverse-subtlest)" }, - subtlest: "var(--semantic-feedback-notifying-alpha-subtlest)", + "subtlest": "var(--semantic-feedback-notifying-alpha-subtlest)" }, - bolder: "var(--semantic-feedback-notifying-bolder)", - }, - }, - }, - }, + "bolder": "var(--semantic-feedback-notifying-bolder)" + } + } + } + } }, - scheme: { - desktop: { - semantic: { - spacing: { + "scheme": { + "desktop": { + "semantic": { + "spacing": { "0": "var(--semantic-spacing-0)", "1": "var(--semantic-spacing-1)", "2": "var(--semantic-spacing-2)", @@ -1747,9 +1753,9 @@ export const designTokens = { "96": "var(--semantic-spacing-96)", "112": "var(--semantic-spacing-112)", "128": "var(--semantic-spacing-128)", - "144": "var(--semantic-spacing-144)", + "144": "var(--semantic-spacing-144)" }, - radius: { + "radius": { "0": "var(--semantic-radius-0)", "2": "var(--semantic-radius-2)", "4": "var(--semantic-radius-4)", @@ -1759,17 +1765,17 @@ export const designTokens = { "12": "var(--semantic-radius-12)", "16": "var(--semantic-radius-16)", "24": "var(--semantic-radius-24)", - max: "var(--semantic-radius-max)", + "max": "var(--semantic-radius-max)" }, - strokeWeight: { + "strokeWeight": { "1": "var(--semantic-stroke-weight-1)", "2": "var(--semantic-stroke-weight-2)", "3": "var(--semantic-stroke-weight-3)", "4": "var(--semantic-stroke-weight-4)", "5": "var(--semantic-stroke-weight-5)", - "6": "var(--semantic-stroke-weight-6)", + "6": "var(--semantic-stroke-weight-6)" }, - opacity: { + "opacity": { "0": "var(--semantic-opacity-0)", "5": "var(--semantic-opacity-5)", "8": "var(--semantic-opacity-8)", @@ -1783,23 +1789,32 @@ export const designTokens = { "63": "var(--semantic-opacity-63)", "76": "var(--semantic-opacity-76)", "91": "var(--semantic-opacity-91)", - "100": "var(--semantic-opacity-100)", + "100": "var(--semantic-opacity-100)" }, - breakpoint: { - min: "var(--semantic-breakpoint-min)", - max: "var(--semantic-breakpoint-max)", + "breakpoint": { + "min": "var(--semantic-breakpoint-min)", + "max": "var(--semantic-breakpoint-max)", + "grid": { + "container": { + "min": "var(--semantic-breakpoint-grid-container-min)", + "max": "var(--semantic-breakpoint-grid-container-max)" + } + } }, - margin: { - lg: "var(--semantic-margin-lg)", - md: "var(--semantic-margin-md)", - sm: "var(--semantic-margin-sm)", - xl: "var(--semantic-margin-xl)", + "margin": { + "lg": "var(--semantic-margin-lg)", + "md": "var(--semantic-margin-md)", + "sm": "var(--semantic-margin-sm)", + "xl": "var(--semantic-margin-xl)", "2xl": "var(--semantic-margin-2xl)", "3xl": "var(--semantic-margin-3xl)", - xs: "var(--semantic-margin-xs)", + "xs": "var(--semantic-margin-xs)", "2xs": "var(--semantic-margin-2xs)", + "4xl": "var(--semantic-margin-4xl)", + "5xl": "var(--semantic-margin-5xl)", + "6xl": "var(--semantic-margin-6xl)" }, - position: { + "position": { "0": "var(--semantic-position-0)", "1": "var(--semantic-position-1)", "2": "var(--semantic-position-2)", @@ -1809,11 +1824,11 @@ export const designTokens = { "8": "var(--semantic-position-8)", "12": "var(--semantic-position-12)", "16": "var(--semantic-position-16)", - "24": "var(--semantic-position-24)", - }, + "24": "var(--semantic-position-24)" + } }, - primitive: { - unit: { + "primitive": { + "unit": { "0": "var(--primitive-unit-0)", "1": "var(--primitive-unit-1)", "2": "var(--primitive-unit-2)", @@ -1838,13 +1853,13 @@ export const designTokens = { "96": "var(--primitive-unit-96)", "112": "var(--primitive-unit-112)", "128": "var(--primitive-unit-128)", - "144": "var(--primitive-unit-144)", - }, - }, + "144": "var(--primitive-unit-144)" + } + } }, - tablet: { - semantic: { - spacing: { + "tablet": { + "semantic": { + "spacing": { "0": "var(--semantic-spacing-0)", "1": "var(--semantic-spacing-1)", "2": "var(--semantic-spacing-2)", @@ -1868,9 +1883,9 @@ export const designTokens = { "96": "var(--semantic-spacing-96)", "112": "var(--semantic-spacing-112)", "128": "var(--semantic-spacing-128)", - "144": "var(--semantic-spacing-144)", + "144": "var(--semantic-spacing-144)" }, - radius: { + "radius": { "0": "var(--semantic-radius-0)", "2": "var(--semantic-radius-2)", "4": "var(--semantic-radius-4)", @@ -1880,17 +1895,17 @@ export const designTokens = { "12": "var(--semantic-radius-12)", "16": "var(--semantic-radius-16)", "24": "var(--semantic-radius-24)", - max: "var(--semantic-radius-max)", + "max": "var(--semantic-radius-max)" }, - strokeWeight: { + "strokeWeight": { "1": "var(--semantic-stroke-weight-1)", "2": "var(--semantic-stroke-weight-2)", "3": "var(--semantic-stroke-weight-3)", "4": "var(--semantic-stroke-weight-4)", "5": "var(--semantic-stroke-weight-5)", - "6": "var(--semantic-stroke-weight-6)", + "6": "var(--semantic-stroke-weight-6)" }, - opacity: { + "opacity": { "0": "var(--semantic-opacity-0)", "5": "var(--semantic-opacity-5)", "8": "var(--semantic-opacity-8)", @@ -1904,23 +1919,32 @@ export const designTokens = { "63": "var(--semantic-opacity-63)", "76": "var(--semantic-opacity-76)", "91": "var(--semantic-opacity-91)", - "100": "var(--semantic-opacity-100)", + "100": "var(--semantic-opacity-100)" }, - breakpoint: { - min: "var(--semantic-breakpoint-min)", - max: "var(--semantic-breakpoint-max)", + "breakpoint": { + "min": "var(--semantic-breakpoint-min)", + "max": "var(--semantic-breakpoint-max)", + "grid": { + "container": { + "min": "var(--semantic-breakpoint-grid-container-min)", + "max": "var(--semantic-breakpoint-grid-container-max)" + } + } }, - margin: { - lg: "var(--semantic-margin-lg)", - md: "var(--semantic-margin-md)", - sm: "var(--semantic-margin-sm)", - xl: "var(--semantic-margin-xl)", + "margin": { + "lg": "var(--semantic-margin-lg)", + "md": "var(--semantic-margin-md)", + "sm": "var(--semantic-margin-sm)", + "xl": "var(--semantic-margin-xl)", "2xl": "var(--semantic-margin-2xl)", "3xl": "var(--semantic-margin-3xl)", - xs: "var(--semantic-margin-xs)", + "xs": "var(--semantic-margin-xs)", "2xs": "var(--semantic-margin-2xs)", + "4xl": "var(--semantic-margin-4xl)", + "5xl": "var(--semantic-margin-5xl)", + "6xl": "var(--semantic-margin-6xl)" }, - position: { + "position": { "0": "var(--semantic-position-0)", "1": "var(--semantic-position-1)", "2": "var(--semantic-position-2)", @@ -1930,11 +1954,11 @@ export const designTokens = { "8": "var(--semantic-position-8)", "12": "var(--semantic-position-12)", "16": "var(--semantic-position-16)", - "24": "var(--semantic-position-24)", - }, + "24": "var(--semantic-position-24)" + } }, - primitive: { - unit: { + "primitive": { + "unit": { "0": "var(--primitive-unit-0)", "1": "var(--primitive-unit-1)", "2": "var(--primitive-unit-2)", @@ -1959,13 +1983,13 @@ export const designTokens = { "96": "var(--primitive-unit-96)", "112": "var(--primitive-unit-112)", "128": "var(--primitive-unit-128)", - "144": "var(--primitive-unit-144)", - }, - }, + "144": "var(--primitive-unit-144)" + } + } }, - mobile: { - semantic: { - spacing: { + "mobile": { + "semantic": { + "spacing": { "0": "var(--semantic-spacing-0)", "1": "var(--semantic-spacing-1)", "2": "var(--semantic-spacing-2)", @@ -1989,9 +2013,9 @@ export const designTokens = { "96": "var(--semantic-spacing-96)", "112": "var(--semantic-spacing-112)", "128": "var(--semantic-spacing-128)", - "144": "var(--semantic-spacing-144)", + "144": "var(--semantic-spacing-144)" }, - radius: { + "radius": { "0": "var(--semantic-radius-0)", "2": "var(--semantic-radius-2)", "4": "var(--semantic-radius-4)", @@ -2001,17 +2025,17 @@ export const designTokens = { "12": "var(--semantic-radius-12)", "16": "var(--semantic-radius-16)", "24": "var(--semantic-radius-24)", - max: "var(--semantic-radius-max)", + "max": "var(--semantic-radius-max)" }, - strokeWeight: { + "strokeWeight": { "1": "var(--semantic-stroke-weight-1)", "2": "var(--semantic-stroke-weight-2)", "3": "var(--semantic-stroke-weight-3)", "4": "var(--semantic-stroke-weight-4)", "5": "var(--semantic-stroke-weight-5)", - "6": "var(--semantic-stroke-weight-6)", + "6": "var(--semantic-stroke-weight-6)" }, - opacity: { + "opacity": { "0": "var(--semantic-opacity-0)", "5": "var(--semantic-opacity-5)", "8": "var(--semantic-opacity-8)", @@ -2025,23 +2049,32 @@ export const designTokens = { "63": "var(--semantic-opacity-63)", "76": "var(--semantic-opacity-76)", "91": "var(--semantic-opacity-91)", - "100": "var(--semantic-opacity-100)", + "100": "var(--semantic-opacity-100)" }, - breakpoint: { - min: "var(--semantic-breakpoint-min)", - max: "var(--semantic-breakpoint-max)", + "breakpoint": { + "min": "var(--semantic-breakpoint-min)", + "max": "var(--semantic-breakpoint-max)", + "grid": { + "container": { + "min": "var(--semantic-breakpoint-grid-container-min)", + "max": "var(--semantic-breakpoint-grid-container-max)" + } + } }, - margin: { - lg: "var(--semantic-margin-lg)", - md: "var(--semantic-margin-md)", - sm: "var(--semantic-margin-sm)", - xl: "var(--semantic-margin-xl)", + "margin": { + "lg": "var(--semantic-margin-lg)", + "md": "var(--semantic-margin-md)", + "sm": "var(--semantic-margin-sm)", + "xl": "var(--semantic-margin-xl)", "2xl": "var(--semantic-margin-2xl)", "3xl": "var(--semantic-margin-3xl)", - xs: "var(--semantic-margin-xs)", + "xs": "var(--semantic-margin-xs)", "2xs": "var(--semantic-margin-2xs)", + "4xl": "var(--semantic-margin-4xl)", + "5xl": "var(--semantic-margin-5xl)", + "6xl": "var(--semantic-margin-6xl)" }, - position: { + "position": { "0": "var(--semantic-position-0)", "1": "var(--semantic-position-1)", "2": "var(--semantic-position-2)", @@ -2051,11 +2084,11 @@ export const designTokens = { "8": "var(--semantic-position-8)", "12": "var(--semantic-position-12)", "16": "var(--semantic-position-16)", - "24": "var(--semantic-position-24)", - }, + "24": "var(--semantic-position-24)" + } }, - primitive: { - unit: { + "primitive": { + "unit": { "0": "var(--primitive-unit-0)", "1": "var(--primitive-unit-1)", "2": "var(--primitive-unit-2)", @@ -2080,400 +2113,382 @@ export const designTokens = { "96": "var(--primitive-unit-96)", "112": "var(--primitive-unit-112)", "128": "var(--primitive-unit-128)", - "144": "var(--primitive-unit-144)", - }, - }, - }, + "144": "var(--primitive-unit-144)" + } + } + } }, - typography: { - desktop: { - primitive: { - typeface: { - hero: "var(--primitive-typeface-hero)", - syntax: "var(--primitive-typeface-syntax)", - title: "var(--primitive-typeface-title)", - label: "var(--primitive-typeface-label)", - body: "var(--primitive-typeface-body)", + "typography": { + "desktop": { + "primitive": { + "typeface": { + "hero": "var(--primitive-typeface-hero)", + "syntax": "var(--primitive-typeface-syntax)", + "title": "var(--primitive-typeface-title)", + "label": "var(--primitive-typeface-label)", + "body": "var(--primitive-typeface-body)" }, - fontSize: { - hero: { + "fontSize": { + "hero": { "1": "var(--primitive-font-size-hero-1)", - "2": "var(--primitive-font-size-hero-2)", - "3": "var(--primitive-font-size-hero-3)", - "4": "var(--primitive-font-size-hero-4)", + "2": "var(--primitive-font-size-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-size-title-1)", "2": "var(--primitive-font-size-title-2)", "3": "var(--primitive-font-size-title-3)", - "4": "var(--primitive-font-size-title-4)", - }, - body: { - lg: "var(--primitive-font-size-body-lg)", - md: "var(--primitive-font-size-body-md)", - sm: "var(--primitive-font-size-body-sm)", - xs: "var(--primitive-font-size-body-xs)", - "2xs": "var(--primitive-font-size-body-2xs)", - }, - label: { - lg: "var(--primitive-font-size-label-lg)", - md: "var(--primitive-font-size-label-md)", - sm: "var(--primitive-font-size-label-sm)", - xs: "var(--primitive-font-size-label-xs)", - }, - syntax: { - lg: "var(--primitive-font-size-syntax-lg)", - md: "var(--primitive-font-size-syntax-md)", - sm: "var(--primitive-font-size-syntax-sm)", - xs: "var(--primitive-font-size-syntax-xs)", - }, + "4": "var(--primitive-font-size-title-4)" + }, + "body": { + "lg": "var(--primitive-font-size-body-lg)", + "md": "var(--primitive-font-size-body-md)", + "sm": "var(--primitive-font-size-body-sm)", + "xs": "var(--primitive-font-size-body-xs)", + "2xs": "var(--primitive-font-size-body-2xs)" + }, + "label": { + "lg": "var(--primitive-font-size-label-lg)", + "md": "var(--primitive-font-size-label-md)", + "sm": "var(--primitive-font-size-label-sm)", + "xs": "var(--primitive-font-size-label-xs)" + }, + "syntax": { + "lg": "var(--primitive-font-size-syntax-lg)", + "md": "var(--primitive-font-size-syntax-md)", + "sm": "var(--primitive-font-size-syntax-sm)", + "xs": "var(--primitive-font-size-syntax-xs)" + } }, - font: { - lineHeight: { - hero: { + "font": { + "lineHeight": { + "hero": { "1": "var(--primitive-font-line-height-hero-1)", - "2": "var(--primitive-font-line-height-hero-2)", - "3": "var(--primitive-font-line-height-hero-3)", - "4": "var(--primitive-font-line-height-hero-4)", + "2": "var(--primitive-font-line-height-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-line-height-title-1)", "2": "var(--primitive-font-line-height-title-2)", "3": "var(--primitive-font-line-height-title-3)", - "4": "var(--primitive-font-line-height-title-4)", - }, - label: { - lg: "var(--primitive-font-line-height-label-lg)", - md: "var(--primitive-font-line-height-label-md)", - sm: "var(--primitive-font-line-height-label-sm)", - xs: "var(--primitive-font-line-height-label-xs)", - }, - body: { - lg: "var(--primitive-font-line-height-body-lg)", - md: "var(--primitive-font-line-height-body-md)", - sm: "var(--primitive-font-line-height-body-sm)", - xs: "var(--primitive-font-line-height-body-xs)", - "2xs": "var(--primitive-font-line-height-body-2xs)", - }, - syntax: { - lg: "var(--primitive-font-line-height-syntax-lg)", - md: "var(--primitive-font-line-height-syntax-md)", - sm: "var(--primitive-font-line-height-syntax-sm)", - xs: "var(--primitive-font-line-height-syntax-xs)", - }, - }, - letterSpacing: { - hero: { + "4": "var(--primitive-font-line-height-title-4)" + }, + "label": { + "lg": "var(--primitive-font-line-height-label-lg)", + "md": "var(--primitive-font-line-height-label-md)", + "sm": "var(--primitive-font-line-height-label-sm)", + "xs": "var(--primitive-font-line-height-label-xs)" + }, + "body": { + "lg": "var(--primitive-font-line-height-body-lg)", + "md": "var(--primitive-font-line-height-body-md)", + "sm": "var(--primitive-font-line-height-body-sm)", + "xs": "var(--primitive-font-line-height-body-xs)", + "2xs": "var(--primitive-font-line-height-body-2xs)" + }, + "syntax": { + "lg": "var(--primitive-font-line-height-syntax-lg)", + "md": "var(--primitive-font-line-height-syntax-md)", + "sm": "var(--primitive-font-line-height-syntax-sm)", + "xs": "var(--primitive-font-line-height-syntax-xs)" + } + }, + "letterSpacing": { + "hero": { "1": "var(--primitive-font-letter-spacing-hero-1)", - "2": "var(--primitive-font-letter-spacing-hero-2)", - "3": "var(--primitive-font-letter-spacing-hero-3)", - "4": "var(--primitive-font-letter-spacing-hero-4)", + "2": "var(--primitive-font-letter-spacing-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-letter-spacing-title-1)", "2": "var(--primitive-font-letter-spacing-title-2)", "3": "var(--primitive-font-letter-spacing-title-3)", - "4": "var(--primitive-font-letter-spacing-title-4)", - }, - label: { - lg: "var(--primitive-font-letter-spacing-label-lg)", - md: "var(--primitive-font-letter-spacing-label-md)", - sm: "var(--primitive-font-letter-spacing-label-sm)", - xs: "var(--primitive-font-letter-spacing-label-xs)", - }, - body: { - lg: "var(--primitive-font-letter-spacing-body-lg)", - md: "var(--primitive-font-letter-spacing-body-md)", - sm: "var(--primitive-font-letter-spacing-body-sm)", - xs: "var(--primitive-font-letter-spacing-body-xs)", - "2xs": "var(--primitive-font-letter-spacing-body-2xs)", - }, - }, + "4": "var(--primitive-font-letter-spacing-title-4)" + }, + "label": { + "lg": "var(--primitive-font-letter-spacing-label-lg)", + "md": "var(--primitive-font-letter-spacing-label-md)", + "sm": "var(--primitive-font-letter-spacing-label-sm)", + "xs": "var(--primitive-font-letter-spacing-label-xs)" + }, + "body": { + "lg": "var(--primitive-font-letter-spacing-body-lg)", + "md": "var(--primitive-font-letter-spacing-body-md)", + "sm": "var(--primitive-font-letter-spacing-body-sm)", + "xs": "var(--primitive-font-letter-spacing-body-xs)", + "2xs": "var(--primitive-font-letter-spacing-body-2xs)" + } + } }, - fontWeight: { - hero: { - normal: "var(--primitive-font-weight-hero-normal)", - bold: "var(--primitive-font-weight-hero-bold)", - }, - title: { - normal: "var(--primitive-font-weight-title-normal)", - bold: "var(--primitive-font-weight-title-bold)", - }, - label: { - normal: "var(--primitive-font-weight-label-normal)", - bold: "var(--primitive-font-weight-label-bold)", - subtle: "var(--primitive-font-weight-label-subtle)", - }, - body: { - normal: "var(--primitive-font-weight-body-normal)", - bold: "var(--primitive-font-weight-body-bold)", - }, - syntax: { - normal: "var(--primitive-font-weight-syntax-normal)", - }, - }, - }, + "fontWeight": { + "hero": { + "normal": "var(--primitive-font-weight-hero-normal)", + "bold": "var(--primitive-font-weight-hero-bold)" + }, + "title": { + "normal": "var(--primitive-font-weight-title-normal)", + "bold": "var(--primitive-font-weight-title-bold)" + }, + "label": { + "normal": "var(--primitive-font-weight-label-normal)", + "bold": "var(--primitive-font-weight-label-bold)", + "subtle": "var(--primitive-font-weight-label-subtle)" + }, + "body": { + "normal": "var(--primitive-font-weight-body-normal)", + "bold": "var(--primitive-font-weight-body-bold)" + }, + "syntax": { + "normal": "var(--primitive-font-weight-syntax-normal)" + } + } + } }, - tablet: { - primitive: { - typeface: { - hero: "var(--primitive-typeface-hero)", - syntax: "var(--primitive-typeface-syntax)", - title: "var(--primitive-typeface-title)", - label: "var(--primitive-typeface-label)", - body: "var(--primitive-typeface-body)", + "tablet": { + "primitive": { + "typeface": { + "hero": "var(--primitive-typeface-hero)", + "syntax": "var(--primitive-typeface-syntax)", + "title": "var(--primitive-typeface-title)", + "label": "var(--primitive-typeface-label)", + "body": "var(--primitive-typeface-body)" }, - fontSize: { - hero: { + "fontSize": { + "hero": { "1": "var(--primitive-font-size-hero-1)", - "2": "var(--primitive-font-size-hero-2)", - "3": "var(--primitive-font-size-hero-3)", - "4": "var(--primitive-font-size-hero-4)", + "2": "var(--primitive-font-size-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-size-title-1)", "2": "var(--primitive-font-size-title-2)", "3": "var(--primitive-font-size-title-3)", - "4": "var(--primitive-font-size-title-4)", - }, - body: { - lg: "var(--primitive-font-size-body-lg)", - md: "var(--primitive-font-size-body-md)", - sm: "var(--primitive-font-size-body-sm)", - xs: "var(--primitive-font-size-body-xs)", - "2xs": "var(--primitive-font-size-body-2xs)", - }, - label: { - lg: "var(--primitive-font-size-label-lg)", - md: "var(--primitive-font-size-label-md)", - sm: "var(--primitive-font-size-label-sm)", - xs: "var(--primitive-font-size-label-xs)", - }, - syntax: { - lg: "var(--primitive-font-size-syntax-lg)", - md: "var(--primitive-font-size-syntax-md)", - sm: "var(--primitive-font-size-syntax-sm)", - xs: "var(--primitive-font-size-syntax-xs)", - }, + "4": "var(--primitive-font-size-title-4)" + }, + "body": { + "lg": "var(--primitive-font-size-body-lg)", + "md": "var(--primitive-font-size-body-md)", + "sm": "var(--primitive-font-size-body-sm)", + "xs": "var(--primitive-font-size-body-xs)", + "2xs": "var(--primitive-font-size-body-2xs)" + }, + "label": { + "lg": "var(--primitive-font-size-label-lg)", + "md": "var(--primitive-font-size-label-md)", + "sm": "var(--primitive-font-size-label-sm)", + "xs": "var(--primitive-font-size-label-xs)" + }, + "syntax": { + "lg": "var(--primitive-font-size-syntax-lg)", + "md": "var(--primitive-font-size-syntax-md)", + "sm": "var(--primitive-font-size-syntax-sm)", + "xs": "var(--primitive-font-size-syntax-xs)" + } }, - font: { - lineHeight: { - hero: { + "font": { + "lineHeight": { + "hero": { "1": "var(--primitive-font-line-height-hero-1)", - "2": "var(--primitive-font-line-height-hero-2)", - "3": "var(--primitive-font-line-height-hero-3)", - "4": "var(--primitive-font-line-height-hero-4)", + "2": "var(--primitive-font-line-height-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-line-height-title-1)", "2": "var(--primitive-font-line-height-title-2)", "3": "var(--primitive-font-line-height-title-3)", - "4": "var(--primitive-font-line-height-title-4)", - }, - label: { - lg: "var(--primitive-font-line-height-label-lg)", - md: "var(--primitive-font-line-height-label-md)", - sm: "var(--primitive-font-line-height-label-sm)", - xs: "var(--primitive-font-line-height-label-xs)", - }, - body: { - lg: "var(--primitive-font-line-height-body-lg)", - md: "var(--primitive-font-line-height-body-md)", - sm: "var(--primitive-font-line-height-body-sm)", - xs: "var(--primitive-font-line-height-body-xs)", - "2xs": "var(--primitive-font-line-height-body-2xs)", - }, - syntax: { - lg: "var(--primitive-font-line-height-syntax-lg)", - md: "var(--primitive-font-line-height-syntax-md)", - sm: "var(--primitive-font-line-height-syntax-sm)", - xs: "var(--primitive-font-line-height-syntax-xs)", - }, - }, - letterSpacing: { - hero: { + "4": "var(--primitive-font-line-height-title-4)" + }, + "label": { + "lg": "var(--primitive-font-line-height-label-lg)", + "md": "var(--primitive-font-line-height-label-md)", + "sm": "var(--primitive-font-line-height-label-sm)", + "xs": "var(--primitive-font-line-height-label-xs)" + }, + "body": { + "lg": "var(--primitive-font-line-height-body-lg)", + "md": "var(--primitive-font-line-height-body-md)", + "sm": "var(--primitive-font-line-height-body-sm)", + "xs": "var(--primitive-font-line-height-body-xs)", + "2xs": "var(--primitive-font-line-height-body-2xs)" + }, + "syntax": { + "lg": "var(--primitive-font-line-height-syntax-lg)", + "md": "var(--primitive-font-line-height-syntax-md)", + "sm": "var(--primitive-font-line-height-syntax-sm)", + "xs": "var(--primitive-font-line-height-syntax-xs)" + } + }, + "letterSpacing": { + "hero": { "1": "var(--primitive-font-letter-spacing-hero-1)", - "2": "var(--primitive-font-letter-spacing-hero-2)", - "3": "var(--primitive-font-letter-spacing-hero-3)", - "4": "var(--primitive-font-letter-spacing-hero-4)", + "2": "var(--primitive-font-letter-spacing-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-letter-spacing-title-1)", "2": "var(--primitive-font-letter-spacing-title-2)", "3": "var(--primitive-font-letter-spacing-title-3)", - "4": "var(--primitive-font-letter-spacing-title-4)", - }, - label: { - lg: "var(--primitive-font-letter-spacing-label-lg)", - md: "var(--primitive-font-letter-spacing-label-md)", - sm: "var(--primitive-font-letter-spacing-label-sm)", - xs: "var(--primitive-font-letter-spacing-label-xs)", - }, - body: { - lg: "var(--primitive-font-letter-spacing-body-lg)", - md: "var(--primitive-font-letter-spacing-body-md)", - sm: "var(--primitive-font-letter-spacing-body-sm)", - xs: "var(--primitive-font-letter-spacing-body-xs)", - "2xs": "var(--primitive-font-letter-spacing-body-2xs)", - }, - }, + "4": "var(--primitive-font-letter-spacing-title-4)" + }, + "label": { + "lg": "var(--primitive-font-letter-spacing-label-lg)", + "md": "var(--primitive-font-letter-spacing-label-md)", + "sm": "var(--primitive-font-letter-spacing-label-sm)", + "xs": "var(--primitive-font-letter-spacing-label-xs)" + }, + "body": { + "lg": "var(--primitive-font-letter-spacing-body-lg)", + "md": "var(--primitive-font-letter-spacing-body-md)", + "sm": "var(--primitive-font-letter-spacing-body-sm)", + "xs": "var(--primitive-font-letter-spacing-body-xs)", + "2xs": "var(--primitive-font-letter-spacing-body-2xs)" + } + } }, - fontWeight: { - hero: { - normal: "var(--primitive-font-weight-hero-normal)", - bold: "var(--primitive-font-weight-hero-bold)", - }, - title: { - normal: "var(--primitive-font-weight-title-normal)", - bold: "var(--primitive-font-weight-title-bold)", - }, - label: { - normal: "var(--primitive-font-weight-label-normal)", - bold: "var(--primitive-font-weight-label-bold)", - subtle: "var(--primitive-font-weight-label-subtle)", - }, - body: { - normal: "var(--primitive-font-weight-body-normal)", - bold: "var(--primitive-font-weight-body-bold)", - }, - syntax: { - normal: "var(--primitive-font-weight-syntax-normal)", - }, - }, - }, + "fontWeight": { + "hero": { + "normal": "var(--primitive-font-weight-hero-normal)", + "bold": "var(--primitive-font-weight-hero-bold)" + }, + "title": { + "normal": "var(--primitive-font-weight-title-normal)", + "bold": "var(--primitive-font-weight-title-bold)" + }, + "label": { + "normal": "var(--primitive-font-weight-label-normal)", + "bold": "var(--primitive-font-weight-label-bold)", + "subtle": "var(--primitive-font-weight-label-subtle)" + }, + "body": { + "normal": "var(--primitive-font-weight-body-normal)", + "bold": "var(--primitive-font-weight-body-bold)" + }, + "syntax": { + "normal": "var(--primitive-font-weight-syntax-normal)" + } + } + } }, - mobile: { - primitive: { - typeface: { - hero: "var(--primitive-typeface-hero)", - syntax: "var(--primitive-typeface-syntax)", - title: "var(--primitive-typeface-title)", - label: "var(--primitive-typeface-label)", - body: "var(--primitive-typeface-body)", + "mobile": { + "primitive": { + "typeface": { + "hero": "var(--primitive-typeface-hero)", + "syntax": "var(--primitive-typeface-syntax)", + "title": "var(--primitive-typeface-title)", + "label": "var(--primitive-typeface-label)", + "body": "var(--primitive-typeface-body)" }, - fontSize: { - hero: { + "fontSize": { + "hero": { "1": "var(--primitive-font-size-hero-1)", - "2": "var(--primitive-font-size-hero-2)", - "3": "var(--primitive-font-size-hero-3)", - "4": "var(--primitive-font-size-hero-4)", + "2": "var(--primitive-font-size-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-size-title-1)", "2": "var(--primitive-font-size-title-2)", "3": "var(--primitive-font-size-title-3)", - "4": "var(--primitive-font-size-title-4)", - }, - body: { - lg: "var(--primitive-font-size-body-lg)", - md: "var(--primitive-font-size-body-md)", - sm: "var(--primitive-font-size-body-sm)", - xs: "var(--primitive-font-size-body-xs)", - "2xs": "var(--primitive-font-size-body-2xs)", - }, - label: { - lg: "var(--primitive-font-size-label-lg)", - md: "var(--primitive-font-size-label-md)", - sm: "var(--primitive-font-size-label-sm)", - xs: "var(--primitive-font-size-label-xs)", - }, - syntax: { - lg: "var(--primitive-font-size-syntax-lg)", - md: "var(--primitive-font-size-syntax-md)", - sm: "var(--primitive-font-size-syntax-sm)", - xs: "var(--primitive-font-size-syntax-xs)", - }, + "4": "var(--primitive-font-size-title-4)" + }, + "body": { + "lg": "var(--primitive-font-size-body-lg)", + "md": "var(--primitive-font-size-body-md)", + "sm": "var(--primitive-font-size-body-sm)", + "xs": "var(--primitive-font-size-body-xs)", + "2xs": "var(--primitive-font-size-body-2xs)" + }, + "label": { + "lg": "var(--primitive-font-size-label-lg)", + "md": "var(--primitive-font-size-label-md)", + "sm": "var(--primitive-font-size-label-sm)", + "xs": "var(--primitive-font-size-label-xs)" + }, + "syntax": { + "lg": "var(--primitive-font-size-syntax-lg)", + "md": "var(--primitive-font-size-syntax-md)", + "sm": "var(--primitive-font-size-syntax-sm)", + "xs": "var(--primitive-font-size-syntax-xs)" + } }, - font: { - lineHeight: { - hero: { + "font": { + "lineHeight": { + "hero": { "1": "var(--primitive-font-line-height-hero-1)", - "2": "var(--primitive-font-line-height-hero-2)", - "3": "var(--primitive-font-line-height-hero-3)", - "4": "var(--primitive-font-line-height-hero-4)", + "2": "var(--primitive-font-line-height-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-line-height-title-1)", "2": "var(--primitive-font-line-height-title-2)", "3": "var(--primitive-font-line-height-title-3)", - "4": "var(--primitive-font-line-height-title-4)", - }, - label: { - lg: "var(--primitive-font-line-height-label-lg)", - md: "var(--primitive-font-line-height-label-md)", - sm: "var(--primitive-font-line-height-label-sm)", - xs: "var(--primitive-font-line-height-label-xs)", - }, - body: { - lg: "var(--primitive-font-line-height-body-lg)", - md: "var(--primitive-font-line-height-body-md)", - sm: "var(--primitive-font-line-height-body-sm)", - xs: "var(--primitive-font-line-height-body-xs)", - "2xs": "var(--primitive-font-line-height-body-2xs)", - }, - syntax: { - lg: "var(--primitive-font-line-height-syntax-lg)", - md: "var(--primitive-font-line-height-syntax-md)", - sm: "var(--primitive-font-line-height-syntax-sm)", - xs: "var(--primitive-font-line-height-syntax-xs)", - }, - }, - letterSpacing: { - hero: { + "4": "var(--primitive-font-line-height-title-4)" + }, + "label": { + "lg": "var(--primitive-font-line-height-label-lg)", + "md": "var(--primitive-font-line-height-label-md)", + "sm": "var(--primitive-font-line-height-label-sm)", + "xs": "var(--primitive-font-line-height-label-xs)" + }, + "body": { + "lg": "var(--primitive-font-line-height-body-lg)", + "md": "var(--primitive-font-line-height-body-md)", + "sm": "var(--primitive-font-line-height-body-sm)", + "xs": "var(--primitive-font-line-height-body-xs)", + "2xs": "var(--primitive-font-line-height-body-2xs)" + }, + "syntax": { + "lg": "var(--primitive-font-line-height-syntax-lg)", + "md": "var(--primitive-font-line-height-syntax-md)", + "sm": "var(--primitive-font-line-height-syntax-sm)", + "xs": "var(--primitive-font-line-height-syntax-xs)" + } + }, + "letterSpacing": { + "hero": { "1": "var(--primitive-font-letter-spacing-hero-1)", - "2": "var(--primitive-font-letter-spacing-hero-2)", - "3": "var(--primitive-font-letter-spacing-hero-3)", - "4": "var(--primitive-font-letter-spacing-hero-4)", + "2": "var(--primitive-font-letter-spacing-hero-2)" }, - title: { + "title": { "1": "var(--primitive-font-letter-spacing-title-1)", "2": "var(--primitive-font-letter-spacing-title-2)", "3": "var(--primitive-font-letter-spacing-title-3)", - "4": "var(--primitive-font-letter-spacing-title-4)", - }, - label: { - lg: "var(--primitive-font-letter-spacing-label-lg)", - md: "var(--primitive-font-letter-spacing-label-md)", - sm: "var(--primitive-font-letter-spacing-label-sm)", - xs: "var(--primitive-font-letter-spacing-label-xs)", - }, - body: { - lg: "var(--primitive-font-letter-spacing-body-lg)", - md: "var(--primitive-font-letter-spacing-body-md)", - sm: "var(--primitive-font-letter-spacing-body-sm)", - xs: "var(--primitive-font-letter-spacing-body-xs)", - "2xs": "var(--primitive-font-letter-spacing-body-2xs)", - }, - }, - }, - fontWeight: { - hero: { - normal: "var(--primitive-font-weight-hero-normal)", - bold: "var(--primitive-font-weight-hero-bold)", - }, - title: { - normal: "var(--primitive-font-weight-title-normal)", - bold: "var(--primitive-font-weight-title-bold)", - }, - label: { - normal: "var(--primitive-font-weight-label-normal)", - bold: "var(--primitive-font-weight-label-bold)", - subtle: "var(--primitive-font-weight-label-subtle)", - }, - body: { - normal: "var(--primitive-font-weight-body-normal)", - bold: "var(--primitive-font-weight-body-bold)", - }, - syntax: { - normal: "var(--primitive-font-weight-syntax-normal)", - }, + "4": "var(--primitive-font-letter-spacing-title-4)" + }, + "label": { + "lg": "var(--primitive-font-letter-spacing-label-lg)", + "md": "var(--primitive-font-letter-spacing-label-md)", + "sm": "var(--primitive-font-letter-spacing-label-sm)", + "xs": "var(--primitive-font-letter-spacing-label-xs)" + }, + "body": { + "lg": "var(--primitive-font-letter-spacing-body-lg)", + "md": "var(--primitive-font-letter-spacing-body-md)", + "sm": "var(--primitive-font-letter-spacing-body-sm)", + "xs": "var(--primitive-font-letter-spacing-body-xs)", + "2xs": "var(--primitive-font-letter-spacing-body-2xs)" + } + } }, - }, - }, + "fontWeight": { + "hero": { + "normal": "var(--primitive-font-weight-hero-normal)", + "bold": "var(--primitive-font-weight-hero-bold)" + }, + "title": { + "normal": "var(--primitive-font-weight-title-normal)", + "bold": "var(--primitive-font-weight-title-bold)" + }, + "label": { + "normal": "var(--primitive-font-weight-label-normal)", + "bold": "var(--primitive-font-weight-label-bold)", + "subtle": "var(--primitive-font-weight-label-subtle)" + }, + "body": { + "normal": "var(--primitive-font-weight-body-normal)", + "bold": "var(--primitive-font-weight-body-bold)" + }, + "syntax": { + "normal": "var(--primitive-font-weight-syntax-normal)" + } + } + } + } }, - environment: { - semantic: { - duration: { + "environment": { + "semantic": { + "duration": { "50": "var(--semantic-duration-50)", "100": "var(--semantic-duration-100)", "150": "var(--semantic-duration-150)", @@ -2483,17 +2498,17 @@ export const designTokens = { "350": "var(--semantic-duration-350)", "400": "var(--semantic-duration-400)", "450": "var(--semantic-duration-450)", - "500": "var(--semantic-duration-500)", - }, - motion: { - bouncy: "var(--semantic-motion-bouncy)", - fluent: "var(--semantic-motion-fluent)", - leave: "var(--semantic-motion-leave)", - entrance: "var(--semantic-motion-entrance)", + "500": "var(--semantic-duration-500)" }, + "motion": { + "bouncy": "var(--semantic-motion-bouncy)", + "fluent": "var(--semantic-motion-fluent)", + "leave": "var(--semantic-motion-leave)", + "entrance": "var(--semantic-motion-entrance)" + } }, - primitive: { - time: { + "primitive": { + "time": { "50": "var(--primitive-time-50)", "100": "var(--primitive-time-100)", "150": "var(--primitive-time-150)", @@ -2503,316 +2518,316 @@ export const designTokens = { "350": "var(--primitive-time-350)", "400": "var(--primitive-time-400)", "450": "var(--primitive-time-450)", - "500": "var(--primitive-time-500)", - }, - }, + "500": "var(--primitive-time-500)" + } + } }, - textStyle: { + "textStyle": { "semantic-textStyle-hero-4": { - fontSize: "var(--primitive-font-size-hero-4)", - lineHeight: "var(--primitive-font-line-height-hero-4)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-4)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-4)", + "lineHeight": "var(--primitive-font-line-height-hero-4)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-4)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-3": { - fontSize: "var(--primitive-font-size-hero-3)", - lineHeight: "var(--primitive-font-line-height-hero-3)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-3)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-3)", + "lineHeight": "var(--primitive-font-line-height-hero-3)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-3)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-2": { - fontSize: "var(--primitive-font-size-hero-2)", - lineHeight: "var(--primitive-font-line-height-hero-2)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-2)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-2)", + "lineHeight": "var(--primitive-font-line-height-hero-2)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-2)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-hero-1": { - fontSize: "var(--primitive-font-size-hero-1)", - lineHeight: "var(--primitive-font-line-height-hero-1)", - fontFamily: "var(--primitive-typeface-hero)", - fontWeight: "var(--primitive-font-weight-hero-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-hero-1)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-hero-1)", + "lineHeight": "var(--primitive-font-line-height-hero-1)", + "fontFamily": "var(--primitive-typeface-hero)", + "fontWeight": "var(--primitive-font-weight-hero-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-hero-1)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-4": { - fontSize: "var(--primitive-font-size-title-4)", - lineHeight: "var(--primitive-font-line-height-title-4)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-title-4)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-4)", + "lineHeight": "var(--primitive-font-line-height-title-4)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-4)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-3": { - fontSize: "var(--primitive-font-size-title-3)", - lineHeight: "var(--primitive-font-line-height-title-3)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-title-3)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-3)", + "lineHeight": "var(--primitive-font-line-height-title-3)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-3)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-2": { - fontSize: "var(--primitive-font-size-title-2)", - lineHeight: "var(--primitive-font-line-height-title-2)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-title-2)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-2)", + "lineHeight": "var(--primitive-font-line-height-title-2)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-2)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-title-1": { - fontSize: "var(--primitive-font-size-title-1)", - lineHeight: "var(--primitive-font-line-height-title-1)", - fontFamily: "var(--primitive-typeface-title)", - fontWeight: "var(--primitive-font-weight-title-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-title-1)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-title-1)", + "lineHeight": "var(--primitive-font-line-height-title-1)", + "fontFamily": "var(--primitive-typeface-title)", + "fontWeight": "var(--primitive-font-weight-title-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-title-1)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-bold": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-normal": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-lg-subtle": { - fontSize: "var(--primitive-font-size-label-lg)", - lineHeight: "var(--primitive-font-line-height-label-lg)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-lg)", + "lineHeight": "var(--primitive-font-line-height-label-lg)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-bold": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-normal": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-md-subtle": { - fontSize: "var(--primitive-font-size-label-md)", - lineHeight: "var(--primitive-font-line-height-label-md)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-md)", + "lineHeight": "var(--primitive-font-line-height-label-md)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-bold": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-normal": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-sm-subtle": { - fontSize: "var(--primitive-font-size-label-sm)", - lineHeight: "var(--primitive-font-line-height-label-sm)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-sm)", + "lineHeight": "var(--primitive-font-line-height-label-sm)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-bold": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-normal": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-label-xs-subtle": { - fontSize: "var(--primitive-font-size-label-xs)", - lineHeight: "var(--primitive-font-line-height-label-xs)", - fontFamily: "var(--primitive-typeface-label)", - fontWeight: "var(--primitive-font-weight-label-subtle)", - letterSpacing: "var(--primitive-font-letter-spacing-label-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-label-xs)", + "lineHeight": "var(--primitive-font-line-height-label-xs)", + "fontFamily": "var(--primitive-typeface-label)", + "fontWeight": "var(--primitive-font-weight-label-subtle)", + "letterSpacing": "var(--primitive-font-letter-spacing-label-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-lg-bold": { - fontSize: "var(--primitive-font-size-body-lg)", - lineHeight: "var(--primitive-font-line-height-body-lg)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-lg)", + "lineHeight": "var(--primitive-font-line-height-body-lg)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-lg-normal": { - fontSize: "var(--primitive-font-size-body-lg)", - lineHeight: "var(--primitive-font-line-height-body-lg)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-lg)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-lg)", + "lineHeight": "var(--primitive-font-line-height-body-lg)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-lg)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-md-bold": { - fontSize: "var(--primitive-font-size-body-md)", - lineHeight: "var(--primitive-font-line-height-body-md)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-md)", + "lineHeight": "var(--primitive-font-line-height-body-md)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-md-normal": { - fontSize: "var(--primitive-font-size-body-md)", - lineHeight: "var(--primitive-font-line-height-body-md)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-md)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-md)", + "lineHeight": "var(--primitive-font-line-height-body-md)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-md)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-sm-bold": { - fontSize: "var(--primitive-font-size-body-sm)", - lineHeight: "var(--primitive-font-line-height-body-sm)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-sm)", + "lineHeight": "var(--primitive-font-line-height-body-sm)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-sm-normal": { - fontSize: "var(--primitive-font-size-body-sm)", - lineHeight: "var(--primitive-font-line-height-body-sm)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-sm)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-sm)", + "lineHeight": "var(--primitive-font-line-height-body-sm)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-sm)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-xs-bold": { - fontSize: "var(--primitive-font-size-body-xs)", - lineHeight: "var(--primitive-font-line-height-body-xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-xs)", + "lineHeight": "var(--primitive-font-line-height-body-xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-xs-normal": { - fontSize: "var(--primitive-font-size-body-xs)", - lineHeight: "var(--primitive-font-line-height-body-xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-xs)", + "lineHeight": "var(--primitive-font-line-height-body-xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-2xs-bold": { - fontSize: "var(--primitive-font-size-body-2xs)", - lineHeight: "var(--primitive-font-line-height-body-2xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-bold)", - letterSpacing: "var(--primitive-font-letter-spacing-body-2xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-2xs)", + "lineHeight": "var(--primitive-font-line-height-body-2xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-bold)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-body-2xs-normal": { - fontSize: "var(--primitive-font-size-body-2xs)", - lineHeight: "var(--primitive-font-line-height-body-2xs)", - fontFamily: "var(--primitive-typeface-body)", - fontWeight: "var(--primitive-font-weight-body-normal)", - letterSpacing: "var(--primitive-font-letter-spacing-body-2xs)", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-body-2xs)", + "lineHeight": "var(--primitive-font-line-height-body-2xs)", + "fontFamily": "var(--primitive-typeface-body)", + "fontWeight": "var(--primitive-font-weight-body-normal)", + "letterSpacing": "var(--primitive-font-letter-spacing-body-2xs)", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-lg": { - fontSize: "var(--primitive-font-size-syntax-lg)", - lineHeight: "var(--primitive-font-line-height-syntax-lg)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-lg)", + "lineHeight": "var(--primitive-font-line-height-syntax-lg)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-md": { - fontSize: "var(--primitive-font-size-syntax-md)", - lineHeight: "var(--primitive-font-line-height-syntax-md)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-md)", + "lineHeight": "var(--primitive-font-line-height-syntax-md)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-sm": { - fontSize: "var(--primitive-font-size-syntax-sm)", - lineHeight: "var(--primitive-font-line-height-syntax-sm)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", + "fontSize": "var(--primitive-font-size-syntax-sm)", + "lineHeight": "var(--primitive-font-line-height-syntax-sm)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" }, "semantic-textStyle-syntax-xs": { - fontSize: "var(--primitive-font-size-syntax-xs)", - lineHeight: "var(--primitive-font-line-height-syntax-xs)", - fontFamily: "var(--primitive-typeface-syntax)", - fontWeight: "var(--primitive-font-weight-syntax-normal)", - letterSpacing: "0%", - paragraphSpacing: "0px", - paragraphIndent: "0px", - }, - }, + "fontSize": "var(--primitive-font-size-syntax-xs)", + "lineHeight": "var(--primitive-font-line-height-syntax-xs)", + "fontFamily": "var(--primitive-typeface-syntax)", + "fontWeight": "var(--primitive-font-weight-syntax-normal)", + "letterSpacing": "0%", + "paragraphSpacing": "0px", + "paragraphIndent": "0px" + } + } } as const;