From ff5dda63159a4de60727d75ea42dfa487ecb8ea5 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Mon, 22 Jan 2024 15:31:58 -0500 Subject: [PATCH] fix: deprecate logical transform plugin (#2437) --- components/accordion/index.css | 53 +- components/actionbutton/index.css | 7 +- components/assetlist/index.css | 9 +- components/breadcrumb/index.css | 5 +- components/calendar/index.css | 9 +- .../calendar/stories/calendar.stories.js | 6 +- components/pagination/index.css | 11 +- components/slider/index.css | 10 +- components/splitbutton/index.css | 14 + components/table/index.css | 59 +- components/treeview/index.css | 11 +- package.json | 3 + tokens/dist/css/dark-vars.css | 945 +- tokens/dist/css/darkest-vars.css | 945 +- tokens/dist/css/express/custom-dark-vars.css | 19 +- .../dist/css/express/custom-darkest-vars.css | 19 +- tokens/dist/css/express/custom-large-vars.css | 12 +- tokens/dist/css/express/custom-light-vars.css | 19 +- .../dist/css/express/custom-medium-vars.css | 12 +- tokens/dist/css/express/custom-vars.css | 4 +- tokens/dist/css/express/global-vars.css | 84 +- tokens/dist/css/express/large-vars.css | 110 +- tokens/dist/css/express/medium-vars.css | 110 +- tokens/dist/css/global-vars.css | 1474 ++- tokens/dist/css/large-vars.css | 1004 ++- tokens/dist/css/light-vars.css | 950 +- tokens/dist/css/medium-vars.css | 1004 ++- tokens/dist/css/spectrum/custom-dark-vars.css | 129 +- .../dist/css/spectrum/custom-darkest-vars.css | 130 +- .../dist/css/spectrum/custom-large-vars.css | 216 +- .../dist/css/spectrum/custom-light-vars.css | 129 +- .../dist/css/spectrum/custom-medium-vars.css | 214 +- tokens/dist/css/spectrum/custom-vars.css | 74 +- tokens/dist/css/spectrum/global-vars.css | 92 +- tokens/dist/css/spectrum/large-vars.css | 102 +- tokens/dist/css/spectrum/medium-vars.css | 102 +- tokens/dist/index.css | 7877 ++++++++--------- tokens/project.json | 1 - .../css/plugins/postcss-transform-logical.js | 111 - .../css/processors.js | 1 - .../css/plugins/postcss-transform-logical.js | 111 - tools/component-builder/css/processors.js | 1 - 42 files changed, 7355 insertions(+), 8843 deletions(-) delete mode 100644 tools/component-builder-simple/css/plugins/postcss-transform-logical.js delete mode 100644 tools/component-builder/css/plugins/postcss-transform-logical.js diff --git a/components/accordion/index.css b/components/accordion/index.css index ada3ce27f5e..ab176d0d501 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -45,6 +45,7 @@ governing permissions and limitations under the License. --spectrum-accordion-component-edge-to-text: var( --spectrum-component-edge-to-text-75 ); + /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); --spectrum-accordion-item-header-font-weight: var( @@ -55,13 +56,7 @@ governing permissions and limitations under the License. ); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); --spectrum-accordion-item-header-line-height: 1.25; - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-accordion-item-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - } + /* Text body */ --spectrum-accordion-item-content-font: var( --spectrum-sans-font-family-stack @@ -76,13 +71,7 @@ governing permissions and limitations under the License. --spectrum-accordion-item-content-line-height: var( --spectrum-line-height-100 ); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-accordion-item-content-line-height: var( - --spectrum-cjk-line-height-100 - ); - } + /* Colors */ --spectrum-accordion-background-color-default: rgba( var(--spectrum-gray-900-rgb), @@ -100,6 +89,7 @@ governing permissions and limitations under the License. var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus) ); + /* Label */ --spectrum-accordion-item-header-color-default: var( --spectrum-neutral-content-color-default @@ -120,12 +110,15 @@ governing permissions and limitations under the License. --spectrum-accordion-item-content-disabled-color: var( --spectrum-disabled-content-color ); + /* Body */ --spectrum-accordion-item-content-color: var(--spectrum-body-color); + /* Focus indicator */ --spectrum-accordion-focus-indicator-color: var( --spectrum-focus-indicator-color ); + /* Divider */ --spectrum-accordion-divider-color: var(--spectrum-gray-300); --spectrum-accordion-min-block-size: max( @@ -151,6 +144,22 @@ governing permissions and limitations under the License. ) ) ); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-accordion-item-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-accordion-item-content-line-height: var( + --spectrum-cjk-line-height-100 + ); + } } .spectrum-Accordion--compact { @@ -621,19 +630,9 @@ governing permissions and limitations under the License. .spectrum-Accordion-item { &.is-open { - > .spectrum-Accordion-itemHeading - > .spectrum-Accordion-itemIconContainer - > .spectrum-Accordion-itemIndicator { - /* stylelint-disable declaration-property-value-no-unknown */ - transform: logical rotate(90deg); - /* stylelint-enable declaration-property-value-no-unknown */ - } - - > .spectrum-Accordion-itemIconContainer - > .spectrum-Accordion-itemIndicator { - /* stylelint-disable declaration-property-value-no-unknown */ - transform: logical rotate(90deg); - /* stylelint-enable declaration-property-value-no-unknown */ + > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, + > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation,) rotate(90deg); } > .spectrum-Accordion-itemContent { diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 80abdd5689b..13cfee9db8e 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -27,6 +27,11 @@ governing permissions and limitations under the License. --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + &.is-selected { --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); @@ -253,7 +258,7 @@ a.spectrum-ActionButton { color: inherit; - transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */ + transform: var(--spectrum-logical-rotation); } /* special cases for focus-ring */ diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 66144def23d..c68b44ddc09 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -34,6 +34,11 @@ governing permissions and limitations under the License. /* label */ --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-AssetList { @@ -152,8 +157,7 @@ governing permissions and limitations under the License. .spectrum-AssetList-itemChildIndicator { display: none; transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); - - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); } .spectrum-AssetList-itemLabel { @@ -182,4 +186,3 @@ governing permissions and limitations under the License. } } } - diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index afa43873079..71f28ad1bdc 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -153,12 +153,11 @@ governing permissions and limitations under the License. margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); - transform: logical scale(1) rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */ - opacity: 1; color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); - [dir="rtl"] & { + [dir="rtl"] &, + &:dir(rtl) { transform: scaleX(-1); } diff --git a/components/calendar/index.css b/components/calendar/index.css index dbf4c9adc7a..e1ada09cb26 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -49,8 +49,11 @@ governing permissions and limitations under the License. --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); - --spectrum-calendar-button-icon-color-disabled: var(--spectrum-disabled-content-color); + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-Calendar { @@ -86,7 +89,7 @@ governing permissions and limitations under the License. .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */ + transform: var(--spectrum-logical-rotation); &:not([disabled]) { color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color))); @@ -239,7 +242,7 @@ governing permissions and limitations under the License. inline-size: calc( var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + - calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2) + calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2) ); &.is-range-start, diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index a95eadd9001..8488fcd6742 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -1,8 +1,8 @@ // Import the component markup template import { Template } from "./template"; -import isChromatic from "chromatic/isChromatic"; import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; +import isChromatic from "chromatic/isChromatic"; const months = [...Array(12).keys()].map((key) => new Date(0, key).toLocaleString("en", { month: "long" }) @@ -113,10 +113,6 @@ Default.args = { year: 2023, }; -export const DefaultRTL = Template.bind({}); -DefaultRTL.args = {...Default.args}; -DefaultRTL.parameters = {textDirection: "rtl"} - export const RangeSelection = Template.bind({}); RangeSelection.args = { month: months[6], diff --git a/components/pagination/index.css b/components/pagination/index.css index 457b195b963..52f6928c9de 100644 --- a/components/pagination/index.css +++ b/components/pagination/index.css @@ -15,7 +15,12 @@ governing permissions and limitations under the License. --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); - --spectrum-pagination-counter-line-height: var(-spectrum-line-height-100); + --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-Pagination--explicit, @@ -49,9 +54,9 @@ governing permissions and limitations under the License. /* Correct the direction of the arrows when viewing right-to-left */ .spectrum-Pagination-prevButton .spectrum-Icon { - transform: logical rotate(180deg); + transform: var(--spectrum-logical-rotation,) rotate(180deg); } .spectrum-Pagination-nextButton .spectrum-Icon { - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); } diff --git a/components/slider/index.css b/components/slider/index.css index fb051d798ea..3035ef83785 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -24,6 +24,11 @@ governing permissions and limitations under the License. /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } @@ -286,8 +291,7 @@ governing permissions and limitations under the License. block-size: 100%; /* Flip the ramp automatically for RTL */ - /* stylelint-disable-next-line declaration-property-value-no-unknown */ - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); } } @@ -623,7 +627,7 @@ governing permissions and limitations under the License. .spectrum-Slider--range { .spectrum-Slider-track { &:not(:first-of-type):not(:last-of-type)::before { - background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--highcontrast-slider-track-fill-icolor, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); } } } diff --git a/components/splitbutton/index.css b/components/splitbutton/index.css index 665d5af9759..edf07dc3331 100644 --- a/components/splitbutton/index.css +++ b/components/splitbutton/index.css @@ -21,6 +21,11 @@ governing permissions and limitations under the License. --spectrum-splitbutton-border-radius-edge: var( --spectrum-alias-border-radius-small ); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-SplitButton-trigger { @@ -118,6 +123,15 @@ governing permissions and limitations under the License. z-index: 1; outline: none; } + + /* Correct the direction of the arrows when viewing right-to-left */ + &.spectrum-Pagination-prevButton .spectrum-Icon { + transform: var(--spectrum-logical-rotation,) rotate(180deg); + } + + &.spectrum-Pagination-nextButton .spectrum-Icon { + transform: var(--spectrum-logical-rotation); + } } .spectrum-SplitButton-action { diff --git a/components/table/index.css b/components/table/index.css index 61e819667c7..05bdc7ec337 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -101,7 +101,7 @@ governing permissions and limitations under the License. --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 + /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 and for modifying emphasized/non-emphasized background colors from the root element. */ --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); @@ -109,6 +109,11 @@ governing permissions and limitations under the License. /* Passthrough for nested component(s) */ --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } /********* T-SHIRT SIZES (Regular Density) *********/ @@ -512,14 +517,14 @@ governing permissions and limitations under the License. } /* Outside border, row divider lines, and rounded corners: - The tbody tag doesn't allow setting a border or border-radius. To make them work, border styles are + The tbody tag doesn't allow setting a border or border-radius. To make them work, border styles are instead applied to the individual cells around the outside, while using border-collapse: separate. */ /* Row divider lines */ .spectrum-Table-cell { border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid + solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } @@ -528,26 +533,26 @@ governing permissions and limitations under the License. &:first-child .spectrum-Table-cell { border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } &:last-child .spectrum-Table-cell { border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } .spectrum-Table-cell:first-child { - border-inline-start: - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid + border-inline-start: + var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } .spectrum-Table-cell:last-child { - border-inline-end: + border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); @@ -592,7 +597,7 @@ governing permissions and limitations under the License. ); padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - + var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) ); } @@ -659,7 +664,7 @@ governing permissions and limitations under the License. --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color); - + &:hover, &:focus-visible, &.is-focused { @@ -684,7 +689,7 @@ governing permissions and limitations under the License. /* Make sure negative offset outline is not covered by borders. */ --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); - + .spectrum-Table-cell { border-top-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); } @@ -746,12 +751,12 @@ governing permissions and limitations under the License. /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value includes the inline start padding in the adjacent cell. */ padding-inline-end: calc( - var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - + var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) ); /* Block spacing must be moved to calculated margin on the checkbox element. */ padding-block: 0; - + .spectrum-Table-checkbox { --mod-checkbox-spacing: 0px; min-block-size: initial; @@ -813,10 +818,10 @@ governing permissions and limitations under the License. border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid + border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - + &.spectrum-Table--quiet { --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); border-block-start: none; @@ -825,8 +830,8 @@ governing permissions and limitations under the License. /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ scroll-padding-top: var(--mod-table-current-header-height, calc( - (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + - var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + + (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)) )); @@ -849,7 +854,7 @@ governing permissions and limitations under the License. border-block-start: none; border-radius: 0; } - + &:last-child .spectrum-Table-cell { border-block-end: none; border-radius: 0; @@ -858,7 +863,7 @@ governing permissions and limitations under the License. .spectrum-Table-cell:first-child { border-inline-start: none; } - + .spectrum-Table-cell:last-child { border-inline-end: none; } @@ -896,8 +901,8 @@ governing permissions and limitations under the License. .spectrum-Table-disclosureIcon { margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)); margin-block-start: max(0px, calc( - (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) + (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2 ) ); @@ -943,10 +948,10 @@ governing permissions and limitations under the License. border: 0; color: var(--spectrum-table-icon-color); - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); &[aria-expanded="true"]{ - transform: logical rotate(90deg); + transform: var(--spectrum-logical-rotation,) rotate(90deg); } &::after { @@ -1008,7 +1013,7 @@ governing permissions and limitations under the License. ) / 2 )); --table-thumbnail-cell-block-spacing: max( - var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), + var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--table-thumbnail-inner-minimum-block-spacing) ); } @@ -1025,7 +1030,7 @@ governing permissions and limitations under the License. .spectrum-Thumbnail { flex-grow: 0; flex-shrink: 0; - margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); + margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); } diff --git a/components/treeview/index.css b/components/treeview/index.css index 022e5f10535..38b72be9614 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -56,6 +56,11 @@ governing permissions and limitations under the License. --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-TreeView--sizeS { @@ -187,7 +192,7 @@ governing permissions and limitations under the License. &.is-open { > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator { /* Rotate the chevron */ - transform: logical rotate(90deg); + transform: var(--spectrum-logical-rotation,) rotate(90deg); } > .spectrum-TreeView { @@ -337,9 +342,9 @@ governing permissions and limitations under the License. padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start)); - transform: logical rotate(0deg); transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration)); pointer-events: all; + transform: var(--spectrum-logical-rotation); } /* Section headings */ @@ -408,4 +413,4 @@ governing permissions and limitations under the License. flex-shrink: 0; margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 9b62c166e75..26bff6cce61 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,9 @@ "lint-staged": { "package.json": [ "prettier-package-json --write" + ], + "dist/*.css": [ + "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write" ] } } diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css index cf95d3fed46..7683a1a3235 100644 --- a/tokens/dist/css/dark-vars.css +++ b/tokens/dist/css/dark-vars.css @@ -1,488 +1,459 @@ -.spectrum--dark { - --spectrum-overlay-opacity: 0.5; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.5; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-50); - --spectrum-background-layer-1-color: var(--spectrum-gray-75); - --spectrum-background-layer-2-color: var(--spectrum-gray-100); - --spectrum-neutral-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-500); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-300); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-400 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-300 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-400 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-400 - ); - --spectrum-negative-background-color-down: var(--spectrum-negative-color-300); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-400 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-400 - ); - --spectrum-positive-background-color-down: var(--spectrum-positive-color-300); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-400 - ); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-800); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-800); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-50-rgb: 29, 29, 29; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 38, 38, 38; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 50, 50, 50; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 63, 63, 63; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 84, 84, 84; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 112, 112, 112; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 144, 144, 144; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 178, 178, 178; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 209, 209, 209; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 235, 235, 235; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 255, 255, 255; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 0, 56, 119; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 0, 65, 138; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 0, 77, 163; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 0, 89, 194; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 3, 103, 224; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 19, 121, 243; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 143, 244; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 84, 163, 246; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 114, 183, 249; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 143, 202, 252; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 174, 219, 254; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 204, 233, 255; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 232, 246, 255; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 255, 255, 255; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 123, 0, 0; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 141, 0, 0; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 165, 0, 0; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 190, 4, 3; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 215, 25, 19; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 234, 56, 41; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 246, 88, 67; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 255, 117, 94; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 255, 149, 129; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 176, 161; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 201, 189; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 222, 216; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 241, 238; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 255, 255; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 102, 37, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 117, 45, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 137, 55, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 158, 66, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 180, 78, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 202, 93, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 225, 109, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 244, 129, 12; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 254, 154, 46; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 255, 181, 88; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 253, 206, 136; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 225, 179; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 242, 221; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 253, 249; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 76, 54, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 88, 64, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 103, 76, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 119, 89, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 136, 104, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 155, 120, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 174, 137, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 192, 156, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 211, 174, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 228, 194, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 244, 213, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 249, 232, 92; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 252, 246, 187; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 255, 255; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 48, 64, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 55, 74, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 65, 87, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 76, 102, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 89, 118, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 102, 136, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 117, 154, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 132, 173, 1; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 148, 192, 8; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 166, 211, 18; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 184, 229, 37; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 205, 245, 71; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 231, 254, 154; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 255, 255, 255; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 0, 69, 10; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 0, 80, 12; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 0, 94, 14; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 0, 109, 15; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 0, 127, 15; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 0, 145, 18; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 4, 165, 30; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 34, 184, 51; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 68, 202, 73; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 105, 220, 99; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 142, 235, 127; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 180, 247, 162; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 221, 253, 211; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 255, 255, 255; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 4, 67, 41; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 78, 47; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 92, 56; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 108, 67; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 0, 125, 78; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 0, 143, 93; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 18, 162, 108; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 43, 180, 125; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 67, 199, 143; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 94, 217, 162; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 129, 233, 184; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 177, 244, 209; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 223, 250, 234; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 254, 255, 252; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 18, 65, 63; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 14, 76, 73; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 4, 90, 87; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 105, 101; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 0, 122, 117; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 0, 140, 135; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 158, 152; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 3, 178, 171; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 54, 197, 189; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 93, 214, 207; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 132, 230, 223; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 176, 242, 236; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 223, 249, 246; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 254, 255, 254; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 0, 61, 98; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 71, 111; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 85, 127; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 100, 145; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 116, 162; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 0, 134, 180; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 0, 153, 198; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 14, 173, 215; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 44, 193, 230; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 84, 211, 241; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 127, 228, 249; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 167, 241, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 215, 250, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 255, 255, 255; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 40, 44, 140; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 47, 52, 163; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 57, 63, 187; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 70, 75, 211; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 85, 91, 231; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 104, 109, 244; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 124, 129, 251; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 145, 149, 255; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 167, 170, 255; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 188, 190, 255; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 208, 210, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 226, 228, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 243, 243, 254; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 255, 255, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 76, 13, 157; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 89, 17, 177; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 105, 28, 200; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 122, 45, 218; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 140, 65, 233; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 157, 87, 243; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 172, 111, 249; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 187, 135, 251; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 202, 159, 252; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 215, 182, 254; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 228, 204, 254; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 239, 223, 255; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 249, 240, 255; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 255, 253, 255; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 107, 3, 106; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 123, 0, 123; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 144, 0, 145; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 165, 13, 166; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 185, 37, 185; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 205, 57, 206; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 81, 224; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 235, 110, 236; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 244, 140, 242; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 250, 168, 245; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 254, 194, 248; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 255, 219, 250; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 255, 239, 252; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 255, 253, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 118, 0, 58; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 137, 0, 66; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 160, 0, 77; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 182, 18, 90; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 203, 38, 109; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 222, 61, 130; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 237, 87, 149; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 249, 114, 167; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 143, 185; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 172, 202; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 198, 218; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 221, 233; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 240, 245; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 252, 253; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); +.spectrum--dark{ + --spectrum-overlay-opacity:0.5; + --spectrum-drop-shadow-color-rgb:0, 0, 0; + --spectrum-drop-shadow-color-opacity:0.5; + --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); + --spectrum-background-base-color:var(--spectrum-gray-50); + --spectrum-background-layer-1-color:var(--spectrum-gray-75); + --spectrum-background-layer-2-color:var(--spectrum-gray-100); + --spectrum-neutral-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-500); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-400); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-300); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-400); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-500); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-400); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-300); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-400); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-500); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-400); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-300); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-400); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-500); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-400); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-300); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-400); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-700); + --spectrum-orange-background-color-default:var(--spectrum-orange-800); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); + --spectrum-celery-background-color-default:var(--spectrum-celery-800); + --spectrum-green-background-color-default:var(--spectrum-green-700); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); + --spectrum-blue-background-color-default:var(--spectrum-blue-700); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); + --spectrum-purple-background-color-default:var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); + --spectrum-neutral-visual-color:var(--spectrum-gray-600); + --spectrum-accent-visual-color:var(--spectrum-accent-color-900); + --spectrum-informative-visual-color:var(--spectrum-informative-color-900); + --spectrum-negative-visual-color:var(--spectrum-negative-color-700); + --spectrum-notice-visual-color:var(--spectrum-notice-color-900); + --spectrum-positive-visual-color:var(--spectrum-positive-color-800); + --spectrum-gray-visual-color:var(--spectrum-gray-600); + --spectrum-red-visual-color:var(--spectrum-red-700); + --spectrum-orange-visual-color:var(--spectrum-orange-900); + --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color:var(--spectrum-celery-800); + --spectrum-green-visual-color:var(--spectrum-green-800); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color:var(--spectrum-cyan-900); + --spectrum-blue-visual-color:var(--spectrum-blue-900); + --spectrum-indigo-visual-color:var(--spectrum-indigo-900); + --spectrum-purple-visual-color:var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); + --spectrum-gray-50-rgb:29, 29, 29; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:38, 38, 38; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:50, 50, 50; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:63, 63, 63; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:84, 84, 84; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:112, 112, 112; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:178, 178, 178; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:209, 209, 209; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:0, 56, 119; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:0, 65, 138; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:0, 77, 163; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:0, 89, 194; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:3, 103, 224; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:19, 121, 243; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:52, 143, 244; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:84, 163, 246; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:114, 183, 249; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:143, 202, 252; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:174, 219, 254; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:204, 233, 255; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:232, 246, 255; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:255, 255, 255; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:123, 0, 0; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:141, 0, 0; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:165, 0, 0; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:190, 4, 3; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:215, 25, 19; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:234, 56, 41; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:246, 88, 67; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:255, 117, 94; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:255, 149, 129; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:255, 176, 161; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:255, 201, 189; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:255, 222, 216; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:255, 241, 238; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:255, 255, 255; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:102, 37, 0; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:117, 45, 0; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:137, 55, 0; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:158, 66, 0; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:180, 78, 0; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:202, 93, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:225, 109, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:244, 129, 12; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:254, 154, 46; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:255, 181, 88; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:253, 206, 136; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:255, 225, 179; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:255, 242, 221; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:255, 253, 249; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:76, 54, 0; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:88, 64, 0; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:103, 76, 0; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:119, 89, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:136, 104, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:155, 120, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:174, 137, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:192, 156, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:211, 174, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:228, 194, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:244, 213, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:249, 232, 92; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:252, 246, 187; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:255, 255, 255; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:48, 64, 0; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:55, 74, 0; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:65, 87, 0; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:76, 102, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:89, 118, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:102, 136, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:117, 154, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:132, 173, 1; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:148, 192, 8; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:166, 211, 18; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:184, 229, 37; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:205, 245, 71; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:231, 254, 154; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:255, 255, 255; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:0, 69, 10; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:0, 80, 12; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:0, 94, 14; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:0, 109, 15; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:0, 127, 15; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:0, 145, 18; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:4, 165, 30; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:34, 184, 51; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:68, 202, 73; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:105, 220, 99; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:142, 235, 127; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:180, 247, 162; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:221, 253, 211; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:255, 255, 255; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:4, 67, 41; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:0, 78, 47; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:0, 92, 56; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:0, 108, 67; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:0, 125, 78; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:0, 143, 93; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:18, 162, 108; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:43, 180, 125; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:67, 199, 143; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:94, 217, 162; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:129, 233, 184; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:177, 244, 209; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:223, 250, 234; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:254, 255, 252; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:18, 65, 63; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:14, 76, 73; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:4, 90, 87; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:0, 105, 101; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:0, 122, 117; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:0, 140, 135; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 158, 152; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:3, 178, 171; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:54, 197, 189; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:93, 214, 207; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:132, 230, 223; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:176, 242, 236; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:223, 249, 246; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:254, 255, 254; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:0, 61, 98; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:0, 71, 111; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:0, 85, 127; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:0, 100, 145; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:0, 116, 162; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:0, 134, 180; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:0, 153, 198; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:14, 173, 215; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:44, 193, 230; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:84, 211, 241; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:127, 228, 249; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:167, 241, 255; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:215, 250, 255; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:255, 255, 255; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:40, 44, 140; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:47, 52, 163; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:57, 63, 187; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:70, 75, 211; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:85, 91, 231; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:104, 109, 244; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:124, 129, 251; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:145, 149, 255; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:167, 170, 255; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:188, 190, 255; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:208, 210, 255; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:226, 228, 255; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:243, 243, 254; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:255, 255, 255; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:76, 13, 157; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:89, 17, 177; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:105, 28, 200; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:122, 45, 218; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:140, 65, 233; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:157, 87, 243; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:172, 111, 249; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:187, 135, 251; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:202, 159, 252; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:215, 182, 254; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:228, 204, 254; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:239, 223, 255; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:249, 240, 255; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:255, 253, 255; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:107, 3, 106; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:123, 0, 123; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:144, 0, 145; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:165, 13, 166; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:185, 37, 185; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:205, 57, 206; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:223, 81, 224; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:235, 110, 236; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:244, 140, 242; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:250, 168, 245; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:254, 194, 248; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:255, 219, 250; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:255, 239, 252; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:255, 253, 255; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:118, 0, 58; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:137, 0, 66; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:160, 0, 77; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:182, 18, 90; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:203, 38, 109; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:222, 61, 130; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:237, 87, 149; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:249, 114, 167; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:255, 143, 185; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:255, 172, 202; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:255, 198, 218; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:255, 221, 233; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:255, 240, 245; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:255, 252, 253; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); } diff --git a/tokens/dist/css/darkest-vars.css b/tokens/dist/css/darkest-vars.css index e4a843623d7..a12e6bf4992 100644 --- a/tokens/dist/css/darkest-vars.css +++ b/tokens/dist/css/darkest-vars.css @@ -1,488 +1,459 @@ -.spectrum--darkest { - --spectrum-overlay-opacity: 0.6; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.8; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-50); - --spectrum-background-layer-1-color: var(--spectrum-gray-75); - --spectrum-background-layer-2-color: var(--spectrum-gray-100); - --spectrum-neutral-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-500 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-500 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-down: var(--spectrum-negative-color-400); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-500 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-down: var(--spectrum-positive-color-400); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-500 - ); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-800); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-800); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-50-rgb: 0, 0, 0; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 14, 14, 14; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 29, 29, 29; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 48, 48, 48; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 75, 75, 75; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 106, 106, 106; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 141, 141, 141; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 176, 176, 176; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 208, 208, 208; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 235, 235, 235; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 255, 255, 255; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 0, 38, 81; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 0, 50, 106; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 0, 64, 135; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 0, 78, 166; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 0, 92, 200; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 6, 108, 231; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 29, 128, 245; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 64, 150, 243; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 94, 170, 247; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 124, 189, 250; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 152, 206, 253; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 179, 222, 254; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 206, 234, 255; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 227, 243, 255; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 87, 0, 0; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 110, 0, 0; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 138, 0, 0; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 167, 0, 0; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 196, 7, 6; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 221, 33, 24; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 238, 67, 49; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 249, 99, 76; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 255, 129, 107; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 158, 140; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 183, 169; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 205, 195; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 223, 217; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 237, 234; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 72, 24, 1; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 92, 32, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 115, 43, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 138, 55, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 162, 68, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 186, 82, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 210, 98, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 232, 116, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 249, 137, 23; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 255, 162, 59; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 188, 102; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 253, 210, 145; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 226, 181; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 239, 213; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 53, 36, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 68, 47, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 86, 62, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 103, 77, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 122, 92, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 141, 108, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 161, 126, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 180, 144, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 199, 162, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 216, 181, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 233, 199, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 247, 216, 4; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 233, 97; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 252, 243, 170; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 32, 43, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 42, 56, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 54, 72, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 66, 88, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 79, 105, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 93, 123, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 107, 142, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 122, 161, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 138, 180, 3; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 154, 198, 11; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 170, 216, 22; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 187, 232, 41; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 205, 246, 72; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 225, 253, 132; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 0, 47, 7; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 0, 61, 9; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 0, 77, 12; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 0, 95, 15; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 0, 113, 15; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 0, 132, 15; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 0, 151, 20; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 13, 171, 37; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 45, 191, 58; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 80, 208, 82; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 115, 224, 107; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 147, 237, 131; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 180, 247, 162; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 213, 252, 202; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 10, 44, 28; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 7, 59, 36; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 76, 46; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 93, 57; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 0, 111, 69; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 0, 130, 82; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 0, 149, 98; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 28, 168, 114; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 52, 187, 132; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 75, 205, 149; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 103, 222, 168; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 137, 236, 188; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 177, 244, 209; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 214, 249, 228; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 18, 43, 42; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 19, 57, 55; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 16, 73, 70; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 3, 91, 88; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 0, 108, 104; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 0, 127, 121; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 146, 140; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 0, 165, 159; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 26, 185, 178; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 66, 202, 195; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 102, 218, 211; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 139, 232, 225; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 179, 242, 237; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 215, 248, 244; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 0, 41, 68; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 54, 88; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 69, 108; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 86, 128; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 103, 147; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 0, 121, 167; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 0, 140, 186; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 4, 160, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 23, 180, 221; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 57, 199, 234; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 96, 216, 243; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 134, 230, 250; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 170, 242, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 206, 249, 255; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 26, 29, 97; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 39, 125; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 46, 50, 158; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 58, 63, 189; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 73, 78, 216; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 90, 96, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 110, 115, 246; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 132, 136, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 153, 157, 255; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 174, 177, 255; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 194, 196, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 212, 213, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 227, 228, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 240, 240, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 50, 16, 104; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 67, 13, 140; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 86, 16, 173; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 106, 29, 200; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 126, 49, 222; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 145, 70, 236; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 162, 94, 246; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 178, 119, 250; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 192, 143, 252; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 206, 166, 253; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 219, 188, 254; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 230, 207, 255; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 240, 224, 255; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 248, 237, 255; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 70, 14, 68; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 93, 9, 92; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 120, 0, 120; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 146, 0, 147; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 169, 19, 170; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 191, 43, 191; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 211, 65, 213; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 228, 91, 229; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 239, 120, 238; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 246, 149, 243; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 251, 175, 246; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 254, 199, 248; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 255, 220, 250; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 255, 235, 252; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 83, 3, 41; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 106, 0, 52; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 133, 0, 65; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 161, 0, 78; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 186, 22, 93; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 209, 43, 114; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 227, 69, 137; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 241, 97, 156; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 252, 124, 173; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 152, 191; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 179, 207; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 202, 221; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 221, 233; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 236, 243; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); +.spectrum--darkest{ + --spectrum-overlay-opacity:0.6; + --spectrum-drop-shadow-color-rgb:0, 0, 0; + --spectrum-drop-shadow-color-opacity:0.8; + --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); + --spectrum-background-base-color:var(--spectrum-gray-50); + --spectrum-background-layer-1-color:var(--spectrum-gray-75); + --spectrum-background-layer-2-color:var(--spectrum-gray-100); + --spectrum-neutral-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-400); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-400); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-400); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-400); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-700); + --spectrum-orange-background-color-default:var(--spectrum-orange-800); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); + --spectrum-celery-background-color-default:var(--spectrum-celery-800); + --spectrum-green-background-color-default:var(--spectrum-green-700); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); + --spectrum-blue-background-color-default:var(--spectrum-blue-700); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); + --spectrum-purple-background-color-default:var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); + --spectrum-neutral-visual-color:var(--spectrum-gray-600); + --spectrum-accent-visual-color:var(--spectrum-accent-color-900); + --spectrum-informative-visual-color:var(--spectrum-informative-color-900); + --spectrum-negative-visual-color:var(--spectrum-negative-color-700); + --spectrum-notice-visual-color:var(--spectrum-notice-color-900); + --spectrum-positive-visual-color:var(--spectrum-positive-color-800); + --spectrum-gray-visual-color:var(--spectrum-gray-600); + --spectrum-red-visual-color:var(--spectrum-red-700); + --spectrum-orange-visual-color:var(--spectrum-orange-900); + --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color:var(--spectrum-celery-800); + --spectrum-green-visual-color:var(--spectrum-green-800); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color:var(--spectrum-cyan-900); + --spectrum-blue-visual-color:var(--spectrum-blue-900); + --spectrum-indigo-visual-color:var(--spectrum-indigo-900); + --spectrum-purple-visual-color:var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); + --spectrum-gray-50-rgb:0, 0, 0; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:14, 14, 14; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:29, 29, 29; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:48, 48, 48; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:75, 75, 75; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:106, 106, 106; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:141, 141, 141; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:176, 176, 176; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:208, 208, 208; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:0, 38, 81; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:0, 50, 106; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:0, 64, 135; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:0, 78, 166; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:0, 92, 200; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:6, 108, 231; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:29, 128, 245; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:64, 150, 243; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:94, 170, 247; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:124, 189, 250; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:152, 206, 253; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:179, 222, 254; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:206, 234, 255; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:227, 243, 255; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:87, 0, 0; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:110, 0, 0; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:138, 0, 0; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:167, 0, 0; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:196, 7, 6; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:221, 33, 24; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:238, 67, 49; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:249, 99, 76; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:255, 129, 107; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:255, 158, 140; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:255, 183, 169; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:255, 205, 195; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:255, 223, 217; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:255, 237, 234; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:72, 24, 1; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:92, 32, 0; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:115, 43, 0; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:138, 55, 0; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:162, 68, 0; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:186, 82, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:210, 98, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:232, 116, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:249, 137, 23; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:255, 162, 59; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:255, 188, 102; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:253, 210, 145; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:255, 226, 181; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:255, 239, 213; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:53, 36, 0; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:68, 47, 0; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:86, 62, 0; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:103, 77, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:122, 92, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:141, 108, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:161, 126, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:180, 144, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:199, 162, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:216, 181, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:233, 199, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:247, 216, 4; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:249, 233, 97; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:252, 243, 170; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:32, 43, 0; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:42, 56, 0; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:54, 72, 0; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:66, 88, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:79, 105, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:93, 123, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:107, 142, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:122, 161, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:138, 180, 3; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:154, 198, 11; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:170, 216, 22; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:187, 232, 41; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:205, 246, 72; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:225, 253, 132; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:0, 47, 7; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:0, 61, 9; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:0, 77, 12; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:0, 95, 15; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:0, 113, 15; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:0, 132, 15; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:0, 151, 20; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:13, 171, 37; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:45, 191, 58; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:80, 208, 82; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:115, 224, 107; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:147, 237, 131; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:180, 247, 162; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:213, 252, 202; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:10, 44, 28; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:7, 59, 36; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:0, 76, 46; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:0, 93, 57; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:0, 111, 69; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:0, 130, 82; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:0, 149, 98; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:28, 168, 114; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:52, 187, 132; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:75, 205, 149; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:103, 222, 168; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:137, 236, 188; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:177, 244, 209; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:214, 249, 228; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:18, 43, 42; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:19, 57, 55; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:16, 73, 70; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:3, 91, 88; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:0, 108, 104; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:0, 127, 121; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 146, 140; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:0, 165, 159; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:26, 185, 178; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:66, 202, 195; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:102, 218, 211; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:139, 232, 225; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:179, 242, 237; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:215, 248, 244; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:0, 41, 68; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:0, 54, 88; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:0, 69, 108; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:0, 86, 128; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:0, 103, 147; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:0, 121, 167; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:0, 140, 186; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:4, 160, 205; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:23, 180, 221; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:57, 199, 234; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:96, 216, 243; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:134, 230, 250; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:170, 242, 255; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:206, 249, 255; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:26, 29, 97; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:35, 39, 125; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:46, 50, 158; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:58, 63, 189; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:73, 78, 216; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:90, 96, 235; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:110, 115, 246; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:132, 136, 253; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:153, 157, 255; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:174, 177, 255; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:194, 196, 255; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:212, 213, 255; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:227, 228, 255; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:240, 240, 255; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:50, 16, 104; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:67, 13, 140; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:86, 16, 173; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:106, 29, 200; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:126, 49, 222; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:145, 70, 236; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:162, 94, 246; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:178, 119, 250; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:192, 143, 252; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:206, 166, 253; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:219, 188, 254; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:230, 207, 255; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:240, 224, 255; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:248, 237, 255; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:70, 14, 68; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:93, 9, 92; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:120, 0, 120; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:146, 0, 147; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:169, 19, 170; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:191, 43, 191; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:211, 65, 213; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:228, 91, 229; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:239, 120, 238; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:246, 149, 243; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:251, 175, 246; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:254, 199, 248; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:255, 220, 250; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:255, 235, 252; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:83, 3, 41; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:106, 0, 52; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:133, 0, 65; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:161, 0, 78; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:186, 22, 93; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:209, 43, 114; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:227, 69, 137; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:241, 97, 156; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:252, 124, 173; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:255, 152, 191; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:255, 179, 207; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:255, 202, 221; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:255, 221, 233; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:255, 236, 243; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); } diff --git a/tokens/dist/css/express/custom-dark-vars.css b/tokens/dist/css/express/custom-dark-vars.css index 16a7b806b7d..2c489b6fc6d 100644 --- a/tokens/dist/css/express/custom-dark-vars.css +++ b/tokens/dist/css/express/custom-dark-vars.css @@ -1,14 +1,11 @@ -.spectrum--express.spectrum--dark { +.spectrum--express.spectrum--dark{ /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); } diff --git a/tokens/dist/css/express/custom-darkest-vars.css b/tokens/dist/css/express/custom-darkest-vars.css index e7c71205de6..dfefa69dab7 100644 --- a/tokens/dist/css/express/custom-darkest-vars.css +++ b/tokens/dist/css/express/custom-darkest-vars.css @@ -1,14 +1,11 @@ -.spectrum--express.spectrum--darkest { +.spectrum--express.spectrum--darkest{ /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); } diff --git a/tokens/dist/css/express/custom-large-vars.css b/tokens/dist/css/express/custom-large-vars.css index 5130a4f1b68..dd9f3da534d 100644 --- a/tokens/dist/css/express/custom-large-vars.css +++ b/tokens/dist/css/express/custom-large-vars.css @@ -1,10 +1,10 @@ -.spectrum--express.spectrum--large { - --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; +.spectrum--express.spectrum--large{ + --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; + --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-dialog-confirm-border-radius: 8px; + --spectrum-dialog-confirm-border-radius:8px; - --spectrum-dial-border-radius: 15px; + --spectrum-dial-border-radius:15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; + --spectrum-assetcard-focus-ring-border-radius:12px; } diff --git a/tokens/dist/css/express/custom-light-vars.css b/tokens/dist/css/express/custom-light-vars.css index 4393041798b..a6f2aa29708 100644 --- a/tokens/dist/css/express/custom-light-vars.css +++ b/tokens/dist/css/express/custom-light-vars.css @@ -1,15 +1,12 @@ .spectrum--express.spectrum--light, -.spectrum--express.spectrum--lightest { +.spectrum--express.spectrum--lightest{ /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-800-rgb - ); /* var(--spectrum-accent-color-800);*/ - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-800-rgb); /* var(--spectrum-accent-color-800);*/ + --spectrum-well-border-color:rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-900); } diff --git a/tokens/dist/css/express/custom-medium-vars.css b/tokens/dist/css/express/custom-medium-vars.css index 4b15c023b1e..0c6af8b9340 100644 --- a/tokens/dist/css/express/custom-medium-vars.css +++ b/tokens/dist/css/express/custom-medium-vars.css @@ -1,10 +1,10 @@ -.spectrum--express.spectrum--medium { - --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; +.spectrum--express.spectrum--medium{ + --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-dialog-confirm-border-radius: 6px; + --spectrum-dialog-confirm-border-radius:6px; - --spectrum-dial-border-radius: 12px; + --spectrum-dial-border-radius:12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; + --spectrum-assetcard-focus-ring-border-radius:10px; } diff --git a/tokens/dist/css/express/custom-vars.css b/tokens/dist/css/express/custom-vars.css index 7231d05843a..5edbb27eef1 100644 --- a/tokens/dist/css/express/custom-vars.css +++ b/tokens/dist/css/express/custom-vars.css @@ -1,3 +1,3 @@ -.spectrum--express { - --system: express; +.spectrum--express{ + --system:express; } diff --git a/tokens/dist/css/express/global-vars.css b/tokens/dist/css/express/global-vars.css index 360f4614200..2afc013168c 100644 --- a/tokens/dist/css/express/global-vars.css +++ b/tokens/dist/css/express/global-vars.css @@ -1,47 +1,39 @@ -.spectrum--express { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-slider-track-thickness: 4px; - --spectrum-slider-handle-gap: 0px; - --spectrum-picker-border-width: 0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px; - --spectrum-in-field-button-edge-to-fill: 4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px; - --spectrum-border-width-100: 2px; - --spectrum-accent-color-100: var(--spectrum-indigo-100); - --spectrum-accent-color-200: var(--spectrum-indigo-200); - --spectrum-accent-color-300: var(--spectrum-indigo-300); - --spectrum-accent-color-400: var(--spectrum-indigo-400); - --spectrum-accent-color-500: var(--spectrum-indigo-500); - --spectrum-accent-color-600: var(--spectrum-indigo-600); - --spectrum-accent-color-700: var(--spectrum-indigo-700); - --spectrum-accent-color-800: var(--spectrum-indigo-800); - --spectrum-accent-color-900: var(--spectrum-indigo-900); - --spectrum-accent-color-1000: var(--spectrum-indigo-1000); - --spectrum-accent-color-1100: var(--spectrum-indigo-1100); - --spectrum-accent-color-1200: var(--spectrum-indigo-1200); - --spectrum-accent-color-1300: var(--spectrum-indigo-1300); - --spectrum-accent-color-1400: var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); +.spectrum--express{ + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); + --spectrum-slider-track-thickness:4px; + --spectrum-slider-handle-gap:0px; + --spectrum-picker-border-width:0; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px; + --spectrum-in-field-button-edge-to-fill:4px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:1px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px; + --spectrum-border-width-100:2px; + --spectrum-accent-color-100:var(--spectrum-indigo-100); + --spectrum-accent-color-200:var(--spectrum-indigo-200); + --spectrum-accent-color-300:var(--spectrum-indigo-300); + --spectrum-accent-color-400:var(--spectrum-indigo-400); + --spectrum-accent-color-500:var(--spectrum-indigo-500); + --spectrum-accent-color-600:var(--spectrum-indigo-600); + --spectrum-accent-color-700:var(--spectrum-indigo-700); + --spectrum-accent-color-800:var(--spectrum-indigo-800); + --spectrum-accent-color-900:var(--spectrum-indigo-900); + --spectrum-accent-color-1000:var(--spectrum-indigo-1000); + --spectrum-accent-color-1100:var(--spectrum-indigo-1100); + --spectrum-accent-color-1200:var(--spectrum-indigo-1200); + --spectrum-accent-color-1300:var(--spectrum-indigo-1300); + --spectrum-accent-color-1400:var(--spectrum-indigo-1400); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight); } diff --git a/tokens/dist/css/express/large-vars.css b/tokens/dist/css/express/large-vars.css index 624a5bd36bf..a1f73565193 100644 --- a/tokens/dist/css/express/large-vars.css +++ b/tokens/dist/css/express/large-vars.css @@ -1,60 +1,52 @@ -.spectrum--express.spectrum--large { - --spectrum-checkbox-control-size-small: 18px; - --spectrum-checkbox-control-size-medium: 20px; - --spectrum-checkbox-control-size-large: 22px; - --spectrum-checkbox-control-size-extra-large: 26px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 10px; - --spectrum-checkbox-top-to-control-large: 14px; - --spectrum-checkbox-top-to-control-extra-large: 17px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 18px; - --spectrum-switch-control-height-medium: 20px; - --spectrum-switch-control-height-large: 22px; - --spectrum-switch-control-height-extra-large: 26px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 10px; - --spectrum-switch-top-to-control-large: 14px; - --spectrum-switch-top-to-control-extra-large: 17px; - --spectrum-radio-button-control-size-small: 18px; - --spectrum-radio-button-control-size-medium: 20px; - --spectrum-radio-button-control-size-large: 22px; - --spectrum-radio-button-control-size-extra-large: 26px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 10px; - --spectrum-radio-button-top-to-control-large: 14px; - --spectrum-radio-button-top-to-control-extra-large: 17px; - --spectrum-slider-control-height-small: 22px; - --spectrum-slider-control-height-medium: 24px; - --spectrum-slider-control-height-large: 28px; - --spectrum-slider-control-height-extra-large: 30px; - --spectrum-slider-handle-size-small: 22px; - --spectrum-slider-handle-size-medium: 24px; - --spectrum-slider-handle-size-large: 28px; - --spectrum-slider-handle-size-extra-large: 30px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 4px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 12px; - --spectrum-slider-bottom-to-handle-extra-large: 15px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 16px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; +.spectrum--express.spectrum--large{ + --spectrum-checkbox-control-size-small:18px; + --spectrum-checkbox-control-size-medium:20px; + --spectrum-checkbox-control-size-large:22px; + --spectrum-checkbox-control-size-extra-large:26px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:10px; + --spectrum-checkbox-top-to-control-large:14px; + --spectrum-checkbox-top-to-control-extra-large:17px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:18px; + --spectrum-switch-control-height-medium:20px; + --spectrum-switch-control-height-large:22px; + --spectrum-switch-control-height-extra-large:26px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:10px; + --spectrum-switch-top-to-control-large:14px; + --spectrum-switch-top-to-control-extra-large:17px; + --spectrum-radio-button-control-size-small:18px; + --spectrum-radio-button-control-size-medium:20px; + --spectrum-radio-button-control-size-large:22px; + --spectrum-radio-button-control-size-extra-large:26px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:10px; + --spectrum-radio-button-top-to-control-large:14px; + --spectrum-radio-button-top-to-control-extra-large:17px; + --spectrum-slider-control-height-small:22px; + --spectrum-slider-control-height-medium:24px; + --spectrum-slider-control-height-large:28px; + --spectrum-slider-control-height-extra-large:30px; + --spectrum-slider-handle-size-small:22px; + --spectrum-slider-handle-size-medium:24px; + --spectrum-slider-handle-size-large:28px; + --spectrum-slider-handle-size-extra-large:30px; + --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); + --spectrum-slider-bottom-to-handle-small:4px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:12px; + --spectrum-slider-bottom-to-handle-extra-large:15px; + --spectrum-corner-radius-75:4px; + --spectrum-corner-radius-100:8px; + --spectrum-corner-radius-200:16px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:4px; + --spectrum-drop-shadow-blur:16px; } diff --git a/tokens/dist/css/express/medium-vars.css b/tokens/dist/css/express/medium-vars.css index 3761cfa85a8..306753d6693 100644 --- a/tokens/dist/css/express/medium-vars.css +++ b/tokens/dist/css/express/medium-vars.css @@ -1,60 +1,52 @@ -.spectrum--express.spectrum--medium { - --spectrum-checkbox-control-size-small: 14px; - --spectrum-checkbox-control-size-medium: 16px; - --spectrum-checkbox-control-size-large: 18px; - --spectrum-checkbox-control-size-extra-large: 20px; - --spectrum-checkbox-top-to-control-small: 5px; - --spectrum-checkbox-top-to-control-medium: 8px; - --spectrum-checkbox-top-to-control-large: 11px; - --spectrum-checkbox-top-to-control-extra-large: 14px; - --spectrum-switch-control-width-small: 25px; - --spectrum-switch-control-width-medium: 28px; - --spectrum-switch-control-width-large: 32px; - --spectrum-switch-control-width-extra-large: 35px; - --spectrum-switch-control-height-small: 14px; - --spectrum-switch-control-height-medium: 16px; - --spectrum-switch-control-height-large: 18px; - --spectrum-switch-control-height-extra-large: 20px; - --spectrum-switch-top-to-control-small: 5px; - --spectrum-switch-top-to-control-medium: 8px; - --spectrum-switch-top-to-control-large: 11px; - --spectrum-switch-top-to-control-extra-large: 14px; - --spectrum-radio-button-control-size-small: 14px; - --spectrum-radio-button-control-size-medium: 16px; - --spectrum-radio-button-control-size-large: 18px; - --spectrum-radio-button-control-size-extra-large: 20px; - --spectrum-radio-button-top-to-control-small: 5px; - --spectrum-radio-button-top-to-control-medium: 8px; - --spectrum-radio-button-top-to-control-large: 11px; - --spectrum-radio-button-top-to-control-extra-large: 14px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 24px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 24px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 3px; - --spectrum-slider-bottom-to-handle-medium: 6px; - --spectrum-slider-bottom-to-handle-large: 9px; - --spectrum-slider-bottom-to-handle-extra-large: 12px; - --spectrum-corner-radius-75: 3px; - --spectrum-corner-radius-100: 6px; - --spectrum-corner-radius-200: 12px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; +.spectrum--express.spectrum--medium{ + --spectrum-checkbox-control-size-small:14px; + --spectrum-checkbox-control-size-medium:16px; + --spectrum-checkbox-control-size-large:18px; + --spectrum-checkbox-control-size-extra-large:20px; + --spectrum-checkbox-top-to-control-small:5px; + --spectrum-checkbox-top-to-control-medium:8px; + --spectrum-checkbox-top-to-control-large:11px; + --spectrum-checkbox-top-to-control-extra-large:14px; + --spectrum-switch-control-width-small:25px; + --spectrum-switch-control-width-medium:28px; + --spectrum-switch-control-width-large:32px; + --spectrum-switch-control-width-extra-large:35px; + --spectrum-switch-control-height-small:14px; + --spectrum-switch-control-height-medium:16px; + --spectrum-switch-control-height-large:18px; + --spectrum-switch-control-height-extra-large:20px; + --spectrum-switch-top-to-control-small:5px; + --spectrum-switch-top-to-control-medium:8px; + --spectrum-switch-top-to-control-large:11px; + --spectrum-switch-top-to-control-extra-large:14px; + --spectrum-radio-button-control-size-small:14px; + --spectrum-radio-button-control-size-medium:16px; + --spectrum-radio-button-control-size-large:18px; + --spectrum-radio-button-control-size-extra-large:20px; + --spectrum-radio-button-top-to-control-small:5px; + --spectrum-radio-button-top-to-control-medium:8px; + --spectrum-radio-button-top-to-control-large:11px; + --spectrum-radio-button-top-to-control-extra-large:14px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:24px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:24px; + --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); + --spectrum-slider-bottom-to-handle-small:3px; + --spectrum-slider-bottom-to-handle-medium:6px; + --spectrum-slider-bottom-to-handle-large:9px; + --spectrum-slider-bottom-to-handle-extra-large:12px; + --spectrum-corner-radius-75:3px; + --spectrum-corner-radius-100:6px; + --spectrum-corner-radius-200:12px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:4px; + --spectrum-drop-shadow-blur:16px; } diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css index b4ddc8fa406..de1eacdb640 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -1,915 +1,561 @@ -.spectrum { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-opacity-disabled: 0.3; - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-200 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-200 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100); - --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); - --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-500 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-500 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.1; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.25; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.4; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.55; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.7; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.8; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.9; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb) - ); - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.1; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.25; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.4; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.55; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.7; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.8; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.9; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: 4px; - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size); - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); - --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); +.spectrum{ + --spectrum-focus-indicator-color:var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color:var(--spectrum-white); + --spectrum-static-black-focus-indicator-color:var(--spectrum-black); + --spectrum-overlay-color:var(--spectrum-black); + --spectrum-opacity-disabled:0.3; + --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); + --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); + --spectrum-disabled-background-color:var(--spectrum-gray-200); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200); + --spectrum-background-opacity-default:0; + --spectrum-background-opacity-hover:0.1; + --spectrum-background-opacity-down:0.1; + --spectrum-background-opacity-key-focus:0.1; + --spectrum-neutral-content-color-default:var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-focus:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); + --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-disabled-content-color:var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500); + --spectrum-disabled-border-color:var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); + --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); + --spectrum-negative-border-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); + --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-swatch-border-color:var(--spectrum-gray-900); + --spectrum-swatch-border-opacity:0.51; + --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity:0.51; + --spectrum-thumbnail-border-color:var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity:0.1; + --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); + --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color:var(--spectrum-gray-900); + --spectrum-color-area-border-opacity:0.1; + --spectrum-color-slider-border-color:var(--spectrum-gray-900); + --spectrum-color-slider-border-opacity:0.1; + --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border:var(--spectrum-white); + --spectrum-card-selection-background-color:var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity:0.95; + --spectrum-drop-zone-background-color:var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity:0.1; + --spectrum-drop-zone-background-color-opacity-filled:0.3; + --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color:var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity:0.42; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); + --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-floating-action-button-shadow-color:var(--spectrum-floating-action-button-drop-shadow-color); + --spectrum-table-row-hover-color:var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity:0.07; + --spectrum-table-selected-row-background-color:var(--spectrum-informative-background-color-default); + --spectrum-table-selected-row-background-opacity:0.1; + --spectrum-table-selected-row-background-color-non-emphasized:var(--spectrum-neutral-background-color-selected-default); + --spectrum-table-selected-row-background-opacity-non-emphasized:0.1; + --spectrum-table-row-down-opacity:0.1; + --spectrum-table-selected-row-background-opacity-hover:0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; + --spectrum-white-rgb:255, 255, 255; + --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-100-rgb:255, 255, 255; + --spectrum-transparent-white-100-opacity:0; + --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-transparent-white-200-rgb:255, 255, 255; + --spectrum-transparent-white-200-opacity:0.1; + --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); + --spectrum-transparent-white-300-rgb:255, 255, 255; + --spectrum-transparent-white-300-opacity:0.25; + --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); + --spectrum-transparent-white-400-rgb:255, 255, 255; + --spectrum-transparent-white-400-opacity:0.4; + --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); + --spectrum-transparent-white-500-rgb:255, 255, 255; + --spectrum-transparent-white-500-opacity:0.55; + --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); + --spectrum-transparent-white-600-rgb:255, 255, 255; + --spectrum-transparent-white-600-opacity:0.7; + --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); + --spectrum-transparent-white-700-rgb:255, 255, 255; + --spectrum-transparent-white-700-opacity:0.8; + --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); + --spectrum-transparent-white-800-rgb:255, 255, 255; + --spectrum-transparent-white-800-opacity:0.9; + --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); + --spectrum-transparent-white-900-rgb:255, 255, 255; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb)); + --spectrum-black-rgb:0, 0, 0; + --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-100-rgb:0, 0, 0; + --spectrum-transparent-black-100-opacity:0; + --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); + --spectrum-transparent-black-200-rgb:0, 0, 0; + --spectrum-transparent-black-200-opacity:0.1; + --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-transparent-black-300-rgb:0, 0, 0; + --spectrum-transparent-black-300-opacity:0.25; + --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); + --spectrum-transparent-black-400-rgb:0, 0, 0; + --spectrum-transparent-black-400-opacity:0.4; + --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-transparent-black-500-rgb:0, 0, 0; + --spectrum-transparent-black-500-opacity:0.55; + --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); + --spectrum-transparent-black-600-rgb:0, 0, 0; + --spectrum-transparent-black-600-opacity:0.7; + --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); + --spectrum-transparent-black-700-rgb:0, 0, 0; + --spectrum-transparent-black-700-opacity:0.8; + --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); + --spectrum-transparent-black-800-rgb:0, 0, 0; + --spectrum-transparent-black-800-opacity:0.9; + --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); + --spectrum-transparent-black-900-rgb:0, 0, 0; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb)); + --spectrum-icon-color-inverse:var(--spectrum-gray-50); + --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); + --spectrum-radio-button-selection-indicator:4px; + --spectrum-field-label-to-component:0px; + --spectrum-help-text-to-component:0px; + --spectrum-button-minimum-width-multiplier:2.25; + --spectrum-divider-thickness-small:1px; + --spectrum-divider-thickness-medium:2px; + --spectrum-divider-thickness-large:4px; + --spectrum-swatch-rectangle-width-multiplier:2; + --spectrum-swatch-slash-thickness-extra-small:2px; + --spectrum-swatch-slash-thickness-small:3px; + --spectrum-swatch-slash-thickness-medium:4px; + --spectrum-swatch-slash-thickness-large:5px; + --spectrum-progress-bar-minimum-width:48px; + --spectrum-progress-bar-maximum-width:768px; + --spectrum-meter-minimum-width:48px; + --spectrum-meter-maximum-width:768px; + --spectrum-meter-default-width:var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width:240px; + --spectrum-popover-tip-width:16px; + --spectrum-popover-tip-height:8px; + --spectrum-menu-item-label-to-description:1px; + --spectrum-menu-item-section-divider-height:8px; + --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); + --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; + --spectrum-text-field-minimum-width-multiplier:1.5; + --spectrum-combo-box-minimum-width-multiplier:2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier:2; + --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-alert-dialog-minimum-width:288px; + --spectrum-alert-dialog-maximum-width:480px; + --spectrum-contextual-help-minimum-width:268px; + --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text:0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon:0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu:0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text:0px; + --spectrum-alert-banner-to-top-workflow-icon:var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); + --spectrum-color-area-border-width:var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100); + --spectrum-color-wheel-color-area-margin:12px; + --spectrum-color-slider-border-width:1px; + --spectrum-color-slider-border-rounding:4px; + --spectrum-floating-action-button-drop-shadow-blur:12px; + --spectrum-floating-action-button-drop-shadow-y:4px; + --spectrum-illustrated-message-maximum-width:380px; + --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-color-loupe-height:64px; + --spectrum-color-loupe-width:48px; + --spectrum-color-loupe-bottom-to-color-handle:12px; + --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width:1px; + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; + --spectrum-card-minimum-width:100px; + --spectrum-card-preview-minimum-height:130px; + --spectrum-card-selection-background-size:40px; + --spectrum-drop-zone-width:428px; + --spectrum-drop-zone-content-maximum-width:var(--spectrum-illustrated-message-maximum-width); + --spectrum-drop-zone-border-dash-length:8px; + --spectrum-drop-zone-border-dash-gap:4px; + --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); + --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); + --spectrum-color-handle-border-width:var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width:1px; + --spectrum-color-handle-outer-border-width:1px; + --spectrum-color-handle-drop-shadow-x:0; + --spectrum-color-handle-drop-shadow-y:0; + --spectrum-color-handle-drop-shadow-blur:0; + --spectrum-table-row-height-small-compact:var(--spectrum-component-height-75); + --spectrum-table-row-height-medium-compact:var(--spectrum-component-height-100); + --spectrum-table-row-height-large-compact:var(--spectrum-component-height-200); + --spectrum-table-row-height-extra-large-compact:var(--spectrum-component-height-300); + --spectrum-table-row-top-to-text-small-compact:var(--spectrum-component-top-to-text-75); + --spectrum-table-row-top-to-text-medium-compact:var(--spectrum-component-top-to-text-100); + --spectrum-table-row-top-to-text-large-compact:var(--spectrum-component-top-to-text-200); + --spectrum-table-row-top-to-text-extra-large-compact:var(--spectrum-component-top-to-text-300); + --spectrum-table-row-bottom-to-text-small-compact:var(--spectrum-component-bottom-to-text-75); + --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); + --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); + --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); + --spectrum-table-border-divider-width:1px; + --spectrum-tab-item-height-small:var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); + --spectrum-tab-item-height-large:var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large:var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small:var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium:var(--spectrum-component-height-100); + --spectrum-tab-item-compact-height-large:var(--spectrum-component-height-200); + --spectrum-tab-item-compact-height-extra-large:var(--spectrum-component-height-300); + --spectrum-tab-item-start-to-edge-quiet:0px; + --spectrum-in-field-button-width-stacked-small:20px; + --spectrum-in-field-button-width-stacked-medium:28px; + --spectrum-in-field-button-width-stacked-large:36px; + --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-android-elevation:2dp; + --spectrum-spacing-50:2px; + --spectrum-spacing-75:4px; + --spectrum-spacing-100:8px; + --spectrum-spacing-200:12px; + --spectrum-spacing-300:16px; + --spectrum-spacing-400:24px; + --spectrum-spacing-500:32px; + --spectrum-spacing-600:40px; + --spectrum-spacing-700:48px; + --spectrum-spacing-800:64px; + --spectrum-spacing-900:80px; + --spectrum-spacing-1000:96px; + --spectrum-focus-indicator-thickness:2px; + --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-200:2px; + --spectrum-border-width-400:4px; + --spectrum-field-edge-to-text-quiet:0px; + --spectrum-field-edge-to-visual-quiet:0px; + --spectrum-field-edge-to-border-quiet:0px; + --spectrum-field-edge-to-alert-icon-quiet:0px; + --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-text-underline-thickness:1px; + --spectrum-text-underline-gap:1px; + --spectrum-informative-color-100:var(--spectrum-blue-100); + --spectrum-informative-color-200:var(--spectrum-blue-200); + --spectrum-informative-color-300:var(--spectrum-blue-300); + --spectrum-informative-color-400:var(--spectrum-blue-400); + --spectrum-informative-color-500:var(--spectrum-blue-500); + --spectrum-informative-color-600:var(--spectrum-blue-600); + --spectrum-informative-color-700:var(--spectrum-blue-700); + --spectrum-informative-color-800:var(--spectrum-blue-800); + --spectrum-informative-color-900:var(--spectrum-blue-900); + --spectrum-informative-color-1000:var(--spectrum-blue-1000); + --spectrum-informative-color-1100:var(--spectrum-blue-1100); + --spectrum-informative-color-1200:var(--spectrum-blue-1200); + --spectrum-informative-color-1300:var(--spectrum-blue-1300); + --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-negative-color-100:var(--spectrum-red-100); + --spectrum-negative-color-200:var(--spectrum-red-200); + --spectrum-negative-color-300:var(--spectrum-red-300); + --spectrum-negative-color-400:var(--spectrum-red-400); + --spectrum-negative-color-500:var(--spectrum-red-500); + --spectrum-negative-color-600:var(--spectrum-red-600); + --spectrum-negative-color-700:var(--spectrum-red-700); + --spectrum-negative-color-800:var(--spectrum-red-800); + --spectrum-negative-color-900:var(--spectrum-red-900); + --spectrum-negative-color-1000:var(--spectrum-red-1000); + --spectrum-negative-color-1100:var(--spectrum-red-1100); + --spectrum-negative-color-1200:var(--spectrum-red-1200); + --spectrum-negative-color-1300:var(--spectrum-red-1300); + --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-notice-color-100:var(--spectrum-orange-100); + --spectrum-notice-color-200:var(--spectrum-orange-200); + --spectrum-notice-color-300:var(--spectrum-orange-300); + --spectrum-notice-color-400:var(--spectrum-orange-400); + --spectrum-notice-color-500:var(--spectrum-orange-500); + --spectrum-notice-color-600:var(--spectrum-orange-600); + --spectrum-notice-color-700:var(--spectrum-orange-700); + --spectrum-notice-color-800:var(--spectrum-orange-800); + --spectrum-notice-color-900:var(--spectrum-orange-900); + --spectrum-notice-color-1000:var(--spectrum-orange-1000); + --spectrum-notice-color-1100:var(--spectrum-orange-1100); + --spectrum-notice-color-1200:var(--spectrum-orange-1200); + --spectrum-notice-color-1300:var(--spectrum-orange-1300); + --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-positive-color-100:var(--spectrum-green-100); + --spectrum-positive-color-200:var(--spectrum-green-200); + --spectrum-positive-color-300:var(--spectrum-green-300); + --spectrum-positive-color-400:var(--spectrum-green-400); + --spectrum-positive-color-500:var(--spectrum-green-500); + --spectrum-positive-color-600:var(--spectrum-green-600); + --spectrum-positive-color-700:var(--spectrum-green-700); + --spectrum-positive-color-800:var(--spectrum-green-800); + --spectrum-positive-color-900:var(--spectrum-green-900); + --spectrum-positive-color-1000:var(--spectrum-green-1000); + --spectrum-positive-color-1100:var(--spectrum-green-1100); + --spectrum-positive-color-1200:var(--spectrum-green-1200); + --spectrum-positive-color-1300:var(--spectrum-green-1300); + --spectrum-positive-color-1400:var(--spectrum-green-1400); + --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family:Adobe Clean; + --spectrum-serif-font-family:Adobe Clean Serif; + --spectrum-cjk-font-family:Adobe Clean Han; + --spectrum-light-font-weight:300; + --spectrum-regular-font-weight:400; + --spectrum-medium-font-weight:500; + --spectrum-bold-font-weight:700; + --spectrum-extra-bold-font-weight:800; + --spectrum-black-font-weight:900; + --spectrum-italic-font-style:italic; + --spectrum-default-font-style:normal; + --spectrum-line-height-100:1.3; + --spectrum-line-height-200:1.5; + --spectrum-cjk-line-height-100:1.5; + --spectrum-cjk-line-height-200:1.7; + --spectrum-cjk-letter-spacing:0.05em; + --spectrum-heading-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-heading-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-emphasized-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl:var(--spectrum-font-size-1100); + --spectrum-heading-size-xl:var(--spectrum-font-size-900); + --spectrum-heading-size-l:var(--spectrum-font-size-700); + --spectrum-heading-size-m:var(--spectrum-font-size-500); + --spectrum-heading-size-s:var(--spectrum-font-size-300); + --spectrum-heading-size-xs:var(--spectrum-font-size-200); + --spectrum-heading-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl:var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl:var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l:var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m:var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s:var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs:var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-line-height:var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier:0.88888889; + --spectrum-heading-margin-bottom-multiplier:0.25; + --spectrum-heading-color:var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-body-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style:var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-body-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-size-xxxl:var(--spectrum-font-size-600); + --spectrum-body-size-xxl:var(--spectrum-font-size-500); + --spectrum-body-size-xl:var(--spectrum-font-size-400); + --spectrum-body-size-l:var(--spectrum-font-size-300); + --spectrum-body-size-m:var(--spectrum-font-size-200); + --spectrum-body-size-s:var(--spectrum-font-size-100); + --spectrum-body-size-xs:var(--spectrum-font-size-75); + --spectrum-body-line-height:var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier:0.75; + --spectrum-body-color:var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-detail-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-size-xl:var(--spectrum-font-size-200); + --spectrum-detail-size-l:var(--spectrum-font-size-100); + --spectrum-detail-size-m:var(--spectrum-font-size-75); + --spectrum-detail-size-s:var(--spectrum-font-size-50); + --spectrum-detail-line-height:var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier:0.88888889; + --spectrum-detail-margin-bottom-multiplier:0.25; + --spectrum-detail-letter-spacing:0.06em; + --spectrum-detail-sans-serif-text-transform:uppercase; + --spectrum-detail-serif-text-transform:uppercase; + --spectrum-detail-color:var(--spectrum-gray-900); + --spectrum-code-font-family:Source Code Pro; + --spectrum-code-cjk-font-family:var(--spectrum-code-font-family); + --spectrum-code-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-font-style:var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style:var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-size-xl:var(--spectrum-font-size-400); + --spectrum-code-size-l:var(--spectrum-font-size-300); + --spectrum-code-size-m:var(--spectrum-font-size-200); + --spectrum-code-size-s:var(--spectrum-font-size-100); + --spectrum-code-size-xs:var(--spectrum-font-size-75); + --spectrum-code-line-height:var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-code-color:var(--spectrum-gray-800); } diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index fbb6fee9efa..540b45e6b7f 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -1,504 +1,502 @@ -.spectrum--large { - --spectrum-workflow-icon-size-50: 18px; - --spectrum-workflow-icon-size-75: 20px; - --spectrum-workflow-icon-size-100: 22px; - --spectrum-workflow-icon-size-200: 24px; - --spectrum-workflow-icon-size-300: 28px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-edge-to-content: 16px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-text-to-visual-50: 8px; - --spectrum-text-to-visual-75: 9px; - --spectrum-text-to-visual-100: 10px; - --spectrum-text-to-visual-200: 11px; - --spectrum-text-to-visual-300: 13px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 13px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 22px; - --spectrum-component-pill-edge-to-visual-300: 27px; - --spectrum-component-pill-edge-to-visual-only-75: 5px; - --spectrum-component-pill-edge-to-visual-only-100: 9px; - --spectrum-component-pill-edge-to-visual-only-200: 13px; - --spectrum-component-pill-edge-to-visual-only-300: 16px; - --spectrum-component-pill-edge-to-text-75: 15px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 25px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 9px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 16px; - --spectrum-component-edge-to-visual-300: 19px; - --spectrum-component-edge-to-visual-only-50: 4px; - --spectrum-component-edge-to-visual-only-75: 5px; - --spectrum-component-edge-to-visual-only-100: 9px; - --spectrum-component-edge-to-visual-only-200: 13px; - --spectrum-component-edge-to-visual-only-300: 16px; - --spectrum-component-edge-to-text-50: 10px; - --spectrum-component-edge-to-text-75: 11px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 19px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 4px; - --spectrum-component-top-to-workflow-icon-75: 5px; - --spectrum-component-top-to-workflow-icon-100: 9px; - --spectrum-component-top-to-workflow-icon-200: 13px; - --spectrum-component-top-to-workflow-icon-300: 16px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; +.spectrum--large{ + --spectrum-workflow-icon-size-50:18px; + --spectrum-workflow-icon-size-75:20px; + --spectrum-workflow-icon-size-100:22px; + --spectrum-workflow-icon-size-200:24px; + --spectrum-workflow-icon-size-300:28px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-field-label-text-to-asterisk-small:5px; + --spectrum-field-label-text-to-asterisk-medium:5px; + --spectrum-field-label-text-to-asterisk-large:6px; + --spectrum-field-label-text-to-asterisk-extra-large:6px; + --spectrum-field-label-top-to-asterisk-small:11px; + --spectrum-field-label-top-to-asterisk-medium:15px; + --spectrum-field-label-top-to-asterisk-large:19px; + --spectrum-field-label-top-to-asterisk-extra-large:24px; + --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-top-margin-medium:5px; + --spectrum-field-label-top-margin-large:6px; + --spectrum-field-label-top-margin-extra-large:6px; + --spectrum-field-label-to-component-quiet-small:-10px; + --spectrum-field-label-to-component-quiet-medium:-10px; + --spectrum-field-label-to-component-quiet-large:-15px; + --spectrum-field-label-to-component-quiet-extra-large:-19px; + --spectrum-help-text-top-to-workflow-icon-small:5px; + --spectrum-help-text-top-to-workflow-icon-medium:4px; + --spectrum-help-text-top-to-workflow-icon-large:8px; + --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-status-light-dot-size-small:8px; + --spectrum-status-light-dot-size-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:12px; + --spectrum-status-light-top-to-dot-small:11px; + --spectrum-status-light-top-to-dot-medium:15px; + --spectrum-status-light-top-to-dot-large:19px; + --spectrum-status-light-top-to-dot-extra-large:24px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; + --spectrum-action-button-edge-to-hold-icon-medium:5px; + --spectrum-action-button-edge-to-hold-icon-large:6px; + --spectrum-action-button-edge-to-hold-icon-extra-large:7px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-maximum-width:200px; + --spectrum-progress-circle-size-small:20px; + --spectrum-progress-circle-size-medium:40px; + --spectrum-progress-circle-size-large:80px; + --spectrum-progress-circle-thickness-small:3px; + --spectrum-progress-circle-thickness-medium:4px; + --spectrum-progress-circle-thickness-large:5px; + --spectrum-toast-height:56px; + --spectrum-toast-maximum-width:420px; + --spectrum-toast-top-to-workflow-icon:17px; + --spectrum-toast-top-to-text:16px; + --spectrum-toast-bottom-to-text:19px; + --spectrum-action-bar-height:56px; + --spectrum-action-bar-top-to-item-counter:16px; + --spectrum-swatch-size-extra-small:20px; + --spectrum-swatch-size-small:30px; + --spectrum-swatch-size-medium:40px; + --spectrum-swatch-size-large:50px; + --spectrum-progress-bar-thickness-small:5px; + --spectrum-progress-bar-thickness-medium:8px; + --spectrum-progress-bar-thickness-large:10px; + --spectrum-progress-bar-thickness-extra-large:13px; + --spectrum-meter-width:240px; + --spectrum-meter-thickness-small:5px; + --spectrum-meter-thickness-large:8px; + --spectrum-tag-top-to-avatar-small:5px; + --spectrum-tag-top-to-avatar-medium:7px; + --spectrum-tag-top-to-avatar-large:11px; + --spectrum-tag-top-to-cross-icon-small:10px; + --spectrum-tag-top-to-cross-icon-medium:15px; + --spectrum-tag-top-to-cross-icon-large:19px; + --spectrum-popover-top-to-content-area:5px; + --spectrum-menu-item-edge-to-content-not-selected-small:24px; + --spectrum-menu-item-edge-to-content-not-selected-medium:42px; + --spectrum-menu-item-edge-to-content-not-selected-large:47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:54px; + --spectrum-menu-item-top-to-disclosure-icon-small:9px; + --spectrum-menu-item-top-to-disclosure-icon-medium:13px; + --spectrum-menu-item-top-to-disclosure-icon-large:17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:22px; + --spectrum-menu-item-top-to-selected-icon-small:9px; + --spectrum-menu-item-top-to-selected-icon-medium:13px; + --spectrum-menu-item-top-to-selected-icon-large:17px; + --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-to-field-label-small:6px; + --spectrum-slider-control-to-field-label-medium:10px; + --spectrum-slider-control-to-field-label-large:14px; + --spectrum-slider-control-to-field-label-extra-large:17px; + --spectrum-picker-visual-to-disclosure-icon-small:9px; + --spectrum-picker-visual-to-disclosure-icon-medium:10px; + --spectrum-picker-visual-to-disclosure-icon-large:11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; + --spectrum-text-area-minimum-width:140px; + --spectrum-text-area-minimum-height:70px; + --spectrum-combo-box-visual-to-field-button-small:9px; + --spectrum-combo-box-visual-to-field-button-medium:10px; + --spectrum-combo-box-visual-to-field-button-large:11px; + --spectrum-combo-box-visual-to-field-button-extra-large:13px; + --spectrum-thumbnail-size-50:20px; + --spectrum-thumbnail-size-75:22px; + --spectrum-thumbnail-size-100:26px; + --spectrum-thumbnail-size-200:28px; + --spectrum-thumbnail-size-300:32px; + --spectrum-thumbnail-size-400:36px; + --spectrum-thumbnail-size-500:40px; + --spectrum-thumbnail-size-600:46px; + --spectrum-thumbnail-size-700:50px; + --spectrum-thumbnail-size-800:55px; + --spectrum-thumbnail-size-900:62px; + --spectrum-thumbnail-size-1000:70px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size:10px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline:84px; + --spectrum-breadcrumbs-top-to-text:17px; + --spectrum-breadcrumbs-top-to-text-compact:16px; + --spectrum-breadcrumbs-top-to-text-multiline:15px; + --spectrum-breadcrumbs-bottom-to-text:19px; + --spectrum-breadcrumbs-bottom-to-text-compact:19px; + --spectrum-breadcrumbs-bottom-to-text-multiline:10px; + --spectrum-breadcrumbs-start-edge-to-text:9px; + --spectrum-breadcrumbs-top-text-to-bottom-text:11px; + --spectrum-breadcrumbs-top-to-separator-icon:25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px; + --spectrum-breadcrumbs-top-to-truncated-menu:10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:5px; + --spectrum-avatar-size-50:20px; + --spectrum-avatar-size-75:22px; + --spectrum-avatar-size-100:26px; + --spectrum-avatar-size-200:28px; + --spectrum-avatar-size-300:32px; + --spectrum-avatar-size-400:36px; + --spectrum-avatar-size-500:40px; + --spectrum-avatar-size-600:46px; + --spectrum-avatar-size-700:50px; + --spectrum-alert-banner-minimum-height:64px; + --spectrum-alert-banner-width:680px; + --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-text:21px; + --spectrum-alert-banner-bottom-to-text:22px; + --spectrum-rating-indicator-width:22px; + --spectrum-rating-indicator-to-icon:5px; + --spectrum-color-area-width:240px; + --spectrum-color-area-minimum-width:80px; + --spectrum-color-area-height:240px; + --spectrum-color-area-minimum-height:80px; + --spectrum-color-wheel-width:240px; + --spectrum-color-wheel-minimum-width:219px; + --spectrum-color-slider-length:240px; + --spectrum-color-slider-minimum-length:100px; + --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s); + --spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-width:216px; + --spectrum-coach-mark-minimum-width:216px; + --spectrum-coach-mark-maximum-width:248px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; + --spectrum-coach-mark-media-height:162px; + --spectrum-coach-mark-media-minimum-height:121px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-compact-small:2px; + --spectrum-accordion-top-to-text-regular-small:7px; + --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-compact-medium:4px; + --spectrum-accordion-top-to-text-regular-medium:9px; + --spectrum-accordion-top-to-text-spacious-medium:14px; + --spectrum-accordion-top-to-text-compact-large:7px; + --spectrum-accordion-top-to-text-regular-large:12px; + --spectrum-accordion-top-to-text-spacious-large:14px; + --spectrum-accordion-top-to-text-compact-extra-large:7px; + --spectrum-accordion-top-to-text-regular-extra-large:12px; + --spectrum-accordion-top-to-text-spacious-extra-large:14px; + --spectrum-accordion-bottom-to-text-compact-small:4px; + --spectrum-accordion-bottom-to-text-regular-small:9px; + --spectrum-accordion-bottom-to-text-spacious-small:14px; + --spectrum-accordion-bottom-to-text-compact-medium:8px; + --spectrum-accordion-bottom-to-text-regular-medium:13px; + --spectrum-accordion-bottom-to-text-spacious-medium:18px; + --spectrum-accordion-bottom-to-text-compact-large:9px; + --spectrum-accordion-bottom-to-text-regular-large:14px; + --spectrum-accordion-bottom-to-text-spacious-large:19px; + --spectrum-accordion-bottom-to-text-compact-extra-large:10px; + --spectrum-accordion-bottom-to-text-regular-extra-large:15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; + --spectrum-accordion-minimum-width:250px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; + --spectrum-accordion-content-area-top-to-content:10px; + --spectrum-accordion-content-area-bottom-to-content:20px; + --spectrum-color-handle-size:20px; + --spectrum-color-handle-size-key-focus:40px; + --spectrum-table-column-header-row-top-to-text-small:10px; + --spectrum-table-column-header-row-top-to-text-medium:9px; + --spectrum-table-column-header-row-top-to-text-large:13px; + --spectrum-table-column-header-row-top-to-text-extra-large:16px; + --spectrum-table-column-header-row-bottom-to-text-small:11px; + --spectrum-table-column-header-row-bottom-to-text-medium:10px; + --spectrum-table-column-header-row-bottom-to-text-large:13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:17px; + --spectrum-table-row-height-small-regular:40px; + --spectrum-table-row-height-medium-regular:50px; + --spectrum-table-row-height-large-regular:60px; + --spectrum-table-row-height-extra-large-regular:70px; + --spectrum-table-row-height-small-spacious:50px; + --spectrum-table-row-height-medium-spacious:60px; + --spectrum-table-row-height-large-spacious:70px; + --spectrum-table-row-height-extra-large-spacious:80px; + --spectrum-table-row-top-to-text-small-regular:10px; + --spectrum-table-row-top-to-text-medium-regular:14px; + --spectrum-table-row-top-to-text-large-regular:18px; + --spectrum-table-row-top-to-text-extra-large-regular:21px; + --spectrum-table-row-bottom-to-text-small-regular:11px; + --spectrum-table-row-bottom-to-text-medium-regular:15px; + --spectrum-table-row-bottom-to-text-large-regular:18px; + --spectrum-table-row-bottom-to-text-extra-large-regular:22px; + --spectrum-table-row-top-to-text-small-spacious:15px; + --spectrum-table-row-top-to-text-medium-spacious:18px; + --spectrum-table-row-top-to-text-large-spacious:23px; + --spectrum-table-row-top-to-text-extra-large-spacious:26px; + --spectrum-table-row-bottom-to-text-small-spacious:16px; + --spectrum-table-row-bottom-to-text-medium-spacious:18px; + --spectrum-table-row-bottom-to-text-large-spacious:23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; + --spectrum-table-edge-to-content:16px; + --spectrum-table-checkbox-to-text:30px; + --spectrum-table-header-row-checkbox-to-top-small:14px; + --spectrum-table-header-row-checkbox-to-top-medium:13px; + --spectrum-table-header-row-checkbox-to-top-large:17px; + --spectrum-table-header-row-checkbox-to-top-extra-large:21px; + --spectrum-table-row-checkbox-to-top-small-compact:9px; + --spectrum-table-row-checkbox-to-top-small-regular:14px; + --spectrum-table-row-checkbox-to-top-small-spacious:19px; + --spectrum-table-row-checkbox-to-top-medium-compact:13px; + --spectrum-table-row-checkbox-to-top-medium-regular:18px; + --spectrum-table-row-checkbox-to-top-medium-spacious:23px; + --spectrum-table-row-checkbox-to-top-large-compact:17px; + --spectrum-table-row-checkbox-to-top-large-regular:22px; + --spectrum-table-row-checkbox-to-top-large-spacious:27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:31px; + --spectrum-table-section-header-row-height-small:30px; + --spectrum-table-section-header-row-height-medium:40px; + --spectrum-table-section-header-row-height-large:50px; + --spectrum-table-section-header-row-height-extra-large:60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px; + --spectrum-tab-item-to-tab-item-horizontal-small:27px; + --spectrum-tab-item-to-tab-item-horizontal-medium:30px; + --spectrum-tab-item-to-tab-item-horizontal-large:33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:36px; + --spectrum-tab-item-to-tab-item-vertical-small:5px; + --spectrum-tab-item-to-tab-item-vertical-medium:5px; + --spectrum-tab-item-to-tab-item-vertical-large:6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:6px; + --spectrum-tab-item-start-to-edge-small:13px; + --spectrum-tab-item-start-to-edge-medium:15px; + --spectrum-tab-item-start-to-edge-large:17px; + --spectrum-tab-item-start-to-edge-extra-large:19px; + --spectrum-tab-item-top-to-text-small:14px; + --spectrum-tab-item-bottom-to-text-small:15px; + --spectrum-tab-item-top-to-text-medium:18px; + --spectrum-tab-item-bottom-to-text-medium:19px; + --spectrum-tab-item-top-to-text-large:22px; + --spectrum-tab-item-bottom-to-text-large:22px; + --spectrum-tab-item-top-to-text-extra-large:25px; + --spectrum-tab-item-bottom-to-text-extra-large:25px; + --spectrum-tab-item-top-to-text-compact-small:5px; + --spectrum-tab-item-bottom-to-text-compact-small:6px; + --spectrum-tab-item-top-to-text-compact-medium:9px; + --spectrum-tab-item-bottom-to-text-compact-medium:10px; + --spectrum-tab-item-top-to-text-compact-large:12px; + --spectrum-tab-item-bottom-to-text-compact-large:14px; + --spectrum-tab-item-top-to-text-compact-extra-large:15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:17px; + --spectrum-tab-item-top-to-workflow-icon-small:15px; + --spectrum-tab-item-top-to-workflow-icon-medium:19px; + --spectrum-tab-item-top-to-workflow-icon-large:23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px; + --spectrum-tab-item-focus-indicator-gap-small:9px; + --spectrum-tab-item-focus-indicator-gap-medium:10px; + --spectrum-tab-item-focus-indicator-gap-large:11px; + --spectrum-tab-item-focus-indicator-gap-extra-large:12px; + --spectrum-side-navigation-width:240px; + --spectrum-side-navigation-minimum-width:200px; + --spectrum-side-navigation-maximum-width:300px; + --spectrum-side-navigation-second-level-edge-to-text:30px; + --spectrum-side-navigation-third-level-edge-to-text:45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; + --spectrum-side-navigation-item-to-item:5px; + --spectrum-side-navigation-item-to-header:30px; + --spectrum-side-navigation-header-to-item:10px; + --spectrum-side-navigation-bottom-to-text:10px; + --spectrum-tray-top-to-content-area:5px; + --spectrum-text-to-visual-50:8px; + --spectrum-text-to-visual-75:9px; + --spectrum-text-to-visual-100:10px; + --spectrum-text-to-visual-200:11px; + --spectrum-text-to-visual-300:13px; + --spectrum-text-to-control-75:11px; + --spectrum-text-to-control-100:13px; + --spectrum-text-to-control-200:14px; + --spectrum-text-to-control-300:16px; + --spectrum-component-height-50:26px; + --spectrum-component-height-75:30px; + --spectrum-component-height-100:40px; + --spectrum-component-height-200:50px; + --spectrum-component-height-300:60px; + --spectrum-component-height-400:70px; + --spectrum-component-height-500:80px; + --spectrum-component-pill-edge-to-visual-75:13px; + --spectrum-component-pill-edge-to-visual-100:17px; + --spectrum-component-pill-edge-to-visual-200:22px; + --spectrum-component-pill-edge-to-visual-300:27px; + --spectrum-component-pill-edge-to-visual-only-75:5px; + --spectrum-component-pill-edge-to-visual-only-100:9px; + --spectrum-component-pill-edge-to-visual-only-200:13px; + --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-text-75:15px; + --spectrum-component-pill-edge-to-text-100:20px; + --spectrum-component-pill-edge-to-text-200:25px; + --spectrum-component-pill-edge-to-text-300:30px; + --spectrum-component-edge-to-visual-50:7px; + --spectrum-component-edge-to-visual-75:9px; + --spectrum-component-edge-to-visual-100:12px; + --spectrum-component-edge-to-visual-200:16px; + --spectrum-component-edge-to-visual-300:19px; + --spectrum-component-edge-to-visual-only-50:4px; + --spectrum-component-edge-to-visual-only-75:5px; + --spectrum-component-edge-to-visual-only-100:9px; + --spectrum-component-edge-to-visual-only-200:13px; + --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-text-50:10px; + --spectrum-component-edge-to-text-75:11px; + --spectrum-component-edge-to-text-100:15px; + --spectrum-component-edge-to-text-200:19px; + --spectrum-component-edge-to-text-300:22px; + --spectrum-component-top-to-workflow-icon-50:4px; + --spectrum-component-top-to-workflow-icon-75:5px; + --spectrum-component-top-to-workflow-icon-100:9px; + --spectrum-component-top-to-workflow-icon-200:13px; + --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-text-50:4px; + --spectrum-component-top-to-text-75:5px; + --spectrum-component-top-to-text-100:8px; + --spectrum-component-top-to-text-200:12px; + --spectrum-component-top-to-text-300:15px; + --spectrum-component-bottom-to-text-50:6px; + --spectrum-component-bottom-to-text-75:6px; + --spectrum-component-bottom-to-text-100:11px; + --spectrum-component-bottom-to-text-200:14px; + --spectrum-component-bottom-to-text-300:18px; + --spectrum-component-to-menu-small:7px; + --spectrum-component-to-menu-medium:8px; + --spectrum-component-to-menu-large:9px; + --spectrum-component-to-menu-extra-large:10px; + --spectrum-field-edge-to-disclosure-icon-75:9px; + --spectrum-field-edge-to-disclosure-icon-100:13px; + --spectrum-field-edge-to-disclosure-icon-200:17px; + --spectrum-field-edge-to-disclosure-icon-300:22px; + --spectrum-field-end-edge-to-disclosure-icon-75:9px; + --spectrum-field-end-edge-to-disclosure-icon-100:13px; + --spectrum-field-end-edge-to-disclosure-icon-200:17px; + --spectrum-field-end-edge-to-disclosure-icon-300:22px; + --spectrum-field-top-to-disclosure-icon-75:9px; + --spectrum-field-top-to-disclosure-icon-100:13px; + --spectrum-field-top-to-disclosure-icon-200:17px; + --spectrum-field-top-to-disclosure-icon-300:22px; + --spectrum-field-top-to-alert-icon-small:5px; + --spectrum-field-top-to-alert-icon-medium:9px; + --spectrum-field-top-to-alert-icon-large:13px; + --spectrum-field-top-to-alert-icon-extra-large:16px; + --spectrum-field-top-to-validation-icon-small:9px; + --spectrum-field-top-to-validation-icon-medium:13px; + --spectrum-field-top-to-validation-icon-large:17px; + --spectrum-field-top-to-validation-icon-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:7px; + --spectrum-field-top-to-progress-circle-medium:12px; + --spectrum-field-top-to-progress-circle-large:17px; + --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-edge-to-alert-icon-small:11px; + --spectrum-field-edge-to-alert-icon-medium:15px; + --spectrum-field-edge-to-alert-icon-large:19px; + --spectrum-field-edge-to-alert-icon-extra-large:22px; + --spectrum-field-edge-to-validation-icon-small:11px; + --spectrum-field-edge-to-validation-icon-medium:15px; + --spectrum-field-edge-to-validation-icon-large:19px; + --spectrum-field-edge-to-validation-icon-extra-large:22px; + --spectrum-field-text-to-alert-icon-small:10px; + --spectrum-field-text-to-alert-icon-medium:15px; + --spectrum-field-text-to-alert-icon-large:19px; + --spectrum-field-text-to-alert-icon-extra-large:22px; + --spectrum-field-text-to-validation-icon-small:10px; + --spectrum-field-text-to-validation-icon-medium:15px; + --spectrum-field-text-to-validation-icon-large:19px; + --spectrum-field-text-to-validation-icon-extra-large:22px; + --spectrum-field-width:240px; + --spectrum-character-count-to-field-quiet-small:-4px; + --spectrum-character-count-to-field-quiet-medium:-4px; + --spectrum-character-count-to-field-quiet-large:-4px; + --spectrum-character-count-to-field-quiet-extra-large:-5px; + --spectrum-side-label-character-count-to-field:15px; + --spectrum-side-label-character-count-top-margin-small:5px; + --spectrum-side-label-character-count-top-margin-medium:10px; + --spectrum-side-label-character-count-top-margin-large:14px; + --spectrum-side-label-character-count-top-margin-extra-large:18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:12px; + --spectrum-navigational-indicator-top-to-back-icon-large:16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; + --spectrum-color-control-track-width:30px; + --spectrum-font-size-50:13px; + --spectrum-font-size-75:15px; + --spectrum-font-size-100:17px; + --spectrum-font-size-200:19px; + --spectrum-font-size-300:22px; + --spectrum-font-size-400:24px; + --spectrum-font-size-500:27px; + --spectrum-font-size-600:31px; + --spectrum-font-size-700:34px; + --spectrum-font-size-800:39px; + --spectrum-font-size-900:44px; + --spectrum-font-size-1000:49px; + --spectrum-font-size-1100:55px; + --spectrum-font-size-1200:62px; + --spectrum-font-size-1300:70px; } diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css index 8f1e93706d1..43d7086ec86 100644 --- a/tokens/dist/css/light-vars.css +++ b/tokens/dist/css/light-vars.css @@ -1,493 +1,459 @@ -.spectrum--light, -.spectrum--lightest { - --spectrum-overlay-opacity: 0.4; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.15; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-200); - --spectrum-background-layer-1-color: var(--spectrum-gray-100); - --spectrum-background-layer-2-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-700 - ); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1100); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1100 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1100 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1100 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-600); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-700); - --spectrum-positive-visual-color: var(--spectrum-positive-color-700); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-gray-50-rgb: 255, 255, 255; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 253, 253, 253; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 248, 248, 248; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 230, 230, 230; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 213, 213, 213; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 177, 177, 177; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 144, 144, 144; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 109, 109, 109; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 70, 70, 70; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 34, 34, 34; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 0, 0, 0; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 224, 242, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 202, 232, 255; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 181, 222, 255; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 150, 206, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 120, 187, 250; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 89, 167, 246; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 56, 146, 243; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 20, 122, 243; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 2, 101, 220; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 0, 84, 182; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 0, 68, 145; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 0, 53, 113; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 0, 39, 84; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 0, 28, 60; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 255, 235, 231; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 221, 214; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 205, 195; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 183, 169; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 155, 136; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 124, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 247, 92, 70; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 234, 56, 41; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 211, 21, 16; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 180, 0, 0; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 147, 0, 0; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 116, 0, 0; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 89, 0, 0; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 67, 0, 0; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 255, 236, 204; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 223, 173; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 253, 210, 145; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 187, 99; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 160, 55; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 246, 133, 17; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 228, 111, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 203, 93, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 177, 76, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 149, 61, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 122, 47, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 97, 35, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 73, 25, 1; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 53, 18, 1; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 251, 241, 152; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 248, 231, 80; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 248, 217, 4; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 232, 198, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 215, 179, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 196, 159, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 176, 140, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 155, 120, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 133, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 112, 83, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 91, 67, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 72, 51, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 54, 37, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 40, 26, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 219, 252, 110; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 203, 244, 67; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 188, 233, 42; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 170, 216, 22; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 152, 197, 10; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 135, 177, 3; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 118, 156, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 103, 136, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 87, 116, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 72, 96, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 58, 77, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 44, 59, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 33, 44, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 24, 31, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 205, 252, 191; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 174, 246, 157; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 150, 238, 133; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 114, 224, 106; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 78, 207, 80; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 39, 187, 54; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 7, 167, 33; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 0, 145, 18; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 0, 124, 15; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 0, 103, 15; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 0, 83, 13; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 0, 64, 10; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 0, 48, 7; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 0, 34, 5; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 206, 248, 224; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 173, 244, 206; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 137, 236, 188; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 103, 222, 168; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 73, 204, 147; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 47, 184, 128; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 21, 164, 110; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 0, 143, 93; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 0, 122, 77; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 0, 101, 62; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 0, 81, 50; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 5, 63, 39; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 10, 46, 29; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 10, 32, 21; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 206, 247, 243; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 170, 241, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 140, 233, 226; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 101, 218, 210; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 63, 201, 193; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 15, 181, 174; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 161, 154; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 0, 140, 135; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 0, 119, 114; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 0, 99, 95; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 12, 79, 76; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 18, 60, 58; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 18, 44, 43; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 15, 31, 30; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 197, 248, 255; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 164, 240, 255; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 136, 231, 250; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 96, 216, 243; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 51, 197, 232; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 18, 176, 218; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 1, 156, 200; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 0, 134, 180; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 0, 113, 159; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 0, 93, 137; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 74, 115; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 57, 93; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 42, 70; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 30, 51; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 237, 238, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 224, 226, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 211, 213, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 193, 196, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 172, 175, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 149, 153, 255; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 126, 132, 252; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 104, 109, 244; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 82, 88, 228; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 64, 70, 202; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 50, 54, 168; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 38, 41, 134; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 27, 30, 100; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 20, 22, 72; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 246, 235, 255; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 238, 221, 255; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 230, 208, 255; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 219, 187, 254; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 204, 164, 253; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 189, 139, 252; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 174, 114, 249; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 157, 87, 244; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 137, 61, 231; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 115, 38, 211; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 93, 19, 183; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 71, 12, 148; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 51, 16, 106; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 35, 15, 73; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 255, 233, 252; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 255, 218, 250; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 254, 199, 248; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 251, 174, 246; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 245, 146, 243; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 237, 116, 237; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 224, 85, 226; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 205, 58, 206; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 182, 34, 183; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 157, 3, 158; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 128, 0, 129; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 100, 6, 100; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 71, 14, 70; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 50, 13, 49; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 255, 234, 241; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 220, 232; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 202, 221; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 178, 206; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 149, 189; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 250, 119, 170; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 239, 90, 152; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 222, 61, 130; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 200, 34, 105; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 173, 9, 85; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 142, 0, 69; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 112, 0, 55; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 84, 3, 42; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 60, 6, 29; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); +.spectrum--light, .spectrum--lightest{ + --spectrum-overlay-opacity:0.4; + --spectrum-drop-shadow-color-rgb:0, 0, 0; + --spectrum-drop-shadow-color-opacity:0.15; + --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); + --spectrum-background-base-color:var(--spectrum-gray-200); + --spectrum-background-layer-1-color:var(--spectrum-gray-100); + --spectrum-background-layer-2-color:var(--spectrum-gray-50); + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-900); + --spectrum-orange-background-color-default:var(--spectrum-orange-600); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-500); + --spectrum-celery-background-color-default:var(--spectrum-celery-600); + --spectrum-green-background-color-default:var(--spectrum-green-900); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-900); + --spectrum-blue-background-color-default:var(--spectrum-blue-900); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-900); + --spectrum-purple-background-color-default:var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-900); + --spectrum-neutral-visual-color:var(--spectrum-gray-500); + --spectrum-accent-visual-color:var(--spectrum-accent-color-800); + --spectrum-informative-visual-color:var(--spectrum-informative-color-800); + --spectrum-negative-visual-color:var(--spectrum-negative-color-800); + --spectrum-notice-visual-color:var(--spectrum-notice-color-700); + --spectrum-positive-visual-color:var(--spectrum-positive-color-700); + --spectrum-gray-visual-color:var(--spectrum-gray-500); + --spectrum-red-visual-color:var(--spectrum-red-800); + --spectrum-orange-visual-color:var(--spectrum-orange-700); + --spectrum-yellow-visual-color:var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color:var(--spectrum-celery-700); + --spectrum-green-visual-color:var(--spectrum-green-700); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color:var(--spectrum-cyan-600); + --spectrum-blue-visual-color:var(--spectrum-blue-800); + --spectrum-indigo-visual-color:var(--spectrum-indigo-800); + --spectrum-purple-visual-color:var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); + --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:177, 177, 177; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:109, 109, 109; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:255, 235, 231; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:206, 248, 224; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400); } diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index 0cd36925e15..be484712ece 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -1,504 +1,502 @@ -.spectrum--medium { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 18px; - --spectrum-workflow-icon-size-200: 20px; - --spectrum-workflow-icon-size-300: 22px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-edge-to-content: 16px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-text-to-visual-50: 6px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 10px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 21px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 7px; - --spectrum-component-pill-edge-to-visual-only-200: 10px; - --spectrum-component-pill-edge-to-visual-only-300: 13px; - --spectrum-component-pill-edge-to-text-75: 12px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 24px; - --spectrum-component-edge-to-visual-50: 6px; - --spectrum-component-edge-to-visual-75: 7px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 15px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 7px; - --spectrum-component-edge-to-visual-only-200: 10px; - --spectrum-component-edge-to-visual-only-300: 13px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 9px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 18px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 7px; - --spectrum-component-top-to-workflow-icon-200: 10px; - --spectrum-component-top-to-workflow-icon-300: 13px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; +.spectrum--medium{ + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:18px; + --spectrum-workflow-icon-size-200:20px; + --spectrum-workflow-icon-size-300:22px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-field-label-text-to-asterisk-small:4px; + --spectrum-field-label-text-to-asterisk-medium:4px; + --spectrum-field-label-text-to-asterisk-large:5px; + --spectrum-field-label-text-to-asterisk-extra-large:5px; + --spectrum-field-label-top-to-asterisk-small:8px; + --spectrum-field-label-top-to-asterisk-medium:12px; + --spectrum-field-label-top-to-asterisk-large:15px; + --spectrum-field-label-top-to-asterisk-extra-large:19px; + --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-top-margin-medium:4px; + --spectrum-field-label-top-margin-large:5px; + --spectrum-field-label-top-margin-extra-large:5px; + --spectrum-field-label-to-component-quiet-small:-8px; + --spectrum-field-label-to-component-quiet-medium:-8px; + --spectrum-field-label-to-component-quiet-large:-12px; + --spectrum-field-label-to-component-quiet-extra-large:-15px; + --spectrum-help-text-top-to-workflow-icon-small:4px; + --spectrum-help-text-top-to-workflow-icon-medium:3px; + --spectrum-help-text-top-to-workflow-icon-large:6px; + --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-status-light-dot-size-small:8px; + --spectrum-status-light-dot-size-medium:8px; + --spectrum-status-light-dot-size-large:10px; + --spectrum-status-light-dot-size-extra-large:10px; + --spectrum-status-light-top-to-dot-small:8px; + --spectrum-status-light-top-to-dot-medium:12px; + --spectrum-status-light-top-to-dot-large:15px; + --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; + --spectrum-action-button-edge-to-hold-icon-medium:4px; + --spectrum-action-button-edge-to-hold-icon-large:5px; + --spectrum-action-button-edge-to-hold-icon-extra-large:6px; + --spectrum-tooltip-tip-width:8px; + --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-maximum-width:160px; + --spectrum-progress-circle-size-small:16px; + --spectrum-progress-circle-size-medium:32px; + --spectrum-progress-circle-size-large:64px; + --spectrum-progress-circle-thickness-small:2px; + --spectrum-progress-circle-thickness-medium:3px; + --spectrum-progress-circle-thickness-large:4px; + --spectrum-toast-height:48px; + --spectrum-toast-maximum-width:336px; + --spectrum-toast-top-to-workflow-icon:15px; + --spectrum-toast-top-to-text:14px; + --spectrum-toast-bottom-to-text:17px; + --spectrum-action-bar-height:48px; + --spectrum-action-bar-top-to-item-counter:14px; + --spectrum-swatch-size-extra-small:16px; + --spectrum-swatch-size-small:24px; + --spectrum-swatch-size-medium:32px; + --spectrum-swatch-size-large:40px; + --spectrum-progress-bar-thickness-small:4px; + --spectrum-progress-bar-thickness-medium:6px; + --spectrum-progress-bar-thickness-large:8px; + --spectrum-progress-bar-thickness-extra-large:10px; + --spectrum-meter-width:192px; + --spectrum-meter-thickness-small:4px; + --spectrum-meter-thickness-large:6px; + --spectrum-tag-top-to-avatar-small:4px; + --spectrum-tag-top-to-avatar-medium:6px; + --spectrum-tag-top-to-avatar-large:9px; + --spectrum-tag-top-to-cross-icon-small:8px; + --spectrum-tag-top-to-cross-icon-medium:12px; + --spectrum-tag-top-to-cross-icon-large:15px; + --spectrum-popover-top-to-content-area:4px; + --spectrum-menu-item-edge-to-content-not-selected-small:28px; + --spectrum-menu-item-edge-to-content-not-selected-medium:32px; + --spectrum-menu-item-edge-to-content-not-selected-large:38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:45px; + --spectrum-menu-item-top-to-disclosure-icon-small:7px; + --spectrum-menu-item-top-to-disclosure-icon-medium:11px; + --spectrum-menu-item-top-to-disclosure-icon-large:14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:17px; + --spectrum-menu-item-top-to-selected-icon-small:7px; + --spectrum-menu-item-top-to-selected-icon-medium:11px; + --spectrum-menu-item-top-to-selected-icon-large:14px; + --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-to-field-label-small:5px; + --spectrum-slider-control-to-field-label-medium:8px; + --spectrum-slider-control-to-field-label-large:11px; + --spectrum-slider-control-to-field-label-extra-large:14px; + --spectrum-picker-visual-to-disclosure-icon-small:7px; + --spectrum-picker-visual-to-disclosure-icon-medium:8px; + --spectrum-picker-visual-to-disclosure-icon-large:9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; + --spectrum-text-area-minimum-width:112px; + --spectrum-text-area-minimum-height:56px; + --spectrum-combo-box-visual-to-field-button-small:7px; + --spectrum-combo-box-visual-to-field-button-medium:8px; + --spectrum-combo-box-visual-to-field-button-large:9px; + --spectrum-combo-box-visual-to-field-button-extra-large:10px; + --spectrum-thumbnail-size-50:16px; + --spectrum-thumbnail-size-75:18px; + --spectrum-thumbnail-size-100:20px; + --spectrum-thumbnail-size-200:22px; + --spectrum-thumbnail-size-300:26px; + --spectrum-thumbnail-size-400:28px; + --spectrum-thumbnail-size-500:32px; + --spectrum-thumbnail-size-600:36px; + --spectrum-thumbnail-size-700:40px; + --spectrum-thumbnail-size-800:44px; + --spectrum-thumbnail-size-900:50px; + --spectrum-thumbnail-size-1000:56px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size:8px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline:72px; + --spectrum-breadcrumbs-top-to-text:13px; + --spectrum-breadcrumbs-top-to-text-compact:11px; + --spectrum-breadcrumbs-top-to-text-multiline:12px; + --spectrum-breadcrumbs-bottom-to-text:15px; + --spectrum-breadcrumbs-bottom-to-text-compact:12px; + --spectrum-breadcrumbs-bottom-to-text-multiline:9px; + --spectrum-breadcrumbs-start-edge-to-text:8px; + --spectrum-breadcrumbs-top-text-to-bottom-text:9px; + --spectrum-breadcrumbs-top-to-separator-icon:19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:11px; + --spectrum-breadcrumbs-top-to-truncated-menu:8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:4px; + --spectrum-avatar-size-50:16px; + --spectrum-avatar-size-75:18px; + --spectrum-avatar-size-100:20px; + --spectrum-avatar-size-200:22px; + --spectrum-avatar-size-300:26px; + --spectrum-avatar-size-400:28px; + --spectrum-avatar-size-500:32px; + --spectrum-avatar-size-600:36px; + --spectrum-avatar-size-700:40px; + --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-width:832px; + --spectrum-alert-banner-top-to-workflow-icon:15px; + --spectrum-alert-banner-top-to-text:14px; + --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-rating-indicator-width:18px; + --spectrum-rating-indicator-to-icon:4px; + --spectrum-color-area-width:192px; + --spectrum-color-area-minimum-width:64px; + --spectrum-color-area-height:192px; + --spectrum-color-area-minimum-height:64px; + --spectrum-color-wheel-width:192px; + --spectrum-color-wheel-minimum-width:175px; + --spectrum-color-slider-length:192px; + --spectrum-color-slider-minimum-length:80px; + --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-m); + --spectrum-illustrated-message-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-width:296px; + --spectrum-coach-mark-minimum-width:296px; + --spectrum-coach-mark-maximum-width:380px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; + --spectrum-coach-mark-media-height:222px; + --spectrum-coach-mark-media-minimum-height:166px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-compact-small:2px; + --spectrum-accordion-top-to-text-regular-small:5px; + --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-compact-medium:4px; + --spectrum-accordion-top-to-text-regular-medium:8px; + --spectrum-accordion-top-to-text-spacious-medium:12px; + --spectrum-accordion-top-to-text-compact-large:4px; + --spectrum-accordion-top-to-text-regular-large:9px; + --spectrum-accordion-top-to-text-spacious-large:12px; + --spectrum-accordion-top-to-text-compact-extra-large:5px; + --spectrum-accordion-top-to-text-regular-extra-large:9px; + --spectrum-accordion-top-to-text-spacious-extra-large:13px; + --spectrum-accordion-bottom-to-text-compact-small:2px; + --spectrum-accordion-bottom-to-text-regular-small:7px; + --spectrum-accordion-bottom-to-text-spacious-small:11px; + --spectrum-accordion-bottom-to-text-compact-medium:5px; + --spectrum-accordion-bottom-to-text-regular-medium:9px; + --spectrum-accordion-bottom-to-text-spacious-medium:13px; + --spectrum-accordion-bottom-to-text-compact-large:8px; + --spectrum-accordion-bottom-to-text-regular-large:11px; + --spectrum-accordion-bottom-to-text-spacious-large:16px; + --spectrum-accordion-bottom-to-text-compact-extra-large:8px; + --spectrum-accordion-bottom-to-text-regular-extra-large:12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; + --spectrum-accordion-minimum-width:200px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; + --spectrum-accordion-content-area-top-to-content:8px; + --spectrum-accordion-content-area-bottom-to-content:16px; + --spectrum-color-handle-size:16px; + --spectrum-color-handle-size-key-focus:32px; + --spectrum-table-column-header-row-top-to-text-small:8px; + --spectrum-table-column-header-row-top-to-text-medium:7px; + --spectrum-table-column-header-row-top-to-text-large:10px; + --spectrum-table-column-header-row-top-to-text-extra-large:13px; + --spectrum-table-column-header-row-bottom-to-text-small:9px; + --spectrum-table-column-header-row-bottom-to-text-medium:8px; + --spectrum-table-column-header-row-bottom-to-text-large:10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:13px; + --spectrum-table-row-height-small-regular:32px; + --spectrum-table-row-height-medium-regular:40px; + --spectrum-table-row-height-large-regular:48px; + --spectrum-table-row-height-extra-large-regular:56px; + --spectrum-table-row-height-small-spacious:40px; + --spectrum-table-row-height-medium-spacious:48px; + --spectrum-table-row-height-large-spacious:56px; + --spectrum-table-row-height-extra-large-spacious:64px; + --spectrum-table-row-top-to-text-small-regular:8px; + --spectrum-table-row-top-to-text-medium-regular:11px; + --spectrum-table-row-top-to-text-large-regular:14px; + --spectrum-table-row-top-to-text-extra-large-regular:17px; + --spectrum-table-row-bottom-to-text-small-regular:9px; + --spectrum-table-row-bottom-to-text-medium-regular:12px; + --spectrum-table-row-bottom-to-text-large-regular:14px; + --spectrum-table-row-bottom-to-text-extra-large-regular:17px; + --spectrum-table-row-top-to-text-small-spacious:12px; + --spectrum-table-row-top-to-text-medium-spacious:15px; + --spectrum-table-row-top-to-text-large-spacious:18px; + --spectrum-table-row-top-to-text-extra-large-spacious:21px; + --spectrum-table-row-bottom-to-text-small-spacious:13px; + --spectrum-table-row-bottom-to-text-medium-spacious:16px; + --spectrum-table-row-bottom-to-text-large-spacious:18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; + --spectrum-table-edge-to-content:16px; + --spectrum-table-checkbox-to-text:24px; + --spectrum-table-header-row-checkbox-to-top-small:10px; + --spectrum-table-header-row-checkbox-to-top-medium:9px; + --spectrum-table-header-row-checkbox-to-top-large:12px; + --spectrum-table-header-row-checkbox-to-top-extra-large:15px; + --spectrum-table-row-checkbox-to-top-small-compact:6px; + --spectrum-table-row-checkbox-to-top-small-regular:10px; + --spectrum-table-row-checkbox-to-top-small-spacious:14px; + --spectrum-table-row-checkbox-to-top-medium-compact:9px; + --spectrum-table-row-checkbox-to-top-medium-regular:13px; + --spectrum-table-row-checkbox-to-top-medium-spacious:17px; + --spectrum-table-row-checkbox-to-top-large-compact:12px; + --spectrum-table-row-checkbox-to-top-large-regular:16px; + --spectrum-table-row-checkbox-to-top-large-spacious:20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:23px; + --spectrum-table-section-header-row-height-small:24px; + --spectrum-table-section-header-row-height-medium:32px; + --spectrum-table-section-header-row-height-large:40px; + --spectrum-table-section-header-row-height-extra-large:48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:10px; + --spectrum-tab-item-to-tab-item-horizontal-small:21px; + --spectrum-tab-item-to-tab-item-horizontal-medium:24px; + --spectrum-tab-item-to-tab-item-horizontal-large:27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:30px; + --spectrum-tab-item-to-tab-item-vertical-small:4px; + --spectrum-tab-item-to-tab-item-vertical-medium:4px; + --spectrum-tab-item-to-tab-item-vertical-large:5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:5px; + --spectrum-tab-item-start-to-edge-small:12px; + --spectrum-tab-item-start-to-edge-medium:12px; + --spectrum-tab-item-start-to-edge-large:13px; + --spectrum-tab-item-start-to-edge-extra-large:13px; + --spectrum-tab-item-top-to-text-small:11px; + --spectrum-tab-item-bottom-to-text-small:12px; + --spectrum-tab-item-top-to-text-medium:14px; + --spectrum-tab-item-bottom-to-text-medium:14px; + --spectrum-tab-item-top-to-text-large:16px; + --spectrum-tab-item-bottom-to-text-large:18px; + --spectrum-tab-item-top-to-text-extra-large:19px; + --spectrum-tab-item-bottom-to-text-extra-large:20px; + --spectrum-tab-item-top-to-text-compact-small:4px; + --spectrum-tab-item-bottom-to-text-compact-small:5px; + --spectrum-tab-item-top-to-text-compact-medium:6px; + --spectrum-tab-item-bottom-to-text-compact-medium:8px; + --spectrum-tab-item-top-to-text-compact-large:10px; + --spectrum-tab-item-bottom-to-text-compact-large:12px; + --spectrum-tab-item-top-to-text-compact-extra-large:12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:13px; + --spectrum-tab-item-top-to-workflow-icon-small:13px; + --spectrum-tab-item-top-to-workflow-icon-medium:15px; + --spectrum-tab-item-top-to-workflow-icon-large:17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:11px; + --spectrum-tab-item-focus-indicator-gap-small:7px; + --spectrum-tab-item-focus-indicator-gap-medium:8px; + --spectrum-tab-item-focus-indicator-gap-large:9px; + --spectrum-tab-item-focus-indicator-gap-extra-large:10px; + --spectrum-side-navigation-width:192px; + --spectrum-side-navigation-minimum-width:160px; + --spectrum-side-navigation-maximum-width:240px; + --spectrum-side-navigation-second-level-edge-to-text:24px; + --spectrum-side-navigation-third-level-edge-to-text:36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; + --spectrum-side-navigation-item-to-item:4px; + --spectrum-side-navigation-item-to-header:24px; + --spectrum-side-navigation-header-to-item:8px; + --spectrum-side-navigation-bottom-to-text:8px; + --spectrum-tray-top-to-content-area:4px; + --spectrum-text-to-visual-50:6px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:10px; + --spectrum-text-to-control-75:9px; + --spectrum-text-to-control-100:10px; + --spectrum-text-to-control-200:11px; + --spectrum-text-to-control-300:13px; + --spectrum-component-height-50:20px; + --spectrum-component-height-75:24px; + --spectrum-component-height-100:32px; + --spectrum-component-height-200:40px; + --spectrum-component-height-300:48px; + --spectrum-component-height-400:56px; + --spectrum-component-height-500:64px; + --spectrum-component-pill-edge-to-visual-75:10px; + --spectrum-component-pill-edge-to-visual-100:14px; + --spectrum-component-pill-edge-to-visual-200:18px; + --spectrum-component-pill-edge-to-visual-300:21px; + --spectrum-component-pill-edge-to-visual-only-75:4px; + --spectrum-component-pill-edge-to-visual-only-100:7px; + --spectrum-component-pill-edge-to-visual-only-200:10px; + --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-text-75:12px; + --spectrum-component-pill-edge-to-text-100:16px; + --spectrum-component-pill-edge-to-text-200:20px; + --spectrum-component-pill-edge-to-text-300:24px; + --spectrum-component-edge-to-visual-50:6px; + --spectrum-component-edge-to-visual-75:7px; + --spectrum-component-edge-to-visual-100:10px; + --spectrum-component-edge-to-visual-200:13px; + --spectrum-component-edge-to-visual-300:15px; + --spectrum-component-edge-to-visual-only-50:3px; + --spectrum-component-edge-to-visual-only-75:4px; + --spectrum-component-edge-to-visual-only-100:7px; + --spectrum-component-edge-to-visual-only-200:10px; + --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-text-50:8px; + --spectrum-component-edge-to-text-75:9px; + --spectrum-component-edge-to-text-100:12px; + --spectrum-component-edge-to-text-200:15px; + --spectrum-component-edge-to-text-300:18px; + --spectrum-component-top-to-workflow-icon-50:3px; + --spectrum-component-top-to-workflow-icon-75:4px; + --spectrum-component-top-to-workflow-icon-100:7px; + --spectrum-component-top-to-workflow-icon-200:10px; + --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-text-50:3px; + --spectrum-component-top-to-text-75:4px; + --spectrum-component-top-to-text-100:6px; + --spectrum-component-top-to-text-200:9px; + --spectrum-component-top-to-text-300:12px; + --spectrum-component-bottom-to-text-50:3px; + --spectrum-component-bottom-to-text-75:5px; + --spectrum-component-bottom-to-text-100:9px; + --spectrum-component-bottom-to-text-200:11px; + --spectrum-component-bottom-to-text-300:14px; + --spectrum-component-to-menu-small:6px; + --spectrum-component-to-menu-medium:6px; + --spectrum-component-to-menu-large:7px; + --spectrum-component-to-menu-extra-large:8px; + --spectrum-field-edge-to-disclosure-icon-75:7px; + --spectrum-field-edge-to-disclosure-icon-100:11px; + --spectrum-field-edge-to-disclosure-icon-200:14px; + --spectrum-field-edge-to-disclosure-icon-300:17px; + --spectrum-field-end-edge-to-disclosure-icon-75:7px; + --spectrum-field-end-edge-to-disclosure-icon-100:11px; + --spectrum-field-end-edge-to-disclosure-icon-200:14px; + --spectrum-field-end-edge-to-disclosure-icon-300:17px; + --spectrum-field-top-to-disclosure-icon-75:7px; + --spectrum-field-top-to-disclosure-icon-100:11px; + --spectrum-field-top-to-disclosure-icon-200:14px; + --spectrum-field-top-to-disclosure-icon-300:17px; + --spectrum-field-top-to-alert-icon-small:4px; + --spectrum-field-top-to-alert-icon-medium:7px; + --spectrum-field-top-to-alert-icon-large:10px; + --spectrum-field-top-to-alert-icon-extra-large:13px; + --spectrum-field-top-to-validation-icon-small:7px; + --spectrum-field-top-to-validation-icon-medium:11px; + --spectrum-field-top-to-validation-icon-large:14px; + --spectrum-field-top-to-validation-icon-extra-large:17px; + --spectrum-field-top-to-progress-circle-small:4px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:12px; + --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-edge-to-alert-icon-small:9px; + --spectrum-field-edge-to-alert-icon-medium:12px; + --spectrum-field-edge-to-alert-icon-large:15px; + --spectrum-field-edge-to-alert-icon-extra-large:18px; + --spectrum-field-edge-to-validation-icon-small:9px; + --spectrum-field-edge-to-validation-icon-medium:12px; + --spectrum-field-edge-to-validation-icon-large:15px; + --spectrum-field-edge-to-validation-icon-extra-large:18px; + --spectrum-field-text-to-alert-icon-small:8px; + --spectrum-field-text-to-alert-icon-medium:12px; + --spectrum-field-text-to-alert-icon-large:15px; + --spectrum-field-text-to-alert-icon-extra-large:18px; + --spectrum-field-text-to-validation-icon-small:8px; + --spectrum-field-text-to-validation-icon-medium:12px; + --spectrum-field-text-to-validation-icon-large:15px; + --spectrum-field-text-to-validation-icon-extra-large:18px; + --spectrum-field-width:192px; + --spectrum-character-count-to-field-quiet-small:-3px; + --spectrum-character-count-to-field-quiet-medium:-3px; + --spectrum-character-count-to-field-quiet-large:-3px; + --spectrum-character-count-to-field-quiet-extra-large:-4px; + --spectrum-side-label-character-count-to-field:12px; + --spectrum-side-label-character-count-top-margin-small:4px; + --spectrum-side-label-character-count-top-margin-medium:8px; + --spectrum-side-label-character-count-top-margin-large:11px; + --spectrum-side-label-character-count-top-margin-extra-large:14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-small:6px; + --spectrum-navigational-indicator-top-to-back-icon-medium:9px; + --spectrum-navigational-indicator-top-to-back-icon-large:12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; + --spectrum-color-control-track-width:24px; + --spectrum-font-size-50:11px; + --spectrum-font-size-75:12px; + --spectrum-font-size-100:14px; + --spectrum-font-size-200:16px; + --spectrum-font-size-300:18px; + --spectrum-font-size-400:20px; + --spectrum-font-size-500:22px; + --spectrum-font-size-600:25px; + --spectrum-font-size-700:28px; + --spectrum-font-size-800:32px; + --spectrum-font-size-900:36px; + --spectrum-font-size-1000:40px; + --spectrum-font-size-1100:45px; + --spectrum-font-size-1200:50px; + --spectrum-font-size-1300:60px; } diff --git a/tokens/dist/css/spectrum/custom-dark-vars.css b/tokens/dist/css/spectrum/custom-dark-vars.css index 5aff22ee524..a2905cb2552 100644 --- a/tokens/dist/css/spectrum/custom-dark-vars.css +++ b/tokens/dist/css/spectrum/custom-dark-vars.css @@ -1,103 +1,56 @@ -.spectrum--dark { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); +.spectrum--dark{ + --spectrum-menu-item-background-color-default-rgb:255, 255, 255; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-dropindicator-color:var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); } diff --git a/tokens/dist/css/spectrum/custom-darkest-vars.css b/tokens/dist/css/spectrum/custom-darkest-vars.css index 355cb77b593..5b01abbf22b 100644 --- a/tokens/dist/css/spectrum/custom-darkest-vars.css +++ b/tokens/dist/css/spectrum/custom-darkest-vars.css @@ -1,104 +1,56 @@ -.spectrum--darkest { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); +.spectrum--darkest{ + --spectrum-menu-item-background-color-default-rgb:255, 255, 255; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-dropindicator-color:var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); } diff --git a/tokens/dist/css/spectrum/custom-large-vars.css b/tokens/dist/css/spectrum/custom-large-vars.css index 643a4c28f9d..d96637f85e0 100644 --- a/tokens/dist/css/spectrum/custom-large-vars.css +++ b/tokens/dist/css/spectrum/custom-large-vars.css @@ -1,111 +1,109 @@ -.spectrum--large { +.spectrum--large{ /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 5px; - --spectrum-edge-to-visual-only-100: 9px; - --spectrum-edge-to-visual-only-200: 13px; - --spectrum-edge-to-visual-only-300: 16px; - - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - - --spectrum-icon-chevron-size-50: 8px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; + --spectrum-edge-to-visual-only-75:5px; + --spectrum-edge-to-visual-only-100:9px; + --spectrum-edge-to-visual-only-200:13px; + --spectrum-edge-to-visual-only-300:16px; + + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + + --spectrum-well-padding:20px; + --spectrum-well-margin-top:5px; + --spectrum-well-min-width:300px; + --spectrum-well-border-radius:5px; + + --spectrum-icon-chevron-size-50:8px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; } diff --git a/tokens/dist/css/spectrum/custom-light-vars.css b/tokens/dist/css/spectrum/custom-light-vars.css index 1331975248c..08e893a0eb8 100644 --- a/tokens/dist/css/spectrum/custom-light-vars.css +++ b/tokens/dist/css/spectrum/custom-light-vars.css @@ -1,104 +1,57 @@ .spectrum--light, -.spectrum--lightest { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); +.spectrum--lightest{ + --spectrum-menu-item-background-color-default-rgb:0, 0, 0; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-800-rgb - ); /* var(--spectrum-accent-color-800);*/ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/ /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-800); + --spectrum-dropindicator-color:var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); + --spectrum-well-border-color:var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb),0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb),0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); } diff --git a/tokens/dist/css/spectrum/custom-medium-vars.css b/tokens/dist/css/spectrum/custom-medium-vars.css index e1f411b8c71..9d688173b06 100644 --- a/tokens/dist/css/spectrum/custom-medium-vars.css +++ b/tokens/dist/css/spectrum/custom-medium-vars.css @@ -1,110 +1,108 @@ -.spectrum--medium { +.spectrum--medium{ /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 4px; - --spectrum-edge-to-visual-only-100: 7px; - --spectrum-edge-to-visual-only-200: 10px; - --spectrum-edge-to-visual-only-300: 13px; - - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-icon-chevron-size-50: 6px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + --spectrum-edge-to-visual-only-75:4px; + --spectrum-edge-to-visual-only-100:7px; + --spectrum-edge-to-visual-only-200:10px; + --spectrum-edge-to-visual-only-300:13px; + + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-well-padding:var(--spectrum-spacing-300); + --spectrum-well-margin-top:var(--spectrum-spacing-75); + --spectrum-well-min-width:240px; + --spectrum-well-border-radius:var(--spectrum-spacing-75); + + --spectrum-icon-chevron-size-50:6px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); } diff --git a/tokens/dist/css/spectrum/custom-vars.css b/tokens/dist/css/spectrum/custom-vars.css index 3d6abc33896..ee28dfa0c36 100644 --- a/tokens/dist/css/spectrum/custom-vars.css +++ b/tokens/dist/css/spectrum/custom-vars.css @@ -1,48 +1,40 @@ -.spectrum { - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); +.spectrum{ + --system:spectrum; + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(.45, 0, .40, 1); + --spectrum-animation-ease-in:cubic-bezier(.50, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.40, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, - BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", - "Lucida Grande", sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); - --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-code-font-family-stack:'Source Code Pro', Monaco, monospace; + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 206, 247, 243; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:206, 247, 243; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); } diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css index 7d1870746e0..8ee3a6d3c72 100644 --- a/tokens/dist/css/spectrum/global-vars.css +++ b/tokens/dist/css/spectrum/global-vars.css @@ -1,55 +1,39 @@ -.spectrum { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-border-width-100: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); +.spectrum{ + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800); + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; + --spectrum-picker-border-width:var(--spectrum-border-width-100); + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-border-width-100:1px; + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --spectrum-accent-color-1200:var(--spectrum-blue-1200); + --spectrum-accent-color-1300:var(--spectrum-blue-1300); + --spectrum-accent-color-1400:var(--spectrum-blue-1400); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); } diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css index 07568bb1dff..e91e881d55f 100644 --- a/tokens/dist/css/spectrum/large-vars.css +++ b/tokens/dist/css/spectrum/large-vars.css @@ -1,52 +1,52 @@ -.spectrum--large { - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-corner-radius-75: 2px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; +.spectrum--large{ + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:16px; + --spectrum-switch-control-height-medium:18px; + --spectrum-switch-control-height-large:20px; + --spectrum-switch-control-height-extra-large:22px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:5px; + --spectrum-corner-radius-200:10px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; } diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css index e15bfa6b728..7ded4d2e7da 100644 --- a/tokens/dist/css/spectrum/medium-vars.css +++ b/tokens/dist/css/spectrum/medium-vars.css @@ -1,52 +1,52 @@ -.spectrum--medium { - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-corner-radius-75: 2px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; +.spectrum--medium{ + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:23px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:29px; + --spectrum-switch-control-width-extra-large:33px; + --spectrum-switch-control-height-small:12px; + --spectrum-switch-control-height-medium:14px; + --spectrum-switch-control-height-large:16px; + --spectrum-switch-control-height-extra-large:18px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:8px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; } diff --git a/tokens/dist/index.css b/tokens/dist/index.css index 90af3f5974c..a1ab93483d6 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -1,4326 +1,3675 @@ -.spectrum--dark { - --spectrum-overlay-opacity: 0.5; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.5; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-50); - --spectrum-background-layer-1-color: var(--spectrum-gray-75); - --spectrum-background-layer-2-color: var(--spectrum-gray-100); - --spectrum-neutral-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-500); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-300); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-400 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-300 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-400 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-400 - ); - --spectrum-negative-background-color-down: var(--spectrum-negative-color-300); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-400 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-400 - ); - --spectrum-positive-background-color-down: var(--spectrum-positive-color-300); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-400 - ); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-800); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-800); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-50-rgb: 29, 29, 29; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 38, 38, 38; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 50, 50, 50; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 63, 63, 63; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 84, 84, 84; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 112, 112, 112; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 144, 144, 144; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 178, 178, 178; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 209, 209, 209; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 235, 235, 235; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 255, 255, 255; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 0, 56, 119; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 0, 65, 138; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 0, 77, 163; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 0, 89, 194; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 3, 103, 224; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 19, 121, 243; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 143, 244; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 84, 163, 246; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 114, 183, 249; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 143, 202, 252; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 174, 219, 254; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 204, 233, 255; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 232, 246, 255; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 255, 255, 255; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 123, 0, 0; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 141, 0, 0; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 165, 0, 0; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 190, 4, 3; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 215, 25, 19; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 234, 56, 41; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 246, 88, 67; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 255, 117, 94; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 255, 149, 129; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 176, 161; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 201, 189; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 222, 216; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 241, 238; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 255, 255; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 102, 37, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 117, 45, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 137, 55, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 158, 66, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 180, 78, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 202, 93, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 225, 109, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 244, 129, 12; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 254, 154, 46; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 255, 181, 88; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 253, 206, 136; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 225, 179; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 242, 221; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 253, 249; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 76, 54, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 88, 64, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 103, 76, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 119, 89, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 136, 104, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 155, 120, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 174, 137, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 192, 156, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 211, 174, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 228, 194, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 244, 213, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 249, 232, 92; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 252, 246, 187; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 255, 255; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 48, 64, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 55, 74, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 65, 87, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 76, 102, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 89, 118, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 102, 136, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 117, 154, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 132, 173, 1; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 148, 192, 8; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 166, 211, 18; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 184, 229, 37; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 205, 245, 71; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 231, 254, 154; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 255, 255, 255; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 0, 69, 10; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 0, 80, 12; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 0, 94, 14; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 0, 109, 15; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 0, 127, 15; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 0, 145, 18; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 4, 165, 30; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 34, 184, 51; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 68, 202, 73; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 105, 220, 99; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 142, 235, 127; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 180, 247, 162; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 221, 253, 211; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 255, 255, 255; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 4, 67, 41; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 78, 47; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 92, 56; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 108, 67; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 0, 125, 78; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 0, 143, 93; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 18, 162, 108; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 43, 180, 125; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 67, 199, 143; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 94, 217, 162; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 129, 233, 184; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 177, 244, 209; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 223, 250, 234; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 254, 255, 252; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 18, 65, 63; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 14, 76, 73; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 4, 90, 87; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 105, 101; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 0, 122, 117; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 0, 140, 135; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 158, 152; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 3, 178, 171; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 54, 197, 189; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 93, 214, 207; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 132, 230, 223; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 176, 242, 236; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 223, 249, 246; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 254, 255, 254; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 0, 61, 98; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 71, 111; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 85, 127; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 100, 145; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 116, 162; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 0, 134, 180; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 0, 153, 198; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 14, 173, 215; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 44, 193, 230; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 84, 211, 241; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 127, 228, 249; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 167, 241, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 215, 250, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 255, 255, 255; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 40, 44, 140; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 47, 52, 163; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 57, 63, 187; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 70, 75, 211; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 85, 91, 231; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 104, 109, 244; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 124, 129, 251; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 145, 149, 255; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 167, 170, 255; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 188, 190, 255; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 208, 210, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 226, 228, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 243, 243, 254; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 255, 255, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 76, 13, 157; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 89, 17, 177; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 105, 28, 200; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 122, 45, 218; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 140, 65, 233; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 157, 87, 243; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 172, 111, 249; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 187, 135, 251; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 202, 159, 252; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 215, 182, 254; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 228, 204, 254; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 239, 223, 255; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 249, 240, 255; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 255, 253, 255; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 107, 3, 106; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 123, 0, 123; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 144, 0, 145; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 165, 13, 166; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 185, 37, 185; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 205, 57, 206; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 81, 224; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 235, 110, 236; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 244, 140, 242; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 250, 168, 245; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 254, 194, 248; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 255, 219, 250; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 255, 239, 252; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 255, 253, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 118, 0, 58; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 137, 0, 66; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 160, 0, 77; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 182, 18, 90; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 203, 38, 109; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 222, 61, 130; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 237, 87, 149; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 249, 114, 167; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 143, 185; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 172, 202; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 198, 218; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 221, 233; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 240, 245; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 252, 253; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); +.spectrum--dark{ + --spectrum-overlay-opacity:0.5; + --spectrum-drop-shadow-color-rgb:0, 0, 0; + --spectrum-drop-shadow-color-opacity:0.5; + --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); + --spectrum-background-base-color:var(--spectrum-gray-50); + --spectrum-background-layer-1-color:var(--spectrum-gray-75); + --spectrum-background-layer-2-color:var(--spectrum-gray-100); + --spectrum-neutral-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-500); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-400); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-300); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-400); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-500); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-400); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-300); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-400); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-500); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-400); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-300); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-400); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-500); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-400); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-300); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-400); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-700); + --spectrum-orange-background-color-default:var(--spectrum-orange-800); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); + --spectrum-celery-background-color-default:var(--spectrum-celery-800); + --spectrum-green-background-color-default:var(--spectrum-green-700); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); + --spectrum-blue-background-color-default:var(--spectrum-blue-700); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); + --spectrum-purple-background-color-default:var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); + --spectrum-neutral-visual-color:var(--spectrum-gray-600); + --spectrum-accent-visual-color:var(--spectrum-accent-color-900); + --spectrum-informative-visual-color:var(--spectrum-informative-color-900); + --spectrum-negative-visual-color:var(--spectrum-negative-color-700); + --spectrum-notice-visual-color:var(--spectrum-notice-color-900); + --spectrum-positive-visual-color:var(--spectrum-positive-color-800); + --spectrum-gray-visual-color:var(--spectrum-gray-600); + --spectrum-red-visual-color:var(--spectrum-red-700); + --spectrum-orange-visual-color:var(--spectrum-orange-900); + --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color:var(--spectrum-celery-800); + --spectrum-green-visual-color:var(--spectrum-green-800); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color:var(--spectrum-cyan-900); + --spectrum-blue-visual-color:var(--spectrum-blue-900); + --spectrum-indigo-visual-color:var(--spectrum-indigo-900); + --spectrum-purple-visual-color:var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); + --spectrum-gray-50-rgb:29, 29, 29; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:38, 38, 38; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:50, 50, 50; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:63, 63, 63; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:84, 84, 84; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:112, 112, 112; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:178, 178, 178; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:209, 209, 209; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:0, 56, 119; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:0, 65, 138; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:0, 77, 163; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:0, 89, 194; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:3, 103, 224; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:19, 121, 243; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:52, 143, 244; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:84, 163, 246; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:114, 183, 249; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:143, 202, 252; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:174, 219, 254; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:204, 233, 255; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:232, 246, 255; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:255, 255, 255; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:123, 0, 0; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:141, 0, 0; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:165, 0, 0; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:190, 4, 3; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:215, 25, 19; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:234, 56, 41; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:246, 88, 67; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:255, 117, 94; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:255, 149, 129; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:255, 176, 161; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:255, 201, 189; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:255, 222, 216; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:255, 241, 238; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:255, 255, 255; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:102, 37, 0; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:117, 45, 0; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:137, 55, 0; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:158, 66, 0; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:180, 78, 0; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:202, 93, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:225, 109, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:244, 129, 12; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:254, 154, 46; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:255, 181, 88; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:253, 206, 136; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:255, 225, 179; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:255, 242, 221; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:255, 253, 249; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:76, 54, 0; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:88, 64, 0; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:103, 76, 0; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:119, 89, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:136, 104, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:155, 120, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:174, 137, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:192, 156, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:211, 174, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:228, 194, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:244, 213, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:249, 232, 92; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:252, 246, 187; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:255, 255, 255; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:48, 64, 0; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:55, 74, 0; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:65, 87, 0; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:76, 102, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:89, 118, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:102, 136, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:117, 154, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:132, 173, 1; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:148, 192, 8; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:166, 211, 18; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:184, 229, 37; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:205, 245, 71; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:231, 254, 154; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:255, 255, 255; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:0, 69, 10; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:0, 80, 12; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:0, 94, 14; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:0, 109, 15; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:0, 127, 15; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:0, 145, 18; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:4, 165, 30; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:34, 184, 51; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:68, 202, 73; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:105, 220, 99; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:142, 235, 127; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:180, 247, 162; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:221, 253, 211; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:255, 255, 255; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:4, 67, 41; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:0, 78, 47; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:0, 92, 56; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:0, 108, 67; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:0, 125, 78; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:0, 143, 93; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:18, 162, 108; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:43, 180, 125; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:67, 199, 143; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:94, 217, 162; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:129, 233, 184; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:177, 244, 209; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:223, 250, 234; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:254, 255, 252; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:18, 65, 63; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:14, 76, 73; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:4, 90, 87; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:0, 105, 101; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:0, 122, 117; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:0, 140, 135; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 158, 152; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:3, 178, 171; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:54, 197, 189; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:93, 214, 207; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:132, 230, 223; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:176, 242, 236; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:223, 249, 246; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:254, 255, 254; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:0, 61, 98; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:0, 71, 111; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:0, 85, 127; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:0, 100, 145; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:0, 116, 162; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:0, 134, 180; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:0, 153, 198; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:14, 173, 215; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:44, 193, 230; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:84, 211, 241; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:127, 228, 249; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:167, 241, 255; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:215, 250, 255; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:255, 255, 255; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:40, 44, 140; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:47, 52, 163; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:57, 63, 187; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:70, 75, 211; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:85, 91, 231; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:104, 109, 244; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:124, 129, 251; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:145, 149, 255; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:167, 170, 255; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:188, 190, 255; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:208, 210, 255; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:226, 228, 255; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:243, 243, 254; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:255, 255, 255; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:76, 13, 157; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:89, 17, 177; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:105, 28, 200; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:122, 45, 218; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:140, 65, 233; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:157, 87, 243; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:172, 111, 249; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:187, 135, 251; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:202, 159, 252; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:215, 182, 254; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:228, 204, 254; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:239, 223, 255; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:249, 240, 255; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:255, 253, 255; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:107, 3, 106; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:123, 0, 123; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:144, 0, 145; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:165, 13, 166; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:185, 37, 185; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:205, 57, 206; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:223, 81, 224; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:235, 110, 236; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:244, 140, 242; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:250, 168, 245; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:254, 194, 248; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:255, 219, 250; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:255, 239, 252; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:255, 253, 255; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:118, 0, 58; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:137, 0, 66; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:160, 0, 77; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:182, 18, 90; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:203, 38, 109; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:222, 61, 130; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:237, 87, 149; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:249, 114, 167; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:255, 143, 185; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:255, 172, 202; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:255, 198, 218; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:255, 221, 233; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:255, 240, 245; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:255, 252, 253; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); + --spectrum-menu-item-background-color-default-rgb:255, 255, 255; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-dropindicator-color:var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); } -.spectrum--darkest { - --spectrum-overlay-opacity: 0.6; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.8; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-50); - --spectrum-background-layer-1-color: var(--spectrum-gray-75); - --spectrum-background-layer-2-color: var(--spectrum-gray-100); - --spectrum-neutral-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-500 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-500 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-down: var(--spectrum-negative-color-400); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-500 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-down: var(--spectrum-positive-color-400); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-500 - ); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-800); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-800); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-50-rgb: 0, 0, 0; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 14, 14, 14; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 29, 29, 29; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 48, 48, 48; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 75, 75, 75; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 106, 106, 106; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 141, 141, 141; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 176, 176, 176; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 208, 208, 208; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 235, 235, 235; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 255, 255, 255; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 0, 38, 81; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 0, 50, 106; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 0, 64, 135; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 0, 78, 166; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 0, 92, 200; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 6, 108, 231; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 29, 128, 245; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 64, 150, 243; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 94, 170, 247; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 124, 189, 250; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 152, 206, 253; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 179, 222, 254; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 206, 234, 255; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 227, 243, 255; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 87, 0, 0; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 110, 0, 0; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 138, 0, 0; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 167, 0, 0; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 196, 7, 6; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 221, 33, 24; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 238, 67, 49; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 249, 99, 76; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 255, 129, 107; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 158, 140; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 183, 169; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 205, 195; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 223, 217; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 237, 234; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 72, 24, 1; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 92, 32, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 115, 43, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 138, 55, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 162, 68, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 186, 82, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 210, 98, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 232, 116, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 249, 137, 23; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 255, 162, 59; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 188, 102; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 253, 210, 145; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 226, 181; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 239, 213; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 53, 36, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 68, 47, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 86, 62, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 103, 77, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 122, 92, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 141, 108, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 161, 126, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 180, 144, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 199, 162, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 216, 181, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 233, 199, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 247, 216, 4; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 233, 97; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 252, 243, 170; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 32, 43, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 42, 56, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 54, 72, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 66, 88, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 79, 105, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 93, 123, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 107, 142, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 122, 161, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 138, 180, 3; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 154, 198, 11; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 170, 216, 22; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 187, 232, 41; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 205, 246, 72; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 225, 253, 132; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 0, 47, 7; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 0, 61, 9; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 0, 77, 12; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 0, 95, 15; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 0, 113, 15; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 0, 132, 15; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 0, 151, 20; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 13, 171, 37; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 45, 191, 58; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 80, 208, 82; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 115, 224, 107; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 147, 237, 131; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 180, 247, 162; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 213, 252, 202; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 10, 44, 28; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 7, 59, 36; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 76, 46; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 93, 57; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 0, 111, 69; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 0, 130, 82; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 0, 149, 98; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 28, 168, 114; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 52, 187, 132; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 75, 205, 149; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 103, 222, 168; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 137, 236, 188; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 177, 244, 209; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 214, 249, 228; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 18, 43, 42; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 19, 57, 55; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 16, 73, 70; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 3, 91, 88; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 0, 108, 104; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 0, 127, 121; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 146, 140; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 0, 165, 159; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 26, 185, 178; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 66, 202, 195; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 102, 218, 211; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 139, 232, 225; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 179, 242, 237; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 215, 248, 244; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 0, 41, 68; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 54, 88; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 69, 108; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 86, 128; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 103, 147; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 0, 121, 167; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 0, 140, 186; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 4, 160, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 23, 180, 221; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 57, 199, 234; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 96, 216, 243; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 134, 230, 250; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 170, 242, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 206, 249, 255; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 26, 29, 97; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 39, 125; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 46, 50, 158; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 58, 63, 189; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 73, 78, 216; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 90, 96, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 110, 115, 246; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 132, 136, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 153, 157, 255; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 174, 177, 255; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 194, 196, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 212, 213, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 227, 228, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 240, 240, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 50, 16, 104; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 67, 13, 140; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 86, 16, 173; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 106, 29, 200; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 126, 49, 222; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 145, 70, 236; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 162, 94, 246; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 178, 119, 250; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 192, 143, 252; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 206, 166, 253; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 219, 188, 254; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 230, 207, 255; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 240, 224, 255; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 248, 237, 255; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 70, 14, 68; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 93, 9, 92; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 120, 0, 120; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 146, 0, 147; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 169, 19, 170; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 191, 43, 191; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 211, 65, 213; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 228, 91, 229; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 239, 120, 238; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 246, 149, 243; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 251, 175, 246; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 254, 199, 248; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 255, 220, 250; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 255, 235, 252; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 83, 3, 41; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 106, 0, 52; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 133, 0, 65; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 161, 0, 78; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 186, 22, 93; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 209, 43, 114; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 227, 69, 137; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 241, 97, 156; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 252, 124, 173; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 152, 191; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 179, 207; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 202, 221; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 221, 233; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 236, 243; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); +.spectrum--darkest{ + --spectrum-overlay-opacity:0.6; + --spectrum-drop-shadow-color-rgb:0, 0, 0; + --spectrum-drop-shadow-color-opacity:0.8; + --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); + --spectrum-background-base-color:var(--spectrum-gray-50); + --spectrum-background-layer-1-color:var(--spectrum-gray-75); + --spectrum-background-layer-2-color:var(--spectrum-gray-100); + --spectrum-neutral-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-400); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-400); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-400); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-400); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-700); + --spectrum-orange-background-color-default:var(--spectrum-orange-800); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); + --spectrum-celery-background-color-default:var(--spectrum-celery-800); + --spectrum-green-background-color-default:var(--spectrum-green-700); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); + --spectrum-blue-background-color-default:var(--spectrum-blue-700); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); + --spectrum-purple-background-color-default:var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); + --spectrum-neutral-visual-color:var(--spectrum-gray-600); + --spectrum-accent-visual-color:var(--spectrum-accent-color-900); + --spectrum-informative-visual-color:var(--spectrum-informative-color-900); + --spectrum-negative-visual-color:var(--spectrum-negative-color-700); + --spectrum-notice-visual-color:var(--spectrum-notice-color-900); + --spectrum-positive-visual-color:var(--spectrum-positive-color-800); + --spectrum-gray-visual-color:var(--spectrum-gray-600); + --spectrum-red-visual-color:var(--spectrum-red-700); + --spectrum-orange-visual-color:var(--spectrum-orange-900); + --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color:var(--spectrum-celery-800); + --spectrum-green-visual-color:var(--spectrum-green-800); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color:var(--spectrum-cyan-900); + --spectrum-blue-visual-color:var(--spectrum-blue-900); + --spectrum-indigo-visual-color:var(--spectrum-indigo-900); + --spectrum-purple-visual-color:var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); + --spectrum-gray-50-rgb:0, 0, 0; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:14, 14, 14; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:29, 29, 29; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:48, 48, 48; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:75, 75, 75; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:106, 106, 106; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:141, 141, 141; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:176, 176, 176; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:208, 208, 208; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:0, 38, 81; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:0, 50, 106; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:0, 64, 135; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:0, 78, 166; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:0, 92, 200; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:6, 108, 231; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:29, 128, 245; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:64, 150, 243; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:94, 170, 247; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:124, 189, 250; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:152, 206, 253; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:179, 222, 254; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:206, 234, 255; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:227, 243, 255; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:87, 0, 0; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:110, 0, 0; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:138, 0, 0; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:167, 0, 0; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:196, 7, 6; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:221, 33, 24; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:238, 67, 49; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:249, 99, 76; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:255, 129, 107; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:255, 158, 140; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:255, 183, 169; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:255, 205, 195; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:255, 223, 217; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:255, 237, 234; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:72, 24, 1; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:92, 32, 0; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:115, 43, 0; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:138, 55, 0; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:162, 68, 0; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:186, 82, 0; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:210, 98, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:232, 116, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:249, 137, 23; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:255, 162, 59; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:255, 188, 102; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:253, 210, 145; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:255, 226, 181; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:255, 239, 213; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:53, 36, 0; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:68, 47, 0; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:86, 62, 0; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:103, 77, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:122, 92, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:141, 108, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:161, 126, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:180, 144, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:199, 162, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:216, 181, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:233, 199, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:247, 216, 4; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:249, 233, 97; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:252, 243, 170; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:32, 43, 0; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:42, 56, 0; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:54, 72, 0; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:66, 88, 0; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:79, 105, 0; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:93, 123, 0; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:107, 142, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:122, 161, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:138, 180, 3; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:154, 198, 11; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:170, 216, 22; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:187, 232, 41; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:205, 246, 72; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:225, 253, 132; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:0, 47, 7; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:0, 61, 9; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:0, 77, 12; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:0, 95, 15; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:0, 113, 15; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:0, 132, 15; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:0, 151, 20; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:13, 171, 37; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:45, 191, 58; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:80, 208, 82; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:115, 224, 107; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:147, 237, 131; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:180, 247, 162; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:213, 252, 202; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:10, 44, 28; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:7, 59, 36; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:0, 76, 46; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:0, 93, 57; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:0, 111, 69; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:0, 130, 82; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:0, 149, 98; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:28, 168, 114; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:52, 187, 132; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:75, 205, 149; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:103, 222, 168; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:137, 236, 188; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:177, 244, 209; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:214, 249, 228; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:18, 43, 42; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:19, 57, 55; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:16, 73, 70; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:3, 91, 88; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:0, 108, 104; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:0, 127, 121; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 146, 140; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:0, 165, 159; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:26, 185, 178; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:66, 202, 195; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:102, 218, 211; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:139, 232, 225; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:179, 242, 237; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:215, 248, 244; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:0, 41, 68; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:0, 54, 88; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:0, 69, 108; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:0, 86, 128; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:0, 103, 147; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:0, 121, 167; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:0, 140, 186; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:4, 160, 205; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:23, 180, 221; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:57, 199, 234; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:96, 216, 243; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:134, 230, 250; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:170, 242, 255; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:206, 249, 255; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:26, 29, 97; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:35, 39, 125; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:46, 50, 158; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:58, 63, 189; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:73, 78, 216; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:90, 96, 235; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:110, 115, 246; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:132, 136, 253; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:153, 157, 255; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:174, 177, 255; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:194, 196, 255; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:212, 213, 255; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:227, 228, 255; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:240, 240, 255; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:50, 16, 104; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:67, 13, 140; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:86, 16, 173; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:106, 29, 200; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:126, 49, 222; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:145, 70, 236; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:162, 94, 246; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:178, 119, 250; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:192, 143, 252; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:206, 166, 253; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:219, 188, 254; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:230, 207, 255; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:240, 224, 255; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:248, 237, 255; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:70, 14, 68; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:93, 9, 92; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:120, 0, 120; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:146, 0, 147; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:169, 19, 170; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:191, 43, 191; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:211, 65, 213; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:228, 91, 229; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:239, 120, 238; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:246, 149, 243; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:251, 175, 246; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:254, 199, 248; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:255, 220, 250; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:255, 235, 252; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:83, 3, 41; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:106, 0, 52; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:133, 0, 65; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:161, 0, 78; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:186, 22, 93; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:209, 43, 114; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:227, 69, 137; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:241, 97, 156; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:252, 124, 173; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:255, 152, 191; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:255, 179, 207; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:255, 202, 221; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:255, 221, 233; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:255, 236, 243; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); + --spectrum-menu-item-background-color-default-rgb:255, 255, 255; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-dropindicator-color:var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); } -.spectrum { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-opacity-disabled: 0.3; - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-200 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-200 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100); - --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); - --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-500 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-500 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.1; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.25; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.4; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.55; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.7; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.8; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.9; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb) - ); - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.1; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.25; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.4; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.55; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.7; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.8; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.9; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: 4px; - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size); - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); - --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, - BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", - "Lucida Grande", sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); +.spectrum{ + --spectrum-focus-indicator-color:var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color:var(--spectrum-white); + --spectrum-static-black-focus-indicator-color:var(--spectrum-black); + --spectrum-overlay-color:var(--spectrum-black); + --spectrum-opacity-disabled:0.3; + --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); + --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); + --spectrum-disabled-background-color:var(--spectrum-gray-200); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200); + --spectrum-background-opacity-default:0; + --spectrum-background-opacity-hover:0.1; + --spectrum-background-opacity-down:0.1; + --spectrum-background-opacity-key-focus:0.1; + --spectrum-neutral-content-color-default:var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-focus:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); + --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-disabled-content-color:var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500); + --spectrum-disabled-border-color:var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); + --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); + --spectrum-negative-border-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); + --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-swatch-border-color:var(--spectrum-gray-900); + --spectrum-swatch-border-opacity:0.51; + --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity:0.51; + --spectrum-thumbnail-border-color:var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity:0.1; + --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); + --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color:var(--spectrum-gray-900); + --spectrum-color-area-border-opacity:0.1; + --spectrum-color-slider-border-color:var(--spectrum-gray-900); + --spectrum-color-slider-border-opacity:0.1; + --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border:var(--spectrum-white); + --spectrum-card-selection-background-color:var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity:0.95; + --spectrum-drop-zone-background-color:var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity:0.1; + --spectrum-drop-zone-background-color-opacity-filled:0.3; + --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color:var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity:0.42; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); + --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-floating-action-button-shadow-color:var(--spectrum-floating-action-button-drop-shadow-color); + --spectrum-table-row-hover-color:var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity:0.07; + --spectrum-table-selected-row-background-color:var(--spectrum-informative-background-color-default); + --spectrum-table-selected-row-background-opacity:0.1; + --spectrum-table-selected-row-background-color-non-emphasized:var(--spectrum-neutral-background-color-selected-default); + --spectrum-table-selected-row-background-opacity-non-emphasized:0.1; + --spectrum-table-row-down-opacity:0.1; + --spectrum-table-selected-row-background-opacity-hover:0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; + --spectrum-white-rgb:255, 255, 255; + --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-100-rgb:255, 255, 255; + --spectrum-transparent-white-100-opacity:0; + --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); + --spectrum-transparent-white-200-rgb:255, 255, 255; + --spectrum-transparent-white-200-opacity:0.1; + --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); + --spectrum-transparent-white-300-rgb:255, 255, 255; + --spectrum-transparent-white-300-opacity:0.25; + --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); + --spectrum-transparent-white-400-rgb:255, 255, 255; + --spectrum-transparent-white-400-opacity:0.4; + --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); + --spectrum-transparent-white-500-rgb:255, 255, 255; + --spectrum-transparent-white-500-opacity:0.55; + --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); + --spectrum-transparent-white-600-rgb:255, 255, 255; + --spectrum-transparent-white-600-opacity:0.7; + --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); + --spectrum-transparent-white-700-rgb:255, 255, 255; + --spectrum-transparent-white-700-opacity:0.8; + --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); + --spectrum-transparent-white-800-rgb:255, 255, 255; + --spectrum-transparent-white-800-opacity:0.9; + --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); + --spectrum-transparent-white-900-rgb:255, 255, 255; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb)); + --spectrum-black-rgb:0, 0, 0; + --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-100-rgb:0, 0, 0; + --spectrum-transparent-black-100-opacity:0; + --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); + --spectrum-transparent-black-200-rgb:0, 0, 0; + --spectrum-transparent-black-200-opacity:0.1; + --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-transparent-black-300-rgb:0, 0, 0; + --spectrum-transparent-black-300-opacity:0.25; + --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); + --spectrum-transparent-black-400-rgb:0, 0, 0; + --spectrum-transparent-black-400-opacity:0.4; + --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); + --spectrum-transparent-black-500-rgb:0, 0, 0; + --spectrum-transparent-black-500-opacity:0.55; + --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); + --spectrum-transparent-black-600-rgb:0, 0, 0; + --spectrum-transparent-black-600-opacity:0.7; + --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); + --spectrum-transparent-black-700-rgb:0, 0, 0; + --spectrum-transparent-black-700-opacity:0.8; + --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); + --spectrum-transparent-black-800-rgb:0, 0, 0; + --spectrum-transparent-black-800-opacity:0.9; + --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); + --spectrum-transparent-black-900-rgb:0, 0, 0; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb)); + --spectrum-icon-color-inverse:var(--spectrum-gray-50); + --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); + --spectrum-radio-button-selection-indicator:4px; + --spectrum-field-label-to-component:0px; + --spectrum-help-text-to-component:0px; + --spectrum-button-minimum-width-multiplier:2.25; + --spectrum-divider-thickness-small:1px; + --spectrum-divider-thickness-medium:2px; + --spectrum-divider-thickness-large:4px; + --spectrum-swatch-rectangle-width-multiplier:2; + --spectrum-swatch-slash-thickness-extra-small:2px; + --spectrum-swatch-slash-thickness-small:3px; + --spectrum-swatch-slash-thickness-medium:4px; + --spectrum-swatch-slash-thickness-large:5px; + --spectrum-progress-bar-minimum-width:48px; + --spectrum-progress-bar-maximum-width:768px; + --spectrum-meter-minimum-width:48px; + --spectrum-meter-maximum-width:768px; + --spectrum-meter-default-width:var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width:240px; + --spectrum-popover-tip-width:16px; + --spectrum-popover-tip-height:8px; + --spectrum-menu-item-label-to-description:1px; + --spectrum-menu-item-section-divider-height:8px; + --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); + --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; + --spectrum-text-field-minimum-width-multiplier:1.5; + --spectrum-combo-box-minimum-width-multiplier:2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier:2; + --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-alert-dialog-minimum-width:288px; + --spectrum-alert-dialog-maximum-width:480px; + --spectrum-contextual-help-minimum-width:268px; + --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text:0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon:0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu:0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text:0px; + --spectrum-alert-banner-to-top-workflow-icon:var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); + --spectrum-color-area-border-width:var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100); + --spectrum-color-wheel-color-area-margin:12px; + --spectrum-color-slider-border-width:1px; + --spectrum-color-slider-border-rounding:4px; + --spectrum-floating-action-button-drop-shadow-blur:12px; + --spectrum-floating-action-button-drop-shadow-y:4px; + --spectrum-illustrated-message-maximum-width:380px; + --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-color-loupe-height:64px; + --spectrum-color-loupe-width:48px; + --spectrum-color-loupe-bottom-to-color-handle:12px; + --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width:1px; + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; + --spectrum-card-minimum-width:100px; + --spectrum-card-preview-minimum-height:130px; + --spectrum-card-selection-background-size:40px; + --spectrum-drop-zone-width:428px; + --spectrum-drop-zone-content-maximum-width:var(--spectrum-illustrated-message-maximum-width); + --spectrum-drop-zone-border-dash-length:8px; + --spectrum-drop-zone-border-dash-gap:4px; + --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); + --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); + --spectrum-color-handle-border-width:var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width:1px; + --spectrum-color-handle-outer-border-width:1px; + --spectrum-color-handle-drop-shadow-x:0; + --spectrum-color-handle-drop-shadow-y:0; + --spectrum-color-handle-drop-shadow-blur:0; + --spectrum-table-row-height-small-compact:var(--spectrum-component-height-75); + --spectrum-table-row-height-medium-compact:var(--spectrum-component-height-100); + --spectrum-table-row-height-large-compact:var(--spectrum-component-height-200); + --spectrum-table-row-height-extra-large-compact:var(--spectrum-component-height-300); + --spectrum-table-row-top-to-text-small-compact:var(--spectrum-component-top-to-text-75); + --spectrum-table-row-top-to-text-medium-compact:var(--spectrum-component-top-to-text-100); + --spectrum-table-row-top-to-text-large-compact:var(--spectrum-component-top-to-text-200); + --spectrum-table-row-top-to-text-extra-large-compact:var(--spectrum-component-top-to-text-300); + --spectrum-table-row-bottom-to-text-small-compact:var(--spectrum-component-bottom-to-text-75); + --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); + --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); + --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); + --spectrum-table-border-divider-width:1px; + --spectrum-tab-item-height-small:var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); + --spectrum-tab-item-height-large:var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large:var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small:var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium:var(--spectrum-component-height-100); + --spectrum-tab-item-compact-height-large:var(--spectrum-component-height-200); + --spectrum-tab-item-compact-height-extra-large:var(--spectrum-component-height-300); + --spectrum-tab-item-start-to-edge-quiet:0px; + --spectrum-in-field-button-width-stacked-small:20px; + --spectrum-in-field-button-width-stacked-medium:28px; + --spectrum-in-field-button-width-stacked-large:36px; + --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-android-elevation:2dp; + --spectrum-spacing-50:2px; + --spectrum-spacing-75:4px; + --spectrum-spacing-100:8px; + --spectrum-spacing-200:12px; + --spectrum-spacing-300:16px; + --spectrum-spacing-400:24px; + --spectrum-spacing-500:32px; + --spectrum-spacing-600:40px; + --spectrum-spacing-700:48px; + --spectrum-spacing-800:64px; + --spectrum-spacing-900:80px; + --spectrum-spacing-1000:96px; + --spectrum-focus-indicator-thickness:2px; + --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-200:2px; + --spectrum-border-width-400:4px; + --spectrum-field-edge-to-text-quiet:0px; + --spectrum-field-edge-to-visual-quiet:0px; + --spectrum-field-edge-to-border-quiet:0px; + --spectrum-field-edge-to-alert-icon-quiet:0px; + --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-text-underline-thickness:1px; + --spectrum-text-underline-gap:1px; + --spectrum-informative-color-100:var(--spectrum-blue-100); + --spectrum-informative-color-200:var(--spectrum-blue-200); + --spectrum-informative-color-300:var(--spectrum-blue-300); + --spectrum-informative-color-400:var(--spectrum-blue-400); + --spectrum-informative-color-500:var(--spectrum-blue-500); + --spectrum-informative-color-600:var(--spectrum-blue-600); + --spectrum-informative-color-700:var(--spectrum-blue-700); + --spectrum-informative-color-800:var(--spectrum-blue-800); + --spectrum-informative-color-900:var(--spectrum-blue-900); + --spectrum-informative-color-1000:var(--spectrum-blue-1000); + --spectrum-informative-color-1100:var(--spectrum-blue-1100); + --spectrum-informative-color-1200:var(--spectrum-blue-1200); + --spectrum-informative-color-1300:var(--spectrum-blue-1300); + --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-negative-color-100:var(--spectrum-red-100); + --spectrum-negative-color-200:var(--spectrum-red-200); + --spectrum-negative-color-300:var(--spectrum-red-300); + --spectrum-negative-color-400:var(--spectrum-red-400); + --spectrum-negative-color-500:var(--spectrum-red-500); + --spectrum-negative-color-600:var(--spectrum-red-600); + --spectrum-negative-color-700:var(--spectrum-red-700); + --spectrum-negative-color-800:var(--spectrum-red-800); + --spectrum-negative-color-900:var(--spectrum-red-900); + --spectrum-negative-color-1000:var(--spectrum-red-1000); + --spectrum-negative-color-1100:var(--spectrum-red-1100); + --spectrum-negative-color-1200:var(--spectrum-red-1200); + --spectrum-negative-color-1300:var(--spectrum-red-1300); + --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-notice-color-100:var(--spectrum-orange-100); + --spectrum-notice-color-200:var(--spectrum-orange-200); + --spectrum-notice-color-300:var(--spectrum-orange-300); + --spectrum-notice-color-400:var(--spectrum-orange-400); + --spectrum-notice-color-500:var(--spectrum-orange-500); + --spectrum-notice-color-600:var(--spectrum-orange-600); + --spectrum-notice-color-700:var(--spectrum-orange-700); + --spectrum-notice-color-800:var(--spectrum-orange-800); + --spectrum-notice-color-900:var(--spectrum-orange-900); + --spectrum-notice-color-1000:var(--spectrum-orange-1000); + --spectrum-notice-color-1100:var(--spectrum-orange-1100); + --spectrum-notice-color-1200:var(--spectrum-orange-1200); + --spectrum-notice-color-1300:var(--spectrum-orange-1300); + --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-positive-color-100:var(--spectrum-green-100); + --spectrum-positive-color-200:var(--spectrum-green-200); + --spectrum-positive-color-300:var(--spectrum-green-300); + --spectrum-positive-color-400:var(--spectrum-green-400); + --spectrum-positive-color-500:var(--spectrum-green-500); + --spectrum-positive-color-600:var(--spectrum-green-600); + --spectrum-positive-color-700:var(--spectrum-green-700); + --spectrum-positive-color-800:var(--spectrum-green-800); + --spectrum-positive-color-900:var(--spectrum-green-900); + --spectrum-positive-color-1000:var(--spectrum-green-1000); + --spectrum-positive-color-1100:var(--spectrum-green-1100); + --spectrum-positive-color-1200:var(--spectrum-green-1200); + --spectrum-positive-color-1300:var(--spectrum-green-1300); + --spectrum-positive-color-1400:var(--spectrum-green-1400); + --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family:Adobe Clean; + --spectrum-serif-font-family:Adobe Clean Serif; + --spectrum-cjk-font-family:Adobe Clean Han; + --spectrum-light-font-weight:300; + --spectrum-regular-font-weight:400; + --spectrum-medium-font-weight:500; + --spectrum-bold-font-weight:700; + --spectrum-extra-bold-font-weight:800; + --spectrum-black-font-weight:900; + --spectrum-italic-font-style:italic; + --spectrum-default-font-style:normal; + --spectrum-line-height-100:1.3; + --spectrum-line-height-200:1.5; + --spectrum-cjk-line-height-100:1.5; + --spectrum-cjk-line-height-200:1.7; + --spectrum-cjk-letter-spacing:0.05em; + --spectrum-heading-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-heading-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-emphasized-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl:var(--spectrum-font-size-1100); + --spectrum-heading-size-xl:var(--spectrum-font-size-900); + --spectrum-heading-size-l:var(--spectrum-font-size-700); + --spectrum-heading-size-m:var(--spectrum-font-size-500); + --spectrum-heading-size-s:var(--spectrum-font-size-300); + --spectrum-heading-size-xs:var(--spectrum-font-size-200); + --spectrum-heading-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl:var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl:var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l:var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m:var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s:var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs:var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-line-height:var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier:0.88888889; + --spectrum-heading-margin-bottom-multiplier:0.25; + --spectrum-heading-color:var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-body-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style:var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-body-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-size-xxxl:var(--spectrum-font-size-600); + --spectrum-body-size-xxl:var(--spectrum-font-size-500); + --spectrum-body-size-xl:var(--spectrum-font-size-400); + --spectrum-body-size-l:var(--spectrum-font-size-300); + --spectrum-body-size-m:var(--spectrum-font-size-200); + --spectrum-body-size-s:var(--spectrum-font-size-100); + --spectrum-body-size-xs:var(--spectrum-font-size-75); + --spectrum-body-line-height:var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier:0.75; + --spectrum-body-color:var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-detail-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-size-xl:var(--spectrum-font-size-200); + --spectrum-detail-size-l:var(--spectrum-font-size-100); + --spectrum-detail-size-m:var(--spectrum-font-size-75); + --spectrum-detail-size-s:var(--spectrum-font-size-50); + --spectrum-detail-line-height:var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier:0.88888889; + --spectrum-detail-margin-bottom-multiplier:0.25; + --spectrum-detail-letter-spacing:0.06em; + --spectrum-detail-sans-serif-text-transform:uppercase; + --spectrum-detail-serif-text-transform:uppercase; + --spectrum-detail-color:var(--spectrum-gray-900); + --spectrum-code-font-family:Source Code Pro; + --spectrum-code-cjk-font-family:var(--spectrum-code-font-family); + --spectrum-code-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-font-style:var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style:var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-size-xl:var(--spectrum-font-size-400); + --spectrum-code-size-l:var(--spectrum-font-size-300); + --spectrum-code-size-m:var(--spectrum-font-size-200); + --spectrum-code-size-s:var(--spectrum-font-size-100); + --spectrum-code-size-xs:var(--spectrum-font-size-75); + --spectrum-code-line-height:var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-code-color:var(--spectrum-gray-800); + --system:spectrum; + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(.45, 0, .40, 1); + --spectrum-animation-ease-in:cubic-bezier(.50, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.40, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:'Source Code Pro', Monaco, monospace; + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 206, 247, 243; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-border-width-100: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:206, 247, 243; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800); + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; + --spectrum-picker-border-width:var(--spectrum-border-width-100); + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-border-width-100:1px; + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --spectrum-accent-color-1200:var(--spectrum-blue-1200); + --spectrum-accent-color-1300:var(--spectrum-blue-1300); + --spectrum-accent-color-1400:var(--spectrum-blue-1400); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); } -.spectrum--large { - --spectrum-workflow-icon-size-50: 18px; - --spectrum-workflow-icon-size-75: 20px; - --spectrum-workflow-icon-size-100: 22px; - --spectrum-workflow-icon-size-200: 24px; - --spectrum-workflow-icon-size-300: 28px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-edge-to-content: 16px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-text-to-visual-50: 8px; - --spectrum-text-to-visual-75: 9px; - --spectrum-text-to-visual-100: 10px; - --spectrum-text-to-visual-200: 11px; - --spectrum-text-to-visual-300: 13px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 13px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 22px; - --spectrum-component-pill-edge-to-visual-300: 27px; - --spectrum-component-pill-edge-to-visual-only-75: 5px; - --spectrum-component-pill-edge-to-visual-only-100: 9px; - --spectrum-component-pill-edge-to-visual-only-200: 13px; - --spectrum-component-pill-edge-to-visual-only-300: 16px; - --spectrum-component-pill-edge-to-text-75: 15px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 25px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 9px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 16px; - --spectrum-component-edge-to-visual-300: 19px; - --spectrum-component-edge-to-visual-only-50: 4px; - --spectrum-component-edge-to-visual-only-75: 5px; - --spectrum-component-edge-to-visual-only-100: 9px; - --spectrum-component-edge-to-visual-only-200: 13px; - --spectrum-component-edge-to-visual-only-300: 16px; - --spectrum-component-edge-to-text-50: 10px; - --spectrum-component-edge-to-text-75: 11px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 19px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 4px; - --spectrum-component-top-to-workflow-icon-75: 5px; - --spectrum-component-top-to-workflow-icon-100: 9px; - --spectrum-component-top-to-workflow-icon-200: 13px; - --spectrum-component-top-to-workflow-icon-300: 16px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; +.spectrum--large{ + --spectrum-workflow-icon-size-50:18px; + --spectrum-workflow-icon-size-75:20px; + --spectrum-workflow-icon-size-100:22px; + --spectrum-workflow-icon-size-200:24px; + --spectrum-workflow-icon-size-300:28px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-field-label-text-to-asterisk-small:5px; + --spectrum-field-label-text-to-asterisk-medium:5px; + --spectrum-field-label-text-to-asterisk-large:6px; + --spectrum-field-label-text-to-asterisk-extra-large:6px; + --spectrum-field-label-top-to-asterisk-small:11px; + --spectrum-field-label-top-to-asterisk-medium:15px; + --spectrum-field-label-top-to-asterisk-large:19px; + --spectrum-field-label-top-to-asterisk-extra-large:24px; + --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-top-margin-medium:5px; + --spectrum-field-label-top-margin-large:6px; + --spectrum-field-label-top-margin-extra-large:6px; + --spectrum-field-label-to-component-quiet-small:-10px; + --spectrum-field-label-to-component-quiet-medium:-10px; + --spectrum-field-label-to-component-quiet-large:-15px; + --spectrum-field-label-to-component-quiet-extra-large:-19px; + --spectrum-help-text-top-to-workflow-icon-small:5px; + --spectrum-help-text-top-to-workflow-icon-medium:4px; + --spectrum-help-text-top-to-workflow-icon-large:8px; + --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-status-light-dot-size-small:8px; + --spectrum-status-light-dot-size-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:12px; + --spectrum-status-light-top-to-dot-small:11px; + --spectrum-status-light-top-to-dot-medium:15px; + --spectrum-status-light-top-to-dot-large:19px; + --spectrum-status-light-top-to-dot-extra-large:24px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; + --spectrum-action-button-edge-to-hold-icon-medium:5px; + --spectrum-action-button-edge-to-hold-icon-large:6px; + --spectrum-action-button-edge-to-hold-icon-extra-large:7px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-maximum-width:200px; + --spectrum-progress-circle-size-small:20px; + --spectrum-progress-circle-size-medium:40px; + --spectrum-progress-circle-size-large:80px; + --spectrum-progress-circle-thickness-small:3px; + --spectrum-progress-circle-thickness-medium:4px; + --spectrum-progress-circle-thickness-large:5px; + --spectrum-toast-height:56px; + --spectrum-toast-maximum-width:420px; + --spectrum-toast-top-to-workflow-icon:17px; + --spectrum-toast-top-to-text:16px; + --spectrum-toast-bottom-to-text:19px; + --spectrum-action-bar-height:56px; + --spectrum-action-bar-top-to-item-counter:16px; + --spectrum-swatch-size-extra-small:20px; + --spectrum-swatch-size-small:30px; + --spectrum-swatch-size-medium:40px; + --spectrum-swatch-size-large:50px; + --spectrum-progress-bar-thickness-small:5px; + --spectrum-progress-bar-thickness-medium:8px; + --spectrum-progress-bar-thickness-large:10px; + --spectrum-progress-bar-thickness-extra-large:13px; + --spectrum-meter-width:240px; + --spectrum-meter-thickness-small:5px; + --spectrum-meter-thickness-large:8px; + --spectrum-tag-top-to-avatar-small:5px; + --spectrum-tag-top-to-avatar-medium:7px; + --spectrum-tag-top-to-avatar-large:11px; + --spectrum-tag-top-to-cross-icon-small:10px; + --spectrum-tag-top-to-cross-icon-medium:15px; + --spectrum-tag-top-to-cross-icon-large:19px; + --spectrum-popover-top-to-content-area:5px; + --spectrum-menu-item-edge-to-content-not-selected-small:24px; + --spectrum-menu-item-edge-to-content-not-selected-medium:42px; + --spectrum-menu-item-edge-to-content-not-selected-large:47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:54px; + --spectrum-menu-item-top-to-disclosure-icon-small:9px; + --spectrum-menu-item-top-to-disclosure-icon-medium:13px; + --spectrum-menu-item-top-to-disclosure-icon-large:17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:22px; + --spectrum-menu-item-top-to-selected-icon-small:9px; + --spectrum-menu-item-top-to-selected-icon-medium:13px; + --spectrum-menu-item-top-to-selected-icon-large:17px; + --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-to-field-label-small:6px; + --spectrum-slider-control-to-field-label-medium:10px; + --spectrum-slider-control-to-field-label-large:14px; + --spectrum-slider-control-to-field-label-extra-large:17px; + --spectrum-picker-visual-to-disclosure-icon-small:9px; + --spectrum-picker-visual-to-disclosure-icon-medium:10px; + --spectrum-picker-visual-to-disclosure-icon-large:11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; + --spectrum-text-area-minimum-width:140px; + --spectrum-text-area-minimum-height:70px; + --spectrum-combo-box-visual-to-field-button-small:9px; + --spectrum-combo-box-visual-to-field-button-medium:10px; + --spectrum-combo-box-visual-to-field-button-large:11px; + --spectrum-combo-box-visual-to-field-button-extra-large:13px; + --spectrum-thumbnail-size-50:20px; + --spectrum-thumbnail-size-75:22px; + --spectrum-thumbnail-size-100:26px; + --spectrum-thumbnail-size-200:28px; + --spectrum-thumbnail-size-300:32px; + --spectrum-thumbnail-size-400:36px; + --spectrum-thumbnail-size-500:40px; + --spectrum-thumbnail-size-600:46px; + --spectrum-thumbnail-size-700:50px; + --spectrum-thumbnail-size-800:55px; + --spectrum-thumbnail-size-900:62px; + --spectrum-thumbnail-size-1000:70px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size:10px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline:84px; + --spectrum-breadcrumbs-top-to-text:17px; + --spectrum-breadcrumbs-top-to-text-compact:16px; + --spectrum-breadcrumbs-top-to-text-multiline:15px; + --spectrum-breadcrumbs-bottom-to-text:19px; + --spectrum-breadcrumbs-bottom-to-text-compact:19px; + --spectrum-breadcrumbs-bottom-to-text-multiline:10px; + --spectrum-breadcrumbs-start-edge-to-text:9px; + --spectrum-breadcrumbs-top-text-to-bottom-text:11px; + --spectrum-breadcrumbs-top-to-separator-icon:25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px; + --spectrum-breadcrumbs-top-to-truncated-menu:10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:5px; + --spectrum-avatar-size-50:20px; + --spectrum-avatar-size-75:22px; + --spectrum-avatar-size-100:26px; + --spectrum-avatar-size-200:28px; + --spectrum-avatar-size-300:32px; + --spectrum-avatar-size-400:36px; + --spectrum-avatar-size-500:40px; + --spectrum-avatar-size-600:46px; + --spectrum-avatar-size-700:50px; + --spectrum-alert-banner-minimum-height:64px; + --spectrum-alert-banner-width:680px; + --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-text:21px; + --spectrum-alert-banner-bottom-to-text:22px; + --spectrum-rating-indicator-width:22px; + --spectrum-rating-indicator-to-icon:5px; + --spectrum-color-area-width:240px; + --spectrum-color-area-minimum-width:80px; + --spectrum-color-area-height:240px; + --spectrum-color-area-minimum-height:80px; + --spectrum-color-wheel-width:240px; + --spectrum-color-wheel-minimum-width:219px; + --spectrum-color-slider-length:240px; + --spectrum-color-slider-minimum-length:100px; + --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s); + --spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-width:216px; + --spectrum-coach-mark-minimum-width:216px; + --spectrum-coach-mark-maximum-width:248px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; + --spectrum-coach-mark-media-height:162px; + --spectrum-coach-mark-media-minimum-height:121px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-compact-small:2px; + --spectrum-accordion-top-to-text-regular-small:7px; + --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-compact-medium:4px; + --spectrum-accordion-top-to-text-regular-medium:9px; + --spectrum-accordion-top-to-text-spacious-medium:14px; + --spectrum-accordion-top-to-text-compact-large:7px; + --spectrum-accordion-top-to-text-regular-large:12px; + --spectrum-accordion-top-to-text-spacious-large:14px; + --spectrum-accordion-top-to-text-compact-extra-large:7px; + --spectrum-accordion-top-to-text-regular-extra-large:12px; + --spectrum-accordion-top-to-text-spacious-extra-large:14px; + --spectrum-accordion-bottom-to-text-compact-small:4px; + --spectrum-accordion-bottom-to-text-regular-small:9px; + --spectrum-accordion-bottom-to-text-spacious-small:14px; + --spectrum-accordion-bottom-to-text-compact-medium:8px; + --spectrum-accordion-bottom-to-text-regular-medium:13px; + --spectrum-accordion-bottom-to-text-spacious-medium:18px; + --spectrum-accordion-bottom-to-text-compact-large:9px; + --spectrum-accordion-bottom-to-text-regular-large:14px; + --spectrum-accordion-bottom-to-text-spacious-large:19px; + --spectrum-accordion-bottom-to-text-compact-extra-large:10px; + --spectrum-accordion-bottom-to-text-regular-extra-large:15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; + --spectrum-accordion-minimum-width:250px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; + --spectrum-accordion-content-area-top-to-content:10px; + --spectrum-accordion-content-area-bottom-to-content:20px; + --spectrum-color-handle-size:20px; + --spectrum-color-handle-size-key-focus:40px; + --spectrum-table-column-header-row-top-to-text-small:10px; + --spectrum-table-column-header-row-top-to-text-medium:9px; + --spectrum-table-column-header-row-top-to-text-large:13px; + --spectrum-table-column-header-row-top-to-text-extra-large:16px; + --spectrum-table-column-header-row-bottom-to-text-small:11px; + --spectrum-table-column-header-row-bottom-to-text-medium:10px; + --spectrum-table-column-header-row-bottom-to-text-large:13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:17px; + --spectrum-table-row-height-small-regular:40px; + --spectrum-table-row-height-medium-regular:50px; + --spectrum-table-row-height-large-regular:60px; + --spectrum-table-row-height-extra-large-regular:70px; + --spectrum-table-row-height-small-spacious:50px; + --spectrum-table-row-height-medium-spacious:60px; + --spectrum-table-row-height-large-spacious:70px; + --spectrum-table-row-height-extra-large-spacious:80px; + --spectrum-table-row-top-to-text-small-regular:10px; + --spectrum-table-row-top-to-text-medium-regular:14px; + --spectrum-table-row-top-to-text-large-regular:18px; + --spectrum-table-row-top-to-text-extra-large-regular:21px; + --spectrum-table-row-bottom-to-text-small-regular:11px; + --spectrum-table-row-bottom-to-text-medium-regular:15px; + --spectrum-table-row-bottom-to-text-large-regular:18px; + --spectrum-table-row-bottom-to-text-extra-large-regular:22px; + --spectrum-table-row-top-to-text-small-spacious:15px; + --spectrum-table-row-top-to-text-medium-spacious:18px; + --spectrum-table-row-top-to-text-large-spacious:23px; + --spectrum-table-row-top-to-text-extra-large-spacious:26px; + --spectrum-table-row-bottom-to-text-small-spacious:16px; + --spectrum-table-row-bottom-to-text-medium-spacious:18px; + --spectrum-table-row-bottom-to-text-large-spacious:23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; + --spectrum-table-edge-to-content:16px; + --spectrum-table-checkbox-to-text:30px; + --spectrum-table-header-row-checkbox-to-top-small:14px; + --spectrum-table-header-row-checkbox-to-top-medium:13px; + --spectrum-table-header-row-checkbox-to-top-large:17px; + --spectrum-table-header-row-checkbox-to-top-extra-large:21px; + --spectrum-table-row-checkbox-to-top-small-compact:9px; + --spectrum-table-row-checkbox-to-top-small-regular:14px; + --spectrum-table-row-checkbox-to-top-small-spacious:19px; + --spectrum-table-row-checkbox-to-top-medium-compact:13px; + --spectrum-table-row-checkbox-to-top-medium-regular:18px; + --spectrum-table-row-checkbox-to-top-medium-spacious:23px; + --spectrum-table-row-checkbox-to-top-large-compact:17px; + --spectrum-table-row-checkbox-to-top-large-regular:22px; + --spectrum-table-row-checkbox-to-top-large-spacious:27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:31px; + --spectrum-table-section-header-row-height-small:30px; + --spectrum-table-section-header-row-height-medium:40px; + --spectrum-table-section-header-row-height-large:50px; + --spectrum-table-section-header-row-height-extra-large:60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px; + --spectrum-tab-item-to-tab-item-horizontal-small:27px; + --spectrum-tab-item-to-tab-item-horizontal-medium:30px; + --spectrum-tab-item-to-tab-item-horizontal-large:33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:36px; + --spectrum-tab-item-to-tab-item-vertical-small:5px; + --spectrum-tab-item-to-tab-item-vertical-medium:5px; + --spectrum-tab-item-to-tab-item-vertical-large:6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:6px; + --spectrum-tab-item-start-to-edge-small:13px; + --spectrum-tab-item-start-to-edge-medium:15px; + --spectrum-tab-item-start-to-edge-large:17px; + --spectrum-tab-item-start-to-edge-extra-large:19px; + --spectrum-tab-item-top-to-text-small:14px; + --spectrum-tab-item-bottom-to-text-small:15px; + --spectrum-tab-item-top-to-text-medium:18px; + --spectrum-tab-item-bottom-to-text-medium:19px; + --spectrum-tab-item-top-to-text-large:22px; + --spectrum-tab-item-bottom-to-text-large:22px; + --spectrum-tab-item-top-to-text-extra-large:25px; + --spectrum-tab-item-bottom-to-text-extra-large:25px; + --spectrum-tab-item-top-to-text-compact-small:5px; + --spectrum-tab-item-bottom-to-text-compact-small:6px; + --spectrum-tab-item-top-to-text-compact-medium:9px; + --spectrum-tab-item-bottom-to-text-compact-medium:10px; + --spectrum-tab-item-top-to-text-compact-large:12px; + --spectrum-tab-item-bottom-to-text-compact-large:14px; + --spectrum-tab-item-top-to-text-compact-extra-large:15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:17px; + --spectrum-tab-item-top-to-workflow-icon-small:15px; + --spectrum-tab-item-top-to-workflow-icon-medium:19px; + --spectrum-tab-item-top-to-workflow-icon-large:23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px; + --spectrum-tab-item-focus-indicator-gap-small:9px; + --spectrum-tab-item-focus-indicator-gap-medium:10px; + --spectrum-tab-item-focus-indicator-gap-large:11px; + --spectrum-tab-item-focus-indicator-gap-extra-large:12px; + --spectrum-side-navigation-width:240px; + --spectrum-side-navigation-minimum-width:200px; + --spectrum-side-navigation-maximum-width:300px; + --spectrum-side-navigation-second-level-edge-to-text:30px; + --spectrum-side-navigation-third-level-edge-to-text:45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; + --spectrum-side-navigation-item-to-item:5px; + --spectrum-side-navigation-item-to-header:30px; + --spectrum-side-navigation-header-to-item:10px; + --spectrum-side-navigation-bottom-to-text:10px; + --spectrum-tray-top-to-content-area:5px; + --spectrum-text-to-visual-50:8px; + --spectrum-text-to-visual-75:9px; + --spectrum-text-to-visual-100:10px; + --spectrum-text-to-visual-200:11px; + --spectrum-text-to-visual-300:13px; + --spectrum-text-to-control-75:11px; + --spectrum-text-to-control-100:13px; + --spectrum-text-to-control-200:14px; + --spectrum-text-to-control-300:16px; + --spectrum-component-height-50:26px; + --spectrum-component-height-75:30px; + --spectrum-component-height-100:40px; + --spectrum-component-height-200:50px; + --spectrum-component-height-300:60px; + --spectrum-component-height-400:70px; + --spectrum-component-height-500:80px; + --spectrum-component-pill-edge-to-visual-75:13px; + --spectrum-component-pill-edge-to-visual-100:17px; + --spectrum-component-pill-edge-to-visual-200:22px; + --spectrum-component-pill-edge-to-visual-300:27px; + --spectrum-component-pill-edge-to-visual-only-75:5px; + --spectrum-component-pill-edge-to-visual-only-100:9px; + --spectrum-component-pill-edge-to-visual-only-200:13px; + --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-text-75:15px; + --spectrum-component-pill-edge-to-text-100:20px; + --spectrum-component-pill-edge-to-text-200:25px; + --spectrum-component-pill-edge-to-text-300:30px; + --spectrum-component-edge-to-visual-50:7px; + --spectrum-component-edge-to-visual-75:9px; + --spectrum-component-edge-to-visual-100:12px; + --spectrum-component-edge-to-visual-200:16px; + --spectrum-component-edge-to-visual-300:19px; + --spectrum-component-edge-to-visual-only-50:4px; + --spectrum-component-edge-to-visual-only-75:5px; + --spectrum-component-edge-to-visual-only-100:9px; + --spectrum-component-edge-to-visual-only-200:13px; + --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-text-50:10px; + --spectrum-component-edge-to-text-75:11px; + --spectrum-component-edge-to-text-100:15px; + --spectrum-component-edge-to-text-200:19px; + --spectrum-component-edge-to-text-300:22px; + --spectrum-component-top-to-workflow-icon-50:4px; + --spectrum-component-top-to-workflow-icon-75:5px; + --spectrum-component-top-to-workflow-icon-100:9px; + --spectrum-component-top-to-workflow-icon-200:13px; + --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-text-50:4px; + --spectrum-component-top-to-text-75:5px; + --spectrum-component-top-to-text-100:8px; + --spectrum-component-top-to-text-200:12px; + --spectrum-component-top-to-text-300:15px; + --spectrum-component-bottom-to-text-50:6px; + --spectrum-component-bottom-to-text-75:6px; + --spectrum-component-bottom-to-text-100:11px; + --spectrum-component-bottom-to-text-200:14px; + --spectrum-component-bottom-to-text-300:18px; + --spectrum-component-to-menu-small:7px; + --spectrum-component-to-menu-medium:8px; + --spectrum-component-to-menu-large:9px; + --spectrum-component-to-menu-extra-large:10px; + --spectrum-field-edge-to-disclosure-icon-75:9px; + --spectrum-field-edge-to-disclosure-icon-100:13px; + --spectrum-field-edge-to-disclosure-icon-200:17px; + --spectrum-field-edge-to-disclosure-icon-300:22px; + --spectrum-field-end-edge-to-disclosure-icon-75:9px; + --spectrum-field-end-edge-to-disclosure-icon-100:13px; + --spectrum-field-end-edge-to-disclosure-icon-200:17px; + --spectrum-field-end-edge-to-disclosure-icon-300:22px; + --spectrum-field-top-to-disclosure-icon-75:9px; + --spectrum-field-top-to-disclosure-icon-100:13px; + --spectrum-field-top-to-disclosure-icon-200:17px; + --spectrum-field-top-to-disclosure-icon-300:22px; + --spectrum-field-top-to-alert-icon-small:5px; + --spectrum-field-top-to-alert-icon-medium:9px; + --spectrum-field-top-to-alert-icon-large:13px; + --spectrum-field-top-to-alert-icon-extra-large:16px; + --spectrum-field-top-to-validation-icon-small:9px; + --spectrum-field-top-to-validation-icon-medium:13px; + --spectrum-field-top-to-validation-icon-large:17px; + --spectrum-field-top-to-validation-icon-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:7px; + --spectrum-field-top-to-progress-circle-medium:12px; + --spectrum-field-top-to-progress-circle-large:17px; + --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-edge-to-alert-icon-small:11px; + --spectrum-field-edge-to-alert-icon-medium:15px; + --spectrum-field-edge-to-alert-icon-large:19px; + --spectrum-field-edge-to-alert-icon-extra-large:22px; + --spectrum-field-edge-to-validation-icon-small:11px; + --spectrum-field-edge-to-validation-icon-medium:15px; + --spectrum-field-edge-to-validation-icon-large:19px; + --spectrum-field-edge-to-validation-icon-extra-large:22px; + --spectrum-field-text-to-alert-icon-small:10px; + --spectrum-field-text-to-alert-icon-medium:15px; + --spectrum-field-text-to-alert-icon-large:19px; + --spectrum-field-text-to-alert-icon-extra-large:22px; + --spectrum-field-text-to-validation-icon-small:10px; + --spectrum-field-text-to-validation-icon-medium:15px; + --spectrum-field-text-to-validation-icon-large:19px; + --spectrum-field-text-to-validation-icon-extra-large:22px; + --spectrum-field-width:240px; + --spectrum-character-count-to-field-quiet-small:-4px; + --spectrum-character-count-to-field-quiet-medium:-4px; + --spectrum-character-count-to-field-quiet-large:-4px; + --spectrum-character-count-to-field-quiet-extra-large:-5px; + --spectrum-side-label-character-count-to-field:15px; + --spectrum-side-label-character-count-top-margin-small:5px; + --spectrum-side-label-character-count-top-margin-medium:10px; + --spectrum-side-label-character-count-top-margin-large:14px; + --spectrum-side-label-character-count-top-margin-extra-large:18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:12px; + --spectrum-navigational-indicator-top-to-back-icon-large:16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; + --spectrum-color-control-track-width:30px; + --spectrum-font-size-50:13px; + --spectrum-font-size-75:15px; + --spectrum-font-size-100:17px; + --spectrum-font-size-200:19px; + --spectrum-font-size-300:22px; + --spectrum-font-size-400:24px; + --spectrum-font-size-500:27px; + --spectrum-font-size-600:31px; + --spectrum-font-size-700:34px; + --spectrum-font-size-800:39px; + --spectrum-font-size-900:44px; + --spectrum-font-size-1000:49px; + --spectrum-font-size-1100:55px; + --spectrum-font-size-1200:62px; + --spectrum-font-size-1300:70px; /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 5px; - --spectrum-edge-to-visual-only-100: 9px; - --spectrum-edge-to-visual-only-200: 13px; - --spectrum-edge-to-visual-only-300: 16px; - - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - - --spectrum-icon-chevron-size-50: 8px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-corner-radius-75: 2px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; + --spectrum-edge-to-visual-only-75:5px; + --spectrum-edge-to-visual-only-100:9px; + --spectrum-edge-to-visual-only-200:13px; + --spectrum-edge-to-visual-only-300:16px; + + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + + --spectrum-well-padding:20px; + --spectrum-well-margin-top:5px; + --spectrum-well-min-width:300px; + --spectrum-well-border-radius:5px; + + --spectrum-icon-chevron-size-50:8px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:16px; + --spectrum-switch-control-height-medium:18px; + --spectrum-switch-control-height-large:20px; + --spectrum-switch-control-height-extra-large:22px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:5px; + --spectrum-corner-radius-200:10px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; } -.spectrum--light, -.spectrum--lightest { - --spectrum-overlay-opacity: 0.4; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.15; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-200); - --spectrum-background-layer-1-color: var(--spectrum-gray-100); - --spectrum-background-layer-2-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-700 - ); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1100); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1100 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1100 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1100 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-600); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-700); - --spectrum-positive-visual-color: var(--spectrum-positive-color-700); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-gray-50-rgb: 255, 255, 255; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 253, 253, 253; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 248, 248, 248; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 230, 230, 230; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 213, 213, 213; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 177, 177, 177; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 144, 144, 144; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 109, 109, 109; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 70, 70, 70; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 34, 34, 34; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 0, 0, 0; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 224, 242, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 202, 232, 255; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 181, 222, 255; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 150, 206, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 120, 187, 250; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 89, 167, 246; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 56, 146, 243; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 20, 122, 243; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 2, 101, 220; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 0, 84, 182; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 0, 68, 145; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 0, 53, 113; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 0, 39, 84; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 0, 28, 60; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 255, 235, 231; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 221, 214; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 205, 195; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 183, 169; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 155, 136; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 124, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 247, 92, 70; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 234, 56, 41; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 211, 21, 16; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 180, 0, 0; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 147, 0, 0; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 116, 0, 0; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 89, 0, 0; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 67, 0, 0; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 255, 236, 204; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 223, 173; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 253, 210, 145; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 187, 99; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 160, 55; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 246, 133, 17; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 228, 111, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 203, 93, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 177, 76, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 149, 61, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 122, 47, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 97, 35, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 73, 25, 1; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 53, 18, 1; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 251, 241, 152; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 248, 231, 80; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 248, 217, 4; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 232, 198, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 215, 179, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 196, 159, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 176, 140, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 155, 120, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 133, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 112, 83, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 91, 67, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 72, 51, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 54, 37, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 40, 26, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 219, 252, 110; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 203, 244, 67; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 188, 233, 42; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 170, 216, 22; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 152, 197, 10; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 135, 177, 3; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 118, 156, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 103, 136, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 87, 116, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 72, 96, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 58, 77, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 44, 59, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 33, 44, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 24, 31, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 205, 252, 191; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 174, 246, 157; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 150, 238, 133; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 114, 224, 106; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 78, 207, 80; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 39, 187, 54; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 7, 167, 33; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 0, 145, 18; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 0, 124, 15; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 0, 103, 15; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 0, 83, 13; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 0, 64, 10; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 0, 48, 7; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 0, 34, 5; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 206, 248, 224; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 173, 244, 206; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 137, 236, 188; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 103, 222, 168; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 73, 204, 147; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 47, 184, 128; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 21, 164, 110; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 0, 143, 93; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 0, 122, 77; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 0, 101, 62; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 0, 81, 50; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 5, 63, 39; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 10, 46, 29; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 10, 32, 21; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 206, 247, 243; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 170, 241, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 140, 233, 226; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 101, 218, 210; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 63, 201, 193; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 15, 181, 174; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 161, 154; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 0, 140, 135; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 0, 119, 114; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 0, 99, 95; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 12, 79, 76; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 18, 60, 58; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 18, 44, 43; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 15, 31, 30; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 197, 248, 255; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 164, 240, 255; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 136, 231, 250; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 96, 216, 243; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 51, 197, 232; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 18, 176, 218; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 1, 156, 200; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 0, 134, 180; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 0, 113, 159; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 0, 93, 137; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 74, 115; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 57, 93; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 42, 70; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 30, 51; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 237, 238, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 224, 226, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 211, 213, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 193, 196, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 172, 175, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 149, 153, 255; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 126, 132, 252; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 104, 109, 244; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 82, 88, 228; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 64, 70, 202; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 50, 54, 168; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 38, 41, 134; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 27, 30, 100; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 20, 22, 72; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 246, 235, 255; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 238, 221, 255; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 230, 208, 255; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 219, 187, 254; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 204, 164, 253; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 189, 139, 252; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 174, 114, 249; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 157, 87, 244; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 137, 61, 231; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 115, 38, 211; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 93, 19, 183; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 71, 12, 148; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 51, 16, 106; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 35, 15, 73; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 255, 233, 252; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 255, 218, 250; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 254, 199, 248; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 251, 174, 246; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 245, 146, 243; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 237, 116, 237; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 224, 85, 226; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 205, 58, 206; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 182, 34, 183; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 157, 3, 158; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 128, 0, 129; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 100, 6, 100; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 71, 14, 70; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 50, 13, 49; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 255, 234, 241; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 220, 232; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 202, 221; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 178, 206; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 149, 189; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 250, 119, 170; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 239, 90, 152; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 222, 61, 130; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 200, 34, 105; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 173, 9, 85; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 142, 0, 69; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 112, 0, 55; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 84, 3, 42; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 60, 6, 29; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); +.spectrum--light, .spectrum--lightest{ + --spectrum-overlay-opacity:0.4; + --spectrum-drop-shadow-color-rgb:0, 0, 0; + --spectrum-drop-shadow-color-opacity:0.15; + --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); + --spectrum-background-base-color:var(--spectrum-gray-200); + --spectrum-background-layer-1-color:var(--spectrum-gray-100); + --spectrum-background-layer-2-color:var(--spectrum-gray-50); + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-red-background-color-default:var(--spectrum-red-900); + --spectrum-orange-background-color-default:var(--spectrum-orange-600); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-500); + --spectrum-celery-background-color-default:var(--spectrum-celery-600); + --spectrum-green-background-color-default:var(--spectrum-green-900); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-900); + --spectrum-blue-background-color-default:var(--spectrum-blue-900); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-900); + --spectrum-purple-background-color-default:var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-900); + --spectrum-neutral-visual-color:var(--spectrum-gray-500); + --spectrum-accent-visual-color:var(--spectrum-accent-color-800); + --spectrum-informative-visual-color:var(--spectrum-informative-color-800); + --spectrum-negative-visual-color:var(--spectrum-negative-color-800); + --spectrum-notice-visual-color:var(--spectrum-notice-color-700); + --spectrum-positive-visual-color:var(--spectrum-positive-color-700); + --spectrum-gray-visual-color:var(--spectrum-gray-500); + --spectrum-red-visual-color:var(--spectrum-red-800); + --spectrum-orange-visual-color:var(--spectrum-orange-700); + --spectrum-yellow-visual-color:var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color:var(--spectrum-celery-700); + --spectrum-green-visual-color:var(--spectrum-green-700); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color:var(--spectrum-cyan-600); + --spectrum-blue-visual-color:var(--spectrum-blue-800); + --spectrum-indigo-visual-color:var(--spectrum-indigo-800); + --spectrum-purple-visual-color:var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); + --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:177, 177, 177; + --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb:109, 109, 109; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:255, 235, 231; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:206, 248, 224; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400); + --spectrum-menu-item-background-color-default-rgb:0, 0, 0; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-800-rgb - ); /* var(--spectrum-accent-color-800);*/ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/ /* Drop Indicator color rgb */ - --spectrum-dropindicator-color: var(--spectrum-blue-800); + --spectrum-dropindicator-color:var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); + --spectrum-well-border-color:var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb),0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb),0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); } -.spectrum--medium { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 18px; - --spectrum-workflow-icon-size-200: 20px; - --spectrum-workflow-icon-size-300: 22px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-edge-to-content: 16px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-text-to-visual-50: 6px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 10px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 21px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 7px; - --spectrum-component-pill-edge-to-visual-only-200: 10px; - --spectrum-component-pill-edge-to-visual-only-300: 13px; - --spectrum-component-pill-edge-to-text-75: 12px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 24px; - --spectrum-component-edge-to-visual-50: 6px; - --spectrum-component-edge-to-visual-75: 7px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 15px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 7px; - --spectrum-component-edge-to-visual-only-200: 10px; - --spectrum-component-edge-to-visual-only-300: 13px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 9px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 18px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 7px; - --spectrum-component-top-to-workflow-icon-200: 10px; - --spectrum-component-top-to-workflow-icon-300: 13px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; +.spectrum--medium{ + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:18px; + --spectrum-workflow-icon-size-200:20px; + --spectrum-workflow-icon-size-300:22px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-field-label-text-to-asterisk-small:4px; + --spectrum-field-label-text-to-asterisk-medium:4px; + --spectrum-field-label-text-to-asterisk-large:5px; + --spectrum-field-label-text-to-asterisk-extra-large:5px; + --spectrum-field-label-top-to-asterisk-small:8px; + --spectrum-field-label-top-to-asterisk-medium:12px; + --spectrum-field-label-top-to-asterisk-large:15px; + --spectrum-field-label-top-to-asterisk-extra-large:19px; + --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-top-margin-medium:4px; + --spectrum-field-label-top-margin-large:5px; + --spectrum-field-label-top-margin-extra-large:5px; + --spectrum-field-label-to-component-quiet-small:-8px; + --spectrum-field-label-to-component-quiet-medium:-8px; + --spectrum-field-label-to-component-quiet-large:-12px; + --spectrum-field-label-to-component-quiet-extra-large:-15px; + --spectrum-help-text-top-to-workflow-icon-small:4px; + --spectrum-help-text-top-to-workflow-icon-medium:3px; + --spectrum-help-text-top-to-workflow-icon-large:6px; + --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-status-light-dot-size-small:8px; + --spectrum-status-light-dot-size-medium:8px; + --spectrum-status-light-dot-size-large:10px; + --spectrum-status-light-dot-size-extra-large:10px; + --spectrum-status-light-top-to-dot-small:8px; + --spectrum-status-light-top-to-dot-medium:12px; + --spectrum-status-light-top-to-dot-large:15px; + --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; + --spectrum-action-button-edge-to-hold-icon-medium:4px; + --spectrum-action-button-edge-to-hold-icon-large:5px; + --spectrum-action-button-edge-to-hold-icon-extra-large:6px; + --spectrum-tooltip-tip-width:8px; + --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-maximum-width:160px; + --spectrum-progress-circle-size-small:16px; + --spectrum-progress-circle-size-medium:32px; + --spectrum-progress-circle-size-large:64px; + --spectrum-progress-circle-thickness-small:2px; + --spectrum-progress-circle-thickness-medium:3px; + --spectrum-progress-circle-thickness-large:4px; + --spectrum-toast-height:48px; + --spectrum-toast-maximum-width:336px; + --spectrum-toast-top-to-workflow-icon:15px; + --spectrum-toast-top-to-text:14px; + --spectrum-toast-bottom-to-text:17px; + --spectrum-action-bar-height:48px; + --spectrum-action-bar-top-to-item-counter:14px; + --spectrum-swatch-size-extra-small:16px; + --spectrum-swatch-size-small:24px; + --spectrum-swatch-size-medium:32px; + --spectrum-swatch-size-large:40px; + --spectrum-progress-bar-thickness-small:4px; + --spectrum-progress-bar-thickness-medium:6px; + --spectrum-progress-bar-thickness-large:8px; + --spectrum-progress-bar-thickness-extra-large:10px; + --spectrum-meter-width:192px; + --spectrum-meter-thickness-small:4px; + --spectrum-meter-thickness-large:6px; + --spectrum-tag-top-to-avatar-small:4px; + --spectrum-tag-top-to-avatar-medium:6px; + --spectrum-tag-top-to-avatar-large:9px; + --spectrum-tag-top-to-cross-icon-small:8px; + --spectrum-tag-top-to-cross-icon-medium:12px; + --spectrum-tag-top-to-cross-icon-large:15px; + --spectrum-popover-top-to-content-area:4px; + --spectrum-menu-item-edge-to-content-not-selected-small:28px; + --spectrum-menu-item-edge-to-content-not-selected-medium:32px; + --spectrum-menu-item-edge-to-content-not-selected-large:38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:45px; + --spectrum-menu-item-top-to-disclosure-icon-small:7px; + --spectrum-menu-item-top-to-disclosure-icon-medium:11px; + --spectrum-menu-item-top-to-disclosure-icon-large:14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:17px; + --spectrum-menu-item-top-to-selected-icon-small:7px; + --spectrum-menu-item-top-to-selected-icon-medium:11px; + --spectrum-menu-item-top-to-selected-icon-large:14px; + --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-to-field-label-small:5px; + --spectrum-slider-control-to-field-label-medium:8px; + --spectrum-slider-control-to-field-label-large:11px; + --spectrum-slider-control-to-field-label-extra-large:14px; + --spectrum-picker-visual-to-disclosure-icon-small:7px; + --spectrum-picker-visual-to-disclosure-icon-medium:8px; + --spectrum-picker-visual-to-disclosure-icon-large:9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; + --spectrum-text-area-minimum-width:112px; + --spectrum-text-area-minimum-height:56px; + --spectrum-combo-box-visual-to-field-button-small:7px; + --spectrum-combo-box-visual-to-field-button-medium:8px; + --spectrum-combo-box-visual-to-field-button-large:9px; + --spectrum-combo-box-visual-to-field-button-extra-large:10px; + --spectrum-thumbnail-size-50:16px; + --spectrum-thumbnail-size-75:18px; + --spectrum-thumbnail-size-100:20px; + --spectrum-thumbnail-size-200:22px; + --spectrum-thumbnail-size-300:26px; + --spectrum-thumbnail-size-400:28px; + --spectrum-thumbnail-size-500:32px; + --spectrum-thumbnail-size-600:36px; + --spectrum-thumbnail-size-700:40px; + --spectrum-thumbnail-size-800:44px; + --spectrum-thumbnail-size-900:50px; + --spectrum-thumbnail-size-1000:56px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size:8px; + --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline:72px; + --spectrum-breadcrumbs-top-to-text:13px; + --spectrum-breadcrumbs-top-to-text-compact:11px; + --spectrum-breadcrumbs-top-to-text-multiline:12px; + --spectrum-breadcrumbs-bottom-to-text:15px; + --spectrum-breadcrumbs-bottom-to-text-compact:12px; + --spectrum-breadcrumbs-bottom-to-text-multiline:9px; + --spectrum-breadcrumbs-start-edge-to-text:8px; + --spectrum-breadcrumbs-top-text-to-bottom-text:9px; + --spectrum-breadcrumbs-top-to-separator-icon:19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:11px; + --spectrum-breadcrumbs-top-to-truncated-menu:8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:4px; + --spectrum-avatar-size-50:16px; + --spectrum-avatar-size-75:18px; + --spectrum-avatar-size-100:20px; + --spectrum-avatar-size-200:22px; + --spectrum-avatar-size-300:26px; + --spectrum-avatar-size-400:28px; + --spectrum-avatar-size-500:32px; + --spectrum-avatar-size-600:36px; + --spectrum-avatar-size-700:40px; + --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-width:832px; + --spectrum-alert-banner-top-to-workflow-icon:15px; + --spectrum-alert-banner-top-to-text:14px; + --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-rating-indicator-width:18px; + --spectrum-rating-indicator-to-icon:4px; + --spectrum-color-area-width:192px; + --spectrum-color-area-minimum-width:64px; + --spectrum-color-area-height:192px; + --spectrum-color-area-minimum-height:64px; + --spectrum-color-wheel-width:192px; + --spectrum-color-wheel-minimum-width:175px; + --spectrum-color-slider-length:192px; + --spectrum-color-slider-minimum-length:80px; + --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-m); + --spectrum-illustrated-message-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-width:296px; + --spectrum-coach-mark-minimum-width:296px; + --spectrum-coach-mark-maximum-width:380px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; + --spectrum-coach-mark-media-height:222px; + --spectrum-coach-mark-media-minimum-height:166px; + --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-compact-small:2px; + --spectrum-accordion-top-to-text-regular-small:5px; + --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-compact-medium:4px; + --spectrum-accordion-top-to-text-regular-medium:8px; + --spectrum-accordion-top-to-text-spacious-medium:12px; + --spectrum-accordion-top-to-text-compact-large:4px; + --spectrum-accordion-top-to-text-regular-large:9px; + --spectrum-accordion-top-to-text-spacious-large:12px; + --spectrum-accordion-top-to-text-compact-extra-large:5px; + --spectrum-accordion-top-to-text-regular-extra-large:9px; + --spectrum-accordion-top-to-text-spacious-extra-large:13px; + --spectrum-accordion-bottom-to-text-compact-small:2px; + --spectrum-accordion-bottom-to-text-regular-small:7px; + --spectrum-accordion-bottom-to-text-spacious-small:11px; + --spectrum-accordion-bottom-to-text-compact-medium:5px; + --spectrum-accordion-bottom-to-text-regular-medium:9px; + --spectrum-accordion-bottom-to-text-spacious-medium:13px; + --spectrum-accordion-bottom-to-text-compact-large:8px; + --spectrum-accordion-bottom-to-text-regular-large:11px; + --spectrum-accordion-bottom-to-text-spacious-large:16px; + --spectrum-accordion-bottom-to-text-compact-extra-large:8px; + --spectrum-accordion-bottom-to-text-regular-extra-large:12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; + --spectrum-accordion-minimum-width:200px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; + --spectrum-accordion-content-area-top-to-content:8px; + --spectrum-accordion-content-area-bottom-to-content:16px; + --spectrum-color-handle-size:16px; + --spectrum-color-handle-size-key-focus:32px; + --spectrum-table-column-header-row-top-to-text-small:8px; + --spectrum-table-column-header-row-top-to-text-medium:7px; + --spectrum-table-column-header-row-top-to-text-large:10px; + --spectrum-table-column-header-row-top-to-text-extra-large:13px; + --spectrum-table-column-header-row-bottom-to-text-small:9px; + --spectrum-table-column-header-row-bottom-to-text-medium:8px; + --spectrum-table-column-header-row-bottom-to-text-large:10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:13px; + --spectrum-table-row-height-small-regular:32px; + --spectrum-table-row-height-medium-regular:40px; + --spectrum-table-row-height-large-regular:48px; + --spectrum-table-row-height-extra-large-regular:56px; + --spectrum-table-row-height-small-spacious:40px; + --spectrum-table-row-height-medium-spacious:48px; + --spectrum-table-row-height-large-spacious:56px; + --spectrum-table-row-height-extra-large-spacious:64px; + --spectrum-table-row-top-to-text-small-regular:8px; + --spectrum-table-row-top-to-text-medium-regular:11px; + --spectrum-table-row-top-to-text-large-regular:14px; + --spectrum-table-row-top-to-text-extra-large-regular:17px; + --spectrum-table-row-bottom-to-text-small-regular:9px; + --spectrum-table-row-bottom-to-text-medium-regular:12px; + --spectrum-table-row-bottom-to-text-large-regular:14px; + --spectrum-table-row-bottom-to-text-extra-large-regular:17px; + --spectrum-table-row-top-to-text-small-spacious:12px; + --spectrum-table-row-top-to-text-medium-spacious:15px; + --spectrum-table-row-top-to-text-large-spacious:18px; + --spectrum-table-row-top-to-text-extra-large-spacious:21px; + --spectrum-table-row-bottom-to-text-small-spacious:13px; + --spectrum-table-row-bottom-to-text-medium-spacious:16px; + --spectrum-table-row-bottom-to-text-large-spacious:18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; + --spectrum-table-edge-to-content:16px; + --spectrum-table-checkbox-to-text:24px; + --spectrum-table-header-row-checkbox-to-top-small:10px; + --spectrum-table-header-row-checkbox-to-top-medium:9px; + --spectrum-table-header-row-checkbox-to-top-large:12px; + --spectrum-table-header-row-checkbox-to-top-extra-large:15px; + --spectrum-table-row-checkbox-to-top-small-compact:6px; + --spectrum-table-row-checkbox-to-top-small-regular:10px; + --spectrum-table-row-checkbox-to-top-small-spacious:14px; + --spectrum-table-row-checkbox-to-top-medium-compact:9px; + --spectrum-table-row-checkbox-to-top-medium-regular:13px; + --spectrum-table-row-checkbox-to-top-medium-spacious:17px; + --spectrum-table-row-checkbox-to-top-large-compact:12px; + --spectrum-table-row-checkbox-to-top-large-regular:16px; + --spectrum-table-row-checkbox-to-top-large-spacious:20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:23px; + --spectrum-table-section-header-row-height-small:24px; + --spectrum-table-section-header-row-height-medium:32px; + --spectrum-table-section-header-row-height-large:40px; + --spectrum-table-section-header-row-height-extra-large:48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:10px; + --spectrum-tab-item-to-tab-item-horizontal-small:21px; + --spectrum-tab-item-to-tab-item-horizontal-medium:24px; + --spectrum-tab-item-to-tab-item-horizontal-large:27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:30px; + --spectrum-tab-item-to-tab-item-vertical-small:4px; + --spectrum-tab-item-to-tab-item-vertical-medium:4px; + --spectrum-tab-item-to-tab-item-vertical-large:5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:5px; + --spectrum-tab-item-start-to-edge-small:12px; + --spectrum-tab-item-start-to-edge-medium:12px; + --spectrum-tab-item-start-to-edge-large:13px; + --spectrum-tab-item-start-to-edge-extra-large:13px; + --spectrum-tab-item-top-to-text-small:11px; + --spectrum-tab-item-bottom-to-text-small:12px; + --spectrum-tab-item-top-to-text-medium:14px; + --spectrum-tab-item-bottom-to-text-medium:14px; + --spectrum-tab-item-top-to-text-large:16px; + --spectrum-tab-item-bottom-to-text-large:18px; + --spectrum-tab-item-top-to-text-extra-large:19px; + --spectrum-tab-item-bottom-to-text-extra-large:20px; + --spectrum-tab-item-top-to-text-compact-small:4px; + --spectrum-tab-item-bottom-to-text-compact-small:5px; + --spectrum-tab-item-top-to-text-compact-medium:6px; + --spectrum-tab-item-bottom-to-text-compact-medium:8px; + --spectrum-tab-item-top-to-text-compact-large:10px; + --spectrum-tab-item-bottom-to-text-compact-large:12px; + --spectrum-tab-item-top-to-text-compact-extra-large:12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:13px; + --spectrum-tab-item-top-to-workflow-icon-small:13px; + --spectrum-tab-item-top-to-workflow-icon-medium:15px; + --spectrum-tab-item-top-to-workflow-icon-large:17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:11px; + --spectrum-tab-item-focus-indicator-gap-small:7px; + --spectrum-tab-item-focus-indicator-gap-medium:8px; + --spectrum-tab-item-focus-indicator-gap-large:9px; + --spectrum-tab-item-focus-indicator-gap-extra-large:10px; + --spectrum-side-navigation-width:192px; + --spectrum-side-navigation-minimum-width:160px; + --spectrum-side-navigation-maximum-width:240px; + --spectrum-side-navigation-second-level-edge-to-text:24px; + --spectrum-side-navigation-third-level-edge-to-text:36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; + --spectrum-side-navigation-item-to-item:4px; + --spectrum-side-navigation-item-to-header:24px; + --spectrum-side-navigation-header-to-item:8px; + --spectrum-side-navigation-bottom-to-text:8px; + --spectrum-tray-top-to-content-area:4px; + --spectrum-text-to-visual-50:6px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:10px; + --spectrum-text-to-control-75:9px; + --spectrum-text-to-control-100:10px; + --spectrum-text-to-control-200:11px; + --spectrum-text-to-control-300:13px; + --spectrum-component-height-50:20px; + --spectrum-component-height-75:24px; + --spectrum-component-height-100:32px; + --spectrum-component-height-200:40px; + --spectrum-component-height-300:48px; + --spectrum-component-height-400:56px; + --spectrum-component-height-500:64px; + --spectrum-component-pill-edge-to-visual-75:10px; + --spectrum-component-pill-edge-to-visual-100:14px; + --spectrum-component-pill-edge-to-visual-200:18px; + --spectrum-component-pill-edge-to-visual-300:21px; + --spectrum-component-pill-edge-to-visual-only-75:4px; + --spectrum-component-pill-edge-to-visual-only-100:7px; + --spectrum-component-pill-edge-to-visual-only-200:10px; + --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-text-75:12px; + --spectrum-component-pill-edge-to-text-100:16px; + --spectrum-component-pill-edge-to-text-200:20px; + --spectrum-component-pill-edge-to-text-300:24px; + --spectrum-component-edge-to-visual-50:6px; + --spectrum-component-edge-to-visual-75:7px; + --spectrum-component-edge-to-visual-100:10px; + --spectrum-component-edge-to-visual-200:13px; + --spectrum-component-edge-to-visual-300:15px; + --spectrum-component-edge-to-visual-only-50:3px; + --spectrum-component-edge-to-visual-only-75:4px; + --spectrum-component-edge-to-visual-only-100:7px; + --spectrum-component-edge-to-visual-only-200:10px; + --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-text-50:8px; + --spectrum-component-edge-to-text-75:9px; + --spectrum-component-edge-to-text-100:12px; + --spectrum-component-edge-to-text-200:15px; + --spectrum-component-edge-to-text-300:18px; + --spectrum-component-top-to-workflow-icon-50:3px; + --spectrum-component-top-to-workflow-icon-75:4px; + --spectrum-component-top-to-workflow-icon-100:7px; + --spectrum-component-top-to-workflow-icon-200:10px; + --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-text-50:3px; + --spectrum-component-top-to-text-75:4px; + --spectrum-component-top-to-text-100:6px; + --spectrum-component-top-to-text-200:9px; + --spectrum-component-top-to-text-300:12px; + --spectrum-component-bottom-to-text-50:3px; + --spectrum-component-bottom-to-text-75:5px; + --spectrum-component-bottom-to-text-100:9px; + --spectrum-component-bottom-to-text-200:11px; + --spectrum-component-bottom-to-text-300:14px; + --spectrum-component-to-menu-small:6px; + --spectrum-component-to-menu-medium:6px; + --spectrum-component-to-menu-large:7px; + --spectrum-component-to-menu-extra-large:8px; + --spectrum-field-edge-to-disclosure-icon-75:7px; + --spectrum-field-edge-to-disclosure-icon-100:11px; + --spectrum-field-edge-to-disclosure-icon-200:14px; + --spectrum-field-edge-to-disclosure-icon-300:17px; + --spectrum-field-end-edge-to-disclosure-icon-75:7px; + --spectrum-field-end-edge-to-disclosure-icon-100:11px; + --spectrum-field-end-edge-to-disclosure-icon-200:14px; + --spectrum-field-end-edge-to-disclosure-icon-300:17px; + --spectrum-field-top-to-disclosure-icon-75:7px; + --spectrum-field-top-to-disclosure-icon-100:11px; + --spectrum-field-top-to-disclosure-icon-200:14px; + --spectrum-field-top-to-disclosure-icon-300:17px; + --spectrum-field-top-to-alert-icon-small:4px; + --spectrum-field-top-to-alert-icon-medium:7px; + --spectrum-field-top-to-alert-icon-large:10px; + --spectrum-field-top-to-alert-icon-extra-large:13px; + --spectrum-field-top-to-validation-icon-small:7px; + --spectrum-field-top-to-validation-icon-medium:11px; + --spectrum-field-top-to-validation-icon-large:14px; + --spectrum-field-top-to-validation-icon-extra-large:17px; + --spectrum-field-top-to-progress-circle-small:4px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:12px; + --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-edge-to-alert-icon-small:9px; + --spectrum-field-edge-to-alert-icon-medium:12px; + --spectrum-field-edge-to-alert-icon-large:15px; + --spectrum-field-edge-to-alert-icon-extra-large:18px; + --spectrum-field-edge-to-validation-icon-small:9px; + --spectrum-field-edge-to-validation-icon-medium:12px; + --spectrum-field-edge-to-validation-icon-large:15px; + --spectrum-field-edge-to-validation-icon-extra-large:18px; + --spectrum-field-text-to-alert-icon-small:8px; + --spectrum-field-text-to-alert-icon-medium:12px; + --spectrum-field-text-to-alert-icon-large:15px; + --spectrum-field-text-to-alert-icon-extra-large:18px; + --spectrum-field-text-to-validation-icon-small:8px; + --spectrum-field-text-to-validation-icon-medium:12px; + --spectrum-field-text-to-validation-icon-large:15px; + --spectrum-field-text-to-validation-icon-extra-large:18px; + --spectrum-field-width:192px; + --spectrum-character-count-to-field-quiet-small:-3px; + --spectrum-character-count-to-field-quiet-medium:-3px; + --spectrum-character-count-to-field-quiet-large:-3px; + --spectrum-character-count-to-field-quiet-extra-large:-4px; + --spectrum-side-label-character-count-to-field:12px; + --spectrum-side-label-character-count-top-margin-small:4px; + --spectrum-side-label-character-count-top-margin-medium:8px; + --spectrum-side-label-character-count-top-margin-large:11px; + --spectrum-side-label-character-count-top-margin-extra-large:14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-small:6px; + --spectrum-navigational-indicator-top-to-back-icon-medium:9px; + --spectrum-navigational-indicator-top-to-back-icon-large:12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; + --spectrum-color-control-track-width:24px; + --spectrum-font-size-50:11px; + --spectrum-font-size-75:12px; + --spectrum-font-size-100:14px; + --spectrum-font-size-200:16px; + --spectrum-font-size-300:18px; + --spectrum-font-size-400:20px; + --spectrum-font-size-500:22px; + --spectrum-font-size-600:25px; + --spectrum-font-size-700:28px; + --spectrum-font-size-800:32px; + --spectrum-font-size-900:36px; + --spectrum-font-size-1000:40px; + --spectrum-font-size-1100:45px; + --spectrum-font-size-1200:50px; + --spectrum-font-size-1300:60px; /* edge-to-visual-only is used for icon-only buttons */ - --spectrum-edge-to-visual-only-75: 4px; - --spectrum-edge-to-visual-only-100: 7px; - --spectrum-edge-to-visual-only-200: 10px; - --spectrum-edge-to-visual-only-300: 13px; - - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - - --spectrum-icon-chevron-size-50: 6px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-corner-radius-75: 2px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; + --spectrum-edge-to-visual-only-75:4px; + --spectrum-edge-to-visual-only-100:7px; + --spectrum-edge-to-visual-only-200:10px; + --spectrum-edge-to-visual-only-300:13px; + + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-well-padding:var(--spectrum-spacing-300); + --spectrum-well-margin-top:var(--spectrum-spacing-75); + --spectrum-well-min-width:240px; + --spectrum-well-border-radius:var(--spectrum-spacing-75); + + --spectrum-icon-chevron-size-50:6px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:23px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:29px; + --spectrum-switch-control-width-extra-large:33px; + --spectrum-switch-control-height-small:12px; + --spectrum-switch-control-height-medium:14px; + --spectrum-switch-control-height-large:16px; + --spectrum-switch-control-height-extra-large:18px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:8px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; } -.spectrum--express.spectrum--dark, -.spectrum--express.spectrum--darkest { +.spectrum--express.spectrum--dark,.spectrum--express.spectrum--darkest{ /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-900-rgb - ); /* var(--spectrum-accent-color-900);*/ - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); -} -.spectrum--express.spectrum--large { - --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; - - --spectrum-assetcard-focus-ring-border-radius: 12px; - --spectrum-checkbox-control-size-small: 18px; - --spectrum-checkbox-control-size-medium: 20px; - --spectrum-checkbox-control-size-large: 22px; - --spectrum-checkbox-control-size-extra-large: 26px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 10px; - --spectrum-checkbox-top-to-control-large: 14px; - --spectrum-checkbox-top-to-control-extra-large: 17px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 18px; - --spectrum-switch-control-height-medium: 20px; - --spectrum-switch-control-height-large: 22px; - --spectrum-switch-control-height-extra-large: 26px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 10px; - --spectrum-switch-top-to-control-large: 14px; - --spectrum-switch-top-to-control-extra-large: 17px; - --spectrum-radio-button-control-size-small: 18px; - --spectrum-radio-button-control-size-medium: 20px; - --spectrum-radio-button-control-size-large: 22px; - --spectrum-radio-button-control-size-extra-large: 26px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 10px; - --spectrum-radio-button-top-to-control-large: 14px; - --spectrum-radio-button-top-to-control-extra-large: 17px; - --spectrum-slider-control-height-small: 22px; - --spectrum-slider-control-height-medium: 24px; - --spectrum-slider-control-height-large: 28px; - --spectrum-slider-control-height-extra-large: 30px; - --spectrum-slider-handle-size-small: 22px; - --spectrum-slider-handle-size-medium: 24px; - --spectrum-slider-handle-size-large: 28px; - --spectrum-slider-handle-size-extra-large: 30px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 4px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 12px; - --spectrum-slider-bottom-to-handle-extra-large: 15px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 16px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); +} +.spectrum--express.spectrum--large{ + --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; + --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + + --spectrum-dialog-confirm-border-radius:8px; + + --spectrum-dial-border-radius:15px; + + --spectrum-assetcard-focus-ring-border-radius:12px; + --spectrum-checkbox-control-size-small:18px; + --spectrum-checkbox-control-size-medium:20px; + --spectrum-checkbox-control-size-large:22px; + --spectrum-checkbox-control-size-extra-large:26px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:10px; + --spectrum-checkbox-top-to-control-large:14px; + --spectrum-checkbox-top-to-control-extra-large:17px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:18px; + --spectrum-switch-control-height-medium:20px; + --spectrum-switch-control-height-large:22px; + --spectrum-switch-control-height-extra-large:26px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:10px; + --spectrum-switch-top-to-control-large:14px; + --spectrum-switch-top-to-control-extra-large:17px; + --spectrum-radio-button-control-size-small:18px; + --spectrum-radio-button-control-size-medium:20px; + --spectrum-radio-button-control-size-large:22px; + --spectrum-radio-button-control-size-extra-large:26px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:10px; + --spectrum-radio-button-top-to-control-large:14px; + --spectrum-radio-button-top-to-control-extra-large:17px; + --spectrum-slider-control-height-small:22px; + --spectrum-slider-control-height-medium:24px; + --spectrum-slider-control-height-large:28px; + --spectrum-slider-control-height-extra-large:30px; + --spectrum-slider-handle-size-small:22px; + --spectrum-slider-handle-size-medium:24px; + --spectrum-slider-handle-size-large:28px; + --spectrum-slider-handle-size-extra-large:30px; + --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); + --spectrum-slider-bottom-to-handle-small:4px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:12px; + --spectrum-slider-bottom-to-handle-extra-large:15px; + --spectrum-corner-radius-75:4px; + --spectrum-corner-radius-100:8px; + --spectrum-corner-radius-200:16px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:4px; + --spectrum-drop-shadow-blur:16px; } .spectrum--express.spectrum--light, -.spectrum--express.spectrum--lightest { +.spectrum--express.spectrum--lightest{ /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-indigo-800-rgb - ); /* var(--spectrum-accent-color-800);*/ - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); -} -.spectrum--express.spectrum--medium { - --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - - --spectrum-dialog-confirm-border-radius: 6px; + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-800-rgb); /* var(--spectrum-accent-color-800);*/ + --spectrum-well-border-color:rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; - --spectrum-checkbox-control-size-small: 14px; - --spectrum-checkbox-control-size-medium: 16px; - --spectrum-checkbox-control-size-large: 18px; - --spectrum-checkbox-control-size-extra-large: 20px; - --spectrum-checkbox-top-to-control-small: 5px; - --spectrum-checkbox-top-to-control-medium: 8px; - --spectrum-checkbox-top-to-control-large: 11px; - --spectrum-checkbox-top-to-control-extra-large: 14px; - --spectrum-switch-control-width-small: 25px; - --spectrum-switch-control-width-medium: 28px; - --spectrum-switch-control-width-large: 32px; - --spectrum-switch-control-width-extra-large: 35px; - --spectrum-switch-control-height-small: 14px; - --spectrum-switch-control-height-medium: 16px; - --spectrum-switch-control-height-large: 18px; - --spectrum-switch-control-height-extra-large: 20px; - --spectrum-switch-top-to-control-small: 5px; - --spectrum-switch-top-to-control-medium: 8px; - --spectrum-switch-top-to-control-large: 11px; - --spectrum-switch-top-to-control-extra-large: 14px; - --spectrum-radio-button-control-size-small: 14px; - --spectrum-radio-button-control-size-medium: 16px; - --spectrum-radio-button-control-size-large: 18px; - --spectrum-radio-button-control-size-extra-large: 20px; - --spectrum-radio-button-top-to-control-small: 5px; - --spectrum-radio-button-top-to-control-medium: 8px; - --spectrum-radio-button-top-to-control-large: 11px; - --spectrum-radio-button-top-to-control-extra-large: 14px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 24px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 24px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 3px; - --spectrum-slider-bottom-to-handle-medium: 6px; - --spectrum-slider-bottom-to-handle-large: 9px; - --spectrum-slider-bottom-to-handle-extra-large: 12px; - --spectrum-corner-radius-75: 3px; - --spectrum-corner-radius-100: 6px; - --spectrum-corner-radius-200: 12px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-900); +} +.spectrum--express.spectrum--medium{ + --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + + --spectrum-dialog-confirm-border-radius:6px; + + --spectrum-dial-border-radius:12px; + + --spectrum-assetcard-focus-ring-border-radius:10px; + --spectrum-checkbox-control-size-small:14px; + --spectrum-checkbox-control-size-medium:16px; + --spectrum-checkbox-control-size-large:18px; + --spectrum-checkbox-control-size-extra-large:20px; + --spectrum-checkbox-top-to-control-small:5px; + --spectrum-checkbox-top-to-control-medium:8px; + --spectrum-checkbox-top-to-control-large:11px; + --spectrum-checkbox-top-to-control-extra-large:14px; + --spectrum-switch-control-width-small:25px; + --spectrum-switch-control-width-medium:28px; + --spectrum-switch-control-width-large:32px; + --spectrum-switch-control-width-extra-large:35px; + --spectrum-switch-control-height-small:14px; + --spectrum-switch-control-height-medium:16px; + --spectrum-switch-control-height-large:18px; + --spectrum-switch-control-height-extra-large:20px; + --spectrum-switch-top-to-control-small:5px; + --spectrum-switch-top-to-control-medium:8px; + --spectrum-switch-top-to-control-large:11px; + --spectrum-switch-top-to-control-extra-large:14px; + --spectrum-radio-button-control-size-small:14px; + --spectrum-radio-button-control-size-medium:16px; + --spectrum-radio-button-control-size-large:18px; + --spectrum-radio-button-control-size-extra-large:20px; + --spectrum-radio-button-top-to-control-small:5px; + --spectrum-radio-button-top-to-control-medium:8px; + --spectrum-radio-button-top-to-control-large:11px; + --spectrum-radio-button-top-to-control-extra-large:14px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:24px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:24px; + --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); + --spectrum-slider-bottom-to-handle-small:3px; + --spectrum-slider-bottom-to-handle-medium:6px; + --spectrum-slider-bottom-to-handle-large:9px; + --spectrum-slider-bottom-to-handle-extra-large:12px; + --spectrum-corner-radius-75:3px; + --spectrum-corner-radius-100:6px; + --spectrum-corner-radius-200:12px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:4px; + --spectrum-drop-shadow-blur:16px; } -.spectrum--express { - --system: express; - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-slider-track-thickness: 4px; - --spectrum-slider-handle-gap: 0px; - --spectrum-picker-border-width: 0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px; - --spectrum-in-field-button-edge-to-fill: 4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px; - --spectrum-border-width-100: 2px; - --spectrum-accent-color-100: var(--spectrum-indigo-100); - --spectrum-accent-color-200: var(--spectrum-indigo-200); - --spectrum-accent-color-300: var(--spectrum-indigo-300); - --spectrum-accent-color-400: var(--spectrum-indigo-400); - --spectrum-accent-color-500: var(--spectrum-indigo-500); - --spectrum-accent-color-600: var(--spectrum-indigo-600); - --spectrum-accent-color-700: var(--spectrum-indigo-700); - --spectrum-accent-color-800: var(--spectrum-indigo-800); - --spectrum-accent-color-900: var(--spectrum-indigo-900); - --spectrum-accent-color-1000: var(--spectrum-indigo-1000); - --spectrum-accent-color-1100: var(--spectrum-indigo-1100); - --spectrum-accent-color-1200: var(--spectrum-indigo-1200); - --spectrum-accent-color-1300: var(--spectrum-indigo-1300); - --spectrum-accent-color-1400: var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); +.spectrum--express{ + --system:express; + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); + --spectrum-slider-track-thickness:4px; + --spectrum-slider-handle-gap:0px; + --spectrum-picker-border-width:0; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px; + --spectrum-in-field-button-edge-to-fill:4px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:1px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px; + --spectrum-border-width-100:2px; + --spectrum-accent-color-100:var(--spectrum-indigo-100); + --spectrum-accent-color-200:var(--spectrum-indigo-200); + --spectrum-accent-color-300:var(--spectrum-indigo-300); + --spectrum-accent-color-400:var(--spectrum-indigo-400); + --spectrum-accent-color-500:var(--spectrum-indigo-500); + --spectrum-accent-color-600:var(--spectrum-indigo-600); + --spectrum-accent-color-700:var(--spectrum-indigo-700); + --spectrum-accent-color-800:var(--spectrum-indigo-800); + --spectrum-accent-color-900:var(--spectrum-indigo-900); + --spectrum-accent-color-1000:var(--spectrum-indigo-1000); + --spectrum-accent-color-1100:var(--spectrum-indigo-1100); + --spectrum-accent-color-1200:var(--spectrum-indigo-1200); + --spectrum-accent-color-1300:var(--spectrum-indigo-1300); + --spectrum-accent-color-1400:var(--spectrum-indigo-1400); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight); } diff --git a/tokens/project.json b/tokens/project.json index 9da2006427a..33694398b5e 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -20,7 +20,6 @@ "postcss ./custom-spectrum/*.css --dir ./dist/css/spectrum/", "postcss ./dist/css/*.css ./dist/css/spectrum/*.css ./dist/css/express/*.css --replace", "cat ./dist/css/*.css ./dist/css/spectrum/*.css ./dist/css/express/*.css | postcss --output ./dist/index.css", - "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write dist/", "find dist -type f -empty -delete" ], "cwd": "{projectRoot}", diff --git a/tools/component-builder-simple/css/plugins/postcss-transform-logical.js b/tools/component-builder-simple/css/plugins/postcss-transform-logical.js deleted file mode 100644 index 411e73ee861..00000000000 --- a/tools/component-builder-simple/css/plugins/postcss-transform-logical.js +++ /dev/null @@ -1,111 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -const postcss = require("postcss"); -const { parse } = require("postcss-values-parser"); - -const selectorParser = require("postcss-selector-parser"); -const addRTL = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="rtl"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const addLTR = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="ltr"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const matrix = "matrix(-1, 0, 0, 1, 0, 0)"; - -module.exports = postcss.plugin("postcss-transform-logical", function (opts) { - opts = opts || {}; - - return function (root, result) { - root.walkRules((rule, ruleIndex) => { - rule.walkDecls((decl) => { - if (decl.prop === "transform") { - let value; - try { - value = parse(decl.value); - } catch (err) { - console.warn( - "postcss-transform-logical: could not parse %s", - decl.value - ); - } - - if (value && value.nodes[0].value === "logical") { - // Drop logical - value.nodes[0].remove(); - - let originalRotation = null; - let rotationNode = null; - value.walkFuncs((node, index, nodes) => { - if (node.name === "rotate") { - originalRotation = node.nodes[0].value; - rotationNode = node; - } else if (node.name === "matrix") { - throw new Error( - "postcss-transform-logical: logical flips cannot be performed on transforms that use matrix()" - ); - } - }); - - if (rotationNode !== null) { - // Ignore 0 deg initial rotations for LTR; this means we meant for it to be standard rotation for LTR - if (parseInt(originalRotation, 10) !== 0) { - let ltrSelector = selectorParser(addLTR).processSync( - rule.selector - ); - let ltrRule = postcss.parse( - `${ltrSelector} { transform: ${value}; }` - ); - root.insertBefore(rule, ltrRule); - - // Use the same rotation, but flip horizontal - let rtlSelector = selectorParser(addRTL).processSync( - rule.selector - ); - let rtlRule = postcss.parse( - `${rtlSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } else { - // Drop the unnecessary rotation - rotationNode.remove(); - - // Add direction to all matching selectors - let newSelector = selectorParser(addRTL).processSync( - rule.selector - ); - - // Just flip horizontal - let rtlRule = postcss.parse( - `${newSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } - - // Remove original declaration - decl.remove(); - } - } - } - }); - }); - }; -}); diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index d3599f378e4..18121e247dc 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -25,7 +25,6 @@ function getProcessors({ noFlatVariables = false, noSelectors = false, keepComme noFlatVariables, noSelectors, }), - require("./plugins/postcss-transform-logical")(), require("./plugins/postcss-custom-properties-passthrough")(), require("postcss-calc"), require("postcss-dropunusedvars")({ fix: false }), diff --git a/tools/component-builder/css/plugins/postcss-transform-logical.js b/tools/component-builder/css/plugins/postcss-transform-logical.js deleted file mode 100644 index 411e73ee861..00000000000 --- a/tools/component-builder/css/plugins/postcss-transform-logical.js +++ /dev/null @@ -1,111 +0,0 @@ -/*! -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -const postcss = require("postcss"); -const { parse } = require("postcss-values-parser"); - -const selectorParser = require("postcss-selector-parser"); -const addRTL = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="rtl"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const addLTR = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="ltr"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const matrix = "matrix(-1, 0, 0, 1, 0, 0)"; - -module.exports = postcss.plugin("postcss-transform-logical", function (opts) { - opts = opts || {}; - - return function (root, result) { - root.walkRules((rule, ruleIndex) => { - rule.walkDecls((decl) => { - if (decl.prop === "transform") { - let value; - try { - value = parse(decl.value); - } catch (err) { - console.warn( - "postcss-transform-logical: could not parse %s", - decl.value - ); - } - - if (value && value.nodes[0].value === "logical") { - // Drop logical - value.nodes[0].remove(); - - let originalRotation = null; - let rotationNode = null; - value.walkFuncs((node, index, nodes) => { - if (node.name === "rotate") { - originalRotation = node.nodes[0].value; - rotationNode = node; - } else if (node.name === "matrix") { - throw new Error( - "postcss-transform-logical: logical flips cannot be performed on transforms that use matrix()" - ); - } - }); - - if (rotationNode !== null) { - // Ignore 0 deg initial rotations for LTR; this means we meant for it to be standard rotation for LTR - if (parseInt(originalRotation, 10) !== 0) { - let ltrSelector = selectorParser(addLTR).processSync( - rule.selector - ); - let ltrRule = postcss.parse( - `${ltrSelector} { transform: ${value}; }` - ); - root.insertBefore(rule, ltrRule); - - // Use the same rotation, but flip horizontal - let rtlSelector = selectorParser(addRTL).processSync( - rule.selector - ); - let rtlRule = postcss.parse( - `${rtlSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } else { - // Drop the unnecessary rotation - rotationNode.remove(); - - // Add direction to all matching selectors - let newSelector = selectorParser(addRTL).processSync( - rule.selector - ); - - // Just flip horizontal - let rtlRule = postcss.parse( - `${newSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } - - // Remove original declaration - decl.remove(); - } - } - } - }); - }); - }; -}); diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js index c5952ff1ca9..df053288e35 100644 --- a/tools/component-builder/css/processors.js +++ b/tools/component-builder/css/processors.js @@ -46,7 +46,6 @@ function getProcessors( require("postcss-extend"), diff ? require("./plugins/postcss-varsonly")() : null, require("postcss-logical")(), - require("./plugins/postcss-transform-logical")(), require("postcss-dir-pseudo-class")(), require("./plugins/postcss-custom-properties-passthrough")(), require("postcss-calc"),