@spectrum-web-components/styles 0.17.1 → 0.19.0

package/core-global.css

@@ -1671,18 +1671,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-thumbnail-border-radius-small: var(
         --spectrum-global-dimension-size-25
     );
-    --spectrum-alias-actiongroup-button-gap: var(
-        --spectrum-global-dimension-size-100
-    );
-    --spectrum-alias-actiongroup-button-gap-compact: var(
-        --spectrum-global-dimension-size-0
-    );
-    --spectrum-alias-actiongroup-button-gap-quiet: var(
-        --spectrum-global-dimension-size-100
-    );
-    --spectrum-alias-actiongroup-button-gap-quiet-compact: var(
-        --spectrum-global-dimension-size-25
-    );
     --spectrum-alias-search-padding-left-s: var(
         --spectrum-global-dimension-size-85
     );

package/express/core-global.css

@@ -1722,18 +1722,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-avatar-border-size: var(
         --spectrum-global-dimension-static-size-25
     );
-    --spectrum-alias-actiongroup-button-gap: var(
-        --spectrum-global-dimension-size-100
-    );
-    --spectrum-alias-actiongroup-button-gap-compact: var(
-        --spectrum-global-dimension-size-25
-    );
-    --spectrum-alias-actiongroup-button-gap-quiet: var(
-        --spectrum-global-dimension-size-100
-    );
-    --spectrum-alias-actiongroup-button-gap-quiet-compact: var(
-        --spectrum-global-dimension-size-25
-    );
     --spectrum-alias-search-padding-left-s: var(
         --spectrum-global-dimension-size-125
     );

package/express/spectrum-scale-large.css

@@ -329,18 +329,6 @@ governing permissions and limitations under the License.
     --spectrum-progresscircle-m-border-size: var(
         --spectrum-global-dimension-static-size-50
     );
-    --spectrum-statuslight-s-info-text-padding-bottom: var(
-        --spectrum-global-dimension-static-size-85
-    );
-    --spectrum-statuslight-l-info-dot-size: var(
-        --spectrum-global-dimension-static-size-150
-    );
-    --spectrum-statuslight-l-info-text-padding-top: var(
-        --spectrum-global-dimension-static-size-150
-    );
-    --spectrum-statuslight-xl-info-dot-size: var(
-        --spectrum-global-dimension-static-size-150
-    );
     --spectrum-tag-m-texticon-padding-left: var(
         --spectrum-global-dimension-static-size-150
     );

package/express/spectrum-scale-medium.css

@@ -337,18 +337,6 @@ governing permissions and limitations under the License.
         --spectrum-global-dimension-static-size-25
     );
     --spectrum-progresscircle-m-border-size: 3px;
-    --spectrum-statuslight-s-info-text-padding-bottom: var(
-        --spectrum-global-dimension-static-size-65
-    );
-    --spectrum-statuslight-l-info-dot-size: var(
-        --spectrum-global-dimension-size-125
-    );
-    --spectrum-statuslight-l-info-text-padding-top: var(
-        --spectrum-global-dimension-size-115
-    );
-    --spectrum-statuslight-xl-info-dot-size: var(
-        --spectrum-global-dimension-size-125
-    );
     --spectrum-tag-m-texticon-padding-left: var(
         --spectrum-global-dimension-size-125
     );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.17.1",
+    "version": "0.19.0",
     "publishConfig": {
         "access": "public"
     },
@@ -113,7 +113,7 @@
     "devDependencies": {
         "@spectrum-css/commons": "^3.0.6",
         "@spectrum-css/expressvars": "^2.0.0",
-        "@spectrum-css/tokens": "^1.0.7",
+        "@spectrum-css/tokens": "^3.0.0",
         "@spectrum-css/typography": "^4.0.20",
         "@spectrum-css/vars": "^8.0.0"
     },
@@ -122,5 +122,5 @@
         "./**/*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
+    "gitHead": "96da2eef637c5d50dd04a75d40a46353116787b4"
 }

package/spectrum-scale-large.css

@@ -340,18 +340,6 @@ governing permissions and limitations under the License.
     --spectrum-progresscircle-m-border-size: var(
         --spectrum-global-dimension-static-size-50
     );
