@spectrum-web-components/styles 0.19.0 → 0.20.1

package/tokens/spectrum/custom-vars.css

@@ -11,38 +11,33 @@ governing permissions and limitations under the License.
 */
 
 /* This file contains overrides and additions to core tokens */
-:host,
-:root {
-    --system: spectrum;
+:host, :root {
+  --system: spectrum;
 }
 
-:host,
-:root {
-    --spectrum-animation-duration-100: 130ms;
-    --spectrum-animation-duration-200: 160ms;
+:host, :root {
+  --spectrum-animation-duration-100: 130ms;
+  --spectrum-animation-duration-200: 160ms;
 
-    --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system,
-        BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
-        'Lucida Grande', sans-serif;
-    --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia,
-        serif;
-    --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace;
+  --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+  --spectrum-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
+  --spectrum-font-family-code: 'Source Code Pro', Monaco, monospace;
 
-    --spectrum-line-height-large: 1.7;
-    --spectrum-line-height-medium: 1.5;
-    --spectrum-line-height-small: 1.3;
+  --spectrum-line-height-large: 1.7;
+  --spectrum-line-height-medium: 1.5;
+  --spectrum-line-height-small: 1.3;
 
-    --spectrum-font-weight-thin: 100;
-    --spectrum-font-weight-ultra-light: 200;
-    --spectrum-font-weight-light: 300;
-    --spectrum-font-weight-regular: 400;
-    --spectrum-font-weight-medium: 500;
-    --spectrum-font-weight-semi-bold: 600;
-    --spectrum-font-weight-bold: 700;
-    --spectrum-font-weight-extra-bold: 800;
-    --spectrum-font-weight-black: 900;
+  --spectrum-font-weight-thin: 100;
+  --spectrum-font-weight-ultra-light: 200;
+  --spectrum-font-weight-light: 300;
+  --spectrum-font-weight-regular: 400;
+  --spectrum-font-weight-medium: 500;
+  --spectrum-font-weight-semi-bold: 600;
+  --spectrum-font-weight-bold: 700;
+  --spectrum-font-weight-extra-bold: 800;
+  --spectrum-font-weight-black: 900;
 
-    /* static white / black background color for docs containers */
-    --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
-    --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
+  /* static white / black background color for docs containers */
+  --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
+  --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
 }

package/tokens/spectrum/global-vars.css

@@ -29,6 +29,8 @@ governing permissions and limitations under the License.
     --spectrum-heading: var(--spectrum-font-bold-default);
     --spectrum-heading-emphasized: var(--spectrum-font-bold-italic-default);
     --spectrum-cjk-heading: var(--spectrum-font-extra-bold-cjk);
+    --spectrum-slider-track-thickness: 2px;
+    --spectrum-slider-handle-gap: 4px;
     --spectrum-border-width-100: 1px;
 }
 :host,
@@ -174,8 +176,8 @@ governing permissions and limitations under the License.
     --system-spectrum-actionbutton-staticblack-content-color-focus: var(
         --spectrum-black
     );
-    --system-spectrum-actionbutton-staticblack-focus-ring-color: var(
-        --spectrum-static-black-focus-ring-color
+    --system-spectrum-actionbutton-staticblack-focus-indicator-color: var(
+        --spectrum-static-black-focus-indicator-color
     );
     --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent;
     --system-spectrum-actionbutton-staticblack-border-color-disabled: var(
@@ -246,8 +248,8 @@ governing permissions and limitations under the License.
     --system-spectrum-actionbutton-staticwhite-content-color-focus: var(
         --spectrum-white
     );
-    --system-spectrum-actionbutton-staticwhite-focus-ring-color: var(
-        --spectrum-static-white-focus-ring-color
+    --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var(
+        --spectrum-static-white-focus-indicator-color
     );
     --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent;
     --system-spectrum-actionbutton-staticwhite-border-color-disabled: var(
@@ -286,6 +288,22 @@ governing permissions and limitations under the License.
     --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled: transparent;
 }
 :host,
+:root {
+    --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600);
+    --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700);
+    --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800);
+    --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700);
+    --system-spectrum-checkbox-control-selected-color-default: var(
+        --spectrum-gray-700
+    );
+    --system-spectrum-checkbox-control-selected-color-hover: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-checkbox-control-selected-color-down: var(
+        --spectrum-gray-900
+    );
+}
+:host,
 :root {
     --system-spectrum-closebutton-background-color-default: transparent;
     --system-spectrum-closebutton-background-color-hover: var(

package/tokens/spectrum/large-vars.css

@@ -40,6 +40,30 @@ governing permissions and limitations under the License.
     --spectrum-switch-top-to-control-medium: 11px;
     --spectrum-switch-top-to-control-large: 15px;
     --spectrum-switch-top-to-control-extra-large: 19px;
+    --spectrum-slider-control-height-small: 18px;
+    --spectrum-slider-control-height-medium: 20px;
+    --spectrum-slider-control-height-large: 22px;
+    --spectrum-slider-control-height-extra-large: 26px;
+    --spectrum-slider-handle-size-small: 18px;
+    --spectrum-slider-handle-size-medium: 20px;
+    --spectrum-slider-handle-size-large: 22px;
+    --spectrum-slider-handle-size-extra-large: 26px;
+    --spectrum-slider-handle-border-width-down-small: 7px;
+    --spectrum-slider-handle-border-width-down-medium: 8px;
+    --spectrum-slider-handle-border-width-down-large: 9px;
+    --spectrum-slider-handle-border-width-down-extra-large: 11px;
+    --spectrum-slider-bottom-to-handle-small: 6px;
+    --spectrum-slider-bottom-to-handle-medium: 10px;
+    --spectrum-slider-bottom-to-handle-large: 14px;
+    --spectrum-slider-bottom-to-handle-extra-large: 17px;
+    --spectrum-picker-visual-to-disclosure-icon-small: 9px;
+    --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
+    --spectrum-picker-visual-to-disclosure-icon-large: 11px;
+    --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
+    --spectrum-combo-box-visual-to-field-button-small: 9px;
+    --spectrum-combo-box-visual-to-field-button-medium: 10px;
+    --spectrum-combo-box-visual-to-field-button-large: 11px;
+    --spectrum-combo-box-visual-to-field-button-extra-large: 13px;
     --spectrum-corner-radius-75: 2px;
     --spectrum-corner-radius-100: 5px;
     --spectrum-corner-radius-200: 10px;

package/tokens/spectrum/medium-vars.css

@@ -40,6 +40,30 @@ governing permissions and limitations under the License.
     --spectrum-switch-top-to-control-medium: 9px;
     --spectrum-switch-top-to-control-large: 12px;
     --spectrum-switch-top-to-control-extra-large: 15px;
+    --spectrum-slider-control-height-small: 14px;
+    --spectrum-slider-control-height-medium: 16px;
+    --spectrum-slider-control-height-large: 18px;
+    --spectrum-slider-control-height-extra-large: 20px;
+    --spectrum-slider-handle-size-small: 14px;
+    --spectrum-slider-handle-size-medium: 16px;
+    --spectrum-slider-handle-size-large: 18px;
+    --spectrum-slider-handle-size-extra-large: 20px;
+    --spectrum-slider-handle-border-width-down-small: 5px;
+    --spectrum-slider-handle-border-width-down-medium: 6px;
+    --spectrum-slider-handle-border-width-down-large: 7px;
+    --spectrum-slider-handle-border-width-down-extra-large: 8px;
+    --spectrum-slider-bottom-to-handle-small: 5px;
+    --spectrum-slider-bottom-to-handle-medium: 8px;
+    --spectrum-slider-bottom-to-handle-large: 11px;
+    --spectrum-slider-bottom-to-handle-extra-large: 14px;
+    --spectrum-picker-visual-to-disclosure-icon-small: 7px;
+    --spectrum-picker-visual-to-disclosure-icon-medium: 8px;
+    --spectrum-picker-visual-to-disclosure-icon-large: 9px;
+    --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px;
+    --spectrum-combo-box-visual-to-field-button-small: 7px;
+    --spectrum-combo-box-visual-to-field-button-medium: 8px;
+    --spectrum-combo-box-visual-to-field-button-large: 9px;
+    --spectrum-combo-box-visual-to-field-button-extra-large: 10px;
     --spectrum-corner-radius-75: 2px;
     --spectrum-corner-radius-100: 4px;
     --spectrum-corner-radius-200: 8px;