tokenize chip padding, so it can be easily overridden

Author: mpellerin42

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - **Toggle**: tokenize toggle style, so it can be easily overridden
 - **Buttons**: add specific button border tokens for icon buttons 
+- **Chips**: tokenize chip padding, so it can be easily overridden
 
 ### Bug fixes
 

projects/demo/src/app/demo/demo-page/demo-page.component.scss

@@ -32,7 +32,7 @@ pa-demo-page {
 
   dl {
     dt {
-      font-weight: $font-weight-semi-bold;
+      font-weight: $font-weight-regular;
     }
 
     dd {

projects/pastanaga-angular/src/styles/components/_chips.scss

@@ -9,10 +9,11 @@ $chip-max-width-medium: rhythm(56);
   border: $border-chip;
   border-radius: $border-radius-chip;
   display: inline-flex;
+  gap: rhythm(1);
   height: rhythm(4);
   max-width: $chip-max-width-small;
   overflow: hidden;
-  padding: rhythm(0.5) rhythm(1.5);
+  padding: $padding-chip;
 
   &.pa-with-avatar {
     padding-left: rhythm(0.5);
@@ -41,13 +42,8 @@ $chip-max-width-medium: rhythm(56);
     border: $border-chip-disabled;
   }
 
-  pa-avatar,
-  .pa-chip-icon {
-    margin-right: rhythm(1);
-  }
-
   pa-button {
-    margin-left: rhythm(1);
+    display: flex;
   }
 }
 .pa-chip-content-wrapper {

projects/pastanaga-angular/src/styles/theme/_chips.tokens.scss

@@ -14,3 +14,5 @@ $border-chip-disabled: 1px solid transparent !default;
 $border-chip-selected: 1px solid transparent !default;
 
 $font-size-chip: font-size(s) !default;
+
+$padding-chip: rhythm(0.5) rhythm(1.5) !default;