@spectrum-web-components/styles 0.14.0 → 0.15.1-devmode.7

package/tokens/express/global-vars.css

@@ -0,0 +1,268 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:host {
+    --spectrum-accent-color-100: var(--spectrum-indigo-100);
+    --spectrum-accent-color-200: var(--spectrum-indigo-200);
+    --spectrum-accent-color-300: var(--spectrum-indigo-300);
+    --spectrum-accent-color-400: var(--spectrum-indigo-400);
+    --spectrum-accent-color-500: var(--spectrum-indigo-500);
+    --spectrum-accent-color-600: var(--spectrum-indigo-600);
+    --spectrum-accent-color-700: var(--spectrum-indigo-700);
+    --spectrum-accent-color-800: var(--spectrum-indigo-800);
+    --spectrum-accent-color-900: var(--spectrum-indigo-900);
+    --spectrum-accent-color-1000: var(--spectrum-indigo-1000);
+    --spectrum-accent-color-1100: var(--spectrum-indigo-1100);
+    --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
+    --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
+    --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
+    --spectrum-border-width-100: 2px;
+}
+:host {
+    --system-spectrum-actionbutton-background-color-default: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-actionbutton-background-color-hover: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-actionbutton-background-color-down: var(
+        --spectrum-gray-400
+    );
+    --system-spectrum-actionbutton-background-color-focus: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-actionbutton-border-color-default: transparent;
+    --system-spectrum-actionbutton-border-color-hover: transparent;
+    --system-spectrum-actionbutton-border-color-down: transparent;
+    --system-spectrum-actionbutton-border-color-focus: transparent;
+    --system-spectrum-actionbutton-content-color-default: var(
+        --spectrum-neutral-content-color-default
+    );
+    --system-spectrum-actionbutton-content-color-hover: var(
+        --spectrum-neutral-content-color-hover
+    );
+    --system-spectrum-actionbutton-content-color-down: var(
+        --spectrum-neutral-content-color-down
+    );
+    --system-spectrum-actionbutton-content-color-focus: var(
+        --spectrum-neutral-content-color-key-focus
+    );
+    --system-spectrum-actionbutton-background-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
+    --system-spectrum-actionbutton-border-color-disabled: transparent;
+    --system-spectrum-actionbutton-content-color-disabled: var(
+        --spectrum-disabled-content-color
+    );
+    --system-spectrum-actionbutton-quiet-background-color-default: transparent;
+    --system-spectrum-actionbutton-quiet-background-color-hover: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-actionbutton-quiet-background-color-down: var(
+        --spectrum-gray-300
+    );
+    --system-spectrum-actionbutton-quiet-background-color-focus: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-actionbutton-quiet-border-color-default: transparent;
+    --system-spectrum-actionbutton-quiet-border-color-hover: transparent;
+    --system-spectrum-actionbutton-quiet-border-color-down: transparent;
+    --system-spectrum-actionbutton-quiet-border-color-focus: transparent;
+    --system-spectrum-actionbutton-quiet-background-color-disabled: transparent;
+    --system-spectrum-actionbutton-quiet-border-color-disabled: transparent;
+    --system-spectrum-actionbutton-selected-background-color-default: var(
+        --spectrum-neutral-background-color-default
+    );
+    --system-spectrum-actionbutton-selected-background-color-hover: var(
+        --spectrum-neutral-background-color-hover
+    );
+    --system-spectrum-actionbutton-selected-background-color-down: var(
+        --spectrum-neutral-background-color-down
+    );
+    --system-spectrum-actionbutton-selected-background-color-focus: var(
+        --spectrum-neutral-background-color-key-focus
+    );
+    --system-spectrum-actionbutton-selected-border-color-default: transparent;
+    --system-spectrum-actionbutton-selected-border-color-hover: transparent;
+    --system-spectrum-actionbutton-selected-border-color-down: transparent;
+    --system-spectrum-actionbutton-selected-border-color-focus: transparent;
+    --system-spectrum-actionbutton-selected-content-color-default: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-selected-content-color-hover: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-selected-content-color-down: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-selected-content-color-focus: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-selected-background-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
+    --system-spectrum-actionbutton-selected-border-color-disabled: transparent;
+    --system-spectrum-actionbutton-selected-emphasized-background-color-default: var(
+        --spectrum-accent-background-color-default
+    );
+    --system-spectrum-actionbutton-selected-emphasized-background-color-hover: var(
+        --spectrum-accent-background-color-hover
+    );
+    --system-spectrum-actionbutton-selected-emphasized-background-color-down: var(
+        --spectrum-accent-background-color-down
+    );
+    --system-spectrum-actionbutton-selected-emphasized-background-color-focus: var(
+        --spectrum-accent-background-color-key-focus
+    );
+    --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent;
+    --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent;
+    --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent;
+    --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover: transparent;
+    --system-spectrum-actionbutton-staticblack-quiet-border-color-down: transparent;
+    --system-spectrum-actionbutton-staticwhite-quiet-border-color-down: transparent;
+    --system-spectrum-actionbutton-staticblack-quiet-border-color-focus: transparent;
+    --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus: transparent;
+    --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled: transparent;
+    --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled: transparent;
+    --system-spectrum-actionbutton-staticblack-background-color-default: var(
+        --spectrum-transparent-black-200
+    );
+    --system-spectrum-actionbutton-staticblack-background-color-hover: var(
+        --spectrum-transparent-black-300
+    );
+    --system-spectrum-actionbutton-staticblack-background-color-down: var(
+        --spectrum-transparent-black-400
+    );
+    --system-spectrum-actionbutton-staticblack-background-color-focus: var(
+        --spectrum-transparent-black-300
+    );
+    --system-spectrum-actionbutton-staticblack-border-color-default: transparent;
+    --system-spectrum-actionbutton-staticblack-border-color-hover: transparent;
+    --system-spectrum-actionbutton-staticblack-border-color-down: transparent;
+    --system-spectrum-actionbutton-staticblack-border-color-focus: transparent;
+    --system-spectrum-actionbutton-staticblack-content-color-default: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticblack-content-color-hover: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticblack-content-color-down: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticblack-content-color-focus: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticblack-focus-ring-color: var(
+        --spectrum-static-black-focus-ring-color
+    );
+    --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent;
+    --system-spectrum-actionbutton-staticblack-border-color-disabled: var(
+        --spectrum-disabled-static-black-border-color
+    );
+    --system-spectrum-actionbutton-staticblack-content-color-disabled: var(
+        --spectrum-disabled-static-black-content-color
+    );
+    --system-spectrum-actionbutton-staticblack-selected-background-color-default: var(
+        --spectrum-transparent-black-800
+    );
+    --system-spectrum-actionbutton-staticblack-selected-background-color-hover: var(
+        --spectrum-transparent-black-900
+    );
+    --system-spectrum-actionbutton-staticblack-selected-background-color-down: var(
+        --spectrum-transparent-black-900
+    );
+    --system-spectrum-actionbutton-staticblack-selected-background-color-focus: var(
+        --spectrum-transparent-black-900
+    );
+    --system-spectrum-actionbutton-staticblack-selected-border-color-disabled: transparent;
+    --system-spectrum-actionbutton-staticblack-selected-content-color-default: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticblack-selected-content-color-hover: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticblack-selected-content-color-down: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticblack-selected-content-color-focus: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticblack-selected-background-color-disabled: var(
+        --spectrum-disabled-static-black-background-color
+    );
+    --system-spectrum-actionbutton-staticwhite-background-color-default: var(
+        --spectrum-transparent-white-200
+    );
+    --system-spectrum-actionbutton-staticwhite-background-color-hover: var(
+        --spectrum-transparent-white-300
+    );
+    --system-spectrum-actionbutton-staticwhite-background-color-down: var(
+        --spectrum-transparent-white-400
+    );
+    --system-spectrum-actionbutton-staticwhite-background-color-focus: var(
+        --spectrum-transparent-white-300
+    );
+    --system-spectrum-actionbutton-staticwhite-border-color-default: transparent;
+    --system-spectrum-actionbutton-staticwhite-border-color-hover: transparent;
+    --system-spectrum-actionbutton-staticwhite-border-color-down: transparent;
+    --system-spectrum-actionbutton-staticwhite-border-color-focus: transparent;
+    --system-spectrum-actionbutton-staticwhite-content-color-default: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticwhite-content-color-hover: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticwhite-content-color-down: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticwhite-content-color-focus: var(
+        --spectrum-white
+    );
+    --system-spectrum-actionbutton-staticwhite-focus-ring-color: var(
+        --spectrum-static-white-focus-ring-color
+    );
+    --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent;
+    --system-spectrum-actionbutton-staticwhite-border-color-disabled: var(
+        --spectrum-disabled-static-white-border-color
+    );
+    --system-spectrum-actionbutton-staticwhite-content-color-disabled: var(
+        --spectrum-disabled-static-white-content-color
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-background-color-default: var(
+        --spectrum-transparent-white-800
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-background-color-hover: var(
+        --spectrum-transparent-white-900
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-background-color-down: var(
+        --spectrum-transparent-white-900
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-background-color-focus: var(
+        --spectrum-transparent-white-900
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-content-color-default: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-content-color-hover: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-content-color-down: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-content-color-focus: var(
+        --spectrum-black
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-background-color-disabled: var(
+        --spectrum-disabled-static-white-background-color
+    );
+    --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled: transparent;
+}

package/tokens/express/large-vars.css

@@ -0,0 +1,48 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:host {
+    --spectrum-checkbox-control-size-small: 18px;
+    --spectrum-checkbox-control-size-medium: 20px;
+    --spectrum-checkbox-control-size-large: 22px;
+    --spectrum-checkbox-control-size-extra-large: 26px;
+    --spectrum-checkbox-top-to-control-small: 6px;
+    --spectrum-checkbox-top-to-control-medium: 10px;
+    --spectrum-checkbox-top-to-control-large: 14px;
+    --spectrum-checkbox-top-to-control-extra-large: 17px;
+    --spectrum-radio-button-control-size-small: 18px;
+    --spectrum-radio-button-control-size-medium: 20px;
+    --spectrum-radio-button-control-size-large: 22px;
+    --spectrum-radio-button-control-size-extra-large: 26px;
+    --spectrum-radio-button-top-to-control-small: 6px;
+    --spectrum-radio-button-top-to-control-medium: 10px;
+    --spectrum-radio-button-top-to-control-large: 14px;
+    --spectrum-radio-button-top-to-control-extra-large: 17px;
+    --spectrum-switch-control-width-small: 32px;
+    --spectrum-switch-control-width-medium: 36px;
+    --spectrum-switch-control-width-large: 41px;
+    --spectrum-switch-control-width-extra-large: 46px;
+    --spectrum-switch-control-height-small: 18px;
+    --spectrum-switch-control-height-medium: 20px;
+    --spectrum-switch-control-height-large: 22px;
+    --spectrum-switch-control-height-extra-large: 26px;
+    --spectrum-switch-top-to-control-small: 6px;
+    --spectrum-switch-top-to-control-medium: 10px;
+    --spectrum-switch-top-to-control-large: 14px;
+    --spectrum-switch-top-to-control-extra-large: 17px;
+    --spectrum-corner-radius-75: 4px;
+    --spectrum-corner-radius-100: 8px;
+    --spectrum-corner-radius-200: 16px;
+    --spectrum-drop-shadow-x: 0px;
+    --spectrum-drop-shadow-y: 4px;
+    --spectrum-drop-shadow-blur: 16px;
+}

package/tokens/express/medium-vars.css

@@ -0,0 +1,48 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:host {
+    --spectrum-checkbox-control-size-small: 14px;
+    --spectrum-checkbox-control-size-medium: 16px;
+    --spectrum-checkbox-control-size-large: 18px;
+    --spectrum-checkbox-control-size-extra-large: 20px;
+    --spectrum-checkbox-top-to-control-small: 5px;
+    --spectrum-checkbox-top-to-control-medium: 8px;
+    --spectrum-checkbox-top-to-control-large: 11px;
+    --spectrum-checkbox-top-to-control-extra-large: 14px;
+    --spectrum-radio-button-control-size-small: 14px;
+    --spectrum-radio-button-control-size-medium: 16px;
+    --spectrum-radio-button-control-size-large: 18px;
+    --spectrum-radio-button-control-size-extra-large: 20px;
+    --spectrum-radio-button-top-to-control-small: 5px;
+    --spectrum-radio-button-top-to-control-medium: 8px;
+    --spectrum-radio-button-top-to-control-large: 11px;
+    --spectrum-radio-button-top-to-control-extra-large: 14px;
+    --spectrum-switch-control-width-small: 25px;
+    --spectrum-switch-control-width-medium: 28px;
+    --spectrum-switch-control-width-large: 32px;
+    --spectrum-switch-control-width-extra-large: 35px;
+    --spectrum-switch-control-height-small: 14px;
+    --spectrum-switch-control-height-medium: 16px;
+    --spectrum-switch-control-height-large: 18px;
+    --spectrum-switch-control-height-extra-large: 20px;
+    --spectrum-switch-top-to-control-small: 5px;
+    --spectrum-switch-top-to-control-medium: 8px;
+    --spectrum-switch-top-to-control-large: 11px;
+    --spectrum-switch-top-to-control-extra-large: 14px;
+    --spectrum-corner-radius-75: 3px;
+    --spectrum-corner-radius-100: 6px;
+    --spectrum-corner-radius-200: 12px;
+    --spectrum-drop-shadow-x: 0px;
+    --spectrum-drop-shadow-y: 4px;
+    --spectrum-drop-shadow-blur: 16px;
+}

package/tokens/global-vars.css

@@ -0,0 +1,161 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:host {
+    --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
+    --spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
+    --spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);
+    --spectrum-transparent-white-500: rgba(255, 255, 255, 0.55);
+    --spectrum-transparent-white-600: rgba(255, 255, 255, 0.7);
+    --spectrum-transparent-white-700: rgba(255, 255, 255, 0.8);
+    --spectrum-transparent-white-800: rgba(255, 255, 255, 0.9);
+    --spectrum-transparent-white-900: rgb(255, 255, 255);
+    --spectrum-transparent-black-200: rgba(0, 0, 0, 0.1);
+    --spectrum-transparent-black-300: rgba(0, 0, 0, 0.25);
+    --spectrum-transparent-black-400: rgba(0, 0, 0, 0.4);
+    --spectrum-transparent-black-500: rgba(0, 0, 0, 0.55);
+    --spectrum-transparent-black-600: rgba(0, 0, 0, 0.7);
+    --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-static-white-focus-ring-color: var(--spectrum-white);
+    --spectrum-static-black-focus-ring-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);
+    --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
+    --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
+    --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
+    --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900);
+    --spectrum-neutral-subdued-content-color-key-focus: var(
+        --spectrum-gray-800
+    );
+    --spectrum-accent-content-color: var(--spectrum-accent-color-900);
+    --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
+    --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100);
+    --spectrum-accent-content-color-key-focus: var(
+        --spectrum-accent-color-1000
+    );
+    --spectrum-negative-content-color: var(--spectrum-negative-color-900);
+    --spectrum-negative-content-color-hover: var(
+        --spectrum-negative-color-1000
+    );
+    --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100);
+    --spectrum-negative-content-color-key-focus: var(
+        --spectrum-negative-color-1000
+    );
+    --spectrum-disabled-content-color: var(--spectrum-gray-400);
+    --spectrum-disabled-static-white-content-color: var(
+        --spectrum-transparent-white-500
+    );
+    --spectrum-disabled-static-black-content-color: var(
+        --spectrum-transparent-black-500
+    );
+    --spectrum-disabled-background-color: var(--spectrum-gray-200);
+    --spectrum-disabled-static-white-background-color: var(
+        --spectrum-transparent-white-200
+    );
+    --spectrum-disabled-static-black-background-color: var(
+        --spectrum-transparent-black-200
+    );
+    --spectrum-disabled-border-color: var(--spectrum-gray-300);
+    --spectrum-disabled-static-white-border-color: var(
+        --spectrum-transparent-white-300
+    );
+    --spectrum-disabled-static-black-border-color: var(
+        --spectrum-transparent-black-300
+    );
+    --spectrum-informative-color-100: var(--spectrum-blue-100);
+    --spectrum-informative-color-200: var(--spectrum-blue-200);
+    --spectrum-informative-color-300: var(--spectrum-blue-300);
+    --spectrum-informative-color-400: var(--spectrum-blue-400);
+    --spectrum-informative-color-500: var(--spectrum-blue-500);
+    --spectrum-informative-color-600: var(--spectrum-blue-600);
+    --spectrum-informative-color-700: var(--spectrum-blue-700);
+    --spectrum-informative-color-800: var(--spectrum-blue-800);
+    --spectrum-informative-color-900: var(--spectrum-blue-900);
+    --spectrum-informative-color-1000: var(--spectrum-blue-1000);
+    --spectrum-informative-color-1100: var(--spectrum-blue-1100);
+    --spectrum-informative-color-1200: var(--spectrum-blue-1200);
+    --spectrum-informative-color-1300: var(--spectrum-blue-1300);
+    --spectrum-informative-color-1400: var(--spectrum-blue-1400);
+    --spectrum-negative-color-100: var(--spectrum-red-100);
+    --spectrum-negative-color-200: var(--spectrum-red-200);
+    --spectrum-negative-color-300: var(--spectrum-red-300);
+    --spectrum-negative-color-400: var(--spectrum-red-400);
+    --spectrum-negative-color-500: var(--spectrum-red-500);
+    --spectrum-negative-color-600: var(--spectrum-red-600);
+    --spectrum-negative-color-700: var(--spectrum-red-700);
+    --spectrum-negative-color-800: var(--spectrum-red-800);
+    --spectrum-negative-color-900: var(--spectrum-red-900);
+    --spectrum-negative-color-1000: var(--spectrum-red-1000);
+    --spectrum-negative-color-1100: var(--spectrum-red-1100);
+    --spectrum-negative-color-1200: var(--spectrum-red-1200);
+    --spectrum-negative-color-1300: var(--spectrum-red-1300);
+    --spectrum-negative-color-1400: var(--spectrum-red-1400);
+    --spectrum-notice-color-100: var(--spectrum-orange-100);
+    --spectrum-notice-color-200: var(--spectrum-orange-200);
+    --spectrum-notice-color-300: var(--spectrum-orange-300);
+    --spectrum-notice-color-400: var(--spectrum-orange-400);
+    --spectrum-notice-color-500: var(--spectrum-orange-500);
+    --spectrum-notice-color-600: var(--spectrum-orange-600);
+    --spectrum-notice-color-700: var(--spectrum-orange-700);
+    --spectrum-notice-color-800: var(--spectrum-orange-800);
+    --spectrum-notice-color-900: var(--spectrum-orange-900);
+    --spectrum-notice-color-1000: var(--spectrum-orange-1000);
+    --spectrum-notice-color-1100: var(--spectrum-orange-1100);
+    --spectrum-notice-color-1200: var(--spectrum-orange-1200);
+    --spectrum-notice-color-1300: var(--spectrum-orange-1300);
+    --spectrum-notice-color-1400: var(--spectrum-orange-1400);
+    --spectrum-positive-color-100: var(--spectrum-green-100);
+    --spectrum-positive-color-200: var(--spectrum-green-200);
+    --spectrum-positive-color-300: var(--spectrum-green-300);
+    --spectrum-positive-color-400: var(--spectrum-green-400);
+    --spectrum-positive-color-500: var(--spectrum-green-500);
+    --spectrum-positive-color-600: var(--spectrum-green-600);
+    --spectrum-positive-color-700: var(--spectrum-green-700);
+    --spectrum-positive-color-800: var(--spectrum-green-800);
+    --spectrum-positive-color-900: var(--spectrum-green-900);
+    --spectrum-positive-color-1000: var(--spectrum-green-1000);
+    --spectrum-positive-color-1100: var(--spectrum-green-1100);
+    --spectrum-positive-color-1200: var(--spectrum-green-1200);
+    --spectrum-positive-color-1300: var(--spectrum-green-1300);
+    --spectrum-positive-color-1400: var(--spectrum-green-1400);
+    --spectrum-black: rgb(0, 0, 0);
+    --spectrum-white: rgb(255, 255, 255);
+    --spectrum-button-minimum-width-multiplier: 2.25;
+    --spectrum-divider-thickness-small: 1px;
+    --spectrum-divider-thickness-medium: 2px;
+    --spectrum-divider-thickness-large: 4px;
+    --spectrum-radio-button-selection-indicator: 4px;
+    --spectrum-android-elevation: 2dp;
+    --spectrum-spacing-50: 2px;
+    --spectrum-spacing-75: 4px;
+    --spectrum-spacing-100: 8px;
+    --spectrum-spacing-200: 12px;
+    --spectrum-spacing-300: 16px;
+    --spectrum-spacing-400: 24px;
+    --spectrum-spacing-500: 32px;
+    --spectrum-spacing-600: 40px;
+    --spectrum-spacing-700: 48px;
+    --spectrum-spacing-800: 64px;
+    --spectrum-spacing-900: 80px;
+    --spectrum-spacing-1000: 96px;
+    --spectrum-focus-ring-thickness: 2px;
+    --spectrum-focus-ring-gap: 2px;
+    --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;
+}

package/tokens/large-vars.css

@@ -0,0 +1,140 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:host {
+    --spectrum-component-pill-edge-to-visual-75: 13px;
+    --spectrum-component-pill-edge-to-visual-100: 17px;
+    --spectrum-component-pill-edge-to-visual-200: 22px;
+    --spectrum-component-pill-edge-to-visual-300: 27px;
+    --spectrum-component-pill-edge-to-visual-only-75: 5px;
+    --spectrum-component-pill-edge-to-visual-only-100: 9px;
+    --spectrum-component-pill-edge-to-visual-only-200: 13px;
+    --spectrum-component-pill-edge-to-visual-only-300: 16px;
+    --spectrum-component-pill-edge-to-text-75: 15px;
+    --spectrum-component-pill-edge-to-text-100: 20px;
+    --spectrum-component-pill-edge-to-text-200: 25px;
+    --spectrum-component-pill-edge-to-text-300: 30px;
+    --spectrum-component-edge-to-visual-50: 7px;
+    --spectrum-component-edge-to-visual-75: 9px;
+    --spectrum-component-edge-to-visual-100: 12px;
+    --spectrum-component-edge-to-visual-200: 16px;
+    --spectrum-component-edge-to-visual-300: 19px;
+    --spectrum-component-edge-to-visual-only-50: 4px;
+    --spectrum-component-edge-to-visual-only-75: 5px;
+    --spectrum-component-edge-to-visual-only-100: 9px;
+    --spectrum-component-edge-to-visual-only-200: 13px;
+    --spectrum-component-edge-to-visual-only-300: 16px;
+    --spectrum-component-edge-to-text-50: 10px;
+    --spectrum-component-edge-to-text-75: 11px;
+    --spectrum-component-edge-to-text-100: 15px;
+    --spectrum-component-edge-to-text-200: 19px;
+    --spectrum-component-edge-to-text-300: 22px;
+    --spectrum-component-height-50: 26px;
+    --spectrum-component-height-75: 30px;
+    --spectrum-component-height-100: 40px;
+    --spectrum-component-height-200: 50px;
+    --spectrum-component-height-300: 60px;
+    --spectrum-component-top-to-workflow-icon-50: 4px;
+    --spectrum-component-top-to-workflow-icon-75: 5px;
+    --spectrum-component-top-to-workflow-icon-100: 9px;
+    --spectrum-component-top-to-workflow-icon-200: 13px;
+    --spectrum-component-top-to-workflow-icon-300: 16px;
+    --spectrum-component-top-to-text-50: 4px;
+    --spectrum-component-top-to-text-75: 5px;
+    --spectrum-component-top-to-text-100: 8px;
+    --spectrum-component-top-to-text-200: 12px;
+    --spectrum-component-top-to-text-300: 15px;
+    --spectrum-component-bottom-to-text-50: 6px;
+    --spectrum-component-bottom-to-text-75: 7px;
+    --spectrum-component-bottom-to-text-100: 11px;
+    --spectrum-component-bottom-to-text-200: 14px;
+    --spectrum-component-bottom-to-text-300: 18px;
+    --spectrum-action-bar-height: 56px;
+    --spectrum-action-bar-top-to-item-counter: 16px;
+    --spectrum-action-button-edge-to-hold-icon-small: 3px;
+    --spectrum-action-button-edge-to-hold-icon-medium: 5px;
+    --spectrum-action-button-edge-to-hold-icon-large: 6px;
+    --spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
+    --spectrum-field-label-text-to-asterisk-small: 5px;
+    --spectrum-field-label-text-to-asterisk-medium: 5px;
+    --spectrum-field-label-text-to-asterisk-large: 6px;
+    --spectrum-field-label-text-to-asterisk-extra-large: 6px;
+    --spectrum-field-label-top-to-asterisk-small: 11px;
+    --spectrum-field-label-top-to-asterisk-medium: 15px;
+    --spectrum-field-label-top-to-asterisk-large: 19px;
+    --spectrum-field-label-top-to-asterisk-extra-large: 24px;
+    --spectrum-field-label-top-margin-small: 0px;
+    --spectrum-field-label-top-margin-medium: 5px;
+    --spectrum-field-label-top-margin-large: 5px;
+    --spectrum-field-label-top-margin-extra-large: 5px;
+    --spectrum-help-text-top-to-workflow-icon-small: 5px;
+    --spectrum-help-text-top-to-workflow-icon-medium: 9px;
+    --spectrum-help-text-top-to-workflow-icon-large: 13px;
+    --spectrum-help-text-top-to-workflow-icon-extra-large: 16px;
+    --spectrum-in-line-alert-minimum-width: 360px;
+    --spectrum-progress-bar-minimum-width: 48px;
+    --spectrum-progress-bar-maximum-width: 768px;
+    --spectrum-progress-bar-thickness-small: 5px;
+    --spectrum-progress-bar-thickness-medium: 8px;
+    --spectrum-progress-bar-thickness-large: 10px;
+    --spectrum-progress-bar-thickness-extra-large: 13px;
+    --spectrum-progress-circle-size-small: 20px;
+    --spectrum-progress-circle-size-medium: 40px;
+    --spectrum-progress-circle-size-large: 80px;
+    --spectrum-progress-circle-thickness-small: 3px;
+    --spectrum-progress-circle-thickness-medium: 4px;
+    --spectrum-progress-circle-thickness-large: 5px;
+    --spectrum-status-light-dot-size-small: 8px;
+    --spectrum-status-light-dot-size-medium: 10px;
+    --spectrum-status-light-dot-size-large: 12px;
+    --spectrum-status-light-dot-size-extra-large: 12px;
+    --spectrum-status-light-top-to-dot-small: 11px;
+    --spectrum-status-light-top-to-dot-medium: 15px;
+    --spectrum-status-light-top-to-dot-large: 19px;
+    --spectrum-status-light-top-to-dot-extra-large: 24px;
+    --spectrum-toast-height: 56px;
+    --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-maximum-width: 200px;
+    --spectrum-font-size-50: 13px;
+    --spectrum-font-size-75: 15px;
+    --spectrum-font-size-100: 17px;
+    --spectrum-font-size-200: 19px;
+    --spectrum-font-size-300: 22px;
+    --spectrum-font-size-400: 24px;
+    --spectrum-font-size-500: 27px;
+    --spectrum-font-size-600: 31px;
+    --spectrum-font-size-700: 34px;
+    --spectrum-font-size-800: 39px;
+    --spectrum-font-size-900: 44px;
+    --spectrum-font-size-1000: 49px;
+    --spectrum-font-size-1100: 55px;
+    --spectrum-font-size-1200: 62px;
+    --spectrum-font-size-1300: 70px;
+    --spectrum-workflow-icon-size-50: 18px;
+    --spectrum-workflow-icon-size-75: 20px;
+    --spectrum-workflow-icon-size-100: 22px;
+    --spectrum-workflow-icon-size-200: 24px;
+    --spectrum-workflow-icon-size-300: 28px;
+    --spectrum-text-to-visual-50: 8px;
+    --spectrum-text-to-visual-75: 9px;
+    --spectrum-text-to-visual-100: 10px;
+    --spectrum-text-to-visual-200: 11px;
+    --spectrum-text-to-visual-300: 13px;
+    --spectrum-text-to-control-75: 11px;
+    --spectrum-text-to-control-100: 13px;
+    --spectrum-text-to-control-200: 14px;
+    --spectrum-text-to-control-300: 16px;
+}