diff --git a/package.json b/package.json index 7f99b54..c6bcd0a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@team-return/design-system", - "version": "1.1.3", + "version": "1.1.4", "repository": { "type": "git", "url": "https://github.com/Team-Return/JOBIS-DESIGN-SYSTEM.git" diff --git a/src/components/checkbox/CheckBox.tsx b/src/components/checkbox/CheckBox.tsx index c5b2c68..1c99bd5 100644 --- a/src/components/checkbox/CheckBox.tsx +++ b/src/components/checkbox/CheckBox.tsx @@ -1,6 +1,7 @@ import React, { Children, ReactNode } from 'react'; import styled from 'styled-components'; import { marginCssType, marginToCss } from '../../utils/distance'; +import { theme } from '../../styles/theme'; interface CheckBoxProps extends marginCssType { //TODO label?: string; @@ -37,16 +38,30 @@ export const CheckBox = ({ ); }; -const _CheckBoxWrapper = styled.div` +const _CheckBoxWrapper = styled.label` display: flex; align-items: center; - gap: 7px; + gap: 8px; + ${theme.font.Body2}; + color: ${theme.color.gray70}; `; const _Wrapper = styled.input` - width: 16px; - height: 16px; + appearance: none; + width: 18px; + height: 18px; ${({ margin }) => marginToCss({ margin })}; accent-color: #0087ff; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'auto')}; + border: 1px solid ${theme.color.gray50}; + border-radius: 4px; + cursor: pointer; + &:checked { + border-color: transparent; + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); + background-size: 100% 100%; + background-position: 50%; + background-repeat: no-repeat; + background-color: ${theme.color.blue}; + } `;