chore: remove spectrum-config and update other docs

Author: TarunAdobe

README.md

@@ -43,11 +43,7 @@ This will scaffold your component's required architecture by prompting you for 2
 
 _Note_ that your component name should be provided in kebab case and should relate as closely as possible to the Spectrum core naming.
 
-? **Spectrum CSS package name (i.e. colorarea)**
-
-You can find this information in the [Spectrum CSS GitHub project](https://github.com/adobe/spectrum-css) by finding the component package.json (i.e., `components/accordion/package.json`)
-
-For additional information, please see the [generating components documentation](https://opensource.adobe.com/spectrum-web-components/guides/generating-components) and capturing the value of the package name: `"name": "@spectrum-css/accordion"`. In this example, that name is `accordion`. _Note_ that the project scope `@spectrum-css` is stripped out of the response.
+For additional information, please see the [generating components documentation](https://opensource.adobe.com/spectrum-web-components/guides/generating-components)
 
 # Storybook
 
@@ -77,24 +73,11 @@ In the case that you'd like to serve and test a static build of the documentatio
 yarn docs:build
 ```
 
-# Updating Spectrum CSS
-
-There are two mechanisms for broadly updating SWC's Spectrum CSS dependencies:
-
--   `yarn update:spectrum-css` brings all Spectrum CSS dependencies to 'latest'
--   `yarn update:spectrum-css:nonbreaking` brings them to the latest minor or patch version
-
-We aim to keep Spectrum CSS as current as possible, to track the Spectrum design system closely.
-The `:nonbreaking` variant lets us release patch updates quickly in cases where more work is required to be compatible with 'latest.'
-
 # Advanced development
 
 There are several commands that can be useful in specific scenarios:
 
 -   `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process.
--   `yarn spectrum-vars` to ensure that theme files are up-to-date.
--   `yarn process-icons` to make sure that the most recent icons are included.
--   `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages.
 -   `yarn build` to make sure the available JS has been built from the current TS source.
 
 ## Linting
@@ -187,6 +170,7 @@ There is extended documentation on adding a new component to the library in the
             -   new-component-name.ts
             -   spectrum-config.js
             -   spectrum-new-component-name.css
+            -   new-component-name-overrides.css
         -   stories
             -   new-component-name.stories.ts
         -   test

STYLING.md

@@ -20,6 +20,6 @@ We will try to keep the concerns separate for the component styling and so depen
 
 ## Global styling (WIP)
 
-SWC project uses styles package to manage the global css variables and styles for all three themes. The styles package can be found in `tools/styles`.
+SWC project uses styles package to manage the global css tokens for all three themes. The styles package can be found in `tools/styles`.
 
-Hopefully, we'd never need to edit the styles package directly as these files are build from the processing of tokens package in the spectrum-css project.
+Hopefully, we'd never need to edit the styles package directly as these files were built from the processing of tokens package in the spectrum-css project before the cutoff.

projects/documentation/content/guides/generating-components.md

@@ -13,11 +13,8 @@ The fastest way to get started with creating a new component is to generate it f
 $ yarn new-package
 
 ? SWC package name (i.e. color-area)
-? Spectrum CSS package name (i.e. colorarea)
 ```
 
-In response to the prompt above, the package name should be the kebab case version of the Spectrum CSS pattern that you are looking to add to the repo. That is, the `SpectrumPattern` that you want to create should be represented as `spectrum-pattern` in your response. From here, the command generates a new package for your pattern with the following file structure in the `/packages` directory:
-
 ```
 > spectrum-pattern
    > src/
@@ -37,8 +34,6 @@ In response to the prompt above, the package name should be the kebab case versi
    package.json
 ```
 
-From here, peek into the `package.json` file and ensure the "devDependency" of `@spectrum-css/spectrumpattern` (replacing "spectrumpattern" with the pattern you're implementing, such as "badge" or "tooltip") listed there is of the most current version.
-
 Outside of your new package, you will need to manually add information about your new package to the `tsconfig-all.json` and `tsconfig-react-wrapper.json` files, as well as the `bundle` package:
 
 Open `tsconfig-all.json`, find "references", and add an entry for your package (`{ "path": "packages/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-all.json` config is used to build types for the project in parallel with the JS build that is handled outside of `tsc`. This will ensure that the types for your new package are available throughout the library, include at demonstration and test time.
@@ -53,10 +48,6 @@ Include a listing for your package in `bundle/elements.ts` and `bundle/src/index
 
 Finally, run `yarn` in your terminal. This will grab any newly-added packages, as well as to ensure that you have the provided CSS processed for use in your component. You can now see your component in the Storybook, using the command `yarn storybook`, or test its functionality via `yarn test`.
 
-The next place to look is in `node_modules/@spectrum-css/spectrumpattern/metadata/spectrumpattern.yml`. Here, you will find complete Spectrum CSS’s HTML representation of the many states, variants, and capabilities offered by the pattern that you are working with. The content of this file is also found on the <sp-link href="https://opensource.adobe.com/spectrum-css" target="_blank">Spectrum CSS documentation site</sp-link> under the name of the pattern you’re leveraging. Following this as a guide while you implement this component ensures that you will fulfill the expected features of this pattern.
-
-Now that you have this scaffold as a base, check out <sp-link href="guides/developing-components">these instructions</sp-link> on working with web components in general, and the <sp-link href="guides/spectrum-config">annotated `spectrum-config.js`</sp-link> file, which outlines how to translate the Spectrum CSS source into shadow DOM-optimized CSS. You are well on your way to adding a new component package to the project.
-
 If you run into any issues with the instructions above, or the ones linked across this documentation site, please feel free to <sp-link href="https://github.com/adobe/spectrum-web-components/discussions" target="_blank">raise questions</sp-link> or <sp-link href="https://github.com/adobe/spectrum-web-components/issues" target="_blank">issues</sp-link> on GitHub. You can do this either by creating a brand new issue when it specifically relates to the process of generating a component, or by leaving a comment on an already-created issue for a specific pattern when it concerns bringing that component to life.
 
 Thanks for stopping by. We look forward to your contribution!