Major Changes
-
#2786
6c19fcfThanks @pfulton! - ## Breaking changeThis major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These were built from a manual snapshot release via
@adobe/spectrum-tokensand does NOT reflect a fully S2 design asset. This introduces S2 corner rounding and color palette, along with a few component- and alias-level mappings. This approach allows us to temporarily create component CSS that can render S1, Express, or S2 designs by swapping out a few "system"-level variables.If you are looking to implement a fully S2 design, please explore the
nextreleases instead of using this foundations release. The S2 components rendered with these token values will not fully match S2 design assets. This release is used in Spectrum Web Components 1.x.Tokens changed: 1104
Newly Deprecated (23)
--spectrum---spectrum-corner-radius-300--spectrum-corner-radius-400--spectrum-corner-radius-500--spectrum-corner-radius-600--spectrum-corner-radius-700--spectrum-corner-radius-800--spectrum-corner-radius-1000--spectrum-corner-radius-small-default--spectrum-corner-radius-medium-default--spectrum-corner-radius-large-default--spectrum-corner-radius-extra-large-default--spectrum-corner-radius-full--spectrum-corner-radius-small-size-small--spectrum-corner-radius-small-size-medium--spectrum-corner-radius-small-size-large--spectrum-corner-radius-small-size-extra-large--spectrum-corner-radius-medium-size-extra-small--spectrum-corner-radius-medium-size-small--spectrum-corner-radius-medium-size-medium--spectrum-corner-radius-medium-size-large--spectrum-corner-radius-medium-size-extra-large--spectrum-overlay-opacity--spectrum-drop-shadow-color: Replaced with--spectrum-drop-shadow-color-100
Added (185)
-
accent-color-1500--spectrum-accent-color-1600--spectrum-informative-color-1500--spectrum-informative-color-1600--spectrum-negative-color-1500--spectrum-negative-color-1600--spectrum-notice-color-1500--spectrum-notice-color-1600--spectrum-positive-color-1500--spectrum-positive-color-1600--spectrum-negative-subdued-background-color-default--spectrum-negative-subdued-background-color-hover--spectrum-negative-subdued-background-color-down--spectrum-negative-subdued-background-color-key-focus--spectrum-accent-subtle-background-color-default--spectrum-informative-subtle-background-color-default--spectrum-positive-subtle-background-color-default--spectrum-notice-subtle-background-color-default--spectrum-negative-subtle-background-color-default--spectrum-corner-radius-0--spectrum-corner-radius-none--spectrum-text-to-visual-400--spectrum-transparent-white-25--spectrum-transparent-white-50--spectrum-transparent-white-75--spectrum-transparent-white-1000--spectrum-transparent-black-25--spectrum-transparent-black-50--spectrum-transparent-black-75--spectrum-transparent-black-1000--spectrum-gray-25--spectrum-gray-1000--spectrum-blue-1500--spectrum-blue-1600--spectrum-red-1500--spectrum-red-1600--spectrum-orange-1500--spectrum-orange-1600--spectrum-yellow-1500--spectrum-yellow-1600--spectrum-chartreuse-1500--spectrum-chartreuse-1600--spectrum-celery-1500--spectrum-celery-1600--spectrum-green-1500--spectrum-green-1600--spectrum-seafoam-1500--spectrum-seafoam-1600--spectrum-cyan-1500--spectrum-cyan-1600--spectrum-indigo-1500--spectrum-indigo-1600--spectrum-purple-1500--spectrum-purple-1600--spectrum-fuchsia-1500--spectrum-fuchsia-1600--spectrum-magenta-1500--spectrum-magenta-1600--spectrum-pink-100--spectrum-pink-200--spectrum-pink-300--spectrum-pink-400--spectrum-pink-500--spectrum-pink-600--spectrum-pink-700--spectrum-pink-800--spectrum-pink-900--spectrum-pink-1000--spectrum-pink-1100--spectrum-pink-1200--spectrum-pink-1300--spectrum-pink-1400--spectrum-pink-1500--spectrum-pink-1600--spectrum-turquoise-100--spectrum-turquoise-200--spectrum-turquoise-300--spectrum-turquoise-400--spectrum-turquoise-500--spectrum-turquoise-600--spectrum-turquoise-700--spectrum-turquoise-800--spectrum-turquoise-900--spectrum-turquoise-1000--spectrum-turquoise-1100--spectrum-turquoise-1200--spectrum-turquoise-1300--spectrum-turquoise-1400--spectrum-turquoise-1500--spectrum-turquoise-1600--spectrum-brown-100--spectrum-brown-200--spectrum-brown-300--spectrum-brown-400--spectrum-brown-500--spectrum-brown-600--spectrum-brown-700--spectrum-brown-800--spectrum-brown-900--spectrum-brown-1000--spectrum-brown-1100--spectrum-brown-1200--spectrum-brown-1300--spectrum-brown-1400--spectrum-brown-1500--spectrum-brown-1600--spectrum-silver-100--spectrum-silver-200--spectrum-silver-300--spectrum-silver-400--spectrum-silver-500--spectrum-silver-600--spectrum-silver-700--spectrum-silver-800--spectrum-silver-900--spectrum-silver-1000--spectrum-silver-1100--spectrum-silver-1200--spectrum-silver-1300--spectrum-silver-1400--spectrum-silver-1500--spectrum-silver-1600--spectrum-cinnamon-100--spectrum-cinnamon-200--spectrum-cinnamon-300--spectrum-cinnamon-400--spectrum-cinnamon-500--spectrum-cinnamon-600--spectrum-cinnamon-700--spectrum-cinnamon-800--spectrum-cinnamon-900--spectrum-cinnamon-1000--spectrum-cinnamon-1100--spectrum-cinnamon-1200--spectrum-cinnamon-1300--spectrum-cinnamon-1400--spectrum-cinnamon-1500--spectrum-cinnamon-1600--spectrum-background-elevated-color--spectrum-background-pasteboard-color--spectrum-brown-visual-color--spectrum-cinnamon-visual-color--spectrum-pink-visual-color--spectrum-silver-visual-color--spectrum-turquoise-visual-color--spectrum-brown-background-color-default--spectrum-cinnamon-background-color-default--spectrum-pink-background-color-default--spectrum-silver-background-color-default--spectrum-turquoise-background-color-default--spectrum-title-color--spectrum-drop-shadow-color-100--spectrum-drop-shadow-color-200--spectrum-drop-shadow-color-300--spectrum-drop-shadow-emphasized-default-color--spectrum-drop-shadow-emphasized-hover-color--spectrum-drop-shadow-elevated-color--spectrum-neutral-subtle-background-color-default--spectrum-gray-subtle-background-color-default--spectrum-blue-subtle-background-color-default--spectrum-green-subtle-background-color-default--spectrum-orange-subtle-background-color-default--spectrum-red-subtle-background-color-default--spectrum-brown-subtle-background-color-default--spectrum-cinnamon-subtle-background-color-default--spectrum-celery-subtle-background-color-default--spectrum-chartreuse-subtle-background-color-default--spectrum-cyan-subtle-background-color-default--spectrum-fuchsia-subtle-background-color-default--spectrum-indigo-subtle-background-color-default--spectrum-magenta-subtle-background-color-default--spectrum-pink-subtle-background-color-default--spectrum-purple-subtle-background-color-default--spectrum-seafoam-subtle-background-color-default--spectrum-silver-subtle-background-color-default--spectrum-turquoise-subtle-background-color-default--spectrum-yellow-subtle-background-color-default--spectrum-drop-shadow-dragged-color--spectrum-static-black-text-color--spectrum-static-white-text-color--spectrum-track-color--spectrum-static-black-track-color--spectrum-static-white-track-color--spectrum-static-black-track-indicator-color--spectrum-static-white-track-indicator-color
Updated (896)
Added Properties (112)
--spectrum-heading-sans-serif-font-weight- value:
--spectrum-bold-font-weight
- value:
--spectrum-heading-serif-font-weight- value:
--spectrum-bold-font-weight
- value:
--spectrum-heading-cjk-font-weight- value:
--spectrum-extra-bold-font-weight
- value:
--spectrum-heading-sans-serif-emphasized-font-weight- value:
--spectrum-bold-font-weight
- value:
--spectrum-heading-serif-emphasized-font-weight- value:
--spectrum-bold-font-weight
- value:
--spectrum-accent-color-100- value:
--spectrum-blue-100
- value:
--spectrum-accent-color-200- value:
--spectrum-blue-200
- value:
--spectrum-accent-color-300- value:
--spectrum-blue-300
- value:
--spectrum-accent-color-400- value:
--spectrum-blue-400
- value:
--spectrum-accent-color-500- value:
--spectrum-blue-500
- value:
--spectrum-accent-color-600- value:
--spectrum-blue-600
- value:
--spectrum-accent-color-700- value:
--spectrum-blue-700
- value:
--spectrum-accent-color-800- value:
--spectrum-blue-800
- value:
--spectrum-accent-color-900- value:
--spectrum-blue-900
- value:
--spectrum-accent-color-1000- value:
--spectrum-blue-1000
- value:
--spectrum-accent-color-1100- value:
--spectrum-blue-1100
- value:
--spectrum-accent-color-1200- value:
--spectrum-blue-1200
- value:
--spectrum-accent-color-1300- value:
--spectrum-blue-1300
- value:
--spectrum-accent-color-1400- value:
--spectrum-blue-1400
- value:
--spectrum-corner-radius-75- value: 4px
--spectrum-corner-radius-100- value: 8px
--spectrum-corner-radius-200- value: 10px
--spectrum-drop-shadow-x- value: 0px
--spectrum-drop-shadow-y- value: 1px (desktop)
- value: 2px (mobile)
--spectrum-drop-shadow-blur- value: 4px (desktop)
- value: 6px (mobile)
--spectrum-border-width-100- value: 1px
--spectrum-checkbox-control-size-small- value: 12px (desktop)
- value: 16px (mobile)
--spectrum-checkbox-control-size-medium- value: 14px (desktop)
- value: 18px (mobile)
--spectrum-checkbox-control-size-large- value: 16px (desktop)
- value: 20px (mobile)
--spectrum-checkbox-control-size-extra-large- value: 18px (desktop)
- value: 22px (mobile)
--spectrum-checkbox-top-to-control-small- value: 6px (desktop)
- value: 7px (mobile)
--spectrum-checkbox-top-to-control-medium- value: 9px (desktop)
- value: 11px (mobile)
--spectrum-checkbox-top-to-control-large- value: 12px (desktop)
- value: 15px (mobile)
--spectrum-checkbox-top-to-control-extra-large- value: 15px (desktop)
- value: 19px (mobile)
--spectrum-switch-control-width-small- value: 23px (desktop)
- value: 32px (mobile)
--spectrum-switch-control-width-medium- value: 26px (desktop)
- value: 36px (mobile)
--spectrum-switch-control-width-large- value: 29px (desktop)
- value: 41px (mobile)
--spectrum-switch-control-width-extra-large- value: 33px (desktop)
- value: 46px (mobile)
--spectrum-switch-control-height-small- value: 12px (desktop)
- value: 16px (mobile)
--spectrum-switch-control-height-medium- value: 14px (desktop)
- value: 18px (mobile)
--spectrum-switch-control-height-large- value: 16px (desktop)
- value: 20px (mobile)
--spectrum-switch-control-height-extra-large- value: 18px (desktop)
- value: 22px (mobile)
--spectrum-switch-top-to-control-small- value: 6px (desktop)
- value: 7px (mobile)
--spectrum-switch-top-to-control-medium- value: 9px (desktop)
- value: 11px (mobile)
--spectrum-switch-top-to-control-large- value: 12px (desktop)
- value: 15px (mobile)
--spectrum-switch-top-to-control-extra-large- value: 15px (desktop)
- value: 19px (mobile)
--spectrum-radio-button-control-size-small- value: 12px (desktop)
- value: 16px (mobile)
--spectrum-radio-button-control-size-medium- value: 14px (desktop)
- value: 18px (mobile)
--spectrum-radio-button-control-size-large- value: 16px (desktop)
- value: 20px (mobile)
--spectrum-radio-button-control-size-extra-large- value: 18px (desktop)
- value: 22px (mobile)
--spectrum-radio-button-top-to-control-small- value: 6px (desktop)
- value: 7px (mobile)
--spectrum-radio-button-top-to-control-medium- value: 9px (desktop)
- value: 11px (mobile)
--spectrum-radio-button-top-to-control-large- value: 12px (desktop)
- value: 15px (mobile)
--spectrum-radio-button-top-to-control-extra-large- value: 15px (desktop)
- value: 19px (mobile)
--spectrum-slider-track-thickness- value: 2px
--spectrum-slider-control-height-small- value: 14px (desktop)
- value: 18px (mobile)
--spectrum-slider-control-height-medium- value: 16px (desktop)
- value: 20px (mobile)
--spectrum-slider-control-height-large- value: 18px (desktop)
- value: 22px (mobile)
--spectrum-slider-control-height-extra-large- value: 20px (desktop)
- value: 26px (mobile)
--spectrum-slider-handle-size-small- value: 14px (desktop)
- value: 18px (mobile)
--spectrum-slider-handle-size-medium- value: 16px (desktop)
- value: 20px (mobile)
--spectrum-slider-handle-size-large- value: 18px (desktop)
- value: 22px (mobile)
--spectrum-slider-handle-size-extra-large- value: 20px (desktop)
- value: 26px (mobile)
--spectrum-slider-handle-border-width-down-small- value: 5px (desktop)
- value: 7px (mobile)
--spectrum-slider-handle-border-width-down-medium- value: 6px (desktop)
- value: 8px (mobile)
--spectrum-slider-handle-border-width-down-large- value: 7px (desktop)
- value: 9px (mobile)
--spectrum-slider-handle-border-width-down-extra-large- value: 8px (desktop)
- value: 11px (mobile)
--spectrum-slider-handle-gap- value: 4px
--spectrum-slider-bottom-to-handle-small- value: 5px (desktop)
- value: 6px (mobile)
--spectrum-slider-bottom-to-handle-medium- value: 8px (desktop)
- value: 10px (mobile)
--spectrum-slider-bottom-to-handle-large- value: 11px (desktop)
- value: 14px (mobile)
--spectrum-slider-bottom-to-handle-extra-large- value: 14px (desktop)
- value: 17px (mobile)
--spectrum-picker-border-width- value: border-width-100
--spectrum-in-field-button-fill-stacked-inner-border-rounding- value: 0px
--spectrum-in-field-button-edge-to-fill- value: 0px
--spectrum-in-field-button-stacked-inner-edge-to-fill- value: 0px
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium- value: 3px
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large- value: 4px
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large- value: 5px
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small
- value:
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium
- value:
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large
- value:
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
- value:
--spectrum-white- value: rgb(255, 255, 255) (light)
- value: rgb(255, 255, 255) (dark)
--spectrum-transparent-white-100- value: rgba(255, 255, 255, 0.11) (light)
- value: rgba(255, 255, 255, 0.11) (dark)
--spectrum-transparent-white-200- value: rgba(255, 255, 255, 0.14) (light)
- value: rgba(255, 255, 255, 0.14) (dark)
--spectrum-transparent-white-300- value: rgba(255, 255, 255, 0.17) (light)
- value: rgba(255, 255, 255, 0.17) (dark)
--spectrum-transparent-white-400- value: rgba(255, 255, 255, 0.21) (light)
- value: rgba(255, 255, 255, 0.21) (dark)
--spectrum-transparent-white-500- value: rgba(255, 255, 255, 0.39) (light)
- value: rgba(255, 255, 255, 0.39) (dark)
--spectrum-transparent-white-600- value: rgba(255, 255, 255, 0.51) (light)
- value: rgba(255, 255, 255, 0.51) (dark)
--spectrum-transparent-white-700- value: rgba(255, 255, 255, 0.66) (light)
- value: rgba(255, 255, 255, 0.66) (dark)
--spectrum-transparent-white-800- value: rgba(255, 255, 255, 0.85) (light)
- value: rgba(255, 255, 255, 0.85) (dark)
--spectrum-transparent-white-900- value: rgba(255, 255, 255, 0.94) (light)
- value: rgba(255, 255, 255, 0.94) (dark)
--spectrum-transparent-black-100- value: rgba(0, 0, 0, 0.09) (light)
- value: rgba(0, 0, 0, 0.09) (dark)
--spectrum-transparent-black-200- value: rgba(0, 0, 0, 0.12) (light)
- value: rgba(0, 0, 0, 0.12) (dark)
--spectrum-transparent-black-300- value: rgba(0, 0, 0, 0.15) (light)
- value: rgba(0, 0, 0, 0.15) (dark)
--spectrum-transparent-black-400- value: rgba(0, 0, 0, 0.22) (light)
- value: rgba(0, 0, 0, 0.22) (dark)
--spectrum-transparent-black-500- value: rgba(0, 0, 0, 0.44) (light)
- value: rgba(0, 0, 0, 0.44) (dark)
--spectrum-transparent-black-600- value: rgba(0, 0, 0, 0.56) (light)
- value: rgba(0, 0, 0, 0.56) (dark)
--spectrum-transparent-black-700- value: rgba(0, 0, 0, 0.69) (light)
- value: rgba(0, 0, 0, 0.69) (dark)
--spectrum-transparent-black-800- value: rgba(0, 0, 0, 0.84) (light)
- value: rgba(0, 0, 0, 0.84) (dark)
--spectrum-transparent-black-900- value: rgba(0, 0, 0, 0.93) (light)
- value: rgba(0, 0, 0, 0.93) (dark)
--spectrum-background-base-color- value:
--spectrum-gray-25
- value:
--spectrum-background-layer-1-color- value:
--spectrum-gray-50
- value:
--spectrum-neutral-background-color-default- value:
--spectrum-gray-800
- value:
--spectrum-neutral-background-color-hover- value:
--spectrum-gray-900
- value:
--spectrum-neutral-background-color-down- value:
--spectrum-gray-900
- value:
--spectrum-neutral-background-color-key-focus- value:
--spectrum-gray-900
- value:
--spectrum-neutral-background-color-selected-default- value:
--spectrum-gray-800
- value:
--spectrum-neutral-background-color-selected-hover- value:
--spectrum-gray-900
- value:
--spectrum-neutral-background-color-selected-down- value:
--spectrum-gray-900
- value:
--spectrum-neutral-background-color-selected-key-focus- value:
--spectrum-gray-900
- value:
Deleted Properties (368)
--spectrum-heading-sans-serif-font-weight- value:
--spectrum-bold-font-weight(spectrum) - value:
--spectrum-black-font-weight(express) deprecated
- value:
--spectrum-heading-serif-font-weight- value:
--spectrum-bold-font-weight(spectrum) - value:
--spectrum-black-font-weight(express) deprecated
- value:
--spectrum-heading-cjk-font-weight- value:
--spectrum-extra-bold-font-weight(spectrum) - value:
--spectrum-black-font-weight(express) deprecated
- value:
--spectrum-heading-sans-serif-emphasized-font-weight- value:
--spectrum-bold-font-weight(spectrum) - value:
--spectrum-black-font-weight(express) deprecated
- value:
--spectrum-heading-serif-emphasized-font-weight- value:
--spectrum-bold-font-weight(spectrum) - value:
--spectrum-black-font-weight(express) deprecated
- value:
--spectrum-accent-color-100- value:
--spectrum-blue-100(spectrum) - value:
--spectrum-indigo-100(express) deprecated
- value:
--spectrum-accent-color-200- value:
--spectrum-blue-200(spectrum) - value:
--spectrum-indigo-200(express) deprecated
- value:
--spectrum-accent-color-300- value:
--spectrum-blue-300(spectrum) - value:
--spectrum-indigo-300(express) deprecated
- value:
--spectrum-accent-color-400- value:
--spectrum-blue-400(spectrum) - value:
--spectrum-indigo-400(express) deprecated
- value:
--spectrum-accent-color-500- value:
--spectrum-blue-500(spectrum) - value:
--spectrum-indigo-500(express) deprecated
- value:
--spectrum-accent-color-600- value:
--spectrum-blue-600(spectrum) - value:
--spectrum-indigo-600(express) deprecated
- value:
--spectrum-accent-color-700- value:
--spectrum-blue-700(spectrum) - value:
--spectrum-indigo-700(express) deprecated
- value:
--spectrum-accent-color-800- value:
--spectrum-blue-800(spectrum) - value:
--spectrum-indigo-800(express) deprecated
- value:
--spectrum-accent-color-900- value:
--spectrum-blue-900(spectrum) - value:
--spectrum-indigo-900(express) deprecated
- value:
--spectrum-accent-color-1000- value:
--spectrum-blue-1000(spectrum) - value:
--spectrum-indigo-1000(express) deprecated
- value:
--spectrum-accent-color-1100- value:
--spectrum-blue-1100(spectrum) - value:
--spectrum-indigo-1100(express) deprecated
- value:
--spectrum-accent-color-1200- value:
--spectrum-blue-1200(spectrum) - value:
--spectrum-indigo-1200(express) deprecated
- value:
--spectrum-accent-color-1300- value:
--spectrum-blue-1300(spectrum) - value:
--spectrum-indigo-1300(express) deprecated
- value:
--spectrum-accent-color-1400- value:
--spectrum-blue-1400(spectrum) - value:
--spectrum-indigo-1400(express) deprecated
- value:
--spectrum-corner-radius-75- value: 2px (spectrum)
- value: 3px (express | desktop) deprecated
- value: 4px (express | mobile) deprecated
--spectrum-corner-radius-100- value: 4px (spectrum | desktop)
- value: 5px (spectrum | mobile)
- value: 6px (express | desktop) deprecated
- value: 8px (express | mobile) deprecated
--spectrum-corner-radius-200- value: 8px (spectrum | desktop)
- value: 10px (spectrum | mobile)
- value: 12px (express | desktop) deprecated
- value: 16px (express | mobile) deprecated
--spectrum-drop-shadow-x- value: 0px (spectrum)
- value: 0px (express | desktop) deprecated
- value: 0px (express | mobile) deprecated
--spectrum-drop-shadow-y- value: 1px (spectrum | desktop)
- value: 2px (spectrum | mobile)
- value: 4px (express | desktop) deprecated
- value: 4px (express | mobile) deprecated
--spectrum-drop-shadow-blur- value: 4px (spectrum | desktop)
- value: 6px (spectrum | mobile)
- value: 16px (express | desktop) deprecated
- value: 16px (express | mobile) deprecated
--spectrum-border-width-100- value: 1px (spectrum)
- value: 2px (express) deprecated
--spectrum-checkbox-control-size-small- value: 12px (spectrum | desktop)
- value: 16px (spectrum | mobile)
- value: 14px (express | desktop) deprecated
- value: 18px (express | mobile) deprecated
--spectrum-checkbox-control-size-medium- value: 14px (spectrum | desktop)
- value: 18px (spectrum | mobile)
- value: 16px (express | desktop) deprecated
- value: 20px (express | mobile) deprecated
--spectrum-checkbox-control-size-large- value: 16px (spectrum | desktop)
- value: 20px (spectrum | mobile)
- value: 18px (express | desktop) deprecated
- value: 22px (express | mobile) deprecated
--spectrum-checkbox-control-size-extra-large- value: 18px (spectrum | desktop)
- value: 22px (spectrum | mobile)
- value: 20px (express | desktop) deprecated
- value: 26px (express | mobile) deprecated
--spectrum-checkbox-top-to-control-small- value: 6px (spectrum | desktop)
- value: 7px (spectrum | mobile)
- value: 5px (express | desktop) deprecated
- value: 6px (express | mobile) deprecated
--spectrum-checkbox-top-to-control-medium- value: 9px (spectrum | desktop)
- value: 11px (spectrum | mobile)
- value: 8px (express | desktop) deprecated
- value: 10px (express | mobile) deprecated
--spectrum-checkbox-top-to-control-large- value: 12px (spectrum | desktop)
- value: 15px (spectrum | mobile)
- value: 11px (express | desktop) deprecated
- value: 14px (express | mobile) deprecated
--spectrum-checkbox-top-to-control-extra-large- value: 15px (spectrum | desktop)
- value: 19px (spectrum | mobile)
- value: 14px (express | desktop) deprecated
- value: 17px (express | mobile) deprecated
--spectrum-switch-control-width-small- value: 23px (spectrum | desktop)
- value: 32px (spectrum | mobile)
- value: 25px (express | desktop) deprecated
- value: 32px (express | mobile) deprecated
--spectrum-switch-control-width-medium- value: 26px (spectrum | desktop)
- value: 36px (spectrum | mobile)
- value: 28px (express | desktop) deprecated
- value: 36px (express | mobile) deprecated
--spectrum-switch-control-width-large- value: 29px (spectrum | desktop)
- value: 41px (spectrum | mobile)
- value: 32px (express | desktop) deprecated
- value: 41px (express | mobile) deprecated
--spectrum-switch-control-width-extra-large- value: 33px (spectrum | desktop)
- value: 46px (spectrum | mobile)
- value: 35px (express | desktop) deprecated
- value: 46px (express | mobile) deprecated
--spectrum-switch-control-height-small- value: 12px (spectrum | desktop)
- value: 16px (spectrum | mobile)
- value: 14px (express | desktop) deprecated
- value: 18px (express | mobile) deprecated
--spectrum-switch-control-height-medium- value: 14px (spectrum | desktop)
- value: 18px (spectrum | mobile)
- value: 16px (express | desktop) deprecated
- value: 20px (express | mobile) deprecated
--spectrum-switch-control-height-large- value: 16px (spectrum | desktop)
- value: 20px (spectrum | mobile)
- value: 18px (express | desktop) deprecated
- value: 22px (express | mobile) deprecated
--spectrum-switch-control-height-extra-large- value: 18px (spectrum | desktop)
- value: 22px (spectrum | mobile)
- value: 20px (express | desktop) deprecated
- value: 26px (express | mobile) deprecated
--spectrum-switch-top-to-control-small- value: 6px (spectrum | desktop)
- value: 7px (spectrum | mobile)
- value: 5px (express | desktop) deprecated
- value: 6px (express | mobile) deprecated
--spectrum-switch-top-to-control-medium- value: 9px (spectrum | desktop)
- value: 11px (spectrum | mobile)
- value: 8px (express | desktop) deprecated
- value: 10px (express | mobile) deprecated
--spectrum-switch-top-to-control-large- value: 12px (spectrum | desktop)
- value: 15px (spectrum | mobile)
- value: 11px (express | desktop) deprecated
- value: 14px (express | mobile) deprecated
--spectrum-switch-top-to-control-extra-large- value: 15px (spectrum | desktop)
- value: 19px (spectrum | mobile)
- value: 14px (express | desktop) deprecated
- value: 17px (express | mobile) deprecated
--spectrum-radio-button-control-size-small- value: 12px (spectrum | desktop)
- value: 16px (spectrum | mobile)
- value: 14px (express | desktop) deprecated
- value: 18px (express | mobile) deprecated
--spectrum-radio-button-control-size-medium- value: 14px (spectrum | desktop)
- value: 18px (spectrum | mobile)
- value: 16px (express | desktop) deprecated
- value: 20px (express | mobile) deprecated
--spectrum-radio-button-control-size-large- value: 16px (spectrum | desktop)
- value: 20px (spectrum | mobile)
- value: 18px (express | desktop) deprecated
- value: 22px (express | mobile) deprecated
--spectrum-radio-button-control-size-extra-large- value: 18px (spectrum | desktop)
- value: 22px (spectrum | mobile)
- value: 20px (express | desktop) deprecated
- value: 26px (express | mobile) deprecated
--spectrum-radio-button-top-to-control-small- value: 6px (spectrum | desktop)
- value: 7px (spectrum | mobile)
- value: 5px (express | desktop) deprecated
- value: 6px (express | mobile) deprecated
--spectrum-radio-button-top-to-control-medium- value: 9px (spectrum | desktop)
- value: 11px (spectrum | mobile)
- value: 8px (express | desktop) deprecated
- value: 10px (express | mobile) deprecated
--spectrum-radio-button-top-to-control-large- value: 12px (spectrum | desktop)
- value: 15px (spectrum | mobile)
- value: 11px (express | desktop) deprecated
- value: 14px (express | mobile) deprecated
--spectrum-radio-button-top-to-control-extra-large- value: 15px (spectrum | desktop)
- value: 19px (spectrum | mobile)
- value: 14px (express | desktop) deprecated
- value: 17px (express | mobile) deprecated
--spectrum-slider-track-thickness- value: 2px (spectrum)
- value: 4px (express) deprecated
--spectrum-slider-control-height-small- value: 14px (spectrum | desktop)
- value: 18px (spectrum | mobile)
- value: 18px (express | desktop) deprecated
- value: 22px (express | mobile) deprecated
--spectrum-slider-control-height-medium- value: 16px (spectrum | desktop)
- value: 20px (spectrum | mobile)
- value: 20px (express | desktop) deprecated
- value: 24px (express | mobile) deprecated
--spectrum-slider-control-height-large- value: 18px (spectrum | desktop)
- value: 22px (spectrum | mobile)
- value: 22px (express | desktop) deprecated
- value: 28px (express | mobile) deprecated
--spectrum-slider-control-height-extra-large- value: 20px (spectrum | desktop)
- value: 26px (spectrum | mobile)
- value: 24px (express | desktop) deprecated
- value: 30px (express | mobile) deprecated
--spectrum-slider-handle-size-small- value: 14px (spectrum | desktop)
- value: 18px (spectrum | mobile)
- value: 18px (express | desktop) deprecated
- value: 22px (express | mobile) deprecated
--spectrum-slider-handle-size-medium- value: 16px (spectrum | desktop)
- value: 20px (spectrum | mobile)
- value: 20px (express | desktop) deprecated
- value: 24px (express | mobile) deprecated
--spectrum-slider-handle-size-large- value: 18px (spectrum | desktop)
- value: 22px (spectrum | mobile)
- value: 22px (express | desktop) deprecated
- value: 28px (express | mobile) deprecated
--spectrum-slider-handle-size-extra-large- value: 20px (spectrum | desktop)
- value: 26px (spectrum | mobile)
- value: 24px (express | desktop) deprecated
- value: 30px (express | mobile) deprecated
--spectrum-slider-handle-border-width-down-small- value: 5px (spectrum | desktop)
- value: 7px (spectrum | mobile)
- value:
--spectrum-border-width-200(express | desktop) deprecated - value:
--spectrum-border-width-200(express | mobile) deprecated
--spectrum-slider-handle-border-width-down-medium- value: 6px (spectrum | desktop)
- value: 8px (spectrum | mobile)
- value:
--spectrum-border-width-200(express | desktop) deprecated - value:
--spectrum-border-width-200(express | mobile) deprecated
--spectrum-slider-handle-border-width-down-large- value: 7px (spectrum | desktop)
- value: 9px (spectrum | mobile)
- value:
--spectrum-border-width-200(express | desktop) deprecated - value:
--spectrum-border-width-200(express | mobile) deprecated
--spectrum-slider-handle-border-width-down-extra-large- value: 8px (spectrum | desktop)
- value: 11px (spectrum | mobile)
- value:
--spectrum-border-width-200(express | desktop) deprecated - value:
--spectrum-border-width-200(express | mobile) deprecated
--spectrum-slider-handle-gap- value: 4px (spectrum)
- value: 0px (express) deprecated
--spectrum-slider-bottom-to-handle-small- value: 5px (spectrum | desktop)
- value: 6px (spectrum | mobile)
- value: 3px (express | desktop) deprecated
- value: 4px (express | mobile) deprecated
--spectrum-slider-bottom-to-handle-medium- value: 8px (spectrum | desktop)
- value: 10px (spectrum | mobile)
- value: 6px (express | desktop) deprecated
- value: 8px (express | mobile) deprecated
--spectrum-slider-bottom-to-handle-large- value: 11px (spectrum | desktop)
- value: 14px (spectrum | mobile)
- value: 9px (express | desktop) deprecated
- value: 12px (express | mobile) deprecated
--spectrum-slider-bottom-to-handle-extra-large- value: 14px (spectrum | desktop)
- value: 17px (spectrum | mobile)
- value: 12px (express | desktop) deprecated
- value: 15px (express | mobile) deprecated
--spectrum-picker-border-width- value:
--spectrum-border-width-100(spectrum) - value: 0 (express)
- value:
--spectrum-in-field-button-fill-stacked-inner-border-rounding- value: 0px (spectrum)
- value: 1px (express)
--spectrum-in-field-button-edge-to-fill- value: 0px (spectrum)
- value: 4px (express)
--spectrum-in-field-button-stacked-inner-edge-to-fill- value: 0px (spectrum)
- value: 1px (express)
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium- value: 3px (spectrum)
- value: 5px (express)
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large- value: 4px (spectrum)
- value: 7px (express)
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large- value: 5px (spectrum)
- value: 8px (express)
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small(spectrum) - value: 1px (express)
- value:
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium(spectrum) - value: 1px (express)
- value:
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large(spectrum) - value: 3px (express)
- value:
--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large- value:
--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large(spectrum) - value: 4px (express)
- value:
--spectrum-icon-color-blue-primary-default- value:
--spectrum-blue-800(darkest)
- value:
--spectrum-icon-color-green-primary-default- value:
--spectrum-green-800(darkest)
- value:
--spectrum-icon-color-red-primary-default- value:
--spectrum-red-700(darkest)
- value:
--spectrum-icon-color-yellow-primary-default- value:
--spectrum-yellow-1000(darkest)
- value:
--spectrum-white- value: rgb(255, 255, 255)
--spectrum-transparent-white-100- value: rgba(255, 255, 255, 0)
--spectrum-transparent-white-200- value: rgba(255, 255, 255, 0.1)
--spectrum-transparent-white-300- value: rgba(255, 255, 255, 0.25)
--spectrum-transparent-white-400- value: rgba(255, 255, 255, 0.4)
--spectrum-transparent-white-500- value: rgba(255, 255, 255, 0.55)
--spectrum-transparent-white-600- value: rgba(255, 255, 255, 0.7)
--spectrum-transparent-white-700- value: rgba(255, 255, 255, 0.8)
--spectrum-transparent-white-800- value: rgba(255, 255, 255, 0.9)
--spectrum-transparent-white-900- value: rgb(255, 255, 255)
--spectrum-transparent-black-100- value: rgba(0, 0, 0, 0)
--spectrum-transparent-black-200- value: rgba(0, 0, 0, 0.1)
--spectrum-transparent-black-300- value: rgba(0, 0, 0, 0.25)
--spectrum-transparent-black-400- value: rgba(0, 0, 0, 0.4)
--spectrum-transparent-black-500- value: rgba(0, 0, 0, 0.55)
--spectrum-transparent-black-600- value: rgba(0, 0, 0, 0.7)
--spectrum-transparent-black-700- value: rgba(0, 0, 0, 0.8)
--spectrum-transparent-black-800- value: rgba(0, 0, 0, 0.9)
--spectrum-transparent-black-900- value: rgb(0, 0, 0)
--spectrum-gray-50- value: rgb(0, 0, 0) (darkest)
--spectrum-gray-75- value: rgb(14, 14, 14) (darkest)
--spectrum-gray-100- value: rgb(29, 29, 29) (darkest)
--spectrum-gray-200- value: rgb(48, 48, 48) (darkest)
--spectrum-gray-300- value: rgb(75, 75, 75) (darkest)
--spectrum-gray-400- value: rgb(106, 106, 106) (darkest)
--spectrum-gray-500- value: rgb(141, 141, 141) (darkest)
--spectrum-gray-600- value: rgb(176, 176, 176) (darkest)
--spectrum-gray-700- value: rgb(208, 208, 208) (darkest)
--spectrum-gray-800- value: rgb(235, 235, 235) (darkest)
--spectrum-gray-900- value: rgb(255, 255, 255) (darkest)
--spectrum-blue-100- value: rgb(0, 38, 81) (darkest)
--spectrum-blue-200- value: rgb(0, 50, 106) (darkest)
--spectrum-blue-300- value: rgb(0, 64, 135) (darkest)
--spectrum-blue-400- value: rgb(0, 78, 166) (darkest)
--spectrum-blue-500- value: rgb(0, 92, 200) (darkest)
--spectrum-blue-600- value: rgb(6, 108, 231) (darkest)
--spectrum-blue-700- value: rgb(29, 128, 245) (darkest)
--spectrum-blue-800- value: rgb(64, 150, 243) (darkest)
--spectrum-blue-900- value: rgb(94, 170, 247) (darkest)
--spectrum-blue-1000- value: rgb(124, 189, 250) (darkest)
--spectrum-blue-1100- value: rgb(152, 206, 253) (darkest)
--spectrum-blue-1200- value: rgb(179, 222, 254) (darkest)
--spectrum-blue-1300- value: rgb(206, 234, 255) (darkest)
--spectrum-blue-1400- value: rgb(227, 243, 255) (darkest)
--spectrum-red-100- value: rgb(87, 0, 0) (darkest)
--spectrum-red-200- value: rgb(110, 0, 0) (darkest)
--spectrum-red-300- value: rgb(138, 0, 0) (darkest)
--spectrum-red-400- value: rgb(167, 0, 0) (darkest)
--spectrum-red-500- value: rgb(196, 7, 6) (darkest)
--spectrum-red-600- value: rgb(221, 33, 24) (darkest)
--spectrum-red-700- value: rgb(238, 67, 49) (darkest)
--spectrum-red-800- value: rgb(249, 99, 76) (darkest)
--spectrum-red-900- value: rgb(255, 129, 107) (darkest)
--spectrum-red-1000- value: rgb(255, 158, 140) (darkest)
--spectrum-red-1100- value: rgb(255, 183, 169) (darkest)
--spectrum-red-1200- value: rgb(255, 205, 195) (darkest)
--spectrum-red-1300- value: rgb(255, 223, 217) (darkest)
--spectrum-red-1400- value: rgb(255, 237, 234) (darkest)
--spectrum-orange-100- value: rgb(72, 24, 1) (darkest)
--spectrum-orange-200- value: rgb(92, 32, 0) (darkest)
--spectrum-orange-300- value: rgb(115, 43, 0) (darkest)
--spectrum-orange-400- value: rgb(138, 55, 0) (darkest)
--spectrum-orange-500- value: rgb(162, 68, 0) (darkest)
--spectrum-orange-600- value: rgb(186, 82, 0) (darkest)
--spectrum-orange-700- value: rgb(210, 98, 0) (darkest)
--spectrum-orange-800- value: rgb(232, 116, 0) (darkest)
--spectrum-orange-900- value: rgb(249, 137, 23) (darkest)
--spectrum-orange-1000- value: rgb(255, 162, 59) (darkest)
--spectrum-orange-1100- value: rgb(255, 188, 102) (darkest)
--spectrum-orange-1200- value: rgb(253, 210, 145) (darkest)
--spectrum-orange-1300- value: rgb(255, 226, 181) (darkest)
--spectrum-orange-1400- value: rgb(255, 239, 213) (darkest)
--spectrum-yellow-100- value: rgb(53, 36, 0) (darkest)
--spectrum-yellow-200- value: rgb(68, 47, 0) (darkest)
--spectrum-yellow-300- value: rgb(86, 62, 0) (darkest)
--spectrum-yellow-400- value: rgb(103, 77, 0) (darkest)
--spectrum-yellow-500- value: rgb(122, 92, 0) (darkest)
--spectrum-yellow-600- value: rgb(141, 108, 0) (darkest)
--spectrum-yellow-700- value: rgb(161, 126, 0) (darkest)
--spectrum-yellow-800- value: rgb(180, 144, 0) (darkest)
--spectrum-yellow-900- value: rgb(199, 162, 0) (darkest)
--spectrum-yellow-1000- value: rgb(216, 181, 0) (darkest)
--spectrum-yellow-1100- value: rgb(233, 199, 0) (darkest)
--spectrum-yellow-1200- value: rgb(247, 216, 4) (darkest)
--spectrum-yellow-1300- value: rgb(249, 233, 97) (darkest)
--spectrum-yellow-1400- value: rgb(252, 243, 170) (darkest)
--spectrum-chartreuse-100- value: rgb(32, 43, 0) (darkest)
--spectrum-chartreuse-200- value: rgb(42, 56, 0) (darkest)
--spectrum-chartreuse-300- value: rgb(54, 72, 0) (darkest)
--spectrum-chartreuse-400- value: rgb(66, 88, 0) (darkest)
--spectrum-chartreuse-500- value: rgb(79, 105, 0) (darkest)
--spectrum-chartreuse-600- value: rgb(93, 123, 0) (darkest)
--spectrum-chartreuse-700- value: rgb(107, 142, 0) (darkest)
--spectrum-chartreuse-800- value: rgb(122, 161, 0) (darkest)
--spectrum-chartreuse-900- value: rgb(138, 180, 3) (darkest)
--spectrum-chartreuse-1000- value: rgb(154, 198, 11) (darkest)
--spectrum-chartreuse-1100- value: rgb(170, 216, 22) (darkest)
--spectrum-chartreuse-1200- value: rgb(187, 232, 41) (darkest)
--spectrum-chartreuse-1300- value: rgb(205, 246, 72) (darkest)
--spectrum-chartreuse-1400- value: rgb(225, 253, 132) (darkest)
--spectrum-celery-100- value: rgb(0, 47, 7) (darkest)
--spectrum-celery-200- value: rgb(0, 61, 9) (darkest)
--spectrum-celery-300- value: rgb(0, 77, 12) (darkest)
--spectrum-celery-400- value: rgb(0, 95, 15) (darkest)
--spectrum-celery-500- value: rgb(0, 113, 15) (darkest)
--spectrum-celery-600- value: rgb(0, 132, 15) (darkest)
--spectrum-celery-700- value: rgb(0, 151, 20) (darkest)
--spectrum-celery-800- value: rgb(13, 171, 37) (darkest)
--spectrum-celery-900- value: rgb(45, 191, 58) (darkest)
--spectrum-celery-1000- value: rgb(80, 208, 82) (darkest)
--spectrum-celery-1100- value: rgb(115, 224, 107) (darkest)
--spectrum-celery-1200- value: rgb(147, 237, 131) (darkest)
--spectrum-celery-1300- value: rgb(180, 247, 162) (darkest)
--spectrum-celery-1400- value: rgb(213, 252, 202) (darkest)
--spectrum-green-100- value: rgb(10, 44, 28) (darkest)
--spectrum-green-200- value: rgb(7, 59, 36) (darkest)
--spectrum-green-300- value: rgb(0, 76, 46) (darkest)
--spectrum-green-400- value: rgb(0, 93, 57) (darkest)
--spectrum-green-500- value: rgb(0, 111, 69) (darkest)
--spectrum-green-600- value: rgb(0, 130, 82) (darkest)
--spectrum-green-700- value: rgb(0, 149, 98) (darkest)
--spectrum-green-800- value: rgb(28, 168, 114) (darkest)
--spectrum-green-900- value: rgb(52, 187, 132) (darkest)
--spectrum-green-1000- value: rgb(75, 205, 149) (darkest)
--spectrum-green-1100- value: rgb(103, 222, 168) (darkest)
--spectrum-green-1200- value: rgb(137, 236, 188) (darkest)
--spectrum-green-1300- value: rgb(177, 244, 209) (darkest)
--spectrum-green-1400- value: rgb(214, 249, 228) (darkest)
--spectrum-seafoam-100- value: rgb(18, 43, 42) (darkest)
--spectrum-seafoam-200- value: rgb(19, 57, 55) (darkest)
--spectrum-seafoam-300- value: rgb(16, 73, 70) (darkest)
--spectrum-seafoam-400- value: rgb(3, 91, 88) (darkest)
--spectrum-seafoam-500- value: rgb(0, 108, 104) (darkest)
--spectrum-seafoam-600- value: rgb(0, 127, 121) (darkest)
--spectrum-seafoam-700- value: rgb(0, 146, 140) (darkest)
--spectrum-seafoam-800- value: rgb(0, 165, 159) (darkest)
--spectrum-seafoam-900- value: rgb(26, 185, 178) (darkest)
--spectrum-seafoam-1000- value: rgb(66, 202, 195) (darkest)
--spectrum-seafoam-1100- value: rgb(102, 218, 211) (darkest)
--spectrum-seafoam-1200- value: rgb(139, 232, 225) (darkest)
--spectrum-seafoam-1300- value: rgb(179, 242, 237) (darkest)
--spectrum-seafoam-1400- value: rgb(215, 248, 244) (darkest)
--spectrum-cyan-100- value: rgb(0, 41, 68) (darkest)
--spectrum-cyan-200- value: rgb(0, 54, 88) (darkest)
--spectrum-cyan-300- value: rgb(0, 69, 108) (darkest)
--spectrum-cyan-400- value: rgb(0, 86, 128) (darkest)
--spectrum-cyan-500- value: rgb(0, 103, 147) (darkest)
--spectrum-cyan-600- value: rgb(0, 121, 167) (darkest)
--spectrum-cyan-700- value: rgb(0, 140, 186) (darkest)
--spectrum-cyan-800- value: rgb(4, 160, 205) (darkest)
--spectrum-cyan-900- value: rgb(23, 180, 221) (darkest)
--spectrum-cyan-1000- value: rgb(57, 199, 234) (darkest)
--spectrum-cyan-1100- value: rgb(96, 216, 243) (darkest)
--spectrum-cyan-1200- value: rgb(134, 230, 250) (darkest)
--spectrum-cyan-1300- value: rgb(170, 242, 255) (darkest)
--spectrum-cyan-1400- value: rgb(206, 249, 255) (darkest)
--spectrum-indigo-100- value: rgb(26, 29, 97) (darkest)
--spectrum-indigo-200- value: rgb(35, 39, 125) (darkest)
--spectrum-indigo-300- value: rgb(46, 50, 158) (darkest)
--spectrum-indigo-400- value: rgb(58, 63, 189) (darkest)
--spectrum-indigo-500- value: rgb(73, 78, 216) (darkest)
--spectrum-indigo-600- value: rgb(90, 96, 235) (darkest)
--spectrum-indigo-700- value: rgb(110, 115, 246) (darkest)
--spectrum-indigo-800- value: rgb(132, 136, 253) (darkest)
--spectrum-indigo-900- value: rgb(153, 157, 255) (darkest)
--spectrum-indigo-1000- value: rgb(174, 177, 255) (darkest)
--spectrum-indigo-1100- value: rgb(194, 196, 255) (darkest)
--spectrum-indigo-1200- value: rgb(212, 213, 255) (darkest)
--spectrum-indigo-1300- value: rgb(227, 228, 255) (darkest)
--spectrum-indigo-1400- value: rgb(240, 240, 255) (darkest)
--spectrum-purple-100- value: rgb(50, 16, 104) (darkest)
--spectrum-purple-200- value: rgb(67, 13, 140) (darkest)
--spectrum-purple-300- value: rgb(86, 16, 173) (darkest)
--spectrum-purple-400- value: rgb(106, 29, 200) (darkest)
--spectrum-purple-500- value: rgb(126, 49, 222) (darkest)
--spectrum-purple-600- value: rgb(145, 70, 236) (darkest)
--spectrum-purple-700- value: rgb(162, 94, 246) (darkest)
--spectrum-purple-800- value: rgb(178, 119, 250) (darkest)
--spectrum-purple-900- value: rgb(192, 143, 252) (darkest)
--spectrum-purple-1000- value: rgb(206, 166, 253) (darkest)
--spectrum-purple-1100- value: rgb(219, 188, 254) (darkest)
--spectrum-purple-1200- value: rgb(230, 207, 255) (darkest)
--spectrum-purple-1300- value: rgb(240, 224, 255) (darkest)
--spectrum-purple-1400- value: rgb(248, 237, 255) (darkest)
--spectrum-fuchsia-100- value: rgb(70, 14, 68) (darkest)
--spectrum-fuchsia-200- value: rgb(93, 9, 92) (darkest)
--spectrum-fuchsia-300- value: rgb(120, 0, 120) (darkest)
--spectrum-fuchsia-400- value: rgb(146, 0, 147) (darkest)
--spectrum-fuchsia-500- value: rgb(169, 19, 170) (darkest)
--spectrum-fuchsia-600- value: rgb(191, 43, 191) (darkest)
--spectrum-fuchsia-700- value: rgb(211, 65, 213) (darkest)
--spectrum-fuchsia-800- value: rgb(228, 91, 229) (darkest)
--spectrum-fuchsia-900- value: rgb(239, 120, 238) (darkest)
--spectrum-fuchsia-1000- value: rgb(246, 149, 243) (darkest)
--spectrum-fuchsia-1100- value: rgb(251, 175, 246) (darkest)
--spectrum-fuchsia-1200- value: rgb(254, 199, 248) (darkest)
--spectrum-fuchsia-1300- value: rgb(255, 220, 250) (darkest)
--spectrum-fuchsia-1400- value: rgb(255, 235, 252) (darkest)
--spectrum-magenta-100- value: rgb(83, 3, 41) (darkest)
--spectrum-magenta-200- value: rgb(106, 0, 52) (darkest)
--spectrum-magenta-300- value: rgb(133, 0, 65) (darkest)
--spectrum-magenta-400- value: rgb(161, 0, 78) (darkest)
--spectrum-magenta-500- value: rgb(186, 22, 93) (darkest)
--spectrum-magenta-600- value: rgb(209, 43, 114) (darkest)
--spectrum-magenta-700- value: rgb(227, 69, 137) (darkest)
--spectrum-magenta-800- value: rgb(241, 97, 156) (darkest)
--spectrum-magenta-900- value: rgb(252, 124, 173) (darkest)
--spectrum-magenta-1000- value: rgb(255, 152, 191) (darkest)
--spectrum-magenta-1100- value: rgb(255, 179, 207) (darkest)
--spectrum-magenta-1200- value: rgb(255, 202, 221) (darkest)
--spectrum-magenta-1300- value: rgb(255, 221, 233) (darkest)
--spectrum-magenta-1400- value: rgb(255, 236, 243) (darkest)
--spectrum-opacity-checkerboard-square-dark- value:
--spectrum-gray-800(darkest)
- value:
--spectrum-overlay-opacity- value: 0.6 (darkest)
--spectrum-drop-shadow-color- value: rgba(0, 0, 0, 0.15) (light)
- value: rgba(0, 0, 0, 0.5) (dark)
- value: rgba(0, 0, 0, 0.8) (darkest)
--spectrum-background-base-color- value:
--spectrum-gray-200(light) - value:
--spectrum-gray-50(dark) - value:
--spectrum-gray-50(darkest)
- value:
--spectrum-background-layer-1-color- value:
--spectrum-gray-100(light) - value:
--spectrum-gray-75(dark) - value:
--spectrum-gray-75(darkest)
- value:
--spectrum-background-layer-2-color- value:
--spectrum-gray-100(darkest)
- value:
--spectrum-neutral-background-color-default- value:
--spectrum-gray-800(light) - value:
--spectrum-gray-400(dark) - value:
--spectrum-gray-400(darkest)
- value:
--spectrum-neutral-background-color-hover- value:
--spectrum-gray-900(light) - value:
--spectrum-gray-300(dark) - value:
--spectrum-gray-300(darkest)
- value:
--spectrum-neutral-background-color-down- value:
--spectrum-gray-900(light) - value:
--spectrum-gray-200(dark) - value:
--spectrum-gray-200(darkest)
- value:
--spectrum-neutral-background-color-key-focus- value:
--spectrum-gray-900(light) - value:
--spectrum-gray-300(dark) - value:
--spectrum-gray-300(darkest)
- value:
--spectrum-neutral-background-color-selected-default- value:
--spectrum-gray-700(spectrum) - value:
--spectrum-gray-800(express) deprecated
- value:
--spectrum-neutral-background-color-selected-hover- value:
--spectrum-gray-800(spectrum) - value:
--spectrum-gray-900(express) deprecated
- value:
--spectrum-neutral-background-color-selected-down- value:
--spectrum-gray-900(spectrum) - value:
--spectrum-gray-900(express) deprecated
- value:
--spectrum-neutral-background-color-selected-key-focus- value:
--spectrum-gray-800(spectrum) - value:
--spectrum-gray-900(express) deprecated
- value:
--spectrum-neutral-subdued-background-color-default- value:
--spectrum-gray-400(darkest)
- value:
--spectrum-neutral-subdued-background-color-hover- value:
--spectrum-gray-300(darkest)
- value:
--spectrum-neutral-subdued-background-color-down- value:
--spectrum-gray-200(darkest)
- value:
--spectrum-neutral-subdued-background-color-key-focus- value:
--spectrum-gray-300(darkest)
- value:
--spectrum-accent-background-color-default- value:
--spectrum-accent-color-600(darkest)
- value:
--spectrum-accent-background-color-hover- value:
--spectrum-accent-color-500(darkest)
- value:
--spectrum-accent-background-color-down- value:
--spectrum-accent-color-400(darkest)
- value:
--spectrum-accent-background-color-key-focus- value:
--spectrum-accent-color-500(darkest)
- value:
--spectrum-informative-background-color-default- value:
--spectrum-informative-color-600(darkest)
- value:
--spectrum-informative-background-color-hover- value:
--spectrum-informative-color-500(darkest)
- value:
--spectrum-informative-background-color-down- value:
--spectrum-informative-color-400(darkest)
- value:
--spectrum-informative-background-color-key-focus- value:
--spectrum-informative-color-500(darkest)
- value:
--spectrum-negative-background-color-default- value:
--spectrum-negative-color-600(darkest)
- value:
--spectrum-negative-background-color-hover- value:
--spectrum-negative-color-500(darkest)
- value:
--spectrum-negative-background-color-down- value:
--spectrum-negative-color-400(darkest)
- value:
--spectrum-negative-background-color-key-focus- value:
--spectrum-negative-color-500(darkest)
- value:
--spectrum-positive-background-color-default- value:
--spectrum-positive-color-600(darkest)
- value:
--spectrum-positive-background-color-hover- value:
--spectrum-positive-color-500(darkest)
- value:
--spectrum-positive-background-color-down- value:
--spectrum-positive-color-400(darkest)
- value:
--spectrum-positive-background-color-key-focus- value:
--spectrum-positive-color-500(darkest)
- value:
--spectrum-notice-background-color-default- value:
--spectrum-notice-color-800(darkest)
- value:
--spectrum-gray-background-color-default- value:
--spectrum-gray-700(darkest)
- value:
--spectrum-red-background-color-default- value:
--spectrum-red-700(darkest)
- value:
--spectrum-orange-background-color-default- value:
--spectrum-orange-800(darkest)
- value:
--spectrum-yellow-background-color-default- value:
--spectrum-yellow-1000(darkest)
- value:
--spectrum-chartreuse-background-color-default- value:
--spectrum-chartreuse-900(darkest)
- value:
--spectrum-celery-background-color-default- value:
--spectrum-celery-800(darkest)
- value:
--spectrum-green-background-color-default- value:
--spectrum-green-700(darkest)
- value:
--spectrum-seafoam-background-color-default- value:
--spectrum-seafoam-700(darkest)
- value:
--spectrum-cyan-background-color-default- value:
--spectrum-cyan-700(darkest)
- value:
--spectrum-blue-background-color-default- value:
--spectrum-blue-700(darkest)
- value:
--spectrum-indigo-background-color-default- value:
--spectrum-indigo-700(darkest)
- value:
--spectrum-purple-background-color-default- value:
--spectrum-purple-700(darkest)
- value:
--spectrum-fuchsia-background-color-default- value:
--spectrum-fuchsia-700(darkest)
- value:
--spectrum-magenta-background-color-default- value:
--spectrum-magenta-700(darkest)
- value:
--spectrum-neutral-visual-color- value:
--spectrum-gray-600(darkest)
- value:
--spectrum-accent-visual-color- value:
--spectrum-accent-color-900(darkest)
- value:
--spectrum-informative-visual-color- value:
--spectrum-informative-color-900(darkest)
- value:
--spectrum-negative-visual-color- value:
--spectrum-negative-color-700(darkest)
- value:
--spectrum-notice-visual-color- value:
--spectrum-notice-color-900(darkest)
- value:
--spectrum-positive-visual-color- value:
--spectrum-positive-color-800(darkest)
- value:
--spectrum-gray-visual-color- value:
--spectrum-gray-600(darkest)
- value:
--spectrum-red-visual-color- value:
--spectrum-red-700(darkest)
- value:
--spectrum-orange-visual-color- value:
--spectrum-orange-900(darkest)
- value:
--spectrum-yellow-visual-color- value:
--spectrum-yellow-1100(darkest)
- value:
--spectrum-chartreuse-visual-color- value:
--spectrum-chartreuse-900(darkest)
- value:
--spectrum-celery-visual-color- value:
--spectrum-celery-800(darkest)
- value:
--spectrum-green-visual-color- value:
--spectrum-green-800(darkest)
- value:
--spectrum-seafoam-visual-color- value:
--spectrum-seafoam-800(darkest)
- value:
--spectrum-cyan-visual-color- value:
--spectrum-cyan-900(darkest)
- value:
--spectrum-blue-visual-color- value:
--spectrum-blue-900(darkest)
- value:
--spectrum-indigo-visual-color- value:
--spectrum-indigo-900(darkest)
- value:
--spectrum-purple-visual-color- value:
--spectrum-purple-900(darkest)
- value:
--spectrum-fuchsia-visual-color- value:
--spectrum-fuchsia-900(darkest)
- value:
--spectrum-magenta-visual-color- value:
--spectrum-magenta-900(darkest)
- value:
Updated Properties (416)
--spectrum-heading-sans-serif-font-weight--spectrum-heading-serif-font-weight--spectrum-heading-cjk-font-weight--spectrum-heading-sans-serif-emphasized-font-weight--spectrum-heading-serif-emphasized-font-weight--spectrum-accent-color-100--spectrum-accent-color-200--spectrum-accent-color-300--spectrum-accent-color-400--spectrum-accent-color-500--spectrum-accent-color-600--spectrum-accent-color-700--spectrum-accent-color-800--spectrum-accent-color-900--spectrum-accent-color-1000--spectrum-accent-color-1100--spectrum-accent-color-1200--spectrum-accent-color-1300--spectrum-accent-color-1400--spectrum-corner-radius-75--spectrum-corner-radius-100--spectrum-corner-radius-200--spectrum-drop-shadow-x--spectrum-drop-shadow-y--spectrum-drop-shadow-blur--spectrum-text-to-visual-50- value: 6px -> 5px (desktop)
- value: 8px -> 7px (mobile)
--spectrum-text-to-visual-75- value: 7px -> 5px (desktop)
- value: 9px -> 7px (mobile)
--spectrum-text-to-visual-100- value: 8px -> 6px (desktop)
- value: 10px -> 8px (mobile)
--spectrum-text-to-visual-200- value: 9px -> 7px (desktop)
- value: 11px -> 9px (mobile)
--spectrum-text-to-visual-300- value: 10px -> 8px (desktop)
- value: 13px -> 10px (mobile)
--spectrum-border-width-100--spectrum-component-pill-edge-to-visual-75- value: 10px -> 11px (desktop)
- value: 13px -> 15px (mobile)
--spectrum-component-pill-edge-to-visual-200- value: 22px -> 21px (mobile)
--spectrum-component-pill-edge-to-visual-300- value: 21px -> 20px (desktop)
- value: 27px -> 28px (mobile)
--spectrum-component-pill-edge-to-visual-only-75- value: 5px -> 6px (mobile)
--spectrum-component-pill-edge-to-visual-only-100- value: 7px -> 6px (desktop)
- value: 9px -> 8px (mobile)
--spectrum-component-pill-edge-to-visual-only-200- value: 10px -> 9px (desktop)
- value: 13px -> 11px (mobile)
--spectrum-component-pill-edge-to-visual-only-300- value: 13px -> 11px (desktop)
- value: 16px -> 15px (mobile)
--spectrum-component-pill-edge-to-text-75- value: 12px -> 13px (desktop)
- value: 15px -> 17px (mobile)
--spectrum-component-pill-edge-to-text-200- value: 25px -> 24px (mobile)
--spectrum-component-pill-edge-to-text-300- value: 24px -> 23px (desktop)
--spectrum-component-edge-to-visual-50- value: 6px -> 7px (desktop)
- value: 7px -> 9px (mobile)
--spectrum-component-edge-to-visual-75- value: 7px -> 8px (desktop)
- value: 9px -> 11px (mobile)
--spectrum-component-edge-to-visual-200- value: 16px -> 15px (mobile)
--spectrum-component-edge-to-visual-300- value: 15px -> 14px (desktop)
- value: 19px -> 20px (mobile)
--spectrum-component-edge-to-visual-only-50- value: 4px -> 5px (mobile)
--spectrum-component-edge-to-visual-only-75- value: 5px -> 6px (mobile)
--spectrum-component-edge-to-visual-only-100- value: 7px -> 6px (desktop)
- value: 9px -> 8px (mobile)
--spectrum-component-edge-to-visual-only-200- value: 10px -> 9px (desktop)
- value: 13px -> 11px (mobile)
--spectrum-component-edge-to-visual-only-300- value: 13px -> 11px (desktop)
- value: 16px -> 15px (mobile)
--spectrum-component-edge-to-text-50- value: 10px -> 11px (mobile)
--spectrum-component-edge-to-text-75- value: 9px -> 10px (desktop)
- value: 11px -> 13px (mobile)
--spectrum-component-edge-to-text-200- value: 19px -> 18px (mobile)
--spectrum-component-edge-to-text-300- value: 18px -> 17px (desktop)
--spectrum-component-top-to-workflow-icon-50- value: 4px -> 5px (mobile)
--spectrum-component-top-to-workflow-icon-75- value: 5px -> 6px (mobile)
--spectrum-component-top-to-workflow-icon-100- value: 7px -> 6px (desktop)
- value: 9px -> 8px (mobile)
--spectrum-component-top-to-workflow-icon-200- value: 10px -> 9px (desktop)
- value: 13px -> 11px (mobile)
--spectrum-component-top-to-workflow-icon-300- value: 13px -> 11px (desktop)
- value: 16px -> 15px (mobile)
--spectrum-checkbox-control-size-small--spectrum-checkbox-control-size-medium--spectrum-checkbox-control-size-large--spectrum-checkbox-control-size-extra-large--spectrum-checkbox-top-to-control-small--spectrum-checkbox-top-to-control-medium--spectrum-checkbox-top-to-control-large--spectrum-checkbox-top-to-control-extra-large--spectrum-switch-control-width-small--spectrum-switch-control-width-medium--spectrum-switch-control-width-large--spectrum-switch-control-width-extra-large--spectrum-switch-control-height-small--spectrum-switch-control-height-medium--spectrum-switch-control-height-large--spectrum-switch-control-height-extra-large--spectrum-switch-top-to-control-small--spectrum-switch-top-to-control-medium--spectrum-switch-top-to-control-large--spectrum-switch-top-to-control-extra-large--spectrum-radio-button-control-size-small--spectrum-radio-button-control-size-medium--spectrum-radio-button-control-size-large--spectrum-radio-button-control-size-extra-large--spectrum-radio-button-top-to-control-small--spectrum-radio-button-top-to-control-medium--spectrum-radio-button-top-to-control-large--spectrum-radio-button-top-to-control-extra-large--spectrum-slider-track-thickness--spectrum-slider-control-height-small--spectrum-slider-control-height-medium--spectrum-slider-control-height-large--spectrum-slider-control-height-extra-large--spectrum-slider-handle-size-small--spectrum-slider-handle-size-medium--spectrum-slider-handle-size-large--spectrum-slider-handle-size-extra-large--spectrum-slider-handle-border-width-down-small--spectrum-slider-handle-border-width-down-medium--spectrum-slider-handle-border-width-down-large--spectrum-slider-handle-border-width-down-extra-large--spectrum-slider-handle-gap--spectrum-slider-bottom-to-handle-small--spectrum-slider-bottom-to-handle-medium--spectrum-slider-bottom-to-handle-large--spectrum-slider-bottom-to-handle-extra-large--spectrum-picker-border-width--spectrum-color-area-border-rounding- value:
--spectrum-corner-radius-100->--spectrum-corner-radius-medium-size-small
- value:
--spectrum-color-slider-border-rounding- value: 4px ->
--spectrum-corner-radius-medium-size-small
- value: 4px ->
--spectrum-in-field-button-fill-stacked-inner-border-rounding--spectrum-in-field-button-edge-to-fill--spectrum-in-field-button-stacked-inner-edge-to-fill--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large--spectrum-icon-color-blue-primary-default--spectrum-icon-color-green-primary-default--spectrum-icon-color-red-primary-default--spectrum-icon-color-yellow-primary-default--spectrum-workflow-icon-size-50- value: 18px -> 16px (mobile)
--spectrum-workflow-icon-size-75- value: 20px -> 18px (mobile)
--spectrum-workflow-icon-size-100- value: 18px -> 20px (desktop)
- value: 22px -> 24px (mobile)
--spectrum-workflow-icon-size-200- value: 20px -> 22px (desktop)
- value: 24px -> 28px (mobile)
--spectrum-workflow-icon-size-300- value: 22px -> 26px (desktop)
- value: 28px -> 30px (mobile)
--spectrum-white--spectrum-transparent-white-100--spectrum-transparent-white-200--spectrum-transparent-white-300--spectrum-transparent-white-400--spectrum-transparent-white-500--spectrum-transparent-white-600--spectrum-transparent-white-700--spectrum-transparent-white-800--spectrum-transparent-white-900--spectrum-transparent-black-100--spectrum-transparent-black-200--spectrum-transparent-black-300--spectrum-transparent-black-400--spectrum-transparent-black-500--spectrum-transparent-black-600--spectrum-transparent-black-700--spectrum-transparent-black-800--spectrum-transparent-black-900--spectrum-gray-50- value: rgb(255, 255, 255) -> rgb(248, 248, 248) (light)
- value: rgb(29, 29, 29) -> rgb(27, 27, 27) (dark)
--spectrum-gray-75- value: rgb(253, 253, 253) -> rgb(243, 243, 243) (light)
- value: rgb(38, 38, 38) -> rgb(34, 34, 34) (dark)
--spectrum-gray-100- value: rgb(248, 248, 248) -> rgb(233, 233, 233) (light)
- value: rgb(50, 50, 50) -> rgb(44, 44, 44) (dark)
--spectrum-gray-200- value: rgb(230, 230, 230) -> rgb(225, 225, 225) (light)
- value: rgb(63, 63, 63) -> rgb(50, 50, 50) (dark)
--spectrum-gray-300- value: rgb(213, 213, 213) -> rgb(218, 218, 218) (light)
- value: rgb(84, 84, 84) -> rgb(57, 57, 57) (dark)
--spectrum-gray-400- value: rgb(177, 177, 177) -> rgb(198, 198, 198) (light)
- value: rgb(112, 112, 112) -> rgb(68, 68, 68) (dark)
--spectrum-gray-500- value: rgb(144, 144, 144) -> rgb(143, 143, 143) (light)
- value: rgb(144, 144, 144) -> rgb(109, 109, 109) (dark)
--spectrum-gray-600- value: rgb(109, 109, 109) -> rgb(113, 113, 113) (light)
- value: rgb(178, 178, 178) -> rgb(138, 138, 138) (dark)
--spectrum-gray-700- value: rgb(70, 70, 70) -> rgb(80, 80, 80) (light)
- value: rgb(209, 209, 209) -> rgb(175, 175, 175) (dark)
--spectrum-gray-800- value: rgb(34, 34, 34) -> rgb(41, 41, 41) (light)
- value: rgb(235, 235, 235) -> rgb(219, 219, 219) (dark)
--spectrum-gray-900- value: rgb(0, 0, 0) -> rgb(19, 19, 19) (light)
- value: rgb(255, 255, 255) -> rgb(242, 242, 242) (dark)
--spectrum-blue-100- value: rgb(224, 242, 255) -> rgb(245, 249, 255) (light)
- value: rgb(0, 56, 119) -> rgb(14, 23, 63) (dark)
--spectrum-blue-200- value: rgb(202, 232, 255) -> rgb(229, 240, 254) (light)
- value: rgb(0, 65, 138) -> rgb(15, 28, 82) (dark)
--spectrum-blue-300- value: rgb(181, 222, 255) -> rgb(203, 226, 254) (light)
- value: rgb(0, 77, 163) -> rgb(12, 33, 117) (dark)
--spectrum-blue-400- value: rgb(150, 206, 253) -> rgb(172, 207, 253) (light)
- value: rgb(0, 89, 194) -> rgb(18, 45, 154) (dark)
--spectrum-blue-500- value: rgb(120, 187, 250) -> rgb(142, 185, 252) (light)
- value: rgb(3, 103, 224) -> rgb(26, 58, 195) (dark)
--spectrum-blue-600- value: rgb(89, 167, 246) -> rgb(114, 158, 253) (light)
- value: rgb(19, 121, 243) -> rgb(37, 73, 229) (dark)
--spectrum-blue-700- value: rgb(56, 146, 243) -> rgb(93, 137, 255) (light)
- value: rgb(52, 143, 244) -> rgb(52, 91, 248) (dark)
--spectrum-blue-800- value: rgb(20, 122, 243) -> rgb(75, 117, 255) (light)
- value: rgb(84, 163, 246) -> rgb(64, 105, 253) (dark)
--spectrum-blue-900- value: rgb(2, 101, 220) -> rgb(59, 99, 251) (light)
- value: rgb(114, 183, 249) -> rgb(86, 129, 255) (dark)
--spectrum-blue-1000- value: rgb(0, 84, 182) -> rgb(39, 77, 234) (light)
- value: rgb(143, 202, 252) -> rgb(105, 149, 254) (dark)
--spectrum-blue-1100- value: rgb(0, 68, 145) -> rgb(29, 62, 207) (light)
- value: rgb(174, 219, 254) -> rgb(124, 169, 252) (dark)
--spectrum-blue-1200- value: rgb(0, 53, 113) -> rgb(21, 50, 173) (light)
- value: rgb(204, 233, 255) -> rgb(152, 192, 252) (dark)
--spectrum-blue-1300- value: rgb(0, 39, 84) -> rgb(16, 40, 140) (light)
- value: rgb(232, 246, 255) -> rgb(181, 213, 253) (dark)
--spectrum-blue-1400- value: rgb(0, 28, 60) -> rgb(12, 31, 105) (light)
- value: rgb(255, 255, 255) -> rgb(213, 231, 254) (dark)
--spectrum-red-100- value: rgb(255, 235, 231) -> rgb(255, 246, 245) (light)
- value: rgb(123, 0, 0) -> rgb(54, 10, 3) (dark)
--spectrum-red-200- value: rgb(255, 221, 214) -> rgb(255, 235, 232) (light)
- value: rgb(141, 0, 0) -> rgb(68, 13, 5) (dark)
--spectrum-red-300- value: rgb(255, 205, 195) -> rgb(255, 214, 209) (light)
- value: rgb(165, 0, 0) -> rgb(87, 17, 7) (dark)
--spectrum-red-400- value: rgb(255, 183, 169) -> rgb(255, 188, 180) (light)
- value: rgb(190, 4, 3) -> rgb(115, 24, 11) (dark)
--spectrum-red-500- value: rgb(255, 155, 136) -> rgb(255, 157, 145) (light)
- value: rgb(215, 25, 19) -> rgb(147, 31, 17) (dark)
--spectrum-red-600- value: rgb(255, 124, 101) -> rgb(255, 118, 101) (light)
- value: rgb(234, 56, 41) -> rgb(177, 38, 23) (dark)
--spectrum-red-700- value: rgb(247, 92, 70) -> rgb(255, 81, 61) (light)
- value: rgb(246, 88, 67) -> rgb(205, 46, 29) (dark)
--spectrum-red-800- value: rgb(234, 56, 41) -> rgb(240, 56, 35) (light)
- value: rgb(255, 117, 94) -> rgb(223, 52, 34) (dark)
--spectrum-red-900- value: rgb(211, 21, 16) -> rgb(215, 50, 32) (light)
- value: rgb(255, 149, 129) -> rgb(252, 67, 46) (dark)
--spectrum-red-1000- value: rgb(180, 0, 0) -> rgb(183, 40, 24) (light)
- value: rgb(255, 176, 161) -> rgb(255, 103, 86) (dark)
--spectrum-red-1100- value: rgb(147, 0, 0) -> rgb(156, 33, 19) (light)
- value: rgb(255, 201, 189) -> rgb(255, 134, 120) (dark)
--spectrum-red-1200- value: rgb(116, 0, 0) -> rgb(129, 27, 14) (light)
- value: rgb(255, 222, 216) -> rgb(255, 167, 157) (dark)
--spectrum-red-1300- value: rgb(89, 0, 0) -> rgb(104, 21, 10) (light)
- value: rgb(255, 241, 238) -> rgb(255, 196, 189) (dark)
--spectrum-red-1400- value: rgb(67, 0, 0) -> rgb(80, 16, 6) (light)
- value: rgb(255, 255, 255) -> rgb(255, 222, 219) (dark)
--spectrum-orange-100- value: rgb(255, 236, 204) -> rgb(255, 246, 231) (light)
- value: rgb(102, 37, 0) -> rgb(49, 16, 0) (dark)
--spectrum-orange-200- value: rgb(255, 223, 173) -> rgb(255, 236, 207) (light)
- value: rgb(117, 45, 0) -> rgb(61, 21, 0) (dark)
--spectrum-orange-300- value: rgb(253, 210, 145) -> rgb(255, 218, 158) (light)
- value: rgb(137, 55, 0) -> rgb(80, 27, 0) (dark)
--spectrum-orange-400- value: rgb(255, 187, 99) -> rgb(255, 193, 94) (light)
- value: rgb(158, 66, 0) -> rgb(106, 36, 0) (dark)
--spectrum-orange-500- value: rgb(255, 160, 55) -> rgb(255, 162, 19) (light)
- value: rgb(180, 78, 0) -> rgb(135, 47, 0) (dark)
--spectrum-orange-600- value: rgb(246, 133, 17) -> rgb(252, 125, 0) (light)
- value: rgb(202, 93, 0) -> rgb(162, 59, 0) (dark)
--spectrum-orange-700- value: rgb(228, 111, 0) -> rgb(232, 106, 0) (light)
- value: rgb(225, 109, 0) -> rgb(185, 73, 0) (dark)
--spectrum-orange-800- value: rgb(203, 93, 0) -> rgb(212, 91, 0) (light)
- value: rgb(244, 129, 12) -> rgb(199, 82, 0) (dark)
--spectrum-orange-900- value: rgb(177, 76, 0) -> rgb(194, 78, 0) (light)
- value: rgb(254, 154, 46) -> rgb(224, 100, 0) (dark)
--spectrum-orange-1000- value: rgb(149, 61, 0) -> rgb(167, 62, 0) (light)
- value: rgb(255, 181, 88) -> rgb(243, 117, 0) (dark)
--spectrum-orange-1100- value: rgb(122, 47, 0) -> rgb(144, 51, 0) (light)
- value: rgb(253, 206, 136) -> rgb(255, 137, 0) (dark)
--spectrum-orange-1200- value: rgb(97, 35, 0) -> rgb(118, 41, 0) (light)
- value: rgb(255, 225, 179) -> rgb(255, 173, 45) (dark)
--spectrum-orange-1300- value: rgb(73, 25, 1) -> rgb(95, 32, 0) (light)
- value: rgb(255, 242, 221) -> rgb(255, 201, 116) (dark)
--spectrum-orange-1400- value: rgb(53, 18, 1) -> rgb(73, 24, 0) (light)
- value: rgb(255, 253, 249) -> rgb(255, 225, 178) (dark)
--spectrum-yellow-100- value: rgb(251, 241, 152) -> rgb(255, 248, 204) (light)
- value: rgb(76, 54, 0) -> rgb(37, 23, 0) (dark)
--spectrum-yellow-200- value: rgb(248, 231, 80) -> rgb(255, 241, 151) (light)
- value: rgb(88, 64, 0) -> rgb(47, 29, 0) (dark)
--spectrum-yellow-300- value: rgb(248, 217, 4) -> rgb(255, 222, 44) (light)
- value: rgb(103, 76, 0) -> rgb(61, 39, 0) (dark)
--spectrum-yellow-400- value: rgb(232, 198, 0) -> rgb(245, 199, 0) (light)
- value: rgb(119, 89, 0) -> rgb(83, 52, 0) (dark)
--spectrum-yellow-500- value: rgb(215, 179, 0) -> rgb(230, 175, 0) (light)
- value: rgb(136, 104, 0) -> rgb(107, 67, 0) (dark)
--spectrum-yellow-600- value: rgb(196, 159, 0) -> rgb(210, 149, 0) (light)
- value: rgb(155, 120, 0) -> rgb(130, 82, 0) (dark)
--spectrum-yellow-700- value: rgb(176, 140, 0) -> rgb(193, 131, 0) (light)
- value: rgb(174, 137, 0) -> rgb(151, 97, 0) (dark)
--spectrum-yellow-800- value: rgb(155, 120, 0) -> rgb(175, 116, 0) (light)
- value: rgb(192, 156, 0) -> rgb(164, 106, 0) (dark)
--spectrum-yellow-900- value: rgb(133, 102, 0) -> rgb(158, 102, 0) (light)
- value: rgb(211, 174, 0) -> rgb(186, 124, 0) (dark)
--spectrum-yellow-1000- value: rgb(112, 83, 0) -> rgb(134, 85, 0) (light)
- value: rgb(228, 194, 0) -> rgb(203, 141, 0) (dark)
--spectrum-yellow-1100- value: rgb(91, 67, 0) -> rgb(114, 72, 0) (light)
- value: rgb(244, 213, 0) -> rgb(218, 159, 0) (dark)
--spectrum-yellow-1200- value: rgb(72, 51, 0) -> rgb(93, 59, 0) (light)
- value: rgb(249, 232, 92) -> rgb(235, 183, 0) (dark)
--spectrum-yellow-1300- value: rgb(54, 37, 0) -> rgb(75, 47, 0) (light)
- value: rgb(252, 246, 187) -> rgb(249, 206, 0) (dark)
--spectrum-yellow-1400- value: rgb(40, 26, 0) -> rgb(56, 35, 0) (light)
- value: rgb(255, 255, 255) -> rgb(255, 230, 86) (dark)
--spectrum-chartreuse-100- value: rgb(219, 252, 110) -> rgb(246, 251, 222) (light)
- value: rgb(48, 64, 0) -> rgb(23, 28, 0) (dark)
--spectrum-chartreuse-200- value: rgb(203, 244, 67) -> rgb(234, 246, 173) (light)
- value: rgb(55, 74, 0) -> rgb(30, 36, 0) (dark)
--spectrum-chartreuse-300- value: rgb(188, 233, 42) -> rgb(208, 236, 70) (light)
- value: rgb(65, 87, 0) -> rgb(39, 47, 0) (dark)
--spectrum-chartreuse-400- value: rgb(170, 216, 22) -> rgb(182, 219, 0) (light)
- value: rgb(76, 102, 0) -> rgb(53, 63, 0) (dark)
--spectrum-chartreuse-500- value: rgb(152, 197, 10) -> rgb(163, 196, 0) (light)
- value: rgb(89, 118, 0) -> rgb(68, 82, 0) (dark)
--spectrum-chartreuse-600- value: rgb(135, 177, 3) -> rgb(143, 172, 0) (light)
- value: rgb(102, 136, 0) -> rgb(83, 100, 0) (dark)
--spectrum-chartreuse-700- value: rgb(118, 156, 0) -> rgb(128, 153, 0) (light)
- value: rgb(117, 154, 0) -> rgb(97, 116, 0) (dark)
--spectrum-chartreuse-800- value: rgb(103, 136, 0) -> rgb(114, 137, 0) (light)
- value: rgb(132, 173, 1) -> rgb(106, 127, 0) (dark)
--spectrum-chartreuse-900- value: rgb(87, 116, 0) -> rgb(102, 122, 0) (light)
- value: rgb(148, 192, 8) -> rgb(122, 147, 0) (dark)
--spectrum-chartreuse-1000- value: rgb(72, 96, 0) -> rgb(86, 103, 0) (light)
- value: rgb(166, 211, 18) -> rgb(136, 164, 0) (dark)
--spectrum-chartreuse-1100- value: rgb(58, 77, 0) -> rgb(73, 87, 0) (light)
- value: rgb(184, 229, 37) -> rgb(151, 181, 0) (dark)
--spectrum-chartreuse-1200- value: rgb(44, 59, 0) -> rgb(60, 71, 0) (light)
- value: rgb(205, 245, 71) -> rgb(169, 203, 0) (dark)
--spectrum-chartreuse-1300- value: rgb(33, 44, 0) -> rgb(47, 57, 0) (light)
- value: rgb(231, 254, 154) -> rgb(187, 225, 0) (dark)
--spectrum-chartreuse-1400- value: rgb(24, 31, 0) -> rgb(35, 43, 0) (light)
- value: rgb(255, 255, 255) -> rgb(219, 240, 117) (dark)
--spectrum-celery-100- value: rgb(205, 252, 191) -> rgb(235, 255, 220) (light)
- value: rgb(0, 69, 10) -> rgb(11, 31, 0) (dark)
--spectrum-celery-200- value: rgb(174, 246, 157) -> rgb(197, 255, 156) (light)
- value: rgb(0, 80, 12) -> rgb(15, 38, 0) (dark)
--spectrum-celery-300- value: rgb(150, 238, 133) -> rgb(157, 247, 92) (light)
- value: rgb(0, 94, 14) -> rgb(21, 51, 1) (dark)
--spectrum-celery-400- value: rgb(114, 224, 106) -> rgb(129, 228, 58) (light)
- value: rgb(0, 109, 15) -> rgb(31, 67, 4) (dark)
--spectrum-celery-500- value: rgb(78, 207, 80) -> rgb(110, 206, 42) (light)
- value: rgb(0, 127, 15) -> rgb(41, 86, 8) (dark)
--spectrum-celery-600- value: rgb(39, 187, 54) -> rgb(93, 180, 31) (light)
- value: rgb(0, 145, 18) -> rgb(50, 105, 11) (dark)
--spectrum-celery-700- value: rgb(7, 167, 33) -> rgb(82, 161, 25) (light)
- value: rgb(4, 165, 30) -> rgb(60, 122, 15) (dark)
--spectrum-celery-800- value: rgb(0, 145, 18) -> rgb(72, 144, 20) (light)
- value: rgb(34, 184, 51) -> rgb(66, 134, 18) (dark)
--spectrum-celery-900- value: rgb(0, 124, 15) -> rgb(64, 129, 17) (light)
- value: rgb(68, 202, 73) -> rgb(78, 154, 23) (dark)
--spectrum-celery-1000- value: rgb(0, 103, 15) -> rgb(52, 109, 12) (light)
- value: rgb(105, 220, 99) -> rgb(88, 172, 28) (dark)
--spectrum-celery-1100- value: rgb(0, 83, 13) -> rgb(44, 92, 9) (light)
- value: rgb(142, 235, 127) -> rgb(100, 190, 35) (dark)
--spectrum-celery-1200- value: rgb(0, 64, 10) -> rgb(35, 75, 6) (light)
- value: rgb(180, 247, 162) -> rgb(116, 213, 46) (dark)
--spectrum-celery-1300- value: rgb(0, 48, 7) -> rgb(27, 60, 3) (light)
- value: rgb(221, 253, 211) -> rgb(136, 234, 65) (dark)
--spectrum-celery-1400- value: rgb(0, 34, 5) -> rgb(19, 46, 0) (light)
- value: rgb(255, 255, 255) -> rgb(170, 251, 112) (dark)
--spectrum-green-100- value: rgb(206, 248, 224) -> rgb(237, 252, 241) (light)
- value: rgb(4, 67, 41) -> rgb(0, 30, 23) (dark)
--spectrum-green-200- value: rgb(173, 244, 206) -> rgb(215, 247, 225) (light)
- value: rgb(0, 78, 47) -> rgb(0, 38, 29) (dark)
--spectrum-green-300- value: rgb(137, 236, 188) -> rgb(173, 238, 197) (light)
- value: rgb(0, 92, 56) -> rgb(0, 51, 38) (dark)
--spectrum-green-400- value: rgb(103, 222, 168) -> rgb(107, 227, 162) (light)
- value: rgb(0, 108, 67) -> rgb(0, 68, 48) (dark)
--spectrum-green-500- value: rgb(73, 204, 147) -> rgb(43, 209, 125) (light)
- value: rgb(0, 125, 78) -> rgb(2, 87, 58) (dark)
--spectrum-green-600- value: rgb(47, 184, 128) -> rgb(18, 184, 103) (light)
- value: rgb(0, 143, 93) -> rgb(3, 106, 67) (dark)
--spectrum-green-700- value: rgb(21, 164, 110) -> rgb(11, 164, 93) (light)
- value: rgb(18, 162, 108) -> rgb(4, 124, 75) (dark)
--spectrum-green-800- value: rgb(0, 143, 93) -> rgb(7, 147, 85) (light)
- value: rgb(43, 180, 125) -> rgb(6, 136, 80) (dark)
--spectrum-green-900- value: rgb(0, 122, 77) -> rgb(5, 131, 78) (light)
- value: rgb(67, 199, 143) -> rgb(9, 157, 89) (dark)
--spectrum-green-1000- value: rgb(0, 101, 62) -> rgb(3, 110, 69) (light)
- value: rgb(94, 217, 162) -> rgb(14, 175, 98) (dark)
--spectrum-green-1100- value: rgb(0, 81, 50) -> rgb(2, 93, 60) (light)
- value: rgb(129, 233, 184) -> rgb(24, 193, 110) (dark)
--spectrum-green-1200- value: rgb(5, 63, 39) -> rgb(1, 76, 52) (light)
- value: rgb(177, 244, 209) -> rgb(57, 215, 134) (dark)
--spectrum-green-1300- value: rgb(10, 46, 29) -> rgb(0, 61, 44) (light)
- value: rgb(223, 250, 234) -> rgb(126, 231, 172) (dark)
--spectrum-green-1400- value: rgb(10, 32, 21) -> rgb(0, 46, 34) (light)
- value: rgb(254, 255, 252) -> rgb(189, 241, 208) (dark)
--spectrum-seafoam-100- value: rgb(206, 247, 243) -> rgb(235, 251, 246) (light)
- value: rgb(18, 65, 63) -> rgb(0, 30, 27) (dark)
--spectrum-seafoam-200- value: rgb(170, 241, 234) -> rgb(211, 246, 234) (light)
- value: rgb(14, 76, 73) -> rgb(0, 39, 35) (dark)
--spectrum-seafoam-300- value: rgb(140, 233, 226) -> rgb(169, 237, 216) (light)
- value: rgb(4, 90, 87) -> rgb(0, 50, 44) (dark)
--spectrum-seafoam-400- value: rgb(101, 218, 210) -> rgb(92, 225, 194) (light)
- value: rgb(0, 105, 101) -> rgb(0, 67, 59) (dark)
--spectrum-seafoam-500- value: rgb(63, 201, 193) -> rgb(16, 207, 169) (light)
- value: rgb(0, 122, 117) -> rgb(2, 86, 75) (dark)
--spectrum-seafoam-600- value: rgb(15, 181, 174) -> rgb(13, 181, 149) (light)
- value: rgb(0, 140, 135) -> rgb(4, 105, 89) (dark)
--spectrum-seafoam-700- value: rgb(0, 161, 154) -> rgb(11, 162, 134) (light)
- value: rgb(0, 158, 152) -> rgb(6, 122, 103) (dark)
--spectrum-seafoam-800- value: rgb(0, 140, 135) -> rgb(9, 144, 120) (light)
- value: rgb(3, 178, 171) -> rgb(8, 134, 112) (dark)
--spectrum-seafoam-900- value: rgb(0, 119, 114) -> rgb(7, 129, 109) (light)
- value: rgb(54, 197, 189) -> rgb(10, 154, 128) (dark)
--spectrum-seafoam-1000- value: rgb(0, 99, 95) -> rgb(5, 108, 92) (light)
- value: rgb(93, 214, 207) -> rgb(12, 173, 142) (dark)
--spectrum-seafoam-1100- value: rgb(12, 79, 76) -> rgb(3, 92, 80) (light)
- value: rgb(132, 230, 223) -> rgb(14, 190, 156) (dark)
--spectrum-seafoam-1200- value: rgb(18, 60, 58) -> rgb(1, 75, 67) (light)
- value: rgb(176, 242, 236) -> rgb(29, 214, 176) (dark)
--spectrum-seafoam-1300- value: rgb(18, 44, 43) -> rgb(0, 60, 54) (light)
- value: rgb(223, 249, 246) -> rgb(122, 229, 203) (dark)
--spectrum-seafoam-1400- value: rgb(15, 31, 30) -> rgb(0, 46, 40) (light)
- value: rgb(254, 255, 254) -> rgb(186, 241, 222) (dark)
--spectrum-cyan-100- value: rgb(197, 248, 255) -> rgb(238, 250, 254) (light)
- value: rgb(0, 61, 98) -> rgb(0, 29, 39) (dark)
--spectrum-cyan-200- value: rgb(164, 240, 255) -> rgb(217, 244, 253) (light)
- value: rgb(0, 71, 111) -> rgb(0, 36, 49) (dark)
--spectrum-cyan-300- value: rgb(136, 231, 250) -> rgb(183, 231, 252) (light)
- value: rgb(0, 85, 127) -> rgb(0, 48, 65) (dark)
--spectrum-cyan-400- value: rgb(96, 216, 243) -> rgb(138, 213, 255) (light)
- value: rgb(0, 100, 145) -> rgb(0, 64, 88) (dark)
--spectrum-cyan-500- value: rgb(51, 197, 232) -> rgb(92, 192, 255) (light)
- value: rgb(0, 116, 162) -> rgb(0, 82, 113) (dark)
--spectrum-cyan-600- value: rgb(18, 176, 218) -> rgb(48, 167, 254) (light)
- value: rgb(0, 134, 180) -> rgb(3, 99, 140) (dark)
--spectrum-cyan-700- value: rgb(1, 156, 200) -> rgb(29, 149, 231) (light)
- value: rgb(0, 153, 198) -> rgb(8, 115, 168) (dark)
--spectrum-cyan-800- value: rgb(0, 134, 180) -> rgb(18, 134, 205) (light)
- value: rgb(14, 173, 215) -> rgb(13, 125, 186) (dark)
--spectrum-cyan-900- value: rgb(0, 113, 159) -> rgb(11, 120, 179) (light)
- value: rgb(44, 193, 230) -> rgb(24, 142, 220) (dark)
--spectrum-cyan-1000- value: rgb(0, 93, 137) -> rgb(4, 102, 145) (light)
- value: rgb(84, 211, 241) -> rgb(38, 159, 244) (dark)
--spectrum-cyan-1100- value: rgb(0, 74, 115) -> rgb(0, 87, 121) (light)
- value: rgb(127, 228, 249) -> rgb(63, 177, 255) (dark)
--spectrum-cyan-1200- value: rgb(0, 57, 93) -> rgb(0, 71, 98) (light)
- value: rgb(167, 241, 255) -> rgb(107, 199, 255) (dark)
--spectrum-cyan-1300- value: rgb(0, 42, 70) -> rgb(0, 57, 78) (light)
- value: rgb(215, 250, 255) -> rgb(152, 219, 255) (dark)
--spectrum-cyan-1400- value: rgb(0, 30, 51) -> rgb(0, 43, 59) (light)
- value: rgb(255, 255, 255) -> rgb(195, 236, 252) (dark)
--spectrum-indigo-100- value: rgb(237, 238, 255) -> rgb(247, 248, 255) (light)
- value: rgb(40, 44, 140) -> rgb(30, 0, 93) (dark)
--spectrum-indigo-200- value: rgb(224, 226, 255) -> rgb(235, 238, 255) (light)
- value: rgb(47, 52, 163) -> rgb(35, 0, 110) (dark)
--spectrum-indigo-300- value: rgb(211, 213, 255) -> rgb(216, 222, 255) (light)
- value: rgb(57, 63, 187) -> rgb(47, 0, 140) (dark)
--spectrum-indigo-400- value: rgb(193, 196, 255) -> rgb(192, 201, 255) (light)
- value: rgb(70, 75, 211) -> rgb(62, 12, 174) (dark)
--spectrum-indigo-500- value: rgb(172, 175, 255) -> rgb(167, 178, 255) (light)
- value: rgb(85, 91, 231) -> rgb(79, 30, 209) (dark)
--spectrum-indigo-600- value: rgb(149, 153, 255) -> rgb(145, 151, 254) (light)
- value: rgb(104, 109, 244) -> rgb(95, 52, 235) (dark)
--spectrum-indigo-700- value: rgb(126, 132, 252) -> rgb(132, 128, 254) (light)
- value: rgb(124, 129, 251) -> rgb(109, 75, 248) (dark)
--spectrum-indigo-800- value: rgb(104, 109, 244) -> rgb(122, 106, 253) (light)
- value: rgb(145, 149, 255) -> rgb(116, 91, 252) (dark)
--spectrum-indigo-900- value: rgb(82, 88, 228) -> rgb(113, 85, 250) (light)
- value: rgb(167, 170, 255) -> rgb(128, 119, 254) (dark)
--spectrum-indigo-1000- value: rgb(64, 70, 202) -> rgb(99, 56, 238) (light)
- value: rgb(188, 190, 255) -> rgb(139, 141, 254) (dark)
--spectrum-indigo-1100- value: rgb(50, 54, 168) -> rgb(84, 36, 219) (light)
- value: rgb(208, 210, 255) -> rgb(153, 161, 255) (dark)
--spectrum-indigo-1200- value: rgb(38, 41, 134) -> rgb(69, 19, 191) (light)
- value: rgb(226, 228, 255) -> rgb(176, 186, 255) (dark)
--spectrum-indigo-1300- value: rgb(27, 30, 100) -> rgb(55, 6, 160) (light)
- value: rgb(243, 243, 254) -> rgb(199, 208, 255) (dark)
--spectrum-indigo-1400- value: rgb(20, 22, 72) -> rgb(42, 0, 129) (light)
- value: rgb(255, 255, 255) -> rgb(223, 228, 255) (dark)
--spectrum-purple-100- value: rgb(246, 235, 255) -> rgb(251, 247, 254) (light)
- value: rgb(76, 13, 157) -> rgb(41, 0, 79) (dark)
--spectrum-purple-200- value: rgb(238, 221, 255) -> rgb(244, 235, 252) (light)
- value: rgb(89, 17, 177) -> rgb(50, 0, 96) (dark)
--spectrum-purple-300- value: rgb(230, 208, 255) -> rgb(235, 218, 249) (light)
- value: rgb(105, 28, 200) -> rgb(64, 0, 122) (dark)
--spectrum-purple-400- value: rgb(219, 187, 254) -> rgb(221, 193, 246) (light)
- value: rgb(122, 45, 218) -> rgb(83, 0, 159) (dark)
--spectrum-purple-500- value: rgb(204, 164, 253) -> rgb(208, 167, 243) (light)
- value: rgb(140, 65, 233) -> rgb(107, 6, 195) (dark)
--spectrum-purple-600- value: rgb(189, 139, 252) -> rgb(191, 138, 238) (light)
- value: rgb(157, 87, 243) -> rgb(130, 34, 215) (dark)
--spectrum-purple-700- value: rgb(174, 114, 249) -> rgb(178, 114, 235) (light)
- value: rgb(172, 111, 249) -> rgb(148, 62, 224) (dark)
--spectrum-purple-800- value: rgb(157, 87, 244) -> rgb(166, 92, 231) (light)
- value: rgb(187, 135, 251) -> rgb(157, 78, 228) (dark)
--spectrum-purple-900- value: rgb(137, 61, 231) -> rgb(154, 71, 226) (light)
- value: rgb(202, 159, 252) -> rgb(173, 105, 233) (dark)
--spectrum-purple-1000- value: rgb(115, 38, 211) -> rgb(134, 40, 217) (light)
- value: rgb(215, 182, 254) -> rgb(186, 127, 237) (dark)
--spectrum-purple-1100- value: rgb(93, 19, 183) -> rgb(115, 13, 204) (light)
- value: rgb(228, 204, 254) -> rgb(197, 149, 240) (dark)
--spectrum-purple-1200- value: rgb(71, 12, 148) -> rgb(93, 0, 177) (light)
- value: rgb(239, 223, 255) -> rgb(212, 176, 244) (dark)
--spectrum-purple-1300- value: rgb(51, 16, 106) -> rgb(75, 0, 144) (light)
- value: rgb(249, 240, 255) -> rgb(225, 201, 247) (dark)
--spectrum-purple-1400- value: rgb(35, 15, 73) -> rgb(59, 0, 111) (light)
- value: rgb(255, 253, 255) -> rgb(238, 224, 250) (dark)
--spectrum-fuchsia-100- value: rgb(255, 233, 252) -> rgb(254, 246, 255) (light)
- value: rgb(107, 3, 106) -> rgb(50, 0, 61) (dark)
--spectrum-fuchsia-200- value: rgb(255, 218, 250) -> rgb(253, 233, 255) (light)
- value: rgb(123, 0, 123) -> rgb(61, 0, 74) (dark)
--spectrum-fuchsia-300- value: rgb(254, 199, 248) -> rgb(250, 211, 255) (light)
- value: rgb(144, 0, 145) -> rgb(79, 0, 95) (dark)
--spectrum-fuchsia-400- value: rgb(251, 174, 246) -> rgb(247, 181, 255) (light)
- value: rgb(165, 13, 166) -> rgb(102, 9, 120) (dark)
--spectrum-fuchsia-500- value: rgb(245, 146, 243) -> rgb(243, 147, 255) (light)
- value: rgb(185, 37, 185) -> rgb(127, 23, 146) (dark)
--spectrum-fuchsia-600- value: rgb(237, 116, 237) -> rgb(236, 105, 255) (light)
- value: rgb(205, 57, 206) -> rgb(151, 38, 170) (dark)
--spectrum-fuchsia-700- value: rgb(224, 85, 226) -> rgb(223, 77, 245) (light)
- value: rgb(223, 81, 224) -> rgb(173, 51, 192) (dark)
--spectrum-fuchsia-800- value: rgb(205, 58, 206) -> rgb(200, 68, 220) (light)
- value: rgb(235, 110, 236) -> rgb(186, 60, 206) (dark)
--spectrum-fuchsia-900- value: rgb(182, 34, 183) -> rgb(181, 57, 200) (light)
- value: rgb(244, 140, 242) -> rgb(213, 73, 235) (dark)
--spectrum-fuchsia-1000- value: rgb(157, 3, 158) -> rgb(156, 40, 175) (light)
- value: rgb(250, 168, 245) -> rgb(232, 91, 253) (dark)
--spectrum-fuchsia-1100- value: rgb(128, 0, 129) -> rgb(135, 27, 154) (light)
- value: rgb(254, 194, 248) -> rgb(240, 122, 255) (dark)
--spectrum-fuchsia-1200- value: rgb(100, 6, 100) -> rgb(113, 15, 131) (light)
- value: rgb(255, 219, 250) -> rgb(245, 159, 255) (dark)
--spectrum-fuchsia-1300- value: rgb(71, 14, 70) -> rgb(92, 4, 109) (light)
- value: rgb(255, 239, 252) -> rgb(248, 191, 255) (dark)
--spectrum-fuchsia-1400- value: rgb(50, 13, 49) -> rgb(72, 0, 88) (light)
- value: rgb(255, 253, 255) -> rgb(251, 219, 255) (dark)
--spectrum-magenta-100- value: rgb(255, 234, 241) -> rgb(255, 245, 248) (light)
- value: rgb(118, 0, 58) -> rgb(59, 0, 22) (dark)
--spectrum-magenta-200- value: rgb(255, 220, 232) -> rgb(255, 232, 240) (light)
- value: rgb(137, 0, 66) -> rgb(74, 0, 27) (dark)
--spectrum-magenta-300- value: rgb(255, 202, 221) -> rgb(255, 213, 227) (light)
- value: rgb(160, 0, 77) -> rgb(93, 0, 34) (dark)
--spectrum-magenta-400- value: rgb(255, 178, 206) -> rgb(255, 185, 208) (light)
- value: rgb(182, 18, 90) -> rgb(123, 0, 45) (dark)
--spectrum-magenta-500- value: rgb(255, 149, 189) -> rgb(255, 152, 187) (light)
- value: rgb(203, 38, 109) -> rgb(152, 7, 60) (dark)
--spectrum-magenta-600- value: rgb(250, 119, 170) -> rgb(255, 112, 159) (light)
- value: rgb(222, 61, 130) -> rgb(181, 19, 76) (dark)
--spectrum-magenta-700- value: rgb(239, 90, 152) -> rgb(255, 72, 133) (light)
- value: rgb(237, 87, 149) -> rgb(207, 31, 92) (dark)
--spectrum-magenta-800- value: rgb(222, 61, 130) -> rgb(240, 45, 110) (light)
- value: rgb(249, 114, 167) -> rgb(224, 38, 101) (dark)
--spectrum-magenta-900- value: rgb(200, 34, 105) -> rgb(217, 35, 97) (light)
- value: rgb(255, 143, 185) -> rgb(255, 51, 119) (dark)
--spectrum-magenta-1000- value: rgb(173, 9, 85) -> rgb(186, 22, 80) (light)
- value: rgb(255, 172, 202) -> rgb(255, 96, 149) (dark)
--spectrum-magenta-1100- value: rgb(142, 0, 69) -> rgb(163, 5, 62) (light)
- value: rgb(255, 198, 218) -> rgb(255, 128, 171) (dark)
--spectrum-magenta-1200- value: rgb(112, 0, 55) -> rgb(136, 0, 51) (light)
- value: rgb(255, 221, 233) -> rgb(255, 163, 194) (dark)
--spectrum-magenta-1300- value: rgb(84, 3, 42) -> rgb(111, 0, 40) (light)
- value: rgb(255, 240, 245) -> rgb(255, 193, 214) (dark)
--spectrum-magenta-1400- value: rgb(60, 6, 29) -> rgb(86, 0, 30) (light)
- value: rgb(255, 252, 253) -> rgb(255, 220, 232) (dark)
--spectrum-opacity-checkerboard-square-dark--spectrum-overlay-opacity- value: 0.5 -> 0.6 (dark)
--spectrum-drop-shadow-color--spectrum-background-base-color--spectrum-background-layer-1-color--spectrum-background-layer-2-color- value:
--spectrum-gray-50->--spectrum-gray-25(light) - value:
--spectrum-gray-100->--spectrum-gray-75(dark)
- value:
--spectrum-neutral-background-color-default--spectrum-neutral-background-color-hover--spectrum-neutral-background-color-down--spectrum-neutral-background-color-key-focus--spectrum-neutral-background-color-selected-default--spectrum-neutral-background-color-selected-hover--spectrum-neutral-background-color-selected-down--spectrum-neutral-background-color-selected-key-focus--spectrum-neutral-subdued-background-color-default- value:
--spectrum-gray-600->--spectrum-gray-700(light) - value:
--spectrum-gray-400->--spectrum-gray-500(dark)
- value:
--spectrum-neutral-subdued-background-color-hover- value:
--spectrum-gray-700->--spectrum-gray-800(light) - value:
--spectrum-gray-300->--spectrum-gray-400(dark)
- value:
--spectrum-neutral-subdued-background-color-down- value:
--spectrum-gray-200->--spectrum-gray-400(dark)
- value:
--spectrum-neutral-subdued-background-color-key-focus- value:
--spectrum-gray-700->--spectrum-gray-800(light) - value:
--spectrum-gray-300->--spectrum-gray-400(dark)
- value:
--spectrum-accent-background-color-default- value:
--spectrum-accent-color-500->--spectrum-accent-color-800(dark)
- value:
--spectrum-accent-background-color-hover- value:
--spectrum-accent-color-400->--spectrum-accent-color-700(dark)
- value:
--spectrum-accent-background-color-down- value:
--spectrum-accent-color-1100->--spectrum-accent-color-1000(light) - value:
--spectrum-accent-color-300->--spectrum-accent-color-700(dark)
- value:
--spectrum-accent-background-color-key-focus- value:
--spectrum-accent-color-400->--spectrum-accent-color-700(dark)
- value:
--spectrum-informative-background-color-default- value:
--spectrum-informative-color-500->--spectrum-informative-color-800(dark)
- value:
--spectrum-informative-background-color-hover- value:
--spectrum-informative-color-400->--spectrum-informative-color-700(dark)
- value:
--spectrum-informative-background-color-down- value:
--spectrum-informative-color-1100->--spectrum-informative-color-1000(light) - value:
--spectrum-informative-color-300->--spectrum-informative-color-700(dark)
- value:
--spectrum-informative-background-color-key-focus- value:
--spectrum-informative-color-400->--spectrum-informative-color-700(dark)
- value:
--spectrum-negative-background-color-default- value:
--spectrum-negative-color-500->--spectrum-negative-color-800(dark)
- value:
--spectrum-negative-background-color-hover- value:
--spectrum-negative-color-400-> negative-color-700 (dark)
- value:
--spectrum-negative-background-color-down- value:
--spectrum-negative-color-1100->--spectrum-negative-color-1000(light) - value:
--spectrum-negative-color-300->--spectrum-negative-color-700(dark)
- value:
--spectrum-negative-background-color-key-focus- value:
--spectrum-negative-color-400->--spectrum-negative-color-700(dark)
- value:
--spectrum-positive-background-color-default- value:
--spectrum-positive-color-500->--spectrum-positive-color-800(dark)
- value:
--spectrum-positive-background-color-hover- value:
--spectrum-positive-color-400->--spectrum-positive-color-700(dark)
- value:
--spectrum-positive-background-color-down- value:
--spectrum-positive-color-1100->--spectrum-positive-color-1000(light) - value:
--spectrum-positive-color-300->--spectrum-positive-color-700(dark)
- value:
--spectrum-positive-background-color-key-focus- value:
--spectrum-positive-color-400->--spectrum-positive-color-700(dark)
- value:
--spectrum-notice-background-color-default- value:
--spectrum-notice-color-800->--spectrum-notice-color-900(dark)
- value:
--spectrum-disabled-background-color- value:
--spectrum-gray-200->--spectrum-gray-100
- value:
--spectrum-disabled-static-white-background-color- value:
--spectrum-transparent-white-200->--spectrum-transparent-white-100
- value:
--spectrum-disabled-static-black-background-color- value:
--spectrum-transparent-black-200->--spectrum-transparent-black-100
- value:
--spectrum-gray-background-color-default- value:
--spectrum-gray-700->--spectrum-gray-500(dark)
- value:
--spectrum-red-background-color-default- value:
--spectrum-red-700->--spectrum-red-800(dark)
- value:
--spectrum-orange-background-color-default- value:
--spectrum-orange-800->--spectrum-orange-900(dark)
- value:
--spectrum-yellow-background-color-default- value:
--spectrum-yellow-1000->--spectrum-yellow-1100(dark)
- value:
--spectrum-chartreuse-background-color-default- value:
--spectrum-chartreuse-900->--spectrum-chartreuse-1000(dark)
- value:
--spectrum-celery-background-color-default- value:
--spectrum-celery-800->--spectrum-celery-900(dark)
- value:
--spectrum-green-background-color-default- value:
--spectrum-green-700->--spectrum-green-800(dark)
- value:
--spectrum-seafoam-background-color-default- value:
--spectrum-seafoam-700->--spectrum-seafoam-800(dark)
- value:
--spectrum-cyan-background-color-default- value:
--spectrum-cyan-700->--spectrum-cyan-800(dark)
- value:
--spectrum-blue-background-color-default- value:
--spectrum-blue-700->--spectrum-blue-800(dark)
- value:
--spectrum-indigo-background-color-default- value:
--spectrum-indigo-700->--spectrum-indigo-800(dark)
- value:
--spectrum-purple-background-color-default- value:
--spectrum-purple-700->--spectrum-purple-800(dark)
- value:
--spectrum-fuchsia-background-color-default- value:
--spectrum-fuchsia-700->--spectrum-fuchsia-800(dark)
- value:
--spectrum-magenta-background-color-default- value:
--spectrum-magenta-700->--spectrum-magenta-800(dark)
- value:
--spectrum-neutral-subdued-content-color-down- value:
--spectrum-gray-900->--spectrum-gray-800
- value:
--spectrum-accent-content-color-down- value:
--spectrum-accent-color-1100->--spectrum-accent-color-1000
- value:
--spectrum-negative-content-color-down- value:
--spectrum-negative-color-1100->--spectrum-negative-color-1000
- value:
--spectrum-disabled-static-white-content-color- value:
--spectrum-transparent-white-500->--spectrum-transparent-white-400
- value:
--spectrum-disabled-static-black-content-color- value:
--spectrum-transparent-black-500->--spectrum-transparent-black-400
- value:
--spectrum-neutral-visual-color--spectrum-accent-visual-color--spectrum-informative-visual-color--spectrum-negative-visual-color- value:
--spectrum-negative-color-700->--spectrum-negative-color-900(dark)
- value:
--spectrum-notice-visual-color- value:
--spectrum-notice-color-700->--spectrum-notice-color-800(light)
- value:
--spectrum-positive-visual-color- value:
--spectrum-positive-color-700->--spectrum-positive-color-800(light) - value:
--spectrum-positive-color-800->--spectrum-positive-color-900(dark)
- value:
--spectrum-gray-visual-color--spectrum-red-visual-color--spectrum-orange-visual-color--spectrum-yellow-visual-color--spectrum-chartreuse-visual-color--spectrum-celery-visual-color--spectrum-green-visual-color--spectrum-seafoam-visual-color--spectrum-cyan-visual-color--spectrum-blue-visual-color--spectrum-indigo-visual-color--spectrum-purple-visual-color--spectrum-fuchsia-visual-color--spectrum-magenta-visual-color
Please note that the S1 and Express contexts are no longer shipped in this tokens package. Though individual components can still render those styles, you must load the v14.x or v15.x versions of the tokens package with the component styles in order to do so. These token assets are only for use with the S2 mappings of the components.
Minor Changes
-
#3529
3d08ceaThanks @castastrophe! - Add JSON to token package exports.Remove CSS files from commit history (but continue to build and ship them in the releases).
Stop physically copying the
dist/css/index.csstodist/index.cssand instead, mapdist/index.cssin the package exports to the samedist/css/index.cssfile.