@snack-uikit/card 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.5.1 (2023-12-06)
+
+
+### Bug Fixes
+
+* **FF-3646:** back z-index ([4b596c5](https://github.com/cloud-ru-tech/snack-uikit/commit/4b596c596f41402d2b662499998b290f9d746561))
+
+
+
+
+
 # 0.5.0 (2023-12-06)
 
 

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

@@ -14,7 +14,6 @@
 }
 
 .card{
-  --snack-ui-card-background-color:var(--sys-neutral-background1-level, #f9f9f9);
   border-radius:var(--radius-card-container, 20px);
   border-width:var(--border-width-card-container, 1px);
   position:relative;
@@ -23,7 +22,7 @@
   margin:0;
   padding:0;
   text-align:left;
-  background-color:var(--snack-ui-card-background-color);
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
   border:0;
   outline-color:transparent;
 }
@@ -37,6 +36,7 @@
   outline-width:var(--border-state-focus-l-border-width, 4px);
   outline-style:var(--border-state-focus-l-border-style, solid);
   outline-color:var(--border-state-focus-l-border-color, );
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
   outline-color:var(--sys-primary-accent-default, #794ed3);
 }
 .card:focus-visible .functionBadgeWrapper{
@@ -80,7 +80,17 @@
   box-shadow:none;
 }
 .card[data-pointer][data-checked] .contentWrapper{
-  background-color:color-mix(in srgb, var(--sys-primary-accent-default, #794ed3), var(--snack-ui-card-background-color) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+  position:relative;
+}
+.card[data-pointer][data-checked] .contentWrapper::before{
+  content:"";
+  position:absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-primary-accent-default, #794ed3);
 }
 .card[data-pointer][data-checked] .check{
   color:var(--sys-primary-on-accent, #fdfbff);
@@ -119,6 +129,7 @@
 }
 
 .content{
+  position:relative;
   display:flex;
   flex-direction:column;
   align-items:flex-start;

package/dist/helperComponents/FunctionBadgeWrapper/styles.module.css

@@ -2,6 +2,7 @@
   padding-top:var(--space-card-gap-m, 8px);
   padding-right:var(--space-card-gap-m, 8px);
   position:absolute;
+  z-index:1;
   top:0;
   right:0;
   box-sizing:border-box;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,15 +32,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.0",
-    "@snack-uikit/droplist": "0.11.0",
-    "@snack-uikit/icon-predefined": "0.3.0",
+    "@snack-uikit/button": "0.14.1",
+    "@snack-uikit/droplist": "0.11.1",
+    "@snack-uikit/icon-predefined": "0.3.1",
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/promo-tag": "0.3.0",
-    "@snack-uikit/truncate-string": "0.3.0",
-    "@snack-uikit/typography": "0.5.0",
-    "@snack-uikit/utils": "3.0.0",
+    "@snack-uikit/promo-tag": "0.3.1",
+    "@snack-uikit/truncate-string": "0.3.1",
+    "@snack-uikit/typography": "0.5.1",
+    "@snack-uikit/utils": "3.1.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "dcd04bf837247b468d8e2bb37f26847ed278f066"
+  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
 }

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

@@ -3,8 +3,6 @@
 
 $sizes:  'm', 'l';
 
-$snack-ui-card-background-color: var(--snack-ui-card-background-color);
-
 .functionBadgeWrapper {
   position: absolute;
   top: 0;
@@ -23,8 +21,6 @@ $snack-ui-card-background-color: var(--snack-ui-card-background-color);
 }
 
 .card {
-  --snack-ui-card-background-color: #{$sys-neutral-background1-level};
-
   @include composite-var($card-container);
   
   position: relative;
@@ -37,7 +33,7 @@ $snack-ui-card-background-color: var(--snack-ui-card-background-color);
 
   text-align: left;
   
-  background-color: $snack-ui-card-background-color;
+  background-color: $sys-neutral-background1-level;
   border: 0;
   outline-color: transparent;
 
@@ -56,6 +52,7 @@ $snack-ui-card-background-color: var(--snack-ui-card-background-color);
   &:focus-visible {
     @include outline-var($container-focused-l);
 
+    background-color: $sys-neutral-background2-level;
     outline-color: $sys-primary-accent-default;
 
     .functionBadgeWrapper {
@@ -110,7 +107,20 @@ $snack-ui-card-background-color: var(--snack-ui-card-background-color);
       }
 
       .contentWrapper {
-        background-color: color-on-background-with-opacity($sys-primary-accent-default, $snack-ui-card-background-color, $opacity-a008);
+        position: relative;
+
+        &::before {
+          content: '';
+
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+
+          opacity: $opacity-a008;
+          background-color: $sys-primary-accent-default;
+        }
       }
 
       .check {
@@ -157,6 +167,8 @@ $snack-ui-card-background-color: var(--snack-ui-card-background-color);
 }
 
 .content {
+  position: relative;
+
   display: flex;
   flex-direction: column;
   align-items: flex-start;

package/src/helperComponents/FunctionBadgeWrapper/styles.module.scss

@@ -4,8 +4,10 @@
   @include composite-var($card-function-badge);
 
   position: absolute;
+  z-index: 1;
   top: 0;
   right: 0;
+  
   box-sizing: border-box;
 }