From d1f6f5597485ffe71b285bc6e1195897fc430733 Mon Sep 17 00:00:00 2001 From: Sal Date: Thu, 18 Dec 2025 11:54:54 -0500 Subject: [PATCH 01/15] base styles for notice and toast --- .../lib/components/notice/notice.less | 124 ++++++----- .../lib/components/toast/toast.less | 6 +- packages/stacks-docs/_data/notices.json | 30 +++ .../stacks-docs/_data/site-navigation.json | 3 +- .../product/components/notices.html | 206 ++++++++---------- 5 files changed, 204 insertions(+), 165 deletions(-) diff --git a/packages/stacks-classic/lib/components/notice/notice.less b/packages/stacks-classic/lib/components/notice/notice.less index 5c38d5ce95..00b1827841 100644 --- a/packages/stacks-classic/lib/components/notice/notice.less +++ b/packages/stacks-classic/lib/components/notice/notice.less @@ -9,26 +9,22 @@ */ .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-icon-bc: ~"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-icon-bc: ~"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)"; @@ -47,12 +43,10 @@ * @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-icon-bc: 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); @@ -74,20 +68,16 @@ --_no-code-fc: var(--white); } } - - --_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-icon-bc: 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 +93,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,21 +111,43 @@ } } + &__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-icon-bc: 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); @@ -146,8 +158,6 @@ .highcontrast-mode({ --_no-bg: var(--yellow-500); --_no-fc: var(--white); - --_no-btn-bg-active: transparent; - --_no-btn-bg-focus: transparent; }); } } @@ -158,40 +168,54 @@ 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); } - & &--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 + margin-right: var(--su12); + + .svg-icon { + margin: 0px var(--su2) var(--su2) var(--su2); + } } // 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); + + &--icon { + background: var(--_no-icon-bg); + border-style: var(--su1) solid var(--_no-icon-bc); + min-height: calc(var(--su32) + var(--su4)); //36px + height: 100%; + width: calc(var(--su32) + var(--su4)); //36px + padding: var(--su8); + margin-right: var(--su8); + + //Center the svg icon + display: flex; + align-items: center; + } } diff --git a/packages/stacks-classic/lib/components/toast/toast.less b/packages/stacks-classic/lib/components/toast/toast.less index 7f5ee03463..468c490dd5 100644 --- a/packages/stacks-classic/lib/components/toast/toast.less +++ b/packages/stacks-classic/lib/components/toast/toast.less @@ -14,10 +14,10 @@ .s-notice { box-shadow: var(--bs-sm); max-width: 44rem; - padding-bottom: var(--su8); - padding-top: var(--su8); + // padding-bottom: var(--su8); + // padding-top: var(--su8); pointer-events: all; - width: 100%; + // width: 100%; } display: flex; diff --git a/packages/stacks-docs/_data/notices.json b/packages/stacks-docs/_data/notices.json index 876fee3ab3..9f53760ea5 100644 --- a/packages/stacks-docs/_data/notices.json +++ b/packages/stacks-docs/_data/notices.json @@ -1,4 +1,34 @@ { + "base": [ + { + "type": "default", + "icon": "Help" + }, + { + "type": "info", + "icon": "Info" + }, + { + "type": "success", + "icon": "Check" + }, + { + "type": "warning", + "icon": "Alert" + }, + { + "type": "danger", + "icon": "AlertFill" + }, + { + "type": "featured", + "icon": "Star" + }, + { + "type": "activity", + "icon": "Notification" + } + ], "visual": [ { "class": ".s-notice", diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 9025e7277c..60a7112a9d 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -285,7 +285,8 @@ }, { "title": "Notices", - "url": "/product/components/notices/" + "url": "/product/components/notices/", + "new": true }, { "title": "Page titles", diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html index 706944964e..51f9489f70 100644 --- a/packages/stacks-docs/product/components/notices.html +++ b/packages/stacks-docs/product/components/notices.html @@ -10,8 +10,6 @@ -{% assign variants = "default, info, success, warning, danger" | split: ", " %} - @@ -242,64 +233,102 @@ - {% header "h3", "Filled" %} -

Default style used to separate notices from the main content

+ {% header "h3", "Base" %} +

Default notice variations

{% highlight html %} -
…
-
…
+
+ @Svg.Help + … +
+
+ @Svg.Info + … +
+ @Svg.Info … …
-
…
-
…
+
+ @Svg.Alert + … +
+
+ @Svg.AlertFill + … +
+
+ @Svg.Star + … +
+
+ @Svg.Notification + … +
{% endhighlight %}
- {% for variant in variants %} - {% assign variantCapitalized = variant | capitalize %} - {% assign variantClass = " s-notice__" | append: variant %} + {% for variant in notices.base %} + {% assign variantClass = " s-notice__" | append: variant.type %} {% if variant == "default" %} {% assign variantClass = "" %} {% endif %} {% endfor %}
- {% header "h3", "Filled important" %} + {% header "h3", "Important" %}

Used sparingly for when an important notice needs to be noticed

{% highlight html %} - - + + - - + + + + {% endhighlight %}
- {% for variant in variants %} - {% assign variantCapitalized = variant | capitalize %} - {% assign variantClass = " s-notice__" | append: variant %} - {% if variant == "default" %} + {% for variant in notices.base %} + {% assign variantClass = " s-notice__" | append: variant.type %} + {% if variant.type == "default" %} {% assign variantClass = "" %} {% endif %} {% endfor %}
@@ -321,16 +350,14 @@
@@ -373,48 +400,12 @@
- {% header "h3", "Inline" %} -

Default behavior for notices that are inserted within the content area

-
-{% highlight html %} -
…
-{% endhighlight %} -
-
-
-

Inline notice message style

-
-
-
-
- - {% header "h3", "With an Icon" %} -

Notices are often accompanied by an icon.

-
-{% highlight html %} -
-
- @Svg.Alert -
-
- … -
-
-{% endhighlight %} -
-
-
- {% icon "Alert" %} -
-
- This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions. -
-
-
-
- {% header "h3", "Toast" %} -

Floating notices, but aligned to the top and center of the page and they disappear after a set time. Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". When including buttons, you can apply .s-notice--btn to buttons to apply a toast-specific color.

+

+ Floating notices, but aligned to the top and center of the page and they disappear after a set time. + Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". + When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling. +

@@ -434,38 +425,31 @@ data-controller="s-toast" data-s-toast-target="toast" data-s-toast-return-element=".js-example-toast-open[data-target='#example-toast']"> -