@spectrum-web-components/theme 0.9.4-express.12 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +38 -56
  2. package/custom-elements.json +3 -163
  3. package/package.json +5 -12
  4. package/src/Theme.d.ts +7 -12
  5. package/src/Theme.js +13 -57
  6. package/src/Theme.js.map +1 -1
  7. package/src/theme.css.js +31 -7
  8. package/src/theme.css.js.map +1 -1
  9. package/src/typography.css.js +1 -1
  10. package/src/typography.css.js.map +1 -1
  11. package/express/scale-large.d.ts +0 -1
  12. package/express/scale-large.js +0 -15
  13. package/express/scale-large.js.map +0 -1
  14. package/express/scale-medium.d.ts +0 -1
  15. package/express/scale-medium.js +0 -15
  16. package/express/scale-medium.js.map +0 -1
  17. package/express/theme-dark.d.ts +0 -1
  18. package/express/theme-dark.js +0 -15
  19. package/express/theme-dark.js.map +0 -1
  20. package/express/theme-light.d.ts +0 -1
  21. package/express/theme-light.js +0 -15
  22. package/express/theme-light.js.map +0 -1
  23. package/src/express/core.d.ts +0 -1
  24. package/src/express/core.js +0 -15
  25. package/src/express/core.js.map +0 -1
  26. package/src/express/scale-large.css.d.ts +0 -2
  27. package/src/express/scale-large.css.js +0 -4079
  28. package/src/express/scale-large.css.js.map +0 -1
  29. package/src/express/scale-medium.css.d.ts +0 -2
  30. package/src/express/scale-medium.css.js +0 -4133
  31. package/src/express/scale-medium.css.js.map +0 -1
  32. package/src/express/theme-dark.css.d.ts +0 -2
  33. package/src/express/theme-dark.css.js +0 -35
  34. package/src/express/theme-dark.css.js.map +0 -1
  35. package/src/express/theme-light.css.d.ts +0 -2
  36. package/src/express/theme-light.css.js +0 -35
  37. package/src/express/theme-light.css.js.map +0 -1
  38. package/src/express/theme.css.d.ts +0 -2
  39. package/src/express/theme.css.js +0 -1629
  40. package/src/express/theme.css.js.map +0 -1
  41. package/src/express/themes.d.ts +0 -5
  42. package/src/express/themes.js +0 -17
  43. package/src/express/themes.js.map +0 -1
  44. package/stories/theme.stories.js +0 -236
  45. package/stories/theme.stories.js.map +0 -1