-    --spectrum-statuslight-s-info-text-padding-bottom: var(
-        --spectrum-global-dimension-static-size-85
-    );
-    --spectrum-statuslight-l-info-dot-size: var(
-        --spectrum-global-dimension-static-size-150
-    );
-    --spectrum-statuslight-l-info-text-padding-top: var(
-        --spectrum-global-dimension-static-size-150
-    );
-    --spectrum-statuslight-xl-info-dot-size: var(
-        --spectrum-global-dimension-static-size-150
-    );
     --spectrum-tag-m-texticon-padding-left: var(
         --spectrum-global-dimension-static-size-150
     );

package/spectrum-scale-medium.css

@@ -342,18 +342,6 @@ governing permissions and limitations under the License.
         --spectrum-global-dimension-static-size-25
     );
     --spectrum-progresscircle-m-border-size: 3px;
-    --spectrum-statuslight-s-info-text-padding-bottom: var(
-        --spectrum-global-dimension-static-size-65
-    );
-    --spectrum-statuslight-l-info-dot-size: var(
-        --spectrum-global-dimension-size-125
-    );
-    --spectrum-statuslight-l-info-text-padding-top: var(
-        --spectrum-global-dimension-size-115
-    );
-    --spectrum-statuslight-xl-info-dot-size: var(
-        --spectrum-global-dimension-size-125
-    );
     --spectrum-tag-m-texticon-padding-left: var(
         --spectrum-global-dimension-size-125
     );

package/test/styles.test-vrt.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["styles.test-vrt.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/styles.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('StylesStories', stories);\n"],
-  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,iBAAiB,OAAO;",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/styles.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('StylesStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,iBAAiB,OAA+B;",
   "names": []
 }

package/tokens/dark-vars.css

@@ -13,6 +13,22 @@ governing permissions and limitations under the License.
 :host,
 :root {
     --spectrum-overlay-opacity: 0.5;
+    --spectrum-gray-background-color-default: var(--spectrum-gray-700);
+    --spectrum-red-background-color-default: var(--spectrum-red-700);
+    --spectrum-orange-background-color-default: var(--spectrum-orange-800);
+    --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
+    --spectrum-chartreuse-background-color-default: var(
+        --spectrum-chartreuse-900
+    );
+    --spectrum-celery-background-color-default: var(--spectrum-celery-800);
+    --spectrum-green-background-color-default: var(--spectrum-green-700);
+    --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
+    --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
+    --spectrum-blue-background-color-default: var(--spectrum-blue-700);
+    --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
+    --spectrum-purple-background-color-default: var(--spectrum-purple-700);
+    --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
+    --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
     --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
     --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
     --spectrum-neutral-background-color-down: var(--spectrum-gray-200);

package/tokens/darkest-vars.css

@@ -13,6 +13,22 @@ governing permissions and limitations under the License.
 :host,
 :root {
     --spectrum-overlay-opacity: 0.6;
+    --spectrum-gray-background-color-default: var(--spectrum-gray-700);
+    --spectrum-red-background-color-default: var(--spectrum-red-700);
+    --spectrum-orange-background-color-default: var(--spectrum-orange-800);
+    --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
+    --spectrum-chartreuse-background-color-default: var(
+        --spectrum-chartreuse-900
+    );
+    --spectrum-celery-background-color-default: var(--spectrum-celery-800);
+    --spectrum-green-background-color-default: var(--spectrum-green-700);
+    --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
+    --spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
+    --spectrum-blue-background-color-default: var(--spectrum-blue-700);
+    --spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
+    --spectrum-purple-background-color-default: var(--spectrum-purple-700);
+    --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
+    --spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
     --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
     --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
     --spectrum-neutral-background-color-down: var(--spectrum-gray-200);

package/tokens/express/global-vars.css

@@ -26,6 +26,9 @@ governing permissions and limitations under the License.
     --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
     --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
     --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
+    --spectrum-heading: var(--spectrum-font-black-default);
+    --spectrum-heading-emphasized: var(--spectrum-font-black-italic-default);
+    --spectrum-cjk-heading: var(--spectrum-font-black-cjk);
     --spectrum-border-width-100: 2px;
 }
 :host,
@@ -315,3 +318,57 @@ governing permissions and limitations under the License.
         --spectrum-accent-color-1000
     );
 }
