chore: add styling guide

Author: TarunAdobe

STYLING.md

@@ -0,0 +1,25 @@
+# CSS Styling Guide
+
+This document outlines the details of the CSS styling for Spectrum Web Components.
+
+## Component Styling
+
+For each component in the project, there are upto 3 CSS files:
+
+-   `spectrum-[component-name].css` - This is the CSS file for the component that is generated by the last build from the Spectrum CSS project before the cutoff.
+-   `[component-name]-overrides.css` - This is the CSS file for the component that contains the system overrides for the component. It was also generated by the last build from the Spectrum CSS project before the cutoff.
+-   `[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.
+
+### How to update the component styling
+
+We will try to keep the concerns separate for the component styling and so depending on the changes, we will need to update the component styling in the following ways:
+
+-   If it's a fix to the core visual structure or token usage, it belongs in `spectrum-[component-name].css`.
+-   If it's system-specific, it goes to `[component-name]-overrides.css`.
+-   If it's something unique to SWC or a workaround, then `[component-name].css` is acceptable — but should be reviewed for long-term cleanup.
+
+## 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`.
+
+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.