style(ui-kit): Radio 컴포넌트의 색을 green50으로 변경 (#30)

Lubycon · Dec 29, 2020 · e3df238 · e3df238
1 parent 4d088b1
commit e3df238
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 72 deletions.
diff --git a/ui-kit/src/components/Radio/index.tsx b/ui-kit/src/components/Radio/index.tsx
@@ -24,20 +24,18 @@ const Radio = (
       })}
       style={style}
     >
-      <input
-        className="lubycon-radio--input"
-        ref={ref}
-        type="radio"
-        disabled={disabled}
-        {...props}
-        id={id}
-      />
-      <div className="lubycon-radio--indicator"></div>
-      {label ? (
-        <Text as="label" htmlFor={id}>
-          {label}
-        </Text>
-      ) : null}
+      <label htmlFor={id} className="lubycon-radio--label">
+        <input
+          className="lubycon-radio--input"
+          ref={ref}
+          type="radio"
+          disabled={disabled}
+          {...props}
+          id={id}
+        />
+        <div className="lubycon-radio--indicator"></div>
+        {label ? <Text>{label}</Text> : null}
+      </label>
     </span>
   );
 };

diff --git a/ui-kit/src/sass/components/_Checkbox.scss b/ui-kit/src/sass/components/_Checkbox.scss
@@ -7,15 +7,16 @@ $box-size: 16px;
 
   &:hover:not(&--disabled) {
     .lubycon-checkbox--control {
-      border-color: map-get($colors, 'green50');
+      border-color: get-color('green50');
     }
   }
 
   &--input {
     display: grid;
     grid-template-areas: 'checkbox';
 
-    > input, > span {
+    > input,
+    > span {
       grid-area: checkbox;
     }
     > input {
@@ -36,21 +37,21 @@ $box-size: 16px;
     height: $box-size;
     border-radius: 2px;
     box-sizing: border-box;
-    border: 1px solid map-get($colors, 'gray40');
+    border: 1px solid get-color('gray40');
     margin-right: 8px;
 
     > svg {
       transition: transform 0.1s;
       transform: scale(0);
     }
   }
-  
+
   &--input input:checked + &--control svg {
     transform: scale(1);
   }
   &--input input:checked + &--control {
-    background-color: map-get($colors, 'green50');
-    border-color: map-get($colors, 'green50');
+    background-color: get-color('green50');
+    border-color: get-color('green50');
   }
 
   &--display-inline {
@@ -59,15 +60,15 @@ $box-size: 16px;
 
   &--disabled {
     cursor: not-allowed;
-    color: map-get($colors, 'gray50');
+    color: get-color('gray50');
 
     input {
       cursor: not-allowed;
     }
 
     .lubycon-checkbox--input > input:checked + .lubycon-checkbox--control {
-      border-color: map-get($colors, 'gray40');
-      background-color: map-get($colors, 'gray40'); 
+      border-color: get-color('gray40');
+      background-color: get-color('gray40');
     }
   }
 }
diff --git a/ui-kit/src/sass/components/_Radio.scss b/ui-kit/src/sass/components/_Radio.scss
@@ -1,7 +1,3 @@
-// 추후 color로 변경
-$gray: #b5b6b9;
-$blue: #437cea;
-
 $indicator-size: 16px;
 
 .lubycon-radio {
@@ -19,7 +15,7 @@ $indicator-size: 16px;
     position: relative;
     width: $indicator-size;
     height: $indicator-size;
-    border: 1px solid $gray;
+    border: 1px solid get-color('gray40');
     margin-right: 10px;
     border-radius: 50%;
     overflow: hidden;
@@ -37,13 +33,18 @@ $indicator-size: 16px;
     }
   }
 
+  .lubycon-radio--label {
+    display: flex;
+    align-items: center;
+  }
+
   .lubycon-radio--input {
     position: absolute;
     visibility: hidden;
     appearance: none;
     &:checked + .lubycon-radio--indicator {
-      border-color: $blue;
-      background-color: $blue;
+      border-color: get-color('green50');
+      background-color: get-color('green50');
       &::before {
         transform: translate(-50%, -50%) scale(1);
       }
@@ -52,7 +53,7 @@ $indicator-size: 16px;
 
   &:hover:not(&--disabled) {
     .lubycon-radio--indicator {
-      border-color: $blue;
+      border-color: get-color('green50');
     }
   }
 
@@ -63,12 +64,12 @@ $indicator-size: 16px;
   &--disabled {
     cursor: not-allowed;
     label {
-      color: $gray;
+      color: get-color('gray40');
       cursor: not-allowed;
     }
     .lubycon-radio--input:checked + .lubycon-radio--indicator {
-      border-color: $gray;
-      background-color: $gray;
+      border-color: get-color('gray40');
+      background-color: get-color('gray40');
     }
   }
 }
diff --git a/ui-kit/src/sass/components/_Switch.scss b/ui-kit/src/sass/components/_Switch.scss
@@ -4,18 +4,18 @@
   align-items: center;
   position: relative;
   cursor: pointer;
-  
+
   &--input {
     display: none;
   }
-  
+
   &--slider {
     position: relative;
     width: 40px;
     height: 21px;
     margin-right: 8px;
     border-radius: 31.5px;
-    background-color: map-get($colors, 'gray40');
+    background-color: get-color('gray40');
     transition: background-color 0.3s;
 
     &::before {
@@ -24,7 +24,7 @@
       width: 15px;
       height: 15px;
       left: 3.31px;
-	    top: 50%;
+      top: 50%;
       transform: translateY(-50%);
       background-color: #ffffff;
       border-radius: 50%;
@@ -33,7 +33,7 @@
   }
 
   &--input:checked + &--slider {
-    background-color: map-get($colors, 'green50');
+    background-color: get-color('green50');
   }
 
   &--input:checked + &--slider::before {

diff --git a/ui-kit/src/sass/utils/_colors.scss b/ui-kit/src/sass/utils/_colors.scss
@@ -1,44 +1,38 @@
 $colors: (
-/*
+  /*
   Semantic Color
   Positive
- */
-  'green50': #13BC4C,
-  'green40': #78CF81,
-  'green60': #0F933C,
-/*
+ */ 'green50': #13bc4c,
+  'green40': #78cf81,
+  'green60': #0f933c,
+  /*
   Informative
- */
-  'blue50': #135CE9,
-  'blue40': #87ADF5,
-  'blue60': #013CAD,
-/*
+ */ 'blue50': #135ce9,
+  'blue40': #87adf5,
+  'blue60': #013cad,
+  /*
   Negative
- */
-  'red50': #CB121C,
-  'red40': #F29CA1,
-  'red60': #9B0B13,
-/*
+ */ 'red50': #cb121c,
+  'red40': #f29ca1,
+  'red60': #9b0b13,
+  /*
   Notice
- */
-  'yellow50': #F0CB08,
-  'yellow40': #F9E681,
-  'yellow60': #AA8F00,
-
-/*
+ */ 'yellow50': #f0cb08,
+  'yellow40': #f9e681,
+  'yellow60': #aa8f00,
+  /*
   Gray Scale
   100-10 (단위 10)
- */
-  'gray100': #1B1B1C,
-  'gray90': #2A2A2C,
-  'gray80': #4C4D53,
-  'gray70': #76777D,
-  'gray60': #8E9095,
-  'gray50': #B5B6B9,
-  'gray40': #D0D1D3,
-  'gray30': #E3E4E5,
-  'gray20': #F3F4F5,
-  'gray10': #FCFCFD,
+ */ 'gray100': #1b1b1c,
+  'gray90': #2a2a2c,
+  'gray80': #4c4d53,
+  'gray70': #76777d,
+  'gray60': #8e9095,
+  'gray50': #b5b6b9,
+  'gray40': #d0d1d3,
+  'gray30': #e3e4e5,
+  'gray20': #f3f4f5,
+  'gray10': #fcfcfd
 );
 
 @mixin color($name, $value) {
@@ -50,3 +44,7 @@ $colors: (
 @each $name, $value in $colors {
   @include color($name, $value);
 }
+
+@function get-color($name) {
+  @return map-get($colors, $name);
+}