+:host,
+:root {
+    --system-spectrum-switch-background-color-selected-default: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-switch-background-color-selected-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-background-color-selected-down: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-background-color-selected-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-handle-border-color-default: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-switch-handle-border-color-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-900);
+    --system-spectrum-switch-handle-border-color-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-handle-border-color-selected-default: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-switch-handle-border-color-selected-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-handle-border-color-selected-down: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-handle-border-color-selected-focus: var(
+        --spectrum-gray-900
+    );
+}
+
+:host,
+:root {
+    --system-spectrum-toast-background-color-default: var(
+        --spectrum-neutral-background-color-default
+    );
+}
+:host,
+:root {
+    --system-spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
+    --system-spectrum-actiongroup-horizontal-spacing-compact: calc(
+        -1px * var(--spectrum-spacing-50)
+    );
+    --system-spectrum-actiongroup-vertical-spacing-compact: calc(
+        -1px * var(--spectrum-spacing-50)
+    );
+}

package/tokens/global-vars.css

@@ -28,7 +28,8 @@ governing permissions and limitations under the License.
     --spectrum-transparent-black-700: rgba(0, 0, 0, 0.8);
     --spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
     --spectrum-transparent-black-900: rgb(0, 0, 0);
-    --spectrum-focus-ring-color: var(--spectrum-blue-800);
+    --spectrum-focus-indicator-color: var(--spectrum-blue-800);
+    --spectrum-focus-ring-color: var(--spectrum-focus-indicator-color);
     --spectrum-static-white-focus-ring-color: var(--spectrum-white);
     --spectrum-static-black-focus-ring-color: var(--spectrum-black);
     --spectrum-overlay-color: var(--spectrum-black);
@@ -77,6 +78,10 @@ governing permissions and limitations under the License.
     --spectrum-disabled-static-black-border-color: var(
         --spectrum-transparent-black-300
     );
+    --spectrum-background-opacity-default: 0;
+    --spectrum-background-opacity-hover: 0.1;
+    --spectrum-background-opacity-down: 0.1;
+    --spectrum-background-opacity-key-focus: 0.1;
     --spectrum-informative-color-100: var(--spectrum-blue-100);
     --spectrum-informative-color-200: var(--spectrum-blue-200);
     --spectrum-informative-color-300: var(--spectrum-blue-300);
@@ -139,6 +144,9 @@ governing permissions and limitations under the License.
     --spectrum-divider-thickness-small: 1px;
     --spectrum-divider-thickness-medium: 2px;
     --spectrum-divider-thickness-large: 4px;
+    --spectrum-menu-item-label-to-description: 1px;
+    --spectrum-meter-minimum-width: 48px;
+    --spectrum-meter-maximum-width: 768px;
     --spectrum-swatch-rectangle-width-multiplier: 2;
     --spectrum-swatch-slash-thickness-extra-small: 2px;
     --spectrum-swatch-slash-thickness-small: 3px;
@@ -147,6 +155,121 @@ governing permissions and limitations under the License.
     --spectrum-radio-button-selection-indicator: 4px;
     --spectrum-popover-tip-width: 16px;
     --spectrum-popover-tip-height: 8px;
