refactor(inlinealert)!: migrate to core tokens (#1519)

BREAKING CHANGE: migrates InlineAlert to core tokens

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

Author: Yosevu Kilonzo

components/inlinealert/gulpfile.js

@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');

components/inlinealert/index.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,81 +10,126 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../vars/css/components/spectrum-inlinealert.css";
-
 .spectrum-InLineAlert {
-  --spectrum-inlinealert-neutral-title-height: 38px;
-  --spectrum-inlinealert-neutral-corner-radius: 4px;
-
-  /* DNA */
-  --spectrum-inlinealert-neutral-border-width: 2px;
+  /* Font */
+  --spectrum-inlinealert-font-weight: var(--spectrum-font-weight-bold);
+
+  /* Size*/
+  --spectrum-inlinealert-border-width: var(--spectrum-border-width-100);
+  --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);
+  --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
+
+  /* Spacing*/
+  --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
+  --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
+  --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 {
   position: relative;
 
   display: inline-block;
   box-sizing: border-box;
-  min-inline-size: var(--spectrum-inlinealert-neutral-min-width);
-  min-block-size: var(--spectrum-inlinealert-neutral-title-height);
-  margin-block: 8px;
-  margin-inline: 0;
-  padding-block: var(--spectrum-inlinealert-neutral-padding-y);
-  padding-inline: var(--spectrum-inlinealert-neutral-padding-x);
-
-  border-width: var(--spectrum-inlinealert-neutral-border-width);
+  min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size));
+
+  padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
+  padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
+
+  border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
+  border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
   border-style: solid;
-  border-radius: var(--spectrum-inlinealert-neutral-corner-radius);
+  border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius));
+
+  background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color)));
+  border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
+}
+
+@media (forced-colors: active) {
+  .spectrum-InLineAlert {
+    --highcontrast-inlinealert-background-color: Background;
+    --highcontrast-inlinealert-header-and-content-color: CanvasText;
+    --highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
+  }
 }
 
 .spectrum-InLineAlert-icon {
-  position: absolute;
-  display: block;
-  inset-block-start: 20px;
-  inset-inline-end: 20px;
+  inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
+  block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
 }
 
 .spectrum-InLineAlert-header {
-  display: inline-block;
-  block-size: auto;
-  min-block-size: 0;
-  margin: 0;
-  padding: 0;
-
-  /* Leave room for the icon */
-  padding-inline-end: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* Minimum space between header and icon */
+  gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
 
-  font-size: 14px;
-  font-weight: 700;
-  font-style: normal;
-  line-height: 14px;
+  font-weight: var(--mod-inlinealert-font-weight, var(--spectrum-inlinealert-font-weight));
   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)));
 }
 
 .spectrum-InLineAlert-content {
   display: block;
-  margin: var(--spectrum-inlinealert-neutral-content-margin-top) 0 0 0;
+  margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button));
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   padding: 0;
 
-  font-size: 14px;
   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)));
 }
 
 .spectrum-InLineAlert-footer {
-  display: block;
-
-  text-align: end;
-
-  padding-block-start: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: var(--mod-inlinealert-spacing-header-content-butto, var(--spectrum-inlinealert-spacing-header-content-button));
 
   &:empty {
     display: none;
   }
+}
+
+.spectrum-InLineAlert--info {
+  border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info)));
+
+  .spectrum-InLineAlert-icon {
+    color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info)));
+  }
+}
+
+.spectrum-InLineAlert--notice {
+  border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
+
+  .spectrum-InLineAlert-icon {
+    color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
+  }
+}
+
+.spectrum-InLineAlert--positive {
+  border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
+
+  .spectrum-InLineAlert-icon {
+    color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
+  }
+}
 
-  .spectrum-Button {
-    margin-inline-end: 0;
+.spectrum-InLineAlert--negative {
+  border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
 
-    /* Spacing between buttons */
-    margin-inline-start: 0.75rem;
+  .spectrum-InLineAlert-icon {
+    color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
   }
 }

components/inlinealert/metadata/inlinealert.yml

@@ -1,66 +1,72 @@
 name: In-Line Alert
 SpectrumSiteSlug: https://spectrum.adobe.com/page/in-line-alert/
 examples:
-  - id: inlinealert-info
-    name: Info
+  - id: inlinealert-neutral
+    name: Neutral
     markup: |
-      <div class="spectrum-InLineAlert spectrum-InLineAlert--info">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Info" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Information in-line alert header</div>
+      <div class="spectrum-InLineAlert">
+        <div class="spectrum-InLineAlert-header">Neutral in-line alert header</div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
-  - id: inlinealert-success
-    name: Success
+  - id: inlinealert-info
+    name: Informative
     markup: |
-      <div class="spectrum-InLineAlert spectrum-InLineAlert--success">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Successful in-line alert header</div>
+      <div class="spectrum-InLineAlert spectrum-InLineAlert--info">
+        <div class="spectrum-InLineAlert-header">
+          Information in-line alert header
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Info" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
-  - id: inlinealert-negative
-    name: Negative
+  - id: inlinealert-positive
+    name: Positive
     markup: |
-      <div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">negative in-line alert header</div>
+      <div class="spectrum-InLineAlert spectrum-InLineAlert--positive">
+        <div class="spectrum-InLineAlert-header">
+          Positive in-line alert header
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
-  - id: inlinealert-help
-    name: Help
+  - id: inlinealert-notice
+    name: Notice
     markup: |
-      <div class="spectrum-InLineAlert spectrum-InLineAlert--help">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Help" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Information in-line alert header</div>
+      <div class="spectrum-InLineAlert spectrum-InLineAlert--notice">
+        <div class="spectrum-InLineAlert-header">
+          Notice in-line alert - Oh no
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
-  - id: inlinealert-error
-    name: Error
+  - id: inlinealert-negative
+    name: Negative
     markup: |
-      <div class="spectrum-InLineAlert spectrum-InLineAlert--error">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Error in-line alert - Oh no</div>
+      <div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
+        <div class="spectrum-InLineAlert-header">
+          Negative in-line alert header
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
       </div>
   - id: inlinealert-closable
     name: Closable
     dnaStatus: Contribution
     description: An in-line alert with a close button in the footer. Combine this strategy with any variant.
     markup: |
-      <div class="spectrum-InLineAlert spectrum-InLineAlert--error">
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-        <div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error</div>
+      <div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
+        <div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error
+          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-icon-18-Alert" />
+          </svg>
+        </div>
         <div class="spectrum-InLineAlert-content">This is an alert.</div>
         <div class="spectrum-InLineAlert-footer">
           <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary"><span class="spectrum-Button-label">Ok</span></button>

components/inlinealert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/inlinealert",
-  "version": "4.0.13",
+  "version": "5.0.0-beta.1",
   "description": "The Spectrum CSS in-line alert component",
   "license": "Apache-2.0",
   "main": "dist/index-vars.css",
@@ -17,17 +17,17 @@
   },
   "peerDependencies": {
     "@spectrum-css/icon": "^3.0.21",
-    "@spectrum-css/vars": "^8.0.0"
+    "@spectrum-css/tokens": "^3.0.0"
   },
   "devDependencies": {
     "@spectrum-css/button": "^6.0.13",
-    "@spectrum-css/component-builder": "^3.2.0",
+    "@spectrum-css/component-builder-simple": "^1.0.0",
     "@spectrum-css/icon": "^3.0.23",
-    "@spectrum-css/vars": "^8.0.0",
+    "@spectrum-css/tokens": "^3.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
+}