fix(theme): deprecate lightest and darkest color stops (#4179)

* chore: deprecation warning for color lightest and darkest

* chore: updated deprecationNotice to include package name instead of component

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-2.macromedia.com>

packages/banner/package.json

@@ -64,7 +64,7 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
-    "deprecationNotice": "Banner is deprecated and it will be removed in the future release.",
+    "deprecationNotice": "@spectrum-web-components/banner is deprecated and it will be removed in the future release.",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js"

packages/quick-actions/package.json

@@ -64,7 +64,7 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
-    "deprecationNotice": "Quick Actions is deprecated. Use an <a href='https://opensource.adobe.com/spectrum-web-components/components/action-bar/'>Action bar</a> to allow users to perform actions on either a single or multiple items at the same time, instead.",
+    "deprecationNotice": "@spectrum-web-components/quick-actions is deprecated. Use an <a href='https://opensource.adobe.com/spectrum-web-components/components/action-bar/'>Action bar</a> to allow users to perform actions on either a single or multiple items at the same time, instead.",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js"

packages/split-button/package.json

@@ -76,7 +76,7 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
-    "deprecationNotice": "Split Button is deprecated. Use a <a href='https://opensource.adobe.com/spectrum-web-components/components/button-group/'>button group</a> to show any additional actions related to the most critical action. Reference <a href='https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions'>Spectrum documentation</a> for more information.",
+    "deprecationNotice": "@spectrum-web-components/split-button is deprecated. Use a <a href='https://opensource.adobe.com/spectrum-web-components/components/button-group/'>button group</a> to show any additional actions related to the most critical action. Refer <a href='https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions'>Spectrum documentation</a> for more information.",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js",

projects/documentation/content/_includes/partials/deprecation.njk

@@ -3,11 +3,10 @@
 >
 <div id="deprecation" class="spectrum-InLineAlert spectrum-InLineAlert--negative">
         <div class="spectrum-InLineAlert-header">
-          Deprecated component
+          Deprecation Warning
           <sp-icon-alert class="spectrum-InLineAlert-icon" dir="ltr" aria-hidden="true"></sp-icon-alert>
         </div>
         <div class="spectrum-InLineAlert-content">
-        This component has been deprecated.<br></br>
         {{ deprecationNotice | safe }}
     </div>
 </div>

projects/documentation/scripts/copy-component-docs.js

@@ -58,12 +58,14 @@ const findDeclaration = (customElements, test) => {
 };
 
 const findDeprecationNotice = async function (filePath) {
-    const hasDeprecation = fs.existsSync(filePath);
-    if (hasDeprecation) {
-        const packageJSON = await import(filePath, {
-            assert: { type: 'json' },
-        }).then((packageDefault) => packageDefault.default);
-        return packageJSON.deprecationNotice;
+    for await (const mdPath of globby.stream(filePath)) {
+        const hasDeprecation = fs.existsSync(mdPath);
+        if (hasDeprecation) {
+            const packageJSON = await import(mdPath, {
+                assert: { type: 'json' },
+            }).then((packageDefault) => packageDefault.default);
+            return packageJSON.deprecationNotice;
+        }
     }
 };
 
@@ -184,12 +186,7 @@ export async function processREADME(mdPath) {
         )
     );
     const deprecationNotice = await findDeprecationNotice(
-        path.resolve(
-            __dirname,
-            '../../../packages',
-            packageName,
-            'package.json'
-        )
+        `${projectDir}/(packages|tools)/${packageName}/package.json`
     );
     const hasTemplate = fs.existsSync(
         path.resolve(
@@ -211,6 +208,7 @@ export async function processREADME(mdPath) {
     hasDemoControls: ${hasArgs},
     hasDemoTemplate: ${hasTemplate},
     deprecationNotice: ${JSON.stringify(deprecationNotice)},
+    isComponent: ${isComponent},
     ${hasArgs ? 'demoControls: Object.values(argTypes),' : ''}
 };
 `;

tools/theme/package.json

@@ -138,6 +138,7 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
+    "deprecationNotice": "Color Lightest and Darkest are deprecated and will be removed in a future release",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js",

tools/theme/src/Theme.ts

@@ -342,6 +342,14 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
                     }
                 );
             }
+            if (['lightest', 'darkest'].includes(this.color)) {
+                window.__swc.warn(
+                    this,
+                    `Color lightest and darkest are deprecated and will be removed in a future release`,
+                    'https://opensource.adobe.com/spectrum-web-components/tools/themes/#deprecation',
+                    { level: 'deprecation' }
+                );
+            }
         }
         return [...styles];
     }