Small improvements

examples/components/tag.html

@@ -50,6 +50,20 @@
           tags
           <button type="button" class="ch-tag-close"></button>
         </span>
+
+        <br /><br />
+
+        <div class="ch-spaceInlineGroup--xs">
+          <span class="ch-tag is-borderless">tags</span>
+
+          <span class="ch-tag ch-tag--info is-borderless">tags</span>
+
+          <span class="ch-tag ch-tag--warning is-borderless">tags</span>
+
+          <span class="ch-tag ch-tag--positive is-borderless">tags</span>
+
+          <span class="ch-tag ch-tag--negative is-borderless">tags</span>
+        </div>
       </div>
     </div>
   </body>

scss/abstracts/icon/mixin-mask-icon.scss

@@ -1,4 +1,4 @@
-@mixin ch-mask-icon ($image, $option: 'complete') {
+@mixin ch-mask-icon ($image, $option: 'complete', $backgroundColor: ch-get-color(text, 2)) {
   mask-image: url(#{$image});
   -webkit-mask-image: url(#{$image});
 
@@ -7,6 +7,6 @@
     -webkit-mask-repeat: no-repeat;
     mask-position: center;
     -webkit-mask-position: center;
-    background-color: #{ch-get-color(text, 2)};
+    background-color: $backgroundColor;
   }
 }

scss/abstracts/icon/variables.scss

@@ -18,3 +18,5 @@ $ch-icon-angle-left:         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov
 
 $ch-icon-nav-expand:         'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMS40LDIuMjIwNDQ2MDVlLTE2IEwxOC42LDIuMjIwNDQ2MDVlLTE2IEMxOS4zNzMxOTg2LDguMDAxMDMxN2UtMTcgMjAsMC42MjY4MDEzNSAyMCwxLjQgTDIwLDEzLjYgQzIwLDE0LjM3MzE5ODYgMTkuMzczMTk4NiwxNSAxOC42LDE1IEwxLjQsMTUgQzAuNjI2ODAxMzUsMTUgNS4zODc3ODczNWUtMTYsMTQuMzczMTk4NiA0LjQ0MDg5MjFlLTE2LDEzLjYgTDAsMS40IEMtOS40Njg5NTI1MmUtMTcsMC42MjY4MDEzNSAwLjYyNjgwMTM1LDEuNDIwMzQyODhlLTE2IDEuNCwyLjIyMDQ0NjA1ZS0xNiBaIE0xOC4zLDEgTDQsMSBMNCwxNCBMMTguMywxNCBDMTguNjg2NTk5MywxNCAxOSwxMy42ODY1OTkzIDE5LDEzLjMgTDE5LDEuNyBDMTksMS4zMTM0MDA2OCAxOC42ODY1OTkzLDEgMTguMywxIFogTTYuNzE4NzUsMTEuMzc1IEw2LjUsMTEuMTU2MjUgQzYuNDE2NjY2MjUsMTEuMDkzNzQ5NyA2LjM3NSwxMS4wMTA0MTcyIDYuMzc1LDEwLjkwNjI1IEM2LjM3NSwxMC44MDIwODI4IDYuNDE2NjY2MjUsMTAuNzA4MzMzNyA2LjUsMTAuNjI1IEw5LjEyNSw4LjAzMTI1IEw0LDguMDMxMjUgTDQsNi45Njg3NSBMOS4xMjUsNi45Njg3NSBMNi41LDQuMzc1IEM2LjQxNjY2NjI1LDQuMjkxNjY2MjUgNi4zNzUsNC4xOTc5MTcxOSA2LjM3NSw0LjA5Mzc1IEM2LjM3NSwzLjk4OTU4MjgxIDYuNDE2NjY2MjUsMy45MDYyNTAzMSA2LjUsMy44NDM3NSBMNi43MTg3NSwzLjYyNSBDNi44MDIwODM3NSwzLjU0MTY2NjI1IDYuODkwNjI0NTMsMy41IDYuOTg0Mzc1LDMuNSBDNy4wNzgxMjU0NywzLjUgNy4xNjY2NjYyNSwzLjU0MTY2NjI1IDcuMjUsMy42MjUgTDEwLjg3NSw3LjI1IEMxMC45NTgzMzM3LDcuMzEyNTAwMzEgMTEsNy4zOTU4MzI4MSAxMSw3LjUgQzExLDcuNjA0MTY3MTkgMTAuOTU4MzMzNyw3LjY4NzQ5OTY5IDEwLjg3NSw3Ljc1IEw3LjI1LDExLjM3NSBDNy4xNjY2NjYyNSwxMS40NTgzMzM3IDcuMDc4MTI1NDcsMTEuNSA2Ljk4NDM3NSwxMS41IEM2Ljg5MDYyNDUzLDExLjUgNi44MDIwODM3NSwxMS40NTgzMzM3IDYuNzE4NzUsMTEuMzc1IFoiPjwvcGF0aD48L3N2Zz4=';
 $ch-icon-nav-retract:        'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMS40LDIuMjIwNDQ2MDVlLTE2IEwxOC42LDIuMjIwNDQ2MDVlLTE2IEMxOS4zNzMxOTg2LDguMDAxMDMxN2UtMTcgMjAsMC42MjY4MDEzNSAyMCwxLjQgTDIwLDEzLjYgQzIwLDE0LjM3MzE5ODYgMTkuMzczMTk4NiwxNSAxOC42LDE1IEwxLjQsMTUgQzAuNjI2ODAxMzUsMTUgNS4zODc3ODczNWUtMTYsMTQuMzczMTk4NiA0LjQ0MDg5MjFlLTE2LDEzLjYgTDAsMS40IEMtOS40Njg5NTI1MmUtMTcsMC42MjY4MDEzNSAwLjYyNjgwMTM1LDEuNDIwMzQyODhlLTE2IDEuNCwyLjIyMDQ0NjA1ZS0xNiBaIE0xOC4zLDEgTDksMSBMOSwxNCBMMTguMywxNCBDMTguNjg2NTk5MywxNCAxOSwxMy42ODY1OTkzIDE5LDEzLjMgTDE5LDEuNyBDMTksMS4zMTM0MDA2OCAxOC42ODY1OTkzLDEgMTguMywxIFogTTYuMjgxMjUsMTEuMzc1IEw2LjUsMTEuMTU2MjUgQzYuNTgzMzMzNzUsMTEuMDkzNzQ5NyA2LjYyNSwxMS4wMTA0MTcyIDYuNjI1LDEwLjkwNjI1IEM2LjYyNSwxMC44MDIwODI4IDYuNTgzMzMzNzUsMTAuNzA4MzMzNyA2LjUsMTAuNjI1IEwzLjg3NSw4LjAzMTI1IEw5LDguMDMxMjUgTDksNi45Njg3NSBMMy44NzUsNi45Njg3NSBMNi41LDQuMzc1IEM2LjU4MzMzMzc1LDQuMjkxNjY2MjUgNi42MjUsNC4xOTc5MTcxOSA2LjYyNSw0LjA5Mzc1IEM2LjYyNSwzLjk4OTU4MjgxIDYuNTgzMzMzNzUsMy45MDYyNTAzMSA2LjUsMy44NDM3NSBMNi4yODEyNSwzLjYyNSBDNi4xOTc5MTYyNSwzLjU0MTY2NjI1IDYuMTA5Mzc1NDcsMy41IDYuMDE1NjI1LDMuNSBDNS45MjE4NzQ1MywzLjUgNS44MzMzMzM3NSwzLjU0MTY2NjI1IDUuNzUsMy42MjUgTDIuMTI1LDcuMjUgQzIuMDQxNjY2MjUsNy4zMTI1MDAzMSAyLDcuMzk1ODMyODEgMiw3LjUgQzIsNy42MDQxNjcxOSAyLjA0MTY2NjI1LDcuNjg3NDk5NjkgMi4xMjUsNy43NSBMNS43NSwxMS4zNzUgQzUuODMzMzMzNzUsMTEuNDU4MzMzNyA1LjkyMTg3NDUzLDExLjUgNi4wMTU2MjUsMTEuNSBDNi4xMDkzNzU0NywxMS41IDYuMTk3OTE2MjUsMTEuNDU4MzMzNyA2LjI4MTI1LDExLjM3NSBaIj48L3BhdGg+PC9zdmc+';
+
+$ch-icon-check:              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDEzLjUwNSA5MS45NTFMMTMzLjQ5IDM3MS45NjZsLTk4Ljk5NS05OC45OTVjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NzEgMEw2LjIxMSAyODQuMjg0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsMTE4Ljc5NCAxMTguNzk0YzQuNjg2IDQuNjg2IDEyLjI4NCA0LjY4NiAxNi45NzEgMGwyOTkuODEzLTI5OS44MTNjNC42ODYtNC42ODYgNC42ODYtMTIuMjg0IDAtMTYuOTcxbC0xMS4zMTQtMTEuMzE0Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcgMHoiLz48L3N2Zz4= '

scss/components/checkbox/checkbox.scss

@@ -31,9 +31,7 @@
 
     + label:before,
     + label:after {
-      $empty: '';
-
-      content: $empty;
+      content: '';
     }
 
     // 2.1. Wrapper
@@ -71,13 +69,43 @@
       width: $size;
       height: $size;
     }
-
+  }
+
+  // 3. Checkbox
+
+  @at-root .ch-checkbox > input[type="checkbox"] {
+    &:checked:not([readonly]) + label:before {
+      background-color: ch-get-color(primary);
+      border-color: ch-get-color(primary);
+    }
+
     &:checked + label:after {
-      background: #{ch-get-color(primary)};
+      @include ch-mask-icon($ch-icon-check 'only-mask', $option: 'complete', $backgroundColor: ch-get-color(neutral, 1));
+    }
+
+    &[readonly] + label:after {
+      background-color: ch-get-color(text, 1);
     }
   }
 
