@spectrum-web-components/styles 0.20.0 → 0.21.0

package/spectrum-scale-large.css

@@ -291,12 +291,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-tag-focusring-border-radius: var(
         --spectrum-global-dimension-static-size-75
     );
-    --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(
-        --spectrum-global-dimension-static-size-85
-    );
-    --spectrum-badge-l-neutral-textonly-text-padding-top: var(
-        --spectrum-global-dimension-static-size-150
-    );
     --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var(
         --spectrum-global-dimension-static-size-85
     );

package/spectrum-scale-medium.css

@@ -289,12 +289,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-tag-focusring-border-radius: var(
         --spectrum-global-dimension-static-size-65
     );
-    --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(
-        --spectrum-global-dimension-static-size-65
-    );
-    --spectrum-badge-l-neutral-textonly-text-padding-top: var(
-        --spectrum-global-dimension-size-115
-    );
     --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var(
         --spectrum-global-dimension-static-size-65
     );

package/src/spectrum-base.css

@@ -17,6 +17,7 @@ governing permissions and limitations under the License.
         --spectrum-alias-body-text-font-family,
         var(--spectrum-global-font-family-base)
     ); /* .spectrum */
+
     font-size: var(
         --spectrum-alias-font-size-default,
         var(--spectrum-global-dimension-font-size-100)

package/src/spectrum-body.css

@@ -16,6 +16,7 @@ governing permissions and limitations under the License.
         --spectrum-body-xxxl-text-size,
         var(--spectrum-global-dimension-font-size-600)
     ); /* .spectrum-Body--sizeXXXL */
+
     font-style: var(
         --spectrum-body-xxxl-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -36,11 +37,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-xxxl-text-transform, none);
 }
+
 .spectrum-Body--sizeXXL {
     font-size: var(
         --spectrum-body-xxl-text-size,
         var(--spectrum-global-dimension-font-size-500)
     ); /* .spectrum-Body--sizeXXL */
+
     font-style: var(
         --spectrum-body-xxl-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -61,11 +64,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-xxl-text-transform, none);
 }
+
 .spectrum-Body--sizeXL {
     font-size: var(
         --spectrum-body-xl-text-size,
         var(--spectrum-global-dimension-font-size-400)
     ); /* .spectrum-Body--sizeXL */
+
     font-style: var(
         --spectrum-body-xl-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -86,11 +91,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-xl-text-transform, none);
 }
+
 .spectrum-Body--sizeL {
     font-size: var(
         --spectrum-body-l-text-size,
         var(--spectrum-global-dimension-font-size-300)
     ); /* .spectrum-Body--sizeL */
+
     font-style: var(
         --spectrum-body-l-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -111,11 +118,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-l-text-transform, none);
 }
+
 .spectrum-Body--sizeM {
     font-size: var(
         --spectrum-body-m-text-size,
         var(--spectrum-global-dimension-font-size-200)
     ); /* .spectrum-Body--sizeM */
+
     font-style: var(
         --spectrum-body-m-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -136,11 +145,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-m-text-transform, none);
 }
+
 .spectrum-Body--sizeS {
     font-size: var(
         --spectrum-body-s-text-size,
         var(--spectrum-global-dimension-font-size-100)
     ); /* .spectrum-Body--sizeS */
+
     font-style: var(
         --spectrum-body-s-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -161,11 +172,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-s-text-transform, none);
 }
+
 .spectrum-Body--sizeXS {
     font-size: var(
         --spectrum-body-xs-text-size,
         var(--spectrum-global-dimension-font-size-75)
     ); /* .spectrum-Body--sizeXS */
+
     font-style: var(
         --spectrum-body-xs-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -186,12 +199,14 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-body-xs-text-transform, none);
 }
+
 .spectrum-Body {
     font-family: var(
         --spectrum-body-m-text-font-family,
         var(--spectrum-alias-body-text-font-family)
     ); /* .spectrum-Body */
 }
+
 .spectrum-Body .spectrum-Body-strong,
 .spectrum-Body strong {
     font-weight: var(
@@ -200,6 +215,7 @@ governing permissions and limitations under the License.
     ); /* .spectrum-Body strong,
    * .spectrum-Body .spectrum-Body-strong */
 }
