feat(inlinealert)!: updates tokens (#1695)

BREAKING CHANGE: migrates In-Line Alert to the new tokens system.

---------

Co-authored-by: Patrick Fulton <pfulton@adobe.com>

Author: jenndiaz

components/inlinealert/index.css

@@ -12,10 +12,20 @@ governing permissions and limitations under the License.
 
 .spectrum-InLineAlert {
   /* Font */
-  --spectrum-inlinealert-font-weight: var(--spectrum-bold-font-weight);
+  --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
+  --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+  --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
+  --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
+  --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
+
+  --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
+  --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+  --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
+  --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
+  --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height);
 
   /* Size*/
-  --spectrum-inlinealert-border-width: var(--spectrum-border-width-100);
+  --spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
   --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
   --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
   --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
@@ -27,9 +37,14 @@ governing permissions and limitations under the License.
   --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
 
   /* Color */
-  --spectrum-inlinealert-background-color: var(--spectrum-gray-50);
-  --spectrum-inlinealert-border-and-icon-color: var(--spectrum-gray-600);
-  --spectrum-inlinealert-header-and-content-color: var(--spectrum-gray-900);
+  --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color);
+  --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
+  --spectrum-inlinealert-header-color: var(--spectrum-heading-color);
+  --spectrum-inlinealert-content-color: var(--spectrum-body-color);
+  --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
+  --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
+  --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
+  --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
 }
 
 .spectrum-InLineAlert {
@@ -54,7 +69,8 @@ governing permissions and limitations under the License.
 @media (forced-colors: active) {
   .spectrum-InLineAlert {
     --highcontrast-inlinealert-background-color: Background;
-    --highcontrast-inlinealert-header-and-content-color: CanvasText;
+    --highcontrast-inlinealert-header-color: CanvasText;
+    --highcontrast-inlinealert-content-color: CanvasText;
     --highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
   }
 }
@@ -71,12 +87,16 @@ governing permissions and limitations under the License.
   /* Minimum space between header and icon */
   gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
 
-  font-weight: var(--mod-inlinealert-font-weight, var(--spectrum-inlinealert-font-weight));
+  font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight));
+  font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family));
+  font-style: var(--mod-inlinealert-heading-font-style, var(--spectrum-inlinealert-heading-font-style));
+  font-size: var(--mod-inlinealert-heading-font-size, var(--spectrum-inlinealert-heading-font-size));
+  line-height: var(--mod-inlinealert-heading-line-height, var(--spectrum-inlinealert-heading-line-height));
   text-transform: none;
 
   min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size));
 
-  color: var(--highcontrast-inlinealert-header-and-content-color, var(--mod-inlinealert-header-and-content-color, var(--spectrum-inlinealert-header-and-content-color)));
+  color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color)));
 }
 
 .spectrum-InLineAlert-content {
@@ -89,7 +109,13 @@ governing permissions and limitations under the License.
 
   word-wrap: break-word;
 
-  color: var(--highcontrast-inlinealert-header-and-content-color, var(--mod-inlinealert-header-and-content-color, var(--spectrum-inlinealert-header-and-content-color)));
+  font-weight: var(--mod-inlinealert-content-font-weight, var(--spectrum-inlinealert-content-font-weight));
+  font-family: var(--mod-inlinealert-content-font-family, var(--spectrum-inlinealert-content-font-family));
+  font-style: var(--mod-inlinealert-content-font-style, var(--spectrum-inlinealert-content-font-style));
+  font-size: var(--mod-inlinealert-content-font-size, var(--spectrum-inlinealert-content-font-size));
+  line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height));
+
+  color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
 }
 
 .spectrum-InLineAlert-footer {

components/inlinealert/metadata/mods.md

@@ -8,10 +8,20 @@
 |`--mod-inlinealert-border-and-icon-color`|
 |`--mod-inlinealert-icon-size`|
 |`--mod-inlinealert-spacing-header-to-icon`|
-|`--mod-inlinealert-font-weight`|
+|`--mod-inlinealert-heading-font-weight`|
+|`--mod-inlinealert-heading-font-family`|
+|`--mod-inlinealert-heading-font-style`|
+|`--mod-inlinealert-heading-font-size`|
+|`--mod-inlinealert-heading-line-height`|
 |`--mod-inlinealert-header-min-block-size`|
-|`--mod-inlinealert-header-and-content-color`|
+|`--mod-inlinealert-header-color`|
 |`--mod-inlinealert-spacing-header-content-button`|
+|`--mod-inlinealert-content-font-weight`|
+|`--mod-inlinealert-content-font-family`|
+|`--mod-inlinealert-content-font-style`|
+|`--mod-inlinealert-content-font-size`|
+|`--mod-inlinealert-content-line-height`|
+|`--mod-inlinealert-content-color`|
 |`--mod-inlinealert-border-and-icon-color-info`|
 |`--mod-inlinealert-border-and-icon-color-notice`|
 |`--mod-inlinealert-border-and-icon-color-positive`|

components/inlinealert/package.json

@@ -18,11 +18,11 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/icon": "^3.0.0",
-    "@spectrum-css/tokens": "^7.0.0"
+    "@spectrum-css/icon": "^3.0.35",
+    "@spectrum-css/tokens": "^7.7.0"
   },
   "devDependencies": {
-    "@spectrum-css/button": "^6.0.21",
+    "@spectrum-css/button": "^9.0.11",
     "@spectrum-css/component-builder-simple": "^2.0.7",
     "@spectrum-css/icon": "^3.0.35",
     "@spectrum-css/tokens": "^7.7.0",

components/inlinealert/stories/inlinealert.stories.js

@@ -33,7 +33,7 @@ export default {
         type: { summary: "string" },
         category: "Component",
       },
-      options: ["neutral", "info", "positive", "notice", "negative", "closable"],
+      options: ["neutral", "info", "positive", "notice", "negative"],
       control: "select"
     },
     isClosable: {

components/inlinealert/themes/express.css

@@ -11,9 +11,5 @@ governing permissions and limitations under the License.
 
 @container (--system: express) {
     .spectrum-InLineAlert {
-      --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-blue-1000);
-      --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-green-1000);
-      --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-orange-800);
-      --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-red-1000);
     }
 }

components/inlinealert/themes/spectrum.css

@@ -11,9 +11,5 @@ governing permissions and limitations under the License.
 
 @container (--system: spectrum) {
     .spectrum-InLineAlert {
-      --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-blue-800);
-      --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-green-800);
-      --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-orange-600);
-      --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-red-800);
     }
 }