fix(tag): light tag color (#542)

juntossomosmais · Aug 22, 2024 · c098357 · c098357
1 parent 57e3b51
commit c098357
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/packages/core/src/components/tag/tag.scss b/packages/core/src/components/tag/tag.scss
@@ -2,20 +2,21 @@
 
 :host {
   --icon-size: var(--spacing-small);
-  --atom-tag-height: 10px;
+  --atom-tag-height: var(--spacing-medium);
   line-height: 0;
 }
 
 .atom-tag {
   align-items: center;
-  border: solid 1px transparent;
+  box-sizing: border-box;
   color: var(--color-neutral-white);
   display: flex;
   font: var(--text-caption-focused);
+  font-weight: var(--font-weight-bold);
   height: var(--atom-tag-height);
   justify-content: center;
   letter-spacing: var(--text-caption-focused-letter);
-  padding: var(--spacing-xxsmall) var(--spacing-xsmall);
+  padding: 0 var(--spacing-xsmall);
   width: fit-content;
 
   &[color='warning'] {
@@ -42,7 +43,7 @@
   &[color='light'] {
     background-color: var(--color-neutral-light-5);
     border: 1px solid var(--color-neutral-light-3);
-    color: var(--color-neutral-regular);
+    color: var(--color-neutral-light-1);
   }
 }
 

diff --git a/packages/core/src/components/tag/tag.spec.ts b/packages/core/src/components/tag/tag.spec.ts
@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing'
 
 import { IconProps } from '../../icons'
+
 import { AtomTag } from './tag'
 
 const setup = async (
@@ -39,17 +40,20 @@ describe('atom-tag', () => {
     const colorExists = atomTag?.shadowRoot?.innerHTML
       .split(' ')
       .find((el) => el === `color="${mockedColor}"`)
+
     expect(colorExists).toBeTruthy()
     const atomTagLabel = page.root?.innerHTML
+
     expect(atomTag?.nodeName.toLocaleLowerCase()).toBe('atom-tag')
     expect(atomTagLabel).toBe(tagLabel)
   })
 
   it('should render atom-tag with icon', async () => {
     const mockedIcon = 'heart'
     const pageRoot = await setup('success', mockedIcon)
+
     expect(pageRoot?.root?.shadowRoot)
-      .toEqualHtml(`<ion-badge class="atom-tag" color="success">
+      .toEqualHtml(`<ion-badge class="atom-tag" color="success" part="tag">
     <atom-icon class="atom-icon" icon=${mockedIcon}></atom-icon>
     <slot></slot>
   </ion-badge>`)
@@ -71,6 +75,7 @@ describe('atom-tag', () => {
     const customColorsExists = page?.root?.shadowRoot?.innerHTML.includes(
       `style="${customColors}"`
     )
+
     expect(customColorsExists).toBeTruthy()
   })
 })
diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, Prop, h } from '@stencil/core'
+
 import { IconProps } from '../../icons'
 
 @Component({
@@ -31,6 +32,7 @@ export class AtomTag {
             backgroundColor: this.getColor(this.customBackgroundColor),
             color: this.getColor(this.customTextColor),
           }}
+          part='tag'
           class='atom-tag'
         >
           {this.icon && (