From af39bbf9950d171aa783c07244aafbbc28c32e0f Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Mon, 12 Aug 2024 22:11:42 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20Text=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/admin/app/layout.tsx | 1 + apps/admin/app/page.tsx | 5 +++- apps/client/app/layout.tsx | 1 + apps/client/app/page.tsx | 5 +++- apps/client/tsconfig.json | 2 +- package.json | 1 + packages/ui/package.json | 3 +- packages/ui/panda.config.ts | 11 ++++++++ packages/ui/src/components/Text/index.tsx | 34 +++++++++++++++++++++++ packages/ui/src/components/index.ts | 1 + pnpm-lock.yaml | 7 +++++ 11 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 packages/ui/src/components/Text/index.tsx diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx index ff9e74bc..ddc3a72e 100644 --- a/apps/admin/app/layout.tsx +++ b/apps/admin/app/layout.tsx @@ -1,5 +1,6 @@ import "./global.css"; import "wowds-ui/styles.css"; +import "@wow-class/ui/styles.css"; import type { Metadata } from "next"; import localFont from "next/font/local"; diff --git a/apps/admin/app/page.tsx b/apps/admin/app/page.tsx index 041d91f4..d407b698 100644 --- a/apps/admin/app/page.tsx +++ b/apps/admin/app/page.tsx @@ -1,5 +1,5 @@ import { styled } from "@styled-system/jsx"; -import { Button } from "@wow-class/ui"; +import { Button, Text } from "@wow-class/ui"; const Home = () => { return ( @@ -8,6 +8,9 @@ const Home = () => { sdf sdf + + 헤딩1 + ); }; diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx index ff9e74bc..ddc3a72e 100644 --- a/apps/client/app/layout.tsx +++ b/apps/client/app/layout.tsx @@ -1,5 +1,6 @@ import "./global.css"; import "wowds-ui/styles.css"; +import "@wow-class/ui/styles.css"; import type { Metadata } from "next"; import localFont from "next/font/local"; diff --git a/apps/client/app/page.tsx b/apps/client/app/page.tsx index 98f8e961..5f56b089 100644 --- a/apps/client/app/page.tsx +++ b/apps/client/app/page.tsx @@ -1,5 +1,5 @@ import { styled } from "@styled-system/jsx"; -import { Button } from "@wow-class/ui"; +import { Button, Text } from "@wow-class/ui"; const Home = () => { return ( @@ -8,6 +8,9 @@ const Home = () => { sdf sdf + + 헤딩1 + ); }; diff --git a/apps/client/tsconfig.json b/apps/client/tsconfig.json index 7ea61ecd..b115b436 100644 --- a/apps/client/tsconfig.json +++ b/apps/client/tsconfig.json @@ -9,7 +9,7 @@ "baseUrl": ".", "paths": { "@/*": ["app/*"], - "@styled-system/*": ["./styled-system/*"], + "@styled-system/*": ["./styled-system/*"] } }, "include": [ diff --git a/package.json b/package.json index 2358858d..9c5c2f4a 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "node": ">=18" }, "dependencies": { + "wowds-tokens": "^0.1.1", "wowds-ui": "^0.1.8" } } diff --git a/packages/ui/package.json b/packages/ui/package.json index 7c0e8720..4e6028c0 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -3,7 +3,8 @@ "version": "0.0.0", "private": true, "exports": { - ".": "./src/components/index.ts" + ".": "./src/components/index.ts", + "./styles.css": "./dist/styles.css" }, "scripts": { "lint": "eslint . --max-warnings 0", diff --git a/packages/ui/panda.config.ts b/packages/ui/panda.config.ts index e420e3ca..ce4bd750 100644 --- a/packages/ui/panda.config.ts +++ b/packages/ui/panda.config.ts @@ -1,8 +1,19 @@ import { defineConfig } from "@pandacss/dev"; import commonConfig from "@wow-class/panda-config/common-config"; +import { typography } from "wowds-tokens"; + export default defineConfig({ ...commonConfig, + staticCss: { + css: [ + { + properties: { + textStyle: Object.keys(typography), + }, + }, + ], + }, dependencies: ["./src/components/**"], include: ["./src/**/*.{ts,tsx,js,jsx}"], }); diff --git a/packages/ui/src/components/Text/index.tsx b/packages/ui/src/components/Text/index.tsx new file mode 100644 index 00000000..69df5bb8 --- /dev/null +++ b/packages/ui/src/components/Text/index.tsx @@ -0,0 +1,34 @@ +import { css } from "@styled-system/css"; +import { styled } from "@styled-system/jsx"; +import type { ColorToken } from "@styled-system/tokens"; +import type { CSSProperties, PropsWithChildren } from "react"; +import type { typography as typoType } from "wowds-tokens"; + +type ColorKey = ColorToken; +type TypoKey = keyof typeof typoType; + +interface TextProps extends PropsWithChildren { + typo?: TypoKey; + color?: ColorKey; + style?: CSSProperties; + className?: string; +} + +export const Text = ({ + typo = "body0", + color = "blue.100", + children, + ...rest +}: TextProps) => { + return ( + + {children} + + ); +}; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 9d3fe762..4e358147 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,2 +1,3 @@ export * from "./Button"; export * from "./Modal"; +export * from "./Text"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 630e4785..d64d83f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + wowds-tokens: + specifier: ^0.1.1 + version: 0.1.1 wowds-ui: specifier: ^0.1.8 version: 0.1.8(next@14.2.5)(react-dom@18.3.1)(react@18.3.1) @@ -12903,6 +12906,10 @@ packages: resolution: {integrity: sha512-YyjVG+JwjAe4YFw/mhnj1peFzlux326jxrNkr3V8kyo/sOVWTDW0LkWMlscETPSNVSY8TSYgcSYSELrON5uikg==} dev: true + /wowds-tokens@0.1.1: + resolution: {integrity: sha512-aHUaS2KawRly4Y0kSd2t0qpDf/s9kUmg0X4bwRqpHnXnqI2eqPKVnfyRVln/npy0jrtVJ+Tt82GRX+2e1H7yJg==} + dev: false + /wowds-ui@0.1.8(next@14.2.5)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-a6DSdxoQxZPRMkFodbY1GKYWxzuzCpSAir5WAKU0lPO3cmTmK1ILLXqlI+lANfI9fRAzCZDY9RoX5vdBl9yz7A==} peerDependencies: From 3f0c591b30b19dd719019ba51b2324c341dcc241 Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Tue, 13 Aug 2024 00:32:25 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EB=A7=8E=EC=9D=B4=20=EC=93=B0?= =?UTF-8?q?=EB=8A=94=20=ED=83=80=EC=9D=B4=ED=8F=AC=EC=99=80=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=AC=EB=A1=9C=20=EB=94=94=ED=8F=B4=ED=8A=B8=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/components/Text/index.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/Text/index.tsx b/packages/ui/src/components/Text/index.tsx index 69df5bb8..50bff616 100644 --- a/packages/ui/src/components/Text/index.tsx +++ b/packages/ui/src/components/Text/index.tsx @@ -15,17 +15,21 @@ interface TextProps extends PropsWithChildren { } export const Text = ({ - typo = "body0", - color = "blue.100", + typo = "body1", + color = "textBlack", children, + className, ...rest }: TextProps) => { return ( {children} From 9c355b27e1722c7ead73631dd1ccdbda7251e227 Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Tue, 13 Aug 2024 16:46:23 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20as=20=EC=B6=94=EA=B0=80,?= =?UTF-8?q?=20typo=20=EA=B4=80=EB=A0=A8=20panda=20=EC=84=A4=EC=A0=95=20pan?= =?UTF-8?q?da-config=20=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + packages/panda-config/common-config.ts | 14 + packages/ui/panda.config.ts | 11 - .../ui/src/components/Text/Text.stories.tsx | 61 ++ packages/ui/src/components/Text/index.tsx | 33 +- packages/ui/src/styles.css | 703 +++++++++++++++++- pnpm-lock.yaml | 8 + 7 files changed, 809 insertions(+), 22 deletions(-) create mode 100644 packages/ui/src/components/Text/Text.stories.tsx diff --git a/package.json b/package.json index 9c5c2f4a..c39b9433 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "node": ">=18" }, "dependencies": { + "clsx": "^2.1.1", "wowds-tokens": "^0.1.1", "wowds-ui": "^0.1.8" } diff --git a/packages/panda-config/common-config.ts b/packages/panda-config/common-config.ts index 7ddd1faa..45de8476 100644 --- a/packages/panda-config/common-config.ts +++ b/packages/panda-config/common-config.ts @@ -5,9 +5,23 @@ import { removeUnusedCssVars, removeUnusedKeyframes, } from "wowds-theme"; +import { typography } from "wowds-tokens"; const commonConfig: Config = { presets: [pandaPreset], + //TODO: wowds-theme의 preset에서 staticCss 를 정의하도록 수정 + staticCss: { + css: [ + { + properties: { + ...(pandaPreset?.staticCss?.css?.[0]?.properties?.color && { + color: pandaPreset.staticCss.css[0].properties.color, + }), + textStyle: Object.keys(typography), + }, + }, + ], + }, preflight: true, minify: true, watch: true, diff --git a/packages/ui/panda.config.ts b/packages/ui/panda.config.ts index ce4bd750..e420e3ca 100644 --- a/packages/ui/panda.config.ts +++ b/packages/ui/panda.config.ts @@ -1,19 +1,8 @@ import { defineConfig } from "@pandacss/dev"; import commonConfig from "@wow-class/panda-config/common-config"; -import { typography } from "wowds-tokens"; - export default defineConfig({ ...commonConfig, - staticCss: { - css: [ - { - properties: { - textStyle: Object.keys(typography), - }, - }, - ], - }, dependencies: ["./src/components/**"], include: ["./src/**/*.{ts,tsx,js,jsx}"], }); diff --git a/packages/ui/src/components/Text/Text.stories.tsx b/packages/ui/src/components/Text/Text.stories.tsx new file mode 100644 index 00000000..ab8bf844 --- /dev/null +++ b/packages/ui/src/components/Text/Text.stories.tsx @@ -0,0 +1,61 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import Text from "."; + +const meta: Meta = { + title: "UI/Text", + component: Text, + tags: ["autodocs"], + parameters: { + componentSubtitle: "Text 컴포넌트", + }, + argTypes: { + as: { + control: { type: "select" }, + options: ["p", "h1", "h2", "h3", "span", "div"], + description: "HTML 태그 이름", + }, + typo: { + control: { type: "text" }, + description: "텍스트 타이포", + }, + color: { + control: { type: "color" }, + description: "텍스트 색상", + }, + children: { + control: { type: "text" }, + description: "텍스트 내용", + }, + style: { + control: { type: "object" }, + description: "커스텀 스타일 객체", + }, + className: { + control: { type: "text" }, + description: "커스텀 클래스 이름", + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "예시", + as: "p", + typo: "body1", + color: "textBlack", + }, +}; + +export const AsDiv: Story = { + args: { + children: "예시", + as: "div", + typo: "h1", + color: "primary", + }, +}; diff --git a/packages/ui/src/components/Text/index.tsx b/packages/ui/src/components/Text/index.tsx index 9f5df2f1..e3f82936 100644 --- a/packages/ui/src/components/Text/index.tsx +++ b/packages/ui/src/components/Text/index.tsx @@ -1,39 +1,52 @@ import { css } from "@styled-system/css"; import { styled } from "@styled-system/jsx"; import type { ColorToken } from "@styled-system/tokens"; -import type { CSSProperties, PropsWithChildren } from "react"; +import { clsx } from "clsx"; +import type { CSSProperties, ElementType, PropsWithChildren } from "react"; import type { typography as typoType } from "wowds-tokens"; type ColorKey = ColorToken; type TypoKey = keyof typeof typoType; -interface TextProps extends PropsWithChildren { +/** + * @description Text 컴포넌트 + * @param {ElementType} as - HTML 태그 이름입니다. 기본값은 "p" 입니다. + * @param {TypoKey} typo - 텍스트 타이포입니다. 기본값은 "body1" 입니다. + * @param {ColorKey} color - 텍스트 색상입니다. 기본값은 "textBlack" 입니다. + * @param {CSSProperties} style - 커스터 할 수 있는 컴포넌트 스타일입니다. + * @param {string} className - 커스텀 할 수 있는 컴포넌트 클래스 이름입니다. + */ +interface TextProps extends PropsWithChildren { + as?: T; typo?: TypoKey; color?: ColorKey; style?: CSSProperties; className?: string; } -const Text = ({ +const Text = ({ + as, typo = "body1", color = "textBlack", children, className, ...rest -}: TextProps) => { +}: TextProps) => { + const Component = styled(as || "p"); + return ( - {children} - + ); }; diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css index 155b9354..8ed19478 100644 --- a/packages/ui/src/styles.css +++ b/packages/ui/src/styles.css @@ -1 +1,702 @@ -:host,html{--font-fallback:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body,var(--font-fallback))}*,::backdrop,::file-selector-button,:after,:before{margin:0px;padding:0px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border,currentColor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}menu,ol,ul{list-style:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){appearance:button;-webkit-appearance:button}::file-selector-button,button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback:color-mix(in srgb,currentColor 50%,transparent);color:var(--global-color-placeholder,var(--placeholder-fallback))}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}dialog{padding:0px}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{--font-mono-fallback:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono,var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:none!important}:where(:root,:host):not(#\#):not(#\#){--colors-red-50:#FDECEB;--colors-red-100:#FBD9D7;--colors-red-150:#F9C7C2;--colors-red-200:#F7B4AE;--colors-red-300:#F28E86;--colors-red-400:#EE695D;--colors-red-500:#EA4335;--colors-red-600:#BB362A;--colors-red-700:#8C2820;--colors-red-800:#5E1B15;--colors-red-850:#461410;--colors-red-900:#2F0D0B;--colors-red-950:#170705;--colors-blue-50:#EBF4FE;--colors-blue-100:#D7E9FD;--colors-blue-150:#C3DDFD;--colors-blue-200:#AFD2FC;--colors-blue-300:#86BCFA;--colors-blue-400:#5EA5F9;--colors-blue-500:#368FF7;--colors-blue-600:#2B72C6;--colors-blue-700:#205694;--colors-blue-800:#163963;--colors-blue-850:#102B4A;--colors-blue-900:#0B1D31;--colors-blue-950:#050E19;--colors-yellow-50:#FEF7E6;--colors-yellow-100:#FEEECC;--colors-yellow-150:#FDE6B3;--colors-yellow-200:#FDDD99;--colors-yellow-300:#FBCD66;--colors-yellow-400:#FABC33;--colors-yellow-500:#F9AB00;--colors-yellow-600:#C78900;--colors-yellow-700:#956700;--colors-yellow-800:#644400;--colors-yellow-850:#4B3300;--colors-yellow-900:#322200;--colors-yellow-950:#191100;--colors-green-50:#EBF6EE;--colors-green-100:#D6EEDD;--colors-green-150:#C2E5CB;--colors-green-200:#AEDCBA;--colors-green-300:#85CB98;--colors-green-400:#5DB975;--colors-green-500:#34A853;--colors-green-600:#2A8642;--colors-green-700:#1F6532;--colors-green-800:#154321;--colors-green-850:#103219;--colors-green-900:#0A2211;--colors-green-950:#051108;--colors-mono-50:#F7F7F7;--colors-mono-100:#F0F0F0;--colors-mono-150:#E8E8E8;--colors-mono-200:#E1E1E1;--colors-mono-300:#D1D1D1;--colors-mono-400:#C2C2C2;--colors-mono-500:#B3B3B3;--colors-mono-600:#8F8F8F;--colors-mono-700:#6B6B6B;--colors-mono-800:#484848;--colors-mono-900:#242424;--colors-mono-950:#121212;--colors-white:#FFFFFF;--colors-black:#000000;--colors-primary:#368FF7;--colors-success:#2A8642;--colors-error:#BB362A;--colors-background-normal:#FFFFFF;--colors-background-alternative:#F7F7F7;--colors-background-dimmer:rgba(0,0,0,0.8);--colors-sub:#6B6B6B;--colors-outline:#C2C2C2;--colors-text-black:#121212;--colors-text-white:#FFFFFF;--colors-dark-disabled:#C2C2C2;--colors-light-disabled:#E1E1E1;--colors-blue-hover:#2B72C6;--colors-mono-hover:#121212;--colors-elevated-hover:rgba(16,43,74,0.2);--colors-blue-pressed:#5EA5F9;--colors-blue-background-pressed:#EBF4FE;--colors-mono-background-pressed:#F7F7F7;--colors-shadow-small:rgba(0,0,0,0.1);--colors-shadow-medium:rgba(0,0,0,0.2);--colors-blue-shadow:rgba(16,43,74,0.2);--colors-discord:#5566FB;--colors-github:#000000}.li-s_none:not(#\#):not(#\#):not(#\#):not(#\#){list-style:none}.h_20:not(#\#):not(#\#):not(#\#):not(#\#){height:20px}.w_20:not(#\#):not(#\#):not(#\#):not(#\#){width:20px}.w_20px:not(#\#):not(#\#):not(#\#):not(#\#){width:20px}.h_20px:not(#\#):not(#\#):not(#\#):not(#\#){height:20px}.ls_-0\.16px:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.16px}.d_flex:not(#\#):not(#\#):not(#\#):not(#\#){display:flex}.gap_12px:not(#\#):not(#\#):not(#\#):not(#\#){gap:12px}.p_11px_18px_11px_20px:not(#\#):not(#\#):not(#\#):not(#\#){padding:11px 18px 11px 20px}.bg_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-mono-background-pressed)}.bg_white:not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-white)}.c_blue\.50:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-50)}.c_blue\.100:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-100)}.c_blue\.150:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-150)}.c_blue\.200:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-200)}.c_blue\.300:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-300)}.c_blue\.400:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-400)}.c_blue\.500:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-500)}.c_blue\.600:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-600)}.c_blue\.700:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-700)}.c_blue\.800:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-800)}.c_blue\.850:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-850)}.c_blue\.900:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-900)}.c_blue\.950:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-950)}.c_yellow\.50:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-50)}.c_yellow\.100:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-100)}.c_yellow\.150:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-150)}.c_yellow\.200:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-200)}.c_yellow\.300:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-300)}.c_yellow\.400:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-400)}.c_yellow\.500:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-500)}.c_yellow\.600:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-600)}.c_yellow\.700:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-700)}.c_yellow\.800:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-800)}.c_yellow\.850:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-850)}.c_yellow\.900:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-900)}.c_yellow\.950:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-950)}.c_green\.50:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-50)}.c_green\.100:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-100)}.c_green\.150:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-150)}.c_green\.200:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-200)}.c_green\.300:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-300)}.c_green\.400:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-400)}.c_green\.500:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-500)}.c_green\.600:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-600)}.c_green\.700:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-700)}.c_green\.800:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-800)}.c_green\.850:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-850)}.c_green\.900:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-900)}.c_green\.950:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-950)}.c_red\.50:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-50)}.c_red\.100:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-100)}.c_red\.150:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-150)}.c_red\.200:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-200)}.c_red\.300:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-300)}.c_red\.400:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-400)}.c_red\.500:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-500)}.c_red\.600:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-600)}.c_red\.700:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-700)}.c_red\.800:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-800)}.c_red\.850:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-850)}.c_red\.900:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-900)}.c_red\.950:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-950)}.c_mono\.50:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-50)}.c_mono\.100:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-100)}.c_mono\.150:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-150)}.c_mono\.200:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-200)}.c_mono\.300:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-300)}.c_mono\.400:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-400)}.c_mono\.500:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-500)}.c_mono\.600:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-600)}.c_mono\.700:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-700)}.c_mono\.800:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-800)}.c_mono\.850:not(#\#):not(#\#):not(#\#):not(#\#){color:mono.850}.c_mono\.900:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-900)}.c_mono\.950:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-950)}.c_white:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-white)}.c_black:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-black)}.c_whiteOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.20}.c_whiteOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.40}.c_whiteOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.60}.c_whiteOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.80}.c_blackOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.20}.c_blackOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.40}.c_blackOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.60}.c_blackOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.80}.c_primary:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-primary)}.c_success:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-success)}.c_error:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-error)}.c_backgroundNormal:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-background-normal)}.c_backgroundAlternative:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-background-alternative)}.c_backgroundDimmer:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-background-dimmer)}.c_sub:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-sub)}.c_outline:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-outline)}.c_textBlack:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-black)}.c_textWhite:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-white)}.c_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-dark-disabled)}.c_lightDisabled:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-light-disabled)}.c_blueHover:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-hover)}.c_monoHover:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-hover)}.c_elevatedHover:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-elevated-hover)}.c_bluePressed:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-pressed)}.c_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-background-pressed)}.c_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-background-pressed)}.c_shadowSmall:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-shadow-small)}.c_shadowMedium:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-shadow-medium)}.c_blueShadow:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-shadow)}.c_discord:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-discord)}.c_github:not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-github)}.c_blueGradientDark:not(#\#):not(#\#):not(#\#):not(#\#){color:blueGradientDark}.c_blueGradientLight:not(#\#):not(#\#):not(#\#):not(#\#){color:blueGradientLight}.c_redGradientDark:not(#\#):not(#\#):not(#\#):not(#\#){color:redGradientDark}.c_redGradientLight:not(#\#):not(#\#):not(#\#):not(#\#){color:redGradientLight}.c_greenGradientDark:not(#\#):not(#\#):not(#\#):not(#\#){color:greenGradientDark}.c_greenGradientLight:not(#\#):not(#\#):not(#\#):not(#\#){color:greenGradientLight}.c_yellowGradientDark:not(#\#):not(#\#):not(#\#):not(#\#){color:yellowGradientDark}.c_yellowGradientLight:not(#\#):not(#\#):not(#\#):not(#\#){color:yellowGradientLight}.ml_auto:not(#\#):not(#\#):not(#\#):not(#\#){margin-left:auto}.fs_16px:not(#\#):not(#\#):not(#\#):not(#\#){font-size:16px}.fw_500:not(#\#):not(#\#):not(#\#):not(#\#){font-weight:500}.lh_160\%:not(#\#):not(#\#):not(#\#):not(#\#){line-height:160%}.mr_8px:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:8px}.ai_center:not(#\#):not(#\#):not(#\#):not(#\#){align-items:center} \ No newline at end of file +:host, +html { + --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-tab-size: 4; + tab-size: 4; + -webkit-tap-highlight-color: transparent; + line-height: 1.5; + font-family: var(--global-font-body, var(--font-fallback)); +} +*, +::backdrop, +::file-selector-button, +:after, +:before { + margin: 0px; + padding: 0px; + box-sizing: border-box; + border-width: 0px; + border-style: solid; + border-color: var(--global-color-border, currentColor); +} +hr { + height: 0px; + color: inherit; + border-top-width: 1px; +} +body { + height: 100%; + line-height: inherit; +} +img { + border-style: none; +} +audio, +canvas, +embed, +iframe, +img, +object, +svg, +video { + display: block; + vertical-align: middle; +} +img, +video { + max-width: 100%; + height: auto; +} +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; + font-size: inherit; + font-weight: inherit; +} +h1, +h2, +h3, +h4, +h5, +h6, +p { + overflow-wrap: break-word; +} +menu, +ol, +ul { + list-style: none; +} +::file-selector-button, +button, +input:where([type="button"], [type="reset"], [type="submit"]) { + appearance: button; + -webkit-appearance: button; +} +::file-selector-button, +button, +input, +optgroup, +select, +textarea { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + background: transparent; +} +::placeholder { + opacity: 1; + --placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent); + color: var(--global-color-placeholder, var(--placeholder-fallback)); +} +textarea { + resize: vertical; +} +table { + text-indent: 0px; + border-collapse: collapse; + border-color: inherit; +} +summary { + display: list-item; +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + vertical-align: baseline; + font-size: 75%; + line-height: 0; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +dialog { + padding: 0px; +} +a { + color: inherit; + text-decoration: inherit; +} +abbr:where([title]) { + text-decoration: underline dotted; +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +pre, +samp { + --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New"; + font-feature-settings: normal; + font-variation-settings: normal; + font-family: var(--global-font-mono, var(--font-mono-fallback)); + font-size: 1em; +} +progress { + vertical-align: baseline; +} +::-webkit-search-cancel-button, +::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} +:-moz-ui-invalid { + box-shadow: none; +} +:-moz-focusring { + outline: auto; +} +[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + display: none !important; +} +:where(:root, :host):not(#\#):not(#\#) { + --colors-red-50: #fdeceb; + --colors-red-100: #fbd9d7; + --colors-red-150: #f9c7c2; + --colors-red-200: #f7b4ae; + --colors-red-300: #f28e86; + --colors-red-400: #ee695d; + --colors-red-500: #ea4335; + --colors-red-600: #bb362a; + --colors-red-700: #8c2820; + --colors-red-800: #5e1b15; + --colors-red-850: #461410; + --colors-red-900: #2f0d0b; + --colors-red-950: #170705; + --colors-blue-50: #ebf4fe; + --colors-blue-100: #d7e9fd; + --colors-blue-150: #c3ddfd; + --colors-blue-200: #afd2fc; + --colors-blue-300: #86bcfa; + --colors-blue-400: #5ea5f9; + --colors-blue-500: #368ff7; + --colors-blue-600: #2b72c6; + --colors-blue-700: #205694; + --colors-blue-800: #163963; + --colors-blue-850: #102b4a; + --colors-blue-900: #0b1d31; + --colors-blue-950: #050e19; + --colors-yellow-50: #fef7e6; + --colors-yellow-100: #feeecc; + --colors-yellow-150: #fde6b3; + --colors-yellow-200: #fddd99; + --colors-yellow-300: #fbcd66; + --colors-yellow-400: #fabc33; + --colors-yellow-500: #f9ab00; + --colors-yellow-600: #c78900; + --colors-yellow-700: #956700; + --colors-yellow-800: #644400; + --colors-yellow-850: #4b3300; + --colors-yellow-900: #322200; + --colors-yellow-950: #191100; + --colors-green-50: #ebf6ee; + --colors-green-100: #d6eedd; + --colors-green-150: #c2e5cb; + --colors-green-200: #aedcba; + --colors-green-300: #85cb98; + --colors-green-400: #5db975; + --colors-green-500: #34a853; + --colors-green-600: #2a8642; + --colors-green-700: #1f6532; + --colors-green-800: #154321; + --colors-green-850: #103219; + --colors-green-900: #0a2211; + --colors-green-950: #051108; + --colors-mono-50: #f7f7f7; + --colors-mono-100: #f0f0f0; + --colors-mono-150: #e8e8e8; + --colors-mono-200: #e1e1e1; + --colors-mono-300: #d1d1d1; + --colors-mono-400: #c2c2c2; + --colors-mono-500: #b3b3b3; + --colors-mono-600: #8f8f8f; + --colors-mono-700: #6b6b6b; + --colors-mono-800: #484848; + --colors-mono-900: #242424; + --colors-mono-950: #121212; + --colors-white: #ffffff; + --colors-black: #000000; + --colors-primary: #368ff7; + --colors-success: #2a8642; + --colors-error: #bb362a; + --colors-background-normal: #ffffff; + --colors-background-alternative: #f7f7f7; + --colors-background-dimmer: rgba(0, 0, 0, 0.8); + --colors-sub: #6b6b6b; + --colors-outline: #c2c2c2; + --colors-text-black: #121212; + --colors-text-white: #ffffff; + --colors-dark-disabled: #c2c2c2; + --colors-light-disabled: #e1e1e1; + --colors-blue-hover: #2b72c6; + --colors-mono-hover: #121212; + --colors-elevated-hover: rgba(16, 43, 74, 0.2); + --colors-blue-pressed: #5ea5f9; + --colors-blue-background-pressed: #ebf4fe; + --colors-mono-background-pressed: #f7f7f7; + --colors-shadow-small: rgba(0, 0, 0, 0.1); + --colors-shadow-medium: rgba(0, 0, 0, 0.2); + --colors-blue-shadow: rgba(16, 43, 74, 0.2); + --colors-discord: #5566fb; + --colors-github: #000000; +} +.textStyle_body1:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.01rem; + font-size: 1rem; + line-height: 160%; + font-weight: 500; +} +.textStyle_body0:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.01125rem; + font-size: 1.125rem; + line-height: 160%; + font-weight: 500; +} +.textStyle_body2:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.00875rem; + font-size: 0.875rem; + line-height: 160%; + font-weight: 500; +} +.textStyle_body3:not(#\#):not(#\#):not(#\#):not(#\#) { + font-size: 0.75rem; + line-height: 140%; + font-weight: 500; +} +.textStyle_display1:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.025rem; + font-size: 2.5rem; + line-height: 130%; + font-weight: 700; +} +.textStyle_display2:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.02rem; + font-size: 2rem; + line-height: 130%; + font-weight: 700; +} +.textStyle_h1:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.015rem; + font-size: 1.5rem; + line-height: 130%; + font-weight: 600; +} +.textStyle_h2:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.01125rem; + font-size: 1.125rem; + line-height: 130%; + font-weight: 600; +} +.textStyle_h3:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.01rem; + font-size: 1rem; + line-height: 130%; + font-weight: 600; +} +.textStyle_label1:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.01rem; + font-size: 1rem; + line-height: 100%; + font-weight: 600; +} +.textStyle_label2:not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.01rem; + font-size: 0.875rem; + line-height: 100%; + font-weight: 600; +} +.textStyle_label3:not(#\#):not(#\#):not(#\#):not(#\#) { + font-size: 0.75rem; + line-height: 100%; + font-weight: 600; +} +.li-s_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + list-style: none; +} +.h_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + height: 20px; +} +.w_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), +.w_20px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + width: 20px; +} +.h_20px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + height: 20px; +} +.ls_-0\.16px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + letter-spacing: -0.16px; +} +.d_flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + display: flex; +} +.gap_12px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + gap: 12px; +} +.p_11px_18px_11px_20px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + padding: 11px 18px 11px 20px; +} +.bg_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + background: var(--colors-mono-background-pressed); +} +.bg_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + background: var(--colors-white); +} +.c_textBlack:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-text-black); +} +.c_blue\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-50); +} +.c_blue\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-100); +} +.c_blue\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-150); +} +.c_blue\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-200); +} +.c_blue\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-300); +} +.c_blue\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-400); +} +.c_blue\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-500); +} +.c_blue\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-600); +} +.c_blue\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-700); +} +.c_blue\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-800); +} +.c_blue\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-850); +} +.c_blue\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-900); +} +.c_blue\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-950); +} +.c_yellow\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-50); +} +.c_yellow\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-100); +} +.c_yellow\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-150); +} +.c_yellow\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-200); +} +.c_yellow\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-300); +} +.c_yellow\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-400); +} +.c_yellow\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-500); +} +.c_yellow\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-600); +} +.c_yellow\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-700); +} +.c_yellow\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-800); +} +.c_yellow\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-850); +} +.c_yellow\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-900); +} +.c_yellow\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-yellow-950); +} +.c_green\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-50); +} +.c_green\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-100); +} +.c_green\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-150); +} +.c_green\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-200); +} +.c_green\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-300); +} +.c_green\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-400); +} +.c_green\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-500); +} +.c_green\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-600); +} +.c_green\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-700); +} +.c_green\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-800); +} +.c_green\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-850); +} +.c_green\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-900); +} +.c_green\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-green-950); +} +.c_red\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-50); +} +.c_red\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-100); +} +.c_red\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-150); +} +.c_red\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-200); +} +.c_red\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-300); +} +.c_red\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-400); +} +.c_red\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-500); +} +.c_red\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-600); +} +.c_red\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-700); +} +.c_red\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-800); +} +.c_red\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-850); +} +.c_red\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-900); +} +.c_red\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-red-950); +} +.c_mono\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-50); +} +.c_mono\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-100); +} +.c_mono\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-150); +} +.c_mono\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-200); +} +.c_mono\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-300); +} +.c_mono\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-400); +} +.c_mono\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-500); +} +.c_mono\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-600); +} +.c_mono\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-700); +} +.c_mono\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-800); +} +.c_mono\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: mono.850; +} +.c_mono\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-900); +} +.c_mono\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-950); +} +.c_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-white); +} +.c_black:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-black); +} +.c_whiteOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.20; +} +.c_whiteOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.40; +} +.c_whiteOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.60; +} +.c_whiteOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: whiteOpacity.80; +} +.c_blackOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.20; +} +.c_blackOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.40; +} +.c_blackOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.60; +} +.c_blackOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: blackOpacity.80; +} +.c_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-primary); +} +.c_success:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-success); +} +.c_error:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-error); +} +.c_backgroundNormal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-background-normal); +} +.c_backgroundAlternative:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-background-alternative); +} +.c_backgroundDimmer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-background-dimmer); +} +.c_sub:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-sub); +} +.c_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-outline); +} +.c_textWhite:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-text-white); +} +.c_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-dark-disabled); +} +.c_lightDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-light-disabled); +} +.c_blueHover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-hover); +} +.c_monoHover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-hover); +} +.c_elevatedHover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-elevated-hover); +} +.c_bluePressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-pressed); +} +.c_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-background-pressed); +} +.c_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-mono-background-pressed); +} +.c_shadowSmall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-shadow-small); +} +.c_shadowMedium:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-shadow-medium); +} +.c_blueShadow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-blue-shadow); +} +.c_discord:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-discord); +} +.c_github:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: var(--colors-github); +} +.c_blueGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: blueGradientDark; +} +.c_blueGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: blueGradientLight; +} +.c_redGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: redGradientDark; +} +.c_redGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: redGradientLight; +} +.c_greenGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: greenGradientDark; +} +.c_greenGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: greenGradientLight; +} +.c_yellowGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: yellowGradientDark; +} +.c_yellowGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + color: yellowGradientLight; +} +.ml_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + margin-left: auto; +} +.fs_16px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + font-size: 16px; +} +.fw_500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + font-weight: 500; +} +.lh_160\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + line-height: 160%; +} +.mr_8px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + margin-right: 8px; +} +.ai_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { + align-items: center; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 11d414f0..634e5193 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + clsx: + specifier: ^2.1.1 + version: 2.1.1 wowds-tokens: specifier: ^0.1.1 version: 0.1.2 @@ -6128,6 +6131,11 @@ packages: engines: {node: '>=0.8'} dev: true + /clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + dev: false + /co@4.6.0: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} From 9e1da4aabb0a380c0e05a3e5effe235b55d53a32 Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Tue, 13 Aug 2024 16:48:36 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/components/NavItem/NavItem.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/NavItem/NavItem.stories.tsx b/packages/ui/src/components/NavItem/NavItem.stories.tsx index d0fd4fbb..dfbaed49 100644 --- a/packages/ui/src/components/NavItem/NavItem.stories.tsx +++ b/packages/ui/src/components/NavItem/NavItem.stories.tsx @@ -5,7 +5,7 @@ import homeImageUrl from "../../assets/home.svg"; import Navbar from "."; const meta = { - title: "Client/Navbar", + title: "UI/Navbar", component: Navbar, tags: ["autodocs"], parameters: { From 9e71d518aa984ad370f811f1671372e797e90ea7 Mon Sep 17 00:00:00 2001 From: SeieunYoo Date: Tue, 13 Aug 2024 17:01:02 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20NavItem=20=EC=97=90=20Text=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/components/NavItem/index.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/components/NavItem/index.tsx b/packages/ui/src/components/NavItem/index.tsx index 7d3f0787..435c8d67 100644 --- a/packages/ui/src/components/NavItem/index.tsx +++ b/packages/ui/src/components/NavItem/index.tsx @@ -8,6 +8,7 @@ import { useSelectedLayoutSegments } from "next/navigation"; import { useState } from "react"; import arrowImageUrl from "../../assets/arrow.svg"; +import Text from "../Text"; /** * @description 내비게이션 바에서 사용하는 내비게이션 아이템 컴포넌트입니다. @@ -66,7 +67,9 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => { src={imageUrl} width={20} /> -
{name}
+ + {name} + {items?.length && items?.length > 1 && ( toggle-icon { src={item.imageUrl} width={20} /> -
{item.name}
+ + {item.name} + ))} @@ -133,10 +138,3 @@ const navItemStyle = cva({ }, }, }); - -const navItemTextStyle = css({ - fontSize: "16px", - fontWeight: 500, - lineHeight: "160%", - letterSpacing: "-0.16px", -});