bage 작업

packages/chakra-ui-sass/src/badge/_badge-extends.scss

@@ -0,0 +1,13 @@
+%badge {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 14px;
+  min-height: 16px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-sm);
+  margin: 0 5px;
+}
+%badge:first-of-type {
+  margin-left: 0;
+}

packages/chakra-ui-sass/src/badge/_badge-helper.scss

@@ -0,0 +1,22 @@
+@import './badge-variables';
+@import './badge-extends';
+
+@each $badge-color in $badge-colors {
+  .badge-#{$badge-color} {
+    background-color: var(--color-#{$badge-color}-#{map-get($badge-solid, bg-color)});
+    color: var(--color-#{map-get($badge-solid, font-color)});
+    @extend %badge;
+  }
+
+  .badge-outline-#{$badge-color} {
+    border: 1px solid var(--color-#{$badge-color}-#{map-get($badge-outline, border-color)});
+    color: var(--color-#{$badge-color}-#{map-get($badge-outline, font-color)});
+    @extend %badge;
+  }
+
+  .badge-subtle-#{$badge-color} {
+    background-color: var(--color-#{$badge-color}-#{map-get($badge-subtle, bg-color)});
+    color: var(--color-#{$badge-color}-#{map-get($badge-subtle, font-color)});
+    @extend %badge;
+  }
+}

packages/chakra-ui-sass/src/badge/_badge-variables.scss

@@ -0,0 +1,16 @@
+/** badge 관련 변수 **/
+$badge-colors: gray, blue, teal, green, red, purple, pink, orange;
+$badge-outline: (
+  border-color: 500,
+  font-color: 600
+);
+
+$badge-subtle: (
+  bg-color: 100,
+  font-color: 800
+);
+
+$badge-solid: (
+  bg-color: 500,
+  font-color: 'white'
+);

packages/chakra-ui-sass/src/badge/badge.stories.tsx

@@ -0,0 +1,48 @@
+import styles from '../foundation/stories/storybook.module.scss';
+
+export default {
+  title: 'chakra-ui-sass/Bage'
+};
+
+const badgeKey = ['gray', 'blue', 'teal', 'green', 'red', 'purple', 'pink', 'orange'];
+
+export const BadgeType = () => {
+  return (
+    <div className={`${styles.storybook_content}`}>
+      <h2 className="font-lg-lg">Badge</h2>
+      <div>
+        {badgeKey.map((color, index) => {
+          return (
+            <span className={`badge-${color}`} key={index}>
+              BADGE
+            </span>
+          );
+        })}
+      </div>
+
+      <h3 className="font-sm-lg">Subtle</h3>
+      <div>
+        {badgeKey.map((color, index) => {
+          return (
+            <span className={`badge-subtle-${color}`} key={index}>
+              BADGE
+            </span>
+          );
+        })}
+      </div>
+
+      <h3 className="font-sm-lg">Outline</h3>
+      <div>
+        {badgeKey.map((color, index) => {
+          return (
+            <span className={`badge-outline-${color}`} key={index}>
+              BADGE
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+BadgeType.storyName = 'Badge';

packages/chakra-ui-sass/src/foundation/root/_color-root.scss

@@ -1,8 +1,8 @@
 @import '../variables/color-variables';
 
 :root {
-  --color-black: $black;
-  --color-white: $white;
+  --color-black: #{$black};
+  --color-white: #{$white};
 
   @each $key, $value in $color-black {
     --color-black-#{$key}: #{$value};

packages/chakra-ui-sass/src/style/global.scss

@@ -1,2 +1,3 @@
 @import '../foundation/root/root';
 @import '../foundation/helper/helper';
+@import '../badge/badge-helper';