package/src/express/theme.css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"theme.css.js","sourceRoot":"","sources":["theme.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8kDjB,CAAC;AACF,eAAe,MAAM,CAAC","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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host,:root{--spectrum-global-animation-linear:cubic-bezier(0,0,1,1);--spectrum-global-animation-duration-0:0ms;--spectrum-global-animation-duration-100:130ms;--spectrum-global-animation-duration-200:160ms;--spectrum-global-animation-duration-300:190ms;--spectrum-global-animation-duration-400:220ms;--spectrum-global-animation-duration-500:250ms;--spectrum-global-animation-duration-600:300ms;--spectrum-global-animation-duration-700:350ms;--spectrum-global-animation-duration-800:400ms;--spectrum-global-animation-duration-900:450ms;--spectrum-global-animation-duration-1000:500ms;--spectrum-global-animation-duration-2000:1000ms;--spectrum-global-animation-duration-4000:2000ms;--spectrum-global-animation-ease-in-out:cubic-bezier(0.45,0,0.4,1);--spectrum-global-animation-ease-in:cubic-bezier(0.5,0,1,1);--spectrum-global-animation-ease-out:cubic-bezier(0,0,0.4,1);--spectrum-global-animation-ease-linear:cubic-bezier(0,0,1,1);--spectrum-global-color-status:Verified;--spectrum-global-color-version:5.1.0;--spectrum-global-color-static-blue:#0261d6;--spectrum-global-color-static-gray-50:#fff;--spectrum-global-color-static-gray-75:#fff;--spectrum-global-color-static-gray-100:#fff;--spectrum-global-color-static-gray-200:#ebebeb;--spectrum-global-color-static-gray-300:#dadada;--spectrum-global-color-static-gray-400:#b3b3b3;--spectrum-global-color-static-gray-500:#929292;--spectrum-global-color-static-gray-600:#6e6e6e;--spectrum-global-color-static-gray-700:#474747;--spectrum-global-color-static-gray-800:#222;--spectrum-global-color-static-gray-900:#000;--spectrum-global-color-static-red-400:#fa604b;--spectrum-global-color-static-red-500:#f04534;--spectrum-global-color-static-red-600:#e32a1f;--spectrum-global-color-static-red-700:#ce0f0b;--spectrum-global-color-static-red-800:#b60000;--spectrum-global-color-static-orange-400:#e87200;--spectrum-global-color-static-orange-500:#d56300;--spectrum-global-color-static-orange-600:#c25600;--spectrum-global-color-static-orange-700:#ac4900;--spectrum-global-color-static-orange-800:#963e00;--spectrum-global-color-static-yellow-200:#fdf8cd;--spectrum-global-color-static-yellow-300:#f9e442;--spectrum-global-color-static-yellow-400:#ec0;--spectrum-global-color-static-yellow-500:#dbb700;--spectrum-global-color-static-yellow-600:#c8a300;--spectrum-global-color-static-yellow-700:#b48f00;--spectrum-global-color-static-yellow-800:#a47f00;--spectrum-global-color-static-chartreuse-300:#c4f081;--spectrum-global-color-static-chartreuse-400:#a6df58;--spectrum-global-color-static-chartreuse-500:#8bcc39;--spectrum-global-color-static-chartreuse-600:#74b824;--spectrum-global-color-static-chartreuse-700:#62a416;--spectrum-global-color-static-chartreuse-800:#559310;--spectrum-global-color-static-celery-200:#a9f597;--spectrum-global-color-static-celery-300:#7be471;--spectrum-global-color-static-celery-400:#53d254;--spectrum-global-color-static-celery-500:#2dbf3a;--spectrum-global-color-static-celery-600:#0dab25;--spectrum-global-color-static-celery-700:#009a17;--spectrum-global-color-static-celery-800:#008910;--spectrum-global-color-static-green-400:#1ba772;--spectrum-global-color-static-green-500:#009764;--spectrum-global-color-static-green-600:#008757;--spectrum-global-color-static-green-700:#00764c;--spectrum-global-color-static-green-800:#006641;--spectrum-global-color-static-seafoam-200:#49cbcd;--spectrum-global-color-static-seafoam-300:#25b8bd;--spectrum-global-color-static-seafoam-400:#00a3aa;--spectrum-global-color-static-seafoam-500:#00929b;--spectrum-global-color-static-seafoam-600:#00828e;--spectrum-global-color-static-seafoam-700:#00727e;--spectrum-global-color-static-seafoam-800:#00626e;--spectrum-global-color-static-blue-200:#7fbffb;--spectrum-global-color-static-blue-300:#60abf8;--spectrum-global-color-static-blue-400:#3e95f4;--spectrum-global-color-static-blue-500:#1f82f6;--spectrum-global-color-static-blue-600:#0b71ef;--spectrum-global-color-static-blue-700:#0261d6;--spectrum-global-color-static-blue-800:#0055b9;--spectrum-global-color-static-indigo-200:#9a9dff;--spectrum-global-color-static-indigo-300:#8287fd;--spectrum-global-color-static-indigo-400:#7175f8;--spectrum-global-color-static-indigo-500:#6165f0;--spectrum-global-color-static-indigo-600:#4f54e1;--spectrum-global-color-static-indigo-700:#4246cb;--spectrum-global-color-static-indigo-800:#363ab2;--spectrum-global-color-static-purple-400:#a460f8;--spectrum-global-color-static-purple-500:#964df0;--spectrum-global-color-static-purple-600:#8638e4;--spectrum-global-color-static-purple-700:#7526d5;--spectrum-global-color-static-purple-800:#6317bf;--spectrum-global-color-static-fuchsia-400:#d642d7;--spectrum-global-color-static-fuchsia-500:#c530c6;--spectrum-global-color-static-fuchsia-600:#b21cb3;--spectrum-global-color-static-fuchsia-700:#9f04a0;--spectrum-global-color-static-fuchsia-800:#880089;--spectrum-global-color-static-magenta-200:#fd7cae;--spectrum-global-color-static-magenta-300:#f25e9c;--spectrum-global-color-static-magenta-400:#e5478b;--spectrum-global-color-static-magenta-500:#d7327a;--spectrum-global-color-static-magenta-600:#c41d66;--spectrum-global-color-static-magenta-700:#af0a56;--spectrum-global-color-static-magenta-800:#970049;--spectrum-global-color-static-black:#000;--spectrum-global-color-static-white:#fff;--spectrum-global-color-static-transparent-white-200:hsla(0,0%,100%,.1);--spectrum-global-color-static-transparent-white-300:hsla(0,0%,100%,.25);--spectrum-global-color-static-transparent-white-400:hsla(0,0%,100%,.4);--spectrum-global-color-static-transparent-white-500:hsla(0,0%,100%,.55);--spectrum-global-color-static-transparent-white-600:hsla(0,0%,100%,.7);--spectrum-global-color-static-transparent-white-700:hsla(0,0%,100%,.8);--spectrum-global-color-static-transparent-white-800:hsla(0,0%,100%,.9);--spectrum-global-color-static-transparent-white-900:#fff;--spectrum-global-color-static-transparent-black-200:rgba(0,0,0,.1);--spectrum-global-color-static-transparent-black-300:rgba(0,0,0,.25);--spectrum-global-color-static-transparent-black-400:rgba(0,0,0,.4);--spectrum-global-color-static-transparent-black-500:rgba(0,0,0,.55);--spectrum-global-color-static-transparent-black-600:rgba(0,0,0,.7);--spectrum-global-color-static-transparent-black-700:rgba(0,0,0,.8);--spectrum-global-color-static-transparent-black-800:rgba(0,0,0,.9);--spectrum-global-color-static-transparent-black-900:#000;--spectrum-global-color-sequential-cerulean:#e9fff1,#c8f1e4,#a5e3d7,#82d5ca,#68c5c1,#54b4ba,#3fa2b2,#2991ac,#2280a2,#1f6d98,#1d5c8d,#1a4b83,#1a3979,#1a266f,#191264,#180057;--spectrum-global-color-sequential-forest:#ffffdf,#e2f6ba,#c4eb95,#a4e16d,#8dd366,#77c460,#5fb65a,#48a754,#36984f,#2c894d,#237a4a,#196b47,#105c45,#094d41,#033f3e,#00313a;--spectrum-global-color-sequential-rose:#fff4dd,#ffddd7,#ffc5d2,#feaecb,#fa96c4,#f57ebd,#ef64b5,#e846ad,#d238a1,#bb2e96,#a3248c,#8a1b83,#71167c,#560f74,#370b6e,#000968;--spectrum-global-color-diverging-orange-yellow-seafoam:#580000,#79260b,#9c4511,#bd651a,#dd8629,#f5ad52,#fed693,#ffffe0,#bbe4d1,#76c7be,#3ea8a6,#208288,#076769,#00494b,#002c2d;--spectrum-global-color-diverging-red-yellow-blue:#4a001e,#751232,#a52747,#c65154,#e47961,#f0a882,#fad4ac,#ffffe0,#bce2cf,#89c0c4,#579eb9,#397aa8,#1c5796,#163771,#10194d;--spectrum-global-color-diverging-red-blue:#4a001e,#731331,#9f2945,#cc415a,#e06e85,#ed9ab0,#f8c3d9,#faf0ff,#c6d0f2,#92b2de,#5d94cb,#2f74b3,#265191,#163670,#0b194c;--spectrum-semantic-cta-background-color-default:var(\n--spectrum-global-color-static-indigo-600\n);--spectrum-semantic-cta-background-color-hover:var(\n--spectrum-global-color-static-indigo-700\n);--spectrum-semantic-cta-background-color-down:var(\n--spectrum-global-color-static-indigo-800\n);--spectrum-semantic-cta-background-color-key-focus:var(\n--spectrum-global-color-static-indigo-700\n);--spectrum-semantic-neutral-background-color-default:var(\n--spectrum-global-color-static-gray-800\n);--spectrum-semantic-informative-background-color:var(\n--spectrum-global-color-static-blue-500\n);--spectrum-semantic-positive-background-color:var(\n--spectrum-global-color-static-green-500\n);--spectrum-semantic-negative-background-color:var(\n--spectrum-global-color-static-red-500\n);--spectrum-semantic-negative-color-default:var(\n--spectrum-global-color-red-500\n);--spectrum-semantic-negative-color-hover:var(\n--spectrum-global-color-red-600\n);--spectrum-semantic-negative-color-dark:var(\n--spectrum-global-color-red-600\n);--spectrum-semantic-negative-border-color:var(\n--spectrum-global-color-red-400\n);--spectrum-semantic-negative-icon-color:var(\n--spectrum-global-color-red-600\n);--spectrum-semantic-negative-status-color:var(\n--spectrum-global-color-red-400\n);--spectrum-semantic-negative-text-color-large:var(\n--spectrum-global-color-red-500\n);--spectrum-semantic-negative-text-color-small:var(\n--spectrum-global-color-red-600\n);--spectrum-semantic-negative-text-color-small-hover:var(\n--spectrum-global-color-red-700\n);--spectrum-semantic-negative-text-color-small-down:var(\n--spectrum-global-color-red-700\n);--spectrum-semantic-negative-text-color-small-key-focus:var(\n--spectrum-global-color-red-600\n);--spectrum-semantic-negative-color-down:var(\n--spectrum-global-color-red-700\n);--spectrum-semantic-negative-color-key-focus:var(\n--spectrum-global-color-red-400\n);--spectrum-semantic-negative-background-color-default:var(\n--spectrum-global-color-static-red-600\n);--spectrum-semantic-negative-background-color-hover:var(\n--spectrum-global-color-static-red-700\n);--spectrum-semantic-negative-background-color-down:var(\n--spectrum-global-color-static-red-800\n);--spectrum-semantic-negative-background-color-key-focus:var(\n--spectrum-global-color-static-red-700\n);--spectrum-semantic-notice-background-color:var(\n--spectrum-global-color-static-orange-700\n);--spectrum-semantic-notice-color-default:var(\n--spectrum-global-color-orange-500\n);--spectrum-semantic-notice-color-dark:var(\n--spectrum-global-color-orange-600\n);--spectrum-semantic-notice-border-color:var(\n--spectrum-global-color-orange-400\n);--spectrum-semantic-notice-icon-color:var(\n--spectrum-global-color-orange-600\n);--spectrum-semantic-notice-status-color:var(\n--spectrum-global-color-orange-400\n);--spectrum-semantic-notice-text-color-large:var(\n--spectrum-global-color-orange-500\n);--spectrum-semantic-notice-text-color-small:var(\n--spectrum-global-color-orange-600\n);--spectrum-semantic-notice-color-down:var(\n--spectrum-global-color-orange-700\n);--spectrum-semantic-notice-color-key-focus:var(\n--spectrum-global-color-orange-400\n);--spectrum-semantic-notice-background-color-default:var(\n--spectrum-global-color-static-orange-600\n);--spectrum-semantic-notice-background-color-hover:var(\n--spectrum-global-color-static-orange-700\n);--spectrum-semantic-notice-background-color-down:var(\n--spectrum-global-color-static-orange-800\n);--spectrum-semantic-notice-background-color-key-focus:var(\n--spectrum-global-color-static-orange-700\n);--spectrum-semantic-positive-color-default:var(\n--spectrum-global-color-green-500\n);--spectrum-semantic-positive-color-dark:var(\n--spectrum-global-color-green-600\n);--spectrum-semantic-positive-border-color:var(\n--spectrum-global-color-green-400\n);--spectrum-semantic-positive-icon-color:var(\n--spectrum-global-color-green-600\n);--spectrum-semantic-positive-status-color:var(\n--spectrum-global-color-green-400\n);--spectrum-semantic-positive-text-color-large:var(\n--spectrum-global-color-green-500\n);--spectrum-semantic-positive-text-color-small:var(\n--spectrum-global-color-green-600\n);--spectrum-semantic-positive-color-down:var(\n--spectrum-global-color-green-700\n);--spectrum-semantic-positive-color-key-focus:var(\n--spectrum-global-color-green-400\n);--spectrum-semantic-positive-background-color-default:var(\n--spectrum-global-color-static-green-600\n);--spectrum-semantic-positive-background-color-hover:var(\n--spectrum-global-color-static-green-700\n);--spectrum-semantic-positive-background-color-down:var(\n--spectrum-global-color-static-green-800\n);--spectrum-semantic-positive-background-color-key-focus:var(\n--spectrum-global-color-static-green-700\n);--spectrum-semantic-informative-color-default:var(\n--spectrum-global-color-blue-500\n);--spectrum-semantic-informative-color-dark:var(\n--spectrum-global-color-blue-600\n);--spectrum-semantic-informative-border-color:var(\n--spectrum-global-color-blue-400\n);--spectrum-semantic-informative-icon-color:var(\n--spectrum-global-color-blue-600\n);--spectrum-semantic-informative-status-color:var(\n--spectrum-global-color-blue-400\n);--spectrum-semantic-informative-text-color-large:var(\n--spectrum-global-color-blue-500\n);--spectrum-semantic-informative-text-color-small:var(\n--spectrum-global-color-blue-600\n);--spectrum-semantic-informative-color-down:var(\n--spectrum-global-color-blue-700\n);--spectrum-semantic-informative-color-key-focus:var(\n--spectrum-global-color-blue-400\n);--spectrum-semantic-informative-background-color-default:var(\n--spectrum-global-color-static-blue-600\n);--spectrum-semantic-informative-background-color-hover:var(\n--spectrum-global-color-static-blue-700\n);--spectrum-semantic-informative-background-color-down:var(\n--spectrum-global-color-static-blue-800\n);--spectrum-semantic-informative-background-color-key-focus:var(\n--spectrum-global-color-static-blue-700\n);--spectrum-semantic-neutral-background-color-hover:var(\n--spectrum-global-color-static-gray-800\n);--spectrum-semantic-neutral-background-color-down:var(\n--spectrum-global-color-static-gray-900\n);--spectrum-semantic-neutral-background-color-key-focus:var(\n--spectrum-global-color-static-gray-800\n);--spectrum-semantic-presence-color-1:var(\n--spectrum-global-color-static-red-500\n);--spectrum-semantic-presence-color-2:var(\n--spectrum-global-color-static-orange-400\n);--spectrum-semantic-presence-color-3:var(\n--spectrum-global-color-static-yellow-400\n);--spectrum-semantic-presence-color-4:#4bcca2;--spectrum-semantic-presence-color-5:#00c7ff;--spectrum-semantic-presence-color-6:#008cb8;--spectrum-semantic-presence-color-7:#7e4bf3;--spectrum-semantic-presence-color-8:var(\n--spectrum-global-color-static-fuchsia-600\n);--spectrum-global-dimension-static-percent-50:50%;--spectrum-global-dimension-static-percent-70:70%;--spectrum-global-dimension-static-percent-100:100%;--spectrum-global-dimension-static-breakpoint-xsmall:304px;--spectrum-global-dimension-static-breakpoint-small:768px;--spectrum-global-dimension-static-breakpoint-medium:1280px;--spectrum-global-dimension-static-breakpoint-large:1768px;--spectrum-global-dimension-static-breakpoint-xlarge:2160px;--spectrum-global-dimension-static-grid-columns:12;--spectrum-global-dimension-static-grid-fluid-width:100%;--spectrum-global-dimension-static-grid-fixed-max-width:1280px;--spectrum-global-dimension-static-size-0:0px;--spectrum-global-dimension-static-size-10:1px;--spectrum-global-dimension-static-size-25:2px;--spectrum-global-dimension-static-size-40:3px;--spectrum-global-dimension-static-size-50:4px;--spectrum-global-dimension-static-size-65:5px;--spectrum-global-dimension-static-size-75:6px;--spectrum-global-dimension-static-size-85:7px;--spectrum-global-dimension-static-size-100:8px;--spectrum-global-dimension-static-size-115:9px;--spectrum-global-dimension-static-size-125:10px;--spectrum-global-dimension-static-size-130:11px;--spectrum-global-dimension-static-size-150:12px;--spectrum-global-dimension-static-size-160:13px;--spectrum-global-dimension-static-size-175:14px;--spectrum-global-dimension-static-size-200:16px;--spectrum-global-dimension-static-size-225:18px;--spectrum-global-dimension-static-size-250:20px;--spectrum-global-dimension-static-size-275:22px;--spectrum-global-dimension-static-size-300:24px;--spectrum-global-dimension-static-size-325:26px;--spectrum-global-dimension-static-size-400:32px;--spectrum-global-dimension-static-size-450:36px;--spectrum-global-dimension-static-size-500:40px;--spectrum-global-dimension-static-size-550:44px;--spectrum-global-dimension-static-size-600:48px;--spectrum-global-dimension-static-size-700:56px;--spectrum-global-dimension-static-size-800:64px;--spectrum-global-dimension-static-size-900:72px;--spectrum-global-dimension-static-size-1000:80px;--spectrum-global-dimension-static-size-1200:96px;--spectrum-global-dimension-static-size-1700:136px;--spectrum-global-dimension-static-size-2400:192px;--spectrum-global-dimension-static-size-2500:200px;--spectrum-global-dimension-static-size-2600:208px;--spectrum-global-dimension-static-size-2800:224px;--spectrum-global-dimension-static-size-3200:256px;--spectrum-global-dimension-static-size-3400:272px;--spectrum-global-dimension-static-size-3500:280px;--spectrum-global-dimension-static-size-3600:288px;--spectrum-global-dimension-static-size-3800:304px;--spectrum-global-dimension-static-size-4600:368px;--spectrum-global-dimension-static-size-5000:400px;--spectrum-global-dimension-static-size-6000:480px;--spectrum-global-dimension-static-size-16000:1280px;--spectrum-global-dimension-static-font-size-50:11px;--spectrum-global-dimension-static-font-size-75:12px;--spectrum-global-dimension-static-font-size-100:14px;--spectrum-global-dimension-static-font-size-150:15px;--spectrum-global-dimension-static-font-size-200:16px;--spectrum-global-dimension-static-font-size-300:18px;--spectrum-global-dimension-static-font-size-400:20px;--spectrum-global-dimension-static-font-size-500:22px;--spectrum-global-dimension-static-font-size-600:25px;--spectrum-global-dimension-static-font-size-700:28px;--spectrum-global-dimension-static-font-size-800:32px;--spectrum-global-dimension-static-font-size-900:36px;--spectrum-global-dimension-static-font-size-1000:40px;--spectrum-global-font-family-base:adobe-clean,\"Source Sans Pro\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Ubuntu,\"Trebuchet MS\",\"Lucida Grande\",sans-serif;--spectrum-global-font-family-serif:adobe-clean-serif,\"Source Serif Pro\",Georgia,serif;--spectrum-global-font-family-code:\"Source Code Pro\",Monaco,monospace;--spectrum-global-font-weight-thin:100;--spectrum-global-font-weight-ultra-light:200;--spectrum-global-font-weight-light:300;--spectrum-global-font-weight-regular:400;--spectrum-global-font-weight-medium:500;--spectrum-global-font-weight-semi-bold:600;--spectrum-global-font-weight-bold:700;--spectrum-global-font-weight-extra-bold:800;--spectrum-global-font-weight-black:900;--spectrum-global-font-style-regular:normal;--spectrum-global-font-style-italic:italic;--spectrum-global-font-letter-spacing-none:0;--spectrum-global-font-letter-spacing-small:0.0125em;--spectrum-global-font-letter-spacing-han:0.05em;--spectrum-global-font-letter-spacing-medium:0.06em;--spectrum-global-font-line-height-large:1.7;--spectrum-global-font-line-height-medium:1.5;--spectrum-global-font-line-height-small:1.3;--spectrum-global-font-multiplier-0:0em;--spectrum-global-font-multiplier-25:0.25em;--spectrum-global-font-multiplier-75:0.75em;--spectrum-global-font-font-family-ar:myriad-arabic,adobe-clean,\"Source Sans Pro\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Ubuntu,\"Trebuchet MS\",\"Lucida Grande\",sans-serif;--spectrum-global-font-font-family-he:myriad-hebrew,adobe-clean,\"Source Sans Pro\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Ubuntu,\"Trebuchet MS\",\"Lucida Grande\",sans-serif;--spectrum-global-font-font-family-zh:adobe-clean-han-traditional,source-han-traditional,\"MingLiu\",\"Heiti TC Light\",\"sans-serif\";--spectrum-global-font-font-family-zhhans:adobe-clean-han-simplified-c,source-han-simplified-c,\"SimSun\",\"Heiti SC Light\",\"sans-serif\";--spectrum-global-font-font-family-ko:adobe-clean-han-korean,source-han-korean,\"Malgun Gothic\",\"Apple Gothic\",\"sans-serif\";--spectrum-global-font-font-family-ja:adobe-clean-han-japanese,source-han-japanese,\"Yu Gothic\",\"\\\\30E1 \\\\30A4 \\\\30EA \\\\30AA\",\"\\\\30D2 \\\\30E9 \\\\30AE \\\\30CE \\\\89D2 \\\\30B4 Pro W3\",\"Hiragino Kaku Gothic Pro W3\",\"Osaka\",\"\\\\FF2D \\\\FF33 \\\\FF30 \\\\30B4 \\\\30B7 \\\\30C3 \\\\30AF\",\"MS PGothic\",\"sans-serif\";--spectrum-global-font-font-family-condensed:adobe-clean-han-traditional,source-han-traditional,\"MingLiu\",\"Heiti TC Light\",adobe-clean,\"Source Sans Pro\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Ubuntu,\"Trebuchet MS\",\"Lucida Grande\",sans-serif;--spectrum-alias-loupe-entry-animation-duration:var(\n--spectrum-global-animation-duration-300\n);--spectrum-alias-loupe-exit-animation-duration:var(\n--spectrum-global-animation-duration-300\n);--spectrum-alias-heading-text-font-weight-regular:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-heading-text-font-weight-heavy:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-heading-text-line-height:var(\n--spectrum-global-font-line-height-small\n);--spectrum-alias-heading-text-font-weight-regular-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-heading-text-font-weight-light:var(\n--spectrum-global-font-weight-light\n);--spectrum-alias-heading-text-font-weight-light-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-heading-text-font-weight-heavy-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-heading-text-font-weight-quiet:var(\n--spectrum-global-font-weight-light\n);--spectrum-alias-heading-text-font-weight-quiet-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-heading-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-heading-text-font-weight-strong-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-heading-margin-bottom:var(\n--spectrum-global-font-multiplier-25\n);--spectrum-alias-subheading-text-font-weight:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-subheading-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-body-text-font-family:var(\n--spectrum-global-font-family-base\n);--spectrum-alias-body-text-line-height:var(\n--spectrum-global-font-line-height-medium\n);--spectrum-alias-body-text-font-weight:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-body-text-font-weight-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-body-margin-bottom:var(\n--spectrum-global-font-multiplier-75\n);--spectrum-alias-detail-text-font-weight:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-detail-text-font-weight-regular:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-detail-text-font-weight-light:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-detail-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-article-heading-text-font-weight:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-article-heading-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-article-heading-text-font-weight-quiet:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-article-heading-text-font-weight-quiet-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-article-body-text-font-weight:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-article-body-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-article-subheading-text-font-weight:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-article-subheading-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-article-detail-text-font-weight:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-article-detail-text-font-weight-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-code-text-font-family:var(\n--spectrum-global-font-family-code\n);--spectrum-alias-code-text-font-weight-regular:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-code-text-font-weight-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-code-text-line-height:var(\n--spectrum-global-font-line-height-medium\n);--spectrum-alias-code-margin-bottom:var(\n--spectrum-global-font-multiplier-0\n);--spectrum-alias-font-family-ar:var(--spectrum-global-font-font-family-ar);--spectrum-alias-font-family-he:var(--spectrum-global-font-font-family-he);--spectrum-alias-font-family-zh:var(--spectrum-global-font-font-family-zh);--spectrum-alias-font-family-zhhans:var(\n--spectrum-global-font-font-family-zhhans\n);--spectrum-alias-font-family-ko:var(--spectrum-global-font-font-family-ko);--spectrum-alias-font-family-ja:var(--spectrum-global-font-font-family-ja);--spectrum-alias-font-family-condensed:var(\n--spectrum-global-font-font-family-condensed\n);--spectrum-alias-button-text-line-height:var(\n--spectrum-global-font-line-height-small\n);--spectrum-alias-component-text-line-height:var(\n--spectrum-global-font-line-height-small\n);--spectrum-alias-han-component-text-line-height:var(\n--spectrum-global-font-line-height-medium\n);--spectrum-alias-serif-text-font-family:var(\n--spectrum-global-font-family-serif\n);--spectrum-alias-han-heading-text-line-height:var(\n--spectrum-global-font-line-height-medium\n);--spectrum-alias-han-heading-text-font-weight-regular:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-han-heading-text-font-weight-regular-emphasis:var(\n--spectrum-global-font-weight-extra-bold\n);--spectrum-alias-han-heading-text-font-weight-regular-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-han-heading-text-font-weight-quiet-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-han-heading-text-font-weight-light:var(\n--spectrum-global-font-weight-light\n);--spectrum-alias-han-heading-text-font-weight-light-emphasis:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-han-heading-text-font-weight-light-strong:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-han-heading-text-font-weight-heavy:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-han-heading-text-font-weight-heavy-emphasis:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-han-heading-text-font-weight-heavy-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-han-body-text-line-height:var(\n--spectrum-global-font-line-height-large\n);--spectrum-alias-han-body-text-font-weight-regular:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-han-body-text-font-weight-emphasis:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-han-body-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-han-subheading-text-font-weight-regular:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-han-subheading-text-font-weight-emphasis:var(\n--spectrum-global-font-weight-extra-bold\n);--spectrum-alias-han-subheading-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n);--spectrum-alias-han-detail-text-font-weight:var(\n--spectrum-global-font-weight-regular\n);--spectrum-alias-han-detail-text-font-weight-emphasis:var(\n--spectrum-global-font-weight-bold\n);--spectrum-alias-han-detail-text-font-weight-strong:var(\n--spectrum-global-font-weight-black\n)}:host,:root{--spectrum-alias-item-height-s:var(--spectrum-global-dimension-size-300);--spectrum-alias-item-height-m:var(--spectrum-global-dimension-size-400);--spectrum-alias-item-height-l:var(--spectrum-global-dimension-size-500);--spectrum-alias-item-height-xl:var(--spectrum-global-dimension-size-600);--spectrum-alias-item-rounded-border-radius-s:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-item-rounded-border-radius-m:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-item-rounded-border-radius-l:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-item-rounded-border-radius-xl:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-item-text-size-s:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-alias-item-text-size-m:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-item-text-size-l:var(\n--spectrum-global-dimension-font-size-200\n);--spectrum-alias-item-text-size-xl:var(\n--spectrum-global-dimension-font-size-300\n);--spectrum-alias-item-text-padding-top-s:var(\n--spectrum-global-dimension-static-size-50\n);--spectrum-alias-item-text-padding-top-m:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-item-text-padding-top-xl:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-item-text-padding-bottom-m:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-text-padding-bottom-l:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-item-text-padding-bottom-xl:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-item-icon-padding-top-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-item-icon-padding-top-m:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-icon-padding-top-l:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-icon-padding-top-xl:var(\n--spectrum-global-dimension-size-160\n);--spectrum-alias-item-icon-padding-bottom-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-item-icon-padding-bottom-m:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-icon-padding-bottom-l:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-icon-padding-bottom-xl:var(\n--spectrum-global-dimension-size-160\n);--spectrum-alias-item-padding-s:var(--spectrum-global-dimension-size-115);--spectrum-alias-item-padding-m:var(--spectrum-global-dimension-size-150);--spectrum-alias-item-padding-l:var(--spectrum-global-dimension-size-185);--spectrum-alias-item-padding-xl:var(--spectrum-global-dimension-size-225);--spectrum-alias-item-rounded-padding-s:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-item-rounded-padding-m:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-item-rounded-padding-l:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-item-rounded-padding-xl:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-item-icononly-padding-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-item-icononly-padding-m:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-icononly-padding-l:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-icononly-padding-xl:var(\n--spectrum-global-dimension-size-160\n);--spectrum-alias-item-control-gap-s:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-control-gap-m:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-control-gap-l:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-item-control-gap-xl:var(\n--spectrum-global-dimension-size-160\n);--spectrum-alias-item-workflow-icon-gap-s:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-workflow-icon-gap-m:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-item-workflow-icon-gap-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-workflow-icon-gap-xl:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-mark-gap-s:var(--spectrum-global-dimension-size-85);--spectrum-alias-item-mark-gap-m:var(--spectrum-global-dimension-size-100);--spectrum-alias-item-mark-gap-l:var(--spectrum-global-dimension-size-115);--spectrum-alias-item-mark-gap-xl:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-ui-icon-gap-s:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-ui-icon-gap-m:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-item-ui-icon-gap-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-ui-icon-gap-xl:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-clearbutton-gap-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-item-clearbutton-gap-m:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-clearbutton-gap-l:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-clearbutton-gap-xl:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-item-workflow-padding-left-s:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-workflow-padding-left-l:var(\n--spectrum-global-dimension-size-160\n);--spectrum-alias-item-workflow-padding-left-xl:var(\n--spectrum-global-dimension-size-185\n);--spectrum-alias-item-rounded-workflow-padding-left-s:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-rounded-workflow-padding-left-l:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-item-mark-padding-top-s:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-item-mark-padding-top-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-mark-padding-top-xl:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-item-mark-padding-bottom-s:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-item-mark-padding-bottom-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-mark-padding-bottom-xl:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-item-mark-padding-left-s:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-mark-padding-left-l:var(\n--spectrum-global-dimension-size-160\n);--spectrum-alias-item-mark-padding-left-xl:var(\n--spectrum-global-dimension-size-185\n);--spectrum-alias-item-control-1-size-s:var(\n--spectrum-global-dimension-static-size-100\n);--spectrum-alias-item-control-1-size-m:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-item-control-2-size-m:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-item-control-2-size-l:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-item-control-2-size-xl:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-item-control-2-size-xxl:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-item-control-2-border-radius-s:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-item-control-2-border-radius-m:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-control-2-border-radius-l:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-item-control-2-border-radius-xl:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-control-2-border-radius-xxl:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-item-control-2-padding-s:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-item-control-2-padding-m:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-control-2-padding-l:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-item-control-2-padding-xl:var(\n--spectrum-global-dimension-size-185\n);--spectrum-alias-item-control-3-height-m:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-item-control-3-height-l:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-item-control-3-height-xl:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-item-control-3-border-radius-s:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-item-control-3-border-radius-m:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-item-control-3-border-radius-l:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-item-control-3-border-radius-xl:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-control-3-padding-s:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-item-control-3-padding-m:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-item-control-3-padding-l:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-item-control-3-padding-xl:var(\n--spectrum-global-dimension-size-185\n);--spectrum-alias-item-mark-size-s:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-item-mark-size-l:var(\n--spectrum-global-dimension-size-275\n);--spectrum-alias-item-mark-size-xl:var(\n--spectrum-global-dimension-size-325\n);--spectrum-alias-heading-xxxl-text-size:var(\n--spectrum-global-dimension-font-size-1300\n);--spectrum-alias-heading-xxl-text-size:var(\n--spectrum-global-dimension-font-size-1100\n);--spectrum-alias-heading-xl-text-size:var(\n--spectrum-global-dimension-font-size-900\n);--spectrum-alias-heading-l-text-size:var(\n--spectrum-global-dimension-font-size-700\n);--spectrum-alias-heading-m-text-size:var(\n--spectrum-global-dimension-font-size-500\n);--spectrum-alias-heading-s-text-size:var(\n--spectrum-global-dimension-font-size-300\n);--spectrum-alias-heading-xs-text-size:var(\n--spectrum-global-dimension-font-size-200\n);--spectrum-alias-heading-xxs-text-size:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-heading-xxxl-margin-top:var(\n--spectrum-global-dimension-font-size-1200\n);--spectrum-alias-heading-xxl-margin-top:var(\n--spectrum-global-dimension-font-size-900\n);--spectrum-alias-heading-xl-margin-top:var(\n--spectrum-global-dimension-font-size-800\n);--spectrum-alias-heading-l-margin-top:var(\n--spectrum-global-dimension-font-size-600\n);--spectrum-alias-heading-m-margin-top:var(\n--spectrum-global-dimension-font-size-400\n);--spectrum-alias-heading-s-margin-top:var(\n--spectrum-global-dimension-font-size-200\n);--spectrum-alias-heading-xs-margin-top:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-heading-xxs-margin-top:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-alias-heading-han-xxxl-text-size:var(\n--spectrum-global-dimension-font-size-1300\n);--spectrum-alias-heading-han-xxl-text-size:var(\n--spectrum-global-dimension-font-size-900\n);--spectrum-alias-heading-han-xl-text-size:var(\n--spectrum-global-dimension-font-size-800\n);--spectrum-alias-heading-han-l-text-size:var(\n--spectrum-global-dimension-font-size-600\n);--spectrum-alias-heading-han-m-text-size:var(\n--spectrum-global-dimension-font-size-400\n);--spectrum-alias-heading-han-s-text-size:var(\n--spectrum-global-dimension-font-size-300\n);--spectrum-alias-heading-han-xs-text-size:var(\n--spectrum-global-dimension-font-size-200\n);--spectrum-alias-heading-han-xxs-text-size:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-heading-han-xxxl-margin-top:var(\n--spectrum-global-dimension-font-size-1200\n);--spectrum-alias-heading-han-xxl-margin-top:var(\n--spectrum-global-dimension-font-size-800\n);--spectrum-alias-heading-han-xl-margin-top:var(\n--spectrum-global-dimension-font-size-700\n);--spectrum-alias-heading-han-l-margin-top:var(\n--spectrum-global-dimension-font-size-500\n);--spectrum-alias-heading-han-m-margin-top:var(\n--spectrum-global-dimension-font-size-300\n);--spectrum-alias-heading-han-s-margin-top:var(\n--spectrum-global-dimension-font-size-200\n);--spectrum-alias-heading-han-xs-margin-top:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-heading-han-xxs-margin-top:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-alias-component-border-radius:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-component-border-radius-quiet:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-component-focusring-gap:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-component-focusring-gap-emphasized:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-component-focusring-size:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-component-focusring-size-emphasized:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-component-focusring-border-radius:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-input-focusring-gap:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-input-quiet-focusline-gap:var(\n--spectrum-global-dimension-static-size-50\n);--spectrum-alias-border-radius-xsmall:var(\n--spectrum-global-dimension-size-25\n);--spectrum-alias-border-radius-small:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-border-radius-regular:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-border-radius-medium:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-border-radius-large:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-border-radius-xlarge:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-control-two-size-s:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-control-two-size-m:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-control-two-size-l:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-control-two-size-xl:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-control-two-size-xxl:var(\n--spectrum-global-dimension-size-275\n);--spectrum-alias-control-two-border-radius-s:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-control-two-border-radius-m:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-control-two-border-radius-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-control-two-border-radius-xl:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-control-two-border-radius-xxl:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-control-three-height-s:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-control-three-height-m:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-control-three-height-l:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-control-three-height-xl:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-control-three-width-s:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-infieldbutton-icon-margin-y-s:var(\n--spectrum-global-dimension-size-10\n);--spectrum-alias-infieldbutton-icon-margin-y-m:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-infieldbutton-icon-margin-y-l:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-infieldbutton-icon-margin-y-xl:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-infieldbutton-padding-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-infieldbutton-padding-m:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-infieldbutton-padding-l:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-infieldbutton-padding-xl:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-infieldbutton-border-radius:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-infieldbutton-border-radius-sided:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-infieldbutton-border-size:var(\n--spectrum-global-dimension-static-size-0\n);--spectrum-alias-infieldbutton-fill-padding-s:var(\n--spectrum-global-dimension-size-10\n);--spectrum-alias-infieldbutton-fill-padding-m:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-infieldbutton-fill-padding-l:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-infieldbutton-fill-padding-xl:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-infieldbutton-full-height-s:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-infieldbutton-full-height-m:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-infieldbutton-full-height-l:var(\n--spectrum-global-dimension-size-400\n);--spectrum-alias-infieldbutton-full-height-xl:var(\n--spectrum-global-dimension-size-500\n);--spectrum-alias-infieldbutton-half-height-s:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-infieldbutton-half-height-m:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-infieldbutton-half-height-l:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-infieldbutton-half-height-xl:var(\n--spectrum-global-dimension-size-185\n);--spectrum-alias-stepperbutton-gap:var(\n--spectrum-global-dimension-size-25\n);--spectrum-alias-stepperbutton-width-s:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-stepperbutton-width-m:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-stepperbutton-width-l:var(\n--spectrum-global-dimension-size-275\n);--spectrum-alias-stepperbutton-width-xl:var(\n--spectrum-global-dimension-size-325\n);--spectrum-alias-stepperbutton-icon-x-offset-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-stepperbutton-icon-x-offset-m:var(\n--spectrum-global-dimension-size-65\n);--spectrum-alias-stepperbutton-icon-x-offset-l:var(\n--spectrum-global-dimension-size-65\n);--spectrum-alias-stepperbutton-icon-x-offset-xl:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-stepperbutton-icon-y-offset-top-s:0;--spectrum-alias-stepperbutton-icon-y-offset-top-m:var(\n--spectrum-global-dimension-size-10\n);--spectrum-alias-stepperbutton-icon-y-offset-top-l:var(\n--spectrum-global-dimension-size-10\n);--spectrum-alias-stepperbutton-icon-y-offset-top-xl:var(\n--spectrum-global-dimension-size-10\n);--spectrum-alias-stepperbutton-icon-y-offset-bottom-s:0;--spectrum-alias-stepperbutton-icon-y-offset-bottom-m:0;--spectrum-alias-stepperbutton-icon-y-offset-bottom-l:0;--spectrum-alias-stepperbutton-icon-y-offset-bottom-xl:0;--spectrum-alias-stepperbutton-radius-touching:var(\n--spectrum-global-dimension-size-25\n);--spectrum-alias-clearbutton-icon-margin-s:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-clearbutton-icon-margin-m:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-clearbutton-icon-margin-l:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-clearbutton-icon-margin-xl:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-clearbutton-border-radius:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-pickerbutton-icononly-padding-x-s:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-pickerbutton-icononly-padding-x-m:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-pickerbutton-icononly-padding-x-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-pickerbutton-icononly-padding-x-xl:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-pickerbutton-icon-margin-y-s:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-pickerbutton-icon-margin-y-m:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-pickerbutton-icon-margin-y-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-pickerbutton-icon-margin-y-xl:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-pickerbutton-label-padding-y-s:0;--spectrum-alias-pickerbutton-label-padding-y-m:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-pickerbutton-label-padding-y-l:var(\n--spectrum-global-dimension-size-65\n);--spectrum-alias-pickerbutton-label-padding-y-xl:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-pickerbutton-border-radius-rounded:var(\n--spectrum-global-dimension-size-150\n);--spectrum-alias-search-border-radius:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-combobox-quiet-button-offset-x:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-thumbnail-border-radius-small:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-focus-ring-gap-small:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-focus-ring-size-small:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-input-border-size:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-avatar-border-size:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-search-padding-left-s:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-search-padding-left-m:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-search-padding-left-l:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-search-padding-left-xl:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-tag-border-radius:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-tag-border-size-default:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-tag-border-size-disabled:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-tag-border-size-key-focus:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-tag-padding-right-s:var(\n--spectrum-global-dimension-size-125\n);--spectrum-alias-tag-padding-right-m:var(\n--spectrum-global-dimension-size-130\n);--spectrum-alias-tag-padding-right-l:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-tag-height-s:var(--spectrum-global-dimension-size-250);--spectrum-alias-tag-height-m:var(--spectrum-global-dimension-size-300);--spectrum-alias-tag-height-l:var(--spectrum-global-dimension-size-400);--spectrum-alias-tag-font-size-s:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-alias-tag-font-size-m:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-alias-tag-font-size-l:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-tag-text-padding-top-m:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-tag-text-padding-top-l:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-tag-icon-size-s:var(--spectrum-global-dimension-size-175);--spectrum-alias-tag-icon-size-m:var(--spectrum-global-dimension-size-200);--spectrum-alias-tag-icon-margin-top-s:var(\n--spectrum-global-dimension-size-40\n);--spectrum-alias-tag-icon-margin-top-m:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-tag-icon-margin-top-l:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-tag-clearbutton-width-s:var(\n--spectrum-global-dimension-size-175\n);--spectrum-alias-tag-clearbutton-width-m:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-tag-clearbutton-width-l:var(\n--spectrum-global-dimension-size-350\n);--spectrum-alias-tag-clearbutton-icon-margin-s:var(\n--spectrum-global-dimension-size-30\n);--spectrum-alias-tag-clearbutton-icon-margin-m:var(\n--spectrum-global-dimension-size-50\n);--spectrum-alias-tag-clearbutton-icon-margin-l:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-tag-focusring-border-radius:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-tag-focusring-gap:var(\n--spectrum-global-dimension-size-25\n);--spectrum-alias-search-border-radius-quiet:0;--spectrum-alias-percent-50:50%;--spectrum-alias-percent-70:70%;--spectrum-alias-percent-100:100%;--spectrum-alias-breakpoint-xsmall:304px;--spectrum-alias-breakpoint-small:768px;--spectrum-alias-breakpoint-medium:1280px;--spectrum-alias-breakpoint-large:1768px;--spectrum-alias-breakpoint-xlarge:2160px;--spectrum-alias-grid-columns:12;--spectrum-alias-grid-fluid-width:100%;--spectrum-alias-grid-fixed-max-width:1280px;--spectrum-alias-border-size-thin:var(\n--spectrum-global-dimension-static-size-10\n);--spectrum-alias-border-size-thick:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-border-size-thicker:var(\n--spectrum-global-dimension-static-size-50\n);--spectrum-alias-border-size-thickest:var(\n--spectrum-global-dimension-static-size-100\n);--spectrum-alias-border-offset-thin:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-border-offset-thick:var(\n--spectrum-global-dimension-static-size-50\n);--spectrum-alias-border-offset-thicker:var(\n--spectrum-global-dimension-static-size-100\n);--spectrum-alias-border-offset-thickest:var(\n--spectrum-global-dimension-static-size-200\n);--spectrum-alias-grid-baseline:var(\n--spectrum-global-dimension-static-size-100\n);--spectrum-alias-grid-gutter-xsmall:var(\n--spectrum-global-dimension-static-size-200\n);--spectrum-alias-grid-gutter-small:var(\n--spectrum-global-dimension-static-size-300\n);--spectrum-alias-grid-gutter-medium:var(\n--spectrum-global-dimension-static-size-400\n);--spectrum-alias-grid-gutter-large:var(\n--spectrum-global-dimension-static-size-500\n);--spectrum-alias-grid-gutter-xlarge:var(\n--spectrum-global-dimension-static-size-600\n);--spectrum-alias-grid-margin-xsmall:var(\n--spectrum-global-dimension-static-size-200\n);--spectrum-alias-grid-margin-small:var(\n--spectrum-global-dimension-static-size-300\n);--spectrum-alias-grid-margin-medium:var(\n--spectrum-global-dimension-static-size-400\n);--spectrum-alias-grid-margin-large:var(\n--spectrum-global-dimension-static-size-500\n);--spectrum-alias-grid-margin-xlarge:var(\n--spectrum-global-dimension-static-size-600\n);--spectrum-alias-grid-layout-region-margin-bottom-xsmall:var(\n--spectrum-global-dimension-static-size-200\n);--spectrum-alias-grid-layout-region-margin-bottom-small:var(\n--spectrum-global-dimension-static-size-300\n);--spectrum-alias-grid-layout-region-margin-bottom-medium:var(\n--spectrum-global-dimension-static-size-400\n);--spectrum-alias-grid-layout-region-margin-bottom-large:var(\n--spectrum-global-dimension-static-size-500\n);--spectrum-alias-grid-layout-region-margin-bottom-xlarge:var(\n--spectrum-global-dimension-static-size-600\n);--spectrum-alias-radial-reaction-size-default:var(\n--spectrum-global-dimension-static-size-550\n);--spectrum-alias-focus-ring-gap:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-focus-ring-size:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-dropshadow-blur:var(--spectrum-global-dimension-size-50);--spectrum-alias-dropshadow-offset-y:var(\n--spectrum-global-dimension-size-10\n);--spectrum-alias-font-size-default:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-layout-label-gap-size:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-pill-button-text-size:var(\n--spectrum-global-dimension-font-size-100\n);--spectrum-alias-pill-button-text-baseline:var(\n--spectrum-global-dimension-static-size-150\n);--spectrum-alias-single-line-height:var(\n--spectrum-global-dimension-size-400\n);--spectrum-alias-single-line-width:var(\n--spectrum-global-dimension-size-2400\n);--spectrum-alias-workflow-icon-size-s:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-workflow-icon-size-m:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-workflow-icon-size-xl:var(\n--spectrum-global-dimension-size-275\n);--spectrum-alias-ui-icon-alert-size-75:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-ui-icon-alert-size-100:var(\n--spectrum-global-dimension-size-225\n);--spectrum-alias-ui-icon-alert-size-200:var(\n--spectrum-global-dimension-size-250\n);--spectrum-alias-ui-icon-alert-size-300:var(\n--spectrum-global-dimension-size-275\n);--spectrum-alias-ui-icon-triplegripper-size-100-height:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-ui-icon-doublegripper-size-100-width:var(\n--spectrum-global-dimension-size-200\n);--spectrum-alias-ui-icon-singlegripper-size-100-width:var(\n--spectrum-global-dimension-size-300\n);--spectrum-alias-ui-icon-cornertriangle-size-75:var(\n--spectrum-global-dimension-size-65\n);--spectrum-alias-ui-icon-cornertriangle-size-200:var(\n--spectrum-global-dimension-size-75\n);--spectrum-alias-ui-icon-asterisk-size-75:var(\n--spectrum-global-dimension-static-size-100\n);--spectrum-alias-ui-icon-asterisk-size-100:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-avatar-size-50:var(--spectrum-global-dimension-size-200);--spectrum-alias-avatar-size-75:var(--spectrum-global-dimension-size-225);--spectrum-alias-avatar-size-200:var(--spectrum-global-dimension-size-275);--spectrum-alias-avatar-size-300:var(--spectrum-global-dimension-size-325);--spectrum-alias-avatar-size-500:var(--spectrum-global-dimension-size-400);--spectrum-alias-avatar-size-700:var(--spectrum-global-dimension-size-500);--spectrum-alias-tag-border-size:var(\n--spectrum-global-dimension-static-size-25\n);--spectrum-alias-tag-icon-margin-right-s:var(\n--spectrum-global-dimension-size-85\n);--spectrum-alias-tag-icon-margin-right-m:var(\n--spectrum-global-dimension-size-100\n);--spectrum-alias-tag-icon-margin-right-l:var(\n--spectrum-global-dimension-size-115\n);--spectrum-alias-tag-focusring-size:var(\n--spectrum-global-dimension-size-25\n);--spectrum-alias-tag-focusring-gap-selected:var(\n--spectrum-global-dimension-size-25\n)}:host,:root{--spectrum-alias-colorhandle-outer-border-color:rgba(0,0,0,.42);--spectrum-alias-component-text-color-selected-default:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-component-text-color-selected-hover:var(\n--spectrum-alias-component-text-color-selected-default\n);--spectrum-alias-component-text-color-selected-down:var(\n--spectrum-alias-component-text-color-selected-default\n);--spectrum-alias-component-text-color-selected-key-focus:var(\n--spectrum-alias-component-text-color-selected-default\n);--spectrum-alias-component-text-color-selected-mouse-focus:var(\n--spectrum-alias-component-text-color-selected-default\n);--spectrum-alias-component-icon-color-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-component-icon-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-component-background-color-default:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-component-background-color-hover:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-component-background-color-down:var(\n--spectrum-global-color-gray-400\n);--spectrum-alias-component-background-color-key-focus:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-component-background-color-quiet-hover:var(\n--spectrum-alias-component-background-color-hover\n);--spectrum-alias-component-background-color-quiet-down:var(\n--spectrum-alias-component-background-color-down\n);--spectrum-alias-component-background-color-quiet-key-focus:var(\n--spectrum-alias-component-background-color-key-focus\n);--spectrum-alias-component-background-color-selected-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-component-background-color-selected-hover:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-component-background-color-selected-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-component-background-color-selected-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-component-border-color-default:var(\n--spectrum-alias-component-background-color-default\n);--spectrum-alias-component-border-color-hover:var(\n--spectrum-alias-component-background-color-hover\n);--spectrum-alias-component-border-color-down:var(\n--spectrum-alias-component-background-color-down\n);--spectrum-alias-component-border-color-key-focus:var(\n--spectrum-alias-component-background-color-key-focus\n);--spectrum-alias-component-border-color-selected-default:var(\n--spectrum-alias-component-background-color-selected-default\n);--spectrum-alias-component-border-color-selected-hover:var(\n--spectrum-alias-component-background-color-selected-hover\n);--spectrum-alias-component-border-color-selected-down:var(\n--spectrum-alias-component-background-color-selected-down\n);--spectrum-alias-component-border-color-selected-key-focus:var(\n--spectrum-alias-component-background-color-selected-key-focus\n);--spectrum-alias-component-border-color-quiet-key-focus:var(\n--spectrum-alias-component-background-color-quiet-default\n);--spectrum-alias-component-border-color-quiet-selected-default:var(\n--spectrum-alias-component-background-color-selected-default\n);--spectrum-alias-component-border-color-quiet-selected-hover:var(\n--spectrum-alias-component-background-color-quiet-selected-hover\n);--spectrum-alias-component-border-color-quiet-selected-down:var(\n--spectrum-alias-component-background-color-quiet-selected-down\n);--spectrum-alias-component-border-color-quiet-selected-key-focus:var(\n--spectrum-alias-component-background-color-quiet-selected-key-focus\n);--spectrum-alias-toggle-background-color-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-toggle-background-color-hover:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-toggle-background-color-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-toggle-background-color-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-toggle-border-color-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-toggle-border-color-hover:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-toggle-border-color-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-toggle-border-color-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-toggle-icon-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-tag-border-color-default:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-tag-border-color-hover:var(\n--spectrum-global-color-gray-400\n);--spectrum-alias-tag-border-color-down:var(\n--spectrum-global-color-gray-500\n);--spectrum-alias-tag-border-color-key-focus:var(\n--spectrum-global-color-gray-400\n);--spectrum-alias-tag-border-color-disabled-default:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-tag-border-color-error-key-focus:var(\n--spectrum-semantic-negative-color-default\n);--spectrum-alias-tag-focusring-border-color-key-focus:var(\n--spectrum-alias-focus-ring-color\n);--spectrum-alias-tag-background-color-disabled:var(\n--spectrum-global-color-gray-100\n);--spectrum-alias-tag-background-color-default:var(\n--spectrum-global-color-gray-100\n);--spectrum-alias-tag-background-color-hover:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-tag-background-color-down:var(\n--spectrum-global-color-gray-400\n);--spectrum-alias-tag-background-color-key-focus:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-tag-background-color-error-default:var(\n--spectrum-alias-tag-background-color-default\n);--spectrum-alias-tag-background-color-error-hover:var(\n--spectrum-alias-tag-background-color-hover\n);--spectrum-alias-tag-background-color-error-down:var(\n--spectrum-alias-tag-background-color-down\n);--spectrum-alias-tag-background-color-error-key-focus:var(\n--spectrum-alias-tag-background-color-key-focus\n);--spectrum-alias-avatar-border-color-disabled:var(\n--spectrum-alias-background-color-transparent\n);--spectrum-alias-avatar-border-color-selected-default:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-avatar-border-color-selected-hover:var(\n--spectrum-alias-component-background-color-selected-hover\n);--spectrum-alias-avatar-border-color-selected-down:var(\n--spectrum-alias-component-background-color-selected-hover\n);--spectrum-alias-avatar-border-color-selected-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-link-primary-text-color-default:var(\n--spectrum-global-color-indigo-600\n);--spectrum-alias-link-primary-text-color-hover:var(\n--spectrum-global-color-indigo-600\n);--spectrum-alias-link-primary-text-color-down:var(\n--spectrum-global-color-indigo-700\n);--spectrum-alias-link-primary-text-color-key-focus:var(\n--spectrum-alias-text-color-key-focus\n);--spectrum-alias-link-secondary-text-color-default:var(\n--spectrum-alias-text-color\n);--spectrum-alias-link-secondary-text-color-hover:var(\n--spectrum-alias-link-primary-text-color-hover\n);--spectrum-alias-link-secondary-text-color-down:var(\n--spectrum-alias-link-primary-text-color-down\n);--spectrum-alias-link-secondary-text-color-key-focus:var(\n--spectrum-alias-link-primary-text-color-key-focus\n);--spectrum-alias-button-primary-background-color-default:var(\n--spectrum-alias-button-primary-border-color-default\n);--spectrum-alias-button-primary-text-color-default:var(\n--spectrum-alias-button-primary-text-color-hover\n);--spectrum-alias-button-primary-icon-color-default:var(\n--spectrum-alias-button-primary-text-color-default\n);--spectrum-alias-button-secondary-background-color-default:var(\n--spectrum-alias-button-secondary-border-color-default\n);--spectrum-alias-button-secondary-text-color-default:var(\n--spectrum-alias-button-secondary-text-color-hover\n);--spectrum-alias-button-secondary-icon-color-default:var(\n--spectrum-alias-button-secondary-text-color-default\n);--spectrum-alias-button-negative-background-color-default:var(\n--spectrum-alias-button-negative-border-color-default\n);--spectrum-alias-button-negative-text-color-default:var(\n--spectrum-alias-button-negative-text-color-hover\n);--spectrum-alias-button-negative-icon-color-default:var(\n--spectrum-alias-button-negative-text-color-default\n);--spectrum-alias-input-border-color-default:var(\n--spectrum-alias-border-color\n);--spectrum-alias-input-border-color-hover:var(\n--spectrum-alias-border-color-hover\n);--spectrum-alias-input-border-color-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-input-border-color-mouse-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-input-border-color-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-input-border-color-invalid-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-yellow-background-color-default:var(\n--spectrum-global-color-static-yellow-400\n);--spectrum-alias-yellow-background-color-hover:var(\n--spectrum-global-color-static-yellow-500\n);--spectrum-alias-yellow-background-color-key-focus:var(\n--spectrum-global-color-static-yellow-500\n);--spectrum-alias-yellow-background-color-down:var(\n--spectrum-global-color-static-yellow-600\n);--spectrum-alias-infieldbutton-background-color:transparent;--spectrum-alias-infieldbutton-fill-border-color-default:transparent;--spectrum-alias-infieldbutton-fill-border-color-hover:transparent;--spectrum-alias-infieldbutton-fill-border-color-down:transparent;--spectrum-alias-infieldbutton-fill-border-color-mouse-focus:transparent;--spectrum-alias-infieldbutton-fill-border-color-key-focus:transparent;--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down:var(\n--spectrum-global-color-gray-400\n);--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled:var(\n--spectrum-alias-component-background-color-disabled\n);--spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default\n);--spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover\n);--spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down\n);--spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus\n);--spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled:transparent;--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default:transparent;--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover\n);--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down\n);--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus:var(\n--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus\n);--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled:transparent;--spectrum-alias-actionbutton-staticBlack-border-color-default:transparent;--spectrum-alias-actionbutton-staticBlack-background-color-default:rgba(0,0,0,.1);--spectrum-alias-actionbutton-staticBlack-border-color-hover:transparent;--spectrum-alias-actionbutton-staticBlack-background-color-hover:rgba(0,0,0,.25);--spectrum-alias-actionbutton-staticBlack-border-color-down:transparent;--spectrum-alias-actionbutton-staticBlack-background-color-down:rgba(0,0,0,.4);--spectrum-alias-actionbutton-staticBlack-border-color-key-focus:transparent;--spectrum-alias-actionbutton-staticBlack-background-color-key-focus:rgba(0,0,0,.25);--spectrum-alias-actionbutton-staticBlack-border-color-disabled:transparent;--spectrum-alias-actionbutton-staticBlack-background-color-disabled:transparent;--spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected:transparent;--spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected:rgba(0,0,0,.1);--spectrum-alias-actionbutton-staticWhite-border-color-default:transparent;--spectrum-alias-actionbutton-staticWhite-background-color-default:hsla(0,0%,100%,.1);--spectrum-alias-actionbutton-staticWhite-border-color-hover:transparent;--spectrum-alias-actionbutton-staticWhite-background-color-hover:hsla(0,0%,100%,.25);--spectrum-alias-actionbutton-staticWhite-border-color-down:transparent;--spectrum-alias-actionbutton-staticWhite-background-color-down:hsla(0,0%,100%,.4);--spectrum-alias-actionbutton-staticWhite-border-color-key-focus:transparent;--spectrum-alias-actionbutton-staticWhite-background-color-key-focus:hsla(0,0%,100%,.25);--spectrum-alias-actionbutton-staticWhite-border-color-disabled:transparent;--spectrum-alias-actionbutton-staticWhite-background-color-disabled:transparent;--spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected:transparent;--spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected:hsla(0,0%,100%,.1);--spectrum-alias-thumbnail-darksquare-background-color:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-thumbnail-lightsquare-background-color:var(\n--spectrum-global-color-static-white\n);--spectrum-alias-tabs-divider-background-color-default:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-tabs-divider-background-color-quiet:var(\n--spectrum-alias-background-color-transparent\n);--spectrum-alias-tabitem-text-color-default:var(\n--spectrum-global-color-gray-700\n);--spectrum-alias-tabitem-text-color-hover:var(\n--spectrum-alias-text-color-hover\n);--spectrum-alias-tabitem-text-color-down:var(\n--spectrum-alias-text-color-down\n);--spectrum-alias-tabitem-text-color-key-focus:var(\n--spectrum-alias-text-color-hover\n);--spectrum-alias-tabitem-text-color-mouse-focus:var(\n--spectrum-alias-text-color-hover\n);--spectrum-alias-tabitem-text-color-selected-default:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-tabitem-text-color-selected-hover:var(\n--spectrum-alias-tabitem-text-color-selected-default\n);--spectrum-alias-tabitem-text-color-selected-down:var(\n--spectrum-alias-tabitem-text-color-selected-default\n);--spectrum-alias-tabitem-text-color-selected-key-focus:var(\n--spectrum-alias-tabitem-text-color-selected-default\n);--spectrum-alias-tabitem-text-color-selected-mouse-focus:var(\n--spectrum-alias-tabitem-text-color-selected-default\n);--spectrum-alias-tabitem-text-color-emphasized:var(\n--spectrum-alias-tabitem-text-color-default\n);--spectrum-alias-tabitem-text-color-emphasized-selected-default:var(\n--spectrum-global-color-indigo-600\n);--spectrum-alias-tabitem-text-color-emphasized-selected-hover:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-tabitem-text-color-emphasized-selected-down:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-tabitem-text-color-emphasized-selected-key-focus:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-tabitem-selection-indicator-color-default:var(\n--spectrum-alias-tabitem-text-color-default\n);--spectrum-alias-tabitem-selection-indicator-color-emphasized:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-tabitem-icon-color-disabled:var(\n--spectrum-alias-text-color-disabled\n);--spectrum-alias-tabitem-icon-color-default:var(\n--spectrum-alias-tabitem-text-color-default\n);--spectrum-alias-tabitem-icon-color-hover:var(\n--spectrum-alias-tabitem-text-color-hover\n);--spectrum-alias-tabitem-icon-color-down:var(\n--spectrum-alias-tabitem-text-color-down\n);--spectrum-alias-tabitem-icon-color-key-focus:var(\n--spectrum-alias-tabitem-text-color-hover\n);--spectrum-alias-tabitem-icon-color-mouse-focus:var(\n--spectrum-alias-tabitem-text-color-down\n);--spectrum-alias-tabitem-icon-color-selected:var(\n--spectrum-alias-tabitem-text-color-selected-default\n);--spectrum-alias-tabitem-icon-color-emphasized:var(\n--spectrum-alias-tabitem-text-color-default\n);--spectrum-alias-tabitem-icon-color-emphasized-selected:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-transparent-blue-background-color-hover:rgba(2,97,214,.15);--spectrum-alias-transparent-blue-background-color-down:rgba(0,85,185,.15);--spectrum-alias-transparent-blue-background-color-key-focus:var(\n--spectrum-alias-transparent-blue-background-color-hover\n);--spectrum-alias-transparent-blue-background-color-mouse-focus:var(\n--spectrum-alias-transparent-blue-background-color-hover\n);--spectrum-alias-transparent-blue-background-color:var(\n--spectrum-alias-component-text-color-default\n);--spectrum-alias-transparent-red-background-color-hover:rgba(206,15,11,.15);--spectrum-alias-transparent-red-background-color-down:rgba(182,0,0,.15);--spectrum-alias-transparent-red-background-color-key-focus:var(\n--spectrum-alias-transparent-red-background-color-hover\n);--spectrum-alias-transparent-red-background-color-mouse-focus:var(\n--spectrum-alias-transparent-red-background-color-hover\n);--spectrum-alias-transparent-red-background-color:var(\n--spectrum-alias-component-text-color-default\n);--spectrum-alias-component-text-color-disabled:var(\n--spectrum-global-color-gray-500\n);--spectrum-alias-component-text-color-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-component-text-color-hover:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-component-text-color-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-component-text-color-key-focus:var(\n--spectrum-alias-component-text-color-hover\n);--spectrum-alias-component-text-color-mouse-focus:var(\n--spectrum-alias-component-text-color-hover\n);--spectrum-alias-component-text-color:var(\n--spectrum-alias-component-text-color-default\n);--spectrum-alias-component-text-color-selected:var(\n--spectrum-alias-component-text-color-selected-default\n);--spectrum-alias-component-text-color-emphasized-selected-default:var(\n--spectrum-global-color-static-white\n);--spectrum-alias-component-text-color-emphasized-selected-hover:var(\n--spectrum-alias-component-text-color-emphasized-selected-default\n);--spectrum-alias-component-text-color-emphasized-selected-down:var(\n--spectrum-alias-component-text-color-emphasized-selected-default\n);--spectrum-alias-component-text-color-emphasized-selected-key-focus:var(\n--spectrum-alias-component-text-color-emphasized-selected-default\n);--spectrum-alias-component-text-color-emphasized-selected-mouse-focus:var(\n--spectrum-alias-component-text-color-emphasized-selected-default\n);--spectrum-alias-component-text-color-emphasized-selected:var(\n--spectrum-alias-component-text-color-emphasized-selected-default\n);--spectrum-alias-component-text-color-error-default:var(\n--spectrum-semantic-negative-text-color-small\n);--spectrum-alias-component-text-color-error-hover:var(\n--spectrum-semantic-negative-text-color-small-hover\n);--spectrum-alias-component-text-color-error-down:var(\n--spectrum-semantic-negative-text-color-small-down\n);--spectrum-alias-component-text-color-error-key-focus:var(\n--spectrum-semantic-negative-text-color-small-key-focus\n);--spectrum-alias-component-text-color-error-mouse-focus:var(\n--spectrum-semantic-negative-text-color-small-key-focus\n);--spectrum-alias-component-text-color-error:var(\n--spectrum-alias-component-text-color-error-default\n);--spectrum-alias-component-icon-color-disabled:var(\n--spectrum-alias-icon-color-disabled\n);--spectrum-alias-component-icon-color-hover:var(\n--spectrum-alias-icon-color-hover\n);--spectrum-alias-component-icon-color-down:var(\n--spectrum-alias-icon-color-down\n);--spectrum-alias-component-icon-color-key-focus:var(\n--spectrum-alias-icon-color-hover\n);--spectrum-alias-component-icon-color-mouse-focus:var(\n--spectrum-alias-icon-color-down\n);--spectrum-alias-component-icon-color:var(\n--spectrum-alias-component-icon-color-default\n);--spectrum-alias-component-icon-color-emphasized-selected-default:var(\n--spectrum-global-color-static-white\n);--spectrum-alias-component-icon-color-emphasized-selected-hover:var(\n--spectrum-alias-component-icon-color-emphasized-selected-default\n);--spectrum-alias-component-icon-color-emphasized-selected-down:var(\n--spectrum-alias-component-icon-color-emphasized-selected-default\n);--spectrum-alias-component-icon-color-emphasized-selected-key-focus:var(\n--spectrum-alias-component-icon-color-emphasized-selected-default\n);--spectrum-alias-component-icon-color-emphasized-selected:var(\n--spectrum-alias-component-icon-color-emphasized-selected-default\n);--spectrum-alias-component-background-color-disabled:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-component-background-color-quiet-disabled:var(\n--spectrum-alias-background-color-transparent\n);--spectrum-alias-component-background-color-quiet-selected-disabled:var(\n--spectrum-alias-component-background-color-disabled\n);--spectrum-alias-component-background-color:var(\n--spectrum-alias-component-background-color-default\n);--spectrum-alias-component-background-color-selected:var(\n--spectrum-alias-component-background-color-selected-default\n);--spectrum-alias-component-background-color-quiet-default:var(\n--spectrum-alias-background-color-transparent\n);--spectrum-alias-component-background-color-quiet:var(\n--spectrum-alias-component-background-color-quiet-default\n);--spectrum-alias-component-background-color-quiet-selected-default:var(\n--spectrum-alias-component-background-color-selected-default\n);--spectrum-alias-component-background-color-quiet-selected-hover:var(\n--spectrum-alias-component-background-color-selected-hover\n);--spectrum-alias-component-background-color-quiet-selected-down:var(\n--spectrum-alias-component-background-color-selected-down\n);--spectrum-alias-component-background-color-quiet-selected-key-focus:var(\n--spectrum-alias-component-background-color-selected-key-focus\n);--spectrum-alias-component-background-color-quiet-selected:var(\n--spectrum-alias-component-background-color-selected-default\n);--spectrum-alias-component-background-color-emphasized-selected-default:var(\n--spectrum-semantic-cta-background-color-default\n);--spectrum-alias-component-background-color-emphasized-selected-hover:var(\n--spectrum-semantic-cta-background-color-hover\n);--spectrum-alias-component-background-color-emphasized-selected-down:var(\n--spectrum-semantic-cta-background-color-down\n);--spectrum-alias-component-background-color-emphasized-selected-key-focus:var(\n--spectrum-semantic-cta-background-color-key-focus\n);--spectrum-alias-component-background-color-emphasized-selected:var(\n--spectrum-alias-component-background-color-emphasized-selected-default\n);--spectrum-alias-component-border-color-disabled:var(\n--spectrum-alias-border-color-disabled\n);--spectrum-alias-component-border-color-quiet-disabled:var(\n--spectrum-alias-border-color-transparent\n);--spectrum-alias-component-border-color:var(\n--spectrum-alias-component-border-color-default\n);--spectrum-alias-component-border-color-selected:var(\n--spectrum-alias-component-border-color-selected-default\n);--spectrum-alias-component-border-color-quiet-default:var(\n--spectrum-alias-border-color-transparent\n);--spectrum-alias-component-border-color-quiet-hover:var(\n--spectrum-alias-border-color-transparent\n);--spectrum-alias-component-border-color-quiet-down:var(\n--spectrum-alias-border-color-transparent\n);--spectrum-alias-component-border-color-quiet:var(\n--spectrum-alias-component-border-color-quiet-default\n);--spectrum-alias-component-border-color-quiet-selected:var(\n--spectrum-alias-component-background-color-selected-default\n);--spectrum-alias-component-border-color-emphasized-selected-default:var(\n--spectrum-semantic-cta-background-color-default\n);--spectrum-alias-component-border-color-emphasized-selected-hover:var(\n--spectrum-semantic-cta-background-color-hover\n);--spectrum-alias-component-border-color-emphasized-selected-down:var(\n--spectrum-semantic-cta-background-color-down\n);--spectrum-alias-component-border-color-emphasized-selected-key-focus:var(\n--spectrum-semantic-cta-background-color-key-focus\n);--spectrum-alias-component-border-color-emphasized-selected:var(\n--spectrum-alias-component-border-color-emphasized-selected-default\n);--spectrum-alias-tag-border-color-error-default:var(\n--spectrum-semantic-negative-color-default\n);--spectrum-alias-tag-border-color-error-hover:var(\n--spectrum-semantic-negative-color-hover\n);--spectrum-alias-tag-border-color-error-down:var(\n--spectrum-semantic-negative-color-hover\n);--spectrum-alias-tag-border-color-error-selected:var(\n--spectrum-semantic-negative-color-default\n);--spectrum-alias-tag-border-color-selected:var(\n--spectrum-alias-tag-background-color-selected-default\n);--spectrum-alias-tag-border-color:var(\n--spectrum-alias-tag-border-color-default\n);--spectrum-alias-tag-border-color-disabled:var(\n--spectrum-alias-border-color-disabled\n);--spectrum-alias-tag-border-color-error:var(\n--spectrum-alias-tag-border-color-error-default\n);--spectrum-alias-tag-text-color-default:var(\n--spectrum-alias-label-text-color\n);--spectrum-alias-tag-text-color-hover:var(\n--spectrum-alias-text-color-hover\n);--spectrum-alias-tag-text-color-down:var(--spectrum-alias-text-color-down);--spectrum-alias-tag-text-color-key-focus:var(\n--spectrum-alias-text-color-hover\n);--spectrum-alias-tag-text-color-disabled:var(\n--spectrum-global-color-gray-500\n);--spectrum-alias-tag-text-color:var(\n--spectrum-alias-tag-text-color-default\n);--spectrum-alias-tag-text-color-error-default:var(\n--spectrum-global-color-red-600\n);--spectrum-alias-tag-text-color-error-hover:var(\n--spectrum-global-color-red-700\n);--spectrum-alias-tag-text-color-error-down:var(\n--spectrum-global-color-red-700\n);--spectrum-alias-tag-text-color-error-key-focus:var(\n--spectrum-global-color-red-700\n);--spectrum-alias-tag-text-color-error:var(\n--spectrum-alias-tag-text-color-error-default\n);--spectrum-alias-tag-text-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-tag-icon-color-default:var(--spectrum-alias-icon-color);--spectrum-alias-tag-icon-color-hover:var(\n--spectrum-alias-icon-color-hover\n);--spectrum-alias-tag-icon-color-down:var(--spectrum-alias-icon-color-down);--spectrum-alias-tag-icon-color-key-focus:var(\n--spectrum-alias-icon-color-hover\n);--spectrum-alias-tag-icon-color-disabled:var(\n--spectrum-alias-icon-color-disabled\n);--spectrum-alias-tag-icon-color:var(\n--spectrum-alias-tag-icon-color-default\n);--spectrum-alias-tag-icon-color-error:var(--spectrum-global-color-red-600);--spectrum-alias-tag-icon-color-selected:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-tag-background-color:var(\n--spectrum-alias-tag-background-color-default\n);--spectrum-alias-tag-background-color-error:var(\n--spectrum-alias-tag-background-color-error-default\n);--spectrum-alias-tag-background-color-error-selected-default:var(\n--spectrum-semantic-negative-color-default\n);--spectrum-alias-tag-background-color-error-selected-hover:var(\n--spectrum-semantic-negative-color-hover\n);--spectrum-alias-tag-background-color-error-selected-down:var(\n--spectrum-semantic-negative-color-hover\n);--spectrum-alias-tag-background-color-error-selected-key-focus:var(\n--spectrum-global-color-red-600\n);--spectrum-alias-tag-background-color-error-selected:var(\n--spectrum-alias-tag-background-color-error-selected-default\n);--spectrum-alias-tag-background-color-selected-default:var(\n--spectrum-global-color-gray-700\n);--spectrum-alias-tag-background-color-selected-hover:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-tag-background-color-selected-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-tag-background-color-selected-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-tag-background-color-selected:var(\n--spectrum-alias-tag-background-color-selected-default\n);--spectrum-alias-tag-focusring-border-color-default:transparent;--spectrum-alias-tag-focusring-border-color-disabled:transparent;--spectrum-alias-tag-focusring-border-color-selected-key-focus:var(\n--spectrum-alias-focus-ring-color\n);--spectrum-alias-tag-focusring-border-color:var(\n--spectrum-alias-tag-focusring-border-color-default\n);--spectrum-alias-avatar-border-color:var(\n--spectrum-alias-avatar-border-color-default\n);--spectrum-alias-avatar-border-color-selected:var(\n--spectrum-alias-avatar-border-color-selected-default\n);--spectrum-alias-toggle-background-color:var(\n--spectrum-alias-toggle-background-color-default\n);--spectrum-alias-toggle-background-color-emphasized-selected-default:var(\n--spectrum-semantic-cta-background-color-default\n);--spectrum-alias-toggle-background-color-emphasized-selected-hover:var(\n--spectrum-semantic-cta-background-color-hover\n);--spectrum-alias-toggle-background-color-emphasized-selected-down:var(\n--spectrum-semantic-cta-background-color-down\n);--spectrum-alias-toggle-background-color-emphasized-selected-key-focus:var(\n--spectrum-semantic-cta-background-color-key-focus\n);--spectrum-alias-toggle-background-color-emphasized-selected:var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n);--spectrum-alias-toggle-border-color:var(\n--spectrum-alias-toggle-border-color-default\n);--spectrum-alias-toggle-icon-color-emphasized-selected:var(\n--spectrum-alias-component-icon-color-emphasized-selected-default\n);--spectrum-alias-button-primary-background-color-hover:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-button-primary-background-color-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-button-primary-background-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-button-primary-background-color:var(\n--spectrum-alias-button-primary-background-color-default\n);--spectrum-alias-button-primary-border-color-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-button-primary-border-color-hover:var(\n--spectrum-alias-button-primary-background-color-hover\n);--spectrum-alias-button-primary-border-color-down:var(\n--spectrum-alias-button-primary-background-color-down\n);--spectrum-alias-button-primary-border-color-key-focus:var(\n--spectrum-alias-button-primary-background-color-key-focus\n);--spectrum-alias-button-primary-border-color:var(\n--spectrum-alias-button-primary-border-color-default\n);--spectrum-alias-button-primary-text-color-hover:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-primary-text-color-down:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-primary-text-color-key-focus:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-primary-text-color:var(\n--spectrum-alias-button-primary-text-color-default\n);--spectrum-alias-button-primary-icon-color-hover:var(\n--spectrum-alias-button-primary-text-color-hover\n);--spectrum-alias-button-primary-icon-color-down:var(\n--spectrum-alias-button-primary-text-color-down\n);--spectrum-alias-button-primary-icon-color-key-focus:var(\n--spectrum-alias-button-primary-text-color-key-focus\n);--spectrum-alias-button-primary-icon-color:var(\n--spectrum-alias-button-primary-icon-color-default\n);--spectrum-alias-button-secondary-background-color-hover:var(\n--spectrum-global-color-gray-700\n);--spectrum-alias-button-secondary-background-color-down:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-button-secondary-background-color-key-focus:var(\n--spectrum-global-color-gray-700\n);--spectrum-alias-button-secondary-background-color:var(\n--spectrum-alias-button-secondary-background-color-default\n);--spectrum-alias-button-secondary-border-color-default:var(\n--spectrum-global-color-gray-700\n);--spectrum-alias-button-secondary-border-color-hover:var(\n--spectrum-alias-button-secondary-background-color-hover\n);--spectrum-alias-button-secondary-border-color-down:var(\n--spectrum-alias-button-secondary-background-color-down\n);--spectrum-alias-button-secondary-border-color-key-focus:var(\n--spectrum-alias-button-secondary-background-color-key-focus\n);--spectrum-alias-button-secondary-border-color:var(\n--spectrum-alias-button-secondary-border-color-default\n);--spectrum-alias-button-secondary-text-color-hover:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-secondary-text-color-down:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-secondary-text-color-key-focus:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-secondary-text-color:var(\n--spectrum-alias-button-secondary-text-color-default\n);--spectrum-alias-button-secondary-icon-color-hover:var(\n--spectrum-alias-button-secondary-text-color-hover\n);--spectrum-alias-button-secondary-icon-color-down:var(\n--spectrum-alias-button-secondary-text-color-down\n);--spectrum-alias-button-secondary-icon-color-key-focus:var(\n--spectrum-alias-button-secondary-text-color-key-focus\n);--spectrum-alias-button-secondary-icon-color:var(\n--spectrum-alias-button-secondary-icon-color-default\n);--spectrum-alias-button-negative-background-color-hover:var(\n--spectrum-semantic-negative-text-color-small\n);--spectrum-alias-button-negative-background-color-down:var(\n--spectrum-global-color-red-700\n);--spectrum-alias-button-negative-background-color-key-focus:var(\n--spectrum-semantic-negative-text-color-small\n);--spectrum-alias-button-negative-background-color:var(\n--spectrum-alias-button-negative-background-color-default\n);--spectrum-alias-button-negative-border-color-default:var(\n--spectrum-semantic-negative-text-color-small\n);--spectrum-alias-button-negative-border-color-hover:var(\n--spectrum-semantic-negative-text-color-small\n);--spectrum-alias-button-negative-border-color-down:var(\n--spectrum-global-color-red-700\n);--spectrum-alias-button-negative-border-color-key-focus:var(\n--spectrum-semantic-negative-text-color-small\n);--spectrum-alias-button-negative-border-color:var(\n--spectrum-alias-button-negative-border-color-default\n);--spectrum-alias-button-negative-text-color-hover:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-negative-text-color-down:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-negative-text-color-key-focus:var(\n--spectrum-global-color-gray-50\n);--spectrum-alias-button-negative-text-color:var(\n--spectrum-alias-button-negative-text-color-default\n);--spectrum-alias-button-negative-icon-color-hover:var(\n--spectrum-alias-button-negative-text-color-hover\n);--spectrum-alias-button-negative-icon-color-down:var(\n--spectrum-alias-button-negative-text-color-down\n);--spectrum-alias-button-negative-icon-color-key-focus:var(\n--spectrum-alias-button-negative-text-color-key-focus\n);--spectrum-alias-button-negative-icon-color:var(\n--spectrum-alias-button-negative-icon-color-default\n);--spectrum-alias-input-border-color-disabled:var(\n--spectrum-alias-border-color-transparent\n);--spectrum-alias-input-border-color-quiet-disabled:var(\n--spectrum-alias-border-color-mid\n);--spectrum-alias-input-border-color:var(\n--spectrum-alias-input-border-color-default\n);--spectrum-alias-input-border-color-invalid-default:var(\n--spectrum-semantic-negative-color-default\n);--spectrum-alias-input-border-color-invalid-hover:var(\n--spectrum-semantic-negative-color-hover\n);--spectrum-alias-input-border-color-invalid-down:var(\n--spectrum-semantic-negative-color-down\n);--spectrum-alias-input-border-color-invalid-mouse-focus:var(\n--spectrum-semantic-negative-color-hover\n);--spectrum-alias-input-border-color-invalid:var(\n--spectrum-alias-input-border-color-invalid-default\n);--spectrum-alias-background-color-yellow-default:var(\n--spectrum-global-color-static-yellow-600\n);--spectrum-alias-background-color-yellow-hover:var(\n--spectrum-global-color-static-yellow-700\n);--spectrum-alias-background-color-yellow-key-focus:var(\n--spectrum-global-color-static-yellow-700\n);--spectrum-alias-background-color-yellow-down:var(\n--spectrum-global-color-static-yellow-800\n);--spectrum-alias-background-color-yellow:var(\n--spectrum-alias-background-color-yellow-default\n);--spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled:transparent;--spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled:transparent;--spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled:var(\n--spectrum-alias-component-background-color-disabled\n);--spectrum-alias-tabitem-text-color:var(\n--spectrum-alias-tabitem-text-color-default\n);--spectrum-alias-tabitem-text-color-selected:var(\n--spectrum-alias-tabitem-text-color-selected-default\n);--spectrum-alias-tabitem-text-color-emphasized-selected:var(\n--spectrum-alias-tabitem-text-color-emphasized-selected-default\n);--spectrum-alias-tabitem-icon-color:var(\n--spectrum-alias-tabitem-text-color-default\n);--spectrum-alias-background-color-default:var(\n--spectrum-global-color-gray-100\n);--spectrum-alias-background-color-disabled:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-background-color-transparent:transparent;--spectrum-alias-background-color-overbackground-down:hsla(0,0%,100%,.2);--spectrum-alias-background-color-quiet-overbackground-hover:hsla(0,0%,100%,.1);--spectrum-alias-background-color-quiet-overbackground-down:hsla(0,0%,100%,.2);--spectrum-alias-background-color-overbackground-disabled:hsla(0,0%,100%,.1);--spectrum-alias-background-color-quickactions-overlay:rgba(0,0,0,.2);--spectrum-alias-placeholder-text-color:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-placeholder-text-color-hover:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-placeholder-text-color-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-placeholder-text-color-selected:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-label-text-color:var(--spectrum-global-color-gray-700);--spectrum-alias-text-color:var(--spectrum-global-color-gray-800);--spectrum-alias-text-color-hover:var(--spectrum-global-color-gray-900);--spectrum-alias-text-color-down:var(--spectrum-global-color-gray-900);--spectrum-alias-text-color-key-focus:var(\n--spectrum-global-color-blue-600\n);--spectrum-alias-text-color-mouse-focus:var(\n--spectrum-global-color-blue-600\n);--spectrum-alias-text-color-disabled:var(--spectrum-global-color-gray-500);--spectrum-alias-text-color-invalid:var(--spectrum-global-color-red-500);--spectrum-alias-text-color-selected:var(--spectrum-global-color-blue-600);--spectrum-alias-text-color-selected-neutral:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-text-color-overbackground:var(\n--spectrum-global-color-static-white\n);--spectrum-alias-text-color-overbackground-disabled:hsla(0,0%,100%,.2);--spectrum-alias-text-color-quiet-overbackground-disabled:hsla(0,0%,100%,.2);--spectrum-alias-heading-text-color:var(--spectrum-global-color-gray-900);--spectrum-alias-link-primary-text-color:var(\n--spectrum-alias-link-primary-text-color-default\n);--spectrum-alias-link-secondary-text-color:var(\n--spectrum-alias-link-secondary-text-color-default\n);--spectrum-alias-border-color:var(--spectrum-global-color-gray-400);--spectrum-alias-border-color-hover:var(--spectrum-global-color-gray-500);--spectrum-alias-border-color-down:var(--spectrum-global-color-gray-500);--spectrum-alias-border-color-key-focus:var(\n--spectrum-global-color-blue-400\n);--spectrum-alias-border-color-mouse-focus:var(\n--spectrum-global-color-blue-500\n);--spectrum-alias-border-color-disabled:var(\n--spectrum-global-color-gray-200\n);--spectrum-alias-border-color-extralight:var(\n--spectrum-global-color-gray-100\n);--spectrum-alias-border-color-light:var(--spectrum-global-color-gray-200);--spectrum-alias-border-color-mid:var(--spectrum-global-color-gray-300);--spectrum-alias-border-color-dark:var(--spectrum-global-color-gray-400);--spectrum-alias-border-color-darker-default:var(\n--spectrum-global-color-gray-600\n);--spectrum-alias-border-color-darker-hover:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-border-color-darker-down:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-border-color-transparent:transparent;--spectrum-alias-border-color-translucent-dark:rgba(0,0,0,.05);--spectrum-alias-border-color-translucent-darker:rgba(0,0,0,.1);--spectrum-alias-focus-color:var(--spectrum-global-color-blue-400);--spectrum-alias-focus-ring-color:var(--spectrum-alias-focus-color);--spectrum-alias-track-color-default:var(--spectrum-global-color-gray-400);--spectrum-alias-track-fill-color-overbackground:var(\n--spectrum-global-color-static-white\n);--spectrum-alias-track-color-disabled:var(\n--spectrum-global-color-gray-300\n);--spectrum-alias-track-color-overbackground:hsla(0,0%,100%,.2);--spectrum-alias-icon-color:var(--spectrum-global-color-gray-700);--spectrum-alias-icon-color-overbackground:var(\n--spectrum-global-color-static-white\n);--spectrum-alias-icon-color-hover:var(--spectrum-global-color-gray-900);--spectrum-alias-icon-color-down:var(--spectrum-global-color-gray-900);--spectrum-alias-icon-color-key-focus:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-icon-color-disabled:var(--spectrum-global-color-gray-400);--spectrum-alias-icon-color-overbackground-disabled:hsla(0,0%,100%,.2);--spectrum-alias-icon-color-quiet-overbackground-disabled:hsla(0,0%,100%,.15);--spectrum-alias-icon-color-selected-neutral:var(\n--spectrum-global-color-gray-900\n);--spectrum-alias-icon-color-selected-neutral-subdued:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-icon-color-selected:var(--spectrum-global-color-blue-500);--spectrum-alias-icon-color-selected-hover:var(\n--spectrum-global-color-blue-600\n);--spectrum-alias-icon-color-selected-down:var(\n--spectrum-global-color-blue-700\n);--spectrum-alias-icon-color-selected-focus:var(\n--spectrum-global-color-blue-600\n);--spectrum-alias-image-opacity-disabled:var(\n--spectrum-global-color-opacity-30\n);--spectrum-alias-toolbar-background-color:var(\n--spectrum-global-color-gray-100\n);--spectrum-alias-code-highlight-color-default:var(\n--spectrum-global-color-gray-800\n);--spectrum-alias-code-highlight-background-color:var(\n--spectrum-global-color-gray-75\n);--spectrum-alias-code-highlight-color-keyword:var(\n--spectrum-global-color-fuchsia-600\n);--spectrum-alias-code-highlight-color-section:var(\n--spectrum-global-color-red-600\n);--spectrum-alias-code-highlight-color-literal:var(\n--spectrum-global-color-blue-600\n);--spectrum-alias-code-highlight-color-attribute:var(\n--spectrum-global-color-seafoam-600\n);--spectrum-alias-code-highlight-color-class:var(\n--spectrum-global-color-magenta-600\n);--spectrum-alias-code-highlight-color-variable:var(\n--spectrum-global-color-purple-600\n);--spectrum-alias-code-highlight-color-title:var(\n--spectrum-global-color-indigo-600\n);--spectrum-alias-code-highlight-color-string:var(\n--spectrum-global-color-fuchsia-600\n);--spectrum-alias-code-highlight-color-function:var(\n--spectrum-global-color-blue-600\n);--spectrum-alias-code-highlight-color-comment:var(\n--spectrum-global-color-gray-700\n);--spectrum-alias-categorical-color-1:var(\n--spectrum-global-color-static-seafoam-200\n);--spectrum-alias-categorical-color-2:var(\n--spectrum-global-color-static-indigo-700\n);--spectrum-alias-categorical-color-3:var(\n--spectrum-global-color-static-orange-500\n);--spectrum-alias-categorical-color-4:var(\n--spectrum-global-color-static-magenta-500\n);--spectrum-alias-categorical-color-5:var(\n--spectrum-global-color-static-indigo-200\n);--spectrum-alias-categorical-color-6:var(\n--spectrum-global-color-static-celery-200\n);--spectrum-alias-categorical-color-7:var(\n--spectrum-global-color-static-blue-500\n);--spectrum-alias-categorical-color-8:var(\n--spectrum-global-color-static-purple-800\n);--spectrum-alias-categorical-color-9:var(\n--spectrum-global-color-static-yellow-500\n);--spectrum-alias-categorical-color-10:var(\n--spectrum-global-color-static-orange-700\n);--spectrum-alias-categorical-color-11:var(\n--spectrum-global-color-static-green-600\n);--spectrum-alias-categorical-color-12:var(\n--spectrum-global-color-static-chartreuse-300\n);--spectrum-alias-categorical-color-13:var(\n--spectrum-global-color-static-blue-200\n);--spectrum-alias-categorical-color-14:var(\n--spectrum-global-color-static-fuchsia-500\n);--spectrum-alias-categorical-color-15:var(\n--spectrum-global-color-static-magenta-200\n);--spectrum-alias-categorical-color-16:var(\n--spectrum-global-color-static-yellow-200\n)}:host,:root{font-family:var(--spectrum-alias-body-text-font-family);font-size:var(--spectrum-alias-font-size-default)}:host:lang(ar),:root:lang(ar){font-family:var(--spectrum-alias-font-family-ar)}:host:lang(he),:root:lang(he){font-family:var(--spectrum-alias-font-family-he)}:host:lang(zh-Hans),:root:lang(zh-Hans){font-family:var(--spectrum-alias-font-family-zhhans)}:host:lang(zh-Hant),:root:lang(zh-Hant){font-family:var(--spectrum-alias-font-family-zh)}:host:lang(zh),:root:lang(zh){font-family:var(--spectrum-alias-font-family-zh)}:host:lang(ko),:root:lang(ko){font-family:var(--spectrum-alias-font-family-ko)}:host:lang(ja),:root:lang(ja){font-family:var(--spectrum-alias-font-family-ja)}:host{display:block}#scale,#theme{height:100%;width:100%}\n`;\nexport default styles;"]}
package/src/express/themes.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import './core.js';
2
- import '../../express/theme-light.js';
3
- import '../../express/theme-dark.js';
4
- import '../../express/scale-medium.js';
5
- import '../../express/scale-large.js';
package/src/express/themes.js DELETED
@@ -1,17 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import './core.js';
13
- import '../../express/theme-light.js';
14
- import '../../express/theme-dark.js';
15
- import '../../express/scale-medium.js';
16
- import '../../express/scale-large.js';
17
- //# sourceMappingURL=themes.js.map
package/src/express/themes.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"themes.js","sourceRoot":"","sources":["themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,WAAW,CAAC;AACnB,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC","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 './core.js';\nimport '../../express/theme-light.js';\nimport '../../express/theme-dark.js';\nimport '../../express/scale-medium.js';\nimport '../../express/scale-large.js';\n"]}
package/stories/theme.stories.js DELETED
@@ -1,236 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '../sp-theme.js';
13
- import '../src/themes.js';
14
- import '@spectrum-web-components/button/sp-button.js';
15
- import '@spectrum-web-components/button-group/sp-button-group.js';
16
- import '@spectrum-web-components/switch/sp-switch.js';
17
- import '@spectrum-web-components/slider/sp-slider.js';
18
- import { html } from '@spectrum-web-components/base';
19
- export default {
20
- component: 'sp-theme',
21
- title: 'Theme',
22
- argTypes: {
23
- colorStop: {
24
- control: {
25
- type: 'inline-radio',
26
- options: ['light', 'dark'],
27
- },
28
- },
29
- },
30
- args: {
31
- colorStop: 'light',
32
- },
33
- };
34
- const storyStyles = html `
35
- <style type="text/css">
36
- #outer,
37
- #example {
38
- width: 500px;
39
- padding: 3em;
40
- background-color: var(--spectrum-global-color-gray-100);
41
- color: var(--spectrum-global-color-gray-800);
42
- }
43
-
44
- #inner {
45
- margin-top: 2em;
46
- padding: 2em;
47
- background-color: var(--spectrum-global-color-gray-100);
48
- color: var(--spectrum-global-color-gray-800);
49
- }
50
-
51
- #buttons {
52
- margin-top: 2em;
53
- }
54
- </style>
55
- `;
56
- export const Default = ({ colorStop: color, }) => {
57
- return html `
58
- ${storyStyles}
59
- <sp-theme color="${color}">
60
- <div id="example">
61
- <div>
62
- <sp-slider
63
- value="5"
64
- step="1"
65
- min="1"
66
- max="11"
67
- label="Volume"
68
- id="volume-slider"
69
- ></sp-slider>
70
- </div>
71
- <div><sp-switch>Overdrive</sp-switch></div>
72
- <sp-button-group id="buttons">
73
- <sp-button variant="primary" treatment="outline">
74
- Cancel
75
- </sp-button>
76
- <sp-button variant="accent">Continue</sp-button>
77
- </sp-button-group>
78
- </div>
79
- </sp-theme>
80
- `;
81
- };
82
- export const displayFlex = () => html `
83
- <style type="text/css">
84
- #flex-theme {
85
- display: flex;
86
- flex-direction: row;
87
- }
88
- #flex-theme sp-button {
89
- flex: 0 0;
90
- }
91
- #flex-theme #middle-button {
92
- flex: 1 0;
93
- }
94
- </style>
95
- <sp-theme id="flex-theme" color="dark">
96
- <sp-button>Start</sp-button>
97
- <sp-button id="middle-button">Middle</sp-button>
98
- <sp-button>End</sp-button>
99
- </sp-theme>
100
- `;
101
- export const none = () => html `
102
- ${storyStyles}
103
- <div id="example">
104
- <div>
105
- <sp-slider
106
- value="5"
107
- step="1"
108
- min="1"
109
- max="11"
110
- label="Volume"
111
- id="volume-slider"
112
- ></sp-slider>
113
- </div>
114
- <div><sp-switch>Overdrive</sp-switch></div>
115
- <sp-button-group id="buttons">
116
- <sp-button variant="primary" treatment="outline">Cancel</sp-button>
117
- <sp-button variant="accent">Continue</sp-button>
118
- </sp-button-group>
119
- </div>
120
- <sp-theme></sp-theme>
121
- `;
122
- export const nestedTheme = ({ colorStop: outer, }) => {
123
- const inner = outer === 'light' ? 'dark' : 'light';
124
- return html `
125
- ${storyStyles}
126
- <sp-theme color="${outer}">
127
- <div id="outer">
128
- <div>
129
- <sp-slider
130
- value="5"
131
- step="1"
132
- min="1"
133
- max="11"
134
- label="Volume"
135
- id="volume-slider"
136
- ></sp-slider>
137
- </div>
138
- <div><sp-switch>Overdrive</sp-switch></div>
139
- <sp-button-group id="buttons">
140
- <sp-button variant="primary" treatment="outline">
141
- Cancel
142
- </sp-button>
143
- <sp-button variant="accent">Continue</sp-button>
144
- </sp-button-group>
145
- <sp-theme color="${inner}" dir="ltr">
146
- <div id="inner">
147
- <div>
148
- <sp-slider
149
- value="5"
150
- step="1"
151
- min="1"
152
- max="11"
153
- label="Volume"
154
- id="volume-slider-inner"
155
- ></sp-slider>
156
- </div>
157
- <div><sp-switch>Overdrive</sp-switch></div>
158
- <sp-button-group id="buttons-inner">
159
- <sp-button variant="primary" treatment="outline">
160
- Cancel
161
- </sp-button>
162
- <sp-button variant="accent">Continue</sp-button>
163
- </sp-button-group>
164
- </div>
165
- </sp-theme>
166
- </div>
167
- </sp-theme>
168
- `;
169
- };
170
- export const reverseColorNestedTheme = ({ colorStop: outer, }) => {
171
- const inner = outer === 'light' ? 'dark' : 'light';
172
- return html `
173
- <style type="text/css">
174
- #outer {
175
- width: 500px;
176
- padding: 3em;
177
- background-color: var(--spectrum-global-color-gray-100);
178
- color: var(--spectrum-global-color-gray-800);
179
- }
180
-
181
- #inner {
182
- margin-top: 2em;
183
- padding: 2em;
184
- background-color: var(--spectrum-global-color-gray-100);
185
- color: var(--spectrum-global-color-gray-800);
186
- }
187
-
188
- #buttons {
189
- margin-top: 2em;
190
- }
191
- </style>
192
- <sp-theme color="${inner}">
193
- <div id="outer">
194
- <div>
195
- <sp-slider
196
- value="5"
197
- step="1"
198
- min="1"
199
- max="11"
200
- label="Volume"
201
- id="volume-slider"
202
- ></sp-slider>
203
- </div>
204
- <div><sp-switch>Overdrive</sp-switch></div>
205
- <sp-button-group id="buttons">
206
- <sp-button variant="primary" treatment="outline">
207
- Cancel
208
- </sp-button>
209
- <sp-button variant="accent">Continue</sp-button>
210
- </sp-button-group>
211
- <sp-theme color="${outer}" dir="rtl">
212
- <div id="inner">
213
- <div>
214
- <sp-slider
215
- value="5"
216
- step="1"
217
- min="1"
218
- max="11"
219
- label="Volume"
220
- id="volume-slider-inner"
221
- ></sp-slider>
222
- </div>
223
- <div><sp-switch>Overdrive</sp-switch></div>
224
- <sp-button-group id="buttons-inner">
225
- <sp-button variant="primary" treatment="outline">
226
- Cancel
227
- </sp-button>
228
- <sp-button variant="accent">Continue</sp-button>
229
- </sp-button-group>
230
- </div>
231
- </sp-theme>
232
- </div>
233
- </sp-theme>
234
- `;
235
- };
236
- //# sourceMappingURL=theme.stories.js.map
package/stories/theme.stories.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"theme.stories.js","sourceRoot":"","sources":["theme.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8CAA8C,CAAC;AACtD,OAAO,0DAA0D,CAAC;AAClE,OAAO,8CAA8C,CAAC;AACtD,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAGrE,eAAe;IACX,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,OAAO,EAAE;gBACL,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;aAC7B;SACJ;KACJ;IACD,IAAI,EAAE;QACF,SAAS,EAAE,OAAO;KACrB;CACJ,CAAC;AAEF,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBvB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACpB,SAAS,EAAE,KAAK,GAGnB,EAAkB,EAAE;IACjB,OAAO,IAAI,CAAA;UACL,WAAW;2BACM,KAAK;;;;;;;;;;;;;;;;;;;;;KAqB3B,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;CAkBpD,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAmB,EAAE,CAAC,IAAI,CAAA;MACxC,WAAW;;;;;;;;;;;;;;;;;;;CAmBhB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EACxB,SAAS,EAAE,KAAK,GAGnB,EAAkB,EAAE;IACjB,MAAM,KAAK,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,OAAO,IAAI,CAAA;UACL,WAAW;2BACM,KAAK;;;;;;;;;;;;;;;;;;;mCAmBG,KAAK;;;;;;;;;;;;;;;;;;;;;;;KAuBnC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACpC,SAAS,EAAE,KAAK,GAGnB,EAAkB,EAAE;IACjB,MAAM,KAAK,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;2BAoBY,KAAK;;;;;;;;;;;;;;;;;;;mCAmBG,KAAK;;;;;;;;;;;;;;;;;;;;;;;KAuBnC,CAAC;AACN,CAAC,CAAC","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*/\nimport '../sp-theme.js';\nimport '../src/themes.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { Color } from '../src/index.js';\n\nexport default {\n component: 'sp-theme',\n title: 'Theme',\n argTypes: {\n colorStop: {\n control: {\n type: 'inline-radio',\n options: ['light', 'dark'],\n },\n },\n },\n args: {\n colorStop: 'light',\n },\n};\n\nconst storyStyles = html`\n <style type=\"text/css\">\n #outer,\n #example {\n width: 500px;\n padding: 3em;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n }\n\n #inner {\n margin-top: 2em;\n padding: 2em;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n }\n\n #buttons {\n margin-top: 2em;\n }\n </style>\n`;\n\nexport const Default = ({\n colorStop: color,\n}: {\n colorStop: Color;\n}): TemplateResult => {\n return html`\n ${storyStyles}\n <sp-theme color=\"${color}\">\n <div id=\"example\">\n <div>\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"1\"\n max=\"11\"\n label=\"Volume\"\n id=\"volume-slider\"\n ></sp-slider>\n </div>\n <div><sp-switch>Overdrive</sp-switch></div>\n <sp-button-group id=\"buttons\">\n <sp-button variant=\"primary\" treatment=\"outline\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\">Continue</sp-button>\n </sp-button-group>\n </div>\n </sp-theme>\n `;\n};\n\nexport const displayFlex = (): TemplateResult => html`\n <style type=\"text/css\">\n #flex-theme {\n display: flex;\n flex-direction: row;\n }\n #flex-theme sp-button {\n flex: 0 0;\n }\n #flex-theme #middle-button {\n flex: 1 0;\n }\n </style>\n <sp-theme id=\"flex-theme\" color=\"dark\">\n <sp-button>Start</sp-button>\n <sp-button id=\"middle-button\">Middle</sp-button>\n <sp-button>End</sp-button>\n </sp-theme>\n`;\n\nexport const none = (): TemplateResult => html`\n ${storyStyles}\n <div id=\"example\">\n <div>\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"1\"\n max=\"11\"\n label=\"Volume\"\n id=\"volume-slider\"\n ></sp-slider>\n </div>\n <div><sp-switch>Overdrive</sp-switch></div>\n <sp-button-group id=\"buttons\">\n <sp-button variant=\"primary\" treatment=\"outline\">Cancel</sp-button>\n <sp-button variant=\"accent\">Continue</sp-button>\n </sp-button-group>\n </div>\n <sp-theme></sp-theme>\n`;\n\nexport const nestedTheme = ({\n colorStop: outer,\n}: {\n colorStop: Color;\n}): TemplateResult => {\n const inner = outer === 'light' ? 'dark' : 'light';\n return html`\n ${storyStyles}\n <sp-theme color=\"${outer}\">\n <div id=\"outer\">\n <div>\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"1\"\n max=\"11\"\n label=\"Volume\"\n id=\"volume-slider\"\n ></sp-slider>\n </div>\n <div><sp-switch>Overdrive</sp-switch></div>\n <sp-button-group id=\"buttons\">\n <sp-button variant=\"primary\" treatment=\"outline\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\">Continue</sp-button>\n </sp-button-group>\n <sp-theme color=\"${inner}\" dir=\"ltr\">\n <div id=\"inner\">\n <div>\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"1\"\n max=\"11\"\n label=\"Volume\"\n id=\"volume-slider-inner\"\n ></sp-slider>\n </div>\n <div><sp-switch>Overdrive</sp-switch></div>\n <sp-button-group id=\"buttons-inner\">\n <sp-button variant=\"primary\" treatment=\"outline\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\">Continue</sp-button>\n </sp-button-group>\n </div>\n </sp-theme>\n </div>\n </sp-theme>\n `;\n};\n\nexport const reverseColorNestedTheme = ({\n colorStop: outer,\n}: {\n colorStop: Color;\n}): TemplateResult => {\n const inner = outer === 'light' ? 'dark' : 'light';\n return html`\n <style type=\"text/css\">\n #outer {\n width: 500px;\n padding: 3em;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n }\n\n #inner {\n margin-top: 2em;\n padding: 2em;\n background-color: var(--spectrum-global-color-gray-100);\n color: var(--spectrum-global-color-gray-800);\n }\n\n #buttons {\n margin-top: 2em;\n }\n </style>\n <sp-theme color=\"${inner}\">\n <div id=\"outer\">\n <div>\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"1\"\n max=\"11\"\n label=\"Volume\"\n id=\"volume-slider\"\n ></sp-slider>\n </div>\n <div><sp-switch>Overdrive</sp-switch></div>\n <sp-button-group id=\"buttons\">\n <sp-button variant=\"primary\" treatment=\"outline\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\">Continue</sp-button>\n </sp-button-group>\n <sp-theme color=\"${outer}\" dir=\"rtl\">\n <div id=\"inner\">\n <div>\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"1\"\n max=\"11\"\n label=\"Volume\"\n id=\"volume-slider-inner\"\n ></sp-slider>\n </div>\n <div><sp-switch>Overdrive</sp-switch></div>\n <sp-button-group id=\"buttons-inner\">\n <sp-button variant=\"primary\" treatment=\"outline\">\n Cancel\n </sp-button>\n <sp-button variant=\"accent\">Continue</sp-button>\n </sp-button-group>\n </div>\n </sp-theme>\n </div>\n </sp-theme>\n `;\n};\n"]}