fix(badge): css variables used as privately (#188)

* fix(badge): css variables used as privately

* refactor(badge): lint fixes

src/components/badge/bl-badge.css

@@ -1,50 +1,50 @@
 :host {
   display: inline-block;
   max-width: 100%;
-
-  --bl-badge-bg-color: var(--bl-color-accent-primary-background);
-  --bl-badge-color: var(--bl-color-primary);
-  --bl-badge-font: var(--bl-font-title-4-medium);
-  --bl-badge-padding-vertical: var(--bl-size-3xs);
-  --bl-badge-padding-horizontal: var(--bl-size-3xs);
-  --bl-badge-margin-icon: var(--bl-size-3xs);
-  --bl-badge-icon-size: var(--bl-size-s);
-  --bl-badge-height: var(--bl-size-xl);
 }
 
 .badge {
+  --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+  --color: var(--bl-badge-color, var(--bl-color-primary));
+  --font: var(--bl-font-title-4-medium);
+  --padding-vertical: var(--bl-size-3xs);
+  --padding-horizontal: var(--bl-size-3xs);
+  --margin-icon: var(--bl-size-3xs);
+  --icon-size: var(--bl-size-s);
+  --height: var(--bl-size-xl);
+
   display: flex;
-  gap: var(--bl-badge-margin-icon);
+  gap: var(--margin-icon);
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
   border: none;
   border-radius: var(--bl-size-4xs);
   margin: 0;
-  padding: var(--bl-badge-padding-vertical) var(--bl-badge-padding-horizontal);
-  background-color: var(--bl-badge-bg-color);
-  color: var(--bl-badge-color, white);
-  font: var(--bl-badge-font);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  background-color: var(--bg-color);
+  color: var(--color, white);
+  font: var(--font);
   font-kerning: none;
-  height: var(--bl-badge-height);
+  height: var(--height);
 }
 
-:host([size='small']) {
-  --bl-badge-font: var(--bl-font-caption-small-text);
-  --bl-badge-height: var(--bl-size-m);
+:host([size='small']) .badge {
+  --font: var(--bl-font-caption-small-text);
+  --height: var(--bl-size-m);
 }
 
-:host([size='large']) {
-  --bl-badge-font: var(--bl-font-title-3-medium);
-  --bl-badge-padding-vertical: var(--bl-size-2xs);
-  --bl-badge-padding-horizontal: var(--bl-size-2xs);
-  --bl-badge-height: var(--bl-size-2xl);
-  --bl-badge-icon-size: var(--bl-size-m);
+:host([size='large']) .badge {
+  --font: var(--bl-font-title-3-medium);
+  --padding-vertical: var(--bl-size-2xs);
+  --padding-horizontal: var(--bl-size-2xs);
+  --height: var(--bl-size-2xl);
+  --icon-size: var(--bl-size-m);
 }
 
 :host ::slotted(bl-icon) {
-  font-size: var(--bl-badge-icon-size);
+  font-size: var(--icon-size);
 }
 
 :host([size='small']) bl-icon {

src/components/badge/bl-badge.stories.mdx

@@ -69,7 +69,7 @@ You can use the color model like this ways;
 * `hex`
 * `variables`
 
-Default background color is `--bl-color-accent-primary-background` and default color is `--bl-color-primary`. 
+Default background color is `--bl-color-accent-primary-background` and default color is `--bl-color-primary`.
 
 <Canvas>
 <Story name="Variants">
@@ -79,16 +79,23 @@ Default background color is `--bl-color-accent-primary-background` and default c
 
 ## Icon Badges
 To boost UX, you might want to add icons to your badge.Our icons are defined to be left of the default slot.
-To be able to use icon with badge, you should give the name of icon to `icon` attribute. 
+To be able to use icon with badge, you should give the name of icon to `icon` attribute.
 
 And you can only add icon for `large` or `medium` badge.
 
-<Canvas>
-    <Story name='Badge With Icons'>
-        {WithIconTemplate.bind({})}
-    </Story>
+<Canvas isColumn>
+  <Story name='Badge With Icons'>
+    {WithIconTemplate.bind({})}
+  </Story>
+  <Story name='Small Badge With Icon' args={{ icon: 'info', size: 'small', content: 'Show Info'}}>
+    {BadgeTemplate.bind({})}
+  </Story>
+  <Story name='Large Badge With Icon' args={{ icon: 'info', size: 'large', content: 'Show Info'}}>
+    {BadgeTemplate.bind({})}
+  </Story>
 </Canvas>
 
+
 ## Sizing Badges
 
 We have 3 sizes of buttons: `large`, `medium`, `small`. Default size is `medium`.