chore: update styling guide (#5437)

* chore: add styling guide
* chore: remove spectrum-config and update other docs
* fix: update yarn new-package to not depend on spectrum-css
* chore: update styling guide
* chore: remove formating from plopfile

Author: TarunAdobe

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

@@ -22,8 +22,6 @@ _Note_ that your component name should be provided in kebab case and should rela
     - [new-component-name]
         - src
             - index.ts
-            - spectrum-[new-component-name].css
-            - [new-component-name]-overrides.css
             - [new-component-name].css
             - [NewComponentName].ts
         - stories

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

@@ -13,8 +13,6 @@ This document outlines the details of the CSS styling for Spectrum Web Component
 
 For each component in the project, there are up to 3 CSS files:
 
-- `spectrum-[component-name].css` - This is the main CSS file for the component that is generated by the last build from the Spectrum CSS project before we removed that package as a dependency.
-- `[component-name]-overrides.css` - This is the CSS file for the component that contains the system overrides which take different values in different themes. It was also generated by the last build from the Spectrum CSS project before we removed that package as a dependency.
 - `[component-name].css` - This is the main CSS file which imports the `spectrum-[component-name].css` and `[component-name]-overrides.css` files and additionally contains the component's custom styles which were not part of the Spectrum CSS project.
 
 ### How to update the component styling
@@ -37,20 +35,11 @@ Example:
 
 This will just work! As long as the `--spectrum-component-height-300` variable exists in the tokens package.
 
-- If it's an update to how a component looks in one particular theme, it belongs in `[component-name]-overrides.css`.
-
-The process to update the overrides file involves a few extra steps:
-
-1. Update the `[component-name]-overrides.css` file to contain the new styles.
-2. Make sure the new `--system-` variable exists in the tokens package. This variable can be found in the `tools/styles/tokens/[express | spectrum]/system-theme-bridge.css` file or the `tools/styles/tokens-v2/system-theme-bridge.css` file depending on the theme.
-3. If the variable doesn't exist, we will need to add it to the correct file.
-
 ## Global styling
 
 SWC project uses styles package to manage the global css tokens for all three themes. The styles package can be found in `tools/styles`. There is one very small caveat in the way we manage the styles package. We have two different tokens packages, one for the express + spectrum theme and one for the spectrum 2 theme.
 
 - `styles/tokens` - This is the tokens package for the Express + Spectrum theme.
-- `styles/tokens-v2` - This is the tokens package for the Spectrum 2 theme.
 
 NOTE: In all likelihood, you would only need to do minor changes to the styles package. However, if you feel like you need to make major changes to the styles package, the correct approach would be to start a discussion among the team and figure out a plan together.
 

projects/templates/plop-templates/args.ts.hbs

@@ -1,3 +1 @@
-export const argTypes = {
-
-}
+export const argTypes = {};

projects/templates/plop-templates/component-overrides.css.hbs

@@ -1,4 +1,3 @@
-
 import { {{ className name }} } from './src/{{className name}}.js';
 
 customElements.define('{{> tagnamePartial }}', {{ className name }});
@@ -7,4 +6,4 @@ declare global {
     interface HTMLElementTagNameMap {
         '{{> tagnamePartial }}': {{ className name }};
     }
-}
+}

projects/templates/plop-templates/component-registration.ts.hbs

@@ -1,14 +1,11 @@
-/*
-Copyright 2025 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
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-@import './spectrum-{{ name }}.css';
-@import './{{ name }}-overrides.css';
+/**
+ * Copyright 2025 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
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */