refactor(backgroudlayers): use newest tokens

Author: jenndiaz

components/backgroundlayers/gulpfile.js

@@ -11,17 +11,15 @@ governing permissions and limitations under the License.
 */
 /* for use only in editing contexts */
 .spectrum-BackgroundLayers-edit-elevated {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	--spectrum-backgroundlayers-shadow-horizontal: 0;
 	--spectrum-backgroundlayers-shadow-vertical: 0;
 	--spectrum-backgroundlayers-shadow-blur: 5px;
 	--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600);
 
 	.spectrum--dark & {
-		--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
 		--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
 	}
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-elevated-color);
 	box-shadow:
 		var(--spectrum-backgroundlayers-shadow-horizontal)
 		var(--spectrum-backgroundlayers-shadow-vertical)
@@ -30,42 +28,29 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-BackgroundLayers-edit-layer2 {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
-
-	.spectrum--dark & {
-		--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
-	}
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-layer-2-color);
 	border: 2px solid rgba(180, 180, 180, 25%);
 }
 
 .spectrum-BackgroundLayers-edit-layer1 {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-50);
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-layer-1-color);
 }
 
 .spectrum-BackgroundLayers-edit-pasteboard {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-100);
-
-	.spectrum--dark & {
-		--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
-	}
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-pasteboard-color);
 }
 
 /* only used in browsing contexts */
 .spectrum-BackgroundLayers-browse-elevated {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	--spectrum-backgroundlayers-shadow-horizontal: 0;
 	--spectrum-backgroundlayers-shadow-vertical: 0;
 	--spectrum-backgroundlayers-shadow-blur: 5px;
 	--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600);
 
 	.spectrum--dark & {
-		--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
 		--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
 	}
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-elevated-color);
 	box-shadow:
 		var(--spectrum-backgroundlayers-shadow-horizontal)
 		var(--spectrum-backgroundlayers-shadow-vertical)
@@ -74,12 +59,10 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-BackgroundLayers-browse-layer1 {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-50);
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-layer-1-color);
 }
 
 .spectrum-BackgroundLayers-browse-base {
-	--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	border: 2px solid rgba(180, 180, 180, 25%);
-	background-color: var(--spectrum-backgroundlayers-background-color);
+	background-color: var(--spectrum-background-base-color);
 }

components/backgroundlayers/index.css

@@ -1,35 +1,50 @@
 {
-  "name": "@spectrum-css/backgroundlayers",
-  "version": "1.0.0-alpha.0",
-  "description": "The Spectrum CSS backgroundlayers component",
-  "license": "Apache-2.0",
-  "author": "Adobe",
-  "homepage": "https://opensource.adobe.com/spectrum-css/",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/spectrum-css.git",
-    "directory": "components/backgroundlayers"
-  },
-  "bugs": {
-    "url": "https://github.com/adobe/spectrum-css/issues"
-  },
-  "main": "dist/index-vars.css",
-  "scripts": {
-    "build": "gulp",
-    "clean": "rimraf dist",
-    "test": "nx test:scope @spectrum-css/preview backgroundlayers"
-  },
-  "peerDependencies": {
-    "@spectrum-css/tokens": ">=13"
-  },
-  "devDependencies": {
-    "@spectrum-css/component-builder-simple": "^2.0.17",
-    "@spectrum-css/tokens": "^13.0.0-beta.5",
-    "gulp": "^4.0.0",
-    "nx": "^17.0.3",
-    "rimraf": "^5.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "@spectrum-css/backgroundlayers",
+	"version": "1.0.0-alpha.0",
+	"description": "The Spectrum CSS backgroundlayers component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/backgroundlayers"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"exports": {
+		".": "./dist/index.css",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./dist/metadata.json",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
+	"main": "dist/index.css",
+	"peerDependencies": {
+		"@spectrum-css/tokens": ">=16.1.0-next.0"
+	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/tokens": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@spectrum-css/tokens": "16.1.0-next.8"
+	},
+	"keywords": [
+		"design-system",
+		"spectrum",
+		"spectrum-css",
+		"adobe",
+		"adobe-spectrum",
+		"component",
+		"css"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
 }

components/backgroundlayers/package.json

@@ -4241,6 +4241,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@spectrum-css/backgroundlayers@workspace:components/backgroundlayers":
+  version: 0.0.0-use.local
+  resolution: "@spectrum-css/backgroundlayers@workspace:components/backgroundlayers"
+  dependencies:
+    "@spectrum-css/tokens": "npm:16.1.0-next.8"
+  peerDependencies:
+    "@spectrum-css/tokens": ">=16.1.0-next.0"
+  peerDependenciesMeta:
+    "@spectrum-css/tokens":
+      optional: true
+  languageName: unknown
+  linkType: soft
+
 "@spectrum-css/badge@npm:7.0.0-next.2, @spectrum-css/badge@workspace:components/badge":
   version: 0.0.0-use.local
   resolution: "@spectrum-css/badge@workspace:components/badge"