feat(asset,cyclebutton,quickaction,site): deprecate skin.css assets (#2438)

Author: castastrophe

components/README.md

@@ -13,16 +13,12 @@ Each component has the following files:
 - `themes/*.css` - The theme-specific styles for the component.
 - `stories/*.stories.js` and `stories/template.js` - The storybook assets for rendering components in the Storybook tool and eventually to be used for visual regression testing.
 
-The following asset will only be seen in legacy components that have not yet migrated to the new tokens system:
-
-- `skin.css` - The theme-specific styles for the component: colors, box-shadows, etc (these change between color stops)
-
 See [documentation generation](/tools/bundle-builder/docs/README.md) documentation for more information on the properties available within the `.yml` files.
 
 ## Editing an existing component
 
 1. Run `gulp dev` in the root of the project to begin developing.
-2. Edit `components/$COMPONENT/index.css` and `components/$COMPONENT/skin.css` with dimensions and color properties respectively. The documentation will live reload with your changes.
+2. Edit `components/$COMPONENT/index.css` with dimensions and color properties. The documentation will live reload with your changes.
 3. Edit the markup examples within `components/$COMPONENT/metadata/*.yml`. The documentation will live reload with your changes.
 
 ## Adding a new component

components/asset/index.css

@@ -33,3 +33,23 @@ governing permissions and limitations under the License.
   max-inline-size: var(--spectrum-asset-icon-max-width);
   margin: var(--spectrum-asset-icon-margin);
 }
+
+.spectrum-Asset-folderBackground {
+  fill: var(--highcontrast-asset-folder-background-color, var(--spectrum-asset-folder-background-color));
+}
+
+.spectrum-Asset-fileBackground {
+  fill: var(--highcontrast-asset-file-background-color, var(--spectrum-asset-file-background-color));
+}
+
+.spectrum-Asset-folderOutline,
+.spectrum-Asset-fileOutline {
+  fill: var(--spectrum-asset-icon-outline-color);
+}
+
+@media (forced-colors: active) {
+	.spectrum-Asset {
+    --highcontrast-asset-folder-background-color: currentColor;
+    --highcontrast-asset-file-background-color: currentColor;
+  	}
+}

components/asset/skin.css

@@ -3,7 +3,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
 	rootClass = "spectrum-Asset",

components/asset/stories/template.js

@@ -54,3 +54,11 @@ governing permissions and limitations under the License.
     @inherit: %spectrum-overlay--right--open; /* should animate to the right when aligned left */
   }
 }
+
+.spectrum-QuickActions-overlay {
+  background-color: var(--spectrum-quickactions-overlay-color);
+}
+
+.spectrum-QuickActions {
+  background-color: var(--spectrum-quickactions-background-color);
+}

components/cyclebutton/skin.css

@@ -5,7 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
 	rootClass = "spectrum-QuickActions",

components/quickaction/index.css

@@ -647,3 +647,102 @@ governing permissions and limitations under the License.
   border-block: 2px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
 }
+
+.spectrum-Site {
+  /* .spectrum-Site */
+  --spectrum-site-background-color: var(--spectrum-global-color-gray-75);
+  --spectrum-site-content-background-color: var(--spectrum-global-color-gray-50);
+  --spectrum-site-header-border-color: var(--spectrum-global-color-gray-300);
+  --spectrum-site-header-background-color: var(--spectrum-site-content-background-color);
+  --spectrum-site-sidebar-background-color: var(--spectrum-site-background-color);
+  --spectrum-site-scrollbar-track-color: var(--spectrum-site-background-color);
+  --spectrum-site-scrollbar-thumb-color: var(--spectrum-global-color-gray-400);
+
+  /* .spectrum-Site-overlay */
+  --spectrum-site-overlay-underlay-background-color: rgba(0, 0, 0, 0.2);
+
+  /* .spectrum-CSSExample */
+  --spectrum-cssexample-markup-background-color: var(--spectrum-global-color-gray-75);
+  --spectrum-cssexample-border-color: var(--spectrum-global-color-gray-100);
+}
+
+/* Site */
+.spectrum-Site {
+  background-color: var(--spectrum-site-content-background-color);
+}
+
+.spectrum-Site-header {
+  border-block-end-color: var(--spectrum-site-header-border-color);
+  background-color: var(--spectrum-site-header-background-color);
+}
+
+.spectrum-Site-sideBar {
+  background-color: var(--spectrum-site-sidebar-background-color);
+}
+
+.spectrum-Site-mainContainer {
+  background: var(--spectrum-site-content-background-color);
+}
+
+.spectrum-Site-overlay {
+  background: var(--spectrum-site-overlay-underlay-background-color);
+}
+
+.spectrum-CSSComponent-resource--github {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+  color: black;
+}
+
+.spectrum-CSSComponent-resource--adobe {
+  color: #FA0F00 !important;
+  background-color: var(--spectrum-global-color-gray-100) !important;
+}
+
+/* Scrollable */
+.u-scrollable::-webkit-scrollbar-track,
+.u-scrollable::-webkit-scrollbar-track-piece {
+  background: var(--spectrum-site-scrollbar-track-color);
+}
+
+.u-scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--spectrum-site-scrollbar-track-color);
+}
+
+.u-scrollable:hover::-webkit-scrollbar-thumb {
+  background-color: var(--spectrum-site-scrollbar-thumb-color);
+}
+
+/* CSS Example */
+.spectrum-CSSExample-example {
+  background-color: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
+}
+
+.spectrum-CSSExample-markup {
+  border-block-start: 1px solid var(--spectrum-cssexample-border-color);
+
+  background: var(--spectrum-cssexample-markup-background-color);
+}
+
+.spectrum-CSSExample-markupToggle {
+  z-index: 1;
+
+  background: var(--spectrum-cssexample-markup-background-color);
+}
+
+.spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle {
+  background-color: transparent;
+}
+
+.spectrum-CSSExample-example--overlay {
+  background: rgba(0,0,0,0.4);
+  color: rgba(0,0,0,0.4);
+}
+
+.spectrum-CSSExample-oldAPI {
+  color: var(--spectrum-semantic-negative-text-color-small);
+}
+
+.spectrum-CodeBlock {
+  border-color: var(--spectrum-global-color-gray-400);
+  background-color: var(--spectrum-global-color-gray-75);
+}