@snack-uikit/tag 0.8.0 → 0.8.1-preview-da21d728.0

package/dist/components/Tag/styles.module.css

@@ -82,9 +82,6 @@
 .tag[data-appearance=neutral]{
   background-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
-.tag[data-appearance=neutral][data-removable=false]{
-  background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
-}
 .tag[data-appearance=neutral] .label{
   color:var(--sys-neutral-text-support, #656771);
 }
@@ -103,9 +100,6 @@
 .tag[data-appearance=primary]{
   background-color:var(--sys-primary-decor-default, #ebdefd);
 }
-.tag[data-appearance=primary][data-removable=false]{
-  background-color:var(--sys-primary-decor-disabled, #f0e7fd);
-}
 .tag[data-appearance=primary] .label{
   color:var(--sys-primary-text-support, #5b4796);
 }
@@ -124,9 +118,6 @@
 .tag[data-appearance=red]{
   background-color:var(--sys-red-decor-default, #fdd6cd);
 }
-.tag[data-appearance=red][data-removable=false]{
-  background-color:var(--sys-red-decor-disabled, #fce2dc);
-}
 .tag[data-appearance=red] .label{
   color:var(--sys-red-text-support, #ab423e);
 }
@@ -145,9 +136,6 @@
 .tag[data-appearance=orange]{
   background-color:var(--sys-orange-decor-default, #fed8b8);
 }
-.tag[data-appearance=orange][data-removable=false]{
-  background-color:var(--sys-orange-decor-disabled, #ffe4c8);
-}
 .tag[data-appearance=orange] .label{
   color:var(--sys-orange-text-support, #c06735);
 }
@@ -166,9 +154,6 @@
 .tag[data-appearance=yellow]{
   background-color:var(--sys-yellow-decor-default, #f0dfb1);
 }
-.tag[data-appearance=yellow][data-removable=false]{
-  background-color:var(--sys-yellow-decor-disabled, #f7ebc7);
-}
 .tag[data-appearance=yellow] .label{
   color:var(--sys-yellow-text-support, #a57b0e);
 }
@@ -187,9 +172,6 @@
 .tag[data-appearance=green]{
   background-color:var(--sys-green-decor-default, #d2ead0);
 }
-.tag[data-appearance=green][data-removable=false]{
-  background-color:var(--sys-green-decor-disabled, #e0f0de);
-}
 .tag[data-appearance=green] .label{
   color:var(--sys-green-text-support, #568a56);
 }
@@ -208,9 +190,6 @@
 .tag[data-appearance=blue]{
   background-color:var(--sys-blue-decor-default, #d6e2f4);
 }
-.tag[data-appearance=blue][data-removable=false]{
-  background-color:var(--sys-blue-decor-disabled, #e3edfa);
-}
 .tag[data-appearance=blue] .label{
   color:var(--sys-blue-text-support, #4975a9);
 }
@@ -229,9 +208,6 @@
 .tag[data-appearance=violet]{
   background-color:var(--sys-violet-decor-default, #efd9ef);
 }
-.tag[data-appearance=violet][data-removable=false]{
-  background-color:var(--sys-violet-decor-disabled, #f8e6f7);
-}
 .tag[data-appearance=violet] .label{
   color:var(--sys-violet-text-support, #8c5d93);
 }
@@ -250,9 +226,6 @@
 .tag[data-appearance=pink]{
   background-color:var(--sys-pink-decor-default, #f5d9e1);
 }
-.tag[data-appearance=pink][data-removable=false]{
-  background-color:var(--sys-pink-decor-disabled, #fbe6ec);
-}
 .tag[data-appearance=pink] .label{
   color:var(--sys-pink-text-support, #aa597d);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.8.0",
+  "version": "0.8.1-preview-da21d728.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,5 +38,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "ee199e2cdca1d24db821533512263dfe06365159"
+  "gitHead": "9451c0c01e3175ef35d07864f3189c690f73c268"
 }

package/src/components/Tag/styles.module.scss

@@ -4,7 +4,7 @@
 $sizes: 'xs', 's';
 $label-typography: (
   'xs': $sans-label-s,
-  's': $sans-label-m
+  's': $sans-label-m,
 );
 $appearances: (
   'neutral': (
@@ -124,10 +124,10 @@ $appearances: (
   }
 
   @each $size in $sizes {
-    &[data-size=#{$size}] {
+    &[data-size='#{$size}'] {
       @include composite-var($tag, 'container', $size, 'label-only');
 
-      &[data-removable="true"] {
+      &[data-removable='true'] {
         @include composite-var($tag, 'container', $size, 'button-after');
       }
 
@@ -142,13 +142,9 @@ $appearances: (
   }
 
   @each $appearanceKey, $appearance in $appearances {
-    &[data-appearance=#{$appearanceKey}] {
+    &[data-appearance='#{$appearanceKey}'] {
       background-color: simple-var($appearance, 'container');
 
-      &[data-removable="false"] {
-        background-color: simple-var($appearance, 'container-disabled');
-      }
-
       .label {
         color: simple-var($appearance, 'label');
       }
@@ -156,11 +152,14 @@ $appearances: (
       .tagButton {
         color: simple-var($appearance, 'icon');
 
-        &:focus, &:hover, &:active {
+        &:focus,
+        &:hover,
+        &:active {
           color: simple-var($appearance, 'icon-active');
         }
 
-        &:focus, &:hover {
+        &:focus,
+        &:hover {
           background-color: simple-var($appearance, 'button-hovered');
         }