feat(notice/toast): update styles for SHINE

.changeset/lazy-teachers-wink.md

@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+feat(notice): update styles for SHINE
+feat(toast): update styles for SHINE
+
+BREAKING CHANGES
+* Markup for notices has been updated

MIGRATION_GUIDE.md

@@ -106,6 +106,11 @@ The menu component has been updated to use new class names and structure. The fo
 - New `.s-navigation--icon` class to style icons alongside navigation items
 - New `.s-navigation--avatar` class to style avatars alongside navigation items
 
+#### Notices
+- Markup has been been updated
+- New `.s-notice--icon` class to style the new notice icons
+- New `.s-notice--dismiss` class to style the optional dismiss button
+
 #### Pagination
 - The next and previous button now uses an `ArrowRight` and `ArrowLeft` icon instead of text. To apply the new styling, use the class `.s-pagination--item__nav`. Since these buttons use icons to represent their behavior, make sure to include descriptive text for screen readers.
 

packages/stacks-classic/lib/components/notice/notice.less

@@ -9,32 +9,18 @@
  */
 .generate-variant-variables(@colorName: "", @modifier: "") {
     & when (@modifier = "") {
-        --_no-bc: ~"var(--@{colorName}-300)";
         --_no-bg: ~"var(--@{colorName}-100)";
-        --_no-btn-bg-active: ~"var(--@{colorName}-200)";
-        --_no-btn-bg-focus: ~"var(--@{colorName}-200)";
-        --_no-btn-fc: ~"var(--@{colorName}-500)";
+        --_no-icon-bg: ~"var(--@{colorName}-200)";
         --_no-code-bc: ~"var(--@{colorName}-300)";
         --_no-code-bg: ~"var(--@{colorName}-200)";
-
-        .highcontrast-mode({
-            --_no-bc: ~"var(--@{colorName}-400)";
-        });
     }
 
     & when (@modifier = important) {
-        --_no-bc: var(--_no-bg);
         --_no-bg: ~"var(--@{colorName}-400)";
+        --_no-icon-bg: ~"var(--@{colorName}-500)";
         --_no-fc: var(--white);
-        --_no-btn-bg-active: ~"var(--@{colorName}-500)";
-        --_no-btn-bg-focus: ~"var(--@{colorName}-500)";
-        --_no-btn-fc: ~"var(--@{colorName}-100)";
         --_no-code-bc: ~"var(--@{colorName}-300)";
         --_no-code-bg: ~"var(--@{colorName}-500)";
-
-        .highcontrast-mode({
-            --_no-bg: ~"var(--@{colorName}-500)";
-        });
     }
 }
 
@@ -47,47 +33,27 @@
  * @baseClass - The base class name for the notice component
  */
 .construct-notice-component(@baseClass) {
-    --_no-bc: var(--black-225);
-    --_no-bg: var(--black-100);
-    --_no-fc: var(--black-500);
-    --_no-btn-bg-active: var(--black-250);
-    --_no-btn-bg-focus: var(--black-225);
-    --_no-btn-fc: var(--_no-fc);
+    --_no-bg: var(--black-150);
+    --_no-icon-bg: var(--black-200);
+    --_no-fc: var(--black-600);
     --_no-code-bc: var(--black-300);
     --_no-code-bg: var(--black-200);
     --_no-code-fc: var(--_no-fc);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        &,
-        &.@{baseClass}__danger,
-        &.@{baseClass}__info,
-        &.@{baseClass}__success,
-        &.@{baseClass}__warning {
-            --_no-code-bc: var(--black-400);
-            --_no-code-bg: var(--white);
-            --_no-code-fc: var(--black);
-
-            &.@{baseClass}__important {
-                --_no-code-bc: var(--black-200);
-                --_no-code-bg: var(--black);
-                --_no-code-fc: var(--white);
-            }
+        &:not(&__important) {
+            --_no-icon-bc: var(--_no-code-bc);
         }
-
-        --_no-bc: var(--black-400);
     });
 
     // MODIFIERS
-    &__important:not(.@{baseClass}__danger):not(.@{baseClass}__info):not(.@{baseClass}__success):not(.@{baseClass}__warning) {
-        --_no-bc: var(--_no-bg);
-        --_no-bg: var(--black-500);
+    &__important {
+        --_no-bg: var(--black-400);
+        --_no-icon-bg: var(--black-500);
         --_no-fc: var(--white);
-        --_no-btn-bg-focus: var(--black-600);
-        --_no-btn-bg-active: var(--black-600);
-        --_no-btn-fc: var(--_no-fc);
         --_no-code-bc: var(--black-300);
-        --_no-code-bg: var(--black-600);
+        --_no-code-bg: var(--black-500);
     }
 
     // VARIANTS
@@ -103,11 +69,11 @@
 
     &__info {
         &:not(.@{baseClass}__important) {
-            .generate-variant-variables(theme-secondary);
+            .generate-variant-variables(blue);
         }
 
         &.@{baseClass}__important {
-            .generate-variant-variables(theme-secondary, important);
+            .generate-variant-variables(blue, important);
         }
     }
 
@@ -121,33 +87,57 @@
         }
     }
 