+    --spectrum-sans-serif-heading-light: var(--spectrum-font-light-default);
+    --spectrum-serif-heading-light: var(--spectrum-font-regular-default);
+    --spectrum-heading-heavy: var(--spectrum-font-black-default);
+    --spectrum-heading-light-strong: var(--spectrum-font-bold-default);
+    --spectrum-heading-strong: var(--spectrum-font-black-default);
+    --spectrum-heading-heavy-strong: var(--spectrum-font-black-default);
+    --spectrum-sans-serif-heading-light-emphasized: var(
+        --spectrum-font-light-italic-default
+    );
+    --spectrum-serif-heading-light-emphasized: var(
+        --spectrum-font-italic-default
+    );
+    --spectrum-heading-heavy-emphasized: var(
+        --spectrum-font-black-italic-default
+    );
+    --spectrum-heading-light-strong-emphasized: var(
+        --spectrum-font-bold-italic-default
+    );
+    --spectrum-heading-strong-emphasized: var(
+        --spectrum-font-black-italic-default
+    );
+    --spectrum-heading-heavy-strong-emphasized: var(
+        --spectrum-font-black-italic-default
+    );
+    --spectrum-cjk-heading-light: var(--spectrum-font-light-cjk);
+    --spectrum-cjk-heading-heavy: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-light-strong: var(--spectrum-font-extra-bold-cjk);
+    --spectrum-cjk-heading-strong: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-heavy-strong: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-light-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-heavy-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-light-strong-emphasized: var(
+        --spectrum-font-extra-bold-cjk
+    );
+    --spectrum-cjk-heading-strong-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-heading-heavy-strong-emphasized: var(
+        --spectrum-font-black-cjk
+    );
+    --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
+    --spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
+    --spectrum-heading-size-xl: var(--spectrum-font-size-900);
+    --spectrum-heading-size-l: var(--spectrum-font-size-700);
+    --spectrum-heading-size-m: var(--spectrum-font-size-500);
+    --spectrum-heading-size-s: var(--spectrum-font-size-300);
+    --spectrum-heading-size-xs: var(--spectrum-font-size-200);
+    --spectrum-heading-size-xxs: var(--spectrum-font-size-100);
+    --spectrum-heading-line-height: var(--spectrum-line-height-100);
+    --spectrum-cjk-heading-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-heading-margin-top-multiplier: 0.8889;
+    --spectrum-heading-margin-bottom-multiplier: 0.25;
+    --spectrum-body: var(--spectrum-font-regular-default);
+    --spectrum-body-strong: var(--spectrum-font-bold-default);
+    --spectrum-body-emphasized: var(--spectrum-font-italic-default);
+    --spectrum-body-strong-emphasized: var(--spectrum-font-bold-italic-default);
+    --spectrum-cjk-body: var(--spectrum-font-regular-cjk);
+    --spectrum-cjk-body-strong: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-body-emphasized: var(--spectrum-font-extra-bold-cjk);
+    --spectrum-cjk-body-strong-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-body-size-xxxl: var(--spectrum-font-size-600);
+    --spectrum-body-size-xxl: var(--spectrum-font-size-500);
+    --spectrum-body-size-xl: var(--spectrum-font-size-400);
+    --spectrum-body-size-l: var(--spectrum-font-size-300);
+    --spectrum-body-size-m: var(--spectrum-font-size-200);
+    --spectrum-body-size-s: var(--spectrum-font-size-100);
+    --spectrum-body-size-xs: var(--spectrum-font-size-75);
+    --spectrum-body-line-height: var(--spectrum-line-height-200);
+    --spectrum-cjk-body-line-height: var(--spectrum-cjk-line-height-200);
+    --spectrum-body-margin-multiplier: 0.75;
+    --spectrum-detail: var(--spectrum-font-bold-default);
+    --spectrum-detail-light: var(--spectrum-font-regular-default);
+    --spectrum-detail-strong: var(--spectrum-font-bold-default);
+    --spectrum-detail-light-strong: var(--spectrum-font-regular-default);
+    --spectrum-detail-emphasized: var(--spectrum-font-bold-italic-default);
+    --spectrum-detail-light-emphasized: var(--spectrum-font-italic-default);
+    --spectrum-detail-strong-emphasized: var(
+        --spectrum-font-bold-italic-default
+    );
+    --spectrum-detail-light-strong-emphasized: var(
+        --spectrum-font-italic-default
+    );
+    --spectrum-cjk-detail: var(--spectrum-font-extra-bold-cjk);
+    --spectrum-cjk-detail-light: var(--spectrum-font-light-cjk);
+    --spectrum-cjk-detail-strong: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-detail-light-strong: var(--spectrum-font-extra-bold-cjk);
+    --spectrum-cjk-detail-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-detail-light-emphasized: var(--spectrum-font-regular-cjk);
+    --spectrum-cjk-detail-strong-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-detail-light-strong-emphasized: var(
+        --spectrum-font-extra-bold-cjk
+    );
+    --spectrum-detail-size-xl: var(--spectrum-font-size-200);
+    --spectrum-detail-size-l: var(--spectrum-font-size-100);
+    --spectrum-detail-size-m: var(--spectrum-font-size-75);
+    --spectrum-detail-size-s: var(--spectrum-font-size-50);
+    --spectrum-detail-line-height: var(--spectrum-line-height-100);
+    --spectrum-cjk-detail-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-detail-margin-top-mulitplier: 0.8889;
+    --spectrum-detail-margin-bottom-multiplier: 0.25;
+    --spectrum-detail-letter-spacing: 0.06em;
+    --spectrum-code: var(--spectrum-font-regular-default);
+    --spectrum-code-strong: var(--spectrum-font-bold-default);
+    --spectrum-code-emphasized: var(--spectrum-font-italic-default);
+    --spectrum-code-strong-emphasized: var(--spectrum-font-bold-italic-default);
+    --spectrum-cjk-code: var(--spectrum-font-regular-cjk);
+    --spectrum-cjk-code-strong: var(--spectrum-font-black-cjk);
+    --spectrum-cjk-code-emphasized: var(--spectrum-font-bold-cjk);
+    --spectrum-cjk-code-strong-emphasized: var(--spectrum-font-black-cjk);
+    --spectrum-code-size-xl: var(--spectrum-font-size-400);
+    --spectrum-code-size-l: var(--spectrum-font-size-300);
+    --spectrum-code-size-m: var(--spectrum-font-size-200);
+    --spectrum-code-size-s: var(--spectrum-font-size-100);
+    --spectrum-code-size-xs: var(--spectrum-font-size-75);
+    --spectrum-code-line-height: var(--spectrum-line-height-200);
+    --spectrum-cjk-code-line-height: var(--spectrum-cjk-line-height-200);
     --spectrum-android-elevation: 2dp;
     --spectrum-spacing-50: 2px;
     --spectrum-spacing-75: 4px;
