@adobe/spectrum-css/dist/components/picker/vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Picker {
  --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
  --spectrum-picker-s-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-picker-s-text-size: var(--spectrum-alias-item-text-size-s);
  --spectrum-picker-s-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-s);
  --spectrum-picker-s-height: var(--spectrum-alias-item-height-s);
  --spectrum-picker-s-placeholder-text-font-style: var(--spectrum-global-font-style-italic);
  --spectrum-picker-s-placeholder-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-picker-s-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-picker-s-width: var(--spectrum-global-dimension-size-2000);
  --spectrum-picker-s-min-width: var(--spectrum-global-dimension-size-450);
  --spectrum-picker-s-popover-max-width: var(--spectrum-global-dimension-size-1800);
  --spectrum-picker-s-ui-icon-gap: var(--spectrum-alias-item-ui-icon-gap-s);
  --spectrum-picker-s-error-icon-margin-left: var(--spectrum-global-dimension-size-100);
  --spectrum-picker-s-textonly-padding-left: var(--spectrum-alias-item-padding-s);
  --spectrum-picker-s-textonly-padding-right: var(--spectrum-alias-item-padding-s);
  --spectrum-picker-m-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-picker-m-text-size: var(--spectrum-alias-item-text-size-m);
  --spectrum-picker-m-height: var(--spectrum-alias-item-height-m);
  --spectrum-picker-m-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-m);
  --spectrum-picker-m-placeholder-text-font-style: var(--spectrum-global-font-style-italic);
  --spectrum-picker-m-placeholder-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-picker-m-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-picker-m-width: var(--spectrum-global-dimension-size-3000);
  --spectrum-picker-m-min-width: var(--spectrum-global-dimension-size-600);
  --spectrum-picker-m-popover-max-width: var(--spectrum-global-dimension-size-2400);
  --spectrum-picker-m-ui-icon-gap: var(--spectrum-alias-item-ui-icon-gap-m);
  --spectrum-picker-m-error-icon-margin-left: var(--spectrum-global-dimension-size-150);
  --spectrum-picker-m-textonly-padding-left: var(--spectrum-alias-item-padding-m);
  --spectrum-picker-m-textonly-padding-right: var(--spectrum-alias-item-padding-m);
  --spectrum-picker-l-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-picker-l-text-size: var(--spectrum-alias-item-text-size-l);
  --spectrum-picker-l-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-l);
  --spectrum-picker-l-height: var(--spectrum-alias-item-height-l);
  --spectrum-picker-l-placeholder-text-font-style: var(--spectrum-global-font-style-italic);
  --spectrum-picker-l-placeholder-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-picker-l-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-picker-l-width: var(--spectrum-global-dimension-size-2000);
  --spectrum-picker-l-min-width: var(--spectrum-global-dimension-size-750);
  --spectrum-picker-l-popover-max-width: var(--spectrum-global-dimension-size-3000);
  --spectrum-picker-l-ui-icon-gap: var(--spectrum-alias-item-ui-icon-gap-l);
  --spectrum-picker-l-error-icon-margin-left: var(--spectrum-global-dimension-size-185);
  --spectrum-picker-l-textonly-padding-left: var(--spectrum-alias-item-padding-l);
  --spectrum-picker-l-textonly-padding-right: var(--spectrum-alias-item-padding-l);
  --spectrum-picker-xl-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-picker-xl-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-l);
  --spectrum-picker-xl-text-size: var(--spectrum-alias-item-text-size-xl);
  --spectrum-picker-xl-height: var(--spectrum-alias-item-height-xl);
  --spectrum-picker-xl-placeholder-text-font-style: var(--spectrum-global-font-style-italic);
  --spectrum-picker-xl-placeholder-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-picker-xl-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-picker-xl-width: var(--spectrum-global-dimension-size-3000);
  --spectrum-picker-xl-min-width: var(--spectrum-global-dimension-size-900);
  --spectrum-picker-xl-popover-max-width: var(--spectrum-global-dimension-size-3600);
  --spectrum-picker-xl-ui-icon-gap: var(--spectrum-alias-item-ui-icon-gap-xl);
  --spectrum-picker-xl-error-icon-margin-left: var(--spectrum-global-dimension-size-225);
  --spectrum-picker-xl-textonly-padding-left: var(--spectrum-alias-item-padding-xl);
  --spectrum-picker-xl-textonly-padding-right: var(--spectrum-alias-item-padding-xl);
  --spectrum-picker-quiet-m-popover-offset-x: var(--spectrum-global-dimension-size-150);
  --spectrum-popover-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-picker-m-text-color: var(--spectrum-alias-text-color);
  --spectrum-picker-m-background-color: var(--spectrum-global-color-gray-75);
  --spectrum-picker-m-border-color: var(--spectrum-alias-border-color);
  --spectrum-picker-m-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-picker-m-background-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-picker-m-border-color-hover: var(--spectrum-alias-border-color-hover);
  --spectrum-picker-m-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-picker-m-background-color-down: var(--spectrum-global-color-gray-200);
  --spectrum-picker-m-border-color-down: var(--spectrum-alias-border-color-down);
  --spectrum-picker-m-placeholder-text-color-down: var(--spectrum-alias-placeholder-text-color-down);
  --spectrum-picker-m-background-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-picker-m-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-picker-m-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-picker-m-placeholder-text-color-key-focus: var(--spectrum-alias-placeholder-text-color-hover);
  --spectrum-picker-m-border-color-error: var(--spectrum-global-color-red-500);
  --spectrum-picker-m-validation-icon-color-error: var(--spectrum-semantic-negative-color-icon);
  --spectrum-picker-m-border-color-error-hover: var(--spectrum-global-color-red-600);
  --spectrum-picker-m-border-color-error-down: var(--spectrum-global-color-red-600);
  --spectrum-picker-m-border-color-error-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-picker-m-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-picker-m-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-picker-m-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-picker-m-placeholder-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-picker-m-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-picker-m-placeholder-text-color: var(--spectrum-alias-placeholder-text-color);
  --spectrum-picker-m-placeholder-text-color-hover: var(--spectrum-alias-placeholder-text-color-hover);
  --spectrum-picker-m-placeholder-text-color-mouse-focus: var(--spectrum-alias-placeholder-text-color);
  --spectrum-picker-quiet-m-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-picker-quiet-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-picker-quiet-m-background-color-hover: var(--spectrum-alias-background-color-transparent);
  --spectrum-picker-quiet-m-background-color-key-focus: var(--spectrum-alias-background-color-transparent);
  --spectrum-picker-quiet-m-placeholder-text-color-key-focus: var(--spectrum-alias-placeholder-text-color-hover);
  --spectrum-picker-m-icon-color-key-focus: var(--spectrum-alias-icon-color-focus);
  --spectrum-picker-quiet-m-background-color-down: var(--spectrum-alias-background-color-transparent);
  --spectrum-picker-quiet-m-border-color-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-picker-quiet-m-background-color-disabled: var(--spectrum-alias-background-color-transparent);
}