design/디자인시스템(컬러&폰트)

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/app/account/_components/LanguageDropdown.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const container = style({
   position: 'relative',

src/app/account/page.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/font.css';
-import { vars } from '@/styles/theme.css';
+import * as fonts from '@/styles/__font.css';
+import { vars } from '@/styles/__theme.css';
 
 export const container = style({
   marginTop: 18,

src/app/account/profile/_components/ProfileForm.css.ts

@@ -1,6 +1,6 @@
 import { style, createVar } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import { labelSmall, bodyMedium, caption } from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import { labelSmall, bodyMedium, caption } from '@/styles/__font.css';
 
 export const form = style({
   maxWidth: 400,

src/app/account/withdraw/_component/AgreementConfirmation.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const wrapper = style({
   display: 'flex',

src/app/account/withdraw/_component/WithdrawalButton.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const confirmButton = style([
   fonts.bodyMedium,

src/app/account/withdraw/_component/WithdrawalNotice.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/font.css';
-import { vars } from '@/styles/theme.css';
+import * as fonts from '@/styles/__font.css';
+import { vars } from '@/styles/__theme.css';
 
 export const wrapper = style({
   display: 'flex',

src/app/account/withdraw/page.css.ts

@@ -1,4 +1,4 @@
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const page = style({

src/app/collection/[category]/_components/NoData.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 export const container = style({
   paddingTop: '2rem',

src/app/collection/[category]/_components/Top3Card.css.ts

@@ -1,5 +1,5 @@
 import { style, createVar } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 export const listColor = createVar();
 export const listBackgroundImage = createVar();

src/app/collection/page.css.ts

@@ -1,5 +1,5 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import * as fonts from '@/styles/font.css';
+import * as fonts from '@/styles/__font.css';
 
 export const wrapper = style({
   marginBottom: 70,

src/app/intro/_components/Footer.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const background = style({
   width: '100%',

src/app/intro/_components/Label.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/font.css';
-import { vars } from '@/styles/theme.css';
+import * as fonts from '@/styles/__font.css';
+import { vars } from '@/styles/__theme.css';
 
 export const baseLabel = style([
   fonts.labelMedium,

src/app/intro/_components/LabelsAnimation.css.ts

@@ -1,6 +1,6 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const wrapper = style({
   height: '300px',

src/app/intro/_components/ListWave.css.ts

@@ -1,6 +1,6 @@
 import { style, keyframes, createVar } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const customBackgroundImage = createVar();
 

src/app/intro/_components/SearchBar.css.ts

@@ -1,6 +1,6 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const wrapper = style({
   width: '330px',

src/app/intro/_components/Section1.css.ts

@@ -1,5 +1,5 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 export const wrapper = style({
   width: '100%',

src/app/intro/_components/Section2.css.ts

@@ -1,6 +1,6 @@
 import { style, createVar } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const customBackgroundImage = createVar();
 

src/app/intro/_components/Section3.css.ts

@@ -1,6 +1,6 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const background = style({
   width: '100%',

src/app/intro/_components/Section4.css.ts

@@ -1,6 +1,6 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const background = style({
   width: '100%',

src/app/intro/_components/Section5.css.ts

@@ -1,6 +1,6 @@
 import { style, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const background = style({
   width: '100%',

src/app/intro/_components/Section6.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const background = style({
   width: '100%',

src/app/intro/_components/Section7.css.ts

@@ -1,6 +1,6 @@
 import { style, createVar } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const background = style({
   width: '100%',

src/app/intro/page.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 export const wrapper = style({
   width: '100%',

src/app/layout.css.ts

@@ -1,5 +1,5 @@
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 import { style } from '@vanilla-extract/css';
 
 export const body = style({

src/app/list/[listId]/_components/ListDetailInner/RankList.css.ts

@@ -1,5 +1,5 @@
 import { createVar, style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 export const listColor = createVar();
 

src/app/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 export const collaboratorWrapper = style({
   position: 'relative',

src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 /**
  * @todo 공용 폰트 스타일 적용

src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.tsx

@@ -4,7 +4,7 @@ import * as styles from './CollaboratorsModal.css';
 import { UserProfileType } from '@/lib/types/userProfileType';
 import CancelButton from '/public/icons/cancel_button.svg';
 import fallbackProfile from '/public/images/fallback_profileImage.webp';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import { listLocale } from '@/app/list/[listId]/locale';
 import { useLanguage } from '@/store/useLanguage';
 

src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 /**@todo 공용폰트 스타일 적용 */
 

src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx

@@ -15,7 +15,7 @@ import { useCommentId, useCommentStatus } from '@/store/useComment';
 import { commentLocale } from '@/app/list/[listId]/locale';
 
 import * as styles from './Comment.css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import fallbackProfile from '/public/images/fallback_profileImage.webp';
 import EditPen from '/public/icons/edit_pen.svg';
 import { useLanguage } from '@/store/useLanguage';

src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx

@@ -10,7 +10,7 @@ import Modal from '@/components/Modal/Modal';
 import LoginModal from '@/components/login/LoginModal';
 import useBooleanOutput from '@/hooks/useBooleanOutput';
 
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import * as styles from './Comments.css';
 import CancelButton from '/public/icons/cancel_button.svg';
 import Airplane from '/public/icons/airplane_send.svg';

src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 /**@todo 공용폰트 스타일 적용 */
 

src/app/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx

@@ -9,7 +9,7 @@ import HistoryButton from '/public/icons/history.svg';
 import PencilButton from '/public/icons/edit_pen.svg';
 import { listLocale } from '@/app/list/[listId]/locale';
 
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import { useLanguage } from '@/store/useLanguage';
 
 interface HeaderRightProps {

src/app/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import { body2, title3, bodyRegular } from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import { body2, title3, bodyRegular } from '@/styles/__font.css';
 /**@todo 공용폰트 스타일 적용 */
 
 export const wrapper = style({

src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx

@@ -29,7 +29,7 @@ import { modalLocale, listLocale } from '@/app/list/[listId]/locale';
 import * as styles from './ListInformation.css';
 import * as modalStyles from '@/components/Modal/ModalButton.css';
 import LockIcon from '/public/icons/lock.svg';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 
 function ListInformation() {
   const { language } = useLanguage();

src/app/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts

@@ -1,4 +1,4 @@
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const resetButtonStyle = style({

src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import { caption1 } from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import { caption1 } from '@/styles/__font.css';
 
 /**@todo 공용폰트 스타일 적용 */
 

src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx

@@ -13,7 +13,7 @@ import { UserType } from '@/lib/types/userProfileType';
 import { replyLocale } from '@/app/list/[listId]/locale';
 
 import * as styles from './Replies.css';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import Line from '/public/icons/horizontal_line.svg';
 import EditPen from '/public/icons/edit_pen.svg';
 import { useLanguage } from '@/store/useLanguage';

src/app/list/[listId]/history/_component/HistoryGraph.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const container = style({
   width: '100%',

src/app/list/[listId]/history/_component/HistoryVersions.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const container = style({
   minHeight: '345px',

src/app/list/[listId]/history/page.css.ts

@@ -1,6 +1,6 @@
 import { style, styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const navContainer = style({
   width: '100%',

src/app/list/create/_components/CreateItem.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const article = style({
   padding: '16px 20px 35px',

src/app/list/create/_components/item/AddItemButton.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const addButton = style([
   fonts.bodyLarge,

src/app/list/create/_components/item/Header.css.ts

@@ -1,6 +1,6 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import { title3, body1 } from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import { title3, body1 } from '@/styles/__font.css';
 
 export const header = style({
   width: '100%',

src/app/list/create/_components/item/ItemLayout.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/theme.css';
-import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/__font.css';
 
 export const itemHeader = style({
   width: '100%',

src/app/list/create/_components/item/ItemLayout.tsx

@@ -5,7 +5,7 @@ import ExpandMoreIcon from '/public/icons/chevron_down_sm.svg';
 import DndIcon from '/public/icons/dnd.svg';
 import DeleteIcon from '/public/icons/trash_bin.svg';
 import Label from '@/components/Label/Label';
-import { vars } from '@/styles/theme.css';
+import { vars } from '@/styles/__theme.css';
 import ImageUploader from './ImageUploader';
 import * as styles from './ItemLayout.css';
 import { useLanguage } from '@/store/useLanguage';