-  // 3. Label
+  // 4. Radio
+
+  @at-root .ch-radio > input[type="radio"] {
+    + label:before,
+    &:checked + label:after {
+      border-radius: ch-get-border-radius(circle);
+    }
+
+    &:checked + label:before {
+      border-color: ch-get-color(primary, focus);
+    }
+
+    &:checked + label:after {
+      background: ch-get-color(primary);
+    }
+  }
+
+  // 5. Label
 
   > input[type="checkbox"] + label,
   > input[type="radio"] + label {
@@ -92,7 +120,7 @@
     }
   }
 
-  // 4. Disabled and readonly states
+  // 6. Disabled and readonly states
 
   > input {
     &:disabled,
@@ -137,7 +165,7 @@
     }
   }
 
-  // 5. Negative variation
+  // 7. Negative variation
 
   &--negative {
     color: #{ch-get-color(negative)};
@@ -163,13 +191,4 @@
       }
     }
   }
-
-  // 6. Radio
-
-  @at-root .ch-radio > input[type="radio"] {
-    + label:before,
-    &:checked + label:after {
-      border-radius: ch-get-border-radius(circle);
-    }
-  }
 }

scss/components/table/table.scss

@@ -11,6 +11,7 @@
   &-header,
   thead {
     display: table-header-group;
+    background-color: ch-get-color(neutral, 2);
   }
 
   // 3. Content
