refactor(backgroundlayers): use just 1 class

Author: jenndiaz

components/backgroundlayers/index.css

@@ -9,15 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-.spectrum-BackgroundLayers {
-	--spectrum-gray-25: rgb(255, 255, 255);
-	--spectrum-gray-50: rgb(248, 248, 248);
-	--spectrum-gray-75: rgb(243, 243, 243);
-	--spectrum-gray-100: rgb(233, 233, 233);
-	--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
-
-}
 
+/* used in editing and browsing contexts */
 .spectrum-BackgroundLayers--elevated {
 	--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	--spectrum-backgroundlayers-shadow-horizontal: 0;
@@ -28,33 +21,42 @@ governing permissions and limitations under the License.
 		--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
 		--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
 	}
+
+	background-color: var(--spectum-backgroundlayers-background-color);
+	filter: drop-shadow(
+		var(--spectrum-backgroundlayers-shadow-horizontal)
+			var(--spectrum-backgroundlayers-shadow-vertical)
+			var(--spectrum-backgroundlayers-shadow-blur)
+			var(--spectrum-backgroundlayers-shadow-color)
+	);
+}
+
+.spectrum-BackgroundLayers--layer1 {
+	--spectum-backgroundlayers-background-color: var(--spectrum-gray-50);
+	background-color: var(--spectum-backgroundlayers-background-color);
 }
+
+/* only used in browsing contexts */
 .spectrum-BackgroundLayers--layer2 {
 	--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	.spectrum--dark & {
 		--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
 	}
+	background-color: var(--spectum-backgroundlayers-background-color);
 }
-.spectrum-BackgroundLayers--layer1 {
-	--spectum-backgroundlayers-background-color: var(--spectrum-gray-50);
-}
+
 .spectrum-BackgroundLayers--pasteboard {
 	--spectum-backgroundlayers-background-color: var(--spectrum-gray-100);
 	.spectrum--dark & {
 		--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	}
+	background-color: var(--spectum-backgroundlayers-background-color);
 }
+
+/* only used in editing contexts */
 .spectrum-BackgroundLayers--base {
 	--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
 	border: 2px solid rgba(180, 180, 180, 0.25);
-}
-
-.spectrum-BackgroundLayers {
 	background-color: var(--spectum-backgroundlayers-background-color);
-	filter: drop-shadow(
-		var(--spectrum-backgroundlayers-shadow-horizontal)
-			var(--spectrum-backgroundlayers-shadow-vertical)
-			var(--spectrum-backgroundlayers-shadow-blur)
-			var(--spectrum-backgroundlayers-shadow-color)
-	);
 }
+

components/backgroundlayers/metadata/backgroundlayers.yml

@@ -6,23 +6,23 @@ examples:
     name: Browsing Contexts
     markup: |
       <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
+        <div class="spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 4;">
         </div>
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer2" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 3;">
+        <div class="spectrum-BackgroundLayers--layer2" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 3;">
         </div>
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 30px; top: 30px; z-index: 2;">
+        <div class="spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 30px; top: 30px; z-index: 2;">
         </div>
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 40px; top: 40px; z-index: 1;">
+        <div class="spectrum-BackgroundLayers--pasteboard" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 40px; top: 40px; z-index: 1;">
         </div>
       </div>
   - id: backgroundlayers-editting
     name: Editting Contexts
     markup: |
       <div class="spectrum-Examples" style="justify-content: flex-start; position: relative; height: 150px;">
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
+        <div class="spectrum-BackgroundLayers--elevated" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; z-index: 3;">
         </div>
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 2;">
+        <div class="spectrum-BackgroundLayers--layer1" style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 15px; top: 15px; z-index: 2;">
         </div>
-        <div class="spectrum-BackgroundLayers spectrum-BackgroundLayers--base"  style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 20px; top: 20px; z-index: 1;">
+        <div class="spectrum-BackgroundLayers--base"  style="inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute; left: 20px; top: 20px; z-index: 1;">
         </div>
       </div>