@@ -165,6 +288,42 @@ governing permissions and limitations under the License.
     --spectrum-border-width-200: 2px;
     --spectrum-line-height-100: 1.3;
     --spectrum-line-height-200: 1.5;
-    --spectrum-CJK-line-height-100: 1.5;
-    --spectrum-CJK-line-height-200: 1.7;
+    --spectrum-font-family-default: var(--spectrum-font-family-sans-serif);
+    --spectrum-font-family-sans-serif: adobe clean;
+    --spectrum-font-family-serif: adobe clean serif;
+    --spectrum-font-family-code: source code pro;
+    --spectrum-font-light-default: adobe clean light;
+    --spectrum-font-light-cjk: adobe clean han light;
+    --spectrum-font-light-monospace: source code pro;
+    --spectrum-font-light-italic-default: adobe clean light italic;
+    --spectrum-font-light-italic-monospace: source code pro light italic;
+    --spectrum-font-regular-default: adobe clean regular;
+    --spectrum-font-regular-cjk: adobe clean han regular;
+    --spectrum-font-regular-serif: adobe clean serif regular;
+    --spectrum-font-regular-monospace: source code pro regular;
+    --spectrum-font-italic-default: adobe clean italic;
+    --spectrum-font-italic-serif: adobe clean serif italic;
+    --spectrum-font-italic-monospace: source code pro italic;
+    --spectrum-font-medium-default: adobe clean medium;
+    --spectrum-font-medium-serif: adobe clean serif medium;
+    --spectrum-font-medium-monospace: source code pro medium;
+    --spectrum-font-bold-default: adobe clean bold;
+    --spectrum-font-bold-cjk: adobe clean han bold;
+    --spectrum-font-bold-serif: adobe clean serif bold;
+    --spectrum-font-bold-monospace: source code pro bold;
+    --spectrum-font-bold-italic-default: adobe clean bold italic;
+    --spectrum-font-bold-italic-serif: adobe clean serif bold italic;
+    --spectrum-font-bold-italic-monospace: source code pro bold italic;
+    --spectrum-font-extra-bold-default: adobe clean extra bold;
+    --spectrum-font-extra-bold-cjk: adobe clean han extra bold;
+    --spectrum-font-black-default: adobe clean black;
+    --spectrum-font-black-cjk: adobe clean han black;
+    --spectrum-font-black-serif: adobe clean serif black;
+    --spectrum-font-black-monospace: source code pro black;
+    --spectrum-font-black-italic-default: adobe clean black italic;
+    --spectrum-font-black-italic-serif: adobe clean serif black italic;
+    --spectrum-font-black-italic-monospace: source code pro black italic;
+    --spectrum-cjk-letter-spacing: 0.05em;
+    --spectrum-cjk-line-height-100: 1.5;
+    --spectrum-cjk-line-height-200: 1.7;
 }

