diff --git a/package.json b/package.json index b85d40fc..2b39d32e 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-router-dom": "^6.2.1", "react-scripts": "5.0.1", "react-slick": "^0.29.0", + "recoil": "^0.7.4", "slick-carousel": "^1.8.1", "styled-components": "^5.3.5" }, diff --git a/src/App.tsx b/src/App.tsx index 1dd16ca1..a9bfecbd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,16 @@ +import { useRecoilValue } from "recoil"; import styled from "styled-components"; +import { activeState } from "./core/atom/menuBar"; import Router from "./Router"; +import { ModalStyle } from "./style/modalStyle"; export default function App() { + const isActive = useRecoilValue(activeState); + return ( + {isActive && } ); @@ -12,6 +18,8 @@ export default function App() { const St = { MobileContainer: styled.div` + position: relative; + margin: 0 auto; @media screen and (min-width: 48rem), screen and (min-height: 48rem) and (orientation: landscape) { diff --git a/src/asset/icon/MenuBar Profile.svg b/src/asset/icon/MenuBar Profile.svg new file mode 100644 index 00000000..2f524674 --- /dev/null +++ b/src/asset/icon/MenuBar Profile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/asset/icon/closeBtn.svg b/src/asset/icon/closeBtn.svg new file mode 100644 index 00000000..e1e31c3e --- /dev/null +++ b/src/asset/icon/closeBtn.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/asset/icon/index.ts b/src/asset/icon/index.ts index cf428d62..68ef2ed3 100644 --- a/src/asset/icon/index.ts +++ b/src/asset/icon/index.ts @@ -1,8 +1,11 @@ +export { ReactComponent as IcCloseBtn } from "./closeBtn.svg"; export { ReactComponent as IcEmptyHeart } from "./emptyHeart.svg"; export { ReactComponent as IcFilterBtn } from "./filterBtn.svg"; export { ReactComponent as IcHamburger } from "./hamburger.svg"; export { ReactComponent as IcLogo } from "./logo.svg"; export { ReactComponent as IcCloseBtn } from "./modalCloseBtn.svg"; export { ReactComponent as IcNextCardBtmn } from "./nextCardBtn.svg"; +export { ReactComponent as IcMenuBarImg } from "./MenuBar Profile.svg"; +export { ReactComponent as IcNextCardBtn } from "./nextCardBtn.svg"; export { ReactComponent as IcVoteImg1 } from "./voteImg1.svg"; export { ReactComponent as IcVoteImg2 } from "./voteImg2.svg"; diff --git a/src/components/CardCollection/Card/LastCard/index.tsx b/src/components/CardCollection/Card/LastCard/index.tsx index 2e55a4d0..7fb00903 100644 --- a/src/components/CardCollection/Card/LastCard/index.tsx +++ b/src/components/CardCollection/Card/LastCard/index.tsx @@ -1,4 +1,4 @@ -import { IcNextCardBtmn } from "../../../../asset/icon"; +import { IcNextCardBtn } from "../../../../asset/icon"; import { St } from "./style"; export default function LastCard() { @@ -16,7 +16,7 @@ export default function LastCard() { - + 홈으로 돌아가기 diff --git a/src/components/CardCollection/CardSlider/style.ts b/src/components/CardCollection/CardSlider/style.ts index 680cb900..79cabcec 100644 --- a/src/components/CardCollection/CardSlider/style.ts +++ b/src/components/CardCollection/CardSlider/style.ts @@ -1,13 +1,3 @@ -/* -마지막 편집자: 22-07-13 joohaem -변경사항 및 참고: - - height/scale, background 애니메이션이 너무 이상하게 들어가서 - 주석처리 된 부분들 디자인팀과 소통이 좀 필요할 것 같아요 - -고민점: - - -*/ - import styled from "styled-components"; import { IcFilterBtn } from "../../../asset/icon"; @@ -30,9 +20,6 @@ export const St = { height: 100%; /* width: calc(100vw - 5.6rem); */ /* height: calc(100vh - 10.5rem); */ - - /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), rgba(211, 245, 232, 0.5); - backdrop-filter: blur(1.2rem); */ } & .slick-slide.slick-active article { @@ -53,7 +40,7 @@ export const St = { `, IcFilterBtn: styled(IcFilterBtn)` - position: absolute; + position: fixed; right: 2.3rem; bottom: 3.4rem; `, diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx new file mode 100644 index 00000000..2606928e --- /dev/null +++ b/src/components/Login/LoginForm/index.tsx @@ -0,0 +1,38 @@ +/* +마지막 편집자: 22-07-14 joohaem +변경사항 및 참고: + - "react-hook-form" 도입 고려해도 좋을 것 같습니다 + +고민점: + - +*/ + +import { useState } from "react"; + +import { St } from "./style"; + +export default function LoginForm() { + const [errorMessage, setErrorMessage] = useState({ emailError: "", passwordError: "" }); + + const submitLoginForm = (e: React.FormEvent) => { + e.preventDefault(); + }; + + return ( + + 로그인 + + 이메일 + + {errorMessage.emailError && {errorMessage.emailError}} + 비밀번호 + + {errorMessage.passwordError && {errorMessage.passwordError}} + 로그인하기 + + + 회원가입 | 비밀번호 재설정 + + + ); +} diff --git a/src/components/Login/LoginForm/style.ts b/src/components/Login/LoginForm/style.ts new file mode 100644 index 00000000..8f0792fa --- /dev/null +++ b/src/components/Login/LoginForm/style.ts @@ -0,0 +1,80 @@ +import styled from "styled-components"; + +export const St = { + Section: styled.section` + padding: 0 1.2rem; + `, + + Form: styled.form``, + + Title: styled.h2` + margin-bottom: 2rem; + + ${({ theme }) => theme.fonts.h1}; + color: ${({ theme }) => theme.colors.bg}; + `, + + Label: styled.label` + display: block; + + margin: 1.6rem 0 1.2rem; + + ${({ theme }) => theme.fonts.body6}; + color: ${({ theme }) => theme.colors.gray600}; + `, + + ErrorMessage: styled.strong` + display: block; + + margin: 0.8rem 0 0 2rem; + + ${({ theme }) => theme.fonts.caption5}; + color: ${({ theme }) => theme.colors.red}; ; + `, + + Input: styled.input` + width: 100%; + height: 4.4rem; + + padding: 1.2rem 0 1.2rem 2.4rem; + + border: 0.1rem solid ${({ theme }) => theme.colors.gray300}; + border-radius: 4.9rem; + + ${({ theme }) => theme.fonts.body6}; + color: ${({ theme }) => theme.colors.gray400}; + `, + + LoginBtn: styled.button` + width: 100%; + height: 5rem; + + display: flex; + justify-content: center; + align-items: center; + + margin-top: 2.4rem; + + background-color: ${({ theme }) => theme.colors.bg}; + border-radius: 5rem; + + ${({ theme }) => theme.fonts.btn2}; + color: ${({ theme }) => theme.colors.white}; + `, + + LinkWrapper: styled.ul` + margin: 3.9rem 0 19.3rem; + + display: flex; + justify-content: center; + + ${({ theme }) => theme.fonts.body6}; + color: ${({ theme }) => theme.colors.gray600}; + `, + + Link: styled.li``, + + Delimeter: styled.span` + margin: 0 1rem; + `, +}; diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index ac070eaf..bac142af 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -1,9 +1,13 @@ import Header from "../common/Header"; +import Footer from "../Main/Footer"; +import LoginForm from "./LoginForm"; export default function Login() { return (
+ +
); } diff --git a/src/components/Main/BestPiickle/BestPiickleCard/style.ts b/src/components/Main/BestPiickle/BestPiickleCard/style.ts index b463c46e..fcafcce0 100644 --- a/src/components/Main/BestPiickle/BestPiickleCard/style.ts +++ b/src/components/Main/BestPiickle/BestPiickleCard/style.ts @@ -25,7 +25,7 @@ export const St = { `, Content: styled.p` - ${({ theme }) => theme.fonts.caption1}; + ${({ theme }) => theme.fonts.body1}; color: ${({ theme }) => theme.colors.black}; width: 17rem; diff --git a/src/components/Main/CTABtn/index.tsx b/src/components/Main/CTABtn/index.tsx index b6b967b0..964fd66f 100644 --- a/src/components/Main/CTABtn/index.tsx +++ b/src/components/Main/CTABtn/index.tsx @@ -1,5 +1,9 @@ import { St } from "./style"; export default function CTABtn() { - return 대화주제 추천 바로가기; + return ( + + 대화주제 추천 바로가기 + + ); } diff --git a/src/components/Main/Footer/style.ts b/src/components/Main/Footer/style.ts index 3d858ca4..3f5b3f69 100644 --- a/src/components/Main/Footer/style.ts +++ b/src/components/Main/Footer/style.ts @@ -26,12 +26,9 @@ export const St = { BasicInfoTitle: styled.li` height: 1.7rem; + ${({ theme }) => theme.fonts.footer1}; + font-family: "Pretendard"; - font-style: normal; - font-weight: 600; - font-size: 1.2rem; - line-height: 140%; - letter-spacing: -0.04rem; color: ${({ theme }) => theme.colors.bg}; `, @@ -51,12 +48,7 @@ export const St = { height: 1.7rem; margin-bottom: 0.3rem; - font-family: "Pretendard"; - font-style: normal; - font-weight: 600; - font-size: 1.2rem; - line-height: 140%; - letter-spacing: -0.04rem; + ${({ theme }) => theme.fonts.footer1}; color: ${({ theme }) => theme.colors.bg}; `, @@ -65,7 +57,7 @@ export const St = { height: 1.7rem; margin-bottom: 2rem; - ${({ theme }) => theme.fonts.btn3}; + ${({ theme }) => theme.fonts.footer2}; color: ${({ theme }) => theme.colors.gray600}; `, }; diff --git a/src/components/Main/MenuBar/style.ts b/src/components/Main/MenuBar/style.ts new file mode 100644 index 00000000..4c6a66ad --- /dev/null +++ b/src/components/Main/MenuBar/style.ts @@ -0,0 +1,134 @@ +import styled from "styled-components"; + +import { IcCloseBtn } from "../../../asset/icon"; + +export const St = { + Root: styled.section` + background-color: ${({ theme }) => theme.colors.gray600}; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + z-index: 10; + `, + + ContentsContainer: styled.section` + width: 28.8rem; + height: 100vh; + float: right; + + background-color: ${({ theme }) => theme.colors.white}; + + padding-top: 10.1rem; + padding-left: 1.8rem; + `, + + CloseBtnContainer: styled.div` + float: right; + margin-right: 1.6rem; + `, + + ProfileContainer: styled.article` + border-bottom: solid 0.2rem #f1f1f1; + + padding-bottom: 3.6rem; + `, + + WelcomeText: styled.h1` + ${({ theme }) => theme.fonts.body1}; + font-size: 24px; + line-height: 3.36rem; + + color: ${({ theme }) => theme.colors.bg}; + + margin-top: 1.6rem; + `, + + DescriptText: styled.h2` + ${({ theme }) => theme.fonts.body12}; + font-size: 16px; + + color: ${({ theme }) => theme.colors.gray600}; + + margin-top: 0.4rem; + `, + + BtnContainer: styled.div` + display: flex; + align-items: center; + + color: ${({ theme }) => theme.colors.gray600}; + + margin-top: 3.6rem; + `, + + MyProfileBtn: styled.button` + ${({ theme }) => theme.fonts.btn2}; + + color: ${({ theme }) => theme.colors.gray600}; + + border-right: solid 0.15rem #606060; + + padding-right: 1rem; + `, + + LogoutBtn: styled.button` + ${({ theme }) => theme.fonts.body12}; + color: ${({ theme }) => theme.colors.gray600}; + + padding-left: 1rem; + `, + + RecomendContainer: styled.article` + padding-top: 3.6rem; + `, + + TitleText: styled.h1` + ${({ theme }) => theme.fonts.caption1}; + + color: ${({ theme }) => theme.colors.bg}; + `, + + MoodPiickleContainer: styled.div` + display: flex; + + margin-top: 2.4rem; + `, + + MoodPiickleText: styled.h2` + ${({ theme }) => theme.fonts.caption1}; + + color: ${({ theme }) => theme.colors.bg}; + + margin-right: 1.2rem; + `, + + GoMoodPiickleBtn: styled.button` + ${({ theme }) => theme.fonts.body12}; + + color: ${({ theme }) => theme.colors.gray600}; + `, + + PiickleMeContainer: styled.div` + display: flex; + + margin-top: 2.4rem; + `, + + PiickleMeText: styled.h2` + ${({ theme }) => theme.fonts.caption1}; + + color: ${({ theme }) => theme.colors.bg}; + + margin-right: 1.2rem; + `, + + GoPiickleMeBtn: styled.button` + ${({ theme }) => theme.fonts.body12}; + + color: ${({ theme }) => theme.colors.gray600}; + `, +}; diff --git a/src/components/Main/PiickleMe/index.tsx b/src/components/Main/PiickleMe/index.tsx index 3c99c761..4e62ab10 100644 --- a/src/components/Main/PiickleMe/index.tsx +++ b/src/components/Main/PiickleMe/index.tsx @@ -37,8 +37,8 @@ export default function PiickleMe() { - {representVoteData.contentText} - {representVoteData.discription} + {representVoteData.contentText} + {representVoteData.discription} 투표하기 {voteData.map((element) => { @@ -47,8 +47,7 @@ export default function PiickleMe() { {element.profileImg} - {element.contentText.slice(0, 18)}... - {element.subText} + {element.contentText.slice(0, 18)}... {element.voteBtn} diff --git a/src/components/Main/PiickleMe/style.ts b/src/components/Main/PiickleMe/style.ts index 06f94318..ff2e3eca 100644 --- a/src/components/Main/PiickleMe/style.ts +++ b/src/components/Main/PiickleMe/style.ts @@ -37,20 +37,29 @@ export const St = { flex-direction: column; `, - VoteContentText: styled.p<{ isFirst: boolean }>` + RepresentVoteContentText: styled.p` line-height: 1.4; margin-bottom: 0.4rem; - ${({ isFirst, theme }) => (isFirst ? theme.fonts.caption1 : theme.fonts.body2)}; + ${({ theme }) => theme.fonts.body3}; + color: ${({ theme }) => theme.colors.gray800}; `, - VoteContentSubText: styled.p<{ isFirst: boolean }>` - ${({ theme }) => theme.fonts.body2} + RepresentVoteContentSubText: styled.p` + ${({ theme }) => theme.fonts.caption3} color: ${({ theme }) => theme.colors.gray600}; `, + VoteContentText: styled.p` + line-height: 1.4; + + margin-bottom: 0.4rem; + + ${({ theme }) => theme.fonts.body4}; + `, + RepresentGoVoteBtn: styled.button` width: 7.6rem; height: 2.8rem; diff --git a/src/components/Main/common/.keep b/src/components/Main/common/.keep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 4bb047e9..bec71fe6 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -1,17 +1,31 @@ import { Link, useLocation } from "react-router-dom"; +import { useRecoilState } from "recoil"; import { IcHamburger, IcLogo } from "../../../asset/icon"; +import { activeState } from "../../../core/atom/menuBar"; +import MenuBar from "../MenuBar"; import { St } from "./style"; export default function Header() { const { pathname } = useLocation(); + const [isActive, setIsActive] = useRecoilState(activeState); - return ( - - - - - - - ); + const handleModal = () => { + setIsActive(!isActive); + }; + + if (isActive) { + return ; + } else { + return ( + + + + + + + + + ); + } } diff --git a/src/components/common/Header/style.ts b/src/components/common/Header/style.ts index bb694102..8971e93c 100644 --- a/src/components/common/Header/style.ts +++ b/src/components/common/Header/style.ts @@ -18,6 +18,8 @@ export const St = { z-index: 10; `, + HamburgerContainer: styled.div<{ isClicked: boolean }>``, + LogoTitle: styled.h1` ${({ theme }) => theme.visually_hidden}; `, diff --git a/src/components/common/MenuBar/index.tsx b/src/components/common/MenuBar/index.tsx new file mode 100644 index 00000000..2d198bd4 --- /dev/null +++ b/src/components/common/MenuBar/index.tsx @@ -0,0 +1,49 @@ +import { useSetRecoilState } from "recoil"; + +import { IcCloseBtn, IcMenuBarImg } from "../../../asset/icon"; +import { activeState } from "../../../core/atom/menuBar"; +import { St, StContentsContainer } from "./style"; + +const MenuBarDummy = { + profileImg: , + name: "윤지영", +}; + +export default function MenuBar() { + const setIsActive = useSetRecoilState(activeState); + + return ( + + + setIsActive((prevState) => !prevState)}> + + + + + {MenuBarDummy.profileImg} + + {MenuBarDummy.name}님,
+ 안녕하세요 + + 오늘도 피클과 함께 대화 나눠요 + + My 프로필 + 로그아웃 + + + + 대화 주제 추천 카드 + + Mood Piickles + 카테고리별 대화주제 추천 + + + Piickle Me + 진행중인 투표 + + + + + + ); +} diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts new file mode 100644 index 00000000..5e649cc3 --- /dev/null +++ b/src/components/common/MenuBar/style.ts @@ -0,0 +1,155 @@ +import styled, { keyframes } from "styled-components"; + +export const St = { + Root: styled.section` + position: absolute; + top: 0; + right: 0; + left: 0; + height: 100vh; + + background-color: ${({ theme }) => theme.colors.gray600}; + + z-index: 10; + `, + + Contents: styled.div``, + + CloseBtnContainer: styled.div` + position: absolute; + top: 1.9rem; + right: 1.6rem; + `, + + ProfileContainer: styled.article` + border-bottom: solid 0.2rem #f1f1f1; + + padding-bottom: 3.6rem; + `, + + WelcomeText: styled.h1` + ${({ theme }) => theme.fonts.body1}; + font-size: 24px; + line-height: 3.36rem; + + color: ${({ theme }) => theme.colors.bg}; + + margin-top: 1.6rem; + `, + + DescriptText: styled.h2` + ${({ theme }) => theme.fonts.body12}; + font-size: 16px; + + color: ${({ theme }) => theme.colors.gray600}; + + margin-top: 0.4rem; + `, + + BtnContainer: styled.div` + display: flex; + align-items: center; + + color: ${({ theme }) => theme.colors.gray600}; + + margin-top: 3.6rem; + `, + + MyProfileBtn: styled.button` + ${({ theme }) => theme.fonts.btn2}; + + color: ${({ theme }) => theme.colors.gray600}; + + border-right: solid 0.15rem ${({ theme }) => theme.colors.gray600}; + + padding-right: 1rem; + `, + + LogoutBtn: styled.button` + ${({ theme }) => theme.fonts.btn2}; + color: ${({ theme }) => theme.colors.gray600}; + + padding-left: 1rem; + `, + + RecomendContainer: styled.article` + padding-top: 3.6rem; + `, + + TitleText: styled.h1` + ${({ theme }) => theme.fonts.body1}; + + color: ${({ theme }) => theme.colors.bg}; + `, + + MoodPiickleContainer: styled.div` + display: flex; + + margin-top: 2.4rem; + `, + + MoodPiickleText: styled.h2` + ${({ theme }) => theme.fonts.body1}; + + color: ${({ theme }) => theme.colors.bg}; + + margin-right: 1.2rem; + `, + + GoMoodPiickleBtn: styled.button` + ${({ theme }) => theme.fonts.body4}; + + color: ${({ theme }) => theme.colors.gray600}; + `, + + PiickleMeContainer: styled.div` + display: flex; + + margin-top: 2.4rem; + `, + + PiickleMeText: styled.h2` + ${({ theme }) => theme.fonts.body1}; + + color: ${({ theme }) => theme.colors.bg}; + + margin-right: 1.2rem; + `, + + GoPiickleMeBtn: styled.button` + ${({ theme }) => theme.fonts.body4}; + + color: ${({ theme }) => theme.colors.gray600}; + `, +}; + +const ani = keyframes` + 0% { + width: 0; + opacity: 0; + } + 50% { + width: 28.8rem; + } + 100% { + opacity: 1; + } + `; + +export const StContentsContainer = styled.section` + display: flex; + flex-direction: column; + justify-content: center; + + position: relative; + + width: 28.8rem; + height: 100vh; + float: right; + + background-color: ${({ theme }) => theme.colors.white}; + + padding-left: 1.8rem; + + animation: ${ani} 0.8s ease-in-out; +`; diff --git a/src/core/atom/menuBar.ts b/src/core/atom/menuBar.ts new file mode 100644 index 00000000..926c37d1 --- /dev/null +++ b/src/core/atom/menuBar.ts @@ -0,0 +1,10 @@ +import { atom } from "recoil"; + +enum StateType { + ACTIVE_STATE = "activestate", +} + +export const activeState = atom({ + key: StateType.ACTIVE_STATE, + default: false, +}); diff --git a/src/index.tsx b/src/index.tsx index 90fa3617..516ceef1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { RecoilRoot } from "recoil"; import { ThemeProvider } from "styled-components"; import App from "./App"; @@ -14,9 +15,11 @@ if (process.env.NODE_ENV === "development") { const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( - - - - + + + + + + , ); diff --git a/src/style/modalStyle.ts b/src/style/modalStyle.ts new file mode 100644 index 00000000..5ba98228 --- /dev/null +++ b/src/style/modalStyle.ts @@ -0,0 +1,10 @@ +import { createGlobalStyle } from "styled-components"; + +export const ModalStyle = createGlobalStyle` + body { + overflow: hidden; + } + body * { + touch-action: none; + } +`; diff --git a/src/style/theme.ts b/src/style/theme.ts index 02e3c59e..b9524ffb 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -1,9 +1,13 @@ const colors = { + red: "#FF0000", green: "#19BE7E", sub_green: "#DBFFF1", - sub_green1: "#B5F2DB", - sub_green2: "#7DE0B9", + sub_green1: "#7DE0B9", + sub_green2: "#B5F2DB", + sub_green3: "#DBFFF1", + sub_green4: "rgba(181, 242, 219, 0.7)", sub_green5: "#EEF5F3", + bg: "#2A2A2A", black: "#000000", white: "#FFFFFF", gray100: "#F1F1F1", @@ -15,7 +19,6 @@ const colors = { gray700: "#404040", gray800: "#202020", caption2_color: "#575757", - bg: "#2A2A2A", sub1: "#F2F25A", sub3: "#706E2B", sub4: "#F2EFCE", @@ -28,11 +31,12 @@ interface Font { weight: 300 | 400 | 500 | 600 | 700; size: number; lineHeight: number; + notoSans?: boolean; } -function FONT({ weight, size, lineHeight }: Font): string { +function FONT({ weight, size, lineHeight, notoSans }: Font): string { return ` - font-family: "Pretendard"; + font-family: ${notoSans ? "Noto Sans" : "Pretendard"}; font-weight: ${weight}; font-size: ${size}rem; line-height: ${lineHeight}%; @@ -42,7 +46,7 @@ function FONT({ weight, size, lineHeight }: Font): string { const fonts = { h1: FONT({ weight: 600, size: 2, lineHeight: 130 }), - h2: FONT({ weight: 400, size: 1.4, lineHeight: 130 }), + h2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), body1: FONT({ weight: 600, size: 1.6, lineHeight: 140 }), body2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), body3: FONT({ weight: 700, size: 2.4, lineHeight: 140 }), @@ -54,6 +58,28 @@ const fonts = { btn1: FONT({ weight: 400, size: 1.4, lineHeight: 140 }), btn2: FONT({ weight: 400, size: 1.2, lineHeight: 150 }), btn3: FONT({ weight: 300, size: 1.6, lineHeight: 224 }), + body2: FONT({ weight: 700, size: 2.4, lineHeight: 140 }), + body3: FONT({ weight: 600, size: 1.5, lineHeight: 140 }), + body4: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), + body5: FONT({ weight: 700, size: 2.4, lineHeight: 140 }), + body6: FONT({ weight: 400, size: 1.4, lineHeight: 140 }), + body7: FONT({ weight: 500, size: 1.6, lineHeight: 140 }), + body8: FONT({ weight: 400, size: 1.2, lineHeight: 140, notoSans: true }), + body9: FONT({ weight: 600, size: 2, lineHeight: 130 }), + body10: FONT({ weight: 600, size: 2.4, lineHeight: 130 }), + body11: FONT({ weight: 400, size: 1.5, lineHeight: 140 }), + body12: FONT({ weight: 400, size: 1.6, lineHeight: 140 }), + caption1: FONT({ weight: 400, size: 1, lineHeight: 80 }), + caption2: FONT({ weight: 400, size: 1, lineHeight: 130 }), + caption3: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), + caption4: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), + caption5: FONT({ weight: 400, size: 1.1, lineHeight: 140 }), + btn1: FONT({ weight: 400, size: 1.4, lineHeight: 140 }), + btn2: FONT({ weight: 400, size: 1.2, lineHeight: 130 }), + btn3: FONT({ weight: 300, size: 1.6, lineHeight: 140 }), + btn4: FONT({ weight: 300, size: 1, lineHeight: 140 }), + footer1: FONT({ weight: 600, size: 1.2, lineHeight: 140 }), + footer2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), } as const; const theme = { diff --git a/yarn.lock b/yarn.lock index a33fa899..895e9fda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7916,6 +7916,11 @@ gzip-size@^6.0.0: dependencies: duplexer "^0.1.2" +hamt_plus@1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601" + integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA== + handle-thing@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" @@ -12666,6 +12671,13 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +recoil@^0.7.4: + version "0.7.4" + resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.4.tgz#d6508fa656d9c93e66fdf334e1f723a9e98801cf" + integrity sha512-sCXvQGMfSprkNU4ZRkJV4B0qFQSURJMgsICqY1952WRlg66NMwYqi6n67vhnhn0qw4zHU1gHXJuMvRDaiRNFZw== + dependencies: + hamt_plus "1.0.2" + recursive-readdir@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"