+    &__featured {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(purple);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(purple, important);
+        }
+    }
+
+    &__activity {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(pink);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(pink, important);
+        }
+    }
+
     &__warning {
         &:not(.@{baseClass}__important) {
             .generate-variant-variables(yellow);
-            --_no-btn-fc: var(--yellow-600);
+
         }
 
         &.@{baseClass}__important {
-            --_no-bc: var(--_no-bg);
-            --_no-bg: var(--yellow-400);
+            --_no-bg: var(--yellow-300);
+            --_no-icon-bg: var(--yellow-400);
             --_no-fc: var(--black);
-            --_no-btn-fc: var(--_no-fc);
-            --_no-btn-bg-active: var(--yellow-300);
-            --_no-btn-bg-focus: var(--yellow-300);
-            --_no-code-bc: var(--yellow-500);
-            --_no-code-bg: var(--yellow-300);
+            --_no-code-bc: var(--yellow-400);
+            --_no-code-bg: var(--yellow-200);
+
+            .s-notice--icon {
+                color: var(--white);
+            }
 
             .dark-mode({
                 --_no-fc: var(--white);
                 --_no-code-bc: var(--yellow-300);
                 --_no-code-bg: var(--yellow-500);
+                --_no-bg: var(--yellow-400);
+                --_no-icon-bg: var(--yellow-500);
             });
 
             .highcontrast-mode({
-                --_no-bg: var(--yellow-500);
+                --_no-bg: var(--yellow-400);
+                --_no-icon-bg: var(--yellow-500);
+                --_no-code-bc: var(--yellow-300);
+                --_no-code-bg: var(--yellow-500);
                 --_no-fc: var(--white);
-                --_no-btn-bg-active: transparent;
-                --_no-btn-bg-focus: transparent;
             });
         }
     }
@@ -157,41 +147,55 @@
         background-color: var(--_no-code-bg);
         color: var(--_no-code-fc);
         outline: var(--su-static1) solid var(--_no-code-bc);
-
-        border-radius: var(--br-md);
         padding-left: var(--su2);
         padding-right: var(--su2);
+        white-space: nowrap;
     }
 
-    & &--btn {
-        // TODO: decouple .s-notice--btn from .s-btn
+    button&--dismiss {
         &:active {
-            background-color: var(--_no-btn-bg-active, inherit) !important;
+            background-color: var(--_no-fc);
+            color: var(--_no-bg);
         }
 
         &:focus-visible,
         &:hover,
         &.focus-inset-bordered {
-            background-color: var(--_no-btn-bg-focus, inherit) !important;
+            background-color: var(--_no-fc);
+            color: var(--_no-bg);
         }
 
-        color: var(--_no-btn-fc, inherit) !important;
-        padding: var(--su8);
+        margin-left: calc(var(--su24) - var(--su2)); //22px
     }
 
     // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
     background: var(--_no-bg);
-    border-color: var(--_no-bc);
     color: var(--_no-fc);
-
-    border-style: solid;
-    font-size: var(--fs-body1);
 }
 
 .s-notice {
     .construct-notice-component(s-notice);
 
-    border-radius: var(--br-md);
-    border-width: var(--su-static1);
-    padding: var(--su16);
+    display: flex;
+    align-items: center;
+    gap: var(--su4);
+
+    --_no-pd: var(--su8);
+    padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
+
+    &--icon {
+        background: var(--_no-icon-bg);
+        border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
+        padding: var(--_no-pd);
+        margin-right: var(--_no-pd);
+        align-self: stretch;
+
+        //Position the svg icon
+        display: flex;
+        align-items: top;
+
+        //Negative margin to make up for s-notice's padding
+        margin-top: calc(var(--_no-pd) * -1);
+        margin-bottom: calc(var(--_no-pd) * -1);
+    }
 }

packages/stacks-classic/lib/components/notice/notice.visual.test.ts

@@ -13,7 +13,8 @@ describe("notice", () => {
             ariaHidden: "false",
         },
         children: {
-            default: `Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a>`,
+            default: `<span>Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a></span>`,
+            longText: `<span>Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a> with very long text that should surely wrap around to the next line so we can test the visual changes of multi-line notices in our pages.</span>`,
         },
         tag: "aside",
         template: ({ component, testid }) => html`

packages/stacks-classic/lib/components/toast/toast.less

@@ -14,10 +14,7 @@
     .s-notice {
         box-shadow: var(--bs-sm);
         max-width: 44rem;
-        padding-bottom: var(--su8);
-        padding-top: var(--su8);
         pointer-events: all;
-        width: 100%;
     }
 
     display: flex;