package/tokens/large-vars.css

@@ -83,6 +83,17 @@ governing permissions and limitations under the License.
     --spectrum-help-text-top-to-workflow-icon-large: 8px;
     --spectrum-help-text-top-to-workflow-icon-extra-large: 11px;
     --spectrum-in-line-alert-minimum-width: 360px;
+    --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
+    --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
+    --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
+    --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
+    --spectrum-menu-item-top-to-chevron-small: 9px;
+    --spectrum-menu-item-top-to-chevron-medium: 13px;
+    --spectrum-menu-item-top-to-chevron-large: 17px;
+    --spectrum-menu-item-top-to-chevron-extra-large: 22px;
+    --spectrum-meter-default-width: 240px;
+    --spectrum-meter-thickness-small: 5px;
+    --spectrum-meter-thickness-medium: 8px;
     --spectrum-swatch-size-extra-small: 20px;
     --spectrum-swatch-size-small: 30px;
     --spectrum-swatch-size-medium: 40px;
@@ -111,8 +122,8 @@ governing permissions and limitations under the License.
     --spectrum-toast-top-to-workflow-icon: 17px;
     --spectrum-toast-top-to-text: 16px;
     --spectrum-toast-bottom-to-text: 19px;
-    --spectrum-tooltip-width: 10px;
-    --spectrum-tooltip-height: 5px;
+    --spectrum-tooltip-tip-width: 10px;
+    --spectrum-tooltip-tip-height: 5px;
     --spectrum-tooltip-maximum-width: 200px;
     --spectrum-tag-top-to-avatar-small: 5px;
     --spectrum-tag-top-to-avatar-medium: 9px;

package/tokens/light-vars.css