+
 .spectrum-Body .spectrum-Body-emphasized,
 .spectrum-Body em {
     font-style: var(
@@ -208,54 +224,63 @@ governing permissions and limitations under the License.
     ); /* .spectrum-Body em,
    * .spectrum-Body .spectrum-Body-emphasized */
 }
+
 .spectrum-Body--serif {
     font-family: var(
         --spectrum-body-m-serif-text-font-family,
         var(--spectrum-alias-serif-text-font-family)
     ); /* .spectrum-Body--serif */
 }
+
 .spectrum-Body--sizeXXXL {
     color: var(
         --spectrum-body-xxxl-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeXXXL */
 }
+
 .spectrum-Body--sizeXXL {
     color: var(
         --spectrum-body-xxl-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeXXL */
 }
+
 .spectrum-Body--sizeXL {
     color: var(
         --spectrum-body-xl-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeXL */
 }
+
 .spectrum-Body--sizeL {
     color: var(
         --spectrum-body-l-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeL */
 }
+
 .spectrum-Body--sizeM {
     color: var(
         --spectrum-body-m-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeM */
 }
+
 .spectrum-Body--sizeS {
     color: var(
         --spectrum-body-s-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeS */
 }
+
 .spectrum-Body--sizeXS {
     color: var(
         --spectrum-body-xs-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Body--sizeXS */
 }
+
 .spectrum-Body {
     color: var(
         --spectrum-body-m-text-color,

package/src/spectrum-code.css

@@ -17,6 +17,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-body-text-font-family)
     ); /* .spectrum-Code */
 }
+
 .spectrum-Code .spectrum-Code-strong,
 .spectrum-Code strong {
     font-weight: var(
@@ -25,6 +26,7 @@ governing permissions and limitations under the License.
     ); /* .spectrum-Code strong,
    * .spectrum-Code .spectrum-Code-strong */
 }
+
 .spectrum-Code .spectrum-Code-emphasized,
 .spectrum-Code em {
     font-style: var(
@@ -33,12 +35,14 @@ governing permissions and limitations under the License.
     ); /* .spectrum-Code em,
    * .spectrum-Code .spectrum-Code-emphasized */
 }
+
 .spectrum-Code--serif {
     font-family: var(
         --spectrum-body-m-serif-text-font-family,
         var(--spectrum-alias-serif-text-font-family)
     ); /* .spectrum-Code--serif */
 }
+
 .spectrum-Code--sizeXL {
     font-family: var(
         --spectrum-code-xl-text-font-family,
@@ -48,6 +52,7 @@ governing permissions and limitations under the License.
         --spectrum-code-xl-text-size,
         var(--spectrum-global-dimension-font-size-400)
     ); /* .spectrum-Code--sizeXL */
+
     font-style: var(
         --spectrum-code-xl-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -67,6 +72,7 @@ governing permissions and limitations under the License.
     margin-bottom: 0;
     margin-top: 0;
 }
+
 .spectrum-Code--sizeL {
     font-family: var(
         --spectrum-code-l-text-font-family,
@@ -76,6 +82,7 @@ governing permissions and limitations under the License.
         --spectrum-code-l-text-size,
         var(--spectrum-global-dimension-font-size-300)
     ); /* .spectrum-Code--sizeL */
+
     font-style: var(
         --spectrum-code-l-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -95,6 +102,7 @@ governing permissions and limitations under the License.
     margin-bottom: 0;
     margin-top: 0;
 }
+
 .spectrum-Code--sizeM {
     font-family: var(
         --spectrum-code-m-text-font-family,
@@ -104,6 +112,7 @@ governing permissions and limitations under the License.
         --spectrum-code-m-text-size,
         var(--spectrum-global-dimension-font-size-200)
     ); /* .spectrum-Code--sizeM */
+
     font-style: var(
         --spectrum-code-m-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -123,6 +132,7 @@ governing permissions and limitations under the License.
     margin-bottom: 0;
     margin-top: 0;
 }
+
 .spectrum-Code--sizeS {
     font-family: var(
         --spectrum-code-s-text-font-family,
@@ -132,6 +142,7 @@ governing permissions and limitations under the License.
         --spectrum-code-s-text-size,
         var(--spectrum-global-dimension-font-size-100)
     ); /* .spectrum-Code--sizeS */
+
     font-style: var(
         --spectrum-code-s-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -151,6 +162,7 @@ governing permissions and limitations under the License.
     margin-bottom: 0;
     margin-top: 0;
 }
+
 .spectrum-Code--sizeXS {
     font-family: var(
         --spectrum-code-xs-text-font-family,
@@ -160,6 +172,7 @@ governing permissions and limitations under the License.
         --spectrum-code-xs-text-size,
         var(--spectrum-global-dimension-font-size-75)
     ); /* .spectrum-Code--sizeXS */
+
     font-style: var(
         --spectrum-code-xs-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -179,30 +192,35 @@ governing permissions and limitations under the License.
     margin-bottom: 0;
     margin-top: 0;
 }
+
 .spectrum-Code--sizeXL {
     color: var(
         --spectrum-code-xl-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Code--sizeXL */
 }
+
 .spectrum-Code--sizeL {
     color: var(
         --spectrum-code-l-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Code--sizeL */
 }
+
 .spectrum-Code--sizeM {
     color: var(
         --spectrum-code-m-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Code--sizeM */
 }
+
 .spectrum-Code--sizeS {
     color: var(
         --spectrum-code-s-text-color,
         var(--spectrum-alias-text-color)
     ); /* .spectrum-Code--sizeS */
 }
+
 .spectrum-Code--sizeXS {
     color: var(
         --spectrum-code-xs-text-color,

package/src/spectrum-detail.css

@@ -17,6 +17,7 @@ governing permissions and limitations under the License.
         var(--spectrum-alias-body-text-font-family)
     ); /* .spectrum-Detail */
 }
+
 .spectrum-Detail .spectrum-Detail-strong,
 .spectrum-Detail strong {
     font-weight: var(
@@ -25,6 +26,7 @@ governing permissions and limitations under the License.
     ); /* .spectrum-Detail strong,
    * .spectrum-Detail .spectrum-Detail-strong */
 }
+
 .spectrum-Detail .spectrum-Detail-emphasized,
 .spectrum-Detail em {
     font-style: var(
@@ -33,27 +35,32 @@ governing permissions and limitations under the License.
     ); /* .spectrum-Detail em,
    * .spectrum-Detail .spectrum-Detail-emphasized */
 }
+
 .spectrum-Detail--light {
     font-style: var(
         --spectrum-detail-m-light-text-font-style,
         var(--spectrum-global-font-style-regular)
     ); /* .spectrum-Detail--light */
+
     font-weight: var(
         --spectrum-detail-m-light-text-font-weight,
         var(--spectrum-alias-detail-text-font-weight-light)
     );
 }
+
 .spectrum-Detail--serif {
     font-family: var(
         --spectrum-body-m-serif-text-font-family,
         var(--spectrum-alias-serif-text-font-family)
     ); /* .spectrum-Detail--serif */
 }
+
 .spectrum-Detail--sizeXL {
     font-size: var(
         --spectrum-detail-xl-text-size,
         var(--spectrum-global-dimension-font-size-200)
     ); /* .spectrum-Detail--sizeXL */
+
     font-style: var(
         --spectrum-detail-xl-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -74,11 +81,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-xl-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeXL em {
     font-size: var(
         --spectrum-detail-xl-emphasized-text-size,
         var(--spectrum-global-dimension-font-size-200)
     ); /* .spectrum-Detail--sizeXL em */
+
     font-style: var(
         --spectrum-detail-xl-emphasized-text-font-style,
         var(--spectrum-global-font-style-italic)
@@ -102,11 +111,13 @@ governing permissions and limitations under the License.
         uppercase
     );
 }
+
 .spectrum-Detail--sizeXL strong {
     font-size: var(
         --spectrum-detail-xl-strong-text-size,
         var(--spectrum-global-dimension-font-size-200)
     ); /* .spectrum-Detail--sizeXL strong */
+
     font-style: var(
         --spectrum-detail-xl-strong-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -127,11 +138,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-xl-strong-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeL {
     font-size: var(
         --spectrum-detail-l-text-size,
         var(--spectrum-global-dimension-font-size-100)
     ); /* .spectrum-Detail--sizeL */
+
     font-style: var(
         --spectrum-detail-l-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -152,11 +165,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-l-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeL em {
     font-size: var(
         --spectrum-detail-l-emphasized-text-size,
         var(--spectrum-global-dimension-font-size-100)
     ); /* .spectrum-Detail--sizeL em */
+
     font-style: var(
         --spectrum-detail-l-emphasized-text-font-style,
         var(--spectrum-global-font-style-italic)
@@ -180,11 +195,13 @@ governing permissions and limitations under the License.
         uppercase
     );
 }
+
 .spectrum-Detail--sizeL strong {
     font-size: var(
         --spectrum-detail-l-strong-text-size,
         var(--spectrum-global-dimension-font-size-100)
     ); /* .spectrum-Detail--sizeL strong */
+
     font-style: var(
         --spectrum-detail-l-strong-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -205,11 +222,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-l-strong-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeM {
     font-size: var(
         --spectrum-detail-m-text-size,
         var(--spectrum-global-dimension-font-size-75)
     ); /* .spectrum-Detail--sizeM */
+
     font-style: var(
         --spectrum-detail-m-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -230,11 +249,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-m-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeM em {
     font-size: var(
         --spectrum-detail-m-emphasized-text-size,
         var(--spectrum-global-dimension-font-size-75)
     ); /* .spectrum-Detail--sizeM em */
+
     font-style: var(
         --spectrum-detail-m-emphasized-text-font-style,
         var(--spectrum-global-font-style-italic)
@@ -258,11 +279,13 @@ governing permissions and limitations under the License.
         uppercase
     );
 }
+
 .spectrum-Detail--sizeM strong {
     font-size: var(
         --spectrum-detail-m-strong-text-size,
         var(--spectrum-global-dimension-font-size-75)
     ); /* .spectrum-Detail--sizeM strong */
+
     font-style: var(
         --spectrum-detail-m-strong-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -283,11 +306,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-m-strong-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeS {
     font-size: var(
         --spectrum-detail-s-text-size,
         var(--spectrum-global-dimension-font-size-50)
     ); /* .spectrum-Detail--sizeS */
+
     font-style: var(
         --spectrum-detail-s-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -308,11 +333,13 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-s-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeS em {
     font-size: var(
         --spectrum-detail-s-emphasized-text-size,
         var(--spectrum-global-dimension-font-size-50)
     ); /* .spectrum-Detail--sizeS em */
+
     font-style: var(
         --spectrum-detail-s-emphasized-text-font-style,
         var(--spectrum-global-font-style-italic)
@@ -336,11 +363,13 @@ governing permissions and limitations under the License.
         uppercase
     );
 }
+
 .spectrum-Detail--sizeS strong {
     font-size: var(
         --spectrum-detail-s-strong-text-size,
         var(--spectrum-global-dimension-font-size-50)
     ); /* .spectrum-Detail--sizeS strong */
+
     font-style: var(
         --spectrum-detail-s-strong-text-font-style,
         var(--spectrum-global-font-style-regular)
@@ -361,24 +390,28 @@ governing permissions and limitations under the License.
     margin-top: 0;
     text-transform: var(--spectrum-detail-s-strong-text-transform, uppercase);
 }
+
 .spectrum-Detail--sizeXL {
     color: var(
         --spectrum-detail-xl-text-color,
         var(--spectrum-alias-heading-text-color)
     ); /* .spectrum-Detail--sizeXL */
 }
+
 .spectrum-Detail--sizeL {
     color: var(
         --spectrum-detail-l-text-color,
         var(--spectrum-alias-heading-text-color)
     ); /* .spectrum-Detail--sizeL */
 }
+
 .spectrum-Detail--sizeM {
     color: var(
         --spectrum-detail-m-text-color,
         var(--spectrum-alias-heading-text-color)
     ); /* .spectrum-Detail--sizeM */
 }
+
 .spectrum-Detail--sizeS {
     color: var(
         --spectrum-detail-s-text-color,