@snack-uikit/alert 0.13.2 → 0.13.3-preview-4ab4d581.0

package/dist/components/Alert/Alert.js

@@ -27,5 +27,5 @@ export function Alert(_a) {
     var { icon = true, title, truncate, link, description, onClose, appearance = APPEARANCE.Neutral, className, actions, outline, size = 'm' } = _a, rest = __rest(_a, ["icon", "title", "truncate", "link", "description", "onClose", "appearance", "className", "actions", "outline", "size"]);
     return (_jsxs("div", Object.assign({ className: cn(styles.alert, {
             [styles.alertOutline]: outline,
-        }, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-size": size, children: [_jsxs("div", { className: styles.body, "data-size": size, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', "data-size": size, children: getIcon(appearance, size === 's' ? 16 : 24) })), _jsxs("div", { className: styles.contentLayout, children: [title && (_jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1, className: styles.title, "data-test-id": 'alert__title', "data-size": size })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, "data-size": size, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({}, link, { appearance: APPEARANCE_TO_LINK_COLOR_MAP[appearance], textMode: 'default', size: size, "data-test-id": 'alert__link' })) }))] }), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP[appearance], icon: _jsx(CrossSVG, {}), variant: 'simple', dataTestId: 'alert__close-button' }))] }), actions && (_jsxs("div", { className: styles.footer, "data-size": size, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size })))] }))] })));
+        }, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-size": size, children: [_jsxs("div", { className: styles.body, "data-size": size, children: [icon && (_jsx("div", { className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon', "data-size": size, children: getIcon(appearance, size === 's' ? 16 : 24) })), _jsxs("div", { className: styles.contentLayout, "data-size": size, children: [title && (_jsx(TruncateString, { text: title, maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.title) !== null && _b !== void 0 ? _b : 1, className: styles.title, "data-test-id": 'alert__title', "data-size": size })), _jsx("span", { "data-test-id": 'alert__description', className: styles.description, "data-size": size, children: description }), link && (_jsx("span", { children: _jsx(Link, Object.assign({}, link, { appearance: APPEARANCE_TO_LINK_COLOR_MAP[appearance], textMode: 'default', size: size, "data-test-id": 'alert__link' })) }))] }), onClose && (_jsx(AlertButton, { onClick: onClose, appearance: APPEARANCE_TO_COLOR_MAP[appearance], icon: _jsx(CrossSVG, {}), variant: 'simple', dataTestId: 'alert__close-button' }))] }), actions && (_jsxs("div", { className: styles.footer, "data-size": size, children: [actions.primary && (_jsx(AlertButton, Object.assign({}, actions.primary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (_jsx(AlertButton, Object.assign({}, actions.secondary, { appearance: APPEARANCE_TO_COLOR_MAP[appearance], variant: 'simple', size: size })))] }))] })));
 }

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

@@ -146,6 +146,14 @@
   color:var(--sys-neutral-text-main, #41424e);
 }
 .title[data-size=s]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.title[data-size=m]{
   font-family:var(--sans-title-s-font-family, SB Sans Interface);
   font-weight:var(--sans-title-s-font-weight, Semibold);
   line-height:var(--sans-title-s-line-height, 20px);
@@ -153,14 +161,6 @@
   letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
   paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
 }
-.title[data-size=m]{
-  font-family:var(--sans-title-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-title-m-font-weight, Semibold);
-  line-height:var(--sans-title-m-line-height, 24px);
-  font-size:var(--sans-title-m-font-size, 16px);
-  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
-  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
-}
 
 .description{
   color:var(--sys-neutral-text-support, #6d707f);

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

@@ -9,7 +9,7 @@
   box-sizing:border-box;
 }
 .alertTop[data-color=invert-neutral]{
-  background-color:var(--sys-invert-neutral-background, #2a2a35);
+  background-color:var(--sys-invert-neutral-background, #30303c);
 }
 .alertTop[data-color=primary]{
   background-color:var(--sys-primary-accent-default, #794ed3);
@@ -42,7 +42,7 @@
   color:var(--sys-red-on-accent, #fffbf9);
 }
 .icon[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #593e20);
+  color:var(--sys-yellow-on-accent, #583f1f);
 }
 .icon[data-color=green]{
   color:var(--sys-green-on-accent, #fcfefa);
@@ -73,7 +73,7 @@
   color:var(--sys-red-on-accent, #fffbf9);
 }
 .title[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #593e20);
+  color:var(--sys-yellow-on-accent, #583f1f);
 }
 .title[data-color=green]{
   color:var(--sys-green-on-accent, #fcfefa);
@@ -101,7 +101,7 @@
   color:var(--sys-red-on-accent, #fffbf9);
 }
 .description[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #593e20);
+  color:var(--sys-yellow-on-accent, #583f1f);
 }
 .description[data-color=green]{
   color:var(--sys-green-on-accent, #fcfefa);

package/dist/helperComponents/styles.module.css

@@ -65,7 +65,7 @@
   border-radius:var(--radius-alert-button, 8px);
 }
 .alertButton[data-variant=simple]:focus-visible{
-  outline-color:var(--sys-available-complementary, #15151b);
+  outline-color:var(--sys-available-complementary, #1c1c24);
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 .alertButton[data-variant=simple][data-appearance=neutral]{
@@ -161,7 +161,7 @@
   color:var(--sys-red-on-accent, #fffbf9);
 }
 .alertButton[data-variant=tonal][data-appearance=yellow]{
-  color:var(--sys-yellow-on-accent, #593e20);
+  color:var(--sys-yellow-on-accent, #583f1f);
 }
 .alertButton[data-variant=tonal][data-appearance=green]{
   color:var(--sys-green-on-accent, #fcfefa);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.13.2",
+  "version": "0.13.3-preview-4ab4d581.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "f238fd8b9d363de790ebcfd189aa17cbe101f3eb"
+  "gitHead": "0d52e9b583e9a990834cd94ec67277bdd27651c1"
 }

package/src/components/Alert/Alert.tsx

@@ -88,7 +88,7 @@ export function Alert({
           </div>
         )}
 
-        <div className={styles.contentLayout}>
+        <div className={styles.contentLayout} data-size={size}>
           {title && (
             <TruncateString
               text={title}

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

@@ -3,7 +3,10 @@
 
 $colors: 'neutral', 'primary', 'red', 'yellow', 'green', 'blue';
 $sizes: 's', 'm';
-$icons: ('s': 'xs', 'm': 's');
+$icons: (
+  's': 'xs',
+  'm': 's',
+);
 
 .alert {
   display: flex;
@@ -70,8 +73,6 @@ $icons: ('s': 'xs', 'm': 's');
       }
     }
   }
-
-
 }
 
 .contentLayout {
@@ -90,10 +91,12 @@ $icons: ('s': 'xs', 'm': 's');
 .title {
   color: $sys-neutral-text-main;
 
-  @each $size in $sizes {
-    &[data-size='#{$size}'] {
-      @include composite-var($theme-variables, 'sans', 'title', $size)
-    }
+  &[data-size='s'] {
+    @include composite-var($sans-label-m);
+  }
+
+  &[data-size='m'] {
+    @include composite-var($sans-title-s);
   }
 }
 
@@ -103,7 +106,7 @@ $icons: ('s': 'xs', 'm': 's');
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($theme-variables, 'sans', 'body', $size)
+      @include composite-var($theme-variables, 'sans', 'body', $size);
     }
   }
 }