started updating styling

Author: Yuraima Estevez

polaris-react/src/components/Tag/Tag.scss

@@ -9,8 +9,10 @@ $button-size: 20px;
   align-items: center;
   min-height: 28px;
   padding: 0 var(--p-space-2);
+  // TODO which secondary bg color? new or existing?
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-2);
+  // TODO need secondary-text-on-fill color token
   color: var(--p-color-text);
 
   &.disabled {
@@ -35,7 +37,10 @@ $button-size: 20px;
     line-height: var(--p-font-line-height-2);
 
     &:hover {
+      // TODO need subdued-fill token
       background: var(--p-color-bg-strong-hover);
+      // TODO need secondary-border-l2
+      // border-color: var(--p-color-secondary-border-l2)
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -48,7 +53,10 @@ $button-size: 20px;
     }
 
     &:active {
+      // TODO need secondary-fill-l2
       background: var(--p-color-bg-strong-hover);
+      // TODO need secondary-border-l2
+      // border-color: var(--p-secondary-borderl2);
     }
 
     &:disabled {
@@ -78,16 +86,16 @@ $button-size: 20px;
 }
 
 .TagText {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  font-size: 13px;
   line-height: var(--p-font-line-height-2);
   min-height: $height;
   padding: var(--p-space-1) 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
+  // TODO need font-weight 450 token
 
+  // TODO check if we need sm viewport up styling
   @media #{$p-breakpoints-sm-up} {
     font-size: var(--p-font-size-75);
     padding: var(--p-space-05) 0;
@@ -102,7 +110,7 @@ $button-size: 20px;
   height: $button-size;
   width: $button-size;
   margin: 0 var(--p-space-1);
-  border-radius: var(--p-border-radius-full);
+  border-radius: var(--p-border-radius-2);
 
   svg {
     fill: var(--p-color-icon);

polaris-react/src/components/Tag/Tag.tsx

@@ -81,6 +81,7 @@ export function Tag({
       onMouseUp={handleMouseUpByBlurring}
       disabled={disabled}
     >
+      {/* TODO update to new x icon */}
       <Icon source={CancelSmallMinor} />
     </button>
   ) : null;