@@ -13,6 +13,22 @@ governing permissions and limitations under the License.
 :host,
 :root {
     --spectrum-overlay-opacity: 0.4;
+    --spectrum-gray-background-color-default: var(--spectrum-gray-700);
+    --spectrum-red-background-color-default: var(--spectrum-red-600);
+    --spectrum-orange-background-color-default: var(--spectrum-orange-600);
+    --spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
+    --spectrum-chartreuse-background-color-default: var(
+        --spectrum-chartreuse-500
+    );
+    --spectrum-celery-background-color-default: var(--spectrum-celery-600);
+    --spectrum-green-background-color-default: var(--spectrum-green-900);
+    --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
+    --spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
+    --spectrum-blue-background-color-default: var(--spectrum-blue-900);
+    --spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
+    --spectrum-purple-background-color-default: var(--spectrum-purple-900);
+    --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
+    --spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
     --spectrum-neutral-background-color-default: var(--spectrum-gray-800);
     --spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
     --spectrum-neutral-background-color-down: var(--spectrum-gray-900);

package/tokens/medium-vars.css

@@ -83,6 +83,17 @@ governing permissions and limitations under the License.
     --spectrum-help-text-top-to-workflow-icon-large: 6px;
     --spectrum-help-text-top-to-workflow-icon-extra-large: 9px;
     --spectrum-in-line-alert-minimum-width: 320px;
+    --spectrum-menu-item-edge-to-content-not-selected-small: 28px;
+    --spectrum-menu-item-edge-to-content-not-selected-medium: 32px;
+    --spectrum-menu-item-edge-to-content-not-selected-large: 38px;
+    --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px;
+    --spectrum-menu-item-top-to-chevron-small: 7px;
+    --spectrum-menu-item-top-to-chevron-medium: 11px;
+    --spectrum-menu-item-top-to-chevron-large: 14px;
+    --spectrum-menu-item-top-to-chevron-extra-large: 17px;
+    --spectrum-meter-default-width: 192px;
+    --spectrum-meter-thickness-small: 4px;
+    --spectrum-meter-thickness-medium: 6px;
     --spectrum-swatch-size-extra-small: 16px;
     --spectrum-swatch-size-small: 24px;
     --spectrum-swatch-size-medium: 32px;
@@ -111,8 +122,8 @@ governing permissions and limitations under the License.
     --spectrum-toast-top-to-workflow-icon: 15px;
     --spectrum-toast-top-to-text: 14px;
     --spectrum-toast-bottom-to-text: 17px;
-    --spectrum-tooltip-width: 8px;
-    --spectrum-tooltip-height: 4px;
+    --spectrum-tooltip-tip-width: 8px;
+    --spectrum-tooltip-tip-height: 4px;
     --spectrum-tooltip-maximum-width: 160px;
     --spectrum-tag-top-to-avatar-small: 4px;
     --spectrum-tag-top-to-avatar-medium: 6px;

package/tokens/spectrum/custom-vars.css

@@ -19,6 +19,7 @@ governing permissions and limitations under the License.
 :host,
 :root {
     --spectrum-animation-duration-100: 130ms;
+    --spectrum-animation-duration-200: 160ms;
 
     --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system,
         BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
@@ -40,4 +41,8 @@ governing permissions and limitations under the License.
     --spectrum-font-weight-bold: 700;
     --spectrum-font-weight-extra-bold: 800;
     --spectrum-font-weight-black: 900;
+
+    /* static white / black background color for docs containers */
+    --spectrum-docs-static-white-background-color: rgb(15, 121, 125);
+    --spectrum-docs-static-black-background-color: rgb(206, 247, 243);
 }

package/tokens/spectrum/global-vars.css

@@ -26,6 +26,9 @@ governing permissions and limitations under the License.
     --spectrum-accent-color-1200: var(--spectrum-blue-1200);
     --spectrum-accent-color-1300: var(--spectrum-blue-1300);
     --spectrum-accent-color-1400: var(--spectrum-blue-1400);
+    --spectrum-heading: var(--spectrum-font-bold-default);
+    --spectrum-heading-emphasized: var(--spectrum-font-bold-italic-default);
+    --spectrum-cjk-heading: var(--spectrum-font-extra-bold-cjk);
     --spectrum-border-width-100: 1px;
 }
 :host,
@@ -329,3 +332,53 @@ governing permissions and limitations under the License.
         --spectrum-accent-color-1000
     );
 }
+:host,
+:root {
+    --system-spectrum-switch-background-color-selected-default: var(
+        --spectrum-gray-700
+    );
+    --system-spectrum-switch-background-color-selected-hover: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-switch-background-color-selected-down: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-background-color-selected-focus: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-switch-handle-border-color-default: var(
+        --spectrum-gray-600
+    );
+    --system-spectrum-switch-handle-border-color-hover: var(
+        --spectrum-gray-700
+    );
+    --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800);
+    --system-spectrum-switch-handle-border-color-focus: var(
+        --spectrum-gray-700
+    );
+    --system-spectrum-switch-handle-border-color-selected-default: var(
+        --spectrum-gray-700
+    );
+    --system-spectrum-switch-handle-border-color-selected-hover: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-switch-handle-border-color-selected-down: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-switch-handle-border-color-selected-focus: var(
+        --spectrum-gray-800
+    );
+}
+
+:host,
+:root {
+    --system-spectrum-toast-background-color-default: var(
+        --spectrum-neutral-subdued-background-color-default
+    );
+}
+:host,
+:root {
+    --system-spectrum-actiongroup-gap-size-compact: 0;
+    --system-spectrum-actiongroup-horizontal-spacing-compact: -1px;
+    --system-spectrum-actiongroup-vertical-spacing-compact: -1px;
+}