diff --git a/.gitignore b/.gitignore
index a49e238093..1ca7c861d9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,7 +37,7 @@ TESTS.xml
/test/benchmark/**/*.js
/test/benchmark/**/*.js.map
/test/benchmark/**/*.d.ts
-/test/visual/screenshots-current/ci/**/*.png
+/test/visual/screenshots-current/**/*.png
/test/visual/**/local/
!test/visual/**/*.js
diff --git a/.storybook/config.js b/.storybook/config.js
index bcdc68d8e6..7f9ba0b4ba 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -2,7 +2,7 @@ import { configure, addDecorator } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
-import '../packages/styles/all-medium-light.css';
+import '../packages/styles/all-medium-lightest.css';
// NOTE: Because we use CustomElement registry, we will need to refresh the whole iframe on
// HMR of our web components to allow us to register the new versions
diff --git a/package.json b/package.json
index 15d7e527ae..fa32ff36de 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
},
"devDependencies": {
"@adobe/es-modules-middleware": "~1.1.0",
- "@adobe/spectrum-css": "^2.13.0",
+ "@adobe/spectrum-css": "^2.15.1",
"@babel/core": "^7.6.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@commitlint/cli": "^8.2.0",
diff --git a/packages/banner/src/spectrum-banner.css b/packages/banner/src/spectrum-banner.css
index 3d7d1c21b9..4d2506022f 100644
--- a/packages/banner/src/spectrum-banner.css
+++ b/packages/banner/src/spectrum-banner.css
@@ -13,16 +13,31 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
/* .spectrum-Banner */
display: inline-block;
- border-radius: var(--spectrum-banner-border-radius, 8px);
- padding: var(--spectrum-banner-padding-y, 4px)
- var(--spectrum-banner-padding-x, 8px);
+ border-radius: var(
+ --spectrum-banner-border-radius,
+ var(--spectrum-global-dimension-static-size-100)
+ );
+ padding: var(
+ --spectrum-banner-padding-y,
+ var(--spectrum-global-dimension-static-size-50)
+ )
+ var(
+ --spectrum-banner-padding-x,
+ var(--spectrum-global-dimension-static-size-100)
+ );
font-size: var(
--spectrum-banner-text-size,
- var(--spectrum-global-dimension-size-150)
+ var(--spectrum-global-dimension-font-size-75)
+ );
+ line-height: var(
+ --spectrum-banner-text-line-height,
+ var(--spectrum-alias-heading-text-line-height)
);
- line-height: var(--spectrum-banner-text-line-height, 1.3);
/* .spectrum-Banner */
- color: var(--spectrum-banner-text-color, rgb(255, 255, 255));
+ color: var(
+ --spectrum-banner-text-color,
+ var(--spectrum-global-color-static-white)
+ );
}
#header {
/* .spectrum-Banner-header */
@@ -38,20 +53,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Banner--info */
background-color: var(
--spectrum-banner-info-background-color,
- var(--spectrum-global-color-blue-500)
+ var(--spectrum-semantic-informative-color-default)
);
}
:host([type='warning']) {
/* .spectrum-Banner--warning */
background-color: var(
--spectrum-banner-warning-background-color,
- var(--spectrum-global-color-orange-500)
+ var(--spectrum-semantic-notice-color-default)
);
}
:host([type='error']) {
/* .spectrum-Banner--error */
background-color: var(
--spectrum-banner-error-background-color,
- var(--spectrum-global-color-red-500)
+ var(--spectrum-semantic-negative-color-default)
);
}
diff --git a/packages/button/src/spectrum-action-button.css b/packages/button/src/spectrum-action-button.css
index 7596578afe..ca26ef5cdf 100644
--- a/packages/button/src/spectrum-action-button.css
+++ b/packages/button/src/spectrum-action-button.css
@@ -44,8 +44,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out;
text-decoration: none;
- font-family: adobe-clean, 'Source Sans Pro', -apple-system,
- BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-family: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro',
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.3;
@@ -57,7 +57,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
height: var(
--spectrum-actionbutton-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
min-width: var(
--spectrum-actionbutton-min-width,
@@ -68,20 +68,30 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-actionbutton-icon-padding-x,
var(--spectrum-global-dimension-size-85)
- ) - var(--spectrum-actionbutton-border-size, 1px)
+ ) -
+ var(
+ --spectrum-actionbutton-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
);
- border-width: var(--spectrum-actionbutton-border-size, 1px);
+ border-width: var(
+ --spectrum-actionbutton-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
border-radius: var(
--spectrum-actionbutton-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
font-size: var(
--spectrum-actionbutton-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-actionbutton-text-font-weight,
+ var(--spectrum-alias-body-text-font-weight)
);
- font-weight: var(--spectrum-actionbutton-text-font-weight, 400);
/* .spectrum-ActionButton,
* .spectrum-Tool */
background-color: var(
@@ -90,11 +100,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-actionbutton-border-color,
- var(--spectrum-global-color-gray-300)
+ var(--spectrum-alias-border-color)
);
color: var(
--spectrum-actionbutton-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
#button:focus {
@@ -119,15 +129,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
margin-top: -2px;
margin-bottom: -2px;
}
-#button:-moz-focusring {
- /* .spectrum-Button:-moz-focusring,
- * .spectrum-ActionButton:-moz-focusring,
- * .spectrum-LogicButton:-moz-focusring,
- * .spectrum-FieldButton:-moz-focusring,
- * .spectrum-ClearButton:-moz-focusring,
- * .spectrum-Tool:-moz-focusring */
- outline: 1px dotted ButtonText;
-}
:host([disabled]) #button {
/* .spectrum-Button:disabled,
* .spectrum-ActionButton:disabled,
@@ -149,7 +150,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
color: var(
--spectrum-actionbutton-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
::slotted([slot='icon']) {
@@ -166,7 +167,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Tool .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-icon-color)
);
}
slot[name='icon'] + #label {
@@ -195,14 +196,14 @@ slot[name='icon'] + #label {
50% -
var(
--spectrum-actionbutton-icon-size,
- var(--spectrum-global-dimension-size-225)
+ var(--spectrum-alias-workflow-icon-size)
) / 2
);
left: calc(
50% -
var(
--spectrum-actionbutton-icon-size,
- var(--spectrum-global-dimension-size-225)
+ var(--spectrum-alias-workflow-icon-size)
) / 2
);
}
@@ -236,7 +237,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool .spectrum-ActionButton-hold */
color: var(
--spectrum-actionbutton-hold-icon-color,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-icon-color)
);
}
#label {
@@ -246,6 +247,7 @@ slot[name='icon'] + #label {
-ms-grid-row-align: center;
align-self: center;
justify-self: center;
+ text-align: center;
width: 100%;
/* .spectrum-ActionButton-label */
white-space: nowrap;
@@ -260,30 +262,36 @@ slot[name='icon'] + #label {
:host([quiet]) #button {
/* .spectrum-ActionButton--quiet,
* .spectrum-Tool */
- border-width: var(--spectrum-actionbutton-quiet-border-size, 1px);
+ border-width: var(
+ --spectrum-actionbutton-quiet-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
border-radius: var(
--spectrum-actionbutton-quiet-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
font-size: var(
--spectrum-actionbutton-quiet-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-actionbutton-quiet-text-font-weight,
+ var(--spectrum-alias-body-text-font-weight)
);
- font-weight: var(--spectrum-actionbutton-quiet-text-font-weight, 400);
/* .spectrum-ActionButton--quiet,
* .spectrum-Tool */
background-color: var(
--spectrum-actionbutton-quiet-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-actionbutton-quiet-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-actionbutton-quiet-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
#button:hover {
@@ -295,12 +303,12 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-actionbutton-border-color-hover,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-border-color-hover)
);
box-shadow: none;
color: var(
--spectrum-actionbutton-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
#button:hover ::slotted([slot='icon']) {
@@ -308,7 +316,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool:hover .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
#button:hover #hold-affordance {
@@ -316,7 +324,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool:hover .spectrum-ActionButton-hold */
color: var(
--spectrum-actionbutton-hold-icon-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
#button:focus-visible {
@@ -328,17 +336,16 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-actionbutton-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-actionbutton-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
color: var(
--spectrum-actionbutton-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
#button:focus-visible ::slotted([slot='icon']) {
@@ -346,7 +353,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool.focus-ring .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-focus)
);
}
#button:focus-visible #hold-affordance {
@@ -354,7 +361,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool.focus-ring .spectrum-ActionButton-hold */
color: var(
--spectrum-actionbutton-hold-icon-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
#button:active {
@@ -371,7 +378,7 @@ slot[name='icon'] + #label {
box-shadow: none;
color: var(
--spectrum-actionbutton-text-color-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-down)
);
}
#button:active #hold-affordance {
@@ -379,7 +386,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool:active .spectrum-ActionButton-hold */
color: var(
--spectrum-actionbutton-hold-icon-color-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-down)
);
}
:host([disabled]) #button ::slotted([slot='icon']) {
@@ -388,7 +395,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool:disabled .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
:host([disabled]) #button #hold-affordance {
@@ -397,7 +404,7 @@ slot[name='icon'] + #label {
* .spectrum-Tool:disabled .spectrum-ActionButton-hold */
color: var(
--spectrum-actionbutton-hold-icon-color-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
:host([selected]) #button {
@@ -412,14 +419,14 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-text-color-selected,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
:host([selected]) #button ::slotted([slot='icon']) {
/* .spectrum-ActionButton.is-selected .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-selected,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-icon-color)
);
}
:host([selected]) #button:focus-visible {
@@ -430,18 +437,18 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-actionbutton-border-color-selected-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
color: var(
--spectrum-actionbutton-text-color-selected-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host([selected]) #button:focus-visible ::slotted([slot='icon']) {
/* .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-selected-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
:host([selected]) #button:hover {
@@ -456,14 +463,14 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-text-color-selected-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host([selected]) #button:hover ::slotted([slot='icon']) {
/* .spectrum-ActionButton.is-selected:hover .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-selected-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
:host([selected]) #button:active {
@@ -478,14 +485,14 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-text-color-selected-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-down)
);
}
:host([selected]) #button:active ::slotted([slot='icon']) {
/* .spectrum-ActionButton.is-selected:active .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-selected-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-down)
);
}
:host([selected][disabled]) #button {
@@ -501,7 +508,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-text-color-selected-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([selected][disabled]) #button ::slotted([slot='icon']) {
@@ -509,7 +516,7 @@ slot[name='icon'] + #label {
* .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon */
color: var(
--spectrum-actionbutton-icon-color-selected-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
:host([quiet]) #button:hover {
@@ -517,15 +524,15 @@ slot[name='icon'] + #label {
* .spectrum-Tool:hover */
background-color: var(
--spectrum-actionbutton-quiet-background-color-hover,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-actionbutton-quiet-border-color-hover,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-actionbutton-quiet-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
box-shadow: none;
}
@@ -534,21 +541,20 @@ slot[name='icon'] + #label {
* .spectrum-Tool.focus-ring */
background-color: var(
--spectrum-actionbutton-quiet-background-color-key-focus,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
- box-shadow: 0 0 0
- var(--spectrum-actionbutton-quiet-border-size-key-focus, 2px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-actionbutton-quiet-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
border-color: var(
--spectrum-actionbutton-quiet-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
color: var(
--spectrum-actionbutton-quiet-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host([quiet]) #button:active {
@@ -564,7 +570,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-quiet-text-color-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-down)
);
box-shadow: none;
}
@@ -574,15 +580,15 @@ slot[name='icon'] + #label {
* .spectrum-Tool:disabled */
background-color: var(
--spectrum-actionbutton-quiet-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-actionbutton-quiet-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-actionbutton-quiet-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([quiet][selected]) #button {
@@ -597,7 +603,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-quiet-text-color-selected,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
:host([quiet][selected]) #button:focus-visible {
@@ -608,11 +614,11 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-actionbutton-quiet-border-color-selected-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
color: var(
--spectrum-actionbutton-quiet-text-color-selected-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host([quiet][selected]) #button:hover {
@@ -627,7 +633,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-quiet-text-color-selected-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host([quiet][selected]) #button:active {
@@ -642,7 +648,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-quiet-text-color-selected-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-down)
);
}
:host([quiet][selected][disabled]) #button {
@@ -658,6 +664,6 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-actionbutton-quiet-text-color-selected-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
index b73d1d79d6..a5bb9e8dd1 100644
--- a/packages/button/src/spectrum-button.css
+++ b/packages/button/src/spectrum-button.css
@@ -44,8 +44,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out;
text-decoration: none;
- font-family: adobe-clean, 'Source Sans Pro', -apple-system,
- BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-family: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro',
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.3;
@@ -53,38 +53,45 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Button */
- border-width: var(--spectrum-button-primary-border-size, 2px);
+ border-width: var(
+ --spectrum-button-primary-border-size,
+ var(--spectrum-alias-border-size-thick)
+ );
border-style: solid;
border-radius: var(
--spectrum-button-primary-border-radius,
- var(--spectrum-global-dimension-size-200)
+ var(--spectrum-alias-border-radius-large)
);
min-height: var(
--spectrum-button-primary-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
height: auto;
- min-width: var(
- --spectrum-button-primary-min-width,
- var(--spectrum-button-cta-min-width)
- );
+ min-width: var(--spectrum-button-primary-min-width);
padding: var(--spectrum-global-dimension-size-50)
calc(
var(
--spectrum-button-primary-padding-x,
var(--spectrum-global-dimension-size-200)
- ) - var(--spectrum-button-primary-border-size, 2px)
+ ) -
+ var(
+ --spectrum-button-primary-border-size,
+ var(--spectrum-alias-border-size-thick)
+ )
);
padding-bottom: calc(var(--spectrum-global-dimension-size-50) + 0.5px);
padding-top: calc(var(--spectrum-global-dimension-size-50) - 0.5px);
font-size: var(
--spectrum-button-primary-text-size,
- var(--spectrum-global-dimension-font-size-150)
+ var(--spectrum-alias-pill-button-text-size)
+ );
+ font-weight: var(
+ --spectrum-button-primary-text-font-weight,
+ var(--spectrum-global-font-weight-bold)
);
- font-weight: var(--spectrum-button-primary-text-font-weight, 700);
}
#button:focus {
/* .spectrum-Button:focus,
@@ -108,15 +115,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
margin-top: -2px;
margin-bottom: -2px;
}
-#button:-moz-focusring {
- /* .spectrum-Button:-moz-focusring,
- * .spectrum-ActionButton:-moz-focusring,
- * .spectrum-LogicButton:-moz-focusring,
- * .spectrum-FieldButton:-moz-focusring,
- * .spectrum-ClearButton:-moz-focusring,
- * .spectrum-Tool:-moz-focusring */
- outline: 1px dotted ButtonText;
-}
:host([disabled]) #button {
/* .spectrum-Button:disabled,
* .spectrum-ActionButton:disabled,
@@ -166,6 +164,7 @@ slot[name='icon'] + #label {
-ms-grid-row-align: center;
align-self: center;
justify-self: center;
+ text-align: center;
width: 100%;
}
#label:empty {
@@ -175,9 +174,11 @@ slot[name='icon'] + #label {
}
#button:focus-visible {
/* .spectrum-Button.focus-ring */
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
- var(--spectrum-button-primary-border-color-key-focus, rgb(20, 115, 230));
+ box-shadow: 0 0 0 1px
+ var(
+ --spectrum-button-primary-border-color-key-focus,
+ var(--spectrum-semantic-cta-color-background-key-focus)
+ );
}
#button:active {
/* .spectrum-Button:active */
@@ -187,46 +188,61 @@ slot[name='icon'] + #label {
/* .spectrum-Button--cta */
background-color: var(
--spectrum-button-cta-background-color,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-default)
+ );
+ border-color: var(
+ --spectrum-button-cta-border-color,
+ var(--spectrum-semantic-cta-color-background-default)
+ );
+ color: var(
+ --spectrum-button-cta-text-color,
+ var(--spectrum-global-color-static-white)
);
- border-color: var(--spectrum-button-cta-border-color, rgb(20, 115, 230));
- color: var(--spectrum-button-cta-text-color, rgb(255, 255, 255));
}
:host([variant='cta']) #button:hover {
/* .spectrum-Button--cta:hover */
background-color: var(
--spectrum-button-cta-background-color-hover,
- rgb(13, 102, 208)
+ var(--spectrum-semantic-cta-color-background-hover)
);
border-color: var(
--spectrum-button-cta-border-color-hover,
- rgb(13, 102, 208)
+ var(--spectrum-semantic-cta-color-background-hover)
+ );
+ color: var(
+ --spectrum-button-cta-text-color-hover,
+ var(--spectrum-global-color-static-white)
);
- color: var(--spectrum-button-cta-text-color-hover, rgb(255, 255, 255));
}
:host([variant='cta']) #button:focus-visible {
/* .spectrum-Button--cta.focus-ring */
background-color: var(
--spectrum-button-cta-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-cta-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
+ );
+ color: var(
+ --spectrum-button-cta-text-color-key-focus,
+ var(--spectrum-global-color-static-white)
);
- color: var(--spectrum-button-cta-text-color-key-focus, rgb(255, 255, 255));
}
:host([variant='cta']) #button:active {
/* .spectrum-Button--cta:active */
background-color: var(
--spectrum-button-cta-background-color-down,
- rgb(13, 102, 208)
+ var(--spectrum-semantic-cta-color-background-down)
);
border-color: var(
--spectrum-button-cta-border-color-down,
- rgb(13, 102, 208)
+ var(--spectrum-semantic-cta-color-background-down)
+ );
+ color: var(
+ --spectrum-button-cta-text-color-down,
+ var(--spectrum-global-color-static-white)
);
- color: var(--spectrum-button-cta-text-color-down, rgb(255, 255, 255));
}
:host([variant='cta'][disabled]) #button {
/* .spectrum-Button--cta:disabled,
@@ -248,7 +264,7 @@ slot[name='icon'] + #label {
/* .spectrum-Button--primary */
background-color: var(
--spectrum-button-primary-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-primary-border-color,
@@ -278,15 +294,15 @@ slot[name='icon'] + #label {
/* .spectrum-Button--primary.focus-ring */
background-color: var(
--spectrum-button-primary-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-primary-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
color: var(
--spectrum-button-primary-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='primary']) #button:active {
@@ -324,7 +340,7 @@ slot[name='icon'] + #label {
/* .spectrum-Button--secondary */
background-color: var(
--spectrum-button-secondary-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-secondary-border-color,
@@ -354,15 +370,15 @@ slot[name='icon'] + #label {
/* .spectrum-Button--secondary.focus-ring */
background-color: var(
--spectrum-button-secondary-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-secondary-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
color: var(
--spectrum-button-secondary-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='secondary']) #button:active {
@@ -400,26 +416,26 @@ slot[name='icon'] + #label {
/* .spectrum-Button--warning */
background-color: var(
--spectrum-button-warning-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-warning-border-color,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-semantic-negative-color-text-small)
);
color: var(
--spectrum-button-warning-text-color,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-semantic-negative-color-text-small)
);
}
:host([variant='negative']) #button:hover {
/* .spectrum-Button--warning:hover */
background-color: var(
--spectrum-button-warning-background-color-hover,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-semantic-negative-color-text-small)
);
border-color: var(
--spectrum-button-warning-border-color-hover,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-semantic-negative-color-text-small)
);
color: var(
--spectrum-button-warning-text-color-hover,
@@ -430,15 +446,15 @@ slot[name='icon'] + #label {
/* .spectrum-Button--warning.focus-ring */
background-color: var(
--spectrum-button-warning-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-warning-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
color: var(
--spectrum-button-warning-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='negative']) #button:active {
@@ -476,26 +492,26 @@ slot[name='icon'] + #label {
/* .spectrum-Button--overBackground */
background-color: var(
--spectrum-button-over-background-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-over-background-border-color,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
color: var(
--spectrum-button-over-background-text-color,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='overBackground']) #button:hover {
/* .spectrum-Button--overBackground:hover */
background-color: var(
--spectrum-button-over-background-background-color-hover,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
border-color: var(
--spectrum-button-over-background-border-color-hover,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
color: inherit;
}
@@ -503,29 +519,28 @@ slot[name='icon'] + #label {
/* .spectrum-Button--overBackground.focus-ring */
background-color: var(
--spectrum-button-over-background-background-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
border-color: var(
--spectrum-button-over-background-border-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
color: inherit;
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-button-over-background-border-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='overBackground']) #button:active {
/* .spectrum-Button--overBackground:active */
background-color: var(
--spectrum-button-over-background-background-color-down,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
border-color: var(
--spectrum-button-over-background-border-color-down,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
color: inherit;
box-shadow: none;
@@ -539,7 +554,7 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-button-over-background-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-over-background-text-color-disabled,
@@ -551,15 +566,15 @@ slot[name='icon'] + #label {
* .spectrum-ClearButton--overBackground */
background-color: var(
--spectrum-button-quiet-over-background-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-over-background-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='overBackground'][quiet]) #button:hover {
@@ -571,11 +586,11 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-hover,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color-hover,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='overBackground'][quiet]) #button:focus-visible {
@@ -583,18 +598,17 @@ slot[name='icon'] + #label {
* .spectrum-ClearButton--overBackground.focus-ring */
background-color: var(
--spectrum-button-quiet-over-background-background-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
color: inherit;
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-button-quiet-over-background-border-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='overBackground'][quiet]) #button:active {
@@ -606,11 +620,11 @@ slot[name='icon'] + #label {
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-down,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color-down,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
box-shadow: none;
}
@@ -621,11 +635,11 @@ slot[name='icon'] + #label {
* .spectrum-ClearButton--overBackground.is-disabled */
background-color: var(
--spectrum-button-quiet-over-background-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color-disabled,
@@ -636,11 +650,11 @@ slot[name='icon'] + #label {
/* .spectrum-Button--primary.spectrum-Button--quiet */
background-color: var(
--spectrum-button-quiet-primary-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-primary-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-primary-text-color,
@@ -666,15 +680,15 @@ slot[name='icon'] + #label {
/* .spectrum-Button--primary.spectrum-Button--quiet.focus-ring */
background-color: var(
--spectrum-button-quiet-primary-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-quiet-primary-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
color: var(
--spectrum-button-quiet-primary-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='primary'][quiet]) #button:active {
@@ -697,11 +711,11 @@ slot[name='icon'] + #label {
* .spectrum-Button--primary.spectrum-Button--quiet.is-disabled */
background-color: var(
--spectrum-button-quiet-primary-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-primary-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-primary-text-color-disabled,
@@ -712,11 +726,11 @@ slot[name='icon'] + #label {
/* .spectrum-Button--secondary.spectrum-Button--quiet */
background-color: var(
--spectrum-button-quiet-secondary-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-secondary-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-secondary-text-color,
@@ -742,15 +756,15 @@ slot[name='icon'] + #label {
/* .spectrum-Button--secondary.spectrum-Button--quiet.focus-ring */
background-color: var(
--spectrum-button-quiet-secondary-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-quiet-secondary-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
color: var(
--spectrum-button-quiet-secondary-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='secondary'][quiet]) #button:active {
@@ -773,11 +787,11 @@ slot[name='icon'] + #label {
* .spectrum-Button--secondary.spectrum-Button--quiet.is-disabled */
background-color: var(
--spectrum-button-quiet-secondary-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-secondary-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-secondary-text-color-disabled,
@@ -788,15 +802,15 @@ slot[name='icon'] + #label {
/* .spectrum-Button--warning.spectrum-Button--quiet */
background-color: var(
--spectrum-button-quiet-warning-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-warning-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-warning-text-color,
- var(--spectrum-global-color-red-500)
+ var(--spectrum-semantic-negative-color-text-small)
);
}
:host([variant='negative'][quiet]) #button:hover {
@@ -811,22 +825,22 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-button-quiet-warning-text-color-hover,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-global-color-red-700)
);
}
:host([variant='negative'][quiet]) #button:focus-visible {
/* .spectrum-Button--warning.spectrum-Button--quiet.focus-ring */
background-color: var(
--spectrum-button-quiet-warning-background-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
border-color: var(
--spectrum-button-quiet-warning-border-color-key-focus,
- rgb(20, 115, 230)
+ var(--spectrum-semantic-cta-color-background-key-focus)
);
color: var(
--spectrum-button-quiet-warning-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([variant='negative'][quiet]) #button:active {
@@ -841,7 +855,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-button-quiet-warning-text-color-down,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-global-color-red-700)
);
}
:host([variant='negative'][quiet][disabled]) #button {
@@ -849,11 +863,11 @@ slot[name='icon'] + #label {
* .spectrum-Button--warning.spectrum-Button--quiet.is-disabled */
background-color: var(
--spectrum-button-quiet-warning-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-warning-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-warning-text-color-disabled,
diff --git a/packages/button/src/spectrum-clear-button.css b/packages/button/src/spectrum-clear-button.css
index 0977b93a20..405944931c 100644
--- a/packages/button/src/spectrum-clear-button.css
+++ b/packages/button/src/spectrum-clear-button.css
@@ -44,8 +44,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out;
text-decoration: none;
- font-family: adobe-clean, 'Source Sans Pro', -apple-system,
- BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-family: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro',
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.3;
@@ -55,11 +55,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
width: var(
--spectrum-clearbutton-medium-width,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
height: var(
--spectrum-clearbutton-medium-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
border-radius: 100%;
@@ -72,12 +72,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-ClearButton */
background-color: var(
--spectrum-clearbutton-medium-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-clearbutton-medium-icon-color,
- var(--spectrum-global-color-gray-600)
+ var(--spectrum-alias-icon-color)
);
}
#button:focus {
@@ -102,15 +102,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
margin-top: -2px;
margin-bottom: -2px;
}
-#button:-moz-focusring {
- /* .spectrum-Button:-moz-focusring,
- * .spectrum-ActionButton:-moz-focusring,
- * .spectrum-LogicButton:-moz-focusring,
- * .spectrum-FieldButton:-moz-focusring,
- * .spectrum-ClearButton:-moz-focusring,
- * .spectrum-Tool:-moz-focusring */
- outline: 1px dotted ButtonText;
-}
#button:disabled {
/* .spectrum-Button:disabled,
* .spectrum-ActionButton:disabled,
@@ -146,36 +137,36 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-ClearButton:hover */
background-color: var(
--spectrum-clearbutton-medium-background-color-hover,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-clearbutton-medium-icon-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
#button:active {
/* .spectrum-ClearButton:active */
background-color: var(
--spectrum-clearbutton-medium-background-color-down,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-clearbutton-medium-icon-color-down,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-down)
);
}
#button:focus-visible {
/* .spectrum-ClearButton.focus-ring */
background-color: var(
--spectrum-clearbutton-medium-background-color-key-focus,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-clearbutton-medium-icon-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-focus)
);
}
#button:disabled,
@@ -184,12 +175,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ClearButton.is-disabled */
background-color: var(
--spectrum-clearbutton-medium-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-clearbutton-medium-icon-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-icon-color-disabled)
);
}
.spectrum-ClearButton--overBackground {
@@ -197,15 +188,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ClearButton--overBackground */
background-color: var(
--spectrum-button-quiet-over-background-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-over-background-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
.spectrum-ClearButton--overBackground:hover {
@@ -217,11 +208,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-hover,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color-hover,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
.spectrum-ClearButton--overBackground:focus-visible {
@@ -229,18 +220,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ClearButton--overBackground.focus-ring */
background-color: var(
--spectrum-button-quiet-over-background-background-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
color: inherit;
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-button-quiet-over-background-border-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
.spectrum-ClearButton--overBackground:active {
@@ -252,11 +242,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-down,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color-down,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
box-shadow: none;
}
@@ -268,11 +258,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ClearButton--overBackground.is-disabled */
background-color: var(
--spectrum-button-quiet-over-background-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-button-quiet-over-background-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-button-quiet-over-background-text-color-disabled,
diff --git a/packages/button/src/spectrum-fieldbutton.css b/packages/button/src/spectrum-fieldbutton.css
index 1d2b33382f..9021fdc242 100644
--- a/packages/button/src/spectrum-fieldbutton.css
+++ b/packages/button/src/spectrum-fieldbutton.css
@@ -44,8 +44,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out;
text-decoration: none;
- font-family: adobe-clean, 'Source Sans Pro', -apple-system,
- BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-family: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro',
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.3;
@@ -68,7 +68,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
font-weight: normal;
font-size: var(
--spectrum-dropdown-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
);
line-height: normal;
-webkit-font-smoothing: initial;
@@ -83,7 +83,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-dimension-size-150)
);
- border-width: var(--spectrum-dropdown-border-size, 1px);
+ border-width: var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
border-style: solid;
border-radius: var(--spectrum-global-dimension-size-50);
@@ -95,7 +98,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-FieldButton */
color: var(
--spectrum-fieldbutton-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
background-color: var(
--spectrum-fieldbutton-background-color,
@@ -128,15 +131,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
margin-top: -2px;
margin-bottom: -2px;
}
-#button:-moz-focusring {
- /* .spectrum-Button:-moz-focusring,
- * .spectrum-ActionButton:-moz-focusring,
- * .spectrum-LogicButton:-moz-focusring,
- * .spectrum-FieldButton:-moz-focusring,
- * .spectrum-ClearButton:-moz-focusring,
- * .spectrum-Tool:-moz-focusring */
- outline: 1px dotted ButtonText;
-}
#button:disabled {
/* .spectrum-Button:disabled,
* .spectrum-ActionButton:disabled,
@@ -166,7 +160,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
}
#button.is-open {
/* .spectrum-FieldButton.is-open */
- border-width: var(--spectrum-dropdown-border-size, 1px);
+ border-width: var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
}
.spectrum-FieldButton--quiet {
/* .spectrum-FieldButton--quiet */
@@ -178,22 +175,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-FieldButton--quiet */
color: var(
--spectrum-fieldbutton-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
border-color: var(
--spectrum-fieldbutton-quiet-border-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
background-color: var(
--spectrum-fieldbutton-quiet-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
}
#button:hover {
/* .spectrum-FieldButton:hover */
color: var(
--spectrum-fieldbutton-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
background-color: var(
--spectrum-fieldbutton-background-color-hover,
@@ -214,17 +211,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-fieldbutton-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-fieldbutton-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
color: var(
--spectrum-fieldbutton-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
#button:focus-visible.is-placeholder,
@@ -233,7 +229,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton.is-focused.is-placeholder */
color: var(
--spectrum-fieldbutton-placeholder-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-placeholder-text-color-hover)
);
}
#button:active,
@@ -288,13 +284,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton.is-invalid.is-focused */
border-color: var(
--spectrum-fieldbutton-border-color-error-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
- box-shadow: 0 0 0
- var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
+ box-shadow: 0 0 0 1px
var(
--spectrum-fieldbutton-border-color-error-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
#button:disabled,
@@ -307,7 +302,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
color: var(
--spectrum-fieldbutton-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
#button:disabled:focus-visible,
@@ -322,18 +317,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton.is-disabled .spectrum-Icon */
color: var(
--spectrum-fieldbutton-icon-color-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
.spectrum-FieldButton--quiet:hover {
/* .spectrum-FieldButton--quiet:hover */
background-color: var(
--spectrum-fieldbutton-quiet-background-color-hover,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-fieldbutton-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
.spectrum-FieldButton--quiet:focus-visible,
@@ -342,12 +337,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton--quiet.is-focused */
background-color: var(
--spectrum-fieldbutton-quiet-background-color-key-focus,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
box-shadow: 0 2px 0 0
var(
--spectrum-fieldbutton-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
.spectrum-FieldButton--quiet:focus-visible.is-placeholder,
@@ -356,7 +351,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton--quiet.is-focused.is-placeholder */
color: var(
--spectrum-fieldbutton-quiet-placeholder-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-placeholder-text-color-hover)
);
}
.spectrum-FieldButton--quiet:active,
@@ -365,11 +360,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton--quiet.is-selected */
background-color: var(
--spectrum-fieldbutton-quiet-background-color-down,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-fieldbutton-quiet-border-color-down,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
}
.spectrum-FieldButton--quiet:active:focus-visible,
@@ -382,12 +377,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton--quiet.is-selected.is-focused */
background-color: var(
--spectrum-fieldbutton-quiet-background-color-key-focus,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
box-shadow: 0 2px 0 0
var(
--spectrum-fieldbutton-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
:host([invalid]) .spectrum-FieldButton--quiet:focus-visible,
@@ -397,7 +392,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-shadow: 0 2px 0 0
var(
--spectrum-fieldbutton-border-color-error-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
.spectrum-FieldButton--quiet:disabled,
@@ -406,11 +401,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-FieldButton--quiet.is-disabled */
background-color: var(
--spectrum-fieldbutton-quiet-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-fieldbutton-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
.spectrum-FieldButton--quiet:disabled:focus-visible,
diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css
index e76db863c3..e8377bf116 100644
--- a/packages/card/src/spectrum-card.css
+++ b/packages/card/src/spectrum-card.css
@@ -26,11 +26,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-dimension-size-3000)
);
- border: var(--spectrum-card-border-size, 1px) solid transparent;
+ border: var(
+ --spectrum-card-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
+ solid transparent;
border-radius: var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
+
+ text-decoration: none;
+
/* .spectrum-Card */
border-color: var(
--spectrum-card-border-color,
@@ -125,18 +132,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-ms-flex-pack: center;
justify-content: center;
- border-bottom: var(--spectrum-card-coverphoto-border-bottom-size, 1px) solid
- transparent;
+ border-bottom: var(
+ --spectrum-card-coverphoto-border-bottom-size,
+ var(--spectrum-alias-border-size-thin)
+ )
+ solid transparent;
border-radius: calc(
var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
) - 1px
)
calc(
var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
) - 1px
)
0 0;
@@ -177,11 +187,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
border-radius: 0 0
var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
)
var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
}
::slotted([slot='preview']) {
@@ -190,13 +200,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
border-radius: calc(
var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
) - 1px
)
calc(
var(
--spectrum-card-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
) - 1px
)
0 0;
@@ -239,6 +249,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-card-title-padding-right,
var(--spectrum-global-dimension-size-100)
);
+ /* .spectrum-Card .spectrum-Card-title */
+ color: var(
+ --spectrum-alias-text-color,
+ var(--spectrum-global-color-gray-800)
+ );
}
#subtitle {
/* .spectrum-Card-subtitle */
@@ -246,12 +261,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-card-subtitle-text-size,
var(--spectrum-global-dimension-font-size-50)
);
- letter-spacing: var(--spectrum-card-subtitle-letter-spacing, 0.06em);
+ letter-spacing: var(
+ --spectrum-card-subtitle-letter-spacing,
+ var(--spectrum-global-font-letter-spacing-medium)
+ );
text-transform: uppercase;
padding-right: var(
--spectrum-card-subtitle-padding-right,
var(--spectrum-global-dimension-size-100)
);
+ /* .spectrum-Card .spectrum-Card-subtitle */
+ color: var(
+ --spectrum-card-description-text-color,
+ var(--spectrum-global-color-gray-700)
+ );
}
::slotted([slot='description']) {
/* .spectrum-Card-description */
@@ -292,7 +315,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-dimension-size-300)
);
- border-top: var(--spectrum-card-footer-border-top-size, 1px) solid;
+ border-top: var(
+ --spectrum-card-footer-border-top-size,
+ var(--spectrum-global-dimension-size-10)
+ )
+ solid;
/* .spectrum-Card-footer */
border-color: var(
@@ -311,6 +338,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-ms-flex-pack: end;
justify-content: flex-end;
}
+:host([variant='quiet']) ::slotted([slot='preview']) {
+ /* .spectrum-Card--quiet .spectrum-Card-preview */
+ min-height: var(
+ --spectrum-card-quiet-min-size,
+ var(--spectrum-global-dimension-size-1700)
+ );
+}
:host([variant='quiet']),
:host([variant='gallery']) {
/* .spectrum-Card--quiet,
@@ -332,10 +366,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
width: 100%;
-ms-flex: 1;
flex: 1;
- min-height: var(
- --spectrum-card-quiet-min-size,
- var(--spectrum-global-dimension-size-1700)
- );
padding: var(
--spectrum-card-quiet-preview-padding,
var(--spectrum-global-dimension-size-250)
@@ -344,7 +374,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-sizing: border-box;
border-radius: var(
--spectrum-card-quiet-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
position: relative;
transition: background-color
@@ -423,6 +453,75 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-dimension-font-size-100)
);
}
+.spectrum-Card--horizontal {
+ /* .spectrum-Card--horizontal */
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+.spectrum-Card--horizontal ::slotted([slot='preview']) {
+ /* .spectrum-Card--horizontal .spectrum-Card-preview */
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ min-height: 0;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+
+ border-radius: var(
+ --spectrum-card-quiet-border-radius,
+ var(--spectrum-alias-border-radius-regular)
+ )
+ 0 0
+ var(
+ --spectrum-card-quiet-border-radius,
+ var(--spectrum-alias-border-radius-regular)
+ );
+ border-right: var(
+ --spectrum-card-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
+ solid transparent;
+
+ padding: var(--spectrum-global-dimension-size-175);
+
+ /* .spectrum-Card--horizontal .spectrum-Card-preview */
+ background-color: var(
+ --spectrum-card-quiet-preview-background-color,
+ var(--spectrum-global-color-gray-200)
+ );
+
+ border-color: var(
+ --spectrum-card-border-color,
+ var(--spectrum-global-color-gray-200)
+ );
+}
+.spectrum-Card--horizontal #header,
+.spectrum-Card--horizontal #content {
+ /* .spectrum-Card--horizontal .spectrum-Card-header,
+ * .spectrum-Card--horizontal .spectrum-Card-content */
+ margin-top: 0;
+ height: auto;
+}
+.spectrum-Card--horizontal #title {
+ /* .spectrum-Card--horizontal .spectrum-Card-title */
+ padding-right: 0;
+}
+.spectrum-Card--horizontal #body {
+ /* .spectrum-Card--horizontal .spectrum-Card-body */
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ padding: 0 var(--spectrum-global-dimension-size-200);
+}
:host([variant='gallery']) {
/* .spectrum-Card--gallery */
min-width: 0;
@@ -445,24 +544,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Card.focus-ring */
border-color: var(
--spectrum-card-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
box-shadow: 0 0 0 1px
var(
--spectrum-card-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
:host([drop-target]) {
/* .spectrum-Card.is-drop-target */
border-color: var(
--spectrum-card-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
box-shadow: 0 0 0 1px
var(
--spectrum-card-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
background-color: var(--spectrum-alias-highlight-selected);
}
@@ -576,3 +675,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-color-gray-700)
);
}
+.spectrum-Card--horizontal:hover ::slotted([slot='preview']) {
+ /* .spectrum-Card--horizontal:hover .spectrum-Card-preview */
+ border-color: var(
+ --spectrum-card-border-color-hover,
+ var(--spectrum-global-color-gray-400)
+ );
+}
diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
index 89ca1dd446..5ed3087a1b 100644
--- a/packages/checkbox/src/spectrum-checkbox.css
+++ b/packages/checkbox/src/spectrum-checkbox.css
@@ -36,7 +36,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Checkbox */
border-color: var(
- --spectrum-checkbox-box-border-color,
+ --spectrum-checkbox-emphasized-box-border-color,
var(--spectrum-global-color-gray-600)
);
}
@@ -123,9 +123,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
font-size: var(
--spectrum-checkbox-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-checkbox-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
);
- font-weight: var(--spectrum-checkbox-text-font-weight, 400);
transition: color var(--spectrum-global-animation-duration-100, 130ms)
ease-in-out;
@@ -133,8 +136,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Checkbox-label */
color: var(
- --spectrum-checkbox-text-color,
- var(--spectrum-global-color-gray-800)
+ --spectrum-checkbox-emphasized-text-color,
+ var(--spectrum-alias-text-color)
);
}
#box {
@@ -169,8 +172,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-ms-flex-negative: 0;
flex-shrink: 0;
- border-radius: var(--spectrum-checkbox-box-border-radius, 2px);
- border-width: var(--spectrum-checkbox-box-border-size, 2px);
+ border-radius: var(
+ --spectrum-checkbox-box-border-radius,
+ var(--spectrum-alias-border-radius-small)
+ );
+ border-width: var(
+ --spectrum-checkbox-box-border-size,
+ var(--spectrum-alias-border-size-thick)
+ );
border-style: solid;
transition: border var(--spectrum-global-animation-duration-100, 130ms)
@@ -180,11 +189,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color,
+ --spectrum-checkbox-emphasized-box-border-color,
var(--spectrum-global-color-gray-600)
);
background-color: var(
- --spectrum-checkbox-box-background-color,
+ --spectrum-checkbox-emphasized-box-background-color,
var(--spectrum-global-color-gray-75)
);
}
@@ -196,18 +205,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
top: 50%;
left: 50%;
- margin-top: calc(
- var(
- --spectrum-icon-checkmark-small-height,
- var(--spectrum-global-dimension-font-size-25)
- ) / -2
- );
- margin-left: calc(
- var(
- --spectrum-icon-checkmark-small-width,
- var(--spectrum-global-dimension-font-size-25)
- ) / -2
- );
+ margin-top: calc(var(--spectrum-icon-checkmark-small-height) / -2);
+ margin-left: calc(var(--spectrum-icon-checkmark-small-width) / -2);
opacity: 0;
transform: scale(0);
@@ -221,21 +220,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Checkbox-partialCheckmark */
display: none;
}
-#checkmark,
-#partialCheckmark {
- /* .spectrum-Checkbox-checkmark,
- * .spectrum-Checkbox-partialCheckmark */
- color: var(
- --spectrum-checkbox-checkmark-color,
- var(--spectrum-global-color-gray-75)
- );
-}
:host([indeterminate]) #root #box,
#input:checked + #box {
/* .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box,
* .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-selected,
+ --spectrum-checkbox-emphasized-box-border-color-selected,
var(--spectrum-global-color-blue-500)
);
}
@@ -244,7 +234,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Checkbox:hover.is-indeterminate .spectrum-Checkbox-box,
* .spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-selected-hover,
+ --spectrum-checkbox-emphasized-box-border-color-selected-hover,
var(--spectrum-global-color-blue-600)
);
}
@@ -253,14 +243,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Checkbox:active.is-indeterminate .spectrum-Checkbox-box,
* .spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-selected-down,
+ --spectrum-checkbox-emphasized-box-border-color-selected-down,
var(--spectrum-global-color-blue-700)
);
}
#root:hover #box {
/* .spectrum-Checkbox:hover .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-hover,
+ --spectrum-checkbox-emphasized-box-border-color-hover,
var(--spectrum-global-color-gray-700)
);
@@ -269,61 +259,70 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
#root:hover #label {
/* .spectrum-Checkbox:hover .spectrum-Checkbox-label */
color: var(
- --spectrum-checkbox-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ --spectrum-checkbox-emphasized-text-color-hover,
+ var(--spectrum-alias-text-color-hover)
);
}
#root:active #box {
/* .spectrum-Checkbox:active .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-down,
+ --spectrum-checkbox-emphasized-box-border-color-down,
var(--spectrum-global-color-gray-800)
);
}
#root:active #label {
/* .spectrum-Checkbox:active .spectrum-Checkbox-label */
color: var(
- --spectrum-checkbox-text-color-down,
- var(--spectrum-global-color-gray-900)
+ --spectrum-checkbox-emphasized-text-color-down,
+ var(--spectrum-alias-text-color-down)
+ );
+}
+#checkmark,
+#partialCheckmark {
+ /* .spectrum-Checkbox .spectrum-Checkbox-checkmark,
+ * .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark */
+ color: var(
+ --spectrum-checkbox-emphasized-checkmark-color,
+ var(--spectrum-global-color-gray-75)
);
}
:host([disabled]) #input + #box {
/* .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-disabled,
+ --spectrum-checkbox-emphasized-box-border-color-disabled,
var(--spectrum-global-color-gray-400)
) !important;
background-color: var(
- --spectrum-checkbox-box-background-color-disabled,
+ --spectrum-checkbox-emphasized-box-background-color-disabled,
var(--spectrum-global-color-gray-75)
);
}
:host([disabled]) #input ~ #label {
/* .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label */
color: var(
- --spectrum-checkbox-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ --spectrum-checkbox-emphasized-text-color-disabled,
+ var(--spectrum-alias-text-color-disabled)
);
}
#input:focus-visible + #box {
/* .spectrum-Checkbox-input.focus-ring + .spectrum-Checkbox-box */
border-color: var(
- --spectrum-checkbox-box-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ --spectrum-checkbox-emphasized-box-border-color-key-focus,
+ var(--spectrum-alias-border-color-focus)
) !important;
box-shadow: 0 0 0 1px
var(
- --spectrum-checkbox-box-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ --spectrum-checkbox-emphasized-box-border-color-key-focus,
+ var(--spectrum-alias-border-color-focus)
) !important;
}
#input:focus-visible ~ #label {
/* .spectrum-Checkbox-input.focus-ring ~ .spectrum-Checkbox-label */
color: var(
- --spectrum-checkbox-text-color-key-focus,
- var(--spectrum-global-color-blue-600)
+ --spectrum-checkbox-emphasized-text-color-key-focus,
+ var(--spectrum-alias-text-color-key-focus)
) !important;
}
:host([quiet][indeterminate]) #root #box,
diff --git a/packages/dropdown/src/spectrum-dropdown.css b/packages/dropdown/src/spectrum-dropdown.css
index 87d8099925..b17add8c10 100644
--- a/packages/dropdown/src/spectrum-dropdown.css
+++ b/packages/dropdown/src/spectrum-dropdown.css
@@ -74,18 +74,26 @@ select + .dropdown {
var(
--spectrum-dropdown-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-dropdown-border-size, 1px) * 2
+ ) -
+ var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ) * 2
);
line-height: calc(
var(
--spectrum-dropdown-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-dropdown-border-size, 1px) * 2
+ ) -
+ var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ) * 2
);
font-size: var(
--spectrum-dropdown-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
);
text-overflow: ellipsis;
@@ -93,14 +101,20 @@ select + .dropdown {
}
#label.placeholder {
/* .spectrum-Dropdown-label.is-placeholder */
- font-weight: var(--spectrum-dropdown-placeholder-text-font-weight, 400);
- font-style: var(--spectrum-dropdown-placeholder-text-font-style, italic);
+ font-weight: var(
+ --spectrum-dropdown-placeholder-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
+ );
+ font-style: var(
+ --spectrum-dropdown-placeholder-text-font-style,
+ var(--spectrum-global-font-style-italic)
+ );
transition: color var(--spectrum-global-animation-duration-100, 130ms)
ease-in-out;
/* .spectrum-Dropdown-label.is-placeholder */
color: var(
--spectrum-dropdown-placeholder-text-color,
- var(--spectrum-global-color-gray-600)
+ var(--spectrum-alias-placeholder-text-color)
);
}
#label + .dropdown {
@@ -129,7 +143,11 @@ select + .dropdown {
var(
--spectrum-dropdown-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-dropdown-border-size, 1px) * 2 -
+ ) -
+ var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ) * 2 -
var(
--spectrum-icon-chevron-down-medium-height,
var(--spectrum-global-dimension-size-75)
@@ -141,7 +159,11 @@ select + .dropdown {
var(
--spectrum-dropdown-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-dropdown-border-size, 1px) * 2 -
+ ) -
+ var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ) * 2 -
var(
--spectrum-icon-chevron-down-medium-height,
var(--spectrum-global-dimension-size-75)
@@ -154,7 +176,7 @@ select + .dropdown {
/* .spectrum-Dropdown-icon */
color: var(
--spectrum-dropdown-icon-color,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-icon-color)
);
}
#button .icon:not(.dropdown) {
@@ -164,10 +186,14 @@ select + .dropdown {
var(
--spectrum-dropdown-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-dropdown-border-size, 1px) * 2 -
+ ) -
+ var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ) * 2 -
var(
--spectrum-dropdown-icon-size,
- var(--spectrum-global-dimension-size-225)
+ var(--spectrum-alias-workflow-icon-size)
)
) / 2
);
@@ -176,10 +202,14 @@ select + .dropdown {
var(
--spectrum-dropdown-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-dropdown-border-size, 1px) * 2 -
+ ) -
+ var(
+ --spectrum-dropdown-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ) * 2 -
var(
--spectrum-dropdown-icon-size,
- var(--spectrum-global-dimension-size-225)
+ var(--spectrum-alias-workflow-icon-size)
)
) / 2
);
@@ -209,14 +239,18 @@ select + .dropdown {
-1 * (var(
--spectrum-dropdown-quiet-popover-offset-x,
var(--spectrum-global-dimension-size-150)
- ) + var(--spectrum-popover-border-size, 1px))
+ ) +
+ var(
+ --spectrum-popover-border-size,
+ var(--spectrum-alias-border-size-thin)
+ ))
);
}
#button:hover .dropdown {
/* .spectrum-Dropdown .spectrum-Dropdown-trigger:hover .spectrum-Dropdown-icon */
color: var(
--spectrum-dropdown-icon-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
#button.is-selected .placeholder {
@@ -230,7 +264,7 @@ select + .dropdown {
/* .spectrum-Dropdown.is-invalid .spectrum-Icon:not(.spectrum-Dropdown-icon):not(.spectrum-Menu-checkmark) */
color: var(
--spectrum-dropdown-validation-icon-color-error,
- var(--spectrum-global-color-red-600)
+ var(--spectrum-semantic-negative-color-icon)
);
}
:host([invalid][disabled]) .icon,
@@ -239,7 +273,7 @@ select + .dropdown {
* .spectrum-Dropdown.is-invalid.is-disabled .spectrum-Icon:not(.spectrum-Dropdown-icon):not(.spectrum-Menu-checkmark) */
color: var(
--spectrum-dropdown-icon-color-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
:host([disabled]) .dropdown,
@@ -248,21 +282,21 @@ select + .dropdown {
* .spectrum-Dropdown.is-disabled .spectrum-Dropdown-trigger:hover .spectrum-Dropdown-icon */
color: var(
--spectrum-dropdown-icon-color-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
:host([disabled]) #label.placeholder {
/* .spectrum-Dropdown.is-disabled .spectrum-Dropdown-label.is-placeholder */
color: var(
--spectrum-dropdown-placeholder-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
#label.placeholder:hover {
/* .spectrum-Dropdown-label.is-placeholder:hover */
color: var(
--spectrum-dropdown-placeholder-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-placeholder-text-color-hover)
);
}
#label.placeholder:active {
@@ -276,13 +310,13 @@ select + .dropdown {
/* .spectrum-Dropdown-trigger.focus-ring .spectrum-Dropdown-label.is-placeholder */
color: var(
--spectrum-dropdown-placeholder-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-placeholder-text-color-hover)
);
}
#button:focus-visible .dropdown {
/* .spectrum-Dropdown-trigger.focus-ring .spectrum-Dropdown-icon */
color: var(
--spectrum-dropdown-icon-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-focus)
);
}
diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css
index 4f1fd837f8..e950b27b5a 100644
--- a/packages/dropzone/src/spectrum-dropzone.css
+++ b/packages/dropzone/src/spectrum-dropzone.css
@@ -13,10 +13,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
/* .spectrum-Dropzone */
text-align: center;
- border-width: var(--spectrum-dropzone-border-width, 2px);
+ border-width: var(
+ --spectrum-dropzone-border-width,
+ var(--spectrum-alias-border-size-thick)
+ );
border-radius: var(
--spectrum-dropzone-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
padding: var(
--spectrum-dropzone-padding,
diff --git a/packages/icon/src/spectrum-icon-arrow-down-small.css b/packages/icon/src/spectrum-icon-arrow-down-small.css
index 3c61c826f8..ee274afc1a 100644
--- a/packages/icon/src/spectrum-icon-arrow-down-small.css
+++ b/packages/icon/src/spectrum-icon-arrow-down-small.css
@@ -16,8 +16,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-icon-arrow-down-small-width,
var(--spectrum-global-dimension-size-100)
);
- height: var(
- --spectrum-icon-arrow-down-small-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ height: var(--spectrum-icon-arrow-down-small-height);
}
diff --git a/packages/icon/src/spectrum-icon-arrow-left-medium.css b/packages/icon/src/spectrum-icon-arrow-left-medium.css
index 0bd5455a7c..7548375361 100644
--- a/packages/icon/src/spectrum-icon-arrow-left-medium.css
+++ b/packages/icon/src/spectrum-icon-arrow-left-medium.css
@@ -16,8 +16,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-icon-arrow-left-medium-width,
var(--spectrum-global-dimension-size-175)
);
- height: var(
- --spectrum-icon-arrow-left-medium-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ height: var(--spectrum-icon-arrow-left-medium-height);
}
diff --git a/packages/icon/src/spectrum-icon-checkmark-medium.css b/packages/icon/src/spectrum-icon-checkmark-medium.css
index 7eb9162025..6e55ba74da 100644
--- a/packages/icon/src/spectrum-icon-checkmark-medium.css
+++ b/packages/icon/src/spectrum-icon-checkmark-medium.css
@@ -13,8 +13,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.checkmark-medium {
/* .spectrum-UIIcon-CheckmarkMedium */
width: var(--spectrum-icon-checkmark-medium-width);
- height: var(
- --spectrum-icon-checkmark-medium-height,
- var(--spectrum-icon-checkmark-medium-width)
- );
+ height: var(--spectrum-icon-checkmark-medium-height);
}
diff --git a/packages/icon/src/spectrum-icon-checkmark-small.css b/packages/icon/src/spectrum-icon-checkmark-small.css
index 9cbedbd438..917095e806 100644
--- a/packages/icon/src/spectrum-icon-checkmark-small.css
+++ b/packages/icon/src/spectrum-icon-checkmark-small.css
@@ -12,12 +12,6 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.checkmark-small {
/* .spectrum-UIIcon-CheckmarkSmall */
- width: var(
- --spectrum-icon-checkmark-small-width,
- var(--spectrum-global-dimension-font-size-25)
- );
- height: var(
- --spectrum-icon-checkmark-small-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ width: var(--spectrum-icon-checkmark-small-width);
+ height: var(--spectrum-icon-checkmark-small-height);
}
diff --git a/packages/icon/src/spectrum-icon-chevron-down-medium.css b/packages/icon/src/spectrum-icon-chevron-down-medium.css
index 6a4fa8bdbc..a18370e53b 100644
--- a/packages/icon/src/spectrum-icon-chevron-down-medium.css
+++ b/packages/icon/src/spectrum-icon-chevron-down-medium.css
@@ -12,10 +12,7 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.chevron-down-medium {
/* .spectrum-UIIcon-ChevronDownMedium */
- width: var(
- --spectrum-icon-chevron-down-medium-width,
- var(--spectrum-global-dimension-font-size-25)
- );
+ width: var(--spectrum-icon-chevron-down-medium-width);
height: var(
--spectrum-icon-chevron-down-medium-height,
var(--spectrum-global-dimension-size-75)
diff --git a/packages/icon/src/spectrum-icon-chevron-left-large.css b/packages/icon/src/spectrum-icon-chevron-left-large.css
index ac174251cb..37f1ba0ee0 100644
--- a/packages/icon/src/spectrum-icon-chevron-left-large.css
+++ b/packages/icon/src/spectrum-icon-chevron-left-large.css
@@ -12,10 +12,7 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.chevron-left-large {
/* .spectrum-UIIcon-ChevronLeftLarge */
- width: var(
- --spectrum-icon-chevron-left-large-width,
- var(--spectrum-icon-checkmark-medium-width)
- );
+ width: var(--spectrum-icon-chevron-left-large-width);
height: var(
--spectrum-icon-chevron-left-large-height,
var(--spectrum-global-dimension-size-200)
diff --git a/packages/icon/src/spectrum-icon-chevron-left-medium.css b/packages/icon/src/spectrum-icon-chevron-left-medium.css
index 1eca823043..1f47314bf8 100644
--- a/packages/icon/src/spectrum-icon-chevron-left-medium.css
+++ b/packages/icon/src/spectrum-icon-chevron-left-medium.css
@@ -16,8 +16,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-icon-chevron-left-medium-width,
var(--spectrum-global-dimension-size-75)
);
- height: var(
- --spectrum-icon-chevron-left-medium-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ height: var(--spectrum-icon-chevron-left-medium-height);
}
diff --git a/packages/icon/src/spectrum-icon-chevron-right-large.css b/packages/icon/src/spectrum-icon-chevron-right-large.css
index da5ecb2c53..256c67f8ab 100644
--- a/packages/icon/src/spectrum-icon-chevron-right-large.css
+++ b/packages/icon/src/spectrum-icon-chevron-right-large.css
@@ -12,10 +12,7 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.chevron-right-large {
/* .spectrum-UIIcon-ChevronRightLarge */
- width: var(
- --spectrum-icon-chevron-right-large-width,
- var(--spectrum-icon-checkmark-medium-width)
- );
+ width: var(--spectrum-icon-chevron-right-large-width);
height: var(
--spectrum-icon-chevron-right-large-height,
var(--spectrum-global-dimension-size-200)
diff --git a/packages/icon/src/spectrum-icon-chevron-right-medium.css b/packages/icon/src/spectrum-icon-chevron-right-medium.css
index 77fcad6f60..ef1d7ef7f5 100644
--- a/packages/icon/src/spectrum-icon-chevron-right-medium.css
+++ b/packages/icon/src/spectrum-icon-chevron-right-medium.css
@@ -16,8 +16,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-icon-chevron-right-medium-width,
var(--spectrum-global-dimension-size-75)
);
- height: var(
- --spectrum-icon-chevron-right-medium-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ height: var(--spectrum-icon-chevron-right-medium-height);
}
diff --git a/packages/icon/src/spectrum-icon-cross-large.css b/packages/icon/src/spectrum-icon-cross-large.css
index db77fbdeb2..7f31631828 100644
--- a/packages/icon/src/spectrum-icon-cross-large.css
+++ b/packages/icon/src/spectrum-icon-cross-large.css
@@ -12,12 +12,6 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.cross-large {
/* .spectrum-UIIcon-CrossLarge */
- width: var(
- --spectrum-icon-cross-large-width,
- var(--spectrum-icon-checkmark-medium-width)
- );
- height: var(
- --spectrum-icon-cross-large-height,
- var(--spectrum-icon-checkmark-medium-width)
- );
+ width: var(--spectrum-icon-cross-large-width);
+ height: var(--spectrum-icon-cross-large-height);
}
diff --git a/packages/icon/src/spectrum-icon-dash-small.css b/packages/icon/src/spectrum-icon-dash-small.css
index 539da1cff3..3b7f108a90 100644
--- a/packages/icon/src/spectrum-icon-dash-small.css
+++ b/packages/icon/src/spectrum-icon-dash-small.css
@@ -12,12 +12,6 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.dash-small {
/* .spectrum-UIIcon-DashSmall */
- width: var(
- --spectrum-icon-dash-small-width,
- var(--spectrum-global-dimension-font-size-25)
- );
- height: var(
- --spectrum-icon-dash-small-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ width: var(--spectrum-icon-dash-small-width);
+ height: var(--spectrum-icon-dash-small-height);
}
diff --git a/packages/icon/src/spectrum-icon-skip-left.css b/packages/icon/src/spectrum-icon-skip-left.css
index 07af50bb56..950bf8ba79 100644
--- a/packages/icon/src/spectrum-icon-skip-left.css
+++ b/packages/icon/src/spectrum-icon-skip-left.css
@@ -13,8 +13,5 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.skip-left {
/* .spectrum-UIIcon-SkipLeft */
width: var(--spectrum-icon-skip-left-width);
- height: var(
- --spectrum-icon-skip-left-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ height: var(--spectrum-icon-skip-left-height);
}
diff --git a/packages/icon/src/spectrum-icon-skip-right.css b/packages/icon/src/spectrum-icon-skip-right.css
index 54cae0316f..1a82739b16 100644
--- a/packages/icon/src/spectrum-icon-skip-right.css
+++ b/packages/icon/src/spectrum-icon-skip-right.css
@@ -12,12 +12,6 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.skip-right {
/* .spectrum-UIIcon-SkipRight */
- width: var(
- --spectrum-icon-skip-right-width,
- var(--spectrum-icon-skip-left-width)
- );
- height: var(
- --spectrum-icon-skip-right-height,
- var(--spectrum-global-dimension-font-size-25)
- );
+ width: var(--spectrum-icon-skip-right-width);
+ height: var(--spectrum-icon-skip-right-height);
}
diff --git a/packages/icon/src/spectrum-icon-triple-gripper.css b/packages/icon/src/spectrum-icon-triple-gripper.css
index 9f1fc6a0ea..4ebbe9fd1d 100644
--- a/packages/icon/src/spectrum-icon-triple-gripper.css
+++ b/packages/icon/src/spectrum-icon-triple-gripper.css
@@ -12,10 +12,7 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
.triple-gripper {
/* .spectrum-UIIcon-TripleGripper */
- width: var(
- --spectrum-icon-triplegripper-width,
- var(--spectrum-global-dimension-font-size-25)
- );
+ width: var(--spectrum-icon-triplegripper-width);
height: var(
--spectrum-icon-triplegripper-height,
var(--spectrum-global-dimension-size-85)
diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css
index 30742f0448..d57e655081 100644
--- a/packages/icon/src/spectrum-icon.css
+++ b/packages/icon/src/spectrum-icon.css
@@ -11,14 +11,16 @@ governing permissions and limitations under the License.
THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
- /* .spectrum-Icon */
+ /* .spectrum-Icon,
+ * .spectrum-UIIcon */
display: inline-block;
color: inherit;
fill: currentColor;
pointer-events: none;
}
:host(:not(:root)) {
- /* .spectrum-Icon:not(:root) */
+ /* .spectrum-Icon:not(:root),
+ * .spectrum-UIIcon:not(:root) */
overflow: hidden;
}
:host([size='xxs']),
diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts
index 100e521130..2ee8188fec 100644
--- a/packages/icons/src/icons-large.svg.ts
+++ b/packages/icons/src/icons-large.svg.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
import { svg } from 'lit-element';
-export default svg``;
+export default svg``;
diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts
index 02f663b647..3039bb45c2 100644
--- a/packages/icons/src/icons-medium.svg.ts
+++ b/packages/icons/src/icons-medium.svg.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
import { svg } from 'lit-element';
-export default svg``;
+export default svg``;
diff --git a/packages/icons/test/icons.test.ts b/packages/icons/test/icons.test.ts
index 3068979841..ec1f24abec 100644
--- a/packages/icons/test/icons.test.ts
+++ b/packages/icons/test/icons.test.ts
@@ -48,6 +48,6 @@ describe('icons', () => {
await elementUpdated(el);
expect(el).to.not.equal(undefined);
- expect(el.getIconList().length).to.equal(35);
+ expect(el.getIconList().length).to.equal(36);
});
});
diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css
index 7cfc88c835..14f86c7fda 100644
--- a/packages/link/src/spectrum-link.css
+++ b/packages/link/src/spectrum-link.css
@@ -43,7 +43,7 @@ a:focus-visible {
/* .spectrum-Link.focus-ring */
color: var(
--spectrum-link-text-color-key-focus,
- var(--spectrum-global-color-blue-600)
+ var(--spectrum-alias-text-color-key-focus)
);
}
:host([quiet]) a {
@@ -58,7 +58,10 @@ a:focus-visible {
/* .spectrum-Link--overBackground */
text-decoration: underline;
/* .spectrum-Link--overBackground */
- color: var(--spectrum-link-over-background-text-color, rgb(255, 255, 255));
+ color: var(
+ --spectrum-link-over-background-text-color,
+ var(--spectrum-global-color-static-white)
+ );
}
a:active {
/* .spectrum-Link:active */
@@ -86,20 +89,20 @@ a:active {
/* .spectrum-Link--overBackground:hover */
color: var(
--spectrum-link-over-background-text-color-hover,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([over-background]) a:active {
/* .spectrum-Link--overBackground:active */
color: var(
--spectrum-link-over-background-text-color-down,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
:host([over-background]) a:focus {
/* .spectrum-Link--overBackground:focus */
color: var(
--spectrum-link-over-background-text-color-key-focus,
- rgb(255, 255, 255)
+ var(--spectrum-global-color-static-white)
);
}
diff --git a/packages/menu-item/src/spectrum-menu-divider.css b/packages/menu-item/src/spectrum-menu-divider.css
index 9bec2222c6..7e25638056 100644
--- a/packages/menu-item/src/spectrum-menu-divider.css
+++ b/packages/menu-item/src/spectrum-menu-divider.css
@@ -15,14 +15,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-sizing: content-box;
overflow: visible;
- height: var(--spectrum-selectlist-divider-size, 2px);
+ height: var(
+ --spectrum-selectlist-divider-size,
+ var(--spectrum-alias-border-size-thick)
+ );
margin: calc(var(--spectrum-selectlist-divider-padding, 3px) / 2)
- var(--spectrum-selectlist-option-padding, 12px);
+ var(
+ --spectrum-selectlist-option-padding,
+ var(--spectrum-global-dimension-static-size-150)
+ );
padding: 0 0;
border: none;
/* .spectrum-Menu-divider */
background-color: var(
--spectrum-selectlist-divider-color,
- var(--spectrum-global-color-gray-100)
+ var(--spectrum-alias-border-color-extralight)
);
}
diff --git a/packages/menu-item/src/spectrum-menu-item.css b/packages/menu-item/src/spectrum-menu-item.css
index 7cd37d2e18..5ae48d7db5 100644
--- a/packages/menu-item/src/spectrum-menu-item.css
+++ b/packages/menu-item/src/spectrum-menu-item.css
@@ -18,7 +18,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
display: none;
-ms-flex-item-align: start;
align-self: flex-start;
- margin-top: var(--spectrum-global-dimension-size-50);
/* .spectrum-Menu-checkmark,
* .spectrum-Menu-chevron */
-ms-flex-positive: 0;
@@ -27,6 +26,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-selectlist-option-icon-padding-x,
var(--spectrum-global-dimension-size-150)
);
+ margin-top: var(--spectrum-global-dimension-size-50);
}
#button {
/* .spectrum-Menu-item */
@@ -40,34 +40,50 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-sizing: border-box;
padding: var(--spectrum-global-dimension-size-85)
- var(--spectrum-selectlist-option-padding, 12px)
+ var(
+ --spectrum-selectlist-option-padding,
+ var(--spectrum-global-dimension-static-size-150)
+ )
var(--spectrum-global-dimension-size-85)
calc(
- var(--spectrum-selectlist-option-padding, 12px) -
- var(--spectrum-selectlist-border-size-key-focus, 2px)
+ var(
+ --spectrum-selectlist-option-padding,
+ var(--spectrum-global-dimension-static-size-150)
+ ) -
+ var(
+ --spectrum-selectlist-border-size-key-focus,
+ var(--spectrum-global-dimension-static-size-25)
+ )
);
margin: 0;
- border-left: var(--spectrum-selectlist-border-size-key-focus, 2px) solid
- transparent;
+ border-left: var(
+ --spectrum-selectlist-border-size-key-focus,
+ var(--spectrum-global-dimension-static-size-25)
+ )
+ solid transparent;
min-height: var(--spectrum-selectlist-option-height);
font-size: var(
--spectrum-selectlist-option-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-selectlist-option-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
);
- font-weight: var(--spectrum-selectlist-option-text-font-weight, 400);
font-style: normal;
+ text-decoration: none;
/* .spectrum-Menu-item */
background-color: var(
--spectrum-selectlist-option-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-selectlist-option-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
#button:focus {
@@ -77,13 +93,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host([selected]) #button {
/* .spectrum-Menu-item.is-selected */
padding-right: calc(
- var(--spectrum-selectlist-option-padding, 12px) -
- var(--spectrum-popover-border-size, 1px)
+ var(
+ --spectrum-selectlist-option-padding,
+ var(--spectrum-global-dimension-static-size-150)
+ ) -
+ var(
+ --spectrum-popover-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
);
/* .spectrum-Menu-item.is-selected */
color: var(
--spectrum-selectlist-option-text-color-selected,
- var(--spectrum-global-color-blue-600)
+ var(--spectrum-alias-text-color)
);
}
:host([selected]) #button #selected {
@@ -92,18 +114,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Menu-item.is-selected .spectrum-Menu-checkmark */
color: var(
--spectrum-selectlist-option-icon-color-selected,
- var(--spectrum-global-color-blue-500)
+ var(--spectrum-alias-icon-color-selected)
);
}
-::slotted([slot='icon']) {
- /* .spectrum-Menu-item .spectrum-Icon */
+::slotted([slot='icon']),
+.spectrum-Menu-itemIcon {
+ /* .spectrum-Menu-item .spectrum-Icon,
+ * .spectrum-Menu-item .spectrum-Menu-itemIcon */
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-item-align: start;
align-self: flex-start;
}
-slot[name='icon'] + #label {
- /* .spectrum-Menu-item .spectrum-Icon + .spectrum-Menu-itemLabel */
+slot[name='icon'] + #label,
+.spectrum-Menu-itemIcon + #label {
+ /* .spectrum-Menu-item .spectrum-Icon + .spectrum-Menu-itemLabel,
+ * .spectrum-Menu-item .spectrum-Menu-itemIcon + .spectrum-Menu-itemLabel */
margin-left: var(
--spectrum-selectlist-thumbnail-image-padding-x,
var(--spectrum-global-dimension-size-100)
@@ -131,18 +157,20 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-selectlist-option-text-color-key-focus,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
border-left-color: var(
--spectrum-selectlist-option-focus-indicator-color,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
#button:hover,
#button:focus,
+#button.is-highlighted,
#button.is-open {
/* .spectrum-Menu-item:hover,
* .spectrum-Menu-item:focus,
+ * .spectrum-Menu-item.is-highlighted,
* .spectrum-Menu-item.is-open */
background-color: var(
--spectrum-selectlist-option-background-color-hover,
@@ -150,7 +178,7 @@ slot[name='icon'] + #label {
);
color: var(
--spectrum-selectlist-option-text-color-hover,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
.is-active,
@@ -166,12 +194,12 @@ slot[name='icon'] + #label {
/* .spectrum-Menu-item.is-disabled */
background-color: var(
--spectrum-selectlist-option-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
background-image: none;
color: var(
--spectrum-selectlist-option-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
cursor: default;
}
diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css
index 62225c72ae..a230ac1cc5 100644
--- a/packages/menu/src/spectrum-menu.css
+++ b/packages/menu/src/spectrum-menu.css
@@ -32,6 +32,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Menu */
background-color: var(
--spectrum-selectlist-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
}
diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css
index b7deaf1bad..f9835eb49e 100644
--- a/packages/popover/src/spectrum-popover.css
+++ b/packages/popover/src/spectrum-popover.css
@@ -37,10 +37,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
position: absolute;
border-style: solid;
- border-width: var(--spectrum-popover-border-size, 1px);
+ border-width: var(
+ --spectrum-popover-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
border-radius: var(
--spectrum-popover-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
outline: none;
@@ -52,7 +55,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-popover-border-color,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-border-color-dark)
);
box-shadow: 0 1px 4px
var(
@@ -118,7 +121,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-popover-tip-width,
var(--spectrum-global-dimension-size-250)
- ) / 2 + var(--spectrum-popover-border-size, 1px)
+ ) / 2 +
+ var(
+ --spectrum-popover-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
);
}
#tip::after {
@@ -132,7 +139,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-popover-tip-width,
var(--spectrum-global-dimension-size-250)
);
- border-width: var(--spectrum-popover-border-size, 1px);
+ border-width: var(
+ --spectrum-popover-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
border-style: solid;
position: absolute;
transform: rotate(45deg);
@@ -145,7 +155,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-popover-border-color,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-border-color-dark)
);
box-shadow: -1px -1px 4px var(--spectrum-popover-shadow-color, var(--spectrum-alias-dropshadow-color));
}
diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
index f20cfdeef4..d135e76474 100644
--- a/packages/radio/src/spectrum-radio.css
+++ b/packages/radio/src/spectrum-radio.css
@@ -75,11 +75,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-radio-circle-diameter,
var(--spectrum-global-dimension-size-175)
- ) / 2 - var(--spectrum-radio-circle-dot-size, 4px) / 2
+ ) / 2 -
+ var(
+ --spectrum-radio-circle-dot-size,
+ var(--spectrum-global-dimension-static-size-50)
+ ) / 2
);
/* .spectrum-Radio .spectrum-Radio-input:checked + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-selected,
+ --spectrum-radio-emphasized-circle-border-color-selected,
var(--spectrum-global-color-blue-500)
);
}
@@ -91,7 +95,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
font-size: var(
--spectrum-radio-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
);
transition: color var(--spectrum-global-animation-duration-100, 130ms)
@@ -99,8 +103,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
margin-top: var(--spectrum-global-dimension-size-75);
/* .spectrum-Radio-label */
color: var(
- --spectrum-radio-text-color,
- var(--spectrum-global-color-gray-800)
+ --spectrum-radio-emphasized-text-color,
+ var(--spectrum-alias-text-color)
);
}
#button {
@@ -141,7 +145,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-dimension-size-175)
) / 2
);
- border-width: var(--spectrum-radio-circle-border-size, 2px);
+ border-width: var(
+ --spectrum-radio-circle-border-size,
+ var(--spectrum-alias-border-size-thick)
+ );
border-style: solid;
transition: border var(--spectrum-global-animation-duration-100, 130ms)
@@ -151,11 +158,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio-button */
background-color: var(
- --spectrum-radio-circle-background-color,
+ --spectrum-radio-emphasized-circle-background-color,
var(--spectrum-global-color-gray-75)
);
border-color: var(
- --spectrum-radio-circle-border-color,
+ --spectrum-radio-emphasized-circle-border-color,
var(--spectrum-global-color-gray-600)
);
}
@@ -173,6 +180,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio--labelBelow .spectrum-Radio-button */
-ms-flex-negative: 0;
flex-shrink: 0;
+
+ margin: 0;
}
:host([label-below]) #label {
/* .spectrum-Radio--labelBelow .spectrum-Radio-label */
@@ -181,7 +190,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
#root:hover #button {
/* .spectrum-Radio:hover .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-hover,
+ --spectrum-radio-emphasized-circle-border-color-hover,
var(--spectrum-global-color-gray-700)
);
box-shadow: none;
@@ -189,36 +198,36 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host([checked]) #root:hover #input + #button {
/* .spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-selected-hover,
+ --spectrum-radio-emphasized-circle-border-color-selected-hover,
var(--spectrum-global-color-blue-600)
);
}
#root:hover #label {
/* .spectrum-Radio:hover .spectrum-Radio-label */
color: var(
- --spectrum-radio-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ --spectrum-radio-emphasized-text-color-hover,
+ var(--spectrum-alias-text-color-hover)
);
}
#root:active #button {
/* .spectrum-Radio:active .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-down,
+ --spectrum-radio-emphasized-circle-border-color-down,
var(--spectrum-global-color-gray-800)
);
}
:host([checked]) #root:active #input + #button {
/* .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-selected-down,
+ --spectrum-radio-emphasized-circle-border-color-selected-down,
var(--spectrum-global-color-blue-700)
);
}
#root:active #label {
/* .spectrum-Radio:active .spectrum-Radio-label */
color: var(
- --spectrum-radio-text-color-down,
- var(--spectrum-global-color-gray-900)
+ --spectrum-radio-emphasized-text-color-down,
+ var(--spectrum-alias-text-color-down)
);
}
:host([quiet][checked]) #input + #button {
@@ -247,7 +256,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio.is-invalid:hover .spectrum-Radio-input + .spectrum-Radio-button,
* .spectrum-Radio--quiet.is-invalid:hover .spectrum-Radio-input + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-error-hover,
+ --spectrum-radio-emphasized-circle-border-color-error-hover,
var(--spectrum-global-color-red-600)
);
}
@@ -256,7 +265,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio.is-invalid:hover .spectrum-Radio-label,
* .spectrum-Radio--quiet.is-invalid:hover .spectrum-Radio-label */
color: var(
- --spectrum-radio-circle-border-color-error-hover,
+ --spectrum-radio-emphasized-circle-border-color-error-hover,
var(--spectrum-global-color-red-600)
);
}
@@ -265,7 +274,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio.is-invalid:active .spectrum-Radio-input + .spectrum-Radio-button,
* .spectrum-Radio--quiet.is-invalid:active .spectrum-Radio-input + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-error-down,
+ --spectrum-radio-emphasized-circle-border-color-error-down,
var(--spectrum-global-color-red-700)
);
}
@@ -274,7 +283,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio.is-invalid:active .spectrum-Radio-label,
* .spectrum-Radio--quiet.is-invalid:active .spectrum-Radio-label */
color: var(
- --spectrum-radio-circle-border-color-error-down,
+ --spectrum-radio-emphasized-circle-border-color-error-down,
var(--spectrum-global-color-red-700)
);
}
@@ -287,7 +296,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Radio--quiet.is-invalid .spectrum-Radio-button,
* .spectrum-Radio--quiet.is-invalid .spectrum-Radio-input:checked + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-error,
+ --spectrum-radio-emphasized-circle-border-color-error,
var(--spectrum-global-color-red-500)
);
}
@@ -296,22 +305,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio.is-invalid .spectrum-Radio-label,
* .spectrum-Radio--quiet.is-invalid .spectrum-Radio-label */
color: var(
- --spectrum-radio-circle-border-color-error,
+ --spectrum-radio-emphasized-circle-border-color-error,
var(--spectrum-global-color-red-500)
);
}
:host([disabled]) #input + #button {
/* .spectrum-Radio-input:disabled + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-disabled,
+ --spectrum-radio-emphasized-circle-border-color-disabled,
var(--spectrum-global-color-gray-400)
) !important;
}
:host([disabled]) #input ~ #label {
/* .spectrum-Radio-input:disabled ~ .spectrum-Radio-label */
color: var(
- --spectrum-radio-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ --spectrum-radio-emphasized-text-color-disabled,
+ var(--spectrum-alias-text-color-disabled)
) !important;
}
#input:focus-visible + #button,
@@ -323,12 +332,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Radio--quiet .spectrum-Radio-input.focus-ring + .spectrum-Radio-button,
* .spectrum-Radio--quiet:hover .spectrum-Radio-input.focus-ring + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-key-focus,
+ --spectrum-radio-emphasized-circle-border-color-key-focus,
var(--spectrum-global-color-blue-400)
);
box-shadow: 0 0 0 1px
var(
- --spectrum-radio-circle-border-color-key-focus,
+ --spectrum-radio-emphasized-circle-border-color-key-focus,
var(--spectrum-global-color-blue-400)
);
}
@@ -341,8 +350,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Radio--quiet .spectrum-Radio-input.focus-ring ~ .spectrum-Radio-label,
* .spectrum-Radio--quiet:hover .spectrum-Radio-input.focus-ring ~ .spectrum-Radio-label */
color: var(
- --spectrum-radio-text-color-key-focus,
- var(--spectrum-global-color-blue-600)
+ --spectrum-radio-emphasized-text-color-key-focus,
+ var(--spectrum-alias-text-color-key-focus)
);
}
:host([invalid][checked]) #root #input:focus-visible + #button,
@@ -350,12 +359,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Radio.is-invalid .spectrum-Radio-input:checked.focus-ring + .spectrum-Radio-button,
* .spectrum-Radio--quiet.is-invalid .spectrum-Radio-input:checked.focus-ring + .spectrum-Radio-button */
border-color: var(
- --spectrum-radio-circle-border-color-key-focus,
+ --spectrum-radio-emphasized-circle-border-color-key-focus,
var(--spectrum-global-color-blue-400)
);
box-shadow: 0 0 0 1px
var(
- --spectrum-radio-circle-border-color-key-focus,
+ --spectrum-radio-emphasized-circle-border-color-key-focus,
var(--spectrum-global-color-blue-400)
);
}
diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css
index f6596ac988..88d5cabeed 100644
--- a/packages/search/src/spectrum-search.css
+++ b/packages/search/src/spectrum-search.css
@@ -24,7 +24,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
#input {
/* .spectrum-Search-input */
display: block;
- -webkit-appearance: textfield;
+ -webkit-appearance: none;
outline-offset: -2px;
padding-left: var(--spectrum-search-padding-left, 36px);
text-indent: 0;
@@ -61,7 +61,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
top: calc(
var(
--spectrum-textfield-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
) / 2 -
var(
--spectrum-icon-magnifier-width,
@@ -74,13 +74,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Search-icon */
color: var(
--spectrum-textfield-icon-color,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-icon-color)
);
}
#input:disabled ~ #icon {
/* .spectrum-Search-input:disabled ~ .spectrum-Search-icon */
color: var(
--spectrum-textfield-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css
index b94f379db5..78050f8a04 100644
--- a/packages/sidenav/src/spectrum-sidenav-heading.css
+++ b/packages/sidenav/src/spectrum-sidenav-heading.css
@@ -20,11 +20,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-SideNav-heading */
height: var(
--spectrum-sidenav-header-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
line-height: var(
--spectrum-sidenav-header-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
margin: var(
@@ -45,16 +45,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
border-radius: var(
--spectrum-sidenav-header-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
font-size: var(
--spectrum-sidenav-header-text-size,
var(--spectrum-global-dimension-font-size-50)
);
- font-weight: var(--spectrum-sidenav-header-font-weight, 500);
+ font-weight: var(
+ --spectrum-sidenav-header-font-weight,
+ var(--spectrum-global-font-weight-medium)
+ );
font-style: normal;
- letter-spacing: var(--spectrum-sidenav-header-letter-spacing, 0.06em);
+ letter-spacing: var(
+ --spectrum-sidenav-header-letter-spacing,
+ var(--spectrum-global-font-letter-spacing-medium)
+ );
text-transform: uppercase;
diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css
index 1fa1af0d89..f2b51129fc 100644
--- a/packages/sidenav/src/spectrum-sidenav-item.css
+++ b/packages/sidenav/src/spectrum-sidenav-item.css
@@ -40,7 +40,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
width: 100%;
min-height: var(
--spectrum-sidenav-item-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
padding: var(--spectrum-global-dimension-size-65)
@@ -51,14 +51,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
border-radius: var(
--spectrum-sidenav-item-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
font-size: var(
--spectrum-sidenav-item-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-sidenav-item-font-weight,
+ var(--spectrum-global-font-weight-regular)
);
- font-weight: var(--spectrum-sidenav-item-font-weight, 400);
font-style: normal;
text-decoration: none;
@@ -76,11 +79,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-SideNav-itemLink */
background-color: var(
--spectrum-sidenav-item-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-sidenav-item-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
#itemLink:focus {
@@ -96,15 +99,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
right: 0;
bottom: 0;
- border: var(--spectrum-tabs-focus-ring-size, 2px) solid transparent;
+ border: var(
+ --spectrum-tabs-focus-ring-size,
+ var(--spectrum-alias-border-size-thick)
+ )
+ solid transparent;
border-radius: var(
--spectrum-sidenav-item-border-radius,
- var(--spectrum-global-dimension-size-50)
+ var(--spectrum-alias-border-radius-regular)
);
/* .spectrum-SideNav-itemLink.focus-ring::before */
border-color: var(
--spectrum-sidenav-item-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
#itemLink .spectrum-SideNav-itemIcon {
@@ -118,7 +125,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-SideNav-item.is-selected > .spectrum-SideNav-itemLink */
color: var(
--spectrum-sidenav-item-text-color-selected,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
background-color: var(
--spectrum-sidenav-item-background-color-selected,
@@ -136,11 +143,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink */
background-color: var(
--spectrum-sidenav-item-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
color: var(
--spectrum-sidenav-item-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
cursor: default;
@@ -154,7 +161,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
color: var(
--spectrum-sidenav-item-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
#itemLink:active {
@@ -172,6 +179,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
color: var(
--spectrum-sidenav-item-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css
index aa632bfe71..f375994f81 100644
--- a/packages/slider/src/spectrum-slider.css
+++ b/packages/slider/src/spectrum-slider.css
@@ -18,11 +18,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
display: block;
min-height: var(
--spectrum-slider-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
min-width: var(
--spectrum-slider-min-width,
- var(--spectrum-global-dimension-size-1600)
+ var(--spectrum-global-dimension-size-1250)
);
-webkit-user-select: none;
@@ -56,7 +56,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
min-height: var(
--spectrum-slider-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
vertical-align: top;
@@ -69,19 +69,27 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider-buffer,
* .spectrum-Slider-ramp,
* .spectrum-Slider-fill */
- height: var(--spectrum-slider-track-height, 2px);
+ height: var(
+ --spectrum-slider-track-height,
+ var(--spectrum-alias-border-size-thick)
+ );
box-sizing: border-box;
position: absolute;
z-index: 1;
top: calc(
- var(--spectrum-slider-height, var(--spectrum-global-dimension-size-400)) /
+ var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) /
2
);
left: 0;
right: auto;
- margin-top: calc(var(--spectrum-slider-fill-track-height, 2px) / -2);
+ margin-top: calc(
+ var(
+ --spectrum-slider-fill-track-height,
+ var(--spectrum-alias-border-size-thick)
+ ) / -2
+ );
pointer-events: none;
}
@@ -91,7 +99,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Slider-track,
* .spectrum-Slider-buffer,
* .spectrum-Slider-fill */
- padding: 0 var(--spectrum-slider-handle-gap, 4px) 0 0;
+ padding: 0
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ )
+ 0 0;
margin-left: calc(
var(
--spectrum-slider-handle-width,
@@ -109,7 +122,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
display: block;
height: 100%;
- border-radius: var(--spectrum-slider-track-border-radius, 1px);
+ border-radius: var(
+ --spectrum-slider-track-border-radius,
+ var(--spectrum-global-dimension-static-size-10)
+ );
}
#fill {
/* .spectrum-Slider-fill */
@@ -119,7 +135,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-slider-handle-width,
var(--spectrum-global-dimension-size-200)
- ) / 2 + var(--spectrum-slider-handle-gap, 4px)
+ ) / 2 +
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ )
);
}
.spectrum-Slider-fill--right {
@@ -129,13 +149,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-slider-handle-width,
var(--spectrum-global-dimension-size-200)
- ) / 2 + var(--spectrum-slider-handle-gap, 4px)
+ ) / 2 +
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ )
)
0 0;
}
#buffer {
/* .spectrum-Slider-buffer */
- padding: 0 var(--spectrum-slider-handle-gap, 4px) 0 0;
+ padding: 0
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ )
+ 0 0;
/* .spectrum-Slider-buffer */
z-index: 2;
}
@@ -145,7 +174,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider-buffer ~ .spectrum-Slider-buffer */
left: auto;
right: 0;
- padding: 0 0 0 var(--spectrum-slider-handle-gap, 4px);
+ padding: 0 0 0
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ );
margin-left: 0;
margin-right: calc(
var(
@@ -159,7 +192,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
margin-right: 0;
padding: 0 0 0
calc(
- var(--spectrum-slider-handle-gap, 4px) +
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ ) +
var(
--spectrum-slider-handle-width,
var(--spectrum-global-dimension-size-200)
@@ -179,7 +215,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
}
:host([variant='range']) .track:first-of-type {
/* .spectrum-Slider--range .spectrum-Slider-track:first-of-type */
- padding: 0 var(--spectrum-slider-handle-gap, 4px) 0 0;
+ padding: 0
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ )
+ 0 0;
left: 0;
right: auto;
margin-left: calc(
@@ -193,7 +234,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Slider--range .spectrum-Slider-track */
padding: 0
calc(
- var(--spectrum-slider-handle-gap, 4px) +
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ ) +
var(
--spectrum-slider-handle-width,
var(--spectrum-global-dimension-size-200)
@@ -201,7 +245,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
)
0
calc(
- var(--spectrum-slider-handle-gap, 4px) +
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ ) +
var(
--spectrum-slider-handle-width,
var(--spectrum-global-dimension-size-200)
@@ -213,7 +260,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
}
:host([variant='range']) .track:last-of-type {
/* .spectrum-Slider--range .spectrum-Slider-track:last-of-type */
- padding: 0 0 0 var(--spectrum-slider-handle-gap, 4px);
+ padding: 0 0 0
+ var(
+ --spectrum-slider-handle-gap,
+ var(--spectrum-alias-border-size-thicker)
+ );
left: auto;
right: 0;
margin-right: calc(
@@ -226,7 +277,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
#ramp {
/* .spectrum-Slider-ramp */
margin-top: 0;
- height: var(--spectrum-slider-ramp-track-height, 16px);
+ height: var(
+ --spectrum-slider-ramp-track-height,
+ var(--spectrum-global-dimension-static-size-200)
+ );
position: absolute;
left: calc(
@@ -241,7 +295,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(--spectrum-global-dimension-size-200)
) / 2 * -1
);
- top: calc(var(--spectrum-slider-ramp-track-height, 16px) / 2);
+ top: calc(
+ var(
+ --spectrum-slider-ramp-track-height,
+ var(--spectrum-global-dimension-static-size-200)
+ ) / 2
+ );
}
#ramp svg {
/* .spectrum-Slider-ramp svg */
@@ -254,7 +313,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
position: absolute;
left: 0;
top: calc(
- var(--spectrum-slider-height, var(--spectrum-global-dimension-size-400)) /
+ var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) /
2
);
z-index: 2;
@@ -285,15 +344,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
) / -2
);
- border-width: var(--spectrum-slider-handle-border-size, 2px);
+ border-width: var(
+ --spectrum-slider-handle-border-size,
+ var(--spectrum-alias-border-size-thick)
+ );
border-style: solid;
border-radius: var(
--spectrum-slider-handle-border-radius,
- var(--spectrum-global-dimension-size-100)
+ var(--spectrum-alias-border-radius-medium)
);
- transition: border-width var(--spectrum-slider-animation-duration, 130ms)
+ transition: border-width
+ var(
+ --spectrum-slider-animation-duration,
+ var(--spectrum-global-animation-duration-100)
+ )
ease-in-out;
outline: none;
@@ -393,14 +459,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
font-size: var(
--spectrum-label-text-size,
- var(--spectrum-global-dimension-size-150)
+ var(--spectrum-global-dimension-font-size-75)
+ );
+ line-height: var(
+ --spectrum-label-text-line-height,
+ var(--spectrum-global-font-line-height-small)
);
- line-height: var(--spectrum-label-text-line-height, 1.3);
/* .spectrum-Slider-labelContainer,
* .spectrum-Dial-labelContainer */
color: var(
--spectrum-label-text-color,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-label-text-color)
);
}
#label {
@@ -441,31 +510,49 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
margin-top: calc(
var(--spectrum-slider-tick-mark-height, 10px) +
- var(--spectrum-slider-track-height, 2px) / 2
+ var(
+ --spectrum-slider-track-height,
+ var(--spectrum-alias-border-size-thick)
+ ) / 2
);
}
.tick {
/* .spectrum-Slider-tick */
position: relative;
- width: var(--spectrum-slider-tick-mark-width, 2px);
+ width: var(
+ --spectrum-slider-tick-mark-width,
+ var(--spectrum-alias-border-size-thick)
+ );
}
.tick:after {
/* .spectrum-Slider-tick:after */
display: block;
position: absolute;
top: 0;
- left: calc(50% - var(--spectrum-slider-tick-mark-width, 2px) / 2);
+ left: calc(
+ 50% -
+ var(
+ --spectrum-slider-tick-mark-width,
+ var(--spectrum-alias-border-size-thick)
+ ) / 2
+ );
content: '';
- width: var(--spectrum-slider-tick-mark-width, 2px);
+ width: var(
+ --spectrum-slider-tick-mark-width,
+ var(--spectrum-alias-border-size-thick)
+ );
height: var(--spectrum-slider-tick-mark-height, 10px);
- border-radius: var(--spectrum-slider-tick-mark-border-radius, 1px);
+ border-radius: var(
+ --spectrum-slider-tick-mark-border-radius,
+ var(--spectrum-alias-border-radius-xsmall)
+ );
/* .spectrum-Slider-tick:after */
background-color: var(
--spectrum-slider-tick-mark-color,
- var(--spectrum-global-color-gray-300)
+ var(--spectrum-alias-track-color-default)
);
}
.tick .tickLabel {
@@ -497,9 +584,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
font-size: var(
--spectrum-label-text-size,
- var(--spectrum-global-dimension-size-150)
+ var(--spectrum-global-dimension-font-size-75)
+ );
+ line-height: var(
+ --spectrum-label-text-line-height,
+ var(--spectrum-global-font-line-height-small)
);
- line-height: var(--spectrum-label-text-line-height, 1.3);
}
.tick:first-of-type .tickLabel,
.tick:last-of-type .tickLabel {
@@ -541,7 +631,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider--color .spectrum-Dial-controls,
* .spectrum-Slider--color .spectrum-Dial-controls::before */
min-height: auto;
- height: var(--spectrum-slider-color-track-height, 24px);
+ height: var(
+ --spectrum-slider-color-track-height,
+ var(--spectrum-global-dimension-static-size-300)
+ );
margin-left: 0;
width: 100%;
}
@@ -599,7 +692,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Dial-handle:active,
* .spectrum-Dial.is-disabled.spectrum-Slider--color .spectrum-Dial-handle:hover,
* .spectrum-Dial.is-disabled.spectrum-Slider--color .spectrum-Dial-handle:active */
- border-width: var(--spectrum-slider-color-handle-outset-border-size, 1px);
+ border-width: var(
+ --spectrum-slider-color-handle-outset-border-size,
+ var(--spectrum-alias-border-size-thin)
+ );
}
.track::before {
/* .spectrum-Slider-track::before */
@@ -650,16 +746,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Slider-handle.is-focused */
border-color: var(
--spectrum-slider-handle-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
/* .spectrum-Slider-handle.is-focused */
border-color: var(
--spectrum-slider-handle-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
background: var(
--spectrum-slider-handle-background-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
#handle:active,
@@ -690,7 +786,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
background: var(
--spectrum-slider-handle-background-color-down,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
}
:host([variant='range']) .track:not(:first-of-type):not(:last-of-type):before {
@@ -756,7 +852,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
)
);
box-shadow: inset 0 0 0 1px
- var(--spectrum-slider-color-track-border-color, rgba(0, 0, 0, 0.05));
+ var(
+ --spectrum-slider-color-track-border-color,
+ var(--spectrum-alias-border-color-translucent-dark)
+ );
}
:host([variant='color']) .track::before {
/* .spectrum-Slider--color .spectrum-Slider-track::before */
@@ -769,25 +868,28 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
box-shadow: inset 0 0 0 1px
var(
--spectrum-slider-color-handle-inset-border-color,
- rgba(0, 0, 0, 0.05)
+ var(--spectrum-alias-border-color-translucent-dark)
),
0 0 0 1px
var(
--spectrum-slider-color-handle-outset-border-color,
- rgba(0, 0, 0, 0.05)
+ var(--spectrum-alias-border-color-translucent-dark)
);
border-color: var(
--spectrum-slider-color-handle-border-color,
var(--spectrum-global-color-gray-50)
);
- background: var(--spectrum-slider-color-handle-color, rgba(0, 0, 0, 0));
+ background: var(
+ --spectrum-slider-color-handle-color,
+ var(--spectrum-alias-border-color-transparent)
+ );
}
:host([variant='color'][handle-highlight]) #handle {
/* .spectrum-Slider--color .spectrum-Slider-handle.is-focused */
box-shadow: 0 0 0 1px
var(
--spectrum-slider-color-handle-outset-border-color-key-focus,
- rgba(0, 0, 0, 0.05)
+ var(--spectrum-alias-border-color-translucent-dark)
);
}
:host([disabled]) #labelContainer,
@@ -796,7 +898,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider.is-disabled .spectrum-Dial-labelContainer */
color: var(
--spectrum-label-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([disabled]) #handle,
@@ -826,7 +928,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
background: var(
--spectrum-slider-handle-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
}
:host([disabled]) .track::before {
@@ -854,7 +956,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Slider.is-disabled .spectrum-Slider-buffer::before */
background: var(
--spectrum-slider-player-track-buffer-color-disabled,
- var(--spectrum-global-color-gray-300)
+ var(--spectrum-alias-track-color-default)
);
}
:host([disabled]) #ramp path {
@@ -878,7 +980,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Dial-handle */
background: var(
--spectrum-slider-color-handle-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
box-shadow: none;
border-color: var(
@@ -896,7 +998,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Slider.is-disabled.spectrum-Slider--color .spectrum-Dial-handle:active */
background: var(
--spectrum-slider-color-handle-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
box-shadow: none;
border-color: var(
diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css
index 7ef4931506..ee0e9d53e4 100644
--- a/packages/status-light/src/spectrum-status-light.css
+++ b/packages/status-light/src/spectrum-status-light.css
@@ -14,7 +14,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-StatusLight */
min-height: var(
--spectrum-statuslight-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
display: -ms-flexbox;
display: flex;
@@ -28,13 +28,16 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
font-size: var(
--spectrum-statuslight-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-statuslight-text-font-weight,
+ var(--spectrum-alias-body-text-font-weight)
);
- font-weight: var(--spectrum-statuslight-text-font-weight, 400);
/* .spectrum-StatusLight */
color: var(
--spectrum-statuslight-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
#root::before {
@@ -75,7 +78,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-StatusLight.is-disabled */
color: var(
--spectrum-statuslight-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
#root[disabled]::before,
@@ -91,21 +94,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-StatusLight--negative::before */
background-color: var(
--spectrum-statuslight-negative-dot-color,
- var(--spectrum-global-color-red-400)
+ var(--spectrum-semantic-negative-color-status)
);
}
:host([variant='notice']) #root::before {
/* .spectrum-StatusLight--notice::before */
background-color: var(
--spectrum-statuslight-notice-dot-color,
- var(--spectrum-global-color-orange-400)
+ var(--spectrum-semantic-notice-color-status)
);
}
:host([variant='positive']) #root::before {
/* .spectrum-StatusLight--positive::before */
background-color: var(
--spectrum-statuslight-positive-dot-color,
- var(--spectrum-global-color-green-400)
+ var(--spectrum-semantic-positive-color-status)
);
}
:host([variant='info']) #root::before,
@@ -114,7 +117,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-StatusLight--active::before */
background-color: var(
--spectrum-statuslight-info-dot-color,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-semantic-informative-color-status)
);
}
:host([variant='neutral']) #root::before {
diff --git a/packages/styles/core-global.css b/packages/styles/core-global.css
index bf39a0032d..9aa9971ef8 100644
--- a/packages/styles/core-global.css
+++ b/packages/styles/core-global.css
@@ -10,9 +10,29 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
-/* generated from dna-version: 5.15.0 */
+/* stylelint-disable no-duplicate-selectors */
:root,
:host {
+ /* spectrum-animationGlobals.css */
+ --spectrum-global-animation-duration-0: 0ms;
+ --spectrum-global-animation-duration-100: 130ms;
+ --spectrum-global-animation-duration-200: 160ms;
+ --spectrum-global-animation-duration-300: 190ms;
+ --spectrum-global-animation-duration-400: 220ms;
+ --spectrum-global-animation-duration-500: 250ms;
+ --spectrum-global-animation-duration-600: 300ms;
+ --spectrum-global-animation-duration-700: 350ms;
+ --spectrum-global-animation-duration-800: 400ms;
+ --spectrum-global-animation-duration-900: 450ms;
+ --spectrum-global-animation-duration-1000: 500ms;
+ --spectrum-global-animation-duration-2000: 1000ms;
+ --spectrum-global-animation-duration-4000: 2000ms;
+ --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
+ --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
+ --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
+ --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1);
+
+ /* spectrum-colorGlobals.css */
--spectrum-global-color-static-black: rgb(0, 0, 0);
--spectrum-global-color-static-white: rgb(255, 255, 255);
--spectrum-global-color-static-blue: rgb(20, 115, 230);
@@ -43,6 +63,38 @@ governing permissions and limitations under the License.
--spectrum-global-color-static-green-500: rgb(45, 157, 120);
--spectrum-global-color-static-green-600: rgb(38, 142, 108);
--spectrum-global-color-static-green-700: rgb(18, 128, 92);
+ --spectrum-global-color-static-celery-400: rgb(75, 195, 95);
+ --spectrum-global-color-static-celery-500: rgb(68, 181, 86);
+ --spectrum-global-color-static-celery-600: rgb(61, 167, 78);
+ --spectrum-global-color-static-celery-700: rgb(55, 153, 71);
+ --spectrum-global-color-static-chartreuse-400: rgb(142, 222, 73);
+ --spectrum-global-color-static-chartreuse-500: rgb(133, 208, 68);
+ --spectrum-global-color-static-chartreuse-600: rgb(124, 195, 63);
+ --spectrum-global-color-static-chartreuse-700: rgb(115, 181, 58);
+ --spectrum-global-color-static-yellow-400: rgb(237, 204, 0);
+ --spectrum-global-color-static-yellow-500: rgb(223, 191, 0);
+ --spectrum-global-color-static-yellow-600: rgb(210, 178, 0);
+ --spectrum-global-color-static-yellow-700: rgb(196, 166, 0);
+ --spectrum-global-color-static-magenta-400: rgb(226, 73, 157);
+ --spectrum-global-color-static-magenta-500: rgb(216, 55, 144);
+ --spectrum-global-color-static-magenta-600: rgb(202, 41, 130);
+ --spectrum-global-color-static-magenta-700: rgb(188, 28, 116);
+ --spectrum-global-color-static-fuchsia-400: rgb(207, 62, 220);
+ --spectrum-global-color-static-fuchsia-500: rgb(192, 56, 204);
+ --spectrum-global-color-static-fuchsia-600: rgb(177, 48, 189);
+ --spectrum-global-color-static-fuchsia-700: rgb(162, 40, 173);
+ --spectrum-global-color-static-purple-400: rgb(157, 100, 225);
+ --spectrum-global-color-static-purple-500: rgb(146, 86, 217);
+ --spectrum-global-color-static-purple-600: rgb(134, 76, 204);
+ --spectrum-global-color-static-purple-700: rgb(122, 66, 191);
+ --spectrum-global-color-static-indigo-400: rgb(117, 117, 241);
+ --spectrum-global-color-static-indigo-500: rgb(103, 103, 236);
+ --spectrum-global-color-static-indigo-600: rgb(92, 92, 224);
+ --spectrum-global-color-static-indigo-700: rgb(81, 81, 211);
+ --spectrum-global-color-static-seafoam-400: rgb(32, 163, 168);
+ --spectrum-global-color-static-seafoam-500: rgb(27, 149, 154);
+ --spectrum-global-color-static-seafoam-600: rgb(22, 135, 140);
+ --spectrum-global-color-static-seafoam-700: rgb(15, 121, 125);
--spectrum-global-color-opacity-100: 1;
--spectrum-global-color-opacity-90: 0.9;
--spectrum-global-color-opacity-80: 0.8;
@@ -59,32 +111,164 @@ governing permissions and limitations under the License.
--spectrum-global-color-opacity-6: 0.06;
--spectrum-global-color-opacity-5: 0.05;
--spectrum-global-color-opacity-4: 0.04;
- --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro',
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
- 'Trebuchet MS', 'Lucida Grande', sans-serif;
- --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro',
- Georgia, serif;
- --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace;
- --spectrum-global-font-weight-thin: 100;
- --spectrum-global-font-weight-ultra-light: 200;
- --spectrum-global-font-weight-light: 300;
- --spectrum-global-font-weight-regular: 400;
- --spectrum-global-font-weight-medium: 500;
- --spectrum-global-font-weight-semi-bold: 600;
- --spectrum-global-font-weight-bold: 700;
- --spectrum-global-font-weight-extra-bold: 800;
- --spectrum-global-font-weight-black: 900;
- --spectrum-global-font-style-regular: normal;
- --spectrum-global-font-style-italic: italic;
- --spectrum-global-font-letter-spacing-none: 0;
- --spectrum-global-font-letter-spacing-small: 0.0125em;
- --spectrum-global-font-letter-spacing-han: 0.05em;
- --spectrum-global-font-letter-spacing-medium: 0.06em;
- --spectrum-global-font-line-height-large: 1.7;
- --spectrum-global-font-line-height-medium: 1.5;
- --spectrum-global-font-line-height-small: 1.3;
- --spectrum-global-font-multiplier-25: 0.25em;
- --spectrum-global-font-multiplier-75: 0.75em;
+
+ /* spectrum-colorSemantics.css */
+ --spectrum-semantic-negative-color-background: var(
+ --spectrum-global-color-static-red-700
+ );
+ --spectrum-semantic-negative-color-default: var(
+ --spectrum-global-color-red-500
+ );
+ --spectrum-semantic-negative-color-dark: var(
+ --spectrum-global-color-red-600
+ );
+ --spectrum-semantic-negative-color-border: var(
+ --spectrum-global-color-red-400
+ );
+ --spectrum-semantic-negative-color-icon: var(
+ --spectrum-global-color-red-600
+ );
+ --spectrum-semantic-negative-color-status: var(
+ --spectrum-global-color-red-400
+ );
+ --spectrum-semantic-negative-color-text-large: var(
+ --spectrum-global-color-red-500
+ );
+ --spectrum-semantic-negative-color-text-small: var(
+ --spectrum-global-color-red-600
+ );
+ --spectrum-semantic-negative-color-state-down: var(
+ --spectrum-global-color-red-700
+ );
+ --spectrum-semantic-negative-color-state-focus: var(
+ --spectrum-global-color-red-400
+ );
+ --spectrum-semantic-notice-color-background: var(
+ --spectrum-global-color-static-orange-700
+ );
+ --spectrum-semantic-notice-color-default: var(
+ --spectrum-global-color-orange-500
+ );
+ --spectrum-semantic-notice-color-dark: var(
+ --spectrum-global-color-orange-600
+ );
+ --spectrum-semantic-notice-color-border: var(
+ --spectrum-global-color-orange-400
+ );
+ --spectrum-semantic-notice-color-icon: var(
+ --spectrum-global-color-orange-600
+ );
+ --spectrum-semantic-notice-color-status: var(
+ --spectrum-global-color-orange-400
+ );
+ --spectrum-semantic-notice-color-text-large: var(
+ --spectrum-global-color-orange-500
+ );
+ --spectrum-semantic-notice-color-text-small: var(
+ --spectrum-global-color-orange-600
+ );
+ --spectrum-semantic-notice-color-state-down: var(
+ --spectrum-global-color-orange-700
+ );
+ --spectrum-semantic-notice-color-state-focus: var(
+ --spectrum-global-color-orange-400
+ );
+ --spectrum-semantic-positive-color-background: var(
+ --spectrum-global-color-static-green-700
+ );
+ --spectrum-semantic-positive-color-default: var(
+ --spectrum-global-color-green-500
+ );
+ --spectrum-semantic-positive-color-dark: var(
+ --spectrum-global-color-green-600
+ );
+ --spectrum-semantic-positive-color-border: var(
+ --spectrum-global-color-green-400
+ );
+ --spectrum-semantic-positive-color-icon: var(
+ --spectrum-global-color-green-600
+ );
+ --spectrum-semantic-positive-color-status: var(
+ --spectrum-global-color-green-400
+ );
+ --spectrum-semantic-positive-color-text-large: var(
+ --spectrum-global-color-green-500
+ );
+ --spectrum-semantic-positive-color-text-small: var(
+ --spectrum-global-color-green-600
+ );
+ --spectrum-semantic-positive-color-state-down: var(
+ --spectrum-global-color-green-700
+ );
+ --spectrum-semantic-positive-color-state-focus: var(
+ --spectrum-global-color-green-400
+ );
+ --spectrum-semantic-informative-color-background: var(
+ --spectrum-global-color-static-blue-700
+ );
+ --spectrum-semantic-informative-color-default: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-semantic-informative-color-dark: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-semantic-informative-color-border: var(
+ --spectrum-global-color-blue-400
+ );
+ --spectrum-semantic-informative-color-icon: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-semantic-informative-color-status: var(
+ --spectrum-global-color-blue-400
+ );
+ --spectrum-semantic-informative-color-text-large: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-semantic-informative-color-text-small: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-semantic-informative-color-state-down: var(
+ --spectrum-global-color-blue-700
+ );
+ --spectrum-semantic-informative-color-state-focus: var(
+ --spectrum-global-color-blue-400
+ );
+ --spectrum-semantic-cta-color-background-default: var(
+ --spectrum-global-color-static-blue-600
+ );
+ --spectrum-semantic-cta-color-background-hover: var(
+ --spectrum-global-color-static-blue-700
+ );
+ --spectrum-semantic-cta-color-background-down: var(
+ --spectrum-global-color-static-blue-700
+ );
+ --spectrum-semantic-cta-color-background-key-focus: var(
+ --spectrum-global-color-static-blue-600
+ );
+ --spectrum-semantic-background-color-key-focus: var(
+ --spectrum-global-color-static-blue-600
+ );
+ --spectrum-semantic-neutral-color-background: var(
+ --spectrum-global-color-static-gray-700
+ );
+ --spectrum-semantic-presence-color-1: var(
+ --spectrum-global-color-static-red-500
+ );
+ --spectrum-semantic-presence-color-2: var(
+ --spectrum-global-color-static-orange-400
+ );
+ --spectrum-semantic-presence-color-3: var(
+ --spectrum-global-color-static-yellow-400
+ );
+ --spectrum-semantic-presence-color-4: rgb(75, 204, 162);
+ --spectrum-semantic-presence-color-5: rgb(0, 199, 255);
+ --spectrum-semantic-presence-color-6: rgb(0, 140, 184);
+ --spectrum-semantic-presence-color-7: rgb(126, 75, 243);
+ --spectrum-semantic-presence-color-8: var(
+ --spectrum-global-color-static-fuchsia-600
+ );
+
+ /* spectrum-dimensionGlobals.css */
--spectrum-global-dimension-static-size-0: 0px;
--spectrum-global-dimension-static-size-10: 1px;
--spectrum-global-dimension-static-size-25: 2px;
@@ -141,21 +325,560 @@ governing permissions and limitations under the License.
--spectrum-global-dimension-static-grid-columns: 12;
--spectrum-global-dimension-static-grid-fluid-width: 100%;
--spectrum-global-dimension-static-grid-fixed-max-width: 1280px;
- --spectrum-global-animation-duration-0: 0ms;
- --spectrum-global-animation-duration-100: 130ms;
- --spectrum-global-animation-duration-200: 160ms;
- --spectrum-global-animation-duration-300: 190ms;
- --spectrum-global-animation-duration-400: 220ms;
- --spectrum-global-animation-duration-500: 250ms;
- --spectrum-global-animation-duration-600: 300ms;
- --spectrum-global-animation-duration-700: 350ms;
- --spectrum-global-animation-duration-800: 400ms;
- --spectrum-global-animation-duration-900: 450ms;
- --spectrum-global-animation-duration-1000: 500ms;
- --spectrum-global-animation-duration-2000: 1000ms;
- --spectrum-global-animation-duration-4000: 2000ms;
- --spectrum-global-animation-ease-in-out: (0.45, 0, 0.4, 1);
- --spectrum-global-animation-ease-in: (0.5, 0, 1, 1);
- --spectrum-global-animation-ease-out: (0, 0, 0.4, 1);
- --spectrum-global-animation-linear: (0, 0, 1, 1);
+
+ /* spectrum-fontGlobals.css */
+ --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro',
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
+ 'Trebuchet MS', 'Lucida Grande', sans-serif;
+ --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro',
+ Georgia, serif;
+ --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace;
+ --spectrum-global-font-weight-thin: 100;
+ --spectrum-global-font-weight-ultra-light: 200;
+ --spectrum-global-font-weight-light: 300;
+ --spectrum-global-font-weight-regular: 400;
+ --spectrum-global-font-weight-medium: 500;
+ --spectrum-global-font-weight-semi-bold: 600;
+ --spectrum-global-font-weight-bold: 700;
+ --spectrum-global-font-weight-extra-bold: 800;
+ --spectrum-global-font-weight-black: 900;
+ --spectrum-global-font-style-regular: normal;
+ --spectrum-global-font-style-italic: italic;
+ --spectrum-global-font-letter-spacing-none: 0;
+ --spectrum-global-font-letter-spacing-small: 0.0125em;
+ --spectrum-global-font-letter-spacing-han: 0.05em;
+ --spectrum-global-font-letter-spacing-medium: 0.06em;
+ --spectrum-global-font-line-height-large: 1.7;
+ --spectrum-global-font-line-height-medium: 1.5;
+ --spectrum-global-font-line-height-small: 1.3;
+ --spectrum-global-font-multiplier-25: 0.25em;
+ --spectrum-global-font-multiplier-75: 0.75em;
+
+ /* spectrum-staticAliases.css */
+ --spectrum-alias-border-size-thin: var(
+ --spectrum-global-dimension-static-size-10
+ );
+ --spectrum-alias-border-size-thick: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-alias-border-size-thicker: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-alias-border-size-thickest: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-alias-border-offset-thin: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-alias-border-offset-thick: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-alias-border-offset-thicker: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-alias-border-offset-thickest: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-alias-grid-baseline: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-alias-grid-gutter-xsmall: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-alias-grid-gutter-small: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-alias-grid-gutter-medium: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-alias-grid-gutter-large: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-alias-grid-gutter-xlarge: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-alias-grid-margin-xsmall: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-alias-grid-margin-small: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-alias-grid-margin-medium: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-alias-grid-margin-large: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-alias-grid-margin-xlarge: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-alias-grid-layout-region-margin-bottom-small: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-alias-grid-layout-region-margin-bottom-medium: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-alias-grid-layout-region-margin-bottom-large: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-alias-radial-reaction-size-default: var(
+ --spectrum-global-dimension-static-size-550
+ );
+ --spectrum-alias-font-family-ar: myriad-arabic, adobe-clean,
+ 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+ --spectrum-alias-font-family-he: myriad-hebrew, adobe-clean,
+ 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+ --spectrum-alias-font-family-zh: adobe-clean-han-traditional,
+ source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif';
+ --spectrum-alias-font-family-zhhans: adobe-clean-han-simplified-c,
+ source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif';
+ --spectrum-alias-font-family-ko: adobe-clean-han-korean, source-han-korean,
+ 'Malgun Gothic', 'Apple Gothic', 'sans-serif';
+ --spectrum-alias-font-family-ja: adobe-clean-han-japanese,
+ source-han-japanese, 'Yu Gothic', '\\30E1 \\30A4 \\30EA \\30AA',
+ '\\30D2 \\30E9 \\30AE \\30CE \\89D2 \\30B4 Pro W3',
+ 'Hiragino Kaku Gothic Pro W3', 'Osaka',
+ '\\FF2D \\FF33 \\FF30 \\30B4 \\30B7 \\30C3 \\30AF', 'MS PGothic',
+ 'sans-serif';
+ --spectrum-alias-font-family-condensed: adobe-clean-han-traditional,
+ source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean,
+ 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+ --spectrum-alias-line-height-body: var(
+ --spectrum-global-font-line-height-medium
+ );
+ --spectrum-alias-line-height-title: var(
+ --spectrum-global-font-line-height-small
+ );
+ --spectrum-alias-body-han-text-line-height: var(
+ --spectrum-global-font-line-height-large
+ );
+ --spectrum-alias-body-text-font-family: var(
+ --spectrum-global-font-family-base
+ );
+ --spectrum-alias-body-text-line-height: var(
+ --spectrum-global-font-line-height-medium
+ );
+ --spectrum-alias-body-text-font-weight: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-body-text-font-weight-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-button-text-line-height: var(
+ --spectrum-global-font-line-height-small
+ );
+ --spectrum-alias-heading-han-text-line-height: var(
+ --spectrum-global-font-line-height-medium
+ );
+ --spectrum-alias-heading-text-line-height: var(
+ --spectrum-global-font-line-height-small
+ );
+ --spectrum-alias-heading-text-font-weight-regular: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-heading-text-font-weight-regular-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-heading-text-font-weight-quiet: var(
+ --spectrum-global-font-weight-light
+ );
+ --spectrum-alias-heading-text-font-weight-quiet-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-heading-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-heading-text-font-weight-strong-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-subheading-text-font-weight: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-subheading-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-detail-text-font-weight: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-detail-text-font-weight-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-serif-text-font-family: var(
+ --spectrum-global-font-family-serif
+ );
+ --spectrum-alias-article-text-font-family: var(
+ --spectrum-global-font-family-serif
+ );
+ --spectrum-alias-article-body-text-font-weight: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-article-body-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-article-heading-text-font-weight: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-article-heading-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-article-heading-text-font-weight-quiet: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-article-subheading-text-font-weight: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-article-subheading-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-article-detail-text-font-weight: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-article-detail-text-font-weight-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-code-text-font-family: var(
+ --spectrum-global-font-family-code
+ );
+ --spectrum-alias-han-heading-text-font-weight-regular: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(
+ --spectrum-global-font-weight-extra-bold
+ );
+ --spectrum-alias-han-heading-text-font-weight-regular-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-heading-text-font-weight-quiet: var(
+ --spectrum-global-font-weight-light
+ );
+ --spectrum-alias-han-heading-text-font-weight-quiet-emphasis: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-han-heading-text-font-weight-light: var(
+ --spectrum-global-font-weight-light
+ );
+ --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-han-heading-text-font-weight-light-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-han-heading-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-heading-text-font-weight-strong-emphasis: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-heading-text-font-weight-strong-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-heading-text-font-weight-heavy: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-body-text-font-weight-regular: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-han-body-text-font-weight-emphasis: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-han-body-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-subheading-text-font-weight-regular: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-han-subheading-text-font-weight-emphasis: var(
+ --spectrum-global-font-weight-extra-bold
+ );
+ --spectrum-alias-han-subheading-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-han-detail-text-font-weight: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-han-detail-text-font-weight-emphasis: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-han-detail-text-font-weight-strong: var(
+ --spectrum-global-font-weight-black
+ );
+ --spectrum-alias-code-text-font-weight-regular: var(
+ --spectrum-global-font-weight-regular
+ );
+ --spectrum-alias-code-text-font-weight-strong: var(
+ --spectrum-global-font-weight-bold
+ );
+ --spectrum-alias-code-text-line-height: var(
+ --spectrum-global-font-line-height-medium
+ );
+ --spectrum-alias-heading-margin-bottom: var(
+ --spectrum-global-font-multiplier-25
+ );
+ --spectrum-alias-body-margin-bottom: var(
+ --spectrum-global-font-multiplier-75
+ );
+}
+
+:root,
+:host {
+ /* spectrum-dimensionAliases.css */
+ --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50);
+ --spectrum-alias-dropshadow-offset-y: var(
+ --spectrum-global-dimension-size-10
+ );
+ --spectrum-alias-font-size-default: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-alias-line-height-small: var(
+ --spectrum-global-dimension-size-200
+ );
+ --spectrum-alias-line-height-medium: var(
+ --spectrum-global-dimension-size-250
+ );
+ --spectrum-alias-line-height-large: var(
+ --spectrum-global-dimension-size-300
+ );
+ --spectrum-alias-line-height-xlarge: var(
+ --spectrum-global-dimension-size-400
+ );
+ --spectrum-alias-line-height-xxlarge: var(
+ --spectrum-global-dimension-size-600
+ );
+ --spectrum-alias-layout-label-gap-size: var(
+ --spectrum-global-dimension-size-100
+ );
+ --spectrum-alias-pill-button-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-alias-pill-button-text-baseline: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-alias-border-radius-xsmall: var(
+ --spectrum-global-dimension-size-10
+ );
+ --spectrum-alias-border-radius-small: var(
+ --spectrum-global-dimension-size-25
+ );
+ --spectrum-alias-border-radius-regular: var(
+ --spectrum-global-dimension-size-50
+ );
+ --spectrum-alias-border-radius-medium: var(
+ --spectrum-global-dimension-size-100
+ );
+ --spectrum-alias-border-radius-large: var(
+ --spectrum-global-dimension-size-200
+ );
+ --spectrum-alias-single-line-height: var(
+ --spectrum-global-dimension-size-400
+ );
+ --spectrum-alias-single-line-width: var(
+ --spectrum-global-dimension-size-2400
+ );
+ --spectrum-alias-workflow-icon-size: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-alias-heading-han-display1-text-size: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-han-xxxl-text-size: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-han-display1-margin-top: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-han-xxxl-margin-top: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-han-display2-text-size: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-han-xxl-text-size: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-han-display2-margin-top: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading-han-xxl-margin-top: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading1-han-text-size: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading-han-xl-text-size: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading1-han-margin-top: var(
+ --spectrum-global-dimension-font-size-700
+ );
+ --spectrum-alias-heading-han-xl-margin-top: var(
+ --spectrum-global-dimension-font-size-700
+ );
+ --spectrum-alias-heading2-han-text-size: var(
+ --spectrum-global-dimension-font-size-600
+ );
+ --spectrum-alias-heading-han-l-text-size: var(
+ --spectrum-global-dimension-font-size-600
+ );
+ --spectrum-alias-heading2-han-margin-top: var(
+ --spectrum-global-dimension-font-size-500
+ );
+ --spectrum-alias-heading-han-l-margin-top: var(
+ --spectrum-global-dimension-font-size-500
+ );
+ --spectrum-alias-heading3-han-text-size: var(
+ --spectrum-global-dimension-font-size-400
+ );
+ --spectrum-alias-heading-han-m-text-size: var(
+ --spectrum-global-dimension-font-size-400
+ );
+ --spectrum-alias-heading3-han-margin-top: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-alias-heading-han-m-margin-top: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-alias-heading4-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-alias-heading-s-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-alias-heading4-margin-top: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-alias-heading-s-margin-top: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-alias-heading5-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-alias-heading-xs-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-alias-heading5-margin-top: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-alias-heading-xs-margin-top: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-alias-heading6-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-alias-heading-xxs-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-alias-heading6-margin-top: var(
+ --spectrum-global-dimension-font-size-75
+ );
+ --spectrum-alias-heading-xxs-margin-top: var(
+ --spectrum-global-dimension-font-size-75
+ );
}
+
+:root,
+:host {
+ /* spectrum-colorAliases.css */
+ --spectrum-alias-background-color-default: var(
+ --spectrum-global-color-gray-100
+ );
+ --spectrum-alias-background-color-transparent: transparent;
+ --spectrum-alias-background-color-label-gray: rgb(112, 112, 112);
+ --spectrum-alias-background-color-quickactions-overlay: rgba(0, 0, 0, 0.2);
+ --spectrum-alias-placeholder-text-color: var(
+ --spectrum-global-color-gray-600
+ );
+ --spectrum-alias-placeholder-text-color-hover: var(
+ --spectrum-global-color-gray-900
+ );
+ --spectrum-alias-placeholder-text-color-down: var(
+ --spectrum-global-color-gray-900
+ );
+ --spectrum-alias-placeholder-text-color-selected: var(
+ --spectrum-global-color-gray-800
+ );
+ --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700);
+ --spectrum-alias-text-color: var(--spectrum-global-color-gray-800);
+ --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-text-color-key-focus: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-alias-text-color-mouse-focus: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500);
+ --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500);
+ --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600);
+ --spectrum-alias-text-color-selected-neutral: var(
+ --spectrum-global-color-gray-900
+ );
+ --spectrum-alias-title-text-color: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-border-color: var(--spectrum-global-color-gray-300);
+ --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-400);
+ --spectrum-alias-border-color-focus: var(--spectrum-global-color-blue-400);
+ --spectrum-alias-border-color-down: var(--spectrum-global-color-blue-500);
+ --spectrum-alias-border-color-extralight: var(
+ --spectrum-global-color-gray-100
+ );
+ --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200);
+ --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300);
+ --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400);
+ --spectrum-alias-border-color-transparent: transparent;
+ --spectrum-alias-border-color-translucent-dark: rgba(0, 0, 0, 0.05);
+ --spectrum-alias-border-color-translucent-darker: rgba(0, 0, 0, 0.1);
+ --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
+ --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
+ --spectrum-alias-track-color-disabled: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-alias-track-color-over-background: rgba(255, 255, 255, 0.2);
+ --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
+ --spectrum-alias-icon-color-over-background: var(
+ --spectrum-global-color-static-white
+ );
+ --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-icon-color-focus: var(--spectrum-global-color-gray-900);
+ --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
+ --spectrum-alias-icon-color-selected-neutral: var(
+ --spectrum-global-color-gray-900
+ );
+ --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500);
+ --spectrum-alias-icon-color-selected-hover: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-alias-icon-color-selected-down: var(
+ --spectrum-global-color-blue-700
+ );
+ --spectrum-alias-icon-color-selected-focus: var(
+ --spectrum-global-color-blue-600
+ );
+ --spectrum-alias-icon-color-error: var(--spectrum-global-color-red-400);
+ --spectrum-alias-toolbar-background-color: var(
+ --spectrum-global-color-gray-100
+ );
+}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/packages/styles/scale-large.css b/packages/styles/scale-large.css
index 59d28d9c14..51e6c6b8fe 100644
--- a/packages/styles/scale-large.css
+++ b/packages/styles/scale-large.css
@@ -10,55 +10,45 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
+/* stylelint-disable no-duplicate-selectors */
:root,
:host {
--spectrum-global-dimension-scale-factor: 1.25;
+ --spectrum-global-dimension-size-0: 0px;
+ --spectrum-global-dimension-size-10: 1px;
+ --spectrum-global-dimension-size-25: 2px;
--spectrum-global-dimension-size-40: 4px;
- --spectrum-actionbutton-touch-hit-x: 4px;
- --spectrum-dropdown-quiet-touch-hit-y: 4px;
- --spectrum-selectlist-option-icon-margin-top: 4px;
--spectrum-global-dimension-size-50: 5px;
--spectrum-global-dimension-size-65: 6px;
--spectrum-global-dimension-size-75: 8px;
- --spectrum-colorhandle-loupe-margin: 8px;
- --spectrum-radio-margin-bottom: 8px;
--spectrum-global-dimension-size-85: 9px;
- --spectrum-colorslider-touch-hit-y: 9px;
--spectrum-global-dimension-size-100: 10px;
- --spectrum-icon-skip-left-width: 10px;
--spectrum-global-dimension-size-115: 11px;
--spectrum-global-dimension-size-125: 13px;
- --spectrum-global-dimension-font-size-50: 13px;
--spectrum-global-dimension-size-130: 14px;
- --spectrum-slider-handle-touch-hit-x: 14px;
--spectrum-global-dimension-size-150: 15px;
- --spectrum-dialog-content-text-size: 15px;
--spectrum-global-dimension-size-160: 16px;
- --spectrum-icon-checkmark-medium-width: 16px;
- --spectrum-selectlist-option-icon-padding-y: 16px;
--spectrum-global-dimension-size-175: 18px;
- --spectrum-global-dimension-font-size-150: 18px;
--spectrum-global-dimension-size-200: 20px;
- --spectrum-fieldbutton-quiet-min-width: 20px;
--spectrum-global-dimension-size-225: 22px;
- --spectrum-alias-heading3-margin-top: 22px;
--spectrum-global-dimension-size-250: 25px;
- --spectrum-tabs-baseline: 25px;
--spectrum-global-dimension-size-300: 30px;
--spectrum-global-dimension-size-350: 35px;
--spectrum-global-dimension-size-400: 40px;
- --spectrum-dialog-content-margin-bottom: 40px;
--spectrum-global-dimension-size-450: 45px;
--spectrum-global-dimension-size-500: 50px;
--spectrum-global-dimension-size-550: 56px;
--spectrum-global-dimension-size-600: 60px;
+ --spectrum-global-dimension-size-675: 68px;
--spectrum-global-dimension-size-700: 70px;
--spectrum-global-dimension-size-800: 80px;
--spectrum-global-dimension-size-900: 112px;
--spectrum-global-dimension-size-1000: 100px;
--spectrum-global-dimension-size-1200: 120px;
+ --spectrum-global-dimension-size-1250: 125px;
--spectrum-global-dimension-size-1600: 160px;
--spectrum-global-dimension-size-1700: 212px;
+ --spectrum-global-dimension-size-2000: 200px;
--spectrum-global-dimension-size-2400: 240px;
--spectrum-global-dimension-size-3000: 300px;
--spectrum-global-dimension-size-3400: 340px;
@@ -67,33 +57,725 @@ governing permissions and limitations under the License.
--spectrum-global-dimension-size-5000: 500px;
--spectrum-global-dimension-size-6000: 600px;
--spectrum-global-dimension-font-size-25: 12px;
- --spectrum-checkbox-text-gap-key-focus: 12px;
+ --spectrum-global-dimension-font-size-50: 13px;
+ --spectrum-global-dimension-font-size-75: 15px;
--spectrum-global-dimension-font-size-100: 17px;
+ --spectrum-global-dimension-font-size-150: 18px;
--spectrum-global-dimension-font-size-200: 19px;
- --spectrum-dialog-title-text-size: 19px;
+ --spectrum-global-dimension-font-size-300: 22px;
--spectrum-global-dimension-font-size-400: 24px;
- --spectrum-alias-heading3-text-size: 24px;
- --spectrum-dialog-padding: 24px;
--spectrum-global-dimension-font-size-500: 27px;
- --spectrum-alias-heading2-margin-top: 27px;
--spectrum-global-dimension-font-size-600: 31px;
- --spectrum-alias-heading2-text-size: 31px;
--spectrum-global-dimension-font-size-700: 34px;
- --spectrum-alias-heading1-margin-top: 34px;
--spectrum-global-dimension-font-size-800: 39px;
- --spectrum-alias-heading-display2-margin-top: 39px;
--spectrum-global-dimension-font-size-900: 44px;
- --spectrum-alias-heading-display1-margin-top: 44px;
--spectrum-global-dimension-font-size-1000: 49px;
- --spectrum-alias-heading-display1-text-size: 49px;
--spectrum-global-dimension-font-size-1100: 55px;
+ --spectrum-alias-heading-display1-text-size: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-xxxl-text-size: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-display1-margin-top: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-xxxl-margin-top: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-display2-text-size: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-xxl-text-size: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-display2-margin-top: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading-xxl-margin-top: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading1-text-size: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading-xl-text-size: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading1-margin-top: var(
+ --spectrum-global-dimension-font-size-700
+ );
+ --spectrum-alias-heading-xl-margin-top: var(
+ --spectrum-global-dimension-font-size-700
+ );
+ --spectrum-alias-heading2-text-size: var(
+ --spectrum-global-dimension-font-size-600
+ );
+ --spectrum-alias-heading-l-text-size: var(
+ --spectrum-global-dimension-font-size-600
+ );
+ --spectrum-alias-heading2-margin-top: var(
+ --spectrum-global-dimension-font-size-500
+ );
+ --spectrum-alias-heading-l-margin-top: var(
+ --spectrum-global-dimension-font-size-500
+ );
+ --spectrum-alias-heading3-text-size: var(
+ --spectrum-global-dimension-font-size-400
+ );
+ --spectrum-alias-heading-m-text-size: var(
+ --spectrum-global-dimension-font-size-400
+ );
+ --spectrum-alias-heading3-margin-top: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-alias-heading-m-margin-top: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-actionbutton-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-emphasized-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-quiet-emphasized-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-barloader-large-border-radius: 4px;
+ --spectrum-barloader-large-indeterminate-border-radius: 4px;
+ --spectrum-barloader-large-over-background-border-radius: 4px;
--spectrum-barloader-small-border-radius: 3px;
- --spectrum-pagination-page-button-line-height: 32px;
+ --spectrum-barloader-small-indeterminate-border-radius: 3px;
+ --spectrum-barloader-small-over-background-border-radius: 3px;
+ --spectrum-breadcrumb-compact-item-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-breadcrumb-compact-button-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-breadcrumb-item-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-breadcrumb-button-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-breadcrumb-multiline-item-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-breadcrumb-multiline-button-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-cta-text-padding-bottom: [object Object];
--spectrum-button-cta-min-width: 90px;
- --spectrum-selectlist-option-height: 48px;
- --spectrum-colorwheel-min-size: 208px;
- --spectrum-dialog-max-width: 400px;
- --spectrum-switch-track-width: 36px;
+ --spectrum-button-cta-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-cta-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-over-background-text-padding-bottom: [object Object];
+ --spectrum-button-over-background-min-width: 90px;
+ --spectrum-button-over-background-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-over-background-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-primary-text-padding-bottom: [object Object];
+ --spectrum-button-primary-min-width: 90px;
+ --spectrum-button-primary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-primary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-quiet-over-background-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-over-background-min-width: 90px;
+ --spectrum-button-quiet-over-background-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-over-background-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-quiet-over-background-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-primary-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-primary-min-width: 90px;
+ --spectrum-button-quiet-primary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-primary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-quiet-primary-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-secondary-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-secondary-min-width: 90px;
+ --spectrum-button-quiet-secondary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-secondary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-quiet-secondary-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-warning-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-warning-min-width: 90px;
+ --spectrum-button-quiet-warning-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-quiet-warning-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-quiet-warning-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-250
+ );
+ --spectrum-button-secondary-text-padding-bottom: [object Object];
+ --spectrum-button-secondary-min-width: 90px;
+ --spectrum-button-secondary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-secondary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-warning-text-padding-bottom: [object Object];
+ --spectrum-button-warning-min-width: 90px;
+ --spectrum-button-warning-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-button-warning-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-checkbox-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-text-gap-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-text-gap-error-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-checkbox-emphasized-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-emphasized-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-emphasized-text-gap-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-emphasized-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-emphasized-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-emphasized-text-gap-error-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-checkbox-quiet-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-quiet-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-quiet-text-gap-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-quiet-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-quiet-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-quiet-text-gap-error-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-checkbox-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-circleloader-medium-border-size: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-circleloader-medium-over-background-border-size: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-circleloader-small-border-size: 3px;
+ --spectrum-circleloader-small-over-background-border-size: 3px;
+ --spectrum-colorhandle-loupe-margin: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-colorslider-touch-hit-y: var(
+ --spectrum-global-dimension-size-85
+ );
+ --spectrum-colorslider-vertical-touch-hit-x: var(
+ --spectrum-global-dimension-size-85
+ );
+ --spectrum-colorwheel-min-size: var(
+ --spectrum-global-dimension-static-size-2600
+ );
+ --spectrum-colorwheel-touch-hit-outer: var(
+ --spectrum-global-dimension-size-85
+ );
+ --spectrum-colorwheel-touch-hit-inner: var(
+ --spectrum-global-dimension-size-85
+ );
+ --spectrum-cyclebutton-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-cyclebutton-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-dialog-confirm-max-width: var(
+ --spectrum-global-dimension-static-size-5000
+ );
+ --spectrum-dialog-confirm-title-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-dialog-confirm-description-text-size: var(
+ --spectrum-global-dimension-font-size-75
+ );
+ --spectrum-dialog-confirm-padding: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-dialog-confirm-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-max-width: var(
+ --spectrum-global-dimension-static-size-5000
+ );
+ --spectrum-dialog-title-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-dialog-content-text-size: var(
+ --spectrum-global-dimension-font-size-75
+ );
+ --spectrum-dialog-padding: var(--spectrum-global-dimension-static-size-300);
+ --spectrum-dialog-content-margin-bottom: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-destructive-max-width: var(
+ --spectrum-global-dimension-static-size-5000
+ );
+ --spectrum-dialog-destructive-title-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-dialog-destructive-description-text-size: var(
+ --spectrum-global-dimension-font-size-75
+ );
+ --spectrum-dialog-destructive-padding: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-dialog-destructive-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-error-max-width: var(
+ --spectrum-global-dimension-static-size-5000
+ );
+ --spectrum-dialog-error-title-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-dialog-error-description-text-size: var(
+ --spectrum-global-dimension-font-size-75
+ );
+ --spectrum-dialog-error-padding: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-dialog-error-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-info-max-width: var(
+ --spectrum-global-dimension-static-size-5000
+ );
+ --spectrum-dialog-info-title-text-size: var(
+ --spectrum-global-dimension-font-size-200
+ );
+ --spectrum-dialog-info-description-text-size: var(
+ --spectrum-global-dimension-font-size-75
+ );
+ --spectrum-dialog-info-padding: var(
+ --spectrum-global-dimension-static-size-300
+ );
+ --spectrum-dialog-info-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dropdown-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-dropdown-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-dropdown-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-dropdown-thumbnail-small-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-dropdown-thumbnail-small-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-fieldbutton-quiet-min-width: var(
+ --spectrum-global-dimension-size-200
+ );
+ --spectrum-icon-arrow-down-small-height: 12px;
+ --spectrum-icon-arrow-left-medium-height: 12px;
+ --spectrum-icon-checkmark-medium-width: 16px;
+ --spectrum-icon-checkmark-medium-height: 16px;
+ --spectrum-icon-checkmark-small-width: 12px;
+ --spectrum-icon-checkmark-small-height: 12px;
+ --spectrum-icon-chevron-down-medium-width: 12px;
+ --spectrum-icon-chevron-left-large-width: 16px;
+ --spectrum-icon-chevron-left-medium-height: 12px;
+ --spectrum-icon-chevron-right-large-width: 16px;
+ --spectrum-icon-chevron-right-medium-height: 12px;
+ --spectrum-icon-cross-large-width: 16px;
+ --spectrum-icon-cross-large-height: 16px;
+ --spectrum-icon-dash-small-width: 12px;
+ --spectrum-icon-dash-small-height: 12px;
+ --spectrum-icon-skip-left-width: 10px;
+ --spectrum-icon-skip-left-height: 12px;
+ --spectrum-icon-skip-right-width: 10px;
+ --spectrum-icon-skip-right-height: 12px;
+ --spectrum-icon-triplegripper-width: 12px;
+ --spectrum-loader-bar-large-border-radius: 4px;
+ --spectrum-loader-bar-large-over-background-border-radius: 4px;
+ --spectrum-loader-bar-small-border-radius: 3px;
+ --spectrum-loader-bar-small-over-background-border-radius: 3px;
+ --spectrum-loader-circle-medium-border-size: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-loader-circle-medium-over-background-border-size: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-loader-circle-small-border-size: 3px;
+ --spectrum-loader-circle-small-over-background-border-size: 3px;
+ --spectrum-meter-large-border-radius: 4px;
+ --spectrum-meter-small-border-radius: 3px;
+ --spectrum-pagination-page-button-line-height: 32px;
+ --spectrum-radio-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-margin-bottom: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-radio-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-radio-emphasized-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-emphasized-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-emphasized-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-emphasized-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-emphasized-margin-bottom: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-radio-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-radio-quiet-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-quiet-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-quiet-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-quiet-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-radio-quiet-margin-bottom: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-radio-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-rating-icon-width: 30px;
+ --spectrum-rating-indicator-width: 20px;
+ --spectrum-rating-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-rating-emphasized-icon-width: 30px;
+ --spectrum-rating-emphasized-indicator-width: 20px;
+ --spectrum-rating-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-rating-quiet-icon-width: 30px;
+ --spectrum-rating-quiet-indicator-width: 20px;
+ --spectrum-rating-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-search-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-search-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-search-icon-frame: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-search-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-search-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-search-quiet-icon-frame: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-selectlist-option-icon-size: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-selectlist-option-icon-padding-y: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-selectlist-option-icon-margin-top: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-selectlist-option-height: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-selectlist-thumbnail-option-icon-padding-y: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-sidenav-item-touch-hit-bottom: 3px;
+ --spectrum-sidenav-multilevel-item-touch-hit-bottom: 3px;
+ --spectrum-slider-track-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-slider-handle-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-175
+ );
+ --spectrum-slider-handle-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-175
+ );
+ --spectrum-slider-editable-track-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-slider-editable-handle-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-175
+ );
+ --spectrum-slider-editable-handle-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-175
+ );
+ --spectrum-slider-fill-track-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-slider-fill-handle-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-175
+ );
+ --spectrum-slider-fill-handle-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-175
+ );
+ --spectrum-switch-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-track-width: var(
+ --spectrum-global-dimension-static-size-450
+ );
+ --spectrum-switch-handle-border-radius: 9px;
+ --spectrum-switch-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-switch-emphasized-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-emphasized-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-emphasized-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-emphasized-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-emphasized-track-width: var(
+ --spectrum-global-dimension-static-size-450
+ );
+ --spectrum-switch-emphasized-handle-border-radius: 9px;
+ --spectrum-switch-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-switch-quiet-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-quiet-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-quiet-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-quiet-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-switch-quiet-track-width: var(
+ --spectrum-global-dimension-static-size-450
+ );
+ --spectrum-switch-quiet-handle-border-radius: 9px;
+ --spectrum-switch-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-tabs-compact-focus-ring-border-radius: 6px;
--spectrum-tabs-compact-margin-left: -11px;
+ --spectrum-tabs-compact-margin-right: -11px;
+ --spectrum-tabs-compact-vertical-focus-ring-border-radius: 6px;
+ --spectrum-tabs-compact-vertical-emphasized-focus-ring-border-radius: 6px;
+ --spectrum-tabs-baseline: var(--spectrum-global-dimension-size-250);
+ --spectrum-tabs-focus-ring-border-radius: 6px;
+ --spectrum-tabs-margin-left: -11px;
+ --spectrum-tabs-margin-right: -11px;
+ --spectrum-tabs-emphasized-baseline: var(
+ --spectrum-global-dimension-size-250
+ );
+ --spectrum-tabs-emphasized-focus-ring-border-radius: 6px;
+ --spectrum-tabs-emphasized-margin-left: -11px;
+ --spectrum-tabs-emphasized-margin-right: -11px;
+ --spectrum-tabs-quiet-baseline: var(--spectrum-global-dimension-size-250);
+ --spectrum-tabs-quiet-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-margin-left: -11px;
+ --spectrum-tabs-quiet-margin-right: -11px;
+ --spectrum-tabs-quiet-compact-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-compact-margin-left: -11px;
+ --spectrum-tabs-quiet-compact-margin-right: -11px;
+ --spectrum-tabs-quiet-compact-emphasized-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-compact-emphasized-margin-left: -11px;
+ --spectrum-tabs-quiet-compact-emphasized-margin-right: -11px;
+ --spectrum-tabs-quiet-compact-vertical-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-compact-vertical-emphasized-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-emphasized-baseline: var(
+ --spectrum-global-dimension-size-250
+ );
+ --spectrum-tabs-quiet-emphasized-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-emphasized-margin-left: -11px;
+ --spectrum-tabs-quiet-emphasized-margin-right: -11px;
+ --spectrum-tabs-quiet-vertical-baseline: var(
+ --spectrum-global-dimension-size-250
+ );
+ --spectrum-tabs-quiet-vertical-focus-ring-border-radius: 6px;
+ --spectrum-tabs-quiet-vertical-emphasized-baseline: var(
+ --spectrum-global-dimension-size-250
+ );
+ --spectrum-tabs-quiet-vertical-emphasized-focus-ring-border-radius: 6px;
+ --spectrum-tabs-vertical-baseline: var(
+ --spectrum-global-dimension-size-250
+ );
+ --spectrum-tabs-vertical-focus-ring-border-radius: 6px;
+ --spectrum-textarea-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textarea-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textarea-icon-frame: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-textarea-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textarea-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textarea-quiet-icon-frame: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-textfield-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textfield-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textfield-icon-frame: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-textfield-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textfield-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-textfield-quiet-icon-frame: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-tool-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-tool-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-tool-high-emphasis-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-tool-high-emphasis-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-50
+ );
+ --spectrum-tooltip-padding-bottom: 6px;
--spectrum-tooltip-content-max-width: 126px;
+ --spectrum-tooltip-info-padding-bottom: 6px;
+ --spectrum-tooltip-info-content-max-width: 126px;
+ --spectrum-tooltip-negative-padding-bottom: 6px;
+ --spectrum-tooltip-negative-content-max-width: 126px;
+ --spectrum-tooltip-positive-padding-bottom: 6px;
+ --spectrum-tooltip-positive-content-max-width: 126px;
}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/packages/styles/scale-medium.css b/packages/styles/scale-medium.css
index 3a8ad00e58..7e65935255 100644
--- a/packages/styles/scale-medium.css
+++ b/packages/styles/scale-medium.css
@@ -10,55 +10,45 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
+/* stylelint-disable no-duplicate-selectors */
:root,
:host {
--spectrum-global-dimension-scale-factor: 1;
+ --spectrum-global-dimension-size-0: 0px;
+ --spectrum-global-dimension-size-10: 1px;
+ --spectrum-global-dimension-size-25: 2px;
--spectrum-global-dimension-size-40: 3px;
- --spectrum-actionbutton-touch-hit-x: 8px;
- --spectrum-dropdown-quiet-touch-hit-y: 32px;
- --spectrum-selectlist-option-icon-margin-top: 5px;
--spectrum-global-dimension-size-50: 4px;
--spectrum-global-dimension-size-65: 5px;
--spectrum-global-dimension-size-75: 6px;
- --spectrum-colorhandle-loupe-margin: 10px;
- --spectrum-radio-margin-bottom: 0px;
--spectrum-global-dimension-size-85: 7px;
- --spectrum-colorslider-touch-hit-y: 12px;
--spectrum-global-dimension-size-100: 8px;
- --spectrum-icon-skip-left-width: 9px;
--spectrum-global-dimension-size-115: 9px;
--spectrum-global-dimension-size-125: 10px;
- --spectrum-global-dimension-font-size-50: 11px;
--spectrum-global-dimension-size-130: 11px;
- --spectrum-slider-handle-touch-hit-x: 16px;
--spectrum-global-dimension-size-150: 12px;
- --spectrum-dialog-content-text-size: 14px;
--spectrum-global-dimension-size-160: 13px;
- --spectrum-icon-checkmark-medium-width: 12px;
- --spectrum-selectlist-option-icon-padding-y: 10px;
--spectrum-global-dimension-size-175: 14px;
- --spectrum-global-dimension-font-size-150: 15px;
--spectrum-global-dimension-size-200: 16px;
- --spectrum-fieldbutton-quiet-min-width: 18px;
--spectrum-global-dimension-size-225: 18px;
- --spectrum-alias-heading3-margin-top: 20px;
--spectrum-global-dimension-size-250: 20px;
- --spectrum-tabs-baseline: 18px;
--spectrum-global-dimension-size-300: 24px;
--spectrum-global-dimension-size-350: 28px;
--spectrum-global-dimension-size-400: 32px;
- --spectrum-dialog-content-margin-bottom: 48px;
--spectrum-global-dimension-size-450: 36px;
--spectrum-global-dimension-size-500: 40px;
--spectrum-global-dimension-size-550: 44px;
--spectrum-global-dimension-size-600: 48px;
+ --spectrum-global-dimension-size-675: 54px;
--spectrum-global-dimension-size-700: 56px;
--spectrum-global-dimension-size-800: 64px;
--spectrum-global-dimension-size-900: 72px;
--spectrum-global-dimension-size-1000: 80px;
--spectrum-global-dimension-size-1200: 96px;
+ --spectrum-global-dimension-size-1250: 100px;
--spectrum-global-dimension-size-1600: 128px;
--spectrum-global-dimension-size-1700: 136px;
+ --spectrum-global-dimension-size-2000: 160px;
--spectrum-global-dimension-size-2400: 192px;
--spectrum-global-dimension-size-3000: 240px;
--spectrum-global-dimension-size-3400: 272px;
@@ -67,33 +57,775 @@ governing permissions and limitations under the License.
--spectrum-global-dimension-size-5000: 400px;
--spectrum-global-dimension-size-6000: 480px;
--spectrum-global-dimension-font-size-25: 10px;
- --spectrum-checkbox-text-gap-key-focus: 9px;
+ --spectrum-global-dimension-font-size-50: 11px;
+ --spectrum-global-dimension-font-size-75: 12px;
--spectrum-global-dimension-font-size-100: 14px;
+ --spectrum-global-dimension-font-size-150: 15px;
--spectrum-global-dimension-font-size-200: 16px;
- --spectrum-dialog-title-text-size: 18px;
+ --spectrum-global-dimension-font-size-300: 18px;
--spectrum-global-dimension-font-size-400: 20px;
- --spectrum-alias-heading3-text-size: 22px;
- --spectrum-dialog-padding: 40px;
--spectrum-global-dimension-font-size-500: 22px;
- --spectrum-alias-heading2-margin-top: 25px;
--spectrum-global-dimension-font-size-600: 25px;
- --spectrum-alias-heading2-text-size: 28px;
--spectrum-global-dimension-font-size-700: 28px;
- --spectrum-alias-heading1-margin-top: 32px;
--spectrum-global-dimension-font-size-800: 32px;
- --spectrum-alias-heading-display2-margin-top: 36px;
--spectrum-global-dimension-font-size-900: 36px;
- --spectrum-alias-heading-display1-margin-top: 40px;
--spectrum-global-dimension-font-size-1000: 40px;
- --spectrum-alias-heading-display1-text-size: 45px;
--spectrum-global-dimension-font-size-1100: 45px;
- --spectrum-barloader-small-border-radius: 2px;
+ --spectrum-alias-heading-display1-text-size: var(
+ --spectrum-global-dimension-font-size-1100
+ );
+ --spectrum-alias-heading-xxxl-text-size: var(
+ --spectrum-global-dimension-font-size-1100
+ );
+ --spectrum-alias-heading-display1-margin-top: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-xxxl-margin-top: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-display2-text-size: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-xxl-text-size: var(
+ --spectrum-global-dimension-font-size-1000
+ );
+ --spectrum-alias-heading-display2-margin-top: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-xxl-margin-top: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading1-text-size: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading-xl-text-size: var(
+ --spectrum-global-dimension-font-size-900
+ );
+ --spectrum-alias-heading1-margin-top: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading-xl-margin-top: var(
+ --spectrum-global-dimension-font-size-800
+ );
+ --spectrum-alias-heading2-text-size: var(
+ --spectrum-global-dimension-font-size-700
+ );
+ --spectrum-alias-heading-l-text-size: var(
+ --spectrum-global-dimension-font-size-700
+ );
+ --spectrum-alias-heading2-margin-top: var(
+ --spectrum-global-dimension-font-size-600
+ );
+ --spectrum-alias-heading-l-margin-top: var(
+ --spectrum-global-dimension-font-size-600
+ );
+ --spectrum-alias-heading3-text-size: var(
+ --spectrum-global-dimension-font-size-500
+ );
+ --spectrum-alias-heading-m-text-size: var(
+ --spectrum-global-dimension-font-size-500
+ );
+ --spectrum-alias-heading3-margin-top: var(
+ --spectrum-global-dimension-font-size-400
+ );
+ --spectrum-alias-heading-m-margin-top: var(
+ --spectrum-global-dimension-font-size-400
+ );
+ --spectrum-actionbutton-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-emphasized-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-quiet-emphasized-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-barloader-large-border-radius: 3px;
+ --spectrum-barloader-large-indeterminate-border-radius: 3px;
+ --spectrum-barloader-large-over-background-border-radius: 3px;
+ --spectrum-barloader-small-border-radius: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-barloader-small-indeterminate-border-radius: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-barloader-small-over-background-border-radius: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-breadcrumb-compact-item-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-breadcrumb-compact-button-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-breadcrumb-item-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-breadcrumb-button-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-breadcrumb-multiline-item-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-breadcrumb-multiline-button-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-cta-text-padding-bottom: [object Object];
+ --spectrum-button-cta-min-width: var(--spectrum-global-dimension-size-900);
+ --spectrum-button-cta-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-cta-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-over-background-text-padding-bottom: [object Object];
+ --spectrum-button-over-background-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-over-background-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-over-background-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-primary-text-padding-bottom: [object Object];
+ --spectrum-button-primary-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-primary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-primary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-quiet-over-background-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-over-background-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-quiet-over-background-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-over-background-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-quiet-over-background-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-primary-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-primary-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-quiet-primary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-primary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-quiet-primary-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-secondary-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-secondary-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-quiet-secondary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-secondary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-quiet-secondary-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-warning-text-padding-bottom: [object Object];
+ --spectrum-button-quiet-warning-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-quiet-warning-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-quiet-warning-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-quiet-warning-cursor-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-button-secondary-text-padding-bottom: [object Object];
+ --spectrum-button-secondary-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-secondary-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-secondary-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-warning-text-padding-bottom: [object Object];
+ --spectrum-button-warning-min-width: var(
+ --spectrum-global-dimension-size-900
+ );
+ --spectrum-button-warning-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-button-warning-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-checkbox-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-text-gap-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-text-gap-error-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-checkbox-emphasized-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-emphasized-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-emphasized-text-gap-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-emphasized-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-emphasized-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-emphasized-text-gap-error-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-checkbox-quiet-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-quiet-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-quiet-text-gap-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-quiet-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-quiet-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-quiet-text-gap-error-indeterminate-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-checkbox-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-circleloader-medium-border-size: 3px;
+ --spectrum-circleloader-medium-over-background-border-size: 3px;
+ --spectrum-circleloader-small-border-size: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-circleloader-small-over-background-border-size: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-colorhandle-loupe-margin: var(
+ --spectrum-global-dimension-static-size-125
+ );
+ --spectrum-colorslider-touch-hit-y: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-colorslider-vertical-touch-hit-x: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-colorwheel-min-size: var(--spectrum-global-dimension-size-2400);
+ --spectrum-colorwheel-touch-hit-outer: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-colorwheel-touch-hit-inner: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-cyclebutton-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-cyclebutton-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-dialog-confirm-max-width: var(
+ --spectrum-global-dimension-static-size-6000
+ );
+ --spectrum-dialog-confirm-title-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-dialog-confirm-description-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-dialog-confirm-padding: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-confirm-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-dialog-max-width: var(
+ --spectrum-global-dimension-static-size-6000
+ );
+ --spectrum-dialog-title-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-dialog-content-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-dialog-padding: var(--spectrum-global-dimension-static-size-500);
+ --spectrum-dialog-content-margin-bottom: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-dialog-destructive-max-width: var(
+ --spectrum-global-dimension-static-size-6000
+ );
+ --spectrum-dialog-destructive-title-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-dialog-destructive-description-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-dialog-destructive-padding: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-destructive-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-dialog-error-max-width: var(
+ --spectrum-global-dimension-static-size-6000
+ );
+ --spectrum-dialog-error-title-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-dialog-error-description-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-dialog-error-padding: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-error-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-dialog-info-max-width: var(
+ --spectrum-global-dimension-static-size-6000
+ );
+ --spectrum-dialog-info-title-text-size: var(
+ --spectrum-global-dimension-font-size-300
+ );
+ --spectrum-dialog-info-description-text-size: var(
+ --spectrum-global-dimension-font-size-100
+ );
+ --spectrum-dialog-info-padding: var(
+ --spectrum-global-dimension-static-size-500
+ );
+ --spectrum-dialog-info-description-margin-bottom: var(
+ --spectrum-global-dimension-static-size-600
+ );
+ --spectrum-dropdown-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-dropdown-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-dropdown-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-dropdown-thumbnail-small-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-dropdown-thumbnail-small-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-fieldbutton-quiet-min-width: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-icon-arrow-down-small-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-arrow-left-medium-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-checkmark-medium-width: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-icon-checkmark-medium-height: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-icon-checkmark-small-width: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-checkmark-small-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-chevron-down-medium-width: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-chevron-left-large-width: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-icon-chevron-left-medium-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-chevron-right-large-width: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-icon-chevron-right-medium-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-cross-large-width: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-icon-cross-large-height: var(
+ --spectrum-global-dimension-size-150
+ );
+ --spectrum-icon-dash-small-width: var(--spectrum-global-dimension-size-125);
+ --spectrum-icon-dash-small-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-skip-left-width: 9px;
+ --spectrum-icon-skip-left-height: var(--spectrum-global-dimension-size-125);
+ --spectrum-icon-skip-right-width: 9px;
+ --spectrum-icon-skip-right-height: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-icon-triplegripper-width: var(
+ --spectrum-global-dimension-size-125
+ );
+ --spectrum-loader-bar-large-border-radius: 3px;
+ --spectrum-loader-bar-large-over-background-border-radius: 3px;
+ --spectrum-loader-bar-small-border-radius: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-loader-bar-small-over-background-border-radius: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-loader-circle-medium-border-size: 3px;
+ --spectrum-loader-circle-medium-over-background-border-size: 3px;
+ --spectrum-loader-circle-small-border-size: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-loader-circle-small-over-background-border-size: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-meter-large-border-radius: 3px;
+ --spectrum-meter-small-border-radius: var(
+ --spectrum-global-dimension-static-size-25
+ );
--spectrum-pagination-page-button-line-height: 26px;
- --spectrum-button-cta-min-width: 72px;
- --spectrum-selectlist-option-height: 32px;
- --spectrum-colorwheel-min-size: 192px;
- --spectrum-dialog-max-width: 480px;
+ --spectrum-radio-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-margin-bottom: 0px;
+ --spectrum-radio-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-radio-emphasized-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-emphasized-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-emphasized-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-emphasized-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-emphasized-margin-bottom: 0px;
+ --spectrum-radio-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-radio-quiet-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-quiet-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-quiet-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-quiet-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-radio-quiet-margin-bottom: 0px;
+ --spectrum-radio-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-rating-icon-width: 24px;
+ --spectrum-rating-indicator-width: 16px;
+ --spectrum-rating-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-rating-emphasized-icon-width: 24px;
+ --spectrum-rating-emphasized-indicator-width: 16px;
+ --spectrum-rating-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-rating-quiet-icon-width: 24px;
+ --spectrum-rating-quiet-indicator-width: 16px;
+ --spectrum-rating-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-search-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-search-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-search-icon-frame: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-search-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-search-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-search-quiet-icon-frame: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-selectlist-option-icon-size: var(
+ --spectrum-global-dimension-static-size-150
+ );
+ --spectrum-selectlist-option-icon-padding-y: var(
+ --spectrum-global-dimension-static-size-125
+ );
+ --spectrum-selectlist-option-icon-margin-top: var(
+ --spectrum-global-dimension-static-size-65
+ );
+ --spectrum-selectlist-option-height: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-selectlist-thumbnail-option-icon-padding-y: var(
+ --spectrum-global-dimension-static-size-125
+ );
+ --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var(
+ --spectrum-global-dimension-static-size-125
+ );
+ --spectrum-sidenav-item-touch-hit-bottom: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-sidenav-multilevel-item-touch-hit-bottom: var(
+ --spectrum-global-dimension-static-size-25
+ );
+ --spectrum-slider-track-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-slider-handle-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-slider-handle-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-slider-editable-track-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-slider-editable-handle-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-slider-editable-handle-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-slider-fill-track-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-slider-fill-handle-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-slider-fill-handle-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-200
+ );
+ --spectrum-switch-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
--spectrum-switch-track-width: 26px;
+ --spectrum-switch-handle-border-radius: 7px;
+ --spectrum-switch-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-switch-emphasized-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-emphasized-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-emphasized-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-emphasized-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-emphasized-track-width: 26px;
+ --spectrum-switch-emphasized-handle-border-radius: 7px;
+ --spectrum-switch-emphasized-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-switch-quiet-text-gap-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-quiet-text-gap-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-quiet-text-gap-error-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-quiet-text-gap-error-selected-key-focus: var(
+ --spectrum-global-dimension-static-size-115
+ );
+ --spectrum-switch-quiet-track-width: 26px;
+ --spectrum-switch-quiet-handle-border-radius: 7px;
+ --spectrum-switch-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-tabs-compact-focus-ring-border-radius: 5px;
--spectrum-tabs-compact-margin-left: -8px;
+ --spectrum-tabs-compact-margin-right: -8px;
+ --spectrum-tabs-compact-vertical-focus-ring-border-radius: 5px;
+ --spectrum-tabs-compact-vertical-emphasized-focus-ring-border-radius: 5px;
+ --spectrum-tabs-baseline: var(--spectrum-global-dimension-size-225);
+ --spectrum-tabs-focus-ring-border-radius: 5px;
+ --spectrum-tabs-margin-left: -8px;
+ --spectrum-tabs-margin-right: -8px;
+ --spectrum-tabs-emphasized-baseline: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-tabs-emphasized-focus-ring-border-radius: 5px;
+ --spectrum-tabs-emphasized-margin-left: -8px;
+ --spectrum-tabs-emphasized-margin-right: -8px;
+ --spectrum-tabs-quiet-baseline: var(--spectrum-global-dimension-size-225);
+ --spectrum-tabs-quiet-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-margin-left: -8px;
+ --spectrum-tabs-quiet-margin-right: -8px;
+ --spectrum-tabs-quiet-compact-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-compact-margin-left: -8px;
+ --spectrum-tabs-quiet-compact-margin-right: -8px;
+ --spectrum-tabs-quiet-compact-emphasized-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-compact-emphasized-margin-left: -8px;
+ --spectrum-tabs-quiet-compact-emphasized-margin-right: -8px;
+ --spectrum-tabs-quiet-compact-vertical-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-compact-vertical-emphasized-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-emphasized-baseline: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-tabs-quiet-emphasized-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-emphasized-margin-left: -8px;
+ --spectrum-tabs-quiet-emphasized-margin-right: -8px;
+ --spectrum-tabs-quiet-vertical-baseline: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-tabs-quiet-vertical-focus-ring-border-radius: 5px;
+ --spectrum-tabs-quiet-vertical-emphasized-baseline: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-tabs-quiet-vertical-emphasized-focus-ring-border-radius: 5px;
+ --spectrum-tabs-vertical-baseline: var(
+ --spectrum-global-dimension-size-225
+ );
+ --spectrum-tabs-vertical-focus-ring-border-radius: 5px;
+ --spectrum-textarea-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textarea-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textarea-icon-frame: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-textarea-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textarea-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textarea-quiet-icon-frame: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-textfield-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textfield-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textfield-icon-frame: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-textfield-quiet-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textfield-quiet-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-textfield-quiet-icon-frame: var(
+ --spectrum-global-dimension-static-size-400
+ );
+ --spectrum-tool-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-tool-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-tool-high-emphasis-touch-hit-x: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-tool-high-emphasis-touch-hit-y: var(
+ --spectrum-global-dimension-static-size-100
+ );
+ --spectrum-tooltip-padding-bottom: 5px;
--spectrum-tooltip-content-max-width: 101px;
+ --spectrum-tooltip-info-padding-bottom: 5px;
+ --spectrum-tooltip-info-content-max-width: 101px;
+ --spectrum-tooltip-negative-padding-bottom: 5px;
+ --spectrum-tooltip-negative-content-max-width: 101px;
+ --spectrum-tooltip-positive-padding-bottom: 5px;
+ --spectrum-tooltip-positive-content-max-width: 101px;
}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/packages/styles/theme-dark.css b/packages/styles/theme-dark.css
index 0637338ac3..4ff3880aa2 100644
--- a/packages/styles/theme-dark.css
+++ b/packages/styles/theme-dark.css
@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
+/* stylelint-disable no-duplicate-selectors */
:root,
:host {
--spectrum-global-color-celery-400: rgb(68, 181, 86);
@@ -61,7 +62,6 @@ governing permissions and limitations under the License.
--spectrum-global-color-blue-600: rgb(75, 156, 245);
--spectrum-global-color-blue-700: rgb(90, 169, 250);
--spectrum-global-color-gray-50: rgb(37, 37, 37);
- --spectrum-alias-pasteboard-background-color: rgb(37, 37, 37);
--spectrum-global-color-gray-75: rgb(47, 47, 47);
--spectrum-global-color-gray-100: rgb(50, 50, 50);
--spectrum-global-color-gray-200: rgb(62, 62, 62);
@@ -77,11 +77,46 @@ governing permissions and limitations under the License.
--spectrum-alias-background-color-hover-overlay: rgba(255, 255, 255, 0.06);
--spectrum-alias-highlight-hover: rgba(255, 255, 255, 0.07);
--spectrum-alias-highlight-active: rgba(255, 255, 255, 0.1);
- --spectrum-colorarea-border-color: rgba(255, 255, 255, 0.1);
--spectrum-alias-highlight-selected: rgba(55, 142, 240, 0.15);
--spectrum-alias-highlight-selected-hover: rgba(55, 142, 240, 0.25);
+ --spectrum-alias-text-highlight-color: rgba(55, 142, 240, 0.25);
--spectrum-alias-background-color-quickactions: rgba(50, 50, 50, 0.9);
--spectrum-alias-radial-reaction-color-default: rgba(227, 227, 227, 0.6);
+ --spectrum-alias-pasteboard-background-color: var(
+ --spectrum-global-color-gray-50
+ );
+ --spectrum-alias-appframe-border-color: var(
+ --spectrum-global-color-gray-50
+ );
+ --spectrum-alias-appframe-separator-color: var(
+ --spectrum-global-color-gray-50
+ );
+ --spectrum-colorarea-border-color: rgba(255, 255, 255, 0.1);
+ --spectrum-colorarea-border-color-hover: rgba(255, 255, 255, 0.1);
+ --spectrum-colorarea-border-color-down: rgba(255, 255, 255, 0.1);
+ --spectrum-colorarea-border-color-key-focus: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-border-color: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-border-color-hover: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-border-color-down: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-border-color-key-focus: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-vertical-border-color: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-vertical-border-color-hover: rgba(
+ 255,
+ 255,
+ 255,
+ 0.1
+ );
+ --spectrum-colorslider-vertical-border-color-down: rgba(255, 255, 255, 0.1);
+ --spectrum-colorslider-vertical-border-color-key-focus: rgba(
+ 255,
+ 255,
+ 255,
+ 0.1
+ );
+ --spectrum-colorwheel-border-color: rgba(255, 255, 255, 0.1);
+ --spectrum-colorwheel-border-color-hover: rgba(255, 255, 255, 0.1);
+ --spectrum-colorwheel-border-color-down: rgba(255, 255, 255, 0.1);
+ --spectrum-colorwheel-border-color-key-focus: rgba(255, 255, 255, 0.1);
--spectrum-miller-column-item-background-color-selected: rgba(
55,
142,
@@ -94,6 +129,35 @@ governing permissions and limitations under the License.
240,
0.2
);
+ --spectrum-tabs-compact-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-compact-vertical-rule-color: var(
+ --spectrum-global-color-gray-200
+ );
+ --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-compact-vertical-emphasized-rule-color: var(
+ --spectrum-global-color-gray-200
+ );
+ --spectrum-tabs-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
--spectrum-well-background-color: rgba(227, 227, 227, 0.02);
--spectrum-well-border-color: rgba(255, 255, 255, 0.05);
}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/packages/styles/theme-light.css b/packages/styles/theme-light.css
index b02d658cde..44a1e52557 100644
--- a/packages/styles/theme-light.css
+++ b/packages/styles/theme-light.css
@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
+/* stylelint-disable no-duplicate-selectors */
:root,
:host {
--spectrum-global-color-celery-400: rgb(68, 181, 86);
@@ -61,7 +62,6 @@ governing permissions and limitations under the License.
--spectrum-global-color-blue-600: rgb(13, 102, 208);
--spectrum-global-color-blue-700: rgb(9, 90, 186);
--spectrum-global-color-gray-50: rgb(255, 255, 255);
- --spectrum-alias-pasteboard-background-color: rgb(225, 225, 225);
--spectrum-global-color-gray-75: rgb(250, 250, 250);
--spectrum-global-color-gray-100: rgb(245, 245, 245);
--spectrum-global-color-gray-200: rgb(234, 234, 234);
@@ -77,11 +77,41 @@ governing permissions and limitations under the License.
--spectrum-alias-background-color-hover-overlay: rgba(44, 44, 44, 0.04);
--spectrum-alias-highlight-hover: rgba(44, 44, 44, 0.06);
--spectrum-alias-highlight-active: rgba(44, 44, 44, 0.1);
- --spectrum-colorarea-border-color: rgba(44, 44, 44, 0.1);
--spectrum-alias-highlight-selected: rgba(20, 115, 230, 0.1);
--spectrum-alias-highlight-selected-hover: rgba(20, 115, 230, 0.2);
+ --spectrum-alias-text-highlight-color: rgba(20, 115, 230, 0.2);
--spectrum-alias-background-color-quickactions: rgba(245, 245, 245, 0.9);
--spectrum-alias-radial-reaction-color-default: rgba(75, 75, 75, 0.6);
+ --spectrum-alias-pasteboard-background-color: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-alias-appframe-border-color: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-alias-appframe-separator-color: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-colorarea-border-color: rgba(44, 44, 44, 0.1);
+ --spectrum-colorarea-border-color-hover: rgba(44, 44, 44, 0.1);
+ --spectrum-colorarea-border-color-down: rgba(44, 44, 44, 0.1);
+ --spectrum-colorarea-border-color-key-focus: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-border-color: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-border-color-hover: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-border-color-down: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-border-color-key-focus: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-vertical-border-color: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-vertical-border-color-hover: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-vertical-border-color-down: rgba(44, 44, 44, 0.1);
+ --spectrum-colorslider-vertical-border-color-key-focus: rgba(
+ 44,
+ 44,
+ 44,
+ 0.1
+ );
+ --spectrum-colorwheel-border-color: rgba(44, 44, 44, 0.1);
+ --spectrum-colorwheel-border-color-hover: rgba(44, 44, 44, 0.1);
+ --spectrum-colorwheel-border-color-down: rgba(44, 44, 44, 0.1);
+ --spectrum-colorwheel-border-color-key-focus: rgba(44, 44, 44, 0.1);
--spectrum-miller-column-item-background-color-selected: rgba(
20,
115,
@@ -94,6 +124,35 @@ governing permissions and limitations under the License.
230,
0.2
);
+ --spectrum-tabs-compact-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-compact-vertical-rule-color: var(
+ --spectrum-global-color-gray-200
+ );
+ --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-compact-vertical-emphasized-rule-color: var(
+ --spectrum-global-color-gray-200
+ );
+ --spectrum-tabs-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
--spectrum-well-background-color: rgba(75, 75, 75, 0.02);
--spectrum-well-border-color: rgba(44, 44, 44, 0.05);
}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/packages/styles/theme-lightest.css b/packages/styles/theme-lightest.css
index 3202553769..4c863e6b8b 100644
--- a/packages/styles/theme-lightest.css
+++ b/packages/styles/theme-lightest.css
@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
+/* stylelint-disable no-duplicate-selectors */
:root,
:host {
--spectrum-global-color-celery-400: rgb(75, 195, 95);
@@ -61,7 +62,6 @@ governing permissions and limitations under the License.
--spectrum-global-color-blue-600: rgb(20, 115, 230);
--spectrum-global-color-blue-700: rgb(13, 102, 208);
--spectrum-global-color-gray-50: rgb(255, 255, 255);
- --spectrum-alias-pasteboard-background-color: rgb(234, 234, 234);
--spectrum-global-color-gray-75: rgb(255, 255, 255);
--spectrum-global-color-gray-100: rgb(255, 255, 255);
--spectrum-global-color-gray-200: rgb(244, 244, 244);
@@ -77,11 +77,68 @@ governing permissions and limitations under the License.
--spectrum-alias-background-color-hover-overlay: rgba(50, 50, 50, 0.04);
--spectrum-alias-highlight-hover: rgba(50, 50, 50, 0.06);
--spectrum-alias-highlight-active: rgba(50, 50, 50, 0.1);
- --spectrum-colorarea-border-color: rgba(50, 50, 50, 0.1);
--spectrum-alias-highlight-selected: rgba(38, 128, 235, 0.1);
--spectrum-alias-highlight-selected-hover: rgba(38, 128, 235, 0.2);
+ --spectrum-alias-text-highlight-color: rgba(38, 128, 235, 0.2);
--spectrum-alias-background-color-quickactions: rgba(255, 255, 255, 0.9);
--spectrum-alias-radial-reaction-color-default: rgba(80, 80, 80, 0.6);
+ --spectrum-alias-pasteboard-background-color: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-alias-appframe-border-color: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-alias-appframe-separator-color: var(
+ --spectrum-global-color-gray-300
+ );
+ --spectrum-tabs-compact-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-compact-vertical-rule-color: var(
+ --spectrum-global-color-gray-200
+ );
+ --spectrum-tabs-compact-vertical-emphasized-rule-color: var(
+ --spectrum-global-color-gray-200
+ );
+ --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(
+ --spectrum-global-color-blue-500
+ );
+ --spectrum-colorarea-border-color: rgba(50, 50, 50, 0.1);
+ --spectrum-colorarea-border-color-hover: rgba(50, 50, 50, 0.1);
+ --spectrum-colorarea-border-color-down: rgba(50, 50, 50, 0.1);
+ --spectrum-colorarea-border-color-key-focus: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-border-color: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-border-color-hover: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-border-color-down: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-border-color-key-focus: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-vertical-border-color: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-vertical-border-color-hover: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-vertical-border-color-down: rgba(50, 50, 50, 0.1);
+ --spectrum-colorslider-vertical-border-color-key-focus: rgba(
+ 50,
+ 50,
+ 50,
+ 0.1
+ );
+ --spectrum-colorwheel-border-color: rgba(50, 50, 50, 0.1);
+ --spectrum-colorwheel-border-color-hover: rgba(50, 50, 50, 0.1);
+ --spectrum-colorwheel-border-color-down: rgba(50, 50, 50, 0.1);
+ --spectrum-colorwheel-border-color-key-focus: rgba(50, 50, 50, 0.1);
--spectrum-miller-column-item-background-color-selected: rgba(
38,
128,
@@ -97,3 +154,5 @@ governing permissions and limitations under the License.
--spectrum-well-background-color: rgba(80, 80, 80, 0.02);
--spectrum-well-border-color: rgba(50, 50, 50, 0.05);
}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css
index 8682884709..eca4af005f 100644
--- a/packages/switch/src/spectrum-switch.css
+++ b/packages/switch/src/spectrum-switch.css
@@ -63,7 +63,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
/* .spectrum-ToggleSwitch-input:checked + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-selected,
+ --spectrum-switch-emphasized-handle-border-color-selected,
var(--spectrum-global-color-blue-500)
);
}
@@ -82,7 +82,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
font-size: var(
--spectrum-switch-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
);
transition: color var(--spectrum-global-animation-duration-200, 160ms)
ease-in-out;
@@ -153,7 +153,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color,
+ --spectrum-switch-emphasized-track-color,
var(--spectrum-global-color-gray-300)
);
}
@@ -179,40 +179,40 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
top: 0;
left: 0;
- border-width: var(--spectrum-switch-handle-border-size, 2px);
- border-radius: var(
- --spectrum-switch-handle-border-radius,
- var(--spectrum-global-dimension-size-85)
+ border-width: var(
+ --spectrum-switch-handle-border-size,
+ var(--spectrum-alias-border-size-thick)
);
+ border-radius: var(--spectrum-switch-handle-border-radius);
border-style: solid;
/* .spectrum-ToggleSwitch-switch::after */
background-color: var(
- --spectrum-switch-handle-background-color,
+ --spectrum-switch-emphasized-handle-background-color,
var(--spectrum-global-color-gray-75)
);
border-color: var(
- --spectrum-switch-handle-border-color,
+ --spectrum-switch-emphasized-handle-border-color,
var(--spectrum-global-color-gray-600)
);
}
#input ~ #label {
/* .spectrum-ToggleSwitch-input ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color,
- var(--spectrum-global-color-gray-800)
+ --spectrum-switch-emphasized-text-color,
+ var(--spectrum-alias-text-color)
);
}
:host([checked]) #input + #switch::before {
/* .spectrum-ToggleSwitch-input:checked + .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color-selected,
+ --spectrum-switch-emphasized-track-color-selected,
var(--spectrum-global-color-blue-500)
);
}
:host(:hover) #input + #switch::after {
/* .spectrum-ToggleSwitch:hover .spectrum-ToggleSwitch-input + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-hover,
+ --spectrum-switch-emphasized-handle-border-color-hover,
var(--spectrum-global-color-gray-700)
);
box-shadow: none;
@@ -220,92 +220,92 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host(:hover) #input ~ #label {
/* .spectrum-ToggleSwitch:hover .spectrum-ToggleSwitch-input ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ --spectrum-switch-emphasized-text-color-hover,
+ var(--spectrum-alias-text-color-hover)
);
}
:host(:hover[checked]) #input:enabled + #switch::before {
/* .spectrum-ToggleSwitch:hover .spectrum-ToggleSwitch-input:checked:enabled + .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color-selected-hover,
+ --spectrum-switch-emphasized-track-color-selected-hover,
var(--spectrum-global-color-blue-600)
);
}
:host(:hover[checked]) #input:enabled + #switch::after {
/* .spectrum-ToggleSwitch:hover .spectrum-ToggleSwitch-input:checked:enabled + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-selected-hover,
+ --spectrum-switch-emphasized-handle-border-color-selected-hover,
var(--spectrum-global-color-blue-600)
);
}
:host(:active) #input + #switch::after {
/* .spectrum-ToggleSwitch:active .spectrum-ToggleSwitch-input + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-down,
+ --spectrum-switch-emphasized-handle-border-color-down,
var(--spectrum-global-color-gray-800)
);
}
:host(:active) #input ~ #label {
/* .spectrum-ToggleSwitch:active .spectrum-ToggleSwitch-input ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color-down,
- var(--spectrum-global-color-gray-900)
+ --spectrum-switch-emphasized-text-color-down,
+ var(--spectrum-alias-text-color-down)
);
}
:host(:active[checked]) #input:enabled + #switch::before {
/* .spectrum-ToggleSwitch:active .spectrum-ToggleSwitch-input:checked:enabled + .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color-selected-down,
+ --spectrum-switch-emphasized-track-color-selected-down,
var(--spectrum-global-color-blue-700)
);
}
:host(:active[checked]) #input:enabled + #switch::after {
/* .spectrum-ToggleSwitch:active .spectrum-ToggleSwitch-input:checked:enabled + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-selected-down,
+ --spectrum-switch-emphasized-handle-border-color-selected-down,
var(--spectrum-global-color-blue-700)
);
}
:host([disabled]) #input + #switch::before {
/* .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled + .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color-disabled,
+ --spectrum-switch-emphasized-track-color-disabled,
var(--spectrum-global-color-gray-300)
);
}
:host([disabled]) #input + #switch::after {
/* .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-disabled,
+ --spectrum-switch-emphasized-handle-border-color-disabled,
var(--spectrum-global-color-gray-400)
);
}
:host([disabled]) #input ~ #label {
/* .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ --spectrum-switch-emphasized-text-color-disabled,
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([disabled][checked]) #input + #switch::before {
/* .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled:checked + .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color-selected-disabled,
+ --spectrum-switch-emphasized-track-color-selected-disabled,
var(--spectrum-global-color-gray-400)
);
}
:host([disabled][checked]) #input + #switch::after {
/* .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled:checked + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-selected-disabled,
+ --spectrum-switch-emphasized-handle-border-color-selected-disabled,
var(--spectrum-global-color-gray-400)
);
}
:host([disabled][checked]) #input ~ #label {
/* .spectrum-ToggleSwitch .spectrum-ToggleSwitch-input:disabled:checked ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color-selected-disabled,
- var(--spectrum-global-color-gray-500)
+ --spectrum-switch-emphasized-text-color-selected-disabled,
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([quiet][checked]) #input + #switch::before {
@@ -359,12 +359,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ToggleSwitch--quiet .spectrum-ToggleSwitch-input.focus-ring + .spectrum-ToggleSwitch-switch::after,
* .spectrum-ToggleSwitch--quiet:hover .spectrum-ToggleSwitch-input.focus-ring + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-key-focus,
+ --spectrum-switch-emphasized-handle-border-color-key-focus,
var(--spectrum-global-color-blue-400)
);
box-shadow: 0 0 0 1px
var(
- --spectrum-switch-handle-border-color-key-focus,
+ --spectrum-switch-emphasized-handle-border-color-key-focus,
var(--spectrum-global-color-blue-400)
);
}
@@ -377,8 +377,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ToggleSwitch--quiet .spectrum-ToggleSwitch-input.focus-ring ~ .spectrum-ToggleSwitch-label,
* .spectrum-ToggleSwitch--quiet:hover .spectrum-ToggleSwitch-input.focus-ring ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color-key-focus,
- var(--spectrum-global-color-blue-600)
+ --spectrum-switch-emphasized-text-color-key-focus,
+ var(--spectrum-alias-text-color-key-focus)
);
}
:host([checked]) #input:focus-visible + #switch::before,
@@ -390,7 +390,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ToggleSwitch--quiet .spectrum-ToggleSwitch-input.focus-ring:checked + .spectrum-ToggleSwitch-switch::before,
* .spectrum-ToggleSwitch--quiet:hover .spectrum-ToggleSwitch-input.focus-ring:checked + .spectrum-ToggleSwitch-switch::before */
background-color: var(
- --spectrum-switch-track-color-selected-key-focus,
+ --spectrum-switch-emphasized-track-color-selected-key-focus,
var(--spectrum-global-color-blue-400)
);
}
@@ -403,12 +403,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ToggleSwitch--quiet .spectrum-ToggleSwitch-input.focus-ring:checked + .spectrum-ToggleSwitch-switch::after,
* .spectrum-ToggleSwitch--quiet:hover .spectrum-ToggleSwitch-input.focus-ring:checked + .spectrum-ToggleSwitch-switch::after */
border-color: var(
- --spectrum-switch-handle-border-color-selected-key-focus,
+ --spectrum-switch-emphasized-handle-border-color-selected-key-focus,
var(--spectrum-global-color-blue-400)
);
box-shadow: 0 0 0 1px
var(
- --spectrum-switch-handle-border-color-selected-key-focus,
+ --spectrum-switch-emphasized-handle-border-color-selected-key-focus,
var(--spectrum-global-color-blue-400)
);
}
@@ -421,7 +421,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-ToggleSwitch--quiet .spectrum-ToggleSwitch-input.focus-ring:checked ~ .spectrum-ToggleSwitch-label,
* .spectrum-ToggleSwitch--quiet:hover .spectrum-ToggleSwitch-input.focus-ring:checked ~ .spectrum-ToggleSwitch-label */
color: var(
- --spectrum-switch-text-color-selected-key-focus,
- var(--spectrum-global-color-blue-600)
+ --spectrum-switch-emphasized-text-color-selected-key-focus,
+ var(--spectrum-alias-text-color-key-focus)
);
}
diff --git a/packages/tab-list/src/spectrum-tab-list.css b/packages/tab-list/src/spectrum-tab-list.css
index 83e848168a..2d8df547c2 100644
--- a/packages/tab-list/src/spectrum-tab-list.css
+++ b/packages/tab-list/src/spectrum-tab-list.css
@@ -37,11 +37,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
z-index: 0;
transition: transform
- var(--spectrum-tabs-selection-indicator-animation-duration, 130ms)
+ var(
+ --spectrum-tabs-selection-indicator-animation-duration,
+ var(--spectrum-global-animation-duration-100)
+ )
ease-in-out;
transform-origin: top left;
- border-radius: var(--spectrum-tabs-rule-border-radius, 1px);
+ border-radius: var(
+ --spectrum-tabs-rule-border-radius,
+ var(--spectrum-global-dimension-static-size-10)
+ );
/* .spectrum-Tabs-selectionIndicator */
background-color: var(
@@ -55,13 +61,21 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-tabs-quiet-compact-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-tabs-rule-height, 2px)
+ ) -
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
);
line-height: calc(
var(
--spectrum-tabs-quiet-compact-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-tabs-rule-height, 2px)
+ ) -
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
);
}
:host([direction='horizontal']) {
@@ -69,7 +83,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-ms-flex-align: center;
align-items: center;
- border-bottom: var(--spectrum-tabs-rule-height, 2px) solid;
+ border-bottom: var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
+ solid;
}
:host([direction='horizontal']) ::slotted(*) {
/* .spectrum-Tabs--horizontal .spectrum-Tabs-item */
@@ -79,9 +97,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator */
position: absolute;
bottom: 0;
- height: var(--spectrum-tabs-rule-height, 2px);
+ height: var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ );
- bottom: calc(-1 * var(--spectrum-tabs-rule-height, 2px));
+ bottom: calc(
+ -1 * var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))
+ );
}
:host([direction='horizontal'][compact]) {
/* .spectrum-Tabs--horizontal.spectrum-Tabs--compact */
@@ -90,7 +113,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
var(
--spectrum-tabs-quiet-compact-height,
var(--spectrum-global-dimension-size-400)
- ) - var(--spectrum-tabs-rule-height, 2px)
+ ) -
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
);
-ms-flex-align: end;
align-items: end;
@@ -102,7 +129,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Tabs--quiet */
border-bottom-color: var(
--spectrum-tabs-quiet-rule-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
}
:host([direction='vertical']) {
@@ -112,7 +139,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
- border-left: var(--spectrum-tabs-vertical-rule-width, 2px) solid;
+ border-left: var(
+ --spectrum-tabs-vertical-rule-width,
+ var(--spectrum-alias-border-size-thick)
+ )
+ solid;
/* .spectrum-Tabs--vertical */
border-left-color: var(
--spectrum-tabs-vertical-rule-color,
@@ -164,9 +195,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator */
position: absolute;
left: 0px;
- width: var(--spectrum-tabs-vertical-rule-width, 2px);
+ width: var(
+ --spectrum-tabs-vertical-rule-width,
+ var(--spectrum-alias-border-size-thick)
+ );
- left: calc(-1 * var(--spectrum-tabs-vertical-rule-width, 2px));
+ left: calc(
+ -1 * var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick))
+ );
}
:host([quiet]) #selectionIndicator {
/* .spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator */
@@ -181,7 +217,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
* .spectrum-Tabs--vertical.spectrum-Tabs--compact */
border-left-color: var(
--spectrum-tabs-quiet-vertical-rule-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
}
:host([direction='vertical'][quiet]) #selectionIndicator,
diff --git a/packages/tab/src/spectrum-tab.css b/packages/tab/src/spectrum-tab.css
index 81f7e064b1..bdba700a00 100644
--- a/packages/tab/src/spectrum-tab.css
+++ b/packages/tab/src/spectrum-tab.css
@@ -18,11 +18,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
height: calc(
var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) -
- var(--spectrum-tabs-rule-height, 2px)
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
);
line-height: calc(
var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) -
- var(--spectrum-tabs-rule-height, 2px)
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
);
z-index: 1;
@@ -36,7 +42,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Tabs-item */
color: var(
--spectrum-tabs-text-color,
- var(--spectrum-global-color-gray-700)
+ var(--spectrum-alias-label-text-color)
);
}
:host([disabled]) {
@@ -45,7 +51,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Tabs-item.is-disabled */
color: var(
--spectrum-tabs-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([disabled]) #itemLabel {
@@ -56,13 +62,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Tabs-item .spectrum-Icon */
height: calc(
var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) -
- var(--spectrum-tabs-rule-height, 2px)
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ )
);
/* .spectrum-Tabs-item .spectrum-Icon */
- color: var(
- --spectrum-tabs-icon-color,
- var(--spectrum-global-color-gray-700)
- );
+ color: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color));
}
slot[name='icon'] + #itemLabel {
/* .spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel */
@@ -81,13 +87,17 @@ slot[name='icon'] + #itemLabel {
height: var(
--spectrum-tabs-focus-ring-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
margin-top: calc(
var(
--spectrum-tabs-focus-ring-height,
- var(--spectrum-global-dimension-size-400)
- ) / -2 + var(--spectrum-tabs-rule-height, 2px) / 2
+ var(--spectrum-alias-single-line-height)
+ ) / -2 +
+ var(
+ --spectrum-tabs-rule-height,
+ var(--spectrum-alias-border-size-thick)
+ ) / 2
);
left: calc(
-1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100))
@@ -95,11 +105,12 @@ slot[name='icon'] + #itemLabel {
right: calc(
-1 * var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100))
);
- border: var(--spectrum-tabs-focus-ring-size, 2px) solid transparent;
- border-radius: var(
- --spectrum-tabs-focus-ring-border-radius,
- var(--spectrum-global-dimension-size-65)
- );
+ border: var(
+ --spectrum-tabs-focus-ring-size,
+ var(--spectrum-alias-border-size-thick)
+ )
+ solid transparent;
+ border-radius: var(--spectrum-tabs-focus-ring-border-radius);
pointer-events: none;
}
@@ -111,9 +122,12 @@ slot[name='icon'] + #itemLabel {
font-size: var(
--spectrum-tabs-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
+ );
+ font-weight: var(
+ --spectrum-tabs-text-font-weight,
+ var(--spectrum-alias-body-text-font-weight)
);
- font-weight: var(--spectrum-tabs-text-font-weight, 400);
}
#itemLabel:empty {
/* .spectrum-Tabs-itemLabel:empty */
@@ -123,14 +137,14 @@ slot[name='icon'] + #itemLabel {
/* .spectrum-Tabs-item:hover */
color: var(
--spectrum-tabs-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host(:hover) ::slotted([slot='icon']) {
/* .spectrum-Tabs-item:hover .spectrum-Icon */
color: var(
--spectrum-tabs-icon-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-hover)
);
}
:host([selected]) {
@@ -151,27 +165,27 @@ slot[name='icon'] + #itemLabel {
/* .spectrum-Tabs-item.focus-ring */
color: var(
--spectrum-tabs-text-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-text-color-hover)
);
}
:host(:focus-visible)::before {
/* .spectrum-Tabs-item.focus-ring::before */
border-color: var(
--spectrum-tabs-focus-ring-color,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
:host(:focus-visible) ::slotted([slot='icon']) {
/* .spectrum-Tabs-item.focus-ring .spectrum-Icon */
color: var(
--spectrum-tabs-icon-color-key-focus,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-icon-color-focus)
);
}
:host([disabled]) ::slotted([slot='icon']) {
/* .spectrum-Tabs-item.is-disabled .spectrum-Icon */
color: var(
--spectrum-tabs-icon-color-disabled,
- var(--spectrum-global-color-gray-400)
+ var(--spectrum-alias-icon-color-disabled)
);
}
diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css
index a60029f655..32e958a6e4 100644
--- a/packages/textfield/src/spectrum-textfield.css
+++ b/packages/textfield/src/spectrum-textfield.css
@@ -13,8 +13,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
#input {
/* .spectrum-Textfield */
box-sizing: border-box;
- border: var(--spectrum-textfield-border-size, 1px) solid;
- border-radius: var(--spectrum-global-dimension-size-50);
+ border: var(
+ --spectrum-textfield-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
+ solid;
+ border-radius: var(
+ --spectrum-textfield-border-radius,
+ var(--spectrum-alias-border-radius-regular)
+ );
padding: 3px
var(
--spectrum-textfield-padding-x,
@@ -33,7 +40,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
height: var(
--spectrum-textfield-height,
- var(--spectrum-global-dimension-size-400)
+ var(--spectrum-alias-single-line-height)
);
width: var(
--spectrum-alias-single-line-width,
@@ -46,11 +53,11 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
font-family: adobe-clean, Helvetica, Arial, sans-serif;
font-size: var(
--spectrum-textfield-text-size,
- var(--spectrum-global-dimension-font-size-100)
+ var(--spectrum-alias-font-size-default)
);
line-height: var(
- --spectrum-alias-line-height-medium,
- var(--spectrum-global-dimension-size-250)
+ --spectrum-textfield-text-line-height,
+ var(--spectrum-alias-body-text-line-height)
);
text-overflow: ellipsis;
@@ -60,8 +67,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
ease-in-out;
outline: none;
- -moz-appearance: textfield;
+
-webkit-appearance: none;
+ -moz-appearance: textfield;
/* .spectrum-Textfield */
background-color: var(
--spectrum-textfield-background-color,
@@ -73,27 +81,41 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
color: var(
--spectrum-textfield-text-color,
- var(--spectrum-global-color-gray-800)
+ var(--spectrum-alias-text-color)
);
}
#input::placeholder {
/* .spectrum-Textfield::placeholder */
- font-weight: var(--spectrum-textfield-placeholder-text-font-weight, 400);
- font-style: var(--spectrum-textfield-placeholder-text-font-style, italic);
+ font-weight: var(
+ --spectrum-textfield-placeholder-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
+ );
+ font-style: var(
+ --spectrum-textfield-placeholder-text-font-style,
+ var(--spectrum-global-font-style-italic)
+ );
transition: color var(--spectrum-global-animation-duration-100, 130ms)
ease-in-out;
+ opacity: 1;
/* .spectrum-Textfield::placeholder */
color: var(
--spectrum-textfield-placeholder-text-color,
- var(--spectrum-global-color-gray-600)
+ var(--spectrum-alias-placeholder-text-color)
);
}
#input::-ms-input-placeholder {
/* .spectrum-Textfield::-ms-input-placeholder */
- font-weight: var(--spectrum-textfield-placeholder-text-font-weight, 400);
- font-style: var(--spectrum-textfield-placeholder-text-font-style, italic);
+ font-weight: var(
+ --spectrum-textfield-placeholder-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
+ );
+ font-style: var(
+ --spectrum-textfield-placeholder-text-font-style,
+ var(--spectrum-global-font-style-italic)
+ );
transition: color var(--spectrum-global-animation-duration-100, 130ms)
ease-in-out;
+ opacity: 1;
}
#input:lang(ja)::placeholder,
#input:lang(zh)::placeholder,
@@ -113,11 +135,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
}
#input:hover::placeholder {
/* .spectrum-Textfield:hover::placeholder */
- font-weight: var(--spectrum-textfield-placeholder-text-font-weight, 400);
+ font-weight: var(
+ --spectrum-textfield-placeholder-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
+ );
/* .spectrum-Textfield:hover::placeholder */
color: var(
--spectrum-textfield-placeholder-text-color-hover,
- var(--spectrum-global-color-gray-900)
+ var(--spectrum-alias-placeholder-text-color-hover)
);
}
#input:disabled {
@@ -126,7 +151,10 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
}
#input:disabled::placeholder {
/* .spectrum-Textfield:disabled::placeholder */
- font-weight: var(--spectrum-textfield-placeholder-text-font-weight, 400);
+ font-weight: var(
+ --spectrum-textfield-placeholder-text-font-weight,
+ var(--spectrum-global-font-weight-regular)
+ );
}
#input::-ms-clear {
/* .spectrum-Textfield::-ms-clear */
@@ -210,12 +238,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
)
);
/* .spectrum-Textfield.is-valid */
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'%3E%3Cpath style='fill:var%28--spectrum-alert-success-icon-color%2C var%28--spectrum-global-color-green-600%29%29' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'%3E%3Cpath style='fill:var%28--spectrum-alert-success-icon-color%2C var%28--spectrum-semantic-positive-color-icon%29%29' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/%3E%3C/svg%3E");
}
:host([multiline]) #input {
/* .spectrum-Textfield--multiline */
height: auto;
- padding: 4px 8px;
+ min-height: var(--spectrum-global-dimension-size-700);
+ padding: 3px
+ var(
+ --spectrum-textfield-padding-x,
+ var(--spectrum-global-dimension-size-150)
+ )
+ 5px
+ var(
+ --spectrum-textfield-padding-x,
+ var(--spectrum-global-dimension-size-150)
+ );
overflow: auto;
}
:host([multiline][invalid]) #input,
@@ -242,7 +280,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host([quiet]) #input {
/* .spectrum-Textfield--quiet */
border-radius: 0;
- border-width: 0 0 var(--spectrum-textfield-quiet-border-size, 1px) 0;
+ border-width: 0 0
+ var(
+ --spectrum-textfield-quiet-border-size,
+ var(--spectrum-alias-border-size-thin)
+ )
+ 0;
padding-left: var(--spectrum-textfield-quiet-padding-x, 0);
padding-right: var(--spectrum-textfield-quiet-padding-x, 0);
resize: none;
@@ -250,7 +293,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Textfield--quiet */
background-color: var(
--spectrum-textfield-quiet-background-color,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-textfield-quiet-border-color,
@@ -277,19 +320,19 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Textfield:focus */
border-color: var(
--spectrum-textfield-border-color-down,
- var(--spectrum-global-color-blue-500)
+ var(--spectrum-alias-border-color-down)
);
}
#input:focus-visible:not(:active) {
/* .spectrum-Textfield.focus-ring:not(:active) */
border-color: var(
--spectrum-textfield-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
box-shadow: 0 0 0 1px
var(
--spectrum-textfield-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
#input[disabled] {
@@ -300,22 +343,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
);
border-color: var(
--spectrum-textfield-border-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-border-color-transparent)
);
color: var(
--spectrum-textfield-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
-webkit-text-fill-color: var(
--spectrum-textfield-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
#input[disabled]::placeholder {
/* .spectrum-Textfield[disabled]::placeholder */
color: var(
--spectrum-textfield-placeholder-text-color-disabled,
- var(--spectrum-global-color-gray-500)
+ var(--spectrum-alias-text-color-disabled)
);
}
:host([invalid]) #input,
@@ -326,7 +369,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
--spectrum-textfield-border-color-error,
var(--spectrum-global-color-red-500)
);
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%2C var%28--spectrum-global-color-red-400%29%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:var%28--spectrum-alert-error-border-color%2C var%28--spectrum-semantic-negative-color-border%29%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E");
}
:host([invalid]) #input:focus-visible:not(:active),
#input:invalid:focus-visible:not(:active) {
@@ -353,42 +396,42 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
/* .spectrum-Textfield--quiet:active */
border-color: var(
--spectrum-textfield-quiet-border-color-down,
- var(--spectrum-global-color-blue-500)
+ var(--spectrum-alias-border-color-down)
);
}
:host([quiet]) #input:focus {
/* .spectrum-Textfield--quiet:focus */
border-color: var(
--spectrum-textfield-quiet-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
box-shadow: 0 1px 0
var(
--spectrum-textfield-quiet-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
:host([quiet]) #input:focus-visible:not(:active) {
/* .spectrum-Textfield--quiet.focus-ring:not(:active) */
border-color: var(
--spectrum-textfield-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
box-shadow: 0 1px 0
var(
--spectrum-textfield-border-color-key-focus,
- var(--spectrum-global-color-blue-400)
+ var(--spectrum-alias-border-color-focus)
);
}
:host([quiet]) #input:disabled {
/* .spectrum-Textfield--quiet:disabled */
background-color: var(
--spectrum-textfield-quiet-background-color-disabled,
- rgba(0, 0, 0, 0)
+ var(--spectrum-alias-background-color-transparent)
);
border-color: var(
--spectrum-textfield-quiet-border-color-disabled,
- var(--spectrum-global-color-gray-300)
+ var(--spectrum-alias-border-color-mid)
);
}
:host([quiet][invalid]) #input,
diff --git a/packages/themes/src/scale-medium.ts b/packages/themes/src/scale-medium.ts
index fe147a990e..56b4f91581 100644
--- a/packages/themes/src/scale-medium.ts
+++ b/packages/themes/src/scale-medium.ts
@@ -11,11 +11,12 @@ governing permissions and limitations under the License.
*/
import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import commonStyles from './theme.css.js';
import mediumStyles from './scale-medium.css.js';
export class ScaleMedium extends LitElement {
public static get styles(): CSSResultArray {
- return [mediumStyles];
+ return [commonStyles, mediumStyles];
}
protected render(): TemplateResult {
diff --git a/packages/themes/src/theme-dark.ts b/packages/themes/src/theme-dark.ts
index 83d5d3b73d..5a8d7ef496 100644
--- a/packages/themes/src/theme-dark.ts
+++ b/packages/themes/src/theme-dark.ts
@@ -11,11 +11,12 @@ governing permissions and limitations under the License.
*/
import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import commonStyles from './theme.css.js';
import darkStyles from './theme-dark.css.js';
export class ThemeDark extends LitElement {
public static get styles(): CSSResultArray {
- return [darkStyles];
+ return [commonStyles, darkStyles];
}
protected render(): TemplateResult {
diff --git a/packages/themes/src/theme-light.ts b/packages/themes/src/theme-light.ts
index e68297b167..43a921846a 100644
--- a/packages/themes/src/theme-light.ts
+++ b/packages/themes/src/theme-light.ts
@@ -11,11 +11,12 @@ governing permissions and limitations under the License.
*/
import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import commonStyles from './theme.css.js';
import lightStyles from './theme-light.css.js';
export class ThemeLight extends LitElement {
public static get styles(): CSSResultArray {
- return [lightStyles];
+ return [commonStyles, lightStyles];
}
protected render(): TemplateResult {
diff --git a/packages/themes/src/theme-lightest.ts b/packages/themes/src/theme-lightest.ts
index 4ecd37c60e..8d91c35ed3 100644
--- a/packages/themes/src/theme-lightest.ts
+++ b/packages/themes/src/theme-lightest.ts
@@ -11,11 +11,12 @@ governing permissions and limitations under the License.
*/
import { LitElement, CSSResultArray, html, TemplateResult } from 'lit-element';
+import commonStyles from './theme.css.js';
import lightestStyles from './theme-lightest.css.js';
export class ThemeLightest extends LitElement {
public static get styles(): CSSResultArray {
- return [lightestStyles];
+ return [commonStyles, lightestStyles];
}
protected render(): TemplateResult {
diff --git a/packages/themes/src/theme.ts b/packages/themes/src/theme.ts
index 69aa87ebd1..a79630398a 100644
--- a/packages/themes/src/theme.ts
+++ b/packages/themes/src/theme.ts
@@ -12,12 +12,12 @@ governing permissions and limitations under the License.
import {
LitElement,
- CSSResultArray,
+ // CSSResultArray,
html,
TemplateResult,
property,
} from 'lit-element';
-import commonStyles from './theme.css.js';
+// import commonStyles from './theme.css.js';
export class Theme extends LitElement {
/**
@@ -32,9 +32,9 @@ export class Theme extends LitElement {
@property({ reflect: true })
public scale: 'medium' = 'medium';
- public static get styles(): CSSResultArray {
- return [commonStyles];
- }
+ // public static get styles(): CSSResultArray {
+ // return [commonStyles];
+ // }
private renderTheme(children: TemplateResult): TemplateResult {
let result;
diff --git a/packages/themes/stories/theme.stories.ts b/packages/themes/stories/theme.stories.ts
index dd10da9952..f02fbe119e 100644
--- a/packages/themes/stories/theme.stories.ts
+++ b/packages/themes/stories/theme.stories.ts
@@ -59,6 +59,39 @@ storiesOf('Theme', module)
`;
})
+ .add('None', () => {
+ return html`
+
+
+
+
+
+
Overdrive
+
+ Cancel
+ Continue
+
+