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`.