<Typography variant="SB_13">test</Typography>
export const COLORS = {
Black: {
100: "#6B6B6B",
200: "#525252",
300: "#373737",
400: "#1F1F1F",
500: "#040404",
},
Grayscale: {
50: "#000000",
100: "#DEDEDE",
200: "#C4C4C4",
300: "#ABABAB",
400: "#999999",
500: "#808080",
},
PrimaryBlue: {
50: "#F5FAFF",
100: "#E9F4FF",
200: "#4DA9FF",
300: "#1B92FF",
400: "#242945",
},
SecondaryYellow: { 100: "#FFC149" },
SecondaryRed: { 100: "#FFEEF0", 200: "#FF4F64" },
};
반응형 작업 추가 방법
<Box
display={"flex"}
px={["24px", "24px", "120px"]}
height={["54px", "54px", "88px"]}
alignItems={"center"}
justifyContent={"space-between"}
>
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down("tablet"), {
noSsr: true,
});
위처럼 쓰면 theme에 적용된 tablet size 보다 작아 지는 순간 isSmall의 값이 false 에서 true로 변경됨
다크모드 이건 흠 …