@spectrum-web-components/styles 0.17.0 → 0.18.0

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.0",
+    "version": "0.18.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.6",
+        "@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": "1cfea66c39440232b9982509573801b8e3a9f692"
+    "gitHead": "15588c72c774b17cfac605b20ac52a27d123bd03"
 }

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/tokens/dark-vars.css

@@ -12,6 +12,23 @@ 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);
@@ -68,6 +85,26 @@ governing permissions and limitations under the License.
     --spectrum-positive-background-color-key-focus: var(
         --spectrum-positive-color-400
     );
+    --spectrum-neutral-visual-color: var(--spectrum-gray-600);
+    --spectrum-accent-visual-color: var(--spectrum-accent-color-900);
+    --spectrum-informative-visual-color: var(--spectrum-informative-color-900);
+    --spectrum-negative-visual-color: var(--spectrum-negative-color-700);
+    --spectrum-notice-visual-color: var(--spectrum-notice-color-900);
+    --spectrum-positive-visual-color: var(--spectrum-positive-color-800);
+    --spectrum-gray-visual-color: var(--spectrum-gray-600);
+    --spectrum-red-visual-color: var(--spectrum-red-700);
+    --spectrum-orange-visual-color: var(--spectrum-orange-900);
+    --spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
+    --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
+    --spectrum-celery-visual-color: var(--spectrum-celery-800);
+    --spectrum-green-visual-color: var(--spectrum-green-800);
+    --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
+    --spectrum-cyan-visual-color: var(--spectrum-cyan-900);
+    --spectrum-blue-visual-color: var(--spectrum-blue-900);
+    --spectrum-indigo-visual-color: var(--spectrum-indigo-900);
+    --spectrum-purple-visual-color: var(--spectrum-purple-900);
+    --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
+    --spectrum-magenta-visual-color: var(--spectrum-magenta-900);
     --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.5);
     --spectrum-background-base-color: var(--spectrum-gray-50);
     --spectrum-background-layer-1-color: var(--spectrum-gray-75);

package/tokens/darkest-vars.css

@@ -12,6 +12,23 @@ 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);
@@ -68,6 +85,26 @@ governing permissions and limitations under the License.
     --spectrum-positive-background-color-key-focus: var(
         --spectrum-positive-color-500
     );
+    --spectrum-neutral-visual-color: var(--spectrum-gray-600);
+    --spectrum-accent-visual-color: var(--spectrum-accent-color-900);
+    --spectrum-informative-visual-color: var(--spectrum-informative-color-900);
+    --spectrum-negative-visual-color: var(--spectrum-negative-color-700);
+    --spectrum-notice-visual-color: var(--spectrum-notice-color-900);
+    --spectrum-positive-visual-color: var(--spectrum-positive-color-800);
+    --spectrum-gray-visual-color: var(--spectrum-gray-600);
+    --spectrum-red-visual-color: var(--spectrum-red-700);
+    --spectrum-orange-visual-color: var(--spectrum-orange-900);
+    --spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
+    --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
+    --spectrum-celery-visual-color: var(--spectrum-celery-800);
+    --spectrum-green-visual-color: var(--spectrum-green-800);
+    --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
+    --spectrum-cyan-visual-color: var(--spectrum-cyan-900);
+    --spectrum-blue-visual-color: var(--spectrum-blue-900);
+    --spectrum-indigo-visual-color: var(--spectrum-indigo-900);
+    --spectrum-purple-visual-color: var(--spectrum-purple-900);
+    --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
+    --spectrum-magenta-visual-color: var(--spectrum-magenta-900);
     --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.8);
     --spectrum-background-base-color: var(--spectrum-gray-50);
     --spectrum-background-layer-1-color: var(--spectrum-gray-75);

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,47 @@ 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
+    );
+}

package/tokens/global-vars.css

@@ -28,9 +28,11 @@ 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);
     --spectrum-neutral-content-color-default: var(--spectrum-gray-800);
     --spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
     --spectrum-neutral-content-color-down: var(--spectrum-gray-900);
@@ -76,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);
@@ -138,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;
@@ -146,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;
@@ -164,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

@@ -12,6 +12,23 @@ 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);
@@ -68,6 +85,26 @@ governing permissions and limitations under the License.
     --spectrum-positive-background-color-key-focus: var(
         --spectrum-positive-color-1000
     );
+    --spectrum-neutral-visual-color: var(--spectrum-gray-500);
+    --spectrum-accent-visual-color: var(--spectrum-accent-color-800);
+    --spectrum-informative-visual-color: var(--spectrum-informative-color-800);
+    --spectrum-negative-visual-color: var(--spectrum-negative-color-800);
+    --spectrum-notice-visual-color: var(--spectrum-notice-color-600);
+    --spectrum-positive-visual-color: var(--spectrum-positive-color-700);
+    --spectrum-gray-visual-color: var(--spectrum-gray-500);
+    --spectrum-red-visual-color: var(--spectrum-red-800);
+    --spectrum-orange-visual-color: var(--spectrum-orange-600);
+    --spectrum-yellow-visual-color: var(--spectrum-yellow-600);
+    --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
+    --spectrum-celery-visual-color: var(--spectrum-celery-700);
+    --spectrum-green-visual-color: var(--spectrum-green-700);
+    --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700);
+    --spectrum-cyan-visual-color: var(--spectrum-cyan-600);
+    --spectrum-blue-visual-color: var(--spectrum-blue-800);
+    --spectrum-indigo-visual-color: var(--spectrum-indigo-800);
+    --spectrum-purple-visual-color: var(--spectrum-purple-800);
+    --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
+    --spectrum-magenta-visual-color: var(--spectrum-magenta-800);
     --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.15);
     --spectrum-background-base-color: var(--spectrum-gray-200);
     --spectrum-background-layer-1-color: var(--spectrum-gray-100);

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,47 @@ 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
+    );
+}