@@ -81,6 +82,11 @@
     vertical-align: middle;
   }
 
+  th {
+    @include ch-space-inset(default, s);
+    font-weight: ch-get-text-weight(semibold);
+  }
+
   // 5.1. Leading, actions and compact variation
 
   .ch-table-cell--leading,

scss/components/tag/tag.scss

@@ -5,6 +5,7 @@
 
   @include ch-text-caption;
   @include ch-truncate;
+  @include ch-border-radius(circle);
 
   display: inline-block;
   position: relative;
@@ -16,6 +17,8 @@
   vertical-align: middle;
   padding-right: ch-get-space(s);
   padding-left: ch-get-space(s);
+  background-color: ch-get-color(neutral, 2);
+  box-shadow: 0 0 0px 1px currentColor;
 
   // 2. Close button
 
@@ -47,51 +50,30 @@
     }
   }
 
-  // 3. Background
-
-  &,
-  &:after {
-    @include ch-border-radius(circle);
-  }
-
-  &:after {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: #{ch-get-color(neutral, 2)};
+  &.is-borderless {
+    box-shadow: none;
   }
 
   // 4. Support variations
 
   @each $variation in (info, warning, positive, negative) {
     &--#{$variation} {
-      color: ch-get-color($variation);
+      color: if($variation != 'warning', ch-get-color($variation), ch-get-color($variation, focus));
+      background-image: linear-gradient(90deg, rgba(#fff, 0.85), rgba(#fff, 0.85));
+      background-color: ch-get-color($variation);
 
       // 4.1. Close button
 
       > .ch-tag-close {
-        background-color: ch-get-color($variation);
-    
+        background-color: if($variation != 'warning', ch-get-color($variation), ch-get-color($variation, focus));
+
         &:hover:focus,
         &:hover,
         &:focus,
         &:active {
-          background-color: ch-get-color($variation, focus);
+          background-color: if($variation != 'warning', ch-get-color($variation, focus), ch-get-color($variation, active));
         }
       }
-
-      // 4.2. Background
-
-      &:after {
-        opacity: 0.15;
-        background: #{ch-get-color($variation)};
-      }
     }
   }
 }